* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    -webkit-tap-highlight-color: transparent;
}

html {
    background-image: url(../img/bg-pattern.jpg);
    background-repeat: repeat;
}

body {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    
}

/********************************************соц сети**********************************/
.social {
	z-index: 20;
}
.social.nobg {
	background: none;
}
.social.white {
	background: none;
}
.social li {
	float: left;
	margin: 0 10px 0 0;
    list-style: none;
}
.social a {
	display: block;
	width: 28px;
	height: 22px;
}
.tw-link {
	background: url(../img/soc/tw.png) no-repeat center center;
}
.fa-link {
	background: url(../img/soc/fa.png) no-repeat center center;
}
.p-link {
	background: url(../img/soc/p.png) no-repeat center center;
}
.in-link {
	background: url(../img/soc/insta.png) no-repeat center center;
}
.vk-link {
	background: url(../img/soc/vk.png) no-repeat center center;
}
.tl-link {
	background: url(../img/soc/tele.png) no-repeat center center;
}


.tw-link:hover {
	background: url(../img/soc/twitter_big.png) no-repeat center center;
}
.fa-link:hover {
	background: url(../img/soc/FB_big.png) no-repeat center center;
}
.p-link:hover {
	background: url(../img/soc/pin_big.png) no-repeat center center;
}
.in-link:hover {
	background: url(../img/soc/insta2x.png) no-repeat center center;
}
.vk-link:hover {
	background: url(../img/soc/vk2x.png) no-repeat center center;
}

.tl-link:hover {
	background: url(../img/soc/tele2x.png) no-repeat center center;
}


.white .tw-link {
	background: url(../img/soc/tw-b.png) no-repeat center center;
}
.white .p-link {
	background: url(../img/soc/p-b.png) no-repeat center center;
}
.white .fa-link {
	background: url(../img/soc/fa-b.png) no-repeat center center;
}
.white .in-link {
	background: url(../img/soc/insta_g.png) no-repeat center center;
}
.white .vk-link {
	background: url(../img/soc/VK_g.png) no-repeat center center;
}

.white .tw-link:hover {
	background: url(../img/soc/twitter_big02.png) no-repeat center center;
}
.white .fa-link:hover {
	background: url(../img/soc/FB_big02.png) no-repeat center center;
}
.white .p-link:hover {
	background: url(../img/soc/pin_big02.png) no-repeat center center;
}
.white .in-link:hover {
	background: url(../img/soc/insta_g_big.png) no-repeat center center;
}
.white .vk-link:hover {
	background: url(../img/soc/VK_g_big.png) no-repeat center center;
}

.wrap {
    position: absolute;
    height: 100%;
    /*min-height: 700px;*/
    width: 100%;
    left: 0px;
    top: 0px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.head {
    padding-top: 60px;
    text-align: center;
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
            flex: 0 0 auto;
}

.head .logo {
    display: block;
}

.head img {
    vertical-align: middle;
}

.head h1 {
    margin: 15px 0 6px;
    display: inline-block;
    color: #0078ff;
    font-size: 18px;
    font-family: 'Conv_Gotham-Bold';
}

.head .dot {
    vertical-align: middle;
    margin: 0 5px;
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0078ff;
}

.head .sub-title {
    letter-spacing: 2px;
    font-size: 12px;
    display: block;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}

.container {
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
}

.equalizer {
    font-size: 0px;
    overflow: hidden;
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
            flex: 0 0 auto;
}

.equalizer .bar {
    display: inline-block;
    height: 22px;
    width: 2px;
    margin: 0 1px;
    background-image: repeating-linear-gradient(0deg, #a2a3a3 0px, #a2a3a3 2px, transparent 2px, transparent 4px);
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    -webkit-animation: 0.8s BarMove linear infinite;
            animation: 0.8s BarMove linear infinite;
}

.equalizer .bar:nth-child(1) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
}

.equalizer .bar:nth-child(2) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.equalizer .bar:nth-child(3) {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
}

.equalizer .bar:nth-child(4) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
}

