@charset 'UTF-8';

:root {

    --x-small: 12px;
    --small: 14px;
    --medium: 16px;
    --large: 18px;
    --x-large: 24px;
    --title: 42px;

    --early-access: #e32a1c;
    --soundcheck: #3f3f3f;
    --side-stage-seating: #e16123;
    --meet-greet-photo-op: #000000;
    --you-pick-the-set: #e49600;
    --destination-package: #de9a2a;
    --summer-tour-lounge-pass: #772e92;

}

.section-header { cursor:default;font-family: var(--type-font);font-size: var(--title);color: var(--typewriter-red);text-align: center;text-transform:uppercase;position: relative;z-index: 100;display: block;margin: 0 auto;margin:36px auto;font-weight:900; }

.tour { display: block;position: relative;width:calc(100% - 24px);max-width:1000px;margin:0 auto; }
.tour-name { color:var(--white);font-family:var(--header-font);font-size:var(--title);text-align:center;padding: 36px 0;text-transform:uppercase; }
.tour-list-events { margin: 0 auto;width: 100%;padding: 24px 0; }

.tour-list {width: calc(100% - 24px);max-width: 1000px;margin: 12px auto; }
.tour-list-header { margin-bottom: 12px; }

.tour-list-event-state, .tour-list-event-date, .tour-list-event-details { cursor: default; }
a.tour-list-event { line-height: 150%;margin-bottom: 12px;background-color: #efefef;overflow:hidden;transition:all ease 250ms;border-radius:6px; }
a.tour-list-event:hover { background-color: #dfdfdf; }
a.tour-list-event { padding: 6px 12px 6px 6px; }
.tour-list-event-date-md { font-weight: bold;font-size: var(--large);color: var(--title-color); }
.tour-list-event-date-y { display: none; }
.tour-list-event-date-day { text-transform: uppercase;font-size: var(--large); }
.tour-list-event-venue { font-weight: bold;color: var(--link-color);font-size: var(--large); }
.tour-list-event-venue-sub { color: var(--yellow);font-size: 16px; }

.tour-list-event-supporting-artists-label {color: var(--title-color);text-transform: uppercase;font-weight: bold; }
.tour-list-event-supporting-artists { display: grid;grid-template-columns: 100px auto;align-items: baseline;font-size:var(--small); }
.tour-list-event-supporting-artists-value { font-weight: bold; }

.tour-list-event-tickets { display: grid;grid-template-columns: 1fr 1fr;grid-gap: 6px;align-items: center; }
.tour-list-event-tickets-link a:link, .tour-list-event-date-tickets-link a:visited { display: block;background-color: var(--blue);color: var(--white);padding: 6px 12px;font-weight: bold;text-transform: uppercase;text-align: center; }
.tour-list-event-tickets-link a:hover { background-color:var(--blue-hover); }

.tour-list-event-link a:link, .tour-list-event-date-link a:visited { background-color: var(--white);color:var(--blue); }
.tour-list-event-link a:hover { color:var(--blue-hover); }
.tour-list-event-link a { text-transform: uppercase;font-weight: bold;padding: 3px 12px;text-decoration: none;cursor: pointer;transition: all ease 250ms;font-size: 14px;display: block;border: 1px solid var(--blue); }
.tour-list-event-link a:link span, .tour-list-event-date-link a:visited span { color: var(--link-hover); }
.tour-list-event-link a em { font-size: var(--large); }
.tour-list-event-date { text-align: center; }
.tour-list-event-state { font-family: 'statefaceregular';font-size: var(--title);text-align: center;color: var(--link-color); }


/* EVENT */
.tour-event { width: calc(100% - 24px);margin: 12px auto;max-width: 1000px; }
/* .tour-event-navigation { display: grid;grid-template-columns: 50px auto 50px;grid-gap: 12px;margin-bottom: 12px;align-items: center; } */
.tour-event-navigation-spacer, .tour-event-navigation-empty { background-color: var(--white);height: calc(100% - 24px);border-radius: 6px;padding: 12px; }
.tour-event-navigation-forward, .tour-event-navigation-back { height:100%; position:relative; }
.tour-event-navigation-forward i, .tour-event-navigation-back i { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }
.tour-event-navigation-forward a:link, .tour-event-navigation-forward a:visited, .tour-event-navigation-back a:link, .tour-event-navigation-back a:visited { font-size: 24px;background-color: var(--light-grey);display: block;border-radius: 6px;height: calc(100% - 24px);padding: 12px;text-align: center; text-transform: uppercase;font-weight: bold;}
.tour-event-artists a:link, .tour-event-artists a:visited { color: var(--link-color);font-weight: bold;text-transform: uppercase;font-size: var(--large); }
.tour-event-tour-name a:link, .tour-event-tour-name a:visited {line-height: 150%;font-size: var(--large); }
.tour-event-experiences-items { background-color: #efefef; border-radius: 6px; padding: 12px;margin-bottom:48px; }

.tour-event-header { display: grid;grid-template-columns: 200px auto;grid-gap: 12px;align-items: center; }

.tour-event-venue-map { height: 100px;border-radius: 6px;overflow: hidden; }
.tour-event-venue-map iframe { width: 100%;height: 100%; }

.tour-event-date { font-size: var(--large);font-weight: bold;color: var(--title-color); }
.tour-event-venue-name { font-size: var(--title);font-weight: bold;font-family: var(--type-font);color: var(--typewriter-red);margin: 6px 0; }
.tour-event-venue-address { font-size: var(--large);font-family: var(--basic-font);font-weight: bold; }

.tour-event-acknowledgement-header { font-family: var(--header-font);font-size: var(--title);text-align: center;color: var(--title-color);background-color: var(--white);border-radius: 6px;padding: 12px;margin-bottom: 12px; }
.tour-event-acknowledgement-desc { padding: 12px;margin-bottom: 12px;font-size: var(--large);line-height: 150%;text-align: center;background-color: var(--white);border-radius: 6px; }
.tour-event-acknowledgement-desc a { font-size:var(--large); }
.tour-event-acknowledgement-desc p:not(:last-child) { margin-bottom: 12px; }
.tour-event-acknowledgement-submit { text-align: center; }
.tour-event-acknowledgement-submit button { font-size: var(--large);padding: 12px 24px;cursor: pointer;transition: all ease 250ms; }

.error-message { grid-column-start: 1; grid-column-end: span 3; text-align: right; }
.error-message, .error-message a { font-size: 18px; }

/* EVENT EXPERIENCE */

.tour-event-experiences-items.empty { text-align: center;font-style: italic;font-size: var(--large);margin-bottom: 96px; }
.tour-event-experiences-items.empty a { font-size: 18px !important; }

.skip-the-line-entry-pass-color { color: var(--early-access); }
.soundcheck-pass-color { color:  var(--soundcheck); }
.side-stage-seating-pass-color { color:  var(--side-stage-seating); }
.summer-tour-lounge-pass-color { color:  var(--summer-tour-lounge-pass); }
.destination-package-color { color:  var(--destination-package); }

.skip-the-line-entry-pass-background { background-color:var(--early-access);color:var(--white); }
.soundcheck-pass-background { background-color:var(--soundcheck);color:var(--white); }
.side-stage-seating-pass-background { background-color:var(--side-stage-seating);color:var(--white); }
.summer-tour-lounge-pass-background { background-color:var(--summer-tour-lounge-pass);color:var(--white); }
.destination-package-background { background-color:var(--destination-package);color:var(--white); }

.tour-event-experience { padding: 12px;border-radius: 6px;position: relative; }
.tour-event-experience:not(:last-child) { margin-bottom: 12px; }
.tour-event-experience.side-stage-seating-pass::before, .tour-event-experience.soundcheck-pass::before { position: absolute;width: 60px;left: 12px;height: calc(100% - 24px);top: 12px;overflow: hidden;border-top-left-radius: 6px;border-bottom-left-radius: 6px; }
.tour-event-experience-title { font-size: var(--title);font-family: var(--type-font);color:var(--typewriter-red);margin-bottom:24px;font-weight:900; }
.tour-event-experience-desc { font-size: var(--large);margin-bottom: 12px;line-height: 150%; }
.tour-event-experience-desc-items { margin-top: 12px; }
.tour-event-experience-desc-items p { margin-bottom: 12px;line-height: 150%; }
.tour-event-experience-desc-items-header { font-weight: bold; }
.tour-event-experience-desc h3 { font-family: var(--basic-font);color: var(--title-color); }
.tour-event-experience-desc ul { margin-left: 24px;font-size: var(--small);line-height: 150%; }
.tour-event-experience-add { display: grid;grid-template-columns: 30px auto 30px;align-items: center;grid-gap: 6px;text-align: center; }
.tour-event-experience-add-plus, .tour-event-experience-add-minus { height: 100%;line-height: 30px;background-color: var(--link-color);color: var(--white);border-radius: 3px;cursor: pointer;transition: all ease 250ms;text-align: center; }
.tour-event-experience-add-input input { text-align: center;width: calc(100% - 12px); }
.tour-event-experience-add-price { margin: 12px 0;font-size: var(--large);text-align: center; }
.tour-event-experience-add-button button { display: block;margin: 0 auto;font-weight: bold; }

.tour-event-experience-form { display: grid;grid-template-columns: 50% auto;grid-gap: 12px;margin-bottom: 12px;align-items:center;padding:12px;border-radius:6px; }
.tour-event-experience-form:not(:last-child) { margin-bottom:12px; }
.experience-form.tour-event-experience-form-add { display: grid;grid-template-columns: 1fr 1fr 1fr;align-items: center;grid-gap: 12px; }
.tour-event-experience-form-title { font-weight: bold;font-size: var(--large);line-height: 150%; }
.tour-event-experience-form-desc { line-height:150%;font-size:var(--large); }
.tour-event-experiences-notes.covid { padding: 12px;font-size: var(--large);line-height: 150%;color: var(--title-color); }
.tour-event-experiences-notes.covid > a { font-size: var(--large); }
.tour-event-experience-add-price span {font-size: var(--small);display: inline-block;margin-left: 6px;}

.tour-event-experience-form.destination-package-background { grid-template-columns: 1fr; }
.experience-form-options { grid-template-columns: 45% 15% 15% auto !important; }
.tour-event-experience-add-option-name { font-size: var(--large); }
.tour-event-experience-sold-out, .tour-event-experience-add-sold-out .tour-event-experience-add-option-desc { text-align: right;font-size: var(--x-large);font-weight: bold; }
.tour-event-experience-add-sold-out { display: grid;grid-template-columns: 1fr 1fr; }
.tour-list-event-experiences {
    margin-top: 12px;
}
.tour-event-acknowledgement-desc strong {
    color: var(--red);
    font-style: italic;
}
.tour-list-event-experiences-item.skip-the-line-entry-pass {
    background-color: var(--early-access);
}
.tour-list-event-experiences-item.soundcheck-pass {
    background-color: var(--soundcheck);
}
.tour-list-event-experiences-item.side-stage-seating-pass {
    background-color:var(--side-stage-seating);
}
.tour-list-event-experiences-item.summer-tour-lounge-pass {
    background-color: var(--summer-tour-lounge-pass);
}
.tour-list-event-experiences-item.destination-package {
    background-color:var(--destination-package);
}
.tour-list-event-experiences-item {
    color: var(--white);
    font-size: var(--x-small);
    padding: 0px 6px;
    border-radius: 3px;
    font-weight: bold;
    max-width:200px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
.tour-list-event-experiences-item:not(:last-child) {
    margin-bottom:3px;
}
.tour-list-event-experiences-item.soldout {
    opacity:0.3;
}
@font-face { /* FONT */
    font-family: 'statefaceregular';src: url('../fonts/StateFace-Regular-webfont.eot');src: url('../fonts/StateFace-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/StateFace-Regular-webfont.woff') format('woff'),
         url('../fonts/StateFace-Regular-webfont.ttf') format('truetype'),
         url('../fonts/StateFace-Regular-webfont.svg#statefaceregular') format('svg');font-weight: normal;font-style: normal;

}

/* EVENT PRODUCTS */
.events-product-list { display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 12px;text-align: center; }
.tile-product-title { font-size: 18px;text-transform: uppercase;font-weight: bold;margin: 12px 0; }
.tile-product-price { font-size: 18px;color: var(--grey); }
.tile-product-media { border-radius: 6px;overflow: hidden; }

@media all and ( max-width: 767px ) { /**/

    .tour-list-event { display: grid;text-align: center;background-color: var(--light-grey) !important;}
    .tour-list-event { position:relative; }
    .tour-list-event-date {display: grid;grid-template-columns: 1fr 1fr;max-width: 100px;margin: 6px auto;grid-gap: 6px; }
    .tour-list-event-state { display: none; }
    .tour-list-event-links { display: grid;grid-template-columns: 1fr;grid-gap: 6px;text-align: center;margin: 12px 0;}
    .tour-list-event-vip-options { display: grid;grid-template-columns: 1fr;grid-gap: 24px;padding: 12px; }
    .tour-list-event-supporting-artists { margin: 6px auto;max-width: 300px;grid-template-columns: 100px auto;grid-gap:12px; }
    .tour-list-event-supporting-artists-label { text-align: right; }
    .tour-list-event-supporting-artists-value { text-align: left; }

    .tour-event-navigation { grid-template-columns: 30px auto 30px; }
    .tour-event-header, .tour-event-experience-form, .experience-form.tour-event-experience-form-add { grid-template-columns: 1fr !important; }
    .tour-event-experience-add { grid-template-columns: 44px auto 44px; }
    .tour-event-experience-add-plus, .tour-event-experience-add-minus { line-height:44px;}
    .tour-event-experience-add-input input { height: calc(100% - 12px);font-size: 18px; }
    .tour-event-experience-add-input { height: 100%; }
    .tour-event-experience-add, .tour-event-experience-add-price, .tour-event-experience-add-button {
        max-width: 100%;
        margin: 0 auto;
        grid-column-start: 1;
        grid-column-end: span 3;
    }
    .error-message { text-align: center; grid-column-start: 1; grid-column-end: span 3; }
    .tour-event-experience-add-button button { font-size: 18px;padding: 12px 24px; }
    .tour-event-experience-add-option-details { text-align: center; }
    .experience-form.experience-form-options { margin-bottom: 64px; }

    .events-product-list { grid-template-columns:1fr; }
    .tour-event-navigation-forward a:link, .tour-event-navigation-forward a:visited, .tour-event-navigation-back a:link, .tour-event-navigation-back a:visited { font-size:22px; }


}
@media all and ( min-width: 768px ) { /**/

    .tour-list-event { display: grid;grid-template-columns: 45px 60px auto 200px;grid-gap: 6px;align-items: center; }
    .tour-list-event-links { display: grid;grid-template-columns: repeat(3, calc(33.333% - 4px));grid-gap: 6px;text-align: center; }
    .tour-list-event-vip-options { display: grid;grid-template-columns: repeat(3, calc(33.333% - 16px));grid-gap: 24px;padding: 36px; }

}