@charset "utf-8";
/* CSS Document */

/* Ocultar temporalmente la opción de reserva de stand */
#presale-contact-btn {
    display: none !important;
}

/*
  TEMPLATE BACKGROUNDS
    ken burns slideshow IMG
	single img bg IMG
  reset
  layout
  center container
  buttons
  navigation
    lines
  the wall
    drag intro
  countdown
  contact form
    placeholders
  newsletter form
  preloader
  borders
  icon extras
    icon effect
  works hover
  skills bar
  logo
  
  ken burns slideshow
  single img bg
  YouTube video
*/


/* TEMPLATE BACKGROUNDS */
/* ken burns slideshow IMG */
.kenburns-slide-1 {
background-image: url(../img/background/kenburns-bg-1.jpg);
}

.kenburns-slide-2 {
background-image: url(../img/background/kenburns-bg-2.jpg);
}

.kenburns-slide-3 {
background-image: url(../img/background/kenburns-bg-3.jpg);
}

.kenburns-slide-4 {
background-image: url(../img/background/kenburns-bg-4.jpg);
}

/* single img bg IMG */
.single-img-bg {
background-image: url(../img/background/single-img-bg.jpg);
}


/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

html, body {
height: 100%;
}

body {
line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

*:focus {  
outline: none;
}

/* remove dotted outline from links, button and input element */
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline: 0;
}


/* layout */
body {
font-family: 'Raleway', sans-serif;
font-size: 13px;
line-height: 1.5;
font-style: normal;
font-weight: 400;
text-align: left;
color: #111;
background: #fff;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
}

a {
color: #ffffff;
text-decoration: none;
outline: none;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a:hover, a:visited, a:active, a:focus {
color: #ffffff;
text-decoration: none;
outline: none;
}

p {
color: #111;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
}

p a,
.quotations a {
position: relative;
color: #ffffff;
text-decoration: none;
outline: none;
font-weight: normal;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

p a:after,
.quotations a:after {
content: "";
position: absolute;
display: block;
width: 20px;
height: 1px;
left: 0;
bottom: -10px;
background-color: #111;
-webkit-transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
     -o-transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
        transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

p a:hover,
.quotations a:hover {
color: #111;
text-decoration: none;
outline: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

p a:hover:after,
.quotations a:hover:after {
width: 100%;
background-color: #111;
}

strong {
font-weight: bold;
}

::-moz-selection { background: #111; color: #fff; }
     ::selection { background: #111; color: #fff; }

 
h1, h2, h3, h4, h5, h6 {
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.clearfix {
clear: both;
float: none;
overflow: hidden;
}

h2 {
font-family: 'Oswald', sans-serif;
font-size: 45px;
font-weight: 700;
line-height: 1;
letter-spacing: normal;
color: #111;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 3px 0 0 12px;
}

h2 .get-behind {
position: absolute;
width: 100%;
height: auto;
left: 0;
margin-top: -31px;
font-size: 55px;
letter-spacing: normal;
color: #111;
        opacity: 0.15;
   -moz-opacity: 0.15;
-webkit-opacity: 0.15;
filter: alpha(opacity=15);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}

h3 {
font-family: 'Dosis', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.35em;
color: #111;
margin: 0;
padding: 4px 0 0 17px;
}

h4 {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
color: #999;
margin: 0 0 0 12px;
padding: 0;
}

.services-owl h5 {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 25px;
color: #111;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: normal;
margin: 0 auto -2px auto;
padding: 2px 0 0 10px;
}

.services-owl p {
text-align: center;
}

.upper-page {
min-height: 100%;
margin: 0;
padding: 0;
}

.upper-content {
margin: 0 auto;
padding: 0;
}

.lower-page {
min-height: 100%;
margin: 0;
padding: 0;
}

.lower-page.works {
min-height: 100%;
margin: 0 auto;
padding: 0;
}

.lower-content {
margin: 0 auto;
}

.lower-content p {
color: #5f5f5f;
font-weight: 400;
letter-spacing: 0.05em;
padding: 0 10px 10px 10px;
}

.lower-content-img {
position: relative;
margin: 0 auto 24px auto;
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
-webkit-transition: -webkit-transform 1s;
   -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
     -o-transition: -o-transform 1s;
        transition: transform 1s;
}

.lower-content-img:hover {
-webkit-transform: rotateY(360deg);
   -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
     -o-transform: rotateY(360deg);
        transform: rotateY(360deg);
-webkit-transition: -webkit-transform 1s;
   -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
     -o-transition: -o-transform 1s;
        transition: transform 1s;
}

.lower-content-img-correction {
margin: 0 auto;
}

.sections {
position: relative;
margin: 0 auto;
padding: 0;
z-index: 5;
}

@media only screen and (max-width: 1200px) {
  .sections {
    margin: 200px auto 200px auto;
    padding: 0 50px 0 50px;
  }
}

@media only screen and (max-width: 880px) {
  .sections {
    padding: 0 100px 0 100px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  .sections {
    margin: 200px auto 200px auto;
    padding: 0 20px 0 20px;
  }
}

@media only screen and (max-width: 480px) {
  .sections {
    margin: 200px auto 200px auto;
    padding: 0 20px 0 20px;
  }
}

.sections-home {
position: relative;
margin: 0 auto;
padding: 0;
z-index: 5;
}

#about, #services, #works, #contact {
display: none;
}

.dividerOT-about,
.dividerOT-services,
.dividerOT-works {
position: relative;
width: auto;
height: 85px;
margin: 0 auto;
}

.dividerOT-contact {
position: relative;
width: auto;
height: 49px;
margin: 0 auto;
}

@media only screen and (max-width: 880px) {
  .dividerOT-contact-form {
    position: relative;
    width: auto;
    height: 71px;
    margin: 0 auto;
  }
}

.make-space {
margin-left: 15px;
margin-right: 15px;
}

.awesome {
font-size: 17px;
letter-spacing: 0.05em;
}

.awesome-services {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.05em;
}

.awesome-contact {
font-size: 25px;
margin: 0;
padding: 12px 0 12px 10px;
text-align: left;
display: block;
}

.change-color {
color: #8d8d8d;
}


/* center container */
.center-container-home {
position: absolute;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
background: none;
}

.center-block-home {
display: table-cell;
vertical-align: middle;
}

.center-container {
position: absolute;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
background: none;
}

.center-block {
display: table-cell;
vertical-align: middle;
}


/* buttons */
.btn {
position: relative;
display: block;
width: 185px;
height: 40px;
overflow: hidden;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
padding: 0 20px;
-webkit-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
   -moz-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -ms-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
     -o-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
border: none;
cursor: pointer;
background: rgba(0, 0, 0, 1);
z-index: 5;
}

.btn .btn-label {
padding: 14px 0;
}

.btn:hover, .btn:active {
color: #111;
border: none;
outline: none;
}

btn:focus {
color: #fff;
border: none;
outline: none;
}

.btn span {
position: relative;
display: inline-block;
z-index: 2;
}

.btn .mask {
position: absolute;
display: block;
width: 0;
height: 100%;
left: 0; 
top: 0;
-webkit-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
   -moz-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -ms-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
     -o-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;	
background: rgba(255, 255, 255, 1);
border: 1px solid #111;
z-index: 1;
}

.btn:hover .mask {
width: 100%;
}

.btn-padding {
margin: 20px 0 0 0;
}

.btn-correction {
margin: 20px auto 0 auto;
}

.btn.btn-mobile {
display: none;
visibility: hidden;
}

@media only screen and (max-width: 880px) {
  .btn.btn-pc {
    display: none;
    visibility: hidden;
  }

  .btn.btn-mobile {
    display: inline;
    visibility: visible;
    width: 55px;
  }
}


/* navigation */
#menu-mobile-btn {
position: absolute;
width: 63px;
height: 50px;
top: 37px;
right: 35px;
z-index: 100000;
}

.menu-toggle {
position: absolute;
display: block;
padding: 0;
background: none;
line-height: 1;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
border: none;
z-index: 100000;
}

#menu-mobile {
position: fixed;
font-family: 'Oswald', sans-serif;
font-size: 30px;
font-style: normal;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
width: 390px;
height: 100%;
right: -200%;
top: 0;
margin: auto;
-webkit-transition: right .6s ease-in-out;
   -moz-transition: right .6s ease-in-out;
    -ms-transition: right .6s ease-in-out;
     -o-transition: right .6s ease-in-out;
        transition: right .6s ease-in-out;
-webkit-transform: skew(-22deg, 0deg);
   -moz-transform: skew(-22deg, 0deg);
    -ms-transform: skew(-22deg, 0deg);
     -o-transform: skew(-22deg, 0deg);
        transform: skew(-22deg, 0deg);
background: rgba(0, 0, 0, 1);
z-index: 99999;
}

#menu-mobile.activated {
right: 0;
}

#menu-mobile ul {
width: 390px;
list-style: none outside none;
margin: 0 auto;
padding-left: 121px;
}

#menu-mobile ul li {
padding: 0 0 2px 0;
}

#menu-mobile .credits {
font-size: 12px;
margin: 6px 0 0 0;
}

#menu-mobile .credits a {
color: #fff;
text-decoration: none;
}

