@keyframes tab-panel-show-hide {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.nav-tab {
  margin-top: 20px;
  padding: 1em;
}

.nav-tab .nav-tab__panel.nav-tab__panel_hiding {
  animation-name: tab-panel-show-hide;
  animation-duration: 0.07s;
  animation-timing-function: ease-in-out;
  animation-direction: reverse;
}

.nav-tab .nav-tab__panel.nav-tab__panel_hidden {
  display: none;
}

.nav-tab .nav-tab__panel.nav-tab__panel_showing {
  animation-name: tab-panel-show-hide;
  animation-duration: 0.07s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
}

.nav-tab .nav-tab__panel.nav-tab__panel_shown {
  display: block;
}

.page .nav-tab h3 {
  margin-bottom: 1em;
}

.page .nav-tab h4 {
  margin-top: 1.25em;
  margin-bottom: 0.75em;
  font-size: 1.25em;
}

@media (min-width: 576px) {
  .nav-tab {
    padding: 1.5em;
  }
}

@media (min-width: 768px) {
  .nav-tab {
    padding: 2em;
  }
}

@media (min-width: 992px) {
  .nav-tab {
    padding: 2.5em;
  }
}