@charset "UTF-8";
/* CSS Document */


@font-face {
	font-family: 'HypatiaSansPro-Bold';
	src: url('../fonts/HypatiaSansPro-Bold.eot');
	src: local('☺'), url('../fonts/HypatiaSansPro-Bold.woff') format('woff'), url('../fonts/HypatiaSansPro-Bold.ttf') format('truetype'), url('../fonts/HypatiaSansPro-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HypatiaSansPro-Regular';
	src: url('../fonts/HypatiaSansPro-Regular.eot');
	src: local('☺'), url('../fonts/HypatiaSansPro-Regular.woff') format('woff'), url('../fonts/HypatiaSansPro-Regular.ttf') format('truetype'), url('../fonts/HypatiaSansPro-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HypatiaSansPro-Light';
	src: url('../fonts/HypatiaSansPro-Light.eot');
	src: local('☺'), url('../fonts/HypatiaSansPro-Light.woff') format('woff'), url('../fonts/HypatiaSansPro-Light.ttf') format('truetype'), url('../fonts/HypatiaSansPro-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HypatiaSansPro-Black';
	src: url('../fonts/HypatiaSansPro-Black.eot');
	src: local('☺'), url('../fonts/HypatiaSansPro-Black.woff') format('woff'), url('../fonts/HypatiaSansPro-Black.ttf') format('truetype'), url('../fonts/HypatiaSansPro-Black.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}







/* --------------------------- PRELOADER -----------------------------*/
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#121212;
	z-index:99; /* makes sure it stays on top */
}
.status{
	width:100%;
	height:100%;
	opacity: 0;
}
.status1 {
	width:200px;
	height:44px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:30%; /* centers the loading animation vertically one the screen */
	margin:-22px 0 0 -100px; /* is height and width divided by two */
	
}

.status2 {
	width:200px;
	height:44px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:30%; /* centers the loading animation vertically one the screen !!! offset to put in beginning animation position */
	margin:-22px 0 0 -100px; /* is height and width divided by two */
}

.svglogo1{
	opacity: 0.7;
	stroke: #20b885;
	stroke-width: 2;
	stroke-dasharray: 200, 200;
	-webkit-animation-name: stroke;  
  	-webkit-animation-duration: 30s;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: linear;
  	-webkit-animation-fill-mode: forwards;
  
  	animation-name: stroke;  
  	animation-duration: 30s;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear;
  	animation-fill-mode: forwards;
}

@keyframes stroke {
  0% { stroke-dashoffset:  3000px; }
  50% { stroke-dashoffset: 0 } 
  100% { stroke-dashoffset: 0 }
}

@-webkit-keyframes stroke {
  0% { stroke-dashoffset:  3000px; }
  50% { stroke-dashoffset: 0 } 
  100% { stroke-dashoffset: 0 }
}

.svglogo2{
	stroke: #BBBDC0;
	stroke-width: 2;
	stroke-dasharray: 0;
	opacity: 0.3;
	
	-webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
	
	animation: pulsate 1s ease-out;
    animation: infinite;
}

@-webkit-keyframes pulsate {
    0% {opacity: 0.1;}
    50% {opacity: 0.3;}
    100% {opacity: 0.1;}
}




/* --------------------------- GENERAL -----------------------------*/


a:-webkit-any-link{
text-decoration:none !important;
}

body, html{
	height:100%;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	-webkit-font-smoothing: antialiased;
	background-color:#121212;
}


.vertical-align-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  display: table;
}

.vertical-align-wrap2 {
  width: 100%;
  height: 100%;
  display: table;
}

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

.vertical-align--middle {
  vertical-align: middle;
}


.border{
	z-index: 40;
	width: 100%;
	height: 100%;
  	position: fixed;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border: 20px solid #1d1d1d;
	pointer-events: none;
}

.logo{
	z-index: 34;
	position:fixed;
	padding: 40px 0px 0px 40px;
	display:block;
	float:left;
	width:100px;
    height: auto;
}

.menu{
	z-index: 35;
	position:fixed;
	padding: 40px 40px 0px 0px;
	display:block;
	float:right;
	right: 0px;
}

.menu:hover .menusvg{
	fill:#3C9;
}



.menusvg{
	fill:#FFFFFF;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.logosvg{
	fill:#FFFFFF;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.logo:hover .logosvg{
	fill:#3C9;
}

.navcontainer{
	background-color:#121212;	
	z-index: 36;
	width: 100%;
	height: 100%;
	position: fixed;
	display:block;
	text-align:center;
	left:100%;
	-moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.navcontainer2{
	text-decoration: none;
	width:100%;
	position:absolute;
	display:block;
	text-align:center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navsectioncontainer{
	text-decoration: none;
	vertical-align: top;
	display:inline-block;
	min-width:300px;
	padding: 20px;
}

.navnumber{
	text-decoration: none;
	font-family: 'Playfair Display', serif;
	font-weight: 100;
	color:#434343;
	font-size: 1.0em;
	letter-spacing: 4px;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navtext{
	text-decoration: none;
	font-family: 'Playfair Display', serif;
	font-weight: 100;
	color:#434343;
	font-size: 3em;
	letter-spacing: 0px;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.navthinline {
	display:inline-block;
	width:44px;
	height:1px;
	background-color:#275b41;
	margin: 20px 0 0 0;
}

.navsectioncontainer:hover .navtext{
	color:#3C9;
}

.navsectioncontainer:hover .navnumber{
	color:#3C9;
}


.navclose{
	z-index: 35;
	position:absolute;
	padding: 40px 40px 0px 0px;
	display:block;
	float:right;
	right: 0px;
}

.navclose:hover .navclosesvg{
	fill:#3C9;
}



.navclosesvg{
	fill:#FFFFFF;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


/* --------------------------- HOME -----------------------------*/
div.px_area{
	/*float:right;*/
	overflow:hidden;
	display:block;
	position:relative;
}

div.px_layer{
	/*display:block;*/
	position:absolute;
}

.arrow{
	z-index:1;
	text-align:center;
	width:70%;
	height:100%;
	left: 50%;
  	transform: translate(-50%, 45%);
}
.arrowsvg{
	fill:#53BC7D;
}

.bg{
	z-index: 1;
	width: 100%;
	height: 100%;
	position:fixed;
	background:url(../images/bg1.jpg);
	background-size:cover;
	background-attachment:fixed;
	background-position:center center;
	background-repeat:no-repeat;
}

iframe#bgvid{
	/*position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; */
}

.project{
	width: 100%;
	height: 100%;
	}

.vidholder{
	width: 100%;
	height: 100%;
}

#video-target {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


#video-cover {
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position:fixed;
	background:url(../images/bg1.jpg);
	background-size:cover;
	background-repeat:no-repeat;
}

.intro{
	z-index:10;
	text-align:center;
	height:100%;
	width:100%;
	pointer-events: none;
	}

.introcopyholder{
	z-index:2;
	text-align:center;
	width:60%;
	height:100%;
	left: 50%;
  	transform: translate(-50%, 0);
}

.introdiamondholder{
	z-index:1;
	text-align:center;
	width:100%;
	height:100%;
	left: 50%;
  	transform: translate(-50%, 0);
}

.diamondsvg{
	fill:none;
	stroke:#1C1D1D;
	stroke-width:16;
	stroke-miterlimit:10;
}

.introcopy1{
	text-align:center;
	font-family:'HypatiaSansPro-Bold', Arial;
	font-weight: 100;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 2.0em;
	letter-spacing: 4px;
}

.introcopy2{
	text-align:center;
	font-family:'HypatiaSansPro-Light', Arial;
	font-weight: 100;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 2.0em;
	letter-spacing: 4px;
}

.section1{
	background-color:#8ED3B2;
}

.section2{
	background-color:#C7B0D9;
}

.workimagecontainerleft{
	margin-top:12%;
	left:10%;
	width:60%;
	height:auto;
}

.workimagecontainerright{
	margin-top:12%;
	right:10%;
	width:60%;
	height:auto;
}

.worktextcontainerleft{
	margin-top:40%;
	width:100%;
}

.worktextcontainerright{
	margin-top:40%;
	width:100%;
}


.workimage{
	width:100%;
	height:auto;
}

.worktextleft{
	max-height:125px;
	margin-right:15%;
	float:right;
	height:auto;
}


.worktextright{
	max-height:125px;
	margin-left:15%;
	float:left;
	height:auto;
}

.block1{
	
}

.black{
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	text-align:center;
	opacity: 0;
	position:absolute;
	background-color:#000000;
	width:100%;
	height:100%;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.viewproject{
	opacity: 0;
	width:100%;
	position:absolute;
	margin-top:25%;
	text-align:center;
	font-family: 'Playfair Display', serif;
	font-weight: 100;
	color:#FFFFFF;
	font-size: 1.5em;
	letter-spacing: 4px;
	pointer-events: none;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.black:hover{
	opacity: 0.5;
	box-shadow: inset 0 0 0 20px #1d1d1d;
}

.black:hover ~ .viewproject{
	opacity:1;
}

.worktextcontainerleft:hover ~ .workimagecontainerleft .black{
	opacity:0.5;
	box-shadow: inset 0 0 0 20px #1d1d1d;
}

.worktextcontainerleft:hover ~ .workimagecontainerleft .viewproject{
	opacity:1;
}

.worktextcontainerright:hover ~ .workimagecontainerright .black{
	opacity:0.5;
	box-shadow: inset 0 0 0 20px #1d1d1d;
}

.worktextcontainerright:hover ~ .workimagecontainerright .viewproject{
	opacity:1;
}



/* --------------------------- ABOUT -----------------------------*/


.aboutintro{
	text-align:center;
	width: 100%;
	padding: 10% 0 10% 0;
	position: scroll;
	background:url(../images/darkbg1.jpg);
	background-size: 150px 150px;
	background-attachment: fixed;
	background-position: center center;
}

.aboutintrotext{
	padding: 0 15% 0 15%;
	text-align:center;
	font-family:'HypatiaSansPro-Light', Arial;
	font-weight: 100;
	color:#b7b7b7;
	font-size: 1.25em;
	letter-spacing: 2px;
	line-height: 1.6em;
}

.aboutbracket{
	padding: 40px 0 40px 0;
}

.aboutimage1{
	display: block;
	float: left;
	width: 50%;
	height: 600px;
	background:url(../about/images/photo1.jpg);
	background-size:cover;
	background-attachment: scroll;
	background-position:center center;
	background-repeat:no-repeat;
}

.aboutimage2{
	display: block;
	float: right;
	width: 50%;
	height: 600px;
	background:url(../about/images/photo2.jpg);
	background-size:cover;
	background-attachment: scroll;
	background-position:center center;
	background-repeat:no-repeat;
}

.aboutimage3{
	display: block;
	float: left;
	width: 50%;
	height: 600px;
	background:url(../about/images/photo1.jpg);
	background-size:cover;
	background-attachment: scroll;
	background-position:center center;
	background-repeat:no-repeat;
}

.aboutimage4{
	display: block;
	float: right;
	width: 50%;
	height: 600px;
	background:url(../about/images/photo2.jpg);
	background-size:cover;
	background-attachment: scroll;
	background-position:center center;
	background-repeat:no-repeat;
}

.aboutservicecontainerright{
	text-align: center;
	display: block;
	float: left;
	width: 50%;
	height: 600px;
	position: scroll;
	background:url(../images/darkbg3.jpg);
	background-size: 150px 150px;
	background-attachment: fixed;
	background-position: center center;
}

.aboutservicecontainerleft{
	text-align: center;
	display: block;
	float: left;
	width: 50%;
	height: 600px;
	position: scroll;
	background:url(../images/darkbg2.jpg);
	background-size: 150px 150px;
	background-attachment: fixed;
	background-position: center center;
}

.aboutservicetext1{
	text-align: center;
	font-family:'HypatiaSansPro-Bold', Arial;
	font-weight: 100;
	color:#3C9;
	text-transform: uppercase;
	font-size: 1.2em;
	letter-spacing: 8px;
	padding: 20px 0 0 0;
}

.aboutservicetext2{
	text-align: center;
	font-family: 'Playfair Display', serif;
	font-weight: 100;
	color:#b7b7b7;
	font-size: 0.9em;
	line-height: 2em;
	letter-spacing: 3px;
}

.aboutthinline {
	display:inline-block;
	width:7%;
	height:1px;
	background-color:#686868;
	margin: 20px 0px 12px 0px;
}




.aboutclients{
	display: block;
	position: relative;
	text-align:center;
	width: 100%;
	padding: 10% 0 10% 0;
	float: left;
	background:url(../images/darkbg1.jpg);
	background-size: 150px 150px;
	background-attachment: fixed;
	background-position: center center;
}

.aboutbrands{
	display: block;
	position: relative;
	text-align:center;
	width: 100%;
	padding: 10% 0 10% 0;
	float: left;
	background:url(../images/darkbg3.jpg);
	background-size: 150px 150px;
	background-attachment: fixed;
	background-position: center center;
}

.aboutclientscontainer{
	text-align: center;
	padding: 0 15% 0 15%;
}

.aboutclientstext1{
	text-align: center;
	font-family:'HypatiaSansPro-Bold', Arial;
	font-weight: 100;
	color:#3C9;
	text-transform: uppercase;
	font-size: 1.5em;
	letter-spacing: 8px;
	padding: 0 0 20px 0;
}

.aboutblocks{
	display: inline-block;
    margin: 0px;
    opacity: .25;
    padding: 5px 5px 0px 5px;
}

.aboutblocks2{
	display: inline-block;
    margin: 0px;
    opacity: .2;
    padding: 5px 5px 0px 5px;
}

.aboutimages{
	max-width:100%;
	height:auto;
	
}




.contactintro{
	text-align:center;
	width: 100%;
	height: 100%;
	position: scroll;
	background:url(../images/darkbg1.jpg);
	background-size: 150px 150px;
	background-attachment: fixed;
	background-position: center center;
}

.contacttext2{
	text-align: center;
	font-family: 'Playfair Display', serif;
	font-weight: 100;
	color:#b7b7b7;
	font-size: 1.5em;
	line-height: 2em;
	letter-spacing: 3px;
}


.contacttext1{
	text-align: center;
	font-family:'HypatiaSansPro-Bold', Arial;
	font-weight: 100;
	color:#3C9;
	text-transform: uppercase;
	font-size: 1.2em;
	letter-spacing: 8px;
	padding: 0px 25% 20px 25%;
	line-height: 2em;
}



.contacttext2 a:link{
	color:#b7b7b7;
	text-decoration: none;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.contacttext2 a:visited{
	color:#b7b7b7;
	text-decoration: none;
}

.contacttext2 a:hover{
	color:#3C9;
	text-decoration: none;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.contacttext2 a:active{
	color:#b7b7b7;
	text-decoration: none;
}






/* --------------------------- PROJECT -----------------------------*/



.subheaderbox{
	max-width: 1600px;
	z-index: 20;
	width: 85%;
	height: 100%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

.subheaderimg{
	width: 100%;
	height: 60%;
	margin: 8% 0 0 0;
	-webkit-box-shadow: 10px 10px 40px -6px rgba(0,0,0,0.5);
	-moz-box-shadow: 10px 10px 40px -6px rgba(0,0,0,0.5);
	box-shadow: 10px 10px 40px -6px rgba(0,0,0,0.5);
}

.subheadertext{
	font-family:'HypatiaSansPro-Black', Arial;
	text-align:left;
	font-weight: 400; 
	width: 100%;
	height: 100%;
	text-transform: uppercase;
	font-size: 7.0em;
	line-height: 0.8em;
	letter-spacing: 2.0px;
	top: 50%;
  	transform: translate(0, 67%);
	padding: 0 0 0 4%;
}
	

.projectinfo{
	z-index: 20;
	vertical-align: bottom;
	/*margin: 8% 10% 8% 10%;*/
	display: flex;
    justify-content: space-between;
	width: 100%;
	height: 100%;
	/*padding: 60% 0 0% 0;*/
	top: 50%;
  	transform: translate(0, 90%);
	
}


.projectinfoblock{
	margin: 0% 10px 0px 10px;
	
}

.projectinfoblockhead{
	font-family:'HypatiaSansPro-Regular', Arial;
	text-align:left;
	font-weight: 400; 
	width: 100%;
	color:#FFF;
	text-transform: uppercase;
	font-size: 1.0em;
	letter-spacing: 2.0px;
}

.projectinfoblocksub{
	font-family: 'Playfair Display', serif;
	font-weight: 100;
	text-align:left;
	width: 100%;
	color:#8f8e8e;
	font-size: 0.9em;
	letter-spacing: 2.0px;
}

.projectcontainer{
	position: relative;
	padding: 10% 0 0 0;
	z-index: 20;
	margin: 0px;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.projectgrid100left{
	position: relative;
	width: -webkit-calc(100% - 40px);
    width:    -moz-calc(100% - 40px);
    width:         calc(100% - 40px);
	left: 20px;
	float:left;
}


.prevnextcontainer{
	width: -webkit-calc(100% - 40px);
    width:    -moz-calc(100% - 40px);
    width:         calc(100% - 40px);
	height: 300px;
	position: relative;
	z-index: 30;
	left: 20px;
	bottom: 20px;
}

.prevcontainer{
	float: left;
	width: 33.33333333333%;
	height: inherit;
}

.prev1{
	position: absolute;
	width: inherit;
	height: inherit;
}

.prev2{
	position: absolute;
	width: inherit;
	height: inherit;
	opacity: 0;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.next1{
	position: absolute;
	width: inherit;
	height: inherit;
}

.next2{
	position: absolute;
	width: inherit;
	height: inherit;
	opacity: 0;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}



.prevnexttextcontainer{
	position: absolute;
	width: 33.33333333333%;
	height: 100%;	
}


.prevnexttext{
	font-family: 'Playfair Display', serif;
	font-weight: 100;
	text-align:center;
	color:#5f5e5e;
	font-size: 1.5em;
	letter-spacing: 2.0px;
	-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.viewallcontainer{
	float: left;
	width: 33.33333333333%;
	height: inherit;
	background-color:#151515;-moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.nextcontainer{
	float: left;
	width: 33.33333333333%;
	height: inherit;
}




/*.worktextcontainerleft:hover ~ .workimagecontainerleft .black*/
.prevcontainer:hover .prev2{
	opacity: 1;
	/*background-size: 110% 110%;*/
}

.prevcontainer:hover .next2{
	opacity: 1;
}

.prevcontainer:hover .prevnexttext{
	color: #34cf81;
}

.viewallcontainer:hover .prevnexttext{
	color: #34cf81;
}

.viewallcontainer:hover{
	background-color: #1a1a1a;
}








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





/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
	  
	  .introcopy1{
	font-size: 1.0em;
	}

	.introcopy2{
	font-size: 1.0em;
	}
	 
	  .worktextleft{
		max-height:30px;
		margin-right:5%;
	}


		.worktextright{
		max-height:30px;
		margin-left:5%;
	}
	  
	  .project{
	width: 100%;
	height: 50%;
	}
	.viewproject{
	font-size: 1.0em;
	}
	.black:hover{
	box-shadow: inset 0 0 0 10px #1d1d1d;
	}


	.worktextcontainerleft:hover ~ .workimagecontainerleft .black{
	box-shadow: inset 0 0 0 10px #1d1d1d;
	}


	.worktextcontainerright:hover ~ .workimagecontainerright .black{
	box-shadow: inset 0 0 0 10px #1d1d1d;
	}
	  
	  
	  
	  
	  	.projectinfo{
		vertical-align: bottom;
		display: block;
		top: 50%;
		transform: translate(0, 60%);
		}
	
	.subheaderimg{
		width: 100%;
		height: 30%;
		margin: 60px 0 0 0;
	  }
	
	.subheaderbox{
		width: 90%;
		height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		}
	
	.subheadertext{
		top: 50%;
		transform: translate(0, 48%);
		padding: 0 0 0 4%;
		}
	.projectinfoblock{
		margin: 0% 10px 15px 10px;

		}
	
	.projectinfoblockhead{
		font-size: .9em;
		letter-spacing: 2.0px;
	}

	.projectinfoblocksub{
		font-size: 0.8em;
		letter-spacing: 2.0px;
	}
	  
	.bg{
	background-attachment:scroll;
	-webkit-background-size:cover;
	-webkit-background-attachment:scroll;
}

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	  
	.project{
	width: 100%;
	height: 100%;
	}

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}




/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	  
	.project{
	width: 100%;
	height: 50%;
	}

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
	.project{
	width: 100%;
	height: 100%;
	}


}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	  

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
	  
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}














@media screen and (max-width: 2400px) {
	
}


@media screen and (max-width: 2000px) {
	
}









@media screen and (max-width: 1500px) {
	
	.worktextleft{
		max-height:115px;
		margin-right:13%;
	}


	.worktextright{
		max-height:115px;
		margin-left:13%;
	}
	
	
}


@media screen and (max-width: 1400px) {
	
	.worktextleft{
		max-height:105px;
		margin-right:10%;
	}


	.worktextright{
		max-height:105px;
		margin-left:10%;
	}
	
	
}

@media screen and (max-width: 1200px) {
	
	.worktextleft{
		max-height:90px;
		margin-right:10%;
	}


	.worktextright{
		max-height:90px;
		margin-left:10%;
	}
	
	.subheadertext{
		font-size: 5.0em;
	}
	
	
}







@media screen and (max-width: 1000px) {
	
	.worktextleft{
		max-height:80px;
		margin-right:7%;
	}


	.worktextright{
		max-height:80px;
		margin-left:7%;
	}


	.border{
		border: 0px solid #1d1d1d;
	}
	
	.subheadertext{
		font-size: 4.0em;
	}
	
	
	.prevnextcontainer{
		width: 100%;
		height: 200px;
		left: 0;
		bottom: 0;
	}
	
	.prevnexttext{
		font-size: 1.2em;
	}
	
	.projectgrid100left{position: relative;
	width: 100%;
	left: 0px;
	float:left;
}
	
	
}



@media screen and (max-width: 900px) {
	
	.worktextleft{
		max-height:75px;
		margin-right:5%;
	}


	.worktextright{
		max-height:75px;
		margin-left:5%;
	}
	
	.subheadertext{
		font-size: 3.5em;
	}
	
}


@media screen and (max-width: 800px) {
	
	.worktextleft{
		max-height:65px;
		margin-right:5%;
	}


	.worktextright{
		max-height:65px;
		margin-left:5%;
	}

	.logo{
		padding: 20px 0px 0px 20px;
		width:100px;
	}

	.menu{
		padding: 20px 20px 0px 0px;
	}
	
	.subheadertext{
		font-size: 3.0em;
	}
	
	
	
	.aboutimage1{
		width: 100%;
		height: 400px;
}

	.aboutimage2{
		width: 100%;
		height: 400px;
	}

	.aboutimage3{
		width: 100%;
		height: 400px;
	}

	.aboutimage4{
		width: 100%;
		height: 400px;
	}

	.aboutservicecontainerright{
		width: 100%;
		height: 400px;
	}

	.aboutservicecontainerleft{
		width: 100%;
		height: 400px;
	}

	
	
	
	


}

@media screen and (max-width: 660px) {

	.worktextleft{
		max-height:50px;
		margin-right:5%;
		}


	.worktextright{
		max-height:50px;
		margin-left:5%;
		}
	
	.projectinfo{
		vertical-align: bottom;
		display: block;
		top: 50%;
		transform: translate(0, 60%);
		}
	
	.subheaderimg{
		width: 100%;
		height: 30%;
		margin: 60px 0 0 0;
		}
	
	.subheaderbox{
		width: 90%;
		height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		}
	
	.subheadertext{
		top: 50%;
		transform: translate(0, 48%);
		padding: 0 0 0 4%;
		}
	.projectinfoblock{
		margin: 0% 10px 15px 10px;

		}
	
	.projectinfoblockhead{
		font-size: .9em;
		letter-spacing: 2.0px;
	}

	.projectinfoblocksub{
		font-size: 0.8em;
		letter-spacing: 2.0px;
	}
	
	.prevcontainer{
		float: left;
		width: 100%;
	}
	
	.viewallcontainer{
		float: left;
		width: 100%;
	}
	.prevnexttextcontainer{
		position: absolute;
		width: 100%;
		height: 100%;	
	}
	.prevnextcontainer{
		height: 150px;
	}
	/*
	video#bgvid{
	display: none;
}
	*/
	
	.aboutintrotext{
	padding: 40px 10% 0 10%;
	font-size: 1.0em;
	letter-spacing: 1px;
	line-height: 1.4em;
}
	
	.aboutbracket{
		display: none;
}
	
	.aboutclientscontainer{
	padding: 0 2% 0 2%;
}
	
	.contacttext2{
		font-size: 1.0em;
		line-height: 1.5em;
		letter-spacing: 2px;
}


	.contacttext1{
		font-size: 1.0em;
		letter-spacing: 8px;
		padding: 0px 10% 20px 10%;
		line-height: 1.5em;
	}

	
}


@media screen and (max-width: 500px) {
	
	  .introcopy1{
	font-size: 1.0em;
	}

	.introcopy2{
	font-size: 1.0em;
	}

	.worktextleft{
		max-height:40px;
		margin-right:5%;
		}


	.worktextright{
		max-height:40px;
		margin-left:5%;
		}

	.project{
		width: 100%;
		height: 50%;
		}
	.viewproject{
		font-size: 1.0em;
		}
	.black:hover{
		box-shadow: inset 0 0 0 10px #1d1d1d;
		}


	.worktextcontainerleft:hover ~ .workimagecontainerleft .black{
		box-shadow: inset 0 0 0 10px #1d1d1d;
		}


	.worktextcontainerright:hover ~ .workimagecontainerright .black{
		box-shadow: inset 0 0 0 10px #1d1d1d;
		}


}



@media screen and (max-width: 400px) {

	.worktextleft{
		max-height:30px;
		margin-right:5%;
		}
	.project{
		width: 100%;
		height: 50%;
		}

	.worktextright{
		max-height:30px;
		margin-left:5%;
		}
	
	.subheadertext{
		font-size: 2.0em;
	}

	
}

@media screen and (max-width: 300px) {
	
	.worktextleft{
		max-height:30px;
		margin-right:5%;
	}


	.worktextright{
		max-height:30px;
		margin-left:5%;
	}
	
}