/* === GLOBAL SETTINGS === */

header, main, aside, footer { display: block; }

body { margin: 0; background-color: #fff; font-size: 11pt; font-family:
sans-serif; }

/* === LAYOUT === */

.wrapper { background: #fff; margin: auto; }

.main { margin: auto; width: 75%;

}

.buffer { clear: both; min-height: 50px;

}


.site-footer { clear: both; min-height: 200px; background-color:
#bddbd5; }

/* === HEADER === */

.header { min-height: 200px; width: 90%; margin: auto; border-bottom:
2px solid #f5ddd9; }


.logo { margin: 30px auto 40px auto; display: block;

width: 50%;

}






/* === NAVIGATION MENU === */

.topnav a { padding: 25px 60px 25px 60px; text-decoration: none;
font-size: 13pt; letter-spacing: 2px; color: #000; display:
inline-block; }


.topnav { text-align: center; margin-top:20px; border-top: 2px solid
#f5ddd9;

}

.topnav a:hover { background-color:#f5ddd9; }

.topnav .icon { display: none; }


/* === MAIN CONTENT == */

.print-header { display: none; }





/* === INDEX === */


.col_index { height: 100%; display: block; float:left; margin: 1% 0 0
1%; }

/* === INDEX - image hover == */
.container { position: relative; width: 100%; }



.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
height: 100%; width: 100%; opacity: 0; transition: .5s ease;
background-color: #fff;

}

.container:hover .overlay { opacity: 92%; }

.text { color: #000; font-size: 16pt; line-height: 140%; letter-spacing:
1px; text-transform: uppercase; position: absolute; top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%,
-50%); transform: translate(-50%, -50%); text-align: center;}


/* === PROJECT PAGES === */

.col {

display: block; float: left; padding: 1em 0;

}

.poster_image { margin-top: 20px; }

.poster_image h4 { text-align: center;

padding-bottom: 10px; border-bottom: 2px solid #f5ddd9; }


.poster_info { text-align: left; line-height: 140%; margin: 50px 30px
30px 50px; }

.poster_info p { margin: 20px 0 0 0; }

.poster_info h4 { padding-bottom: 5px; border-bottom: 2px solid #f5ddd9;
}

.poster_info a { text-decoration: none; color: #1A6F5E; }

.poster_info a:hover { text-decoration: underline; }

.portfolio-button a { text-decoration: none; color: #1A6F5E; border: 2px
solid #bddbd5; font-size: 12pt;

padding: 10px; }


.portfolio-button a:hover { text-decoration: none;
background-color:#bddbd5; }



.image_credits { font-style: italic; }

.image_credits a { text-decoration: underline; }

/* === ABOUT === */

.about {

text-align: left; margin: 50px 20px 20px 20px; padding: 1em;
line-height: 140%; }

.about_hello { font-size: 2em; }

.about_page { margin-top: 20px; padding: 20px 40px 20px 40px; }


.about a { text-decoration: none; color: #1A6F5E; }

.about a:hover { text-decoration: underline; }

.portfolio_link { border: 2px solid #bddbd5; font-size: 12pt; margin:
0px 10px 2px 0px; padding: 10px; }

a.portfolio_link:hover { text-decoration: none;
background-color:#bddbd5; }



/* === FOOTER ===*/


.site-footer div { width: 300px; padding-top: 35px; padding-left: 35px;
}

.site-footer p { font-size: 10pt; line-height: 125%; }

.site-footer a { text-decoration: none; color: #000; }

.site-footer a:hover { text-decoration: underline; }




/* === RESPONSIVE === */

img { max-width: 100%; height: auto; }

.about { margin-top: 20px; margin-left: 40px; }

@media (max-width: 1155px) {

.topnav a { padding: 25px 30px 25px 30px; }





}


@media (max-width: 967px) {

.wrapper { background: #fff; }

.main, .image_thumb, .col { width: auto; float: none; padding: 3%; }


.about { margin-left: 20px; }





/* When the screen is less than 600 pixels wide, hide all links, except
/for the first one ("Home"). Show the link that contains should open and
/close the topnav (.icon) */

.topnav a:not(:first-child) {display: none;} .topnav a.icon { float:
right; display: block; }

.topnav { background-color:#f5ddd9; float: none; margin: 0px 0px;
margin-left: auto; margin-right: auto; text-align: left; }

.topnav a { padding: 15px 50px 15px 50px; }

.topnav a:hover { background-color: #FAFAFA; }

.header { border-style: none; }

div.logo { float:none;

	display: table; margin: 0px 0px; margin-right: auto; margin-left:
	auto; width: 90%;

	padding: 50px 0px 40px 0px; }

}/* end of devices at 967px */

/* The "responsive" class is added to the topnav with JavaScript when
/the user clicks on the icon. This class makes the topnav look good on
/small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 967px) {

.topnav.responsive {position: relative;} .topnav.responsive a.icon {
position: absolute; right: 0; top: 0; }

.topnav.responsive a { float: none; display: block; text-align: left; }
}

@media (max-width: 800px) {


.col_index img { width: 90%; margin-top: 6%; }

.overlay { max-width: 90%; height: auto; }



} /* end of devices at 800px */

/* === FOR PRINTING === */


@media print {

* { color: #000 !important; }

.banner, nav, .sidebar, .site-footer { display: none; }

.portfolio_link { display: none; }

div.poster_image img, ul.image_thumb li img { width: 80%; }


body { background: #fff; font-size: 12pt; }

.wrapper, .main, .sidebar { border: none; float: none; width: auto; }

.print-header { display: block; }

} /* end of @ media print */