/*small screens hidden in regular stylesheet and turned on when appropriate*/

.show-on-phone {
    display: none !important;
}

.show-on-tablet {
    display: none !important;
}

.hide-on-desktop {
    display: none !important;
}

.show-on-desktop {
    display: inherit !important;
}

.show-on-small {
    display: none !important;
}


/*main nav options*/

a#offCanvas {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 100%;
    font-size: 16px;
    text-transform: uppercase;
    padding: 8px;
    color: #fff;
}

a#mobileNav {
    display: block;
    text-align: center;
    position: absolute;
    top: 54px;
    right: 20px;
    color: #666;
    padding: 9px 0;
    width: 110px;
    font-weight: bold;
    color: #fff;
}

#menuBar {
    padding: 0px 10px 0 4px;
    color: #fff;
    display: inline-block;
    width: 120px;
    position: absolute;
    top: 44px;
    right: 0px;
}

#menuBar svg {
    width: 25px;
    height: 25px;
    fill: #fff;
    margin-right: 5px;
}


/* ==================================================================================
Small Device Styles  - Landscape phone to portrait tablet  - MY MAIN BREAKING POINT
====================================================================================*/

@media only screen and (max-width: 800px) {
    .show-on-desktop {
        display: none !important;
    }
    .hide-on-desktop {
        display: inherit !important;
    }
    .show-on-small {
        display: inherit !important;
    }
    .hide-on-small {
        display: none !important;
    }
    /* .left, .right { float: none; }*/
    body {
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        background: #020202!important;
    }
    section.columns.eight.mainBody {
        padding: 0 15px;
    }
    #headerPic {
        margin-top: -21px;
    }
    /* Collapse The Grid =================================================================================*/
    .row {
        width: auto;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .columns,
    .blockgrid {
        width: auto;
        float: none;
        margin: 0;
    }
    .columns:last-child {
        float: none;
    }
    [class*="columns"]+[class*="columns"]:last-child {
        float: none;
    }
    .columns:before,
    .columns:after {
        content: "";
        display: table;
    }
    .columns:after {
        clear: both;
    }
    .offset-by-one,
    .offset-by-two,
    .offset-by-three,
    .offset-by-four,
    .offset-by-five,
    .offset-by-six,
    .offset-by-seven,
    .offset-by-eight,
    .offset-by-nine,
    .offset-by-ten {
        margin-left: 0 !important;
    }
    .push-two,
    .push-three,
    .push-four,
    .push-five,
    .push-six,
    .push-seven,
    .push-eight,
    .push-nine,
    .push-ten {
        left: auto;
    }
    .pull-two,
    .pull-three,
    .pull-four,
    .pull-five,
    .pull-six,
    .pull-seven,
    .pull-eight,
    .pull-nine,
    .pull-ten {
        right: auto;
    }
    .eight-on-small {
        width: 66%;
        float: left!important;
    }
    .two-on-small {
        width: 16.6666%;
        float: left!important;
    }
    .six-on-small {
        width: 50%;
        float: left!important;
    }
    .four-on-small {
        width: 30%;
        float: left!important;
    }
    header h1 {
        float: none;
        display: block;
        font-size: 30px;
        font-size: 3rem;
    }
    .button.helpBut {
        width: auto;
    }
    header {
        height: 100px;
    }
    #mainContent {
        margin: 100px 0 12px;
    }
    /*OFFCANVAS NAVIGATION=========================================================================*/
    .row {}
    .mainNav {
        position: fixed;
        width: 60%!important;
        height: auto;
        right: -60%;
        bottom: 0;
        top: 98px;
        overflow-y: scroll;
        margin-top: 4px;
        background: #444;
        padding: 12px 0;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }
    [role="main"],
    footer {
        position: relative;
        left: 0;
        z-index: 2;
        width: auto;
        -webkit-transition: left 0.2s ease-in;
        -moz-transition: left 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: left 0.2s ease-in;
    }
    .mobileOffcanvas [role="main"],
    .mobileOffcanvas footer {
        right: 0;
    }
    .mobileOffcanvas .mainNav {
        box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.75);
        right: -20px;
    }
    nav.mainNav li {
        display: block!important;
        margin: 0!important;
    }
    nav.mainNav li a {
        display: block!important;
        padding: 9px 20px;
        margin: 0;
        font-weight: normal;
        font-size: 14px;
        font-size: 1.4rem;
        -webkit-transition: color .3s ease-in, background-color .3s ease-in;
        -moz-transition: color .3s ease-in, background-color .3s ease-in;
        -o-transition: color .3s ease-in, background-color .3s ease-in;
        transition: color .3s ease-in, background-color .3s ease-in;
    }
    nav.mainNav li a:hover,
    nav.news a#nav_news,
    nav.about a#nav_about,
    nav.tour a#nav_tour,
    nav.music a#nav_music,
    nav.store a#nav_store,
    .mainNav ul li a:hover,
    .mainNav ul li.current_page_item a,
    body.news li.page-item-4 a,
    body.press-archive li.page-item-4 a,
    body.press li.page-item-4 a,
    body.single-discography li.page-item-8 a,
    body.single-musicvideos li.page-item-14 a,
    body.single-guitar li.page-item-12 a {
        display: block;
        color: #fff;
        background: #67acc7;
    }
    /*turn off navRow properties for small*/
    nav.navRow ul li,
    nav.navRow ul li:first-child,
    nav.navRow ul li:last-child {
        margin: 0 20px 0 0px;
        padding: 6px 0px;
    }
    /* small screen forms fixes===========================================================*/
    div.inputs label,
    div.styledForm label,
    div.styledFormDrops label,
    div.primarylist label {}
    textarea {
        width: 60%;
    }
    p.forgetPw {
        clear: both;
        margin: 12px 0;
    }
    div.inputs input[type="checkbox"],
    div.inputs input[type="radio"],
    div.primarylist input[type="checkbox"] {
        display: inline-block;
        margin: 0 5px;
        position: static;
        width: auto;
    }
    div.inputs input[type="submit"] {
        margin-left: 0px;
    }
    .inputsHolder {
        float: none;
    }
    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="datetime"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    textarea,
    select {
        margin-bottom: 4px;
    }
    input.lastNameField {
        display: block;
        margin-left: 152px;
    }
    label.formLabel {
        float: left;
    }
    div.inputs input[type="submit"],
    .submitButton input[type="submit"] {
        margin: 12px auto;
        display: block;
    }
    /*==SITE AND STORE STYLES=================================================================*/
    header {
        padding: 0;
    }
    h1.logo {
        float: none;
        margin: 12px 0 0 0;
    }
    #headerBar {
        position: absolute;
        top: 0;
        right: 0;
        background: #fff;
        width: 100%;
        padding: 4px 0px;
        z-index: 1;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    ul#nav {
        height: auto;
    }
    img.eventPic {
        display: none;
    }
    h3 img {
        margin: 6px 9px 0 0;
    }
    footer {
        text-align: center;
    }
    a.poweredBy {
        margin: 18px auto;
    }
    /*contact form*/
    .hideForm,
    .helpClose {
        padding: 0 18px 0 0
    }
    #helpQuestions label {
        display: block;
        padding: 0;
    }
    #helpQuestions a {
        width: 100%;
    }
    #helpDrop {
        top: 51px;
        width: 100%;
        left: 0;
        position: static;
    }
    #helpAnswers,
    .contactForm {
        margin: 12px 0 0 0px;
        width: 100%;
    }
    .questionTitle {
        background: #2d3338;
        padding: 6px 12px;
    }
    /*tour page====*/
    #eventList {
        border-top: 1px dotted #5A5E61
    }
    #rowHeader {
        display: none;
    }
    .tourRow {
        padding: 6px 0;
    }
    .eventDate {
        width: 25%
    }
    .eventVenue,
    .eventNote,
    .eventDetails,
    .eventRsvp,
    .eventVip {
        float: right;
        padding-bottom: 4px;
        width: 75%;
        text-align: left;
    }
    .rsvp_True {
        margin: 0;
    }
    p.price {
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
        font-size: 120%;
        padding: 6px 0;
    }
    a.deliveryTooltip {
        width: auto;
        margin: 0 15px 9px 0;
    }
    a.AccessibleTooltip {
        float: none;
        display: inline-block;
    }
    a.poweredBy.right {
        float: none;
    }
    a.confirmationLink,
    a.confirmationLinkFirst {
        padding-right: 25px;
        padding-left: 0;
    }
    #orderComments textarea,
    div.viewComments {
        width: 100%;
    }
    a.cvTooltip {
        display: none;
    }
    #orderComments .controls {
        float: none;
        display: block;
    }
    .socials-small {
        height: 120px;
    }
    .socials a,
    .socials-small a {
        margin-top: 0;
    }
    .socials-small a#soc_ml {
        width: 159px;
        margin: 13px auto;
    }
    p.copyright {
        clear: both;
        margin: 12px 0;
    }
}


