/*//////////////////// whatsApp /////////////////////*/

.appWhatsapp {
  position: fixed;
  right: 30px;
  bottom: 25px;
  width: 50px;
  z-index: 150;
  background-color: transparent;
}

.appWhatsapp img {
  width: 100%;
  height: auto;
  z-index: 150;
  background-color: transparent;
}


 /*///////////////  Promociones ////////////////////////*/



.clsBotonePromocion {
  width: 100%; 
  height: 30px; 
  background-color:  transparent;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.clsBotonePromocion div {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.7);
}


.clsBotonePromocion div:hover {
   background-color: rgba(202,202,94,0.7);
}

.clsBotonePromocionSelect {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(202,202,94,0.8);
  box-shadow: 0px 0px 9px  0px #fff;
}

 .clsPromoEvento {
  width: 100%; 
  border: none; 
  height:  360px; 
  position: relative; 
  background-color: transparent; 
  overflow: hidden;
}

.clTituloPromo {
  position: absolute; 
  top: -70px; 
  z-index: 100; 
  text-align: center; 
  width: 100%; 
  border: solid 1px; 
  height: 60px; 
  justify-content: center;
  font-weight: bold;
  padding: 5px;
  background-color: rgba(255,255,255,0.7);

}

.clsImagenPromo {
  text-align: center; 
  position: absolute; 
  height: 360px; 
  justify-content: center; 
  width: 100%;

  background-color: transparent;
}

.clsTextoPromo {
  position: absolute; 
  bottom:  -280px; 
  text-align: justify;  
  width: 100%; 
  border: solid 1px; 
  height: 270px; 
  padding: 5px;
  background-color: rgba(255,255,255,0.7);

}


.clsSalirTituloPromo {
  position: absolute; 
  z-index: 100; 
  text-align: center; 
  width: 100%; 
  border: none; 
  height: 60px;  
  padding: 5px;
  font-weight: bold;
  justify-content: center;
  background-color: rgba(255,255,255,0.7);
  animation-duration: 3s;
  animation-name: animacionSalirTitulo;
  animation-fill-mode: forwards;
  /*animation-iteration-count: 3;*/
}

@keyFrames animacionSalirTitulo {   
  from {
      top: 0;      
    }
  to {
    top: -70px;
  }
}




.clHoverTituloPromo {
  position: absolute; 
  z-index: 100; 
  text-align: center; 
  width: 100%; 
  border: none; 
  height: 60px; 
  font-weight: bold;
  justify-content: center;  
  padding: 5px;
  background-color: rgba(255,255,255,0.7);
  animation-duration: 3s;
  animation-name: animacionTitulo;
  animation-fill-mode: forwards;
  /*animation-iteration-count: 3;*/
}

@keyFrames animacionTitulo {  
  from {
      top: -70px;      
    }
  to {
    top: 0px;
  }
}


.clsSalirTextoPromo {
  position: absolute; 
  bottom:  -80%; 
  text-align: justify;  
  width: calc(100% - 10px);  

  border: none; 
  height: 280px; /*calc(280px - 10px);  */
  padding: 5px;
  background-color: rgba(255,255,255,0.7);
  animation-duration: 3s;
    animation-name: animacionSalirTexto;
    animation-fill-mode: forwards;
    /*animation-iteration-count: 3;*/
  }

@keyFrames animacionSalirTexto { 
  from {
      bottom:  0px; 
    }
    to {
      bottom:  calc(-280px - 10px); 
    }
}

.clsHoverTextoPromo {
  position: absolute; 
  bottom:  -280px; 
  text-align: justify;  
  width: calc(100% - 10px);  

  border: none; 
  height: 280px; /*calc(280px - 10px);  */
  padding: 5px;
  background-color: rgba(255,255,255,0.7);
  animation-duration: 3s;
    animation-name: animacionTexto;
    animation-fill-mode: forwards;
    /*animation-iteration-count: 3;*/
  }

