/* trackpipe/public/css/fan/band_follow_opt_in.css */
.external-follow-confirm .ui-dialog-buttonset button,
.mailing-list-opt-in .ui-dialog-buttonset button {
    background: rgb(0,161,198);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    padding: 0 1em;
    text-align: center;
    border: none;
    vertical-align: top;
    padding: 12px 12px;
    height: 43px;
    line-height: 16px;
}
.external-follow-confirm .ui-dialog-buttonset button:hover,
.mailing-list-opt-in .ui-dialog-buttonset button:hover {
    background: rgb(0,161,198);
    text-decoration: underline;
}
.external-follow-confirm .ui-dialog-buttonset button:focus,
.mailing-list-opt-in .ui-dialog-buttonset button:focus {
    background: rgb(0,161,198);
}
.external-follow-confirm .ui-dialog-content.ui-widget-content,
.mailing-list-opt-in .ui-dialog-content.ui-widget-content {
    padding-bottom: 0;
}
.mailing-list-opt-in.label .ui-dialog-buttonset button {
    max-width: 420px;
}
.external-follow-confirm .ui-dialog-buttonset button:last-child,
.mailing-list-opt-in.band .ui-dialog-buttonset button:last-child {
    width: 190px;
    background: #FFF;
    border: 1px solid rgb(0,161,198);
    color: rgb(0,161,198);
}
.external-follow-confirm .heading {
    margin: 0 auto 15px auto;
}
.mailing-list-opt-in .heading {
     margin: 0 auto;
}
.mailing-list-opt-in .heading,
.external-follow-confirm .heading {
    font-weight: normal;
    font-size: 17px;
    line-height: 20px;
    max-width: 420px;
}
.external-follow-confirm .heading {
    height: 39px;
    padding: 20px 0;

}
body:lang(ja) .mailing-list-opt-in .heading,
body:lang(ja) .external-follow-confirm .heading {
    font-size: 16px;
    line-height: 1.4;
}
.mailing-list-opt-in .email-abuse {
    margin: 10px auto 10px auto;
    color: #777;
    font-size: 12px;
    line-height: 14px;
    max-width: 420px;
}
.mailing-list-opt-in .notify-me-container {
    font-size: 15px;
    margin: 15px auto;
    max-width: 420px;
}
.mailing-list-opt-in .notify-me-container .first {
    margin-bottom: 5px;
}
.mailing-list-opt-in .notify-me {
    display: block;
}
.mailing-list-opt-in .notify-me-label {
    display: inline-block;
}
.mailing-list-opt-in .notify-me-message {
    display: inline-block;
    font-weight: bold;
    width: 390px;
}
.mailing-list-opt-in .notify-me-container input[type="checkbox"] {
    vertical-align: top;
}

/* trackpipe/public/css/popup_image.css */

/* popup image viewer */

/* .imageviewer_XXX styles refers to the original implementation and will be deleted eventually
 * .popupimage_XXX is the new black.  the desktop version of the new code is still being developed,
 * so the .imageviewer_XXX are still the ones active in production. -- kj
 */


.popupimage_gallery {
    display: table-cell;
    vertical-align: middle;
    position: fixed;
    left: 0; top: 0;
    bottom: 0; right: 0;
    background: rgba( 255, 255, 255, 0.5 );
    z-index: 10;
}

.popupimage_container {
    position: relative;
    display: table;
    left: 0;
    height: 100%; width: 1000%;
    list-style: none;
    padding: 0;
}

.popupimage_item {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: auto;
}

.popupimage_item img {
    display: block;
    background: #000;
    margin-left: auto;
    margin-right: auto;
}

.popupimage_item.loading {
    background: url(/img/playerbusy_transp.gif) no-repeat;
    background-position: 50% 50%;
}


/* --- widgets --- */

.popupimage_nav {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 33%;
    -webkit-tap-highlight-color: rgba( 0,0,0,0 );
}

.popupimage_nav.dismiss {
    left: 33%;
    width: 34%;
}

.popupimage_nav.prev {
    left: 0;
}

.popupimage_nav.next {
    right: 0;
}

.popupimage_navicon {
/* *** old:
    display: inline-block;
    visibility: hidden;
    position: absolute;
    cursor: pointer;
    top: 50%;
    margin-top: -15px;
    background-image:url(/img/popup_image.png);
    background-repeat:no-repeat;
    width: 30px;
    height: 30px;
*** */

    display: inline-block;
    position: absolute;
    top: 85%;
    margin: auto;
    background: url(/img/mobile-sprites-20150520.svg) no-repeat;
    background-size: 500% auto;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    z-index: 1;
}

.no-svg .popupimage_navicon {
    background-image: url(/img/mobile-sprites-20150520.png);
}

.popupimage_navicon.dismiss {
    left: 50%;
    margin-left: -1rem;
    background-position: 0 31.6%;
}

.popupimage_navicon.prev {
    left: 1em;
    background-position: 0 35.8%;
}

.popupimage_navicon.next {
    right: 1em;
    background-position: 0 40.0%;
}

.popupimage_loading {
    position: absolute;
    display: inline-block;
    background-color: black; 
    opacity: 0.5;
    filter:alpha(opacity=50);
    text-align: center;
    vertical-align: middle;
    z-index: 1;
}

.popupimage_spinny_lg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy.gif) no-repeat;
    background-position: 50% 50%;
}

.popupimage_spinny_sm {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_small.gif) no-repeat;
    background-position: 50% 50%;
}

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

.imageviewer_top {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    text-align: center;
    z-index: 201; /* on top of menubar 2018 */
}

.imageviewer_top td {
    border: 0;
}

.imageviewer_back {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: -1;
}

.imageviewer_dismiss {
    cursor: pointer;
    position: relative;
    top: 2em; left: -1em;
    background-image: url(/img/popup_image_v2.png);
    background-size: 30px;
    background-repeat:no-repeat;
    width:30px;
    height:30px;
    z-index: 10;
}

.imageviewer_image {
    clear: both;
    border: 2px solid rgba(0,0,0,0.1);
    max-width: none;
    display: inherit;
}

.imageviewer_nav {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 200px;
    max-width: 33%;
    top: 0;
}

.ie .imageviewer_nav {
    /* fixes problems laying out empty elements */
    background: white;
    filter: alpha(opacity=0);
    opacity: 0;
}

.imageviewer_nav.prev {
    left: 0;
}

.imageviewer_nav.next {
    right: 0;
}

.imageviewer_navicon {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    cursor: pointer;
    top: 50%;
    margin-top: -15px;
    background-image: url(/img/popup_image_v2.png);
    background-size: 30px;
    background-repeat:no-repeat;
    width: 30px;
    height: 30px;
}

.imageviewer_navicon.next {
    right: 30px;
    background-position:0 center;
}

.imageviewer_navicon.prev {
    left: 30px;
    background-position:0 bottom;
}

.imageviewer_nav:hover span.imageviewer_navicon {
    visibility: visible;
}

.imageviewer_loading {
    position: absolute;
    display: inline-block;
    background-color: black; 
    opacity: 0.5;
    filter:alpha(opacity=50);
    text-align: center;
    vertical-align: middle;
}

.imageviewer_spinny_lg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_transp.gif) no-repeat;
    background-position: 50% 50%;
}

.imageviewer_spinny_sm {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_small.gif) no-repeat;
    background-position: 50% 50%;
}


/* trackpipe/public/css/daily/article.css */
article p {
    margin: 0.75rem 0;
    line-height: 1.76rem;
}

article {
    display: grid;
    grid-template-columns: 5.55% 5.55% 1.6% 5.55% 5.55% 1.6%  11.1% 1.6% 11.1% 1.6% 11.1% 1.6% 11.1%  1.6% 5.55% 5.55% 1.6% 5.55% 5.55%;
    font-size: 17px;
}

article > * {
    grid-column: 7 / span 7;
}
article > article-type {
    grid-column: 4 / span 13;
    margin: 2.6125rem 0 0;
    text-align: center;
    font-weight: bold;
    color: #909090;
    letter-spacing: 0.5px;
    /*background:pink;*/
}

article > article-title {
    grid-column: 4 / span 13;
    margin: 1.125rem 0 0;
    font-size: 3.125rem;
    font-weight: bold;
    text-align: center;
    line-height: 120%;
    letter-spacing: -1px;
    /*background: orange;*/
}
article > article-subtitle {
    grid-column: 7 / span 7;
    margin: 2.5rem 0 0;
    font-size: 1.5rem;
    text-align: center;
    /*background: purple;*/
}

article > article-credits {
    grid-column: 7 / span 7;
    margin: 1.75rem 0 0;
    /*font-size: 0.875rem;*/
    text-align: center;
    color: #909090;
    /*background: yellow;*/
}
article-credits a {
    color: #909090;
    /*background: orange;*/
}

p sup {
    line-height: 1rem;
}
ol.footnote {
    padding: 0 0 0 1rem;
    font-size: .9375rem;
    line-height: 1.5rem;
}
ol.footnote li {
    margin: 0 0 0.5rem 0;
    padding: 0 0 0 0.5rem;
}



article article-playbutton {
    grid-column: 9 / span 3;
    justify-self: center;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.1s;
}


article-playbutton.visible {
    opacity: 1;
}

article-playbutton icon {
    display: block;
    width: 65px;
    height: 65px;
    background: url(/img/daily/play-icon-post2@2x.png) #fff no-repeat;
    background-size: 100%;
    margin-bottom: -33px;
    margin-top: 2.5rem;
    border: 1px solid #000;
    border-radius: 100%;
}

article-playbutton.visible icon {
    transition: all .1s ease-out;
    cursor: pointer;
}

article-playbutton.visible.playing icon {
    background: url(/img/daily/pause-icon-post2@2x.png) #fff no-repeat;
    background-size: 100%;
}

article-playbutton.visible div:hover > icon {
    transform: scale(1.05);
}

article.aotd article-playbutton {
    display: inline-block;
    vertical-align: bottom;
    margin: 0 0.75rem 0 0;
}
article.aotd article-playbutton icon {
    margin: 0;
}



article > #feature-image {
    grid-column: 1 / -1;
    margin: 0 0 2rem;
    min-height: calc(100vw * (646 / 1244)); /* feature image ratio */
}
article > #feature-image.small {
    grid-column: 7 / span 7;
    min-height: 400px;
}
article > #feature-image.medium {
    grid-column: 4 / span 14;
    min-height: 400px;
}

article > p > img {
    max-width: 100%;
    height: auto;
}

/* photo optional layouts */


article > p.photo-midinline,
article > figure.photo-midinline {
    grid-column: 4 / span 13;
}
article > p.photo-fullbleed,
article > figure.photo-fullbleed {
    grid-column: 1 / span 19;
}
article > p.photo-halfa,
article > figure.photo-halfa {
    grid-column: 1 / span 9;
}
article > p.photo-halfb,
article > figure.photo-halfb {
    grid-column: 11 / span 9;
}
/*
article > p.photo-offseta,
article > figure.photo-offseta {
    grid-column: 1 / span 9;
}
article > p.photo-offsetb,
article > figure.photo-offsetb {
    grid-column: 11 / span 9;
    margin-top: 15vw;
}
*/

article > p.photo-midinline img,
article > figure.photo-midinline img,
article > p.photo-fullbleed img,
article > figure.photo-fullbleed img,
article > p.photo-halfa img,
article > figure.photo-halfa img,
article > p.photo-halfb img,
article > figure.photo-halfb img 
/*
article > p.photo-offseta img,
article > figure.photo-offseta img,
article > p.photo-offsetb img,
article > figure.photo-offsetb img*/
{
    width: 100%;
    height: auto;
}

/* photo captions for custom imgs */

article figure.photo-midinline figcaption {

}

article figure.photo-fullbleed figcaption {
    margin-right: 5.5%;
    margin-left: 25.4%; 
}
article figure.photo-halfa figcaption {
    display: none;
}
article figure.photo-halfb figcaption {
    margin-right: 5.5%;
    margin-right: 10.1%;
}

article figure figcaption,
article #feature-image-caption {
    flex: 1;
    text-align: right;
    color: #909090;
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
}
article #feature-image-caption,
article figure.feature-caption {
    margin: -1.0rem 0 1rem 0;
}

article figure {
    margin: 0;
    width: auto!important;
}

article figure img {
    flex: 1;
    /*background: orange;*/
    width: 100%;
    height: auto;
}




/* player + related + player + related + player + related + player + related */

article > .player-wrapper {
    grid-column: 6 / span 9;
}

article > .player-wrapper.large {
    grid-column: 7 / span 7;
}

article mplayer {
    border: 1px solid #000;
    border-top: none;
    margin: 0 0 3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    width: 100%;
}

article mplayer merchrow {
    display: none;
}
article mplayer.merch merchrow {
    display: flex;
    height: 8vw;
    width: 100%;
    border-bottom: 1px dotted #000;
}
article mplayer thumb {
    outline: 2px solid rgba(0,0,0,0.1);
    width: 5vw;
    height: 5vw;
    margin: 1.5vw 0.84vw;
}
article mplayer thumb:first-child {
    margin-left: 1.5vw;
}
article mplayer thumb.selected {
    outline: 2px solid #1da0c3;
    outline-offset: 1px;
}
article mplayer thumb:hover {
    outline: 2px solid #1da0c3;
    outline-offset: 1px;
    cursor: pointer;
    transition: outline 0.05s ease-out;
}

article bamplayer-art {
    grid-column: 7 / span 7;
    margin-top: 2.5rem;
    width: 100%;
    /*height: calc(49.16vw - 7px);*/
    height: calc(100vw - (11.1vw + 1.6vw) * 4);
    border: 1px solid #000;
    overflow: hidden;
    display: grid;
    justify-items: center;
    align-items: center;
}

article bamplayer-art img {
    width: 100%;
    height: auto;
}
article bamplayer-art.merch-art {
    background: black;
}
article bamplayer-art.merch-art > img {
    max-height: 100%;
}

article aotd-ornament {
    grid-column: 3 / span 4;
    background-color: pink;
    margin-top: 2.25rem;
    background: url('/img/daily/aod-ornament@2x.gif') no-repeat;
    /*background-size: 35vw;*/ /* ~452/1280 */
    /*background-position: 0 7vw; */ /* ~90/1280 */
    background-position: left center;
    background-size: 420px;
}
article aotd-ornament.right {
    grid-column: 14 / span 4;
    background-position: right center;
}


