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;
}

a {color:#719637;}
a:hover {color:#53bbba;}

html {
	font-family: 'Lato', sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

body.home {
	background-image:url('dsnimgs/homeBack.jpg');
	background-size:cover;
	background-position: center bottom;
}

header {
	background-color: #fff;
	background-image: url("dsnimgs/logo-bw.gif");
	background-position: 0 25px;
	background-repeat: no-repeat;
	background-size: auto 80px;
	height: 158px;
	margin-left: 5%;
	padding-right: 10%;
	width: 85%;
	z-index: 5;
}

.main {
	z-index:2;
}

h4.tagline {
	position: absolute;
	right: 3.5%;
	font-size: 0.8em;
	color:#aaa;
	font-size:.7em;
	color:#777;
}

h4.tagline span {
	font-size: 0.7em;
	color:#aaa;
	padding:0 5px;
}

header h4.tagline {
	top: 10px;
}

nav {
    height: 50px;
    right: -12%;
    position: absolute;
    top: 62px;
    width: 525px;
}

nav ul {
	list-style-type:none;
}

nav a {
	display:block;
	float:left;
	text-decoration:none;
	padding:5px 10px;
	margin:5px 20px;
	text-transform:uppercase;
	color:#aaa;
	transition: background-color .5s ease;
}

nav a.last {margin-right:0;}

nav a.menuButton {
	display:none;
}

nav a:hover, .portfolio nav a.navportfolio, .about nav a.navabout, .expertise nav a.navexpertise, .contact nav a.navcontact {
	background-color:#719637;
	color:#fff;
}

#logo a {
	display: block;
	height: 80px;
	position: relative;
	text-indent: -9999px;
	top: 25px;
	width: 155px;
	transition: background-image 1s ease;
}

#logo a:hover {
	background-image: url("dsnimgs/logo-color.gif");
	background-size: auto 80px;
}

.mainImage, .moreimgs {
    background: #ddd;
    background-size: cover;
    text-indent: -9999px;
	margin-bottom:2%;
}


h3.projectTitle {
    padding: 30px;
	font-size:2em;
}

p.projectDescription {
    padding: 5px 30px 20px;
}

p.projectDescription span {
	display:block;
	margin:20px 0;
}

p.projectDescription span strong {
	font-weight:bold;
}
 
.projectNav {
	min-height: 70px;
}

.next {
	background-image: url('dsnimgs/button-next.png');
	float: right !important;
	padding-right: 10% !important;
}

.prev {
	background-image: url('dsnimgs/button-prev.png');
    padding-left: 10% !important;
}


.entry h2 {
    background-color: black;
}

.projectNav a {
    color:#fff;
    display:block;
    float: left;
    position: relative;
	width:10%;
	height:70px;
	text-indent:-9999px;
	background-color: black;
	background-position: center 3px;
	background-repeat:no-repeat;
}

a#workType {
	float:left;
	width:58%;
	margin-left:1%;
	height:40px;
	padding-top:30px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .6em;
    letter-spacing: .5em;
    display: block;
	text-align:center;
	text-indent:0px;
}

.workTypeTop a {
	left: 20%;
	position: absolute;
	top: -70px;
}

.workTypeBottom a {
	display:block;
}

.workTypeMiddle a#workType {
	display:none;
}

.line {
	border-bottom: 4px solid #636363;
}

.clear, .bottomSection, .footer {
	clear:both;
}

footer {
  clear:both;
  position:relative;
  text-align:right;
  color:#999;
  width:90%;
  padding-top:20px;
  padding-bottom:20px;
  margin:0 auto;
}

footer nav {
	background-color: #e9e9e9;
	border-radius: 20px;
	float: right;
	height: 38px;
	padding: 0 20px;
	position: relative;
	right: 0;
	margin-bottom:20px;
}

footer nav a {
	margin:0 18px;
	padding:9px 15px;
}

footer h4.tagline {
	position:static;
	clear:both;
	margin-bottom:10px;
}

footer p {
	font-size:.7em;
	margin-bottom:10px;
	color:#555;
	clear:both;
}

.projectNav a, .entryInfo h2 a {
	transition: background-color 1s ease;
}

.projectNav a:hover, a#workType:hover {
	background-color:#636363 !important;
}

footer nav {
	margin-top: 20px;
	top: 0;
}

.extra-folio-content {
	font-family: 'Nothing You Could Do', cursive;
	padding:5% 10%;
	font-size:125%;
	background-color: #eee;
	margin:20px 0;
}

.extra-folio-content ul {margin-left: 20px;}

/* responsive nav */