#menu-mobile a {
display: none;
min-width: 10px;
color: #fff;
text-decoration: none;
-webkit-transition: color .8s ease-in-out;
   -moz-transition: color .8s ease-in-out;
    -ms-transition: color .8s ease-in-out;
     -o-transition: color .8s ease-in-out;
        transition: color .8s ease-in-out;
}

#menu-mobile a:hover {
color: #8d8d8d;
-webkit-transition: color .8s ease-in-out;
   -moz-transition: color .8s ease-in-out;
    -ms-transition: color .8s ease-in-out;
     -o-transition: color .8s ease-in-out;
        transition: color .8s ease-in-out;
}

#menu-mobile li .active {
color: #8d8d8d;
}

.menu-nav-wrapper {
display: table;
width: 100%;
height: 100%;
overflow: hidden;
}

.menu-nav {
display: table-cell;
width: 100%;
height: 100%;	
vertical-align: middle;
}

@media only screen and (max-width: 880px) {
  #menu-mobile-btn {
    top: 12px;
    right: 9px;
  }

  #menu-mobile {
    font-size: 20px;
    width: 300px;
  }

  #menu-mobile ul {
    width: 300px;
    padding-left: 81px;
  }

  #menu-mobile ul li {
    padding: 0 0 3px 0;
  }

  #menu-mobile .credits {
    font-size: 10px;
    margin: 6px 0 0 0;
  }
}

@media only screen and (max-width: 640px) {
  #menu-mobile {
    font-size: 17px;
    width: 230px;
  }

  #menu-mobile ul {
    width: 230px;
    padding-left: 47px;
  }
}


/* lines */
.lines-button {
margin: -16px 0 0 -3px;
padding: 30px 16px;
cursor: pointer;
-webkit-user-select: none;
 -khtml-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

.lines-button:hover {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.lines-button:active {
-webkit-transition: 0;
   -moz-transition: 0;
	-ms-transition: 0;
     -o-transition: 0;
        transition: 0;
}

.lines {
position: relative;
display: inline-block;
width: 35px;
height: 2px;
-webkit-transition: .3s;
   -moz-transition: .3s;
	-ms-transition: .3s;
     -o-transition: .3s;
        transition: .3s;
background: #111;
}

.lines:after,
.lines:before {
content: "";
position: absolute;
display: inline-block;
width: 35px;
height: 2px;
-webkit-transition: .3s;
   -moz-transition: .3s;
	-ms-transition: .3s;
     -o-transition: .3s;
        transition: .3s;
left: 0;
-webkit-transform-origin: .28571rem center;
   -moz-transform-origin: .28571rem center;
    -ms-transform-origin: .28571rem center;
     -o-transform-origin: .28571rem center;
        transform-origin: .28571rem center;
background: #111;
}

.lines:before {
top: 10px;
}

.lines:after {
top: -10px;
}

.lines-button.minus.lines-close .lines:after,
.lines-button.minus.lines-close .lines:before {
-webkit-transform: none;
   -moz-transform: none;
    -ms-transform: none;
     -o-transform: none;
        transform: none;
top: 0;
width: 35px;
background: #8d8d8d;
}

.lines-button.x.lines-close .lines {
background: 0 0;
}

.lines-button.x.lines-close .lines:after,
.lines-button.x.lines-close .lines:before {
-webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
top: 0;
width: 35px;
background: #8d8d8d;
}

.lines-button.x.lines-close .lines:before {
-webkit-transform: rotate3d(0,0,1,45deg);
   -moz-transform: rotate3d(0,0,1,45deg);
    -ms-transform: rotate3d(0,0,1,45deg);
     -o-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
}

.lines-button.x.lines-close .lines:after {
-webkit-transform: rotate3d(0,0,1,-45deg);
   -moz-transform: rotate3d(0,0,1,-45deg);
    -ms-transform: rotate3d(0,0,1,-45deg);
     -o-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
}

.lines-button.x2 .lines {
-webkit-transition: background .3s .5s ease;
   -moz-transition: background .3s .5s ease;
	-ms-transition: background .3s .5s ease;
     -o-transition: background .3s .5s ease;
        transition: background .3s .5s ease;
}

.lines-button.x2 .lines:after,
.lines-button.x2 .lines:before {
-webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
-webkit-transition: top .3s .6s ease, -webkit-transform .3s ease;
   -moz-transition: top .3s .6s ease, -moz-transform .3s ease;
	-ms-transition: top .3s .6s ease, -ms-transform .3s ease;
     -o-transition: top .3s .6s ease, -o-transform .3s ease;
        transition: top .3s .6s ease, transform .3s ease;
}

.lines-button.x2.lines-close .lines {
-webkit-transition: background .3s 0 ease;
   -moz-transition: background .3s 0 ease;
	-ms-transition: background .3s 0 ease;
     -o-transition: background .3s 0 ease;
        transition: background .3s 0 ease;
background: 0 0;
}

.lines-button.x2.lines-close .lines:after,
.lines-button.x2.lines-close .lines:before {
-webkit-transition: top .3s ease, -webkit-transform .3s .5s ease;
   -moz-transition: top .3s ease, -moz-transform .3s .5s ease;
	-ms-transition: top .3s ease, -ms-transform .3s .5s ease;
     -o-transition: top .3s ease, -o-transform .3s .5s ease;
        transition: top .3s ease, transform .3s .5s ease;
top: 0;
width: 35px;
background: #8d8d8d;
}

.lines-button.x2.lines-close .lines:before {
-webkit-transform: rotate3d(0,0,1,45deg);
   -moz-transform: rotate3d(0,0,1,45deg);
    -ms-transform: rotate3d(0,0,1,45deg);
     -o-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
}

.lines-button.x2.lines-close .lines:after {
-webkit-transform: rotate3d(0,0,1,-45deg);
   -moz-transform: rotate3d(0,0,1,-45deg);
    -ms-transform: rotate3d(0,0,1,-45deg);
     -o-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
}


/* the wall */
.wall {
z-index: 1;
}

#viewport {
position: relative;
width: 1020px;
height: 520px;
overflow: hidden;
background: #fff;
margin: -78px auto 0 auto;
}

@media only screen and (max-width: 880px) {
  #viewport {
    width: 720px;
    height: 367px;
    margin: -87px auto 0 auto;
  }
}

@media only screen and (max-width: 640px) {
  #viewport {
    width: 620px;
    height: 316px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  #viewport {
    width: 338px;
    height: 172px;
	margin-top: 1px;
  }
}

@media only screen and (max-width: 480px) {
  #viewport {
    width: 340px;
    height: 172px;
	margin-top: 1px;
	margin: -87px auto 0 auto;
  }
}

#overlay,
#overlay-all {
position: relative;
width: 100%;
height: 520px;
background: none;
cursor: move;
z-index: 2;
}

#overlay-all {
cursor: auto;
}

@media only screen and (max-width: 880px) {
  #overlay,
  #overlay-all {
    width: 100%;
    height: 367px;
  }
}

@media only screen and (max-width: 640px) {
  #overlay,
  #overlay-all {
    width: 100%;
    height: 316px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  #overlay,
  #overlay-all {
    width: 100%;
    height: 173px;
  }
}

@media only screen and (max-width: 480px) {
  #overlay,
  #overlay-all {
    width: 100%;
    height: 173px;
  }
}

#overlay-img {
position: relative;
width: 1020px;
height: 100%;
background: transparent url(../img/site-under-construction-1020x520.png) no-repeat center center;
margin: 0 auto;
border: 5px solid #fff;
z-index: 2;
}

@media only screen and (max-width: 880px) {
  #overlay-img {
    width: 720px;
    height: 100%;
    background: transparent url(../img/site-under-construction-720x367.png) no-repeat center center;
    z-index: 3;
  }
}

@media only screen and (max-width: 640px) {
  #overlay-img {
    width: 620px;
    height: 100%;
    background: transparent url(../img/site-under-construction-620x316.png) no-repeat center center;
    z-index: 3;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  #overlay-img {
    width: 340px;
    height: 100%;
    background: transparent url(../img/site-under-construction-340x173.png) no-repeat center center;
    z-index: 3;
  }
}

