/* Imported font */
@font-face {
    font-family: A35;
    src:  url('../font/Avenir-Light.ttf');
}

/* Antialiasing for font */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
	}

body {background:#000;  margin:0; padding:0;}

a {color:white; text-decoration:underline;}

/* Collage plus container */
#container {padding: 0; margin:0;}

/* Logo overlay */
.logo { 
	background: url("../images/logo.png") no-repeat;
 	border:0px solid red; 
	background-size: 100%;
	width: 78%; 
	color: #fff; 
	font-family: A35; 
	font-size:19px; 
	font-weight:600; 
	letter-spacing:3px; 
	text-indent: -9999999px;
	padding:0;
	margin:0;
}
	
#logocont {
	position:fixed; 
	top:3em; 
	left:3.3em; 
	z-index:9; 
	border: 0px solid blue;  
	display:inline-block; 
	width:10%; 
	min-width: 124px;
	padding:0;
	margin:0;
	
}

/* Nav Overlay */
#mainnav {z-index:9; list-style:none; color:white; position:fixed;bottom: 2em; left:0.8em;}
#mainnav ul li {font-family:A35; font-size:12px;  line-height:20px; letter-spacing:0.04em; list-style:none; color:white;}
#mainnav ul li a {color:#fff; text-decoration:none; }
#mainnav ul li a:hover { text-decoration:underline;}
.linegap {line-height:10px; display:block;}




/* Smart resize css */

.content {
	margin:0; /* margin used to control width of gallery - previously set to {margin: 10px 0 0}*/
	width: 100%;
	float: left;
	position: relative;
}

.item:last-child {
	margin-bottom: 40px;
}

.item {
	position: absolute;
	width: 381px;
	height: 253px;
	float: left;
	
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;

	-webkit-transition: .6s all ease;
	-moz-transition: .6s all ease;
	-o-transition: .6s all ease;
	transition: .6s all ease;
}

#thumbcontainer { border:0px solid green; max-width:100%; display:block; height:100%; display:block; height:100px; }

#left {
	width:20%; 
	height:100%;
	display: inline-block; 
	float: left;
	border:0px solid orange;
}

#right {
	width: 78.8%; 
	height: 100%; 
	display: inline-block; 
	float: right;
	margin:0 10px 0 0;
	border:0px solid #ccc;
}

#thumbgallery { border:0px solid red; height:100%; }

/* Bio Text */

#biotext {
	font-family: A35; 
	font-size: 12px;  
	line-height: 20px; 
	letter-spacing: 0.04em; 
	color: white; 
	position: fixed; 
	bottom: 2.7em; 
	left: 20em; 
	vertical-align: bottom; 
	border: 0px solid blue; 
	width: 90%; 
	min-width: 1024px;
}

#biotext .col1 {
	width: 30%; 
	min-width: 300px;
	padding: 5px; 
	border: 0px solid red; 
	float: left; 
	text-align: justify;
}

#biotext .col2 {
	width: 30%; 
	min-width: 300px;
	padding-left: 100px; 
	border: 0px solid green; 
	float: left;   
	text-align: justify;
}


/*Contact Text */

#contacttext {font-family:A35; font-size:12px;  line-height:20px; letter-spacing:0.04em; list-style:none; color:white; position:fixed; bottom:4em; left:20em; vertical-align: bottom;}



/* Media Queries */

/* @media screen and (max-width: 1024px){ 
	#biotext .col2 {border:1px solid green; padding-left:0; clear:both;}
}  - review for better solution*/


@media only screen  /* ipad landscape */
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	#left {width:35%; height:100%; display: inline-block; float: left;}
	#right {width:63.8%; height:100%; display: inline-block; float:right; right: 10px;}
	#biotext {font-family:A35; font-size:12px; line-height:20px; letter-spacing:0.04em; color:white; position:fixed; bottom:2.7em; left:20em; vertical-align: bottom; border:0px solid pink; width:auto;}
	#biotext .col2 {width: 30%; min-width:0px;padding-left:100px; border:0px solid green; float: left; }
	#mainnav {z-index:9; list-style:none; color:white; position:fixed;bottom: 1em; left:0.8em;}
	
	/* Logo overlay */
	.logo { 
		background: url("../images/logo_xlarge.png") no-repeat;
	 	border:0px solid red; 
		background-size: 100%;
		width: 100%; 
		height:100%;
		color: #fff; 
		font-family: A35; 
		font-size:19px; 
		font-weight:600; 
		letter-spacing:3px; 
		text-indent: -9999999px;
		padding:0;
		margin:0;
	}

	#logocont {
		position:fixed; 
		top:2em; 
		left:3.3em; 
		z-index:9; 
		border: 0px solid blue;  
		display:inline-block; 
		width:10%; 
		min-width: 124px;
		padding:0;
		margin:0;
		height:400%;

	}
}

@media only screen   /* ipad portrait */
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	#left {width:35%; height:100%; display: inline-block; float: left;}
	#right {width:62.8%; height:100%; display: inline-block; float:right;right: 10px; }
	
	#mainnav ul li {font-family:A35; font-size:16px;  line-height:20px; letter-spacing:0.04em; list-style:none; color:white;}
	
	/* Logo overlay */
	.logo { 
		background: url("../images/logo_xlarge.png") no-repeat;
	 	border:0px solid red; 
		background-size: 100%;
		width: 100%; 
		height:100%;
		color: #fff; 
		font-family: A35; 
		font-size:19px; 
		font-weight:600; 
		letter-spacing:3px; 
		text-indent: -9999999px;
		padding:0;
		margin:0;
	}

	#logocont {
		position:fixed; 
		top:3em; 
		left:3.3em; 
		z-index:9; 
		border: 0px solid blue;  
		display:inline-block; 
		width:18%; 
		min-width: 124px;
		padding:0;
		margin:0;
		height:400%;

	}
	
}

@media only screen  /* iPhone 2-4s Landscape */
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 
		#left {width:30%; height:100%; display: inline-block; float: left;}
		#right {width:67.8%; height:100%; display: inline-block; float:right;right: 10px;}
}


@media only screen  /* iPhone 2-4s Portrait */
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { 
	
	/* Logo overlay */
	.logo { 
		background: url("../images/logo_large.png") no-repeat;
	 	border:0px solid red; 
		background-size: 100%;
		width: 100%; 
		height:100%;
		color: #fff; 
		font-family: A35; 
		font-size:19px; 
		font-weight:600; 
		letter-spacing:3px; 
		text-indent: -9999999px;
		padding:0;
		margin:0;
	}

	#logocont {
		position:fixed; 
		top:3em; 
		left:3.3em; 
		z-index:9; 
		border: 0px solid blue;  
		display:inline-block; 
		width:20%; 
		min-width: 124px;
		padding:0;
		margin:0;
		height:400%;

	}
	
	#mainnav ul li {font-family:A35; font-size:20px;  line-height:35px; letter-spacing:0.04em; list-style:none; color:white;}
	.linegap {line-height:20px; display:block;}
}


@media only screen   /* iPhone 5 & 5s Landscape */
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {

}


@media only screen    /* iPhone 5 & 5s Portrait */
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
		#left {width:30%; height:100%; display: inline-block; float: left;}
		#right {width:67.8%; height:100%; display: inline-block; float:right;right: 10px;}
}