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

/* DALEMEDIA CSS TEMPLATE (MOBILE WEBSITES) */

/* Z-INDEX RECORDS: 

IMPORTANT NOTE: 

Z-INDEX styles MAY be included in other CSS or JS files associated with this site. For example, CCC > Master.Css, or for any Visual CSS QUICKMENUs included, you will need to ensure you also check SLIDERREVOLUTIONFILES > JS > jquery.themepunch.revolution.min-edited.js 

.hm-dropdown - z-index set to 101

#desktoplinkwrapper - z-index set to 100
.scrollToTop - z-index set to 99
uparrowswrapper - z-index set to 98
downarrowswrapper - z-index set to 98

*/b

/* CSS RESET MINIFIED VERSION) */

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0
}ba
article, aside, details, figcaption, figure, footer, hehader, hgroup, menu, nav, section {
	display:block
}
body {
	line-height:1
}
ol, ul {
	list-style:none
}
blockquote, q {
	quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
	content:none
}
table {
	border-collapse:collapse;
	border-spacing:0
}


/* ---------------------------------------- */
/* ------------ GLOBAL STYLES ------------- */
/* ---------------------------------------- */

/* --------- Body styles ----------- */

body {
	font-family: 'PT Sans', sans-serif;
	background: #FFF; /* #71A3D7 #036 */
	color:#666;
}
hr {
	display: none;
} /* Useful hack to avoid DW deleting 'empty' tags on HTML Clean Up. (There are HR tags in every anchor ID in the HTML) */
p {
	clear: both;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 1.2em;
	line-height: 1.5em;
}
blockquote {
	padding-left: 2em;
}
em {
	font-style:italic;
}
strong {
	font-weight:bold;
}
li {
	font-size: 1.2em;
	line-height: 1.5em;
}

table {	
	height: auto;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFF;
	color:#333;
	font-size: 1em;
}
th {
	background-color: transparent;
	color:#036;
	font-weight:bold;
	text-align:left;
	font-size: 1.5em;
}
td {padding: 0.5em; font-size: 0.8em;}


/* --------- Global text styles ----------- */

.testimonials { 
    clear: both;
	color: #fff;
	text-align:center;
	background-color: rgba(100, 100, 100, 0.3);
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 3em;
	margin-top: 0em;
	margin-bottom: 0em;
	border-radius: 10px;	
	min-height: 150px;
	/* background-image:url(../images/london-skyline-150px.png); background-attachment: scroll; background-repeat: no-repeat; background-size: auto; background-position: bottom; */
}

