@charset "UTF-8";

div.fullWidth {
  width: 100%;
}

body {
	color: #444;
	line-height: 1.4;
	background-color: #ffffff;
	background-attachment: fixed;
	font-weight: 300;
	font-family: "verdana";
}

/* ~~ This fixed width container surrounds all other divs ~~ */
.container {
	width: 80%;
	margin: 5% auto 5%;
}

img {
	border: none;
}


a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}


/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #dc661e;
	text-decoration: none;
	font-style: normal;
	border: none;
}
a:visited {
	color: #f7901e;
	text-decoration: none;

}
a:hover, a:active, a:focus {
	color: #8573a8;
	text-decoration: none;

}

.header {
	padding-bottom: 20px;
	text-align: center;
	font-weight: 500;
	padding: 5px 0px 5px 0px;
}



.content {
	width: 100%;
}



h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	
}



ul{
	list-style-type: none;
	margin : 10px;
	font-size: 100%;
	
}

li {
	margin-bottom: 5px;
}



p {
	font-size: 90%;
	margin-bottom: 8px;
	line-height: 1.4;
}

h1 {
	font-size: 200%;
	color: #49a7a2;
	line-height: 1;
	text-align: center;
	margin-bottom: 8px;
	font-weight: 100;
	font-style: normal;
}

h2 {
	font-size: 130%;
	color: #8573a8;
	text-align: center;
	font-weight: 500;
	font-style: normal;
	margin-bottom: 8px;
}



h3 {
	font-size: 125%;
	color: #8573a8;
	text-align: center;
	font-weight: 700;
	font-style: normal;
	margin-top: 15px;
		margin-bottom: 5px;
}


h4 {
	font-size: 115%;
	margin-bottom: 4px;
	color: #8573a8;
}


h5 {
	font-size: 105%;
	font-weight: 500;
	font-style: normal;
	margin-bottom: 4px;
}

h6 {
	font-size: 115%;
	font-weight: 500;
	font-style: normal;
	margin-bottom: 15px;
	width: 80%;
	padding-left: 40px;
	color: #D4E1D0;
	line-height: 1.5;
}



.social {
	float: right;
}

 .social img {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 3px;
	padding-left: 3px;
	border: none;
}


.social-centre {
	font-size: 100%;
	text-align: center;
}

 .social-centre img {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 3px;
	padding-left: 3px;
	border: none;
}

 .rightpics {
 	float: right;
 	}

.rightpics img { 	
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 35px;
	border: none;
}





/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */

.nav {
	font-size: 100%;
	font-style: normal;
	height: 15px;
	text-align: center;
	padding: 3px 0px 30px 0px;
	margin-bottom: 15px;

}


.navseparator {
	color: #cccccc;
	padding: 0px 8px 0px 8px;
	
	}


.contentdivider {
	padding: 40px 0px 15px 0px;
	}

	
.button a:link {
	background-color: #f7901e;
	color: #fff;
	text-align: center;
	font-size: 100%;
	font-weight: 700;
	line-height: 1;
	display: block;
	float: right;
	border: 0px solid;
	padding: 8px 28px 8px 28px;
	border-radius: 0px 9px 0px 9px;
	margin: 3px 0px 5px 0px;
}



.button a:visited {
	text-decoration: none;
	color: #fff;
	font-weight: 700;
}

.button a:hover, a:active, a:focus  {
	text-decoration: none;
	color: #5a4e70;
	font-weight: 700;
}




recaptcha_div {
}




/* ~~  google maps ~~ */

.map-area {
  position: relative;
  height: 600px; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .map-area {
      height: 450px; } }
  @media (max-width: 767px) {
    .map-area {
      height: 450px; } }

.mapouter {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .mapouter {
      width: 100%; } }
  @media (max-width: 767px) {
    .mapouter {
      width: 100%; } }
  .mapouter .gmap_canvas iframe {
    width: 100%;
    height: 600px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .mapouter .gmap_canvas iframe {
        height: 450px; } }
    @media (max-width: 767px) {
      .mapouter .gmap_canvas iframe {
        height: 450px; } }

.map-bg {
  width: 40%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0; }
  
  
  
  




/* ~~ The footer styles ~~ */
.footer {
	font-size: 75%;
	color: #CCCCCC;
	text-align: center;
	clear: both;
	/* this clear property forces the .container to understand where the columns end and contain them */
	padding-top: 20px;
	padding-bottom: 22px;
	padding-right: 30px;
	padding-left: 30px;
	border: 0px solid;
	border-radius: 12px 0px 12px 0px;
	font-style: normal;
	font-weight: 300;
}


.footer a:link, a:visited, a:hover, a:active, a:focus {
	text-decoration: none;
	font-style: normal;
	font-weight: 300;
}




/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 5%;
	}
	
	
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 5%;
}

.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}