/* navigation */
.col-10{
    flex:0 0 auto;
}

.navigation {
    margin: 0 auto;
}

.navigation-song {
    width: max-content;
    margin: 0 auto;
}

.navigation-song .button {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin: .5rem 2rem;

    background-repeat: no-repeat;
    background-position: 0 0;
}
.btn-karaoke, .btn-text {
    width: 100px;
    height: 80px;
}

.btn-karaoke.active, .btn-text.active {
    background-position: 0 -80px;
}

.btn-karaoke {
    background-image: url("/application/templates/images/common/songs/buttons-karaoke.png");
}

.btn-text {
    background-image: url("/application/templates/images/common/songs/buttons-text.png");
}

.btn-prev, .btn-next {
    width: 100px;
    height: 104px;

    border-radius: 50%;
}

.btn-prev {
    background-image: url("/application/templates/images/common/songs/buttons-prev.png");
}

.btn-next {
    background-image: url("/application/templates/images/common/songs/buttons-next.png");
}

.btn-prev:active,
.btn-next:active {
    background-position: 0 -104px;
}

.btn-play, .btn-stop {
    width: 190px;
    height: 152px;
}

.btn-play:active,
.btn-stop:active {
    background-position: 0 -152px;
}

.btn-play {
    background-image: url("/application/templates/images/common/songs/buttons-play.png");
}

.btn-stop {
    background-image: url("/application/templates/images/common/songs/buttons-pause.png");
}

/* text style */

.wrap-text {
    width: 92rem;
    background: url("/application/templates/images/common/songs/icon-knopka.png") 99% 15px no-repeat, 
                url("/application/templates/images/common/songs/icon-knopka.png") 2% 15px no-repeat,
                #fff;
    margin: 3rem auto 5rem;
    -webkit-box-shadow: 0px 8px 13px -7px rgb(0 104 55);
    -moz-box-shadow: 0px 8px 13px -7px rgba(0,104,55,1);
    box-shadow: 0px 8px 13px -7px rgb(0 104 55);
    text-align: left;
    border-radius: .5rem;
    font-size: 2rem;
    font-family: 'Stag Sans LC';
    font-weight: 400;
    padding: 5rem 7rem;
    line-height: 3rem;

    color: #000
}

.text-side {
    float: left;
    width: 50%;
}

/* .text-side[data-side="0"] {
    padding-right: 5rem;
} */

.text-side[data-side="1"] {
    padding-left: 5rem;
}

@media (max-width: 700px) {
    html {
        min-width: 0;
    }

    .song-wrap,
    .navigation-song,
    .wrap-text {
        box-sizing: border-box;
        max-width: 100%;
    }

    .song-wrap {
        width: 100%;
        padding: 0 10px;
        overflow-x: hidden;
    }

    .navigation-song {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .navigation-song .button {
        flex: 0 0 auto;
        margin: .5rem .25rem;
    }

    .btn-karaoke,
    .btn-text {
        width: 55px;
        height: 44px;
        background-size: 55px 88px;
    }

    .btn-karaoke.active,
    .btn-text.active {
        background-position: 0 -44px;
    }

    .btn-prev,
    .btn-next {
        width: 55px;
        height: 57px;
        background-size: 55px 114px;
    }

    .btn-prev:active,
    .btn-next:active {
        background-position: 0 -57px;
    }

    .btn-play,
    .btn-stop {
        width: 105px;
        height: 84px;
        background-size: 105px 168px;
    }

    .btn-play:active,
    .btn-stop:active {
        background-position: 0 -84px;
    }

    .wrap-text {
        width: 100%;
        margin: 2rem auto 3rem;
        padding: 4rem 2rem 2rem;
        background-position: calc(100% - 10px) 10px, 10px 10px, 0 0;
        font-size: 1.7rem;
        line-height: 1.5;
    }

    .text-side {
        float: none;
        width: 100%;
    }

    .text-side[data-side="1"] {
        padding-left: 0;
    }
}