html {
  background: url(Foto.jpg) no-repeat left center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
 margin: 10px auto;
 padding: 0;
  font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif, serif;

}

/* Logos */
#logo {
    display: inline-block;
    width: 700px;
    height: auto;
}
#NationalAward {
  position: absolute;
  right: 20px;
  bottom: 270px;
}
#lang{
  position: absolute;
  right: 20px;
  top: 20px;
}
#NationalMob {
  position: absolute;
  left: 0px;
  bottom: 0px;
}

/* Banner Inferior */
#rectangle{
    position: absolute;
    bottom: -65px;
    left: 0;
    height: 300px;
    background: black;
    width: 100%;
}
#footer{
  position: absolute;
  text-align: center;
  bottom: -65px;
  width: 100%;
  color: #c5b2a3;
  font-size: 14px;
}

.card {
  position: absolute;
  right: 1%;
  bottom: 95px;
  width: 300px;
  height: 215px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.card_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transform: scale( 0 );
  background-image: url( slide/1.jpg );
  animation: opaqTransition 42s cubic-bezier(0, 0, 0, 0.97) infinite;
}
.card_part.card_part-two {
  z-index: 6;
  background-image: url( slide/2.jpg );
  animation-delay: 7s;
}
.card_part.card_part-three {
  z-index: 5;
  background-image: url( slide/3.jpg );
  animation-delay: 14s;
}
.card_part.card_part-four {
  z-index: 4;
  background-image: url( slide/4.jpg );
  animation-delay: 21s;
}
.card_part.card_part-five {
  z-index: 5;
  background-image: url( slide/5.jpg );
  animation-delay: 28s;
}
.card_part.card_part-six {
  z-index: 4;
  background-image: url( slide/6.jpg );
  animation-delay: 35s;
}

.card2 {
  position: absolute;
  right: 335px;
  bottom: 95px;
  width: 300px;
  height: 215px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.card2_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transform: translateX( 300px );
  background-image: url( slide/6.jpg );
  animation: opaqTransition 42s cubic-bezier(0, 0, 0, 0.97) infinite;
}
.card2_part.card_part-two {
  z-index: 6;
  background-image: url( slide/1.jpg );
  animation-delay: 7s;
}
.card2_part.card_part-three {
  z-index: 5;
  background-image: url( slide/2.jpg );
  animation-delay: 14s;
}
.card2_part.card_part-four {
  z-index: 4;
  background-image: url( slide/3.jpg );
  animation-delay: 21s;
}
.card2_part.card_part-five {
  z-index: 5;
  background-image: url( slide/4.jpg );
  animation-delay: 28s;
}
.card2_part.card_part-six {
  z-index: 4;
  background-image: url( slide/5.jpg );
  animation-delay: 35s;
}

.card3 {
  position: absolute;
  right: 650px;
  bottom: 95px;
  width: 300px;
  height: 215px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.card3_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transform: translateX( 300px );
  background-image: url( slide/5.jpg );
  animation: opaqTransition 42s cubic-bezier(0, 0, 0, 0.97) infinite;
}
.card3_part.card_part-two {
  z-index: 6;
  background-image: url( slide/6.jpg );
  animation-delay: 7s;
}
.card3_part.card_part-three {
  z-index: 5;
  background-image: url( slide/1.jpg );
  animation-delay: 14s;
}
.card3_part.card_part-four {
  z-index: 4;
  background-image: url( slide/2.jpg );
  animation-delay: 21s;
}
.card3_part.card_part-five {
  z-index: 5;
  background-image: url( slide/3.jpg );
  animation-delay: 28s;
}
.card3_part.card_part-six {
  z-index: 4;
  background-image: url( slide/4.jpg );
  animation-delay: 35s;
}

.card4 {
  position: absolute;
  right: 965px;
  bottom: 95px;
  width: 300px;
  height: 215px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.card4_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transform: translateX( 300px );
  background-image: url( slide/4.jpg );
  animation: opaqTransition 42s cubic-bezier(0, 0, 0, 0.97) infinite;
}
.card4_part.card_part-two {
  z-index: 6;
  background-image: url( slide/5.jpg );
  animation-delay: 7s;
}
.card4_part.card_part-three {
  z-index: 5;
  background-image: url( slide/6.jpg );
  animation-delay: 14s;
}
.card4_part.card_part-four {
  z-index: 4;
  background-image: url( slide/1.jpg );
  animation-delay: 21s;
}
.card4_part.card_part-five {
  z-index: 5;
  background-image: url( slide/2.jpg );
  animation-delay: 28s;
}
.card4_part.card_part-six {
  z-index: 4;
  background-image: url( slide/3.jpg );
  animation-delay: 35s;
}

