/*
=======================================================================
 Desktop Styles
=======================================================================
*/

@font-face {
    font-family:'Arial Black'; 
    src: url("../css/arial-black.ttf") format("truetype");
}
    
body {
    width:100%;
    height:auto;
    font-family:Arial;
    font-size:15px;
    color:#000;
    margin:0;
    padding:0;
    text-align:center;
    background:#FFF;
}

.content_container {
    position:relative;
    top:0;
    left:0;
    width:96%;
    max-width:1880px;
    height:auto;
    margin:0 auto;
    text-align:left;
    box-sizing:border-box;
    overflow:hidden;
}

h1 {font-family:Arial Black; font-size:50px; margin:0; text-transform:uppercase;}
h2, h3, h4 {font-family:Arial Black; font-size:26px; color:#EA9600; margin-top:0; margin-bottom:15px; text-transform:uppercase;}
h2 span, h3 span, h4 span {color:#0C1545;}

.col-1 {width:8.33%;}
.col-2 {width:16.66%;}
.col-3 {width:25%;}
.col-4 {width:33.33%;}
.col-5 {width:41.66%;}
.col-6 {width:50%;}
.col-7 {width:58.33%;}
.col-8 {width:66.66%;}
.col-9 {width:75%;}
.col-10 {width:83.33%;}
.col-11 {width:91.66%;}
.col-12 {width:100%;}

[class*="col-"] {float:left; box-sizing:border-box;}

.padall {padding:10px;}
.padleft {padding-left:10px;}
.padright {padding-right:10px;}
.padtop {padding-top:10px;}
.padbottom {padding-bottom:10px;}
.padleftright {padding-left:10px; padding-right:10px;}
.padtopbottom {padding-top:10px; padding-bottom:10px;}

.aligncenter {text-align:center;}
.alignright {text-align:right;}

p {margin-top:0; margin-bottom:15px;}
.lastparagraph {margin:0;}

.leftimage {float:left; width:45%; height:auto; margin-right:15px; margin-bottom:10px;}
.rightimage {float:right; width:45%; height:auto; margin-left:15px; margin-bottom:10px;}

.button a {
	display:block;
	background:#EA9600;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	border-radius:12px;
	text-transform:uppercase;
	box-sizing:border-box;
	text-shadow:none;
}

.button a:hover {
	background:#FFB01A;
}

a.imagebutton {display:block; width:100%; height:auto; font-size:14px; background:#0C1545; color:#FFF; text-align:center; font-weight:bold; text-transform:uppercase; line-height:26px; padding-bottom:8px; text-decoration:none;}
a:hover.imagebutton {background:#EA9600;}

/*
=======================================================================
 Website Header
=======================================================================
*/

#topheader {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:130px;
	color:#FFF;
	font-weight:bold;
	z-index:5;
}

.logo {
	float:left;
	width:48%;
	height:auto;
}

.phone, .address {
	float:left;
	width:26%;
	height:auto;
}

#mobilenavigation, #mobilevisitor, #mobilecall a {
	display:none;
}

.headericon {
	float:left;
	width:15%;
	height:auto;
	font-size:48px;
	color:#EA9600;
	padding-top:38px;
}

.logoicon {
	float:left;
	width:13%;
	height:auto;
	padding-top:8px;
}

.logotext {
	float:right;
	width:85%;
	height:auto;
	font-family:Arial Black;
	font-size:38px;
	padding-top:35px;
	text-transform:uppercase;
	line-height:30px;
}

.logotext span {
	font-size:22px;
	color:#EA9600;
}

.logotext a {
	text-decoration:none;
	color:#FFF;
}

.icontext {
	float:right;
	width:84%;
	height:auto;
	font-size:18px;
	line-height:30px;
	padding-top:35px;
}

.icontext a {
	color:#FFF;
	text-decoration:none;
}

.fadein {
	animation:fadeinanim 1s forwards;
	-webkit-animation:fadeinanim 1s forwards;
	opacity:0;
}

.fadeout {
	animation:fadeoutanim 1s forwards;
	-webkit-animation:fadeoutanim 1s forwards;
	opacity:1;
}

@keyframes fadeinanim {
	to {opacity:1;}
}

@-webkit-keyframes fadeinanim {
	to {opacity:1;}
}

@keyframes fadeoutanim {
	to {opacity:0;}
}

@-webkit-keyframes fadeoutanim {
	to {opacity:0;}
}

/*
=======================================================================
  Navigation Section
=======================================================================
*/

#topnavbar {position:fixed; top:130px; left:0; width:100%; height:60px; background:#0C1545; box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.5); z-index:5;}
#navigation {position:relative; top:0; left:0; width:96%; max-width:1880px; height:100%; margin:auto; box-sizing:border-box;}
#navigation ul {display:flex; text-align:center; margin:0; padding:0; list-style:none; justify-content:space-between;}
#navigation ul li {width:auto;}
#navigation ul li a {display:inline-block; width:100%; line-height:60px; padding-left:48px; padding-right:48px; color:#FFF; font-size:16px; font-weight:bold; text-decoration:none; text-transform:uppercase; transition:all 0.3s ease 0s; box-sizing:border-box;}
#navigation ul li a:hover {background:#EA9600;}

/*
=======================================================================
 Slider Images
=======================================================================
*/

#slider {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:680px;
	color:#FFF;
	background-image:linear-gradient(180deg, #040A2C 0%, #0C1545 100%);
}

#slider span {
	color:#EA9600;
}

#slider .button {
	width:40%;
	height:56px;
	line-height:56px;
	margin-top:40px;
	margin-left:30%;
	margin-right:30%;
	font-size:22px;
}

