@charset "UTF-8";


body { font-family: 'Titillium Web', Helvetica,Helvetica Neue,Arial,sans-serif; font-size: 12px; line-height: 18px;  background-color: #e8e9e8;}
* {margin: 0; padding: 0;}
ul, ol {list-style-type: none; margin: 0;}
a {}
img {}

h1 {font-size: 30px; line-height: 40px; font-weight: 300; color:#404041; margin-bottom: 20px;}
.in-page-anchor {height: 0; padding: 0; margin: 0; font-size: 0; line-height: 0;}
nav {/*height: 56px;*/ position: relative;}
nav ul {display: none; clear: both; background-color: /*#646464;*/#353839; position: absolute; top: /*56px*/ 0; left: 0; width: 100%; z-index: 200;}	
nav.expand ul {display: block;}
nav ul li a {font-size: 1.6rem; display: block; padding: 20px; text-align: center; text-decoration: none;}
nav.main-nav .menu-toggle  {display: block; position: absolute; top: 5px; right: 10px;/* text-indent: -100em;*/ overflow: hidden; background-color: transparent; width: 43px; height: 43px; padding: 0; /*border: 2px solid rgba(255,255,255,0.7);*/ border-radius: 5px; z-index: 100;}

nav.main-nav .menu-toggle:hover {cursor: pointer;}
nav.main-nav .menu-toggle:before {   content: "\f0c9";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #fff;
    font-size: 30px;
    padding-right: 0.5em;
    position: absolute;
    top: 12px;
    left: 8px; z-index: 101;}
nav.main-nav.expand .menu-toggle  { }
nav.main-nav li {display: block; float: none;}
nav.main-nav li.mobile-menu {display: block;}
/*nav.main-nav li:nth-child(2), nav.main-nav li:nth-child(3),nav.main-nav li:nth-child(4), nav.main-nav li:nth-child(5) {display: none;}*/
nav.main-nav li a {display: block; float: none; font-size: 1.3rem; padding: 20px 7.5px 22px 7.5px; color: #fff; border-right: none; border-bottom: solid 1px #888; font-weight: 300;}
nav.main-nav li:first-of-type a {border-left: none;}
nav.main-nav li:nth-of-type(2) a {border-left: none;}
nav.main-nav li a:hover {color: #766C59;}
nav.main-nav li a.nav-active {color: #766C59;}	
header {position: relative;}

header .logo {background-color: #404041; text-align: center; padding: 40px 20px 20px 20px; /*border-bottom: solid 3px #fff;*/ position: relative;}

header .logo .email {display: block; position: absolute; right: 60px; bottom: 20px;}

header .logo .email a {color: #fff; text-decoration: none; font-size: 15px;}

header .logo .email a:hover {text-decoration: underline;}

header .green-bar {background-color: #726659; font-size: 20px; text-align: right; color: #fff; padding: 12px 60px;}

header .green-bar span { padding-left: 18px; 	width: 10px; height: 18px;
	background-image:url(../../images/new-files/arrow.png);
	background-repeat: no-repeat;
	background-size: 12px 20px; background-position: 0px 5px; font-weight: 200;}
	
		header .sold-flag {position: absolute; top: 0; left: 0; height: 75%; width: auto;}
		
		.sold { display: none;}

.wrapper {width: 960px; margin: 0 auto;}

.full-width img {width: 100%; height: auto;}

.body-content section {text-align: center;}

section { padding: 0; color: #404041;}

section:after {
  content: "";
  display: table;
  clear: both;
}

.section-padding {padding: 30px; border: solid 1px #404041;  font-size: 16px; line-height: 25px; background-color: #fff; }

.section-margin {margin: 0 0 20px 0;}

.high-heath-gallery {font-size: 0; line-height: 0;}

.high-heath-gallery ul li img {width: 100%; height: auto;}

.high-heath-gallery ul li {display: none;}

.high-heath-gallery ul li:first-of-type {display: block;}

.high-heath-gallery ul li:first-of-type a {display: block; position: relative;}

.high-heath-gallery ul li:first-of-type a span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	/*font-size: 100px;
	color: rgba(255,255,255,0.5);
	margin: -60px 0 0 -20px;*/
	width: 60px; height: 100px;
	background-image:url(../../images/new-files/arrow.png);
	background-repeat: no-repeat;
	background-size: 60px 100px;
	margin: -50px 0 0 -30px;
	opacity: 0.35;

}

.high-heath-gallery ul li:first-of-type a:hover span {
	
	opacity: 1;
	/*color: rgba(255,255,255,1);*/

}

.location-map {border: solid 1px #404041; padding: 30px 0 0 0;  line-height: 0; border: none;}
.location-map h1 {color: #fff;}

.location-map iframe {width: 100%;}
.location-map img {width: 100%; height: auto;}

.map-wrapper {position: relative; display: block;}

.location-map .dot {width: 15px; height: 15px; background-color: #000; border: solid 1px #fff; border-radius: 50%; position: absolute; text-align: center; }
.location-map .dot.school {background-color: #831f82;}
.location-map .dot.business {background-color: #e6007e;}
.location-map .dot.leisure {background-color: #009fe3;}
.location-map .dot.golf {background-color: #f39200;}

.location-map .dot.mclaren {top: 70px; left: 565px;}
.location-map .dot.chobham {top: 178px; left: 210px;}
.location-map .dot.standrews {top: 225px; left: 470px;}
.location-map .dot.halstead {top: 190px; left: 548px;}
.location-map .dot.goldsworth {top: 296px; left: 430px;}
.location-map .dot.wokingltacc {top: 358px; left: 408px;}
.location-map .dot.stjohns {top: 356px; left: 548px;}
.location-map .dot.hoebridge {top: 332px; left: 625px;}
.location-map .dot.wisley {top: 328px; right: 44px;}
.location-map .dot.hoe-bridge {top: 358px; left: 598px;}
.location-map .dot.westhill {top: 410px; left: 190px;}
.location-map .dot.wokinggc {top: 380px; left: 340px;}
.location-map .dot.hoevalley {top: 420px; left: 438px;}
.location-map .dot.sutton-green {top: 486px; left: 498px;}
.location-map .dot.railway-station {top: 270px; left: 515px; background-color: #e30613;}

.location-map .dot.high-heath {top: 382px; left: 418px; background-color: #3c3c3b;}

.location-map .panel {display: none; position: absolute; left: 0; margin-left: -93.5px; bottom: 30px; font-size: 13px; line-height: 20px; width: 200px; background-color: #cfc8c1; border: solid 1px #fff; border-radius: 10px; padding: 10px; box-sizing:border-box;font-weight: bold;}
.location-map .dot.high-heath .panel {height: 54px; width: 100px; background-color: rgba(60,60,59,1);  display: block; box-sizing:border-box; padding: 5px;

left: 27px; margin-left: 0; bottom: -18px;}

.location-map .dot.high-heath .panel img {height: 100%; width: auto;}


.location-map .dot:hover {cursor: pointer;}
.location-map .dot:hover .panel, .location-map .dot:focus .panel {display: block; z-index: 100;}



.location-map .panel em {  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  
  border-top: 15px solid  #cfc8c1;  position: absolute; bottom: -15px; left: 85px;}
  
  .location-map .dot.high-heath .panel em { border-top: 15px solid  #3c3c3b;  position: absolute; bottom: 14px; left: -26px;
  border-bottom: 11px solid transparent;
  border-right: 11px solid #3c3c3b;
  
  border-top: 11px solid  transparent;
  }
  
  .location-map .panel em:nth-of-type(1)  {  width: 0; 
  height: 0; 
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  
  border-top: 16px solid  #fff;  position: absolute; bottom: -17px; left: 84px;}
  
.location-map .dot.high-heath .panel em:nth-of-type(1)  {  
  
  bottom: 13px; left: -29px;
  
  border-bottom: 12px solid transparent;
  border-right: 12px solid  #fff;
  
  border-top: 12px solid transparent; }
  
  

.location-map .panel span {border: none; font-weight: normal; font-size: 12px; display: block;}

.map-legend {position: absolute; top: 24px; left: 30px;}

.map-legend ul {}

.map-legend ul li {text-align: left; font-size: 13px; display: block; line-height: 30px; font-weight: bold;}

.map-legend ul li span {display: inline-block; width: 20px; height: 20px;  background-color: #fff; border: solid 1px #fff; border-radius: 50%; margin-right: 10px; position: relative; top: 4px;}
.map-legend ul li:nth-of-type(1) span {background-color: #f39200;}
.map-legend ul li:nth-of-type(2) span {background-color: #009fe3;}
.map-legend ul li:nth-of-type(3) span {background-color: #e6007e;}
.map-legend ul li:nth-of-type(4) span {background-color: #831f82;}

.mobile-list {display: none;}

.portfolio ul li a span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	/*font-size: 100px;
	color: rgba(255,255,255,0.5);
	margin: -60px 0 0 -20px;*/
	width: 30px; height: 50px;
	background-image:url(../images/new-files/arrow.png);
	background-repeat: no-repeat;
	background-size: 30px 50px;
	margin: -25px 0 -15px 0;
	opacity: 0.35;
}

.half-width {width: 49%; float: left;}

.half-width img {width: 100%; height: auto;}

.half-width:first-of-type {margin-right: 2%;}

.white-back {background-color: #fff; text-align: left;}
.element-padding {padding: 50px 30px 30px 30px;}
.white-back .align-right {text-align: right;}
.white-back H1 {color: #706456; text-transform: uppercase;}
.white-back p { font-size: 16px;
    line-height: 25px; padding-bottom: 20px;}
.white-back a {text-transform: uppercase; color: #706456;  text-decoration: none;  position: relative; padding-right: 20px;}
.bronze-header {text-align: left;}
.bronze-header h1 {text-transform: uppercase; background-color: #706456; color: #fff; padding: 10px 30px 10px 30px; margin: 0;}
.bronze-header.element-padding {padding: 0;}

.margin-bottom { margin-bottom: 20px;}

.bronze-header.element-padding div {padding: 20px 30px 20px 30px; background-color: #fff;}

.bronze-header.element-padding div p { font-size: 16px;
    line-height: 25px; padding-bottom: 20px;}
	
.bronze-header.element-padding div p a {text-transform: uppercase; color: #706456; text-decoration: none; position: relative; padding-right: 20px;}

.bronze-header.element-padding div.selling-agent p:first-of-type a {text-transform: none;}


.bronze-header.element-padding div p a:before, .white-back a:before, .floorplans a:before {   content: "\f105";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
  color: #706456;
    font-size: 20px;
    position: absolute;
    top: 0;
   right: 0;}


.hh-image-panel {position: relative;}

.image-overlay {position: absolute; top: 0 left: 0; width: 100%; padding: 20px; box-sizing:border-box;}

.image-overlay .overlay-column-1 {width: 79%; float: left;}

.image-overlay .overlay-column-1 h1 {color: #fff; border: solid 1px #fff; padding: 30px 75px; text-align: left; font-size: 30px;}

.image-overlay .overlay-column-1 h1 span {display: block; font-weight: 200;}

.image-overlay .overlay-column-1 h1 span strong {font-weight: 500;}

.image-overlay .overlay-column-2 {width: 19%; float: left; margin-left: 2%;}

.image-overlay .overlay-column-2 h2 {color: #fff; font-size: 16px;  border: solid 1px #fff; padding: 10.3px 20px; text-align: left; margin-bottom: 12px;}

.image-overlay .overlay-column-2 h2 span {display: block; font-weight: 200;}

.image-overlay .overlay-column-2 h2 span strong {}

.hh-gallery ul {display: none;}

.hh-gallery .gallery-link span {display: block; float: right; font-size: 16px; color: #fff; text-decoration: none; padding: 10px; background-color: #353839; margin-top: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 200;}

.email {text-align: left;}

.email span {display: block; color: #fff; padding-bottom: 4px;}

.email span:nth-of-type(1) {font-size: 12px; color: #777879;}

.email span:nth-of-type(3) a {color: #989899;}

.email span:nth-of-type(4) {font-size: 18px;}

.location-map {position: relative; top: -80px; margin-bottom: -30px;}

.location-map h1 {text-transform: uppercase; background-color: #fff; color: #706456; padding: 10px 30px; margin: 0; float: left;}

.map-wrapper {display: block; clear: both; border: solid 3px #fff;}

.location-map span img {width: 100%; height: auto;}

.floorplans {background-color: #d1d2d4;}

.floorplans h1 {text-transform: uppercase; text-align: left;}

.floorplans p { font-size: 16px; line-height: 25px; text-align: right;}

.floorplans a {text-transform: uppercase; color: #706456;  text-decoration: none;  position: relative; padding-right: 20px;}

.floorplans img {margin: 0 auto 32px 0; width: 98%; display: block;}

footer {background-color: #404041; padding: 20px 30px; color: #fff;}

footer:after {
  content: "";
  display: table;
  clear: both;
}

footer .column {float: left; width: 25%;}

footer .column-1 img {width: 50%; height: auto;}

footer .column-2 a, footer .column-3 a {color: #fff; text-transform: uppercase; text-decoration: none; font-size: 16px;}

footer .column-4 h2 {color: #fff; text-transform: uppercase; text-decoration: none; font-size: 16px; font-weight: normal;}

footer .column-4 a {color: #fff; text-decoration: none;}