/*
Responsive 996px grid system ~ Style CSS.
Copyright 2013, Josh Cope
*/

/* =============================================================================
   Site Styles
   ========================================================================== */
   
   body {
		font-family: 'Roboto', sans-serif;
   }
   
   .top-nav-bar {
		margin: 2em 0;
   }
   
   .sma-number {
		font-size: 30px;
		font-weight: 300;
		color: #0e76bc;
		text-align: right;
   }
   
   #hero-img {
		background-image: url(../images/header-img.jpg);
		background-size: cover;
		height: 500px;
   }
   
   .hero-text {
		font-size: 76px;
		color: #fff;
		font-weight: 100;
		line-height: 1.1em;
		position: relative;
		top: 115px;
   }
   
   #benefit-solutions {
		margin: 3em 0;
   }
   
   .dark-title {
		font-size: 50px;
		font-weight: 700;
		color: #5e5e5e;
		line-height: 1.2em;
   }
   
   .dark-paragraph {
		font-size: 18px;
		color: #5e5e5e;
		line-height: 2em;
   }
   
   .links {
		margin: 1em 0 0 0;
   }
   
   .links span a {
		color: #0e76bc;
		font-style: italic;
		text-decoration: none;
   }
   
   .benefit-paragraph {
		font-size: 18px;
		color: #5e5e5e;
		line-height: 2em;
   }
   
   #blue-bg {
		background-color: #0e76bc;
		padding: 4em 0;
   }
   
   .insurance-title {
		font-size: 50px;
		font-weight: 700;
		color: #fff;
		line-height: 1.2em;
   }
   
   .insurance-paragraph {
		font-size: 18px;
		color: #fff;
		line-height: 2em;
   }
   
   #insurance-icons img {
		margin: 2em 1.6em 0 0;
		width: 180px;
   }
   
   .photo-quotes {
		margin: 6em 0;
   }
   
   .photo-quotes .mobile-only {
		display: none;
   }
   
   #gray-bg {
		background-color: #e9e9e9;
		padding: 3em 0;
   }
   
   label, input, textarea {
		display: block;
   }
   
   label {
		font-size: 16px;
		color: #4e4e4e;
		margin: 2em 0;
   }
   
   .text-field {
		font-family: 'Roboto', sans-serif;
		margin: 0.5em 0 0 0;
		padding: 1em;
		width: 95.5%;
		border: 1px solid #dedede;
		border-radius: 5px;
   }
   
   textarea {
		font-family: 'Roboto', sans-serif;
		margin: 0.5em 0 0 0;
		width: 100%;
		height:220px;
		border: 1px solid #dedede;
		border-radius: 5px;
   }
   
   #submit {
		background: #0e76bc;
		padding: 1em 3em;
		border: none;
		color: #fff;
		font-weight: 700;
		border-radius: 5px;
   }
   
   #submit:hover {
		background: #3a95d2;
   }
   
   #business-partners {
		margin: 5em 0 5em 0;
   }
   
   #footer {
		padding: 0.5em 0 0 0;
   }
   
   #footer hr {
		margin: 2em 0 2em 0;
   }
   
   .contact {
		font-size: 16px;
		color: #fff;
		line-height: 2em;
   }
   
   .contact span {
		font-style: italic;
   }
   
   .copyright {
		font-size: 14px;
		color: #fff;
   }
   
   .success {
		background: #41ce2a;
		color: #fff;
		font-size: 18px;
		text-align: center;
		margin: .5em 0;
		padding: 1.5em 6em;
	}
	
	.error {
		background: #d00f0f;
		color: #fff;
		font-size: 18px;
		text-align: center;
		margin: .5em 0;
		padding: 1.5em 6em;
	}

/* =============================================================================
   Media Queries
   ========================================================================== */

/* Tablet Portrait size to Base 996px */
@media only screen and (min-width: 768px) and (max-width: 995px) {

	#hero-img {
		height: 315px;
	}
	
	.hero-text {
		font-size: 50px;
		top: 70px;
	}
	
	.dark-title {
		font-size: 40px;
	}
	
	.benefit-paragraph {
		font-size: 16px;
	}
	
	.insurance-title {
		font-size: 40px;
	}
	
	.insurance-paragraph {
		font-size: 16px;
	}
	
	.dark-paragraph {
		font-size: 16px;
	}
	
	.contact {
		font-size: 14px;
	}
	
	.copyright {
		font-size: 12px;
	}

}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {

	.sma-number {
		text-align: left;
		font-size: 20px;
	}
	
	#hero-img {
		height: 300px;
	}
	
	.hero-text {
		font-size: 36px;
		top: 90px;
	}
	
	.dark-title {
		font-size: 36px;
	}
	
	.benefit-paragraph {
		font-size: 14px;
	}
	
	.photo-quotes .desktop-only {
		display: none;
	}
	
	.photo-quotes .mobile-only {
		display: block;
	}
	
	.insurance-title {
		font-size: 36px;
		padding-bottom: 1em;
	}
	
	.insurance-paragraph {
		font-size: 14px;
	}
	
	.dark-paragraph {
		padding-top: 1em;
		font-size: 14px;
	}
	
	.text-field {
		width: 93%;
	}
	
	.contact {
		margin: 2em 0;
		font-size: 12px;
		line-height: 1.4em;
	}
	
	.copyright {
		font-size: 10px;
	}

}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	#logo {
		text-align: center;
	}
	
	.sma-number {
		text-align: center;
		font-size: 20px;
		padding-top: 1em;
	}
	
	#hero-img {
		height: 185px;
	}
	
	.hero-text {
		font-size: 28px;
		top: 47px;
	}

	.photo-quotes .desktop-only {
		display: none;
	}
	
	.photo-quotes .mobile-only {
		display: block;
	}
	
	textarea {
		width: 104%;
	}

}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 479px) {

	#logo {
		text-align: center;
	}
	
	.sma-number {
		text-align: center;
		font-size: 20px;
		padding-top: 1em;
	}
	
	#hero-img {
		height: 185px;
	}
	
	.hero-text {
		font-size: 28px;
		top: 47px;
	}

	.photo-quotes .desktop-only {
		display: none;
	}
	
	.photo-quotes .mobile-only {
		display: block;
	}
	
	textarea {
		width: 104%;
	}

}


/* =============================================================================
   Font-Face
   ========================================================================== */
/* This is the proper syntax for an @font-face file

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