/*
Block Name: Hero
Description: This is a hero block, designed to be used for page headers, with various customisation options.
*/

.block-hero { position: relative; min-height: 400px; max-height: 850px;}
.block-hero .container { position: relative; z-index: 2; }

.block-hero .col{padding-top: 7.5%;}

.block-hero h1{font-size: 8.5rem;margin-bottom: 1rem;line-height: 1;}
.block-hero h3{margin-bottom: 0rem;}
.block-hero h5{font-weight: normal;margin: 1rem 0 0;}

.block-hero p{font-size: 2.5rem; margin-top:5rem}

.block-hero h1, .block-hero h2, .block-hero h3, .block-hero h4, .block-hero h5, .block-hero h6 { color: #fff; }

/* Header Buttons*/
.block-hero a.hb1 { margin-left: 0rem; background: var(--brand-4); color: var(--brand-3); }
.block-hero a.hb1:hover { background: var(--brand-3); color: var(--brand-4); }
.block-hero a.hb2 { margin-left: 2rem; }

@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; }
}