/*
 Theme Name: TS
 Description: Tess Studios
 Author: Teri Carignan
 
 Version: 1.0 
 */

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

/* Colors
Pink: #FF7676  255,118,118
Dark pink: #E05151 224 81 81
Blue: #7CC2E8 124,194,232
Gray: #5B6565  91,101,101
*/


/* GENERAL */
#main.section{margin-bottom: 0;}

.flex {
	display: -webkit-flexbox;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
	-webkit-align-items: center;
	align-items: center; /* Centers vertically */
	-webkit-justify-content: center;
	justify-content: center; /* Centers horizontally */
	}

/*HOME PAGE */
*{
	margin: 0; 
	padding: 0; 	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}

.row{
	display: table-row;
}

.cell{
	display: table-cell; 
	padding: 2%; 
	vertical-align: middle;
}
header .cell{
	vertical-align: top;
}

.fixed{
	position: fixed; 
	width: 15%;
}

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:left;
     z-index: 1000;
     background: rgba(0,0,0,0.9);
}

#overlay #overlaycontent {
     width:40%;
     margin: 10% auto;
     background-color: #fff;
     border:1px solid #000;
     padding:2%;
     /*text-align:center;*/
     position: relative;
     display: table;
     max-width: 600px;
}

#signup_email{border: 1px solid #ff7676; height: 40px; width: 100%; font-size: 120%; color: #ff7676; padding: 1%;}
#webform_submit_button{height: 40px; width: 100%; font-size: 120%; background: #ff7676; padding: 1%; color: white; margin: 5% auto; cursor: pointer; border: none;}
#overlay .mimi_field{width: 100%; display: inline-block; }

.br{display: block;}

#overlay #overlaycontent img{float: left; width: 30%;}
#overlay #overlaycontent #formcontent{width: 68%; float: left; margin-left: 2%;}

#overlay #overlaycontent:after{clear: both;}

#overlay #overlaycontent.button{margin: 5% auto; border: 1px solid #ff7676; padding: 1%;}

#overlay #overlaycontent p{color: #ff7676;}

#offerbuttonclose{
	position: absolute;
	top: -5px;
	right: -5px;
	width: 20px;
	height: 20px;
	background: white;
	color: #ff7676;
	border-radius: 50%;
	border: solid 1px #ff7676;
	text-align: center;
}

#offerbuttonclose i{margin: 0; padding: 0;}

#offercontent{}

#offerbutton .button:hover
{
    background-color: #ff7676;
    color: #fefefe;
}

#offerbutton .button:hover span{color: #fefefe;}


/* Body */
body {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	}

body, html {
	height: 100%;
	}

#homepage {
	/*background: url(../img/hp-background.jpg) top right no-repeat;
	background-size: 100%;*/
	/*background: rgba(0, 0, 0, 0) url("../img/hp-background.jpg") no-repeat scroll right top / cover ;*/
	} 
	
/* Ensures full height on nav bar */
.table {
	display: table;
	height: 100%;
	/*border: solid 4px red;*/
	width: 100%;
	}

.table-row {
	display: table-row;
	height: 100%;
	}
			
.table-cell {
	display: table-cell;
	}
	
/* Typography */
a {
	color: #FF7676;
	font-weight: 400;
	text-decoration: none;
	outline: 0;
	}

a.read-more, #searchsubmit, #s {
    border: thin solid #ff7676;
    color: #ff7676;
    display: inline-block;
    font-size: 90%;
    padding: 1% 3%;
    text-transform: uppercase;
    background: transparent;
}

.blog #s{width: 67%; float: left; margin-right: 3%;}
.blog #searchsubmit{width: 30%; float: left;}
.blog #s{text-transform: none;}

a.read-more{margin-top: 2%;}

#searchsubmit{padding-top: .75%; padding-bottom: .75%;}
#searchsubmit:hover{cursor: pointer;}

a.read-more:hover, #searchsubmit:hover {
    background-color: #ff7676;
    color: #fefefe;
}

