/* -------------------------- CSS RESET -------------------------- */


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


/* -------------------------- CSS RESET -------------------------- */




/* -------------------------- MAIN STYLES -------------------------- */




body {
	
	color: #5d5e5e;
	margin: 0 auto;
	text-align: center;
	
}

#wrapper {
	
	width: 100%;
	
}


#splash {
	
	width: 100%;
	height: 100%;
	top: 0;
	background: white;
	display: block;
	position: fixed;
	z-index: 1000;
	
}

#logo {
	
	text-indent: -9999px;
	display: block;
	height: 302px;
	width: 353px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -151px;
	margin-left: -176px;
	background: transparent url('../img/logoMain.png') no-repeat center;
	cursor: pointer;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	

}

#logo:hover {
	
	opacity: 0.6;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	

	
}

nav {
	
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 500;
	
}

.navMenu {
	
	top: 0;
	background-color: black;
	opacity: 0.75;
	padding: 15px 0;
	color: white;
	font-size: 16px;
	letter-spacing: 5px;
	line-height: 150%;
	display: none;	
	
}

/*
.borderRight {
	
	border-right: solid 2px white;
	
}
*/

.navLinks {
	
	padding-right: 15px;
	padding-left: 15px;
	cursor: pointer;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	
	
}

.navLinks:hover {

	-webkit-opacity: 0.60;
	-moz-opacity: 0.60;	
	opacity: 0.60;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	
	
	
}

.menuButtonWrap {
	
	cursor: pointer;
	display: block;
	width: 100%;
	margin-top: -5px;
	text-indent: -9999px;
	background-color: black;
	padding: 10px 0;
	opacity: 0.75;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	
	
	
}


.menuButton {
	
	cursor: pointer;
	display: block;
	width: 90px;
	height: 50px;
	text-indent: -9999px;
	margin: 10px auto;
	background: transparent url('../img/logo.svg') no-repeat center;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	
	
}

.menuButtonWrap:hover {
	
	margin-top: 0px;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	
	
}

.active {
	
	margin-top: 0px;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	
	
}

#work {
	
	padding: 10px 0;
	
}


#alchemyLink {
	
	background: transparent url('../img/alcSquare.jpg') no-repeat center;
	background-size: contain;
	
}

#indexLink {
	
	background: transparent url('../img/indexSquare.png') no-repeat center;
	background-size: contain;
	
}

#oramaLink {
	
	background: transparent url('../img/oramaSquare.jpg') no-repeat center;
	background-size: contain;
	
}

#pdxtureLink {
	
	background: transparent url('../img/pdxtureRect.jpg') no-repeat center;
	background-size: contain;
	
}

#smithyLink {
	
	background: transparent url('../img/smithySquare.jpg') no-repeat center;
	background-size: contain;
	
}

#procrastinationLink {
	
	background: transparent url('../img/procrastinationSquare.jpg') no-repeat center;
	background-size: contain;
	
}					

#storyLink {
	
	background: transparent url('../img/storySquare.jpg') no-repeat center;
	background-size: contain;
	
}

#ninepointLink {
	
	background: transparent url('../img/ninepointSquare.jpg') no-repeat center;
	background-size: contain;
	
}

#onethousandLink {
	
	background: transparent url('../img/1000percentSquare.png') no-repeat center;
	background-size: contain;
	
}

#contactLink {
	
	background: transparent url('../img/contactRect.jpg') no-repeat center;
	background-size: contain;
	
}

#counterLink {
	
	background: transparent url('../img/counterSquare.jpg') no-repeat center;
	background-size: contain;
	
}

#infographicsLink {
	
	background: transparent url('../img/infographicSquare.jpg') no-repeat center;
	background-size: contain;
	
}	

#promoLink {
	
	background: transparent url('../img/promoSquare.png') no-repeat center;
	background-size: contain;
	
}

#discraftLink {
	
	background: transparent url('../img/discraftSquare.jpg') no-repeat center;
	background-size: contain;		
	
}
	

.navMenuWork {
	
	top: 0;
	text-align: right;
	background: black url('../img/logoSmall.svg') no-repeat left center;
	opacity: 0.75;
	padding: 15px 0 15px 15px;		
	
}


.navMenuWork a {
	
	padding: 0 10px;
	color: white;
	font-size: 16px;
	letter-spacing: 5px;
	line-height: 150%;
	text-decoration: none !important;
	
	
}

.resume {
	
	float: left;
	clear: both;
	padding: 15px 20px;
	font-size: 22px;
	display: block;
	text-decoration: none;
	color: white;
	background-color: #ed2330;
	width: auto;
	margin-top: 50px;
	letter-spacing: 1px;
	border-radius: 2px;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	
	
}