h1 {
	clear: both;
	color: #FFF;
	font-size: 1.5em;
	margin-top: 1em;
	margin-bottom: 1em;
	line-height: 1.5em;
	padding-left: 1em;
	background-color:#09F;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.h1green {
	clear: both;
	color: #FFF;
	font-size: 1.5em;
	margin-top: 1em;
	margin-bottom: 1em;
	line-height: 1.5em;
	padding-left: 1em;
	background-color: #090;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.h2ingreen {
	clear: both;
	color: #FFF;
	background-color: #090;
	font-size: 1.2em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 0.5em;
	line-height: 1.5em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

h2 {
	clear: both;
	color: #FFF;
	background-color: #036;
	font-size: 1.2em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 0.5em;
	line-height: 1.5em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
h3 {
	clear: both;
	color: #FFF;
	background-color:#09F;
	font-size: 1.1em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	line-height: 1.1em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
h4 {
	clear: both;
	color: #FFF;
	background-color: #09F;
	font-size: 1.5em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 0.5em;
	line-height: 1.5em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
} /* Uaed to give same styles as H1, but without H1 class */

h5 {
	clear: both;
	color: #036;
	background-color: #09F;
	font-size: 1.5em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 0.5em;
	line-height: 1.5em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

h6 {
	clear: both;
	color: #FFF;
	background-color:#036;
	font-size: 1.1em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	line-height: 1.1em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.greentext {
	color: #090;
	font-size: 1.0em;
	font-weight: bold;
}

.bannertext {
	color: #FFF;
	background-color: #F00;
	font-size: 1.3em;
	line-height: 2em;
	font-weight:bold;
	
}
.copyrighttext {
	color: #EEE;
	font-size: 0.9em;
	font-weight:bold;
}
.contactformsmalltext {
	color: #036;
	font-size: 0.8em;
	margin-top: 1em;
	margin-bottom: 1em;
	line-height: 3em;
}
.warningtext {
	color: #C00;
	font-size: 1em;
	font-weight:bold;
	margin-top: 1em;
	margin-bottom: 1em;
}
.warningtextsmall {
	color: #C00;
	font-size: 1em;
}
.listordered {
	list-style: decimal;
	margin-left: 10%;
	margin-top: 1em;
	margin-bottom: 1em;
}
.listunordered {
	list-style: disc;
	margin-left: 10%;
	margin-top: 1em;
	margin-bottom: 1em;
}
.listalphabetical {
	list-style: lower-latin;
	font-weight:  bold;
	margin-left: 10%;
	margin-top: 1em;
	margin-bottom: 1em;
}
.breadcrumb {
	font-size:0.7em;
	font-weight:bold;
	color: #036;
	margin-bottom: 0.5 em;
}
.bignormaltext {
	font-size:20px;
}
.mediumnormaltext {
	font-size:12px;
}
.mediumboldtext {
	font-size:12px;
	font-weight:bold;
}
.smallnormaltext {
	font-size:10px;
}
.clocktime {
	font-size:12px;
	font-weight:normal;
	color:#FFF;
}
/* Link Styles */  

a {
	font-size: 1em;
	color: #09f;
}
a:hover {
	color: #666;
	text-decoration: underline;
}
/* Email Link Styles */ 

.backwards {
	unicode-bidi:bidi-override;
	direction: rtl;
	font-size: 1em;
	color: #09F;
	text-decoration: underline;
}
/* Specific Styles */ 

/* #coolmessage {font-size: 3em; line-height: 2em; padding-top: 2em; padding-bottom: 2em; -webkit-animation: bounceInRight 2s linear ; animation: bounceInRight 2s linear; -webkit-animation: bounceOutLeft 4s linear; animation: bounceOutLeft 4s linear;} */ 

/* ---------------------------------------- */
/* ------- MASTER WRAPPER STYLE ----------- */
/* ---------------------------------------- */

#masterwrapper {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	min-width: 320px;
	height:auto;
	text-align:center;
	background-color: transparent;
}

/* ---------------------------------------- */
/* ------------- SCROLL BUTTONS ----------- */
/* ---------------------------------------- */

.scrollToTop {
	z-index: 99; /* Determines display order. Set to a higher number than all other "z-indexed" elements elsewhere on your HTML page */
	width: 50px;  /* Determines width of button (should match the width of any button background applied) */
	height: 50px; /* Determines height of button (should match the height of any button background applied) */
	position: fixed;	/* Ensures the button remains fixed on screen regardless of scrolling */
	top: 2em; /* Literal distance from top/bottom of screen */
	right: 1em;  /* Literal distance from right/left of screen */
	display: none; /* defaults to not displaying. The HTML-incorporated JavaScript displays it when any scroll starts */
	background: url(../images/scrollupbutton.png) no-repeat 0px 0px;  /* Or choose a background colour if preferred (i.e. #71A3D7;) */
	opacity: 1.0; /* Determines opacity of button BEFORE mouseover */
	
	-webkit-box-shadow: 0px 5px 20px #222;
	box-shadow: 0px 5px 20px #222; /* First = Offset X/Y, Second = Shadow Distance , Third = Shadow Blurring /Spread , Fourth = Colour setting */
	
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	text-indent: -9999px; /* Setting a high negative figure here (like -9999px;) ensures any text add to the HTML element won't appear onscreen (although is still there) */
}
.scrollToTop:hover {
	opacity: 0.8;
}
.scroll {
	opacity: 1.0;
}
.scroll:hover {
	opacity: 0.9;
}
/* ---------------------------------------- */
/* ----- CENTRED SCROLL UP/DOWN BUTTONS --- */ 
/* ---------------------------------------- */

.uparrowswrappertransparent {
	z-index: 98;
	clear: both;
	width: 100%;
	max-height:25px;
	margin-left:auto;
	margin-right:auto;
	padding: 0em;
	margin-top: 0em;
	text-align:center;
	background-color: transparent;
}

.uparrowswrapperdark {
	z-index: 98;
	clear: both;
	width: 100%;
	max-height:25px;
	margin-left:auto;
	margin-right:auto;
	padding: 0em;
	margin-top: 0em;
	text-align:center;
	background-color: #036; /* Choose a 'dark' colour to suit */
}

.uparrowswrapperlight {
	z-index: 98;
	clear: both;
	width: 100%;
	max-height:25px;
	margin-left:auto;
	margin-right:auto;
	padding: 0em;
	margin-top: 0em;
	text-align:center;
	background-color: #EEE; /* Choose a 'light' colour to suit */
}

.downarrowswrappertransparent {
	z-index: 98;
	clear: both;
	width: 100%;
	max-height:25px;
	margin-left:auto;
	margin-right:auto;
	padding: 0em;
	margin-top: 0em;
	text-align:center;
	background-color: transparent;
}

.downarrowswrapperdark {
	z-index: 98;
	clear: both;
	width: 100%;
	max-height:25px;
	margin-left:auto;
	margin-right:auto;
	padding: 0em;
	margin-top: 0em;
	text-align:center;
	background-color: #71A3D7; /* Choose a 'dark' colour to suit */
}

.downarrowswrapperlight {
	z-index: 98;
	clear: both;
	width: 100%;
	max-height:25px;
	margin-left:auto;
	margin-right:auto;
	padding: 0em;
	margin-top: 0em;
	text-align:center;
	background-color: #EEE; /* Choose a 'light' colour to suit */
}

/* ---------------------------------------- */
/* ------------ HORIZONTAL MENU ----------- */
/* ---------------------------------------- */

#horizontalmenuwrapper {
	
	width: 100%;
	height: 55px;
	text-align: center; /* Centres contents */
	clear:both;
	margin-right:auto;
	margin-left:auto;
	background-color: #036;
}
#horizontalmenucontainer {
	
	width:960px;
	max-width: 960px;
	margin-right:auto;
	margin-left:auto;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	text-align: left; /* Centres entire menu */
}
 @media screen and (min-width: 1px) and (max-width: 1023px) {
#horizontalmenuwrapper, #horizontalmenucontainer {
	display:none;
}
} /* adjust width instructions as necessary */
@media screen and (min-width: 1024px) {
#horizontalmenuwrapper, #horizontalmenucontainer {
	display:block;
}
} /* Don't include any max width. It will then display any width BEYOND that indicated */


