/********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: 100;
   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: 300px; 
  height: 600px;
  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: 300px; 
  height: 600px;
  -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{
  z-index: 9999;
  position:absolute;
  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:272px;
  left: 122px;
  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{
  position:absolute;
  top:535px;
  left: 10px;
  z-index: 1;
  -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{
  top:566px;
  width: 130px;
  font-size: 10px;
  line-height:11px;
  left: 77px;
  color: #444;
  z-index: 1;
  -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: 300px;
  height: 525px;
  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_300x600_vr_dod.png);
  width: 400px;
  height: 125px;
  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 3.1s forwards, RedHotDeals-anim2 .5s 7s forwards, RedHotDeals-anim3 1s 11s forwards;
     -moz-animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.0s forwards, RedHotDeals-anim1 .5s 3.1s forwards, RedHotDeals-anim2 .5s 7s forwards, RedHotDeals-anim3 1s 11s forwards;
       -o-animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.0s forwards, RedHotDeals-anim1 .5s 3.1s forwards, RedHotDeals-anim2 .5s 7s forwards, RedHotDeals-anim3 1s 11s forwards;
          animation: RedHotDeals-anim .5s 1.7s forwards, RedHotDeals-rotate .8s 2.0s forwards, RedHotDeals-anim1 .5s 3.1s forwards, RedHotDeals-anim2 .5s 7s forwards, RedHotDeals-anim3 1s 11s forwards;
}

.RedHotDeals2{
  background: url(188256_us_cs_co_fy17q1w12_oa_graduation-event_300x600_vr_dod.png);
  width: 200px;
  height: 80px;
  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: 551px;
  left: 182px;
  font-size: 14px;
  line-height: 16px;
  padding: 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: 230px;
  left: -300px;
  width: 250px;
  font-size: 26px;
  line-height:27px;
  color: #0085C3;
  text-align:center;
  -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: 180px;
  left: -300px;
  width: 215px;
  font-size: 26px;
  line-height:27px;
  color: #0085C3;
  text-align:center;
  -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*********/
