/* header changes */
.page-home header .container,
#header_image {
	height: 500px;
	transition: all 0.5s ease-in-out;
}
header  #header_image {
	background-image: url(../_img/home/colourful_hero.webp);
	background-size: cover;
}
header .container #heading {
	display: none;
}
header #logo {
	top: 50%;
	transform: translateY(-50%);	
	right: 100px;
}
header #logo a {
	width: 350px;
	height: 250px;
	background-image: url(../_img/marston_logo_trans_larger.png);
}


#main_heading {
	text-align: center;
	padding: 40px 20px;
	background: #fff;
}
#main_heading h1 {
	padding-bottom: 0;
	font-weight: 300;
	font-size: 2.2em;
}

/* core_message_and_actions */
#core_message_and_actions {
	display: grid;
	grid-template-columns: 3fr 7fr; /* 30% and 70% ratio */
	column-gap: 30px;
	margin-bottom: 50px;
	 align-items: center;
	 display: block;
}
#core_message_and_actions .slimmer {
	max-width: 690px;
	margin: 0 auto;	
}
#core_message_and_actions .two_col {
	justify-content: center;	
	padding-top: 30px;
}
#core_message_and_actions .two_col p {
	margin-left: 7px; margin-right: 7px;	
}
#core_message_and_actions h2 {
	font-size: 1.9em;	
	line-height: 1.2;
	padding-bottom: 20px;
}
#core_message_and_actions h2 span {
	display: inline;
}
#core_message_and_actions h2 strong {
	color: var(--purple);
}
.two_col_grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	column-gap: 20px;
}
.panel {
	background: #fff;
	padding: 30px;	
	box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}
.panel > div p:last-of-type {
	margin-bottom: 0;	
}
#core_message_and_actions  .content .button a {
	display: block;
	text-align: center;
}

/* video bit */
#video_wrapper {
	background-color: #484848;
	padding: 90px 0;
	background-image: url(../_img/symbol_dark_grey.png);
	background-position: right bottom;
}
#video_wrapper .content {
	color: #fff;	
	line-height: 1.4;
	font-size: 0.95em;
}
#video_wrapper #video_text a {
	color: #80c4eb;
	text-decoration: underline;	
}

/* rent reviews callout */
#rent_reviews_callout {
	padding: 90px 0;
}	
#rent_reviews_callout .container {
	background-color: #fff;
	padding: 30px;
	padding-top: 50px;
	padding-bottom: 60px;
	align-items: center;
	background-image: url(../_img/home/tenancy-agreement.png);
	backgound-size: contain;
	background-position: right bottom;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
	column-gap: 100px; 
}
#rent_reviews_callout .container  .content h2 {
	font-size: 1.4em;
	padding-bottom: 10px;
	line-height: 1.3;
}
#rent_reviews_callout .container  .content p.button a {
	font-size: 1.1em;
	text-transform: uppercase;
	padding: 5px 45px !important;
}	

/* client logos */
#client_logos {
	padding: 60px 0;	
}
#client_logos h2 {
	font-size: 2em;
}
#client_logos #intro {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
		
}
.client_logos_list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.client_logos_list > div {
	padding: 30px;
}

.content .client_logos_list p {
	height: 0;
	padding-top: 60%;
	background-position: center center;
	background-size: contain;

}
.content .client_logos_list p img {
	display: none;	
}
#client_logos .tabbed_content h3 {
	display: none;	
}

@media(max-width:1800px) {
	header #logo {
		right: 40px;
	}
}
@media(max-width:1720px) {
	.page-home header .container,
	#header_image {
		height: 400px;
	}
}

@media(max-width:1630px) {
	#main_heading {
		max-width: 1300px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media(max-width:1440px) {
	.page-home header .container,
	#header_image {
		height: 300px;
	}
	header #logo {
		right: 0;
	}
}

@media(max-width: 1140px) {
	.page-home header .container,
	#header_image,
	header #logo a {
		height: 240px;
	}
	.page-home  header #logo a {
		width: 260px;
		background-size: 240px auto;
	}
}
@media(max-width:1180px) {
	#core_message_and_actions h2 {
		font-size: 1.9em;	
		line-height: 1.1;
	}
	#core_message_and_actions span,
	#core_message_and_actions strong {
		display: block;
		padding: 10px 0;
	}
	.client_logos_list {
		grid-template-columns: repeat(4, 1fr);
	}
}