article mplayer-inner {
    height: 8vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    width: 100%;
}
#s-daily article mplayer-inner {
    box-sizing: content-box;
}

article mplayer .mpbuttons {
    /*width: 22.561%;*/
    width: 28%;
    height: calc(8vw - 1px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px dotted #000;
}
article mplayer.large .mpbuttons {
    width: 22.561%;
}
article mplayer .mpbuttons:hover {
    cursor: pointer;
}
#s-daily article mplayer .mpbuttons a {
    color: #000;
    text-transform: uppercase;
    font-size:0.625rem;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    border-bottom: 1px dotted #000;
    display: flex;
    height: 33.33%;
}
#s-daily article mplayer .mpbuttons .mpbuy {
    width: 100%;
    font-size: 0.75rem;
}
#s-daily article mplayer .mpbuttons .mpwl {
    width: 100%;
}
#s-daily article mplayer .mpbuttons .mpgo {
    width: 100%;
    border-bottom: 0;
    justify-content: center;
    text-align: center;
    border-right: 0;
}


/* fan controls */
#s-daily article .collect-item.wishlisted a.wishlist-msg,
#s-daily article .collect-item a.wishlisted-msg {
    display: none;
}
#s-daily article .collect-item.wishlisted a.wishlisted-msg {
    display: flex;
}
#s-daily article .collect-item.disabled {
    opacity: 0.4;
}
#s-daily article .collect-item a.purchased-msg {
    display: none;
}
#s-daily article .collect-item.purchased .wishlist-msg, 
#s-daily article .collect-item.purchased .wishlisted-msg, 
#s-daily article .collect-item.purchased .buy-now {
    display: none;
}
#s-daily article .collect-item.purchased a.purchased-msg {
    display: flex;
}
#s-daily article .collect-item.purchased a.wishlist-msg, .collect-item.purchased a.wishlisted-msg, .collect-item.purchased a.buy-now {
    display: none;
}

/* slim v2 */
/* 1a. when slimv2, turn off v1 fan controls for normal player when .slimv2 present */

#s-daily article .slimv2:not(.large) .collect-item a.buy-now,
#s-daily article .slimv2:not(.large) .collect-item.purchased a.purchased-msg,
#s-daily article .slimv2:not(.large) .collect-item a.wishlist-msg,
#s-daily article .slimv2:not(.large) .collect-item.wishlisted a.wishlisted-msg,
#s-daily article .slimv2:not(.large) .collect-item .mpgo {
    display: none;
}

/* slim v2 */
/* 1b. when slimv2 is not present, turn off v2 fan controls */
#s-daily article .collect-item .alt,
#s-daily article .collect-item a.buy-now.alt,
#s-daily article .collect-item.purchased a.purchased-msg.alt,
#s-daily article .collect-item a.wishlist-msg.alt,
#s-daily article .collect-item.wishlisted a.wishlisted-msg.alt,
#s-daily article .collect-item .mpgo.alt {
    display: none;
}

/* slim v2 */
/* 2. adjust sidebar, remove sidebar buttons when .slimv2buttons present */

article mplayer-sidebar.slimv2buttons .mpbuttons {
    display: none;
}
article mplayer-sidebar.slimv2buttons mpmerch {
    margin: -0.25rem 0 0;
}
article mplayer-sidebar.slimv2buttons mpmerchformats {
    /* background: orange;*/
    height: 3rem;
    margin: -3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* slim v2 */
/* 3. fan controls toggle ... when slimv2, turn on .alt */

#s-daily article .slimv2:not(.large) .collect-item a.buy-now.alt,
#s-daily article .slimv2:not(.large) .collect-item a.wishlist-msg.alt,
#s-daily article .slimv2:not(.large) .collect-item .mpgo.alt {
    display: flex;
}

#s-daily article .slimv2 .collect-item.wishlisted a.wishlist-msg.alt,
#s-daily article .slimv2 .collect-item a.wishlisted-msg.alt {
    display: none;
}
#s-daily article .slimv2:not(.large) .collect-item.wishlisted a.wishlisted-msg.alt {
    display: flex;
}
#s-daily article .slimv2 .collect-item a.purchased-msg.alt {
    display: none;
}
#s-daily article .slimv2:not(.large) .collect-item.purchased .wishlist-msg.alt,
#s-daily article .slimv2:not(.large) .collect-item.purchased .wishlisted-msg.alt,
#s-daily article .slimv2:not(.large) .collect-item.purchased .buy-now.alt {
    display: none;
}
#s-daily article .slimv2:not(.large) .collect-item.purchased a.purchased-msg.alt {
    display: flex;
}

/* slim v2 */
/* 4. fan controls toggle ... when slimv2 and mobile (regular), turn off .alt, turn on v1 */

/* target mobile, .large and regular */
@media only screen and (max-width: 768px) { 

    #s-daily article .slimv2:not(.large) .mpbuttons,
    #s-daily article .slimv2.large .mpbuttons {
        /*background: pink;*/
    }

    /* turn off .alt */
    #s-daily article .slimv2:not(.large) .collect-item .alt,
    #s-daily article .slimv2:not(.large) .collect-item a.buy-now.alt,
    #s-daily article .slimv2:not(.large) .collect-item.purchased a.purchased-msg.alt,
    #s-daily article .slimv2:not(.large) .collect-item a.wishlist-msg.alt,
    #s-daily article .slimv2:not(.large) .collect-item.wishlisted a.wishlisted-msg.alt,
    #s-daily article .slimv2:not(.large) .collect-item .mpgo.alt {
        display: none;
        /*background-color: plum;*/
    }

    /* turn on v1 */
    #s-daily article .slimv2:not(.large) .collect-item a.buy-now,
    #s-daily article .slimv2:not(.large) .collect-item a.wishlist-msg,
    #s-daily article .slimv2:not(.large) .collect-item .mpgo {
        display: flex;
    }
    #s-daily article .slimv2:not(.large) .collect-item.wishlisted a.wishlist-msg,
    #s-daily article .slimv2:not(.large) .collect-item a.wishlisted-msg {
        display: none;
    }
    #s-daily article .slimv2:not(.large) .collect-item.wishlisted a.wishlisted-msg {
        display: flex;
    }
    #s-daily article .slimv2:not(.large) .collect-item a.purchased-msg {
        display: none;
    }
    #s-daily article .slimv2:not(.large) .collect-item.purchased .wishlist-msg,
    #s-daily article .slimv2:not(.large) .collect-item.purchased .wishlisted-msg,
    #s-daily article .slimv2:not(.large) .collect-item.purchased .buy-now {
        display: none;
    }
    #s-daily article .slimv2:not(.large) .collect-item.purchased a.purchased-msg {
        display: flex;
    }

}

/* slim v2 */
/* 5. misc styling */

#s-daily article .collect-item.purchased a.purchased-msg.alt, 
#s-daily article .slimv2:not(.large) .collect-item.wishlisted a.wishlisted-msg.alt {
    justify-content: center;
    text-align: center;
}

#s-daily article .slimv2:not(.large) .alt {
    font-size: 0.625rem;
}
#s-daily article .slimv2:not(.large) .alt span {
    padding: 0 4%;
    display: flex;
}

/* slim v2 */
/* 6. player styles */

mplayer.slimv2:not(.large) .progress-bar {
    width: 65%;
    width: 62.6%;
    margin: 0 0 0 12.6vw;
}

/* target mobile, .large and regular */
@media only screen and (max-width: 768px) { 
    
    mplayer.slimv2:not(.large) .progress-bar {
        width: 100%;
        margin: 0;
    }

}


/* end slim v2 end slim v2 end slim v2 controls */



article .collect-item.purchased .icon {
    margin: 0.25rem 0.25rem 0 0;
}
article mplayer-sidebar .collect-item .mpwl.wishlist-msg .icon,
article mplayer-sidebar .collect-item .mpwl.wishlisted-msg .icon {
    margin: 0 0.25rem 0 0;
    position: relative;
    top: 3px;
}
article .collect-item .mpwl.wishlist-msg .icon,
article .collect-item .mpwl.wishlisted-msg .icon {
    margin: 0 0.25rem 0 0;
    position: static;
}
.mpbuy svg {
    fill: #cb2c26;
}
.mpwl.wishlist-msg svg {
    fill: #000;
}
.mpwl.wishlisted-msg svg {
    fill: #ff9c00;
}

#s-daily article .collect-item.purchased .mpbuy,
#s-daily article .collect-item.purchased .mpgo {
    flex: 1;
    font-size: 0.625rem;
}


/* hack for fan signup form */
#signup-vm.signup-form label.tos-label {
    width: auto;
}


article mplayer.extracklist {
    transition: all .4s ease-in-out;
}

/* player dimensions: */
/* columns: 1.6%  11.1% 1.6% 11.1% 1.6% 11.1% 1.6% 11.1% 1.6% = 52.4% */
/* elements in page dimensions: 1.6% 11.1% 2.3% 5vw 2.3%  ;


/* 11.1vw + 1.6vw = 12.7vw */
/* 2.3% of page = 
/* 11.1% of page = 20.99237% of player */
/* 1.6% of page = 3.05344% of player */
/* 32.7% of page = 62.40458% of player */
/* player inner widths are relative to their outer container... grid-column: 6 / span 9; */
/* % widths are used to properly fill the container? */
/* */

article mplayer .mpaa {
    display: none;
}

/* 4.8 + 1.1 + 1.1 = 7vw */ /* dunno what this means */
/* 64px ~= 5vw == 5% of paage == 5/52.4 = 9.542% */
.mpbutton {
/*  background-color:pink;*/
    /*width: 9.16031%;*/
    /*width: 9.542%;*/
    width: 5vw; /* seems ok to do, vw used to make square */    
    height: 5vw;
    flex-shrink: 0;
    border-radius: 5vw;
    margin: 0 2.3% 0 3%;
    background: #fff;
    border: 1px solid #000;
}
.mpbutton:hover {
    cursor: pointer;
}
.mpbutton::before {
    /*content: "play";*/
}
.mpbutton .icon,
.paused .mpbutton .icon {
    width: 100%;
    height: 100%;
    background: url(/img/daily/icon-play.svg) no-repeat;
    background-position: 58% 50%;
}
.playing .mpbutton .icon {
    width: 100%;
    height: 100%;
    background: url(/img/daily/icon-pause.svg) no-repeat;
    background-position: 50%;
}
.buffering .mpbutton .icon {
    display: none;
}
.mpbutton .loading {

}

.loading {
    display: none;
}

.buffering .loading {
    font-size: 1rem;
/*    background: #fc0;*/
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    position: relative;
    padding-left: calc(50% - 0.5rem);
    padding-bottom: 0.4rem;
}

.buffering .loading span {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    width: 0.3rem;
}

.buffering .loading span:nth-of-type(1) {
    animation: loadingdots1 1s steps(5) infinite;
}
.buffering .loading span:nth-of-type(2) {
    animation: loadingdots2 1s steps(5) infinite;
}
.buffering .loading span:nth-of-type(3) {
    animation: loadingdots3 1s steps(5) infinite;
}

@keyframes loadingdots1 {
    0%    { opacity: 0; }
    24.9% { opacity: 0; }

    25%   { opacity: 1; }
    49.9% { opacity: 1; }

    50%   { opacity: 1; }
    74.9% { opacity: 1; }

    75%   { opacity: 1; }
    99.9% { opacity: 1; }

    100%  { opacity: 0; }
}
@keyframes loadingdots2 {
    0%    { opacity: 0; }
    24.9% { opacity: 0; }

    25%   { opacity: 0; }
    49.9% { opacity: 0; }

    50%   { opacity: 1; }
    74.9% { opacity: 1; }

    75%   { opacity: 1; }
    99.9% { opacity: 1; }

    100%  { opacity: 0; }
}
@keyframes loadingdots3 {
    0%    { opacity: 0; }
    24.9% { opacity: 0; }

    25%   { opacity: 0; }
    49.9% { opacity: 0; }

    50%   { opacity: 0; }
    74.9% { opacity: 0; }

    75%   { opacity: 1; }
    99.9% { opacity: 1; }

    100%  { opacity: 0; }
}


.mptext {
    /*font-family: 'Agipo';*/ /* Helvetica Neue */
    font-size: 1rem;
    display: flex;
    margin: 0 2.05344% 0 0;
    flex-wrap: wrap;
    overflow: hidden;
    width: 60.54356%;
    /*background: pink;*/
}

#s-daily .mptext a,
#s-daily .mptext a:visited {
    color: #000;
}

.mpalbuminfo {
    /*background: orange;*/
    width: 100%;
    /*padding: 0 5% 0 0;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.mptrackinfo {
    /*background: aqua;*/
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.mptracktitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.3rem;
    /*background: pink;*/
}
.mptralbum {
    font-weight: bold;
}

.mpartist {
    /*background: rgba(0,0,0,0.17);*/
}
.mpartist:before {
    content: ' by ';
}

.mpcontrols {
    width: 24%;
    height: 1.25rem;
    /*height: 1.6vw;*/
    text-align: center;
    /*background: brown;*/
    xdisplay: none;
    display: flex;
/*  opacity: 0;*/
}
.mpcontrols:hover {
    cursor: pointer;
}
.large .mpcontrols {
    width: 20%;
}
.large .mptime {
    width: 78%;
}

