lapikud.github.io/_sass/helpdesk.scss

.page {
  display        : flex;
  flex-direction : column;
  flex           : 1;
  width          : 85vw;
  max-width      : 1200px;
  margin         : 5rem auto 0;
}

.page * {
  margin-top    : 5px;
  margin-bottom : 5px;
}

#helpdesk-banner {
  //background-image : url("helpdesk-a-bg.jpg");
  background      : black;
  display         : flex;
  flex-direction  : row;
  flex            : 1;
  justify-content : center;
  align-items     : center;
  text-align      : center;

  h3, h5 {
    color : white;
  }

  .emphasis-text-bold {
    font-weight : bold;
  }

  .emphasis-text-color {
    color : $color-primary;
  }

  #helpdesk-banner-logo {
    display : block;
    width   : 100%;
    height  : auto;
  }

  #banner-image, #banner-text {
    width : 50%;
  }

  #banner-image {
    padding : 25px;
  }

}

#helpdesk-location-mapstuff {
  display         : flex;
  align-items     : center;
  justify-content : center;

  .siema, #map {
    width      : 50%;
    max-height : 300px;
    margin     : 20px;
  }
  #map {
    height     : 60vh;
    max-height : 300px;
  }
}

#helpdesk-contacts {
  display        : flex;
  flex-direction : row;

  .subtext {
    opacity : 0.7;
  }

  #helpdesk-opening-times, #helpdesk-contactssss {
    flex    : 1;
    padding : 15px;
  }
}

@media (max-width : 900px) {
  #helpdesk-banner {
    flex-direction : column;

    #banner-image, #banner-text {
      width : 100%;
    }
  }

  table {
    tr:first-child {
      max-width : 30%;

    }
    td, th {
      padding : 0.5rem 0.5rem;
    }
  }

  #helpdesk-location-mapstuff {
    flex-direction : column;
    .siema, #map {
      width : 100%;
    }
  }

  #helpdesk-contacts {
    flex-direction : column;
  }
}

table {
  th td {
    font-weight : bold;
  }
  tr:first-child {
    max-width : 40%;
  }
}