/* Main Stylesheet */
/* 2-10 - SEO Landing Pages - Infographic Page */
/* Author - Casey Winslow - cwinslow@parallelpath.com */
/* Page is written using Bootstrap 4.0.0-alpha.6 */
/* Styles are Mobile First, the main styles are for the Mobile Display Size (<576px) */
/* Media queries handle the styling for larger screens */

/*
Dark Red - #861e42
Purps - #304094
Teal -#00a2ac
Gray - #edf0f5
*/


/* ------ Imported Fonts for Officina Sans Black and Bold ------ */

	@font-face {src:url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600,700");font-family: "open+sans";
	    
	}

	@font-face {
	    font-family: 'itc_officina_sansbold';
	    src: url('https://fonts.googleapis.com/css?family=Open+Sans:bold,extrabold');
	    src: url('../fonts/officinasans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/officinasans-bold-webfont.woff') format('woff'), url('../fonts/officinasans-bold-webfont.ttf') format('truetype'), url('../fonts/officinasans-bold-webfont.svg#itc_officina_sansbold') format('svg');
	    font-weight: 100;
	    font-style: normal;
	}

/* ------ Base Styles ------ */

	body, ul, li { font-family: 'Open Sans'; -webkit-font-smoothing: antialiased; }
iframe {align-items: center;width: 560px;height: 315px;}
	#videocontent {padding: 1rem;}
	h1 {color:#fff; -webkit-font-smoothing: antialiased;font-size: 45px;text-transform: none;font-weight: 700;}
	h2 {-webkit-font-smoothing: antialiased;font-size: 30px;}
	h3 {-webkit-font-smoothing: antialiased;font-size: 20px;}

	p { font-size: 1rem; line-height: 2rem; font-weight: 300;}
	li, ul { font-size: 1rem; line-height: 2rem; font-weight: 200;}
	sup {font-size: 10px;}
	.cta-button {
	  color: #fff;
	  font-size: 18px;
	  font-weight: 700;
	  text-transform: uppercase;
	  text-align: center;
	  padding: 12px 0;
	  width: 100%;
	  display: block;
	  margin: 1rem auto 2rem;;
	  border-radius: 10px;
	}
	img{width: 66% !important;height:auto !important;}
	.link {font-weight: bold;color: #b5be34;}
	a:hover {color:#ffffff;}
	a {color:#00a3ad;}
	.cta-button:hover, .cta-button:focus, .cta-button:active { text-decoration: none; background-color: #ee9e09; color: #000;}
	.red-cta { background-color: #871e42;padding: 5px 15px;color: #ffffff;margin: 0px;text-transform:uppercase;width:auto;}
	.red-cta:hover, .red-cta:focus, .red-cta:active { text-decoration: none; background-color: #00a2ac; color: #fff; }
	.purps-cta { background-color: #00a3ad; }
	.purps-cta:hover, .purps-cta:focus, .purps-cta:active { text-decoration: none; background-color: #afb1d4; color: #ffffff; }
	.teal-cta { background-color: #00a3ad;padding: 10px;color: #ffffff;margin: 0px;text-transform:uppercase;width:auto; }
	.teal-cta:hover, .teal-cta:focus, .teal-cta:active { text-decoration: none; background-color: #afb1d4; color: #ffffff; }
	.blue-cta { background-color: #1c1f4b;padding: 5px 40px;color: #ffffff;margin: 0px;text-transform:uppercase;width:auto;}
	.blue-cta:hover, .teal-cta:focus, .teal-cta:active { text-decoration: none; background-color: #00a3ad; color: #ffffff; }
	.container-fluid { padding: 0; }
	.expand-link {padding:20px;}

/* ------ Header Styles ------ */

	.header { background-color: #edf0f5; color: #fff; padding: 0px 20px;margin: auto; }
	#logo { display: inline-block;}
	#logo img { width: 100% !important;}
	#social { display: inline-block; }
	#social a { margin: 0 .2rem; display: inline-block; }
/* Mobile Nav */
	.btn {padding: 0; border-radius: 0; background-color: transparent; position: fixed; top: 1rem; right: 1rem;	}
	.btn:hover, .btn:visited, .btn:focus { background-color: transparent; }
	.btn-default { border: none; }
	.open .dropdown-toggle.btn-default { background-color: transparent; }
	.dropdown-toggle:after { display: none; }
	.dropdown-menu {border: 1px solid #861e42; border-radius: 0; padding: 1rem; text-transform: uppercase; background-color: #861e42; width: 100%; margin: 0; position: absolute; right: 0px;}
	.dropdown-menu li {	line-height: 3;	}
	.dropdown-menu li>a { color: #fff; }
	.dropdown { width: 100%;}

	/* Desktop Nav */
	#desktop-nav { text-align: center; margin: -20px auto 0; padding: 0 0; }
	#desktop-nav li {display: inline-block !important; text-transform: uppercase;}
	#desktop-nav li a {display: block; color: #231f20; padding:0 3rem;}
	#desktop-nav li a.selected { color: #231f20; font-weight: 600; }
	#desktop-nav li a:hover {background-color: #304094; color: #fff; text-decoration: none;}
	.click {display: block !important;}
	.sticky { position: fixed; top: 0; width: 100%;}
	.sticky + .content {  padding-top: 20px;}

/* ------ Form Styles ------ */
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 15px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

.close {
	background: #314095;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: 10px;
	text-align: center;
	top: 10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00a3ad; }
#form-header {
		background-color: #ffffff;
		padding: 2rem 2rem 1rem;
	}
	#form-header h3 { text-transform: none;color: #4d4d4d; }
	#seo-lp_gated-form {
		padding: 2rem 2rem;
		margin: 0 0 2rem;
	}
	#seo-lp_gated-form2 {
		padding: 2rem 2rem;
		margin: 0 0 2rem;
	}
	#seo-lp_gated-form3 {
		padding: 2rem 2rem;
		margin: 0 0 2rem;
	}

	#form {
		background-color: #ffffff;
		color: #4d4d4d;
		/*padding: 2rem 2rem;*/
	}

	#form input {
		font-weight: 600;
		font-size: 1rem;
		border-radius: .5rem;
		border-color: #4d4d4d;
		color: #939598;
		margin: 0 0 1rem;
	}
#form select {
		font-weight: 600;
		font-size: 1rem;
		border-radius: .5rem;
		border-color: #4d4d4d;
		color: #939598;
		margin: 0 0 1rem;
	}

	.form-check {
		padding: 10px 0;
	}

	#save-form {
		border: none;
	}
	#save-form2 {
		border: none;
	}	
#save-form3 {
		border: none;
	}
/* ------ img Styles ------ */
	.imgtop {padding: 100px 0 0;}
	.img {padding: 20px 0 0;}
	.hero-img {width: 100% !important; height: auto;display: block; margin: 0 auto; }


/* ------ Section 1 Styles ------ */
	#section-1 {background-color: #1c1f4b; padding: 0 0;}

	h1 { padding: .5rem 0 0rem; text-align: center; }
	#section-1 p {padding:0 0rem; text-align: center;color: #ffffff; }
	#cta-container { margin-top: -38px; padding: 4rem 0 2rem; background-color: #fff;}


/* ------ Section 2 Styles ------ */
	#section-2 {padding: 40px 50px; width: 100%;}
	#section-2 img {display: block; margin: auto;}
	#section-2 h2 { color: #871e42;font-weight: bold;text-align: center;padding-left: 0 10px;}
	#section-2 p {color: #6b6862;font-size: 1.2rem; width: 100%;}
	.section-2 {padding: 20px; width: 100%;}
	.section-2 p {color: #6b6862;font-size: 1.2rem; width: 100%;}

/* ------ Section 2a Styles ------ */
	.section-2a {padding: 5px 0; width: 100%;}
	.section-2a img {display: block; margin: auto;}
	.section-2a h2 { color: #1c1f4b; font-weight: bold;padding-left: 10px;text-align: right;}
	.section-2a p {	color: #6b6862; font-size: 1.2rem; width: 100%;}
	.section-2a li {color:#1c1f4b; font-weight: bold;text-align: left;padding-left: 10px; font-size: 1.2rem;}

/* ------ Section 2b Styles ------ */
	.section-2b {padding: 5px 0; width: 100%;}
	.section-2b img {display: block; margin: auto;}
	.section-2b h2 { color: #00a3ad; font-weight: bold;padding-left: 10px;text-align: right;}
	.section-2b p {	color: #6b6862; font-size: 1.2rem; width: 100%;text-align: left;}
	.section-2b li {color:#00a3ad; font-weight: bold;text-align: left;padding-left: 10px; font-size: 1.2rem;}

/* ------ Section 2c Styles ------ */
	.section-2c {padding: 5px 0; width: 100%;}
	.section-2c img {display: block; margin: auto;}
	.section-2c h2 { color: #1c1f4b; font-weight: bold;text-align: center;}
	#link2c {text-align: center !important;padding: 10px 20px; }
	#link2c a {color:#6b6862; font-weight: bold;text-align: center !important;font-size: 1.2rem;}
	.section-2c p {	color: #6b6862;width: 100%;text-align: left !important;font-size: 1.2rem;}
	.section-2c li {color:#871e42; font-weight: bold;text-align: left;padding-left: 10px; font-size: 1.2rem;}

/* ------ Section 3 Styles ------ */
	#section-3 {background-color: #00a3ad;text-align: center !important;}
	#section-3 p {color: #ffffff ;font-size: 1.2rem;line-height: 2.2rem;text-align:center !important; padding: 0px 20px;}
	#section-3 h2 {text-align: center;color: #ffffff;padding: 10px 20px;font-weight: bold;}
	.section-3 {padding: 30px 20px; background-color: #1c1f4b;align-content: center;}
	.section-3 p {color: #ffffff;font-size: 1.2rem;line-height: 2rem;text-align:center !important;padding: 0px 20px;}
	.section-3b a {color: #FFFFFF;}
	.section-3 h2 {text-align: center;color: #ffffff;padding: 20px;font-weight: bold;}
	.section-3 h3 {text-align: center;color: #00a3ad;padding: 10px;font-size: 18px;}
	.section-3b h2 {text-align: center;color: #ffffff;padding: 20px;font-weight: bold;}
	.section-3b h4 {text-align: center;color: #ffffff;padding: 20px;font-weight: bold;font-size: 18px;}
	.section-3b {padding: 30px 20px; background-color: #1c1f4b;align-content: center;}
	.section-3 h4 {text-align: center;color: #ffffff;padding: 10px;font-size: 18px;}
	.dl {width: 134px !important;display: block; margin-left: auto; margin-right: auto;}
	.section-3c {padding: 20px 0 0;}
	.section-3c p {color: #6b6862;font-size: 1.2rem;line-height: 2.2rem;text-align:center !important;padding: 0px 20px;}
	.section-3c h2 {text-align: center;color: #871e42;padding: 0px 20px;font-weight: bold;}
/* ------ Section 4 Styles ------ */
	.section-4 {padding: 30px 20px;align-content: center !important;border-bottom: 1px solid #eaeaea;text-align:center !important;}
	.section-4 p {color: #4d4d4d;font-size: 1.2rem;line-height: 2rem;text-align:center !important;padding: 0px 20px;}
	.section-4 a {color: #4d4d4d;font-size: 1.2rem;line-height: 2rem;text-align:center !important;}
	.section-4 h2 {text-align: center;color: #1c1f4b;padding: 10px;font-weight: bold;}



/* ------ Footer Styles ------ */

	footer {height: auto; width: 100%; background-color: #871e42; padding: 1rem;}		
	.smalltext {font-size:10px; line-height: 1px;}
	footer p { font-size: 12px; text-align: center;color: #ffffff; line-height: 15px;}

/*  ---------------  Media Queries for Responsive Design  ---------------  */


/* --------------- Small devices (tablets, 576px) --------------- */
@media screen and (max-width: 576px) { 
	.teal-cta {font-size:15px;}
	.section-1 h1 { font-size: 1.5rem; padding: 2rem 1rem 1rem; }
	#section-2 {padding: 1rem; }
	.section-3 {padding: 1rem; }
	.section-2a {padding: 1rem; }
	.section-2b {padding: 1rem; }
	.section-2c {padding: 1rem; }
	p {padding: 1.5rem;}
	.blue-cta, .red-cta {display: block;}
	
}
@media screen and (min-width: 576px)  {
	h1 { font-size: 1.2rem; padding-top: 1rem; }
	h2 { font-size: 1.2rem; padding: 10px 0; }
	#section-2 {padding: 1rem 3rem; }
	.section-2a{padding: 1rem 3rem; }
	.section-2b {padding: 1rem 3rem; }
	.section-2c {padding: 1rem 3rem; }
	.section-3 {padding: 1rem 3rem; }
	#section-1 {padding: 2rem 3rem; }

}



/* --------------- Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px)  {
	p { font-size: 1rem; padding:20px 10px; }
	h1 { font-size: 3rem; padding-top: 4rem; }
	#section-1 {padding: 1rem; }
	
}
@media screen and (max-width: 768px) {
	h1 {font-size: 20px;padding: 30px 0;}
	#social {padding: 2px;width: auto;}
	h2 { font-size: 25px; padding: 10px 0; }
	img {padding: 10px 0 0;}
	.imgtop {padding:5rem 0 0}
	.section-2a h2 {text-align: center;}
	.section-2a img {width: 50% !important;}
	.section-2b h2 {text-align: center;}
	.section-2b img {width: 50% !important;}
	.section-2c h2 {text-align: center;}
	.section-2c img {width: 50% !important;}
	.section-2c a {color:#1c1f4b; font-weight: bold;text-align: center !important;font-size: 1.2rem;}
	#videocontent {padding: 1rem 2rem;}
}
/* --------------- Large Devices - laptops & desktops  ------------ */

@media screen and (min-width: 992px) {
	#social { float: right; }
	header { padding: 1.6rem 1rem 0; }
	.cta-button { display: block; margin: 0 auto; width: 100%; max-width: 360px; }
	h1 { padding: 4rem 3rem 1rem; }
	h2 {font-size: 2rem;}
	h2 {font-size: 1.5rem;}
	footer p { font-size: 1rem; }
}
@media screen and (max-width: 992px) {
	h1 {font-size: 30px;padding-bottom: 20px;}}
	.cta-button { display: block; margin:10px auto; width: 100%; max-width: 400px; }

/* ----------------  Extra Large Devices - laptops & desktops --------------- */

@media screen and (min-width: 1000px) {
	h1 { padding: 5rem 3rem 1rem; } 
	.col-12 {padding: 12px;}
	.cta-button { display: block !important;margin: 10px auto !important; width: 100%; max-width: 400px; }
	
}
@media screen and (min-width: 1200px){

	
}