@charset "utf-8";
/* CSS Document */


/*  RESET PAGE MARGINS */
*{
margin:0;
padding:0;
}

/* CLEAR-FIX */
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */


body{
background: #fafbf5;
color: #404041;
font-size: 100%;
font-family:"Lora", Georgia, "Times New Roman", Times, serif;
text-align: left;	
margin:0 auto;
clear: both;
}

#headerContainer{
width:100%;
background:#abdbd9;
}


p, #projectsNav, #mainContent ul{
font-size:0.875em; /* 14/16 */
line-height:1.625em; /* 26/16 */
margin-bottom:1em;
}

h1, h2, h4, #projectsNav {
font-family:"Montserrat", Arial, Helvetica, sans-serif;
}

h1{
font-size:1.3125em; /* 21/16 */
margin-bottom:1em;
color:#595959;
border-bottom:solid 1px #e7e7e7;
}


h2{
font-size:1em; /* 16/16 */
font-weight:normal;
margin-bottom:0.5em;
color:#999;
}

h3{
font-size:0.875em; /* 14/16 */
font-style:italic;
font-weight:normal;
color:#b1b1b1;
}

h4{
margin-bottom:0.5em;
font-size:0.875em; /* 14/16 */
letter-spacing:0.2em;
text-transform:uppercase;
line-height:1.375em;
font-weight:normal;
}

#projectsNav{
letter-spacing:0.2em;
text-transform:uppercase;
color:#b1b1b1;
}

a{
text-decoration:none;
}

a:link, a:visited{
color:#66cccc;
}

a:hover, a:focus{
color:#5bb7b2;
border-bottom: solid 2px #5bb7b2;
}

#mainHeader{
padding:1em 1.5em;
}

#mainHeader img{
width:2.5em;
height:auto;
margin-right:1em;
float:left;
}

#mainHeader a:hover{
border:none;
}

#mainHeader p{
display:inline-block;
font-style:italic;
font-size:0.6875em; /* 11/16  */
line-height:1.5em;
margin:1.1em 0 0.5em 0;
color:#fff;
}

#mainHeader nav{
font-family:"Montserrat", Arial, Helvetica, sans-serif;
font-size:0.625em; /* 10/16 */
letter-spacing:0.2em;
line-height:1em;
text-transform:uppercase;
float:none;
margin-top:2.5em; 
}

#mainHeader nav ul{
list-style:none; 
margin:0 auto; /* margin size reset */
}

#mainHeader nav ul li{
width:100%;
text-align:left;
border-bottom:1px solid #fff;
}

#mainHeader nav a:link, #mainHeader nav a:visited{
color:#fff;; /* all links are dark grey */
display:block;
padding:1em 1em; 
height:1em; 
}

#mainHeader nav a:hover, #mainHeader nav a:focus{
color:#fff; /* hovered links are blue with white text */
background:#5bb7b2;
border-bottom:none;
}

#mainHeader nav .active a:link, #mainHeader nav .active a:visited{
color:#fff; /* active and active visited links are dark grey with white text */
background:#5bb7b2;
}

#mainHeader nav .active a:hover, #mainHeader nav .active a:focus{
background:#5bb7b2; /* active and active visited links are blue on hover*/
}

#mainContent{
background:#fafbf5;
padding:1.5em;
}

.colSide{
width:100%;
}

.colMain{
width:100%;
}

.colMain img{
width:100%;
height:auto;
padding-bottom:1em;
}

.colSide img{
width:100%;
height:auto;
padding-bottom:1em;
}

.gallery-container{
display: block;
}

.gallery{
list-style:none;
margin-left:0;
}

.gallery li{
display:inline-block;
margin:0 0 1em;
vertical-align: top;
width: 100%; /* single column */
}

.gallery img{
max-width: 100%; 
height: auto;
margin: 0 0 1em;
}

.gallery p{
font-size:1em;
font-style:italic;
line-height:1.5em;
}

.gallery a{
display: inline-block;
border-bottom: 2px #fafbf5 solid;
width: 100%;
}

.gallery a p{
color:#b1b1b1;
}

.gallery a h4{
color:#66cccc;
}

.gallery a:hover img, .gallery a:focus img{
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}


.gallery a:hover, ul.gallery li a:focus{
border-bottom: 2px #66cccc solid;
background:none;
}


.gallery a:hover p, .gallery a:focus p{
color:#dadada;
}

.gallery a:hover h4, .gallery a:focus h4{
color:#cdcdcd;
}


@media all and (min-width: 30em){ /* 480px + */
#mainHeader{
width: 90%;
margin:0 auto;
}
	
#mainHeader img{
width: 3em;
height:auto;
}
	
#mainHeader p{
line-height: 1.5em;
margin-top:1.6em;
}
	
#mainHeader nav{
float: none;
margin-top:3em;
}

#mainHeader nav ul li{
display: inline;
width: auto; 
border-bottom:0;
margin:0 2em 2px 0;
}

#mainHeader nav a:link, #mainHeader nav a:visited{
display: inline-block;
background:none;
padding:1em 0;
}

#mainHeader nav a:hover, #mainHeader nav a:focus{
color:#5bb7b2; /* hovered links are blue with white text */
border-bottom: 2px solid #5bb7b2;
margin-bottom:0;
}

#mainHeader nav .active a:link, #mainHeader nav .active a:visited{
color:#fff; /* active and active visited links are dark grey with white text */
border-bottom: 2px solid #fff;
margin-bottom:0;
background:none;
}

#mainHeader nav .active a:hover, #mainHeader nav .active a:focus{
color:#5bb7b2;
border-bottom:2px solid #5bb7b2;
}

ul.gallery{
margin-left:-2.5%; 
}

ul.gallery li{
width: 47.5%; /* 2 columns with 2.5% margin */
margin: 0 -4.5px 2.5% 2.5%;
}

}


@media all and (min-width: 40em) {      /* 640px + */
p, #mainContent ul{
font-size:0.875em; /* 14/16 */
line-height:1.75em; /* 28/16 */
}
	
#mainContent{
width: 90%;
margin:0 auto;
}

.gallery-container{
padding-top:1.5em;
}

.colSide{
width:36.25%; /* 6/16 columns with 2% margin */
margin-right:2%;
float:left;
}

.colMain{
width: 61.75%; /* 10/16 columns with 2% margin */
float:right;
}
}

@media all and (min-width: 50em) {  /* 800px + */
#mainHeader nav{
float: right;
margin-top:1.3em;
}

#mainHeader nav ul li{
margin:0 0 0 2em;
}

.colSide{
width:29.875%; /* 5/16 columns with 2% margin */
margin-right:2%;
float:left;
}

.colMain{
width:68.125%; /* 9/16 columns with 2% margin */
float:right;
}

ul.gallery li{
width: 30.83%; /* 3 columns with 2.5% margin */
}
}

@media all and (min-width: 65em) {  /* 1040px + */
p, #mainContent ul{
font-size:1em; /* 16/16 */
line-height:1.875em; /* 30/16 */
}
	
h1{
font-size:1.5em; /* 24/16 */
}
	
h2{
font-size:1.125em; /* 18/16 */
}
	
h3{
font-size:1em; /* 16/16 */
}

#mainHeader, #mainContent{
max-width: 65em; /* 1040/16 */
}

#mainHeader{
padding-top:1.5em;	
padding-bottom:1.5em;
}

#mainHeader p{
font-size:0.8125em; /* 13/16  */
}

#mainHeader img{
width:3.5em;
height:auto;
}

#mainHeader nav{
font-size:0.75em; /* 10/16 */
}

}