/* Smartphones (portrait and landscape) CATCH ALL STYLES----------- */

@media only screen and (min-width: 320px) and (max-width: 500px) {
    .show-on-desktop {
        display: none !important;
    }
    .hide-on-desktop {
        display: inherit !important;
    }
    .show-on-phone {
        display: inherit !important;
    }
    .hide-on-phone {
        display: none !important;
    }
    .eight-on-small {
        width: 100%;
        float: none;
    }
    .six-on-small {
        width: 100%;
        float: none;
    }
    .four-on-small {
        width: 100%;
        float: none;
        margin: 0 0 12px 0;
    }
    .button,
    a#purchaseButton {
        padding: 8px 14px 9px;
        width: 100%;
        margin: 12px 0;
    }
    #placeOrderButton {
        margin: 0 0 12px 0;
        width: 100%;
    }
    .rsvp_True {
        margin: 0;
        width: 100%;
    }
    .eventDetails,
    .eventRsvp {
        width: 50%;
        clear: both;
        float: left;
        margin-left: 25%;
    }
    #cancelNowButton {
        float: none;
        border: none;
        background: none;
        box-shadow: none;
    }
    #cancelNowButton:hover {
        background: none;
    }
    a.cvTooltip div {
        width: 80%;
        height: auto;
    }
    a.confirmationLink,
    a.confirmationLinkFirst {
        padding: 0;
        display: block;
        float: none;
    }
    #confirmationLinks a {
        display: block;
    }
    #ticketDetails {
        border: none;
    }
    span.dateLine1 {
        font-size: 1.3rem;
        line-height: 1.385;
        position: inherit;
    }
    /*form fixes==============================*/
    div.inputs label,
    div.styledForm label,
    div.styledFormDrops label,
    div.primarylist label {
        display: block;
        text-align: left;
    }
    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="datetime"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    textarea,
    select {
        width: 95%;
    }
    .inputs select,
    .controls textarea {
        width: 95%!important;
    }
    .control-group label {
        float: none;
        display: block;
        width: auto!important;
    }
    .controls {
        padding: 0;
        float: none;
        display: block;
    }
    .help-block,
    .help-inline {
        display: block;
        padding: 0;
    }
    .form-actions {
        padding: 0;
    }
    #menuBar {
        width: auto;
        right: 10px;
        padding: 0;
    }
    a#offCanvas {
        font-size: 0px
    }
    #freshwidget-button {
        display: none!important;
    }
}


