﻿/*====CSS RESET====*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*====WEB FONTS====*/
@font-face {
    font-family: 'Open Sans Condensed';
    src: url('fonts/OpenSans-CondBold-webfont.eot');
    src: url('fonts/OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-CondBold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('fonts/OpenSans-CondLight-webfont.eot');
    src: url('fonts/OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-CondLight-webfont.woff') format('woff');
    font-weight: light;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('fonts/OpenSans-CondLightItalic-webfont.eot');
    src: url('fonts/OpenSans-CondLightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-CondLightItalic-webfont.woff') format('woff');
    font-weight: light;
    font-style: italic;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/oswald-regular-webfont.eot');
    src: url('fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oswald-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/oswald-light-webfont.eot');
    src: url('fonts/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oswald-light-webfont.woff') format('woff'),
         url('fonts/oswald-light-webfont.ttf') format('truetype');
    font-weight: light;
    font-style: normal;
}

/*====STYLES====*/

/*====Misc/utility styles====*/
h1, h2, h3, h4, h5, h6 {
	font-family: Open Sans Condensed, sans-serif;
	font-weight: bold;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 26px;
}

h3 {
	font-size: 22px;
}

h4 {
	font-size: 20px;
}

img {
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
	/*border: 1px solid #0F0;*/
}

a.big-blue-button, .main-content a.big-blue-button {
	display: block;
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;
	padding: 12px;	
	border-radius: 20px;
	text-align: center;
	text-decoration: none;
	font-size: 24px;
	color: #fff;
	background-color: #13467B;
}

a.big-blue-button:hover, .main-content a.big-blue-button:hover {
	color: #fff;
}

a.img-wrap {
	display: block;
}

a img {
	display: inline-block;
}

b {
	font-weight: bold;
}

i {
	font-style: italic;
}

.block-center-outer {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.block-center {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.blue {
	color: #13467B;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.iframe-wrapper {
	height: 0;
	width: 100%;
	padding: 0 0 63.33333% 0;
	background-color: #F2F2F2;
	position: relative;
}

.iframe-wrapper .iframe-wrapper-inner {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.iframe-wrapper .iframe-wrapper-inner iframe {
	width: 100%;
	height: 100%;
}

/*====MOBILE====*/
/*====Wrappers===*/
html {
	font-size: 1em;
	width: 100%;
}

body {
	font-family: Arial, sans-serif;
	line-height: 1.25;
}

div#wrapper {
	position: relative;
}

/*====Banner====*/
#banner {
	position: relative;
	background-color: #13467B;
	color: #FFF;
	text-align: center;
	border-bottom: 2px solid #FFF;
}

#banner .content-wrap {
	padding: 16px 2.5% 0;
}

#banner-logo {
	padding: 0 0 16px 0;
	width: 60%;
	max-width: 260px;
	display: inline-block;
}

#banner .contact-block {
	font-family: "Open Sans Condensed", sans-serif;
	font-weight: bold;
	font-size: 24px;
	padding-bottom: 44px; /*this bottom padding must equal the total height of the hamburger icon (#mobile-menu-button)*/
}

#banner .contact-block a:hover {
	text-decoration: underline;
}

#banner .contact-block h2 {
	font-size: 18px;
}

#banner .social-icons {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#banner .social-icons a img {
	display: block;
	width: 28px;
	padding: 8px;
}

#banner nav {
	font-family: Arial, sans-serif;
	font-weight: normal;
	width: 100%;
	position: absolute;
	z-index: 99;
	left: 0;
	margin-top: -44px; /*this negative top margin must equal the total height of the hamburger icon (#mobile-menu-button)*/
	background-color: #13467B;
	overflow-y: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

#banner nav #mobile-menu-button img {
	display: block;
	margin: 0;
	height: 26px;
	padding: 8px 10px 10px;
}

#banner nav ul {
	background-color: #edeef3;
	color: #13467B;
	width: 100%;
	align-self: stretch;
}

#banner nav ul li {
	box-sizing: border-box;
	transition: height 250ms ease-in-out;
	overflow-y: hidden;
}

#banner nav.collapsed ul li {
	box-sizing: border-box;
	height: 0;
}

#banner nav.expanded ul li {
	height: 54px;
}

#banner nav ul li a {
	display: block;
	text-align: center;
	padding: 16px 0;
	border-bottom: 2px solid #13467B;
}

#banner nav ul li a:hover {
	background-color: #c30000;
	color: #FFFFFF;
}

#banner img.banner-image {
	display: block;
	width: 100%;
	max-width: none;
}

/*====Hero image====*/
.hero-image-wrapper {
	position: relative;
}