@keyFrames animacionTexto { 
  from {
      bottom:  -280px; 
    }
    to {
      bottom:  0px; 
    }
}



  /*///////////////  Página Educación //////////////////////////////*/

.clsBusqueda {
  min-height: 50px; 
  display: grid;  
  grid-template-rows: 50px;
  grid-template-columns: 35% 60% 5%; 
  align-items: center; 
  justify-content: center;
  font-size: 1.2rem;
}

.clsBusqueda div{
    font-size: 1.2rem;
}

.clsPaginacion { 
  margin-top: 30px; 
  margin-bottom: 10px; 
  display: flex;
  align-items: center;
}

.clsPaginacion div{ 
  text-align: center;
  width: 40px;
  border-radius: 5%;
  margin-right: 5px;
  border: solid 1px;
  font-size: 1.1rem;
}

.clsPaginacion div:hover{ 
  background-color: #043B5F;
  color: #FFF;
}

.clsPaginacionNoSelect { 
  display: block;
  background-color: rgb(223,236,230);
  color: #000;
}


.clsPaginacionSelect { 
  display: block;
  text-align: center;
  width: 40px;
  border-radius: 5%;
  margin-right: 5px;
  border: solid 1px;
  background-color: #043B5F;
  color: #FFF;
}

.clsPaginacionOculto {
  display: none;
}


.clsRenglonVideo {
  display: grid;  
  grid-template-rows: 269px 50px;
  grid-template-columns: 478px auto ;
  padding-bottom: 30px;
}

.clsRenglonVideo .clsVideo {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2; 
}


.clsRenglonVideo .clsTituloVideo {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
  font-weight: bold;
  text-align: center;
  font-size: 1.6rem;
}

.clsRenglonVideo .clsDescripcionVideo {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  text-align: justify;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  font-size: 1.4rem;
}