.card5 {
  position: absolute;
  right: 1280px;
  bottom: 95px;
  width: 300px;
  height: 215px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.card5_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transform: translateX( 300px );
  background-image: url( slide/3.jpg );
  animation: opaqTransition 42s cubic-bezier(0, 0, 0, 0.97) infinite;
}
.card5_part.card_part-two {
  z-index: 6;
  background-image: url( slide/4.jpg );
  animation-delay: 7s;
}
.card5_part.card_part-three {
  z-index: 5;
  background-image: url( slide/5.jpg );
  animation-delay: 14s;
}
.card5_part.card_part-four {
  z-index: 4;
  background-image: url( slide/6.jpg );
  animation-delay: 21s;
}
.card5_part.card_part-five {
  z-index: 5;
  background-image: url( slide/1.jpg );
  animation-delay: 28s;
}
.card5_part.card_part-six {
  z-index: 4;
  background-image: url( slide/2.jpg );
  animation-delay: 35s;
}

.card6 {
  position: absolute;
  right: 1595px;
  bottom: 95px;
  width: 300px;
  height: 215px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.card6_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transform: translateX( 300px );
  background-image: url( slide/2.jpg );
  animation: opaqTransition 42s cubic-bezier(0, 0, 0, 0.97) infinite;
}
.card6_part.card_part-two {
  z-index: 6;
  background-image: url( slide/3.jpg );
  animation-delay: 7s;
}
.card6_part.card_part-three {
  z-index: 5;
  background-image: url( slide/4.jpg );
  animation-delay: 14s;
}
.card6_part.card_part-four {
  z-index: 4;
  background-image: url( slide/5.jpg );
  animation-delay: 21s;
}
.card6_part.card_part-five {
  z-index: 5;
  background-image: url( slide/6.jpg );
  animation-delay: 28s;
}
.card6_part.card_part-six {
  z-index: 4;
  background-image: url( slide/1.jpg );
  animation-delay: 35s;
}


@media only screen
and (min-device-height : 768px)
and (max-device-width : 1024px){
  .card {
    width: 170px;
    height: 110px;
    position: absolute;
    right: 10px;
    top: 7px;
  }
  .card2 {
    width: 170px;
    height: 110px;
    position: absolute;
    right: 195px;
    top: 7px;
  }
  .card3 {
    width: 170px;
    height: 110px;
    position: absolute;
    right: 380px;
    top: 7px;
  }
  .card4 {
    width: 170px;
    height: 110px;
    position: absolute;
    right: 565px;
    top: 7px;
  }
  .card5 {
    width: 170px;
    height: 110px;
    position: absolute;
    right: 750px;
    top: 7px;
  }
  .card6 {
    width: 170px;
    height: 110px;
    position: absolute;
    right: 935px;
    top: 7px;
  }
  #NationalMob {
    position: absolute;
    left: -100px;
    bottom: 0px;
  }
  #rectangle{
    height: 215px;
    width: 100%;
  }
  #National{
    position: absolute;
    right: 20px;
    bottom: 140px;
  }
}
@media only screen
and (min-device-width : 800px){
  #rectangle{
    height: 320px;
    width: 100%;
  }
}



@keyframes opaqTransition {
  3% { transform: translateX( 0 ); }
  25% { transform: translateX( 0 ); }
  28% { transform: translateX( -300px ); }
  100% { transform: translateX( -300px ); }
}

/* Sign In / Registro */
/* Boton */

 .modal-btn {
    padding: 10px 20px;
    color: #272320;
    font-size: 24px;
    font-weight: bold;
    outline: solid #9a775a 2px;
    cursor: pointer;
    position: relative;
    left: 120px;
    background: rgba(179, 178, 163, 0.3);
  }
 .modal-btn:hover {
    background: rgba(139, 102, 72, 0.3);
  }
 .modal-content,
.modal-backdrop {
  opacity: 0;
  position: fixed;
  padding: 15px;
  padding-top: 50px;
  z-index: -1;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.modal-content {
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
  height: 550px;
  max-height: 85%;
  width: 70%;
  max-width: 600px;
  text-align: center;
  transform: scale(0);
  transition: all 0.5s ease-in-out;
}
.modal-backdrop {
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  transform: scale(0);
}
#modal-toggle {
  display: none;
}

#modal-toggle:checked ~ .modal-backdrop {
  opacity: 1;
  background-color: rgba(139, 102, 62, 0.5);
  z-index: 998;
  transform: scale(1);
}

