body,
html {
  height: 100%;
}

.bg-hsb {
  background-image: -webkit-linear-gradient(left, rgba(10, 85, 140, 0.2) 10%, rgba(50, 180, 200, 0.2));
  background-image: -o-linear-gradient(left, rgba(10, 85, 140, 0.2) 10%, rgba(50, 180, 200, 0.2));
  background-image: linear-gradient(to right, rgba(10, 85, 140, 0.2) 10%, rgba(50, 180, 200, 0.2));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-1 {
  background-image: -webkit-linear-gradient(left, rgb(10, 85, 140) 10%, rgb(50, 180, 200));
  background-image: -o-linear-gradient(left, rgb(10, 85, 140) 10%, rgb(50, 180, 200));
  background-image: linear-gradient(to right, rgb(10, 85, 140) 10%, rgb(50, 180, 200));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-1-trans {
/*
  background-image: -webkit-linear-gradient(left, rgba(10, 85, 140, 0.2) 10%, rgba(50, 180, 200, 0.2));
  background-image: -o-linear-gradient(left, rgba(10, 85, 140, 0.2) 10%, rgba(50, 180, 200, 0.2));
  background-image: linear-gradient(to right, rgba(10, 85, 140, 0.2) 10%, rgba(50, 180, 200, 0.2));
*/
  background-color: rgba(10, 85, 140, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-2 {
  background-image: -webkit-linear-gradient(left, rgb(50, 150, 200) 10%, rgb(0, 145, 90));
  background-image: -o-linear-gradient(left, rgb(50, 150, 200) 10%, rgb(0, 145, 90));
  background-image: linear-gradient(to right, rgb(50, 150, 200) 10%, rgb(0, 145, 90));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-2-trans {
/*
  background-image: -webkit-linear-gradient(left, rgba(50, 150, 200, 0.2) 10%, rgba(0, 145, 90, 0.2));
  background-image: -o-linear-gradient(left, rgba(50, 150, 200, 0.2) 10%, rgba(0, 145, 90, 0.2));
  background-image: linear-gradient(to right, rgba(50, 150, 200, 0.2) 10%, rgba(0, 145, 90, 0.2));
*/
  background-color: rgba(50, 150, 200, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-3 {
  background-image: -webkit-linear-gradient(left, rgb(0, 145, 90) 10%, rgb(110, 165, 60));
  background-image: -o-linear-gradient(left, rgb(0, 145, 90) 10%, rgb(110, 165, 60));
  background-image: linear-gradient(to right, rgb(0, 145, 90) 10%, rgb(110, 165, 60));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-3-trans {
/*
  background-image: -webkit-linear-gradient(left, rgba(0, 145, 90, 0.2) 10%, rgba(110, 165, 60, 0.2));
  background-image: -o-linear-gradient(left, rgba(0, 145, 90, 0.2) 10%, rgba(110, 165, 60, 0.2));
  background-image: linear-gradient(to right, rgba(0, 145, 90, 0.2) 10%, rgba(110, 165, 60, 0.2));
*/
  background-color: rgba(0, 145, 90, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-4 {
  background-image: -webkit-linear-gradient(left, rgb(110, 165, 60) 10%, rgb(250, 190, 0));
  background-image: -o-linear-gradient(left, rgb(110, 165, 60) 10%, rgb(250, 190, 0));
  background-image: linear-gradient(to right, rgb(110, 165, 60) 10%, rgb(250, 190, 0));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-4-trans {
/*
  background-image: -webkit-linear-gradient(left, rgba(110, 165, 60, 0.2) 10%, rgba(250, 190, 0, 0.2));
  background-image: -o-linear-gradient(left, rgba(110, 165, 60, 0.2) 10%, rgba(250, 190, 0, 0.2));
  background-image: linear-gradient(to right, rgba(110, 165, 60, 0.2) 10%, rgba(250, 190, 0, 0.2));
*/
  background-color: rgba(110, 165, 60, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-5 {
  background-image: -webkit-linear-gradient(left, rgb(250, 190, 0) 10%, rgb(240, 120, 35));
  background-image: -o-linear-gradient(left, rgb(250, 190, 0) 10%, rgb(240, 120, 35));
  background-image: linear-gradient(to right, rgb(250, 190, 0) 10%, rgb(240, 120, 35));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-5-trans {
/*
  background-image: -webkit-linear-gradient(left, rgba(250, 190, 0, 0.2) 10%, rgba(240, 120, 35, 0.2));
  background-image: -o-linear-gradient(left, rgba(250, 190, 0, 0.2) 10%, rgba(240, 120, 35, 0.2));
  background-image: linear-gradient(to right, rgba(250, 190, 0, 0.2) 10%, rgba(240, 120, 35, 0.2));
*/
  background-color: rgba(250, 190, 0, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hsb-6 {
  background-image: -webkit-linear-gradient(left, rgb(240, 120, 35) 10%, rgb(195, 5, 50));
  background-image: -o-linear-gradient(left, rgb(240, 120, 35) 10%, rgb(195, 5, 50));
  background-image: linear-gradient(to right, rgb(240, 120, 35) 10%, rgb(195, 5, 50));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hsb-6-trans {
/*
  background-image: -webkit-linear-gradient(left, rgba(240, 120, 35, 0.2) 10%, rgba(195, 5, 50, 0.2));
  background-image: -o-linear-gradient(left, rgba(240, 120, 35, 0.2) 10%, rgba(195, 5, 50, 0.2));
  background-image: linear-gradient(to right, rgba(240, 120, 35, 0.2) 10%, rgba(195, 5, 50, 0.2));
*/
  background-color: rgba(240, 120, 35, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-7 {
  background-image: -webkit-linear-gradient(left, rgb(195, 5, 50) 10%, rgb(120, 100, 165));
  background-image: -o-linear-gradient(left, rgb(195, 5, 50) 10%, rgb(120, 100, 165));
  background-image: linear-gradient(to right, rgb(195, 5, 50) 10%, rgb(120, 100, 165));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-7-trans {
/*
  background-image: -webkit-linear-gradient(left, rgba(195, 5, 50, 0.2) 10%, rgba(120, 100, 165, 0.2));
  background-image: -o-linear-gradient(left, rgba(195, 5, 50, 0.2) 10%, rgba(120, 100, 165, 0.2));
  background-image: linear-gradient(to right, rgba(195, 5, 50, 0.2) 10%, rgba(120, 100, 165, 0.2));
*/
  background-color: rgba(195, 5, 50, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hsb-8 {
  background-image: -webkit-linear-gradient(left, rgb(120, 100, 165) 10%, rgb(10, 85, 140));
  background-image: -o-linear-gradient(left, rgb(120, 100, 165) 10%, rgb(10, 85, 140));
  background-image: linear-gradient(to right, rgb(120, 100, 165) 10%, rgb(10, 85, 140));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hsb-8-trans {
/*
  background-image: -webkit-linear-gradient(left, rgba(120, 100, 165, 0.2) 10%, rgba(10, 85, 140, 0.2));
  background-image: -o-linear-gradient(left, rgba(120, 100, 165, 0.2) 10%, rgba(10, 85, 140, 0.2));
  background-image: linear-gradient(to right, rgba(120, 100, 165, 0.2) 10%, rgba(10, 85, 140, 0.2));
*/
  background-color: rgba(120, 100, 165, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* not active */
.nav-pills .pill-hsb .nav-link:not(.active) {
    background-color: rgba(65,70,75,0.20);
}


/* active (faded) */
.nav-pills .pill-1 .nav-link {
    color: white;
}

.nav-pills li {
    margin-left: 10px;
}