@charset "utf-8";
/* CSS Document */

ol.instrucciones-numeros>li::before {
      height: 3.5rem;
      padding: .5rem;
}

/*-----Para Inglés-----*/

/*Traduccion*/

.traduccion {
	margin: .5rem;
}
.traduccion-btn {
	background: #4f344b;
	color: #fff;
	padding: 0.5rem;
	margin: 0rem 1rem 2rem 0rem;
}
.traduccion-box {
	background: #ececec !important;
	margin: 0.5rem 1rem 0.5rem 6rem;
}
/*Resaltar contenido*/

.resaltar-top {
	background: #d8d8d8;
	padding: 2rem 2rem 0rem 2rem;
	border-bottom: #c9c9c9 solid 1rem;
	font-weight: 600;
}

.resaltar-gris {
	background: #f8f8f8;
	padding: 2rem;
	font-size: 1.6rem;
}

.resaltar-azul {
	background: #f2f9ff;
	padding: 2rem;
	font-size: 1.6rem;
}

/*Reproducir audio*/
.fa-volume-up {
	cursor: pointer;
	color: #445696;
}

.fa-volume-up:hover {
	color: #934998;
}
	
.audioList {
    color: #7c6592;
	padding: 0.5rem;
}


/*Subtitulos*/

.subti-box{
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 600;
	font-size: 1.8rem;
	line-height: 1.3;
}

/* BOTON TRADUCCION Amarillo*/
p.intrucciones-traduccion {
  font-weight: 600;
  font-size: 1.8rem;
  padding: 1.5rem 0rem;
  margin-bottom: 0;
}

.intrucciones-traduccion a {
  margin-right: 1rem;
}

.btn-traduccion {
  color: #111111;
  background-color: #FFDD40;
  border-color: #FFDD40;
  font-size: 1.4rem !important;
  font-weight: 800;
}

.btn-traduccion:hover {
  color: #8e7500;
  background-color: #ffe673;
  border-color: #ffe673;
}

.btn-traduccion:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 221, 64, 0.5);
  color: #8e7500;
}

.border-instruccion {
  border-color: rgba(255, 221, 64, 0.5) !important;
  background-color: rgba(255, 221, 64, 0.1) !important;
}
/* BOTON TRADUCCION */
/* FONDO FLUIDO COLOR */
.fondo-fluido-morado {
      position: relative;
      z-index: 1;
      width: 100%;
      /*margin-bottom: 5rem;*/
    }

    .fondo-fluido-morado:before {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      top: 0;
      width: 100vw;
      height: 100%;
      transform: translateX(-50%);
      z-index: 0;
      background-color: #3d1b3f;
    }

    .contenido-fluido-morado  {
      /*padding: 5rem 0 0 0;*/
      color: #FFFFFF;
    }
    .img-fluido-morado {
      margin-bottom: -3rem;
    }    
        @media screen and (max-width: 991px) {
      .img-fluido-morado {
        margin-bottom: 3rem;
      }

      .contenido-fluido-morado {
        padding: 0 0 5rem 0;
      }

      /*.fondo-intro-oa {*/
      /*  margin-bottom: 2rem;*/
      /*}*/
      
      .contenido-fluido-morado .img-fancybox {
        margin-bottom: 3rem;
      }
    }
    /* FONDO FLUIDO COLOR */
    
        /* FANCYBOX */
        .borde-color-img {
            position: relative;
            z-index: 1;
            padding: 30px 30px 0 30px;
        }

        .borde-color-img:before {
            content: "";
            display: block;
            background: #724b6d;
            width: 100%;
            height: 75%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .fancybox-hover:hover:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(114, 75, 109, 0.5);
            mix-blend-mode: multiply;
        }

        /* FANCYBOX */    
    
/* INTRO */
.fondo-color-morado-intro {
  background-color: #724b6d;
  width: 100%;
}

.proposito-intro {
  margin-left: -15rem;
  background-color: #FFFFFF;
  color: #111111;
  font-weight: 800;
}

.proposito-intro-morado-r {
  margin-right: -15rem;
  background-color: #724b6d;
  color: #FFFFFF;
  z-index: 9;
  position: relative;
}

.img-margin-15 {
  margin-left: -15rem;
  margin-top: -15rem;
}

.fondo-color-img {
  background-color: #724b6d;
  height: 31.3vh;
}

.video-intro-fondo {
  margin-top: -3rem;
  margin-left: -3rem;
}
/* INTRO */

    figcaption {
        border-left: 4px solid #a1a1a1;
        padding-left: 10px;
        color: #858585;
        font-size: 1.5rem;
        margin-top: 1rem;
        position:relative;
    }
    
    .rosa{
        color:lightcoral;
    }