#otp-container {
    /* background: rgba(0, 0, 0, .7); */
    /* overflow: hidden; */
    position: relative;
    /* top: 0; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
}

.photo {
    border: 4px solid #fff;
    -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, .75);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, .75);
    display: block;
    left: 50%;
    top: 80px;
    position: absolute;
    height: 182px;
    margin-left: -114px;
    width: 242px;
    opacity: 0
}

.otp-callout {
    margin: 0 auto;
    padding-top: 145px;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.otp-foot {
    /* background: #000; */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
    z-index: 2000
}

#close {
    background: url(http://fixturemedia.com/fixturemedia_2013_html5/mobile_otp/images/close_button.gif);
    position: absolute;
    right: 0;
    height: 35px;
    width: 78px
}

#logo {
    display: block;
    height: 72px;
    width: 162px;
    margin: 0 auto 12px
}

#text {
    display: block;
    height: 28px;
    width: 205px;
    margin: 0 auto 15px
}

#button {
    background: url(http://fixturemedia.com/fixturemedia_2013_html5/mobile_otp/images/button.png);
    display: block;
    height: 28px;
    width: 163px;
    margin: 0 auto
}

#image-1 {
    z-index: 1100
}

#image-2 {
    z-index: 1200
}

#image-3 {
    z-index: 1300
}

#image-4 {
    z-index: 1400
}

#image-5 {
    z-index: 1500
}

.loaded .photo,
.loaded .otp-callout {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.loaded .otp-callout {
    -webkit-animation-name: presentcallout;
    animation-name: presentcallout
}

.loaded #image-1 {
    -webkit-animation-name: movement1;
    animation-name: movement1
}

.loaded #image-2 {
    -webkit-animation-name: movement2;
    animation-name: movement2
}

.loaded #image-3 {
    -webkit-animation-name: movement3;
    animation-name: movement3
}

.loaded #image-4 {
    -webkit-animation-name: movement4;
    animation-name: movement4
}

.loaded #image-5 {
    -webkit-animation-name: movement5;
    animation-name: movement5
}

@-webkit-keyframes movement1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2)
    }

    10%,
    60% {
        opacity: 1;
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg)
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(337deg) translate(-232px, 5px);
        transform: rotate(337deg) translate(-232px, 5px)
    }
}

@keyframes movement1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    10%,
    60% {
        opacity: 1;
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg)
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(342deg) translate(-232px, 30px);
        transform: rotate(342deg) translate(-232px, 30px)
    }
}

@-webkit-keyframes movement2 {
    10% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    20%,
    60% {
        opacity: 1;
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg)
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(270deg) translate(-230px, -5px);
        transform: rotate(270deg) translate(-230px, -5px)
    }
}

@keyframes movement2 {
    10% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    20%,
    60% {
        opacity: 1;
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg)
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(270deg) translate(-230px, -5px);
        transform: rotate(270deg) translate(-230px, -5px)
    }
}

@-webkit-keyframes movement3 {
    20% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    30%,
    60% {
        opacity: 1;
        -webkit-transform: rotate(352deg);
        transform: rotate(352deg)
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(306deg) translate(222px, 20px);
        transform: rotate(306deg) translate(222px, 20px)
    }
}

@keyframes movement3 {
    20% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    30%,
    60% {
        opacity: 1;
        -webkit-transform: rotate(352deg);
        transform: rotate(352deg)
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(306deg) translate(222px, 20px);
        transform: rotate(306deg) translate(222px, 20px)
    }
}

@-webkit-keyframes movement4 {
    30% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    40%,
    60% {
        opacity: 1;
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(18deg) translate(220px, 28px);
        transform: rotate(18deg) translate(220px, 28px)
    }
}

@keyframes movement4 {
    30% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    40%,
    60% {
        opacity: 1;
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(18deg) translate(220px, 28px);
        transform: rotate(18deg) translate(220px, 28px)
    }
}

@-webkit-keyframes movement5 {
    40% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    50%,
    60% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(54deg) translate(-225px, 22px);
        transform: rotate(54deg) translate(-225px, 22px)
    }
}

@keyframes movement5 {
    40% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    50%,
    60% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    90%,
    100% {
        opacity: 1;
        -webkit-transform: rotate(54deg) translate(-225px, 22px);
        transform: rotate(54deg) translate(-225px, 22px)
    }
}

@-webkit-keyframes presentcallout {
    80% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes presentcallout {
    80% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}