/*
* Site Name: MOTIVEPHOTOGRAPHIC
* Author: Eric Knauer
* Last Update: 04.12.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: #6EA6C5;}
.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: #F5F5F5; 
	text-transform: uppercase; text-decoration: none;
	/*-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;*/
	border: solid 1px #4E8DB0;
	background-color: #6EA6C5;}
.button.disable {background-color: #E8E9EB;}

/*Define Framework*/
body {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 #FFF; border-bottom: solid 1px #D1D1D1;}
.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: #FFF; border-top: solid 1px #D1D1D1; 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: url('../images/body_bg.jpg') repeat -1px 1px transparent;}
#header.fixed {position: fixed; top: 0px;}
#header .frame {padding: 0px 20px; overflow: hidden;}

#intro {width: 235px; height: 100px; float: left; position: relative;}
#intro #logo {
	width: 74px; height: 74px; position: absolute; top: 12px; left: 0px;
	background: url('../images/logo.png') no-repeat 0 0 transparent;
	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
#intro h1 {font: italic 12px/1em "Georgia", Serif; color: #9B9B9B; margin: 0px 0px 0px 85px;}
#intro h2{font: normal 18px/1em 'DINProRegular', Helvetica, Arial, Serif; color: #444; margin: 30px 0px 5px 85px;}

#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 #6EA6C5; 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: #F5F5F5;
    background: #000;
    cursor: pointer;

    filter:alpha(opacity=50); /* IE */
    -moz-opacity:0.5; /* Mozilla */
    opacity: 0.5; /* CSS3 */

	/* Transition */
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out; 
}

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

#about {padding-bottom: 100px;}
#about .frame {padding: 0px 20px 0px 20px;}
#about .subText {padding: 10px 240px 60px 240px;}
#about .canvas {width: 1015px; height: 400px; background: url('../images/photographer_brent_chastang.jpg') no-repeat 0 0 transparent;}
#about #contactBar {width: 480px; height: 60px; background-color: #6EA6C5; margin: 40px auto 0px auto;}
#about #contactBar > .frame {padding: 20px 20px 20px 25px;}
#about #contactBar p {font: normal 14px/1em 'DINProRegular', Helvetica, Arial, Serif; color: #F5F5F5; display: inline-block;}
#about #contactBar a {font: normal 14px/1em 'dinpromedium', Helvetica, Arial, Serif; color: #F5F5F5; text-transform: uppercase; border-left: solid 1px #F5F5F5; padding-left: 10px; margin-left: 10px;}

#services {padding-bottom: 100px;}
#services .frame {padding: 0px 20px;}
#services .subText {padding: 10px 180px 60px 180px;}
#services #serviceCards {overflow: hidden; display: none;}
#serviceCards .card {width: 238px; height: 400px; float: left; margin-right: 21px; background-color: #FFF; border-bottom: solid 3px #6EA6C5;}
#serviceCards .card:last-child {margin-right: 0px;}
#serviceCards .cardContent {padding: 20px 15px 10px 15px; overflow: hidden;}
#serviceCards .cardTitle {width: 212px; height: 16px; font: normal 16px/1em Helvetica, Arial, sans-serif; color: #2A292E; text-indent: 26px; margin-bottom: 15px; background: url('../images/camera_icon.png') no-repeat 0 0 transparent;}
#serviceCards .card .cardImage {width: 208px; height: 175px; margin-bottom: 20px;}
#serviceCards #option1.cardImage {background: url('../images/services_option1.jpg') no-repeat 0 0 transparent;}
#serviceCards #option2.cardImage {background: url('../images/services_option2.jpg') no-repeat 0 0 transparent;}
#serviceCards #option3.cardImage {background: url('../images/services_option3.jpg') no-repeat 0 0 transparent;}
#serviceCards #option4.cardImage {background: url('../images/services_option4.jpg') no-repeat 0 0 transparent;}
#serviceCards .card .cardSubTitle {font: bold 12px/1em Helvetica, Arial, sans-serif; color: #2A292E; margin-bottom: 15px;}
#serviceCards .card .cardDesc {font: normal 12px/1.2em Arial, sans-serif; color: #7C7E8B; margin-bottom: 20px;}
#serviceCards .card .cardPricing {font: bold 11px/1em Helvetica, Arial, sans-serif; float: left; margin-right: 4px;}
#serviceCards .card .cardPricing > span {font: normal 11px/1em Helvetica, Arial, sans-serif;}

#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: 250px; height: auto; margin: 18px auto 0px auto; overflow: hidden; background: url('../images/social_icons.png') no-repeat 10px 0 transparent;}
#contact #stayConnected .social .badges {float: left; margin: 45px 10px 0px 0px;}
#contact #stayConnected .social .badges > .links {font: normal 12px/1em 'DINProRegular', Helvetica, Arial, Serif; color: #888;}
#contact #stayConnected .social .badges > .links:hover {color: #6EA6C5;}

/* 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 of 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;}


/*Remove After Reveal*/
#snyHolidayOverlay {background: #30343f; opacity: 0.8; filter: alpha(opacity = 80) !important; height: 100%; position: fixed;top: 0px;bottom: 0px;left: 0px;right: 0px;z-index: 100;display: none;}
#snyHolidayOverlayMsg {position: fixed;top: 25%;left: 30%;right: 30%;	background: url('../images/merryChristmasPopup.jpg') no-repeat 0 0 #fff;height: 276px; width: 644px; color: #333;	-moz-box-shadow: 0 1px 5px #333;-webkit-box-shadow: 0 1px 5px #333;z-index: 101;display: none;}
#closeHolidayMsg {float: right;	width: 34px;height: 34px;background: url('../images/merryChristmasPopupClose.png') no-repeat top left;margin-top: -16px;margin-right: -16px; text-indent: -9000em;}
#closeHolidayMsg:hover {cursor:pointer;}