/* Lato Font Family */
@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-Regular.ttf);
font-weight: 400
}
@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-LightItalic.ttf);
font-weight:300;
font-style:italic
}

@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-Light.ttf);
font-weight:300;
}

@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-Italic.ttf);
font-style:italic
}

@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-HairlineItalic.ttf);
font-style:italic;
font-weight:100
}

@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-Hairline.ttf);
font-weight:100
}

@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-BoldItalic.ttf);
font-style:italic;
font-weight:700
}

@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-Bold.ttf);
font-weight:700
}

@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-BlackItalic.ttf);
font-weight:900;
font-style:italic
}

@font-face {
font-family: "Lato";
src:url(../fonts/Lato/Lato-Black.ttf);
font-weight:900;
}

/* Titillium Web Font Family */

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-SemiBoldItalic.ttf);
font-weight: 600;
font-style:italic
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-SemiBold.ttf);
font-weight: 600;
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-Regular.ttf);
font-weight: 400;
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-LightItalic.ttf);
font-weight: 300;
font-style:italic
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-Light.ttf);
font-weight: 300;
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-Italic.ttf);
font-style:italic
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-ExtraLightItalic.ttf);
font-style:italic;
font-weight:200
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-ExtraLight.ttf);
font-weight:200
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-BoldItalic.ttf);
font-weight:700;
font-style:italic
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-Bold.ttf);
font-weight:700;
}

@font-face {
font-family: "Titillium Web";
src:url(../fonts/Titillium/TitilliumWeb-Black.ttf);
font-weight:900;
}



