/* tabs */
.tab-group .tabs {
  overflow: hidden;
}

.tab-group .tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 30em) {
  .tab-group .tabs ul {
    display: flex;
  }
}

.tab-group .tabs li {
  display: flex;
  margin-top: 0;
  width: 100%;
}

.tab-group .tabs a {
  display: block;
  align-content: center;
  margin: 0;
  padding: 0.75rem 0.5rem 0.5rem;
  border-bottom: 3px solid transparent;
  width: 100%;
  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);
  margin-top: 0;
}

.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;
  margin-top: 0;
  padding: 1.5rem;
}

.tab-group .display .panel[data-active="true"] {
  /* !important to override absolute positioning set with JS */
  position: relative !important;
}

.tab-group .display .panel > *:first-child {
  margin-top: 0;
}

@media (min-width: 50em) {
  .tab-group .display .panel .graphic.alignright {
    right: 0;
    margin-left: 2rem;
  }

  .tab-group .display .panel .graphic.alignleft {
    left: 0;
    margin-right: 2rem;
  }
}

/* -------------------------------------------------------------------------- */
.bordered-tab-group {
  /* 1px border around tab group */
  position: relative;
  left: -1px;
  width: calc(100% + 2px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.bordered-tab-group .tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.bordered-tab-group .tabs a {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.bordered-tab-group .tabs li:first-child a {
  border-top: none;
}

@media (min-width: 30em) {
  .bordered-tab-group .tabs a {
    border-top: none;
  }
}