/********Basic settings**********/
*{
    margin: 0;
    padding: 0;
}
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;
}
sup {
  font-size: 9px;
  line-height: 9px;
}

@font-face {
	font-family: 'Roboto-Regular';
	src: url('Roboto-Regular.woff') format('woff');
}

.font-preloader {
	font-family: 'Roboto-Regular';
	visibility: hidden;
	width: 0;
	height: 0;
}
body {
	font-family: "Roboto-Regular", Trebuchet MS, Arial, Helvetica, sans-serif;
	color: #ffffff;
}

#clickTAG {
  position: absolute;
   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: 300px; 
  height: 250px; 
  display: block;
  cursor: pointer;  
  overflow: hidden;
  visibility: visible;  
  border: 1px #444444 solid;
  background: #000000;
  position: absolute;
}
#all-animation, #frame-five, #frame-one, #frame-two, #frame-three, #frame-four, #frame-five{
  height: 100%;
  width: 100%;
}

.ie-fallback{
  position: absolute;
  z-index: 99999;
  top: 0;
  left: 0;
}

/*******frame one css start*********/
.bg-frm-1{
  position: absolute;
  top:0px;
  left: 0px;

  -webkit-animation: fade-out 3s 0s both;
          animation: fade-out 3s 0s both;
}
.frm1-text-1{
  width: 298px;
  font-size: 24px;
  text-align: center;
  color: #ffffff;
  position: absolute;
  bottom: 26px;
  left:-280px;

  -webkit-animation: frm1-txt1 3s ease-in-out .5s both;
          animation: frm1-txt1 3s ease-in-out .5s both;
}
.frm1-text-1 span{
  color: #3dc6ef;
}

/*******frame one css end*********/

/*******frame two css start*********/
.bg-frm-2{
  position: absolute;
  top:0px;
  left: 0px;

  -webkit-animation: frm2 12s 2.5s both;
          animation: frm2 12s 2.5s both;
}
.glass-timer-frm-2{
  position: absolute;
  top: 88px;
  right: 17px;

  -webkit-animation: frm2 3s 3s both;
          animation: frm2 3s 3s both;
}
.frm2-text-1{
  font-size: 24px;
  text-align: left;
  color: #ffffff;
  position: absolute;
  top: 30px;
  left:-90px;

  -webkit-animation: frm2-txt1 3s ease-in-out 3.2s both;
          animation: frm2-txt1 3s ease-in-out 3.2s both;
}
.frm2-text-2{
  font-size: 80px;
  font-weight:bolder;
  text-align: left;
  color: #3dc6ef;
  position: absolute;
  top: 47px;
  left:17px;

  -webkit-animation: frm2-txt2 3s ease-in-out 3.4s both;
          animation: frm2-txt2 3s ease-in-out 3.4s both;
}
.frm2-text-3{
  font-size: 80px;
  font-weight:bolder;
  text-align: left;
  color: #007db8;
  position: absolute;
  top: 47px;
  left: 66px;

  -webkit-animation: frm2-txt2 3s ease-in-out 3.4s both;
          animation: frm2-txt2 3s ease-in-out 3.4s both;
}
.frm2-text-4{
  font-size: 24px;
  font-weight: normal;
  font-style: italic;
  color: #FFFFFF;
  position: absolute;
  top: 129px;
  left: 61px;

  -webkit-animation: frm2-txt2 3s ease-in-out 3.4s both;
          animation: frm2-txt2 3s ease-in-out 3.4s both;
}

/*******frame two css end*********/

/*******frame three css start*********/
.clock-frm-3{
  position: absolute;
  top: 92px;
  right: 17px;

  -webkit-animation: frm2 3s 6.4s both;
          animation: frm2 3s 6.4s both;
}
.frm3-text-1{
  font-size: 24px;
  text-align: left;
  color: #ffffff;
  position: absolute;
  top: 30px;
  left:-90px;

  -webkit-animation: frm2-txt1 3s ease-in-out 6.5s both;
          animation: frm2-txt1 3s ease-in-out 6.5s both;
}
.frm3-text-2{
  font-size: 80px;
  font-weight:bolder;
  text-align: left;
  color: #3dc6ef;
  position: absolute;
  top: 47px;
  left:17px;

  -webkit-animation: frm2-txt2 3s ease-in-out 6.6s both;
          animation: frm2-txt2 3s ease-in-out 6.6s both;
}
.frm3-text-3{
  font-size: 47px;
  text-align: left;
  color: #007db8;
  position: absolute;
  top: 53px;
  left: 110px;

  -webkit-animation: frm2-txt2 3s ease-in-out 6.6s both;
          animation: frm2-txt2 3s ease-in-out 6.6s both;
}
.frm3-text-4{
  font-size: 24px;
  font-weight: normal;
  font-style: italic;
  color: #FFFFFF;
  position: absolute;
  top: 129px;
  left: 61px;

  -webkit-animation: frm2-txt2 3s ease-in-out 6.6s both;
          animation: frm2-txt2 3s ease-in-out 6.6s both;
}
/*******frame three css end*********/

