html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {	content: ''; content: none; }
table {	border-collapse: collapse; border-spacing: 0; }



* { 
	box-sizing:border-box;
	}
/* Variables */
:root {
	
	--primary:#1889CD; /*Blue*//*rgb 24,137,205*/
	--secondary:#FAA52D; /*Orange*/
	--accent:#8fAE6E; /*Green*/
	
	}
	
	
/* Typography */

:root {
	font-size:62.5%;
	
	}
	
body , html {
	height:100%;
	font-size:1.6rem;
	font-family: 'Muli', sans-serif;
	}


body {
	background-image:url('../img/bg/main-dark-buildings.jpg');
	background-attachment:fixed;
	background-size:cover;
}

h1, h2, h3, h4, h5, h6 {
	position:relative;
	color:inherit;
	}

h1 { font-size:5.0rem; }
h2 { font-size:1.8rem; letter-spacing:0.5rem; font-weight:800; color:#333; margin-bottom:50px; }
h3 { font-size:1.6rem; font-weight:800; color:#333; margin-bottom:10px; margin-top:30px; }
h4 { font-size:1.6rem; }
h5 { font-size:1.6rem; }
h6 { font-size:1.6rem; }

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

	
/* Structure */

.oc { 
	position:relative;
	width:100%;
	}	
.ic {
	position:relative;
	width:100%; max-width:1100px;
	margin:0px auto;
	padding:0px 30px;
	}	

	
nav {
	position:fixed; top:0px; left:0px;
	width:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9;
	transition:background-color 0.2s ease;
	}
	nav ul {
		display:flex; justify-content:center;
		text-align:center;
		font-size:0rem;
		}
		nav ul li {
			position:relative;
			display:inline-block;
			}
			nav ul li a {
				display:inline-block;
				font-size:1.6rem;
				color:rgb(225,225,225);
				text-decoration:none;
				padding:40px 20px 35px 20px;
				border-bottom:solid 5px #333; border-bottom:solid 5px rgba(0,0,0,0);
				font-weight:600;
				vertical-align:middle;
				transition:border 0.2s ease , padding 0.2s ease , font-size 0.2s ease;
				}
			nav ul li a:hover {
				border-bottom:solid 5px #1889CD;
				text-shadow:#333 0px 0px 5px;
				background-color:rgba(0,0,0,0.1);
				}
		nav ul li#nav-logo {
			width:300px;
			padding:15px 30px 16px 30px;
			transition:background-color 0.2s ease , width 0.2s ease;
			font-size:1.6rem; text-align:center;
			}
		nav ul li#nav-logo img#logo-main {
			display:inline;
			position:relative; top:8px;
			width:auto; height:50px;
			opacity:1;
			transition:opacity 0.2s ease , bottom 0.2s ease;
			}
		nav ul li#nav-logo img#logo-pentagon {
			position:absolute; bottom:-30px; left:50%;
			margin-left:-13px;
			z-index:2;
			transition:bottom 0.2s ease , transform 0.5s ease;
			}
	nav.shrink {
		background-color:rgba(20,20,20,0.9);
		}
	nav.shrink ul li a {
		font-size:1.5rem;
		padding:15px 20px 15px 20px;
		}
	nav.shrink ul li#nav-logo {
		width:100px;
		}
	nav.shrink ul li#nav-logo img#logo-main {
		position:absolute; top:-2px; left:50%;
		height:0px;
		margin-left:-60px;
		opacity:0;
		}
	nav.shrink ul li#nav-logo img#logo-pentagon {
		bottom:10px;
		transform:rotate(360deg);
		} 
nav:after {
	content:url('../img/misc/navpoint.png');
	position:absolute; bottom:-50px; left:50%;
	height:50px;
	margin-left:-77px;
	transition:all 0.2s ease;
	overflow:hidden;
	}
nav.shrink:after {
	bottom:0px; height:0px; opacity:0;
	}

#mobile-logo {
	display:none;
}
#mobile-menu-toggle {
	display:none;
	z-index:200;
}


/* --- */

#footer-1 {
	padding:60px 0px;
	background-color:rgb(40,40,40);
	}
#footer-1 section {
	display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start;
	}
#footer-1 div {
	display:inline-block; max-width:25%;
	}
