@charset "utf-8";
/* CSS Document */

body, h1, h2, h3, h4, h5, h6, p, ul, li, a, img, form, input, textarea {margin:0; padding:0;}

img {border:none;}

a {text-decoration:none;}

.clear {clear:both;}

@font-face {
    font-family: 'BritannicBoldRegular';
    src: url('../assets/britanic.eot');
    src: url('../assets/britanic.eot') format('embedded-opentype'),
         url('../assets/britanic.woff2') format('woff2'),
         url('../assets/britanic.woff') format('woff'),
         url('../assets/britanic.ttf') format('truetype'),
         url('../assets/britanic.svg#BritannicBoldRegular') format('svg');
}

html {-webkit-text-size-adjust:none;}

body {background:url(../images/background.jpg); font-family:Arial, Helvetica, sans-serif}

#wrapper {width:95%; max-width:1200px; background:#fff; margin:0 auto; padding-bottom:20px}

#top {background:#101d63; text-align:center}

#top ul li {list-style-type:none; display:inline-block; font-size:16px; color:#ffffff; font-style:italic; padding:10px 2%}

#top1 {background:#fff; width:96%; padding:20px 2%}

#top1 .logo {float:left; width:100%; max-width:470px}

#top1 p {font-size:15px; color:#282827; line-height:30px;}

#top1 .number {font-size:18px}

#top1 .follow {float:left}

#top1 p img {float:left; margin:0 0 0 10px}

#top1 .right-top {float:right; }

#top1 .right-top h3 {font-size:15px; font-weight:100}

#nav {background: #9e9e9e; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #9e9e9e 0%, #a3a3a3 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#9e9e9e), color-stop(100%,#a3a3a3)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #9e9e9e 0%,#a3a3a3 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #9e9e9e 0%,#a3a3a3 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #9e9e9e 0%,#a3a3a3 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #9e9e9e 0%,#a3a3a3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e9e9e', endColorstr='#a3a3a3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
position:relative;
}

#nav ul li {float:left; list-style-type:none; font-size:18px; text-transform:uppercase; padding:0 3%;}

#nav ul li a {color:#fff; padding:15px 0; display:block}

#nav ul li a:hover {color:#e6f2ed}

#nav ul li ul {display:none}

#nav ul li ul li {font-size:14px; text-transform:none; float:none; padding:0; border-top:1px solid #7da998}

#nav ul li ul li:first-child {border-top:none}

#nav ul li ul li a {padding:5px 0}

#nav ul li:hover ul{
	display: block;
	position: absolute;
	top:50px;
	z-index: 10;
	margin:0; float:none; 
	padding:5px 10px 10px 10px;
	width:25%;
	font-family:"Hind Regular", Arial, Helvetica, sans-serif;
	text-align:left;
	margin-left:-10px;
	background: #467764;
	z-index:9999 !important;
	}
	#header {background: #0e1355; /* Old browsers */
