@font-face{
  font-family: futura;
  src: url(../fonts/FuturaStd-Medium.otf);
}
/*
@font-face{
  font-family: futura;
  src: url(../fonts/FuturaStd-Heavy.otf);
  font-weight: bold;

}*/

@font-face{
  font-family: heiti;
  src: url(../fonts/STHeiti Light.ttc);
}


html{
    display: block;
    height: 100%;
    background-color: black;
} 

body {
  font-family: heiti !important;  
  height: 100%;
  width: 100% !important;
  overflow-x: hidden;
}

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(../images/preloader.gif) center no-repeat #fff;
}

.wok{
  padding: 0;
}

#start{

  background-color: black;
  background: url("../images/home-banner.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#start_container{
  visibility: hidden;
  padding: 0;
  margin: 0;
}

#start_container img{
  width: 100%;
}

#meet-us {
  margin-top: -154px;
  z-index: 10;
  display: table;
}

.top-scratch {
  /*
    margin-left: 0 !important;
    margin-right: 0 !important;*/
    margin-bottom: -5px;
    width: 100%;
    position: relative;
    display: table-row;
}

.top-scratch div{
    width: 100%;
}

.top-scratch img{ 
    max-width: 100%;
}


.bottom-scratch {/*
    margin-left: 0 !important;
    margin-right: 0 !important;*/
    top: -1px;
    width: 100%;
    max-height: 185px;
    position: relative;
    display: table-row;
}

.bottom-scratch div{
    width: 100%;
}

.bottom-scratch div img{
  margin-top: -8px;
}

.bottom-scratch img{ 
    max-width: 100%;
}

.meet-us-content{
    display: inherit;
    background-color: white;
    position: relative;
    left: 0%;
    width: 100%;
    height: 338px;

}

.meet-us-content-block{
  background-color: white;
}

.left-wok{
    position: relative;
    display: block;
    float: left;
    text-align: left;
    margin-top: 40px;
    
}

.left-wok img{
  width: 82%;
}

.center-wok{
  /*margin: 2%;*/
  margin-top: 3%;
  margin-bottom: 7%;
  padding-top: 3%;
  clear: both;
  color: black;
  font-family: futura;
}

.right-wok{
    text-align: right;
    margin-top: -79px;
}

.right-wok img{
  max-width: 84%;
}

#menu{
  z-index: 9;
  top: -230px;
}

#menu_background{
  position: relative;
  display: block;
  width: 100%;    
  background-image: url("../images/pizarra_02.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: left top; 
  padding-top: 230px; 
}

#post-menu{
  position: relative;
  display: inline-block;  
  padding-top: 7%;
  padding-bottom: 7%; 
  color: white;
  overflow: hidden !important;
}

#pizarra-bottom-scratch {
    width: 100%;
    max-height: 185px;
    position: relative;
    margin-top: -5px;
}

#pizarra-bottom-scratch div{
    width: 100%;
}

#pizarra-bottom-scratch img{ 
    max-width: 100%;
}

#gallery{
  margin-top: -33%;
  z-index: 8;
  margin-bottom: -1px; 
}

#philosophy{
  margin-top: -1px;
  position: relative;
  display: inline-block;
  width: 100%; 
  background-image: url("../images/pizarra_01.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: left top; 
  padding-top: 7%;
  padding-bottom: 7%; 
  color: white;
  margin-bottom: -10px;
  overflow: hidden !important;
}

.carousel_background{
  /*width: 1500px !important;*/
  
}


/*works*/
#works{padding-top:0; }
#works figcaption a{border:1px solid #fff;margin-top: 1em;display: inline-block;color: #fff;padding: 0 2em;}
#works figcaption a:hover{text-decoration: none;padding: 0 3em;}
/*works*/


#contact{
  position: relative;
  display: inline-block;
  width: 100%; 
  background-image: url("../images/textura.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: left top; 
  font-family: futura;
}

#contact input{
  border-width: 2px;
  border-color: #d1162e;
  background-color: #2a2f33;
}

#contact textarea{
  border-width: 2px;
  border-color: #d1162e;
  background-color: #2a2f33;
}



#location_container{
  text-align: left;
  margin-top: 30%;
}

#location_container div{
  margin: 0;
  display: inline-block;
}

.location{
  display: inline-block;
  color: white;
}

.location div img{
  min-width: 15%;
  max-width: 80%;
  display: inline-block;
  float: left;
  margin-top: 5%;
}

.address {
  display: inline-block;
  float: left;
  text-align: left;
}

.address h3{
  color: white;

}

.address p{
  font-weight: normal;
  text-decoration: underline;
}

/*PARALLAX*/
.title {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);    
}


.parallax_group {
  position: relative;
  height: 100vh;
  -webkit-transform: preserve-3d;
  -moz-transform: preserve-3d;
  transform: preserve-3d;
}

.parallax {

  perspective: 1px;  
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /*
  -webkit-perspective-origin-x: 100%;
  -moz-perspective-origin-x: 100%;
  perspective-origin-x: 100%;*/
}

.parallax_layer {
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*
  -moz-transform-origin-x: 100%;
  -webkit-transform-origin-x: 100%;
  transform-origin-x: 100%;*/
}

.parallax_layer_base {   
  transform: translateZ(0);
}

.parallax_layer_back {

  transform: translateX(-1%) translateZ(-1px) scale(2);
}
  