/* The container <div> - needed to position the dropdown content */
.hm-dropdown {
	z-index: 101; /* It is ESSENTIAL for this z-index number to be higher than the slider gallery elements (WOWSLIDER). So pick a BIG number! */
	position: relative;
	display: inline-block;
}
/* Style The Dropdown Button */
.hm-dropbtn {
	background-color: transparent;
	color: #FFF;
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight:bold;
	text-align:left;
	padding: 0.5em;
	font-size: 1em;
	width: 120px;
	border: 0px;
	border-bottom: 0px #000 solid;
	border-radius: 0px;
}
/* Dropdown Content (Hidden by Default) */
.hm-dropdown-content {
	display: none;
	position: absolute;
	background-color: #09F;
	width: 290px;
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius: 0px;
	
}
/* Links inside the dropdown */
.hm-dropdown-content a {
	color: #FFF;
	padding: 1em;
	text-decoration: none;
	display: block;
}
/* Change color of dropdown links on hover */
.hm-dropdown-content a:hover {
	background-color: #09F;
	color: #036;
}
/* Show the dropdown menu on hover */
.hm-dropdown:hover .hm-dropdown-content {
	display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.hm-dropdown:hover  {
	background-color: transparent; color: #09F;
}

/* ---------------------------------------- */
/* ------------ MENUZORD MENU ------------- */
/* ---------------------------------------- */

#menuzord-full-width-wrapper {
	width: auto;
	margin-right:auto;
	margin-left:auto;
	text-align: center;
	clear:both;
	background-color: #222;
}
#menuzord-centred-width-container {
	width:auto;
	max-width: 960px;
	margin-right:auto;
	margin-left:auto;
	text-align: left;
}
 @media screen and (min-width: 1px) and (max-width: 1023px) {
#menuzord-full-width-wrapper, #menuzord-centred-width-container {
	display:block;
}
} /* adjust width instructions as necessary */
@media screen and (min-width: 1024px) {
#menuzord-full-width-wrapper, #menuzord-centred-width-container {
	display:none;
}
} /* Don't include any max width. It will then display any width BEYOND that indicated */

/* ---------------------------------------- */
/* -------------  LOGO STYLES ------------- */
/* ---------------------------------------- */

#topleftsmalllogowrapper {width: auto; height:auto; background:#222;}

#logowrapperswrapper {
	width: auto;
	background-color: #FFF;
	padding-top: auto;
    /* background-image:url(../images/london-skyline-150px.png); background-attachment:scroll; background-repeat: no-repeat; background-size:auto; background-position:left; */ 
}
#logowrapperscontainer {
	width: auto;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	text-align:left;
	/* background-image:url(../images/london-skyline-150px.png); background-attachment:scroll; background-repeat: no-repeat; background-size:auto; background-position:right; */
}
#widestlogowrapper, #widerlogowrapper, #mediumlogowrapper, #smallerlogowrapper, #smallestlogowrapper, #topleftsmalllogowrapper, #tiniestlogowrapper {
	display:none;
	padding-bottom: 0.5em;
	padding-top: 0.5em
} /* i.e. switched 'off' by default (display: none;)  */

/* ---------------------------------------- */
/* -- LOGO STYLES (MEDIA QUERY REVISIONS) - */
/* ---------------------------------------- */

/* Revised LOGO displays */

@media screen and (min-width: 1px) and (max-width: 450px) {
#tiniestlogowrapper {
	display:block;
}
} /* 169px image */
@media screen and (min-width: 451px) and (max-width: 600px) {
#smallestlogowrapper {
	display:block;
}
} /* 319px image */
@media screen and (min-width: 601px) and (max-width: 750px) {
#smallerlogowrapper {
	display:block;
	
	
	
	
	
}
} /* 479px image */
@media screen and (min-width: 751px) and (max-width: 870px) {
#mediumlogowrapper {
	display:block;
}
} /* 599px image */
@media screen and (min-width: 871px) and (max-width: 1023px) {
#widerlogowrapper {
	display:block;
}
} /* 767px image */
@media screen and (min-width: 1024px) {
#widestlogowrapper {
	display:block;
}
} /* 960px image (NOTE: Don't include any max width. It will then display any width BEYOND that indicated) */
/* @media screen and (min-width: 1px) and (max-width: 450px) {#topleftsmalllogowrapper {display:block;}} /* adjust width instructions as necessary */

