/*MEDIA QUERIES */
@media only screen and (max-width: 1250px) { .wrap { max-width: 90%; } }

@media screen and (max-width: 1215px) { header div.header-intro .altn { font-size: 2em; } }

@media screen and (max-width: 1192px) { section.atmos2 article { float: left; padding: 0 0 0 26px; width: 56%; } }

@media screen and (max-width: 1103px) { section.atmos2 article { float: left; padding: 0 0 0 26px; width: 54%; } }

@media screen and (max-width: 1016px) {  header div.header-intro .altn { font-size: 1.8em; } }

@media screen and (max-width: 1000px) {
	h1 { font-size: 2.2em; }
	
	/* HEADER H1 INTRODUCTION*/
	header div.header-intro { position: absolute; width: 60%; top: 13em; left: 20%; text-align: center;}
	header div.header-intro h1 { margin-bottom: 20px; }
	header div.header-intro .altn { font-size: 1.8em; width: 100%; }
	
	/* ARTICLE STYLES */
	
	section.atmos2 article { float: none; padding: 0px; width: 100%; }
	section.atmos2 aside { float: none; margin-bottom: 26px; width: 100%; }
	section.atmos2 aside img { width: 475px; height: 220px; display: block; margin: auto; }
	
	/* PORTFOLIO GALLERY */
	.responsive { padding: 12px 14px; float: left; width: 33.3%; }
	
	.wrap { max-width: 90%; }
}

@media screen and (max-width: 825px) { 
	h1 { font-size: 2.2em; }

	header { height: 300px; background-image: url(../images/banner_825-4.png); }
	header div.header-intro { top: 9.5em; left: 20%; }
	header div.header-intro h1 { margin-bottom: 20px; }
	header div.header-intro .altn { font-size: 1.8em; width: 100%; }

	/* TITLE FOR ALL PORTFOLIO PAGES */
	header.portfolio div.title { position: absolute; width: 100%; top: 8em; left: 0%; text-align: center; }


	section.atmos2 article { float: none; padding: 0px; width: 100%; }
	section.atmos2 aside { float: none; margin-bottom: 26px; width: 100%; }
	section.atmos2 aside img { width: 475px; height: 220px; display: block; margin: auto; }

	section.atmosphere article { padding-left: 325px; background-size: 300px auto; }

	section.how-to blockquote p.quote { font-size: 1.1em; line-height: 1.2em; }
	section.how-to blockquote p.credit { font-size: .85em; }
	
	/* PORTFOLIO GALLERY */
	.responsive { padding: 12px 12px; float: left; width: 49.99999%; }	
	
	.wrap { max-width: 90%; }
	
	.row-column { margin: 0 0 40px; width: 100%; } .row-column-alt { width: 100%; } .row-column-alt img { display: block; margin: auto; } .row-column img { display: block; margin: auto; }
}


@media screen and (max-width: 760px) { 
	h1 { font-size: 1.8em; }
	h2 { font-size: 1.4em; }
	h3 { font-size: 1.1em; }
	a.button { font-size: 1em; }
	
	header a.logo { width: 196px; height: 40px; }
	header div.header-intro { top: 11em; left: 20%; }
	header div.header-intro .altn { font-size: 1.4em; width: 100%; margin-bottom: 20px; }
	header div.header-intro .button { font-size: 0.85em; padding: 2px 10px; }

	/* TITLE FOR ALL PORTFOLIO PAGES */
	header.portfolio div.title { position: absolute; width: 100%; top: 8.8em; left: 0%; text-align: center; }

	/* MAIN BUTTONS */
	section.main { margin-top: 10px; margin-bottom: 10px; }
	section.main aside  div.content { background-size: 55px 55px; padding-top: 60px; }

	section.how-to aside div.content img { width: 85%; }

	section.atmos2 aside img { width: 375px; height: 174px; display: block; margin: auto; }

	nav { padding-top: 80px; }
	nav > ul { padding-left: 10px; }
}