.slidertext {
	float:right;
	width:60%;
	height:auto;
	text-align:center;
	padding-top:300px;
}

#slider p {
	font-size:34px;
	font-weight:bold;
	text-align:center;
	margin-top:20px;
	margin-bottom:0;
	text-transform:none;
	line-height:45px;
}

.sliderphoto {
	float:left;
	width:35%;
	max-width:375px;
	height:auto;
	padding-top:202px;
}

.slidercontact {
	float:left;
	width:40%;
	height:auto;
	padding-top:260px;
}

/*
=======================================================================
 Benefits Content
=======================================================================
*/

#benefits {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	font-size:25px;
	font-weight:bold;
	margin-top:40px;
	margin-bottom:40px;
	text-transform:uppercase;
}

#benefits .button {
	width:60%;
	height:50px;
	line-height:50px;
	margin-top:20px;
	margin-bottom:10px;
	margin-left:20%;
	margin-right:20%;
	font-size:18px;
}

#benefits span {
	color:#FFF;
	font-size:80px;
	padding-bottom:20px;
}

#benefits p {
	font-size:18px;
	margin-top:15px;
	margin-bottom:10px;
	color:#FFF;
	font-weight:normal;
	text-transform:none;
}

.benefitboxes {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
}

.boxcol {
	float:left;
	width:32%;
	height:auto;
	color:#EA9600;
	background:#0C1545;
	padding:20px;
	text-align:center;
	box-sizing:border-box;
	border-radius:10px;
}

.boxcoltwo {
	float:left;
	width:32%;
	height:auto;
	color:#EA9600;
	background:#0C1545;
	margin-left:2%;
	margin-right:2%;
	padding:20px;
	text-align:center;
	box-sizing:border-box;
	border-radius:10px;
}

/*
=======================================================================
 Main Content
=======================================================================
*/

#websites, #testimonials, #subscriptions {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	margin-bottom:40px;
}

#features {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	color:#FFF;
	font-size:18px;
	font-weight:bold;
	background:#040A2C;
	padding-top:30px;
	padding-bottom:30px;
	margin-bottom:40px;
	box-sizing:border-box;
}

#features h2 {font-size:40px; text-align:center;}
#features h2 span {color:#EA9600;}

/*
=======================================================================
 Features Section
=======================================================================
*/

#services {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	font-size:22px;
	font-weight:bold;
}