/* ---------------------------------------- */
/* --------- IMAGE SLIDER STYLES ---------- */
/* ---------------------------------------- */

#slidergallerywrapper {/* display: none; */
	clear: both;
	width: auto;
	text-align:center;
	min-height: 1em;
	margin-top: 0em;
	margin-bottom: 0em;
	background-image: none;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position:top;
	background-size: auto;
	-webkit-box-shadow: 0px 5px 30px #000;
	box-shadow: 0px 5px 30px #000;
}
#slidergallerycontainer {
	width: auto;
	max-width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	text-align:center; /* -webkit-animation: bounceInRight 1s linear; animation: bounceInRight 1s linear 5s infinite alternate; */
}

/* Add "5s infinite alternate" to the LINEAR instructions above if you want animations to repeat. */  
/* Add following to create a background image - background-image: url(../images/crowd1920.jpg); background-repeat:no-repeat; background-size: auto; background-position:top; */

/* ---------------------------------------- */
/* -- IMAGE SLIDER (MEDIA QUERY REVISIONS) - */
/* ---------------------------------------- */

@media screen and (min-width: 1px) and (max-width: 1023px) {
#slidergallerywrapper {
	display:none;
}
} /* adjust width instructions as necessary */
@media screen and (min-width: 1024px) {
#slidergallerywrapper {
	display:block;
}
} /* Don't include any max width. It will then display any width BEYOND that indicated */
/* ---------------------------------------- */
/* ----- MAILCHIMP SIGN-UP FORM STYLES ---- */
/* ---------------------------------------- */

#mailchimpsignup {
	width: 100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#mc_embed_signup {
	width: 300px;
	height:auto;
	background:#0F6FBE;
	text-align:left;
	clear:both;
	color:#FFF;
	font-size: 0.5em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#mc_embed_signup form {
	display:block;
	position:relative;
	text-align:left;
	padding:10px 0 10px 3%
}
#mc_embed_signup h2 {
	font-weight:bold;
	padding:0;
	margin:15px 0;
	font-size:1.4em;
}
#mc_embed_signup input {
	border:1px solid #999;
	-webkit-appearance:none;
}
#mc_embed_signup input[type=checkbox] {
	-webkit-appearance:checkbox;
}
#mc_embed_signup input[type=radio] {
	-webkit-appearance:radio;
}
#mc_embed_signup input:focus {
	border-color:#71A3D7;
}
#mc_embed_signup .button {
	clear:both;
	background-color: #71A3D7;
	border: 0 none;
	border-radius:4px;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	font-size:15px;
	font-weight: bold;
	height: 32px;
	line-height: 32px;
	margin: 0 5px 10px 0;
	padding:0;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	white-space: nowrap;
	width: auto;
}
#mc_embed_signup .button:hover {
	background-color:#777;
}
#mc_embed_signup .small-meta {
	font-size: 11px;
}
#mc_embed_signup .nowrap {
	white-space:nowrap;
}
#mc_embed_signup .clear {
	clear:none;
	display:inline;
}
#mc_embed_signup label {
	display:block;
	font-size:16px;
	padding-bottom:10px;
	font-weight:bold;
}
#mc_embed_signup input.email {
	display:block;
	padding:8px 0;
	margin:0 4% 10px 0;
	text-indent:5px;
	width:58%;
	width:200px;
	-moz-box-shadow: inset 3px 3px 3px #999;
	-webkit-box-shadow: inset 3px 3px 3px #999;
	box-shadow: inset 3px 3px 3px #999;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
#mc_embed_signup input.button {
	display:block;
	width:35%;
	margin:0 0 10px 0;
	min-width:90px;
}
#mc_embed_signup div#mce-responses {
	float:left;
	top:-1.4em;
	padding:0em .5em 0em .5em;
	overflow:hidden;
	width:90%;
	margin: 0 5%;
	clear: both;
}
#mc_embed_signup div.response {
	margin:1em 0;
	padding:1em .5em .5em 0;
	font-weight:bold;
	float:left;
	top:-1.5em;
	z-index:1;
	width:80%;
}
#mc_embed_signup #mce-error-response {
	display:none;
}
#mc_embed_signup #mce-success-response {
	color:#529214;
	display:none;
}
#mc_embed_signup label.error {
	display:block;
	float:none;
	width:auto;
	margin-left:1.05em;
	text-align:left;
	padding:.5em 0;
}

/* ---------------------------------------- */
/* ------------- BANNER DIV STYLES -------- */
/* ---------------------------------------- */

#banner {
	width: 100%;
	background-color: #F00;
	text-align: center;
	line-height: 2em;
	
}

/* ---------------------------------------- */
/* ------- SECTION DIV / CLASS STYLES ----- */
/* ---------------------------------------- */

.sectionheadertext {
	clear: both;
	padding-top: 0.5em;
	font-size: 1.5em;
	color: #EEE;
	text-align:center;
	line-height: 1.7em;
	background: #036;
	-webkit-box-shadow: 0px 5px 30px #000;
	box-shadow: 0px 5px 30px #222; 
   /*  background-image: url(../images/section-header-bg.png); background-repeat: repeat-x; background-attachment: inherit; background-position:top; background-size: auto; */
}
.standardarticleswrapper {
	width:100%;
	margin-right:auto;
	margin-left:auto;
	text-align: center;
	background-image: tranparent;
	
}