@media only screen and (max-width: 480px) {
  #overlay-img {
    width: 340px;
    height: 100%;
    background: transparent url(../img/site-under-construction-340x173.png) no-repeat center center;
    z-index: 3;
  }
}

#overlay-img.oblique {
background: transparent url(../img/site-under-construction-1020x520-oblique.png) no-repeat center center;
}

@media only screen and (max-width: 880px) { 
  #overlay-img.oblique {
    background: transparent url(../img/site-under-construction-720x367-oblique.png) no-repeat center center;
  }
}

@media only screen and (max-width: 640px) {
  #overlay-img.oblique {
    background: transparent url(../img/site-under-construction-620x316-oblique.png) no-repeat center center;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  #overlay-img.oblique {
    background: transparent url(../img/site-under-construction-340x173-oblique.png) no-repeat center center;
  }
}

@media only screen and (max-width: 480px) { 
  #overlay-img.oblique {
    background: transparent url(../img/site-under-construction-340x173-oblique.png) no-repeat center center;
  }
}


/* drag intro */
.drag-intro-hide {
display: none;
visibility: hidden;
}

#drag-intro {
position: absolute;
display: none;
width: 180px;
height: 180px;
top: 50%;
left: 50%;
margin: -129px 0 0 -90px;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
background: rgba(255, 255, 255, .75);
cursor: move;
z-index: 100;
}

@media only screen and (max-width: 880px) {
  #drag-intro {
    margin: -133px 0 0 -90px;
  }
}

@media only screen and (max-width: 640px) {
  #drag-intro {
    margin: -134px 0 0 -90px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  #drag-intro {
    margin: -90px 0 0 -90px;
  }
}

@media only screen and (max-width: 480px) {
  #drag-intro {
    margin: -133px 0 0 -90px;
  }
}

#drag-intro div {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}

#drag-intro .arrows-vertical:after,
#drag-intro .arrows-vertical:before,
#drag-intro .arrows-horizontal:after,
#drag-intro .arrows-horizontal:before {
content:"";
position: absolute;
display: block;
width: 30px;
height: 20px;
top: 30px;
left: 50%;
margin-left: -15px;
background: url(../img/drag-intro.png) no-repeat;
background-size: 100%;
}

#drag-intro .arrows-vertical:after {
top: auto;
bottom: 30px;
-webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
        transform: rotate(180deg);
}

#drag-intro .arrows-horizontal:after,
#drag-intro .arrows-horizontal:before {
top: 50%;
left: 30px;
margin-left: 0;
margin-top: -10px;
-webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
     -o-transform: rotate(270deg);
        transform: rotate(270deg);
}

#drag-intro .arrows-horizontal:after {
left: auto;
right: 30px;
-webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
        transform: rotate(90deg);
}

#drag-intro.show .arrows-horizontal {
-webkit-animation: growH 1s 0s 1;
   -moz-animation: growH 1s 0s 1;
    -ms-animation: growH 1s 0s 1;
     -o-animation: growH 1s 0s 1;
        animation: growH 1s 0s 1;
}

#drag-intro.show .arrows-vertical {
-webkit-animation: growV 1s 1s 1;
   -moz-animation: growV 1s 1s 1;
    -ms-animation: growV 1s 1s 1;
     -o-animation: growV 1s 1s 1;
        animation: growV 1s 1s 1;
}

@-webkit-keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@-moz-keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@-ms-keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@-o-keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@-webkit-keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}
@-moz-keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}
@-ms-keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}
@-o-keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}
@keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}


/* countdown */
#countdown-wrapper,
#countdown-wrapper-all {
position: absolute;
display: none;
width: 40%;
max-width: 310px;
min-width: 310px;
height: auto;
overflow: hidden;
background: none;
margin: 0 auto;
left: 0;
right: 0;
bottom: 4px;
z-index: 10;
}

@media only screen and (max-width: 880px) {
  #countdown-wrapper,
  #countdown-wrapper-all {
    max-width: 260px;
    min-width: 260px;
    bottom: -9px;
  }
}

@media only screen and (max-width: 640px) {
  #countdown-wrapper,
  #countdown-wrapper-all {
    bottom: 0;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  #countdown-wrapper,
  #countdown-wrapper-all {
    display: none;
    visibility: hidden;
  }
}

@media only screen and (max-width: 480px) {
  #countdown-wrapper,
  #countdown-wrapper-all {
    bottom: -26px;
  }
}

#countdown-wrapper.oblique,
#countdown-wrapper-all.oblique {
-webkit-transform: skew(-8deg, 0deg);
   -moz-transform: skew(-8deg, 0deg);
    -ms-transform: skew(-8deg, 0deg);
     -o-transform: skew(-8deg, 0deg);
        transform: skew(-8deg, 0deg);
}

ul#countdown li {
display: inline-block;
width: 65px;
color: #111;
text-align: center;
}

@media only screen and (max-width: 880px) {
  ul#countdown li {
    width: 55px;
  }
}

ul#countdown li.countdown-slash {
display: inline-block;
width: 5px;
text-align: center;
color: #8d8d8d;
}

ul#countdown li span {
font-family: 'Oswald', sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.04em;
margin: 0;
padding: 0;
position: relative;
}

@media only screen and (max-width: 880px) {
  ul#countdown li span {
    font-size: 25px;
  }
}

ul#countdown li span.days {
font-size: 50px;
}

@media only screen and (max-width: 880px) {
  ul#countdown li span.days {
    font-size: 40px;
  }
}

@media only screen and (max-width: 640px) {
  ul#countdown li span.days {
    font-size: 25px;
  }
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 12px;
font-style: normal;
font-weight: 400;
text-align: center;
margin: 0;
}

@media only screen and (max-width: 640px) {
  ul#countdown li p.timeRefDays,
  ul#countdown li p.timeRefHours,
  ul#countdown li p.timeRefMinutes,
  ul#countdown li p.timeRefSeconds {
    font-size: 11px;
  }
}


/* contact form */
#contact-form {
width: 100%;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}

/* contact back button */
.contact-back-button {
position:fixed;
top: 20px;
left: 20px;
z-index: 10;
}

.btn-back {
position: relative;
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border: 1px solid #333;
border-radius: 3px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
}

.btn-back:hover {
background: rgba(255, 255, 255, 0.9);
color: #111;
border-color: #111;
}

.btn-back .fa {
margin-right: 8px;
font-size: 14px;
}

/* contact email fix */
.contact-email {
color: #777 !important;
}

.contact-email:hover,
.contact-email:visited,
.contact-email:active,
.contact-email:focus {
color: #111 !important;
}

/* phone interactive menu */
.phone-trigger,
.phone-number {
cursor: pointer;
transition: color 0.3s ease;
}

.phone-trigger:hover,
.phone-number:hover {
color: #777;
}

.phone-menu {
position: absolute;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #333;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1000;
margin-top: 8px;
min-width: 150px;
}

.phone-options {
list-style: none;
margin: 0;
padding: 8px 0;
}

.phone-option {
padding: 8px 16px;
cursor: pointer;
font-family: 'Raleway', sans-serif;
font-size: 13px;
font-weight: 400;
color: #111;
transition: background-color 0.3s ease;
border-bottom: 1px solid #eee;
}

.phone-option:last-child {
border-bottom: none;
}

.phone-option:hover {
background-color: rgba(0, 0, 0, 0.1);
color: #000;
}

.phone-option .fa {
margin-right: 8px;
width: 16px;
text-align: center;
}

/* responsive phone menu adjustments */
@media only screen and (max-width: 768px) {
  .phone-menu {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    width: 200px;
  }
  
  .phone-option {
    padding: 12px 16px;
    font-size: 14px;
  }
}

@media only screen and (max-width: 880px) {
  #contact-form {
    padding: 0;
  }
}

form {
margin: 0;
padding: 0;
}

#form input,
#form select {
position: relative;
width: 100%;
height: 40px;
border-bottom: 1px solid #111;
border-left: none;
border-right: none;
border-top: none;
padding: 5px 5px;
background: none;
margin: 20px 0 10px 0;
-webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
        transition: all 0.3s;
font-family: 'Raleway', sans-serif;
font-size: 14px;
line-height: 1.5;
font-style: normal;
font-weight: normal;
text-align: center;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#form select {
color: #111;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23111" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 12px;
cursor: pointer;
}

#form select option {
background: #fff;
color: #111;
padding: 8px;
}

