/****************************
 * Social media
****************************/
.bcnb-social-buttons ul {display:flex; flex-wrap:wrap; margin:0;}
.bcnb-social-buttons ul > li:not(:last-child) {margin:0 20px 0 0;}
.bcnb-social-buttons.icon ul > li:not(:last-child) {margin:0 4px 0 0;}

.bcnb-social-buttons ul > li > a:hover, .bcnb-social-buttons ul > li > a:focus {text-decoration:none; color:var(--bcnb-color-primary);}

/* icon */
.bcnb-social-buttons.icon ul > li > a {
    text-decoration:none; color:#fff;
    background:#24303c; font-size:22px;
    width:48px; aspect-ratio:1; border-radius:50%;
    display:flex; justify-content:center; align-items:center;
    position:relative; overflow:hidden;
}
.bcnb-social-buttons.icon ul > li > a i {position:relative; z-index:2;}
.bcnb-social-buttons.icon ul > li > a:before {
    content:""; position:absolute; inset:0;
    background:radial-gradient(67% 104% at 50% -43%, #fff 0%, #27893d 100%);
    transition:all .3s ease;
}
.bcnb-social-buttons.icon ul > li > a:hover, .bcnb-social-buttons ul > li > a:focus {
    text-decoration:none; color:#fff;
    background:#27893d;
}
.bcnb-social-buttons.icon ul > li > a:not(:hover):not(:focus):before {opacity:0;}