.b-social-subscr {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  background: #333;
  color: #fff;
  transition: bottom 1s;
}
@media (min-width: 480px) and (max-width: 640px) {
  .b-social-subscr {
    width: 480px;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .b-social-subscr {
    width: 768px;
    margin: 0 auto;
  }
}
.desktop .b-social-subscr.m-public {
  width: 400px;
  margin-right: 0px;
}
.b-social-subscr.m-public.vk,
.b-social-subscr.m-public.inst,
.b-social-subscr.m-public.fb,
.b-social-subscr.m-public.tw,
.b-social-subscr.m-public.vb,
.b-social-subscr.m-public.od,
.b-social-subscr.m-public.tlg {
  border-radius: 5px 5px 0px 0px;
  background-color: #FFFFFF;
  background-image: url('img-smart.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 225px 110px;
  overflow: hidden;
}
.b-social-subscr.m-public.vk .ss-text[data-text]:before,
.b-social-subscr.m-public.inst .ss-text[data-text]:before,
.b-social-subscr.m-public.fb .ss-text[data-text]:before,
.b-social-subscr.m-public.tw .ss-text[data-text]:before,
.b-social-subscr.m-public.vb .ss-text[data-text]:before,
.b-social-subscr.m-public.od .ss-text[data-text]:before,
.b-social-subscr.m-public.tlg .ss-text[data-text]:before {
  color: #FFFFFF;
  line-height: 20px;
  font-size: 17px;
}
.b-social-subscr.m-public.od .ss-i {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgba(255, 123, 0, 0.9), rgba(255, 123, 0, 0.9));
}
.b-social-subscr.m-public.od .ss-text:before {
  content: attr(data-text-od);
}
.b-social-subscr.m-public.od .ss-button {
  color: #FF7B00;
}
.b-social-subscr.m-public.vk .ss-i {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgba(76, 117, 165, 0.9), rgba(76, 117, 165, 0.9));
}
.b-social-subscr.m-public.vk .ss-text:before {
  content: attr(data-text-vk);
}
.b-social-subscr.m-public.vk .ss-button {
  color: #4C75A5;
}
.b-social-subscr.m-public.fb .ss-i {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgba(59, 89, 152, 0.9), rgba(59, 89, 152, 0.9));
}
.b-social-subscr.m-public.fb .ss-text:before {
  content: attr(data-text-fb);
}
.b-social-subscr.m-public.fb .ss-button {
  color: #3B5998;
}
.b-social-subscr.m-public.inst .ss-i {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(236, 32, 122, 0.9) 0%, rgba(250, 161, 77, 0.9) 100%);
}
.b-social-subscr.m-public.inst .ss-text:before {
  content: attr(data-text-inst);
}
.b-social-subscr.m-public.inst .ss-button {
  color: #EC207A;
}
.b-social-subscr.m-public.tw .ss-i {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgba(29, 160, 241, 0.9), rgba(29, 160, 241, 0.9));
}
.b-social-subscr.m-public.tw .ss-text:before {
  content: attr(data-text-tw);
}
.b-social-subscr.m-public.tw .ss-button {
  color: #1DA0F1;
}
.b-social-subscr.m-public.vb .ss-i {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgba(125, 95, 234, 0.9), rgba(125, 95, 234, 0.9));
}
.b-social-subscr.m-public.vb .ss-text:before {
  content: attr(data-text-vb);
}
.b-social-subscr.m-public.vb .ss-button {
  color: #7D5FEA;
}
.b-social-subscr.m-public.tlg .ss-i {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgba(53, 166, 222, 0.9), rgba(53, 166, 222, 0.9));
}
.b-social-subscr.m-public.tlg .ss-text:before {
  content: attr(data-text-tlg);
}
.b-social-subscr.m-public.tlg .ss-button {
  color: #35A6DE;
}
.b-social-subscr.m-public .ss-i {
  position: relative;
  background-color: rgba(196, 196, 196, 0.9);
  background-image: none;
}
.b-social-subscr.m-public .ss-link-wl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.b-social-subscr.m-public .ss-title {
  display: none;
}
.b-social-subscr.m-public .ss-text {
  padding-top: 2px;
}
.b-social-subscr.m-public .ss-text:before {
  line-height: 20px;
  font-size: 17px;
}
.b-social-subscr.m-public .ss-button-place {
  position: relative;
  padding-top: 12px;
}
.b-social-subscr.m-public .ss-button {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  color: #333;
  font-size: 15px;
  line-height: 30px;
  padding: 0 20px;
  border-radius: 3px;
  border: 0 none;
}
.b-social-subscr.m-public .ss-button ~ .ss-button-decor {
  display: none;
}
.b-social-subscr.m-public .ss-button-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABIUExURQAAAM8AAMcAAM8AAMoAAM4AAMsAAM8AAMwAAMwAAM0AAMwAAMsAAM0AAMsAAM0AAMwAAM0AAMwAAMwAAMwAAM0AAMwAAMwAAO9Z8ekAAAAXdFJOUwAQICAwP0BPUF9gb3B/gI+fn6+/39/vmNWfxQAAAKpJREFUOMvtkskWwyAIRYlW2zQDiRP//6ddWE8AzaL7vh3yFC4CxARfibO/4SfDDJ3ewlCMztsiS0RtyLqHVeb3vknP848BRZpYA3mEiZfhHM9hVoSdobE2wn6SURJWA3dX1p2fFIg8JM8J66ObiNNkRQFawIuY8JSxAVVD6dBQSskAAKz3hlfl3u7ySxvt+I3i2O8NOg1yyVyQt9F1S2qfGDMRlRzQXbvxAT7zQP+jMyQbAAAAAElFTkSuQmCC');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  vertical-align: middle;
}
.b-social-subscr.m-public .ss-button-icon + .ss-button-text {
  margin-left: 8px;
}
.b-social-subscr.vk .ss-text[data-text],
.b-social-subscr.inst .ss-text[data-text],
.b-social-subscr.fb .ss-text[data-text],
.b-social-subscr.tw .ss-text[data-text],
.b-social-subscr.vb .ss-text[data-text],
.b-social-subscr.od .ss-text[data-text],
.b-social-subscr.tlg .ss-text[data-text] {
  color: transparent;
  text-indent: -100%;
  line-height: 0;
  font-size: 0;
}
.b-social-subscr.vk .ss-text[data-text]:before,
.b-social-subscr.inst .ss-text[data-text]:before,
.b-social-subscr.fb .ss-text[data-text]:before,
.b-social-subscr.tw .ss-text[data-text]:before,
.b-social-subscr.vb .ss-text[data-text]:before,
.b-social-subscr.od .ss-text[data-text]:before,
.b-social-subscr.tlg .ss-text[data-text]:before {
  display: block;
  color: #fff;
  font-size: 21px;
  line-height: 27px;
  text-indent: 0%;
}
.b-social-subscr.vk {
  background: #4c77a6;
}
.b-social-subscr.vk .ss-title {
  width: 122px;
  height: 33px;
  background: url('vk-title.png') no-repeat top left;
  background-size: 122px 33px;
}
.b-social-subscr.vk .ss-text:before {
  content: attr(data-text-vk);
}
.b-social-subscr.vk .ss-button {
  color: #244c78;
}
.b-social-subscr.inst {
  background: url('bg-inst.jpg') no-repeat bottom left;
  background-size: 100% 100%;
}
.b-social-subscr.inst .ss-title {
  width: 111px;
  height: 33px;
  background: url('inst-title.png') no-repeat top left;
  background-size: 111px 33px;
}
.b-social-subscr.inst .ss-text:before {
  content: attr(data-text-inst);
}
@supports (mix-blend-mode: screen) {
  .b-social-subscr.inst .ss-button-text {
    display: inline-block;
    position: relative;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
  }
  .b-social-subscr.inst .ss-button-text:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('bg-inst.jpg') no-repeat bottom left;
    background-size: 120% 100%;
    pointer-events: none;
    mix-blend-mode: screen;
  }
}
.b-social-subscr.inst .ss-button {
  color: #eb3c3c;
}
.b-social-subscr.ss-hidden {
  bottom: -500px;
}
.b-social-subscr > .ss-i {
  padding: 10px 20px 15px 20px;
}
.b-social-subscr .ss-text {
  font-size: 21px;
  line-height: 27px;
  font-weight: bold;
  padding: 20px 0 0;
}
.b-social-subscr .close-ss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  background: url('icon-close.png') no-repeat center;
  background-size: 17px 17px;
  border: 0 none;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.3s;
}
.b-social-subscr .close-ss:hover {
  opacity: 0.75;
}
.b-social-subscr .ss-button-place {
  padding: 20px 0 0;
}
.b-social-subscr .ss-button {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  color: #333;
  font-size: 15px;
  line-height: 36px;
  padding: 0 20px;
  border-radius: 3px;
  border: 0 none;
}
.b-social-subscr .ss-button-decor {
  display: inline-block;
  vertical-align: top;
  width: 34px;
  height: 36px;
  background: url('finger.png') no-repeat center left;
  background-size: 34px 22px;
  margin-left: 20px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: ss-button-decor-bounce;
  animation-name: ss-button-decor-bounce;
}
@-webkit-keyframes ss-button-decor-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateX(0);
  }
  40% {
    -webkit-transform: translateX(30px);
  }
  60% {
    -webkit-transform: translateX(15px);
  }
}
@keyframes ss-button-decor-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(30px);
  }
  60% {
    transform: translateX(15px);
  }
}