/*
 * INTERRUPTERS
 */
.jb-interrupter {
    background:white;
    margin: 20px auto 20px;
    border: 1px solid rgba(0,0,0,.05);
    padding: 13px;
    text-align: center;
    display:flex;
    transition: box-shadow 0.3s ease-in-out;
}


@media (min-width: 992px) {
    .jb-interrupter {
        margin: 25px auto 25px;
    }
}

.jb-interrupter .jb-interrupter-button-wrap {
    margin:12px 0 0;
}


.jb-interrupter .btn {
    box-shadow: 1px 1px 10px rgb(0 0 0 / 15%);
    transition: box-shadow 0.3s ease-in-out;
}



.jb-interrupter .jb-interrupter-heading{
    margin-top:0;
    font-weight:800;
}

.jb-interrupter-subheading{
    font-weight:500;
}

.jb-interrupter-2-col .jb-interrupter-heading{
    margin-bottom:0;
    flex: 1 1;
}



@media (max-width: 767px) {

    .jb-interrupter{
        max-width:none;
    }

    .jb-interrupter-collapsing {
        flex-direction:column;
        align-items:center;
        gap:13px;
    }
    .jb-interrupter-collapsing .jb-interrupter-button-wrap{
        margin:0;
    }
}

@media (min-width: 768px) {
    .jb-interrupter-collapsing {
        flex-direction:row;
        gap:30px;
        text-align:left;
        justify-content:center;
        align-items: center;
    }
}



@media (min-width: 768px){

    .jb-interrupter{
        padding: 15px;
    }

    .jb-interrupter .jb-interrupter-heading {
        text-align:left;
    }

    .jb-interrupter .jb-interrupter-button-wrap {
        margin-top: 0;
    }


}
@media (min-width: 992px){

    .jb-interrupter .lead {
        font-size: 18px;
    }
}
@media (min-width: 1200px){

    .jb-interrupter .lead {
        font-size: 20px;
    }

    a.jb-interrupter:hover .btn,
    .jb-interrupter .btn:hover {
        box-shadow: 1px 1px 20px rgb(0 0 0 / 30%);
    }

    a.jb-interrupter:hover {
        box-shadow222: 1px 1px 10px rgb(0 0 0 / 30%);
    }
}

.jb-interrupter .btn {
    padding-right:.5em;
    padding-left:.5em;
}


.jb-interrupter-success {
    background: var(--jb-apple-60);
}

.jb-interrupter-success .btn {
    color: var(--jb-blueberry-90);!important;
    background-color:#fff;
}

@media (min-width: 992px) {
    .jb-interrupter-success .btn:hover {
        background-color: #f8f8f8 !important;
    }
}



.jb-interrupter-success .jb-interrupter-preheading,
.jb-interrupter-success .jb-interrupter-heading,
.jb-interrupter-success .jb-interrupter-subheading{
    color: var(--jb-blueberry-90);!important;
}


.jb-interrupter-warning {
    background:#FFD12E;
}


.jb-interrupter-warning .jb-interrupter-preheading,
.jb-interrupter-warning .jb-interrupter-heading,
.jb-interrupter-warning .jb-interrupter-subheading{
    color: var(--jb-blueberry-90);!important;
}



.jb-interrupter-warning .btn:not(.social-btn) {
    color:var(--jb-blueberry-90);
    background-color:#fff;
}



.jb-interrupter-secondary {
    background:var(--jb-secondary);;
}

.jb-interrupter-secondary .jb-interrupter-heading{
    color:white;
}
.jb-interrupter-secondary .jb-interrupter-subheading{
    color:white;
}



.jb-interrupter-secondary-darker {
    background:var(--jb-secondary-darker);;
}


.jb-interrupter-subdued {
    background:var(--jb-blueberry-20);
}

.jb-interrupter-subdued .jb-interrupter-heading,
.jb-interrupter-subdued .jb-interrupter-heading a{
    color:var(--jb-blueberry-90);
}
.jb-interrupter-subdued .jb-interrupter-heading a{
    text-decoration:underline;
}



