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

/*	Based on: Less Framework 4 with 16/24 type presets
	http://lessframework.com
	by Joni Korpi
	License:http://opensource.org/licenses/mit-license.php	*/

@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Open+Sans');

/* COLOURS:
	menubar: #a5907c
	terracotta: #800d06
	sidebar: #e8e3df
*/

/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {display:block}

a img {border:0}

.group:after { /* group class clears floats on all child elements (aligns columns) */ 
	content:'';
	display:table;
	clear:both;
}

/*body.no-scroll {overflow: hidden;}*/  /* align items flex property on mobile */

/*	Typography presets
	------------------	*/
body {
	font:14px/24px 'Open Sans', sans-serif;  /* so 1em = 14px (although file is named '...16px.css') */
	text-align:left;
}

p {padding-bottom:20px}

h1 {
	float:left;
	font:400 30px/30px 'Crimson Text', Georgia, serif; 
	text-transform:uppercase;
	color:#fff;
	letter-spacing:0.1em; /* adds space between letters to space already there */
	text-shadow:1px 1px #000000;
}

h1 .caps {
	font-size:larger;
}

.tel {
	float:right;
	text-align:right;
	font:400 30px/30px 'Crimson Text', Georgia, serif; 
	color:#fff;
	letter-spacing:1px;
	text-shadow:1px 1px #000000;
	padding:0;
}

h2 {
	font:700 18px/30px 'Crimson Text', Georgia, serif; 
	margin-top:20px; 
	color:#800d06;
	text-transform:uppercase;
}

h3 {
	font:700 18px/30px 'Crimson Text', Georgia, serif; 
	margin-bottom:5px; 
	text-align:left; 
	color:#800d06;
}

.footer p {
	font-size:11px;
	color:#fff;
	text-align:center;
	padding:0;
}

.main ul {
	list-style-image: url(images/bullet8px.png);
	list-style-position:inside;
	margin-left:14px;
	padding-bottom:21px;
}

