.banner {
    position: relative;
    margin: 0 auto 10px;
    padding-bottom: 30px;
}

.banner::after {
    content: "";
    position: absolute;
    bottom: 13px;
    left: 0;
    width: 100%;
    height: 30px;
}

.cancun_theme .banner::after,
.caribbean_theme .banner::after {
    background: url("/includes/client_public/assets/images/cancun-hr.svg")center/contain repeat-x;
}

.bacalar_theme .banner::after {
    background: url("/includes/client_public/assets/images/bacalar-hr.svg")center/contain repeat-x;
}

.chetumal_theme .banner::after {
    background: url("/includes/client_public/assets/images/chetumal-hr.svg")center/contain repeat-x;
}

.cozumel_theme .banner::after {
    background: url("/includes/client_public/assets/images/cozumel-hr.svg")center/contain repeat-x;
}

.holbox_theme .banner::after {
    background: url("/includes/client_public/assets/images/holbox-hr.svg")center/contain repeat-x;
}

.isla_mujeres_theme .banner::after,
.costa_mujeres_theme .banner::after {
    background: url("/includes/client_public/assets/images/isla-hr.svg")center/contain repeat-x;
}

.mahahual_theme .banner::after {
    background: url("/includes/client_public/assets/images/mahahual-hr.svg")center/contain repeat-x;
}

.maya_kaan_theme .banner::after {
    background: url("/includes/client_public/assets/images/kaan-hr.svg")center/contain repeat-x;
}

.carmen_theme .banner::after {
    background: url("/includes/client_public/assets/images/pdc-hr.svg")center/contain repeat-x;
}

.puerto_morelos_theme .banner::after {
    background: url("/includes/client_public/assets/images/morelos-hr.svg")center/contain repeat-x;
}

.tulum_theme .banner::after {
    background: url("/includes/client_public/assets/images/tulum-hr.svg")center/contain repeat-x;
}

.riviera_theme .banner::after {
    background: url("/includes/client_public/assets/images/riviera-maya-hr.svg")center/contain repeat-x;
}

.costa_maya_theme .banner::after {
    background: url("/includes/client_public/assets/images/costa_maya_theme-hr.svg")center/contain repeat-x;
}

.banner .img-cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 30px);
}

.banner .img-cont::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&0.75+1,0+100 */
    background: -moz-linear-gradient(left, rgba(0,0,0,0.75) 1%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.75) 1%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,0.75) 1%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

.banner .inner-panel {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.banner .inner-panel .slide-content {
    width: 100%;
    padding: 100px 15px;
}

.banner .inner-panel .slide-content.hide-text {
    height: 315px;
}

.banner .title {
    color: white;
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 20px;
}

.banner .slide-content.hide-text a,
.banner .slide-content.hide-text .title,
.banner .slide-content.hide-text .desc,
.banner .slide-content.hide-text .button-cont {
    display: none;;
}

.banner .desc {
    color: white;
    font-size: 15px;
    line-height: 25px;
    margin: 0 0 25px;
}

@media (min-width: 40.063em) {
    .banner .inner-panel .slide-content {
        padding: 175px 15px;
    }

    .banner .inner-panel .slide-content.hide-text {
        height: 390px;
    }
}

@media (min-width: 64.063em) {
    .banner {
        margin: 0 auto 100px;
    }

    .banner::after {
        height: 46px;
        bottom: 7px;
    }

    .banner .inner-panel .slide-content {
        width: 50%;
        min-width: 430px;
    }

    .banner .inner-panel .slide-content.hide-text {
        height: 450px;
    }
}
