/*
Theme Name: JSJ

*/

/*------- document defaults and classes -------*/




@font-face {
	font-family: Futura Book; 
	src: url('https://mccollumsoddjobs.com/wp-content/themes/JSJ/fonts/FuturaStd-Book.otf'); 
}
@font-face {
	font-family: Futura Condesned; 
	src: url('https://mccollumsoddjobs.com/wp-content/themes/JSJ/fonts/FuturaStd-Condensed.otf'); 
}
@font-face {
	font-family: Futura Condesned Liob; 
	src: url('https://mccollumsoddjobs.com/wp-content/themes/JSJ/fonts/FuturaStd-CondensedLightObl.otf'); 
}
@font-face {
	font-family: Futura Condesned Medium; 
	src: url('https://mccollumsoddjobs.com/wp-content/themes/JSJ/fonts/FuturaCon-Med.otf'); 
}
@font-face {
	font-family: Futura Medium; 
	src: url('https://mccollumsoddjobs.com/wp-content/themes/JSJ/fonts/Futura-Med.otf'); 
}
@font-face {
	font-family: Futura Demi; 
	src: url('https://mccollumsoddjobs.com/wp-content/themes/JSJ/fonts/Futura-Dem.otf'); 
}
@font-face {
	font-family: Futura Condensed Extb; 
	src: url('https://mccollumsoddjobs.com/wp-content/themes/JSJ/fonts/FuturaStd-CondensedExtraBd.otf'); 
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

body {
	margin: 0;
	padding: 0;
	color: #222;
	font-family: 'Futura Medium';
	font-size: 20px;
	line-height: 1.3em;
	letter-spacing: 0em;
	word-spacing: 0em;
	background: #FFF;
}

h1 {
	padding: 20px 0px 0px 0px;
	color: #8a291f;
	font-size: 30px;
	line-height: 1.2em;
}

h2 {
	margin: 14px 0px 14px 0px;
	color: #8a291f;
	font-size: 24px;
	line-height: 0;
}

p {
	margin: 9px 0px 9px 0px;
}

a { text-decoration: none; }
a:link { color: #8a291f; }
a:visited { color: #8a291f; }
a:hover { color: #4B6E38; }

.visible {
	display: inline;
}

.wpmc-nav-wrapper .button {
    background-color: #ff0000 !important;
}

div.wpcf7 {
	margin: 0 auto;
   /* text-align: center;*/
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"]
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid #a7a9ac;
	height: 30px;
    width: 100%;
    font-size: 18px;
    color: #333;
}

.wpcf7 textarea
{
	margin: 0px 0px -2px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid #a7a9ac;
	height: 120px;
    width: 100%;
    font-size: 18px;
    color: #333;
}

#maincontainer {
	width: 100%;
	background-color: #FFF;
}

#header {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	height: 230px;
}

#headercontent {
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	width: 100%;
	height: 188px;
}

#headerleft {
	width: 50%;
	float: left;
	text-align: left;
}

#headerleft img {
	margin: 34px 0px 0px 40px;
	width: 274px;
}

#headerright {
	width: 50%;
	height: 122px;
	font-family: 'Futura Condesned';
	color: #4B6E38;
	font-size: 22px;
	line-height: 1.1em;
	float: left;
	text-align: right;
}

#headerrighttext {
	padding: 122px 32px 0px 0px;
	width: 210px;
	float: right;
	font-family: 'Futura Condesned Liob';
}

.headerphone {
	margin: 6px 0px 0px 0px;
	display: inline-block;
	font-size: 23px;
	line-height: 1.2em;
	font-family: 'Futura Condensed Extb';
	color: #8a291f;
}

nav {
	height: 42px;
	width: 100%;
	float: left;
	font-family: 'Futura Demi';
	font-size: 15px;
	line-height: 1em;
	letter-spacing: .2em;
	word-spacing: 0em;
	position: relative;
	background-color: #423f3d;
	text-align: right;
}
nav ul {
	height: 28px;
	padding: 15px 14px 0px 0px;
	margin: 0 auto;
}
nav li {
	display: inline;
	float: right;
}
nav a {
	height: 14px;
	padding: 0px 16px 0px 16px;
	color: #FFF;
	display: inline-block;
	text-align: center;
	text-decoration: none;
}
nav li a {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border-left: 1px solid #FFF;
}
nav li:last-child a {
	border-left: 0px;
}
nav a:link, nav a:visited {
	color: #FFF;
}
nav a:hover, nav a:active {
	color: #8a291f;
}
nav a#pull {
	display: none;
}