textarea {
position: relative;
width: 100%;
height: 100px;
border-bottom: 1px solid #111;
border-left: none;
border-right: none;
border-top: none;
padding: 5px 5px;
background: none;
margin: 5px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
line-height: 1.5;
font-style: normal;
font-weight: normal;
text-align: center;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#form textarea {
margin: 20px 0 10px 0;
} 

#form input:hover,
#form select:hover,
#form textarea:hover {
border-color: rgba(119, 119, 119, .5);
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

.success {
font-family: 'Raleway',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.25em;
margin: 0 auto;
padding: 0;
line-height: 1;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#form .error {
position: absolute;
font-size: 9px;
text-transform: uppercase;
text-align: left;
display: block;
margin: -2px 0 0 1px;
padding: 0;
letter-spacing: 0.25em;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


/* placeholders */
::-webkit-input-placeholder { color: #8d8d8d; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; }
     :-ms-input-placeholder { color: #8d8d8d; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; }
         ::-moz-placeholder { color: #8d8d8d; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; }
     input:-moz-placeholder { color: #8d8d8d; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; }

input:focus::-webkit-input-placeholder { color: transparent; }
     input:focus:-ms-input-placeholder { color: transparent; }
         input:focus::-moz-placeholder { color: transparent; }
          input:focus:-moz-placeholder { color: transparent; }

textarea:focus::-webkit-input-placeholder { color: transparent; }
     textarea:focus:-ms-input-placeholder { color: transparent; }
         textarea:focus::-moz-placeholder { color: transparent; }
          textarea:focus:-moz-placeholder { color: transparent; }
	  
input[type="text"].subscribe-email::-webkit-input-placeholder {
color: #111;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05em;
}

input[type="text"].subscribe-email:-ms-input-placeholder{
color: #111;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05em;
}

input[type="text"].subscribe-email::-moz-placeholder {
color: #111;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05em;
}

input:focus[type="text"].subscribe-email::-webkit-input-placeholder {
color: transparent;
}

input:focus[type="text"].subscribe-email:-ms-input-placeholder {
color: transparent;
}

input:focus[type="text"].subscribe-email::-moz-placeholder {
color: transparent;
}


/* newsletter form */
#subscribe-wrapper {
position: fixed;
width: 375px;
height: auto;
text-align: center;
right: 45px;
bottom: 50px;
}

@media only screen and (max-width: 880px) {
  #subscribe-wrapper {
    width: 245px;
    right: 22px;
    bottom: 24px;
  }

  #subscribe input {
    margin: 20px 0 0 0;
  }
}

.newsletter {
position: relative;
clear: both;
width: auto;
border: none;
background: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
}

.subscribe-success {
font-family: 'Raleway',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 10px;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.25em;
color: #111;
margin: 0 0 13px 0;
padding: 0;
line-height: 1;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#subscribe .subscribe-error {
position: absolute;
display: inline-block;
left: 16px;
top: 0;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.15em;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#subscribe input {
width: 185px;
height: 40px;
text-align: center;
color: #111;
border: none;
border-bottom: 1px solid #111;
background: none;
padding: 0 5px 0 0;
float: left;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#subscribe input:focus, #subscribe textarea:focus {
color: #111;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#subscribe input:hover {
border-color: rgba(119, 119, 119, .5);
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}


/* social icons */
.social-icons-wrapper {
position: fixed;
bottom: 50px;
left: 45px;
}

@media only screen and (max-width: 880px) {
  .social-icons-wrapper {
    bottom: 22px;
    left: 19px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  .social-icons-wrapper {
    display: none;
    visibility: hidden;
  }
}

@media only screen and (max-width: 480px) {
  .social-icons-wrapper {
    display: none;
    visibility: hidden;
  }
}

.social-icons-wrapper ul {
margin: 0 auto;
padding: 0;
list-style-type: none;
}

.social-icons-wrapper ul li {
display: inline-block;
margin: 0 auto;
padding: 0 0 0 5px;
}

ul.social-icons {
line-height: 1;
margin: 0;
padding: 0;
position: relative;
}

ul.social-icons a {
font-size: 34px;
padding: 0;
color: #111;
text-decoration: none;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

ul.social-icons a:hover {
font-size: 34px;
padding: 0;
color: #111;
text-decoration: none;
        opacity: 0.3;
   -moz-opacity: 0.3;
-webkit-opacity: 0.3;
filter: alpha(opacity=30);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}


/* preloader */
.preloader-bg {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
z-index: 999999;
}

#preloader {
position: fixed;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
z-index: 999999;
}

#preloader-status {
display: table-cell;
vertical-align: middle;
}

.preloader-position {
position: relative;
margin: 0 auto;
text-align: center;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
}

.loader {
position: relative;
width: 45px;
height: 45px;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: 2px;
-webkit-animation: rotate 1s infinite linear;
   -moz-animation: rotate 1s infinite linear;
    -ms-animation: rotate 1s infinite linear;
     -o-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
border: 3px solid rgba(17, 17, 17, .15);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

.loader span {
position: absolute;
width: 45px;
height: 45px;
top: -3px;
left: -3px;
border: 3px solid transparent;
border-top: 3px solid rgba(17, 17, 17, .75);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

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


/* borders */
.border-top {
position: fixed;
width: 100%;
height: auto;
left: 0;
top: 0;
background: none;
z-index: 100000;
}

@media only screen and (max-width: 880px) {
  .border-top {
    position: absolute;
  }
}

.border-top {
-webkit-transition: all 2.0s ease;
   -moz-transition: all 2.0s ease;
	-ms-transition: all 2.0s ease;
     -o-transition: all 2.0s ease;
        transition: all 2.0s ease;
}

.border-top.top-position {
-webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
     -o-transform: translateY(-200px);
        transform: translateY(-200px);
-webkit-transition: all 2.0s ease;
   -moz-transition: all 2.0s ease;
	-ms-transition: all 2.0s ease;
     -o-transition: all 2.0s ease;
        transition: all 2.0s ease;
}

.border-bottom {
position: fixed;
width: 100%;
height: auto;
left: 0;
bottom: 0;
background: none;
z-index: 99998;
}

.border-bottom {
-webkit-transition: all 2.0s ease;
   -moz-transition: all 2.0s ease;
	-ms-transition: all 2.0s ease;
     -o-transition: all 2.0s ease;
        transition: all 2.0s ease;
}

.border-bottom.bottom-position {
-webkit-transform: translateY(200px);
   -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
     -o-transform: translateY(200px);
        transform: translateY(200px);
-webkit-transition: all 2.0s ease;
   -moz-transition: all 2.0s ease;
	-ms-transition: all 2.0s ease;
     -o-transition: all 2.0s ease;
        transition: all 2.0s ease;
}


/* icon extras */
.hi-icon-wrap {
margin: 0;
padding: 0 0 0 10px;
}

.hi-icon-wrap a {
color: #111;
}

.hi-icon-wrap a:hover {
color: #111;
}

.hi-icon {
position: relative;
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 0;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
text-align: center;
z-index: 1;
}

.hi-icon:after {
position: absolute;
pointer-events: none;
content: "";
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
-webkit-box-sizing: content-box; 
   -moz-box-sizing: content-box; 
        box-sizing: content-box;
}

.hi-icon:before {
font-family: 'FontAwesome';
speak: none;
font-size: 40px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.hi-icon-services-1:before {
	content: "\f121";
}

.hi-icon-services-2:before {
	content: "\f085";
}

.hi-icon-services-3:before {
	content: "\f26c";
}

.hi-icon-services-4:before {
	content: "\f0ac";
}


/* icon effect */
.set-8 {
background: none;
margin: 20px 0 20px 0;
}

.hi-icon-effect-8 .hi-icon {
background: rgba(219, 219, 219, .3);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
   -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
        transition: transform ease-out 0.1s, background 0.2s;
}

.hi-icon-effect-8 .hi-icon:after {
top: 0;
left: 0;
padding: 0;
box-shadow: 0 0 0 2px rgba(219, 219, 219, .2);
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale(0.9);
   -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
        transform: scale(0.9);
z-index: -1;
}

.hi-icon-effect-8 .hi-icon:hover:after {
-webkit-animation: sonarEffect 1.3s ease-out 75ms;
   -moz-animation: sonarEffect 1.3s ease-out 75ms;
        animation: sonarEffect 1.3s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .1), 0 0 10px 10px #111, 0 0 0 10px rgba(0, 0, 0, .5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .1), 0 0 10px 10px #111, 0 0 0 10px rgba(0, 0, 0, .5);
		-webkit-transform: scale(1.5);
		opacity: 0;
	}
}

@-moz-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .1), 0 0 10px 10px #111, 0 0 0 10px rgba(0, 0, 0, .5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .1), 0 0 10px 10px #111, 0 0 0 10px rgba(0, 0, 0, .5);
		-moz-transform: scale(1.5);
		opacity: 0;
	}
}

