#size-warning {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FFF;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

#size-warning-message {
  padding: 20px;
  text-align: center;
  font-size: 16px;
}

#size-warning-button {
  background-color: #e32727;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

@media (min-width: 0) {
  #container {
    width: 315px;
    height: 100%;
    position: relative;
  }
  #wheelContainer {
    width: 315px;
    height: 315px;
  }
  .segment-text {
    font-size: 5.4pt;
  }
  .line1 span {
    padding-top: 5.4px !important;
  }
  .line1t span {
    padding-top: 11.7px !important;
  }
  .line2 span {
    padding-top: 7.65px !important;
  }
  .line3 span {
    padding-top: 11.7px !important;
  }
  .detail-subheading {
    font-size: 5.4pt;
    padding-top: 3.15px;
  }
  .detail-subheading-lrg {
    font-size: 9pt;
  }
  .detail-text {
    font-size: 4.5pt;
  }
  .detail-text-lrg {
    font-size: 7.2pt;
  }
  .detail-title {
    font-size: 7.2pt;
  }
  .detail-title-lrg {
    font-size: 9.9pt;
  }
  #swipeIcon {
    width: 45px;
    height: 45px;
  }
  .swipe-center {
    font-size: 247.5% !important;
    padding-bottom: 70%;
  }
  .swipe-instruct {
    font-size: 18px !important;
  }
  .feedback-icon {
    font-size: 22.5px !important;
    color: #e32727 !important;
  }
  #pageTitle {
    line-height: 8.1pt;
  }
  #ripple {
    font-size: 11.25pt;
  }
  #framework {
    font-size: 10.35pt;
  }
  .box-title {
    font-size: 9pt;
  }
  .box-title-lrg {
    font-size: 11.7pt !important;
  }
  .title-line {
    top: 11.25px;
  }
  .title-line-lrg {
    top: 13.95px;
  }
  #instructions, #feedback {
    font-size: 4.95pt;
  }
  .instruction-row {
    padding-top: 6.75px;
  }
  .feedback-row {
    padding-top: 0px;
  }
  .box-controls-row {
    padding-top: 2.25px;
  }
  .box-controls-text {
    font-size: 5.4pt;
    padding-left: 1.35px;
  }
  .instruction-text {
    padding-left: 4.5px;
    line-height: 6.3pt;
  }
  #leftPanel {
    width: 139.5px;
  }
  .logo {
    width: 36px;
    margin: 2px;
  }
  .box-controls {
    bottom: 0%;
    margin-bottom: 60px;
  }
  .box-controls-button {
    padding: 0;
    margin: 0;
    width: 22.5px;
    height: 22.5px;
    padding-right: 10px;
  }
  .download-icon {
    padding: 0 5px 0 0;
    margin: 0;
    width: 13.5px;
    height: 13.5px;
  }
  #cancelImage {
    width: 22.5px;
  }
  .box-inner {
    border-radius: 9px;
  }
  .box-inner-full {
    border-radius: 9px;
  }
  .box-content {
    margin: 0 4.5px 9px 4.5px;
    padding: 0 4.5px 4.5px 4.5px;
  }
  /* width */
  .box-content::-webkit-scrollbar {
    width: 2.25px;
  }
  .box-content::-webkit-scrollbar-thumb {
    border-radius: 1.35px;
  }
  .detail-title {
    margin-top: 4.5px;
    padding-left: 9px;
    border-radius: 9px 9px 0 0;
  }
  .polaroid, #imageArea {
    width: 117px;
    height: 126px;
  }
  .download-area {
    padding-left: 9px;
    font-size: 5.4pt;
  }
}
@media (min-width: 768px) {
  #size-warning {
    display: none;
  }
  #container {
    width: 413px;
    height: 100%;
    position: relative;
  }
  #wheelContainer {
    width: 413px;
    height: 413px;
  }
  .segment-text {
    font-size: 7.08pt;
  }
  .line1 span {
    padding-top: 7.08px !important;
  }
  .line1t span {
    padding-top: 15.34px !important;
  }
  .line2 span {
    padding-top: 10.03px !important;
  }
  .line3 span {
    padding-top: 15.34px !important;
  }
  .detail-subheading {
    font-size: 7.08pt;
    padding-top: 4.13px;
  }
  .detail-subheading-lrg {
    font-size: 11.8pt;
  }
  .detail-text {
    font-size: 5.9pt;
  }
  .detail-text-lrg {
    font-size: 9.44pt;
  }
  .detail-title {
    font-size: 9.44pt;
  }
  .detail-title-lrg {
    font-size: 12.98pt;
  }
  #swipeIcon {
    width: 59px;
    height: 59px;
  }
  .swipe-center {
    font-size: 324.5% !important;
    padding-bottom: 70%;
  }
  .swipe-instruct {
    font-size: 23.6px !important;
  }
  .feedback-icon {
    font-size: 29.5px !important;
    color: #e32727 !important;
  }
  #pageTitle {
    line-height: 10.62pt;
  }
  #ripple {
    font-size: 14.75pt;
  }
  #framework {
    font-size: 13.57pt;
  }
  .box-title {
    font-size: 11.8pt;
  }
  .box-title-lrg {
    font-size: 15.34pt !important;
  }
  .title-line {
    top: 14.75px;
  }
  .title-line-lrg {
    top: 18.29px;
  }
  #instructions, #feedback {
    font-size: 6.49pt;
  }
  .instruction-row {
    padding-top: 8.85px;
  }
  .feedback-row {
    padding-top: 0px;
  }
  .box-controls-row {
    padding-top: 2.95px;
  }
  .box-controls-text {
    font-size: 7.08pt;
    padding-left: 1.77px;
  }
  .instruction-text {
    padding-left: 5.9px;
    line-height: 8.26pt;
  }
  #leftPanel {
    width: 182.9px;
  }
  .logo {
    width: 47.2px;
    margin: 2px;
  }
  .box-controls {
    bottom: 0%;
    margin-bottom: 60px;
  }
  .box-controls-button {
    padding: 0;
    margin: 0;
    width: 29.5px;
    height: 29.5px;
    padding-right: 10px;
  }
  .download-icon {
    padding: 0 5px 0 0;
    margin: 0;
    width: 17.7px;
    height: 17.7px;
  }
  #cancelImage {
    width: 29.5px;
  }
  .box-inner {
    border-radius: 11.8px;
  }
  .box-inner-full {
    border-radius: 11.8px;
  }
  .box-content {
    margin: 0 5.9px 11.8px 5.9px;
    padding: 0 5.9px 5.9px 5.9px;
  }
  /* width */
  .box-content::-webkit-scrollbar {
    width: 2.95px;
  }
  .box-content::-webkit-scrollbar-thumb {
    border-radius: 1.77px;
  }
  .detail-title {
    margin-top: 5.9px;
    padding-left: 11.8px;
    border-radius: 11.8px 11.8px 0 0;
  }
  .polaroid, #imageArea {
    width: 153.4px;
    height: 165.2px;
  }
  .download-area {
    padding-left: 11.8px;
    font-size: 7.08pt;
  }
}
@media (min-width: 992px) {
  #size-warning {
    display: none;
  }
  #container {
    width: 532px;
    height: 100%;
    position: relative;
  }
  #wheelContainer {
    width: 532px;
    height: 532px;
  }
  .segment-text {
    font-size: 9.12pt;
  }
  .line1 span {
    padding-top: 9.12px !important;
  }
  .line1t span {
    padding-top: 19.76px !important;
  }
  .line2 span {
    padding-top: 12.92px !important;
  }
  .line3 span {
    padding-top: 19.76px !important;
  }
  .detail-subheading {
    font-size: 9.12pt;
    padding-top: 5.32px;
  }
  .detail-subheading-lrg {
    font-size: 15.2pt;
  }
  .detail-text {
    font-size: 7.6pt;
  }
  .detail-text-lrg {
    font-size: 12.16pt;
  }
  .detail-title {
    font-size: 12.16pt;
  }
  .detail-title-lrg {
    font-size: 16.72pt;
  }
  #swipeIcon {
    width: 76px;
    height: 76px;
  }
  .swipe-center {
    font-size: 418% !important;
    padding-bottom: 70%;
  }
  .swipe-instruct {
    font-size: 30.4px !important;
  }
  .feedback-icon {
    font-size: 38px !important;
    color: #e32727 !important;
  }
  #pageTitle {
    line-height: 13.68pt;
  }
  #ripple {
    font-size: 19pt;
  }
  #framework {
    font-size: 17.48pt;
  }
  .box-title {
    font-size: 15.2pt;
  }
  .box-title-lrg {
    font-size: 19.76pt !important;
  }
  .title-line {
    top: 19px;
  }
  .title-line-lrg {
    top: 23.56px;
  }
  #instructions, #feedback {
    font-size: 8.36pt;
  }
  .instruction-row {
    padding-top: 11.4px;
  }
  .feedback-row {
    padding-top: 0px;
  }
  .box-controls-row {
    padding-top: 3.8px;
  }
  .box-controls-text {
    font-size: 9.12pt;
    padding-left: 2.28px;
  }
  .instruction-text {
    padding-left: 7.6px;
    line-height: 10.64pt;
  }
  #leftPanel {
    width: 235.6px;
  }
  .logo {
    width: 60.8px;
    margin: 2px;
  }
  .box-controls {
    bottom: 0%;
    margin-bottom: 60px;
  }
  .box-controls-button {
    padding: 0;
    margin: 0;
    width: 38px;
    height: 38px;
    padding-right: 10px;
  }
  .download-icon {
    padding: 0 5px 0 0;
    margin: 0;
    width: 22.8px;
    height: 22.8px;
  }
  #cancelImage {
    width: 38px;
  }
  .box-inner {
    border-radius: 15.2px;
  }
  .box-inner-full {
    border-radius: 15.2px;
  }
  .box-content {
    margin: 0 7.6px 15.2px 7.6px;
    padding: 0 7.6px 7.6px 7.6px;
  }
  /* width */
  .box-content::-webkit-scrollbar {
    width: 3.8px;
  }
  .box-content::-webkit-scrollbar-thumb {
    border-radius: 2.28px;
  }
  .detail-title {
    margin-top: 7.6px;
    padding-left: 15.2px;
    border-radius: 15.2px 15.2px 0 0;
  }
  .polaroid, #imageArea {
    width: 197.6px;
    height: 212.8px;
  }
  .download-area {
    padding-left: 15.2px;
    font-size: 9.12pt;
  }
}
@media (min-width: 1200px) {
  #size-warning {
    display: none;
  }
  #container {
    width: 644px;
    height: 100%;
    position: relative;
  }
  #wheelContainer {
    width: 644px;
    height: 644px;
  }
  .segment-text {
    font-size: 11.04pt;
  }
  .line1 span {
    padding-top: 11.04px !important;
  }
  .line1t span {
    padding-top: 23.92px !important;
  }
  .line2 span {
    padding-top: 15.64px !important;
  }
  .line3 span {
    padding-top: 23.92px !important;
  }
  .detail-subheading {
    font-size: 11.04pt;
    padding-top: 6.44px;
  }
  .detail-subheading-lrg {
    font-size: 18.4pt;
  }
  .detail-text {
    font-size: 9.2pt;
  }
  .detail-text-lrg {
    font-size: 14.72pt;
  }
  .detail-title {
    font-size: 14.72pt;
  }
  .detail-title-lrg {
    font-size: 20.24pt;
  }
  #swipeIcon {
    width: 92px;
    height: 92px;
  }
  .swipe-center {
    font-size: 506% !important;
    padding-bottom: 70%;
  }
  .swipe-instruct {
    font-size: 36.8px !important;
  }
  .feedback-icon {
    font-size: 46px !important;
    color: #e32727 !important;
  }
  #pageTitle {
    line-height: 16.56pt;
  }
  #ripple {
    font-size: 23pt;
  }
  #framework {
    font-size: 21.16pt;
  }
  .box-title {
    font-size: 18.4pt;
  }
  .box-title-lrg {
    font-size: 23.92pt !important;
  }
  .title-line {
    top: 23px;
  }
  .title-line-lrg {
    top: 28.52px;
  }
  #instructions, #feedback {
    font-size: 10.12pt;
  }
  .instruction-row {
    padding-top: 13.8px;
  }
  .feedback-row {
    padding-top: 0px;
  }
  .box-controls-row {
    padding-top: 4.6px;
  }
  .box-controls-text {
    font-size: 11.04pt;
    padding-left: 2.76px;
  }
  .instruction-text {
    padding-left: 9.2px;
    line-height: 12.88pt;
  }
  #leftPanel {
    width: 285.2px;
  }
  .logo {
    width: 73.6px;
    margin: 2px;
  }
  .box-controls {
    bottom: 0%;
    margin-bottom: 60px;
  }
  .box-controls-button {
    padding: 0;
    margin: 0;
    width: 46px;
    height: 46px;
    padding-right: 10px;
  }
  .download-icon {
    padding: 0 5px 0 0;
    margin: 0;
    width: 27.6px;
    height: 27.6px;
  }
  #cancelImage {
    width: 46px;
  }
  .box-inner {
    border-radius: 18.4px;
  }
  .box-inner-full {
    border-radius: 18.4px;
  }
  .box-content {
    margin: 0 9.2px 18.4px 9.2px;
    padding: 0 9.2px 9.2px 9.2px;
  }
  /* width */
  .box-content::-webkit-scrollbar {
    width: 4.6px;
  }
  .box-content::-webkit-scrollbar-thumb {
    border-radius: 2.76px;
  }
  .detail-title {
    margin-top: 9.2px;
    padding-left: 18.4px;
    border-radius: 18.4px 18.4px 0 0;
  }
  .polaroid, #imageArea {
    width: 239.2px;
    height: 257.6px;
  }
  .download-area {
    padding-left: 18.4px;
    font-size: 11.04pt;
  }
}
@media (min-width: 1400px) {
  #size-warning {
    display: none;
  }
  #container {
    width: 700px;
    height: 100%;
    position: relative;
  }
  #wheelContainer {
    width: 700px;
    height: 700px;
  }
  .segment-text {
    font-size: 12pt;
  }
  .line1 span {
    padding-top: 12px !important;
  }
  .line1t span {
    padding-top: 26px !important;
  }
  .line2 span {
    padding-top: 17px !important;
  }
  .line3 span {
    padding-top: 26px !important;
  }
  .detail-subheading {
    font-size: 12pt;
    padding-top: 7px;
  }
  .detail-subheading-lrg {
    font-size: 20pt;
  }
  .detail-text {
    font-size: 10pt;
  }
  .detail-text-lrg {
    font-size: 16pt;
  }
  .detail-title {
    font-size: 16pt;
  }
  .detail-title-lrg {
    font-size: 22pt;
  }
  #swipeIcon {
    width: 100px;
    height: 100px;
  }
  .swipe-center {
    font-size: 550% !important;
    padding-bottom: 70%;
  }
  .swipe-instruct {
    font-size: 40px !important;
  }
  .feedback-icon {
    font-size: 50px !important;
    color: #e32727 !important;
  }
  #pageTitle {
    line-height: 18pt;
  }
  #ripple {
    font-size: 25pt;
  }
  #framework {
    font-size: 23pt;
  }
  .box-title {
    font-size: 20pt;
  }
  .box-title-lrg {
    font-size: 26pt !important;
  }
  .title-line {
    top: 25px;
  }
  .title-line-lrg {
    top: 31px;
  }
  #instructions, #feedback {
    font-size: 11pt;
  }
  .instruction-row {
    padding-top: 15px;
  }
  .feedback-row {
    padding-top: 0px;
  }
  .box-controls-row {
    padding-top: 5px;
  }
  .box-controls-text {
    font-size: 12pt;
    padding-left: 3px;
  }
  .instruction-text {
    padding-left: 10px;
    line-height: 14pt;
  }
  #leftPanel {
    width: 310px;
  }
  .logo {
    width: 80px;
    margin: 2px;
  }
  .box-controls {
    bottom: 0%;
    margin-bottom: 60px;
  }
  .box-controls-button {
    padding: 0;
    margin: 0;
    width: 50px;
    height: 50px;
    padding-right: 10px;
  }
  .download-icon {
    padding: 0 5px 0 0;
    margin: 0;
    width: 30px;
    height: 30px;
  }
  #cancelImage {
    width: 50px;
  }
  .box-inner {
    border-radius: 20px;
  }
  .box-inner-full {
    border-radius: 20px;
  }
  .box-content {
    margin: 0 10px 20px 10px;
    padding: 0 10px 10px 10px;
  }
  /* width */
  .box-content::-webkit-scrollbar {
    width: 5px;
  }
  .box-content::-webkit-scrollbar-thumb {
    border-radius: 3px;
  }
  .detail-title {
    margin-top: 10px;
    padding-left: 20px;
    border-radius: 20px 20px 0 0;
  }
  .polaroid, #imageArea {
    width: 260px;
    height: 280px;
  }
  .download-area {
    padding-left: 20px;
    font-size: 12pt;
  }
}
@media (min-width: 2200px) {
  #size-warning {
    display: none;
  }
  #container {
    width: 1190px;
    height: 100%;
    position: relative;
  }
  #wheelContainer {
    width: 1190px;
    height: 1190px;
  }
  .segment-text {
    font-size: 20.4pt;
  }
  .line1 span {
    padding-top: 20.4px !important;
  }
  .line1t span {
    padding-top: 44.2px !important;
  }
  .line2 span {
    padding-top: 28.9px !important;
  }
  .line3 span {
    padding-top: 44.2px !important;
  }
  .detail-subheading {
    font-size: 20.4pt;
    padding-top: 11.9px;
  }
  .detail-subheading-lrg {
    font-size: 34pt;
  }
  .detail-text {
    font-size: 17pt;
  }
  .detail-text-lrg {
    font-size: 27.2pt;
  }
  .detail-title {
    font-size: 27.2pt;
  }
  .detail-title-lrg {
    font-size: 37.4pt;
  }
  #swipeIcon {
    width: 170px;
    height: 170px;
  }
  .swipe-center {
    font-size: 935% !important;
    padding-bottom: 70%;
  }
  .swipe-instruct {
    font-size: 68px !important;
  }
  .feedback-icon {
    font-size: 85px !important;
    color: #e32727 !important;
  }
  #pageTitle {
    line-height: 30.6pt;
  }
  #ripple {
    font-size: 42.5pt;
  }
  #framework {
    font-size: 39.1pt;
  }
  .box-title {
    font-size: 34pt;
  }
  .box-title-lrg {
    font-size: 44.2pt !important;
  }
  .title-line {
    top: 42.5px;
  }
  .title-line-lrg {
    top: 52.7px;
  }
  #instructions, #feedback {
    font-size: 18.7pt;
  }
  .instruction-row {
    padding-top: 25.5px;
  }
  .feedback-row {
    padding-top: 0px;
  }
  .box-controls-row {
    padding-top: 8.5px;
  }
  .box-controls-text {
    font-size: 20.4pt;
    padding-left: 5.1px;
  }
  .instruction-text {
    padding-left: 17px;
    line-height: 23.8pt;
  }
  #leftPanel {
    width: 527px;
  }
  .logo {
    width: 136px;
    margin: 2px;
  }
  .box-controls {
    bottom: 0%;
    margin-bottom: 60px;
  }
  .box-controls-button {
    padding: 0;
    margin: 0;
    width: 85px;
    height: 85px;
    padding-right: 10px;
  }
  .download-icon {
    padding: 0 5px 0 0;
    margin: 0;
    width: 51px;
    height: 51px;
  }
  #cancelImage {
    width: 85px;
  }
  .box-inner {
    border-radius: 34px;
  }
  .box-inner-full {
    border-radius: 34px;
  }
  .box-content {
    margin: 0 17px 34px 17px;
    padding: 0 17px 17px 17px;
  }
  /* width */
  .box-content::-webkit-scrollbar {
    width: 8.5px;
  }
  .box-content::-webkit-scrollbar-thumb {
    border-radius: 5.1px;
  }
  .detail-title {
    margin-top: 17px;
    padding-left: 34px;
    border-radius: 34px 34px 0 0;
  }
  .polaroid, #imageArea {
    width: 442px;
    height: 476px;
  }
  .download-area {
    padding-left: 34px;
    font-size: 20.4pt;
  }
}
html,
body {
  font: 1em/1.75 Verdana, Arial, Helvetica, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: -99;
}

