@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Rubik:400,700,900,300,500);


/* 
dark: #111f2e;
light: #f39c12;
 */


::-webkit-scrollbar-track
{
	background-color: #111;
}

::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{background-color: #f39c12;}

body{
	margin: 0;
	padding: 0;
	background-color: #fff;
	padding: 0px 0;
	font-family: 'Rubik', sans-serif;
	overflow-x:hidden; 
}
.mainsitediv{
	float: left;
	width: 100%;
	display: block;
}
a, a:active, a:visited, a:link{
	color: #041538;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Rubik', sans-serif;
	text-transform: uppercase;
	margin: 0;
	margin-bottom: 10px;
}

h1{	font-size: 28px;}
h2{	font-size: 22px;}
h3{	font-size: 17px;font-weight: 600;}
h4{	font-size: 17px;}
h5{	font-size: 16px;}
h6{	font-size: 16px;}

hr{
	width: 30px;
	margin: 10px 0;
	border:1px dashed #f39c12;
	display:block;
}

p{
	font-size: 15px;
	line-height: 160%;
	font-weight: 300;
	opacity: 0.8;
}

ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

header{
	width: 100%;
	float: left;
	position: relative;
	background-color: #111f2e;

	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}
header::after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	background-color: #111f2e;
	opacity: 0.8;
	z-index: 5;
	content:" ";
}
.headercontainer{
	position: relative;
	z-index: 6;
}
.topbar{
	background-color: #fff;
	overflow: auto;
	padding: 0 30px;
	width: 100%;
}
.deets a{
	display: inline-block;
	line-height: 50px;
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 300;
	margin-right: 30px;
	color: white;
	word-break: break-all;
}
.deets img{
	height: 30px;
	margin-right: 10px;
}
.logo{
	float: left;
}
.logo p{
	font-size: 28px;
	font-weight: 500;
	line-height: 70px;
	margin: 0;
	text-transform: uppercase;
}
.flr{float: right;margin-right: 0;}
nav{
	float: right;
}
nav ul{float: right;}
nav ul li{display: inline-block;}
nav ul li a{
	display: inline-block;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 70px;
	padding: 0 10px;
	margin: 0;
	word-break: break-all;
}
nav ul li a:hover{
	background-color: #eee;
}
.sub{
	background-color: white;
	width: 300px;
	position: absolute;
	top: 120px;
	display: none;
	z-index: 100;
}
.sub li{display: block;width: 100%;}
.sub li a{
	display: block;
	line-height: 50px;
	padding: 0 20px;
	width: 100%;
}
.sub li a:hover{
	background-color: rgba(0,0,0,0.3);
}
nav ul li:hover .sub{display: block;}


.active{
	box-shadow: inset 0px -3px 0px #111f2e;
}
.bannertext{
	text-align: center;
	color: white;
	width: 100%;
	padding: 120px 0;
	max-width: 700px;
	margin: auto;
	position: relative;
}
.other{
	padding: 80px 30px;
}
.bannertext h1{
	margin: 0;
}
.bannertext p{
	margin: 0;
	font-size: 15px;
	font-weight: 400;
}
.bannertext a{
	border: 1px solid #f39c12;
	color: white;
	text-transform: uppercase;
	padding: 7px 20px;
	margin-top: 20px;
	display: inline-block;
	border-radius: 5px;
	font-size: 13px;
}

.conbar{
	background-color: #111f2e;
	color: white;
	text-transform: uppercase;
	float: left;
	width: 100%;
	display: block;
}
.conbar a{
	color: white;
	text-transform: uppercase;
	display: inline-block;
	font-size: 14px;
	float: right;
	line-height: 70px;
	padding: 0 15px;
	transition: ease-out 0.3s;
	background-color: rgba(0,0,0,0.2);
}
.conbar a:hover{
	background-color: rgba(0,0,0,0.4);
}
.conbar p{
	display: inline-block;
	line-height: 40px;
	margin: 0;
	padding: 15px 0;
}

main{
	float: left;
	width: 100%;
	padding: 60px 0;
}
.content {
	padding: 0;
	padding-right: 60px;
}
.sidebar{
	padding: 0;
}
.arrows{
	float: right;
	margin-top: -50px;
	position: relative;
	z-index: 3;
}
.sidebar img{width: 100%;}

.why{
	float: left;
	width: 100%;
	background-color: #111f2e;
	color: white;
}
.whybox{
	padding: 90px 0;
	padding-left: 90px;
}

.leftimg{
	position: relative;
}