@media(max-width:940px) {
	header #logo,
	#header_image {
		display: block;	
	}
	#header_image {
		background-position: -100px center;
		background-color: #fff;
	}
	
	/* global nav (top bar on mobile) - changes */
	#globalnav {
		background: none;	
		height: 0;
	}
	
	#open_nav {
		right: 20px;
		top: 10px;
		background-image: url(../_img/mob_burger_lines_black.png);
		background-color: rgba(0,0,0,0.1);
		height: 40px;
		z-index: 11;
	}
	header #logo a {
		background-position: right 90px;
	}
	#core_message_and_actions {
		grid-template-columns: 1fr;
	}
	main {
		padding-top: 20px;	
	}
	#main_heading {
		padding: 40px 20px;
	}
	#main_heading h1 {
		font-size: 1.8em;
	}

	#core_message_and_actions h2 {
		text-align: center;
		margin-bottom: 20px;
	}
	#rent_reviews_callout {
		padding: 40px 0;
	}
	#client_logos .tabbed_content {
		padding: 10px;	
	}
	
}
@media(max-width:840px) {
	.slick-prev,
	.slick-next {
		display: none !important;
	}
	#rent_reviews_callout .container  .content p.button a {
		padding: 5px 15px !important;
		text-align: center;
	}	
	.client_logos_list {
		grid-template-columns: repeat(3, 1fr);
	}
}


@media(max-width:740px) {
	

	.page-home header .container,
	#header_image,
	header #logo a {
		height: 200px;
	}
	.page-home  header #logo a {
		width: 240px;
		background-size: 200px auto;
	}

	#intro_wrapper .container {
		width: 85%;
	}
	#video_wrapper {
		padding: 40px 0;
	}
	#video_wrapper .container {
		grid-template-columns: 1fr;
		row-gap: 30px;
	}
	#video_wrapper .content {
		color: #fff;	
		line-height: 1.5;
		font-size: 1em;
	}
	#video_wrapper #video_text {
        order: 1;
    }
	
    #video_wrapper #video_video {
        order: 2;
    }
	
	/* rent reviews callout */
	#rent_reviews_callout {
		padding: 60px 0;
	}	
	#rent_reviews_callout .container {
		grid-template-columns: 1fr;
		row-gap: 70px;
		padding: 30px;
		background-size: 200px auto;
	}
	#rent_reviews_callout .container  .col2 .content {
		text-align: center;
	}

}

@media (max-width: 640px) {
	#header_image {
		background-position: -150px center;	
	}
	
	.tabbednav.nomobiletabs {
		display: none;	
	}
	#client_logos .tabbed_content h3 {
		display: block;	
		font-size: 1.5em;
		padding-top: 15px;
	}
	#client_logos .tabbed_content {
		margin-bottom: 10px;	
	}
}

@media (max-width: 600px) {
	.client_logos_list {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 540px) {
	#header_image {
		background-position: -250px center;	
		background-size: auto 200px;
	}
	.client_logos_list {
		grid-template-columns: repeat(3, 1fr);
	}
	.client_logos_list > div {
		padding: 20px;
	}
}
@media (max-width: 470px) {
	header #header_image {
		background-position: center	;
		background-size: cover;
		background-image: url(../_img/home/colourful_hero_mobile.webp);
	}
	header #logo {
		top: 20px;
		left: 0px;
		bottom: auto;
		right: auto;	
		transform: none;
	}

	header #logo a {
		height:50px;
		backdrop-filter: blur(15px);
	}
	.page-home  header #logo a {
		width: 121px;
		background-size:  auto 50px;
		background-position: center;
	}
	#open_nav {
		right: 20px;
		top: 10px;
		background-image: url(../_img/mob_burger_lines_black.png);
		background-color: rgba(255,255,255,0.5);
		height: 40px;
			backdrop-filter: blur(15px) saturate(200%);
		z-index: 11;
	}

}