@charset "utf-8";
/* CSS Document */

@charset "utf-8";
/* CSS Document */

/* General notes

Colur pallet

Main Colour - Pink 		= #FFCFE7
			- Dark Pink = #FF69B4 replaced by #CCA6B9 13/7/17

Shades
1 #333333 - Darkets
2 #404040
3 #BFBFBF
4 #E5E5E5
5 #FFFFFF


Navy Blue 	= #0D1C31
Gold		= #D4A76C
Light Coral = #F08080
Champagne	= #F0E3CF

*/

/* CSS Reset */
* {
	padding: 0px;
	margin: 0px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;

	
}

h1 {
	font-size: 22px;
	color:#000000;
	text-align:center;
	line-height:200%;

}
h2 {
	font-size: 22px;
	color:#000000;
	text-align:center;
	line-height:200%;

}
h3 {
	font-size: 18px;
	color:#000000;
	text-align:center;
	line-height:200%;
}
h4 {
	font-size: 16px;
	color:#000000;
}
h5 {
	font-size: 14px;
	color:#000000;
}
h6 {
	font-size: 12px;
	color:#000000;
}


/* Selectors CSS */

a:link {
	color: #CCA6B9;
	text-decoration:none
	}      /* unvisited link */
	
a:visited {
	color: #888888;
	text-decoration:none
	}  /* visited link */
	
a:hover {
	color: #000000;
	text-decoration:none
	}  /* mouse over link */
	
a:active {
	color: #cccccc;
	text-decoration:none
	}  /* selected link */




/* Class CSS */


.text {
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	text-align: justify;
	color:#000000;
}

.alttext{
	color:#ffffff;
	text-align:center;
}

.alttext1{
	color:#ffffff;
	text-align:justify;
}

.alttext2{
	text-align:center;
}

.contacttext{
	text-align: center;
	font-size: 1.2em;
 	font-weight: bolder;
}

.headtext{
	color:#000000;
	text-align:center;
	font-size:200%;
	font-weight:bolder;
}

.linkedimage {
	border: none;
	border-color: #000;
	
}

