@charset "UTF-8";



/* ----------------- Reset all styles ----------------- */
*{
	margin:0;
	padding:0;
	border:0;
}

/* ----------------- Website background and general text colour ----------------- */
body{
	/*background-image:url(../images/backgroundtexture.png);*/
	background-color:#ffffff;
	color:#4a4949;
	border-top: #000000 solid 5px;
	font-family: "CENTURY GOTHIC", "Helvetica Neue", Verdana, Tahoma;
	font-size: 1.3em;
	
}



ul,li{margin:10px;;padding:0px;;border:0;font-size:100%;font:inherit;vertical-align:baseline; list-style-position: outside;
    margin-left: 10px;}
ul{list-style:square;}

a:link {color:#8a8a8a; text-decoration: underline; }
	a:visited {color: #8a8a8a; text-decoration: underline;}
	a:hover {color: #8a8a8a; text-decoration: none; }
	a:active {color: #8a8a8a; text-decoration: underline; } 



/* ----------------- Wrapper - keeps all content in the center of page -----------------  */
.wrapper{
	margin:auto;
	/*width:80%; makes it centred*/
	height:auto;
}

/*FOR FORM*/
	.special {
	display:none;
	}
	
	#splash-form input{

	font-size:15px;
	border:solid 1px #002549;
	width:150px;
	margin-top: 2px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 10px;
	padding-top: 4px;
	padding-right: 2px;
	padding-bottom: 4px;
	padding-left: 2px;
	font-weight:bold;
	color:#002549;
}

#form button, input{

	font-size:15px;
	border:solid 1px #002549;
	width:150px;
	margin-top: 2px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 10px;
	padding-top: 4px;
	padding-right: 2px;
	padding-bottom: 4px;
	padding-left: 2px;
	font-weight: normal;
	color:#002549;
}
	
.indexFeature { /* 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;	
	width: 30%;
	padding: 10px;
}



/* The rest is pretty self explanatory - it appears in the order that it occurs on the HTML document */
#top{
	height:50px;
	background-color: #8a8989;
	
}

#logo{
	margin-top:5%;
	text-decoration:none;
}

#logoimage{
	width:100%;
	/*height:192px;*/
	padding-right:10px;
	float:left;
	background-color:#FFFFFF;
}

#logoimage img {
	max-width: 100%;
	height: auto;
}


div.container4 {
    height: 10em;
    position: relative; }
	
div.container4 p {
    margin: 0;
    background-color:#060;
	padding: 20px;
	color:#FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	font-size: 1.5em; }

div.container4 a{color: #ffffff; text-decoration: none;}



/*SECTIONS*/

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: #ffffff;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0; /*1% 0 1% 1.6%*/
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
	position: relative;
}

/*  GRID OF THREE  */

.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}

.span_1_of_5 {
	width: 16.6%; /*20% for 10 across*/
	min-height: 150px; /*128px*/
	height: 10%; /*20% for 10 across*/
	background-color:#8a8989;
	/*background-image: url(../images/IMG_6984-feegrade-320.jpg);*/
	/*max-height: 320px;
	-o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;*/
	position: relative;
	display: inline;
	/*border-top: #8a8989 solid 1px;*/
}

.span_2_of_5 {
	width: 25%; /*20% for 10 across*/
	min-height: 150px; /*128px*/
	height: 10%; /*20% for 10 across*/
	background-color: #ffffff;
	/*background-image: url(../images/IMG_6984-feegrade-320.jpg);*/
	/*max-height: 320px;
	-o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;*/
	position: relative;
	display: inline;
	/*border-top: #8a8989 solid 1px;*/
}

.span_3_of_5 {
	width: 75%; /*20% for 10 across*/
	min-height: 150px; /*128px*/
	height: 10%; /*20% for 10 across*/
	background-color:#ffffff;
	/*background-image: url(../images/IMG_6984-feegrade-320.jpg);*/
	/*max-height: 320px;
	-o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;*/
	position: relative;
	display: inline;
	/*border-top: #8a8989 solid 1px;*/
}

