* {
    box-sizing: border-box;
}

html {
	margin: 0px;
	padding: 0px;
	background: #efefef;
	width: 100%;	
	height: 100%;
}

body {
	margin: 0px;
	padding: 140px 0px 0px 0px;
	width: 100%;	
	height: 100%;
}

h1 {
	font-family: 'bp-is', sans-serif;
	font-size: 38px;
	text-transform: uppercase;
}

h2 {	
	font-weight: normal;
	font-size: 18px;
	text-transform: uppercase;
	font-family: 'Noto Sans', sans-serif; font-weight: 500;
}

h3 {	
	font-family: 'bp-is', sans-serif;
	font-size: 28px;
	text-transform: uppercase;
}

h4 {	
	font-weight: normal;
	font-size: 21px;
	text-transform: uppercase;
	color: #313131;
	font-family: 'Noto Sans Blk';
	font-weight: 900;
}

h5 {	
	font-family: 'bp-is', sans-serif;
	font-size: 26px;
	line-height: 42px;
	letter-spacing: -1px;
	color: #86b79e;
}

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

	h5 {font-size: 19px; line-height: 28px;}

}



h6 {
	font-family: 'ITC Caslon 224 Std';
	font-family: 'QGP-bold', sans-serif;
	font-size: 19px;
}

a, p, li {
	font-family: 'Garamond 3 LT Std';
	font-family: 'Noto Sans', sans-serif; 
	font-size: 19px;
	/*line-height: 25px;*/
	color: #343434;
}

