/*--- COMMON VALUES/VARIABLES -----------------------------------------*/
:root {

    /*--- neutral colors ---*/
    --neutral-dark-color:#4a4a4a; /*--- general text ---*/

    /*--- theme colors ---*/
    --theme-action-color:#007db3;
        --theme-action-hover-color:#006793;

    /*--- box styling ---*/
    --common-border-color:#9d5563;
    --common-border-radius:.7rem;

}






/*--- COMMON/BASE -----------------------------------------*/
body {padding:0 clamp(.5rem, 4vw, 2rem);font-family:'Georgia', 'Times', serif}


    /*--- headings ---*/
    h1, h2 {font-family:'Vast Shadow';font-weight:normal;color:var(--neutral-darkest-color)}
        h1 {font-size:1.4em}
            header.show h1 {font-size:1.6em}
            h1 time {font-family:'PT Sans Narrow';font-size:1.6em;font-weight:bold}
        h2 {font-size:1.6em}

    /*--- paragraph text ---*/
    p {font-size:1rem}


    /*--- forms---*/
    label {font-family:'PT Sans Narrow'}
    input:not([type='checkbox'], [type='radio']), textarea, select {border-radius:calc(var(--common-border-radius) / 2)}





/*--- BUTTONS -----------------------------*/


    /*--- special action button ---*/
    .action-button {padding:.5em 1.5em;background:linear-gradient(to right, rgba(217, 150, 7, .8), rgba(217, 150, 7, 0) .5em), linear-gradient(#d99607, #fecc0b .8em);border:calc(var(--common-border-width) * 3) solid #888;border-radius:var(--common-border-radius);box-shadow:none;font-family:'PT Sans Narrow';font-size:1.4em;text-transform:none;letter-spacing:0;text-shadow:0 0 .8em rgba(255, 255, 255, .9), 0 0 .9em rgba(255, 255, 255, .9), 0 0 1em rgba(255, 255, 255, .9);transition:box-shadow .2s}
        .action-button i {font-style:normal}
        .action-button:is(:hover, :focus) {box-shadow:0 0 .1em .05em rgba(112,31,20,.6)}




/*--- CURLY CORNER BOX -----------------------------*/
#shows-grid, .testimonials, #holder {padding:var(--common-responsive-padding);box-sizing:border-box;background-image:url(https://www.carnivalofillusion.com/images/swirl-corner-top-left.svg), url(https://www.carnivalofillusion.com/images/swirl-corner-top-right.svg), url(https://www.carnivalofillusion.com/images/swirl-corner-bottom-right.svg), url(https://www.carnivalofillusion.com/images/swirl-corner-bottom-left.svg);background-repeat:no-repeat;background-position:top left, top right, bottom right, bottom left;background-size:4em auto;background-origin:border-box;border:calc(var(--common-border-width) * 4) solid var(--common-border-color);border-radius:var(--common-border-radius)}




/*--- VIDEO ---------------------------------*/
.video {border-radius:0}

    /*--- extra video frame ----------*/
    .home-video-frame {max-width:40rem;background:url(https://www.carnivalofillusion.com/images/video-frame.svg) no-repeat;background-size:100% auto;margin:0 auto .5em;position:relative}
        .home-video-frame:after{display:block;padding:62.765957% 0 0;content:""}
        .home-video-frame .video {border:none;position:absolute;top:7%;left:2%;right:2%;margin:0}









/*--- HEADER------------------------------------------------------------------------------------------------------------------------------------*/
header.site {max-width:50rem;margin:-.5rem auto 0}


    /*--- header logo ------------*/
    header.site > div:first-child {}
        header.site > div:first-child a {aspect-ratio:100/33.1;display:block;background:url(https://www.carnivalofillusion.com/images/carnival-of-illusion-logo.jpg) no-repeat;background-size:contain;overflow:hidden}
        header.site > div:first-child a::before {display:block;padding-top:200%;content:""}
            header.site > div:first-child img {}


    /*--- header menu --------*/
    header.site ul {display:none;flex-direction:column;align-items:center;gap:.75em}

        /*--- button ---*/
        header.site li:first-child {display:none}
            header.site .action-button {padding:.4em .5em;font-size:1.1em;text-transform:uppercase}

        /*--- phone ---*/
        header.site ul li:last-child {font-family:'PT Sans Narrow';font-weight:bold;text-align:center}
            header.site ul li:last-child a {display:block;font-size:1.5em;margin:.1em auto 0}
                header.site ul li:last-child a:not(:hover, :focus) {color:var(--base-text-color)}


        @media (min-width:30em) {
            header.site ul {display:flex}
        }

        @media (min-width:50em) {
            header.site {display:grid;grid-template-columns:1fr auto;align-items:center}

                /*--- header logo ---*/
                header.site > div:first-child {grid-row:1;grid-column:1/3;margin:0 1.2rem 0 -1.2rem}
                    header.site > div:first-child a {aspect-ratio:100/28.7;background-image:url(https://www.carnivalofillusion.com/images/carnival-of-illusion-logo-alt.jpg)}

                /*--- header menu --------*/
                header.site ul {grid-row:1;grid-column:2;margin:2em .5em 0 0}

                    /*--- button ---*/
                    header.site li:first-child {display:block}
        }

        @media (min-width:56em) {
            /*--- header logo ---*/
            header.site > div:first-child {margin:0 .5rem 0 -.5rem}
        }









/*--- CONTENT AREA ----------------------------------------------------*/
main {padding:1em 0}










/*--- FOOTER ----------------------------------------------------*/
footer.site {text-align:center}

    /*--- note ---*/
    footer.site p {font-size:1rem}

    /*--- copyright ---*/
    footer.site > div:first-of-type {display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5em 1em;padding:.25rem 0 0;border-top:calc(var(--common-border-width) * 2) solid var(--neutral-dark-color);font-size:.6rem}

        /*--- copyright ---*/
        footer.site > div:first-of-type div {}

        /*--- links ---*/
        footer.site > div:first-of-type ul {display:flex}
        footer.site > div:first-of-type li:not(:last-child)::after {display:inline-block;margin:0 .5em;content:"\2022"}
            footer.site > div:first-of-type ul a {font-size:.6rem}
                footer.site > div:first-of-type ul a:not(:hover, :focus) {color:var(--neutral-dark-color)}

    /*--- WSO link ---*/
    footer.site > div:last-child {border-width:calc(var(--common-border-width) * 2);border-color:var(--neutral-dark-color);margin-top:.25rem}








/*--- EVENT LISTING -------------------------------------*/


    /*--- confidence badges ---*/
    .confidence-badges {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.25em;margin:0 0 2rem}
        .confidence-badges img {width:auto;max-height:6.7em}
    .confidence-badges + .action-button {margin:0 auto 2rem}

        /*--- ticketing images ---*/
    .ticketing-images {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.25em;margin:0 0 2rem}
        .ticketing-images img {width:auto;max-height:9em}
    .ticketing-images + .action-button {margin:0 auto 2rem}

    @media (max-width:500px) {
        .ticketing-images img {width:auto;max-height:6.7em}
	}


    /*--- event grid ---------------------*/
    #shows-grid {max-width:50em;padding-top:1.5em;padding-bottom:1.5em;color:var(--neutral-darkest-color);margin:0 auto 2rem}

        /*--- groups (month) ---*/
        #shows-grid table {padding:.5rem;border-color:var(--neutral-medium-color);font-size:1rem;font-weight:bold}

            /*--- header row ---*/
            #shows-grid th {}

                /*--- month ---*/
                #shows-grid th:nth-child(1) {font-family:'Vast Shadow';font-weight:normal;text-transform:uppercase;font-size:1.8em}

                /*--- times ---*/
                #shows-grid th:nth-child(n+2) {font-size:1.3em}

            /*--- venue groups ---*/
            #shows-grid tbody tr {background-color:#f3eff6;box-shadow:none}
                #shows-grid table:nth-of-type(even) tbody tr {background:#e3ecf6}

        /*--- date ---*/
        #shows-grid td:first-child {padding-left:calc(var(--common-padding) * 3);width:8em}

        /*--- time columns ---*/
        #shows-grid td:nth-child(n+3) {--time-column-width:5.5rem;font-family:'PT Sans Narrow', sans-serif}

            /*--- non-links ---*/
            #shows-grid td:nth-child(n+3):not(:has(a)) {font-size:1em}

        /*--- buttons ---*/
        #shows-grid table .action-button {padding:.25em;border-width:calc(var(--common-border-width) * 2);border-radius:.3em;font-size:1.25em;text-transform:uppercase;letter-spacing:-.025em}


    /*--- show more button ---*/
    #shows-grid > button:last-child {margin-top:.5rem}










/*--- TESTIMONIALS -------------------------------------*/
.testimonials {position:relative;z-index:1;margin:0 0 3rem;overflow:hidden}
    .testimonials::after {display:block;background-color:#f3eee4;position:absolute;top:4em;bottom:4em;left:4em;right:4em;z-index:-1;content:"";box-shadow:0 0 4em 2em #f3eee4}

    /*--- heading ---*/
    .testimonials h2 {}
        .testimonials h2::before {display:inline-block;width:6em;height:2.2em;padding:0 .5em;background:url(https://www.carnivalofillusion.com/images/hand-pointer-01.gif) no-repeat center;background-size:contain;content:"";vertical-align:middle}
        .testimonials p {font-size:1em}


    /*--- quotes ---*/
    .testimonials ul {display:flex;flex-wrap:wrap;gap:1em clamp(1em, 6vw, 4em);margin:0 0 1rem}
        .testimonials li {flex:1 0 15em}

            /*--- quote ---*/
            .testimonials li p {font-style:italic;margin-bottom:.5em}

                /*--- name/place---*/
                .testimonials li div {display:block;padding:0 2em 0 0;font-family:'PT Sans Narrow';font-size:.9em;text-align:right;font-style:normal}
                    .testimonials li div:before {content:"\2014\0020"}

                /*--- image---*/
                .testimonials li img {width:6em;margin:.3em auto 0;border-radius:50%}

    /*--- bottom note---*/
    .testimonials p:last-child {text-align:center}





/*--- NEWSLETTER LINK -------------------------------*/
.newsletter-link {text-align:center;font-size:1.6em;line-height:1.2em;margin:0 0 2rem}
    .newsletter-link :is(b, strong) {font-family:'Vast Shadow';font-weight:normal;text-align:center;line-height:1.2em;color:#242424}
    .newsletter-link a {display:block;font-family:'PT Sans Narrow';font-weight:normal}





/*--- QUESTIONS ---------------------------*/
.questions {}

    /*--- heading ---*/
    #faq h2 {display:flex;flex-direction:column;align-items:center;gap:0 .25em;font-size:1.4em}
        #faq h2 > strong {font-weight:normal}
        #faq h2 > strong:nth-child(2) {width:180px;height:212px;background:url(https://www.carnivalofillusion.com/images/face-flourish.gif) no-repeat center;background-size:contain}
        #faq h2 > strong:last-child {font-size:.9em}

        @media (min-width:57em) {
            #faq h2 {flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:end}
                #faq h2 > strong:is(:nth-child(1), :nth-child(3)) {padding-bottom:.75em}
        }


    /*--- inner radius box ---*/
    #faq > div {max-width:34em;padding:2em 1.2em;background:#f2ebdf;border:4px solid #d57260;box-shadow:inset 0 0 0 2px #f2ebdf, inset 0 0 0 4px #d57260;position:relative;z-index:1;margin:0 auto 1em}
        #faq > div::after {display:block;background-image:url(https://www.carnivalofillusion.com/images/inner-radius-corner-top-left.svg), url(https://www.carnivalofillusion.com/images/inner-radius-corner-top-right.svg), url(https://www.carnivalofillusion.com/images/inner-radius-corner-bottom-right.svg), url(https://www.carnivalofillusion.com/images/inner-radius-corner-bottom-left.svg);background-repeat:no-repeat;background-position:top left, top right, bottom right, bottom left;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;z-index:-1;content:""}


    /*--- list --------------*/
    #faq dl {margin-bottom:1rem}

        /*--- questions ---*/
        #faq dt {margin-bottom:.5em}
            #faq dt button {display:flex;justify-content:start;gap:.5em;padding:0;background-color:transparent;font-size:1.1em;color:var(--neutral-dark-color);font-weight:bold;text-align:left}
                #faq dt button::before {flex:0 0 auto;width:1.7em;height:.8em;background:url(https://www.carnivalofillusion.com/images/lamp-icon.gif) no-repeat center;background-size:contain;content:""}
                #faq dt button::after {display:none}

        /*--- answers---*/
        #faq dl dd {padding-left:2.5rem;font-style:italic}
            #faq dl dd p {font-size:1em;line-height:1.2}


    /*--- contact ---*/
    #faq > div > div {font-size:1.2em;text-align:center}
        #faq > div > div strong {display:block;font-size:1.2em;font-weight:bold;margin:0 auto .2em}
        #faq > div > div a {display:inline-block}
            #faq > div > div a:not(:hover, :focus) {color:var(--neutral-dark-color)}

        @media (min-width:47em) {
            #faq > div > div strong {display:table;padding:.4em 4.2em;position:relative}
                #faq > div > div strong::before, #faq > div > div strong::after {display:block;width:2.5em;height:1em;background:url(https://www.carnivalofillusion.com/images/swirl-bookends-2.svg) no-repeat left center;background-size:auto 100%;font-size:1.4em;position:absolute;top:50%;left:0;margin:-.5em 0 0;content:""}
                #faq > div > div strong::after {background-position:right center;left:auto;right:0}
        }







/*--- LOCATIONS -------------------------*/
.locations {padding:1em;background:#f3eee4;border:4px solid #67a99b;box-shadow:inset 0 0 5em 2em #fff;text-align:center;position:relative;z-index:1;margin:2em 0;overflow:hidden}
    .locations::before, .locations::after {display:block;width:1.07142857em;height:1em;background:url(https://www.carnivalofillusion.com/images/corner-flourishes.gif) no-repeat left center;background-size:auto 100%;font-size:84px;position:absolute;top:0;left:0;content:""}
        .locations::after {background-position:right center;left:auto;right:0}

    @media (max-width:37em) {
        .locations::before, .locations::after {font-size:42px}
    }

    /*--- heading---*/
    .locations h2 {padding:0 clamp(1em, 8vw, 3em);font-family:'Georgia', 'Times', serif;font-size:1.1em;font-weight:bold}

    /*--- address items---*/
    .locations ul {display:flex;flex-wrap:wrap;justify-content:space-around;gap:1.5em clamp(2em, 6vw, 4em);padding:0 clamp(0em, 5vw, 4em)}
        .locations li {flex:1 0 15em}
            .locations h3 {font-size:1.1em;text-transform:uppercase;margin-bottom:.5rem}
            .locations address {font-style:normal}







/*--- NEW SHOWS -------------------------*/
.new-shows {display:block;width:fit-content;margin:0 auto .75rem}
    .new-shows img {}








/*--- EVENT DETAILS -------------------------------------*/


/*--- badges ---*/
.order-badges {display:flex;justify-content:center;align-items:end;margin:0 0 1.5rem}
    .order-badges > :is(a, img) {min-width:0}
    .order-badges a:has(img[src*="Best-Magic-Shows"]) {}
        .order-badges img[src*="Best-Magic-Shows"] {width:11.05em}
        .order-badges img[src*="TripAdvisor"] {width:9.35em}
        .order-badges img[src*="ambassador-of-magic"] {width:8.7125em;transform:translateY(5%)}



/*--- banner/img ---*/
.order-banner {}
    .order-banner img {margin-bottom:1rem}







/*--- reamaining seats -------------*/
.remaining-seats {padding:2rem 0 0;background:url(https://www.carnivalofillusion.com/images/divider-horizontal.svg) no-repeat center top;font-family:'Vast Shadow';font-size:clamp(1.6em, 5vw, 1.8em);color:var(--neutral-darkest-color);margin-bottom:1rem}
    .remaining-seats b {font-family:'PT Sans Narrow', sans-serif;background-color:#f4e1b9}





/*--- step headings ------------------*/
#OrderAddForm h2[id] {display:flex;flex-wrap:wrap;align-items:center;gap:1rem;color:var(--neutral-dark-color)}
    #OrderAddForm h2[id]::before {padding:.15em 4.5em .15em .5em;background:url(https://www.carnivalofillusion.com/images/hand-pointers-2.gif) no-repeat right top, linear-gradient(to right, black 60%, white 60%);background-size:auto 200%;font-size:2rem;text-transform:uppercase;text-align:right;color:#ffcb05;content:"Step 1"}

        /*--- 2nd step ---*/
        #OrderAddForm #order h2[id] {visibility:hidden}
            #OrderAddForm #order h2[id]::before {visibility:visible;content:"Step 2"}

    @media (max-width:70em) {
        #OrderAddForm h2[id] {font-size:1.2em}
    }

    @media (max-width:50em) {
        #OrderAddForm h2[id] {flex-direction:column}
            #OrderAddForm h2[id]::before {font-size:1.4rem;transform:rotate(90deg);margin:4em 0}

        /*--- 2nd step ---*/
            #OrderAddForm #order h2[id] {flex-direction:column;gap:0;margin-bottom:0}
    }









/*--- SELECTED SEATS -------------------------------*/
#seats {padding:0;border:none;font-size:1em}
    #seats th {background-color:#e2d6e8;font-weight:bold;text-transform:uppercase}
    #seats tbody tr {box-shadow:none;border-radius:0}
        #seats td {background-color:#f3eff6;border-radius:0 !important;font-weight:normal}





/*--- TOTALS -------------------------------*/
#orderTotal table, .nobr button, #update-total {font-size:1em}
    #orderTotal + #update-total, #giftCertificateTotal + #update-total {margin-bottom:1rem}







/*--- ORDER -------------------------------*/
#order fieldset {padding-bottom:1rem;background-color:#c6ccd8;border-color:var(--neutral-color-darkest);border-radius:0;margin-bottom:2rem}
    #order fieldset:not(.cc-info) {border:none}
    #order legend {box-sizing:border-box;width:calc(100% + (var(--common-responsive-padding)));padding: .4em .2em .3em;background-color:#43577c;font-family:'PT Sans Narrow';font-weight:normal;letter-spacing:.05em;color:var(--neutral-lightest-color);margin:calc(var(--common-responsive-padding) * -1) calc(var(--common-responsive-padding) / -2) 1rem}
    #order fieldset :is(input, textarea) {/*padding-top:.2em;padding-bottom:.2em*/;border:none}
    #order fieldset p {font-size:.8rem}


/*--- submit button--------------------------------*/
#order .submit {padding:.3rem 0;overflow:hidden}
    #order .submit button {text-transform:uppercase;position:relative}

    @media (min-width:28em) {
        #order .submit button::before, #order .submit button::after {display:block;width:150px;height:34px;background:url(https://www.carnivalofillusion.com/images/hand-pointers-2.gif) no-repeat right top, linear-gradient(to left, #fff 90px, #000 90px);background-size:100px auto, auto 100%;content:"";position:absolute;top:.3em;left:-160px}
            #order .submit button::after {background:url(https://www.carnivalofillusion.com/images/hand-pointers-2.gif) no-repeat left bottom, linear-gradient(to right, #fff 90px, #000 90px);background-size:100px auto, auto 100%;left:auto;right:-160px}
        }


#purchase, #GiftCertificateAddForm #order, #order fieldset {box-sizing:border-box;max-width:20rem}

    /*--- footer ---------------*/
    #order_footer {}
        #order_footer h2 {font-family:'Georgia', 'Times', serif;font-weight:bold;text-transform:uppercase;color:var(--neutral-dark-color);margin-bottom:.5rem}
        #order_footer h2 + div {font-size:1.2em;text-align:center;font-weight:bold}
            #order_footer h2 + div a:not(:hover, :focus) {color:var(--neutral-dark-color)}

        /*--- signup checkbox ---*/
        #order_footer .input.checkbox input {accent-color:unset;margin-top:.1em}
        #order_footer .input.checkbox label {font-size:.8em;font-weight:bold;color:var(--neutral-medium-color)}