/********Basic settings**********/
*{
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
body{
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	color: #444444;
}
img{
	border: 0px;
}

a{
	text-decoration: none;
}



#container{
	position:absolute;
	background:#000;
	width:300px;
	height:600px;
	overflow:hidden;
	visibility:hidden;
}
.is-visible {
	visibility: visible !important;
}

#container * {
	animation-play-state: paused !important;
}

#container.is-visible * {
	animation-play-state: running !important;
}

#ad{
	-moz-user-select: -moz-none;
	-khtml-user-select: 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;
	position:absolute;
	visibility: visible;
	border: 1px #444444 solid;
	background: #6e2585;
	color:#444444;
}
#all-animation,
#frm-1,
#frm-2,
#frm-3,
#frm-4,
#frm-5,
#frm-6 {
	top: 0px;
	width: 100%;
	height: 100%;
}
#banner * {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}
#banner.is-visible * {
    -webkit-animation-play-state: running;
            animation-play-state: running;
}
/* ie-fallback */
.ie-fallback{
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
}
/* clickTAG   */
#clickTAG {
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0;
   width: 100%;
   height: 100%;
   z-index: 9;
   cursor:pointer;
   margin: 0;
}
/* START:frm-1*/

.dell-logo{
  top:10px;
  z-index: 2;
  right: 10px;
  position:absolute;
	-webkit-animation: fade-InDown 0.4s .2s  both;
          animation:  fade-InDown 0.4s .2s both;
}
.lady-img{
  top:0px;
  left: 0px;
  position:absolute;
	-webkit-animation: fade-in 0.4s 0s  both;
          animation:  fade-in 0.4s 0s both;
}
.frm-1-text{
	position: absolute;
	top:190px;
	width:280px;
	left: 10px;
	text-align:left;
	opacity:0;
	z-index:3;
	font-size:14px;
    color: #ffffff;
    -webkit-animation: fade-InDown .5s .8s  both;
    animation: fade-InDown .5s .8s both;
}
.frm-2-text {
	position: absolute;
	bottom: 90px;
	left:0px;
	width:300px;
	font-size: 21px;
	text-align:center;
	opacity:0;
	z-index: 3;
	
  color: #ffffff;
	text-transform:uppercase;
	-webkit-animation: fadeInDown 5.2s 2.3s both;
	animation: fadeInDown 5.2s 2.3s both;
}
.product1{
	opacity: 0;
	top:20px;
	left: 0px;
	z-index: 2;
	position:absolute;
	-webkit-animation: fadeInRight 5.2s  1.2s both;
      animation: fadeInRight 5.2s  1.2s both;
}
.frm-3-text {
	position: absolute;
	bottom: 35px;
	left:0px;
	width:300px;
	font-size: 13px;
	line-height: 15px;
	letter-spacing: 1px;
	color:#fff;
	z-index: 3;
	opacity:0;
	text-align:center;
	-webkit-animation: fadeInUp 5.2s 2.5s  both;
		  animation: fadeInUp 5.2s 2.5s both;
}
.frm-4-text {
	position: absolute;
	bottom: 265px;
	left:5px;
	text-align: center;
	font-size: 9px;
	line-height: 11px;
	letter-spacing: 1px;
	color:#fff;
	z-index: 3;
	opacity:0;
	-webkit-animation: fadeInLeft 3.3s 1.5s  both;
		  animation: fadeInLeft 3.3s 1.5s both;
}
.frm-5-text {
	position: absolute;
	bottom: 265px;
	right:20px;
	font-size: 9px;
	line-height: 11px;
	text-align: center;
	color:#fff;
	z-index: 3;
	opacity:0;
	-webkit-animation: fadeInRight 3.5s 1.8s  both;
		  animation: fadeInRight 3.5s 1.8s both;
}
.frm-6-text {
	position: absolute;
	bottom: 200px;
	left:0px;
	width:300px;
	font-size: 9px;
	line-height: 11px;
	letter-spacing: 1px;
	text-align: center;
	color:#fff;
	z-index: 3;
	opacity:0;
	-webkit-animation: fadeInLeft 3.8s 2.1s  both;
		  animation: fadeInLeft 3.8s 2.1s both;
}