.img-desc {
  /*display: none;*/
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: #FFF;
  opacity: 0.6;
  padding: 5px;
}

/*///////////*/
.textbox {
   
    width: 200px;
    height: 200px;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
	
	
}
.boxtext {
    background:rgba(255,255,255,0.7);
	height: 100%;
	min-height: 80px;
	max-height: 320px;
    -o-transition: 1s;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
	padding: 5px;

}
.boxtext:hover {
    background:rgba(255,255,255, 0);
    -o-transition: 1s;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
/*///////////*/

.nav-column {
	background-color: #ffffff;
	color: #929191;
	padding: 5px;
	margin-left: 10%;
	font-size: 90%;	
	line-height: 150%;
	
}

.nav-column h3{
	font-size: 75%;;
}

.nav-column h2{
 color: #000;
 font-size: 1.5em;	
 font-weight: bold;
}

.nav-column ul{list-style-position: outside;
    /*margin-left: 20px;*/
	margin-top: 20px;
	list-style-type: none;}
	
	
.nav-column a:link{
	text-decoration:none;
}
.nav-column a:visited {
	text-decoration:none;
}
.nav-column a:hover {
	text-decoration:underline;
}
.nav-column a:active {
	text-decoration:none;
}

.main-column {
	background-color:#ffffff;
	color: #565555;
	padding: 5px;	
	height: 100%;
	font-size: 0.8em;
	min-height: 500px;
	position: relative;
}
	
.main-column p{
	
	padding-top: 5px;	
	padding-bottom: 5px;
}	

.main-column h3{
	font-family: "century gothic", Arial, Verdana, Geneva, sans-serif; }
	
.main-column ul{list-style-position: outside;
    margin-left: 20px;
	list-style-type: square;}
	
.main-column img {
          display: block;
          height: auto;
          max-width: 100%;
   }


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

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

		.span_2_of_5 {
		width: 35%;
		min-height: 150px;
		height: 10%;
	    }
		
		.span_3_of_5 {
		width: 65%;
		min-height: 150px;
		}
    }


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

       body { font-size: 1em; }

    }

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
	
}



/*END SECTIONS*/




h1 strong {
	color: #c20604;
	font-weight: normal;
	}


h1{
	font-family:  "century gothic", Arial, "Helvetica Neue", Lato,Helvetica, sans-serif;
	font-size:200%;
	font-weight: normal;
	margin-bottom:1%;
	color: #000000;
}

h1 span{
	color: #550f11;
	/*text-shadow: 0 1px 1px #dadada;*/
}

h2{
	font-family: Arial, "Helvetica Neue",Lato,  Helvetica, sans-serif;
	font-size:130%;
	font-weight: bold;
	color: #666;
	margin-top: 3px;
}

h3{
	font-family: "century gothic", Arial, "Helvetica Neue",Lato,  Helvetica, sans-serif;
	font-size:110%;
	font-weight:normal;
	color: #8a8989;
}
	
#slideshow{
	width:100%;
	margin-top:2%;
}


/* - - - - - - - - - - - - - - -  Slider START  - - - - - - - - - - - - - - - */


.clearfix {
	float: none;
	clear: both;
}

/* - - - - - - - - - - - - - - -  Slider END  - - - - - - - - - - - - - - - */

#bottom h3{
	margin:4% 0 3% 0;
	font-family: "century gothic", Cookie, Arial, Helvetica, sans-serif;
	font-size:190%;
	font-weight:normal;
	text-align:center;
	color:#f38094;
	text-shadow: 0 1px 1px #c1c1c1;
}

/*-----------FOOTER-----------------------*/