article .prev,
article .next {
    /*background:yellow;*/
    width: 50%;
    /*height: 2vw;*/
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
article .next {
    justify-content: center;
}
article .next .icon {
    width: 50%;
    height: 1vw;
    margin-right: 30%;
    background: url(/img/daily/icon-ffwd.svg) no-repeat;
    background-size: contain;
    background-position: 50%;
}
article .prev .icon {
    width: 50%;
    height: 1vw;
    margin-left: 10%;
    background: url(/img/daily/icon-rrwd.svg) no-repeat;
    background-size: contain;
    background-position: 50%;
}
article .prev.disabled,
article .next.disabled {
    opacity: 0.3;
}
article .prev.disabled:hover,
article .next.disabled:hover {
    cursor: default;
}
.mptime {
    /*background: coral;*/
    color: #999;
    font-size: 0.75rem;
    /*align-self: flex-end;*/
    text-align: right;
    font-family: monospace, monospace; /* https://github.com/necolas/normalize.css/issues/519 */
    font-family: courier, monospace, monospace;
    display: none;
    width: 74%;
    justify-content: flex-end;
    align-items: flex-end;
    align-items: center;
    line-height: 1rem;
    letter-spacing: -1px;
}

.progress-bar {
    position: absolute;
    bottom: 0;
    width: 77.8%;
    margin: 0;
    height: 0.6vw;
    display: none;
    cursor: pointer;
}
.progress-bar-inner {
    background: rgba(0,0,0,0.05);
    width: 100%;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    height: 0.6vw;
}
.progress-bar-played {
    /*width: 32%;*/
    background: #CAE6D0; /* todo: pick default & map to featured color */
    background: #a4d9e7;
    background: #1da0c3;
    height: 0.6vw;
}
.progress-bar-handle {
    width: 0.5vw;
    background: #000;
    height: .8vw;
    margin: 0 0 0 0.1vw;
}
.progress-bar-handle:hover {
    cursor: pointer;
}
.progress-bar-buffer {
    background: rgba(0,0,0,0.05);
    z-index: 1;
    height: 0.6vw;
    position: absolute;
}


@keyframes animappear {
    from    {opacity: 0;}
    to      {opacity: 1;}
}

article mplayer.album.idle:not(.show-track) .mptrackinfo,
article mplayer.album.idle .progress-bar,
article mplayer.album.idle .mptime,
article mplayer.album.idle .mpcontrols,
article mplayer.track.idle:not(.show-track) .mptrackinfo,
article mplayer.track.idle .progress-bar,
article mplayer.track.idle .mptime,
article mplayer.track.idle .mpcontrols {
    display: none;
}

article mplayer.album .mptrackinfo,
article mplayer.album .progress-bar,
article mplayer.album .mptime,
article mplayer.album .mpcontrols,
article mplayer.track .progress-bar,
article mplayer.track .mptime {
    display: flex;
    animation: animappear 0.3s;
}
article mplayer.track .mptrackinfo,
article mplayer.track .mpcontrols {
    display: none;
}
/*
article mplayer.extracklist {

}
article mplayer.playing.album.extracklist,
article mplayer.paused.album.extracklist {
    height: 30vw;
    margin: 1.5rem 0 2.5rem;
}
article mplayer.playing.album.extracklist .mpcontrols,
article mplayer.playing.album.extracklist .mptrackinfo,
article mplayer.playing.album.extracklist .mptime,
article mplayer.paused.album.extracklist .mpcontrols,
article mplayer.paused.album.extracklist .mptrackinfo,
article mplayer.paused.album.extracklist .mptime {
    display: none;
}
article mplayer.playing.album.extracklist mplayer-inner-tracklist,
article mplayer.paused.album.extracklist mplayer-inner-tracklist {
    display: flex;
    opacity: 1;
}
*/

article mplayer-inner-tracklist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /*background:rgba(255,150,200,0.5);*/
    /*display: none;*/
    overflow: auto;
    /*height: 19.3vw;*/
    max-height: 0px;
    /*height: 0;*/
    /*margin: 2.5vw 0 0.5vw;*/
    /*padding: 2.5vw 0 0.5vw;*/
    opacity: 0;
    transition: opacity 1s,
                max-height 1s;
}
.tracklist-expanded mplayer-inner-tracklist {
    display: flex;
    opacity: 1;
    max-height: 1500px;
}
.tracklist-expanded trtrack:first-of-type {
    margin-top: 2.5vw;
}
.tracklist-expanded trtrack:last-of-type {
    margin-bottom: 0.5vw;
}
.tracklist-expanded mplayer-inner {
    border-bottom: 1px solid black;
}
/*mplayer.album.extracklist.immediate mplayer-inner-tracklist {
    transition: opacity 0s;
}*/

article trtrack {
    display: flex;
    width: 100%;
}
article trtrack:hover {
    /*background-color:rgba(0,0,0,0.05);*/
    cursor: pointer;
}
article trnumber,
article trtrackname,
article trtime {
    padding: 0.5vw 2% 0.5vw 0;
}
article trnumber {
    width: 2rem;
    /*background: rgba(0,0,0,0.05);*/
    text-align: left;
    margin: 0 0 0 3.05344%;
    padding-right: 0;
}
article trtrackname {
    width: 65%;
    /*background: rgba(0,0,0,0.02);*/
}
article trtime {
    width: 25%;
    /*background: rgba(0,0,0,0.05);*/
    text-align: right;
    padding-right: 2.3%;
}

article trtrack.playing {
    font-weight: bold;
}


/* player artist bio player artist bio player artist bio player artist bio */

article > mplayer-artist:nth-of-type(even) {
    display: none;
}

article > mplayer-artist {
    /*background: orange;*/
    grid-column: 2 / span 3;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 1.9rem 0 0;
}
article > mplayer-artist.large-player.merch {
    margin-top: 8vw; /* height of merch row */
}
article > mplayer-artist.large-player {
    margin-top: -0.75vw;
}

#s-daily article > mplayer-artist .bioimg {
    display: flex;
    width: 9.6vw;
    height: 9.6vw;  
    text-indent: -999rem;
}

#s-daily article > mplayer-artist .bioimg img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 1px solid rgba(0,0,0,0.3);
}
#s-daily article > mplayer-artist .bioimg:not(.popupImage):hover {
    cursor: default;
}
#s-daily article > mplayer-artist .bioimg.popupImage img {
    border: 1px solid rgba(0,0,0,0.05);
}
#s-daily article .bioimg.popupImage img:hover {
    border: 1px solid rgba(0,0,0,1);
    transition: border .1s ease-out;
}

article > mplayer-artist .artist-info {
/*  background:pink;*/
    display:flex;
    flex-direction: column;
    align-items: center;
    margin: 0.5rem 0 0;
    width:100%;
}

article > mplayer-artist .artist-name {
    margin: 0 0 0.25rem;
/*  background: yellow;*/
    text-align: center;
    font-size: 0.875rem;
}

#s-daily article > mplayer-artist .artist-location {
    color: #909090;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#s-daily article > mplayer-artist .artist-follow {
    margin: 0.375rem 0 0;
    background-color: rgba(0,0,0,0.07);
    font-size: .625rem;
    line-height: 1.5rem;
    padding: 0 1rem;
    text-transform: uppercase;
    /*display: inline-block;*/
    font-weight: bold;
    color: #000;
}

@media (width > 768px) {
    #s-daily article > mplayer-artist follow-button {
        margin: 0.375rem 0 0;
    }
}

#s-daily .mpbuttons wishlist-button {
    height: 100%;
    border-right: 1px solid;
    min-width: 33.33%;
    flex: 1;
}

@media (width > 768px) {
    #s-daily .mpbuttons wishlist-button {
        width: 100%;
        height: 33.33%;
        border-bottom: 1px dotted #000;
        border-right: 0;
        flex: 1;
    }
}

#s-daily .mpbuttons wishlist-button::part(button) {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
}

@media (width > 768px) {
    /* Fake icon-only button at larger breakpoint */
    #s-daily .mpbuttons wishlist-button::part(button) {
        font-size: 0;
        gap: 0;
    }
}

#s-daily article > mplayer-artist .artist-follow:hover {
    color: #1da0c3;
    background-color: rgba(0,0,0,0.03);
    /*outline: 1px solid #1da0c3;*/
    cursor: pointer;
    text-decoration: none;
}

#s-daily article > mplayer-artist .artist-follow .following-msg,
#s-daily article > mplayer-artist .artist-follow .unfollow-msg {
    display: none;
}
#s-daily article > mplayer-artist .artist-follow.following .follow-msg,
#s-daily article > mplayer-artist .artist-follow.following .unfollow-msg,
#s-daily article > mplayer-artist .artist-follow.following:hover .following-msg {
    display: none;
}
#s-daily article > mplayer-artist .artist-follow.following .following-msg,
#s-daily article > mplayer-artist .artist-follow.following:hover .unfollow-msg {
    display: block;
}
#s-daily article > mplayer-artist .artist-follow.following {
    background: 0;
    color: #909090;
}
#s-daily article > mplayer-artist .artist-follow.following:hover {
    color: #1da0c3;
}

#s-daily article > mplayer-artist a:link, 
#s-daily article > mplayer-artist a:visited,
#s-daily article > mplayer-merch a:link, 
#s-daily article > mplayer-merch a:visited {
    color: #000;
}

#s-daily article > mplayer-artist a:hover {
    color: #000;
}

article > mplayer-artist.no-image {
    height: 8vw;        /* matches player-inner */
    margin-top: 2.5rem; /* matches player-inner */
    justify-content: center;
}
article > mplayer-artist.large-player.no-image {
    margin-top: 0;
}
article > mplayer-artist.no-image .artist-info {
    margin-top: 0;
}




/* player sidebar player sidebar player sidebar player sidebar*/

article mplayer-sidebar {
    display: none;
    opacity: 0;
}

/* heights ~= 27 or 28px @ 1280. 1vw == 12.8px */

#s-daily article mplayer-sidebar .mpbuttons a {
    /*display: inline;*/
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2.1875vw;
    font-weight: bold;
    font-size: 0.625rem;
    text-transform: uppercase;
    margin: 0 0 0.78125vw;
}

#s-daily article mplayer-sidebar .mpbuttons a.mpbuy {
    background: black;
    color: #fff;
    line-height: 2.10938vw;
    font-size: 0.75rem;
}
#s-daily article mplayer-sidebar .mpbuttons .mpbuy.purchased-msg {
    background: #eee;
    line-height: 2.1875vw;
    font-size: 0.625rem;
    color: #000;
}

#s-daily article mplayer-sidebar .mpbuttons .mpbuy span {
    /*flex: 1;*/
}

#s-daily article mplayer-sidebar .mpbuttons a.mpwl {
    background:#eee;
}
#s-daily article mplayer-sidebar .mpbuttons a.mpgo {
    background:#eee;
    margin: 0;
}

#s-daily article mplayer-sidebar .mpbuy,
#s-daily article mplayer-sidebar .mpbuy:hover,
#s-daily article mplayer-sidebar .mpbuy:visited {
    color: #fff;
}

#s-daily article mplayer-sidebar .mpwl,
#s-daily article mplayer-sidebar .mpwl:hover,
#s-daily article mplayer-sidebar .mpwl:visited, 
#s-daily article mplayer-sidebar .mpgo,
#s-daily article mplayer-sidebar .mpgo:hover,
#s-daily article mplayer-sidebar .mpgo:visited {
    color: #000;
}



article mplayer-sidebar mpmerch {
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0.25rem;
    grid-row-gap: 0.25rem;

}

article mplayer-sidebar mpmerchformats {
    font-size: 0.75rem;
    margin-bottom: 0.3125vw;
    grid-column: 1 / -1;
}

/* first image big */
article mplayer-sidebar mpmerch.large mpmerchitem:nth-child(2) {
    grid-column: 1 / -1;
}
article mplayer-sidebar mpmerch mpmerchitem:nth-child(5),
article mplayer-sidebar mpmerch mpmerchitem:nth-child(6),
article mplayer-sidebar mpmerch mpmerchitem:nth-child(7) {
    display: none;
}
article mplayer-sidebar mpmerch.small mpmerchitem:nth-child(5),
article mplayer-sidebar mpmerch.small mpmerchitem:nth-child(6),
article mplayer-sidebar mpmerch.small mpmerchitem:nth-child(7),
article mplayer-sidebar mpmerch.large mpmerchitem:nth-child(5),
article mplayer-sidebar mpmerch.large mpmerchitem:nth-child(6),
article mplayer-sidebar mpmerch.large mpmerchitem:nth-child(7) {
    display: block;
}

article mplayer-sidebar mpmerchitem {
    background: plum;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}

article mplayer-sidebar mpmerchitem:hover {
    outline: 1px solid rgba(0,0,0,1);
    transition: outline .15s ease-in-out;
}

article mplayer + p,
article mplayer-sidebar + p {
    margin-top: 0;
}

/* now-playing bug */

#p-now-playing {
    /* background: yellow; */
    /* grid-column: 2 / span 4; 5.55% 5.55% 1.6% 5.55% */ 
    position: fixed;
    /*bottom: 20px;*/
    bottom: -78px;
    left: 2.775%;
    width: 18.25%; /*5.55+1.6+5.55+5.55*/
    height: 68px;
    overflow: hidden;
    transition: all .4s ease-in-out;
    font-size: 0.5625rem;
    color:rgba(0,0,0,0.5);
    cursor: pointer;
}

#p-now-playing .art-text {
    border: 1px solid #909090;
    height: 54px;
    background: white;
    margin: 2px 0 0 ;
    color: #000;
    font-size: 0.75rem;
    box-sizing: border-box;
}

#p-now-playing .art-text img {
    float: left;
    height: 52px;
    width: 52px;
    margin-right: 10px;
}

#p-now-playing .art-text .albumtitle {
    margin: 10px 0 0;
}

#p-now-playing .art-text > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#p-now-playing.visible {
    bottom: 20px;
}


/* WP element styling + general cleanup */

#s-daily article h2 {
    font-weight: bold;
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
}


#s-daily article h3 {
    font-weight: bold;
    font-size: 1rem;
    margin: 1.5rem 0 0;
}

article h3 > strong {
    font-weight: bold;
}

#s-daily article h3 a,
#s-daily article h3 a:visited {
    color: #000;
}

article > article-end {
    grid-column: 10;
    background: url(/img/daily/bc-logo-end.png) no-repeat;
    background-size: 100%;
    width: 17px;
    height: 11px;
    justify-self: center;
    margin: 1.5rem 0 2.5rem;
}


/* article footer article footer article footer  */

article > article-footer {
    margin: 0 0 2rem 0;
}

article > article-footer .genre {
    text-align: center;
    margin: 1.5rem 0 2.5rem;
}

article > article-footer .moreingenre {
    margin: 1rem 0 0;
    text-align: center;
}

article > article-footer .moreingenre a {
    text-transform: lowercase;
}

