#socialproof {
    padding: 0;
    overflow: hidden;
    background: url(../assets/bgsoc.jpg) center / cover no-repeat;
}

.soc_title {
    max-width: 815px;
}

.soc_main {
    height: 1215px;
    position: relative;
    display: flex;
    width: 100%;
}

.soc_main::before {
    background: #13100e00;
}

.soc_block {
    display: flex;
    flex-direction: row;
    max-width: 1420px;
    margin: 0 auto;
    position: relative;
}

.soc_block::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 271px;
    background: linear-gradient(180deg, rgba(19, 16, 14, 0.00) 0%, #13100E 100%), linear-gradient(180deg, rgba(19, 16, 14, 0.00) 0%, #13100E 100%);
    opacity: 1;
    bottom: 0;
    z-index: 200;
    pointer-events: none;
}

.pers {
    width: 355px;
    height: 1042px !important;
    position: relative;
    padding: 36px 0 0;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
}

.pers.visible {
    opacity: 1;
}

.pers:hover .pers_img {
    filter: drop-shadow(0 0 10px #debc6696);
    z-index: 9 !important;
}

.pers:hover .pers_player {
    transform: scale(1.05) rotate(-45deg);
}

.pers_img {
    pointer-events: none;
    transition: all 0.3s linear;
}

.pers_photo {
    width: 100%;
    height: 100%;
    position: relative;
}

.pers_photo::before,
.pers_photo::after {
    content: "";
    position: absolute;
    bottom: 0;
    pointer-events: none;
}

.pers_photo::after {
    z-index: 1 !important;
}

.pers_one .pers_photo::after {
    background: url(../assets/defo.webp) center / contain no-repeat;
    opacity: 1;
    transition: background .2s ease-in-out;
    z-index: 2;
}

.pers_two .pers_photo::after {
    background: url(../assets/flames.webp) center / contain no-repeat;
    opacity: 1;
    transition: background .2s ease-in-out;
    z-index: 1;
}

.pers_three .pers_photo::after {
    background: url(../assets/boh.webp) center / contain no-repeat;
    opacity: 1;
    transition: background .2s ease-in-out;
    z-index: 2;
}

.pers_four .pers_photo::after {
    background: url(../assets/focus.webp) center / contain no-repeat;
    opacity: 1;
    transition: background .2s ease-in-out;
    z-index: 1;
}

.pers_one .pers_photo::before,
.pers_one .pers_photo::after {
    left: -697px;
    width: 1474px;
    height: 1554px;
    bottom: -507px;
}

.pers_two .pers_photo::before,
.pers_two .pers_photo::after {
    left: -250px;
    width: 1138px;
    height: 1355px;
    bottom: -350px;
}

.pers_three .pers_photo::before,
.pers_three .pers_photo::after {
    left: -825px;
    width: 1436px;
    height: 1582px;
    bottom: -560px;
}

.pers_four .pers_photo::before,
.pers_four .pers_photo::after {
    left: -270px;
    width: 867px;
    height: 1387px;
    bottom: -365px;
}

.bubki {
    width: 35px;
    height: 35px;
    background: url(../assets/bub.png) center / contain no-repeat;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    position: absolute;
    top: 6px;
}

.pers:hover .bubki {
    opacity: 1;
}

.active_pers .bubki {
    background: url(../assets/bub_active.png) center / contain no-repeat;
    opacity: 1;
}

.pers_photo::before {
    opacity: 0;
    transition: opacity .2s linear;
}

.active_pers.pers_one .pers_photo::before,
.pers_one:hover .pers_photo::before {
    background: url(../assets/defo_hover.webp) center / contain no-repeat;
    opacity: 1;
    z-index: 3;
}

.active_pers.pers_two .pers_photo::before,
.pers_two:hover .pers_photo::before {
    background: url(../assets/flames_hover.webp) center / contain no-repeat;
    opacity: 1;
    z-index: 2;
}

.active_pers.pers_three .pers_photo::before,
.pers_three:hover .pers_photo::before {
    background: url(../assets/boh_hover.webp) center / contain no-repeat;
    opacity: 1;
    z-index: 3;
}

.active_pers.pers_four .pers_photo::before,
.pers_four:hover .pers_photo::before {
    background: url(../assets/focus_hover.webp) center / contain no-repeat;
    opacity: 1;
    z-index: 2;
}

.active_pers.pers_one .pers_photo::before {
    z-index: 4;
}

.active_pers.pers_two .pers_photo::before {
    z-index: 4;
}

.active_pers.pers_three .pers_photo::before {
    z-index: 4;
}

.active_pers.pers_four .pers_photo::before {
    z-index: 4;
}

.pers_logo {
    width: 42px;
    height: 42px;
    border: 1px solid #C5A351;
    background: linear-gradient(0deg, #191B1F 0%, #191B1F 100%);
}

.pers_name {
    display: flex;
    flex-direction: row;
    gap: 16px;
    max-width: fit-content;
    align-items: center;
    position: relative;
}

.nickname {
    display: flex;
    flex-direction: row;
    gap: 12px;
    max-width: fit-content;
    align-items: center;
}

.pers_one .pers_name {
    padding-left: 48px;
}

.pers_one .bub_left {
    right: 223px;
}

.bub_right {
    right: -50px;
}

.pers_two .pers_name {
    padding-left: 118px;
}

.pers_two .bub_left {
    right: 218px;
}

.pers_three .pers_name {
    padding-left: 140px;
}

.pers_three .bub_left {
    right: 169px;
}

.pers_four .pers_name {
    padding-left: 119px;
}

.pers_four .bub_left {
    right: 230px;
}

.pers_one .pers_logo {
    background-image: url(../assets/daniel.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pers_two .pers_logo {
    background-image: url(../assets/ff.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pers_three .pers_logo {
    background-image: url(../assets/bohpts.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pers_four .pers_logo {
    background-image: url(../assets/fd.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pers_nickname {
    color: #D9D9D9;
    font-family: 'Tahoma';
    font-size: 32px;
    line-height: normal;
}

.pers_player {
    min-width: 70px;
    height: 70px;
    transform: rotate(-45deg);
    background: linear-gradient(180deg, #BD9C49 0%, #E6B843 63.5%, #EECE7F 79%, #8C7845 98.5%);
    padding: 2px;
    position: relative;
    transition: all 0.3s ease;
    position: absolute;
    z-index: 10;
    top: 355px;
}

.pers_inplayer {
    background: #1c160e;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pers_inplayer img {
    transform: rotate(45deg);
    width: 20px;
}

.pers_one .pers_player {
    left: 80px;
}

.pers_two .pers_player {
    left: 165px;
}

.pers_three .pers_player {
    left: 160px;
}

.pers_four .pers_player {
    left: 185px;
}


.soc_main::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 271px;
    background: linear-gradient(180deg, rgba(19, 16, 14, 0.00) 0%, #13100E 100%), linear-gradient(180deg, rgba(19, 16, 14, 0.00) 0%, #13100E 100%);
    opacity: 1;
    bottom: -1px;
    z-index: 200;
    pointer-events: none;
}

.soc_block::before {
    background: #13100e00;
}

@media (max-width: 1570px) {

    .soc_main {
        height: 1144px;
    }

    .soc_block {
        max-width: 1300px;
    }

    .pers {
        width: 325px;
        height: 1042px !important;
        padding: 17px 0 0;
    }

    .pers_four .pers_photo::before,
    .pers_four .pers_photo::after {
        left: -250px;
        width: 746px;
        height: 1193px;
        bottom: -145px;
    }

    .pers_three .pers_photo::before,
    .pers_three .pers_photo::after {
        left: -710px;
        width: 1236px;
        height: 1361px;
        bottom: -315px;
    }

    .pers_two .pers_photo::before,
    .pers_two .pers_photo::after {
        left: -195px;
        width: 980px;
        height: 1168px;
        bottom: -135px;
    }

    .pers_one .pers_photo::before,
    .pers_one .pers_photo::after {
        left: -560px;
        width: 1270px;
        height: 1339px;
        bottom: -270px;
    }

    .pers_nickname {
        color: #FFF4E7;
        font-size: 26px;
        line-height: normal;
    }

    .pers_logo {
        width: 36px;
        height: 36px;
    }

    .bubki {
        width: 26px;
        height: 26px;
    }

    .pers_one .pers_name {
        padding-left: 83px;
    }

    .pers_two .pers_name {
        padding-left: 124px;
    }

    .pers_three .pers_name {
        padding-left: 123px;
    }

    .pers_four .pers_name {
        padding-left: 89px;
    }

    .pers_one .bub_left {
        right: 185px;
    }

    .pers_two .bub_left {
        right: 187px;
    }

    .pers_three .bub_left {
        right: 144px;
    }

    .pers_four .bub_left {
        right: 197px;
    }

    .bub_right {
        right: -40px;
    }

    .pers_player {
        top: 317px;
    }

    .pers_four .pers_player {
        left: 124px;
    }

    .pers_three .pers_player {
        left: 128px;
    }

    .pers_two .pers_player {
        left: 183px;
    }

    .pers_one .pers_player {
        left: 143px;
    }
}

@media (max-width: 1430px) {
    .soc_block {
        max-width: 900px;
    }

    .soc_main {
        height: 930px;
    }

    .pers {
        width: 225px;
        height: 900px !important;
        padding: 21px 0 0;
    }

    .soc_block::before {
        height: 484px;
        background: linear-gradient(180deg, rgba(19, 16, 14, 0.00) 0%, #13100E 100%), linear-gradient(180deg, rgba(19, 16, 14, 0.00) 0%, #13100E 100%);
    }

    .pers_one .pers_photo::after {
        background: url(../assets/defo_mini.webp) center / contain no-repeat;
    }

    .pers_two .pers_photo::after {
        background: url(../assets/flames_mini.webp) center / contain no-repeat;
    }

    .pers_three .pers_photo::after {
        background: url(../assets/boh_mini.webp) center / contain no-repeat;
    }

    .pers_four .pers_photo::after {
        background: url(../assets/focus_mini.webp) center / contain no-repeat;
    }

    .active_pers.pers_one .pers_photo::before,
    .pers_one:hover .pers_photo::before {
        background: url(../assets/defo_mini_hover.webp) center / contain no-repeat;
    }

    .active_pers.pers_two .pers_photo::before,
    .pers_two:hover .pers_photo::before {
        background: url(../assets/flames_mini_hover.webp) center / contain no-repeat;
    }

    .active_pers.pers_three .pers_photo::before,
    .pers_three:hover .pers_photo::before {
        background: url(../assets/boh_mini_hover.webp) center / contain no-repeat;
    }

    .active_pers.pers_four .pers_photo::before,
    .pers_four:hover .pers_photo::before {
        background: url(../assets/focus_mini_hover.webp) center / contain no-repeat;
    }

    .pers_one .pers_photo::before,
    .pers_one .pers_photo::after {
        left: -390px;
        width: 886px;
        height: 934px;
        bottom: -27px;
    }

    .pers_two .pers_photo::before,
    .pers_two .pers_photo::after {
        left: -132px;
        width: 684px;
        height: 815px;
        bottom: 67px;
    }

    .pers_three .pers_photo::before,
    .pers_three .pers_photo::after {
        left: -490px;
        width: 864px;
        height: 952px;
        bottom: -60px;
    }

    .pers_four .pers_photo::before,
    .pers_four .pers_photo::after {
        left: -170px;
        width: 522px;
        height: 834px;
        bottom: 57px;
    }

    .pers_nickname {
        font-size: 18px;
        font-style: normal;
    }

    .pers_logo {
        width: 26px;
        height: 26px;
    }

    .pers_one .pers_name {
        padding-left: 60px;
    }

    .pers_two .pers_name {
        padding-left: 87px;
    }

    .pers_three .pers_name {
        padding-left: 74px;
    }

    .pers_four .pers_name {
        padding-left: 58px;
    }

    .pers_one .bub_left {
        right: 129px;
    }

    .pers_two .bub_left {
        right: 128px;
    }

    .pers_three .bub_left {
        right: 100px;
    }

    .pers_four .bub_left {
        right: 134px;
    }

    .bub_right {
        right: -27px;
    }

    .pers_name {
        gap: 9px;
    }

    .nickname {
        gap: 7px;
    }

    .bubki {
        width: 18px;
        height: 18px;
    }

    .pers_player {
        top: 230px;
    }

    .pers_player {
        min-width: 50px;
        height: 50px;
        top: 239px;
    }

    .pers_one .pers_player {
        left: 95px;
    }

    .pers_two .pers_player {
        left: 123px;
    }

    .pers_three .pers_player {
        left: 110px;
    }

    .pers_four .pers_player {
        left: 100px;
    }

    .pers_inplayer img {
        width: 15px;
    }
}

@media (max-width: 930px) {

    .pers_one .pers_photo::before,
    .pers_one .pers_photo::after {
        left: -210px;
        width: 524px;
        height: 552px;
        bottom: -23px;
    }

    .pers_two .pers_photo::before,
    .pers_two .pers_photo::after {
        left: -71px;
        width: 404px;
        height: 482px;
        bottom: 33px;
    }

    .pers_three .pers_photo::before,
    .pers_three .pers_photo::after {
        left: -290px;
        width: 511px;
        height: 563px;
        bottom: -42px;
    }

    .pers_four .pers_photo::before,
    .pers_four .pers_photo::after {
        left: -93px;
        width: 308px;
        height: 493px;
        bottom: 22px;
    }

    .pers {
        width: 155px;
        height: 540px !important;
        padding: 21px 0 0;
    }

    .soc_block {
        max-width: 620px;
    }

    .soc_main {
        height: 700px;
    }

    .pers_player {
        top: 140px;
    }

    .pers_one .pers_player {
        left: 70px;
    }

    .pers_two .pers_player {
        left: 73px;
    }

    .pers_three .pers_player {
        left: 50px;
    }

    .pers_four .pers_player {
        left: 50px;
    }

    .soc_block::before {
        bottom: 90px;
    }

    .bubki {
        width: 14px;
        height: 14px;
    }

    .pers_nickname {
        font-size: 14px;
        line-height: normal;
    }

    .pers_logo {
        width: 22px;
        height: 22px;
    }

    .pers_name {
        gap: 6px;
    }

    .pers_one .pers_name {
        padding-left: 39px;
    }

    .pers_two .pers_name {
        padding-left: 39px;
    }

    .pers_three .pers_name {
        padding-left: 32px;
    }

    .pers_four .pers_name {
        padding-left: 26px;
    }

    .pers_one .bub_left {
        right: 104px;
    }

    .pers_two .bub_left {
        right: 102px;
    }

    .pers_three .bub_left {
        right: 80px;
    }

    .pers_four .bub_left {
        right: 108px;
    }

    .bub_right {
        right: -20px;
    }

    .bubki {
        top: 4px;
    }
}

@media (max-width: 620px) {

    .pers:hover .pers_player {
        transform: translate(-50%) rotate(-45deg);
    }

    .soc_block {
        width: 100%;
        max-width: 100%;
    }

    .pers {
        transition: transform 0.3s linear;
        transform: scale(0.9);
    }

    .pers.slick-center {
        transform: scale(1);
        z-index: 20;
    }

    .pers_three .pers_photo::before,
    .pers_three .pers_photo::after {
        left: -260px;
    }

    .pers_three .pers_player {
        left: 78px;
    }

    .pers_name {
        padding-left: 0 !important;
        margin: 0 auto !important;
    }

    .pers_four .pers_photo::before,
    .pers_four .pers_photo::after {
        left: -62px;
    }

    .pers_one .pers_player,
    .pers_two .pers_player,
    .pers_three .pers_player,
    .pers_four .pers_player {
        left: 50%;
        transform: translate(-50%) rotate(-45deg);
    }

    .pers_one .pers_photo::before,
    .pers_one .pers_photo::after {
        left: -198px;
    }

    .pers_two .pers_photo::before,
    .pers_two .pers_photo::after {
        left: -62px;
    }

    .pers_one.slick-center .pers_photo::before {
        background: url(../assets/defo_mini_hover.webp) center / contain no-repeat;
    }

    .pers_two.slick-center .pers_photo::before {
        background: url(../assets/flames_mini_hover.webp) center / contain no-repeat;
    }

    .pers_three.slick-center .pers_photo::before {
        background: url(../assets/boh_mini_hover.webp) center / contain no-repeat;
    }

    .pers_four.slick-center .pers_photo::before {
        background: url(../assets/focus_mini_hover.webp) center / contain no-repeat;
    }

    .pers.slick-center .bubki {
        opacity: 1;
    }
}

@media (max-width: 530px) {

    .pers_one .pers_photo::before,
    .pers_one .pers_photo::after {
        left: -216px;
    }

    .pers_two .pers_photo::before,
    .pers_two .pers_photo::after {
        left: -77px;
    }

    .pers_three .pers_photo::before,
    .pers_three .pers_photo::after {
        left: -279px;
    }

    .pers_four .pers_photo::before,
    .pers_four .pers_photo::after {
        left: -81px;
    }

    .pers_photo::before {
        opacity: 1;
        z-index: 2;
    }
}

@media (max-width: 440px) {

    .pers {
        transition: transform 0.3s linear;
        transform: scale(0.8);
    }

    .pers.slick-center {
        transform: scale(1);
        z-index: 20;
    }

    .pers_one .pers_photo::before,
    .pers_one .pers_photo::after {
        left: -228px;
    }

    .pers_two .pers_photo::before,
    .pers_two .pers_photo::after {
        left: -90px;
    }

    .pers_three .pers_photo::before,
    .pers_three .pers_photo::after {
        left: -289px;
    }

    .pers_four .pers_photo::before,
    .pers_four .pers_photo::after {
        left: -96px;
    }
}

@media (max-width: 390px) {

    .pers_three .pers_photo::before,
    .pers_three .pers_photo::after {
        left: -305px;
    }

    .pers_four .pers_photo::before,
    .pers_four .pers_photo::after {
        left: -108px;
    }

    .pers_two .pers_photo::before,
    .pers_two .pers_photo::after {
        left: -104px;
    }
}