/********Basic settings**********/
*{
    margin: 0;
    padding: 0;
    position:absolute;
}
html {
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
*, *:before, *:after {
    -moz-box-sizing: inherit;
         box-sizing: inherit;
}
img{
  border: 0px;
}
a{
  text-decoration: none;
}
body{
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff;
}
#clickTAG {
   top: 0px;
   left: 0px;
   opacity: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   cursor:pointer;
}
#ad{
   -moz-user-select: -moz-none;
   -webkit-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
}
#banner{  
  width: 728px; 
  height: 90px;
  display: block;
  cursor: pointer;  
  overflow: hidden;
  visibility: visible;  
  border: 1px #444444 solid;
  background: #fff;
  color: #444; 
}
#banner * {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

#banner.is-visible * {
    -webkit-animation-play-state: running;
            animation-play-state: running;
}
#all-animation, #frame-two { 
  width: 100%;}

.banner-bg{
  width: 728px; 
  height: 90px;
  -webkit-animation: banner-ani .1s 1.3s both;
     -moz-animation: banner-ani .1s 1.3s both;
       -o-animation: banner-ani .1s 1.3s both;
          animation: banner-ani .1s 1.3s both;
}
.ie-fallback{
position: absolute;
z-index: 9999;
top: 0;
left: 0;
}
sup {
	line-height:5px;
	}
/*******common css *********/
.text-36{
  font-size: 36px;
  line-height: 39px;
  text-align: center;
  text-decoration: none;
  bottom-border: 0px;
}

/*******frane one css start*********/
.dell-intel{
  top:17px;
  left: 336px;
  z-index: 2;
  -webkit-animation: fade-out .2s 1.1s both;
     -moz-animation: fade-out .2s 1.1s both;
       -o-animation: fade-out .2s 1.1s both;
          animation: fade-out .2s 1.1s both;
}
.dell-funding{
  top:20px;
  left: 660px;
  z-index: 2;
  -webkit-animation: fade-out .2s 1.1s both, fade-out-back .3s 11.5s forwards;
     -moz-animation: fade-out .2s 1.1s both, fade-out-back .3s 11.5s forwards;
       -o-animation: fade-out .2s 1.1s both, fade-out-back .3s 11.5s forwards;
          animation: fade-out .2s 1.1s both, fade-out-back .3s 11.5s forwards;
}
.jsp-message{
	text-align:right;
     top: 30px;
    width: 70px;
    font-size: 9px;
	line-height:10px;
    left: 575px;
  color: #444;
  z-index: 2;
  -webkit-animation: fade-out .2s 1.1s both;
     -moz-animation: fade-out .2s 1.1s both;
       -o-animation: fade-out .2s 1.1s both;
          animation: fade-out .2s 1.1s both;
}
.jsp-message sup {
    position: relative;
    top: 2px;
    left: 0.5px;
}
.Firefox .jsp-message sup {
    position: relative;
    top: 2px;
    left: 1px;
}

/*******frane one css end*********/

/*******frane two css start*********/

.focus{
  width: 728px;
  height: 90px;
  top: 0;
  left: 0;
  z-index: -2;
  -webkit-animation: focus-box 0.4s 1.3s linear both;
          animation: focus-box 0.4s 1.3s linear both;
}
.RedHotDeals{
  background: url(188256_us_cs_co_fy17q1w12_oa_graduation-event_728x90_vr_dod.png);
  width: 270px;
  height: 100px;
  left: -300px;
  top: 110px;
  background-repeat:no-repeat;
  -webkit-animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.0s forwards, RedHotDeals-anim1 .5s 11s forwards;
     -moz-animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.0s forwards, RedHotDeals-anim1 .5s 11s forwards;
       -o-animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.0s forwards, RedHotDeals-anim1 .5s 11s forwards;
          animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.0s forwards, RedHotDeals-anim1 .5s 11s forwards;
}

