/*-----------------------------------*/ 
/* Reset
/*-----------------------------------*/ 

*{
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
body{
  font-family: 'Roboto', sans-serif; color: #444444;
}
img{
  border: 0px;
}
sup {
	font-size: 8px;
	line-height: 10px;
}
a{
  text-decoration: none;
}

#ad{
   -webkit-user-select: none;
   user-select: none;
}
#banner{  
  width: 300px; 
  height: 250px;
  display: block;
  cursor: pointer;  
  overflow: hidden;
  position:absolute;
  visibility: visible;  
  border: 1px #444444 solid;
  background: #EEEEEE;
  color: #EEEEEE; 
}

#all-animation,
#frm,
#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;
   top: 0px;
   left: 0px;
   width:300px;
   height:250px;
   background:url(fallback_300x250.jpg);
   z-index: 900;
}
/*-----------------------------------*/
/* clickTAG                       */
/*-----------------------------------*/
#clickTAG {
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0;
   width: 100%;
   height: 100%;
   z-index: 9;
   cursor:pointer;
   margin: 0;
}

/*-----------------------------------*/
/* Common Code                       */
/*-----------------------------------*/
.logo {   
    top: -2px;
    right: 9px;
}

/*-----------------------------------*/ 
/* frm-1 Code
/*-----------------------------------*/ 

.frm1-product-1{
	top: 0px;
	left: 0px;
	position: absolute;
	-webkit-animation: frm-anim2 linear 7.2s  both;
            animation: frm-anim2 linear 7.2s  both;
}

.frm-1-text{
	left: 15px;
	top: 15px;
	width:250px;
	font-size: 18px;
	line-height: 20px;
	text-align:left;
	letter-spacing: 0.01em;
	color: #ffffff;
	position: absolute;
	opacity: 0;
	-webkit-animation: text-anim ease-in 3.5s  both;
            animation: text-anim ease-in 3.5s  both;
}
.frm-1-msg{
	position: absolute;
	left: 15px;
	font-size: 9px;
	line-height: 11px;
	bottom: 7px;
	text-align: center;
	color: #ffffff;
	z-index:2;

	-webkit-animation: frm-anim 7s linear 0s both;
            animation: frm-anim 7s linear 0s both;
}
/*-----------------------------------*/ 
/* frm-2 Code
/*-----------------------------------*/ 

.frm-2-text{
	left: 15px;
	top: 15px;
	width:250px;
	font-size: 18px;
	line-height: 20px;
	text-align:left;
	letter-spacing: 0.01em;
	color: #ffffff;
	position: absolute;
	opacity: 0;
	-webkit-animation: text-anim  3.5s ease-in 3.5s both;
            animation: text-anim  3.5s ease-in 3.5s both;
}

/*-----------------------------------*/ 
/* frm-3 Code
/*-----------------------------------*/ 
.frm-2-msg{
	position: absolute;
	left: 15px;
	font-size: 9px;
	line-height: 11px;
	bottom: 7px;
	text-align: center;
	color: #444444;
	z-index:2;

	-webkit-animation: frm-anim 3.5s linear 7s both;
            animation: frm-anim 3.5s linear 7s both;
}
.frm3-product{
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0;
	-webkit-animation: frm-anim 3.5s linear 7s both;
            animation: frm-anim 3.5s linear 7s both;
}
.prodcut-first {
	position: absolute;
	left: 34px;
	top: 67px;

	-webkit-animation: frm-anim 3.5s linear 7s both;
            animation: frm-anim 3.5s linear 7s both;
}
.frm-3-text{
	left: 15px;
	top: 15px;
	width:250px;
	font-size: 18px;
	line-height: 20px;
	text-align:left;
	letter-spacing: 0.01em;
	color: #444444;
	position: absolute;
	opacity: 0;
	-webkit-animation: text-anim 3.5s ease-in 7s both;
            animation: text-anim 3.5s ease-in 7s both;
}
.frm-4-msg{
	position: absolute;
	left: 28px;
	bottom: 5px;
	font-size: 9px;
	text-align: center;
	color: #444444;

	-webkit-animation: fade-in  .5s linear 7s both;
          animation: fade-in  .5s linear 7s both;
}
/*-----------------------------------*/ 
/* frm-4 Code
/*-----------------------------------*/ 

