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

*{
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
body{
  font-family: "MuseoSansForDell300", Trebuchet MS, Arial, Helvetica, sans-serif; color: #444444;
} 

img{
  border: 0px;
}
a{
  text-decoration: none;
}
@font-face {
  font-family:'MuseoSansForDell300'; 
  src:url('museosansfordell-300.woff') format('woff');          
}
.font-preloader{
  font-family:'MuseoSansForDell300';
  visibility:hidden;
  width:0; 
  height:0;
}
#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: 728px; 
  height: 90px;
  display: block;
  cursor: pointer;  
  overflow: hidden;
  position:absolute;
  visibility: visible;  
  border: 1px #444444 solid;
  background: #EEEEEE;
}

#all-animation,
#frame-1,
#frame-2,
#frame-3,
#frame-4,
#frame-5 {  
    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;
}

/*-----------------------------------*/ 
/* frame-1 Code                      */
/*-----------------------------------*/ 

.frame-1-text{
  top:30px;
  left: 140px;
  font-size: 24px;
  line-height: 26px;
  position:absolute;

  -webkit-animation: fade-out .5s 1.1s both;
          animation: fade-out .5s 1.1s both;
}

/*.frame-1-text span{
  font-size: 60px;
  line-height:70px;
  color: #71C6C1;
}*/

.frame-1-text-40{
	margin-left:15px;
    font-size: 60px;
	line-height:90px;
    color: #71C6C1;
	
	 -webkit-animation: fade-out .5s 1.1s both;
          animation: fade-out .5s 1.1s both;
}

.frame-1-text sup{
  font-size: 15px;
  line-height: 14px;
}

/*-----------------------------------*/ 
/* frame-2 Code                      */
/*-----------------------------------*/ 

.frame-2-text{
  width: 355px;
  font-size: 17px;
  line-height: 21px;
  text-align: center;
  top: 23px;
  position:absolute;

  -webkit-animation: fade-in 10.5s 1.5s both;
          animation: fade-in 10.5s 1.5s both;
}

.dote{
  left: 404px;
  bottom: -16px;
  z-index: 8;
  position:absolute;

  -webkit-animation: fade-in 10.5s 1.5s both;
          animation: fade-in 10.5s 1.5s both;
}

.table{
  left: 0px;
  bottom: 0px;
  position:absolute;

  -webkit-animation: fade-in 10.5s 1.5s both;
          animation: fade-in 10.5s 1.5s both;
}

.red_lock{
  top: 8px;
  left:362px;
  position:absolute;

  -webkit-animation: box-in 4s 1.5s both;
          animation: box-in 4s 1.5s both;
}

.frame-2-text-1{
  font-size: 15px;
  line-height: 17px;
  text-align: left;
  font-weight: bolder;
  color: #CE1126;
  top: 36px;
  position:absolute;

  -webkit-animation: color_text_anim 3s 1.5s both;
          animation: color_text_anim 3s 1.5s both;
}
.frame-2-text-2{
  font-size: 15px;
  line-height: 17px;
  text-align: left;
  font-weight: bolder;
  color: #CE1126;
  top: 25px;
  width:160px;
  left:90px;
  position:absolute;
  
  -webkit-animation: color_text_anim 3s 1.5s both;
          animation: color_text_anim 3s 1.5s both;	
}

.frame-2-text-1 span{
  font-size: 44px;
  font-weight: normal;
}

/*-----------------------------------*/ 
/* frame-3 Code                      */
/*-----------------------------------*/

.teal_set{
  top: 8px;
  left:362px;
  position:absolute;

  -webkit-animation: box-in 4s 5s both;
          animation: box-in 4s 5s both;
}

.frame-3-text{
  font-size: 15px;
  line-height: 17px;
  text-align: left;
  font-weight: bolder;
  color: #71C6C1;
  top: 36px;
  position:absolute;

  -webkit-animation: color_text_anim 3s 5.5s both;
          animation: color_text_anim 3s 5.5s both;
}

