/* ==========================================================================
  
   Please excuse any crazy code as this is my very first responsive site 
   and is a work in progress. :) 
   
  Special thanks to:
	HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   
   ========================================================================== */

/* 
Colors
green 64a67b
blue-green 6cc2bf
50% blue-green b5e0df
dark grey 3e3e3e
 */


@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

html,
button,
input,
select,
textarea {
    color: #3e3e3e;
}

body {
    font-size: 1em;
}

::-moz-selection {
    background: #b5e0df;
    text-shadow: none;
	}

::selection {
    background: #b5e0df;
    text-shadow: none;
	}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #3e3e3e;
    margin: 1em 0;
    padding: 0;
	}

img {
    vertical-align: middle;
    max-width: 100%;
	}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
	}

textarea {
    resize: vertical;
	}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
	}


/* ===== Initializr Styles + Elbing Styles =============================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font-family: 'MuseoSlab-500', Georgia, serif;
    line-height: 1.5;
	}

em, .note{
 font-family: 'MuseoSlab-500Italic', Georgia, serif;
 }

.wrapper {
    width: 76%;
    margin: 0 12%;
	}

.header-container {
	background:#6cc2bf url(../images/grn_bg.png) repeat-y 50%;
	}

h1.title {
   	background-color:#fff;
    color: #3e3e3e;
   	font: 700 1.5em 'Montserrat', sans-serif;
	letter-spacing: .06em;
	padding: 1.25em 0;
	margin:1em auto 0 auto;
	text-align:center;
	text-transform:uppercase;
	-webkit-box-shadow:  5px 5px 0px 0px #3e3e3e;
     box-shadow:  5px 5px 0px 0px #3e3e3e;
	}

.title .tagline{
	display:block;
	font: normal .67em 'MuseoSlab-500', Georgia, serif;
	letter-spacing: 0;
	padding-top:.67em;
	text-transform:lowercase;
	}

a.main_link {
	text-decoration: none;
	color:#3e3e3e;
	}
	
	
/* ==============
    MOBILE: Menu
   ============== */

nav#main ul, nav#main li {
    margin: 0;
    padding: 0;
	}

nav#main a {
    color: white;
    display: block;
    float: left;
    font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: .07em;
    margin: 10px 0 5px 0;
    padding: 13px 0;
	text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 47%;
	}

nav#main a:hover,
nav#main a:visited {
    color: white;
	}

nav#main a:hover {
	color:#3e3e3e;
   /*  text-decoration: underline; */
	}

nav#main li:last-child a {
     float:right;
    }



/* ==============
    MOBILE: Main
   ============== */


.main {
   /*  padding: 30px 0; */
    padding: 2em 0; 
	}

nav#work{
	display:none;
	}

.gallery ul, .gallery ul li{
	list-style:none;
	margin: 0;
	padding: 0;
	}
	
.gallery ul li{
	text-align:center;
	padding: .75em 0;
	}
	
	
	
/* ==============
    MOBILE: Footer
   ============== */


.footer-container footer {
    padding: 1.25em 0;
     padding: 1.75em 0;
	}

.footer-container footer{
	border-top:1px solid;
	text-align: center;
	}

.footer-container footer h3{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: .06em;
	margin: .5em 0 0 0;
	text-transform:uppercase;
	}
.footer-container footer p{
	font-size: .875em;
	}
.footer-container footer .copyright{
	border-top:1px solid;
	padding: 2.625em 0 0 0;
	font-size: .625em;
	}

.footer-container footer .social_media {
	margin:1.5em 0 2.5em 0;
	}

.footer-container footer .social_media ul{
	margin:0;
	padding:0;
	list-style-type: none;
	}

.footer-container footer .social_media li{
	display:inline-block;
	list-style-type: none;
	margin-right: 10px;
	overflow:hidden;
	padding:0;
	text-indent: -9999px;
	width: 32px;
	}

.footer-container footer .social_media a{
	background-image:url(../images/social_media_sprites.png);
	display:block;
	height:32px;
	}

.footer-container footer .social_media a.fb{
	background-position: 0 0;
	}
	.footer-container footer .social_media a.fb:hover{
	background-position: 0 -32px;
	}
.footer-container footer .social_media a.instagram{
	background-position: -32px 0;
	}
	.footer-container footer .social_media a.instagram:hover{
	background-position: -32px -32px;
	}
	
.footer-container footer .social_media a.twitter{
	background-position: -64px 0;
	}
	.footer-container footer .social_media a.twitter:hover{
	background-position: -64px -32px;
	}
	
.footer-container footer .social_media a.email{
	background-position: -96px 0;
	}
	.footer-container footer .social_media a.email:hover{
	background-position: -96px -32px;
	}	
	
.footer-container footer .social_media a.pinterest{
	background-position: -128px 0;
	}
	.footer-container footer .social_media a.pinterest:hover{
	background-position: -128px -32px;
	}			
	
	
/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


.main a, footer a{
	color:#6cc2bf;
	text-decoration:underline;
	-webkit-transition: color .3s;
	-moz-transition: color .3s;
	-ms-transition: color .3s ;
	-o-transition: color .3s;
	transition: color .3s;
	}
	
