.share__items{
    position: absolute;
    font-size: 0px;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}
.share__items img{
    max-height: 45%;
    max-width: 45%;
}
.open .share__items {
    visibility: visible;
    opacity: 1;
}
.share__items .share__item{
    text-align: center;
    cursor: pointer;
}
.share__items .share__item.facebook{
    background: #3C5A96;
}
.share__items .share__item.twitter{
    background: #1167ff;
}
.share__items .share__item.pinterest{
    background: #C9192C;
}
.share__items .share__item.copytoclipboard{
    background: #999999;
}
.share__items .share__item.email{
    background: #7CD5FF;
}
#sn__confirmation{
    position: fixed;
    top: 15px;
    right: 15px;
    background: rgba(48, 157, 244, 0.8);
    line-height: 13px;
    color: white;
    padding: 15px 20px;
    border-radius: 3px;
    font-weight: 500;
    box-shadow: 0px 2px 5px #d4d4d4;
}

/*ANIMATION LEFT*/
.left .share__items{
    transform-origin: right;
    top: -1px;
}
.left .share__items .share__item {
    display: inline-block;
}
.closed.left .share__items {
    -webkit-animation: blind-out-x 0.3s;
    animation: blind-out-x 0.3s;
}
.open.left .share__items{
    -webkit-animation: blind-in-x 0.3s;
    animation: blind-in-x 0.3s;
}

/*ANIMATION TOP*/
.top .share__items{
    transform-origin: bottom;
    left: -1px;
}
.top .share__items .share__item {
    display: block;
}
.closed.top .share__items {
    -webkit-animation: blind-out-y 0.3s;
    animation: blind-out-y 0.3s;
}
.open.top .share__items{
    -webkit-animation: blind-in-y 0.3s;
    animation: blind-in-y 0.3s;
}

/*ANIMATION RIGHT*/
.right .share__items{
    transform-origin: left;
    top: -1px;
}
.right .share__items .share__item {
    display: inline-block;
}
.closed.right .share__items {
    -webkit-animation: blind-out-x 0.3s;
    animation: blind-out-x 0.3s;
}
.open.right .share__items{
    -webkit-animation: blind-in-x 0.3s;
    animation: blind-in-x 0.3s;
}

/*ANIMATION BOTTOM*/
.bottom .share__items{
    transform-origin: top;
    left: -1px;
}
.bottom .share__items .share__item {
    display: block;
}
.closed.bottom .share__items {
    -webkit-animation: blind-out-y 0.3s;
    animation: blind-out-y 0.3s;
}
.open.bottom .share__items{
    -webkit-animation: blind-in-y 0.3s;
    animation: blind-in-y 0.3s;
}


/*ANIMATION X*/
@-webkit-keyframes blind-in-x {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: scaleX(0);
    }
    100% {

        visibility: visible;
        opacity: 1;
        transform: scaleX(1);
    }
}
@-webkit-keyframes blind-out-x {
    0% {
        visibility: visible;
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        transform: scaleX(0);
    }
}
@keyframes blind-in-x {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: scaleX(0);
    }
    100% {

        visibility: visible;
        opacity: 1;
        transform: scaleX(1);
    }
}
@keyframes blind-out-x {
    0% {
        visibility: visible;
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        transform: scaleX(0);
    }
}

/*ANIMATION Y*/
@-webkit-keyframes blind-in-y {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: scaleY(0);
    }
    100% {

        visibility: visible;
        opacity: 1;
        transform: scaleY(1);
    }
}
@-webkit-keyframes blind-out-y {
    0% {
        visibility: visible;
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        transform: scaleY(0);
    }
}
@keyframes blind-in-y {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: scaleY(0);
    }
    100% {

        visibility: visible;
        opacity: 1;
        transform: scaleY(1);
    }
}
@keyframes blind-out-y {
    0% {
        visibility: visible;
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        transform: scaleY(0);
    }
}

/*MOBILE*/

.mobile.open{
    margin-bottom: 70px;
}
.mobile .share__items{
    top: 70px;
    left: 0;
    right: 0;
}
.mobile.closed .share__items{
    animation: none;
}
.mobile .share__items .share__item {
    display: inline-block;
}