.bg {
  /* The image used */
  background-image: url(../../app-assets/images/backgrounds/bg.png);

  /* Full height 
  height: 120vh;*/

  /* Center and scale the image nicely */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  /* width:100% !important;
  height:100% !important; */

}

div {
  font-family: "Tajawal", "Titillium Web" !important;
}

.doploma-1,
.doploma-2,
.master-1,
.master-2,
.High-School-1,
.High-School-2,
.primary-1,
.primary-2,
.BA-1,
.BA-2,
.PhD-1,
.PhD-2 {
  position: absolute;
  color: #b64e5d;
  font-family: "Tajawal", "Titillium Web" !important;
  font-weight: bold;
}

.manager-position-1,
.manager-position-2,
.unskilled-position-1,
.unskilled-position-2,
.supervisor-position-1,
.supervisor-position-2,
.skilled-position-1,
.skilled-position-2,
.numberOfEmployee-1,
.numberOfEmployee-2,
.numberOfEmployee-small-2,
.numberOfEmployee-3,
.numberOfEmployee-small-3,
.numberOfEmployee-4,
.numberOfEmployee-small-4 {
  position: absolute;
  color: #fff;
  font-family: "Tajawal", "Titillium Web" !important;
  font-weight: bolder;
}

.boy-1,
.boy-2,
.girl-1,
.girl-2 {
  position: absolute;
  color: #2e1946;
  font-family: "Tajawal", "Titillium Web" !important;
  font-weight: bolder;
}

