/* trackpipe/public/css/player.css */
.inline_player {
    position: relative;
    white-space: nowrap;
    display: none;
}

.inline_player.hidden {
    max-height: 0;
}
 
.inline_player.hidden > table {
    display: none;
}

/* inline player on tralbum pages only; doesn't apply to embedded players */
.trackView .inline_player {
    display: block;
    max-height: 500px;
    transition: max-height 3s ease-out;
    -moz-transition: max-height 3s ease-out;
    -webkit-transition: max-height 3s ease-out;
}

.inline_player td {
    border: none;
    padding:0;
}

.inline_player .play_cell {
    vertical-align: bottom;
}
.inline_player .play_cell a {
    display: block;
}

.inline_player .playbutton {
    background:#fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
    min-height: 50px;
    min-width: 54px;
}
.inline_player .playbutton:after {
    content:'';
    display: block;
    width: 0;
    height: 0;
    border-top: 11px inset transparent;
    border-bottom: 11px inset transparent;
    border-left: 20px solid #222;
    border-right:0;
    margin: 14px 0 0 18px;
}
.inline_player .playbutton.playing {
    /**/
}
.inline_player .playbutton.playing:after {
    content:'';
    border:0;
    border-left:7px solid #2d2d2d;
    border-right:7px solid #2d2d2d;
    height:22px;
    width:4px;
    margin: 14px auto;
}
.inline_player .playbutton.busy:after {
    background-image: url(../gif/playerbusy-noborder.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border:none;
    height: 42px;
    margin: 4px auto;
    width: 44px;
}
.inline_player .embeddedplaybutton {
    background: url(../gif/embedplaypause.gif);
    background-position: 50% 30px;
    width: 31px;
    height: 30px;
    cursor: pointer;
}
.inline_player .embeddedplaybutton.busy {
    background-image: url(../gif/playerbusy_small.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.inline_player .embeddedplaybutton.playing {
    background-position: 50% 0px;
}
.inline_player .embeddedplaybutton.big {
    background-image: url(../gif/playpause.gif);
    background-position: 50% 45px;
}
.inline_player .embeddedplaybutton.big.playing {
    background-position: 50% 0px;
}
.inline_player .embeddedplaybutton.big.busy {
    background-image: url(../gif/playerbusy.gif);
    background-position: 50% 50%;
}

.inline_player .tinyplayer {
    background: url(../gif/shortembed.gif);
    background-position: 50% 23px;
    cursor: pointer;
}
.inline_player .tinyplayer.playing {
    background-position: 50% 0px;
}

.inline_player #infolink {
    display: block;
    position: absolute;
    left: 50%;
    width: 50%;
    height: 100%;
    top: 0px;
}

.inline_player .nextbutton,
.inline_player .prevbutton {
    background:transparent url(../png/nextprev.png) no-repeat 0 0;
    background-size: 40px 12px;
    cursor: pointer;
    width: 20px;
    height: 12px;
    margin:0 0 1px;
}
.inline_player .prevbutton {
    /**/
}
.inline_player .nextbutton {
    background-position: 100% 0;
}
.inline_player .prev_cell a {
    display: block;
    margin-right: 5px;
}
.inline_player .next_cell a {
    display: block;
    margin-left: 5px;
}

.inline_player .nextbutton.hiddenelem,
.inline_player .prevbutton.hiddenelem {
    cursor: default;
    opacity: 0.25;
    visibility: visible;
}

.invertIconography .inline_player .prevbutton,
.invertIconography .inline_player .nextbutton {
    background-image: url(../png/nextprevinvert.png);
}

.inline_player.one-track .nextbutton.hiddenelem,
.inline_player.one-track .prevbutton.hiddenelem {
    visibility: hidden;
}

.inline_player .track_cell {
    height: 32px;
    vertical-align: bottom;
}
.inline_player .track_info {
    min-height: 18px;
    min-width: 262px;
    max-width: 320px;
    /* space between the play button and track info needs
     * to vary with font size or it starts to look weird
     * with large fonts: */
    margin:0.16666666666667em 0.83333333333333em 0.5em; /* 2px 10px 6px*/
    white-space: normal;
}

.inline_player .title-section {
    font-weight:500;
    padding-right: 0.5em;
}

/* this omits the title padding (above) for single-track players */
.inline_player .title-section.hiddenelem {
    display: none;
}

.inline_player .time {
    white-space: nowrap;
}

.inline_player .message {
    text-align: right;
    color: red;
    position: absolute;
    width: 290px;
    left: 0px;
}

.inline_player .progbar_cell {
    min-width: 270px;
    position: relative;
}

.inline_player .progbar {
    position: relative;
    height: 12px;
    /* space between the play button and track info needs
     * to vary with font size or it starts to look weird
     * with large fonts: */
    margin:1px 0.83333333333333em 0; /* l/r = 10px at 1em */
}

.inline_player .thumb {
    background:#fff;
    border:1px solid #bebebe;
    border-color:rgba(0,0,0,.25);
    border-radius: 1px;
    position: absolute;
    left: 0px;
    top: -2px;
    width: 22px;
    height: 10px;
    margin-left:-1px;
    margin-right:-1px;
    overflow: hidden;  /* IE 6 fix */
    cursor: pointer;
}

.inline_player .progbar_empty {
    background: #fefefe;
    background-color: rgba(255,255,255,.3);
    border: 1px solid #d9d9d9;
    border-color:rgba(0,0,0,.15);
    border-radius: 1px;
    position: relative;
    width: auto;
    height: 8px;
    overflow: visible;  /* IE 6 fix */
}

.inline_player .progbar_fill {
    background: #f6f6f6;
    background-color: rgba(0,0,0,.04);
    height: 100%;
    width: 0px;
}
.invertIconography .inline_player .thumb {
    border-color:rgba(190,190,190,.5);
}
.invertIconography .inline_player .progbar_empty {
    background-color:rgba(246,246,246,.1);
    border-color:rgba(190,190,190,.5);
}
.invertIconography .inline_player .progbar_fill {
    background-color:rgba(254,254,254,.1);
}

.inline_player a img {
    border: 0;
}

.inline_player.one-track .single-video-link {
     float: right;
     padding-right: 62px;
}

.inline_player .has-video{
    display:none;
}

div.has-video-wrapper {
    text-align:center;
}

.has-video-wrapper a.has-video {
    padding: 5px 7px 5px 7px;
    background-color: rgba(0,0,0,0.07);
    color: #0687F5;
    display:inline;
}

.seekmask {
    position: absolute;
    background: black;
    z-index: 9998;
    opacity: 0.5;
}
.seektext {
    position: absolute;
    font-size: 10em;
    font-family: arial,helvetica,clean,sans-serif;
    text-align: center;
    opacity: 1.0;
    z-index: 9999;
    color: #ffff55;
}

#tracklist {
    bottom: 0px;
}

#tracklist ul {
    -webkit-padding-start: 0;
}
#tracklist li {
    margin: 0.15em 0;
}
#tracklist .tracknum {
}
#tracklist .tracktitle {
    margin: 0 0.5em;
}
#tracklist .currenttime {
    font-size: 0.8em;
}
#tracklist .tracktime {
    font-size: 0.8em;
}
#tracklist .currenttrack {
    font-weight: bold;
}

/* trackpipe/public/css/home/playable.css */
/*

CSS rules for playable items. Creates a play/pause button overlaid on an item image. There are two variants,
chosen automatically:

    no-hover: This variant applies to devices which support touch events. It is located in the image's
        lower-left corner and is persistent.
    has-hover: This variant applies to all other devices (in other words, those supporting mouseover). It is
        centered on the image and only shown on hover.

- USAGE

The expected HTML structure is:

    <root class="playable"> <!-- item width/height applied here; does not need to be square -->
        <img src="..." alt="">
        <span class="plb-btn">
            <span class="plb-bg"></span>
            <span class="plb-ic"></span>
        </span>
    </root>

Generally, "root" will be an anchor pointing to the item's page URL, but that's not required.

Add a "playing" class to the playable element (or any element above that in the DOM) to switch to
a persistent pause button, or a "busy" class to display a spinny.

Optionally, add a "playable-hover-target" to any element above the playable element in the DOM to extend
the hover action to a larger area.

- SIZING

The no-hover variant uses a fluid layout, as it's more likely to appear in our phone view -- where all sizing is
based on the viewport width. Currently it's hardcoded to 32% of the width of the root element, but it would be
simple to add different sizes triggered by class names. The icons are defined in an SVG file. I tried creating
fluid, pure-CSS icons, and nearly succeeded -- but the solution was complicated, and the required HTML was going
to be too heavy, so I fell back to SVG.

The has-hover variant uses a fixed, pixel-based layout, as it's usually (but not always) used in our desktop view.
Currently the button is 74px wide, but we could add additional sizes if needed. The icons are pure CSS.

- OTHER NOTES

The plb-bg and plb-ic elements really should be generated content, so as not to require hardcoded
elements. But support for CSS transitions on generated elements is spotty as of June 2013.

*/


/*** general ***/

.playable {
    position: relative;
}

.playable img {
    width: 100%;
    height: 100%;
}


/*** button wrapper ***/

/* fixed dimensions */
.has-hover .plb-btn {
    position: absolute;
    width: 74px;
    height: 54px;

    /* center horiz/vert */
    left: 50%;
    top: 50%;
    margin-left: -36px; /* 1/2 of width */
    margin-top: -27px;  /* 1/2 of height */
}
/* fluid dimensions */
.no-hover .plb-btn {
    position: absolute;

    /* dimensions: 4:3 w:h aspect ratio */
    width: 32%;
    height: 0;
    padding-top: 24%; /* height */

    /* flush left/bottom */
    left: 0;
    bottom: 0;
}


/*** button background ***/

.plb-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    background: #000;
}
.has-hover .plb-bg {
    /* opacity handled in hover section, below */
    border-radius: 4px;
}
.no-hover .plb-bg {
    opacity: 0.50;
    filter:alpha(opacity=75); /* IE8 */
}


/*** Play icon ***/