a {text-decoration: none;}
a:hover {color: #b0851d;}

.arrow-button {	
	font-size: 16px;
	font-weight: 500;  
	font-family: 'Noto Sans', sans-serif; font-weight: 500;
}

.oval-button {
	background: #86b79e;
	padding: 12px;
	border-radius: 20px;
	font-weight: 700;
	font-size: 14px;
}

.outline-button {
	font-size: 15px;			
	color: #2b2b2b;
	padding: 15px 17px;
	font-family: 'Noto Sans Blk', sans-serif;
	font-weight: 900;
	border: 2px solid #2b2b2b;

}

.grey-button {	
	font-size: 15px;
	font-weight: normal;     
	background: #bbbabb;
	border-radius: 5px;
	color: #efeeef;
	padding: 5px 30px;
	font-family: 'Noto Sans', sans-serif; font-weight: 500;
}

.details-button-row {margin-top: 12px;}

.txt-yellow {color:#ebb227;}
.border-highlight-yellow {padding: 15px; border: 2px solid #ebb227; margin-top: 50px; display: block;}
.border-highlight-grey {padding: 15px; border: 5px dotted #828282; margin-top: 50px;}

/* ------------------------------------------------------header */

.header {
	display: flex;
	width: 90%;
	padding: 75px 0px 75px 0px;
	margin: 0 auto;
	position: absolute;
}

.logo-box {text-align: center; margin: 0 3% 0 0; min-width: 184px;}

.nav {flex-grow: 1; display: flex;}
.menu-box {width: 85%;}
.social-box {width: 15%; text-align: right; margin: 0%;}

.social-box i {font-size: 21px; margin: 0; padding: 0;}

.page-projects-index .page-hide, 
.page-projects-ourstory .page-hide,
.page-projects-services .page-hide
{display: none !important;}


/* ------------------------------------------------------menu */

.menu a {	
	font-weight: 500;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.5;
	color: #1c1c1c;
	text-decoration: none;	
	font-family: 'Noto Sans', sans-serif; font-weight: 500;
}

.menu a:hover {
	text-decoration: underline;
}

ul.menu {
	list-style-type: none;
	margin: 0px;
	padding: 0px;	
} 

.menu li {
	display: inline-block;
	margin: 0px 10px;
	padding: 0px;
} 

a.red {color: #ea2506;}
a.active {color: #86b79e !important;}

	
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 20px 10px 10px 10px;    
}

.dropdown-content {line-height: 15px !important;}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}


/* ------------------------------------------------------mobile */

.overlay, .mobile-menu-open {display: none;}
.mobile-show {display: none;}

/* ------------------------------------------------------divs */

.flex {display: flex;}
.flex-mobile {display: flex;}
.wrap {flex-wrap: wrap;}


/*.row-limit, .footer {max-width: 1420px; padding: 0 0 0 70px; margin: 0 auto;}*/

.row-limit, .footer {width: 87%; padding: 0 3% 0 12%; margin: 0 auto; background: grey1;}
/*.row-limit, .footer {width: 90%; padding: 0 4% 0 6%; margin: 0 auto; background: grey1;}*/

.row-margin {width: 100%;}
.col-a {width: 65%; margin-right: 5%; padding-bottom: 40px;}
.col-b {width: 30%; text-align: center; padding-bottom: 40px;}

.line-header {background: url('../images/line-headerx.jpg') no-repeat left bottom;}

.col-a1 {width: 30%; margin-right: 1%; background: #e6e5e6; border-radius: 25px; padding: 20px;}
.col-b1 {width: 30%; margin-right: 1%; background: #e6e5e6; border-radius: 25px; padding: 20px;}
.col-c1 {width: 30%; margin-right: 0%; background: #e6e5e6; border-radius: 25px; padding: 20px;}

.col-a2 {width: 60%; margin-right: 5%;}

.col-a3 {width: 90%; max-width: 950px; margin-right: 5%;}
.col-a3a {max-width: 1600px;}
.col-b3 {width: 45%; margin-right: 5%; margin-bottom: 25px;}

.col-a4 {width: 22.5%; margin-right: 5%; background: red1;}
.col-b4 {width: 45%; margin-right: 5%; background: green1;}
.col-c4 {width: 22.5%; margin-right: 0%; background: blue1;}

.col-a5 {width: 100%;}

.col-qtr {width: 23%; margin-right: 2%; background: #e6e5e6; border-radius: 25px; padding: 20px; margin-bottom: 25px;}


/* listings css */
.col-a6 {width: 35%; margin-right: 10%;}
.col-b6 {width: 22.5%; margin-right: 2.5%; margin-bottom: 50px;}
.col-c6 {width: 22.5%; margin-right: 0%;}


.col-a7-a {width: 20%;}
.col-a7-b {width: 80%; padding: 30px 40px 40px 40px;}

.col-a8-a {width: 30%;}
.col-a8-b {width: 70%; margin-left: 50px;}

.col-a8-flex {display: flex;}
.col-a8-c {width: 47.5%; margin-right: 2.5%;}
.col-a8-d {width: 47.5%; margin-left: 2.5%;}

.logo-stainsbury {text-align: left; margin-bottom: 25px; margin-top: 0px;}
.logo-stainsbury img {width: 100%;max-width: 396px;}


.col-a7-a img {width: 100%; display: block;}
.col-a7-b h4 {margin: 0;}
.col-a7-b p {margin: 0;}
.col-a7-b .status {background-color: #8d8d8d; color: #fff; padding: 8px 5px; border-radius: 3px;}

.listing-row {background-color: #fbfbfb; margin-bottom: 25px;}
.min-width-listing-row {min-width: 800px; max-width: 1600px;}

.box-button {
	border-radius: 3px;	
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	padding: 4px 28px;
	font-family: 'Noto Sans', sans-serif; font-weight: 500;
}

.button-bar-orange {background: #ebb227; width: 100%; display: block; margin-bottom: 10px; border-radius: 5px; font-weight: 700; padding: 10px;}

.button-red {background: #eb452f;}
.button-grey {background: #8d8d8d;}
.building-name {margin-bottom: 20px;}
.no-bedrooms {margin-bottom: 10px;}
.no-bathrooms {}



.col-a7-col-1 {width: 40%; padding-right: 15px;}
.col-a7-col-2 {width: 40%;}
.col-a7-col-3 {width: 10%; text-align: center;}

.col-a6 img {width: 100%;}
.col-b6 img {width: 100%;}
.col-c6 img {width: 100%;}

.number {font-size: 32px;}

.listing-line {border-top:2px solid #626262; width: 100%; margin-top: 10px; padding-top: 15px;}
.thumb-line {height: 2px; background: url('../images/line.jpg') no-repeat 0px 0px; margin: 10px 0px;}
.thumb-txt-margin {display: inline-block;}
.thumb-txt-margin h4 {padding-right: 75px; margin-bottom: 0.75em;}

.listing-thumb-box {position: relative;}
.listing-thumb img {display: block;}
.listing-thumb-status {position: absolute; bottom: 0; color: #fff; font-weight: normal; padding: 7px 10px; font-size: 16px; width: 50%; font-family: 'Noto Sans', sans-serif; font-weight: 300;}
.listing-thumb-box .bg-rented {background: #1b1b1b;}
.listing-thumb-box .bg-red {background: #ea0300;}
.listing-thumb-box .bg-yellow {background: #86b79e;}


.hero-banner-projects {width: 100%; height: 100%; background: url(../images/basepoint/hero-banner-projects-shade.jpg) no-repeat; background-size: cover;}
@media screen and (max-width: 480px) {
	.hero-banner-projects {background: url(../images/basepoint/hero-banner-projects-shade-m.jpg) no-repeat; background-size: cover;}
}


.hero-banner-header {margin: 0 auto; max-width: 1850px; padding: 250px 50px 0px;}
.hero-banner-header h1 {color: #fff;}

.title-max-width {max-width: 900px;}
.row-banner {width: 85%; margin: 0px 0 0 15%; text-align: right; max-width: 1530px;}
.row-banner img {width: 100%;}

.row-banner-listing {width: 100%; margin: 75px 0 0 0; text-align: center;}
.row-banner-listing img {width: 100%;}

.line {height: 2px; background: url('../images/line.jpg') no-repeat 40px 0px; margin: 40px 0 20px 0px;}
.line-xmargin {margin: 40px 0 70px 0px;}

.valign-center {align-items: center1;}
.mbalance {margin-top: 50px; margin-bottom: 70px;}
.w-control {padding-right: 1%;}
.t-right {text-align: right;}
.para-margin {padding-right: 0%;}
.photo {text-align: center; margin: 100px auto 0px auto; width: 55%;} 
.photo img {width: 100%;}

form p {margin: 8px 0px 0px 0px; padding: 0px;}
.form-row {width: 100%;}
.form-button {margin-top: 20px;}
input {width:100%; border: 0px; font-size: 21px; padding: 8px; background: #cccccc;}
textarea {width: 100%; border: 0px; background: #cccccc;}

.form-box-style {padding: 20px; background: #f5f5f5; border-radius: 20px; border: 1px solid grey;}

.rin-icon img {width: 100%; max-width: 80px;}



/* ------------------------------------------------------footer */

footer {background: #2e2e2d; width: 100%;}
.footer {width: 100%; max-width: 1850px; padding: 50px 50px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.footer p, .footer a {font-size: 16px; margin: 0; color: #fff; line-height: 24px;}

.footer-title {margin-bottom: 30px;}
.footer-title h1 {font-size: 21px;}

.sub-footer {width: 100%; background: #1d3323;}
.footer-row {max-width: 1850px; padding: 25px 50px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.fr-col-a a {text-transform: uppercase; font-weight: bold;}
.fr-col-b {flex-grow: 1; text-align: right;}

.footer-row p, .footer-row a {font-size: 14px; color: #ececec; margin: 0; color: #fff;}


.footer-col-a {margin-right: 5%;}
.footer-col-b {margin-right: 5%;}
.footer-col-c {flex-grow: 1;text-align: right;}

.footer-logo {width: 200px;}
.footer-tagling {font-family: 'bp-is', sans-serif; text-transform: uppercase; text-align: right;}
.footer ul, .footer-row ul {list-style-type: none; padding: 0; margin: 0;}
.footer li, .footer-row li {display: inline-block; padding: 0 10px 0 0; margin: 0;}

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

.footer {flex-direction: column;}
.footer-row {flex-direction: column;}

.footer-col-c {margin-top: 25px;}
.fr-col-b {text-align: left;}
.fr-col-b p,.fr-col-b a {font-size: 12px;}

}	


.filter-white {
    filter: invert(0%) sepia(2%) saturate(0%) hue-rotate(239deg) brightness(104%) contrast(100%);;
}



.oda-link {font-size: 14px; color: #8e8d8e; font-style: italic;}
.oda-link a {font-style: normal;}

#myBtn {
  border: none;
  outline: none;
  cursor: pointer;
  margin-bottom: 25px;
}

/* ------------------------------------------------------forms */

label {display: block;}
.w100 input {width: 100%; height: 35px; font-size: 16px; padding: 5px;}
.width33 {width: 33.3333333%; margin-right: 10px;}
.width25 {width: 25%; margin-right: 10px;}
.width50 {width: 50%; margin-right: 10px;}

.width30 {width: 30%; margin-right: 10px;}
.width10 {width: 10%; margin-right: 10px;}

.form-group {padding: 10px 0px;}
form p {font-size: 17px; font-weight: 500; font-family: 'Noto Sans';}
select {width: 100%; font-size: 16px; height: 35px;}
textarea {width: 100%;}
form {margin-top: 50px;}
form ul {margin: 0px; padding: 0px; list-style-type: none;}
form li {margin: 0px; padding: 3px 0px;}
.messages {padding: 10px 5px; font-size: 18px; font-weight: bold; color: #fff; line-height: 24px; background-color: #1d71b9; display: none;} 

.hours {list-style-type: none; margin: 0; padding: 0;}
.hours li {margin: 0; padding: 5px 0 10px 0; border-bottom: 2px solid #e0ddd8;}

.hours span {font-weight: bold; color: #1d71b9;}

.with-errors li {color: red;}

input[type=submit] { text-align: center; background-color: #ebb227; padding: 30px;}
input[type=submit]:hover {cursor: pointer; background-color: #3a3a3a;} 

input[type=file] {margin-top: 10px;}

.req-note {font-size: 14px; background: #c06968; color: #efeeef; padding: 0px 5px; font-family: 'Noto Sans', sans-serif; font-weight: 500;}

/* ------------------------------------------------------filter */

.filterDiv {  
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 30px;
  background-color: #bbbabb;
  cursor: pointer;
  font-size: 15px;
  text-transform: uppercase;
  color: #fff;
  margin-right: 5px;  
  width: 100%;
  text-align: left;
  font-family: 'Noto Sans', sans-serif; font-weight: 400;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active-filter {
  background-color: #666;
  color: white;
}

.list-filter-menu .dropdown {
  position: relative;
  display: inline-block;
}

.list-filter-menu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #bbbabb;
  /*min-width: 200px;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 0px;
  z-index: 1;
}

.list-filter-menu .dropdown:hover .dropdown-content {
  display: block;
}



.loading {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	display: none;
	z-index: 5;
}
.loading .l-area {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 3;
}
.loading .l-area .t {
	font-size: 2em;
	margin-top: 1em;
	color: #ffffff;
	font-family: 'Noto Sans', sans-serif; font-weight: 500;
}
.loading .l-area .loader {
	display: inline-block;
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #ebb227; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.err-messages {
	font-family: 'Noto Sans', sans-serif; font-weight: 500;
	margin-bottom: 1em;
	color: red;
	border:2px dashed red;
	border-radius: 5px;
	padding: 10px;
	display: none;
}
.success_message {
	font-family: 'Noto Sans', sans-serif; font-weight: 500;
	display: none;
	text-align: center;
	font-size: 1.6em;
	line-height: 2em;
}