.frame-3-text-2{
  font-size: 15px;
  line-height: 17px;
  text-align: left;
  font-weight: bolder;
  color: #71C6C1;
  top: 25px;
  width:160px;
  left:90px;
  position:absolute;
  
  -webkit-animation: color_text_anim 3s 5.5s both;
          animation: color_text_anim 3s 5.5s both;
}


.frame-3-text span{
  font-size: 43px;
  font-weight: normal;
}

/*-----------------------------------*/ 
/* frame-4 Code                      */
/*-----------------------------------*/ 

.purple_bus{
  top: 8px;
  left:362px;
  position:absolute;

  -webkit-animation: box-in 3s 8.7s both;
          animation: box-in 3s 8.7s both;
}

.frame-4-text{
 font-size: 15px;
  line-height: 17px;
  text-align: left;
  font-weight: bolder;
  color: #6E2585;
  top: 36px;
  position:absolute;

  -webkit-animation: color_text_anim 3s 9s both;
          animation: color_text_anim 3s 9s both;
}

.frame-4-text-2{
  font-size: 15px;
  line-height: 17px;
  text-align: left;
  font-weight: bolder;
  color: #6E2585;
  top: 25px;
  width:160px;
  left:90px;
  position:absolute;
  
  -webkit-animation: color_text_anim 3s 9s both;
          animation: color_text_anim 3s 9s both;
}

.frame-4-text span{
  font-size: 43px;
  font-weight: normal;
}

/*-----------------------------------*/ 
/* frame-5 Code                      */
/*-----------------------------------*/

.dell-logo{
  left: 16px;
  top: 16px;
  position: absolute;

  -webkit-animation: fade-in-stop .5s 12s both;
          animation: fade-in-stop .5s 12s both;
}

.frame-5-text{
  width: 298px;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  left:50px;
  top: 25px;
  position: absolute;

  -webkit-animation: fade-in-stop .5s 12s both;
          animation: fade-in-stop .5s 12s both;
}

.frame-5-text sup{
  font-size: 8px;
}

.funding{
  right: 15px;
  bottom: 20px;
  position: absolute;

  -webkit-animation: fade-in-stop .5s 12s both;
          animation: fade-in-stop .5s 12s both;
}

.cta{
  font-size: 9px;
  font-weight: bolder;
  text-transform: uppercase;
  padding: 2px 8px 2px 8px;
  border: solid 2px #007DB8;
  color: #007DB8;
  bottom: 36px;
  left: 320px;
  position: absolute;

  -webkit-animation: fade-in-stop .5s 12s both;
          animation: fade-in-stop .5s 12s both;
}
.Firefox .cta{
	left:312px;
	}

.funding-text{
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  bottom: 30px;
  left: 440px;
  position: absolute;

  -webkit-animation: fade-in-stop .5s 12s both;
          animation: fade-in-stop .5s 12s both;
}

.funding-text sup{
  font-size: 8px;
}

/*-----------------------------------*/
/* Fade-out                          */
/*-----------------------------------*/

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

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

/*-----------------------------------*/
/* Fade-in                           */
/*-----------------------------------*/

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

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

/*-----------------------------------*/
/* Color Box                         */
/*-----------------------------------*/

@-webkit-keyframes box-in {
    0%{ opacity: 0; }
    20%{ opacity: 1; }
   95%{ opacity: 1; }
  100%{ opacity: 0; }
}

@keyframes box-in {
    0%{ opacity: 0; }
    20%{ opacity: 1; }
   90%{ opacity: 1; }
  100%{ opacity: 0; }
}

/*-----------------------------------*/
/* Color Box Text Animation          */
/*-----------------------------------*/

@-webkit-keyframes color_text_anim {
    0%{ transform:translate(765px,0px) scale(1); }
   30%{ transform:translate(460px,0px) scale(1); }
   70%{ transform:translate(460px,0px) scale(1); }
  100%{ transform:translate(765px,0px) scale(1); }
}

@keyframes color_text_anim {
    0%{ transform:translate(765px,0px) scale(1); }
   30%{ transform:translate(460px,0px) scale(1); }
   70%{ transform:translate(460px,0px) scale(1); }
  100%{ transform:translate(765px,0px) scale(1); }
}

/*-----------------------------------*/
/* Fade In Stop                      */
/*-----------------------------------*/

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

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