.leftimg::before{
	width: 200%;
	height: 100%;
	background-image: url(../images/why.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	content: " ";
	position: absolute;
	left: -100%;
}

.whyblock img{
	float: left;
	width: 40px;
	height: 40px;
	margin-right: 15px;
	clear: both;
	display: block;
}
.whyblock h3{
	line-height: 40px;
}


footer{
	background-color: #111;
	float: left;
	width: 100%;
	padding: 60px 0;
	color: #fff;
}
footer p{
	font-weight: 300;
}
.fcon a{
	color: white!important;
}
.fcol{
	padding: 0;
	padding-right: 60px;
}
.fcon img{
	height: 25px;
	margin-right: 5px;
	line-height: 40px;
}
.fcol a, .faddress p{
	margin: 0;
	display: block;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 40px;
	color: #aaa;
	font-weight: 300;
}
.fcon a{
	display: inline-block;
	line-height: 40px;
	background-color: #111f2e;
	border-radius: 5px;
	padding: 0 20px;
	margin-right: 10px;
	margin-top: 15px;
	word-break: break-all;
}

.by{
	width: 100%;
	float: left;
	background-color: #050505;
	color: #aaa;
	padding: 20px 0;
}
.by p{
	font-size: 13px;
	text-transform: uppercase;
	margin: 0;
}


.socialtoggler{display: none;}
.toggler{display: none;}

.services ul{
	padding: 30px;
	padding-bottom: 18px;
	background-color: #eee;
	margin: 20px 0;
}

.services ul li{
	background-color: #fff;
	display: block;
	margin-bottom: 12px;
	padding: 10px 30px;
	border-bottom: 1px solid #ddd;
}

.gallery{
	padding: 0px 0;
}

.thumbs{
	float: left;
	width: 20%;
	padding: 8px;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.thumbs::after{
	content: " ";
	width: 100%;
	height: 100%;
	background-color: #111f2e;
	top: 100%;
	left: 0;
	z-index: 20;
	position: absolute;
	transition:ease 0.3s;
	opacity: 0.75;
	pointer-events:none;

	background-image: url(../images/icons/zoom.svg);
	background-position: center center;
	background-repeat: no-repeat;
}
.thumbs img{
	width: 100%;
}

.thumbs:hover::after{
	top: 0;

}

iframe{
	width: 100%;
	height: 450px;
	margin-bottom: 30px;
	margin-top: 20px;
}

.conbox{
	background-color: #eee;
	padding: 30px;
	margin-bottom: 0px;
}

.conbox p, .conbox a{
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	line-height: 50px;
	padding: 0 30px;
	opacity: 1;
	margin: 0;
	margin-bottom: 10px;
	color: black!important
}







.myform{
	padding: 40px 30px;
	background-color: #eee;
	margin-top: 20px;
	overflow: auto;
}

.myform label{
            float: left;
            font-size: 14px;
            position: relative;
            font-weight: bold;     
            text-transform: uppercase;
            line-height: 24px;
            box-sizing: border-box;
            color: #111f2e;
}
select{
            border-radius: 0px;
}
.myform img{
            width: 215px;
            height: 80px;
            float: left;
            background-color: #333;
            margin: 10px 10px 10px 0px;
            display: block;
}
.security{
            width: 100%;
            display: block;
            overflow: auto;
}
#code{
            width: calc(100% - 225px);
            margin-bottom: 0px;
            margin-top: 10px;
}
.myform a{
            width: calc(100% - 225px);
            line-height: 30px;
            color: #FFF;
            background-color: #888;
            display: block;
            float: left;
            padding: 0px 20px;
}
.myform input, .myform select{
            width: 100%;
            color: #444;
            padding: 0px 20px;
            border:0px;
            border-left: 2px solid #888;
            height: 46px;
            margin-bottom: 12px;
            border-radius: 0px;
}
.myform textarea{
            padding: 10px 20px 10px 20px;
            color: #444;
            border:0px;
            border-left: 2px solid #888;
            width: 100%;
            height: 120px;
            border-radius: 0px;
}
.select-option{
            background-color: #666;
            border: none;
            color: #FFF;
}
.myform p{
            float: right;
            margin: 0px 10px;
            padding: 0px;
            width: calc(100% - 245px);
            line-height: 40px;
}

input[type=submit]{
            width: auto;
            height: 46px;
            margin-top: 20px;
            background-color: #111f2e;
            border-radius: 0px;
            text-transform: uppercase;
            color: #FFF;
            border: none;
            outline: none;
            float: left;
            padding: 0px 40px;
            font-size: 14px;
}
.myform input:focus, .myform textarea:focus, .myform select:focus{
			border:0px;
            border-left: 2px solid #111f2e;
            outline: none!important;
}
@media screen and (max-width: 580px){
            .myform img{
            width: 100%;
            height:auto;
}
#code{
            width: 100%;
            margin-bottom: 0px
}
.myform a{
            width: 100%;
            margin-top: 10px;
            line-height: 30px;

}
}

