#comparison a, #compatibility a {
  text-decoration: none;
}
#comparison h2, #comparison h3, #comparison p, #comparison a, #comparison span, #comparison li, #compatibility h2, #compatibility h3, #compatibility p, #compatibility a, #compatibility span, #compatibility li {
  font-weight: 300;
}
#comparison img, #compatibility img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
#comparison .container, #compatibility .container {
  position: relative;
  display: block;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
}
#comparison #subnav, #compatibility #subnav {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 50px;
  padding: 0 10px;
  background-color: #535353;
}
#comparison #subnav .subnav-this, #compatibility #subnav .subnav-this {
  position: absolute;
  left: 25px;
  font-size: 20px;
  line-height: 50px;
  color: #fff;
}
@media (max-width: 1000px) {
  #comparison #subnav .subnav-this, #compatibility #subnav .subnav-this {
    left: 0px;
    font-size: 18px;
  }
}
#comparison #subnav .subnav-this a, #compatibility #subnav .subnav-this a {
  display: inline-block;
  margin: 0 20px;
  font-size: 18px;
  line-height: 50px;
  color: #fff;
}
@media (max-width: 1000px) {
  #comparison #subnav .subnav-this a, #compatibility #subnav .subnav-this a {
    cursor: pointer;
    display: block;
  }
}
#comparison #subnav .subnav-menu #subnav-input, #compatibility #subnav .subnav-menu #subnav-input {
  display: none;
}
#comparison #subnav .subnav-menu #subnav-input:checked ~ .subnav-button-wrapper .subnav-icon, #compatibility #subnav .subnav-menu #subnav-input:checked ~ .subnav-button-wrapper .subnav-icon {
  transform: translateY(0);
}
#comparison #subnav .subnav-menu #subnav-input:checked ~ .subnav-button-wrapper .subnav-icon::before, #compatibility #subnav .subnav-menu #subnav-input:checked ~ .subnav-button-wrapper .subnav-icon::before {
  transform-origin: 100% 0;
  transform: rotate(-45deg) scaleY(1.5) translateX(5.2px);
}
#comparison #subnav .subnav-menu #subnav-input:checked ~ .subnav-button-wrapper .subnav-icon::after, #compatibility #subnav .subnav-menu #subnav-input:checked ~ .subnav-button-wrapper .subnav-icon::after {
  transform-origin: 0 0;
  transform: rotate(45deg) scaleY(1.5) translateX(-5.2px);
}
#comparison #subnav .subnav-menu #subnav-input:checked ~ .subnav-button-wrapper ~ .subnav-section-wrapper, #compatibility #subnav .subnav-menu #subnav-input:checked ~ .subnav-button-wrapper ~ .subnav-section-wrapper {
  visibility: visible;
  opacity: 1;
}
#comparison #subnav .subnav-menu .subnav-button-wrapper, #compatibility #subnav .subnav-menu .subnav-button-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: none;
  width: 60px;
  min-width: 60px;
  height: 48px;
  margin-left: -30px;
  pointer-events: none;
}
@media (max-width: 1000px) {
  #comparison #subnav .subnav-menu .subnav-button-wrapper, #compatibility #subnav .subnav-menu .subnav-button-wrapper {
    display: block;
    pointer-events: auto;
  }
}
#comparison #subnav .subnav-menu .subnav-button-wrapper .subnav-button, #compatibility #subnav .subnav-menu .subnav-button-wrapper .subnav-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  min-height: 100%;
}
#comparison #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper, #compatibility #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper {
  position: relative;
  z-index: 2;
  max-width: 980px;
  padding: 0 15px;
  margin: 0 auto;
  border-bottom: none;
}
#comparison #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper .subnav-label, #compatibility #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper .subnav-label {
  cursor: pointer;
  display: block;
  width: 40px;
  height: 48px;
}
#comparison #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper .subnav-label .subnav-icon, #compatibility #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper .subnav-label .subnav-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transform: translateY(15%);
  transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), transform-origin 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}
