.sharer {
    position: absolute;
    transform: translate(-120%);
}

.sharer--horizontal {
    position: inherit;
    transform: none;
}

.social {
    width: 40px;
    height: 40px;
    margin: 10px 0;
    background: center no-repeat;
    background-size: cover;
    cursor: pointer;
}

.social:first-of-type {
    margin: 0;
}

.social--vk {
    background-image: url(/assets/svg/vk.svg);
}

.social--vk.social--gray {
    background-image: url(/assets/svg/vk-gray.svg);
}

.social--fb {
    background-image: url(/assets/svg/fb.svg);
}

.social--fb.social--gray {
    background-image: url(/assets/svg/fb-gray.svg);
}

.social--tw {
    background-image: url(/assets/svg/tw.svg);
}

.social--tw.social--gray {
    background-image: url(/assets/svg/tw-gray.svg);
}

.social--tg {
    background-image: url(/assets/svg/tg.svg);
}

.social--tg.social--gray {
    background-image: url(/assets/svg/tg-gray.svg);
}

.sharer--horizontal .social {
    display: inline-block;
    margin: 0 5px;
}

.sharer--horizontal .social:first-of-type {
    margin: 0;
    margin-right: 5px;
}

@media screen and (max-width: 1280px) {
    .sharer {
        display: none;
    }
    .sharer--horizontal {
        display: block;
    }
}