@charset "UTF-8";
/*
Theme Name: Twenty Nineteen
Theme URI: https://wordpress.org/themes/twentynineteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Requires at least: WordPress 4.9.6
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentynineteen
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
	font-family: 'Arial';
	src: url('fonts/Arial.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body {
	margin: 0px;
	padding: 0px;
	font-family: 'Arial';
	overflow: hidden;
}

html, body {
	overflow: hidden;
	background: #000;
}
* {
	box-sizing: border-box;
	font-family: 'Arial';
}







.loaderz {
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
  border: 16px solid #000;
  border-radius: 50%;
  border-top: 16px solid #fff;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
	z-index: 0;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

a {
	color: #fff!important;
	text-decoration: unset!important;
	font-family: 'Arial';
}
ul {
	margin: 0px;
	padding: 0px;
	font-family: 'Arial';
}
li {
	margin: 0px;
	padding: 0px;
	font-family: 'Arial';
	list-style-type: none;
}
p, h1, h2, h3, h4, h5, h6 {
	font-family: 'Arial';
}

#scroller {
	height: 100vh;
	position: fixed;
	z-index: 99999999;
	width: 100%;
	overflow: scroll;
	opacity: 0;
	visibility: hidden;
}
#scroller.active {
	visibility: visible;
}
.scroll-inner {
	height: 3600px;
	width: 50px;
}

#mobScroller {
	height: 100vh;
	position: fixed;
	z-index: 99999999;
	width: 100%;
	overflow: scroll;
	opacity: 0;
	visibility: hidden;
}
#mobScroller.active {
	visibility: visible;
}
.mobScroll-inner {
	width: 50px;
}

#content {
	position: relative;
	overflow: hidden;
}
/* Example wrapper */
.frame-wrapper {
	position: relative;
	/*width: calc(100% - 12.50%);*/
    display: block;
    margin: 0 auto;
    z-index: 9;
    /*left: calc(100vw / 16);*/
    opacity: 0;
}

.frame-header {
	position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 99999;
    width: calc(100vw / 16);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: calc((100vw / 16) / 2)!important;
    padding-bottom: 25px;
    padding-top: 25px;
    background: #000;
    cursor: pointer;
    border-right: 2.5px solid #fff;
    transition: all 1s ease-in-out;
    border: unset!important;
    position: absolute;
}

.frame-header:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 2.5px;
	background: #fff;
	top: 0;
	right: -2.5px;
}
body.mac .frame-header:before {
	width: 3px;
	right: -3px;
}

.frame-header.activeBar:before {
	background: #000;
	width: 3.5px;
}

body.mac .frame-header.activeBar:before {
	width: 4px;
}

.frame-header.headerLoaded {
	border-right: unset;
}

.header-wrapper {
	position: absolute;
    right: 0px;
    bottom: 0px;
    padding-top: 25px;
	transform: rotate(180deg) translateX(0%);
	-webkit-transform: rotate(180deg) translateX(0%);
	writing-mode: tb-rl;
	transition: all .3s ease-in-out;
	
	
	height: 100vh;
    position: absolute;
    
    width: 119px;
    display: flex;
    align-items: center;
    color: #fff;
}
.headerLoaded .header-wrapper {
	
}
.frame-header:hover .header-wrapper {
	color: #ccc;
}
body[data-load="0"] .frame-header {
	width: calc(50% + 2px)!important;
	
}
.frame-header {
	width: calc(50% + 2px)!important;
	
}
body[data-load="1"] .frame-header {
	transform: translateX(calc(-100vw / 16 * 7));

	
}
body[data-load="0"] .frame-footer {
	width: calc(50% + 2px)!important;
	border-left: 2.5px solid #fff;
}

.frame-footer {
	position: fixed;
    right: 1px;
    top: 0;
    height: 100%;
    z-index: 9999;
    width: calc(100vw / 16);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: calc((100vw / 16) / 2)!important;
    padding-bottom: 25px;
    padding-top: 25px;
    /*border-left: 2.5px solid #fff;*/
    background: #000;
    cursor: pointer;
    transition: all 1s ease-in-out;
    /*border: unset;*/
}