.resume:hover {

	opacity: 0.75;
	margin-top: 55px;
	/* Firefox */
    -moz-transition: all 175ms ease-in;
    /* WebKit */
    -webkit-transition: all 175ms ease-in;
    /* Opera */
    -o-transition: all 175ms ease-in;
    /* Standard */
    transition: all 175ms ease-in;	

}

/* -------------------------- MAIN STYLES -------------------------- */





/* -------------------------- MOBILE LAYOUT -------------------------- */



@media only screen and (min-width: 320px) {


	
	.hiddenMobile {
	
		display: none !important;
	
	}
	

	
	#workWrap {
		
		width: 300px;
		height: auto;
		overflow: auto;
		margin: 0 auto;
		text-align: center;
		margin-top: 100px;
		margin-bottom: 100px;
		
	}
	
	.square {
		
		height: 140px;
		width: 140px;		
		float: left;
		display: block;
		margin: 5px;

		
	}
	
	.workbutton {

		text-indent: -9999px;		
		cursor: pointer;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	

		
	}
	
	.workbutton:hover {
		
		opacity: 0.75;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	
		
	}
	
	.rect {
	
		float: left;		
		display: block;
		height: 140px;
		width: 290px;
		margin: 5px 0 5px 5px;
		background-size: cover !important;
		
	}
	
	
	#profilePics {
	
		width: 300px;
		margin: 0 auto;
	
	}
	
	
	#about {
		
		margin-top: 100px;
		background: transparent url('../img/aboutPic7.jpg') no-repeat center bottom;
		background-size: cover;
		color: white;
		padding-top: 200px;
		padding-bottom: 200px;
		-webkit-box-shadow: 2px 0px 15px 4px rgba(40, 40, 40, 0.2);
		-moz-box-shadow:    2px 0px 15px 4px rgba(40, 40, 40, 0.2);
		box-shadow:         2px 0px 15px 4px rgba(40, 40, 40, 0.2);		
		
	}
	
	#aboutWrap {
		
		width: 300px;
		margin: 0 auto;
				
	}
	
	#about h1 {
	
		text-align: left;
		text-transform: uppercase;
		margin: 0 auto;
		display: block;
		font-size: 50px;
		margin-bottom: 5px;
		letter-spacing: 2px;
		padding-bottom: 10px;
		border-bottom: white 5px solid;
	
	}
	
	#about h2 {
		
		text-align: left;
		margin: 0 auto;
		margin-top: 30px;
		font-size: 22px;
		letter-spacing: 1px;
		padding-bottom: 5px;
		border-bottom: 2px solid white;
		
	}
	
	#about p {
		
		text-align: left;
		margin: 0 auto;
		margin-top: 25px;
		line-height: 130%;		
	}

	#about ul {
		
		text-align: left;
		margin: 0 auto;
		margin-top: 15px;
		
	}
	
	#about li {
		
		list-style-type: square;
		margin: 5px 0px;
		margin-left: 20px;
		
	}


	#contact {
		
		width: 300px;
		margin: 100px auto;
		padding: 150px 0 300px 0;
		overflow: auto;
		
		
	}
	
	#contact h2 {
		
		font-size: 60px;
		letter-spacing: 5px;
		line-height: 120%;
		font-weight: bold;
		padding-bottom: 25px;
		border-bottom: 5px solid #9f9f9f;
		margin-bottom: 25px;
		
	}
	
	#contact h3 {
		
		text-transform: uppercase;
		letter-spacing: 1px;
		line-height: 120%;
		font-size: 24px;
		margin-bottom: 40px;
		padding-bottom: 25px;
		border-bottom: 5px solid #9f9f9f;
		
		
	}
	
	.socialButtons {
		
		float: left;
		margin-left: 7px;
		text-indent: -9999px;
		border-radius: 2px;
		height: 50px;
		width: 50px;
		display: block;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	
		
	}
	
	.socialButtons:hover {
		
		opacity: 0.75;
		margin-top: 10px;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	
				
	}	

	.twitter {
	
		background-image: url('../img/twitter.svg');
	
	}

	.instagram {
	
		background-image: url('../img/instagram.svg');
	
	}

	.linkedIn {
	
		background-image: url('../img/linkedin.svg');
	
	}

	.facebook {
	
		background-image: url('../img/facebook.svg');
	
	}

	.email {
	
		background-image: url('../img/mail.svg');
	
	}
	
	footer {
		
		text-align: center;
		color: #9f9f9f;
		text-transform: uppercase;
		padding: 10px 0;
		width: 100%;
		background: transparent url('../img/white90.png') repeat;
		position: fixed;
		bottom: 0;
		
	}
	
	footer h4 {
		
		letter-spacing: 1px;
		font-size: 12px;
		font-weight: bold;
		
	}
	
	.workPhotos {
		
		width: 300px;
		margin: 150px auto;
		height: auto;
		overflow: auto;		
		clear: none;
		
	}
	
	.wideRect {
		
		float: left;		
		display: block;
		height: 150px;
		width: 290px;
		margin: 5px 0 5px 5px;
		background-size: cover !important;
		
		
	}
	
	.tallRect {
		
		float: left;		
		display: block;
		height: 290px;
		width: 140px;
		margin: 5px;
		background-size: cover !important;
		
		
	}
	
	.workSquare {
		
		height: 140px;
		width: 140px;		
		float: left;
		display: block;
		margin: 5px;			
		
	}
	
	.title{
		
		width: 300px;
		margin: 0 auto;
		
	}
	
	.projectType {
		
		width: 300px;
		margin: 0 auto;
		
	}
	
	.description {
		
		width: 300px;
		margin: 0 auto;		
		
	}

	.siteLink {
		
		float: left;
		width: 290px;
		padding: 25px 0;
		margin: 5px 0 5px 5px;
		text-align: center;
		font-size: 30px;
		background-color: #9f9f9f;
		text-decoration: none;
		clear: both;
		color: white;
		letter-spacing: 2px;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	
		
	}
	
	.siteLink:hover {
		
	
		padding: 50px 0;
		opacity: 0.75;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	
	
		
	}

	#infographics .wideRect {
	
		height: 290px;
	
	}
	
	#map {
		
		display: block;
		height: 200px;
		width: 100%;
		margin-top: 150px;
		-webkit-box-shadow: 2px 0px 15px 2px rgba(40, 40, 40, 0.2);
		-moz-box-shadow:    2px 0px 15px 2px rgba(40, 40, 40, 0.2);
		box-shadow:         2px 0px 15px 2px rgba(40, 40, 40, 0.2);	
			
	}
	
}	



