/*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: inline-block;
    line-height: 100%;
    font-size: 110%;
    text-transform: uppercase;
    padding: 8px;
    color: #fff;
}

#menuBar {
    background: #4d4d4d;
}

a#offCanvas [class^="icon-"]:before,
a#offCanvas [class*=" icon-"]:before,
a#mobileNav [class^="icon-"]:before,
a#mobileNav [class*=" icon-"]:before {
    font-size: 2.6rem;
    padding: 3px 2px 0 0;
}

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;
}

a#storeCatsBut {
    color: #FFFFFF;
    font-size: 100%;
    display: block;
    padding: 0 12px;
    float: right;
    line-height: 32px;
    text-transform: uppercase;
}

.noCatsBut a#storeCatsBut {
    display: none!important;
}


/*turn this off on account and checkout masters*/

#menuBar {
    padding: 2px 10px 0 4px;
    color: #fff;
}


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

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .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;
        margin-top: 0;
    }
    /* 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;
    }
    .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;
    }
    /*OFFCANVAS NAVIGATION=========================================================================*/
    .mainNav {
        width: 100%!important;
        background: #ccc;
        padding: 12px 0;
    }
    [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 {
        left: 55%;
    }
    .mobileOffcanvas .mainNav {
        height: 1000px;
        box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.75);
    }
    .mobileOffcanvas nav.mainNav li a {
        display: block!important;
        padding: 6px 20px;
        color: #4a4a4a;
        margin: 0 0 9px 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;
    }
    .mobileOffcanvas nav.mainNav li a:hover,
    .mobileOffcanvas nav.news a#nav_news,
    .mobileOffcanvas nav.about a#nav_about,
    .mobileOffcanvas nav.tour a#nav_tour,
    .mobileOffcanvas nav.music a#nav_music,
    .mobileOffcanvas nav.store a#nav_store {
        display: block;
        color: #4a4a4a;
        background: #fff;
    }
    /* SMALL SCREEN MENU BUTTON NAVIGATION TOGGLE==================================================*/
    .mobileShowNav a#mobileNav {
        background: #2284A1;
    }
    .mobileShowNav [role="navigation"] {
        position: absolute!important;
        left: auto;
        top: 70px;
        padding: 0;
        right: 20px;
        width: auto!important;
        z-index: 101!important;
        transition: none;
        height: auto;
        background: #2284A1;
        border-radius: 4px 0 4px 4px;
    }
    .mobileShowNav .mainNav ul {
        margin: 9px 0 0 0;
    }
    .mobileShowNav .mainNav li,
    .mobileOffcanvas .mainNav li {
        display: block;
        padding: 0!important;
        min-width: 110px;
        margin: 0;
    }
    .mobileShowNav .mainNav li a {
        color: #fff!important;
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        display: block;
        padding: 6px 20px;
        margin: 6px 0;
        font-weight: normal;
        font-size: 13px;
        font-size: 1.3rem;
    }
    .mobileShowNav .mainNav li a:hover {
        background: #196175!important;
    }
    /*turn off navRow properties for small*/
    nav.navRow ul li,
    nav.navRow ul li:first-child,
    nav.navRow ul li:last-child {
        display: block;
        margin: 0;
        padding: 6px 20px;
    }
    /* small screen forms fixes===========================================================*/
    textarea {
        width: 60%;
    }
    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;
    }
    div.inputs input[type="submit"],
    .submitButton input[type="submit"] {
        margin: 12px auto;
        display: block;
    }
    /*==SITE AND STORE STYLES=================================================================*/
    header {
        padding: 12px 0 6px 0;
    }
    h1.logo {
        float: none;
        margin: 5px 0 15px 15px;
        width: 100%;
    }
    #headerBar {
        background: #fff;
        width: 100%;
        text-anchor: center;
        padding: 4px 0px;
        z-index: 1;
        /*border-bottom: 1px solid rgba(0, 0, 0, 0.2);*/
    }
    .socials {
        text-align: left;
    }
    nav.navRow ul li {
        float: left;
    }
    .mainNav li a:hover {
        margin-left: 0;
    }
    .slider {
        margin-top: -10px;
        margin-left: -20px;
        width: 100%;
        height: 100%;
    }
    ul#discogList {
        width: 100%;
        float: left;
    }
    ul#discogList>li {
        /*height:190px;*/
        width: 30%;
        float: left;
        /*margin-left:15px;*/
        margin-right: 0;
    }
    ul.videoList>li {
        width: 50%;
        float: left;
        height: auto;
    }
    ul.videoList>li a {
        width: 100%;
        height: auto;
    }
    ul.videoList>li a img {
        width: 100%;
        height: auto;
    }
    #tourDatesList {
        width: 100%;
        margin-left: 0;
        height: 100%;
        overflow: visible;
    }
    .videoAlbum {
        clear: left;
    }
    footer {
        text-align: center;
    }
    a.poweredBy {
        margin: 18px auto;
    }
    .signupLeft {
        margin-top: 15px;
    }
    body.page-id-16 #contactPage {
        margin-top: 15px;
        width: 100%;
    }
}