.hero-image-wrapper .container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero-image-wrapper .container h1 {
	font-size: 40px;
	text-align: center;
	color: #FFF;
	text-shadow: 0 0 2px #000, 0 0 3px #000, 0 0 16px #13467B, 0 0 18px #13467B, 0 0 20px #13467B;
	text-transform: uppercase;
}

.hero-image-wrapper img.hero-image {
	width: 100%;
	max-width: none;
}

/*====Main content====*/
.main-content {
	text-align: left;
	margin: 20px 2.5%;
}

.main-content > * {
	margin: 20px 0;
}

.main-content > *:last-child {
	margin-bottom: 40px;
}

.main-content .left-col section, .main-content .left-col h2, .main-content .right-col h2, .main-content .right-col figure {
	margin-bottom: 20px;
}

.main-content .left-col, .main-content .text-left {
	text-align: left;
}

.main-content h1 {
	font-size: 32px;
	color: #13467B;
	text-align: center;
	padding-bottom: 20px;
}

.main-content h2 {
	color: #13467B;
	font-size: 26px;
	text-align: center;
}

.main-content .subtitle {
	color: #13467B;
	font-size: 19px;
	margin-top: -20px;
	margin-bottom: 20px;
}

.main-content .small-blue-heading {
	color: #13467B;
	font-size: 19px;
}

.main-content div.divider {
	margin: 20px 0;
	padding-top: 0;
	padding-bottom: 0;
	height: 1px;
	background-color: #13467B;
}

.main-content .review-icons {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.main-content .review-icons > * {
	margin: 0 5px;
	text-align: center;
}

.main-content p {
	margin-bottom: 20px;
}

.main-content p:last-child {
	margin-bottom: 0;
}

.main-content a {
	color: #13467B;
	text-decoration: underline;
}

.main-content a:hover {
	color: #c30000;
}

.main-content aside.right-col {
	margin-top: 20px;
}

.main-content aside.right-col figure {
	text-align: center;
}

.main-content figcaption {
	font-family: "Open Sans Condensed", Arial, sans-serif;
	font-weight: light;
	font-size: 20px;
}

.main-content ul li::before {
	content: "\25AA";
	color: #13467B;
	margin-right: 4px;
}

/*====Footer====*/
footer {
	background-color: #13467B;
	color: #FFF;
	font-family: Open Sans Condensed, sans-serif;
	font-size: 18px;
	padding: 40px 2.5%;
	text-align: center;
}

footer > * {
	margin-bottom: 20px;
}

footer > *:last-child {
	margin-bottom: 0;
}

footer address .item {
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}

footer address .item p {
	text-align: left;
}

footer address .item .circle-icon {
	margin-right: 3px;
}

footer address .item a img {
	display: block;
}

footer address a {
	font-weight: bold;
}

footer address a:hover {
	text-decoration: underline;
}

footer .social {
	padding-bottom: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

footer .social > * {
	margin-right: 16px;
}

footer .social > *:last-child {
	margin-right: 0;
}

footer .footer-nav {
	font-weight: bold;
}

footer .footer-nav a {
	display: inline-block;
	padding: 8px;
}

footer .footer-nav a:hover {
	text-decoration: underline;
}

/*====Home====*/
.home #banner {
	border-bottom: 0;
}

form.req-est {
	background-image: url("images/seamless-gray-plate-texture-tiny.png");
	background-repeat: repeat;
	color: #13467B;
	padding: 20px 5%;
	margin: 0;
}

form.req-est > div {
	width: 100%;
	padding: 0 0 14px;
}

form.req-est > div:last-child {
	text-align: center;
}

form.req-est > div.under-wraps {
	display: none;
}

form.req-est label {
	display: block;
	text-align: left;
	font-family: "Open Sans Condensed", sans-serif;
	font-weight: bold;
	font-size: 18px;
	padding: 0 0 4px;
}

form.req-est label.error {
	padding-top: 4px;
	padding-bottom: 0;
	font-family: Arial, sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: #C30000;
}

form.req-est input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #13467B;
	padding: 8px 4px;
	font-size: 16px;
	font-family:  Arial, sans-serif;
}

form.req-est input.error {
	border-color: #C30000;
}

form.req-est textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 120px;
	border: 1px solid #13467B;
	padding: 8px 4px;
	font-size: 16px;
	font-family:  Arial, sans-serif;
}

form.req-est input[type="submit"] {
	color: #FFF;
	background-color: #13467B;
	border: 0;
	width: auto;
	display: inline-block;
	font-family: Open Sans Condensed, sans-serif;
	font-weight: bold;
	font-size: 20px;
	padding: 12px 20px;
	cursor: pointer;
}

form.req-est input[type="submit"]:hover {
	text-decoration: underline;
}

form.req-est p.note {
	font-family: "Open Sans Condensed", sans-serif;
	font-size: 20px;
}

