﻿@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

/* CSS Document */


@font-face {
	font-family: "Flaticon";
	src: url("ufontscomgill-sans-mt-bold.eot");
	src: url("ufontscomgill-sans-mt-bold.eot#iefix") format("embedded-opentype"),
	url("ufontscomgill-sans-mt-bold.woff") format("woff"),
	url("ufontscomgill-sans-mt-bold.ttf") format("truetype"),
	url("ufontscomgill-sans-mt-bold.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}


*{padding:0px; margin:0px;}
body {background:#efeff0; font-family:'Open Sans', sans-serif; margin:0px; padding:0px; font-size:12px;}
.clear{clear:both;}
img { outline:none; }
p{line-height:20px; margin-bottom:10px;}
.wrapper{width:950px; margin:0 auto;}

header{background:url(../images/headerbg.png) repeat-x top #dfdfe1; min-height:129px; }
hgroup{padding:25px 0px 0px; float:left;}
hgroup p{margin:0px; padding:0px; color:#e20902; font-family: 'Open Sans', sans-serif; font-size:14px;}
section.contactDetails{padding:20px 0px; float:right; width:230px;}
section.contactDetails h2{margin:0px; padding:0px; text-align:right; font-size:18px; color:#07387b; font-family: 'Open Sans', sans-serif; font-size:16px;}
section.contactDetails p{margin:0px; padding:0px; text-align:right; color:#f00; font-family: 'Open Sans', sans-serif; font-size:14px; }
section.contactDetails p span{color:#07387b; }

section.mainBg{background:url(../images/main-bg.png) repeat-x center top #0077af; width:100%; height:287px;}
.mainwrapper{width:950px; margin:0 auto;}
.container{margin-top:-5px;  background:#fff; float:left; width:100%; padding:20px; box-sizing: border-box; border: 1px solid #cccccc; margin-bottom:15px;}

.introimg{float:left; width:45%;}
.intro{float:right; width:54%;}
.intro h1{color:#07387b; font-family: "Flaticon"; font-size:22px; font-weight:normal; margin-top:70px; margin-bottom:10px;}

/*THREE COLOUM*/
.three-coloum{margin:0px 0px 10px 0px;}
.three-coloum .coloum {float: left; margin-right: 35px; width: 30%;}
.three-coloum .coloum h2{font-size:14px; font-family: "Flaticon"; color:#07387b; font-weight:normal; margin-bottom:10px;}
.three-coloum .coloum.mRnone{margin-right:0px;}
.three-coloum .coloum p{margin:0px; padding:0px; line-height:16px;}

/*TWO COLOUM*/
.two-coloum{margin:0px 0px 10px 0px;}
.two-coloum .coloum {float: left; margin-right: 35px; width: 30%;}
.two-coloum .coloum h2{font-size:14px; font-family: "Flaticon"; color:#07387b; font-weight:normal; margin-bottom:10px;}
.two-coloum .coloum.mRnone{margin-right:0px;}
.two-coloum .coloum p{margin:0px; padding:0px; line-height:16px;}

/*MAP COLOUM*/
.map{margin:0px 0px 15px 0px;}
.map .coloum{margin:0px; width:48%; margin-right:10px;  float:left; }
.map .coloum h2{font-size:14px; font-family: "Flaticon"; color:#07387b; font-weight:normal; margin-bottom:10px;}
.map .coloum.mRnone{margin-right:0px; float:right;}

/*footer*/
.footer{background: url(../images/ft-bg.png) repeat-x top center #02538f; width:100%; text-align:center; color:#FFFFFF; font-weight:normal; font-size:12px; font-family: "Flaticon"; line-height:16px; padding:5px 0px; clear:both;}
.footer p{padding:0px; margin:0px;}


/*RESPONSIVE*/
/***** Media Queries CSS *****/
@media screen and (max-width: 950px) {
section{width:100%; padding:20px; box-sizing: border-box;}
section.clear {padding: 0;}
hgroup, section.contactDetails{padding:0px;}
.wrapper,.mainwrapper{width:100%;}
.mainwrapper{padding:0px;}
section.mainwrapper section {padding: 10px;}
section.coloum iframe{width:100%;}
section.footer{padding:0px;}
}

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

.introimg img {width: 100%;}
.intro h1{margin-top:0px;}
.three-coloum .coloum{width:27%;}
}

@media screen and (max-width: 768px) {
.introimg img {width: 100%;}
.intro h1{margin-top:0px;}
}

@media screen and (max-width:640px){
.introimg,.intro{width:100%; float:none;}
.introimg img {border: 1px solid #f3f3f3; display: block; margin: 0 auto; width: 50%;}

.three-coloum .coloum {float: left; margin: 0; width: 45%;}
.three-coloum .coloum br{display:none;}
}

@media screen and (max-width:580px){
.two-coloum .coloum {float:none; margin: 0; width: 100%;}
.map .coloum{width:100%; float:none;}
section.contactDetails p{font-size:20px; margin-bottom:10px;}
section.contactDetails h2{margin-bottom:10px;}
}

@media screen and (max-width:540px){
header{background-image:none; background:#f1f1f2;}
hgroup{float:none; text-align:center;}
section.contactDetails{float:none; width:100%;}
section.contactDetails h2, section.contactDetails p{text-align:center!important;}
section.two-coloum .coloum img, section.three-coloum .coloum {width: 100%;}
section.contactDetails p{font-size:20px; margin-bottom:10px;}
section.contactDetails h2{margin-bottom:10px;}
}