@media all and (max-width: 650px) { /* (under 550) */
	
	#workType span {
		display:none;
	}
	
	header h4 {
		display:none;
	}
	
	footer nav {display:none;}
	
	footer {
		text-align:left;
	}
	
	header nav {
		position:absolute;
		top:0;
		right:0;
	}
	
	header nav a.menuButton {
		background-color: #777;
		color:#fff;
		display: block;
		padding: 15px 30px;
		position:absolute;
		right:0;
		margin:0;
		border-radius: 0px 0px 0px 50px;
	}
	header nav a.menuButton:hover {
		background-color: #444;
	}

	header nav ul {
		display:none;
	}

	header nav.down ul {
		display:block;
		position:relative;
		top:15px;
	}

	header nav.down {
		background-color: rgba(255, 255, 255, 0.95);
		width: 75%;
		z-index: 5;
		height:100%;
		position: fixed;
		right: 0px;
		top: 0px;
	}

	header nav a.close {
		background-color: #a40808;
		background-image:url(dsnimgs/x.png);
		background-position:center center;
		border: 10px solid #ffffff;
		border-radius: 100px;
		display: block;
		height: 30px;
		margin: 10px;
		position: absolute;
		text-indent: -9999px;
		width: 0;
		z-index: 6;
	}
	header nav a.close:hover {
		background-color:#7a0606;
	}
	
	header nav ul a {
		font-size:1.25em;
		margin-top:25px;
		margin-bottom:25px;
	}

	header nav.down a {
	float:none;
	}
	
	header nav {
		width:340px;
	}

}

/* responsive nav */


@media all and (min-width: 550px) { /************ (over 550) ******************/
	header nav a {
		margin:5px;
	}
	
	header nav {
		width:420px;
	}
	
	header nav a {
		margin:5px 2px;
	}
	
	footer nav {
		width:565px;
	}
}

@media all and (min-width: 800px) { /************ start middle (over 750) ******************/
	
	#logo a {
		height: 130px;
		width: 284px;
	}
	
	#logo a:hover {
		background-size: auto 130px;
	}

	nav {
		top: 100px;
	}

	.mainImage {
  	  width:65%;
  	  float:right;
	  background-position: center center;
    }
	
    .entryInfo {
  	  width:35%;
  	  float:right;
    }
	
	header {
		 position: fixed;
		 background-size: auto 130px;
		 transition: height 1s ease;
		 transition: background-size 1s ease;
	}
	
	header.sticky {
		height:120px;
		background-size: auto 80px;
		background-position:15px 25px;
		border-radius: 0px 0px 0px 40px;
		opacity:.8;
	}
	
	header.sticky nav {
		top:58px;
	}
	
	header.sticky h4 {
		color:#aaa;
	}
	
	header.sticky #logo a {
		background-position: 15px 0;
		background-repeat: no-repeat;
		background-size: auto 80px;
		height: 80px;
		width: 180px;
	}
	
	.navTop, .navBottom, .main {
	  position:relative;
	  top:200px;
	}
	
	a#workType {
	    letter-spacing: 1em;
	}
	
	header nav a {
	    margin: 5px;
	}
	
	footer {
	  top:200px;
	}
	
} /************** end middle  ****************/


@media all and (min-width: 980px) {
	nav a, header nav a {
		margin:5px 22px;
	}

	nav, header nav {
		width:618px;
	}
	
	nav {
	    height: 50px;
	    right: -12%;
	    position: absolute;
	}

	nav a {
		padding:5px 20px;
	}

	nav a.last {margin-right:0;}
	
	nav {
		display:block;
	}

}

@media all and (min-width: 1200px) {
  
	.workTypeTop {
		display:none;
	}
	
	.workTypeBottom {
		display:block;
		width:100%;
		float:left;
	}
	
	.workTypeBottom a {
	    color: #fff;
	    text-decoration: none;
	    text-transform: uppercase;
	    font-size: .6em;
	    letter-spacing: 1em;
	    display: block;
		height:20px;
	    padding: 30px 5px 20px 5px;
		text-align:center;
		text-indent:0px;
	}
  
  .bottomSection {
	  clear:both;
	  margin: 0 0 0 -5.5%;
	  width: 111%;
  }
  
  .animsition {
	  width:90%;
	  float:left;
  }
  
  .navMiddle {display:block;}
  
  .navTop, .navBottom {
	  width:5%;
  }
  
  .navBottom {
  	  float:right;
    }
	
	.navTop {
		  float:left;

	}
	
	.projectNav a {
		background-position: center center;
		height: 114px;
		position: relative;
		top: 72px;
		border-top:4px solid #636363;
	}
  
  .navTop .prev {
  	width:100%;
	padding:0 !important;
  }
  
  .navBottom .next {
  	width:100%;
	padding:0 !important;
  }
  
  .navTop .next {display:none;}
  .navBottom .prev {display:none;}
  
  .line {
  	border-bottom: 4px solid #636363;
	width:100%;
	position:relative;
	top:72px;
	z-index:1;
  }
  
  h2.workTypeMiddle {
	  height:70px;
  }
  
  h3.projectTitle {
	  padding:0;
	  margin:30px;
  }
  
  .mainImage {
	  position:relative;
	  z-index:2;
  }
  
	.workTypeBottom a#workType {display:none;}

	.workTypeMiddle a#workType {
		margin-left: 0 !important;
		width: 100%;
		display:block;
	}
  
} /**************  end wide   ****************/