.site-loaded .footer-wrapper {
    left: 47%!important;
}
.footer-wrapper {
	position: absolute;
    top: 0px;
    color: #fff;
    padding-bottom: 30px;
	transform: rotate(180deg) translateX(0%)!important;
	-webkit-transform: rotate(180deg) translateX(0%)!important;
	writing-mode: tb-rl;
	transition: all .3s ease-in-out;



    width: 119px;
    left: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
	
}
.footer-wrapper:before {
	content: '';
	position: absolute;
	width: 5px;
	height: 100%;
	background: #000;
	left: -3px;
	top: 0px;
}
body[data-load='1'] .frame-footer:hover .footer-wrapper {
	color: #ccc;
}
.header-info {
	width: calc(100% - 12.50%);
	position: fixed;
	z-index: 999;
	background: #000;
	top: 0px;
	left: 6.25%;
	left: calc(100vw / 16 + 1px);
	border-right: 2.5px solid #fff;
	height: 100%;
	overflow: hidden;
	width: 0px;
	transition: all 0.6s linear;
	-webkit-transition: all 0.6s linear;
}
body.safari .header-info {
	border-right: 3.5px solid #fff;
}
.header-info:before {
	content: '';
	position: absolute;
	width: 2.5px;
	height: 100%;
	/*background: #fff;*/
	left: 0px;
}
.frame-header.active .header-info {
	left: calc(100vw / 16);
}

.footer-info {
	width: calc(100% - 12.50%);
	position: fixed;
	z-index: 99;
	background: #000;
	top: 0px;
	right: 6.25%;
	border-left: 2.5px solid #fff;
	height: 100%;
	overflow: hidden;
	width: 0px;
	transition: all 0.6s linear;
	-webkit-transition: all 0.6s linear;
	border-left: unset!important;
}


/* Frame */
.frame {
	height: 100vh;
	overflow: hidden;
}
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 40px;
	height: 100vh;
	transition: all 1s ease-out;
	top: 0px!important;
	font-size: calc((100vw / 16) / 2)!important;
}
.frame ul li {
	float: left;
	width: calc(100vw / 16);
	height: 100%;
	margin: 0 1px 0 0;
	padding: 0;
	text-align: center;
	cursor: pointer;
	display: flex;
    align-items: flex-end;
    border-left: 2.5px solid #fff;
    
    overflow: hidden;
    position: relative;
    -webkit-appearance: none!important;
	outline: none!important;
}








.frame ul li:focus {
	-webkit-appearance: none!important;
	outline: none!important;
}
.frame ul li:before {
	content: '';
	position: absolute;
	z-index: 9999;
	left: 0px;
	width: 2.5px;
	height: 100%;
	/* background: #fff; */
}

