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

/* ---- BARRA DE NAVEGACIÓN ---- */

/* ---- PORTADA ---- */
#Portada{
  height: 100%;
  width: 100%;
  background-image: url(../img/Portada1.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: top;
  animation-duration: 300s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  scroll-snap-align: start;
}
@keyframes slidein {
  from {
    background-position: left;
  }

  to {
    background-position: right;
  }
}
#CTit{
  width: max-content;
}
#Titulo{
  padding-top: 80px;
  padding-bottom: 0px;
  margin: 0px;
  text-align: center;
  font-size: 8vw;
  color: white;
  font-family: 'Times New Roman', serif;
  border-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgba(191,191,191,1);
  font-weight: 200;
}
#Subtitulo{
  padding-top: 5px;
  margin: 0px;
  text-align: center;
  font-size: 3.1vw;
  font-weight: 100;
  color: white;
  font-family: 'Trebuchet MS', sans-serif;
}
#iPort{
  display: none;
}

/* ---- MENÚ DE ESTUDIOS ---- */
#Explorador{
  height: 100%;
  scroll-snap-align: start;
  background-color: rgb(64, 64, 64);
}
#Menu{
  background-color: rgba(21,21,21,0.5);
  padding-top: 20px;
  padding-bottom: 20px;
  height: 25%;
  width: 100%;
  z-index: 2;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /*transform: rotateX(180deg);*/
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
  position: relative;
  bottom: -71%;
}
#ContPort{
  width: 3000px;
  height: 100%;
  padding-left: 30px;
}
  .PE{
    height: 100%;
    display:inline-block;
    margin-right: 5px;
  }
  .iPE{
    height: 100%;
  }
/* ---- CLASES DE ESTUDIOS ---- */
#ClasesE{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  /*justify-content: stretch;*/
  scroll-snap-align: start;
}
.Clases{
  width: 100%;
  height: auto;
}
.Clase{
  margin: 5px;
  font-family: sans-serif;
}
.CLst{
  background-color: rgb(64, 64, 64);
  color: white;
  height: 40px;
  padding-top: 20px;
  width: 100%;
  margin-top: -10px;
  margin-bottom: 0px;
  font-size: 22px;
}
.Estudio{
  list-style: none;
  width: 100%;
  height: 50px;
  padding-top: 25px;
  font-size: 15px;
  font-family: sans-serif;
}
.Estudio:hover{
  background-color: rgb(150, 150, 150);
  color: white;
}
ul{
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: white;
}
#ImgH{
  background-image: url(../img/C/Hidrologia.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
}
#ImgG{
  background-image: url(../img/C/Geologia.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
}
#ImgA{
  background-image: url(../img/C/Ambientales.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
}
#ImgS{
  background-image: url(../img/C/Sociales.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
}
  .Fila{
    background-color: white;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: stretch;
    scroll-snap-align: start;
  }
  .DescC{
    /*scroll-snap-align: start;*/
    height: 100%;
    padding:30px;
  }
/*  .DescC > *{
    margin-left: 20px;
    margin-right: 15px;
  }*/
  .TitC{
    text-align: center;
    padding-top: 50px;
    padding-bottom: 10px;
    font-size: 35px;
    font-family: sans-serif;
    border-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgba(191,191,191,1);
  }

  .TitE{
   margin-top: 30px;
   font-size: 30px;
   text-align: left;
  }
  .DescE{
    text-align: justify;
    font-size: 20px;
  }
  .CTH{
    color:rgba(39,114,137,1);
  }
  .CTG{
    color:rgba(164,113,74,1);
  }
  .CTA{
    color:rgba(112,173,71,1);
  }
  .CTS{
    color:rgba(152,62,90,1);
  }
  .GPclave{
    margin-bottom: 40px;
  }
  .GPclave > *{
    display: inline;
    font-size: 12px;
    color: rgba(21,21,21,1);
  }
  .ImgE{
    min-height: 100%;
    display: inline-block;
    /*scroll-snap-align: start;*/
  }
  .ImgC{
    display: none;
  }
/* ---- APP MIAMBIENTAL ---- */

/* ---- RESPONSIVE SMARTPHONE ---- */
@media screen and (min-width: 600px) {
  /* ---- PORTADA ---- */
  #Titulo {font-size: 51px;}
  #Subtitulo{font-size: 20px;}
  #Ham{display: none;}
  #MenuGeneral{display: inline;}
}
@media screen and (max-width: 991px){


}

/*------------------------Responsive 600
@media screen and (max-width: 601px){
  #loginSGA{
    width: 90%;
    margin-left: 50px;
    }
  h1{
    font-size: 20px;
  }
  h2{
    font-size: 50px;
  }
  h3{
    font-size: 20px;
  }
  #amb{
    font-size:50px;
  }
  #titulo{
    padding-top: 5px;
  }
  #VIDEO{
    padding-top: 50px;
    padding-left: 0px;
  }
  #vdYT{
    width: 100%;
    min-height: 200px;
  }
  .sst{
      display: block;
      padding-left: 0px;
  }
  .Bloques{
    padding-left: 0px;
    padding-right: 0px;
  }
  .imgC{
    margin-top: 20px;
  }

}

@media screen and (max-width: 991px){
  #loginSGA{
    width: 90%;
    text-align: center;
    margin-left: 50px;
    }
  .pilares3{
    padding-top:40px;
  }

}--------------------------*/