@require 'reset'

#container {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
}

header {
  background: #444;
  position: relative;
  text-shadow: 0 0 10px black;

  .container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
    min-height: 485px;
    
    video {
      width: 100%;
      position: absolute;
      z-index: 1;
      bottom: 0;
    }
    
    img {
      width: 100%;
      bottom: 0;
      position: absolute;
      z-index: 0;
      min-height: 485px;
    }
  }
  
  nav {
    display: flex;
    z-index: 6;
    position: absolute;
    align-items: center;
    top: 0%;
    left: 0%;
    width: 100%;
    padding: 10px;
    
    .filler {
      flex: 2 1 auto;
    }
    
    .title {
      margin: 0 20px 0 50px;
      height: 70px;
      display: flex;
      align-items: center;
      padding-left: 90px;
      background-repeat: no-repeat;
      background-color: transparent;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 499.99951 478.24803\" height=\"478.25\" width=\"500\"><path d=\"M452.6 120.04a166.07 166.07 0 0 0-76.5-97.16A166.13 166.13 0 0 0 250.53 6 166.15 166.15 0 0 1 342.06 70a166.14 166.14 0 0 1 110.55 50.05\" fill=\"%23fadc43\"/><path d=\"M157.37 70.02A165.9 165.9 0 0 1 250 92.06 165.93 165.93 0 0 1 342.06 70 166.15 166.15 0 0 0 250.53 6a166.17 166.17 0 0 0-93.16 64.02\" fill=\"%23f8cc0a\"/><path d=\"M250 92.06a165.9 165.9 0 0 0-92.63-22.04 168.08 168.08 0 0 0-8.95 13.87 165.9 165.9 0 0 0-22.35 83.32 167.5 167.5 0 0 1 67.49-21.57c14.3-22 33.67-40.4 56.44-53.58\" fill=\"%23f9b00c\"/><path d=\"M172.57 192.36a165.63 165.63 0 0 1 20.99-46.72 167.5 167.5 0 0 0-67.49 21.57c.02 23.7 5.11 47.14 14.81 68.66a165.73 165.73 0 0 1 31.7-43.51\" fill=\"%23d29413\"/><path d=\"M172.57 192.36a165.73 165.73 0 0 0-31.69 43.5 165.89 165.89 0 0 0 32.59 47.8 166.74 166.74 0 0 1-6.8-47.23c0-15.26 2.06-30.03 5.9-44.07\" fill=\"%23ae7b19\"/><path d=\"M150.19 402.28a166.1 166.1 0 0 1-102.02-48.67A166.14 166.14 0 0 0 126.1 455.9a166.12 166.12 0 0 0 124.5 17.16 166.18 166.18 0 0 1-100.41-70.78\" fill=\"%23ee2834\"/><path d=\"M349.2 402.34A165.9 165.9 0 0 1 250 380.8a165.88 165.88 0 0 1-83.33 22.3c-5.56 0-11.06-.27-16.48-.8a166.18 166.18 0 0 0 100.4 70.77 166.19 166.19 0 0 0 98.62-70.72\" fill=\"%23d9252e\"/><path d=\"M250 380.8a165.9 165.9 0 0 0 83.33 22.3c5.36 0 10.66-.27 15.88-.76a165.82 165.82 0 0 0 26.91-90.78 167.46 167.46 0 0 1-74.06 22.08A167.53 167.53 0 0 1 250 380.79\" fill=\"%23c42129\"/><path d=\"M327.16 281.52a166.27 166.27 0 0 1-25.1 52.12 167.46 167.46 0 0 0 74.06-22.07 167.44 167.44 0 0 0-18.17-75.67 165.93 165.93 0 0 1-30.79 45.62\" fill=\"%23b11e25\"/><path d=\"M327.98 194.37a166.79 166.79 0 0 1 5.35 42.06c0 15.63-2.15 30.75-6.17 45.1a165.93 165.93 0 0 0 30.79-45.63 165.74 165.74 0 0 0-29.97-41.53\" fill=\"%239f1b21\"/><path d=\"M157.37 70.02A166.17 166.17 0 0 1 250.53 6a166.15 166.15 0 0 0-127.55 16.35 166.12 166.12 0 0 0-77.1 99.24 166.18 166.18 0 0 1 111.49-51.57\" fill=\"%23fadc43\"/><path d=\"M57.8 242.35c2.2-4.77 4.62-9.49 7.29-14.13a165.93 165.93 0 0 1 60.98-61.01 165.9 165.9 0 0 1 22.35-83.32c2.78-4.82 5.77-9.44 8.95-13.87a166.18 166.18 0 0 0-111.5 51.57c-10.99 39.1-7.76 82.17 11.94 120.76\" fill=\"%23f8cc0a\"/><path d=\"M140.88 235.87a167.52 167.52 0 0 1-14.8-68.66 165.93 165.93 0 0 0-60.99 61.01c-2.67 4.64-5.1 9.36-7.28 14.13a165.84 165.84 0 0 0 65.15 68.69c.02-26.12 6.2-51.91 17.92-75.17\" fill=\"%23f9b00c\"/><path d=\"M197.58 333.14a166.06 166.06 0 0 1-24.11-49.47 165.89 165.89 0 0 1-32.59-47.8 167.42 167.42 0 0 0-17.92 75.17 167.58 167.58 0 0 0 74.62 22.1\" fill=\"%23d29413\"/><path d=\"M209.43 311.56a166.67 166.67 0 0 1-35.96-27.9 166.06 166.06 0 0 0 24.11 49.48c16.95.9 34.13-.77 50.95-5.18a167.52 167.52 0 0 1-39.1-16.4\" fill=\"%23ae7b19\"/><path d=\"M349.2 402.34a166.19 166.19 0 0 1-98.6 70.72 166.1 166.1 0 0 0 122.38-17.7 166.15 166.15 0 0 0 77.4-100.3 166.17 166.17 0 0 1-101.17 47.28\" fill=\"%23c91840\"/><path d=\"M441.53 242.37a165.8 165.8 0 0 1-65.41 69.2 165.82 165.82 0 0 1-26.91 90.77 166.17 166.17 0 0 0 101.18-47.28 166.19 166.19 0 0 0-8.86-112.69\" fill=\"%23a7193a\"/><path d=\"M373.01 166.68a167.46 167.46 0 0 1-15.06 69.22 167.44 167.44 0 0 1 18.17 75.67 165.8 165.8 0 0 0 65.4-69.2A172.14 172.14 0 0 0 434 227.7a165.96 165.96 0 0 0-60.98-61.01\" fill=\"%23881933\"/><path d=\"M306.14 145.18a165.82 165.82 0 0 1 21.84 49.19 165.74 165.74 0 0 1 29.97 41.53A167.45 167.45 0 0 0 373 166.68a167.54 167.54 0 0 0-66.87-21.5\" fill=\"%236b172c\"/><path d=\"M292.76 167.22a166.85 166.85 0 0 1 35.22 27.15 165.82 165.82 0 0 0-21.84-49.2 165.9 165.9 0 0 0-57.69 4.32 166.78 166.78 0 0 1 44.31 17.73\" fill=\"%23511423\"/><path d=\"M452.6 120.04a166.18 166.18 0 0 1-11.07 122.33 166.19 166.19 0 0 1 8.86 112.69A166.14 166.14 0 0 0 500 236.43c0-45.3-18.07-86.36-47.4-116.4\" fill=\"%235ac5eb\"/><path d=\"M342.06 69.99a166.05 166.05 0 0 1 30.95 96.69A165.96 165.96 0 0 1 434 227.69c2.77 4.82 5.28 9.72 7.54 14.68a166.18 166.18 0 0 0 11.08-122.33 166.14 166.14 0 0 0-110.55-50.05\" fill=\"%234da4dd\"/><path d=\"M373.01 166.68a166.05 166.05 0 0 0-30.95-96.7A165.93 165.93 0 0 0 250 92.06a167.47 167.47 0 0 1 56.14 53.13 167.54 167.54 0 0 1 66.87 21.5\" fill=\"%234286ce\"/><path d=\"M248.45 149.5a165.9 165.9 0 0 1 57.69-4.32A167.47 167.47 0 0 0 250 92.06a167.53 167.53 0 0 0-56.44 53.58 165.92 165.92 0 0 1 54.9 3.85\" fill=\"%233c5a98\"/><path d=\"M248.45 149.5a165.92 165.92 0 0 0-54.9-3.86 165.63 165.63 0 0 0-20.98 46.72 166.95 166.95 0 0 1 33.75-25.67 166.8 166.8 0 0 1 42.13-17.2\" fill=\"%2337366d\"/><path d=\"M57.8 242.35A166.12 166.12 0 0 1 45.89 121.6 166.1 166.1 0 0 0 0 236.43a166.1 166.1 0 0 0 48.17 117.18 166.1 166.1 0 0 1 9.64-111.26\" fill=\"%23fadc43\"/><path d=\"M150.19 402.28a165.86 165.86 0 0 1-27.23-91.25 165.84 165.84 0 0 1-65.15-68.68 166.1 166.1 0 0 0-9.64 111.26 166.1 166.1 0 0 0 102.02 48.67\" fill=\"%23f8cc0a\"/><path d=\"M122.96 311.04a165.86 165.86 0 0 0 27.23 91.24c5.42.54 10.92.82 16.48.82 30.36 0 58.81-8.12 83.33-22.3a167.5 167.5 0 0 1-52.42-47.66 167.58 167.58 0 0 1-74.62-22.1\" fill=\"%23f9b00c\"/><path d=\"M248.53 327.96c-16.82 4.4-34 6.08-50.95 5.18A167.5 167.5 0 0 0 250 380.79a167.53 167.53 0 0 0 52.06-47.15 165.98 165.98 0 0 1-53.53-5.68\" fill=\"%23d29413\"/><path d=\"M248.53 327.96a165.98 165.98 0 0 0 53.53 5.68 166.27 166.27 0 0 0 25.1-52.12 166.88 166.88 0 0 1-37.51 29.5 167.01 167.01 0 0 1-41.12 16.94\" fill=\"%23ae7b19\"/></svg>')
      // background: url('./assets/logo_only.svg') no-repeat transparent;
      background-position: left center;
      background-size: auto 70px;
      font-size: 1.6em;
      color: white;
      opacity: 0.6;
    }
    
    a {
      font-size: 1.2em;
      color: white;
      text-shadow: 0 0 20px black;
      padding: 10px 20px;
      text-decoration: none;
      opacity: 0.6;
      transition: opacity 0.5s;
      position: relative;

      & div {
        position: absolute;
        bottom: 0;
        left: 20px;
        right: 20px;
        border-bottom: 2px solid white;
        transition: transform 0.3s;
        transform: scaleX(0);
      }
      
      &:hover {
        opacity: 1;
        
        & div {
          transition: transform 0.7s;
          transform: scaleX(1);
        }
      }
      
      &.active {
        opacity: 1;
        
        & div {
          transform: scaleX(1);
        }
      }
    }
  }
  
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5;
    position: absolute;
    top: 0px;
    left: 0%;
    height: 100%;
    width: 100%;
    min-height: 485px;
    color: white;
    text-transform: uppercase;
    
    
    h1 {
      padding-left: 15px;
      padding-right: 15px;
      text-align: center;
      font-size: 4.6vw;
      font-weight: bold;
      padding: 10px;
      transition: opacity 1s, transform 1s;
      opacity: 0;
      transform: translateY(30px);
      margin-bottom: 10px;
    }
    
    h2 {
      padding-left: 15px;
      padding-right: 15px;
      text-align: center;
      font-size: 3vw;
      transition: opacity 1.2s, transform 1.2s;
      opacity: 0;
      transform: translateY(50px);
    }
  }
  
  &.visible {
    h1, h2 {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  
  &.hosting {
    h1 {
      font-size: 4.3vw;
      margin-bottom: 10px;
    }
    h2 {
      font-size: 2.5vw;
    }
  }
  
  &.programming {
    text-shadow: 0 0 30px black;
    
    nav a {
      background-color: #0003;
      border-radius: 20px;
      box-shadow: 0 0 80px black;
      text-shadow: 0 0 80px black;
      opacity: 1;
      color: #999;
      transition: opacity 0.5 color 0.5s;
      
      &.title {
        color: white;
        opacity: 0.6;
        
        &:hover {
          opacity: 1;
        }
      }
      
      &:hover {
        color: white;
      }
      
      &.active {
        color: white;
      }
    }

    h1 {
      font-size: 5.8vw;
      margin-bottom: 10px;
    }
    h2 {
      font-size: 3.5vw;
    }
    
    h1, h2 {
    }
  }
  
  &.streaming {
    text-shadow: 0 0 40px black;

    h1 {
      font-size: 5.7vw;
      margin-bottom: 10px;
    }
    h2 {
      font-size: 3vw;
    }
  }
}

/*header {
  margin-top: 4em;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 600px;
  padding: 0 2em;
  
  h1 {
    flex-grow: 2;
    text-indent: -9999px;
    padding-top: 96%;
    background: url('./assets/logo.svg') center no-repeat transparent;
    background-size: contain;
    max-width: 400px;
  }
}*/

main {
  display: flex;
  flex-direction: column;
  flex-grow: 2;
  color: #333;
}

article {
  display: flex;
  padding: 0 50px;
  flex-direction: column;
  min-height: 82vh;
  height: 600px;
  overflow: hidden;
  
  h3 {
    font-size: 2em;
    padding: 10px 20px 40px;
    font-weight: bold;
    text-align: center;
    position: relative;
    align-self: center;
  }
  
  section {
    display: flex;
    flex: 2 1 auto;
    justify-content: center;

    aside {
      flex: 0 1 50%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      
      .item {
        display: flex;
        flex-direction: column;
      }

      p {
        font-size: 1.2em;
        line-height: 1.4em;
        margin-bottom: 50px;
      }
      
      h5 {
        text-align: center;
        margin: 20px 10px;
        font-size: 1.2em;
        line-height: 1.4em;
        font-weight: bold;
        border-bottom: 2px solid #29688c;
        padding: 10px 50px;
        align-self: center;
      }
      
      a {
        text-decoration: none;
        border: 2px solid #29688c;
        align-self: center;
        border-radius: 10px;
        padding: 10px 30px 12px;
        color: #29688c;
        font-weight: bold;
        font-size: 1.1em;
      }
      
      p, h5, a, h3 {
        transition: opacity 1.2s, transform 1.2s;
        opacity: 0;
        transform: translate(0px, 50px);
      }
    }
    
    .image {
      flex: 0 1 50%;
      max-width: 600px;
      background-position: center;
      background-size: 90% auto;
      background-repeat: no-repeat;

      transition: opacity 1.2s, transform 1.2s;
      opacity: 0;
      transform: translate(50%, 0px);
    }
  }
  
  .visible p,
  .visible a,
  .visible .image,
  .visible h5,
  .visible h3,
  .visible.image {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  
  &.solution {
    box-shadow: 0 5px 50px #0005;
    background: #e9e9e9;
    margin: 0 0 5vh;
    height: 800px;
    
    h3 {
      font-size: 5vh;
      padding: 5vh 20px;
      font-weight: bold;
      text-align: center;
      position: relative;
      align-self: center;
      
      .left, .right {
        position: absolute;
        top: 50%;
        margin-top: 0px;
        border-bottom: 2px solid #29688c;
      }

      .left {
        right: 100%;
        left: -9999px;
      }
      
      .right {
        left: 100%;
        right: -9999px;
      }
    }
  }
  
  &.hosting {
    height: 600px;
  }
  
  &.programming {
    background: #29688c;
    background: linear-gradient(150deg, #020024 15%, #29688c 100%);
    color: white;
    position: relative;
    min-height: auto;
    height: 70vw;
    max-height: 80vh;
    min-height: 600px;
    
    section {
    }
    
    aside {
      align-self: flex-start;
      position: relative;
      z-index: 2;
      margin-top: 5vh;
      flex: 1 1 auto;
      width: 90%;
      max-width: 1440px;
      
      .item {
        width: 50%;
        min-width: 500px;
        text-align: left;
      }
    }
    
    h3 {
      align-self: flex-start;
      padding: 10px 0 40px;
    }
    
    a {
      border-color: white;
      color: white;
      align-self: flex-start;
    }
    
    .image {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 87%;
      height: 90%;
      max-width: none;
      background-position: right bottom;
      background-size: contain;
    }
  }
  
  &.video {
    min-height: 70vh;
  }

  &.hostintro {
    .image {
      transform: translate(-50%, 0px);
    }
    
    .visible.image {
      transform: translate(0px, 0px);
    }
  }
  
  &.hoststorage {
    background: #29688c;
    background: linear-gradient(150deg, #020024 15%, #29688c 100%);
    color: white;
    position: relative;
    height: 80vh;
    min-height: 600px;
    
    section {
      justify-content: flex-end;
    }
    
    aside {
      align-items: center;
      max-width: none;

      .item {
        width: 100%;
        max-width: 600px;
        text-align: left;
      }
    }
    
    h3 {
      align-self: flex-start;
      padding: 10px 0 40px;
    }
    
    .image {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50%;
      height: 90%;
      max-width: none;
      background-position: left center;
      background-size: contain;
      transform: translate(-50%, 0px);
    }
    
    .visible.image {
      transform: translate(0px, 0px);
    }
  }
  
  &.hostmanaged {
    position: relative;
    height: 80vh;
    min-height: 600px;
    
    section {
      justify-content: flex-end;
    }
    
    aside {
      align-items: center;
      max-width: none;

      .item {
        padding-left: 20px;
        width: 100%;
        max-width: 600px;
        text-align: left;
      }
    }
    
    h3 {
      align-self: flex-start;
      padding: 10px 0 40px;
    }
    
    .image {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50%;
      height: 90%;
      max-width: none;
      background-position: left center;
      background-size: contain;
      transform: translate(-50%, 0px);
    }
    
    .visible.image {
      transform: translate(0px, 0px);
    }
  }
  
  &.programmingintro {
    .image {
      transform: translate(-50%, 0px);
    }
    
    .visible.image {
      transform: translate(0px, 0px);
    }
  }
  
  &.programmingstore {
    background: #29688c;
    background: linear-gradient(30deg, #020024 15%, #29688c 100%);
    color: white;
    position: relative;
    height: 80vh;
    min-height: 600px;
    
    section {
      justify-content: flex-start;
    }
    
    aside {
      align-items: center;
      max-width: none;

      .item {
        width: 100%;
        max-width: 600px;
        text-align: left;
      }
    }
    
    h3 {
      align-self: flex-start;
      padding: 10px 0 40px;
    }
    
    .image {
      position: absolute;
      right: 0;
      top: 5%;
      width: 50%;
      height: 90%;
      max-width: none;
      background-position: center;
      background-size: contain;
      transform: translate(50%, 0px);
    }
    
    .visible.image {
      transform: translate(0px, 0px);
    }
  }
  
  &.programmingcontracting {
    .image {
      transform: translate(-50%, 0px);
    }
    
    .visible.image {
      transform: translate(0px, 0px);
    }
  }
}

footer {
  background: #29688c;
  padding: 100px;
  
  .outerbox {
    display: flex;
    flex-direction: column;
    min-height: 50vh;
    background: white;
    box-shadow: 0 0 10px #020024;
  }

  .innerbox {
    padding: 50px;
    display: flex;
    justify-content: center;
    height: 500px;
    
    aside {
      flex: 0 1 50%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      
      h3 {
        font-size: 2em;
        padding: 10px 20px 40px;
        font-weight: bold;
        text-align: center;
        position: relative;
        align-self: center;
      }

      p {
        font-size: 1.2em;
        line-height: 1.4em;
        margin-bottom: 50px;
      }
      
      h5 {
        text-align: center;
        margin: 20px 10px;
        font-size: 1.2em;
        line-height: 1.4em;
        font-weight: bold;
        border-bottom: 2px solid #29688c;
        padding: 10px 50px;
        align-self: center;
      }
      
      a {
        text-decoration: none;
        border: 2px solid #29688c;
        align-self: center;
        border-radius: 10px;
        padding: 10px 30px 12px;
        color: #29688c;
        font-weight: bold;
        font-size: 1.1em;
      }
    }
    
    .image {
      flex: 0 1 50%;
      max-width: 600px;
      background-position: center;
      background-size: 90% auto;
      background-repeat: no-repeat;
      
      transition: opacity 1.2s, transform 1.2s;
      opacity: 0;
      transform: translate(0px, 50%);
      
      &.visible {
        transform: translate(0px, 0px);
        opacity: 1;
      }
    }
  }
  
  .meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 40px 0 10px;
    color: #777;
    line-height: 1.6em;
    
    span {
      margin: 0 10px;
    }
    
    a {
      color: #29688c;
      text-decoration: none;
    }
  }
}

@media only screen and (max-width: 1000px) {
  article {
    font-size: 0.9em;
  }
  
  footer {
    font-size: 0.9em;

    .innerbox {
      flex-direction: column;
      align-items: center;
      height: auto;
      
      aside h3 {
        padding: 30px 20px 20px;
      }
      
      .image {
        width: 100%;
        max-width: 600px;
        height: 300px;
        flex: 0 0 300px;
        background-size: contain;
      }
    }
    
    .meta {
      padding: 0px 0 30px;
    }
  }
}

@media only screen and (max-width: 810px) {
  article.solution h3 {
    font-size: 2em;
  }
}

@media only screen and (max-width: 800px) {
  header {
    .container nav {
      flex-wrap: wrap;
      justify-content: center;

      a.title {
        width 100%;
        flex: 2 0 100%;
        justify-content: center;
        background-position: calc(50% - 60px) center;
        padding-left: 100px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 15px;
      }
      
      .filler {
        flex: 0 0 0;
      }
    }
    
    .content {
      h1 {
        font-size: 2.3em;
      }
      
      h2 {
        font-size: 1.5em;
      }
    }
    
    &.hosting {
      h1 {
        font-size: 2.3em;
      }
      h2 {
        font-size: 1.5em;
      }
    }
    
    &.programming {
      nav a {
        &.title {
          background-position: calc(50% - 60px) center;
        }
      }

      h1 {
        font-size: 5.8vw;
        margin-bottom: 10px;
      }
      h2 {
        font-size: 3.5vw;
      }
      
      h1, h2 {
      }
    }
  }
  
  article {
    height: auto !important;

    section {
      flex-direction: column;
      align-items: center;
      padding-top: 20px;
      padding-bottom: 20px;
      
      aside {
        order: 2;
      }
      
      .image {
        order: 1;
        width: 100%;
        background-size: contain;
        flex: 0 0 300px;
        transform: translate(0, 50%);
      }
    }
    
    &.programming {
      max-height: none;
      min-height: auto;
      padding: 0 40px 300px;
      
      section {
      }
      
      aside {
        margin-top: 10px;
        width: 100%;

        .item {
          width: 100%;
          min-width: auto;
        }
      }
      
      h3 {
        align-self: center;
      }
      
      .image {
        width: 100%;
        height: 300px;
        max-width: none;
        background-position: right bottom;
        background-size: contain;
        transform: translate(50%, 0);
      }
      
      .visible.image {
        transform: translate(0px, 0px);
      }
    }
    
    &.hostintro {
      h3 {
        padding: 30px 0 30px;
      }
      
      .image {
        transform: translate(0, 50%);
      }
      
      .visible.image {
        transform: translate(0px, 0px);
      }
    }
    
    &.hoststorage {
      min-height: auto;
      padding: 0;

      section {
        justify-content: flex-start;
        padding-bottom: 0;
      }
      
      aside {
        order: 1;
        padding: 0 50px;
      }

      .image {
        width: 100%;
        height: auto;
        background-position: center;
        padding-top: 66%;
        position: relative;
        order: 2;
      }
    }
    
    &.hostmanaged {
      min-height: auto;
      padding: 0;
      
      section {
        justify-content: flex-start;
        padding-bottom: 0;
      }
      
      aside {
        order: 1;
        padding: 0 50px;
      }
      
      aside .item {
        padding-left: 0;
      }
      .image {
        position: relative;
        width: 100%;
        padding-top: 68%;
        height: auto;
        order: 2;
      }
    }
    
    &.programmingintro {
      .image {
        transform: translate(0, 50%);
      }
      
      .visible.image {
        transform: translate(0px, 0px);
      }
      
      h3 {
        padding: 30px 0 30px;
      }
    }
    
    &.programmingstore {
      aside {
        order: 1;
        flex: 0 1 auto;
      }
      
      h3 {
        align-self: flex-start;
        padding: 10px 0 40px;
      }
      
      .image {
        position: relative;
        order: 2;
        width: 100%;
        padding-top: 430px;
        height: auto;
        background-size: auto 100%;
        background-position: center -17px;
        transform: translate(0, 50%);
      }
      
      .visible.image {
        transform: translate(0px, 0px);
      }
    }
    
    &.programmingcontracting {
      h3 {
        padding: 30px 0 30px;
      }
      .image {
        transform: translate(0, 50%);
      }
      
      .visible.image {
        transform: translate(0px, 0px);
      }
    }
  }
}

@media only screen and (max-width: 680px) {
  footer {
    padding: 100px 20px;
  }
}

@media only screen and (max-width: 500px) {
  header .content {
    top: 60px;
  }

  article {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.8em;
    
    &.hoststorage {
      aside {
        padding: 0 10px;
      }
    }
    
    &.hostmanaged {
      aside {
        padding: 0 10px;
      }
    }
  }
  
  footer {
    padding: 100px 20px;
    font-size: 0.8em;
    
    .innerbox {
      padding: 50px 15px;
    }
  }
}

/* section,
aside {
  display: flex;
  flex-direction: column;
  
  & > * {
    max-width: 600px;
    align-self: center;
    text-align: center;
  }
}
<a href="https://www.freepik.com/free-photos-vectors/business">Business vector created by pikisuperstar - www.freepik.com</a>
section {
  padding: 0.5em 1em 3em;

  p {
    font-size: 1.5em;
    line-height: 1.2em;
  }
  
  h5 {
    margin-top: 1em;
  }
}

aside {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  background: #ddd;
  padding: 1em 1em 0.6em;
  margin: 2em 0 4em;
  
  span {
    font-size: 0.9em;
  }
  
  h3 {
    font-size: 1.8em;
    line-height: 2em;
  }
}

.clients {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1em;
  
  .client {
    margin: 0 0.6em;
    padding: 1em 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 35px;
    text-indent: -9999px;
    
    &.stjornarrad {
      background-image: url('./assets/stjornarradid.svg');
      width: 64px;
    }
    
    &.aranja {
      background-image: url('./assets/aranja.svg');
      background-position: center 28px;
      width: 100px;
    }
    
    &.jokula {
      background-image: url('./assets/jokula.png');
      background-position: center 24px;
      width: 120px;
    }
    
    &.filadelfia {
      background-image: url('./assets/filadelfia.png');
      width: 67px;
    }
  }
}

footer {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  
  span {
    flex-grow: 2;
    text-align: center;
    font-size: 0.8em;
    color: #999;
    line-height: 1.5em;
    padding: 1em;
  }
}

@media only screen and (max-width: 640px) {
  section p {
    font-size: 1.3em;
  }
}

@media only screen and (max-width: 500px) {
  section p {
    font-size: 1.1em;
  }
}*/