@charset="utf-8";

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

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

	C S S  C O L O R S

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


@import 'css/nav.css';
@import 'css/grid.css';
@import 'css/reset.css';


/*
----------------------------------------------------------------
	A C C E S S I B I L I T Y   I S   L O V E L Y
---------------------------------------------------------------- */

a:focus {
	-moz-outline:4px solid #333;
    outline: 4px solid #333;
}


.skip {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 0 0 1% !important;
	border:0 !important;
	height: 40px !important; 
	line-height: 40px;
	overflow: hidden;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;		
}


a.skip:focus {
	background: #222;
	display: block;
	position: relative !important;
	color:#fff;
	padding:20px;
	font-family: "europa", sans-serif;
}


/*
----------------------------------------------------------------
	G E N E R A L  S T Y L E S
---------------------------------------------------------------- */

html {
	font-family: "ff-tisa-sans-web-pro",sans-serif;
	font-style:normal;
	font-size:1.125em; /* 18px /16px browser default */
	height:101%;
}

body {
	margin:0;
	vertical-align:baseline;
	font-size:100%;
	font-size:1.125em;
	line-height:1.5em;
	background-color:#f5f5f5;
	color:#333;
}

a { text-decoration: underline; color:#424452; }

a:visited, a:hover, a:focus { color: #424452; }

a:focus { outline: thin dotted; text-decoration: none; }

a:hover { text-decoration: none;}	

ul, ol {margin-bottom:27px; /* 18px * 1.5em (or 150%)*/ }

ul { list-style: disc outside; }

ul li {
    font-family: "ff-tisa-sans-web-pro",sans-serif;
	font-weight:400;
}

iframe { border:none;}

/*
----------------------------------------------------------------
	T Y P O G R A P H Y
---------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, dt {
	font-family:"europa", sans-serif;
    font-weight:400;
    color:#6a98ab;

    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga", "dlig";
    -webkit-font-feature-settings: "liga", "dlig";
    -o-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
    text-rendering: optimizeLegibility;	
}

h1 { 
	font-size:4.000rem; /* 72px / 18px base */
	line-height:4.777rem;
    font-weight:300;	
	padding:1rem 0 2.222rem 0;
	text-align:center;
	color:#222;

}

h2 {
	font-size:2.111rem; /* 38px / 18px base */
	line-height:2.806rem;
	color:#6a98ab;

}

h3 {
    font-size:1.778rem; /* 30px / 18px base */
	line-height:2.223rem;
	color:#6D6570;

}

h4 {
	font-size:1.500rem; /* 27px / 18px base */
	line-height:1.875rem;
	color:#222;
}

h5, h6 { text-transform:uppercase; letter-spacing:0.0777rem; }

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

dt {
    padding-top:1.300rem !important;
    letter-spacing:2px;    
    text-transform:uppercase;    
}

dt:first-of-type {
    padding-top:0 !important;
}

dd {
	font-family:"europa", sans-serif;
	-webkit-margin-start:0px !important;
}

.project-specs dt {
    font-weight:700;
    font-size:.8rem;
 }


p {

    text-rendering: optimizeLegibility;

	font-weight:400;
	font-style: normal;
	text-align:left;
  	margin-bottom: 27px;
}

body > p:first-of-type {
  font-size: 1.000em; /* 18px / 18px base */
  line-height: 1.5em; /* 27px / 18px font-size */
}

* { word-wrap: break-word; }

figcaption {
    font-weight:400;
    font-family: "ff-tisa-sans-web-pro",sans-serif;
	font-style:italic;
	margin:1rem auto 4rem auto;
	text-align: center;
	max-width:80%;
}

strong {
    font-weight:700;
    font-family: "ff-tisa-sans-web-pro",sans-serif;   
}

span.ampersand {
    font-family: "baskerville",sans-serif;   	
	font-style: italic;
}

::selection {
	background:#0A8E90;
	color:#F8F8F8;
	text-shadow: none;
}

::-moz-selection {
	background:#0A8E90;
	color:#F8F8F8;
	text-shadow: none;
}

/*
----------------------------------------------------------------
	T E X T U R E S  &  B A C K G R O U N D S
---------------------------------------------------------------- */
hr {
	display:block;
	border-top: 1px dotted #ddd;
	border-bottom: 1px dotted #FFF;
	margin-top:40px;
	margin-bottom:40px;
}


/*
----------------------------------------------------------------
	H O M E
---------------------------------------------------------------- */

.accessibility-intro {
    width:100%;
    height:auto;
	background:#67a3a5;
	padding:10% 0%;
	
	margin:0px auto;
    top:0 !important;	
	-webkit-animation: accessible-bg 8s ease-out alternate infinite;
	-moz-animation: accessible-bg 8s ease-out alternate infinite;
	-o-animation: accessible-bg 8s ease-out alternate infinite;
	animation: accessible-bg 8s ease-out alternate infinite;	
}


@-webkit-keyframes accessible-bg {
  0%    {background-color:#67a3a5;  }
  100%  {background-color:#67a68c;  }
}

@-moz-keyframes accessible-bg {
  0%    {background-color:#67a3a5;  }
  100%  {background-color:#67a68c;  }
}

@-o-keyframes accessible-bg {
  0%    {background-color:#67a3a5;  }
  100%  {background-color:#67a68c;  }
}

@keyframes accessible-bg {
  0%    {background-color:#67a3a5;  }
  100%  {background-color:#67a68c;  }
}


.accessibility-intro h1 {
	font-size:4rem;
	font-weight:400;
	color:#FFF;
	text-align:center;
	max-width:940px;
	margin:0px auto;
}

div[class*="intro-section"] {
	margin:0px auto;
	margin-top:0;
	margin-bottom:0;
	padding:12% 0;
	text-align:center;	
}

div[class*="intro-section"] h1 {
	padding:14% 0;
}

div[class*="intro-section"] h2 {
	font-size:3.5rem;
	line-height:5rem;
	font-weight:300;
}

div[class*="intro-section"] h3 {
    text-transform: uppercase;
    letter-spacing: 4px;
}



/*
----------------------------------------------------------------
   G L O B A L  S T Y L E S
---------------------------------------------------------------- */


figure {
    margin:4.500rem auto;
}


/*
----------------------------------------------------------------
	W O R K
---------------------------------------------------------------- */

.intro-section-work h1 {
    color:#f2f2f2 !important;
    padding:0 !important;
}

.intro-section-work {
    padding:4rem 0 !important;
    width:100%;
	background:#AC6362;
	margin:0px auto;
	-webkit-animation: work-bg 8s ease-out alternate infinite;
	-moz-animation: work-bg 8s ease-out alternate infinite;
	-o-animation: work-bg 8s ease-out alternate infinite;
	animation: work-bg 8s ease-out alternate infinite;	
}

@-webkit-keyframes work-bg {
  0%    {background-color:#AC6362;  }
  100%  {background-color:#6a98ab;  }
}

@-moz-keyframes work-bg {
  0%    {background-color:#AC6362;  }
  100%  {background-color:#6a98ab;  }
}

@-o-keyframes work-bg {
  0%    {background-color:#AC6362;  }
  100%  {background-color:#6a98ab;  }
}


@keyframes work-bg {
  0%    {background-color:#AC6362;  }
  100%  {background-color:#6a98ab;  }
}

.project-overview-container {
    margin-top:2.5rem;
}

.project-overview a {
    display:block;
    background:#EFEFEF;
	-webkit-border-radius:0.325em;
	-moz-border-radius:0.325em;
	border-radius:0.325em;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	margin-top:3%;
	margin-bottom:3%;
}

.project-overview a img {
    margin:0px auto !important;
	max-width:100%;
    float:none;
    width:80%;
    display:block;
}

.project-overview a img {
	filter: url(filters.svg#invert); /* Firefox 3.5+ */
	filter: invert; /* IE6-9 */
	-webkit-filter: invert(40%); /* Google Chrome & Safari 6+ */	    
}

.project-overview:hover a img,
.project-overview a:focus img {
	filter:none;
	-webkit-filter: invert(0%);   
}

.project-overview.compeer:hover a,
.project-overview.compeer a:focus { background:#c390d1;}

.project-overview.giving:hover a,
.project-overview.giving a:focus { background:#4B1912;}

.project-overview.engineering-responsive:hover a,
.project-overview.engineering-responsive a:focus { background:#555555;} /* Mean it.*/

.project-overview.climate:hover a,
.project-overview.climate a:focus { background:#74C77A;}

.project-overview.geo:hover a,
.project-overview.geo a:focus { background:#C5B624;}

.project-overview.space:hover a,
.project-overview.space a:focus{ background:#4165C7;}

.project-overview.magplus:hover a,
.project-overview.magplus a:focus { background:#102A53;}

.project-overview.video:hover a,
.project-overview.video a:focus{ background:#C13943;}

.project-overview.training:hover a,
.project-overview.training a:focus { background:#F35BAA;}


/*
----------------------------------------------------------------
	P R O J E C T  P A G E S
---------------------------------------------------------------- */

section.project {
	min-height:16rem;
    width:100%;
    background: #279fa3;
	margin:0px auto;
	margin-bottom:3.333rem;    	
}

section.project h1 {
	font-size:4rem;
	line-height:5rem;
	font-weight:300;
	text-align:center;
    color:#f2f2f2;
}

section.project ul {
    float:right;
    margin-bottom:0;
    position:relative;
    bottom:0;
}

section.project ul li {
	display:inline-block;
    bottom:0;
    float:left;
    margin:0 .222rem;
    list-style-type: none;
}

section.project ul li a {
	background:rgba(255,255,255,.5);
	-webkit-border-radius:0.250rem 0.250rem 0 0;
	-moz-border-radius:0.250rem 0.250rem 0 0;
	border-radius:0.250rem 0.250rem 0 0;
    padding:1rem 2rem 1.333rem 2rem;
	z-index:9995;	
	text-decoration:none;
	color:#6a98ab;

    font-family: "europa",sans-serif;
	font-weight:700;
    font-size:1.000rem !important;
	line-height:4rem;
    letter-spacing:2px;    
    text-transform:uppercase;    
	text-align:center;
}

section.project ul li:hover a,
section.project ul li a:focus {
	background:rgba(255,255,255,.8);
}

section.project ul li a:visited {
	text-decoration:none;
	color:#6a98ab;	
}

.project-specs {
    margin-top:6rem;
	background:rgba(246, 246, 246,.8);
	-webkit-border-radius:0.250rem;
	-moz-border-radius:0.250rem;
	border-radius:0.250rem;	
}

.project-specs dl {
   padding:0 2rem;
}

.project-link a {
	max-width:8rem;
	padding:10px;
	text-decoration:none;
	background-color:none;
	color:#6a98ab;
	text-align:center;	
	font-family: "europa", sans-serif;
	font-weight:600;
	margin:auto;
	margin-top:1.8rem;
	margin-bottom:1.8rem;
	display:block;
	-webkit-border-radius:0.250rem;
	-moz-border-radius:0.250rem;
	border-radius:0.250rem;
	border:2px solid #6a98ab;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;	
}

.project-link a:hover,
.project-link a:focus {
	color:#F8F8F8;	
	background-color:#6a98ab;	
}

.project-container {
	padding-bottom:1.4rem;
}

.project-container h1 {
	color:#605c5c;
	text-shadow:none;
	padding-top:.886em;
	display:block;
	text-align:left;
	font-size:2em;
}

.project-divider {
	border-top: 2px solid #D8D8D8;
	border-bottom: 2px solid #f8f8f8;
	margin:auto;
	width:45%;
}

.project-container p a,
.project-container p a:visited {
	color:#0A8E90;
}

.project-container img,
.project-container iframe {
	max-width:100%;
}

.project-container img {
	max-width:940px;
	max-width:100%;	
}

.project-container img[src$=".gif"] {
	max-width:80%;	
	margin:0px auto !important;
}


/*
----------------------------------------------------------------
	A B O U T
---------------------------------------------------------------- */

img.profile {
	margin:0px auto;
	padding-top:4rem;   
    max-width:100%;
    width:80%;
	display:block;
}

.about h1 {
    padding-top:4rem;
    padding-left:2rem;
    padding-right:2rem;
    margin:0px auto;  
}

.about h2 {
	font-size:1.888rem; /* 38px / 18px base */
	line-height:2.806rem;
	color:#777; 
	font-weight:300;   
    text-align: center;
    padding-left:2rem;
    padding-right:2rem;
}


.quote {
    margin:4rem 0;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
.quote p {
    font-size:1.555rem;
    line-height:2.222rem;
    font-weight:400;
	font-style:italic;
    text-align:center;
    max-width:80%;
    margin-left:auto;
    margin-right:auto;
    color:#777;
}


/*
----------------------------------------------------------------
	C O N T A C T
---------------------------------------------------------------- */
.section-contact {
/*     padding:4rem 0 !important; */
    border-bottom:2px solid #F2F2F2;
	background:rgba(55,168,170,0.1);
	margin-top:0;
}
  
.messages {
    height:100%;   
    background:url('images/message.png') repeat-y;
    background-postion:left bottom;
  
	-webkit-animation: message-icon 10s ease-in-out alternate infinite;
	-moz-animation: message-icon 10s ease-in-out alternate infinite;
	-o-animation: message-icon 10s ease-in-out alternate infinite;
	animation: message-icon 10s ease-in-out alternate infinite;	

}


@-webkit-keyframes message-icon {
  0%    {background-position: 75% 70%;  }
  100%  {background-position: 95% 80%;  }
}

@-moz-keyframes message-icon {
  0%    {background-position: 75% 70%;  }
  100%  {background-position: 95% 80%;  }
}

@-o-keyframes message-icon {
  0%    {background-position: 75% 70%;  }
  100%  {background-position: 95% 80%;  }
}

@keyframes message-icon {
  0%    {background-position: 75% 70%;  }
  100%  {background-position: 95% 80%;  }
}


.section-contact h1 {
    padding:8rem 0 !important;
	margin-top:0;
	text-align:center;

}

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

	S O C I A L  M E D I A  I C O N S
	
---------------------------------------------------------------- */


ul.social-media-icons {
    display:block;
    width:100%;
}

.social-media-icons li {
    list-style-type: none;
    width:100%;
    display:inline-block;
    padding:.222rem 0;
    height:6rem;
    margin:.888rem 0;
	-webkit-border-radius:0.250rem;
	-moz-border-radius:0.250rem;
	border-radius:0.250rem;
	
    text-transform:uppercase;
    letter-spacing:0.0777rem;

	font-size:1.000rem; /* 19px / 18px base */
	line-height:6rem;   

	font-family:"europa", sans-serif;
    font-weight:400;
	color:#222;
	
}

.social-media-icons a li {
    background-color:rgba(255,255,255,.7);
	border:2px solid rgba(239,239,239,.5);

	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;	
}

.social-media-icons a img {	
	max-width:100%;	
    width:3rem;
	float:left;
	margin:1.5rem 1rem 1.5rem 1.5rem;
}


.social-media-icons a:hover li,
.social-media-icons a:focus li {
    background-color:rgba(255,255,255,.8);
	border:2px solid rgba(239,239,239,1);

}

.social-media-icons a li span {
	color:rgba(255,255,255,0);
	width:6rem;
	margin-top:1.5rem;
	line-height:3rem;
	text-align:center;
	float:right;
	margin-right:.888rem;

	-webkit-border-radius:0.250rem;
	-moz-border-radius:0.250rem;
	border-radius:0.250rem;	
	
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;	
}

.social-media-icons a:hover li span,
.social-media-icons a:focus li span {
	color:rgba(255,255,255,1);
}

.social-media-icons a li span.twitter { background-color:rgba(12,155,219,0);}
.social-media-icons a li span.tumblr { background-color:rgba(32,52,77,0);}
.social-media-icons a li span.treehouse { background-color:rgba(127,199,131,0);}

.social-media-icons a:hover li span.twitter,
.social-media-icons a:focus li span.twitter { background-color:rgba(12,155,219,1);}

.social-media-icons a:hover li span.tumblr,
.social-media-icons a:focus li span.tumblr { background-color:rgba(32,52,77,1);}

.social-media-icons a:hover li span.treehouse,
.social-media-icons a:focus li span.treehouse { background-color:rgba(127,199,131,1);}


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

	F O O T E R
	
---------------------------------------------------------------- */


footer {
	width:100%;
	height:auto;
	position:absolute;
	margin-bottom:0;
	margin-top:2rem;
	background:#EFEFEF;
}

footer p {
    margin-top:-2rem;
    font-size:.888rem;
    font-style:italic;
}


/*
----------------------------------------------------------------		
	C S S  C O L O R S

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