.standardarticlescontainer {
	width:80%;
	max-width: 960px;
	margin-right:auto;
	margin-left:auto;
	padding-top: 2em;
	padding-bottom: 2em;
	text-align: left;
	background: transparent;
}

/* The div styles below allow you to have two-column articles */

.standardleftcontainer {
	width: 50%;
	float:left;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	text-align: left; /* Choose CENTER for images (and probably LEFT if used for text) */
	background-color: transparent;
}
.standardrightcontainer {
	width: 40%;
	float: right;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	padding: 0.5em;
	text-align: center; /* Choose CENTER for images (and probably LEFT if used for text) */
	background-color: transparent;
}
.standardrightcontainer img {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 5px 20px #222;
	box-shadow: 0px 5px 20px #222;
}
.standardleftcontainer {
	width: 50%;
	float:left;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	text-align: left; /* Choose CENTER for images (and probably LEFT if used for text) */
	background-color: transparent;
}

/* "Spice Shop" recipes styles */

.recipesrightcontainer {
	width: 40%;
	float: right;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	padding: 0.5em;
	text-align: center; /* Choose CENTER for images (and probably LEFT if used for text) */
	background-color: #EEE;
	border-radius: 10px;
}

.recipesleftcontainer {
	width: 50%;
	float:left;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	text-align: left; /* Choose CENTER for images (and probably LEFT if used for text) */
	background-color: transparent;
}

.recipesborder {height: auto; width: 100%; border: 2px solid #71A3D7;}

/* ---------------------------------------- */
/* - SECTION DIVs (MEDIA QUERY REVISIONS) - */
/* ---------------------------------------- */

@media screen and (min-width: 1px) and (max-width: 800px) {
.standardleftcontainer {
	clear:both;
	float:left;
	width:90%;
	margin-top: 1em;
	margin-bottom: 3em;
}
} /* adjust width instructions as necessary */
@media screen and (min-width: 1px) and (max-width: 800px) {
.standardrightcontainer  {
	clear:both;
	float:right;
	width:90%;
	margin-top: 1em;
	margin-bottom: 3em;
}
} 

@media screen and (min-width: 1px) and (max-width: 800px) {
.recipesleftcontainer {
	clear:both;
	width:90%;
	margin-top: 1em;
	margin-bottom: 3em;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
} /* adjust width instructions as necessary */
@media screen and (min-width: 1px) and (max-width: 800px) {
.recipesrightcontainer {
	clear:both;
	width:90%;
	margin-top: 1em;
	margin-bottom: 3em;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
} 

/* adjust width instructions as necessary */

/* The SITEMAP BG style below creates the shape under all the SERVICE EXAMPLE divs that the sitemap.php link sits in */

.sitemapbg {
	
	background-color:#036;
	padding: 0.5em;
	margin-bottom: 1em;
	max-width: 780px;
	margin-left:auto;
	margin-right:auto;
	-webkit-border-radius: 0px 30px 0px 30px;
	-moz-border-radius: 0px 30px 0px 30px;
	border-radius: 0px 30px 0px 30px;
}

/* ---------------------------------------- */
/* --------- SECTION DIV ID STYLES -------- */
/* ---------------------------------------- */

/* Service Examples Section */

#serviceexampleswrapper {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/background.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: auto; background-position: top;
}
#serviceexamplescontainer {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2em;
	text-align: center;
	-webkit-animation: bounceInLeft 1s linear; /* Chrome, Safari, Opera */
	animation: bounceInLeft 1s linear;
} /* Add "5s infinite alternate" to the LINEAR instructions above if you want animations to repeat */

#lefttopserviceexample, #centretopserviceexample, #righttopserviceexample, #leftmiddleserviceexample, #centremiddleserviceexample, #rightmiddleserviceexample, #leftlowerserviceexample, #centrelowerserviceexample, #rightlowerserviceexample, #leftbottomserviceexample, #centrebottomserviceexample, #rightbottomserviceexample {
	width: 20%;
	min-width: 200px;
	margin: 1em;
	margin-bottom: 1em;
	min-height: auto;
	background:  #036;
	color: #FFF;
	padding: 1em;
	display: inline-block;
	-webkit-border-radius: 0px 30px 0px 30px;
	-moz-border-radius: 0px 30px 0px 30px;
	border-radius: 0px 30px 0px 30px;
	text-align: left;
	opacity: 0.9;
	text-align:center;
}

#righttopserviceexample { background-color: #09F;}

/* Social Media Section */

#socialmediawrapper {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	padding: 1.5em;
}
#socialmediacontainer {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2em;
	padding-bottom: 2em;
	text-align:center;
	background-color: #222;
	border-radius: 20px;
}

/* Video Section */

#videowrapper { 
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0em;
	margin-bottom: 0em;
	text-align: center;
	background-color: transparent;
}
#videocontainer {
	max-width: 960px;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color: orange;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