.frame ul li .inner .postYear span:before {
	content: '';
	width: 23%;
	height: 2.5px;
	background: #fff;
	/*position: absolute;*/
	bottom: 45px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.frame ul li .inner .postYear span:after {
	content: '';
	width: 2.5px;
	height: 23%!important;
	background: #fff;
	/*position: absolute;*/
	margin-top: -11.5%;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

.frame ul li .inner .postYear span:before {
	height: 2.5px;
}
.frame ul li .inner .postYear span:after {
	width: 2.5px;
}
.frame ul li .inner .postYear:hover span:after, .frame ul li .inner .postYear:hover span:before {
	background: #ccc;
}

.lc {
	position: relative;
    width: 23%;
    height: 30px;
    width: 30px;
    position: absolute;
    bottom: 30px;

    left: calc(50% + -2.5px);
    /*transform: translateX(-50%);*/
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
}
.lc div {
	position: absolute;
	/*transition: all 0.3s ease-in-out;*/
	/*z-index: 999;*/
	background-size: cover;
	background-repeat: repeat;
	background-position: center center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.l1 {
    width: 2.5px;
    height: 100%;
    background-color: #ffffff;
    top: 0;
    left: 50%;
    left: calc(50% - 1.4px);


    left: 50%!important;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
}
.l2 {
	width: 100%;
    height: 2.5px;
    background-color: #ffffff;
    top: 50%;
    top: calc(50% - 1px);


    top: 50%!important;
    /*transform: translateY(-50%);*/
    
    transform: translate3d(0, -50%, 0);
    -webkit-transform: translate3d(0, -50%, 0);
}
.frame ul li .inner .postYear:hover .l1 {
	background-color: #cccccc;
}

.frame ul li .inner .postYear:hover .l2 {
	background-color: #cccccc;
}

.frame ul li.active-info .inner .postYear:hover .l1 {
	background-color: #000;
}
.frame ul li.active-info .inner .postYear:focus .l1 {
	background-color: #000;
}

.frame ul li.active-info .inner .postYear .l1 {
	opacity: 0;
	/*display: none;
	width: 0px;
	height: 0px;
	z-index: -9;*/
	
}
.frame ul li.active-info .inner .postYear span:after {
	visibility: hidden;
}
body.mac .l1 {
	width: 3px;
}
body.mac .l2 {
	height: 3px;
}
body.mac .frame ul li .inner .postYear span:before {
	height: 3px;
}
body.mac .frame ul li .inner .postYear span:after {
	width: 3px;
	margin-top: -12.5%;
	margin-left: -0.5px;
}
body.mac .frame-footer {
	border-left: 3px solid #ffffff;
}
body.mac .frame ul li:before {
	width: 3px;
}
body.mac .header-info {
	border-right: 3px solid #fff;
}
body.mac .footer-info {
	border-left: 3px solid #fff;
}
body.mac .filter li:before {
	width: 3px;
}

.frame-item.last-border:after {
    content: '';
    position: absolute;
    z-index: 9999;
    right: 2.5px;
    width: 2.5px;
    height: 100%;
    background: #fff;
    top: 0;
}

body.mac .frame-item.last-border:after {
	width: 3px;
	right: 3px;
}
body.mac .frame ul li .inner-info {
	border-right: 3px solid #fff;
}

.frame ul li.frame-item {
	/*transition: all 0.6s ease-in-out;
	-webkit-transition: all 0.6s ease-in-out;*/
}
.frame ul li:first-of-type {
	border-left: unset;
}
.frame ul li.active {
	
}
.frame ul li.active-project {
	/*width: calc(100vw / 1.142);*/
	margin: 0px 0px 0px 0px;
}
.frame ul li .inner {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
    width: 100%;
    height: 100%;
    writing-mode: tb-rl;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0px;
    
    width: calc(100vw / 16);
    position: relative;
    z-index: 999;
    background: #000;
    color: #fff;
    position: absolute;
    left: 0;
    justify-content: space-between;
    flex-direction: row-reverse;
    
}
.frame ul li.active-project .inner {
	padding-bottom: 25px;
}
.frame ul li .inner p.postTitle {
	width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 23px;

    
    position: relative;
}
.frame ul li.active-project .inner p.postTitle {
	height: 90%;
    bottom: 10%;
}
.frame ul li .inner:before {
	content: '';
    position: absolute;
    width: 2.5px;
    height: 100%;
    background: #fff;
    left: 0px;
    top: 0px;
    opacity: 0;
}
.frame ul li.active-info .inner {
	/*border-left: unset!important;*/
	border-left-color: #fff!important;
}
.frame ul li.active-project .inner:before {
	opacity: 0;
}
.frame ul li.active-info .inner:before {
	opacity: 0;
}
.frame ul li .inner .postYear {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: 9;
    height: calc(100vw / 16);
    width: calc(100vw / 16);
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0px;
    display: none;
	/*transform: rotate(90deg);
	-webkit-transform: rotate(90deg);*/
}
.frame ul li .inner .postYear span {
	/*position: absolute;
    right: 24px;*/
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-end;
    top: -30px;
}
.frame ul li .inner .postYear span img {
	width: 22.5%;
	height: 22.5%;
	margin-bottom: 30px;
}
.frame ul li .inner .postYear span .plusMinus {
	
}

.frame ul li .inner .postYear span img.infoMinus {
	display: none;
}
.frame ul li.loading .inner .postYear span img.infoMinus {
	display: none;
}
.frame ul li.active-project .inner .postYear span img.infoPlus {
	display: block;
}
.frame ul li.active-info .inner .postYear span img.infoMinus {
	display: block;
}
.frame ul li.active-info .inner .postYear span img.infoPlus {
	display: none;
}


.frame ul li .inner .postTitle:hover span {
	color: #ccc;
}
.frame ul li.active-project .inner .postTitle:hover span {
	/*color: #fff;*/
}
.frame ul li.active-project .inner .postYear {
	opacity: 1;
	visibility: visible;
	display: flex;
}
.frame ul li .inner span {
	transition: all 0.3s ease-in-out;
}
.frame ul li .inner p {
	margin: 0px;
	line-height: unset;
}
.frame ul li .inner-info {
	position: absolute;
	left: calc(100vw / 16 - -4px);
	top: 0px;
	width: 400px;
	height: 100%;
	padding: 30px 30px 15px 15px;
	font-size: 18px;
	z-index: 9;
    background: #000;
    border-right: 2.5px solid #fff;
    /*transform: translateX(calc(-100vw / 16 * 5));*/
    transform: translateX(calc(-100vw / 16 * 4));
    transition: all 0.5s linear;
    text-align: left;
    width: calc(100vw / 16 * 4)!important;
}
.frame ul li .inner-info .inner-info-wrap {
	visibility: hidden;
	color: #fff;
}
.frame ul li.active-info .inner-info .inner-info-wrap {
	visibility: visible;
}
.frame ul li.info-open .inner-info .inner-info-wrap {
	visibility: visible;
}
.frame ul li .inner-info .inner-info-wrap p:first-child {
	margin-top: 0px;
}
.frame ul li .inner-info .inner-info-wrap p {
	line-height: 1.2em;
	color: #fff;
	hyphens: auto;
}
.frame ul li .inner-info .inner-info-wrap p span {
	display: inline-block;
}
.info-wrap .col-f6 p span {
    display: inline-block;
}
.info-wrap .col-f6 p span.awYear, .info-wrap .col-f6 p span.awName {
    display: inline;
}
body.safari .frame ul li .inner-info {
	border-right: 3.5px solid #fff;
}
.frame ul li.active-info .inner-info {
	transform: translateX(0px);
	left: calc(100vw / 16 - 5px);
}
.project-info {
	width: calc(100% - 8.10%);
	height: 100vh;
	position: relative;
	transition: all 0.6s ease-out;
	opacity: 1;
	background: #000;
}
.act .project-info {
	opacity: 1;
}
.pro-loader {
    position: absolute;
    /*top: 50%;
    left: 50%;*/
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #fff;
    /*transform: translate(-50%,-50%);*/
    display: none;
}
.loading .slick-slider, .loading .slick-item {
	opacity: 0;
}
.slick-item.slick-slide {
	position: relative;
	height: 100vh;
	/*background: #fff;*/
	-webkit-appearance: none!important;
	outline: none!important;
}
.slick-item iframe, .slick-item video {
	width: 100%;
	height: 100vh;
}
.slick-item .iFrame.vimeoFrame {
	/*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    /*height: calc(100vh + 50px);*/
}
.slick-item.Vertical_Horizontal.horizontal img {
	/*transform: translateX(-50%);*/
	/*position: absolute;*/
	transition: all 1s ease-out;
	object-fit: cover;
	width: 100%;
}
.slick-active .slick-item.Vertical_Horizontal.horizontal img {
	/*transform: translateX(0%);*/
}
.slick-item.Vertical_Horizontal.vertical {
	position: relative;
	/*max-width: 611px;*/
}
.frame ul li .slick-item.Vertical_Horizontal.vertical {
	width: calc(100vw - 100vw / 1.69);
}

.slick-item.Vertical_Horizontal.vertical img {
	margin-left: 0px;
	width: 100%;	
	object-fit: cover;
	
}
.frame ul li .slick-item.Vertical-Vertical img {
	
	object-fit: cover;
}
.slick-item.Vertical_Horizontal.vertical img.horz {
	position: absolute;
	width: 100%;
	left: -50%;
	top:0px;
	
	transition: all 0.8s ease-in-out;
}
.slick-item.Vertical_Horizontal.vertical img.vert {
	position: absolute;
	top: 0;
	left: -100%;
}
.slick-active .slick-item.Vertical_Horizontal.vertical img.vert {
	
}
.slick-active .slick-item.Vertical_Horizontal.vertical img.horz {
	

}


.frame ul li .slick-slider {
	transition: all 0.4s linear;
	transition: unset;
}
.slick-track {
    
}
.frame ul li .project-info .slick-item {
	width: calc(100vw - 100vw / 16 * 3);
	
	
}

.frame ul li .project-info .slick-item.Vertical-Vertical {
	width: calc(100vw - 100vw / 1.69);
}
.frame ul li .project-info .slick-item.single-vertical {
	width: calc(100vw - 100vw / 1.69);
}


.frame ul li .project-info img {
	height: 100vh;
	
	object-fit: contain;
	margin: 0 auto;
	display: flex;
	width: 100%;
	object-fit: cover;
	-webkit-appearance: none!important;
	outline: none!important;
	    
}
.frame ul li .project-info img:focus {
	-webkit-appearance: none!important;
	outline: none!important;
}
.frame ul li .project-info img.Cover {
    object-fit: cover;
}
.frame ul li .project-info img.Contain {
    object-fit: contain;
}
.frame ul li .slick-slider {
	visibility: visible;
}
.frame ul li.active-project .slick-slider {
	visibility: visible;
}
.frame ul li.vhide {
	opacity: 0;
	visibility: hidden;
	width: calc(100vw)!important;
}
.frame ul li .slick-slider .slick-arrow {
	position: absolute;
    top: 5vh;
    z-index: 5;
    height: 100vh;
    width: 40%;
    opacity: 0;
    cursor: pointer;
    top: 0px;
}
.frame ul li .slick-slider .slick-prev {
	left: 0;
}
.frame ul li .slick-slider .slick-next {
	right: 0;
}


/* Scrollbar */
.scrollbar {
	margin: 0 0 1em 0;
	height: 2px;
	background: #ccc;
	line-height: 0;
	display: none;
}
.scrollbar .handle {
	width: 100px;
	height: 100%;
	background: #292a33;
	cursor: pointer;
}
.scrollbar .handle .mousearea {
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px;
}

/* Pages */
.pages {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	text-align: center;
}
.pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	
}
.pages li:hover {
	background: #aaa;
}
.pages li.active {
	background: #666;
}

/* Controls */
.controls { margin: 25px 0; text-align: center; }

/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }

/* Crazy example */
.crazy ul li:nth-child(2n) { width: 100px; margin: 0 4px 0 20px; }
.crazy ul li:nth-child(3n) { width: 300px; margin: 0 10px 0 5px; }
.crazy ul li:nth-child(4n) { width: 400px; margin: 0 30px 0 2px; }











.info-wrap {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
}
.inner-info a {
	transition: all 0.3s ease-in-out;
}

.inner-info a:hover {
	color: #ccc!important;
}
.info-wrap.about-text a {
	transition: all 0.3s ease-in-out;
}
.info-wrap.about-text a:hover {
	color: #ccc!important;
}
.info-wrap .col-f6 {
	padding: 20px 30px 20px 4px;
	max-height: 100vh;
	color: #fff;
}
.about-avtive .info-wrap {
	overflow: auto;
}
.info-wrap .col-f6 p {
	hyphens: auto;
    line-height: 1.2em;
    color: #fff;
}
.info-wrap .col-f6 p, .frame ul li .inner-info p {
	font-size: calc((100vw / 16) / 2 * 0.4);
}
ul.awardList {
	padding-bottom: 20px;
}
.info-wrap .col_Awards p {
	margin-top: 0px;
	margin-bottom: 0px;
	display: flex;
}
span.awName {
    padding-left: 20px;
}
.info-wrap .col_Clients p {
	margin-bottom: 0px;
	margin-top: 0px;
}
.info-wrap .col_Awards li:first-child p, .info-wrap .col_Clients p:first-child {
	margin-top: 10px!important;
}
.info-wrap .col_Awards li p.liTitle {
	margin-top: 15px;
}
.info-wrap .col_About p:first-child {
	margin-bottom: 0px;
	margin-top: 10px;
}
.info-wrap .col_About p:nth-child(2) {
	margin-top: 0px;
}
.col-f6 {
	flex: 0 0 33.33%;
}

.filter {
	height: 100vh;
}
.filter li {
    float: left;
    width: calc(100vw / 16);
    height: 100%;
    margin: 0 1px 0 0;
    padding: 0;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
	justify-content: center;    
    overflow: hidden;
    position: relative;
}
.filter li a {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: all 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    writing-mode: tb-rl;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 25px;
    width: calc(100vw / 16);
    position: relative;
    z-index: 999;
    background: #000;
    font-size: 40px;
    font-size: calc((100vw / 16) / 2)!important;
}
.filter li:before {
	content: '';
    position: absolute;
    z-index: 9999;
    left: 0px;
    width: 2.5px;
    height: 100%;
    background: #fff;
}
.filter li:nth-child(1)::before {
	opacity: 0;
}
body.chrome .filter li:before {

}
.filter li a:hover {
	color: #ccc!important;
}
.filter li:nth-last-child(2) {
	
}

.device-notice {
	position: fixed;
	width: 100%;
	height: 100vh;
  	/*height: calc(var(--vh, 1vh) * 100);*/
	background: #000;
	z-index: 999999999;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	padding: 25px 0px;    
	color: #fff;
	display: none!important;
}
.device-notice p {
	color: #fff;
}
.device-notice .device-header {
	
}
.device-notice .device-footer {
	padding: 0px 25px;
	font-size: 20px;
	text-align: right;
	border-top: 1.25px solid #fff;
    padding-top: 12px;
}
body.mac .device-notice .device-footer {
	border-width: 1px;
}
.device-notice .w, .device-notice p {
	padding: 0px 25px;
	font-size: 20px;
}
.device-notice .w {
	border-bottom: 1.25px solid #fff;
    padding-bottom: 15px;
}
body.mac .device-notice .w {
	border-width: 1px;
}
#scroller {
	
}
#mobScroller {
	display: none;
}
.mobScroll-inner {
	height: 100vh;
}