.jb-interrupter-subdued  .btn::before {
    box-shadow: 1px 1px 10px rgb(0 0 0 / 40%);
}
@media (min-width: 768px){


    .jb-interrupter-subdued .btn:hover::before {
        box-shadow: 1px 1px 20px rgb(0 0 0 / 50%);
    }

}








.jb-interrupter-2-col{
    display:flex;
    gap:13px;
    align-items: center;
    justify-content: center;
}


.jb-interrupter-2-col .jb-interrupter-heading{
    margin:0;
    font-size:14px;
    text-align:left;
}

.jb-interrupter-2-col .jb-interrupter-subheading{
    font-size:14px;
}

.jb-interrupter-2-col .jb-interrupter-button-wrap {
    margin-top: 0;
}

.jb-interrupter-2-col .jb-interrupter-button-wrap .btn,
.jb-interrupter-narrow .jb-interrupter-button-wrap .btn {
    font-size:12px;
}


@media (min-width: 412px){


    .jb-interrupter-2-col .jb-interrupter-heading {
        font-size:16px;
    }

    .jb-interrupter-2-col .jb-interrupter-subheading{
        font-size:15px;
    }

}

@media (min-width: 768px){


    .jb-interrupter-2-col {
        gap:20px;
    }

    .jb-interrupter-2-col .jb-interrupter-heading {
        font-size:20px;
    }


    .jb-interrupter-2-col .jb-interrupter-subheading{
        font-size:18px;
    }

    .jb-interrupter-2-col .jb-interrupter-button-wrap .btn {
        font-size:14px;
    }






}



@media (min-width: 992px){

    .jb-interrupter-2-col .jb-interrupter-heading {
        font-size:20px;
    }

    .jb-interrupter-2-col .jb-interrupter-subheading{
        font-size:18px;
    }

    .jb-interrupter-2-col .jb-interrupter-button-wrap .btn {
        font-size:16px;
    }


    .jb-interrupter-narrow{
        padding:13px;
    }

    .jb-interrupter-narrow .jb-interrupter-heading {
        font-size:16px;
    }

    .jb-interrupter-narrow .jb-interrupter-button-wrap .btn {
        font-size:14px;
    }

}



.content-block-main-content > .container .jb-interrupter-w-image:first-child,
.article-content  .jb-interrupter-w-image:first-child {
    margin-top: 0;
}

.jb-interrupter-w-image {
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width:none;
    border:none;
    padding-top:1.25em;
    padding-bottom:1.25em;
    position: relative;
    overflow: hidden; /* Ensure no overflow from the absolute-positioned img */
}

.jb-interrupter .col-content-tools{
    font-size:14px;
    display:flex;
    flex-direction:column;
    text-align:center;
    justify-content:center;
    align-items:center;
    gap:1.25em;
    margin:0 auto;
    width:100%;
}


/* Ensuring content appears above the image */
.jb-interrupter-w-image > *:not(.jb-interrupter-bg-image) {
    position: relative;
    z-index: 2;
}


/* New styles for the img to act as a background image */
.jb-interrupter-w-image .jb-interrupter-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distorting aspect ratio */
    z-index: 1; /* Ensures the image stays in the background */
}

.jb-interrupter-w-image .col-content{
    line-height:1.2;
    text-align:center;
}



.jb-interrupter-w-image .jb-interrupter-preheading{
    color:white;
    font-size:1.25em;
    font-weight:700;
    text-shadow:0 0 .5em rgba(0,0,0,1);
    margin-bottom:0.125em;
}

.jb-interrupter-w-image .jb-interrupter-preheading.jb-interrupter-preheading-largest {
    font-size: calc(1.25em + 0.25em);
}

.jb-interrupter-w-image .jb-interrupter-preheading.jb-interrupter-preheading-larger {
    font-size: calc(1.25em + 0.125em);
}

.jb-interrupter-w-image .jb-interrupter-preheading.jb-interrupter-preheading-smaller {
    font-size: calc(1.25em - 0.125em);
}