.equalizer .bar:nth-child(5) {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}

.equalizer .bar:nth-child(6) {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
}

.equalizer.off .bar {
    -webkit-animation: none !important;
}

.pleer {
    margin: 35px 0 70px;
    text-align: center;
}

.pleer .volume {
    display: inline-block;
    vertical-align: middle;
    margin-right: 90px;
}

.pleer .volume .button-name {
    left: -100px;
}

.pleer .play-btn {
    display: inline-block;
    vertical-align: middle;
}

.pleer .play-btn .button-name {
    right: -80px;
}

.button-name {
    color: #0078ff;
    font-size: 12px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
}

.play-btn {
    width: 104px;
    height: 104px;
    position: relative;
    cursor: pointer;
}

.play-btn .base {
    width: 100%;
    height: 100%;
    background-image: url(../img/play-btn.png);
}

.play-btn:before, .play-btn:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.play-btn:before {
    background-image: url(../img/play-ico.png);
}

.play-btn:after {
    -webkit-transform: scale(0);
            transform: scale(0);
    background-image: url(../img/pause-ico.png);
}

.play-btn.active .base {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.play-btn.active:after {
    -webkit-transform: scale(1);
            transform: scale(1);
}

.play-btn.active:before {
    -webkit-transform: scale(0);
            transform: scale(0);
}

.volume {
    width: 200px;
    height: 200px;
    position: relative;
}

.volume.active .light {
    opacity: 1;
}

.volume .knob {
    width: 200px;
    height: 200px;
    position: relative;
}

.volume .base {
    width: 100%;
    height: 100%;
    background-image: url(../img/base.png);
}

.volume .knob-rotate {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.volume .knob-rotate .knob-inner {
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
}

.volume .ring {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url("../img/knob.png");
    background-repeat: no-repeat;
    background-position: center;
}

.volume .light {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url("../img/light.png");
    background-repeat: no-repeat;
    background-position: 50% 45px;
}

.volume .scale {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-136deg);
            transform: rotate(-136deg);
}

.volume .scale .item {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.volume .scale .item.active:after {
    background: #0078ff;
    color: #0078ff !important;
}

.volume .scale .item:first-child:after {
    content: "0";
    color: #000;
    background: none;
    height: auto;
    width: auto;
    font-size: 14px;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
            transform: translate(-50%, -50%) rotate(135deg);
}

.volume .scale .item:last-child:after {
    content: "100";
    color: #000;
    background: none;
    height: auto;
    width: auto;
    font-size: 14px;
    -webkit-transform: translate(-50%, -50%) rotate(-135deg);
            transform: translate(-50%, -50%) rotate(-135deg);
}

.volume .scale .item:after {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #303030;
    top: -15px;
    left: 50%;
    font-size: 12px;
}

.timing {
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
            flex: 0 0 auto;
}

.track-info {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.track-text {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    margin: 0 5px 0 10px;
    overflow: hidden;
    white-space: nowrap;
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
            flex: 1 1 auto;
}

.track-text .track-text-inner {
    min-width: 100%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-animation: 10s TextMove linear infinite;
            animation: 10s TextMove linear infinite;
}

.track-text .artist {
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
            flex: 0 0 auto;
    font-weight: 500;
    margin-right: 10px;
}

.track-text .name {
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    font-weight: 300;
}

.footer {
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
            flex: 0 0 auto;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
            justify-content: space-between;
    width: 100%;
    max-width: 400px;
    margin: 40px auto 20px;
}

.footer > * {
    color: #000;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
}

.footer img {
    margin-right: 5px;
}

.footer a {
    text-decoration: none;
}

.footer a:hover {
    color: #0078ff;
}

.scale .item:nth-child(1) {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}

.scale .item:nth-child(2) {
    -webkit-transform: rotate(13.5deg);
            transform: rotate(13.5deg);
}

.scale .item:nth-child(3) {
    -webkit-transform: rotate(27deg);
            transform: rotate(27deg);
}

.scale .item:nth-child(4) {
    -webkit-transform: rotate(40.5deg);
            transform: rotate(40.5deg);
}

.scale .item:nth-child(5) {
    -webkit-transform: rotate(54deg);
            transform: rotate(54deg);
}

.scale .item:nth-child(6) {
    -webkit-transform: rotate(67.5deg);
            transform: rotate(67.5deg);
}

.scale .item:nth-child(7) {
    -webkit-transform: rotate(81deg);
            transform: rotate(81deg);
}

.scale .item:nth-child(8) {
    -webkit-transform: rotate(94.5deg);
            transform: rotate(94.5deg);
}

.scale .item:nth-child(9) {
    -webkit-transform: rotate(108deg);
            transform: rotate(108deg);
}

.scale .item:nth-child(10) {
    -webkit-transform: rotate(121.5deg);
            transform: rotate(121.5deg);
}

.scale .item:nth-child(11) {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
}

.scale .item:nth-child(12) {
    -webkit-transform: rotate(148.5deg);
            transform: rotate(148.5deg);
}

.scale .item:nth-child(13) {
    -webkit-transform: rotate(162deg);
            transform: rotate(162deg);
}

.scale .item:nth-child(14) {
    -webkit-transform: rotate(175.5deg);
            transform: rotate(175.5deg);
}

.scale .item:nth-child(15) {
    -webkit-transform: rotate(189deg);
            transform: rotate(189deg);
}

.scale .item:nth-child(16) {
    -webkit-transform: rotate(202.5deg);
            transform: rotate(202.5deg);
}

.scale .item:nth-child(17) {
    -webkit-transform: rotate(216deg);
            transform: rotate(216deg);
}

.scale .item:nth-child(18) {
    -webkit-transform: rotate(229.5deg);
            transform: rotate(229.5deg);
}

.scale .item:nth-child(19) {
    -webkit-transform: rotate(243deg);
            transform: rotate(243deg);
}

.scale .item:nth-child(20) {
    -webkit-transform: rotate(256.5deg);
            transform: rotate(256.5deg);
}

.scale .item:nth-child(21) {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
}

@-webkit-keyframes TextMove {
    0% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
    }
}

@keyframes TextMove {
    0% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
    }
}

@-webkit-keyframes BarMove {
    0% {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }

    50% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }

    100% {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }
}

