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

/*--------Global properties--------*/
    /*html, body; #home, #home_min, svg#logo, footer, #standardNav*/
body {
	max-width: 2300px;
	margin: auto;
	box-shadow: 0px -15px 50px rgba(50, 50, 50, 0.2);
	background-color: #ffffff;
}

#home, #home_min {
	transition: all 0.25s;
	webkit-transition: all 0.25s;
}

#home {
	width: 325px;
	height: 202px;
}

#home_min {
	width: 285px;
	height: 177px;
}

#standardNav {
	height: 200px;
}

/*--------Text styles--------*/
    /*h1, h1#hello, h2, p, p.homeText, p.aboutText, p.summaryText*/
h1 {
	font-size: 38pt;
	margin: 150px 0 5px 0;
}

h1#hello {
	font-size: 90pt;
	line-height: 80pt;
}

h2 {
	font-size: 26pt;
}

p.homeText, p.aboutText {
	font-size: 20pt;
	line-height: 32pt;
}

.summaryText-live p, .summaryText-noLive p {
	font-size: 20pt;
	line-height: 30pt;
}

/*--------Main navigation--------*/
    /*.pagesNav, .pagesNav_min, icon-size, icon-size_min, navIcon, navIcon-active, 
				  .navIcon:hover, a*/
#pages {
	max-width: 2000px;
}

.pagesNav, .pagesNav_min {
	padding-left: 7%;
	display: inline-block;
	transition: all 0.25s;
	webkit-transition: all 0.25s;
}

.pagesNav {
	height: 25px;
	margin-top: 120px;
	font-size: 26pt;
}

.pagesNav_min {
	margin-top: 40px;
	font-size: 26pt;
}

.navIcon {
	transition: none;
	webkit-transition: none;
	border-bottom: 10px #d0d1d2 solid;
}

.navIcon-active, .navIcon:hover {
	transition: none;
	webkit-transition: none;
	border-bottom: 10px #49e4b2 solid;
}

.icon-size, .icon-size_min {
	width: 38px;
	height: 38px;
	/*transition: all 0.25s;
	webkit-transition: all 0.25s;*/
}

/*--------Subnavigation--------*/
    /*.subnav, #thumbnails_min, .pagination, .thumb, .thumb_min, #active*/
#pullDown label {
	display: none;
}

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

.pagination {
	height: 60px;
}

.thumb, .thumb_min {
	width: 10%;
	max-width: 200px;
	height: 8em;
	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: height 0.25s;
	transition: height 0.25s;
	
	background-size: cover;
	background-origin: border-box;
	overflow: hidden;
	border: solid 5px rgba(0, 0, 0, 0.18);
	box-shadow: inset 0px 0px 55px rgba(0, 0, 0, 0.275);
}

.thumb {
	height: 144px;
}

.thumb_min {
	height: 80px;
}

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

#thumbnails {
	margin-top: -5px;
}

#thumbnails_min {
	margin-top: -60px;
}

.thumb:hover, .thumb_min:hover, #active {
	border: solid 5px #259f78;
}

/*--------Home/About pages formatting--------*/
    /*#welcome, #skyline, #myPic, .intro, #pdf-icon, #resume*/
#skyline {
	margin-top: -100px;
}

#myPic {
	margin-top: 50px;
}

.intro {
	width: 45%;
	margin-right: 15%;
	margin-top: 20px;
}

/*--------Digital/Print pages formatting--------*/
    /*#summary, #previewImg, #project, #down-arrow, #viewLive, #cta-arrow, #screenshots,    
				  #screenshots img*/
#summary {
	max-width: 2300px;
}

#preview, #project {
	display: inline-block;
	vertical-align: middle;
}
	
#preview {
	width: 40%;
	max-width: 928px;
	margin-left: 5%;
	margin-right: 5%;
	transition: width 0.3s;
	webkit-transition: width 0.3s;
}

#project {
	padding: 40px 2%;
	min-height: 370px;
}

.summaryText-live, .summaryText-noLive {
	margin-bottom: 20px;
}

.summaryText-live {
	height: 430px;
}

.summaryText-noLive {
	height: 460px;
}

#viewLive {
	font-size: 30pt;
}

.screenshots-img {
	max-width: 1583px;
}

/*.smallImageContainer {
	max-width: 1583px;
}*/

/*--------Digital/Print: Header size and back to top--------*/
    /*#scrollTop_hidden, #scrollTop a, #scrollTop:hover, #scrollArrow, #head_full, #head_min*/

#head_full, #spacer {
	height: 335px;
	max-width: 2290px;
	transition: all 0.25s;
	webkit-transition: all 0.25s;
}

#head_min {
	height: 190px;
	max-width: 2290px;
}

#scrollTop {
	max-width: 150px;
	margin-left: 90.5%;
}

/*--------Mini-queries--------*/
@media (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 {
		width: 100%;
		position: relative;
		display: block;
		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: -55%  0 30px 0;
		text-align: center;
		font-size: 120pt;
		line-height: 110pt;
	}
}

@media (min-width: 2200px) {
	#scrollTop {
		margin-left: 88%;
	}
	
	h1 {
		margin: 180px 0 5px 0;
	}
	
	#skyline {
		margin-top: -150px;
	}
	
	.summaryText-live {
		height: 550px;
	}
	
	.summaryText-noLive {
		height: 580px;
	}
}

@media (min-width: 2300px) {
	html {
		background-image: url(images/diagonal.gif);
		-webkit-transition: all 0.25s;
		transition: all 0.25s;
	}
	
	#skyline {
		padding: 0 8% 0 4%;
	}
}

@media (min-width: 2500px) {
	#thumbnails, #thumbnails_min {
		margin-left: 400px;
	}
}