#comparison #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper .subnav-label .subnav-icon::before, #compatibility #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper .subnav-label .subnav-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 12px;
  height: 1px;
  transform-origin: 100% 100%;
  transform: rotate(40deg) scaleY(1.5) translateX(0);
  transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), transform-origin 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  background: #fff;
}
#comparison #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper .subnav-label .subnav-icon::after, #compatibility #subnav .subnav-menu .subnav-button-wrapper .subnav-button .subnav-label-wrapper .subnav-label .subnav-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 12px;
  height: 1px;
  transform-origin: 0 100%;
  transform: rotate(-40deg) scaleY(1.5) translateX(0);
  transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), transform-origin 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  background: #fff;
}
#comparison #subnav .subnav-menu .subnav-section-wrapper, #compatibility #subnav .subnav-menu .subnav-section-wrapper {
  position: absolute;
  right: 10px;
  display: inline-block;
}
@media (max-width: 1000px) {
  #comparison #subnav .subnav-menu .subnav-section-wrapper, #compatibility #subnav .subnav-menu .subnav-section-wrapper {
    top: 50px;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    background-color: #535353;
  }
}
#comparison #subnav .subnav-menu .subnav-section-wrapper .subnav-section, #compatibility #subnav .subnav-menu .subnav-section-wrapper .subnav-section {
  display: inline-block;
  margin: 0 20px;
}
#comparison #subnav .subnav-menu .subnav-section-wrapper .subnav-section p, #comparison #subnav .subnav-menu .subnav-section-wrapper .subnav-section a, #compatibility #subnav .subnav-menu .subnav-section-wrapper .subnav-section p, #compatibility #subnav .subnav-menu .subnav-section-wrapper .subnav-section a {
  display: inline-block;
  margin: 0 20px;
  font-size: 18px;
  line-height: 50px;
  color: #fff;
}
@media (max-width: 1000px) {
  #comparison #subnav .subnav-menu .subnav-section-wrapper .subnav-section p, #comparison #subnav .subnav-menu .subnav-section-wrapper .subnav-section a, #compatibility #subnav .subnav-menu .subnav-section-wrapper .subnav-section p, #compatibility #subnav .subnav-menu .subnav-section-wrapper .subnav-section a {
    cursor: pointer;
    display: block;
  }
}
#comparison #subnav .subnav-menu .subnav-section-wrapper .subnav-section .current, #compatibility #subnav .subnav-menu .subnav-section-wrapper .subnav-section .current {
  color: #9b9b9b;
}
#comparison .headline, #compatibility .headline {
  text-align: center;
}
#comparison .headline::after, #compatibility .headline::after {
  content: "";
  display: block;
  background: url(../img/solution/horizontal-shadow.png) no-repeat;
  background-size: contain;
  width: 100%;
  max-width: 970px;
  height: 8px;
  position: relative;
  transform: translateX(-50%);
  bottom: -8px;
  left: 50%;
}
#comparison .headline h2, #compatibility .headline h2 {
  word-break: keep-all;
  margin: 15px 0;
  font-size: 64px;
  line-height: 1em;
  color: #4d4d4d;
}
@media (max-width: 1000px) {
  #comparison .headline h2, #compatibility .headline h2 {
    font-size: 50px;
  }
}
@media (max-width: 500px) {
  #comparison .headline h2, #compatibility .headline h2 {
    font-size: 40px;
  }
}
#comparison .headline h3, #compatibility .headline h3 {
  font-size: 34px;
  color: #9b9b9b;
}
@media (max-width: 1000px) {
  #comparison .headline h3, #compatibility .headline h3 {
    font-size: 28px;
  }
}
@media (max-width: 500px) {
  #comparison .headline h3, #compatibility .headline h3 {
    font-size: 24px;
  }
}
#comparison .comparison-table, #compatibility .comparison-table {
  overflow: auto;
  padding: 20px;
}
@media (max-width: 1000px) {
  #comparison .comparison-table .container, #compatibility .comparison-table .container {
    width: 750px;
  }
}
#comparison .comparison-table table, #compatibility .comparison-table table {
  width: 100%;
  margin: 20px 0;
  border-collapse: separate;
  border-spacing: 2px;
  background-color: transparent;
}
#comparison .comparison-table table .comparison-striped-row:nth-child(2n), #compatibility .comparison-table table .comparison-striped-row:nth-child(2n) {
  background-color: #cbcbcb;
}
#comparison .comparison-table table .comparison-striped-row:nth-child(odd), #compatibility .comparison-table table .comparison-striped-row:nth-child(odd) {
  background-color: #e2e2e2;
}
#comparison .comparison-table table td, #compatibility .comparison-table table td {
  padding: 10px;
  color: #4d4d4d;
}
#comparison .comparison-table table .comparison-first-row .comparison-head, #compatibility .comparison-table table .comparison-first-row .comparison-head {
  vertical-align: bottom;
}
#comparison .comparison-table table .comparison-first-row .comparison-data, #compatibility .comparison-table table .comparison-first-row .comparison-data {
  vertical-align: bottom;
  min-width: 96px;
  max-width: 96px;
}
#comparison .comparison-table table .comparison-head, #compatibility .comparison-table table .comparison-head {
  vertical-align: middle;
  min-width: 160px;
  max-width: 160px;
}
#comparison .comparison-table table .comparison-head h3, #compatibility .comparison-table table .comparison-head h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}
#comparison .comparison-table table .comparison-data, #compatibility .comparison-table table .comparison-data {
  text-align: center;
  vertical-align: middle;
}
#comparison .comparison-table .caption p, #compatibility .comparison-table .caption p {
  margin-bottom: 10px;
}

#compatibility .comparison-striped-row td img {
  display: inline-block;
  vertical-align: bottom;
}
#compatibility .comparison-striped-row td span {
  display: inline-block;
  height: 14px;
  width: 24px;
}