/* certificaciones */

ul.nos-mod, li.nos-mod {
  margin: 0;
  padding: 0;
  list-style: none;
}
#wrapper {
  opacity: 0;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* margin: auto; */
  background-color: transparent;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
  display: -webkit-box;
  display: flex;
  overflow: hidden;
  text-align: justify;
  font-family: helvetica!important;
  background-image: url('recursos/fondo_conocenos.jpg');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: -250px;
  transition: opacity 2s ease-in-out;
}

#reg, #breg{
  margin-left: -9px;
}

#btn-mapa{
  width: 10vw;
}
#btn-mapa:hover{
  opacity: .5;
  transition: opacity .2s ease-in-out;
  cursor: pointer;;
}
#left-side {
  position: absolute;
  height: 100vh;
  width: 60%;
  display: -webkit-box;
  display: flex;
  color:white;
  font-size: 20px;
  margin-top: 25vh;

}
#left-side ul li {
  padding-top: 20px;
  padding-bottom: 20px;
  display: -webkit-box;
  display: flex;
  line-height: 34px;
  font-weight: bolder;
  cursor: pointer;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  margin-left: 4vw;
  color:white;
}
li.I{
  animation: bottom4 2s ease-in-out .1s;

}
li.II{
  animation: bottom4 3s ease-in-out .2s;

}
li.III{
  animation: bottom4 3s ease-in-out .3s;

}
li.IV{
  animation: bottom4 3s ease-in-out .4s;

}
li.V{
  animation: bottom4 3s ease-in-out .5s;

}
/* #left-side ul li:hover {
  color: white;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  cursor: pointer;
  opacity: .5;
} */
.active:hover{
  opacity: 1;
}
#left-side ul li.active {
  color: white;
  font-size: 40px;
  font-weight: bolder;
  transition: font-size 1s ease-in-out;
  /* margin-left: 5vw; */
}
strong{
  font-size: 18px;
  color:#77766F;
}
#right-side {
  overflow: hidden;
  font-size: 15px;
  width: 30vw;
  margin-left: 40vw;
  /* opacity: 0; */
  margin-top: 15vh;
}

.parrafo_nos, .parrafo_nos2{
  line-height: 1.1;
}
#quienes, #quienes2, #quienes3{
  Display:flex;
}
.quienes{
  display: flex;
  width: 350px;
  padding: 0;
}
.margin{
  margin-left: 6vw;
}
#six .margin{
margin-left: 2.8vw;
width: 300px;
}
.quienes2{
  width: 350px;
  margin-left: 20vw;
}

@-webkit-keyframes bottom {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  50% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}

@keyframes bottom {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  50% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}
#colab, #cob1{
  width: 20vw;
}
#right-side #first, #right-side #second, #right-side #third, #right-side #fourth, #right-side #six, #right-side #sev {
  position: absolute;
  /* height: 100vh; */
  /* width: 45%; */
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
  /* margin-top: -350px; */
  opacity: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
#right-side #first p, #right-side #second p, #right-side #third p, #right-side #fourth p, #right-side #six p, #right-side #sev p {
  color: #333;
  font-weight: 500;
  padding-right: 20px;
}
#right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active, #right-side #six.active, #right-side #sev.active {
  margin-top: 0px;
  opacity: 1!important;;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}

#right-side #first.active .pf1{
  animation: bottom 2s ease-in-out .2s;
opacity: 1!important;
}
#right-side #first.active .pf2{
  animation: bottom 2s ease-in-out .3s;
opacity: 1!important;
}

#right-side #second.active .mision{
  animation: bottom 2s ease-in-out .2s;
opacity: 1!important;
}
#right-side #second.active .vision{
  animation: bottom 2s ease-in-out .3s;
opacity: 1!important;
}
#right-side #second.active .valor{
  animation: bottom 2s ease-in-out .4s;
opacity: 1!important;
}
#right-side #third.active #reg{
  animation: bottom 2s ease-in-out .1s;
opacity: 1!important;
}
#right-side #third.active .politica{
  animation: bottom 2s ease-in-out .3s;
opacity: 1!important;
}

#right-side #fourth.active #breg{
  animation: bottom 2s ease-in-out .1s;
opacity: 1!important;
}
#right-side #fourth.active .mapa{
  animation: bottom 2s ease-in-out .3s;
opacity: 1!important;
}
#right-side #six.active .colab1{
  animation: bottom 2s ease-in-out .1s;
opacity: 1!important;
}
#right-side #six.active .colab2{
  animation: bottom 2s ease-in-out .2s;
opacity: 1!important;
}
#right-side #six.active .colab3{
  animation: bottom 2s ease-in-out .3s;
opacity: 1!important;
}
#right-side #six.active .colab4{
  animation: bottom 2s ease-in-out .4s;
opacity: 1!important;
}
#right-side #six.active .colab5{
  animation: bottom 2s ease-in-out .5s;
opacity: 1!important;
}
#right-side #six.active .colab6{
  animation: bottom 2s ease-in-out .6s;
opacity: 1!important;
}
#right-side #six.active .colab7{
  animation: bottom 2s ease-in-out .7s;
opacity: 1!important;
}
#right-side #six.active .colab8{
  animation: bottom 2s ease-in-out .8s;
opacity: 1!important;
}
#right-side #six .colab1, #right-side #six .colab2,#right-side #six .colab3,#right-side #six .colab4,#right-side #six .colab5,#right-side #six .colab6,#right-side #six .colab7,#right-side #six .colab8{
opacity: 0;
}
.t-colab{
font-size: 15px;
font-weight: bolder;
color:#77766F;
}
.p-colab{
  font-size: 12px;
  color:#0D0D0D;
  line-height: 1.2;
}
.mision{
  margin-top: -5vh;
}
/* .active > div > p.parrafo_nos2.mision{
  animation: bottom 2s ease-in-out .2s;
  opacity: 1;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;

}
.active > div > p.parrafo_nos2.vision{
  animation: bottom 2s ease-in-out .5s;
  opacity: 1;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;

}
.active > div > p.parrafo_nos2.valor{
  animation: bottom 2s ease-in-out .7s;
  opacity: 1;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;

} */
@media only screen and (min-width: 1599px) {
#wrapper {

  background-position: -260px!important;
}
#left-side {
  margin-top: 32vh;

}
#left-side ul li.active {
  color: white;
  font-size: 50px!important;
  font-weight: bolder;
  transition: font-size 1s ease-in-out;
}
}