@import url('reset.css');
@import url('basic.css');
@import url('heroVid.css');
@import url('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,800';

/* ********************************************************** */
/* ********************** TEXT STYLES *********************** */

h1, h2, h3, h4, h5, h6 {font-weight: 300; line-height: 150.0%;}

h1{font-family: 'Open Sans', Helvetica, sans-serif; font-size: 3em; margin-top: 0; margin-bottom: 5px; color: #FFFFFF;}

h2{font-family:'Open Sans', Helvetica, sans-serif; font-size: 2.5em; margin-top: 0;  margin-bottom: 10px;}

p { font-family: 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.5em; font-weight: 300; font-size: 1.1em; letter-spacing: .05rem; max-width:  90%; margin-top: 12px;}

.chunky{font-weight: 800;}

@media screen and (max-width: 650px) { }
	 

/* ********************************************************** */
/* *********************** COLORS *************************** */

.red {color: #B33C23;}

.orange{color: #C26310;}

.yellow{color: #DEB729; color: #D8B749;}

.green {color: #2E5C1F;}

.teal {color: #277A77;}

.blue {color: #29497A;}

.purple {color:#4F3771;}

	
/* ********************************************************** */
/* *********************** HEADER *************************** */

header{
width: 100%;
margin-bottom: 0px;
border-bottom: solid 3px #B33C23;
background: black;
/* update */
border: none;
background: none;
}

header img {
height: 50px;
padding-top: 10px;
margin-left: 10px;
display: inline-block;
}

h1.title{
margin-top: -25px;
margin-bottom: 20px;
margin-left: 5px;
font-size: 2.2em;
line-height: 36px;
color: white;
display: inline-block;
vertical-align: text-top;
}

header .btn.red{
color:#eee;
background: #B33C22;
border: none;
width: auto;
float: right;
margin-top: 20px;
margin-right: 40px;
padding: 10px 20px;
border-radius: 50px;

/* update */
background: none;
border: 1px solid white;
color: white;
}

header .btn.red:hover {
background:#ddd;
color:#B33C22;
border: none;

/* update */
background: white;
color: black;
border: 1px solid white;
}

@media screen and (max-width: 650px) { header img{float: left; height: 35px; padding-top: 14px;}
	h1.title{
	margin-top: 16px;
	margin-bottom: 20px;
	margin-left: 5px;
	font-size: 1.8em;
	line-height: 26px;
	}
	
	header .btn.red{margin-top: 10px; }
}


/* ********************************************************** */
/* ************************ HERO **************************** */

#hero {
display: block;
width: 100%;
color: #333;
border-bottom: none;
text-align: center;
	pointer-events:none;

/* update */
margin-top: -80px;
border-bottom: 2px solid white;
overflow: hidden;
}

#hero h2 {font-size: 2em; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: 100; margin: 0; padding: 0; width: 95%; margin-left: 2.5%; color: white; text-align: right; position: relative; bottom:60px; }


#hero h1 {font-size: 4em; margin: 0; padding: 0; width: 100%; color: #3C6968; color: #777; text-align: right; position: relative; bottom:-25px; right: 40px; 

/* update */
color: white;
}

#hero p {width: 100%; text-align: center; vertical-align: bottom; display: block;}


@media screen and (max-width: 500px) { 
	#hero h1 {font-size: 3em; bottom: -20px;}
}

/* update */
@media screen and (min-width: 900px) {

}

@media screen and (min-width: 1100px) {

}

/* ********************************************************** */
/* ******************** BASIC CONTENT *********************** */


.fullContentContainer {
width: 95%;
display: block;
margin-right: 5%;
}

.edgeToEdge{
width: 100%;
margin: 0;
margin-top: -10px;
}

.cover{width: 100%;}

.fullContentContainer p{width: 90%; margin-left: 5%;  margin-bottom: 40px;}

.callToAction{font-size: 1.6em; text-align: center;}

.fullContentContainer h3{text-align: right; margin-right: 5%; margin-top: 40px; margin-bottom: 30px;}

.grad{background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)); height: 100%;}


.flexContainer{display: flex;}

.oneThird {
	padding: 20px;
}

.oneThird:first-child{
padding-left: 40px;
}

@media screen and (max-width: 999px) { 
.flexContainer{flex-wrap: wrap;}
.oneThird{padding-left: 40px; padding-bottom: 60px;}
}

@media screen and (min-width: 1000px) { 
.oneThird{flex-grow: 1;}
}

@media screen and (max-width: 650px) { 

	.fullContentContainer p{width: 90%; margin-left: 5%; text-align: center;}

	.fullContentContainer h3{text-align: center; }
	
	.grad{background: linear-gradient(to right, rgba(255,255,255,.75), rgba(255,255,255,.9)); height: 100%;}
	
}


/* ********************************************************** */
/* ********************* CONTENT ONE ************************ */

#contentOne{
width: 100%;
padding: 60px 0 0 0;
color: white;
background: #277A77;
background: #3C6968;
background: #777;
border-bottom: solid 3px white;

}

#contentOne h2{ text-align: left; margin-top: -50px; vertical-align: middle;}

#contentOne h2 img{ height: 1em; padding-right: 10px; margin-bottom: -4px;}

h2.subHero {text-align: right; font-size: 2em; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: 100; margin: 0; padding: 0; color: white; color:#1A212E; color: rgba(255, 255, 255, .6); position: absolute; right: 40px; top:-10px;}

#contentOne .embelish{
min-height: 120px;
background-image: url(../img/ccg.png);
background-repeat: no-repeat;
background-position: bottom right;
}

@media screen and (max-width: 500px) { 
	#contentOne .embelish{ background-size: contain;}
}

/* ********************************************************** */
/* ********************* CONTENT TWO *********************** */

#contentTwo{
width: 100%;
padding: 0;
color: black;
min-height: 350px;
background: #FDFDFD;
background-image: url(../img/green.jpg);
background-size: cover; 
background-repeat: no-repeat;
border-bottom: solid 3px #3F7877;
}



/* ********************************************************** */
/* ********************* CONTENT THREE ********************** */

#contentThree{
width: 100%;
padding: 0;
color: black;
min-height: 350px;
background: #FDFDFD;
background-image: url(../img/blue.jpg);
background-size: cover; 
background-repeat: no-repeat;
border-bottom: solid 3px #2C456F;
}

/* ********************************************************** */
/* ********************** SIGN UP NOW *********************** */

#signUpNow{
width: 100%;
padding: 150px 0;
color: white;
background: #B33C23;
text-align: center;
}

#signUpNow .button{
font-size: 3em;
font-weight: 100;
color: white;
background: none;
border: 2px solid white;
border-radius: 150px;
padding: .5em 1em;
}

