This website uses cookies to ensure you get the best experience on our website.
Got it

A CSS hacks blog of from the Workshape.io crew.
Hacks are published weekly and are built using Stylus along with Nib.

Thank you

StuntsStunt #11 Poké Ball

  • HTML
  • Stylus (Source)
  • CSS (Output)

<div class="stunt-pokeball">
  <div class="central-ring">
    <div class="bottom-half"></div>
  </div>
  <div class="button-wrap-stroke"></div>
  <div class="button-wrap-fill"></div>
  <div class="button-inner"></div>
</div>
@import 'nib'

// ------------------------------[   Variables   ]------------------------------

pokeball-size = 300px
color-red = #f23e2d
color-white = #fff
color-ring = #444
stroke-base-size = pokeball-size / 100
ring-thickness = pokeball-size / 9

// ------------------------------[     Mixins    ]------------------------------

circle(size)
    width size
    padding-bottom size
    border-radius 100%

filter(value)
    -webkit-filter value
    filter value

// ------------------------------[     Styles    ]------------------------------

.stunt-pokeball
    circle(pokeball-size)
    background color-red
    overflow hidden
    position relative
    margin auto
    box-shadow rgba(0, 0, 0, .1) (stroke-base-size * -1.5) (stroke-base-size * 2) (stroke-base-size * 10) 0
    animation pokeball-base .5s forwards, pokeball-base-color forwards 1s 1s

    &:before
        circle(100%)
        content ''
        position absolute
        left 0
        top 0
        box-shadow rgba(0, 0, 0, .2) (stroke-base-size * 6) (stroke-base-size * -6) 100px 0 inset
        z-index 3

    &:after
        shine-color = saturate(lighten(color-red, 40), 30)

        circle(pokeball-size / 1)
        content ''
        background radial-gradient(shine-color, rgba(shine-color, 0) 50%)
        border-radius 100%
        position absolute
        right -25%
        top -15%
        transform rotate(-65deg)
        z-index 3
        opacity 0
        animation pokeball-shine .2s 2.5s forwards

    .central-ring
        circle(pokeball-size * 3)
        position absolute
        left 65%
        top 110%
        margin-left -(@width / 2)
        background color-ring
        z-index 2
        animation pokeball-ring .5s .7s forwards

        .bottom-half
            width 100%
            height 100%
            position absolute
            background color-white
            border-radius 100%
            margin-top 110%
            overflow hidden
            animation pokeball-bottom-half .5s .9s forwards

    .button-wrap-stroke, .button-wrap-fill, .button-inner
        position absolute
        top 41.5%
        left 66%
        transform translate(-50%, -50%) scale(0)

    .button-wrap-stroke, .button-wrap-fill
        circle(pokeball-size / 3)
        content ''

    // .button-wrap-stroke
    //     background color-stroke
    //     border color-stroke solid stroke-base-size
    //     z-index 1

    .button-wrap-fill
        background color-ring
        z-index 3
        animation pokeball-button .5s 1.5s forwards

    .button-inner
        circle(pokeball-size / 4.8)
        background linear-gradient(30deg, darken(color-white, 20), color-white)
        z-index 4
        border (stroke-base-size) solid color-stroke
        animation pokeball-button .5s 1.8s forwards

        &:after
            circle(64%)
            content ''
            position absolute
            left 50%
            top 50%
            transform translate(-50%, -50%) scale(0)
            background linear-gradient(30deg, darken(color-white, 5), color-white)
            box-shadow rgba(0, 0, 0, .2) (stroke-base-size / -3) (stroke-base-size / 3) (stroke-base-size / 1.5) 0,
                rgba(0, 0, 0, .1) (stroke-base-size / 3) (stroke-base-size / -3) (stroke-base-size / 1.5) 0 inset
            margin-left 2%
            margin-top -1%
            animation pokeball-button-inner .5s 2.1s forwards

// ------------------------------[   Animations  ]------------------------------

@keyframes pokeball-base {

    0% {
        transform scale(0)
        background #fff
    }

    75% {
        transform scale(1.1)
    }

    100% {
        transform scale(1)
        background mix(color-white, color-red, 80%)
    }

}

@keyframes pokeball-base-color {

    0% {
        background mix(color-white, color-red, 80%)
    }

    100% {
        background color-red
    }
    top 110%

}

@keyframes pokeball-ring {

    from {
        top 100%
    }

    to {
        top 36%
    }

}

@keyframes pokeball-bottom-half {

    from {
        margin-top 100%
    }

    to {
        margin-top ring-thickness
    }

}

@keyframes pokeball-button {

    0% {
        transform translate3d(-50%, -50%, 0) scale(0)
    }

    75% {
        transform translate3d(-50%, -50%, 0) scale(1.1)
    }

    100% {
        transform translate3d(-50%, -50%, 0) scale(1)
    }

}

@keyframes pokeball-button-inner {

    0% {
        transform translate3d(-50%, -50%, 0) scale(0)
    }

    100% {
        transform translate3d(-50%, -50%, 0) scale(1)
    }

}

