/*  Colour variables. */
/*  Global Styles. */
body {
  background: #171717;
  cursor: crosshair;
  height: 100vh;
  margin: 0;
  position: relative; }

* {
  color: #fff;
  font-family: 'Roboto', 'helvetica', sans-serif; }

a {
  text-decoration: none; }

::selection {
  background: #ff0280; }

a:hover,
a:focus,
a:active,
input[type="checkbox"],
.open:hover,
.open:focus,
.open:active,
.close:hover,
.close:focus,
.close:active {
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: opacity 0.1s ease-out 0s;
  text-decoration: underline; }

/*  Logo. */
#logo {
  visibility: visible;
  opacity: 0;
  height: 60px;
  position: absolute;
  left: 3rem;
  top: 3rem; }

/* Navigation. */
.full-chk,
.full-cntr .close {
  display: none; }

.full-cntr {
  position: fixed;
  top: 3rem;
  right: 3rem;
  z-index: 3;
  cursor: pointer; }

.full-chk:checked + .full-cntr > .close {
  display: block;
  transition: opacity 0.1s ease-out 0s; }

.full-chk:checked + .full-cntr > .open {
  display: none; }

/* Navigation canvas */
.full-nav {
  position: fixed;
  top: 0%;
  border: calc(6rem + 21px);
  left: 0%;
  right: 0%;
  bottom: 7rem;
  background-color: #171717;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease-out 0s, z-index 0s ease-out 0.3s; }

.full-chk:checked ~ .full-nav {
  opacity: 1;
  z-index: 2;
  transition: opacity 0.3s ease-out 0s; }

/* Navigation content */
.full-nav-content {
  position: relative;
  margin: 3rem;
  padding: 0px;
  list-style-type: none;
  height: calc(100% - 6rem); }
  .full-nav-content img {
    height: 60px; }
  .full-nav-content .intro-text {
    font-size: 4rem;
    transition: font-size .5s ease-in-out;
    margin: 2.5rem 0; }
  .full-nav-content .contact-details {
    position: absolute;
    left: 0;
    bottom: 0; }
  .full-nav-content .details {
    display: inline-block;
    margin: 0 200px 1rem 0; }
    .full-nav-content .details * {
      color: rgba(255, 255, 255, 0.7);
      font-size: 2rem;
      margin: 0; }
    .full-nav-content .details:last-child {
      margin: 0; }

/*  Rotating disc graphic. */
.image-wrapper {
  visibility: visible;
  opacity: 1;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: visibility 0.5s, opacity 0.5s linear; }
  .image-wrapper .spin-wrapper {
    -webkit-animation: spin 3s linear 0s infinite normal;
    -moz-animation: spin 3s linear 0s infinite normal;
    -ms-animation: spin 3s linear 0s infinite normal;
    -o-animation: spin 3s linear 0s infinite normal;
    animation: spin 3s linear 0s infinite normal;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused; }
    .image-wrapper .spin-wrapper:hover {
      -webkit-animation-play-state: running;
      -moz-animation-play-state: running;
      -ms-animation-play-state: running;
      -o-animation-play-state: running;
      animation-play-state: running; }
  .image-wrapper img {
    height: 100%;
    width: 100%;
    max-width: 550px;
    max-height: 550px;
    -webkit-animation: spin 6s linear 0s infinite reverse;
    -moz-animation: spin 6s linear 0s infinite reverse;
    -ms-animation: spin 6s linear 0s infinite reverse;
    -o-animation: spin 6s linear 0s infinite reverse;
    animation: spin 6s linear 0s infinite reverse; }

/*  Transition keyframes. */
@keyframes spin {
  0% {
    transform: rotate(360deg); }
  100% {
    transform: rotate(0deg); } }
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(360deg); }
  100% {
    -webkit-transform: rotate(0deg); } }
@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(360deg); }
  100% {
    -ms-transform: rotate(0deg); } }
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(360deg); }
  100% {
    -moz-transform: rotate(0deg); } }
@-o-keyframes spin {
  0% {
    -o-transform: rotate(360deg); }
  100% {
    -o-transform: rotate(0deg); } }
/*  Links to related platforms. */
.info-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%; }
  .info-wrapper ul {
    margin: 0 3rem 3rem;
    padding: 0;
    list-style: none; }
    .info-wrapper ul li {
      display: inline-block;
      margin: 0 4.5rem 0 0; }
  .info-wrapper #download-link {
    float: right;
    margin: 0; }
    .info-wrapper #download-link a:hover,
    .info-wrapper #download-link a:focus,
    .info-wrapper #download-link a:active {
      cursor: s-resize; }

/* Media queries */
@media (max-width: 1299px) {
  .full-nav-content .intro-text {
    font-size: 3rem; } }
@media (max-width: 1111px) {
  .full-nav {
    bottom: 0; }

  .full-nav-content .intro-text {
    font-size: 2.5rem; } }
@media (max-width: 777px) {
  #logo {
    visibility: visible;
    opacity: 1;
    transition: visibility 0.5s, opacity 0.5s linear; }

  .full-nav-content .intro-text {
    font-size: 2.5rem; }
  .full-nav-content .details {
    margin-right: 100px; }

  .image-wrapper {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s linear; }

  .info-wrapper ul li,
  .info-wrapper #download-link {
    display: block;
    font-size: 44px;
    margin: 2.5rem 0 0; }
  .info-wrapper #download-link {
    float: none; } }
@media (min-width: 666px) {
  .full-content {
    width: 80%;
    max-width: 450px;
    margin: 50px auto 70px auto; } }
@media (max-width: 555px) {
  .full-nav-content .intro-text {
    font-size: 1.75rem; }
  .full-nav-content .details {
    margin-right: 0; } }
@media (max-width: 444px) {
  .full-nav-content .details * {
    font-size: 1.5rem; } }

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