@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .1), 0 0 10px 10px #111, 0 0 0 10px rgba(0, 0, 0, .5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .1), 0 0 10px 10px #111, 0 0 0 10px rgba(0, 0, 0, .5);
		transform: scale(1.5);
		opacity: 0;
	}
}

.quotations-line-left {
position: absolute;
width: 4px;
height: 100%;
left: 25px;
top: 3px;
background: #111;
}

.quotations {
font-family: 'Raleway', sans-serif;
font-size: 12px;
line-height: 1.5;
font-style: italic;
font-weight: normal;
text-align: left;
padding: 0 0 0 30px;
}

@media only screen and (max-width: 880px) {
  .quotations {
    margin: 0 0 90px 0;
  }
  
  .quotations-works {
    margin: 70px 0 0 0;
  }
}

.quote-mark-l {
padding: 0 10px 0 0;
}

.quote-mark-r {
padding: 0 0 0 10px;
}


/* works hover */
.icon-works {
position: absolute; 
width: 100%;
top: 50%;
margin-left: 0;
margin-top: 0;
text-align: center;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 0.35s ease-out;
   -moz-transition: all 0.35s ease-out;
    -ms-transition: all 0.35s ease-out;
	 -o-transition: all 0.35s ease-out;
        transition: all 0.35s ease-out;
-webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
        transform: translateY(-50%);
-webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
z-index: 1;
}

@media only screen and (min-width: 1024px) {
  .icon-works {
    margin-left: -15px;
  }
}

.icon-works a {
position: relative;
display: inline-block;
vertical-align: middle;
text-decoration: none;
width: 44px;
height: 44px;
line-height: 44px;
margin: 0 4px;
font-size: 20px;
background: #fff;
border: 1px solid #fff;
color: #000;	
-webkit-transition: all 0.35s ease-out;
   -moz-transition: all 0.35s ease-out;
    -ms-transition: all 0.35s ease-out;
	 -o-transition: all 0.35s ease-out;
        transition: all 0.35s ease-out;
}

.icon-works a.iw-slide-left {
-webkit-transform: translate3d(-60px,0,0);
   -moz-transform: translate3d(-60px,0,0);
    -ms-transform: translate3d(-60px,0,0);
     -o-transform: translate3d(-60px,0,0);
        transform: translate3d(-60px,0,0);
}

.icon-works a.iw-slide-right {
-webkit-transform: translate3d(60px,0,0);
   -moz-transform: translate3d(60px,0,0);
    -ms-transform: translate3d(60px,0,0);
     -o-transform: translate3d(60px,0,0);
        transform: translate3d(60px,0,0);
}

.image-works:hover .icon-works a {
padding: 0;
-webkit-transform: translate3d(0,0,0)!important;
   -moz-transform: translate3d(0,0,0)!important;
    -ms-transform: translate3d(0,0,0)!important;
     -o-transform: translate3d(0,0,0)!important;
        transform: translate3d(0,0,0)!important;
}

.icon-works a:hover {
background: #000;
border: 1px solid #000;
color: #fff;
}

.icon-works a:hover:after {
background: #000;
}

.image-works:hover .icon-works {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.icon-works a:before {
position: relative;
z-index: 1;
}

.icon-works a i {
position: relative;
z-index: 1;
}

.image-works {
position: relative;
z-index: 5!important;
}

.hover-effect {
position: absolute;
background: #000;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
width: -webkit-calc(100% - 80px);
width: -moz-calc(100% - 80px);
width: calc(100% - 80px);
height: -webkit-calc(100% - 80px);
height: -moz-calc(100% - 80px);
height: calc(100% - 80px);
top: 40px;
left: 40px;
bottom: 40px;
right: 40px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
cursor: pointer;
}

@media only screen and (max-width: 880px) {
  .hover-effect {
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
    height: -webkit-calc(100% - 80px);
    height: -moz-calc(100% - 80px);
    height: calc(100% - 80px);
    top: 40px;
    left: 20px;
    bottom: 40px;
    right: 20px;
  }
}

.image-works:hover .hover-effect {
        opacity: 0.75;
   -moz-opacity: 0.75;
-webkit-opacity: 0.75;
filter: alpha(opacity=75);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
}

.legendary-gallery {
margin: -20px 0 0 0;
position: relative;
z-index: 0;
}

.legendary-gallery figure {
padding: 20px;
}

@media only screen and (max-width: 880px) {
  .legendary-gallery figure {
    padding: 20px 0;
  }
}

.legendary-gallery .img-caption {
display: none;
}

.legendary-gallery .pswp__bg {
background: #000;
}


/* skills bar */
.show-skillbar {
position: relative;
margin: 23px 0 0 0;
}

.skillbar {
position: relative;
display: inline-block;
width: 100%;
height: 21px;
margin: 0 0 30px 0;
background: none;
}

.skillbar-title {
position: absolute;
width: 100px;
height: 21px;
line-height: 21px;
top: 0;
left: 0;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
color: #111;
background: #fff;
padding: 0;
}

.skillbar-bar {
display: inline-block;
width: 0px;
height: 3px;
background: #111;
margin: 0 0 3px 0;
}

.skill-bar-percent {
position: absolute;
height: auto;
line-height: 1;
top: -21px;
right: 0;
color: #111;
font-size: 11px;
}

.skillbar-head {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 25px;
color: #111;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1;
margin: 0;
padding: 0 0 20px 0;
}

.skillbar-head-span {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.05em;
}


/* logo */
.logo {
position: absolute;
display: inline-block;
top: 50px;
left: 50px;
line-height: 0;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition: -webkit-transform 1s;
   -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
     -o-transition: -o-transform 1s;
        transition: transform 1s;
cursor: pointer;
z-index: 200;
}

@media only screen and (max-width: 880px) {
  .logo {
	top: 25px;
    left: 24px;
  }
}

.logo:hover {
-webkit-transform: rotateY(360deg);
   -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
     -o-transform: rotateY(360deg);
        transform: rotateY(360deg);
-webkit-transition: -webkit-transform 1s;
   -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
     -o-transition: -o-transform 1s;
        transition: transform 1s;
}

.logo-img.logo-dark {
width: 57px;
height: 34px;
background: url(../img/logo-dark-mobile.png) no-repeat;
}


/* ken burns slideshow */
.kenburns-slide-wrapper {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
z-index: 1;
}

.kenburns-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-animation: KenBurnsSlideShow 24s linear infinite 0s;
   -moz-animation: KenBurnsSlideShow 24s linear infinite 0s;
    -ms-animation: KenBurnsSlideShow 24s linear infinite 0s;
     -o-animation: KenBurnsSlideShow 24s linear infinite 0s;
        animation: KenBurnsSlideShow 24s linear infinite 0s;
}

.kenburns-slide-1 {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.kenburns-slide-2 {
-webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
    -ms-animation-delay: 6s;
     -o-animation-delay: 6s;
        animation-delay: 6s;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.kenburns-slide-3 {
-webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
    -ms-animation-delay: 12s;
     -o-animation-delay: 12s;
        animation-delay: 12s;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.kenburns-slide-4 {
-webkit-animation-delay: 18s;
   -moz-animation-delay: 18s;
    -ms-animation-delay: 18s;
     -o-animation-delay: 18s;
        animation-delay: 18s;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

@-webkit-keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
}
 5% {
    opacity: 1
}
 25% {
    opacity: 1;
}
 30% {
    opacity: 0;
    -webkit-transform: scale(1.1);
}
 100% {
    opacity: 0;
    -webkit-transformm: scale(1);
    }
}

@-moz-keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    -moz-transform: scale(1);
}
 5% {
    opacity: 1
}
 25% {
    opacity: 1;
}
 30% {
    opacity: 0;
    -moz-transform: scale(1.1);
}
 100% {
    opacity: 0;
    -moz-transform: scale(1);
    }
}

@-o-keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    -o-transform: scale(1);
}
 5% {
    opacity: 1
}
 25% {
    opacity: 1;
}
 30% {
    opacity: 0;
    -o-transform: scale(1.1);
}
 100% {
    opacity: 0;
    -o-transform: scale(1);
    }
}

@keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
	    transform: scale(1);
    -ms-transform: scale(1);
}
 5% {
    opacity: 1
}
 25% {
    opacity: 1;
}
 30% {
    opacity: 0;
	    transform: scale(1.1);
    -ms-transform: scale(1.1);
}
 100% {
    opacity: 0;
	    transform: scale(1);
    -ms-transform: scale(1);
    }
}