@media only screen and (orientation: landscape) {

  * {
  	font-family: Sans-serif, 'PT Sans', Verdana, sans-serif, web-safe fonts;
  	font-size: 1.5vw;
  	font-stretch: ultra-condensed;
  	font-weight: 100;
  	background-color: rgb(223,236,230);	
  }

  #divMenuOculto {
    position: absolute;   
    bottom:3vh; 
    left: 0vw; 
    width: 10px; 
    background-color: transparent; 
    padding-left: 3vw; 
    z-index: 400;
    display: none;
  }

  #btn-menu {
    display: none;
  }

  .iconoMenu {
    width: 6vw;
  }


  #divMenuNavegacion {
    position: absolute;   
    bottom:3vh;  
    width: 85vw; 
    background-color: transparent; 
    padding-left: 3vw; 
    z-index: 400;
  }


  .classBotonMenu {
  	height: 3.5vh; 
  	display: inline-block;   
  	background-color: transparent;
  }

  .banner2 { 
  	font: 30px Raleway, sans-serif;
  	color: #FFFFFF; 
  	text-align: left;
  	padding: 50px; 
  }

  .img{
    margin:10px auto;
    border-radius:5px;
    /*border: 1px solid #999;
    padding:13px;*/
    width:220px;
    height:220px;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    background:url(imagenes/reso.jpg) center center; 
    background-size: cover;  
  }

  .img img{
    width: 100%;
  }









  @media all and (min-width: 500px) and (max-width: 1000px)
  {  
  .img{
    margin:20px auto;
    border-radius:5px;
    /*border: 1px solid #999;
    padding:13px;*/
    width:300px;
    height:300px;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    background:url(imagenes/reso.jpg) center center;
    background-size: cover;
    
    }

  }

  .img img{
     width:100%;
  }

  #divEncabezado {
  	background-color: rgb(45,45,41); 
  	width: 100%;  
  	height: 35vh; 
  	left: 0px;
  	top: 0px; 
  	right: 0; 
  }

  #logoEncabezado {
  	position: relative; 
  	border: none; 
  	left:  5%; 
  	top: 1vh; 
  	height: 11vh; 
  	display: inline-block; 
  	background-color: rgb(255,255,255);
    overflow: hidden; 
    width: 26%; 
    vertical-align: top; 
    text-align: left;
  }

  #divTextoTelefono {
    position: relative; 
    display: inline-block; 
    background-color: #FFF; 
    top: 0.5vh; 
    width: 30%; 
  }
  #divTextoCorreo {
    position: relative; 
    display: inline-block; 
    background-color: #FFF; 
    top: 0.5vh; 
    width: 30%; 
  }
  #divRedesSociales {
    position: relative; 
    display: inline-block; 
    background-color: #FFF; 
    top: 0.5vh; 
    width: 10%;  
  }


  #divMensajeEncabezado {
    position: absolute;   
    bottom: 50%;  
    width: 75vw; 
    background-color: transparent; 
    margin-left: 5vw; 
    color: rgb(223,236,230);   
    font-size: 2.7vw; 
    text-align: right;
  }

  #divLAteralDerecho {
  	background-color: 
  	rgb(44,44,41); 
  	top: 42.2%; 
  	right: 5.4%; 
  	width: 15%; 
  	height: 77vh; 
  	z-index: 100;
  	position: absolute;;
  }

  #ifrmPrincipal {
  	display:block;  
  	border:none; 
  	width: 74%; 
  	margin-left:  5.1%; 
  	top: 46.9%; 
  	/*overflow-y: hidden;*/
  	z-index: 40;	
  	
  }

  #divTitulos {
  	height: 12%; 
  	width: 90%;
  	margin-left:  5vw;
  	background-color: rgb(255,255,255);
  	
  	top: 0; 
  	position: initial;
  }

  #divMenu {
  	position: sticky;
  	top: 0;	
  	margin-left:  5vw;
  	width: 90%;
  	height: 30%; 
  	background-color: rgb(33,90,109);
  	z-index: 200;
  	overflow: hidden;
  	
  }

  /*////////////////////////     Estilos de Somos.html ////////////////////////////////*/
  .carta-box {
    width: 70%;
    height: 20vh;
    position: relative;
    perspective: 1000px;
    display: inline-block;
  }

  .carta-box:hover .carta {
      transform: rotateX(180deg);
  }

  .carta {
    transform-style: preserve-3d;
    transition: all 1s linear;
    height: 100%;

    background-color: rgb(60,162,162);
  }


  .cara {
    position: absolute;
      backface-visibility: hidden;
      height: 100%;
      background-color: rgb(33,90,109); 
      color: rgb(223,236,230);  
      height: 20vh; 
      width: 100%; 
      font-size: 2.4vw; 
      font-weight: 100;  
      text-align: center; 
      vertical-align: middle;
  }

  .cara.detras {
      transform: rotateX(180deg);
    }


    .detras {
      background-color: rgb(45,45,41);
      color: rgb(223,236,230);  
      height: 20vh; 
      width: 100%; 
      font-size: 4vw;  
      font-weight: 100;  
      text-align: justify; 
      vertical-align: middle; 
      overflow-y: auto; float: right;
    }

  #somosImagen1 {
    border-radius: 3px; 
    margin-top: 5%;  
    width: 100%; 
    height: 14vh;  
    position: absolute;
  }


  #somosTexto {
    position: absolute;  
    margin-left: 25%; 
    margin-top: -5%;  
    border-radius: 5px; 
    box-shadow: 5px 5px 5px 5px rgb(100,100,100); 
    border: solid 1px; 
    width: 45%; 
    height: 110%;  
    background-color: rgb(146,199,163);  
    color: rgb(33,90,109);  
    font-size: 2vw; 
    text-align: justify;
    padding: 40px ;
  }

  .fotoEquipo {
    width: 30%; 
    float: left; 
    top: 0;  
    height: 20vh;
  }

  #colaborador1 {
    border-radius: 3px; 
    margin-top: 25vh;  
    width: 90%; 
    height: 20vh;  
    position: absolute;
  }

  .classTextoColaborador {
      padding: 5%;
      height: 20vh; 
      width: 90%;
      font-size: 2vw; 
      background-color: rgb(45,45,41);
    }

  .nombreColaborador {
    position: relative; 
    bottom: 0; 
    text-align: center; 
    vertical-align: middle;
    background-color: rgba(45,45,41,0.6); 
    width: 100%;  
    height: 15%; 
    font-size: 2vw;  
    color: rgb(223,236,230); 
  }

  /*////////////////////////////////////////////////////*/

  /*///////// CSS de Inicio ////////////////////////*/

  #divImagen1 {
    width: 100%; 
    left:  0;
    position: absolute; 
    top: 395px; 
    background-color: transparent; 
    z-index: 90;
  }

  #divImgFondo {
    width: 100%; 
    left:  0;
    top: 80vh; 
    position: absolute; 
    background-color: transparent; 
    z-index: 100;
  }

  #divImgFondo2 {
    width: 100%; 
    height: 5vh; 
    left:  0;
    position: absolute; 
    background-color: transparent; 
    z-index: 90;
    top: 33vh; 
  }

  #divImgFondo3 {
    width: 100%; 
    height: 5vh; 
    left:  0;
    position: absolute; 
    background-color: transparent; 
    z-index: 100;
    top: 80vh; 
  }
  /*////////////////////////////////////////////////////////////////*/
  @import url('https://fonts.googleapis.com/css?family=Roboto:300');

  #textoAnimado {
    text-align:center;
    background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
    color:#555;
    font-family:'Roboto';
    font-weight:300;
    font-size:2em;
    padding-top:40vh;
    height:100vh;
    overflow:hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    border: solid;
  }

  .textoAnimado {
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;

  }

  .textoAnimado:first-of-type {    /* For increasing performance 
                         ID/Class should've been used. 
                         For a small demo 
                         it's okaish for now */
    animation: showup 7s infinite;
  }

  .textoAnimado:last-of-type {
    width:0px;
    animation: reveal 7s infinite;
  }

  .textoAnimado:last-of-type span {
    margin-left:-100%;
    animation: slidein 7s infinite;
    font-size: 2em;
  }

  @keyframes showup {
      0% {opacity:0;}
      20% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }

  @keyframes slidein {
      0% { margin-left:-800px; }
      20% { margin-left:-800px; }
      35% { margin-left:0px; }
      100% { margin-left:0px; }
  }

  @keyframes reveal {
      0% {opacity:0;width:0px;}
      20% {opacity:1;width:0px;}
      30% {width:100%;}
      80% {opacity:1;}
      100% {opacity:0;width:100%;}
  }

}











