html, body, p, a, img, div {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-family: 'Dosis', sans-serif;
  font-weight: 300;
  width: 100vw;
  height: 100vh; }

#logos {
  color: white; }

.button a {
  border: 1px solid rgba(255, 255, 255, 0.21);
  padding: 0.5em;
  color: rgba(255, 255, 255, 0.21);
  transition-duration: 1s; }
  .button a:hover {
    border-color: white;
    color: white;
    transition-duration: 1s; }

@media (orientation: landscape) and (min-aspect-ratio: 10 / 6) {
  #logos {
    height: 100%;
    float: left; }
    #logos .logo {
      width: 30vw;
      height: 100%;
      background-color: #131313;
      top: 0;
      position: absolute; }
      #logos .logo:first-child {
        padding: 2vw; }
        #logos .logo:first-child img {
          margin-top: 3vw;
          margin-bottom: 6vw; }
      #logos .logo:last-child {
        padding: 2vw;
        left: 100vw;
        margin-left: -30vw; }
        #logos .logo:last-child img {
          margin-top: 8.5vw;
          padding-bottom: 11.5vw; }
      #logos .logo .wrapper {
        border: 1px solid rgba(255, 255, 255, 0.21);
        height: 100%;
        text-align: center; }
      #logos .logo img {
        width: 80%; }

  #slug {
    position: absolute;
    width: 40vw;
    top: 0;
    left: 30vw;
    padding: 2vw;
    height: 100%; }
    #slug .wrapper {
      height: 100%;
      border: 1px solid #cecece;
      padding: 2vw; }
      #slug .wrapper p {
        position: absolute;
        font-size: 2vw;
        width: 32vw;
        top: 50%;
        text-align: center; }
        #slug .wrapper p:first-child {
          margin-top: -10vw; }
        #slug .wrapper p:last-child {
          font-size: 1.8vw; } }
@media (orientation: landscape) and (max-aspect-ratio: 10 / 6) {
  #logos {
    width: 40vw;
    max-width: 40vw;
    height: 100%;
    float: left; }
    #logos .logo {
      width: 100%;
      height: 50%;
      background-color: #131313; }
      #logos .logo:first-child {
        padding: 2vw 2vw 1vw 2vw; }
        #logos .logo:first-child img {
          height: 20vh;
          margin-top: 3vh;
          margin-bottom: 3vh; }
      #logos .logo:last-child {
        padding: 1vw 2vw 2vw 2vw; }
        #logos .logo:last-child img {
          width: 20vh;
          margin-top: 8.5vh;
          padding-bottom: 11.5vh; }
      #logos .logo .wrapper {
        border: 1px solid rgba(255, 255, 255, 0.21);
        height: 100%;
        text-align: center; }

  #slug {
    width: 60vw;
    padding: 2vw;
    height: 100%;
    float: right; }
    #slug .wrapper {
      height: 100%;
      border: 1px solid #cecece;
      padding: 2vw; }
      #slug .wrapper p {
        position: absolute;
        font-size: 2.5vw;
        width: 52vw;
        top: 50%;
        text-align: center; }
        #slug .wrapper p:first-child {
          margin-top: -10vw; }
        #slug .wrapper p:last-child {
          font-size: 2.1vw; } }
@media (orientation: portrait) and (min-aspect-ratio: 6 / 7) {
  #logos {
    width: 100vw;
    max-height: 70vh;
    height: 70vh; }
    #logos .logo {
      width: 100vw;
      background-color: #131313;
      top: 0;
      position: absolute; }
      #logos .logo:first-child {
        padding: 2vh;
        height: 35vh; }
        #logos .logo:first-child img {
          padding: 3vh 5vh 0 13.73vh;
          height: 25vh;
          box-sizing: content-box; }
        #logos .logo:first-child .button {
          left: 98vw;
          margin-left: -40vw; }
      #logos .logo:last-child {
        padding: 2vh;
        top: 100vh;
        margin-top: -35vh;
        height: 35vh; }
        #logos .logo:last-child img {
          position: absolute;
          left: 98vw;
          top: 7.5vh;
          margin-left: -47.5vh;
          height: 20vh;
          box-sizing: content-box; }
        #logos .logo:last-child .button {
          margin-left: 8vw; }
      #logos .logo .wrapper {
        border: 1px solid rgba(255, 255, 255, 0.21);
        height: 100%; }
      #logos .logo .button {
        position: absolute;
        top: 17vh; }

  #slug {
    position: absolute;
    width: 100%;
    top: 35vh;
    padding: 2vw;
    height: 30vh; }
    #slug .wrapper {
      height: 100%;
      border: 1px solid #cecece;
      padding: 2vh; }
      #slug .wrapper p {
        position: absolute;
        font-size: 3vw;
        width: 92vw;
        top: 50%;
        text-align: center; }
        #slug .wrapper p:first-child {
          margin-top: -7vw; }
        #slug .wrapper p:last-child {
          margin-top: 3vw;
          font-size: 2.5vw; } }
@media (orientation: portrait) and (max-aspect-ratio: 6 / 7) {
  #logos {
    width: 100vw;
    max-height: 70vh;
    height: 70vh; }
    #logos .logo {
      width: 100vw;
      background-color: #131313;
      top: 0;
      position: absolute;
      text-align: center; }
      #logos .logo:first-child {
        padding: 2vh;
        height: 35vh; }
        #logos .logo:first-child img {
          padding: 3vh 0;
          height: 17.5vh;
          box-sizing: content-box; }
      #logos .logo:last-child {
        padding: 2vh;
        top: 100vh;
        margin-top: -35vh;
        height: 35vh; }
        #logos .logo:last-child img {
          padding: 3vh 0;
          height: 17.5vh;
          box-sizing: content-box; }
      #logos .logo .wrapper {
        border: 1px solid rgba(255, 255, 255, 0.21);
        height: 100%; }
      #logos .logo .button a {
        padding: 0.5em; }

  #slug {
    position: absolute;
    width: 100%;
    top: 35vh;
    padding: 2vw;
    height: 30vh; }
    #slug .wrapper {
      height: 100%;
      border: 1px solid #cecece;
      padding: 2vh; }
      #slug .wrapper p {
        position: absolute;
        font-size: 3.8vw;
        width: 92vw;
        top: 50%;
        text-align: center; }
        #slug .wrapper p:first-child {
          margin-top: -7vh; }
        #slug .wrapper p:last-child {
          margin-top: 3vh;
          font-size: 3.2vw; } }