/* fixed dimensions: use borders */
.has-hover .plb-ic {
    position: absolute;
    width: 0;
    height: 0;
    left: 28px;
    top: 17px;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
    border-style: dashed dashed dashed solid; /* dashed for smooth rendering in ff */
}
/* fluid dimensions: SVG */
.no-hover .plb-ic {
    position: absolute;
    width: 37.5%;
    height: 0;
    padding-top: 37.5%; /* height */

    /* centering: these are valid as long as plb-btn has a 4:3 w:h aspect ratio */
    left: 31.25%; /* 10% of root width */
    top: 25%;     /* 6% of root width */

    background: url(https://s4.bcbits.com/img/mobile-sprites-20150520.svg) no-repeat;
    background-size: 500% auto;
    background-position: 50% 0;
}

/* fallback for no-SVG browsers */
.no-svg.no-hover .plb-ic {
    background-image: url(../png/mobile-sprites-20150520.png);
}


/*** Pause icon ***/

/* fixed dimensions: use borders */
.has-hover .playing .plb-ic {
    /* overrides play icon */
    width: 5px;
    height: 20px;
    border: solid #fff;
    border-width: 0 6px;
}
/* fluid dimensions: SVG */
.no-hover .playing .plb-ic {
    background-position: 50% 4%;
}


/** Busy icon ***/

.busy .plb-btn .plb-ic {  /* .plb-btn adds to specificity of this rule, to override above rules */
    /* this bg image is high-res enough to be shared between the fixed/fluid layouts */
    background: url(../png/playerbusy_static_white.png) no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    border: none;
    -webkit-animation: plb-busy 0.75s infinite linear;
            animation: plb-busy 0.75s infinite linear;
}
.has-hover .busy .plb-ic {
    width: 26px;
    height: 26px;
    left: 24px;
    top: 14px;
}
/* fluid dimensions: SVG */
.no-hover .busy .plb-ic {
    width: 50%;
    padding-top: 50%; /* height */
    /* centering: these are valid as long as plb-btn has a 4:3 w:h aspect ratio */
    left: 25%;
    top: 18.75%;
}
@-webkit-keyframes plb-busy {
    from {
        -webkit-transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes plb-busy {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}


/*** hover visibility ***/

.has-hover .plb-bg,
.has-hover .plb-ic {
    opacity: 0;
    -webkit-transition-property: opacity;
            transition-property: opacity;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
}
.has-hover .playable:hover .plb-bg,
.has-hover .playable-hover-target:hover .plb-bg,
.has-hover .playing .plb-bg,
.has-hover .busy .plb-bg {
    opacity: 0.75;
}
.has-hover .playable:hover .plb-ic,
.has-hover .playable-hover-target:hover .plb-ic,
.has-hover .playing .plb-ic,
.has-hover .busy .plb-ic  {
    opacity: 1;
}

/* IE 8 */
.has-hover .ieLte8 .plb-bg,
.has-hover .ieLte8 .plb-ic {
    visibility: hidden;
}
.has-hover .ieLte8 .playable:hover .plb-bg,
.has-hover .ieLte8 .playable-hover-target:hover .plb-bg,
.has-hover .ieLte8 .playing .plb-bg,
.has-hover .ieLte8 .busy .plb-bg {
    visibility: visible;
    filter:alpha(opacity=75);
}
.has-hover .ieLte8 .playable:hover .plb-ic,
.has-hover .ieLte8 .playable-hover-target:hover .plb-ic,
.has-hover .ieLte8 .playing .plb-ic,
.has-hover .ieLte8 .busy .plb-ic {
    visibility: visible;
}

/* trackpipe/public/css/country_flags.css */
.flag-icon {
    background: transparent url('../png/_sprite-country-flags-20170630.png') no-repeat 0 0;
    background-size: 210px 187px;
    display: none;
    height: 11px;
    width: 14px;
}
.flag-icon.flag-ad {background-position: -14px 0; display:inline-block;}
.flag-icon.flag-ae {background-position: -28px 0; display:inline-block;}
.flag-icon.flag-af {background-position: -42px 0; display:inline-block;}
.flag-icon.flag-ag {background-position: -56px 0; display:inline-block;}
.flag-icon.flag-ai {background-position: -70px 0; display:inline-block;}
.flag-icon.flag-al {background-position: -84px 0; display:inline-block;}
.flag-icon.flag-am {background-position: -98px 0; display:inline-block;}
.flag-icon.flag-an {background-position: -112px 0; display:inline-block;}
.flag-icon.flag-ao {background-position: -126px 0; display:inline-block;}
.flag-icon.flag-aq {background-position: -140px 0; display:inline-block;}
.flag-icon.flag-ar {background-position: -154px 0; display:inline-block;}
.flag-icon.flag-as {background-position: -168px 0; display:inline-block;}
.flag-icon.flag-at {background-position: -182px 0; display:inline-block;}
.flag-icon.flag-au {background-position: -196px 0; display:inline-block;}
.flag-icon.flag-aw {background-position: 0px -11px; display:inline-block;}
.flag-icon.flag-ax {background-position: -14px -11px; display:inline-block;}
.flag-icon.flag-az {background-position: -28px -11px; display:inline-block;}
.flag-icon.flag-ba {background-position: -42px -11px; display:inline-block;}
.flag-icon.flag-bb {background-position: -56px -11px; display:inline-block;}
.flag-icon.flag-bd {background-position: -70px -11px; display:inline-block;}
.flag-icon.flag-be {background-position: -84px -11px; display:inline-block;}
.flag-icon.flag-bf {background-position: -98px -11px; display:inline-block;}
.flag-icon.flag-bg {background-position: -112px -11px; display:inline-block;}
.flag-icon.flag-bh {background-position: -126px -11px; display:inline-block;}
.flag-icon.flag-bi {background-position: -140px -11px; display:inline-block;}
.flag-icon.flag-bj {background-position: -154px -11px; display:inline-block;}
.flag-icon.flag-bl {background-position: -168px -11px; display:inline-block;}
.flag-icon.flag-bm {background-position: -182px -11px; display:inline-block;}
.flag-icon.flag-bn {background-position: -196px -11px; display:inline-block;}
.flag-icon.flag-bo {background-position: 0px -22px; display:inline-block;}
.flag-icon.flag-br {background-position: -14px -22px; display:inline-block;}
.flag-icon.flag-bs {background-position: -28px -22px; display:inline-block;}
.flag-icon.flag-bt {background-position: -42px -22px; display:inline-block;}
.flag-icon.flag-bw {background-position: -56px -22px; display:inline-block;}
.flag-icon.flag-by {background-position: -70px -22px; display:inline-block;}
.flag-icon.flag-bz {background-position: -84px -22px; display:inline-block;}
.flag-icon.flag-ca {background-position: -98px -22px; display:inline-block;}
.flag-icon.flag-cc {background-position: -112px -22px; display:inline-block;}
.flag-icon.flag-cd {background-position: -126px -22px; display:inline-block;}
.flag-icon.flag-cf {background-position: -140px -22px; display:inline-block;}
.flag-icon.flag-cg {background-position: -154px -22px; display:inline-block;}
.flag-icon.flag-ch {background-position: -168px -22px; display:inline-block; width:12px;}
.flag-icon.flag-ci {background-position: -182px -22px; display:inline-block;}
.flag-icon.flag-ck {background-position: -196px -22px; display:inline-block;}
.flag-icon.flag-cl {background-position: 0px -33px; display:inline-block;}
.flag-icon.flag-cm {background-position: -14px -33px; display:inline-block;}
.flag-icon.flag-cn {background-position: -28px -33px; display:inline-block;}
.flag-icon.flag-co {background-position: -42px -33px; display:inline-block;}
.flag-icon.flag-cr {background-position: -56px -33px; display:inline-block;}
.flag-icon.flag-cu {background-position: -70px -33px; display:inline-block;}
.flag-icon.flag-cv {background-position: -84px -33px; display:inline-block;}
.flag-icon.flag-cw {background-position: -98px -33px; display:inline-block;}
.flag-icon.flag-cx {background-position: -112px -33px; display:inline-block;}
.flag-icon.flag-cy {background-position: -126px -33px; display:inline-block;}
.flag-icon.flag-cz {background-position: -140px -33px; display:inline-block;}
.flag-icon.flag-de {background-position: -154px -33px; display:inline-block;}
.flag-icon.flag-dj {background-position: -168px -33px; display:inline-block;}
.flag-icon.flag-dk {background-position: -182px -33px; display:inline-block;}
.flag-icon.flag-dm {background-position: -196px -33px; display:inline-block;}
.flag-icon.flag-do {background-position: 0px -44px; display:inline-block;}
.flag-icon.flag-dz {background-position: -14px -44px; display:inline-block;}
.flag-icon.flag-ec {background-position: -28px -44px; display:inline-block;}
.flag-icon.flag-ee {background-position: -42px -44px; display:inline-block;}
.flag-icon.flag-eg {background-position: -56px -44px; display:inline-block;}
.flag-icon.flag-eh {background-position: -70px -44px; display:inline-block;}
.flag-icon.flag-er {background-position: -84px -44px; display:inline-block;}
.flag-icon.flag-es {background-position: -98px -44px; display:inline-block;}
.flag-icon.flag-et {background-position: -112px -44px; display:inline-block;}
.flag-icon.flag-eu {background-position: -126px -44px; display:inline-block;}
.flag-icon.flag-fi {background-position: -140px -44px; display:inline-block;}
.flag-icon.flag-fj {background-position: -154px -44px; display:inline-block;}
.flag-icon.flag-fk {background-position: -168px -44px; display:inline-block;}
.flag-icon.flag-fm {background-position: -182px -44px; display:inline-block;}
.flag-icon.flag-fo {background-position: -196px -44px; display:inline-block;}
.flag-icon.flag-fr {background-position: 0px -55px; display:inline-block;}
.flag-icon.flag-ga {background-position: -14px -55px; display:inline-block;}
.flag-icon.flag-gb {background-position: -28px -55px; display:inline-block;}
.flag-icon.flag-gb-eng {background-position: -42px -55px; display:inline-block;}
.flag-icon.flag-gb-sct {background-position: -56px -55px; display:inline-block;}
.flag-icon.flag-gb-wls {background-position: -70px -55px; display:inline-block;}
.flag-icon.flag-gd {background-position: -84px -55px; display:inline-block;}
.flag-icon.flag-ge {background-position: -98px -55px; display:inline-block;}
.flag-icon.flag-gg {background-position: -112px -55px; display:inline-block;}
.flag-icon.flag-gh {background-position: -126px -55px; display:inline-block;}
.flag-icon.flag-gi {background-position: -140px -55px; display:inline-block;}
.flag-icon.flag-gl {background-position: -154px -55px; display:inline-block;}
.flag-icon.flag-gm {background-position: -168px -55px; display:inline-block;}
.flag-icon.flag-gn {background-position: -182px -55px; display:inline-block;}
.flag-icon.flag-gq {background-position: -196px -55px; display:inline-block;}
.flag-icon.flag-gr {background-position: 0px -66px; display:inline-block;}
.flag-icon.flag-gs {background-position: -14px -66px; display:inline-block;}
.flag-icon.flag-gt {background-position: -28px -66px; display:inline-block;}
.flag-icon.flag-gu {background-position: -42px -66px; display:inline-block;}
.flag-icon.flag-gw {background-position: -56px -66px; display:inline-block;}
.flag-icon.flag-gy {background-position: -70px -66px; display:inline-block;}
.flag-icon.flag-hk {background-position: -84px -66px; display:inline-block;}
.flag-icon.flag-hn {background-position: -98px -66px; display:inline-block;}
.flag-icon.flag-hr {background-position: -112px -66px; display:inline-block;}
.flag-icon.flag-ht {background-position: -126px -66px; display:inline-block;}
.flag-icon.flag-hu {background-position: -140px -66px; display:inline-block;}
.flag-icon.flag-ic {background-position: -154px -66px; display:inline-block;}
.flag-icon.flag-id {background-position: -168px -66px; display:inline-block;}
.flag-icon.flag-ie {background-position: -182px -66px; display:inline-block;}
.flag-icon.flag-il {background-position: -196px -66px; display:inline-block;}
.flag-icon.flag-im {background-position: 0px -77px; display:inline-block;}
.flag-icon.flag-in {background-position: -14px -77px; display:inline-block;}
.flag-icon.flag-iq {background-position: -28px -77px; display:inline-block;}
.flag-icon.flag-ir {background-position: -42px -77px; display:inline-block;}
.flag-icon.flag-is {background-position: -56px -77px; display:inline-block;}
.flag-icon.flag-it {background-position: -70px -77px; display:inline-block;}
.flag-icon.flag-je {background-position: -84px -77px; display:inline-block;}
.flag-icon.flag-jm {background-position: -98px -77px; display:inline-block;}
.flag-icon.flag-jo {background-position: -112px -77px; display:inline-block;}
.flag-icon.flag-jp {background-position: -126px -77px; display:inline-block;}
.flag-icon.flag-ke {background-position: -140px -77px; display:inline-block;}
.flag-icon.flag-kg {background-position: -154px -77px; display:inline-block;}
.flag-icon.flag-kh {background-position: -168px -77px; display:inline-block;}
.flag-icon.flag-ki {background-position: -182px -77px; display:inline-block;}
.flag-icon.flag-km {background-position: -196px -77px; display:inline-block;}
.flag-icon.flag-kn {background-position: 0px -88px; display:inline-block;}
.flag-icon.flag-kp {background-position: -14px -88px; display:inline-block;}
.flag-icon.flag-kr {background-position: -28px -88px; display:inline-block;}
.flag-icon.flag-kw {background-position: -42px -88px; display:inline-block;}
.flag-icon.flag-ky {background-position: -56px -88px; display:inline-block;}
.flag-icon.flag-kz {background-position: -70px -88px; display:inline-block;}
.flag-icon.flag-la {background-position: -84px -88px; display:inline-block;}
.flag-icon.flag-lb {background-position: -98px -88px; display:inline-block;}
.flag-icon.flag-lc {background-position: -112px -88px; display:inline-block;}
.flag-icon.flag-li {background-position: -126px -88px; display:inline-block;}
.flag-icon.flag-lk {background-position: -140px -88px; display:inline-block;}
.flag-icon.flag-lr {background-position: -154px -88px; display:inline-block;}
.flag-icon.flag-ls {background-position: -168px -88px; display:inline-block;}
.flag-icon.flag-lt {background-position: -182px -88px; display:inline-block;}
.flag-icon.flag-lu {background-position: -196px -88px; display:inline-block;}
.flag-icon.flag-lv {background-position: 0px -99px; display:inline-block;}
.flag-icon.flag-ly {background-position: -14px -99px; display:inline-block;}
.flag-icon.flag-ma {background-position: -28px -99px; display:inline-block;}
.flag-icon.flag-mc {background-position: -42px -99px; display:inline-block;}
.flag-icon.flag-md {background-position: -56px -99px; display:inline-block;}
.flag-icon.flag-me {background-position: -70px -99px; display:inline-block;}
.flag-icon.flag-mf {background-position: -84px -99px; display:inline-block;}
.flag-icon.flag-mg {background-position: -98px -99px; display:inline-block;}
.flag-icon.flag-mh {background-position: -112px -99px; display:inline-block;}
.flag-icon.flag-mk {background-position: -126px -99px; display:inline-block;}
.flag-icon.flag-ml {background-position: -140px -99px; display:inline-block;}
.flag-icon.flag-mm {background-position: -154px -99px; display:inline-block;}
.flag-icon.flag-mn {background-position: -168px -99px; display:inline-block;}
.flag-icon.flag-mo {background-position: -182px -99px; display:inline-block;}
.flag-icon.flag-mp {background-position: -196px -99px; display:inline-block;}
.flag-icon.flag-mq {background-position: 0px -110px; display:inline-block;}
.flag-icon.flag-mr {background-position: -14px -110px; display:inline-block;}
.flag-icon.flag-ms {background-position: -28px -110px; display:inline-block;}
.flag-icon.flag-mt {background-position: -42px -110px; display:inline-block;}
.flag-icon.flag-mu {background-position: -56px -110px; display:inline-block;}
.flag-icon.flag-mv {background-position: -70px -110px; display:inline-block;}
.flag-icon.flag-mw {background-position: -84px -110px; display:inline-block;}
.flag-icon.flag-mx {background-position: -98px -110px; display:inline-block;}
.flag-icon.flag-my {background-position: -112px -110px; display:inline-block;}
.flag-icon.flag-mz {background-position: -126px -110px; display:inline-block;}
.flag-icon.flag-na {background-position: -140px -110px; display:inline-block;}
.flag-icon.flag-nc {background-position: -154px -110px; display:inline-block;}
.flag-icon.flag-ne {background-position: -168px -110px; display:inline-block;}
.flag-icon.flag-nf {background-position: -182px -110px; display:inline-block;}
.flag-icon.flag-ng {background-position: -196px -110px; display:inline-block;}
.flag-icon.flag-ni {background-position: 0px -121px; display:inline-block;}
.flag-icon.flag-nl {background-position: -14px -121px; display:inline-block;}
.flag-icon.flag-no {background-position: -28px -121px; display:inline-block;}
.flag-icon.flag-np {background-position: -42px -121px; display:inline-block; width:9px;}
.flag-icon.flag-nr {background-position: -56px -121px; display:inline-block;}
.flag-icon.flag-nu {background-position: -70px -121px; display:inline-block;}
.flag-icon.flag-nz {background-position: -84px -121px; display:inline-block;}
.flag-icon.flag-om {background-position: -98px -121px; display:inline-block;}
.flag-icon.flag-pa {background-position: -112px -121px; display:inline-block;}
.flag-icon.flag-pe {background-position: -126px -121px; display:inline-block;}
.flag-icon.flag-pf {background-position: -140px -121px; display:inline-block;}
.flag-icon.flag-pg {background-position: -154px -121px; display:inline-block;}
.flag-icon.flag-ph {background-position: -168px -121px; display:inline-block;}
.flag-icon.flag-pk {background-position: -182px -121px; display:inline-block;}
.flag-icon.flag-pl {background-position: -196px -121px; display:inline-block;}
.flag-icon.flag-pn {background-position: 0px -132px; display:inline-block;}
.flag-icon.flag-pr {background-position: -14px -132px; display:inline-block;}
.flag-icon.flag-ps {background-position: -28px -132px; display:inline-block;}
.flag-icon.flag-pt {background-position: -42px -132px; display:inline-block;}
.flag-icon.flag-pw {background-position: -56px -132px; display:inline-block;}
.flag-icon.flag-py {background-position: -70px -132px; display:inline-block;}
.flag-icon.flag-qa {background-position: -84px -132px; display:inline-block;}
.flag-icon.flag-ro {background-position: -98px -132px; display:inline-block;}
.flag-icon.flag-rs {background-position: -112px -132px; display:inline-block;}
.flag-icon.flag-ru {background-position: -126px -132px; display:inline-block;}
.flag-icon.flag-rw {background-position: -140px -132px; display:inline-block;}
.flag-icon.flag-sa {background-position: -154px -132px; display:inline-block;}
.flag-icon.flag-sb {background-position: -168px -132px; display:inline-block;}
.flag-icon.flag-sc {background-position: -182px -132px; display:inline-block;}
.flag-icon.flag-sd {background-position: -196px -132px; display:inline-block;}
.flag-icon.flag-se {background-position: 0px -143px; display:inline-block;}
.flag-icon.flag-sg {background-position: -14px -143px; display:inline-block;}
.flag-icon.flag-sh {background-position: -28px -143px; display:inline-block;}
.flag-icon.flag-si {background-position: -42px -143px; display:inline-block;}
.flag-icon.flag-sk {background-position: -56px -143px; display:inline-block;}
.flag-icon.flag-sl {background-position: -70px -143px; display:inline-block;}
.flag-icon.flag-sm {background-position: -84px -143px; display:inline-block;}
.flag-icon.flag-sn {background-position: -98px -143px; display:inline-block;}
.flag-icon.flag-so {background-position: -112px -143px; display:inline-block;}
.flag-icon.flag-sr {background-position: -126px -143px; display:inline-block;}
.flag-icon.flag-ss {background-position: -140px -143px; display:inline-block;}
.flag-icon.flag-st {background-position: -154px -143px; display:inline-block;}
.flag-icon.flag-sv {background-position: -168px -143px; display:inline-block;}
.flag-icon.flag-sy {background-position: -182px -143px; display:inline-block;}
.flag-icon.flag-sz {background-position: -196px -143px; display:inline-block;}
.flag-icon.flag-tc {background-position: 0px -154px; display:inline-block;}
.flag-icon.flag-td {background-position: -14px -154px; display:inline-block;}
.flag-icon.flag-tf {background-position: -28px -154px; display:inline-block;}
.flag-icon.flag-tg {background-position: -42px -154px; display:inline-block;}
.flag-icon.flag-th {background-position: -56px -154px; display:inline-block;}
.flag-icon.flag-tj {background-position: -70px -154px; display:inline-block;}
.flag-icon.flag-tk {background-position: -84px -154px; display:inline-block;}
.flag-icon.flag-tl {background-position: -98px -154px; display:inline-block;}
.flag-icon.flag-tm {background-position: -112px -154px; display:inline-block;}
.flag-icon.flag-tn {background-position: -126px -154px; display:inline-block;}
.flag-icon.flag-to {background-position: -140px -154px; display:inline-block;}
.flag-icon.flag-tr {background-position: -154px -154px; display:inline-block;}
.flag-icon.flag-tt {background-position: -168px -154px; display:inline-block;}
.flag-icon.flag-tv {background-position: -182px -154px; display:inline-block;}
.flag-icon.flag-tw {background-position: -196px -154px; display:inline-block;}
.flag-icon.flag-tz {background-position: 0px -165px; display:inline-block;}
.flag-icon.flag-ua {background-position: -14px -165px; display:inline-block;}
.flag-icon.flag-ug {background-position: -28px -165px; display:inline-block;}
.flag-icon.flag-un {background-position: -42px -165px; display:inline-block;}
.flag-icon.flag-us {background-position: -56px -165px; display:inline-block;}
.flag-icon.flag-uy {background-position: -70px -165px; display:inline-block;}
.flag-icon.flag-uz {background-position: -84px -165px; display:inline-block;}
.flag-icon.flag-va {background-position: -98px -165px; display:inline-block; width:12px;}
.flag-icon.flag-vc {background-position: -112px -165px; display:inline-block;}
.flag-icon.flag-ve {background-position: -126px -165px; display:inline-block;}
.flag-icon.flag-vg {background-position: -140px -165px; display:inline-block;}
.flag-icon.flag-vi {background-position: -154px -165px; display:inline-block;}
.flag-icon.flag-vn {background-position: -168px -165px; display:inline-block;}
.flag-icon.flag-vu {background-position: -182px -165px; display:inline-block;}
.flag-icon.flag-wf {background-position: -196px -165px; display:inline-block;}
.flag-icon.flag-ws {background-position: 0px -176px; display:inline-block;}
.flag-icon.flag-xk {background-position: -14px -176px; display:inline-block;}
.flag-icon.flag-ye {background-position: -28px -176px; display:inline-block;}
.flag-icon.flag-yt {background-position: -42px -176px; display:inline-block;}
.flag-icon.flag-za {background-position: -56px -176px; display:inline-block;}
.flag-icon.flag-zm {background-position: -70px -176px; display:inline-block;}
.flag-icon.flag-zw {background-position: -84px -176px; display:inline-block;}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    .flag-icon {
        background: transparent url('../png/_sprite-country-flags-20170630%402x.png') no-repeat 0 0;
        background-size: 225px 170px;
        display: none;
        height: 10px;
        width: 15px;
    }
    .flag-icon.flag-ad {background-position: -15px 0; display:inline-block;}
    .flag-icon.flag-ae {background-position: -30px 0; display:inline-block;}
    .flag-icon.flag-af {background-position: -45px 0; display:inline-block;}
    .flag-icon.flag-ag {background-position: -60px 0; display:inline-block;}
    .flag-icon.flag-ai {background-position: -75px 0; display:inline-block;}
    .flag-icon.flag-al {background-position: -90px 0; display:inline-block;}
    .flag-icon.flag-am {background-position: -105px 0; display:inline-block;}
    .flag-icon.flag-an {background-position: -120px 0; display:inline-block;}
    .flag-icon.flag-ao {background-position: -135px 0; display:inline-block;}
    .flag-icon.flag-aq {background-position: -150px 0; display:inline-block;}
    .flag-icon.flag-ar {background-position: -165px 0; display:inline-block;}
    .flag-icon.flag-as {background-position: -180px 0; display:inline-block;}
    .flag-icon.flag-at {background-position: -195px 0; display:inline-block;}
    .flag-icon.flag-au {background-position: -210px 0; display:inline-block;}
    .flag-icon.flag-aw {background-position: 0px -10px; display:inline-block;}
    .flag-icon.flag-ax {background-position: -15px -10px; display:inline-block;}
    .flag-icon.flag-az {background-position: -30px -10px; display:inline-block;}
    .flag-icon.flag-ba {background-position: -45px -10px; display:inline-block;}
    .flag-icon.flag-bb {background-position: -60px -10px; display:inline-block;}
    .flag-icon.flag-bd {background-position: -75px -10px; display:inline-block;}
    .flag-icon.flag-be {background-position: -90px -10px; display:inline-block;}
    .flag-icon.flag-bf {background-position: -105px -10px; display:inline-block;}
    .flag-icon.flag-bg {background-position: -120px -10px; display:inline-block;}
    .flag-icon.flag-bh {background-position: -135px -10px; display:inline-block;}
    .flag-icon.flag-bi {background-position: -150px -10px; display:inline-block;}
    .flag-icon.flag-bj {background-position: -165px -10px; display:inline-block;}
    .flag-icon.flag-bl {background-position: -180px -10px; display:inline-block;}
    .flag-icon.flag-bm {background-position: -195px -10px; display:inline-block;}
    .flag-icon.flag-bn {background-position: -210px -10px; display:inline-block;}
    .flag-icon.flag-bo {background-position: 0px -20px; display:inline-block;}
    .flag-icon.flag-br {background-position: -15px -20px; display:inline-block;}
    .flag-icon.flag-bs {background-position: -30px -20px; display:inline-block;}
    .flag-icon.flag-bt {background-position: -45px -20px; display:inline-block;}
    .flag-icon.flag-bw {background-position: -60px -20px; display:inline-block;}
    .flag-icon.flag-by {background-position: -75px -20px; display:inline-block;}
    .flag-icon.flag-bz {background-position: -90px -20px; display:inline-block;}
    .flag-icon.flag-ca {background-position: -105px -20px; display:inline-block;}
    .flag-icon.flag-cc {background-position: -120px -20px; display:inline-block;}
    .flag-icon.flag-cd {background-position: -135px -20px; display:inline-block;}
    .flag-icon.flag-cf {background-position: -150px -20px; display:inline-block;}
    .flag-icon.flag-cg {background-position: -165px -20px; display:inline-block;}
    .flag-icon.flag-ch {background-position: -180px -20px; display:inline-block; width:10px;}
    .flag-icon.flag-ci {background-position: -195px -20px; display:inline-block;}
    .flag-icon.flag-ck {background-position: -210px -20px; display:inline-block;}
    .flag-icon.flag-cl {background-position: 0px -30px; display:inline-block;}
    .flag-icon.flag-cm {background-position: -15px -30px; display:inline-block;}
    .flag-icon.flag-cn {background-position: -30px -30px; display:inline-block;}
    .flag-icon.flag-co {background-position: -45px -30px; display:inline-block;}
    .flag-icon.flag-cr {background-position: -60px -30px; display:inline-block;}
    .flag-icon.flag-cu {background-position: -75px -30px; display:inline-block;}
    .flag-icon.flag-cv {background-position: -90px -30px; display:inline-block;}
    .flag-icon.flag-cw {background-position: -105px -30px; display:inline-block;}
    .flag-icon.flag-cx {background-position: -120px -30px; display:inline-block;}
    .flag-icon.flag-cy {background-position: -135px -30px; display:inline-block;}
    .flag-icon.flag-cz {background-position: -150px -30px; display:inline-block;}
    .flag-icon.flag-de {background-position: -165px -30px; display:inline-block;}
    .flag-icon.flag-dj {background-position: -180px -30px; display:inline-block;}
    .flag-icon.flag-dk {background-position: -195px -30px; display:inline-block;}
    .flag-icon.flag-dm {background-position: -210px -30px; display:inline-block;}
    .flag-icon.flag-do {background-position: 0px -40px; display:inline-block;}
    .flag-icon.flag-dz {background-position: -15px -40px; display:inline-block;}
    .flag-icon.flag-ec {background-position: -30px -40px; display:inline-block;}
    .flag-icon.flag-ee {background-position: -45px -40px; display:inline-block;}
    .flag-icon.flag-eg {background-position: -60px -40px; display:inline-block;}
    .flag-icon.flag-eh {background-position: -75px -40px; display:inline-block;}
    .flag-icon.flag-er {background-position: -90px -40px; display:inline-block;}
    .flag-icon.flag-es {background-position: -105px -40px; display:inline-block;}
    .flag-icon.flag-et {background-position: -120px -40px; display:inline-block;}
    .flag-icon.flag-eu {background-position: -135px -40px; display:inline-block;}
    .flag-icon.flag-fi {background-position: -150px -40px; display:inline-block;}
    .flag-icon.flag-fj {background-position: -165px -40px; display:inline-block;}
    .flag-icon.flag-fk {background-position: -180px -40px; display:inline-block;}
    .flag-icon.flag-fm {background-position: -195px -40px; display:inline-block;}
    .flag-icon.flag-fo {background-position: -210px -40px; display:inline-block;}
    .flag-icon.flag-fr {background-position: 0px -50px; display:inline-block;}
    .flag-icon.flag-ga {background-position: -15px -50px; display:inline-block;}
    .flag-icon.flag-gb {background-position: -30px -50px; display:inline-block;}
    .flag-icon.flag-gb-eng {background-position: -45px -50px; display:inline-block;}
    .flag-icon.flag-gb-sct {background-position: -60px -50px; display:inline-block;}
    .flag-icon.flag-gb-wls {background-position: -75px -50px; display:inline-block;}
    .flag-icon.flag-gd {background-position: -90px -50px; display:inline-block;}
    .flag-icon.flag-ge {background-position: -105px -50px; display:inline-block;}
    .flag-icon.flag-gg {background-position: -120px -50px; display:inline-block;}
    .flag-icon.flag-gh {background-position: -135px -50px; display:inline-block;}
    .flag-icon.flag-gi {background-position: -150px -50px; display:inline-block;}
    .flag-icon.flag-gl {background-position: -165px -50px; display:inline-block;}
    .flag-icon.flag-gm {background-position: -180px -50px; display:inline-block;}
    .flag-icon.flag-gn {background-position: -195px -50px; display:inline-block;}
    .flag-icon.flag-gq {background-position: -210px -50px; display:inline-block;}
    .flag-icon.flag-gr {background-position: 0px -60px; display:inline-block;}
    .flag-icon.flag-gs {background-position: -15px -60px; display:inline-block;}
    .flag-icon.flag-gt {background-position: -30px -60px; display:inline-block;}
    .flag-icon.flag-gu {background-position: -45px -60px; display:inline-block;}
    .flag-icon.flag-gw {background-position: -60px -60px; display:inline-block;}
    .flag-icon.flag-gy {background-position: -75px -60px; display:inline-block;}
    .flag-icon.flag-hk {background-position: -90px -60px; display:inline-block;}
    .flag-icon.flag-hn {background-position: -105px -60px; display:inline-block;}
    .flag-icon.flag-hr {background-position: -120px -60px; display:inline-block;}
    .flag-icon.flag-ht {background-position: -135px -60px; display:inline-block;}
    .flag-icon.flag-hu {background-position: -150px -60px; display:inline-block;}
    .flag-icon.flag-ic {background-position: -165px -60px; display:inline-block;}
    .flag-icon.flag-id {background-position: -180px -60px; display:inline-block;}
    .flag-icon.flag-ie {background-position: -195px -60px; display:inline-block;}
    .flag-icon.flag-il {background-position: -210px -60px; display:inline-block;}
    .flag-icon.flag-im {background-position: 0px -70px; display:inline-block;}
    .flag-icon.flag-in {background-position: -15px -70px; display:inline-block;}
    .flag-icon.flag-iq {background-position: -30px -70px; display:inline-block;}
    .flag-icon.flag-ir {background-position: -45px -70px; display:inline-block;}
    .flag-icon.flag-is {background-position: -60px -70px; display:inline-block;}
    .flag-icon.flag-it {background-position: -75px -70px; display:inline-block;}
    .flag-icon.flag-je {background-position: -90px -70px; display:inline-block;}
    .flag-icon.flag-jm {background-position: -105px -70px; display:inline-block;}
    .flag-icon.flag-jo {background-position: -120px -70px; display:inline-block;}
    .flag-icon.flag-jp {background-position: -135px -70px; display:inline-block;}
    .flag-icon.flag-ke {background-position: -150px -70px; display:inline-block;}
    .flag-icon.flag-kg {background-position: -165px -70px; display:inline-block;}
    .flag-icon.flag-kh {background-position: -180px -70px; display:inline-block;}
    .flag-icon.flag-ki {background-position: -195px -70px; display:inline-block;}
    .flag-icon.flag-km {background-position: -210px -70px; display:inline-block;}
    .flag-icon.flag-kn {background-position: 0px -80px; display:inline-block;}
    .flag-icon.flag-kp {background-position: -15px -80px; display:inline-block;}
    .flag-icon.flag-kr {background-position: -30px -80px; display:inline-block;}
    .flag-icon.flag-kw {background-position: -45px -80px; display:inline-block;}
    .flag-icon.flag-ky {background-position: -60px -80px; display:inline-block;}
    .flag-icon.flag-kz {background-position: -75px -80px; display:inline-block;}
    .flag-icon.flag-la {background-position: -90px -80px; display:inline-block;}
    .flag-icon.flag-lb {background-position: -105px -80px; display:inline-block;}
    .flag-icon.flag-lc {background-position: -120px -80px; display:inline-block;}
    .flag-icon.flag-li {background-position: -135px -80px; display:inline-block;}
    .flag-icon.flag-lk {background-position: -150px -80px; display:inline-block;}
    .flag-icon.flag-lr {background-position: -165px -80px; display:inline-block;}
    .flag-icon.flag-ls {background-position: -180px -80px; display:inline-block;}
    .flag-icon.flag-lt {background-position: -195px -80px; display:inline-block;}
    .flag-icon.flag-lu {background-position: -210px -80px; display:inline-block;}
    .flag-icon.flag-lv {background-position: 0px -90px; display:inline-block;}
    .flag-icon.flag-ly {background-position: -15px -90px; display:inline-block;}
    .flag-icon.flag-ma {background-position: -30px -90px; display:inline-block;}
    .flag-icon.flag-mc {background-position: -45px -90px; display:inline-block;}
    .flag-icon.flag-md {background-position: -60px -90px; display:inline-block;}
    .flag-icon.flag-me {background-position: -75px -90px; display:inline-block;}
    .flag-icon.flag-mf {background-position: -90px -90px; display:inline-block;}
    .flag-icon.flag-mg {background-position: -105px -90px; display:inline-block;}
    .flag-icon.flag-mh {background-position: -120px -90px; display:inline-block;}
    .flag-icon.flag-mk {background-position: -135px -90px; display:inline-block;}
    .flag-icon.flag-ml {background-position: -150px -90px; display:inline-block;}
    .flag-icon.flag-mm {background-position: -165px -90px; display:inline-block;}
    .flag-icon.flag-mn {background-position: -180px -90px; display:inline-block;}
    .flag-icon.flag-mo {background-position: -195px -90px; display:inline-block;}
    .flag-icon.flag-mp {background-position: -210px -90px; display:inline-block;}
    .flag-icon.flag-mq {background-position: 0px -100px; display:inline-block;}
    .flag-icon.flag-mr {background-position: -15px -100px; display:inline-block;}
    .flag-icon.flag-ms {background-position: -30px -100px; display:inline-block;}
    .flag-icon.flag-mt {background-position: -45px -100px; display:inline-block;}
    .flag-icon.flag-mu {background-position: -60px -100px; display:inline-block;}
    .flag-icon.flag-mv {background-position: -75px -100px; display:inline-block;}
    .flag-icon.flag-mw {background-position: -90px -100px; display:inline-block;}
    .flag-icon.flag-mx {background-position: -105px -100px; display:inline-block;}
    .flag-icon.flag-my {background-position: -120px -100px; display:inline-block;}
    .flag-icon.flag-mz {background-position: -135px -100px; display:inline-block;}
    .flag-icon.flag-na {background-position: -150px -100px; display:inline-block;}
    .flag-icon.flag-nc {background-position: -165px -100px; display:inline-block;}
    .flag-icon.flag-ne {background-position: -180px -100px; display:inline-block;}
    .flag-icon.flag-nf {background-position: -195px -100px; display:inline-block;}
    .flag-icon.flag-ng {background-position: -210px -100px; display:inline-block;}
    .flag-icon.flag-ni {background-position: 0px -110px; display:inline-block;}
    .flag-icon.flag-nl {background-position: -15px -110px; display:inline-block;}
    .flag-icon.flag-no {background-position: -30px -110px; display:inline-block;}
    .flag-icon.flag-np {background-position: -45px -110px; display:inline-block; width:9px;}
    .flag-icon.flag-nr {background-position: -60px -110px; display:inline-block;}
    .flag-icon.flag-nu {background-position: -75px -110px; display:inline-block;}
    .flag-icon.flag-nz {background-position: -90px -110px; display:inline-block;}
    .flag-icon.flag-om {background-position: -105px -110px; display:inline-block;}
    .flag-icon.flag-pa {background-position: -120px -110px; display:inline-block;}
    .flag-icon.flag-pe {background-position: -135px -110px; display:inline-block;}
    .flag-icon.flag-pf {background-position: -150px -110px; display:inline-block;}
    .flag-icon.flag-pg {background-position: -165px -110px; display:inline-block;}
    .flag-icon.flag-ph {background-position: -180px -110px; display:inline-block;}
    .flag-icon.flag-pk {background-position: -195px -110px; display:inline-block;}
    .flag-icon.flag-pl {background-position: -210px -110px; display:inline-block;}
    .flag-icon.flag-pn {background-position: 0px -120px; display:inline-block;}
    .flag-icon.flag-pr {background-position: -15px -120px; display:inline-block;}
    .flag-icon.flag-ps {background-position: -30px -120px; display:inline-block;}
    .flag-icon.flag-pt {background-position: -45px -120px; display:inline-block;}
    .flag-icon.flag-pw {background-position: -60px -120px; display:inline-block;}
    .flag-icon.flag-py {background-position: -75px -120px; display:inline-block;}
    .flag-icon.flag-qa {background-position: -90px -120px; display:inline-block;}
    .flag-icon.flag-ro {background-position: -105px -120px; display:inline-block;}
    .flag-icon.flag-rs {background-position: -120px -120px; display:inline-block;}
    .flag-icon.flag-ru {background-position: -135px -120px; display:inline-block;}
    .flag-icon.flag-rw {background-position: -150px -120px; display:inline-block;}
    .flag-icon.flag-sa {background-position: -165px -120px; display:inline-block;}
    .flag-icon.flag-sb {background-position: -180px -120px; display:inline-block;}
    .flag-icon.flag-sc {background-position: -195px -120px; display:inline-block;}
    .flag-icon.flag-sd {background-position: -210px -120px; display:inline-block;}
    .flag-icon.flag-se {background-position: 0px -130px; display:inline-block;}
    .flag-icon.flag-sg {background-position: -15px -130px; display:inline-block;}
    .flag-icon.flag-sh {background-position: -30px -130px; display:inline-block;}
    .flag-icon.flag-si {background-position: -45px -130px; display:inline-block;}
    .flag-icon.flag-sk {background-position: -60px -130px; display:inline-block;}
    .flag-icon.flag-sl {background-position: -75px -130px; display:inline-block;}
    .flag-icon.flag-sm {background-position: -90px -130px; display:inline-block;}
    .flag-icon.flag-sn {background-position: -105px -130px; display:inline-block;}
    .flag-icon.flag-so {background-position: -120px -130px; display:inline-block;}
    .flag-icon.flag-sr {background-position: -135px -130px; display:inline-block;}
    .flag-icon.flag-ss {background-position: -150px -130px; display:inline-block;}
    .flag-icon.flag-st {background-position: -165px -130px; display:inline-block;}
    .flag-icon.flag-sv {background-position: -180px -130px; display:inline-block;}
    .flag-icon.flag-sy {background-position: -195px -130px; display:inline-block;}
    .flag-icon.flag-sz {background-position: -210px -130px; display:inline-block;}
    .flag-icon.flag-tc {background-position: 0px -140px; display:inline-block;}
    .flag-icon.flag-td {background-position: -15px -140px; display:inline-block;}
    .flag-icon.flag-tf {background-position: -30px -140px; display:inline-block;}
    .flag-icon.flag-tg {background-position: -45px -140px; display:inline-block;}
    .flag-icon.flag-th {background-position: -60px -140px; display:inline-block;}
    .flag-icon.flag-tj {background-position: -75px -140px; display:inline-block;}
    .flag-icon.flag-tk {background-position: -90px -140px; display:inline-block;}
    .flag-icon.flag-tl {background-position: -105px -140px; display:inline-block;}
    .flag-icon.flag-tm {background-position: -120px -140px; display:inline-block;}
    .flag-icon.flag-tn {background-position: -135px -140px; display:inline-block;}
    .flag-icon.flag-to {background-position: -150px -140px; display:inline-block;}
    .flag-icon.flag-tr {background-position: -165px -140px; display:inline-block;}
    .flag-icon.flag-tt {background-position: -180px -140px; display:inline-block;}
    .flag-icon.flag-tv {background-position: -195px -140px; display:inline-block;}
    .flag-icon.flag-tw {background-position: -210px -140px; display:inline-block;}
    .flag-icon.flag-tz {background-position: 0px -150px; display:inline-block;}
    .flag-icon.flag-ua {background-position: -15px -150px; display:inline-block;}
    .flag-icon.flag-ug {background-position: -30px -150px; display:inline-block;}
    .flag-icon.flag-un {background-position: -45px -150px; display:inline-block;}
    .flag-icon.flag-us {background-position: -60px -150px; display:inline-block;}
    .flag-icon.flag-uy {background-position: -75px -150px; display:inline-block;}
    .flag-icon.flag-uz {background-position: -90px -150px; display:inline-block;}
    .flag-icon.flag-va {background-position: -105px -150px; display:inline-block; width:10px;}
    .flag-icon.flag-vc {background-position: -120px -150px; display:inline-block;}
    .flag-icon.flag-ve {background-position: -135px -150px; display:inline-block;}
    .flag-icon.flag-vg {background-position: -150px -150px; display:inline-block;}
    .flag-icon.flag-vi {background-position: -165px -150px; display:inline-block;}
    .flag-icon.flag-vn {background-position: -180px -150px; display:inline-block;}
    .flag-icon.flag-vu {background-position: -195px -150px; display:inline-block;}
    .flag-icon.flag-wf {background-position: -210px -150px; display:inline-block;}
    .flag-icon.flag-ws {background-position: 0px -160px; display:inline-block;}
    .flag-icon.flag-xk {background-position: -15px -160px; display:inline-block;}
    .flag-icon.flag-ye {background-position: -30px -160px; display:inline-block;}
    .flag-icon.flag-yt {background-position: -45px -160px; display:inline-block;}
    .flag-icon.flag-za {background-position: -60px -160px; display:inline-block;}
    .flag-icon.flag-zm {background-position: -75px -160px; display:inline-block;}
    .flag-icon.flag-zw {background-position: -90px -160px; display:inline-block;}
}

/* trackpipe/public/css/home_2016/home.css */
/*------------------------------------------------------------*/
.client-rendered {
    display: none;
}

/*title elements*/
.section-title > em {
    color: #999;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-left: 28px;
}
.section-title a {
    border-radius: 14px;
    color: #666;
    margin-right: 8px;
    padding: 6px 10px;
    text-decoration: none;
    transition: background-color 0.4s ease-in;
}
.section-title a:hover {
    text-decoration: underline;
}
.section-title a:first-child {
    margin-left: 8px;
}
.section-title a:last-child {
    margin-right: 0;
}
.section-title a:active,
.section-title a.selected {
    background-color: rgba(144,144,144,0.25);
    color: #000;
}
.section-title a.selected:hover {
    text-decoration: none;
}

.bcdaily .section-title a,
.discover-tags-title .section-title a {
    padding: 0;
    margin: 0;
    color: #408ea3;
}
.discover-categories .section-title a {
    padding: 0;
    margin: 0;
    color: #408ea3;
}

.discover .section-title,
.spotlight .section-title,
.signups .section-title {
    color: #000;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 18px;
}
.salesfeed .section-title,
.notable .section-title,
.bcdaily .section-title,
.discover-tags-title .section-title,
.curated-shows .section-title,
.discover-categories .section-title,
.tags .section-title {
    color: #408ea3;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.item-title > a {
    color: #000;
    text-decoration: none;
}
.item-title > a:hover {
    text-decoration: underline;
}

.load-more {
    display: none;
}

/*------------------------------------------------------------*/
/* [ buy now | wishlist | hear more ] buttons */
.collect-item-container {}
.collect-item-container ul {
    border: 1px solid #b2b2b2;
    border-radius: 3px;
    font-size: 0;
    list-style: none;
    margin: 10px 0;
    padding: 0;
}
.item-container {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    line-height: 35px;
    text-align: center;
    width: 33%;
}
html:lang(fr) .item-container,
html:lang(de) .item-container,
html:lang(pt) .item-container,
html:lang(es) .item-container,
html:lang(ja) .item-container {
    font-size: 10px;
}
html:lang(de) .item-container {
    text-transform: lowercase;
}
.item-container a {
    cursor: pointer;
}
.item-container > a,
.item-container > span {
    border-right: 1px solid #b2b2b2;
    display: block;
}
.purchased .item-container.wishlist {
    width: 100%;
}
.purchased .item-container.wishlist > a,
.purchased .item-container.wishlist > span {
    border: none;
    color: #555;
}
.collection-btn > a {
    display: block;
}
.collection-btn.wishlisted-msg > a {
    display: inline-block;
}
.item-container:last-child > a,
.item-container:last-child > span {
    border-right: none;
}
.item-container.nav_note {
    color: #999;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

html:lang(fr) .item-container.nav_note,
html:lang(de) .item-container.nav_note,
html:lang(pt) .item-container.nav_note,
html:lang(es) .item-container.nav_note,
html:lang(ja) .item-container.nav_note {
    font-size: 12px;
}

html:lang(fr) .item-container.nav_note,
html:lang(ja) .item-container.nav_note {
    width: 40%;
}

.purchased+.item-container.nav_note {
    display: none;
}
.collect-item .collect-item-icon {
    background-position: 0px -73px;
    display: inline-block;
    height: 13px;
    margin-right: 4px;
    vertical-align: middle;
    width: 14px;
}
/* buy now · wishlist links*/
.item-collection-controls {
    opacity: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: opacity 0.2s ease-in;
}
.playing~.item-collection-controls,
.playable-hover-target:hover .item-collection-controls,
.no-hover .item-collection-controls {
    opacity: 1;
}
.item-collection-controls > li {
    line-height: 1;
    margin-right: 20px;
}
.item-collection-controls > li:last-child {
    margin-right: 0;
}
.item-collection-controls > li a {
    color: #000;
    font-weight: 500;
}
.item-collection-controls > li a:hover {
    text-decoration: underline;
}
.wishlisted .wishlisted-msg {
    margin-left: -5px;
}
/* icons */
.purchased-msg .collect-item-icon {
    background-position: -42px -73px;
}
.wishlist-msg .collect-item-icon {
    background-position: -70px -73px;
}
.wishlisted-msg .collect-item-icon,
.wishlist-msg.wishlisted .collect-item-icon,
.bcweekly-info .wishlist-msg.wishlisted .collect-item-icon{
    background-position: -28px -73px;
}
.purchased-msg.purchased .collect-item-icon+.txt {
    font-size: 12px;
    margin-left: 4px;
    margin-top: 1px;
}
/* visibility */
.buy-now,
.wishlist-msg,
.wishlisted .wishlisted-msg,
.purchased .purchased-msg,
.purchased.purchased-msg {
    display: inline-block;
}
.purchased-msg,
.wishlisted-msg,
.item-container .purchased-msg,
.item-container .wishlisted-msg,
.item-container .purchased .buy-now,
.purchased .wishlist-msg,
.purchased .wishlisted-msg,
.purchased .buy-now,
.purchased .hear-more,
.wishlisted .wishlist-msg,
.purchased.wishlist-msg,
.purchased.wishlisted-msg,
.purchased.buy-now {
    display: none;
}
.track-large .wishlisted .wishlisted-msg,
.track-large .purchased .purchased-msg,
.discover-detail .wishlisted .wishlisted-msg,
.discover-detail .purchased .purchased-msg {
    display: block;
}

/*------------------------------------------------------------*/
/*play buttons*/
.no-hover .plb-bg {
    background: #000;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.no-hover .plb-btn {
    bottom: 6px;
    height: 0;
    left: 6px;
    padding-top: 24%;
    position: absolute;
    width: 32%;
}
.no-hover .plb-bg {
    opacity: 0.60;
}
.no-hover .plb-ic {
    background: url(https://s4.bcbits.com/img/mobile-sprites-20150520.svg) no-repeat 50% 0;
    background-size: 500% auto;
    height: 0;
    left: 35%;
    padding-top: 37.5%;
    position: absolute;
    top: 25%;
    width: 37.5%;
}

/*------------------------------------------------------------*/
/*sections shared*/
.notable,
.curated-shows,
.discover-categories,
.bcdaily,
.email-intake,
.discover,
.discover-tags-title,
.app-promo-desktop {
    background-color: #eef2f3;
}
.discover-tags {
    background-color: var(--gray700);
}
.notable,
.curated-shows,
.bcdaily,
.spotlight,
.app-promo {
    padding: 36px 0;
}
.discover-categories {
    padding: 70px 0 30px 0;
}
.discover-tags-title {
    padding-top: 36px;
}
.notable .stepper,
.bcdaily .stepper,
.spotlight .stepper {
    position: absolute;
    right: 0;
}

/*------------------------------------------------------------*/
@media (max-width:740px) {
    /* fix for global style */
    .popupimage_gallery {
        z-index: 15;
    }
    /* general */
    .bd {
        padding-top: 0;
        position: relative;
    }
    .item-collection-controls {
        opacity: 1 !important;
    }
    .item-collection-controls > li a {
        color: #408ea3;
        font-weight: 700;
    }
    .item-collection-controls.purchased > li a {
        color: #555;
    }
    .wishlist-msg .collect-item-icon {
        background-position: -56px -73px;
    }
    .item-collection-controls > li+li.buy-now:before {
        content: '·';
        color: #999;
        display:inline-block;
        font-weight: 700;
        margin-left:-10px;
        margin-right: 8px;
    }
    .load-more {
        display: block;
    }
    .mobile-btn {
        background-color: #fff;
        border: 1px solid #408ea3;
        color: #408ea3;
        display: block;
        font-size: 12px;
        font-weight: 500;
        margin: 0 auto 27px;
        max-width: 91.47%;
        padding: 10px 0 8px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }
    .mobile-btn.disabled {
        opacity: 0.5;
    }
    .factoid .col,
    .bcdaily .col,
    .discover-results.col,
    .spotlight-unit.col,
    .signups .col {
        display: block;
        float: none;
        margin:0;
        width: 100%;
    }
    .salesfeed .section-title,
    .notable .section-title,
    .bcdaily .section-title,
    .tags .section-title {
        color: #4093A9;
    }

    #email-intake-vm {
        padding-bottom: 10px;
    }

    /* sections */
    .section-title {
        margin: 0 0 18px !important;
    }
    .section-title em {
        display: block;
        margin: 9px 0;
    }
    .stepper {
        display: none !important;
        position: relative !important;
        right: inherit !important;
    }
    .tags {
        padding: 18px 0 27px;
    }
    .tags .tagcloud {
        line-height: 2rem;
        margin-bottom: 1rem;
    }
    .tags .tagcloud a {
        padding-right: 0.75rem;
    }
    .tags .tagcloud .size1 { font-size: 1.2rem; }
    .tags .tagcloud .size2 { font-size: 1.1rem; }
    .tags .tagcloud .size3 { font-size: 0.95rem; }
    .tags .tagcloud .hidden,
    .tags .related_tag_cloud a.hidden {
        display: none;
    }
    .tag {
        color: #408ea3;
    }
}

@media (max-width: 800px) and (min-width: 741px) {
    /*home*/
    .wishlisted .wishlisted-msg {
        margin-left: 0;
    }
}

@media (max-width: 1024px) and (min-width: 801px) {
    .wishlisted .wishlisted-msg {
        margin-left: 0;
    }
}

/* trackpipe/public/css/home_2016/carousel.css */

.carousel-bcweekly-container {
    position: relative;
    clear: both;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

.carousel-outer {
    color: white;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.40);
}

.carousel-big-item > a {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.carousel-small-item > a {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.carousel-big-item-details .read-more-button {
    display: none;
}

.carousel-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(red, yellow);
    background: -o-linear-gradient(red, yellow);
    background: -moz-linear-gradient(red, yellow);
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
}

.carousel-item-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;

    transition: opacity 0.1s ease-out;
}

.has-hover .carousel-big-item:hover .carousel-item-hover-overlay,
.has-hover .carousel-small-item:hover .carousel-item-hover-overlay,
.has-hover .carousel-item-hover-overlay.visible {
    opacity: 1;
}

.carousel-bcweekly-container.bcweekly-expanded .carousel-item-hover-overlay {
    display: none;
}

.read-more-arr {
    opacity: 0;
}

.carousel-small-bcweekly-button {
    opacity: 0;
}

@media (min-width: 741px) {

    .carousel-big-item-details > .row,
    .bcweekly-outer > .row {
        margin: 0 auto;
    }

    .after-carousel {

    }

    .carousel-bcweekly-container {
        position: relative;
        padding: 37.5% 0 0;
    }

    .carousel-bcweekly-container.bcweekly-expanded {
        padding: 45% 0 0;
    }

    .carousel-outer {
        position: absolute;
        top: 0;
        z-index: 3;
        width: 100%;
    }

    .carousel-big-item {
        width: 74%;
        height: 0;
        padding-top: 37.5%;
        /*float: left;*/
        background-size: cover;
        background-position: 50% 50%;
        position: relative;
        display: inline-block;
    }
    .carousel-big-item-details {
        display: block;
        position: absolute;
        bottom: 4px;
        width: 100%;
        color: inherit;
    }
    .carousel-big-bcweekly-details {
        position: absolute;
        bottom: 50px;
    }
    .carousel-big-item-blurb {
        font-size: 14px;
        line-height: 19px;
        font-weight: 500;
        margin: 6px 0 20px 0;
    }

    .carousel-big-item-details .read-more-button {
        border: 1px solid #FFF;
        border-radius: 4px;
        display: inline-block;
        font-size: 12px;
        line-height: 12px;
        font-weight: bold;
        margin: 6px 0 17px 0;
    }

    .carousel-big-item-details .read-more {
        padding: 8px 14px 8px 14px;
        display: inline-block;
        text-decoration: none;
        position: relative;

        transition: padding 0.1s;
    }

    .carousel-big-item-details .read-more-arr {
        position: absolute;
        top: 9px;
        fill: #FFF;
        height: 13px;
        width: 25px;
        right: 8px;
        transition: opacity 0.1s;
    }

    .carousel-item-details-inner {
        display: inline-block;
        margin-right: 20px;
    }

    .carousel-item-details-inner:hover .read-more-button .read-more {
        padding: 8px 36px 8px 14px;
    }

    .carousel-item-details-inner:hover .read-more-button .read-more-arr {
        opacity: 1;
    }

    .carousel-small-items {
        display: inline-block;
        box-sizing: border-box;
        width: 26%;
        /*float: left;*/
        list-style: none;
        padding: 0 0 0 2px;
        margin: 0;
        overflow: hidden;
        position: absolute;
        right: 0;

        opacity: 1;
        transform: none;
        transition: transform 0.2s ease-in,
                    opacity 0.2s ease-in;
    }
    .carousel-small-item {
        position: relative;
        margin: 0 0 2px 0;
        width: 100%;
        height: 0;
        padding-top: 48%;
        background-size: cover;
        background-position: 50% 50%;
    }
    .carousel-small-item-details {
        position: absolute;
        bottom: 0;
    }
    .carousel-small-item-title {
        margin: 0 12px 6px 12px;
    }
    .put-the-arrow-on-the-same-line-as-the-title-on-all-the-browsers {
        white-space: nowrap;
    }
    .carousel-small-item-subtitle {
        text-transform: uppercase;
        margin: 0 0 16px 12px;
        font-size: 10px;
    }

    .carousel-small-item-details .read-more-arr {
        display: inline-block;
        position: relative;
        top: 2px;
        fill: #FFF;
        height: 12px;
        width: 28px;
        right: 8px;
        transition: opacity 0.2s;
    }

    .carousel-small-item:hover .carousel-small-item-details .read-more-arr {
        opacity: 1;
    }

    .carousel-small-bcweekly-button {
        height: 0;
        padding-top: 16%;
        width: 23%;
        position: absolute;
        right: 0;
        bottom: 0;
        opacity: 0;

        transition: opacity 0.2s;
    }

    .carousel-small-bcweekly-button .icon {
        border-bottom: inset 10px transparent;
        border-left: 18px solid #fff;
        border-top: inset 10px transparent;
        display: block;
        position: absolute;
        left: 41%;
        top: 33%;
    }

    .carousel-small-item:hover .carousel-small-bcweekly-button {
        opacity: 1;
    }

    .carousel-bcweekly-container.bcweekly-is-big.bcweekly-expanded .carousel-small-items {
        transform: translateX(50px);
        opacity: 0;
    }

    .carousel-bcweekly-container.bcweekly-is-big .carousel-big-item {
        display: none;
    }

    .bcweekly-outer {
        position: absolute;
        top: 0;
        /*width: 74%;*/
        width: 100%;
        opacity: 0;
        /*z-index: 1;*/

        transition: opacity 0.2s ease-in, z-index 0s linear 0.2s;

    }

    .carousel-bcweekly-container.bcweekly-is-big .bcweekly-outer {
        opacity: 1;
        transition: opacity 0.2s ease-in;
    }

    .carousel-bcweekly-container.bcweekly-expanded .bcweekly-outer {
        opacity: 1;
        transition: opacity 0.2s ease-in, z-index 0s linear 0s;
        z-index: 4;
    }

    .carousel-bcweekly-container .bcweekly {
        z-index: 3;
    }

    .carousel-bcweekly-container.bcweekly-expanded .bcweekly {
        z-index: 3;
    }

    .carousel-bcweekly-container.bcweekly-is-big.bcweekly-expanded .carousel-outer {
    }

    .carousel-bcweekly-container.bcweekly-expanded .carousel-outer {
        z-index: 2;
    }
}

@media (min-width: 1456px) {
    .carousel-bcweekly-container {
        max-width: 1441px;
        padding: 540px 0 0;
    }

     .carousel-bcweekly-container.bcweekly-expanded {
        padding: 650px 0 0;
    }

    .carousel-big-item {
        padding-top: 37.5%;
    }

    .carousel-small-item {
        padding-top: 47.9%;
    }

    .carousel-bcweekly-container-container {
        background-color: #222;
    }
}

/*Giving the editorial title in the main tile a responsive twist*/

@media (min-width: 961px) {

    .carousel-big-item-title {
        font-size: 32px;
        line-height: 37px;
        margin: 0 0 10px 0;
    }

    .carousel-small-item-title {
        font-size: 15px;
        line-height: 17px;
    }
}

@media (min-width: 741px) and (max-width: 960px) {

    .carousel-big-item-title {
        font-size: 28px;
        line-height: 33px;
        margin: 0 0 5px 0;
    }

    .carousel-small-item-title {
        font-size: 13px;
        line-height: 15px;
    }

}

/*------------------------------------------------------------*/
/*                         PHONE                              */
/*------------------------------------------------------------*/

@media (max-width: 740px) {

    /* add a bordered gap between expanded bcweekly and bcdaily */
    .carousel-bcweekly-container.bcweekly-expanded:after {
        content: ' ';
        display: block;
        width: 100%;
        height: 1rem;
        background: #eef2f3;
        border-top: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
    }

    .carousel-outer {
        position: relative;
        background: white;
    }

    .carousel-big-item {
        width: 100%;
        height: 0;
        padding-top: 66.7%;
        position: relative;
        background-size: cover;
        background-position: 50% 50%;
    }

    .carousel-big-item-details .row {
        max-width: 100%;
    }

    .carousel-big-item-details .row .carousel-item-details-inner {
        padding: 0.75rem;
    }

    .carousel-big-item-details .row .col.col-12-16 {
        width: 100%;
    }
    .carousel-big-item-details,
    .carousel-small-item-details {
        display: block;
        position: absolute;
        color: inherit;
    }
    .carousel-big-item-details {
        bottom: 40%; /* matches .carousel-small-item padding-top */
        box-sizing: border-box;
        padding-bottom: 0;
    }
    .carousel-small-item-details {
        bottom: 0;
        padding: 0.75rem;
    }
    .carousel-big-item-title {
        font-size: 1.385rem;
        line-height: 1.615rem;
        margin: 0 0 0.385rem 0;
    }
    .carousel-big-item-subtitle {
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .carousel-small-item-blurb {
        margin: 0.5rem 0 0 0;
    }

    .carousel-small-item .read-more-arr {
        display: none;
    }

    /* tweaks for bcweekly as big item */

    .bcweekly-is-big .carousel-big-item {
        padding-top: 52%;
        height: auto;
        background-size: 100%;
        background-position: 50% 0;
        background-repeat: no-repeat;
    }
    .carousel-big-bcweekly-details {
        background: #EEF2F3;
        text-shadow: none;
        color: black;
        padding: 0.5rem;
    }
    .carousel-big-bcweekly-details .carousel-big-item-title {
        margin-bottom: 0.25rem;
    }
    .carousel-big-bcweekly-details .carousel-big-item-blurb {
        margin: 0;
    }

    .carousel-big-bcweekly-details .carousel-big-item-title,
    .carousel-big-bcweekly-details .carousel-big-item-subtitle {
        display: inline-block;
    }

    .carousel-small-items {
        display: flex;
        flex-direction: row;
        width: 100%;
        list-style: none;
        margin: 2px 0 0 0;
        padding: 0;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .carousel-small-item {
        display: block;
        flex: 1 0 80%;
        margin: 0 2px 0 0;
        height: 0;
        padding-top: 44%; /* 55% * 80%. matches .carousel-big-item-details bottom. */
        position: relative;
        background-size: cover;
        background-position: 50% 50%;
    }
    .carousel-small-item-title {
        font-size: 1rem;
        margin: 0;
    }
    .carousel-small-item-subtitle {
        text-transform: uppercase;
        margin: 0.25rem 0 0 0;
        font-size: 0.625rem;
    }

    .carousel-item-overlay {
        background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60));
        background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60));
        background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60));
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60));
    }

    /* weekly-specific things */

    .carousel-bcweekly-play-button {
        height: 50px;
        width: 66px;
        position: absolute;
        text-align: center;
        display: block;
        background: black;
    }
    .carousel-bcweekly-play-button > .icon {
        display: inline-block;
        width: 0;
        height: 0;
        border-bottom: inset 10px transparent;
        border-left: 18px solid #fff;
        border-top: inset 10px transparent;
        margin: 16px 0 0 2px;
    }
    .carousel-big-item .carousel-bcweekly-play-button {
        margin-top: -50px;
    }
    .carousel-small-item .carousel-bcweekly-play-button {
        bottom: 0;
    }
    .carousel-small-bcweekly .carousel-small-item-details {
        left: 66px;
    }

    /* carousel <-> bcweekly animations */
    /* crossfade version */
    .carousel-bcweekly-container .bcweekly-outer {
        position: absolute;
        top: 0;
        width: 100%;
        opacity: 0;
        z-index: -1;
        transition-property: opacity;
        transition-duration: 200ms;
        transition-timing-function: ease-in;
    }
    .carousel-bcweekly-container.bcweekly-expanded .bcweekly-outer {
        position: static;
        width: auto;
        top: auto;
        z-index: auto;
        opacity: 1;
        transition-timing-function: ease-out;
    }

    .carousel-outer {
        opacity: 1;
        transition-property: opacity;
        transition-duration: 200ms;
        transition-timing-function: ease-out;
    }

    .carousel-bcweekly-container.bcweekly-expanded .carousel-outer {
        position: absolute;
        top: 0;
        width: 100%;
        opacity: 0;
        z-index: -1;
        transition-timing-function: ease-in;
    }

    /* removing hover state */
    .carousel-item-hover-overlay {
        display: none;
    }

    /* fade to white between version */
    /*
    .carousel-bcweekly-container .bcweekly-outer {
        position: absolute;
        top: 0;
        width: 100%;
        opacity: 0;
        z-index: -1;
        transition-property: opacity;
        transition-duration: 100ms;
        transition-delay: 0s;
        transition-timing-function: ease-in;
    }
    .carousel-bcweekly-container.bcweekly-expanded .bcweekly-outer {
        position: static;
        width: auto;
        top: auto;
        z-index: auto;
        opacity: 1;
        transition-delay: 100ms;
        transition-timing-function: ease-out;
    }

    .carousel-outer {
        opacity: 1;
        transition-property: opacity;
        transition-duration: 100ms;
        transition-delay: 100ms;
        transition-timing-function: ease-out;
    }

    .carousel-bcweekly-container.bcweekly-expanded .carousel-outer {
        position: absolute;
        top: 0;
        width: 100%;
        opacity: 0;
        z-index: -1;
        transition-delay: 0s;
        transition-timing-function: ease-in;
    }
    */
}