/* single img bg */
.single-img-bg-wrapper {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
z-index: 1;
}

.single-img-bg {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}


/* YouTube video */
.YT-bg {
background: none;
}

@media only screen and (max-width: 880px) {
  .YT-bg {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../img/background/YT-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
        -ms-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }
}

.background-video {
position: absolute;
background-repeat: no-repeat;
background-position: top center;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}

video,
source {
position: absolute;
min-width: 100%;
min-height: 100%;
bottom: 0;
left: 0;
}

.loaded .ytplayer-container {
display: block;
}

.ytplayer-container {
position: absolute;
min-width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0; 
overflow: hidden;
z-index: 1;
}

.ytplayer-shield {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}

.ytplayer-player {
position: absolute;
}

/* ================================ */
/* Logo de Asociación Araucanía Gourmet */
/* ================================ */

/* Sección Organiza */
.organiza-section {
    text-align: center;
    margin-top: 30px;
    animation: fadeInUp 1s ease-out 1s both;
}

.organiza-text {
    margin-bottom: 15px;
}

.organiza-text span {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
}

.association-logo-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.association-logo {
    max-width: 120px;
    height: auto;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.association-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Call to action text */
.call-to-action-text {
    text-align: center;
    margin-bottom: 25px;
    padding: 0 20px;
}

.call-to-action-text h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0.5px;
    text-align: center;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    line-height: 1.3;
}

/* ================================ */
/* Mejoras de alineación del contenido principal */
/* ================================ */