/* -------------------------- MOBILE LAYOUT -------------------------- */





/* -------------------------- LAPTOP LAYOUT -------------------------- */




@media only screen and (min-width: 1000px) {

	
	
	#workWrap {
		
		width: 900px;
		height: auto;
		overflow: auto;
		margin: 0 auto;
		text-align: center;
		margin-top: 150px;
		margin-bottom: 150px;
		
	}
	
	
	.square {
		
		height: 215px;
		width: 215px;		
		float: left;
		display: block;
		margin: 5px;

		
	}
	
	.rect {
	
		float: left;		
		display: block;
		height: 215px;
		width: 440px;
		margin: 5px;
		background-size: cover !important;
		
	}
	
	
	#aboutWrap {
		
		width: 800px;
		margin: 0 auto;
				
	}
	
	#about h1 {
	
		text-align: left;
		text-transform: uppercase;
		margin: 0 auto;
		display: block;
		font-size: 50px;
		margin-bottom: 5px;
		letter-spacing: 2px;
		padding-bottom: 10px;
		border-bottom: white 5px solid;
	
	}
	
	#about h2 {
		
		text-align: left;
		margin: 0 auto;
		margin-top: 30px;
		font-size: 22px;
		letter-spacing: 1px;
		padding-bottom: 5px;
		border-bottom: 2px solid white;
		
	}
	
	#about p {
		
		text-align: left;
		margin: 0 auto;
		margin-top: 25px;
		line-height: 130%;		
	}

	#about ul {
		
		text-align: left;
		margin: 0 auto;
		margin-top: 15px;
		
	}
	
	#about li {
		
		list-style-type: square;
		margin: 5px 0px;
		margin-left: 20px;
		
	}


	#contact {
		
		width: 300px;
		margin: 100px auto;
		padding: 150px 0 300px 0;
		overflow: auto;
		
	}
	
	#contact h2 {
		
		font-size: 60px;
		letter-spacing: 5px;
		line-height: 120%;
		font-weight: bold;
		padding-bottom: 25px;
		border-bottom: 5px solid #9f9f9f;
		margin-bottom: 25px;
		
	}
	
	#contact h3 {
		
		text-transform: uppercase;
		letter-spacing: 1px;
		line-height: 120%;
		font-size: 24px;
		margin-bottom: 40px;
		padding-bottom: 25px;
		border-bottom: 5px solid #9f9f9f;
		
		
	}

	.workPhotos {
		
		width: 900px;
		margin: 150px auto;
		height: auto;
		overflow: auto;
		clear: none;
		
	}
	
	.wideRect {
		
		float: left;		
		display: block;
		height: 440px;
		width: 440px;
		margin: 5px;
		background-size: cover !important;
		
		
	}
	
	.tallRect {
		
		float: left;		
		display: block;
		height: 440px;
		width: 215px;
		margin: 5px;
		background-size: cover !important;
		
		
	}
	
	.workSquare {
		
		height: 215px;
		width: 215px;		
		float: left;
		display: block;
		margin: 5px;			
		
	}
	
	.glamPic {
		
		float: left;		
		display: block;
		height: 440px;
		width: 890px;
		margin: 5px 0 5px 5px;
		background-size: cover !important;
		overflow: hidden;
		
	}	
	
	.title{
		
		width: 800px;
		margin: 0 auto;
		
	}
	
	.projectType {
		
		width: 800px;
		margin: 0 auto;
		
	}
	
	.description {
		
		width: 800px;
		margin: 0 auto;		
		
	}

	.siteLink {
		
		float: left;
		width: 890px;
		padding: 25px 0;
		margin: 5px 0 5px 5px;
		text-align: center;
		font-size: 30px;
		background-color: #9f9f9f;
		text-decoration: none;
		clear: both;
		color: white;
		letter-spacing: 2px;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	
		
	}
	
	.siteLink:hover {
		
	
		padding: 50px 0;
		opacity: 0.75;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	
	
		
	}
	
	#infographics .wideRect {
	
	height: 890px;
	
	}

	footer {
		
		text-align: right;
		color: #9f9f9f;
		text-transform: uppercase;
		padding: 30px 0;
		width: 100%;
		background: transparent url('../img/white90.png') repeat;
		position: fixed;
		bottom: 0;
		
	}
	
	footer h1 {
	
		letter-spacing: 1px;
		font-size: 12px;
		font-weight: bold;
		margin-right: 50px;
		
	}

	#map {
		
		display: block;
		height: 400px;
		margin-top: 250px;
		width: 100%;
		
	}
	
	#counter .photoSeven {
		
		height: 890px;
		
	}		
	
}




