html {
  box-sizing: border-box;
  height: 100%;
  font-size: 62.5%;
}

body {
  background: #fff;
  opacity: none;
  margin:0;
  color: rgba(24,24,24,0.7);
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.8rem;
  line-height: 1.6;
  will-change: transition;

  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:before, *:after {
  box-sizing: inherit;
}


.flex-grid {
  display: flex;
  justify-content: space-between;
   flex-direction: row;
}
.flex-grid .flex-col3 {
  width: 32%;
}
.flex-grid .flex-col2 {
  width: 46%;
}
.flex-grid .flex-col1 {
  width: 100%;
}
.flex-grid.top-padding {
  margin-top:120px;
}








#intro {
padding: 120px 400px 80px 400px;
  color:#FFF;
 text-align: center; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0c86cb+0,d74353+100 */
background: linear-gradient(135deg,  #0c86cb 0%,#d74353 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#cta-grey {
background-color:#f4f4f4;
clear: both;	
color: #0a3055;
justify-content:center;
margin: 50px 0;
}

#cta {
font-size: 1.4em;
text-align: center;
padding: 80px 400px 80px 400px;
}

.content-header {
background-color:#d64353;
width: 100%;
text-align: left;
  height: 360px;
  color: white;
  font-family: "Gotham", sans-serif;
}

.content-header-title {
padding: 240px 0 0 300px;
}

#usps {
clear: both;	
color: #D64353;
font-size: 1.2em;
justify-content:center;
margin: 50px 0;
}
#usps-content {
text-align: center;
padding: 0 15px 0 15px;
}
 #text{
color: #0B304E;
font-size: 1.1em;
font-weight: 600;
line-height: 1.8em;
 padding: 8rem 25% 6rem;
 }


@media (min-width: 1024px) and (max-width: 1380px) {
#intro {
padding: 50px 100px 50px 100px;
}  
#cta {
display:inline-block;
text-align: center;
padding: 30px 100px 50px 100px;
}
.content-header-title {
padding: 240px 0 0 100px;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
#intro {
padding: 30px 8px 50px 8px;
} 
#cta {
display:inline-block;
text-align: center;
padding: 30px 8px 50px 8px;
}
.content-header {
background-color:#d64353;
width: 100%;
text-align: left;
  height: 280px;
  color: white;
  font-family: "Gotham", sans-serif;
}
.content-header-title {
padding: 140px 0 0 50px;
}
 #text{
color: #0B304E;
font-size: 1.1em;
font-weight: 600;
line-height: 1.8em;
 padding: 8rem 10% 6rem;
 }
}

@media (max-width: 768px) {
#intro {
padding: 30px 8px 50px 8px;
} 
#cta {
display:inline-block;
text-align: center;
padding: 30px 15px 50px 15px;
font-size: 1.2em;
}
.content-header {
background-color:#d64353;
width: 100%;
text-align: center;
  height: 200px;
  color: white;
  font-family: "Gotham", sans-serif;
}
.content-header-title {
padding: 120px 0 0 0;
}
 #text{
color: #0B304E;
font-size: 1.0em;
font-weight: 600;
line-height: 1.8em;
 padding: 8rem 8% 6rem;
 }
}







/* links */
a.white {
  color: #FFF;
  text-decoration: none;
}
a.white:hover {
  color: #F5F5F5;
  text-decoration: none;
}
a {
  color: #da4251;
  text-decoration: none;
}
a:hover {
  color: #b74e66;
  text-decoration: none;
}

/* general */
p {padding: 10px 0 25px 0;}
p.small {font-size: 0.8em;padding: 30px 0 30px 0;}
.small {font-size: 0.6em;}
p.pd {padding:0 10px 0 10px;max-width: 750px;}
p.bold{font-weight:600;}
.italic{font-style:italic;}
.white{color:#FFF;}
.orange {color: #e26c2f;}

ul#list  { 
margin: 40px 0 20px 20px;
padding: 0;
list-style: none;
} 

ul#list li{
font-size: 1.1em;
font-weight: 600;
padding: 0 0 25px 10px;
list-style-type: circle;
}

ul#list-horizontal  { 
margin: 80px 0 50px 0;
padding: 0;
list-style: none;
} 

ul#list-horizontal li{
display: inline-block;
font-size: 1.1em;
font-weight: 300;
padding: 5px 0 15px 55px;
margin:0 15px 25px 0;
background-image:url('../images/bullet-usp.png');
background-position: top left;
background-repeat:no-repeat;
}

ul#list-horizontal li.red{
display: inline-block;
font-size: 1.1em;
font-weight: 300;
padding: 5px 0 15px 55px;
margin:0 15px 25px 0;
background-image:url('../images/bullet-usp-red.png');
background-position: top left;
background-repeat:no-repeat;
}



/* headers */
h1,h2,h3 {
  line-height: 1.3;
}
h1.home {
  font-size: 1.2em;
  margin: 0 0 40px 0;
  color: #FFF;
  line-height: 1.6em;
}
h1.content {
	font-size: 3.2em;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 30px;
}
h2.sub {
  color: #1C2E38;
  font-size: 1.2em;
  font-weight:600;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
}
h3{
  color: #da4251;
  margin: 30px 0 20px 0;
  font-size: 1.4em;
  font-weight: 400;
}
h4 {
  color: #191919;
  margin: 30px 0 5px 0;
  font-size: 1.1em;
  font-weight: 600;
}



@media (min-width: 1024px) and (max-width: 1380px) {
h1.content {
	font-size: 3.2em;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 30px;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
h1.content {
	font-size: 2.8em;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 30px;
}
}

@media (max-width: 768px) {
h1.content {
	font-size: 1.6em;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 30px;
}
}




footer {
padding: 4rem 10% 2rem;
font-size: 0.9em;
color:#1c2e38;
text-align: center;
background: #FFF;

}

footer a {  color: #0a3055;}
footer .footer-small {font-size: 0.8em;padding:140px 0 0 0;text-align: center;}
footer .pd {padding: 0;}





	
/* XLarge Breakpoints */
@media (max-width: 1140px) {
}


/* Large Breakpoints */
@media (max-width: 980px) {

}

/* Tablet Breakpoints */
@media (max-width: 768px) {
.flex-grid {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.flex-grid .flex-col3, .flex-grid .flex-col2  {
  width: 100%;
}
.flex-grid.deco-left {
  display: flex;
  flex-grow: 1;
  flex-direction: column-reverse;
}
.flex-grid.about .flex-col3, .flex-grid .flex-col2  {
  width: 100%;
}

}


/* Mobile Breakpoints */
@media (max-width: 767px) {

}