/**
 * Style the floating social networks block
 */
#block-arjang-social-networks {
  /**
   * define the dimensions of the social container.
   * used for animations, transitions and placements
   */
  --arjang-social-height: 4.3rem; /* 4.3rem for when no p is present. otherwise 8.5rem */
  --arjang-social-width: 20rem; /* 20rem for when no p is present. otherwise 26rem */

  position: fixed;
  right: 0;
  top: calc(50% - var(--arjang-social-width) / 2);

  -moz-transform: rotate(-90deg) translate(0, -100%);
  -webkit-transform: rotate(-90deg) translate(0, -100%);
  -o-transform: rotate(-90deg) translate(0, -100%);
  transform: rotate(-90deg) translate(0, -100%);

  -moz-transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  -o-transform-origin: 100% 0;
  transform-origin: 100% 0;

  background-color: #fff;
  border-top: 3px solid #f7941e;

  text-align: center;
  width: var(--arjang-social-width);
}
#block-arjang-social-networks::before {
  content: "\f077";
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  padding: 0 7px;

  background-color: #f7941e;
  position: absolute;
  top: -31px;
  left: 0;

  -moz-border-radius: 50% 50% 0 0;
  -webkit-border-radius: 50% 50% 0 0;
  -o-border-radius: 50% 50% 0 0;
  -ms-border-radius: 50% 50% 0 0;
  border-radius: 50% 50% 0 0;

  border: 1px solid #f7941e;
  color: #fff;
  cursor: pointer;
}
/**
 * the hover effect
 */
#block-arjang-social-networks {
  height: 0;

  -moz-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}
#block-arjang-social-networks:hover {
  height: var(--arjang-social-height);
}
/*
#block-arjang-social-networks:hover::before {
  content: "\f078";
}
*/

/**
 * The animation
 */
@-moz-keyframes arjang-social {
  0%   { height: 0; }
  28%  { height: var(--arjang-social-height); }
  78%  { height: var(--arjang-social-height); }
  100% { height: 0; }
}
@-webkit-keyframes arjang-social {
  0%   { height: 0; }
  28%  { height: var(--arjang-social-height); }
  78%  { height: var(--arjang-social-height); }
  100% { height: 0; }
}
@-ms-keyframes arjang-social {
  0%   { height: 0; }
  28%  { height: var(--arjang-social-height); }
  78%  { height: var(--arjang-social-height); }
  100% { height: 0; }
}
@-o-keyframes arjang-social {
  0%   { height: 0; }
  28%  { height: var(--arjang-social-height); }
  78%  { height: var(--arjang-social-height); }
  100% { height: 0; }
}
@keyframes arjang-social {
  0%   { height: 0; }
  28%  { height: var(--arjang-social-height); }
  78%  { height: var(--arjang-social-height); }
  100% { height: 0; }
}
#block-arjang-social-networks {
  -moz-animation-name: arjang-social;
  -webkit-animation-name: arjang-social;
  -ms-animation-name: arjang-social;
  -o-animation-name: arjang-social;
  animation-name: arjang-social;

  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -ms-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;

  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}
#block-arjang-social-networks:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -o-animation-play-state: paused;
  -ms-animation-play-state: paused;
  animation-play-state: paused;
}

/**
 * Style social icons
 */
#block-arjang-social-networks ul.social-links li a {
  /* undo rotation */
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);

  display: block;
}