* {
  box-sizing: border-box; }

header {
  width: 100%;
  height: 200px;
  margin-bottom: 3rem;
  background-color: #0F2555;
  display: flex;
  justify-content: space-around;
  align-items: center; }
  header .logo {
    max-width: 175px;
    width: 100%; }

#text {
  animation: asds 0.1s;
  animation-iteration-count: 50; }

#rocketBody, #engine {
  animation: landing 5s forwards; }

#leftLeg {
  animation: landing 5s forwards; }

#rightLeg {
  animation: landing 5s forwards; }

.cls-5, .cls-6 {
  opacity: 1;
  animation: engines 0.2s forwards;
  animation-delay: 5.2s;
  animation-iteration-count: 2; }

@keyframes asds {
  0% {
    transform: rotate(1deg);
    transform-origin: 50% 50% 0; }
  50% {
    transform: rotate(-1deg);
    transform-origin: 50% 50% 0; }
  100% {
    transform: rotate(1deg);
    transform-origin: 50% 50% 0; } }
@keyframes landing {
  0% {
    transform: translateY(-200px); }
  100% {
    transform: translateY(10px); } }
@keyframes engines {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.net {
  background-color: #5B709F; }

.confirmed {
  background-color: #0F2555; }

body {
  margin: 0;
  padding: 0;
  font-family: "niveau-grotesk", sans-serif;
  font-weight: 300; }

#container {
  width: 100%;
  margin: 0; }

.tar {
  text-align: right; }

h1 {
  text-align: center;
  color: #0F2555;
  text-transform: uppercase; }

.sort-launches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; }
  .sort-launches button {
    margin: 10px;
    font-size: 0.9rem;
    line-height: 1;
    padding: 5px 10px;
    height: 30px;
    background-color: #DFE4E9;
    color: #0F2555;
    border: 1px solid #0F2555;
    border-radius: 3px;
    outline: none;
    cursor: pointer; }
    .sort-launches button:hover {
      background-color: #0F2555;
      color: #DFE4E9; }

button.on {
  color: #fff;
  background-color: #0F2555; }

.launches {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto; }
  .launches .launch {
    display: flex;
    flex-wrap: wrap;
    width: calc(50% - 1rem);
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    color: #e6e6e6;
    border-radius: 4px;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.19) !important; }
    @media (max-width: 800px) {
      .launches .launch {
        width: 100%; } }
    .launches .launch p {
      margin: 0.5rem 0 0 0; }
    .launches .launch .top-info {
      display: flex;
      justify-content: space-between;
      width: 100%; }
    .launches .launch .agency {
      font-size: 0.8rem;
      width: 60%; }
    .launches .launch .webcast {
      width: 40%; }
      .launches .launch .webcast.noVid {
        font-size: 0.8rem; }
      .launches .launch .webcast a {
        text-decoration: none;
        color: #e6e6e6; }
        .launches .launch .webcast a:hover {
          color: #B5C1DC; }
      .launches .launch .webcast a img {
        height: 1rem;
        margin-right: 0.5rem; }
    .launches .launch h3 {
      margin: 0.5rem 0 0 0;
      padding: 0;
      font-size: 1em; }
    .launches .launch .rocket {
      width: 40%; }
    .launches .launch .mission {
      width: 60%; }
    .launches .launch .date {
      width: 40%; }
    .launches .launch .time {
      width: 60%; }
  .launches .launch:first-of-type {
    width: calc(100% - 1rem); }

/*# sourceMappingURL=style.css.map */