/*====Contact Us====*/
.contact-us .main-content .col-wrapper .right-col h2 {
	text-align: left;
}

.contact-us .main-content .col-wrapper .left-col address {
    margin-bottom: 20px;
}

.write-a-review {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 8px;
}

.write-a-review img {
	display: block;
}

.main-content .col-wrapper .right-col .write-a-review h2 {
	background-color: #13467B;
	color: #FFF;
	text-align: center;
	width: 100%;
	max-width: 246px;
	margin: 0;
}

.under-map {
	text-align: center;
	font-size: 14px;
}

.under-map a {
	display: inline-block;
	padding: 4px;
}

/*====TABLET====*/
@media all and (min-width: 700px) {
	/*====Wrappers===*/
	/*====Banner====*/
	#banner {
		padding: 0;
	}
	
	#banner .content-wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
		box-sizing: border-box;
		width: 100%;
		padding: 20px 20px 12px;
		top: 0;
	}
	
	#banner-logo {
		padding: 0;
		margin: 0 10px 0 0;
		width: 25%;
		max-width: 213px;
		flex-basis: 25%;
		flex: 1 1 auto;
		order: 1;
	}

	#banner .contact-block {
		padding: 0;
		margin: 0 0 0 10px;
		flex: 0 0 auto;
		order: 3;
	}

	#banner nav {
		position: static;
		display: block;
		width: 39%;
		margin: -3px 0 0;
		background-color: transparent;
		font-family: Oswald, sans-serif;
		font-weight: light;
		font-size: 18px;
		flex: 1 1 39%;
		order: 2;
		align-self: center;
	}

	#banner nav #mobile-menu-button {
		display: none;
	}

	#banner nav ul {
		background-color: transparent;
		color: #FFF;
		line-height: 1;
		display: flex;
		flex-direction: row;
		flex-flow: wrap;
		justify-content: center;
		align-items: flex-start;
	}

	#banner nav.collapsed ul li {
		height: auto;
	}

	#banner nav.expanded ul li {
		height: auto;
	}

	#banner nav ul li a {
		padding: 8px 10px;
		border: 0;
		font-weight: bold;
	}

	#banner nav ul li a:hover {
		text-decoration: underline;
		background-color: transparent;
	}

	/*====Hero image====*/
	
	/*====Main content====*/
	.main-content {
		margin: 20px 10%;
	}
		
	.main-content section.full-width {
		width: 100%;
		flex: 1 0 100%;
	}
	
	.main-content .col-wrapper {
		display: flex;
		margin-bottom: 0; /*removing bottom margin from flex container gets rid of excess margin that would be created by the fact that there is no margin collapse in flex formatting context (only block formatting context)*/
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}
		
	.main-content .col-wrapper section.left-col {
		width: 50%;
		margin-right: 30px;
		flex: 1 1 50%;
		order: 1;
		text-align: left;
	}
	
	.main-content section.left-col .block-center-outer {
		display: block;
	}

	.main-content section.left-col .block-center {
		display: block;
	}
	
	.main-content .col-wrapper aside.right-col {
		width: 41%;
		margin-left: 4%;
		margin-top: 0;
		flex: 1 1 41%;
		order: 10;
	}

	/*====Footer====*/
	footer {
		padding: 40px 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-evenly;
	}
	
	footer > * {
		width: 45%;
		flex: 0 0 45%;
	}
	
	footer .footer-nav {
		width: 100%;
		flex: 1 0 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
	}
	
	footer .footer-nav li a {
		display: inline-block;
		padding: 8px 14px;
		margin: 0 4px;
	}
	
	/*====Home====*/
	.home #banner {
		padding-top: 20px;
	}
	
	.home #banner .content-wrap {
		position: absolute;
	}
	
	form.req-est {
		padding: 20px 20%;
	}
}

/*====DESKTOP====*/
@media all and (min-width: 960px) {
	/*====Wrappers===*/
	/*====Banner====*/
	#banner nav {
		max-width: 553px;
	}
	
	#banner nav ul {
		justify-content: space-evenly;
	}
	
	/*====Hero image====*/
	
	/*====Main content====*/
	.main-content {
		margin: 20px 15%;
	}

	/*====Footer====*/	
	footer > * {
		padding: 0;
		width: 30%;
		flex: 0 1 30%;
	}
	
	footer address {
		min-width: 311px;
	}
		
	footer > a {
	}
	
	footer div.embellishments {
		min-width: 214px;
	}
	
	/*====Home====*/
	form.req-est {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	form.req-est > div {
		width: 100%;
		flex: 1 0 100%;
	}
	
	form.req-est > div.half {
		width: 47.5%;
		flex: 0 0 47.5%;
	}
}