@media screen and (max-width: 625px) { 
	h1 { font-size: 1em; }
	h3 { margin-bottom: 0px; }
	a.button { font-size: .9em; }
	
	header { height: 160px; background-image: url(../images/banner_625-4.png); overflow: hidden;}
	header a.logo { width: 100%; height: 66px; left: 0px; top: 0px; background: url(../images/d281logo-164-34.png) no-repeat center center; background-color: rgba(36,36,36,.99); background-size: 164px 34px; background-position: center center; }
	
	header div.header-intro { width: 300px; top: 6em; left: 25%; }
	header div.header-intro h1 { margin-bottom: 10px; }
	header div.header-intro .altn { font-size: 1em; width: 100%; margin-bottom: 0px; }
	header div.header-intro .button { font-size: 0.1em; padding: 0px; margin: 0; display: none; } 

	/* TITLE FOR ALL PORTFOLIO PAGES */
	header.portfolio { height: 160px; background: #eaf3e9 url(../images/banner-bkg.png) repeat; margin-bottom: 2em;}
	header.portfolio div.title { position: absolute; width: 100%; top: 4.8em; left: 0%; text-align: center; }
	header.portfolio div.title h1 { font-size: 1.6em; }

	header.portfolio.web { height: 130px; }
	header.portfolio.design { height: 130px; }
	header.portfolio.uh { height: 130px; }	
	
	/* PORTFOLIO GALLERY */
	.responsive { padding: 24px 36px; float: left; width: 100%; }

	/* MAIN BUTTONS */
	section.main aside { width: 100%; float: none; text-align: left; }
	section.main aside div.content { margin: 20px 0px 20px 0; padding: 15px 20px 10px 20px; }
	section.main aside div.content.webdev { text-align: center; }
	section.main aside div.content.graphics { text-align: center; }
	section.main aside div.content.academic { text-align: center; }

	/* HOW TO */
	section.how-to aside { width: 100%; float: none; margin: 0; position: relative; }
	section.how-to aside div.content { padding: 20px 20px 20px 150px; }
	section.how-to aside div.content p { font-size: .9em; }
	section.how-to aside div.content img { display: inline-block; width: 125px; position: absolute; top: 30px; left: 0; }	
		
	section.how-to blockquote { margin: 0 20px 0 40px; width: 90%; padding: 1px 0px 20px 0px; position: relative; }
	section.how-to blockquote p.credit { margin-bottom: 0; }
	
	/* NAV */
	nav { position: static; width: auto; padding: 20px 15px; background-color: rgba(36,36,36,.99); }

	nav ul,
	nav ul ul,
	nav ul ul ul { display: block; position: static; }

	nav > ul { padding: 0; }
	nav > ul > li { float: none; margin-top: 25px; }

	nav ul li:hover { background: none; }

	nav ul li a { width: auto; display: block; margin:8px 10px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.25); }
	nav ul li a:hover { background-color: #7d7f33; }

	nav ul ul { background: none; }
	
	nav ul ul li a { margin-left: 30px; }
	nav ul ul ul li a { margin-left: 60px; }

	nav a[aria-haspopup="true"]::after { display: none; }

	footer div.content { display: block; margin-top: 15px; }
	footer div.content a { margin: 0 20px 0 0; } 
}

@media screen and (max-width: 531px) { 	header div.header-intro { width: 300px; top: 6em; left: 22%; }  } 


@media screen and (min-device-width : 320px) and (max-width: 425px) {  
	
	header { height: 110px; background-image: url(../images/banner_425-4.png); }
	header a.logo { height: 38px; background: rgba(36,36,36,.99) url(../images/d281logo-118-30.png) no-repeat center center;
			background-size: 118px 30px; }
	
	header div.header-intro { width: 100%; left: 0px; top: 4em; text-align: center; }
	header div.header-intro h1 { font-size: 1em; margin-bottom: 10px; }
	header div.header-intro .altn { font-size: 0.85em; font-weight: normal; width: 100%; margin-bottom: 0px; }
	header div.header-intro a.button { padding: 2px 30px; font-size: .8em; }
	header div.header-intro a.button span { display: none; }

	section.about article h2 { font-size: 1.5em;  margin: 0.5em 0 1em 0; }
	section.about article p { font-size: 14px; }

	/* TITLE FOR ALL PORTFOLIO PAGES */
	header.portfolio { height: 130px; background: #eaf3e9 url(../images/banner-bkg.png) repeat; margin-bottom: 2em;}
	header.portfolio div.title { position: absolute; width: 100%; top: 3em; left: 0%; text-align: center; }
	header.portfolio div.title h1 { font-size: 1.4em; }
	header.portfolio div.title p { font-size: 0.865em; }

	header.portfolio.web { height: 90px; }
	header.portfolio.design { height: 90px; }
	header.portfolio.uh { height: 90px; }	

	/* PORTFOLIO GALLERY */
	.responsive { padding: 12px 24px; float: left; width: 100%; }

	section.atmos2 article h2 { font-size: 1.25em; }
	section.atmos2 aside img { width: 100%; height: auto; display: block; margin: auto; }
	
	
	section.how-to aside div.content { padding: 140px 20px 20px 0; }
	section.how-to aside div.content img { width: auto; height: 100px; top: 30px; }

	section.how-to blockquote { margin: 10px 40px 0 20px; }

	footer::after { content:''; display: block; clear: both; }

	footer div.content a { display: inline-block; margin: 0 0 10px 0; float: left; clear: both; }
}