#footer-1 h2 {
	font-size:1.1rem;
	color:#8fAE6E;
	letter-spacing:0.6rem;
	text-transform:uppercase;
	font-weight:600;
	margin-bottom:30px;
	}
#footer-1 p {
	color:rgb(225,225,225);
	font-size:1.4rem;
	line-height:2.6rem;
	}
#footer-1 a:hover {
	color:rgb(150,150,150);
	}

#footer-2 {
	padding:30px 0px;
	background-color:#1889CD;
	}
#footer-2 section {
	display:flex; flex-direction:row; justify-content:space-between; align-items:center; flex-wrap:wrap;
	}
#footer-2 p {
	color:rgb(225,225,225);
	font-size:1.1rem;
	}

			
/* Classes */

.btn {
	border-style:solid;
	text-decoration:none;
	transform:scaleY(0.95);
	transition:background-color 0.2s ease, color 0.2s ease, border 0.2s ease;
	}
	
.btn-lrg {
	padding:20px 35px;
	border-width:4px;
	font-size:2.6rem; font-weight:600;
	text-transform:uppercase;
	}

	

.btn-white-transparent {
	border-color:rgb(225,225,225);
	color:rgb(225,225,225);
	}
.btn-white-transparent:hover {
	background-color:rgb(225,225,225);
	opacity:0.9;
	color:rgb(50,50,50);
	}


.phone-link {
	border:none!important;
	color:#1889CD;
	text-decoration:underline;
}


/* GENERAL PAGE STYLING */

.page-top-header {
	margin-bottom:100px;
	text-align:center;
	}
	.page-top-header h1 {
		display:inline-block;
		padding:15px;
		font-size:2.2rem; font-weight:bold; color:#333; letter-spacing:0.5rem;
		border:solid #333 4px;
		text-transform:uppercase;
		}

p.p {
	line-height:2.6rem;
	font-weight:300;
	font-size:1.6rem;
	margin-bottom:30px;
	}

p strong {
	font-weight:400;
	position:relative;
}

p strong.bigger {
	display:block;
	font-size:1.3em;
	margin-bottom:10px;
}


p strong.bullet:before {
	content:"";
	position:absolute; top:3px; left:-30px;
	display:inline-block;
	width:20px; height:20px;
	margin-right:10px;
	background-image:url('../img/logo/pentagon-small.png');
	background-size:100%;
}

p.p a {
	text-decoration:underline;
}

aside.aside {
	border:solid #333 5px;
	margin-bottom:20px;
	width:300px;
	}
aside.aside h2 {
	padding:20px; margin:0px;
	background-color:#333;
	color:rgb(255,255,255);
	text-transform:uppercase;
	font-size:1.4rem;
	}
aside.aside p {
	padding:20px 20px 0px 20px;
	}
aside.aside a {
	color:#1889CD;
	border-bottom:solid #1889CD 2px;
	padding:10px 5px 10px 3px;
	text-decoration:none;
	transition:box-shadow 0.3s ease , background-color 0.3s ease;
	}
aside.aside a:hover {
	color:#1889CD;
	background-color:#FFF;
	box-shadow:rgba(0,0,0,0.05) 0 -5px 10px;
	}

h2.icon:before {
	content:"";
	position:relative; top:4px; 
	display:inline-block;
	width:20px; height:20px;
	margin-right:10px;
	background-image:url('../img/logo/pentagon-small.png');
	background-size:100%;
	}
ul.b {
	list-style-type:circle;
	padding-left:15px;
	line-height:3.0rem;
	}
ul.b li {
	margin:5px 0 5px;
}
ul.b li ul {
	list-style:"- ";
}

#s1 {
	position:sticky; top:50px;
	display:flex; flex-direction:column; align-items:center;
	padding:120px 0px 80px 0px;
	z-index:0;
	}
#s1_1 {
	position:sticky; top:50px;
	height:60px;
	background-color:#8fAE6E;
	opacity:0.5;
	transition:height 0.2s ease , opacity 0.2s ease;
	z-index:2;
	}
#s1_1.shrink {
	height:40px;
	opacity:0.75;
}
#s2 {
	background-color:rgb(250,250,250);
	padding:100px 0px;
	}
#s2_1 {
	display:flex;
	}
#s2_1_1 {
	flex-grow:1;
	}
#s2_1_2 {
	align-items:flex-start; justify-content:flex-start;
	flex-grow:0;
	max-width:300px;
	margin-left:100px;
	}