@keyframes BarMove {
    0% {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }

    50% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }

    100% {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }
}

@media screen and (max-width: 1000px) {
    .wrap {
        min-height: 0px;
    }

    .button-name {
        display: none;
    }

    .head {
        padding: 15px 15px 0px;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
                align-items: center;
        -ms-flex-pack: center;
        -webkit-box-pack: center;
                justify-content: center;
        text-align: left;
    }

    .head .logo {
        margin-right: 10px;
    }

    .head h1 {
        margin: 0 0 6px;
    }

    .head .sub-title {
        letter-spacing: normal;
    }

    .pleer {
        margin: 20px 0 20px;
    }

    .pleer .volume {
        display: none;
        margin: 0px auto;
    }

    .play-btn {
        display: block;
        margin: 15px auto;
    }

    .track-info {
        padding: 0 20px;
    }

    .footer {
        padding: 0 20px;
        margin: 30px auto 20px;
    }
}

@media screen and (max-width: 765px) and (orientation: portrait) {
    .play-btn {
        width: 208px;
        height: 208px;
    }

    .play-btn .base {
        width: 100%;
        height: 100%;
        background-image: url(../img/play-btn-big.png);
    }

    .play-btn:before {
        background-image: url(../img/play-ico-big.png);
    }

    .play-btn:after {
        -webkit-transform: scale(0);
                transform: scale(0);
        background-image: url(../img/pause-ico-big.png);
    }
}

@media screen and (max-width: 865px) and (orientation : landscape) {
    .play-btn {
        position: fixed;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
    }
    .container {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        padding-bottom: 15px;
    }
    .footer {
        display: none;
    }
}