/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of Meyer Reset CSS */

img {
	max-width: 100%; /*makes images scale with flexible grids*/
	display: block; /*removes tiny space added in some browsers below images */
}

html,body {

}

.wrapper {
	position: relative;
	width: 100%;
	/* max-width: 1000px; */
	margin: 0 auto;
	overflow: hidden; /* keeps wrapper from folding up on itself when you float elements in it */
}

h1 {
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	font-size: 1.75em;
}

h4 {
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	font-size: 1.75em;
	padding-top: 2em;
	text-align: center;
	color: #615e5d;
}

h3 {
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	font-size: 1.4em; /*1.1em;*/
	color: #615e5d;
	padding-top: 1.8em;/*1.5em;*/
}

h5 {
	font-family: 'Lora', serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: .015em;
	font-size: .95em;
	line-height: 1.45em;
	padding-top: .75em;
}

h6 {
	font-family: 'Lora', serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: .015em;
	font-size: 1.45em;
	line-height: 1.45em;
	text-align: center;
	color: #615e5d;
}

p, a {
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: 1.1em;
	line-height: 1.6em;
	text-decoration: none;
}

.spaceafter {
	padding-bottom: 1em;
}

.details2 p, .details2 p a, .details2 ul li, .details3 p, .details3 p a, .details3 ul li, .resume ul li {
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.5em;
}

.resume p, .resume p a {
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.75em;
}

.details2 p a, .details3 p a, .resume p a {
	color: #6bbdad;
	font-weight: 700;
}

.details2 p a:hover, .details3 p a:hover {
	text-decoration: underline;
}

.hero {
	display: block;
	position: fixed;
	margin: 0 auto;
	max-width: 100%;
}

.hero1 figure {
	display: block;
	position: fixed;
	margin: 0 auto;
	max-width: 100%;
}
	
	
	figure:nth-child(1) { 
	   animation: xfade 60s 50s infinite; 
	 } 
	 figure:nth-child(2) { 
	   animation: xfade 60s 40s infinite; 
	 } 
	 figure:nth-child(3) { 
	   animation: xfade 60s 30s infinite; 
	 } 
	 figure:nth-child(4) { 
	   animation: xfade 60s 20s infinite; 
	 } 
	 figure:nth-child(5) { 
	   animation: xfade 60s 10s infinite; 
	 } 
	 figure:nth-child(6) { 
	   animation: xfade 60s 0s infinite; 
	 }
	 
	 
	 @keyframes xfade{ 
	   0%{ 
	     opacity: 1; 
	   } 
	   14.67% { 
	     opacity:1; 
	   } 
	   16.67%{ 
	     opacity: 0; 
	   } 
	   98% { 
	     opacity:0; 
	   } 
	   100% { 
	     opacity:1; 
	   } 
	 }

.mobilenav {
	position: fixed;
	width: 100%;
	z-index: 20;margin: 0 auto;
	background-color: #615e5d; /*gray*/
	padding-top: .5em;
	padding-bottom: .5em;
	text-align: center;
}

.mobilenav a {
	color: white;
	text-transform: uppercase;
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
}

.dropdown {
	position: relative;
	width: 100%;
	margin-top: 1em;
	/*background-color: #cde08d; lighter lime*/
}

#menu {
	display: none; /* this line hides the div until the JavaScript is called to show it */
}

.dropdown a li {
	margin-top: 1.75em;
	color: white;
	text-transform: uppercase;
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	font-size: 1em;
}

.mainnav {
	display: none;
}

.opaque {
	opacity: 1;
	filter: alpha(opacity=100);
}

header {
	position: relative;
	width: 100%;
	float: none;
	margin-top: 5em;
}

