.contentEmparejamiento {
   --emparejamiento__anchoMaximo: 780px;

   --tarjeta1__anchoMaximo: 280px;
   --tarjeta1__colorFondo: #fff;
   --tarjeta1__colorBorde: #016D38;
   --tarjeta1__colorTexto: #016D38;
   --tarjeta1__fontSize: 30px;

   --tarjeta2__anchoMaximo: 280px;
   --tarjeta2: #016D38;
   --tarjeta2__fontSize: 22px;
   --tituloTarjeta: #FFDC5D;

   --indicador__colorFondo: #016D38;
   --indicadorActivo__colorBorde: #016D38;
   --indicadorActivo__colorFondo: #fff;

   --flechas__colorFondo: #016D38;
   --flechas__tamano: 20px;
}

@media (max-width: 767px) {
   .contentEmparejamiento {
      --tarjeta1__fontSize: 25px;

      --tarjeta2__fontSize: 20px;
   }
}

.emparejamiento {
   display: flex;
   flex-flow: row wrap;
   max-width: var(--emparejamiento__anchoMaximo);
   background-color: #e5e5e5;
   padding: 15px 1px;
   border-radius: 15px;
   margin: 10px auto 20px;
}

/*-- Grupo A --*/

.itemEmparejamiento {
   display: inline-flex;
   flex-flow: column;
   justify-content: center;
   align-items: center;
   background-color: var(--tarjeta1__colorFondo);
   border: 2px dashed var(--tarjeta1__colorBorde);
   padding: 10px;
   border-radius: 15px;
   min-height: calc(100% - 15px);
   max-width: var(--tarjeta1__anchoMaximo);
   width: 100%;
   margin-bottom: 15px;
}

.tituloItem {
   text-align: center;
   color: var(--tarjeta1__colorTexto);
   font-size: var(--tarjeta1__fontSize);
   line-height: 1.2;
   font-weight: bold;
   margin-bottom: 0;
}

/*=== Fin Grupo A ===*/

/*=== Grupo B ===*/

.item {
   width: 100%;
   background-color: var(--tarjeta2);
   padding: 10px 8px 15px;
   border-radius: 15px;
   background-image: url(../img/pattern.png);
   background-size: 120%;
   background-position: center;
   background-blend-mode: color-burn;
}

.item.active {
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: flex-start;
}

.imgPregunta {
   --espacioAlBorde: 5px;
   height: calc(100% - var(--espacioAlBorde) * 2);
   position: absolute;
   width: calc(100% - var(--espacioAlBorde) * 2);
   background-color: #FFDC5D;
   background-image: url(../img/pattern.png);
   background-size: 120%;
   background-position: center;
   background-blend-mode: color-burn;
   top: var(--espacioAlBorde);
   left: var(--espacioAlBorde);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.item__img {
   border-radius: 10px;
   max-width: 100%;
}

.item__texto {
   color: #fff;
   margin-top: 10px;
   margin-bottom: 0;
   line-height: 1.2;
   font-size: var(--tarjeta2__fontSize);
}

.carousel {
   display: inline-block;
   max-width: var(--tarjeta2__anchoMaximo);
   width: 100%;
   margin-bottom: 15px;
}

/*-- Flechas --*/

.carousel-control {
   font-size: var(--flechas__tamano);
   line-height: 1.2;
}

.carousel-control .glyphicon {
   background-color: var(--flechas__colorFondo);
   border-radius: 50%;
   width: 32px;
   height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: .9em;
}

.carousel-control.right,
.carousel-control.left {
   background-image: none;
   height: 40px;
   top: 50%;
   transform: translateY(-50%);
}

.carousel-control.right {
   right: calc(-15% - 8px);
}

.carousel-control.left {
   left: calc(-15% - 8px);
}

@media (max-width: 767px) {

   .carousel-control.right,
   .carousel-control.left {
      top: 16%;
      opacity: 1;
   }

   .carousel-control.right {
      right: -11%;
   }

   .carousel-control.left {
      left: -11%;
   }
}

/*-- Fin Flechas --*/

/*-- Puntos indicadores --*/

.carousel-indicators {
   bottom: -25px;
   position: absolute;
   width: 100%;
   margin-left: -50%;
}

.carousel-indicators li {
   background-color: var(--indicador__colorFondo);
   border: none;
   width: 10px;
   height: 10px;
}

.carousel-indicators .active {
   border: 2px solid var(--indicadorActivo__colorBorde);
   background-color: var(--indicadorActivo__colorFondo);
   width: 11px;
   height: 11px;
}

/*-- Fin Puntos indicadores --*/

/*-- Efecto del carrusel --*/

.carousel-inner>.item.active,
.carousel-inner>.item.next.left,
.carousel-inner>.item.prev.right {
   -webkit-transform: rotateY(0deg);
   transform: rotateY(0deg);
}

.carousel-inner>.item.next.left {
   -webkit-transform: rotateY(-90deg);
   transform: rotateY(-90deg);
}

.carousel-inner>.item.active.left,
.carousel-inner>.item.prev {
   -webkit-transform: rotateY(90deg);
   transform: rotateY(90deg);
}

.carousel-inner>.item.prev.right {
   -webkit-transform: rotateY(90deg);
   transform: rotateY(90deg);
}

.carousel-inner>.item.active.right,
.carousel-inner>.item.next {
   -webkit-transform: rotateY(-90deg);
   transform: rotateY(-90deg);
}

.carousel-inner>.active.left,
.carousel-inner>.active.right,
.carousel-inner>.left,
.carousel-inner>.right {
   left: 0;
}

/*-- Fin Efecto del carrusel --*/

/*-- Fin Grupo B --*/

.redi__calificar {
   position: sticky;
   bottom: 10px;
   z-index: 99;
}

.redi__contenido {
   overflow: initial;
}