.image {
	position: relative;
	margin: 0 auto;
	left: auto;
	top: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.image2 {
	position: relative;
	margin: 0 auto;
	top: auto;
	display: block;
/*	text-align: center;*/
}

.imageblog {
	position: relative;
	float:left;
/*	left: 20px;
	top: 20px;
	padding-bottom:20px;
	padding-right:20px;*/
	display: block;
}

.blogimage {
	position: relative;
	height:306px;
	float:left;
	left: 20px;
	top: 40px;
/*	padding-bottom:20px;*/
	padding-right:20px;
	display: block;
}

.banner {
	position: relative;
	width: 880px;
	height: 320px;
	left: auto;
	margin:0 auto;
	overflow:hidden;
	z-index: 3;
	padding-top:15px;
	padding-bottom:5px;
	background-color:#ffffff;

}

.bannerimage{
	max-width:100%;
}

.wrapper{
	display:flex;
	display: -webkit-flex; /* Safari */

}

.fb-like{
	width: 225px;
	height: 35px;
	position: absolute;
	top:70px;
	right: -90px;
}

.float3 {
	padding:0px;
	position: relative;
	float:left;
	width:33.3%;
	height:auto;
	margin:0 auto;
	background-color:#ffffff;
}


.float2 {
	padding:0px;
	position: relative;
	float:left;
	width:50%;
	height:auto;
	margin:0 auto;
	padding:0px;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;
}

.float1 {
	padding:0px;
	position: relative;
	float:left;
	width:100%;
	height:auto;
	margin:0 auto;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;
}

.float1rd {
	padding:0px;
	position: relative;
	float:left;
	width:33%;
	height:auto;
	margin:0 auto;
	padding:0px;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;


	
}

.float2rd {
	padding:0px;
	position: relative;
	float:left;
	width:67%;
	height:auto;
	margin:0 auto;
	padding:0px;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;
	
}


.floatblog {
	padding:0px;
	position: relative;
	width:880px;
	height:auto;
	min-height:306px;
	margin:0 auto;
	padding:0px;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;
	
}

.content {
	position: relative;
	width:auto;
	max-width:266px;
	height:600px;
	margin:0 auto;
	display:block;
	top: 20px;
	padding:0px;
	overflow:hidden;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;


}

.contentm {
	position: relative;
	width:auto;
	max-width:266px;
	height:500px;
	margin:0 auto;
	display:block;
	top: 20px;
	padding:0px;
	overflow:hidden;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;


}


.contents {
	position: relative;
	width:auto;
	max-width:266px;
	height:400px;
	margin:0 auto;
	display:block;
	top: 20px;
	padding:0px;
	overflow:hidden;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;


}

.contentgal {
	position: relative;
	width:auto;
	max-width:266px;
	height:300px;
	margin:0 auto;
	display:block;
	top: 20px;
	padding:0px;
	overflow:hidden;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;

}

.content02 {
	position: relative;
	width:80%;
	max-width:600px;
	height:auto;
	min-height:300px;
	margin:0 auto;
	display:block;
	top: 20px;
	padding:0px;
	overflow:visible;
	background-color:#ffffff;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;

}

.content03 {
	position: relative;
	width:auto;
	max-width:266px;
	height:auto;
	margin:0 auto;
	display:block;
	top: 20px;
	padding:0px;
	overflow:hidden;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;


}

.contentblog {
	position: relative;
	width:auto;
	height:auto;
	min-height:204px;
	margin:0 auto;
	display:block;
/*	top: 20px;*/
	padding-bottom:30px;
/*	overflow:hidden;*/
	background-color: #FFFFCF;
	border-color: #CCC;
	border-style: solid;
	border-width: 1px;
	box-shadow: 5px 5px 5px 5px #CCC;
	-moz-box-shadow: 5px 5px 5px 5px #CCC;
	-webkit-box-shadow: 5px 5px 5px 5px #CCC;
	text-align: center;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;


}
.blogtext {
	position: relative;
	left: 20px;
	top: 40px;
	margin-right:30px;
	padding-bottom:30px;

}

.contentmenu {
	position: relative;
	width:80%;
	height:auto;
	margin:0 auto;
	margin-bottom:80px;
	display:block;
	top: 20px;
	padding:5px;
	overflow:hidden;
	background-color: #FFFFCF;
	border-color: #CCC;
	border-style: solid;
	border-width: 1px;
	box-shadow: 5px 5px 5px 5px #CCC;
	-moz-box-shadow: 5px 5px 5px 5px #CCC;
	-webkit-box-shadow: 5px 5px 5px 5px #CCC;
	text-align: center;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;

}


.contentmenu02 {
	position: relative;
	width:70%;
	height:auto;
	margin:0 auto;
	margin-bottom:80px;
	display:block;
	top: 20px;
	padding:10px;
	overflow:hidden;
	background-color: #FFFFCF;
	border-color: #CCC;
	border-style: solid;
	border-width: 1px;
	box-shadow: 5px 5px 5px 5px #CCC;
	-moz-box-shadow: 5px 5px 5px 5px #CCC;
	-webkit-box-shadow: 5px 5px 5px 5px #CCC;
	text-align: center;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;

}


.contentSite {
	position: relative;
	width: 100%;
	height: auto;
/*	min-height: 80px;*/
	left: auto;
	margin:0 auto;
	display:block;
	z-index: 3;
	padding:0px;
	background-color:#FFCFE7;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;


}

.contentSite2 {
	position: relative;
	width: 50%;
	height:170px;
/*	min-height: 200px;*/
/*	left: auto;*/
	margin:0 auto;
	float:left;
	display:block;
	z-index: 3;
	padding:0px;
	background-color:#FFCFE7;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;


}

.headerContent {
	position: relative;
	width: auto;
/*	min-width: 460px;*/
	height: auto;
/*	min-height: 5em;*/
	margin: 0 auto;
	display: block;
	padding: 0px;
	overflow: hidden;
}

.headline {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 3em;
	margin: 0 auto;
	display: block;
	padding: 0px;
	overflow: hidden;
	}
	
.OnPageNav {
	position: absolute;
	width: 100px;
	height: auto;
	margin: 0 auto;
	display: block;
	right: 0px;
/*	bottom: 1.5em;*/
	padding: 0px;
	overflow: hidden;
	text-align: center;
	-webkit-flex: 1; /* Safari 6.1+ */
	-ms-flex: 1; /* IE 10 */
	flex: 1;
	font-style: italic;
}

.OffPageNav {
	position: absolute;
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	/*	right: 0px;
	bottom: 1.5em;
*/	padding: 0px;
	overflow: hidden;
	text-align: center;
	-webkit-flex: 1; /* Safari 6.1+ */
	-ms-flex: 1; /* IE 10 */
	flex: 1;

}

.maptext {
	font-size: small;
}	

.tableright{
	text-align:right;	
	}
	
.tableleft{
	text-align:left;	
	}

/* Navigation Class CSS */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
/*	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	text-decoration: none;
	color: ##CCA6B9;
	background: #FFCFE7;
	text-align: center;
	padding: 10px 0;
	line-height:2em;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .mainNav{
    display: block;
}

.menuBars{
	height:30px;
	width:35px;
	margin:0 auto;
}


.menuIcon {
    width: 35px;
    height: 5px;
    background-color:#CCA6B9;
    margin: 6px 0;
}

nav {
	text-align: center;


}

ul{
	
	margin:opx;
	padding:0px;
	height:2em;
}

ul li{

	list-style:none;
	float:left;
	width:20%;


}


ul li a{
	
	text-decoration:none;
	list-style:none;
	display:block;
	line-height:3em;


}

ul li a:hover {
	
	background-color:#CCA6B9;
	font-weight:bolder



}

ul li ul {
	
	display:none;

}

ul li ul li {
	
	display:none;
	
}

ul li:hover ul  {
	
	position: relative;
	float: clear;
	display: block;
	background-color: #FFCFE7;
	text-align: center;
	height: auto;
	
}



ul li:hover ul li {
	position: relative;
	width:100%;
	float: clear;
	display: block;
	background-color: #FFCFE7;
	text-align: center;
	min-width: 90px;
}





/* Layout CSS */

#background {
	position:fixed;
	z-index: 0;
	top:0px;
	left:0px;
	width: 100%;
	height: 100vh;

}

