.contenido {
   font-size: 18px;
   display: flex;
}

.contenido>div {
   position: relative;
}

.componentesContent {
   width: 50%;
   z-index: 2;
}

.componentesDestino {
   width: 50%;
}

#listaComponentes {
   display: flex;
   flex-wrap: wrap;
}

.componente {
   cursor: url(../img/cursor-grab.cur), url(../img/cursor-grab.png), move;
   display: inline-grid;
   grid-template-columns: 1fr 30%;
   align-items: center;
   justify-content: center;
   padding: 5px;
   margin: 13px auto;
   max-width: 330px;
   min-height: 80px;
   width: 49%;
   transform: scale(0.9);
   transition: transform 0.1s;
   z-index: 50;
   border-radius: 12px;
   box-shadow: 5px 7px 0px rgba(0, 0, 0, 0.15);
   color: #fff;
   line-height: 2;
   font-size: 20px;
   -webkit-transition: transform 0.1s;
   -moz-transition: transform 0.1s;
   -ms-transition: transform 0.1s;
   -o-transition: transform 0.1s;
}

@media (max-width: 992px) {
   .componente {
      grid-template-columns: 1fr;
   }
}

.ui-draggable-dragging {
   transition: transform .3s;
   cursor: url(../img/cursor-grabbing.cur), url(../img/cursor-grabbing.png), move;
   transform: scale(.8);
   z-index: 9;
   -webkit-transition: transform .3s;
   -moz-transition: transform .3s;
   -ms-transition: transform .3s;
   -o-transition: transform .3s;
}

.componente p {
   display: inline-block;
   vertical-align: middle;
   margin: 0;
   padding: 5px;
   line-height: 1.2;
}

@media (max-width: 500px) {
   .componente p {
      display: block;
      text-align: center;
   }
}

.componente img {
   width: 100%;
   max-width: 50px;
   height: auto;
   max-height: 100px;
   margin-left: auto;
   margin-right: auto;
   display: inline-block;
   border-radius: 5px;
   vertical-align: middle;
}

@media (max-width: 500px) {
   .componente img {
      width: 100%;
      display: block;
      text-align: center;

   }
}

.componente--1,
.componente--4,
.componente--7 {
   background-color: #F07F13;
}

.componente--2,
.componente--5 {
   background-color: #43C11F;
}

.componente--3,
.componente--6 {
   background-color: #FFC000;
}

/*#lista-componentes .componente:nth-child(even) img{
   border: 2px solid #016d38;
}
#lista-componentes .componente:nth-child(odd) img {
   border: 2px solid #49a5aa;
}*/

.container-draggable {
   min-height: 18em;
   width: 97%;
   vertical-align: top;
   border: solid 4px #016d38 !important;
   border-radius: 25px;
}

#calificar {
   margin-top: 30px;
}

#contenedorA {
   margin: 30px auto;
   max-width: 450px;
   width: 100%;
   background-color: #fff0c0;
   background-image: url(../img/actividad-1-cv.png);
   background-position: bottom center;
   background-repeat: no-repeat;
   background-size: contain;
}

#contenedorA .componente {
   width: 30%;
   grid-template-columns: 1fr;
}

@media (max-width: 575px) {
   #contenedorA .componente {
      width: 33%;
   }
}

#contenedorA .componente p {
   display: none;
}

#contenedorA .componente img {
   width: 100%;
   max-width: 100%;
}

.derecha {
   text-align: center;
}

.intentos {
   margin: 0.8em auto;
   border-radius: 10px;
   padding: 5px 30px;
   display: table;
   position: relative;
   left: 0px;
   font-weight: bold;
   color: #016d38;
   background: #ffdc5d;
}

.texto-intentos {
   margin: auto;
   font-size: 1.6em;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
}

.titulo-destino {
   position: absolute;
   z-index: 9;
   top: 100px;
   left: 0;
   right: 0;
   width: 25%;
   width: 40%;
   background: #fff;
   color: #fff;
   font-size: 22px;
   padding: 9px;
   margin: 5px auto;
   border-radius: 12px;
   box-shadow: 7px 7px 0px rgba(0, 0, 0, 0.41);
}

.titulo-destino img {
   height: 30px;
}

@media (max-width: 575px) {
   .contenido {
      font-size: 13px;
      flex-direction: column;
   }

   .contenido>div {
      width: 100%;
   }

   .titulo-destino {
      top: 90px;
      font-size: 16px;
      padding: 6px;
      border-radius: 8px;
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.41);
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
   }

   .componente {
      display: inline-flex;
      flex-direction: column;
      font-size: 18px;
   }
}

@media (min-width: 576px) and (max-width: 767px) {
   .contenido {
      font-size: 18px;
   }

   #lista-componentes .componente {
      line-height: 1;
      margin: 8px auto;
      padding: 10px;
   }
}

@media (min-width: 768px) and (max-width: 869px) {
   .contenido {
      font-size: 15px;
   }

   .titulo-destino {
      font-size: 1em;
   }

   #lista-componentes .componente {
      margin: 10px auto;
      line-height: 1;
      padding: 10px;
   }
}

@media (min-width: 870px) and (max-width: 1039px) {
   .contenido {
      font-size: 17px;
   }
}

@media (min-width: 1040px) and (max-width: 1199px) {
   .contenido {
      font-size: 18px;
   }
}