#pageheadercontainer {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	float: left;
}

#pageheader {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 60px;
	width: 15%;
	float: left;
	text-align: left;
}

#pageheader h1 {
	margin: 30px 0px 22px 0px;
	font-family: 'Futura Condensed Extb';
	font-size: 52px;
	color: #8a291f;
	line-height: 1em;
	/*letter-spacing: 0em;
	word-spacing: 0em;*/
	text-align: right;
	text-wrap: none;
}

#content {
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	width: 80%;
	min-height: 400px;
	font-family: 'Futura Medium';
	font-size: 26px;
	color: #222;
	line-height: 1.4em;
	letter-spacing: 0em;
	word-spacing: 0em;
}

#contentservices {
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	width: 80%;
	/*min-height: 100px;*/
	font-family: 'Futura Medium';
	font-size: 26px;
	color: #222;
	line-height: 1.4em;
	letter-spacing: 0em;
	word-spacing: 0em;
}

#contentcontact {
	margin: 0 auto;
	padding: 40px 0px 40px 0px;
	width: 75%;
	min-height: 400px;
	font-family: 'Futura Book', sans-serif;
	font-size: 18px;
	color: #222;
	line-height: 1.4em;
	letter-spacing: 0em;
	word-spacing: 0em;
}

#pagepadding {
	padding: 0px 70px 60px 70px;
}

#footer {
	clear: all;
	margin: 0px;
	width: 100%;
	height: 260px;
	color: #d1d3d4;
	text-align: left;
	background-color: #423f3d;
	float: left;
}

#footercontent {
	margin: 0 auto;
	width: 94%;
	text-align: center;
}

#footerleft {
	margin: 0;
	padding: 0px 0px 0px 0px;
	width: 22%;
	font-family: 'Futura Demi';
	font-size: 12px;
	text-align: left;
	float: left;
}

#footercenter {
	margin: 0;
	padding: 20px 0px 0px 0px;
	width: 56%;
	font-family: 'Futura Condesned Medium';
	font-size: 14px;
	line-height: 1.32em;
	letter-spacing: .09em;
	word-spacing: .1em;
	text-align: center;
	float: left;
}

#footercenter img {
	margin: 0px 0px 22px 0px;
	width: 220px;
}

.tagline {
	display: inline-block;
	margin: 14px 0px 18px 0px;
	font-family: 'Futura Condesned Liob';
	font-size: 20px;
	letter-spacing: .02em;
	word-spacing: 0em;
	color: #d1d3d4;
}

#footerright {
	margin: 0;
	padding: 224px 0px 0px 0px;
	width: 22%;
	font-family: 'Futura Medium';
	font-size: 10px;
	text-align: right;
	float: left;
}

#footercenter a:link {
	margin: 0px 3px 0px 3px;
	font-family: 'Futura Demi';
	color: #d1d3d4;
	text-decoration: none;
}
#footercenter a:visited { 
	font-family: 'Futura Demi';
	color: #d1d3d4;
	text-decoration: none;
}
#footercenter a:hover {
	font-family: 'Futura Demi';
	color: #8a291f;
	text-decoration: none;
}

/* Home Page Styles */

#contenttopimage {
	margin: 6px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	background-image: url("images/home-photo.png");
	background-color: #423f3d;
	height: 500px; /* You must set a specified height */
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

#contenttopimage h3 {
	margin: 0px 0px 0px 0px;
	padding: 70px 0px 0px 60px;
	font-family: Futura Condensed Extb;
	color: #FFF;
	font-size: 50px;
	letter-spacing: 1.2px;
	line-height: 1.2em;
}

#homecontent {
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	width: 96%;
	min-height: 100px;
	font-family: 'Futura Medium';
	font-size: 26px;
	color: #222;
	line-height: 1.2em;
	letter-spacing: 0em;
	word-spacing: 0em;
	text-align: center;
}

#homepadding {
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	width: 80%;
	font-family: 'Futura Medium';
	font-size: 22px;
	color: #222;
	line-height: 1.3em;
	letter-spacing: 0em;
	word-spacing: 0em;
	text-align: left;
}

