/* tabs */
.tab-group .tabs {
  overflow: hidden;
}
.tab-group .tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tab-group .tabs li {
  float: left;
  /* width set with JS: 100% / number of tabs */
}
.tab-group .tabs a {
  display: block;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 0.5rem 0.5rem;
  font-size: 0.9375rem;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #999999;
  background-color: white;
}
.tab-group .tabs [data-active="false"] a:hover,
.tab-group .tabs [data-active="false"] a:focus {
  color: white;
  background-color: #3d9fc1;
}
.tab-group .tabs [data-active="true"] a {
  border-color: #3d9fc1;
  color: #3d9fc1;
  background-color: white;
}



/* dots */
.tab-group .dots {
  margin-top: 2rem;
  text-align: center;
}
.tab-group .dots li {
  display: inline-block;
  margin: 0 0.25rem;
}
.tab-group .dots a {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.tab-group .dots [data-active="true"] a,
.tab-group .dots a:hover {
  background-color: #fff;
}



/* arrow styles in mmc-homepage.css */



/* display/panels */
.tab-group .display {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.125);
}
.tab-group .display .panels {
  position: relative;
  /* width set with JS: 100% * number of panels */
  left: 0;
  -webkit-transition: left 0.3s ease;
  transition: left 0.3s ease;
}
.tab-group .display .panel {
  /* absolute positioning set with JS */
  /* left set with JS: width * index of panel */
  /* width set with JS: 100% / number of panels */
  top: 0;
  box-sizing: border-box;
  padding: 1.5rem;
}
.tab-group .display .panel[data-active="true"] {
  /* !important to override absolute positioning set with JS */
  position: relative !important;
}