@import "bootstrap.min.css";
@import "bootstrap-formhelpers.min.css";
@import "owl.carousel.min.css";
@import "owl.theme.min.css";
@import "owl.transitions.min.css";
@import "font-awesome.min.css";

@font-face {
    font-family: 'HelveticaNeueLTCom-Lt';
    src: url('../fonts/HelveticaNeueLTCom-Lt.eot'); /* IE9 Compat Modes */
    src: local('HelveticaNeueLTCom-Lt Light'), local('HelveticaNeueLTCom-Md-Light'),
    url('../fonts/HelveticaNeueLTCom-Lt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/HelveticaNeueLTCom-Lt.woff') format('woff'), /* Modern Browsers */
    url('../fonts/HelveticaNeueLTCom-Lt.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/HelveticaNeueLTCom-Lt.svg#HelveticaNeueLTCom-Lt') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'HelveticaNeueLTCom-Lt';
    src: url('../fonts/HelveticaNeueLTCom-Lt.eot'); /* IE9 Compat Modes */
    src: local('HelveticaNeueLTCom-Lt Light'), local('HelveticaNeueLTCom-Md-Light'),
    url('../fonts/HelveticaNeueLTCom-Lt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/HelveticaNeueLTCom-Lt.woff') format('woff'), /* Modern Browsers */
    url('../fonts/HelveticaNeueLTCom-Lt.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/HelveticaNeueLTCom-Lt.svg#HelveticaNeueLTCom-Lt') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'HelveticaNeueLTCom-Md';
    src: url('../fonts/HelveticaNeueLTCom-Md.eot'); /* IE9 Compat Modes */
    src: local('HelveticaNeueLTCom-Md Medium'), local('HelveticaNeueLTCom-Md-Medium'),
    url('../fonts/HelveticaNeueLTCom-Md.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/HelveticaNeueLTCom-Md.woff') format('woff'), /* Modern Browsers */
    url('../fonts/HelveticaNeueLTCom-Md.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/HelveticaNeueLTCom-Md.svg#HelveticaNeueLTCom-Md') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'HelveticaNeueLTCom-Hv';
    src: url('../fonts/HelveticaNeueLTCom-Hv.eot'); /* IE9 Compat Modes */
    src: local('HelveticaNeueLTCom-Hv Heavy'), local('HelveticaNeueLTCom-Hv-Heavy'),
    url('../fonts/HelveticaNeueLTCom-Hv.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/HelveticaNeueLTCom-Hv.woff') format('woff'), /* Modern Browsers */
    url('../fonts/HelveticaNeueLTCom-Hv.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/HelveticaNeueLTCom-Hv.svg#HelveticaNeueLTCom-Hv') format('svg'); /* Legacy iOS */
}


@font-face {
    font-family: 'HelveticaNeueLTCom-Bd';
    src: url('../fonts/HelveticaNeueLTCom-Bd.eot'); /* IE9 Compat Modes */
    src: local('HelveticaNeueLTCom-Bd Bold'), local('HelveticaNeueLTCom-Bd-Bold'),
    url('../fonts/HelveticaNeueLTCom-Bd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/HelveticaNeueLTCom-Bd.woff') format('woff'), /* Modern Browsers */
    url('../fonts/HelveticaNeueLTCom-Bd.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/HelveticaNeueLTCom-Bd.svg#HelveticaNeueLTCom-Bd') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'HelveticaNeueLTCom-Blk';
    src: url('../fonts/HelveticaNeueLTCom-Blk.eot'); /* IE9 Compat Modes */
    src: local('HelveticaNeueLTCom-Blk Black'), local('HelveticaNeueLTCom-Blk-Black'),
    url('../fonts/HelveticaNeueLTCom-Blk.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/HelveticaNeueLTCom-Blk.woff') format('woff'), /* Modern Browsers */
    url('../fonts/HelveticaNeueLTCom-Blk.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/HelveticaNeueLTCom-Blk.svg#HelveticaNeueLTCom-Blk') format('svg'); /* Legacy iOS */
}