#s-daily article > article-footer .genre a {
    padding: .25rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    text-transform: lowercase;
    border: 1px solid #909090;
    color: #909090;
    margin: 0 0.2rem 0.5rem 0;
    display: inline-block;
}

#s-daily article > article-footer .genre a:hover {
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
} 

/* admin */ 
#s-daily .admin-banner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: white;
    background: salmon;
    height: 25px;
    overflow: hidden;
}
#s-daily .admin-banner.dismissed {
    height: 0;
    transition: height 200ms;
}
#s-daily .admin-banner.color2 { /* idk */
    background: rgba(250, 128, 114, 0.6);
}
#s-daily .admin-banner > * {
    margin: 0 0.4rem;
}
#s-daily #admin-panel {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

#p-daily-article .player-not-available {
    display: none;
}
#p-daily-article.admin .player-not-available {
    display: block;
    color: white;
    margin: 2rem 0;
    padding: 0.5rem;
    font-style: italic;
    background: red;
}
#p-daily-article.admin .player-not-available:before {
    content: 'admin: player unavailable';
}



/* misc */

#s-daily article iframe.bc-video-embed {
    width: 100% !important;
    height: calc(((11.1vw + 1.6vw) * 4) * (9/16) + 120px) !important; /* calculate width (4 sets of 11.1vw and 1.6vw columns), multiply by aspect ratio, add info_area height (120px) */
    margin-bottom: 1.5rem;
}
#s-daily article iframe.bc-youtube-embed, #s-daily article iframe.bc-vimeo-embed {
    width: 100% !important;
    height: calc(((11.1vw + 1.6vw) * 4) * (9/16)) !important; /* calculate width (4 sets of 11.1vw and 1.6vw columns), multiply by aspect ratio, add info_area height (120px) */
    margin-bottom: 1.5rem;
}

article hr {
    width: 100%;
    height: 11px;
    border: 0;
    padding: 0;
    background: url(/img/daily/section-break.svg) no-repeat;
    background-position: 50% 50%;
    margin: 2rem 0;
}


/****** legacy support ******/
/* tiled galleries - custom css */
.tiled-gallery {
    clear: both;
    margin: 60px 0;
    overflow: hidden;
}

/* tiled galleries - wp theme */
.tiled-gallery .gallery-row {
    overflow: hidden;
}
.tiled-gallery .gallery-group {
    float: left;
    position: relative;
}
.tiled-gallery .tiled-gallery-item {
    float: left;
    margin: 0;
    position: relative;
    width: inherit;
}
.tiled-gallery .tiled-gallery-item a {
    background: 0 0;
    border: none;
    color: inherit;
    margin: 0;
    padding: 0;
    text-decoration: none;
    width: auto;
}
.tiled-gallery .tiled-gallery-item img, .tiled-gallery .tiled-gallery-item img:hover {
    background: 0 0;
    border: none;
    box-shadow: none;
    max-width: 100%;
    padding: 0;
    vertical-align: middle;
}
.tiled-gallery img {
    margin: 2px !important;
}

/* modifications to legacy gallery styles */
.tiled-gallery .tiled-gallery-item {
    width: 100%;
}
.tiled-gallery .tiled-gallery-caption {
    position: absolute;
    bottom: 0px;
    opacity: 0;
    background: rgba(255,255,255,0.7);
    width: 100%;
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
}
.tiled-gallery .tiled-gallery-item:hover .tiled-gallery-caption {
    opacity: 1;
}



/* media queries ... 992, 768min, 768max, 600 */


@media only screen and (min-width: 768px) {

    /* player */
    mplayer:not(.large) {
        border: 1px solid #000;
        margin: 2.5rem 0 3rem;
    }
    mplayer:not(.large).merch merchrow {
        display: none;
    }
    bamplayer-art:not(.large-player) {
        display: none;
    }

    mplayer:not(.large) .mpbutton {
        margin-left: 2.3%;
    }
    mplayer:not(.large) .mpbuttons {
        display: none;
    } mplayer.slimv2 .mpbuttons {
        display: flex; /* note, pairs with rule directly above */
    }
    mplayer:not(.large) .mpaa {
        display: block;
        /*width: 20.99237%;
        height: 20.99237%;*/
        width: 11.1vw; /* vw used to make square */
        height: 11.1vw;
        flex-shrink: 0;
        margin: 0 0 0 3.05344%;
        background-size: contain;
        outline: 1px solid rgba(0,0,0,0.75);
        outline-offset: -1px;
        z-index: 3;
        background-color: #fff;
    }
    mplayer:not(.large) .mptext {
        width: 100%;
    }
    mplayer:not(.large) .progress-bar {
        width: 76%;
        margin: 0 0 0 12.6vw;
    }

    mplayer-sidebar:not(.large-player) {
        grid-column: 16 / span 3;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 2.5rem 0 0;
    }
    mplayer-sidebar:not(.large-player).show {
        opacity: 1;
    }
    mplayer-sidebar:not(.large-player) .mpbuttons {
        display: flex;
        flex-direction: column;
    }
    mplayer-sidebar:not(.large-player).merch {
        grid-row: span 2;
    }

}



















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

    /* type */

    article > * {
        grid-column: 2 / span 17;
    }

    article > #feature-image {
        grid-row: 1;
        margin: 0;
    }
    article > #feature-image.small,
    article > #feature-image.medium {
        grid-column: 1 / -1;
        min-height: 200px;
    }

    article > article-playbutton {
        grid-row: 2;
    }
    article-playbutton icon {
        margin-top: -32px;
        margin-bottom: 0;
    }

    article.aotd article-playbutton {
        display: inline-block;
        vertical-align: bottom;
        margin: 0 0.25rem -0.1rem 0;
    }
    article.aotd article-playbutton icon {
        width: 40px;
        height: 40px;
    }

    article > article-type {
        grid-column: 2 / span 17;
        font-size: 0.875rem;
        margin: 1.125rem 0 0;
        /*
        margin: 2.6125rem 0 0;
        text-align: center;
        font-weight: bold;
        color: #909090;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background:green;
        */
    }

    article > article-title {
        grid-column: 2 / span 17;
        margin: 0.75rem 0 0;
        font-size: 1.7rem;
        /*letter-spacing: -1px;
        font-weight: bold;
        text-align: center;
        line-height: 120%;
        background: aqua;*/
    }
    article > article-subtitle {
        /*
        margin: 2.5rem 0 0;
        text-align: center;
        */
        grid-column: 2 / span 17;
        font-size: 1rem;
        /*background: purple;*/
    }

    article > article-credits {
        margin: 1.125rem 0 2rem;
        font-size: 0.875rem;
        grid-column: 2 / span 17;
        text-align: center;
        color: #909090;
        /*background: yellow;*/
    }
    article-credits a {
        color: #909090;
        /*background: orange;*/
    }


    article bamplayer-art {
        grid-column: 2 / span 17;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 2.5rem;
        align-items: center;
        justify-content: center;
        width: 100%;
        /*height: 49.16vw;*/
        /*height: calc(88.9vw - 14px);*/
        height: calc(100vw - 5.55vw * 2);
        border: 1px solid #000;
        overflow: hidden;
    }
    article bamplayer-art.aotd {
        margin-top: 0;
    }

    /* photo layouts, mobile */

    article > p.photo-midinline,
    article > figure.photo-midinline,
    article > figure.photo-halfa,
    article > figure.photo-halfb {
        grid-column: 2 / span 17;
    }

    article > p.photo-fullbleed,
    article > figure.photo-fullbleed {
        grid-column: 1 / span 19;
    }

    article figure.photo-fullbleed figcaption {
        margin-right: 5.5%;
        margin-left: 5.5%;
    }
    
    article figure.photo-halfb figcaption {
        margin-right: 0;
        margin-right: 0;
    }

    article figure figcaption {
        flex: 1;
        text-align: right;
        color: #909090;
        font-size: 0.75rem;
        margin: 0.5rem 0 0;
    }
    article figure.feature-caption figcaption { /* legacy feature-image captions */
        margin: 0;
    }

    article #feature-image-caption,  /* non-legacy feature-image captions */
    article figure.feature-caption { /* legacy feature-image captions */
        flex: 1;
        text-align: right;
        color: #909090;
        font-size: 0.75rem;
        margin: 0.5rem 0 0;

        grid-row: 2;
        grid-column: 12 / span 7;
    }

    article figure {
        margin: 0;
        /*background-color: aqua;*/
        width: auto!important;
    }

    article figure img {
        flex: 1;
        /*background: orange;*/
        width: 100%;
        height: auto;
    }



    /* player + related + player + related */

    article > .player-wrapper,
    article > .player-wrapper.large {
        grid-column: 2 / span 17;
    }

    article mplayer {
        margin: 0 0 calc(2.5rem + 11.2vw );
    }

    article mplayer.merch merchrow {
        height: 16.53vw; /* 62/375 */
        height: 22vw;
        justify-content: center;
    }

    article mplayer thumb {
        outline: 2px solid rgba(0,0,0,0.1);
        /*
        width: 10.67vw;
        height: 10.67vw;
        */
        width: 16vw;
        height: 16vw;
        /*margin: 2.933vw 3vw 0 0;*/
        margin: 2.993vw 4.2vw 0 0;
    }

    article mplayer thumb:first-child {
        /*margin: 2.933vw 3vw 0 2.933vw;*/
        margin: 2.933vw 3.5vw 0 3.5vw;
    }

    article mplayer thumb:nth-of-type(5),
    article mplayer thumb:nth-of-type(6),
    article mplayer thumb:nth-of-type(7) {
        display: none;
    }

    article mplayer-inner {
        height: 22.67vw;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: flex-start;
        padding: 4vw 0 0 0;
    }

    .mpbutton {
        width: 16vw;
        height: 16vw;
        flex-shrink: 0;
        border-radius: 18vw;
        margin: 0 4%;
        background: #fff;
        /*background-color:pink;*/
        border: 1px solid #000;
    }

    .mpbutton .icon,
    .paused .mpbutton .icon {
        background-size: 30%;
    }
    .playing .mpbutton .icon {
        background-size: 30%;
    }

    .mptext {
        font-size: 1rem;
        font-size: 0.875rem;
        display: flex;
        margin: 0;
        flex-wrap: wrap;
        width: 72%;
        /*background: salmon;*/
    }

    article mplayer .mpbuttons,
    article mplayer.large .mpbuttons {
        width: 100%;
        height: 11.2vw;
        display: flex;
        flex-direction: row;
        border: 0;
        background: #ededed;
        position: absolute;
        bottom: calc(-11.2vw - 1px);
        outline: 1px solid #000;
    }
    #s-daily article mplayer .mpbuttons a {
        border: 0;
        height: auto;
        border-right: 1px solid #000;
    }
    #s-daily article mplayer .mpbuttons a:last-child {
        border-right: 0;
    }
    #s-daily article .collect-item.purchased a.purchased-msg {
        display: flex;
    }
    article .collect-item.purchased .icon {
        margin: 0.1rem 0.25rem 0 0;
        position: static;
    }
    article .collect-item .mpwl.wishlist-msg .icon,
    article .collect-item .mpwl.wishlisted-msg .icon {
        margin: 0.15rem 0.25rem 0 0;
        position: static;
    }


    .mpalbuminfo {
        /*background: orange;*/
        width: 100%;
        /*padding: 0 5% 0 0;*/
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        /*
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        */
    }
    .mpartist {
        /*background: rgba(0,0,0,0.17);*/
        width: 100%;
    }
    .mpartist::before {
        content: 'by ';
    }

    .mptrackinfo {
        /*background: aqua;*/
        width: 70%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    .mptracktitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 0.3rem;
    }

    .mpcontrols {
        width: 30%;
        height: 1.2rem;
        /*background: brown;*/
    }
    article .prev,
    article .next {
        /*background:yellow;*/
        height: 100%;
    }
    article .next .icon {
        width: 50%;
        height: 1rem;
        margin-left: 20%;
        background: url(/img/daily/icon-ffwd.svg) no-repeat;
        background-size: contain;
        background-position: 50%;
    }
    article .prev .icon {
        width: 50%;
        height: 1rem;
        margin-left: 0;
        background: url(/img/daily/icon-rrwd.svg) no-repeat;
        background-size: contain;
        background-position: 50%;
    }

    .mptime {
        /*background: green;*/
        font-size: 0.5625rem;
        line-height: 0.5625rem;
        display: none;
    }

    article mplayer.album .mptime {
        display: none;
    }

    .progress-bar {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .progress-bar-inner {
        background: rgba(0,0,0,0.05);
        width: 100%;
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: flex-end;
    }
    .progress-bar-played {
        /*width: 32%;*/
        background: #CAE6D0; /* todo: pick default & map to featured color */
        background: #a4d9e7;
        background: #1da0c3;
    }
    .progress-bar-handle {
        width: 1.2vw;
        margin: 0;
    }
    .progress-bar-buffer {
        background: rgba(0,0,0,0.05);
        height: 1vw;
    }

    .progress-bar, 
    .progress-bar-inner,
    .progress-bar-played,
    .progress-bar-handle {
        height: 4vw;
    }

    #s-daily article mplayer .mpbuttons .mpwl,
    #s-daily article mplayer .mpbuttons .mpgo,
    #s-daily article .collect-item.purchased .mpbuy,
    #s-daily article .collect-item.purchased .mpgo {
        font-size: .75rem;
    }

    /* artist bio artist bio artist bio */
    

    article > mplayer-artist:nth-of-type(odd) {
        display: none;
    }
    article > mplayer-artist:nth-of-type(even) {
        display: flex;
    }

    article > mplayer-artist {
        /*background: orange;*/
        grid-column: 2 / span 17;
        flex-direction: row;
        /*
        grid-row: span 2;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin: 0;
        */
        margin: 0 0 2rem;
    }

    article > mplayer-artist.merch, article > mplayer-artist.large-player.merch {
        margin-top: 0;
    }

    article > mplayer-artist.no-image {
        justify-content: center;
        padding-left: 5%;
        height: auto;
        margin-top: 0;
    }


    #s-daily article > mplayer-artist .bioimg {
        width: 16vw;
        height: 16vw;
        margin: 0 4%;
    }

    article > mplayer-artist .artist-info {
        /*background:pink;*/
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 66%;
        height: 2rem;
        margin: 0;
    }

    article > mplayer-artist .artist-name {
        margin: 0;
        /*background: yellow;*/
        text-align: left;
        font-size: 0.875rem;
        flex: 1 0 auto;
        width: 63%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #s-daily article > mplayer-artist .artist-location {
        color: #909090;
        font-size: 0.75rem;
        /*background: purple;*/
        flex: 1 0 auto;
        width: 63%;
    }

    #s-daily article > mplayer-artist .artist-follow {
        margin: 0.5vw 0 0.5vw 3%;
        padding: 0;
        background-color: rgba(0,0,0,0.07);
        flex-grow: 1;
        height: 100%;
        width: 34%;
        border: 1px solid #000;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    #s-daily article > mplayer-artist .artist-follow:hover {
        color: #1da0c3;
        background-color: rgba(0,0,0,0.03);
        /*outline: 1px solid #1da0c3;*/
        cursor: pointer;
        text-decoration: none;
    }
    #s-daily article > mplayer-artist .artist-follow.following:hover {
        color: #1da0c3;
    }

    #s-daily article > mplayer-artist .artist-follow.following {
        background: none;
        border: 0;
        color: #909090;
    }

    #s-daily article > mplayer-artist .artist-follow.following .following-msg,
    #s-daily article > mplayer-artist .artist-follow.following:hover .unfollow-msg {
        display: block;
        white-space: nowrap
    }


    /* now playing */

    #p-now-playing {
        position: fixed;
        bottom: -75px;
        left: 0;
        width: 100%;
        height: 75px;
        overflow: hidden;
        transition: all .4s ease-in-out;
        color:rgba(0,0,0,0.5);
        cursor: pointer;
        text-indent: 0.5vw;
    }

    #p-now-playing .art-text {
        border-top: 1px solid #909090;
        border-bottom: 0;
        border-left: 0;
        border-right: 0;
        height: 64px;
        background: white;
        margin: 2px 0 0 ;
        color: #000;
        font-size: 0.75rem;
        box-sizing: border-box;
    }


    #p-now-playing .art-text img {
        height: 64px;
        width: 64px;
    }

    #p-now-playing.visible {
        bottom: 0;
    }

    /* aotd aotd aotd */

    article.aotd {
        background: url('/img/daily/aod-ornament@2x.gif'),  url('/img/daily/aod-ornament@2x.gif');
        background-repeat: no-repeat, no-repeat;
        /*
        background-size: 80vw, 80vw;
        */
        background-size: 60vw, 60vw;
        /*background-size: 420px;*/
        background-position: -30vw -30vw, 70vw -30vw;
    }

    article aotd-ornament,
    article aotd-ornament.right {
        display: none;
    }

    /* tags */

    #s-daily article > article-footer .genre a:last-of-type {
        margin: 0;
    }

    /* article footer */

    article > article-footer {
        margin: 0 0 3rem 0;
    }

    /* misc */
    #s-daily article iframe.bc-video-embed {
        height: calc((100vw - 5.55vw * 2) * (9/16) + 120px) !important; /* calculate width (5.55vw margins), multiply by aspect ratio, add info_area height (120px) */
    }
    #s-daily article iframe.bc-youtube-embed, #s-daily article iframe.bc-vimeo-embed {
        height: calc((100vw - 5.55vw * 2) * (9/16)) !important; /* calculate width (5.55vw margins), multiply by aspect ratio, add info_area height (120px) */
    }


}