/* trackpipe/public/css/home_2016/bcweekly.css */

.bcweekly-outer {
    /*background-color: #eef2f3;*/
    box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.15);
}
.bcweekly {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #eef2f3; /* fallback */
    height: 0;
    overflow: hidden;
    /*padding:35% 0 0;*/
    position: relative;

    /*margin: 0 auto;*/
    margin: 0;
    width: 74%;
    max-width: 1440px;
        padding: 37.5% 0 0;
    background-size: cover;

    z-index: auto;

    transition: padding 0.3s ease-out,
                width 0.3s ease-out;
}

/*.bcweekly.busy,
.bcweekly.expanded {
    padding: 45% 0 0;
}*/
.carousel-bcweekly-container.bcweekly-expanded .bcweekly {
    padding: 45% 0 0;
    width: 100%;
}

.bcweekly.unpublished:after {
    background-color: rgba(255, 0, 0, 0.6);
    color: #fff;
    content: 'unpublished';
    font-size: 12px;
    font-weight: 700;
    padding: 8px 0;
    position: absolute;
    right: -34px;
    text-align: center;
    top: 26px;
    transform: rotate(45deg);
    width: 150px;
}

.bcweekly-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: z-index 0s linear 0.2s;
}

.bcweekly-view-shows .bcweekly-info {
    z-index: 1000;
    transition: z-index 0s linear 0s;
}

