body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: 'Open Sans', sans-serif;}
a[href^=tel] {color:inherit;text-decoration:none;}
a {text-decoration: none;}
a img {border:none;}
img, object, embed, video {max-width: 100%;}
.container {width: 100%;max-width: 1920px;margin: 0px auto;}
.google-maps {position: relative;padding-bottom: 75%; // This is the aspect ratioheight: 0;overflow: hidden;}
.google-maps iframe {position: absolute;top: 0;left: 0;width: 96% !important;height: 100% !important;}
.wrap {margin:0 auto;width:85%;max-width:1400px;}
#header, #footer {width:100%;float:left;}
#header {height:45px;background:#222;}
#headertelephone {float:left;width:50%;font-weight:400;font-size:1.2em;background:#222;color:#997260;height:30px;padding-top:10px;text-align:left;padding-bottom:5px;}
#headeremail {float:left;width:50%;font-weight:400;font-size:1.2em;background:#222;color:#997260;height:30px;padding-top:10px;text-align:right;padding-bottom:5px;}
#headeremail a{color:#997260;text-decoration: none;}
#nstripe {width:100%;background:#333;height:170px;}
#name {font-family: 'Playfair Display', serif;font-size:5em;text-align:center;color:white;font-weight:400;text-shadow: 0px 4px 3px rgba(0,0,0,0.4),0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1);}
#areas {font-family: 'Open Sans', sans-serif;font-size:2em;text-align:center;color:white;font-weight:300;text-shadow: 0px 4px 3px rgba(0,0,0,0.4),0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1);}
#breakgrey {width:100%;clear:both;height:1px:background:#222;}
#whitecentered {width:100%;font-family: 'Open Sans', sans-serif;font-size:1.2em;background:white;color:#666;text-align:center;line-height:1.9em;font-weight:300;margin-top:40px;}
#whiteleft ul {padding:0px 0px 0px 8%;text-align:left !important;} 
#whiteleft {width:100%;font-family: 'Open Sans', sans-serif;font-size:1.2em;background:white;color:#666;text-align:left;line-height:1.9em;font-weight:300;}
h1 {font-size:1.6em;padding: 0 0 10px 0;margin: 0px 0px 0px 0px;color:black;text-align:center;font-family: 'Playfair Display', serif;font-weight:400;}
h2,h3,h4,h5,h6 {font-size:1.6em;padding: 0 0 10px 0;margin: 0px 0px 0px 0px;color:black;text-align:center;font-family: 'Playfair Display', serif;font-weight:400;}
#heading {font-size:1.6em;padding: 0 0 10px 0;margin: 0px 0px 0px 0px;color:black;text-align:center;font-family: 'Playfair Display', serif;font-weight:400;}
hr.ten {border: 1px solid #997361;width:10%;}
#greybackgroundstripe {font-size:1.2em;line-height:1.9em;margin-top:40px;text-align:center;background-color:#F0F0F0;width:100%;font-weight:300;padding:20px 0px 20px 0px;color:#666;}
#greybackgroundstripeleft {font-size:1.2em;line-height:1.9em;text-align:left;background-color:#F0F0F0;width:100%;font-weight:300;padding:20px 0px 20px 0px;color:#666;}
#greybackgroundstripeleft ul {padding:0px 0px 0px 8%;text-align:left !important;}
#indexcentered {width:100%;background:white;margin-top:40px;}
#indexbox {float:left;width:22%;min-width:160px;margin-left:2%;margin-right:1%;margin-bottom:20px;text-align:center;}
#indextitle {font-size:1.6em;padding: 0 0 10px 0;margin: 0px 0px 0px 0px;color:#997361;text-align:center;font-family: 'Playfair Display', serif;font-size:1.6em;font-weight:400;}
#indexdescr{color:#333;font-size:1.2em;text-align:center;line-height:1.4em;}
#social {text-align:center;width:100%;height:90px;margin-top:100px;background:white;padding-top:20px;}
#whitecentered a, #greybackgroundstripeleft a, #greybackgroundstripe a, #whiteleft a, #maincontent a {text-decoration:none;color:#997361;}
#centertext {text-align:center;}
#footer {min-height:150px;height:auto;background:#222;color:white;font-weight:400;line-height:1.4em;}
#footercolumn {width:44%;margin-left:4%;margin-right:2%;float:left;margin-top:5px;font-weight:300;font-size:1em;}


#maincontent {min-height:500px;width:100%;font-family: 'Open Sans', sans-serif;font-size:1.2em;background:white;color:#666;text-align:center;line-height:1.9em;font-weight:300;margin-top:40px;}
#maincontent ul {padding:0px 0px 0px 8%;text-align:left !important;} 
#maincontent {width:100%;font-family: 'Open Sans', sans-serif;font-size:1.2em;background:white;color:#666;text-align:left;line-height:1.9em;font-weight:300;}
#maincontent h2,h3,h4,h5,h6 {font-size:1.6em;padding: 0 0 10px 0;margin: 0px 0px 0px 0px;color:#997361;text-align:left;font-family: 'Playfair Display', serif;font-weight:400;}


/* START of NAV styling */
.toggleMenu {display:  none;background: white;/* menu button mobile version background colour */padding: 10px 15px;color: black;font-family: 'Playfair Display', serif;font-weight:400;font-size:1.1em;}
.nav {list-style: none;*zoom: 1;background:white;/* menu bar background colour */}
.nav:before,
.nav:after {content: " "; display: table; }
.nav:after {clear: both;}
.nav ul {list-style: none;width: 18em;/* affects width of pop out nav */}
.nav a {padding: 10px 30px;/* affects width nav elements and sub elements */color:black;*zoom: 1;font-family: 'Playfair Display', serif;font-weight:400;font-size:1.1em;}
.nav li {position: relative;}
.nav > li {float: left;border-top: 1px solid #000000;position: relative;left: 15%;/* this position moves the whole navigation towards the centre on large screens when full width nav used - removed for mobile version below */}
.nav > li > .parent {background-image: url("images/downArrow.png");background-repeat: no-repeat;background-position: right;}
.nav > li > a {display: block;}
.nav li  ul {position: absolute;left: -9999px;}
.nav > li.hover > ul {left: 0;}
.nav li li.hover ul {left: 100%;top: 0;}
.nav li li a {display: block;background: #C02027;/* menu bar 1st sub level background colour */position: relative;z-index:100;border-top: 1px solid #ffffff;/* menu bar 1st sub level top border colour */}
.nav li li li a {background:#000000;zoom:1;/* menu bar 2nd sub level background colour */z-index:200;border-top: 1px solid #ffffff;/* menu bar 1st sub level top border colour */}
/* END of NAV styling */

@media screen and (max-width: 1024px) {
/* iPad Pro and old monitor section */
#nstripe {height:150px;}
#name {font-size:4em;}
#areas {font-size:1.7em;}

}

@media screen and (max-width: 768px) {
/* START of NAV styling */
.active {display: block;}
.nav > li {float: none;position: relative;left: 0%;/* this position moves the whole navigation back to the left on the mobile version*/}
.nav > li > .parent {background-position: 95% 50%;}
.nav li li .parent {background-image: url("images/downArrow.png");background-repeat: no-repeat;background-position: 95% 50%;}
.nav ul {display: block; width: 100%;}
.nav > li.hover > ul , .nav li li.hover ul {position: static;}
/* END of NAV styling */
.wrap {margin:0 auto;width:90%;}
#nstripe {height:120px;}
#name {font-size:3em;}
#areas {font-size:1.4em;}
#indexbox {float:left;width:100%;min-width:160px;margin-bottom:20px;text-align:center;}
h1 {font-size:1.5em;}
h2,h3,h4,h5,h6 {font-size:1.5em;}
#heading {font-size:1.5em;}
#footercolumn {width:100%;text-align:center;margin-top:5px;margin-left:0%;height:auto;}

}

@media screen and (max-width: 480px) {
/* Phone section */
#header {height:100px;background:#222;}
#headertelephone {float:left;width:100%;height:30px;padding-top:10px;text-align:center;}
#headeremail {float:left;width:100%;height:50px;padding-top:00px;text-align:center;}
#nstripe {height:100px;}
#name {font-size:1.6em;}
#areas {font-size:1.1em;}
h1 {font-size:1.3em;}
h2,h3,h4,h5,h6 {font-size:1.3em;}
#heading {font-size:1.3em;}

}