.frm-6-text1 {
	position: absolute;
	bottom: 200px;
	left:0px;
	width:300px;
	font-size: 12px;
	line-height: 11px;
	text-align: center;
	color:#fff;
	z-index: 3;
	opacity:0;
	-webkit-animation: fadeIn-Right .4s  7.8s both;
    animation: fadeIn-Right .4s  7.8s both;
}

.product2{
  opacity: 0;
  top:0px;
  left: 0px;
  z-index: 2;
  position:absolute;
  -webkit-animation: fadeIn-Right .4s  7.8s both;
  animation: fadeIn-Right .4s  7.8s both;
}
.frm-7-text {
	position: absolute;
	bottom: 152px;
	left:0px;
	z-index: 2;
	opacity:0;
	-webkit-animation: fade-InUp .4s 8.1s  both;
		  animation: fade-InUp .4s 8.1s both;
}
.frm-8-text {
	position: absolute;
	top: 410px;
	left:0px;
	width:300px;
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-align: center;
	color:#444444;
	z-index: 3;
	opacity:0;
	text-transform:uppercase;
	-webkit-animation: fade-InUp .4s 8.4s  both;
		  animation: fade-InUp .4s 8.4s both;
}

.cta-wrap{
	text-align: center;
	opacity: 0;
	position:absolute;
	bottom:80px;
	left:100px;
	background: #fff;
	/* text-transform:uppercase;
	text-decoration:underline; */
	z-index:3;
	-webkit-animation: fade-in .4s 8.4s  both;
		  animation: fade-in .4s 8.4s both;
}
.cta{
	position: relative;
	padding: 8px 17px 8px 17px;
	font-size: 14px;
	line-height: 14px;
	color:#682d81;
}
.frm-logo-img{
	position: absolute;
	bottom: 10px;
	height:53px;
	right:10px;
	opacity:0;
	width:107px;
	z-index:3;
	  text-align: center;
	-webkit-animation: fade-InUp .4s 8.7s  both;
		  animation: fade-InUp .4s 8.7s both;
}

.intel_text {
	position: absolute;
	bottom: 10px;
	right:130px;
	font-size: 11px;
	
	line-height: 14px;
	text-align: right;
	color:#fff;
	z-index: 4;
	opacity:0;
	-webkit-animation: fade-InUp .4s 8.7s  both;
		  animation: fade-InUp .4s 8.7s both;
}

.intel_text2 {
	position: absolute;
	bottom: 125px;
	font-size: 11px;	
	line-height: 14px;
	text-align: center;
	width: 300px;
	color:#fff;
	z-index: 4;
	opacity:0;
	-webkit-animation: fade-InUp .4s 8.7s  both;
		  animation: fade-InUp .4s 8.7s both;
}

/* #roll-cta {
	position: absolute;
	bottom: 105px;
	left: 0px;
	width:300px;
	text-align:center;
	font-size: 9px;
	
	color: #4d4d4f;
	z-index: 99;
	-webkit-animation: fade-in .4s 4s  both;
          animation: fade-in .4s 4s both;
}

#legal{
  position: absolute;
  top: -200px;
  z-index: 999;
  margin: 10px 0px;
  margin: 10px 0px;
  width: 300px;
  height: 31px;
  opacity: 1;
}

#legal-text{
	  -webkit-animation-delay:4.5s;
  position: absolute;
  font-size:12px;
  line-height: 15px;
  text-align:left;
  background-color:#ffffff;
  color:#4d4d4f;
  padding:5px;
  width: 300px;
  z-index:10000;
  opacity:0;
  	-webkit-animation: fade-in .4s 4.5s  both;
          animation: fade-in .4s 4.5s both;
} */
.reply-wrap{
	top: 11px;
	left: 10px;
	opacity: 0;
	position: absolute;
	z-index: 10;
	-webkit-animation: fade-in .4s 9s  both;
          animation: fade-in .4s 9s both;
}
#replay {
	position: absolute;
	height: 13px;
	left: -6px;
	top: -10px;
	width: 12px;
	cursor: pointer;
	z-index: 20000;
	-webkit-animation: last-fade-In 3s linear 9s both;
	animation: last-fade-In 3s linear 9s both;
	}