blockquote, blockquote p {
	color: #FF9191;
	font-family: 'Playfair Display', serif;
	font-size: 200%;
	font-weight: 300;
	line-height: 110%;
	margin: 0;
	}
	
	blockquote+p,
	blockquote+h2,
	blockquote+h3,
	ul+p,
	ul+h2,
	ul+h3 {
		padding-top: 20px;
		}

h1{
	color: #FF7676;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 350%;
	letter-spacing: 1px;
	line-height: 100%;
	margin: 20px 0 0 0;
	}
					
h2 {
	color: #FF7676;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 200%;
	letter-spacing: 1px;
	line-height: 120%;
	margin: 0;
	padding: 0 0 10px 0;
	}
	
	h2.border-top {
		border-top: 1px solid #FF7676;
		padding-top: 20px;
		}

.widget{margin-bottom: 5%;}

.widget h2{    
	color: #ff7676;
    font-family: "Playfair Display",serif;
    font-size: 130%;
    font-weight: 700;
    line-height: 125%;
    margin: 0;
    padding: 0;
    padding-top: 5%;
}

.widget li {
	font-size: 100%;
	padding: 10px 0;
	}

	#recent-posts-3 li {color: #ff7676;}
	
.widget li a {
	font-weight: 300;
	}

#searchform label{display: none;}

h3 {
	color: #FF7676;
	font-family: 'Playfair Display', serif;	
	font-size: 150%;
	font-weight: 700;
	line-height: 125%;
	margin: 0;
	padding: 0;
	}

h4 {
    color: #ff7676;
    font-family: "Playfair Display",serif;
    font-size: 110%;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 125%;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

li {	
	font-family: 'Lato', sans-serif;
	font-size: 125%;
	font-weight: 300;
	margin: 0;
	padding: 0 0 10px 0;
}

.secondarypage li{color: #637373; list-style-position: inside;}

p {
	color: #637373;
	font-family: 'Lato', sans-serif;
	font-size: 120%;
	font-weight: 300;
	line-height: 135%;
	margin: 0;
	padding: 0 0 20px 0;
	}
	
	p:last-of-type {
		padding-bottom: 0;
		}
	
	p:last-of-type+div#offer {
		margin-top: 20px;
		}

p.date {
    font-size: 100%;
    font-style: italic;
}

p.figcaption {
	font-family: 'Lato', sans-serif;
	font-size: 100%;
	font-style: italic;
	text-align: center;
	}

strong {
	font-weight: 700;
	}

/* Home page */
/*#homepage nav {*/

#mobilelogo{display: none;}
#mobilelogohome{display: none;}

#mobilenav-icon {display: none;
}

#mobilenav-icon{
  width: 60px;
  height: 45px;
  position: relative;
  /*margin: 0px auto;*/
  float: right;
  margin-right: 5%;
  top: 65px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#mobilenav-icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #ff7676;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#mobilenav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobilenav-icon span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobilenav-icon span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobilenav-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#mobilenav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#mobilenav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}



nav {
	width: 15%;
	vertical-align: top;
	/*position: fixed;*/
	/*float: left;*/
	}

nav.span_2_of_12{width: 15%;}

nav #social{position: fixed;bottom: 2%; width: 15%; }
#social_icons{text-align: center;}
#social_icons li{display: inline-block; padding-right: 5%; padding-bottom: 2%; padding-top: 2%;}
#social_icons li a:hover{color: #ffc8c8;}
#social_icons li a:hover:before{content: "";}

#homepage div.span_10_of_12 {
	width: 85%;
	/*float: right;*/
	/*border: 4px solid green;*/
	/*background: rgba(0, 0, 0, 0) url("../img/hp-background.jpg") no-repeat scroll right top;*/
	background: rgba(0, 0, 0, 0) url("img/hp-background.jpg") no-repeat fixed right top / cover ;
	}

