zeus.ugent.be/content/assets/stylesheets/includes/cammie.scss

#cammie-container {
  display: flex;
  justify-content: center;

  position: relative;

  width: 100%;
}

.fullpage {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: black;
}

#cammie-section {
  position: relative;
  height: 100%;
  #cammie-body {
    //background-image: url("//kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2");
    // background-size: cover;

    position: relative;

    #cammie-ctrls {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      position: absolute;
      top: 0;
      z-index: 5;
      height: 100%;
      width: 100%;

      transition: opacity 1s ease-in-out;
      opacity: 0;

      &.display {
        transition: opacity .5s ease-in-out;
        opacity: 1;
      }

      .ctrl {

        // Center arrows
        display: flex;
        justify-content: space-around;
        align-items: center;

        background-color: $cammie-controls-color;
        color: white;
        &:hover {
          background-color: $zeus_orange;
          cursor: pointer;
        }

        &.diag i {
          transform: rotate(45deg);
        }
      }

      .row {
        display: flex;
        justify-content: space-between;

        // Space rows
        &.top-row, &.middle-row, &.bottom-row {
          flex-basis: 0;
        }

        &.top-row, &.bottom-row {
          flex-grow: 1;
        }

        &.middle-row {
          flex-grow: 8;

          .center {
            .ctrl-half {
              width: 100%;
              height: 50%;
              display: flex;
              justify-content: space-around;
              align-items: center;

              .ctrl {
                padding: 15px;
              }
            }
          }
        }

        // Enlarge middle column
        .center {
          flex-grow: 8;
        }
      }
    }
  }
}