html,
body {
  padding: 0;
  margin: 0;
}

#formatContainer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 130px;
  height: 200px;
  z-index: 999999999999;
}

#formatContainer.hidden {
  display: none;
}

.format-text {
  text-align: center;
  position: absolute;
  left: -230px;
  top: 10px;
  text-transform: uppercase;
  width: 305px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  background: #8e0707;
  color: wheat;
  display: none;
  border-radius: 4px;
  padding: 20px;
  z-index: -1;
}

.format-text.format-text-show {
  display: block;
  animation-name: animateTextShow;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.format-text.format-text-hide {
  display: block;
  animation-name: animateTextHide;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

#formatContainer img {
  height: 100%;
  -webkit-animation: animateGlow 0.8s linear infinite;
  -moz-animation: animateGlow 0.8s linear infinite;
  animation: animateGlow 0.8s linear infinite;
}

.format-animation-show {
  display: block;
  right: -150px;
  animation-name: animateHorse1;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.format-animation-show-3 {
  display: block;
  right: -150px;
  animation-name: animateHorse3;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.shakeAnimation {
  animation: shake 0.52s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.format-animation-hide {
  display: block;
  right: 0;
  animation-name: animateHorseHide;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.format-animation-show-2 {
  display: block;
  left: -150px;
  animation-name: animateHorse2;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes animateHorse1 {
  0% {
    right: -150px;
    bottom: 0px;
  }

  15% {
    right: -150px;
    bottom: 0px;
  }

  50% {
    right: -80px;
    bottom: 0px;
  }

  70% {
    right: -80px;
    bottom: 0px;
  }

  100% {
    right: -150px;
    bottom: 0px;
  }

}

@keyframes animateHorseHide {
  0% {
    right: 0px;
    bottom: 0px;
  }

  45% {
    right: -150px;
    bottom: 0px;
  }

  100% {
    right: -150px;
    bottom: 0px;
  }
}

@keyframes animateGlow {
  0% {
    -webkit-filter: drop-shadow(1px 2px 0px rgba(26, 7, 7, 0.76)) drop-shadow(-1px -1px 0px rgba(26, 7, 7, 0.76));
    filter: drop-shadow(1px 1px 1px rgba(26, 7, 7, 0.76)) drop-shadow(-1px -1px 1px rgba(26, 7, 7, 0.76));
  }

  50% {
    -webkit-filter: drop-shadow(0px 1px 0px rgba(26, 7, 7, 0.76)) drop-shadow(0px -1px 0px rgba(26, 7, 7, 0.76));
    filter: drop-shadow(0px 1px 0px rgba(26, 7, 7, 0.76)) drop-shadow(0px -1px 0px rgba(26, 7, 7, 0.76));
  }

  100% {
    -webkit-filter: drop-shadow(1px 1px 0px rgba(26, 7, 7, 0.76)) drop-shadow(-1px -1px 0px rgba(26, 7, 7, 0.76));
    filter: drop-shadow(1px 1px 0px rgba(26, 7, 7, 0.76)) drop-shadow(-1px -1px 0px rgba(26, 7, 7, 0.76));
  }
}

#frameContainer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 0;
  height: 100%;
  min-width: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

#sk-holder #sk-messenger-button {
  right: 40px !important;
}

#sk-container #sk-wrapper .sk-logo {
  display: none;
}

#sk-container #sk-wrapper .sk-intro-section {
  display: none;
}

@keyframes animateHorse2 {
  0% {
    right: auto;
    left: -150px;
    bottom: 0px;
  }

  15% {
    right: auto;
    left: -150px;
    bottom: 0;
  }

  50% {
    right: auto;
    left: -80px;
    bottom: 0px;
  }

  70% {
    right: auto;
    left: -80px;
    bottom: 0px;
  }

  100% {
    right: auto;
    left: -150px;
    bottom: 0px;
  }

}

@keyframes animateHorse3 {
  0% {
    right: -150px;
    bottom: 0px;
  }

  15% {
    right: -150px;
    bottom: 0px;
  }

  100% {
    right: 0px;
    bottom: 0px;
  }
}

@keyframes animateTextShow {

  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
}

@keyframes animateTextHide {
  0% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }

  100% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
}

.container {
  width: 200px;
  height: 140px;
  position: relative;
}

h1, h2 {
  font-size: 20px;
  text-transform: uppercase;
}

span {
  width: 100%;
  float: left;
  color: #ffffff;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation-name: titleAnimation;
  animation-timing-function: ease;
  animation-duration: 1.5s;

}

h1 span {
  animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;
}

h1 span:first-child {
  animation-delay: 0.7s;

}

h1 span:last-child {
  color: #ffe221;
  animation-delay: 0.5s;
}

h2 {
  top: 0;
  position: absolute;
}

span {
  animation-delay: 4.1s;
  -webkit-animation-fill-mode: forwards;
}

span:first-child {
  animation-delay: 4.2s;

}

span:last-child {
  color: #ffe221;
  animation-delay: 4s;
}

#activateButton {
  box-shadow: none;
  outline: none;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-weight: bold;
  padding: 10px 25px;
  text-transform: uppercase;
  text-align: center;
  color: #FFF;
  background-color: #2f3638;
  font-size: 16px;
  border: none;
  margin-top: 10px;
}

#closeButton {
  cursor: pointer;
  width: 150px;
  height: 30px;
  font-size: 14px;
  background: transparent;
  border: none;
  color: white;
  outline: none;
  box-shadow: none;
}

@keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}