@media only screen and (orientation:  portrait) {

  * {
    font-family: Sans-serif, 'PT Sans', Verdana, sans-serif, web-safe fonts;
    font-size: 1.5vw;
    font-stretch: ultra-condensed;
    font-weight: 100;

    background-color: rgb(223,236,230); 
    
  }



  #divMenuNavegacion {
    position: fixed;   
    top: 25vh; 
    width: 25vw; 
    background-color: #FFF; 
    padding-left: 0vw; 
    z-index: 800;
    display: none;
  }


  #divMenuOculto {
    position: absolute;   
    bottom:0; 
    left: 0vw; 
    width: 10px; 
    background-color: transparent; 
    padding-left: 0; 
    z-index: 450;
    display: block;
  }

  #btn-menu {
    display: none;
  }

  .iconoMenu {
    width: 6vh;
  }



  .classBotonMenu {
    height: 4.8vh; 
    display: inline-block;   
    background-color: transparent;
  }


  .banner2 { 
    
    font: 30px Raleway, sans-serif;
    color: #FFFFFF; 
    text-align: left;
    padding: 50px; }



  .img{
    margin:10px auto;
    border-radius:5px;
    /*border: 1px solid #999;
    padding:13px;*/
    width:220px;
    height:220px;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    background:url(imagenes/reso.jpg) center center; 
    background-size: cover;
    
    }
  .img img{
    width: 100%;
  }


  /*///////// CSS de Inicio ////////////////////////*/


  #divImagen1 {
      width: 100%; 
      left:  0;
      position: absolute; 
      top: 395px; 
      background-color: transparent; 
      z-index: 90;
      
    }

    #divImgFondo {
      width: 100%; 
      height: 30vh;
      left:  0;
      top: 28vh; 
      position: absolute; 
      
      /*background-color: transparent; */
      background-image:  url('imagenes/fondo2.png');
      background-color: transparent;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 100;
    }

    #divImgFondo2 {
      width: 100%; 
      left:  0;
      position: absolute; 
      background-color: transparent; 
      z-index: 90;
      top: 36vh; 
    }

    #divImgFondo3 {
      width: 100%; 
      height: 25vh; 
      left:  0;
      position: absolute; 
      background-image:  url('imagenes/fondo.png');
      background-color: transparent;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 100;
      top: 65vh; 
    }

    .classTextoPrincipal{
      color: #000; 
      font-size: 3em; 
      background-color: transparent; 
      text-align: center;
      margin: 8vh;
    }

    .classTextoPrincipal2{
      color: #FFF; 
      font-size: 2.5em; 
      background-color: transparent; 
      text-align: center;
      margin: 8vh;
    }

  /*////////////////////////////////////////////////////////////////*/