body {font-family: 'HelveticaNeueLTCom-Md'}
body a {
    color: #000;
    text-decoration: none!important;
}
body .h1,
body .h4,
body .h5 {font-family: 'HelveticaNeueLTCom-Bd'}
body .h6 {font-family: 'HelveticaNeueLTCom-Hv'}
body .h7 {font-family: 'HelveticaNeueLTCom-Lt'}

body:before {
    content: '';
    background: rgba(0, 0, 0, 0.77);
    position: fixed;
    opacity: 0;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    -webkit-transition: All .3s ease-in;
    -moz-transition: All .3s ease-in;
    -ms-transition: All .3s ease-in;
    -o-transition: All .3s ease-in;
    transition: All .3s ease-in;
}
body.active:before {
    opacity: 1;
    visibility: visible;
}
.pointer {cursor: pointer!important}
.mxm-2 {margin: 0 -5px!important}
.mtm-3 {margin-top: -30px!important;}
.font-weight-bolder {font-weight: 900!important}

.font-11 {font-size: 11px!important}
.font-13 {font-size: 13px!important}

.bg-black {background: #000!important}
.bg-gray {background: #e2e3e4!important}

.bg-lighGreen {background: #04b750!important}
.bg-weightGreen {background: #1ab26b!important}

.over-hidden {overflow: hidden!important}
.over-initial {overflow: initial!important}
.relative {position: relative!important}
.absolute {position: absolute!important}

.imgCont.big {width: 300px}
.imgCont img {max-width: 100%}
.container {max-width: 640px}
.popover-hide {display: none}

/*Navbar*/
.navbar li a {
    font-family: 'HelveticaNeueLTCom-Hv';
    -webkit-transition: All .2s linear;
    -moz-transition: All .2s linear;
    -ms-transition: All .2s linear;
    -o-transition: All .2s linear;
    transition: All .2s linear;
}
.navbar li:hover a {color: red}
.nav-link {
    font-size: 15px;
    padding: 16px 15px !important;
}
.navbar-brand {
    width: 130px;
    height: 50px;
    margin: 0 auto;
}
.navbar-toggler {
    position: absolute;
    top: 10px;
}
.navbar-toggler svg {
    width: 60px;
    height: 45px;
    cursor: pointer;
    margin-left: -10px;
    text-align: center;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.navbar-toggler path {
    fill: none;
    -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    stroke-width: 40px;
    stroke-linecap: round;
    stroke: #000;
    stroke-dashoffset: 0px;
}
.navbar-toggler path#top,
.navbar-toggler path#bottom {stroke-dasharray: 240px 950px}
.navbar-toggler path#middle {stroke-dasharray: 240px 240px}

.navbar-toggler.active path#top,
.navbar-toggler.active path#bottom {
    stroke-dashoffset: -650px;
}
.navbar-toggler.active path#middle {
    stroke-dashoffset: -115px;
    stroke-dasharray: 1px 220px;
}

.navbar-brand img {max-height: 100%}



/*Loading*/
.loadings {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    -webkit-transition: All .5s ease-in-out;
    -moz-transition: All .5s ease-in-out;
    -ms-transition: All .5s ease-in-out;
    -o-transition: All .5s ease-in-out;
    transition: All .7s ease-in-out;
}
.loadings.active {
    opacity: 0;
    visibility: hidden;
}
.loadings .innerBox {
    width: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px;
    margin-left: -125px;
}
.loadings .innerBox span {font-size: 15px}


/*Main Content*/
.mainContent {
    background: #f8f9fa;
    min-height: 517px;
    margin-top: 65px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: All .2s ease;
    -moz-transition: All .2s ease;
    -ms-transition: All .2s ease;
    -o-transition: All .2s ease;
    transition: All .2s ease;
}
.mainContent.active {
    opacity: 1;
    visibility: visible;
}


/*Image Loaded*/
.checkImg .is-loading .imgCont {
    background-image: url(../img/Spinner.svg);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 50;
}
.checkImg .is-broken .imgCont {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/broken.png');
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    z-index: 50;
}
.checkImg .is-loading .imgCont img,
.checkImg .is-broken .imgCont img {opacity: 0}






/*Logo Artist*/
.logoArtist .imgCont {width: 170px}


/*Top Slider*/
.topSlider.owl-carousel .item {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: block;
}
.topSlider .owl-carousel .item img {
    max-width: 100%;
    min-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.topSlider .owl-pagination {
    width: 250px;
    margin-left: -125px;
    position: absolute;
    left: 50%;
    bottom: 10px;
}
.owl-theme .owl-controls .owl-page span {
    background: #869791;
    width: 5px;
    height: 5px;
    margin-bottom: 0;
    filter: Alpha(Opacity=100);
    opacity: 1;
}
.owl-theme#mSlider .owl-controls .owl-page span {
    width: 15px;
    height: 15px;
    border: 2px solid #000;
}
.owl-theme .owl-controls .owl-page.active span {
    background: red;
    border-color: #ccc
}
.owl-theme .owl-controls {margin: 0 !important;}

#albumSlider .owl-controls {
    margin-top: 30px;
}

/*Bars Carousel*/
#bar{
    width: 0;
    max-width: 100%;
    height: 4px;
    background: red;
}
#progressBar{
    width: 100%;
    background: #EDEDED;
}