.jb-interrupter-w-image .jb-interrupter-preheading.jb-interrupter-preheading-smallest {
    font-size: calc(1.25em - 0.25em);
}


.jb-interrupter-w-image .jb-interrupter-heading{
    color:#00ff66;
    text-transform:uppercase;
    font-size:2em;
    font-weight:700;
    text-shadow:0 0 .5em rgba(0,0,0,1);
    line-height:1;
    margin:.05em 0 .1875em;
}

.jb-interrupter-w-image .jb-interrupter-heading.jb-interrupter-heading-largest {
    font-size: calc(2em + 0.285em);
}
.jb-interrupter-w-image .jb-interrupter-heading.jb-interrupter-heading-larger {
    font-size: calc(2em + 0.1375em);
}

.jb-interrupter-w-image .jb-interrupter-heading.jb-interrupter-heading-smaller {
    font-size: calc(2em - 0.25em);
}

.jb-interrupter-w-image .jb-interrupter-heading.jb-interrupter-heading-smallest {
    font-size: calc(2em - 0.5em);
}

.jb-interrupter-w-image .jb-interrupter-subheading{
    color:white;
    font-size:.9125em;
    font-weight:700;
    text-shadow:0 0 .5em rgba(0,0,0,1);
    line-height:1.1;
}


.jb-interrupter-w-image .jb-interrupter-subheading.jb-interrupter-subheading-largest {
    font-size: calc(.9125em + 0.33334em);
}

.jb-interrupter-w-image .jb-interrupter-subheading.jb-interrupter-subheading-larger {
    font-size: calc(.9125em + 0.16667em);
}

.jb-interrupter-w-image .jb-interrupter-subheading.jb-interrupter-subheading-smaller {
    font-size: calc(.9125em - 0.05em);
}

.jb-interrupter-w-image .jb-interrupter-subheading.jb-interrupter-subheading-smallest {
    font-size: calc(.9125em - 0.1em);
}

.jb-interrupter-w-image .separator{
    opacity:.7;
}


.jb-interrupter-w-image .btn {
    background-color: #fff!important;
    border-top: 1px solid rgba(255,255,255,.1125);
    border-right: 1px solid rgba(0,0,0,.175);
    border-bottom: 1px solid rgba(0,0,0,.175);
    border-left: 1px solid rgba(255,255,255,.1125);
    color:var(--jb-neutral-90);
    text-shadow:none;
    box-shadow:0 0 1em rgba(0,0,0,.5);
    padding:.5em 1em;
    font-size:.9125em;
    display:flex;
    gap:.5em;
}

.jb-interrupter-w-image:hover .btn,
.jb-interrupter-w-image .btn:hover {
    color:var(--jb-neutral-90);
}



@media (min-width: 400px){

    .jb-interrupter .col-content-tools {
        font-size:16px;
    }

}


@media (min-width: 768px){


    .jb-interrupter .col-content-tools {
        gap:2.5em;
        flex-direction:row;
        text-align:left;
        justify-content:center;
        align-items:center;
        width:100%;
        font-size:17px;
    }

    .jb-interrupter .col-content {
        text-align:left;
    }

}

@media (min-width: 1200px){

    .jb-interrupter .col-content-tools {
        font-size:20px;
        gap:3em;
    }
}

@media (min-width: 1480px){

    .jb-interrupter .col-content-tools {
        font-size:22px;
    }
}






@media (min-width: 768px){

    .jb-interrupter-w-image{
        min-height: 140px;
    }

    .jb-interrupter-w-image .jb-interrupter-heading{
        margin-top:.015em;
    }

}

@media (min-width: 992px){

    .jb-interrupter-w-image{
        min-height: 160px;
    }

    .jb-interrupter-w-image .btn:hover,
    .jb-interrupter-w-image:hover .btn{
        background-color: white!important;
    }
}


@media (min-width: 1200px){

    .jb-interrupter-w-image{
        min-height: 180px;
    }
}




