/*
Block Name: Hero
Description: This is a hero block, designed to be used for page headers, with various customisation options.
*/
.block-hero{overflow: hidden; padding-top: 0 !important; z-index: 1;}
.block-hero .hero-bg-images{position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 0;}
.block-hero .slick-list, .block-hero .slick-track{height: 100% !important;}
.block-hero .hero-area{position: relative; display: flex; justify-content: center; align-items: center;}
.block-hero .hero-area .container{z-index: 2;}
.block-hero .hero-area:before{content: ''; z-index: 1; pointer-events: none; background-color: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; bottom: 0; right: 0; backdrop-filter: blur(0.5px);}
.block-hero .hero-area.homepage{height: calc(100vh - 100px);}
.block-hero .hero-area.homepage .container{margin-top: -100px;}
.block-hero .hero-area .grid{text-align: center; padding: 5rem 0;}

.block-hero h1{font-size: 7.5rem; color: #fff;}
.block-hero h2{font-size: 3rem; color: #fff; margin: 0 auto; max-width: 75%;}

@media screen and (max-width:999px ){
    .block-hero .hero-area.homepage{height: calc(100vh - 46px);}
    .block-hero .hero-area.homepage .container{margin-top: 0;}
}