/* --------------------------------
PRIMARY STYLES
-------------------------------- */
*, *::after, *::before { box-sizing: border-box; }
body { 
	font-family: sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #041c2c;
}

h1, h2, h3, h4 {
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: bold;
	font-style: normal;
	line-height: 1;
	margin-bottom: .5em;
}
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 14px; }
h1 span, h2 span,
h3 span, h4 span { color: #041c2c; }

table { width: 100%; }
th, td { font-size: 14px; line-height: 1; }

ul, ol, p { 
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 14px;
	line-height: 1.8;
}

a { text-decoration: none; }
a:hover { }

b, strong { font-family: 'Metropolis Extra', sans-serif; font-weight: bold; }
i, em { font-style: italic; }

/* --------------------------------
EFFECTS
-------------------------------- */
.txt-shadow { text-shadow: 1px 1px 40px black; }
.bx-shadow,
.bx-shadow-hover:hover {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

/* --------------------------------
BUTTONS
-------------------------------- */
.btns { cursor: pointer; }
.btn-more {
	display: inline-block;
	line-height: 1;
	padding: .5em 2em;
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: bold;
	color: #FF5200;
	border: 2px solid #FF5200;
	transition: all .5s ease;
}
.btn-more:hover { background: #FF5200; color: white; }

.btn-more-grey {
	position: relative;
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: bold;
	color: rgba(4, 28, 44, .5);
	transition: all .5s ease;
}
.btn-more-grey:hover { color: #FF5200; }

.scrolldown-container {
	display: none;
  z-index: 9;
  position: fixed;
  bottom: 4em; left: calc(50% - 70px);
}
#scrolldown {
	display: inline-block;
	line-height: 40px;
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: bold;
	font-style: normal;
	color: white;
	text-shadow: 1px 1px 40px black;
	transform: rotate(90deg);
	transform-origin: center;
}
#scrolldown i { padding: 0 .5em; }

.bouncer { animation: bounce 2s ease-in-out infinite; }
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0);; }
}

/* -------------------------------- 
VIDEO
-------------------------------- */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container.square { padding-bottom: 100%; }
.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------
FORMS
-------------------------------- */
form { position: relative; width: 100%; margin-bottom: 2em; }
form .pure-u-1,
form .pure-u-1-2, 
form .pure-u-1-3, 
form .pure-u-2-3 { padding: 0 .25em; }

