@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,700);	
/*@import url(http://weloveiconfonts.com/api/?family=entypo);*/

/* entypo */
/*[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}*/

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?tei6gf');
  src:  url('../fonts/icomoon.eot?tei6gf#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tei6gf') format('truetype'),
    url('../fonts/icomoon.woff?tei6gf') format('woff'),
    url('../fonts/icomoon.svg?tei6gf#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.noClick{
	pointer-events:none;
}

.icon-arrow-down:before {
  content: "\e900";
}
.icon-video-icon:before {
  content: "\e901";
}
.icon-close:before {
  content: "\e902";
}
.icon-plus .path1:before {
  content: "\e903";
  color: rgb(0, 0, 0);
  opacity: 0.13;
}
.icon-plus .path2:before {
  content: "\e904";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-arrow-circle:before {
  content: "\e905";
}
.icon-logo:before {
  content: "\e906";
}
.icon-menu:before {
  content: "\e907";
}
.icon-linkedin:before {
  content: "\e908";
}
.icon-twitter:before {
  content: "\e909";
}
.icon-mail:before {
  content: "\e90a";
}

/*IcoMoon end------------------------------------------*/


*{
	box-sizing:border-box;
}

::-webkit-scrollbar { 
    display: none; 
}

body{
	margin:0px;
	background-color: white;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	background-color: #FFFFFF;
	overflow: hidden;
	transition: opacity 1s;
}

body.black{
	background-color: #000;
}

h1{
	font-weight: 100;
	color:white;
	font-size: 7.5vw;
	line-height: 7.5vw;
	margin:0px;
}

p{
	font-weight: 200;
	color:white;
	font-size: 1.5vw;
}

ul{
	padding:0px;
}



.dispayNone{
	display:none;
}

.holder{
	width:100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	transition: opacity .6s;
}

.wrapper{
	width:600vw;
	height: 100vh;
	position: absolute;
	padding-left:10vw;
	overflow:hidden;
	transition: all .6s;
}

.backToBranding{
	cursor:pointer;
}

.bgimg{
	position: fixed;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-image: url('../img/bg1.jpg');
	background-size: cover;
	transition:all 1s;
}

.bgimg.larger{
	left:-50%;
	top:-50%;
	width: 200%;
	height: 200%;
}

.blurContent{
	-webkit-filter: blur(4vw);
	filter: blur(4vw);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
	/*opacity:0;*/
}

.fadeBlurredContent{
	opacity: 0;
}

@media screen and (orientation:portrait){
	.blurContent{
		-webkit-filter: blur(5vh);
		filter: blur(5vh);
	}
}

.fadeContent{
	opacity:0;
}

.fadeContentOut{
	opacity:0;
	transition:all .5s;
	transform: scale3d(1.4, 1,4, 1);
	pointer-events: none;
}

.projectholder{
    width: 55vw;
    height: 100vh;
    border: 0px solid white;
    overflow: hidden;
    padding-top: 10vh;
    /* display: inline-block; */
    /* float: left; */
    /* margin: 0vw 7.5vw; */
    left: 90vw;
    position: absolute;
    transition:all .5s;
}

.projectholder.in{
	overflow: scroll;
}

.projectholder img{
	width:100%;
	height: auto;
	margin-bottom: 10vh;
	pointer-events:none;
}

.projectholder img:last-child{
/*	width:100%;
	height: auto;
	margin-bottom: 0vh;
	pointer-events:none;*/
}

.introImg{
	width: auto;
    height: 100vh;
    border: 0px solid white;
    overflow: hidden;
    padding-top: 10vh;
    /* display: inline-block; */
    /* float: left; */
    /* margin: 0vw 2.5vw 0vw 0vw; */
    left: 50vw;
    position: absolute;
    z-index: 30;
    transition: all .5s;
}

.introImg img{
	width:auto;
	height: 120vh;
	margin-bottom: 10vh;
}

.introTxt{
    width: 40vw;
    height: 100vh;
    border: 0px solid white;
    overflow: hidden;
    margin: 0vw;
    display: table;
    position: absolute;
    left: 10vw;
    transition: all .5s;
}

.introTxt .cell{
	display: table-cell;
	vertical-align: middle;
}


/*--------------------- Interface --------------------*/


.homeLoader{
	position: absolute;
	width: 40vw;
	height: 40vw;
	top: calc(50% - 20vw);
	left: calc(50% - 20vw);
	background-color: white;
	border-radius: 100%;
	z-index: 100;
	box-shadow: 0px 0px 10vw rgba(0,0,0,.1);
	background-image: url('../img/interface/mf-gray.svg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	pointer-events:none;
	opacity: 1;
	transition: all .5s;
}

.homeLoader.initial{
	opacity: 0;
	transform: scale3d(0.4, 0.4, 1);
}




@keyframes bounceOut {
    0% { 
    	opacity: 1;
		transform: scale3d(1, 1, 1);
    }
    60% { 
    	opacity: 1;
		transform: scale3d(0.4, 0.4, 1);	
    }
    100% { 
    	opacity: 0;
    	transform: scale3d(1.2, 1.2, 1);
   	}
}


.homeLoader.bounceOut {
	opacity: 0;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
    animation-duration: 1.4s;
    animation-delay: 0s;
    animation-iteration-count: 1;
}

/*menu*/

.menu{
	position: absolute;
	width: 100%;
	height: 100%;
	/*background-color: rgba(0,0,0,.5);*/
	top:0px;
	left:-100%;
	transition: all .5s;
	z-index: 20;
}

.menu.show{
	/*left:0px;*/
	transform:translate3d(100%,0%,0px);
}

.menu .table{
	display: table;
	width: 100%;
	height: 100%;
}

.menu .table .cell{
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	text-align: center;
	color: white;
}



.menu ul{
	list-style: none;
	padding: 0px;
}

.menu li{
	cursor: pointer;
	opacity: 1;
	transition: all .5s;
	transition-delay:0s;
	transform: perspective(500px) rotateX(90deg) translate3d(-6%,0px,0px);
	transform-origin: 50% 50%;
	/*margin-left: -6%;*/
	font-size: 7vw;
	line-height: 9vw;
	transition-delay:.6s;
}



.menu.show li.menu1{transition-delay:.5s;}
.menu.show li.menu2{transition-delay:.6s;}
.menu.show li.menu3{transition-delay:.7s;}
.menu.show li.menu4{transition-delay:.8s;}
.menu.show li.menu5{transition-delay:.9s;}

.menu.show li{
	font-size: 5vw;
	line-height: 7vw;
	opacity: 1;
	transform: perspective(500px) rotateX(0deg) translate3d(0%,0px,0px);;
	margin-left: 0%;
}

.menu li span{
	opacity: 1;
	transition: opacity .4s;
}

.menu li span:hover{
	opacity: .5;
}

@media screen and (orientation:portrait){
	.menu li{
	    font-size: 15vw;
    	line-height: 20vw;
	}

	.menu.show li{
	    font-size: 10vw;
    	line-height: 15vw;
	}
}

/*ToolTipster*/

.btPlus{
	width: 3vw;
    position: absolute;
    right: 1.7vw;
    top: calc(50% - 1.5vw);
    opacity: 0;
    transition: all .5s;
    transition-delay:.5s;
    z-index: 10;
}

.arrowDown{
	position: absolute;
	bottom:0px;
	left:calc(50% - 6.5vw);
	width: 13vw !important;
	height:auto !important;
	transition: all .5s;
	cursor: pointer;

}

.ProjectSlide.panelOutTop .btPLus, .ProjectSlide.panelOutBottom .btPlus{
    transform: translate(300%, 0%);
	-webkit-transform: translate(300%, 0%);
	opacity: 0;
}

.ProjectSlide.panelIn .btPLus{
	transform: translate(0%, 0%) rotate(-90deg);
	-webkit-transform: translate(0%, 0%) rotate(-90deg);
	opacity: 1;
}



.ProjectWrapper.fadeContent .tooltip, .HomeWrapper.fadeContent .tooltip {
	pointer-events:none;
}


.ProjectWrapper.panelOutTop .my-custom-theme, .ProjectWrapper.panelOutBottom .my-custom-theme{
	display: none;
}

.HomeWrapper.panelOutTop .my-custom-theme, .HomeWrapper.panelOutBottom .my-custom-theme{
	display: none;
}

.my-custom-theme {
	border-radius: 5px; 
	border: 2px solid #FFFFFF;
	background: #FFFFFF;
	color: #909090;
}

.my-custom-theme .tooltipster-content {
	font-size: 14px;
	line-height: 16px;
	padding: 8px 10px;
	text-align: center;
}

.my-custom-theme b{
	color: black;
}



/*red--------------------------------------------*/
.my-custom-theme-red {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(180,29,22,.90);
	color: #FFF;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-red .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-red b{
	color: black;
}

/*red--------------------------------------------*/
.my-custom-theme-Burnsred {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(255,3,0,.90);
	color: #FFF;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-Burnsred .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-Burnsred b{
	color: white;
}

/*AquaGreen--------------------------------------------*/
.my-custom-theme-aquagreen {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(88,203,184,.90);
	color: #FFF;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-aquagreen .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-aquagreen b{
	color: white;
}

/*Gray--------------------------------------------*/
.my-custom-theme-gray {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(64,78,78,.90);
	color: #FFF;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-gray .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-gray b{
	color: white;
}

/*Green--------------------------------------------*/
.my-custom-theme-green {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(115,169,50,.90);
	color: #FFF;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-green .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-green b{
	color: white;
}

/*yellow--------------------------------------------*/
.my-custom-theme-yellow {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(241,234,53,.90);
	color: #000;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-yellow .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-yellow b{
	color: black;
}

/*burnsYellow--------------------------------------------*/
.my-custom-theme-burnsYellow {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(253,208,0,.90);
	color: #000;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-burnsYellow .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-burnsYellow b{
	color: black;
}

/*blue--------------------------------------------*/
.my-custom-theme-blue {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(39,161,198,.90);
	color: #fff;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-blue .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-blue b{
	color: white;
}

/*Sunbit Blue--------------------------------------------*/
.my-custom-theme-blueSunbit {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(52,82,118,.90);
	color: #fff;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-blueSunbit .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-blueSunbit b{
	color: white;
}

/*blue--------------------------------------------*/
.my-custom-theme-vibrantblue {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(0,204,254,.90);
	color: #fff;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-vibrantblue .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 32px;
	text-align: left;
}

.my-custom-theme-vibrantblue b{
	color: white;
}

/*White--------------------------------------------*/
.my-custom-theme-white {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(255,255,255,1);
	color: #000;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-white .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 15px;
	text-align: left;
}

.my-custom-theme-white b{
	color: black;
}

/*White About--------------------------------------------*/
.my-custom-theme-white-about {
	border-radius: 5px; 
	border: 0px solid #FFFFFF;
	background: rgba(255,255,255,1);
	color: #000;
	font-weight: 100;
	max-width: 290px;
}

.my-custom-theme-white-about .tooltipster-content {
	font-size: 18px;
	line-height: 20px;
	padding: 15px;
	text-align: left;
}

.my-custom-theme-white-about b{
	color: black;
}

/*Tooltipster end*/

.menu-icon{
	position: fixed;
    width: 3.8vw;
    height: auto;
    margin-top: -1.5vw;
    top: 50%;
    left: 1vw;
    z-index: 100;
    cursor: pointer;
    transition: all .4s;
    -webkit-transition: all .4s;
    /*display: none;*/
}

.menu-icon.open{
	/*left:calc(100vw - 1vw - 3.8vw);*/
	transform: translate3d(calc(100vw - 2vw - 3.8vw),0,0px);
}

.main-logo{
	width: 3.5vw;
    height: auto;
    top: 1.4vw;
    left: 1.1vw;
    position: fixed;
    z-index: 100;
    transition: all .4s;
    -webkit-transition: all .4s;
}

.main-logo.open{
	/*left:calc(99vw - 50px);*/
	transform: translate3d(calc(100vw - 3.5vw - 2.8vw),0,0px);
}

@media screen and (orientation:portrait) and (max-width: 600px){
	.menu-icon {
		position: fixed;
		width: 13vw;
		height: auto;
		margin-top: -6.5vw;
		top: 50%;
		left: -0.5vw;
		z-index: 100;
		cursor: pointer;
		transition: all .4s;
	}


	.menu-icon.open{
		/*left:calc(100vw - 1vw - 12.5vw);*/
		transform: translate3d(calc(100vw + 1vw - 13vw),0,0px);
	}

	.main-logo {
	    width: 9.5vw;
	    height: auto;
	    top: 2.0vw;
	    left: 1.5vw;
	    position: fixed;
	    z-index: 100;
	    transition: all .4s;
	}

	.main-logo.open{
		/*left:calc(99vw - 50px);*/
		transform: translate3d(calc(100vw - 11vw - 3vw),0,0px);
	}
}

@media screen and (orientation:portrait) and (min-width: 601px){
	.menu-icon {
		position: fixed;
		width: 8vw;
		height: auto;
		margin-top: -4vw;
		top: 50%;
		left: -0vw;
		z-index: 100;
		cursor: pointer;
		transition: all .4s;
	}

	.menu-icon.open{
		/*left:calc(100vw - 1vw - 7.5vw);*/
		transform: translate3d(calc(100vw - 0vw - 8vw),0,0px);
	}

	.main-logo {
	    width: 6.5vw;
		height: auto;
		top: 1.2vw;
		left: 1.0vw;
		position: fixed;
		z-index: 100;
		transition: all .4s;
	}

	.main-logo.open{
		/*left:calc(99vw - 50px);*/
		transform: translate3d(calc(100vw - 6.5vw - 2vw),0,0px);
	}	
}



.close-icon{
	width: 3.5vw;
    height: 3.5vw;
    top: 1.4vw;
    right: calc(.9vw + 6px);
    position: fixed;
    z-index: 100;
    transition: all .4s;
    -webkit-transition: all .4s;
    cursor: pointer;
    transform: rotate(0deg) translate3d(0%, 0px, 0px);
}

.close-icon.inVideo{
	/*transform: translate(0%, 0%) rotate(-90deg);
	-webkit-transform: translate(0%, 0%) rotate(-90deg);*/
	transform: rotate(-90deg) translate3d(0%, 0px, 0px);
}

.close-icon.out{
    /*top: 1.4vw;
    right: calc(1.4vw + 6px);
    position: fixed;
    z-index: 100;
    transition: all .4s;
    -webkit-transition: all .4s;
    cursor: pointer;
    transform: rotate(0deg) translate3d(150%, 0px, 0px);*/
    opacity: 0;
}

@media screen and (orientation:portrait){
	.close-icon {
	    width: 10.5vw;
	    height: 10.5vw;
	        width: 9.5vw;
		    height: 9.5vw;
		    right: 1.4vw;
	}

	.close-icon.out{
		/*right: -14vw;
		transform: translate(0%, 0%) rotate(90deg);
		-webkit-transform: translate(0%, 0%) rotate(90deg);*/
		transform: rotateZ(0deg) translate3d(150%, 0px, 0px);
	}
}

@media screen and (orientation:portrait) and (min-width: 600px){
	.close-icon {
	    width: 7vw;
	    height: 7vw;
	    top: 0.4vw;
	    right: calc(1vw + 6px);
	}
}

.arrow-circle{
	width:70px;
	height:70px;
	position: absolute;
	left:calc(89vw - 70px);
	top:calc(50vh - 35px);
	z-index: 100;

}

.arrow-circle{
	width:70px;
	height:70px;
	position: absolute;
	left:calc(89vw - 70px);
	top:calc(50vh - 35px);
	z-index: 100;
}

.nextPreview{
	width: 24vw;
    height: 24vw;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: fixed;
    right: -25vw;
    top: 50%;
    margin-top: -12vw;
    z-index: 100;
    background-color: white;
    transition: all .5s;
    cursor:hand;
    background-size: 105%;
    background-image: url(../img/next/white.jpg);
}

.nextPreview.in{
	background-image: url(../img/next/zenarts.jpg);
    right: -12vw;
    background-color: black;
}

.nextPreview.show{
	background-image: url(../img/next/zenarts.jpg);
    right: -12vw;
    background-color: black;
}

.nextPreview .nextLabel{
	background-color: rgba(0,0,0,.9);
    color: white;
    right: -21vw;
    top: 0vw;
    position: absolute;
    width: 10vw;
    /* height: 4vw; */
    padding: 1vw;
    text-align: left;
	transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    font-size: 1vw;
    opacity: 0;
    transition: all .5s;
}

.nextPreview .nextLabel.in{
	opacity:1;
	right: 0vw;
    top: 20vw;
}

.nextPreview .nextLabel.show{
	opacity:1;
	right: 0vw;
    top: 20vw;
}

/*Credits*/
.logoBox{
	width:20vw;
	height: 20vw;
	background: rgba(180,29,22,.90);
	position: relative;
	margin-left: calc(50% - 10vw);
}

.creditBox{
	margin-top:2vw;
	margin-left: calc(50% - 10vw);
	text-align: left;
	color:white;
	font-size: 1.5vw;
	font-weight: 100;
}

.creditBox b{
	font-size: 1vw;
	margin-left: .7vw;
	text-rendering: geometricPrecision;
	opacity: .5;
}

@media screen and (orientation:portrait){
	/*Credits*/
	.logoBox{
		width:40vw;
		height: 40vw;
		margin-left: calc(50% - 20vw);
	}

	.creditBox{
	    margin-top: 4vw;
	    margin-left: calc(50% - 20vw);
	    text-align: left;
	    color: white;
	    font-size: 3.5vw;
	    font-weight: 300;
	}

	.creditBox b{
		font-size: 2.5vw;
	    margin-left: .7vw;
	    opacity: .5;
	}
}

/*Scroll*/

.scrollTrack{
	width:6px;
	height: 100vh;
	position: fixed;
	right:0px;
	top:0px;
	background-color: rgba(255,255,255,.4);
	z-index: 100;
	transition: all .5s;
}

.scrollTrack .scrollIndicator{
	width:6px;
	height: 100px;
	position: fixed;
	top:0px;
	right:0px;
	background-color:white;
	transition: all.5s;
}

.scrollTrack.hide{
	transform: translateX(100%);
}

.projectSlide .imageCanvas .cell img.projectLogo{
	width:100%;
	height: auto;
}

/*phone*/
@media screen and (orientation:portrait){

	.btPLus {
	    width: 8vw;
	    right: 3.2vw;
	    top: calc(50% - 4.05vw);
	}

	
	.projectSlide {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    text-align: center;
	    /* display: table; */
	    transition: all .5s;
	}
}



/*tablet vertical*/
@media screen and (orientation:portrait) and (min-width:600px) {

	.btPLus {
	    width: 6vw;
	    /*right: 2.7vw;*/
	    right: 1.7vw;
	    top: calc(50% - 3vw);
	}

	.projectSlide.awards .imageCanvas .cell img.seal{
		width:15%;
	}

	.projectSlide {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    text-align: center;
	    /* display: table; */
	    transition: all .5s;
	}
}

/*--------------------- Index --------------------*/

.panel1, .panel2, .panel3, .panel4, .panel5, .panel6,
#logo1, #logo2, #logo3, #logo4, #logo5, #logo6, #logo7, #logo8
{
	cursor: pointer;
}

.CoverWrapper{
	position: fixed;
    width: 100%;
    height: 100%;
	transform: scale3d(1, 1, 1) translate(0%, 0%);
	transition: transform .5s, margin .5s;
	padding: 6vw;
	top:-5px;

	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
}

.CoverWrapper.slow{
	transition: transform 2s, margin .5s;
}

.CoverWrapper.zoom{
	transform:scale3d(1.4, 1,4, 1);
}

.logoBoxHome{
	width:20vw;
	height: 20vw;
	position: fixed;
	top: calc(50% - 10vw);
	z-index: 100;
	right:6px;
	overflow: hidden;
	transition:all .5s, transform .35s;
	pointer-events:none;

	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
	/*transition-delay: .25s;*/
}

@media screen and (orientation:portrait){
	.logoBoxHome{
		width: 30vw;
		height: 30vw;
		top: calc(50% - 15vw);
	}
}

.logoBoxHome img.projectLogo{
	width:100%;
	height: auto;
	position: absolute;
	top:0px;
	transition: all .5s;
	/*transition-delay: .1s;*/
}

.logoBoxHome img.projectLogo.logoIn{
	transform: perspective(500px) translate3d(0%, 0%, 0px);
	-webkit-transform: perspective(500px) translate3d(0%, 0%, 0px);
}

.logoBoxHome img.projectLogo.logoOutBottom{
	transform: perspective(500px) translate3d(0%, 100%, 0px);
	-webkit-transform: perspective(500px) translate3d(0%, 100%, 0px);
}

.logoBoxHome img.projectLogo.logoOutTop{
	transform: perspective(500px) translate3d(0%, -100%, 0px);
	-webkit-transform: perspective(500px) translate3d(0%, -100%, 0px);
}

#sidelogo{
	transition-timing-function: ease-out;
}

#sidelogo.hide{
	transition-timing-function: ease-in;
	transform: translate3d(110%,0,0px);
	/*transform:translateX(calc(20vw + 6px));*/
}

