/* START Перевернем аву */
#rcl-avatar {
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
}
/* END */

/* START В группе перевернем аву и инвертируем */
.group-avatar {
    -webkit-filter: hue-rotate(90deg);
            filter: hue-rotate(90deg);
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
}
/* END */

/* START в ЛК перевернем кнопки и инвертируем */
#lk-content a.recall-button:hover,
#sunshine_ext_menu a:hover,
#rcl-office:not(.office-across-ocean-pro) #lk-menu a:hover {
    filter: hue-rotate(180deg);
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
}
#lk-content a.recall-button.active,
#rcl-office:not(.office-across-ocean-pro) #lk-menu a.recall-button.active {
    filter: hue-rotate(90deg);
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
/* END */

/* START веселый чат */
.chat-message .emoji {
    height: 20px !important;
    width: 30px !important;
}
/* END */

body.ssi-modalOpen {
    margin: -36px 0 0;
}
body.ssi-modalOpen > div:first-of-type {
    opacity: 0;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
    -webkit-animation-name: vhs-flicker;
            animation-name: vhs-flicker;
    -webkit-animation-duration: 1.2s;
            animation-duration: 1.2s;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
    -webkit-animation-timing-function: steps(7);
            animation-timing-function: steps(7);
    -webkit-animation-iteration-count: 2;
            animation-iteration-count: 2;
}
#afd_garry {
  -webkit-animation-delay: .1s;
      animation-delay: .1s;
    left: 0;
    top: 0;
}
#afd_garry_overlay {
    background-color: rgba(0, 0, 0, 0.55);
    height: 100%;
    left: 150px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1500;
    -webkit-animation-duration: .7s;
          animation-duration: .7s;
    -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
    -webkit-animation-name: vhs-right;
          animation-name: vhs-right;
    -webkit-transform: none;
          transform: none;
}
#afd_garry,
div.ssi-backdrop::after {
    background: #fa8072 url("inc/crazy_harry.jpg") no-repeat scroll 50% center;
    content: "";
    cursor: pointer;
    height: 100%;
    opacity: 0;
    position: fixed;
    width: 150px;
    z-index: 1501;
  -webkit-animation-duration: .7s;
          animation-duration: .7s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: vhs-left;
          animation-name: vhs-left;
  -webkit-transform: translateX(-12.5vw);
          transform: translateX(-12.5vw);
}
div.ssi-backdrop::after {
  -webkit-animation-delay: .7s;
          animation-delay: .7s;
}
div.ssi-backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}
div.ssi-modalOuter {
    left: 150px;
}
div.ssi-modalWrapper .ssi-modalWindow.auto,
div.ssi-modalWrapper.auto {
    margin: 0 calc(50% - 300px);
}

/* https://github.com/jxnblk/vhs */
@-webkit-keyframes vhs-flicker {
    0%   { opacity: 0 }
   12.5% { opacity: .25 }
   25%   { opacity: 0 }
   37.5% { opacity: 0 }
   50%   { opacity: .75 }
   62.5% { opacity: 0 }
   75%   { opacity: 1 }
   87.5% { opacity: .5 }
  100%   { opacity: 1 }
}

@keyframes vhs-flicker {
    0%   { opacity: 0 }
   12.5% { opacity: .25 }
   25%   { opacity: 0 }
   37.5% { opacity: 0 }
   50%   { opacity: .75 }
   62.5% { opacity: 0 }
   75%   { opacity: 1 }
   87.5% { opacity: .5 }
  100%   { opacity: 1 }
}


@-webkit-keyframes vhs-left {
   0% { -webkit-transform: translateX(-12.5vw); transform: translateX(-12.5vw); opacity: 0; }
 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@keyframes vhs-left {
   0% { -webkit-transform: translateX(-12.5vw); transform: translateX(-12.5vw); opacity: 0; }
 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}


@-webkit-keyframes vhs-right {
   0% { -webkit-transform: translateX(62.5vw); transform: translateX(62.5vw); opacity: 0; }
 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@keyframes vhs-right {
   0% { -webkit-transform: translateX(62.5vw); transform: translateX(62.5vw); opacity: 0; }
 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}


#afd_block {
    background-color: #ffbe7a;
    left: 0;
    opacity: 0;
    position: fixed;
    text-align: center;
    top: 30px;
    width: 150px;
    z-index: 2000;
  -webkit-animation-duration: .6s;
          animation-duration: .6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: vhs-top;
          animation-name: vhs-top;
  -webkit-transform: translateY(-12.5vh);
          transform: translateY(-12.5vh);
}
.afd_congratulations {
    font-size: 18px;
    font-weight: bold;
    margin: 5px 0;
}
@-webkit-keyframes vhs-top {
   0% { -webkit-transform: translateY(-12.5vh); transform: translateY(-12.5vh); opacity: 0; }
 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@keyframes vhs-top {
   0% { -webkit-transform: translateY(-12.5vh); transform: translateY(-12.5vh); opacity: 0; }
 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}



#afd_left_catcher {
    align-items: center;
    background-color: #e3cfae;
    border-left: 20px solid #f08080;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    left: -16px;
    line-height: normal;
    padding: 5px 5px 5px 10px;
    position: fixed;
    top: 200px;
    transition: left 0.35s ease;
}
#afd_left_catcher:hover {
    left: 0;
    transition: left .35s ease;
}
#afd_left_catcher .fa {
    font-size: 20px;
    margin: 0 7px 0 0;
}
#afd_left_catcher:hover .fa {
    color: #dc143c;
    transition: color .35s ease;
}
.adf_eyes {
    position: absolute;
    top: -25px;
    opacity: .8;
    overflow: hidden;
    height: 100%;
  -webkit-animation-delay: 5s;
      animation-delay: 5s;
  -webkit-animation-duration: 1.6s;
          animation-duration: 1.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: eyes_hide;
          animation-name: eyes_hide;
}
@keyframes eyes_hide {
 100% { height: 0; opacity: 0;  }
}
@-webkit-keyframes eyes_hide {
 100% { height: 0; opacity: 0; }
}