body { font: 12px/1.66em 'HelveticaNeue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: font-size 1s;
    -moz-transition: font-size 1s;
    -ms-transition: font-size 1s;
    -o-transition: font-size 1s;
    transition: font-size 1s;
}

a { cursor: pointer; }
a:hover { text-decoration: none; }
h1 { font: 36px/28px 'HelveticaNeue-CondensedBlack', Arial, sans-serif; text-transform: uppercase; }
h2 { font: 18px/.73em 'HelveticaNeue-CondensedBold', Arial, sans-serif; text-transform: uppercase; margin: 20px 0; }
h3 { font: 13px/10px 'HelveticaNeue-CondensedBold', Arial, sans-serif; text-transform: uppercase; margin-top: 20px; }
p { margin: 10px 0; }

.hn { font-family: 'HelveticaNeue', Arial, sans-serif; }
.hn-condbold { font-family: 'HelveticaNeue-CondensedBold', Arial, sans-serif; text-transform: uppercase; }
.hn-condblack { font-family: 'HelveticaNeue-CondensedBlack', Arial, sans-serif; text-transform: uppercase; }
.b { font-family: 'Bebas', Arial, sans-serif; }
.bn { font-family: 'BebasNeue', Arial, sans-serif; }

.bg-light { background-color: #748285 !important; }
.txt-light { color: #748285 !important; }
.brdr-light { border-color: #748285 !important; }
.brdr-light:after,
.brdr-light:before { border-color: #748285 !important; }
.bg-avg { background-color: #3c4445 !important; }
.txt-avg { color: #3c4445 !important; }
.brdr-avg { border-color: #3c4445 !important; }
.bg-dark { background-color: #202628 !important; }
.txt-dark { color: #202628 !important; }
.brdr-dark { border-color: #202628 !important; }
.bg-white { background-color: #ffffff !important; }
.txt-white { color: #ffffff !important; }
.brdr-white { border-color: #ffffff !important; }
.txt-green { color: #b7f425 !important; }
.brdr-green { border-color: #b7f425 !important; }


a { text-decoration: none; }

.left { float: left; position: relative; }
.right { float: right; position: relative; }
.table { display: table; width: 100%; height: 100%; position: relative; }
.table .row { display: table-row; }
.table .row.full,
.table .cell.full { height: 100%; }
.table .cell { display: table-cell; -position: relative; }
.table .cell .cell-wrapper { position: relative; width: 100%; height: 100%; }
.table .cell.v-top { vertical-align: top; }
.table .cell.v-middle { vertical-align: middle; }
/*.table .cell.sidebar + .cell { height: 100%; }*/

#wrapper { position: absolute; left: 0; top: 0; height: 100%; /*min-height: 650px;*/ width: 100%; /*min-width: 1000px;*/ overflow: hidden; }
#wrapper-inner { width: 100%; height: 100%; }
.sidebar { width: 120px; }


#menu { position: absolute; left: 0; top: 0; height: 100%; z-index: 1000;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all .25s linear;
    transition: all .25s linear;
}
#menu.hide{
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
#menu .menu-icon { position: absolute; right: 10px; top: 10px; }
#menu .header { position: absolute; top: 80px; left: 0; width: 100%; height: 0; z-index: 10; text-align: center; }
#menu .header .logo-link { display: inline-block; }
#menu .menu { position: relative; width: 100%; height: 100%; }
#menu .menu ul { }
#menu .menu ul li { margin: 20px 0; text-align: center; }
#menu .menu ul li a { display: inline-block; color: #3c4445;
    -webkit-transition: color .25s linear;
    transition: color .25s linear;
}
#menu .menu ul li a .svg { width: 28px; height: 28px; }
#menu .menu ul li a .svg path { fill: currentColor; }
#menu .menu ul li a .head { margin-left: 2px; }
#menu .menu ul li a .camera {margin-left: 5px; margin-top: 2px; }

#menu .menu ul li a:hover,
#menu .menu ul li.active a { color: #b7f425; }
#menu .footer { position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #394244; }
#menu .footer .logo-block { padding: 8px; }
#menu .footer .logo-block .svg path { fill: #3c4445; }

#share { position: absolute; left: 0; bottom: 25px; width: 100%; z-index: 1000; opacity: 1; height: 30px;
    -webkit-transition: all .25s linear .25s;
    transition: all .25s linear .25s;
}
#share.hide { opacity: 0; bottom: -25px;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
#share .share-wrapper { text-align: center; }
#share .share-wrapper .label { display: inline-block; font-size: 11px; line-height: 1em; margin-right: 10px; letter-spacing: .05em; vertical-align: top; margin-top: 5px; }



.logo-block .svg { width: 24px; height: 16px; float: left; margin-right: 5px; }
.logo-block .svg path { fill: #ffffff; /*fill: #3c4445;*/ }
.logo-block .copyright { font-size: 7px; font-weight: bold; line-height: 6px; text-transform: uppercase; }
.logo-block .copyright span { display: block; }
.logo-block .copyright span:first-child { margin-bottom: 4px; }

#content { position: absolute; top: 0; height: 100%; width: 100%; }
#scroll { position: absolute; bottom: 0; height: 15px; background: #888888; overflow: hidden; }

#projects { position: relative; width: 100%; height: 100%; }
#project { position: absolute; z-index: 100; width: 100%; height: 100%; left: 0; top: 0; }
#project-wrapper { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; overflow: hidden; }
#list > .mCustomScrollBox > .mCSB_scrollTools { height: 15px; background: #202628; opacity: 1; z-index: 100; bottom: 0;
    -webkit-transition: all .75s linear;
    transition: all .75s linear;
}
#list > .mCustomScrollBox > .mCSB_scrollTools.hide { bottom: -15px; }
#list > .mCustomScrollBox > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { height: 14px; border-top: 1px solid #465556; background: #3d4a4b; margin: 0; border-radius: 0; }
#list > .mCustomScrollBox > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar .scroll-counter { display: block; font-size: 8px; line-height: 14px; text-align: right; padding-right: 5px; }
#list > .mCustomScrollBox > .mCSB_scrollTools .mCSB_draggerRail { display: none; }

#list { position: absolute; width: 100%; height: 100%; box-sizing: border-box; overflow: auto; }
#list .project-list { /*position: relative; width: 500px; height: 500px; overflow: hidden;*/ overflow: hidden; }
/*#projects .project.hover .project-preview { cursor: pointer; position: absolute; width: 100%; height: 100%; }*/

/**/
#index { position: absolute; width: 100%; height: 100%; }
#index .index-details { position: relative; width: 100%; height: 100%; }
#index .index-details .video-background { position: absolute; width: 100%; height: 100%; }
#index .index-details .video-showreel { position: absolute; width: 100%; height: 100%; }

#index iframe { height: 100%; width: 100%; }
#index .video-overlay { text-align: center; opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .25s linear .25s;
    transition: all .25s linear .25s;
}
#index .video-overlay.hide { opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
}
#index .year-vp { position: relative; width: 405px; margin: 0 auto; margin-top: -16px; margin-bottom: 39px; }
#index .year-vp .small { font-size: .77em; line-height: 1em; position: relative; top: 45px; letter-spacing: .12em; }
#index .year-vp span { display: block; }
#index .short { font-size: 1.85em; line-height: .71em; }
#index .dash { width: 10px; border-width: 2px; }
#index .logo { position: absolute; right: 40px; bottom: 25px; }
#index .video-overlay .timeline-wrapper { margin: 47px 0; }
#index .data-container {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iNzglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuOCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -webkit-linear-gradient(top, rgba(16, 20, 22, 0.4) 0%,rgba(14, 19, 20, 0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top, rgba(16, 20, 22, 0.4) 0%,rgba(14, 19, 20, 0.9) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(16, 20, 22, 0.4) 0%, rgba(14, 19, 20, 0.9) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); /* W3C */    
}
#index .video-overlay .timeline-action,
#index .video-overlay .timeline-action .play-video > div,
#index .video-overlay .timeline-action:hover .play-video .svg polygon {
    transition: all .25s;
}
#index .video-overlay .timeline-action .play-video { margin-top: 0; font-size: 1em; line-height: .75em; height: 9px; }
#index .video-overlay .timeline-action .play-video .svg { width: 7px; height: 9px; }
#index .video-overlay .timeline-action .play-video .svg polygon { fill: #ffffff; }
#index .video-overlay .timeline-action:hover .play-video > div {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
#index .video-overlay .timeline-action:hover { background: #ffffff; border-color: #ffffff; }
#index .video-overlay .timeline-action:hover .play-video > div { color: #202628 !important; }
#index .video-overlay .timeline-action:hover .play-video .svg polygon { fill: #202628; }

.video-background .video-container video { height: auto; width: 100%;
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    -moz-transform: translate(-50%, -50%) scale(1.1);
    -ms-transform: translate(-50%, -50%) scale(1.1);
    -o-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
}
.video-background .video-container.invert video {height: 100%; width: auto;}

/*=== contacts begin ===*/
#contacts { position: absolute; z-index: 100; width: 100%; height: 100%; }
#contacts .text-container {  }
#contacts .text-container .text-wrapper { padding-top: 80px; padding-bottom: 20px; }
#contacts .text-container .form-wrapper { margin-top: 40px; position: relative; }
#contacts .form-wrapper form { opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contacts .form-wrapper .success { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff; opacity: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contacts .form-wrapper.sent form { opacity: 0;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}
#contacts .form-wrapper.sent .success { opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
#contacts .text-container .title { font-size: 36px; }
#contacts .text-container p { margin: 20px 0; font-size: 14px; }
#contacts .text-container b { margin-bottom: 5px; display: inline-block; }
#contacts .map-container {  }
#contacts .map-container .pin { position: absolute; width: 28px; height: 40px; left: 50%; top: 50%; margin: -40px 0 0 -14px; background: url(../imgs/sprite.png) no-repeat -200px 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contacts .map-container .pin.hide{
    -webkit-transform: translateY(-1000px);
    -ms-transform: translateY(-1000px);
    transform: translateY(-1000px);
}
#contacts .map-container .pin span { margin-left: 35px; display: block; white-space: nowrap; }
#contacts .map-container .pin span.coords-text { font: .77em/.7em 'HelveticaNeue-CondensedBold', Arial, sans-serif; text-transform: uppercase; margin-bottom: 4px; }
#contacts .map-container .pin span.coords { font: 2.8em/.8em 'BebasNeue', Arial, sans-serif; text-transform: uppercase; }
/*=== contacts end ===*/

/*=== contacts begin ===*/
#about { position: absolute; width: 100%; height: 100%; }
#about .v-slider { position: absolute; height: 100%; margin-right: -16px; overflow-x: hidden; overflow-y: scroll; }
/*#about .v-slider-wrapper { position: relative; }*/
#about .v-slider .v-slider-wrapper { position: relative; }
#about .v-slider .slide { position: relative; width: 100%; -height: 100%; }
#about .v-slider .slide .pager-link-wrapper { position: absolute; bottom: 25px; width: 100%; text-align: center; }
#about .v-slider .slide .pager-link { display: inline-block; margin: 0 auto; text-align: center; text-transform: uppercase; font-size: .9em; letter-spacing: .1em; z-index: 100; color: #ffffff; }
#about .v-slider .slide .pager-link:hover { color: #b7f425;
    -webkit-transition: color .25s linear;
    transition: color .25s linear;
}
#about .v-slider .slide .pager-link .round { display: block; width: 48px; height: 48px; border-width: 2px; border-style: solid; border-color: #ffffff; border-radius: 60px; margin: 11px auto;
    -webkit-transition: border-color .25s linear;
    transition: border-color .25s linear;
}
#about .v-slider .slide .pager-link:hover .round { border-color: #b7f425; }
#about .v-slider .slide .pager-link .round > svg { margin: 20px auto; width: 20px; height: 12px; }
#about .v-slider .slide .pager-link .round > svg g { fill: currentColor; }
#about .v-slider .slide-1 { background: url(../imgs/bg-about-1.jpg) no-repeat right 0; background-size: cover; }
#about .v-slider .slide-2 { background: url(../imgs/bg-about-2.jpg) no-repeat right 0; background-size: cover; }
#about .v-slider .slide-3 { background: url(../imgs/bg-about-3.jpg) no-repeat right 0; background-size: cover; }
#about .v-slider .pager { position: fixed; top: 50%; right: 40px; z-index: 100; margin-top: -49px; padding: 10px; }
#about .v-slider .pager:hover > a { opacity: 1; }
#about .v-slider .pager > a { display: block; width: 5px; height: 5px; margin: 10px 0; border-radius: 6px; border-width: 1px; border-style: solid; opacity: .35;
    -webkit-transition: opacity .4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: opacity .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#about .v-slider .pager > a.active { background: #ffffff; }
#about .v-slider .pager > a:hover { border-width: 2px; width:3px; height: 3px; }
#about .text-container { width: 100%; }
#about .text-container .dash { margin: 25px auto; width: 10px; }
#about .text-container .title-wrapper { width: 100%; }
#about .text-container .title { font-size: 6em; line-height: .73em; text-align: center; margin-bottom: 42px; }
#about .text-container .subtitle { margin-bottom: 25px; text-align: center; }
#about .text-container .subtitle img { width: 30px; }
#about .text-container .text { width: 55%; font-size: 23px; line-height: normal; text-align: center; margin: 0 auto; }
#about .text-container .text a { border-bottom: none; }
#about .columns { text-align: center; }
#about .columns .column { display: inline-block; vertical-align: top; padding-top: 20px; }
#about .columns .column.center { border-width: 4px; border-style: solid; border-top: none; border-bottom: none; }
#about .columns .column img { margin-bottom: 25px; }
#about .columns .column p { width: 70%; margin: 0 auto; font-size: 14px; line-height: normal; }
#about .columns .column .dash { margin: 20px auto; }
#about h3 { font-size: 2.77em; line-height: .69em; margin: 20px 0; }
#about .tiles { width: 100%; }
#about .tiles .tile.col-span-1 { width: 20% }
#about .tiles .tile.col-span-2 { width: 40% }
#about .tiles .tile { float: left; position: relative; outline: 1px solid #edeeee; }
#about .tiles .tile img { position: relative; left: 50%; top: 50%; display: block;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#about .slide-3 .text-container .title-wrapper { margin-top: -50px; }
#about .slide-4 .text-container .text { width: 70%; text-align: center; font-size: 24px; line-height: 32px; }
#about .slide-4 .text-container .text a { color: #ffffff; }
/*=== contacts end ===*/

/*=== project preview begin ===*/
.project-list {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all .8s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all .8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.project-list.hide {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}
.project-list:hover .project-preview,
.project-list.hover-permanent .project-preview { opacity: .2; }
.project-list:hover .project-preview:hover,
.project-list.hover-permanent .project-preview.hover-permanent { opacity: 1; }
.project-list:hover .project-preview:hover .video-overlay,
.project-list.hover-permanent .project-preview.hover-permanent .video-overlay { background: none; }

.project-list.inactive:hover .project-preview { opacity: 1; }
.project-list.inactive:hover .project-preview .video-overlay {
    background: linear-gradient(to bottom, rgba(16, 20, 22, 0.3) 0%, rgba(14, 19, 20, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); /* W3C */
}

.project-preview { position: relative; display: block; width: 100px; height: 100px; float: left; overflow: hidden; cursor: pointer; opacity: 1; }
.project-preview .timeline-wrapper { position: absolute; left: 0; bottom: 41px; z-index: 100; width: 100%; padding: 0 30px; box-sizing: border-box; opacity: 0;
    -webkit-transition: all .25s;
    transition: all .25s;
}
.project-preview .timeline-wrapper .timeline { width: 100%; display: table; }
.project-preview .timeline .progress-wrapper { width: 100%; display: table-cell; vertical-align: bottom; }
.project-preview .timeline .progress { height: 0; border-top: 2px solid #b7f425; }
.project-preview .timeline .counter-wrapper { display: table-cell; position: relative; }
.project-preview .timeline .counter { position: relative; top: 2px; margin-left: 5px; font: 13px/13px 'HelveticaNeue-CondensedBold', Arial, sans-serif; color: #ffffff; text-transform: uppercase; letter-spacing: .05em; }

.project-preview .info { position: relative; z-index: 100; text-transform: uppercase; text-align: center; letter-spacing: .05em; padding-bottom: 25px; margin-top: 18px; }
.project-preview .info:after { content: ''; position: absolute; width: 10px; height: 0; border-top: 2px solid #b7f425; bottom: 0; left: 50%; margin-left: -6px; opacity: 1;
    transition: all .25s;
}
.project-preview.hover .info:after { opacity: 0; }
.project-preview .info .logo { height: 1px; position: relative; margin-bottom: 60px; }
.project-preview .info .logo img { position: absolute; left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(.6);
    -moz-transform: translate(-50%, -50%) scale(.6);
    -ms-transform: translate(-50%, -50%) scale(.6);
    -o-transform: translate(-50%, -50%) scale(.6);
    transform: translate(-50%, -50%) scale(.6);
}
.project-preview .info .category { font: 12px/.78em 'HelveticaNeue-CondensedBlack', Arial, sans-serif; color: #b7f425; margin: 10px 0; }
.project-preview .info .title { font: 18px/22px 'HelveticaNeue-CondensedBlack', Arial, sans-serif; color: #ffffff; padding: 0 30px; }
.project-preview .info .view { position: relative; height: 27px; border: 2px solid #ffffff; border-radius: 27px; display: inline-block; font: 10px/26px 'HelveticaNeue-CondensedBlack', Arial, sans-serif; color: #ffffff; padding: 0 14px; margin-top: 25px; }
.project-preview .info .view .label { display: block; width: 0; overflow: hidden;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
}
.project-preview .info .view .play { position: absolute; top: 10px; right: 10px; width: 5px; height: 7px; }
.project-preview .info .view .play polygon { fill: #b7f425; }
.project-preview.hover .info .view { width: auto; padding-right: 24px; }
.project-preview.hover .info .view .label { width: 50px; }
.project-preview.hover .timeline-wrapper { opacity: 1; }
.project-preview .video-container video { height: 100%; width: auto; opacity: .5;
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    -moz-transform: translate(-50%, -50%) scale(1.1);
    -ms-transform: translate(-50%, -50%) scale(1.1);
    -o-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
}
.project-preview.hover .video-container video { opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}
.project-preview.fade .video-container video { opacity: .2;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}
.project-preview .video-overlay { height: 100%; position: absolute; width: 100%; z-index: 100;
    background: linear-gradient(to bottom, rgba(16, 20, 22, 0.3) 0%, rgba(14, 19, 20, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); /* W3C */
}
/*=== project preview end ===*/

/*
#menu .menu ul li a { display: inline-block; color: #3c4445;
    -webkit-transition: color .25s linear;
    transition: color .25s linear;
}
#menu .menu ul li a .svg { width: 28px; height: 28px; }
#menu .menu ul li a .svg path { fill: currentColor; }
*/


/*=== project detail begin ===*/
.project-detail { position: relative; width: 100%; height: 100%; background: rgba(0,0,0,.5); }
.project-detail [href='#projects'] { position: absolute; top: 20px; right: 20px; z-index: 100; color: #ffffff;
    -webkit-transition: color .25s linear;
    transition: color .25s linear;
}
.project-detail [href='#projects']:hover { color: #b7f425; }
.project-detail [href='#projects'] svg { width: 24px; height: 24px; }
.project-detail [href='#projects'] svg polygon { fill: currentColor; }

.project-detail .text-container { position: relative; background: #ffffff; z-index: 10;
    -webkit-transition: all .25s linear;
    transition: all .25s linear;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.project-detail .text-container.hide {
    -webkit-transform: translateX(-125%);
    -ms-transform: translateX(-125%);
    transform: translateX(-125%);
}
.project-detail .text-container p { font-size: 14px; line-height: 22px; margin: 15px 0; }
.project-detail .text-container .category { font-size: 11px; line-height: 0.7em; letter-spacing: 0.07em; margin-bottom: 5px; text-transform: uppercase; }
.text-container .title { font-size: 24px; letter-spacing: 0.02em; line-height: 26px;  margin-bottom: 17px; text-transform: uppercase; }
.project-detail .text-container .subtitle { font-size: 16px; letter-spacing: 0.025em; line-height: 0.7em; margin-bottom: 1.3em; text-transform: uppercase; }
.project-detail .text-container .description { position: relative; }
.project-detail .text-container .fb-like { margin: 7px 0 0; }
.project-detail .text-container .feedback { background: #f4f6f6; padding: 50px; }
.project-detail .text-container .feedback .quote-asset { display: block; margin: 0 auto; }
.project-detail .text-container .feedback .quote-asset.top { margin-bottom: 37px; }
.project-detail .text-container .feedback .quote-asset.bottom { margin-top: 45px;
    transform: rotate(180deg);
}
.project-detail .text-container .feedback .author { margin-bottom: 20px; text-align: center; }
.project-detail .text-container .feedback .author .photo { display: inline-block; width: 76px; height: 76px; border-radius: 38px; overflow: hidden; margin-right: 17px; }
.project-detail .text-container .feedback .author .photo img { width: 100%; height: auto; }
.project-detail .text-container .feedback .author .info { display: inline-block; vertical-align: top; text-align: left; width: 150px; }
.project-detail .text-container .feedback .author .name { font-size: 14px; line-height: 24px; margin-top: 8px; }
.project-detail .text-container .feedback .author .post { font-size: 11px; line-height: 16px; }

.project-detail .video-overlay { position: relative; background: none;
    -webkit-transition: all .25s linear;
    transition: all .25s linear;
}
.project-detail .video-overlay.hide { opacity: 0; visibility: hidden; }
.project-detail .video-overlay .info { position: relative; -top: 100px; -z-index: 100; text-transform: uppercase; text-align: center; }
.project-detail .video-overlay .info .logo { -height: 0; -position: relative; }
.project-detail .video-overlay .info .logo img { -position: absolute; -bottom: 0; -left: 50%;
    /*-webkit-transform: translateX(-50%);*/
    /*-moz-transform: translateX(-50%);*/
    /*-ms-transform: translateX(-50%);*/
    /*-o-webkit-transform: translateX(-50%);*/
    /*transform: translateX(-50%);*/
    display: block;
    margin: 0 auto;
    width: 130px;
}
.project-detail .video-overlay .info .title { font: 6em/.73em 'HelveticaNeue-CondensedBlack', Arial, sans-serif; letter-spacing: .01em; margin-top: 30px; margin-bottom: 20px; }
.project-detail .video-overlay .info .subtitle { font: 1.42em/.71em 'HelveticaNeue-CondensedBold', Arial, sans-serif; margin-bottom: 30px; letter-spacing: .05em; }
.project-detail .video-overlay .info .credits-wrapper .dash { margin: 0 auto; }
.project-detail .video-overlay .info .credits { position: relative; height: 150px; overflow: hidden; padding: 30px 0; }
.project-detail .video-overlay .info .credits  .frame:first-child .slide:first-child { padding-top: 47px; }
.project-detail .video-overlay .info .credits ul li .post { font-size: 12px; line-height: .7em; margin-bottom: 10px; }
.project-detail .video-overlay .info .credits ul li .name { font-size: 18px; line-height: .7em; margin-bottom: 30px; }
.project-detail .video-overlay .info .credits ul li .name > div { margin-bottom: 10px; }
.project-detail .video-overlay .info .credits ul li { opacity: 1;
    -webkit-transition: opacity .5s linear;
    transition: opacity .5s linear;
}
.project-detail .video-overlay .info .credits ul li.hide { opacity: 0; }

.project-detail .video-overlay .timeline-wrapper { margin-top: 30px; }
/*=== project detail end ===*/


.data-container { z-index: 100; }
.video-container { z-index: 50; }
.play .data-container { z-index: 50; }
.play .video-container { z-index: 100; }

.data-container {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iNzglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuOCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -webkit-linear-gradient(top, rgba(16, 20, 22, 0.4) 0%,rgba(14, 19, 20, 0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top, rgba(16, 20, 22, 0.4) 0%,rgba(14, 19, 20, 0.9) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(16, 20, 22, 0.4) 0%, rgba(14, 19, 20, 0.9) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); /* W3C */
}

.text-container { position: relative;  width: 30%; }
.text-container .text a { color: #202628; border-bottom: 1px solid #202628; }
.text-container .text a:hover { border-bottom: none; }
.text-container .text-wrapper { padding: 1px 48px 48px 48px; position: relative; }
.text-container .scrollable { position: relative; overflow: auto; height: 100%; }
.text-container .scrollable > .mCustomScrollBox > .mCSB_container { margin-right: 0; }
.text-container .scrollable > .mCustomScrollBox > .mCSB_scrollTools { width: 15px; }
.text-container .scrollable > .mCustomScrollBox > .mCSB_scrollTools > .mCSB_draggerContainer { background: #ececec; }
.text-container .scrollable > .mCustomScrollBox > .mCSB_scrollTools > .mCSB_draggerContainer > .mCSB_draggerRail { display: none; }
.text-container .scrollable > .mCustomScrollBox > .mCSB_scrollTools > .mCSB_draggerContainer > .mCSB_dragger > .mCSB_dragger_bar { width: 100%; border-radius: 0; background: #d6d6d7; }
/*.text-container .title-wrapper { position: absolute; bottom: 100%; }*/


.container { position: absolute; width: 100%; height: 100%; }

.text-container .text-wrapper { padding: 60px 50px 50px 50px; }

/*=== video container */
.video-container { position: absolute; width: 100%; height: 100%; top: 0; }
.video-container .canvas { position: absolute; width: 100%; height: 100%; }
.video-container .canvas .top-bar { position: absolute; top: 0; left: 0; width: 100%; opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .25s linear .1s;
    transition: all .25s linear .1s;
}
.video-container .canvas .top-bar.hide { opacity: 0;
    -webkit-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
}
.video-container .canvas .bottom-bar { position: absolute; bottom: 0; left: 0; width: 100%; opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .25s linear .1s;
    transition: all .25s linear .1s;
}
.video-container .canvas .bottom-bar.hide { opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
}

.video-container .canvas .menu-icon { position: absolute; left: 26px; top: 21px; }
.video-container .canvas .menu-icon span { background-color: #ffffff;
    -webkit-transition: background-color .25s linear;
    transition: background-color .25s linear;
}
.video-container .canvas .menu-icon:hover span { background-color: #b7f425; }
.video-container .canvas .logo-block { position: absolute; left: 24px; bottom: 24px; width: 100px; }
/*.video-container .canvas .pause-menu { width: 24px; position: absolute; left: 26px; top: 21px; }*/
/*.video-container .canvas .pause-menu span { display: block; height: 3px; margin-bottom: 4px; }*/
.video-container video { outline: none; position: relative; left: 50%; top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.video-container iframe { position: relative; width: 100%; height: 100%; left: 50%; top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.video-container .controls { position: absolute; right: 24px; bottom: 24px; z-index: 100; }
.video-container .controls > a { display: block; float: left; margin-left: 10px; color: #ffffff;
    -webkit-transition: color .25s linear;
    transition: color .25s linear;
}
.video-container .controls > a:hover { color: #b7f425; }
.video-container .controls > a svg { width: 36px; height: 36px; }
.video-container .controls > a svg g { fill: currentColor; }
.video-container .controls > a svg.enable { display: block; }
.video-container .controls > a svg.disable { display: none; }
.video-container .controls > a.disable svg.enable { display: none; }
.video-container .controls > a.disable svg.disable { display: block; }
.canvas:-webkit-full-screen { width: 100%; top: 0; }
.canvas:-moz-full-screen { width: 100%; top: 0; }
.canvas:-ms-full-screen { width: 100%; top: 0; }

/*=== video overlay */
.video-overlay { vertical-align: middle;
/*    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iNzglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuOCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -webkit-linear-gradient(top, rgba(16, 20, 22, 0.4) 0%,rgba(14, 19, 20, 0.9) 100%);
    background: -ms-linear-gradient(top, rgba(16, 20, 22, 0.4) 0%,rgba(14, 19, 20, 0.9) 100%); 
    background: linear-gradient(to bottom, rgba(16, 20, 22, 0.4) 0%, rgba(14, 19, 20, 0.9) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
*/
}
.video-overlay .timeline-wrapper {  }
.video-overlay .timeline-action { display: inline-block; padding: 16px 25px; border: 2px solid #ffffff; border-radius: 36px; text-transform: uppercase;
    -webkit-transition: border-color .25s linear;
    transition: border-color .25s linear;
}
.video-overlay .timeline-action:hover { border-color: #b7f425; }
.video-overlay .timeline-action .counter { font: 1.75em/.62em 'HelveticaNeue-CondensedBold', Arial, sans-serif; float: left; letter-spacing: .03em; margin-right: 5px; }
.video-overlay .timeline-action .action { float: right; position: relative; }
.video-overlay .timeline-action .progress { width: 100%; height: 2px; background: #ffffff; position: absolute; left: 0; top: 0; }
.video-overlay .timeline-action .progress .current { position: relative; height: 2px; width: 100%; background: #b7f425; }
.video-overlay .timeline-action .play-video { position: relative; font: .75em/.58em 'HelveticaNeue-CondensedBlack', Arial, sans-serif; letter-spacing: .08em; text-align: left; display: block; margin-top: .8em; height: 7px; overflow: hidden; }
.video-overlay .timeline-action .play-video > div { padding-bottom: 3px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: transform .25s linear;
    transition: transform .25s linear;
}
.video-overlay .timeline-action .play-video img,
.video-overlay .timeline-action .play-video svg { display: inline-block; margin-left: 7px; width: 5px; height: 7px; }
.video-overlay .timeline-action .play-video svg polygon { fill: #b7f425; }
.video-overlay .timeline-action:hover .play-video > div{
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}

#details { position: absolute; height: 100%; z-index: 100; }
#details .description { position: absolute; height: 100%; background: #ffffff; }
#details .video { position: absolute; height: 100%; }

.col-span-1 { width: 7.14%; }
.col-span-2 { width: 14.28%; }
.col-span-3 { width: 21.42%; }
.col-span-4 { width: 28.56%; }
.col-span-5 { width: 35.7%; }
.col-span-6 { width: 42.84%; }
.col-span-7 { width: 49.98%; }
.col-span-8 { width: 57.12%; }
.col-span-9 { width: 64.26%; }
.col-span-10 { width: 71.4%; }
.col-span-11 { width: 78.54%; }
.col-span-12 { width: 85.68%; }
.col-span-13 { width: 92.82%; }
.col-span-14 { width: 100%; }

.col-margin-1 { left: 7.14%; }
.col-margin-3 { left: 21.42%; }

.col-13 {}
.col-13 .col-span-1 { width: 7.69%; }
.col-13 .col-span-2 { width: 15.38%; }
.col-13 .col-span-3 { width: 23.07%; }
.col-13 .col-span-4 { width: 30.76%; }
.col-13 .col-span-5 { width: 38.45%; }
.col-13 .col-span-6 { width: 46.14%; }
.col-13 .col-span-7 { width: 53.83%; }
.col-13 .col-span-8 { width: 61.52%; }
.col-13 .col-span-9 { width: 69.21%; }
.col-13 .col-span-10 { width: 76.9%; }
.col-13 .col-span-11 { width: 84.59%; }
.col-13 .col-span-12 { width: 92.28%; }
.col-13 .col-span-13 { width: 100%; }
.col-13 .col-margin-1 { margin-left: 7.69%; }

.project.hover video {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
}


/* transitions */

video {
    position: absolute;
    transition: all .25s;
}


/*=== FILTER begin ===*/
#filter { position: absolute; top: 0; height: 3.5em; width: 100%; z-index: 1000; font: 12px/3.5em 'HelveticaNeue-CondensedBlack', Arial, sans-serif; letter-spacing: .045em; text-transform: uppercase;
    -webkit-transition: all .75s;
    -ms-transition: all .75s;
    transition: all .75s;
}
#filter .title { float: left; padding: 0 24px; }
#filter ul { float: left; }
#filter ul li { float: left; position: relative; margin-left: -1px; }
#filter ul li:before { content: ''; position: absolute; left: -1px; height: 100%; border-right: 1px solid; top: 0; opacity: .5; }
#filter ul li:after { content: ''; position: absolute; right: -1px; height: 100%; border-right: 1px solid; top: 0; opacity: .5;}
#filter ul li a { display: block; position: relative;
    -webkit-perspective: 800;
    -moz-perspective: 800;
    -ms-perspective: 800;
    -o-perspective: 800;
    perspective: 800;
}
#filter ul li a > span { display: block; height: 3.5em; padding: 0 24px; white-space: nowrap;
    -webkit-transition: all .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: all .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform-origin: 50% 50% -15px;
    -moz-transform-origin: 50% 50% -15px;
    -ms-transform-origin: 50% 50% -15px;
    -o-transform-origin: 50% 50% -15px;
    transform-origin: 50% 50% -15px;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
}
#filter ul li a > span:nth-child(1) {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    transform: rotateX(90deg);
}
#filter ul li a > span:nth-child(2){ position: absolute; width: 100%; height: 100%; box-sizing: border-box; bottom: 0;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
#filter ul li:hover a > span:nth-child(1) { 
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
#filter ul li:hover a > span:nth-child(2) { opacity: 0;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}
#filter ul li a span.cnt { margin-left: 8px; }
#filter ul li a span.border { position: absolute; left: -1px; top: 0; width: 100%; padding: 0 1px; border-top: 2px solid; }
#filter ul li.active a > span:nth-child(1){
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
#filter ul li.active a > span:nth-child(2){
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}
#filter.hide { top: -50px; }
/*=== FILTER end ===*/





.dash { width: 10px; height: 0; border-width: 2px; border-style: solid; border-bottom: 0; border-left: 0; border-right: 0; display: block; margin: 47px auto; }
.dash:first-child { margin-top: 0; }
.dash:last-child { margin-bottom: 0; }

.menu-icon { width: 24px; }
.menu-icon span { display: block; height: 3px; margin-bottom: 4px; }

.wrapper-vertical-center-outer { display: table; height: 100%; width: 100%; line-height: 100%; position: relative; box-sizing: border-box; }
.wrapper-vertical-center-outer .wrapper-vertical-center-inner { display: table-cell; line-height: normal; vertical-align: middle; }


#preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000000; z-index: 2000; }
#preloader .wrapper-preloader { position: absolute; left: 50%; top: 50%; width: 200px; margin-left: -100px; margin-top: -100px;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(.4);
    -ms-transform: scale(.4);
    transform: scale(.4);
}
#preloader .wrapper-preloader .logo { width: 200px; }
#preloader .wrapper-preloader .progress { height: 19px; background: #ffffff; margin-top: 10px;
/*    -webkit-transition: all .05s linear;
    transition: all .05s linear;
*/}

@media (min-width: 1000px) {
    #index .curved { width: 600px; height: 74px; } /* scale 0.1229 */
    #index .year { width: 156px; height: 99px; } /* scale 0.6325 */
    #index .title { width: 600px; height: 163px; } /* scale 0.2722 */
    .header .logo { width: 45px; height: 29px; } /* scale 0.6543 */
    .footer .logo { width: 24px; height: 16px; } /* scale 0.6543 */
    
    
    .project-preview { width: 300px; }
}

@media (min-width: 1200px) {
    #index .year-vp .small { font-size: .9em; }

}


.fb_iframe_widget iframe { bottom: 0; }