/* Smartphones (landscape) SPECIFIC----------- */

@media only screen and (min-width: 321px) {
    /* Styles */
}


/* Smartphones (portrait) SPECIFIC----------- */

@media only screen and (max-width: 375px) {
    header a#logo {
        width: 290px;
    }
    header a#logo {
        background-size: 250px;
        height: 60px;
    }
    nav ul li {
        padding: 0 15px 0 0;
    }
    a.deliveryTooltip div,
    a.AccessibleTooltip div {
        width: 280px;
    }
    .modal {
        width: 80%;
        left: 100%;
    }
    #orderNumber {
        display: inline-block;
        margin: 6px 0 0;
    }
    #menuBar {
        width: auto;
        right: 10px;
        padding: 0;
    }
    a#offCanvas {
        font-size: 0px
    }
    .eventDetails,
    .eventRsvp {
        width: 75%;
        clear: both;
        float: left;
        margin-left: 25%;
    }
    h1.logo {
        margin-left: -6px;
    }
    .mainNav {
        width: 70%!important;
        right: -70%;
    }
}


/* Portrait tablet to landscape and desktop ==============================================*/

@media (min-width: 801px) and (max-width: 979px) {
    .hide-on-desktop {
        display: inherit !important;
    }
    .show-on-desktop {
        display: none !important;
    }
    .show-on-tablet {
        display: inherit !important;
    }
    .hide-on-tablet {
        display: none !important;
    }
    .show-on-small {
        display: none !important;
    }
    .hide-on-small {
        display: inherit !important;
    }
}


/* iPhone 4 and retina displays----------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    /* Styles */
}