#modal-toggle:checked ~ .modal-content {
  opacity: 1;
    background-color: #f5f3e5;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  cursor: auto;
  z-index: 999;
  transform: translateX(0%);
}
.modal-close-btn {
  margin-top: 5px;
  display: inline-block;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
}
.modal-close-btn svg {
  transition: 0.2s;
}
.modal-close-btn svg line {
  stroke-width: 5px;
  stroke: #8b6648;
}
.modal-close-btn:hover svg {
  transform: scale(1.2);
}
.tabs {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
}
.tabs > .radio {
  display: none;
}
.tabs > .radio:checked + .table + .tabs-content {
  display: block;
}
.tabs > .table {
  order: -1;
  flex-basis: 50%;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabs .tabs-content {
  width: 100%;
  display: none;
}
.tabs > .table {
 padding: 20px 0;
 text-align: center;
 border-bottom: solid #8b6648 5px;
 color: #8b6648;
 cursor: pointer;
}
.tabs > .table span {
 font-weight: 600;
}
.tabs > .table:hover {
 color: #8b6648;
 background: rgba(179, 178, 163, 0.3);
}
.tabs > .radio:checked + .table {
 color: #f5f3e5;
 background: #8b6648;
 cursor: auto;
}
.tabs > .radio:checked + .table span {
 display: inline-block;
 font-weight: 500;
 transform: scale(1.2);
 transition: 0.1s;
}
.tabs > .tabs-content form {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.tabs > .tabs-content form input {
  padding: 10px;
  margin: 15px 0;
  border: none;
  border-bottom: solid 1px #8b6648;
  font-size: 18px;
  letter-spacing: 1px;
  transition: 0.1s;
}
.tabs > .tabs-content form input:focus {
  transform: translateX(10px);
  outline: none;
}
.tabs > .tabs-content input[type="submit"] {
  padding: 15px 0;
  width: 100%;
  background: #8b6648;
  color: #f5f3e5;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
.tabs > .tabs-content input[type="submit"]:focus {
  transform: none;
}
.tabs > .tabs-content .forgot-password label {
  margin: 0 auto;
  width: 50%;
  color: #8b6648;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.5;
}
.tabs > .tabs-content .forgot-password label:hover {
  text-decoration: underline;
}
.forgot-password #forgot-password-toggle {
      display: none;
    }
    .forgot-password .forgot-password-content {
      height: 0;
      width: 0;
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      cursor: pointer;
      transition: opacity 0.2s ease-in;
    }
    .forgot-password .forgot-password-content input[type="email"] {
      width: 80%;
      margin-right: 0;
      border-right: none;
    }
    .forgot-password .forgot-password-content input[type="submit"] {
      width: 20%;
      margin-left: 0;
    }
    .forgot-password #forgot-password-toggle:checked ~ .forgot-password-content {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      opacity: 1;
      width: 100%;
      height: 100%;
      z-index: 999;
      pointer-events: auto;
      cursor: auto;
      visibility: visible;
    }

/*More Information*/
    .modal2-btn {
       padding: 10px 20px;
       color: #272320;
       font-size: 24px;
       font-weight: bold;
       outline: solid #9a775a 2px;
       cursor: pointer;
       position: relative;
       left: 152px;
       background: rgba(179, 178, 163, 0.3);
     }
     .modal3-btn {
        padding: 10px 20px;
        color: #272320;
        font-size: 24px;
        font-weight: bold;
        outline: solid #9a775a 2px;
        cursor: pointer;
        position: relative;
        left: 200px;
        background: rgba(179, 178, 163, 0.3);
      }
     .modal2-btn:hover {
        background: rgba(139, 102, 72, 0.3);
      }
     .modal2-content,
    .modal2-backdrop {
      opacity: 0;
      position: fixed;
      padding: 15px;
      padding-top: 50px;
      z-index: -1;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }
    .modal2-content {
      top: 0;
      bottom: 0;
      margin: auto;
      left: 0;
      right: 0;
      height: 550px;
      max-height: 85%;
      width: 70%;
      max-width: 600px;
      text-align: center;
      transform: scale(0);
      transition: all 0.5s ease-in-out;
    }
    .modal2-backdrop {
      left: 0;
      top: 0;
      height: 100vh;
      width: 100vw;
      transform: scale(0);
    }
    #modal2-toggle {
      display: none;
    }
    #modal2-toggle:checked ~ .modal2-backdrop {
      opacity: 1;
      background-color: rgba(139, 102, 62, 0.5);
      z-index: 998;
      transform: scale(1);
    }

    #modal2-toggle:checked ~ .modal2-content {
      opacity: 1;
      background-color: #f5f3e5;
      overflow-y: auto;
      overflow-x: hidden;
      pointer-events: auto;
      cursor: auto;
      z-index: 999;
      transform: translateX(0%);
    }
    .modal2-close-btn {
      margin-top: 5px;
      display: inline-block;
      cursor: pointer;
      position: absolute;
      top: 5px;
      right: 5px;
    }
    .modal2-close-btn svg {
      transition: 0.2s;
    }
    .modal2-close-btn svg line {
      stroke-width: 5px;
      stroke: #8b6648;
    }
    .modal2-close-btn:hover svg {
      transform: scale(1.2);
    }
    @media (max-width: 600px) {
      html {
        background: url(Foto.jpg) no-repeat left center fixed;
      }
      #logo {
        width: 350px;
      }
      #NationalAward{
        position: absolute;
        right: 10px;
        bottom: 150px;
        width: 60%;
      }
      #lang{
        position: absolute;
        left: 20px;
        top: 420px;
      }
      #rectangle{
        height: 230px;
        width: 100%;
      }
      .card {
        width: 170px;
        height: 110px;
        position: absolute;
        right: 12px;
        top: 7px;
      }
      .card_part {
        background-image: url( slide/1mob.jpg );
      }
      .card_part.card_part-two {
        background-image: url( slide/2mob.jpg );
      }
      .card_part.card_part-three {
        background-image: url( slide/3mob.jpg );
      }
      .card_part.card_part-four {
        background-image: url( slide/4mob.jpg );
      }
      .card_part.card_part-five {
        background-image: url( slide/5mob.jpg );
      }
      .card_part.card_part-six {
        background-image: url( slide/6mob.jpg );
      }
      .card2 {
        width: 170px;
        height: 110px;
        position: absolute;
        right: 195px;
        top: 7px;
      }
      .card2_part {
        background-image: url( slide/6mob.jpg );
      }
      .card2_part.card_part-two {
        background-image: url( slide/1mob.jpg );
      }
      .card2_part.card_part-three {
        background-image: url( slide/2mob.jpg );
      }
      .card2_part.card_part-four {
        background-image: url( slide/3mob.jpg );
      }
      .card2_part.card_part-five {
        background-image: url( slide/4mob.jpg );
      }
      .card2_part.card_part-six {
        background-image: url( slide/5mob.jpg );
      }
      .card3 {
        width: 170px;
        height: 110px;
        position: absolute;
        right: 380px;
        bottom: 115px;
      }
      .card3_part {
        background-image: url( slide/5mob.jpg );
      }
      .card3_part.card_part-two {
        background-image: url( slide/6mob.jpg );
      }
      .card3_part.card_part-three {
        background-image: url( slide/1mob.jpg );
      }
      .card3_part.card_part-four {
        background-image: url( slide/2mob.jpg );
      }
      .card3_part.card_part-five {
        background-image: url( slide/3mob.jpg );
      }
      .card3_part.card_part-six {
        background-image: url( slide/4mob.jpg );
      }
      .card4 {
        width: 0;
        height: 0;
      }
      .card5 {
        width: 0;
        height: 0;
      }
      .card6 {
        width: 0;
        height: 0;
      }
      #modal-toggle:checked ~ .modal-backdrop {
        opacity: 0;
      }
      .modal-content {
        top: 0;
        left: 0;
        height: 100vh;
        width: 90vw;
      }
      .modal-btn {
         padding: 10px 20px;
         color: #272320;
         font-size: 22px;
         font-weight: bold;
         outline: solid #9a775a 2px;
         cursor: pointer;
         position: relative;
         left: 30px;
         background: rgba(179, 178, 163, 0.3);
       }
       #rectangle{
           position: absolute;
           bottom: -90px;
           left: 0;
           width: 100%;
           /*! height:350px; */
           background:black;
       }
       #footer{
         position: absolute;
         text-align: center;
         bottom: -60px;
         width: 100%;
         color: #c5b2a3;
         font-size: 12px;
       }
       #modal2-toggle:checked ~ .modal-backdrop {
         opacity: 0;
       }
       .modal2-content {
         top: 0;
         left: 0;
         height: 100vh;
         width: 90vw;
       }
       .modal2-btn {
          padding: 10px 20px;
          color: #272320;
          font-size: 22px;
          font-weight: bold;
          outline: solid #9a775a 2px;
          cursor: pointer;
          position: relative;
          left: 65px;
          background: rgba(179, 178, 163, 0.3);
        }
        .modal3-btn {
           left: 100px;
         }
    }
    
.lazyLoad {
    width: 100%;
    opacity: 0;
}

.visible {
    transition: opacity 1000ms ease;
    opacity: 1;
}