@font-face {
  font-family: "AvenirLTStd-Black";
  src: url(../fonts/AvenirLTStd-Black.ttf), url(../fonts/AvenirLTStd-Black.eot), url(../fonts/AvenirLTStd-Black.otf);
}

@font-face {
  font-family: "AvenirLTStd-Roman";
  src: url(../fonts/AvenirLTStd-Roman.ttf), url(../fonts/AvenirLTStd-Roman.eot), url(../fonts/AvenirLTStd-Roman.otf);
}

@font-face {
  font-family: "AvenirLTStd-HeavyOblique";
  src: url(../fonts/AvenirLTStd-HeavyOblique.ttf), url(../fonts/AvenirLTStd-HeavyOblique.eot), url(../fonts/AvenirLTStd-HeavyOblique.otf);
}






.slidercuidarium{width: 100%; height: 95vh; padding: 0; margin: 0;}


@media(max-width: 1200px){ 
  .slidercuidarium{width: 100%; height: 70vh; padding: 0; margin: 0;}
}
/*
@media(max-width: 1000px){ 
  .slidercuidarium{width: 100%; height: 65vh; padding: 0; margin: 0;}
}

@media(max-width: 500px){ 
  .slidercuidarium{width: 100%; height: 55vh; padding: 0; margin: 0;}
}
*/

.overlayimage {
  position: relative;
  width: 100%;
}

.overlayimage__img {
  display: block;
  width: 100%;
}

.overlayimage__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.overlayimage__overlay--blur {
  backdrop-filter: blur(5px);
}

.overlayimage__overlay--primary {
  background: rgba(124, 107, 219, 0.9);
}