@keyframes pokeball-shine {

    from {
        opacity 0
    }

    to {
        opacity .6
    }

}
.stunt-pokeball {
  width: 300px;
  padding-bottom: 300px;
  border-radius: 100%;
  background: #f23e2d;
  overflow: hidden;
  position: relative;
  margin: auto;
  -webkit-box-shadow: rgba(0,0,0,0.1) -4.5px 6px 30px 0;
  box-shadow: rgba(0,0,0,0.1) -4.5px 6px 30px 0;
  -webkit-animation: pokeball-base 0.5s forwards, pokeball-base-color forwards 1s 1s;
  -moz-animation: pokeball-base 0.5s forwards, pokeball-base-color forwards 1s 1s;
  -o-animation: pokeball-base 0.5s forwards, pokeball-base-color forwards 1s 1s;
  -ms-animation: pokeball-base 0.5s forwards, pokeball-base-color forwards 1s 1s;
  animation: pokeball-base 0.5s forwards, pokeball-base-color forwards 1s 1s;
}
.stunt-pokeball:before {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-box-shadow: rgba(0,0,0,0.2) 18px -18px 100px 0 inset;
  box-shadow: rgba(0,0,0,0.2) 18px -18px 100px 0 inset;
  z-index: 3;
}
.stunt-pokeball:after {
  width: 300px;
  padding-bottom: 300px;
  border-radius: 100%;
  content: '';
  background: -webkit-radial-gradient(#ffedea, rgba(255,237,234,0) 50%);
  background: -moz-radial-gradient(#ffedea, rgba(255,237,234,0) 50%);
  background: -o-radial-gradient(#ffedea, rgba(255,237,234,0) 50%);
  background: -ms-radial-gradient(#ffedea, rgba(255,237,234,0) 50%);
  background: radial-gradient(#ffedea, rgba(255,237,234,0) 50%);
  border-radius: 100%;
  position: absolute;
  right: -25%;
  top: -15%;
  -webkit-transform: rotate(-65deg);
  -moz-transform: rotate(-65deg);
  -o-transform: rotate(-65deg);
  -ms-transform: rotate(-65deg);
  transform: rotate(-65deg);
  z-index: 3;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-filter: alpha(opacity=0);
  filter: alpha(opacity=0);
  -webkit-animation: pokeball-shine 0.2s 2.5s forwards;
  -moz-animation: pokeball-shine 0.2s 2.5s forwards;
  -o-animation: pokeball-shine 0.2s 2.5s forwards;
  -ms-animation: pokeball-shine 0.2s 2.5s forwards;
  animation: pokeball-shine 0.2s 2.5s forwards;
}
.stunt-pokeball .central-ring {
  width: 900px;
  padding-bottom: 900px;
  border-radius: 100%;
  position: absolute;
  left: 65%;
  top: 110%;
  margin-left: -450px;
  background: #444;
  z-index: 2;
  -webkit-animation: pokeball-ring 0.5s 0.7s forwards;
  -moz-animation: pokeball-ring 0.5s 0.7s forwards;
  -o-animation: pokeball-ring 0.5s 0.7s forwards;
  -ms-animation: pokeball-ring 0.5s 0.7s forwards;
  animation: pokeball-ring 0.5s 0.7s forwards;
}
.stunt-pokeball .central-ring .bottom-half {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
  border-radius: 100%;
  margin-top: 110%;
  overflow: hidden;
  -webkit-animation: pokeball-bottom-half 0.5s 0.9s forwards;
  -moz-animation: pokeball-bottom-half 0.5s 0.9s forwards;
  -o-animation: pokeball-bottom-half 0.5s 0.9s forwards;
  -ms-animation: pokeball-bottom-half 0.5s 0.9s forwards;
  animation: pokeball-bottom-half 0.5s 0.9s forwards;
}
.stunt-pokeball .button-wrap-stroke,
.stunt-pokeball .button-wrap-fill,
.stunt-pokeball .button-inner {
  position: absolute;
  top: 41.5%;
  left: 66%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -moz-transform: translate(-50%, -50%) scale(0);
  -o-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}
.stunt-pokeball .button-wrap-stroke,
.stunt-pokeball .button-wrap-fill {
  width: 100px;
  padding-bottom: 100px;
  border-radius: 100%;
  content: '';
}
.stunt-pokeball .button-wrap-fill {
  background: #444;
  z-index: 3;
  -webkit-animation: pokeball-button 0.5s 1.5s forwards;
  -moz-animation: pokeball-button 0.5s 1.5s forwards;
  -o-animation: pokeball-button 0.5s 1.5s forwards;
  -ms-animation: pokeball-button 0.5s 1.5s forwards;
  animation: pokeball-button 0.5s 1.5s forwards;
}
.stunt-pokeball .button-inner {
  width: 62.5px;
  padding-bottom: 62.5px;
  border-radius: 100%;
  background: -webkit-linear-gradient(60deg, #ccc, #fff);
  background: -moz-linear-gradient(60deg, #ccc, #fff);
  background: -o-linear-gradient(60deg, #ccc, #fff);
  background: -ms-linear-gradient(60deg, #ccc, #fff);
  background: linear-gradient(30deg, #ccc, #fff);
  z-index: 4;
  border: 3px solid color-stroke;
  -webkit-animation: pokeball-button 0.5s 1.8s forwards;
  -moz-animation: pokeball-button 0.5s 1.8s forwards;
  -o-animation: pokeball-button 0.5s 1.8s forwards;
  -ms-animation: pokeball-button 0.5s 1.8s forwards;
  animation: pokeball-button 0.5s 1.8s forwards;
}
.stunt-pokeball .button-inner:after {
  width: 64%;
  padding-bottom: 64%;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -moz-transform: translate(-50%, -50%) scale(0);
  -o-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  background: -webkit-linear-gradient(60deg, #f2f2f2, #fff);
  background: -moz-linear-gradient(60deg, #f2f2f2, #fff);
  background: -o-linear-gradient(60deg, #f2f2f2, #fff);
  background: -ms-linear-gradient(60deg, #f2f2f2, #fff);
  background: linear-gradient(30deg, #f2f2f2, #fff);
  -webkit-box-shadow: rgba(0,0,0,0.2) -1px 1px 2px 0, rgba(0,0,0,0.1) 1px -1px 2px 0 inset;
  box-shadow: rgba(0,0,0,0.2) -1px 1px 2px 0, rgba(0,0,0,0.1) 1px -1px 2px 0 inset;
  margin-left: 2%;
  margin-top: -1%;
  -webkit-animation: pokeball-button-inner 0.5s 2.1s forwards;
  -moz-animation: pokeball-button-inner 0.5s 2.1s forwards;
  -o-animation: pokeball-button-inner 0.5s 2.1s forwards;
  -ms-animation: pokeball-button-inner 0.5s 2.1s forwards;
  animation: pokeball-button-inner 0.5s 2.1s forwards;
}
@-moz-keyframes pokeball-base {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    background: #fff;
  }
  75% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background: #fcd8d5;
  }
}
@-webkit-keyframes pokeball-base {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    background: #fff;
  }
  75% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background: #fcd8d5;
  }
}
@-o-keyframes pokeball-base {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    background: #fff;
  }
  75% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background: #fcd8d5;
  }
}
@keyframes pokeball-base {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    background: #fff;
  }
  75% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background: #fcd8d5;
  }
}
@-moz-keyframes pokeball-base-color {
 {
    top: 110%;
  }
  0% {
    background: #fcd8d5;
  }
  100% {
    background: #f23e2d;
  }
}
@-webkit-keyframes pokeball-base-color {
 {
    top: 110%;
  }
  0% {
    background: #fcd8d5;
  }
  100% {
    background: #f23e2d;
  }
}
@-o-keyframes pokeball-base-color {
 {
    top: 110%;
  }
  0% {
    background: #fcd8d5;
  }
  100% {
    background: #f23e2d;
  }
}
@keyframes pokeball-base-color {
 {
    top: 110%;
  }
  0% {
    background: #fcd8d5;
  }
  100% {
    background: #f23e2d;
  }
}
@-moz-keyframes pokeball-ring {
  from {
    top: 100%;
  }
  to {
    top: 36%;
  }
}
@-webkit-keyframes pokeball-ring {
  from {
    top: 100%;
  }
  to {
    top: 36%;
  }
}
@-o-keyframes pokeball-ring {
  from {
    top: 100%;
  }
  to {
    top: 36%;
  }
}
@keyframes pokeball-ring {
  from {
    top: 100%;
  }
  to {
    top: 36%;
  }
}
@-moz-keyframes pokeball-bottom-half {
  from {
    margin-top: 100%;
  }
  to {
    margin-top: 33.333333333333336px;
  }
}
@-webkit-keyframes pokeball-bottom-half {
  from {
    margin-top: 100%;
  }
  to {
    margin-top: 33.333333333333336px;
  }
}
@-o-keyframes pokeball-bottom-half {
  from {
    margin-top: 100%;
  }
  to {
    margin-top: 33.333333333333336px;
  }
}
@keyframes pokeball-bottom-half {
  from {
    margin-top: 100%;
  }
  to {
    margin-top: 33.333333333333336px;
  }
}
@-moz-keyframes pokeball-button {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    -moz-transform: translate3d(-50%, -50%, 0) scale(0);
    -o-transform: translate3d(-50%, -50%, 0) scale(0);
    -ms-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  75% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1.1);
    transform: translate3d(-50%, -50%, 0) scale(1.1);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@-webkit-keyframes pokeball-button {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    -moz-transform: translate3d(-50%, -50%, 0) scale(0);
    -o-transform: translate3d(-50%, -50%, 0) scale(0);
    -ms-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  75% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1.1);
    transform: translate3d(-50%, -50%, 0) scale(1.1);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@-o-keyframes pokeball-button {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    -moz-transform: translate3d(-50%, -50%, 0) scale(0);
    -o-transform: translate3d(-50%, -50%, 0) scale(0);
    -ms-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  75% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1.1);
    transform: translate3d(-50%, -50%, 0) scale(1.1);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@keyframes pokeball-button {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    -moz-transform: translate3d(-50%, -50%, 0) scale(0);
    -o-transform: translate3d(-50%, -50%, 0) scale(0);
    -ms-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  75% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1.1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1.1);
    transform: translate3d(-50%, -50%, 0) scale(1.1);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@-moz-keyframes pokeball-button-inner {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    -moz-transform: translate3d(-50%, -50%, 0) scale(0);
    -o-transform: translate3d(-50%, -50%, 0) scale(0);
    -ms-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@-webkit-keyframes pokeball-button-inner {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    -moz-transform: translate3d(-50%, -50%, 0) scale(0);
    -o-transform: translate3d(-50%, -50%, 0) scale(0);
    -ms-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@-o-keyframes pokeball-button-inner {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    -moz-transform: translate3d(-50%, -50%, 0) scale(0);
    -o-transform: translate3d(-50%, -50%, 0) scale(0);
    -ms-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@keyframes pokeball-button-inner {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    -moz-transform: translate3d(-50%, -50%, 0) scale(0);
    -o-transform: translate3d(-50%, -50%, 0) scale(0);
    -ms-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@-moz-keyframes pokeball-shine {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -webkit-filter: alpha(opacity=60);
    filter: alpha(opacity=60);
  }
}
@-webkit-keyframes pokeball-shine {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -webkit-filter: alpha(opacity=60);
    filter: alpha(opacity=60);
  }
}
@-o-keyframes pokeball-shine {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -webkit-filter: alpha(opacity=60);
    filter: alpha(opacity=60);
  }
}
@keyframes pokeball-shine {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -webkit-filter: alpha(opacity=60);
    filter: alpha(opacity=60);
  }
}
Posted the 22/07/2016
Browse more

StuntsStunt #10 Pikachu

  • HTML
  • Stylus (Source)
  • CSS (Output)

<div class="stunt-pikachu">
  <div class="side left">
    <div class="ear"></div>
  </div>
  <div class="side right">
    <div class="ear"></div>
  </div>
  <div class="face">
    <div class="mouth">
      <div class="tongue"></div>
    </div>
    <div class="nose"></div>
    <div class="side left">
      <div class="eye"></div>
      <div class="cheek"></div>
    </div>
    <div class="side right">
      <div class="eye"></div>
      <div class="cheek"></div>
    </div>
  </div>
</div>
@import 'nib'

// ------------------------------[   Variables   ]------------------------------

pikachu-width = 600px
pikachu-height = 600px
color-fur = #fcd457
color-cheek = #e15b42
color-mouth = #84342e
color-tongue = #ea7b7c
top-padding = 50%

// ------------------------------[     Styles    ]------------------------------

.stunt-pikachu
    width pikachu-width
    height pikachu-height
    background color-fur
    position relative
    margin auto

    .face
        position absolute
        left 0
        width 100%
        height 100%
        z-index 2
        top 20%
        animation face .5s 1s forwards

    .eye
        position absolute
        left 20%
        top 0%
        width 15%
        padding-bottom @width
        border-radius 100%
        background #000
        animation eye forwards .4s
        opacity 0

        &:after
            content ''
            position absolute
            right 15%
            top @right
            width 45%
            padding-bottom @width
            border-radius 100%
            background #fff
            animation eye forwards .3s .1s
            opacity 0

    .ear
        position absolute
        left -6%
        top 6%
        width 30%
        height @width
        background black
        border-radius 0 100% 0 100%
        transform rotate(15deg) scale(.8, 1.2)
        opacity 0
        animation ear .5s 1s forwards

        &:after
            content ''
            position absolute
            background color-fur
            width 100%
            padding-bottom @width
            border-radius 100%
            left 50%
            top 30%

    .nose
        position absolute
        left 50%
        top 12%
        width 5%
        height @width
        background #000
        margin-left -(@width / 2)
        border-radius 70% 70% 100% 100%
        transform scale(1.3, .9)
        animation nose .5s .3s forwards
        transform scale(0)

    .cheek
        position absolute
        top 14%
        left 10%
        width 8%
        height 23%
        border-radius 100%
        background color-cheek
        transform rotate(-10deg)

    .mouth
        position absolute
        left 50%
        top 3%
        width 23%
        height 40%
        margin-left -(@width / 2)
        background color-mouth
        border-radius 100%
        animation mouth .5s .7s forwards
        opacity 0

        &:before, &:after
            content ''
            background color-fur
            position absolute
            top -10%
            width 100%
            padding-bottom 100%
            border-radius 100%

        &:before
            left -35%

        &:after
            right -35%

        .tongue
            position absolute
            width 100%
            height 100%
            left 0
            top 0
            overflow hidden
            border-radius 100%

            &:after
                content ''
                position absolute
                width 90%
                padding-bottom @width * .7
                border-radius 100%
                left 50%
                top 65%
                margin-left -(@width / 2)
                background #ea7b7c
                display block
                box-shadow rgba(#ea7b7c, .4) 0 0 0 10px

    .side.right
        position absolute
        width 100%
        height 100%
        left 0
        top 0
        transform scaleX(-1)

        .eye
            animation eye forwards .4s .2s

            &:after
                left 15%
                right auto
                animation eye forwards .2s .3s

// ------------------------------[   Animations  ]------------------------------

@keyframes face {

    from {
        transform translate3d(0, 0, 0)
    }

    to {
        transform translate3d(0, 35%, 0)
    }

}

@keyframes eye {

    0% {
        opacity 0
        transform translate3d(0, -300%, 0)
    }

    20% {
        opacity 1
    }

    75% {
        transform translate3d(0, 50%, 0)
    }

    100% {
        opacity 1
        transform translate3d(0, 0, 0)
    }

}

@keyframes nose {

    0% {
        transform scale(0)
    }

    50% {
        transform scale(5)
    }

    100% {
        transform scale(1)
    }

}

@keyframes ear {

    0% {
        transform translate3d(0, 20%, 0) rotate(40deg) scale(.4, 1.2)
        opacity 0
    }

    100% {
        transform translate3d(0, 0, 0) rotate(15deg) scale(.8, 1.2)
        opacity 1
    }

}

@keyframes mouth {

    from {
        transform translate3d(0, 10%, 0)
        opacity 0
    }

    to {
        transform translate3d(0, 0, 0)
        opacity 1
    }

}
.stunt-pikachu {
  width: 600px;
  height: 600px;
  background: #fcd457;
  position: relative;
  margin: auto;
}
.stunt-pikachu .face {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 20%;
  -webkit-animation: face 0.5s 1s forwards;
  -moz-animation: face 0.5s 1s forwards;
  -o-animation: face 0.5s 1s forwards;
  -ms-animation: face 0.5s 1s forwards;
  animation: face 0.5s 1s forwards;
}
.stunt-pikachu .eye {
  position: absolute;
  left: 20%;
  top: 0%;
  width: 15%;
  padding-bottom: 15%;
  border-radius: 100%;
  background: #000;
  -webkit-animation: eye forwards 0.4s;
  -moz-animation: eye forwards 0.4s;
  -o-animation: eye forwards 0.4s;
  -ms-animation: eye forwards 0.4s;
  animation: eye forwards 0.4s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.stunt-pikachu .eye:after {
  content: '';
  position: absolute;
  right: 15%;
  top: 15%;
  width: 45%;
  padding-bottom: 45%;
  border-radius: 100%;
  background: #fff;
  -webkit-animation: eye forwards 0.3s 0.1s;
  -moz-animation: eye forwards 0.3s 0.1s;
  -o-animation: eye forwards 0.3s 0.1s;
  -ms-animation: eye forwards 0.3s 0.1s;
  animation: eye forwards 0.3s 0.1s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.stunt-pikachu .ear {
  position: absolute;
  left: -6%;
  top: 6%;
  width: 30%;
  height: 30%;
  background: #000;
  border-radius: 0 100% 0 100%;
  -webkit-transform: rotate(15deg) scale(0.8, 1.2);
  -moz-transform: rotate(15deg) scale(0.8, 1.2);
  -o-transform: rotate(15deg) scale(0.8, 1.2);
  -ms-transform: rotate(15deg) scale(0.8, 1.2);
  transform: rotate(15deg) scale(0.8, 1.2);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: ear 0.5s 1s forwards;
  -moz-animation: ear 0.5s 1s forwards;
  -o-animation: ear 0.5s 1s forwards;
  -ms-animation: ear 0.5s 1s forwards;
  animation: ear 0.5s 1s forwards;
}
.stunt-pikachu .ear:after {
  content: '';
  position: absolute;
  background: #fcd457;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 100%;
  left: 50%;
  top: 30%;
}
.stunt-pikachu .nose {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 5%;
  height: 5%;
  background: #000;
  margin-left: -2.5%;
  border-radius: 70% 70% 100% 100%;
  -webkit-transform: scale(1.3, 0.9);
  -moz-transform: scale(1.3, 0.9);
  -o-transform: scale(1.3, 0.9);
  -ms-transform: scale(1.3, 0.9);
  transform: scale(1.3, 0.9);
  -webkit-animation: nose 0.5s 0.3s forwards;
  -moz-animation: nose 0.5s 0.3s forwards;
  -o-animation: nose 0.5s 0.3s forwards;
  -ms-animation: nose 0.5s 0.3s forwards;
  animation: nose 0.5s 0.3s forwards;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.stunt-pikachu .cheek {
  position: absolute;
  top: 14%;
  left: 10%;
  width: 8%;
  height: 23%;
  border-radius: 100%;
  background: #e15b42;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.stunt-pikachu .mouth {
  position: absolute;
  left: 50%;
  top: 3%;
  width: 23%;
  height: 40%;
  margin-left: -11.5%;
  background: #84342e;
  border-radius: 100%;
  -webkit-animation: mouth 0.5s 0.7s forwards;
  -moz-animation: mouth 0.5s 0.7s forwards;
  -o-animation: mouth 0.5s 0.7s forwards;
  -ms-animation: mouth 0.5s 0.7s forwards;
  animation: mouth 0.5s 0.7s forwards;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.stunt-pikachu .mouth:before,
.stunt-pikachu .mouth:after {
  content: '';
  background: #fcd457;
  position: absolute;
  top: -10%;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 100%;
}
.stunt-pikachu .mouth:before {
  left: -35%;
}
.stunt-pikachu .mouth:after {
  right: -35%;
}
.stunt-pikachu .mouth .tongue {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 100%;
}
.stunt-pikachu .mouth .tongue:after {
  content: '';
  position: absolute;
  width: 90%;
  padding-bottom: 62.99999999999999%;
  border-radius: 100%;
  left: 50%;
  top: 65%;
  margin-left: -45%;
  background: #ea7b7c;
  display: block;
  -webkit-box-shadow: rgba(234,123,124,0.4) 0 0 0 10px;
  box-shadow: rgba(234,123,124,0.4) 0 0 0 10px;
}
.stunt-pikachu .side.right {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}
.stunt-pikachu .side.right .eye {
  -webkit-animation: eye forwards 0.4s 0.2s;
  -moz-animation: eye forwards 0.4s 0.2s;
  -o-animation: eye forwards 0.4s 0.2s;
  -ms-animation: eye forwards 0.4s 0.2s;
  animation: eye forwards 0.4s 0.2s;
}
.stunt-pikachu .side.right .eye:after {
  left: 15%;
  right: auto;
  -webkit-animation: eye forwards 0.2s 0.3s;
  -moz-animation: eye forwards 0.2s 0.3s;
  -o-animation: eye forwards 0.2s 0.3s;
  -ms-animation: eye forwards 0.2s 0.3s;
  animation: eye forwards 0.2s 0.3s;
}
@-moz-keyframes face {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 35%, 0);
    -moz-transform: translate3d(0, 35%, 0);
    -o-transform: translate3d(0, 35%, 0);
    -ms-transform: translate3d(0, 35%, 0);
    transform: translate3d(0, 35%, 0);
  }
}
@-webkit-keyframes face {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 35%, 0);
    -moz-transform: translate3d(0, 35%, 0);
    -o-transform: translate3d(0, 35%, 0);
    -ms-transform: translate3d(0, 35%, 0);
    transform: translate3d(0, 35%, 0);
  }
}
@-o-keyframes face {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 35%, 0);
    -moz-transform: translate3d(0, 35%, 0);
    -o-transform: translate3d(0, 35%, 0);
    -ms-transform: translate3d(0, 35%, 0);
    transform: translate3d(0, 35%, 0);
  }
}
@keyframes face {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 35%, 0);
    -moz-transform: translate3d(0, 35%, 0);
    -o-transform: translate3d(0, 35%, 0);
    -ms-transform: translate3d(0, 35%, 0);
    transform: translate3d(0, 35%, 0);
  }
}
@-moz-keyframes eye {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(0, -300%, 0);
    -moz-transform: translate3d(0, -300%, 0);
    -o-transform: translate3d(0, -300%, 0);
    -ms-transform: translate3d(0, -300%, 0);
    transform: translate3d(0, -300%, 0);
  }
  20% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  75% {
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    -ms-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes eye {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(0, -300%, 0);
    -moz-transform: translate3d(0, -300%, 0);
    -o-transform: translate3d(0, -300%, 0);
    -ms-transform: translate3d(0, -300%, 0);
    transform: translate3d(0, -300%, 0);
  }
  20% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  75% {
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    -ms-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-o-keyframes eye {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(0, -300%, 0);
    -moz-transform: translate3d(0, -300%, 0);
    -o-transform: translate3d(0, -300%, 0);
    -ms-transform: translate3d(0, -300%, 0);
    transform: translate3d(0, -300%, 0);
  }
  20% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  75% {
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    -ms-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes eye {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(0, -300%, 0);
    -moz-transform: translate3d(0, -300%, 0);
    -o-transform: translate3d(0, -300%, 0);
    -ms-transform: translate3d(0, -300%, 0);
    transform: translate3d(0, -300%, 0);
  }
  20% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  75% {
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    -ms-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes nose {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(5);
    -moz-transform: scale(5);
    -o-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes nose {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(5);
    -moz-transform: scale(5);
    -o-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes nose {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(5);
    -moz-transform: scale(5);
    -o-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes nose {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(5);
    -moz-transform: scale(5);
    -o-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes ear {
  0% {
    -webkit-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -moz-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -o-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -ms-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -moz-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -o-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -ms-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes ear {
  0% {
    -webkit-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -moz-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -o-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -ms-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -moz-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -o-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -ms-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes ear {
  0% {
    -webkit-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -moz-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -o-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -ms-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -moz-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -o-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -ms-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes ear {
  0% {
    -webkit-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -moz-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -o-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    -ms-transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    transform: translate3d(0, 20%, 0) rotate(40deg) scale(0.4, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -moz-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -o-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    -ms-transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    transform: translate3d(0, 0, 0) rotate(15deg) scale(0.8, 1.2);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes mouth {
  from {
    -webkit-transform: translate3d(0, 10%, 0);
    -moz-transform: translate3d(0, 10%, 0);
    -o-transform: translate3d(0, 10%, 0);
    -ms-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes mouth {
  from {
    -webkit-transform: translate3d(0, 10%, 0);
    -moz-transform: translate3d(0, 10%, 0);
    -o-transform: translate3d(0, 10%, 0);
    -ms-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes mouth {
  from {
    -webkit-transform: translate3d(0, 10%, 0);
    -moz-transform: translate3d(0, 10%, 0);
    -o-transform: translate3d(0, 10%, 0);
    -ms-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes mouth {
  from {
    -webkit-transform: translate3d(0, 10%, 0);
    -moz-transform: translate3d(0, 10%, 0);
    -o-transform: translate3d(0, 10%, 0);
    -ms-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
Posted the 15/07/2016
Browse more

StuntsStunt #9 Playing Cards

  • HTML
  • Stylus (Source)
  • CSS (Output)

<div class="stunt-cards">
  <div class="cards-row">
    <div class="card card-ace card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-2 card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-3 card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-4 card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-5 card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-6 card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-7 card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-8 card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-9 card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-10 card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-j card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-q card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-k card-diamonds">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
  </div>
  <div class="cards-row">
    <div class="card card-ace card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-2 card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-3 card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-4 card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-5 card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-6 card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-7 card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-8 card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-9 card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-10 card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-j card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-q card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-k card-clubs">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
  </div>
  <div class="cards-row">
    <div class="card card-ace card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-2 card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-3 card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-4 card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-5 card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-6 card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-7 card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-8 card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-9 card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-10 card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-j card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-q card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-k card-hearts">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
  </div>
  <div class="cards-row">
    <div class="card card-ace card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-2 card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-3 card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-4 card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-5 card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-6 card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-7 card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-8 card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-9 card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-10 card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-j card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-q card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <div class="card card-k card-spades">
      <div class="icon top-left"></div>
      <div class="icon bottom-right"></div>
      <div class="seeds"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
  </div>
</div>
@import 'nib'

// ------------------------------[   Variables   ]------------------------------

card-width = 100px
card-height = 140px
card-color-black = #333
card-color-red = #fd3b15
card-color-bg = #fff

// ------------------------------[     Mixins    ]------------------------------

show-seeds(amt)
    sel = ''

    for i in (0..amt)
        .seeds span:nth-child({i})
            display block

absolute-center(center-x = true, center-y = true)

    if center-x and !center-y
        transform translateX(-50%)

    if center-x
        left 50%

    if center-y
        top 50%

    if center-y and !center-x
        transform translateY(-50%)

    if center-x and center-y
        transform translate(-50%, -50%)

// ------------------------------[     Styles    ]------------------------------

.stunt-cards
    text-align center
    padding-top 20px
    animation fade-out .3s 6.3s forwards

    for y in (1..4)
        .cards-row:nth-child({y})

            for x in (1..13)

                .card:nth-child({x})
                    if (x % 2 == 0)
                        animation card-serve .2s (.1s * (y - 1) * 13 + .1s * (x - 1)) forwards, card-consolidate-even .4s 6s forwards
                    else
                        animation card-serve .2s (.1s * (y - 1) * 13 + .1s * (x - 1)) forwards, card-consolidate .4s 6s forwards

    .cards-row
        margin-top -(card-height - card-height / 3.5)
        animation card-consolidate-row .4s 6.3s forwards

        &:nth-child(even)
            margin-left (card-width / 10)
            animation card-consolidate-row-even .4s 6.3s forwards

        &:first-child
            margin-top 0
            animation none

    .card
        border-radius 3px
        width card-width
        height card-height
        border 1px solid #eee   
        box-shadow rgba(0, 0, 0, .06) 0 2px 3px
        position relative
        display inline-block
        font-smoothing antialiased
        -moz-osx-font-smoothing grayscale
        background card-color-bg
        margin-left -(card-width - card-width / 5.6)
        opacity 0
        box-sizing border-box

        &:nth-child(even)
            top 5px

        .icon
            font-size 18px
            font-family "Trebuchet MS", Helvetica, sans-serif
            text-align center
            line-height .9

            &:after
                display block
                font-size @font-size + 8px

        .icon.top-left, .icon.bottom-right
            position absolute

        .icon.top-left
            left 5%
            top 5%

        .icon.bottom-right
            right 5%
            bottom 5%
            transform scaleX(-1) scaleY(-1)

        &.card-spades, &.card-clubs
            color card-color-black

        &.card-hearts, &.card-diamonds
            color card-color-red

        &.card-spades

            .icon:after, .seeds span:after
                content '\2660'

        &.card-clubs

            .icon:after, .seeds span:after
                content '\2663'

        &.card-hearts

            .icon:after, .seeds span:after
                content '\2665'

        &.card-diamonds

            .icon:after, .seeds span:after
                content '\2666'

    .seeds
        width 38%
        height 70%
        position absolute
        left 50%
        top 50%
        absolute-center()
        text-align center
        font-size 25px
        // border 1px solid #eee

        span
            display none
            position absolute

    .card-ace
        show-seeds(1)

        .icon:before
            content 'A'

    .card-2
        show-seeds(2)

        .icon:before
            content '2'

    .card-3
        show-seeds(3)

        .icon:before
            content '3'

    .card-4
        show-seeds(4)

        .icon:before
            content '4'

    .card-5
        show-seeds(5)

        .icon:before
            content '5'

    .card-6
        show-seeds(6)

        .icon:before
            content '6'

    .card-7
        show-seeds(7)

        .icon:before
            content '7'

    .card-8
        show-seeds(8)

        .icon:before
            content '8'

    .card-9
        show-seeds(9)

        .icon:before
            content '9'

    .card-10
        show-seeds(10)

        .icon:before
            content '10'

    .card-j
        show-seeds(1)

        .icon:before
            content 'J'

    .card-q
        show-seeds(1)

        .icon:before
            content 'Q'

    .card-k
        show-seeds(1)

        .icon:before
            content 'K'

    .card

        .seeds span

            &:nth-child(0), &:nth-child(1)
                top 0

            &:nth-child(2), &:nth-child(3)
                bottom 0

            &:nth-child(0), &:nth-child(2)
                left 0

            &:nth-child(1), &:nth-child(3)
                right 0

    .card.card-ace .seeds span
        left 50%
        top 50%
        transform translate(-50%, -50%) scale(2.3)

    .card.card-2, .card.card-3

        .seeds span
            absolute-center(true, false)

            &:nth-child(0)
                top 0

            &:nth-child(1)
                bottom 0

    .card.card-3 .seeds span:nth-child(2)
        absolute-center()
        bottom auto

    .card-5 .seeds span

        &:nth-child(4)
            absolute-center()

    .card-6, .card-7, .card-8

        .seeds span

            &:nth-child(4)
                left 0

            &:nth-child(5)
                right 0

            &:nth-child(4), &:nth-child(5)
                absolute-center(false, true)

    .card-7, .card-8

        .seeds span:nth-child(6)
            left 50%
            top 32%
            transform translate(-50%, -50%)

    .card-7 .seeds span

        &:nth-child(6)
            left 50%
            top 32%
            transform translate(-50%, -50%)

    .card-8 .seeds span

        &:nth-child(7)
            left 50%
            top 68%
            transform translate(-50%, -50%)

    .card-9, .card-10
    
        .seeds span
    
            &:nth-child(4), &:nth-child(6)
                left 0

            &:nth-child(5), &:nth-child(7)
                right 0

            &:nth-child(4), &:nth-child(5)
                transform translateY(-50%)
                top 36%

            &:nth-child(6), &:nth-child(7)
                transform translateY(-50%)
                top 63%

    .card-9 .seeds span

        &:nth-child(8)
            absolute-center()

    .card-10 .seeds span

        &:nth-child(8), &:nth-child(9)
            transform translate(-50%, -50%)
            left 50%

        &:nth-child(8)
            top 25%
        
        &:nth-child(9)
            top 75%

    .card.card-j, .card.card-q, .card.card-k

        .seeds span:first-child
            display block
            left 50%
            top 45%
            transform translate(-50%, -50%) scale(2.3)

    .card.card-j .seeds span:after
        content '\265D'

    .card.card-q .seeds span:after
        content '\265B'

    .card.card-k .seeds span:after
        content '\265A'

// ------------------------------[   Animations  ]------------------------------

@keyframes card-serve {

    from {
        transform rotate(-10deg) translate3d(-100px, -30px, 0)
        opacity 0
    }

    to {
        transform rotate(-3deg) translate3d(0, 0, 0)
        opacity 1
    }

}

@keyframes card-consolidate-even {

    from {
        transform rotate(-3deg) translate3d(0, 0, 0)
        margin-left -(card-width - card-width / 5.6)
        top 5px
    }

    to {
        transform rotate(0) translate3d(0, 0, 0)
        margin-left -(card-width -1px)
        top 0
    }

}

@keyframes card-consolidate {

    from {
        transform rotate(-3deg) translate3d(0, 0, 0)
        margin-left -(card-width - card-width / 5.6)
    }

    to {
        transform rotate(0) translate3d(0, 0, 0)
        margin-left -(card-width -1px)
    }

}

@keyframes card-consolidate-row {

    from {
        margin-top -(card-height - card-height / 3.5)
    }

    to {
        margin-top -(card-height)
    }

}

@keyframes card-consolidate-row-even {

    from {
        margin-left (card-width / 10)
        margin-top -(card-height - card-height / 3.5)
    }

    to {
        margin-top -(card-height)
        margin-left 0
    }

}

@keyframes fade-out {

    from {
        opacity 1
    }

    to {
        opacity 0
    }

}
.stunt-cards {
  text-align: center;
  padding-top: 20px;
  -webkit-animation: fade-out 0.3s 6.3s forwards;
  -moz-animation: fade-out 0.3s 6.3s forwards;
  -o-animation: fade-out 0.3s 6.3s forwards;
  -ms-animation: fade-out 0.3s 6.3s forwards;
  animation: fade-out 0.3s 6.3s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(1) {
  -webkit-animation: card-serve 0.2s 0s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 0s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(2) {
  -webkit-animation: card-serve 0.2s 0.1s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0.1s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0.1s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0.1s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 0.1s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(3) {
  -webkit-animation: card-serve 0.2s 0.2s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0.2s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0.2s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0.2s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 0.2s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(4) {
  -webkit-animation: card-serve 0.2s 0.3s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0.3s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0.3s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0.3s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 0.3s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(5) {
  -webkit-animation: card-serve 0.2s 0.4s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0.4s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0.4s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0.4s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 0.4s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(6) {
  -webkit-animation: card-serve 0.2s 0.5s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0.5s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0.5s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0.5s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 0.5s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(7) {
  -webkit-animation: card-serve 0.2s 0.6s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0.6s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0.6s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0.6s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 0.6s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(8) {
  -webkit-animation: card-serve 0.2s 0.7s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0.7s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0.7s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0.7s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 0.7s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(9) {
  -webkit-animation: card-serve 0.2s 0.8s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0.8s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0.8s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0.8s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 0.8s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(10) {
  -webkit-animation: card-serve 0.2s 0.9s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 0.9s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 0.9s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 0.9s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 0.9s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(11) {
  -webkit-animation: card-serve 0.2s 1s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 1s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(12) {
  -webkit-animation: card-serve 0.2s 1.1s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1.1s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1.1s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1.1s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 1.1s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(1) .card:nth-child(13) {
  -webkit-animation: card-serve 0.2s 1.2s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1.2s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1.2s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1.2s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 1.2s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(1) {
  -webkit-animation: card-serve 0.2s 1.3s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1.3s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1.3s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1.3s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 1.3s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(2) {
  -webkit-animation: card-serve 0.2s 1.4s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1.4s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1.4s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1.4s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 1.4s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(3) {
  -webkit-animation: card-serve 0.2s 1.5s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1.5s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1.5s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1.5s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 1.5s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(4) {
  -webkit-animation: card-serve 0.2s 1.6s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1.6s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1.6s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1.6s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 1.6s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(5) {
  -webkit-animation: card-serve 0.2s 1.7s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1.7s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1.7s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1.7s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 1.7s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(6) {
  -webkit-animation: card-serve 0.2s 1.8s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1.8s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1.8s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1.8s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 1.8s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(7) {
  -webkit-animation: card-serve 0.2s 1.9s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 1.9s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 1.9s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 1.9s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 1.9s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(8) {
  -webkit-animation: card-serve 0.2s 2s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 2s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(9) {
  -webkit-animation: card-serve 0.2s 2.1s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2.1s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2.1s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2.1s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 2.1s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(10) {
  -webkit-animation: card-serve 0.2s 2.2s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2.2s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2.2s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2.2s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 2.2s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(11) {
  -webkit-animation: card-serve 0.2s 2.3s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2.3s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2.3s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2.3s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 2.3s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(12) {
  -webkit-animation: card-serve 0.2s 2.4s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2.4s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2.4s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2.4s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 2.4s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(2) .card:nth-child(13) {
  -webkit-animation: card-serve 0.2s 2.5s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2.5s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2.5s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2.5s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 2.5s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(1) {
  -webkit-animation: card-serve 0.2s 2.6s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2.6s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2.6s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2.6s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 2.6s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(2) {
  -webkit-animation: card-serve 0.2s 2.7s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2.7s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2.7s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2.7s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 2.7s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(3) {
  -webkit-animation: card-serve 0.2s 2.8s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2.8s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2.8s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2.8s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 2.8s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(4) {
  -webkit-animation: card-serve 0.2s 2.9s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 2.9s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 2.9s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 2.9s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 2.9s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(5) {
  -webkit-animation: card-serve 0.2s 3s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 3s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(6) {
  -webkit-animation: card-serve 0.2s 3.1s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3.1s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3.1s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3.1s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 3.1s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(7) {
  -webkit-animation: card-serve 0.2s 3.2s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3.2s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3.2s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3.2s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 3.2s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(8) {
  -webkit-animation: card-serve 0.2s 3.3s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3.3s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3.3s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3.3s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 3.3s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(9) {
  -webkit-animation: card-serve 0.2s 3.4s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3.4s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3.4s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3.4s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 3.4s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(10) {
  -webkit-animation: card-serve 0.2s 3.5s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3.5s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3.5s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3.5s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 3.5s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(11) {
  -webkit-animation: card-serve 0.2s 3.6s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3.6s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3.6s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3.6s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 3.6s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(12) {
  -webkit-animation: card-serve 0.2s 3.7s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3.7s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3.7s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3.7s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 3.7s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(3) .card:nth-child(13) {
  -webkit-animation: card-serve 0.2s 3.8s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3.8s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3.8s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3.8s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 3.8s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(1) {
  -webkit-animation: card-serve 0.2s 3.9s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 3.9s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 3.9s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 3.9s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 3.9s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(2) {
  -webkit-animation: card-serve 0.2s 4s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 4s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(3) {
  -webkit-animation: card-serve 0.2s 4.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 4.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(4) {
  -webkit-animation: card-serve 0.2s 4.2s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4.2s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4.2s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4.2s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 4.2s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(5) {
  -webkit-animation: card-serve 0.2s 4.300000000000001s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4.300000000000001s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4.300000000000001s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4.300000000000001s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 4.300000000000001s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(6) {
  -webkit-animation: card-serve 0.2s 4.4s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4.4s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4.4s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4.4s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 4.4s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(7) {
  -webkit-animation: card-serve 0.2s 4.5s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4.5s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4.5s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4.5s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 4.5s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(8) {
  -webkit-animation: card-serve 0.2s 4.600000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4.600000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4.600000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4.600000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 4.600000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(9) {
  -webkit-animation: card-serve 0.2s 4.7s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4.7s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4.7s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4.7s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 4.7s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(10) {
  -webkit-animation: card-serve 0.2s 4.800000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4.800000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4.800000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4.800000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 4.800000000000001s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(11) {
  -webkit-animation: card-serve 0.2s 4.9s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 4.9s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 4.9s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 4.9s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 4.9s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(12) {
  -webkit-animation: card-serve 0.2s 5s forwards, card-consolidate-even 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 5s forwards, card-consolidate-even 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 5s forwards, card-consolidate-even 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 5s forwards, card-consolidate-even 0.4s 6s forwards;
  animation: card-serve 0.2s 5s forwards, card-consolidate-even 0.4s 6s forwards;
}
.stunt-cards .cards-row:nth-child(4) .card:nth-child(13) {
  -webkit-animation: card-serve 0.2s 5.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
  -moz-animation: card-serve 0.2s 5.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
  -o-animation: card-serve 0.2s 5.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
  -ms-animation: card-serve 0.2s 5.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
  animation: card-serve 0.2s 5.100000000000001s forwards, card-consolidate 0.4s 6s forwards;
}
.stunt-cards .cards-row {
  margin-top: -100px;
  -webkit-animation: card-consolidate-row 0.4s 6.3s forwards;
  -moz-animation: card-consolidate-row 0.4s 6.3s forwards;
  -o-animation: card-consolidate-row 0.4s 6.3s forwards;
  -ms-animation: card-consolidate-row 0.4s 6.3s forwards;
  animation: card-consolidate-row 0.4s 6.3s forwards;
}
.stunt-cards .cards-row:nth-child(even) {
  margin-left: 10px;
  -webkit-animation: card-consolidate-row-even 0.4s 6.3s forwards;
  -moz-animation: card-consolidate-row-even 0.4s 6.3s forwards;
  -o-animation: card-consolidate-row-even 0.4s 6.3s forwards;
  -ms-animation: card-consolidate-row-even 0.4s 6.3s forwards;
  animation: card-consolidate-row-even 0.4s 6.3s forwards;
}
.stunt-cards .cards-row:first-child {
  margin-top: 0;
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  -ms-animation: none;
  animation: none;
}
.stunt-cards .card {
  border-radius: 3px;
  width: 100px;
  height: 140px;
  border: 1px solid #eee;
  -webkit-box-shadow: rgba(0,0,0,0.06) 0 2px 3px;
  box-shadow: rgba(0,0,0,0.06) 0 2px 3px;
  position: relative;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
  margin-left: -82.14285714285714px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.stunt-cards .card:nth-child(even) {
  top: 5px;
}
.stunt-cards .card .icon {
  font-size: 18px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  text-align: center;
  line-height: 0.9;
}
.stunt-cards .card .icon:after {
  display: block;
  font-size: 26px;
}
.stunt-cards .card .icon.top-left,
.stunt-cards .card .icon.bottom-right {
  position: absolute;
}
.stunt-cards .card .icon.top-left {
  left: 5%;
  top: 5%;
}
.stunt-cards .card .icon.bottom-right {
  right: 5%;
  bottom: 5%;
  -webkit-transform: scaleX(-1) scaleY(-1);
  -moz-transform: scaleX(-1) scaleY(-1);
  -o-transform: scaleX(-1) scaleY(-1);
  -ms-transform: scaleX(-1) scaleY(-1);
  transform: scaleX(-1) scaleY(-1);
}
.stunt-cards .card.card-spades,
.stunt-cards .card.card-clubs {
  color: #333;
}
.stunt-cards .card.card-hearts,
.stunt-cards .card.card-diamonds {
  color: #fd3b15;
}
.stunt-cards .card.card-spades .icon:after,
.stunt-cards .card.card-spades .seeds span:after {
  content: '\2660';
}
.stunt-cards .card.card-clubs .icon:after,
.stunt-cards .card.card-clubs .seeds span:after {
  content: '\2663';
}
.stunt-cards .card.card-hearts .icon:after,
.stunt-cards .card.card-hearts .seeds span:after {
  content: '\2665';
}
.stunt-cards .card.card-diamonds .icon:after,
.stunt-cards .card.card-diamonds .seeds span:after {
  content: '\2666';
}
.stunt-cards .seeds {
  width: 38%;
  height: 70%;
  position: absolute;
  left: 50%;
  top: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 25px;
}
.stunt-cards .seeds span {
  display: none;
  position: absolute;
}
.stunt-cards .card-ace .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-ace .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-ace .icon:before {
  content: 'A';
}
.stunt-cards .card-2 .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-2 .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-2 .seeds span:nth-child(2) {
  display: block;
}
.stunt-cards .card-2 .icon:before {
  content: '2';
}
.stunt-cards .card-3 .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-3 .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-3 .seeds span:nth-child(2) {
  display: block;
}
.stunt-cards .card-3 .seeds span:nth-child(3) {
  display: block;
}
.stunt-cards .card-3 .icon:before {
  content: '3';
}
.stunt-cards .card-4 .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-4 .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-4 .seeds span:nth-child(2) {
  display: block;
}
.stunt-cards .card-4 .seeds span:nth-child(3) {
  display: block;
}
.stunt-cards .card-4 .seeds span:nth-child(4) {
  display: block;
}
.stunt-cards .card-4 .icon:before {
  content: '4';
}
.stunt-cards .card-5 .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-5 .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-5 .seeds span:nth-child(2) {
  display: block;
}
.stunt-cards .card-5 .seeds span:nth-child(3) {
  display: block;
}
.stunt-cards .card-5 .seeds span:nth-child(4) {
  display: block;
}
.stunt-cards .card-5 .seeds span:nth-child(5) {
  display: block;
}
.stunt-cards .card-5 .icon:before {
  content: '5';
}
.stunt-cards .card-6 .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-6 .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-6 .seeds span:nth-child(2) {
  display: block;
}
.stunt-cards .card-6 .seeds span:nth-child(3) {
  display: block;
}
.stunt-cards .card-6 .seeds span:nth-child(4) {
  display: block;
}
.stunt-cards .card-6 .seeds span:nth-child(5) {
  display: block;
}
.stunt-cards .card-6 .seeds span:nth-child(6) {
  display: block;
}
.stunt-cards .card-6 .icon:before {
  content: '6';
}
.stunt-cards .card-7 .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-7 .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-7 .seeds span:nth-child(2) {
  display: block;
}
.stunt-cards .card-7 .seeds span:nth-child(3) {
  display: block;
}
.stunt-cards .card-7 .seeds span:nth-child(4) {
  display: block;
}
.stunt-cards .card-7 .seeds span:nth-child(5) {
  display: block;
}
.stunt-cards .card-7 .seeds span:nth-child(6) {
  display: block;
}
.stunt-cards .card-7 .seeds span:nth-child(7) {
  display: block;
}
.stunt-cards .card-7 .icon:before {
  content: '7';
}
.stunt-cards .card-8 .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-8 .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-8 .seeds span:nth-child(2) {
  display: block;
}
.stunt-cards .card-8 .seeds span:nth-child(3) {
  display: block;
}
.stunt-cards .card-8 .seeds span:nth-child(4) {
  display: block;
}
.stunt-cards .card-8 .seeds span:nth-child(5) {
  display: block;
}
.stunt-cards .card-8 .seeds span:nth-child(6) {
  display: block;
}
.stunt-cards .card-8 .seeds span:nth-child(7) {
  display: block;
}
.stunt-cards .card-8 .seeds span:nth-child(8) {
  display: block;
}
.stunt-cards .card-8 .icon:before {
  content: '8';
}
.stunt-cards .card-9 .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-9 .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-9 .seeds span:nth-child(2) {
  display: block;
}
.stunt-cards .card-9 .seeds span:nth-child(3) {
  display: block;
}
.stunt-cards .card-9 .seeds span:nth-child(4) {
  display: block;
}
.stunt-cards .card-9 .seeds span:nth-child(5) {
  display: block;
}
.stunt-cards .card-9 .seeds span:nth-child(6) {
  display: block;
}
.stunt-cards .card-9 .seeds span:nth-child(7) {
  display: block;
}
.stunt-cards .card-9 .seeds span:nth-child(8) {
  display: block;
}
.stunt-cards .card-9 .seeds span:nth-child(9) {
  display: block;
}
.stunt-cards .card-9 .icon:before {
  content: '9';
}
.stunt-cards .card-10 .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(2) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(3) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(4) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(5) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(6) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(7) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(8) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(9) {
  display: block;
}
.stunt-cards .card-10 .seeds span:nth-child(10) {
  display: block;
}
.stunt-cards .card-10 .icon:before {
  content: '10';
}
.stunt-cards .card-j .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-j .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-j .icon:before {
  content: 'J';
}
.stunt-cards .card-q .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-q .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-q .icon:before {
  content: 'Q';
}
.stunt-cards .card-k .seeds span:nth-child(0) {
  display: block;
}
.stunt-cards .card-k .seeds span:nth-child(1) {
  display: block;
}
.stunt-cards .card-k .icon:before {
  content: 'K';
}
.stunt-cards .card .seeds span:nth-child(0),
.stunt-cards .card .seeds span:nth-child(1) {
  top: 0;
}
.stunt-cards .card .seeds span:nth-child(2),
.stunt-cards .card .seeds span:nth-child(3) {
  bottom: 0;
}
.stunt-cards .card .seeds span:nth-child(0),
.stunt-cards .card .seeds span:nth-child(2) {
  left: 0;
}
.stunt-cards .card .seeds span:nth-child(1),
.stunt-cards .card .seeds span:nth-child(3) {
  right: 0;
}
.stunt-cards .card.card-ace .seeds span {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(2.3);
  -moz-transform: translate(-50%, -50%) scale(2.3);
  -o-transform: translate(-50%, -50%) scale(2.3);
  -ms-transform: translate(-50%, -50%) scale(2.3);
  transform: translate(-50%, -50%) scale(2.3);
}
.stunt-cards .card.card-2 .seeds span,
.stunt-cards .card.card-3 .seeds span {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  left: 50%;
}
.stunt-cards .card.card-2 .seeds span:nth-child(0),
.stunt-cards .card.card-3 .seeds span:nth-child(0) {
  top: 0;
}
.stunt-cards .card.card-2 .seeds span:nth-child(1),
.stunt-cards .card.card-3 .seeds span:nth-child(1) {
  bottom: 0;
}
.stunt-cards .card.card-3 .seeds span:nth-child(2) {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  bottom: auto;
}
.stunt-cards .card-5 .seeds span:nth-child(4) {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.stunt-cards .card-6 .seeds span:nth-child(4),
.stunt-cards .card-7 .seeds span:nth-child(4),
.stunt-cards .card-8 .seeds span:nth-child(4) {
  left: 0;
}
.stunt-cards .card-6 .seeds span:nth-child(5),
.stunt-cards .card-7 .seeds span:nth-child(5),
.stunt-cards .card-8 .seeds span:nth-child(5) {
  right: 0;
}
.stunt-cards .card-6 .seeds span:nth-child(4),
.stunt-cards .card-7 .seeds span:nth-child(4),
.stunt-cards .card-8 .seeds span:nth-child(4),
.stunt-cards .card-6 .seeds span:nth-child(5),
.stunt-cards .card-7 .seeds span:nth-child(5),
.stunt-cards .card-8 .seeds span:nth-child(5) {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.stunt-cards .card-7 .seeds span:nth-child(6),
.stunt-cards .card-8 .seeds span:nth-child(6) {
  left: 50%;
  top: 32%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.stunt-cards .card-7 .seeds span:nth-child(6) {
  left: 50%;
  top: 32%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.stunt-cards .card-8 .seeds span:nth-child(7) {
  left: 50%;
  top: 68%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.stunt-cards .card-9 .seeds span:nth-child(4),
.stunt-cards .card-10 .seeds span:nth-child(4),
.stunt-cards .card-9 .seeds span:nth-child(6),
.stunt-cards .card-10 .seeds span:nth-child(6) {
  left: 0;
}
.stunt-cards .card-9 .seeds span:nth-child(5),
.stunt-cards .card-10 .seeds span:nth-child(5),
.stunt-cards .card-9 .seeds span:nth-child(7),
.stunt-cards .card-10 .seeds span:nth-child(7) {
  right: 0;
}
.stunt-cards .card-9 .seeds span:nth-child(4),
.stunt-cards .card-10 .seeds span:nth-child(4),
.stunt-cards .card-9 .seeds span:nth-child(5),
.stunt-cards .card-10 .seeds span:nth-child(5) {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 36%;
}
.stunt-cards .card-9 .seeds span:nth-child(6),
.stunt-cards .card-10 .seeds span:nth-child(6),
.stunt-cards .card-9 .seeds span:nth-child(7),
.stunt-cards .card-10 .seeds span:nth-child(7) {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 63%;
}
.stunt-cards .card-9 .seeds span:nth-child(8) {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.stunt-cards .card-10 .seeds span:nth-child(8),
.stunt-cards .card-10 .seeds span:nth-child(9) {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
}
.stunt-cards .card-10 .seeds span:nth-child(8) {
  top: 25%;
}
.stunt-cards .card-10 .seeds span:nth-child(9) {
  top: 75%;
}
.stunt-cards .card.card-j .seeds span:first-child,
.stunt-cards .card.card-q .seeds span:first-child,
.stunt-cards .card.card-k .seeds span:first-child {
  display: block;
  left: 50%;
  top: 45%;
  -webkit-transform: translate(-50%, -50%) scale(2.3);
  -moz-transform: translate(-50%, -50%) scale(2.3);
  -o-transform: translate(-50%, -50%) scale(2.3);
  -ms-transform: translate(-50%, -50%) scale(2.3);
  transform: translate(-50%, -50%) scale(2.3);
}
.stunt-cards .card.card-j .seeds span:after {
  content: '\265D';
}
.stunt-cards .card.card-q .seeds span:after {
  content: '\265B';
}
.stunt-cards .card.card-k .seeds span:after {
  content: '\265A';
}
@-moz-keyframes card-serve {
  from {
    -webkit-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -moz-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -o-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -ms-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes card-serve {
  from {
    -webkit-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -moz-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -o-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -ms-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes card-serve {
  from {
    -webkit-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -moz-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -o-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -ms-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes card-serve {
  from {
    -webkit-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -moz-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -o-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    -ms-transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    transform: rotate(-10deg) translate3d(-100px, -30px, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes card-consolidate-even {
  from {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    margin-left: -82.14285714285714px;
    top: 5px;
  }
  to {
    -webkit-transform: rotate(0) translate3d(0, 0, 0);
    -moz-transform: rotate(0) translate3d(0, 0, 0);
    -o-transform: rotate(0) translate3d(0, 0, 0);
    -ms-transform: rotate(0) translate3d(0, 0, 0);
    transform: rotate(0) translate3d(0, 0, 0);
    margin-left: -100px;
    top: 0;
  }
}
@-webkit-keyframes card-consolidate-even {
  from {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    margin-left: -82.14285714285714px;
    top: 5px;
  }
  to {
    -webkit-transform: rotate(0) translate3d(0, 0, 0);
    -moz-transform: rotate(0) translate3d(0, 0, 0);
    -o-transform: rotate(0) translate3d(0, 0, 0);
    -ms-transform: rotate(0) translate3d(0, 0, 0);
    transform: rotate(0) translate3d(0, 0, 0);
    margin-left: -100px;
    top: 0;
  }
}
@-o-keyframes card-consolidate-even {
  from {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    margin-left: -82.14285714285714px;
    top: 5px;
  }
  to {
    -webkit-transform: rotate(0) translate3d(0, 0, 0);
    -moz-transform: rotate(0) translate3d(0, 0, 0);
    -o-transform: rotate(0) translate3d(0, 0, 0);
    -ms-transform: rotate(0) translate3d(0, 0, 0);
    transform: rotate(0) translate3d(0, 0, 0);
    margin-left: -100px;
    top: 0;
  }
}
@keyframes card-consolidate-even {
  from {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    margin-left: -82.14285714285714px;
    top: 5px;
  }
  to {
    -webkit-transform: rotate(0) translate3d(0, 0, 0);
    -moz-transform: rotate(0) translate3d(0, 0, 0);
    -o-transform: rotate(0) translate3d(0, 0, 0);
    -ms-transform: rotate(0) translate3d(0, 0, 0);
    transform: rotate(0) translate3d(0, 0, 0);
    margin-left: -100px;
    top: 0;
  }
}
@-moz-keyframes card-consolidate {
  from {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    margin-left: -82.14285714285714px;
  }
  to {
    -webkit-transform: rotate(0) translate3d(0, 0, 0);
    -moz-transform: rotate(0) translate3d(0, 0, 0);
    -o-transform: rotate(0) translate3d(0, 0, 0);
    -ms-transform: rotate(0) translate3d(0, 0, 0);
    transform: rotate(0) translate3d(0, 0, 0);
    margin-left: -100px;
  }
}
@-webkit-keyframes card-consolidate {
  from {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    margin-left: -82.14285714285714px;
  }
  to {
    -webkit-transform: rotate(0) translate3d(0, 0, 0);
    -moz-transform: rotate(0) translate3d(0, 0, 0);
    -o-transform: rotate(0) translate3d(0, 0, 0);
    -ms-transform: rotate(0) translate3d(0, 0, 0);
    transform: rotate(0) translate3d(0, 0, 0);
    margin-left: -100px;
  }
}
@-o-keyframes card-consolidate {
  from {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    margin-left: -82.14285714285714px;
  }
  to {
    -webkit-transform: rotate(0) translate3d(0, 0, 0);
    -moz-transform: rotate(0) translate3d(0, 0, 0);
    -o-transform: rotate(0) translate3d(0, 0, 0);
    -ms-transform: rotate(0) translate3d(0, 0, 0);
    transform: rotate(0) translate3d(0, 0, 0);
    margin-left: -100px;
  }
}
@keyframes card-consolidate {
  from {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-3deg) translate3d(0, 0, 0);
    -o-transform: rotate(-3deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-3deg) translate3d(0, 0, 0);
    transform: rotate(-3deg) translate3d(0, 0, 0);
    margin-left: -82.14285714285714px;
  }
  to {
    -webkit-transform: rotate(0) translate3d(0, 0, 0);
    -moz-transform: rotate(0) translate3d(0, 0, 0);
    -o-transform: rotate(0) translate3d(0, 0, 0);
    -ms-transform: rotate(0) translate3d(0, 0, 0);
    transform: rotate(0) translate3d(0, 0, 0);
    margin-left: -100px;
  }
}
@-moz-keyframes card-consolidate-row {
  from {
    margin-top: -100px;
  }
  to {
    margin-top: -140px;
  }
}
@-webkit-keyframes card-consolidate-row {
  from {
    margin-top: -100px;
  }
  to {
    margin-top: -140px;
  }
}
@-o-keyframes card-consolidate-row {
  from {
    margin-top: -100px;
  }
  to {
    margin-top: -140px;
  }
}
@keyframes card-consolidate-row {
  from {
    margin-top: -100px;
  }
  to {
    margin-top: -140px;
  }
}
@-moz-keyframes card-consolidate-row-even {
  from {
    margin-left: 10px;
    margin-top: -100px;
  }
  to {
    margin-top: -140px;
    margin-left: 0;
  }
}
@-webkit-keyframes card-consolidate-row-even {
  from {
    margin-left: 10px;
    margin-top: -100px;
  }
  to {
    margin-top: -140px;
    margin-left: 0;
  }
}
@-o-keyframes card-consolidate-row-even {
  from {
    margin-left: 10px;
    margin-top: -100px;
  }
  to {
    margin-top: -140px;
    margin-left: 0;
  }
}
@keyframes card-consolidate-row-even {
  from {
    margin-left: 10px;
    margin-top: -100px;
  }
  to {
    margin-top: -140px;
    margin-left: 0;
  }
}
@-moz-keyframes fade-out {
  from {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  to {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes fade-out {
  from {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  to {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes fade-out {
  from {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  to {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  to {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
Posted the 01/07/2016
Browse more

StuntsStunt #8 SublimeText logo

  • HTML
  • Stylus (Source)
  • CSS (Output)

<div class="stunt-sublimetext-logo">
  <div class="button-base">
    <div class="button-inner-bevel">
      <div class="button-inner-face">
        <div class="letter-wrap">
          <div class="letter-mask-top">
            <div class="letter"></div>
          </div>
          <div class="letter-mask-bottom">
            <div class="letter"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="button-inner-gap"></div>
  </div>
</div>
@import 'nib'

// ------------------------------[   Variables   ]------------------------------

logo-width = 400px
logo-height = 320px
logo-base-thickness = 10px

// ------------------------------[     Styles    ]------------------------------

.stunt-sublimetext-logo
    width logo-width
    height logo-height
    margin auto
    perspective 450px
    padding 50px 0

    .button-base
        width logo-width - logo-base-thickness
        height 0
        border-radius 30px
        background #ededed
        margin auto
        position relative
        transform-origin center bottom
        transform rotateX(10deg)
        perspective 450px
        animation sublime-button-base 1s .5s forwards

        &:after
            content ''
            width 0
            height logo-base-thickness
            left 50%
            transform translateX(-50%)
            top 100%
            background-image linear-gradient(
                90deg,
                rgba(#000, 0),
                rgba(#000, .3) 10%,
                rgba(#000, .3) 90%,
                rgba(#000, 0)
                )
            display block
            position absolute
            animation sublime-button-base-bevel .2s 1.5s forwards

        .button-inner-gap
            content ''
            background #222
            border-radius 20px
            width 0
            height 0
            position absolute
            left 50%
            top 50%
            transform translate(-50%, -50%)
            animation sublime-button-inner-gap .5s 1.2s forwards

        .button-inner-bevel
            position absolute
            transform rotateX(-10deg)
            z-index 1
            border-radius 0 0 17px 17px
            background-image linear-gradient(
                bottom,
                rgba(#000, .5),
                rgba(#000, 0) 20%,
                rgba(#000, 0)
                ),
                linear-gradient(
                90deg,
                #6a6a6a,
                #323232 10%,
                #323232 90%,
                #6a6a6a
                )
            perspective 450px
            opacity 0
            animation sublime-button-inner-bevel .6s 1.5s forwards

        .button-inner-face
            position absolute
            width 100.8%
            margin-left -.25%
            padding-bottom 10%
            background red
            bottom 100%
            left 0
            border-radius 17px
            transform rotateX(10deg)
            transform-origin center bottom
            margin-bottom -(@border-radius)
            background #5e5e5e
            border-bottom 1.5px solid rgba(#fff, .5)
            box-shadow rgba(#5e5e5e, .4) 0 0 0 2.3px inset
            background-image linear-gradient(
                #b3b3b3,
                #696969 50%,
                #5e5e5e 50.1%,
                #5e5e5e
                )
            animation sublime-button-inner-face .6s 1.5s forwards

        .letter-wrap
            width 100%
            padding-bottom 100%
            position absolute
            left 0
            top 0
            opacity 0
            animation sublime-letter-wrap .5s 2.1s forwards
            transform scale(0)

        .letter-mask-top, .letter-mask-bottom
            width 100%
            height 50%
            overflow hidden
            position absolute
            left 0
            top 0
            animation sublime-letter-glow 1s 2.5s forwards

        .letter-mask-top
            top 0

            .letter
                top 100%
                color #333
                animation sublime-letter-top 1s 2.5s forwards

        .letter-mask-bottom
            top 50%

            .letter
                top 0
                transform translate(-50%, -50%)
                color #222
                animation sublime-letter-bottom 1s 2.5s forwards

        .letter
            position absolute
            left 50%
            top 100%
            transform translate(-50%, -50%)
            font-weight bold
            font-size 300px
            font-family 'Varela Round'

            &:before
                content 's'

@keyframes sublime-button-base {

    0% {
        height 0
        padding-top 0
    }

    50% {
        height logo-height - logo-base-thickness
        padding-top 20px
        box-shadow #c9c9c9 0 0 0 0, rgba(#fff, .2) 0 0 0 2px inset
    }

    100% {
        height logo-height - logo-base-thickness
        padding-top 20px
        box-shadow #c9c9c9 0 logo-base-thickness 0 0, rgba(#fff, .2) 0 0 0 2px inset
    }

}

@keyframes sublime-button-base-bevel {

    from {
        width 0
    }

    to {
        width 80%
    }

}

@keyframes sublime-button-inner-gap {

    from {
        width 0
        height 0
        transform translate3d(-50%, -50%) rotateX(180deg)
    }
    
    to {
        width 90%
        height 85%
        transform translate3d(-50%, -50%) rotateX(0deg)
    }

}

@keyframes sublime-button-inner-bevel {

    0% {
        width 10%
        height 0
        left 45%
        bottom 40%
        opacity 0
    }

    50% {
        opacity 1
        left 5%
        width 90%
    }

    100% {
        width 90%
        left 5%
        bottom 7.6%
        height 15%
        opacity 1
    }

}

// ------------------------------[   Animations  ]------------------------------

@keyframes sublime-button-inner-face {

    0% {
        padding-bottom 100%
    }

    50% {
        padding-bottom 10%
    }

    100% {
        padding-bottom 100%
    }

}

@keyframes sublime-letter-wrap {

    0% {
        transform scale(0)
        opacity 1
    }

    50% {
        transform scale(1.2)
        opacity 1
    }

    100% {
        transform scale(1)
        opacity 1
    }

}

@keyframes sublime-letter-glow {

    0% {
        text-shadow rgba(#fd9827, 0) 0 -2px 0, rgba(#603c0a, 0) 0 -4px 0, rgba(#fedaab, 0) 0 1px 0, rgba(#fd9126, 0) 0 0 0px
    }

    25% {
        text-shadow #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(#fedaab, .9) 0 1px 0, rgba(#fd9126, .8) 0 0 30px
    }

    50% {
        text-shadow rgba(#fd9827, 0) 0 -2px 0, rgba(#603c0a, 0) 0 -4px 0, rgba(#fedaab, 0) 0 1px 0, rgba(#fd9126, .5) 0 0 10px
    }

    100% {
        text-shadow #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(#fedaab, .9) 0 1px 0, #fd9126 0 0 50px
    }

}

@keyframes sublime-letter-bottom {

    0% {
        color #222
    }

    25% {
        color darken(#fd9927, 20%)
    }

    50% {
        color #222
    }

    100% {
        color #fd9927
    }

}

@keyframes sublime-letter-top {

    0% {
        color #333
    }

    25% {
        color darken(#fdaf4e, 20%)
    }

    50% {
        color #333
    }

    100% {
        color #fdaf4e
    }

}
.stunt-sublimetext-logo {
  width: 400px;
  height: 320px;
  margin: auto;
  -webkit-perspective: 450px;
  -moz-perspective: 450px;
  -ms-perspective: 450px;
  perspective: 450px;
  padding: 50px 0;
}
.stunt-sublimetext-logo .button-base {
  width: 390px;
  height: 0;
  border-radius: 30px;
  background: #ededed;
  margin: auto;
  position: relative;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(10deg);
  -moz-transform: rotateX(10deg);
  -o-transform: rotateX(10deg);
  -ms-transform: rotateX(10deg);
  transform: rotateX(10deg);
  -webkit-perspective: 450px;
  -moz-perspective: 450px;
  -ms-perspective: 450px;
  perspective: 450px;
  -webkit-animation: sublime-button-base 1s 0.5s forwards;
  -moz-animation: sublime-button-base 1s 0.5s forwards;
  -o-animation: sublime-button-base 1s 0.5s forwards;
  -ms-animation: sublime-button-base 1s 0.5s forwards;
  animation: sublime-button-base 1s 0.5s forwards;
}
.stunt-sublimetext-logo .button-base:after {
  content: '';
  width: 0;
  height: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 100%;
  background-image: -webkit-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0));
  background-image: -moz-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0));
  background-image: -o-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0));
  background-image: -ms-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0));
  background-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0));
  display: block;
  position: absolute;
  -webkit-animation: sublime-button-base-bevel 0.2s 1.5s forwards;
  -moz-animation: sublime-button-base-bevel 0.2s 1.5s forwards;
  -o-animation: sublime-button-base-bevel 0.2s 1.5s forwards;
  -ms-animation: sublime-button-base-bevel 0.2s 1.5s forwards;
  animation: sublime-button-base-bevel 0.2s 1.5s forwards;
}
.stunt-sublimetext-logo .button-base .button-inner-gap {
  content: '';
  background: #222;
  border-radius: 20px;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: sublime-button-inner-gap 0.5s 1.2s forwards;
  -moz-animation: sublime-button-inner-gap 0.5s 1.2s forwards;
  -o-animation: sublime-button-inner-gap 0.5s 1.2s forwards;
  -ms-animation: sublime-button-inner-gap 0.5s 1.2s forwards;
  animation: sublime-button-inner-gap 0.5s 1.2s forwards;
}
.stunt-sublimetext-logo .button-base .button-inner-bevel {
  position: absolute;
  -webkit-transform: rotateX(-10deg);
  -moz-transform: rotateX(-10deg);
  -o-transform: rotateX(-10deg);
  -ms-transform: rotateX(-10deg);
  transform: rotateX(-10deg);
  z-index: 1;
  border-radius: 0 0 17px 17px;
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0) 20%, rgba(0,0,0,0)), -webkit-linear-gradient(0deg, #6a6a6a, #323232 10%, #323232 90%, #6a6a6a);
  background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0) 20%, rgba(0,0,0,0)), -moz-linear-gradient(0deg, #6a6a6a, #323232 10%, #323232 90%, #6a6a6a);
  background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0) 20%, rgba(0,0,0,0)), -o-linear-gradient(0deg, #6a6a6a, #323232 10%, #323232 90%, #6a6a6a);
  background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0) 20%, rgba(0,0,0,0)), -ms-linear-gradient(0deg, #6a6a6a, #323232 10%, #323232 90%, #6a6a6a);
  background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 20%, rgba(0,0,0,0)), linear-gradient(90deg, #6a6a6a, #323232 10%, #323232 90%, #6a6a6a);
  -webkit-perspective: 450px;
  -moz-perspective: 450px;
  -ms-perspective: 450px;
  perspective: 450px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: sublime-button-inner-bevel 0.6s 1.5s forwards;
  -moz-animation: sublime-button-inner-bevel 0.6s 1.5s forwards;
  -o-animation: sublime-button-inner-bevel 0.6s 1.5s forwards;
  -ms-animation: sublime-button-inner-bevel 0.6s 1.5s forwards;
  animation: sublime-button-inner-bevel 0.6s 1.5s forwards;
}
.stunt-sublimetext-logo .button-base .button-inner-face {
  position: absolute;
  width: 100.8%;
  margin-left: -0.25%;
  padding-bottom: 10%;
  background: #f00;
  bottom: 100%;
  left: 0;
  border-radius: 17px;
  -webkit-transform: rotateX(10deg);
  -moz-transform: rotateX(10deg);
  -o-transform: rotateX(10deg);
  -ms-transform: rotateX(10deg);
  transform: rotateX(10deg);
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  margin-bottom: -17px;
  background: #5e5e5e;
  border-bottom: 1.5px solid rgba(255,255,255,0.5);
  -webkit-box-shadow: rgba(94,94,94,0.4) 0 0 0 2.3px inset;
  box-shadow: rgba(94,94,94,0.4) 0 0 0 2.3px inset;
  background-image: -webkit-linear-gradient(#b3b3b3, #696969 50%, #5e5e5e 50.1%, #5e5e5e);
  background-image: -moz-linear-gradient(#b3b3b3, #696969 50%, #5e5e5e 50.1%, #5e5e5e);
  background-image: -o-linear-gradient(#b3b3b3, #696969 50%, #5e5e5e 50.1%, #5e5e5e);
  background-image: -ms-linear-gradient(#b3b3b3, #696969 50%, #5e5e5e 50.1%, #5e5e5e);
  background-image: linear-gradient(#b3b3b3, #696969 50%, #5e5e5e 50.1%, #5e5e5e);
  -webkit-animation: sublime-button-inner-face 0.6s 1.5s forwards;
  -moz-animation: sublime-button-inner-face 0.6s 1.5s forwards;
  -o-animation: sublime-button-inner-face 0.6s 1.5s forwards;
  -ms-animation: sublime-button-inner-face 0.6s 1.5s forwards;
  animation: sublime-button-inner-face 0.6s 1.5s forwards;
}
.stunt-sublimetext-logo .button-base .letter-wrap {
  width: 100%;
  padding-bottom: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: sublime-letter-wrap 0.5s 2.1s forwards;
  -moz-animation: sublime-letter-wrap 0.5s 2.1s forwards;
  -o-animation: sublime-letter-wrap 0.5s 2.1s forwards;
  -ms-animation: sublime-letter-wrap 0.5s 2.1s forwards;
  animation: sublime-letter-wrap 0.5s 2.1s forwards;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.stunt-sublimetext-logo .button-base .letter-mask-top,
.stunt-sublimetext-logo .button-base .letter-mask-bottom {
  width: 100%;
  height: 50%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: sublime-letter-glow 1s 2.5s forwards;
  -moz-animation: sublime-letter-glow 1s 2.5s forwards;
  -o-animation: sublime-letter-glow 1s 2.5s forwards;
  -ms-animation: sublime-letter-glow 1s 2.5s forwards;
  animation: sublime-letter-glow 1s 2.5s forwards;
}
.stunt-sublimetext-logo .button-base .letter-mask-top {
  top: 0;
}
.stunt-sublimetext-logo .button-base .letter-mask-top .letter {
  top: 100%;
  color: #333;
  -webkit-animation: sublime-letter-top 1s 2.5s forwards;
  -moz-animation: sublime-letter-top 1s 2.5s forwards;
  -o-animation: sublime-letter-top 1s 2.5s forwards;
  -ms-animation: sublime-letter-top 1s 2.5s forwards;
  animation: sublime-letter-top 1s 2.5s forwards;
}
.stunt-sublimetext-logo .button-base .letter-mask-bottom {
  top: 50%;
}
.stunt-sublimetext-logo .button-base .letter-mask-bottom .letter {
  top: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #222;
  -webkit-animation: sublime-letter-bottom 1s 2.5s forwards;
  -moz-animation: sublime-letter-bottom 1s 2.5s forwards;
  -o-animation: sublime-letter-bottom 1s 2.5s forwards;
  -ms-animation: sublime-letter-bottom 1s 2.5s forwards;
  animation: sublime-letter-bottom 1s 2.5s forwards;
}
.stunt-sublimetext-logo .button-base .letter {
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 300px;
  font-family: 'Varela Round';
}
.stunt-sublimetext-logo .button-base .letter:before {
  content: 's';
}
@-moz-keyframes sublime-button-base {
  0% {
    height: 0;
    padding-top: 0;
  }
  50% {
    height: 310px;
    padding-top: 20px;
    -webkit-box-shadow: #c9c9c9 0 0 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
    box-shadow: #c9c9c9 0 0 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
  }
  100% {
    height: 310px;
    padding-top: 20px;
    -webkit-box-shadow: #c9c9c9 0 10px 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
    box-shadow: #c9c9c9 0 10px 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
  }
}
@-webkit-keyframes sublime-button-base {
  0% {
    height: 0;
    padding-top: 0;
  }
  50% {
    height: 310px;
    padding-top: 20px;
    -webkit-box-shadow: #c9c9c9 0 0 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
    box-shadow: #c9c9c9 0 0 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
  }
  100% {
    height: 310px;
    padding-top: 20px;
    -webkit-box-shadow: #c9c9c9 0 10px 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
    box-shadow: #c9c9c9 0 10px 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
  }
}
@-o-keyframes sublime-button-base {
  0% {
    height: 0;
    padding-top: 0;
  }
  50% {
    height: 310px;
    padding-top: 20px;
    -webkit-box-shadow: #c9c9c9 0 0 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
    box-shadow: #c9c9c9 0 0 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
  }
  100% {
    height: 310px;
    padding-top: 20px;
    -webkit-box-shadow: #c9c9c9 0 10px 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
    box-shadow: #c9c9c9 0 10px 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
  }
}
@keyframes sublime-button-base {
  0% {
    height: 0;
    padding-top: 0;
  }
  50% {
    height: 310px;
    padding-top: 20px;
    -webkit-box-shadow: #c9c9c9 0 0 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
    box-shadow: #c9c9c9 0 0 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
  }
  100% {
    height: 310px;
    padding-top: 20px;
    -webkit-box-shadow: #c9c9c9 0 10px 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
    box-shadow: #c9c9c9 0 10px 0 0, rgba(255,255,255,0.2) 0 0 0 2px inset;
  }
}
@-moz-keyframes sublime-button-base-bevel {
  from {
    width: 0;
  }
  to {
    width: 80%;
  }
}
@-webkit-keyframes sublime-button-base-bevel {
  from {
    width: 0;
  }
  to {
    width: 80%;
  }
}
@-o-keyframes sublime-button-base-bevel {
  from {
    width: 0;
  }
  to {
    width: 80%;
  }
}
@keyframes sublime-button-base-bevel {
  from {
    width: 0;
  }
  to {
    width: 80%;
  }
}
@-moz-keyframes sublime-button-inner-gap {
  from {
    width: 0;
    height: 0;
    -webkit-transform: translate3d(-50%, -50%) rotateX(180deg);
    -moz-transform: translate3d(-50%, -50%) rotateX(180deg);
    -o-transform: translate3d(-50%, -50%) rotateX(180deg);
    -ms-transform: translate3d(-50%, -50%) rotateX(180deg);
    transform: translate3d(-50%, -50%) rotateX(180deg);
  }
  to {
    width: 90%;
    height: 85%;
    -webkit-transform: translate3d(-50%, -50%) rotateX(0deg);
    -moz-transform: translate3d(-50%, -50%) rotateX(0deg);
    -o-transform: translate3d(-50%, -50%) rotateX(0deg);
    -ms-transform: translate3d(-50%, -50%) rotateX(0deg);
    transform: translate3d(-50%, -50%) rotateX(0deg);
  }
}
@-webkit-keyframes sublime-button-inner-gap {
  from {
    width: 0;
    height: 0;
    -webkit-transform: translate3d(-50%, -50%) rotateX(180deg);
    -moz-transform: translate3d(-50%, -50%) rotateX(180deg);
    -o-transform: translate3d(-50%, -50%) rotateX(180deg);
    -ms-transform: translate3d(-50%, -50%) rotateX(180deg);
    transform: translate3d(-50%, -50%) rotateX(180deg);
  }
  to {
    width: 90%;
    height: 85%;
    -webkit-transform: translate3d(-50%, -50%) rotateX(0deg);
    -moz-transform: translate3d(-50%, -50%) rotateX(0deg);
    -o-transform: translate3d(-50%, -50%) rotateX(0deg);
    -ms-transform: translate3d(-50%, -50%) rotateX(0deg);
    transform: translate3d(-50%, -50%) rotateX(0deg);
  }
}
@-o-keyframes sublime-button-inner-gap {
  from {
    width: 0;
    height: 0;
    -webkit-transform: translate3d(-50%, -50%) rotateX(180deg);
    -moz-transform: translate3d(-50%, -50%) rotateX(180deg);
    -o-transform: translate3d(-50%, -50%) rotateX(180deg);
    -ms-transform: translate3d(-50%, -50%) rotateX(180deg);
    transform: translate3d(-50%, -50%) rotateX(180deg);
  }
  to {
    width: 90%;
    height: 85%;
    -webkit-transform: translate3d(-50%, -50%) rotateX(0deg);
    -moz-transform: translate3d(-50%, -50%) rotateX(0deg);
    -o-transform: translate3d(-50%, -50%) rotateX(0deg);
    -ms-transform: translate3d(-50%, -50%) rotateX(0deg);
    transform: translate3d(-50%, -50%) rotateX(0deg);
  }
}
@keyframes sublime-button-inner-gap {
  from {
    width: 0;
    height: 0;
    -webkit-transform: translate3d(-50%, -50%) rotateX(180deg);
    -moz-transform: translate3d(-50%, -50%) rotateX(180deg);
    -o-transform: translate3d(-50%, -50%) rotateX(180deg);
    -ms-transform: translate3d(-50%, -50%) rotateX(180deg);
    transform: translate3d(-50%, -50%) rotateX(180deg);
  }
  to {
    width: 90%;
    height: 85%;
    -webkit-transform: translate3d(-50%, -50%) rotateX(0deg);
    -moz-transform: translate3d(-50%, -50%) rotateX(0deg);
    -o-transform: translate3d(-50%, -50%) rotateX(0deg);
    -ms-transform: translate3d(-50%, -50%) rotateX(0deg);
    transform: translate3d(-50%, -50%) rotateX(0deg);
  }
}
@-moz-keyframes sublime-button-inner-bevel {
  0% {
    width: 10%;
    height: 0;
    left: 45%;
    bottom: 40%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    left: 5%;
    width: 90%;
  }
  100% {
    width: 90%;
    left: 5%;
    bottom: 7.6%;
    height: 15%;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes sublime-button-inner-bevel {
  0% {
    width: 10%;
    height: 0;
    left: 45%;
    bottom: 40%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    left: 5%;
    width: 90%;
  }
  100% {
    width: 90%;
    left: 5%;
    bottom: 7.6%;
    height: 15%;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes sublime-button-inner-bevel {
  0% {
    width: 10%;
    height: 0;
    left: 45%;
    bottom: 40%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    left: 5%;
    width: 90%;
  }
  100% {
    width: 90%;
    left: 5%;
    bottom: 7.6%;
    height: 15%;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes sublime-button-inner-bevel {
  0% {
    width: 10%;
    height: 0;
    left: 45%;
    bottom: 40%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    left: 5%;
    width: 90%;
  }
  100% {
    width: 90%;
    left: 5%;
    bottom: 7.6%;
    height: 15%;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes sublime-button-inner-face {
  0% {
    padding-bottom: 100%;
  }
  50% {
    padding-bottom: 10%;
  }
  100% {
    padding-bottom: 100%;
  }
}
@-webkit-keyframes sublime-button-inner-face {
  0% {
    padding-bottom: 100%;
  }
  50% {
    padding-bottom: 10%;
  }
  100% {
    padding-bottom: 100%;
  }
}
@-o-keyframes sublime-button-inner-face {
  0% {
    padding-bottom: 100%;
  }
  50% {
    padding-bottom: 10%;
  }
  100% {
    padding-bottom: 100%;
  }
}
@keyframes sublime-button-inner-face {
  0% {
    padding-bottom: 100%;
  }
  50% {
    padding-bottom: 10%;
  }
  100% {
    padding-bottom: 100%;
  }
}
@-moz-keyframes sublime-letter-wrap {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes sublime-letter-wrap {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes sublime-letter-wrap {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes sublime-letter-wrap {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes sublime-letter-glow {
  0% {
    text-shadow: rgba(253,152,39,0) 0 -2px 0, rgba(96,60,10,0) 0 -4px 0, rgba(254,218,171,0) 0 1px 0, rgba(253,145,38,0) 0 0 0px;
  }
  25% {
    text-shadow: #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(254,218,171,0.9) 0 1px 0, rgba(253,145,38,0.8) 0 0 30px;
  }
  50% {
    text-shadow: rgba(253,152,39,0) 0 -2px 0, rgba(96,60,10,0) 0 -4px 0, rgba(254,218,171,0) 0 1px 0, rgba(253,145,38,0.5) 0 0 10px;
  }
  100% {
    text-shadow: #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(254,218,171,0.9) 0 1px 0, #fd9126 0 0 50px;
  }
}
@-webkit-keyframes sublime-letter-glow {
  0% {
    text-shadow: rgba(253,152,39,0) 0 -2px 0, rgba(96,60,10,0) 0 -4px 0, rgba(254,218,171,0) 0 1px 0, rgba(253,145,38,0) 0 0 0px;
  }
  25% {
    text-shadow: #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(254,218,171,0.9) 0 1px 0, rgba(253,145,38,0.8) 0 0 30px;
  }
  50% {
    text-shadow: rgba(253,152,39,0) 0 -2px 0, rgba(96,60,10,0) 0 -4px 0, rgba(254,218,171,0) 0 1px 0, rgba(253,145,38,0.5) 0 0 10px;
  }
  100% {
    text-shadow: #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(254,218,171,0.9) 0 1px 0, #fd9126 0 0 50px;
  }
}
@-o-keyframes sublime-letter-glow {
  0% {
    text-shadow: rgba(253,152,39,0) 0 -2px 0, rgba(96,60,10,0) 0 -4px 0, rgba(254,218,171,0) 0 1px 0, rgba(253,145,38,0) 0 0 0px;
  }
  25% {
    text-shadow: #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(254,218,171,0.9) 0 1px 0, rgba(253,145,38,0.8) 0 0 30px;
  }
  50% {
    text-shadow: rgba(253,152,39,0) 0 -2px 0, rgba(96,60,10,0) 0 -4px 0, rgba(254,218,171,0) 0 1px 0, rgba(253,145,38,0.5) 0 0 10px;
  }
  100% {
    text-shadow: #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(254,218,171,0.9) 0 1px 0, #fd9126 0 0 50px;
  }
}
@keyframes sublime-letter-glow {
  0% {
    text-shadow: rgba(253,152,39,0) 0 -2px 0, rgba(96,60,10,0) 0 -4px 0, rgba(254,218,171,0) 0 1px 0, rgba(253,145,38,0) 0 0 0px;
  }
  25% {
    text-shadow: #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(254,218,171,0.9) 0 1px 0, rgba(253,145,38,0.8) 0 0 30px;
  }
  50% {
    text-shadow: rgba(253,152,39,0) 0 -2px 0, rgba(96,60,10,0) 0 -4px 0, rgba(254,218,171,0) 0 1px 0, rgba(253,145,38,0.5) 0 0 10px;
  }
  100% {
    text-shadow: #fd9827 0 -2px 0, #603c0a 0 -4px 0, rgba(254,218,171,0.9) 0 1px 0, #fd9126 0 0 50px;
  }
}
@-moz-keyframes sublime-letter-bottom {
  0% {
    color: #222;
  }
  25% {
    color: #e77c02;
  }
  50% {
    color: #222;
  }
  100% {
    color: #fd9927;
  }
}
@-webkit-keyframes sublime-letter-bottom {
  0% {
    color: #222;
  }
  25% {
    color: #e77c02;
  }
  50% {
    color: #222;
  }
  100% {
    color: #fd9927;
  }
}
@-o-keyframes sublime-letter-bottom {
  0% {
    color: #222;
  }
  25% {
    color: #e77c02;
  }
  50% {
    color: #222;
  }
  100% {
    color: #fd9927;
  }
}
@keyframes sublime-letter-bottom {
  0% {
    color: #222;
  }
  25% {
    color: #e77c02;
  }
  50% {
    color: #222;
  }
  100% {
    color: #fd9927;
  }
}
@-moz-keyframes sublime-letter-top {
  0% {
    color: #333;
  }
  25% {
    color: #fc910d;
  }
  50% {
    color: #333;
  }
  100% {
    color: #fdaf4e;
  }
}
@-webkit-keyframes sublime-letter-top {
  0% {
    color: #333;
  }
  25% {
    color: #fc910d;
  }
  50% {
    color: #333;
  }
  100% {
    color: #fdaf4e;
  }
}
@-o-keyframes sublime-letter-top {
  0% {
    color: #333;
  }
  25% {
    color: #fc910d;
  }
  50% {
    color: #333;
  }
  100% {
    color: #fdaf4e;
  }
}
@keyframes sublime-letter-top {
  0% {
    color: #333;
  }
  25% {
    color: #fc910d;
  }
  50% {
    color: #333;
  }
  100% {
    color: #fdaf4e;
  }
}
Posted the 16/06/2016
Browse more

StuntsStunt #7 Kandinsky

  • HTML
  • Stylus (Source)
  • CSS (Output)

<div class="stunt-kandinsky">
  <div class="picture">
    <div class="circle-1">
      <div class="inner-circle"></div>
      <div class="inner-circle"></div>
    </div>
    <div class="circle-2"></div>
    <div class="circle-3"></div>
    <div class="line-1"></div>
    <div class="line-2"></div>
    <div class="line-3"></div>
    <div class="line-4"></div>
    <div class="line-5"></div>
    <div class="line-6"></div>
    <div class="line-7"></div>
    <div class="line-8"></div>
    <div class="line-9"></div>
    <div class="line-10"></div>
    <div class="line-11"></div>
    <div class="line-12"></div>
    <div class="line-13"></div>
    <div class="line-14"></div>
    <div class="line-15"></div>
    <div class="line-16"></div>
    <div class="line-17"></div>
    <div class="line-18"></div>
    <div class="line-19"></div>
    <div class="line-20"></div>
    <div class="line-21"></div>
    <div class="line-22"></div>
    <div class="line-23"></div>
    <div class="line-24"></div>
    <div class="line-25"></div>
    <div class="line-26"></div>
    <div class="line-27"></div>
    <div class="line-28"></div>
    <div class="line-29"></div>
    <div class="line-30"></div>
    <div class="line-31"></div>
    <div class="line-32"></div>
  </div>
</div>
@import 'nib'

// ------------------------------[   Variables   ]------------------------------

kandinsky-width = 350px
kandinsky-height = 480px
color-ink = #000
color-bg = #eed8ad

// ------------------------------[     Mixins    ]------------------------------

circle(radius, thickness = 2px, increment = 1)
    width radius * 2
    padding-bottom radius * 2
    margin-left -(radius)
    margin-top -(radius)
    border-radius(100%)
    box-shadow (color-ink) 0 0 0 (thickness)
    opacity 0
    transform translate(-50%, -50%)
    animation kandinsky-circle .2s (1s + increment * .1s) forwards

line(x, y, length, angle = 0deg, thickness = 2px, increment = 0)
    @keyframes kandinsky-line-{increment} {

        from {
            transform translate3d(-50%, -50%, 20px) rotate(angle) scaleX(0)
            opacity 0
        }

        to {
            transform translate3d(-50%, -50%, 0) rotate(angle) scaleX(1)
            opacity .9
        }

    }

    position absolute
    left x
    top y
    transform translate(-50%, -50%) rotate(angle) scaleX(0)
    width length
    height thickness
    margin-top -(length / 2)
    background color-ink
    animation (kandinsky-line- + increment) .3s (.5s + increment * .1s) forwards

absolute-center()   
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)

// ------------------------------[     Styles    ]------------------------------

.stunt-kandinsky
    width kandinsky-width
    height kandinsky-height
    margin auto
    position relative
    perspective 20px
    perspective-origin center center

    .picture
        opacity .7
        width 100%
        height 100%
        perspective 30px
        perspective-origin center center
        transform translate3d(0, 0, 0)

    &:before
        content ''
        position absolute
        left 50%
        top 50%
        width 100%
        height 100%
        background color-bg
        border-radius 3px
        opacity 0
        animation kandinsky-bg 2s 2s forwards

    // // Reference
    // &:after
    //     content ''
    //     mix-blend-mode multiply
    //     position absolute
    //     left 0
    //     top 0
    //     width 100%
    //     height 100%
    //     background-image url(https://s-media-cache-ak0.pinimg.com/236x/8b/85/1e/8b851ed7a8a82ea251fed9dd6288b584.jpg)
    //     background-size contain
    //     background-repeat no-repeat
    //     background-position center center
    //     opacity .2

    .circle-1
        circle(5%, 2px, 1)
        position absolute
        left 43%
        top 16%

        &:before, &:after, .inner-circle, .inner-circle:before, .inner-circle:after
            content ''
            absolute-center()

        &:before
            circle(153%, 2.2px, 2)

        &:after
            circle(143%, 1.5px, 3)

        .inner-circle:nth-child(1)
            circle(134.5%, 1.1px, 4)

            &:before
                circle(46.5%, 1px, 5)

            &:after
                circle(43%, .7px, 6)

        .inner-circle:nth-child(2)
            circle(13%)
            background color-ink

    .circle-2
        circle(4.5%, 2px, 7)
        position absolute
        left 55.5%
        top 45.5%

        &:before
            content ''
            circle(35%, 2px, 8)
            absolute-center(90%)
            background color-ink

    .circle-3
        circle(4.8%, 2px, 10)
        position absolute
        left 18%
        top 76%

        &:before
            content ''
            circle(20%, 2px, 11)
            absolute-center()
            background black

        &:after
            content ''
            circle(43%, 1.5px, 12)
            absolute-center()

    // First big line crossing the canvas starting from close to top left corner
    .line-1
        line(49%, 55%, 100%, -31deg, 4px, 1)

    // Second big line crossing the canvas starting from close to top left corner
    .line-2
        line(48%, 36%, 101%, 40deg, 3px, 2)

    .line-3
        line(49%, 50%, 140%, -119deg, 3px, 3)

    // Three lines combo slightly top-left from the center

    .line-4
        line(40%, 43%, 32%, -60deg, 2px, 4)

    .line-5
        line(42%, 44%, 32%, -60deg, 2px, 5)

    .line-6
        line(44%, 45%, 32%, -60deg, 2px, 6)

    // Three straight lines combbo on middle left

    .line-7
        line(19%, 40%, 29%, 0deg, 4.5px, 7)

    .line-8
        line(19%, 40%, 29%, 0deg, 4.5px, 8)

    .line-9
        line(19%, 44%, 29%, 0deg, 4.5px, 9)

    .line-10
        line(19%, 48%, 29%, 0deg, 4.5px, 10)

    // Five crossing lines on top right

    .line-11
        line(80%, 20%, 45%, 50deg, 1.1px, 11)

    .line-12
        line(78%, 22%, 45%, 52deg, 1.1px, 12)

    .line-13
        line(74.5%, 24%, 40%, 58deg, 1.1px, 13)

    .line-14
        line(75%, 20%, 46%, -50deg, 1.1px, 14)

    .line-15
        line(78%, 29%, 41%, -28deg, 1.1px, 15)

    // 9 Crossing lines near the middle of the canvas

    .line-16
        line(68%, 59%, 55%, -13deg, 1.1px, 16)

    .line-17
        line(66%, 56.5%, 58%, -17deg, 1.1px, 17)

    .line-18
        line(60%, 55.5%, 59%, -22deg, 1.1px, 18)

    .line-19
        line(65%, 58%, 19%, 54deg, 1.1px, 19)

    .line-20
        line(61%, 59%, 17%, 64deg, 1.1px, 20)

    .line-21
        line(58%, 59%, 13%, 70deg, 1.1px, 21)

    .line-22
        line(42%, 71%, 74%, 91deg, 1.1px, 22)

    .line-23
        line(44%, 59.5%, 15%, 85deg, 1.1px, 23)

    .line-24
        line(46.5%, 59.5%, 15%, 78deg, 1.1px, 24)

    // First pair of lines towards bottom right

    .line-25
        line(55%, 78%, 90%, -35deg, 1.7px, 25)

    .line-26
        line(56%, 79%, 90%, -35deg, 1.7px, 26)

    // Second pair of lines towards bottom right

    .line-27
        line(66%, 79%, 70%, -39.2deg, 3px, 27)

    .line-28
        line(67.5%, 80%, 70%, -39.2deg, 3px, 28)

    // Four crossing lines intersecting other groups starting bottom-right
    // and bottom-left from middle

    .line-29
        line(68%, 68%, 58%, 9deg, 1.1px, 29)

    .line-30
        line(67%, 72%, 61%, 17deg, 1.1px, 30)

    .line-31
        line(57%, 75.5%, 62%, 14deg, 1.1px, 31)

    .line-32
        line(30%, 77.5%, 54%, 90.5deg, 1.1px, 32)

// ------------------------------[     Animations    ]------------------------------

@keyframes kandinsky-bg {

    0% {
        opacity 0
        transform translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg)
    }

    25% {
        opacity 1
        transform translate3d(-50%, -50%, -15px) rotate3d(1.2, .4, .8, 2deg)
    }

    50% {
        opacity 1
        transform translate3d(-50%, -50%, -10px) rotate3d(.3, 1.4, 2.8, 1deg)
    }

    75% {
        opacity 1
        transform translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, .9deg)
    }

    100% {
        opacity 1
        transform translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg)
    }

}

@keyframes kandinsky-circle {

    0% {
        opacity 0
        transform scale(.6) translate(-50%, -50%)
    }

    100% {
        transform scale(1) translate(-50%, -50%)
        opacity 1
    }

}
.stunt-kandinsky {
  width: 350px;
  height: 480px;
  margin: auto;
  position: relative;
  -webkit-perspective: 20px;
  -moz-perspective: 20px;
  -ms-perspective: 20px;
  perspective: 20px;
  -webkit-perspective-origin: center center;
  -moz-perspective-origin: center center;
  -ms-perspective-origin: center center;
  perspective-origin: center center;
}
.stunt-kandinsky .picture {
  opacity: 0.7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  width: 100%;
  height: 100%;
  -webkit-perspective: 30px;
  -moz-perspective: 30px;
  -ms-perspective: 30px;
  perspective: 30px;
  -webkit-perspective-origin: center center;
  -moz-perspective-origin: center center;
  -ms-perspective-origin: center center;
  perspective-origin: center center;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.stunt-kandinsky:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: #eed8ad;
  border-radius: 3px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: kandinsky-bg 2s 2s forwards;
  -moz-animation: kandinsky-bg 2s 2s forwards;
  -o-animation: kandinsky-bg 2s 2s forwards;
  -ms-animation: kandinsky-bg 2s 2s forwards;
  animation: kandinsky-bg 2s 2s forwards;
}
.stunt-kandinsky .circle-1 {
  width: 10%;
  padding-bottom: 10%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 2px;
  box-shadow: #000 0 0 0 2px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 1.1s forwards;
  -moz-animation: kandinsky-circle 0.2s 1.1s forwards;
  -o-animation: kandinsky-circle 0.2s 1.1s forwards;
  -ms-animation: kandinsky-circle 0.2s 1.1s forwards;
  animation: kandinsky-circle 0.2s 1.1s forwards;
  position: absolute;
  left: 43%;
  top: 16%;
}
.stunt-kandinsky .circle-1:before,
.stunt-kandinsky .circle-1:after,
.stunt-kandinsky .circle-1 .inner-circle,
.stunt-kandinsky .circle-1 .inner-circle:before,
.stunt-kandinsky .circle-1 .inner-circle:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.stunt-kandinsky .circle-1:before {
  width: 306%;
  padding-bottom: 306%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 2.2px;
  box-shadow: #000 0 0 0 2.2px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 1.2s forwards;
  -moz-animation: kandinsky-circle 0.2s 1.2s forwards;
  -o-animation: kandinsky-circle 0.2s 1.2s forwards;
  -ms-animation: kandinsky-circle 0.2s 1.2s forwards;
  animation: kandinsky-circle 0.2s 1.2s forwards;
}
.stunt-kandinsky .circle-1:after {
  width: 286%;
  padding-bottom: 286%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 1.5px;
  box-shadow: #000 0 0 0 1.5px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 1.3s forwards;
  -moz-animation: kandinsky-circle 0.2s 1.3s forwards;
  -o-animation: kandinsky-circle 0.2s 1.3s forwards;
  -ms-animation: kandinsky-circle 0.2s 1.3s forwards;
  animation: kandinsky-circle 0.2s 1.3s forwards;
}
.stunt-kandinsky .circle-1 .inner-circle:nth-child(1) {
  width: 269%;
  padding-bottom: 269%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 1.1px;
  box-shadow: #000 0 0 0 1.1px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 1.4s forwards;
  -moz-animation: kandinsky-circle 0.2s 1.4s forwards;
  -o-animation: kandinsky-circle 0.2s 1.4s forwards;
  -ms-animation: kandinsky-circle 0.2s 1.4s forwards;
  animation: kandinsky-circle 0.2s 1.4s forwards;
}
.stunt-kandinsky .circle-1 .inner-circle:nth-child(1):before {
  width: 93%;
  padding-bottom: 93%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 1px;
  box-shadow: #000 0 0 0 1px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 1.5s forwards;
  -moz-animation: kandinsky-circle 0.2s 1.5s forwards;
  -o-animation: kandinsky-circle 0.2s 1.5s forwards;
  -ms-animation: kandinsky-circle 0.2s 1.5s forwards;
  animation: kandinsky-circle 0.2s 1.5s forwards;
}
.stunt-kandinsky .circle-1 .inner-circle:nth-child(1):after {
  width: 86%;
  padding-bottom: 86%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 0.7px;
  box-shadow: #000 0 0 0 0.7px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 1.6s forwards;
  -moz-animation: kandinsky-circle 0.2s 1.6s forwards;
  -o-animation: kandinsky-circle 0.2s 1.6s forwards;
  -ms-animation: kandinsky-circle 0.2s 1.6s forwards;
  animation: kandinsky-circle 0.2s 1.6s forwards;
}
.stunt-kandinsky .circle-1 .inner-circle:nth-child(2) {
  width: 26%;
  padding-bottom: 26%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 2px;
  box-shadow: #000 0 0 0 2px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 1.1s forwards;
  -moz-animation: kandinsky-circle 0.2s 1.1s forwards;
  -o-animation: kandinsky-circle 0.2s 1.1s forwards;
  -ms-animation: kandinsky-circle 0.2s 1.1s forwards;
  animation: kandinsky-circle 0.2s 1.1s forwards;
  background: #000;
}
.stunt-kandinsky .circle-2 {
  width: 9%;
  padding-bottom: 9%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 2px;
  box-shadow: #000 0 0 0 2px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 1.7s forwards;
  -moz-animation: kandinsky-circle 0.2s 1.7s forwards;
  -o-animation: kandinsky-circle 0.2s 1.7s forwards;
  -ms-animation: kandinsky-circle 0.2s 1.7s forwards;
  animation: kandinsky-circle 0.2s 1.7s forwards;
  position: absolute;
  left: 55.5%;
  top: 45.5%;
}
.stunt-kandinsky .circle-2:before {
  content: '';
  width: 70%;
  padding-bottom: 70%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 2px;
  box-shadow: #000 0 0 0 2px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 1.8s forwards;
  -moz-animation: kandinsky-circle 0.2s 1.8s forwards;
  -o-animation: kandinsky-circle 0.2s 1.8s forwards;
  -ms-animation: kandinsky-circle 0.2s 1.8s forwards;
  animation: kandinsky-circle 0.2s 1.8s forwards;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #000;
}
.stunt-kandinsky .circle-3 {
  width: 9.6%;
  padding-bottom: 9.6%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 2px;
  box-shadow: #000 0 0 0 2px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 2s forwards;
  -moz-animation: kandinsky-circle 0.2s 2s forwards;
  -o-animation: kandinsky-circle 0.2s 2s forwards;
  -ms-animation: kandinsky-circle 0.2s 2s forwards;
  animation: kandinsky-circle 0.2s 2s forwards;
  position: absolute;
  left: 18%;
  top: 76%;
}
.stunt-kandinsky .circle-3:before {
  content: '';
  width: 40%;
  padding-bottom: 40%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 2px;
  box-shadow: #000 0 0 0 2px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 2.1s forwards;
  -moz-animation: kandinsky-circle 0.2s 2.1s forwards;
  -o-animation: kandinsky-circle 0.2s 2.1s forwards;
  -ms-animation: kandinsky-circle 0.2s 2.1s forwards;
  animation: kandinsky-circle 0.2s 2.1s forwards;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #000;
}
.stunt-kandinsky .circle-3:after {
  content: '';
  width: 86%;
  padding-bottom: 86%;
  border-radius: 100%;
  -webkit-box-shadow: #000 0 0 0 1.5px;
  box-shadow: #000 0 0 0 1.5px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: kandinsky-circle 0.2s 2.2s forwards;
  -moz-animation: kandinsky-circle 0.2s 2.2s forwards;
  -o-animation: kandinsky-circle 0.2s 2.2s forwards;
  -ms-animation: kandinsky-circle 0.2s 2.2s forwards;
  animation: kandinsky-circle 0.2s 2.2s forwards;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.stunt-kandinsky .line-1 {
  position: absolute;
  left: 49%;
  top: 55%;
  -webkit-transform: translate(-50%, -50%) rotate(-31deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-31deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-31deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-31deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-31deg) scaleX(0);
  width: 100%;
  height: 4px;
  background: #000;
  -webkit-animation: kandinsky-line-1 0.3s 0.6s forwards;
  -moz-animation: kandinsky-line-1 0.3s 0.6s forwards;
  -o-animation: kandinsky-line-1 0.3s 0.6s forwards;
  -ms-animation: kandinsky-line-1 0.3s 0.6s forwards;
  animation: kandinsky-line-1 0.3s 0.6s forwards;
}
@-moz-keyframes kandinsky-line-1 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-1 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-1 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-1 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-31deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-31deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-2 {
  position: absolute;
  left: 48%;
  top: 36%;
  -webkit-transform: translate(-50%, -50%) rotate(40deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(40deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(40deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(40deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(40deg) scaleX(0);
  width: 101%;
  height: 3px;
  background: #000;
  -webkit-animation: kandinsky-line-2 0.3s 0.7s forwards;
  -moz-animation: kandinsky-line-2 0.3s 0.7s forwards;
  -o-animation: kandinsky-line-2 0.3s 0.7s forwards;
  -ms-animation: kandinsky-line-2 0.3s 0.7s forwards;
  animation: kandinsky-line-2 0.3s 0.7s forwards;
}
@-moz-keyframes kandinsky-line-2 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-2 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-2 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-2 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(40deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(40deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-3 {
  position: absolute;
  left: 49%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-119deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-119deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-119deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-119deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-119deg) scaleX(0);
  width: 140%;
  height: 3px;
  background: #000;
  -webkit-animation: kandinsky-line-3 0.3s 0.8s forwards;
  -moz-animation: kandinsky-line-3 0.3s 0.8s forwards;
  -o-animation: kandinsky-line-3 0.3s 0.8s forwards;
  -ms-animation: kandinsky-line-3 0.3s 0.8s forwards;
  animation: kandinsky-line-3 0.3s 0.8s forwards;
}
@-moz-keyframes kandinsky-line-3 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-3 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-3 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-3 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-119deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-119deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-4 {
  position: absolute;
  left: 40%;
  top: 43%;
  -webkit-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  width: 32%;
  height: 2px;
  background: #000;
  -webkit-animation: kandinsky-line-4 0.3s 0.9s forwards;
  -moz-animation: kandinsky-line-4 0.3s 0.9s forwards;
  -o-animation: kandinsky-line-4 0.3s 0.9s forwards;
  -ms-animation: kandinsky-line-4 0.3s 0.9s forwards;
  animation: kandinsky-line-4 0.3s 0.9s forwards;
}
@-moz-keyframes kandinsky-line-4 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-4 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-4 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-4 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-5 {
  position: absolute;
  left: 42%;
  top: 44%;
  -webkit-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  width: 32%;
  height: 2px;
  background: #000;
  -webkit-animation: kandinsky-line-5 0.3s 1s forwards;
  -moz-animation: kandinsky-line-5 0.3s 1s forwards;
  -o-animation: kandinsky-line-5 0.3s 1s forwards;
  -ms-animation: kandinsky-line-5 0.3s 1s forwards;
  animation: kandinsky-line-5 0.3s 1s forwards;
}
@-moz-keyframes kandinsky-line-5 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-5 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-5 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-5 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-6 {
  position: absolute;
  left: 44%;
  top: 45%;
  -webkit-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-60deg) scaleX(0);
  width: 32%;
  height: 2px;
  background: #000;
  -webkit-animation: kandinsky-line-6 0.3s 1.1s forwards;
  -moz-animation: kandinsky-line-6 0.3s 1.1s forwards;
  -o-animation: kandinsky-line-6 0.3s 1.1s forwards;
  -ms-animation: kandinsky-line-6 0.3s 1.1s forwards;
  animation: kandinsky-line-6 0.3s 1.1s forwards;
}
@-moz-keyframes kandinsky-line-6 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-6 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-6 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-6 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-60deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-60deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-7 {
  position: absolute;
  left: 19%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  width: 29%;
  height: 4.5px;
  background: #000;
  -webkit-animation: kandinsky-line-7 0.3s 1.2s forwards;
  -moz-animation: kandinsky-line-7 0.3s 1.2s forwards;
  -o-animation: kandinsky-line-7 0.3s 1.2s forwards;
  -ms-animation: kandinsky-line-7 0.3s 1.2s forwards;
  animation: kandinsky-line-7 0.3s 1.2s forwards;
}
@-moz-keyframes kandinsky-line-7 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-7 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-7 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-7 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-8 {
  position: absolute;
  left: 19%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  width: 29%;
  height: 4.5px;
  background: #000;
  -webkit-animation: kandinsky-line-8 0.3s 1.3s forwards;
  -moz-animation: kandinsky-line-8 0.3s 1.3s forwards;
  -o-animation: kandinsky-line-8 0.3s 1.3s forwards;
  -ms-animation: kandinsky-line-8 0.3s 1.3s forwards;
  animation: kandinsky-line-8 0.3s 1.3s forwards;
}
@-moz-keyframes kandinsky-line-8 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-8 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-8 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-8 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-9 {
  position: absolute;
  left: 19%;
  top: 44%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  width: 29%;
  height: 4.5px;
  background: #000;
  -webkit-animation: kandinsky-line-9 0.3s 1.4s forwards;
  -moz-animation: kandinsky-line-9 0.3s 1.4s forwards;
  -o-animation: kandinsky-line-9 0.3s 1.4s forwards;
  -ms-animation: kandinsky-line-9 0.3s 1.4s forwards;
  animation: kandinsky-line-9 0.3s 1.4s forwards;
}
@-moz-keyframes kandinsky-line-9 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-9 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-9 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-9 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-10 {
  position: absolute;
  left: 19%;
  top: 48%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  width: 29%;
  height: 4.5px;
  background: #000;
  -webkit-animation: kandinsky-line-10 0.3s 1.5s forwards;
  -moz-animation: kandinsky-line-10 0.3s 1.5s forwards;
  -o-animation: kandinsky-line-10 0.3s 1.5s forwards;
  -ms-animation: kandinsky-line-10 0.3s 1.5s forwards;
  animation: kandinsky-line-10 0.3s 1.5s forwards;
}
@-moz-keyframes kandinsky-line-10 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-10 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-10 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-10 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(0deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-11 {
  position: absolute;
  left: 80%;
  top: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(50deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(50deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(50deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(50deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(50deg) scaleX(0);
  width: 45%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-11 0.3s 1.6s forwards;
  -moz-animation: kandinsky-line-11 0.3s 1.6s forwards;
  -o-animation: kandinsky-line-11 0.3s 1.6s forwards;
  -ms-animation: kandinsky-line-11 0.3s 1.6s forwards;
  animation: kandinsky-line-11 0.3s 1.6s forwards;
}
@-moz-keyframes kandinsky-line-11 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-11 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-11 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-11 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(50deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(50deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-12 {
  position: absolute;
  left: 78%;
  top: 22%;
  -webkit-transform: translate(-50%, -50%) rotate(52deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(52deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(52deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(52deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(52deg) scaleX(0);
  width: 45%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-12 0.3s 1.7s forwards;
  -moz-animation: kandinsky-line-12 0.3s 1.7s forwards;
  -o-animation: kandinsky-line-12 0.3s 1.7s forwards;
  -ms-animation: kandinsky-line-12 0.3s 1.7s forwards;
  animation: kandinsky-line-12 0.3s 1.7s forwards;
}
@-moz-keyframes kandinsky-line-12 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-12 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-12 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-12 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(52deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(52deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-13 {
  position: absolute;
  left: 74.5%;
  top: 24%;
  -webkit-transform: translate(-50%, -50%) rotate(58deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(58deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(58deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(58deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(58deg) scaleX(0);
  width: 40%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-13 0.3s 1.8s forwards;
  -moz-animation: kandinsky-line-13 0.3s 1.8s forwards;
  -o-animation: kandinsky-line-13 0.3s 1.8s forwards;
  -ms-animation: kandinsky-line-13 0.3s 1.8s forwards;
  animation: kandinsky-line-13 0.3s 1.8s forwards;
}
@-moz-keyframes kandinsky-line-13 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-13 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-13 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-13 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(58deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(58deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-14 {
  position: absolute;
  left: 75%;
  top: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(-50deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-50deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-50deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-50deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-50deg) scaleX(0);
  width: 46%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-14 0.3s 1.9s forwards;
  -moz-animation: kandinsky-line-14 0.3s 1.9s forwards;
  -o-animation: kandinsky-line-14 0.3s 1.9s forwards;
  -ms-animation: kandinsky-line-14 0.3s 1.9s forwards;
  animation: kandinsky-line-14 0.3s 1.9s forwards;
}
@-moz-keyframes kandinsky-line-14 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-14 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-14 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-14 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-50deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-50deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-15 {
  position: absolute;
  left: 78%;
  top: 29%;
  -webkit-transform: translate(-50%, -50%) rotate(-28deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-28deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-28deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-28deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-28deg) scaleX(0);
  width: 41%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-15 0.3s 2s forwards;
  -moz-animation: kandinsky-line-15 0.3s 2s forwards;
  -o-animation: kandinsky-line-15 0.3s 2s forwards;
  -ms-animation: kandinsky-line-15 0.3s 2s forwards;
  animation: kandinsky-line-15 0.3s 2s forwards;
}
@-moz-keyframes kandinsky-line-15 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-15 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-15 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-15 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-28deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-28deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-16 {
  position: absolute;
  left: 68%;
  top: 59%;
  -webkit-transform: translate(-50%, -50%) rotate(-13deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-13deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-13deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-13deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-13deg) scaleX(0);
  width: 55%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-16 0.3s 2.1s forwards;
  -moz-animation: kandinsky-line-16 0.3s 2.1s forwards;
  -o-animation: kandinsky-line-16 0.3s 2.1s forwards;
  -ms-animation: kandinsky-line-16 0.3s 2.1s forwards;
  animation: kandinsky-line-16 0.3s 2.1s forwards;
}
@-moz-keyframes kandinsky-line-16 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-16 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-16 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-16 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-13deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-13deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-17 {
  position: absolute;
  left: 66%;
  top: 56.5%;
  -webkit-transform: translate(-50%, -50%) rotate(-17deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-17deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-17deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-17deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-17deg) scaleX(0);
  width: 58%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-17 0.3s 2.2s forwards;
  -moz-animation: kandinsky-line-17 0.3s 2.2s forwards;
  -o-animation: kandinsky-line-17 0.3s 2.2s forwards;
  -ms-animation: kandinsky-line-17 0.3s 2.2s forwards;
  animation: kandinsky-line-17 0.3s 2.2s forwards;
}
@-moz-keyframes kandinsky-line-17 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-17 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-17 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-17 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-17deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-17deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-18 {
  position: absolute;
  left: 60%;
  top: 55.5%;
  -webkit-transform: translate(-50%, -50%) rotate(-22deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-22deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-22deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-22deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-22deg) scaleX(0);
  width: 59%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-18 0.3s 2.3s forwards;
  -moz-animation: kandinsky-line-18 0.3s 2.3s forwards;
  -o-animation: kandinsky-line-18 0.3s 2.3s forwards;
  -ms-animation: kandinsky-line-18 0.3s 2.3s forwards;
  animation: kandinsky-line-18 0.3s 2.3s forwards;
}
@-moz-keyframes kandinsky-line-18 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-18 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-18 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-18 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-22deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-22deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-19 {
  position: absolute;
  left: 65%;
  top: 58%;
  -webkit-transform: translate(-50%, -50%) rotate(54deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(54deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(54deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(54deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(54deg) scaleX(0);
  width: 19%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-19 0.3s 2.4s forwards;
  -moz-animation: kandinsky-line-19 0.3s 2.4s forwards;
  -o-animation: kandinsky-line-19 0.3s 2.4s forwards;
  -ms-animation: kandinsky-line-19 0.3s 2.4s forwards;
  animation: kandinsky-line-19 0.3s 2.4s forwards;
}
@-moz-keyframes kandinsky-line-19 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-19 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-19 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-19 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(54deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(54deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-20 {
  position: absolute;
  left: 61%;
  top: 59%;
  -webkit-transform: translate(-50%, -50%) rotate(64deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(64deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(64deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(64deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(64deg) scaleX(0);
  width: 17%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-20 0.3s 2.5s forwards;
  -moz-animation: kandinsky-line-20 0.3s 2.5s forwards;
  -o-animation: kandinsky-line-20 0.3s 2.5s forwards;
  -ms-animation: kandinsky-line-20 0.3s 2.5s forwards;
  animation: kandinsky-line-20 0.3s 2.5s forwards;
}
@-moz-keyframes kandinsky-line-20 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-20 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-20 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-20 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(64deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(64deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-21 {
  position: absolute;
  left: 58%;
  top: 59%;
  -webkit-transform: translate(-50%, -50%) rotate(70deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(70deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(70deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(70deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(70deg) scaleX(0);
  width: 13%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-21 0.3s 2.6s forwards;
  -moz-animation: kandinsky-line-21 0.3s 2.6s forwards;
  -o-animation: kandinsky-line-21 0.3s 2.6s forwards;
  -ms-animation: kandinsky-line-21 0.3s 2.6s forwards;
  animation: kandinsky-line-21 0.3s 2.6s forwards;
}
@-moz-keyframes kandinsky-line-21 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-21 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-21 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-21 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(70deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(70deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-22 {
  position: absolute;
  left: 42%;
  top: 71%;
  -webkit-transform: translate(-50%, -50%) rotate(91deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(91deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(91deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(91deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(91deg) scaleX(0);
  width: 74%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-22 0.3s 2.7s forwards;
  -moz-animation: kandinsky-line-22 0.3s 2.7s forwards;
  -o-animation: kandinsky-line-22 0.3s 2.7s forwards;
  -ms-animation: kandinsky-line-22 0.3s 2.7s forwards;
  animation: kandinsky-line-22 0.3s 2.7s forwards;
}
@-moz-keyframes kandinsky-line-22 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-22 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-22 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-22 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(91deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(91deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-23 {
  position: absolute;
  left: 44%;
  top: 59.5%;
  -webkit-transform: translate(-50%, -50%) rotate(85deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(85deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(85deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(85deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(85deg) scaleX(0);
  width: 15%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-23 0.3s 2.8s forwards;
  -moz-animation: kandinsky-line-23 0.3s 2.8s forwards;
  -o-animation: kandinsky-line-23 0.3s 2.8s forwards;
  -ms-animation: kandinsky-line-23 0.3s 2.8s forwards;
  animation: kandinsky-line-23 0.3s 2.8s forwards;
}
@-moz-keyframes kandinsky-line-23 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-23 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-23 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-23 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(85deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(85deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-24 {
  position: absolute;
  left: 46.5%;
  top: 59.5%;
  -webkit-transform: translate(-50%, -50%) rotate(78deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(78deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(78deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(78deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(78deg) scaleX(0);
  width: 15%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-24 0.3s 2.9s forwards;
  -moz-animation: kandinsky-line-24 0.3s 2.9s forwards;
  -o-animation: kandinsky-line-24 0.3s 2.9s forwards;
  -ms-animation: kandinsky-line-24 0.3s 2.9s forwards;
  animation: kandinsky-line-24 0.3s 2.9s forwards;
}
@-moz-keyframes kandinsky-line-24 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-24 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-24 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-24 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(78deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(78deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-25 {
  position: absolute;
  left: 55%;
  top: 78%;
  -webkit-transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  width: 90%;
  height: 1.7px;
  background: #000;
  -webkit-animation: kandinsky-line-25 0.3s 3s forwards;
  -moz-animation: kandinsky-line-25 0.3s 3s forwards;
  -o-animation: kandinsky-line-25 0.3s 3s forwards;
  -ms-animation: kandinsky-line-25 0.3s 3s forwards;
  animation: kandinsky-line-25 0.3s 3s forwards;
}
@-moz-keyframes kandinsky-line-25 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-25 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-25 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-25 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-26 {
  position: absolute;
  left: 56%;
  top: 79%;
  -webkit-transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
  width: 90%;
  height: 1.7px;
  background: #000;
  -webkit-animation: kandinsky-line-26 0.3s 3.1s forwards;
  -moz-animation: kandinsky-line-26 0.3s 3.1s forwards;
  -o-animation: kandinsky-line-26 0.3s 3.1s forwards;
  -ms-animation: kandinsky-line-26 0.3s 3.1s forwards;
  animation: kandinsky-line-26 0.3s 3.1s forwards;
}
@-moz-keyframes kandinsky-line-26 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-26 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-26 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-26 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-35deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-35deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-27 {
  position: absolute;
  left: 66%;
  top: 79%;
  -webkit-transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  width: 70%;
  height: 3px;
  background: #000;
  -webkit-animation: kandinsky-line-27 0.3s 3.2s forwards;
  -moz-animation: kandinsky-line-27 0.3s 3.2s forwards;
  -o-animation: kandinsky-line-27 0.3s 3.2s forwards;
  -ms-animation: kandinsky-line-27 0.3s 3.2s forwards;
  animation: kandinsky-line-27 0.3s 3.2s forwards;
}
@-moz-keyframes kandinsky-line-27 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-27 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-27 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-27 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-28 {
  position: absolute;
  left: 67.5%;
  top: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(-39.2deg) scaleX(0);
  width: 70%;
  height: 3px;
  background: #000;
  -webkit-animation: kandinsky-line-28 0.3s 3.3s forwards;
  -moz-animation: kandinsky-line-28 0.3s 3.3s forwards;
  -o-animation: kandinsky-line-28 0.3s 3.3s forwards;
  -ms-animation: kandinsky-line-28 0.3s 3.3s forwards;
  animation: kandinsky-line-28 0.3s 3.3s forwards;
}
@-moz-keyframes kandinsky-line-28 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-28 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-28 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-28 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(-39.2deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(-39.2deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-29 {
  position: absolute;
  left: 68%;
  top: 68%;
  -webkit-transform: translate(-50%, -50%) rotate(9deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(9deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(9deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(9deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(9deg) scaleX(0);
  width: 58%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-29 0.3s 3.4s forwards;
  -moz-animation: kandinsky-line-29 0.3s 3.4s forwards;
  -o-animation: kandinsky-line-29 0.3s 3.4s forwards;
  -ms-animation: kandinsky-line-29 0.3s 3.4s forwards;
  animation: kandinsky-line-29 0.3s 3.4s forwards;
}
@-moz-keyframes kandinsky-line-29 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-29 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-29 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-29 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(9deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(9deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-30 {
  position: absolute;
  left: 67%;
  top: 72%;
  -webkit-transform: translate(-50%, -50%) rotate(17deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(17deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(17deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(17deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(17deg) scaleX(0);
  width: 61%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-30 0.3s 3.5s forwards;
  -moz-animation: kandinsky-line-30 0.3s 3.5s forwards;
  -o-animation: kandinsky-line-30 0.3s 3.5s forwards;
  -ms-animation: kandinsky-line-30 0.3s 3.5s forwards;
  animation: kandinsky-line-30 0.3s 3.5s forwards;
}
@-moz-keyframes kandinsky-line-30 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-30 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-30 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-30 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(17deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(17deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-31 {
  position: absolute;
  left: 57%;
  top: 75.5%;
  -webkit-transform: translate(-50%, -50%) rotate(14deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(14deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(14deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(14deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(14deg) scaleX(0);
  width: 62%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-31 0.3s 3.6s forwards;
  -moz-animation: kandinsky-line-31 0.3s 3.6s forwards;
  -o-animation: kandinsky-line-31 0.3s 3.6s forwards;
  -ms-animation: kandinsky-line-31 0.3s 3.6s forwards;
  animation: kandinsky-line-31 0.3s 3.6s forwards;
}
@-moz-keyframes kandinsky-line-31 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-31 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-31 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-31 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(14deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(14deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
.stunt-kandinsky .line-32 {
  position: absolute;
  left: 30%;
  top: 77.5%;
  -webkit-transform: translate(-50%, -50%) rotate(90.5deg) scaleX(0);
  -moz-transform: translate(-50%, -50%) rotate(90.5deg) scaleX(0);
  -o-transform: translate(-50%, -50%) rotate(90.5deg) scaleX(0);
  -ms-transform: translate(-50%, -50%) rotate(90.5deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(90.5deg) scaleX(0);
  width: 54%;
  height: 1.1px;
  background: #000;
  -webkit-animation: kandinsky-line-32 0.3s 3.7s forwards;
  -moz-animation: kandinsky-line-32 0.3s 3.7s forwards;
  -o-animation: kandinsky-line-32 0.3s 3.7s forwards;
  -ms-animation: kandinsky-line-32 0.3s 3.7s forwards;
  animation: kandinsky-line-32 0.3s 3.7s forwards;
}
@-moz-keyframes kandinsky-line-32 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes kandinsky-line-32 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-o-keyframes kandinsky-line-32 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@keyframes kandinsky-line-32 {
  from {
    -webkit-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -moz-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -o-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    -ms-transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    transform: translate3d(-50%, -50%, 20px) rotate(90.5deg) scaleX(0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    transform: translate3d(-50%, -50%, 0) rotate(90.5deg) scaleX(1);
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
}
@-moz-keyframes kandinsky-bg {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -moz-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -o-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -ms-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
  }
  25% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -moz-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -o-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -ms-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -moz-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -o-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -ms-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
  }
  75% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -moz-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -o-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -ms-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -moz-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -o-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -ms-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes kandinsky-bg {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -moz-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -o-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -ms-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
  }
  25% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -moz-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -o-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -ms-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -moz-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -o-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -ms-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
  }
  75% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -moz-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -o-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -ms-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -moz-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -o-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -ms-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
  }
}
@-o-keyframes kandinsky-bg {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -moz-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -o-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -ms-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
  }
  25% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -moz-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -o-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -ms-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -moz-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -o-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -ms-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
  }
  75% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -moz-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -o-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -ms-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -moz-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -o-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -ms-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes kandinsky-bg {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -moz-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -o-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    -ms-transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
    transform: translate3d(-50%, -50%, -20px) rotate3d(1.6, 1.5, 1, 3deg);
  }
  25% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -moz-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -o-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    -ms-transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
    transform: translate3d(-50%, -50%, -15px) rotate3d(1.2, 0.4, 0.8, 2deg);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -moz-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -o-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    -ms-transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
    transform: translate3d(-50%, -50%, -10px) rotate3d(0.3, 1.4, 2.8, 1deg);
  }
  75% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -moz-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -o-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    -ms-transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
    transform: translate3d(-50%, -50%, -5px) rotate3d(1.6, 1.5, 1, 0.9deg);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -moz-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -o-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    -ms-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 0, 0deg);
  }
}
@-moz-keyframes kandinsky-circle {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.6) translate(-50%, -50%);
    -moz-transform: scale(0.6) translate(-50%, -50%);
    -o-transform: scale(0.6) translate(-50%, -50%);
    -ms-transform: scale(0.6) translate(-50%, -50%);
    transform: scale(0.6) translate(-50%, -50%);
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    -moz-transform: scale(1) translate(-50%, -50%);
    -o-transform: scale(1) translate(-50%, -50%);
    -ms-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes kandinsky-circle {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.6) translate(-50%, -50%);
    -moz-transform: scale(0.6) translate(-50%, -50%);
    -o-transform: scale(0.6) translate(-50%, -50%);
    -ms-transform: scale(0.6) translate(-50%, -50%);
    transform: scale(0.6) translate(-50%, -50%);
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    -moz-transform: scale(1) translate(-50%, -50%);
    -o-transform: scale(1) translate(-50%, -50%);
    -ms-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes kandinsky-circle {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.6) translate(-50%, -50%);
    -moz-transform: scale(0.6) translate(-50%, -50%);
    -o-transform: scale(0.6) translate(-50%, -50%);
    -ms-transform: scale(0.6) translate(-50%, -50%);
    transform: scale(0.6) translate(-50%, -50%);
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    -moz-transform: scale(1) translate(-50%, -50%);
    -o-transform: scale(1) translate(-50%, -50%);
    -ms-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes kandinsky-circle {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.6) translate(-50%, -50%);
    -moz-transform: scale(0.6) translate(-50%, -50%);
    -o-transform: scale(0.6) translate(-50%, -50%);
    -ms-transform: scale(0.6) translate(-50%, -50%);
    transform: scale(0.6) translate(-50%, -50%);
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    -moz-transform: scale(1) translate(-50%, -50%);
    -o-transform: scale(1) translate(-50%, -50%);
    -ms-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
Posted the 09/06/2016
Browse more