html, body{
    height:100%;
    margin:0;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling:touch;
  }
  
  /**Efecto Precarga**/
  .loader{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    z-index: 999;
    padding:20%;
    padding-left: 45%;
  }
  .preloader {
    width: 70px;
    height: 70px;
    border: 10px solid #eee;
    border-top: 10px solid #60a744;
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    
  }



.btn-laboratorio{
    display: block;
    margin: auto;
    border: 1px solid #fff;
    background: #325d42;
    color: white;
    padding: 10px 20px;
    font-size: 1.6rem;
    border-radius: 10px;
    cursor: pointer;
}
  /*Flip Card*/

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  /*width: 300px;*/
  height: 220px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  /*background-color: #bbb;*/
  background: rgba(1, 255, 33, 0.53);
  color: white;
}

.flip-card-front > h2{
  margin-top: 10px;
}

.flip-card-front > img{
  width: 40%;
}

/* Style the back side */
.flip-card-back {
  background-color: rgb(121, 140, 158);
  color: white;
  transform: rotateY(180deg);
  padding:4px;
  font-size:1.4rem;
}

  video{
    position: absolute;
    z-index: 1;
    /*opacity: 0.8;*/
    width: 100%;
    height: 110%;
    object-fit: cover;
  }
  
  @keyframes girar {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @font-face {
      font-family: 'Forza Light';
      font-style: normal;
      font-weight: normal;
      src: local('Forza Light'), url('../font/Forza-Light.woff') format('woff');
  }

  @font-face {
      font-family: 'Forza Medium';
      font-style: normal;
      font-weight: normal;
      src: local('Forza Medium'), url('../font/Forza-Medium.woff') format('woff');
  }

  @font-face {
    font-family: 'Nunito Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Nunito Regular'), url('../font/Nunito-Regular.woff') format('woff');
  }



  header .btn-burguer {
    font-size: 3rem;
    display: none;
  }

  .btn-menu{
    cursor: pointer;
    display:none;
  }

  .logo{
    object-fit: cover;
    height: 100%;
  }

  .tit-a{
    font-size: 35px;
    letter-spacing: 1px;
    line-height: 1;
    display: block;
    padding-bottom: 15px;
    width: 80%;
    font-family: 'Nunito Regular';
    margin-left: 10%;
    text-align: justify;
  }

  .text-gen{
    font-size: 1.43rem;
    display: block;
    padding-bottom: 15px;
    /*width: 80%;*/
    font-family: 'Nunito Regular';
    /*margin-left: 10%;*/
    text-align: justify;
  }

  .img_inicio div{
    margin-top: 10%;
    margin-left: 33%;
    margin-bottom:80px;
  }

  .img_inicio div img{
    width:15%;
    margin-left:20px;
  }

  .iso{
    display:flex;
  }

  .img_iso div img{
    /*width:70%;*/
    /*margin-left:20px;*/
    margin: auto;
  }

  .content-iso{
    font-family: 'Nunito Regular';
    font-size:2rem;
    text-align:center;
  }

  .content-iso img{
    display:block;
    text-align:center;
  }

  .inicio{
      /*margin-top: 10%;*/
  }

  .tit-a b{
    font-family: 'Nunito Regular';
  }

  #nosotros-content section{
    margin-top:10%;
    margin-left:10%;
    width: 80%;
    font-size: 2.92rem;
  }

  #nosotros-content section h1{
    margin-bottom: 20px;
    text-align: center;
  }

  #historia-content{
    justify-content: space-around;
  }

  #mision-content{
    /*justify-content: space-around;*/
    margin-top:10%;
  }

  #mision-content section{
    width: 48%;
    font-size: 2.92rem;
  }

  #mision-content section h1{
    text-align: center;
  }

  #vision-content{
    margin-top:10%;
  }

  #vision-content section{
    width: 48%;
    font-size: 2.92rem;
  }

  #vision-content section h1{
    margin-top:10%;
    text-align: center;
  }

  #vision-content section img{
    border-radius: 10px;
    border:2px solid white;
  }

  #equipo-content{
    margin-top:10%;
  }

  #equipo-content section{
    width: 48%;
    font-size: 2.92rem;
  }

  #equipo-content section h1{
    margin-top:2%;
    text-align: center;
  }

  #equipo-content section img{
    border-radius: 10px;
    border:2px solid white;
  }

  .m-left{
    margin-left: 5%;
  }

  .m-rigth{
    margin-right: 5%;
  }

  #mision-content section img{
    
    border-radius: 10px;
    border:2px solid white;
  }

  .history{
    width: 45%;
  }

  .history img{
    border-radius: 10px;
    border:2px solid white;
  }

  .img-h-1{
    position: absolute;
    left: 3.5%;
    width: 44%;
    opacity: 1;
  }

  .img-h-2{
    position: absolute;
    left: 3.5%;
    width: 44%;
    opacity: 0;
  }

  .img-h-3{
    position: absolute;
    left: 3.5%;
    width: 44%;
    opacity: 0;
  }

  .img-h-4{
    position: absolute;
    left: 3.5%;
    width: 44%;
    opacity: 0;
  }

  .nosotros{
    font-family: 'Nunito Regular';
    font-size:2.5rem;
    display: flex;
  }

  .nosotros section{
    text-align: justify;
    /*padding: 5%;
    width:50%;*/
    padding:40px;
  }

  .nosotros section img{
    display: block;
    margin: auto;
    width: 70%;
    border-radius: 100%;
    margin-bottom: 20px;
    border: 3px solid;
  }

  .content-img{
    height:120px;
    vertical-align:middle;
  }

  .historia{
    width: 100%;
    padding: 5%;
    font-family: 'Nunito Regular';
    font-size:2.5rem;
    text-align: justify;
    margin-top: 5%;
  }

  .text-nosotros{
    width: 100%;
    /*padding: 5%;*/
    font-family: 'Nunito Regular';
    font-size:1.6rem;
    text-align: justify;
    margin-top: 5%;
  }

  .text-nosotros h1{
    text-align: center;
    margin-bottom: 20px;
  }

  .historia div{
    width: 100%;
    text-align: center;
    margin-top: 40px;
  }

  .historia img{
    width: 60%;
  }

  .historia h1{
    text-align: center;
    margin-bottom: 20px;
  }

  .slider{
    display: flex;
    flex-wrap: wrap;
    margin-top:5%;
    margin-left:6%;
    /*margin-bottom:60px;*/
  }

  .slider > h3{
    font-family: 'Nunito Regular';
    display: block;
    width: 94%;
    text-align: center;
    margin-bottom: 20px;
  }

  .img-proyecto{
    display: block;
    margin: auto;
    width: 50%;
  }

  .content-sost{
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
  }

  .top-a{
    margin-top:5%;
  }

  .sec-politica{
    width: 25%;
    /*display: block;*/
    margin-left: 40px;
    position: absolute;
    left: 35%;
    transition: all 0.6s linear;
    transition-timing-function: ease-in-out;
  }

  .politica-p-up{
    transform: translate(-392px);
  }

  .politica-p-n{
    transform: translate(0px);
  }

  .politica-p-down{
    transform: translate(392px);
  }

  .sost{
    opacity: 1;
  }

  .sgas{
    opacity: 0;
  }

  .al-ta-dr{
    opacity: 0;
  }

  .tra-ins{
    opacity: 0;
  }

  

  .sec-politica span{
    display: block;
    width: 144px;
    margin: auto;
    font-size: 1.5rem;
    padding: 10px;
    border-radius: 10px;
    background: slategray;
    
  }

  .sec-politica span a{
    display: block;
    width: 122px;
    margin: auto;
  }

  .sec-valores{
    font-size: 1.5rem;
    /*display: flex;*/
  }

  .sec-valores p{
    width: 35%;
    margin-left: 32.4%;
    margin-right: 3%;
    transition: all 0.6s linear;
    transition-timing-function: ease-in-out;
    text-align: center;
    font-size: 3rem;
  }

  .valores-p-up{
    transform: translateY(-406px);
  }

  .valores-p-down{
    transform: translateY(406px);
  }

  .valor-opacity{
    opacity: 0;
  }

  .sec-valores p img{
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .integridad{
    opacity: 1;
    position: absolute;
    top: 68%;
    left:1px;
  }

  .responsabilidad{
    opacity: 0;
    position: absolute;
    top: 68%;
    left:1px;
  }

  .compromiso{
    opacity: 0;
    position: absolute;
    top: 68%;
    left:1px;
  }

  .respeto{
    opacity: 0;
    position: absolute;
    top: 68%;
    left:1px;
  }

  #valores span{
    display: block;
    width: 144px;
    margin: auto;
    font-size: 1.5rem;
    padding: 10px;
    border-radius: 10px;
    background: slategray;
    
  }

  #valores span a{
    display: block;
    width: 122px;
    margin: auto;
  }

  .sec-reconocimiento{
    margin-left:40px;
  }

  .sec-reconocimiento img{
    width: 100%;
  }

  .flex{
    display:flex;
  }

  /**Fondo de las secciones del menu**/
  .bk-a{
    background-image: url('../img/fondo/fondo_1.jpg');
  }

  .bk-b{
    background-image: url('../img/DSC02301_opt.jpg');
  }

  .bk-c{
    background-image: url('../img/fondo/fondo_3_.jpg');
  }

  .bk-d{
    background-image: url('../img/sostenibilidad-fondo.jpg');
  }

  .bk-e{
    background-image: url('../img/fondo/fondo_5_.jpg');
  }

  .bk-f{
    background-image: url('../img/fondo/fondo_6_.jpg');
  }
  /******-----------------------------------------****/

  .bk-1{
    background-image: url('../img/sostenibilidad-fondo.jpg');
  }

  .bk-2{
    background-image: url('../img/politica.jpg');
  }

  .bk-3{
    background-image: url('../img/valores-c.jpg');
  }

  .bk-4{
    background-image: url('../img/reconocimiento.jpg');
  }

  .tecnologia{
    font-family: 'Nunito Regular';
    font-size:2.5rem;
    display: flex;
  }

  .tecnologia section{
    text-align: justify;
    padding: 2%;
    width:20%;
  }

  .tecnologia section p{
    transition: all 0.15s linear;
  }

  .p-tecno{
    transform: translateY(-210px);
    /*background: rgba(1, 255, 33, 0.53);*/
    background: rgba(109, 115, 131, 0.76);
    padding: 20px;
    border-radius: 15px;
  }

  /*.tecnologia section img{
    display: block;
    margin: auto;
    width: 70%;
    background: rgba(1, 255, 33, 0.53);
    border-radius: 10px;
    
  }*/

  .img-tecno-icon{
    display: block;
    margin: auto;
    width: 70%;
    background: rgba(1, 255, 33, 0.53);
    border-radius: 10px;
  }

  .img-tecno{
    opacity:0.2;
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
  }

  .text-tecnologia{
    width: 100%;
    padding: 5%;
    font-family: 'Nunito Regular';
    font-size:1.6rem;
    text-align: justify;
    margin-top: 15%;
  }

  .flecha-l{
    height: 100%;
    width: 10%;
    margin-top: 22%;
  }

  header {
    background: rgba(97, 193, 109, 0.89);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6rem;
    font-family: 'Nunito Regular';
    color: white;
    position: fixed;
    z-index: 99;
    width: 100%;
    box-shadow: 2px 2px 10px #666;
    padding:10px;
  }

  .content-menu {
    display: flex;
  }

  header nav ul {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
  }

  header nav li {
    margin-right: 4.4rem;
  }

  .contact{
    width: 100%;
    height: 100%;
    padding:10%;
    display: flex;
    /*flex-wrap: wrap;*/
  }

  .contact section{
    height:80%;
    /*flex-grow: 1;*/
    width:50%;
    margin:20px;
  }

  /*Formulario*/
  .row {
    /*display: flex;*/
    
  }