#homeloader{
	top: 100%;
    right: 50%;
    margin-right: -10vw;
    transition-delay:.5s;
    transition-timing-function: ease-out;
    opacity: 0;
    position: fixed;
}

@media screen and (orientation:portrait){
	#homeloader{
	    margin-right: -15vw;
	}
}

.logoBoxHome img.loaderImage{
	width: 10%;
    left: 45%;
    bottom: 8%;
    position: absolute;

    -webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
	transform: translateZ(0);
}

#homeloader.show{
	opacity: 1;
	transition: transform .5s;
    transform: translate3d(0%,-100%,0px);
    transition-delay:.5s;
}

@media screen and (orientation:portrait){
	#sidelogo.hide{
		transition-timing-function: ease-in;
		transform: translate3d(110%,0,0px);
	}

	#homeloader.show{
		opacity: 1;
		transition: transform .5s;
	    transform: translate3d(0%,-100%,0px);
	    transition-delay:.5s;
	}
}

#homeloader.opacityzeronow{
	opacity: 0;
	transition: opacity .5s;
	transition-delay:.5s;
}

/* logo bg colors */
.logoBoxHome.color1{background: rgba(180,29,22,.90);}
.logoBoxHome.color2{background: rgba(255,255,255,.90);}
.logoBoxHome.color3{background: rgba(255,255,255,.90);}
.logoBoxHome.color4{background: rgba(203,0,0,.90);}
.logoBoxHome.color5{background: rgba(255,255,255,.90);}


