@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Be+Vietnam:400,600&display=swap');

.os-animation{opacity:0;}
.os-animation.animated{opacity:1;}


html,body{width:100%;height:100%;font-family: 'Montserrat', sans-serif;}
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000;z-index:9999;}
#loader2{width:169px;height:40px;position:absolute;left:50%;top:50%;background:url(../imagenes/logo.png) no-repeat center 0;margin-left:-85px;margin-top:-20px;}
*{
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
iframe{display:block;border:none;}

#mensajon {
      color: #000000;
      width:280px;
      padding:10px;
      border:0;
      margin:auto;
      margin-top:10px;
      text-align:center;
    }

#slide1{text-align:center;width:100%; height:100%;min-height:700px;}
#somos{ width:100%; text-align:center; }
#slideinterior{background:url(../imagenes/prodos.jpg) no-repeat 50% 50% fixed ;background-size:cover; text-align:center; width:100%; height:430px; }
#contacto{ width:100%; text-align:center; background-color:#f4f7f9; }
#footi{ width:100%; text-align:center; background-color:#1d1d1b; }


#elheader{ width:100%; height:80px; background-color: transparent; z-index:4; position:fixed; top:0px;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;}
#elheader.xs{ background-color:rgba(255, 255, 255, 0.95); }
#elheader.xl{ background-color:transparent; }

#elogo{ width:169px; height:40px; margin-top:20px; background:url(../imagenes/logo.png); transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;}
#elogo.xs{ background:url(../imagenes/logo2.png); }
#elogo.xl{ background:url(../imagenes/logo.png); }


#suite{ background-color:#f1f2f3;height:100%;min-height:600px;}

#reservame{background:url(../imagenes/reserva.jpg) no-repeat 50% 50%  ;background-size:cover; min-height:700px; height:100%; text-align:right;}

#logo{POSITION:absolute;z-index:999;left:5%;top:0px;width:336px;height:144px;}
#logomovil{display: none;}


#flechas{POSITION:relative; width:35px; text-align:left; left:50%; margin-left:-17px;bottom:100px;}


