body {
    vertical-align: baseline;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

#main-container {
    position: absolute;
    width: 726px;
    height: 88px;
    background-color: #fff;
    overflow: hidden;
    border: 1px solid black;
}

#exit {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: block;
}

#bg {
    position: absolute;
    width: 728px;
    height: 90px;
    top: 0px;
    left: 0px;
    background: url("background.jpg") no-repeat 0 0;
}

.frame {
    position: absolute;
    z-index: 1;
}
.frame1 {
    background-color: rgb(245, 0, 0);
    mix-blend-mode: multiply;
    width: 50%;
    height: 100%;
    bottom: 0;
    left: 0;
}
.frame1 {
    -webkit-animation-name: frame1_in, frame1_out;
    -webkit-animation-timing-function: easeOutExpo;
    -webkit-animation-delay: 0s, 4.5s;
    -webkit-animation-duration: .5s, .5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: frame1_in, frame1_out;
    -moz-animation-timing-function: easeOutExpo;
    -moz-animation-delay: 0, 4.5s;
    -moz-animation-duration: .5s, .5s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    animation-name: frame1_in, frame1_out;
    animation-timing-function: easeOutExpo;
    animation-delay: 0s, 4.5s;
    animation-duration: .5s, .5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.frame1a {
    width: 50%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: url(728x90_text1.svg) no-repeat left top / 728px 90px;
    -webkit-animation-name: frame1_in, frame1a_out;
    -webkit-animation-timing-function: easeOutExpo;
    -webkit-animation-delay: 0s, 2s;
    -webkit-animation-duration: .5s, .25s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: frame1_in, frame1a_out;
    -moz-animation-timing-function: easeOutExpo;
    -moz-animation-delay: 0, 2s;
    -moz-animation-duration: .5s, .25s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    animation-name: frame1_in, frame1a_out;
    animation-timing-function: easeOutExpo;
    animation-delay: 0s, 2s;
    animation-duration: .5s, .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.frame1b {
    width: 50%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: url(728x90_text2.svg) no-repeat left top / 728px 90px;
    opacity: 0;
    -webkit-animation-name: show, frame1_out;
    -webkit-animation-timing-function: easeOutExpo;
    -webkit-animation-delay: 2.25s, 4.5s;
    -webkit-animation-duration: .1s, .5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: show,frame1_out;
    -moz-animation-timing-function: easeOutExpo;
    -moz-animation-delay: 2.25s, 4.5s;
    -moz-animation-duration: .1s, .5s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    animation-name: show,frame1_out;
    animation-timing-function: easeOutExpo;
    animation-delay: 2.25s, 4.5s;
    animation-duration: .1s, .5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.frame3 {
    background-color: rgb(245, 0, 0);
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    -webkit-animation-name: frame3, frame3_end;
    -webkit-animation-timing-function: easeInOut;
    -webkit-animation-delay: 5s, 6s;
    -webkit-animation-duration: 1s, .4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: frame3, frame3_end;
    -moz-animation-timing-function: easeInOut;
    -moz-animation-delay: 5s, 6s;
    -moz-animation-duration: 1s, .4s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    animation-name: frame3, frame3_end;
    animation-timing-function: easeInOut;
    animation-delay: 5s, 6s;
    animation-duration: 1s, .4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.frame4 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background: url(728x90_text3.svg) no-repeat left top / 100% auto;
    z-index: 10;

    -webkit-animation-name: show;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 5.5s;
    -webkit-animation-duration: .1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: show;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 5.5s;
    -moz-animation-duration: .1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    animation-name: show;
    animation-timing-function: linear;
    animation-delay: 5.5s;
    animation-duration: .1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.frame5 {
    height: 100%;
    width: 0%;
    top: 0;
    left: 0;
    overflow: hidden;

    -webkit-animation-name: frame5_in;
    -webkit-animation-timing-function: easeOut;
    -webkit-animation-delay: 6s;
    -webkit-animation-duration: .4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: frame5_in;
    -moz-animation-timing-function: easeOut;
    -moz-animation-delay: 6s;
    -moz-animation-duration: .4s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    animation-name: frame5_in;
    animation-timing-function: easeOut;
    animation-delay: 6s;
    animation-duration: .4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.frame5 img {
    position: absolute;
    top: 0;
    left: 0;
    height: 90px;
}

@-webkit-keyframes frame1_in {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}
@-moz-keyframes frame1_in {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}
@keyframes frame1_in {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}

@-webkit-keyframes frame1a_out {
    100% {
        opacity: 0;
    }
}
@-moz-keyframes frame1a_out {
    100% {
        opacity: 0;
    }
}
@keyframes frame1a_out {
    100% {
        opacity: 0;
    }
}

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

@-webkit-keyframes frame1_out {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}
@-moz-keyframes frame1_out {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}
@keyframes frame1_out {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

@-webkit-keyframes frame3 {
    0% {
        left: -100%;
    }
    50% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}
@-moz-keyframes frame3 {
    0% {
        left: -100%;
    }
    50% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}
@keyframes frame3 {
    0% {
        left: -100%;
    }
    50% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

@-webkit-keyframes frame3_end {
    0% {
        width: 50%;
        left: -50%;
    }
    100% {
        width: 50%;
        left: 0%;
    }
}
@-moz-keyframes frame3_end {
    0% {
        width: 50%;
        left: -50%;
    }
    100% {
        width: 50%;
        left: 0%;
    }
}
@keyframes frame3_end {
    0% {
        width: 50%;
        left: -50%;
    }
    100% {
        width: 50%;
        left: 0%;
    }
}

@-webkit-keyframes frame5_in {
    0% {
        width: 0%;
    }
    100% {
        width: 50%;
    }
}
@-moz-keyframes frame5_in {
    0% {
        width: 0%;
    }
    100% {
        width: 50%;
    }
}
@keyframes frame5_in {
    0% {
        width: 0%;
    }
    100% {
        width: 50%;
    }
}