/*******frame four css start*********/
.power-frm-4{
  position: absolute;
  bottom:23px;
  right: 22px;

  -webkit-animation: frm2 3s 9.6s both;
          animation: frm2 3s 9.6s both;
}
.frm4-text-1{
  font-size: 40px;
  text-align: left;
  font-weight: bolder;
  color: #3dc6ef;
  position: absolute;
  top: 30px;
  left:-115px;

  -webkit-animation: frm4-txt1 3s ease-in-out 9.7s both;
          animation: frm4-txt1 3s ease-in-out 9.7s both;
}
.frm4-text-2{
  font-size: 22px;
  text-align: left;
  color: #FFFFFF;
  position: absolute;
  top: 74px;
  left:22px;

  -webkit-animation: frm2-txt2 3s ease-in-out 9.8s both;
          animation: frm2-txt2 3s ease-in-out 9.8s both;
}
.frm4-text-3{
  font-size: 20px;
  font-weight: bolder;
  letter-spacing: 5px;
  text-align: left;
  color: #007db8;
  position: absolute;
  top: 103px;
  left:22px;

  -webkit-animation: frm2-txt2 3s ease-in-out 9.8s both;
          animation: frm2-txt2 3s ease-in-out 9.8s both;
}
.frm4-text-4{
  font-size: 24px;
  line-height: 26px;
  text-align: left;
  color: #FFFFFF;
  position: absolute;
  top: 143px;
  left:22px;

  -webkit-animation: frm2-txt2 3s ease-in-out 9.8s both;
          animation: frm2-txt2 3s ease-in-out 9.8s both;
}
.frm4-text-4 sup{
  font-size: 14px;

}

/*******frame four css end*********/

/*******frame five css start*********/

.bg-frm-5{
  position: absolute;
  top:0px;
  left: 0px;

  -webkit-animation: bg-frm-5 3s 12.6s both;
          animation: bg-frm-5 3s 12.6s both;
}
.dellemc-last{
  position: absolute;
  top: 19px;
  left: 19px;

  -webkit-animation: fade-in 3s 12.6s both;
          animation: fade-in 3s 12.6s both;
}
.intel-logo-last{
  position: absolute;
  bottom: 19px;
  left: 19px;

  -webkit-animation: fade-in 3s 12.6s both;
          animation: fade-in 3s 12.6s both;
}
.frm5-text-1{
  font-size: 20px;
  line-height:23px;
  color: #ffffff;
  top: 53px;
  left: 17px;
  position: absolute;

  -webkit-animation: fade-in 3s 12.6s both;
          animation: fade-in 3s 12.6s both;
}
.product{
  position: absolute;
  top: 50px;
  right: -250px;
  -webkit-animation: fade-in 3s 12.6s both;
          animation: fade-in 3s 12.6s both;
}
.vendor-copy{
  font-size: 20px;
  line-height: 22px;
  color: #ffffff;
  z-index: 4;
  bottom: 10px;
  left: 110px;
  position: absolute;

  -webkit-animation: fade-in 3s 12.6s both;
          animation: fade-in 3s 12.6s both;
}
.cta{
  width: 96px;
  height: 23px;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  color: #3dc6ef;
  padding: 4px 5px 4px 5px;
  border: #3dc6ef 1px solid;
  position: absolute;
  top: 140px;
  left: 19px;
  opacity: 0;
  -webkit-animation: fade-in 3s 12.6s both;
          animation: fade-in 3s 12.6s both;
}
/**************plus animation**************/
#roll-cta {
  position:absolute;
  bottom: 5px;
  width: 15px;
  font-size: 9px;
  color: #444444;
  z-index: 9999;
  -webkit-animation: roll-cta 3s linear 12.6s both;
          animation: roll-cta 3s linear 12.6s both;
}
#legal{
  position: absolute;
  top: 180px;
  left: 8px;
  z-index: 9999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background:#444444;
  opacity:0;
  margin: 20px 15px;
  width: 270px;
  height: 126px;
  -webkit-transform:scale(0.5,0.5);
  transform:scale(0.5,0.5);
}
#legal-text{
  position: absolute;
  font-size: 11px;
  line-height: 13px;
  text-align:left;
  color: #eeeeee;
  padding:8px 10px;
}

.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;
}
/*******frame five css end*********/