#main {
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#container {
  margin: 0;
  flex: none;
}

.pie-outer {
  width: 100%;
  height: 100%;
}

#wheel {
  cursor: pointer;
  will-change: transform;
  z-index: 99;
  border-radius: 50%;
}

#wheelContainer {
  transition: top 1s ease, transform 1s ease;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.pie {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  border: 1.5px solid #fff;
  border-radius: 50%;
  /* angle = (360 / num of segments), rotate = (90 - (angle / 2)) */
  -webkit-transform: translate(-50%, -50%) rotate(60deg);
  -ms-transform: translate(-50%, -50%) rotate(60deg);
  transform: translate(-50%, -50%) rotate(60deg);
}

.pie ul:after {
  content: "";
  display: block;
  width: 100%;
}

.pie li {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #fff;
  box-sizing: border-box;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

/* angle = (360 / num of segments), rotate = (nth-child - 1 x angle), skew = (90 - angle) */
.pie li:nth-child(1) {
  -webkit-transform: rotate(0deg) skew(30deg);
  -ms-transform: rotate(0deg) skew(30deg);
  transform: rotate(0deg) skew(30deg);
}

.pie li:nth-child(2) {
  -webkit-transform: rotate(60deg) skew(30deg);
  -ms-transform: rotate(60deg) skew(30deg);
  transform: rotate(60deg) skew(30deg);
}

.pie li:nth-child(3) {
  -webkit-transform: rotate(120deg) skew(30deg);
  -ms-transform: rotate(120deg) skew(30deg);
  transform: rotate(120deg) skew(30deg);
}

.pie li:nth-child(4) {
  -webkit-transform: rotate(180deg) skew(30deg);
  -ms-transform: rotate(180deg) skew(30deg);
  transform: rotate(180deg) skew(30deg);
}

.pie li:nth-child(5) {
  -webkit-transform: rotate(240deg) skew(30deg);
  -ms-transform: rotate(240deg) skew(30deg);
  transform: rotate(240deg) skew(30deg);
}

.pie li:nth-child(6) {
  -webkit-transform: rotate(300deg) skew(30deg);
  -ms-transform: rotate(300deg) skew(30deg);
  transform: rotate(300deg) skew(30deg);
}

.pie li:nth-child(7) {
  -webkit-transform: rotate(360deg) skew(30deg);
  -ms-transform: rotate(360deg) skew(30deg);
  transform: rotate(360deg) skew(30deg);
}

.pie li:nth-child(8) {
  -webkit-transform: rotate(420deg) skew(30deg);
  -ms-transform: rotate(420deg) skew(30deg);
  transform: rotate(420deg) skew(30deg);
}

.pie li:nth-child(9) {
  -webkit-transform: rotate(480deg) skew(30deg);
  -ms-transform: rotate(480deg) skew(30deg);
  transform: rotate(480deg) skew(30deg);
}

.segment, .segmentC, .segment-off {
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  display: block;
  position: absolute;
  line-height: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  left: 50%;
  top: 50%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* angle = (360 / num of segments), skew = (angle - 90), rotate = (angle / 2 - 90) */
  -webkit-transform: skew(-30deg) rotate(-60deg);
  -ms-transform: skew(-30deg) rotate(-60deg);
  transform: skew(-30deg) rotate(-60deg);
  z-index: -1;
}

.segment {
  color: rgb(255, 255, 255);
}

.segment-off {
  color: rgb(155, 155, 155);
}

.segmentC:hover {
  cursor: default;
}

.pie1 {
  width: 97%;
  height: 97%;
}

.pie2 {
  width: 85.8888888889%;
  height: 85.8888888889%;
}

.pie3 {
  width: 74.7777777778%;
  height: 74.7777777778%;
}

.pie4 {
  width: 63.6666666667%;
  height: 63.6666666667%;
}

.pie5 {
  width: 52.5555555556%;
  height: 52.5555555556%;
}

.pie6 {
  width: 41.4444444444%;
  height: 41.4444444444%;
}

.pie7 {
  width: 30.3333333333%;
  height: 30.3333333333%;
}

.pie8 {
  width: 19.2222222222%;
  height: 19.2222222222%;
}

.pie9 {
  width: 8.1111111111%;
  height: 8.1111111111%;
}

.pie10 {
  width: -3%;
  height: -3%;
}

.selected {
  background: rgba(255, 255, 255, 0.5);
}

.unselected:hover, .selected:hover {
  cursor: default;
}

.pie-core {
  background-color: #eeeeee;
  border: 1px solid rgb(255, 255, 255) !important;
  width: 27%;
  height: 27%;
  pointer-events: all;
}

.pie6 li {
  border: 1px solid rgb(255, 255, 255) !important;
}

.pie6 {
  border: 2px solid rgb(255, 255, 255) !important;
}

.pie1 {
  border: 1px solid rgb(255, 255, 255) !important;
}

.segment-text span {
  font-family: "Ubuntu Mono", monospace;
  height: 50%;
  position: absolute;
  width: 0px;
  transform-origin: bottom center;
}

.segment-title {
  color: rgb(255, 255, 255);
  font-weight: bold;
}

.level1 .char1 {
  transform: rotate(-28.5994365008deg);
  -webkit-transform: rotate(-28.5994365008deg);
  -ms-transform: rotate(-28.5994365008deg);
  box-sizing: border-box;
}

.level1 .char2 {
  transform: rotate(-27.1988730016deg);
  -webkit-transform: rotate(-27.1988730016deg);
  -ms-transform: rotate(-27.1988730016deg);
  box-sizing: border-box;
}

.level1 .char3 {
  transform: rotate(-25.7983095024deg);
  -webkit-transform: rotate(-25.7983095024deg);
  -ms-transform: rotate(-25.7983095024deg);
  box-sizing: border-box;
}

.level1 .char4 {
  transform: rotate(-24.3977460032deg);
  -webkit-transform: rotate(-24.3977460032deg);
  -ms-transform: rotate(-24.3977460032deg);
  box-sizing: border-box;
}

.level1 .char5 {
  transform: rotate(-22.997182504deg);
  -webkit-transform: rotate(-22.997182504deg);
  -ms-transform: rotate(-22.997182504deg);
  box-sizing: border-box;
}

.level1 .char6 {
  transform: rotate(-21.5966190047deg);
  -webkit-transform: rotate(-21.5966190047deg);
  -ms-transform: rotate(-21.5966190047deg);
  box-sizing: border-box;
}

.level1 .char7 {
  transform: rotate(-20.1960555055deg);
  -webkit-transform: rotate(-20.1960555055deg);
  -ms-transform: rotate(-20.1960555055deg);
  box-sizing: border-box;
}

.level1 .char8 {
  transform: rotate(-18.7954920063deg);
  -webkit-transform: rotate(-18.7954920063deg);
  -ms-transform: rotate(-18.7954920063deg);
  box-sizing: border-box;
}

.level1 .char9 {
  transform: rotate(-17.3949285071deg);
  -webkit-transform: rotate(-17.3949285071deg);
  -ms-transform: rotate(-17.3949285071deg);
  box-sizing: border-box;
}

.level1 .char10 {
  transform: rotate(-15.9943650079deg);
  -webkit-transform: rotate(-15.9943650079deg);
  -ms-transform: rotate(-15.9943650079deg);
  box-sizing: border-box;
}

.level1 .char11 {
  transform: rotate(-14.5938015087deg);
  -webkit-transform: rotate(-14.5938015087deg);
  -ms-transform: rotate(-14.5938015087deg);
  box-sizing: border-box;
}

.level1 .char12 {
  transform: rotate(-13.1932380095deg);
  -webkit-transform: rotate(-13.1932380095deg);
  -ms-transform: rotate(-13.1932380095deg);
  box-sizing: border-box;
}

.level1 .char13 {
  transform: rotate(-11.7926745103deg);
  -webkit-transform: rotate(-11.7926745103deg);
  -ms-transform: rotate(-11.7926745103deg);
  box-sizing: border-box;
}

.level1 .char14 {
  transform: rotate(-10.3921110111deg);
  -webkit-transform: rotate(-10.3921110111deg);
  -ms-transform: rotate(-10.3921110111deg);
  box-sizing: border-box;
}

.level1 .char15 {
  transform: rotate(-8.9915475119deg);
  -webkit-transform: rotate(-8.9915475119deg);
  -ms-transform: rotate(-8.9915475119deg);
  box-sizing: border-box;
}

.level1 .char16 {
  transform: rotate(-7.5909840127deg);
  -webkit-transform: rotate(-7.5909840127deg);
  -ms-transform: rotate(-7.5909840127deg);
  box-sizing: border-box;
}

.level1 .char17 {
  transform: rotate(-6.1904205135deg);
  -webkit-transform: rotate(-6.1904205135deg);
  -ms-transform: rotate(-6.1904205135deg);
  box-sizing: border-box;
}

.level1 .char18 {
  transform: rotate(-4.7898570142deg);
  -webkit-transform: rotate(-4.7898570142deg);
  -ms-transform: rotate(-4.7898570142deg);
  box-sizing: border-box;
}

.level1 .char19 {
  transform: rotate(-3.389293515deg);
  -webkit-transform: rotate(-3.389293515deg);
  -ms-transform: rotate(-3.389293515deg);
  box-sizing: border-box;
}

.level1 .char20 {
  transform: rotate(-1.9887300158deg);
  -webkit-transform: rotate(-1.9887300158deg);
  -ms-transform: rotate(-1.9887300158deg);
  box-sizing: border-box;
}

.level1 .char21 {
  transform: rotate(-0.5881665166deg);
  -webkit-transform: rotate(-0.5881665166deg);
  -ms-transform: rotate(-0.5881665166deg);
  box-sizing: border-box;
}

.level1 .char22 {
  transform: rotate(0.8123969826deg);
  -webkit-transform: rotate(0.8123969826deg);
  -ms-transform: rotate(0.8123969826deg);
  box-sizing: border-box;
}

.level1 .char23 {
  transform: rotate(2.2129604818deg);
  -webkit-transform: rotate(2.2129604818deg);
  -ms-transform: rotate(2.2129604818deg);
  box-sizing: border-box;
}

.level1 .char24 {
  transform: rotate(3.613523981deg);
  -webkit-transform: rotate(3.613523981deg);
  -ms-transform: rotate(3.613523981deg);
  box-sizing: border-box;
}

.level1 .char25 {
  transform: rotate(5.0140874802deg);
  -webkit-transform: rotate(5.0140874802deg);
  -ms-transform: rotate(5.0140874802deg);
  box-sizing: border-box;
}

.level1 .char26 {
  transform: rotate(6.4146509794deg);
  -webkit-transform: rotate(6.4146509794deg);
  -ms-transform: rotate(6.4146509794deg);
  box-sizing: border-box;
}

.level1 .char27 {
  transform: rotate(7.8152144786deg);
  -webkit-transform: rotate(7.8152144786deg);
  -ms-transform: rotate(7.8152144786deg);
  box-sizing: border-box;
}

.level1 .char28 {
  transform: rotate(9.2157779778deg);
  -webkit-transform: rotate(9.2157779778deg);
  -ms-transform: rotate(9.2157779778deg);
  box-sizing: border-box;
}

.level1 .char29 {
  transform: rotate(10.6163414771deg);
  -webkit-transform: rotate(10.6163414771deg);
  -ms-transform: rotate(10.6163414771deg);
  box-sizing: border-box;
}

.level1 .char30 {
  transform: rotate(12.0169049763deg);
  -webkit-transform: rotate(12.0169049763deg);
  -ms-transform: rotate(12.0169049763deg);
  box-sizing: border-box;
}

.level1 .char31 {
  transform: rotate(13.4174684755deg);
  -webkit-transform: rotate(13.4174684755deg);
  -ms-transform: rotate(13.4174684755deg);
  box-sizing: border-box;
}

.level1 .char32 {
  transform: rotate(14.8180319747deg);
  -webkit-transform: rotate(14.8180319747deg);
  -ms-transform: rotate(14.8180319747deg);
  box-sizing: border-box;
}

.level1 .char33 {
  transform: rotate(16.2185954739deg);
  -webkit-transform: rotate(16.2185954739deg);
  -ms-transform: rotate(16.2185954739deg);
  box-sizing: border-box;
}

.level1 .char34 {
  transform: rotate(17.6191589731deg);
  -webkit-transform: rotate(17.6191589731deg);
  -ms-transform: rotate(17.6191589731deg);
  box-sizing: border-box;
}

.level1 .char35 {
  transform: rotate(19.0197224723deg);
  -webkit-transform: rotate(19.0197224723deg);
  -ms-transform: rotate(19.0197224723deg);
  box-sizing: border-box;
}

.level1 .char36 {
  transform: rotate(20.4202859715deg);
  -webkit-transform: rotate(20.4202859715deg);
  -ms-transform: rotate(20.4202859715deg);
  box-sizing: border-box;
}

.level1 .char37 {
  transform: rotate(21.8208494707deg);
  -webkit-transform: rotate(21.8208494707deg);
  -ms-transform: rotate(21.8208494707deg);
  box-sizing: border-box;
}

.level1 .char38 {
  transform: rotate(23.2214129699deg);
  -webkit-transform: rotate(23.2214129699deg);
  -ms-transform: rotate(23.2214129699deg);
  box-sizing: border-box;
}

.level1 .char39 {
  transform: rotate(24.6219764691deg);
  -webkit-transform: rotate(24.6219764691deg);
  -ms-transform: rotate(24.6219764691deg);
  box-sizing: border-box;
}

.level1 .char40 {
  transform: rotate(26.0225399683deg);
  -webkit-transform: rotate(26.0225399683deg);
  -ms-transform: rotate(26.0225399683deg);
  box-sizing: border-box;
}

.level2 .char1 {
  transform: rotate(-28.4243660634deg);
  -webkit-transform: rotate(-28.4243660634deg);
  -ms-transform: rotate(-28.4243660634deg);
  box-sizing: border-box;
}

.level2 .char2 {
  transform: rotate(-26.8487321268deg);
  -webkit-transform: rotate(-26.8487321268deg);
  -ms-transform: rotate(-26.8487321268deg);
  box-sizing: border-box;
}

.level2 .char3 {
  transform: rotate(-25.2730981902deg);
  -webkit-transform: rotate(-25.2730981902deg);
  -ms-transform: rotate(-25.2730981902deg);
  box-sizing: border-box;
}

.level2 .char4 {
  transform: rotate(-23.6974642536deg);
  -webkit-transform: rotate(-23.6974642536deg);
  -ms-transform: rotate(-23.6974642536deg);
  box-sizing: border-box;
}

.level2 .char5 {
  transform: rotate(-22.121830317deg);
  -webkit-transform: rotate(-22.121830317deg);
  -ms-transform: rotate(-22.121830317deg);
  box-sizing: border-box;
}

.level2 .char6 {
  transform: rotate(-20.5461963803deg);
  -webkit-transform: rotate(-20.5461963803deg);
  -ms-transform: rotate(-20.5461963803deg);
  box-sizing: border-box;
}

.level2 .char7 {
  transform: rotate(-18.9705624437deg);
  -webkit-transform: rotate(-18.9705624437deg);
  -ms-transform: rotate(-18.9705624437deg);
  box-sizing: border-box;
}

.level2 .char8 {
  transform: rotate(-17.3949285071deg);
  -webkit-transform: rotate(-17.3949285071deg);
  -ms-transform: rotate(-17.3949285071deg);
  box-sizing: border-box;
}

.level2 .char9 {
  transform: rotate(-15.8192945705deg);
  -webkit-transform: rotate(-15.8192945705deg);
  -ms-transform: rotate(-15.8192945705deg);
  box-sizing: border-box;
}

.level2 .char10 {
  transform: rotate(-14.2436606339deg);
  -webkit-transform: rotate(-14.2436606339deg);
  -ms-transform: rotate(-14.2436606339deg);
  box-sizing: border-box;
}

.level2 .char11 {
  transform: rotate(-12.6680266973deg);
  -webkit-transform: rotate(-12.6680266973deg);
  -ms-transform: rotate(-12.6680266973deg);
  box-sizing: border-box;
}

.level2 .char12 {
  transform: rotate(-11.0923927607deg);
  -webkit-transform: rotate(-11.0923927607deg);
  -ms-transform: rotate(-11.0923927607deg);
  box-sizing: border-box;
}

.level2 .char13 {
  transform: rotate(-9.5167588241deg);
  -webkit-transform: rotate(-9.5167588241deg);
  -ms-transform: rotate(-9.5167588241deg);
  box-sizing: border-box;
}

.level2 .char14 {
  transform: rotate(-7.9411248875deg);
  -webkit-transform: rotate(-7.9411248875deg);
  -ms-transform: rotate(-7.9411248875deg);
  box-sizing: border-box;
}

.level2 .char15 {
  transform: rotate(-6.3654909509deg);
  -webkit-transform: rotate(-6.3654909509deg);
  -ms-transform: rotate(-6.3654909509deg);
  box-sizing: border-box;
}

.level2 .char16 {
  transform: rotate(-4.7898570142deg);
  -webkit-transform: rotate(-4.7898570142deg);
  -ms-transform: rotate(-4.7898570142deg);
  box-sizing: border-box;
}

.level2 .char17 {
  transform: rotate(-3.2142230776deg);
  -webkit-transform: rotate(-3.2142230776deg);
  -ms-transform: rotate(-3.2142230776deg);
  box-sizing: border-box;
}

.level2 .char18 {
  transform: rotate(-1.638589141deg);
  -webkit-transform: rotate(-1.638589141deg);
  -ms-transform: rotate(-1.638589141deg);
  box-sizing: border-box;
}

.level2 .char19 {
  transform: rotate(-0.0629552044deg);
  -webkit-transform: rotate(-0.0629552044deg);
  -ms-transform: rotate(-0.0629552044deg);
  box-sizing: border-box;
}

.level2 .char20 {
  transform: rotate(1.5126787322deg);
  -webkit-transform: rotate(1.5126787322deg);
  -ms-transform: rotate(1.5126787322deg);
  box-sizing: border-box;
}

.level2 .char21 {
  transform: rotate(3.0883126688deg);
  -webkit-transform: rotate(3.0883126688deg);
  -ms-transform: rotate(3.0883126688deg);
  box-sizing: border-box;
}

.level2 .char22 {
  transform: rotate(4.6639466054deg);
  -webkit-transform: rotate(4.6639466054deg);
  -ms-transform: rotate(4.6639466054deg);
  box-sizing: border-box;
}

.level2 .char23 {
  transform: rotate(6.239580542deg);
  -webkit-transform: rotate(6.239580542deg);
  -ms-transform: rotate(6.239580542deg);
  box-sizing: border-box;
}

.level2 .char24 {
  transform: rotate(7.8152144786deg);
  -webkit-transform: rotate(7.8152144786deg);
  -ms-transform: rotate(7.8152144786deg);
  box-sizing: border-box;
}

.level2 .char25 {
  transform: rotate(9.3908484152deg);
  -webkit-transform: rotate(9.3908484152deg);
  -ms-transform: rotate(9.3908484152deg);
  box-sizing: border-box;
}

.level2 .char26 {
  transform: rotate(10.9664823519deg);
  -webkit-transform: rotate(10.9664823519deg);
  -ms-transform: rotate(10.9664823519deg);
  box-sizing: border-box;
}

.level2 .char27 {
  transform: rotate(12.5421162885deg);
  -webkit-transform: rotate(12.5421162885deg);
  -ms-transform: rotate(12.5421162885deg);
  box-sizing: border-box;
}

.level2 .char28 {
  transform: rotate(14.1177502251deg);
  -webkit-transform: rotate(14.1177502251deg);
  -ms-transform: rotate(14.1177502251deg);
  box-sizing: border-box;
}

.level2 .char29 {
  transform: rotate(15.6933841617deg);
  -webkit-transform: rotate(15.6933841617deg);
  -ms-transform: rotate(15.6933841617deg);
  box-sizing: border-box;
}

.level2 .char30 {
  transform: rotate(17.2690180983deg);
  -webkit-transform: rotate(17.2690180983deg);
  -ms-transform: rotate(17.2690180983deg);
  box-sizing: border-box;
}

.level2 .char31 {
  transform: rotate(18.8446520349deg);
  -webkit-transform: rotate(18.8446520349deg);
  -ms-transform: rotate(18.8446520349deg);
  box-sizing: border-box;
}

.level2 .char32 {
  transform: rotate(20.4202859715deg);
  -webkit-transform: rotate(20.4202859715deg);
  -ms-transform: rotate(20.4202859715deg);
  box-sizing: border-box;
}

.level2 .char33 {
  transform: rotate(21.9959199081deg);
  -webkit-transform: rotate(21.9959199081deg);
  -ms-transform: rotate(21.9959199081deg);
  box-sizing: border-box;
}

.level2 .char34 {
  transform: rotate(23.5715538447deg);
  -webkit-transform: rotate(23.5715538447deg);
  -ms-transform: rotate(23.5715538447deg);
  box-sizing: border-box;
}

.level2 .char35 {
  transform: rotate(25.1471877813deg);
  -webkit-transform: rotate(25.1471877813deg);
  -ms-transform: rotate(25.1471877813deg);
  box-sizing: border-box;
}

.level2 .char36 {
  transform: rotate(26.722821718deg);
  -webkit-transform: rotate(26.722821718deg);
  -ms-transform: rotate(26.722821718deg);
  box-sizing: border-box;
}

.level2 .char37 {
  transform: rotate(28.2984556546deg);
  -webkit-transform: rotate(28.2984556546deg);
  -ms-transform: rotate(28.2984556546deg);
  box-sizing: border-box;
}

.level2 .char38 {
  transform: rotate(29.8740895912deg);
  -webkit-transform: rotate(29.8740895912deg);
  -ms-transform: rotate(29.8740895912deg);
  box-sizing: border-box;
}

.level2 .char39 {
  transform: rotate(31.4497235278deg);
  -webkit-transform: rotate(31.4497235278deg);
  -ms-transform: rotate(31.4497235278deg);
  box-sizing: border-box;
}

.level2 .char40 {
  transform: rotate(33.0253574644deg);
  -webkit-transform: rotate(33.0253574644deg);
  -ms-transform: rotate(33.0253574644deg);
  box-sizing: border-box;
}

.level3 .char1 {
  transform: rotate(-28.199275501deg);
  -webkit-transform: rotate(-28.199275501deg);
  -ms-transform: rotate(-28.199275501deg);
  box-sizing: border-box;
}

.level3 .char2 {
  transform: rotate(-26.398551002deg);
  -webkit-transform: rotate(-26.398551002deg);
  -ms-transform: rotate(-26.398551002deg);
  box-sizing: border-box;
}

.level3 .char3 {
  transform: rotate(-24.5978265031deg);
  -webkit-transform: rotate(-24.5978265031deg);
  -ms-transform: rotate(-24.5978265031deg);
  box-sizing: border-box;
}

.level3 .char4 {
  transform: rotate(-22.7971020041deg);
  -webkit-transform: rotate(-22.7971020041deg);
  -ms-transform: rotate(-22.7971020041deg);
  box-sizing: border-box;
}

.level3 .char5 {
  transform: rotate(-20.9963775051deg);
  -webkit-transform: rotate(-20.9963775051deg);
  -ms-transform: rotate(-20.9963775051deg);
  box-sizing: border-box;
}

.level3 .char6 {
  transform: rotate(-19.1956530061deg);
  -webkit-transform: rotate(-19.1956530061deg);
  -ms-transform: rotate(-19.1956530061deg);
  box-sizing: border-box;
}

.level3 .char7 {
  transform: rotate(-17.3949285071deg);
  -webkit-transform: rotate(-17.3949285071deg);
  -ms-transform: rotate(-17.3949285071deg);
  box-sizing: border-box;
}

.level3 .char8 {
  transform: rotate(-15.5942040081deg);
  -webkit-transform: rotate(-15.5942040081deg);
  -ms-transform: rotate(-15.5942040081deg);
  box-sizing: border-box;
}

.level3 .char9 {
  transform: rotate(-13.7934795092deg);
  -webkit-transform: rotate(-13.7934795092deg);
  -ms-transform: rotate(-13.7934795092deg);
  box-sizing: border-box;
}

.level3 .char10 {
  transform: rotate(-11.9927550102deg);
  -webkit-transform: rotate(-11.9927550102deg);
  -ms-transform: rotate(-11.9927550102deg);
  box-sizing: border-box;
}

.level3 .char11 {
  transform: rotate(-10.1920305112deg);
  -webkit-transform: rotate(-10.1920305112deg);
  -ms-transform: rotate(-10.1920305112deg);
  box-sizing: border-box;
}

.level3 .char12 {
  transform: rotate(-8.3913060122deg);
  -webkit-transform: rotate(-8.3913060122deg);
  -ms-transform: rotate(-8.3913060122deg);
  box-sizing: border-box;
}

.level3 .char13 {
  transform: rotate(-6.5905815132deg);
  -webkit-transform: rotate(-6.5905815132deg);
  -ms-transform: rotate(-6.5905815132deg);
  box-sizing: border-box;
}

.level3 .char14 {
  transform: rotate(-4.7898570142deg);
  -webkit-transform: rotate(-4.7898570142deg);
  -ms-transform: rotate(-4.7898570142deg);
  box-sizing: border-box;
}

.level3 .char15 {
  transform: rotate(-2.9891325153deg);
  -webkit-transform: rotate(-2.9891325153deg);
  -ms-transform: rotate(-2.9891325153deg);
  box-sizing: border-box;
}

.level3 .char16 {
  transform: rotate(-1.1884080163deg);
  -webkit-transform: rotate(-1.1884080163deg);
  -ms-transform: rotate(-1.1884080163deg);
  box-sizing: border-box;
}

.level3 .char17 {
  transform: rotate(0.6123164827deg);
  -webkit-transform: rotate(0.6123164827deg);
  -ms-transform: rotate(0.6123164827deg);
  box-sizing: border-box;
}

.level3 .char18 {
  transform: rotate(2.4130409817deg);
  -webkit-transform: rotate(2.4130409817deg);
  -ms-transform: rotate(2.4130409817deg);
  box-sizing: border-box;
}

.level3 .char19 {
  transform: rotate(4.2137654807deg);
  -webkit-transform: rotate(4.2137654807deg);
  -ms-transform: rotate(4.2137654807deg);
  box-sizing: border-box;
}

.level3 .char20 {
  transform: rotate(6.0144899797deg);
  -webkit-transform: rotate(6.0144899797deg);
  -ms-transform: rotate(6.0144899797deg);
  box-sizing: border-box;
}

.level3 .char21 {
  transform: rotate(7.8152144786deg);
  -webkit-transform: rotate(7.8152144786deg);
  -ms-transform: rotate(7.8152144786deg);
  box-sizing: border-box;
}

.level3 .char22 {
  transform: rotate(9.6159389776deg);
  -webkit-transform: rotate(9.6159389776deg);
  -ms-transform: rotate(9.6159389776deg);
  box-sizing: border-box;
}

.level3 .char23 {
  transform: rotate(11.4166634766deg);
  -webkit-transform: rotate(11.4166634766deg);
  -ms-transform: rotate(11.4166634766deg);
  box-sizing: border-box;
}

.level3 .char24 {
  transform: rotate(13.2173879756deg);
  -webkit-transform: rotate(13.2173879756deg);
  -ms-transform: rotate(13.2173879756deg);
  box-sizing: border-box;
}

.level3 .char25 {
  transform: rotate(15.0181124746deg);
  -webkit-transform: rotate(15.0181124746deg);
  -ms-transform: rotate(15.0181124746deg);
  box-sizing: border-box;
}

.level3 .char26 {
  transform: rotate(16.8188369735deg);
  -webkit-transform: rotate(16.8188369735deg);
  -ms-transform: rotate(16.8188369735deg);
  box-sizing: border-box;
}

.level3 .char27 {
  transform: rotate(18.6195614725deg);
  -webkit-transform: rotate(18.6195614725deg);
  -ms-transform: rotate(18.6195614725deg);
  box-sizing: border-box;
}

.level3 .char28 {
  transform: rotate(20.4202859715deg);
  -webkit-transform: rotate(20.4202859715deg);
  -ms-transform: rotate(20.4202859715deg);
  box-sizing: border-box;
}

.level3 .char29 {
  transform: rotate(22.2210104705deg);
  -webkit-transform: rotate(22.2210104705deg);
  -ms-transform: rotate(22.2210104705deg);
  box-sizing: border-box;
}

.level3 .char30 {
  transform: rotate(24.0217349695deg);
  -webkit-transform: rotate(24.0217349695deg);
  -ms-transform: rotate(24.0217349695deg);
  box-sizing: border-box;
}

.level3 .char31 {
  transform: rotate(25.8224594685deg);
  -webkit-transform: rotate(25.8224594685deg);
  -ms-transform: rotate(25.8224594685deg);
  box-sizing: border-box;
}

.level3 .char32 {
  transform: rotate(27.6231839674deg);
  -webkit-transform: rotate(27.6231839674deg);
  -ms-transform: rotate(27.6231839674deg);
  box-sizing: border-box;
}

.level3 .char33 {
  transform: rotate(29.4239084664deg);
  -webkit-transform: rotate(29.4239084664deg);
  -ms-transform: rotate(29.4239084664deg);
  box-sizing: border-box;
}

.level3 .char34 {
  transform: rotate(31.2246329654deg);
  -webkit-transform: rotate(31.2246329654deg);
  -ms-transform: rotate(31.2246329654deg);
  box-sizing: border-box;
}

.level3 .char35 {
  transform: rotate(33.0253574644deg);
  -webkit-transform: rotate(33.0253574644deg);
  -ms-transform: rotate(33.0253574644deg);
  box-sizing: border-box;
}

.level3 .char36 {
  transform: rotate(34.8260819634deg);
  -webkit-transform: rotate(34.8260819634deg);
  -ms-transform: rotate(34.8260819634deg);
  box-sizing: border-box;
}

.level3 .char37 {
  transform: rotate(36.6268064624deg);
  -webkit-transform: rotate(36.6268064624deg);
  -ms-transform: rotate(36.6268064624deg);
  box-sizing: border-box;
}

.level3 .char38 {
  transform: rotate(38.4275309613deg);
  -webkit-transform: rotate(38.4275309613deg);
  -ms-transform: rotate(38.4275309613deg);
  box-sizing: border-box;
}

.level3 .char39 {
  transform: rotate(40.2282554603deg);
  -webkit-transform: rotate(40.2282554603deg);
  -ms-transform: rotate(40.2282554603deg);
  box-sizing: border-box;
}

.level3 .char40 {
  transform: rotate(42.0289799593deg);
  -webkit-transform: rotate(42.0289799593deg);
  -ms-transform: rotate(42.0289799593deg);
  box-sizing: border-box;
}

.level4 .char1 {
  transform: rotate(-27.8991547512deg);
  -webkit-transform: rotate(-27.8991547512deg);
  -ms-transform: rotate(-27.8991547512deg);
  box-sizing: border-box;
}

.level4 .char2 {
  transform: rotate(-25.7983095024deg);
  -webkit-transform: rotate(-25.7983095024deg);
  -ms-transform: rotate(-25.7983095024deg);
  box-sizing: border-box;
}

.level4 .char3 {
  transform: rotate(-23.6974642536deg);
  -webkit-transform: rotate(-23.6974642536deg);
  -ms-transform: rotate(-23.6974642536deg);
  box-sizing: border-box;
}

.level4 .char4 {
  transform: rotate(-21.5966190047deg);
  -webkit-transform: rotate(-21.5966190047deg);
  -ms-transform: rotate(-21.5966190047deg);
  box-sizing: border-box;
}

.level4 .char5 {
  transform: rotate(-19.4957737559deg);
  -webkit-transform: rotate(-19.4957737559deg);
  -ms-transform: rotate(-19.4957737559deg);
  box-sizing: border-box;
}

.level4 .char6 {
  transform: rotate(-17.3949285071deg);
  -webkit-transform: rotate(-17.3949285071deg);
  -ms-transform: rotate(-17.3949285071deg);
  box-sizing: border-box;
}

.level4 .char7 {
  transform: rotate(-15.2940832583deg);
  -webkit-transform: rotate(-15.2940832583deg);
  -ms-transform: rotate(-15.2940832583deg);
  box-sizing: border-box;
}

.level4 .char8 {
  transform: rotate(-13.1932380095deg);
  -webkit-transform: rotate(-13.1932380095deg);
  -ms-transform: rotate(-13.1932380095deg);
  box-sizing: border-box;
}

.level4 .char9 {
  transform: rotate(-11.0923927607deg);
  -webkit-transform: rotate(-11.0923927607deg);
  -ms-transform: rotate(-11.0923927607deg);
  box-sizing: border-box;
}

.level4 .char10 {
  transform: rotate(-8.9915475119deg);
  -webkit-transform: rotate(-8.9915475119deg);
  -ms-transform: rotate(-8.9915475119deg);
  box-sizing: border-box;
}

.level4 .char11 {
  transform: rotate(-6.8907022631deg);
  -webkit-transform: rotate(-6.8907022631deg);
  -ms-transform: rotate(-6.8907022631deg);
  box-sizing: border-box;
}

.level4 .char12 {
  transform: rotate(-4.7898570142deg);
  -webkit-transform: rotate(-4.7898570142deg);
  -ms-transform: rotate(-4.7898570142deg);
  box-sizing: border-box;
}

.level4 .char13 {
  transform: rotate(-2.6890117654deg);
  -webkit-transform: rotate(-2.6890117654deg);
  -ms-transform: rotate(-2.6890117654deg);
  box-sizing: border-box;
}

.level4 .char14 {
  transform: rotate(-0.5881665166deg);
  -webkit-transform: rotate(-0.5881665166deg);
  -ms-transform: rotate(-0.5881665166deg);
  box-sizing: border-box;
}

.level4 .char15 {
  transform: rotate(1.5126787322deg);
  -webkit-transform: rotate(1.5126787322deg);
  -ms-transform: rotate(1.5126787322deg);
  box-sizing: border-box;
}

.level4 .char16 {
  transform: rotate(3.613523981deg);
  -webkit-transform: rotate(3.613523981deg);
  -ms-transform: rotate(3.613523981deg);
  box-sizing: border-box;
}

.level4 .char17 {
  transform: rotate(5.7143692298deg);
  -webkit-transform: rotate(5.7143692298deg);
  -ms-transform: rotate(5.7143692298deg);
  box-sizing: border-box;
}

.level4 .char18 {
  transform: rotate(7.8152144786deg);
  -webkit-transform: rotate(7.8152144786deg);
  -ms-transform: rotate(7.8152144786deg);
  box-sizing: border-box;
}

.level4 .char19 {
  transform: rotate(9.9160597274deg);
  -webkit-transform: rotate(9.9160597274deg);
  -ms-transform: rotate(9.9160597274deg);
  box-sizing: border-box;
}

.level4 .char20 {
  transform: rotate(12.0169049763deg);
  -webkit-transform: rotate(12.0169049763deg);
  -ms-transform: rotate(12.0169049763deg);
  box-sizing: border-box;
}

.level4 .char21 {
  transform: rotate(14.1177502251deg);
  -webkit-transform: rotate(14.1177502251deg);
  -ms-transform: rotate(14.1177502251deg);
  box-sizing: border-box;
}

.level4 .char22 {
  transform: rotate(16.2185954739deg);
  -webkit-transform: rotate(16.2185954739deg);
  -ms-transform: rotate(16.2185954739deg);
  box-sizing: border-box;
}

.level4 .char23 {
  transform: rotate(18.3194407227deg);
  -webkit-transform: rotate(18.3194407227deg);
  -ms-transform: rotate(18.3194407227deg);
  box-sizing: border-box;
}

.level4 .char24 {
  transform: rotate(20.4202859715deg);
  -webkit-transform: rotate(20.4202859715deg);
  -ms-transform: rotate(20.4202859715deg);
  box-sizing: border-box;
}

.level4 .char25 {
  transform: rotate(22.5211312203deg);
  -webkit-transform: rotate(22.5211312203deg);
  -ms-transform: rotate(22.5211312203deg);
  box-sizing: border-box;
}

.level4 .char26 {
  transform: rotate(24.6219764691deg);
  -webkit-transform: rotate(24.6219764691deg);
  -ms-transform: rotate(24.6219764691deg);
  box-sizing: border-box;
}

.level4 .char27 {
  transform: rotate(26.722821718deg);
  -webkit-transform: rotate(26.722821718deg);
  -ms-transform: rotate(26.722821718deg);
  box-sizing: border-box;
}

.level4 .char28 {
  transform: rotate(28.8236669668deg);
  -webkit-transform: rotate(28.8236669668deg);
  -ms-transform: rotate(28.8236669668deg);
  box-sizing: border-box;
}

.level4 .char29 {
  transform: rotate(30.9245122156deg);
  -webkit-transform: rotate(30.9245122156deg);
  -ms-transform: rotate(30.9245122156deg);
  box-sizing: border-box;
}

.level4 .char30 {
  transform: rotate(33.0253574644deg);
  -webkit-transform: rotate(33.0253574644deg);
  -ms-transform: rotate(33.0253574644deg);
  box-sizing: border-box;
}

.level4 .char31 {
  transform: rotate(35.1262027132deg);
  -webkit-transform: rotate(35.1262027132deg);
  -ms-transform: rotate(35.1262027132deg);
  box-sizing: border-box;
}

.level4 .char32 {
  transform: rotate(37.227047962deg);
  -webkit-transform: rotate(37.227047962deg);
  -ms-transform: rotate(37.227047962deg);
  box-sizing: border-box;
}

.level4 .char33 {
  transform: rotate(39.3278932108deg);
  -webkit-transform: rotate(39.3278932108deg);
  -ms-transform: rotate(39.3278932108deg);
  box-sizing: border-box;
}

.level4 .char34 {
  transform: rotate(41.4287384596deg);
  -webkit-transform: rotate(41.4287384596deg);
  -ms-transform: rotate(41.4287384596deg);
  box-sizing: border-box;
}

.level4 .char35 {
  transform: rotate(43.5295837085deg);
  -webkit-transform: rotate(43.5295837085deg);
  -ms-transform: rotate(43.5295837085deg);
  box-sizing: border-box;
}

.level4 .char36 {
  transform: rotate(45.6304289573deg);
  -webkit-transform: rotate(45.6304289573deg);
  -ms-transform: rotate(45.6304289573deg);
  box-sizing: border-box;
}

.level4 .char37 {
  transform: rotate(47.7312742061deg);
  -webkit-transform: rotate(47.7312742061deg);
  -ms-transform: rotate(47.7312742061deg);
  box-sizing: border-box;
}

.level4 .char38 {
  transform: rotate(49.8321194549deg);
  -webkit-transform: rotate(49.8321194549deg);
  -ms-transform: rotate(49.8321194549deg);
  box-sizing: border-box;
}

.level4 .char39 {
  transform: rotate(51.9329647037deg);
  -webkit-transform: rotate(51.9329647037deg);
  -ms-transform: rotate(51.9329647037deg);
  box-sizing: border-box;
}

.level4 .char40 {
  transform: rotate(54.0338099525deg);
  -webkit-transform: rotate(54.0338099525deg);
  -ms-transform: rotate(54.0338099525deg);
  box-sizing: border-box;
}

.level5 .char1 {
  transform: rotate(-27.4789857014deg);
  -webkit-transform: rotate(-27.4789857014deg);
  -ms-transform: rotate(-27.4789857014deg);
  box-sizing: border-box;
}

.level5 .char2 {
  transform: rotate(-24.9579714028deg);
  -webkit-transform: rotate(-24.9579714028deg);
  -ms-transform: rotate(-24.9579714028deg);
  box-sizing: border-box;
}

.level5 .char3 {
  transform: rotate(-22.4369571043deg);
  -webkit-transform: rotate(-22.4369571043deg);
  -ms-transform: rotate(-22.4369571043deg);
  box-sizing: border-box;
}

.level5 .char4 {
  transform: rotate(-19.9159428057deg);
  -webkit-transform: rotate(-19.9159428057deg);
  -ms-transform: rotate(-19.9159428057deg);
  box-sizing: border-box;
}

.level5 .char5 {
  transform: rotate(-17.3949285071deg);
  -webkit-transform: rotate(-17.3949285071deg);
  -ms-transform: rotate(-17.3949285071deg);
  box-sizing: border-box;
}

.level5 .char6 {
  transform: rotate(-14.8739142085deg);
  -webkit-transform: rotate(-14.8739142085deg);
  -ms-transform: rotate(-14.8739142085deg);
  box-sizing: border-box;
}

.level5 .char7 {
  transform: rotate(-12.35289991deg);
  -webkit-transform: rotate(-12.35289991deg);
  -ms-transform: rotate(-12.35289991deg);
  box-sizing: border-box;
}

.level5 .char8 {
  transform: rotate(-9.8318856114deg);
  -webkit-transform: rotate(-9.8318856114deg);
  -ms-transform: rotate(-9.8318856114deg);
  box-sizing: border-box;
}

.level5 .char9 {
  transform: rotate(-7.3108713128deg);
  -webkit-transform: rotate(-7.3108713128deg);
  -ms-transform: rotate(-7.3108713128deg);
  box-sizing: border-box;
}

.level5 .char10 {
  transform: rotate(-4.7898570142deg);
  -webkit-transform: rotate(-4.7898570142deg);
  -ms-transform: rotate(-4.7898570142deg);
  box-sizing: border-box;
}

.level5 .char11 {
  transform: rotate(-2.2688427157deg);
  -webkit-transform: rotate(-2.2688427157deg);
  -ms-transform: rotate(-2.2688427157deg);
  box-sizing: border-box;
}

.level5 .char12 {
  transform: rotate(0.2521715829deg);
  -webkit-transform: rotate(0.2521715829deg);
  -ms-transform: rotate(0.2521715829deg);
  box-sizing: border-box;
}

.level5 .char13 {
  transform: rotate(2.7731858815deg);
  -webkit-transform: rotate(2.7731858815deg);
  -ms-transform: rotate(2.7731858815deg);
  box-sizing: border-box;
}

.level5 .char14 {
  transform: rotate(5.2942001801deg);
  -webkit-transform: rotate(5.2942001801deg);
  -ms-transform: rotate(5.2942001801deg);
  box-sizing: border-box;
}

.level5 .char15 {
  transform: rotate(7.8152144786deg);
  -webkit-transform: rotate(7.8152144786deg);
  -ms-transform: rotate(7.8152144786deg);
  box-sizing: border-box;
}

.level5 .char16 {
  transform: rotate(10.3362287772deg);
  -webkit-transform: rotate(10.3362287772deg);
  -ms-transform: rotate(10.3362287772deg);
  box-sizing: border-box;
}

.level5 .char17 {
  transform: rotate(12.8572430758deg);
  -webkit-transform: rotate(12.8572430758deg);
  -ms-transform: rotate(12.8572430758deg);
  box-sizing: border-box;
}

.level5 .char18 {
  transform: rotate(15.3782573744deg);
  -webkit-transform: rotate(15.3782573744deg);
  -ms-transform: rotate(15.3782573744deg);
  box-sizing: border-box;
}

.level5 .char19 {
  transform: rotate(17.8992716729deg);
  -webkit-transform: rotate(17.8992716729deg);
  -ms-transform: rotate(17.8992716729deg);
  box-sizing: border-box;
}

.level5 .char20 {
  transform: rotate(20.4202859715deg);
  -webkit-transform: rotate(20.4202859715deg);
  -ms-transform: rotate(20.4202859715deg);
  box-sizing: border-box;
}

.level5 .char21 {
  transform: rotate(22.9413002701deg);
  -webkit-transform: rotate(22.9413002701deg);
  -ms-transform: rotate(22.9413002701deg);
  box-sizing: border-box;
}

.level5 .char22 {
  transform: rotate(25.4623145687deg);
  -webkit-transform: rotate(25.4623145687deg);
  -ms-transform: rotate(25.4623145687deg);
  box-sizing: border-box;
}

.level5 .char23 {
  transform: rotate(27.9833288672deg);
  -webkit-transform: rotate(27.9833288672deg);
  -ms-transform: rotate(27.9833288672deg);
  box-sizing: border-box;
}

.level5 .char24 {
  transform: rotate(30.5043431658deg);
  -webkit-transform: rotate(30.5043431658deg);
  -ms-transform: rotate(30.5043431658deg);
  box-sizing: border-box;
}

.level5 .char25 {
  transform: rotate(33.0253574644deg);
  -webkit-transform: rotate(33.0253574644deg);
  -ms-transform: rotate(33.0253574644deg);
  box-sizing: border-box;
}

.level5 .char26 {
  transform: rotate(35.546371763deg);
  -webkit-transform: rotate(35.546371763deg);
  -ms-transform: rotate(35.546371763deg);
  box-sizing: border-box;
}

.level5 .char27 {
  transform: rotate(38.0673860615deg);
  -webkit-transform: rotate(38.0673860615deg);
  -ms-transform: rotate(38.0673860615deg);
  box-sizing: border-box;
}

.level5 .char28 {
  transform: rotate(40.5884003601deg);
  -webkit-transform: rotate(40.5884003601deg);
  -ms-transform: rotate(40.5884003601deg);
  box-sizing: border-box;
}

.level5 .char29 {
  transform: rotate(43.1094146587deg);
  -webkit-transform: rotate(43.1094146587deg);
  -ms-transform: rotate(43.1094146587deg);
  box-sizing: border-box;
}

.level5 .char30 {
  transform: rotate(45.6304289573deg);
  -webkit-transform: rotate(45.6304289573deg);
  -ms-transform: rotate(45.6304289573deg);
  box-sizing: border-box;
}

.level5 .char31 {
  transform: rotate(48.1514432558deg);
  -webkit-transform: rotate(48.1514432558deg);
  -ms-transform: rotate(48.1514432558deg);
  box-sizing: border-box;
}

.level5 .char32 {
  transform: rotate(50.6724575544deg);
  -webkit-transform: rotate(50.6724575544deg);
  -ms-transform: rotate(50.6724575544deg);
  box-sizing: border-box;
}

.level5 .char33 {
  transform: rotate(53.193471853deg);
  -webkit-transform: rotate(53.193471853deg);
  -ms-transform: rotate(53.193471853deg);
  box-sizing: border-box;
}

.level5 .char34 {
  transform: rotate(55.7144861516deg);
  -webkit-transform: rotate(55.7144861516deg);
  -ms-transform: rotate(55.7144861516deg);
  box-sizing: border-box;
}

.level5 .char35 {
  transform: rotate(58.2355004501deg);
  -webkit-transform: rotate(58.2355004501deg);
  -ms-transform: rotate(58.2355004501deg);
  box-sizing: border-box;
}

.level5 .char36 {
  transform: rotate(60.7565147487deg);
  -webkit-transform: rotate(60.7565147487deg);
  -ms-transform: rotate(60.7565147487deg);
  box-sizing: border-box;
}

.level5 .char37 {
  transform: rotate(63.2775290473deg);
  -webkit-transform: rotate(63.2775290473deg);
  -ms-transform: rotate(63.2775290473deg);
  box-sizing: border-box;
}

.level5 .char38 {
  transform: rotate(65.7985433459deg);
  -webkit-transform: rotate(65.7985433459deg);
  -ms-transform: rotate(65.7985433459deg);
  box-sizing: border-box;
}

.level5 .char39 {
  transform: rotate(68.3195576444deg);
  -webkit-transform: rotate(68.3195576444deg);
  -ms-transform: rotate(68.3195576444deg);
  box-sizing: border-box;
}

.level5 .char40 {
  transform: rotate(70.840571943deg);
  -webkit-transform: rotate(70.840571943deg);
  -ms-transform: rotate(70.840571943deg);
  box-sizing: border-box;
}

.level6 .char1 {
  transform: rotate(-26.8487321268deg);
  -webkit-transform: rotate(-26.8487321268deg);
  -ms-transform: rotate(-26.8487321268deg);
  box-sizing: border-box;
}

.level6-title .char1 {
  transform: rotate(-24.1988023243deg);
  -webkit-transform: rotate(-24.1988023243deg);
  -ms-transform: rotate(-24.1988023243deg);
  box-sizing: border-box;
}

.level6 .char2 {
  transform: rotate(-23.6974642536deg);
  -webkit-transform: rotate(-23.6974642536deg);
  -ms-transform: rotate(-23.6974642536deg);
  box-sizing: border-box;
}

.level6-title .char2 {
  transform: rotate(-20.3313372072deg);
  -webkit-transform: rotate(-20.3313372072deg);
  -ms-transform: rotate(-20.3313372072deg);
  box-sizing: border-box;
}

.level6 .char3 {
  transform: rotate(-20.5461963803deg);
  -webkit-transform: rotate(-20.5461963803deg);
  -ms-transform: rotate(-20.5461963803deg);
  box-sizing: border-box;
}

.level6-title .char3 {
  transform: rotate(-16.46387209deg);
  -webkit-transform: rotate(-16.46387209deg);
  -ms-transform: rotate(-16.46387209deg);
  box-sizing: border-box;
}

.level6 .char4 {
  transform: rotate(-17.3949285071deg);
  -webkit-transform: rotate(-17.3949285071deg);
  -ms-transform: rotate(-17.3949285071deg);
  box-sizing: border-box;
}

.level6-title .char4 {
  transform: rotate(-12.5964069729deg);
  -webkit-transform: rotate(-12.5964069729deg);
  -ms-transform: rotate(-12.5964069729deg);
  box-sizing: border-box;
}

.level6 .char5 {
  transform: rotate(-14.2436606339deg);
  -webkit-transform: rotate(-14.2436606339deg);
  -ms-transform: rotate(-14.2436606339deg);
  box-sizing: border-box;
}

.level6-title .char5 {
  transform: rotate(-8.7289418558deg);
  -webkit-transform: rotate(-8.7289418558deg);
  -ms-transform: rotate(-8.7289418558deg);
  box-sizing: border-box;
}

.level6 .char6 {
  transform: rotate(-11.0923927607deg);
  -webkit-transform: rotate(-11.0923927607deg);
  -ms-transform: rotate(-11.0923927607deg);
  box-sizing: border-box;
}

.level6-title .char6 {
  transform: rotate(-4.8614767386deg);
  -webkit-transform: rotate(-4.8614767386deg);
  -ms-transform: rotate(-4.8614767386deg);
  box-sizing: border-box;
}

.level6 .char7 {
  transform: rotate(-7.9411248875deg);
  -webkit-transform: rotate(-7.9411248875deg);
  -ms-transform: rotate(-7.9411248875deg);
  box-sizing: border-box;
}

.level6-title .char7 {
  transform: rotate(-0.9940116215deg);
  -webkit-transform: rotate(-0.9940116215deg);
  -ms-transform: rotate(-0.9940116215deg);
  box-sizing: border-box;
}

.level6 .char8 {
  transform: rotate(-4.7898570142deg);
  -webkit-transform: rotate(-4.7898570142deg);
  -ms-transform: rotate(-4.7898570142deg);
  box-sizing: border-box;
}

.level6-title .char8 {
  transform: rotate(2.8734534956deg);
  -webkit-transform: rotate(2.8734534956deg);
  -ms-transform: rotate(2.8734534956deg);
  box-sizing: border-box;
}

.level6 .char9 {
  transform: rotate(-1.638589141deg);
  -webkit-transform: rotate(-1.638589141deg);
  -ms-transform: rotate(-1.638589141deg);
  box-sizing: border-box;
}

.level6-title .char9 {
  transform: rotate(6.7409186128deg);
  -webkit-transform: rotate(6.7409186128deg);
  -ms-transform: rotate(6.7409186128deg);
  box-sizing: border-box;
}

.level6 .char10 {
  transform: rotate(1.5126787322deg);
  -webkit-transform: rotate(1.5126787322deg);
  -ms-transform: rotate(1.5126787322deg);
  box-sizing: border-box;
}

.level6-title .char10 {
  transform: rotate(10.6083837299deg);
  -webkit-transform: rotate(10.6083837299deg);
  -ms-transform: rotate(10.6083837299deg);
  box-sizing: border-box;
}

.level6 .char11 {
  transform: rotate(4.6639466054deg);
  -webkit-transform: rotate(4.6639466054deg);
  -ms-transform: rotate(4.6639466054deg);
  box-sizing: border-box;
}

.level6-title .char11 {
  transform: rotate(14.475848847deg);
  -webkit-transform: rotate(14.475848847deg);
  -ms-transform: rotate(14.475848847deg);
  box-sizing: border-box;
}

.level6 .char12 {
  transform: rotate(7.8152144786deg);
  -webkit-transform: rotate(7.8152144786deg);
  -ms-transform: rotate(7.8152144786deg);
  box-sizing: border-box;
}

.level6-title .char12 {
  transform: rotate(18.3433139642deg);
  -webkit-transform: rotate(18.3433139642deg);
  -ms-transform: rotate(18.3433139642deg);
  box-sizing: border-box;
}

.level6 .char13 {
  transform: rotate(10.9664823519deg);
  -webkit-transform: rotate(10.9664823519deg);
  -ms-transform: rotate(10.9664823519deg);
  box-sizing: border-box;
}

.level6-title .char13 {
  transform: rotate(22.2107790813deg);
  -webkit-transform: rotate(22.2107790813deg);
  -ms-transform: rotate(22.2107790813deg);
  box-sizing: border-box;
}

.level6 .char14 {
  transform: rotate(14.1177502251deg);
  -webkit-transform: rotate(14.1177502251deg);
  -ms-transform: rotate(14.1177502251deg);
  box-sizing: border-box;
}

.level6-title .char14 {
  transform: rotate(26.0782441984deg);
  -webkit-transform: rotate(26.0782441984deg);
  -ms-transform: rotate(26.0782441984deg);
  box-sizing: border-box;
}

.level6 .char15 {
  transform: rotate(17.2690180983deg);
  -webkit-transform: rotate(17.2690180983deg);
  -ms-transform: rotate(17.2690180983deg);
  box-sizing: border-box;
}

.level6-title .char15 {
  transform: rotate(29.9457093156deg);
  -webkit-transform: rotate(29.9457093156deg);
  -ms-transform: rotate(29.9457093156deg);
  box-sizing: border-box;
}

.level6 .char16 {
  transform: rotate(20.4202859715deg);
  -webkit-transform: rotate(20.4202859715deg);
  -ms-transform: rotate(20.4202859715deg);
  box-sizing: border-box;
}

.level6-title .char16 {
  transform: rotate(33.8131744327deg);
  -webkit-transform: rotate(33.8131744327deg);
  -ms-transform: rotate(33.8131744327deg);
  box-sizing: border-box;
}

.level6 .char17 {
  transform: rotate(23.5715538447deg);
  -webkit-transform: rotate(23.5715538447deg);
  -ms-transform: rotate(23.5715538447deg);
  box-sizing: border-box;
}

.level6-title .char17 {
  transform: rotate(37.6806395498deg);
  -webkit-transform: rotate(37.6806395498deg);
  -ms-transform: rotate(37.6806395498deg);
  box-sizing: border-box;
}

.level6 .char18 {
  transform: rotate(26.722821718deg);
  -webkit-transform: rotate(26.722821718deg);
  -ms-transform: rotate(26.722821718deg);
  box-sizing: border-box;
}

.level6-title .char18 {
  transform: rotate(41.548104667deg);
  -webkit-transform: rotate(41.548104667deg);
  -ms-transform: rotate(41.548104667deg);
  box-sizing: border-box;
}

.level6 .char19 {
  transform: rotate(29.8740895912deg);
  -webkit-transform: rotate(29.8740895912deg);
  -ms-transform: rotate(29.8740895912deg);
  box-sizing: border-box;
}

.level6-title .char19 {
  transform: rotate(45.4155697841deg);
  -webkit-transform: rotate(45.4155697841deg);
  -ms-transform: rotate(45.4155697841deg);
  box-sizing: border-box;
}

.level6 .char20 {
  transform: rotate(33.0253574644deg);
  -webkit-transform: rotate(33.0253574644deg);
  -ms-transform: rotate(33.0253574644deg);
  box-sizing: border-box;
}

.level6-title .char20 {
  transform: rotate(49.2830349012deg);
  -webkit-transform: rotate(49.2830349012deg);
  -ms-transform: rotate(49.2830349012deg);
  box-sizing: border-box;
}

.level6 .char21 {
  transform: rotate(36.1766253376deg);
  -webkit-transform: rotate(36.1766253376deg);
  -ms-transform: rotate(36.1766253376deg);
  box-sizing: border-box;
}

.level6-title .char21 {
  transform: rotate(53.1505000184deg);
  -webkit-transform: rotate(53.1505000184deg);
  -ms-transform: rotate(53.1505000184deg);
  box-sizing: border-box;
}

.level6 .char22 {
  transform: rotate(39.3278932108deg);
  -webkit-transform: rotate(39.3278932108deg);
  -ms-transform: rotate(39.3278932108deg);
  box-sizing: border-box;
}

.level6-title .char22 {
  transform: rotate(57.0179651355deg);
  -webkit-transform: rotate(57.0179651355deg);
  -ms-transform: rotate(57.0179651355deg);
  box-sizing: border-box;
}

.level6 .char23 {
  transform: rotate(42.479161084deg);
  -webkit-transform: rotate(42.479161084deg);
  -ms-transform: rotate(42.479161084deg);
  box-sizing: border-box;
}

.level6-title .char23 {
  transform: rotate(60.8854302526deg);
  -webkit-transform: rotate(60.8854302526deg);
  -ms-transform: rotate(60.8854302526deg);
  box-sizing: border-box;
}

.level6 .char24 {
  transform: rotate(45.6304289573deg);
  -webkit-transform: rotate(45.6304289573deg);
  -ms-transform: rotate(45.6304289573deg);
  box-sizing: border-box;
}

.level6-title .char24 {
  transform: rotate(64.7528953698deg);
  -webkit-transform: rotate(64.7528953698deg);
  -ms-transform: rotate(64.7528953698deg);
  box-sizing: border-box;
}

.level6 .char25 {
  transform: rotate(48.7816968305deg);
  -webkit-transform: rotate(48.7816968305deg);
  -ms-transform: rotate(48.7816968305deg);
  box-sizing: border-box;
}

.level6-title .char25 {
  transform: rotate(68.6203604869deg);
  -webkit-transform: rotate(68.6203604869deg);
  -ms-transform: rotate(68.6203604869deg);
  box-sizing: border-box;
}

.level6 .char26 {
  transform: rotate(51.9329647037deg);
  -webkit-transform: rotate(51.9329647037deg);
  -ms-transform: rotate(51.9329647037deg);
  box-sizing: border-box;
}

.level6-title .char26 {
  transform: rotate(72.487825604deg);
  -webkit-transform: rotate(72.487825604deg);
  -ms-transform: rotate(72.487825604deg);
  box-sizing: border-box;
}

.level6 .char27 {
  transform: rotate(55.0842325769deg);
  -webkit-transform: rotate(55.0842325769deg);
  -ms-transform: rotate(55.0842325769deg);
  box-sizing: border-box;
}

.level6-title .char27 {
  transform: rotate(76.3552907212deg);
  -webkit-transform: rotate(76.3552907212deg);
  -ms-transform: rotate(76.3552907212deg);
  box-sizing: border-box;
}

.level6 .char28 {
  transform: rotate(58.2355004501deg);
  -webkit-transform: rotate(58.2355004501deg);
  -ms-transform: rotate(58.2355004501deg);
  box-sizing: border-box;
}

.level6-title .char28 {
  transform: rotate(80.2227558383deg);
  -webkit-transform: rotate(80.2227558383deg);
  -ms-transform: rotate(80.2227558383deg);
  box-sizing: border-box;
}

.level6 .char29 {
  transform: rotate(61.3867683234deg);
  -webkit-transform: rotate(61.3867683234deg);
  -ms-transform: rotate(61.3867683234deg);
  box-sizing: border-box;
}

.level6-title .char29 {
  transform: rotate(84.0902209554deg);
  -webkit-transform: rotate(84.0902209554deg);
  -ms-transform: rotate(84.0902209554deg);
  box-sizing: border-box;
}

.level6 .char30 {
  transform: rotate(64.5380361966deg);
  -webkit-transform: rotate(64.5380361966deg);
  -ms-transform: rotate(64.5380361966deg);
  box-sizing: border-box;
}

.level6-title .char30 {
  transform: rotate(87.9576860726deg);
  -webkit-transform: rotate(87.9576860726deg);
  -ms-transform: rotate(87.9576860726deg);
  box-sizing: border-box;
}

.level6 .char31 {
  transform: rotate(67.6893040698deg);
  -webkit-transform: rotate(67.6893040698deg);
  -ms-transform: rotate(67.6893040698deg);
  box-sizing: border-box;
}

.level6-title .char31 {
  transform: rotate(91.8251511897deg);
  -webkit-transform: rotate(91.8251511897deg);
  -ms-transform: rotate(91.8251511897deg);
  box-sizing: border-box;
}

.level6 .char32 {
  transform: rotate(70.840571943deg);
  -webkit-transform: rotate(70.840571943deg);
  -ms-transform: rotate(70.840571943deg);
  box-sizing: border-box;
}

.level6-title .char32 {
  transform: rotate(95.6926163068deg);
  -webkit-transform: rotate(95.6926163068deg);
  -ms-transform: rotate(95.6926163068deg);
  box-sizing: border-box;
}

.level6 .char33 {
  transform: rotate(73.9918398162deg);
  -webkit-transform: rotate(73.9918398162deg);
  -ms-transform: rotate(73.9918398162deg);
  box-sizing: border-box;
}

.level6-title .char33 {
  transform: rotate(99.560081424deg);
  -webkit-transform: rotate(99.560081424deg);
  -ms-transform: rotate(99.560081424deg);
  box-sizing: border-box;
}

.level6 .char34 {
  transform: rotate(77.1431076895deg);
  -webkit-transform: rotate(77.1431076895deg);
  -ms-transform: rotate(77.1431076895deg);
  box-sizing: border-box;
}

.level6-title .char34 {
  transform: rotate(103.4275465411deg);
  -webkit-transform: rotate(103.4275465411deg);
  -ms-transform: rotate(103.4275465411deg);
  box-sizing: border-box;
}

.level6 .char35 {
  transform: rotate(80.2943755627deg);
  -webkit-transform: rotate(80.2943755627deg);
  -ms-transform: rotate(80.2943755627deg);
  box-sizing: border-box;
}

.level6-title .char35 {
  transform: rotate(107.2950116582deg);
  -webkit-transform: rotate(107.2950116582deg);
  -ms-transform: rotate(107.2950116582deg);
  box-sizing: border-box;
}

.level6 .char36 {
  transform: rotate(83.4456434359deg);
  -webkit-transform: rotate(83.4456434359deg);
  -ms-transform: rotate(83.4456434359deg);
  box-sizing: border-box;
}

.level6-title .char36 {
  transform: rotate(111.1624767754deg);
  -webkit-transform: rotate(111.1624767754deg);
  -ms-transform: rotate(111.1624767754deg);
  box-sizing: border-box;
}

.level6 .char37 {
  transform: rotate(86.5969113091deg);
  -webkit-transform: rotate(86.5969113091deg);
  -ms-transform: rotate(86.5969113091deg);
  box-sizing: border-box;
}

.level6-title .char37 {
  transform: rotate(115.0299418925deg);
  -webkit-transform: rotate(115.0299418925deg);
  -ms-transform: rotate(115.0299418925deg);
  box-sizing: border-box;
}

.level6 .char38 {
  transform: rotate(89.7481791823deg);
  -webkit-transform: rotate(89.7481791823deg);
  -ms-transform: rotate(89.7481791823deg);
  box-sizing: border-box;
}

.level6-title .char38 {
  transform: rotate(118.8974070096deg);
  -webkit-transform: rotate(118.8974070096deg);
  -ms-transform: rotate(118.8974070096deg);
  box-sizing: border-box;
}

.level6 .char39 {
  transform: rotate(92.8994470556deg);
  -webkit-transform: rotate(92.8994470556deg);
  -ms-transform: rotate(92.8994470556deg);
  box-sizing: border-box;
}

.level6-title .char39 {
  transform: rotate(122.7648721268deg);
  -webkit-transform: rotate(122.7648721268deg);
  -ms-transform: rotate(122.7648721268deg);
  box-sizing: border-box;
}

.level6 .char40 {
  transform: rotate(96.0507149288deg);
  -webkit-transform: rotate(96.0507149288deg);
  -ms-transform: rotate(96.0507149288deg);
  box-sizing: border-box;
}

.level6-title .char40 {
  transform: rotate(126.6323372439deg);
  -webkit-transform: rotate(126.6323372439deg);
  -ms-transform: rotate(126.6323372439deg);
  box-sizing: border-box;
}

.box {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  transition: top 1.4s ease;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}

.box-inner-container {
  flex-grow: 1;
}

.box-inner {
  position: absolute;
  width: 49%;
  height: 100%;
  padding: 0;
  color: #fff;
  background-image: linear-gradient(#19233f, #19233f 10%, #e32727 60%);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
}

.box-inner-full {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 20px;
  color: #fff;
  background-image: linear-gradient(#19233f, #19233f 10%, #e32727 60%);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  z-index: 99;
}

.box-inner-bw {
  color: black;
  background-image: none;
  background-color: rgb(230, 230, 230);
}

.box-content {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  pointer-events: auto;
  box-sizing: border-box;
  margin-bottom: 170px;
}

/* Track */
.box-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0);
}

/* Handle */
.box-content::-webkit-scrollbar-thumb {
  background: rgb(225, 225, 225);
}

/* Handle on hover */
.box-content::-webkit-scrollbar-thumb:hover {
  background: rgb(132, 132, 132);
}

/* Track */
.box-content-bw::-webkit-scrollbar-track {
  background: rgb(225, 225, 225) !important;
}

/* Handle */
.box-content-bw::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 0) !important;
}

