.share-bar-container {
  background: #F2F2F2;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 200;
  height: 40px;
  transition: transform 0.25s 0.1s ease-in-out; }
  @media screen and (min-width: 68.75rem) {
    .share-bar-container {
      height: auto;
      transition: none; } }

.down .share-bar-container {
  transform: translate3d(0, 100%, 0); }
  @media screen and (min-width: 68.75rem) {
    .down .share-bar-container {
      transform: none; } }

.share-buttons {
  position: relative;
  height: 40px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  background: #F2F2F2; }
  @media screen and (min-width: 68.75rem) {
    .share-buttons {
      position: fixed;
      height: 212px;
      padding-right: 0;
      width: auto;
      top: 50%;
      right: 0;
      bottom: auto;
      margin-right: 0;
      background: none;
      margin-top: -106px; }
      .share-buttons:lang(ar) {
        right: auto;
        left: 0;
        margin-left: 0;
        margin-right: auto;
        padding-left: 0; } }
  .share-buttons a {
    text-decoration: none; }
  @media screen and (min-width: 68.75rem) {
    .share-buttons .share-bar-button {
      float: right;
      margin-top: 1px;
      clear: both; }
      .share-buttons .share-bar-button:lang(ar) {
        float: left; } }
  .share-buttons .share-bar-button:first-child {
    margin-top: 0; }
  .share-buttons .share-bar-button:after {
    clear: both;
    display: table; }

.share-bar-button {
  display: block;
  position: relative;
  float: left;
  height: 45px; }
  .share-bar-button:lang(ar) {
    float: right; }
  @media screen and (min-width: 68.75rem) {
    .share-bar-button {
      float: none; } }
  .share-bar-button:hover {
    cursor: pointer; }
    .share-bar-button:hover .share-button-primary {
      box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);
      background: #12284c; }
    .share-bar-button:hover .share-button-secondary-content {
      transform: translate3d(0, 0, 0);
      background: #12284c; }
    .share-bar-button:hover svg.icon {
      fill: #ffffff; }
    .share-bar-button:hover .share-button-secondary-content {
      color: #ffffff; }
    @media screen and (min-width: 68.75rem) {
      .share-bar-button:hover .share-button-secondary {
        overflow: hidden;
        margin-right: 22.5px;
        height: 45px; }
        .share-bar-button:hover .share-button-secondary:lang(ar) {
          margin-right: auto;
          margin-left: 22.5px; } }

.share-button-primary {
  width: 40px;
  height: 40px;
  padding: 10px;
  margin-top: 0;
  text-align: center; }
  @media screen and (min-width: 68.75rem) {
    .share-button-primary {
      position: absolute;
      background: #F2F2F2;
      width: 45px;
      height: 45px;
      right: 0;
      padding: 15px;
      top: 50%;
      margin-top: -22.5px; }
      .share-button-primary:lang(ar) {
        right: auto;
        left: 0; } }

.share-button-icon {
  display: block;
  color: #12284c;
  position: absolute;
  width: 45px;
  line-height: 45px;
  font-size: 16px;
  margin-top: 1px; }

.share-button-secondary {
  display: none; }
  @media screen and (min-width: 68.75rem) {
    .share-button-secondary {
      overflow: hidden;
      margin-right: -200px;
      height: 45px;
      display: block; }
      .share-button-secondary:lang(ar) {
        margin-right: auto;
        margin-left: -200px; } }

.share-button-secondary-content {
  font-family: "Open Sans", "Tajawal", "Arial", sans-serif;
  font-weight: bold;
  font-size: .75rem;
  background: #F2F2F2;
  display: block;
  height: 45px;
  text-align: left;
  padding-right: 36px;
  padding-left: 27px;
  line-height: 45px;
  color: #12284c;
  transform: translate3d(100%, 0, 0);
  transition: transform 175ms ease; }
  .share-button-secondary-content:lang(ar) {
    transform: translate3d(-100%, 0, 0); }
  .share-button-secondary-content:lang(ar) {
    text-align: right;
    padding-left: 36px;
    padding-right: 27px; }

.share-bar-mobile-text {
  display: block;
  float: left;
  font-family: "Open Sans", "Tajawal", "Arial", sans-serif;
  font-weight: bold;
  font-size: .75rem;
  color: #12284c;
  padding: 11px; }
  .share-bar-mobile-text:lang(ar) {
    float: right;
    text-align: right; }
  @media screen and (min-width: 68.75rem) {
    .share-bar-mobile-text {
      display: none; } }