/* CSS Document */

* {
	margin:0;
	padding:0;
}
html {
	font-size: 62.5%;
}

body {
	font-size: 16px;
	font-size: 1.6em;
	font-family: Helvetica, Arial, "sans-serif";
}

header{
	background:#000;
	color:#FFF;
	text-align: center;
	width:100%;
}


header a:link,
header a:hover {
	color:#FFF;
	text-decoration:underline;
}


#headshot {
	text-align:center;
	
}

#headshot img {
	border-top:2px solid #FFF;
	border-bottom:2px solid #FFF;
	border-left:3px solid #FFF;
	border-right:0;
	border-radius:50%;
	
}

#contact-info {
	text-align:center;
	padding:0;
}

#contact-info p {
	margin:0 0 3rem 0;
}

#contact-info .icons {
	margin-right: 1rem;
}

h1 {
	font-size:4rem;
	letter-spacing:2px;
	padding:2rem 0;
	border-top:12px solid #FFF;
	font-family:Georgia, "serif";
	text-align:center;
	width:80%;
	margin:0 auto;
}


h2 {
	font-size:1.8rem;
	margin-bottom:4rem;
	border-bottom:3px solid #FFF;
	padding:0rem 0 3rem 0;
	font-weight:bold;
}

h3 {
	font-size:3.5rem;
	padding:2rem 0;
	text-align:center;
	width:90%;
	font-weight: bold;
	color:#FFF;
	margin:0 auto 2rem auto;
	border-top:12px solid #FFF;
}

h4 {
	font-weight:bold;
	font-size:2.5rem;
	margin:2rem 0;
}

h5 {
	font-size:3.5rem;
	font-weight:bold;
	padding:2rem 0;
	text-align: center;
	border-top:12px solid #000;
	width:90%;
	margin:0 auto 3rem auto;
}

h6 {
	font-size:2.5rem;
	padding:3rem 0 0 0;
	border-bottom:2px solid #000;
	text-transform: uppercase;
	margin-top:5rem;
}

h6 a,
h6 a:active,
h6 a:hover
 {
	text-decoration:none;
	padding:1rem 1rem 1.2rem 1rem;
	background:#000;
	color:#FFF;
	line-height:1.5;

}


main {

}



#video-wrap {
	background:#000;
	padding-top:4rem;
	float:left;
	width:100%;
}

#video-block {
	max-width:80%;
	margin:0 auto;
	float:none;
}

#video-reel {
	height:0;
	position:relative;
	overflow:hidden;
	padding-bottom:56.25%;
	float:none;
	
}

#video-reel iframe {
	position:absolute;
	border:0 none;
	width:100%;
	height:100%;
	left:0;
	top:0;
}


.web-text {
	padding:2rem;
	text-align:center;
}

.web-text ul {
	text-align:left;
	margin:2rem 0 0 2rem;
}

.web-text ul li {
	margin-bottom:1.5rem;
}

.web-photo {
	padding:0;
	min-height:20rem;
}

.web-photo a {
	display:block;
	width:100%;
	height:29rem;
}

#studioblu {
	background: url("/images/sites/optimized/studiobludesign.jpg") no-repeat;
}

#tireworld {
	background: url("/images/sites/optimized/tire-world.jpg") no-repeat;
}

#designsmith {
	background: url("/images/sites/optimized/designsmith.jpg") no-repeat;
}

#faewest {
	background: url("/images/sites/optimized/feawest.jpg") no-repeat;
}

#anita {
	background: url("/images/sites/optimized/anitabarbero.jpg") no-repeat;
}

#luci {
	background: url("/images/sites/optimized/luci.jpg") no-repeat;
}

#owls {
	background: url("/images/sites/optimized/owlswitharti.jpg") no-repeat;
}

footer {
	font-size:1rem;
	text-align: center;
}

main p {
	margin:0 0 2rem 0;
}

@media only screen and (min-width : 768px) {
	#contact-info {
		padding:0;
	}
	
	
	
}

@media only screen and (min-width:992px) {
	
	#headshot {
		margin:0;
		padding:0;
	}
	
	#headshot,
	#headshot h1 {
		text-align:right;
	}
	
	#headshot h1 {
		margin-right:4rem;
		margin-bottom:0;
		width:initial;
	}

	#headshot img {
		margin-right:8rem;
	}		
	
	#contact-info {
		text-align:left;
	}

	#contact-info h2 {
		font-size:2rem;
		padding-top:5rem;
		
	}
	
	#contact-info p {
		padding-left:0;
	}
	
	h3 {
		width:50%;
		text-align: left;
		border-bottom:none;
		padding-left:0 !important;
	}
	

	
	h4 {
		
	}
	
	h5 {
		text-align:left;
		margin:0 0 2rem 0;
		width:50%;
		border-bottom:none;
		padding-left:0 !important;
	}
	
	h6 {
		
		font-size:2.5rem;
	}
	
	h6 a,
	h6 a:active {
		border-bottom:8px solid #337ab7;
		transition:400ms;
	}
	
	h6 a:hover {
		border-bottom:12px solid #337ab7;
		transition:600ms;
	}
	
	.web-text {
		text-align:right;
		min-height:40rem;
		border-bottom:6px solid #FFF;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,cccccc+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
	}
	
	.web-text ul {
		margin-top:4rem;
		padding-left:4rem;
	}
	
	.web-text ul li {
		margin-bottom:1rem;
	}
	
	.web-photo {
		min-height:40rem;
		border-bottom:6px solid #FFF;
	}
	
	.web-photo a {
		height:39rem;
	}
}