#anim-container { width: 100%; height: 100%; position: absolute; }
dontdisplay { display: none !important; animation: none !important; }

#animation { width: 100%; height: 100%; position: fixed; background: rgba(218,227,233,0); display: inherit; z-index: -1001;
                 animation: anim 7s linear; }

#bg { width: 100%; height: 100%; position: fixed;  top: 0; z-index: 1000; opacity: 0; 
                animation: bg 7s linear; }

#stripe-left { height: 7px; width: calc(50% - 102px); position: absolute; top: calc(50% + 35px); left: 0; z-index: 999;
                animation: stripe-l 7s linear; }
#stripe-right { height: 7px; width: calc(50% - 102px); position: absolute; top: calc(50% - 45px); right: 0; z-index: 999;
                animation: stripe-r 7s linear; }

#logo-anim { position: absolute; width: 206px; height: 206px; margin-left:-103px; left: 50%; top: calc(50% - 103px); 
                 }

#logo-blue { top: 0;  z-index: 922; position: relative;
                animation: logo-blue 7s linear; }

#logo-left { position: absolute; top: 0; width: 206px; opacity: 0; z-index: 920;
                animation: logo 7s linear; }
#logo-right { position: absolute; top: 0; width: 206px; opacity: 0; z-index: 920;
                animation: logo 7s linear; }

#block-left {  height: 206px; width: 206px; position: absolute;  z-index: 992; opacity: 0; z-index: 921;
                animation: block-l 7s linear; }
#block-top1 {  width: 206px; height: 55px; position: absolute;  z-index: 991; opacity: 1; z-index: 921;
                animation: top1 7s linear; }
#block-top2 {  width: 206px; height: 60px; position: absolute;  z-index: 991; opacity: 1; z-index: 921;
                animation: top2 7s linear; }

#logo-text {  position: absolute;  left: 50%; z-index: 900; top: calc(50% - 103px);
                animation: logo-text 7s linear; opacity: 0; }
#block-text {  position: absolute;  width: 620px; height: 206px;  left: 40%; top: calc(50% - 103px); z-index: 901;                      animation: block-text 7s linear; }

/* IE */
#bg.ie { width: 100%; height: 100%; position: fixed;  top: 0; z-index: 1000; opacity: 0; 
                animation: bg-ie 7s linear; }
#bg.edge { width: 100%; height: 100%; position: fixed;  top: 0; z-index: 1000; opacity: 0; 
                animation: bg-edge 7s linear; }

#logo-text.ie {  position: absolute;  left: 50%; z-index: 900; top: 50%;
                animation: logo-text-ie 7s linear; opacity: 0; }

#block-text.ie {  position: absolute;  width: 620px; height: 206px;  left: 40%; top: 50%; z-index: 901;                      animation: block-text-ie 7s linear; }

#anim-container.ie { width: 100%; height: 100%; position: absolute; animation: edge 7s linear; opacity: 0; }

@media(max-width:1100px){
    #animation { display: none; z-index: -1000; }
}



@media(max-width:950px){
}


@media(max-width:750px){

    
}