.RedHotDeals2{
  background: url(188256_us_cs_co_fy17q1w12_oa_graduation-event_728x90_vr_dod.png);
  width: 135px;
  height: 50px
  left: -300px;
  top: 110px;
  -webkit-animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.2s forwards, RedHotDeals-anim1 .5s 3.1s forwards, RedHotDeals-anim2 .5s 7s forwards;
  -moz-animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.2s forwards, RedHotDeals-anim1 .5s 3.1s forwards, RedHotDeals-anim2 .5s 7s forwards;
   -o-animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.2s forwards, RedHotDeals-anim1 .5s 3.1s forwards, RedHotDeals-anim2 .5s 7s forwards;
   animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.2s forwards, RedHotDeals-anim1 .5s 3.1s forwards, RedHotDeals-anim2 .5s 7s forwards;
}
.cta{
  top: 39px;
  left: 479px;
  font-size: 14px;
  line-height: 16px;
  padding: 7px 8px 8px 8px;
  font-weight: bold;
  background-color: #0085C3;
  border: solid 1px #0085C3;
  color: #FFFFFF;
  border-radius: 0px;
  opacity: 0;
  -webkit-animation: cta-anim .2s 1.4s both;
     -moz-animation: cta-anim .2s 1.4s both;
       -o-animation: cta-anim .2s 1.4s both;
          animation: cta-anim .2s 1.4s both;
}
/*******frane two css end*********/

/*******frane three css start*********/
.frame3text{
  top: -200px;
  left: 250px;
  width: 100px;
  font-size: 18px;
  line-height:19px;
  color: #0085C3;
  text-align:left;
  -webkit-animation: frame3text-anim-in .5s 4.1s both,frame3text-anim-out .4s 7.1s forwards;
     -moz-animation: frame3text-anim-in .5s 4.1s both,frame3text-anim-out .4s 7.1s forwards;
       -o-animation: frame3text-anim-in .5s 4.1s both,frame3text-anim-out .4s 7.1s forwards;
          animation: frame3text-anim-in .5s 4.1s both,frame3text-anim-out .4s 7.1s forwards;
}
/*******frane three css end*********/

/*******frane four css start*********/
.frame4text{
  top: -200px;
  left: 250px;
  width: 180px;
  font-size: 18px;
  line-height:19px;
  color: #0085C3;
  text-align:left;
  -webkit-animation: frame4text-anim-in .4s 7.1s both,frame4text-anim-out .4s 10.4s forwards;
     -moz-animation: frame4text-anim-in .4s 7.1s both,frame4text-anim-out .4s 10.4s forwards;
       -o-animation: frame4text-anim-in .4s 7.1s both,frame4text-anim-out .4s 10.4s forwards;
          animation: frame4text-anim-in .4s 7.1s both,frame4text-anim-out .4s 10.4s forwards;
}
/*******frane four css end*********/