/* Overline Reveal */
.smooth {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden; line-height:80px; color:#ffffff; text-transform:uppercase;font-family: 'Be Vietnam', sans-serif; font-size:14px; font-weight:600;
}
.smooth:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #d8c821;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.smooth:hover:before{
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.smooth.xs{ color:#1d1d1b; }
.smooth.xl{ color:#ffffff;  }


.smoothi {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden; line-height:80px; color:#ffffff; text-transform:uppercase;font-family: 'Be Vietnam', sans-serif; font-size:14px; font-weight:600;
}
.smoothi:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #d8c821;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.smoothi:hover:before{
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.smoothi.xs{ color:#1d1d1b; }
.smoothi.xl{ color:#ffffff;  }


.smootha2{color:#3b4441;font-size:13px;text-decoration:none;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;text-transform:uppercase; }
.smootha2:hover{color:#bad902; -webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;}


.texto1{color:#1d1d1b;font-size:14px;line-height:140%;}
.texto2{color:#1d1d1b;font-size:20px;line-height:100%; font-weight:600;}
.texto3{color:#1d1d1b;font-size:15px;line-height:160%;}
.texto4{color:#d8c821;font-size:30px;line-height:150%; font-weight:600; text-transform:uppercase;}
.texto5{color:#ffffff;font-size:50px;line-height:100%;font-weight:800;text-transform:uppercase;}
.texto6{color:#d8c821;font-size:14px;line-height:150%;}
.texto7{color:#ffffff;font-size:14px;line-height:36px;}


#arriba, #arriba1,#arriba2{display:inline-block;vertical-align:top;}
#arriba{width:1200px;vertical-align:middle; text-align:left; }
#arriba1{width:750px;margin-right:-4px; text-align:left;}
#arriba2{width:450px;margin-right:-4px;text-align:right; }

#hacemos, #hacemos1,#hacemos2{display:inline-block;vertical-align:top;}
#hacemos{width:100%;vertical-align:middle; text-align:left; background-color:#f4f7f9; }
#hacemos1{width:50%;margin-right:-4px; text-align:left; background:url(../imagenes/somos.jpg) no-repeat 50% 50% ;background-size:cover; text-align:center;  height:600px}
#hacemos2{width:50%;margin-right:-4px;text-align:center; }

#quehacemos, #quehacemos1, #quehacemos2{display:inline-block;vertical-align:top;}
#quehacemos{width:520px;vertical-align:middle; text-align:left; background-color:#f4f7f9; margin-top:110px; }
#quehacemos1{width:230px;margin-right:-4px;text-align:left; }
#quehacemos2{width:60px;margin-right:-4px;text-align:left; }

#prodos, #prodos1{display:inline-block;vertical-align:top;}
#prodos{width:1200px;vertical-align:middle; text-align:left;}
#prodos1{width:400px;margin-right:-4px;text-align:center; }

.tablaprodos{ width:80%;}


.transparente{background-color:#f8fafb; border:1; border-color:#1d1d1b;text-align:center;HEIGHT:66px;width:100%; font-size:20PX;color:#3b4441; letter-spacing:3px;}

.boton1{background-color:#1d1d1b;text-align:center;HEIGHT:47px;width:152px;border:0;font-size:20PX;color:#d6c723;cursor:pointer; text-transform:uppercase; font-weight:}

#contactame, #contactame1,#contactame2,#contactame3{display:inline-block;vertical-align:top;}
#contactame{max-width:600px; width:90%;vertical-align:middle; text-align:right; }
#contactame1{width:100%;margin-right:0px; text-align:center; height:106px;}
#contactame2{width:100%;margin-right:0px;text-align:center; height:106px;}
#contactame3{width:100%%;margin-right:0px;text-align:right; height:106px;}

#pieses, #pieses1,#pieses2,#pieses3{display:inline-block;vertical-align:top;}
#pieses{width:1200px;vertical-align:middle; text-align:left; }
#pieses1{width:860px;margin-right:-4px; text-align:left;}
#pieses2{width:300px;margin-right:-4px;text-align:left;}
#pieses3{width:40px;margin-right:-4px;text-align:center;}

#elwhats{ width:60px; height:60px; right:0; top:50%; margin-top:-30px; position:fixed; z-index:999;}

@media screen and (max-width:1210px){
#prodos{width:800px;vertical-align:middle; text-align:left;}
#prodos1{width:400px;margin-right:-4px;text-align:center; }

.tablaprodos{ width:80%;}

#pieses{width:900px;vertical-align:middle; text-align:left; }
#pieses1{width:560px;margin-right:-4px; text-align:left;}
#pieses2{width:300px;margin-right:-4px;text-align:left;}
#pieses3{width:40px;margin-right:-4px;text-align:center;}
}

@media screen and (max-width:1100px){
#hacemos1{width:40%;margin-right:-4px; }
#hacemos2{width:60%;margin-right:-4px;}

#quehacemos{width:90%;vertical-align:middle; text-align:left; background-color:#f4f7f9; margin-top:80px; }
#quehacemos1{width:45%;margin-right:-4px;text-align:left; }
#quehacemos2{width:10%;margin-right:-4px;text-align:left; }
}

@media screen and (max-width:1000px){
#hacemos1{width:100%;margin-right:0px; height:400px;}
#hacemos2{width:100%;margin-right:0px;}
}

@media screen and (max-width:910px){
#pieses{width:700px;vertical-align:middle; text-align:left; }
#pieses1{width:360px;margin-right:-4px; text-align:left;}
#pieses2{width:300px;margin-right:-4px;text-align:left;}
#pieses3{width:40px;margin-right:-4px;text-align:center;}
}


@media screen and (max-width:810px){
#prodos{width:90%;vertical-align:middle; text-align:left;}
#prodos1{width:100%;margin-right:0px;text-align:center; }

.tablaprodos{ width:100%;}

.texto5{font-size:40px;}
#slideinterior{background:url(../imagenes/prodos.jpg) no-repeat 50% 50% ;background-size:cover; text-align:center; width:100%; height:430px; }

}

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

#pieses{width:90%;vertical-align:middle; text-align:center; }
#pieses1{width:100%;margin-right:0px; text-align:center;height:50px;}
#pieses2{width:100%;margin-right:0px;text-align:center; height:80px;}
#pieses3{width:100%;margin-right:0px;text-align:center;height:70px;}	

#hacemos1{width:100%;margin-right:0px; height:300px;}

#quehacemos{width:90%;vertical-align:middle; text-align:left; background-color:#f4f7f9; margin-top:80px; }
#quehacemos1{width:100%;margin-right:0px;text-align:left; }
#quehacemos2{ display:none;}
}

@-moz-keyframes spin {
    0% {
opacity: 1;   -moz-transform: translateY(-5px); }

    100% {
opacity: 1;  -moz-transform: translateY(5px);   }
}



@-webkit-keyframes spin {
    0% {
opacity: 1; -webkit-transform: translateY(-5px); }

    100% {
opacity: 1; -webkit-transform: translateY(5px); }  
}

.ball{-moz-animation:spin 1.5s infinite linear;-webkit-animation:spin 1.5s infinite linear;-0-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear;}
.ball2{-moz-animation:spin2 1.5s infinite linear;-webkit-animation:spin2 1.5s infinite linear;-0-animation:spin2 1.5s infinite linear;animation:spin2 1.5s infinite linear;}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(-6px);}
}
@-webkit-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(-6px);}
}
@-o-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(-6px);}
}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(6px);}
}
@-webkit-keyframes spin{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(6px);}
}
@-o-keyframes spin{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(6px);}
}
.flecha3{-moz-animation:spin3 1.5s infinite linear;-webkit-animation:spin3 1.5s infinite linear;-0-animation:spin3 1.5s infinite linear;animation:spin3 1.5s infinite linear;}
@-moz-keyframes spin3{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(6px);}
}
@-webkit-keyframes spin3{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(6px);}
}
@-o-keyframes spin3{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(6px);}
}


#menumovil{ display:none;}
.button_container {
  position: absolute;
  top: -5px;;
  right: 0px;
  height: 0px;
  width: 35px;
  cursor: pointer;
  z-index: 9999;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -moz-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #d8c821;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;z-index: 9999;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background-color:#000000;
    top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  -moz-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
  -moz-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  -moz-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
  -moz-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  
  font-weight: 900;
  text-align: right;
  margin-right:52px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
  font-size: 40px;
  opacity:1; text-transform:uppercase;
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;font-size: 42px;
  opacity:1;-webkit-transition: .25s;
  transition: .25s;color: #d8c821;
}
.overlay ul li a:after {
  font-size: 55px;
  opacity:.9;-webkit-transition: .25s;
  transition: .25s;
  
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@media screen and (max-width:1210px){
#arriba{width:90%;vertical-align:middle; text-align:left; }
#arriba1{width:45%;margin-right:-4px; text-align:left;}
#arriba2{width:55%;margin-right:-4px;text-align:right; }
}

@media screen and (max-width:810px){
#logomovil{POSITION:fixed;z-index:999;left:5%;top:0px;width:133px;height:70px;display: block;}
#logo{display: none;}

#arriba{width:90%;vertical-align:middle; text-align:left; }
#arriba1{width:100%;margin-right:-4px;  text-align:left;}
#arriba2,#arriba3{display:none;}

#menumovil{ z-index:9999;position: fixed;top: 30px;
  right: 30px;
  height: 27px;
  width: 35px; display:block;}
}