.hero {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: calc(100vh - 60px);
overflow: hidden;
}
.hero__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.hero__bg img {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__inner {
position: relative;
width: calc(100% - 40px);
height: 100%;
max-width: 1280px;
padding: 0 20px;
}
.hero__inner img {
width: 57px;
height: auto;
}
.hero__inner h1 {
font-family: "Limelight", "Poppins", cursive;
font-size: 50px;
font-weight: 400;
text-shadow: 0 3px 3px rgba(0,0,0,0.30), 0 3px 9px rgba(0,0,0,0.30);
text-transform: uppercase;
color: #fff;
text-align: center;
margin: 30px 0;
}
.hero__buttons {
flex-flow: wrap;
}
.hero__buttons .button {
margin: 5px 20px;
}
.hero__social {
position: absolute;
bottom: 10%;
right: 15%;
}
.hero__social a {
margin: 0 5px;
}
.hero__social a img {
width: 50px;
height: 50px;
}
.hero__bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
pointer-events: none;
}
.hero__bottom img {
width: 100%;
transform: translateY(15%);
}
.hero__plus {
position: absolute;
bottom: 70px;
left: 50%;
color: #fff;
transform: translateX(-50%);
}
.hero__plus::after {
content: '';
position: absolute;
top: 150%;
left: 50%;
width: 1px;
height: 60px;
background-color: #fff;
}
.hero__wave {
position: absolute;
top: 50%;
left: 50%;
width: 200%;
padding-top: 200%;
border-radius: 100%;
transform: translate(-50%, -50%);
}
.hero__wave__1 {
background-color: #fff;
}
.hero__wave__2 {
background-color: var(--green);
}
.hero__end {
position: absolute;
top: 100%;
left: 0;
width: 100vw;
height: 100px;
background-color: var(--grey);
}
.acf-block-preview .hero {
max-width: 100%;
}
.acf-block-preview .hero h1 {
color: #fff!important;
}
.acf-block-preview .hero__wave {
display: none;
}
@media only screen and (max-width: 1280px) {
.hero__plus {
color: #fff;
text-shadow: 0 0 3px rgb(0, 0, 0, 0.6);
}
.hero__plus::after {
background-color: #fff;
box-shadow: 0 0 3px rgb(0, 0, 0, 0.6);
}
}
@media only screen and (max-width: 1000px) {
.hero {
height: calc(100vh - 50px);
}  
}
@media only screen and (max-width: 800px) {
.hero__inner {
transform: translateY(-10%);
}
.hero__inner h1 {
font-size: 28px;
margin: 15px 0;
}
.hero__social {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
bottom: 20%;
right: 0;
}
.hero__bottom {
display: none;
}
.hero__social a img {
width: 30px;
height: 30px;
}
.hero__buttons .button {
padding: 5px 10px;
font-size: 14px;
}
}