/* Special Effects page exclusive CSS */

div.mfp-bottom-bar {
    display: none;
}

section.special-effects.custom-banner .banner-wrapper {
    background-image: url('https://storage.googleapis.com/giffycms-ortiz.appspot.com/images/special_effects/special_effects_page_banner.webp');
    background-position: center;
}

section.custom-banner.special-effects .breadcrumb-wrapper {
    z-index: 1;
    top: 30em;
}

@media only screen and (min-width: 1921px) {
    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 37.7em;
    }
}

@media only screen and (max-width: 1850px) {
    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 23em;
    }
}

@media only screen and (max-width: 1650px) {
    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 21.3em;
    }
}

@media only screen and (max-width: 1500px) {
    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 18.5em;
    }
}

@media only screen and (max-width: 1300px) {
    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 16em;
    }
}

@media only screen and (max-width: 525px) {

    /* Banner section */
    section.custom-banner.special-effects article.text-content h1 {
        position: relative;
        top: 2em;
    }

    section.custom-banner.special-effects article.text-content button.custom-button-style {
        position: relative;
        top: 6em;
    }

    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 18em !important;
    }
}

@media only screen and (max-width: 436px) {

    /* Banner section */
    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 18em !important;
    }
}

@media only screen and (max-width: 422px) {

    /* Banner section */
    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 17.2em !important;
    }
}

@media only screen and (max-width: 408px) {

    /* Banner section */
    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 14.4em !important;
    }
}

@media only screen and (max-width: 330px) {

    /* Banner section */
    section.custom-banner.special-effects .breadcrumb-wrapper {
        top: 11.1em !important;
    }
}