background: -moz-linear-gradient(top,  #0e1355 0%, #888786 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e1355), color-stop(100%,#888786)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0e1355 0%,#888786 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0e1355 0%,#888786 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0e1355 0%,#888786 100%); /* IE10+ */
background: linear-gradient(to bottom,  #0e1355 0%,#888786 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e1355', endColorstr='#888786',GradientType=0 ); /* IE6-9 */
}
	.left-header {width:72.5%; float:left}
	
.left-header img {width:100%; max-width:869px}
.quick-contact {width:23.5%; float:left; padding:0 2%}
	.quick-contact h4 {color:#fff; font-family:'BritannicBoldRegular', Arial, Helvetica, sans-serif; font-size:20px; padding:20px 0 0 0; font-weight:100; text-transform:uppercase; text-align:center}

.quick-contact label span {float:left; clear:left; font-size:14px; padding:5px 0 0 0; color:#fff}

.quick-contact input {float:left; clear:left; width:98%; margin:2px 0 0 0; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:0.1em 1%}

.quick-contact textarea {float:left; clear:left; width:98%; margin:2px 0 0 0; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:0.1em 1%; height:80px;}

.quick-contact .submit {width:129px; height:37px; margin:15px 0 0 0}

.quick-contact .code {margin:15px 0 0 0; float:left}

#content {width:96%; padding:0 2%}

#content h2 {font-family:'BritannicBoldRegular', Arial, Helvetica, sans-serif; color:#101d63; font-weight:100; font-size:27px; padding:30px 0 0 0}

#content h3 {font-family:'BritannicBoldRegular', Arial, Helvetica, sans-serif; color:#0e1355; font-weight:100; font-size:24px; padding:15px 0 0 0}

#content p {font-size:16px; color:#4c4b4a; padding:25px 0 0 0; line-height:30px}

#content .why {float:right; margin:-20px 0 0 5%; /*width:30%; max-width:291px*/}

/*#services {width:96%; padding:0 2%}*/

#services h3 {font-family:'BritannicBoldRegular', Arial, Helvetica, sans-serif; color:#0e1355; font-weight:100; font-size:24px; padding:15px 0 0 1.8%}

#services h4 {font-family:'BritannicBoldRegular', Arial, Helvetica, sans-serif; color:#8f5337; font-weight:100; font-size:24px; text-transform:uppercase; padding:15px 0 0 1.8%}

#services h5 {font-family:'BritannicBoldRegular', Arial, Helvetica, sans-serif; color:#466a5c; font-weight:100; font-size:16px;  }

#services h5 a {color:#101d63;}

#services h5 a:hover {color:#222873;}

.service-box {text-align:center; display:inline-block; margin:25px 0 0 1.8%; width:23%; max-width:269px;vertical-align:top}

.service-box  img {width:100%; max-width:269px; margin:7px 0 0 0}

#footer {width:95%; max-width:1200px; background:#fff; margin:30px auto 50px auto; background:#a27349; font-size:11px; color:#fff; padding:20px 0; text-align:center}

#footer p {padding:10px 2% 0 2%}

#footer h1 {padding:10px 2% 0 2%; line-height:20px; font-size:11px; font-weight:100;}

#footer ul li {float:left; list-style-type:none; padding:0 5px; border-left:1px solid #dbccbe}

#footer ul li:first-child {border-left:0; padding-left:0}

#footer  a {color:#fff}

#footer a:hover {color:#dbccbe}

#footer h6 {float:right; font-size:11px; font-weight:100; padding:0 2%}

#sub-content {width:96%; padding:0 2%}

#sub-left {width:68%; float:left}

#sub-left img { width: 100%; margin-top: 20px}

#sub-right {width:26%; float:right; padding:0 2%;
background: #815c41; /* Old browsers */
background: -moz-linear-gradient(top,  #815c41 0%, #c49867 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#815c41), color-stop(100%,#c49867)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #815c41 0%,#c49867 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #815c41 0%,#c49867 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #815c41 0%,#c49867 100%); /* IE10+ */
background: linear-gradient(to bottom,  #815c41 0%,#c49867 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#815c41', endColorstr='#c49867',GradientType=0 ); /* IE6-9 */
padding-bottom:20px;
}

#sub-right h4 {color:#fff; font-family:'BritannicBoldRegular', Arial, Helvetica, sans-serif; font-size:20px; padding:20px 0 0 0; font-weight:100; text-transform:uppercase; text-align:center}

#sub-right label span {float:left; clear:left; font-size:14px; padding:5px 0 0 0; color:#fff}

#sub-right input {float:left; clear:left; width:98%; margin:2px 0 0 0; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:0.1em 1%}

#sub-right textarea {float:left; clear:left; width:98%; margin:2px 0 0 0; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:0.1em 1%; height:80px;}

#sub-right .submit {width:129px; height:37px; margin:15px 0 0 0}

#sub-right .code {margin:15px 0 0 0; float:left}

#sub-content h2 {font-family:'BritannicBoldRegular', Arial, Helvetica, sans-serif; color:#0e1355; font-weight:100; font-size:27px; text-transform:uppercase; padding:30px 0 0 0}

#sub-content h3 {font-family:'BritannicBoldRegular', Arial, Helvetica, sans-serif; color:#8f5337; font-weight:100; font-size:20px; text-transform:uppercase; padding:15px 0 0 0}

#sub-content p {font-size:16px; color:#4c4b4a; padding:25px 0 0 0; line-height:30px}

#sub-left label span {text-transform:uppercase; font-size:14px; color:#5a5a5a; float:left; clear:left; padding:15px 0 0 0}

#sub-left .field {float:left; clear:left; margin:10px 0 0 0; width:90%; padding:0.3em; font-family:Arial, Helvetica, sans-serif; font-size:13px}

#sub-left textarea {float:left; clear:left; margin:10px 0 0 0; width:90%; padding:0.3em; height:120px; font-family:Arial, Helvetica, sans-serif; font-size:13px}

#sub-left .code {float:left; margin:10px 0 0 1.5%}

#sub-left input {float:left; margin:10px 0 0 20px; padding:5px }

@media all and (min-width:0px) and (max-width:780px) {
#footer {text-align:center}
#footer ul {padding:10px 2% 0 2%}
#footer p {float:none; clear:left; padding:10px 2% 0 2%}
#footer h1 {float:none; clear:left; padding:10px 2% 0 2%; line-height:20px; font-size:11px; font-weight:100; width:96%}
#footer ul li {float:none; display:inline-block; list-style-type:none; padding:0 5px; border-left:1px solid #dbccbe}
#footer ul li:first-child {border-left:0; padding-left:0}
#footer  a {color:#fff}
#footer a:hover {color:#dbccbe}
#footer h6 {float:none; font-size:11px; font-weight:100; padding:0 2%}
#services h5 {font-size:14px}
}
.header-tablet {display:none}
@media all and (min-width:0px) and (max-width:890px) {
.left-header {float:none; width:100%}
.quick-contact {float:none; width:96%; padding-bottom:20px;}
#sub-left {float:none; width:100%}
#sub-right {float:none; width:96%; margin:20px 0 0 0}
.header-tablet {display:block}
.header-computer {display:none}
}

@media all and (min-width:891px) and (max-width:1150px) {
.quick-contact h4 {font-size:14px; padding:8px 0 0 0}
.quick-contact label span {font-size:12px; margin:2px 0 0 0; padding:0}
.quick-contact textarea {height:40px; font-size:12px; margin:1px 0 0 0}
.quick-contact input {font-size:12px}
#content .why {float:right; margin-top:20px }
}
@media all and (min-width:0px) and (max-width:1300px) {
.service-box { width:22%;}
}

@media all and (min-width:0px) and (max-width:980px) {
.service-box { width:30.5%;}
}

@media all and (min-width:0px) and (max-width:650px) {
.service-box { width:47%;}
}

@media all and (min-width:0px) and (max-width:450px) {
.service-box { width:98%; margin:20px 0 0 0; padding:0}
#services {text-align:center}
}

@media all and (min-width:0px) and (max-width:1024px) {
#content .why {float:right; margin-top:20px }
}

@media all and (min-width:0px) and (max-width:680px) {
#content h2 {font-size:25px;}
#content h3 {font-size:18px;}
#content .why {float:none; margin:20px auto 0 auto; width:100%; max-width:291px; display:block }
}

@media all and (min-width:0px) and (max-width:880px) {
#content h2 {text-align:center; font-size:18px}
#services h3 {text-align:center; font-size:18px; padding-top:30px}
}



@media all and (min-width:0px) and (max-width:980px) {
#top ul li {font-size:12px}
#top1 .logo {float:none}
#top1 p {float:none}
#top1 .right-top {float:none}
#top1 {text-align:center}
#top1 .follow {float:none}
#top1 p img {float:none; margin:0 0 0 10px; position:relative; top:9px}
#nav ul li:hover ul {width:35%}
}
#mobile-bar {display:none}
#top1 .call {display:none}
@media all and (min-width:0px) and (max-width:580px) {
#top1 .call {display:block; margin:10px auto 0 auto}
#top1 .call img {width:100%; max-width:335px}
#nav {display:none}
#mobile-bar {display:block; text-align:center;
background: #9e9e9e; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #9e9e9e 0%, #a3a3a3 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a3a3a3), color-stop(100%,#467764)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #9e9e9e 0%,#a3a3a3 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #9e9e9e 0%,#a3a3a3 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #9e9e9e 0%,#a3a3a3 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #9e9e9e 0%,#a3a3a3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e9e9e', endColorstr='#a3a3a3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#mobile-bar a {color:#fff; text-transform:uppercase; font-size:18px; padding:10px 0; display:block; background:url(../images/navigation.png) no-repeat 10px 10px}
}