@charset "UTF-8";
#diagram {
  border-radius: 50%;
  background-color: #efe8df;
  width: 650px;
  height: 650px;
  position: relative;
  overflow: hidden;
  margin: 1rem 0;
}
#diagram svg {
  margin-left: 13px;
  transform: rotate(26deg);
  margin-top: -39px;
  position: absolute;
}
#diagram svg path {
  fill: transparent;
}
#diagram svg text {
  fill: #054860;
  font-size: 16px;
  font-weight: bold;
}
#diagram .mobile-title {
  display: none;
}
#diagram .fehb-logo {
  position: absolute;
  top: 54px;
  left: 297px;
}

.vert {
  height: 100%;
  background-color: blue;
  position: relative;
  right: 324px;
  width: 1px;
  float: right;
}

.center {
  border-top: 1px solid red;
  width: 100%;
  position: relative;
  top: 324px;
}

.pentagon {
  position: absolute;
  left: 284.5px;
  top: 286.75px;
  width: 0;
  height: 0;
  border-width: 0 40.5px 29.5px;
  border-style: solid;
  border-color: transparent transparent #03475f;
}
.pentagon:after {
  position: absolute;
  content: "";
  top: 29.5px;
  left: -40.5px;
  width: 50px;
  height: 0;
  background: none;
  border-width: 47px 15.5px 0;
  border-style: solid;
  border-color: #03475f transparent transparent;
}
.pentagon > img {
  position: relative;
  right: 22px;
  top: 15px;
  z-index: 1;
}

.card {
  width: 110px;
  height: 190px;
  left: 370px;
  top: 99px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #5850a0;
  position: absolute;
  transform: rotate(36deg);
  color: #fff;
}
.card:hover {
  cursor: pointer;
  opacity: 0.9;
}
.card:after {
  position: absolute;
  content: "";
  top: 189px;
  width: 50px;
  border-width: 41px 30px 0;
  height: 0;
  background: none;
  border-style: solid;
  border-color: #5850a0 transparent transparent;
}
.card p {
  margin: 0;
}

.card-icon {
  position: absolute;
  bottom: -32px;
  left: 38px;
  z-index: 1;
  transform: rotate(-36deg);
  border-radius: 50%;
  background-color: #03475f;
  padding: 4px;
  width: 28px;
  height: 28px;
}

.card__adopted {
  transform: rotate(109deg);
  left: 430px;
  top: 288.75px;
  background-color: #c94f29;
}
.card__adopted:after {
  border-color: #c94f29 transparent transparent;
}
.card__adopted > .card-icon {
  transform: rotate(-109deg);
}
.card__adopted .card-content {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
  margin-left: 43px;
}

.card__foster {
  transform: rotate(180deg);
  left: 270px;
  top: 402.75px;
  background-color: #207e93;
}
.card__foster:after {
  border-color: #207e93 transparent transparent;
}
.card__foster > .card-icon {
  transform: rotate(-180deg);
}
.card__foster .card-content {
  transform: rotate(180deg);
  margin-top: -4px;
}

.card__spouse {
  transform: rotate(-108deg);
  left: 109px;
  top: 286.75px;
  background-color: #b62d26;
}
.card__spouse:after {
  border-color: #b62d26 transparent transparent;
}
.card__spouse > .card-icon {
  transform: rotate(108deg);
}
.card__spouse .card-content {
  transform: rotate(90deg);
  width: 100%;
  height: 100%;
  margin-left: -58px;
  margin-top: -6px;
}

.card__child-support {
  background-color: #018543;
  transform: rotate(-36deg);
  left: 171px;
  top: 97.75px;
}
.card__child-support:after {
  border-color: #018543 transparent transparent;
}
.card__child-support > .card-icon {
  transform: rotate(36deg);
}

.MainContent ul.js-accordion .card-content {
  text-align: center;
  padding: 10px 8px;
  font-family: Arial, Helvetica, sans-serif;
}
.MainContent ul.js-accordion .card-content .card-content__header {
  font-size: 16px;
  line-height: 16px;
}
.MainContent ul.js-accordion .card-content .card-content__header > span {
  font-size: 10px;
  display: block;
}
.MainContent ul.js-accordion .card-content > ul {
  list-style-type: none;
  margin: 8px 0 0 0;
  padding: 0;
  font-size: 11px;
  line-height: 13px;
}
.MainContent ul.js-accordion .card-content > ul > li:after {
  content: "•";
  display: block;
  line-height: 11px;
}
.MainContent ul.js-accordion .card-content > ul > li:last-child:after {
  display: none;
}

@media (max-width: 720px) {
  #diagram {
    border-radius: 0;
    padding-bottom: 50px;
    padding-left: 20px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  #diagram svg {
    display: none;
  }
  #diagram .mobile-title {
    display: block;
    color: #054860;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    text-align: center;
  }
  #diagram .fehb-logo {
    position: static;
    display: block;
    margin: 20px auto;
  }

  .pentagon {
    display: none;
  }

  .card {
    position: static;
    display: inline-block;
    transform: none;
    vertical-align: top;
    margin-top: 10px;
    border-radius: 5px;
  }
  .card:after {
    display: none;
  }
  .card .card-content {
    transform: none;
    width: auto;
    height: auto;
    margin: 0;
  }
  .card .card-icon {
    display: none;
  }
}