/* ------------------------------ */
/* ------- Social Sharing ------- */
/* ------------------------------ */

.social_sharing {
    position: fixed;
    z-index: 50;
}

.social_sharing__item, .social_sharing__item a {
    position: relative;
}

.social_sharing__item a {
    display: block;
    background-color: var(--brand-grey);
    -webkit-transition: background-color var(--transition-2);
    -o-transition: background-color var(--transition-2);
    transition: background-color var(--transition-2);
}

.social_sharing__item a:focus-visible {
    outline: unset !important;
}

.social_sharing__item a svg {
    -webkit-transition: fill var(--transition-2);
    -o-transition: fill var(--transition-2);
    transition: fill var(--transition-2);
}

.no-touchevents .social_sharing__item a:hover {
    background-color: var(--brand-black);
}

.no-touchevents .social_sharing__item a:hover svg {
    fill: var(--brand-white);
}

.social_sharing__item a svg {
    position: absolute;
    top: 50%;
    left: 50%;
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 1240px) {

    .social_sharing {
        left: 0;
        border: 1px solid var(--brand-white);
        border-left: 0;
        -webkit-transition: -webkit-transform var(--transition-2);
        transition: -webkit-transform var(--transition-2);
        -o-transition: transform var(--transition-2);
        transition: transform var(--transition-2);
        transition: transform var(--transition-2), -webkit-transform var(--transition-2);
    }

    .social_sharing__item a svg {
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }

}


@media all and (min-width: 1400px) {

    .social_sharing {
        top: 50%;
        -webkit-transform: translate3d(-5rem, 0, 0) translateY(-50%);
        transform:translate3d(-5rem, 0, 0) translateY(-50%);
    }

     .social_sharing.is-active {
        -webkit-transform: translateZ(0) translateY(-50%);
        transform: translateZ(0) translateY(-50%);
    }

}


@media all and (min-width: 1600px) {

    .social_sharing {
        width: 49px;
    }

    .social_sharing__item, .social_sharing__item a {
        height: 48px;
        width: 48px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1240px) {

    .social_sharing {
        width: 45px;
    }

    .social_sharing__item, .social_sharing__item a {
        height: 44px;
        width: 44px;
    }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) {

    .social_sharing {
        bottom: calc(var(--spacing-3) + 2px);
        -webkit-transform: translate3d(-5rem, 0, 0);
        transform:translate3d(-5rem, 0, 0);
    }

    .social_sharing.is-active {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

}


@media all and (max-width: 1239.98px) {

    .social_sharing {
        position: fixed;
        z-index: 52;
        -webkit-transition: -webkit-transform var(--transition-2);
        transition: -webkit-transform var(--transition-2);
        -o-transition: transform var(--transition-2);
        transition: transform var(--transition-2);
        transition: transform var(--transition-2), -webkit-transform var(--transition-2);
    }

    .social_sharing.is-active {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
    }

    .social_sharing, .social_sharing.is-active.hide {
        -webkit-transform: translatex(200%);
            -ms-transform: translatex(200%);
                transform: translatex(200%);
    }

    .social_sharing_toggle, .social_sharing__item {
        position: relative;
        border-radius: 50%;
    }

    .social_sharing__item {
        margin-bottom: 8px;
    }
    
    .social_sharing_toggle a, .social_sharing__item a {
        display: block;
        height: 100%;
        width: 100%;
        background-color: var(--brand-grey);
        border-radius: 50%;
        -webkit-transition: background-color var(--transition-2);
        -o-transition: background-color var(--transition-2);
        transition: background-color var(--transition-2);
    }

    .no-touchevents .social_sharing_toggle a:hover, .social_sharing_toggle a.is-active, 
    .no-touchevents .social_sharing__item a:hover {
        background-color: var(--brand-black);
    }

    .social_sharing_toggle svg {
        position: absolute;
        top: 50%;
        left: 47%;
    }

    .social_sharing_toggle svg, .social_sharing__item svg {
        fill: var(--brand-black);
        -webkit-transition: fill var(--transition-2);
        -o-transition: fill var(--transition-2);
        transition: fill var(--transition-2);
    }

    .no-touchevents .social_sharing_toggle a:hover svg, .social_sharing_toggle a.is-active svg,
    .no-touchevents .social_sharing__item a:hover svg {
        fill: var(--brand-white);
    }

}


@media all and (max-width: 1239.98px) and (min-width: 768px) {

    .social_sharing {
        bottom: var(--spacing-3);
        right: var(--spacing-3);
    }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {

    .social_sharing__items {
        border-radius: 54px;
    }

    .social_sharing_toggle, .social_sharing__item {
        width: 54px;
        height: 54px; 
    }

    .social_sharing_toggle a, .social_sharing__item a {
        border: 3px solid var(--brand-white);
    }

    .social_sharing_toggle svg, .social_sharing__item svg {
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }
    
}


@media all and (max-width: 991.98px) {

    .social_sharing__items {
        border-radius: 50px;
    }

    .social_sharing_toggle, .social_sharing__item {
        width: 50px;
        height: 50px;
    }

    .social_sharing_toggle a, .social_sharing__item a {
        border: 2px solid var(--brand-white);
    }

    .social_sharing_toggle svg, .social_sharing__item svg {
        -webkit-transform: translate(-50%, -50%) scale(.95);
            -ms-transform: translate(-50%, -50%) scale(.95);
                transform: translate(-50%, -50%) scale(.95);
    }

}


@media all and (max-width: 991.98px) {

    .social_sharing {
        bottom: var(--spacing-4);
        right: var(--spacing-4);
    }

}