*{margin: 0; padding: 0;}
html, body{width: 100%; height: 100%;}
body{background:  #2B2B2B; color: #D5D5D5;}
.wrapper{margin: 0; padding: 0; width: 100%; min-height: 100vh; display: flex; flex-direction: column;}
header{
    background: #2F2E2E;
}
.navbar-nav:after {background-color: #343a40;}
.navbar .nav-link::after, .effect-link::after{border-bottom: solid 1px; border-top: none; border-left: none; border-right: none; content: ''; display: block; margin-top: 1px; transform: scaleX(0); transform-origin: left; transition: transform 250ms cubic-bezier(0.645, 0.045, 0.355, 1);}
.navbar .nav-item:not(.no-dec) .nav-link:hover::after, .navbar .active:not(.no-dec) .nav-link::after, .effect-link:hover::after{transform: scaleX(1);}
.sg-box{
    width: 52px;
    height: 52px;
    position: relative;
}
#sg{
    letter-spacing:0.1em;
    color:rgb(198, 164, 126);
    font-family:"open sans", sans-serif;
    font-size:21px;
    font-weight:700;
}
.box {
    border: 3px solid rgb(149, 123, 95);
    background-color:rgba(43, 43, 43, 0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#SOG{
    letter-spacing:0.05em;
    color:rgb(198, 164, 126);
    font-family:"open sans", sans-serif;
    font-size:21px;
    font-weight:700;
}
#mainMenu{
    --trans: color 0.4s ease 0s;
}
#mainMenu .nav-item a{
    font-family: Arial,Helvetica,sans-serif;
    color:rgb(213, 213, 213);
    text-transform: uppercase;
    font-size:12px;
    text-decoration: none;
}
#mainMenu .nav-item a:hover{
    text-decoration: none;
    color:rgb(149, 123, 95);
    transition: var(--trans,color .4s ease 0s);
}
#mainMenu .nav-item a.active{
    color:rgb(149, 123, 95);
}
.content{margin: auto; width: 100%; height: 100%;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-direction: column;
}
footer{
    background: #000000;
    color:rgb(128, 128, 128);
    font-family:"open sans", sans-serif;
    font-size: 15px;
    z-index: 1;
}
footer .contact{
    letter-spacing:3px;
}
#langs{
    position: absolute;
    top: -25px;
    right: -2px;
}
#langs>a{
    margin-left: 8px;
}
#langs>a.current{
    opacity: .6;
    pointer-events: none;
}
@media (max-width: 1199.98px){
}
@media (max-width: 991.98px){
    body{top: 0;}
    .wrapper {min-height: calc(100vh - 68px);}
    header{position: fixed; top: 0; right:0; background: #343a40; width: 100%; height: 68px; z-index: 1050; border-bottom: 1px solid #2e343a;}
    .navbar .active .nav-link{ color: #c0abd8;}
    html{padding-top: 68px;} /* паддинг хедера */
    #mainMenu .nav-item a {font-size: 20px; line-height: 2.7rem;}
}
@media (max-width: 767.98px){
    .wrapper{
        background-size: unset !important;
        background-position: top center !important;
        background-repeat: no-repeat;
    }
}
@media (max-width: 499.98px){
}
@media (min-width: 768px) {
    .modal-body{
        min-width: 500px;
    }

}
@media (min-width: 992px) {
    header{/*background: rgba(14,9,41,.8);    box-shadow: 0 0.1rem .7rem rgba(14,9,41,0.7) !important;*/}
    /*footer{margin-top: 60px;}*/

}

.playlist-cont{overflow-x: hidden; overflow-y: auto;}
.playlist-cont::-webkit-scrollbar {width:0px;}
.playlist{position: absolute; padding: 0 8px; left: 0;}
.playlist a {display: block; margin-bottom: 10px; position: relative; transition: .7s; color: #e7dff0;}
.playlist a:hover{color: #c0abd8;}
.playlist a span{transition: .7s;}
.playlist a:last-child {margin-bottom: 0;}
.playlist a.playing{pointer-events: none;}
.playlist a span {display: flex; position: absolute; width: 100%; height: 100%; top:0; left: 0; flex-direction: column; opacity: 0;}
.playlist a span i{
    position: absolute;
    width: 100%;
    font-style: normal;
    color: #fff;
    text-align: center;
    bottom: 0;
}
.playlist a.playing span, .playlist a:hover>span{background: rgba(0,0,0,.7); opacity: 1;}
.playlist a.playing span:after, .playlist a:hover>span:after {
    content: "";
    width: 100%;
    height: 100%;
}
.playlist:not(.pl-audio) a.playing span:after, .playlist:not(.pl-audio) a:hover>span:after{
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAzNTcgMzU3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNTcgMzU3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+Cgk8ZyBpZD0icGxheS1hcnJvdyI+CgkJPHBvbHlnb24gcG9pbnRzPSIzOC4yNSwwIDM4LjI1LDM1NyAzMTguNzUsMTc4LjUgICAiIGZpbGw9IiNFN0RGRjAiLz4KCTwvZz4KPC9zdmc+);
    background-position: center;
    background-repeat: no-repeat;
}
.playing.pause span:after, .playing.pause i:after, .playing.stop span:after, .playing.stop i:after{animation: none;}
/*pulse*/
.playing span:after, .playing i:after{display:block;z-index:1;backface-visibility:hidden;-webkit-animation:bubble_out .7s infinite ease-in-out both;-moz-animation:bubble_out .7s infinite ease-in-out both;animation:bubble_out .7s infinite ease-in-out both}
@-moz-keyframes bubble_out{0%,100%{-webkit-transform:scale(0.66);-moz-transform:scale(0.66);-ms-transform:scale(0.66);-o-transform:scale(0.66);transform:scale(0.66)}
    50%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes bubble_out{0%,100%{-webkit-transform:scale(0.66);-moz-transform:scale(0.66);-ms-transform:scale(0.66);-o-transform:scale(0.66);transform:scale(0.66)}
    50%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)} }
@-o-keyframes bubble_out{0%,100%{-webkit-transform:scale(0.66);-moz-transform:scale(0.66);-ms-transform:scale(0.66);-o-transform:scale(0.66);transform:scale(0.66)}
    50%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)} }
@-ms-keyframes bubble_out{0%,100%{-webkit-transform:scale(0.66);-moz-transform:scale(0.66);-ms-transform:scale(0.66);-o-transform:scale(0.66);transform:scale(0.66)}
    50%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)} }
@keyframes bubble_out{0%,100%{-webkit-transform:scale(0.66);-moz-transform:scale(0.66);-ms-transform:scale(0.66);-o-transform:scale(0.66);transform:scale(0.66)}
    50%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)} }
/*pulse*/