.summerHero {
    border-top: 100px solid #000;
    margin:0;padding:0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.summerHero .contentCont {
    border-top: 10px solid #EBE70E;
    background: #f2f0ee;
    padding: 20px 30px 50px;
    color: #fff;
    max-width: unset;
    text-align:center
}

.summerHero .contentCont .title {
    font-size:34px;font-weight:900;line-height:1.2;
    color:#000;text-transform:none;margin-bottom:20px
}

.summerHero .description {
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 20px;
}
.summerHero .primary-theme-btn {
    font-family: "Nunito Sans", "Avenir", sans-serif;
    cursor:pointer;
    margin:0 auto
}
.summerHero .yellow {color:#faf402}
.summerHero .mobileHeroContainer {
    position:relative;
    height:50vw;
    background-size:145vw;
    background-position:-45vw -9vw;
    background-repeat:no-repeat;
}
.summerHero .primary-theme-btn {max-width:300px}

@media (max-width: 767px) {
    .summerHero > .container {padding:0;max-width:unset}
}

@media (min-width: 768px) {
    .summerHero {
        background-size:100vw;
        background-position:0 -7vw;
        height:44vw;
        padding-bottom:20px
    }
    .summerHero .mobileHeroContainer {display:none}
    .summerHero .contentCont {
        background:transparent;border-top:none;padding:20px 20px 20px 10px;width:310px;text-align:left;
        margin-top:calc(17vw - 100px);
    }
    .summerHero .contentCont .title {font-size:40px;line-height:1;letter-spacing:0;color:#fff}
    .summerHero .description {font-size:24px;line-height:32px}
    .summerHero .primary-theme-btn {margin:0 auto 0 0;padding:12px 0;max-width:260px}
}

@media (min-width: 992px) {
    .summerHero {height:41vw}
    .summerHero .contentCont {width:320px;margin-top:calc(16vw - 100px)}
    .summerHero .contentCont .title {font-size:48px;line-height:1}
    .summerHero .primary-theme-btn {max-width:290px;font-size:17px}
}

@media (min-width: 1279px) {
    .summerHero {height:39vw}
    .summerHero .contentCont {width:350px}
    .summerHero .contentCont .title {font-size:52px}
    .summerHero .primary-theme-btn {max-width:300px;font-size:18px}
}

@media (min-width: 1400px) {
    .section-top {height:540px}
    .summerHero .contentCont {margin-top:120px}
}
@media (max-width: 3000px) {
    .section-top {min-height:auto}
}