#services .button {
	width:60%;
	height:44px;
	line-height:44px;
	margin-top:20px;
	margin-bottom:10px;
	margin-left:20%;
	margin-right:20%;
	font-size:15px;
}

#services span {
	color:#FFF;
	font-size:80px;
	padding-bottom:10px;
}

#services p {
	font-size:17px;
	margin-top:10px;
	margin-bottom:10px;
	color:#FFF;
}

.feature {
	float:left;
	width:22%;
	height:auto;
	color:#EA9600;
	background:#0C1545;
	border-radius:10px;
	padding:15px;
	text-align:center;
	box-sizing:border-box;
	margin-top:20px;
	margin-right:4%;
}

.featuretwo {
	float:left;
	width:22%;
	height:auto;
	color:#EA9600;
	background:#0C1545;
	border-radius:10px;
	padding:15px;
	text-align:center;
	box-sizing:border-box;
	margin-top:20px;
}

.smallbutton a, .smallbuttontwo a {
	display:block;
	width:50%;
	height:50px;
	line-height:50px;
	margin-top:20px;
	margin-bottom:10px;
	margin-left:25%;
	margin-right:25%;
	border:1px solid #FFF;
	font-size:17px;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	border-radius:12px;
	box-sizing:border-box;
	text-transform:uppercase;
	transition:all 0.3s ease 0s;
}

.smallbutton a:hover {
	background:#EA9600;
}

.smallbuttontwo a:hover {
	background:#0C1545;
}

/*
=======================================================================
 Pricing Sections
=======================================================================
*/

.pricetable {
	float:left;
	width:32%;
	height:auto;
	border:1px solid #CCC;
	border-radius:20px;
	background:#0C1545;
	box-sizing:border-box;
}

.pricetabletwo {
	float:left;
	width:32%;
	height:auto;
	border:1px solid #CCC;
	border-radius:20px;
	background:#EA9600;
	margin-left:2%;
	margin-right:2%;
	box-sizing:border-box;
}

.pricetablename {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	font-size:26px;
	padding-top:20px;
	padding-bottom:20px;
	font-weight:bold;
	color:#FFF;
	text-align:center;
	text-transform:uppercase;
}

.pricetablerow {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	font-size:20px;
	font-weight:bold;
	color:#666;
	text-align:center;
	background:#F2F2F2;
	border-bottom:1px solid #CCC;
	padding-top:25px;
	padding-bottom:25px;
	color:#EA9600;
}

.pricetableorder {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	color:#FFF;
	font-size:26px;
	padding-top:30px;
	padding-bottom:20px;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
}

/*
=======================================================================
 Testimonial Section
=======================================================================
*/

.testimonial {float:left; width:32%;}
.testimonialtwo {float:left; width:32%; margin-left:2%; margin-right:2%;}

/*
=======================================================================
 Footer Section
=======================================================================
*/

#contact {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	color:#FFF;
	background:#040A2C;
}

#contact h3 {
	color:#EA9600;
	font-size:20px;
	margin-top:20px;
	margin-bottom:20px;
	text-transform:uppercase;
}

#contact h4 {
	color:#EA9600;
	font-size:20px;
	margin-top:0;
	margin-bottom:10px;
	text-transform:uppercase;
}

#contact h3 span, #contact h4 span {
	color:#FFF;
}

#contact span {
	color:#EA9600;
}

#contact p {
    margin-top:5px;
    margin-bottom:15px;
}

#contact a {
	text-decoration:none;
	color:#FFF;
}

.copyright {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	font-size:13px;
	text-align:center;
    margin-top:30px;
	margin-bottom:20px;
    line-height:25px;
	text-transform:uppercase;
}

/*
=======================================================================
  Overlay Window
=======================================================================
*/