#videoholder {
	background-color:#EEE;
}
#videoholdertransparent {
	background-color: transparent;
}
#videoholder, videoholdertransparent {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	text-align: center;
}

/* Map Section */

#mapwrapper {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#EEE;
}
#mapcontainer {
	width: 90%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2em;
	text-align:center;
}

/* Footer Section */

#footerwrapper {
	clear: both;
	min-width: 179px;
	min-height: 3em;
	text-align:center;
	background-color: #333;
}
/* ---------------------------------------- */
/* --------- CENTRED IMAGE STYLES --------- */
/* ---------------------------------------- */

.centredimages {
	width: auto;
	margin-left:auto;
	margin-right: auto;
	height:auto;
	text-align:center;
	padding-top: 0em;
	padding-bottom: 0em;
	
}

img.responsive {
	max-width: 95%;
	margin-left:auto;
	margin-right: auto;
	text-align:center;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border: 0px dotted #999;
}
@media screen and (orientation: portrait) {
img.ri {
	max-width: 90%;
	margin-left:auto;
	margin-right: auto;
	text-align:center;
}
}
@media screen and (orientation: landscape) {
img.ri {
	max-height: 90%;
	margin-left:auto;
	margin-right: auto;
	text-align:center;
}
}
.centredflashmovies {
	width: auto;
	max-width: 960px;
	margin-left:auto;
	margin-right: auto;
	height:auto;
	text-align:center;
	padding-top: 0em;
	padding-bottom: 0em;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border: 0px dotted #999;
}
/* ---------------------------------------- */
/* --------- CONTACT FORM STYLES ---------- */
/* ---------------------------------------- */

/* Contact Form Styles */

