/*
Theme Name: Jeff Walsh
Template: roots
*/

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

html{
	overflow-y: scroll; 	
}

body{	
background: #0d121e url("images/bg.jpg") repeat-x; /* Old browsers */
}

/* Typohrapy */
a{
	color: #d32a33;	
}

/*
blue - 1f7882
black 
*/

b{
	font-weight: bold;
}

a:hover,
a:active,
a:focus{
	color: #e13629;
	text-decoration: none;		
}

	/* Headings */
	h1,h2,h3,h4,h5,h6{
		color: #fff;
	}
	
	h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
		color: #D52B1E;
	}
	
p{
	color: #bce9ea;
	text-shadow: 0 1px 0 #000;	
}

/* Arrow */
ul.arrow{
	list-style: none;
	margin: 15px 0 10px 25px;
}

	ul.arrow li{
		background: url("images/arrow.png") left no-repeat;	
		padding-left: 15px;
		margin-bottom: 5px;
	}

#wrapper{
	width: 960px;
	margin: 0px auto;	
	margin-top: 5%;
}

#header{
	width: 460px;
	float: left;
	margin-right: 20px;
	padding: 20px 30px 0 0;
	position: fixed;
}

	#logo{
		float: right;
		margin: 0 0 20px 0px !important;	
	}
	
	#header nav{
		margin: 0;
	}

		#header nav ul{
			margin: 0 -10px 0 0;
			list-style: none;
			padding: 0;
		}

			#header nav ul li{
				float: left;
				clear: both;
				width: 100%;
			}

				#header nav ul li a{
					display: block;
					padding: 5px 10px 5px 0;
					float: right;
					text-align: right;
					width: 100%;
					cursor: hand;
				}

					#header nav ul li a:hover,
					#header nav ul li.selected a{
						background: url('images/nav-shadow.png')  right top repeat-y;
						-webkit-border-top-right-radius: 3px;
						-webkit-border-bottom-right-radius: 3px;
						-moz-border-radius-topright: 3px;
						-moz-border-radius-bottomright: 3px;
						border-top-right-radius: 3px;
						border-bottom-right-radius: 3px;
					}

					#header nav ul li ul{
						margin-right: 0;
					}

#inside{
	display: none;	
	padding: 25px 0 100px;

}

#custom-page{
	float: left;
	width: 450px;
	margin-left: 480px;
}

	#inside{
		border-left: 1px solid #50dee4	;
		padding: 20px 0 0 10%;
	}

		#inside b{
			color: #fff;
		}

.banner{
	height: 150px;
}



.brand{
	background: url("images/logo.png") no-repeat;	
	background-size: 100%;
	display: block;
	text-indent: -9999px;
	height: 109px;
	width: 420px;	
}

.page-header{
	border: 0;	
}

/* Acomplishments */

.company{
	width: 100%;
	min-height: 150px;
	margin-bottom: 25px;
}

	.company img{
		position: absolute;
		z-index: 50;
		background: #001f20;
	}
	
		.company img:hover{
			opacity: 0;	
		}
	
	.company h2{
		width: 100%;
		text-align: center;
		color: #ef442d;
		vertical-align:middle;
		height: 100%;
		font-size: 14px;
		text-shadow: 0 1px 0 #000;
	}
	
footer.content-info{
	width: 100%;
	float: left;
	clear: both;
	text-align: right;
	margin: 50px 0 150px;	
}

	footer.content-info p{
		float: right;
		border-top: 3px solid #d32a33;
		padding: 10px 0 0 40px	
	}
	
/* wpcf7 */

.wpcf7{

}

	.wpcf7 .wpcf7-text,
	.wpcf7 .wpcf7-textarea{
		width: 100%;
		float: left;
		padding: 20px;
	}

	.wpcf7 .wpcf7-text{
		color: #bb3624;
		background: #000;
		border: 1px solid #20abaf;
	}
	
	.wpcf7 .wpcf7-textarea{
		color: #bb3624;
		background: #000;
		border: 1px solid #20abaf;
	}
	
	.wpcf7 .wpcf7-submit{
		padding: 10px 20px;
		background: #eb212e;
		color: #fff;
		text-shadow: 0 1px 0 #84150d;
		border: 0;
		
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;			
	}

.required{
text-align: right;
color: #d32a33;
}

#clients{
  width: 100%;
  float: left;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}

  .client{
    float: left;
    width: 33.33%;
    margin: 0 0 15px;
    padding: 50px;
    position: relative;
  }

  	.client a{
  		position: absolute;
  		left: 25%;
  		top: 50%;
  	}

  		.client a img{
  			width: 75%;
  		}


body.home footer.content-info{
	margin-top: 430px;
}

.topgap{
padding-top: 10px !important;
display: block;
}

.subheading{
width: 100%;
float: left;
clear: both;
margin-bottom: 10px;
font-size: 18px;
}

/* Large desktop */
@media (min-width: 1200px) {
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

	#wrapper{
		width: 767px;
	}

		#header{
			width: 300px;
			padding-top: 50px;
			position: static;
		}

		 	.brand{
		 		width: 300px;
		 		height: 70px;
				overflow: hidden;
		 	}

		#custom-page{
			width: 410px;
			padding: 10px 0 50px;
			margin: 0;
		}

			#custom-page h1{
				margin: 0;
			}


		.client{
			width: 100%;
			margin: 0 0 15px;
		}

}
 


/* Landscape phone to portrait tablet */
@media (max-width: 914px) {

body.home footer.content-info{
	margin-top: 50px !important;
}

	#wrapper{
		width: 90%;
		margin: 0 5%;
	}

		#header{
			width: 100%;
			margin-top: 50px;
			position: static;
			float: left;
			clear: both;
		}

			#header nav{
				margin: 0;
			}

				#header nav ul{
					width: 100%;
					float: left;
					clear: both;
				}

					#header nav ul li{
						float: left;
						width: 100%;
						clear: both;
					}

						#header nav ul li a{
							text-align: center !important;
							margin: 0;
							padding: 0;
							padding: 5px 0;
						}

		.brand{
			width: 100% !important;
			min-height: 179px;
		}

	#custom-page{
		width: 100%;
		float: left;
		clear: both;
		margin: 50px 0 0 0;
	}

	#inside{
		border-left: 0;
		border-top: 1px solid #50dee4;
		padding: 25px 0 0 0 !important;
	}

	.client{

	}

		.client a{
			text-align: center;
		}

}
 
/* Landscape phones and down */
@media (max-width: 480px) {

	#wrapper{
		width: 90%;
		margin: 0 5%;
	}

		#header{
			width: 100%;
			margin-top: 50px;
		}

			#header nav{
				margin: 0;
			}

				#header nav ul{
					width: 100%;
					float: left;
					clear: both;
				}

					#header nav ul li{
						float: left;
						width: 100%;
						clear: both;
					}

						#header nav ul li a{
							text-align: center !important;
							margin: 0;
							padding: 0;
							padding: 5px 0;
						}

		.brand{
			width: 100% !important;
			min-height: 90px !important;
		}

	#custom-page{
		width: 100%;
		float: left;
		clear: both;
		margin-top: 50px;
	}

	#inside{
		border-left: 0;
		border-top: 1px solid #50dee4;
		padding: 25px 0 0 0 !important;
	}

	.client{

	}

		.client a{
			text-align: center;
		}

}