main img{
	width: 100%;
}

























@media screen and (max-width: 1024px) { 


.sub{display: block;width: 100%;position: relative;top: 0;padding-left:20px;}

h1{	font-size: 23px;}
h2{	font-size: 18px;}
h3{	font-size: 16px;font-weight: 400;}
h4{	font-size: 15px;}
h5{	font-size: 15px;}
h6{	font-size: 14px;}


p{
	font-size: 13px;
	line-height: 160%;
	font-weight: 300;
	opacity: 0.8;
}
a, a:active, a:visited, a:link{
	color: #fff;
	text-decoration: none;
}
.socialtoggler{
	display: block;
	float: left;
	position: fixed;
	background-color: #111f2e;
	left: 50%;
	width: 50%;
	height: 60px;
	padding: 5px;
	z-index: 100;
	color: white;
	text-transform: uppercase;
}
.toggler{
	display: block;
	float: left;
	position: fixed;
	background-color: #f39c12;
	width: 50%;
	height: 60px;
	padding: 5px;
	z-index: 100;
	color: white;
	text-transform: uppercase;
}
.socialtoggler p, .toggler p{font-weight: 700;}
.socialtoggler img{
	position: relative;
	z-index: 5;
	float: left;
	width: 50px;
	height: 50px;
	margin-right: 10px;
}
.toggler img{
	width: 50px;
	height: 50px;
	position: relative;
	z-index: 5;
	float: left;
	margin-right: 10px;
}
.logo{width: 100%;}
.logo p{
	font-size: 22px;
	font-weight: 500;
	line-height: 40px;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	display: block;
	padding: 20px 0;
	color: black;
}

nav{
	position: fixed;
	width: 90%;
	top: 60px;
	left: -100%;
	transition: ease-out 0.3s;
	z-index: 50;
}
nav ul{
	width: 100%;
	background-color: #f39c12;
	height: 100vh;
	padding-top: 20px;
	z-index: 50;
}
nav ul li{display: block;
width: 100%;}
nav ul li a{
	display: block;
	padding: 0 30px;
	line-height: 50px;
}
.topbar{
	padding: 0;
	padding-top: 60px;
}
.bannertext{
	z-index: 4;
	position: relative;
	padding: 100px 30px;
}
.other{
	padding: 60px 30px;
}
.bannertext p{
	font-size: 12px;
}
.deets{
	position: fixed;
	width: 90%;
	top: 60px;
	right: -100%;
	transition: ease-out 0.3s;
	z-index: 500;
	background-color: #111f2e;
	padding: 20px 30px;
	height: 100vh;
}
.deets a{
	display: block;
}
.flr{float: left;}
.none{display: none;}
.showcon{
	right: 0;
}
.shownav{
	left: 0;
}
.headercontainer{
	position: relative;
	z-index: 6;
}

main{
	float: left;
	width: 100%;
	padding: 30px 30px;
}
.content {
	padding: 0;
	padding-right: 0px;
}
.whybox{
	padding: 60px 30px;
	padding-left: 30px;
}
.whyblock h3{
	display: block;
	width: 100%;
}
.whyblock img{
	display: block;
	float: none;
}

footer{
	padding: 60px 30px 30px;
}
.fcol{
	padding-right: 0px;
	padding-bottom: 30px;
}
.by{
	padding: 20px 30px;
}

.services ul{
	padding: 10px;
	padding-bottom: 5px;
	background-color: #eee;
	margin: 20px 0;
}

.myform{
	padding: 00px 00px;
	background-color: #fff;
	margin-top: 20px;
	overflow: auto;
}


.conbox{
	background-color: #eee;
	padding: 10px;
	margin-bottom: 0px;
}

.conbox p, .conbox a{
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	line-height: 20px;
	padding: 10px 10px;
	opacity: 1;
	margin: 0;
	margin-bottom: 10px;
	color: black!important;
	word-break: break-all;
}

.active{
	box-shadow: inset 0px 0px 0px #111f2e;
}
.thumbs{
	width: 33.33%;
	padding: 4px;
}



}