/*////////////////////////     Estilos de Somos.html ////////////////////////////////*/


  .carta-box {
    width: 70%;
    height: 20vh;
    position: relative;
    perspective: 1000px;
    display: inline-block;
  }

  .carta-box:hover .carta {
      transform: rotateX(180deg);
  }

  .carta {
    transform-style: preserve-3d;
    transition: all 1s linear;
    height: 100%;

    background-color: rgb(60,162,162);
  }




  .cara {
    position: absolute;
      backface-visibility: hidden;
      height: 100%;
      background-color: rgb(33,90,109); 
      color: rgb(223,236,230);  
      height: 20vh; 
      width: 100%; 
      font-size: 2.4vw; 
      font-weight: 100;  
      text-align: center; 
      vertical-align: middle;
      
    
   
  }

  .cara.detras {
      transform: rotateX(180deg);
      
    }


    .detras {
      background-color: rgb(45,45,41);
      color: rgb(223,236,230);  
      height: 20vh; 
      width: 100%; 
      font-size: 4vw;  
      font-weight: 100;  
      text-align: justify; 
      vertical-align: middle; 
      overflow-y: auto; float: right;
    }



  


  #somosImagen1 {
    border-radius: 3px; 
    margin-top: 5%;  
    width: 100%; 
    height: 14vh;  
    position: absolute;
  }


  #somosTexto {
    position: absolute;  
    margin-left: 25%; 
    margin-top: -5%;  
    border-radius: 5px; 
    box-shadow: 5px 5px 5px 5px rgb(100,100,100); 
    border: solid 1px; 
    width: 45%; 
    height: 110%;  
    background-color: rgb(146,199,163);  
    color: rgb(33,90,109);  
    font-size: 2vw; 
    text-align: justify;
    padding: 40px ;
  }

  .fotoEquipo {
    width: 30%; 
    float: left; 
    top: 0;  
    height: 20vh;
  }


  #colaborador1 {
    border-radius: 3px; 
    margin-top: 25vh;  
    width: 90%; 
    height: 20vh;  
    position: absolute;
  }

  .classTextoColaborador {
      padding: 5%;
      height: 20vh; 
      width: 90%;
      font-size: 2vw; 
      background-color: rgb(45,45,41);
    }

  .nombreColaborador {
    position: relative; 
    bottom: 0; 
    text-align: center; 
    vertical-align: middle;
    background-color: rgba(45,45,41,0.6); 
    width: 100%;  
    height: 15%; 
    font-size: 2vw;  
    color: rgb(223,236,230); 
  }