/* trackpipe/public/css/fan/signup/fan_signup_common.css */
body.prevent-scroll {
    height: 100%;
    overflow: hidden;
}

/* common buttons */
.signup-common-form button,
.ui-dialog.nu-dialog .signup-common-form button,
.ui-dialog.nu-dialog .welcome-app-email-buttons button {
    background: rgb(0,161,198);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    padding: 0 1em;
    text-align: center;
    border: none;
    vertical-align: top;
}
.signup-common-form button:hover,
.ui-dialog.nu-dialog .signup-common-form button:hover,
.ui-dialog.nu-dialog .welcome-app-email-buttons button:hover,
.signup-common-form button:focus,
.ui-dialog.nu-dialog .signup-common-form button:focus,
.ui-dialog.nu-dialog .welcome-app-email-buttons button:focus {
    background: rgb(0,161,198);
    border: none;
    text-decoration: underline;
}
.signup-common-form button:active,
.ui-dialog.nu-dialog .signup-common-form button:active,
.ui-dialog.nu-dialog .welcome-app-email-buttons button:active {
    background: rgb(0,161,198);
    border: none;
}
.signup-common-form button[disabled],
.ui-dialog.nu-dialog .signup-common-form button[disabled],
.signup-common-form button[disabled]:hover,
.ui-dialog.nu-dialog .signup-common-form button[disabled]:hover,
.ui-dialog.nu-dialog .welcome-app-email-buttons button[disabled],
.ui-dialog.nu-dialog .welcome-app-email-buttons button[disabled]:hover {
    background: #555;
    color: #ccc;
    opacity: 0.3;
    border: none;
    text-decoration: none;
}

.ui-dialog.nu-dialog .signup-common-form button.submit {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
}

.ui-dialog.nu-dialog .action-form button.login {
    background-color: #FFF;
    color: rgb(0,161,198);
    border: 1px solid rgb(0,161,198);
}


/* nu-dialog tweaks */

.ui-dialog.nu-dialog.blank-title .ui-dialog-titlebar {
    border: none;
    background-color: #FFF;
}

.ui-dialog.nu-dialog.blank-title .ui-dialog-content {
    padding-top: 0;
}

.ui-dialog.nu-dialog.transparent-background {
    background: transparent;
}

.ui-dialog.nu-dialog.hide-title .ui-dialog-titlebar {
    display: none;
}

.ui-dialog.nu-dialog.hide-title .ui-dialog-content {
    padding-top: 0;
    padding-bottom: 35px;
}

.ui-dialog.nu-dialog.overflow-dialog {
    overflow: visible;
}

.ui-dialog.nu-dialog.overflow-dialog .ui-dialog-titlebar {
    border-radius: 5px 5px 0 0;
}

.ui-dialog.nu-dialog .ui-dialog-titlebar-close {
    z-index: 5;
}

.ui-dialog.nu-dialog.blank-title.mobile-onboarding .ui-dialog-titlebar {
    position: absolute;
    right: 0px;
}

/* stuff common to all panes */

.signup-common-form {
    opacity: 0;
}

/* default inner: full width */
.signup-common-inner {
    width: 100%;
    margin: 0 auto;
}

.signup-common-form.visible {
    opacity: 1;
}

.signup-common-form.immediate {
    transition: opacity 0s;
}

.signup-common-form .siteroot {
    background-color: #ededed;
    padding: 5px 7px 5px 0px;
}

.signup-common-form .item.heading-item {
    font-size: 14px;
    margin: 0 auto 16px auto;
    padding: 0;
}

.signup-common-form .error-bubble {
    font-weight: normal;
    margin: 0;
    font-size: 16px;
    color: #c43329;
    margin: 5px 0 0 0;
}

.signup-common-form label {
    width: 11em;
    display: block;
    width: 100%;
    display: block;
    text-align: left;
    clear: both;
    margin-bottom: 2px;
    /*line-height: 1em;*/
    font-size: 16px;
    /*line-height: 16px;*/
    margin-top: 10px;
    z-index: 0;
}

.signup-common-form .item {
    padding: 0 0 10px 0;
    width: 100%;
    margin: 0 auto;
}

.signup-common-form .buttons {
    padding-top: 2px;
    width: 100%;
    margin: 0 auto;
}

.ui-widget-content .signup-common-form a,
.signup-common-form a {
    color: rgb(0,161,198);
    cursor: pointer;
}

.ui-widget-content .signup-common-form .buttons a:hover,
.signup-common-form .buttons a:hover {
    text-decoration: underline;
}

.signup-common-form .divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #818285;
    margin-bottom: 28px;
    opacity: 0.5;
}

.signup-common-form .divider.lower-divider {
    margin-top: 20px;
}

.signup-common-form input[type=text],
.signup-common-form input[type=email],
.signup-common-form input[type=password] {
    height: 35px;
    padding-left: 10px;
    background: #fff;
    border: 1px solid #ccc;
    color: #333;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    font-size: 16px;
}

.signup-common-form input[type=text].has-validation-error,
.signup-common-form input[type=email].has-validation-error,
.signup-common-form input[type=password].has-validation-error {
    border: 1px solid #c43329;;
}

.signup-common-form .hint {
    font-size: 12px;
}

.signup-common-form .dialog-body {
    font-size: 16px;
    line-height: 20px;
}

.signup-common-form .skinny {
    width: 340px;
    margin: 0 auto;
}

/* signup pane */

.signup-form .signup-common-inner {
    margin-top: 10px;
}

.signup-form .choose-your-url {
    text-align: center;
    margin-bottom: 10px;
}

.signup-form .email,
.signup-form .email-inner,
.signup-form .username,
.signup-form .username-inner,
.signup-form .username-input  {
    display: inline-block;
    width: 100%;
}

.signup-form .email-checking {
    position: absolute;
    right: 44px;
    top: 54px;
    width: 25px;
}

.signup-form .email-label {
    margin: 2px 0 2px 0;
}

.signup-form .email-inner {
    font-size: 14px;
    font-weight: bold;
    /*margin: 0 5px 0 0;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

/* band login in signup form */

.signup-form .existing-account-wrapper {
    transition: padding 0.2s,
                background 0.3s,
                margin 0.2s;

    background-color: rgba(244,236,134, 0);
    padding: 0 20px 0 20px;
    margin: 0 -20px 0 -20px;
}

.signup-form .existing-account-wrapper.show-existing {
    background-color: rgba(244,236,134, 1);
    padding: 15px 20px 5px 20px;
    margin: 0 -20px 15px -20px;
}

.signup-form .existing-account-wrapper > * {
    width: 340px;
}

.signup-form .existing-account-login {
    max-height: 0px;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.2s ease-out,
                visibility 0s 0.4s;
    display: block;
    visibility: hidden;
}

.signup-form .existing-account-login.show {
    max-height: 300px;
    transition: max-height 0.2s ease-in,
                visibility 0s 0s;
    visibility: visible;
}

.signup-form .existing-account-login .account-message {
    text-align: left;
    font-size: 14px;
    margin: 0 auto;
}

.signup-form .existing-account-login p.strong {
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 16px;
}

.signup-form .before-chooser.disabled {
    opacity: 0.3;
}

/* username */

.signup-form .username-label {
    vertical-align: top;
}

.nu-dialog .signup-form .existing-artist .username-label {
    display: none;
}

.signup-form .username.artist-email input.username-input,
.signup-form .existing-artist input.username-input {
    width: 225px;
    display: inline-block;
}

.signup-form .username-inner {
    position: relative;
}

.signup-form .username .bandcamp-com {
    display: none;
}

.signup-form .username.artist-email .bandcamp-com,
.signup-form .existing-artist .bandcamp-com {
    display: inline-block;
    background-color: rgba(215,215,215,0.5);
    margin-bottom: 4px;
    vertical-align: top;
    padding: 9px 5px 8px 6px;
    font-size: 14px;
    color: rgba(51,51,51, 0.5);
}

/* password */

.signup-form .password-label {
    vertical-align: top;
}

.signup-form .password.masked {
    height: 24px;
    vertical-align: middle;
    margin-top: 12px;
    text-align: left;
    font-size: 14px;
}

/* tos */

.signup-form .tos, .signup-form .tos-inner, .signup-form .tos-input, .signup-form .tos-label,
.signup-form .notify-me-container, .signup-form .notify-me-band, .signup-form .notify-me-label,
.signup-form .notify-me-message, .signup-form .notify-me-checkbox {
    display: inline-block;
}

.signup-form label.tos-label {
    text-align: left;
    width: auto;
    margin: 0;
    font-size: 14px;
}
.signup-form .notify-me-message {
    text-align: left;
    width: 300px;
    margin: 0;
    font-size: 14px;
}

.signup-form .tos,
.signup-form .notify-me-container {
    width: 100%;
    margin: 12px 0 12px 0;
}

.signup-form .notify-me-checkbox {
    vertical-align: top;
}

.signup-form .tos-inner
.signup-form .notify-me-inner {
    width: 100%;
}

.signup-form .tos-input {
    vertical-align: top;
    margin-top: 3px;
    margin-right: 3px;
}

.signup-form .tos-label {
    width: auto;
}

.signup-form .terms-text {
    display: inline-block;
    width: 100%;
}

/* save-card */

.signup-form .save-card, .signup-form .save-card-inner, .signup-form .save-card-input, .signup-form .save-card-label {
    display: inline-block;
}

.signup-form label.save-card-label {
    text-align: left;
    width: 320px;
    margin: 0;
    font-size: 14px;
}

.signup-form .save-card {
    width: 100%;
    margin: 12px 0 12px 0;
}

.signup-form .save-card-inner {
    width: 100%;
}

.signup-form .save-card-input {
    vertical-align: top;
    margin-top: 3px;
    margin-right: 3px;
}

.signup-form .save-card-label {
    width: auto;
}

.signup-form .names .item {
    width: 46%;
    display: inline-block;
    padding-right: 0px;
    margin-right: 4%;
    vertical-align: top;
}

.signup-form .names .item:last-child {
    margin-right: 0;
    width: 50%;
}

.signup-form .edit-location .location-display {
    color: #9c9c9c;
    margin-top: 6px;
    margin-bottom: 11px;
}

.signup-form .edit-location .actual-location {
    color: #333;
}


/* chooser */

.signup-form .chooser .chooser-message {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0 20px 0;
}

.signup-form .chooser select {
    width: 350px;
    height: 26px;
    font-size: 16px;
    margin: 0 0 15px 0;
}

/* link to log in */

.signup-form .login-link {
    width: 100%;
    margin: 39px 0 0 0;
    font-size: 12px;
    text-align: center;
    color: #818285;
}

.signup-form .buttons.no-bottom-link {
    margin-bottom: 5px;
}


/* login form */

.login-form .signup-common-inner {
    width: 340px;
    margin-top: 10px;
}

.login-form .forgot-password {
    font-size: 12px;
    text-align: center;
    margin: 20px 0;
}

.login-form .change-email {
    font-size: 12px;
    text-align: center;
    margin: 0 0 18px 0;
    color: #818285;
    width: 341px;
    /*white-space: nowrap;*/
}

.login-form .buttons {
    margin-top: 12px;
}

.login-form .chooser .chooser-message {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0 20px 0;
}

.login-form .chooser select {
    width: 100%;
    height: 26px;
    font-size: 16px;
}

.login-form .before-chooser.disabled {
    opacity: 0.3;
}

.login-form .two-factor .two-factor-heading-item {
    font-size: 16px;
    font-weight: 500;
    margin: 18px 0 10px 0;
}

.login-form .two-factor-remember input {
    display: inline-block;
    margin: 3px 3px 0 0;
    vertical-align: top;
}

.login-form .two-factor-remember label {
    text-align: left;
    width: 320px;
    margin: 0;
    font-size: 14px;
    margin-right: 0;
    display: inline-block;
}

.login-form .two-factor .no-phone {
    margin: 0px auto 24px auto;
    text-align: left;
}

.login-form .two-factor-remember-wrapper {
    padding-top: 10px;
}

.login-form .two-factor-help {
    text-align: left;
}

/* forgot password pane */

.forgot-password-form .signup-common-inner {
    width: 340px;
    margin-top: 10px;
}

.forgot-password-form .change-email {
    font-size: 12px;
    text-align: center;
    margin: 20px 0 0 0;
    color: #818285;
}

/* existing artist form */

.existing-artist-form .text-body {
    width: 400px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 20px;
}

.existing-artist-form .or {
    text-align: center;
    opacity: 0.5;
    margin-top: 15px;
}

.existing-artist-form .change-email {
    text-align: center;
    margin-top: 15px;
    line-height: 14px;
}

.ui-dialog.nu-dialog .signup-common-form button.create-account {
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
    width: 100%;
}

.existing-artist-form p,
.ui-dialog.nu-dialog .existing-artist-form p {
    margin: 5px 0 24px;
    font-size: 17px;
    line-height: 24px;
}

/* fan action form */

.action-form {
    font-size: 16px;
    line-height: 20px;
}

body:lang(ja) .action-form {
    line-height: 1.4;
}

.action-form .buttons {
    margin-top: 20px;
}

.action-form .buttons button {
    width: 210px;
    margin-right: 0;
}

.action-form .buttons button.signup {
    margin-right: 35px;
}

/* almost there form */

.almost-there-confirm {
    width: 75%;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
}
.ui-dialog.nu-dialog .signup-common-form button.almost-there-button {
    width: 75%;
    margin: 20px auto 2px auto;
    display: block;
}
.ui-dialog.nu-dialog.center-title .ui-dialog-title {
    text-align: center;
    width: 100%;
    max-width: 100%;
}

/* welcome form */

#sign-up-welcome.signup-heading {
    margin-top: 35px;
    margin-bottom: 4px;
}
.welcome-form.signup-common-form {
    font-size: 16px;
}
.welcome-inner {
    text-align: initial;
}
.welcome-phone {
    display: inline-block;
    width: 252px;
    margin: 10px 21px 0 -50px;
}
.welcome-phone img {
    height: 440px;
}
.welcome-app-promo {
    display: inline-block;
    width: 400px;
    margin-top: 45px;
    vertical-align: top;
    line-height: 23px;
}
.welcome-app-button-container a {
    height: 40px;
    overflow: hidden;
    display: inline-block;
}
.signup-common-form .welcome-app-promo button {
    width: 305px;
    margin: 55px 0 0 40px;
}
.welcome-app-button-container .store-button {
    background: url(/img/_sprite-app-btns@2x.png);
    background-size: 100%;
    height: 80px;
    width: 135px;
}
:lang(en) .welcome-app-button-container .app-store {
    background-position: 0 0;
}
:lang(en) .welcome-app-button-container .google-play-store {
    background-position: 0 -42px;
}
:lang(fr) .welcome-app-button-container .app-store {
    background-position: 0 -84px;
}
:lang(fr) .welcome-app-button-container .google-play-store {
    background-position: 0 -126px;
}
:lang(ja) .welcome-app-button-container .app-store {
    background-position: 0 -168px;
}
:lang(ja) .welcome-app-button-container .google-play-store {
    background-position: 0 -210px;
}

