/*-----------------------------------*/ 
/* 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: 300px; 
  height: 600px;
  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:227px;
  left: 24px;
  font-size: 24px;
  line-height: 34px;
  position:absolute;

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

.frame-1-text span{
  font-size: 62px;
  color: #71C6C1;
}

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

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

.frame-2-text{
  width: 298px;
  font-size: 22px;
  line-height: 24px;
  text-align: center;
  top: 107px;
  position:absolute;

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

.dote{
  left: 146px;
  bottom: 264px;
  z-index: 8;
  position:absolute;

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

.table{
  left: -2px;
  bottom: 160px;
  position:absolute;

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

.red_lock{
  top: 195px;
  left:73px;
  position:absolute;

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

.frame-2-text-1{
  font-size: 18px;
  line-height: 20px;
  text-align:center;
  font-weight: bolder;
  color: #CE1126;
  top: 402px;
  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: 48px;
  font-weight: normal;
}

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

.teal_set{
  top: 195px;
  left:73px;
  position:absolute;

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

.frame-3-text{
  font-size: 18px;
  line-height: 20px;
  text-align: center;
  font-weight: bolder;
  color: #71C6C1;
  top: 402px;
  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: 48px;
  font-weight: normal;
}

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

.purple_bus{
  top: 195px;
  left:73px;
  position:absolute;

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

.frame-4-text{
  font-size: 18px;
  line-height: 20px;
  text-align: center;
  font-weight: bolder;
  color: #6E2585;
  top: 402px;
  position:absolute;

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

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

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

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

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

.frame-5-text{
  width: 298px;
  font-size: 19px;
  line-height: 22px;
  text-align: center;
  top: 167px;
  position: absolute;

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

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

.funding{
  left: 114px;
  bottom: 149px;
  position: absolute;

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

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

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

.Firefox .cta{
	left:82px;
	}

.funding-text{
  width: 298px;
  font-size: 19px;
  line-height: 22px;
  text-align: center;
  bottom: 59px;
  position: absolute;

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

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

/*-----------------------------------*/
/* 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(310px,0px) scale(1); }
   30%{ transform:translate(68px,0px) scale(1); }
   70%{ transform:translate(68px,0px) scale(1); }
  100%{ transform:translate(310px,0px) scale(1); }
}

@keyframes color_text_anim {
    0%{ transform:translate(310px,0px) scale(1); }
   30%{ transform:translate(68px,0px) scale(1); }
   70%{ transform:translate(68px,0px) scale(1); }
  100%{ transform:translate(310px,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; }
}