/*
Block Name: Hero
Description: This is a hero block, designed to be used for page headers, with various customisation options.
*/
.home .block-hero {padding: 12.5rem 0;}
.block-hero { position: relative; padding: 10rem 0; overflow: hidden;}
.block-hero.overflows{overflow: visible;}
.block-hero .container { position: relative; z-index: 2; }
.block-hero.multiply svg{mix-blend-mode: multiply;}

.block-hero .grid{grid-template-columns: 1fr !important; grid-gap: 0;}

.block-hero svg{width: 52.5%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; mix-blend-mode: multiply;}

.block-hero .bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.block-hero .col{position: relative; padding-right: 50%;}
.block-hero .button{position: absolute; bottom: -4rem; left: 0;}

.block-hero h1{padding-bottom: 2rem;}
.block-hero h1 + p{margin: 0 !important;}

.block-hero h1 sup{font-size: 1rem; vertical-align: top;}

.home .block-hero h1{ text-transform: uppercase; }

/* Header Buttons*/
.block-hero a.hb1 { margin-left: 0rem; }
.block-hero a.hb2 { margin-left: 2rem; }

@media(max-width:1500px){
	.block-hero svg{width: 65%;}
}

@media (max-width: 1200px) {
	.block-hero { padding: 10rem 0; }
	.block-hero { overflow: hidden !important;}
	.block-hero svg{width: 100%;}
	.block-hero .col{padding-right: 15%;}
}


@media (max-width: 550px) {
	.block-hero svg{width: 125%;}
	.block-hero h1{font-size: 4rem;}
	.block-hero .col{padding-right: 20%;}
	.block-hero a.hb1 { margin-left: 0rem; display: block; margin-bottom: 2rem;  }
	.block-hero a.hb2 { margin-left: 0rem; display: block; }
	.header-overlay { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; }
	.block-hero .col{padding-right: 10%;}
}