/*
Block Name: Hero Background (Image/Video)
Description: A simple hero block with a background image, or video.
*/

.block-hero-background { position: relative; overflow: hidden;}
/*.fd-swoosh { position: absolute; inset: 0 0 0 0; background: transparent url(/wp-content/uploads/homepage-swoosh-scaled.png) top left no-repeat; background-size: contain; }*/
.block-hero-background .col { position: relative; }
.block-hero-background .col:before { 
	content: "";
    position: absolute;
    inset: -25rem -14rem -25rem -49rem;
    background: transparent url(/wp-content/uploads/homepage-swoosh-scaled.png) top left no-repeat;
    background-size: contain;
    z-index: -1;
}
.block-hero-background h2 { font-size: 2.5rem; font-weight: 500; padding-right: 10%; }
.block-hero-background h1,
.block-hero-background h2,
.block-hero-background h3 { color: #fff; }
.block-hero-background h1 + a.button { margin-top: 4rem; }
.block-hero-background h2 + a.button { margin-top: 4rem; }
.block-hero-background h3 + a.button { margin-top: 4rem; }
.block-hero-background 9 + a.button { margin-top: 4rem; }


@media screen and (max-width:768px ) {
.block-hero-background .col:before {     inset: -20rem -37rem -42rem -49rem; }
}

@media screen and (max-width:576px ) {
.block-hero-background .col:before {   inset: -20rem -22rem -42rem -21rem; }
}

@media screen and (min-width:2123px ) {
.block-hero-background .col:before {   inset: -61rem -26rem -37rem -102rem; }
}