@keyframes stripe-l {
    0% { left: -100%; display: block; background: #447091; }
    20% { left: 0; background: #447091; }
    25% { background: #447091; }
    42% {background: #dae3e9; }
    43% { background: #dae3e9; }
    100% { background: #dae3e9;}

}
@keyframes stripe-r {
    0% { right: -100%; background: #447091; display: block; }
    20% { right: 0; background: #447091; }
    25% { background: #447091; }
    42% {background: #dae3e9; }
    43% { background: #dae3e9; }
    100% { background: #dae3e9;}

}

@keyframes block-l {
    0% { width: 206px; opacity: 1; background: #dae3e9; left: 0; }
    20% { width: 206px; background: #dae3e9; opacity: 1; left: 0; }
    25% { width: 0px; background: #dae3e9; opacity: 1; left: 103px; }
    30% { width: 0px; opacity: 0; left: 103px; }
    100% { width: 0px; opacity: 0; left: 103px; }

}
@keyframes top1 {
    0% { top: 0; opacity: 1; background: #dae3e9; }
    24% {  top: 0; background: #dae3e9; opacity: 1; }
    28% {  top: -60px; background: #dae3e9; opacity: 1; }
    30% { top: -60px; opacity: 0; }
    100% { top: -60px; opacity: 0; }

}
@keyframes top2 {
    0% { top: 150px; opacity: 1; background: #dae3e9; }
    24% {  top: 150px; background: #dae3e9; opacity: 1; }
    28% {  top: 206px; background: #dae3e9; opacity: 1; }
    30% { top: 206px; opacity: 0; }
    100% { top: 206px; opacity: 0; }

}

@keyframes logo {
    0% { left: 0; display: block; opacity: 1; }
    30% { left: 0; display: block; opacity: 1; }
    42% { left: 0; display: block; opacity: 0;  }
    43% { left: 0; display: none; opacity: 0;  }
    100% { display: none; opacity: 0;}

}
@keyframes logo-blue {
    0% { left: 0; opacity: 0;  width: 206px; position: absolute; }
    30% { left: 0; opacity: 0;  width: 206px; position: absolute; }
    42% { left: 0; opacity: 1; z-index: 999;  width: 206px;  position: absolute; }
    84% {  left: 0; opacity: 1; width: 206px; top: 0; position: relative; }
    100% { left: 64px; opacity: 1; z-index: 999;  position: relative; width: 64px; top: 64px; }

}

@keyframes bg {
    0% { left: 0; background: #dae3e9; opacity: 1; }
    30% { left: 0; background: #dae3e9; opacity: 1; }
    42% { left: 0; background: #447091; opacity: 1; width: 206px; height: 206px; position: fixed; width: 100%; height: 100%; margin-left:0px; left: 0%; top: 0; }
    53% { background: #447091; opacity: 1; position: absolute; width: 206px; height: 206px; margin-left:-103px; left: 50%; top: calc(50% - 103px); }
    70% { background: #447091; opacity: 1; position: absolute; width: 206px; height: 206px; margin-left:-250px; left: 50%; top: calc(50% - 103px); }
    84% { background: #447091; opacity: 1; position: absolute; width: 206px; height: 206px; margin-left:-250px; left: 50%; top: calc(50% - 103px); }
    100% { background: #447091; position: absolute; width: 64px; height: 64px; margin-left:-520px; left: 50%; top: 50px; opacity: 0; }

}

@keyframes logo-text {
    0% {  margin-left: -410px; top: calc(50% - 103px); opacity: 0;  width: 500px; }
    52.9% { margin-left: -410px; top: calc(50% - 103px); opacity: 0; width: 500px; }
    53% { margin-left: -410px; top: calc(50% - 103px); opacity: 1; width: 500px; }
    70% { margin-left: 0px; top: calc(50% - 103px); opacity: 1; width: 500px;}
    84% { margin-left: 0px; top: calc(50% - 103px); opacity: 1; width: 500px;}
    100% { margin-left:-400px; top: 50px; opacity: 0; width: 180px;}
}


@keyframes block-text {
    0% {  margin-left: -350px; top: calc(50% - 103px); opacity: 0; background: #dae3e9;}
    52.7% { margin-left: -350px; top: calc(50% - 103px); opacity: 0; background: #dae3e9;  z-index: 901; }
    52.8% { margin-left: -350px; top: calc(50% - 103px); opacity: 1; background: #dae3e9; z-index: 901;}
    70% { margin-left: -500px; top: calc(50% - 103px); opacity: 1; background: #dae3e9; z-index: 901; }
    84% { margin-left: -500px; top: calc(50% - 103px); opacity: 0; background: #dae3e9; z-index: 901; }
    100% {  opacity: 0;  }

}

@keyframes anim {
    0% {  background: rgba(218,227,233,1); display: block; z-index: 1000;  }
    90% { background: rgba(218,227,233,1); display: block; z-index: 1000; }
    99% { background: rgba(218,227,233,0); display: block; z-index: 1000; }
    100% { background: rgba(218,227,233,0); display: none; z-index: -1000; }
}


/* IE */
@keyframes bg-ie {
    0% { left: 0; background: #dae3e9; opacity: 1; position: absolute; }
    30% { left: 0; background: #dae3e9; opacity: 1; position: absolute; }
    42% { background: #447091; opacity: 1; position: absolute; width: 100%; height: 100%; margin-left:0px; left: 0%; top: 0; }
    53% { background: #447091; opacity: 1; position: absolute; width: 206px; height: 206px; margin-left:-103px; left: 50%; top: 48%; }
    70% { background: #447091; opacity: 1; position: absolute; width: 206px; height: 206px; margin-left:-250px; left: 48%; top: 48%; }
    84% { background: #447091; opacity: 1; position: absolute; width: 206px; height: 206px; margin-left:-250px; left: 48%; top: 48%; }
    100% { background: #447091; position: absolute; width: 64px; height: 64px; margin-left:-520px; left: 48%; top: 50px; opacity: 0; }

}
@keyframes bg-edge {
    0% { left: 0; background: #dae3e9; opacity: 1; position: absolute; }
    30% { left: 0; background: #dae3e9; opacity: 1; position: absolute; }
    42% { background: #447091; opacity: 1; position: absolute; width: 100%; height: 100%; margin-left:0px; left: 0%; top: 0; }
    100% { background: #447091; opacity: 1; position: absolute; width: 100%; height: 100%; margin-left:0px; left: 0%; top: 0; }


}
@keyframes logo-text-ie {
    0% {  margin-left: -410px; top: 48%; opacity: 0;  width: 500px; }
    52.9% { margin-left: -410px; top: 48%; opacity: 0; width: 500px; }
    53% { margin-left: -410px; top: 48%; opacity: 1; width: 500px; }
    70% { margin-left: 0px; top: 48%; opacity: 1; width: 500px;}
    84% { margin-left: 0px; top: 48%; opacity: 1; width: 500px;}
    100% { margin-left:-400px; top: 50px; opacity: 0; width: 180px;}
}


@keyframes block-text-ie {
    0% {  margin-left: -350px; top: 48%; opacity: 0; background: #dae3e9;}
    52.7% { margin-left: -350px; top: 48%; opacity: 0; background: #dae3e9;  z-index: 901; }
    52.8% { margin-left: -350px; top: 48%; opacity: 1; background: #dae3e9; z-index: 901;}
    70% { margin-left: -500px; top: 48%; opacity: 1; background: #dae3e9; z-index: 901; }
    84% { margin-left: -500px; top: 48%; opacity: 0; background: #dae3e9; z-index: 901; }
    100% {  opacity: 0;  }

}

@keyframes edge {
    0% {  opacity: 1; }
    50% {opacity: 1; z-index: 1000; }
    65% {opacity: 0; z-index: -1000; }
    100% { opacity: 0; z-index: -1000; }
}