.site-content.preLoaded .frame-header {
	transform: translateX(calc(-100vw / 16 * 7))!important;
}

.site-content.preLoaded .frame-footer {
	width: calc(100vw / 16 - 1px)!important;
}

#page {
	position: relative;
}
#page:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999999999;
	background: transparent;
	visibility: hidden;
}

body.projectLoading #page:before {
	visibility: visible;
}




.ui-loader {
	display: none!important;
}


.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  opacity: 0;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

.embedFrame {
  position: relative;
  padding-bottom: 70.25%;
  overflow: hidden;
  width: calc(100vw / 16 * 13);
}
.embedFrame.ytEmbed {
	padding-bottom: 0px!important;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}
.slick-item .iFrame.vimeoFrame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%) translateY(-50%) scale(1.2);
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1.2);
}


::-webkit-scrollbar {
width: 0px; 
background: transparent; 
}

::-webkit-scrollbar-thumb {
background: transparent;
}


@media screen and (min-width: 1800px) {


	.frame ul, .frame-header, .frame-footer, .filter li a {
		font-size: 55px!important;
	}
	.info-wrap .col-f6 p, .frame ul li .inner-info .inner-info-wrap p {
		font-size: 22px;
	}



	/** windows **/
	ul.filter li.lastFilter:after {
	    width: 3.5px;
	}
	.l1 {
		width: 3.5px;
	}
	.l2 {
		height: 3.5px;
	}
	.frame ul li .inner .postYear span:before {
		height: 3.5px;
	}
	.frame ul li .inner .postYear span:after {
		width: 3.5px;
		left: calc(50% - 2.5px);
	}

	.frame-header:before {
		width: 3.5px;
		right: -3.5px;
	}

	.frame-footer {
		border-left: 3.5px solid #fff;
	}
	.frame ul li:before {
		width: 3.5px;
	}
	.frame ul .frame-item.last-border:after {
		width: 3.5px;
		right: 3.5px;
	}
	.header-info {
		border-right: 3.5px solid #fff;
	}
	.footer-info {
		border-left: 3.5px solid #fff;
		border-left: unset;
	}
	.filter li:before {
		width: 3.5px;
	}
	.frame ul li .inner-info {
		border-right: 3.5px solid #fff;
	}
	.frame-item.last-border:after {
		width: 4px;
	}

	/** end windows **/

	/*** mac **/
    body.mac ul.filter li.lastFilter:after {
	    width: 4px;
	}
	body.mac .l1 {
		width: 4px;
	}
	body.mac .l2 {
		height: 4px;
	}
	body.mac .frame ul li .inner .postYear span:before {
		height: 4px;
	}
	body.mac .frame ul li .inner .postYear span:after {
		width: 4px;
	}

	body.mac .frame-header:before {
		width: 4px;
		right: -4px;
	}
	body.mac .frame ul .frame-item.last-border:after {
		width: 4px;
		right: 4px;
	}
	body.mac .frame-footer {
		border-left: 4px solid #fff;
	}
	body.mac .frame ul li:before {
		width: 4px;
	}
	body.mac .frame-item.last-border:after {
		width: 4px;
	}
	body.mac .header-info {
		border-right: 4px solid #fff;
	}
	body.mac .footer-info {
		border-left: 4px solid #fff;
	}
	body.mac .filter li:before {
		width: 4px;
	}
	body.mac .frame ul li .inner-info {
		border-right: 4px solid #fff;
	}
	body.mac .frame ul .frame-item.last-border:after {
		width: 4px;
	}

	/*** end mac ***/
}
@media screen and (min-width: 1440px) {
	.footer-wrapper {
		left: -4px;
	}
}
@media screen and (max-width: 1440px) {
	.header-wrapper {
		
	}
	.footer-wrapper {
		
	}
	.footer-wrapper:before {
		left: -2px;
	}
}
@media screen and (max-width: 1024px) {
	.frame ul, .frame-header, .frame-footer, .filter li a {
		font-size: 30px;
	}
	.header-wrapper {
		
	}
	.footer-wrapper {
		
	}
	.frame ul li .inner-info, .info-wrap .col-f6 p {
		
	}
	.frame ul li:before, body.mac .frame ul li:before {
		/*width: 1px;*/
	}
}
@media screen and (max-width: 815px) {

.frame ul li {
	float: left;
	width: calc(100vw / 16);
	height: 100%;
	margin: 0 1px 0 0;
	padding: 0;
	text-align: center;
	cursor: pointer;
	display: flex;
    align-items: flex-end;
    border-left: 0px;
    
    overflow: hidden;
    position: relative;
    -webkit-appearance: none!important;
	outline: none!important;
}


	.frame ul li .inner-info {
		left: calc(100vw / 16 - -5px);
	}
	.frame ul li .inner .postYear {
		height: 100px;
		bottom: auto;
		top: calc(100% - 100px);
	}
    .l1 {
        left: calc(50% - 0px);
    }
	span.awName {
		padding-left: 14px;
	}
	.info-wrap .col_About p:first-child {
		margin-top: 6px;
	}
	.info-wrap .col_Awards li:first-child p, .info-wrap .col_Clients p:first-child {
		margin-top: 6px!important;
	}
	.frame ul li .inner .postYear span img { 
		margin-right: 3px;
	}
	.col-f6.col_Clients {
		display: none;
	}
	.col-f6 {
		width: 50%;
		flex: 0 0 50%;
	}
	.site-content.preLoaded .frame-footer {
		width: calc(100vw / 16 - 0px)!important;
	}
    .frame ul li .inner-info {
		/*transform: translateX(calc(-100vw / 16 * 5.93));*/
		transform: translateX(calc(-100vw / 16 * 6));
		transform: translateX(calc(-100vw / 16 * 6.07));
		/*transform: translateX(calc(-100vw / 16 * 6));*/
	}
	.frame ul li .inner p.postTitle span {
    	font-size: calc((100vw / 16) / 2.7)!important;
    }
    .frame ul {
        font-size: calc((100vw / 16) / 2.7)!important;
    }
    .frame ul li .slick-slider .slick-arrow {
        visibility: hidden;
    }
    .slick-item:before {
    	content: '';
    	position: absolute;
    	width: 50%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	z-index: 999;
    }
    .slick-item:after {
    	content: '';
    	position: absolute;
    	width: 50%;
    	height: 100%;
    	top: 0;
    	right: 0;
    	z-index: 999;
    }
    .slick-item.slickVideo:before {
    	width: 45%;
    }
    .slick-item.slickVideo:after {
    	width: 45%;
    }
    .frame ul {
        transition: all 0.5s ease-out;
    }
	.slick-item .iFrame.vimeoFrame {
	    /*height: calc(100vh + 70px);
	    transform: scaleY(1.1);*/
	}
	.info-wrap.about-text .col-f6:nth-child(2) {
		
	}
	/*.header-info, .frame-header, .footer-info, .frame-footer, .frame, .frame ul, .frame ul li, .info-wrap, .filter, .filter li, .filter li a {
		height: 100vh;
  		height: calc(var(--vh, 1vh) * 100);
	}*/
	.frame ul, .frame-header, .frame-footer, .filter li a {
		font-size: 18px;
	}
	.info-wrap .col-f6 p, .frame ul li .inner-info .inner-info-wrap p {
	    font-size: 14px;
	}
	.header-wrapper {
		
	}
	.footer-wrapper {
		
	}
	.frame ul li .inner-info {
		font-size: 14px;
	}
	/*body.safari .header-info {
		border-right: 2.5px solid #fff;
	}
	body.safari .frame-footer {
		border-left: 2.5px solid #fff;
	}
	
	body.safari .frame ul li .inner-info {
		border-right: 2.5px solid #fff;
	}*/
	body.safari .footer-info {
	    right: 6.15%;
	}



	.frame-footer {
		border-left: 1.25px solid #fff!important;
		right: 0px;
		font-size: calc((100vw / 16) / 2.7)!important;
		width: calc(100vw / 16)!important;
	}
	.frame ul li:before {
		width: 1.25px!important;
	}
	.header-info {
		border-right: 1.25px solid #fff!important;
	}
	.footer-info {
		border-left: 1.25px solid #fff!important;
	}
	.filter li:before {
		width: 1.25px!important;
	}
	ul.filter li.lastFilter:after {
	    width: 1.25px;
	}
	.frame ul li .inner-info {
		border-right: 1.25px solid #fff!important;
	}
	.frame ul .frame-item.last-border:after {
		width: 1.25px;
		right: 1.25px;
	}
	.frame-header {
		border-right: 1.25px solid #fff;
		font-size: calc((100vw / 16) / 2.7)!important;
	}
	.filter li a {
		font-size: calc((100vw / 16) / 2.7)!important;
	}
	.frame-header:before {
		width: 1.25px;
		right: -1.25px;
	}
	.l1 {
		width: 1.25px;
	}
	.l2 {
		height: 1.25px;
	}
	.frame ul li .inner .postYear span:before {
		height: 1.25px;
	}
	.frame ul li .inner .postYear span:after {
		width: 1.25px;
	}


    /** safari **/

    body.mac .frame-header {
		border-right: 1.25px solid #fff;
	}
	body.safari .frame-footer {
		border-left: 1px solid #fff!important;
	}
	body.safari .frame ul li:before {
		width: 1px!important;
	}
	body.safari .header-info {
		border-right: 1px solid #fff!important;
	}
	body.safari .footer-info {
		border-left: 1px solid #fff!important;
	}
	body.safari .filter li:before {
		width: 1px!important;
	}
	body.mac ul.filter li.lastFilter:after {
	    width: 1px;
	}
	body.safari .frame ul li .inner-info {
		border-right: 1px solid #fff!important;
	}

	body.mac .frame-header:before {
		width: 1px;
		right: -1px;
	}
	body.mac .frame ul .frame-item.last-border:after {
		width: 1px;
		right: 1px;
	}
	body.mac .frame ul li .inner .postYear span:before {
		height: 1px;
	}
	body.mac .frame ul li .inner .postYear span:after {
		width: 1px;
	}
	body.mac .l1 {
		width: 1px;
	}
	body.mac .l2 {
		height: 1px;
	}

	/** end safari **/



	#scroller, #catscroller {
		display: none;
	}
	#mobScroller {
		display: block;
	}
	#content {
		/*max-height: 100vh!important;
		height: 100vh!important;*/
	}
	.frame {
		
	}
	* {
		/*overflow-y: hidden!important;*/
	}
	.header-wrapper, .frame ul li .inner {
		/*padding-top: 75px;*/
	}
	.frame-header, .frame-footer, li.frame-item {
		/*width: calc(100vw / 16)!important;*/
	}
	.frame ul li .inner:hover span, body[data-load='1'] .frame-footer:hover .footer-wrapper, .frame-header:hover .header-wrapper, .filter li a:hover {
		color: #fff!important;
	}
	.frame ul li .inner:focus span, body[data-load='1'] .frame-footer:focus .footer-wrapper, .frame-header:focus .header-wrapper, .filter li a:focus {
		color: #ccc!important;
	}
	.frame ul li .inner-info {
		width: 50%;
		width: calc((100vw / 16 * 6))!important;
	}
	.frame ul li.active-info .inner-info {
		overflow-y: auto;
	}
	.frame ul li.active-info .inner-info {
		transform: translateX(-1px);
	}
	.frame ul li.frame-item.active-project .inner {
		border-left: 1.25px solid #fff;
		border-left: unset!important;
	}
	.inner p.postTitle {

	}
	.frame ul li.frame-item.active-project .inner p.postTitle, .frame ul li.frame-item.loading .inner p.postTitle {
		
		/*position: relative;
		right: 5px;*/
	}
    
}

@media screen and (max-width: 600px) {
	.device-notice {
		display: flex;
	}
	#content {
		opacity: 0;
	}
}