#hs1-slideshow {
	width:70rem; height:10.0rem;
	overflow:hidden;
	perspective:600px;
	margin-top:60px;
	}
	.hs1-slide {
		display:flex;
		height:0%;
		font-size:0px;
		overflow:hidden;
		opacity:0;
		border-radius:5px;
		transform:rotateX(145deg);
		transition:height .5s ease , width .5s ease, opacity .7s ease, transform .5s ease;
		}
		.hs1-slide-left {
			display:inline-flex; flex-direction:row; align-items:center;
			width:100%;
			padding:2.1rem 2.4rem;
			font-size:2.8rem; color:#FFF; font-weight:600; letter-spacing:-1px;
			text-align:center;
			}
			.hs1-slide-left img {
				height:100%; width:auto;
				margin-right:30px;
				}
			.hs1-slide-left div {
				font-size:1.6rem;
				text-align:left;
				color:#eee;
			}
			.hs1-slide-left div span {
				display:block;
				margin-right:30px;
				white-space:nowrap;
				font-size:2.0rem;
			}
			.hs1-slide-left div.content {
				padding:10px 0px 10px 30px; border-left:solid #666 1px; font-size:1.8rem;
			}
		.hs1-slide-right {
			padding:1.8rem 2rem;
			display:inline-block;
			font-size:1.6rem; color:#FFF; font-weight:600;
			transition:font-size 0.3s ease;
			}
			.hs1-slide-right i {
				display:inline-block;
				margin-top:25px;
			}
		.hs1-slide-right:hover {
			cursor:pointer;
			}
	.hs1-slide.active {
		height:100%; width:100%;
		opacity:1;
		transform:rotateX(0deg);
		}
	#hs1-slideshow-popup {
		display:none;
		position:fixed; top:50%;
		width:100%; height:50%;
		margin:-250px 0px 0px 0px;
		background-color:rgba(255,255,255,0.9);
		box-shadow:rgba(0,0,0,0.9) 0 0 500px;
		z-index:101;
	
	}
	#hs1-slideshow-popup .ic {
		display:flex; flex-direction:row;
		height:100%;
		align-items:center;
	}
	#hs1-slideshow-popup #hs1-slideshow-popup-client {
		display:inline-flex; flex-direction:column;
		margin-right:100px;
		text-align:center;
	}
		#hs1-slideshow-popup #hs1-slideshow-popup-client-img {
			width:150px; height:150px;
			padding:20px;
			border-radius:50%;
			background-color:rgb(80,80,80);
		}
		#hs1-slideshow-popup #hs1-slideshow-popup-client-name {
			display:inline-block;
			font-size:3.2rem;
			margin:10px 0px;
		}
		#hs1-slideshow-popup #hs1-slideshow-popup-client-company {
			display:inline-block;
			font-size:1.8rem;
		}
	#hs1-slideshow-popup #hs1-slideshow-popup-quote {
		display:inline-block;
		font-size:1.8rem; line-height:2rem;
		text-align:justify;
		max-height:90%; overflow-y:auto;
		padding-right:20px;
	}
		#hs1-slideshow-popup #hs1-slideshow-popup-quote .fas {
			font-size:3.2rem;
			color:#ccc;
			margin-right:10px;
		}
	#hs1-slideshow-popup .fa-times-circle {
		position:absolute; top:50px; right:0px;
		font-size:3.2rem;
		color:#666;
		transition:color 0.3s ease;
	}
	#hs1-slideshow-popup .fa-times-circle:hover {
		cursor:pointer;
		color:#999;
	}


/*****************************************************************
MAIN SPLASH PAGE
*****************************************************************/
header {
	position:fixed; top:0px; left:0px;
	width:100%; height:100px;
	padding:30px 20px;
	background-color:rgba(0, 0, 0, 0.6);
	text-align:center;
	z-index:99;
}
header img {
	display:inline-block;
	margin:0;
}
header:after {
	content:url('../img/misc/navpoint-splash.png');
	position:absolute; top:100px; left:50%;
	margin-left:-77px;
	opacity:0.75;
}

#splash-logo {
	max-height:40px; height:60px; max-width:100%; height:auto;
	margin:0;
}

#s1-splash {
	display:flex;
	min-height:100%; height:100%;
	padding:0px;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}
