@import url("https://fonts.googleapis.com/css?family=Muli");
div {
  border: dotted 0px red; }

body {
  color: #fff;
  background: #030405 url(../img/background-hughcornwell-desktop.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Muli", sans-serif;
  font-size: 1em;
  line-height: 125%;
  font-weight: 900;
  text-transform: uppercase; }
  body a, body a:visited {
    color: #cc1417;
    text-decoration: none; }
    body a:hover, body a:visited:hover {
      color: #fff; }
  body header .mobile {
    display: none; }
  body header nav.social {
    position: absolute;
    bottom: 30px;
    left: 30px;
    font-size: 150%;
    text-align: center; }
    body header nav.social a {
      display: inline-block;
      padding: 20px;
      color: #fff; }
      body header nav.social a:hover {
        color: #cc1417; }
  body section.album-info {
    width: 40%;
    position: fixed;
    top: 50%;
    left: 30%;
    transform: translate(-30%, -50%); }
    body section.album-info .logo {
      width: 90%;
      margin-bottom: 30px; }
    body section.album-info h2 {
      font-size: 125%;
      line-hight: 100%;
      color: #cc1417;
      font-weight: 900;
      padding: 5px 0px;
      margin: 0px; }
    body section.album-info h3 {
      font-size: 125%;
      line-hight: 100%;
      font-weight: 900;
      color: #fff;
      padding: 5px 0px;
      margin: 0px; }
    body section.album-info .retail {
      margin-top: 30px;
      display: flex;
      justify-content: space-between; }
      body section.album-info .retail .buy {
        width: 50%;
        display: flex;
        align-items: center; }
        body section.album-info .retail .buy a {
          width: 100%;
          text-align: center;
          text-size: 250%;
          padding: 20px;
          display: block;
          background-color: #cc1417;
          color: #fff; }
          body section.album-info .retail .buy a:hover {
            background-color: #fff;
            color: #cc1417; }
      body section.album-info .retail .packshot {
        width: 45%;
        text-align: right; }
        body section.album-info .retail .packshot img {
          border: solid 10px #fff;
          width: 90%; }
  body section.enter {
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 150%;
    text-align: right; }
    body section.enter a {
      display: inline-block;
      margin: 20px;
      padding-bottom: 5px;
      color: #cc1417;
      border-bottom: solid 5px #cc1417; }
      body section.enter a:hover {
        color: #fff; }

@media (max-height: 600px) and (max-width: 1024px) {
  body {
    font-size: 0.8em; }
    body section.album-info {
      width: 50%;
      top: 50%;
      left: 20%;
      transform: translate(-20%, -50%); }
      body section.album-info .logo {
        width: 75%;
        margin-bottom: 10px; }
      body section.album-info .retail {
        margin-top: 10px;
        width: 80%; }
        body section.album-info .retail .buy {
          width: 60%; }
        body section.album-info .retail .packshot {
          width: 35%; } }

@media (max-width: 800px) {
  body {
    background: #030405 url(none); }
    body header .mobile {
      display: block;
      width: 100%; }
    body header nav.social {
      position: relative;
      bottom: auto;
      left: auto;
      font-size: 100%;
      text-align: center; }
      body header nav.social a {
        padding: 20px 10px; }
    body section.album-info {
      text-align: center;
      margin: 0px auto;
      width: 80%;
      position: relative;
      top: auto;
      left: auto;
      transform: none; }
      body section.album-info .logo {
        display: none; }
      body section.album-info .retail .buy {
        display: flex;
        align-items: center;
        margin-top: 0%; }
        body section.album-info .retail .buy a {
          width: 100%; }
    body section.enter {
      position: relative;
      bottom: auto;
      right: auto;
      margin: 100px auto;
      text-align: center; } }

@media (max-width: 414px) {
  body {
    background: #030405 url(none); }
    body header .mobile {
      display: block;
      width: 100%;
      margin-bottom: 20px; }
    body section.album-info {
      margin: 0px auto;
      width: 80%; }
      body section.album-info .logo {
        display: none; }
      body section.album-info .retail {
        margin-top: 30px;
        display: block;
        width: 100%; }
        body section.album-info .retail .buy {
          width: 100%; }
        body section.album-info .retail .packshot {
          margin-top: 30px;
          width: 100%;
          text-align: center; } }