body{margin: 0; padding: 0;}
a, img {border: none;outline: none;}
img {display: inline-block !important; vertical-align: middle;}

.container{width:728px; height:90px; box-sizing: border-box; border: 1px solid #7a8599; position: relative; background-color:#4782c1; background-image: url(../images/bg.jpg); background-repeat:no-repeat; background-position:left top; overflow:hidden;}

.container * {box-sizing: border-box;}
.clickTag{position:absolute; width:100%; height:100%; left:0; top:0; z-index:9;}

.d-none {display: none !important;}

.frame{width:100%; display:block; position:absolute; left:0; top:0; text-align:left; padding-top:16px; padding-left:45px;}

/* Angles css */
.angleTop{
    position:absolute; left:0px; top:0px; z-index:1;
    -webkit-animation: angleTop 0.8s ease-in-out 0s 1 forwards;
    animation: angleTop 0.8s ease-in-out 0s 1 forwards;
}
.angleTop img{}

.angleRight{
    position:absolute; right:143px; top:0px; z-index:4;
    -webkit-animation: angleRight 0.8s ease-in-out 0s 1 forwards;
    animation: angleRight 0.8s ease-in-out 0s 1 forwards;
}
.angleRight img{}

.angleLeft{
    position:absolute; left:0px; top:0px; z-index:2;
    -webkit-animation: angleLeft 0.8s ease-in-out 0s 1 forwards;
    animation: angleLeft 0.8s ease-in-out 0s 1 forwards;
}
.angleLeft img{}
/* Angles css end */


/* Frame 1 Animation */
.frame.frame1 {
    -webkit-animation:fadeOut 1s ease-in-out 3s 1 forwards;
    animation:fadeOut 1s ease-in-out 3s 1 forwards;
	padding-top:18px;
}
.f1_txt1 > img{width:142px;}

/* Frame 2 Animation */
.frame.frame2 {
    -webkit-animation: fadeIn 1.2s ease-in-out 3s 1 forwards;
    animation: fadeIn 1.2s ease-in-out 3s 1 forwards;
    opacity:0;
}
.f2_txt1 {}

.f2_txt1 > img{width:186px;}

.f2_txt2{
    margin-top:8px;
    height:0px;
    overflow:hidden;
    -webkit-animation: heightExpand 1s ease-in-out 4s 1 forwards;
    animation: heightExpand 1s ease-in-out 4s 1 forwards;
    opacity:0;
}

.f2_txt2 > img{width:252px;}


/* Footer */
.footer{width:217px; height:100%; position:absolute; top:0px; right:0px;z-index:9; background-image: url(../images/foot_bg.png); background-repeat:no-repeat; background-position:right top; background-size:100%}

/* Button Animation */
.cta{position:absolute; top:26px; left:-57px; overflow:hidden;}
.cta .ctaImg{width:123px;}
.sweepEffect{
    position: absolute;
    left: 120px;
    top: -10px;
    height: 140px;
    width:40px;
    opacity: 0.5;
    -webkit-animation: sweepToRight 3s ease-in-out 4.2s 1 forwards;
    animation: sweepToRight 3s ease-in-out 4.2s 1 forwards;
    -webkit-transform: rotate(20deg) translateX(-500%);
    transform: rotate(20deg) translateX(-500%);
}

/* Logo */
.brand {
    position: absolute;
    right: 12px;
    bottom: 11px;
}
.brand img {
    width: 124px;
    display: block;
}

/* ==== Animation ==== */
@keyframes RightToLeft {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}
@-moz-keyframes RightToLeft {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes RightToLeft {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}

@keyframes RightToLeftLoop {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}
@-moz-keyframes RightToLeftLoop {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes RightToLeftLoop {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}

@keyframes slideOutLeft {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}
@-moz-keyframes slideOutLeft {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}
@-webkit-keyframes slideOutLeft {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}

@keyframes slideOutLeftLoop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}
@-moz-keyframes slideOutLeftLoop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}
@-webkit-keyframes slideOutLeftLoop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}

@keyframes LeftToRight {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}
@-moz-keyframes LeftToRight {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes LeftToRight {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}

@keyframes LeftToRightLoop {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}
@-moz-keyframes LeftToRightLoop {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes LeftToRightLoop {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}

@keyframes sweepToRight {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}
@-moz-keyframes sweepToRight {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}
@-webkit-keyframes sweepToRight {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}

@keyframes sweepToRightLoop {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}
@-moz-keyframes sweepToRightLoop {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}
@-webkit-keyframes sweepToRightLoop {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}


@keyframes spinner {
    0% {transform:rotate(-10deg);}
    100% {transform:rotate(0deg);}
}
@-moz-keyframes spinner {
    0% {transform:rotate(-10deg);}
    100% {transform:rotate(0deg);}
}
@-webkit-keyframes spinner {
    0% {transform:rotate(-10deg);}
    100% {transform:rotate(0deg);}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-moz-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeInLoop {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-moz-keyframes fadeInLoop {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes fadeInLoop {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-moz-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-webkit-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeOutLoop {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-moz-keyframes fadeOutLoop {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-webkit-keyframes fadeOutLoop {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes TopToBottom {
    0% {transform: translateY(-37%);}
    100% {transform: translateY(0%);}
}
@-moz-keyframes TopToBottom {
    0% {transform: translateY(-37%);}
    100% {transform: translateY(0%);}
}
@-webkit-keyframes TopToBottom {
    0% {transform: translateY(-37%);}
    100% {transform: translateY(0%);}
}

@keyframes BottomToTop {
    0% {transform: translateY(21%);}
    100% {transform: translateY(0%);}
}
@-moz-keyframes BottomToTop {
    0% {transform: translateY(21%);}
    100% {transform: translateY(0%);}
}
@-webkit-keyframes BottomToTop {
    0% {transform: translateY(21%);}
    100% {transform: translateY(0%);}
}

@keyframes heightExpand {
    from {height:0px;}
    to {height:50px; opacity:1;}
}
@-moz-keyframes heightExpand {
    from {height:0px;}
    to {height:50px; opacity:1;}
}
@-webkit-keyframes heightExpand {
    from {height:0px;}
    to {height:50px; opacity:1;}
}

@keyframes angleTop {
    from {top:0px;}
    to {top:-55px;}
}

@keyframes angleRight {
    from {right:0px;}
    to {right:-142px;}
}

@keyframes angleBottom {
    from {bottom:70px;}
    to {bottom:-5px;}
}

@keyframes angleLeft {
    from {left:0px;}
    to {left:-96px;}
}