.overlayimage__overlay > * {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.overlayimage__overlay:hover {
  opacity: 1;
}

.overlayimage__overlay:hover > * {
  transform: translateY(0);
}

.overlayimage__title {
  font-size: 1.5em;
  font-weight: bold;
}

.overlayimage__description {
  font-size: 0.9em;
  margin-top: 0.25em;
  padding: 1em;
}

/*==================botones rombos giratorios======================*/

.btnvideosverone{
  margin: -265px 0 50px 0;
  text-align: center;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
  }
  .btnvideosverone img{width: 40%;}
  
  .btnvideosverone:hover{
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
  }
  
  
  @media(max-width: 1600px){ .btnvideosverone{margin: -230px 0 50px 0;}}
  @media(max-width: 1500px){ .btnvideosverone{margin: -110px 0 50px 0;}}
  @media(max-width: 1400px){ .btnvideosverone{margin: -95px 0 50px 0;}}
  @media(max-width: 1300px){ .btnvideosverone{margin: -80px 0 50px 0;}}
  @media(max-width: 1200px){ .btnvideosverone{margin: -70px 0 50px 0;}}
  @media(max-width: 992px){ .btnvideosverone{margin: -120px 0 50px 0;}}
  @media(max-width: 850px){ .btnvideosverone{margin: -100px 0 50px 0;}}
  @media(max-width: 768px){ .btnvideosverone{margin: -130px 0 50px 0;}}
  @media(max-width: 650px){ .btnvideosverone{margin: -110px 0 50px 0;}}
  @media(max-width: 575px){ 
    .btnvideosverone{margin: -170px 0 50px 0;}
    .btnvideosverone img{width: 35%;}
  }
  @media(max-width: 500px){ .btnvideosverone{margin: -140px 0 50px 0;}}
  @media(max-width: 400px){ .btnvideosverone{margin: -130px 0 50px 0;}}
  @media(max-width: 300px){ .btnvideosverone{margin: -80px 0 50px 0;}}
  


.btnvideosvertwo{
margin: -150px 0 50px 0;
text-align: center;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
}
.btnvideosvertwo img{width: 40%;}

.btnvideosvertwo:hover{
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
}


@media(max-width: 1600px){ .btnvideosvertwo{margin: -120px 0 50px 0;}}
@media(max-width: 1500px){ .btnvideosvertwo{margin: -110px 0 50px 0;}}
@media(max-width: 1400px){ .btnvideosvertwo{margin: -95px 0 50px 0;}}
@media(max-width: 1300px){ .btnvideosvertwo{margin: -80px 0 50px 0;}}
@media(max-width: 1200px){ .btnvideosvertwo{margin: -70px 0 50px 0;}}
@media(max-width: 992px){ .btnvideosvertwo{margin: -120px 0 50px 0;}}
@media(max-width: 850px){ .btnvideosvertwo{margin: -100px 0 50px 0;}}
@media(max-width: 768px){ .btnvideosvertwo{margin: -130px 0 50px 0;}}
@media(max-width: 650px){ .btnvideosvertwo{margin: -110px 0 50px 0;}}
@media(max-width: 575px){ 
  .btnvideosvertwo{margin: -170px 0 50px 0;}
  .btnvideosvertwo img{width: 35%;}
}
@media(max-width: 500px){ .btnvideosvertwo{margin: -140px 0 50px 0;}}
@media(max-width: 400px){ .btnvideosvertwo{margin: -130px 0 50px 0;}}
@media(max-width: 300px){ .btnvideosvertwo{margin: -80px 0 50px 0;}}


/*==================botones rombos giratorios======================*/



@media(max-width: 1200px){ 
  .titleprogramate h2, .titleleenos h2, .titleescuchanos h2{font-size: 2.5em;} 
  }


  @media(max-width: 575px){ 
    .titleprogramate, .titleleenos, .titleescuchanos{padding: 1em;} 
    .titleprogramate h2, .titleleenos h2, .titleescuchanos h2{font-size: 1.5em;} 
    .titlesiente{padding: 1em;}
    .titlesiente h2{font-size: 1.5em;}

    .titlecuentos1 h2, .titlecuentos2 h2{font-size: 1.2em;}
    .imgcuentos {width: 100%;}

    .calendar01 h3, .calendar02 h3, .calendar03 h3{font-family: "AvenirLTStd-Black"; color: #ffffff; font-size: 2em;}
    }

/*---------------------- SUBTÍTULOS DE APARTADOS ------------------------*/


/*---------------------- ROMBOS Y TRIANGULOS ------------------------*/

.rombo001 {
  width: 150px; 
  height: 150px; 
  border: solid 20px rgba(213, 180, 255, 0.7);
  background: rgba(148, 92, 223,0.7);
  margin: -240px 0 150px -50px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
}

.rombo001:hover{
  border: solid 20px #6c32b9;
  background: #f3f71a;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
}

.triangulo0001 {
  width: 0; 
  height: 0; 
  border-left: 80px solid #f0ad4e;
  border-top: 45px solid transparent;
  border-bottom: 43px solid transparent; 
  -webkit-transform: rotate(230deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;
}

.triangulo0001:hover {
  border-left: 80px solid #6c32b9;
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;
}




.rombo011{  border: solid 10px #9bb11f; background: #d9ef5b;}
.rombo012{  border: solid 10px #d44b4b; background: #f09999;}
.rombo013{  border: solid 10px #d88623; background: #ffb966;}

.rombo011, .rombo012, .rombo013 {
  width: 90px; 
  height: 90px; 
  margin: -160px 0 150px 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
}

.rombo011:hover, .rombo012:hover, .rombo013:hover{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
}

.rombo011:hover{ border: solid 10px #f09999; background: #971d1d;}
.rombo012:hover{ border: solid 10px #99bcf0; background: #1d2f97;}
.rombo013:hover{ border: solid 10px #99f0d6; background: #1d9778;}



.triangulo0011, .triangulo0012, .triangulo0013 {
  width: 0; 
  height: 0; 
  border-left: 48px solid #ffffff;
  border-top: 30px solid transparent;
  border-bottom: 25px solid transparent; 
  -webkit-transform: rotate(230deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;
}

.triangulo0011:hover, .triangulo0012:hover, .triangulo0013:hover {
  border-left: 48px solid #fff;
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;
}


.rombo021{  border: solid 10px #1f35b1; background: #5b65ef;}
.rombo022{  border: solid 10px #d44b4b; background: #f09999;}
.rombo023{  border: solid 10px #d88623; background: #ffb966;}

.rombo021, .rombo022, .rombo023 {
  width: 90px; 
  height: 90px; 
  margin-bottom: 3em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
}

.rombo021:hover, .rombo022:hover, .rombo023:hover{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
}

.textootrasentradas1{font-family: "AvenirLTStd-Black"; color: #5b65ef; font-size: 1.5em;}


.arreglobtnrombos{padding: 0;}



@media(max-width: 1200px){ 
  
  .barrafndmainvideo{display: none;}

  .rombo001 {
    width: 100px; 
    height: 100px; 
    border: solid 10px rgba(213, 180, 255, 0.7);
    background: rgba(148, 92, 223,0.7);
    margin: -180px 0 150px -30px;
  }
  
  .rombo001:hover{border: solid 10px #6c32b9;background: #f3f71a;}
  
  .triangulo0001 {
    width: 0; 
    height: 0; 
    border-left: 52px solid #f0ad4e;
    border-top: 30px solid transparent;
    border-bottom: 28px solid transparent; 
} 
  .triangulo0001:hover {
    border-left: 52px solid #6c32b9;
    border-top: 30px solid transparent;
    border-bottom: 28px solid transparent; 
}


.rombo011{  border: solid 8px #9bb11f; background: #d9ef5b;}
.rombo012{  border: solid 8px #d44b4b; background: #f09999;}
.rombo013{  border: solid 8px #d88623; background: #ffb966;}

.rombo011, .rombo012, .rombo013 {
  width: 60px; 
  height: 60px; 
  margin: -120px 0 90px 0;
}


.rombo011:hover{ border: solid 8px #f09999; background: #971d1d;}
.rombo012:hover{ border: solid 8px #99bcf0; background: #1d2f97;}
.rombo013:hover{ border: solid 8px #99f0d6; background: #1d9778;}
.triangulo0011, .triangulo0012, .triangulo0013 {
  border-left: 33px solid #ffffff; 
  border-top: 17px solid transparent; 
  border-bottom: 17px solid transparent; 
}
.triangulo0011:hover, .triangulo0012:hover, .triangulo0013:hover { 
  border-left: 33px solid #ffffff; 
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
}

.rombo021{  border: solid 7px #1f35b1; background: #5b65ef;}
.rombo022{  border: solid 7px #d44b4b; background: #f09999;}
.rombo023{  border: solid 7px #d88623; background: #ffb966;}

.rombo021, .rombo022, .rombo023 {
  width: 60px; height: 60px; margin-bottom: 3em;}
.textootrasentradas1{font-family: "AvenirLTStd-Black"; color: #5b65ef; font-size: 1.3em;}



.entradasvideos{margin: -30px 0 0 0; font-size: 1.2em;} 


}



@media(max-width: 992px){ 


  .rombo001 {
    width: 90px; 
    height: 90px; 
    border: solid 10px rgba(213, 180, 255, 0.7);
    background: rgba(148, 92, 223,0.7);
    margin: -150px 0 100px -30px;

  }
  
  .rombo001:hover{border: solid 10px #6c32b9;background: #f3f71a;}
  
  .triangulo0001 {
    width: 0; 
    height: 0; 
    border-left: 46px solid #f0ad4e;
    border-top: 25px solid transparent;
    border-bottom: 24px solid transparent; 
} 
  .triangulo0001:hover {
    border-left: 52px solid #6c32b9;
    border-top: 30px solid transparent;
    border-bottom: 28px solid transparent; 
}

  .triangle-topleft {margin-top: -30px;}
  .triangle-topleft h3 {font-size: 2.5em;}
  .descriptonmainvideo{ position: relative; background: #ffee57; border-radius: 1em; padding: 1em; text-align: center;}
  .descriptonmainvideo h4{font-size: 1.5em;}

.rombo011{  border: solid 8px #9bb11f; background: #d9ef5b;}
.rombo012{  border: solid 8px #d44b4b; background: #f09999;}
.rombo013{  border: solid 8px #d88623; background: #ffb966;}

.rombo011, .rombo012, .rombo013 {
  width: 60px; 
  height: 60px; 
  margin: -100px 0 90px -20px;
}

.rombo011:hover{ border: solid 8px #f09999; background: #971d1d;}
.rombo012:hover{ border: solid 8px #99bcf0; background: #1d2f97;}
.rombo013:hover{ border: solid 8px #99f0d6; background: #1d9778;}
.triangulo0011, .triangulo0012, .triangulo0013 {
  border-left: 33px solid #ffffff; 
  border-top: 17px solid transparent; 
  border-bottom: 17px solid transparent; 
}
.triangulo0011:hover, .triangulo0012:hover, .triangulo0013:hover { 
  border-left: 33px solid #ffffff; 
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
}

.rombo021{  border: solid 7px #1f35b1; background: #5b65ef;}
.rombo022{  border: solid 7px #d44b4b; background: #f09999;}
.rombo023{  border: solid 7px #d88623; background: #ffb966;}

.rombo021, .rombo022, .rombo023 {
  width: 60px; height: 60px; margin-bottom: 2em;}
.textootrasentradas1{font-family: "AvenirLTStd-Black"; color: #5b65ef; font-size: 1em;}


.arreglobtnrombos{padding: 0 30% 0 30%;}
.entradasvideos{margin: -30px 0 0 0; font-size: 1.5em;} 

}




@media(max-width: 768px){

  .mainbackground{min-height: auto;}
  .rombo001 { margin: -120px 0 0 -37px; }
  .rombo011, .rombo012, .rombo013{width: 90px; height: 90px; margin: -170px 0 150px 0;}
  .rombo021, .rombo022, .rombo023 {width: 90px; height: 90px;}


  .triangulo0011, .triangulo0012, .triangulo0013 {
    width: 0; 
    height: 0; 
    border-left: 48px solid #ffffff;
    border-top: 30px solid transparent;
    border-bottom: 25px solid transparent; 
    -webkit-transform: rotate(230deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
    -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;
  }
  
  .triangulo0011:hover, .triangulo0012:hover, .triangulo0013:hover {
    border-left: 48px solid #fff;
    border-top: 30px solid transparent;
    border-bottom: 25px solid transparent; 
    -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;
  }


  .entradasvideos{margin: -50px 0 0 0; font-size: 1.2em;} 
  

}



@media(max-width: 575px){

  .rombo001 { margin: -160px 0 20px 37%; }
  .rombo011, .rombo012, .rombo013{margin: -150px 0 150px 35%;}
  .rombo021, .rombo022, .rombo023 {width: 60px; height: 60px;}





  .entradasvideos{margin: -50px 0 0 0; font-size: 1.2em;} 
  
}


@media(max-width: 410px){

  .rombo001 { margin: -140px 0 0 37%; }
  .rombo011, .rombo012, .rombo013 {margin: -120px 0 150px 40%;}

}

/*---------------------- ROMBOS Y TRIANGULOS ------------------------*/


.podcastlistpadding {background-image: url("../../escucha/img/fnd-frecuencia-audio.png"); background-size: 70%; background-position: bottom center; background-repeat: no-repeat; padding: 1em 1em 3em 1em;}

.ucuidarium{width: auto; padding: 0;}

@media(max-width: 1200px){
  .ucuidarium{width: 100%; padding: 0 40% 0 40%;}
}




.entradasvideos{margin: -70px 0 0 0; padding: 1.5em; color: #6546b9; font-family: "AvenirLTStd-Black"; text-align: center; font-size: 1.5em;} 
.entradasvideos p{color: #414141;  font-family: "AvenirLTStd-Roman"; line-height: 1.3em; font-size: 0.8em;} 

.entradaarticulos{ padding: 1.5em; color: #1f35b1; font-family: "AvenirLTStd-Black"; text-align: center; font-size: 1.5em;} 
.entradaarticulos p{color: #414141;  font-family: "AvenirLTStd-Roman"; font-size: 0.8em;} 


@media(max-width: 1200px){ 
  .entradasvideos{margin: -30px 0 0 0; font-size: 1.2em;} 
}


@media(max-width: 992px){ 
  .entradasvideos{margin: -30px 0 0 0; font-size: 1.5em;} 
}

@media(max-width: 768px){ 
  .entradasvideos{margin: -50px 0 0 0; font-size: 1.2em;} 
}

@media(max-width: 575px){ 
  .entradasvideos{margin: -50px 0 0 0; font-size: 1.2em;} 
}