/*
Theme Name: Sarah Walker Creative

Author: Sarah Walker
Author URI: http://www.sarahwalkercreative.com/
Description: Web Design Portfolio for Sarah Walker
Version: 2

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

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/*
///////////////////////////////////////////
//
//  GLOBAL/ HEADER
//
///////////////////////////////////////////
*/

@font-face {
    font-family: 'wc_mano_negra_btaregular';
    src: url('WCManoNegraBta-webfont.eot');
    src: url('WCManoNegraBta-webfont.eot?#iefix') format('embedded-opentype'),
         url('WCManoNegraBta-webfont.woff') format('woff'),
         url('WCManoNegraBta-webfont.ttf') format('truetype'),
         url('WCManoNegraBta-webfont.svg#wc_mano_negra_btaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



html {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
 }

.clear {
	clear: both;
} 
body{
    background: #fff;
    color: #656565;
    font-size: 100%;
}

a{
    text-decoration: underline;
	color: #bcaf8d;
}

.clear{
    clear: both;
}

.container {
	width: 100%;
	max-width:1020px;
	margin: 0 auto;
	position: relative;
}

.mobile {
	display: none;
}

@media (max-width: 760px){
	
	.mobile {
		 display: block;
	}
	
	.desktop {
		display: none;
	}
	
		
}




* {
    box-sizing: border-box;
}

/*
///////////////////////////////////////////
//
//  NAVIGATION
//
///////////////////////////////////////////
*/
body.page-template-home .nav {
	background:none;
	font-family: 'Raleway', sans-serif;
	height: 70px;
	margin-top: 15px;
	margin-bottom: 60px;
    padding-top: 35px;
	text-align: center;
    z-index: 1500 !important;
	text-transform: uppercase;
    transition: background 0.6s ease 0s;
}

.nav {
	background:none;
	font-family: 'Raleway', sans-serif;
	height: 70px;
	margin-top: 30px;
	margin-bottom: 30px;
    padding-top: 20px;
	text-align: center;
    z-index: 1500 !important;
	text-transform: uppercase;
    transition: background 0.6s ease 0s;
}

.nav ul li ul li{
	float: left;
	text-align: center;
	width:20%;
}


.nav a{
	color: #bcaf8d;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.3em;
}

.nav ul li img.logo {
	margin-bottom: 8px;
    margin-top: -30px;
    position: relative;
    width: 46%;
    z-index: 100;
}

.sticky,
body.page-template-home .sticky {
	animation: 0.5s ease-in-out 0s normal forwards 1 running menu-animation;
	background:rgba(255,255,255, 0.9);
    position: fixed;
	padding-top: 20px;
	font-size: 14px;
    width: 100%;
    left: 0;
    top: 0;
	margin-top: 0px;
    z-index: 100;
    border-top: 0;
	height: 70px;
    transition: position 0.6s ease 0s, height 0.6s ease 0s, font-size 0.6s ease 0.6s;
}



.nav.sticky ul li img.logo {
	margin-top: -10px;
	width: 40%;
    transition: width 0.6s ease 0s !important;
}

@media (max-width: 760px){
	
	.sticky {
		display: none;	
	}
	
	.nav {
		background: #ededed none repeat scroll 0 0;
		height: 0;
		margin: 0;
		padding: 0;
	}
	
	body.page-template-home .nav {
		background: #ededed none repeat scroll 0 0;
		height: 0;
		margin: 0;
		padding: 0;
	}
	
	.nav ul li img.logo {
		display:none;
		height:0px;
	}
	
	.nav ul li ul li{
		border-top: 1px solid white;
		float: none;
		height: 48px;
		padding-top: 7px;
		text-align: left;
		width: 100%;
	}
	
	.cd-primary-nav li.second {
		height: 0px !important;
		display:none !important;
	}
	
	
	img.logo.mobile {    
		left: 10px;
		position: absolute;
		top: 9px;
		width: 80px;
	}

			
}

/*
///////////////////////////////////////////
//
//  HOME : WELCOME
//
///////////////////////////////////////////
*/

#home-welcome {
  background: url(images/home-bg.jpg) #363636 50% 0 repeat fixed;
  color: #fff;
  min-height: 470px; 
  height: 470px; 
  margin: 0 auto 0px;
  width: 100%; 
  max-width: 1920px; 
  /*padding: 100px 0px;*/
  position: relative; 
}

#home-welcome #intro {
	font-size: 55px;
	line-height:60px;
	margin: 0 auto;
	/*padding: 80px;*/
	text-align: center;
	width: 100%;
}