#homepage div.span_6_of_12,
#homepage header.span_6_of_12 {
	width: 50%;
	border: none;
	}

#homepage header {
	background-color: #FFF;
	/*padding: 20px 25px 25px 25px;*/
	}
	
#homepage .col {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	}

#homepage h1 {
	font-size: 500%;
	line-height: 95%;
	margin: 2%;
	}
	
	#homepage h1 span {
		display: block;
		}
		
#homepage p {
	color: #FFF;
	font-size: 125%;
	font-weight: 300;
	}
		
#homepage p.tagline {	
	color: #FF7676;
	font-weight: 300;
	font-size: 160%;
	line-height: 125%;
	margin: 0 20px;
	}

#homepage #offer {
	background-color: #FFF;
	border: none;
	height: 100%;
	margin: 0;
	padding: 1%;
	}

#right {
	float: right;
	background-color: #FF7676;
	/*padding: 25px;*/
	}
	
	#right div.cell {
		padding: 3%;
		}
		
		#right div.cell p:last-child{
			padding-bottom: 0;
			}

/* Header */
.secondarypage header,
.customize-support header {
	border-bottom: thin solid #FF7676;
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	}		
	
	.secondarypage h1 {
		padding-right: 20px;
		}

	.secondarypage .secondarytag {    
		color: #637373;
	    font-family: 'Lato', sans-serif;
	    font-size: 180%;
	    font-weight: 300;
	    margin: 5px 0;
	    padding: 0;
	}

/* Nav */
nav {
	background-color: #FF7676;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	padding: 20px 0;
	}
	
	nav figure {
		margin-bottom: 20px;
		}
	
	nav.col {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
		}
		
		.secondarypage nav ul {
			padding-top: 20px;
			}
		
		nav ul li {
			padding-bottom: 10px;
			font-size: 125%;
			}
			
			nav ul li a {
				color: #FFF;
				text-decoration: none;
				font-weight: 300;
				cursor: pointer;
				}
			
			nav ul li a:hover,
			nav ul li a:active {
				font-weight: 400;
				}
			
			nav ul li a:hover:before,
			.current-menu-item:before {
				content: " :: "; color: #fff;
				}

	nav .sub-menu{display: none; /*background: #ff9191;*/ /*#ffadad;*/}
	nav .sub-menu a{font-size: 70%;}
	nav .openmenu > a{font-weight: bold;}
	nav .sub-menu{ padding: 3%;}
	nav .sub-menu li{}


nav .menu .menu-item-has-children.openmenu .sub-menu{display: block; background: #ff9191; margin-top: 10px;}
nav .openmenu{position: relative;}
nav .menu .menu-item-has-children{position: relative;}

nav .menu .menu-item-has-children a:after{
	font-family: FontAwesome;
    content: "\f055";
    padding-left: 3%;
}

nav .menu .menu-item-has-children.openmenu:after{}

nav .menu .menu-item-has-children.openmenu a:after{
	border: none;

}

nav .menu .menu-item-has-children.openmenu > a:after{
	font-family: FontAwesome;
    content: "\f056";
    padding-left: 3%;
}
 
.menu .menu-item-has-children .sub-menu a:after{content: '';}

	.secondarypage nav .sub-menu{padding-top: 0;}

		.current-menu-item:hover:before{content: "";}
		
		.fa {
			padding-right: 4px;
			}
		
/* Offer  */
#offer	{
	border: 1px solid #FF7676;
	padding: 10px;
	margin-bottom: 20px;
	}
	
	#offer p {
		color: #637373;
		font-size: 120%;
		padding: 5px 0 20px 0;
		}
	
	#offer p.small {
		font-size: small;
		margin: 20px 0 0 0;
		padding: 0;
		}

.offer embed{width: 100%;}
							
div.button {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: thin solid #FF7676;
	/* Flexbox settings */
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	/* End flexbox settings */
	margin: 0;
	}
	
	div.button span {
		color: #FF7676; 
		display: inline-block;
		font-weight: bold;
		letter-spacing: 1px;
		padding: 10px;
		text-align: center;
		}