/**Animation start**/
@-webkit-keyframes fade-in {
  0%{opacity: 0;}
  10%{opacity: 1;}
  100%{opacity: 1;}
}

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

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

@-webkit-keyframes frm1-txt1 {
  0%{opacity: 1; transform:translate(0,0);}
  5%{opacity: 1; transform:translate(278px,0);}
  65%{opacity: 1; transform:translate(278px,0);}
  75%{opacity: 0; transform:translate(278px,0);}
  100%{opacity: 0; transform:translate(278px,0);}
}
@keyframes frm1-txt1 {
  0%{opacity: 1; transform:translate(0,0);}
  5%{opacity: 1; transform:translate(278px,0);}
  65%{opacity: 1; transform:translate(278px,0);}
  75%{opacity: 0; transform:translate(278px,0);}
  100%{opacity: 0; transform:translate(278px,0);}
}

@-webkit-keyframes frm2-txt1 {
  0%{opacity: 1; transform:translate(0,0);}
  5%{opacity: 1; transform:translate(111px,0);}
  65%{opacity: 1; transform:translate(111px,0);}
  75%{opacity: 0; transform:translate(111px,0);}
  100%{opacity: 0; transform:translate(111px,0);}
}
@keyframes frm2-txt1 {
  0%{opacity: 1; transform:translate(0,0);}
  5%{opacity: 1; transform:translate(111px,0);}
  65%{opacity: 1; transform:translate(111px,0);}
  75%{opacity: 0; transform:translate(111px,0);}
  100%{opacity: 0; transform:translate(111px,0);}
}

@-webkit-keyframes frm4-txt1 {
  5%{opacity: 1; transform:translate(135px,0);}
  65%{opacity: 1; transform:translate(135px,0);}
  75%{opacity: 0; transform:translate(135px,0);}
  100%{opacity: 0; transform:translate(135px,0);}
}
@keyframes frm4-txt1 {
  0%{opacity: 1; transform:translate(0,0);}
  5%{opacity: 1; transform:translate(135px,0);}
  65%{opacity: 1; transform:translate(135px,0);}
  75%{opacity: 0; transform:translate(135px,0);}
  100%{opacity: 0; transform:translate(135px,0);}
}

@-webkit-keyframes frm2 {
  0%{opacity: 0;}
  5%{opacity: 1;}
  90%{opacity: 1;}
  100%{opacity: 0;}
}
@keyframes frm2 {
  0%{opacity: 0;}
  5%{opacity: 1;}
  90%{opacity: 1;}
  100%{opacity: 0;}
}
@-webkit-keyframes bg-frm-5 {
  0%{opacity: 0;}
  5%{opacity: 1;}
  90%{opacity: 1;}
  100%{opacity: 1;}
}
@keyframes bg-frm-5 {
  0%{opacity: 0;}
  5%{opacity: 1;}
  90%{opacity: 1;}
  100%{opacity: 1;}
}

@-webkit-keyframes frm2-txt2 {
  0%{opacity: 0;}
  20%{opacity: 1;}
  65%{opacity: 1;}
  75%{opacity: 0;}
  100%{opacity: 0;}
}
@keyframes frm2-txt2 {
  0%{opacity: 0;}
  20%{opacity: 1;}
  65%{opacity: 1;}
  75%{opacity: 0;}
  100%{opacity: 0;}
}
@-webkit-keyframes roll-cta {
  0% {opacity: 0; left: 300px;}
  1%{ opacity: 1; left: 272px;}
  50%{ opacity: 1; left: 272px;}
  100%{opacity: 1; left: 272px;}
}
@keyframes roll-cta {
  0% {opacity: 0; left: 300px;}
  1%{ opacity: 0; left: 272px;}
  2%{ opacity: 1; left: 272px;}
  100%{opacity: 1; left: 272px;}
}
@-webkit-keyframes roll-over {
  0% {-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5); opacity: 0; top: 110px; left: 65px;}
  100%{-webkit-transform:scale(1,1);transform:scale(1,1); opacity:.9; top: 80px; left: 0px; }
}
@keyframes roll-over {
  0% {-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5); opacity: 0; top: 110px; left: 65px;}
  100%{-webkit-transform:scale(1,1);transform:scale(1,1); opacity:.9; top: 80px; left: 0px; }
}

@-webkit-keyframes roll-out {
  0% {-webkit-transform:scale(1,1);transform:scale(1,1); opacity:.9; top: 80px; left: 0px; }
  100%{-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5); opacity: 0; top: 110px; left: 65px;}
}

@keyframes roll-out {
  0% {-webkit-transform:scale(1,1);transform:scale(1,1); opacity:.9; top: 80px; left: 0px; }
  100%{-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5); opacity: 0; top: 110px; left: 65px;}
}