/* Global CSS Variables */
/* precss variables Sample */

/* components import */
/** This first section is for the old Profile icon. It should be removed after userProfile goes live **/
.profile-icon{
    position: absolute;
    right: 20px;
    top: 16px;
}
.profile-icon .profile-svg{
    height: 21px;
}
.profile-icon .profile-initial{
    text-transform: uppercase;
    font-family: "AvenirNext-DemiBold",sans-serif;
    pointer-events: none;
    font-size: 11px;
    color: #FFFFFF;
    position: absolute;
    right: 0;
    top: 0;
    width: 21px;
    height: 21px;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    letter-spacing: 0;
}
@media (min-width: 768px){
    .profile-icon{
        right: 26px;
        top: 10px;
    }
}
@media (min-width: 768px){
    .profile-icon .profile-svg{
        height: 30px;
    }
}
@media (min-width: 768px){
    .profile-icon .profile-initial{
        width: 30px;
        height: 30px;
        line-height: 31px;
        font-size: 15px;
    }
}
/** AVATAR DROPDOWN **/
.profile-avatar{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    max-width: 35%;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
.profile-avatar a{
    color: white;
    font-family: "Avenir Next",sans-serif;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 2px;
}
.profile-avatar .profile-svg, .profile-avatar .profile-unauth{
    padding: 16px;
}
.profile-avatar .profile-unauth{}
.profile-avatar .profile-name{
    line-height: 31px;
    vertical-align: middle;
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-avatar .profile-circle{
    letter-spacing: 0;
}
.profile-avatar .profile-circle img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.profile-avatar .profile-circle .profile-initial{
    text-transform: uppercase;
    font-family: "AvenirNext-DemiBold",sans-serif;
    pointer-events: none;
    font-size: 11px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 26px;
    font-size: 15px;
}
.profile-avatar .modal-dropdown{
    cursor: pointer;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
}
.profile-avatar .modal-dropdown img{
    display: block;
}
.profile-avatar .modal-dropdown .modal{
    top: 20px;
    right: -20px;
    background-color: #131313;
    border-radius: 11px;
    bottom: auto;
    padding: 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.profile-avatar .modal-dropdown .modal ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.profile-avatar .modal-dropdown .modal ul li{
    border-top: 1px solid #373737;
}
.profile-avatar .modal-dropdown .modal ul li:first-child{
    border-top: none;
}
.profile-avatar .modal-dropdown .modal ul a{
    color: white;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    display: block;
    padding: 12px 32px;
}
.profile-avatar .modal-dropdown .modal::after{
    content: '';
    position: absolute;
    top: -12px;
    right: 15.5px;
    border-bottom: 12px solid #131313;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
@media(min-width: 768px){
    .profile-avatar .profile-unauth{
        margin-right: 8px;
    }
}
@media (min-width: 768px){
    .profile-avatar .profile-name{
        display: inline-block;
    }
}
@media (min-width: 768px){
    .profile-avatar .profile-circle{
        padding: 0 16px;
        right: 26px;
        top: 10px;
    }
}
@media(min-width: 768px){
    .profile-avatar .modal-dropdown{
        padding-right: 24px;
    }
}
@media (min-width: 768px){
    .profile-avatar .modal-dropdown .modal{
        right: -27px;
    }
    .profile-avatar .modal-dropdown .modal::after{
        right: 11.5px;
    }
}
.header-content{
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    position: fixed;
    -webkit-transform-origin: 0;
            transform-origin: 0;
    top: 0px;
    width: 100%;
    z-index: 1001;
}
.header-content #header{
    background-color: transparent;
    height: 50px;
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.header-content #header .logo{
    display: inline;
    left: 13px;
    position: absolute;
    top: 16px;
}
.header-content #header .logo .logo-icon{
    height: 18px;
    position: relative;
}
.header-content #header .logo.hide{
    display: none;
}
.header-content #header .search .search-icon{
    height: 21px;
    position: absolute;
    right: 11px;
    top: 14px;
}
.header-content #header #mini-search{
    font-family: "AvenirNext-DemiBold",sans-serif;
    height: 36px;
    position: absolute;
    right: 70px;
    top: 15px;
}
.header-content #header #mini-search .close-icon, .header-content #header #mini-search .cancel-btn{
    display: none;
    cursor: pointer;
}
.header-content #header #mini-search.user-profiles{
    right: 75px;
}
.header-content #header #mini-search.mobileSearchVisible{
    position: relative;
    left: 13px;
    right: auto;
}
.header-content #header #mini-search.mobileSearchVisible .mini-input{
    padding-left: 28px;
    padding-right: 136px;
    width: 100%;
    margin-top: -8px;
}
.header-content #header #mini-search.mobileSearchVisible .close-icon{
    display: block;
    position: absolute;
    right: 114px;
    top: 3px;
    height: 13px;
}
.header-content #header #mini-search.mobileSearchVisible .cancel-btn{
    font-family: "AvenirNext-Regular",sans-serif;
    display: block;
    position: absolute;
    right: 13px;
    top: -16px;
    font-size: 12px;
    letter-spacing: 1.3px;
    opacity: 0.46;
    color: #ffffff;
    text-transform: uppercase;
    height: 50px;
    padding: 18px 14px;
    border-left: 1px solid rgba(151, 151, 151, 1);
}
.header-content #header #mini-search.mobileSearchVisible .search-icon{
    left: 0;
}
.header-content #header.scrolled{
    background-color: #000000;
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    .header-content{}
    .header-content.watch-page{
        display: none;
    }
}
.header-content.make-opaque{
    background-color: #000;
}
@media (min-width: 768px){
    .header-content #header .logo{
        left: 26px;
    }
}
@media (min-width: 768px){
    .header-content #header #mini-search{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 235px;
        padding-left: 20px;
        padding-top: 10px;
        position: static;
        width: 265px;
    }
    .header-content #header #mini-search .close-icon{
        display: none;
    }
    .header-content #header #mini-search .cancel-btn{
        display: none;
    }
}
#header.logged-in #mini-search.user-profiles{
    right: 105px;
    top: 16px;
}
@media (min-width: 768px){
    #header.logged-in #mini-search.user-profiles{
        top: 16px;
    }
}
#watch-tabs.tabs-container{
    background-color: #000000;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    padding: 0 15px 10px 15px;
}
#watch-tabs.tabs-container select{
    cursor: pointer;
    padding: 10px 15px;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    font-weight: 300;
    background-color: #000000;
    background-image: url(/nucleus/img/down.5db73262.png);
    background-position: 95% 50%;
    background-repeat: no-repeat;
    color: #FFFFFF;
    border: none;
    font-weight: 500;
    display: block;
    margin: 0 auto;
    -webkit-appearance: none;
    outline-width: 0;
    margin-bottom: -16px;
    position: Relative;
    padding: 10px 25px 10px 15px;
    -moz-text-align-last: center;
         text-align-last: center;
    z-index: 1;
}
#watch-tabs.tabs-container select option{
    text-align: center;
}
#watch-tabs.tabs-container ul{
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}
#watch-tabs.tabs-container ul li{
    display: inline-block;
    cursor: pointer;
    padding: 10px 15px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 300;
}
#watch-tabs.tabs-container ul li.active{
    border-bottom: solid 2px #ffffff;
    font-weight: 500;
}
#watch-tabs.tabs-container .tabs-content{
    /* Song Details Tab */
}
#watch-tabs.tabs-container .tabs-content.details{
    border-top: 1px solid rgba(151, 151, 151, .2);
    min-height: 212px;
    width: 100%;
    padding: 25px 15px;
    box-sizing: border-box;
    line-height: 21px;
}
#watch-tabs.tabs-container .tabs-content.details .credits{
    width: 100%;
}
#watch-tabs.tabs-container .tabs-content.details .credits .hidden{
    display: none;
}
#watch-tabs.tabs-container .tabs-content.details .views{
    width: 100%;
    font-size: 18px;
    letter-spacing: 3.7px;
    line-height: 33px;
    font-weight: 500;
}
#watch-tabs.tabs-container .tabs-content.details .views .views-label{
    letter-spacing: 1.5px;
    font-size: 12px;
    line-height: 16px;
}
/* Titles in Feed in to be removed from component, until then, we're hiding it here */
#watch-tabs.tabs-container .trendingTitle{
    display: none;
}
/* Override styles for the carousel feed just for the watch page */
#watch-tabs.tabs-container .feed-template .carousel-navigation div{
    top: -15px;
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    #watch-tabs.tabs-container{
        display: none;
    }
}
@media(min-width: 768px){
    #watch-tabs.tabs-container .tabs-content.details{
        min-height: 350px;
    }
}
@media (min-width: 768px){
    #watch-tabs.tabs-container .tabs-content.details .credits{
        max-width: 50%;
    }
}
@media (min-width: 768px){
    #watch-tabs.tabs-container .tabs-content.details .views{
        display: inline-block;
        width: auto;
        float: right;
        margin-right: 15px;
    }
}
@media(min-width: 1450px){
    #watch-tabs.tabs-container .feed-template .carousel-navigation div{
        top: 0;
    }
}
#artist-tabs.tabs-container{
    background-color: #000;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    min-height: 50vh;
    padding: 10px 15px;
}
#artist-tabs.tabs-container a:hover, #artist-tabs.tabs-container a:visited, #artist-tabs.tabs-container a:link, #artist-tabs.tabs-container a:active{
    text-decoration: none;
}
#artist-tabs.tabs-container .header-stuck{
    background-color: #000;
    position: fixed;
    top: 125px;
    width: 93%;
    z-index: 4;
}
.banner-closed #artist-tabs.tabs-container .header-stuck{
    top: 50px;
}
#artist-tabs.tabs-container .header-stuck li{}
#artist-tabs.tabs-container ul{
    border-bottom: 1px solid rgba(255,255,255,.2);
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    -webkit-transition: height 0.4s;
            transition: height 0.4s;
    width: 100%;
    z-index: 12;
}
#artist-tabs.tabs-container ul li{
    cursor: pointer;
    display: inline-block;
    font-weight: 300;
    letter-spacing: 1.8px;
    padding: 10px 15px;
    text-transform: uppercase;
}
#artist-tabs.tabs-container ul li.active{
    border-bottom: solid 2px #ffffff;
    font-weight: 500;
}
#artist-tabs.tabs-container .tabs-content .related-title{
    font-size: 14px;
    letter-spacing: 3px;
    margin-top: 15px;
    text-transform: uppercase;
}
#artist-tabs.tabs-container .tabs-content .artist-icon-container{
    min-height: 200px;
    text-align: center;
}
#artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template{
    display: inline-block;
    margin: 10px;
    min-height: 100px;
    min-width: 100px;
    position: relative;
}
#artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .image-hover{
    background-color: rgba(0,0,0,0.5);
    height: 100px;
    position: absolute;
    width: 100px;
}
#artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .image-hover:hover{
    background-color: rgba(0,0,0,0.65);
}
#artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .artist-icon{
    border-radius: 50%;
    width: 100px;
}
#artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .icon-name{
    color: white;
    font-size: 8px;
    font-weight: 500;
    left: 50%;
    letter-spacing: 1px;
    position: absolute;
    max-width: 100px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipses;
    text-transform: uppercase;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 50%;
    white-space: nowrap;
}
@media (min-width: 768px){
    #artist-tabs.tabs-container .header-stuck{
        height: 100px;
        top: 124px;
        width: 100%;
    }
}
@media (min-width: 768px){
    #artist-tabs.tabs-container .header-stuck li{
        margin-top: 61px;
    }
}
@media (min-width: 768px){
    #artist-tabs.tabs-container ul{
        text-align: left;
    }
}
@media (min-width: 1200px){
    #artist-tabs.tabs-container ul{
        margin-left: 0;
    }
}
@media (min-width: 768px){
    #artist-tabs.tabs-container .tabs-content .artist-icon-container{
        text-align: initial;
    }
}
@media (min-width: 768px){
    #artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template{
        margin: 12px;
        min-height: 150px;
        min-width: 150px;
    }
}
@media (min-width: 1200px){
    #artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template{
        min-height: 150px;
        min-width: 150px;
    }
}
@media (min-width: 768px){
    #artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .image-hover{
        height: 150px;
        width: 150px;
    }
}
@media (min-width: 1200px){
    #artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .image-hover{
        height: 200px;
        width: 200px;
    }
}
@media (min-width: 768px){
    #artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .artist-icon{
        width: 150px;
    }
}
@media (min-width: 1450px){
    #artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .artist-icon{
        width: 200px;
    }
}
@media (min-width: 768px){
    #artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .icon-name{
        font-size: 13px;
        max-width: 150px;
        text-align: center;
    }
}
@media (min-width: 1450px){
    #artist-tabs.tabs-container .tabs-content .artist-icon-container .icon-template .icon-name{
        max-width: 200px;
    }
}
/* player.css */
#player{
    margin: 0 auto;
    max-width: 1198px;
}
#player .html-player-component{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    width: 100%;
    z-index: 0;
}
#player .html-player-component #advertisement{
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
    color: #FFFFFF;
    width: 100%;
    padding: 11px;
    position: absolute;
    display: none;
    bottom: 0;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    z-index: 14;
    pointer-events: none;
}
#player .html-player-component #advertisement.playing{
    display: block;
}
#player .html-player-component #advertisement.paused{
    display: none;
}
#player .html-player-component .video-crop{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#player #freewheel-overlay-container{
    position: absolute;
    bottom: 80px;
    width: 100%;
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: .4s ease opacity;
            transition: .4s ease opacity;
    cursor: pointer;
}
#player #freewheel-overlay-container .close-overlay-button{
    position: relative;
    margin: auto;
    left: 228px;
    bottom: 48px;
    padding: 5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    z-index: 1;
}
#player #freewheel-overlay-container .close-overlay-button img{
    display: block;
    width: 10px;
    height: 10px;
}
#player #freewheel-overlay-container.overlay-ad-playing{
    opacity: 1;
    pointer-events: all;
}
#player #freewheel-container{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#player .ticker-container{
    background: -webkit-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
    height: 78px;
    position: absolute;
    width: 100%;
    z-index: 15;
}
#player .ticker-container .ticker-ad{
    height: 60px;
    width: 250px;
}
#player .ticker-container .brandedticker{
    height: 60px;
    width: 250px;
}
#player .ticker-container #brandedticker{
    position: absolute;
    right: 15px;
    top: 19px;
}
#player .ticker-container .presented-by{
    color: white;
    font-size: 14px;
    letter-spacing: 1.5px;
    position: absolute;
    right: 102px;
    text-transform: uppercase;
    top: 33px;
}
#player .ticker-container.hidden{
    visibility: hidden;
}
#player .ticker-container.gone{
    display: none;
}
#player .html-player{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 10;
}
#player .feed-template .feed-hori-container{}
@media(min-width: 1450px){
    #player{
        max-width: 1400px;
    }
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    #player .html-player-component{
        height: 100%;
        width: 100%;
        position: static;
    }
    #player .html-player-component video{
        overflow: hidden;
    }
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    #player .html-player{
        z-index: 13;
    }
}
@media(min-width: 1200px){
    #player .feed-template .feed-hori-container{
        margin-bottom: -55px;
    }
}
#trick-video-holder video{
    position: absolute;
    height: 0;
    width: 0;
    display: none;
}
.videoPoster{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 12;
    background-color: #000;
    background-size: cover;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: .4s opacity ease-in-out;
            transition: .4s opacity ease-in-out;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: translate3d(0, 0, 0);
}
.videoPoster .playIconContainer, .videoPoster .spinnerContainer{
    top: 50%;
    left: 50%;
    margin: -24px;
    width: 48px;
    position: absolute;
    z-index: 1;
}
.videoPoster .spinnerContainer{
    opacity: 1;
}
.videoPoster .spinnerContainer img{
    -webkit-animation: spinner-anim 1s linear infinite;
            animation: spinner-anim 1s linear infinite;
}
.videoPoster .playIconContainer{
    opacity: 0;
}
.videoPoster.visible{
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    .videoPoster{
        z-index: 14;
    }
}
.videoPoster.ready .spinnerContainer{
    opacity: 0;
}
.videoPoster.ready .playIconContainer{
    opacity: 1;
}
video::-webkit-media-controls{
    display: none !important;
}
.control-bar-container{
    position: absolute;
    bottom: -18px;
    box-sizing: content-box;
    padding-bottom: 18px;
    height: 100%;
    z-index: 12;
    width: 100%;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}
.control-bar-container .hover-gradient{
    position: absolute;
    bottom: 18px;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: .2s all ease;
            transition: .2s all ease;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
    height: 80px;
}
.control-bar-container .bottom-controls{
    opacity: 0;
    -webkit-transition: .2s all ease;
            transition: .2s all ease;
    position: absolute;
    bottom: 18px;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
}
.control-bar-container .bottom-controls .left-controls, .control-bar-container .bottom-controls .right-controls{
    position: absolute;
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
    -webkit-transition: .2s all ease;
            transition: .2s all ease;
}
.control-bar-container .bottom-controls .left-controls{
    left: 16px;
}
.control-bar-container .bottom-controls .right-controls{
    right: 16px;
}
.control-bar-container .bottom-controls .progress-text{
    height: 14px;
    /* This helps with vertical alignment to reduce variation in line-height rendering. */
}
.control-bar-container .bottom-controls .play-icon{
    position: absolute;
}
.control-bar-container .bottom-controls .player-control{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: inline-block;
    padding: 8px 8px;
    cursor: pointer;
    vertical-align: middle;
}
.control-bar-container .bottom-controls .player-control.volume.hidden{
    display: none;
}
.control-bar-container .bottom-controls .repeat-control{
    opacity: .5;
}
.control-bar-container .bottom-controls .repeat-control.active{
    opacity: 1;
}
.control-bar-container .bottom-controls .progress-bar{
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    /* We don't want the scrub-handle overflowing */
    height: 30px;
    cursor: pointer;
    padding: 10px 0;
    box-sizing: border-box;
    overflow: hidden;
}
.control-bar-container .bottom-controls .progress-bar-range{
    position: relative;
    margin-right: 13px;
}
.control-bar-container .bottom-controls .progress-bar-inner-line{
    border-bottom: 2px solid rgba(255,255,255,.2);
    position: absolute;
    left: 0;
    right: -13px;
}
.control-bar-container .bottom-controls .progress-so-far{
    position: absolute;
    left: 0;
    height: 2px;
    background-color: white;
}
.control-bar-container .bottom-controls .scrub-touch-target{
    padding: 10px;
    box-sizing: content-box;
    width: 13px;
    height: 13px;
    position: absolute;
    right: -23px;
    /* 10px for padding, 15px for the width of the scrub handle */
    top: -16px;
    /* 10px for padding, 6px for half of the width of the handle rounded down to center it */
    cursor: pointer;
}
.control-bar-container .bottom-controls .scrub-handle{
    width: 13px;
    height: 13px;
    border-radius: 7px;
    background-color: white;
}
.control-bar-container .play-icon{
    opacity: 1;
}
.control-bar-container .pause-icon{
    opacity: 0;
}
.control-bar-container.not-visible{
    display: none;
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    .control-bar-container{
        z-index: 14;
    }
    .control-bar-container .bottom-controls{
        bottom: 32px;
    }
}
.control-bar-container.fullscreen{
    z-index: 14;
}
.control-bar-container.fullscreen .bottom-controls{
    bottom: 32px;
}
.control-bar-container.visible .hover-gradient{
    opacity: 1;
}
.control-bar-container.visible .bottom-controls{
    opacity: 1;
}
.control-bar-container.visible .left-controls, .control-bar-container.visible .right-controls{
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
.control-bar-container.state-playing .progress-bar{
    -webkit-transition: width 1s linear;
            transition: width 1s linear;
}
.control-bar-container.state-playing .play-icon{
    opacity: 0;
}
.control-bar-container.state-playing .pause-icon{
    opacity: 1;
}
#footer{
    background-color: #000000;
    border-top: 1px solid rgba(151, 151, 151, .3);
    font-family: "Avenir Next",sans-serif;
    font-size: 10px;
    position: relative;
    text-align: center;
    width: 100%;
    position: relative;
}
#footer .links{
    margin-top: 15px;
}
#footer .links .link{
    display: inline-block;
    height: 25px;
}
#footer .links .link a{
    color: #6F6F6F;
    margin: 0 9px;
    text-decoration: none;
}
#footer .links .not-ready{
    display: none;
}
#footer .links .no-mobile{
    display: none;
}
#footer .links .hiring-tag{
    color: white;
    left: 4px;
    position: relative;
}
#footer .no-mobile-block{
    display: none;
}
#footer .social-links{
    display: none;
}
#footer .social-links .social-link{
    cursor: pointer;
    display: inline-block;
    padding: 20px 6px 0;
}
#footer .social-links .instagram{
    height: 16px;
    margin-left: -3px;
    width: 16px;
}
#footer .social-links .snapchat{
    height: 16px;
}
#footer .footmark{
    color: #2E2E2E;
    position: relative;
    margin-bottom: 20px;
}
#footer .language-dropdown{
    position: relative;
}
#footer .language-dropdown svg{
    position: static;
    fill: #828282;
    pointer-events: none;
}
#footer .language-dropdown select{
    background-color: #000000;
    background-position: right;
    background-repeat: no-repeat;
    border: none;
    border-color: #000000;
    border-bottom: 1px solid #828282;
    padding: 0 8px 4px 0;
    border-radius: 0;
    color: #6F6F6F;
    display: inline-block;
    font-family: "Avenir Next", sans-serif;
    font-size: 12px;
    letter-spacing: 2;
    margin: 10 auto 0;
    position: relative;
    outline-width: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
}
#footer .language-dropdown select .genre{
    font-size: 15px;
    letter-spacing: 1.5;
    padding: 7px 0;
    text-align: center;
}
#footer .language-dropdown select .genre:first-child{
    border-radius: 4px;
    padding-top: 15px;
}
#footer .language-dropdown select .genre:last-child{
    padding-bottom: 15px;
}
#footer .language-dropdown select .active{
    background-color: #3C3C40;
}
#footer .language-dropdown select::-ms-expand{
    display: none;
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    #footer{}
    #footer.watch-page{
        display: none;
    }
}
@media (min-width: 768px){
    #footer .links .no-mobile{
        display: inline-block;
    }
}
@media (min-width: 768px){
    #footer .no-mobile-block{
        display: block;
    }
}
@media (min-width: 768px){
    #footer .social-links{
        display: block;
    }
}
@media (min-width: 768px){
    #footer .language-dropdown{
        position: absolute;
        right: 24px;
        top: 32px;
    }
}
@media (min-width: 768px){
    #footer .language-dropdown svg{
        position: absolute;
        right: 0;
        top: 16px;
    }
}
@media (min-width: 768px){
    #footer .language-dropdown select{
        display: block;
    }
}
.feed-template{
    background-color: #000000;
    border-top: 1px solid rgba(151, 151, 151, .2);
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    padding: 24px 0;
    -webkit-transition: height 0.4s ease;
            transition: height 0.4s ease;
    position: relative;
}
.feed-template a:hover, .feed-template a:visited, .feed-template a:link, .feed-template a:active{
    text-decoration: none;
}
.feed-template h2{
    font-weight: normal;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}