#home-welcome #intro h1{
	font-size: 75px;
}

#home-welcome #intro img{
	width: 550px;
}


.case-study {
	display: block; 
	float: left; 
	width: 140px; 
	height: 35px; 
	background-color:#363636; 
	color: #fff; 
	text-align: center; 
	padding-top: 6px;
	font-size: 13px;
	font-family: 'Raleway', sans-serif;
	margin-top: 15px;
}

@media (max-width: 760px){
	
	
	#home-welcome {
		min-height: 300px; 
		height: auto; /*
		padding: 80px 0px;*/
		transition: height 0.5s ease;
		margin: 0px;
	}
	
	#home-welcome #intro {
		font-size: 30px;
		line-height: 30px;
		padding: 30px 0px;
		transition: padding 0.5s ease,font-size 0.5s ease;
	}	
	
	#home-welcome #intro img{
		width: 90%;
		transition: width 0.5s ease;
	}

		
}

/*
///////////////////////////////////////////
//
//  HOME : WORK
//
///////////////////////////////////////////
*/

section.work {
	float:left;
	height:auto;
	width: 50%;
    overflow: hidden;
    position: relative;
	background-size: cover;
	background-position: center;
}
section.work a{
	display:block;
	height:335px;
}

section.work h2{
    font-size: 18px;
	color: #bcaf8d;
	float: left;
	display: block;
    line-height: 26px;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-weight:400;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	margin: 30px 0px 30px 0px;
	width: 100%;
}

section.work img{
	margin: 0 auto;
	float:left;
}


.work .hover {
	background:none;
	color: transparent;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    height: 335px;
    line-height: 1.25em;
    padding: 100px 0 0;
    position: absolute;
    text-align: center;
    top: -335px;
    transition: top 0.6s ease 0s;
    width: 100%;
    z-index: 100;
	font-family: 'Raleway', sans-serif;
}
.work:hover .hover {
	top: 0px;
    color: #fff;
	background: rgba(188, 175, 141, .8);
    transition: color 0.6s ease 0s, background 0.6s ease 0s;
    transition-delay: .25s;
	position: relative; 
	}
	
.work:hover .hover span {
	font-size: 28px;
}

.work .hover .view-button {
	font-size: 18px;
	margin: 35px 0px;
	padding: 10px 20px;
	position: relative;
	bottom: 30px;
	left: 30%;
	width: 200px;
}

.work a{text-decoration: none !important;}

@media (max-width: 760px){
	
	section.work,
	section.work.full-width{
		float: left;
		width: 100%;
		margin: 0 auto;
	}
	
}


/*
///////////////////////////////////////////
//
//  WORK
//
///////////////////////////////////////////
*/

.work-header .award {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 140;
	height: 140px;
}

.work-header {
	background-size: cover !important;
	background-position: middle center;
    color: #fff;
    height: 300px;
    margin: 0 auto 50px;
    max-width: 1920px;
    min-height: 300px;
    padding: 100px 0;
    position: relative;
    width: 100%;
}

.work-header #page-title {
	margin: 0 auto;
	padding: 60px;
	text-align: center; 
	width: 100%;
  
	
}

h1 {
  	font-family: 'Raleway', sans-serif;
	font-size: 60px;
	line-height: 0px;
	text-shadow: 1px 1px 4px rgba(50, 50, 50, 0.5);
}

.work-header #columbus-zoo #page-title h1{line-height: 55px; margin-top: -40px;}

.subtitle {
	margin: 0 auto;
	padding: 30px 30px 10px 30px;
	text-align: center; 
	width: 100%;
	color: #fff;
	font-size: 25px;
  	font-family: 'wc_mano_negra_btaregular';
}

.home-intro#work-desc {
    width: 844px;
    float: none !important;
    font-size: 36px;
    line-height: 50px;
    margin: 30px auto !important;
    text-align: center;
	font-family: 'Raleway', sans-serif;
	font-weight:100;
}

.home-intro#work-desc h3{
	text-align: center;
    margin: 100px 0px 100px 0px !important;}

.work-intro {
	width: 100%;
	margin: 0px auto;
	padding: 40px;
	color: #363636;
	float:left;
	background:none;
}

