/** ----------------------------------------------------------
 *
 * Contains the main layout of the page and the individual styles.
 * Acts as the main stylesheet for theme.
 *
 *		Include your notes or table of contents below....
 *		Include color hex's or values of your grid
 *
 *		1. OOCSS GRID
 *		2. MAIN LAYOUT
 *		3. HEADER
 *			- Brand
 *			- Search Form
 *		4. Navigation
 *			- Primary Navigation
 *			- tablet Navigation
 *			- Secondary Navigation
 *			- Secondary Nav 2-5 Levels deep
 *		5. Mixed
 *		6. Footer
 *		7. Page Specific Layout
 *			- Homepage
 *			- Search Results
 *		8. Device and Responsive Layout
 *			- Breakpoint 960px
 *			- Breakpoint 640px
 *				- Search Form
 *				- Main Content
 *		9. Print Styles
 *			- Simple Theme custom print styles
 *
 * @author Your Name <charlie@whamdesign.co.nz>
 * ------------------------------------------------------- */

/* OOCSS Grid
* https://github.com/stubbornella/oocss/wiki/grids
*/
html { font-family: 'Montserrat', Verdana, Helvetica, Arial, sans-serif; scroll-behavior: smooth; }
iframe{}
.fancybox-container{display:none;}
#Breadcrumbs{text-align:left; padding:30px 0;}
#Breadcrumbs a{font-weight:400; color:#000;}
.breadcrumbselement.inner{max-width:1272px; margin:auto; padding:20px 30px 0 20px;}
.bodywrap{max-width:2000px; margin:0 auto; background-color: #fff;}
.inner.padding60{padding:60px 30px;}

.line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */
.lastUnit {
	*overflow:visible;
	*zoom:1;
	padding:0 10px;
}
.HomePage .line, .HomePage .lastUnit {padding:0;}
.unit { /* unit - Base class which divides a line into sections (columns). */
	float:left;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; /* box-sizing:border-box; creates a box-model where 
	padding and border are NOT added onto the width - they are included in the width, 
	so a 200px wide element with 20px padding will be 200px, NOT 240px wide */
}

.inc { 
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

.clearAll{clear:both;}

.unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */
	float:right;
}
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease-in-out, transform 1s ease-out;
    will-change: opacity, transform;
}

