@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');


body,html {
  font-family:Lato;
  background: black;
}

img {
	max-width:100%;
}


a:hover,a{ color:white; }
.menu-navegacion {
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  padding:20px 5vw 0;
  z-index:999;
}
.header-links {
  color:white;
  font-size:20px;
  padding:0;
  margin:0;
  list-style:none;
  margin-top:15px;
  font-weight:300;
}
.burger-open {
  position: absolute;
  right:10vw;
  top:5vh;
  font-size:40px;
  color:white;
  cursor:pointer;
}
.header-links li {
  margin-bottom:10px;
}

.header-links li i {
  margin-right:5px;
}

.section-background {

  color:white;
  background-color:black;
  background-size: 50vw auto;
  align-items: center;

}

.section-background .content {

  justify-content: center;
  padding: 5vh 5vw;
  display: flex;
  flex-direction: column;
  text-align: left;
}
@media screen and (min-width:768px) {

  .section-background:first-child{
      padding-top:24vh;
  }

  .section-background  {
    padding-top: 15vh;
    padding-bottom: 15vh;
  }


}
@media screen and (min-width:1400px) {.content .title {font-size:40px !important;}}
@media screen and (min-width:1600px) {.content .title {font-size:45px !important;}}

#overlay-menu {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  height:100%;
  font-size:27px;
  font-weight:100;
  width:100%;
  background:rgba(0,0,0,.8);

  z-index:999999;
  align-items: center;
  justify-content: center;
  display:flex;

  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;

}

#overlay-menu.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.5s linear;
}


.close-overlay {
  display:inline-flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  top:10vh;
  right:10vw;
  height:50px;
  width:50px;
  color:white;
  border-radius:100%;
  text-align:center;
  transition:all .3s;
  cursor:pointer;
}
.close-overlay:hover {
  transform: scale(1.04);
}


 .content .pre-title  { font-size: 20px; font-weight:300;}
.content .title  { font-size: 38px; font-weight:100;}
.title b {font-weight:300 !important;}

.footer-links {text-align:center; list-style:none; margin:20px 0; padding:0 20px; color:white;}
.footer-links li {
  display:inline-block;
  margin: 10px 10px;
}
.footer-links li a {
  color:white;
}
.section-background .image {
  padding:0 !important;
}

@media screen and (max-width:768px) {

    .section-background .image {
      padding:0 !important;
    }
  .background-1 {margin-top:200px;}
  .content .pre-title,
  .content .title {
    text-align:center;
    justify-content:center;
    align-items: center;
  }

  .content {
    padding: 40px 9vw 15vh !important;
  }
  .content .title {
    font-size:30px;
  }

  .footer-links li {
    display:table;
    padding: 10px;
    margin: 10px auto;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000000;
}
.overlay .overlayDoor:before, .overlay .overlayDoor:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background: #111;
  transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
  transition-delay: 0.8s;
}
.overlay .overlayDoor:before {
  left: 0;
}
.overlay .overlayDoor:after {
  right: 0;
}
.overlay.loaded .overlayDoor:before {
  left: -50%;
}
.overlay.loaded .overlayDoor:after {
  right: -50%;
}
.overlay.loaded .overlayContent {
  opacity: 0;
  margin-top: -15px;
}
.overlay .overlayContent {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}
.overlay .overlayContent .skip {
  display: block;
  width: 130px;
  text-align: center;
  margin: 50px auto 0;
  cursor: pointer;
  color: #fff;
  font-family: "Nunito";
  font-weight: 700;
  padding: 12px 0;
  border: 2px solid #fff;
  border-radius: 3px;
  transition: 0.2s ease;
}
.overlay .overlayContent .skip:hover {
  background: #ddd;
  color: #444;
  border-color: #ddd;
}

.loader {
  width: 128px;
  height: 128px;
  border: 3px solid #fff;
  border-bottom: 3px solid transparent;
  border-radius: 50%;
  position: relative;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader .inner {
  width: 64px;
  height: 64px;
  border: 3px solid transparent;
  border-top: 3px solid #fff;
  border-radius: 50%;
  -webkit-animation: spinInner 1s linear infinite;
          animation: spinInner 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spinInner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-720deg);
  }
}
@keyframes spinInner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-720deg);
  }
}


/*
.background-1 {background-image: url(../img/row1.jpg); background-position: right center; background-repeat: no-repeat;  }
.background-2 {background-image: url(../img/row2.jpg); background-position: left center; background-repeat: no-repeat;  }
.background-3 {background-image: url(../img/row3.jpg); background-position: right center; background-repeat: no-repeat;  }
.background-4 {background-image: url(../img/row4.jpg); background-position: left center;  background-repeat: no-repeat;  }
*/