.unveil-1 {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-logo-mobile {
    text-align: center;
    margin-bottom: 30px;
}

.main-logo-mobile {
    max-width: 250px;
    height: auto;
}

/* Centrar mejor los títulos alternantes */
.center-block-home-waits,
.center-container-home-waits {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.intro-wrapper,
#intro-wrapper,
#intro-wrapper-2,
#intro-wrapper-3 {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Alineación específica para flexslider alternante */
.flexslider {
    text-align: center;
    margin: 0 auto;
}

.flexslider .slides li {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexslider .slides li h3 {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

/* Mejoras para unveil sections */
.unveil-1, .unveil-2, .unveil-3 {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Centrar countdown y elementos específicos */
#countdown-wrapper-waits {
    text-align: center;
    margin: 0 auto;
}

.countdown-waits {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.social-icons-wrapper-waits {
    text-align: center;
    margin: 0 auto;
}

.social-icons-waits {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* ================================ */
/* Responsive para logos */
/* ================================ */

@media (max-width: 768px) {
    .organiza-text span {
        font-size: 14px;
        letter-spacing: 1.5px;
    }
    
    .association-logo {
        max-width: 100px;
    }
    
    .main-logo-mobile {
        max-width: 200px;
    }
    
    .organiza-section {
        margin-top: 25px;
    }
    
    .call-to-action-text h4 {
        font-size: 16px;
        letter-spacing: 0.3px;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .organiza-text span {
        font-size: 12px;
        letter-spacing: 1px;
    }
    
    .association-logo {
        max-width: 80px;
    }
    
    .main-logo-mobile {
        max-width: 180px;
    }
    
    .organiza-section {
        margin-top: 20px;
    }
    
    .call-to-action-text h4 {
        font-size: 14px;
        letter-spacing: 0.2px;
        padding: 0 5px;
        line-height: 1.4;
    }
}

/* ================================ */
/* ================================ */
/* SISTEMA DE FORMULARIOS PREVENTA */
/* ================================ */

/* Menú de selección de contacto */
.contact-type-selection {
    margin-bottom: 30px;
}

.selection-title {
    text-align: center;
    color: #111;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.contact-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-option {
    background: transparent;
    border: 1px solid #111;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.5s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.contact-option:hover {
    background: #111;
    color: #fff;
    transform: translateY(-5px);
}

.option-icon {
    font-size: 48px;
    color: #111;
    margin-bottom: 20px;
    transition: all 0.5s ease;
}

.contact-option:hover .option-icon {
    color: #fff;
}

.contact-option h5 {
    color: #111;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.5s ease;
}

.contact-option:hover h5 {
    color: #fff;
}

.contact-option p {
    color: #777;
    margin-bottom: 20px;
    line-height: 1.6;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    transition: all 0.5s ease;
}

.contact-option:hover p {
    color: #ccc;
}

.price-info {
    margin: 15px 0;
    padding: 15px;
    background: #111;
    color: white;
    transition: all 0.5s ease;
}

.contact-option:hover .price-info {
    background: #fff;
    color: #111;
}

.offer-price {
    display: block;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 5px;
    font-family: 'Raleway', sans-serif;
}

.normal-price {
    font-size: 14px;
    opacity: 0.8;
    text-decoration: line-through;
    font-family: 'Raleway', sans-serif;
}

/* Estilos para sección de postulación */
.postulation-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.postulation-buttons .btn-option {
    flex: 1;
    margin: 0;
    padding: 12px 15px;
    font-size: 12px;
    min-width: auto;
}

.btn-bases {
    background: transparent;
    border: 1px solid #111;
    color: #111;
}

.btn-postulate {
    background: #111;
    border: 1px solid #111;
    color: #fff;
}

.contact-option:hover .btn-bases {
    background: #fff;
    border-color: #fff;
    color: #111;
}

.contact-option:hover .btn-postulate {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.btn-option {
    background: transparent;
    color: #111;
    border: 1px solid #111;
    padding: 12px 24px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.5s ease;
    width: 100%;
    font-family: 'Raleway', sans-serif;
}

.btn-option:hover,
.contact-option:hover .btn-option {
    background: #fff;
    color: #111;
}

/* Formulario de Preventa */
.form-header {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #111;
}

.form-header h4 {
    color: #111;
    margin-bottom: 10px;
    font-size: 24px;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.form-subtitle {
    color: #777;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-section {
    margin-bottom: 25px;
    padding: 25px;
    background: transparent;
    border: 1px solid #111;
    overflow: hidden;
    word-wrap: break-word;
}

.section-title {
    color: #111;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.section-title .fa {
    color: #111;
}

/* Campos de formulario - siguiendo el estilo original */
.form-section input,
.form-section select,
.form-section textarea {
    position: relative;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #111;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 5px 5px;
    background: none;
    margin: 20px 0 10px 0;
    transition: all 0.3s;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    color: #111;
}

.form-section select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23111" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    cursor: pointer;
}

.form-section textarea {
    height: 100px;
    resize: vertical;
}

.business-description {
    min-height: 80px;
}

.form-section input:hover,
.form-section select:hover,
.form-section textarea:hover {
    border-color: rgba(119, 119, 119, .5);
}

.char-counter {
    text-align: right;
    font-size: 11px;
    color: #777;
    margin-top: -10px;
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Radio buttons personalizados - estilo minimalista */
.form-question {
    margin-bottom: 20px;
}

.form-question p {
    font-weight: 600;
    color: #111;
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 15px;
    border: 1px solid #111;
    transition: all 0.3s ease;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.radio-option:hover {
    background: #111;
    color: #fff;
}

.radio-option input[type="radio"] {
    display: none;
}

.radio-custom {
    width: 16px;
    height: 16px;
    border: 1px solid #111;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.radio-option input[type="radio"]:checked + .radio-custom {
    background: #111;
}

.radio-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: white;
}

/* Checkbox personalizado */
.checkbox-option {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 12px;
    margin-top: 20px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

.checkbox-option input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 16px;
    height: 16px;
    border: 1px solid #111;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom {
    background: #111;
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 10px;
}

/* Información de condiciones */
.conditions-info {
    background: transparent;
    padding: 20px;
    border: 1px solid #111;
    margin-bottom: 20px;
}

.condition-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

.condition-item:last-child {
    margin-bottom: 0;
}

.condition-item .fa {
    color: #111;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Botones de acción - estilo original */
.form-actions {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 25px;
    margin-bottom: 0;
    padding-top: 20px;
    border-top: 1px solid #111;
    flex-wrap: wrap;
}

.btn-back-form {
    position: relative;
    display: block;
    width: 140px;
    height: 40px;
    overflow: hidden;
    background: transparent;
    color: #111;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
    padding: 0 20px;
    transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    border: 1px solid #111;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    min-height: 40px;
    flex-shrink: 0;
}

.btn-back-form:hover {
    color: #fff;
    background: #111;
}

.btn-presale-submit {
    position: relative;
    display: block;
    width: 200px;
    height: 40px;
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
    padding: 0 20px;
    transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    border: none;
    cursor: pointer;
    background: #111;
    font-family: 'Raleway', sans-serif;
    white-space: nowrap;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-presale-submit .mask {
    position: absolute;
    display: block;
    width: 0;
    height: 100%;
    left: 0; 
    top: 0;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;	
    background: rgba(255, 255, 255, 1);
    border: 1px solid #111;
    z-index: 1;
}

.btn-presale-submit:hover {
    color: #111;
}

.btn-presale-submit:hover .mask {
    width: 100%;
}

.btn-presale-submit .btn-label {
    position: relative;
    z-index: 2;
    padding: 14px 0;
}

/* Información de contacto para formulario de preventa */
.presale-contact-info {
    padding: 25px;
    background: transparent;
    border: 1px solid #111;
    border-top: 3px solid #111;
    margin-top: 30px;
    margin-bottom: 0;
}

.presale-contact-info .row {
    margin: 0;
}

.presale-contact-info .col-md-4 {
    text-align: center;
    padding: 15px;
}

.presale-contact-info .awesome-contact {
    font-size: 24px;
    color: #111;
    margin-bottom: 10px;
    display: block;
}

.presale-contact-info p {
    margin-bottom: 5px;
    font-size: 12px;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.presale-contact-info strong {
    color: #111;
    font-size: 14px;
    font-weight: 700;
}

.presale-contact-info a {
    color: #111;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.presale-contact-info a:hover {
    color: #777;
    text-decoration: underline;
}

/* Mensajes de estado */
.form-message {
    padding: 15px;
    margin: 20px 0;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-message.success {
    background-color: transparent;
    border: 1px solid #111;
    color: #111;
}

.form-message.error {
    background-color: transparent;
    border: 1px solid #111;
    color: #111;
}

.success-reservation {
    text-align: center;
}

.success-reservation h4 {
    margin-bottom: 15px;
    color: #111;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.next-steps {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #111;
}

.btn-whatsapp {
    display: inline-block;
    background: #111;
    color: white;
    padding: 12px 20px;
    text-decoration: none;
    margin-top: 10px;
    transition: all 0.3s ease;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-whatsapp:hover {
    background: #777;
    text-decoration: none;
    color: white;
}

/* Errores de validación */
.inputError {
    border-color: #111 !important;
}

.error {
    color: #111;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 5px;
    display: block;
    font-weight: 500;
    font-family: 'Raleway', sans-serif;
}

/* Mensaje de error general */
.general-error {
    width: 100%;
    margin-top: 15px;
    padding: 12px 15px;
    background-color: transparent;
    border: 1px solid #e74c3c;
    border-radius: 4px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #e74c3c;
    animation: fadeInError 0.3s ease-in-out;
    font-family: 'Raleway', sans-serif;
}

.general-error .fa {
    margin-right: 8px;
    font-size: 12px;
}

.general-error .error-text {
    font-weight: 500;
}

@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pantallas de confirmación integradas */
.success-screen {
    width: 100%;
    min-height: 400px;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    animation: fadeInSuccess 0.5s ease-in-out;
}

/* Cuando se muestra la pantalla de confirmación */
.success-screen.show {
    display: flex;
}

.success-content {
    max-width: 600px;
    width: 100%;
    text-align: center;
    background: transparent;
    border: 1px solid #27ae60;
    border-radius: 8px;
    padding: 40px 30px;
}

.success-header {
    margin-bottom: 30px;
}

.success-icon {
    font-size: 48px;
    color: #27ae60;
    margin-bottom: 15px;
    display: block;
}

.success-header h3 {
    color: #27ae60;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: 'Raleway', sans-serif;
}

.success-subtitle {
    color: #111;
    font-size: 16px;
    margin: 0;
    font-family: 'Raleway', sans-serif;
}

.success-message {
    margin: 30px 0;
    text-align: left;
    background: rgba(39, 174, 96, 0.05);
    padding: 25px;
    border-radius: 6px;
    border-left: 4px solid #27ae60;
}

.success-message h4 {
    color: #27ae60;
    font-size: 16px;
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

.steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.steps-list li {
    margin-bottom: 12px;
    font-size: 14px;
    color: #111;
    display: flex;
    align-items: flex-start;
    font-family: 'Raleway', sans-serif;
}

.steps-list li .fa {
    color: #27ae60;
    margin-right: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}

.success-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.success-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid #111;
    background: transparent;
    color: #111;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 4px;
}

.success-actions .btn-home:hover {
    background: #111;
    color: #fff;
}

.success-actions .btn-instagram {
    border-color: #E4405F;
    color: #E4405F;
}

.success-actions .btn-instagram:hover {
    background: #E4405F;
    color: #fff;
}

.success-actions .btn-new-form {
    border-color: #27ae60;
    color: #27ae60;
}

.success-actions .btn-new-form:hover {
    background: #27ae60;
    color: #fff;
}

@keyframes fadeInSuccess {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive para pantallas de confirmación */
@media (max-width: 768px) {
    .success-screen.show {
        min-height: 300px;
        padding: 20px 15px;
        display: flex !important;
        align-items: flex-start;
        justify-content: center;
    }
    
    .success-content {
        padding: 25px 15px;
        margin-top: 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .success-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .success-actions .btn {
        justify-content: center;
        width: 100%;
        padding: 14px 20px;
        font-size: 11px;
    }
    
    .success-icon {
        font-size: 36px;
    }
    
    .success-header h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .success-subtitle {
        font-size: 14px;
    }
    
    .success-message {
        margin: 20px 0;
        padding: 20px 15px;
    }
    
    .success-message h4 {
        font-size: 14px;
    }
    
    .steps-list li {
        font-size: 13px;
        margin-bottom: 10px;
    }
}

/* Sistema de márgenes escalonado para diferentes resoluciones desktop */

/* Desktop grande (1200px en adelante) */
@media (min-width: 1200px) {
    /* Margen superior específico para el título */
    #contact .container.sections > .row:first-child {
        margin-top: 80px;
    }
    
    .contact-spacing-container {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    /* Reducir padding específicamente para el formulario de preventa */
    #presale-form .contact-spacing-container {
        padding-top: 0px;
        padding-bottom: 40px;
        margin-top: 0px;
    }
    
    .contact-type-selection {
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 40px;
    }
    
    .selection-title {
        margin-bottom: 35px;
        font-size: 26px;
    }
    
    .contact-options {
        gap: 30px;
        margin-bottom: 25px;
    }
    
    .contact-option {
        padding: 30px 25px;
    }
    
    #presale-form {
        margin-top: 60px;
        margin-bottom: 60px;
        padding-top: 80px;
    }
    
    #contact-form {
        padding-top: 80px;
    }
    
    .presale-contact-info {
        margin-top: 50px;
        padding: 35px;
    }
}

/* Desktop mediano (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Margen superior específico para el título */
    #contact .container.sections > .row:first-child {
        margin-top: 60px;
    }
    
    .contact-spacing-container {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    /* Reducir padding específicamente para el formulario de preventa */
    #presale-form .contact-spacing-container {
        padding-top: 0px;
        padding-bottom: 30px;
        margin-top: 0px;
    }
    
    .contact-type-selection {
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 35px;
    }
    
    .selection-title {
        margin-bottom: 30px;
        font-size: 24px;
    }
    
    .contact-options {
        gap: 25px;
        margin-bottom: 20px;
    }
    
    .contact-option {
        padding: 25px 20px;
    }
    
    #presale-form {
        margin-top: 40px;
        margin-bottom: 40px;
        padding-top: 70px;
    }
    
    #contact-form {
        padding-top: 70px;
    }
    
    .presale-contact-info {
        margin-top: 40px;
        padding: 30px;
    }
}

/* Desktop pequeño (769px - 991px) */
@media (min-width: 769px) and (max-width: 991px) {
    /* Margen superior específico para el título */
    #contact .container.sections > .row:first-child {
        margin-top: 50px;
    }
    
    .contact-spacing-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .contact-type-selection {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 30px;
    }
    
    .selection-title {
        margin-bottom: 25px;
        font-size: 22px;
    }
    
    .contact-options {
        gap: 20px;
        margin-bottom: 18px;
    }
    
    .contact-option {
        padding: 20px 15px;
    }
    
    #presale-form {
        margin-top: 30px;
        margin-bottom: 30px;
        padding-top: 60px;
    }
    
    #contact-form {
        padding-top: 60px;
    }
    
    .presale-contact-info {
        margin-top: 35px;
        padding: 25px;
    }
}

/* Estilos comunes para todos los desktop (769px en adelante) */
@media (min-width: 769px) {
    /* Asegurar que el contenedor principal tenga estructura flexible */
    #contact .lower-content {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    
    #contact .container.sections {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
    }
    
    /* Margen superior para toda la sección de contacto */
    #contact .container.sections > .row:first-child {
        margin-top: 40px;
    }
    
    /* Asegurar que la fila del contenido tenga altura equilibrada */
    #contact .container.sections > .row:nth-child(2) {
        display: flex;
        align-items: stretch;
        min-height: 500px;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Cuando el formulario de preventa está activo, ajustar la fila */
    #contact .container.sections > .row:nth-child(2):has(#presale-form[style*="block"]) {
        min-height: auto;
        align-items: flex-start;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Wrapper para controlar el espaciado de formularios y menús */
    .contact-spacing-container {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease;
        transform: translateZ(0); /* Fuerza aceleración por hardware */
    }
    
    /* Espaciado mínimo para formulario de preventa en desktop */
    #presale-form .contact-spacing-container {
        padding-top: 0px;
        padding-bottom: 20px;
        margin-top: 0px;
    }
    
    /* Reducir margen del header específicamente en desktop */
    #presale-form .form-header {
        margin-bottom: 5px;
        padding-bottom: 10px;
    }
    
    /* Eliminar espaciado del botón de retroceso en formulario de preventa */
    #presale-form .contact-back-button {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 10;
        margin: 0;
        padding: 0;
    }
    

    
    /* Asegurar que los contenedores respeten el espaciado */
    .contact-spacing-container::before,
    .contact-spacing-container::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        position: relative;
        z-index: -1;
    }
    
    /* Elementos principales con espaciado escalable base */
    .contact-type-selection,
    #contact-form,
    #presale-form,
    .presale-contact-info {
        position: relative;
        box-sizing: border-box;
        width: 100%;
    }
    
    /* Centrar verticalmente el sidebar */
    #contact-sidebar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100%;
        padding: 20px;
        transition: all 0.3s ease;
    }
    
    /* Cuando el sidebar se oculta */
    #contact-sidebar[style*="display: none"] {
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: none !important;
    }
    
    /* Contenedor agrupado para elementos del sidebar */
    #contact-sidebar .sidebar-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        max-width: 250px;
        width: 100%;
    }
    
    /* Elementos individuales del sidebar */
    #contact-sidebar .sidebar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        width: 100%;
    }
    
    /* Reset de márgenes para elementos del sidebar */
    #contact-sidebar .awesome-contact,
    #contact-sidebar p {
        margin: 0;
        text-align: center;
    }
    
    /* Divider específico */
    #contact-sidebar .dividerOT-contact-form {
        margin-bottom: 20px;
        width: 100%;
    }
    
    /* Asegurar que el contenedor principal tenga altura mínima */
    #main-form-column {
        min-height: 400px;
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease;
    }
    
    /* Ocultar completamente main-form-column cuando presale-form está activo */
    #main-form-column:has(+ #presale-form[style*="display: block"]),
    #main-form-column:has(+ #presale-form[style*="display:block"]),
    #main-form-column.hidden-for-presale {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Alternativa más directa: cuando el body tiene clase presale-active */
    body.presale-active #main-form-column {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Cuando el formulario de preventa está activo, ocupar todo el ancho */
    #main-form-column.col-md-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Asegurar que la fila contenedora ajuste su layout cuando no hay sidebar */
    .container.sections .row:has(#contact-sidebar[style*="display: none"]) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Formulario de preventa debe ocupar todo el ancho sin restricciones de Bootstrap */
    #presale-form.col-md-12 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
    
    /* Formulario de preventa básico */
    #presale-form {
        display: block;
        visibility: visible;
        opacity: 1;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        overflow: visible;
        box-sizing: border-box;
    }
    
    /* Asegurar que el contenido del formulario de preventa sea visible */
    #presale-form .contact-spacing-container {
        display: block;
        visibility: visible;
        opacity: 1;
    }
    
    /* Forzar visibilidad del contenido del formulario */
    #presale-form .form-header,
    #presale-form .form-section,
    #presale-form form {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #111 !important;
    }
    
    /* Asegurar que los elementos del formulario sean visibles */
    #presale-form h4,
    #presale-form h5,
    #presale-form p,
    #presale-form input,
    #presale-form select,
    #presale-form textarea,
    #presale-form label {
        color: #111 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Soluci\u00f3n simple para ancho completo del formulario de preventa */
    #presale-form {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Columna principal expandida cuando hay formulario de preventa */
    #main-form-column.col-md-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Espaciado específico para formularios */
    #contact-form .form-actions {
        margin-top: 30px;
        padding-top: 25px;
    }
    
    #presale-form {
        overflow-y: auto;
    }
    
    /* Formularios internos con espaciado mejorado */
    .form-section {
        margin-bottom: 35px;
        padding: 35px;
    }
    
    .form-header {
        margin-bottom: 15px;
        padding-bottom: 20px;
    }
    
    .form-actions {
        margin-top: 35px;
        padding-top: 30px;
    }
    
    .presale-contact-info {
        margin-top: 40px;
        padding-top: 25px;
    }
    
    .section-title {
        margin-bottom: 30px;
    }
    
    #presale-form .form-header {
        margin-bottom: 15px;
        padding-bottom: 20px;
    }

    /* Sistema de layout personalizado para formularios */
    .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 20px;
        width: 100%;
    }

    .form-field {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .form-field.full-width {
        flex: 1 1 100%;
        width: 100%;
    }

    .form-field.half-width {
        flex: 1 1 calc(50% - 7.5px);
        min-width: 200px;
    }

    .form-field.third-width {
        flex: 1 1 calc(33.333% - 10px);
        min-width: 150px;
    }

    /* Inputs y selects dentro del nuevo sistema */
    .form-field input,
    .form-field select,
    .form-field textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* Responsive para tablets */
@media (max-width: 1024px) {
    .contact-options {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .contact-options {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .contact-option {
        padding: 25px 15px;
    }
    
    .postulation-buttons {
        flex-direction: column;
        gap: 8px;
    }
    
    .postulation-buttons .btn-option {
        font-size: 11px;
        padding: 10px 12px;
    }
    
    .form-section {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: 14px;
        flex-direction: column;
    }

    /* Sistema responsive para el nuevo layout */
    .form-field.half-width,
    .form-field.third-width {
        flex: 1 1 100%;
        width: 100%;
    }
    
    .form-row {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        gap: 5px;
    }
    
    .radio-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .btn-presale-submit,
    .btn-back-form {
        width: 100%;
        font-size: 11px;
        padding: 0 15px;
    }
    
    .presale-contact-info {
        padding: 20px 15px;
        margin-top: 30px;
    }
    
    .presale-contact-info .col-md-4 {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .selection-title {
        font-size: 18px;
        line-height: 1.3;
    }
    
    .contact-option h5 {
        font-size: 14px;
        line-height: 1.4;
    }
    
    .form-header h4 {
        font-size: 18px;
        line-height: 1.3;
        word-wrap: break-word;
    }
    
    .section-title {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .offer-price {
        font-size: 24px;
    }
    
    .form-section {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .btn-presale-submit .btn-label,
    .btn-back-form {
        font-size: 10px;
        line-height: 1.2;
    }
}

/* Animaciones unificadas */
/* ================================ */

/* Animación fade-in con ligero slide up para elementos animados */
.animated-element {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

/* Delay escalonado para elementos dentro de unveil sections */
.unveil-1 .animated-element:nth-child(1) {
    animation-delay: 0.2s;
}

.unveil-1 .animated-element:nth-child(2) {
    animation-delay: 0.4s;
}

.unveil-1 .animated-element:nth-child(3) {
    animation-delay: 0.6s;
}

.unveil-3 .animated-element {
    animation-delay: 0.3s;
}

/* Keyframe para fadeInUp animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    from {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

/* ================================ */
/* Instagram handle styles */
/* ================================ */

.instagram-handle {
    text-align: center;
    margin-top: 30px;
    padding: 15px;
}

.instagram-text {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.05em;
    margin: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.instagram-text .fa-instagram {
    margin-right: 8px;
    color: #E4405F;
    text-shadow: none;
}

/* Hover effect for instagram handle */
.instagram-handle:hover .instagram-text {
    background: rgba(228, 64, 95, 0.2);
    border-color: rgba(228, 64, 95, 0.5);
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* ================================ */
/* Responsive Instagram styles */
/* ================================ */

@media (max-width: 768px) {
    .instagram-text {
        font-size: 16px;
        padding: 8px;
    }
    
    .instagram-handle {
        margin-top: 20px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .instagram-text {
        font-size: 14px;
        padding: 6px;
    }
    
    .instagram-handle {
        margin-top: 15px;
        padding: 8px;
    }
    
    .instagram-text .fa-instagram {
        margin-right: 5px;
    }
}