textarea { height: 140px; }
textarea,
select,
.input-text,
.input-submit {
	display: inline-block;
	font-family: 'Metropolis', sans-serif;
	font-weight: 200;
	font-style: normal;
	line-height: 1;
	width: 100%;
	padding: .5em 1em;
	margin-bottom: .5em;
	outline: none;
	border: 2px solid #eaede8;
	background: white;
}
.input-submit {
	width: auto;
	padding: .5em 2em;
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: bold;
	color: #FF5200;
	border: 2px solid #FF5200;
	transition: all .5s ease;
}
.input-submit:hover { background: #FF5200; color: white; }

.wpcf7-not-valid-tip { padding: .5em 1em 1em !important; line-height: 1; }
.wpcf7-response-output { padding: 1em !important; line-height: 1; }
.wpcf7-list-item { margin: 0 !important; }

/* --------------------------------
NAV
-------------------------------- */
nav { 
	background: #041c2c;
	position: fixed;
	top: 0; right: -85vw;
	width: 85vw;
	height: 100vh;
	padding: 3em 2em;
	text-align: left;
	transition: all .5s ease;
}
nav.expanded { right: 0; overflow-y: scroll; }

nav ul { width: 100%; line-height: 1; }
nav ul li { display: block; }
nav ul li a {
	font-size: 18px;
	color: white;
	display: inline-block;
	padding: .5em;
	transition: all .5s ease;
}
nav ul li a:hover { color: #FF5200; }
nav ul li.current-menu-item > a { 
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: bold;
	font-style: normal;
}
nav ul li.menu-item-has-children { position: relative; }
nav ul li.menu-item-has-children > a::after {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-size: .6em;
	font-weight: bold;
	content: "\f107";
	margin-left: .5em;
}
nav ul li.menu-item-has-children:hover > ul { display: block; z-index: 2; }

nav ul li.btn-prime > a,
nav ul li.btn-contact > a {
	color: #FF5200;
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: bold;
}
nav ul li.btn-contact > a {
	border: 2px solid #FF5200;
	padding: .5em 2em;
	margin: 3em .5em;
	width: 100%;
	text-align: center;
}
nav ul li.btn-contact > a:hover { background: #FF5200; color: white; }

nav ul ul { padding: 1em; }
nav ul ul li a {
	padding: .5em;
	font-size: 16px;
	line-height: 1.2;
}

.mobile-cta { 
	text-align: center;
	margin: 2em 2em 0;
	display: block;
}
.mobile-cta li.btn-contact > a {
	color: #FF5200;
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: bold;
	border: 2px solid #FF5200;
	padding: .5em 2em;
	width: 100%;
	text-align: center;
	display: inline-block;
}
.mobile-cta li.btn-contact > a:hover { background: #FF5200; color: white; }

.nav-toggle {
	float: right;
	-webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  position: relative;
  z-index: 3;
  display: inline-block;
  height: .5rem;
  width: 2em;
}
.nav-toggle:hover .nav-toggle-bar,
.nav-toggle:hover .nav-toggle-bar::after,
.nav-toggle:hover .nav-toggle-bar::before { background: #FF5200; }

.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
	position: absolute;
	top: 50%; left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background: white;
	content: '';
	height: .2rem;
	width: 100%;
}
.nav-toggle .nav-toggle-bar { margin-top: 0; }
.nav-toggle .nav-toggle-bar::after { margin-top: 0.4rem; }
.nav-toggle .nav-toggle-bar::before { margin-top: -0.4rem; }

.nav-toggle.expanded .nav-toggle-bar { background: transparent; }
.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before { background: white; margin-top: 0; }
.nav-toggle.expanded .nav-toggle-bar::after {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* --------------------------------
HEADER
-------------------------------- */
header {
	z-index: 999;
	position: sticky;
	top: 0; left: 0;
	width: 100%;
	background: #041c2c;
	padding: 2em 0;
}
header.active {}

/* -------------------------------- 
SLIDER
-------------------------------- */
.slick-slider { }
.slick-slide { height: auto; }

/* --------------------------------
ARTICLE & SECTIONS
-------------------------------- */
article { overflow: hidden; }
section { 
	position: relative;
	width: 100%;
	padding: 3em 0 1em;
}
section ul { list-style: disc; margin-left: 1em; }
section ol { list-style: numeric; margin-left: 1em; }
section ul,
section ol,
section p { margin-bottom: 2em; }
section p a,
section p a img { transition: all .5s ease; }
section p a { color: inherit; }

.super-container,
.container { margin: auto; position: relative; }
.inner { padding: 0 1.5em; }

.desktop-hide {}
.desktop-show { display: none; }

.table-align { display: table; width: 100%; height: 100%; }
.table-cell-align { display: table-cell; vertical-align: middle; }
.table-cell-align.bottom { vertical-align: bottom; }

.last { margin-bottom: 0 !important; }
.align-h { height: 100%; }
.center { text-align: center; }
.right { text-align: right; }

.grey { background: rgb(235 237 232 / 100%); }
.grey h2 { color: #FF5200; margin-bottom: 1em; }

.hero { background: #041c2c; padding: 0; }
.hero .hero-img { z-index: 1; }
.hero .hero-overlay { 
	z-index: 2;
	position: relative;
	padding: 3em 0 1em;
}
.hero h1,
.hero h2 { color: #FF5200; }
.hero h1 em,
.hero h2 em {
	font-family: 'Metropolis Extra', sans-serif;
	font-weight: 200;
	font-style: normal;
}
.hero h1 em,
.hero h1 span,
.hero h2 em,
.hero h2 span,
.hero p { color: white; }
.hero .hero-gradient { position: relative; }
.hero .hero-gradient::before {
	z-index: 1;
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 25%;
	background: #041C2C;
	background: linear-gradient(180deg, rgba(4, 28, 44, 1) 0%, rgba(4, 28, 44, 0) 100%);
	content: "";
}

.main { }
.main h1,
.main h2,
.main h3,
.main h4 { color: #FF5200; }
.main h1 strong,
.main h2 strong,
.main h3 strong,
.main h4 strong { color: #041c2c; }
.main p a,
.main ul a,
.main ol a { color: #FF5200; text-decoration: underline; }
.main p a:hover,
.main ul a:hover,
.main ol a:hover { text-decoration: none; }

.grey { }
.grey h1,
.grey h2,
.grey h3,
.grey h4 { color: #FF5200; }
.grey h1 strong,
.grey h2 strong,
.grey h3 strong,
.grey h4 strong { color: #041c2c; }
.grey ul a,
.grey ol a { color: #FF5200; text-decoration: underline; }
.grey ul a:hover,
.grey ol a:hover { text-decoration: none; }

.now-later.odd { background: #eaede8; padding-top: 0; }
.now-later.even { background: rgb(235 237 232 / 50%); display: none; }
.now-later .label { position: relative; }
.now-later .label h1 {
	z-index: 2;
	position: absolute;
	top: calc(50% - 35px); left: 0;
	width: 100%;
	text-align: center;
	font-size: 70px;
	color: #eaede8;
	pointer-events: none;
}
.now-later .label h1 span { color: #FF5200; }
.now-later .label p { overflow: hidden; }
.now-later .label p a:hover img { transform: scale(1.1); }
.now-later h2,
.now-later h2 a { color: #FF5200; }
.now-later p .btn-more-grey {
	position: relative;
	display: inline-block;
	border-top: 2px solid rgba(4, 28, 44, .5);
	padding: 1em 0;
	margin-top: 1em;
	transition: all .5s ease;
}
.now-later p .btn-more-grey:hover { border-color: #FF5200; padding: 1em; }
.now-later p .btn-more-grey::before {
  position: absolute;
  top: -2px; left: -3em;
  width: 3em;
  border-top: 2px solid rgba(4, 28, 44, .5);
  content: "";
  transition: all .5s ease;
}
.now-later.even p .btn-more-grey::before { left: auto; right: -3em; }
.now-later p .btn-more-grey:hover::before { border-color: #FF5200; }

.process {}
.process .inner { padding: 0 1em; }
.process h2 { color: #FF5200; margin-bottom: 1em; }
.process h4 {
	hyphens: auto;
  word-break: break-word;
}
.process .process-line { position: relative; }
.process .process-line::after {
	z-index: -1;
	content: "";
	position: absolute;
	bottom: 4px; left: -50vw;
	width: 100vw;
	border-bottom: 1px solid #FF5200;
}
.process .process-line a {}
.process .process-line a:hover .process-img { transform: translateX(2em); }
.process-img {
  position: relative;
  height: 150px;
  width: 150px;
  background-image: url(img/icons.png);
  background-repeat: no-repeat;
  background-size: 300%;
  content: "";
  display: block;
  margin: auto;
  transition: all .5s ease;
}
.process-img.top-left { background-position: top left; }
.process-img.top-center { background-position: top center; }
.process-img.top-right { background-position: top right; }
.process-img.bottom-left { background-position: bottom left; }
.process-img.bottom-center { background-position: bottom center; }
.process-img.bottom-right { background-position: bottom right; }

.steps .process-img { background-image: url(img/steps.png); }
.steps .process-line::after { bottom: 13px; }

.cta { margin-top: 2em; padding: 8em 0 6em; }
.cta::before {
	z-index: -1;
	content: "";
	position: absolute;
	top: 0; left: 50%;
	height: calc(100% - 8em);
	border-left: 2px solid #FF5200;
}
.cta h2 { color: #FF5200; padding: 1em 0; }
.cta h2,
.cta p { background: white; margin-bottom: 0; }
.cta p { padding-bottom: 2em; }
.cta .btn-more { background: white; margin-top: 4em; }
.cta .btn-more:hover { background: #FF5200; }
.cta .btn-more span { font-size: .5em; margin-left: 1em; }

.tiles { padding: 0; }
.tiles.no-slick { padding: .5em 0; }
.tiles .inner { padding: .5em 1em; }
.tiles .tile { 
	position: relative;
	overflow: hidden;
	display: block;
}
.tiles .tile img { transition: all .5s ease; }
.tiles .tile .tile-overlay {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	display: block;
	padding: 2em 2em 0;
	transition: all .5s ease;
}
.tiles .tile .tile-overlay h3,
.tiles .tile .tile-overlay p { color: white; transition: all .5s ease; }
.tiles .tile .tile-overlay p.tile-desc { 
	display: block;
	overflow: hidden;
	height: 0;
}
.tiles .tile .tile-overlay h3 span { color: #FF5200; }
.tiles .tile:hover img { transform: scale(1.1); }
.tiles .tile:hover .tile-overlay { background: #eaede8; bottom: 0; }
.tiles .tile:hover .tile-overlay h3,
.tiles .tile:hover .tile-overlay p { color: #041c2c; }

.reviews { background: #eaede8; }
.reviews h1 {
	z-index: 1;
	position: relative;
	font-size: 160px;
	/*padding: .25em 0;*/
	padding: 0;
	letter-spacing: -10%;
	color: rgba(4, 28, 44, .5);
	display: inline-block;
}
/*.reviews h1::before {
	z-index: -1;
  content: "";
  position: absolute;
  top: 0; left: -20%;
  width: 100%;
  height: 100%;
  border: 2px solid #FF5200;
}
.reviews h1::after {
	z-index: -1;
	content: "";
	position: absolute;
	bottom: 10%; right: -20%;
	width: 40%;
	border-bottom: 2px solid #FF5200;
}*/
.reviews h2 { color: #FF5200; }
.reviews .review-container { /*margin: 4em 0 0;*/ margin: 0; list-style: none; }
.reviews .review-container .review p:first-child { margin-bottom: 0; }
.reviews .review-container .review p:first-child i { color: #FF5200; }
.reviews .review-container .review p:first-child span { color: rgba(4, 28, 44, .5); margin-left: 1em; }

/* --------------------------------
FOOTER
-------------------------------- */
footer {
	position: relative;
	width: 100%;
	padding: 2em 0 0;
	overflow: hidden;
	background: #041c2c;
}
footer::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	border-bottom: 1px solid #FF5200;
}

footer .liveline { z-index: 2; }

footer p,
footer ul { color: white; margin-bottom: 2em; }
/*footer p strong { color: rgb(255 255 255 / 50%); }*/
footer a { transition: all .5s ease; color: inherit; }
footer a:hover { color: #FF5200; }

footer ul { }
footer ul li { display: inline; }
footer ul li a {
	font-size: 24px;
	color: rgb(255 255 255 / 50%);
  margin-right: 1em;
  transition: all .5s ease;
}
footer ul li a:hover { color: #FF5200; }

aside { 
	padding: 2em 0;
	background-color: rgb(4 28 44 / 95%);
	text-align: center;
}
aside p,
aside p a { color: white; }
aside a:hover { color: #FF5200; }
aside p span { margin: 0 .5em; color: rgb(255 255 255 / 20%); }

/* --------------------------------
MEDIA QUERIES
-------------------------------- */
@media screen and (min-width: 35.5em) {
	.container { width: 568px; }

	.scrolldown-container { display: block; }

	.tiles .inner { padding: .5em; }

	.process-img { height: 250px; width: 250px; }
	.process .process-line::after { bottom: 6px; }
	.steps .process-img { height: 200px; width: 200px; }
	.steps .process-line::after { bottom: 17px; }

	footer ul { text-align: right; }
	footer ul li a { margin-left: 1em; margin-right: 0; }
}
@media screen and (min-width: 48em) {
	.container { width: 768px; }
}
@media screen and (min-width: 64em) {
	.super-container,
	.container { width: 1024px; }
	.inner { padding: 0 3em; }

	.desktop-hide { display: none; }
	.desktop-show { display: block; }

	h1 { font-size: 50px; }
	h2 { font-size: 40px; }
	h3 { font-size: 28px; }
	h4 { font-size: 18px; }

	.input-text,
	.input-submit,
	textarea,
	ul, ol, p { font-size: 16px; }

	nav { 
		display: block !important;
		text-align: right;
		background: transparent;
		position: relative;
		top: 0; right: 0;
		width: 100%;
		height: auto;
		padding: 0;
	}
	nav ul li { display: inline-block; }
	nav ul li a { font-size: 16px; }
	nav ul li.btn-contact > a {
		margin: .5em;
		margin-right: 0;
		width: auto;
	}
	nav ul ul {
		display: none;
		position: absolute;
		top: 100%; left: -1em;
		background: #041c2c;
		text-align: left;
		width: 240px;
	}
	nav ul ul li { display: block; }

	header { padding: 3em 0; }
	section { padding: 5em 0 3em; }
	footer { padding: 5em 0; }
	footer .liveline { margin-top: -7em; }
	footer::after { bottom: 5em; border-bottom: 2px solid #FF5200; }

	.btn-more { padding: 1em 4em; }

	.hero { display: grid; }
	.hero	h1 { font-size: 80px; }
	.hero .hero-img,
	.hero .hero-overlay { grid-area: 1 / 1; }
	.hero .hero-overlay { 
		padding: 5em 0;
		background: #041C2C;
		background: linear-gradient(90deg, rgba(4, 28, 44, 1) 0%, rgba(4, 28, 44, 0) 100%);
	}

	.now-later.odd { padding-top: 5em; }
	.now-later .label h1 { top: calc(50% - 100px); font-size: 150px; }

	.tiles .inner { padding: 1em; }
	.tiles .tile .tile-overlay { padding: 2em 3em 0; }
	.tiles .tile .tile-overlay p.tile-desc { height: 58px; }
	.tiles .tile:hover .tile-overlay p.tile-desc { height: 144px; }
}
@media screen and (min-width: 80em) {
	.container { width: 1200px; }
	.super-container { width: 100%; }

	.hero .hero-overlay { background: transparent; }

	.now-later.mobile { display: none; }
	.now-later.even { display: block; }

	.reviews h1 { font-size: 200px; /*padding: .5em 0;*/ }
	.reviews .review-container { margin-top: 0; }
}
@media screen and (min-width: 120em) {
	.super-container { width: 1920px; }
}

/* IE11
@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop,
	[data-aos^=fade][data-aos^=fade],
	[data-aos^=zoom][data-aos^=zoom] { opacity: 1; }
}*/