a:link {color:rgb(60,60,60)}
a:hover {color:#0d76ed}

/*	1. Default Layout:992px. 
		Gutters:24px.
		Outer margins:48px.
		Leftover space for scrollbars @1024px:32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	width:100%;
	color:rgb(60,60,60); /* #3c3c3c */
	-webkit-text-size-adjust:100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	/*background:url(../images/canvas-bg.jpg) repeat top left;*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box
}

.container {width:896px; margin:0 auto; position:relative} /* relative to allow absolute positioning of .banner:before pseudo element */

.banner {background-color:#800d06; padding:15px 30px}
.banner:before { /* child pseudo-element placed behind banner for bg colour (IE8 only recognises single colon, but :: is current syntax) */
	width:100%;
	content:'';
	position:absolute;
	top:0;
	z-index:-1;
	left:0;
	background-color:#800d06;
}

.main {width:100%; position:relative}

/* 576 lcol + 24 gutter + 256 rcol + 40 rcol padding = 896 */
.lcol {width:576px; float:left; padding-bottom:20px}

.rcol {
	width:256px;
  float:right;
  padding:0 20px;
}

.rcol:before { /* child pseudo-element placed behind rcol for bg colour (IE8 only recognises single colon, but :: is current syntax) */
	width:296px;
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	z-index:-1;
	left:600px;
	background-color:#e8e3df;
}

.footer {background-color:#800d06; font-size:small; text-align:center; padding:3px 0}

.lcol img {display:block; float:right; margin:10px 0 0 10px}
.rcol img {margin:15px}

/* TABULAR */
.rTable {
	display: block;
	width: 100%;
	font:14px/24px 'Open Sans', sans-serif;
}
.rTableBody, .rTableRow {
	clear: both;
}
.rTableCellL {
	float: left;
	padding:2px 0;
	width: 30%;
}
.rTableCell {
	float: left;
	padding:2px 0;
	width: 70%;
}
.rTableCell2 {
	float: left;
	padding:3px 0;
	width:100%;
	color:#800d06;
}
.rTableAlt {
	background: #e8e3df;
}
.rTable:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* SLIDER */
.slider img {width:896px; height:206px}

.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
	}

.rslides li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 0;
	}

.rslides li:first-child {
	position: relative;
	display: block;
	float: left;
	}

.rslides img {
	display: block;
	height: auto;
	float: left;
	width: 100%;
	border: 0;
}	

/* NAVIGATION */
.menu {
	background-color:#a5907c; }

.nav {
	text-align: left; 
	padding:12px 20px; }

/* == code from modern-responsive-hamburger-navigation 'style.css' == */
.nav--active .nav {
	background-color:#71796a; /* pastel green */
  opacity: 1; }

.nav__item { /* li elements */
	display: inline;
  list-style-type: none; }

.nav__link { /* li a elements */
	display:inline-block;
	font:400 15px/16px 'Open Sans', Arial, sans-serif;
	padding:4px 0;
	margin-right: 36px;
	text-decoration:none;
	color:#fff;
  opacity: 1;
  transition: opacity 0.5s ease-in-out; }

.nav__link:hover {
  color: #800d06; }

/* navigation icon */
.nav__trigger { /* <a> element containing hamburger icon */
  display: none;
  position: absolute;  /* relative to the header container? */
  width: 40px;
  height: 35px;
  z-index: 200; }
/* == code from modern-responsive-hamburger-navigation 'style.css' == */

/*-------------------------------------------------------------*/

/*	2. Tablet Layout:768px.
		Gutters:24px.
		Outer margins:28px.
		Inherits styles from:Default Layout    */
@media only screen and (min-width:768px) and (max-width:991px) {
	.container {
		width:712px;
		padding:0 28px;
	}
	.banner {padding:10px 30px}
	.slider img {width:712px; height:164px}
	.nav {text-align:center}
	.nav__link {margin-right:24px} /* smaller margin */
	.lcol {width:453px}
	.rcol {width:215px; padding:10px} /* width: 235 - 20 padding */
	.rcol:before {width:235px; left:477px}
	p {padding-bottom:10px}
	.lcol img {width:182px}
}

/*	3. Mobile Layout:320px (wider layout, 480px, follows in section 4)
		Gutters:24px.
		Outer margins:24px.
		Inherits styles from:Default Layout   */
@media only screen and (max-width:767px) {
	.container {
		width:272px;
		padding:0 24px;
	}
	.banner {height:110px; padding:10px 20px; text-align:center}
	.slider img {width:272px; height:63px}
	.tel {font-size:22px; float:none; text-align:center}
	.lcol {width:100%; padding-bottom:10px;}
	.lcol img {display:none}
	.rcol {width:232px; background-color:#e8e3df; float:left} /* background-color takes over from :before */
	.rcol:before {display:none}
	h1 {font-size:26px; float:none; padding-bottom:15px}
	h2 {font-size:18px; line-height:24px}
	h3 {font-size:18px; line-height:24px}
	.rTableCellL {width:40%}
	.rTableCell {width:60%}

/* == code adapted from modern-responsive-hamburger-navigation 'style.css' == */
  .nav {
    transform: translateX(-100%);
		padding: 0;
    width: 100%;
		height: 80px;
    z-index: 100;
    opacity: 0; }

  .nav__item { /* li elements */
		display: block;
    text-align: center;
    padding: 15px 10px; }

  .nav__list { /* ul element */
    margin: 0;
    padding: 10px;
		text-transform: uppercase; }

  .nav__link {
    opacity: 0; }
		
  .nav__trigger { /* <a> element, absolutely positioned within header div */
    display: block;
    top: 220px;
    left: 136px; }

	.nav--active .nav__trigger {
		top: 205px;
		left: 250px;
		opacity: 0.5; }
	
	/* Hamburger icon made from three rectangles */
	/* ----------------------------------------- */
	.nav__icon { /* span element, contained by .nav__trigger, shaped as long rectangle 40 x 5px */
		display: inline-block;
		position: relative;
		width: 40px;
		height: 5px;
		top: 10px;
		background-color: #f7faff;
		transition-property: background-color, transform;
		transition-duration: 0.5s;
		z-index: 120; }
	
	.nav__icon:before, .nav__icon:after { /* add two more long rectangles */
		content: '';
		display: block;
		position: absolute;
		width: 40px;
		height: 5px;
		background: #f7faff;
		transition-property: margin, transform;
		transition-duration: 0.5s; }
	
	.nav__icon:before { /* offset above */
		margin-top: -10px; }
	
	.nav__icon:after { /* offset below */
		margin-top: 10px; }
	/* ----------------------------------------- */
			
	.nav__link {
		transition-delay: 500ms; }
	
	.nav--active .nav__link {
		opacity: 1; }
	
	.nav--active .nav {
		transition: all 300ms ease-in-out;
		transform: translateX(0);
		height: 360px; }
	
	/* Convert hamburger to X */
	/* ---------------------- */
	.nav--active .nav__icon {  /* central rectangle transparent */
		background: rgba(0, 0, 0, 0); }
	
	.nav--active .nav__icon:before {
		margin-top: 0;
		transform: rotate(45deg); }
	
	.nav--active .nav__icon:after {
		margin-top: 0;
		transform: rotate(-45deg); }
	/* ---------------------- */
	
}


/*	4. Wide Mobile Layout:480px.
		Gutters:24px.
		Outer margins:22px.
		Inherits styles from:Default Layout, Mobile Layout    */
@media only screen and (min-width:480px) and (max-width:767px) {
	.container {
		width:436px;
		padding:0 22px;
	}
	.banner {height:80px;}
	.slider img {width:436px; height:100px}
	.tel {font-size:25px; float:none; text-align:center}
	.rcol {width:396px}
	.rcol:before {display:none}
	.lcol img {display:block; width:175px}

  .nav__trigger { /* <a> element, absolutely positioned within header div */
    top: 225px;
    left: 208px; }

	.nav--active .nav__trigger {
		top: 215px;
		left: 406px;
		opacity: 0.5; }
	
}

/*	Retina media query.
		Overrides styles for devices with a 
		device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */
@media 
	only screen and (-webkit-min-device-pixel-ratio:2),
	only screen and (min-device-pixel-ratio:2) {
	/*html {overflow-y:visible}*/
	.container {
	
	}
	
}