#contactformheader {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0em;
	margin-top: 0em;
	text-align:center;
}
#contactformwrapper {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0em;
	margin-top: 0em;
	background-color: transparent
	text-align:left;
}
#contactformcontent {
	max-width: 320px;
	padding: 1em;
	margin-left: auto;
	margin-right: auto;
	text-align:left;
}
.formtextboxes {
	font-size: 1em;
	font-weight: bold;
	color:#036;
	width: 100%;
	height: 1.5em;
	background-color: #EEE;
	-moz-box-shadow: inset 3px 3px 3px #999;
	-webkit-box-shadow: inset 3px 3px 3px #999;
	box-shadow: inset 3px 3px 3px #999;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
.formcommentsarea {
	font-size: 1.3em;
	font-weight: bold;
	color:#036;
	width: 100%;
	background-color: #EEE;
	-moz-box-shadow: inset 3px 3px 3px #999;
	-webkit-box-shadow: inset 3px 3px 3px #999;
	box-shadow: inset 3px 3px 3px #999;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
.formbuttons {
	font-size: 1em;
	font-weight: bold;
	color: #EEE;
	width: 100%;
	background-color: #09F;
	border: 0px ridge #036;
	height: 2em;
}
.captchaimage {
	width: auto;
	min-width: 320px;
	text-align:center;
}



/* ---------------------------------------- */
/* -- MENUZORD (MOBILE RESPONSIVE) MENU --- */
/* ---------------------------------------- */
 
@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,600,700);
 
/* SHOW/HIDE BUTTON (MOBILE MODE) */
.menuzord .showhide {
	width: 70px;
	height: 70px;
	display: block;
	float: right; /* Positions the MENUZORD menu indicator to the LEFT or to the RIGHT of the logos */
	background-image:url(../images/menuzord-menu-button.jpg);
	background-repeat:no-repeat;
	margin-right: 1em; /* Determines the margin on the RIGHT for the SHOW/HIDE menu button */
	margin-top: 1.2em; /* Determines the margin on the TOP for the SHOW/HIDE menu button */
}

/* MENU CONTAINER */
.menuzord, .menuzord * {
	font-family: inherit;
}
.menuzord {
	width: 100%;
	position: static;
}

/* MENU */
.menuzord-menu {
	float:left;
	margin-left:auto;
	margin-right:auto;
	list-style: none;
	width: 100%;
	display:block;
	position: relative;
	background-color: transparent; /* Use colours for identifying but leave as transparent on publication */
}
.menuzord-menu > li {
	width: auto;
	margin-top: 0.1em;
	margin-bottom: 0.1em;
	margin-left: 0.5em;
	margin-right:0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	background-color: #09F; /* Puts a background color behind each drop down item */
	-webkit-border-radius: 0px 10px 0px 0px; /* Puts cool radius around each drop down item - Use 10px 10px 10pc 10px for full rounded */
	-moz-border-radius: 0px 10px 0px 0px; /* Puts cool radius around each drop down item - Use 10px 10px 10pc 10px for full rounded */
	border-radius: 0px 10px 0px 0px; /* Puts cool radius around each drop down item - Use 10px 10px 10pc 10px for full rounded */
	text-align:left;
}
.menuzord-menu > li:hover {
	background-color: #036; /* Puts a background color behind each drop down item */
}
.menuzord-menu > li > a {
	padding: 0.4em;
	margin-left: 2px;
	text-decoration: none;
	font-size: 0.8em; 
	font-weight: 500;
	color: #FFF;
	line-height: auto; /* Changes the vertical height allowed for the entire menu system (if set to AUTO, the space allocated will increase depending on the number of buttons you have */
}

.menuzord-menu > li:active > a {
	color: #FFF;
}

/* INDICATOR */
.indicator {
	color: #EEE; /* Important. This colour-highlights the ACTIVE (clicked) button on the second level drop downs */
	float:left;
	margin-left:0.2em;
	margin-right: 0.2em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	background-color:#036;
	font-size: 1.9em;
}

.indicator:hover {
	background-color:#000;
	color: #FFF;
}

/* DROPDOWN */
.menuzord-menu ul.dropdown li {
	
	width: auto; /* Determines the width of the drop down items (not the main buttons) */
	clear: both;
	display: block;
	position: relative;
	margin-top: 0.1em; /* Determines the vertical spacing of the drop down items (not the main buttons) */
	margin-bottom: 0.1em; /* Determines the vertical spacing of the drop down items (not the main buttons) */
	margin-right: 2px;
	margin-left: 2px;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	background-color: #222; /* Puts a background color behind each drop down item */
	border-radius: 0px 10px 0px 0px; /* Puts cool radius around each drop down item - Use 10px 10px 10pc 10px for full rounded */
	-webkit-border-radius: 0px 10px 0px 0px; /* Puts cool radius around each drop down item - Use 10px 10px 10pc 10px for full rounded */
	-moz-border-radius: 0px 10px 0px 0px; /* Puts cool radius around each drop down item - Use 10px 10px 10pc 10px for full rounded */
	text-indent: 20px;
}

.menuzord-menu ul.dropdown ul.dropdown li {
	
	width: auto; /* Determines the width of the drop down items (not the main buttons) */
	clear: both;
	display: block;
	position: relative;
	margin-top: 0.1em; /* Determines the vertical spacing of the drop down items (not the main buttons) */
	margin-bottom: 0.1em; /* Determines the vertical spacing of the drop down items (not the main buttons) */
	margin-right: 2px;
	margin-left: 30px;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	background-color: purple; /* Puts a background color behind each drop down item */
	-webkit-border-radius: 5px; /* Puts cool radius around each drop down item - Use 10px 10px 10pc 10px for full rounded */
	-moz-border-radius: 5px; /* Puts cool radius around each drop down item - Use 10px 10px 10pc 10px for full rounded */
	border-radius: 5px; /* Puts cool radius around each drop down item - Use 10px 10px 10pc 10px for full rounded */
	text-indent: 20px;
}

/* Parent menu edits */
.menuzord-menu ul.dropdown li a {
	color: #FFF; /* Determines the text color of the drop down items (not the main buttons) */
	font-size: 0.6em; 
	font-weight:500;
	text-decoration: none; /* Determines the font decoration of the drop down items (not the main buttons) */
}

.menuzord-menu ul.dropdown li:hover {
	background-color: #444;
}

/* Sub menu edits */
.menuzord-menu ul.dropdown ul.dropdown li a {
	color: #FFF; /* Determines the text color of the drop down items (not the main buttons) */
	font-size: 0.7em; 
	font-weight:500;
	text-decoration: underline; /* Determines the font decoration of the drop down items (not the main buttons) */
	background-color: yellow;
}

.menuzord-menu ul.dropdown ul.dropdown li {
	background-color: aqua;
}

.menuzord-menu ul.dropdown ul.dropdown li:hover {
	background-color: green;
}

/* DROPDOWN/MEGAMENU INDICATORS */

.menuzord-menu li .indicator {
	margin-right: 3px; /* Determines the margin on the side of any indicators (i.e. the + sign) separating it from the TEXT of the actual button */
}

#blankwhite {
	background-color: #FFF; height:50px; clear:both;
}

