@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

a {color: inherit; text-decoration: inherit;}

header {
	width: 100%;
	height: 60px;
	padding: 15px 20px 15px 20px;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #FFF;
	box-shadow: 0px 0px 7px rgba(0,0,0,0.7);
}

.nav-left {width: 120px; height: 30px; position: absolute; left: 20px;}
.nav-right {height: 30px; position: absolute; right: 20px;}

.menu-item {margin: 0 10px 0 10px; height: 30px; float: left; color: #B30000; font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 12px; padding: 8px 0 0 0; box-sizing: border-box; text-transform: uppercase;}
.menu-item a {transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}
.menu-item a:hover {opacity: 0.7;}
.menu-social {width: 30px; height: 30px; margin: 0 0 0 10px; float: right; padding: 5px 0 0 4px; box-sizing: border-box;}
.menu-social img {transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}
.menu-social img:hover {opacity: 0.7;}

#main-menu {display: block;}
#mobile-menu {display: none; cursor: pointer;}

#mob-menu {width: 100%; height: 100vh; position: fixed; z-index: 11; top: 0; /*display: none;*/ background-color: #FFF; right: -100%; padding: 20px; box-sizing: border-box;}
#close-menu {text-align: right; color: #F00;}
.inner-mob-menu {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; text-transform: uppercase; font-size: 18px; font-weight: bold; color: #F00; line-height: 1.8em;}
.inner-mob-menu img {margin: 40px 10px 0 10px;}

@media only screen and (max-width : 720px) {#main-menu {display: none;} #mobile-menu{display: block}}

section {
	width: 100%;
	height: auto;
	padding: 0 20px 0 20px;
	box-sizing: border-box;
}

.banner {padding: 0; height: 100vh; overflow: hidden;}
.shade {background: rgb(231,8,8); background: linear-gradient(162deg, rgba(231,8,8,1) 0%, rgba(0,212,255,1) 100%); width: 100%; height: 100vh; opacity: 0.7; position: absolute; top: 0;}
.banner-center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.banner-video {height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 */ position: relative; left: 50%; /* % of surrounding element */ top: 50%; transform: translate(-50%, -50%); /* % of current element */}
.banner-block {max-width: 980px; width: 100%; padding: 20px; box-sizing: border-box;}
.banner-block .cta-button {font-size: 16px; color: #FFF; font-weight: bold; border: 1px solid #FFF;}
#main-inner {width: 100%; float: none; margin: 0 auto 0 auto; text-align: center;}

#banner-heading {width: 100%; opacity: 0; margin-left: -100px; font-size: 42px; letter-spacing: 1px; font-weight: bold; color: #FFF; font-family: 'Open Sans', sans-serif; text-align: center;}
#banner-paragraph {width: 100%; opacity: 0; margin-top: 30px; margin-left: -100px; line-height: 1.6em; letter-spacing: 1px; font-size: 18px; color: #FFF; text-align: center; padding: 0 100px 0 100px; box-sizing: border-box;}
#banner-cta {opacity: 0; margin: 60px auto 0 auto;}

@media only screen and (max-width : 720px) {#banner-heading {font-size: 32px; margin-top: 60px;} #banner-graphic {display: none;} #banner-paragraph {padding: 0;}}

.main-block {max-width: 960px; width: 100%; margin: 80px auto 80px auto; padding: 20px; box-sizing: border-box;}
.section-paragraph {width: 100%; line-height: 1.6em; letter-spacing: 1px; font-size: 16px; margin: 10px 0 10px 0;}
.section-title {width: 100%; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; font-weight: bold; color: #F00; font-size: 24px; margin: 10px 0 10px 0;}
.section-subtitle {width: 100%; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 12px; text-transform: uppercase; margin: 10px 0 10px 0;}
.inner {width: 458px; float: left; padding: 0 40px 0 0; box-sizing: border-box;}
.cta-button {padding: 10px 20px 10px 20px; border: 1px solid #F00; margin: 40px 0 40px 0; display: inline-block; cursor: pointer; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out;}
.cta-button:hover {color: #FFF; background: #F00;}
.final {width: 100%; margin: 0 auto 0 auto; text-align: center;}

@media only screen and (max-width : 520px) {.inner {width: 100%; padding: 0 0 0 0;}}

#what-we-do .section-title {opacity: 0; margin-left: -100px;}
#what-we-do .section-subtitle {opacity: 0; margin-left: -100px;}
#what-we-do .section-paragraph {opacity: 0; margin-left: -100px;}
#what-we-do .cta-button {opacity: 0;}
#what-we-do .graphics {height: 300px; overflow: hidden; padding: 0;}
#wwd-g1 {width: 100%; height: auto; opacity: 0; margin-left: 100%;}

#pricing .section-title {opacity: 0; margin-left: -100px;}
#pricing .section-subtitle {opacity: 0; margin-left: -100px;}
#pricing .section-paragraph {opacity: 0; margin-left: -100px;}
#pricing .cta-button {opacity: 0;}
#pricing .graphics {height: 300px; overflow: hidden; padding: 0;}
#p-g1 {width: 100%; height: auto; opacity: 0; margin-left: 100%;}

#resources .section-title {opacity: 0; margin-left: -100px;}
#resources .section-subtitle {opacity: 0; margin-left: -100px;}
#resources .section-paragraph {opacity: 0; margin-left: -100px;}
#resources .cta-button {opacity: 0;}
#resources .graphics {height: 300px; overflow: hidden; padding: 0;}
#r-g1 {width: 100%; height: auto; opacity: 0; margin-left: 100%;}

.final-icon {width: 130px; height: 130px; margin: 20px 10px 0 10px; display: inline-block; cursor: pointer; overflow: hidden; transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}
.final-icon:hover {opacity: 0.7;}
.final-icon img {width: 100%; height: auto;}
#final .section-title {opacity: 0;}
#final .section-paragraph {opacity: 0;}
#f-g1 {margin-top: 100%; opacity: 0;}
#f-g2 {margin-top: 100%; opacity: 0;}
#f-g3 {margin-top: 100%; opacity: 0;}
#f-g4 {margin-top: 100%; opacity: 0;}


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

footer {
	width: 100%;
	padding: 20px 20px 20px 20px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
}



/*FIXES*/
/*_________________________________________________________________*/
/*_________________________________________________________________*/


.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.wireframe {border: 1px solid #F00;}