.hero {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
background-size: cover;
background-position: center center;
background-color: var(--color-bg);
}
.hero.full {
width: 100%;
aspect-ratio: 16/9;
}
@media only screen and (min-width: 1900px) {
.hero.full {
height: 100vh;
}
}
@media only screen and (max-width: 480px) {
.hero.full {
aspect-ratio: unset;
}
}
.hero.full .acf-innerblocks-container {
height: 100%;
z-index: unset;
}
.hero.full .acf-innerblocks-container .hero-slide {
height: 100%;
padding-bottom: 0;
}
.hero.full .acf-innerblocks-container .hero-slide video {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
padding-bottom: 0;
}
.hero.full .acf-innerblocks-container .hero-slide .hero-canvas {
max-width: 100%;
height: 100%;
z-index: 1001;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.hero.full .acf-innerblocks-container .hero-slide .hero-canvas .hero-headline {
color: var(--color-white);
text-align: center;
max-width: 100%;
margin: 0;
font-size: 3.5rem;
line-height: 3.75rem;
}
@media only screen and (max-width: 1024px) {
.hero.full .acf-innerblocks-container .hero-slide .hero-canvas .hero-headline {
font-size: 2.5rem;
line-height: 2.75rem;
}
}
@media only screen and (max-width: 767px) {
.hero.full .acf-innerblocks-container .hero-slide .hero-canvas .hero-headline {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media only screen and (max-width: 480px) {
.hero.full .acf-innerblocks-container {
padding: 0;
}
.hero.full .acf-innerblocks-container .hero-slide {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.hero.full .acf-innerblocks-container .hero-slide .hero-media {
position: relative;
aspect-ratio: 16/9;
}
.hero.full .acf-innerblocks-container .hero-slide .hero-canvas {
background-color: var(--color-brand);
padding: 20px 40px;
}
}
.hero .tns-horizontal.tns-subpixel .hero-slide,
.hero .hero-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
padding-bottom: 150px;
}
.hero .acf-innerblocks-container,
.hero .tns-outer {
z-index: 999;
max-width: 1740px;
padding: 0 60px;
width: 100%;
}
@media (max-width: 480px) {
.hero .acf-innerblocks-container,
.hero .tns-outer {
padding: 0 20px;
}
}
.hero .hero-media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
-o-object-fit: cover;
object-fit: cover;
background-repeat: no-repeat;
background-size: contain;
}
.hero .hero-media img, .hero .hero-media video {
width: auto;
height: auto;
-o-object-fit: cover;
object-fit: cover;
margin-left: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
height: auto;
}
.hero .hero-canvas {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
position: relative;
z-index: 2;
text-align: left;
color: #ffffff;
max-width: 525px;
width: 100%;
margin-right: auto;
}
.hero .hero-slider-arrow {
position: absolute;
z-index: 3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
top: calc(50% - 1.875rem);
background: rgba(244, 248, 253, 0.3);
height: 3.75rem;
width: 3.75rem;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-transition: var(--transition);
transition: var(--transition);
}
.hero .hero-slider-arrow.prev {
left: 0;
}
.hero .hero-slider-arrow.next {
right: 0;
}
.hero .hero-slider-arrow:hover {
cursor: pointer;
background: rgba(244, 248, 253, 0.4);
}
.hero .tns-nav {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0.75rem;
bottom: calc(var(--gap) * 1.5);
left: 0;
width: 100%;
z-index: 3;
}
.hero .tns-nav button {
opacity: 0.6;
display: block;
width: 0.75rem;
height: 12px;
background: transparent;
padding: 0;
-webkit-transition: var(--transition);
transition: var(--transition);
}
.hero .tns-nav button.tns-nav-active {
pointer-events: none;
}
.hero .tns-nav button:hover {
opacity: 1;
}  body:not(.wp-admin) .hero.medium {
aspect-ratio: 1920/580;
} .home .hero:before {
content: "";
background-color: #4A4A4A;
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
display: inline-block;
opacity: 0.3;
z-index: 1000;
}