.social-like {
    position: relative;
    padding: .125rem .5rem;
    color: var(--theme-page-col);
}

.social-like:hover,
.social-like.selected {
    color: var(--primary-color);
    background-color: var(--theme-block-card-bg-col);
    border-color: var(--theme-block-card-bg-col);
}

.social-popup {
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s
}

.social-like:hover .social-popup {
    visibility: visible;
    opacity: 1;
}

.social-like:hover .social-row {
    width: 100%;
}

.social-component {
    position: absolute;
    margin-left: -12px;
    padding: 12px 0;
    border: 0;
    white-space: nowrap;
    transform: translate(0, -6em);
}

.social-section {
    margin-top: 4.5em;
    display: flex;
}

.social-row {
    padding: 8px 16px;
    border-radius: 15px;
    background-color: #F5F5F5;
    overflow: hidden;
    transition: width .2s;
    width: 0;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.08);
}

.social-tiny > i {
    background: lightgray;
    padding: 5px;
    border-radius: 1em;
    border: 2px solid white;
    color: white;
    -webkit-text-stroke: 1px rgb(128, 128, 128);
    margin: 0 -7px;
}

.social-tiny .social-tiny-count {
    margin-left: 5px;
}

.social-row>ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-flex;
    flex-flow: row nowrap;
}

.social-text {
    margin-left: 8px;
}

.social-text-wrapper {
    position: absolute;
    transform: translate(-33%, -2em);
    background: white;
    border-radius: 1em;
    padding: 1px 7px;
    margin-left: 7px;
    opacity: 0;
    transition: opacity .2s;
}

.social-text-wrapper span {
    color: black;
}

.social-item:hover .social-text-wrapper {
    opacity: 1;
}

.social-item {
    margin: 0 5px;
}

.social-icon-wrapper {
    transition: scale .5s;
    transform: scale(1);
}

.social-icon-wrapper:hover {
    transform: scale(1.2);
}

.social-row>ul>li:last-child .social-text-wrapper {
    margin-left: 0;
}

@keyframes icon-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.social-like:hover .social-row>ul>li:nth-child(1) .social-icon-wrapper { animation: icon-pulse .2s linear; }
.social-like:hover .social-row>ul>li:nth-child(2) .social-icon-wrapper { animation: icon-pulse .2s linear .03s; }
.social-like:hover .social-row>ul>li:nth-child(3) .social-icon-wrapper { animation: icon-pulse .2s linear .06s; }
.social-like:hover .social-row>ul>li:nth-child(4) .social-icon-wrapper { animation: icon-pulse .2s linear .09s; }
.social-like:hover .social-row>ul>li:nth-child(5) .social-icon-wrapper { animation: icon-pulse .2s linear .12s; }
.social-like:hover .social-row>ul>li:nth-child(6) .social-icon-wrapper { animation: icon-pulse .2s linear .15s; }

.social-summary {
    /*    position: absolute;
    transform: translate(13px, -3em);
    display: inline-flex;*/
    padding-right: 20px;
}

.social-summary-item {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 6px;
}

.social-icon {
    color: var(--primary-color);
    font-size: 1.813rem;
}

.social-summary-icon {
    background: var(--primary-color);
    border-radius: 1em;
    width: 26px;
    height: 26px;
    text-align: center;
    padding-top: 4px;
    color: var(--white-color);
    font-size: 1rem;
}

.social-summary-text {
    margin-left: 5px;
}

.social-default {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tiny-social-section {
    color: var(--light-gray-color);
    margin-left: auto;
    margin-top: 10px;
}

.tiny-social-summary-item {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

    .tiny-social-summary-item:nth-child(n+4) {
        display: none
    }

.tiny-social-summary-icon {
    background: var(--accentgray-color);
    border-radius: 1em;
    width: 30px;
    height: 30px;
    text-align: center;
    border: 3px solid var(--white-color);
    font-size: 1rem;
    padding-top: 4px;
    margin-left: -12px;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .news .tiny-social-summary-icon {
        width: 1rem;
        height: 1rem;
        font-size: .55rem;
        padding-top: .125rem;
    }
    
    .news .tiny-social-section .display-block {
        font-size: .7rem;
    }
}

/*    .tiny-social-summary-icon:hover {
        z-index: 10000;
    }*/