D-Net

.home-background {

  background-size: contain, cover;

  background-repeat: no-repeat;

  background-image: url("~assets/monitor-assets/home/lighthouse.png"), url("~assets/monitor-assets/home/background.svg");

  background-blend-mode: darken;

}

@media (max-width:1199px) {

  .home-background {

    background-size: cover;

    background-repeat: no-repeat;

    background-image: url("~assets/monitor-assets/home/background.svg");

  }

}

.dashboard-section{

  background-image: url("~assets/monitor-assets/home/graph-background.svg");

  background-size: cover;

  background-repeat: no-repeat;

  background-position: left center;

  margin-top: 18vw;

}

@media (max-width:1599px) {

  .dashboard-section {

    margin-top: 12vw;

  }

}

.dashboard-section .dashboard {

  transform: translateY(-50%);

  background-image: url("~assets/monitor-assets/home/dashboard.png");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: top center;

  margin-left: auto;

  margin-right: auto;

  position: relative;

  margin-bottom: -10%;

  width: 50%;

  height: 0;

  padding-top: 25%;

  border: 1px solid #E6E6E6;

  border-radius: 5px;

}

.dashboard-section .dashboard .captain-left {

  background-image: url("~assets/monitor-assets/home/captain-left.png");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: top center;

  left: -10%;

  bottom: -5%;

  position: absolute;

  height: 36%;

  width: 17%;

}

.dashboard-section .dashboard .captain-right {

  background-image: url("~assets/monitor-assets/home/captain-right.png");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: top center;

  right: -8%;

  bottom: -5%;

  position: absolute;

  height: 35%;

  width: 16%;

}

@media (min-width: 1200px) {

  .boat-section {

    position: relative;

    z-index: 0;

    height: 300px;

  }

  .boat-section .first {

    position: absolute;

    top: 0;

    left: 8%;

    width: 32%;

    z-index: 2;

  }

  .boat-section .second {

    position: absolute;

    top: 3%;

    right: 8%;

    width: 34%;

    z-index: 2;

  }

  .boat-section .third {

    position: absolute;

    bottom: 6%;

    left: 7%;

    width: 34%;

  }

  .boat-section .fourth {

    position: absolute;

    bottom: 4%;

    right: 7%;

    width: 34%;

  }

}

@media (min-width: 960px) and (max-width: 1199px){

  .boat-section {

    background-image: url("~assets/monitor-assets/home/boat.png");

    background-repeat: no-repeat;

    background-position: center center;

    background-size: 30% ;

  }

}

@media (max-width: 959px), (min-width: 1200px) {

  .boat-section > div.uk-grid > * {

    padding: 0;

  }

}

.boat-section .boat {

  background-image: url("~assets/monitor-assets/home/boat.png");

  background-size: contain;

  background-repeat: no-repeat;

  margin: 0 0 -30px 50%;

  width: 50%;

  height: 30vw;

}

.boat-section .boat:not(.uk-hidden\@m) {

  position: absolute;

  transform: translate(-50%, -50%);

  left: 50%;

  top: 50%;

  width: 30%;

  height: 42%;

  z-index: 1;

  opacity: 0.9;

  margin: 0;

}

.boat-section > div:not(.boat):not(.uk-grid), .boat-section > div.uk-grid > div > div {

  background: rgba(255, 255, 255, 0.8);

  box-shadow: 0 3px 6px #00000029;

  padding: 35px;

  margin-bottom: 10px;

}

.graph-section {

  background-image: url("~assets/monitor-assets/home/graph-background.svg");

  background-size: cover;

  background-repeat: no-repeat;

}

.stakeholder-section .tabs {

  display: flex;

  justify-content: center;

  width: 100%;

}

.stakeholder-section ul {

  list-style: none;

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 0;

  font-size: 16px;

}

.stakeholder-section ul li {

  display: inline-block;

  color: #707070;

  padding: 5px 15px;

  cursor: pointer;

  margin-left: 25px;

  user-select: none;

}

.stakeholder-section ul li:hover {

  color: #1a1a1a;

}

.stakeholder-section ul li.uk-active {

  color: #1a1a1a;

  border: #E3E3E3 solid 1px;

  border-bottom: #F9F9F9 solid 1px;;

}

.stakeholder-section .stakeholders {

  border-top: #E3E3E3 solid 1px;

  margin-top: -1px;

  padding-top: 20px;

  min-height: 300px;

}

.stakeholder-section .stakeholders .header {

  background-color: #00a0de;

  position: relative;

}

.stakeholder-section .stakeholders .header img{

  max-width: 50%;

  max-height: 50%;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

.stakeholder-section .stakeholders .header.small {

  height: 150px;

}

.stakeholder-section .stakeholders .header.medium {

  height: 200px;

}

.stakeholder-section .stakeholders .header.large {

  height: 300px;

}