/*end of max-width: 768px*/


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

@media only screen and (min-width: 320px) and (max-width: 480px) {
    .show-on-desktop {
        display: none !important;
    }
    .hide-on-desktop {
        display: inherit !important;
    }
    .show-on-phone {
        display: inherit !important;
    }
    .hide-on-phone {
        display: none !important;
    }
    .six-on-small {
        width: 100%;
        float: none;
    }
    .four-on-small {
        width: 100%;
        float: none;
        margin: 0 0 12px 0;
    }
    .errorPage h1 {
        font-size: 120px;
        font-size: 16rem;
        line-height: 0.8;
        text-align: center;
    }
    .errorPage .button {
        width: 100%;
    }
    .button {
        padding: 8px 14px 9px;
    }
    .titleBlue {
        color: #7498ad;
    }
    #tourDatesList h3 {
        color: #7498ad;
    }
    .venue {
        color: #7498ad;
    }
    .slider {
        margin-top: -10px;
        margin-left: -20px;
        width: 100%;
        height: 100%;
    }
    .discogRight {
        margin-top: 15px;
    }
    #discogLeft {
        height: 100%;
    }
    .tracklist {
        width: 100%;
    }
    .videoSidebar {
        height: 100%;
    }
    .signupLeft {
        margin: 15px;
    }
    .page-template-template-mailinglist .titleBlue {
        margin-left: 15px;
    }
    .contact .titleBlue {
        margin: 15px 0 0 15px;
    }
    /*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: 85%;
    }
    .inputs select {
        width: 85%!important;
    }
}


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

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


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

@media only screen and (max-width: 320px) {}


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

@media (min-width: 769px) 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 6 in portrait & landscape***********/

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
    ul#discogList>li {
        /*height:220px;*/
        width: 46%;
    }
    ul.videoList>li {
        width: 50%;
        float: left;
        height: 155px;
    }
    #tourDatesList {
        width: 100%;
        margin-left: 0;
        padding: 1px 0 10px;
    }
    .copyright {
        text-align: center;
    }
}


/***********iPhone 6 in landscape***********/

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
    /* STYLES GO HERE */
}


/***********iPhone 6 in portrait***********/

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
    /* STYLES GO HERE */
}


/***********iPhone 6 Plus in portrait & landscape***********/

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
    #container {
        padding: 6px 0 20px 15px;
    }
    .discogRight {
        margin-top: 15px;
    }
    .titleBlue {
        color: #7498ad;
    }
    .tourDates {
        padding-top: 1px;
        font-size: 120%;
    }
    #tourDatesList h3 {
        color: #7498ad;
        font-size: 20px;
    }
    #tourDatesList p {
        font-size: 18px;
    }
    .venue {
        color: #7498ad;
    }
    div.inputs label {
        width: 140px;
    }
    ul#discogList>li {
        height: 350px;
    }
    #discogList img {
        width: 320px;
    }
    #discogLeft {
        overflow: visible;
        height: 100%;
    }
}


