/********** GENERAL *********/

html{
	width: 100%;
	height:100%;
	margin:0;
	font-family: Arial;
}
body{
	
	width: 100%;
	height:100%;
	margin:0;
}

h1,h2{
    margin:0px;
    line-height:1.5em;
    font-family: Arial;
}
.page h1{
    text-transform: uppercase;
    font-family: Arial;
    color: rgb(183,197,183);
    font-weight: 600;
    letter-spacing: 6px;
    font-size: 10px;
}
.page h2{
    text-transform: uppercase;
    font-family: Arial;
    color: rgb(183,197,183);
    letter-spacing: 4px;
    font-size: 10px;
    padding-bottom: 10px;
}

.clear{clear:both;}
.center{text-align: center; }

div.halfwcol{
	position:relative;
	float:left;
	width:50%;
	height:100%
}
.balance1> img:nth-of-type(2){
	/* padding-top:15%; */
	margin-bottom:91.4%;
}
.balance1> img:nth-of-type(3){
	margin-top:40%;
}
.balance1> img:nth-of-type(5){
	margin-top:32%;
} 
.balance2> img:nth-of-type(1){
	margin-top:85%;
	
}	
.balance2> img:nth-of-type(5){
	margin-top:15%;
}
/* .balance1> div{
	margin-right:15%;
}
.balance1> img:nth-of-type(1){
	padding-top:15%;
} 

.balance1> img:nth-of-type(2){
	padding-top:15%;
	padding-bottom:106.4%
}

.balance1> img:nth-of-type(3){
	padding-top:55%;
}
.balance1> img:nth-of-type(4){
	padding-top:15%;
} 
.balance1> img:nth-of-type(5){
	padding-top:47%;
} 
.balance1> img:nth-of-type(6){
	padding-top:15%;
} 

.balance2> img:nth-of-type(1){
	padding-top:100%;
	
}	
.balance2> img:nth-of-type(2){
	padding-top:15%;
} 
.balance2> img:nth-of-type(3){
	padding-top:15%;
} 
.balance2> img:nth-of-type(4){
	padding-top:15%;
} 

.balance2> img:nth-of-type(5){
	padding-top:30%;
}
.balance2> img:nth-of-type(6){
	padding-top:15%;
}  		
.balance2> img:nth-of-type(7){
	padding-top:15%;
	padding-bottom:15%;
}  
.normalwork >img:nth-of-type(n){
	padding-top:3.75%;
	padding-bottom:3.75%;
	padding-right:7.5%;
}
.halfwcol>img:nth-of-type(n){
	padding-right:15%;
}	 */
			
div.halfhrow{
	position:relative;
	height:50%;
	width:100%;
}
div.halfhthirdwblock{
	position:relative;
	height:47%;
	min-height: 22em;/*218px;*/
	max-height: 26em;/*235px;*/
	width:26%;/*24%;*/
	float:left;
	/*padding:1%;*/
}
div.halfhthirdwfiller{
	position:absolute;
	width:calc(0.1 * 26%);
	z-index:1;
	background-color: white;
	left:calc(2.9 * 26%);
	top:0;
	height:100%;
	min-height: calc(2*22em);
	max-height: calc(2*26em);
}
div.columnonethirdw{
	position:fixed;
	width:29.7%;/*0.33*0.9 (fixed);*/
	/*padding:1%;*/
	height:auto;/*100%;*/
}
div.columntwothirdw{
	position:absolute;
	width:67%;/*24%;*/
	left:33%;
	height:100%;
	/*padding:1%;*/
}
div.imgwrap{
    position: relative;
    max-height: 100%;
    max-width:100%;
    display: inline-block;
}
div.imgwrap2{
    position: relative;
    max-height: 100%;
    max-width:100%;
    display: inline-block;
float: left;
}


img{
	width:100%;
}

img.logo{
	position:absolute;
	width:70%;
	right:10%;
	top:20%;
}
img.logo2{
	position: absolute;
		left: -9999px;
		right: -9999px;
		bottom: -9999px;
		top: -9999px;
		margin: auto;
        width:30%;
}
img.logo3{
	position: absolute;
		bottom: -9999px;
		top: -9999px;
		margin: auto;
        width:30%;
        left:35%;
}