/*PARALLAX*/


#slide_1_back{
    /* The image used */
    background-color: black;
    background-image: url("../images/home-banner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: 1;
    
}

#slide_1_front{  
  position: absolute;
  transform: translateY(100%);
  z-index: 2;
}

#slide_2{
  margin-top: 80% ;
}

#slide_2_back{
  position: relative;
  display: table;
  width: 100%;    
  background-image: url("../images/pizarra.png");
  background-repeat: repeat-y;
  background-size: cover;
  background-position: left top;  
}

.carousel_container{
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}

#slide_2_container{
  display: table-row;  
}


#slide_2_front{  
  margin-top: 25%;
  margin-bottom: 350px;
  min-height: 1523px !important;
}


#slide_3{  
  display: table;
  margin-top: 40%;
  z-index: -1;
}



.slider_3 img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.slider_2{
  position: absolute;
  left: 50%;
  webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);  

}

.slider_2 div img{
  width: 100%;
}



.left_arrow_container{
  position: absolute;
  top: 50%;
  display: inline-block;
  margin-left: -140px;
}

.right_arrow_container{
  position: absolute;
  top: 50%;
  display: inline-block;
  margin-right: -140px;
}

.left_arrow_container img{
  width: 50%;
}

.left_arrow_container_2{
  position: absolute;
  top: 50%;
  display: inline-block;
  margin-left: -60px;
}

.right_arrow_container img{
  width: 50%;
}

.right_arrow_container_2{
  position: absolute;
  top: 50%;
  display: inline-block;
  margin-left: -60px;
}

.tail{
  color: white;
}

.tail-img img {
  width: 60px;
}

.normal-text p{
  font-size: 1.3em;
  font-family: futura;
}


.footer-text{
  font-size: 12px;
}
.fit { /* set relative picture size */
  max-width: 100%;
  max-height: 100%;
}
.center {
  display: block;
  margin: auto;
}

@media (max-width: 1600px){
  .menu_inner{
    width: 60%;
  }
}

@media (max-width: 1366px){
  .menu_inner{
    width: 35%;
  }
}


@media (max-device-width: 1280px){
  .menu_inner{
    width: 60%;
  }
}

@media (max-device-width: 920px) {
  .menu_inner{
    width: 70%;
  }
}
/*
@media (max-device-width: 1280px) and (min-device-width: 800px) {
    #start_container img{
        max-width: 1280px;
        width: 1280px !important;
        overflow-x: hidden;
    }
}*/

/* ----------- iPad mini ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {


    .top-scratch img{
      margin-bottom: -3px;
      margin-left: 2px;
    }

    .bottom-scratch img {
      margin-top: -3px;
    }

    .normal-text p{
      font-size: 2em;
      line-height: 1em;
    }   

    .address{
      font-size: 1.6em;
      line-height: 1em;
    }

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

    .top-scratch img{
      margin-bottom: -3px;
      margin-left: 2px;
    }

    .bottom-scratch img {
      margin-top: -3px;
    }

    .normal-text p{
      font-size: 1.5em;
      line-height: 1em;
    }
    
    .address{
      font-size: 1.7em;
      line-height: 1em;
    }
    
}


/* ----------- Mobile ----------- */
/* Portrait */
@media only screen 
  and (max-device-width: 767px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

    .normal-text{
      padding-left: 35px;
      padding-right: 35px;
    }

    .normal-text p{
      font-size: 2.5em;
      line-height: 1em;
    }

    .top-scratch img{
      margin-bottom: -3px;
      margin-left: 2px;
    }

    .bottom-scratch img {
      margin-top: -3px;
    }

    .address{
      font-size: 2em;
      line-height: 1em;
    }
    
    #location_container {
      margin-top: 0;
    }

    .office{
      width: 100% !important;
    }

    .location{
      width: 100% !important;
      margin-left: 30px !important;
    }

    .addressTitle{
      font-size: 1.5em;
    }

    .conZoom{
      transform: scale(1.5,1.5);
      -webkit-transform: scale(1.5,1.5);
      -moz-transform: scale(1.5,1.5);
    }

    .my-contact-form{
      /*
      transform: scale(1.5,1.5);
      -webkit-transform: scale(1.5,1.5);
      -moz-transform: scale(1.5,1.5);*/

      margin-top: 150px;
      margin-bottom: 150px;
      font-size: 2em;
    }

    .contact-us-title{
      font-size: 2em;
    }

    input[type="text"]{
      font-size: 1em !important;
    }

    textarea{
      font-size: .8em !important; 
    }

    button{
      font-size: .8em !important; 
    }
}

/* Landscape */
@media only screen 
  and (max-device-width: 767px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

    .bottom-scratch img {
      margin-top: -3px;
    }

    .top-scratch img{
      margin-bottom: -3px;
      width: 101%;
    }
    
    .address{
      font-size: 2em;
      line-height: 1em;
    }

    #location_container {
      margin-top: 0;
    }

    
    .office{
      width: 100% !important;
    }

    .location{
      width: 100% !important;
      margin-left: 80px !important;
    }

    .addressTitle{
      font-size: 1.5em;
    }

    .menu_inner{
      width: 55%;
    }

    .normal-text p{
      font-size: 2.5em;
      line-height: 1em;
    }

}

.slider {
    width: 100%;
    
}

.slick-slide img {
  width: 100%;
}