* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
html {
	height: 100%;
	transform-origin: 0% 0%;
	background-color: #171717;
	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
	background-image: -webkit-linear-gradient(#024EAC 1px, transparent 2px), -webkit-linear-gradient(0, #024EAC 1px, transparent 2px), -webkit-linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), -webkit-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
	background-image: -moz-linear-gradient(#024EAC 1px, transparent 2px), -moz-linear-gradient(0, #024EAC 1px, transparent 2px), -moz-linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), -moz-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
	background-image: linear-gradient(#024EAC 2px, transparent 2px), linear-gradient(90deg, #024EAC 1px, transparent 2px), linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
	-pie-background: linear-gradient(#024EAC 1px, transparent 2px) -2px -2px / 100px, linear-gradient(90deg, #024EAC 1px, transparent 2px) -2px -2px / 100px, linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px) -1px -1px / 20px, linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px) -1px -1px / 20px, #269;
}
body {
	font-family: Century Gothic, AppleGothic, sans-serif;
	margin: 0 auto;
	padding: 0;
	color: #E0E0E4;
	font-weight: bold;
	font-size: 1.115rem;
	height: auto;
}
body > div {overflow: auto;}
.hide {display: none;}
.b {font-weight: bold;}
.l {text-align: left;}
.c {text-align: center;}
.r {text-align: right;}
.fr {
	float: right;
	margin-left: 2%;
}

.fl {
	float: left;
	margin-right: 2%;
}
.clearfix {
	clear: both;
	float: none;
}
.wrapper {
	margin: 0 auto;
	box-shadow: 0 20px 30px 0 rgba(0, 0, 0, .8), 0 20px 30px 0 rgba(0, 0, 0, .1);
	width: 98%;
	min-width: 1280px;
	max-width: 1344px;
	min-height: calc(100vh - 300px);
	background: linear-gradient(to bottom, rgba(0, 0, 255, .6), rgba(0, 0, 0, .6));
	overflow: hidden;
}
body.modal-opened {overflow: hidden;}
.button,
button {
	border: 2px solid white;
	background: none;
	font-size: 1.125rem;
	margin-right: 8px;
	padding: 5px 20px;
	color: white;
	cursor: pointer;
	-webkit-transition: .6s ease-in-out;
	-moz-transition: .6s ease-in-out;
	-o-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
	vertical-align: middle;
}
.button:hover,
button:hover,
.active {
	background-color: #fff;
	color: #171BDF;
}
ul {list-style-type: square;}
h1, h2 {
	text-shadow: 1px 1px 2px blue, 0 0 25px #000, 0 0 5px #000;
	font-size: 2rem;
}
h3 {
	padding-bottom: 1%;
	border-bottom: 1px solid #f1f1f1;
}
h4 {
	font-size: 1.115rem;
	margin: 0;
	margin-bottom: 2%;
}
h4 i {
	position: relative;
	left: -2%;
	font-size: 2rem;
	vertical-align: middle;
}
a {
	color: #fff;
	text-decoration: none;
	-webkit-transition: .6s ease-in-out;
	-moz-transition: .6s ease-in-out;
	-o-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
	cursor: pointer;
}
a:hover {color: #fff}
a.logo:hover {background-color: transparent;}
a.anchor {
	margin: 0 !important;
	visibility: hidden;
}
.option {
    color: #888;
}
hr {
	margin: 1% 0;
	border: none;
	border-bottom: 1px solid #E0E0E4;
}
header {
	background: linear-gradient(to bottom, rgba(0, 0, 255, .6), rgba(0, 0, 0, .8));
	border-top: 4px solid #171BDF;
	border-bottom: 4px solid #171BDF;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .8), 0 5px 20px 0 rgba(0, 0, 0, .8);
	z-index: 1;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-width: 1344px;

}
header a {
	font-size: 1.125rem;
	padding: 5px 12px;
	vertical-align: middle;
}
header a:hover,
header a.active {
	background-color: #fff;
	color: #171BDF;
}
header i {
	padding: 4px;
	vertical-align: baseline;
}
header a.logo {
	width: 350px;
	background-repeat: no-repeat;
	height: 100px;
	display: inline-block;
	margin: 0 2%;
	padding: 0;
}
header .buttons {
	margin-right: 49px;
	margin-top: 12px;
}
header .buttons i {padding-right: 12px; }
.header-right {
	position: absolute;
	right: 1%;
	text-align: right;
	top: 12px;
}

/* Navbar */
.navbar {
	z-index: 2;
	text-align: right;
	background-color: #171BDF;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .5), 0 5px 20px 0 rgba(0, 0, 0, .5);
	display: none;
}
.navbar button {font-size: .9rem;}
.navbar a {
	padding: 6px 10px;
	font-size: .9rem;
}
.navbar ul {margin: 6px;}
.navbar .logo {
	float: left;
	margin-left: 2%;
	cursor: pointer;
	height: 44px;
}
.header-right a,
nav a {margin-left: -5px;}
nav a:hover {
	background-color: #fff;
	color: #171BDF;
}
nav li {display: inline-block;}
.submenu {display: inline-block;}
.submenu a {padding: .8% 12px;}
/* Content Areas */
.area {
	padding: 2% 3% 1% 3%;
	background: linear-gradient(to top, rgba(0, 0, 255, .4), rgba(0, 0, 0, .8));
	border-bottom: 1px solid blue;
}
.area h1,
.area h2 {margin: 2% 0 1% 0;}
.area2 {
	padding: 2% 3% 1% 3%;
	background: linear-gradient(rgba(0, 0, 150, 0.1), rgba(0, 0, 100, 0.4)), url(../images/DigitalLandscape-2.jpg) no-repeat #000000;
}
.area2 h1 {margin: 0 0 2% 0;}
.area2 h3,
.area3 h3 {
	padding-left: 1.8rem;
	position: relative;
}
.area2 h3:after,
.area3 h3:after {
	content: '';
	width: 1rem;
	height: 1rem;
	background: #fff;
	display: block;
	position: absolute;
	transform: rotate(45deg);
	top: .3rem;
	left: -.1rem;

}
.area2 p {
	margin: 1%;
	text-align: left;
}
.area3 {
	padding: 1% 2%;
	background: linear-gradient(to top, rgba(0, 0, 255, .4), rgba(0, 0, 0, .6));
}
.area3 h1 {margin-left: 1%}
.area3 h3{margin: 1% 2% 0px 2%;}
.area3 p {
	margin: 2% 0;
	padding: 0 2%;
}
section.list {
	background-color: rgba(0, 0, 0, .4);
	padding: 1%;
	margin: 0 2%;
}
.list img {
	max-height: 500px;
	max-width: 520px;
}
.list span {font-weight: normal}
.list ul {line-height: 1.6rem;}
.list h4 {
	font-weight: bold;
	margin-bottom: 1%;
	text-decoration: underline;
	padding-bottom: 4px;
}
.services {
	padding: 3% 2%;
	min-height: 480px;
}
.services .content {
	width: 34%;
	background-color: rgba(0, 0, 0, .6);
	padding: .5% 2%;
}
.serviceimg {max-width: 600px;}
.freq {
	background: url(../images/freq.jpg) #000000;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.ssir {
	background: url(../images/code.jpg) #000000;
	background-repeat: no-repeat;
}
.guides {
	background: url(../images/blue_dots3.jpg) #000000;
	background-repeat: no-repeat;
}
.mc {
	background: url(../images/DigitalLandscape-3.jpg) #000000;
	background-repeat: no-repeat;
}
.rf {
	background: url(../images/world_map.jpg) #000000;
	background-repeat: no-repeat;
}
.gis {
	background: url(../images/map-green.jpg) #000000;
	background-repeat: no-repeat;
}
.faa {
	background-image: url('../images/towers.jpg');
	background-repeat: no-repeat;
	background-color: #02070D;
}
.bluegrid {background: url(../images/blue_grid.jpg) repeat-y #000000;}

.sitesync {background: linear-gradient(rgba(0, 0, 150, 0.5), rgba(20, 0, 20, 0.5)), url(../images/blue_grid2.jpg) repeat-y #000000;}
.sitesync .content {margin: 0% 4% 0 4%;}
.sitesync .slide {min-height: 286px;}
.sitesync img {margin-top: 4%;}
.sitesync #slideshow {display: inline-block;}
.icon {
    float: left;
    margin-right: 1.4%;
    margin-bottom: 2%;
    width: 70px;
}
.vert {
	background-image: url(../images/sinewave-vert2.png);
	background-repeat: repeat-y ;
	background-position: right top;
}
.vert .content {width: 60%;}
.area4 {
	padding: 3% 2% 1% 2%;
	background-image: url('../images/towers.jpg');
	background-repeat: no-repeat;
	background-color: #02070D;
	min-height: 100%;
}
.area4 .content {
	width: 34%;
	display: inline-block;
}

.services h2,
.area4 h2 {
	display: inline-block; 
	padding: 1% 1% 2% 1%;
	margin: 0;
	}
.row div {
	margin: 0 1% 2% 2%;
	width: 46%;
	vertical-align: top;
	display: inline-block;
}
.news div {
	width: 33%;
	display: inline-block;
	vertical-align: top;
	padding-left: 1%;
	vertical-align: top;
	margin-bottom: 2%;
}
.news ul {
	font-size: 1rem;
	margin: 1% 0% 2% 4%;
}
.news h2 {
	font-size: 1.5rem;
	padding-bottom: 2%;
}
.news h4 {margin-left: 9%;}
.screen {
	max-width: 400px;
	width: 100%;
	border: 1px solid #111;
	margin-bottom: 12px;
	height: auto;
}
p.black {
	padding: 12px 24px;
	background-color: rgba(0, 0, 0, .5);
	margin: 0;
}
.container {
	position: absolute;
	padding: 2%;
	margin: 0;
}
.container p {
	background-color: rgba(0, 0, 0, .6);
	margin: 0;
}
.container img {
	height: 350px;
	margin-right: 48px;
}
.placeholder {
	background:url(../images/loader.gif) center center no-repeat;
	background-color: #fff;
	margin: 0 2% 2% 2%;
	display: inline-block;
}
.stage {
	min-height: 340px;
	width: 73%;
	padding: 24px;
	background-color: rgba(0, 0, 0, .6);
	border: 1px solid #222;
	height: 100%;
	vertical-align: top;
	display: inline-block;
	margin-bottom: 1%;
}
.stage i {
	margin-right: 18px;
	font-size: 1.4rem;
	}
.stage iframe {
	width: 390px;
	height: 450px; 
	}
.stage h3 {
	margin-top: 0;
	border-bottom: 1px solid #ccc;
	display: block;
	font-size: 1.4rem;
}
.stage p {animation-duration: .6s;}
.faq div {
	animation-duration: .8s;
	animation-name: slideUp;
}
ul.accordion  {
	list-style-type: none; 
	margin: 0 24px 0 0; 
	padding: 0;	
	}
.accordion {
	width: 100%;
	max-width: 24%;
	display: inline-block;
}
.accordion .link {
	cursor: pointer;
	display: block;
	padding: 20px 16px 12px 48px;
	color: #eee;
	position: relative;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1px;
	font-size: 20px;
}
.accordion li:last-child .link { border-bottom: 0; }
.accordion li i {
	position: absolute;
	top: 16px;
	left: 12px;
	font-size: 26px;
	color: #eee;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.accordion li i.fa-chevron-down {
	right: 18px;
	left: auto;
}
 i.fa-chevron-down {
    float: right;
	left: auto;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.open i.fa-chevron-down {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.accordion li.open .link { background-color: blue;}
.accordion li.open i.fa-chevron-down {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.subnav {display: none;}
ul.subnav  {
	background-color: rgba(0, 0, 0, .6);
	border: 1px solid #222;
	margin-left: 0;
	margin-bottom: 12px;
	padding: 6px 0px 6px 32px;
	}
.subnav li {
	list-style-type: square; 
	font-size: .9rem;
	}
.subnav li:hover,.subnav a:hover {color: rgba(212,42,54, 1);}
.subnav a {
	display: block;
	text-decoration: none;
	padding: 6px 12px;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	color: #ccc;

}
.faqsection {
	margin-bottom: 24px;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.FAQq {
	cursor: pointer;
	font-weight: bold;
	margin-bottom: 0px;
	margin: 12px 24px 4px 24px;
}
.FAQa {
	border-top: 1px solid #ccc;
	display: none;
	padding: 24px;
	margin: 0 24px;
	background-color: rgba(0,0,0, .2);
}
.boxcube {
	height: 200px;
	float: right;
	width: 800px;
}
.box {
	cursor: pointer;
	width: 200px;
	height: 100%;
	-webkit-transition: .6s ease-in-out;
	-moz-transition: .6s ease-in-out;
	-o-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
	float: left;
	box-sizing: border-box;
	padding: 16px 12px 0px 12px;
	font-size: .8rem;
	font-weight: normal;
	border: 2px solid #222;
    text-align: left;
}
    .box p {
        min-height: 52px;
        font-size: .9rem;
    }

    .box:hover {
        filter: brightness(80%);
    }
.box i {
	position: relative;
	left: 120px;
	top: 0;
}
.box h3 {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.2rem;
	padding-bottom: 6px;
}
.box.selected {
    background-color: #fff;
    color: black;
    border-bottom: 1px solid blue;
}

.box.selected h3 {
    border-bottom: 1px solid blue;
}

.b1 {background-color: #2387FF;}
.b2 {background-color: #1376ED;}
.b3 {background-color: #0C6ADB;}
.b4 {background-color: #005ECF;}
.b5 {background-color: #0155B8;}
.b6 {background-color: #024EAC;}
.b7 {background-color: #014191;}
.b8 {background-color: #074189;}
.s1 {background-color: rgba(212, 42, 54, .6);}
.tagline {
	letter-spacing: 6px;
	font-size: 1.5rem;
	margin: 2% 0% 1% 0%;
}
.imgrid {margin: 0 auto;}
.imgrid img {
	margin-right: 24px;
	height: 250px;
	width: 400px;
}
#btnIWantToTalk {
	background-color: #F53036;
	border: none;
	padding: 12px 50px;
	transition: background-color 0.15s;
}
#btnIWantToTalk:hover {
	background-color: #fff;
	border: none;
	transition: background-color 0.15s;
}
button:disabled, 
#btnIWantToTalk:disabled {background-color: #919191 !important; border-color: #919191 !important; color: #ccc !important;}
#emailSentNotif {
	font-size: 1.25rem;
	margin-left: 5px;
}
#TalkMenu {
	position: fixed;
	box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .5), 0 10px 10px 5px rgba(0, 0, 0, .5);
	border: 2px solid #222;
	white-space: nowrap;
	background-color: black;
	margin: 0 auto;
	top: 2%;
	z-index: 10;
	margin: 0px 12%;
	padding: 2% 1%;
	overflow: hidden;
	display: none;
}
#TalkMenu h2 {
	white-space: normal;
	display: inline-block;
	font-size: 4rem;
	width: 34%;
	color: #F53036;
	padding: 0 2%;
	vertical-align: top;
	margin: 0;
	text-shadow: 1px 1px 2px #ddd;
}
#TalkMenu .content {
	display:inline-block;
	width:62%;
}
#TalkMenu input {
    border: 2px solid white;
    font-size: 1rem;
    padding: 5px 12px;
    background-color: #111;
    margin-right: 12px;
    color: white;
    width: 300px;
}
#myBtn {
	display: none;
	position: fixed;
	bottom: 160px;
	right: 12px;
	z-index: 99;
	background-color: #111;
	color: #ccc;
	padding: 6px;
	border-radius: 4px;
}
#myBtn:hover {background-color: #555; color: #fff;}
/* Case Studies */
.fadeout {
	position: absolute;
	bottom: 0rem;
	left: 0;
	width:100%;
	height: 3rem;
	margin-top: 2rem;
	background: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%,rgba(0, 0, 50, 1) 100%);
	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%,rgba(0, 0, 50, 1) 100%);
	background-image: -o-linear-gradient(rgba(0, 0, 0,, 0) 0%,rgba(0, 0, 50, 1) 100%);
	background-image: linear-gradient(rgba(0, 0, 0, 0) 0%,rgba(0, 0, 50, 1) 100%);
	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0) 0%,rgba(0, 0, 50, 1) 100%);
}
.fadeout:after {
	font-family: "Font Awesome\ 5 Free";
	content: "\f141";
	position: absolute;
	right: 24px;
	bottom: 12px;
}
.current .fadeout:after {display: none;}
.window {
	margin: 0px 24px 0 24px;
	background: linear-gradient(to top, rgba(0,0,255,.3), rgba(0,0,0,.6));
	border: 1px solid black;
}
.case {
	text-align: center;
	position: relative;
}
.case p {text-align: justify;}
.case img {
	margin-top: 1%;
	margin-bottom: 1%;
	border: 1px solid #111;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .4), 0 5px 20px 0 rgba(0, 0, 0, .4);
}
.case.content {
	padding: .5% 3%;
	max-height: 160px;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.collapsible {
	margin: 0;
	padding: .6% 2%;
	border: none;
	color: #eee;
	border-bottom: 1px solid #bbb;
	font-size: 1.4rem;
	cursor: pointer;
}
.collapsible button i {font-size: 4rem;}
.collapsible:hover {
	background-color: #111;
	color: #fff;
}
.learn {
	padding-top: 6px;
	font-size: .6rem;
}
.learn:after {
	font-family: 'Font Awesome\ 5 Free';
	content: '\f063';
	margin-left: 12px;
	font-size: 1rem;
}
.current .learn:after {content: '\f062';}
/* Footer Elements */
footer {
	margin-top: 36px;
	padding: 12px 48px 18px 48px;
	background-color: #02070D;
	border-top: 1px solid #fff;
}
footer nav {
	display: inline-block;
	vertical-align: top;
	margin-top: 24px;
}
footer nav ul {padding: 0;}
footer img {margin: 0 0 12px 0px; display: inline-block;}
footer a {padding: 6px 10px;}
footer a:hover {
	background-color: #fff;
	color: blue;
}
footer address {
	font-style: normal;
	line-height: 1.4rem;
	margin-top: 6px;
}
footer .fab {
	display: inline;
}
footer .brand {
	margin: 0;
	font-size: 1rem;
}
footer .brand:hover {
	color: blue;
	background-color: #fff;
}
#copyright {
	position: fixed;
	z-index: 2;
	background-color: #111;
	margin: 48px 20%;
	top: 2%;
	font-size: .9rem;
	padding: 12px 48px;
	border: 2px solid #666;
	box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .5), 0 10px 10px 5px rgba(0, 0, 0, .5);
	display: none;
}