@charset "UTF-8";

@viewport {
	width: device-width;
	height: device-height;
}
/* CSS Document */

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;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	font-family:"Anonymous Pro", Courier, "Courier New";
	font-size:.75em;
	line-height: 1.2em;
	background: url(img/bg-dots-69.gif) fixed, url(img/bg-color.jpg) fixed;
	background-size: 2.5px 2.5px, 100% 100%;
	background-repeat:repeat, no-repeat;
	background-color: #FFF;
	/* display:none; */
}

a {
	color:#03C;
	text-decoration:none;
}

p {
	margin-top:.75em;
}

.txtcolor {
	background-color:#FF0; 
	opacity:.75;
	filter:alpha(opacity=75);  /* For IE8 and earlier */
	z-index:150;
	pointer-events: none;
}

#contact {
	font-size:.9em; 
	line-height:1.5em;
	text-decoration:none;
	color:#FFF;
	background-color:#F3F;
	pointer-events: auto;
}

#contact a:link, #contact a:visited  {
	color:#FFF;
	text-decoration:none;
}

#contact a:hover, #contact a:active  {
	color:#FFF;
	text-decoration:blink;
}


/* header {
	position:fixed;
	top:0;
	left:0;
	width: 100%;
	padding: 1em 2% 1em 2%;
	font-size:.75em;
	line-height: 1.2em;
	z-index:10;
} */


#logo {
	position:fixed;
	/* width: 30%; */
	height: 4em;
	max-height:140px;
	top:1em;
	left: 5%;
	z-index:200;
}

#about {
	position:fixed;
	margin:7em 3% auto 3%;
	z-index:250;
	pointer-events: none;
}

#projects {
	position: static;
	width:100%;
	padding:1em 5% 10em 5%;
	padding-top:18em;
	overflow:hidden;
	z-index:100;
	/* display: none; */
}


.projectthumbXL, .projectthumbL, .projectthumbM, .projectthumbS {
	position:relative;
	width:100%;
	margin:0 0 4em 0;
}

.projectthumbXL img, .projectthumbL img, .projectthumbM img, .projectthumbS img {
	width:100%;
}

#tt {
	position:absolute;
	display:block;
	color: #FFF;
	background: #03C;
}


/* PROJECT PAGES */

.projectwrap {
	margin:7em 12% 7em 12%;
	overflow:hidden;
	text-align:center;
	/* display: none; */
}

.projectwrap .intro {
	text-align:left;
	background:#FFF;
	opacity:.8;
	filter:alpha(opacity=80);  /* For IE8 and earlier */
}

.projectwrap h1 {
	/*font-size:1.2em; */
	padding: 1em 1em 0 1em;
	background:#FFF;
	opacity:.8;
	filter:alpha(opacity=80);  /* For IE8 and earlier */
}

.catagory {
	font-size:.7em;
	padding-left:1.25em;
}

.select {
	background: #FF0;
} 

.projectwrap article {
	text-align:left;
	padding: 1em;
	background:#FFF;
	opacity:.8;
	filter:alpha(opacity=80);  /* For IE8 and earlier */
}

.projectwrap .intro article {
	text-align:left;
	background:none;
}


.projectwrap img, .projectwrap .imgGroup, .projectwrap .imgGroupGap {
	width:100%;
	margin-top:2em;
}

.projectwrap .imgGroup, .projectwrap .imgGroupGap {
	overflow:hidden;
}

.projectwrap .imgGroup img {
	float:left;
	display:inline;
	width:50%;
	margin:0;
}

.projectwrap .imgGroupGap img {
	float:left;
	display:inline;
	width:46%;
	margin:2%;
	text-align:center;
}

.projectwrap .imgGroupGap .desktop {
	float:left;
	display:inline;
	width:75%;
	margin:0;
	margin-right:5%;
	margin-bottom:60px;
}

.projectwrap .imgGroupGap .mobile {
	float:left;
	display:inline;
	width:20%;
	margin:0;
}


#goprev {
	position:fixed;
	top: 20em;
	left: .25em;
	width:3em;
	z-index:100;
}

#gonext {
	position:fixed;
	top: 20em;
	right: .25em;
	width: 3em;
	z-index:100;
}

.scrollup {
    width: 3em;
    height: 3em;
    position: fixed;
    bottom: 1em;
    left: .25em;
    display: none;
    text-indent: -9999px;
	background: url('img/arrow-top.svg') no-repeat;
	background-position:center;
	background-size:contain;
	z-index:100;
}


@media all and (max-height: 350px) {
/* For Mobile landscape */

#projects {
	padding-top:.5em;
	padding-left:30%;
}

#goprev, #gonext {
	top: 11em;
}

	
}




@media all and (min-width: 650px) {
/* Tablet vertical */

body {
	background-size: 5px 5px, 100% 100%;
	font-size:1em;
	line-height: 1.4em;
}

/* header {
	padding: 1em 2% 1em 2%;
	font-size:1em;
	line-height: 1.25em;
} */

#logo {
	margin-top:2em;
	height: 6em;
	max-height:150px;
} 

#about {
	margin-right:40%;
	margin-top: 10em;
}
	
#projects {
	width:100%;
	padding-top:17em;
	padding-left:30%;
}

.projectwrap {
	margin:10em 10% 1em 20%;
}

.projectwrap h1 {
	/*font-size:1.2em; */
	padding: 2em 2em 0 2em;
}

.catagory {
	font-size:.75em;
	padding-left: 2.5em;
}

.projectwrap article {
	padding: 2em;
	clear:both;
}


.projectwrap img, .projectwrap .imgGroup {
	margin-top:4em;
}


#goprev {
	position:fixed;
	top: 20em;
	left: 1em;
	width:4.5em;
}

#gonext {
	position:fixed;
	top: 20em;
	right: 1em;
	width:4.5em;
}

.scrollup {
	left:1.5em;
	width:4.5em;
	height:4.5em;
}

}




@media all and (min-width: 800px) {

#logo {
	height: 7em;
	max-height:150px;
} 

#about {
	margin-top:12em;
	max-width:560px;
}
	
#projects {
	width:100%;
	padding-top:1em;
	padding-left:10%;
	padding-right:0;
}

.projectthumbXL {
	width:65%;
	max-width:700px;
}

.projectthumbL {
	width:50%;
	max-width:500px;
}

.projectthumbM {
	width:35%;
	max-width:400px;
}

.projectthumbS {
	width:18%;
	max-width:300px;
}

.projectthumbXL, .projectthumbL, .projectthumbM, .projectthumbS {
	float:right;
	padding:1em 2%;
	margin:2em 3em;
}

.projectwrap {
	margin:10em 10% 2em 23%;
	max-width: 1000px;
}

.projectwrap h1 {
	/*font-size:1.2em; */
	padding: 2em 2em 0 2em;
	float:left;
}

.catagory {
	float:right;
	display:inline;
	font-size:.75em;
	padding: 2.25em 2em 0 2em;
}


}



@media all and (min-width: 1500px) {
	
.projectwrap article {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 1.5em;
	-webkit-column-gap: 1.5em;
	column-gap: 1.5em;
}

}