/* -------------------------- LAPTOP LAYOUT -------------------------- */




/* -------------------------- DESKTOP LAYOUT -------------------------- */



@media only screen and (min-width: 1600px) {


	#workWrap {
		
		width: 1500px;
		height: auto;
		overflow: auto;
		margin: 0 auto;
		text-align: center;
		margin-top: 150px;
		margin-bottom: 150px;
		
	}
	
	
	.square {
		
		height: 365px;
		width: 365px;		
		float: left;
		display: block;
		margin: 5px;

		
	}
	
	.rect {
	
		float: left;		
		display: block;
		height: 365px;
		width: 740px;
		margin: 5px;
		background-size: cover !important;
		
	}
	
	
	#aboutWrap {
		
		width: 800px;
		margin: 0 auto;
				
	}
	
	#about h1 {
	
		text-align: left;
		text-transform: uppercase;
		margin: 0 auto;
		display: block;
		font-size: 50px;
		margin-bottom: 5px;
		letter-spacing: 2px;
		padding-bottom: 10px;
		border-bottom: white 5px solid;
	
	}
	
	#about h2 {
		
		text-align: left;
		margin: 0 auto;
		margin-top: 30px;
		font-size: 22px;
		letter-spacing: 1px;
		padding-bottom: 5px;
		border-bottom: 2px solid white;
		
	}
	
	#about p {
		
		text-align: left;
		margin: 0 auto;
		margin-top: 25px;
		line-height: 130%;		
	}

	#about ul {
		
		text-align: left;
		margin: 0 auto;
		margin-top: 15px;
		
	}
	
	#about li {
		
		list-style-type: square;
		margin: 5px 0px;
		margin-left: 20px;
		
	}


	#contact {
		
		width: 300px;
		margin: 100px auto;
		padding: 150px 0 300px 0;
		overflow: auto;
		
		
	}
	
	#contact h2 {
		
		font-size: 60px;
		letter-spacing: 5px;
		line-height: 120%;
		font-weight: bold;
		padding-bottom: 25px;
		border-bottom: 5px solid #9f9f9f;
		margin-bottom: 25px;
		
	}
	
	#contact h3 {
		
		text-transform: uppercase;
		letter-spacing: 1px;
		line-height: 120%;
		font-size: 24px;
		margin-bottom: 40px;
		padding-bottom: 25px;
		border-bottom: 5px solid #9f9f9f;
		
		
	}

	.workPhotos {
		
		width: 1500px;
		margin: 150px auto;
		height: auto;
		overflow: auto;		
		clear: none;
		
	}
	
	.wideRect {
		
		float: left;		
		display: block;
		height: 740px;
		width: 740px;
		margin: 5px;
		background-size: cover !important;
		
		
	}
	
	.tallRect {
		
		float: left;		
		display: block;
		height: 740px;
		width: 365px;
		margin: 5px;
		background-size: cover !important;
		
		
	}
	
	.workSquare {
		
		height: 365px;
		width: 365px;		
		float: left;
		display: block;
		margin: 5px;			
		
	}
	
	.glamPic {
		
		float: left;		
		display: block;
		height: 740px;
		width: 1490px;
		margin: 5px 0 5px 5px;
		background-size: cover !important;
		
	}

	#counter .photoFive {
		
		height: 750px;
		
	}

	#counter .photoSeven {

		height: 1000px;
		
	}
	
	#ninePoint .photoEight {
		
		height: 1000px;
				
	}	

	.siteLink {
		
		float: left;
		width: 1490px;
		padding: 25px 0;
		margin: 5px 0 5px 5px;
		text-align: center;
		font-size: 30px;
		background-color: #9f9f9f;
		text-decoration: none;
		clear: both;
		color: white;
		letter-spacing: 2px;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	
		
	}
	
	.siteLink:hover {
		
	
		padding: 50px 0;
		opacity: 0.75;
		/* Firefox */
	    -moz-transition: all 175ms ease-in;
	    /* WebKit */
	    -webkit-transition: all 175ms ease-in;
	    /* Opera */
	    -o-transition: all 175ms ease-in;
	    /* Standard */
	    transition: all 175ms ease-in;	
	
		
	}

	#infographics .wideRect {
		
		height: 1500px;
		
	}

	#counter .photoSeven {
		
		height: 1490px;
		
	}

}