.work-intro #work-desc {
	float: left;
    width: 70%;
    font-size: 16px;
    line-height: 24px;
    padding-right: 20px;
	font-family: 'Raleway', sans-serif;
	font-weight:100;
}

.work-intro #work-desc h3{
    font-size: 16px;
    line-height: 1.5em;
	margin-bottom: 20px;
}

.work-intro #work-desc p{
    font-size: 14px;
    line-height: 22px;
	font-family: Arial, Helvetica, sans-serif;
}

.work-intro #work-listing {
	float: right;
	width: 25%;
	padding-left: 20px;
	color: #bcaf8d;
	letter-spacing: 0.3em;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

.work-intro #work-listing ul {
	margin-top: 10px;
	text-transform: uppercase;
}

.work-intro #work-listing ul li{
	margin-bottom: 10px;
	font-size: 12px;
	color: #363636;
	letter-spacing: 0em;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

section.work {
	font-size: 16px;
	line-height: 1.5em;
	font-family: 'Raleway', sans-serif;
}

section.work.full-width{
	width: 100%;
}

section.work img{
	width: 100%;
}

.work-intro ul li{
	margin-bottom: 10px;
	font-size: 12px;
	color: #363636;
	letter-spacing: 0em;
}


section.work .webpage{
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
	min-height: 200px;
	width: 85%;
	margin: 60px auto;
	background: #fff;
}

section.work.full-width .color-palette {
	width: 20%;
	height: 30px;
	float:left;
}

section.work ul{
	float: left;
	margin: 30px;
	width: 100%;	
}

section.work ul li{
	margin-bottom: 20px;
}

@media (max-width: 760px){
	
	
	.work-header {
		min-height: 280px;
		height: 280px;
		background-size: cover !important;
		background-position: top center !important;
		margin: 0px;
		padding: 80px 0px 70px 0px;
		transition: height 0.5s ease;
		width: 100%;
	}
	
	.work-header #page-title{
		font-size: 26px;
		line-height: 24px;
		padding: 50px;
		transition: padding 0.5s ease;
		transition: font-size 0.5s ease;
	}	
	
	.work-intro #work-desc,
	.work-intro #work-listing,
	section.work.full-width{
		width: 100%;
		float: left;
	}
	
	
	.work-intro #work-listing {
		float: right;
    	padding-left: 0;
	}
	
	.work-header #page-title h1 {
		font-size: 35px;
		line-height: 40px;
	}
	
	.work-header .award {
		position: absolute;
		top: 0px;
		left: 90px;
		width: 100;
		height: 100px;
	}	
	
	.work-intro #work-desc h3{
		font-size: 19px;
		line-height: 1.25em;
		margin-bottom: 20px;
	}

	.work-intro #work-listing {
		font-size: 20px;
	}
	
	
	.work-intro #work-listing ul li{
		font-size: 14px;
	}
	
	.home-intro#work-desc {
    width: 72%;
    font-size: 20px;
    line-height: 28px;
}

		
}

/*
///////////////////////////////////////////
//
//  ABOUT
//
///////////////////////////////////////////
*/

body.about,
body.page-template-about,
body.page-template-contact{
	background: #f4f3ef;
}

.content-header {
	background: none;
	color: #363636;
    height: 170px;
    margin: 0 auto;
    max-width: 1920px;
    min-height: 170px;
    position: relative;
    width: 100%;
}

.content-header #page-title {
	font-size: 55px;
	line-height:60px;
	margin: 0 auto;
	padding: 30px;
	text-align: center;
	width: 100%;
}

.content-header h1{
	text-shadow:none;
}


.two-col {
	width: 50%;
	float: left;
	padding: 0px 20px;
}

.two-col#about-me {
	width: 45%;
	float: left;
}

img#about-pic {
	float: left;
	width: 100%;
}

.two-col#about-me h2, h2{
    font-size: 18px;
	color: #bcaf8d;
    line-height: 26px;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-weight:400;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	margin-bottom: 10px;
}

.two-col#about-me p{
    font-size: 14px;
    line-height: 22px;
	font-family: 'Raleway', sans-serif;
	margin-bottom: 20px;
}