.welcome-app-button-container a:first-child {
    display: inline-block;
    margin-right: 30px;
}
.welcome-app-button-container {
    width: 305px;
    margin: 40px;
}
.welcome-email-app-link {
    text-align: center;
    font-size: 16px;
}
.welcome-email-app-link input {
    margin-top: 15px;
    width: 340px;
    font-size: 18px;
    padding: 5px;
}
.welcome-email-app-link .email-error {
    margin: 5px auto 0;
    text-align: left;
    width: 340px;
    color: red;
}
.welcome-app-email-buttons {
    margin: 40px auto 0px;
    text-align: center;
}
.welcome-app-email-buttons.okay {
     width: 205px;
 }
.welcome-app-email-buttons button {
    display: inline-block;
}
.welcome-app-email-buttons button.no-thanks {
    margin-right: 24px;
}
.modal-welcome-message {
    text-align: center;
    line-height: 22px;
}

/* nag modal */
.verify-nag.signup-common-form {
    width: 340px;
    text-align: center;
    margin: 0 auto;
}
body:lang(ja) .verify-nag.signup-common-form {
    width: 380px;
}
.verify-nag .nag-fan-email {
    display: inline;
    font-weight: bold;
}
.verify-nag .nag-email-change {
    display: inline-block;
    margin: 10px 0 28px 0;
}
.verify-nag .nag-email-change:hover {
    text-decoration: none;
}
.verify-nag button.nag-got-it {
    width: 100%;
}
.verify-nag button.nag-send-again {
    width: 162px;
    margin-right: 12px;
}
.verify-nag button.nag-cancel {
    width: 161px;
}
.verify-nag .nag-email-input {
    margin: 14px 0 19px 0;
}
.verify-nag .nag-email-input .error-bubble {
    text-align: left;
}
.verify-nag .nag-buttons {
    height: 36px;
}
.verify-nag .nag-buttons.no-email {
    margin-top: 20px;
}
.verify-nag .nag-email-sent {
    margin-bottom: 15px;
}
.verify-nag button.nag-done {
    width: 100%;
    margin-bottom: 15px;
}

/* dupe fan */
/* dupe pane */
.dupe-fan-form .dialog-body {
    text-align: center;
}

/* account chooser form */
.choose-account-form ul.accounts-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 432px;
}