.feed-template .feed-hori-container{}
.feed-template .video-info-card{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    background: #131313;
    height: 56px;
    width: 100%;
}
.feed-template .video-info-card .video-info{
    font-size: 12px;
    letter-spacing: 1.2;
    line-height: 1.2;
    text-align: left;
    top: 0;
    left: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
    -webkit-flex-basis: 0%;
        -ms-flex-preferred-size: 0%;
            flex-basis: 0%;
    max-width: 100%;
    min-width: 0;
    padding: 10px;
}
.feed-template .video-info-card .video-info div{
    padding: 2px;
    width: 100%;
}
.feed-template .video-info-card .video-info div.artist-name{
    display: inline-block;
    color: #f6f6f7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-template .video-info-card .video-info div.artist-name a{
    color: #f6f6f7;
}
.feed-template .video-info-card .video-info div.video-name{
    display: inline-block;
    color: #9B9B9B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-template .video-info-card .video-info div.video-name a{
    color: #9B9B9B;
}
.feed-template .video-info-card .video-info div.playlist-name{
    display: block;
    display: -webkit-box;
    overflow: hidden;
    max-width: 100%;
    white-space: normal;
    text-overflow: ellipsis;
    height: 30px;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #f6f6f7;
}
.feed-template .video-info-card .like-info{
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    max-width: 100%;
}
.feed-template .video-info-card .like-info .heart-container{
    float: right;
    margin-top: 17px;
    margin-right: 5px;
    position: relative;
}
.feed-template .video-info-card .like-info .heart-container img{
    height: 22px;
}
.feed-template .video-info-card .like-info .heart-container .like-icon-filled{
    height: 23px;
    width: 25px;
    right: 5px;
    left: auto;
    -webkit-transition: width 400ms, height 400ms, top 400ms, right 400ms;
            transition: width 400ms, height 400ms, top 400ms, right 400ms;
    position: absolute;
    margin: 0;
}
.feed-template .video-info-card .like-info .heart-container .like-icon-filled.hidden{
    width: 0;
    height: 0;
    /* strange numbers here are for centering the hidden
                       heart that grows to fill the empty one */
    right: 17px;
    top: 14px;
}
.feed-template .video-info-card .like-info .likes{
    text-transform: lowercase;
    font-family: "AvenirNext-Medium",sans-serif;
    font-size: 10px;
    letter-spacing: 1.1px;
    background: none;
    color: white;
    margin: 22px 0 0;
    padding: 0;
}
.feed-template .video-info-card .like-info .likes-label{
    display: none;
}
.feed-template .video-results{
    overflow: hidden;
}
.feed-template .feed-item-artist{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
.feed-template .feed-item-artist .feed-item-artist-list-item{
    display: block;
}
.feed-template .feed-item-artist .feed-item-artist-circle{
    display: none;
}
.feed-template .carousel-navigation{
    pointer-events: none;
}
.feed-template .carousel-navigation div.prev, .feed-template .carousel-navigation div.next, .feed-template .carousel-navigation div.hidden{
    cursor: pointer;
    font-size: 18pt;
    color: #ffffff;
    position: relative;
    padding: 50px 5px;
    pointer-events: all;
    opacity: 0.5;
    background-color: transparent;
    background-image: url(/nucleus/img/arrow-right.49e9503c.svg);
    background-clip: content-box;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 30px;
    height: 125px;
}
.feed-template .carousel-navigation div:hover{
    opacity: 1;
}
.feed-template .carousel-navigation div.prev{
    float: left;
    left: -28px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.feed-template .carousel-navigation div.next{
    float: right;
    right: -28px;
}
.feed-template .carousel-navigation div.hidden{
    display: none;
}
.feed-template .artist-container{
    margin-top: -18px;
    min-height: 100px;
    position: relative;
}
.feed-template a{
    outline: 0;
}
.feed-template .image-link{
    display: inline-block;
}
.feed-template .image-container{
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
}
.feed-template .image-container .image-hover{
    cursor: pointer;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 3;
}
.feed-template .image-container .image-hover:hover{
    background-color: rgba(0,0,0,0.35);
}
.feed-template .image-container .image-hover.dark{
    background-color: rgba(0,0,0,0.5);
}
.feed-template .search-artist{
    display: inline-block;
    position: relative;
    width: 100%;
    max-height: 76px;
}
.feed-template .search-artist .image-container{
    position: relative;
    height: auto;
}
.feed-template .search-artist img{
    border-radius: 50%;
    height: 67px;
    margin-left: 6px;
    margin-right: 20px;
    -o-object-fit: cover;
       object-fit: cover;
    width: 67px;
}
.feed-template .search-artist .search-artist-name{
    color: white;
    display: inline-block;
    position: absolute;
    left: 100px;
    letter-spacing: 1.6;
    max-height: 32px;
    max-width: 197px;
    overflow: hidden;
    text-transform: uppercase;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    top: 50%;
    z-index: 3;
    pointer-events: none;
}
.feed-template .search-artist.artist-1{
    display: none;
}
.feed-template .search-artist.artist-2{
    display: none;
}
.feed-template .trending-title{
    letter-spacing: 3.5;
    margin: 9px 12px;
    max-height: 29px;
    font-size: 16px;
    overflow: hidden;
    text-transform: uppercase;
}
.feed-template .feed-artist-link{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
.feed-template .feed-artist-link .feed-artist{
    display: inline-block;
    height: 180px;
    width: 180px;
    position: relative;
    margin: 12px;
}
.feed-template .feed-artist-link .feed-artist img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.feed-template .feed-artist-link .feed-artist .search-artist-name{
    pointer-events: none;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 140px;
    text-align: center;
    z-index: 3;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}
.feed-template .feed-artist-link .feed-artist .artist-card-overlay{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: .6;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), #000000);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #000000);
}
.feed-template .feed-artist-link .feed-artist:first-child{
    padding-left: 8px;
}
.feed-template .trending-card{
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    padding: 10px 0;
    position: relative;
    height: 67px;
    margin: 5px 0;
}
.feed-template .trending-card img{
    display: inline-block;
    height: 67px;
    width: 118px;
}
.feed-template .trending-card .video-info-overlay-container .like-info{
    display: none;
    /*override on a per-feed basis*/
}
.feed-template .trending-card .video-info-overlay{}
.feed-template .trending-card .genre-title-overlay{
    z-index: 3;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
    max-width: 100%;
    position: absolute;
    font-size: 13px;
    font-family: "AvenirNext-Bold",sans-serif;
    letter-spacing: 9.2px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 10px;
    overflow: hidden;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    max-height: 50%;
}
.feed-template .trending-card .video-info{
    color: #9B9B9B;
    display: inline-block;
    left: 132px;
    letter-spacing: 1.65;
    position: absolute;
    top: 40%;
    max-width: 140px;
}
.feed-template .trending-card .video-info .artist-name{
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feed-template .trending-card .video-info .video-name{
    line-height: 12px;
    max-height: 24px;
    overflow: hidden;
}
.feed-template .trending-card .video-info .views{
    display: none;
}
.feed-template .trending-card .now-playing{
    background-color: rgba(0,0,0,0.6);
    border: 2px solid white;
    color: white;
    font-size: 10px;
    height: 67px;
    letter-spacing: 1.5px;
    position: absolute;
    text-align: center;
    width: 118px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    line-height: 67px;
}
.feed-template .trending-card .playing-video + div.video-info-overlay > .video-info .now-playing-string{
    position: relative;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    top: 50%;
}
.feed-template .trending-card .not-playing{
    display: none;
}
.feed-template .trending-card.genre-card{
    padding-bottom: 66.66%;
}
.feed-template .trending-card:hover .image-container .image-hover.dark{
    background-color: rgba(0,0,0,0.75);
}
.feed-template .load-more-center{
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
}
.feed-template .load-more-center .load-more{
    border-bottom: 2px solid #f6f6f7;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1.5px;
    margin: 15px auto;
    padding: 2px 0 13px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.feed-template .load-more-center .load-more:after{
    border-bottom: 1px solid #999;
    content: '';
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
}
.feed-template hr{
    margin-bottom: 25px;
    width: 83px;
}
@media (min-width: 1450px){
    .feed-template{
        font-size: 14px;
    }
}
@media (min-width: 1200px){
    .feed-template .feed-hori-container{
        /*cropping scroll bar*/
        margin-bottom: -35px;
        padding-bottom: 35px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row nowrap;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-transition: left 250ms;
                transition: left 250ms;
        left: 0;
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media(min-width: 1200px){
    .feed-template .feed-item-artist .feed-item-artist-list-item{
        display: none;
    }
}
@media(min-width: 1200px){
    .feed-template .feed-item-artist .feed-item-artist-circle{
        display: block;
    }
}
@media(min-width: 1200px){
    .feed-template .carousel-navigation{
        display: inline-block;
        position: absolute;
        top: 70px;
        margin-bottom: -170px;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
}
@media (min-width: 768px){
    .feed-template .artist-container{
        margin-bottom: 10px;
        min-height: 150px;
    }
}
@media (min-width: 1200px){
    .feed-template .artist-container{
        min-height: 250px;
    }
}
@media (min-width: 768px){
    .feed-template .search-artist{
        width: 50%;
    }
}
@media (min-width: 1200px){
    .feed-template .search-artist{
        width: 33%;
        min-height: 200px;
    }
}
@media (min-width: 768px){
    .feed-template .search-artist .image-container{
        position: absolute;
    }
}
@media (min-width: 768px){
    .feed-template .search-artist img{
        height: 100px;
        width: 100px;
    }
}
@media (min-width: 1200px){
    .feed-template .search-artist img{
        height: 200px;
        width: 200px;
    }
}
@media (min-width: 768px){
    .feed-template .search-artist.artist-1{
        display: inline-block;
    }
}
@media (min-width: 1200px){
    .feed-template .search-artist.artist-2{
        display: inline-block;
    }
}
@media (min-width: 768px){
    .feed-template .search-artist .search-artist-name{
        left: 150px;
        max-height: 38px;
        top: 44px;
    }
}
@media (min-width: 1200px){
    .feed-template .search-artist .search-artist-name{
        left: 250px;
        top: 50%;
    }
}
@media (min-width: 768px){
    .feed-template .feed-card-outer-link{
        width: 31%;
        margin: 1%;
        display: inline-block;
    }
}
@media (min-width: 1200px){
    .feed-template .feed-card-outer-link{
        width: 23.5%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 23.5%;
            -ms-flex: 0 0 23.5%;
                flex: 0 0 23.5%;
        margin: 1%;
        display: inline-block;
    }
    .feed-template .feed-card-outer-link:first-child{
        margin-left: 0;
    }
    .feed-template .feed-card-outer-link:last-child{
        margin-right: 0;
    }
}
@media (min-width: 1200px){
    .feed-template .trending-title{
        font-size: 22px;
    }
}
@media(min-width: 768px){
    .feed-template .trending-card{
        overflow: hidden;
        width: 100%;
        height: 0;
        display: block;
        padding-top: 0;
        padding-bottom: 56.25%;
        margin: 0;
    }
}
@media (min-width: 768px){
    .feed-template .trending-card img{
        width: 100%;
        height: 100%;
        position: absolute;
    }
}
@media (min-width: 768px){
    .feed-template .trending-card .video-info-overlay{
        text-align: center;
        width: 100%;
        height: 100%;
        display: block;
        max-width: 100%;
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), #000000);
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), #000000);
        position: absolute;
    }
}
@media (min-width: 768px){
    .feed-template .trending-card .genre-title-overlay{
        font-size: 22px;
    }
}
@media (min-width: 768px){
    .feed-template .trending-card .video-info{
        max-width: 220px;
    }
}
@media (min-width: 768px){
    .feed-template .trending-card .video-info .artist-name{
        padding: 1px 0;
    }
}
@media (min-width: 768px){
    .feed-template .trending-card .video-info .video-name{
        cursor: pointer;
        padding: 1px 0;
        line-height: 14px;
        max-height: 28px;
    }
}
@media (min-width: 1200px){
    .feed-template .trending-card .video-info .video-name{
        line-height: 19px;
        max-height: 38px;
    }
}
@media (min-width: 768px){
    .feed-template .trending-card .video-info{
        left: 0;
        height: auto;
        width: 100%;
        position: absolute;
        bottom: 10px;
        max-height: none;
        max-width: none;
        top: auto;
    }
    .feed-template .trending-card .video-info .artist-name{
        width: 100%;
    }
    .feed-template .trending-card .video-info .name-views-container{
        width: 100%;
    }
}
@media (min-width: 1200px){
    .feed-template .trending-card .video-info .video-name, .feed-template .trending-card .video-info .views{
        display: inline-block;
    }
    .feed-template .trending-card .video-info .views{
        display: none;
    }
}
@media (min-width: 768px){
    .feed-template .trending-card .now-playing{
        line-height: 200px;
        font-size: 14px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
    }
}
@media (min-width: 1200px){
    .feed-template .trending-card .now-playing{
        line-height: 160px;
    }
}
@media (min-width: 768px){
    .feed-template .trending-card .playing-video + div.video-info-overlay > .video-info{
        display: none;
    }
}
@media (min-width: 768px){
    .feed-template .load-more-center .load-more{
        font-size: 14px;
    }
}
@media (min-width: 1200px){
    .feed-template .load-more-center .load-more{
        border-bottom: 3px solid #f6f6f7;
        font-size: 18px;
        width: 130px;
    }
}
@media (min-width: 768px){
    .feed-template hr{
        width: 94px;
    }
}
@media (min-width: 1200px){
    .feed-template hr{
        width: 120px;
    }
}
@-webkit-keyframes fadeIn{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0.3;
    }
    80%{
        opacity: 0.7;
    }
    100%{
        opacity: 1;
    }
}
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0.3;
    }
    80%{
        opacity: 0.7;
    }
    100%{
        opacity: 1;
    }
}
.feed-template.forceHorizontal{
    border: none;
    margin: 15px 0;
    padding: 0;
    overflow-y: hidden;
}
.feed-template.forceHorizontal .trending-title{
    letter-spacing: 3.5;
    margin: 9px 0 12px;
    max-height: 29px;
    text-align: center;
    text-transform: uppercase;
}
.feed-template.forceHorizontal .feed-hori-container{
    margin-bottom: -35px;
    padding-bottom: 35px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-transition: left 250ms;
            transition: left 250ms;
    left: 0;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
}
.feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link{
    width: 65%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 65%;
        -ms-flex: 0 0 65%;
            flex: 0 0 65%;
    max-width: 65%;
    margin: 0;
    padding: 2%;
    display: inline-block;
}
.feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link .trending-card{
    -webkit-animation-name: none;
            animation-name: none;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}
.feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link .trending-card img{
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 100%;
}
.feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link .trending-card .filter{
    background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.85));
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.85));
    color: white;
    font-size: 10px;
    height: 100%;
    letter-spacing: 1.5px;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 100%;
}
.feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay{
    display: none;
}
.feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link .trending-card.genre-card{
    padding-bottom: 66.66%;
}
.feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link:first-child{
    margin-left: 2%;
}
.feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link:last-child{
    margin-right: 2%;
}
.feed-template.forceHorizontal .feed-hori-container .feed-item-artist .feed-item-artist-list-item{
    display: none;
}
.feed-template.forceHorizontal .feed-hori-container .feed-item-artist .feed-item-artist-circle{
    display: block;
}
.feed-template.forceHorizontal .carousel-navigation{
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
}
.feed-template.forceHorizontal .carousel-navigation div{}
.feed-template.forceHorizontal .carousel-navigation div.container{
    width: 13%;
    height: 95%;
    padding: 0;
    padding-top: 2%;
    /* need this to be padding and not margin for FF, doesn't
                handle vertical padding/margin well on flex items with no explicit height */
    opacity: 1;
}
.feed-template.forceHorizontal .carousel-navigation div.next-container{
    float: right;
    background: -webkit-linear-gradient(left, rgba(19,19,19,0), rgba(19,19,19,1));
    background: linear-gradient(to right, rgba(19,19,19,0), rgba(19,19,19,1));
}
.feed-template.forceHorizontal .carousel-navigation div.prev-container{
    float: left;
    background: -webkit-linear-gradient(right, rgba(19,19,19,0), rgba(19,19,19,1));
    background: linear-gradient(to left, rgba(19,19,19,0), rgba(19,19,19,1));
}
.feed-template.forceHorizontal .carousel-navigation div.prev{
    height: 100%;
    width: 90%;
    left: 0;
    background-size: 34%;
}
.feed-template.forceHorizontal .carousel-navigation div.next{
    height: 100%;
    width: 90%;
    right: 0;
    background-size: 34%;
}
.feed-template.forceHorizontal .trending-title{
    display: none;
}
.feed-template.forceHorizontal .feed-title{}
@media (min-width: 768px){
    .feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link{
        padding: 1%;
    }
    .feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link:first-child{
        margin-left: 1%;
    }
    .feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link:last-child{
        margin-right: 1%;
    }
}
@media (min-width: 1200px){
    .feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link{
        padding: 0.7%;
    }
    .feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link:first-child{
        margin-left: 0.7%;
    }
    .feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link:last-child{
        margin-right: 0.7%;
    }
}
@media (min-width: 768px){
    .feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link{
        width: 38%;
        max-width: 38%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 38%;
            -ms-flex: 0 0 38%;
                flex: 0 0 38%;
    }
}
@media (min-width: 1200px){
    .feed-template.forceHorizontal .feed-hori-container .feed-card-outer-link{
        width: 22%;
        max-width: 22%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 22%;
            -ms-flex: 0 0 22%;
                flex: 0 0 22%;
    }
}
@media (min-width: 768px){
    .feed-template.forceHorizontal .carousel-navigation div.container{
        width: 8%;
        padding-top: 1%;
    }
}
@media (min-width: 1200px){
    .feed-template.forceHorizontal .carousel-navigation div.container{
        width: 5%;
        padding-top: 0.7%;
    }
}
@media (min-width: 768px){
    .feed-template.forceHorizontal .feed-title{
        display: block;
    }
}
.feed-template.forceVertical{
    padding: 0 15px 10px;
}
.feed-template.forceVertical .feed-hori-container{
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card{
    -webkit-animation-name: none;
            animation-name: none;
    padding: 10px 0;
    position: relative;
    height: 67px;
    margin: 5px 0;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .image-hover{
    background-color: inherit;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card img{
    display: inline-block;
    height: 67px;
    width: 118px;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay-container .like-info{
    /*for like button on sm/md line items */
    display: block;
    position: absolute;
    top: 12px;
    padding: 20px;
    right: -19px;
    z-index: 4;
    cursor: pointer;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay-container .like-info .like{
    margin-right: -10px;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay-container .like-info img{
    position: relative;
    width: 20px;
    height: 20px;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay-container .like-info img.hidden{
    width: 0;
    height: 0;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay{}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info{
    max-width: 45%;
    width: auto;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .artist-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .video-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .views{
    display: none;
}
.feed-template.forceVertical .feed-hori-container .feed-card-outer-link.feed-item-artist-list-item .trending-card .video-info-overlay-container .like-info{
    /*for like button on sm/md line items */
    top: 6px;
}
@media (min-width: 768px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link{
        width: auto;
        margin: 0;
        display: block;
    }
}
@media (min-width: 1200px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link{
        width: 23%;
        max-width: 23%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 23%;
            -ms-flex: 0 0 23%;
                flex: 0 0 23%;
        margin: 12px 1%;
        /*FF squashes top/bottom % margins for flex rows*/
    }
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link:first-child{
        margin-left: 1.0%;
    }
}
@media(min-width: 768px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card{
        overflow: visible;
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 5px 0;
        height: 67px;
    }
}
@media(min-width: 1200px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card{
        overflow: hidden;
        width: 100%;
        height: 0;
        display: block;
        padding-top: 0;
        padding-bottom: 56.25%;
        margin: 0;
    }
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card:hover .image-container .image-hover.dark{
        background-color: rgba(0,0,0,0.35);
    }
}
@media (min-width: 768px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card img{
        position: static;
        height: 67px;
        width: 118px;
    }
}
@media (min-width: 1200px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card img{
        width: 100%;
        height: 100%;
        position: absolute;
    }
}
@media (min-width: 768px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay-container .like-info{
        top: 18%;
    }
}
@media (min-width: 1200px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay-container .like-info{
        display: block;
        position: static;
        top: auto;
        padding: 0;
        right: auto;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
        max-width: 100%;
    }
}
@media (min-width: 768px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay{
        text-align: left;
        width: 100%;
        height: 100%;
        display: block;
        max-width: 100%;
        background-image: none;
        position: absolute;
    }
}
@media (min-width: 1200px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay{
        text-align: center;
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), #000000);
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), #000000);
    }
}
@media (min-width: 768px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .artist-name{
        padding: 1px 0;
    }
}
@media (min-width: 768px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .video-name{
        cursor: pointer;
        padding: 0;
        line-height: 12px;
        max-height: 24px;
    }
}
@media (min-width: 1200px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .video-name{
        cursor: pointer;
        padding: 1px 0;
        line-height: 19px;
        max-height: 38px;
    }
}
@media (min-width: 768px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info{
        color: #9B9B9B;
        display: inline-block;
        left: 132px;
        letter-spacing: 1.65;
        position: absolute;
        top: 40%;
        max-width: 70%;
    }
}
@media (min-width: 1200px){
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info{
        left: 0;
        height: auto;
        width: 100%;
        position: absolute;
        bottom: 10px;
        max-height: none;
        max-width: none;
        top: auto;
    }
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .artist-name{
        width: 100%;
    }
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .name-views-container{
        width: 100%;
    }
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .video-name, .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .views{
        display: inline-block;
    }
    .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info .views{
        display: none;
    }
}
.horizontal-feed .feed-title{
    letter-spacing: 3.5;
    margin: 9px 0 12px 4%;
    max-height: 29px;
    text-transform: uppercase;
}
.horizontal-feed .modal-container{
    position: static;
}
.horizontal-feed .like div .modal{
    bottom: auto;
    position: absolute;
    top: 0;
    /*right: -150px;*/
    width: 150px;
}
@media (min-width: 768px){
    .horizontal-feed .feed-title{
        margin-left: 2%;
    }
}
@media (min-width: 1200px){
    .horizontal-feed .feed-title{
        margin-left: 1.4%;
    }
}
.horizontal-feed .feed-template{
    background-color: rgba(0,0,0,0);
}
.horizontal-feed .feed-title{
    position: relative;
    text-align: left;
    margin-left: 26px;
}
@media(min-width: 768px){
    .horizontal-feed .like div .modal{
        width: 215px;
        /*right: -215px;*/
    }
}
#artistTemplate{
    font-family: "Avenir Next",sans-serif;
    position: relative;
}
#artistTemplate .video-preview .title, #artistTemplate .video-preview .subtitle, #artistTemplate .video-preview .description{
    display: none;
}
#artistTemplate .video-preview .title{
    top: 63%;
}
#artistTemplate .video-preview .subtitle{
    top: 55%;
}
#artistTemplate .video-preview .playIconContainer{
    display: none;
}
#artistTemplate .avatar-container{
    position: relative;
    z-index: 15;
}
#artistTemplate .avatar-container .artist-avatar{
    margin-top: -150px;
    text-align: center;
}
#artistTemplate .avatar-container .artist-avatar .avatar-image{
    border-radius: 50%;
    height: 98px;
    transition: height 0.4s;
    -webkit-transition: height 0.4s;
    /* Safari */
}
#artistTemplate .avatar-container .artist-avatar .avatar-image.img-stuck{}
#artistTemplate .avatar-container .artist-avatar .artist-name{
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 3px;
    max-height: 53px;
    margin-top: 20px;
    overflow: hidden;
    text-transform: uppercase;
}
#artistTemplate .avatar-container .artist-avatar .like{
    float: none;
    position: relative;
}
#artistTemplate .avatar-container .artist-avatar .like .modal{
    width: 200px;
    right: -40px;
    bottom: 0;
}
#artistTemplate .avatar-container .artist-avatar .like .like-label{
    display: none;
}
#artistTemplate .avatar-container .artist-avatar .like .like-icon-empty{}
#artistTemplate .avatar-container .artist-avatar .like .heart-container .like-icon-filled{
    height: 21px;
    margin: -1px -34px 0px 46px;
    width: 22px;
    position: absolute;
}
#artistTemplate .avatar-container .artist-avatar .like .heart-container .like-icon-filled.hidden{
    height: 0;
    left: -28px;
    top: 14px;
    width: 0;
}
#artistTemplate .avatar-container .artist-avatar .like .likes{
    color: white;
    background: none;
    padding: 0;
}
#artistTemplate .avatar-container .artist-avatar .like .like-count{
    font-size: 12px;
    letter-spacing: 1.5;
    position: relative;
}
#artistTemplate .avatar-container .artist-avatar .like .likes-label{
    font-weight: initial;
    text-transform: uppercase;
}
#artistTemplate .avatar-container .artist-avatar.avatar-stuck{}
#artistTemplate .filter-container{
    letter-spacing: 2.1px;
    margin: 13px 0;
    opacity: 0.31;
    text-align: center;
    text-transform: uppercase;
}
#artistTemplate .filter-container .filter-label{
    display: inline-block;
}
#artistTemplate .filter-container .videos-filter{
    background-color: #131313;
    background-image: url("/nucleus/img/down.ebed642b.svg");
    background-position: right;
    background-repeat: no-repeat;
    border-color: #131313;
    border-bottom: 1px white solid;
    color: white;
    display: inline-block;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    letter-spacing: inherit;
    margin-left: 6px;
    position: relative;
    outline-width: 0px;
    -webkit-appearance: none;
    width: 190px;
}
#artistTemplate .mobile-desktop-different{
    position: relative;
}
#artistTemplate .filter-modal-wrapper{
    position: relative;
    top: 28px;
    width: 212px;
    margin: 0 auto 28px;
}
#artistTemplate .filter-modal-wrapper .modal{
    letter-spacing: 2px;
    right: initial;
    padding: 0;
    text-align: center;
    top: 45px;
    width: 250px;
}
#artistTemplate .filter-modal-wrapper .modal .filter-option{
    cursor: pointer;
    padding: 10px 0;
}
#artistTemplate .filter-modal-wrapper .modal .filter-option:hover{
    background-color: #1B1B1B;
}
#artistTemplate .filter-modal-wrapper .modal .filter-modal{
    background: #000000;
    border-radius: 4px;
}
#artistTemplate .filter-modal-wrapper .modal .filter-option:first-child{
    border-radius: 4px 4px 0 0;
}
#artistTemplate .filter-modal-wrapper .modal .filter-option:last-child{
    border-radius: 0 0 4px 4px;
}
#artistTemplate .filter-modal-wrapper .filter-trigger{
    cursor: pointer;
    height: 40px;
    border-bottom: 1px solid white;
    background-color: #131313;
    background-image: url("/nucleus/img/down.ebed642b.svg");
    background-position: 246px 22px;
    background-repeat: no-repeat;
    color: white;
    display: inline-block;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    letter-spacing: 2.1px;
    opacity: 0.31;
    position: relative;
    padding-top: 18px;
    outline-width: 0px;
    width: 260px;
}
#artistTemplate #artist-tabs{}
#artistTemplate .feed-template{
    background-color: #000;
    border-top: none;
    min-height: 80vh;
}
#artistTemplate .feed-template .video-results-title{
    display: none;
}
#artistTemplate .feed-template .feed-card-outer-link{}
#artistTemplate .feed-template .load-more-center{}
#artistTemplate .feed-template .artist-video-card{
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    margin-bottom: 30px;
}
#artistTemplate .feed-template .artist-video-card .image-container{
    height: auto;
    position: relative;
    z-index: 0;
}
#artistTemplate .feed-template .artist-video-card .image-hover{
    height: 100%;
    position: absolute;
    width: 100%;
}
#artistTemplate .feed-template .artist-video-card .artist-card-img{
    width: 100%;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom{
    background-color: #222225;
    font-size: 14px;
    font-weight: 500;
    height: 100px;
    position: relative;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .top-gray{
    border-bottom: 1px solid rgba(255,255,255,0.3);
    height: 50px;
    margin: 0 auto;
    position: relative;
    width: 93%;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .top-gray .modal{
    width: 180px;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .top-gray .card-title{
    display: inline-block;
    max-height: 41px;
    overflow: hidden;
    position: relative;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    top: 50%;
    -webkit-transform: translateY(-50%);
    width: 80%;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .top-gray .modal-trigger-container{
    position: relative;
    right: -8px;
    top: -15px;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .top-gray .modal-trigger-container .heart-container{
    position: relative;
    right: -2px;
    top: -7px;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .top-gray .modal-trigger-container .like-label{
    display: none;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .top-gray .like{
    position: absolute;
    margin: 0;
    text-align: right;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 20%;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .top-gray .like .heart-container .like-icon-filled.hidden{
    left: -37px;
    width: 21px;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .lower-gray{
    margin: 0 auto;
    position: relative;
    width: 93%;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .lower-gray .share{
    margin: 0;
    position: absolute;
    right: 0;
    top: 12px;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .lower-gray .share .share-icon + span{
    margin-right: 0;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .lower-gray .share .modal{
    width: 250px;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .lower-gray .likes-number{
    display: inline-block;
    font-size: 12px;
    margin-top: 12px;
    letter-spacing: 1.5px;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .lower-gray .likes-number .heart-container{
    display: none;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .lower-gray .likes-number .likes{
    margin: 0;
    padding: 0;
    background: none;
    color: #f6f6f7;
    border: none;
}
#artistTemplate .feed-template .artist-video-card .gray-bottom .lower-gray .likes-label{
    margin-left: 4px;
}
#artistTemplate .feed-template .artist-video-card .card-date{
    font-size: 9px;
    letter-spacing: 1.5;
    margin-bottom: 8px;
    text-align: right;
    text-transform: uppercase;
}
#artistTemplate .feed-template .artist-video-card:hover .image-hover{
    background-color: rgba(0,0,0,0.35);
}
@media (min-width: 768px){
    #artistTemplate{
        margin-top: -50px;
    }
}
@media (min-width: 1200px){
    #artistTemplate .video-preview{
        height: 80vh;
        padding-bottom: 0;
    }
}
@media(min-width: 768px){
    #artistTemplate .video-preview .title, #artistTemplate .video-preview .subtitle, #artistTemplate .video-preview .description{
        display: inherit;
    }
}
@media(min-width: 768px){
    #artistTemplate .video-preview .title{
        top: 60%;
    }
}
@media (min-width: 768px){
    #artistTemplate .video-preview .playIconContainer{
        display: initial;
    }
}
@media (min-width: 768px){
    #artistTemplate .avatar-container{
        display: inline-block;
        margin-top: -64px;
        padding-left: 22px;
        vertical-align: top;
        width: 26%;
    }
}
@media (min-width: 1450px){
    #artistTemplate .avatar-container{
        margin-top: -120px;
        width: 40%;
    }
}
@media (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar{
        margin-top: 0;
    }
}
@media (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck{
        left: -3%;
        padding: 10px;
        position: fixed;
        top: 85px;
        z-index: 2;
    }
    .banner-open #artistTemplate .avatar-container .artist-avatar.avatar-stuck{
        top: 157px;
    }
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .artist-name{
        position: relative;
        overflow: hidden;
        max-height: 34px;
        width: 110px;
    }
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like{
        position: relative;
        top: -90px;
        left: 108px;
    }
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .like-count{
        left: 0;
        letter-spacing: 1.5;
        top: 0;
    }
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .heart-container{
        display: inline-block;
        margin: 5px -20px 0 10px;
    }
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .heart-container .like-icon-filled{
        height: 15px;
        margin: 0px -34px 0px 44px;
    }
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .heart-container .like-icon-filled.hidden{
        left: -27px;
        top: 4px;
    }
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .heart-container .like-icon-empty{}
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .modal{
        font-size: 14px;
    }
}
@media (min-width: 1200px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck{
        left: 3%;
    }
}
@media (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck{
        left: 16%;
        text-align: left;
        top: 84px;
    }
}
@media (min-width: 768px) and (min-width: 1450px){
    .banner-open #artistTemplate .avatar-container .artist-avatar.avatar-stuck{
        top: 122px;
    }
}
@media (min-width: 768px) and (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .artist-name{
        font-size: 12px;
        left: 99px;
        top: -69px;
    }
}
@media (min-width: 768px) and (min-width: 1200px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .artist-name{
        left: 105px;
        width: 135px;
    }
}
@media (min-width: 768px) and (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .artist-name{
        font-size: 18px;
        left: 93px;
        max-height: 50px;
        padding-top: 0;
        text-align: center;
        top: -78px;
        width: 200px;
    }
}
@media (min-width: 768px) and (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like{
        font-size: 10px;
        left: 82px;
        top: -74px;
    }
}
@media (min-width: 768px) and (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like{
        left: 90px;
    }
}
@media (min-width: 768px) and (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like{
        font-size: 14px;
        top: -83px;
    }
}
@media (min-width: 768px) and (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .like-count{
        left: 10px;
    }
}
@media (min-width: 768px) and (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .heart-container{
        margin: 5px -10px 0 10px;
    }
}
@media (min-width: 768px) and (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .heart-container .like-icon-filled{
        height: 21px;
        margin: 0px -34px 0px 41px;
    }
}
@media (min-width: 768px) and (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .heart-container .like-icon-filled.hidden{
        left: -21px;
    }
}
@media (min-width: 768px) and (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .heart-container .like-icon-empty{
        height: 16px;
    }
}
@media (min-width: 768px) and (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar.avatar-stuck .like .heart-container .like-icon-empty{
        height: 22px;
    }
}
@media (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar .avatar-image{
        height: 115px;
    }
}
@media (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar .avatar-image{
        height: 220px;
    }
}
@media (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar .avatar-image.img-stuck{
        height: 60px;
    }
}
@media (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar .avatar-image.img-stuck{
        height: 82px;
    }
}
@media(md){
    #artistTemplate .avatar-container .artist-avatar .like .modal{
        left: -165px;
        width: inherit;
        right: inherit;
        bottom: inherit;
    }
}
@media (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar .like .like-icon-empty{
        height: 20px;
    }
}
@media (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar .like .like-icon-empty{
        height: 31px;
    }
}
@media (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar .like .heart-container .like-icon-filled{
        height: 31px;
        width: 34px;
    }
}
@media (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar .like .heart-container .like-icon-filled.hidden{
        left: -26px;
        top: 15px;
    }
}
@media (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar .like .heart-container .like-icon-filled.hidden{
        left: -20px;
        top: 22px;
    }
}
@media (min-width: 768px){
    #artistTemplate .avatar-container .artist-avatar .like .like-count{
        top: -3px;
    }
}
@media (min-width: 1450px){
    #artistTemplate .avatar-container .artist-avatar .like .like-count{
        font-size: 16px;
        left: 8px;
        top: -9px;
    }
}
@media (min-width: 768px){
    #artistTemplate .filter-container{
        margin-top: 42px;
        text-align: left;
    }
}
@media (min-width: 1450px){
    #artistTemplate .filter-container{
        margin-top: 54px;
    }
}
@media (min-width: 768px){
    #artistTemplate .filter-container .filter-label{
        text-align: initial;
    }
}
@media(min-width: 768px){
    #artistTemplate .filter-modal-wrapper{
        width: auto;
    }
}
@media(min-width: 768px){
    #artistTemplate .filter-modal-wrapper .modal{
        top: 5px;
    }
}
@media (min-width: 768px){
    #artistTemplate #artist-tabs{
        display: inline-block;
        width: 74%;
    }
}
@media (min-width: 1450px){
    #artistTemplate #artist-tabs{
        width: 60%;
    }
}
@media (min-width: 768px){
    #artistTemplate .feed-template .feed-card-outer-link{
        display: block;
        margin: 0;
        width: auto;
    }
}
@media (min-width: 768px) and (orientation: landscape){
    #artistTemplate .feed-template .load-more-center{
        cursor: pointer;
        margin: 0;
        text-align: center;
        width: 488px;
    }
}
@media (min-width: 1450px){
    #artistTemplate .feed-template .load-more-center{
        width: 671px;
    }
}
@media (min-width: 768px){
    #artistTemplate .feed-template .artist-video-card{
        margin-bottom: 40px;
        width: 486px;
    }
}
@media (min-width: 1450px){
    #artistTemplate .feed-template .artist-video-card{
        margin-bottom: 50px;
        width: 671px;
    }
}
@media (min-width: 768px){
    #artistTemplate .feed-template .artist-video-card .gray-bottom{
        font-size: 16px;
    }
}
@media (min-width: 768px){
    #artistTemplate .feed-template .artist-video-card .gray-bottom .top-gray .modal{
        width: 200px;
    }
}
@media (min-width: 768px){
    #artistTemplate .feed-template .artist-video-card .gray-bottom .lower-gray .likes-number{
        font-size: 14px;
    }
}
@media (min-width: 768px){
    #artistTemplate .feed-template .artist-video-card .card-date{
        font-size: 12px;
        letter-spacing: 1.9px;
    }
}
.video-preview{
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    pointer-events: none;
    position: relative;
}
.video-preview video{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 10;
}
/*Hide native play button*/
.video-preview video::-webkit-media-controls-start-playback-button{
    display: none;
}
/*need to make these display none on artist page on mobile*/
.video-preview .title, .video-preview .subtitle, .video-preview .description{
    display: initial;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    z-index: 12;
}
.video-preview .subtitle{
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 7px;
    top: 53%;
}
.video-preview .title{
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    top: 60%;
    overflow: hidden;
}
.video-preview .description{
    display: none;
    font-size: 14px;
    font-weight: 400;
    width: 450px;
    left: calc(50% - 225px);
    letter-spacing: 1px;
    text-transform: none;
    top: 67%;
}
.video-preview a .subtitle, .video-preview a .title, .video-preview a .description{
    color: #fff;
}
.video-preview .overlay{
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4)60%, #000);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4)60%, #000);
    height: 100%;
    opacity: 1;
    position: absolute;
    width: 100%;
    z-index: 11;
}
.video-preview .videoPoster{
    background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
    pointer-events: none;
}
/*hide on artist page for mobile*/
.video-preview .videoPoster .playIconContainer{
    width: 35px;
}
@media(min-width: 768px){
    .video-preview{
        pointer-events: initial;
    }
}
@media(min-width: 768px){
    .video-preview .title{
        font-size: 26px;
        line-height: 26px;
        top: 55%;
    }
}
@media(min-width: 1200px){
    .video-preview .title{
        font-size: 32px;
        line-height: 32px;
    }
}
@media(min-width: 768px){
    .video-preview .description{
        display: initial;
    }
}
@media(min-width: 1200px){
    .video-preview .description{
        top: 62%;
    }
}
@media(min-width: 768px){
    .video-preview .videoPoster{
        pointer-events: initial;
    }
}
#video-preview-null{
    position: relative;
    height: 200px;
}
#error-message{
    background-image: url('//img.cache.vevo.com/Content/VevoImages/video/default.jpg');
    background-size: cover;
    color: #FFFFFF;
    padding: 0;
    padding-bottom: 41.25%;
    padding-top: 15%;
    text-align: center;
    width: 100%;
}
#error-message h2{
    font-family: "Avenir Next",sans-serif;
    font-size: 18px;
    margin: 50px 50px 10px 50px;
}
#error-message p{
    font-family: "Avenir Next",sans-serif;
    font-size: 14px;
    margin: 10px 50px 50px 50px;
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    #error-message{
        height: 100%;
    }
}
#installBanner{
    background-image: url('/nucleus/img/Mobile-Banner-7K.94a4a6e8.png');
    background-size: cover;
    font-family: "Avenir Next",sans-serif;
    height: 75px;
    position: relative;
    width: 100%;
    text-align: center;
}
#installBanner .text{
    text-align: center;
    padding-top: 13px;
    font-size: 12px;
    position: relative;
}
#installBanner .filter{
    width: 100%;
    height: 75px;
    position: absolute;
    background-color: rgba(0,0,0,.4);
}
#installBanner .getApp{
    border: 1px white solid;
    font-size: 9px;
    text-align: center;
    letter-spacing: 1.5px;
    line-height: 25px;
    display: inline-block;
    padding: 0 8px;
    margin: 0 auto;
    margin-top: 8px;
    position: relative;
}
#installBanner .getApp a{
    color: white;
    font-weight: bold;
    text-decoration: none;
}
#installBanner .close{
    position: absolute;
    top: 7px;
    right: 10px;
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    .watch-page #installBanner{
        display: none;
    }
}
#installBanner.gone{
    display: none;
}
#cookie-notice-banner{
    background-color: white;
    color: black;
    font-family: "Avenir Next",sans-serif;
    font-size: 12;
    letter-spacing: 1.5px;
    padding: 5px;
    text-align: center;
}
#cookie-notice-banner a{
    color: black;
    font-weight: bold;
}
#cookie-notice-banner .close{
    position: absolute;
    right: 10px;
    top: 7px;
}
#cookie-notice-banner .cookie-notice-information, #cookie-notice-banner .cookie-notice-agreement{
    display: block;
    width: 90%;
}
#search{
    margin-top: 20px;
}
#search input{
    background-color: rgba(255, 255, 255, .1);
    background-image: url("/nucleus/img/searchBarImage.svg");
    background-position: 12px;
    background-repeat: no-repeat;
    border: none;
    border-radius: 5px;
    color: #FFF;
    display: inline-block;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    height: 37px;
    left: 5%;
    letter-spacing: 1.52;
    margin: 20px auto 0;
    position: relative;
    text-indent: 36px;
    width: 90%;
}
#search .clear-search{
    display: none;
    position: relative;
    padding: 8px;
    right: 20px;
    top: 13px;
}
#search .visible{
    display: initial;
}
#search textarea:focus, #search input:focus{
    outline: none;
}
#search .feed-template{
    min-height: 80vh;
}
#search .feed-template .video-results{}
@media (min-width: 768px){
    #search{
        margin: 0 auto;
        width: 94%;
    }
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    #search{
        margin: 20px auto 0;
        width: 90%;
    }
    #search input{
        margin: 20px auto;
    }
}
@media (min-width: 768px){
    #search input{
        background-position: 15px;
        background-size: 24px;
        font-size: 14px;
        height: 42px;
        text-indent: 46px;
    }
}
@media (min-width: 1200px){
    #search input{
        background-position: 18px;
        background-size: 30px;
        font-size: 18px;
        height: 56px;
        left: 0;
        text-indent: 60px;
        width: 100%;
    }
}
@media (min-width: 768px){
    #search .clear-search{
        height: 17px;
        right: 6px;
        top: 12px;
    }
}
@media (min-width: 1200px){
    #search .clear-search{
        height: 21px;
        position: absolute;
        right: 4%;
        top: 29px;
    }
}
@media(min-width: 1200px){
    #search .feed-template .video-results{
        text-align: center;
    }
    #search .feed-template .video-results .feed-card-outer-link{
        text-align: left;
    }
}
#login{
    background: url("/nucleus/img/vevo_crowd_dark_med.d9c635f6.jpg");
    background-size: cover;
    background-position: center, center;
    color: #9b9b9b;
    font-family: "Avenir Next",sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    min-height: 100vh;
    position: relative;
    width: 100%;
}
#login .content-container{
    padding-top: 20vh;
    padding-bottom: 30px;
    width: 100%;
}
#login .agreement{
    font-size: 10px;
    margin: 50px auto;
    max-width: 300px;
    text-align: center;
    text-transform: none;
    width: 80%;
}
#login .main-button{
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 14px;
    letter-spacing: 2.1px;
    margin: 0 auto;
    max-width: 300px;
    padding: 20px 0;
    text-align: center;
    text-transform: uppercase;
    width: 80%;
}
#login .error-message{
    color: #FF0000;
    display: none;
    font-size: 10px;
    text-align: center;
}
#login .form-header{
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
}
#login .message-container{
    max-width: 300px;
    margin: 0 auto;
    margin-top: 12px;
    min-height: 35px;
    text-align: center;
    font-size: 0.7em;
}
#login .message-container .email{
    color: #fff;
    margin: 22px 0;
    font-size: 1.2em;
}
#login a{
    color: #9b9b9b;
    text-transform: none;
}
#login input, #login select{
    background: transparent;
    border: none;
    border-bottom: 1px solid #707070;
    color: #fff;
    display: block;
    font-size: 1em;
    font-family: "Avenir Next", sans-serif;
    padding: 10px;
    width: 100%;
}
#login input:focus, #login select:focus{
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
}
#login input.touched:valid +.verify:after, #login select.touched:valid +.verify:after{
    content: '✓';
    color: #FFFFFF;
}
#login input.touched:invalid +.verify:after, #login select.touched:invalid +.verify:after{
    content: '✗';
    color: #FF0000;
}
#login .valid .verify:after{
    content: '✓';
    color: #FFFFFF;
}
#login select option{
    text-transform: uppercase;
}
#login form{
    margin: 0 auto;
    max-width: 300px;
    text-align: center;
}
#login form > div, #login form > input{
    margin: 15px auto;
    max-width: 300px;
}
#login form > div .verify, #login form > input .verify{
    background: transparent;
    border: none;
    font-size: 1em;
    float: right;
    height: 1em;
    margin-top: -30px;
    margin-right: -20px;
    width: 1em;
}
#login input::-webkit-input-placeholder{
    color: #9b9b9b;
    letter-spacing: 1.5;
    font-size: 0.8em;
    text-transform: uppercase;
}
#login input::-moz-placeholder{
    color: #9b9b9b;
    letter-spacing: 1.5;
    font-size: 0.8em;
    text-transform: uppercase;
}
#login input:-moz-placeholder{
    /* Older versions of Firefox */
    color: #9b9b9b;
    letter-spacing: 1.5;
    font-size: 0.8em;
    text-transform: uppercase;
}
#login input:-ms-input-placeholder{
    color: #9b9b9b;
    letter-spacing: 1.5;
    font-size: 0.69em;
    text-transform: uppercase;
}
/* MS Edge needs TWO colons... */
#login input::-ms-input-placeholder{
    color: #9b9b9b;
    letter-spacing: 1.5;
    font-size: 0.69em;
    text-transform: uppercase;
}
#login.Landing .description{
    display: block;
    width: 80%;
    max-width: 250px;
    margin: 0 auto;
    font-size: 10px;
    text-align: center;
}
#login.Landing .logo{
    height: 34px;
    margin: 0 auto;
    margin-bottom: 60px;
    width: 133px;
    display: block;
    top: 75px;
}
#login.Landing .login-buttons{
    text-align: center;
}
#login.Landing .login-buttons div{
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    background-size: 33px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    display: inline-block;
    height: 72px;
    margin: 30px 26px 30px 0px;
    width: 72px;
}
#login.Landing .login-buttons div.email{
    background-image: url('/nucleus/img/email.646eb861.svg');
}
#login.Landing .login-buttons div.facebook{
    background-image: url('/nucleus/img/facebook.fd307d9f.svg');
    background-size: 17px;
}
#login.Landing .login-buttons div.google{
    background-image: url('/nucleus/img/google.3dab13f9.svg');
    margin-right: 0;
}
#login.SignUp .form-header{
    padding-bottom: 0;
}
#login.SignUp .message{
    color: #f00;
}
#login.SignUp select{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
}
#login.SignUp input[type=date]{
    min-height: 45px;
}
#login.SignUp .datepicker__input, #login.SignUp .datepicker__input:focus{
    box-shadow: none;
}
#login.SignIn .noAccount{
    margin: 50px auto;
    text-align: center;
    font-size: 10px;
    letter-spacing: 1.5px;
}
#login.SignIn input{
    padding-right: 26px;
}
#login.SignIn input:-webkit-autofill + .main-button{
    border-color: #000000 !important;
    right: 5px;
}
#login.SignIn input:-webkit-autofill + .main-button::before{
    border-color: #000000 !important;
}
#login.SignIn .main-button{
    background: transparent;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    border: none;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    height: 15px;
    width: 15px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    float: right;
    top: -42px;
    padding: 0;
    position: relative;
}
#login.SignIn .main-button::before{
    content: "";
    border-top: 1px solid #FFFFFF;
    display: block;
    margin-top: 1px;
    margin-left: -3px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    width: 21px;
}
#login.SignIn .password-input{}
#login.SignIn .error-password .error-message{
    display: block;
    color: #ff0000;
}
#login.SignIn .error-password .password-input{
    border-bottom-color: #FF0000;
    -webkit-animation: shake 0.5s;
            animation: shake 0.5s;
}
#login.Forgot .sub-message{
    color: white;
    margin-top: 12px;
    text-transform: none;
}
#login.Forgot .nav-buttons{
    font-size: 10px;
    text-align: center;
}
#login.Forgot .main-button{
    margin-top: 60px;
}
#login.Settings .main-button{
    margin: 60px auto;
}
#login.Settings a{
    text-decoration: none;
}
#login.Settings .message{
    color: #fff;
}
#login.Settings .message.error{
    color: #FF0000;
    display: block;
}
#login.Reset .message{
    display: none;
}
#login.Reset .message.confirmError{
    color: #FF0000;
    display: block;
}
#login.Reset .message.success{
    display: block;
}
#login.Reset .nav-buttons a{
    font-size: 0.8em;
}
#login.Reset .main-button{
    margin-top: 50px;
}
@media (min-width: 1024px){
    #login{
        background: url("/nucleus/img/vevo_crowd_dark_large.7b27f028.jpg");
        background-size: cover;
        background-position: center, center;
    }
}
@media (max-width: 325px){
    #login form{
        max-width: 275px;
    }
}
@-webkit-keyframes shake{
    10%, 90%{
        -webkit-transform: translate3d(-1px, 0, 0);
                transform: translate3d(-1px, 0, 0);
    }
    20%, 80%{
        -webkit-transform: translate3d(2px, 0, 0);
                transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70%{
        -webkit-transform: translate3d(-4px, 0, 0);
                transform: translate3d(-4px, 0, 0);
    }
    40%, 60%{
        -webkit-transform: translate3d(4px, 0, 0);
                transform: translate3d(4px, 0, 0);
    }
    100%{
        -webkit-transform: none;
                transform: none;
    }
}
@keyframes shake{
    10%, 90%{
        -webkit-transform: translate3d(-1px, 0, 0);
                transform: translate3d(-1px, 0, 0);
    }
    20%, 80%{
        -webkit-transform: translate3d(2px, 0, 0);
                transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70%{
        -webkit-transform: translate3d(-4px, 0, 0);
                transform: translate3d(-4px, 0, 0);
    }
    40%, 60%{
        -webkit-transform: translate3d(4px, 0, 0);
                transform: translate3d(4px, 0, 0);
    }
    100%{
        -webkit-transform: none;
                transform: none;
    }
}
::-webkit-inner-spin-button{
    display: none;
}
#home{
    background-color: #000000;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    overflow: hidden;
    position: relative;
}
#home a:hover, #home a:visited, #home a:link, #home a:active{
    text-decoration: none;
}
.banner-open #home{
    margin-top: 75px;
}
#home .down-arrow{
    left: 10px;
    position: relative;
}
#home .close-menu{
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
#home .genre-select{
    background-color: #131313;
    background-image: url("/nucleus/img/down.5db73262.png");
    background-position: right;
    background-repeat: no-repeat;
    border-color: #131313;
    border-radius: 4px;
    color: white;
    display: block;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    letter-spacing: 3.5;
    margin: 10 auto 0;
    position: relative;
    outline-width: 0px;
    text-transform: uppercase;
    -webkit-appearance: none;
    width: 217px;
}
#home .genre-select .genre{
    font-size: 15px;
    letter-spacing: 1.5;
    padding: 7px 0;
    text-align: center;
}
#home .genre-select .genre:first-child{
    border-radius: 4px;
    padding-top: 15px;
}
#home .genre-select .genre:last-child{
    padding-bottom: 15px;
}
#home .genre-select .active{
    background-color: #3C3C40;
}
#home .horizontal-feed{
    padding: 0 0 20px;
}
#home .feed-container{}
@media(min-width: 1200px){
    #home .feed-container{
        margin-top: -140px;
    }
}
@media(min-width: 1450px){
    #home .feed-container{
        margin-top: -200px;
    }
}
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0.3;
    }
    80%{
        opacity: 0.7;
    }
    100%{
        opacity: 1;
    }
}
.modal{
    padding: 25px;
    background: #FFFFFF;
    border-radius: 4px;
    position: absolute;
    bottom: 60%;
    right: 0;
    z-index: 12;
    padding: 15px 25px;
}
.modal a{
    text-decoration: none;
    font-weight: 600;
    color: #131313;
}
.modal a:hover, .modal a:active{
    color: #CDCDCD;
}
.modal-container{
    position: relative;
}
.yes-no-modal{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .7);
    z-index: 5;
}
.yes-no-modal .modal{
    top: 40%;
    left: 50%;
    width: 340px;
    max-width: 100%;
    max-height: 90%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    bottom: auto;
    border-radius: 8px;
    background-color: #131313;
    font-family: "AvenirNext-Medium",sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
.yes-no-modal .modal p{
    width: 100%;
    position: relative;
    text-align: center;
    margin: 24px;
}
.yes-no-modal .modal a{
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    color: #131313;
    display: block;
    background-color: white;
    padding: 16px 24px;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
    margin: 0 auto 16px;
    cursor: pointer;
    text-transform: uppercase;
}
.yes-no-modal .modal .button-warn{
    background-color: #E81818;
    color: white;
}
.like{
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    display: inline-block;
    margin-right: 5px;
}
.like div, .like span, .like img{
    display: inline-block;
}
.like .heart-container{
    position: relative;
    width: 38px;
}
.like .heart-container .like-icon-empty{
    margin: 0 8px;
    position: relative;
    height: 18px;
}
.like .heart-container .like-icon-filled{
    margin: 0px -34px 0px 8px;
    position: relative;
    top: 0;
    -webkit-transition: width 400ms, height 400ms, top 400ms, left 400ms;
            transition: width 400ms, height 400ms, top 400ms, left 400ms;
    left: -37px;
    width: 21px;
    height: 18px;
}
.like .heart-container .like-icon-filled.hidden{
    width: 0;
    height: 0;
    /* strange numbers here are for centering the hidden
               heart that grows to fill the empty one */
    left: -26px;
    top: 1px;
}
.like .likes{
    margin: 0 5px;
    padding: 2px 12px;
    background: #6F6F6F;
    color: #000000;
    border-radius: 300em;
}
.like .like-label{
    color: #FFFFFF;
    vertical-align: top;
    display: none;
    margin-right: 10px;
    letter-spacing: 1.8px;
}
.like div .modal{
    position: absolute;
    width: 215px;
    right: 7.5%;
    z-index: 12;
    color: #000000;
    padding: 15px 25px;
    box-shadow: 0px 0px 7px rgba(0,0,0,0.2);
    display: block;
    text-align: center;
}
@media(min-width: 768px){
    .like{
        margin-right: 0;
    }
}
@media(min-width: 768px){
    .like .like-label{
        display: inline-block;
    }
}
@media(min-width: 768px){
    .like div .modal{
        right: 10%;
        top: -50px;
    }
}
/* Possibly use something like this for a more bouncy effect - needs JS intervention */
@-webkit-keyframes heartBounceIn{
    0%{
        width: 0px;
        height: 0px;
        left: -24px;
        top: -4px;
    }
    80%{
        width: 25px;
        height: 21px;
    }
    100%{
        width: 21px;
        height: 18px;
        left: -37px;
        top: 4px;
    }
}
@keyframes heartBounceIn{
    0%{
        width: 0px;
        height: 0px;
        left: -24px;
        top: -4px;
    }
    80%{
        width: 25px;
        height: 21px;
    }
    100%{
        width: 21px;
        height: 18px;
        left: -37px;
        top: 4px;
    }
}
@-webkit-keyframes heartBounceOut{
    0%{
        width: 21px;
        height: 18px;
        left: -37px;
        top: 4px;
    }
    100%{
        width: 0px;
        height: 0px;
        left: -24px;
        top: -4px;
    }
}
@keyframes heartBounceOut{
    0%{
        width: 21px;
        height: 18px;
        left: -37px;
        top: 4px;
    }
    100%{
        width: 0px;
        height: 0px;
        left: -24px;
        top: -4px;
    }
}
.share{
    color: #FFFFFF;
    cursor: pointer;
    margin-top: -20px;
    display: inline-block;
    margin-right: 0;
}
.share .share-icon{
    display: inline-block;
    width: 24px;
    height: 18px;
}
.share .share-icon img{
    width: 100%;
    height: 100%;
}
.share .share-icon + span{
    letter-spacing: 1.8px;
}
.share div, .share span, .share img{
    display: inline-block;
}
.share span{
    display: none;
    vertical-align: top;
    padding: 0 5px;
    margin-right: 10px;
}
.share .share-button + div .modal{
    width: 250px;
    right: 15%;
    z-index: 12;
    color: #000000;
    padding: 0;
    text-align: center;
}
.share .share-button + div .modal .share-interface{
    padding: 5px;
}
.share .share-button + div .modal .share-interface h5{
    margin: 10px auto 5px auto;
    text-align: center;
    text-transform: uppercase;
}
.share .share-button + div .modal .share-interface .share-fb{
    display: inline-block;
    margin: 5px;
}
.share .share-button + div .modal .share-interface .share-tw{
    display: inline-block;
    margin: 5px;
}
.share .share-button + div .modal .share-interface .share-tb{
    display: inline-block;
    margin: 5px;
}
.share .share-button + div .modal .share-interface .share-tb .share-platform-button img{
    width: 40px;
    height: 40px;
}
.share .share-button + div .modal .share-interface .copy-link{
    display: inline-block;
    vertical-align: bottom;
}
.share .share-button + div .modal .share-interface .copy-icon{
    display: inline-block;
    margin: 5px;
    vertical-align: middle;
    padding-bottom: 5px;
}
.share .share-button + div .modal .share-interface .copy-input{
    border: none;
    font-size: 18px;
    font-weight: 500;
    font-family: "Avenir Next",sans-serif;
    display: inline-block;
    margin: 5px;
    padding-bottom: 5px;
}
.share .share-button + div .modal .share-interface .song-time-toggle, .share .share-button + div .modal .share-interface .playlist-song-toggle{
    width: 100%;
}
.share .share-button + div .modal .share-interface .song-time-toggle input[type="checkbox"], .share .share-button + div .modal .share-interface .playlist-song-toggle input[type="checkbox"]{
    display: none;
}
.share .share-button + div .modal .share-interface .song-time-toggle input[type="checkbox"] + label, .share .share-button + div .modal .share-interface .playlist-song-toggle input[type="checkbox"] + label{
    margin-bottom: 5px;
}
.share .share-button + div .modal .share-interface .song-time-toggle input[type="checkbox"] + label:before, .share .share-button + div .modal .share-interface .playlist-song-toggle input[type="checkbox"] + label:before{
    content: ' ';
    background: #FFFFFF;
    border: #000000 solid 1px;
    color: #000000;
    width: 13px;
    height: 14px;
    display: inline-block;
    position: Relative;
    top: -3px;
    margin-right: 5px;
    font-size: 10px;
    padding: 0 0 0 1px;
    vertical-align: bottom;
}
.share .share-button + div .modal .share-interface .song-time-toggle input[type="checkbox"]:checked + label:before, .share .share-button + div .modal .share-interface .playlist-song-toggle input[type="checkbox"]:checked + label:before{
    content: '✓';
}
.share .share-button + div .modal .cancel-button{
    border-top: solid 2px #CDCDCD;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    width: 100%;
    padding: 10px;
    display: inline-block;
    cursor: pointer;
}
@media(min-width: 768px){
    .share span{
        display: inline-block;
    }
}
@media(min-width: 1200px){
    .share span{
        padding: 0 0 0 5px;
        margin-right: 0;
    }
}
@media(min-width: 768px){
    .share .share-button + div .modal{
        right: 10%;
    }
}
@media(min-width: 768px){
    .share .share-button + div .modal .cancel-button{
        display: none;
    }
}
.add{
    display: inline-block;
    margin-right: 10px;
}
.add .add-button{
    color: #FFFFFF;
    cursor: pointer;
    margin-top: -20px;
    margin-right: 0;
    display: inline-block;
}
.add .add-button div, .add .add-button span, .add .add-button img{
    display: inline-block;
}
.add .add-button .add-icon{
    display: inline-block;
    width: 24px;
    height: 18px;
}
.add .add-button .add-icon img{
    width: 100%;
    height: 100%;
}
.add .add-button span{
    vertical-align: top;
    display: none;
    padding: 0 5px;
    margin-right: 5px;
    letter-spacing: 1.8px;
}
.add .add-button + div .modal{
    position: absolute;
    width: 250px;
    right: 7.5%;
    z-index: 12;
    color: #000000;
    padding: 0;
    box-shadow: 0px 0px 7px rgba(0,0,0,0.2);
    display: block;
}
.add .add-button + div .modal .cancel-button{
    border-top: solid 2px #CDCDCD;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}
.add .add-button + div .modal .playlists-title{
    border-bottom: solid 2px #CDCDCD;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
}
.add .add-button + div .modal ul{
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.add .add-button + div .modal ul.playlist-items-list{
    max-height: 100px;
    overflow-y: scroll;
    /* Hiding scroll bar cross-browser */
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}
.add .add-button + div .modal ul.playlist-items-list::-webkit-scrollbar{
    width: 0 !important;
}
.add .add-button + div .modal li{
    padding: 7px 10px;
    margin: 0;
    font-weight: 500;
    color: #3B3B3B;
    cursor: pointer;
    line-height: 15px;
}
.add .add-button + div .modal li.playlist-item{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.add .add-button + div .modal li.playlist-item.hasCurrentSong{}
.add .add-button + div .modal li.playlist-item.hasCurrentSong:before{
    content: '✓';
}
.add .add-button + div .modal li.playlist-item:before{
    content: ' ';
    display: inline-block;
    padding: 0 2px;
    border: solid 1px #000000;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    vertical-align: bottom;
    font-size: 12px;
}
.add .add-button + div .modal li.playlist-divider{
    height: 1px;
    background: #CDCDCD;
    font-weight: 600;
    padding: 0 2px;
    margin: 5px 0 0 0;
}
.add .add-button + div .modal li.playlist-divider:before{
    content: none;
}
.add .add-button + div .modal li.playlist-new{
    color: #000000;
}
.add .add-button + div .modal li.playlist-new .confirm-new-playlist{
    border: solid 2px #000000;
    border-radius: 100%;
    padding: 2px 3px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin-left: 5px;
    font-size: 14px;
}
.add .add-button + div .modal li.playlist-new .confirm-new-playlist.notReady{
    color: #CDCDCD;
    border-color: #CDCDCD;
}
.add .add-button + div .modal li.playlist-new input{
    border: none;
    border-bottom: solid 1px #CCCCCC;
    background: #FFFFFF;
    display: inline-block;
    padding: 0 5px 2px;
    font-size: 14px;
    letter-spacing: 1.8px;
    margin-left: -5px;
}
.add .add-button + div .modal li.playlist-new:before{
    content: ' ';
    display: inline-block;
    background-color: #000000;
    -webkit-mask: url(/nucleus/img/add.6c06c8c8.svg) 0 0/18px 16px;
            mask: url(/nucleus/img/add.6c06c8c8.svg) 0 0/18px 16px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    width: 24px;
    height: 18px;
    margin-left: 0px;
    position: relative;
    top: 5px;
}
.add .add-button + div .modal div.login-link{
    padding: 15px 25px;
}
.add .add-button + div .modal div.login-link a{
    text-decoration: none;
    font-weight: 600;
    color: #131313;
}
.add .add-button + div .modal div.login-link a:hover, .add .add-button + div .modal div.login-link a:active{
    color: #CDCDCD;
}
@media(min-width: 768px){
    .add{
        margin-right: 0;
    }
}
.add.anonymous .add-button + div .modal{
    padding: 0;
    text-align: center;
}
@media(min-width: 768px){
    .add .add-button span{
        display: inline-block;
    }
}
@media(min-width: 768px){
    .add .add-button + div .modal{
        right: 10%;
    }
}
@media(min-width: 768px){
    .add .add-button + div .modal .cancel-button{
        display: none;
    }
}
@media(min-width: 768px){
    .add .add-button + div .modal .playlists-title{
        border: none;
    }
}
#mini-search{
    font-family: "Avenir Next",sans-serif;
    height: 36px;
}
#mini-search a:hover, #mini-search a:visited, #mini-search a:link, #mini-search a:active{
    text-decoration: none;
}
#mini-search .close-container{
    height: 652px;
    left: -184px;
    position: absolute;
    width: 414px;
}
#mini-search .close-container .close-menu{
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
#mini-search .mini-input{
    background-color: transparent;
    border-color: transparent;
    color: white;
    display: none;
    font-size: 24px;
    height: 1.5em;
    letter-spacing: 1.3px;
    line-height: 1.3em;
    outline-width: 0;
    padding-left: 6px;
    width: 190px;
}
#mini-search .mini-input::-webkit-input-placeholder{
    font-size: 12px;
    letter-spacing: 3.6px;
    opacity: 0.5;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: -4px;
}
#mini-search .mini-input:-moz-placeholder{
    /* Firefox 18- */
    font-size: 12px;
    letter-spacing: 3.6px;
    opacity: 0.5;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: -4px;
}
#mini-search .mini-input::-moz-placeholder{
    /* Firefox 19+ */
    font-size: 12px;
    letter-spacing: 3.6px;
    opacity: 0.5;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: -4px;
}
#mini-search .mini-input:-ms-input-placeholder{
    font-size: 12px;
    letter-spacing: 3.6px;
    opacity: 0.5;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: -4px;
}
#mini-search .mini-input::-ms-input-placeholder{
    font-size: 12px !important;
    letter-spacing: 3.6px !important;
    opacity: 0.5 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    text-align: center !important;
    position: relative !important;
    top: -4px !important;
}
#mini-search .mini-input::-ms-clear{
    display: none;
}
#mini-search .mini-input:focus{
    outline: none;
}
#mini-search .search-icon{
    position: absolute;
    cursor: pointer;
}
#mini-search .search-icon .search-svg{
    height: 21px;
}
#mini-search .search-results{
    font-family: AvenirNext-Regular, sans-serif;
    font-size: 12px;
    position: absolute;
    left: -13px;
    top: 34px;
    -webkit-appearance: none;
    width: 100%;
    z-index: 45;
    opacity: 0.86;
}
#mini-search .search-results.invisible{
    display: none;
}
#mini-search .result{
    background-color: #000000;
    display: block;
    color: white;
    letter-spacing: 1.3;
    padding: 5px 0 8px 43px;
}
#mini-search .result:hover{
    background-color: #1B1B1B;
}
#mini-search .result.focused{
    background-color: #1B1B1B;
}
#mini-search .result:last-child{
    border-radius: 0 0 4px 4px;
}
#mini-search .visible{
    display: inline;
}
@media (min-width: 768px){
    #mini-search .mini-input{
        -webkit-animation: none;
                animation: none;
    }
}
@media (min-width: 768px){
    #mini-search .search-icon{
        left: 0;
        position: relative;
        top: 2px;
        opacity: 0.5;
    }
}
@media (min-width: 768px){
    #mini-search .search-results{
        width: 25%;
        left: 48%;
        margin-left: -72px;
        top: 50px;
    }
}
@media (min-width: 1200px){
    #mini-search .search-results{
        left: 49%;
    }
}
@media (min-width: 768px){
    #mini-search .result{
        padding-left: 6px;
    }
}
@-webkit-keyframes slideIn{
    0%{
        width: 0;
    }
    100%{
        width: 200px;
    }
}
@keyframes slideIn{
    0%{
        width: 0;
    }
    100%{
        width: 200px;
    }
}
#unsupported{
    font-family: "Avenir Next",sans-serif;
    font-size: 16px;
    text-align: center;
}
#unsupported a:hover, #unsupported a:visited, #unsupported a:link, #unsupported a:active{
    color: white;
}
.watch-info{
    background-color: #000000;
    color: #FFFFFF;
    font-family: "Avenir Next",sans-serif;
    font-size: 14px;
    padding: 15px 15px 5px 15px;
    margin-top: 18px;
}
.watch-info a, .watch-info a:visited, .watch-info a:active{
    color: #FFFFFF;
    text-decoration: none;
}
.watch-info a:hover, .watch-info a:visited:hover, .watch-info a:active:hover{
    color: #6F6F6F;
}
.watch-info .modal a, .watch-info .modal a:visited, .watch-info .modal a:active{
    color: #000000;
}
.watch-info .artist-image{
    display: none;
}
.watch-info .video-info{
    display: block;
}
.watch-info .video-info .top-watch-data{
    margin-bottom: 5px;
}
.watch-info .video-info .top-watch-data .title{
    display: inline-block;
    color: white;
    font-weight: 500;
    line-height: 15px;
    max-width: 183px;
    max-height: 29px;
    overflow: hidden;
}
.watch-info .video-info .top-watch-data .views{
    display: inline;
    float: right;
}
.watch-info .video-info .bottom-watch-data{
    text-align: right;
}
.watch-info .video-info .bottom-watch-data div{
    vertical-align: bottom;
}
.watch-info .video-info .bottom-watch-data .artist{
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 200;
    text-align: left;
}
.watch-info .user-actions{
    float: right;
    display: inline-block;
    vertical-align: top;
}
.watch-info .playlist-name{
    text-align: center;
    display: block;
    clear: both;
    margin-top: 5px;
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    .watch-info{
        display: none;
    }
}
@media(min-width: 768px){
    .watch-info .artist-image{
        display: inline-block;
        float: left;
        margin: 0px 10px 0 5px;
    }
    .watch-info .artist-image img{
        width: 37px;
        height: 37px;
        border-radius: 50%;
        -o-object-fit: cover;
           object-fit: cover;
        border: solid 2px #FFFFFF;
    }
    .watch-info .artist-image img:hover{
        border: solid 2px #6F6F6F;
    }
}
@media(min-width: 768px){
    .watch-info .video-info .top-watch-data{
        margin-bottom: 0;
    }
}
@media(min-width: 768px){
    .watch-info .video-info .top-watch-data .title{
        max-width: 60%;
    }
}
@media(min-width: 768px){
    .watch-info .video-info .bottom-watch-data .artist{
        max-width: 60%;
    }
}
@media(min-width: 1200px){
    .watch-info .video-info .bottom-watch-data .artist{
        max-width: none;
    }
}
.spinner-component{
    background-color: rgba(0,0,0,.7);
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
}
.spinner-component .spinner-container{
    margin: 0 auto;
    position: relative;
    opacity: 1;
    top: 50%;
    width: 50px;
}
.spinner-component .spinner-container img{
    -webkit-animation: spinner-anim 1s linear infinite;
            animation: spinner-anim 1s linear infinite;
    height: 50px;
}
@media (min-width: 1200px){
    .spinner-component .spinner-container{
        height: 70px;
    }
}
@media (min-width: 1200px){
    .spinner-component .spinner-container img{
        height: 70px;
    }
}
@-webkit-keyframes spinner-anim{
    0%{
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes spinner-anim{
    0%{
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
#noMatch{
    text-align: center;
    padding: 32px 0 128px;
    margin: auto;
    max-width: 280px;
    font-family: "Avenir Next",sans-serif;
}
.page-404 #header{
    width: 100%;
    text-align: left;
    padding: 15px;
    height: 50px;
    margin: 0 auto;
    position: relative;
}
.page-404 #header .logo{
    left: 13px;
    top: 16px;
    position: absolute;
    display: inline-block;
}
.page-404 #header a img{
    height: 18px;
}
@media (min-width: 768px){
    .page-404 #header .logo{
        left: 26px;
    }
}
.main-content > .spinner{
    position: relative;
}
.main-content > .spinner img{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -24px;
    margin-top: 100px;
    -webkit-animation: spinner-anim 1s linear infinite;
            animation: spinner-anim 1s linear infinite;
}
#ftue-select{
    position: relative;
}
#ftue-select #ftue-header{
    position: fixed;
    top: 0px;
    z-index: 13;
    width: 100%;
    height: 60px;
    background-color: black;
}
#ftue-select #ftue-header .title{
    position: relative;
    text-align: center;
    top: 20px;
    font-family: "Avenir Next",sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2.1;
}
#ftue-select #ftue-header #sm-title{
    display: inherit;
}
#ftue-select #ftue-header #subject{
    font-weight: bold;
}
#ftue-select #ftue-header #md-lg-title{
    display: none;
}
#ftue-select #ftue-header .done{
    position: absolute;
    border-radius: 2px;
    border: solid 2px #979797;
    cursor: pointer;
    right: 12px;
    top: 12px;
    text-transform: uppercase;
    font-family: "AvenirNext-Bold",sans-serif;
    font-size: 13px;
    letter-spacing: 2;
    line-height: 32px;
    padding-left: 12px;
    padding-right: 12px;
}
#ftue-select #ftue-header .done.none-selected{
    visibility: hidden;
}
#ftue-select #ftue-header .done.too-few-selected{
    visibility: hidden;
}
#ftue-select #ftue-header .select-remaining{
    visibility: hidden;
    position: absolute;
    text-align: center;
    right: 12px;
    top: 10px;
    opacity: 0.5;
    font-family: AvenirNext-MediumItalic;
    font-size: 11px;
    letter-spacing: .6;
    padding-left: 12px;
}
#ftue-select #ftue-header .select-remaining a{
    color: #ffffff;
}
#ftue-select #ftue-header .select-remaining.none-selected{
    visibility: visible;
}
#ftue-select #ftue-header .select-remaining.too-few-selected{
    visibility: visible;
}
#ftue-select #tiles{
    margin-top: 60px;
    cursor: pointer;
}
#ftue-select #tiles .artist-img{
    position: relative;
    display: inline-block;
    height: auto;
    min-height: 290px;
    width: 50%;
}
#ftue-select #tiles .artist-img .overlay{
    position: absolute;
    width: 100%;
    top: calc(50% - 20px);
    text-align: center;
    text-transform: uppercase;
    font-family: "AvenirNext-Bold",sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    height: 40px;
}
#ftue-select #tiles .artist-img .overlay .like-icons{
    position: absolute;
    left: 50%;
    margin-left: -8px;
    width: 16px;
}
#ftue-select #tiles .artist-img .overlay .unliked-icon{
    visibility: visible;
}
#ftue-select #tiles .artist-img .overlay .liked-icon{
    visibility: hidden;
}
#ftue-select #tiles .artist-img .overlay .display-name{
    position: relative;
    top: 28px;
    text-align: center;
}
#ftue-select #tiles .artist-img .image-container img{
    width: 100%;
    padding: 2px;
}
#ftue-select #tiles .artist-img .filter{
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}
#ftue-select #tiles .artist-img.liked .liked-icon{
    visibility: visible;
}
#ftue-select #tiles .artist-img.liked .unliked-icon{
    visibility: hidden;
}
#ftue-select #tiles .artist-img.liked .filter{
    background-color: rgba(0, 0, 0, 0.8);
}
#ftue-select .more-artists{
    cursor: pointer;
    margin: 16px 0px 16px 0px;
    font-family: "Avenir Next",sans-serif;
    font-size: 13px;
    letter-spacing: 1.8;
    text-transform: uppercase;
    line-height: 24px;
    text-align: center;
}
#ftue-select .more-artists .last-line{
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: solid 3px white;
}
@media (min-width: 768px){
    #ftue-select #ftue-header{
        height: 77px;
    }
}
@media (min-width: 1200px){
    #ftue-select #ftue-header{
        height: 94px;
    }
}
@media (min-width: 768px){
    #ftue-select #ftue-header #sm-title{
        display: none;
    }
    #ftue-select #ftue-header #md-lg-title{
        display: inherit;
        top: 28px;
    }
}
@media (min-width: 1200px){
    #ftue-select #ftue-header #sm-title{
        display: none;
    }
    #ftue-select #ftue-header #md-lg-title{
        display: inherit;
        top: 36px;
        font-size: 18px;
        letter-spacing: 2.7;
    }
}
@media (min-width: 768px){
    #ftue-select #ftue-header .done{
        top: 20px;
    }
}
@media (min-width: 1200px){
    #ftue-select #ftue-header .done{
        top: 30px;
    }
}
@media (min-width: 768px){
    #ftue-select #ftue-header .select-remaining{
        top: 18px;
    }
}
@media (min-width: 1200px){
    #ftue-select #ftue-header .select-remaining{
        top: 25px;
    }
}
@media (min-width: 768px){
    #ftue-select #tiles{
        margin-top: 77px;
    }
}
@media (min-width: 1200px){
    #ftue-select #tiles{
        margin-top: 94px;
    }
}
@media (min-width: 768px){
    #ftue-select #tiles .artist-img{
        width: 25%;
    }
}
@media (min-width: 1200px){
    #ftue-select #tiles .artist-img{
        width: 20%;
    }
}
@media (min-width: 1200px){
    #ftue-select #tiles .artist-img .overlay{
        font-size: 18px;
    }
}
@media (min-width: 1200px){
    #ftue-select #tiles .artist-img .overlay .like-icons{
        margin-left: -12px;
        width: 24px;
    }
}
@media (min-width: 1200px){
    #ftue-select .more-artists{
        font-size: 18px;
        line-height: 32px;
        margin-top: 22px;
    }
}
.carousel{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    left: -100%;
    min-height: 100px;
    position: relative;
    -webkit-transform-origin: 0;
            transform-origin: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
}
.carousel .videoPoster{
    background-color: rgba(0,0,0,0);
}
.carousel .wrapper{
    overflow: hidden;
}
.carousel .nav{
    float: left;
}
.carousel .item{
    opacity: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 100%;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    -webkit-transition: opacity .2s ease-in-out;
            transition: opacity .2s ease-in-out;
}
.carousel .item.first{
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    opacity: 1;
}
.carousel .carousel-pips{
    position: absolute;
    top: 85%;
    width: 100%;
    z-index: 13;
}
.carousel .carousel-pips .pip-wrapper{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}
.carousel .carousel-pips .pip{
    width: 25px;
    height: 40px;
    display: inline-block;
    text-align: center;
}
.carousel .carousel-pips .pip:hover .pip-circle{
    background-color: #D8D8D8;
}
.carousel .carousel-pips .pip.active .pip-circle{
    background-color: #999;
}
.carousel .carousel-pips .pip-circle{
    width: 13px;
    display: inline-block;
    height: 13px;
    border: solid 2px #222;
    border-radius: 50%;
    background-color: #666;
    margin-top: 12px;
}
.carousel .carousel-navigation{
    display: none;
    pointer-events: none;
}
.carousel .carousel-navigation div{
    width: 100px;
    cursor: pointer;
    font-size: 18pt;
    color: #ffffff;
    position: relative;
    padding: 50px 5px;
    pointer-events: all;
    opacity: 0.5;
    background-color: transparent;
    background-image: url(/nucleus/img/arrow-right.49e9503c.svg);
    background-clip: content-box;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 34%;
    height: 157px;
}
.carousel .carousel-navigation div:hover{
    opacity: 1;
}
.carousel .carousel-navigation div.prev{
    float: left;
    left: 34px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.carousel .carousel-navigation div.next{
    float: right;
    right: 34px;
}
.carousel .carousel-navigation div.hidden{
    display: none;
}
@media(min-width: 1200px){
    .carousel{
        min-height: 300px;
    }
}
@media(min-width: 1200px){
    .carousel .item{
        -webkit-transition-duration: 1.3s;
                transition-duration: 1.3s;
    }
}
@media(min-width: 1200px){
    .carousel .carousel-pips{
        top: 71%;
    }
}
@media(min-width: 1450px){
    .carousel .carousel-pips{
        top: 77%;
    }
}
@media(min-width: 1200px){
    .carousel .carousel-navigation{
        display: inline-block;
        position: absolute;
        top: 42px;
        margin-bottom: -170px;
        width: 100%;
        z-index: 13;
        top: 40%;
    }
}
.empty-carousel{
    min-height: 100px;
}
@media(min-width: 1200px){
    .empty-carousel{
        min-height: 300px;
    }
}
.like-count.hidden{
    display: none;
}
#hello{
    color: white;
    font-family: "Avenir Next",sans-serif;
    font-size: 18px;
    margin: 0 auto;
    left: 50%;
    letter-spacing: 1.5px;
    text-align: center;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    width: 482px;
}
#hello .hello-overlay{
    -webkit-animation-name: hello-fadeIn;
            animation-name: hello-fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    background-color: black;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 5;
}
@media (min-width: 768px){
    #hello{
        font-size: 22px;
    }
}
@-webkit-keyframes hello-fadeIn{
    0%{
        opacity: 1;
    }
    20%{
        opacity: 0.7;
    }
    80%{
        opacity: 0.3;
    }
    100%{
        opacity: 0;
    }
}
@keyframes hello-fadeIn{
    0%{
        opacity: 1;
    }
    20%{
        opacity: 0.7;
    }
    80%{
        opacity: 0.3;
    }
    100%{
        opacity: 0;
    }
}
.mobile-app-page{
    font-family: "Avenir Next",sans-serif;
    background-color: rgb(0,0,0);
    background-image: url('http://aws-cache.vevocdn.com/assets/images/56402637-3180-4c6b-93c8-66670a0b0ff4.jpg');
    background-repeat: no-repeat;
    color: white;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.mobile-app-page div{
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    vertical-align: baseline;
    margin: 0;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
}
/*}*/
.mobile-app-page ul{
    position: relative;
}
/*margin-top: -55px;*/
.mobile-app-page li{
    border: 2px #979797 solid;
    border-radius: 50%;
    height: 20px;
    list-style: none;
    margin-bottom: 25px;
    width: 20px;
    box-sizing: initial;
    padding: .125rem;
}
/*.loading_and_uninitialized & {*/
.mobile-app-page li.active{
    background-color: #979797;
}
.mobile-app-page h2{
    font-size: 4vw;
    line-height: 4vw;
}
.mobile-app-page p{
    display: none;
    font-size: .8vw;
    max-width: 518px;
}
.mobile-app-page video{
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    display: none;
}
.mobile-app-page .return-to-vevo{
    position: absolute;
    bottom: 20px;
    color: rgba(255,255,255,.21);
    font-size: 5vw;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 10;
    /**
         * iPad with portrait orientation.
         */
    /**
         * iPad with landscape orientation.
         */
    /**
         * iPhone 5
         * You can also target devices with aspect ratio.
         */
    /**
         * iPhone 4s
         * You can also target devices with aspect ratio.
         */
}
.mobile-app-page .return-to-vevo a{
    color: gray;
    letter-spacing: 1.5px;
    text-decoration: none;
}
.mobile-app-page .return-to-vevo a:hover{
    color: rgba(255,255,255,.81);
}
.mobile-app-page .nav{
    display: none;
    float: left;
    margin-right: 122px;
    margin-top: -82px;
}
.mobile-app-page .content{
    width: auto;
    max-width: 100%;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
}
.mobile-app-page .content:before, .mobile-app-page .content:after{
    content: '';
    display: table;
}
.mobile-app-page .main-wrapper{
    height: 100vh;
    position: absolute;
    text-align: center;
    width: 100%;
}
.mobile-app-page .app-link{
    left: 50%;
    margin-left: -75px;
    margin: 25px 25px 0 0;
    bottom: 100px;
    z-index: 40;
    position: relative;
    display: none;
}
.mobile-app-page .main .android, .mobile-app-page .main .ios{
    position: relative;
    margin: 20px 5px 0 5px;
    display: inline-block;
}
.mobile-app-page .android img{
    width: 150px;
    height: 42px;
    border: solid 1px #ababab;
    border-radius: 7px;
}
.mobile-app-page .main{
    display: none;
    padding: 45px 0;
    -webkit-transition: top 1s cubic-bezier(0.250, 0.250, 0.335, 1.025);
            transition: top 1s cubic-bezier(0.250, 0.250, 0.335, 1.025);
}
.mobile-app-page .main a{
    bottom: 0;
    display: none;
    left: 0;
    margin-left: 0;
    position: absolute;
}
.mobile-app-page .main.active{
    display: block;
    top: 50%;
}
.mobile-app-page .main.prev{}
.mobile-app-page .main.next{}
.mobile-app-page .section{
    position: relative;
    top: 15px;
    width: 100%;
}
.mobile-app-page .vevo-logo{
    height: 30px;
    margin: 0 auto;
    width: 122px;
}
.mobile-app-page .vevo-logo img{
    width: 100%;
    height: auto;
}
.mobile-app-page .phone{
    height: 100vh;
    margin: 0 auto;
    min-height: 500px;
    width: 144px;
}
.mobile-app-page .frame{
    margin-top: -28px;
    top: 50%;
    position: relative;
    z-index: 10;
}
.mobile-app-page .frame img{
    width: 100%;
}
.mobile-app-page .hide-screenshots{
    height: 254px;
    left: 50%;
    margin-left: -65px;
    margin-top: -290px;
    overflow: hidden;
    position: relative;
    top: calc(50% + 2px);
    width: 130px;
    z-index: 15;
}
.mobile-app-page .screenshots{
    margin-top: 23px;
    position: absolute;
    top: 0;
    width: 100%;
}
.mobile-app-page .screenshots a{
    width: 100%;
}
.mobile-app-page .screenshots img{
    display: none;
    position: absolute;
    -webkit-transition: top 1s cubic-bezier(0.250, 0.250, 0.335, 1.025);
            transition: top 1s cubic-bezier(0.250, 0.250, 0.335, 1.025);
    width: 100%;
}
.mobile-app-page .screenshots .active{
    display: block;
    top: 50.5%;
}
.mobile-app-page .screenshots .prev{}
.mobile-app-page .screenshots .next{
    /**
            * iPad with landscape orientation.
            */
}
.mobile-app-page .next-section{
    position: absolute;
    bottom: 20px;
    left: 50%;
    display: none;
    height: 50px;
    width: 50px;
}
.mobile-app-page .bg-video{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
@media (min-width: 768px){
    .mobile-app-page{
        background-image: url('http://aws-cache.vevocdn.com/assets/images/5640264d-1340-4e1f-bb9f-7baa0a0b0db3.jpg');
        margin-top: 0;
        max-height: auto;
    }
}
@media (min-width: 1200px){
    .mobile-app-page li{
        height: 8px;
        width: 8px;
    }
}
@media (min-width: 768px){
    .mobile-app-page h2{
        font-size: 3vw;
        line-height: 3vw;
    }
}
@media (min-width: 992px){
    .mobile-app-page h2{
        font-size: 32px;
        line-height: 32px;
    }
}
@media (min-width: 768px){
    .mobile-app-page p{
        display: block;
        font-size: 2vw;
    }
}
@media (min-width: 992px){
    .mobile-app-page p{
        font-size: 1vw;
    }
}
@media (min-width: 1500px){
    .mobile-app-page p{
        font-size: 16px;
    }
}
@media (min-width: 768px){
    .mobile-app-page video{
        display: block;
    }
}
@media (min-width: 768px){
    .mobile-app-page .return-to-vevo{
        bottom: 0;
        display: block;
        font-size: 2vw;
        right: 40px;
        text-align: right;
        top: 50px;
        width: auto;
    }
}
@media (min-width: 992px){
    .mobile-app-page .return-to-vevo{
        top: 3%;
        right: 10%;
        display: block;
        font-size: 1vw;
    }
}
@media (min-width: 1400px){
    .mobile-app-page .return-to-vevo{
        font-size: 20px;
    }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
    .mobile-app-page .return-to-vevo{
        font-size: 28px;
    }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
    .mobile-app-page .return-to-vevo{
        font-size: 20px;
    }
}
@media screen and (device-aspect-ratio: 40/71){
    .mobile-app-page .return-to-vevo{
        font-size: 12px;
    }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
    .mobile-app-page .return-to-vevo{
        font-size: 12px;
    }
}
@media (min-width: 992px){
    .mobile-app-page .nav{
        display: block;
    }
}
@media (min-width: 768px){
    .mobile-app-page .content{
        margin: 0 auto;
        max-width: 1200px;
        position: relative;
        top: 40%;
    }
}
@media (min-width: 768px){
    .mobile-app-page .main-wrapper{
        float: left;
        margin-left: 30px;
        text-align: left;
        position: relative;
        top: -50vh;
        width: 54%;
    }
}
@media (min-width: 992px){
    .mobile-app-page .main-wrapper{
        margin-left: 0;
    }
}
@media (min-width: 768px){
    .mobile-app-page .app-link{
        display: inline-block;
    }
}
@media (min-width: 400px){
    .mobile-app-page .main .android, .mobile-app-page .main .ios{
        margin: 50px 25px 0 25px;
    }
}
@media all and (max-width: 768px) and (orientation:landscape){
    .mobile-app-page .main .android, .mobile-app-page .main .ios{
        left: -100px;
        display: block;
    }
}
@media (max-height: 500px){
    .mobile-app-page .main{
        padding: 10px 0;
    }
}
@media (min-width: 768px){
    .mobile-app-page .main{
        margin-top: -165px;
        min-height: 350px;
        padding: 0;
        position: absolute;
        top: 100vh;
    }
}
@media (min-width: 768px){
    .mobile-app-page .main a{
        display: block;
    }
}
@media (max-height: 500px){
    .mobile-app-page .main.active{
        top: 0;
    }
}
@media (min-width: 768px){
    .mobile-app-page .main.prev{
        display: block;
        top: -30vh;
    }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
    .mobile-app-page .main.prev{
        top: -400px;
    }
}
@media (min-width: 768px){
    .mobile-app-page .main.next{
        display: block;
        top: 140vh;
    }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
    .mobile-app-page .main.next{
        top: 1600px;
    }
}
@media (max-height: 500px){
    .mobile-app-page .section{
        top: 0;
    }
}
@media (max-height: 500px){
    .mobile-app-page .vevo-logo{
        width: 80px;
    }
}
@media (min-width: 768px){
    .mobile-app-page .vevo-logo{
        margin: 0;
    }
}
@media (max-height: 500px){
    .mobile-app-page .phone{
        width: 108px;
    }
}
@media all and (max-width: 768px) and (orientation:landscape){
    .mobile-app-page .phone{
        position: relative;
        right: -125px;
        top: -10px;
    }
}
@media (min-width: 768px){
    .mobile-app-page .phone{
        float: right;
        margin: 0;
        margin-right: 30px;
        margin-top: -285px;
        overflow: hidden;
        position: relative;
        width: 281px;
    }
}
@media (min-width: 992px){
    .mobile-app-page .phone{
        margin-right: 0;
    }
}
@media (min-width: 400px){
    .mobile-app-page .frame{
        margin-top: -148px;
    }
}
@media (min-width: 768px){
    .mobile-app-page .frame{
        margin: 0;
        top: 0;
    }
    .mobile-app-page .frame img{
        width: auto;
    }
}
@media (max-height: 500px){
    .mobile-app-page .hide-screenshots{
        height: 223px;
        left: 50%;
        margin-left: -47px;
        margin-top: -218px;
        width: 94px;
    }
}
@media (min-width: 768px){
    .mobile-app-page .hide-screenshots{
        left: -2px;
        height: 449px;
        margin: auto;
        position: relative;
        top: -514px;
        width: 255px;
    }
}
@media (max-height: 500px){
    .mobile-app-page .screenshots{
        margin-top: 20px;
    }
}
@media (min-width: 768px){
    .mobile-app-page .screenshots{
        margin-top: 0;
        width: auto;
    }
}
@media (min-width: 768px){
    .mobile-app-page .screenshots a{
        width: auto;
    }
}
@media (max-height: 500px){
    .mobile-app-page .screenshots img{
        height: auto;
        width: 94px;
    }
}
@media (min-width: 768px){
    .mobile-app-page .screenshots img{
        left: 3px;
        margin-top: 0;
        width: auto;
    }
}
@media (min-width: 768px){
    .mobile-app-page .screenshots .prev{
        display: block;
        top: -30vh;
    }
}
@media (min-width: 768px){
    .mobile-app-page .screenshots .next{
        display: block;
        top: 45vh;
    }
}
@media all and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation:landscape){
    .mobile-app-page .screenshots .next{
        top: 700px;
    }
}
@media (max-height: 971px){
    .mobile-app-page .screenshots .next{
        top: 700px;
    }
}
@media (min-width: 768px){
    .mobile-app-page .next-section{
        display: block;
    }
}
.header-profile{
    height: 200px;
    position: relative;
    overflow: hidden;
}
.header-profile .overlay{
    position: absolute;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .4)0%, rgba(0, 0, 0, .3)15%, rgba(0, 0, 0, .3)50%, rgba(0, 0, 0, 1));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .4)0%,rgba(0, 0, 0, .3)15%,rgba(0, 0, 0, .3)50%,rgba(0, 0, 0, 1));
    bottom: 0;
    width: 100%;
    height: 100%;
}
/*transition: 1s opacity ease;
        &.loaded {
            opacity: 1;
        }*/