@media (max-width: 760px){
	
	.content-header {
	  min-height: 190px; 
	  height: 190px; 
	}
	
	.two-col {
		width: 100%;
		float: none;
		margin: 0 auto;
		padding: 0px;
		clear: both;
	}
	
	.two-col#about-me {
		width: 90%;
		float: none;
		margin: 0 auto;
		padding: 20px 0px;
	}
	
	.content-header #page-title {
	font-size: 55px;
	line-height:60px;
	margin: 0 auto;
	padding: 80px;
	text-align: center;
	width: 100%;
}



		
}


/*
///////////////////////////////////////////
//
//  CONTACT
//
///////////////////////////////////////////
*/


body.contact {
	background: #f4f3ef;
}

.ninja-forms-all-fields-wrap input,
.ninja-forms-all-fields-wrap label{
	width: 100%;
}

.ninja-forms-all-fields-wrap label{
	font-size: 18px;
	color: #bcaf8d;
    line-height: 26px;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	margin-bottom: 10px;
}

.ninja-forms-all-fields-wrap input {
	height: 50px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 2px solid #c8c8c8;
	background-color: transparent;
	background-image:url(images/contact-input.png) top left repeat;
	font-size: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-bottom: 20px;
	padding: 10px;
}

.ninja-forms-all-fields-wrap textarea#ninja_forms_field_3,
.ninja-forms-all-fields-wrap textarea#ninja_forms_field_18{
	height: 300px;
	float:left; 
	width: 100%;
	line-height: 50px;
	margin-bottom: 50px;
	background-color:transparent;
	resize:none;
	border:none;
	background:url(images/contact-input.png) top left repeat;
	font-size: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.ninja-forms-all-fields-wrap input[type=submit]{
	border: 2px solid #baac85;
	padding: 25px 0px;
	font-size: 18px;
	color: #bcaf8d;
    line-height: 20px;
	font-family:Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	height: 75px;
	cursor:pointer;
	cursor: hand;
	width:100%;
}


.ninja-forms-all-fields-wrap input::-webkit-input-placeholder,
.ninja-forms-all-fields-wrap textarea::-webkit-input-placeholder{
   font-family: Georgia, "Times New Roman", Times, serif;
   font-style: italic;    
   font-size: 16px;
   color: #706f6f;
}

.ninja-forms-all-fields-wrap input:-moz-placeholder,
.ninja-forms-all-fields-wrap textarea:-moz-placeholder{ /* Firefox 18- */
   font-family: Georgia, "Times New Roman", Times, serif;
   font-style: italic;    
   font-size: 16px;
   color: #706f6f;
}

.ninja-forms-all-fields-wrap input::-moz-placeholder,
.ninja-forms-all-fields-wrap textarea::-moz-placeholder{  /* Firefox 19+ */
   font-family: Georgia, "Times New Roman", Times, serif;
   font-style: italic;    
   font-size: 16px;
   color: #706f6f;
}

.ninja-forms-all-fields-wrap input:-ms-input-placeholder,
.ninja-forms-all-fields-wrap textarea:-ms-input-placeholder{  
   font-family: Georgia, "Times New Roman", Times, serif;
   font-style: italic;    
   font-size: 16px;
   color: #706f6f;
}
/*
#ninja_forms_field_1_div_wrap,
#ninja_forms_field_2_div_wrap,
#ninja_forms_field_6_div_wrap{
	width: 49%;
	float: left;
}

#ninja_forms_field_3_div_wrap{
	width: 49%;
	float: right;
}
*/
#nf_submit_1 {
	float: left;
	width: 100%;
}
.ninja-forms-required-items {display:none;}
.field-wrap,
.ninja-forms-response-msg{width: 600px;margin: 0 auto;margin-bottom: 30px !important;}

@media (max-width: 760px){

	#ninja_forms_field_1_div_wrap,
	#ninja_forms_field_2_div_wrap,
	#ninja_forms_field_3_div_wrap,
	#ninja_forms_field_5_div_wrap,
	#ninja_forms_field_6_div_wrap{
		width: 100%;
		float: left;
	}
	
	.ninja-forms-all-fields-wrap {
		width: 90%;
		float:none;
		margin: 0 auto;
	}
	
	
}

/*
///////////////////////////////////////////
//
//  FOOTER
//
///////////////////////////////////////////
*/

footer {
	background-color: #363636;
	float:left;
	height: 200px;
	margin-top: 100px;
	padding: 40px 0px;
	text-align:center !important;
	width: 100%;
	font-size: 14px;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

footer a {
	text-decoration: none;
    color: #baac85;
}

footer #social {
	clear:both;
	margin: 0 auto;
	margin-bottom: 30px;
	width:30%;
	text-align: center;
}