.choose-account-form ul.accounts-list .account {
    display: block;
    font-size: 0;
    padding-bottom: 26px;
    margin-bottom: 24px;
    margin-top: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.choose-account-form ul.accounts-list .account:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.choose-account-form .account.artist,
.choose-account-form .account.artist a {
    color: #6E943B;
}

.choose-account-form .account.label,
.choose-account-form .account.label a {
    color: #6F49A1;
}

.choose-account-form .account > * {
    display: inline-block;
    font-size: 12px;
    vertical-align: top;
}

.choose-account-form .account .icon {
    width: 40%;
    height: 126px;
}
.choose-account-form .account.label .icon {
    background: url('/img/icon-labels.svg') 150% 50% no-repeat;
}
.choose-account-form .account.fan .icon {
    background: url('/img/icon-fans.svg') 150% 50% no-repeat;
}
.choose-account-form .account.artist .icon {
    background: url('/img/icon-artists.svg') 150% 50% no-repeat;
}

.choose-account-form .account .description {
    color: #818285;
    width: 58%;
    margin-top: 10px;
    line-height: 16px;
}

.choose-account-form .account .signup-button {
    width: 100%;
    text-align: center;
    display: block;
    border-radius: 3px;
    border: 1px solid rgb(0,161,198);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0 7px 0;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.choose-account-form .account .signup-button:hover,
.choose-account-form .account a:hover {
    text-decoration: underline;
}

.choose-account-form .account.artist .signup-button {
    border-color: #6E943B;
}

.choose-account-form .account.label .signup-button {
    border-color: #6F49A1;
}

.choose-account-form .account.artist .circle {
    background: rgba(110,148,59, 0.1);
}

.choose-account-form .account.label .circle {
    background: rgba(111,73,161, 0.1);
}

/* genre picker */
.genre-picker-form {
    width: 648px;
    margin: -36px auto 0 auto;
    position: relative;
    opacity: 0;
    transition: opacity 0.2s;
}

.genre-picker-form.standalone {
    margin-left: 16px;
    margin-right: 16px;
}

.genre-picker-form.active {
    opacity: 1;
}

.genre-picker-form .clearfix:before,
.genre-picker-form .clearfix:after {
    content: " ";
    display: table;
}

.genre-picker-form .clearfix:after {
    clear: both;
}

.genre-picker-form .heading-wrapper {
    margin: 0 4px 0;
    text-align: center;
}

.genre-picker-form .heading-wrapper h3 {
    font-size: 18px;
    margin-bottom: 0;
}

.genre-picker-form .heading-wrapper h4 {
    font-size: 18px;
    font-weight: normal;
    margin: 8px 0 0 0;
}

.genre-picker-form ul.genres,
.genre-picker-form ul.subgenres,
.genre-picker-form ul.selected-genres,
.genre-picker-form ul.selected-genres-placeholder {
    list-style: none;
    padding: 0;
    margin: 0;
}

.genre-picker-form ul.genres {
    width: 650px;
}

.genre-picker-form ul.genres > li,
.genre-picker-form ul.subgenres > li,
.genre-picker-form ul.selected-genres > li,
.genre-picker-form ul.selected-genres-placeholder > li {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.genre-picker-form .list-wrapper {
    height: 30px;
    width: 638px;
    overflow: hidden;
    margin: 0 5px;

    transition: height 0.3s;
}

.genre-picker-form .list-wrapper.no-animation {
    transition: height 0s;
}

.genre-picker-form .list-wrapper.has-genres {
    height: 56px;
}

.genre-picker-form ul.genres > li.genre {
    margin: 5px;
    float: left;
    border-radius: 5px;
    width: 152px;
    height: 152px;
}

.genre-picker-form ul.genres > li.genre .content {
    width: 152px;
    height: 152px;
    transition: width 0.4s,
                height 0.4s;
}

.genre-picker-form li.genre .subgenres {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.2s 0.3s;
}

.genre-picker-form li.genre.expanded .subgenres {
    height: auto;
    opacity: 1;
}

.genre-picker-form ul.subgenres {
    margin-left: 14px;
    margin-right: 20px;
}

.genre-picker-form ul.subgenres li {
    color: #FFF;
    cursor: pointer;
    margin: 2px 0;
}

.genre-picker-form ul.subgenres h3 {
    margin: 0;
    padding: 0;
    display: inline-block;
    padding: 5px 14px 5px 10px;
    border-radius: 16px;
    background-color: #FFF;
    color: #333;
    font-size: 14px;
}

.genre-picker-form ul.subgenres li.selected h3 {
    background-color: rgba(51, 51, 51, 1);
}

.genre-picker-form .genres-overflow-wrapper {
    /* height: 460px; */
    width: 658px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.genre-picker-form ul.genres > li.genre.expanded,
.genre-picker-form ul.genres > li.genre.expanded .content {
    width: 314px;
    height: 314px;
}

.genre-picker-form ul.genres > li.genre.expanded.long,
.genre-picker-form ul.genres > li.genre.expanded.long .content {
    width: 314px;
    height: 476px;
}

.genre-picker-form ul.genres > li.genre.search {
    right: 0;
    top: 972px;
}

.genre-picker-form .search-heading {
    display: block;
    margin: 30px 20px 5px 20px;
    font-size: 18px;
    line-height: 22px;
    color: #FFF;
}

.genre-picker-form .search-subheading {
    display: block;
    margin: 0 20px;
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
    color: #FFF;
}

.genre-picker-form ul.genres > li.genre.search {
    background: linear-gradient(-45deg, #30D4BB 0%, #7b7beb 100%);
}

.genre-picker-form li.genre .content {
    width: 100%;
    position: relative;
    float: none;
    text-align: center;
    border-radius: 5px;
}

.genre-picker-form li.genre.expanded .content {
    text-align: left;
}

.genre-picker-form li.genre h3.genre-name {
    font-size: 16px;
    font-weight: 700;
    color: white;
    border-radius: 16px;
    display: inline-block;
    padding: 6px 14px 6px 14px;
    margin: 57px auto 0 auto;
    text-align: left;
    background: #FFF;
    color: #333;
}

.genre-picker-form li.genre.selected .genre-name,
.genre-picker-form li.genre.expanded.selected .genre-name {
    background-color: rgba(51, 51, 51, 1);
    color: #FFF;
}

.genre-picker-form li.genre.expanded .genre-name {
    margin-left: 16px;
    margin-top: 16px;
    margin-bottom: 12px;
    background-color: #FFF;
    color: #333;
}

.genre-picker-form .selected-genres-wrapper {
    position: relative;
    text-align: center;
}

.genre-picker-form .page {
    position: absolute;
    height: 30px;
}

.genre-picker-form .page:hover {
    cursor: pointer;
}

.genre-picker-form .page-left {
    left: -20px;
    top: 16px;
}

.genre-picker-form .page-right {
    right: -20px;
    top: 16px;
}

.genre-picker-form .page .icon {
    fill: #333;
    height: 20px;
    width: 14px;
    margin-top: 5px;
    z-index: 16;
    position: relative;
}

.genre-picker-form .page .page-fade,
.genre-picker-form .page .page-fade {
    bottom: 0;
    content: ' ';
    display: block;
    top:0;
    position: absolute;
    width: 30px;
    z-index: 15;
}
.genre-picker-form .page-left .page-fade {
    background: linear-gradient(to left , rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 65%);
    left: 15px;
}
.genre-picker-form .page-right .page-fade {
    background: linear-gradient(to right , rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 65%);
    right: 15px;
}


.genre-picker-form ul.selected-genres {
    overflow-x: scroll;
    overflow-y: visible;
    white-space: nowrap;
    margin: 16px 0 0;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 100%;
    overflow-x: scroll;
    font-size: 0;

    opacity: 0;

    transition: opacity 0.2s 0.2s;
}

.genre-picker-form .no-animation ul.selected-genres {
    transition: opacity 0s;
}

.genre-picker-form .has-genres ul.selected-genres {
    opacity: 1;
}

.genre-picker-form ul.selected-genres li {
    margin: 0;
    opacity: 0;
    max-width: 0;
    font-size: 14px;
    transition: opacity 0.3s 0s,
                max-width 0.8s 0s,
                margin 0s;
}

.genre-picker-form .no-animation ul.selected-genres li {
    margin: 0;
    opacity: 0;
    max-width: 0;
    font-size: 14px;
    transition: opacity 0s,
                max-width 0s,
                margin 0s;
}

.genre-picker-form ul.selected-genres li.hiding {
    transition: opacity 0.3s 0s,
                max-width 0.8s 0s,
                margin 0.3s;
}

.genre-picker-form ul.selected-genres li.visible {
    margin: 0px 4px 0px 4px;
    opacity: 1;
    max-width: 600px;
}

.genre-picker-form ul.selected-genres h3 {
    margin: 0;
    padding: 0;
    display: inline-block;
    padding: 5px 14px 5px 10px;
    border-radius: 16px;
    background-color: #333;
    color: #FFF;
    font-size: 14px;
}

.genre-picker-form ul.selected-genres li.selected-genre:hover {
    cursor: pointer;
}

.genre-picker-form ul.selected-genres li.selected-genre .genre-icon {
    background-position: -16px 0%;
    width: 16px;
}

.genre-picker-form ul.selected-genres li.selected-genre-placeholder {
    height: 26px;
    width: 95px;
    border: 2px solid #CCC;
    margin: 0px 2px 0px 2px;
    border-radius: 15px;
}

.genre-picker-form .genre-icon {
    background-image: url(/img/genrepicker/icon-sprite.png);
    /*width: 16px;*/
    width: 0;
    height: 16px;
    background-size: 64px 16px;
    background-position: 0px 0%;
    position: relative;
    display: inline-block;
    margin: 0px 2px 0px 0px;
}

.genre-picker-form li.genre.expanded .genre-icon {
    width: 16px;
    background-image: url(/img/genrepicker/icon-sprite-dark.png);
}

.genre-picker-form li.genre .genre-name:hover .genre-icon,
.genre-picker-form ul.subgenres h3.subgenre-name:hover .genre-icon {
    background-image: url(/img/genrepicker/icon-sprite.png);
}

/* hover states */
.genre-picker-form li.genre .genre-name:hover,
.genre-picker-form li.genre:hover:not(.expanded) .genre-name {
    background-color: #333;
    color: #FFF;
}

.genre-picker-form ul.subgenres li:hover h3.genre-name,
.genre-picker-form ul.subgenres li.selected h3,
.genre-picker-form ul.subgenres h3.subgenre-name:hover,
.genre-picker-form li.genre:hover:not(.expanded) .genre-name {
    background-color: rgba(51, 51, 51, 1);
    color: #FFF;
}

.genre-picker-form ul.selected-genres li:hover h3
/*.genre-picker-form li.genre.selected h3.genre-name:hover,*/
/* .genre-picker-form li.subgenre.selected h3.subgenre-name:hover */ {
    background-color: rgba(51, 51, 51, 0.5);
}

.genre-picker-form li.genre.selected h3.genre-name .genre-icon,
.genre-picker-form li.subgenre.selected h3.subgenre-name .genre-icon {
    background-position: -16px 0%;
    width: 16px;
    background-image: url(/img/genrepicker/icon-sprite.png);
}

.genre-picker-form li.genre.selected.expanded h3.genre-name:hover .genre-icon,
.genre-picker-form li.subgenre.selected h3.subgenre-name:hover .genre-icon,
.genre-picker-form ul.selected-genres li.selected-genre:hover .genre-icon {
    background-position: -32px 0%;
    width: 16px;
    background-image: url(/img/genrepicker/icon-sprite.png);
}

.genre-picker-form li.genre:hover,
.genre-picker-form li.subgenre:hover h3 {
    cursor: pointer;
}

.genre-picker-form .search-wrapper {
    /*position: relative;*/
    text-align: center;
}

.genre-picker-form .search-input-wrapper {
    position: relative;
    display: inline-block;
}

.ui-widget.nu-dialog .genre-picker-form .search-wrapper input {
    width: 320px;
    height: 28px;
    padding-right: 28px;
    padding-left: 3px;
    border: 1px solid rgba(204, 204, 204, 1);
    font-size: 14px;
    font-weight: 400;
    padding-left: 10px;
    cursor: text;
    margin: 0 auto;
    margin-bottom: 10px;
}

.ui-widget.nu-dialog .genre-picker-form .search-wrapper input:focus {
    box-shadow: none;
}

.genre-picker-form .search-wrapper.expanded input.selected {
    background: rgba(204, 204, 204, 0.2);
}

.ui-widget.nu-dialog .genre-picker-form .search-wrapper.expanded input:focus {
    border: 2px solid rgba(160, 160, 160, 1);
}

.genre-picker-form .search-wrapper h2 {
    text-align: center;
    color: #666666;
    font-size: 18px;
    margin-bottom: 14px;
}

.genre-picker-form .search-wrapper h3 {
    font-weight: normal;
    text-align: center;
    color: #666666;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 12px;
}

.genre-picker-form a.search {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 7px;
    margin: 0;
}

.genre-picker-form .search-icon {
    background: url(/img/homepage_2015/search-icon@2x.png) 0 0 no-repeat;
    background-size: 100%;
    width: 15px;
    height: 15px;
    line-height: 13px;
    display: inline-block;
    position: relative;
    opacity: 1;
}

/*.genre-picker-form .searching .search-icon {
    opacity: 0;
}*/

.genre-picker-form .search-spinner {
    position: absolute;
    display: inline-block;
    right: 0px;
    top: 1px;
    opacity: 0;
}

/*.genre-picker-form .searching .search-spinner {
    opacity: 1;
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}*/

@keyframes spin {
    from {
        transform: rotate(360deg);
    } to {
        transform: rotate(0deg);
    }
}

.genre-picker-form .search-results {
    width: 318px;
    max-height: 0;
    background-color: #CCC;
    position: absolute;
    left: 169px;
    overflow: hidden;
    z-index: 10;
    transition: max-height 0s;
    background-color: #FFF;
    border: 0px solid #FFF;
    border-radius: 3px;
}

.genre-picker-form.skinny .search-results {
    left: 81px;
}

.genre-picker-form .search-results.results-visible {
    max-height: 138px;
    border: 1px solid #cccccc;
    transition: max-height 0.4s;
    border-top: 0;
    overflow: scroll;
}

.genre-picker-form .search-results ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.genre-picker-form .search-results li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    padding: 5px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.genre-picker-form .search-results li:hover,
.genre-picker-form .search-results li.selected {
    cursor: pointer;
    background: rgba(204, 204, 204, 0.2);
}

.genre-picker-form .search-results li.empty:hover,
.genre-picker-form .search-results li.empty.selected {
    cursor: default;
    background: inherit;
}

.genre-picker-form .search-results li:focus {
    outline: none;
}

.genre-picker-form .search-results .count {
    position: absolute;
    right: 6px;
    font-size: 11px;
    opacity: 0.5;
}

.genre-picker-form #electronic-box .content {
    background: #F9A55B;
    background: 
        linear-gradient(
            rgba(249,165,91, 0.5), 
            rgba(249,165,91, 0.5)
        ),
        url(/img/genrepicker/electronic.jpg);
    background-size: 100%;    
}

.genre-picker-form #rock-box .content {
    background: #F7714E;
    background: 
        linear-gradient(
            rgba(247,113,78, 0.5), 
            rgba(247,113,78, 0.5)
        ),
        url(/img/genrepicker/rock.jpg);
    background-size: 100%;
}

.genre-picker-form #metal-box .content {
    background: #E0222D;
    background: 
        linear-gradient(
            rgba(224,34,45, 0.5), 
            rgba(224,34,45, 0.5)
        ),
        url(/img/genrepicker/metal.jpg);
    background-size: 100%;    
}

.genre-picker-form #alternative-box .content {
    background: #D62F6A;
    background: 
        linear-gradient(
            rgba(214,47,106, 0.5), 
            rgba(214,47,106, 0.5)
        ),
        url(/img/genrepicker/alternative.jpg);
    background-size: 100%;  
}

.genre-picker-form #hip-hop-rap-box .content {
    background: #C33AA4;
    background: 
        linear-gradient(
            rgba(195,58,164, 0.5), 
            rgba(195,58,164, 0.5)
        ),
        url(/img/genrepicker/hiphop.jpg);
    background-size: 100%;  
}

.genre-picker-form #experimental-box .content {
    background: #9A58C0;
    background: 
        linear-gradient(
            rgba(154,88,192, 0.5), 
            rgba(154,88,192, 0.5)
        ),
        url(/img/genrepicker/experimental.jpg);
    background-size: 100%;
}

.genre-picker-form #punk-box .content {
    background: #816FB2;
    background: 
        linear-gradient(
            rgba(129,111,178, 0.5), 
            rgba(129,111,178, 0.5)
        ),
        url(/img/genrepicker/punk.jpg);
    background-size: 100%;    
}

.genre-picker-form #folk-box .content {
    background: #8690CE;
    background: 
        linear-gradient(
            rgba(134,144,206, 0.5), 
            rgba(134,144,206, 0.5)
        ),
        url(/img/genrepicker/folk.jpg);
    background-size: 100%;    
}

.genre-picker-form #pop-box .content {
    background: #87A8C5;
    background: 
        linear-gradient(
            rgba(135,168,197, 0.5), 
            rgba(135,168,197, 0.5)
        ),
        url(/img/genrepicker/pop.jpg);
    background-size: 100%;    
}

.genre-picker-form #ambient-box .content {
    background: #85BFBC;
    background: 
        linear-gradient(
            rgba(133,191,188, 0.5), 
            rgba(133,191,188, 0.5)
        ),
        url(/img/genrepicker/ambient.jpg);
    background-size: 100%;    
}

.genre-picker-form #soundtrack-box .content {
    background: #82D23D;
    background: 
        linear-gradient(
            rgba(130,210,61, 0.5), 
            rgba(130,210,61, 0.5)
        ),
        url(/img/genrepicker/soundtrack.jpg);
    background-size: 100%;    
}

.genre-picker-form #world-box .content {
    background: #B0CA3C;
    background: 
        linear-gradient(
            rgba(176,202,60, 0.5), 
            rgba(176,202,60, 0.5)
        ),
        url(/img/genrepicker/world.jpg);
    background-size: 100%;    
}

.genre-picker-form #jazz-box .content {
    background: #D6BF3D;
    background: 
        linear-gradient(
            rgba(214,191,61, 0.5), 
            rgba(214,191,61, 0.5)
        ),
        url(/img/genrepicker/jazz.jpg);
    background-size: 100%;    
}

.genre-picker-form #acoustic-box .content {
    background: #F9A55B;
    background: 
        linear-gradient(
            rgba(249,165,91, 0.5), 
            rgba(249,165,91, 0.5)
        ),
        url(/img/genrepicker/acoustic.jpg);
    background-size: 100%;    
}

.genre-picker-form #funk-box .content {
    background: #F7714E;
    background: 
        linear-gradient(
            rgba(247,113,78, 0.5), 
            rgba(247,113,78, 0.5)
        ),
        url(/img/genrepicker/funk.jpg);
    background-size: 100%;   
}

.genre-picker-form #r-b-soul-box .content {
    background: #E0222D;
    background: 
        linear-gradient(
            rgba(224,34,45, 0.5), 
            rgba(224,34,45, 0.5)
        ),
        url(/img/genrepicker/rnb.jpg);
  background-size: 100%;    
}

.genre-picker-form #devotional-box .content {
    background: #D62F6A;
    background: 
        linear-gradient(
            rgba(214,47,106, 0.5), 
            rgba(214,47,106, 0.5)
        ),
        url(/img/genrepicker/devotional.jpg);
    background-size: 100%;  
}

.genre-picker-form #classical-box .content {
    background: #C33AA4;
    background: 
        linear-gradient(
            rgba(195,58,164, 0.5), 
            rgba(195,58,164, 0.5)
        ),
        url(/img/genrepicker/classical.jpg);
    background-size: 100%;
}

.genre-picker-form #reggae-box .content {
    background: #9A58C0;
    background: 
        linear-gradient(
            rgba(154,88,192, 0.5), 
            rgba(154,88,192, 0.5)
        ),
        url(/img/genrepicker/reggae.jpg);
    background-size: 100%;    
}

.genre-picker-form #podcasts-box .content {
    background: #816FB2;
    background: 
        linear-gradient(
            rgba(129,111,178, 0.5), 
            rgba(129,111,178, 0.5)
        ),
        url(/img/genrepicker/podcasts.jpg);
    background-size: 100%; 
}

.genre-picker-form #country-box .content {
    background: #8690CE;
    background: 
        linear-gradient(
            rgba(134,144,206, 0.5), 
            rgba(134,144,206, 0.5)
        ),
        url(/img/genrepicker/country.jpg);
    background-size: 100%;
}

.genre-picker-form #spoken-word-box .content {
    background: #87A8C5;
    background: 
        linear-gradient(
            rgba(135,168,197, 0.5), 
            rgba(135,168,197, 0.5)
        ),
        url(/img/genrepicker/spokenword.jpg);
    background-size: 100%;
}

.genre-picker-form #comedy-box .content {
    background: #85BFBC;
    background: 
        linear-gradient(
            rgba(133,191,188, 0.5), 
            rgba(133,191,188, 0.5)
        ),
        url(/img/genrepicker/comedy.jpg);
    background-size: 100%; 
}

.genre-picker-form #blues-box .content {
    background: #82D23D;
    background: 
        linear-gradient(
            rgba(130,210,61, 0.5), 
            rgba(130,210,61, 0.5)
        ),
        url(/img/genrepicker/blues.jpg);
    background-size: 100%;    
}

.genre-picker-form #kids-box .content {
    background: #B0CA3C;
    background: 
        linear-gradient(
            rgba(176,202,60, 0.5), 
            rgba(176,202,60, 0.5)
        ),
        url(/img/genrepicker/kids.jpg);
    background-size: 100%; 
}