.logoBoxHome.color2 .loaderImage, .logoBoxHome.color3 .loaderImage, .logoBoxHome.color5 .loaderImage{
	filter: invert(33%);
}



#sidelogo.color6{background: transparent; transform:translate3d(0px, -100%, 0px);}


.logoBoxPortfolio{
	width: 24.25%;
    height: 43%;
    position: relative;
    /*transition: all 1s;*/
    text-align: middle;
    margin: 0vw 1% 1% 0vw;
    border: 0px;
    float: left;
    text-align: center;
    display: block;
    -webkit-perspective: 1000;
	   -moz-perspective: 1000;
	    -ms-perspective: 1000;
			perspective: 1000;
}

.logoLoader{
	width: 24.25%;
    height: 43%;
    position: absolute;
    pointer-events:none;
    top:0px;
    left: 0px;
    display: none;

}

.logoLoader .logoBoxPortfolio{
	width: 100%;
	height: 100%;

	-webkit-backface-visibility: hidden;
	-webkit-perspective: 500px;
	-webkit-transform: rotateX(0deg);
	backface-visibility: hidden;
	perspective: 500px;
	transform: rotateX(0deg);
}

.logoLoader .logoBoxPortfolio .perspectiveWrapper.initial{
	-webkit-transform: rotateX(180deg);
			transform: rotateX(180deg);
}

.logoLoader .logoBoxPortfolio .perspectiveWrapper.initialBackwards{
	-webkit-transform: rotateX(360deg);
			transform: rotateX(360deg);
}

.logoBoxPortfolio .perspectiveWrapper{
	position: relative;
	width: 100%;
	transition: transform .5s;
	transform-style: preserve-3d;	
}

.logoBoxPortfolio:hover .perspectiveWrapper{
	-webkit-transform:  rotateX(-180deg);
			transform:  rotateX(-180deg);
}

.logoBoxPortfolio .front{
	position: absolute;
	-webkit-backface-visibility: hidden;
   	backface-visibility: hidden;
   	z-index: 2;
   	width: 100%;
   	height: 100%;
   	transform-style: preserve-3d;
}

.logoBoxPortfolio .front img{
	-webkit-backface-visibility: hidden;
}

.logoBoxPortfolio .back{
	background-color: white;
	display:block;
	width: 100%;
	height: 100%;
}

/*.logoBoxPortfolio:hover{
	-webkit-transform: rotateX(180deg);
			transform: rotateX(180deg);
}*/

.logoBoxPortfolio .cel{
	display: table-cell;
	vertical-align: middle;
}

.logoBoxPortfolio img{
	width: 100%;
	height: 100%;
}

@media screen and (orientation:portrait){
	.logoBoxPortfolio{
		width: 49.5%;
	    height: 23.65%;
	    position: relative;
	    /*transition: all 1s;*/
	    text-align: middle;
	    margin: 0vw 1% 1% 0vw;
	    border: 0px;
	    float: left;
	    text-align: center;
	    -webkit-perspective: 1000;
		   -moz-perspective: 1000;
		    -ms-perspective: 1000;
				perspective: 1000;
	}

	.logoBoxPortfolio img{
		width: 100%;
		height: 100%;
	}

	.noMarginRightVert{
		margin-right: 0px;
	}
}

@media screen and (orientation:portrait) and (min-width:600px) {
	.logoBoxPortfolio{
		width: 49.5%;
	    height: 23.2%;
	    position: relative;
	    transition: transform 1s;
	    text-align: middle;
	    margin: 0vw 1% 1% 0vw;
	    border: 0px;
	    float: left;
	    text-align: center;
	    -webkit-perspective: 1000;
		   -moz-perspective: 1000;
		    -ms-perspective: 1000;
				perspective: 1000;	    
	}

	.noMarginRightVert{
		margin-right: 0px;
	}
}

.projectCover.paddingTop{
	padding-top: 6.2%;
}

.projectCover .panelName.paddingLeft{
	padding-left: 6.2%;
}

.logoBoxPortfolio.noMarginRight{
	margin-right:0px;
}