​
  .col{
    flex-grow: 1;
    padding: 10px;
    width: 50%;
    
  }

  .col input,textarea{
    border: 1px solid #cdcdcd;
    width: 100%;
    padding: 10px;
    resize: none;
  }

  .col button{
    border: 1px solid #fff;
    background: #60a744;
    color: white;
    padding: 10px 20px;
  }
​
  .col-12 {
    width: 100%;
  }
​
  /*input[type="text"],
  select,
  textarea {
    border: 1px solid #cdcdcd;
    width: 100%;
    padding: 10px;
    resize: none;
  }*/

​
  form {
    width: 400px;
    margin: auto;
  }

  form h1{
    text-align:center;
    font-family: 'Nunito Regular';
  }
​
  .mapa{
    /*padding-top: 12%;
    padding-left: 10%;
    padding-right: 10%;*/
  }

  .mapa iframe{
    /*width="600" height="450"*/
    width:100%;
    height:100%;
  }

  footer {
    background: rgba(97, 193, 109, 0.89);
    position: absolute;
    z-index: 99;
    width: 100%;
    bottom: 0px;
    font-size: 1.4rem;
    box-shadow: 2px 2px 10px #666;
    font-family: 'Nunito Regular';
    color: white;
  }

  footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6rem;
    padding-left:20px;
    padding-right:20px;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ol, ul {
    list-style: none;
  }

  .lista{
    list-style: circle;
    font-size: 2.5rem;
  }

  .lista-b{
    list-style: decimal;
    font-size: 1.5rem;
  }

  .lista li{
    margin-bottom: 10px;
  }

  .lista-b li{
    margin-bottom: 10px;
  }

  #valores > span{
    margin-top: 32%;
  }

  @media (max-width: 1280px)  {

    .flip-card {
      height: 276px;
    }
    
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .img_inicio div {
      margin-bottom: 54px;
    }

    .tit-a {
      font-size: 26px;
      margin-bottom: 2%;
    }

    .content-iso {
      width: 90%;
    }

    .content-iso > a{
      font-size: 1.5rem;
    }

    .img_iso div img {
      width: 65%;
    }

    .history {
      margin-top: 2%;
    }

    .text-h{
      font-size: 1rem;
    }

    #mision-content section img {
      width: 100%;
    }

    #mision-content section {
      font-size: 1.92rem;
      padding: 1%;
    }

    #mision-content {
      margin-top: 7%;
    }

    #vision-content section img {
      width: 100%;
    }

    #vision-content section {
      font-size: 1.92rem;
      padding: 1%;
    }

    #vision-content {
      margin-top: 7%;
    }

    #equipo-content section img{
      width: 100%;
    }

    #equipo-content section {
      font-size: 1.92rem;
      padding: 1%;
    }

    #equipo-content {
      margin-top: 7%;
    }
    
    .slider > h3 {
      font-size: 2.5rem;
    }

    .lista li{
      font-size: 1.5rem;
    }

    .sec-valores p{
      font-size:2rem;
    }

    #valores > span{
      margin-top: 24%;
    }

    .contact{
      margin-top: -3%;
    }
    
  }

  @media (max-width: 1024px) {
    .flip-card {
      height: 388px;
    }
  }

  @media (max-height:800px)  {
    video {
      width: 100%;
      
      object-fit: cover;
    }

    .img_inicio div {
      margin-bottom: 54px;
    }

    .tit-a {
      font-size: 26px;
      margin-bottom: 2%;
    }

    .content-iso {
      width: 90%;
    }

    .content-iso > a{
      font-size: 1.5rem;
    }

    .img_iso div img {
      width: 65%;
    }

    .history {
      margin-top: 2%;
    }

    .text-h{
      font-size: 1rem;
    }

    #mision-content section img {
      width: 100%;
    }

    #mision-content section {
      font-size: 1.92rem;
      padding: 1%;
    }

    #mision-content {
      margin-top: 7%;
    }

    #vision-content section img {
      width: 100%;
    }

    #vision-content section {
      font-size: 1.92rem;
      padding: 1%;
    }

    #vision-content {
      margin-top: 7%;
    }

    #equipo-content section img{
      width: 100%;
    }

    #equipo-content section {
      font-size: 1.92rem;
      padding: 1%;
    }

    #equipo-content {
      margin-top: 7%;
    }
    
    .slider > h3 {
      font-size: 2.5rem;
    }

    .lista li{
      font-size: 1.5rem;
    }

    .sec-valores p{
      font-size:2rem;
    }

    #valores > span{
      margin-top: 24%;
    }

    .contact{
      margin-top: -3%;
    }
    
  }

  @media (max-width: 880px)  {

    header .btn-menu {
      width: 8%;
      height: 100%;
      /* margin-top: 0%; */
      /* margin-right: 5%; */
      display: block;
      /* color: white;*/
    }

    .flip-card {
      width: 80%;
      height: 220px;
      margin: auto;
    }

    .flip-card-back > ul{
      font-size: 2rem;
    }

    .content-iso > a{
      font-size: 2.5rem;
    }

    #mision-content {
      margin-top: 10%;
    }

    #vision-content {
      margin-top: 10%;
    }

    #equipo-content {
      margin-top: 10%;
    }

    #valores > span {
      margin-top: 110%;
    }

    .loader{
      padding-top:50%;
      padding-left: 40%;
    }

    .bk-a{
      background-position: center;
    }

    /*HEADER*/
    header{
      /*min-height:12rem;*/
      background-color: green;
    }

    header .btn-burguer {
      display: block;
      cursor: pointer;
      font-size: 4rem;
    }

    header nav {
      position: absolute;
      top: 100%;
      margin: 0;
      background: rgba(97, 193, 109, 0.89);
      left: 0;
      width: 100%;
      /* padding: 30px; */
      /* display: none; */
      height: 0px;
      transition: 1s linear;
      visibility: hidden;
      opacity: 0;
      
    }

    .show-menu header nav {
      /*display: block; */
      height: 300px;
      padding: 30px;
      visibility: visible;
      opacity: 1;
    }

    header nav ul {
      font-size: 2.5rem;
      display: block;
    }

    header nav li {
      margin-bottom: 20px;
      border-bottom: 1px white solid;
    }

    .img_inicio div {
      margin-left: 22%;
    }

    .inicio{
      margin-top:10%;
    }
  
    .iso{
        display: block;
    }

    .img_iso{
      margin-bottom: 100px;
    }
    
    .content-iso {
        font-size: 4rem;
        border-bottom: 1px solid;
    }

    .img_inicio div img {
        width: 60%;
        margin-bottom: 60px;
    }

    .tit-a{
      margin-bottom: 120px;
    }

    .img-h-1{
      left: 7%;
      width: 86%;
    }

    .img-h-2{
      left: 7%;
      width: 86%;
    }

    .img-h-3{
      left: 7%;
      width: 86%;
    }

    .img-h-4{
      left: 7%;
      width: 86%;
    }

    .history {
      padding: 5%;
    }

    #mision-content section {
      width: 100%;
      padding: 5%;
    }

    #mision-content section img {
      width: 100%;
    }

    #vision-content section {
      width: 100%;
      padding: 5%;
    }

    #vision-content section img {
      width: 100%;
    }

    #equipo-content section {
      width: 100%;
      padding: 5%;
    }

    #equipo-content section img {
      width: 100%;
    }

    .m-left{
      margin-left: 0%;
    }

    .m-rigth {
      margin-right: 5%;
      margin-bottom: 25%;
    }

    .text-h{
      margin-top: 78%;
      width: 100%;
      font-size: 2.3rem;
      margin-bottom: 25%;
    }

    .nosotros{
      flex-wrap: wrap;
      margin-bottom: 50px;
      margin-top: 10%;
    }
    
    .nosotros section {
        width: 100%; 
    }

    .nosotros section img {
      width: 40%;
    }

    .text-nosotros {
        font-size: 2.6rem;
    }

    .historia{
      margin-top: 20%;
    }

    .historia img {
        width: 100%;
    }

    .margin-img{
      margin-bottom: 40px;
      height: 32%;
    }

    .img-b{
      height: 60%;
    }

    .vision{
      margin-bottom: 50px;
    }

    .img-proyecto {
      width: 80%;
    }

    .fin-galeria{
      margin-bottom: 20%;
    }

    .sec-sost{
      font-size:4.8rem;
    }

    .top-a{
      margin-top:10%;
    }

    .sec-politica {
      width: 80%;
      margin-top:10%;
      margin-left: 0;
      left:10%;
      font-size: 2rem;
      /*margin-bottom: 60px;*/
    }

    .sec-politica span a{
      width: 88px;
    }

    .lista {
      font-size: 3.2rem;
    }

    .lista-b {
      font-size: 2.5rem;
    }

    .sec-valores {
      font-size: 2rem;
      margin-top: 2%;
      margin-bottom: 60px;
      display: block;
    }

    .sec-valores p{
      width: 100%;
      margin-left: 4%;
      padding-right:7%;
    }

    #valores span a{
      width: 88px;
    }

    .sec-valores p img {
      display: block;
      margin: auto;
      margin-bottom: 26px;
    }

    .integridad{
      top: 76%;
    }
  
    .responsabilidad{
      top: 76%;
    }
  
    .compromiso{
      top: 76%;
    }
  
    .respeto{
      top: 76%;
    }

    .flecha-u-b{
      opacity: 0;
    }

    .sec-reconocimiento {
      margin-top: 15%;
      margin-left: 0;
    }

    .tecnologia{
      flex-wrap: wrap;
      margin-bottom: 50px;
      margin-top: 10%;
    }

    .tecnologia section {
      width: 100%;
    }

    .tecnologia section p{
      font-size: 2rem;
      padding: 5% 8% 5% 8%;
    }

    .text-tecnologia {
      padding: 10%;
      font-size: 2.5rem;
      margin-top: 15%;
    }

    .flecha-l{
      display:none;
    }

    .flecha-u{
      display:block;
    }

    .contact{
      display:block;
      margin-top: 15%;
    }

    .contact section {
      width:90%;
      height: 80%;

    }
    .mapa{
      /*padding-top: 20%;*/
    }

    footer{
      background-color: green;
    }

    footer .container{
      font-size: 1.2rem;
      text-align:center;
    }


    .slider3d__wrapper {
      /*overflow-y:auto;
      width:100%;*/
    }

    .slider {
      margin-top: 15%;
      margin-left: 2.5%;
      display: block;
    }

    .callbacks_container {
      width: 90%;

    }

  }

  @media (max-height:568px){
    .integridad{
      top: 80%;
    }
  
    .responsabilidad{
      top: 80%;
    }
  
    .compromiso{
      top: 80%;
    }
  
    .respeto{
      top: 80%;
    }
  }