@charset="utf-8";

/*
----------------------------------------------------------------	

	Site Developed and Designed by yours truly:
	Emily Paige Stewart, http://emilypstewart.com

-------------------------------------------------------------------*/

/*
----------------------------------------------------------------
	9 6 0  M A X
---------------------------------------------------------------- */


@media screen and (max-width: 960px) {
	
	body {
		padding:0rem;
		border:none;
	}
	
	hr {
		display:block;
		width:96% !important;
		border-top: 1px solid #D8D8D8;
		border-bottom: 1px solid #f8f8f8;
		margin-top:0;
		margin-bottom:0;
	}


/*
----------------------------------------------------------------
	T Y P O G R A P H Y
---------------------------------------------------------------- */
    h1 { 
        font-size:2.222rem; /* 72px / 18px base */
        line-height:2.555rem;
        font-weight:300;	
        padding:1rem 0 2.222rem 0;
        width:92%;
        text-align:center;
    }

    h2 {
    	font-size:1.777rem; /* 38px / 18px base */
    	line-height:2.000rem;
    }

    h3 {
        font-size:1.444rem; /* 30px / 18px base */
    	line-height:1.662rem; 
    }

    h4 {
    	font-size:1.110rem; /* 27px / 18px base */
    	line-height:1.222rem;
    }

    h5 {
    	font-size:1.111rem; /* 19px / 18px base */
    	line-height:1.444rem;   
    }

    h6, dt, dd {
     	font-size:1.000rem; /* 18px / 18px base */
    	line-height:1.300rem;
    }
	
	p { line-height:1.6rem; }



.accessibility-intro h1 {
		font-size:3.5rem;
		line-height:4rem !important;
		font-weight:300;
        margin:0px auto;
        
}
	

.intro-section-work h1 {
    margin:0px auto;
}

	
/*
----------------------------------------------------------------
	G R I D  A D A P T
---------------------------------------------------------------- */

	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5,
	.grid-6,
	.grid-7,
	.grid-9 {
	 	width:96%;
		margin:0.313em;	
	}


	.grid-7.center,
	.grid-9.center {
	 	width:96%;
		margin:0.313em;	
	}
			
	.project-overview-container {
		width:100%;
		margin:0px auto;
	}
	
	.project-overview-container .grid-4 {
		width:31%;
		display:inline-block;	
		margin:0px auto;
		margin-left:1%;
		margin-right:1%;
	}

	.project-container.grid-8,
	.project-specs.grid-4 {
	 	width:96%;
		margin:0.313rem;
	}


section.project {
	height:auto;
	margin-bottom:0;
}

section.project h1 {
    margin-bottom:.2rem;
    bottom:auto;
}

section.project ul {
    float:none;
    margin-bottom:0;
    position:relative;
    bottom:0;
    width:100%;
}

section.project ul li {
	display:block !important;
    bottom:0;
    float:none;
    margin-top:0;
    margin-bottom:0;
    margin-right:.222rem;
    margin-left:-1.222rem;
}

section.project ul li a {
	background:rgba(255,255,255,1);
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;

    width:100%;
	z-index:9995;	
    font-size:1.000rem !important;
	line-height:4rem;
    letter-spacing:2px;    
    text-transform:uppercase;    
}

	
ul.social-media-icons {
    margin-left:-40px;
}

		
}


/*
----------------------------------------------------------------
	T O U C H  C O M P R O M I S E (L E  S I G H)
---------------------------------------------------------------- */
@media screen and (max-width: 768px) {


.project-overview a img {
	filter:none;
	-webkit-filter: invert(0%); /* Google Chrome & Safari 6+ */	    
}

.project-overview.compeer a { background:#c390d1;}
.project-overview.giving a { background:#4B1912;}
.project-overview.engineering-responsive a { background:#555555;} /* Mean it.*/
.project-overview.climate a { background:#74C77A;}
.project-overview.geo a { background:#C5B624;}
.project-overview.space a { background:#4165C7;}
.project-overview.magplus a { background:#102A53;}
.project-overview.video a { background:#C13943;}
.project-overview.training a { background:#F35BAA;}

	
.project-container h1 {
	padding-top:0;
}

figcaption {
	max-width:90%;
	margin:0px auto; 
	margin-top:2rem;   
}

}

/*
----------------------------------------------------------------
	T E E N Y,  T I N Y  S T Y L E S
---------------------------------------------------------------- */

@media screen and (max-width: 600px) {
	
	
.accessibility-intro h1 {
		font-size:1.8rem;
		line-height:2.2rem !important;
		font-weight:300;		
		width:96%;
		padding:10% 2%;		
	}


	.project-overview-container .grid-4 {
		width:86%;
		margin:2% 7%;
		display:block;
	}
		

	section.project h1 {
        font-size:2.222rem; /* 72px / 18px base */
        line-height:2.555rem;
        font-weight:300;	
        width:92%;
        text-align:center;
	}

    .about h1, .about h2 {
        text-align:left;
        padding-left:0;
        padding-right:0;
        margin-left:1%;
        margin-right:1%; 
    }
    
    .about h2 {
    	font-size:1.333rem;
    	line-height:1.777rem;
    }
    
    .quote p {
        font-size:1.333rem;
        line-height:2.000rem;
        text-align:left;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }
    
		
	.contact-infomation h1 {
		padding-top:10px;
		padding-bottom:10px;
		font-size:2em;
		text-align:left;
	}
	
	.contact-infomation p {
		font-size:1em; /* 18px /16px browser default */	
		line-height:1.025em;
		padding-bottom:10px;
	}

}

/*
----------------------------------------------------------------
	C E N T E R  F O R  A N T S 
---------------------------------------------------------------- */

@media screen and (max-width: 340px) {

    	nav { width:70%; margin-right:1rem;}

}