.herobanner {
    position:relative;
    display:block;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}
.parallax__container {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    overflow:hidden;
    clip: rect(0, auto, auto, 0);
    z-index: 1;
}
.parallax__container .parallax {
    width:100%;
    height:100%;
    top:0;
    position:fixed;
    background-position:center center;
    background-repeat:no-repeat;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-size: cover;
}
.herobanner .inside {
    width:100%;
    height:100%;
    position:relative;
    padding:3rem 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.herobanner .height25 {
    min-height: calc(100vw * 0.25 + 6rem);

}
.herobanner .height33 {
    min-height: calc(100vw * 0.333 + 6rem);

}
.herobanner .height40 {
    min-height: calc(100vw * 0.4 + 6rem);

}
.herobanner .height50 {
    min-height: calc(100vw * 0.5 + 6rem);

}
.herobanner .fullscreen {
    min-height: calc(100vh - 7rem);

}

.herobanner .overlay10 {
    background-color:rgba(0,0,0,.1);
}
.herobanner .overlay20 {
    background-color:rgba(0,0,0,.2);
}
.herobanner .overlay30 {
    background-color:rgba(0,0,0,.3);
}
.herobanner .overlay40 {
    background-color:rgba(0,0,0,.4);
}
.herobanner .overlay50 {
    background-color:rgba(0,0,0,.5);
}
.herobanner .overlay60 {
    background-color:rgba(0,0,0,.6);
}
.herobanner .overlay70 {
    background-color:rgba(0,0,0,.7);
}
.herobanner .overlay80 {
    background-color:rgba(0,0,0,.8);
}
.herobanner .overlay90 {
    background-color:rgba(0,0,0,.9);
}
.herobanner .container {
    color: var(--col15);
}
.herobanner h1,
.herobanner h2 {
    margin-bottom:1rem;
    font-size: var(--font_size10);
    color: var(--col15);
    text-shadow: 1px 1px 3px rgba(0,0,0,.7);
}
.herobanner p {
    text-align: center;
    margin-bottom:2rem;
    font-size: var(--font_size06);
    color: var(--col15);
    text-shadow: 1px 1px 3px rgba(0,0,0,.7);
}
.herobanner .icon-button {
    display: flex;
    padding: 1rem;
    background-color: var(--ci001);
    border:0 solid var(--ci001);
    border-radius:2px;
    font-size: var(--font_size03);
    font-family: var(--font_bold);
    color: var(--col15);
    text-transform:uppercase;
    -moz-transition: all 0.3s, ease-in-out 0.2s;
    -webkit-transition: all 0.3s, ease-in-out 0.2s;
    -o-transition: all 0.3s, ease-in-out 0.2s;
    transition: all 0.3s, ease-in-out 0.2s;
}
.herobanner .icon-button i {
    margin-right: 0.625rem;
}
.herobanner .icon-button:hover {
    background-color: var(--gry80);
    border-color: var(--gry80);
}