.frame5title1{
  top: 190px;
  left: 30px;
  width: 250px;
  font-size: 28px;
  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;
}
.dell_logo_white{
  top: 12px;
  left: 121px;
  -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{
  width: 286px;
  top: 175px;
  left: 12px;
  font-size: 26px;
  line-height:27px;
   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:45px;
	font-size:10px;
	line-height:11px;
}
	
.product{
  top: 295px;
  left: -370px;
  opacity: 1;
  -webkit-filter:blur(5px);
          filter:blur(5px);
  -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: 10px;
  line-height:11px;
  color: #444444;
  top: 126px;;
  left: 46px;
  width: 172px;
}
.pname sup {
    top: 1px;
}
.product_desc{
	position:absolute;
  top: 238px;
  left: 24px;
  width: 220px;
  font-size: 10px;
  line-height: 11px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  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:4px;
}
.starting-at{
  position: absolute;
  top: 245px;
  left: 15px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 11px;
  color: #444444;
  z-index: -0;
  width:130px;
  -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: 256px;
  left: 14px;
  width: 100px;
  font-weight:bold;
  font-size: 20px;
  line-height: 21px;
  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: 261px;
  left: 25px;
  width:100px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size: 26px;
  line-height: 27px;
  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: 255px;
  left: 70px;
  width: 100px;
  font-weight:bold;
  font-size: 20px;
  line-height: 21px;
  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{
  top:564px;
  width: 90px;
  font-size: 10px;
  line-height:11px;
  left: 76px;
  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: relative;
    top: 1px;
}
.Firefox .frame5text sup {
    position: relative;
    top: 1px;
	left: 1px;
}

.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 {
  position:absolute;
  top: 537px;
  left: 120px;
  width: 120px;
  font-size: 9px;
  z-index: 9999;
  color: #FFFFFF;
  -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: 300px;
  height: 300px;
  opacity: 0.95;
}
#legal-text{
  position: absolute;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 15px;
  text-align:left;
  color:#444444;
  padding:15px 15px;
  width: 300px;
}

.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: #EEEEEE;}
  100%{background-color: #fff;}
}
@-moz-keyframes banner-start {
  0%{background-color: #EEEEEE;}
  100%{background-color: #fff;}
}
@-o-keyframes banner-start {
 0%{background-color: #EEEEEE;}
  100%{background-color: #fff;}
}
@keyframes banner-start {
  0%{background-color: #EEEEEE;}
  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 RedHotDeals-anim {
	0%{left:-100px; top:-30px;}
  100%{left: -1px; top: 80px;}
}
@-moz-keyframes RedHotDeals-anim {
	0%{left:-100px; top:-30px;}
  100%{left: -1px; top: 80px;}
}
@-o-keyframes RedHotDeals-anim {
	0%{left:-100px; top:-30px;}
  100%{left: -1px; top: 80px;}
}
@keyframes RedHotDeals-anim {
	0%{left:-100px; top:-30px;}
  100%{left: -1px; top: 80px;}
}

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

@-webkit-keyframes RedHotDeals-anim1 {
  0%{left: -1px; top: 80px;}
  100%{left: -1px; top: 80px; /*-webkit-transform: scale(.6); -moz-transform: scale(.6); -o-transform: scale(.6); transform: scale(.6);*/-webkit-transform-origin: top left;-moz-transform-origin: top left;-o-transform-origin: top left;transform-origin: top left;}
}
@-moz-keyframes RedHotDeals-anim1 {
  0%{left: -1px; top: 80px;}
  100%{left: -1px; top: 80px; /*-webkit-transform: scale(.6); -moz-transform: scale(.6); -o-transform: scale(.6); transform: scale(.6);*/-webkit-transform-origin: top left;-moz-transform-origin: top left;-o-transform-origin: top left;transform-origin: top left;}
}
@-o-keyframes RedHotDeals-anim1 {
  0%{left: -1px; top: 80px;}
  100%{left: -1px; top: 80px; /*-webkit-transform: scale(.6); -moz-transform: scale(.6); -o-transform: scale(.6); transform: scale(.6);*/-webkit-transform-origin: top left;-moz-transform-origin: top left;-o-transform-origin: top left;transform-origin: top left;}
}
@keyframes RedHotDeals-anim1 {
  0%{left: -1px; top: 80px;}
  100%{left: -1px; top: 80px; /*-webkit-transform: scale(.6); -moz-transform: scale(.6); -o-transform: scale(.6); transform: scale(.6);*/-webkit-transform-origin: top left;-moz-transform-origin: top left;-o-transform-origin: top left;transform-origin: top left;}
}

/*@-webkit-keyframes RedHotDeals-anim2 {
  0%{opacity:1; left:60px; top:80px;}
  100%{opacity:0; left:-100px; top:-10px;}
}
@-moz-keyframes RedHotDeals-anim2 {
 	0%{opacity:1; left:60px; top:80px;}
  100%{opacity:0; left:-100px; top:-10px;}
}
@-o-keyframes RedHotDeals-anim2 {
	0%{opacity:1; left:60px; top:80px;}
  100%{opacity:0; left:-100px; top:-10px;}
}
@keyframes RedHotDeals-anim2 {
 	0%{opacity:1; left:60px; top:80px;}
  100%{opacity:0; left:-100px; top:-10px;}
}*/

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

@-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%{left: 28px;}
}
@-moz-keyframes frame3text-anim-in {
  100%{left: 28px;}
}
@-o-keyframes frame3text-anim-in {
  100%{left: 28px;}
}
@keyframes frame3text-anim-in {
  100%{left: 28px;}
}
@-webkit-keyframes frame3text-anim-out {
  0%{left: 45px;}
  100%{left: 300px;}
}
@-moz-keyframes frame3text-anim-out {
  0%{left: 45px;}
  100%{left: 300px;}
}
@-o-keyframes frame3text-anim-out {
  0%{left: 45px;}
  100%{left: 300px;}
}
@keyframes frame3text-anim-out {
  0%{left: 45px;}
  100%{left: 300px;}
}
@-webkit-keyframes frame4text-anim-in {
  100%{left: 40px;}
}
@-moz-keyframes frame4text-anim-in {
  100%{left: 40px;}
}
@-o-keyframes frame4text-anim-in {
  100%{left: 40px;}
}
@keyframes frame4text-anim-in {
  100%{left: 40px;}
}
@-webkit-keyframes frame4text-anim-out {
  0%{left: 40px;}
  100%{left: 300px;}
}
@-moz-keyframes frame4text-anim-out {
  0%{left: 40px;}
  100%{left: 300px;}
}
@-o-keyframes frame4text-anim-out {
  0%{left: 40px;}
  100%{left: 300px;}
}
@keyframes frame4text-anim-out {
  0%{left: 40px;}
  100%{left: 300px;}
}
@-webkit-keyframes product-anim {
  100%{left: 35px; -webkit-filter:blur(0); filter:blur(0);}
}
@-moz-keyframes product-anim {
  100%{left: 35px; filter:blur(0);}
}
@-o-keyframes product-anim {
  100%{left: 35px; filter:blur(0);}
}
@keyframes product-anim {
  100%{left: 35px; -webkit-filter:blur(0); filter:blur(0);}
}
@-webkit-keyframes cta {
  0% {opacity: 0; left: 573px;}
  1%{ opacity: 1; left: 182px;}
  100%{opacity: 1; left: 182px;}
}
@-moz-keyframes cta {
  0% {opacity: 0; left: 573px;}
  1%{ opacity: 1; left: 182px;}
  100%{opacity: 1; left: 182px;}
}
@-o-keyframes cta {
  0% {opacity: 0; left: 573px;}
  1%{ opacity: 1; left: 182px;}
  100%{opacity: 1; left: 182px;}
}

@keyframes cta {
  0% {opacity: 0; left: 573px;}
  1%{ opacity: 1; left: 182px;}
  100%{opacity: 1; left: 182px;}
}
@-webkit-keyframes roll-over {
  0% {top: -200px; z-index:-2; display:none;}
  95% {top: -10px; z-index:9; display:block;}
  100%{top: -10px; z-index:9; display:block;}
}
@-moz-keyframes roll-over {
  0% {top: -200px; z-index:-2; display:none;}
  95% {top: -10px; z-index:9; display:block;}
  100%{top: -10px; z-index:9; display:block;}
}
@-o-keyframes roll-over {
   0% {top: -200px; z-index:-2; display:none;}
  95% {top: -10px; z-index:9; display:block;}
  100%{top: -10px; z-index:9; display:block;}
}
@keyframes roll-over {
    0% {top: -200px; z-index:-2; display:none;}
  95% {top: -10px; z-index:9; display:block;}
  100%{top: -10px; z-index:9; display:block;}
}
@-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;}
}