/*
* Site Name: ericknauer.me
* Author: Eric Knauer
* Last Update: 06.29.2014
*/

/*Remove Browser Defaults - From All Elements*/
* {margin: 0; padding: 0;}

/*Enable HTML5 Elements*/
article, aside, dialog, header, figure,
footer, section, nav, canvas, blockquote, q {display: block; position: relative;}
article:before, article:after {height: 1px; content: "."; text-indent: -9999px; display: block;}
/*Set Type Defaults*/
h1, h2, h3, h4 {line-height: 1;}
li, p, a {line-height: 1.2;}
a {text-decoration: none; outline: none;}
sup {font-size: 12px; line-height: 0; position: relative; top: -0.3em;}
.sectionTitle {height: 30px; font: normal 20px/30px 'dinProRegular', Helvetica, Arial, Serif; color: #444; display: inline-block; border-left: solid 1px #D1D1D1; text-indent: 10px;}
.sectionTitle > span {height: 30px; border-left: solid 1px #FFF;}
.subText {font: italic 16px/1.8em "Georgia", Serif; color: #888; text-align: center;}
.callout {color: #6EA6C5;}
.error {font: italic normal 12px Georgia, Serif; color: rgba(88, 195, 240, 1);}
.rarr:before {content: "\2192"; color: #444; padding-right: 12px;}
.larr:after {content: "\2192"; color: #444; padding-left: 12px;}
.button {
	width: auto; height: auto; margin: 0px; padding: 10px 16px 10px 16px; 
	display: inline-block; *display: inline; zoom: 1;
	font: normal 14px/1em 'dinProMedium', Helvetica, Arial, Serif; color: rgba(245, 245, 245, 1); 
	text-transform: uppercase; text-decoration: none;
	border: solid 1px #4E8DB0;
	background-color: #6EA6C5;}
.button.disable {background-color: rgba(232, 233, 235, 1);}

/*Define Framework*/
body, #header {background: url('../images/body_bg.jpg') repeat 0 0 transparent;}
.center {margin: 0 auto;}
.full {width: 100%}
.half {width: 50%;}
.section, 
.frame {position: relative;}
.section {border-top: solid 1px rgba(255, 255, 255, 1); border-bottom: solid 1px rgba(209, 209,209, 1);}
.section:after {height: 0; clear: both; content: "."; display: block; visibility: hidden;}
.menu {list-style: none; overflow: hidden; position: relative;}
ul {list-style: none;}
.menuItem, 
.filterItem {width: auto; float: left; margin-right: 12px;}
header.section {padding: 30px 15px 30px 20px; border: none;}
#page {width: 1056px; height: auto; position: relative; overflow: hidden;}
.divider::before {width: 75%; height: 1px; content: "."; text-indent: -9999px; background-color: rgba(255, 255, 255, 1); border-top: solid 1px rgba(209, 209,209, 1); clear: both; display: block; margin: 0px auto;}

/*Header - Top Navigation*/
#header {width: 1056px; height: 100px; position: absolute; top: 0; border-top: none; z-index: 100; background-color: rgba(241, 241, 241, 1);}
#header.fixed {position: fixed; top: 0px;}
#header .frame {padding: 0px 20px; overflow: hidden;}

#intro {width: 250px; height: 100px; float: left; position: relative;}
#intro .icon-ek-logo {font-size: 45px; color: rgba(88, 195, 240, 1); position: absolute; top: 24px; left: 0px;}
#intro h1 {font: italic 12px/1em "Georgia", Serif; color: #9B9B9B; margin: 0px 0px 0px 70px;}
#intro h2{font: normal 18px/1em 'dinProRegular', Helvetica, Arial, Serif; color: #444; margin: 35px 0px 5px 70px;}

#nav {width: auto; overflow: hidden; float: right; margin-top: 42px;}
#nav .menuItem {height: 35px;}
#nav .menuItem:last-child {margin-right: 0px;}
#nav .menuItem a {font: normal 14px/1em 'dinProMedium', Helvetica, Arial, Serif; color: #444; text-transform: uppercase;}
#nav .menuItem a.current {border-bottom: solid 3px rgba(88, 195, 240, 1); padding-bottom: 5px;}

/*Gallery Section*/
#gallery {border-top: solid 1px #D1D1D1; margin-top: 100px; padding-bottom: 79px;}
#gallery > header {border-top: solid 1px #FFF;}

#filter {float: right;}
#filter .filterItem {height: 30px; margin-right: 6px;}
#filter .filterItem:last-child {margin-right: 0px;}
#filter .filterItem > a {height: 30px; display: inline-block; padding: 0px 6px; font: normal 14px/30px 'dinProRegular', Helvetica, Arial, Serif; color: #888; text-transform: uppercase;}
#filter .filterItem > a.active,
#filter .filterItem > a:hover {
	color: rgba(245, 245, 245, 1);
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
	/* Transition */
	-webkit-transition: all 250ms linear;
	-moz-transition: all 250ms linear;
	-ms-transition: all 250ms linear;
	-o-transition: all 250ms linear;
	transition: all 250ms linear; 
}

#galleryWrap {overflow: hidden;}
#galleryWrap.frame {padding: 0px 10px;}
#galleryWrap .galleryItem {width: 319px; height: 174px; position: relative; overflow: hidden; z-index: 0; border: solid 3px #FFF; float: left; margin: 0px 10px 20px 10px; background-color: #FFF;}
#galleryWrap .galleryItem.hidden {display: none;}
#galleryWrap .galleryItem:hover {cursor: pointer;}
#galleryWrap .galleryThumb {height: auto;}

.contentOverlay {width: 319px; height: 174px; display: block; position: absolute; top: 0; left: 0; z-index: 1; background: #000;}
.content {width: 319px; height: 174px; display: block; position: absolute; z-index: 3;}
.content .imageAnchor {height: 174px; color: #F5F5F5; text-align: center; display: block; background: url('../images/eye_icon.png') no-repeat 50% 42% transparent;}
.content .imageAnchor h4 {font: normal 18px/1em 'dinProRegular', Helvetica, Arial, Serif; padding-top: 30%;}
.content .imageAnchor h4 + p {font: italic 11px/1.5em "Georgia", Serif; letter-spacing: 1px; color: #F8F8F8; padding-top: 10px;}

#mainImageWrap {padding: 0px 20px; height: auto; position: relative; margin-bottom: 20px;}
#mainImageWrap #imageWrap {width: 1009px; height: auto; position: relative; overflow: hidden; z-index: 0; border: solid 3px #FFF;}
#imageWrap .closeImage {
	width: 80px; height: 30px; display: block; position: absolute; top: 20px; right: 0px; z-index: 1; 
	border: solid 1px #FFF;
	border-right: none; 
	background: url('../images/transparent_pixels.png') repeat 0 0 transparent;
}
#imageWrap .closeImage:hover {cursor: pointer;}
#imageWrap .closeImage > i {font: normal 18px/31px 'bebasNeueRegular', Helvetica, Arial, Serif; color: #F5F5F5; letter-spacing: 1px; display: block; text-indent: 10px; background: url('../images/close_img_icon.png') no-repeat 53px 6px transparent;}
#imageWrap .mainImage {height: auto; display: block;}

#mainImageWrap h4 {font: normal 18px/1em 'dinProRegular', Helvetica, Arial, Serif; color: #444; text-align: center; margin: 21px 0px 10px 0px;}
#mainImageWrap p {font: italic 12px/1em "Georgia", Serif; color: #9B9B9B; text-align: center; margin-bottom: 21px;}

/* Contact Section */
#contact {border-bottom: none;}
#contact .frame {float: left;}
#contact .subText {padding: 10px 280px 60px 280px;}
#contact #contactInfo {width: 475px; height: auto; overflow: hidden; margin: 30px auto 50px auto;}
#contact #contactInfo h3 {font: normal 20px/1em 'dinProRegular', Helvetica, Arial, Serif; color: #444; text-align: center; text-transform: uppercase; margin-bottom: 20px;}
#contact #contactInfo p {font: normal 14px/1.2em 'dinProRegular', Helvetica, Arial, Serif; color: #9B9B9B; text-align: center; margin-top: 10px;}
#contact #contactInfo .address span {display: block;}

#contact #stayConnected {width: 480px; height: auto; overflow: hidden; margin: 50px auto 0px auto;}
#contact #stayConnected h3 {font: normal 20px/1em 'dinProRegular', Helvetica, Arial, Serif; color: #444; text-align: center; text-transform: uppercase; margin-bottom: 20px;}
#contact #stayConnected .social {width: 265px; height: auto; margin: 18px auto 0px auto; overflow: hidden;}
#contact #stayConnected .social .badges {float: left; padding: 45px 10px 0px 0px; position: relative;}
#contact #stayConnected .social .badges:last-child {padding-right: 0;}
#contact #stayConnected .icon {color: rgba(241, 241, 241, 1); position: absolute; top: 0px; left: 8px; z-index: -1; font-size: 22px;}
#contact #stayConnected .icon.icon-facebook {left: 13px;}
#contact #stayConnected .icon.icon-linkedin {font-size: 20px; left: 6px;}
#contact #stayConnected .icon.icon-github {left: 4px;}
#contact #stayConnected .icon.icon-instagram {left: 12px;}
#contact #stayConnected .icon:before {margin: 0; position: absolute; top: 9px; left: 2px;}
#contact #stayConnected .icon.icon-linkedin:before {left: 3px;}
#contact #stayConnected .icon:after {width: 40px; height: 40px; content: ""; display: block; position: absolute; top: 0; left: -7px; z-index: -1; background: rgba(51, 51, 51, 0.8); border-radius: 50%;}
#contact #stayConnected .social .badges > .links {font: normal 12px/1em 'dinProRegular', Helvetica, Arial, Serif; color: #888;}
#contact #stayConnected .social .badges > .links:hover {color: rgba(88, 195, 240, 1);}

/* Contact Form*/
#formWrap, input, label, textarea {display: block; color: #F5F5F5;}
#formWrap, #cForm {overflow: hidden; background: transparent;} 
#cForm {width: 508px; outline: none;}
#formWrap .inputWrap {width: 100%; float: left; position: relative;}
	input, label {width: 220px; height: 35px; float: left; line-height: 35px;}
	input {font: normal 12px/1em Helvetica, Arial, Serif; text-indent: 5px;}
	label {width: 100%; font: normal 12px/35px 'dinProMedium', Helvetica, Arial, Serif; color: #444; text-transform: uppercase;}

#formWrap .inputWrap input, 
#formWrap .inputWrap textarea {border: solid 1px #D1D1D1; color: #999;}
	textarea {min-width: 503px; max-width: 503px; min-height: 180px; overflow: hidden; padding: 5px !important;}
	input[type="text"]:focus,
	textarea:focus {background: #FFFFF5; /* lite yellow */}
#formWrap #cSubmit {margin-top: 20px;}
#formWrap #cSubmit:hover {cursor: pointer;}
#formWrap .inputWrap .error {position: absolute; top: 10px;left: 45px;}
#formWrap #messageWrap .error {left: 62px;}
/*Push screen reader off the page */
.screenReader {position: absolute; left: -9999px; top: -9999px;}

#contact .emailMessage {width: 475px; height: auto; margin: 30px auto 0px; overflow: hidden;}
#contact .emailMessage h3 {font: normal 20px/1em 'dinProRegular', Helvetica, Arial, Serif; color: #444; text-align: center; text-transform: uppercase; margin-bottom: 20px;}
#contact .emailMessage p {font: normal 14px/1.2em 'dinProRegular', Helvetica, Arial, Serif; color: #9B9B9B; text-align: center; padding: 0px 40px;}

footer {height: 600px;}