﻿.share-this-popover {
    max-width: 8em;
    pointer-events: none;
    -webkit-filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
    -webkit-animation: a .3s;
    animation: a .3s
}

.toast {
    top: -20px;
    display: block !important;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.fa-link {
    cursor: pointer;
    color: #898989 !important;
} 
.fa-link:hover {
    color: #00a0db !important;
}

    .share-this-popover:before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 0;
        height: 0;
        margin: .25em -.5em;
        border-width: .5em .5em 0;
        border-style: solid;
        border-color: #333 transparent
    }

    .share-this-popover > ul {
        pointer-events: auto;
        list-style: none;
        padding: 0;
        margin: -.75em 0 0;
        white-space: nowrap;
        background: #333;
        color: #fff;
        border-radius: .25em;
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%,-100%);
        -ms-transform: translate(-50%,-100%);
        transform: translate(-50%,-100%)
    }

        .share-this-popover > ul > li {
            display: inline-block;
            width: 2em;
            height: 2em;
            line-height: 2em;
            text-align: center
        }

            .share-this-popover > ul > li > a {
                display: inline-block;
                width: 100%;
                height: 100%;
                color: #fff;
                box-sizing: border-box;
                padding: .35em;
            }
                .share-this-popover > ul > li > a > * {
                    color: #fff;
                }

                .share-this-popover > ul > li > a:focus, .share-this-popover > ul > li > a:hover {
                    background: hsla(0,0%,100%,.25)
                }

@media (pointer:coarse) {
    .share-this-popover {
        font-size: 150%
    }

        .share-this-popover:before {
            bottom: auto;
            top: 100%;
            border-width: 0 .5em .5em;
            margin-top: 0
        }

        .share-this-popover > ul {
            top: 100%;
            transform: translateX(-50%);
            margin: .5em 0 0
        }
}

@media (max-width:575px) {
    .share-this-popover {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none
    }

        .share-this-popover:before {
            bottom: auto;
            top: 100%;
            border-width: 0 .5em .5em;
            margin-top: 0
        }

        .share-this-popover > ul {
            top: 100%;
            transform: translateX(-50%);
            margin: .5em 0 0;
            left: 0;
            width: 100%;
            transform: none;
            border-radius: 0;
            text-align: center
        }
}

@-webkit-keyframes a {
    0% {
        -webkit-transform: translateY(-3em);
        opacity: 0
    }

    80% {
        -webkit-transform: translateY(.5em);
        opacity: 1
    }

    to {
        -webkit-transform: translateY(0)
    }
}

@keyframes a {
    0% {
        transform: translateY(-3em);
        opacity: 0
    }

    80% {
        transform: translateY(.5em);
        opacity: 1
    }

    to {
        transform: translateY(0)
    }
}