/* Handle on hover */
.box-content-bw::-webkit-scrollbar-thumb:hover {
  background: rgb(225, 225, 225) !important;
}

.box-inner-left {
  left: 0px;
}

.box-inner-right {
  right: 0px;
}

.spinner {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 1px rgb(0, 0, 0);
}

.box-controls {
  position: absolute;
  left: 100%;
  pointer-events: auto;
  margin-left: 10px;
  display: none;
}

.item {
  background-image: linear-gradient(#19233f, #e32727);
}

.detail-title {
  background: #19233f;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 5px;
}

.detail-title-bw {
  background: rgb(230, 230, 230);
}

.wheel-aside {
  top: 100% !important;
  transform: translateY(-60px) !important;
}

.description-up {
  top: 20px;
}

.material-symbols-rounded {
  color: #484848;
}

#swipeIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

#leftPanel {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#leftPanelContainer {
  position: relative;
  z-index: -99;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 20px;
  justify-content: space-between;
  background-color: #eeeeee;
  border-radius: 15px;
}

.panel-item {
  margin: 10px;
}

#pageTitle {
  font-weight: bold;
  font-style: italic;
  text-align: start;
}

#infoButton {
  pointer-events: auto !important;
}

#ripple {
  color: #19233f;
}

#framework {
  color: #e32727;
}

