@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: 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 {
      text-align: center;
      font-size: 7.3vw;
      font-weight: bold;
      padding: 10px;
      transition: opacity 1s, transform 1s;
      opacity: 0;
      transform: translateY(30px);
    }
    
    h2 {
      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.8vw;
      margin-bottom: 10px;
    }
    h2 {
      font-size: 2.5vw;
    }
  }
  
  &.programming {
    text-shadow: 0 0 30px black;
    
    nav a {
      background: #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 {
        background: url('./assets/logo_only.svg') no-repeat transparent;
        background-position: left center;
        background-size: auto 70px;
        opacity: 0.7;
        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: 6.6vw;
      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;

      .item {
        width: 50%;
        min-width: 500px;
        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;

      .item {
        width: 50%;
        min-width: 500px;
        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;

      .item {
        width: 50%;
        min-width: 500px;
        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;
  
  .innerbox {
    min-height: 50vh;
    background: white;
    box-shadow: 0 0 10px #020024;
    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;
      background-image: url('/assets/images/contact.svg');
    }
  }
}

/* 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;
  }
}*/