.header-profile .background-blur img{
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.header-profile .profile-container{
    position: absolute;
    top: 50px;
    z-index: 1;
    /* Just above the overlay */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    top: 60%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    max-width: 100%;
}
.header-profile .profile-container .profile-logo{
    display: inline-block;
    vertical-align: middle;
    margin-left: 14px;
    min-width: 75px;
}
.header-profile .profile-container .profile-logo img{
    border-radius: 50%;
    height: 75px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.header-profile .profile-container .profile-details{
    margin-left: 15px;
    display: inline-block;
    vertical-align: middle;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden;
    color: white;
    letter-spacing: 1.8px;
}
.header-profile .profile-container .profile-details .user-display-name{
    font-size: 16px;
    font-family: "AvenirNext-Bold",sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}
.header-profile .profile-container .profile-details .username{
    font-size: 12px;
    font-family: "Avenir Next",sans-serif;
}
.header-profile .profile-container .profile-details .bio{
    font-size: 12px;
    font-family: "Avenir Next",sans-serif;
    opacity: .7;
    max-width: 400px;
}
.header-profile .profile-container .profile-details a{
    color: white;
}
@media (min-width: 768px){
    .header-profile{
        height: 400px;
    }
}
@media (min-width: 768px){
    .header-profile .profile-container .profile-logo{
        min-width: 150px;
        margin-left: 24px;
    }
}
@media (min-width: 768px){
    .header-profile .profile-container .profile-logo img{
        height: 150px;
    }
}
@media (min-width: 768px){
    .header-profile .profile-container .profile-details{
        margin-left: 26px;
    }
}
@media (min-width: 768px){
    .header-profile .profile-container .profile-details .user-display-name{
        font-size: 24px;
    }
}
.playlist-metadata .playlist-image-uploader, .playlist-metadata .form{
    display: block;
    margin: auto;
    width: 80%;
}
.playlist-metadata .form label{
    font-family: "AvenirNext-Bold",sans-serif;
    width: 100%;
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 4px 8px;
}
.playlist-metadata .form div.form-row{
    margin: 12px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
.playlist-metadata .form .error-message{
    padding: 3px 8px;
    color: #E81818;
    padding-left: 24px;
    margin-left: 12px;
    position: relative;
}
.playlist-metadata .form .error-message::after{
    content: '';
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 0;
    height: 15px;
    width: 15px;
    background-size: cover;
    background-image: url('/nucleus/img/error-X.c4d5fb3b.svg');
}
.playlist-metadata .form input, .playlist-metadata .form select, .playlist-metadata .form textarea{
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    min-width: 180px;
    font-family: "Avenir Next",sans-serif;
    font-size: 14px;
    color: white;
    background-color: #373737;
    border-radius: 2px;
    border: none;
    height: 28px;
    padding: 4px 8px;
}
.playlist-metadata .form .radio-toggle{
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    min-width: 180px;
}
.playlist-metadata .form textarea{
    height: 5.5em;
}
.playlist-metadata .form button{
    background: transparent;
    height: 60px;
    vertical-align: center;
    width: 80%;
    color: black;
    background-color: white;
    border-radius: 0;
    display: block;
    font-size: 14px;
    font-family: "AvenirNext-DemiBold",sans-serif;
    border: 0;
    letter-spacing: 2.1px;
    margin: 60px auto;
    text-transform: uppercase;
    cursor: pointer;
}
.playlist-metadata .form .delete-playlist{
    display: block;
    margin: auto;
    width: 150px;
    text-align: center;
    padding: 8px 0;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    cursor: pointer;
}
@media(min-width: 768px){
    .playlist-metadata .playlist-image-uploader, .playlist-metadata .form{
        display: inline-block;
        width: 269px;
        margin: auto;
        height: 133px;
        vertical-align: middle;
    }
}
@media (min-width: 1200px){
    .playlist-metadata .playlist-image-uploader, .playlist-metadata .form{
        width: 294px;
    }
}
@media(min-width: 768px){
    .playlist-metadata .form{
        width: 271px;
        max-width: 396px;
    }
}
@media(min-width: 1200px){
    .playlist-metadata .form{
        width: 294px;
        max-width: 460px;
    }
}
@media (min-width: 768px){
    .playlist-metadata .form label{
        width: 120px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 120px;
            -ms-flex: 0 0 120px;
                flex: 0 0 120px;
    }
}
@media (min-width: 768px){
    .playlist-metadata .form .delete-playlist{
        text-align: left;
        margin-left: 120px;
    }
}
.notifications .notifications-label{
    font-family: "Avenir Next",sans-serif;
    width: 260px;
}
a{
    text-decoration: none;
}
.message{
    color: #fff;
}
.message.error{
    color: #FF0000;
    display: block;
}
.playlist-image-dropzone{
    border: 1px dashed transparent;
    cursor: pointer;
}
.playlist-image-dropzone .edit-photo, .playlist-image-dropzone .drop-text{
    font-size: 11px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
    text-transform: uppercase;
}
.playlist-image-dropzone .drop-text{
    display: none;
}
.playlist-image-dropzone.drop-file{
    -webkit-transition: .5s border ease;
            transition: .5s border ease;
    border: 1px solid #828282;
}
.playlist-image-dropzone.drop-file .edit-photo{
    display: none;
}
.playlist-image-dropzone.drop-file .drop-text{
    display: inline-block;
}
.playlist-image-uploader{
    position: relative;
    padding: 0 15px;
}
.playlist-image-uploader img{
    width: 100%;
    height: auto;
}
.playlist-image-uploader .modal-container{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .7);
    z-index: 5;
}
.playlist-image-uploader .modal{
    top: 40%;
    left: 50%;
    max-width: 100%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 486px;
    height: 370px;
    border-radius: 8px;
    background-color: #1a1a1a;
    padding: 82px 32px;
    font-family: "AvenirNext-Bold",sans-serif;
    font-size: 18px;
    letter-spacing: 2.7px;
    text-transform: uppercase;
}
.playlist-image-uploader .modal .modal-header{
    height: 62px;
    border-bottom: 1px solid #333;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 20px 32px;
}
.playlist-image-uploader .modal .rangeslider-horizontal{
    width: 170px;
}
.playlist-image-uploader .modal .modal-footer{
    height: 72px;
    border-top: 1px solid #333;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 14px 22px;
}
.playlist-image-uploader .modal .modal-footer .flat-button{
    letter-spacing: 2px;
    cursor: pointer;
    float: right;
    padding: 12px 64px;
    font-size: 13px;
}
.playlist-image-uploader .modal .modal-footer .flat-button.filled{
    background-color: white;
    color: #131313;
}
.playlist-image-uploader canvas{
    border: solid 1px #343333;
    width: 235px;
    height: 133px;
}
@media(min-width: 768px){
    .playlist-image-uploader img{
        width: 235px;
        height: 133px;
        display: inline-block;
        vertical-align: middle;
    }
}
.main-content.user-profile.banner-open{
    margin-top: 75px;
}
#userProfile{
    min-height: 400px;
    margin-bottom: 50px;
}
#userProfile .tabs-container{
    background-color: #000000;
    font-family: "Avenir Next", sans-serif;
    font-size: 12px;
    margin: 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
#userProfile .tabs-container .tab-select{
    display: block;
}
#userProfile .tabs-container .tab-headers{
    display: none;
}
#userProfile .tabs-container select{
    cursor: pointer;
    padding: 10px 15px;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    font-weight: 300;
    background-color: #000000;
    background-image: url(/nucleus/img/down.5db73262.png);
    background-position: 89% 50%;
    background-repeat: no-repeat;
    color: #FFFFFF;
    border: none;
    font-weight: 500;
    display: block;
    margin: 0 auto;
    -webkit-appearance: none;
    outline-width: 0;
    margin-bottom: -16px;
    position: Relative;
    padding: 10px 38px 10px 7px;
    -moz-text-align-last: center;
         text-align-last: center;
    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
}
#userProfile .tabs-container select option{
    text-align: center;
}
#userProfile .tabs-container select::-ms-expand{
    display: none;
}
#userProfile .tabs-container ul{
    list-style: none outside none;
    margin: 0;
    padding: 10px 0;
    width: 100%;
    border-bottom: 1px solid rgba(151, 151, 151, .2);
}
#userProfile .tabs-container ul li{
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
}
#userProfile .tabs-container ul li a{
    font-family: "AvenirNext-DemiBold",sans-serif;
    color: #ffffff;
    opacity: 0.4;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 4.5px;
    padding: 10px 26px;
}
#userProfile .tabs-container ul li a.active{
    border-bottom: solid 2px #ffffff;
    opacity: 1;
}
#userProfile h2{
    font-size: 14px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 400;
    padding-left: 18px;
    margin-top: 64px;
}
#userProfile .horizontal-feed .trending-card{
    -webkit-animation-name: none;
            animation-name: none;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}