.grabber, .grabber2 {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.grabber img {
	margin: 0 auto;
	width: 85px;
}

.grabber h1 {
	margin-top: .5em;
	color: black;
	font-size: 1.5em;
	text-align: center;
}

.grabber2 h1 {
	margin-top: .5em;
	color: black;
	font-size: 1.5em;
	margin-bottom: .75em;
	text-align: center;
}

.grabber p {
	margin-top: .75em;
	color: black;
	font-size: .925em;
	text-align: center;
}

.grabber2 p, .grabber2 h5 {
	margin: 0 1em 0 1em;
	text-align: center;
}

#ho {
	position: relative;
	display: block;
	visibility: hidden;
}

#po, #ab, #co, #to {
	position: relative;
	display: block;
	/*top: -9.7em;*/
	visibility: hidden;
}

.whitebg {
	position: relative;
	background-color: white;
}

.about {
	position: relative;
	max-width: 35em;
	margin: 0 auto;
	padding: 4em 1em 0 1em;
}

.description {
	position: relative;
	max-width: 35em;
	margin: 0 auto;
	padding: 7em 1em 0 1em;
}

.description h1 {
	font-size: 1.75em;
	line-height: 1.25;
}

.about p, .description p, .details2 p, .details2 ul li, .details3 p, .details3 ul li, .details p, .resume p, .resume ul li {
	color: #615e5d;
}

.firstletter {
	color: #e8b666;
	float: left;
	font-size: 3.4em;
	line-height: .075;
	margin: .42em .19em .25em 0;
}

.firstletter + span {
	text-indent: 0;
	margin-left: -.65em;
}

.indent {
	text-indent: 1.6em;
}

.portfolio {
	position: relative;
	max-width: 95em;
	margin: 0 auto;
	padding: 4em .5em 4em .5em;
	overflow: hidden;
}

.portfolio h1, .description h1 {
	text-align: center;
	margin-bottom: 2em;
}

.magazines {
	position: relative;
	margin: 0 auto;
	max-width: 75em; /* 1200px */
	padding: 0 1em 0 1em;
	overflow: hidden;
}

.gallery {
	position: relative;
	width: 100%;
	float: left;
	/*padding: 0 .525em 0 .525em;*/
	margin-bottom: 2em;
}

.gallery a {
	text-decoration: none;
}