.ctabox {
	margin: 20px 2% 32px 2%;
	width: 29%;
	float: left;
	text-align: center;
}

.ctabox img {
	max-width: 100%;
	max-height: 100%;
	display: block; 
}



/*Styles for screen 1100px and lower*/
@media screen and (max-width: 1100px) {

}

/*Styles for screen 880px and lower*/
@media screen and (max-width: 880px) {
	#contenttopimage h3 {
		padding: 60px 0px 0px 50px;
		font-size: 44px;
	}
}

/*Styles for screen 800px and lower*/
@media screen and (max-width: 800px) {
	#contenttopimage {
		height: 500px;
	}
	#footerleft {
		width: 0%;
	}
	#footercenter {
	width: 70%;
	}
	#footerright {
		width: 30%;
	}
}

/*Styles for screen 700px and lower*/
@media screen and (max-width: 700px) {
	body {
		font-size: 16px;
	}
	h2 {
		font-size: 22px;
	}
	nav {
		font-size: 18px;
	}
	#content {
		width: 100%;
		min-height: 300px;
	}
	#pagepadding {
		padding: 0px 40px 30px 40px;
	}
	#contenttopimage h3 {
		padding: 50px 0px 0px 40px;
		font-size: 38px;
	}
	.ctabox {
		margin: 22px 2% 22px 2%;
		width: 29%;
	}
}

/*Styles for screen 600px and lower*/
@media only screen and (max-width : 600px) {
	#headerleft {
		width: 100%;
		text-align: center;
	}
	#headerleft img {
		margin: 20px 0px 0px 0px;
		width: 274px;
	}
	#headerright {
		width: 100%;
		text-align: center;
	}
	#headerrighttext {
		padding: 30px 0px 0px 0px;
		width: 100%;
		float: left;
		text-align: center;
	}
	.headerphone {
		font-size: 26px;
	}
	nav {
		width: 100%;
		height: auto;
		line-height: 1.3em;
	}
	nav ul {
		display: none;
		padding: 0px 0px 0px 0px;
		height: auto;
	}
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		color: #FFF;
	}
	nav a {
		width: 100%;
		height: 24px;
		padding: 6px 0px 0px 22px;
		color: #FFF;
		text-align: center;
	}
	nav a:link, nav a:visited {
		color: #FFF;
	}
	nav a:hover, nav a:active {
		color: #EEE;
	}
	nav a#pull {
		height: 26px;
		padding: 8px 0px 0px 12px;
		display: block;
		color: #FFF;
		text-align: left;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('images/nav-icon.png') no-repeat;
		width: 20px;
		height: 20px;
		display: inline-block;
		position: absolute;
		right: 18px;
		top: 6px;
	}
	#pageheader {
		padding: 0px 0px 0px 0px;
		width: 100%;
		float: left;
		text-align: center;
	}
	#pageheader h1 {
		font-size: 48px;
		text-align: center;
	}
	#footer {
		height: auto;
	}
	#footercenter {
		margin: 0;
		width: 100%;
	}
	#footerright {
		width: 100%;
		padding: 10px 0px 10px 0px;
		text-align: center;
	}
	#contenttopimage {
		height: 280px;
	}
	#contenttopimage h3 {
		padding: 22px 0px 0px 30px;
		font-size: 36px;
	}
	.ctabox {
		width: 90%;
		margin: 18px 5% 18px 5%;
	}
}

/*Styles for screen 480px and lower*/
@media only screen and (max-width : 480px) {
	body {
		font-size: 14px;
		line-height: 1em;
	}
	h2 {
		font-size: 20px;
	}
	#pagepadding {
		padding: 0px 10px 30px 10px;
	}
	#footercenter {
		font-size: 12px;
	}
	#contenttopimage {
		height: 226px;
	}
	#contenttopimage h3 {
		padding: 26px 0px 0px 12px;
		font-size: 26px;
	}
	.ctabox {
		width: 90%;
		margin: 12px 5% 12px 5%;
	}
}

/*Styles for screen 380px and lower*/
@media only screen and (max-width : 380px) {
	#footercenter {
		font-size: 10px;
	}
	#contenttopimage h3 {
		padding: 26px 0px 0px 10px;
		font-size: 24px;
	}
}

/*Styles for screen 340px and lower*/
@media only screen and (max-width : 340px) {
	#contenttopimage h3 {
		font-size: 20px;
	}
}