/*******frane five css start*********/
.frame5text_title1{
    width: 219px;
    top: 44px;
    left: 91px;
    font-size: 18px;
    line-height: 19px;
    color: #444444;
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
.frame5text_title1 span {
	top:56px;
	font-size:9px;
	line-height:10px;
}
	
.product_desc{
	position:absolute;
  top: 44px;
  left: 313px;
  width: 220px;
  font-size: 9px;
  line-height: 10px;
  color: #FF7700;
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
.product_desc ul,li{
  position: relative;
  padding-bottom:3px;
}
.starting-at{
  position: absolute;
  top: 6px;
  left: 479px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 9px;
  line-height:10px;
  color: #444444;
  z-index: -0;
  width:110px;
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
.price-point1{
  position: absolute;
  top: 16px;
  left: 479px;
  width: 100px;
  font-weight:bold;
  font-size: 12px;
  line-height: 13px;
  color: #444444;
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
.price-point2{
  position: absolute;
  top: 15px;
  left: 486px;
  width:100px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight:bold;
 font-size: 18px;
  line-height:19px;
  color: #444444;
  z-index: -0;
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
.price-point3{
  position: absolute;
  top: 16px;
  left: 521px;
  width: 100px;
  font-weight:bold;
  font-size: 12px;
  line-height: 13px;
  color: #444444;
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
.dell_logo_white{
  top: 17px;
  left: 12px;
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
.product{
  top: 200px;
  left: 355px;
  -webkit-animation: product-anim .5s 11s both;
     -moz-animation: product-anim .5s 11s both;
       -o-animation: product-anim .5s 11s both;
          animation: product-anim .5s 11s both;
}
.pname{
  position: absolute;
  font-size: 9px;
  line-height:10px;
  color: #444444;
  top: 61px;
  left: -32px;
  width: 135px;
}

.product_desc ul,li,br{
  position: relative;
  padding-bottom:2px;
}
.frame5text{
	text-align:right;
  top:42px;
  width: 75px;
  font-size: 9px;
  line-height:10px;
  left: 569px;
  color: #444444;
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
.frame5text sup {
    position: absolute;
    top: 1px;
	
}
.Firefox .frame5text sup {
    left: 70px;
}
.final_text{
  top: 15px;
  left: 333px;
  width: 110px;
  font-size: 9px;
  line-height: 10px;
  color: #FF7700;
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
.RollOver{
  -webkit-animation: fade-out-back .3s 11.5s both;
     -moz-animation: fade-out-back .3s 11.5s both;
       -o-animation: fade-out-back .3s 11.5s both;
          animation: fade-out-back .3s 11.5s both;
}
#cta-plus {
  top: 63px;
  left: 480px;
  width: 96px;
  font-size: 9px;
  color: #fff;
  z-index: 9999999;
  -webkit-animation: cta 1s linear 11.5s both;
          -moz-animation: cta 1s linear 11.5s both;
            -o-animation: cta 1s linear 11.5s both;
       animation: cta 1s linear 11.5s both;
}

#legal{
  position: absolute;
  top: -200px;
  z-index: -2;
  background:#EEEEEE;
  margin: 10px 0px;
  width: 726px;
  height: 78px;
  opacity: 0.95;
}
#legal-text{
  position: absolute;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 11px;
  text-align:left;
  color:#444444;
  padding:10px;
  width: 725px;
}

.legal-anim-in{
  -webkit-animation: roll-over 0.5s ease-in both;
        -moz-animation: roll-over 0.5s ease-in both;
          -o-animation: roll-over 0.5s ease-in both;
       animation: roll-over 0.5s ease-in both;
}

.legal-anim-out{
  -webkit-animation: roll-out 0.25s ease-out both;
        -moz-animation: roll-out 0.25s ease-out both;
          -o-animation: roll-out 0.25s ease-out both;
       animation: roll-out 0.25s ease-out both;
}
.all-anim-stop *{
-webkit-animation-play-state:paused !important;
        -moz-animation-play-state:paused !important;
          -o-animation-play-state:paused !important;
     animation-play-state:paused !important;
}


/*******frane five css end*********/

/**************************Animation start***********************************/
@-webkit-keyframes banner-start {
  0%{background-color: #FFFFFF;}
  100%{background-color: #fff;}
}
@-moz-keyframes banner-start {
  0%{background-color: #FFFFFF;}
  100%{background-color: #fff;}
}
@-o-keyframes banner-start {
  0%{background-color: #FFFFFF;}
  100%{background-color: #fff;}
}
@keyframes banner-start {
  0%{background-color: #FFFFFF;}
  100%{background-color: #fff;}
}
@-webkit-keyframes banner-ani {
  0%{background-color: #eeeeee;}
  100%{background-color: #eeeeee;}
}
@-moz-keyframes banner-ani {
  0%{background-color: #eeeeee;}
  100%{background-color: #eeeeee;}
}
@-o-keyframes banner-ani {
  0%{background-color: #eeeeee;}
  100%{background-color: #eeeeee;}
}
@keyframes banner-ani {
  0%{background-color: #eeeeee;}
  100%{background-color: #eeeeee;}
}
@-webkit-keyframes fade-out {
  100%{opacity: 0;}
}
@-moz-keyframes fade-out {
  100%{opacity: 0;}
}
@-o-keyframes fade-out {
  100%{opacity: 0;}
}
@keyframes fade-out {
  100%{opacity: 0;}
}
@-webkit-keyframes fade-out-back {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@-moz-keyframes fade-out-back {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@-o-keyframes fade-out-back {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes fade-out-back {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@-webkit-keyframes fade-out-back-jsp {
  0%{opacity: 0;}
  100%{opacity: 1; color: #fff;}
}
@-moz-keyframes fade-out-back-jsp {
  0%{opacity: 0;}
  100%{opacity: 1; color: #fff;}
}
@-o-keyframes fade-out-back-jsp {
  0%{opacity: 0;}
  100%{opacity: 1; color: #fff;}
}
@keyframes fade-out-back-jsp {
  0%{opacity: 0;}
  100%{opacity: 1; color: #fff;}
}
@-webkit-keyframes RedHotDeals-anim {
	0%{left:-100px; top:-30px;}
  100%{left: 30px; top: 25px;}
}
@-moz-keyframes RedHotDeals-anim {
	0%{left:-100px; top:-30px;}
  100%{left: 30px; top: 25px;}
}
@-o-keyframes RedHotDeals-anim {
	0%{left:-100px; top:-30px;}
  100%{left: 30px; top: 25px;}
}
@keyframes RedHotDeals-anim {
	0%{left:-100px; top:-30px;}
  100%{left: 30px; top: 25px;}
}

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

@-webkit-keyframes RedHotDeals-anim1 {
 0%{left: 30px; top: 25px;}
  100%{left: 50px; top: -7px; transform:scale(0.7)}
}
@-moz-keyframes RedHotDeals-anim1 {
  0%{left: 30px; top: 25px;}
 100%{left: 50px; top: -7px; transform:scale(0.7)}
}
@-o-keyframes RedHotDeals-anim1 {
  0%{left: 30px; top: 25px;}
  100%{left: 50px; top: -7px; transform:scale(0.7)}
}
@keyframes RedHotDeals-anim1 {
  0%{left: 30px; top: 25px;}
  100%{left: 50px; top: -7px; transform:scale(0.7)}
}

@-webkit-keyframes RedHotDeals-anim2 {
  0%{opacity:1; left:11px; top:25px;}
  100%{opacity:0; left:-100px; top:-10px;}
}
@-moz-keyframes RedHotDeals-anim2 {
 	0%{opacity:1; left:11px; top:25px;}
  100%{opacity:0; left:-100px; top:-10px;}
}
@-o-keyframes RedHotDeals-anim2 {
	0%{opacity:1; left:11px; top:25px;}
  100%{opacity:0; left:-100px; top:-10px;}
}
@keyframes RedHotDeals-anim2 {
 	0%{opacity:1; left:11px; top:25px;}
  100%{opacity:0; left:-100px; top:-10px;}
}

@-webkit-keyframes RedHotDeals-anim3 {
  0%{opacity:0; left:-100px; top:-10px;}
	 5%{opacity:0; left:-100px; top:25px;}
	 50%{opacity:1; left:80px; top:25px;}
  100%{opacity:1; left:80px; top:25px;}
}
@-moz-keyframes RedHotDeals-anim3 {
 	 0%{opacity:0; left:-100px; top:-10px;}
	 5%{opacity:0; left:-100px; top:25px;}
	 50%{opacity:1; left:80px; top:25px;}
  100%{opacity:0; left:80px; top:25px;}
}
@-o-keyframes RedHotDeals-anim3 {
	 0%{opacity:0; left:-100px; top:-10px;}
	 5%{opacity:0; left:-100px; top:25px;}
	 50%{opacity:1; left:80px; top:25px;}
  100%{opacity:1; left:80px; top:25px;}
}
@keyframes RedHotDeals-anim3 {
 	 0%{opacity:0; left:-100px; top:-10px;}
	 5%{opacity:0; left:-100px; top:25px;}
	 50%{opacity:1; left:80px; top:25px;}
  100%{opacity:0; left:80px; top:25px;}
}


@-webkit-keyframes focus-box {
  0% {transform:scale(1);}
  100%{opacity: 0; transform:scale(0); z-index:2;}
}
@keyframes focus-box {
  0% {transform:scale(1);}
  100%{opacity: 0; transform:scale(0); z-index:2;}
}



@-webkit-keyframes cta-anim {
  100%{opacity: 1;}
}
@-moz-keyframes cta-anim {
  100%{opacity: 1;}
}
@-o-keyframes cta-anim {
  100%{opacity: 1;}
}
@keyframes cta-anim {
  100%{opacity: 1;}
}
@-webkit-keyframes frame3text-anim-in {
  100%{top: 12px;}
}
@-moz-keyframes frame3text-anim-in {
  100%{top: 12px;}
}
@-o-keyframes frame3text-anim-in {
  100%{top: 12px;}
}
@keyframes frame3text-anim-in {
  100%{top: 12px;}
}
@-webkit-keyframes frame3text-anim-out {
  0%{top: 12px;}
  100%{top: 100px;}
}
@-moz-keyframes frame3text-anim-out {
  0%{top: 12px;}
  100%{top: 100px;}
}
@-o-keyframes frame3text-anim-out {
  0%{top: 12px;}
  100%{top: 100px;}
}
@keyframes frame3text-anim-out {
  0%{top: 12px;}
  100%{top: 100px;}
}
@-webkit-keyframes frame4text-anim-in {
  100%{top: 12px;}
}
@-moz-keyframes frame4text-anim-in {
  100%{top: 12px;}
}
@-o-keyframes frame4text-anim-in {
  100%{top: 12px;}
}
@keyframes frame4text-anim-in {
  100%{top: 12px;}
}
@-webkit-keyframes frame4text-anim-out {
  0%{top: 12px;}
  100%{top: 100px;}
}
@-moz-keyframes frame4text-anim-out {
  0%{top: 12px;}
  100%{top: 100px;}
}
@-o-keyframes frame4text-anim-out {
  0%{top: 12px;}
  100%{top: 100px;}
}
@keyframes frame4text-anim-out {
  0%{top: 12px;}
  100%{top: 100px;}
}
@-webkit-keyframes product-anim {
  100%{top: 6px; -webkit-filter:blur(0); filter:blur(0);}
}
@-moz-keyframes product-anim {
  100%{top: 6px; filter:blur(0);}
}
@-o-keyframes product-anim {
  100%{top: 6px; filter:blur(0);}
}
@keyframes product-anim {
  100%{top: 6px; -webkit-filter:blur(0); filter:blur(0);}
}
@-webkit-keyframes cta {
  0% {opacity: 0; top: 473px; }
  1% {opacity: 0; top: 74px;}
  10%{ opacity: 1; top: 74px;}
  100%{opacity: 1; top: 74px;}
}
@-moz-keyframes cta {
  0% {opacity: 0; top: 473px;}
  1% {opacity: 0; top: 74px;}
  10%{ opacity: 1; top: 74px;}
  100%{opacity: 1; top: 74px;}
}
@-o-keyframes cta {
  0% {opacity: 0; top: 473px;}
  1% {opacity: 0; top: 74px;}
  10%{ opacity: 1; top: 74px;}
  100%{opacity: 1; top: 74px;}
}
@keyframes cta {
  0% {opacity: 0; top: 473px;}
  1% {opacity: 0; top: 74px;}
  10%{ opacity: 1; top:74px;}
  100%{opacity: 1; top:74px;}
}

@-webkit-keyframes roll-over {
  0% {top: -200px; display:none; z-index:-2;}
  95% {top: -200px; display:block; z-index:99999999;}
  100%{top: -10px; display:block; z-index:99999999;}
}
@-moz-keyframes roll-over {
   0% {top: -200px; display:none; z-index:-2;}
  95% {top: -200px; display:block; z-index:99999999;}
  100%{top: -10px; display:block; z-index:99999999;}
}
@-o-keyframes roll-over {
   0% {top: -200px; display:none; z-index:-2;}
  95% {top: -200px; display:block; z-index:99999999;}
  100%{top: -10px; display:block; z-index:99999999;}
}
@keyframes roll-over {
   0% {top: -200px; display:none; z-index:-2;}
  95% {top: -200px; display:block; z-index:99999999;}
  100%{top: -10px; display:block; z-index:99999999;}
}
@-webkit-keyframes roll-out {
  0% {top: -10px;}
  100%{top: -200px;}
}
@-moz-keyframes roll-out {
  0% {top: -10px;}
  100%{top: -200px;}
}
@-o-keyframes roll-out {
  0% {top: -10px;}
  100%{top: -200px;}
}
@keyframes roll-out {
  0% {top: -10px;}
  100%{top: -200px;}
}