html {font-size: 17px; height: 100%; width: 100%;  }

@font-face {
  font-family: 'Sneak';
  src: url('fonts/Sneak-Regular.woff');

}
@font-face {
  font-family: 'SneakI';
  src: url('fonts/Sneak-Regular-Italic.woff');

}

body  {
  font-family: 'Sneak';
  color: #000;
  line-height: 21px;
  height: 100%;
  max-width: 100%;
  -moz-font-feature-settings:"ss02=1", "ss06=1";
-moz-font-feature-settings: "ss02", "ss06";
-ms-font-feature-settings: "ss02", "ss06";
-webkit-font-feature-settings: "ss02", "ss06";
font-feature-settings: "ss02", "ss06";
text-rendering: optimizeLegibility;

}



a, a:active {color: #000; text-decoration: none; outline: none; }
a:hover { }



h1,h2,h3 {font-weight: normal;  font-size: 17px; margin: 0 20px 0 0 ; padding: 0}



#mg {position: fixed; top: 50%; left: 50%;z-index: -1}
#mg div {position: relative; left: -50%; top: -50%; transform: translate(0, -50%)}





/*---------- MENUS ----------*/

.back_arrow { bottom: 0px; z-index: 11; padding: 6px 12px; background-color: #eceae3; border-radius: 20px; margin: 15px; position: fixed}
.title { display: inline-block;  margin: 15px 60px 15px 15px; }
.one { z-index: -0; display: block; background-color: #eceae3; padding: 6px 12px 6px 12px; border-radius: 20px; }

#two {cursor: pointer;  background-color: #ff6600; z-index: 1; bottom: 0px; position: fixed; padding:9px 10px ; height: 15px; border-radius: 26px; left: calc(50% - 32px); margin: 15px}
header {
  position: fixed;
  display: block;
  left: 0px;
  padding: 0em 0;
  z-index:10;
  width: 100%;
  height: 2em;

}
#spacer {width: 1px; height: 100vh; }
.plus{cursor: pointer; position: absolute; margin: 15px;right: 0px; z-index: 1000;background-color: #00cc66; color:#000; padding:6px 14px 11px 14px ; height: 15px; border-radius: 26px;
  -moz-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
  transition-property: opacity;
}

.work-page .plus {top: 0}

.rotate{
  opacity: 0; z-index: 100
}


#top { margin-top: 0}

#top  a img {position: absolute; margin: 0.615em 0.5em; top: 0; left: 0}



.textbox {
  width:calc(50% - 36px);
  display: inline-block;
  vertical-align: text-top;
  padding-bottom: 0.5em
}

.titlebox{
  width:calc(50% - 20px);
  display: inline-block;
  vertical-align: text-top;
}


.left {margin-right: 14px; }
.right {margin-left: 14px; margin-right: 24px; }
.right p {}





.about-box {display: none; background-color: #eceae3; color: #000; position: absolute; z-index: 10; margin: 15px 15px 10px 15px; padding: 6px 0 0 12px; top: 0px; left: 0px;  width: calc(100% - 30px); box-sizing: border-box; border-radius: 17px}
.about-box a {color: #cc00ff}

.visible {visibility: visible; opacity: 1}

.cross { color: #000; font-size: 18px; z-index: 11; display: inline-block; float: right;margin: 0 -30px; }

.line {width: calc(100% + 30px); height: 2px; background-color: #fff; margin: 15px 0 15px -15px}

.plus, .scrollTop, .title a, #up_arrow {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
            outline: none;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/*---------- HOME PAGE ----------*/

.splash {position: fixed; z-index: -1;height: 100% ; width: 100%; top: 0px;  background-size: cover ; background-position: center center;}


.home {background-color: #fff; margin: 0 0 0 -2em; padding-top: 3.6em; z-index: 2}


#container-work {
  padding: 0;
  text-align: left;
  display: block;
  max-width: 2500px;
  margin: 0 auto;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  }

.work-item {
  -moz-box-sizing: border-box; box-sizing: border-box;
  width: 50%; margin-bottom: 1.8em;
  display: inline-block;
  vertical-align: middle;
    padding: 0 0 0 2em;
}

.big {
  width: 75%; margin-left: 12.5%;
}


.work-item .lazy {width: 100%; height: auto; margin: 0; display: block; box-sizing: border-box;}


a.img-link {
  border-bottom: none;
  display: block;
  margin: 0 auto;
  text-align: left;
  font-family: 'Sneak';

  box-sizing: border-box;
}



a.img-link p {padding-top: 10px;text-align: center;}



.img-link span {
    display:none;
    font-style: normal;
}
.img-link:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
    width: 400px;
    text-align: center;
    color: #fff;
}
.img-link span img,.img-link span iframe {
display: inline;
position: static;
width: 30px;
}



/*---------- PROJECTS ----------*/
.work-page {}

.images img:last-child {padding-bottom: 3.6em}
.images video {padding-bottom: 3.6em}

.images img,video {
  max-width: 100%;
  max-height: 100%;
  display:block;
  margin: 0 auto;
  box-sizing: border-box;
}




.normal {  padding: 3.6em 3.6em 0 3.6em;}
.full {padding: 0;  height: 100%; width: 100%; object-fit: cover;}
.full-w {padding: 3.6em 0 0 0;}




.video-responsive{
  width: 100%;
  max-height: 100%;
  display:block;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 3.6em 3.6em 0 3.6em;;
}

iframe.lazy {
  width: 100%;
  height: 100%;
  display:block;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 3.6em 3.6em 0 3.6em;;
  margin: calc(((100vh - (100vw * 0.5625) )* -1 ) / 2) 0;

}

.embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;} .embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left:0; width:100%; height:100%; box-sizing: border-box;}


/*---------- MEDIA QUERIES ----------*/








@media only screen and (max-width : 768px) {
.textbox {width: 100%; margin: 0; }
.left {margin-bottom: 0.7em}
.about-box {padding-right: 15px; max-height: calc(100vh - 50px); overflow-y: auto}
.cross {margin: 21px 24px 0 0; top: 0;right: 0; position: fixed;}
.full-w {padding: 1.8em 0 0 0;}
.normal, iframe.lazy {padding: 30px 15px 0 15px}
.work-item{ padding: 0 0 0 20px}
.home {margin-left: -20px}

iframe.lazy {margin: calc(((100vh - (100vw * 0.6) )* -1 ) / 2) 0;}
}