/* -------------------------- DESKTOP LAYOUT -------------------------- */


.navMenu a {
	
	text-decoration: none;
	color: white;
	
}

.workInfo {
	
	display: block;
	margin: 150px auto;
	overflow: auto;
	width: 100%;
	padding: 150px 0;
	text-align: left;
	
}


.title {
	
	color: white;
	font-size: 36pt;
	letter-spacing: 2px;
	font-weight: bold;
	border-bottom: 5px solid white;
	padding-bottom: 15px;
	
}

.projectType {
	
	margin-top: 25px;
	color: white;
	font-size: 24px;
	letter-spacing: 1px;
	
}

.description {
	
	margin-top: 20px;
	color: white;
	font-size: 16px;
	line-height: 120%;
	border-bottom: 5px solid white;
	padding-bottom: 25px;
	
	
}





/* -------------------------- ALCHEMY -------------------------- */


#alchemy .workInfo {
	
	background: transparent url('../img/alchemy/alc-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#alchemy .photoOne {
	
	background: transparent url('../img/alchemy/alc-1.jpg') no-repeat center;	
	background-size: cover;
	
}

#alchemy .photoTwo {
	
	background: transparent url('../img/alchemy/alc-3.jpg') no-repeat center;	
	background-size: cover;
	
}

#alchemy .photoThree {
	
	background: transparent url('../img/alchemy/alc-6.jpg') no-repeat center;	
	background-size: cover;
	
}

#alchemy .photoFour {
	
	background: transparent url('../img/alchemy/alc-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#alchemy .photoFive {
	
	background: transparent url('../img/alchemy/alc-10.jpg') no-repeat center;	
	background-size: cover;
	
}

#alchemy .photoSix {
	
	background: transparent url('../img/alchemy/alc-5.jpg') no-repeat center;	
	background-size: cover;
	
}

#alchemy .photoSeven {
	
	background: transparent url('../img/alchemy/alc-8.jpg') no-repeat center;	
	background-size: cover;
	
}

#alchemy .photoEight {
	
	background: transparent url('../img/alchemy/alc-4.jpg') no-repeat center;	
	background-size: cover;
	
}

#alchemy .photoNine {
	
	background: transparent url('../img/alchemy/alc-9.jpg') no-repeat center;	
	background-size: cover;
	
}

#alchemy .photoTen {
	
	background: transparent url('../img/alchemy/alc-7.jpg') no-repeat center;	
	background-size: cover;
	
}

/* -------------------------- ALCHEMY -------------------------- */




/* -------------------------- COUNTER -------------------------- */


#counter .workInfo {
	
	background: transparent url('../img/counter/cw-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#counter .photoOne {
	
	background: transparent url('../img/counter/cw-10.jpg') no-repeat center;	
	background-size: cover;
	
}

