.component-socials {
  --socialMargin:10px;
  --socialCustomColor:#969696;
  --socialSize:20px;
  --socialHoverScale:1.1;
  --socialHoverOpacity:0.7;
  --textColor:inherit;
  --textWeight:400;
  --textLetterSpacing:0;
  --textLineHeight:1;
  gap:var(--socialMargin);
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  justify-content:inherit
}

.component-socials.position--vertical {
  flex-direction:column
}

.component-socials.position--vertical .social-container {
  width:100%
}

.component-socials.color--contrast .social-container {
  --iconColor:var(--currentColor);
  --iconContrast:var(--contrastColor)
}

.component-socials.color--custom .social-container {
  --iconColor:var(--socialCustomColor)!important
}

.component-socials.color--custom[data-icon-contrast=light] .social-container {
  --iconContrast:#fff!important
}

.component-socials.color--custom[data-icon-contrast=dark] .social-container {
  --iconContrast:#000!important
}

.component-socials .social-container {
  display:flex;
  align-items:center;
  --iconColor:var(--socialColor);
  --iconContrast:var(--socialContrast);
  --iconColorHover:var(--socialColor);
  --iconContrastHover:var(--socialContrast);
  --iconOpacityHover:var(--socialHoverOpacity);
  --iconScaleHover:var(--socialHoverScale)
}

.component-socials .social {
  display:inline-flex;
  position:relative;
  color:var(--iconColor);
  width:1em;
  height:1em;
  justify-content:center;
  align-items:center;
  font-size:var(--socialSize)
}

.component-socials .social-icon {
  display:flex;
  position:absolute;
  width:1em;
  height:1em;
  z-index:1
}

.component-socials .social-title {
  margin-left:.6em
}

.component-socials .social-container {
  --socialContrast:#fff
}

.component-socials .instagram {
  --socialColor:#dc3175
}

.component-socials .fb {
  --socialColor:#1877f2
}

.component-socials .vk {
  --socialColor:#07f
}

.component-socials .twitter {
  --socialColor:#1da1f2
}

.component-socials .telegram {
  --socialColor:#08c
}

.component-socials .ok {
  --socialColor:#ed812b
}

.component-socials .gplus {
  --socialColor:#dd4b39
}

.component-socials .skype {
  --socialColor:#00aff0
}

.component-socials .yt {
  --socialColor:red
}

.component-socials .vimeo {
  --socialColor:#1ab7ea
}

.component-socials .snapchat {
  --socialColor:#fffc00
}

.component-socials .whatsapp {
  --socialColor:#65cf72
}

.component-socials .periscope {
  --socialColor:#3aa4c6
}

.component-socials .viber {
  --socialColor:#7360f2
}

.component-socials .behance {
  --socialColor:#1769ff
}

.component-socials .dribble {
  --socialColor:#ea4c89
}

.component-socials .p {
  --socialColor:#e60023
}

.component-socials .in {
  --socialColor:#069
}

.component-socials .tripadvisor {
  --socialColor:#34e0a1
}

.component-socials .tiktok {
  --socialColor:#fe2c55
}

.component-socials .messenger {
  --socialColor:#0084ff
}

.component-socials .yandex_zen {
  --socialColor:#000
}

.component-socials .discord {
  --socialColor:#5865f2
}

.component-socials .yandex_music {
  --socialColor:#fcca00
}

.component-socials .apple_music {
  --socialColor:#fb3951
}

.component-socials .spotify {
  --socialColor:#2ebd59
}

.component-socials .soundcloud {
  --socialColor:#ff5502
}

.component-socials .email,.component-socials .phone,.component-socials .website {
  --socialColor:#000
}

.component-socials.style--filled .instagram {
  --socialColor:-webkit-radial-gradient(32% 106%,circle farthest-corner,#ffe17d 0%,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),-webkit-linear-gradient(-45deg,#234bd7 12%,#c33cbe 58%)
}

.component-socials.style--filled .messenger {
  --socialColor:linear-gradient(180deg,#00b2ff,#006aff)
}

.component-socials.style--filled .whatsapp {
  --socialColor:linear-gradient(0deg,#20b038,#60d66a)
}

.component-socials.style--filled .telegram {
  --socialColor:linear-gradient(203.2deg,#37aee2 21.67%,#1e96c8 70%)
}

.component-socials.style--filled .apple_music {
  --socialColor:linear-gradient(0deg,#fa233b 0.39%,#fa233b 0.4%,#fb5c74 97.84%)
}

.component-socials.style--filled .soundcloud {
  --socialColor:linear-gradient(180deg,#f79810 -0.02%,#f8310e 131.24%)
}

.component-socials .social-container,.component-socials .social-icon,.component-socials .social:before {
  transition:all .3s cubic-bezier(.21,.67,.58,1)
}

.component-socials.hover--zoom .hover .social:before,.component-socials.hover--zoom.shape--none .hover .social-icon {
  transform:scale(var(--iconScaleHover,1))
}

.component-socials.hover--opacity .hover {
  opacity:var(--iconOpacityHover,1)
}

.component-socials.hover--color .hover {
  --iconColor:var(--socialColor);
  --iconContrast:var(--iconContrastHover)
}

.component-socials.margin--small {
  --socialMargin:10px
}

.component-socials.margin--medium {
  --socialMargin:20px
}

.component-socials.margin--large {
  --socialMargin:30px
}

.component-socials.shape--round .social:before {
  border-radius:100%
}

.component-socials.shape--rounded .social:before {
  border-radius:.25em
}

.component-socials.size--small {
  --socialSize:16px!important;
  --textSize:14px
}

.component-socials.size--medium {
  --socialSize:20px!important;
  --textSize:15px
}

.component-socials.size--large {
  --socialSize:24px!important;
  --textSize:24px
}

.component-socials.style--none .social {
  width:1.25em;
  height:1.25em
}

.component-socials.style--bordered .social,.component-socials.style--filled .social {
  width:2em;
  height:2em
}

.component-socials.style--bordered .social:before,.component-socials.style--filled .social:before {
  content:"";
  display:block;
  box-sizing:border-box;
  position:absolute;
  width:2em;
  height:2em;
  left:50%;
  top:50%;
  margin-left:-1em;
  margin-top:-1em
}

.component-socials.style--bordered .social:before {
  border:2px solid currentColor
}

.component-socials.style--filled .social-icon {
  color:var(--iconContrast)
}

.component-socials.style--filled .social:before {
  background:var(--iconColor)
}