/* SERVICES PAGES */
div.column {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-columns: 2;
	-webkit-columns: 2;
	columns:  2;
	-moz-column-gap: 40px;
	-webkit-column-gap: 40px;
	column-gap: 40px;
	}

#service-right-col.outercol{padding: 0; width: 100%}
#service-footer.outercol{padding: 0; width: 100%}
.service_container header{margin: 1% 1% 1% 2.5%; padding-right: 20px;}

.service_container footer{margin: 1% 1% 1% 2.5%; padding-right: 20px; width: auto;}
.section_container{}
.outercol{    
	display: block;
    float: left;
    margin: 0;
	padding: 1% 0;
}

.outercol h2{border-bottom: solid 1px #ff7676; margin-bottom: 2%;}

.outercol .col{margin: 1% 1% 1% 2.5%; padding-right: 20px;}
.outercol .span_6_of_12{float: left;}
.span_6_of_12.right-col{margin-left: 2.5%;}

.package_container, .process_container, .projects_container {
	width: 100%; 
	background-image: url('img/stripe_thin_c8.png'); 
	background-repeat: repeat;
	}
	
.process_container a {color: #ff7676;}

#service-container p img{width: 100%; height: auto;}
#service-container li {font-size: 120%;}

.twocol{float: left;}
.floatright{float: right;}

.service_container div.span_6_of_12 p img{width: 100%; height: auto;}

footer{width: 100%;}

/* blog post */
.bloghome, 
.blogsingle
	{padding-right: 20px;}

li.widget, 
.cat-item
	{list-style: none;}

.cat-item a {padding-left: 5%; color: #FF7676; font-size: 90%; font-weight: 300;}

.blog #offer img, .single #offer img{width: 35%;}
.blog-post .wp-post-image{
	    float: left;
    	padding: 0 2% 2% 0;
		}

.blog-post .size-full{width: 100%; height: auto;}

.blog-post h2 a {
	color: #FF7676;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 120%;
	margin: 0;
	padding: 0 0 10px 0;
	}

.blog-post:first-of-type { 
    margin: 0;
}

.blog-post {
	display: table;
    margin: 5% 0 0;
}

.blog-post:after{clear: both;}

/* #categories-3 ul {
	float: left; 
	}

#categories-3 ul li {
	float: left;
	padding: 0 5px;
	}
	
	#categories-3 ul li a:after {
		content: " | ";
		}*/

.page::before, .page::after {
    content: " :: ";
}
.page::before, .page::after {
    content: " :: ";
}

p.page {
	padding: 5% 0;
    /*float: right;*/
}

#postnext_nav, #postnext_nav a, #postprev_nav a, #postprev_nav{
    color: #ffadad;
    font-weight: 400;
    display: inline-block;
}

#postprev_nav{float: left;}
#postnext_nav{float: right;}

.left{text-align: left;}

/* BLOG SINGLE */
#related-posts {
    border-top: thin solid #ff7676;
    margin: 20px 0 0;
}

#related-posts .col:first-of-type{margin-left: 0px;}

#related-posts h3 {
    margin: 5px 0 20px;
}

/* CONTACT */

