/*
Theme Name: Natalie James
Theme URI: byandlarge.studio
Author: Studio By and Large
Author URI: https://byandlarge.studio
Description: 
License: 
License URI: 
Text Domain: 
Tags: 
*/

@font-face {
    font-family: 'CircularStd-Medium';
    src: url('/wp-content/themes/nataliejames/fonts/CircularStd-Medium.eot');
    src: url('/wp-content/themes/nataliejames/fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/nataliejames/fonts/CircularStd-Medium.woff') format('woff'),
         url('/wp-content/themes/nataliejames/fonts/CircularStd-Medium.ttf') format('truetype'),
         url('/wp-content/themes/nataliejames/fonts/CircularStd-Medium.svg#CircularStd-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CircularStd-Book';
    src: url('/wp-content/themes/nataliejames/fonts/CircularStd-Book.eot');
    src: url('/wp-content/themes/nataliejames/fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/nataliejames/fonts/CircularStd-Book.woff') format('woff'),
         url('/wp-content/themes/nataliejames/fonts/CircularStd-Book.ttf') format('truetype'),
         url('/wp-content/themes/nataliejames/fonts/CircularStd-Book.svg#CircularStd-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BebasNeueBold';
    src: url('/wp-content/themes/nataliejames/fonts/BebasNeueBold.eot');
    src: url('/wp-content/themes/nataliejames/fonts/BebasNeueBold.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/nataliejames/fonts/BebasNeueBold.woff') format('woff'),
         url('/wp-content/themes/nataliejames/fonts/BebasNeueBold.ttf') format('truetype'),
         url('/wp-content/themes/nataliejames/fonts/BebasNeueBold.svg#BebasNeueBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/**
 * 1.0 - Reset
 *
 * Resetting and rebuilding styles have been helped along thanks to the fine work of
 * Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
 * along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 * and Blueprint http://www.blueprintcss.org/
 */




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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	 text-rendering: optimizeLegibility;
	 -moz-osx-font-smoothing: grayscale;
}





*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

body {
	width: 100%;
	height: 100%;
}



ol,
ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}



blockquote,
q {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
}


a:hover,
a:active {
	outline: 0;
}

a img {
	border: 0;
}

a{
	color: inherit;
	text-decoration: none;
}

img{
	width: 100%;
	height: 100%;
}

.error-404 {
  margin: 100px;
  text-align: center;
}




/*
=======================================
Typography
=======================================
 */


h1{
	font-family: "BebasNeueBold",sans-serif;
	font-weight: normal;
	font-size: 1em;
}

/*h2{
	font-family: "aktiv-grotesk-std",sans-serif;
	font-style: normal;
	font-weight: 300;
}*/

h2{
font-family: "CircularStd-Book",sans-serif;
	font-style: normal;
font-weight: normal;
	font-size: 1em;
	}

h3{
	font-family: "CircularStd-Medium",sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 1em;
}

h4{
	font-family: "CircularStd-Book",sans-serif;
	font-weight: normal;
	font-size: 1em;
	font-style: normal;
	font-size: .85em;
}

h5{
	font-family: "CircularStd-Medium",sans-serif;
	font-style: normal;
	letter-spacing: 0.01em;
		font-weight: normal;
}

strong{
	font-family: "CircularStd-Medium",sans-serif;
	font-weight: normal;
}


/*
==============================================================================
Menu
==============================================================================
 */

.nav-wrapper{
	position: fixed;
	height: 92px;
	width: 100%;
	top: 0;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.98);
}

.nav-wrapper-home{
	position: fixed;
	height: 70px;
	width: 100%;
	top: 0;
	z-index: 10;
	background-color: rgba(249, 244, 167, .0);
}

.nav-wrapper-project-page{
	position: fixed;
	margin-top: 0px;
	height: 100px;
	background-color: #fff;
	width: 100%;
}

.nav-inner{
	padding-top: 4px;
	width: 100%;
	height: 100%;
}


.nav-inner .left-title{
	float: left;
	width: 25%;
	  margin-top: -5px;
}

.left-title li{
	float: left;
	padding: 1.7em 1em 1em 1em;
}

.nav-inner .centered-nav{
	text-align: center;
	position: relative;
	height: 100%;
	width: 50%;
	display: inline-block;
	margin-top: 11px;
}

.centered-nav li{
	display: inline-block;
	padding: 1em 1em 1em 1em;
}




.centered-nav li a, .right-nav li a{
	color: #CACAD1;
	-webkit-transition: ease-in-out .2s;
	transition: ease-in-out .2s;
	text-transform: uppercase;
	font-size: .8em;
	letter-spacing: 0.09em;
}

.right-nav li a:hover{
	color: #494949;
}

.centered-nav li a:hover{
	color: #494949;
}

.nav-inner .right-nav{
	float: right;
	width: 25%;
	  display: inline-block;
}

.right-nav li{
	float: right;
	padding: 1em 1em 1em 1em;
}

.left-title .tag{
	float: left;
}

.left-title .logo{
	float: left;
	padding-left: 0px;
	color: #F8CC9A;
	line-height: .9em;
	font-size: 1.9em;
	letter-spacing: 0.18em;
}

.left-title .logo-home{
	float: left;
	padding-left: 0px;
	color: #F8CC9A;
	line-height: .9em;
	font-size: 1.9em;
	letter-spacing: 0.18em;
}


.centered-nav li a.active{color: #494949;;}

/*
==============================================================================
Home Page
==============================================================================
 */

.big-text-wrapper{
  width: 100%;
  height: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: fixed;
}

.big-text{
	font-size: 3.5em;
	letter-spacing: -0.02em;
	line-height: 1em;
	color: rgb(71, 71, 71);
	top: 50%;
	-moz-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	-o-transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	text-align: center;
	height: 200px;
	position: absolute;
	width: 100%;
}

.big-text a:hover{
	color: #fff;
}

.social-icons-contactpage{
	width: 100%;
	margin: 0% auto;
	text-align: center;
	margin-top: 30px;
}

.social-icons-contactpage ul li{
	width: 35px;
	display: inline-block;
}



.social-icons{
	position: absolute;
	width: 30%;
	bottom: 6px;
	margin: 0% auto;
	left: 15px;
	text-align: left;
}

.social-icons ul li{
	width: 35px;
	display: inline-block;
}


/*
==============================================================================
Projects page
==============================================================================
 */


.projects-wrapper{
	width: 100%;
	height: 100%;
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	float: left;
}


.project-summary{
	width: 33%;
	float: left;
	padding: 36px 30px 100px 30px;
}


.project-summary img{
	width: 100%;
	height: 100%;
  -webkit-transition: ease-in-out .4s;
  -moz-transition: ease-in-out .4s;
  -ms-transition: ease-in-out .4s;
  -o-transition: ease-in-out .4s;
  transition: ease-in-out .4s;
}

.project-summary img:hover{
	-webkit-filter: brightness(.6);
  filter: brightness(.6);
}

.secondary-nav-wrapper{  
	width: 100%;
	height: 74px;
	background-color: #fff;
	position: relative;
	margin-top: 92px;
	text-align: center;
	border-top: 2px solid #F9F9F9;
}




/*
==============================================================================
About page
==============================================================================
 */

.about-image{
	width: 50%;
	float: right;
}

.about-copy{
	width: 50%;
	float: left;
	padding-right: 20px;
	font-family: "CircularStd-Book",sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: .9em;
	line-height: 1.6em;
	color: #696969;
	letter-spacing: 0.013em;
}

.about-content{
	height: 100%;
	display: block;
	position: relative;
	float: left;
	padding-top: 50px;
	padding-bottom: 100px;

}

.secondary-info-section{
	float: left;
	position: relative;
	padding-bottom: 150px;
	width: 100%;

}

.page-content-wrapper{
	position: relative;
	width: 80%;
	margin: auto;
	display: block;
	padding-bottom: 100px;

}

.services-page{
	width: 50%;
	height: 100%;
	display: inline-block;
	float: left;
	padding-right: 20%;
	font-size: .9em;
}

.secondary-info-list li{
 font-family: "CircularStd-Book",sans-serif;
  font-style: normal;
  color: #8C8C8C;
  padding-bottom: 5px;

}

.project-wrapper .secondary-info-section ul li{
 font-family: "CircularStd-Book",sans-serif;
  font-style: normal;
  color: #8C8C8C;
  padding-bottom: 5px;
}

.project-wrapper .secondary-info-section ul li a{
	-webkit-transition: ease-in-out .4s;
	transition: ease-in-out .4s;
}

.project-wrapper .secondary-info-section ul li a:hover{
  color: #000;

}

.project-wrapper .secondary-info-section ul{
  padding-top: 10px;
}

/*
==============================================================================
Contact page
==============================================================================
 */
.contact-content{
	width: 100%;
	text-align: center;
	margin: 0% auto;
	padding-top: 100px;
}

.contact-copy{
	font-family: "CircularStd-Book",sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: .9em;
	line-height: 1.6em;
	color: #696969;
	letter-spacing: 0.013em;
}

/*
==============================================================================
Single project page
==============================================================================
 */

.post-copy-wrapper{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	font-size: .9em;
	font-weight: normal;
	line-height: 1.6em;
	font-family: "CircularStd-Book",sans-serif;
	font-style: normal;
	color: #696969;
	letter-spacing: 0.013em;
}

.post-content-wrapper .post-images img{
	padding-bottom: 50px;
}


/*
==============================================================================
General layout
==============================================================================
 */


.big-intro-text{
	text-align: center;
	padding: 2em;
	width: 70%;
	margin: 100px auto;
}

.section-title{
	font-size: .4em;
	color: #565656;
	width: 16%;
	margin: 0% auto;
	text-align: center;
	border-bottom: 2px solid #E0E0E0;
}

.view-all{
	color: #565656;
	margin: 0% auto;
	text-align: center;
}

.view-all-wrapper{

}

.page-wrapper{
	position: relative;
	width: 100%;
	height: 100%;
	background-color: rgb(254, 250, 244);
} 

.feature-image-wrapper{
	top: 0;
 	width: 100%;
	height: 100vh;
	position: absolute; 
}

.feature-image-inner{
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	position: fixed;
	left: 0;
	right: 0;
}


.feature-image-inner .background-image{
	background-image:url("images/Natalie_James_feature_03.webp");
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-size: cover;
	top: 0;
	background-position: center top;
	filter: brightness(.8);
}
				
.feature-projects-wrapper{
	width: 100%;
	position: relative;
	float: left;
	padding-left: 1em;
}



.entry-title{
	position: absolute;
	width: 100%;
	z-index: 1;
	bottom: 0;
	margin-bottom: -40px;
	color: #494949;
}

.entry-title a{
 	z-index: 2;
}

.entry-header{
	position: relative;
}



.post-title{

}

.project-wrapper{
	padding-top: 100px;
	padding-bottom: 200px;
}

.project-title{
	width: 100%;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 30px;
	color: #494949;
}

.post-content-wrapper{
	width: 80%;
	margin: 0% auto;
}

.post-content{
	width: 60%;
	margin: auto;
	font-size: 1.1em;
	line-height: 1.5em;
}

.post-images{
	width: 80%;
	margin: auto;
	padding-top: 100px;
}

/*
==============================================================================
Footer
==============================================================================
 */

.footer-wrapper{
	width: 100%;
	height: 100%;
	padding-bottom: 100px;
	padding-top: 60px;
	background-color: #EDEDED;
	float: left;
	padding-left: 8%;
}

.footer-inner{
  width: 100%;
  height: 200px;
}

.footer-inner .col-4{
	width: 25%;
	display: inline-block;
	padding: 20px;
	float: left;
}

.footer-inner .col-4 ul li{
	font-family: "CircularStd-Book",sans-serif;
	font-style: normal;
	font-size: .8em;
	line-height: 1.3em;
	color: #8C8C8C;
	padding-bottom: 5px;
}

.footer-inner .col-4 ul li.footer-list-title{
	color: #494949;
}



/**
 * 15.0 Media Queries
 */

/*
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

/**
 * 15.1 Mobile 
 */
@media (max-width: 767px){
	body,
	button,
	input,
	select,
	textarea {
		font-size: 16px;
	}
	body{
		min-height: 100% !important;
	}
	.nav-inner .centered-nav {
		width: 100%;
		display: block;
		float: left;
		padding-top: 0px;
		margin-top: -8px;
	}
	.nav-inner .left-title {
		margin-top: -5px;
		float: none;
		text-align: center;
		margin: 0% auto;
	}
	.nav-wrapper{
		position: relative;
	}

	.left-title .logo{
		
	}
	.left-title li{
		padding: 1em 1em 1em 1em;
	}
	.nav-inner {
	  padding-top: 2px;
	  width: 100%;
	  height: 50px;

	}
	.centered-nav li {
	  padding: .3em;
	}
	.right-nav li {
	  position: absolute;
	  top: 0;
	  right: 0;
	}
	.big-text {
		font-size: 2.5em;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		height: 50px;
	}

	.project-summary {
	  width: 100%;
	  float: left;
	  padding: 20px;
	  padding-bottom: 100px;
	}
	.post-copy-wrapper {
	  width: 100%;
	}
	.post-content-wrapper {
	  width: 80%;
	}
	.post-images {
	  width: 100%;
	  padding-top: 20px;
	}
	.footer-inner .col-4 {
	  width: 100%;
	}
	.footer-wrapper{
		padding-left: 4%;
	}
	.green-leaf-logo {
	  width: 60px;
	}
	.secondary-nav-wrapper {
		height: 100%;
		margin-top: 18px;
	}
	.about-copy {
	  width: 100%;
	}
	.about-image {
	  width: 100%;
	  padding-top: 50px;
	}
	.services-page {
	  width: 100%;
	  height: 100%;
	  display: inline-block;
	  float: left;
	  padding-right: 0%;
	  padding-bottom: 50px;
	   font-size: .9em;
	}
	.social-icons{	 
		width: 100%;
		text-align: center;
		margin-left: 0px;
		left: 0px;
		bottom: 30px;
	}
	.project-wrapper {
	  	padding-top: 30px;
	}
}

@media (min-width: 767px) and (max-width: 900px){

}


@media (min-width: 871px) and (max-width: 900px){

}

@media (min-width: 901px) and (max-width: 1100px){

}

/**
 * 15.1 Mobile Large 620px
 */

@media screen and (min-width: 38.75em) {



}


/**
 * 15.2 Tablet Small 740px
 */

@media (min-width: 730px) and (max-width: 767px){
	body,
	button,
	input,
	select,
	textarea {
		font-size: 16px;
	}
	
}



/**
 * 15.4 Desktop Small 955px
 */

@media screen and (min-width: 59.6875em) {
/*	body:before {
		
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: none;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}*/




	}

	body {
	font-size: 15px;
	}


/**
 * 15.5 Desktop Medium 1100px
 */

@media screen and (min-width: 68.75em) {
	body,
	button,
	input,
	select,
	textarea {
	font-size: 20px;
	}
}


/**
 * 15.6 Desktop Large 1240px
 */

@media screen and (min-width: 77.5em) {
	body,
	button,
	input,
	select,
	textarea {
	font-size: 20px;
	line-height: 1.4;
	}

	
}


/**
 * 15.7 Desktop X-Large 1403px
 */

@media screen and (min-width: 87.6875em) {

}


/**
 * 16.0 Print
 */

@media print {
	body {
		background: none !important; /* Brute force since user agents all print differently. */
		font-size: 11.25pt;
	}

	.secondary-toggle,
	.navigation,
	.page-links,
	.edit-link,
	#reply-title,
	.comment-form,
	.comment-edit-link,
	.comment-list .reply a,
	button,
	input,
	textarea,
	select {
		display: none;
	}

	.site-header,
	.site-footer,
	.hentry,
	.entry-footer,
	.page-header,
	.page-content,
	.comments-area {
		background: none !important; /* Make sure color schemes dont't affect to print */
	}

	body,
	blockquote,
	blockquote cite,
	blockquote small,
	label,
	a,
	.site-title a,
	.site-description,
	.post-title,
	.author-heading,
	.entry-footer,
	.entry-footer a,
	.taxonomy-description,
	.entry-caption,
	.comment-author,
	.comment-metadata,
	.comment-metadata a,
	.comment-notes,
	.comment-awaiting-moderation,
	.no-comments,
	.site-info,
	.site-info a,
	.wp-caption-text,
	.gallery-caption {
		color: #000 !important; /* Make sure color schemes don't affect to print */
	}

	pre,
	abbr[title],
	table,
	th,
	td,
	.site-header,
	.site-footer,
	.hentry + .hentry,
	.author-info,
	.page-header,
	.comments-area,
	.comment-list + .comment-respond,
	.comment-list article,
	.comment-list .pingback,
	.comment-list .trackback,
	.no-comments {
		border-color: #eaeaea !important; /* Make sure color schemes don't affect to print */
	}

	.site {
		margin: 0 7.6923%;
	}

	.site-branding {
		padding: 0;
	}

	.site-header {
		padding: 7.6923% 0;
	}

	.site-description {
		display: block;
	}

	.hentry + .hentry {
		margin-top: 7.6923%;
	}

	.hentry.has-post-thumbnail {
		padding-top: 7.6923%;
	}

	.sticky-post {
		background: #000 !important;
		color: #fff !important;
	}

	.entry-header,
	.entry-footer {
		padding: 0;
	}

	.entry-content,
	.entry-summary {
		padding: 0 0 7.6923%;
	}

	.post-thumbnail img {
		margin: 0;
	}

	.author-info {
		margin: 0;
	}

	.page-content {
		padding: 7.6923% 0 0;
	}

	.page-header {
		padding: 3.84615% 0;
	}

	.comments-area {
		border: 0;
		padding: 7.6923% 0 0;
	}

	.site-footer {
		margin-top: 7.6923%;
		padding: 3.84615% 0;
	}
}