/* ==========================================================================
   Delta Balustrades - Homepage styles for page-home-new.php
   Ported and adapted from new-html/css/style.css + new-html/css/responsive.css
   so the "New Homepage" template renders correctly under the CURRENT theme
   header.php / footer.php. Loaded only when is_front_page() is true.
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER - render the homepage header exactly like every inner page.
   app.css contains: .home header{position:absolute;top:0;left:0;right:0;
   z-index:5;background:0 0} which makes the bar transparent and pulls it out
   of the document flow. We put it back in flow with the standard dark bar.
   -------------------------------------------------------------------------- */
.home header.site-header{
	position: static;
	top: auto;
	left: auto;
	right: auto;
	z-index: auto;
	background: #434345;
}

/* --------------------------------------------------------------------------
   2. LAYOUT PRIMITIVE - the template's five .container wrappers
   -------------------------------------------------------------------------- */
.home .container{
	width: 1170px;
	max-width: calc(100% - 40px);
	margin: 0 auto;
	padding: 0;
}

/* --------------------------------------------------------------------------
   3. HERO / INTRO  (.about-content)
   -------------------------------------------------------------------------- */
.about-content{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	min-height: 726px;
	background: url(new-html/images/banner.jpg) center top no-repeat;
	background-size: cover;
	overflow: hidden;
}
.about-content > .container{
	overflow: hidden;
}
.about-content-text{
	width: 47%;
	float: right;
	margin: 300px 0 60px 0;
	padding: 45px;
	background: rgba(0,0,0,0.66);
}
.about-content-text h2{
	margin: 0;
	padding: 0 0 15px 0;
	font-size: 45px;
	line-height: 46px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.5px;
	text-align: left;
}
.about-content-text p{
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 24px;
	color: #fff;
	font-weight: 300;
}
.about-content-text p + p{
	padding-top: 15px;
}
.about-content-text a{
	color: #fff;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. OUR BUSINESS - "6 reasons to choose Delta" ACF cards (ul.slides)
   -------------------------------------------------------------------------- */
.our-business{
	display: block;
	width: 100%;
	margin: 0;
	padding: 80px 0 60px;
	background: url(new-html/images/our-business.jpg) center top no-repeat;
	background-size: cover;
}
.our-business h3{
	margin: 0;
	padding: 0 0 10px 0;
	font-size: 36px;
	line-height: 36px;
	color: #000;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}
.our-business h6{
	margin: 0;
	padding: 0 0 30px 0;
	font-size: 18px;
	line-height: 18px;
	color: #333;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
}
.our-business ul.slides{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.our-business ul.slides > li{
	display: flex;
	flex-direction: column;
	width: 29.33%;
	margin: 0 2% 45px;
	padding: 25px 25px 40px;
	list-style: none;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 15px;
	box-shadow: 0 0 5px #333;
}
.our-business ul.slides > li .icon{
	width: 100%;
	margin: 0 0 15px;
	padding: 0;
	text-align: center;
	line-height: 0;
}
.our-business ul.slides > li .icon img{
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 64px;
}
.our-business ul.slides > li h5{
	margin: 0;
	padding: 0 0 10px 0;
	font-size: 20px;
	line-height: 20px;
	color: #333;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}
.our-business ul.slides > li p{
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: normal;
	color: #333;
	font-weight: 300;
	text-align: center;
}

/* --------------------------------------------------------------------------
   5. CASE STUDIES - 3 across
   -------------------------------------------------------------------------- */
.case-studies{
	display: block;
	width: 100%;
	margin: 0;
	padding: 65px 0 50px;
	border-bottom: 1px solid #c5c5c5;
	overflow: hidden;
}
.case-studies h3,
.news h3{
	margin: 0;
	padding: 0 0 30px 0;
	font-size: 36px;
	line-height: 36px;
	color: #000;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}
.case-studies ul,
.news ul{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.case-studies ul > li{
	display: flex;
	flex-direction: column;
	width: 29.33%;
	margin: 0 2% 45px;
	padding: 0;
	list-style: none;
}
.case-studies ul > li .img{
	width: 100%;
	margin: 0 0 15px;
	padding: 0;
	line-height: 0;
	overflow: hidden;
}
.case-studies ul > li .img img{
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}
.case-studies ul > li p{
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: normal;
	color: #575757;
	font-weight: 700;
}
.case-studies ul > li p a,
.news ul > li p a,
.news ul > li h6 a{
	color: #575757;
	text-decoration: none;
}
.case-studies ul > li p a:hover,
.news ul > li p a:hover,
.news ul > li h6 a:hover{
	color: #000;
}
.view-all{
	display: block;
	float: right;
	clear: both;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: #575757;
	font-weight: 300;
	font-style: italic;
	text-decoration: underline;
}
.view-all:hover{
	color: #000;
}

/* --------------------------------------------------------------------------
   6. NEWS - 3 across
   -------------------------------------------------------------------------- */
.news{
	display: block;
	width: 100%;
	margin: 0;
	padding: 55px 0 66px;
	overflow: hidden;
}
.news ul > li{
	display: flex;
	flex-direction: column;
	width: 29.33%;
	margin: 0 2% 35px;
	padding: 0;
	list-style: none;
}
.news ul > li .img{
	width: 100%;
	margin: 0 0 15px;
	padding: 0;
	line-height: 0;
	overflow: hidden;
}
.news ul > li .img img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}
.news ul > li h6{
	margin: 0;
	padding: 0 0 8px;
	font-size: 20px;
	line-height: 1.2;
	color: #575757;
	font-weight: 700;
	text-transform: none;
	text-align: left;
}
.news ul > li .date{
	width: 100%;
	margin: 0;
	padding: 0 0 15px;
	font-size: 12px;
	line-height: 12px;
	color: #575757;
	font-weight: 300;
}
.news ul > li p{
	margin: 0;
	padding: 0 3% 15px 0;
	font-size: 16px;
	line-height: normal;
	color: #575757;
	font-weight: 300;
}
.read-btn{
	align-self: flex-start;
	margin: auto 0 0;
	padding: 0;
	font-size: 14px;
	color: #575757;
	font-weight: 300;
	text-decoration: underline;
}
.read-btn:hover{
	color: #000;
}

/* --------------------------------------------------------------------------
   7. BOTTOM CTA BAND (.btm-section)
   -------------------------------------------------------------------------- */
.btm-section{
	display: block;
	width: 100%;
	margin: 0;
	padding: 85px 0;
	background: url(new-html/images/btm-section.jpg) center top no-repeat;
	background-size: cover;
}
.btm-section ul{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.btm-section ul > li{
	display: flex;
	flex-direction: column;
	width: 50%;
	margin: 0;
	padding: 0 5%;
	list-style: none;
}
.btm-section ul > li p{
	margin: 0;
	padding: 0 0 25px;
	font-size: 17px;
	line-height: 24px;
	color: #fff;
	font-weight: 400;
	text-align: center;
}
.btm-btn{
	display: block;
	width: 185px;
	margin: auto auto 0;
	padding: 0;
	font-size: 17px;
	color: #fff;
	font-weight: 700;
	background: #000;
	border: 1px solid #6f6f6f;
	border-radius: 4px;
	text-transform: uppercase;
	line-height: 52px;
	text-align: center;
	text-decoration: none;
}
.btm-btn:hover{
	color: #fff;
	background: #6f6f6f;
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE - breakpoints carried over from new-html/css/responsive.css
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1169px){
	.home .container{
		width: 980px;
	}
	.about-content-text{
		width: 50%;
		padding: 35px;
	}
	.about-content-text h2{
		font-size: 42px;
		line-height: 42px;
	}
}

@media only screen and (max-width: 999px){
	.home .container{
		width: 737px;
	}
	.about-content{
		min-height: 650px;
	}
	.about-content-text{
		width: 65%;
		margin-top: 250px;
	}
	.our-business ul.slides > li,
	.case-studies ul > li,
	.news ul > li{
		width: 31.33%;
		margin: 0 1% 45px;
	}
	.our-business ul.slides > li{
		padding: 15px 15px 30px;
	}
	.btm-section ul > li{
		padding: 0 3%;
	}
}

@media only screen and (max-width: 767px){
	.home .container{
		width: 95%;
		max-width: 95%;
	}
	.about-content{
		min-height: 600px;
	}
	.about-content-text{
		width: 70%;
		margin-top: 200px;
		padding: 25px;
	}
	.about-content-text h2{
		font-size: 36px;
		line-height: 40px;
	}
	.our-business ul.slides > li,
	.case-studies ul > li,
	.news ul > li{
		width: 48%;
		margin: 0 1% 35px;
	}
	.case-studies ul > li .img img{
		height: 200px;
	}
	.btm-section ul > li{
		width: 100%;
		padding: 0 3% 40px;
	}
	.btm-section ul > li:last-child{
		padding-bottom: 0;
	}
}

@media only screen and (max-width: 479px){
	.about-content{
		min-height: 500px;
		background-position: center center;
	}
	.about-content-text{
		width: 100%;
		float: none;
		margin: 170px 0 40px 0;
		padding: 25px;
	}
	.about-content-text h2{
		font-size: 28px;
		line-height: 32px;
	}
	.about-content-text p{
		font-size: 16px;
		line-height: 22px;
	}
	.our-business{
		padding: 50px 0 20px;
	}
	.our-business h3,
	.case-studies h3,
	.news h3{
		font-size: 28px;
		line-height: 30px;
	}
	.our-business h6{
		font-size: 16px;
		line-height: 20px;
	}
	.our-business ul.slides > li,
	.case-studies ul > li,
	.news ul > li{
		width: 100%;
		margin: 0 0 30px;
	}
	.our-business ul.slides > li{
		padding: 20px;
	}
	.case-studies{
		padding: 40px 0 20px;
	}
	.news{
		padding: 40px 0 40px;
	}
	.case-studies ul > li .img img{
		height: 220px;
	}
	.news ul > li .img img{
		height: 180px;
	}
	.btm-section{
		padding: 50px 0;
	}
}

/* --------------------------------------------------------------------------
   9. HEADER NAVIGATION - restore the standard main menu on the homepage.
   app.css ships three rules that hide the menu and force the hamburger on
   the front page only:
       .home .mainNav{display:none!important}              (all widths)
       @media print,screen and (min-width:64em){
           :not(.home) #btn{display:none}
           .home #btn{display:block!important}
       }
   We counter the two .home rules at >64em so the homepage header matches
   every inner page: full horizontal menu, no hamburger. Nothing is changed
   below 64em, so the theme's own responsive behaviour is preserved intact
   (hamburger from 40em to 64em, exactly as on inner pages).
   -------------------------------------------------------------------------- */
@media print, screen and (min-width: 64em){
	.home header .inner .mainNav{
		display: block !important;
	}
	.home #btn{
		display: none !important;
	}
}

/* app.css also adds .home header{padding-top:30px} at >40em - it existed to
   drop the transparent overlay bar down over the hero. With the bar back in
   flow it just makes the homepage header 131px vs the 101px of every inner
   page, so it is neutralised here. */
@media print, screen and (min-width: 40em){
	.home header.site-header{
		padding-top: 0;
	}
}