.main a:hover, footer a:hover{	
	color:#64a67b;
	}


h1, h2, h3, h4, h5, h6{ 
	font-weight:normal;
	}

.main h2 a{
	color:#3e3e3e;
	text-decoration:none;
	}

.main h2 a:hover{
	color:#6cc2bf;
	}

h1{
	font-size: 1.75em;
	line-height: 1.125em;
	margin: .51em 0;
	}

h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size:1em;
	letter-spacing: .07em;
	text-transform:uppercase;
	}

.subhead{
	font-family: 'Montserrat', sans-serif;
	/* font-size:.75em; */
	font-size:1em;
	margin-bottom: -.625em;
	font-size:.875em;
	font-weight: 700;
	text-transform:uppercase;
	}

.main article header{
	border-top: 1px solid;
	border-bottom: 1px solid;
	padding: 1.75em 0;
	text-align:center;
	}

.main article header p{
	margin:0;
	}

.main p, .main ul {
	font-size: .875em;
	}

.main article.gallery header{
	margin-bottom: 1.35em;
	}


.large_img{
	margin: 1em 0;
	}
	
.portfolio_detail img{
	margin: 1.5em 0 0 0;
	display:block;
	}


.about section{
	margin-top: 1.75em;
	}

.about section h2{
	font-family: 'Montserrat', sans-serif;
	font-size:1em;
	/* font-size:.875em; */
	font-weight: 700;
	text-transform:uppercase;
	margin: .65em 0;
	}

.about section p{
	margin-bottom: .5em;
	}

/* fix fuzzy bg images for social media */

@media screen and (-webkit-device-pixel-ratio: 2) {
    .footer-container footer .social_media a{
        background-image: url(../images/social_media_hi_res.png);
        background-size: 160px 32px;
        -webkit-background-size: 160px 32px;
        -moz-background-size: 160px 32px;
    }
    
	.footer-container footer .social_media a.fb{
	background-position: 0 0;
	}
	
	.footer-container footer .social_media a.instagram{
	background-position: -64px 0;
	}
	
	.footer-container footer .social_media a.twitter{
	background-position: -128px 0;
	}
	
	.footer-container footer .social_media a.email{
	background-position: -192px 0;
	}
	
	.footer-container footer .social_media a.pinterest{
	background-position: -256px 0;
	}		

}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */
	

    nav#main a {
        float: left;
        width: 47%;
        margin: 10px 3% 5px 3%;
        padding: 15px 0;        
    }

    nav#main li:first-child a {
        margin-left: 0;
    }

    nav#main li:last-child a {
        margin-right: 0;
    }

	.gallery ul li{
     display:inline-block;
    }
	
	.gallery ul li.even{
	float:right;
	margin-left:20px;
	}
	
	.gallery ul li.odd{
	float:left;
	}	
	
	.image_container{
	display:none;
	}

	.large_img{
	display:block;
	margin-bottom:1em;
	}	
	 

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav#main ul li {
        display: inline;
    }

    .oldie nav#main a {
        margin: 0 0.7%;
    }
/* ========================
    INTERMEDIATE: Main
   ======================== */
    
  
    
}

@media only screen and (min-width: 768px) {



/* ============
    WIDE: Menu
   ============ */

.header-container-hover {
	background-image: url(../images/grey_bg.png);
	}

.title {
    width:340px;
    }
   
nav#main {
	width: 340px;
	margin: 0 auto;
	}  

nav#main a{
	-webkit-transition: color .3s;
	-moz-transition: color .3s;
	-ms-transition: color .3s ;
	-o-transition: color .3s;
	transition: color .3s;
	}
  nav#main li:first-child a {
     float:left;
    }

  nav#main li:last-child a {
     float:right;
    }


/* ============
    WIDE: Main
   ============ */

.gallery ul li{
     display:inline-block;
    }
    
 .gallery ul li.even{
	float:right;
	margin-left:20px;
	}
	
 .gallery ul li.odd{
	float:left;
	}	 

nav#work{
	background-color:#fff;
	display:block;
	padding: 1em 0;
	border-bottom:1px solid;
	height:3.143em;
	position: relative;
	width: 580px;
	padding:0;
	}
	
nav#work a{
	color:#3e3e3e;
	/* 
color:#6cc2bf;
	color:#9f9f9f;
 */
	font-size: .825em;
	  font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform:uppercase;
	text-decoration:none;
	padding: .5em;
	position:absolute;
	top:.7em;
	margin-bottom:.5em;
	
	-webkit-transition: color .4s ;
	-moz-transition: color .4s ;
	-ms-transition: color .4s ;
	-o-transition: color .4s ;
	transition: color .4s ;
	}
	
nav#work a:hover{
	color:#6cc2bf;
	}	
	
nav#work a.prev{
	left:0;
	}
nav#work a.next{
	right:0;
	}
nav#work a.work_main{
	left: 45%;
	}	
	
.about section{
	width: 280px;
	}	
	
.about section.col_1{
	float:left;
	}
	
.about section.col_2{
	float:right;
	}	
	
 .wrapper{
 	width: 580px;
 	margin: 0 auto;
 }

}



/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}