/***********iPhone 6 Plus in landscape***********/

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
    #container {
        padding: 6px 0 20px 15px;
    }
    .discogRight {
        margin-top: 15px;
    }
    .titleBlue {
        color: #7498ad;
    }
    .tourDates {
        padding-top: 1px;
        font-size: 120%;
    }
    #tourDatesList h3 {
        color: #7498ad;
        font-size: 20px;
    }
    #tourDatesList p {
        font-size: 18px;
    }
    .venue {
        color: #7498ad;
    }
    div.inputs label {
        width: 140px;
    }
    ul#discogList>li {
        height: 350px;
    }
    #discogList img {
        width: 320px;
    }
    #discogLeft {
        overflow: visible;
        height: 100%;
    }
}


/***********iPhone 6 Plus in portrait***********/

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) {
    /* STYLES GO HERE */
}


/***********iPhone 5 & 5S in portrait & landscape***********/

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    /* STYLES GO HERE */
}


/***********iPhone 5 & 5S in landscape***********/

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
    /* STYLES GO HERE */
}


/***********iPhone 5 & 5S in portrait***********/

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
    /* STYLES GO HERE */
}


/***********iPad mini in portrait & landscape***********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    /* STYLES GO HERE */
}


/***********iPad mini in landscape***********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    /* STYLES GO HERE */
}


/***********iPad mini in portrait***********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    /* STYLES GO HERE */
}


/***********iPad in portrait & landscape***********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        margin-top: 0;
    }
    h1.logo {
        float: none;
        margin: 5px 0 15px 0;
        text-align: center;
        width: 100%;
    }
    #headerBar {
        background: #fff;
        width: 100%;
        text-anchor: center;
        padding: 4px 0px;
        z-index: 1;
        /*border-bottom: 1px solid rgba(0, 0, 0, 0.2);*/
    }
    .socials {
        text-align: center;
    }
    #slider1 {
        margin: 0 auto;
    }
    div.inputs label {
        width: 140px;
    }
    .discogRight {
        margin-top: 16px;
    }
    body.contact .leftContent {
        width: 100%;
    }
    .signupLeft {
        width: 100%;
    }
    .sidebar {
        width: 100%;
    }
    nav.navRow ul li {
        float: left;
        margin-left: 20px;
    }
    .mainNav li a:hover {
        margin-left: 0;
    }
    .slider {
        margin-top: -10px;
        margin-left: -20px;
        width: 100%;
        height: 100%;
    }
    ul#discogList {
        width: 100%;
        float: left;
    }
    ul#discogList>li {
        /*height:165px;*/
        /*width:44%;*/
        float: left;
        /*margin-left:15px;*/
        margin-right: 0;
    }
    ul.videoList>li {
        width: 50%;
        float: left;
        height: 120px;
    }
    #tourDatesList {
        width: 100%;
        margin-left: 0;
    }
    .videoAlbum {
        clear: left;
    }
    footer {
        text-align: center;
    }
}


/***********iPad in landscape***********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* STYLES GO HERE */
}


/***********iPad in portrait***********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* STYLES GO HERE */
}


/***********Retina iPad in portrait & landscape***********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    /* STYLES GO HERE */
}


/***********Retina iPad in landscape***********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* STYLES GO HERE */
}


/***********Retina iPad in portrait***********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* STYLES GO HERE */
}


/*-----------------------------------

Added Accessibility Code 

-------------------------------------*/


/* skip to content */

.hidden {
    position: absolute !important;
    left: -9999px !important;
}

.hidden:focus {
    left: 5px !important;
}