.frm4-product{
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0;
	-webkit-animation: fade-in  .5s linear 10.5s both;
            animation: fade-in  .5s linear 10.5s both;
}
.prodcut-last {
	position: absolute;
	right: 12px;
	top: 33px;
	-webkit-animation: fade-in  .5s linear 10.5s both;
	animation: fade-in  .5s linear 10.5s both;
}
.frm-4-text{
	left: 15px;
    top: 30px;
    font-size: 11px;
    line-height: 13px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #444444;
    position: absolute;
    opacity: 0;
    -webkit-animation: fade-in .4s ease-in 11s both;
    animation: fade-in .4s ease-in 11s both;
}

.pink-CTA-wrap{
	top: 64px;
	left: 15px;
	width: 96px;
	height: 24px;
	background-color:#ff00ff;
	text-align:center;
	position:absolute;
  -webkit-animation: fade-in-pink 0.4s 11.7s both;
          animation: fade-in-pink 0.4s 11.7s both;
}
.pink-CTA{
  font-size: 10px;
  line-height: 16px;
  font-weight:700;
  color:#ffffff;
  position: relative;
}

.cta{
    width: 96px;
    font-size: 12px;
    text-transform: uppercase;
	text-align:center;
    color: #CE1126;
    padding: 4px 5px 4px 5px;
    border: #CE1126 1px solid;
	position: absolute;
    top: 65px;
	left:15px;
	opacity:0;
	-webkit-animation: fade-in .4s linear 11.7s both;
            animation: fade-in .4s linear 11.7s both;
}
.dell-logo{
	position: absolute;
    bottom: 9px;
	left:14px;
	opacity:0;
	-webkit-animation: fade-in .4s linear 10.5s both;
            animation: fade-in .4s linear 10.5s both;
}
.intel-logo{
	position: absolute;
	bottom: 21px;
	right: 21px;
	opacity: 0;
	-webkit-animation: fade-in .4s linear 10.5s both;
	animation: fade-in .4s linear 10.5s both;
}

.pink-vendor-wrap{
  bottom: 6px;
  right: 6px;
  width:86px;
  height:50px;
  background-color:#ff00ff;
  text-align:center;
  position:absolute;
  -webkit-animation: fade-in-pink 0.5s 10.5s both;
          animation: fade-in-pink 0.5s 10.5s both;
}
.pink-vendor{
  font-size: 11px;
  line-height: 16px;
  font-weight:700;
  color:#ffffff;
  position: relative;
}

.vendor-text{
	right: 98px;
	bottom: 7px;
	font-size: 11px;
	line-height: 13px;
	text-align:right;
	color: #007DB8;
	position: absolute;
	opacity: 0;
	-webkit-animation: fade-in .4s ease-in 10.5s both;
            animation: fade-in .4s ease-in 10.5s both;
}

.frm-last-text{
	left: 15px;
    top: 15px;
    font-size: 11px;
    line-height: 13px;
    text-align: left;
    letter-spacing: 0.01em;
    color: #CE1126;
    position: absolute;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0;
    -webkit-animation: fade-in .4s ease-in 11s both;
    		animation: fade-in .4s ease-in 11s both;
}
.frm-4-msg{
	position: absolute;
	left: 101px;
	top: 177px;
	font-size: 11px;
	line-height: 11px;
	text-align: center;
	color: #444444;
	-webkit-animation: fade-in  .5s linear 10.5s both;
	animation: fade-in  .5s linear 10.5s both;
	width: 186px;
}


/*-----------------------------------*/
/* Animation                 */
/*-----------------------------------*/
@-webkit-keyframes fade-in-pink {
    0%{opacity: 0;}
  100%{opacity: .5;}
}
@keyframes fade-in-pink {
    0%{opacity: 0;}
  100%{opacity: .5;}
}

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

@-webkit-keyframes frm-anim2 {
	 0% {opacity: 0;}
	7% {opacity: 1;}
	93% {opacity: 1;}
   100% {opacity: 0;}
}
@keyframes frm-anim2 {
	 0% {opacity: 0;}
	7% {opacity: 1;}
	93% {opacity: 1;}
   100% {opacity: 0;}
}

@-webkit-keyframes text-anim {
	 0% {opacity: 0;}
	10% {opacity: 0;}
	20% {opacity: 1;}
	90% {opacity: 1;}
   100% {opacity: 0;}
}
@keyframes text-anim {
	 0% {opacity: 0;}
	10% {opacity: 0;}
	20% {opacity: 1;}
	90% {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 fade-in {
	 0% {opacity: 0;}
   100% {opacity: 1;}
}
@keyframes fade-in {
	 0% {opacity: 0;}
   100% {opacity: 1;}
}