/* FHD */
@media only screen and (max-width: 1920px) and (min-resolution:72dpi) and (max-resolution:1080dpi) {

  /* doploma */
  .doploma-1 {
    top: 10%;
    left: 28%;
    transform: translate(-10%, -28%);
    font-size: 2rem !important;
  }

  .doploma-2 {
    top: 14%;
    left: 28%;
    transform: translate(-14%, -28%);
    font-size: 1.5rem !important;
  }

  /* master */
  .master-1 {
    top: 33%;
    left: 28%;
    transform: translate(-33%, -28%);
    font-size: 2rem !important;
  }

  .master-2 {
    top: 37%;
    left: 28%;
    transform: translate(-33%, -28%);
    font-size: 1.5rem !important;
  }

  /* High-School */
  .High-School-1 {
    top: 14%;
    left: 51%;
    transform: translate(-14%, -52%);
    font-size: 2rem !important;
  }

  .High-School-2 {
    top: 18%;
    left: 51%;
    transform: translate(-18%, -52%);
    font-size: 1.5rem !important;
  }

  /* primary */
  .primary-1 {
    top: 51%;
    left: 60%;
    transform: translate(-51%, -60%);
    font-size: 2rem !important;
  }

  .primary-2 {
    top: 55%;
    left: 60%;
    transform: translate(-51%, -60%);
    font-size: 1.5rem !important;
  }

  /* BA */
  .BA-1 {
    top: 16%;
    left: 66%;
    transform: translate(-16%, -66%);
    font-size: 2rem !important;
  }

  .BA-2 {
    top: 20%;
    left: 66%;
    transform: translate(-20%, -66%);
    font-size: 1.5rem !important;
  }

  /* PhD */
  .PhD-1 {
    top: 27%;
    left: 71%;
    transform: translate(-27%, -71%);
    font-size: 2rem !important;
  }

  .PhD-2 {
    top: 31%;
    left: 71%;
    transform: translate(-31%, -71%);
    font-size: 1.5rem !important;
  }

  /* square numbers */
  .unskilled-position-1 {
    top: 63%;
    left: 24%;
    transform: translate(-63%, -24%);
    font-size: 2rem !important;
  }

  .unskilled-position-2 {
    top: 67%;
    left: 24%;
    transform: translate(-67%, -24%);
    font-size: 1.5rem !important;
  }

  .manager-position-1 {
    top: 63%;
    left: 33%;
    transform: translate(-63%, -33%);
    font-size: 2rem !important;
  }

  .manager-position-2 {
    top: 67%;
    left: 33%;
    transform: translate(-67%, -33%);
    font-size: 1.5rem !important;
  }

  .supervisor-position-1 {
    top: 87%;
    left: 33%;
    transform: translate(-87%, -33%);
    font-size: 2rem !important;
  }

  .supervisor-position-2 {
    top: 91%;
    left: 33%;
    transform: translate(-91%, -33%);
    font-size: 1.5rem !important;
  }

  .skilled-position-1 {
    top: 87%;
    left: 24%;
    transform: translate(-66%, -24%);
    font-size: 2rem !important;
  }

  .skilled-position-2 {
    top: 91%;
    left: 24%;
    transform: translate(-66%, -24%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-1 {
    top: 72%;
    left: 76%;
    transform: translate(-72%, -76%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-2 {
    top: 70%;
    left: 66.2%;
    transform: translate(-70%, -66.2%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-small-2 {
    top: 72.5%;
    left: 66.2%;
    transform: translate(-72%, -66.2%);
    font-size: 1.25rem !important;
  }

  .numberOfEmployee-3 {
    top: 70%;
    left: 56.4%;
    transform: translate(-70%, -56.4%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-small-3 {
    top: 72.5%;
    left: 56.4%;
    transform: translate(-72%, -56.4%);
    font-size: 1.25rem !important;
  }

  .numberOfEmployee-4 {
    top: 70%;
    left: 47%;
    transform: translate(-70%, -47%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-small-4 {
    top: 72.5%;
    left: 47%;
    transform: translate(-72%, -47%);
    font-size: 1.25rem !important;
  }

  .boy-1 {
    top: 88%;
    left: 59%;
    transform: translate(-88%, -59%);
    font-size: 2rem !important;
  }

  .boy-2 {
    top: 92%;
    left: 59%;
    transform: translate(-92%, -59%);
    font-size: 1.5rem !important;
  }

  .girl-1 {
    top: 88.5%;
    left: 74%;
    transform: translate(-88%, -74%);
    font-size: 2rem !important;
  }

  .girl-2 {
    top: 92%;
    left: 75%;
    transform: translate(-92%, -75%);
    font-size: 1.5rem !important;
  }
}

/* HD */
@media only screen and (min-width: 1920px) and (max-resolution:720dpi) {

  /* doploma */
  .doploma-1 {
    top: 10%;
    left: 25%;
    transform: translate(-10%, -25%);
    font-size: 2rem !important;
  }

  .doploma-2 {
    top: 14%;
    left: 25%;
    transform: translate(-14%, -25%);
    font-size: 1.5rem !important;
  }

  /* master */
  .master-1 {
    top: 33%;
    left: 25%;
    transform: translate(-33%, -25%);
    font-size: 2rem !important;
  }

  .master-2 {
    top: 38%;
    left: 25%;
    transform: translate(-33%, -25%);
    font-size: 1.5rem !important;
  }

  /* High-School */
  .High-School-1 {
    top: 14%;
    left: 51%;
    transform: translate(-14%, -52%);
    font-size: 2rem !important;
  }

  .High-School-2 {
    top: 18%;
    left: 51%;
    transform: translate(-18%, -52%);
    font-size: 1.5rem !important;
  }

  /* primary */
  .primary-1 {
    top: 51%;
    left: 60%;
    transform: translate(-51%, -60%);
    font-size: 2rem !important;
  }

  .primary-2 {
    top: 55%;
    left: 60%;
    transform: translate(-51%, -60%);
    font-size: 1.5rem !important;
  }

  /* BA */
  .BA-1 {
    top: 16%;
    left: 68%;
    transform: translate(-16%, -68%);
    font-size: 2rem !important;
  }

  .BA-2 {
    top: 20%;
    left: 68%;
    transform: translate(-20%, -68%);
    font-size: 1.5rem !important;
  }

  /* PhD */
  .PhD-1 {
    top: 27%;
    left: 70%;
    transform: translate(-27%, -70%);
    font-size: 2rem !important;
  }

  .PhD-2 {
    top: 31%;
    left: 70%;
    transform: translate(-31%, -70%);
    font-size: 1.5rem !important;
  }

  /* square numbers */
  .manager-position-1 {
    top: 63%;
    left: 33%;
    transform: translate(-63%, -33%);
    font-size: 2rem !important;
  }

  .manager-position-2 {
    top: 66%;
    left: 33%;
    transform: translate(-66%, -33%);
    font-size: 1.5rem !important;
  }

  .unskilled-position-1 {
    top: 63%;
    left: 24%;
    transform: translate(-66%, -24%);
    font-size: 2rem !important;
  }

  .unskilled-position-2 {
    top: 66%;
    left: 24%;
    transform: translate(-66%, -24%);
    font-size: 1.5rem !important;
  }

  .supervisor-position-1 {
    top: 87%;
    left: 33%;
    transform: translate(-66%, -33%);
    font-size: 2rem !important;
  }

  .supervisor-position-2 {
    top: 90%;
    left: 33%;
    transform: translate(-66%, -33%);
    font-size: 1.5rem !important;
  }

  .skilled-position-1 {
    top: 87%;
    left: 24%;
    transform: translate(-63%, -24%);
    font-size: 2rem !important;
  }

  .skilled-position-2 {
    top: 90%;
    left: 24%;
    transform: translate(-66%, -24%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-1 {
    top: 72%;
    left: 76%;
    transform: translate(-72%, -76%);
    font-size: 2rem !important;
  }

  .numberOfEmployee-2 {
    top: 70%;
    left: 66.2%;
    transform: translate(-70%, -66.2%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-small-2 {
    top: 72.5%;
    left: 66.2%;
    transform: translate(-72%, -66.2%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-3 {
    top: 70%;
    left: 56.4%;
    transform: translate(-70%, -56.4%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-small-3 {
    top: 72.5%;
    left: 56.4%;
    transform: translate(-72%, -56.4%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-4 {
    top: 70%;
    left: 46.5%;
    transform: translate(-70%, -46%);
    font-size: 1.5rem !important;
  }

  .numberOfEmployee-small-4 {
    top: 72.5%;
    left: 46.5%;
    transform: translate(-72%, -46%);
    font-size: 1.5rem !important;
  }

  .boy-1 {
    top: 88%;
    left: 59%;
    transform: translate(-88%, -59%);
    font-size: 2rem !important;
  }

  .boy-2 {
    top: 92%;
    left: 59%;
    transform: translate(-92%, -59%);
    font-size: 1.5rem !important;
  }

  .girl-1 {
    top: 88.5%;
    left: 73%;
    transform: translate(-88%, -73%);
    font-size: 2rem !important;
  }

  .girl-2 {
    top: 92%;
    left: 74%;
    transform: translate(-92%, -74%);
    font-size: 1.5rem !important;
  }
}

/* 1680 x 1050 [ Desktop/Laptop ] */
@media only screen and (min-width:1680px) and (max-width:1900px) {

  /* doploma */
  .doploma-1 {
    top: 5rem;
    left: 33rem;
  }

  .doploma-2 {
    top: 7.5rem;
    left: 33rem;
  }

  /* master */
  .master-1 {
    top: 18rem;
    left: 32rem;
  }

  .master-2 {
    top: 21rem;
    left: 32rem;
  }

  /* High-School */
  .High-School-1 {
    top: 7rem;
    left: 61rem;
  }

  .High-School-2 {
    top: 9.4rem;
    left: 61rem;
  }

  /* primary */
  .primary-1 {
    top: 27.5rem;
    right: 46rem;
  }

  .primary-2 {
    top: 30rem;
    right: 47.5rem;
  }

  /* BA */
  .BA-1 {
    top: 7.5rem;
    right: 37rem;
  }

  .BA-2 {
    top: 10rem;
    right: 37.5rem;
  }

  /* PhD */
  .PhD-1 {
    top: 14rem;
    right: 32rem;
  }

  .PhD-2 {
    top: 16.2rem;
    right: 33rem;
  }
}

/* 1,280 x 720 */
@media (min-width:768px) and (max-width:992px) {

  /* Top left text */
  .doploma-1 {
    top: 3.5rem;
    left: 26rem;
  }
}

.responsive {
  width: 80%;
  height: auto;
}

.bg-infoGraph {
  background-color: #d1d3d4 !important;
}

.thumbnail {
  position: relative;
  display: inline-block;
}