@import url(https://fonts.googleapis.com/css?family=Oswald:700);
/*Common CSS*/
html,
body,
div {
    vertical-align: baseline;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
}
body {
    font-family: sans-serif;
    -ms-user-select: none;
        user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    -o-user-drag: none;
}

.container {
    position: absolute;
    display: block;
    width: 300px;
    height: 600px;
    border: 1px solid #939393;
    left: 0;
    top: 0;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    visibility: visible;
    overflow: hidden;
    background: url(../images/bg.jpg) no-repeat;
    cursor: url("../images/cursor.png") 19 19, auto;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.container div {position: absolute;}

.box1 {
    left: 79px;
    top: -40px;
    width: 38px;
    height: 39px;
    z-index: 20;
    background: url(../images/box1.png);
    -webkit-animation: box 5s linear;
       -moz-animation: box 5s linear;
         -o-animation: box 5s linear;
            animation: box 5s linear;
}

.box2 {
    left: 79px;
    top: -40px;
    width: 38px;
    height: 39px;
    z-index: 20;
    background: url(../images/box2.png);
    -webkit-animation: box 3.5s linear;
       -moz-animation: box 3.5s linear;
         -o-animation: box 3.5s linear;
            animation: box 3.5s linear;
}

.box3 {
    left: 79px;
    top: -40px;
    width: 38px;
    height: 39px;
    z-index: 20;
    background: url(../images/box3.png);
    -webkit-animation: box 4.55s linear;
       -moz-animation: box 4.55s linear;
         -o-animation: box 4.55s linear;
            animation: box 4.55s linear;
}
.box4 {
    left: 79px;
    top: -40px;
    width: 38px;
    height: 39px;
    z-index: 20;
    background: url(../images/box4.png);
    -webkit-animation: box 4s linear;
       -moz-animation: box 4s linear;
         -o-animation: box 4s linear;
            animation: box 4s linear;
}

.bottom_bg {bottom: -5px; vertical-align: bottom;}
.exp_time_left, .exp_gift{
    display: none;
}
.exp_time_left img {
    left: 10px;
    position: absolute;
    top: 570px;
}
.exp_time_left h1 {
    color: #ff3f09;
    font-size: 22px;
    left: 85px;
    letter-spacing: -0.04em;
    position: absolute;
    text-transform: uppdercase;
    top: 552px;
    font-weight: 700;
}
.exp_time_left span img {
    left: 108px;
    position: absolute;
    top: 569px;
}
.exp_gift img {
    left: 122px;
    position: absolute;
    top: 571px;
}
.exp_gift h1 {
    color: #ff3f09;
    font-size: 22px;
    font-weight: 700;
    left: 166px;
    letter-spacing: -0.04em;
    position: absolute;
    text-transform: uppercase;
    top: 553px;
}
.close img {
    left: 239px;
    position: absolute;
    top: 574px;
}
.exp_logo {
    left: -24px;
    top: -120px;
    z-index: 30;
    -webkit-animation: brand .5s cubic-bezier(0.24, 0.56499, 0.54, 1.745) forwards;
       -moz-animation: brand .5s cubic-bezier(0.24, 0.56499, 0.54, 1.745) forwards;
         -o-animation: brand .5s cubic-bezier(0.24, 0.56499, 0.54, 1.745) forwards;
            animation: brand .5s cubic-bezier(0.24, 0.56499, 0.54, 1.745) forwards;
}
.exp_startMessage {
    top: 220px;
    left: 33px;
    opacity: 0;
    width: 234px;
    height: 178px;
    z-index: 10;
    -webkit-animation: zoomIn .5s 1s forwards;
       -moz-animation: zoomIn .5s 1s forwards;
         -o-animation: zoomIn .5s 1s forwards;
            animation: zoomIn .5s 1s forwards;
}

.zoomOut{
    -webkit-animation: zoomOut .3s linear forwards;
       -moz-animation: zoomOut .3s linear forwards;
         -o-animation: zoomOut .3s linear forwards;
            animation: zoomOut .3s linear forwards;
}

.exp_coupon_txt img {
    top: 168px;
    position: absolute;
    opacity: 0;
    left: 39px;
}

.exp_coupon_txt h1 {
    color: #ff3f09;
    font-size: 35px;
    font-weight: 700;
    left: 90px;
    letter-spacing: -2px;
    position: absolute;
    text-transform: uppercase;
    top: 178px;
    opacity: 0;
}

.lightSpeedInLeft{
    -webkit-animation: lightSpeedInLeft 1s forwards;
       -moz-animation: lightSpeedInLeft 1s forwards;
         -o-animation: lightSpeedInLeft 1s forwards;
            animation: lightSpeedInLeft 1s forwards;
}
.lightSpeedInRight{
    -webkit-animation: lightSpeedInRight 1s forwards;
       -moz-animation: lightSpeedInRight 1s forwards;
         -o-animation: lightSpeedInRight 1s forwards;
            animation: lightSpeedInRight 1s forwards;
}

.exp_coupon_txt_head1_anim{
    -webkit-animation: bounceInLeft 1.5s ease-in-out forwards;
       -moz-animation: bounceInLeft 1.5s ease-in-out forwards;
         -o-animation: bounceInLeft 1.5s ease-in-out forwards;
            animation: bounceInLeft 1.5s ease-in-out forwards;
}
.exp_coupon_code_anim{
    -webkit-animation: bounceInRight 1.5s ease-in-out forwards;
       -moz-animation: bounceInRight 1.5s ease-in-out forwards;
         -o-animation: bounceInRight 1.5s ease-in-out forwards;
            animation: bounceInRight 1.5s ease-in-out forwards;
}
.exp_circle {
    background: url(../images/circle.png) no-repeat;
    top: 267px;
    left: 70px;
    position: absolute;
    width: 153px;
    height: 153px;
    opacity: 0;
}
.bounceIn{
    -webkit-animation: bounceIn 1s linear forwards;
       -moz-animation: bounceIn 1s linear forwards;
         -o-animation: bounceIn 1s linear forwards;
            animation: bounceIn 1s linear forwards;
    -webkit-animation-delay: 1s;
       -moz-animation-delay: 1s;
         -o-animation-delay: 1s;
            animation-delay: 1s;
}

.exp_circle h1 {
    color: #dbffe1;
    font-size: 55px;
    font-weight: 700;
    left: 35px;
    letter-spacing: -1px;
    position: absolute;
    text-transform: uppercase;
    top: 8px;
}
.exp_circle h1 span {
    font-size: 42px;
}
.exp_btn a {
    top: 440px;
    left: -300px;
    position: absolute;
    background: url(../images/btn_normal.png) no-repeat;
    width: 190px;
    height: 48px;
    opacity: 0;
}

.btn_anim{
    -webkit-animation: btn_anim 1s linear forwards;
       -moz-animation: btn_anim 1s linear forwards;
         -o-animation: btn_anim 1s linear forwards;
            animation: btn_anim 1s linear forwards;
    -webkit-animation-delay: 1s;
       -moz-animation-delay: 1s;
         -o-animation-delay: 1s;
            animation-delay: 1s;
}

.exp_btn a:hover {
    background: url(../images/btn_hover.png) no-repeat;
    width: 190px;
    height: 48px;
    z-index: 999;
}

.exp_btn .terms {
    top: 500px;
    left: 110px;
    position: absolute;
    display: none;
}

.terms_anim{
    animation: terms_anim 1s linear 1s forwards;
}