#wrapper-page {
	position: relative;
	width:63%;
/*	min-width:960px;*/
	height: 100vh;
	z-index: 1;
	margin: auto;
	left: auto;
	top: auto;
	background-color:#ffffff;

}

#wrapper-header {
	position: relative;
	width: 100%;
	height: auto;
	min-height:110px;
	z-index: 2;
	background-color:#ffffff;

}

#wrapper-navigation {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 500;
	background-color:#FFCFE7;


}

#wrapper-banner {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
}

#wrapper-content1 {
	position: relative;
	width: 100%;
	height: auto;
	min-height:330px;
	z-index: 2;
	background-color: #ffffff;
	
}

#wrapper-content2 {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	background-color:#ffffff;


}

#wrapper-content3 {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	background-color:#ffffff;
	
}

#wrapper-content4 {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	background-color:#ffffff;

}

#wrapper-content5 {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	background-color:#ffffff;
}

#wrapper-content6 {
	position:relative;
	width:100%;
	height:auto;
	z-index: 2;
	background-color:#ffffff;	

}

#wrapper-content7 {
	position:relative;
	width:100%;
	height:auto;
	z-index: 2;
	background-color:#ffffff;
}

#wrapper-content8 {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	background-color:#ffffff;


}

#wrapper-site {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	min-height: 80px;
	background-color:#FFCFE7;
}

#wrapper-copywrite {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	min-height: 20px;
	background-color:#FF69B4;

}

#header {
	width: 100%;
	min-width:460px;
	height: 100px;
	margin:auto;
	left: auto;
	position: relative;
   	top: 0; left: 0; bottom: 0; right: 0;
	z-index: 3;
	background-color:#FFFFFF;

}

#navigation {
	position: relative;
	width: 100%;
/*	min-width:460px;*/
	height: 3em;
	left: auto;
	margin: auto;
	z-index: 503;
	background-color:#FFCFE7;


}


#content-group1 {
	margin:auto;
	position: absolute;
   	top: 0; left: 0; bottom: 0; right: 0;
	background-color:#ffffff;
}




#content-copywrite {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 25px;
	left: auto;
	margin: auto;
	z-index: 3;
	padding:0px;
	background-color:#CCA6B9;
}

#contacttable {
	width: 100%;
	boarder: 0;
	padding: 5px;
	border-spacing: 10px;
	table-layout: auto;	
}

#logo {
	position: relative;
	display:block;
/*	height:2em;*/
	margin:0 auto;
	padding:0px;
	width: 600px;
	z-index: 3000;


}

#logoimage{
	max-width:100%;
}


#headPhone {
	position: relative;
	display:block;
	height:2em;
	width:180px;
	padding:0px;
	margin:0 auto;
	z-index: 3000;
}

#social {
	position: relative;
	top:20px;
	margin:0 auto;
	width: 144px;
	height: 144px;
	z-index: 2;
}

