body {
  margin: 0;
  padding: 0;
}

#skoda-ad {
  width: 950px;
  height: 200px;
  display: block;
  position: relative;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}

#skoda-ad img {
  position: absolute;
}

#skoda-apla {
  position: absolute;
  left: 0;
  top: 0;
  width: 428px;
  height: 100%;
  z-index: 2;
}

#skoda-triangle {
  border-left: 10px solid #4ba82e;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  left: 428px;
  margin: -10px 0 0;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 12;
  opacity: 0;
}

#skoda-baloon-1 {
  top: 0;
  left: 42px;
  z-index: 7;
}

#skoda-baloon-2 {
  top: 0;
  right: 0;
}

#skoda-baloon-3 {
  top: 120px;
  right: 336px;
  z-index: 7;
}

#skoda-baloon-4 {
  bottom: 0px;
  left: 60px;
}

#skoda-baloon-5 {
  bottom: 0;
  right: 20px;
}

#skoda-baloon-6 {
  bottom: 0px;
  left: -66px;
}

.skoda-kv {
  top: 0px;
  right: 0px;
  opacity: 0;
  position: absolute;
  width: 532px;
  height: 200px;
  overflow: hidden;
}

.skoda-copy {
  z-index: 7;
  top: 40px;
  left: 20px;
  opacity: 0;
}

.skoda-button {
  left: 20px;
  top: 130px;
  position: absolute;
  width: 193px;
  height: 39px;
  z-index: 3;
}

.skoda-baloon {
  z-index: 6;
}

.skoda-arrow {
  position: absolute;
  top: 13px;
  right: 40px;
}

#skoda-button-3 .skoda-arrow {
  top: 15px;
}

.skoda-start #skoda-apla {
  -webkit-animation: apla 10s linear 0s both;
          animation: apla 10s linear 0s both;
}

.skoda-start #skoda-triangle {
  -webkit-animation: triangle 10s linear 0s both;
          animation: triangle 10s linear 0s both;
  opacity: 1;
}

.skoda-start #skoda-copy-1 {
  -webkit-animation: copy 3s cubic-bezier(0.19, 1, 0.22, 1) 0s both;
          animation: copy 3s cubic-bezier(0.19, 1, 0.22, 1) 0s both;
}

.skoda-start #skoda-copy-2 {
  -webkit-animation: copy 3s cubic-bezier(0.19, 1, 0.22, 1) 3s both;
          animation: copy 3s cubic-bezier(0.19, 1, 0.22, 1) 3s both;
}

.skoda-start #skoda-copy-3 {
  -webkit-animation: copy 4s cubic-bezier(0.19, 1, 0.22, 1) 6s both;
          animation: copy 4s cubic-bezier(0.19, 1, 0.22, 1) 6s both;
}

.skoda-start #skoda-kv-1 {
  -webkit-animation: kv 0.5s linear 0s both;
          animation: kv 0.5s linear 0s both;
}

.skoda-start #skoda-kv-2 {
  -webkit-animation: kv 0.5s linear 3s both;
          animation: kv 0.5s linear 3s both;
}

.skoda-start #skoda-kv-3 {
  -webkit-animation: kv 0.5s linear 6s both;
          animation: kv 0.5s linear 6s both;
}

.skoda-start #skoda-button-1 {
  -webkit-animation: button-1 3s linear 0s both;
          animation: button-1 3s linear 0s both;
}

.skoda-start #skoda-button-3 {
  -webkit-animation: button-2 0.5s linear 3s both;
          animation: button-2 0.5s linear 3s both;
}

.skoda-start #skoda-baloon-1 {
  -webkit-animation: baloon-1 4s linear infinite;
          animation: baloon-1 4s linear infinite;
}

.skoda-start #skoda-baloon-2 {
  -webkit-animation: baloon-1 4s linear infinite;
          animation: baloon-1 4s linear infinite;
}

.skoda-start #skoda-baloon-3 {
  -webkit-animation: baloon-1 4s linear infinite;
          animation: baloon-1 4s linear infinite;
}

.skoda-start #skoda-baloon-4 {
  -webkit-animation: baloon-2 4s linear infinite;
          animation: baloon-2 4s linear infinite;
}

.skoda-start #skoda-baloon-5 {
  -webkit-animation: baloon-2 4s linear infinite;
          animation: baloon-2 4s linear infinite;
}

.skoda-start #skoda-baloon-6 {
  -webkit-animation: baloon-2 4s linear infinite;
          animation: baloon-2 4s linear infinite;
}

.skoda-start .skoda-arrow {
  -webkit-animation: arrow 1s linear infinite;
          animation: arrow 1s linear infinite;
}

@-webkit-keyframes kv {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes kv {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes triangle {
  0%, 27% {
    border-left-color: #4ba82e;
  }
  33%, 60% {
    border-left-color: #0763b0;
  }
  66%, 100% {
    border-left-color: #e7ac0e;
  }
}

@keyframes triangle {
  0%, 27% {
    border-left-color: #4ba82e;
  }
  33%, 60% {
    border-left-color: #0763b0;
  }
  66%, 100% {
    border-left-color: #e7ac0e;
  }
}

@-webkit-keyframes apla {
  0%, 27% {
    background-color: #4ba82e;
  }
  33%, 60% {
    background-color: #0763b0;
  }
  66%, 100% {
    background-color: #e7ac0e;
  }
}

@keyframes apla {
  0%, 27% {
    background-color: #4ba82e;
  }
  33%, 60% {
    background-color: #0763b0;
  }
  66%, 100% {
    background-color: #e7ac0e;
  }
}

@-webkit-keyframes baloon-1 {
  0%, 100% {
    -webkit-transform: translate(0%, 0%) rotate(0deg);
            transform: translate(0%, 0%) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(20%, -20%) rotate(15deg);
            transform: translate(20%, -20%) rotate(15deg);
  }
}

@keyframes baloon-1 {
  0%, 100% {
    -webkit-transform: translate(0%, 0%) rotate(0deg);
            transform: translate(0%, 0%) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(20%, -20%) rotate(15deg);
            transform: translate(20%, -20%) rotate(15deg);
  }
}

@-webkit-keyframes baloon-2 {
  0%, 100% {
    -webkit-transform: translate(0%, 0%) rotate(0deg);
            transform: translate(0%, 0%) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(-10%, 10%) rotate(10deg);
            transform: translate(-10%, 10%) rotate(10deg);
  }
}

@keyframes baloon-2 {
  0%, 100% {
    -webkit-transform: translate(0%, 0%) rotate(0deg);
            transform: translate(0%, 0%) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(-10%, 10%) rotate(10deg);
            transform: translate(-10%, 10%) rotate(10deg);
  }
}

@-webkit-keyframes button-1 {
  0%, 100% {
    opacity: 0;
  }
  20%, 90% {
    opacity: 1;
  }
}

@keyframes button-1 {
  0%, 100% {
    opacity: 0;
  }
  20%, 90% {
    opacity: 1;
  }
}

@-webkit-keyframes button-2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes button-2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes copy {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  20%, 90% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes copy {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  20%, 90% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@-webkit-keyframes arrow {
  0%, 50%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  25% {
    -webkit-transform: translateX(25%);
            transform: translateX(25%);
  }
  75% {
    -webkit-transform: translateX(-25%);
            transform: translateX(-25%);
  }
}

@keyframes arrow {
  0%, 50%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  25% {
    -webkit-transform: translateX(25%);
            transform: translateX(25%);
  }
  75% {
    -webkit-transform: translateX(-25%);
            transform: translateX(-25%);
  }
}