﻿
.bottomSocial .articleSocialMedia { position: relative; margin-right: 0; top: auto; z-index: 3; background: unset; opacity: 1; visibility: visible; padding: 0; width: auto;float:right; border: 0; border-left: none; }

article .social {
    display: inline-block;
    width: 40px;
    height: auto;
    position: relative;
    float: left;
}
article .social .icon-shorten {
    background: #1fa2f0;
}
article .social .icon-shorten:before {
    content: ".";
    font-size: 18px;
    line-height: 32px;
}
.tooltip {
    position: absolute;
    background: #fff;
    width: 170px;
    height: 45px;
    font-size: 16px;
    text-align: center;
    top: -50px;
    line-height: 45px;
    right: 0;
    box-shadow: 1px 2px 5px #000;
}
article .social a {
    display:inline-block;
    float: none;
    text-align: center;
    margin-left: 6px;
    color: #fff;
    width: 32px;
    height: 32px;
}
article .social a:last-child {
    margin-left: 0;
}
article .social a.icon-fb {
    background: #4267B2;
}

article .social a.icon-lin {
    background: #007bb5;
}
article .social a.icon-fb:before {
    font-size: 17px;
    line-height: 2;
}
article .social a.icon-wapp:before {
    font-size: 17px;
    line-height: 2;
}

article .social a.icon-tw:before {
    font-size: 17px;
    line-height: 2;direction:rtl
}
article.calcDtls .social{width:108px!important}

article .social a.icon-ggl:before {
    font-size: 18px;
    line-height: 1.6;
}
article .social a.icon-insta:before {
    font-size: 17px;
}
article .social a.icon-lin:before {
    font-size: 16px;
    line-height: 2;
}
article .social a.icon-yt:before {
    font-size: 18px;
    line-height: 1.5;
}
article .social a.icon-tiktok:before {
    font-size: 18px;
    line-height: 1.5;
}

    article .social a.icon-wapp {
        background: #25d366;direction:rtl
    }

    article .social a.icon-tw {background:#000;direction:rtl}


    .article .social { float: left; display: inline-block; padding:  0 ;    width: 40px;height:auto;}
.article .social span { float: right; display: inline-block; width: 40px;height: 40px;border-radius: 0;border: 1px solid #909090;background: #FFF;cursor:pointer}
.article .social span:before{content:'o';font-size:20px;color:#666666;line-height:40px}
.article .social .shareMenu{position:absolute;width:54px;height:auto;padding:10px 0;background: #FFF;
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.15);border-radius:0 0 6px 6px;    top: 48px; left: -7px;opacity:0;visibility:hidden;    z-index: 1;}
 .article .social .shareMenu.openSocialShare{opacity:1;visibility:visible}

 .article .social.bottomDesign  {float:right;width:100%;margin-top:20px;z-index:1}
 .article .social.bottomDesign   span{border:0;margin-left:20px;    width: auto;padding: 0;cursor: unset;}
 .article .social.bottomDesign   span:before{font-size:24px}
 .article .social.bottomDesign  a{width:40px;height:40px;border:1px solid #909090;background:#fff;margin-left:10px;border-radius:unset}
 .article .social.bottomDesign  a:last-child{margin-left:0}
 .article .social.bottomDesign  a:before{color:#666666;font-size:20px;line-height:40px}

 .article .topSocial .bottomDesign{display:none;pointer-events:none}
.article .bottomSocial .topDesign{display:none;pointer-events:none}

 .article .social a { width: 34px; height: 34px; margin-left: 0; border-radius: 50% ;margin:0}
 .article .social a:before { line-height: 34px }
 .article .social a { margin-bottom: 10px; }
 @media screen and (min-width:1023px) and (max-width:1279px) {
     .article .social{width:30px}
     .article .bottomSocial .topDesign span{width:30px;height:30px;float:left}
     .article .bottomSocial .topDesign:before{line-height:30px}
     }

@media screen and (min-width: 320px) and (max-width: 767px) {
   article .social{width:100%;margin:0 0;height:40px}
   article .social a{width:calc(100% / 4);margin-left:0;height:40px}
   article .social a:before{line-height:40px!important}
    .tooltip {
        right: auto;
        left: 0;
        bottom: -45px;
        top: auto;
    }
    article .topDesign.social a:before{line-height:34px!important}
    article.calcDtls .social{width:100%!important}
    article.calcDtls .social a{width:calc(100% / 3)}
      .article .social span{width:36px;height:36px}
      .article .social{width:36px}
    .article .social span:before{line-height:36px}
        .article .social.bottomDesign span{margin-left:10px;height:40px}
        .article .social .shareMenu{left:-4px!important;top:36px!important}
        .article .social.bottomDesign span:before{font-size:20px;line-height:40px}
        .bottomSocial .articleSocialMedia{width:auto;float:right;margin:0 0 15px 0}
}