@media screen and (max-width: 650px) { 
	#signUpNow .button{font-size: 2.2em;}	
}

/* ********************************************************** */
/* *********************** FOOTER *************************** */

footer{
width: 100%;
min-height: 200px;
margin-top: 0;
background: none;
color: #444;
text-align: center;
}

footer p{color: #444; font-size: 1em; margin-left: 20px;}

footer h1.title{color: #444; margin-top: 60px;}

@media screen and (max-width: 950px) { 

	h1#contact{margin-top: 40px;}
	
	footer p{max-width: 68%; margin-left: 14%;}
}


/* ********************************************************** */
/* ******************** SOCIAL MEDIA ************************ */

footer .social {
	text-align: center;
	margin-bottom: 35px;
	margin-left: -10px;
}

footer .social li {
	list-style: none;
	display: inline-block;
	margin: 20px 10px;
}

footer .social li a{
	color: white;
}

.facebook {
	background: #3d5b99;
	padding: 8px 12px;
	border-radius: 50%;
	display: block;
}

.dribbble {
	background: #ea4c89;
	padding: 8px 8px;
	border-radius: 50%;
}

.instagram {
	background:#3F3E3E;
	padding: 8px 9px;
	border-radius: 50%;
}

.vimeo {
	background: #735675;
	padding: 8px 9px;
	border-radius: 50%;
}

.linkedin {
	background: #1884bb;
	padding: 8px 10px;
	border-radius: 50%;
}

.twitter {
	background: #1884bb;
	padding: 8px 8px;
	border-radius: 50%;
}

.youtube {
	background: #d73d32;
	padding: 9px 7px;
	border-radius: 50%;
}

.google {
	background: #d73d32;
	padding: 8px 8px 8px 10px;
	border-radius: 50%;
}

.google:hover, .youtube:hover, .linkedin:hover, .vimeo:hover, .instagram:hover, .dribbble:hover, .facebook:hover {
	cursor: arrow;
	background: black;
}


/* ********************************************************** */
/* ********************* SUB FOOTER ************************* */

#subFooter{
width: 100%;
min-height: 30px;
margin-top: 0;
background: #503D74;
padding: 16px 0 10px 0;
color: #ccc;
text-align: center;
}

#subFooter li {
list-style: none;
display: inline-block;
margin: 0px 5%;
font-size: .9em;
}

#subFooter li a{color: #ccc;}

#subFooter li a:hover{color: #eee;}

@media screen and (max-width: 600px) { 
	#subFooter li {
		margin: 0px 2%;
		font-size: .7em;
	}
}