/* State triggered when the block is visible in the viewport */
.fade-in-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* MAIN LAYOUT */
body {
  

}
	.ie7 body,
	.ie8 body {
	    min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */
	}
	.main {

	}
	
	.bodyStyle{width:100%; background-color:#000;}
	.inner {
	    max-width: 1800px;
	    margin: 0 auto;
	    padding: 0 30px;
		
	}
	
	inc{	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; }
	
	.inner.white{background-color:#fff; }
	.content-container {
	    max-width: 1800px;
		width:100%;
	    margin: 0 auto;
	    z-index:1;
		background-color:#e7e6e8;

	}
		
	.ie6 .inner {
	    width: 960px;
	}

	.sidebar { /* this is the sidebar element */
	    margin-top: 12px;
	}
	.no-sidebar .sidebar {
		display: none;
	}
	


.boxlink{height: 40px; font-size: 0.75rem; line-height: 1rem; padding: 10px 0 0 0;}
.boxlink a {
    color: #58595B; border: solid 1px #58595B; padding: 5px 20px; text-transform: uppercase; border-radius: 25px; transition: 0.6s;
}
.boxlink a:hover { color: #58595B;border: solid 1px #58595B; padding: 5px 35px; text-transform: uppercase; border-radius: 25px;transition: 0.6s;}

/* HEADER */
.header {
    background: #161616;
    z-index:999999;
	min-height:80px;	
	width:100%;
}


.header .logotagheader{width:158px; display:block; float:left; z-index:99999; }
.header .logotagheader img{width:100%; }
.header .inner { position: relative; width:100%; padding:10px 30px;}
.header .headermenumain{ float:right;}

/* Search form */

.contactButton{position:fixed; background-color:#7b4b76; padding:5px 30px; top:200px; width:160px; text-align:center; right:-60px; transform: rotate(90deg);  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%); z-index:999; }
.contactButton a{font-size:1rem; color:#fff; font-family: 'Montserrat', sans-serif; font-weight:400; line-height:1.75rem;}


.fixed {
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    padding: 4px 0 0 0;
    opacity: 0.9;
    position: fixed;	
	top:0;
}
.float-panel {
    width: 100%;
    z-index: 998;
	min-height:20px;
    transition: all 0.5s;
	left:0;	
}
.float-panel.fixed{background: #000; }
.float-panel.fixed .tag, .float-panel.fixed .headeraward{display:none;}
.float-panel.fixed .logo{padding:10px 10px 0 10px; width:20%;}
.float-panel.fixed .logo img.fulls{}
.float-panel .float-panelInner {max-width:1800px; margin:0 auto; position:relative; min-height:40px; padding-bottom:15px;}
.tablet-nav .float-panel.fixed{min-height:40px; height:auto;} 	
.float-panel.fixed .headerSliderImage {position:relative; float:left; top:10px; left: 10px;}
.float-panel.fixed .headerSliderImage img{width:60px;}
.tablet-nav .float-panel.fixed .float-panelInner .headerCart {float:right;}
.float-panel.fixed {}
.blockLinks{ padding:30px 30px; -moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;}
.blockLinks a{background: none; display: inline-block; color:#626267; border-radius: 5px; border: solid 3px #626267; padding: 5px 50px; margin-top: 0; margin-bottom: 0; text-transform: none; letter-spacing: 1px; font-size: 15px; font-weight:600; margin-right: 0; transition: background-color 1s, color 1s;}
.blockLinks a:hover{color:#fff;background-color:#626267; border: solid 3px #626267; }


.DW_Gold{background-color:#a77d64}
.DW_Aqua{background-color:#009ba7}
.DW_Purple{background-color:#7b4b76}
.DW_Blue{background-color:#001344}

.DW_Gold .carousel-caption.innerpages{background-color:#a77d6490}
.DW_Aqua .carousel-caption.innerpages{background-color:#009ba790}
.DW_Purple .carousel-caption.innerpages{background-color:#7b4b7690}
.DW_Blue .carousel-caption.innerpages{background-color:#325da590}
/* NAVIGATION */
	#menuwrap{position:relative; width:100%; display:block; }
	#menuholder{float:left; position:relative; top:8px;}
	/* Primary navigation */
	.header .inner .unit {
		position: relative; /* used to position the main navigation */
	}
	.header .primary ul {
		position:relative;
		
		bottom:0;
		right:0; /* positions the main navigation */
	}
	.header .primary li {
		display:inline-block;
	    position: relative;
	    margin-right:14px;
	}
	.header .primary li a {
	    color: #fff;
	    font-size: 0.875rem;
	    line-height:1rem;
		font-family: 'Montserrat', Verdana, Helvetica, Arial, sans-serif;
	    padding: 4px;
	    font-weight: 200;
	    display: block;
		text-transform:capitalize;
	}
	.header .primary li.submenu:after {
	    content: ''; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */
	    display: block;
	    position: relative;
		background:url('../images/menu-arrow-drop.png');
		background-size:cover;
		width:44.5px;	
	    height:9.5px;
	    color: #fff;
		left:50%;
		margin-left:-22.5px;
	    text-align: center;

	}	
	.header .primary li:hover a {

	}
	
	.header .primary #coolMenu ul li:hover a {

	}
	
	.header .primary #coolMenu ul li a {
			    color:  #fff;
			    border-bottom: none;
	}
	.header .primary li.section a,
	.header .primary li.current a {

	}
	#coolMenu{ /* IE6 needs this */ position:relative; list-style:none; display:block; height:28px; z-index: 9999; }
	#coolMenu #SubCool.fullMenu{background-color:#fff;  }	
	#coolMenu #SubCool.fullMenu .fullMenuInner{background-color:#fff;}
	#coolMenu #SubCool.fullMenu li{border-bottom:0;}
	#coolMenu #SubCool li, #coolMenu #SubCool.fullMenu li a{background-color:#fff; color:#00457d;}
	#coolMenu #SubCool li, #coolMenu #SubCool.fullMenu li a:hover{ color:#000;}	
	#coolMenu li.readybuilt .leftMenuFloat{width:50%; float:left; background-color:#fff; padding:10px; }
	#coolMenu li.readybuilt .rightFloatMenu{width:50%; float:right; background-color:#fff; padding:10px;}
	#coolMenu li.readybuilt .fullMenu h3{font-size:1.125rem; line-height:1.125rem;}
	#coolMenu li.readybuilt .leftMenuFloat img{width:100%;}
	#coolMenu li.readybuilt li{}
	#coolMenu .leftFloatMenuInner{border-right:solid 1px #ccc;}
	#coolMenu .leftFloatMenuInner, #coolMenu .rightFloatMenuInner  {padding:10px 20px;}
	
	#coolMenu li.readybuilt{position:static;}
	#coolMenu li{position:relative; display:inline-block; }
	#coolMenu li.submenu { transition: all 0s ease;}
		

	#coolMenu li ul li { 
		display: block; 
		line-height:0.75rem;
		text-decoration: none; 
		border-bottom:solid 1px #ffffff80;
		text-align:left;
		list-style: none;
		margin-right:0;
		float:none;
		min-width:250px;
		} 

	#coolMenu ul {     
		position: absolute;
		top:24px;
		left:0;
		width:auto;
		display: none; 
		z-index: 9999;
		float:none;
		} 
	
		#coolMenu ul li a {  
			color:#fff;
			padding: 10px;
			background-color:#58595B;

			} 
	
		#coolMenu li:hover ul {  
			transition-delay: 2s; 
			 -webkit-transition-delay: 2s; 	
			display: block; 
			
			
			} 
			
	.socialLinks{color:#fff; float:right;  padding:10px; font-size:0.875rem;}
	.socialLinks .fa-brands{ padding:0 0 0 20px; font-size:1.125rem; }
 
 .pagination {
  display: inline-block;
  margin:30px auto;
}

.pagination li {
display: inline;	
  color: black;
  float: left;
  margin-right:10px;	
  text-decoration: none;
  
}
.pagination li a {
	border-radius:50%;
	border:solid 2px #787b89; 	
    color: #787b89;
    float: left;
	height:25px;
	width:25px;
	font-size:11px;
	line-height:22px;
	text-decoration: none;
	font-weight:600;
}
.pagination li.active a {
	color:#fff;
	background-color:#787b89;
}
.pagination li:hover a {

	background-color:#787b89;
	color:#fff;

}

/* Carousel */
.imageSlider{position:relative;}
.carousel{background-color: #383839;}
.carouselMobileContent{display:none;}

.carouselMobileContent p{margin-bottom:0;}
.imageSlider .videoEmbed {
    width: 100%;
    height: 0;
    padding-bottom: 51%;
    position: relative;
	background:url('../images/pic-header2.jpg');
	background-size:cover;
	background-repeat:no-repeat;
}
.imageSlider .videoEmbed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% ! Important;
    height: 100%;
    z-index: 4;
}
.carousel .carousel-caption.mainhomeslider{position:relative; left:0; right:0; width:100%; bottom:0; z-index:4; line-height:0; padding:0}
.carousel .carousel-caption.mainhomeslider{position:relative; left:0; right:0; width:100%; bottom:0; z-index:4; line-height:0; padding:0}
.carousel .carousel-caption{position:absolute; left:0; right:0; width:100%; bottom:0; z-index:4; line-height:0; padding:0}
.imageSlider .carousel-caption.mainhomeslider .triangle {
	
 width: 100%;
  height: 220px;
  position:absolute;
  left:0;
  top:-200px;
  background-color: #383839;
  /* Points: Top-Center (50% 0%), Bottom-Right (100% 100%), Bottom-Left (0% 100%) */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); z-index:5;
  padding-top:60px;
  border:solid 1px #383839; 
  will-change: transform;
  
}
.carousel .triangle .callout {width:50%; margin:0 auto; line-height:0;border:solid 1px #383839; }
.carousel .headerunder{padding:20px 30px; background: #383839;}
.carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3, .carousel .carousel-caption h4, .carousel .carousel-caption p{color:#fff; }
.carousel .carousel-caption h1{font-size:3rem; line-height:2.5rem; margin-bottom:20px; text-transform:uppercase; }
.carousel .carousel-caption h3{font-size:1.25rem; line-height:2rem}
.HomePage .carousel .carousel-caption h3{font-size:1.25rem; line-height:2rem; margin-bottom:10px;}
.headerunder{background-color: #383839; min-height:100px; position:relative;}
.headerunderinner{width:60%; margin:0 auto;}
.headerunderinner .blockLinks{text-align:center;}
.headerunderinner .blockLinks a{border: solid 3px #fff; color:#fff;}
.blockLinks .blockLink{display:inline-block}
.blockLinks .blockLink{margin-left:10px; margin-right:10px;}
.headerunder .headerunderfern{position:absolute; width:10%; right:10px; top:20px;}
.headerunder .headerundercerts{position:absolute; width:10%; left:10px; top:20px;}
.headerunder .headerunderfern img, .headerunder .headerundercerts img{width:100%;}
.headerImage img {width:100%; }
.SubSuccess{ background-color: #c1d72f; padding:10px 30px; color:#fff; font-size:1rem;}
.SubRepeat{ background-color: #c1d72f; padding:10px 30px; color:#fff; font-size:1rem;}

.carousel-caption.innerpages{width:400px; top:0; bottom:0; background-color:#38383995; padding:30px; display:grid;  align-items: center;  }

.ShowHomeHolder .carousel-caption.innerpages, .ShowHomePage .carousel-caption.innerpages{background-color:#38383995}
.carousel-caption.innerpages .headerContent{position:relative;}


.carousel-caption.innerpages .triangle { width: 400px; margin:0 auto; height: 80px; position:absolute; bottom:0; 
  background-color: #e7e6e8; /* Points: Top-Center (50% 0%), Bottom-Right (100% 100%), Bottom-Left (0% 100%) */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); z-index:5;
  padding-top:60px;
  border:solid 1px #e7e6e8;will-change: transform;  }
  .BlockPage .carousel-caption.innerpages .triangle, .ContactPage .carousel-caption.innerpages .triangle{background-color:#fff; border:solid 1px #fff;}
 .carousel.testimonialslide .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 60px;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
	margin-left:50%;
	margin-right:0;
}
 
.carousel.infoslide .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 20px;
    height: 20px;
	border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;	
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: 2px;
    cursor: pointer;
    background-color: transparent;
    background-clip: padding-box;
    border: 4px solid #ffffff;
    opacity: .5;
	color:#ffffff;
	line-height:20px;
    transition: opacity .8s ease;
	will-change: transform;
}
.carousel.infoslide .carousel-indicators [data-bs-target]:hover{ opacity: 1;}
.carousel.infoslide .carousel-indicators [data-bs-target].active{background-color: #ffffff; opacity: 1; color:#000;} 
  
/* InfoSlider */
span.fontwhite p{color:#fff!Important;}
.carousel.infoslide .triangleRightCallOut {position:absolute; right:0; bottom:0; width:350px; max-width:35%; line-height:0; z-index:4;}
.carousel.infoslide .infoSlideBackground{background-size:cover!important;}
.carousel.infoslide .triangleRightCallOut img{ width:100%;}
.carousel.infoslide img.infoAbsolute{position:absolute; display:none;}
.carousel.infoslide{overflow:hidden;}
.carousel-control-next, .carousel-control-prev{width:50px!Important;}
.carousel-control-prev-icon{}

.carousel-inner.infoslide{position:relative; align-items: center;}
.info.slide.carousel-caption{position:relative; background:none; left: 0;
    top:0;
	bottom:0;
    width: 100%;
    z-index: 4;
    line-height: 0;
    padding: 0 60px;
	display:grid; align-items: center;}

	.carousel-captioninner.info{ width:40%; padding:30px; margin:0; overflow:hidden; aspect-ratio:1/1 }
	.carousel-captioninner {color:#000!Important;}
	.carousel-captioninner p, .carousel-captioninner h1, .carousel-captioninner h2, .carousel-captioninner h3, .carousel-captioninner h4 {color:#000!Important; text-align:left;}
	.carousel-captioninner a.btn,.carousel-captioninner button, .carousel-captioninner input[type="submit"], .Actions .action {
	color: #000;
    background: none;
    display: inline-block;
    border-radius: 15px;
    border: solid 1px #000;
    padding: 5px 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    margin-right: 0;	
	}
/* PAGEBLOCKS */

/* Base style for the items */
/* ConstructionBlocks */
.constructionProcesses{background-color:#e7e6e8;}
.constructionProcesses.MoreBlock{background-color:#7b4b76; padding:60px 0 30px 0;}
.constructionProcesses.MoreBlock .typography h1, .constructionProcesses.MoreBlock .typography h2, .constructionProcesses.MoreBlock .typography h3, .constructionProcesses.MoreBlock .typography h4, .constructionProcesses.MoreBlock .typography h5, .constructionProcesses.MoreBlock .typography p{color:#fff;}
.DWBuildingProcessesBlock{max-width:1200px; margin:0 auto; padding-bottom:60px;}
.is-visible.slide-item {

  color: white;
  text-align:left;
  border-radius: 6px;
  background-color:#fff;
  margin-bottom:30px;
  
  /* Animation shorthand: name | duration | timing-function | delay | fill-mode */
  animation: slideIn 0.5s ease-out both;
}

/* ⏱️ Staggered delays using :nth-child */
.is-visible.slide-item:nth-child(1) { animation-delay: 0.1s; }
.is-visible.slide-item:nth-child(2) { animation-delay: 0.5s; }
.is-visible .slide-item:nth-child(3) { animation-delay: 1.0s; }
.is-visible .slide-item:nth-child(4) { animation-delay: 1.5s; }
.is-visible .slide-item:nth-child(5) { animation-delay: 2.0s; }
.is-visible .slide-item:nth-child(6) { animation-delay: 2.5s; }
.is-visible .slide-item:nth-child(7) { animation-delay: 3s; }
.is-visible .slide-item:nth-child(8) { animation-delay: 3.5s; }
.is-visible .slide-item:nth-child(9) { animation-delay: 4s; }
.is-visible .slide-item:nth-child(10) { animation-delay: 4.5s; }
.is-visible .slide-item:nth-child(11) { animation-delay: 5s; }
.is-visible .slide-item:nth-child(12) { animation-delay: 5.5s; }
.is-visible .slide-item:nth-child(13) { animation-delay: 6s; }
.is-visible .slide-item:nth-child(14) { animation-delay: 6.5s; }
.is-visible .slide-item:nth-child(15) { animation-delay: 7s; }
.is-visible .slide-item:nth-child(16) { animation-delay: 7.5s; }
.is-visible .slide-item:nth-child(17) { animation-delay: 8s; }
.is-visible .slide-item:nth-child(18) { animation-delay: 8.5s; }
.is-visible .slide-item:nth-child(19) { animation-delay: 9s; }
.is-visible .slide-item:nth-child(20) { animation-delay: 9.5s; }

/* 🎬 The Slide-In Animation */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100%); /* Starts completely off-screen to the left */
  }
  to {
    opacity: 1;
    transform: translateX(0);    /* Moves to its natural position */
  }
}
.slide-item .ProcessTable{display:grid; grid-template-columns: repeat(auto-fill, 33.33% minmax(400px, 1fr)); color:#000; }
.slide-item .ProcessTable .processDetails{padding:20px; min-height:280px;}
.constructionProcesses.MoreBlock .slide-item .ProcessTable .processDetails{padding:20px; min-height:100px;}
.constructionProcesses.MoreBlock .readMoreLink a, .constructionProcesses.MoreBlock .buttonlink.close a{color:#fff; background: none; display: inline-block; border-radius: 15px; border: solid 1px #fff;  padding: 5px 50px; margin-top: 10px; margin-bottom: 10px; text-transform: uppercase;
    letter-spacing: 1px; font-size: 13px;   margin-right: 0;}
.constructionProcesses.MoreBlock .DWBuildingProcessesBlock{padding-bottom:30px;}
.constructionProcesses.MoreBlock .processDetails h1, .constructionProcesses.MoreBlock .processDetails h2, .constructionProcesses.MoreBlock .processDetails h3, .constructionProcesses.MoreBlock .processDetails h4, .constructionProcesses.MoreBlock .processDetails h5, .constructionProcesses.MoreBlock .processDetails p{color:#333333;}
.constructionProcesses.MoreBlock .typography h2{margin-bottom:1rem;}
.slide-item .processImage{background-size:cover; background-repeat:no-repeat; line-height:0}
.slide-item .ProcessTable .typography h2{margin-bottom:10px;font-size:1.8rem; }
.slide-item .ProcessTable .typography h3{font-size:1.6rem; line-height:1.6rem; margin-bottom:10px; font-weight:400}
.slide-item .ProcessTable .typography h4{font-size:1.4rem; line-height:1.4rem; margin-bottom:20px; font-weight:400;}
.slide-item .ProcessDetails h5{background-color:#383839; color:#fff; padding:5px;}
.typography .slide-item .processDetails h2{margin-bottom:10px;font-size:1.6rem; }
.typography .slide-item .processDetails h3{font-size:1.6rem; line-height:1.4rem; margin-bottom:10px; font-weight:300}
.typography .slide-item .processDetails h4{font-size:1.4rem; line-height:1.4rem; margin-bottom:10px; font-weight:300;}
.typography .slide-item .processDetails h5{background-color:#383839; color:#fff; padding:5px;}
/* FEATURED PLANS */

.featuredProperty{background-color:#e7e6e8; padding:40px 0 0 0}
.featuredProperty .inner{max-width:1400px;}
.featuredProperty .PropertySearchForm{clear:both; margin-bottom:20px;}
.featuredProperty .featuredPropertiesListings {display: grid; max-width:1300px; margin:0 auto;  grid-template-columns: repeat( auto-fill, minmax(420px, 1fr)); justify-content: space-evenly; color:#fff; padding: 0px; grid-gap: 0.8rem;
    row-gap: 3rem; width:100%; 
}
.featuredProperty .featuredPropertiesListings .homeplanbox{background-color:#fff;}
.homeplanbox .triangle {
 width: 26%;
  height: 20px;
  position:relative;
  left:37%; 
  /* Points: Top-Center (50% 0%), Bottom-Right (100% 100%), Bottom-Left (0% 100%) */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); z-index:5;
  padding-top:10px; 
}
/* SHOWHOME BLOCK */
.showHomeBlock{padding:60px 0;}
.showHomeBlock h2{color:#7b4b76;}
.showHomeBlock .blockLinks a{border:solid 3px #7b4b76; color:#7b4b76}
.showHomeBlock .blockLinks a:hover{background-color: #7b4b76;}
/* IMAGE LAYOUT BLOCK */
.imageLayoutBlock{display:grid; grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); line-height:0;}
.imageLayoutBlock img{width:100%;}
/* TESTIMONIALS */
.testimonialBlock{background-color:#003f45; display:grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); padding:0; position:relative; width:100%;}
.testimonialBlock .testomonialContentBlock{display:grid; align-items:center;color:#fff; padding:30px; aspect-ratio: 1.2;  }
.testimonialBlock .testimonial-carousel-caption{max-width:480px; margin:0 auto; overflow:auto;}
.testimonialBlock .testomonialImageBlock{background-size:cover; background-repeat:no-repeat;  aspect-ratio: 1.2;}
.testimonialBlock .testomonialContentBlock p{color:#fff;}
.testimonialBlock .testomonialContentBlock h2{color:#009ca7;font-weight:500;}
.testimonialBlock .testomonialContentBlock h4{color:#009ca7; font-weight:500;text-transform:uppercase; margin-top:20px;font-size:0.8rem;}
.testimonial-carousel-caption{}
.carousel.testimonialslide .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 60px;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
	margin-left:50%;
	margin-right:0;
}

.carousel.testimonialslide .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 20px;
    height: 20px;
	border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;	
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: 2px;
    cursor: pointer;
    background-color: transparent;
    background-clip: padding-box;
    border: 4px solid #009ba7;
    opacity: .5;
	color:#009ba7;
	line-height:20px;
    transition: opacity .8s ease;
}
.carousel.testimonialslide .carousel-indicators [data-bs-target]:hover{ opacity: 1;}
.carousel.testimonialslide .carousel-indicators [data-bs-target].active{background-color: #009ba7; opacity: 1; color:#fff;}
.testimonialBlock .triangle {	width: 150px; height: 30px; margin:0 auto; position:absolute; bottom:0; background-color: #009ba7; 
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); z-index:5;left:50%; transform: translateX(-50%); margin-right:75px;
  border:solid 1px #009ba7; 
  will-change: transform;
  z-index:4;

  
}

.testimonialBlock .triangleLeftCallOut {position:absolute; left:0; bottom:0; width:350px; max-width:35%; line-height:0;}
.testimonialBlock .triangleLeftCallOut img{ width:100%;}

/* BUILD WITH CONFIDENCE */
.buildwithConfidence {background-color:#1a2e58; padding-top:60px; position:relative;}
.buildwithConfidence .inner{position:absolute; width:100%; }
.confidenceIcons{display:grid;  margin:0 auto; grid-template-columns:repeat(auto-fit, minmax(50px, 115px));  justify-content: center;  }
.confidenceIcons h4.icontitle{font-size:0.7rem; color:#fff; text-transform:uppercase; line-height:0.7rem; font-weight:600}
.confidenceIconBox {padding:10px;}
.confidenceIconBox img{width:100%;}
.confidenceText{padding:30px; color:#fff;}
.confidenceText h1, .confidenceText h2, .confidenceText p{color:#fff;}
.buildwithConfidenceBottomImage{width:100%; line-height:0; padding-top:60px;}
.buildwithConfidenceBottomImage img{width:100%;}

.element.dnadesign__elemental__models__elementcontent{margin: 60px 0 0 0;}
.dynamic__elements__promos__elements__elementpromos{background-color:#F1F1F2; padding:60px 0 0 0; text-align:Center;}
.element__promos__list{display:flex; flex-wrap:wrap; justify-content: space-around; padding:60px 0;}
.element__promos__list .promobox{max-width:33.33%; flex:1; flex-shrink:1; padding:10px; min-width:260px; overflow:hidden; transition: 0.6s;}
.promolink{min-height:40px; font-size:0.75rem; line-height:2.5rem; padding:10px 0 0 0; }
.promolink a { color: #58595B;border: solid 1px #58595B;   padding: 5px 20px; text-transform: uppercase; border-radius: 25px;transition: 0.6s; }
.promolink a:hover { color: #58595B;border: solid 1px #58595B; padding: 5px 35px; text-transform: uppercase; border-radius: 25px;transition: 0.6s;}
.promolink.white a { color: #fff;border: solid 1px #fff; }
.promolink.white a:hover { color: #fff;border: solid 1px #fff;}

.element__promos__list .promobox img{width:100%; transition: 0.6s; line-height:0;}
.element__promos__list .promobox:hover{background: rgba(88, 89, 91, .1); transition: 0.6s;}
.element__promos__list .promobox:hover .promolink a{background-color: #F1F1F2; }

.mainboxes .content-container.brochurelayout{ background-color:#58595B; display:grid; grid-template-columns:50% 50%; grid-template-rows:100%; padding:0;}
.slideshow .flexslider{margin:0; max-height:550px; overflow:hidden;}
.mainboxes .content-container.brochurelayout .brochurelayoutImg{padding:0; background-size:cover; min-height:400px;}
.mainboxes .content-container.brochurelayout .brochurelayoutTxt h3{font-size:1.8rem; line-height:2.6rem;}
.mainboxes .content-container.brochurelayout .brochurelayoutTxt{padding:60px 30px; max-width:600px; color:#fff; align-self:center; justify-self:center; }
.brochurelayoutTxt h2{ color:#fff;}
.brochurelayoutTxt .brochurelink{padding:20px 0; font-size:0.75rem; line-height:0.75rem; color:#fff; }
.brochurelayoutTxt .brochurelink a{ color:#ccc; border:solid 2px #ccc; padding:5px 50px; text-transform:uppercase; border-radius: 25px;transition: 0.6s;  }
.brochurelayoutTxt .brochurelink a:hover{ color:#fff; border:solid 2px #fff; padding:5px 70px; text-transform:uppercase; border-radius: 25px;transition: 0.6s;  }


/* HOME PAGE */
.inner.mainboxes{max-width:100%; padding:0; position:relative;}
.mainboxes .content-container{max-width:100%; background:none;}
.mainboxes .content-container.readybuilt{max-width:2000px; background: #1f2428 url('../images/bkgr-home-cloud-large.jpg') no-repeat; background-position:bottom; background-size:100% auto;}
.content-container.featuredProperty .inner{padding:60px 30px; text-align:Center;   }

   

/* INVESTPAGE */


/* OURPROCESSPAGE */
.OurProcessPage .dnadesign__elemental__models__elementcontent{padding:60px 0 0 0;}
.OurProcessPage .dynamic__elements__promos__elements__elementpromos {background-color: #fff;}
.OurProcessPage .promoboxinner{padding:5px; line-height:0;}
.OurProcessPage .promoboxinner .card-body{background-color:#F1F1F2; padding:30px; }
.OurProcessPage .bookingFeaturedImages{display:grid; width:100%; grid-template-columns: 33.3333% 33.3333% 33.3333%;
    grid-template-rows: 100%;}
.OurProcessPage .bookingFeaturedImages{margin-bottom:60px;}	
.OurProcessPage .form-element__form{ background: url(../images/certs-grey-186x62.png) no-repeat; background-position: top right; background-size: 14% auto;}
.OurProcessPage .bookingFeaturedImages .bookingFeaturedImg img{width:100%;}
.OurProcessPage form{max-width:550px; margin:0 auto; float:none;}
.OurProcessPage .element__promos__list .promobox .card-body{min-height:250px;}

/* OURPROCESSSECTIONPAGE */
.inner.OurProcessSectionPage{padding:60px 30px;}
.processBlocks{width:100%; position:relative;}
.processBlockOutter{display:grid; width:100%; grid-template-columns: 50% 50%; grid-template-rows: 100%; background-color:#F1F1F2; position:relative;}
.processBlockOutter .processarrowblock{}
.processBlockOutter img.processarrow{width:80px; height:80px; z-index:99; position:absolute; left:-40px; bottom:-40px}
.processBlockOutter.reverse img.processarrow{right:-40px; left:auto;}
.processBlockFeaturedImage{background-size: cover; background-repeat: no-repeat;}
.processBlockContent{display:grid; min-height:500px; position:relative; }
.processBlockOutter.reverse .processBlockContent{order:-1; background-color:#fff; color: color:#58595B;}
.processBlockContentInner{ text-align: left; width: 100%; margin: 0; padding: 60px 30px; align-self: center; justify-self: center;}

/* TESTIMONIALPAGE */
.TestimonialPage .dnadesign__elementaluserforms__model__elementform{background-color:#F1F1F2; padding:60px 0; text-align:center;}
.TestimonialPage .dnadesign__elementaluserforms__model__elementform h2, .TestimonialPage .dnadesign__elementaluserforms__model__elementform label{color:#58595B!Important}
.TestimonialPage .dnadesign__elementaluserforms__model__elementform form input.text, .TestimonialPage .dnadesign__elementaluserforms__model__elementform form textarea{background-color:#fff; border: solid 1px #fff;}
.TestimonialPage .dnadesign__elementaluserforms__model__elementform form input[type="submit"]{ border: solid 1px #58595B; color:#58595B}

/* BROCHURELAYOUTPAGE */
.BrochureLayoutPage .inner.brochurepage{padding:60px 30px; text-align:Center;  background: url('../images/dwfern.png') no-repeat; background-position:top right; background-size:20% auto; }
.BrochureLayoutPage .featuredblock{width:100%; position:relative; display:grid; grid-template-columns:50% 50%; grid-template-rows: 100%;}
.BrochureLayoutPage .featuredblockImg {background-size:cover; background-repeat: no-repeat;}
.BrochureLayoutPage .featuredblock img.featuredAreaImg{width:100%;}
.BrochureLayoutPage .featuredblockTxt{ display:grid;background-color:#58595B; color: #fff;}
.BrochureLayoutPage .featuredblockinner{padding:10px; text-align:left; width:100%;  margin: 0;  padding: 60px 30px;  align-self: center; justify-self: center;}
.BrochureLayoutPage .reverse .featuredblockinner{text-align:right;}
.BrochureLayoutPage .featuredblock .featuredblockImg{line-height:0;}
.BrochureLayoutPage .featuredblock.reverse .featuredblockTxt{order:-1; background-color:#fff; color: color:#58595B;}
.BrochureLayoutPage .featuredblock .featuredblockImg img{width:100%;}
.BrochureLayoutPage .featuredblockinner h5, .featuredblockinner h5 a, .featuredblockinner h2, .featuredblockinner h2 a, .featuredblockinner h3, .featuredblockinner h3 a{color:#fff;}
.BrochureLayoutPage .featuredblock.reverse .boxlink a, .featuredblock.reverse .boxlink a:hover { color: #58595B; border: solid 1px #58595B;  }
.BrochureLayoutPage .featuredblock .boxlink a, .BrochureLayoutPage .featuredblock .boxlink a:hover { color: #fff; border: solid 1px #fff; }
.BrochureLayoutPage .boxlink a:hover { color: #58595B;border: solid 1px #58595B; padding: 5px 35px; text-transform: uppercase;    border-radius: 25px;transition: 0.6s;}
.BrochureLayoutPage .featuredblock.reverse .featuredblockinner h5, .BrochureLayoutPage .featuredblock.reverse .featuredblockinner h5 a, .BrochureLayoutPage .featuredblock.reverse .featuredblockinner h2, .BrochureLayoutPage .featuredblock.reverse .featuredblockinner h2 a, .BrochureLayoutPage .featuredblock.reverse .featuredblockinner h3, .BrochureLayoutPage .featuredblock.reverse .featuredblockinner h3 a, .BrochureLayoutPage .featuredblock.reverse .featuredblockinner p, .BrochureLayoutPage .featuredblock.reverse .featuredblockinner a{color:#58595B;}
.BrochureLayoutPage .featuredblockinner h5, .BrochureLayoutPage .featuredblockinner h5 a{font-size:1.625rem; line-height:1.75rem;  text-transform:uppercase;}
.BrochureLayoutPage .featuredblockinner h2, .BrochureLayoutPage .featuredblockinner h2 a, .BrochureLayoutPage .featuredblockinner h2 a:hover{color:#fff;}
.BrochureLayoutPage .featuredblockinner h2{}
.BrochureLayoutPage .featuredblockinner h3, .BrochureLayoutPage .featuredblockinner h3 a{font-size:1.125rem; line-height:1.25rem}

/* PAGEFORM */
.dnadesign__elementaluserforms__model__elementform{background-color:#e7e6e8; padding:60px 0; text-align:center;}
.ClassOurProcessPage.dnadesign__elementaluserforms__model__elementform{background-color:#e7e6e8; padding:0 0 60px 0; text-align:center;}
.ClassBlockPage.dnadesign__elementaluserforms__model__elementform{background-color:#F1F1F2; padding:60px 0 60px 0; text-align:center;}
#e36.ClassBlockPage.dnadesign__elementaluserforms__model__elementform{background-color:#58595B;; padding:60px 0 60px 0; text-align:center;}
.dnadesign__elementaluserforms__model__elementform h2, #e36.ClassBlockPage h2{color:#000;}
.ClassOurProcessPage.dnadesign__elementaluserforms__model__elementform h2, .ClassInvestPage.dnadesign__elementaluserforms__model__elementform h2, .ClassBlockPage.dnadesign__elementaluserforms__model__elementform h2{color:#58595B;}

.dnadesign__elementaluserforms__model__elementform label, #e36.ClassBlockPage label{color:#000!Important; font-weight:normal!Important; text-align:center!Important}
.ClassOurProcessPage.dnadesign__elementaluserforms__model__elementform label, .ClassBlockPage.dnadesign__elementaluserforms__model__elementform label, .ClassInvestPage.dnadesign__elementaluserforms__model__elementform label, .ClassBlockPage.dnadesign__elementaluserforms__model__elementform label{color:#58595B!Important;}
.dnadesign__elementaluserforms__model__elementform form input.text, .dnadesign__elementaluserforms__model__elementform form textarea{background-color:#fff; border: solid 1px #fff;}
.ClassOurProcessPage.dnadesign__elementaluserforms__model__elementform form input.text, .ClassBlockPage.dnadesign__elementaluserforms__model__elementform form input.text, .ClassBlockPage.dnadesign__elementaluserforms__model__elementform form textarea, .ClassOurProcessPage.dnadesign__elementaluserforms__model__elementform form textarea {background-color:#fff; border: solid 1px #fff;}
.ClassInvestPage.dnadesign__elementaluserforms__model__elementform form input.text{background-color:#E6E7E8; border: solid 1px #E6E7E8;}
.ClassOurProcessPage input[type="submit"], .InvestPage input[type="submit"], .ClassBlockPage input[type="submit"]{border: solid 1px #58595B; color:#58595B}
#e36.ClassBlockPage input[type="submit"]{color:#fff;  border-radius: 25px;     border: solid 1px #fff;
}

/* ContactPage */
.ContactPage .mainboxes{background-color:#fff; padding:60px 0 0 0;}
.ContactPage .mainboxes .content-container.brochurelayout{background-color:#fff;}
.ContactPage .mainboxes .content-container.brochurelayout h3{color:#383839}

/* Vacancies */
.VacanciesBlock{width: 33.33%; float: left; padding: 10px;}
.VacanciesBlockinner {padding: 10px; text-align: center; background: url('../images/tile-pullout-green.png'); border-radius: 0px 30px 0px 30px; }
.VacanciesBlockinner ul{}
.VacanciesBlockinner li{list-style:none;}
.JobBlockText{}
.JobBlockTextTitle{height:210px; max-height:210px;}
.JobBlockTextContent{height:250px; max-height:250px;}
.VacanciesBlockinner h2 { font-size: 1.375rem; color: #fff; line-height: 1.5rem; border-bottom: solid 1px #fff; }
a.buttonClick { background: #fff;  color: #3f3f3f; display: inline-block; border-radius: 4px; padding: 4px 15px; margin-top: 10px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; border: none; font-size: 13px; margin-right: 10px; }

.chooseusTitle {min-height:45px;}
.chooseusTitle h2{line-height:1.25rem; font-size:1.25rem; margin-bottom:10px; margin-top:10px; color: #28569b; padding-bottom:0; border-bottom:none;
 }
 
/* StaffPage */ 
.staffLayoutOutter{background-color:#F1F1F2; padding:60px 0; width:100%; position:relative;}
.staffLayout{ display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); justify-self:center; justify-items:center; max-width:100%;  }
.staffLayout .staffMember {justify-self:center; padding: 10px 20px; width:100%; margin-bottom:30px; }
.staffLayout .staffMember .staffMemberDetails{padding:20px; background-color:#fff; }}
.staffLayout .staffMember h5{font-size:0.813rem; line-height:1rem; font-weight:600;}
.staffLayout .staffMember p{margin-bottom:5px; line-height:1rem;}
.staffMemberImg{margin-bottom:0; line-height:0}
.staffMemberImg .scale-up-center {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000);
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

	@-webkit-keyframes scale-up-center {
	  0% {
		-webkit-transform: scale(0.5);
				transform: scale(0.5);
	  }
	  100% {
		-webkit-transform: scale(1);
				transform: scale(1);
	  }
	}
	@keyframes scale-up-center {
	  0% {
		-webkit-transform: scale(0.5);
				transform: scale(0.5);
	  }
	  100% {
		-webkit-transform: scale(1);
				transform: scale(1);
	  }
	}

/* MIXED */
header:after,
.main:after,
#Root:after,
.search-bar:after,
header .inner:after,
footer:after { /* clearfix */
    height: 0;
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}


.search-bar form input.action,
.header .primary li a,
.footer a { /* adds color transition when links/inputs on hover */
    -moz-transition: color 0.2s;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}


/* FOOTER */

.footer {
    color: #000;
    background: #000;
    padding: 60px 10px;
    font-size: 11px;
    line-height: 22px;
}
	.footer a {
	    color: #999;
	}
	.footer a:hover {
	    color: #B90000;
	}
	
	.footer .primary li:last-child:after {
	    content: ''; /* makes sure last nav item doesn't have a '/' following it */
	}
	.footer .arrow {
	    padding: 0 8px 0 5px;
	    color: #b80000;
	    font-size: 13px;
	}
	.footer .primary .nav-open-button {
	    display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */
	}

/* PAGE SPECIFIC LAYOUT */
	.HomePage .main{margin-top:0; padding:0; width:100%; position:relative;}
	.HomePage .row.content-container{padding:0;}

	/* Search Results */
	.typography .searchResults h1 {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	.searchResults p.searchQuery {
	    margin-bottom: 10px;
	    font-size: 15px;
	    font-weight: bold;
	}
	.searchResults ul#SearchResults {
	    padding: 0;
	    border-bottom: 1px solid #e5e5e5;
	    margin:0;
	}
		.searchResults ul#SearchResults li {
		    border-top: 1px solid #e5e5e5;
		    padding: 20px 0;
		    list-style-type: none;
		}
		.searchResults ul#SearchResults p {
		    margin-bottom: 10px;
		}
		.searchResults #PageNumbers a {
		    padding: 0 5px;
		}
		.searchResults #PageNumbers .pagination {
		   	border-bottom: 1px solid #e5e5e5;
		    padding: 20px 0;
		    display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */
		    width:100%;
		}
		.searchResults #PageNumbers .pagination span{
			display:table-cell; /* each element in the pagination div displays as a table cell */
		}
		.searchResults #PageNumbers p {
		    text-align: center;
		    padding:20px 0;
		}
		.searchResults #PageNumbers .next,
		.searchResults #PageNumbers .prev {
		    font-size: 14px;
		    padding: 0 20px;
		    display:table-cell; /* each element in the pagination div displays as a table cell */
		    vertical-align: middle;
		    border-bottom:0 !important;
		}
		.searchResults #PageNumbers .next {
		    margin-left: 15px;
		}
		.searchResults #PageNumbers .prev {
		    margin-right: 15px;
		}

/* DEVICE & RESPONSIVE LAYOUT */
.header .nav-open-button {
    display: none; /* removes the nav toggle button for desktop site */
}
#media-query-trigger {
    /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries) 
    instead to trigger the hiding/showing of nav and search in mobile mode */
    display: none;
    visibility: hidden;
}
/* BREAKPOINT 1650px */

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

}
/* BREAKPOINT 1450px */

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


}

/* BREAKPOINT 1400px */

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


}

/* BREAKPOINT 1250px */

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


}
/* BREAKPOINT 1200px */

@media only screen and (max-width: 1200px) {
.PropertySearchForm{display:none;}
.carousel .carousel-caption h1{font-size:2.6rem; line-height:2.5rem; margin-bottom:10px; text-transform:uppercase; }
.HomePage .carousel .carousel-caption h3 {font-size: 1.1rem; line-height: 1.8rem;  margin-bottom: 10px;}
.HomePage .carousel .headerunder{padding:40px 30px;}
.headerunder .headerundercerts, .headerunder .headerunderfern  {  top: 30px;}
.carousel-captioninner.info{width:50%; }
.testimonialBlock .testomonialContentBlock{display:grid; align-items:center;color:#fff; padding:60px 30px; aspect-ratio: auto;
  }
  .carousel.testimonialslide .carousel-indicators {
    position: absolute;
	width:100%;
    right: auto;
    bottom: 30px;
    left: auto;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin:0 auto;
    margin-right: 0;
}
.carousel-caption.innerpages .slideInnerContent p{font-size:0.8rem;}
.carousel-caption.innerpages .slideInnerTitle h1{font-size:2.2rem; line-height:2.5rem}
.carousel-caption.innerpages .slideInnerContent h4{font-size:1.2rem;}
.slide-item .ProcessTable {    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}
.slide-item .ProcessTable .processImage{}


/* BREAKPOINT 960px */

@media only screen and (max-width: 960px) {
	.content img {
	    max-width: 97%;
	    height: auto;
	}
	.buildwithConfidence {padding-top: 180px;}
	.carousel-caption.innerpages .slideInnerContent{display:none;}
	.carousel-caption.innerpages .headerContent{height:auto;}
	.carouselMobileContent{display:block; position:relative; width:100%; clear:both; background-color:#e7e6e8; padding:60px 30px 0 30px;}
	.carousel-caption.innerpages .slideInnerTitle h1{font-size:3rem; line-height:2.5rem}
	.carousel-caption.innerpages .slideInnerContent h4{font-size:1.375rem;}
	.infoContent{display:none;}
	.confidenceIcons h4.icontitle{display:none;}
	.confidenceIcons {grid-template-columns: repeat(auto-fit, minmax(50px, 90px));}
	.buildwithConfidence .inner { top:30px;}
  .carousel.testimonialslide .carousel-indicators {
    position: absolute;
	width:100%;
    right: auto;
    bottom: 30px;
    left: auto;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin:0 auto;
    margin-right: 0;
}
.testimonialBlock .testomonialContentBlock{ padding:80px 30px; aspect-ratio: auto;
  }
.testimonialBlock .testomonialImageBlock {aspect-ratio:1.5; background-size:fill;}  
  .testimonialBlock .triangle{display:none;}
	
}

	
/* BREAKPOINT 860px */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 860px) { 
#media-query-trigger { visibility: visible;}
.HomePage .element__promos__list .promobox{max-width:50%;}
.staffLayout{ grid-template-columns:50% 50%;}
	#menuholder{position:relative; }
	#coolMenu{position:relative; left:0; display:none; height:auto;}

	.header{height:auto}
	.header .headermenumain{float:none; }
	.header .primary li a{padding:6px 4px; font-size:0.75rem;}


	.socialLinks{position:absolute; top:10px; right:30px;}
	#coolMenu li{width:100%; display:block; }
	#coolMenu li.submenu{padding-right:0;}
	
	.tablet-nav .header .primary button.nav-open-button { /* styling and positioning of the nav toggle button */
	 z-index: 100;
	width: 26px;
	height: 26px;
	padding:1px;
	position: absolute;		
	display: block;
	cursor: pointer;
	font-family: 'WebSymbolsRegular';
	font-size: 16px;
	color: #ededed;
	float:right;
	top:-40px;
	right:0;
	border:none;
	
		}
		.tablet-nav .header .primary ul {
		    z-index: 99999;
		    position: relative;
		    display: none; /* initially hiding the navigation */
		    float: left;
		    margin: 0;
		    padding: 0;
		    white-space: normal;
		    width: 100%;
		}
		#menuholder{float:none;}
		#menuwrap{float:none; clear:both;}
		

		#coolMenu ul {   position: relative; top: 0px;}
			.tablet-nav .header .primary ul li {
			    width: 100%;
			    margin: 0;
			    padding: 0;
			    float: none; /* displays list items vertically */
			    background: none;
			    position: relative;
			}
		#coolMenu li ul li{text-align:center;}	
	#coolMenu li.readybuilt .leftMenuFloat{display:none; }
	#coolMenu li.readybuilt .rightFloatMenu{width:100%; float:none; background-color:#fff;}			
	
		#coolMenu ul li a { color: #fff; text-align: middle; padding: 10px 25px; background-color:#58595B; }	
			 .header .primary li.submenu:after  { /* creates the arrow for the primary nav links */
			    content: '\003e';
			    display: block;
			    position: absolute;
			    right: 20px;
			    top: 0px;
			    font-family: 'WebSymbolsRegular';
			    font-size: 14px;
			    color: #999;
				left:auto;
			    text-align: center;
			    vertical-align: center;
			    line-height: 38px;
				background:none;
			}
			.tablet-nav .header .primary ul li a,
			.tablet-nav .header .primary ul li.current a,
			.tablet-nav .header .primary ul li.section a { /* styling the  top level nav links */
			    padding: 10px 0 10px 22px;
			    font-weight: bold;
			    border-bottom: 1px solid #bbb;
			    color: #434343;
			    background: #e7e7e7;
			}
			.tablet-nav .header .primary ul li.current a,
			.tablet-nav .header .primary ul li.section a {
				background: #CCCCCC; /* makes background on current top level page slightly darker */
			}
			.tablet-nav .header .primary ul li a:hover {
			    color: inherit;
			}
			.tablet-nav .header .primary li.section:after,
			.tablet-nav .header .primary li.current:after {
			    display: none; /* hides the link arrow on current top level page */
			}
			.tablet-nav .tablet-nav .header nav.primary ul li {
				padding: 0;
			}
			.flexslider .sliderCallOutInner h2{font-size: 6.2vw; line-height:6.2vw}
			.content-container.featuredProperty .inner{background:none;}
}

/* BREAKPOINT 780px */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 780px) { 

	.header .mainlogo {background:#000;}
	#headerlowermenuoutter .headerlowermenu ul li a{font-size:16px;}
	.header .primary li {margin-right:8px;}
	.header .primary li a{padding:6px 5px; font-size:0.75rem;}
	.buildwithConfidence {
		
		padding-top: 400px;
	}
 .confidenceIcons {
     grid-template-columns: repeat(auto-fit, minmax(50px, 100px));
    }

	#Form_ReadyBuiltSearchForm #Form_ReadyBuiltSearchForm_MinPrice_Holder.field, #Form_ReadyBuiltSearchForm #Form_ReadyBuiltSearchForm_MaxPrice_Holder.field {width:24%;}
	#Form_ReadyBuiltSearchForm #Form_ReadyBuiltSearchForm_Bedroom_Holder, #Form_ReadyBuiltSearchForm #Form_ReadyBuiltSearchForm_Living_Holder{width:12%;}
	#Form_ReadyBuiltSearchForm #Form_ReadyBuiltSearchForm_SearchReadyBuiltArea_Holder{width:25%;}

	
	.typography h2{}
	.mainboxes .content-container.brochurelayout, .processBlockOutter {grid-template-columns: 100%; grid-template-rows: 400px auto;  }
	.mainboxes .content-container.brochurelayout.right{display: flex;
        flex-direction: column-reverse;} 
	.BrochureLayoutPage .featuredblock{grid-template-columns: 100%; grid-template-rows: 400px auto;}
	.BrochureLayoutPage .featuredblock.reverse .featuredblockTxt{order:1}	
	.processBlockContentInner, .BrochureLayoutPage .featuredblockinner, .BrochureLayoutPage .reverse .featuredblockinner{text-align:center;}


	
}

/* BREAKPOINT 640px */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 640px) { 
	body {
	    max-width: 100%;
	}
	.staffLayout{ grid-template-columns:100%;}	
	.awardblock{margin-bottom:30px; padding:10px; width:33.33%; float:left;  text-align:center; 
}
.typography .awardblock h3{margin-bottom:10px; font-size:14px; font-weight:900;}
.typography .awardblock h3{ font-size:0.75rem;}

			.openhomesimg{width:100%; float:left; padding-right:0; }

			
			.slidercallout{top:0; right:0;}
			.slidercallout h1, .slidercallout h1 a{font-size:14px;}

	

	/* Main Content */
	.main {
	    padding: 20px 0px 45px; /* decrease padding so that more content can fit on screen */
		max-width:100%;
	}


	

	
	/* Gallery */
	.carousel-indicators{display:none;}

	
	
	

	
	
	
	.footer .footerlogo{padding-left:0; padding-bottom:20px;}
	.footer .logo{padding:10px 0;}
	.footer .clientlogin{width:160px; margin:0 auto;}
	.footer .clientlogin h5 a { display:block; padding-left: 40px; background: url('../images/icon-client.png') no-repeat;
	 background-position: left; color: #fff; font-size: 14px;}	
	.footer .masterbuilderfooter{ width:100%; max-width:90px; margin:0 auto; float:none; padding:20px 0;}
	.footer .footermenuwrap { max-width: 100%;}

}

/* BREAKPOINT 570px */


@media only screen and (max-width: 570px) {
	
		.buildwithConfidence {
		
		padding-top: 600px;
	}
	.carousel-caption.innerpages .triangle {display:none;}
	
}

/* BREAKPOINT 460px */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 460px) { 

.featuredProperty .featuredPropertiesListings {display: grid; max-width:1300px; margin:0 auto;  grid-template-columns: repeat( auto-fill, minmax(300px, 1fr)); justify-content: space-evenly; color:#fff; padding: 0px; grid-gap: 0.8rem;
    row-gap: 3rem;
}
.testimonialBlock {grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
 
}
.slide-item .ProcessTable {    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.is-visible.slide-item {
 
    animation: none;
}
.buildwithConfidence {	padding-top: 700px;
	}
	
.inner{padding:0 15px}


}
/* Print Styles */

/* Based on HTML5 boilerplate print styles */
@media print {
	* {
	    background: transparent !important;
	    color: black !important;
	    box-shadow: none !important;
	    text-shadow: none !important;
	    filter: none !important;
	    -ms-filter: none !important;
	}
	a,
	a:visited {
	    text-decoration: underline
	}
	a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

	thead {
	    display: table-header-group
	}
	tr,
	img {
	    page-break-inside: avoid
	}
	img {
	    max-width: 100% !important
	}
	pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    /* Simple theme custom print styles */
	.header,
	.footer,
    .nav-open-button,
    .search-bar,
    .search-dropdown-icon,
    nav.primary {
	    display: none;
	}
}