.wheel-wrap {
  margin: 0 auto 40px;
  padding: 0;
}
@media screen and (min-width: 770px) {
  .wheel-wrap {
    display: block;
    width: fit-content;
    margin: 0 auto 40px;
    padding: 20px 0;
  }
  @-moz-document url-prefix() {
    .wheel-wrap {
      width: 80%;
    }
    .wheel-wrap svg {
      width: 100%;
    }
  }
}
@media screen and (min-width: 1360px) {
  .wheel-wrap {
    margin: 0;
    margin-right: 20px;
  }
}
.wheel-wrap svg {
  display: none;
  width: 100%;
  height: fit-content;
}
@media screen and (min-width: 770px) {
  .wheel-wrap svg {
    display: block;
  }
}
@media screen and (min-width: 1360px) {
  .wheel-wrap svg {
    width: auto;
    height: auto;
  }
  @-moz-document url-prefix() {
    .wheel-wrap svg {
      width: 100%;
    }
  }
}
.wheel-wrap svg + img {
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 770px) {
  .wheel-wrap svg + img {
    display: none;
  }
}
.wheel circle, .wheel .wedge {
  stroke: none;
}
.wheel text {
  font-size: 14px;
}
.wheel .nocircle {
  fill: none;
  stroke: none;
}
.wheel .ring1 {
  fill: #d8ebf3;
}
.wheel .ring2 {
  fill: #a3cde6;
}
.wheel .ring3 {
  fill: #6fb1da;
}
.wheel .cls-4 {
  fill: #000;
}
.wheel .centercircle {
  fill: #fff;
}
.wheel .ring4 {
  fill: #3c95cf;
}
.wheel .cls-6 {
  fill: #ff7801;
}
.wheel .cls-7 {
  fill: #ffcc02;
}
.wheel .cls-8 {
  fill: #85bc17;
}
.wheel .greenwedge {
  fill: #85bc17;
}
.wheel .yellowwedge {
  fill: #ffcc02;
}
.wheel .orangewedge {
  fill: #ff7801;
}
.wheel .line {
  fill: none;
  stroke: #3c95cf;
  stroke-width: 3;
}
.wheel .toprings {
  letter-spacing: 1px;
  font-family: 'Inter';
  font-weight: 800;
  text-align: start;
  text-anchor: start;
}
.wheel .bottomrings {
  font-family: 'Inter';
  font-weight: 700;
  text-align: start;
  text-anchor: start;
}
.wheel .innertext {
  font-family: 'Inter';
  font-weight: 700;
}
.wheel a[href='#classrooms'] .rotate-text {
  transform: rotate(14deg);
  transform-origin: center;
}
.wheel a[href='#schools'] .rotate-text {
  transform: rotate(10deg);
  transform-origin: center;
}
.wheel a.hovered, .wheel a:focus-visible, .wheel a:hover {
  outline: none;
}
.wheel a.hovered text, .wheel a.hovered .innertext, .wheel a:focus-visible text, .wheel a:focus-visible .innertext, .wheel a:hover text, .wheel a:hover .innertext {
  fill: #fff;
}
.wheel a.hovered .ring1, .wheel a:focus-visible .ring1, .wheel a:hover .ring1 {
  fill: #278acc;
}
.wheel a.hovered .ring2, .wheel a:focus-visible .ring2, .wheel a:hover .ring2 {
  fill: #278acc;
}
.wheel a.hovered .ring3, .wheel a:focus-visible .ring3, .wheel a:hover .ring3 {
  fill: #278acc;
}
.wheel a.hovered .cls-4, .wheel a:focus-visible .cls-4, .wheel a:hover .cls-4 {
  fill: #2b2a2a;
}
.wheel a.hovered .centercircle, .wheel a:focus-visible .centercircle, .wheel a:hover .centercircle {
  fill: #5a5a5a;
}
.wheel a.hovered .ring4, .wheel a:focus-visible .ring4, .wheel a:hover .ring4 {
  fill: #278acc;
}
.wheel a.hovered .cls-6, .wheel a:focus-visible .cls-6, .wheel a:hover .cls-6 {
  fill: #df6a03;
}
.wheel a.hovered .cls-7, .wheel a:focus-visible .cls-7, .wheel a:hover .cls-7 {
  fill: #d8ad03;
}
.wheel a.hovered .cls-8, .wheel a:focus-visible .cls-8, .wheel a:hover .cls-8 {
  fill: #659701;
}
.wheel a.hovered .greenwedge, .wheel a:focus-visible .greenwedge, .wheel a:hover .greenwedge {
  fill: #679903;
}
.wheel a.hovered .yellowwedge, .wheel a:focus-visible .yellowwedge, .wheel a:hover .yellowwedge {
  fill: #d3a904;
}
.wheel a.hovered .orangewedge, .wheel a:focus-visible .orangewedge, .wheel a:hover .orangewedge {
  fill: #d16200;
}
.what-is-the-casel-framework-page .container .page-content, .what-is-the-casel-wheel-page .container .page-content {
  max-width: 100%;
  width: 100%;
}
.what-is-the-casel-framework-page .container .page-content h2, .what-is-the-casel-wheel-page .container .page-content h2 {
  max-width: 844px;
  margin: 0 auto 8px;
}
@media screen and (min-width: 770px) {
  .what-is-the-casel-framework-page .container .page-content h2, .what-is-the-casel-wheel-page .container .page-content h2 {
    margin: 0 auto 32px;
  }
}
.what-is-the-casel-framework-page .container .page-content p, .what-is-the-casel-framework-page .container .page-content ul, .what-is-the-casel-framework-page .container .page-content ol, .what-is-the-casel-framework-page .container .page-content img, .what-is-the-casel-wheel-page .container .page-content p, .what-is-the-casel-wheel-page .container .page-content ul, .what-is-the-casel-wheel-page .container .page-content ol, .what-is-the-casel-wheel-page .container .page-content img {
  max-width: 844px;
  margin: 0 auto 24px;
}
.what-is-the-casel-framework-page .container .page-content .top, .what-is-the-casel-wheel-page .container .page-content .top {
  max-width: 844px;
  margin: 0 auto 24px;
}
@media screen and (min-width: 1360px) {
  .what-is-the-casel-framework-page .container .page-content .top, .what-is-the-casel-wheel-page .container .page-content .top {
    margin: -60px 18% 0 0;
  }
}
.what-is-the-casel-framework-page .casel-wheel-wrap, .what-is-the-casel-wheel-page .casel-wheel-wrap {
  position: relative;
  margin: 40px 0;
}
.what-is-the-casel-framework-page .casel-wheel-wrap .container, .what-is-the-casel-wheel-page .casel-wheel-wrap .container {
  padding: 0;
}
.what-is-the-casel-framework-page .casel-wheel-wrap a, .what-is-the-casel-wheel-page .casel-wheel-wrap a {
  text-decoration: none;
}
.what-is-the-casel-framework-page .casel-wheel-wrap select, .what-is-the-casel-wheel-page .casel-wheel-wrap select {
  width: 100%;
  margin-bottom: 25px;
  padding: 8px 16px;
  border: 1px solid #000;
  background-color: transparent;
  background-position: 96% center;
  background-size: 10px;
  -webkit-appearance: none;
}
@media screen and (min-width: 770px) {
  .what-is-the-casel-framework-page .casel-wheel-wrap select, .what-is-the-casel-wheel-page .casel-wheel-wrap select {
    display: none;
  }
}
.what-is-the-casel-framework-page .wheel-info, .what-is-the-casel-wheel-page .wheel-info {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.what-is-the-casel-framework-page .wheel-info h3, .what-is-the-casel-wheel-page .wheel-info h3 {
  max-width: 844px;
  margin: 0 auto 24px;
}
.what-is-the-casel-framework-page .wheel-info .card-body ul, .what-is-the-casel-wheel-page .wheel-info .card-body ul {
  padding-left: 24px;
}
@media screen and (min-width: 770px) {
  .what-is-the-casel-framework-page .wheel-info, .what-is-the-casel-wheel-page .wheel-info {
    margin: 0 -10px;
    padding: 0;
  }
}
.what-is-the-casel-framework-page .wheel-info .card, .what-is-the-casel-wheel-page .wheel-info .card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  background-color: #fff;
}
.what-is-the-casel-framework-page .wheel-info .card .card-body, .what-is-the-casel-wheel-page .wheel-info .card .card-body {
  padding: 0;
  box-shadow: none;
}
@media screen and (min-width: 770px) {
  .what-is-the-casel-framework-page .wheel-info .card .card-body, .what-is-the-casel-wheel-page .wheel-info .card .card-body {
    padding: 0 22px;
  }
}
.what-is-the-casel-framework-page .wheel-info .card .card-body ul, .what-is-the-casel-wheel-page .wheel-info .card .card-body ul {
  padding-left: 24px;
}
.what-is-the-casel-framework-page .wheel-info .card p:last-of-type, .what-is-the-casel-framework-page .wheel-info .card ul:last-of-type, .what-is-the-casel-framework-page .wheel-info .card ol:last-of-type, .what-is-the-casel-framework-page .wheel-info .card a:last-of-type, .what-is-the-casel-wheel-page .wheel-info .card p:last-of-type, .what-is-the-casel-wheel-page .wheel-info .card ul:last-of-type, .what-is-the-casel-wheel-page .wheel-info .card ol:last-of-type, .what-is-the-casel-wheel-page .wheel-info .card a:last-of-type {
  margin-bottom: 0;
}
.what-is-the-casel-framework-page .wheel-info .card:last-child, .what-is-the-casel-wheel-page .wheel-info .card:last-child {
  position: relative;
  opacity: 1;
  z-index: 2;
}
.what-is-the-casel-framework-page .wheel-info .card.active, .what-is-the-casel-framework-page .wheel-info .card:target, .what-is-the-casel-wheel-page .wheel-info .card.active, .what-is-the-casel-wheel-page .wheel-info .card:target {
  position: relative;
  opacity: 1;
  z-index: 3;
}
.what-is-the-casel-framework-page .wheel-info .card.active ~ .card:last-child, .what-is-the-casel-framework-page .wheel-info .card:target ~ .card:last-child, .what-is-the-casel-wheel-page .wheel-info .card.active ~ .card:last-child, .what-is-the-casel-wheel-page .wheel-info .card:target ~ .card:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: transform 0.5s ease;
  background-color: #fff;
}