img.frontpage{
	position:fixed;
	height:100%;
	min-height:350px;
	width:auto;
	right:0;
	top:0;
	z-index:-1;
}
img.frontpage2{
	position: absolute;
		left: -9999px;
		right: -9999px;
		margin: auto;
	height:150%;
	min-height:350px;
	width:auto;
	top:0;
	z-index:-1;
}
img.frontpage3{
	height:100vh;
	min-height:350px;
	width:auto;
	top:0;
	z-index:-1;
}
img.frontpage4{
	height:80%;
	min-height:350px;
	width:auto;
  display: block;
	/*top:0;*/
margin-left:auto ;
margin-right:10%;
  margin-top: 10%;
  margin-bottom: 10%;
	z-index:-1;
}
img.frontpage5{
position:relative;
	height:90vh;
	min-height:350px;
	width:auto;
  display: block;
  margin-left: 0%;
  margin-right: auto;
	/*top:0;*/
  margin-top: 5%;
  margin-bottom: 5%;
	z-index:-1;
}
img.logo4{
    position: absolute;
    bottom: 10%;
    top: auto;
    margin: auto;
    width: 50%;
    left: -9999px;
    right: -9999px
}
    .box{
        position: relative;
        display: inline-block; /* Make the width of box same as image */
    }
.wrap {
    width: 100%;
    height:auto;
    margin: auto;
    text-align:center;
    position:relative;
}

img.work{
	width:90%;
	height:auto;
	top:0;
}
img.workfolder{
	position:relative;
	width:85%;
	left:7.5%;
	padding-right:7.5%;
/* 	padding-top:3.75%;
	padding-bottom:3.75%; */
	padding-top:7.5%;
	height:auto;
}
/* columntwothirdw >img.workfolder:last-of-type{
	padding-bottom:7.5%;
} */
.halfwcol img.workfolder{
	padding-right:15%;
	width:100%;
	left:0%;
/* 	padding-top:7.5%;
	padding-bottom:7.5%; */
	padding-top:15%;
}	
/* .halfwcol img.workfolder:last-of-type{
	padding-bottom:15%;
} */
div.menu{
	position:absolute;
	bottom: 10%;
	left:30%;
	width:200px;
	margin-left: auto;
    margin-right: auto;
    display: block;
    max-height:200%;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 7.1px;
  	font-family: Arial;

    
}

div.menu a:hover{
	font-weight: bold;
}
div.menu2{
	position:absolute;
	top: 10%;
	left:12%;
	width:200px;
	margin-left: auto;
    margin-right: auto;
    display: block;
    max-height:200%;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 9.1px;
  	font-family: Arial;
       font-weight: bold;
    text-align:left;
    
}
div.menu2 a:hover{
	font-weight: bold;
        text-decoration: underline;
        /*color:white;*/
}
div.menu2 a{
        color:grey;
}
a{
	color: white;
	width:100%;
	padding: 0px;
	display: block;


}
a:hover{
	text-decoration: none;
	color:black;
	
}
a.goback{
	position:fixed;
	left:5%;
	bottom:5%;
	text-transform: uppercase;
    letter-spacing: 3px;
    color:gray;
    font-size: 8px;
	width:50px;
}
a.goback:hover{
	text-decoration: none;
	color:black;
	font-weight:normal;
} /*why is this necessary?? ***/
a.contact{
 color:gray;
}
a.contact:hover{
	font-weight:bold;
}
a.work{
	color:black;
	text-decoration: none;
}

div.ignxoverflow{
	position:fixed;
	width:100%;
	height:100%;
	overflow-x:hidden;
}
div.ignyoverflow{
	position:fixed;
	width:100%;
	height:100%;
	overflow-y:hidden;
}
div.ignxyoverflow{
	position:fixed;
	width:100%;
	height:100%;
	overflow-y:hidden;
        overflow-x:hidden;
}