.bcweekly-info > .row {
    height: 100%;
}

.bcweekly-info-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.bcweekly-player {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.0);
    bottom: 6px;
    /*left: 10%;*/
    max-height: 169px;
    min-height: 100px;
    position: absolute;
    width: 560px;
    transition:
        box-shadow 0.175s linear,
        max-height 0.33s ease-in-out,
        min-height 0.33s ease-in-out,
        width 0.33s ease-in-out,
        bottom 0.33s ease-in-out;

    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}
.bcweekly.expanded ~ .bcweekly-info .bcweekly-player,
.bcweekly.busy ~ .bcweekly-info .bcweekly-player {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    max-height: 72px;
    min-height: 58px;
    width: 414px;
    z-index: 1;
    bottom: 20px;
}
.bcweekly-info .bcweekly-player .bcweekly-player-fade {
    opacity: 0;
}
.bcweekly.expanded ~ .bcweekly-info .bcweekly-player .bcweekly-player-fade {
    background: url('../png/overflow-fade.png') repeat-x;
    background: -moz-linear-gradient(top, 66% rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background: -webkit-linear-gradient(top, 66% rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    bottom: 100%;
    display: block;
    height: 30px;
    position: absolute;
    width: 100%;
    -webkit-animation: fade-in 0.175s ease-in;
    -moz-animation: fade-in 0.175s ease-in;
    animation: fade-in 0.175s ease-in;
    -webkit-animation-delay: 0.33s;
    -moz-animation-delay: 0.33s;
    animation-delay: 0.33s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.bcweekly-player > .col {
    background-color: transparent;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    max-height: 169px;
    min-height: 58px;
    transition:
        box-shadow 0.175s linear,
        max-height 0.33s ease-in-out,
        min-height 0.33s ease-in-out,
        width 0.33s ease-in-out;
    width: 123px;
}
.bcweekly-player > .col+.col {
    background-color: #fff;
    min-height: 103px;
    padding: 0 15px;
    width: 407px;
}
.bcweekly.expanded ~ .bcweekly-info .bcweekly-player > .col,
.bcweekly.busy ~ .bcweekly-info .bcweekly-player > .col {
    box-shadow: 0 0 0 0 rgba(0,0,0,0.0);
    max-height: 72px;
    min-height: 58px;
    width: 79px;
}
.bcweekly.expanded ~ .bcweekly-info .bcweekly-player > .col+.col,
.bcweekly.busy ~ .bcweekly-info .bcweekly-player > .col+.col {
    background-color: #f5f5f5;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    min-height: 58px;
    width: 305px;
}

/* this one is mobile only */
.close-show-mobile {
    display: none;
}

.close-show-desktop {
    opacity: 0;
    position: absolute;
    z-index: 2;
    top: 7%;
}

.close-show-desktop .close-show-inner {
    margin-top: -25px;
    display: block;
    color: #FFF;
    background-color: rgba(0,0,0,0.2);
    border-radius: 2px;
    padding: 2px 6px 3px;
    font-size: 0;
}

.close-show-icon {
    display: inline-block;
    vertical-align: bottom;
    width: 12px;
    height: 12px;
    fill: #FFF;
    margin-bottom: 1px;
}

.close-show-text {
    display: inline-block;
    margin-left: 4px;
    font-weight: 500;
    font-size: 13px;
    vertical-align: bottom;
}

.carousel-bcweekly-container.bcweekly-expanded .close-show-desktop {
    opacity: 1;
    transition: opacity 0.2s ease-in 0.2s;
}

.bcweekly-info .social-controls {
    display: none;
}
.bcweekly-info ul.social-controls {
    margin: -2px 0 0;
    padding: 0;
    padding-left: 10px;
    vertical-align: middle;
}
.bcweekly-info ul.social-controls li {
    list-style-type: none;
    float: left;
}
.bcweekly-info ul.social-controls li a {
    border-radius: 2px;
    display: block;
    margin: -5px 20px -5px -5px;
    padding: 5px;
}
.bcweekly-info ul.social-controls a.twitter-link {
    margin-right: 15px;
}
.bcweekly.sharing ~ .bcweekly-info ul.social-controls {
    display: inline-block;
}
.bcweekly.sharing ~ .bcweekly-info .bcweekly-share-link {
    display: none;
}
.bcweekly-links-2 .bcweekly-shows-link:after {
    color: #ccc;
    content: '|';
    display: inline-block;
    margin: 0 10px 0 10px;
}
ul.social-controls {

}

.bcweekly-info ul.social-controls .bc-home {
    display: inline-block;
    height: 15px;
    min-width: 15px;
}
.facebook-link .bc-home {
    background-position: 0 -60px;
}
.facebook-link:hover .bc-home {
    background-position: 0 -80px;
}
.twitter-link .bc-home {
    background-position: -20px -60px;
    width: 18px;
}
.twitter-link:hover .bc-home {
    background-position: -20px -80px;
}
.email-link .bc-home {
    background-position: -70px -60px;
    width: 19px;
}
.email-link:hover .bc-home {
    background-position: -70px -80px;
}

.bcweekly-email-panel {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    left: 0;
    outline: none;
    padding: 13px;
    position: absolute;
    top: 0;
    z-index: 10;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
}
.bcweekly-email-panel .close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 3px;
}
.bcweekly-email-panel .close span {
    width: 9px;
    height: 9px;
    background-position: 0 -44px;
    display: inline-block;
    text-indent: -9999px;
    position: relative;
    top: 6px;
    right: -6px;
}
.bcweekly-email-panel .email-field {
    width: 286px;
}

.bcweekly-title,
.bcweekly-credits,
.bcweekly-desc,
.bcweekly-links-1,
.bcweekly-links-2 {
    font-size: 13px;
    line-height: 18px;
}
.bcweekly-title {
    font-size: 18px;
    margin: 10px 65px 5px 0;
}
.bcweekly-title > em {
    color: #999;
    font-style: normal;
    font-weight: 500;
    margin-left: 4px;
    font-size: 13px;
}
.bcweekly-desc {
    clear: both;
    margin: 0;
}
.bcweekly.busy ~ .bcweekly-info .bcweekly-desc,
.bcweekly.expanded ~ .bcweekly-info .bcweekly-desc,
.bcweekly.busy ~ .bcweekly-info .bcweekly-credits,
.bcweekly.expanded ~ .bcweekly-info .bcweekly-credits {
    display: none;
}
.bcweekly.busy ~ .bcweekly-info .bcweekly-title,
.bcweekly.expanded ~ .bcweekly-info .bcweekly-title {
    font-size: 14px;
    margin-right: 0;
}
.bcweekly-credits {
    color: #777;
    font-size: 11px;
    line-height: 16px;
    margin: 6px 0 8px;
}
.bcweekly-credits a {
    color: #777;
    display: inline-block;
    text-decoration: none;
}
.bcweekly-credits a:hover {
    color: #000;
    text-decoration: underline;
}
.bcweekly-links-1,
.bcweekly-links-2,
.bcweekly-links-3 {
    color: #999;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}
.bcweekly-links-1 {
    position: absolute;
    right: 15px;
    top: 8px;
    font-size: 13px;
    margin: 5px 0 7px;
    text-align: right;
}
.bcweekly-links-2 {
    margin: 4px 0 5px;
}
.bcweekly-tabs,
.bcweekly-links-2,
.bcweekly-links-3 {
    display: none;
}
.bcweekly.busy ~ .bcweekly-info .bcweekly-credits+.bcweekly-links-1,
.bcweekly.expanded ~ .bcweekly-info .bcweekly-credits+.bcweekly-links-1 {
    display: none;
}
.bcweekly.busy ~ .bcweekly-info .bcweekly-links-2,
.bcweekly.expanded ~ .bcweekly-info .bcweekly-links-2 {
    display: block;
}
.bcweekly-links-1 > a,
.bcweekly-links-2 > a,
.bcweekly-links-3 > a {
    color: #408ea3;
    text-decoration: none;
}
.bcweekly-links-1 > a:hover,
.bcweekly-links-2 > a:hover {
    text-decoration: underline;
}

.bcweekly-player .play-btn {
    background: #000;
    display: block;
    height: 103px;
    position: relative;
    text-align: center;
    width: 123px;
    transition:
        height 0.33s ease-in-out,
        width 0.33s ease-in-out;
}
.bcweekly.busy ~ .bcweekly-info .bcweekly-player .play-btn,
.bcweekly.expanded ~ .bcweekly-info .bcweekly-player .play-btn {
    height: 58px;
    width: 79px;
}
.bcweekly-player .play-btn .icon {
    border-bottom: inset 14px transparent;
    border-left: 24px solid #fff;
    border-top: inset 14px transparent;
    display: inline-block;
    height: 0px;
    margin: 37px 0 0 5px;
    width: 0px;

    transition: margin 0s ease-in-out;
}
.bcweekly.expanded ~ .bcweekly-info .bcweekly-player .play-btn .icon {
    border-bottom: inset 11px transparent;
    border-left: 18px solid #fff;
    border-top: inset 11px transparent;
    display: inline-block;
    height: 0px;
    margin: 18px 0 0 4px;
    width: 0px;
}
.bcweekly.expanded ~ .bcweekly-info .bcweekly-player .play-btn .icon {
    margin: 18px 0 0 4px;
}
.bcweekly.playing ~ .bcweekly-info .bcweekly-player .play-btn .icon {
    border-style: solid;
    border-width: 0px 6px 0px 6px;
    border-color: #fff;
    height: 22px;
    width: 6px;
}
.bcweekly.playing ~ .bcweekly-info .bcweekly-player .play-btn .icon {
    margin: 37px 0 0;
}
.bcweekly.playing.expanded ~ .bcweekly-info .bcweekly-player .play-btn .icon {
    margin: 18px 0 0;
}
.bcweekly.busy ~ .bcweekly-info .bcweekly-player .play-btn .icon {
    -webkit-animation: plb-busy 0.75s infinite linear;
    -moz-animation: plb-busy 0.75s infinite linear;
    animation: plb-busy 0.75s infinite linear;
    background: url('../png/playerbusy_static_white-2.png') no-repeat;
    background-size: 100%;
    border: none;
    height: 28px;
    margin: 16px 0 0;
    width: 28px;
}
.bcweekly-player .play-btn:hover {
    cursor: pointer;
}
.bcweekly-scrubber {
    opacity: 0;
}
.bcweekly.busy ~ .bcweekly-info .bcweekly-scrubber,
.bcweekly.expanded ~ .bcweekly-info .bcweekly-scrubber {
    opacity: 1;
    -webkit-animation: fade-in 0.33s ease-in;
    -moz-animation: fade-in 0.33s ease-in;
    animation: fade-in 0.33s ease-in;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.bcweekly-player .scrubber {
    background: #e5e5e5;
    height: 13px;
    float: left;
    position: relative;
    width: 313px;
}
.bcweekly-player .scrubber-buffer {
    height: 100%;
    width: 0;
    background: #cecece;
}
.bcweekly-player .scrubber-thumb {
    background: #666464;
    height: 100%;
    position: absolute;
    top: 0;
    width: 26px;
}
.bcweekly-player .scrubber-time {
    background: #e5e5e5;
    border-left: 1px solid #8d8d8d;
    color: #000;
    float: left;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    width: 100px;
}
/*bcweekly: tracklist*/
.bcweekly-tracks {
    background-color: #fff;
    bottom: 0;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    opacity: 0;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 10px;
    position: absolute;
    top: 100%;
    /*left: 10%;*/
    width: 394px;
    transition: opacity 0.15s ease-in-out, top 0s;

    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

.carousel-bcweekly-container.bcweekly-is-big .bcweekly-tracks {
    transition: opacity 0.15s ease-in-out, top 0.33s ease-out;
}

.carousel-bcweekly-container.bcweekly-expanded .bcweekly-tracks {
    transition: opacity 0.15s ease-in-out, top 0.33s ease-out;
}


.bcweekly.busy ~ .bcweekly-info .bcweekly-tracks,
.bcweekly.expanded ~ .bcweekly-info .bcweekly-tracks {
    bottom: 78px;
    opacity: 1;
    top: 25%;
}
.bcweekly-tracks a,
.bcweekly-tracks a:hover {
    color: #000;
}
.bcweekly-tracks .buy-now a:hover {
    text-decoration: underline;
}
.bcweekly-track-list {
    list-style: none;
    margin: 0;
    padding: 0 0 10px;
}
.bcweekly-track {
    border-top: 1px solid #e8e8e8;
    cursor: pointer;
    padding: 10px 0;
}
.bcweekly-track:first-child {
    border-top: none;
    padding: 0 0 10px;
}
.bcweekly-track > .col {
    opacity: 0.5;
}
.bcweekly-track .track-details,
.bcweekly-track .track-title,
.bcweekly-track .track-artist,
.bcweekly-track .track-loc,
.bcweekly-track .track-number {
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bcweekly-track .track-details {
    padding-top: 6px;
}
.bcweekly-track .track-details,
.bcweekly-track .track-artist {
    padding-right: 6px;
}
.bcweekly-track .track-album {
    font-weight: 700;
}
.bcweekly-track .track-number {
    color: #ccc;
    font-size: 10px;
    font-weight: 700;
    padding-top: 9px;
}
.bcweekly-track .track-artist,
.bcweekly-track .track-number {
    cursor: pointer;
}
.bcweekly-info .collect-item-container a,
.bcweekly-info .collect-item-container a:hover {
    color: #408ea3;
}
.bcweekly-info .item-container > a,
.bcweekly-info .item-container > span,
.bcweekly-info .collect-item-container ul {
    border-color: #e4eff2;
    margin: 0;
}
.bcweekly-info .wishlist-msg .collect-item-icon {
    background-position: -56px -73px;
}
.bcweekly-track .purchased-msg .txt,
.bcweekly-track .wishlist-msg .txt,
.bcweekly-track .wishlisted-msg .txt,
.bcweekly-track .package-images,
.bcweekly-current > .col {
    display: none;
}
.bcweekly-track .purchased-msg.purchased .txt {
    display: inline-block;
}
.bcweekly-track > .col .collect-item-icon {
    margin-right: 0;
}
.bcweekly-track .collect-item-container {
    padding-top: 7px;
}
.bcweekly-track .wishlist-msg,
.bcweekly-track .wishlisted-msg {
    margin: 0 0 0 26px;
}
.bcweekly-track .collect-item-container .wishlisted-msg a,
.bcweekly-track .collect-item-container .wishlisted-msg a:hover {
    color: #555;
}
.bcweekly-track .collect-item-container .purchased-msg > a,
.bcweekly-track .collect-item-container .purchased-msg > a:hover {
    color: #555;
    white-space: nowrap;
}
/*bcweekly: large tracklist*/
.bcweekly-track .track-large {
    cursor: default;
    height: 0px;
    overflow: hidden;
}
.bcweekly-current .track-large {
    height: 245px;
    transition: height 0.33s ease-in-out;
    -webkit-animation: fade-in 0.33s ease-in;
    -moz-animation: fade-in 0.33s ease-in;
    animation: fade-in 0.33s ease-in;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.bcweekly-track .track-large .collect-item-container {
    clear: both;
    padding-top: 0;
    text-align: left;
}
.bcweekly-track .track-large .collect-item-container ul {
    border-radius: 0 3px 3px 3px;
    margin: 0;
    padding: 0;
}
.bcweekly-track .track-large .item-container.buy-now,
.bcweekly-track .track-large .item-container.wishlist {
    width: 26.25%;
}
.bcweekly-track .track-large .item-container.hear-more {
    font-weight: 400;
    padding: 0 0 0 17px;
    text-align: left;
    width: 42%;
}
.bcweekly-track .purchased .item-container.wishlist {
    width: 100%;
}
.bcweekly-track .track-large .collect-item-container a:hover {
    text-decoration: underline;
}
.bcweekly-track .track-large .collect-item {
    margin: 0;
}
.bcweekly-track .track-large .collect-item .txt {
    display: inline-block;
}
.bcweekly-track .track-large .track-counter {
    color: #777;
    font-size: 10px;
    margin: 0 0 9px;
    text-transform: uppercase;
}
.bcweekly-track .track-large .track-counter > span {
    color: #000;
    display: block;
    float: right;
    width: 10.126582278482%;
}
.bcweekly-track .track-large .track-title {
    display: block;
}
.bcweekly-track .track-large .track-bio-img {
    display: block;
    margin: 6px 0 9px;
    max-width: 90px;
}
.bcweekly-track .track-large .track-bio-img > img {
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}
.bcweekly-track .track-large .track-loc {
    color: #777;
    font-size: 11px;
    margin-top: 6px;
}
.bcweekly-track .track-large .track-counter,
.bcweekly-track .track-large .track-details,
.bcweekly-track .track-large .track-bio-img,
.bcweekly-track .track-large .track-artist,
.bcweekly-track .track-large .track-loc {
    padding-left: 10px;
}
.bcweekly-track .track-large .track-artist,
.bcweekly-track .track-large .track-number {
    cursor: default;
}
/* bcweekly: browse shows panel */
.bcweekly-browse {
    background: rgba(34, 34, 34, 0.95);
    color: #ddd;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    /*top: -1000%;*/
    transform: scale(1.1);
    transition:
        transform 0.2s ease-out,
        opacity 0.2s ease-out;
    width: 100%;
}
.bcweekly-browse.hidden {
    top: -1000%;
}
.bcweekly-browse-overlay-top {
    background: -moz-linear-gradient(bottom, rgba(34,34,34,0) 0%, rgba(34,34,34,0.78) 100%);
    background: -webkit-linear-gradient(bottom, rgba(34,34,34,0) 0%,rgba(34,34,34,0.78) 100%);
    background: linear-gradient(to top, rgba(34,34,34,0) 0%,rgba(34,34,34,0.78) 100%);
    top: 0;
    content: ' ';
    display: block;
    height: 65px;
    position: absolute;
    width: 100%;
    pointer-events: none;
}
.bcweekly-browse-overlay-bottom {
    background: url('../png/overflow-fade.png') repeat-x;
    background: -moz-linear-gradient(top, rgba(34,34,34,0) 0%, rgba(34,34,34,0.78) 100%);
    background: -webkit-linear-gradient(top, rgba(34,34,34,0) 0%,rgba(34,34,34,0.78) 100%);
    background: linear-gradient(to bottom, rgba(34,34,34,0) 0%,rgba(34,34,34,0.78) 100%);
    bottom: 0;
    content: ' ';
    display: block;
    height: 65px;
    position: absolute;
    width: 100%;
    pointer-events: none;
}
.bcweekly-view-shows .bcweekly-browse {
    opacity: 1;
    top: 0;
    transform: scale(1);
    z-index: 3;
}
.bcweekly-browse-heading {
    font-weight: 400;
    font-size: 18px;
    color: #c7c7c7;
    margin-left: 1.2745098039%;
    margin-top: 0.188rem;
    margin-bottom: 1.25rem;
}
.bcweekly-view-shows .bcweekly-tracks,
.bcweekly-view-shows .bcweekly-player {
    display: none;
}
.bcweekly-browse .bcweekly-close-link {
    background-color: rgba(90,90,90,0.7);
    border-radius: 50%;
    color: white;
    display: block;
    height: 30px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 18px;
    right: 46px;
    width: 30px;
}
.bcweekly-browse .bcweekly-close-icon {
    fill: white;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-top: 9px; /* (30 - 12) / 2 */
}
.bcweekly-browse-inner {
    bottom: 0;
    left: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 24px 0 32px;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-overflow-scrolling: touch;
}
.bcweekly-browse .browse-list {
    float: left;
    list-style: none;
    margin: 8px 1.2745098039% 0;
    padding: 0;
    position: relative;
    width: 97.4509803922%;
}
.bcweekly-browse-item {
    float: none;
    display: inline-block;
    font-size: 0.85rem;
    margin-bottom: 16px;
    margin-right: 1.6096579477%;
    vertical-align: top;
    width: 23.2%; /* i have no idea how to actually calculate the correct value here, but this seems close enough. -daniel */
}
.bcweekly-browse-item:nth-child(4n) {
    margin-right: 0;
}
.bcweekly-browse-item a {
    color: inherit;
    display: block;
    position: relative;
    text-decoration: none;
}
.bcweekly-browse-item a:hover .show-image {
    outline: 1px solid rgba(213, 213, 213, 1)
}
.bcweekly-browse-item a:focus {
    outline: 0;
}
.bcweekly-browse-item .show-image {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    outline: 1px solid rgba(255, 255, 255, 0.22);
    outline-offset: -1px;
}
.bcweekly-browse-item .show-details {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    line-height: 17px;
    margin-top: 14px;
    white-space: nowrap;
}
.bcweekly-browse-item .episode-date {
    display: block;
    font-weight: 700;
}
.bcweekly-browse-item .show-description {
    white-space: normal;
    margin: 0.25rem 0 0 0;
}
.bcweekly-browse-item .show-credits {
    white-space: normal;
    margin: 8px 0 20px 0;
}
.bcweekly-browse-item-play {
    display: block;
    position: absolute;
    left: 1px;
    bottom: 1px;
    background: #000;
    width: 63px;
    height: 46px;
    text-align: center;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);

    opacity: 0;
    /* transition: opacity 100ms ease-out; */
}
.bcweekly-browse-item-play .icon {
    border-bottom: inset 9px transparent;
    border-left: 16px solid #fff;
    border-top: inset 9px transparent;
    display: inline-block;
    height: 0px;
    margin: 14px 0 0 2px;
    width: 0px;
}
/* current/focused item */
.has-hover .bcweekly-browse-item a:hover .show-image-wrapper:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.has-hover .bcweekly-browse-item a:hover .episode-date,
.bcweekly-browse-item a:focus .episode-date {
    text-decoration: underline;
}
.bcweekly-browse-item.current a:after {
    border: 1px solid rgba(213, 213, 213, 1);
    bottom: -6px;
    content: ' ';
    left: -6px;
    position: absolute;
    display: block;
    right: -6px;
    top: -6px;
    z-index: -1;
}
.has-hover .bcweekly-browse-item a:hover .bcweekly-browse-item-play {
    opacity: 1;
}
/**/
.bcweekly-browse-item.unpublished .show-image-wrapper:after {
    background: #fff;
    border: 1px solid rgba(255, 0, 0, 0.6);
    border-radius: 2px;
    color: rgba(255, 0, 0, 0.6);
    content: 'unpublished';
    font-size: 11px;
    padding: 0 0.3em;
    position: absolute;
    right: 0;
    top: 0;
}



@media (max-width: 1024px) and (min-width: 741px) {
    .bcweekly.busy ~ .bcweekly-info .bcweekly-tracks,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-tracks {
        top: 24px;
    }

    .carousel-bcweekly-container.bcweekly-expanded .close-show-desktop {
        top: 24px;
    }
}

@media (min-width: 1441px) {
    .bcweekly.busy,
    .bcweekly.expanded {
        /*padding: 60% 0 0;*/
    }

    .bcweekly {
        padding: 37.5% 0 0;
    }

    .carousel-bcweekly-container.bcweekly-expanded .bcweekly {
        padding: 45.1% 0 0;
    }
}



/*------------------------------------------------------------*/
/*                         PHONE                              */
/*------------------------------------------------------------*/
@media (max-width:740px) {

    .bcweekly {
        transition: unset;
        width: 100%;
    }

    .bcweekly-info {
        position: relative;
    }

    /* this one is desktop only */
    .close-show-desktop {
        display: none;
    }

    .close-show-mobile {
        top: 10px;
        right: 10px;
        left: auto;

        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.05);
        display: block;
        height: 30px;
        position: absolute;
        text-align: center;
        text-decoration: none;
        width: 30px;
    }
    .close-show-mobile .close-show-inner {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
    }
    .close-show-mobile .close-show-icon {
        margin-top: 9px; /* = (30 - 12) / 2 */
    }

    .bcweekly-player {
        left: auto;
    }

    .bcweekly-info > .row,
    .bcweekly > .row {
        background-color: #fff;
        max-width: 100%;
        position: static;
    }
    .bcweekly,
    .bcweekly.busy,
    .bcweekly.expanded,
    .carousel-bcweekly-container.bcweekly-expanded .bcweekly {
        background-position: 50% 0;
        background-size: 100%;
        height: auto;
        overflow: visible;
        padding: 56% 0 0;
    }
    .carousel-bcweekly-container.bcweekly-expanded {
        overflow: visible;
    }
    .bcweekly.unpublished:after {
        top: 0;
        right: 0;
        transform: rotate(0deg);
        width: 100%;
    }
    .bcweekly-player,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-player,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-player {
        background-color: inherit;
        bottom: inherit;
        box-shadow: none;
        height: auto;
        max-height: inherit;
        min-height: inherit;
        overflow: visible;
        padding: 2px 0 18px;
        position: relative;
        width: 100%;
    }
    .bcweekly-player > .col,
    .bcweekly-player > .col+.col,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-player > .col,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-player > .col,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-player > .col+.col,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-player > .col+.col,
    .bcweekly-browse .col {
        box-shadow: none;
        float: none;
        margin: 0;
        max-height: inherit;
        min-height: inherit;
        padding: 0;
        width: 100%;
    }
    .bcweekly-player > .col+.col,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-player > .col+.col,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-player > .col+.col {
        background-color: #fff;
        padding: 2px 0 6px;
    }
    .bcweekly-player > .col:first-child {
        position: absolute;
        top: -50px;
        z-index: 1;
    }
    .bcweekly-info .bcweekly-player .bcweekly-player-fade,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-player .bcweekly-player-fade {
        display: none;
    }
    .bcweekly-player .play-btn,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-player .play-btn,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-player .play-btn {
        height: 50px;
        width: 66px;
        transition: unset;
    }
    .bcweekly-player .play-btn .icon,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-player .play-btn .icon {
        border-bottom: inset 10px transparent;
        border-left: 18px solid #fff;
        border-top: inset 10px transparent;
        margin: 16px 0 0 2px;
    }
    .bcweekly.busy ~ .bcweekly-info .bcweekly-player .play-btn .icon {
        border: none;
        margin: 12px 0 0;
    }
    .bcweekly.playing ~ .bcweekly-info .bcweekly-player .play-btn .icon,
    .bcweekly.expanded.playing ~ .bcweekly-info .bcweekly-player .play-btn .icon {
        border-style: solid;
        border-width: 0px 6px 0px 6px;
        border-color: #fff;
        height: 22px;
        margin: 15px 0 0;
        width: 5px;
    }
    .bcweekly-title,
    .bcweekly-credits,
    .bcweekly-desc,
    .bcweekly-links-3 {
        float: none;
        font-size: 13px;
        margin-right: 0;
        padding: 0 4.265%;
    }
    .bcweekly-desc {
        margin: 10px 0;
    }
    .bcweekly-credits {
        font-size: 10px;
    }
    .bcweekly-title,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-title,
    .bcweekly.playing ~ .bcweekly-info .bcweekly-title,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-title {
        font-size: 16px;
        white-space: nowrap;
        background: #fff;
        margin: 0;
        padding: 14px 4.265% 0;
    }
    .bcweekly.busy ~ .bcweekly-info .bcweekly-desc,
    .bcweekly.playing ~ .bcweekly-info .bcweekly-desc,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-desc,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-credits,
    .bcweekly.playing ~ .bcweekly-info .bcweekly-credits,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-credits {
        display: block;
    }
    .bcweekly-tabs {
        border-bottom: 1px solid #eee;
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
        flex-flow: row nowrap;
        -ms-flex-flow: row wrap;
        justify-content: space-around;
        -webkit-justify-content: space-around;
        -ms-justify-content: space-around;
        list-style: none;
        margin: 5px 0 0;
        padding: 0 4.265%;
        display: none;
    }
    .expanded ~ .bcweekly-info .bcweekly-tabs{
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
    }
    .bcweekly-tab {
        background: #eee;
        display: inline-block;
        font-size: 11px;
        text-transform: uppercase;
        width: 48%;
    }
    .bcweekly-tabs a {
        color: #408ea3;
        display: block;
        padding: 8px 0 6px;
        text-align: center;
    }
    .bcweekly-tab.tab-active {
        background: #fff;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        border-top: 1px solid #eee;
        margin-bottom: -1px;
    }
    .bcweekly-tab.tab-active a {
        color: #222;
    }
    .bcweekly-scrubber,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-scrubber,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-scrubber {
        display: block;
    }
    .bcweekly-links-1,
    .bcweekly-links-2,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-links-2,
    .bcweekly.playing ~ .bcweekly-info .bcweekly-links-2,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-links-2,
    .bcweekly-info .bcweekly-scrubber .scrubber,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-scrubber .scrubber,
    .bcweekly.playing ~ .bcweekly-info .bcweekly-scrubber .scrubber,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-scrubber .scrubber {
        display: none;
    }
    .bcweekly-links-3 {
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
        flex-flow: row wrap;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        margin: 22px 0 0;
    }
    .bcweekly-info .bcweekly-scrubber .scrubber-time,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-scrubber .scrubber-time,
    .bcweekly.playing ~ .bcweekly-info .bcweekly-scrubber .scrubber-time,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-scrubber .scrubber-time {
        background: rgba(0,0,0,0.8);
        border: none;
        color: #fff;
        position: absolute;
        right: 4px;
        top: -17px;
        border-radius: 3px;
    }
    .bcweekly-tracks,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-tracks,
    .bcweekly.playing ~ .bcweekly-info .bcweekly-tracks,
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-tracks {
        bottom: 0;
        box-shadow: none;
        display: none;
        position: relative;
        top: 0;
        width: auto;
        -webkit-animation: fade-in .33s ease-in;
        -moz-animation: fade-in .33s ease-in;
        animation: fade-in .33s ease-in;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .bcweekly-view-tracks .bcweekly-player,
    .bcweekly-view-tracks .bcweekly.busy ~ .bcweekly-info .bcweekly-player,
    .bcweekly-view-tracks .bcweekly.playing ~ .bcweekly-info .bcweekly-player,
    .bcweekly-view-tracks .bcweekly.expanded ~ .bcweekly-info .bcweekly-player {
        padding-bottom: 0;
    }
    .bcweekly-view-tracks .bcweekly-tracks,
    .bcweekly-view-tracks .bcweekly.busy ~ .bcweekly-info .bcweekly-tracks,
    .bcweekly-view-tracks .bcweekly.playing ~ .bcweekly-info .bcweekly-tracks,
    .bcweekly-view-tracks .bcweekly.expanded ~ .bcweekly-info .bcweekly-tracks {
        display: block;
    }
    .bcweekly-view-tracks .bcweekly-tracks .bcweekly-track-list {
        border:none;
        padding: 0;
    }
    .bcweekly-track.current {
        background-color: #d7ebfc;
    }
    .bcweekly-track:first-child {
        border-top: 1px solid #e8e8e8;
        padding: 10px 0;
    }
    .bcweekly-track:last-child {
        border-bottom: 1px solid #e8e8e8;
    }
    .bcweekly-track .track-details {
        padding-top: 0;
    }
    .bcweekly-track .collect-item-container {
        padding-top: 1px;
    }
    .bcweekly-track .track-number {
        padding-top: 3px;
    }
    .bcweekly-track .wishlist-msg,
    .bcweekly-track .wishlisted-msg {
        margin: 0 0 0 25%;
    }
    .bcweekly-current,
    .bcweekly-track:first-child.bcweekly-current {
        background-color: #e9faff;
    }
    .bcweekly-track > .col {
        opacity: 1;
    }
    .bcweekly-current > .col {
        display: block;
    }
    .bcweekly-current .track-large {
        display: none;
    }
    /* bcweekly now playing*/
    #bcweekly-playing-tab {
        display: none;
    }
    .tab-content .track-large {
        max-width: 91.47%;
        padding-top: 14px;
        position: relative;
        -webkit-animation: fade-in 0.33s ease-in;
        -moz-animation: fade-in 0.33s ease-in;
        animation: fade-in 0.33s ease-in;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .tab-content .track-large .track-details,
    .tab-content .track-large .track-counter,
    .tab-content .track-large .track-title,
    .tab-content .track-large .track-artist,
    .tab-content .track-large .track-loc,
    .tab-content .track-large .track-number {
        margin: 0;
        overflow: hidden;
        padding: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tab-content .track-large .track-details,
    .tab-content .track-large .track-bio-img,
    .tab-content .track-large .track-artist,
    .tab-content .track-large .track-loc {
        padding-left: 5px;
    }

    .tab-content .track-large .track-details a,
    .tab-content .track-large .track-artist a,
    .tab-content .track-large .track-details a:hover,
    .tab-content .track-large .track-artist a:hover {
        color: #000;
    }
    .tab-content .track-large .track-title {
        display: block;
    }
    .tab-content .track-large .collect-item-container {
        clear: both;
        padding-top: 0;
        text-align: left;
    }
    .tab-content .track-large .collect-item-container ul {
        border-radius: 0 3px 3px 3px;
        margin: 0;
        padding: 0;
    }
    .tab-content .track-large .collect-item-container a:hover {
        text-decoration: underline;
    }
    .tab-content .track-large .collect-item {
        margin: 0;
    }
    .tab-content .track-large .collect-item .txt {
        display: inline-block;
    }
    .tab-content .track-large .track-counter {
        color: #777;
        font-size: 10px;
        margin-bottom: 9px;
        text-transform: uppercase;
    }
    .tab-content .track-large .track-counter > span {
        display: block;
        float: right;
        width: 10.126582278482%;
    }
    .tab-content .track-large .track-bio-img {
        display: block;
        margin: 6px 0 9px;
        max-width: 70px;
    }
    .tab-content .track-large .track-bio-img > img {
        outline: 1px solid rgba(0,0,0,0.05);
        outline-offset: -1px;
    }
    .tab-content .track-large .track-loc {
        color: #777;
        font-size: 11px;
        margin-top: 6px;
    }
    /* bcweekly show broswer */
    .bcweekly-browse {
        overflow-y:scroll;
        position: fixed;
        -webkit-overflow-scrolling: touch;
        background: rgba(0, 0, 0, 0.88); /* darker background for mobile */
    }
    .bcweekly-browse-heading {
        margin-left: 5%;
    }
    .bcweekly-browse .col {
        margin-bottom: 24px;
    }
    .bcweekly-browse .browse-list {
        float: none;
        margin: 0 auto;
        width: 91.47%;
    }
    .bcweekly-browse .bcweekly-close-link {
        right: 10px;
    }
    /* share panel */
    ul.bcweekly-share-panel {
        font-size: 100%;
        font-weight: normal;
        margin: 0;
        padding: 0;
        color: #333;
    }
    .bcweekly-share-panel li {
        list-style-type: none;
    }
    .bcweekly-share-panel .compound-button {
        display: block;
        width: 93%;
        margin: 0.625rem auto;
        color: #0687F5;
        line-height: 1.875rem;
        text-align: center;
        font-weight: 700;
        border: solid rgba(0,0,0,0.3) thin;
        border-radius: 0.3125rem;
        font-size: 0.9375rem;
        -webkit-box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
        box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
        background: rgb(255,255,255);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
    }
}

/* trackpipe/public/css/home_2016/bcdaily.css */
.bcdaily .hidden {
    display: none;
}

.bcdaily .stepper {
    font-size: 12px;
    line-height: 12px;
}
.bcdaily.batch-3 .more {
    /* hide the 'more +' button if we're looking at the last batch */
    display: none;
}
.bcdaily .more-link-container,
.bcdaily.batch-2 .more-link-container {
    /* hide the 'more ->' button if we're looking at the first two batches */
    display: none;
}
.bcdaily.batch-2.batch-3 .more-link-container {
    /* only show the 'more->' button if we are on the last batch */
    display: block;
}

.bcdaily .more-link {
    display: inline-block;
    float: right;
    color: #318BA1;
    font-weight: bold;
}
    .bcdaily .more-link .icon {
        width: 10px;
        height: 7px;
        fill: #318BA1;
    }

.bcdaily .row.bcdaily-stories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}
.bcdaily .col.col-9-15 {
    flex: 0 0 59.312839059675%;
    margin-right: 0;
    margin-bottom: 20px;
}
.bcdaily .col.col-3-15 {
    flex: 0 0 18.625678119349%;
    margin-right: 0;
    margin-bottom: 20px;
}
.bcdaily .col.col-3-15:nth-child(5n+4) {
    margin-left: 0;
}

.bcdaily .bcdaily-story {
    min-height: 280px;
    background: white;
}
.bcdaily .bcdaily-stories .bcdaily-story .bcdaily-title:hover {
    text-decoration: underline;
}
.bcdaily .bcdaily-stories .aotd-details .bcdaily-title:hover,
.bcdaily .bcdaily-stories .aotd-details .bcdaily-title:hover + .aotd-artist {
    text-decoration: underline;
}
.bcdaily-details {
    padding: 10px;
}
.bcdaily-thumb {
    width: 100%;
    position: relative;
}
.bcdaily-thumb-img {
    height: 0;
    padding: 72.2% 0 0;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.bcdaily-title {
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    margin-bottom: 0px;
    margin-top: 0px;
    color: black;
    margin-right: padding-right: 16px;
}
.bcdaily-author {
    font-size: 12px;
    margin-top: 5px;
    color: #777;
}

.bcdaily .bcdaily-blurb {
    font-family: Georgia, Times, serif;
    display: block;
    font-size: 14px;
    line-height: 19px;
    margin: 0;
    padding: 0 16px 0 10px;
}

.bcdaily .story-type {
    position: absolute;
    bottom: 10px;
    color: #777;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    margin-left: 10px;
}

.bcdaily .read-more {
    display: inline-block;
    color: #318BA1;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-left: 3px;
}

.aotd-artist {
    font-size: 13px;
    font-weight: 500;
    margin-top: 0px;
    color: black;
}
.aotd-large {
    background: white;
    display: block;
}
.aotd-large .aotd-details {
    margin-left: 290px;
}
.aotd-large .aotd-art {
    float: left;
    margin-right: 20px;
    width: 280px;
    height: 280px;
}
.aotd-large .bcdaily-title {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: black;
}
.aotd-large .aotd-artist {
    font-size: 20px;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 0px;
    color: black;
}
.aotd-large .bcdaily-blurb {
    margin-top: 16px;
    margin-bottom: 30px;
    color: black;
}
.bcdaily .aotd-large .story-type {
    margin-left: 0px;
}

.bcdaily .desktop-text {
    display: inline-block;
}
.bcdaily .mobile-text {
    display: none;
}

.bcdaily .desktop-batch-1 {
    display: block;
}
.bcdaily .desktop-batch-2,
.bcdaily .desktop-batch-3 {
    display: none;
}
.bcdaily.batch-2 .desktop-batch-2,
.bcdaily.batch-3 .desktop-batch-3 {
    display: block;
}

.bcdaily .unpublished:after {
    background-color: rgba(255, 0, 0, 0.6);
    color: #fff;
    content: 'unpublished';
    font-size: 12px;
    font-weight: 700;
    padding: 8px 0;
    position: absolute;
    left: 0;
    text-align: center;
    top: 0;
    width: 100%;
}


@media (max-width:960px) {
    .bcdaily .row.bcdaily-stories {
    }
    .bcdaily .col.col-9-15 {
        flex: 0 0 100%;
    }
    .bcdaily .col.col-3-15 {
        flex: 0 0 23.616236162362%;
        height: 280px;
    }
    .bcdaily .col.col-3-15,
    .bcdaily .col.col-3-15:nth-child(5n+4) {
        margin-left: 1.8450184502%;
    }
    .bcdaily .col.col-3-15:nth-child(4n-2) {
        margin-left: 0;
    }
    /* some hacks to make sure we have full rows in each batch while on this query selector */
    .bcdaily .col.col-3-15:nth-child(9) {
        display: block;
    }
    .bcdaily.batch-2 .col.col-3-15:nth-child(18) {
        display: none;
    }
    .bcdaily.batch-2.batch-3 .col.col-3-15:nth-child(18) {
        display: block;
    }
}

@media (max-width:740px) {
    .bcdaily .desktop-text {
        display: none;
    }
    .bcdaily .mobile-text {
        display: inline-block;
    }

    .bcdaily.bd-section {
        background: white;
        border-bottom: 1px solid #cecece;
        padding: 24px 0 18px;
    }
    .bcdaily.bd-section > .row {
        max-width: none;
    }
    .bcdaily > .row.bcdaily-stories {
        display: block;
    }

    .bcdaily .bcdaily-stories .bcdaily-story .bcdaily-title:hover,
    .bcdaily .bcdaily-stories .bcdaily-story .bcdaily-title:hover + .aotd-artist {
        text-decoration: none;
    }

    .bcdaily .mobile-batch-2 {
        display: none !important;
    }
    .bcdaily.batch-2 .mobile-batch-2 {
        display: block !important;
    }
    .bcdaily.batch-2 .more {
        /* hide the '+ load more' button when on the final batch */
        display: none;
    }
    .bcdaily.batch-2 .more-link-container {
        /* batch 2 is the last batch for mobile */
        display: block;
    }

    .bcdaily .section-title {
        max-width: 91.47%;
        margin: 0 auto 15px auto !important;
    }

    .bcdaily .stepper {
        display: block !important;
        width: 80%;
        margin: 5px auto 0;
        text-align: center;
        padding: 0;
        border-radius: 0;
        border-color: #408ea3;
    }

    .bcdaily .stepper .stepper-bcdaily {
        width: 100%;
        margin: 0;
        padding: 10px 0;
        height: 100%;
        font-weight: 500;
        text-transform: uppercase;
        line-height: 0;
    }

    .bcdaily .stepper-bcdaily .icon {
        margin: 0 6px 0 0;
    }

    .bcdaily .more-link {
        float: none;
        display: block;
        width: 80%;
        margin: 0 auto;
        text-align: center;
        border: 1px solid #318BA1;
        padding: 10px 0;
        text-transform: uppercase;
    }
        .bcdaily .more-link .icon {
            margin-left: 10px;
        }

    .bcdaily .row.bcdaily-stories {
        margin-bottom: 0;
    }

    .bcdaily .col.col-3-15.bcdaily-story {
        max-width: 91.47%;
        margin: 0px auto 20px;
        min-height: 100%;
        height: 100%;
        overflow: auto;
    }

    .bcdaily .bcdaily-story.desktop-only {
        display: none !important;
    }

    .aotd-large.col {
        padding-bottom: 20px;
        border-bottom: 1px solid #dbdbdb;
        margin-bottom: 25px;
    }

    .aotd-large .aotd-art {
        float: none;
        width: 91.47%;
        height: auto;
        margin: 0 auto;
    }
    .aotd-large .bcdaily-title,
    .aotd-large .aotd-artist {
        font-size: 18px;
    }
    .aotd-large .bcdaily-title {
        font-weight: 700;
        margin-top: 40px;
    }
    .aotd-large .bcdaily-blurb {
        padding: 0;
        margin: 14px 0 0 0;
        font-size: 14px;
        line-height: 20px;
    }
    .aotd-large .read-more {
        width: 100px;
        text-align: center;
        padding: 8px 0px;
        border: 1px solid #318BA1;
        border-radius: 4px;
        margin: 20px 0 0 0;
        display: block;
    }
    .aotd-large .aotd-details {
        position: relative;
        max-width: 91.47%;
        margin: 0 auto;
    }
    .aotd-large .story-type {
        font-size: 12px;
        top: -30px;
        bottom: auto;
    }
    .bcdaily-thumb-img {
        padding: 62.1% 0 0;
    }

    .bcdaily-thumb,
    .aotd-art {
        width: 43%;
        float: left;
        margin-right: 12px;
    }

    .bcdaily-details {
        padding: 0px;
        width: 50%;
        float: left;
    }

    .bcdaily-title {
        font-size: 14px;
        line-height: 19px;
    }

    .bcdaily-author {
        margin-bottom: 0;
    }

    .bcdaily-story .story-type {
        display: none;
    }

    .bcdaily-story.story-type-a .story-type {
        /* special album of the day case */
        display: block;
        position: absolute;
        left: 43%;
        top: 5px;
        font-size: 11px;
        font-weight: normal;
        margin-left: 12px;
    }
    .bcdaily-story.story-type-a .bcdaily-details {
        margin-top: 25px;
    }
}
/* trackpipe/public/css/home_2016/discover.css */
/*------------------------------------------------------------*/
/*discover*/
.discover {
    padding: 36px 0 0;
}
.discover h2 {
    display: block;
    padding: 0;
}
.discover h2 a {
    line-height: 29px;
}
.discover h2.section-title {
    height: 29px;
    line-height: 29px;
}
.discover .alltags {
    display: inline-block;
    padding: 0 0 0 10px;
    font-size: 14px;
    font-weight: normal;
    float: right;
}
.discover .filter-types a {
    cursor: pointer;
}
html:lang(de) .discover .filter-types em,
html:lang(de) .discover .filter-types a {
    text-transform: lowercase;
}
.discover .filter-icon {
    background:transparent url('../png/_sprite-filter-icons%402x.png') no-repeat 0 0;
    background-size: 72px 48px;
    display: inline-block;
    height: 24px;
    margin: 1px 5px -3px 0;
    width: 24px;
    vertical-align: top;
}
.filter-icon.icon-loc {
    background-position: -4px 0;
    width: 14px;
}
.filter-icon.icon-format {
    background-position: -24px 0;
}
.filter-icon.icon-time {
    background-position: -51px 0;
    width: 18px;
}
.selected .filter-icon.icon-loc {
    background-position: -4px -24px;
}
.selected .filter-icon.icon-format {
    background-position: -24px -24px;
}
.selected .filter-icon.icon-time {
    background-position: -51px -24px;
}
/**bars+pills**/
.discover-bar {
    background-color: #54b0c9;
    height: 40px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    cursor: default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.discover-bar > .row {
    position: relative;
}
.discover-bar .discover-pills  {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.discover-bar .discover-pills::-webkit-scrollbar {
    height: 0 !important;
    width: 0 !important;
}
html:lang(de) .discover-bar {
    text-transform: lowercase;
}
.discover-pill {
    background-color: transparent;
    border-radius: 14px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    margin: 7px 0;
    padding: 6px 10px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in;
}
.discover-pill.immediate {
    transition: 0s;
}
.discover-pill.selected {
    background-color: rgba(0,0,0,0.8);
}
.discover-pill:hover {
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}
.discover-pill:last-child {
    margin-right: 10px;
}
.genre-bar {
    background-color: rgb(66, 160, 189);
}
.slice-bar {
    background-color: rgb(67, 144, 168);
}
.loc-bar {
    background-color: rgb(66, 129, 148);
}
.format-bar {
    background-color: rgb(65, 114, 129);
}
.date-bar {
    background-color: rgb(62, 100, 111);
}
/**row scroll arrows**/
.scroller-prev,
.scroller-next {
    background: rgba(66, 160, 189,1);
    cursor: pointer;
    display: none;
    height: 40px;
    opacity: 0;
    position: absolute;
    text-align: right;
    top: 0;
    transition: opacity 0.2s ease-out;
    width: 40px;
}
.scroller-prev > .icon,
.scroller-next > .icon{
    transition: opacity 0.2s ease-out;
}
.overflow-left .scroller-prev,
.overflow-right .scroller-next {
    display: block;
    opacity: 1;
}
.overflow-left .scroller-prev.immediate > .icon,
.overflow-right .scroller-next.immediate > .icon {
    transition: opacity 0s;
}
.overflow-left .scroller-prev.highlight > .icon,
.overflow-right .scroller-next.highlight > .icon {
    opacity: 0.6;
}
.scroller-prev .scroller-fade,
.scroller-next .scroller-fade {
    bottom: 0;
    content: ' ';
    display: block;
    top:0;
    position: absolute;
    width: 30px;
}
.scroller-prev .scroller-fade {
    background: -moz-linear-gradient(left, 66% rgba(66, 160, 189, 0), rgba(66, 160, 189, 1) 65%);
    background: -webkit-linear-gradient(left, 66% rgba(66, 160, 189, 0), rgba(66, 160, 189, 1) 65%);
    background: linear-gradient(to left , rgba(66, 160, 189, 0), rgba(66, 160, 189, 1) 65%);
    left: 100%;
}
.scroller-next .scroller-fade {
    background: -moz-linear-gradient(right, 66% rgba(66, 160, 189, 0), rgba(66, 160, 189, 1) 65%);
    background: -webkit-linear-gradient(right, 66% rgba(66, 160, 189, 0), rgba(66, 160, 189, 1) 65%);
    background: linear-gradient(to right , rgba(66, 160, 189, 0), rgba(66, 160, 189, 1) 65%);
    right: 100%;
}
.scroller-prev .icon,
.scroller-next .icon {
    display: block;
    fill: #fff;
    height: 10px;
    margin: 16px auto 0;
    width: 8px;
}
.scroller-prev {
    right: 100%;
}
.scroller-next {
    left: 100%;
}
/**results**/
.discover-results {
    min-height: 568px;
    overflow: hidden;
    position: relative;
}
.discover-result {
    position: absolute;
    top: 20px;
    transition: left 0.5s, right 0.5s;
}
.discover-result.immediate {
    transition: left 0s, right 0s;
}
.discover-result.result-current {
    left: 0;
    right: 0;
}
.discover-result.result-next {
    left: 102%;
    right: -102%;
}
.discover-result.result-prev {
    left: -102%;
    right: 102%;
}
.discover-result.result-empty {
    padding-top: 20%;
}
.discover-result.fade-in {
    -webkit-animation-duration: 0.33s;
    -moz-animation-duration: 0.33s;
    animation-duration: 0.33s;
}
.discover-result.fade-out {
    -webkit-animation-duration: 0.165s;
    -moz-animation-duration: 0.165s;
    animation-duration: 0.165s;
}

/**/
.discover-item {
    margin-bottom: 18px;
    min-height: 236px;
}
.discover-item:nth-child(4n+1) {
    margin-left: 0;
}
.discover-item .item-img {
    margin: 0 0 9px;
}
.discover-item .item-link {
    color: #000;
    text-decoration: none;
}
.discover-item .item-link:hover {
    cursor: pointer;
}
.discover-item .item-link .item-title:hover {
    text-decoration: underline;
}
.discover-item a.item-title {
    font-weight: bold;
    color: #000;
}
.discover-item a.item-title:hover {
    text-decoration: underline;
}
.discover-item a.item-artist,
.discover-item a.item-genre {
    color: #000;
}
.discover-item .item-link,
.discover-item .item-title,
.discover-item .item-artist,
.discover-item .item-genre {
    display: block;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.discover-item .item-genre {
    color: #999;
}
.discover-pages {
    bottom: 0;
    position: absolute;
}

/**detail**/
.discover-detail {
    background-color: #fff;
    box-shadow: 0 0 1px 0 #dfdfdf;
    margin-bottom: 32px;
}
.discover-detail-inner {
    padding: 20px 10px;
    min-height: 560px;
}
.discover-detail .package-arts {
    padding: 10px 0;
}
.discover-detail .detail-recommendation {
    font-family: georgia,serif;
    font-style: italic;
    font-size: 13px;
    margin: 10px 0 15px 0;
}
.discover-detail .detail-recommendation .date {
    font-size: 11px;
}
.discover-detail .prev-rec,
.discover-detail .next-rec {
    display: inline-block;
}
.discover-detail .prev-rec .discover-ui {
    background-position: -7px -73px;
    margin: 9px 9px 0 0;
    width: 7px;
    height: 10px;
    display: inline-block;
}
.discover-detail .next-rec .discover-ui {
    background-position: 0px -73px;
    margin: 9px 9px 0 0;
    width: 7px;
    height: 10px;
    display: inline-block;
}
.discover-detail .prev-rec.disabled span,
.discover-detail .next-rec.disabled span {
    opacity: 0.4;
    filter: alpha(opacity=40);
    cursor: default;
}
/* disabled view */
.discover-detail.disabled .detail-body,
.discover-detail.disabled .track_info {
    display: none;
}
.discover-detail.disabled .detail-player {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}
.discover-detail.disabled .detail-art {
    border: 1px dotted rgba(0,0,0,0.1);
}
.discover-detail.disabled .inline_player a:hover,
.discover-detail.disabled .inline_player .playbutton,
.discover-detail.disabled .inline_player .thumb {
    cursor: default;
}

/**player**/
.discover .inline_player {
    border: 1px solid #e5e5e5;
    border-top: none;
    display:block;
}
.discover .inline_player > table {
    width: 100%;
    table-layout: fixed;
}
.discover .inline_player .track_info {
    font-size: 0;
    min-width: inherit;
}
.discover .inline_player .track_info,
.discover .inline_player .progbar {
    margin: 0 10px;
}
.discover .inline_player .title-section,
.discover .inline_player .time {
    display: inline-block;
    font-size: 12px;
    padding: 0;
}
.discover .inline_player .title-section {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 66%;
}
.discover .inline_player .time {
    color: #999;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 33%;
}
.discover .inline_player .play_cell {
    border-right: 1px solid #e5e5e5;
    height: 60px;
    vertical-align: middle;
    width:60px;
}
.discover .inline_player .playbutton {
    border: none;
    border-radius: 0;
}
.discover .inline_player .playbutton:after {
    position: absolute;
    margin: 14px 0px 0px 22px;
}
.discover .inline_player .playbutton.busy:after {
    margin: 5px 0px 0px 8px;
}
.discover .inline_player .progbar_cell {
    min-width: 0;
}
.discover .inline_player.top-border {
    border-top: 1px solid #e5e5e5;
}
.discover .prev_cell,
.discover .next_cell {
    width: 1px;
}
.discover .prev_cell a,
.discover .next_cell a,
.discover .prevbutton,
.discover .nextbutton {
    display: none;
}
/**body**/
.discover .detail-body {
    font-size: 12px;
    line-height: 18px;
    padding: 18px 0 0;
}
.discover .detail-body a {
    color: #000;
    text-decoration: none;
}
.discover .detail-body a:hover {
    text-decoration: underline;
}
.discover .detail-title,
.discover .detail-artist,
.discover .detail-loc {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.discover .detail-album {
    font-weight: 500;
}

@media (max-width:740px) {
    .discover,
    .discover-detail {
        display: none;
    }
}

@media (max-width: 800px) and (min-width: 741px) {
    .discover-bar .row {
        max-width: 97%;
    }
    .discover-results {
        min-height: 538px;
    }
    .discover .item {
        min-height: 184px;
    }
    .scroller-prev {
        right: inherit !important;
        left: 0;
    }
    .scroller-next {
        left: inherit !important;
        right: 0;
    }
}

@media (max-width: 1024px) and (min-width: 801px) {
    .discover-bar .row {
        max-width: 97%;
    }
    .discover-results {
        min-height: 548px;
    }
    .discover .item {
        min-height: 218px;
    }
    .scroller-prev {
        right: inherit !important;
        left: 0;
    }
    .scroller-next {
        left: inherit !important;
        right: 0;
    }
}

@media (max-width: 1280px) and (min-width: 1025px) {
    .discover-bar .row {
        max-width: 994px;
    }
    .discover-results {
        min-height: 558px;
    }
    .discover .item {
        min-height: 218px;
    }
}

@media (min-width: 1281px) {
    .discover-bar .row {
        max-width: 1106px;
    }
}

/* END LEGACY DISCOVER - Remove above once new homepage is stable */

.bd-section.discover-categories{
    padding: 36px 0;
}

.discover-category-thumbnails {
    display: grid;
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    grid-template-columns: repeat(5, 1fr);  
}

@media (min-width: 540px) and (max-width: 740px) {
    .row.discover-category-thumbnails {
        max-width: 97%;
    }
    .discover-category-thumbnails {
        grid-column-gap: 10px;
    }
}
@media (max-width: 540px) {
    .discover-category-thumbnails {
        grid-template-columns: repeat(2, 1fr);
    }
    .discover-category-thumbnails .first-item {
        grid-column: span 2;
    }
}



.discover-tags-container {
    background-color: var(--gray700);
    min-height: 269px;
}

.discover-tags-group {
    column-gap: 14px;
}

.discover-tags-pills {
    padding-top: 34px;
    padding-bottom: 50px;
}

.discover-tags-pills h4,
.discover-locations-pills h4 {
   color: var(--gray300);
   margin-top: 0;
}

.discover-tags-group .discover-tags-art {
    position: absolute;
    right: -29%;
    top: -3%;
    width: 247px;
    height: 292px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.g-pill-group a.g-pill {
    --g-pill-text-color: var(--white);
}

.mobile-title-discover-tags {
    display: none;
    text-transform: uppercase;
    padding-top: 18px;
}

.mobile-title-discover-tags a, 
.show-more-tags-button a {
     color: var(--white);
}

.show-more-tags-button-arrow {
    width: 16px;
    height: 16px;
}

.show-more-tags-button {
    padding-bottom: 25px;
}

.show-more-tags-button .tags-view-more {
    display: flex;
    gap: 10px;
    align-items: center;
}

.show-more-tags-button a.tags-view-more:hover {
    text-decoration: underline;
}

.row.discover-tags-container .col {
    width: 100%;
    max-width: 930px;
}

.discover-upsell-container {
    margin-top: 35px;
    background-color: var(--white);
    min-height: 259px;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.discover-upsell-container .upsell-text {
    width: 260px;
    margin-left: 20px;
    padding: 20px;
    background-color: var(--white);
    position: absolute;
    top: 50%; 
    transform: translateY(-50%);
}

.discover-upsell-container .upsell-art {
    width: 100%;
    height: 259px;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}

a.g-button.md.upsell-button {
    margin-top: 20px;
}

.discover-locations-pills {
    padding-bottom: 30px;
}

.discover-locations-group {
    column-gap: 14px;
}

@media (max-width: 1400px) {
    .discover-tags-container .discover-tags-art {
        display: none;
    }
}

@media (min-width: 700px)
{
    .discover-tags {
        padding-bottom: 90px;
    }
}

@media (max-width: 700px) {
    .discover-tags {
        padding-bottom: 0;
    }
    .discover-tags-title, .discover-upsell-container { 
        display: none;
    }
    .mobile-title-discover-tags {
        display: block;
    }
    .discover-tags-group, 
    .discover-locations-group {
        padding-bottom: 20px;
    }
}
/* trackpipe/public/css/home_2016/holiday_gift_guide_upsell.css */
.gift-guide-upsell-container {
    margin-top: 7px;
    margin-bottom: 35px;
    background-color: #DFEBE5;
    min-height: 259px;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    position: relative;

}

.gift-guide-upsell-container .upsell-text {
    width: 260px;
    margin-left: 20px;
    padding: 20px;
    position: absolute;
    color: #000;
    top: 50%; 
    transform: translateY(-50%);
    font-size:18px;
}

.gift-guide-upsell-container .upsell-art {
    width: 100%;
    height: 259px;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}

.gift-guide-upsell-container .present-emoji {
    display:none;
} 

@media (max-width: 740px) {
    .gift-guide-upsell-container {
        background-color: #47715C; 
        margin:0; 
        max-width:100% !important;
        min-height: 76px;
        display:flex;
        border-radius: unset;
        justify-content: center;
        align-items: center;
        position: relative;
        
    }

    .gift-guide-upsell-container .upsell-text {
        color: var(--white);
        justify-content: center; 
        align-items: center;
        display: flex;
        position: relative;
        top: unset;
        transform: unset;
        width: 100%;
        margin-left: unset;
        padding: unset;
        font-size: 14px;
        line-height: var(--bc-line-height-100);
        font-weight: var(--bc-font-weight-medium);
    }

    .gift-guide-upsell-container .upsell-art {
        display: none;
    } 

    .gift-guide-upsell-container .present-emoji {
        display:block;
        padding-left:5px;
    } 
}
/* trackpipe/public/css/home_2016/salesfeed.css */
/*------------------------------------------------------------*/
/*sellingnow*/
@-webkit-keyframes salesfeed-scale {
    0% { width: 0; }
    100% { width: 11.392405063291%; }
}
@-moz-keyframes salesfeed-scale {
    0% { width: 0; }
    100% { width: 11.392405063291%; }
}
@keyframes salesfeed-scale {
    0% { width: 0; }
    100% { width: 11.392405063291%; }
}
.salesfeed {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); /* hack to stop chrome from rendering a flickering header while scrolling across the salesfeed */
}
.salesfeed .section-title {
    line-height: 18px;
}
.salesfeed .salesfeed-paused {
    display: none;
}
.salesfeed.paused .salesfeed-paused{
    text-transform: none;
    margin-left: 20px;
    color: #666;
    width: 900px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 16px;
    vertical-align: top;
    display: inline-block;
}
.salesfeed.paused .salesfeed-humour {
    font-weight: normal;
    opacity: 0;
    font-size: 90%;
    margin-left: 20px;
    transition: opacity 0.2s ease-in;
}
.salesfeed.paused .salesfeed-humour.visible {
    font-weight: normal;
    opacity: 1;
}

.salesfeed-items {
    height: 270px;
    list-style: none;
    margin: -6px -6px 0;
    overflow: hidden;
    padding: 6px 7px 0;
    transition: height 0.5s ease-out;
    white-space: nowrap;
    width: 100%;

    -webkit-animation: fade-in .33s ease-in;
    -moz-animation: fade-in .33s ease-in;
    animation: fade-in .33s ease-in;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.salesfeed-item {
    min-height: 242px;
    margin-bottom: 28px;
    /*width: 0;*/

    display: inline-block;
    float: none;
    vertical-align: top;

    -webkit-animation: salesfeed-scale 0.33s ease-out;
    -moz-animation: salesfeed-scale 0.33s ease-out;
    animation: salesfeed-scale 0.33s ease-out;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -ms-transform-origin: 0 50% 50%;
    -webkit-transform-origin: 0 50% 50%;
    transform-origin: 0 50% 50%;
}
.ie .salesfeed-item {
    width: 11.392405063291%;
}
.salesfeed-item:nth-child(0n+10) {
    margin-left: 0;
}
.salesfeed .item-inner {
    color: #000;
    display: block;
    font-size: 11px;
    line-height: 18px;
    margin: 0 0 20px 0;
    text-decoration: none;
    /* stops graphical glitch with outline on .salesfeed-img img */
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition:
        background-color ease-out 0.3s,
        margin ease-out 0.2s,
        padding ease-out 0.2s;
}
.salesfeed .item-inner:hover {
    background-color: #edf1f2;
    cursor: pointer;
    margin: -6px;
    padding: 6px;
}
.salesfeed .item-img {
    display: block;
    height: 0;
    font-size: 0;
    margin: 0 0 9px;
    padding: 100% 0 0;
    position: relative;
}
.salesfeed .item-img > img {
    bottom: 0;
    top: auto;
}
.salesfeed .item-title,
.salesfeed .item-album,
.salesfeed .item-artist,
.salesfeed .item-price,
.salesfeed .item-over,
.salesfeed .item-loc,
.salesfeed .item-timestamp {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.salesfeed .item-title {
    font-size: 11px;
    font-weight: 700;
    margin: 0;
}
.salesfeed .item-artist,
.salesfeed .item-artist {
    font-weight: 400;
}
.salesfeed .item-price {}
.salesfeed .item-over {
    color: #4f9f30;
    font-weight: 700;
}
.salesfeed .item-album~.item-over {
    display: none;
}
.salesfeed .item-timestamp {
    color: #999;
}
.salesfeed .flag-icon {
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
    vertical-align: baseline;
}

/*bundle*/
.salesfeed .item-bundle .bundle-badge {
    margin: -4.75% 0 0 -5.75%;
    border-radius: 50%;
    height: 0;
    width: 38%;
    padding-bottom: 38%;
    background: #FCFCFC;
    border: 1px solid #666;
    position: absolute;
    z-index: 4;
 }
.salesfeed .item-bundle .bundle-badge .number {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    padding-top: 15%;
    color: #666;
 }
.salesfeed .item-bundle .bundle-badge .releases {
    text-align: center;
    font-size: 9px;
    line-height: 5px;
    color: #666;
 }
.salesfeed .item-bundle .bundle-badge .items {
    text-align: center;
    font-size: 9px;
    line-height: 5px;
    color: #666;
 }
.salesfeed .item-bundle .item-img {
    z-index: 3;
    border-radius: 3px 0 0;
}
.salesfeed .item-bundle .item-img img {
    outline: 1px solid rgba(0,0,0,0.3);
}
.salesfeed .bundle-box {
    height: 0;
    width: 98%;
    padding-bottom: 98%;
    border: 1px solid #999;
    background: #FFF;
    position: absolute;
}
.salesfeed .bundle-box.front {
    margin: 2%;
    z-index: 2;
}
.salesfeed .bundle-box.back {
    margin: 4%;
    z-index: 1;
}

@media (max-width:740px) {
    .salesfeed {
        display: none;
    }
}

@media (max-width: 800px) and (min-width: 741px) {
    .salesfeed.paused .salesfeed-paused {
        width: 400px;
    }
    .salesfeed .item-bundle .bundle-badge .releases {
        display: none;
    }
    .salesfeed .item-bundle .bundle-badge .items {
        display: none;
    }
}

@media (max-width: 1024px) and (min-width: 801px) {
    .salesfeed.paused .salesfeed-paused {
        width: 600px;
    }
    .salesfeed .item-bundle .bundle-badge .releases {
        display: none;
    }
}

@media (max-width: 1280px) and (min-width: 1025px) {
    .salesfeed.paused .salesfeed-paused {
        width: 800px;
    }

    .salesfeed .item-bundle .bundle-badge .items {
        display: none;
    }
}

@media (min-width: 1281px) {
    .salesfeed.paused .salesfeed-paused {
        width: 900px;
    }

    .salesfeed .item-bundle .bundle-badge .items {
        display: none;
    }
    .salesfeed .item-bundle .bundle-badge {
    width: 34%;
    padding-bottom: 34%;
    }
}

/* 
  skip the salesfeed if the user has the prefers-reduced-motion setting in
  their browser. it was tricky deciding what to do here - the salesfeed
  animation was brought up as a potential accessibility concern on fundraiser
  days especially, when the salesfeed is flying by. excessive animation is
  one of the few areas of accessibility that can actually do harm, rather
  than just making something unusable. and without a good way to determine
  whether the animation is actually harmful or not, and without the time to
  refactor it at the moment, removing it seemed like the way to go.

  the ideal solution would be to provide an alternate animation like a fade,
  rather than removing the entire salesfeed.
*/
@media (prefers-reduced-motion) {
    .salesfeed {
        display: none;
    }
}

/* trackpipe/public/css/home_2016/factoid.css */
/*------------------------------------------------------------*/
/*factoid*/
.factoid-inner.large {
    display: none;
}
.factoid-inner.small {
    display: block;
}

.factoid-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    margin: 36px 0 32px;
    position: relative;
    text-align: center;
}
.factoid-title.bordered {
    padding: 0 11%;
}

.factoid .dots {
    margin: 41px 0 0;
    height: 20px;
    background: url(../png/dotsdotsdots-130%402x.png) no-repeat;
    background-size:100%;
}

.factoid .dots.right {
    background: url(../png/dotsdotsdots-130-r%402x.png) no-repeat;
    background-size:100%;
}

.factoid .small .dots {
    background-size: 250%;
    background-position: 100%, 100%;
}

.factoid .small .dots.right {
    background-size: 250%;
    background-position: 0%, 100%;
}

@media (max-width:740px) {
    .factoid {
        padding: 9px 0 0;
        position: absolute;
        top: 0;
        width: 100%;
        display: none;
    }
    .factoid > .row > .col:first-child {
        display: none;
    }
    .factoid > .row > .col:last-child .vvv {
        width: 100px;
        margin: 0 auto 21px;
    }
    .factoid-title {
        font-size: 12px;
        line-height: 18px;
        margin: 0px auto 18px;
    }
}

@media (min-width:1281px) {
    .factoid-inner.large {
        display: block;
    }
    .factoid-inner.small {
        display: none;
    }
}
/* trackpipe/public/css/home_2016/notable.css */
/*------------------------------------------------------------*/
/*new and notable*/
.notable {}
.notable-item-wrapper {
    overflow: hidden;
}
.notable .notable-results {
    min-height: 400px;
    transition: 0.2s;
    overflow: hidden;
    position: relative;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.notable-result {
    position: absolute;
    transition: left 0.5s, right 0.5s;
}
.notable-result.immediate {
    transition: left 0s, right 0s;
}
.notable-result.result-current {
    left: 0;
    right: 0;
}
.notable-result.result-next {
    left: 102%;
    right: -102%;
}
.notable-result.result-prev {
    left: -102%;
    right: 102%;
}
.notable-result.result-empty {
    padding-top: 20%;
}
.notable-result.fade-in {
    -webkit-animation-duration: 0.33s;
    -moz-animation-duration: 0.33s;
    animation-duration: 0.33s;
}
.notable-result.fade-out {
    -webkit-animation-duration: 0.165s;
    -moz-animation-duration: 0.165s;
    animation-duration: 0.165s;
}
.notable-item {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 1px 0 #dfdfdf;
    display: inline-block;
    min-height: 398px;
}
.notable-item.unpublished:after {
    background-color: rgba(255, 0, 0, 0.6);
    color: #fff;
    content: 'unpublished';
    font-size: 12px;
    font-weight: 700;
    padding: 8px 0;
    position: absolute;
    right: -40px;
    text-align: center;
    top: 20px;
    transform: rotate(45deg);
    width: 150px;
}
.notable .item-img {}
.notable .item-title,
.notable .item-genre,
.notable .item-desc {
    display: block;
    line-height: 18px;
    margin: 0;
    padding: 0 10px;
}
.notable .item-title {
    margin-top: 9px;
}
.notable .item-artist {
    display: block;
}
.notable .item-genre {
    color: #999;
    font-size: 12px;
}
.notable .item-desc {
    font-family: Georgia, Times, serif;
    margin-bottom: 9px;
}
.notable .item-collection-controls {
    padding: 0 10px;
}
.notable .item-collection-controls > li {
    margin-bottom: 10px;
}
.notable .item-collection-controls li.wishlist-msg,
.notable .item-collection-controls li.wishlisted-msg {
    margin-right: 0;
}
/* notable video player (for desktop) */
.notable .notable-video {
    background-color: black;
    position: relative;
}
.notable .video .ratio-16-9 {
    padding: 47.8% 0 0;
}
.notable .video-thumbnail {
    position: relative;
}
.video-thumbnail-image {
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}
.notable .notable-video-iframe {
    background-color: #000;
    border: none;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
.notable .playvid-btn {
    background: #000;
    background-color: rgba(0,0,0,0.75);
    border-radius: 4px;
    bottom: 10px;
    cursor: pointer;
    display: inline-block;
    left: 10px;
    min-height: 54px;
    min-width: 74px;
    position: absolute;
}
.notable .playvid-btn:after {
    border-bottom: inset 10px transparent;
    border-left: 18px solid #fff;
    border-top: inset 10px transparent;
    content: '';
    display: block;
    height: 0;
    margin: 17px 0 0 30px;
    width: 0;
}
.notable .playvid-time {
    background: #000;
    background-color: rgba(0,0,0,0.75);
    border-radius: 4px;
    bottom: 10px;
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 2px 7px;
    position: absolute;
    right: 10px;
}
/* notable video player - ipad */
.notable .video-ipad-player {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}

.notable-result.result-mobile {
    display: none;
}
.notable .collection-btn svg {
    display: none;
}

@media (max-width:740px) {
    .notable .load-more {
        display: none;
    }
    .bd-section.notable > .notable-results {
        overflow-x: auto;
        max-width: 100%;
        margin: 0;
        min-height: 465px !important;
        -webkit-overflow-scrolling: touch;
    }
    .notable-results::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        background: transparent;
    }

    .notable-result .notable-item-wrapper {
        box-shadow: 0 1px 1px #CCC;
    }
    .notable-result .notable-item {
        min-height: 460px !important;
    }

    .notable-result {
        display: none;
        top: 0px;
    }
    .notable-result.result-current {
    }
    .notable-result.result-mobile {
        display: flex;
        flex-direction: row;
        width: 100%;
        overflow: visible;
    }
    .notable-result.result-mobile:after {
        display: block;
        flex: 1 0 50%;
        content: ".";
        color: rgba(0, 0, 0, 0);
        background: none;
    }
    .notable-result.result-mobile.loading:after {
        background: url(../gif/playerbusy_transp.gif);
        background-position: 50%;
        background-repeat: no-repeat;
    }
    .notable-result.result-mobile.done:after {
        flex: 1 0 4.256%;
        color: rgba(0, 0, 0, 0);
    }
    .notable .item-artist {
        display: inline;
    }

    .notable-results .col {
        margin-left: 4.256%;
    }

    .notable-results .col-3-15 {
        flex: 1 0 60%;
        max-width: 60%;
    }
    .notable-results .col-6-15 {
        flex: 1 0 80%;
        max-width: 80%;
    }

    .notable .video .ratio-16-9 {
        padding: 63% 0 0;
        background-size: cover;
    }

    .notable .item-title {
        font-size: 14px;
        line-height: 18px;
        font-weight: 500;
    }

    .notable .item-desc {
        margin: 9px 0;
    }

    .notable .item-collection-controls {
        padding: 0;
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #D2ECF3;
    }
    .notable .item-collection-controls > li {
        flex: 1 0 0;
        text-align: center;
        border-right: 1px solid #D2ECF3;
        margin: 0;
    }
    .notable .item-collection-controls > li.buy-now {
        flex: 2 0 0;
    }
    .notable .item-collection-controls > li.purchased-msg {
        flex: 3 0 0;
    }
    .notable .item-collection-controls > li a {
        padding: 0;
        height: 45px;
        line-height: 45px;
    }
    .notable .item-collection-controls > li:last-child {
        border-right: none;
    }
    .notable .collection-btn .txt {
        display: none;
    }
    .notable .collection-btn.purchased-msg .txt {
        display: inline;
        vertical-align: top;
        margin-left: 5px;
    }
    .notable .collection-btn .collect-item-icon {
        display: none;
    }
    .notable .collection-btn svg {
        display: inline;
    }
    .notable .view-tralbum svg {
        width: 10px;
        height: 100%;
        fill: #3C8EA4;
    }
    .notable .wishlist-msg svg,
    .notable .purchased-msg svg,
    .notable .wishlisted-msg svg {
        width: 13px;
        height: 100%;
    }
    .notable .wishlist-msg svg {
        fill: #3C8EA4;
    }
    .notable .wishlisted-msg svg {
        fill: #FF9C00;
    }
    .notable .purchased-msg svg {
        fill: #D0011B;
    }

    .notable .wishlisted-msg .view {
        display: none;
    }

    /* video */
    .notable .video-mobile-player {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
    }
    .notable-item.video .item-collection-controls .buy-now {
        text-align: left;
        margin: 0 0 0 15px;
    }
    .notable-item.video .item-collection-controls > li {
        border: none;
    }
    .notable-item.video .item-collection-controls .view-tralbum > a {
        text-align: right;
        margin: 0 16px 0 0;
    }
}

/* trackpipe/public/css/home_2016/signups.css */
/*------------------------------------------------------------*/
/*fans, artist, labels*/
.slashes {
    background-color:#fc0;
    height:5px;
    background: url(../png/dotrow%402x.png) no-repeat;
    background-size:100%;
}
.signups {
    padding: 0 0 64px;
}
.signups-fans,
.signups-artists,
.signups-labels {
    font-size: 14px;
    line-height: 18px;
    padding:64px 0 0;
    text-align: center;
}
.signups .section-title {
    color: #477987;
}
.signups .item-img {
    display: block;
    margin: 0 0 9px;
}
.signups .item-desc {
    margin: 0 0 20px;
}
.signups .item-btn {
    border: 1px solid rgba(99,154,169,0.4);
    border-radius: 5px;
    color: #477987;
    display: block;
    font-weight: 700;
    padding: 12px 0;
    text-decoration: none;
}
.signups .item-btn:hover {
    border-color:rgba(99,154,169,0.8);
    cursor: pointer;
}

@media (max-width:740px) {
    /* signup call outs*/
    .signups .section-title {
        display: block;
        left: 0;
        position: absolute;
        bottom: 105px;
        width: 100%;
    }
    .signups .item-desc {
        margin: 0 auto 18px;
        max-width: 300px;
    }
    .signups .item-img {
        margin: 0 auto 54px;
    }
    .signups .item-btn {
        border: none;
        color: #408ea3;
        display: inline-block;
        padding: 0;
        text-transform: uppercase;
    }
    .signups .item-btn:after {
        content: ' ›';
        display: inline-block;
        margin-left: 4px;
        font-weight: normal;
        font-size: 18px;
    }
}

/* trackpipe/public/css/home_2016/email_intake.css */
#email-intake-vm {
    position: relative;
}

#email-intake-vm .overlay {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#email-intake-vm .overlay.display {
    display: block;
    opacity: 0;
}

#email-intake-vm p {
    font-family: 'HelveticaNeue-medium', Helvetica-medium, sans-serif;
    font-size: 16px; 
    color: #030303;
    margin: auto;
    text-align:center;
    padding-top:15px;
}

#email-intake-vm p.message {
    font-size: 12px;
    color: #9B9B99;
}

#email-intake-vm form {
    width: 435px;
    height: 32px;
    margin: auto;
    padding-top: 20px;
    display: block;
    padding-bottom: 40px;
}

#email-intake-vm input {
    width: 280px;
    height: 28px;
    float: left;
    padding-left: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #bebebe;
    border-radius: 3px;
    color: rgba(22,17,19,0.7);
    outline: none;
}


@media (min-width:740px) {
#email-intake-vm input:focus {
    border: 1px solid #1da0c3;
}
} /* @media (min-width:740px) */

#email-intake-vm button {
    background-color: #232323;
    color: white;
    border: none;
    width: 131px;
    height: 32px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.12em;
    border-radius: 3px;
    float: right;
    display: inline;
    outline: none;
    -webkit-transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
    -moz-transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
    -ms-transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

#email-intake-vm button:hover:enabled.showoff {
    background-color: #1da0c3;
}

#email-intake-vm button:disabled.showoff {
    opacity: 0.5;
    cursor: default;
}

#email-intake-vm .bottom-border {
    border: none;
    border-top: 1px solid rgba(119,119,119,0.10);
    width: 80%;
    height: 35px;
    margin: auto;
}


/* ============ mobile ============= */

@media (max-width:740px) {

#email-intake-vm {
    background-color: #dcebef;
}

#email-intake-vm p {
    padding-top: 30px;
    padding-right: 10px;
    padding-left: 10px;
}

#email-intake-vm p.message {
    font-size: 16px;
    color: #9B9B99;
}

#email-intake-vm form {
    width: auto;
    height: auto;
    margin: auto;
    padding: 0;
    display: block;
}

#email-intake-vm input {
    font-size: 16px;
    width: 80%;
    margin: auto;
    background-color: #f3f3f3;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    padding: 4px 4% 4px 4%;
    float: none;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
}

#email-intake-vm button {
    background-color: #232323;
    color: white;
    border: none;
    width: 40%;
    height: 36px;
    margin: auto;
    display: block;
    float: none;
    padding: 0;
    margin-bottom: 20px;
}

#email-intake-vm .bottom-border {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #cecece;/*rgba(119,119,119,0.50);*/
    border: none;
    border-top: none;
}

}  /* @media (max-width:740px) */