#counter .photoTwo {
	
	background: transparent url('../img/counter/cw-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#counter .photoThree {
	
	background: transparent url('../img/counter/cw-5.jpg') no-repeat center;	
	background-size: cover;
	
}

#counter .photoFour {
	
	background: transparent url('../img/counter/cw-7.jpg') no-repeat center;	
	background-size: cover;
	
}

#counter .photoFive {
	
	background: transparent url('../img/counter/cw-8.jpg') no-repeat center top;	
	background-size: cover;
		
}

#counter .photoSix {
	
	background: transparent url('../img/counter/cw-4.jpg') no-repeat center top;	
	background-size: cover;
	
}

#counter .photoSeven {
	
	background: transparent url('../img/counter/cw-6.jpg') no-repeat center top;	
	background-size: cover;
	
}

/* -------------------------- COUNTER -------------------------- */




/* -------------------------- NINEPOINT -------------------------- */


#ninePoint .workInfo {
	
	background: transparent url('../img/ninepointeight/98-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#ninePoint .photoOne {
	
	background: transparent url('../img/ninepointeight/98-1.jpg') no-repeat center;	
	background-size: cover;
	
}

#ninePoint .photoTwo {
	
	background: transparent url('../img/ninepointeight/98-5.jpg') no-repeat center;	
	background-size: cover;
	
}

#ninePoint .photoThree {
	
	background: transparent url('../img/ninepointeight/98-6.jpg') no-repeat center;	
	background-size: cover;
	
}

#ninePoint .photoFour {
	
	background: transparent url('../img/ninepointeight/98-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#ninePoint .photoFive {
	
	background: transparent url('../img/ninepointeight/98-3.jpg') no-repeat center top;	
	background-size: cover;
		
}

#ninePoint .photoSix {
	
	background: transparent url('../img/ninepointeight/98-7.jpg') no-repeat center top;	
	background-size: cover;
	
}

#ninePoint .photoSeven {
	
	background: transparent url('../img/ninepointeight/98-9.jpg') no-repeat center top;	
	background-size: cover;
	
}

#ninePoint .photoEight {
	
	background: transparent url('../img/ninepointeight/98-10.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

/* -------------------------- NINEPOINT -------------------------- */





/* -------------------------- ORAMA -------------------------- */


#orama .workInfo {
	
	background: transparent url('../img/orama/orama-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#orama .photoOne {
	
	background: transparent url('../img/orama/orama-6.jpg') no-repeat center;	
	background-size: cover;
	
}

#orama .photoTwo {
	
	background: transparent url('../img/orama/orama-4.jpg') no-repeat center;	
	background-size: cover;
	
}

#orama .photoThree {
	
	background: transparent url('../img/orama/orama-5.png') no-repeat center;	
	background-size: cover;
	
}

#orama .photoFour {
	
	background: transparent url('../img/orama/orama-1.jpg') no-repeat center;	
	background-size: cover;
	
}

#orama .photoFive {
	
	background: transparent url('../img/orama/orama-7.jpg') no-repeat center top;	
	background-size: cover;
		
}

#orama .photoSix {
	
	background: transparent url('../img/orama/orama-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#orama .photoSeven {
	
	background: transparent url('../img/orama/orama-9.jpg') no-repeat center;	
	background-size: cover;
	
}

#orama .photoEight {
	
	background: transparent url('../img/orama/orama-3.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

/* -------------------------- ORAMA -------------------------- */




/* -------------------------- SMITHY -------------------------- */


#smithy .workInfo {
	
	background: transparent url('../img/smithy/smithy-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#smithy .photoOne {
	
	background: transparent url('../img/smithy/smithy-1.jpg') no-repeat center;	
	background-size: cover;
	
}

#smithy .photoTwo {
	
	background: transparent url('../img/smithy/smithy-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#smithy .photoThree {
	
	background: transparent url('../img/smithy/smithy-3.jpg') no-repeat center;	
	background-size: cover;
	
}

#smithy .photoFour {
	
	background: transparent url('../img/smithy/smithy-4.jpg') no-repeat center;	
	background-size: cover;
	
}

#smithy .photoFive {
	
	background: transparent url('../img/smithy/smithy-14.jpg') no-repeat center top;	
	background-size: cover;
		
}

#smithy .photoSix {
	
	background: transparent url('../img/smithy/smithy-16.jpg') no-repeat center;	
	background-size: cover;
	
}

#smithy .photoSeven {
	
	background: transparent url('../img/smithy/smithy-8.jpg') no-repeat center;	
	background-size: cover;
	
}