div.title{
    padding-top:15%;/*30px;*/
	padding-bottom:40px;
	letter-spacing: 6px;
    font-size: 10px;
	color: rgb(183,197,183);
    font-weight: 600; 
	text-transform:uppercase;

}
div.worktitle{
    padding-top:6px;
	padding-bottom:6px;
	letter-spacing: 6px;
    font-size: 7px;
	color: black;
    font-weight: 600; 
	text-transform:uppercase;
	border-bottom: 1px solid #ddd;
	text-align:center;
}
div.flashytitle{
	text-align:center;
	height: 60px;
    padding-top:30px;
	line-height:1.5em;
    font-family: Arial;
    font-size: 11px;
    color: black; 
	text-decoration: underline;
}
div.subtletitle{
	text-align:center;
	line-height: 1.5em;
	font-family: Arial;
	font-size: 11px;
	color: rgb(183,197,183);

}
div.par{
	width:100%; /*70*/
	/* max-width:250px; */
	margin-left:auto;
	
	
	padding-right:15%;
	line-height:1.5em;
    padding-bottom: 20px;
    font-family: Arial;
    font-size: 10px;
	text-align:left;
}
div.smallpar{
	width:90%;
	max-width:250px;
	margin-right:auto;
	line-height:1.1em;
	padding-top:6px;
    padding-bottom: 20px;
    font-family: Arial;
    font-size: 8.5px;
	text-align:left;
}
div.middlepage{
	margin-left:5%;
	
	margin-right:5%;
}
div.top_third_margin{
	/*padding-top:33vh;*/

  position: fixed;
  top: 20%;
  width: 100%;
  text-align: center;
  /*font-size: 18px;*/

}
div.rpage{
	position:absolute;
	right:0;
	left:10%; /*7*/
	height:100%;
	width:90%;
	
}
div.page_wtitle{
	position:absolute;
	bottom:0;
	top:8%;
	height:90%;
	width:100%;
}
/*long screen*/
@media only screen 
and (max-aspect-ratio:4/4) { /*5/4*
/* Styles */
    a{color:white;}
    img.logo2{
  width: 50%;
}
/* img.frontpage4{
	width:100%;
} */
	div.halfwcol{
	width:100%;
	/*height:auto;/*100%*/
	}
	img.workfolder{
		width:85%;
		left:0;
		padding-left:7.5%;  /*left*/
		padding-right:7.5%;
	}
	.halfwcol img.workfolder{
	width:85%;
	left:0;
	padding-left:7.5%; 
	padding-right:7.5%;
	padding-top:3.75%;
	padding-bottom:3.75%;
}	
.balance1> img:nth-of-type(n){
	/* padding-top:15%; */
	margin:0;
}
	
.balance2> img:nth-of-type(n){
	/* padding-top:15%; */
	margin:0;
}
.halfwcol> div{
margin-top:3.75%;
margin-bottom:3.75%;
margin-right:15%;
}
/* .halfwcol> img:nth-child(n){
padding-top:3.75%;
padding-bottom:3.75%;
padding-right:7.5%;  
margin:0px;
}
.halfwcol> div{
margin-top:3.75%;
margin-bottom:3.75%;
margin-right:7.5%;
} */
/* .balance1> img:nth-of-type(1){
padding-top:15%;
} */

   	div.par{
		
		width:100%;
	}

}

@media only screen 
and (max-aspect-ratio:11/7){
	img.frontpage3{
	    position: absolute;
		right: 0;
	}
        div.imgwrap{
             position:static;
        }
        div.imgwrap2{
             position:static;
        }

}
/* narrow screen */
@media only screen  
and (max-device-width : 850px) {
		div.worktitle{
	letter-spacing: 2px;
	}
/* 	div.halfhthirdwblock{
		width:47%;
	} */
}

@media only screen  
and (max-device-width : 600px),only screen  and (max-aspect-ratio:7/7) {
/* Styles */

img.logo4{
position:fixed;
width:25%;
bottom:20%;
}
	div.rpage{
		right:0;
		left:90px;
	}
	a.goback{
		left:2%;		
	}
	div.halfhthirdwblock{
		width:46%;
	}
	div.halfhthirdwfiller{
		left:calc(1.9 * 46%);
		width:calc(0.1 * 46%);
		height:150%;
		min-height: calc(3*22em);
		max-height: calc(3*26em);
	}

    div.columnonethirdw{
	position:relative;
	width:100%; /*70*/
	/* left:0%; */
	padding-right: 15%;
	height:auto;/*100%;*/
}
    div.columntwothirdw{
	position:relative;
	height:100%;
	width:100%;
	left:0%;
}

}

@media only screen 
and (max-height : 28em) and (min-aspect-ratio:7/7) {
/* Styles */
/*     div.columnonethirdw{
	position:absolute;
} */
}
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
    

    
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 520px) {
/* Styles */
	div.halfhthirdwblock{
		width:70%;
	}
	div.halfhthirdwfiller{
		left:calc(0.9 * 70%);
		width:calc(0.1 * 70%);
		height:300%;
		min-height: calc(6*22em);
		max-height: calc(6*26em);
	}
    
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
    
}