#splash-page-tagline {
	position:absolute; top:210px;
	color:#fff;
	font-size:5.5rem;
	text-shadow:rgba(0,0,0,0.8) 0 0 10px;
	font-weight:600;
	width:100%; text-align:center;
	text-transform:uppercase;
	z-index:2;
	opacity:0.9;
	transition:opacity 0.3s ease , letter-spacing 0.3s ease;
}
#splash-page-instruction {
	position:absolute; bottom:200px;
	color:#fff;
	font-size:2.0rem;
	width:100%; text-align:center;
	z-index:2;
	transition:opacity 0.3s ease , letter-spacing 0.3s ease;
}
#s1-splash:hover #splash-page-tagline {
	opacity:0;
	letter-spacing:-10px;
}
#s1-splash:hover #splash-page-instruction {
	opacity:0;
	letter-spacing:-10px;
}

.splash-page-tab {
	display:flex;
	position:relative;
	width:50%; height:100%;
	color:rgba(255,255,255,0.7); font-size:3.0rem;
	align-items:center;
	transition:all 0.8s ease;
}

.splash-page-tab:hover {
	color:rgb(255,255,255);
	text-shadow:rgba(3,41,92,0.5) 0px 2px 10px;
	width:90%;
	letter-spacing:5px;
}

.splash-page-tab:hover .splash-page-tab-bg {
	opacity:0;
}
.splash-page-tab-bg {
	position:absolute; top:0px; left:0px;
	width:100%; height:100%;
	z-index:1;
	opacity:0.9;
	transition:opacity 0.5s ease;
}
#splash-page-left .splash-page-tab-bg {
	background-image:url('../img/bg/splash-left.jpg');
	background-position:center;
	background-size:cover;
}
#splash-page-right .splash-page-tab-bg {
	background-image:url('../img/bg/splash-right.jpg');
	background-position:center;
	background-size:cover;
}

#splash-page-left {
	text-align:right;
	justify-content:flex-end;
	padding-right:0px;
}
#splash-page-right {
	text-align:left;
	justify-content:flex-start;
	padding-left:0px;
}

.splash-page-tab b {
	display:block;
	font-size:1.0rem;
	margin-top:30px; margin-bottom:-30px;
}
.splash-page-tab p {
	padding:70px 100px;
	background-color:rgba(0,0,0,0.7);
	border-right:solid rgba(0,0,0,0) 5px;
	border-left:solid rgba(0,0,0,0) 5px;
	box-shadow:rgba(0,0,0,0.5) 0 0 20px;
	text-align:center;
	z-index:2;
	transition:background 0.3s ease;
}
.splash-page-tab p span {
	display:block;
	font-size:5.0rem;
	width:100%;
	border-bottom:solid #1889CD 3px;
	padding-bottom:20px;
	margin-top:10px;
}
.splash-page-tab:hover p {
	background:none;
	box-shadow:none;
	border-radius:0;
}
#splash-page-right p {
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}
#splash-page-left p {
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}
#splash-page-left:hover p {
	border-right:solid #1889CD 5px;
}
#splash-page-right:hover p {
	border-left:solid #8fAE6E 5px;
}

.fa-arrow-left {
	position:absolute; top:50%; left:-100px;
	margin-top:-25px;
	font-size:50px;
	transition:left 0.3s ease;
}
.fa-arrow-right {
	position:absolute; top:50%; right:-100px;
	margin-top:-25px;
	font-size:50px;
	transition:right 0.3s ease;
}
.splash-page-tab:hover .fa-arrow-left {
	left:250px;
}
.splash-page-tab:hover .fa-arrow-right {
	right:250px;
}

footer#splash-footer {
	position:fixed; bottom:0px; left:0px;
	display:flex; flex-direction:row; align-items:center; justify-content:center;
	width:100%; height:70px;
	background-color:rgba(0, 0, 0, 0.6);
	color:#999; font-size:1.1rem;
	z-index:99;
}

footer:before {
	content:url('../img/misc/navpoint-splash-flipped.png');
	position:absolute; bottom:69px; left:50%;
	margin-left:-77px; margin-bottom:-0.5px;
	opacity:0.75;
}



.col-orange {
	color:#FAA52D;
}


#CybotCookiebotDialog {
	opacity:0.98!important;
	box-shadow:rgba(0,0,0,0.25) 0 0 50px!important;
}