/*---------------- reset  ------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;400;500;600;800&family=Raleway:wght@100;200;300;400;500;600;800&display=swap');

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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, fieldset, legend, caption, .filters ul li p, figure { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; line-height: normal; line-height: 1.6em; -webkit-font-smoothing: antialiased; }

html{overflow-x:hidden; height:100%;}
ol,ul,li{list-style:none;font-weight:lighter}
.sticky + .content{padding-top: 150px;}
body{font-family: 'Montserrat', sans-serif; color: #fff; letter-spacing:1px; }
#start{background-image: url("../graphics/blur.png"); background-size: cover; background-repeat: no-repeat;  background-position:center;   background-attachment: fixed; background-color:#29292e}
#inicio{background:#0e0e0e; }
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
em{font-style:normal}
a{text-decoration:none;cursor:pointer; color:#e7e4e4; font-weight:400; transition: background-color 0.3s, color 0.3s;  text-align: left; background: none; border:none }
button{font-size:1.1em}
#trendMenu{color:#fff!important}
.clear{clear: both}
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
button{text-decoration:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
.blur{opacity:0}
strong{font-weight:600;}
.padleft40{padding-left:40px;}
.padright40{padding-right:40px;}
.tleft{text-align:left;}
p{font-family: 'Raleway', sans-serif;}
.hide{display: none}
H1, H2, H3{font-family: 'Raleway', sans-serif;}
#misControles{position: absolute;  bottom: 14px; z-index: 999; width: 23px; right:16px;}
#misControles div{cursor: pointer}
#misControles div img{width:18px}

/*---------------- Menu  ------------------*/
.button, .dark-button, .light-button{display:block;position:fixed;width:40px;height:40px;border-radius:1px;margin:0 auto;padding-top:12px;transition:all 500ms cubic-bezier(1,0,0.645,0.65); top:24px;right:20px; z-index:999999;}
.bar1{top:0;animation:topbar-back 500ms;animation-fill-mode:both;animation-play-state:initial !important;}
.bar2{opacity:1;}
.bar3{bottom:0;animation:bottombar-back 500ms;animation-fill-mode:both;animation-play-state:initial !important;}
.menu-bar + .menu-bar{margin-top:6px;}.menu{position:absolute;font-weight:600;color:#fff;left:-65px;height:20px;top:10px;text-transform:uppercase;text-align:right;width:60px;font-size:.9em;letter-spacing:1.5px;font-family:'Work Sans',sans-serif;}
.toggled .bar3{bottom:25%;animation:bottombar-x 500ms;animation-fill-mode:both;}
.toggled .bar2{opacity:0;}
.toggled .bar1{top:25%;animation:topbar-x 500ms;animation-fill-mode:both;}
.menu-bar{display:block;position:relative;background:#fff;width:24px;height:1px;border-radius:1px;transition:all 300ms;margin:0 auto;}#menuNav{position:fixed;top:0px;left:0px;height:100vh;width:100%;background:#151313f2;padding:80px 30px;z-index:999999;}
#menu-toggle{display:none; background: #151313;  position: absolute;  z-index: 9999999999999999999;}
#menuNav a{float:left; width:100%; text-align:center;}


/*---------------- Header  ------------------*/
#logo{float: left; width:340px; margin-top:.75rem }
#logo img{width:100%}
header{background: #141418; float: left; width: 100%; padding:10px 0 10px 0; position:fixed; z-index: 99999; }
header nav {float: right; width:760px}
header nav li{float: right;}
#menuContacto, #menuNavegacion{float: right; width:100%}
#menuContacto a{color:#5E5C5C; font-weight:600; font-size:.75em;}
#menuContacto a:hover, #menuNavegacion a:hover{color:#e08c2f}
#menuContacto li{padding: 4px 14px; border-right:1px solid #5d5c5c; height:33px;}
#menuContacto li:first-child{border: none!important}
#socialIcons a{padding:0 4px}
#lenguage img{float:left; margin-right: 8px; padding: 8px 0px;}
#menuNavegacion li{font-size:.85em;}
#menuNavegacion li a{float:left; padding:12px 11px; transition: border-color 0.4s, padding 0.4s; margin-top:12px; font-family: 'Raleway', sans-serif; font-weight:600}


/*---------------- Contenedores  ------------------*/
#trigger{padding:20vh 0 0; background:#141418}

.pin-spacer, footer{background:#141418}
#videoBox{float:left; width:100%; background:#141418}
#trigger button, a, #triggerDos a{text-decoration:none;cursor:pointer; color:#c7c7c7; font-weight:400; transition: background-color 0.3s, color 0.3s;  text-align: left; background: none; border:none }
.wrapCenter{display: block; width:100%; padding:10px 80px; margin:0 auto }
.wrapFull{float:left; width:100%}
.fifty{float:left; width:50%;}
.fifty h2{font-size: 2.2em; font-weight: 300;  float: left; width: 100%;  padding: 0px 80px}
.fifty h3{font-size: 1em;  font-weight: 400; letter-spacing: 6px;  float: left; width: 100%;  padding: 0px 80px; margin-bottom:10px}
.fifty em{    font-weight: 400; font-size: .7em; text-transform: uppercase;  color: #bb7435; margin: 4px 0 4px 0; float: left; width: 100%;}
.fifty strong{font-weight:300; float: left; width: 100%;  float: left; width: 100%;}
.fifty p{font-size: .95em; width: 100%;  float: left; width: 100%; text-align: justify;}
.fiftyPad{float:left; width:46%; padding:80px 100px}
.fiftyPad h2{font-size: 2.2em; font-weight: 300;  float: left; width: 100%;}
.fiftyPad h3{font-size: 1em; font-weight: 400; letter-spacing: 6px; float: left; margin-bottom:20px; border-bottom: 1px solid #bb7435; padding: 0 0 20px; width:60%; }
.fiftyPad em{    font-weight: 600; font-size: .6em; text-transform: uppercase;  color: #bb7435; margin: 4px 0 10px 0; float: left; width: 100%;}
.fiftyPad strong{font-weight: 600; float: left; width: 100%;  float: left; width: 100%;}
.fiftyPad p{font-size: .9em; width: 100%;  margin-bottom: 40px;  float: left; width: 100%; text-align: justify;}

#tabs ul, #triggerDos ul, #trigger ul{float:left; width: 100%; padding:30px 0px }
#tabs ul li, #triggerDos ul li, #trigger ul li{float:left; width: 100%;  }
#tabs ul li button, #triggerDos ul li a, #trigger ul li a{float:left; width:100%; padding:12px 80px; border-left: 3px solid #151414;}
#tabs ul li button:hover, #triggerDos ul li a:hove, r#trigger ul li a:hover{background:#fff9f912; border-left:3px solid #bb7436!important;}
.onHover{ background:#363636!important; transition: background-color 0.7s, color 0.7s; border-left:3px solid #bb7436!important; }
#trigger .fiftyPad{margin-top:85px;}
.bio p{    line-height: 1.9em; font-weight: 400; font-size: .9em; color: #d9d7d7;}
#prensa {float:left; width:100%; padding:80px 40px; background:#141418; border-top:1px solid #434140; border-bottom:1px solid #434140; position: relative}
#start #prensa em{display:block}
#prensa li{float:left; width:20%; margin:0 2.5%;}
#prensa span{float:left; width:100%; text-align:center}
#prensa img{height:300px; }
#start #prensa img{height:auto!important; }
#presna div{float:left; width:100%; text-align:center}
#prensa strong{font-size:.9em; margin:10px 0 2px; float:left; width:100%; text-align:center  }
#prensa p{font-size:.8em; float:left; width:100%; text-align:center; font-family: 'Raleway', sans-serif; font-weight:600}
#prensa em{color:#c0813b; font-weight:600; font-size:1em; float:left; width:100%}
/* Custom CSS to change dot color to red */

.slick-dots{ width:200px!important; margin:0 auto; display:block; position: inherit!important; margin:0 auto!important}
.slick-next {right: 25px!important;}
.slick-prev {left: 25px!important;}
.wrapCarrousel {padding: 20px 20px 0!important;}
.slick-dots li.slick-active button:before{color:#fff!important; font-size:13px!important}
.slick-dots li{width:auto!important}
.slick-dots li button:before { color: #fff!important;  font-size:13px!important}
.slick-prev, .slick-next{top:37%!important}

/*---------------- SLIDER  ------------------*/
#slider{float:left; margin-top:115px; width:100%}
.titulo{font-size:2.6em;  font-weight:100}
.descripcion{font-size: .9em; font-weight:100; line-height:1.7}
.sp-layer a img{width:23px; margin:10px 10px 0 0px; float: left;}
.sp-layer a em{float:left; padding:10px 0; font-size:.9em; font-weight:600}
.sp-thumbnail img{width:100%}


/*---------------- BOTONES  ------------------*/
.circle{float:left; width:100%}
.circle img{width:20px; float:left; margin-right:10px}
.circle em{font-weight: 600; font-size: .8em; text-transform: uppercase; color: #fff; margin: 1px 0 0px 10px; width:200px}
.circle a, em:hover{color:#bb7435}

/*---------------- LOADING  ------------------*/

.loading-container { position: absolute;  top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9);  display: flex; align-items: center; justify-content: center;  z-index: 99999; }
.loading-image img {max-width: 430px;}




#equipo{background-image: url("../graphics/gerbilsky-wainberg.png"); background-size: cover; background-repeat: no-repeat;  background-position: top center; display: none; }
#lucianoInfo{background-image: url("../graphics/luciano-gerbilsky-2024.png"); background-size: cover; background-repeat: no-repeat;  background-position: top center;}
#lucianoInfo div, #sandraInfo div, #interiorismoInfo div{margin-top:410px}
#sandraInfo{display: none; background-image: url("../graphics/sandra-wainberg-2024.png"); background-size: cover; background-repeat: no-repeat;     background-position:top center;}
#interiorismoInfo{display: none; background-image: url("../graphics/symbiosis-carrousel.png"); background-size: cover; background-repeat: no-repeat;     background-position: bottom center;}

/*---------------- FOOTER  ------------------*/
footer{float:left; width:100%; padding:80px 40px;}
#copyright{float:left; width:100%; padding:20px; text-align:center; font-family: 'Montserrat'; font-size: .85em; font-weight: 400;}
footer p{float:left; width:100%; padding: 0 10px; font-family: 'Montserrat'; font-size: .9em; font-weight: 400;}
footer ul{float:left; width:17%; margin:0 1%}
address{float:left; width:38%; margin:0 1%; font-style:normal; color: #9f9f9f; letter-spacing: -.1px;}
address a{color: #9f9f9f; }
address a:hover{color:#e08c2f; }
#qrcode{width:120px; float:left; margin-right:10px; margin-top:25px}
address span{float:left; text-align:left; width:300px}
footer form{float:left; width: 100%; padding:20px 0; position:relative}
footer h4{font-size:.9em; font-weight:600; color:#d7d7d7; border-bottom: 1px solid #685138; padding: 6px 0; margin: 0 0 6px 0;}
footer li a{font-size:.8em; font-weight:400; color:#ccc}
footer li a:hover{color:#e08c2f}
footer address strong{font-weight: 600; letter-spacing: .4px; color: #fff; font-size: .75em; float: left; width: 100%; margin-top: 5px;}
#ema{background: none; border: none; border-bottom: 1px solid #ccc; float: left; width:100%; padding: 10px 0; height:50px;}
#footer address i, #footer address a{font-style: normal; font-size:1.2em; font-weight:400; font-family:raleway}
footer form label{float: left; width: 100%; font-size: 1.6em; font-weight: 400; font-family: 'Raleway'; letter-spacing: -.4px; color: #6c6c6c;}
#social{float:left; width:100%; text-align:center; padding:40px 0 0}
#social a{margin:0 10px}
#envFooter{background: #181717; color: #fff; border: none; font-size: 0.8em; font-family: 'Montserrat'; float: left; width: 100%; padding: 18px 20px;  font-weight: 600; text-transform: uppercase; border: #000; margin-top:2px; border-radius: 4px; text-shadow: 0px 4px 10px #000; transition: background-color 0.3s, color 0.3s; }
#envFooter:hover{box-shadow: 12px 2px 15px #000; background:#333; cursor: pointer}
#ema:focus + #envFooter{background:#584028; cursor: pointer;     box-shadow: 22px 6px 22px #000; color: #fff}
#formFooter{display: block; width: 100%;}
#quick{display: block; width: 60%; text-align: center; margin: 0 auto;}
#quick input{text-align:center; color:#939191; font-size:1em}
#quick input::placeholder{text-align: center; vertical-align: middle; line-height:40px; color:#b7b5b5; font-size:1.1em;   }


#videoVdos{margin:116px auto 0; display:block; width: 1240px; position:relative}


#contacto{float:left; width: 100%; padding: 130px 80px 0;      }
.wrapCon{position:relative; float:left; width:100%;}
.wrapCon span{position: absolute; left: 49%; top: 84px;}
#despc{font-weight: 300; display: block; width:500px; text-align: center; margin: 0 auto;  border-bottom: 1px solid #777; padding:7px 0 15px 0; font-size:.8em; font-weight:400}
#contacto h1, #nuestroequipo h1, #proyects h1{font-weight:300; display:block; margin:0 auto;  text-align:center;font-size:2em;}
#contacto em, #nuestroequipo em, #proyects em{color:#e08c2f}
#contacto form{float: left; width:50%; padding:57px 0 50px 0px;}
#contacto fieldset{margin-top:20px; float:left;}
.oneHundred{width:100%}
.fifty{width:50%}
#contacto label{float: left; width: 100%; font-size: .9em; letter-spacing: -.4px;}
.enviarLog{float: right; width:180px; height: 34px; border-radius: 4px; background: none; border: 1px solid #777; color: #fff; text-transform: uppercase; font-size: .8em; cursor: pointer; background-color 0.3s, color 0.3s}
.enviarLog:hover{background:#e08c2f; border:1px solid #e08c2f}
#contacto textarea{background:none; border: none; border-bottom:1px solid #777; float:left; width:100%;  color:#fff}
#contacto .in{background:none; border:none; border-bottom:1px solid #777; float:left; width:96%; height:38px; color:#fff}
#infoContacto{float: left; width: 45%; text-align: right; padding:80px 40px 0 0;}
#infoContacto li span{float:right; border-right:2px solid #4e4e4e; padding-right:20px; margin-right:14px; width:295px;}
#infoContacto b{font-weight:600; font-size: .7em;}
#infoContacto li {width:100%; float:left; margin-bottom:40px}
#infoContacto li img{width: 14px; float: right; padding:6px 0px;}
#infoContacto li p{font-size:.9em;}


#premios{float: left; width:100%; padding:0 80px 80px 80px;}
#premios ul{float:left; width:100%}
#premios ul li{float:left; margin:0 2px; width:12%; text-align:center}
#premios ul li img{width:130px;}
#premios h1{float: left; width: 100%;  text-align: center; font-weight: 400; font-size: 1.8em; margin-bottom: 20px;}
#premios p{float: left; width: 100%; text-align: center; font-size: 1em; margin-bottom: 40px;}
.line{width: 430px; border-bottom: 1px solid #9f9e9e; display: block; margin: 0 auto 80px; position: relative;}
.line img{position: absolute; top: -7px; left: 48%;}

.caption h1{font-weight:300}
.caption p{font-size:.5em;}
.caption strong{font-size:3em; font-weight:400}

#nuestroequipo{float:left; width: 100%; padding: 150px 80px 0;}
#nuestroequipo li{width:25%; float:left; padding: 10px; text-align: center}
#nuestroequipo li img{width:100%; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;}
#nuestroequipo li p{color:#c07f40; font-weight:400; font-size:.8em; font-family: 'Montserrat', sans-serif;}
#nuestroequipo #despc{margin-bottom:40px}

#proyects, #revista{float:left; width: 100%; padding: 150px 10px 0;}
#proyects li{width: 24%; float: left; margin:.5%; text-align: center; position: relative; height: 340px; border-radius: 0px; overflow:hidden}
#proyects #despc{margin-bottom:40px}
#proyects strong{position: absolute; width:100%; text-align: center; color: #fff; font-weight: 400; text-shadow: 2px 2px 3px #000; left:0px; z-index:99; bottom:0px; background: #0000006e; padding: 2px 10px; height: 54px;}
#proyects li a{float:left; width:100%; height: 100%;  transition: all .3s; opacity: .9;}
#proyects li a:hover, #proyects li a:focus{ transform: scale(1.04); opacity:1.1;}
#proyects li:hover #proyects li a:before, #proyects li:focus #proyects li a:before {display: block;}

.left{float: left; width: 40%; padding: 0 4%; position: fixed}
.left h1{display:block; font-weight: 400;  font-size:1.6em; border-bottom: 1px solid #946d5f; padding-bottom: 10px; margin-bottom: 20px;}
.left p{display: block; font-size: .85em; font-weight: 500; margin: 10px 0; text-align: justify;}
.right{float: left; width: 60%; margin-left:40% }
.right img{width:100%}
.right p{font-size:.85em; margin:10px 0; display: block; text-align:justify; font-weight:400}

#premiosBox li{height:inherit;}
#premiosBox img{width:100%; display:block}
#premiosBox em{display:block; width:100%; position: inherit; bottom: inherit; font-weight:600; font-size:.8em}
#premiosBox strong{display:block; width:100%; position: inherit; bottom: inherit; font-weight:600; margin-top:16px; font-size: .8em; letter-spacing: -.2px;}

.boxDescrip{display:block; width:100%; height:70px;}
#prensaBox li{height:400px}
#start #premios li img{width:100%!important; }
.mas{float:left; width:100%; font-size:.7em; }
.mas:hover{color:#e08c2f}

#rp strong{display: block;
    font-size: .85em;}
#rp a{}
#rp p{padding-left:0!important}

.carousel * {
  box-sizing: border-box;
}





.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;

  &.animation-reveal {
    animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1);
  }

  @keyframes reveal {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}

.card {
  margin: 0 1rem;
  overflow: hidden;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 35, 0.25);
  border-radius: 8px;
  height: 200px;
  width: 200px;
  display: block;
  position: relative;
  background-position: 50%;
  background-size: cover;
  cursor: pointer;
  transition: width 0.16s ease-in-out, height 0.16s ease-in-out;
}
.card a{text-align: center;
    position: absolute;
    width: 100%;
    bottom: -2px;
    background: #000000b3;
    padding: 10px;
    color: #fff;}
.card a:hover{color:#e08c2f}

.card.is-custom-selected {
  width: 650px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-bg {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
}

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  position: relative;
  height: 100%;
}

.flickity-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}
.car{display: block; padding: 80px 0 140px; background: #141418;}
.car h1{text-align: center;
    padding: 0px 10px;
    float: left;
    width: 100%;
    margin-bottom: 10px;
    font-size: 1.6em;
    color: #d8d7d7; font-weight:400}
.car strong{font-weight:400; font-size:1em; text-align:center; padding: 0px 255px; display:block; color:#c1c1c1}
#proyectsList{ display: block; width:180px; margin:10px auto 80px; padding:10px 0; text-align:center; color:#e08c2f!important; border-bottom:1px solid #141418!important; transition: border-bottom 0.3s ease-in-out; font-weight:500}
#proyectsList:hover{border-bottom:1px solid #ba7426!important}
.slick-dotted.slick-slider{margin-bottom:0px!important;}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1;  }
    to { opacity: 0; visibility: hidden; }
}
@keyframes topbar-x { 0% { top: 0;
    -webkit-transform: rotate(0deg); }
  45% { top: 25%;
    -webkit-transform: rotate(145deg); }
  75% { -webkit-transform: rotate(130deg); }
  100% { -webkit-transform: rotate(135deg); } }

@keyframes topbar-back { 0% { top: 25%;
    -webkit-transform: rotate(135deg); }
  45% { -webkit-transform: rotate(-10deg); }
  75% { -webkit-transform: rotate(5deg); }
  100% { top: 0;
    -webkit-transform: rotate(0); } }

@keyframes bottombar-x { 0% { bottom: 0;
    -webkit-transform: rotate(0deg); }
  45% { bottom: 25%;
    -webkit-transform: rotate(-145deg); }
  75% { -webkit-transform: rotate(-130deg); }
  100% { -webkit-transform: rotate(-135deg); } }

@keyframes bottombar-back { 0% { bottom: 25%;
    -webkit-transform: rotate(-135deg); }
  45% { -webkit-transform: rotate(10deg); }
  75% { -webkit-transform: rotate(-5deg); }
  100% { bottom: 0;
    -webkit-transform: rotate(0); } }