img.grayscale {
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    
	/*-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray; /* IE 6-9 */
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

img.grayscale:hover {
	-webkit-filter: none;
	-moz-filter: none;
	-ms-filter: none;
	filter: none; 
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
}

.content {
	position: relative;
	margin: 0 auto;
	padding: 0 1em 1em 1em;
}

.content img {
	margin: 0 auto;
}

.content2 {
	position: relative;
	margin: 0 24% 1em 24%;
}

.content2 img {
	margin: 0 auto;
}

.content3 {
	position: relative;
	margin: 0 auto;
	padding: 0 0em 1em 0em;
}

.content3 img {
	margin: 0 auto;
}

.title {
	color: #6bbdad; /* darker turquoise #615e5d; original gray*/
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	padding-top: 1em;
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	font-size: .8em;
}

.title2 {
	color: #615e5d;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	padding-bottom: 1em;
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	font-size: 1.15em;
}

.details {
	position: relative;
	margin: 0 auto;
	margin-bottom: 7em;
	max-width: 500px;
	padding: 0 1em 0 1em;
}

.details2 {
	position: relative;
	margin: 0 auto;
	margin-bottom: 7em;
	max-width: 1200px; /* 725px; */
	padding: 0 1em 0 1em;
}

.details3 {
	position: relative;
	margin: 0 auto;
	margin-bottom: 4.5em;
	max-width: 1200px; /* 725px; */
	padding: 0 1em 0 1em;
}

.resume {
	position: relative;
	margin: 0 auto;
	margin-bottom: 7em;
	max-width: 42.5em;
	padding: 0 1em;
}

.details2 p, .details3 p {
	max-width: 42em;
	margin: 0 auto;
	padding: 6em 1em 0 1em;
}

.details2 p.wh4, .details3 p.wh4 {
	padding: 2em 1em 0 1em;
}

.details p {
	max-width: 32em;
	margin: 0 auto;
	padding: 6em 1em 0 1em;
}

p.more {
	padding-top: 1em;
}

p.tealres {
	color: #6bbdad; /*darker turquoise*/
	padding-top: .75em;
}

.resume p.indent2 {
	padding-left: 1.6em;
}

p.spaceres {
	padding: .25em 0 0 1.6em;
}

p.spaceres2 {
	padding: .75em 0 0 1.6em;
}

p.spaceres3 {
	padding-top: .75em;
}

.resume ul {
	margin: 0 auto;
	padding: .25em 0 0 3em;
}

.resume ul li {
	list-style-type: disc;
	margin-top: .75em;
}

.resume ul li::marker {
		color: #6bbdad; /*darker turquoise*/
}

.details2 p.indent, .details p.indent, .details3 p.indent {
	padding-top: 0em;
}


.details img, .details2 img, .details2 iframe, .details3 img, .details3 iframe {
	position: relative;
	margin: 0 auto;
	/*max-width: 500px;*/
	padding: 4em 0 0 0;
}

.horizontalscroll {
	width: auto;
	height: auto;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
}

.details2 .horizontalscroll img, .details3 .horizontalscroll img {
	display: inline-block;
	padding: 4em 1em 0 0;
}

.details2 ul {
	max-width: 38em;
	margin: 0 auto;
	padding-top: .25em;
}

.details2 ul li {
	list-style-type: disc;
	margin-top: .75em;
}

.invision {
	position: relative;
	max-width: 27.375em;
	margin: 0 auto;
	padding: 0em 1em 6em 1em;
	display: none;
}

p.onlydt {
	display: none;
}

.appvideo {
	position: relative;
	max-width: 26em;
	margin: 0 auto;
	padding: 0em 1em 6em 1em;
}

.appvideo2 {
	position: relative;
	max-width: 26.5em;
	margin: 0 auto;
	padding: 0 1em 6em 1em;
}

.subnav {
	position: relative;
	padding: 0 1em 7em 1em;
}

.top {
	position: relative;
	margin: 0 auto;
	max-width: 106px;
	text-align: center;
}

/*.prev, .next {
	position: relative;
	float: left;
	width: 50%;
}

.prev img {
	margin-left: 0;
}

.next img {
	margin-right: 0;
}*/

.prev, .next {
	position: relative;
	margin: 0 auto;
	float: left;
	width: 50%;
	margin-top: -1.25em;
	margin-bottom: 7em;
}

/*.prev a, .next a {
	float: left;
}*/

.next a {
	float: right;
}

.top a, .prev a, .next a {
	color: #9edbc8; /*med turquoise*/
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	font-size: 1.25em;
}

.top a:hover, .prev a:hover, .next a:hover {
	color: #6bbdad; /*darker turquoise*/
}

footer {
	position: relative;
	width: 100%;
	background-color: #615e5d;
	padding-top: 4.5em;
	padding-bottom: 4.5em;
}

footer img {
	margin: 0 auto;
	padding-bottom: 1.5em;
}

.contact {
	max-width: 30em;
	margin: 0 auto;
	text-align: center;
	color: #e8b666;
	font-size: .925em;
	padding: 0 1em 0 1em;
}

.contact p a {
	color: white;
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: .975em;
}

.contact p a:hover {
	color: #6bbdad;
}

.copyright p {
	padding-top: 1.5em;
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: #6bbdad;
	font-size: .95em;
}

.copyright p a {
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: #6bbdad;
	font-size: .95em;
}

.copyright p a:hover {
	color: white;
}

/* Query to make hero disappear on mobile - slideshow doesn't work inside query in IE */

	@media screen and (max-width: 600px) {
		.hero {
			display: none;
		}
		
		.hero1 {
			display: none;
		}
	}

/* Start Tablet Query */

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

	
	h1 {
		font-size: 2.25em;
	}
	
	h4 {
		font-size: 2.15em;
	}
	
	.mobilenav {
		display: none;
	}
	
	.mainnav {
		display: block;
		position: fixed;
		/*margin-top: 4.25em;*/
		width: 100%;
		/*max-width: 1000px;*/
		z-index: 20;
	}
	
	.changecolor {
		opacity: 1;
		filter: alpha(opacity=100);
	}
	
	nav ul li {
		background-color: #615e5d;/* needs to be 60% opacity */
		opacity: .6;
		filter: alpha(opacity=60);
		float: left;
		width: 20%;
		text-align: center;
		margin-top: 0;
		padding-top: .35em;
		padding-bottom: .35em;
	}
	
	nav ul li a {
		color: white;
		text-decoration: none;
		text-transform: uppercase;
		font-family: 'Quicksand', Arial, sans-serif;
		font-weight: 400;
		font-size: 1em;
	}
	
	nav ul li a:hover {
		color: #6bbdad; /*darker turquoise*/
	}
	
	.opaque {
		opacity: 1;
		filter: alpha(opacity=100);
	}
	
	
	
	header {
		position: relative;
		width: 100%;
		float: none;
		margin-top: 6em;
	}
	
	.grabber, .grabber2 {
		position: relative;
		width: 22em;
		margin: 0 auto;
		background-color: white;
		opacity: .6;
		padding: 2em;
		text-align: center;
	}
	
	.grabber2 {
		width: 34em;
		opacity: .8;
	}
	
	.grabber img {
		margin: 0 auto;
		width: 130px;
	}
	
	.grabber h1, .grabber2 h1 {
		margin-top: .5em;
		color: black;
		font-size: 2.25em;
	}

	.grabber p {
		margin-top: .75em;
		color: black;
		font-size: 1.1em;
	}
	
	.grabber2 p {
		padding: 0;
	}
	
	#ho {
		position: relative;
		display: block;
		visibility: hidden;
	}
	
	#po, #ab, #co, #to {
		position: relative;
		display: block;
		/*top: -9.7em;*/
		visibility: hidden;
	}
	
	.whitebg {
		position: relative;
		background-color: white;
		margin-top: 5em;
	}
	
	.firstletter {
	color: #e8b666;
	float: left;
	font-size: 5.55em;
	line-height: .075;
	margin: .4em .13em .25em 0;
	}
	
	.firstletter + span {
		text-indent: 0;
		margin-left: -.65em;
	}
	
	.portfolio {
		padding-top: 7em;
	}
	
	.gallery {
		position: relative;
		width: 50%;
		float: left;
		/*padding: 0 .525em 0 .525em;*/
		margin-bottom: 4em;
	}
	
	.description h1 {
		font-size: 2.25em;
		line-height: 1;
	}
	
	.resume {
		padding-top: 2em;
	}
	
	.invision {
		display: none;
	}
	
	p.onlydt {
		display: none;
	}
	
	p.onlymobile {
		display: block;
	}
	
}



/* Start Desktop Query */

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

	header { /*desktop*/
		position: relative;
		width: 100%;
		float: none;
		margin-top: 10em;
	}
	
	.whitebg {
		position: relative;
		background-color: white;
		margin-top: 10em;
	}
	
	.grabber2 {
		width: 42em;
	}
	
	.about {
		position: relative;
		max-width: 38em;
		margin: 0 auto;
		padding: 7em 1em 0 1em;
	}
	
	.description {
		position: relative;
		max-width: 38em;
		margin: 0 auto;
		padding: 7em 1em 0 1em;
	}
	
	.about p, .description p {
		color: #615e5d;
	}
	
	.firstletter {
		color: #e8b666;
		float: left;
		font-size: 5.55em;
		line-height: .075;
		margin: .4em .13em .25em 0;
	}
	
	.firstletter + span {
		text-indent: 0;
		margin-left: -.65em;	
		
	}
	
	.gallery {
	position: relative;
	width: 33.33%;
	float: left;
	/*padding: 0 .525em 0 .525em;*/
	margin-bottom: 4em;
	}

	p.onlydt {
		display: block;
	}
	
	.invision {
		display: block;

	}
	
	p.onlymobile {
		display: none;
	}
}