@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
html,
body {
  width: 100%;
  height: 100%;
  font: 700 1em "News Cycle", sans-serif;
  letter-spacing: .15em;
  color: white;
  background-color:black;
  /*background: url('/new3/images/world-image.jpg');*/
  overflow: hidden;
  margin: 0;
  
  
  

    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    
}

.starwars section {
  position: absolute;
  top: 36%;
  left: 50%;
  z-index: 1;
}
.starwars .start {
    font-size: 200%;
    width: 14em;
    margin: -4.5em 0 0 -7em;
    text-align: center;
    cursor: pointer;
}
.starwars .start span {
  color: #fff;
}
.starwars .intro {
  text-align:center;
  width: 15em;
  margin: 0 0 0 -7.5em;
  font-size: 150%;
  font-weight: 400;
  color: #fff;
  opacity: 0;
 -webkit-animation: intro 10s ease-out 78s forwards;
          animation: intro 10s ease-out 78s forwards;
  animation-fill-mode: forwards;  

         
}
.starwars .logo {
  opacity: 0;
  -webkit-animation: logo 12s ease-out 3s ;
          animation: logo 12s ease-out 3s ;
      /*  animation-fill-mode: forwards;  */

}
.starwars .logo svg {
  width: inherit;
}
.starwars .titles {
  width: 18em;
  margin: 0 0 0 -9em;
  top: auto;
  bottom: 0;
  height: 190em; /*50em*/
  font-size: 350%;
  text-align: center;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(280px) rotateX(10deg);
  pointer-events: none;
}
.starwars .titles > div {
  position: absolute;
  top: 100%;
  -webkit-animation: titles 70s linear 8s;
          animation: titles 70s linear 8s;
          cursor: pointer;
          pointer-events: none;
}
.starwars .titles > div > p {
  margin: 1.35em 0 1.85em 0;
  line-height: 1.35em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
  pointer-events: none;
}

@-webkit-keyframes intro {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes intro {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes logo {
  0% {
    width: 18em;
    margin: -9em 0 0 -9em;
    transform: scale(1.25);
    opacity: 1;
  }
  50% {
    opacity: 1;
    width: 18em;
    margin: -9em 0 0 -9em;
  }
    100% {
    transform: scale(0);
    opacity: 1;
    width: 18em;
    margin: -9em 0 0 -9em;
  }
  /*  50% {*/
  /*  opacity: 1;*/
  /*  width: 18em;*/
  /*  margin: -9em 0 0 -9em;*/
  /*}*/
  /*100% {*/
  /*  transform: scale(0.1);*/
  /*  opacity: 0;*/
  /*  width: 18em;*/
  /*  margin: -9em 0 0 -9em;*/
  /*}*/
}
@keyframes logo {
  0% {
    width: 18em;
    margin: -9em 0 0 -9em;
    transform: scale(1.25);
    opacity: 1;
  }
    50% {
    opacity: 1;
    width: 18em;
    margin: -9em 0 0 -9em;
  }
    100% {
    transform: scale(0);
    opacity: 1;
    width: 18em;
    margin: -9em 0 0 -9em;
  }
  /*50% {*/
  /*  opacity: 1;*/
  /*  width: 18em;*/
  /*  margin: -9em 0 0 -9em;*/
  /*}*/
  /*100% {*/
  /*  transform: scale(0.1);*/
  /*  opacity: 0;*/
  /*  width: 18em;*/
  /*  margin: -9em 0 0 -9em;*/
  /*}*/
}
@-webkit-keyframes titles {
  0% {
    top: 100%;
    opacity: 1;
  }
  /*90% {*/
  /*  opacity: 1;*/
  /*}*/
    
    95% {
    opacity: 1;
  }
  100% {
    top: 20%;
    opacity: 0;
  }
}
@keyframes titles {
  0% {
    top: 100%;
    opacity: 1;
  }
  /*90% {*/
  /*  opacity: 1;*/
  /*}*/
  95% {
    opacity: 1;
  }
  100% {
    top: 20%;
    opacity:0;
  }
}

@keyframes logomobile {
  0% {
    width: 18em;
    margin: -9em 0 0 -9em;
    transform: scale(1.25);
    opacity: 1;
  }
    50% {
    opacity: 1;
    width: 18em;
    margin: -9em 0 0 -9em;
  }
    100% {
    transform: scale(0);
    opacity: 1;
    width: 18em;
    margin: -9em 0 0 -9em;
  }
  /*50% {*/
  /*  opacity: 1;*/
  /*  width: 18em;*/
  /*  margin: -9em 0 0 -9em;*/
  /*}*/
  /*100% {*/
  /*  transform: scale(0.1);*/
  /*  opacity: 0;*/
  /*  width: 18em;*/
  /*  margin: -9em 0 0 -9em;*/
  /*}*/
}

@-webkit-keyframes logomobile {
  0% {
    width: 18em;
    margin: -9em 0 0 -9em;
    transform: scale(1.25);
    opacity: 1;
  }
  50% {
    opacity: 1;
    width: 18em;
    margin: -9em 0 0 -9em;
  }
    100% {
    transform: scale(0);
    opacity: 1;
    width: 18em;
    margin: -9em 0 0 -9em;
  }

}


.desktop_reload{
    display:block;
    position: absolute;
    top: 2%;
    right: 1%;
    z-index: 1;
    cursor: pointer;
}
.desktop_volume{
    display:block;
    position: absolute;
    top: 12%;
    right: 1%;
    z-index: 1000;
    opacity:0.7;
}
.mobile_volume{
    opacity:0.7;
}
.mobile_reload{
    display:none;
    z-index:100;
    cursor: pointer;
}
.firstlineintro{
    margin-top:0px;
}

.ios_vol{display:none !important;}
.ios{
      opacity:0.4;

}
@media screen and (max-width: 512px) {
    .starwars .titles {
        
        width: 9em;
        margin: 0 0 0 -4.5em;
        font-size: 250%;

        /*transform: perspective(525px) rotateX(16deg);  
                height: 300em;
*/
        transform: perspective(500px) rotateX(4deg);
        height: 300em;
    } 
    
.starwars .logo {
    
  opacity: 0;
  -webkit-animation: logomobile 9s ease-out 3s forwards;
          animation: logomobile 9s ease-out 3s forwards;

}


.starwars .titles > div {

  -webkit-animation: titles 67s linear 8s;
          animation: titles 67s linear 8s;
}

.starwars .intro {
z-index:100;
font-size: 120%;
 -webkit-animation: intro 10s ease-out 64s forwards;
          animation: intro 10s ease-out 64s forwards;

}
.mobile_reload{
    display:block;
    
}
.desktop_reload{
    display:none;
}
.desktop_volume{

    top: 2%;
}



}