*{
	font-family: 'Montserrat', sans-serif;
	margin: 0; 
	padding: 0; 
}

body{ background: #f5f5f5; }

/* Resets */
h1, h2, h3, h4, h5{ margin: 0; padding: 0; margin-left: 1%; }
h1{ font-size: 1.5em; }
h2{ font-size: 1.5em; }
h3{ font-size: 1.25em; margin-bottom: 1rem; }
h4{ font-size: 1.0em; }
h5{ font-size: .85em; }
hr{ margin-top: 8px; }

.whitePage > h3:first-child { border-bottom: 1px solid #9a9a9a; margin-bottom: 2rem; padding-bottom: .5rem; }
h3:not(:first-child) { margin-top: 2rem; }

p{ margin: 0; padding: 0; font-size: 18px; margin-left: 1%; line-height: 32px; }
p.font2{ font-size: 1.2em; }
p.font3{ font-size: 1.5em; }
p.font4{ font-size: .85em; width: 80%; margin: auto; }

.whitePage p {
    margin-bottom: 24px;
} /*added to be able to remove all those extra "clearsBoth maxHeight" divs */

button{ padding: 4px 12px 4px 12px; border-radius: 4px; border: none; text-transform: uppercase; cursor: pointer; }

ul { list-style-type: none; clear: none; margin-left: 1%; margin-bottom: 1%; }
ul li{ margin-bottom: 8px;  margin-bottom: 1%; }

.featureTextRight{ font-size: 20px; margin-left: 12px; }
.featureText .smaller{ font-size: 14px; }

/* Clears & alignments */
	.clearsLeft{ clear: left; }
	.clearsRight{ clear: right; }
	.clearsBoth{ clear: both; }
	.clearNone{ clear: none; }
	.justLeft{ text-align: center; }
	.justRight{ text-align: right; }
	.justCenter{ text-align: center; }
	
	.minHeight{ height: 8px; }
	.avgHeight{ height: 12px; }
	.maxHeight{ height: 24px; }
	.floatsRight{ clear: both; float: left; width: 100%; }

/* Containers */
	.fullScreen{ clear: both; margin: auto; text-align: center; width: 100%; overflow: Hidden; }
	.p1280{ clear: both; margin: auto; text-align: center; max-width: 1280px; width: auto; }
	.redPage{ clear: both; margin: auto; text-align: center; max-width: 1240px; color: #fff; width: auto; line-height: 28px; font-size: 18px; text-align: center; background: url('/images/bg-red.png'); border-radius: 8px 8px 0px 0px; padding: 16px; }
	.whitePage{ background: #fff; clear: both; margin: 48px auto 48px auto; text-align: center; max-width: 1240px; width: auto; border: solid 2px #ccc; border-radius: 8px; padding: 48px 16px; box-shadow: 4px 4px 8px #ccc; overflow: hidden}
	.redBkg{ background: url('/images/bg-red.png'); color: #fff; }
	
	.quote{ font-size: 28px; max-width: 900px; width: auto; text-align: center; margin: 48px auto 48px auto; font-style: normal; }
	.quote p{ font-size: 18px; }
	
	.thirds{ clear: both; margin: auto; width: 100%; text-align: center; }
	.third{ clear: none; float: left; text-align: left; max-width: 390px; width: auto; margin-right: 13px; margin-left: 13px; }
	.third:first-child{ margin-left: 0px; }
	.third:last-child{ margin-right: 0; }
	.thirds .third h3{ margin: 18px auto 18px auto; color: #5f0d0d; text-align: left; text-transform: uppercase; }
	.thirds p{ font-size: 14px; line-height: 28px; max-width: 95%; }
	
	.rightList{ clear: none; float: right; max-width: 550px; width: auto; margin: 0 12px 24px 12px; }
	.rightList ul{ list-style-type: disc; margin-left: 12px; padding-left: 12px; line-height: 32px; font-weight: bold; }
	.rightList .address{ font-size: 12px; min-width: 200px; line-height: 18px; margin-bottom: 12px; }
	.rightList h3 .smaller{ font-size: 14px; color: #030303; }
	.rightList .stars{ color: #e7711b; font-size: 30px; margin: 0; line-height: 20px; }
	
	.reviews { } 
	.reviews .review{ clear: both; } 
	.reviews .review .r_left{ clear: left; float: left; width: 20%; }
	.reviews .review .r_right{ clear: none; float: left; width: 80%; }
	.reviews .review .r_img{ clear: both; text-align: center; width: 100%; }
	.reviews .review .r_name{ clear: both; text-align: center; width: auto; font-size: 18px; }
	.reviews .review .r_info{ clear: both; text-align: center; width: auto; font-size: 12px; }
	.reviews .review .r_info a{ } 
	.reviews .review .r_text{ line-height: 28px; clear: left; float: left; margin-left: 32px; font-style: italic; }
	
/* Background Elements */
	.bg-dark{ background: #505050; color: #fff; }
		.bg-dark a{ color: inherit; }
	.white{ color: #fff; }
	.charcoal{ color: #2b2b2b; }
	
	.red{ color: #5f0d0d !important; }
	
	/** Black */
	.black-bkg{ background: #222; color: #fff; }
		.black-bkg a{ color: #fff; }
	
	.bg-light-gray{ background: #f2f2f2; }
	.dk-gray{ background: #222; color: #fff; }
	
	.pcOnly{ display: none; }
	.logo{ clear: left; float: left; width: auto; text-align: left; max-width: 60%; }
	.logo img{ margin-top: 8px; float: left; margin-left: 0; width: 100%; }
	.mobileNav{ margin-top: 6px; margin-right: 3px; }
	.mobileNav img{ margin-top: 8px; }
	
	.col-med{ width: 100%; }
	
	.topNav ul { list-style-type: none; }t
	.topNav ul li{ clear: both; float: right;  color: #9f9f9f; padding-right: 12px; }
	.topNav ul li{ clear: both; margin: auto; text-align: center; line-height: 36px; color: #9f9f9f; padding-right: 12px; border-top: solid 1px #fff; }
	.topNav ul li a{ text-decoration: none; color: #f6f6f6; font-weight: bold; }
	.topNav ul li a:hover{ color: #de1738; }
	
	.featureHome{ background: url('/images/home-feature.jpg') no-repeat #897e7a; background-position: center; background-size: auto; }
	/*.featureHomeNew{ background: url('/images/ann-arbor-criminal-defense-lawyer.jpg') no-repeat #897e7a; background-position: center; background-size: auto; }*/
	/*.featureHome{ background: url('/images/home-page-feature.jpg') no-repeat top center; }*/
	.featureValidation{ background: url('/images/validation-page-feature.jpg') no-repeat top center; }
	.featurePricing{ background: url('/images/pricing-page-feature.jpg') no-repeat top center; }
	.featurePast{ background: url('/images/our-past-feature.jpg') no-repeat top center; }
	.featureProtection{ background: url('/images/geo-protection-feature.jpg') no-repeat top center; }
	.featureFeatures{ background: url('/images/features-feature.jpg') no-repeat top center; }
	.featureProactive{ background: url('/images/proactive-page-feature.jpg') no-repeat top center; }
	
	.homeFeature{
		/*background: linear-gradient(135deg, #fff, transparent), url('/images/home-page-feature.jpg');*/
		padding-top: 12px;
		/*background: linear-gradient(0deg, #fff, transparent), url('/images/home-page-feature.jpg'); 
		background-position: top left;
		background-size: auto 100%;
		*/
	}
	
	.homeFeature h1{ width: 98%; font-size: 32px; color: #5f0d0d; letter-spacing: -2px; font-weight: 600; }
	.homeFeature h2{ width: 98%; color: #3e3e3e; }
	.homeFeature .quote{ display: none; }
	
	.homeFeature .fp{ max-width: 1280px; width: auto; line-height: 28px; font-size: 18px; width: auto; clear: both; margin: auto; text-align: center; background: url('/images/bg-red.png'); border-radius: 8px 8px 0px 0px; padding: 16px; }
	.homeFeature .fp a{ color: #fff; }
	
	.imgFeature{ margin: 0 12px 24px 50px; clear: both; max-width: 300px; height: auto; }
	
	.barButton{ border: none; background: white; font-weight: bold; color: black; padding: 6px 12px 6px 12px; border-radius: 6px; }
	.barButton:hover{ color: darkred; cursor: pointer; }
	
	.baseContent{ clear: both; width: 100%; padding-top: 6px; text-align: center; background: #eeeeee; color: #000; }
	.baseContent .quarter{ width: 98%; clear: both; margin: auto; text-align: center; margin-bottom: 8px; }
	.threeQuarters{ width: 98%; clear: both; margin: auto;  text-align: center; margin-bottom: 8px; }
	
	.baseContent .quarter .heading{ font-size: 18px !important; font-weight: normal; }
	.baseContent .quarter .content{ font-size: 15px !important; font-weight: normal; width: 90%; }
	.reallyBig{ font-size: 24px; }
	
	.splitContent .leftSide p, .splitContent .rightSide p{ margin-right: 12px; }
	.splitContent .rightSide, .splitContent .leftSide img{ opacity: 1; transition: opacity 0.3s; }
	img[data-src]{
		opacity: 0; 
	}
	
	.footer .parts{ font-size: 12px; margin-bottom: 12px; }
	.footer .parts .heading{ font-size: 18px; }
	.footer .parts .content{ font-size: 12px; }
	.footer .parts .content a{ color: inherit; }
	.footer .rightParts{ clear: none; float: right; text-align: left; width: auto; margin-right: 12px; }
	.footer .rightParts .heading{ font-size: 18px; }
	.footer .rightParts .content{ font-size: 12px; margin-left: 12px; }
	.footer .rightParts .content a{ color: inherit; }
	
	#contactform{ width: 95%; text-align: left; margin: auto; background: #f3f3f3; padding: 12px 12px 12px 24px;  }
	#contactform .fieldName{ color: #333; padding-bottom: 6px; }
	#contactform input[type=text]{
		border: none; padding: 8px 12px 8px 12px; border-radius: 4px; 
		width: inherit;
	}
	#contactform textarea{ 
		border: none; padding: 8px 12px 8px 12px; border-radius: 4px;
		width: inherit;
	}
	.fancySubmit{ 
		color: #fff; font-weight: bold; background: #5f0d0d;
		padding: 8px 12px 8px 12px; border: none; border-radius: 4px; 
	}
	.fancySubmit:hover{
		background: #f50d0d;
		cursor: pointer;
	}
	
	.thirds .third{ margin-bottom: 12px; }
	.tagline{ font-weight: normal; }
	
@media (max-width: 400px){
	.logo { width: 70%; }
	.logo img{  }
	h2{ margin-bottom: 8px; }
}
	
/* ********* Landscape [ 576 px ] ****** */

@media (min-width: 576px){ 
	.col-sm{ width: 100%; }
	
	.logo{ clear: left; float: left; width: auto; margin-bottom: 8px; margin-left: 8px; }
	
	.mobileNav{ margin-right: 8px; }
	
}

/* ********* Tablets [ 768 px ] ****** */
@media (min-width: 768px){
	#navbar ul li{ font-size: 1.0em; margin-right: 0; }
	.logo{ clear: left; float: left; width: auto; margin-bottom: 8px; margin-left: 8px; }
	.mobileNav{ margin-right: 8px; }
	
	.featureValidation{ background: linear-gradient(135deg, #fff, transparent), url('/images/validation-page-feature.jpg') no-repeat; }
	/*.featureHome{ background: url('/images/washtenaw-county-criminal-defense-lawyer.jpg'); }*/
	/*.featureHome{ background: linear-gradient(135deg, #fff, transparent), url('/images/home-page-feature.jpg'); }*/
	.featurePricing{ background: linear-gradient(135deg, #fff, transparent), url('/images/pricing-page-feature.jpg') }
	.featurePast{ background: linear-gradient(135deg, #fff, transparent), url('/images/our-past-feature.jpg') no-repeat top center; }
	.featureProtection{ background: linear-gradient(135deg, #fff, transparent), url('/images/geo-protection-feature.jpg') no-repeat top center; }
	.featureFeatures{ background: linear-gradient(135deg, #fff, transparent), url('/images/features-feature.jpg') no-repeat top center; }
	.featureProactive{ background: linear-gradient(135deg, #fff, transparent), url('/images/proactive-page-feature.jpg') no-repeat top center; }
	
	.homeFeature{
		background-position: top left;
		/*background-size: 100% 100%;*/
		color: #fff; text-shadow: none;
	}
	.homeFeature h1{ text-shadow: none; margin-bottom: 12px; font-weight: normal; clear: left; float: left; text-align: left;  max-width: 55%; }
	.homeFeature h2{ text-shadow: none; font-size: 20px; max-width: 90%; clear: left; float: left; text-align: left; color: #3e3e3e; max-width: 40%; }
	.homeFeature .quote{ display: block; clear: both; float: right; margin-right: 12px; margin-top: 24px;  }
	.homeFeature .fp{ text-align: left; margin: 0; margin-left: 12px; text-shadow: 1px 1px 4px #000; }
	
	.featureTextRight{ font-size: 22px; margin-left: 12px; clear: none; float: right; margin-right: 12px;  }
	.featureText .smaller{ font-size: 14px; }
	
}


/* ********* Large Tablets [ 992 px ] ****** */
@media (min-width: 992px){ 
	.pcOnly{ display: block; }
	.mobile{ display: none; }
	
	.featureValidation{ background: linear-gradient(135deg, #fff, transparent), url('/images/validation-page-feature.jpg'); }
	/*.featureHome{ background: url('/images/washtenaw-county-criminal-defense-lawyer.jpg'); }*/
	.featurePast{ background: linear-gradient(135deg, #fff, transparent), url('/images/our-past-feature.jpg'); }
	.featureProtection{ background: linear-gradient(135deg, #fff, transparent), url('/images/geo-protection-feature.jpg'); }
	.featureFeatures{ background: linear-gradient(135deg, #fff, transparent), url('/images/features-feature.jpg'); }
	.featureProactive{ background: linear-gradient(135deg, #fff, transparent), url('/images/proactive-page-feature.jpg'); }
	
	.homeFeature{ 
		background-position: top left;
		/*background-size: 100% 100%;*/
	}
	
	.logo{ clear: left; float: left; width: auto; text-align: left; max-width: 300px; }
	.logo img{ margin-top: 8px; float: left; margin-left: 0; width: 300px; }
	
	.homeFeature h1{ max-width: 90%; font-size: 55px; color: #5f0d0d; letter-spacing: -5px; font-weight: 600; }
	.homeFeature h2{ font-size: 32px; max-width: 90%; float: left; text-align: left; text-shadow: none;}
	.homeFeature .quote{ display: block; text-align: left; margin-right: 12px; }
	.rightList{ clear: none; float: right; max-width: 550px; width: auto; margin: 0 12px 24px 36px; }
	
	.imgfeature{ margin: 0 12px 0px 50px; clear: none; width:270px; height: auto; }
	
	.justLeft{ text-align: left !important; }
	.floatsRight{ clear: none; float: right; width: auto; }
	
	.logo{ clear: both; text-align: center;/*width: 15%;*/ }
	.logo img{ margin: auto; margin-top: 12px; margin-left: 18px; }
	
	.topNav { text-align: center !important;  }
	.topNav ul { clear: both; margin: auto; text-align: center; height: 96px; width: auto; margin-left: 5%; }
	.topNav ul li{ clear: none; float: left; line-height: 96px; margin-left: 8px; font-size: 0.7em; border-top: none !important; }
	.topNav ul li:last-child{ background: url('/images/bg-red.png'); padding-right: 8px; padding-left: 8px; cursor: pointer; }
	.topNav ul li:last-child a{ color: #fff; font-weight: bold; }
	.topNav ul li:last-child:hover{ background: url('/images/red-bg-on.png'); }
	
	.splitContent .rightSide{ 
		clear: none; float: right; width: 48%;
		text-align: center;
	}
	
	.splitContent .leftSide{ 
		clear: none; float: left; width: 48%; text-align: center; margin-right: 1%;
	}
	
	.splitContent .leftSide h3{ margin-top: 15%; margin-left: 24px; font-size: 22px; }
	.splitContent .leftSide p{ margin-top: 12px; margin-left: 24px; font-size: 18px; font-weight: normal; }
	.justLeft p{ font-size: 18px; }
	
	.splitContent .rightSide h3{ margin-top: 15%; float: left; text-align: left; margin-left: 24px; }
	.splitContent .rightSide p{ margin-top: 12px; float: left; text-align: left; margin-left: 24px; }
	
	.footer .parts { width: 25%; clear: none; float: left; }
}

/* ********* Almost XLarge ************ */
@media (min-width: 1200px){
	.pcOnly{ display: block; }
	.mobile{ display: none; }
	.logo{ clear: left; float: left; margin-left: 0; /*width: 15%;*/ }
	.logo img{  margin-top: 12px;  }
	
	.topNav ul { clear: none; float: right; margin-right: 12px; height: 96px;  text-transform: uppercase; font-weight: bold; }
	.topNav ul li{ clear: none; float: left; line-height: 96px; margin-left: 12px; font-size: 15px !important; }
	
	.homeFeature{ background-size: 1600px auto; background-position: center; }
	/*.homeFeature{ background-size: 100% 100%; }*/
	.homeFeature h1{ max-width: 100%; margin-bottom: 12px; font-weight: normal; clear: left; float: left; text-align: left; padding-top: 48px; }
	.homeFeature h2{ max-width: 100%; font-weight: bold; clear: left; float: left; text-align: left; padding-top: 12px; padding-bottom: 72px; }
	.homeFeature .quote{ position: relative fixed; float: right; margin-right: 24px; margin-top: 6%; font-size: 34px; font-weight: normal; font-style: italic; text-align: left; }
	
	.baseContent { line-height: 24px; padding: 24px 0 18px 0; border-bottom: solid 1px #ccc; }
	.baseContent .quarter .content{ font-size: 12px !important; }
	.baseContent .quarter{ clear: left; float: left; width: 24%; text-align: center; margin-left: 1%; }
	.threeQuarters{ clear: none; float: right; width: 73%; text-align: right; margin-right: 1%; }
	.threeQuarters .reallyBig{ font-size: 30px; font-weight: normal; font-style: italic; line-height: 48px; }
	
	.splitContent .rightSide h3, .splitContent .leftSide h3{ font-size: 24px; clear: both; width: 100%; margin-top: 15%; text-align: center; }
	.splitContent .rightSide p, .splitContent .leftSide p{ font-size: 18px; margin-top: 12px; text-align: center; max-width: 80%; margin-left: 12%; }
		
	.featureTextRight{ font-size: 22px; margin-left: 12px; clear: none; float: right; margin-right: 12px; min-width: 40%; margin-left: 5%;  }
	
	
	
}


/* ********* X-Large [ 1200 px ] ****** */
@media (min-width: 1630px){
	.pcOnly{ display: block; }
	.mobile{ display: none; }
	.logo{ clear: left; float: left; margin-left: 0; /*width: 15%;*/ }
	
	.topNav ul { clear: none; float: right; margin-right: 12px; height: 96px; }
	.topNav ul li{ clear: none; float: left; line-height: 96px; margin-left: 18px; font-size: 1em !important; }
	
	/*.homeFeature{ background-size: 100% 100%; }*/
	.homeFeature h1{ max-width: 100%; margin-bottom: 12px; font-weight: normal; clear: left; float: left; text-align: left; }
	.homeFeature h2{ max-width: 100%; font-weight: bold; clear: left; float: left; text-align: left; }
	.homeFeature .quote{ position: relative fixed; float: right; margin-right: 24px; margin-top: 6%; font-size: 34px; font-weight: normal; font-style: italic; text-align: left; }
	
	.baseContent { line-height: 24px; padding: 24px 0 18px 0; border-bottom: solid 1px #ccc; }
	.baseContent .quarter{ clear: left; float: left; width: 24%; text-align: center; margin-left: 1%; }
	.baseContent .quarter .content{ font-size: 15px !important; }
	
	.threeQuarters{ clear: none; float: right; width: 73%; text-align: right; margin-right: 1%; }
	.threeQuarters .reallyBig{ font-size: 34px; font-weight: normal; font-style: italic; line-height: 48px; }
	
	.splitContent .rightSide h3, .splitContent .leftSide h3{ font-size: 28px; clear: both; width: 100%; margin-top: 15%; text-align: center; }
	.splitContent .rightSide p, .splitContent .leftSide p{ font-size: 20px; margin-top: 12px; text-align: center; max-width: 80%; margin-left: 12%; }
	
}
	