/*////////////////////////////////////////////////////*/




  @media all and (min-width: 500px) and (max-width: 1000px) {  
    .img{
      margin:20px auto;
      border-radius:5px;
      /*border: 1px solid #999;
      padding:13px;*/
      width:300px;
      height:300px;
      background-size: 100% 100%;
      background-repeat:no-repeat;
      background:url(imagenes/reso.jpg) center center;
      background-size: cover;
      
      }

    /*///////// CSS de Inicio ////////////////////////*/


    #divImagen1 {
      width: 100%; 
      left:  0;
      position: absolute; 
      top: 395px; 
      background-color: transparent; 
      z-index: 90;
      
    }

    #divImgFondo {
      width: 100%; 
      height: 12.5vh;
      left:  0;
      top: 7vh; 
      position: absolute; 
      
      /*background-color: transparent; */
      background-image:  url('imagenes/fondo2.png');
      background-repeat: no-repeat;
      z-index: 100;
    }

    #divImgFondo2 {
      width: 100%; 
      left:  0;
      position: absolute; 
      background-color: transparent; 
      z-index: 90;
      top: 16vh; 
    }

    #divImgFondo3 {
      width: 100%; 
      height: 12.5vh; 
      left:  0;
      position: absolute; 
      background-image:  url('imagenes/fondo.png');
      background-repeat: no-repeat;
      z-index: 100;
      top: 25vh; 
    }

    .classTextoPrincipal{
      color: #000; 
      font-size: 2.5em; 
      background-color: transparent; 
      margin: 4vh;
    }

    .classTextoPrincipal2{
      color: #FFF; 
      font-size: 2.5em; 
      background-color: transparent; 
      margin: 4vh;
    }




    /*////////////////////////////////////////////////////////////////*/
    /*////////////////////////     Estilos de Somos.html ////////////////////////////////*/


    #somosImagen1 {
      border-radius: 3px; 
      margin-top: 5%;  
      width: 100%; 
      height: 7.5vh;  
      position: absolute;
    }


    #somosTexto {
      position: absolute;  
      margin-left: 20%; 
      margin-top: -5%;  
      border-radius: 5px; 
      box-shadow: 5px 5px 5px 5px rgb(100,100,100); 
      border: solid 1px; 
      width: 60%; 
      height: 110%;  
      background-color: rgb(146,199,163);  
      color: rgb(33,90,109);  
      font-size: 2.5vw; 
      font-weight: 400;
      text-align: justify;
      
    }

    .fotoEquipo {
      width: 100%; 

      top: 0;  
      height: 15vh;
    }

    .carta-box {
      width: 100%;
      height: 5vh;
      perspective: 1000px;
    }

    .carta-box:hover .carta {
        transform: rotateY(180deg);
    }

    .carta {
      transform-style: preserve-3d;
      transition: all 1s linear;
      height: 100%;

      background-color: rgb(60,162,162);
    }




    .cara {
      position: absolute;
      backface-visibility: hidden;
      height: 100%;
      background-color: rgb(33,90,109); 
      color: rgb(223,236,230);  
      height: 20vh; 
      width: 100%; 
      font-size: 4.5vw; 
      font-weight: 100;  
      text-align: center; 
      vertical-align: middle;
      
     
    }

    .cara.detras {
      transform: rotateY(180deg);
      
    }


    .detras {
      background-color: rgb(45,45,41);
      color: rgb(223,236,230);  
      height: 20vh; 
      width: 100%; 
      font-size: 4vw;  
      font-weight: 400;  
      text-align: justify; 
      vertical-align: middle; 
      overflow-y: auto; float: right;
    }


    #colaborador1 {
      border-radius: 3px; 
      margin-top: 15vh;  
      width: 90%; 
      height: 20vh;  
      position: absolute;
    }

    .classTextoColaborador {
      padding: 5%;
      height: 100%; 
      width: 90%;
      font-size: 4vw; 
      font-weight: 400;
      background-color: rgb(45,45,41);
    }

    .nombreColaborador {
      position: relative; 
      bottom: 0; 
      text-align: center; 
      background-color: rgba(45,45,41,0.6); 
      width: 100%;  
      height: 15%; 
      font-size: 5vw;  
      font-weight: 500;

      color: rgb(223,236,230); 
    }

 /*///////////////  Página Educación //////////////////////////////*/


  .clsRenglonVideo {
    display: grid;  
    grid-template-rows: 269px 50px auto ;
    grid-template-columns: auto ;
    padding-bottom: 30px;
  }

  .clsRenglonVideo .clsVideo {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .clsRenglonVideo .clsTituloVideo {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    font-weight: bold;
    text-align: left;
  }

  .clsRenglonVideo .clsDescripcionVideo {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    text-align: justify;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
  }





}
  .img img{
     width:100%;
  }

  #divEncabezado {
    background-color: rgb(45,45,41); 
    width: 100%;  
    height: 35vh; 
    left: 0px;
    top: 0px; 
    right: 0; 
  }

  #logoEncabezado {
    position: relative; 
    border: none; 
    left:  5%; 
    top: 1vh; 
    height: 11vh; 
    display: inline-block; 
    background-color: rgb(255,255,255);
    overflow: hidden; 
    width: 26%; 
    vertical-align: top; 
    text-align: left;
  }


  #divTextoTelefono {
    position: relative; 
    display: inline-block; 
    background-color: #FFF; 
    top: 0.5vh; 
    width: 30%; 
  }
  #divTextoCorreo {
    position: relative; 
    display: inline-block; 
    background-color: #FFF; 
    top: 0.5vh; 
    width: 30%; 
  }
  #divRedesSociales {
    position: relative; 
    display: inline-block; 
    background-color: #FFF; 
    top: 0.5vh; 
    width: 10%;  
  }


  #divMensajeEncabezado {
    position: absolute;   
    bottom: 50%;  
    width: 75vw; 
    background-color: transparent; 
    margin-left: 5vw; 
    color: rgb(223,236,230);   
    font-size: 3.5vw; 
    font-weight: 200;
    text-align: right;
  }
  

  #divLAteralDerecho {
   background-color: 
    rgb(44,44,41); 
    top: 42.2%; 
    right: 5.4%; 
    width: 15%; 
    height: 77vh; 
    z-index: 100;
    position: absolute;
    display: none;
  }

  #ifrmPrincipal {
    display:block;  
    border:none; 
    width: 90%; 
    margin-left:  5.1%; 
    top: 46.9%; 
    /*overflow-y: hidden;*/
    z-index: 40;  
    
  }

  #divTitulos {
    height: 10%; 
    width: 90%;
    margin-left:  5vw;
    background-color: rgb(255,255,255);
    
    top: 0; 
    position: initial;
  }

  #divMenu {
    position: sticky;
    top: 0; 
    margin-left:  5vw;
    width: 90%;
    height: 15%; 
    background-color: rgb(33,90,109);
    z-index: 200;
    overflow: hidden;
    
  }


  
  @import url('https://fonts.googleapis.com/css?family=Roboto:300');

  #textoAnimado {
    text-align:center;
    background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
    color:#555;
    font-family:'Roboto';
    font-weight:300;
    font-size:2em;
    padding-top:40vh;
    height:100vh;
    overflow:hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    border: solid;
  }

  .textoAnimado {
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;

  }

  .textoAnimado:first-of-type {    /* For increasing performance 
                         ID/Class should've been used. 
                         For a small demo 
                         it's okaish for now */
    animation: showup 7s infinite;
  }

  .textoAnimado:last-of-type {
    width:0px;
    animation: reveal 7s infinite;
  }

  .textoAnimado:last-of-type span {
    margin-left:-100%;
    animation: slidein 7s infinite;
    font-size: 2em;
  }

  @keyframes showup {
      0% {opacity:0;}
      20% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }

  @keyframes slidein {
      0% { margin-left:-800px; }
      20% { margin-left:-800px; }
      35% { margin-left:0px; }
      100% { margin-left:0px; }
  }

  @keyframes reveal {
      0% {opacity:0;width:0px;}
      20% {opacity:1;width:0px;}
      30% {width:100%;}
      80% {opacity:1;}
      100% {opacity:0;width:100%;}
  }

}