footer p{
	color: #e8e8e8;
	line-height: 30px;
	margin: 0px 0px 30px 0px;
	text-align:center;
	width:100%;
}

@media (max-width: 760px){
	
	footer {
		margin-top: 0px;
	}

}



/*
///////////////////////////////////////////
//
//  DRIBBBLE FEED
//
///////////////////////////////////////////
*/

.ballboy-container {
	text-align: center;
	float: left;
	width: 100%;
}

/** shot styles **/
.ballboy-shot {
	background-color: #ffffff;
	
	font-size: 15px;
	
	display: inline-block;
	margin: 10px;
	padding: 10px;
	height: 190px;
	width: 220px;
	vertical-align: top;
	overflow: hidden;
	
	position: relative;
}

.ballboy-shot-image {
	
}

.ballboy-shot-image img {
	width: 100%;
}

.ballboy-shot-image-description {
	background-color: #ffffff;
	opacity: 0;
	
	text-decoration: none;
	
	display: block;
	padding: 10px;
	height: 190px;
	width: 220px;
	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.ballboy-shot-image-description:hover {
	opacity: 1;
}

.ballboy-shot-image-description h3 {
	color: #777777;
	
	font-size: 1em;
	font-weight: 600;
	text-decoration: none;
	
	display: block;
	margin: 0 1em;
	margin-top: 4em;
}

.ballboy-shot-extras {
	color: #777777;
	
	font-size: 12px;
	font-weight: 400;
	text-align: right;
	
	display: block;
	margin: 0;
	padding: 0;
	
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
}

.ballboy-shot-rebound-marker {
	position: absolute;
	bottom: 0;
	left: 0;
}

.ballboy-shot-count,
.ballboy-shot-comment-count,
.ballboy-shot-like-count
{
	display: inline-block;
	margin-left: 10px;
	width: 40px;
}

.ballboy-shot-view-count:after {
	content: attr(data-view-count);
}

.ballboy-shot-comment-count:after {
	content: attr(data-comment-count);
}

.ballboy-shot-like-count:after {
	content: attr(data-like-count);
}
/** end of shot styles **/



/** pagination styles **/
.ballboy-pagination {
	text-align: center;
	
	display: block;
	margin: 2em 0;
}

.ballboy-pagination-previous {
	color: #999999;
	
	cursor: pointer;
	
	font-size: 1.2em;
	font-weight: 300;
	text-decoration: none;
	
	display: inline-block;
	margin: 0;
	margin-right: 1em;
	padding: .25em .5em;
	vertical-align: middle;
	
	-webkit-transition: color 0.15s ease-in-out;
	-moz-transition: color 0.15s ease-in-out;
	-ms-transition: color 0.15s ease-in-out;
	-o-transition: color 0.15s ease-in-out;
	transition: color 0.15s ease-in-out;
}

.ballboy-pagination-previous:hover {
	color: #333333;
}

.ballboy-pagination-page {
	border: 1px solid #cccccc;
	border-radius: 50%;
	color: #aaaaaa;
	
	cursor: pointer;
	
	font-size: 1em;
	line-height: 1.5;
	text-align: center;
	
	display: inline-block;
	margin: 0 .5em;
	padding: .25em;
	height: 1.5em;
	width: 1.5em;
	vertical-align: middle;
	
	-webkit-transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
	-moz-transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
	-ms-transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
	-o-transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
	transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.ballboy-pagination-page:hover {
	border-color: #777777;
	color: #333333;
}

.ballboy-pagination-current {
	border-color: #777777;
	color: #333333;
}

.ballboy-pagination-next {
	color: #999999;
	
	cursor: pointer;
	
	font-size: 1.2em;
	font-weight: 300;
	text-decoration: none;
	
	display: inline-block;
	margin: 0;
	margin-left: 1em;
	padding: .25em .5em;
	vertical-align: middle;
	
	-webkit-transition: color 0.15s ease-in-out;
	-moz-transition: color 0.15s ease-in-out;
	-ms-transition: color 0.15s ease-in-out;
	-o-transition: color 0.15s ease-in-out;
	transition: color 0.15s ease-in-out;
}

.ballboy-pagination-next:hover {
	color: #333333;
}
/** end of pagination styles **/