.logoBoxPortfolio .front.color1{background-color: #ed2726;}
.logoBoxPortfolio .front.color2{background-color: #f1ea35;}
.logoBoxPortfolio .front.color3{background-color: #42b6a3;}
.logoBoxPortfolio .front.color4{background-color: #2187a7;}
.logoBoxPortfolio .front.color5{background-color: #3c4242;}
.logoBoxPortfolio .front.color6{background-color: #8ec749;}
.logoBoxPortfolio .front.color7{background-color: #27a1c6;}
.logoBoxPortfolio .front.color8{background-color: #345276;}

.homeBlurredBackground{
	position: fixed;
	left:0%;
	top:0%;
	width:100%;
	height: 100%;
	background-size: cover;
	background-position: center center;	
	transition: all .5s;

	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
}

.homeBlurredBackground.blur1{background-image: url(../img/projects/zenarts/cover-blurred.jpg);}
.homeBlurredBackground.blur2{background-image: url(../img/projects/sunbit/cover-blurred.jpg);}
.homeBlurredBackground.blur3{background-image: url(../img/projects/dburns/cover-blurred.png);}
.homeBlurredBackground.blur4{background-image: url(../img/projects/beckmen/cover-blurred.jpg);}
.homeBlurredBackground.blur5{background-image: url(../img/projects/alteragents/cover-blurred.png);}
.homeBlurredBackground.blur6{background-image: url(../img/projects/zenarts/cover-blurred.jpg);}
.homeBlurredBackground.blur7{background-image: url(../img/about/cover-blurred.jpg);}
.homeBlurredBackground.blur8{background-image: url(../img/projects/zenarts/cover-blurred.jpg);}
.homeBlurredBackground.blur9{background-image: url(../img/projects/zenarts/cover-blurred.jpg);}


.homeBlurredBackgroundLoader{
	background-image: url(../img/about/cover-blurred.jpg), url(../img/projects/zenarts/cover-blurred.jpg), url(../img/projects/dburns/cover-blurred.png), url(../img/projects/sunbit/cover-blurred.jpg), url(../img/projects/beckmen/cover-blurred.jpg), url(../img/projects/alteragents/cover-blurred.png);
	opacity:0;
	pointer-events:none;
}


.projectCover .panelName {
    position: absolute;
    top: 140px;
    right: -168px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    width: 300px;
    color: white;
    transition: all .5s;
    transition-delay: .25s;
}

.projectCover.panelOut .panelName {
   /* top: 26vh;*/
    transition: all .5s;
    transition-delay: 0s;
    /*right: -185px;*/
    opacity: 0;
}

@media screen AND (orientation:portrait){
	.projectCover.panelOut .panelName {
	    /*top: 26vh;*/
	    opacity: 0;
	}
}

.projectCover .panelName .number{
	color:yellow;
}

@media screen AND (orientation:portrait){
	.CoverWrapper{
		padding: 8vw;
	}
}

@media screen AND (orientation:portrait) and (max-width:600px){
	.CoverWrapper{
		padding: 12vw;
	}
}

.projectCover{
	width:100%;
	height: 100%;
	position: relative;
	/*margin: 0.5% 0% 0.5% 0%;*/
	margin:5px 0px 5px 0px;
	background-size: cover;
	background-position: center center;
	transition: opacity .5s, -webkit-filter 2s, margin .5s;
	/*overflow: hidden;*/

	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
}


.projectCover .bgimage{
	width:100%;
	height: 100%;
	position: relative;
	background-size: cover;
	background-position: center center;
	transition: opacity .5s, -webkit-filter 1s;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
	transition: all .5s;
}

.projectCover.panelOut .bgimage{
	/*width:101%;
	height: 100%;
	margin-left: -1%;
	margin-top: -0%;*/
}

.projectCover.panelIn{
	opacity:1;
}

.CoverWrapper.inProject .projectCover{
	margin:0px;
}

.projectCover.panelIn.noBorder{
	margin: 0px -5px;
}

.projectCover.panelOut{
	opacity:0.3;
	pointer-events:none;
/*	-webkit-filter: grayscale(60%) brightness(200%);;*/
/*    filter: grayscale(60%) brightness(200%);;*/
}

.projectCover.branding.panelOut{
	opacity: 0;
}

.projectCover.panelOut.bright{
	opacity:0.3;
	pointer-events:none;
/*	-webkit-filter: grayscale(60%) brightness(130%);;
    filter: grayscale(60%) brightness(130%);;*/
}



.projectCover.panelOut.opacity100{
	opacity:1;
/*	-webkit-filter: brightness(.5);*/
}

.projectCover.panelOut.opacity100bright{
	opacity:1;
/*	-webkit-filter: brightness(1);*/
}


.pageLoader{
	width: 100%;
	height: 100%;
	left:-100%;
	top: 0px;
	position: fixed;
}

.pageLoader.show{
	left:0px; 
}

.pageLoader.slideUp{
	transition: transform .5s;
	transform: translateY(-100%);
}

.pageLoader.slideDown{
	transition: transform .5s;
	transform: translateY(100%);
}

/*--------------------- About --------------------*/

.AboutWrapper{
	overflow: hidden;
}

.aboutIntro{
	width:100%;
	height: 100%;
	position: fixed;
	text-align: center;
	display: table;
	transition: all .5s;
}

.aboutIntro .cell{
	display: table-cell;
	vertical-align: middle;
}

.aboutIntro.panelIn{
	top:0%;
	background-color: #CCCCCC;
}

.aboutIntro.panelOutBottom{
	top:100%;
	background-color: #CCCCCC;
}

.aboutIntro.panelOutTop{
	top:-100%;
	background-color: #CCCCCC;
}


/*--------------------- Project --------------------*/

.overlayShadow{
	width:100%;
	height: 80%;
	position: absolute;
	bottom:0px;
	left: 0px;
	z-index: -1;
	opacity: 1;
	transition:all .5s;
	transition-delay:0s;
	/*background-color: rgba(0,0,0,.5);*/

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+1,0.75+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 70%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.7) 70%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.7) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a7000000',GradientType=0 ); /* IE6-9 */

}

.panelIn .overlayShadow{
	opacity: 1;
	transition-delay: .5s;
}

.panelOutBottom .overlayShadow, .panelOutTop .overlayShadow, .panelOutTopTop .overlayShadow{
	opacity: 0;
	transition-delay: .5s;
}

@media screen and (orientation:landscape){
	.overlayShadow, .panelIn .overlayShadow{
		opacity: 0;
	}
}

@media screen and (orientation:portrait){
	.panelIn .overlayShadow{
		opacity: 1;
		transition-delay: .5s;
	}
}

.projectBackground{
	position: fixed;
	left:0%;
	top:0%;
	width:100%;
	height: 100%;
	background-image: url(../img/projects/zenarts/cover.jpg);
	background-size: cover;
	background-position: center center;	
	transition: all .5s;
}

.projectBackgroundblurred{
	position: fixed;
	left:0%;
	top:0%;
	width:100%;
	height: 100%;
	background-image: url(../img/projects/zenarts/cover-blurred.jpg);
	background-size: cover;
	background-position: center center;	
	transition: all .5s;
	transition-delay: 0s;
}

.finalSlide{
	/*transform: translateY(calc(-15%));*/
	/*margin-top: calc(-36vh + 8vw);*/
	transition: all .5s;
	transition-delay: .7s;

	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
}

@media screen and (orientation:portrait){
	.finalSlide{
		/*margin-top: calc(-36vh + 11.5vw);*/
		/*margin-top: calc(-36%);*/

		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
		-webkit-transform: translate3d(0,0,0);
		-webkit-transform: translateZ(0);
		backface-visibility: hidden;
		perspective: 1000;
		transform: translate3d(0,0,0);
	}
}

@media screen and (orientation:portrait) and (min-width: 601px){
	.finalSlide{
		/*margin-top: calc(-36vh + 11.5vw);*/
		/*margin-top: calc(-34%);*/
	}
}

.projectBackground.blur{
/*	left:-15%;
	top:-15%;
	width:130%;
	height: 130%;
	-webkit-filter: blur(100px); 
	filter: blur(100px); */
}

.ProjectWrapper, .HomeWrapper{
	overflow: hidden;
	position:fixed;
	width: 100%;	
	height: 100%;
	transition: all .5s;
	transition-delay:.3s;
}

.ProjectWrapper.fadeContent, .HomeWrapper.fadeContent{
	transition-delay:0s;
	transform: translate3d(30%, 0%,0px);
}

@media screen and (orientation:landscape){
	.ProjectWrapper p, .HomeWrapper p{
		font-weight: 200;
		color:white;
		font-size: 1.5vw;
	}
}

@media screen and (max-width: 1024px) and (orientation:landscape){
	.ProjectWrapper p, .HomeWrapper p{
		font-weight: 200;
		color:white;
		font-size: 1.5vw;
	}
}

.projectSlide{
	width:100%;
	height: 100%;
	position: fixed;
	text-align: center;
	/*display: table;*/
	transition: all .5s;
	/*transition-timing-function: linear;*/
}

/*Covers*/
.projectCover.panel1 .bgimage{ background-image:url('../img/projects/zenarts/cover.jpg'); }
.projectCover.panel2 .bgimage{ background-image:url('../img/projects/sunbit/cover.jpg'); }
.projectCover.panel3 .bgimage{ background-image:url('../img/projects/dburns/cover.jpg'); }
.projectCover.panel4 .bgimage{ background-image:url('../img/projects/beckmen/cover.jpg'); }
.projectCover.panel5 .bgimage{ background-image:url('../img/projects/alteragents/cover.jpg'); background-position: center top; }
.projectCover.panel6 .bgimage{ background-color: transparent; }
/*.projectCover.panel6 .bgimage{ background-image:url('../img/about/cover.jpg'); background-position: center top; }*/

@media screen and (orientation:portrait){
	.projectCover.panel1 .bgimage{ background-image:url('../img/projects/zenarts/cover-v.jpg'); }
	.projectCover.panel2 .bgimage{ background-image:url('../img/projects/sunbit/cover-v.jpg'); }
	.projectCover.panel3 .bgimage{ background-image:url('../img/projects/dburns/cover-v.jpg'); }
	.projectCover.panel4 .bgimage{ background-image:url('../img/projects/beckmen/cover-v.jpg'); }
	.projectCover.panel5 .bgimage{ background-image:url('../img/projects/alteragents/cover-v.jpg'); background-position: center top; }
	.projectCover.panel6 .bgimage{ background-color: transparent; }
	/*.projectCover.panel6 .bgimage{ background-image:url('../img/about/cover.jpg'); background-position: center top; }*/
}

/*About--------------------*/
.projectCover.about.panelIn .bgimage .mainImage{
	transition-delay:.25s;
	opacity: 1;
}

.projectCover.about.panelOut .bgimage .mainImage{
	transition-delay:0s;
	opacity: 0;
}

.projectCover.about .bgimage .mainImage{
	width: 100%;
    height: auto;
    position: absolute;
    left: 0px;
    top: 0px;
    transition: all .5s;
}




@media screen and (min-aspect-ratio: 1920/1080){
	.projectCover.about .bgimage .mainImage{
		width: 100%;
    	height: auto;
	}
}

@media screen and (max-aspect-ratio: 1920/1080){
	.projectCover.about .bgimage .mainImage{
		height: 100vh;
    	width: 177vh;
    	left: calc((100vw - 177vh)/2);
	}
}

/*FullVideoLeft*/

@media screen and (min-aspect-ratio: 1920/1080){
	.projectSlide .fullVideoLeft, .projectSlide .imageCanvas .cell img.fullVideoLeft{
		width: 100%;
    	height: auto;
    	left:0px;
    	top:0px;
    	position: absolute;
	}
}

@media screen and (max-aspect-ratio: 1920/1080){
	.projectSlide .fullVideoLeft, .projectSlide .imageCanvas .cell img.fullVideoLeft{
		height: 100vh;
    	width: 177vh;
    	left:0px;
    	top:0px;
    	position: absolute;
    	/*left: calc((100vw - 177vh)/2);*/
	}
}

.projectCover.about{
	width: calc(100% + 12vw);
    height: calc(100% + 12vw);
    margin-left: -6vw;
    margin-top: -6vw;
}

.projectCover.about .contentArea{
	position: absolute;
	left: 6vw;
	top:6vw;
	/*background-color: white;*/
	z-index: 2;
	width: calc(100% - 12vw);
	height: calc(100% - 12vw);
	display: table;
}

.projectCover.about .contentArea .logotype{
	width: 24.52vw;
    height: 7vw;
    position: absolute;
    top: 50%;
    left: 0px;
    margin-top: calc(-3.6vw);
    transition: all .5s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.about .projectSlide.panel1 .cell .textArea{
    width: 66%;
    margin-left: 4%;
    height: auto;
    position: relative;
    text-transform: uppercase;
    color: white;
    font-size: 3.2vw;
    font-weight: 100;
    transition: all .5s;
    transition-delay: .5s;
    margin-top: 0px;
}



@media screen and (orientation:portrait){

	.projectCover.about {
	    width: calc(100% + 24vw);
	    height: calc(100% + 24vw);
	    margin-left: -12vw;
	    margin-top: -12vw;
	}

	.projectCover.about .contentArea .logotype {
	    width: 49.04vw;
	    height: 14vw;
    	left: 4%;
	    margin-top: calc(-7.7vw);
	}

	.arrowDown {
	    left: calc(50% - 15vw);
	    width: 30vw !important;
	    height: auto !important;
	}

	.arrowDown.portfolio {
	    left: calc(50% - 17vw);
	    width: 30vw !important;
	    height: auto !important;
	}
	
	.about ..panel1 .cell {
	    vertical-align: bottom;
	    padding: 8vw 8vw;
	}

	.about .projectSlide.panel1 .cell .textArea {
	    width: 79%;
	    top: calc(50% - 4vw);
	    left: 9%;
	    height: auto;
	    position: absolute;
	    text-transform: uppercase;
	    color: white;
	    font-size: 5vw;
	    font-weight: 100;
	    transition: all .5s;
	    transition-delay: .5s;
	    margin-top: 0px;
	}
}

@media screen and (orientation:portrait) and (min-width: 601px){

	.projectCover.about{
		width: calc(100% + 16vw);
	    height: calc(100% + 16vw);
	    margin-left: -8vw;
	    margin-top: -8vw;
	}
}

.projectCover.about .contentArea .tagline{
	height: 40vh;
    top: calc(50% - 20vh);
    right: 0px;
    position: absolute;
    transition: all .5s;
}

@media screen and (orientation:portrait){
	.projectCover.about .contentArea .tagline{
	    right: 8vw;
	}
}

.projectCover.about.panelIn .contentArea .tagline{
	transition-delay:.5s;
	opacity: 1;
}

.projectCover.about.panelOut .contentArea .tagline{
	transition-delay:0s;
	opacity: 0;
	/*margin-top: 30vh;*/
	transform:translate3d(0%,30%,0px);
}

.projectCover.about .contentArea .cell{
	display: table-cell;
	vertical-align: middle;
}

.projectCover.about.panelIn .arrowDown{
	margin-bottom: 0vh;
	transition-delay: 1s;
	cursor: pointer;
}

.projectCover.about.panelOut .arrowDown{
	margin-bottom: -10vh;
	transition-delay: 1s;
}


.projectCover.about.panelOut .arrowDown:hover{
	opacity: 1;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: .3; }
    100% { opacity: 1; }
}



.panelOut .pulse {opacity: 0.3;}
.panelIn .pulse {
	opacity: 0.3;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    animation-duration: 2.3s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

.pulse:hover{
	opacity: 1;
	animation-play-state: paused;
	animation-fill-mode: initial;
}

.projectCover.about .contentArea .textArea{
	width: 66%;
    margin-left: 4%;
    height: 100%;
    position: absolute;
    left: -100vw;
    top: 0px;
    text-transform: uppercase;
    color: white;
    display: table;
    font-size: 3.2vw;
    font-weight: 100;
    transition: all .5s;
    transition-delay: .5s;
}

.ProjectWrapper.about .projectSlide{
	overflow: hidden;
}

.ProjectWrapper.about .projectSlide.panelOutTop, .ProjectWrapper.about .projectSlide.panelIn{
	transition-delay:.5s;
}

/*enterAbout */
.projectSlide.panelOutTop .aboutNext, .projectSlide.panelOutTopTop .aboutNext{
	/*margin-bottom: -10vh;*/
	transform:translate3d(0,170%,0);
	transition-delay: 0s;
}

.projectSlide.panelIn .aboutNext{
	transform:translate3d(0,0%,0);
	transition-delay: 1s;
}


.projectCover.about.loadAbout .arrowDown.first{
	/*margin-bottom: -10vh;*/
	transition-delay: 0s;
	transform:translate3d(0,170%,0);
}

.projectCover.about.enterAbout .bgimage img{
	/*margin-left: 47vw;*/
	transform:translate3d(47vw,0%,0px);
}

.projectCover.about.enterAbout .contentArea .tagline{
	opacity: 0;
	/*margin-top: -10vh;*/
	transform:translate3d(0%,-30%,0px);
	transition-delay: 0s;
}

.projectCover.about.enterAbout .contentArea .logotype{
	width: 24.52vw;
    height: 7vw;
    /*left: calc(100% - 24.52vw);*/
    transform: translate3d(calc(100vw - 35.52vw),0,0px);
    transition-delay: .5s;
}

@media screen and (orientation:portrait){
	.projectCover.about.enterAbout .contentArea .logotype {
	    width: 49.04vw;
	    height: 14vw;
	    left: 4%;
	    /*top: 25%;*/

	    transform: translate3d(0,-22vh,0px);
	}
}

.projectCover.about.enterAbout .contentArea .textArea{
	left:0px;
}

.projectCover.about .contentArea .textArea .cell{
	vertical-align: middle;
}

.projectCover.about .contentArea .textArea strong{
	color:black;
	font-weight: 200;
}

.scrollArea{
	width: 100vw;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.scrollContent{
	width:140vw;
	display: table;
	height: 100%;
}

.scrollContent .cell{
	display: table-cell;
	vertical-align: middle;
}

/* Hide Elements */
.projectCover.about .bgimage, .projectCover.about .logotype{
	opacity: 1
	transition: all .5s;
}

.projectCover.about.hideElements .bgimage, .projectCover.about.hideElements .logotype{
	opacity: 0;
}

/*About End ---------------- */

.projectSlide, .projectSlide .imageCanvas,  .projectSlide .imageCanvas .cell, .projectSlide .imageCanvas .cell .textArea, .projectSlide .imageCanvas .cell img {
/*	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);*/
}

.projectSlide.panelOutBottom.darken .imageCanvas, .projectSlide.panelOutTop.darken .imageCanvas{
	background-color: rgba(0,0,0,0.0);
	transition: all 2s;
	transition-delay: .5s;
}

.projectSlide.panelIn.darken .imageCanvas{
	background-color: rgba(0,0,0,0.7);
	transition: all 2s;
	transition-delay: .5s;
}

.background-height{
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

.background-cover{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.projectSlide .cell{
	display: table-cell;
	vertical-align: middle;
	padding: 6vw;
	cursor: default;
}

.projectSlide .cell.noPadding{
	padding: 0vw;
	width: 100%;
}

@media screen and (orientation:portrait){
	.projectSlide .cell.hideVertical{display:none;}
}

@media screen and (orientation:landscape){
	.projectSlide .cell.hideHorizontal{display:none;}
}

.projectSlide .cell.noPadding .illustraLeft, .projectSlide .cell.noPadding .illustraRight{
	width: 50%;
}

@media screen and (orientation:portrait){
	.projectSlide .cell.noPadding .illustraLeft, .projectSlide .cell.noPadding .illustraRight{
	    width: 100%;
	    height: 50%;
	    margin: 0px;
	}
}

.projectSlide.panel2 .cell{
	padding: 0vw;
}

.projectSlide .imageCanvas .cell.twoCells img{
	width: 100%;
	height: auto;
}

.projectSlide .cell .textArea{
	width: 45%;
	text-align: left;
	margin-left: 5vw;
	transition: all .5s;
	transition-delay: .5s;
	margin-top: 10%;
}

.projectSlide .imageCanvas .oneCells {
	width: 100%;
	height: 100%;
	display: table;
	float: left;
}

.projectSlide .imageCanvas .twoCells {
	width: 50%;
	height: 100%;
	display: table;
	float: left;
}

.projectSlide .imageCanvas .twoCells .twoLines {
	width: 100%;
	height: 50%;
	float: left;
	padding:0px;
}

.projectSlide .imageCanvas .twoCells.borderRight{
	border-right: 1px solid #ddd;
}

.projectSlide .imageCanvas .twoCells .cell img{
	width: 90%;
	height: 100%;
}

@media screen and (orientation:portrait){

	.projectSlide .imageCanvas .twoCells {
		width: 100%;
		height: 50%;
		display: table;
		float: left;
	}

	.projectSlide .imageCanvas .twoCells.borderRight{
		border-bottom: 1px solid #CCC;
		border-right:0px;
	}

	.projectSlide .imageCanvas .twoCells .cell img{
		width: 80%;
		height: auto;
	}
}

.projectSlide.panelOutBottom .cell .textArea{
	opacity:0;
	transition-delay: .5s;
}

.projectSlide.panelOutTop .cell .textArea{
	opacity:0;
	transition-delay: 0s;
}

.projectSlide .cell .textArea h2{
	color: white;
    font-weight: 100;
    font-size: 6vw;
    line-height: 6vw;
    margin: 0px;
}

.projectSlide .cell .textArea h2.blackText{
	color: black;
}

.projectSlide .cell .textArea p.blackText{
	color: black;
}

.blackText, .projectSlide.NoPerspective .nextProject.blackText h4{
	color: black;
    /*opacity: 1;*/
}

.projectSlide.blackText .cell .textArea h2{
	color: black;
    opacity: .6;
}

.projectSlide.blackText .cell .textArea p{
	color: black;
    opacity: 1;
}

.projectSlide .cell .textArea h5{
	color: white;
    font-size: 1.4vw;
    pointer-events:pointer;
    transition: all .3s;
    margin-left:0px;
}

@media screen and (orientation:landscape){
	.projectSlide .cell .textArea h5:hover{
		/*margin-left: .5vw;*/
		opacity: .6;
	}
}

@media screen and (orientation:portrait){

	.projectSlide .cell .textArea h5{
	    font-size: 2.5vh;
	}

}

.projectSlide .cell .textArea .video-icon{
	height: 1em;
    width: auto;
    margin: 0em .8em -.12em 0em;
}



.projectSlide.panelIn.delay{
	transition-delay: .5s
}






.projectSlide.NoPerspective .imageCanvas{
	height:85%;
}

.projectSlide.NoPerspective.fullHeight .imageCanvas{
	height:100%;
}

.projectSlide.NoPerspective .nextProject{
	height: 15%;
	position: absolute;
	top:101%;
	width: 100%;
	transition: all .5s;
	transition-delay:.7s;
}

.nextProjectLink, .nextBrandingLink{
	cursor: pointer;
}


.projectSlide.NoPerspective .nextProject h4{
	font-size: 5vh;
    font-weight: 100;
    line-height: 6vh;
    margin: 0px;
    margin-top: -1vh;
    padding: 5vh;
    color: #000;
    background-color: white;
    width: 100%;
    text-align: center;
    transition: all .2s;
}

.slideUp .projectSlide.NoPerspective .nextProject h4{
	/*opacity: 0;*/
}

.slideUp .projectSlide.panelIn.NoPerspective .nextProject {
	top:110%;
	/*opacity: 0;*/
}

@media screen and (orientation:portrait){

	.projectSlide.NoPerspective .nextProject h4{
		font-size: 4vh;
	}
}

.projectSlide.panelIn.NoPerspective .nextProject{
	/*top:85%;*/
	transform: translate3d(0%, -100%, 0px);
}

.projectSlide.panelIn.NoPerspective .nextProject.hide{
	/*top:110%;*/
	transform: translate3d(0%, 10%, 0px);
	transition-delay:0s;
}

.projectSlide.panelIn{
	-webkit-transform: perspective(500px) translate3d(0%, 0%, 0px); -webkit-perspective: 1000 backface-visibility: hidden;
	transform: perspective(500px) translate3d(0%, 0%, 0px); -webkit-perspective: 1000 backface-visibility: hidden;
	opacity: 1;
	/*transition-delay: .5s;*/
}

.projectSlide.panelOutBottom{
	-webkit-transform: perspective(500px) translate3d(0%, 0%, 300px);
	transform: perspective(500px) translate3d(0%, 0%, 300px);
	opacity: 0;
	pointer-events:none;
	transition: all .3s;
}


.projectSlide.SlideTopOut.panelOutTop{
	-webkit-transform: perspective(500px) translate3d(0%, 0%, 0px);
	transform: perspective(500px) translate3d(0%, -100%, 0px);
	opacity: 1;
	pointer-events:none;
}

.projectSlide.panelOutTop{
	-webkit-transform: perspective(500px) translate3d(0%, -15%, -300px);
	transform: perspective(500px) translate3d(0%, -15%, -300px);
	opacity: 1;
	pointer-events:none;
}

.projectSlide.panelOutTop.panelOutTopStay{
	transform: perspective(500px) translate3d(0%, 0%, 0px);
	opacity: 1;
	pointer-events:none;
}

.projectSlide.panelOutTopTop{
	-webkit-transform: perspective(500px) translate3d(0%, -30%, -600px);
	transform: perspective(500px) translate3d(0%, -30%, -600px);
	opacity: 0;
	pointer-events:none;
}


.projectSlide.NoPerspective{
	-webkit-transform: perspective(500px) translate3d(0%, 100%, 0px);
	transform: perspective(500px) translate3d(0%, 100%, 0px);
	opacity: 1;
	/*pointer-events:none;*/
}

.projectSlide.panelIn.NoPerspective{
	-webkit-transform: perspective(500px) translate3d(0%, 0%, 0px);
	transform: perspective(500px) translate3d(0%, 0%, 0px);
	opacity: 1;
}

.projectSlide.panelOutTop.NoPerspective, .projectSlide.panelOutTopTop.NoPerspective{
	-webkit-transform: perspective(500px) translate3d(0%, -100%, 0px);
	transform: perspective(500px) translate3d(0%, -100%, 0px);
	opacity: 1;
}

.projectSlide.NoPerspectiveNoSlide, .projectSlide.panelIn.NoPerspectiveNoSlide {
	transform: perspective(500px) translate3d(0%, 0%, 0px);
	opacity: 1;
	/*pointer-events:none;*/
}

.projectSlide.panelOutBottom.NoPerspectiveNoSlide {
	transform: perspective(500px) translate3d(0%, 0%, 0px);
	opacity: 0;
	/*pointer-events:none;*/
}

.projectSlide.panelOutTop.NoPerspectiveNoSlide, .projectSlide.panelOutTopTop.NoPerspectiveNoSlide {
	transform: perspective(500px) translate3d(0%, -15%, -300px);
	opacity: 0;
	/*pointer-events:none;*/
}




/*FOR LOGO---------------------------*/

.logoProjectWrapper .projectSlide.panelIn{
	transform: perspective(500px) translate3d(0%, 0%, 0px); -webkit-perspective: 1000 backface-visibility: hidden;
	opacity: 1;
	transition-delay: .3s;
}

.logoProjectWrapper .projectSlide.panelOutBottom{
	transform: perspective(500px) translate3d(0%, 100%, 0px);
	opacity: 1;
	pointer-events:none;
	transition: all .3s;
}


.logoProjectWrapper .projectSlide.SlideTopOut.panelOutTop{
	transform: perspective(500px) translate3d(0%, -100%, 0px);
	opacity: 1;
	pointer-events:none;
}

.logoProjectWrapper .projectSlide.panelOutTop, .logoProjectWrapper .projectSlide.panelOutTopTop{
	transform: perspective(500px) translate3d(0%, -100%, 0px);
	opacity: 1;
	pointer-events:none;
}

.logoProjectWrapper .projectSlide.NoPerspective{
	-webkit-transform: perspective(500px) translate3d(0%, 100%, 0px);
	transform: perspective(500px) translate3d(0%, 100%, 0px);
	opacity: 1;
	/*pointer-events:none;*/
}

.logoProjectWrapper .projectSlide.panelIn.NoPerspective{
	-webkit-transform: perspective(500px) translate3d(0%, 0%, 0px);
	transform: perspective(500px) translate3d(0%, 0%, 0px);
	opacity: 1;
}

.logoProjectWrapper .projectSlide.panelOutTop.NoPerspective, .projectSlide.panelOutTopTop.NoPerspective{
	-webkit-transform: perspective(500px) translate3d(0%, -100%, 0px);
	transform: perspective(500px) translate3d(0%, -100%, 0px);
	opacity: 1;
}

/*blur content for #1*/

.logoProjectWrapper .panel1.projectSlide.panelOutTop, .logoProjectWrapper .panel1.projectSlide.panelOutTopTop{
	transform: perspective(500px) translate3d(0%, 0%, 0px);
	top:0%;
	pointer-events:none;
	transition: all 1s;
}

.logoProjectWrapper .panel1.projectSlide.panelOutTop .coverLogo, .logoProjectWrapper .panel1.projectSlide.panelOutTopTop .coverLogo{
	-webkit-filter: blur(2vw);
	filter: blur(2vw);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000px;
	backface-visibility: hidden;
	perspective: 1000px;
	transition: all 1s;

	opacity: 0;
}

/*.logoProjectWrapper .projectSlide.panelOutBottom{
	-webkit-transform: perspective(500px) translate3d(0%, 100%, 0px);
	transform: perspective(500px) translate3d(0%, 100%, 0px);
	top:100%;
	opacity: 1;
	pointer-events:none;
}

.logoProjectWrapper .projectSlide.panelOutTop, .logoProjectWrapper .projectSlide.panelOutTopTop{
	-webkit-transform: perspective(500px) translate3d(0%, -100%, 0px);
	transform: perspective(500px) translate3d(0%, -100%, 0px);
	top:-100%;
	opacity: 1;
	pointer-events:none;
}

.logoProjectWrapper .panel1.projectSlide.panelOutTop, .logoProjectWrapper .panel1.projectSlide.panelOutTopTop{
	-webkit-transform: perspective(500px) translate3d(0%, 0%, 0px);
	transform: perspective(500px) translate3d(0%, 0%, 0px);
	top:0%;
	pointer-events:none;
	transition: all 1s;
}

.logoProjectWrapper .panel1.projectSlide.panelOutTop .coverLogo, .logoProjectWrapper .panel1.projectSlide.panelOutTopTop .coverLogo{
	-webkit-filter: blur(2vw);
	filter: blur(2vw);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000px;
	backface-visibility: hidden;
	perspective: 1000px;

	opacity: 0;
}
*/

.projectSlide .whiteArea{
    height: 40%;
    width: 88vw;
    bottom: -50%;
    left: 6vw;
    position: relative;
    background-color: rgba(255,255,255,.07);
    transition: all .5s;
}

.projectSlide .whiteArea.centered{
    bottom: -30%;
}

.projectSlide .whiteArea.ƒ{
    bottom: -30%;
}

.projectSlide .whiteArea.strong{
	background-color: rgba(255,255,255,.20);
}

.projectSlide .whiteArea.medium{
	background-color: rgba(255,255,255,.12);
}

.projectSlide .whiteArea.third{
    height: 30%;
    bottom: -60%;
}

@media screen and (orientation:portrait){
	.projectSlide .whiteArea.third{
	    height: 30%;
	    bottom: 6vw;
	}
}
   
.paddingSlide{padding: 6vw;}

@media screen and (orientation:portrait){
	.paddingSlide {
	    padding: 8.5vw;
	}
}

@media screen and (orientation:portrait) and (max-width: 600px){
	.paddingSlide {
	    padding: 12.5vw;
	}
}

.whiteBG{
	background-color: white;
}

.paddingWrapper{
	width: 100%;
    height: 100%;
    padding: 0vw 0vw;
    display: table;
}

@media screen and (orientation:portrait){
	.paddingWrapper{
		width: 100%;
	    height: 100%;
	    padding: 0vw 6vw;
	    display: table;
	}
}

.projectSlide .whiteAreaFull{
    height: 100%;
    width: 100%;
    position: relative;
    background-color: rgba(255,255,255,1);
    transition: all .5s;
}

.projectSlide.panelOutTop .whiteArea, .projectSlide.panelOutTopTop .whiteArea{
	opacity: 0;
}

.projectSlide .imageCanvas{
    position: absolute;
    top: 0vw;
    left: 0vw;
    width: 100vw;
    height: 100%;
    display: table;
}

.projectSlide .imageCanvas .cell img{
	height: 70vh;
	width: auto;
}

.projectSlide .imageCanvas .cell img.fullWidth{
	height: auto;
	width: 100%;
}

.projectSlide.concept .imageCanvas .cell img{
	height: 90vh;
	width: auto;
}

.coverLogo{
	width: 100%;
	height: 100%;
	transition: all 1s;
}

@media screen and (orientation:portrait){
	.projectSlide.concept .imageCanvas .cell img{
		width: 70vw;
		height: auto;
	}
}

/*.projectSlide.panelOutBottom .imageCanvas .cell img.bottomLeft{
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.projectSlide.panelOutBottom .imageCanvas .cell img.topRight{
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}*/

.projectSlide .imageCanvas .cell img.bottomLeft{
    height: auto;
    width: 65vw;
    bottom: 5%;
    position: absolute;
    left: 5%;
/*    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);*/
}

.projectSlide .imageCanvas .cell img.topRight{
    position: absolute;
    top: 10%;
    right: 10%;
    width: 20%;
    height: auto;
/*    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);*/
}

.projectSlide .illustraLeft{
	width:calc(50% - 1vw);
	height: 100%;
	position: relative;
	float:left;
	background-size: cover;
	background-position: center center;
	transition: all .5s;
	transition-delay:.3s;
	opacity: 1;
}

.projectSlide .illustraRight{
	width:calc(50% - 1vw);
	height: 100%;
	position: relative;
	float:right;
	background-size: cover;
	background-position: center center;
	transition: all .5s;
	transition-delay:.3s;
	opacity: 1;
}

.projectSlide.panelOutBottom .illustraRight{
    transform: translate3d(0%,-20%,0px);
    opacity: 0;
}

.projectSlide.panelOutBottom .illustraLeft{
    transform: translate3d(0%, 20%,0px);
    opacity: 0;
}

.projectSlide.panelOutTop .illustraRight{
    transform: translate3d(50%, 0%,0px);
    opacity: 0.5;
    transition-delay:0s;
}

.projectSlide.panelOutTop .illustraLeft{
    transform: translate3d(-50%, 0%,0px);
    opacity: 0.5;
    transition-delay:0s;
}



.projectSlide .cell img.introImage{
	position: absolute;
    left: 50%;
    bottom: -15vw;
    width: auto;
    height: 137vh;
    transition: all .5s;
}

.projectSlide.panelOutTop .cell img.introImage{
    /*left: 75%;*/
    -webkit-transform: translate(50%, 0%);
    transform: translate(50%, 0%);
}

.projectSlide.panelOutTop.disappear{
	opacity: 0;
}

.projectSlide.panelOutTop.fade{
	opacity: 0.5;
}

.projectSlide.panelOutTop .imageCanvas .cell h4, .projectSlide.panelOutTopTop .imageCanvas .cell .textArea{
	opacity: 0;
}

.projectSlide.panelOutBottom .imageCanvas .cell h4{
	opacity: 0;
}

.projectSlide .imageCanvas .cell h4{
    color: white;
    text-align: left;
    position: absolute;
    font-size: 4vw;
    font-weight: 100;
    margin: 0px;
    line-height: 110%;
    transition: all .5s;
    transition-delay:.5s;
}

.projectSlide .imageCanvas .cell h4.topLeft{
	top: 7vw;
    left: 10%;
    pointer-events:none;
}

.projectSlide .imageCanvas .cell h4.topRight {
    top: 7vw;
    left: 10%;
    pointer-events: none;
    text-align: right;
    width: 80%;
}

.projectSlide .imageCanvas .cell h4.middleLeftTwoLines{
	top: 0px;
	left: 0%;
    width: 100%;
    height: 100%;
    display: table;
    /*border: 2px solid red;*/
    pointer-events: none;
    /*text-shadow: 0px 0px 2vw rgba(0,0,0,255);*/
}


.projectSlide .imageCanvas .cell h4.middleRightOneLines {
    top: 45%;
    right: 7vw;
    pointer-events: none;
    /*text-shadow: 0px 0px 2vw rgba(0,0,0,.5);*/
}

.projectSlide .imageCanvas .cell h4.middleLeftOneLines {
    top: 0px;
	left: 0%;
    width: 100%;
    height: 100%;
    display: table;
    /*border: 2px solid red;*/
    pointer-events: none;
    /*text-shadow: 0px 0px 2vw rgba(0,0,0,255);*/
}

.projectSlide .imageCanvas .cell h4.middleLeftOneLines .cell{
	vertical-align: middle;
}

.projectSlide .imageCanvas .cell h4.bottomRight {
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%; pointer-events: none;
	/*text-shadow: 0px 0px 2vw rgba(0, 0, 0, .5);*/
	/*border: 2px solid red;*/
	display:table;
}

.projectSlide .imageCanvas .cell h4.bottomRight .cell{
	vertical-align: bottom;
	text-align: right;
}

.projectSlide .imageCanvas .cell h4.middleCenter{
	text-align: center;
    width: 88vw;
    height: calc(100% - 12vw);
    /*line-height: 78vh;*/
    /*text-shadow: 0px 0px 2vw rgba(0,0,0,255);*/
    position: absolute;
    z-index: 4;
    top: 6vw;
    left: 6vw;
    pointer-events:none;
    display: table;
    text-shadow: 2px 2px 60px black;
}

@media screen and (orientation:portrait){
	.projectSlide .imageCanvas .cell h4.middleCenter{
		font-weight: 100;
		/*text-shadow: 0px 0px 8vw rgba(0,0,0,255);*/
	}

	.projectSlide .imageCanvas .cell h4.middleLeftTwoLines .cell{
		vertical-align: bottom;
	}

	.projectSlide .imageCanvas .cell h4.middleLeftOneLines .cell{
		vertical-align: bottom;
		text-align: right;
	}

}

.projectSlide .imageCanvas .cell.paddinzero{
	padding:0px;
}

.projectSlide .imageCanvas .video{
    height:92vh;
    width:147.2vh;
}

.projectSlide .imageCanvas .videoMedium{
    height:75vh;
    width:120vh;
}

.mainVideoWrapper .fullScreenVideo.fullWidth{
	height: auto;
	width: 100vw;
}

.mainVideoWrapper .fullScreenVideo.fullHeight{
	height: 100vh;
	width: auto;
}

.mainVideoWrapper{
	opacity: 0;
	pointer-events: none;
	transition: all 1s;
}

.mainVideoWrapper.show{
	opacity: 1;
	/*pointer-events: none;*/
}

/*Video Square*/

.mainVideoWrapper .fullScreenVideo{
	height: auto;
	width: 100%;
}

@media screen and (orientation:portrait){
	.mainVideoWrapper .fullScreenVideo{
		height: 100%;
		width: auto;
	}
}

/*Video 1920*/


@media screen and (max-aspect-ratio: 1920/1080){
	.mainVideoWrapper .fullScreenVideoWide{
		height: 100vh;
		width: 177.77vh;
		position: absolute;
		left: calc((100% - 177.77vh)/2);
		top: calc((100% - 100vh)/2);
	}
}

@media screen and (min-aspect-ratio: 1920/1080){
	.mainVideoWrapper .fullScreenVideoWide{
		height: 56.25vw;
		width: 100vw;
		left: calc((100% - 100vw)/2);
		top: calc((100% - 56.25vw)/2);
		position: absolute;
	}
}




.projectSlide.awards .imageCanvas .cell img.trophy{
	width: auto;
    height: 44vh;
    transition: all 1s;
}

.projectSlide.awards .imageCanvas .cell img.seal{
	width:16vh;
	height: auto;
	padding: 0% 1%;
}

.projectSlide.awards .imageCanvas .cell img.seal:first-child{
	border-right: 1px solid white;
}

.projectSlide.awards .imageCanvas .cell .seals{
	margin-top: 4%
}

.projectSlide.awards .imageCanvas .cell h4.center{
	position: relative;
    text-align: center;
    margin-bottom: 4%;
    font-size: 8vh;
}

@media screen and (orientation:portrait){
	.projectSlide.awards .imageCanvas .cell h4.center {
	    margin-bottom: 6%;
	}	

	.projectSlide.awards .imageCanvas .cell img.seal{
		width:15%;
	}

	.projectSlide.awards .imageCanvas .cell .seals{
		margin-top: 6%
	}

	.projectSlide.awards .imageCanvas .cell img.trophy{
		width:19%;
		height: auto;
		margin: 0% 3.5%;
	}

	.projectSlide .imageCanvas .video{
	    height: 53.12vw;
	    width: 85vw;
	}
	.projectSlide .imageCanvas .videoMedium{
		height: 53.12vw;
	    width: 85vw;
	}


	.projectSlide .imageCanvas .cell h4 {
	    color: white;
	    text-align: left;
	    position: absolute;
	    font-size: 8vw;
	    font-weight: 100;
	    
	    margin: 0px;
	    line-height: 110%;
	    transition: all .5s;
	    transition-delay: .5s;
	}

	.projectSlide .imageCanvas .cell h4.middleLeftTwoLines.centerVertical {
		text-align: center;
	}

	.projectSlide .imageCanvas .cell h4.topLeft, .projectSlide .imageCanvas .cell h4.topRight{
		top: 9%;
	    left: 10%;
	}

	.projectSlide .imageCanvas .cell img.bottomLeft {
	    height: auto;
	    width: 115vw;
	    top: 50vh;
	    position: absolute;
	    left: -9%;
	}

	.projectSlide .imageCanvas .cell img.topRight {
	    position: absolute;
	    top: 13%;
	    right: -3%;
	    width: 35%;
	    height: auto;
	}	

	.projectSlide.panelOutTop {
	    /*-webkit-transform: scale(.7) translate(0%, -10%);*/
	    opacity: 1;
	    pointer-events: none;
	}

	.projectSlide .whiteArea {
		height: 40%;
		width: calc(88vw - 6px);
		bottom: 6vw;
		left:6vw;
		position: absolute;
		background-color: rgba(255,255,255,.07);
		transition: all .5s;
	}

	.projectSlide .whiteArea.strong{
		background-color: rgba(255,255,255,.20);
	}

	.projectSlide {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    text-align: center;
	    /* display: table; */
	    transition: all .5s;
	}

	.projectSlide .cell {
	    display: table-cell;
	    vertical-align: middle;
	    padding: 8vw;
	}

	.panel1 .cell {
	    display: table-cell;
	    vertical-align: top;
	    padding: 0vw 8vw;
	}

	.projectSlide .imageCanvas .cell img{
		height: auto;
		width: 90vw;
	}

	.projectSlide .cell .textArea {
	    width: 78%;
	    text-align: left;
	    margin-left: 5vw;
	    transition: all .5s;
	    transition-delay: .5s;
	    position: absolute;
	    margin-top: 0;
	    top: 45.5%;
	    left: 8%;
	    height: 54.5%;
	}

	.ProjectWrapper p, .HomeWrapper p {
	    font-weight: 300;
	    color: white;
	    font-size: 2.5vh;
	}

	.projectSlide .cell .textArea h2 {
	    color: white;
	    font-weight: 100;
	    font-size: 6.5vh;
	    line-height: 7vh;
	    margin: 0px;
	}

	.projectSlide .cell img.introImage {
        position: absolute;
	    right: 0px;
	    margin-left: -55vw;
	    bottom: -40%;
	    width: auto;
	    height: 135vh;
	}

	.projectSlide.panelOutTop .cell img.introImage {
	    -webkit-transform: translate(25%, 0%);
	}

	.projectSlide .illustraLeft {
	    width: 100%;
	    height: calc(50% - 6vw);
	    margin-bottom: 12vw;
	    position: relative;
	}

	.projectSlide .illustraRight {
	    width: 100%;
	    height: calc(50% - 6vw);
	    position: relative;
	}	

	.projectSlide.panelOutBottom .illustraRight{
		 -webkit-transform: translate3d(-20%, 0%,0px);
	    transform: translate3d(-20%, 0%,0px);
	    opacity: 0;
	}

	.projectSlide.panelOutBottom .illustraLeft{
		 -webkit-transform: translate3d(20%, 0%, 0px);
	    transform: translate3d(20%, 0%, 0px);
	    opacity: 0;
	}	
}


@media screen and (orientation:landscape) and (min-width:601px) and (max-width:1024px) {

	.projectSlide .cell img.introImage {
		-webkit-transform: translate(0%, 0%);
	    top: -2vw;
	    width: auto;
	    height: 127vh;
	}

	.projectSlide .imageCanvas .video{
	    height:51.25vw;
	    width:82vw;
	}

	.projectSlide .imageCanvas .videoMedium{
	    height:51.25vw;
	    width:82vw;
	}

	.projectSlide .cell .textArea {
	    /*padding-top: 58%;*/
	}

	.projectSlide .cell .textArea h5{
		font-size: 2vw;
	}
}


@media screen and (orientation:portrait) and (min-width:601px){

	.projectSlide .cell .textArea {
	    width: 75%;
	    top: 46%;
	}


	.projectSlide {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    text-align: center;
	    /* display: table; */
	}

	.projectSlide .cell img.introImage {
	    position: absolute;
	    -webkit-transform: translate(40%, 0%);
	    bottom: -25vw;
	    margin-left: -75vw;
	    width: auto;
	    height: 127vh;
	}

	.projectSlide.panelOutTop .cell img.introImage {
	    position: absolute;
	    -webkit-transform: translate(62%, 0%);
	    width: auto;
	    transition: all .5s;
	}

	.projectSlide .cell .textArea h2 {
	    color: white;
	    font-weight: 100;
	    font-size: 8vw;
	    line-height: 8vw;
	    margin: 0px;
	}

	.ProjectWrapper p, .HomeWrapper p {
	    font-weight: 200;
	    color: white;
	    font-size: 3.5vw;
	}
}


@media screen and (orientation:portrait) and (max-width:600px){
	.projectSlide.awards .imageCanvas .cell h4.center {
	    margin-bottom: 8%;
	}	

	.projectSlide.awards .imageCanvas .cell img.seal{
		width:20%;
	}

	.projectSlide.awards .imageCanvas .cell .seals{
		margin-top: 8%
	}	
}

/*--------------------- Animations --------------------*/

.textOut{
	left:-50vw;
}

.introImgOut{	
	left:-50vw;
}

.designsIn{
	width:75vw;
	left:12.5vw;
	z-index: 40;
}

.opacityzero{
	opacity: 0;
	transition-delay: .5s;
}

.opacity100{
	opacity: 1;
	/*background-color: white;*/
}

.opacityzeronow{
	opacity: 0 !important;
}

.tagline.opacityzeronow{
	opacity: 0 !important;
	/*margin-top: 30vh !important;*/
	transform:translate3d(0%,30%,0px);
}

.displaynone{
	display: none;
}

.overflowHidden{
	overflow: hidden !important;
}

.opacity100 .bgimage{
	/*opacity: 0;*/
}

.designsLeft{
/*	width: 75vw;
	left:-6vw;
	z-index: 40;
	opacity: .8;
	transform: perspective(200vw) scale3d(1, 1, 1) translate(0px, -15vh) rotateY(50deg);*/
}

/*Hide on phone*/

@media screen and (min-width:601px){
	.showOnPhone{
		display: none !important;
	}

	.showOnDesktop{
		display: block !important;
	}
}

@media screen and (max-width:600px){
	.hideOnPhone{
		display: block !important;
	}

	.showOnDesktop{
		display: none !important;
	}
}

.videoLink{
	float:left;
	margin-right: 3vw;
}

.websiteLink{
	float:left;
	text-decoration: none;
}

@media screen and (orientation:portrait){
	.videoLink{
		margin-right: 6vw;
	}
}

.tooltipHint{
	width: 10px;
	height: 10px;
	right:10px;
	top:50%;
	background-color: transparent;
	position: fixed;
}

/*about*/

.about h2{
	font-family: "Lato"
}