#smithy .photoEight {
	
	background: transparent url('../img/smithy/smithy-11.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#smithy .photoNine {
	
	background: transparent url('../img/smithy/smithy-12.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#smithy .photoTen {
	
	background: transparent url('../img/smithy/smithy-13.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#smithy .photoEleven {
	
	background: transparent url('../img/smithy/smithy-5.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#smithy .photoTwelve {
	
	background: transparent url('../img/smithy/smithy-9.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#smithy .photoThirteen {
	
	background: transparent url('../img/smithy/smithy-10.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#smithy .photoFourteen {
	
	background: transparent url('../img/smithy/smithy-17.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#smithy .photoFifteen {
	
	background: transparent url('../img/smithy/smithy-7.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#smithy .photoSixteen {
	
	background: transparent url('../img/smithy/smithy-15.jpg') no-repeat center bottom;	
	background-size: cover;
	
}
/* -------------------------- SMITHY -------------------------- */





/* -------------------------- STORY -------------------------- */


#story .workInfo {
	
	background: transparent url('../img/story/story-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#story .photoOne {
	
	background: transparent url('../img/story/story-8.jpg') no-repeat center;	
	background-size: cover;
	
}

#story .photoTwo {
	
	background: transparent url('../img/story/story-6.jpg') no-repeat center;	
	background-size: cover;
	
}

#story .photoThree {
	
	background: transparent url('../img/story/story-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#story .photoFour {
	
	background: transparent url('../img/story/story-1.jpg') no-repeat center;	
	background-size: cover;
	
}

#story .photoFive {
	
	background: transparent url('../img/story/story-3.jpg') no-repeat center top;	
	background-size: cover;
		
}

#story .photoSix {
	
	background: transparent url('../img/story/story-10.jpg') no-repeat center;	
	background-size: cover;
	
}

#story .photoSeven {
	
	background: transparent url('../img/story/story-9.jpg') no-repeat center;	
	background-size: cover;
	
}

#story .photoEight {
	
	background: transparent url('../img/story/story-7.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#story .photoNine {
	
	background: transparent url('../img/story/story-5.jpg') no-repeat center bottom;	
	background-size: cover;
	
}

#story .photoTen {
	
	background: transparent url('../img/story/story-4.jpg') no-repeat center bottom;	
	background-size: cover;
	
}


/* -------------------------- STORY -------------------------- */





/* -------------------------- INDEX -------------------------- */


#index .workInfo {
	
	background: transparent url('../img/index/index-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#index .photoOne {
	
	background: transparent url('../img/index/index-1.jpg') no-repeat center;	
	background-size: cover;
	
}

#index .photoTwo {
	
	background: transparent url('../img/index/index-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#index .photoThree {
	
	background: transparent url('../img/index/index-3.jpg') no-repeat center;	
	background-size: cover;
	
}

#index .photoFour {
	
	background: transparent url('../img/index/index-4.jpg') no-repeat center;	
	background-size: cover;
	
}

#index .photoFive {
	
	background: transparent url('../img/index/index-5.jpg') no-repeat center top;	
	background-size: cover;
		
}

#index .photoSix {
	
	background: transparent url('../img/index/index-6.jpg') no-repeat center;	
	background-size: cover;
	
}


/* -------------------------- INDEX -------------------------- */



/* -------------------------- PDXTURE -------------------------- */


#pdxture .workInfo {
	
	background: transparent url('../img/pdxture/pdxture-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#pdxture .photoOne {
	
	background: transparent url('../img/pdxture/pdxture-1.jpg') no-repeat center;	
	background-size: cover;
	
}


#pdxture .photoThree {
	
	background: transparent url('../img/pdxture/pdxture-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#pdxture .photoFour {
	
	background: transparent url('../img/pdxture/pdxture-4.jpg') no-repeat center;	
	background-size: cover;
	
}

#pdxture .photoFive {
	
	background: transparent url('../img/pdxture/pdxture-5.jpg') no-repeat center;	
	background-size: cover;
		
}

#pdxture .photoSix {
	
	background: transparent url('../img/pdxture/pdxture-3.jpg') no-repeat center;	
	background-size: cover;
	
}


/* -------------------------- PDXTURE -------------------------- */



/* -------------------------- PROCRASTINATION -------------------------- */


#procrastination .workInfo {
	
	background: transparent url('../img/procrastination/procrastination-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#procrastination .photoOne {
	
	background: transparent url('../img/procrastination/procrastination-5.jpg') no-repeat center;	
	background-size: cover;
	
}


#procrastination .photoThree {
	
	background: transparent url('../img/procrastination/procrastination-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#procrastination .photoFour {
	
	background: transparent url('../img/procrastination/procrastination-4.jpg') no-repeat center;	
	background-size: cover;
	
}