.genre-picker-form #audiobooks-box .content {
    background: #D6BF3D;
    background: 
        linear-gradient(
            rgba(214,191,61, 0.5), 
            rgba(214,191,61, 0.5)
        ),
        url(/img/genrepicker/audiobooks.jpg);
    background-size: 100%; 
}

.genre-picker-form #latin-box .content {
    background: #F9A55B;
    background: 
        linear-gradient(
            rgba(249,165,91, 0.5), 
            rgba(249,165,91, 0.5)
        ),
        url(/img/genrepicker/latin.jpg);
    background-size: 100%; 
}

.genre-picker-form .buttons {
    padding-top: 2px;
    width: 640px;
    margin: 16px 4px 0 4px;
    text-align: center;
}

.genre-picker-form .buttons .skip {
    margin-top: 10px;
    display: inline-block;
}

.genre-picker-form .buttons .skip a:hover {
    text-decoration: underline;
}

.signup-common-form.genre-picker-form .buttons button,
.ui-dialog.nu-dialog .signup-common-form.genre-picker-form .buttons button {
    height: 47px;
    width: 100%;
}

.signup-common-form.genre-picker-form .buttons button.disabled {
    background: #555;
    color: #ccc;
    opacity: 0.3;
    border: none;
    text-decoration: none;
}

.signup-common-form.genre-picker-form .buttons button.disabled:hover {
    background: rgb(0,161,198);
    color: #FFF;
    opacity: 1;
}


    
.signup-common-form.genre-picker-form .buttons button:hover,
.ui-dialog.nu-dialog .signup-common-form.genre-picker-form .buttons button:hover {
    text-decoration: underline;
}

.signup-common-form.genre-picker-form .buttons button:disabled:hover,
.ui-dialog.nu-dialog .signup-common-form.genre-picker-form .buttons button:disabled:hover {
    text-decoration: none;
}

/* post genre */

.post-genre-form h1 {
    line-height: 34px;
    color: #FFF;
    text-align: center;
}

.post-genre-form ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.post-genre-form li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    color: #FFF;
    cursor: pointer;
    margin: 2px 0;
}

.post-genre-form li h3 {
    margin: 0;
    padding: 0;
    display: inline-block;
    padding: 6px 14px 6px 10px;
    border-radius: 16px;
    background-color: rgba(40, 40, 40, 1);
    font-size: 14px;
}

.post-genre-form .genre-icon {
    background-image: url(/img/genrepicker/icon-sprite.png);
    width: 16px;
    height: 16px;
    background-size: 64px 16px;
    background-position: -16px 0%;
    position: relative;
    display: inline-block;
    margin: 0px 2px 0px 0px;
}

@media (max-width: 768px) {
    .genre-picker-form {
        width: 487px;
    }
    .genre-picker-form .buttons {
        width: 478px;
    }
    .genre-picker-form ul.genres {
        width: 486px;
    }
    .genre-picker-form .page-left {
        left: -20px;
    }
    .genre-picker-form .page-right {
        right: -20px;
    }
    .genre-picker-form .page-left .page-fade {
        left: 7px;
        width: 50px;
    }
    .genre-picker-form .page-right .page-fade {
        right: 2px;
        width: 60px;
    }
    .genre-picker-form .list-wrapper {
        width: 476px;
    }
    .genre-picker-form .genres-overflow-wrapper {
        width: 482px;
    }
}
/*
@media (max-height: 740px) {
    .genre-picker-form .genres-overflow-wrapper {
        height: 350px;
    }
    .genre-picker-form .search-results {
        top: 414px;
    }
    .genre-picker-form.has-selected-genres .search-results {
        top: 440px;
    }
}
@media (min-height: 741px) and (max-height: 900px) {
    .genre-picker-form .genres-overflow-wrapper {
        height: 480px;
    }
    .genre-picker-form .search-results {
        top: 544px;
    }
    .genre-picker-form.has-selected-genres .search-results {
        top: 570px;
    }
}
@media (min-height: 901px) {
    .genre-picker-form .genres-overflow-wrapper {
        height: 540px;
    }
    .genre-picker-form .search-results {
        top: 604px;
    }
    .genre-picker-form.has-selected-genres .search-results {
        top: 630px;
    }
}
*/

/* newsletter picker */

.newsletter-picker-form .heading-wrapper .icon {
    width: 70px;
    height: 70px;
    display: inline-block;
    margin-top: -10px;
}

.newsletter-picker-form .heading-wrapper .icon img {
    width: 100%;
}

.newsletter-picker-form .heading-wrapper .text {
    display: inline-block;
    width: 350px;
    vertical-align: top;
    margin-left: 4px;
}

.newsletter-picker-form .heading-wrapper h1 {
    display: inline-block;
    vertical-align: top;
    margin: 24px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.newsletter-picker-form .heading-wrapper h2 {
    display: inline-block;
    font-weight: normal;
    margin: 0;
    font-size: 17px;
    line-height: 20px;
}

.newsletter-picker-form ul.suggested-newsletters,
.newsletter-picker-form ul.suggested-newsletters li {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.newsletter-picker-form ul.suggested-newsletters {
    margin: 16px 0 0 16px;
}

.newsletter-picker-form ul.suggested-newsletters li {
    margin: 0 16px 16px 0;
}

.newsletter-picker-form ul.suggested-newsletters input[type="checkbox"] {
    display: inline-block;
    vertical-align: top;
    margin-right: 8px;
}

.newsletter-picker-form ul.suggested-newsletters .details {
    display: inline-block;
    vertical-align: top;
    width: 374px;
}

.newsletter-picker-form ul.suggested-newsletters h3 {
    margin: 0;
}

.newsletter-picker-form .email-abuse {
    margin: 10px auto 0px auto;
    color: #777;
    font-size: 12px;
    line-height: 14px;
    width: 420px;
}

.newsletter-picker-form .buttons {
    margin-top: 16px;
    text-align: center;
    width: 420px;
}

.signup-common-form.newsletter-picker-form .buttons button,
.ui-dialog.nu-dialog .signup-common-form.newsletter-picker-form .buttons button {
    width: 100%;
    padding: 12px 12px;
    height: 43px;
    border-radius: 4px;
    line-height: 16px;
}

.signup-common-form.newsletter-picker-form .buttons button.yes,
.ui-dialog.nu-dialog .signup-common-form.newsletter-picker-form .buttons.split button.yes {
    width: 212px;
    margin-right: 14px;
}

.signup-common-form.newsletter-picker-form .buttons button.no,
.ui-dialog.nu-dialog .signup-common-form.newsletter-picker-form .buttons.split button.no {
    width: 190px;
    background: #FFF;
    border: 1px solid rgb(0,161,198);
    color: rgb(0,161,198);
}

/* welcome 2 */

.welcome-2-form {
    margin: -36px 16px 0 16px;
}

.welcome-2-form h1 {
    text-align: center;
    font-size: 26px;
    margin: 20px 0 0 0;
}

.welcome-2-form h2 {
    font-size: 16px;
    margin: 12px 0 12px 0;
    font-weight: 400;
    text-align: center;
}

.welcome-2-form h2.active {
    margin: 34px 0 20px 0;
}

.welcome-2-form h2.welcome {
    font-size: 18px;
    line-height: 22px;
    margin: 6px auto 20px auto;
    width: 100%;
}

.welcome-2-form h2.welcome.no-tooltips {
    margin-top: 36px;
}

.signup-common-form.welcome-2-form .buttons button,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons button {
    width: 100%;
    height: auto;
    padding: 12px 14px 12px 14px;
    border-radius: 4px;
}

.signup-common-form.welcome-2-form .buttons.split button,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons.split button {
    width: 214px;
    height: auto;
    padding: 12px 14px 12px 14px;
    border-radius: 4px;
    border: 1px solid rgb(0,161,198);
}

.signup-common-form.welcome-2-form .buttons.split button:first-child,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons.split button:first-child {
    margin-right: 20px;
}

.signup-common-form.welcome-2-form .buttons.split button:last-child,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons.split button:last-child {
    background: #FFF;
    color: rgb(0,161,198);
}

.welcome-2-form .buttons a.no-thanks {
    display: block;
    text-align: center;
    margin: 16px 0 0 0;
}

.welcome-2-form .icon img {
    height: 235px;
    margin: 0 auto;
}

.welcome-2-form .to-bandcamp {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
}


.choose-account-form .account.artist .circle {
    background: rgba(110,148,59, 0.1);
}

.choose-account-form .account.label .circle {
    background: rgba(111,73,161, 0.1);
}


.complete-profile-form .profile-pic {
    width: 85px;
    height: 85px;
    margin: 0 auto;
    border-radius: 50%;
}

.complete-profile-form .profile-pic label.placeholder-wrapper {
    height: 100%;
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    position: relative;
    margin: 0;
    border-radius: 50%;
    box-sizing: border-box;
    border: 4px solid rgba(0, 0, 0, 0.05);
}

.complete-profile-form .profile-pic label.placeholder-wrapper:hover {
    border: 4px solid rgba(0, 0, 0, 0.10);
}

.complete-profile-form .profile-pic label.placeholder-wrapper:focus,
.complete-profile-form .profile-pic label.placeholder-wrapper:hover:focus {
    border-color: #50a1e6;
    box-shadow: 0 0 5px #50a1e6;
}

.complete-profile-form .profile-pic label.placeholder-wrapper.loading {
    cursor: default;
}

.complete-profile-form .profile-pic label.placeholder-wrapper.loading:focus,
.complete-profile-form .profile-pic label.placeholder-wrapper.loading:hover,
.complete-profile-form .profile-pic label.placeholder-wrapper.loading:hover:focus {
    border: 4px solid rgba(0, 0, 0, 0.05);
    box-shadow: none;
}

.complete-profile-form .profile-pic label:focus,
.complete-profile-form .profile-pic label:active,
.complete-profile-form .profile-pic-edit-icon:focus,
.complete-profile-form .profile-pic-edit-icon:active {
    transition-duration: 0s;
    transition-property: border-color, box-shadow;
    border-color: #50a1e6;
    box-shadow: 0 0 5px #b4d7f9;
    outline: none;
    -webkit-appearance: none;
}

.complete-profile-form .profile-pic .placeholder {
    background: linear-gradient(90deg, #6046FE, #1DA0C3);
    border-radius: 50%;
    width: 100%;
    height:  100%;
}

.complete-profile-form .profile-pic .placeholder .camera-icon,
.complete-profile-form .profile-pic .placeholder .spinny-icon {
    width: 35px;
    fill: #FFF;
    top: 26px;
    left: 21px;
    position: absolute;
}

.complete-profile-form .profile-pic .placeholder.loading {
    background: #E9E9E9;
}

.complete-profile-form .profile-pic .placeholder .spinny-icon {
    width: 30px;
    top: 25px;
    left: 24px;

    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.complete-profile-form .profile-pic-wrapper {
    position: relative;
    width: 100%;
    height:  100%;
}

.complete-profile-form .profile-pic img {
    border-radius: 50%;
    display: block;
    width: 100%;
    height:  100%;
}

.complete-profile-form .profile-pic-edit-icon {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    background-color: rgb(0,161,198);
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
}

.complete-profile-form .profile-pic-edit-icon svg {
    fill: #FFF;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 6px;
    left: 6px;
}

.complete-profile-form .edit-profile-menu {
    background: #fff;
    width: 160px;
    position: absolute;
    bottom: -84px;
    right: -157px;
    font-size: 14px;
    padding: 10px 12px;
    line-height: 28px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    z-index: 0;
}

.complete-profile-form .edit-profile-menu a {
    color: inherit;
}

.complete-profile-form .edit-profile-menu a:hover,
.complete-profile-form .edit-profile-menu a:focus {
    text-decoration: underline;
}


.complete-profile-form .edit-profile-menu a:first-child {
    color: red;
}

.complete-profile-form .edit-profile-menu label {
    font-size: 14px;
}

.complete-profile-form .buttons {
    margin: 20px 0 0 0;
}

.complete-profile-form .skip-wrapper {
    text-align: center;
}

.complete-profile-form .skip-wrapper.hide {
    visibility: hidden;
}

.complete-profile-form .skip {
    width: 100%;
    margin: 20px 0 0 0;
    font-size: 12px;
    text-align: center;
    color: #818285;
}

.complete-profile-form .hover-hint-anchor {
    vertical-align: middle;
}

.complete-profile-form .hover-hint-anchor .tooltip-icon {
    width: 16px;
    height: 16px;
}


.complete-profile-form .hover-hint-wrapper {
    position: relative;
}

.complete-profile-form .hover-hint {
font-size: 13px;
    color: rgb(255, 255, 255);
    background: rgb(51, 51, 51);
    padding: 20px 10px;
    position: absolute;
    width: 300px;
    text-align: center;
    left: calc(-50% - 149px);
    bottom: 24px;
    border-radius: 2px;
}

.complete-profile-form .hover-hint-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 0;
    position: absolute;
    left: 50%;
    bottom: -5px;
    border-top: 5px solid rgb(51, 51, 51);
}

.complete-profile-form .location-display {
    font-size: 13px;
    color: #999;
    margin-top: 5px;
}

.complete-profile-form .location-display .loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4,end) 900ms infinite;
    animation: ellipsis steps(4,end) 900ms infinite;
    content: "\2026";
    width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

/* invisible recaptcha used by captcha.js */

#global-invisible-recaptcha .grecaptcha-badge {
    z-index: 2000; /* this needs to be above modal dialog backdrop */
}

.newsletter-invite-banner {
    background: #408ea3;
    background: -webkit-linear-gradient(left, #6046FE, #30D4BB);
    color: #FFF;
    font-weight: 350;
    padding: 15px 0;
    -webkit-font-smoothing: antialiased;
}

:lang(fr) .newsletter-invite-banner,
:lang(ja) .newsletter-invite-banner {
    display: none;
}

@media all and (max-width: 600px) {
    .newsletter-invite-banner {
        display: none;
    }
}

.newsletter-invite-banner .tell-us-what-you-like {
    font-weight: 600;
    cursor: pointer;
}

.newsletter-invite-banner .dismiss {
    position: absolute;
    right: 20px;
    fill: #FFFFFF;
    cursor: pointer;
}