.legal-anim-in{
  -webkit-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;
       animation: roll-out 0.25s ease-out both;
}
.all-anim-stop *{
-webkit-animation-play-state:paused !important;
     animation-play-state:paused !important;
}




/* ENDfrm-5*/

/* START:animation*/

@-webkit-keyframes dell-logo {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes dell-logo {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}

@-webkit-keyframes intel-logo {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes intel-logo {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}




@-webkit-keyframes frm-1-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes frm-1-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}

@-webkit-keyframes beginnings-img {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes beginnings-img {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}

@-webkit-keyframes frm-2-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes frm-2-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}

@-webkit-keyframes frm-3-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes frm-3-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}


@-webkit-keyframes frm-4-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes frm-4-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}

@-webkit-keyframes roll-cta {
  0% {opacity: 0; left: 150px;}
  1% {opacity: 0; left: 150px;}
  10%{ opacity: 1; left: 150px;}
  100%{opacity: 1; left: 150px;}
}

@keyframes roll-cta {
  0% {opacity: 0; left: 150px;}
  1% {opacity: 0; left: 150px;}
  10%{ opacity: 1; left: 150px;}
  100%{opacity: 1; left: 150px;}
}

@-webkit-keyframes frm-5-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes frm-5-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}

@-webkit-keyframes frm-6-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes frm-6-text {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}

@-webkit-keyframes product-1 {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}
@keyframes product-1 {
  0%{opacity:0;}
  10%{opacity:0;}
  15%{opacity:0;}
  97%{opacity:0;}
  100%{opacity:1;}
}

@-webkit-keyframes fadeInOut {
  0%{opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{opacity:0;}
}
@keyframes fadeInOut {
  0%{opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{opacity:0;}
}


@-webkit-keyframes fade-out {
  0%{opacity: 1;}
  100%{opacity: 0;}
}
@keyframes fade-out {
  0%{opacity: 1;}
  100%{opacity: 0;}
}

@-webkit-keyframes fade-in {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes fade-in {
  0%{opacity: 0;}
  100%{opacity: 1;}
}



@-webkit-keyframes roll-over {
  0% {opacity: 0; top: -200px;}
  100%{top: -10px;}
}
@keyframes roll-over {
  0% {opacity: 0; top: -200px;}
  100%{top: -10px;}
}


@-webkit-keyframes roll-out {
  0% {top: -10px;}
  100%{top: -200px;}
}
@keyframes roll-out {
  0% {top: -10px;}
  100%{top: -200px;}
}

@-webkit-keyframes rollover_btn {
  0% {opacity: 0; left: 220px;}
  1% {opacity: 0; left: 220px;}
  10%{ opacity: 0; left: 220px;}
  100%{opacity: 1; left: 220px;}
}

@keyframes rollover_btn {
  0% {opacity: 0; left: 220px;}
  1% {opacity: 0; left: 220px;}
  10%{ opacity: 0; left: 220px;}
  100%{opacity: 1; left: 220px;}
}


@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
	10% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
	90% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
         -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }
    10% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
	90% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
	100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }
}

@-webkit-keyframes fadeIn-Right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeIn-Right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }
	100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    10% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
	90% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
	100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    10% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
	90% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
	100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
	10% {
        oopacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
	90% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
	10% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
	90% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    10% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
	90% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
	100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    10% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
	90% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
	100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }
}
@-webkit-keyframes fade-InUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
	100% {
        oopacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
@keyframes fade-InUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
	100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}
@-webkit-keyframes fade-InDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fade-InDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}


@-webkit-keyframes fadeIn-Left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeIn-Left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}