.herobanner {
    width:100%;
    height:auto;
    padding: 0;
    margin: 0;
    position:relative;
    display:block;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}

.insideHero {
    width: 100%;
    height:auto;
    position: relative;
    z-index: 2;
}
.insideHero.overlay10 {
    background-color:rgba(0,0,0,.1);
}
.insideHero.overlay20 {
    background-color:rgba(0,0,0,.2);
}
.insideHero.overlay30 {
    background-color:rgba(0,0,0,.3);
}
.insideHero.overlay40 {
    background-color:rgba(0,0,0,.4);
}
.insideHero.overlay50 {
    background-color:rgba(0,0,0,.5);
}
.insideHero.overlay60 {
    background-color:rgba(0,0,0,.6);
}
.insideHero.overlay70 {
    background-color:rgba(0,0,0,.7);
}
.insideHero.overlay80 {
    background-color:rgba(0,0,0,.8);
}
.insideHero.overlay90 {
    background-color:rgba(0,0,0,.9);
}

.heroContent {
    width: var(--site_width_xl);
    min-height:100%;
    height:100%;
    padding: 4rem 0;
    margin: auto;
    position: relative;
    z-index: 5;
    display:flex;
    flex-direction: column;
}

.heroContent.contentCenter {
    text-align: center;
    justify-content: center;
    align-items: center;

}
.heroContent.contentLeft {
    justify-content: flex-start;

}
.heroContent.contentRight {
    justify-content: flex-end;
    align-items: flex-end;
}

.heroContent.hxs {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.heroContent.hs {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.heroContent.hm {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.heroContent.hl {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.heroContent.hxl {
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.heroContent.h2xl {
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.heroContent.h3xl {
    padding-top: 12rem;
    padding-bottom: 12rem;
}
.heroContent.h4xl {
    padding-top: 14rem;
    padding-bottom: 14rem;
}
.heroContent.h5xl {
    padding-top: 16rem;
    padding-bottom: 16rem;
}
.heroContent.hv25, 
.heroContent.hv33, 
.heroContent.hv50,
.heroContent.hv66, 
.heroContent.hv75, 
.heroContent.hv100 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.heroContent.hv25 {
    height: 25vh;
}
.heroContent.hv33 {
    height: 33vh;
}
.heroContent.hv50 {
    height: 50vh;
}
.heroContent.hv66 {
    height: 66vh;
}
.heroContent.hv75 {
    height: 75vh;
}
.heroContent.hv100 {
    height: calc(100vh - var(--main_top));
}

.heroContent h2 {
    max-width: 60%;
    margin-bottom:1rem;
    font-family: var(--font_headline2);
    font-size: var(--font_size12);

}
.heroContent p {
    max-width: 60%;
    font-size: var(--font_size06);
}

.textWhite h2,
.textWhite p {
    color: var(--col15);
}

.textShaddow h2, 
.textShaddow p{      
    text-shadow: 1px 1px 3px #000;
}

.heroContent .buttons {
    padding-top: 2rem;
    display: flex;
}

.heroContent .icon-button {
    display: flex;
    padding:1rem 2rem;
    background-color: var(--ci001);
    border:0 solid var(--ci001);
    font-size: var(--font_size04);
    line-height:1.125em;
    font-weight:bold;
    color: var(--col15);
    -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;
}
.heroContent .icon-button:hover {
    background-color: var(--ci002);
    border-color: var(--ci002);
}
.heroContent .icon-button i {
    font-size: var(--font_size05);
    margin-right: 0.75rem;
}

.heroContent.contentCenter .icon-button {
    margin-left: 1rem;
    margin-right: 1rem;
}

.heroContent.contentLeft .icon-button {
    margin-right: 2rem;
}
.heroContent.contentRight .icon-button {
    margin-left: 2rem;

}

.parallax__container {
    width:100%;
    height:100%;
    top:0;
    right: 0;
    bottom: 0;
    left:0;
    position:absolute;
    overflow:hidden;
    clip: rect(0, auto, auto, 0);
    z-index: 1;
}
.parallax__container .parallax {
    width: 100%;
    height:100%;
    position:absolute;
    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;
   
}