/* 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 {
	    font-family: 'officinasansitc_blackregular';
	    src: url('../eot/officinasans-black-webfont-4.eot');
	    src: url('../eot/officinasans-black-webfontd41d-4.eot#iefix') format('embedded-opentype'), url('../woff/officinasans-black-webfont-4.woff') format('woff'), url('../ttf/officinasans-black-webfont-4.ttf') format('truetype'), url('../svg/officinasans-black-webfont-4.svg#officinasansitc_blackregular') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}

	@font-face {
	    font-family: 'itc_officina_sansbold';
	    src: url('../eot/officinasans-bold-webfont-4.eot');
	    src: url('../eot/officinasans-bold-webfontd41d-4.eot#iefix') format('embedded-opentype'), url('../woff/officinasans-bold-webfont-4.woff') format('woff'), url('../ttf/officinasans-bold-webfont-4.ttf') format('truetype'), url('../svg/officinasans-bold-webfont-4.svg#itc_officina_sansbold') format('svg');
	    font-weight: 100;
	    font-style: normal;
	}

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

	body, a, ul, li { font-family: 'Open Sans'; -webkit-font-smoothing: antialiased; }

	h1 {
		font-family: 'officinasansitc_blackregular';
		color:#fff; -webkit-font-smoothing: antialiased;
		font-size: 40px;
		text-transform: uppercase;
	}
h2 {-webkit-font-smoothing: antialiased;
		font-size: 30px;
	}
h3 {-webkit-font-smoothing: antialiased;
		font-size: 20px;
	}

	p { font-size: 1rem; line-height: 2; font-weight: 300;}
	li, ul { font-size: 1.2rem; line-height: 2; font-weight: 200;}
	.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[class="img-max"]{
          max-width: 100% !important;
          width: 100% !important;
          height:auto !important;
        }

	.cta-button:hover, .cta-button:focus, .cta-button:active { text-decoration: none; background-color: #ee9e09; color: #000;}

	.red-cta { background-color: #861e42; }
	.red-cta:hover, .red-cta:focus, .red-cta:active { text-decoration: none; background-color: #00a2ac; color: #fff; }

	.purps-cta { background-color: #afb1d4; }
	.purps-cta:hover, .purps-cta:focus, .purps-cta:active { text-decoration: none; background-color: #314095; color: #fff; }

	.teal-cta { background-color: #314095; }
	.teal-cta:hover, .teal-cta:focus, .teal-cta:active { text-decoration: none; background-color: #314095; color: #ffffff; }

	.container-fluid { padding: 0; }
	.expand-link {padding: 0 0 20px 20px;}

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

	header {
		background-color: #edf0f5;
		color: #fff;
		padding: 1.6rem 1rem;
	}

	#logo { display: inline-block; }
	#logo img { width: auto; height: 70px; }

	#social { display: inline-block; }

	#social a { margin: 0 .2rem; display: inline-block; }
	#social img { display: inline-block; margin: 0; }

	/* 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; display: block; margin: 2rem auto 0; padding: 0 0 .9rem; }

	#desktop-nav li {
		display: inline;
		text-transform: uppercase;
	}

	#desktop-nav li>a { color: #231f20; padding:1rem 3rem 1.1rem; }

	.selected {
		background-color: #b5be34;
		color: #fff;
	}
	#desktop-nav li>a.selected { color: #fff; font-weight: 600; }

	#desktop-nav li>a:hover {
		background-color: #304094;
		color: #fff;
		text-decoration: none;
	}

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

	#hero-img { width: 60%; height: auto; max-width: 940px; display: block; margin: -40px auto; }

	h1 { padding: 0px; text-align: center; }
h2 { padding: 1rem 1rem; text-align: left; }

	#cta-container { margin-top: 0px; padding: 4rem 0 2rem; background-color: #fff; }


/* ------ Section 2 Styles ------ */
	#section-2 {padding: 20px; background-color: #f0f3cf; width: 100%;border-bottom: 1px solid #cacdd0;}

	#section-2 h2 { color: #6b6862;}


	#section-2 p {
		color: #6b6862;
		font-size: 1.2rem; width: 100%; padding-left: 20px;
	}
	.section-2 {padding: 20px; background-color: #f0f3cf; width: 100%;border-top: 1px solid #cacdd0;}

	.section-2 h2 { color: #6b6862;}


	.section-2 p {
		color: #6b6862;
		font-size: 1.2rem; width: 100%; padding-left: 20px;
	}
/* ------ Section 2b Styles ------ */
	#section-2b {padding: 20px 30px; background-color: #f0f3cf; width: 100%;border-bottom: 1px solid #cacdd0;border-top: 1px solid #cacdd0;}

	#section-2b h2 { color: #6b6862; padding-top: 10px; }

	h3 { color: #6b6862;padding:0px 20px;
	}

	#section-2b p {
		color: #6b6862;
		font-size: 1.2rem; width: 100%;padding:10px 20px;
	}
/* ------ Section 2c Styles ------ */
	#section-2c {padding: 20px 30px;
		background-color: #f0f3cf; width: 100%;}

	#section-2c h2 { color: #6b6862;padding:0px 20px;}

h3 { color: #6b6862;}

	#section-2c p {
		color: #6b6862;
		font-size: 1.2rem; width: 100%;padding:10px 20px;
	}
/* ------ Section 2d Styles ------ */
	#section-2d {padding: 20px; width: 100%;border-bottom: 1px solid #cacdd0;border-top: 1px solid #cacdd0;}

	#section-2d, h2 { color: #6b6862;}


	#section-2d p {
		color: #6b6862;
		font-size: 1.2rem; width: 100%; padding-left: 20px;
	}
	.section-2d {padding: 20px; width: 100%;border-top: 1px solid #cacdd0;}

	.section-2d h2 { color: #6b6862;}

	h3 {color: #6b6862;
	}

	.section-2d p {
		color: #6b6862;
		font-size: 1.2rem; width: 100%; padding-left: 20px;
	}
/* ------ Section 2e Styles ------ */
	#section-2e, #section-2f {padding: 20px; width: 100%;border-top: 1px solid #cacdd0;}

	#section-2e, #section-2f h2 { color: #6b6862; padding-top: 10px; }

	h2 {color: #6b6862; padding:0px 20px;text-align: left;
	
	}
	h3 {color: #4d4d4d;font-weight: bold;padding: 20px;
	}
h4 {color: #4d4d4d;font-weight: bold; padding: 10px 20px 0 20px;
	}

	#section-2e, #section-2f p {
		color: #6b6862;
		font-size: 1.2rem; width: 100%; padding-left: 20px;
	}


/* ------ Section 3 Styles ------ */
	#section-3 {
		padding: 4rem 2rem;

	}

	#section-3 p {
		color: #6b6862 ;
		font-size: 1.2rem;
		line-height: 2;
		text-align: left;
		padding: 10px 0 0 20px;
	}
	h2 {text-align: left;	}

	.carousel-control-next, .carousel-control-prev {
		width: 2%;
		color: #6b6862;
	}

	.carousel-control-prev-icon {
	    background-image: url(../png/slider-arrow-4.png);
	    width: 17px;
	    height: 30px;
	}

	.carousel-control-next-icon {
	    background-image: url(../png/slider-arrow-4.png);
	    width: 17px;
	    height: 30px;
	    -webkit-transform: rotate(180deg);
	    -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	    -o-transform: rotate(180deg);
	    transform: rotate(180deg);
	}