/* Typography */
a{cursor:pointer; color:#024772}
body {
    font-family: Lato, Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	Line-height: 1.5;
	color: #2a2a2a;
	overflow-x:hidden
}
h1 {
	font-family: Titillium Web, Arial, sans-serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.16;
	margin-top: 0;
	margin-bottom: 16px;
	color: #024772;
}
h2 {
	font-family: Titillium Web, Arial, sans-serif;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 8px;
	color: #024772;
}
h3 {
	font-family: Titillium Web, Arial, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 8px;
	color: #024772;
}
h4 {
	font-family: Titillium Web, Arial, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 8px;
	color: #024772;
}
h5 {
	font-family: Titillium Web, Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 8px;
	color: #024772;
}
h6 {
	font-family: Lato, Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 8px;
	color: #6A6A6A;
	letter-spacing:1.5px;
	text-transform:uppercase;
}
blockquote {
	font-family: Titillium Web, Arial, sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.25;
	font-style: italic;
	margin: 0;
}
p {
	margin-top: 0;
	margin-bottom:24px;
}

.primary-font { font-family: Lato, Arial, sans-serif; }
.secondary-font { font-family: Titillium Web, Arial, sans-serif; }

.medium-text { font-size: 18px; }
.small-text { font-size: 16px; }
.micro-text { font-size: 12px; }


/* Fill colors */
.fill-color1 { fill: #016E31 !important; }
.fill-color2 { fill: #052148 !important; }
.fill-color3 { fill: #E0E0E0 !important; }
.fill-color4 { fill: #F2F2F2 !important; }
.fill-color5 { fill: #FFFFFF !important; }


/* CTAs */
a.wsi-text-button {
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	text-transform: uppercase;
	padding: 4px 0px;
	letter-spacing: 1.5px;
	border-radius: 6px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}
a.wsi-text-button:hover, 
a.wsi-text-button.hover {
	background-color: #E0E0E0;
	padding: 4px 16px;
}
a.wsi-text-button: after {
	content:"\f061";
	font-family: fontawesome;
	font-weight: 400;
	margin-left: 8px;
}
a.wsi-text-button.text-green {
	color: #03A549;
}
a.wsi-text-button.text-green:hover,
a.wsi-text-button.text-green.hover {
	color: #024772;
}
a.wsi-text-button.text-blue {
	color: #024772;
}
a.wsi-text-button.text-blue:hover,
a.wsi-text-button.text-blue.hover {
	color: #03A549;
}
a.wsi-text-button.text-gray {
	color: #E0E0E0;
}
a.wsi-text-button.text-gray:hover,
a.wsi-text-button.text-gray.hover {
	color: #024772;
}
a.wsi-text-button.text-white {
	color: #FFFFFF;
}
a.wsi-text-button.text-white:hover,
a.wsi-text-button.text-white.hover{
	color: #024772;
}

a.wsi-button,
a.cta_button {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	max-width: 100%;
	padding: 12px 32px;
	font-size: 13px;
	line-height: 1.6;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-align: center;
	background-color: #03A549;
	color: #FFFFFF;
	border:1px solid #03A549;
	text-decoration: none !important;
	text-transform: uppercase;
	cursor: pointer;
  	border-radius: 3px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

a.solid-green {
	background-color: #03A549;
	border-color: #03A549;
	color: #FFFFFF;
}
a.border-green {
	background-color: transparent;
	border-color: #03A549;
	color: #016E31;
}
a.solid-white {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: #024772;
}
a.border-white {
	background-color: transparent;
	border-color: #FFFFFF;
	color: #FFFFFF;
}
a.solid-blue {
	background-color: #024772;
	border-color: #024772;
	color: #FFFFFF;
}
a.border-blue {
	background-color: transparent;
	border-color: #024772;
	color: #024772;
}

a.small-button {
	font-size: 11px;
	padding: 12px 24px;
}
a.medium-button {
	font-size: 13px;
	padding: 12px 32px;
}
a.large-button {
	font-size: 15px;
	padding: 24px 32px;
}
a.huge-button {
	font-size: 15px;
	padding: 32px 64px;
}


/* CTAs Hover */
a.wsi-button:hover,
a.wsi-button.hover,
a.cta_button:hover {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	transform: scale(1.03);	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
a.solid-green:hover,
a.solid-green.hover {
	background-color: #024772;
	border-color: #024772;
	color: #FFFFFF;
}
a.border-green:hover,
a.border-green.hover {
	background-color: #03A549;
	color: #FFFFFF;
}
a.solid-white:hover,
a.solid-white.hover {
	background-color: #03A549;
	border-color: #03A549;
	color: #FFFFFF;
}
a.border-white:hover,
a.border-white.hover {
	background-color: #FFFFFF;
	color: #03A549;
}
a.solid-blue:hover,
a.solid-blue.hover {
	background-color: #03A549;
	border-color: #03A549;
	color: #FFFFFF;
}
a.border-blue:hover,
a.border-blue.hover {
	background-color: #024772;
	color: #FFFFFF;
}


/* CTAs Focus */
a.wsi-button:focus,
a.cta_button:focus {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	transform: scale(1.03);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; 
}
a.solid-green:focus {
	background-color: #03A549;
	border-color: #03A549;
	color: #FFFFFF;
}
a.border-green:focus {
	background-color: transparent;
	color: #016E31;
}
a.solid-white:focus {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: #03A549;
}
a.border-white:focus {
	background-color: transparent;
	color: #FFFFFF;
}
a.solid-blue:focus {
	background-color: #024772;
	border-color: #024772;
	color: #FFFFFF;
}
a.border-blue:focus {
	background-color: transparent;
	color: #024772;
}


/* CTAs on Dark Background */
a.disabled-cta {
	background-color: #E0E0E0 !important;
	border-color: #E0E0E0 !important;
	color: #FFFFFF !important;
	cursor: not-allowed;
}



/* Background and Foreground Color Behaviors */
.bg-color1 {
	background-color: #016E31;
	color: #FFFFFF;
	fill: #FFFFFF;
}
.bg-color1 * {
	color: #FFFFFF;
}
.bg-color2 {
	background-color: #052148;
	color: #FFFFFF;
	fill: #FFFFFF;
}
.bg-color2 * {
	color: #FFFFFF;
}
.body-container .bg-color2 a {
	color: #FFFFFF;
}
.body-container .bg-color2 a:hover {
	color: #65A4BE;
}
.bg-color3 {
	background-color: #E0E0E0;
	color: #FFFFFF;
	fill: #FFFFFF;
}
.bg-color4 {
	background-color: #F2F2F2;
	color: #FFFFFF;
	fill: #FFFFFF;
}
.bg-color5 {
	background-color: #FFFFFF;
	color: #FFFFFF;
	fill: #FFFFFF;
}
.bg-color5 h1, .bg-color5 h2, .bg-color5 h3, .bg-color5 h4, .bg-color5 h5  { color: #024772;}
.bg-color5 h6  { color: #6A6A6A; }



/* Globals */

.transition,
.transition:hover { 
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.border-radius { border-radius: 6px; }

.shadow { box-shadow: 0px 17px 50px 0px rgba(0, 0, 0, 0.19), 0px 12px 15px 0px rgba(0, 0, 0, 0.24); }
.shadow-hover:hover { box-shadow: 0 17px 40px 0 rgba(0,0,0,0.19), 0px 12px 15px 0px rgba(0,0,0,0.24); }

.layer1 { z-index:1; }
.layer2 { z-index:2; }
.layer3 { z-index:3; }
.layer4 { z-index:4; }
.layer5 { z-index:5; }

hr { border: 0; height: 0; width:100%; border-top: 1px solid #d6d6d6; margin:25px auto;}
.popup hr { width:140px; max-width:100%; }


/* Slanted Section */
.slanted-section { position: relative; }
.slanted-element { position: absolute; left: 0; width: 100%; height: 15vw; max-height: 100px; overflow: hidden; }
.slanted-section.slanted-top .slanted-element { top: 0; }
.slanted-section.slanted-bottom .slanted-element { bottom: -1px; }
.slanted-spacer:after { content:""; display: block; height: 15vw; max-height: 100px; width: 100%; } 
.slanted-section.slanted-middle .slanted-element { bottom: 50%; }
.slanted-element svg {width: 1920px;  height:100%; max-width: none; position: relative;  left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); }
.slanted-fill-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; }

@media(max-width:767px)
{
	body {
    font-size: 18px;
	}
	h1, h2{font-size:32px}
	h3{font-size:24px}
	h4{font-size:20px}
}