coqa,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
 margin:0;
 padding:0;
 border:0;
 font-size:100%;
 font:inherit;
 vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
 display:block
}
body {
 line-height:1
}
ol,ul {
 list-style:none
}
blockquote,q {
 quotes:none
}
blockquote:after,blockquote:before,q:after,q:before {
 content:"";
 content:none
}
table {
 border-collapse:collapse;
 border-spacing:0
}
canvas {
 padding:0;
 margin:0
}
@font-face {
 font-family:Conqueror;
 src:url("fonts/AWConquerorDidot-Light.eot");
 src:url("fonts/AWConquerorDidot-Light.eot?#iefix") format("embedded-opentype"),url("fonts/AWConquerorDidot-Light.woff") format("woff"),url("fonts/AWConquerorDidot-Light.ttf") format("truetype"),url("fonts/AWConquerorDidot-Light.svg#145f8228578ecb194312b21e213a3a09") format("svg");
 font-style:normal;
 font-weight:200
}
@font-face {
 font-family:Graphik;
 src:url("fonts/graphik-regular.eot");
 src:url("fonts/graphik-regular.eot?#iefix") format("embedded-opentype"),url("fonts/graphik-regular.woff") format("woff"),url("fonts/graphik-regular.ttf") format("truetype"),url("fonts/graphik-regular.svg#bad6087e6b544a21c0bf58b844e74cb2") format("svg");
 font-style:normal;
 font-weight:400
}
@font-face {
 font-family:Graphik;
 src:url("fonts/graphik-semibold-webfont.eot");
 src:url("fonts/graphik-semibold-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/graphik-semibold-webfont.woff") format("woff"),url("fonts/graphik-semibold-webfont.ttf") format("truetype"),url("fonts/graphik-semibold-webfont.svg#9613addec373636ce3e1da74a2bd8efd") format("svg");
 font-style:normal;
 font-weight:700
}
.counter {
 top:155px;
 left:145px
}
.counter-current,.project-next__counter-current,.works-counter__current {
 position:absolute;
 top:0;
 left:0
}
.counter-total,.project-next__counter-total,.works-counter__total {
 position:absolute;
 top:0;
 left:210px
}
@media only screen and (max-width:1280px) {
 .counter-total,.project-next__counter-total,.works-counter__total {
  left:133px
 }
}
@media only screen and (max-width:767px) {
 .counter-total,.project-next__counter-total,.works-counter__total {
  left:100px
 }
}
.counter-separator,.project-next__counter-separator,.works-counter__separator {
 position:absolute;
 top:7px;
 left:105px;
 width:80px;
 height:1px;
 background:#444
}
@media only screen and (max-width:1280px) {
 .counter-separator,.project-next__counter-separator,.works-counter__separator {
  top:6px;
  width:50px;
  left:70px
 }
}
@media only screen and (max-width:767px) {
 .counter-separator,.project-next__counter-separator,.works-counter__separator {
  top:3px;
  width:30px;
  left:50px
 }
}
.about__canvas,.about__container,.framed-container,.works,.works-background {
 top:100px;
 left:100px;
 width:calc(100% - 200px);
 height:calc(100% - 140px)
}
@media only screen and (max-width:1280px) {
 .about__canvas,.about__container,.framed-container,.works,.works-background {
  top:70px;
  left:70px;
  width:calc(100% - 140px);
  height:calc(100% - 140px)
 }
}
html {
 font-family:Graphik,helvetica,arial,sans-serif;
 font-size:62.5%;
 color:#444;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale
}
body,html {
 width:100%;
 height:100%
}
body {
 overflow:hidden;
 background:#fff
}
* {
 outline:none;
 box-sizing:border-box
}
button {
 border:0;
 background:transparent
}
a {
 color:#444;
 text-decoration:none
}
canvas {
 vertical-align:middle
}
#application,.main-wrapper {
 position:relative;
 width:100%;
 height:100%;
 overflow:hidden
}
#application--vs-scroll,.main-wrapper--vs-scroll {
 position:fixed;
 top:0;
 right:0;
 left:0;
 width:100%;
 height:auto;
 margin:auto;
 will-change:transform
}
#application--exp .work__main-img-move-box img,.main-wrapper--exp .work__main-img-move-box img {
 transform:opacity .1s
}
.device-mobile .main-wrapper,.device-tablet .main-wrapper {
 overflow-x:hidden;
 overflow-y:auto;
 -webkit-overflow-scrolling:touch
}
.device-mobile .main-wrapper--scroll-locked,.device-tablet .main-wrapper--scroll-locked {
 overflow:hidden;
 max-height:100vh
}
canvas {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%
}
.statsjs {
 position:fixed;
 top:auto!important;
 left:5px!important;
 bottom:5px!important
}
.vs-section {
 position:fixed;
 top:0;
 right:0;
 left:0;
 width:100%;
 height:auto;
 margin:auto;
 text-align:center;
 will-change:transform
}
.vs-scrollbar {
 display:block;
 position:absolute;
 transition:transform .3s
}
.vs-scrollbar.vs-vertical {
 top:0;
 right:-5px;
 bottom:0;
 width:20px;
 height:100%;
 transform:translate3d(5px,0,0)
}
.vs-scrollbar.vs-horizontal {
 bottom:-5px;
 left:0;
 right:0;
 width:100%;
 height:15px;
 transform:translate3d(0,5px,0)
}
.is-dragging .vs-scrollbar.vs-horizontal,.is-dragging .vs-scrollbar.vs-vertical,.vs-scrollbar.vs-horizontal:hover,.vs-scrollbar.vs-vertical:hover {
 transform:none
}
.vs-scrollbar .vs-scrolldrag {
 position:relative;
 width:100%;
 height:auto;
 background:#d7d7d7;
 cursor:pointer
}
.vs-scroll-view {
 position:relative;
 width:1px
}
.browser-firefox .plyr .plyr__play-large {
 display:none
}
@keyframes blink {
 0%,to {
  opacity:1
 }
 50% {
  opacity:.5
 }
}
.dg.main {
 position:absolute;
 top:45px;
 right:15px;
 z-index:10
}
.dg.main.hide {
 display:none
}
.dg.main.taller-than-window .close-button {
 border-top:1px solid #ddd
}
.dg.main.taller-than-window {
 overflow-x:hidden
}
.dg.main .close-button {
 background-color:#ccc
}
.dg.main .close-button:hover {
 background-color:#ddd
}
.dg {
 color:#555;
 text-shadow:none!important
}
.dg.main::-webkit-scrollbar {
 background:#fafafa
}
.dg.main::-webkit-scrollbar-thumb {
 background:#bbb
}
.dg li:not(.folder) {
 background:#fafafa;
 border-bottom:1px solid #ddd
}
.dg li.save-row .button {
 text-shadow:none!important
}
.dg .cr.boolean:hover,.dg .cr.function:hover {
 background:#fff
}
.dg .c input[type=text] {
 background:#e9e9e9
}
.dg .c input[type=text]:hover {
 background:#eee
}
.dg .c input[type=text]:focus {
 background:#eee;
 color:#555
}
.dg .c .slider {
 background:#e9e9e9
}
.dg .c .slider:hover {
 background:#eee
}
.dg li.title {
 background:#e8e8e8 url("data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==") 6px 10px no-repeat
}
.plyr:focus,.plyr input[type=range]:focus {
 outline:0
}
.plyr .plyr__video-embed iframe,.plyr__tooltip {
 pointer-events:none
}
.plyr {
 position:relative;
 max-width:100%;
 min-width:200px;
 font-family:Avenir,Avenir Next,Helvetica Neue,Segoe UI,Helvetica,Arial,sans-serif;
 direction:ltr
}
.plyr,.plyr *,.plyr :after,.plyr :before {
 box-sizing:border-box
}
.plyr a,.plyr button,.plyr input,.plyr label {
 -ms-touch-action:manipulation;
 touch-action:manipulation
}
.plyr audio,.plyr video {
 width:100%;
 height:auto;
 vertical-align:middle;
 border-radius:inherit
}
.plyr input[type=range] {
 display:block;
 height:20px;
 width:100%;
 margin:0;
 padding:0;
 vertical-align:middle;
 -webkit-appearance:none;
 -moz-appearance:none;
 appearance:none;
 cursor:pointer;
 border:none;
 background:0 0
}
.plyr input[type=range]::-webkit-slider-runnable-track {
 height:8px;
 background:0 0;
 border:0;
 border-radius:4px;
 -webkit-user-select:none;
 user-select:none
}
.plyr input[type=range]::-webkit-slider-thumb {
 -webkit-appearance:none;
 margin-top:-4px;
 position:relative;
 height:16px;
 width:16px;
 background:#fff;
 border:2px solid transparent;
 border-radius:100%;
 transition:background .2s ease,border .2s ease,transform .2s ease;
 box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);
 box-sizing:border-box
}
.plyr input[type=range]::-moz-range-track {
 height:8px;
 background:0 0;
 border:0;
 border-radius:4px;
 -moz-user-select:none;
 user-select:none
}
.plyr input[type=range]::-moz-range-thumb {
 position:relative;
 height:16px;
 width:16px;
 background:#fff;
 border:2px solid transparent;
 border-radius:100%;
 transition:background .2s ease,border .2s ease,transform .2s ease;
 box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);
 box-sizing:border-box
}
.plyr input[type=range]::-ms-track {
 height:8px;
 background:0 0;
 border:0;
 color:transparent
}
.plyr input[type=range]::-ms-fill-upper {
 height:8px;
 background:0 0;
 border:0;
 border-radius:4px;
 -ms-user-select:none;
 user-select:none
}
.plyr input[type=range]::-ms-fill-lower {
 height:8px;
 border:0;
 border-radius:4px;
 -ms-user-select:none;
 user-select:none;
 background:#3498db
}
.plyr input[type=range]::-ms-thumb {
 position:relative;
 height:16px;
 width:16px;
 background:#fff;
 border:2px solid transparent;
 border-radius:100%;
 transition:background .2s ease,border .2s ease,transform .2s ease;
 box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);
 box-sizing:border-box;
 margin-top:0
}
.plyr input[type=range]::-ms-tooltip {
 display:none
}
.plyr input[type=range]::-moz-focus-outer {
 border:0
}
.plyr input[type=range].tab-focus:focus {
 outline-offset:3px
}
.plyr input[type=range]:active::-webkit-slider-thumb {
 background:#3498db;
 border-color:#fff;
 transform:scale(1.25)
}
.plyr input[type=range]:active::-moz-range-thumb {
 background:#3498db;
 border-color:#fff;
 transform:scale(1.25)
}
.plyr input[type=range]:active::-ms-thumb {
 background:#3498db;
 border-color:#fff;
 transform:scale(1.25)
}
.plyr--video input[type=range].tab-focus:focus {
 outline:1px dotted hsla(0,0%,100%,.5)
}
.plyr--audio input[type=range].tab-focus:focus {
 outline:1px dotted rgba(86,93,100,.5)
}
.plyr__sr-only {
 clip:rect(1px,1px,1px,1px);
 overflow:hidden;
 position:absolute!important;
 padding:0!important;
 border:0!important;
 height:1px!important;
 width:1px!important
}
.plyr__video-wrapper {
 position:relative;
 background:#000;
 border-radius:inherit
}
.plyr__video-embed {
 padding-bottom:56.25%;
 height:0;
 border-radius:inherit;
 overflow:hidden;
 z-index:0
}
.plyr__video-embed iframe {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 border:0;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
.plyr__video-embed>div {
 position:relative;
 padding-bottom:200%;
 transform:translateY(-35.95%)
}
.plyr video::-webkit-media-text-track-container {
 display:none
}
.plyr__captions {
 display:none;
 position:absolute;
 bottom:0;
 left:0;
 width:100%;
 padding:20px;
 transform:translateY(-40px);
 transition:transform .3s ease;
 color:#fff;
 font-size:16px;
 text-align:center;
 font-weight:400
}
.plyr__captions span {
 border-radius:2px;
 padding:3px 10px;
 background:rgba(0,0,0,.7);
 -webkit-box-decoration-break:clone;
 box-decoration-break:clone;
 line-height:150%
}
.plyr__captions span:empty {
 display:none
}
@media (min-width:768px) {
 .plyr__captions {
  font-size:24px
 }
}
.plyr--captions-active .plyr__captions {
 display:block
}
.plyr--hide-controls .plyr__captions {
 transform:translateY(-15px)
}
@media (min-width:1024px) {
 .plyr--fullscreen-active .plyr__captions {
  font-size:32px
 }
}
.plyr ::-webkit-media-controls {
 display:none
}
.plyr__controls {
 display:-ms-flexbox;
 display:flex;
 -ms-flex-align:center;
 align-items:center;
 line-height:1;
 text-align:center
}
.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button {
 margin-left:5px
}
.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__time:first-child,.plyr__controls>button:first-child {
 margin-left:0
}
.plyr__controls .plyr__volume {
 margin-left:5px
}
.plyr__controls [data-plyr=pause] {
 margin-left:0
}
.plyr__controls button {
 position:relative;
 display:inline-block;
 -ms-flex-negative:0;
 flex-shrink:0;
 overflow:visible;
 vertical-align:middle;
 padding:7px;
 border:0;
 background:0 0;
 border-radius:3px;
 cursor:pointer;
 transition:background .3s ease,color .3s ease,opacity .3s ease;
 color:inherit
}
.plyr__controls button svg {
 width:18px;
 height:18px;
 display:block;
 fill:currentColor
}
.plyr__controls button:focus {
 outline:0
}
.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted {
 display:none
}
@media (min-width:480px) {
 .plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button {
  margin-left:10px
 }
}
.plyr--hide-controls .plyr__controls {
 opacity:0;
 pointer-events:none
}
.plyr--video .plyr__controls {
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 z-index:2;
 padding:50px 10px 10px;
 background:linear-gradient(transparent,rgba(0,0,0,.5));
 border-bottom-left-radius:inherit;
 border-bottom-right-radius:inherit;
 color:#fff;
 transition:opacity .3s ease
}
.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__controls button:hover {
 opacity:.6;
 color:#fff
}
.plyr--audio .plyr__controls {
 padding:10px;
 border-radius:inherit;
 background:#fff;
 border:1px solid #dbe3e8;
 color:#565d64
}
.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__controls button:hover,.plyr__play-large {
 background:#3498db;
 color:#fff
}
.plyr__play-large {
 display:none;
 position:absolute;
 z-index:1;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 padding:10px;
 border:4px solid currentColor;
 border-radius:100%;
 box-shadow:0 1px 1px rgba(0,0,0,.15);
 transition:all .3s ease
}
.plyr__play-large svg {
 position:relative;
 left:2px;
 width:20px;
 height:20px;
 display:block;
 fill:currentColor
}
.plyr__play-large:focus {
 outline:1px dotted hsla(0,0%,100%,.5)
}
.plyr .plyr__play-large {
 display:inline-block
}
.plyr--audio .plyr__play-large,.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause] {
 display:none
}
.plyr--playing .plyr__play-large {
 opacity:0;
 visibility:hidden
}
.plyr--playing .plyr__controls [data-plyr=pause] {
 display:inline-block
}
.plyr--captions-active .plyr__controls .icon--captions-on,.plyr--fullscreen-active .icon--exit-fullscreen,.plyr--muted .plyr__controls .icon--muted {
 display:block
}
.plyr--captions-active .plyr__controls .icon--captions-on+svg,.plyr--fullscreen-active .icon--exit-fullscreen+svg,.plyr--muted .plyr__controls .icon--muted+svg,.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen] {
 display:none
}
.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen] {
 display:inline-block
}
.plyr__tooltip {
 position:absolute;
 z-index:2;
 bottom:100%;
 margin-bottom:10px;
 padding:5px 7.5px;
 opacity:0;
 background:rgba(0,0,0,.7);
 border-radius:3px;
 color:#fff;
 font-size:14px;
 line-height:1.3;
 transform:translate(-50%,10px) scale(.8);
 transform-origin:50% 100%;
 transition:transform .2s ease .1s,opacity .2s ease .1s
}
.plyr__tooltip:before {
 content:"";
 position:absolute;
 width:0;
 height:0;
 left:50%;
 transform:translateX(-50%);
 bottom:-4px;
 border-right:4px solid transparent;
 border-top:4px solid rgba(0,0,0,.7);
 border-left:4px solid transparent;
 z-index:2
}
.plyr__tooltip--visible,.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip {
 opacity:1;
 transform:translate(-50%) scale(1)
}
.plyr button:hover .plyr__tooltip {
 z-index:3
}
.plyr__controls button:first-child .plyr__tooltip {
 left:0;
 transform:translateY(10px) scale(.8);
 transform-origin:0 100%
}
.plyr__controls button:first-child .plyr__tooltip:before {
 left:16px
}
.plyr__controls button:last-child .plyr__tooltip {
 right:0;
 transform:translateY(10px) scale(.8);
 transform-origin:100% 100%
}
.plyr__controls button:last-child .plyr__tooltip:before {
 left:auto;
 right:16px;
 transform:translateX(50%)
}
.plyr__controls button:first-child .plyr__tooltip--visible,.plyr__controls button:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:first-child:hover .plyr__tooltip,.plyr__controls button:last-child .plyr__tooltip--visible,.plyr__controls button:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:last-child:hover .plyr__tooltip {
 transform:translate(0) scale(1)
}
.plyr__progress {
 position:relative;
 display:none;
 -ms-flex:1;
 flex:1
}
.plyr__progress input[type=range] {
 position:relative;
 z-index:2
}
.plyr__progress input[type=range]::-webkit-slider-runnable-track {
 background:0 0
}
.plyr__progress input[type=range]::-moz-range-track {
 background:0 0
}
.plyr__progress input[type=range]::-ms-fill-upper {
 background:0 0
}
.plyr__progress .plyr__tooltip {
 left:0
}
.plyr .plyr__progress {
 display:inline-block
}
.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display {
 position:absolute;
 left:0;
 top:50%;
 width:100%;
 height:8px;
 margin:-4px 0 0;
 padding:0;
 vertical-align:top;
 -webkit-appearance:none;
 -moz-appearance:none;
 appearance:none;
 border:none;
 border-radius:100px
}
.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar {
 background:0 0
}
.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value {
 background:currentColor;
 border-radius:100px;
 min-width:8px
}
.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar {
 background:currentColor;
 border-radius:100px;
 min-width:8px
}
.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill {
 border-radius:100px
}
.plyr__progress--played,.plyr__volume--display {
 z-index:1;
 color:#3498db;
 background:0 0;
 transition:none
}
.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value {
 min-width:8px;
 max-width:99%;
 border-top-right-radius:0;
 border-bottom-right-radius:0;
 transition:none
}
.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar {
 min-width:8px;
 max-width:99%;
 border-top-right-radius:0;
 border-bottom-right-radius:0;
 transition:none
}
.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill {
 display:none
}
.plyr__progress--buffer::-webkit-progress-value {
 transition:width .2s ease
}
.plyr__progress--buffer::-moz-progress-bar {
 transition:width .2s ease
}
.plyr__progress--buffer::-ms-fill {
 transition:width .2s ease
}
.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display {
 background:hsla(0,0%,100%,.25)
}
.plyr--video .plyr__progress--buffer {
 color:hsla(0,0%,100%,.25)
}
.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display {
 background:rgba(198,214,219,.66)
}
.plyr--audio .plyr__progress--buffer {
 color:rgba(198,214,219,.66)
}
.plyr--loading .plyr__progress--buffer {
 animation:plyr-progress 1s linear infinite;
 background-size:25px 25px;
 background-repeat:repeat-x;
 background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 0,transparent 50%,rgba(0,0,0,.15) 0,rgba(0,0,0,.15) 75%,transparent 0,transparent);
 color:transparent
}
.plyr--video.plyr--loading .plyr__progress--buffer {
 background-color:hsla(0,0%,100%,.25)
}
.plyr--audio.plyr--loading .plyr__progress--buffer {
 background-color:rgba(198,214,219,.66)
}
.plyr__time {
 display:inline-block;
 vertical-align:middle;
 font-size:14px
}
.plyr__time+.plyr__time {
 display:none
}
@media (min-width:768px) {
 .plyr__time+.plyr__time {
  display:inline-block
 }
}
.plyr__time+.plyr__time:before {
 content:"\2044";
 margin-right:10px
}
.plyr__volume {
 display:none
}
.plyr .plyr__volume {
 -ms-flex:1;
 flex:1;
 position:relative
}
.plyr .plyr__volume input[type=range] {
 position:relative;
 z-index:2
}
@media (min-width:480px) {
 .plyr .plyr__volume {
  display:block;
  max-width:60px
 }
}
@media (min-width:768px) {
 .plyr .plyr__volume {
  max-width:100px
 }
}
.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute] {
 display:none!important
}
.plyr--fullscreen-active {
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 height:100%;
 width:100%;
 z-index:10000000;
 background:#000;
 border-radius:0!important
}
.plyr--fullscreen-active video {
 height:100%
}
.plyr--fullscreen-active .plyr__video-wrapper {
 height:100%;
 width:100%
}
.plyr--fullscreen-active .plyr__video-embed {
 overflow:visible
}
.plyr--fullscreen-active .plyr__controls {
 position:absolute;
 bottom:0;
 left:0;
 right:0
}
.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper {
 height:0;
 top:50%;
 transform:translateY(-50%)
}
@keyframes plyr-progress {
 to {
  background-position:25px 0
 }
}
.about {
 position:relative;
 width:100%;
 height:100%;
 z-index:2;
 overflow:hidden
}
.about__close {
 position:absolute;
 top:20px;
 right:0;
 display:none;
 width:15px;
 height:15px;
 fill:#000;
 opacity:0
}
@media only screen and (max-width:767px) {
 .about__close {
  display:none;
	z-index:10000;
 }
.about__description {
width: 100% !important;
margin-left: 0 !important;
margin-top: 500px !important;
}
.about__descriptions {
width: 100% !important;
margin-left: 0 !important;
margin-top: 500px !important;
}
#urlap input[type=button]{
width:100%
}
}
.about__wrapper {
 transform-origin:left center;
 overflow:hidden
}
.about__bg,.about__wrapper {
 position:absolute;
 width:100%;
 height:100%
}
.about__bg {
 top:0;
 left:0;
 background:#fff
}
@media only screen and (max-width:767px) {
 .about__bg {
  top:55px;
  left:0;
  width:100%;
  height:calc(100% - 55px);
  background:#e2eeff
 }
}
.about__canvas {
 position:absolute;
 overflow:hidden;
 background-color: #e2eeff;
 background-size:cover
}
@media only screen and (max-width:767px) {
 .about__canvas {
  top:50px;
  left:0;
  width:100%;
  height:calc(100% - 50px)
 }
}
.about__link {
 position:relative;
 display:inline-block
}
.about__link:after {
 content:"";
 position:absolute;
 display:block;
 width:100%;
 height:2px;
 background-color:#fff;
 top:18px;
 left:-3px;
 padding:0 3px;
 opacity:1;
 transform:translate3d(0,3px,0);
 transform:none;
 transition:transform .4s cubic-bezier(.55,0,.1,1)
}
.device-desktop .about__link:hover:after {
 transform:translate3d(0,3px,0)
}
.about__container {
 position:relative;
 display:-ms-flexbox;
 display:flex;
 -ms-flex-align:center;
 align-items:center;
 -ms-flex-pack:center;
 justify-content:center;
 z-index:2;
 overflow:hidden;
 font-family:Graphik,helvetica,arial,sans-serif;
 font-size:1.4rem;
 line-height:1.6rem
}
@media only screen and (max-width:767px) {
 .about__container {
  top:50px;
  left:20px;
  width:calc(100% - 40px);
  height:calc(100% - 50px);
	display:block;
 }
}
.about__content {
 position:relative
}
.about__contents {
 position:relative
}
@media only screen and (max-width:1281px) {
 .about__content {
  margin-left:260px
 } .about__contents {
  margin-left:260px
 }
}
@media only screen and (max-width:1024px) {
 .about__content {
  margin-left:0;
	width:98%;
top: -130px;
position: absolute;
height: 100vh;
overflow-y: auto;overflow-x: hidden;
 } .about__contents {
  margin-left:0;
	width:98%;
top: -130px;
position: absolute;
height: 100vh;
overflow-y: auto;overflow-x: hidden;
 }
}
.about__title {
 position:absolute;
 top:-50px;
 left:-332px;
 font-family:Conqueror,helvetica,arial,sans-serif;
 font-size:8.4rem;
 font-weight:200;
 text-transform:capitalize
}
@media only screen and (max-width:1400px) {
 .about__title {
  left:-200px;
  font-size:6.5rem
 }
}
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
 .about__title {
  left:-50px
 }
}
@media only screen and (max-width:767px),only screen and (max-width:1024px) and (orientation:portrait) {
 .about__title {
  position:absolute;
  top:auto;
  left:auto
 }
}
@media only screen and (max-width:767px) {
 .about__title {
  margin-bottom:40px;
  font-size:5rem;
	top:0 !important;
left:0 !important;
 }
}
.about__title-text {
 display:inline-block;
 transition:transform .6s ease-out
}
.about__title-line {
 display:block;
 position:absolute;
 left:100%;
 bottom:0;
 width:80px;
 height:1px;
 margin-left:25px;
 background:#444;
 transform-origin:left center
}
@media only screen and (max-width:767px),only screen and (max-width:1024px) and (orientation:portrait) {
 .about__title-line {
  display:none
 }
}
.about__description {
 transition:transform .6s ease-out
}
.about__descriptions {
 transition:transform .6s ease-out
}
.about__paragraph {
 line-height:2.5rem
}
.about__paragraph--contact {
 margin-top:40px
}
.about__paragraph--network {
 margin-top:30px
}
.about__paragraph .about__link:after {
 top:22px
}
@media only screen and (max-width:1280px) {
 .about__paragraph--contact {
  margin-top:20px
 }
 .about__paragraph--network {
  margin-top:15px
 }
}
@media only screen and (max-width:767px) {
 .about__paragraph {
  width:98% !important
 }
 .about__paragraph--network {
  display:none
 }
}
.about__social-networks {
 margin-top:20px
}
@media only screen and (max-width:1280px) {
 .about__social-networks {
  margin-top:15px
 }
}
@media only screen and (max-width:767px) {
 .about__social-networks {
  display:none
 }
}
.about__social-network {
 display:inline-block;
 margin-right:20px
}
.about__social-network:last-child {
 margin-right:0
}
.about__credit {
 position:absolute;
 right:30px;
 bottom:30px;
 font-family:Graphik,helvetica,arial,sans-serif;
 font-size:1.1rem
}
@media only screen and (max-width:767px) {
 .about__credit {
  display:none
 }
}
.home {
 width:100%;
 height:100%
}
.home__arrow {
 position:absolute;
 bottom:0;
 width:100px;
 height:100px;
 transition:background-color .3s cubic-bezier(.55,0,.1,1);
 cursor:pointer
}
.home__arrow--previous {
 left:0
}
.home__arrow--previous .home__arrow-img {
 transform:translate3d(-50%,-50%,0)
}
.device-desktop .home__arrow--previous:hover .home__arrow-img,.home__arrow--previous.home__arrow--feedback .home__arrow-img {
 transform:translate3d(-70%,-50%,0)
}
.home__arrow--next {
 right:0
}
.home__arrow--next .home__arrow-img {
 transform:translate3d(-50%,-50%,0) rotate(180deg)
}
.device-desktop .home__arrow--next:hover .home__arrow-img,.home__arrow--next.home__arrow--feedback .home__arrow-img {
 transform:translate3d(-30%,-50%,0) rotate(180deg)
}
.device-desktop .home__arrow:hover,.home__arrow.home__arrow--feedback {
 background-color:$color-grey-light
}
@media only screen and (max-width:1280px) {
 .home__arrow {
  width:70px;
  height:70px
 }
}
@media only screen and (max-width:767px) {
 .home__arrow {
  bottom:20%;
  margin-bottom:-45px
 }
}
@media only screen and (max-width:467px) {
 .home__arrow {
  bottom:10%;
  margin-bottom:-45px
 }
}
.home__arrow-img {
 position:absolute;
 top:50%;
 left:50%;
 transform:translate3d(-50%,-50%,0);
 transition:transform .4s cubic-bezier(.55,0,.1,1)
}
.project {
 position:relative
}
.project__content {
 display:relative;
 opacity:0;
 transform:translate3d(0,50px,0)
}
.about-background {
 position:absolute;
 width:100%;
 height:100%
}
.about-background__canvas {
 display:block;
 width:100%;
 height:100%;
 opacity:1
}
.aside-title {
 font-size:1rem;
 font-family:Graphik,helvetica,arial,sans-serif;
 letter-spacing:.4rem;
 text-transform:uppercase;
 position:absolute;
 top:calc(50vh - 60px);
 left:45px;
 margin-top:60px;
 z-index:3;
/* pointer-events:none; */
 opacity:0;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
@media only screen and (max-width:1280px) {
 .aside-title {
  left:32px
 }
 .main-wrapper--project .aside-title {
  left:20px
 }
}
@media only screen and (max-width:767px) {
 .aside-title {
  top: -35px;
  left: 2em;
 }
 .aside-title__text {
 transform:rotate(0) translateZ(0) !important;
 }
}
.aside-title__text {
 display:inline-block;
 transform:rotate(-90deg) translateZ(0);
 transform-origin:left top 0;
 float:left;
 white-space:nowrap
}
.loader {
 display:-ms-flexbox;
 display:flex;
 -ms-flex-direction:column;
 flex-direction:column;
 -ms-flex-align:center;
 align-items:center;
 -ms-flex-pack:center;
 justify-content:center;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:20;
 background:#fff;
 color:#000;
 overflow:hidden;
 text-align:center;
 transform-origin:top center;
 transition:transform 1s cubic-bezier(.55,0,.1,1);
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
.loader--hide {
 transform:scaleY(0)
}
.loader--hide .loader__bar,.loader--hide .loader__percent {
 opacity:0
}
.loader__title {
 overflow:hidden
}
.loader__title-loading,.loader__title-name {
 font-size:1rem;
 font-family:Graphik,helvetica,arial,sans-serif;
 letter-spacing:.4rem;
 text-transform:uppercase;
 display:block;
 color:$color-light-grey
}
.loader__title-loading {
 margin-top:20px;
 margin-left:4px;
 font-size:.7rem
}
.loader__logo {
 display:block;
 margin:auto;
 width:70px;
 height:70px
}
.loader__logo-shape {
 fill:none;
 stroke:#000;
 stroke-width:.4;
 stroke-miterlimit:10
}
.loader__percent {
 position:absolute;
 bottom:50px;
 right:50px;
 font-family:Conqueror,helvetica,arial,sans-serif;
 font-size:7rem;
 font-weight:200;
 color:#ededed;
 transition:opacity .2s ease-out
}

.logo {text-align:right;
    position: absolute;
    top: 45px;
    right: 100px;
    cursor: pointer;
    transform-origin: center center;
    z-index: 10;
    font-size: 1.2rem;
    font-family: Graphik,helvetica,arial,sans-serif;
    letter-spacing: .15rem;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -wbkit-user-select: none;
}
@media only screen and (max-width:767px) {
 .loader__percent {
  font-size:4rem
 }
}
.loader__bar {
 position:absolute;
 left:0;
 bottom:0;
 width:100%;
 height:5px;
 transform:scaleX(0);
 background:#ededed;
 transition:opacity .2s ease-out
}
.logo {
 position:absolute;
 left:50%;
 transform:translate3d(-50%,0,0);
 top:30px;
 cursor:pointer;
 transform-origin:center center;
 z-index:10
}
@media only screen and (max-width:1280px) {
 .logo {
  top:36px;
	right:70px;
 }
}
@media only screen and (max-width:767px) {
 .logo {
  top:10px;
	right:10px;
left: auto;
display: inline-block;
width: 200px;
 }
}
.logo__img {
 width:40px;
 height:44px
}
@media only screen and (max-width:1280px) {
 .logo__img {
  width:30px;
  height:34px
 }
}
.menu {
 position:absolute;
 top:45px;
 left:100px;
 z-index:3;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
.menu--project .menu__link--back {
 opacity:1;
 left:0;
 visibility:visible;
 transform:none;
 transition:opacity .5s cubic-bezier(.55,0,.1,1),visibility 0s
}
@media only screen and (max-width:767px) {
 .menu--project .menu__link--back {
  top:70px;
  left:0vw;
  margin-left:0px;
  transition:opacity .5s cubic-bezier(.55,0,.1,1) 1s,visibility 0s
 }
}
.menu--project .menu__link--works {
 opacity:0;
 visibility:hidden;
 transition:opacity $ease-out-swif .2s,visibility 0s .2s
}
.menu--project .menu__link--press {
 opacity:0;
 visibility:hidden;
 transition:opacity $ease-out-swif .2s,visibility 0s .2s
}
.menu--project .menu__link--about {
 opacity:0;
 visibility:hidden;
 transition:opacity $ease-out-swif .2s,visibility 0s .2s
}
.menu--project .menu__link--contact {
 opacity:0;
 visibility:hidden;
 transition:opacity $ease-out-swif .2s,visibility 0s .2s
}
.menu--project .menu__link--portfolio {
 opacity:0;
 visibility:hidden;
 transition:opacity $ease-out-swif .2s,visibility 0s .2s
}
@media only screen and (max-width:767px) {
 .menu--project .menu__link--about,  .menu--project .menu__link--press {
  left:auto
 }
}
@media only screen and (max-width:1280px) {
 .menu {
  top:35px;
  left:70px
 }
}
@media only screen and (max-width:767px) {
 .menu {
  top:35px;
  left:10px;
  right:auto
 }
}
.menu__links {
 position:relative
}
.menu__links a {
 color:#444
}
.menu__link {
 position:absolute;
 top:0;
 font-size:14px;
 text-transform:capitalize;
 transition:left .4s cubic-bezier(.55,0,.1,1),opacity .4s cubic-bezier(.55,0,.1,1);
 cursor:pointer
}
.menu__link .router-link-active {
 position:absolute;
 font-weight:700;
 top:-1px
}
.menu__link .router-link-active .menu__link-text:after {
 display:none
}
.menu__link--back {
 opacity:0;
 width:80px;
 visibility:hidden
}
.menu__link--back .menu__link-text {
 margin-left:50px
}
.device-desktop .menu__link--back:hover .menu__link-icon {
 transform:translate3d(-5px,0,0)
}
.menu__link--works {
 left:0
}
.menu__link--press {
 left:20rem
}
.menu__link--about {
 left:7rem
}
.menu__link--contact {
 left:26rem
}
.menu__link--portfolio {
 left:13rem
}
@media only screen and (max-width:767px) {
 .menu__link--works {
  left:0em
 }
 .menu__link--about {
  left:5em
 }
 .menu__link--contact {
  left:18em
 }
 .menu__link--portfolio {
  left:9em
 }
 .menu__link--press {
  left:14em
 }
}
.device-desktop .menu__link:hover .menu__link-text:after {
 opacity:0;
 transform:none
}
.menu__link-icon {
 position:absolute;
 width:33px;
 height:12px;
 display:inline-block;
 transition:transform .3s cubic-bezier(.55,0,.1,1);
 fill:#444
}
.menu__link-text {
 position:relative;
 text-transform:capitalize
}
.menu__link-text:after {
 content:"";
 position:absolute;
 display:block;
 width:100%;
 height:2px;
 padding:0 3px;
 background-color:#ffdbc6;
 top:100%;
 left:-3px;
 margin-top:5px;
 opacity:0;
 transform:translate3d(0,3px,0);
 transition:transform .35s cubic-bezier(.55,0,.1,1),opacity .35s cubic-bezier(.55,0,.1,1)
}
.project-drag-slider {
 position:relative;
 width:100%;
 height:670px;
 margin:120px auto 0;
 background:$color-grey-light;
 white-space:nowrap;
 overflow:hidden
}
@media only screen and (max-width:1600px) {
 .project-drag-slider {
  margin:60px auto 0;
  height:550px
 }
}
@media only screen and (max-width:1400px) {
 .project-drag-slider {
  margin:40px auto 0
 }
}
@media only screen and (max-width:1280px) {
 .project-drag-slider {
  margin:60px auto 0;
  height:450px
 }
}
@media only screen and (max-width:767px) {
 .project-drag-slider {
  height:220px;
  margin:40px auto 0
 }
}
.project-drag-slider--no-touch {
 pointer-events:none
}
.project-drag-slider__move {
 -ms-overflow-style:none
}
.project-drag-slider__move::-webkit-scrollbar {
 display:none
}
.browser-chrome .project-drag-slider__move,.browser-safari .project-drag-slider__move {
 cursor:-webkit-grab!important
}
.browser-chrome .project-drag-slider--dragging .project-drag-slider__move,.browser-safari .project-drag-slider--dragging .project-drag-slider__move {
 cursor:-webkit-grabbing!important
}
.project-drag-slider__slide {
 position:relative;
 display:inline-block;
 height:100%
}
.project-drag-slider__image {
 height:100%;
 height:670px
}
@media only screen and (max-width:1600px) {
 .project-drag-slider__image {
  height:550px
 }
}
@media only screen and (max-width:1280px) {
 .project-drag-slider__image {
  height:450px
 }
}
@media only screen and (max-width:767px) {
 .project-drag-slider__image {
  height:220px
 }
}
.project-drag-slider__drag {
 position:absolute;
 top:50px;
 left:100%;
 margin-left:-35px;
 z-index:10;
 height:70px;
 line-height:70px;
 pointer-events:none;
 transition:transform 1.8s cubic-bezier(.55,0,.1,1),opacity 1.8s cubic-bezier(.55,0,.1,1);
 opacity:0;
 transform:scale(0)
}
.project-drag-slider__drag:before {
 position:absolute;
 top:0;
 left:0;
 display:inline-block;
 content:"";
 width:70px;
 height:70px;
 border-radius:50%;
 border:2px solid #444
}
.device-mobile .project-drag-slider__drag {
 opacity:1;
 top:150px;
 right:auto;
 left:70%;
 transform:scale(.5)
}
.project-drag-slider__drag--show {
 opacity:1;
 transform:scale(1);
 transition:transform .6s cubic-bezier(.55,0,.1,1),opacity .6s cubic-bezier(.55,0,.1,1)
}
.project-drag-slider__drag--hide {
 opacity:0!important;
 transform:scale(0)!important
}
.project-drag-slider__drag-icon {
 position:absolute;
 display:block;
 fill:#444;
 width:37px;
 height:12px;
 top:30px;
 left:18px;
 animation:drag-arrow 10s infinite
}
.project-drag-slider__drag-text {
 font-family:Graphik,helvetica,arial,sans-serif;
 font-size:1.4rem;
 line-height:1.6rem;
 position:absolute;
 fill:#444;
 padding-left:90px;
 top:27px
}
@keyframes drag-arrow {
 0%,to {
  transform:translateZ(0)
 }
 33% {
  transform:translate3d(-2px,0,0)
 }
 66% {
  transform:translate3d(2px,0,0)
 }
}
.project-infos {
 display:-ms-flexbox;
 display:flex;
 width:80%;
 max-width:1440px;
 -ms-flex-pack:justify;
 justify-content:space-between;
 margin:580px auto 0
}
@media only screen and (max-width:1920px) {
 .project-infos {
  max-width:1280px
 }
}
@media only screen and (max-width:1600px) {
 .project-infos {
  margin:540px auto 0
 }
}
@media only screen and (max-width:1400px) {
 .project-infos {
  margin:520px auto 0
 }
 .project-infos--personal-project .project-infos__section {
  -ms-flex:0 1 40%;
  flex:0 1 40%
 }
}
@media only screen and (max-width:1280px) {
 .project-infos {
  margin:500px auto 0
 }
}
@media only screen and (max-width:767px) {
 .project-infos {
  margin:0 auto;
  display:block;
  padding-top:50px;
  width:87%
 }
}
.project-infos--personal-project {
 max-width:900px
}
.project-infos-link,.project-infos__link,.project-infos__team-el {
 display:inline-block;
 position:relative
}
.project-infos-link a,.project-infos__link a,.project-infos__team-el a {
 position:relative
}
.device-desktop .project-infos-link:hover .project-info__underline,.device-desktop .project-infos__link:hover .project-info__underline,.device-desktop .project-infos__team-el:hover .project-info__underline {
 opacity:1;
 transform:none
}
.project-info__underline {
 position:absolute;
 display:block;
 width:100%;
 height:2px;
 padding:0;
 background-color:#ffdbc6;
 top:71%;
 margin-top:5px;
 opacity:0;
 transform:translate3d(0,3px,0);
 transition:transform .35s cubic-bezier(.55,0,.1,1),opacity .35s cubic-bezier(.55,0,.1,1)
}
.project-infos__section {
 -ms-flex:0 1 30%;
 flex:0 1 30%;
 font-family:Graphik,helvetica,arial,sans-serif;
 font-size:1.4rem;
 line-height:1.6rem;
 line-height:2.3rem;
 opacity:0
}
@media only screen and (max-width:767px) {
 .project-infos__section {
  margin-bottom:20px
 }
}
.project-infos__title {
 position:relative;
 display:inline-block;
 font-size:1rem;
 font-family:Graphik,helvetica,arial,sans-serif;
 letter-spacing:.4rem;
 text-transform:uppercase;
 margin-bottom:20px
}
@media only screen and (max-width:767px) {
 .project-infos__title {
  margin-bottom:10px
 }
}
.project-infos__title-block {
 position:absolute;
 display:block;
 top:20px;
 left:0;
 width:calc(100% + 10px);
 height:2px;
 transform-origin:left center
}
.project-infos__descriptions-text {
 max-width:280px
}
.project-infos__description-text {
 max-width:280px
}
.project-infos__team-el-name {
 position:relative;
 width:100%
}
.project-infos__link {
 font-weight:700
}
.project-loader {
 position:fixed;
 top:80vh;
 width:100%;
 text-align:center;
 color:#000;
 text-transform:uppercase;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
@media only screen and (max-width:767px) {
 .project-loader {
  top:auto;
  bottom:30px
 }
}
.project-loader__text {
 font-size:1rem;
 font-family:Graphik,helvetica,arial,sans-serif;
 letter-spacing:.4rem;
 text-transform:uppercase;
 display:inline-block;
 transform:translate3d(0,100%,0);
 opacity:0;
 margin-left:4px;
 font-size:.7rem
}
.project-loader__percent {
 position:fixed;
 top:100vh;
 right:50px;
 margin-top:-120px;
 font-family:Conqueror,helvetica,arial,sans-serif;
 font-size:6rem;
 font-weight:200;
 color:#ededed;
 opacity:0
}
@media only screen and (max-width:767px) {
 .project-loader__percent {
  font-size:2rem;
  margin-top:-100px;
  right:20px;
  color:#fff
 }
}
.project-mobile-scroll {
 position:absolute;
 left:50%;
 transform:translate3d(-50%,0,0);
 top:-40px;
 display:none
}
@media only screen and (max-width:767px) {
 .project-mobile-scroll {
  display:block
 }
}
.project-mobile-scroll__icon {
 width:10px;
 height:25px;
 fill:#fff;
 animation:mobile-arrow 10s infinite
}
@keyframes mobile-arrow {
 0%,to {
  transform:translateZ(0)
 }
 33.33% {
  transform:translate3d(0,-10px,0)
 }
 66.66% {
  transform:translate3d(0,10px,0)
 }
}
.project-next {
 position:relative;
 width:100%;
 height:295px;
 background:#fff;
 margin-top:200px;
 text-align:center;
 cursor:pointer;
 z-index:2;
 transition:background .2s cubic-bezier(.55,0,.1,1);
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
.device-desktop .project-next:hover .project-next__project-name {
 transform:scale(1.03);
 transition:transform 1s cubic-bezier(.19,1,.22,1)
}
.device-mobile .project-next,.device-tablet .project-next {
 background:#e2e2e2
}
@media only screen and (max-width:1280px) {
 .project-next {
  margin-top:100px
 }
}
@media only screen and (max-width:767px) {
 .project-next {
  margin-top:50px;
  height:160px
 }
}
.project-next>a {
 width:100%;
 height:100%;
 display:-ms-flexbox;
 display:flex;
 -ms-flex-align:center;
 align-items:center;
 -ms-flex-pack:center;
 justify-content:center;
 text-align:center;
 -ms-flex-direction:column;
 flex-direction:column;
 box-sizing:border-box;
 z-index:2
}
.project-next__title {
 font-size:1rem;
 font-family:Graphik,helvetica,arial,sans-serif;
 letter-spacing:.4rem;
 text-transform:uppercase;
 margin-top:20px;
 margin-left:5px
}
@media only screen and (max-width:767px) {
 .project-next__title {
  margin-top:10px
 }
}
.project-next__counter {
 font-family:Conqueror,helvetica,arial,sans-serif;
 font-size:8.4rem;
 font-weight:200;
 vertical-align:top;
 line-height:0;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 z-index:1;
 top:140px;
 left:145px
}
@media only screen and (max-width:1280px) {
 .project-next__counter {
  font-size:5rem
 }
}
@media only screen and (max-width:767px) {
 .project-next__counter {
  top:90px;
  left:20px;
  font-size:3.5rem
 }
}
@media only screen and (max-width:1280px) {
 .project-next__counter {
  top:110px;
  left:115px
 }
}
@media only screen and (max-width:767px) {
 .project-next__counter {
  top:70px;
  left:20px
 }
}
.project-next__title-block {
 width:40px;
 height:3px;
 margin:5px auto;
 animation:title-block 1.5s infinite .5s ease-out
}
.project-next__project-name {
 display:block;
 font-family:Graphik,helvetica,arial,sans-serif;
 z-index:-1;
 margin-top:15px;
 color:#f2f2f2;
 transition:transform 1s cubic-bezier(.19,1,.22,1);
 text-transform:uppercase;
 font-size:7vw;
 letter-spacing:2vw;
 font-weight:700
}
@media only screen and (max-width:767px) {
.menu--project .menu__link--about, .main-wrapper--project .aside-title  {

    opacity: 0 !important;
    visibility: visible !important;
}
.works.works--project{display:none}
.project-infos {
padding-top:100px
}
.project-infos__title{

    opacity: 0 !important;
    visibility: hidden !important;
}
 .project-next__project-name {
  font-size:1.5rem
 }
}
@keyframes title-block {
 0% {
  transform:scaleX(0);
  transform-origin:left
 }
 49.999% {
  transform:scaleX(1);
  transform-origin:left
 }
 50% {
  transform-origin:right
 }
 to {
  transform-origin:right;
  transform:scaleX(0)
 }
}
.project-overlay {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0,0,0,.5);
 z-index:1;
 opacity:0
}
.project-overlay--hide {
 display:none
}
.project-visual {
 position:relative;
 width:50%;
 max-width:1280px;
 margin:80px auto 0;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
.project-visual img {
 width:100%
}
@media only screen and (max-width:767px) {
 .project-visual {
  margin:45px auto 0
 }
}
@media only screen and (max-width:767px) and (orientation:portrait) {
 .project-visual {
  width:87%
 }
}
.project-visual__image,.project-visual__video {
 width:100%
}
.project-visual__vimeo {
 position:relative;
 width:100%
}
.project-visual__vimeo-iframe {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%
}
.transition-layer {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100vh;
 transform:scaleY(0) translateZ(0);
 transition:transform 1s cubic-bezier(.55,0,.1,1);
 z-index:1000;
 background:#fff
}
.transition-layer--expanded {
 transform:scaleY(1) translateZ(0);
 transition:transform .9s cubic-bezier(.19,1,.22,1) 0s
}
.works {
 position:absolute;
 transition:width 1s cubic-bezier(.19,1,.22,1),height 1s cubic-bezier(.19,1,.22,1),top .4s cubic-bezier(.19,1,.22,1),left 1s cubic-bezier(.19,1,.22,1),opacity 1s cubic-bezier(.55,0,.1,1);
 transition-delay:0;
 overflow:hidden
}
.works--project {
 height:300px;
 top:0;
 transition-delay:.7s
}
.works--about {
 pointer-events:none
}
.works--no-transition {
 transition:none
}
@media only screen and (max-width:767px) {
 .works {
  top:55px;
  left:0;
  width:100%;
  height:calc(100% - 55px)
 }
 .device-desktop .works {
  height:calc(100vh - 55px) !important;overflow-y: scroll;
 }
}
@media only screen and (max-width:467px) {
 .works {
  top:55px;
  left:0;
  width:100%;
  height:calc(100% - 55px)
 }
 .device-desktop .works {
  height:calc(100vh - 200px) !important;overflow-y: scroll;
 }
}
.works__list {
 height:100%;
 white-space:nowrap
}
.work {
 position:relative;
 display:-ms-inline-flexbox;
 display:inline-flex;
 text-align:center;
 overflow:hidden
}
.work,.work a {
 width:100%;
 height:100%;
 -ms-flex-align:center;
 align-items:center;
 -ms-flex-pack:center;
 justify-content:center
}
.work a {
 display:-ms-flexbox;
 display:flex;
 cursor:pointer
}
.works--project .work {
 overflow:visible;
 pointer-events:none
}
@media only screen and (max-width:767px) {
 .works--project .work .work__main-img-container {
  transform:translate3d(-50%,-55%,0) scale(1.3)
 }
}
.works--project .work .work__main-img-move-box {
 transform:none!important
}
.works--project .work .work__background-title-container {
 transform:translate3d(0,30px,0);
 transition:transform .5s cubic-bezier(.55,0,.1,1)
}
@media only screen and (max-width:1280px) {
 .works--project .work .work__background-title-container {
  transform:translate3d(0,70px,0)
 }
}
@media only screen and (max-width:767px) {
 .works--project .work .work__background-title-container {
  transform:none
 }
}
.work:hover .work__background-title {
 color:#fff
}
@media only screen and (max-width:767px) {
 .work {
  -ms-flex-align:end;
  align-items:flex-end
 }
}
.work__background-title-container {
 overflow:hidden;
 transition:transform .6s ease-out
}
@media only screen and (max-width:767px) {
 .work__background-title-container {
  margin-top:240px;
  margin-left:-7px
 }
}
.work__background-title {
 font-size:17rem;
 font-family:Graphik,helvetica,arial,sans-serif;
 text-transform:uppercase;
 font-weight:700;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 transition:color .4s cubic-bezier(.19,1,.22,1);
 color:#fff
}
@media only screen and (max-width:1920px) {
 .work__background-title {
  font-size:11vw
 }
}
.work__background-title div,.work__background-title span {
 margin-right:2.2vw
}
.work__background-title div:last-child,.work__background-title span:last-child {
 margin-right:0
}
@media only screen and (max-width:1280px) {
 .work__background-title div,.work__background-title span {
  margin-right:1.4vw
 }
}
.work__main-img-container {
 position:absolute;
 top:50%;
 left:50%;
 transform:translate3d(-50%,-50%,0);
 width:70%;
 max-width:1440px
}
@media only screen and (max-width:1920px) {
 .work__main-img-container {
  max-width:1280px
 }
}
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
 .work__main-img-container {
  width:90%
 }
}
@media only screen and (max-width:1024px) and (orientation:portrait) {
 .work__main-img-container {
  width:100%
 }
}
@media only screen and (max-width:767px) {
 .work__main-img-container {
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  transition:transform .6s cubic-bezier(.55,0,.1,1)
 }
}
.work__main-img-move-box {
 width:100%;
 height:100%;
 transition:transform .6s ease-out
}
.work__main-img {
 display:block;
 width:100%;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 pointer-events:none
}
@media only screen and (max-width:767px) {
 .work__main-img {
  transform:none!important
 }
}
.works-aside {
 font-size:1rem;
 font-family:Graphik,helvetica,arial,sans-serif;
 letter-spacing:.4rem;
 text-transform:uppercase;
 display:-ms-flexbox;
 display:flex;
 -ms-flex-align:center;
 align-items:center;
 position:absolute;
 right:45px;
 text-align:center;
 cursor:auto;
 transition:right .3s cubic-bezier(.55,0,.1,1) .3s;
 width:auto;
 height:auto;
 top:50vh;
 transform:translate3d(100%,-50%,0);
 z-index:3;
 opacity:0;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
.works-aside--about {
/* pointer-events:none */
}
@media only screen and (max-width:767px) {
 .works-aside--about {
  display:none
 }
}
.works-aside--project .works-aside__title {
 cursor:default;
pointer-events:none
}
@media only screen and (max-width:1280px) {
 .works-aside {
  right:30px
 }
 .main-wrapper--project .works-aside {
  right:25px
 }
}
@media only screen and (max-width:767px) {
 .works-aside {
  width:100%;
  text-align:center;
  margin-top:250px;
  top:50%;
  bottom:auto;
  right:auto;
  transform:none;
  -ms-flex-pack:center;
  justify-content:center
 }
}
.works-aside__title {
 position:relative;
 display:inline-block;
 transform:rotate(90deg) translate3d(-50%,0,0);
 transform-origin:left top 0;
 float:left;
 white-space:nowrap
}
.works-aside__title:after {
 content:"";
 position:absolute;
 display:none;
 width:100%;
 height:2px;
 padding:0 3px;
 background-color:#ffdbc6;
 top:100%;
 left:-3px;
 margin-top:5px;
 opacity:0;
 transform:translate3d(0,3px,0);
 transition:transform .35s cubic-bezier(.55,0,.1,1),opacity .35s cubic-bezier(.55,0,.1,1)
}
.device-desktop .works-aside__title:hover:after {
 opacity:1;
 transform:none
}
.works-aside__title:after {
 left:-4px
}
@media only screen and (max-width:767px) {
 .works-aside__title {
  transform:none;
  float:none;
  white-space:auto
 }
}
.works-aside__title-overlay {
	display:none;
 position:absolute;
 top:-4px;
 left:-9px;
 width:calc(100% + 13px);
 height:18px;
 background:#fff;
 transform:scaleY(0)
}
@media only screen and (max-width:767px) {
 .works-aside__title-overlay {
  left:50%;
  width:270px;
  margin-left:-135px
 }
}
.works-background {
 position:absolute;
 z-index:-1;
 background:#ffdbc6;
 transition:width .58s cubic-bezier(.19,1,.22,1),height 1.1s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1)
}
.works-background--no-transition {
 transition:none
}
.works-background--project {
 transform:translate3d(-100px,-100px,0);
 width:100%;
 height:300px;
 transition-delay:.3s
}
@media only screen and (max-width:1281px) {
 .works-background--project {
  transform:translate3d(-70px,-70px,0)
 }
}
@media only screen and (max-width:767px) {
 .works-background {
  top:55px;
  left:0;
  width:100%;
  height:calc(100% - 55px);
  transform:none
 }
 .device-desktop .works-background {
  height:calc(100vh - 55px)
 }
}
.works-counter {
 font-family:Conqueror,helvetica,arial,sans-serif;
 font-size:8.4rem;
 font-weight:200;
 vertical-align:top;
 line-height:0;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 z-index:1;
 position:absolute;
 top:155px;
 left:145px
}
@media only screen and (max-width:1280px) {
 .works-counter {
  font-size:5rem
 }
}
@media only screen and (max-width:767px) {
 .works-counter {
  top:90px;
  left:20px;
  font-size:3.5rem
 }
}
@media only screen and (max-width:1280px) {
 .works-counter {
  top:125px;
  left:115px
 }
}
@media only screen and (max-width:767px) {
 .works-counter {
  top:90px;
  left:20px
 }
}
.works-counter__overlay {
 position:absolute;
 top:-31px;
 left:-15px;
 width:330px;
 height:85px;
 background:#fff;
 z-index:2;
 transform-origin:left;
 transform:scaleX(0)
}
@media only screen and (max-width:1280px) {
 .works-counter__overlay {
  top:-24px;
  left:-12px;
  width:211px;
  height:62px
 }
}
@media only screen and (max-width:767px) {
 .works-counter__overlay {
  top:-18px;
  left:-12px;
  width:163px;
  height:45px
 }
}
.works-main-image {
 position:absolute;
 top:50%;
 left:50%;
 transform:translate3d(-50%,-50%,0);
 width:calc(100% - 200px);
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 -wbkit-user-select:none;
 transition:transform .7s cubic-bezier(.19,1,.22,1),top .7s cubic-bezier(.19,1,.22,1);
 pointer-events:none
}
.works-main-image--show {
 top:350px;
 transform:translate3d(-50%,-50%,0) scale(.85);
 transition:transform 1s cubic-bezier(.19,1,.22,1) .1s,top .7s cubic-bezier(.55,0,.1,1) .1s
}
@media only screen and (max-width:1280px) {
 .works-main-image {
  width:calc(100% - 140px)
 }
}
.foooldal{display:block;width:100%;height:100%}
.fooldal{float:left;width:33% !important;padding:1%}
.gomb1{padding:5px;border:0;line-height:20px;width:200px;}
.urlapi{width:500px;margin:0 auto}
.divke{display:block;width:50%;height:150px;float:left;text-align:left}
.divke1{display:block;width:50%;height:150px;float:left}
.gomb2{padding:5px;font-size:16px;text-transform:uppercase;width:500px;border:0;line-height:20px;background-color:grey;color:white;cursor:pointer}
.titleke{opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);top:30px;left:4%;display:inline-block;width:400px}
.titleke img{width:300px}
iframe{width:640px;height:480px;margin:0 auto;margin-top:30px}
@media only screen and (max-width:767px) {
 .works-main-image {
  display:none
 }
iframe{width:100%;height:480px;margin:0 auto;margin-top:30px}
.foooldal{display:block;width:100%;height:100%;vertical-align:middle}
.fooldal{float:left;width:33% !important;padding:1%;}
.works__list {height: 100% !important}
.about__description{margin:550px 0 100px 0 !important}
.about__descriptions{margin:0 !important}
.about__content{top:30px}
.about__contents{top:130px}
.gomb1{padding:5px;border:0;line-height:20px;width:100%;}
.urlapi{width:100%;margin:0 auto}
.divke{display:block;width:45%;height:150px;float:left;text-align:left}
.divke1{display:block;width:45%;height:150px;float:left;margin-left:5%}
.gomb2{padding:5px;font-size:16px;text-transform:uppercase;width:100%;border:0;line-height:20px;background-color:grey;color:white;cursor:pointer}
.titleke{opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);top:30px;left:4%;display:inline-block;width:100%}
.fenti{top:130px}
.titleke img{width:100%}
}
.tftf{background-position: center !important;}
@media only screen and (max-width:767px) and (orientation:landscape) {
.titleke {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
    top: 30px;
    left: 4%;
    display: inline-block;
    width: 300px;
}
.main-wrapper {
    overflow-y: scroll !important;
}
.about__contents{height:80% !important}
.about__container{top:30px !important;overflow-y: scroll;}
.about__description {
    margin:  0 !important;
}
.about__description {
    margin: 1000px 0 100px 0 !important;
}
.fenti{top:30px}
.tftf{background-position: top !important;}
.ztzt{margin: 0px 0 0px 340px !important;font-size: 12px;width: calc(100% - 340px) !important;}
}
.works-main-image__el {
 display:block;
 width:70%;
 max-width:1440px;
 margin:auto;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 -wbkit-user-select:none
}
@media only screen and (max-width:1920px) {
 .works-main-image__el {
  max-width:1280px
 }
}
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
 .works-main-image__el {
  width:90%
 }
}
@media only screen and (max-width:1024px) and (orientation:portrait) {
 .works-main-image__el {
  width:100%
 }
}
.works-progress-bar {
 position:absolute;
 left:0;
 bottom:0;
 width:100%;
 height:20px;
 cursor:pointer;
 transform:translate3d(0,100%,0);
 visibility:hidden;
 pointer-events:none;
 transition:transform .3s cubic-bezier(.55,0,.1,1)
}
.works-progress-bar--active {
 transform:none;
 visibility:visible;
 pointer-events:all;
 transition:transform .5s cubic-bezier(.55,0,.1,1) .5s
}
.works-progress-bar__el {
 position:absolute;
 left:0;
 bottom:0;
 width:100%;
 height:10px;
 background:rgba(68,68,68,.1);
 transform:scaleX(0) scaleY(0);
 transform-origin:left bottom
}
.works-progress-bar__shortcuts {
 position:absolute;
 left:0;
 bottom:0;
 width:100%;
 height:100%
}
@media only screen and (max-width:1280px) {
 .works-progress-bar__shortcuts {
  display:none
 }
}
.works-progress-bar__shortcut {
 width:20%;
 position:relative;
 display:inline-block;
 height:100%
}
.works-progress-bar__shortcut:last-child .works-progress-bar__shortcut-line {
 display:none
}
.works-progress-bar__shortcut-bg {
 position:absolute;
 bottom:0;
 left:0;
 width:100%;
 height:15px;
 background:rgba(68,68,68,.05);
 transform-origin:bottom;
 transform:scaleY(0)
}
.works-progress-bar__shortcut-line {
 display:block;
 position:absolute;
 bottom:-1px;
 opacity:.2;
 right:0;
 width:1px;
 height:41px;
 background:#000;
 transform-origin:bottom;
 transform:scaleY(0)
}
.works-progress-bar__shortcut-text-container {
 display:inline-block;
 position:absolute;
 top:-15px;
 left:5px;
 text-transform:uppercase;
 font-size:1rem;
 font-weight:700;
 color:#fff;
 letter-spacing:.2rem;
 white-space:nowrap;
 transform-origin:left;
 opacity:0;
 visibility:hidden;
 transform:translate3d(0,10px,0)
}
.works-progress-bar__shortcut-text {
 padding:5px;
 background:rgba(0,0,0,.1)
}



 .main {
     position: relative;
     width: 20%;
     float: left;
     margin: 0;
     height: calc(33vh - 46px);
     background-size: cover !important;
     background-position: center !important;
}
 .hover-mask {
     cursor:pointer;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 15px;
     display: flexbox;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     -webkit-justify-content: center;
     -ms-justify-content: center;
     justify-content: center;
     -webkit-align-items: center;
     -ms-align-items: center;
     align-items: center;
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
     color: rgba(255, 255, 255, 0.8);
}
 .hover-mask>h1 {
     opacity: 0;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease;
}
 .main:hover .hover-mask h1 {
     opacity: 1;
}
 .main:hover .category-link {
     opacity: .3;
}
 .category-link {
     overflow: hidden;
     opacity: .1;
     background-color: #000;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flexbox;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease;
}








 .mains {
     position: relative;
     float: left;
     margin: 0;
     background-size: cover !important;
     background-position: top !important;
}
 .hover-masks {
     cursor:pointer;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 15px;
     display: flexbox;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     -webkit-justify-content: center;
     -ms-justify-content: center;
     justify-content: center;
     -webkit-align-items: center;
     -ms-align-items: center;
     align-items: center;
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
     color: rgba(255, 255, 255, 0.8);
}
 .hover-masks>h1 {
     opacity: 0;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease;
}
 .mains:hover .hover-masks h1 {
     opacity: 1;
}
 .mains:hover .category-links {
     opacity: .3;
}
 .category-links {
     overflow: hidden;
     opacity: .1;
     background-color: #000;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flexbox;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease;
}

.square {
  position: relative;
  width: 100%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.square .content {
  position: absolute;
  width: 100%;
  height: 100%;
 background-size: cover !important;
}


.a4meret {
  position: relative;
  width: 100%;
}

.a4meret:after {
  content: "";
  display: block;
  padding-bottom: 141%;
}

.a4meret .content {
  position: absolute;
  width: 100%;
  height: 100%;
 background-size: 100% !important;
 background-repeat: no-repeat !important;
}

.aside-title {
	display: none;
}

@media only screen and (max-width:767px) and (orientation:portrait) {
.tftf{background-position: left !important;}
}