#logos {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  flex-wrap: wrap;
}

#boxTitle {
  align-self: center;
  text-align: center;
  vertical-align: bottom;
  color: #19233f;
  background-color: #FFF;
  z-index: 99;
  padding: 0px 5px 0px 5px;
}

.title-line {
  background-color: #484848;
  width: 100%;
  position: absolute;
  height: 2px;
  border-radius: 1px;
}

hr {
  margin-top: 0;
  margin-bottom: 2px;
}

#instructions {
  pointer-events: auto;
}

.instruction-row, .feedback-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.feedback-row {
  font-weight: normal;
  font-style: normal;
  pointer-events: auto !important;
}

.box-controls-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-items: center;
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

h3 {
  margin: 0;
}

#greyscaleSwitch {
  pointer-events: auto !important;
}

.hide {
  display: none !important;
}

#infoButton {
  pointer-events: auto !important;
}

a {
  color: #e32727;
}

.polaroid {
  background: #fff;
  padding: 10px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
}

.polaroid > img {
  object-fit: cover;
  flex: 1;
  overflow: hidden;
}

#image1 {
  transform: rotate(15deg) translate(5%, 3%);
}

#image2 {
  transform: rotate(-10deg) translate(-4%, 1%);
}

#image3 {
  transform: rotate(3deg) translate(2%, -6%);
}

.caption {
  font-size: 1.8rem;
  text-align: center;
  line-height: 2em;
}

#imageArea {
  position: absolute;
  left: 100%;
  margin-left: 40px;
  top: 40%;
  transform: translateY(-50%);
  z-index: -99;
  visibility: visible;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

#imageCredit {
  pointer-events: auto;
  font-size: 8pt;
  line-height: 10pt;
  padding: 8px 0px 2px 0px;
}

.download-area {
  display: flex;
  flex-direction: row;
  pointer-events: auto;
  align-items: center;
  color: #FFF;
}

.download-area-bw {
  color: black;
}

.download-text {
  padding: 0;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

/*# sourceMappingURL=style.css.map */