/********************POPUP_WINDOW****************/
section.p_w_s{
width: 100%;
height: 100%;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
background: rgb(0 0 0 / 80%);
transition: 0.5s;
z-index: 999999;
}
section.p_w_s.show{
visibility: visible;
}
section.p_w_s.hidden{
visibility: hidden;
}
#p_w_s_container{
transform: translateY(-1000px);
position: absolute;
transition: .3s;
width: 100%;
left: 0;
top: 20%;
height: auto;
visibility: hidden;
}
#p_w_s_container.remove{
transform: translateY(-1000px);
}
#p_w_s_container.active{
transform: translateY(0px);
transition: .3s;
visibility: visible;
}
.p_w_s_box{
width: 700px;
margin: 0 auto;
height: 400px;
border-radius: 10px;
box-shadow: 0px 0px 4px #4f4f4f;
background: linear-gradient(to right, hsl(210, 30%, 20%), hsl(255, 30%, 25%));
display: block;
position: relative;
padding: 20px 30px;
color: hsl(220deg 16% 82%);
}
.p_w_s_box_inner{
overflow: hidden;
overflow-y: scroll;
height: 360px;
}
.p_w_s_box_inner::-webkit-scrollbar {
width: 5px;
opacity: 0.6;/* ширина scrollbar */
}
.p_w_s_box_inner::-webkit-scrollbar-track {
/* цвет дорожки */
}
.p_w_s_box_inner::-webkit-scrollbar-thumb {
background-color: blue;    /* цвет плашки */
border-radius: 20px;       /* закругления плашки */
border: 3px solid #4f4f4f;  /* padding вокруг плашки */
}
.p_w_s_box h3,
.p_w_s_box strong,
.p_w_s_box p,
.p_w_s_box ul {
display: block;
text-align: center;
padding: 0;
color: #ffffff;
font-family: sans-serif;
}
.p_w_s_box h3 {
position: relative;
margin: 0 0 20px 0;
}
.p_w_s_box h3:before {
content: "";
width: 100%;
height: 2px;
position: absolute;
background: #ffffff;
display: flex;
bottom: -10px;
}
.p_w_s_box ul li  {
list-style: none;
padding: 10px 0 0 0;
text-align: justify;
}
.p_w_s_box_close {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
z-index: 9999;
cursor: pointer;
overflow: hidden;
border-radius: 50%;
border: 1px solid rgb(255 255 255 / 50%);
}
.p_w_s_box_close:after,
.p_w_s_box_close:before{
content: '';
transition: .3s;
display: block;
width: 20px;
height: 2px;
top: 13px;
background: rgb(255 255 255 / 50%);
right: 4px;
position: absolute;
}
.p_w_s_box_close:hover:after,
.p_w_s_box_close:hover:before{
transition: .3s;
background: rgb(255 255 255 / 100%);
}
.p_w_s_box_close:after{
transform: rotate(-45deg);
}
.p_w_s_box_close:before{
transform: rotate(45deg);
}
.p_w_s_info{
    cursor: pointer;
    transform: scale(1);
    display: block;
    width: auto;
    height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    background: linear-gradient(to right, hsl(210deg 46% 2%), hsl(255deg 33% 9%));
    position: fixed;
    bottom: 7%;
    right: 10%;
    z-index: 9999;
    color: #ffffff;
    visibility: visible;
    opacity: 1;
    box-shadow: 0px 0px 5px #dedede;
    transition:.3s;
}
.p_w_s_info:hover{
background: linear-gradient(to right, hsl(255deg 33% 9%), hsl(210deg 46% 2%));
box-shadow: 0px 0px 3px #dedede;
transition:.3s;
}
.p_w_s_info i{
position: relative;
display: none;
font-size: 30px;
color: #ffffff;
}
.p_w_s_info span:first-child{transition: .3s;display: none;width: 200px;height: auto;padding: 5px;bottom: 15px;background: #fff;right: 65px;position: absolute;transform: translateY(0px);border-radius: 10px;visibility: hidden;font-size: 14px;opacity: 0;color: #000;font-weight: bold;}
.p_w_s_info span:first-child:before{content: '';display: block;width: 10px;height: 10px;bottom: 10px;background: #fff;transform: rotate(45deg);right: -5px;position: absolute;}
@media(max-width: 767px){
#p_w_s_container{
top: 10%;
}
.p_w_s_box{
width: calc(100% - 10%);
height: 480px;
padding: 15px;
}
.p_w_s_box_inner{
height: 430px;
}
.p_w_s_box_close {
bottom: -60px;
left: 42%;
top: unset;
width: 50px;
height: 50px;
}
.p_w_s_box_close:after,
.p_w_s_box_close:before{
width: 40px;
height: 4px;
top: 22px;
}
.p_w_s_info{padding: 0 10px;right: 3%;}
.p_w_s_info i{
display: block;
}
.p_w_s_info  span{
display: none;
}
.p_w_s_info span:first-child{
display: block;
}
}