@keyframes toggleAnimate{
    0%,100%{
        transform:rotate(25deg)
    }
    50%{
        transform:rotate(-25deg)
    }
}
.share-button{
    position:fixed;
    z-index:999
}
.share-button--right_top{
    top:20px;
    right:20px
}
.share-button--right_top.share-button--open .share-button__toggle::before{
    transform:scale(1) translateX(50%) rotate(180deg)
}
.share-button--right_top.share-button--open .share-button__list{
    transform:scale(1) translateY(0)
}
.share-button--right_top .share-button__toggle::before{
    right:35px;
    bottom:-20px;
    transform:scale(0) translateX(50%) rotate(180deg);
    transform-origin:50% 50%
}
.share-button--right_top .share-button__list{
    top:90px;
    right:0;
    transform:scale(0) translateY(-210px);
    transform-origin:75% 0
}
.share-button--right_center{
    top:50%;
    right:20px;
    transform:translateY(-50%)
}
.share-button--right_center.share-button--open .share-button__toggle::before{
    transform:scale(1) translateY(50%) rotate(-90deg)
}
.share-button--right_center.share-button--open .share-button__list{
    transform:scale(1) translateY(-50%) translateX(0)
}
.share-button--right_center .share-button__toggle::before{
    left:-20px;
    bottom:35px;
    transform:scale(0) translateY(50%) rotate(-90deg);
    transform-origin:50% 75%
}
.share-button--right_center .share-button__list{
    top:50%;
    right:90px;
    transform:scale(0) translateY(-50%) translateX(210px);
    transform-origin:100% 0;
    max-height:calc(100vh - 20px * 2)
}
.share-button--right_bottom{
    right:7px;
    bottom:23px
}
.share-button--right_bottom.share-button--open .share-button__toggle::before{
    transform:scale(1) translateX(50%)
}
.share-button--right_bottom.share-button--open .share-button__list{
    transform:scale(1) translateY(0)
}
.share-button--right_bottom .share-button__toggle::before{
    top:-20px;
    right:35px;
    transform:scale(0) translateX(50%);
    transform-origin:50% 0
}
.share-button--right_bottom .share-button__list{
    right:0;
    bottom:90px;
    transform:scale(0) translateY(210px);
    transform-origin:75% 100%
}
.share-button--left_bottom{
    bottom:20px;
    left:20px
}
.share-button--left_bottom.share-button--open .share-button__toggle::before{
    transform:scale(1) translateX(50%)
}
.share-button--left_bottom.share-button--open .share-button__list{
    transform:scale(1) translateY(0)
}
.share-button--left_bottom .share-button__toggle::before{
    top:-20px;
    right:35px;
    transform:scale(0) translateX(50%);
    transform-origin:50% 0
}
.share-button--left_bottom .share-button__list{
    bottom:90px;
    left:0;
    transform:scale(0) translateY(210px);
    transform-origin:25% 100%
}
.share-button--left_center{
    top:50%;
    left:20px;
    transform:translateY(-50%)
}
.share-button--left_center.share-button--open .share-button__toggle::before{
    transform:scale(1) translateY(50%) rotate(90deg)
}
.share-button--left_center.share-button--open .share-button__list{
    transform:scale(1) translateY(-50%) translateX(0)
}
.share-button--left_center .share-button__toggle::before{
    right:-20px;
    bottom:35px;
    transform:scale(0) translateY(50%) rotate(90deg);
    transform-origin:50% 75%
}
.share-button--left_center .share-button__list{
    top:50%;
    left:90px;
    transform:scale(0) translateY(-50%) translateX(-210px);
    transform-origin:0 0;
    max-height:calc(100vh - 20px * 2)
}
.share-button--left_top{
    top:20px;
    left:20px
}
.share-button--left_top.share-button--open .share-button__toggle::before{
    transform:scale(1) translateX(50%) rotate(180deg)
}
.share-button--left_top.share-button--open .share-button__list{
    transform:scale(1) translateY(0)
}
.share-button--left_top .share-button__toggle::before{
    right:35px;
    bottom:-20px;
    transform:scale(0) translateX(50%) rotate(180deg);
    transform-origin:50% 50%
}
.share-button--left_top .share-button__list{
    top:90px;
    left:0;
    transform:scale(0) translateY(-210px);
    transform-origin:25% 0
}
.share-button--light .share-button__toggle::before{
    border-color:#fff transparent transparent transparent
}
.share-button--light .share-button__link{
    background-color:#fff
}
.share-button--light .share-button__link:hover{
    background-color:#fd8e39
}
.share-button--light .share-button__link:hover .share-button__title{
    color:#3b3b3b
}
.share-button--dark .share-button__toggle::before{
    border-color:#171717 transparent transparent transparent
}
.share-button--dark .share-button__link{
    background-color:#171717
}
.share-button--dark .share-button__link:hover{
    background-color:#212121
}
.share-button--dark .share-button__link:hover .share-button__title{
    color:#ccc
}
.share-button--open .share-button__toggle:hover .share-button__close{
    transform:scale(1.1) rotate(90deg)
}
.share-button--open .share-button__contact{
    transform:scale(0);
    animation:none
}
.share-button--open .share-button__close{
    transform:scale(1)
}
.share-button__toggle{
    position:relative;
    width:45px;
    height:45px;
    padding:0;
    margin:0;
    background-color:#FD7F20;
    border:0;
    border-radius:50%;
    box-shadow:none;
    cursor:pointer;
    outline:0;
    transition:.2s
}
.share-button__toggle:hover{
    background-color:#fd8e39
}
.share-button__toggle::before{
    content:"";
    position:absolute;
    z-index:1;
    display:block;
    width:0;
    height:0;
    border-style:solid;
    border-width:8px 5px 0 5px;
    transition:.2s
}
.share-button__contact{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    transform:scale(1);
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.2s;
}
.share-button__contact img{
    width:44%
}
.share-button__close{
    transform:scale(0);
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    transition:.2s
}
.share-button__close img{
    width:20%
}
.share-button__list{
    position:absolute;
    overflow-y:auto;
    max-height:calc(100vh - 70px - 20px * 3);
    padding:0;
    margin:0;
    list-style-type:none;
    border-radius:10px;
    box-shadow:0 0 7px rgba(0,0,0,.15);
    transition:.2s
}
.share-button__item:first-child .share-button__link{
    padding-top:10px
}
.share-button__item:last-child .share-button__link{
    padding-bottom:10px
}
.share-button__link{
    display:flex;
    align-items:center;
    padding:7px 25px 7px 10px;
    text-decoration:none;
    transition:.2s
}
.share-button__link:hover .share-button__icon,.share-button__link:hover .share-button__title{
    transform:translateX(5px)
}
.share-button__icon{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
    width:40px;
    height:40px;
    margin-right:10px;
    transition:.2s
}
.share-button__icon img{
    width:100%
}
.share-button__title{
    font-family:inherit;
    font-size:16px;
    color:#787878;
    transition:.2s
}
.share-button__contact:hover{
    animation: toggleAnimate 1s ease-in-out infinite!important;
}