.jb-interrupter-adhesion-wrap{
    width:100%;
    position:fixed;
    left:0;
    margin:0;
    z-index:4000000;
    transition: bottom 0.5s ease-out; /* Add this line */
}

.jb-interrupter-adhesion-wrap-hidden{
    bottom:-1000px;
}
.jb-interrupter-adhesion-wrap .jb-interrupter{
    background-color:transparent;
    margin:0 auto;
    border:none;
    max-width:none;
    width:auto;
}



.image-and-track-button-overlay-wrap .jb-interrupter,
.jb-floating-panel .jb-interrupter{
    margin-left:0!important;
    margin-right:0!important;
}







.jb-interrupter.jb-doodads-grid {
    min-height: 200px;
}


.jb-festivals-2024-interrupter.jb-interrupter-w-image .btn,
.jb-festivals-2024-interrupter.jb-interrupter-w-image .btn:hover,
.jb-festivals-2024-interrupter.jb-interrupter-w-image .btn:active,
.jb-festivals-2024-interrupter.jb-interrupter-w-image .btn:hover:active,
.jb-festivals-2024-interrupter.jb-interrupter-w-image .btn:focus{
    background-color: var(--jb-success)!important;
    border: 1px solid var(--jb-success)!important;
    color: var(--jb-blueberry-80);
}

@media (min-width: 992px) {
    .jb-festivals-2024-interrupter.jb-interrupter-w-image .btn:hover,
    .jb-festivals-2024-interrupter.jb-interrupter-w-image:hover .btn{
        background-color: var(--jb-success-hover)!important;
        border: 1px solid var(--jb-success-hover)!important;
        color: var(--jb-blueberry-80)!important;
    }
}

.jb-festivals-2024-interrupter.jb-interrupter-w-image .jb-interrupter-heading{
    color222: var(--jb-warning);
}

.jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools{
    position: relative;
    z-index: 2;
    min-height:6em;
}
.jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::before,
.jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::before{
    background-image: url('/wp-content/uploads/festivals-recommender-2024/branding-images/JB-FestDoodads-Tickets-w-Dotted-Line-v001-Salmon.png');
    background-position: left bottom;
    width: 80px;
    height: 43px;
    top:-10px;
}

.jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::after{
    background-image: url('/wp-content/uploads/festivals-recommender-2024/branding-images/JB-FestDoodads-Plane-w-Dotted-Line-v001.png');
    background-position: right bottom;
    transform: rotate(15deg);
    width: 65px;
    height: 60px;
    left: auto;
    top:auto;
    bottom:-10px;
}


@media (min-width: 768px) and (max-width: 991px) {

    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::before{
        top:25px;
        width: 95px;
        height: 58px;
    }

    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::after{
        width: 75px;
        height: 92px;
        top:10px;
    }

    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content{
        margin-left: 110px !important;
    }

    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-tools{
        margin-right: 110px !important;
    }
}

@media (min-width: 992px) {


    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools{
        max-width:745px;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content{
        max-width:300px;
    }
    .jb-festivals-2024-interrupter.jb-interrupter-w-image .btn{
        margin-bottom:-1em;
    }
    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::before{
        top:18px;
        width: 130px;
        height: 69px;
    }

    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::after{
        width: 100px;
        height: 115px;
        top:0;
    }
}


@media (min-width: 1200px) {
    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools{
        max-width222:920px;
    }
    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content{
        max-width:340px;
    }
    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::before{
        left: -40px;
    }
    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools::after{
        right: -40px;
    }

}

@media (min-width: 1480px) {

    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content-tools{
        max-width:820px;
    }
    .jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content{
        max-width:380px;
    }

}


.jb-festivals-2024-interrupter.jb-interrupter-w-image .col-content{
    margin-left:13px;
}

.jb-festivals-2024-interrupter.jb-interrupter-w-image .jb-interrupter-preheading{
    margin-left222:-13px;
}

.jb-festivals-2024-interrupter.jb-interrupter-w-image .separator{
    margin-left:5px;
    margin-right:5px;
    opacity:.5;
}