body{
    background-color: #333;
}

body,
html,
* {
	font-family:Metropolis-Regular;
	
}


.headerlogo img{
  width: 123px;
  height: 33px;
  padding: 40px;
}

.container{
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;
}


/*-------------------Desktop-----------*/

@media (min-width: 1001px) {
  h1 {
  font-size: 1.7857em;
  line-height: 1.2;
  color: rgb(255, 255, 255);
  padding-top: 1px;
  text-align: center;
  margin-top: -1px;
  }
}

/*-------------------Mobile Width-----------*/

@media (max-width: 1000px) {

  h1{
      color: rgb(255, 255, 255);
      padding: 1px;
      font-size: 1.357em;
      line-height: 1.2;
      text-align: center;
      margin-top: -1px;
     
  }

}


/*-------------------Fonts-------------*/



@font-face {
	font-family: 'Metropolis-Regular';
	src: url(../css/fonts/WOFF/Roboto-Bold.ttf)
  }
  svg {
    max-width: 30%;
    max-height: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  svg path {
    fill: #ED7000;
  }


/*-------------------Animation--------------*/
  
  #rocket {
    
    animation-delay: 5s;
    -webkit-animation: shakes 1s linear infinite;
            animation: shakes 1s linear infinite;
  }
  @-webkit-keyframes shakes {
    10% {
      -webkit-transform: translate(3px, 5px);
              transform: translate(3px, 5px);
    }
    20% {
      -webkit-transform: translate(3px, 5px);
              transform: translate(3px, 5px);
    }
    30% {
      -webkit-transform: translate(2px, 1px);
              transform: translate(2px, 1px);
    }
    40% {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    50% {
      -webkit-transform: translate(4px, 4px);
              transform: translate(4px, 4px);
    }
    60% {
      -webkit-transform: translate(1px, 2px);
              transform: translate(1px, 2px);
    }
    70% {
      -webkit-transform: translate(1px, 3px);
              transform: translate(1px, 3px);
    }
    80% {
      -webkit-transform: translate(4px, 2px);
              transform: translate(4px, 2px);
    }
    90% {
      -webkit-transform: translate(5px, 4px);
              transform: translate(5px, 4px);
    }
    100% {
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
    }
  }
  @keyframes shakes {
    10% {
      -webkit-transform: translate(3px, 5px);
              transform: translate(3px, 5px);
    }
    20% {
      -webkit-transform: translate(3px, 5px);
              transform: translate(3px, 5px);
    }
    30% {
      -webkit-transform: translate(2px, 1px);
              transform: translate(2px, 1px);
    }
    40% {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    50% {
      -webkit-transform: translate(4px, 4px);
              transform: translate(4px, 4px);
    }
    60% {
      -webkit-transform: translate(1px, 2px);
              transform: translate(1px, 2px);
    }
    70% {
      -webkit-transform: translate(1px, 3px);
              transform: translate(1px, 3px);
    }
    80% {
      -webkit-transform: translate(4px, 2px);
              transform: translate(4px, 2px);
    }
    90% {
      -webkit-transform: translate(5px, 4px);
              transform: translate(5px, 4px);
    }
    100% {
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
    }
  }
  
  /*  */

  .area {
    margin-right: auto;
    margin-left: auto;
    display: block;
    width: 26%;
    height: 4%;
    top: -20px;

    min-width: 300px;
  
  }

  
  .mover, .mover1, .mover2, .mover3, .mover4 {
    background: #000000;
    border-radius: 50%;
  }
  .mover {
    width: 7px;
    height: 6px;
    margin-left:100%;
    background: #ED7000;
    animation: move 6s infinite ease-in-out;
  }
  @keyframes move {
    20%, 100% { opacity: 0; transform: translate(-240px, 280px); }
    0% { opacity: 0; }
    10% { opacity: 1; }
  }
  
  .mover2 {
    width: 6px;
    height: 7px;
    top:30px;
    margin-left:40%;
    background: #ED7000;
    animation: move2 2s infinite ease-in-out;
  }
  @keyframes move2 {
    20%, 100% { opacity: 0; transform: translate(-50px, 100px); }
    0% { opacity: 0; }
    10% { opacity: 1; }
  }
  
  .mover3 {
    width: 10px;
    height: 10px;
    margin-top:7%;
    margin-left:50%;
    background: #ccc;
    animation: move3 3.5s infinite ease-in-out;
  }
  @keyframes move3 {
    20%, 100% { opacity: 0; transform: translate(-100px, 150px); }
    0% { opacity: 0; }
    10% { opacity: 1; }
  }
  
  .mover4 {
    width: 10px;
    height: 10px;
    margin-left:90%;
    background: #000000;   
    animation: move4 4.5s infinite ease-in-out;
  }
  @keyframes move4 {
    20%, 100% { opacity: 0; transform: translate(-100px, 150px); }
    0% { opacity: 0; }
    0% { opacity: 0; }
    10% { opacity: 1; }
  }