.contact .col{margin: 0; padding: 1% 0 1% 2.5%; }
.contact .span_9_of_12, .contact .span_3_of_12{float: left;}
.contact .span_3_of_12 a{color: #637373;}
.contact #captcha{height: 100%; width: auto; display: inline-block; border: none;}
/*.contact .captcha-701{display: inline-block; float: left;}*/
/*.contact .wpcf7-captchar{float: left; display: inline-block;}*/
textarea.wpcf7-form-control {
    border: thin solid #ff7676;
    height: 150px;
    margin-top: 10px;
    width: 90%;
}

.wpcf7-form-control {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    /*border-color: -moz-use-text-color -moz-use-text-color #ff7676;*/
    border-color: #ff7676;
    border-image: none;
    border-style: none none solid;
    border-width: medium medium thin;
    display: block;
    font-family: Lato,sans serif;
    font-size: 110%;
    font-weight: 300;
    margin: 0;
    padding: 0;
    width: 90%;
    -webkit-appearance: none;
    border-radius: 0;
}

.wpcf7-form p{
    color: #ff7676;
    display: block;
    font-family: "Playfair Display",serif;
    font-size: 100%;
    letter-spacing: 0.5px;
    margin: 20px 0 10px;
}

.wpcf7-form input[type="submit"] {
    background-color: #ff7676;
    border: medium none;
    color: #fefefe;
    display: block;
    font-family: "Lato",sans serif;
    font-size: 100%;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 20px 0;
    padding: 5px 0;
    text-transform: uppercase;
    width: 90.5%;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 0;
}

/* 404 */
#error-404 h2{padding-bottom: 3%;}
#error-404 h3{padding-bottom: 2%;}
#error-404 #offer{margin-top: 3%;}
/* Footer */
footer .fa {
	padding-left: 8px;
	}

footer p{display: inline-block;}
footer p:first-of-type{float: left;}
footer p{float: right;}
footer span:before, footer span:after{content: '\00a0\00a0\00a0';}

/* Images */
figure {
	margin: 0;
	padding: 0;
	}

img {
	max-width: 100%;
	}

.left-float {
	float: left;
	padding: 0 20px 0 0;
	}

/*.secondarypage .logo {
	width: 75px; 
	height: 75px;
	margin-top: 10px;
	} */
	
/* IDs */
#right-col {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 20px;
	}

/* General classes */
.border {
	border: thin solid #FF7676;
	padding: 1px;
	}

.border-top {
	border-top: thin solid #FF7676;
	padding-top: 10px;
	}