.footer{
	width:100%;
	background-color:#000000;
	line-height:18px;
	font-size:1.1em;
	line-height: 1.5em;
	color:#ebebeb;
	font-family:"century gothic", "Helvetica Neue",Helvetica,Arial,sans-serif; 
	padding:30px 0px 30px 5px;
	border-top: #060 10px solid;
}
.footer h1{
	color:#ebebeb;
	font-family: "century gothic", "Helvetica Neue",Helvetica,Arial,sans-serif; }

.footer h2{
	color:#ebebeb;
	font-family: "century gothic", "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 140%;
	font-weight: normal;
	padding-bottom: 1%;}


.p10{margin-bottom:10px!important}

.footer ul{font-size:12px;font-size:1.2rem;}
.footer ul li{line-height:24px;color:#888;  list-style:none;}
.footer ul li.title{color:#fff;font-size:14px;font-size:1.4rem;border-bottom:1px dotted #4c4c4c; line-height:30px;}
.footer ul li.icons{padding-left:30px}
.footer ul li a{color:#888}
.footer ul li a:hover{color:#ddd}
.footer .social-icons li{line-height:30px}

a.navrollFooter:link {font-family: "century gothic", Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  color: #797c75; text-decoration: none; }
a.navrollFooter:visited {font-family: "century gothic", Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  color: #797c75; text-decoration: none;}
a.navrollFooter:hover {font-family: "century gothic", Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  color: #797c75; text-decoration: underline; }
a.navrollFooter:active {font-family: "century gothic", Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  color: #797c75; text-decoration: none; } 

.icon{
	float:right;
	width:50px;
	margin:0px 0 2px 4%;
	opacity:1;
}

.icon:hover{
	opacity:1;
}

.social{
	color:#f38094;
}


/* ----------------------------- FORM ----------------------------------- */

.left h4{
	font-family:"century gothic", Cookie, Arial, Helvetica, sans-serif;
	font-size:180%;
	font-weight:normal;
	color:#f38094;
	margin-bottom:10px;
}

#formwrap{
	width:50%;
}

.formstyle { 
	border: 1px solid #ccc;
	font-family:"century gothic", Lato, Arial, Helvetica, sans-serif;
	font-size:14px;
	width: 95%;
	background-color:rgba(255,255,255,1);
	/*background-image:url(../images/backgroundtexture.png);*/
	margin-bottom:10px;
	opacity:0.9;
	padding:3px;
	-webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   border-radius:2px;
}

.formstyletwo { 
	color: #FFF;
	font-family:"century gothic", Lato, Arial, Helvetica, sans-serif;
	font-size:15px;
	text-align:left;
	width:20%;
	background-color:#2d2d2d;
	border:0px;
	
}

.formstyletwo:hover { 
	color:#f38094;
	cursor:pointer;

}

textarea{ 
	border: 1px solid #ccc;
	color: #000;
	font-family:"century gothic", Lato, Arial, Helvetica, sans-serif;
	font-size:14px;
	width:95%;
	height:80px;
	background-color:rgba(255,255,255,1);
	/*background-image:url(../images/backgroundtexture.png);*/
	margin-bottom:10px;
	border-radius:2px;
	padding:3px;
	opacity:0.9;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}


input:focus, input.focused, textarea:focus, textarea.focused {  color: #3e3e3e; opacity:1;}

#error{
	color:#FF7471;
	float:left;
	font-family:Regular, Arial, Helvetica, sans-serif, "Helvetica Neue Light";
	font-size:15px;
}

#error ul{
	list-style-type: none;
	padding-top:5px;
}
	

/* -- Make the highlight colours pretty -- 
::selection      { background:#c20604; color:#FFF;}
::-moz-selection  { background:#c20604; color:#FFF;}*/


/* ---------------------- RESPONSIVE STUFF - ONLY TOUCH IF YOUR'E CONFIDENT WITH CSS ---------------------- */


@media only screen and (max-width: 1279px) {
	.wrapper{
		/*width:90%; keeps it centred*/
	}
	
}