/*Heading*/
.heading:before {
    content: '';
    width: 50px;
    border-bottom: 3px solid red;
    margin-left: -25px;
    position: absolute;
    left: 50%;
    bottom: -10px;
    display: block;
}


/*Effect Shadow*/
.cstStyle .imgCont:after {
    content: '';
    background: -moz-linear-gradient(top,rgba(0,0,0,0) 60%,rgba(0,0,0,0.83) 120%,rgba(0,0,0,0.85) 100%);
    background: -o-linear-gradient(top,rgba(0,0,0,0) 60%,rgba(0,0,0,0.83) 120%,rgba(0,0,0,0.85) 100%);
    background: -ms-linear-gradient(top,rgba(0,0,0,0) 60%,rgba(0,0,0,0.83) 120%,rgba(0,0,0,0.85) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 60%,rgba(0,0,0,0.83) 120%,rgba(0,0,0,0.85) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#d9000000',GradientType=0 );
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.is-loading.cstStyle .imgCont:after {display: none}
.cstStyle .title {
    position: absolute;
    padding: 0 15px 10px;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
}
.owl-carousel .cstStyle .title {
    padding-bottom: 15px;
}
.cstStyle small {
    font-size: 13px;
    bottom: 10px;
    letter-spacing: 1px;
}


/*Video*/
.video .list a:before {
    content: '';
    background: -moz-linear-gradient(to bottom, #00000054 0,rgba(0, 0, 0, 0.19) 60%,rgba(0, 0, 0, 0.98) 87%);
    background: -o-linear-gradient(to bottom, #00000054 0,rgba(0, 0, 0, 0.19) 60%,rgba(0, 0, 0, 0.98) 87%);
    background: -ms-linear-gradient(to bottom, #00000054 0,rgba(0, 0, 0, 0.19) 60%,rgba(0, 0, 0, 0.98) 87%);
    background: linear-gradient(to bottom, #00000054 0,rgba(0, 0, 0, 0.19) 60%,rgba(0, 0, 0, 0.98) 87%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000054',endColorstr='#000000fa',GradientType=0 );
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.video .list a:after {
    content: '';
    width: 0;
    border-bottom: 3px solid red;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    -webkit-transition: All .2s linear;
    -moz-transition: All .2s linear;
    -ms-transition: All .2s linear;
    -o-transition: All .2s linear;
    transition: All .2s linear;
}
.video .list:hover a:after {width: 100%}
.video .list .imgCont {min-height: 225px;}
.video .list .title {
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 20;
}
.video .list .icon {
    font-size: 0;
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 10;
    -webkit-transition: All .2s linear;
    -moz-transition: All .2s linear;
    -ms-transition: All .2s linear;
    -o-transition: All .2s linear;
    transition: All .2s linear;
}
.video .list:hover .icon {
    font-size: 25px;
}
.videoCont {
    border-left: 2px solid #000;
    border-right: 2px solid #000;
}



/*Artist*/
.artist .imgCont img {
    width: 100%;
    -webkit-transition: All .3s linear;
    -moz-transition: All .3s linear;
    -ms-transition: All .3s linear;
    -o-transition: All .3s linear;
    transition: All .3s linear;
}

/*Artist Detail*/
.artistDetail .infoDetail ul {
    list-style: none;
    padding-left: 0;
}
.artistDetail .infoDetail li {
    font-size: 15px;
    padding-left: 25px;
    margin-bottom: 10px;
    position: relative;
}
.artistDetail .infoDetail li:before {
    content: "";
    background: #000;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 6px;
    left: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
.otherInfo label {min-width: 130px}
.otherInfo label:after {
    content: ':';
    padding: 0 10px;
    float: right;
    display: inline-block;
}

/*Tabs*/
.tabInfo .nav {
    position: relative;
    top: -55px;
}
.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-bottom: 0;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {color: red}

.artist .list .imgCont,
#albumSlider .list .imgCont,
.newRelease .list .imgCont {min-height: 170px}



/*Release Detiail*/
.brandLogo {
    background-repeat: no-repeat;
    background-size: 100%;
    width: 150px;
    height: 50px;
}
.brandLogo.Spotify {background-image: url("../img/spotify_logo.png")}
.brandLogo.Joox {
    background-position: 0 6px;
    background-image: url(../img/joox_logo.png);
    width: 110px;
}



/*InstaNews*/
.instaNews .info {min-height: 100px}

/*News Detail*/
.newsDetail .imgCont.big {width: 100%}
.newsDetail .imgCont.big img {min-width: 100%}


/*About Us*/
.aboutUs ul li {
    font-family: 'HelveticaNeueLTCom-Md';
    padding-left: 25px;
    position: relative;
    margin-bottom: 5px;
}
.aboutUs ul li:before {
    content: "";
    background: #000;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 6px;
    left: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}


/*Modal*/
.modal-body .close {
    position: absolute;
    top: 0;
    right: -30px;
    color: #fff !important;
    opacity: 1 !important;
}
.modal-backdrop.show {opacity: .7}


/*Breadcrumb*/
.breadcrumb li,
.breadcrumb li a {font-size: 13px}


/*Sosmed*/
.sosmed a {
    background: url("../img/sprite_sosmed.png") no-repeat scroll;
    background-size: 126px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
}
.sosmed.white a {
    background-color: transparent;
    font-size: 18px;
}
.sosmed a.facebook {background-position: -58px -29px}
.sosmed a.twitter {background-position: 1px -29px}
.sosmed a.instagram {background-position: -29px -29px}
.sosmed a.youtube {
    width: 37px;
    background-position: -88px -29px;
}
.sosmed.white a.facebook {background-position: -58px 0}
.sosmed.white a.twitter {background-position: 1px 0}
.sosmed.white a.instagram {background-position: -29px 0}
.sosmed.white a.youtube {background-position: -88px 0}




@media (max-width: 575px) {
    .artist .list .imgCont,
    #albumSlider .list .imgCont,
    .newRelease .list .imgCont {
        min-height: 140px;
        max-height: 255px;
    }

    .video .list .imgCont,
    .videoList .list .imgCont {
        width: 110px;
        min-height: 83px;
        float: left;
    }
    .video .list a:before,
    .video .list a:after {display: none}

    .video .list .title,
    .videoList .list .title {
        color: #333;
        font-size: 17px;
        position: static;
        bottom: initial;
    }
    .video .list .icon,
    .videoList .list .icon {
        font-size: 30px;
        margin: -15px 0 0 -15px;
        top: 50%;
        left: 50%;
    }
    .logoArtist .imgCont {width: 145px}
}


@media (max-width: 320px) {
    .artist .list,
    #albumSlider .list,
    .newRelease .list {
        max-width: 100%;
        flex: 0 0100%;
    }
    .artist .list .imgCont,
    #albumSlider .list .imgCont,
    .newRelease .list .imgCont {
         max-height: initial;
    }
}