/*
  _   _ _______     _______ ____  __  __ ___ _   _ ____  ____ _____ _   _ ____ ___ ___  ____  
 | \ | | ____\ \   / / ____|  _ \|  \/  |_ _| \ | |  _ \/ ___|_   _| | | |  _ \_ _/ _ \/ ___| 
 |  \| |  _|  \ \ / /|  _| | |_) | |\/| || ||  \| | | | \___ \ | | | | | | | | | | | | \___ \ 
 | |\  | |___  \ V / | |___|  _ <| |  | || || |\  | |_| |___) || | | |_| | |_| | | |_| |___) |
 |_| \_|_____|  \_/  |_____|_| \_\_|  |_|___|_| \_|____/|____/ |_|  \___/|____/___\___/|____/                                                                                               

*/


body {
  background: #121212;
  margin: 0;
  overflow: hidden;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes chill {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
p {
  position: absolute;
  top: 10px;
  left: 12px;
  color: white;
  opacity: 0;
  font-family: "Source Sans Pro";
  animation: fadeIn 2s ease-out, chill 2s 2s, fadeOut 2s 4s;
}



img {
  position: absolute;
  top: 100px;
  left: 120px;
}


#uttrar {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;

}

#logo {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
}

#slogan {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
}