#procrastination .photoFive {
	
	background: transparent url('../img/procrastination/procrastination-3.jpg') no-repeat center;	
	background-size: cover;
		
}

#procrastination .photoSix {
	
	background: transparent url('../img/procrastination/procrastination-1.jpg') no-repeat center;	
	background-size: cover;
	
}


/* -------------------------- PROCRASTINATION -------------------------- */




/* -------------------------- 1000percent -------------------------- */


#onethousandpercent .workInfo {
	
	background: transparent url('../img/1000percent/1000percent-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#onethousandpercent .photoOne {
	
	background: transparent url('../img/1000percent/1000percent-6.jpg') no-repeat center top;	
	background-size: cover;
	
}

#onethousandpercent .photoTwo {
	
	background: transparent url('../img/1000percent/1000percent-5.jpg') no-repeat center top;	
	background-size: cover;
	
}

#onethousandpercent .photoThree {
	
	background: transparent url('../img/1000percent/1000percent-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#onethousandpercent .photoFour {
	
	background: transparent url('../img/1000percent/1000percent-4.png') no-repeat center;	
	background-size: cover;
	
}

#onethousandpercent .photoFive {
	
	background: transparent url('../img/1000percent/1000percent-3.png') no-repeat center;	
	background-size: cover;
		
}

#onethousandpercent .photoSix {
	
	background: transparent url('../img/1000percent/1000percent-1.jpg') no-repeat center;	
	background-size: cover;
	
}


/* -------------------------- 1000percent -------------------------- */




/* -------------------------- DISCRAFT -------------------------- */


#discraft .workInfo {
	
	background: transparent url('../img/discraft/discraft-big.jpg') no-repeat center;
	background-size: cover;
	
	
}

#discraft .photoOne {
	
	background: transparent url('../img/discraft/discraft-9.jpg') no-repeat center top;	
	background-size: cover;
	
}

#discraft .photoTwo {
	
	background: transparent url('../img/discraft/discraft-10.jpg') no-repeat center top;	
	background-size: cover;
	
}

#discraft .photoThree {
	
	background: transparent url('../img/discraft/discraft-1.jpg') no-repeat center;	
	background-size: cover;
	
}

#discraft .photoFour {
	
	background: transparent url('../img/discraft/discraft-2.jpg') no-repeat center;	
	background-size: cover;
	
}

#discraft .photoFive {
	
	background: transparent url('../img/discraft/discraft-3.jpg') no-repeat center;	
	background-size: cover;
		
}

#discraft .photoSix {
	
	background: transparent url('../img/discraft/discraft-4.jpg') no-repeat center;	
	background-size: cover;
	
}

#discraft .photoSeven {
	
	background: transparent url('../img/discraft/discraft-5.jpg') no-repeat center;	
	background-size: cover;
	
}

#discraft .photoEight {
	
	background: transparent url('../img/discraft/discraft-6.jpg') no-repeat center;	
	background-size: cover;
	
}

#discraft .photoNine {
	
	background: transparent url('../img/discraft/discraft-7.jpg') no-repeat center;	
	background-size: cover;
	
}

#discraft .photoTen {
	
	background: transparent url('../img/discraft/discraft-8.jpg') no-repeat center;	
	background-size: cover;
	
}



/* -------------------------- DISCRAFT -------------------------- */





/* -------------------------- infographics -------------------------- */




#infographics .photoOne {
	
	background: transparent url('../img/infographics/infographics-1.jpg') no-repeat center top;	
	background-size: cover;
	
}

#infographics .photoTwo {
	
	background: transparent url('../img/infographics/infographics-2.jpg') no-repeat center top;	
	background-size: cover;
	
}

#infographics .photoThree {
	
	background: transparent url('../img/infographics/infographics-3.jpg') no-repeat center;	
	background-size: cover;
	
}

#infographics .photoFour {
	
	background: transparent url('../img/infographics/infographics-4.jpg') no-repeat center;	
	background-size: cover;
	
}



/* -------------------------- infographics -------------------------- */




/* -------------------------- CONTACT -------------------------- */


#contactTable .workInfo {
	
	background: transparent url('../img/contact/contact-big.png') no-repeat center;
	background-size: cover;
	
	
}

#contactTable video {
	
	margin: 5px auto;
	
}

/* -------------------------- CONTACT -------------------------- */



/* -------------------------- PROMO -------------------------- */

#promo {
	
	background: #4e4c50 url('../img/mazeBig.svg') no-repeat center;
	width: 100%;
	display: block;
	background-size: cover;
	
}







/* -------------------------- PROMO -------------------------- */