#userProfile .feed-template{
    border-top: none;
}
#userProfile .feed-template .feed-artist-link .feed-artist:first-child{
    padding-left: 0;
}
#userProfile #userProfileOverview .feed{
    margin-top: 40px;
}
#userProfile #userProfileOverview .feed:last-child{
    margin-bottom: 40px;
}
#userProfile #userProfileOverview .feed-title{
    display: inline-block;
    font-family: "AvenirNext-DemiBold",sans-serif;
    letter-spacing: 4px;
    font-size: 10px;
    margin-left: 0;
    padding-left: 15px;
    text-transform: uppercase;
}
#userProfile #userProfileOverview .feed-title.see-all-link{
    text-decoration: none;
    text-transform: uppercase;
    float: right;
    text-align: right;
    margin-left: 0;
    margin-top: -8px;
    padding: 8px 15px;
    color: #676767;
}
#userProfile #userProfileOverview .add-artist-placeholder-img{
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)), -webkit-linear-gradient(#343434, #343434);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)), linear-gradient(#343434, #343434);
    height: 51px;
    width: 51px;
    border-radius: 50%;
    position: static;
}
#userProfile #userProfileOverview .add-playlist .video-info-overlay{
    display: block;
}
/* overrides for tablet, behave like mobile with line items */
#userProfile #userProfileOverview .trending-card{
    -webkit-animation-name: none;
            animation-name: none;
    padding: 10px 0;
    position: relative;
    height: 67px;
    margin: 5px 0;
}
#userProfile #userProfileOverview .trending-card img.image-component{
    display: inline-block;
    height: 67px;
    width: 118px;
}
#userProfile #userProfileOverview .trending-card .video-info-overlay{}
#userProfile #userProfileOverview .trending-card .video-info{
    max-width: 55%;
    width: auto;
}
#userProfile #userProfileOverview .trending-card .video-info .artist-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#userProfile #userProfileOverview .trending-card .video-info .video-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#userProfile #userProfileOverview .trending-card .video-info .views{
    display: none;
}
#userProfile #userProfileOverview .trending-card:hover .image-container .image-hover.dark{
    background-color: rgba(0,0,0,0.75);
}
/*TODO, combine css with feedItemUserProfileArtist css*/
#userProfile #userProfileOverview .feed-item-artist-list-item{
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    position: relative;
}
#userProfile #userProfileOverview .feed-item-artist-list-item .trending-card{
    height: 68px;
    margin: 0;
    padding: 10px 0;
}
#userProfile #userProfileOverview .feed-item-artist-list-item .trending-card img.image-artist{
    height: 51px;
    width: 51px;
    border-radius: 50%;
    position: static;
}
#userProfile #userProfileOverview .feed-item-artist-list-item .trending-card .video-info-overlay{
    text-align: left;
    background-image: none;
}
#userProfile #userProfileOverview .feed-item-artist-list-item .trending-card .video-info-overlay .video-info{
    left: 62px;
    top: 44%;
    max-width: 56%;
    max-height: 40px;
    overflow: hidden;
}
#userProfile #userProfileOverview .feed-item-artist-list-item .trending-card .video-info-overlay .video-info .artist-name{
    text-transform: uppercase;
}
#userProfile #userProfileOverview .feed-item-artist-list-item .trending-card .image-hover{
    background-color: inherit;
}
#userProfile #userProfileOverview .feed-item-artist-list-item:hover{
    background-color: inherit;
}
#userProfile #userProfileVideos{
    position: relative;
}
#userProfile #userProfileVideos .empty-message-heading{
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 15px 15px 50px;
}
#userProfile #userProfileVideos .feed-template.forceVertical{
    margin: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 0 10px;
}
#userProfile #userProfileVideos .feed-template.forceVertical .trending-card .video-info{
    max-width: 55%;
}
#userProfile #userProfileVideos .feed-template.forceVertical .trending-card .video-info .artist-name, #userProfile #userProfileVideos .feed-template.forceVertical .trending-card .video-info .video-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#userProfile .add-to-list-link{
    font-family: "AvenirNext-DemiBold",sans-serif;
    position: relative;
    top: auto;
    left: auto;
    cursor: pointer;
    margin-left: 15px;
    padding: 15px 0;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
}
#userProfile .add-to-list-link img{
    height: 16px;
    width: 16px;
    margin-right: 10px;
}
#userProfile .add-to-list-link .link-label{
    position: relative;
    top: -2px;
}
#userProfile .empty-message{
    position: relative;
}
#userProfile .empty-message-heading{
    position: relative;
    font-family: "AvenirNext-Bold",sans-serif;
    text-align: center;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 50px auto;
    text-transform: uppercase;
    padding-top: 50px;
}
#userProfile .empty-message-content{
    opacity: 0.7;
    text-align: center;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 30px 0 100px;
}
@media (min-width: 768px){
    #userProfile .tabs-container{
        margin: 0 15px 10px;
        border: none;
    }
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    #userProfile .tabs-container{
        display: none;
    }
}
@media (min-width: 768px){
    #userProfile .tabs-container .tab-select{
        display: none;
    }
}
@media (min-width: 768px){
    #userProfile .tabs-container .tab-headers{
        display: block;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview{
        margin: 14px;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .feed-title{
        margin-left: 0;
        padding-left: 15px;
        letter-spacing: 5.3px;
        font-size: 14px;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .feed-title{
        margin-left: 0.7%;
        padding-left: 0.7%;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .feed-title.see-all-link{
        margin-top: 0;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .feed-card-outer-link{
        width: auto;
        margin: 0;
        display: block;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .feed-card-outer-link:first-child{
        margin-left: 0.7%;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .add-artist-placeholder-img{
        height: 180px;
        width: 180px;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .add-playlist .video-info-overlay{
        background-image: none;
    }
    #userProfile #userProfileOverview .add-playlist .video-info-overlay .video-info{
        top: 50%;
    }
    #userProfile #userProfileOverview .add-playlist .video-info-overlay .video-info .artist-name{
        text-transform: uppercase;
        font-size: 12px;
        font-weight: bold;
    }
}
@media(min-width: 768px){
    #userProfile #userProfileOverview .trending-card{
        overflow: visible;
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 5px 0;
        height: 67px;
    }
}
@media(min-width: 1200px){
    #userProfile #userProfileOverview .trending-card{
        overflow: hidden;
        width: 100%;
        height: 0;
        display: block;
        padding-top: 0;
        padding-bottom: 56.25%;
        margin: 0;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .trending-card img.image-component{
        position: static;
        height: 67px;
        width: 118px;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .trending-card img.image-component{
        width: 100%;
        height: 100%;
        position: absolute;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .trending-card .video-info-overlay{
        text-align: left;
        width: auto;
        height: auto;
        display: block;
        max-width: none;
        background-image: none;
        position: static;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .trending-card .video-info-overlay{
        text-align: center;
        width: 100%;
        height: 100%;
        display: block;
        max-width: 100%;
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), #000000);
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), #000000);
        position: absolute;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .trending-card .video-info .artist-name{
        padding: 0;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .trending-card .video-info .artist-name{
        padding: 1px 0;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .trending-card .video-info .video-name{
        cursor: pointer;
        padding: 0;
        line-height: 12px;
        max-height: 24px;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .trending-card .video-info .video-name{
        cursor: pointer;
        padding: 1px 0;
        line-height: 19px;
        max-height: 38px;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .trending-card .video-info{
        color: #9B9B9B;
        display: inline-block;
        left: 132px;
        letter-spacing: 1.65;
        position: absolute;
        top: 40%;
        max-width: 80%;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .trending-card .video-info{
        left: 0;
        height: auto;
        width: 100%;
        position: absolute;
        bottom: 10px;
        max-height: none;
        max-width: none;
        top: auto;
    }
    #userProfile #userProfileOverview .trending-card .video-info .artist-name{
        width: 100%;
    }
    #userProfile #userProfileOverview .trending-card .video-info .name-views-container{
        width: 100%;
    }
    #userProfile #userProfileOverview .trending-card .video-info .video-name, #userProfile #userProfileOverview .trending-card .video-info .views{
        display: inline-block;
    }
    #userProfile #userProfileOverview .trending-card .video-info .views{
        display: none;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileOverview .feed-item-artist-list-item{
        display: none;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .feed-item-artist-list-item .trending-card{
        height: 88px;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .feed-item-artist-list-item .trending-card img.image-artist{
        height: 67px;
        width: 67px;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileOverview .feed-item-artist-list-item .trending-card .video-info-overlay .video-info{
        top: 42%;
        left: 100px;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileVideos .empty-message-heading{
        border: none;
        margin: 0 auto 50px;
        padding-top: 100px;
    }
}
@media (min-width: 1200px){
    #userProfile #userProfileVideos .feed-template.forceVertical{
        border: none;
        margin: 0 0 15px;
        top: 50px;
    }
}
@media (min-width: 768px){
    #userProfile #userProfileVideos .feed-template.forceVertical .trending-card .video-info{
        max-width: 100%;
    }
}
@media (min-width: 1200px){
    #userProfile .add-to-list-link{
        position: absolute;
        top: 0;
    }
}
@media (min-width: 768px){
    #userProfile .empty-message-heading{
        margin: 50px 0 50px;
        padding-top: 50px;
    }
}
.image-upload{
    border: 1px dashed transparent;
    cursor: pointer;
    margin: 16px 0;
    width: 80px;
    display: inline-block;
    vertical-align: middle;
}
.image-upload img{
    height: 68px;
    width: 68px;
    background-size: cover;
    background-position: 0 50%;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}
.image-upload.drop-file{
    -webkit-transition: .5s border ease;
            transition: .5s border ease;
    border: 1px solid #828282;
}
.right-content{
    vertical-align: middle;
    display: inline-block;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
.right-content h3{
    text-transform: uppercase;
    font-size: 14px;
    margin: 0;
}
.right-content a.remove-photo{
    color: #999999;
    font-size: 10px;
    text-transform: uppercase;
    cursor: pointer;
    margin: 4px 0;
    display: inline-block;
}
.image-uploader{
    position: relative;
}
.image-uploader .cropper-modal{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .7);
    z-index: 5;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.image-uploader .cropper-modal .modal{
    position: relative;
    bottom: auto;
    top: 20px;
    -webkit-box-flex: 370px;
    -webkit-flex: 370px;
        -ms-flex: 370px;
            flex: 370px;
    max-width: 486px;
    border-radius: 8px;
    background-color: #1a1a1a;
    padding: 0;
    font-family: "AvenirNext-Bold",sans-serif;
    font-size: 18px;
    letter-spacing: 2.7px;
    text-transform: uppercase;
}
.image-uploader .cropper-modal .modal .modal-header{
    border-bottom: 1px solid #333;
    left: 0;
    top: 0;
    width: 100%;
    padding: 20px 32px;
}
.image-uploader .cropper-modal .modal .middle-content{
    padding: 16px;
}
.image-uploader .cropper-modal .modal .rangeslider-horizontal{
    width: 170px;
}
.image-uploader .cropper-modal .modal .modal-footer{
    border-top: 1px solid #333;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 14px 16px;
    text-align: right;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
.image-uploader .cropper-modal .modal .modal-footer .flat-button{
    letter-spacing: 2px;
    max-width: 160px;
    cursor: pointer;
    padding: 12px 32px;
    font-size: 13px;
}
.image-uploader .cropper-modal .modal .modal-footer .flat-button.filled{
    background-color: white;
    color: #131313;
}
.image-uploader .cropper-modal canvas{
    border: solid 1px #343333;
    height: 170px;
    width: 170px;
}
.settings-component{
    display: block;
    padding: 8px 15px;
    width: 100%;
    min-height: 400px;
    font-family: "Avenir Next",sans-serif;
}
.settings-component .content{
    -webkit-box-flex: 4;
    -webkit-flex-grow: 4;
        -ms-flex-positive: 4;
            flex-grow: 4;
    position: relative;
    letter-spacing: 2px;
}
.settings-component .content .back-to-settings-menu{
    position: absolute;
    padding: 3px 12px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.settings-component .error-message{
    position: relative;
    margin: 4px 0;
    padding-left: 24px;
    color: #999999;
    font-size: 12px;
}
.settings-component .error-message::after{
    content: '';
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 0;
    height: 15px;
    width: 15px;
    background-size: cover;
    background-image: url('/nucleus/img/error-X.c4d5fb3b.svg');
}
.settings-component .main-button{
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 14px;
    letter-spacing: 2.1px;
    max-width: 400px;
    padding: 20px 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.settings-component .form-header{
    margin-bottom: 24px;
    padding: 0 48px 20px;
    font-size: 18px;
    text-align: center;
    font-family: "AvenirNext-Bold",sans-serif;
    text-transform: uppercase;
    border-bottom: 1px solid #373737;
}
.settings-component form label{
    font-family: "AvenirNext-Bold",sans-serif;
    width: 100%;
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    padding: 4px 8px;
}
.settings-component form div.form-row{
    margin: 12px 0 22px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
}
.settings-component form .left-column{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
}
.settings-component form .right-column{
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
.settings-component form .left-tip{
    padding: 0 8px 4px;
    font-size: 10px;
    text-transform: uppercase;
    color: #999999;
}
.settings-component form .left-tip.error{
    color: #E81818;
}
.settings-component form .error-message{}
.settings-component form input, .settings-component form select, .settings-component form textarea{
    width: 100%;
    font-family: "Avenir Next",sans-serif;
    font-size: 14px;
    color: white;
    background-color: #373737;
    border-radius: 2px;
    border: none;
    height: 28px;
    padding: 4px 8px;
}
.settings-component form input[type="radio"], .settings-component form select[type="radio"], .settings-component form textarea[type="radio"]{
    -webkit-box-flex: unset;
    -webkit-flex-grow: unset;
        -ms-flex-positive: unset;
            flex-grow: unset;
    width: 1em;
    min-width: 0;
}
.settings-component form select, .settings-component form input[type="date"]{
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}
.settings-component form .radio-toggle{
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    min-width: 180px;
}
.settings-component form textarea{
    height: 6.5em;
}
.settings-component form button{
    background: transparent;
    height: 60px;
    vertical-align: center;
    width: 80%;
    max-width: 300px;
    color: black;
    background-color: white;
    border-radius: 0;
    display: block;
    font-size: 14px;
    font-family: "AvenirNext-DemiBold",sans-serif;
    border: 0;
    letter-spacing: 2.1px;
    margin: 40px auto 60px;
    text-transform: uppercase;
    cursor: pointer;
}
.settings-component form button:disabled{
    color: #aaa;
}
.settings-component form .error{
    -webkit-transition: .2s color ease-in-out;
            transition: .2s color ease-in-out;
    color: #E81818;
    opacity: 1;
}
.settings-component .notifications .notifications-label{
    font-family: "Avenir Next",sans-serif;
    width: 260px;
}
.settings-component a{
    text-decoration: none;
}
.settings-component .message{
    color: #fff;
}
.settings-component .message.error{
    color: #FF0000;
    display: block;
}
@media(min-width: 768px){
    .settings-component{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}
@media(min-width: 768px){
    .settings-component{
        padding: 60px 24px;
    }
}
@media (min-width: 768px){
    .settings-component .form-header{
        padding-left: 0;
    }
}
@media(min-width: 768px){
    .settings-component .form-header{
        text-align: left;
    }
}
@media (min-width: 768px){
    .settings-component form .left-column{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 180px;
            -ms-flex: 0 0 180px;
                flex: 0 0 180px;
    }
}
@media(min-width: 768px){
    .settings-component form .right-column{
        min-width: auto;
    }
}
@media(min-width: 768px){
    .settings-component form .error-message{
        max-width: 245px;
    }
}
@media(min-width: 768px){
    .settings-component form input, .settings-component form select, .settings-component form textarea{
        max-width: 260px;
    }
}
@media(min-width: 768px){
    .settings-component form button{
        margin: 40px 8px 60px;
    }
}
.left-navigation{
    width: 100%;
    font-family: "Avenir Next",sans-serif;
    padding: 0;
}
.left-navigation li{
    list-style: none;
    margin-bottom: 30px;
}
.left-navigation li a{
    letter-spacing: 2px;
    color: #828282;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    display: block;
}
.left-navigation li a.active{
    color: white;
}
.left-navigation li a.active a.has-arrow::after{
    opacity: 1;
}
.left-navigation li a.has-arrow::after{
    opacity: .4;
    content: '';
    position: absolute;
    width: 11px;
    height: 18px;
    top: 0;
    right: 0;
    background-image: url('/nucleus/img/arrow-right.49e9503c.svg');
}
.left-navigation.hidden{
    display: none;
}
@media(min-width: 768px){
    .left-navigation{
        width: auto;
        min-width: 300px;
    }
}
@media(min-width: 768px){
    .left-navigation{
        padding-right: 5%;
    }
}
.radio-toggle{
    display: inline-block;
}
.radio-toggle .radio-label{
    width: 50%;
    font-family: "Avenir Next",sans-serif;
    font-size: 12px;
    padding: 4px 0;
}
.radio-toggle input[type=radio]{
    height: 1em;
    position: relative;
    padding: 0;
    border: 0;
    margin-right: 8px;
    cursor: pointer;
    -webkit-appearance: none;
}
.radio-toggle input[type=radio] > *{
    display: inline-block;
    vertical-align: middle;
}
.radio-toggle input[type=radio]::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    height: 1.2em;
    width: 1.2em;
    background-color: #373737;
    border-radius: 50%;
    z-index: 1;
}
.radio-toggle input[type=radio]::after{
    content: '';
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    height: 0;
    width: 0;
    -webkit-transition: all .2s cubic-bezier(.5,0,.5,2);
            transition: all .2s cubic-bezier(.5,0,.5,2);
}
.radio-toggle input[type=radio]:checked::after{
    position: absolute;
    height: .8em;
    width: .8em;
    background-color: #CCCCCC;
    border-radius: 50%;
    z-index: 2;
}
#userProfilePlaylists{
    position: relative;
}
#userProfilePlaylists .empty-message-heading{
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 15px 15px 50px;
}
#userProfilePlaylists .feed-template.forceVertical{
    margin: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 0;
}
@media (min-width: 1200px){
    #userProfilePlaylists .empty-message-heading{
        border: none;
        margin: 0 auto 50px;
        padding-top: 100px;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylists .feed-template.forceVertical{
        border: none;
        margin: 0 0 15px;
        top: 50px;
    }
}
#userProfileHistory{
    position: relative;
}
#userProfileHistory .feed-template.forceVertical{
    max-width: 1200px;
}
#userProfileHistory .feed-template.forceVertical .feed-hori-container{
    margin-top: 10px;
    margin-bottom: 20px;
}
#userProfileHistory .feed-template.forceVertical .feed-card-outer-link{
    width: 100%;
    max-width: none;
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    position: relative;
    margin: 0;
}
#userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card{
    height: 68px;
    margin: 0;
    padding: 10px 0;
}
#userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card img{
    height: 51px;
    width: 90px;
    position: static;
}
#userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .remove-item{
    position: absolute;
    top: 5%;
    padding: 20px;
    right: -15px;
    z-index: 4;
    cursor: pointer;
}
#userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .remove-item img{
    width: 20px;
    height: 20px;
}
#userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay{
    text-align: left;
    background-image: none;
}
#userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info{
    left: 115px;
    top: 35%;
    font-size: 10px;
    max-width: 45%;
    max-height: 38px;
}
#userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info .artist-name, #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info .video-name{
    display: block;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .image-hover{
    background-color: inherit;
}
#userProfileHistory .clear-all-history{
    z-index: 4;
    font-family: "AvenirNext-Medium",sans-serif;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 11px;
    max-width: 1000px;
    margin-top: 10px;
}
#userProfileHistory .clear-all-history a{
    cursor: pointer;
}
#userProfileHistory .no-video-history{
    margin: 50px auto;
    text-align: center;
}
@media (min-width: 768px){
    #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card{
        height: 88px;
    }
}
@media (min-width: 1200px){
    #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card{
        padding: 10px 15px;
    }
}
@media (min-width: 768px){
    #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card img{
        height: 67px;
        width: 118px;
    }
}
@media (min-width: 768px){
    #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .remove-item{
        top: 18%;
    }
}
@media (min-width: 1200px){
    #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .remove-item{
        right: -4px;
    }
}
@media (min-width: 768px){
    #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info{
        display: block;
        left: 150px;
        top: 22%;
        font-size: 12px;
        max-width: 70%;
    }
}
@media (min-width: 768px){
    #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info .artist-name, #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info .video-name{
        text-transform: inherit;
    }
}
@media (min-width: 1200px){
    #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card{}
    #userProfileHistory .feed-template.forceVertical .feed-card-outer-link .trending-card:hover{
        background-color: #2F2F2F;
    }
}
@media (min-width: 768px){
    #userProfileHistory .clear-all-history{
        letter-spacing: 1.8px;
        font-size: 14px;
    }
}
@media (min-width: 1200px){
    #userProfileHistory .clear-all-history{
        font-family: "AvenirNext-DemiBold",sans-serif;
        max-width: 1200px;
        margin: 0px auto;
        width: 100%;
        position: relative;
        font-size: 12px;
        letter-spacing: 1.5px;
    }
}
#userProfileArtists{
    position: relative;
}
#userProfileArtists .add-to-list-link{
    z-index: 4;
}
#userProfileArtists .empty-message-heading{
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 15px auto 50px;
}
#userProfileArtists .feed-template.forceVertical{
    margin: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 0 10px;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container{
    max-width: 1000px;
    margin: 0 auto;
    -webkit-flex-flow: column;
        -ms-flex-flow: column;
            flex-flow: column;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link{
    max-width: 500px;
    width: 100%;
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    position: relative;
    margin: 0 30px;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .like{
    display: block;
    position: absolute;
    top: 30%;
    right: -8px;
    margin-right: 0;
    z-index: 3;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .like .like-button{
    padding: 10px 0;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card{
    height: 68px;
    margin: 0;
    padding: 10px 0;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card img{
    height: 51px;
    width: 51px;
    border-radius: 50%;
    position: static;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay{
    text-align: left;
    background-image: none;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay .video-info{
    left: 85px;
    top: 44%;
    max-width: 56%;
    max-height: 40px;
    overflow: hidden;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay .video-info .artist-name{
    text-transform: uppercase;
}
#userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .image-hover{
    background-color: inherit;
}
@media (min-width: 1200px){
    #userProfileArtists .empty-message-heading{
        border: none;
        margin: 0 auto 50px;
        padding-top: 100px;
    }
}
@media (min-width: 1200px){
    #userProfileArtists .feed-template.forceVertical{
        border: none;
        margin: 0 0 15px;
        top: 50px;
    }
}
@media (min-width: 1200px){
    #userProfileArtists .feed-template.forceVertical .feed-hori-container{
        -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        max-width: 1400px;
    }
}
@media (min-width: 1200px){
    #userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link{
        width: 500px;
    }
    #userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link:hover{
        background-color: #2F2F2F;
    }
    #userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link:hover.dummy{
        background-color: inherit;
    }
}
@media (min-width: 1200px){
    #userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .like{
        right: 7px;
    }
}
@media (min-width: 768px){
    #userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card{
        height: 88px;
    }
}
@media (min-width: 1200px){
    #userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card{
        padding: 10px 15px;
    }
}
@media (min-width: 768px){
    #userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card img{
        height: 67px;
        width: 67px;
    }
}
@media (min-width: 768px){
    #userProfileArtists .feed-template.forceVertical .feed-hori-container .feed-card-outer-link .trending-card .video-info-overlay .video-info{
        top: 32%;
        left: 100px;
    }
}
.user-profile-search{
    font-family: "AvenirNext-Regular",sans-serif;
    height: 36px;
    width: 100%;
    text-align: left;
    right: auto;
    left: 0;
    position: relative;
    margin: 15px 0;
    padding: 0 15px;
    z-index: 4;
}
.user-profile-search .fade-background{
    background-color: rgba(255, 255, 255, 0.1);
    height: 100%;
    padding: 0 5px;
}
.user-profile-search .mini-input{
    position: relative;
    background-color: transparent;
    border-color: transparent;
    color: white;
    font-size: 1.1em;
    height: 2em;
    letter-spacing: 0.9px;
    line-height: 2em;
    outline-width: 0;
    padding: 0.1em 20px 0 22px;
    top: 0;
    width: 100%;
}
.user-profile-search .mini-input::-webkit-input-placeholder{
    font-family: "AvenirNext-Regular",sans-serif;
    font-size: 0.8em;
    letter-spacing: 1.5px;
    text-transform: capitalize;
    color: #ffffff;
    opacity: 0.31;
    text-align: left;
    position: relative;
}
.user-profile-search .mini-input:-moz-placeholder{
    /* Firefox 18- */
    font-family: "AvenirNext-Regular",sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: capitalize;
    color: #ffffff;
    opacity: 0.31;
    text-align: left;
    position: relative;
}
.user-profile-search .mini-input::-moz-placeholder{
    /* Firefox 19+ */
    font-family: "AvenirNext-Regular",sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: capitalize;
    color: #ffffff;
    opacity: 0.31;
    text-align: left;
    position: relative;
}
.user-profile-search .mini-input:-ms-input-placeholder{
    font-family: "AvenirNext-Regular",sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: capitalize;
    color: #ffffff;
    opacity: 0.31;
    text-align: left;
    position: relative;
    top: 3px;
}
.user-profile-search .mini-input::-ms-input-placeholder{
    font-family: "AvenirNext-Regular",sans-serif;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: capitalize !important;
    color: #ffffff !important;
    opacity: 0.31 !important;
    text-align: left !important;
    position: relative !important;
    top: 3px !important;
}
.user-profile-search .mini-input::-ms-clear{
    display: none;
}
.user-profile-search .mini-input:focus{
    outline: none;
}
.user-profile-search .search-icon{
    margin-left: 0;
    left: 23px;
    position: absolute;
    top: 11px;
    opacity: 0.31;
}
.user-profile-search .search-icon .search-svg{
    height: 15px;
}
.user-profile-search .close-icon{
    cursor: pointer;
    top: 12px;
    position: absolute;
    right: 24px;
}
@media (min-width: 1200px){
    .user-profile-search .fade-background{
        background-color: inherit;
        padding: 0;
    }
}
@media (min-width: 768px){
    .user-profile-search{
        margin-top: 0;
        display: block;
    }
}
@media (min-width: 1200px){
    .user-profile-search{
        position: absolute;
        width: 300px;
        text-align: right;
        top: 5px;
        right: 0;
        left: auto;
    }
}
@media (min-width: 1200px){
    .user-profile-search .mini-input::-webkit-input-placeholder{
        opacity: 1;
    }
}
@media (min-width: 1200px){
    .user-profile-search .mini-input:-moz-placeholder{
        opacity: 1;
    }
}
@media (min-width: 1200px){
    .user-profile-search .mini-input::-moz-placeholder{
        opacity: 1;
    }
}
@media (min-width: 1200px){
    .user-profile-search .mini-input:-ms-input-placeholder{
        opacity: 1;
    }
}
@media (min-width: 1200px){
    .user-profile-search .mini-input::-ms-input-placeholder{
        opacity: 1 !important;
    }
}
@media (min-width: 768px){
    .user-profile-search .mini-input{
        -webkit-animation: none;
                animation: none;
    }
}
@media (min-width: 1200px){
    .user-profile-search .mini-input{
        padding-left: 6px;
        padding-right: 0;
        width: 220px;
    }
}
@media (min-width: 1200px){
    .user-profile-search .search-icon{
        margin-left: 1%;
        left: 0;
        position: relative;
        top: 2px;
        opacity: 1;
    }
}
@media (min-width: 1200px){
    .user-profile-search .close-icon{
        right: auto;
        top: -3px;
        position: relative;
    }
}
#userProfilePlaylistEdit{
    margin-top: 15px;
    display: block;
    position: relative;
}
#userProfilePlaylistEdit .empty-message-heading{
    margin: 15px auto 50px;
    border-top: 1px solid rgba(151, 151, 151, .2);
}
#userProfilePlaylistEdit .back-button{
    display: block;
    height: auto;
    width: 150px;
    font-family: "AvenirNext-DemiBold",sans-serif;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-top: 3px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 180px;
        -ms-flex: 0 0 180px;
            flex: 0 0 180px;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
    padding: 8px 15px;
}
#userProfilePlaylistEdit .back-button .back-button-arrow{
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    width: 20px;
    height: 9px;
}
#userProfilePlaylistEdit .back-button .back-button-text{
    text-transform: uppercase;
}
#userProfilePlaylistEdit .editing-playlist{
    padding-top: 30px;
}
#userProfilePlaylistEdit .editing-playlist .playlist-metadata .image-container{}
#userProfilePlaylistEdit .editing-playlist .playlist-info{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .image-container{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 120px;
        -ms-flex: 0 0 120px;
            flex: 0 0 120px;
    padding-left: 15px;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .image-container img{
    width: 100%;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .play-button{
    display: none;
    width: 102px;
    height: 30px;
    background-color: #ffffff;
    text-transform: uppercase;
    font-family: "AvenirNext-DemiBold",sans-serif;
    font-size: 10px;
    letter-spacing: 1.2px;
    color: #000000;
    position: relative;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .play-button .content{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .play-button .content img{
    margin-right: 5px;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .play-button.play-button-overlay{
    display: block;
    position: absolute;
    left: 15px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.2px;
    color: #ffffff;
    width: 106px;
    height: 60px;
    background-color: rgba(0,0,0,0.5);
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .play-button.play-button-overlay .content{
    width: 100%;
    text-align: center;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .play-button.play-button-overlay .content img{
    margin-right: 0;
    margin-bottom: 5px;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta{
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    margin-left: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .privacy{
    font-family: "AvenirNext-DemiBold",sans-serif;
    font-size: 9px;
    letter-spacing: 1.1px;
    color: #555555;
    text-transform: uppercase;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .title{
    font-family: "AvenirNext-DemiBold",sans-serif;
    font-size: 15px;
    margin-bottom: 6px;
    letter-spacing: 1.3px;
    color: #FFFFFF;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .created-by{
    font-family: "AvenirNext-Regular",sans-serif;
    font-size: 11px;
    margin-bottom: 5px;
    letter-spacing: 1px;
    color: #878787;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .like{
    margin-bottom: 10px;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .like .heart-container{
    vertical-align: middle;
    width: 38px;
    margin-left: -7px;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .like .heart-container .like-icon-filled{
    /*margin: 0px -37px 0px 13px;*/
    /*left: -34px;*/
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .like .heart-container .like-icon-empty{
    /*margin: 0;*/
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .like .like-button{
    
vertical-align: middle;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .like .like-button .like-count{
    font-family: "AvenirNext-Medium",sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: white;
}
#userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .like .like-button .like-count .likes{
    color: white;
    background: none;
    padding: 0;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical{
    margin: auto;
    margin-top: 15px;
    padding: 15px 0;
    border-top: 1px solid rgba(151, 151, 151, .2);
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-hori-container{
    overflow-x: hidden;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link{
    width: 100%;
    max-width: none;
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    position: relative;
    margin: 0;
    border: 1px solid transparent;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card{
    position: static;
    /*important for react-dnd previews to work*/
    height: 68px;
    -webkit-animation-name: none;
            animation-name: none;
    margin: 0;
    padding: 15px;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .image-container{}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card img{
    height: 40px;
    width: 70px;
    position: static;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card img.drag-handle{
    width: 7px;
    height: 7px;
    position: absolute;
    top: 50%;
    left: 11px;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay{
    text-align: left;
    background-image: none;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info{
    left: 98px;
    top: 28%;
    max-width: 55%;
    max-height: 40px;
    overflow: hidden;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info .artist-name, #userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info .video-name{
    display: block;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .image-hover{
    background-color: inherit;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .remove-item{
    position: absolute;
    top: 5%;
    padding: 20px;
    right: 0;
    z-index: 4;
    cursor: pointer;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .remove-item img{
    width: 20px;
    height: 20px;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card.hover{
    background-color: #2F2F2F;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card.end-drop-placeholder{}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card.end-drop-placeholder:hover{
    background-color: inherit;
}
#userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link.isOver{
    background-color: #2F2F2F;
    border: 1px solid #FFFFFF;
}
#userProfilePlaylistEdit .edit-playlist-btn{
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 15px;
    font-family: "AvenirNext-DemiBold",sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-transform: uppercase;
    cursor: pointer;
}
#userProfilePlaylistEdit .save-cancel-playlist-btns{
    height: auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 300px;
        -ms-flex: 0 0 300px;
            flex: 0 0 300px;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    font-family: "AvenirNext-DemiBold",sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-transform: uppercase;
    cursor: pointer;
}
#userProfilePlaylistEdit .save-cancel-playlist-btns .cancel-edit-playlist-btn{
    display: inline-block;
    padding: 8px 32px;
    opacity: 0.5;
}
#userProfilePlaylistEdit .save-cancel-playlist-btns .save-edit-playlist-btn{
    position: absolute;
    top: 0;
    right: 15px;
    display: inline-block;
    padding: 8px 32px;
    background-color: white;
    color: black;
}
#userProfilePlaylistEdit .save-cancel-playlist-btns .save-edit-playlist-btn.disabled{
    color: #bbb;
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .back-button{
        height: 30px;
        width: 180px;
    }
}
#userProfilePlaylistEdit.editing .back-button{
    display: none;
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit.editing .back-button{
        display: block;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .editing-playlist{
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 100%;
            -ms-flex: 1 1 100%;
                flex: 1 1 100%;
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1;
        padding-top: 9px;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .editing-playlist .playlist-metadata .image-container{
        padding-left: 24px;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .image-container{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 254px;
            -ms-flex: 0 0 254px;
                flex: 0 0 254px;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .image-container{
        padding-left: 40px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 274px;
            -ms-flex: 0 0 274px;
                flex: 0 0 274px;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .play-button{
        display: block;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .play-button.play-button-overlay .content img{
        height: 14px;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .play-button.play-button-overlay{
        font-size: 14px;
        left: 15px;
        width: 239px;
        height: 135px;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .play-button.play-button-overlay{
        display: none;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta{
        margin-left: 20px;
        margin-top: 24px;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta{
        margin-top: 0;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .title{
        font-size: 18px;
        margin-bottom: 10px;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .title{
        font-size: 24px;
        letter-spacing: 1px;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .playlist-info .playlist-meta .created-by{
        font-size: 11px;
        margin-bottom: 8px;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card{
        height: 88px;
        padding: 15px;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card{
        padding: 15px 20px 15px 38px;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .image-container{
        top: 11px;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card img{
        height: 67px;
        width: 118px;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info{
        max-width: 73%;
        left: 135px;
        top: 14%;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .video-info-overlay .video-info{
        max-width: 60%;
    }
}
@media (min-width: 768px){
    #userProfilePlaylistEdit .editing-playlist .feed-template.forceVertical .feed-card-outer-link .trending-card .remove-item{
        top: 18%;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .edit-playlist-btn{
        height: 30px;
        position: static;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 150px;
            -ms-flex: 0 0 150px;
                flex: 0 0 150px;
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
            -ms-flex-order: 2;
                order: 2;
        top: auto;
        right: auto;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .save-cancel-playlist-btns{
        height: 30px;
    }
}
@media (min-width: 1200px){
    #userProfilePlaylistEdit .save-cancel-playlist-btns .save-edit-playlist-btn{
        position: static;
        top: auto;
        right: auto;
    }
}
.rangeslider{
    margin: 20px 0;
    position: relative;
    background: #e6e6e6;
}
.rangeslider .rangeslider__fill, .rangeslider .rangeslider__handle{
    position: absolute;
}
.rangeslider, .rangeslider .rangeslider__fill{
    display: block;
}
.rangeslider .rangeslider__handle{
    background: white;
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    position: absolute;
}
.rangeslider .rangeslider__handle:active{
    background: #999;
}
/**
 * Rangeslider - Horizontal slider
 */
.rangeslider-horizontal{
    height: 3px;
    border-radius: 10px;
}
.rangeslider-horizontal background-color: 
    .rangeslider__fill{
    height: 100%;
    background: white;
    border-radius: 10px;
    top: 0;
}
.rangeslider-horizontal .rangeslider__handle{
    width: 13px;
    height: 13px;
    border-radius: 50%;
    top: -5px;
}
/**
 * Rangeslider - Vertical slider
 */
.rangeslider-vertical{
    margin: 20px auto;
    height: 150px;
    max-width: 10px;
    background: none;
}
.rangeslider-vertical .rangeslider__fill{
    width: 100%;
    background: #27ae60;
    box-shadow: none;
    bottom: 0;
}
.rangeslider-vertical .rangeslider__handle{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    top: -2px;
}
.rangeslider-vertical .rangeslider__handle:active{
    box-shadow: none;
}
.notification{
    letter-spacing: 1px;
}
.notification .notification-message{
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}
.notification .notification-action-wrapper{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
.notification .notification-action-wrapper .notification-action-button{
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
}
#activation-container{
    background: url("/nucleus/img/vevo_crowd_v2_dark_med.69274cb6.jpg");
    background-size: cover;
    background-position: center, center;
    width: 100%;
    min-height: 80vh;
    position: relative;
    margin: 0 auto;
    padding-top: 20vh;
    padding-bottom: 20vh;
    font-family: "Avenir Next", sans-serif;
    font-size: 18px;
}
#activation-container .title{
    margin: 0 auto;
    width: 90%;
    max-width: 433px;
    font-family: "AvenirNext-Bold", sans-serif;
    font-size: 1em;
    height: 32px;
    text-transform: uppercase;
    text-align: center;
    line-height: .9;
    letter-spacing: 2px;
}
#activation-container .message, #activation-container .footer-message, #activation-container .form-message{
    margin: 0 auto;
    max-width: 298px;
    width: 90%;
    font-size: .67em;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 1px;
}
#activation-container .footer-message{
    color: #9b9b9b;
    max-width: 328px;
    line-height: 1.5;
    letter-spacing: 1px;
    margin-top: 17px;
    padding: 0 15;
}
#activation-container .footer-message a{
    display: block;
    margin-top: -10px;
    color: #fff;
    text-decoration: none;
}
#activation-container .footer-message a:hover{
    color: #9b9b9b;
}
#activation-container .form-message{
    font-size: .61em;
    font-family: "AvenirNext-Bold", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    margin-top: 11px;
}
#activation-container .hide{
    display: none;
}
#activation-container form{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 47px;
    max-width: 288px;
    position: relative;
}
#activation-container input{
    display: block;
    max-width: 288px;
    width: 90%;
    margin: 0 auto;
    margin-top: 56px;
    padding-bottom: 12px;
    padding-left: 11px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: .77em;
    letter-spacing: 1.8px;
}
#activation-container input:focus{
    outline: none;
}
#activation-container input::-webkit-input-placeholder{
    color: #7b7b7b;
    letter-spacing: 1.8;
    font-size: 0.8em;
    text-transform: uppercase;
}
#activation-container input::-moz-placeholder{
    color: #7b7b7b;
    letter-spacing: 1.8;
    font-size: 0.8em;
    text-transform: uppercase;
}
#activation-container input:-moz-placeholder{
    /* Older versions of Firefox */
    color: #7b7b7b;
    letter-spacing: 1.8;
    font-size: 0.8em;
    text-transform: uppercase;
}
#activation-container input:-ms-input-placeholder{
    color: #7b7b7b;
    letter-spacing: 1.8;
    font-size: 0.69em;
    text-transform: uppercase;
}
/* MS Edge needs TWO colons... */
#activation-container input::-ms-input-placeholder{
    color: #7b7b7b;
    letter-spacing: 1.8;
    font-size: 0.69em;
    text-transform: uppercase;
}
#activation-container .arrow{
    display: none;
    background: transparent;
    color: #FFFFFF;
    border: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    width: 10px;
    height: 10px;
    position: absolute;
    top: 6px;
    right: 25px;
}
#activation-container .arrow::after{
    content: "";
    border-top: 1px solid #FFFFFF;
    display: block;
    margin-top: 4px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    width: 14px;
    margin-left: -2.5px;
}
#activation-container button{
    max-width: 288px;
    width: 90%;
    height: 60px;
    margin: 0 auto;
    margin-top: 34px;
    font-size: .78em;
    text-align: center;
    color: #fff;
    background-color: #000;
    border: 1px solid #fff;
    cursor: pointer;
}
#activation-container button:focus{
    outline: none;
}
#activation-container.error form input{
    border-bottom: 1px solid #ce0000;
}
#activation-container.error form .arrow{
    display: block;
}
#activation-container.error .footer-message{
    max-width: 306px;
}
@media (min-width: 1024px){
    #activation-container{
        background: url("/nucleus/img/vevo_crowd_v2_dark_large.f2468478.jpg");
        background-size: cover;
        background-position: center, center;
    }
}

body{
    background: #000000;
    color: #f6f6f7;
    margin: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.blank {
    height: 80VH;
}

.blank .blank-search {
    text-align: center;
    position: relative;
    top: 20%;
    font-size: 12px;
    letter-spacing: 2.7;
    font-family: "Avenir Next",sans-serif;
    text-transform: uppercase
}

@media (min-width: 768px){
    .blank .blank-search{
        font-size: 16px;
    }
        }

@media (min-width: 1200px){
    .blank .blank-search{
        font-size: 20px;
    }
        }
input {
    border-radius: 0; /* iOS safari adds rounded borders for some reason */
}
.main-content{
    font-family: "Avenir Next",sans-serif;
    margin: 50px auto 0 auto;
    position:relative;
    width: 100%
}
.main-content.banner-open{
    margin-top: 125px;
}
.main-content.watch-page{
    background-color: #000000;
}
@media (min-width: 480px) and (max-height: 415px) and (orientation: landscape){
    .main-content.watch-page{
        margin-top: 0;
    }
}
.main-content.ftue-page, .main-content.home-page, .main-content.user-profile{
    margin-top: 0;
}