#sicon1 {
	position: absolute;
	width: 48px;
	height: 48px;
	z-index: 2;
	left: 48px;
	top: 0px;
}
#sicon2 {
	position: absolute;
	width: 48px;
	height: 48px;
	z-index: 2;
	left: 96px;
	top: 24px;
}
#sicon3 {
	position: absolute;
	width: 48px;
	height: 48px;
	z-index: 2;
	left: 96px;
	top: 72px;
}
#sicon4 {
	position: absolute;
	width: 48px;
	height: 48px;
	z-index: 2;
	left: 48px;
	top: 96px;
}
#sicon5 {
	position: absolute;
	width: 48px;
	height: 48px;
	z-index: 2;
	left: 0px;
	top: 72px;
}
#sicon6 {
	position: absolute;
	width: 48px;
	height: 48px;
	z-index: 2;
	left: 0px;
	top: 24px;
}


/* Mobile Layout: 480px and below. Inherits styles from: Global Layout. */

@media only screen and (max-width:679px) {

#wrapper-page {
	width:100%;

}

#background {
	display:none;
}

#logo {
	width: 300px;
	
}

.spacer{
	display:none;
}

.banner {
	width: 480px;
	height: 175px;
	padding-top:70px;
	padding-bottom:5px;

}
.bannerimage{
	max-width:480px;
	max-height:175px;
}
.content {
/*font-size:??*/
/*width:300px;*/
	min-height:300px;
	overflow:hidden;

}


.contentgal {
/*font-size:??*/
/*width:300px;*/
	min-height:300px;
	overflow:hidden;

}

.float2 {
	float:left;
	width:100%;
}


.float3 {
	float:left;
	width:100%;
}


.float1rd {
	float:left;
	width:100%;
}


.float2rd {
	float:left;
	width:100%;
}

/*Make dropdown links appear inline*/


ul {
		position: static;
		display: none;
		background-color:#FFCFE7;
	}

ul li {
	text-decoration: none;
	font-weight: bolder;
	}
	
	
	
	/*Create vertical spacing*/
li {
		margin-bottom: 0px;
	
		}
	/*Make all menu links full width*/
ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
.show-menu {
		display:block;
	}


ul li a{
/*	text-decoration: underline;*/
	list-style: none;
	display: block;
	line-height: 3em;
	background-color: #FFCFE7;
}

ul li a:hover {
	
	background-color:#CCA6B9;
	font-weight:bolder



}

ul li ul {
	
	display:none;


}

ul li ul li {
	display: block;
	text-decoration: none;
	font-weight: normal;
	color:#ffffff;
	
}

ul li ul li a {
	background-color: #FFCFE7;
}



	
ul li:hover ul  {
	
	position: relative;
	float: clear;
	display: block;
	background-color: #FFCFE7;
	text-align: center;
	height: auto;
	
}



ul li:hover ul li {
	position: relative;
	width:100%;
	float: clear;
	display: block;
	background-color: #FFCFE7;
	text-align: center;
	min-width: 90px;
}

.floatblog {
	width:480px;
	
}

}



/* Tablet Layout: 481px to 768px. Inherits styles from: Global and Mobile Layout. */

@media only screen and (min-width:680px) and (max-width:848px) {

#wrapper-page {
	width:100%;
/*	min-width:700px;*/	
}

#background {
	display:none;
}

#logo {
	width:460px;
	
}

.banner {
	width: 700px;
	height: 255px;
	padding-top:30px;
	padding-bottom:5px;

}
.bannerimage{
	max-width:700px;
	max-height:255px;
}
.content {
/*font-size:??*/
/*width:300px;*/
	min-height:350px;
	overflow:hidden;

}

.contentgal {
/*font-size:??*/
/*width:300px;*/
	min-height:300px;
	overflow:hidden;

}

.float2 {
	float:left;
	width:50%;
	
}


.float3 {
	float:left;
	width:50%;
;	
}


.float1rd {
	float:left;
	width:100%;
	
}


.float2rd {
	float:left;
	width:100%;
}

.floatblog {
	width:700px;
	
}


}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Global, Mobile and Tablet Layouts. */

@media only screen and (min-width:849px) {

#wrapper-page {
	width:63%;
	min-width:900px;	
}


.banner {
	width: 880px;
	height: 320px;
/*	z-index: 3;
	padding-top:15px;
	padding-bottom:5px;*/

}
.content {
/*font-size:??*/
/*width:300px;*/
	min-height:300px;
	overflow:hidden;

}

.contentgal {
/*font-size:??*/
/*width:300px;*/
	min-height:300px;
	overflow:hidden;

}

.float2 {
	float:left;
	width:50%;
	
}


.float3 {
	float:left;
	width:33.3%;

}


}	
 @media print {
	 
#background { display: none; }
#wrapper-page {	width:100%;}

    }
