/* CSS for the teaser game */

div#teaser {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 10px; left: 10px;
    -webkit-user-select: none;
    display: none;
}
div#teaser div {
    position: absolute;
    top 0; right: 50px;
    background: #eee url(close.png) no-repeat left 8px;
    padding: 10px;
    padding-left: 30px;
    height: 25px;

    font-size: 120%;
    cursor: pointer;
    border: 2px solid #bbb;
}

div#teaser h2 {
    text-align: center;
    margin-top: 30%;
    display: none;
    position: relative;
    z-index: 2;
    line-height: 80%;
}
div#teaser h2.fly {
    -webkit-animation-name: 'textanim';
    -webkit-animation-duration: 2s;
}

div#teaser img {
    cursor: pointer;
    position: absolute;
    top: -30%; left: 0%;
    -webkit-transform: scale(1);
    z-index: 1;

    -webkit-transition: -webkit-transform, opacity, left, top;
    -webkit-transition-duration: 0.5s;
}

div#teaser img.wiggle {
    -webkit-animation-name: 'teaseranim';
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
}

div#teaser img.turn1 {
    -webkit-transform: scale(1.4) rotate(0) rotateY(90deg) !important;
}
div#teaser img.turn2 {
    -webkit-transform: scale(1.4) rotate(0) rotateY(0deg) !important;
}

@-webkit-keyframes 'teaseranim' {
    0% { -webkit-transform: rotate(30deg) scale(1.2); }
    50% { -webkit-transform: rotate(-30deg) scale(1.2); }
    100% { -webkit-transform: rotate(30deg) scale(1.2); }
}

@-webkit-keyframes 'textanim' {
    0% { -webkit-transform: rotate(0deg) scale(1); opacity: 1;}
    60% { -webkit-transform: rotate(-10deg) scale(10); opacity: 0.6;}
    100% { -webkit-transform: rotate(210deg) scale(5); opacity: 0;}
}