/* ------ Section 3b Styles ------ */
	#section-3b {
		padding: 20px;border-bottom: 1px solid #cacdd0;border-top: 1px solid #cacdd0;


	}

	#section-3b p {
		color: #6b6862 ;
		font-size: 1.2rem;
		line-height: 2;
		text-align: left;
		padding: 10px 0 20px 20px;
	}
	


/* ------ Section 4 Styles ------ */
	#section-4 {
		padding: 4rem 3rem;
		background-color: #861e42;
	}

	#section-4 img {
		display: block; margin: 0 auto;
	}

	#section-4 a { color: #fff; }
	#section-4 a:hover, #section-4 a:active, #section-4 a:focus { color: #fff; }

/* ------ Section 5 Styles ------ */

	#section-5 {padding: 2rem 1rem; }

	#section-5 h2 { color: #6b6862; padding-top: 3rem; }

	#section-5 img { display: block; margin: 4rem auto 2rem; }

	h2 {
		font-weight: 600;
		font-size: 1.6rem;
	}

	#section-5 p {
		color: #6b6862;
		font-size: 1.2rem;
	}

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

	footer {
		height: auto;
		width: 100%;
		background-color: #314095;
		padding: 1rem 0 0.001rem;
	}

	footer p { font-size: .7rem; text-align: center; color:#ffffff; font-weight: bold; }



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

/* --------------- Small devices (tablets, 576px and up) --------------- */
@media screen and (min-width: 576px)  {

}

/* --------------- Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px)  {
	p { font-size: 1rem; }

	h1 { font-size: 3rem; padding-top: 4rem; }

	#section-2, #section-3, #section-5 {padding: 2rem 5rem; }
}
@media screen and (max-width: 768px) {h1 {font-size: 20px;padding: 30px 0;}
	#hero-img { width: 60%; height: auto; max-width: 940px; display: block; margin: -20px auto; }}
/* --------------- 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: 3rem 3rem; }

	#logo img { width: auto; height: 124px; }


	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: 4rem 3rem; }

	#desktop-nav li>a { color: #231f20; padding:1rem 2rem 1.2rem ; }
	.col-12 {padding: 12px;}
	.cta-button { display: block !important;margin: 10px auto !important; width: 100%; max-width: 400px; }
}