.scrollable-fix {background:#71A3D7;}

/* MEDIA QUERY EDITS */
@media screen and (min-width: 600px) and (max-width: 1920px) {
	.menuzord-menu {
	margin-left:auto;
	margin-right:auto;
	width: 97%;
	display:compact;
}	
/* MENUZORD ANIMATIONS */
.zoom-in{
    -webkit-animation: zoomIn 400ms ease both;
    -moz-animation: zoomIn 400ms ease both;
    -o-animation: zoomIn 400ms ease both;
    animation: zoomIn 400ms ease both;
}
@-webkit-keyframes zoomIn {
    0% { -webkit-transform: scale(1.5); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes zoomIn {
    0% { -moz-transform: scale(1.5); }
    100% { -moz-transform: scale(1); }
}


@-o-keyframes zoomIn {
    0% { opacity: 0; -o-transform: scale(1.5); }
    100% { opacity: 1; -o-transform: scale(1); }
}
@keyframes zoomIn {
    0% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.zoom-out{
    -webkit-animation: zoomOut 400ms ease both;
    -moz-animation: zoomOut 400ms ease both;
    -o-animation: zoomOut 400ms ease both;
    animation: zoomOut 400ms ease both;
}
@-webkit-keyframes zoomOut {
    0% { -webkit-transform: scale(.6); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes zoomOut {
    0% { -moz-transform: scale(.6); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes zoomOut {
    0% { -o-transform: scale(.6); }
    100% { -o-transform: scale(1); }
}
@keyframes zoomOut {
    0% { transform: scale(.6); }
    100% { transform: scale(1); }
}
.drop-up{
    -webkit-animation: drop-up 400ms ease both;
    -moz-animation: drop-up 400ms ease both;
    -o-animation: drop-up 400ms ease both;
    animation: drop-up 400ms ease both;
}
@-webkit-keyframes drop-up {
    0% { -webkit-transform: translateY(100px); }
    100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes drop-up {
    0% { -moz-transform: translateY(100px); }
    100% { -moz-transform: translateY(0); }
}
@-o-keyframes drop-up {
    0% { -o-transform: translateY(100px); }
    100% { -o-transform: translateY(0); }
}
@keyframes drop-up {
    0% { transform: translateY(100px); }
    100% { transform: translateY(0); }
}
.drop-left{
    -webkit-animation: drop-left 400ms ease both;
    -moz-animation: drop-left 400ms ease both;
    -o-animation: drop-left 400ms ease both;
    animation: drop-left 400ms ease both;
}
@-webkit-keyframes drop-left {
    0% { -webkit-transform: translateX(-100px); }
    100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes drop-left {
    0% { -moz-transform: translateX(-100px); }
    100% { -moz-transform: translateX(0); }
}
@-o-keyframes drop-left {
    0% { -o-transform: translateX(-100px); }
    100% { -o-transform: translateX(0); }
}
@keyframes drop-left {
    0% { transform: translateX(-100px); }
    100% { transform: translateX(0); }
}
.swing {
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-o-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation: swing 400ms ease-out both;
	-moz-animation: swing 400ms ease-out both;
	-o-animation: swing 400ms ease-out both;
	animation: swing 400ms ease-out both;
}
@-webkit-keyframes swing {
	20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
	20% { -webkit-transform: rotate(15deg); }	
	40% { -webkit-transform: rotate(-10deg); }
	60% { -webkit-transform: rotate(5deg); }	
	80% { -webkit-transform: rotate(-5deg); }	
	100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes swing {
	20% { -moz-transform: rotate(15deg); }	
	40% { -moz-transform: rotate(-10deg); }
	60% { -moz-transform: rotate(5deg); }	
	80% { -moz-transform: rotate(-5deg); }	
	100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes swing {
	20% { -o-transform: rotate(15deg); }	
	40% { -o-transform: rotate(-10deg); }
	60% { -o-transform: rotate(5deg); }	
	80% { -o-transform: rotate(-5deg); }	
	100% { -o-transform: rotate(0deg); }
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

.flip{
	-webkit-animation: flip 700ms ease both;
	-moz-animation: flip 700ms ease both;
    -o-animation: flip 700ms ease both;
    animation: flip 700ms ease both;
}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.roll-in{
	-webkit-animation: roll-in 400ms ease both;
	-moz-animation: roll-in 400ms ease both;
    -o-animation: roll-in 400ms ease both;
    animation: roll-in 400ms ease both;
}
@-webkit-keyframes roll-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-15deg);
    transform: translateX(-100%) rotate(-15deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}
@keyframes roll-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-15deg);
    -ms-transform: translateX(-100%) rotate(-15deg);
    transform: translateX(-100%) rotate(-15deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}
.stretch{
	-webkit-animation: stretch 500ms ease both;
	-moz-animation: stretch 500ms ease both;
    -o-animation: stretch 500ms ease both;
    animation: stretch 500ms ease both;
	transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%; 		
}
@keyframes stretch{
	0% { transform: scaleX(0.3); }
	40% { transform: scaleX(1.02); }
	60% { transform: scaleX(0.98); }
	80% { transform: scaleX(1.01); }
	100% { transform: scaleX(0.98); }				
	80% { transform: scaleX(1.01); }
	100% { transform: scaleX(1); }							
}
@-webkit-keyframes stretch{
	0% { -webkit-transform: scaleX(0.3); }
	40% { -webkit-transform: scaleX(1.02); }
	60% { -webkit-transform: scaleX(0.98); }
	80% { -webkit-transform: scaleX(1.01); }
	100% { -webkit-transform: scaleX(0.98); }				
	80% { -webkit-transform: scaleX(1.01); }
	100% { -webkit-transform: scaleX(1); }		
}

@-o-keyframes stretch{
	0% { -o-transform: scaleX(0.3); }
	40% { -o-transform: scaleX(1.02); }
	60% { -o-transform: scaleX(0.98); }
	80% { -o-transform: scaleX(1.01); }
	100% { -o-transform: scaleX(0.98); }				
	80% { -o-transform: scaleX(1.01); }
	100% { -o-transform: scaleX(1); }		
}	
}
 
/* ---------------------------------------- */
/* ---------------- END DOCUMENT ---------- */
/* ---------------------------------------- */