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

/*--------Global properties--------*/
#home {
	height: 125px;
	width: 201px;
}

/*--------Main navigation--------*/
.pagesNav, .pagesNav_min {
	padding-left: 10%;
	display: inline-block;
}

.pagesNav {
	height: 25px;
	margin-top: 70px;
	font-size: 18pt;
}

.icon-size {
	width: 25px;
	height: 25px;
}

/*--------Subnavigation--------*/
#thumbnails, #thumbnails_min {
	width: 76%;
	margin-left: 22%;
	margin-right: 2%;
}

#thumbnails {
	padding-top: 4px;
}

.thumb, .thumb_min {
	background-size: cover;
	background-origin: border-box;
	overflow: hidden;
	border: solid 3px rgba(0, 0, 0, 0.18);
	box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.29);
}

.thumb_min {
	height: 45px;
}

.thumb {
	height: 80px;
}

.navText {
	opacity: 0;
	filter: alpha(opacity=0);
}

#pullDown label {
	display: none;
}

/*--------Home/About pages formatting--------*/


/*--------Digital/Print pages formatting--------*/
#preview, #project {
	display: inline-block;
	vertical-align: middle;
}
	
#preview {
	width: 40%;
	max-width: 500px;
	margin-left: 5%;
	margin-right: 5%;
	transition: width 0.3s;
	webkit-transition: width 0.3s;
}

#project {
	margin: 10px 0px 20px 0px;
	min-height: 370px;
}

.summaryText-live {
	height: 290px;
}

.summaryText-noLive {
	max-height: 320px;
}

/*--------Digital/Print: Header size and back to top--------*/
#head_full, #spacer {
	height: 200px;
}

#head_min {
	padding-left: 0px;
}

/*--------Mini-queries--------*/
@media (min-width: 721px) and (max-width: 900px) {
 	.pagesNav, .pagesNav_min {
		padding-left: 3%;
		font-size: 15pt;
	}
	
	h1 {
		text-align: center;
	}
	
	#welcome {
		margin-left: 0;
		width: 100%;
	}
	
	p.homeText {
		width: 80%;
		margin-left: 10%;
	}
	
	#skyline {
		float: none;
		width: 70%;
		padding: 0;
		margin: 10px 15% 0 15%;
	}
	
	#preview, #project {
		margin: auto;
		display: block;
	}
	
	#preview {
		width: 70%;
		padding-top: 15px;
	}
	
	#project {
		width: 80%;
		min-height: 270px;
	}
	
	.summaryText-live {
		height: 190px;
		margin-bottom: 15px;
	}
	
	.summaryText-noLive {
		height: 230px;
	}
	
	#viewLive {
		margin-top: 0px;
	}

	#thumbnails {
		width: 96%;
		margin: 0 2% 0 2%;
		text-align: center;
	}
	
	#thumbnails_min {
		text-align: center;
	}
	
	.thumb_min {
		width: 9%;
	 }
	
	#summary {
		padding-top: 0px;
		padding-bottom: 20px;
	}
	
	#myPic {
		position: relative;
		display: block;
		width: 100%;
		height: initial;
		margin: 0;
		background-image: url(images/portrait-900.jpg);
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	
	#myPic img {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	h1#hello {
		margin: -45%  0 10px 0;
		text-align: center;
		font-size: 100pt;
		line-height: 90pt;
	}
	
	.intro {
		width: 65%;
		margin: 0 18%;
		display: block;
	}
	
	#resume {
		margin-right: 0;
	 }
	
 @media (-webkit-min-device-pixel-ratio: 1.5),
 (min--moz-device-pixel-ratio: 1.5),
 (min-resolution: 1.5dppx),
 (min-resolution: 144dpi) {
	 #myPic {
	 	max-width: 1920px;
	 	position: relative;
	 	display: block;
	 	width: 100%;
	 	height: initial;
	 	margin: 0;
	 	background-image: url(images/portrait-1920.jpg);
	 	background-repeat: no-repeat;
	 	background-size: 100% auto;
	 }
 }
}

@media (min-width: 901px) and (orientation: portrait) {
	h1 {
		font-size: 36pt;
		text-align: center;
	}
	
	#welcome {
		margin-left: 0;
	}
	
	p.homeText {
		width: 80%;
		margin-left: 10%;
	}
	
	#skyline {
		float: none;
		width: 70%;
		padding: 0;
		margin: 10px 15% 0 15%;
	}
	
	#myPic {
		position: relative;
		display: block;
		width: 100%;
		height: initial;
		margin: 0;
		background-image: url(images/portrait-1920.jpg);
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	
	#myPic img {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.intro {
		width: 60%;
		margin: 0 20%;
		display: block;
	}
	
	p.homeText, p.aboutText {
		font-size: 22pt;
		line-height: 34pt;
	}
	
	h1#hello {
		margin: -50%  0 30px 0;
		text-align: center;
		font-size: 120pt;
		line-height: 110pt;
	}
}

@media (max-width: 1050px) and (orientation: landscape) {
	#skyline {
		padding: 10px 5% 0 3%;
	}
}

@media (min-width: 901px) and (max-width: 1150px) {
	#preview {
		width: 44%;
		max-width: 500px;
		margin-left: 3%;
		margin-right: 3%;
		transition: width 0.3s;
		webkit-transition: width 0.3s;
	}
}

@media (min-width: 1450px) and (orientation: landscape) {
	#skyline {
		margin-top: -50px;
	}
}

/* Adjust header for retina handhelds */
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx),
(min-resolution: 144dpi) {
	@media (device-aspect-ratio: 16/9),
 (device-aspect-ratio: 2/1),
 (device-aspect-ratio: 5/3) {
	 #home {
		 height: 90px;
		 width: 161px;
		 position: relative;
		 z-index: 100;
	 }
	
 	.pagesNav {
		margin-top: 10px;
		font-size: 14pt;
	}
	
 	.icon-size {
		width: 22px;
		height: 22px;
		vertical-align: bottom;
		padding-right: 5px;
	}
	
	#thumbnails {
		margin-top: -30px;
		z-index: -50;
	 	padding-top: 0px;
	}
	
	.thumb, .thumb_min {
		height: 45px;
	}
	
	 #head_full, #spacer {
	 	height: 95px;
	 }
	
	 #head_full, #head_min, #spacer {
		 padding-left: 0px;
	}
	
	 @media (min-width: 721px) and (max-width: 900px) {
	 	#thumbnails, #thumbnails_min {
			width: 77%;
		 	margin: -30px 1% 0 22%;
		}
		
		.thumb {
			 width: 9%;
		 }
	 }
 }
}