.box {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

.center {
	text-align: center;
	}

.pink {
	background-color: #FF7676;
	color: #fefefe;
	}
	
.right {
	text-align: right;
	}

.small {
	font-size: small;
	}

/* grid override */
.span_10_of_12 {width: 85%;}

/* Portfolio */
.crop img{ height: auto; width: 100%;}

.crop {
	border: thin solid rgba(0,0,0,0.1);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*height: 300px;*/
	max-height: 300px;
	overflow: hidden; 
	}
.our-work .pull {
	left: -48.75%; 
	position: relative; 
	margin-left: 0px; 
	}
	
.our-work .push {
	left: 51.5%; 
	position: relative; 
	}

.our-work h2 {
	border-top: thin solid #FF7676;
	padding-top: 10px;
	}

.our-work .sweetlife h2{border-top: none;}
	
/*  MEDIA QUERIES  */
    @media only screen and (max-width: 1280px){
	    #homepage h1{font-size: 450%;}
	 	#homepage p.tagline{font-size: 150%;}
	 	#homepage p{font-size: 115%;}
	 	h3{font-size: 120%}   
	 	#offer p{font-size: 107%;}
	 	.blog #offer img, .single #offer img{width: 50%;}
 	}

 	@media only screen and (max-width: 1189px){
 		.blog #searchsubmit {font-size: 80%; padding-bottom: 1.25%; padding-top: 1.25%;}
 	}

 	@media only screen and (max-width: 1100px){
	    #homepage h1{font-size: 420%;}
	 	#homepage p.tagline{font-size: 140%;}
	 	#homepage p{font-size: 110%;}
	 	/*h3{font-size: 120%}   */
	 	#offer p{font-size: 100%;}
	 	#overlay #overlaycontent{width: 50%;}
	 	.blog #searchsubmit {font-size: 75%; }
 	}

  	@media only screen and (max-width: 1060px){
 		.blog #searchsubmit {font-size: 65%; padding-bottom: 1.7%; padding-top: 1.7%;}
 	}

  	@media only screen and (max-width: 1024px){
	    #homepage h1{font-size: 400%;}
	 	#homepage p.tagline{font-size: 130%;}
	 	/*#homepage p{font-size: 110%;}*/
	 	h3{font-size: 110%}   
	 	#offer p{font-size: 93%;}
	 	#offerbutton{position: relative; bottom: -10px;}
 	}

  	@media only screen and (max-width: 1024px){
	 	#homepage #offer{padding: 1%;}
	 	blockquote, blockquote p{font-size: 185%;}
 	}

 	@media only screen and (max-width: 980px){
 		blockquote, blockquote p{font-size: 180%;}
 		.blog-post .wp-post-image{height: 200px; width: 200px;}
 		#offerbutton{bottom: 0;}
 		.flex{display: block;}
 		/*#service-container [class=_container]+div.flex{width: 100%;}*/
 		#service-container div.flex div{width: 100%;}
 		.flex div:nth-child(2){}
 		/*.blog #offer img, .single #offer img{width: 60%;}*/
 	}

   	@media only screen and (max-width: 900px){
	    #homepage h1{font-size: 350%;}
	    #homepage p.tagline{font-size: 120%;}
	    nav.span_2_of_12, .fixed{width: 20%;}
	 	h3{font-size: 100%}   
	 	#offer p{font-size: 90%;}
	 	#offerbutton{position: relative; bottom: 0px;}
	 	.blog #searchsubmit {font-size: 60%; padding-bottom: 2%; padding-top: 2%;}

 	}

   	@media only screen and (max-width: 876px){
	 	.blog #searchsubmit {font-size: 55%; padding-bottom: 2.5%; padding-top: 2.5%;}

 	}

   	@media only screen and (max-width: 850px){
	 	.blog #searchsubmit {font-size: 55%; padding-bottom: 2.5%; padding-top: 2.5%;}

 	}

   	@media only screen and (max-width: 800px){
   		#homepage h1{font-size: 340%;}
   		blockquote, blockquote p{font-size: 170%;}

	 	#offerbutton{bottom: -10px;}
	 	#homepage p.tagline{font-size: 100%;}
	 	#overlay #overlaycontent{width: 60%;}
	 	.secondarypage #offerbutton{bottom: 0px;}
	 	.contact .span_3_of_12 a, .contact .span_3_of_12 i{font-size: 85%;}
	 	.contact .span_9_of_12{width: 65.37%;}
	 	.contact .span_3_of_12{width: 32.12%;}
 	}

   	@media only screen and (max-width: 768px){
   		#homepage h1{font-size: 320%;}
   		.blogsingle .span_8_of_12, .blogsingle .span_4_of_12, .bloghome .span_8_of_12, .bloghome .span_4_of_12{ width: 100%;}
   		.blogsingle #right-col.col, .bloghome #right-col.col {margin: 1% 0 1% 0;}
   		.blog #searchsubmit{font-size: 90%; padding-top: 1%; padding-bottom: 1%;}
   		.blog #offer img, .single #offer img{width: 35%;}
 	}

 	@media only screen and (max-width: 700px){
 		/*mobile nav*/
 		#homepage nav, .secondarypage nav{width: 100%; height: auto; position: fixed; }
 		#mobilenav-icon span{height: 5px;}
 		#mobilenav-icon{width: 45px;}
		#mobilenav-icon span:nth-child(2){top: 10px;}
		#mobilenav-icon span:nth-child(3){top: 20px;}
		#mobilenav-icon.open span:nth-child(3){top: 30px;}
		.secondarypage nav{background: #ff7676; z-index: 100;}
		.secondarypage #mobilenav-icon span{background: #fff;}

		/*home header*/
		#homepage .row{display: table;}

		/*social icons*/
		#social_icons{padding-top: 0px; height: 20px; text-align: right;}
		#social_icons li:last-of-type a i{padding-right: 0px;}
		nav #social{position: fixed; right: 5%; height: 20px; top: 10px; width: 20%;}
		.secondarypage #social_icons a{color: #fff;}
		
		/*LOGO*/
		.secondarypage #desktoplogo{display: none;}
		.secondarypage #mobilelogo{display: inline-block;}
		/*.secondarypage .logo {height: 90px; width: 375px;}*/
		nav figure a img {height: 90px; width: auto;}
		#homepage #mobilelogo{display: none;}
		#homepage #mobilelogohome{display: inline;}
		#homepage #desktoplogo{display: none;}
 		nav figure.center{padding-top: 3%;}

 		/*grid*/
 		.span_10_of_12{width: 100%;}

 		/*h1*/
 		#homepage h1{display: none;}
 		#homepage .tagline{display: none;}
 		h1{font-size: 300%;}
 		h3{font-size: 120%;}

 		/*tagline*/
 		.secondarypage .secondarytag{font-size: 160%;}

 		.menu-header-menu-container{background: #fff; border: 1px solid #ff7676;   position: absolute;  right: -100%;  top: 123px; width: 50%; text-align: center; z-index: 100;}
 		nav .fixed .center{text-align: left; float: left;}
 		#mobilenav-icon{display: inline-block;}
 		nav .menu .menu-item-has-children.openmenu .sub-menu{background: #ffe4e4;}
 		nav ul li a{color: #ff7676;}
 		/*nav ul li ul li a{color: #fff;}*/
 		nav ul{float: right; display: block;}
 		#homepage h1 span{display: inline-block;}
 		
 		.secondarypage #right-col.col{}
 		.secondarypage .span_6_of_12{width: 100%;}
 		.secondarypage blockquote, .secondarypage blockquote p{font-size: 155%;}
 		.table-cell{display: table;}
 		.fixed{width: 100%; position: relative;}
 		#homepage div.span_10_of_12{
 				width: 100%; /*padding-top: 100px;*/
 				background: rgba(0, 0, 0, 0) url("img/hp-bckgrnd-1400x600.jpg") no-repeat fixed right top / cover ;
 				padding-top: 340px; 
 				background-size: 100%; 
 				background-position: 0 100px;
 		}

 		#homepage div.span_6_of_12, #homepage header.span_6_of_12{width: 100%;}
 		#homepage .center{float: left;}
 		/*nav ul{display: none;}*/
 		nav figure{margin-bottom: 0;}
 		nav{padding: 1%; background: #fff;}
 		
 		nav ul{float: none;}
 		nav ul li a:hover::before, .current-menu-item::before{color: #ff7676;}

 		/*padding-top for main container*/
 		#service-container{padding-top: 119px;}
 		.secondarypage #right-col:first-of-type{padding-top: 119px;}
 		.bloghome, .blogsingle{padding-top: 119px; }

 		/*services*/
 		#service-container .twocol{padding-bottom: 3%;}
 		#service-container .span_6_of_12.right-col{margin-left: 0;}

 		/*portfolio*/
 		.our-work #right-col{padding-top: 50px;}
 		.our-work .crop{margin-left: 0;}
 		.our-work .pull{left: 0;  }
		.our-work .push{left: 0; }

		/*blog*/

		/*footer*/
		footer p{float: none; display: inline-block; text-align: center; display: block;}
		footer p:first-of-type{float: none;}

 	}

 	@media only screen and (max-width: 667px){
 		.menu-header-menu-container{top: 122px;}
 	}

 	@media only screen and (max-width: 640px){
 		#homepage div.span_6_of_12, #homepage header.span_6_of_12{width: 100%;}
 		#homepage h1 span{display: inline;}
 		/*nav*/
 		.menu-header-menu-container{top: 120px;}
 		h1{font-size: 280%;}
 		.secondarypage .secondarytag{font-size: 150%;}
 		.secondarypage blockquote, .secondarypage blockquote p{font-size: 145%;}
 		#homepage p{font-size: 110%;}
 		#homepage h3{font-size: 130%;}
 		/*nav img{width: 60%;}*/
 		#homepage p.tagline{font-size: 150%;}
 		#overlay #overlaycontent{width: 80%;}
 		.cell{padding: 3%;}
 		#homepage h1 span{display: block;}
 		#offerbutton{bottom: 10px;}
 		.contact .span_3_of_12, .contact .span_9_of_12{width: 100%;}
 		.blog-post .wp-post-image{height: 180px; width: 180px;}
 	}

 	@media only screen and (max-width: 568px){
 		.menu-header-menu-container{top: 117px;}
 		#homepage div.span_10_of_12{padding-top: 314px;}
 	}

 	@media only screen and (max-width: 500px){
 		h1{font-size: 240%;}
 		h2{font-size: 170%;}
 		.menu-header-menu-container{top: 124px;}
 		.secondarypage .secondarytag{font-size: 150%;}
 		.secondarypage blockquote, .secondarypage blockquote p{font-size: 145%;}
 		nav figure a img{width: 40%; height: auto;}
 		nav #social{width: 30%;}
 		#mobilenav-icon{top: -45px;}
 		nav figure.center{padding-top: 5%;}
 		#main.table{display: block;}
 		#homepage nav, .secondarypage nav{display: block; height: 130px;}
 		#homepage div.span_10_of_12{padding-top: 309px;}
 		.blog-post .wp-post-image{height: 150px; width: 150px;}
 	}

 	@media only screen and (max-width: 480px){
 		h1{font-size: 200%;}
 		h2{font-size: 150%;}
 		.secondarypage .secondarytag{font-size: 110%;}
 		.secondarypage blockquote, .secondarypage blockquote p{font-size: 135%;}
 		.secondarypage #right-col.col{margin-left: 2%;}
 		#homepage div.span_10_of_12{padding-top: 278px;}
 		.col.bloghome, .col.blogsingle{margin: 1% 0 1% 2%;}
 		.secondarypage .bloghome #right-col.col{margin-left: 0;}
 		.blog #searchsubmit {font-size: 80%; padding-top: 1%; padding-bottom: 1%;}
 		
 	}

 	@media only screen and (max-width: 414px){
 		/*h1{font-size: 215%;}*/
 		#homepage nav, .secondarypage nav{height: 120px;}
 		.menu-header-menu-container{top: 115px;}
 		nav figure.center{padding-top: 7%; }
 		nav figure a img{width: 40%;}
 		nav #social{width: 30%;}
 		#social_icons li{font-size: 100%;}
 		#homepage div.span_10_of_12{/*padding-top: 90px;*/ padding-top: 270px;}
 		#homepage nav, .secondarypage nav{height: 120px;}
 		/*.secondarypage blockquote, .secondarypage blockquote p{font-size: 145%;}*/
 		.blog-post .wp-post-image{height: 130px; width: 130px;}
 	}

 	@media only screen and (max-width: 400px){
 		#homepage div.span_10_of_12{padding-top: 254px;}
 		.blog-post .wp-post-image{height: 100px; width: 100px;}
 	}

 	@media only screen and (max-width: 360px){
 		h1{font-size: 200%;}
 		.menu-header-menu-container{top: 106px;}
 		#homepage nav, .secondarypage nav{height: 110px;}
 		#homepage div.span_10_of_12{/*padding-top: 80px;*/padding-top: 239px;}
 		#overlay #overlaycontent img{display: none;}
 		#overlay #overlaycontent, #overlay #overlaycontent #formcontent{width: 95%;}
 		.cell{padding: 5% 3%;}
 		.secondarypage blockquote, .secondarypage blockquote p{font-size: 135%;}
 	}

  	@media only screen and (max-width: 320px){
  		h1{font-size: 180%;}
  		h2{font-size: 140%;}
  		.secondarypage blockquote, .secondarypage blockquote p{font-size: 125%;}
		nav figure.center{padding-top: 10%;}
		nav figure a img{width: 40%;}
		#homepage div.span_10_of_12{padding-top: 236px;}
 	}