/*
Block Name: Hero
Description: This is a hero block, designed to be used for page headers, with various customisation options.
*/
section.block-hero{position: relative;}
.block-hero .hero-area{position: relative;}
.hero-overlay {background: rgba(0,0,0,.25); position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.block-hero .hero-area .grid{ align-items: center;}
.block-hero .container{position: relative; z-index: 2;}

.block-hero h1 { color: #fff; font-size: 3.75rem; font-weight: 600; margin-bottom: 2rem; text-shadow: 0 1rem 1rem rgba(0,0,0,.5); }
.block-hero h2 { color: #fff; font-size: 7rem; font-weight: 600; line-height: 1.1; margin-bottom: 4rem; text-shadow: 0 1rem 1rem rgba(0,0,0,.5); text-wrap-style: balance;}
.block-hero a.button { box-shadow: 0 1rem 1rem rgba(0,0,0,.5); margin: 0 1rem; }

@media (max-width: 550px) {
    .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; }
}