.c-tab-scroll {

}

.c-tab-scroll__overlay {
  background-position-x: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.c-tab-scroll__tabs {
  text-align: center;
  font-size: 0;
  line-height: 0;
  letter-spacing: -4px;
  margin: 20px -14px;
}

.c-tab-scroll__tabs li {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  letter-spacing: 0;
  font: 500 24px/26px "museo", Arial, Helvetica, sans-serif;
  padding: 0 14px 26px;
}

.c-tab-scroll__tabs li:after {
  display: none;
}

.c-tab-scroll__tabs li.is-active a {
  background: #0c81ad;
}

.c-tab-scroll__tabs li a {
  display: block;
  background: #C9C9C9;
  color: #fff;
  border-radius: 4px;
  padding: 15px;
}

.c-tab-scroll__tabs li a:hover {
  background: #0c81ad;
}

@media only screen and (max-width: 767px) {
  .c-tab-scroll__tabs {
    margin: 0 -6px;
  }

  .c-tab-scroll__tabs li {
    font-size: 15px;
    line-height: 15px;
    padding: 0 10px 14px;
  }

  .c-tab-scroll__tabs li a {
    padding: 9px;
  }
}

/* Position of cards based on screen size */
.card1 {  background-position-y: -0px;  }
.card2 {  background-position-y: -189px;  }
.card3 {  background-position-y: -379px;  }
.card4 {  background-position-y: -567px;  }
.card5 {  background-position-y: -758px;  }
.card6 {  background-position-y: -980px;  }

@media only screen and (max-width: 1400px) {
  .c-tab-scroll {
    width: 500px;
  }
  .card1 {  background-position-y: -0px;  }
  .card2 {  background-position-y: -170px;  }
  .card3 {  background-position-y: -340px;  }
  .card4 {  background-position-y: -510px;  }
  .card5 {  background-position-y: -675px;  }
  .card6 {  background-position-y: -880px;  }
}

@media only screen and (max-width: 1023px) {

  .c-tab-scroll {
    width: 100%;
  }

  .c-tab-scroll__overlay {
    width: 500px;
  }
}

@media only screen and (max-width: 530px) {
  .c-tab-scroll__overlay {
    width: 300px;
  }
  .card1 {  background-position-y: -0px;  }
  .card2 {  background-position-y: -100px;  }
  .card3 {  background-position-y: -204px;  }
  .card4 {  background-position-y: -305px;  }
  .card5 {  background-position-y: -405px;  }
  .card6 {  background-position-y: -525px;  }
}