/********Basic settings**********/
*{
    margin: 0;
    padding: 0;
	border:0 none;
}
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 {
	position:absolute;
   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{ 
position:absolute; 
  width: 300px; 
  height: 600px;
  display: block;
  cursor: pointer;  
  overflow: hidden;
  visibility: visible;  
  border: 1px #444444 solid;
  background: #eeeeee;
  color: #444; 
}
#all-animation, #frame-five, #frame-one, #frame-two, #frame-three, #frame-four{
  height: 100%;
  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: 9;
  top: 0;
  left: 0;
  }
/*******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{
	position:absolute;
  top:272px;
  left: 122px;
  -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:520px;
  left: 2px;
  opacity: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;
}
.dell-funding2{
	position:absolute;
  top:520px;
  left: 0px;
  opacity:0;
  -webkit-animation: fade-out-back .3s 11.5s forwards;
     -moz-animation: fade-out-back .3s 11.5s forwards;
       -o-animation: fade-out-back .3s 11.5s forwards;
          animation: fade-out-back .3s 11.5s forwards;
}
.jsp-message{
	position:absolute;
  top:560px;
  width: 150px;
  font-size: 11px;
  line-height:12px;
  left: 133px;
  color: #444;
  -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;
}
/*******frane one css end*********/

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

.focus{
	position:absolute;
  background: url(185985_us_cs_co_fy17q1w9_oa_spring-clearance_300x600_vr_focus.png);
  background-color: #DC5034;
  width: 300px;
  height: 600px;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-animation: focus-box .4s 1.3s both;
     -moz-animation: focus-box .4s 1.3s both;
       -o-animation: focus-box .4s 1.3s both;
          animation: focus-box .4s 1.3s both;
}
.RedHotDeals{
	position:absolute;
  background: url(185985_us_cs_co_fy17q1w9_oa_spring-clearance_300x600_vr_badge.jpg);
  background-repeat:no-repeat;
  width: 155px;
  height: 172px;
  left: -300px;
  top: 100px;
  -webkit-animation: RedHotDeals-anim 1.1s 1.7s both, RedHotDeals-anim1 .5s 4.1s forwards, RedHotDeals-anim2 .4s 7.1s forwards, RedHotDeals-anim3 .5s 11s forwards;
     -moz-animation: RedHotDeals-anim 1.1s 1.7s both, RedHotDeals-anim1 .5s 4.1s forwards, RedHotDeals-anim2 .4s 7.1s forwards, RedHotDeals-anim3 .5s 11s forwards;
       -o-animation: RedHotDeals-anim 1.1s 1.7s both, RedHotDeals-anim1 .5s 4.1s forwards, RedHotDeals-anim2 .4s 7.1s forwards, RedHotDeals-anim3 .5s 11s forwards;
          animation: RedHotDeals-anim 1.1s 1.7s both, RedHotDeals-anim1 .5s 4.1s forwards, RedHotDeals-anim2 .4s 7.1s forwards, RedHotDeals-anim3 .5s 11s forwards;
}
.cta{
	position:absolute;
  bottom: 11px;
  right: 11px;
  font-size: 14px;
  line-height: 16px;
  padding: 8px 10px 8px 11px;
  font-weight: bold;
  background-color: #ffffff;
  border: solid 1px #ffffff;
  color: #DC5034;
  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{
	position:absolute;
  top: 195px;
  left: -300px;
  width: 250px;
  font-size: 32px;
  line-height:33px;
  color: #fff;
  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{
	position:absolute;
  top: 195px;
  left: -300px;
  width: 250px;
  font-size: 32px;
  line-height:33px;
  color: #fff;
  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*********/
.dell_logo_white{
	position:absolute;
  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;
}
.product{
	position:absolute;
  top: 310px;
  left: -370px;
  opacity: 1;
  -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: 11px;
  line-height:12px;
  color: #fff;
    top: 132px;
    left: 26px;
  width: 165px;
}
.product_desc{
	position:absolute;
  top: 200px;
  left: 14px;
  width: 200px;
  font-size: 32px;
  line-height: 33px;
  color: #fff;
  -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;
  margin-bottom: 5px;
}
.price_point{
  position: absolute;
  top: 255px;
  left: 19px;
  width: 100px;
  font-size: 11px;
  line-height: 13px;
  color: #fff;
  -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;
}
.bold_price{
  position: absolute;
  top: 268px;
  left: 16px;
  font-weight: bold;
  font-size: 32px;
  line-height: 33px;
  color: #fff;
  padding-left: 9px;
  -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;
}

/*.bold_price sup{
  font-size: 18px;
  margin-left: -10px;
  margin-top: -5px;
}*/

.frame5text{
    position: absolute;
    bottom: 15px;
    width: 66px;
    font-size: 11px;
    line-height: 12px;
    left: 131px;
  color: #fff;
  -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 {
  position:absolute;
  top: 537px;
  left: 185px;
  width: 15px;
  font-size: 9px;
  z-index: 9999;
  color: #fff;
  -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: 300;
  background:#EEEEEE;
  margin: 10px 0px;
  width: 300px;
  height: 148px;
  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: #444;}
  100%{background-color: #fff;}
}
@-moz-keyframes banner-start {
  0%{background-color: #444;}
  100%{background-color: #fff;}
}
@-o-keyframes banner-start {
  0%{background-color: #444;}
  100%{background-color: #fff;}
}
@keyframes banner-start {
  0%{background-color: #444;}
  100%{background-color: #fff;}
}
@-webkit-keyframes banner-ani {
  0%{background-color: #fff;}
  100%{background-color: #DC5034;}
}
@-moz-keyframes banner-ani {
  0%{background-color: #fff;}
  100%{background-color: #DC5034;}
}
@-o-keyframes banner-ani {
  0%{background-color: #fff;}
  100%{background-color: #DC5034;}
}
@keyframes banner-ani {
  0%{background-color: #fff;}
  100%{background-color: #DC5034;}
}
@-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;}
}
@keyframes banner-ani {
  100%{background-color: #DC5034;}
}
@-webkit-keyframes RedHotDeals-anim {
  100%{left: 72px; top: 100px;}
}
@-moz-keyframes RedHotDeals-anim {
   100%{left: 72px; top: 100px;}
}
@-o-keyframes RedHotDeals-anim {
   100%{left: 72px; top: 100px;}
}
@keyframes RedHotDeals-anim {
   100%{left: 72px; top: 100px;}
}
@-webkit-keyframes RedHotDeals-anim1 {
  0%{left: 72px; top: 100px;}
  100%{left: 20px; top: -1px; -webkit-transform: scale(.5); transform: scale(.5);-webkit-transform-origin: top left;transform-origin: top left;}
}
@-moz-keyframes RedHotDeals-anim1 {
  0%{left: 72px; top: 100px;}
  100%{left: 20px; top: -1px; -moz-transform: scale(.5); transform: scale(.5);-moz-transform-origin: top left;transform-origin: top left;}
}
@-o-keyframes RedHotDeals-anim1 {
  0%{left: 72px; top: 100px;}
  100%{left: 20px; top: -1px; -o-transform: scale(.5); transform: scale(.5);-o-transform-origin: top left;transform-origin: top left;}
}
@keyframes RedHotDeals-anim1 {
  0%{left: 72px; top: 100px;}
  100%{left: 20px; top: -1px; -webkit-transform: scale(.5); -moz-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5);-webkit-transform-origin: top left;-moz-transform-origin: top left;-o-transform-origin: top left;transform-origin: top left;}
}


@-webkit-keyframes RedHotDeals-anim2 {
  0%{left: 20px; top: -1px;}
  100%{left: -100px; top: -1px; }
}
@-moz-keyframes RedHotDeals-anim2 {
  0%{left: 20px; top: -1px;}
  100%{left: -100px; top: -1px; }
}
@-o-keyframes RedHotDeals-anim2 {
  0%{left: 20px; top: -1px;}
  100%{left: -100px; top: -1px; }
}
@keyframes RedHotDeals-anim2 {
  0%{left: 20px; top: -1px;}
  100%{left: -100px; top: -1px;}
}


@-webkit-keyframes RedHotDeals-anim3 {
  0%{left: -100px; top: 83px; -webkit-transform: scale(.5); transform: scale(.5);-webkit-transform-origin: top left;transform-origin: top left;}
  100%{left: 20px; top: 83px; -webkit-transform: scale(.5); transform: scale(.5);-webkit-transform-origin: top left;transform-origin: top left;}
}
@-moz-keyframes RedHotDeals-anim3 {
  0%{left: -100px; top: 83px; -moz-transform: scale(.5); transform: scale(.5);-moz-transform-origin: top left;transform-origin: top left;}
  100%{left: 20px; top: 83px; -webkit-transform: scale(.5); transform: scale(.5);-webkit-transform-origin: top left;transform-origin: top left;}
}
@-o-keyframes RedHotDeals-anim3 {
  0%{left: -100px; top: 83px; -o-transform: scale(.5); transform: scale(.5);-o-transform-origin: top left;transform-origin: top left;}
  100%{left: 20px; top: 83px; -webkit-transform: scale(.5); transform: scale(.5);-webkit-transform-origin: top left;transform-origin: top left;}
}
@keyframes RedHotDeals-anim3 {
  0%{left: -100px; top: 83px; -webkit-transform: scale(.5); -moz-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5);-webkit-transform-origin: top left;-moz-transform-origin: top left;-o-transform-origin: top left;transform-origin: top left;}
  100%{left: 20px; top: 83px; -webkit-transform: scale(.5); transform: scale(.5);-webkit-transform-origin: top left;transform-origin: top left;}
}


@-webkit-keyframes focus-box {
  1%{opacity: 1;-webkit-transform: scale(3);transform: scale(3);}
  100%{opacity: 0;-webkit-transform: scale(.2);transform: scale(.2);}
}
@-moz-keyframes focus-box {
  1%{opacity: 1;-moz-transform: scale(3);transform: scale(3);}
  100%{opacity: 0;-moz-transform: scale(.2);transform: scale(.2);}
}
@-o-keyframes focus-box {
  1%{opacity: 1;-o-transform: scale(3);transform: scale(3);}
  100%{opacity: 0;-o-transform: scale(.2);transform: scale(.2);}
}
@keyframes focus-box {
  1%{opacity: 1;-webkit-transform: scale(3);-moz-transform: scale(3);-o-transform: scale(3);transform: scale(3);}
  100%{opacity: 0;-webkit-transform: scale(.2);-moz-transform: scale(.2);-o-transform: scale(.2);transform: scale(.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: 23px;}
}
@-moz-keyframes frame3text-anim-in {
  100%{left: 23px;}
}
@-o-keyframes frame3text-anim-in {
  100%{left: 23px;}
}
@keyframes frame3text-anim-in {
  100%{left: 23px;}
}
@-webkit-keyframes frame3text-anim-out {
  0%{left: 23px;}
  100%{left: 300px;}
}
@-moz-keyframes frame3text-anim-out {
  0%{left: 23px;}
  100%{left: 300px;}
}
@-o-keyframes frame3text-anim-out {
  0%{left: 23px;}
  100%{left: 300px;}
}
@keyframes frame3text-anim-out {
  0%{left: 23px;}
  100%{left: 300px;}
}
@-webkit-keyframes frame4text-anim-in {
  100%{left: 24.5px;}
}
@-moz-keyframes frame4text-anim-in {
  100%{left: 24.5px;}
}
@-o-keyframes frame4text-anim-in {
  100%{left: 24.5px;}
}
@keyframes frame4text-anim-in {
  100%{left: 24.5px;}
}
@-webkit-keyframes frame4text-anim-out {
  0%{left: 24.5px;}
  100%{left: 300px;}
}
@-moz-keyframes frame4text-anim-out {
  0%{left: 24.5px;}
  100%{left: 300px;}
}
@-o-keyframes frame4text-anim-out {
  0%{left: 24.5px;}
  100%{left: 300px;}
}
@keyframes frame4text-anim-out {
  0%{left: 24.5px;}
  100%{left: 300px;}
}
@-webkit-keyframes product-anim {
  100%{left: 45px; -webkit-filter:blur(0); filter:blur(0);}
}
@-moz-keyframes product-anim {
  100%{left: 45px; filter:blur(0);}
}
@-o-keyframes product-anim {
  100%{left: 45px; filter:blur(0);}
}
@keyframes product-anim {
  100%{left: 45px; -webkit-filter:blur(0); filter:blur(0);}
}
@-webkit-keyframes cta {
  0% {opacity: 0; left: 300px;}
  1%{ opacity: 1; left: 202px;}
  100%{opacity: 1; left: 202px;}
}
@-moz-keyframes cta {
  0% {opacity: 0; left: 300px;}
  1%{ opacity: 1; left: 202px;}
  100%{opacity: 1; left: 202px;}
}
@-o-keyframes cta {
  0% {opacity: 0; left: 300px;}
  1%{ opacity: 1; left: 202px;}
  100%{opacity: 1; left: 202px;}
}

@keyframes cta {
  0% {opacity: 0; left: 300px;}
  1%{ opacity: 1; left: 202px;}
  100%{opacity: 1; left: 202px;}
}
@-webkit-keyframes roll-over {
  0% {top: -200px;}
  100%{top: -10px;}
}
@-moz-keyframes roll-over {
  0% {top: -200px;}
  100%{top: -10px;}
}
@-o-keyframes roll-over {
  0% {top: -200px;}
  100%{top: -10px;}
}
@keyframes roll-over {
  0% {top: -200px;}
  100%{top: -10px;}
}
@-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;}
}

#banner * {
            animation-play-state: paused;
}
#banner.is-visible * {
            animation-play-state: running;
}