#overlaywindow {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; z-index:500; align-items:center; justify-content:center;}
.overlay_container {position:relative; top:0; left:0; width:70%; height:auto; box-sizing:border-box; overflow:hidden;}
.overlaytitle {position:relative; top:0; left:0; width:100%; height:50px; line-height:50px; text-align:center; font-size:18px; font-weight:bold; color:#FFF; text-transform:uppercase; background:#040A2C;}
.overlayphoto {position:relative; top:0; left:0; width:100%; height:auto; text-align:center; margin:0;}
.overlayvideo {position:relative; top:0; left:0; width:100%; height:0; padding-bottom:56.25%;}
.overlayvideo iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.closeoverlay {float:right; width:auto; height:auto; margin-right:25px;}
.closeoverlay a {text-decoration:none; color:#FFF; font-weight:bold;}

/*
=======================================================================
 Desktop 1680-1920
=======================================================================
*/

@media screen and (max-width:1919px)
{
	h1 {font-size:46px;}
	#navigation ul li a.nav {padding-left:32px; padding-right:32px;}
}
    
/*
=======================================================================
 Desktop 1480-1680
=======================================================================
*/

@media screen and (max-width:1679px)
{
	#topheader .logo {width:44%;}
	#topheader .phone, .address {width:28%;}
	#topheader .headericon {width:16%;}
	#topheader .logotext {font-size:34px;}
	#topheader .logotext span {font-size:20px;}
	#topheader .logoicon {padding-top:20px;}
	#topheader .icontext {font-size:17px; width:83%;}
	h1 {font-size:40px;}
	#slider p {font-size:28px;}
	#navigation ul li a.nav {padding-left:24px; padding-right:24px; font-size:15px;}
	#benefits p {font-size:16px;}
	#benefits .button {font-size:16px;}
	#features h2 {font-size:34px;}
	#subscriptions .pricetablename {font-size:24px;}
	#subscriptions .pricetablerow {font-size:20px;}
}

/*
=======================================================================
 Desktop 1280-1480
=======================================================================
*/

@media screen and (max-width:1479px)
{
	#topheader .logo {width:42%;}
	#topheader .phone, .address {width:29%;}
	#topheader .headericon {width:18%;}
	#topheader .logoicon {font-size:50px; padding-top:34px;}
	#topheader .logotext {font-size:29px;}
	#topheader .logotext span {font-size:17px;}
	#topheader .icontext {font-size:15px; width:80%;}
	#navigation ul li a.nav {padding-left:20px; padding-right:20px; font-size:13px;}
	h1 {font-size:34px;}
	#slider p {font-size:24px; line-height:38px;}
	#slider .button {font-size:20px;}
	.slidercontact {padding-top:280px;}
	#benefits p {font-size:15px;}
	#services .smallbutton a {font-size:13px;}
	#services p {font-size:14px;}
	#benefits {font-size:22px;}
	#benefits .button, #features .button {width:80%; margin-left:10%; margin-right:10%;}
	#features h2 {font-size:32px;}
	#subscriptions .pricetablename {font-size:21px;}
	#subscriptions .pricetablerow {font-size:17px;}
	a.imagebutton {font-size:12px;}
}

/*
=======================================================================
 Desktop 1024-1280
=======================================================================
*/

@media screen and (max-width:1279px)
{
	.content_container {width:96%;}
	#navigation {width:100%;}
	#topheader .logo {width:42%;}
	#topheader .phone {width:33%;}
	#topheader .address {width:25%;}
	#topheader .logoicon {font-size:42px; padding-top:38px;}
	#topheader .logotext {font-size:24px; line-height:26px; padding-top:40px;}
	#topheader .logotext span {font-size:14px;}
	#topheader .icontext {font-size:15px; line-height:26px; padding-top:40px;}
	#navigation ul li a.nav {padding-left:10px; padding-right:10px; font-size:12px;}
	#navigation ul li a:hover {background:#0C1545;}
	h1 {font-size:29px;}
	#slider p {font-size:23px;}
	#slider .button {font-size:18px;}
	#benefits {font-size:20px; margin-top:20px;}
	#benefits p {font-size:14px;}
	#benefits .button, #features .button {width:100%; margin-left:0; margin-right:0;}
	#services {font-size:18px;}
	#services p {font-size:13px;}
	#services .smallbutton a {width:90%; font-size:12px; margin-left:5%; margin-right:5%;}
	#subscriptions .pricetablename {font-size:18px;}
	#subscriptions .pricetablerow {font-size:15px;}
	#subscriptions .pricetableorder {font-size:24px;}
	#subscriptions .smallbutton a {width:60%; margin-left:20%; margin-right:20%;}
	#testimonials .leftimage {width:100%;}
	#testimonials a.imagebutton {font-size:14px;}
	#contact a.imagebutton {font-size:10px;}
	#contact h4 {font-size:16px;}
}

/*
=======================================================================
 Tablets 768-1024
=======================================================================
*/



/*
=======================================================================
 Mobile & Small Tablets
=======================================================================
*/
    
@media screen and (max-width:1023px)
{
    body {font-size:14px;}
    
    h1 {font-size:28px;}
    h2, h3 {font-size:18px;}
	
	#topheader {height:80px; background:#040A2C; box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.5);}
	#topheader .phone {display:none;}
	#topheader .address {display:none;}
	#topheader .logo {width:86%;}
	#topheader .logoicon {width:16%; padding-top:10px;}
	#topheader .logotext {width:82%; font-size:21px; padding-top:18px; line-height:20px;}
	#topheader .logotext span {font-size:12px;}
	
	#topnavbar {height:auto; display:none; top:80px; background:#0C1545; max-height:calc(100% - 80px); overflow-x:hidden; overflow-y:scroll;}
	#navigation {width:100%; height:auto;}
	#navigation ul {flex-direction:column;}
	#navigation ul li {width:100%; margin:0;}
    #navigation ul li a.nav {font-size:16px; width:100%; padding:0 0 0 20px; text-align:left; border-top:1px solid #EA9600;}
    #mobilenavigation {display:block; float:right; width:40px; height:40px; font-size:24px; line-height:40px; text-align:center; margin-top:18px; box-sizing:border-box;}
	#mobilenavigation a {display:block; width:100%; height:100%; background:#EA9600; color:#FFF; text-decoration:none;}
	
	#slider {margin-top:80px; height:auto; padding-bottom:60px; background-image:linear-gradient(180deg, #0C1545 0%, #040A2C 100%);}
	#slider .slidertext {width:100%; font-size:30px; padding-top:30px;}
	#slider .slidertext p {font-size:16px; line-height:25px; margin-top:15px;}
	#slider .slidercontact {width:100%; padding-top:30px;}
	#slider .button {width:80%; margin-left:10%; margin-right:10%;}

	#benefits {font-size:24px;}
	#benefits p {font-size:16px;}
	#benefits .boxcol {width:100%;}
	#benefits .boxcoltwo {width:100%; margin-top:20px; margin-bottom:20px; margin-left:0; margin-right:0;}
	#benefits .button {width:80%; margin-left:10%; margin-right:10%;}

	#websites .rightimage {width:100%; margin-left:0;}

	#services {font-size:15px;}
	#services p {font-size:11px;}
	#services .feature {width:48%; margin-left:1%; margin-right:1%;}
	#services .featuretwo {width:48%; margin-left:1%; margin-right:1%;}
	#services .smallbutton a {font-size:10px;}

	#features h2 {font-size:24px;}

	#subscriptions .pricetable {width:100%;}
	#subscriptions .pricetabletwo {width:100%; margin-top:20px; margin-bottom:20px; margin-left:0; margin-right:0;}

	#testimonials {margin-bottom:10px;}
	#testimonials .testimonial {width:100%; padding:0; margin-bottom:15px;}
	#testimonials .testimonialtwo {width:100%; padding:0; margin-left:0; margin-right:0; margin-bottom:15px;}
	#testimonials .leftimage {width:50%;}
	
	#contact .col-4 {width:100%; padding:0;}
	#contact .copyright {font-size:11px; margin-top:20px; margin-bottom:20px;}
	#contact a.imagebutton {font-size:13px;}

	#overlaywindow .overlay_container {width:90%;}
	#overlaywindow .overlaytitle {font-size:15px;}
}