.canvas {
  position: relative;
}
.canvas canvas#particles {
  width: 100%;
  height: 95vh;
  background: radial-gradient(ellipse at bottom, #26394D 0%, #090A0F 100%);
  display: block;
}
.canvas .canvas-text-container {
  position: absolute;
  top: 7vh;
  left: 0;
  height: 75%;
  width: 100%;
  pointer-events: none;
}
.canvas .canvas-text-container .canvas-text {
  font-family: "Nunito Sans";
  font-weight: 200;
  color: white;
  word-wrap: break-word;
  user-select: none;
  -webkit-user-select: none;
  transform: translateZ(0) scale(1, 1);
  opacity: 0;
  animation: canvas-text-fade-in 1s;
  animation-fill-mode: forwards;
}
@keyframes canvas-text-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.canvas .canvas-text-container .canvas-text:nth-child(1) {
  animation-delay: calc(1000ms * 1);
}
.canvas .canvas-text-container .canvas-text:nth-child(2) {
  animation-delay: calc(1000ms * 2);
}
.canvas .canvas-text-container .canvas-text:nth-child(3) {
  animation-delay: calc(1000ms * 3);
}
.canvas .canvas-text-container .canvas-text:nth-child(4) {
  animation-delay: calc(1000ms * 4);
}
.canvas .canvas-text-container .canvas-text .gradient {
  background: linear-gradient(white, #052342);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .canvas .canvas-text-container .canvas-text .gradient {
    background: none;
    opacity: 0.5 !important;
  }
}
.canvas .canvas-text-container .canvas-text .bold {
  opacity: 1;
}
.canvas .canvas-text-container .canvas-text .light {
  opacity: 0.5;
}
@media all and (max-width: 575.98px) {
  .canvas .canvas-text-container .canvas-text .lg {
    font-size: 2.5rem;
  }
}
@media all and (min-width: 576px) {
  .canvas .canvas-text-container .canvas-text .lg {
    font-size: 4rem;
  }
}
@media all and (min-width: 768px) {
  .canvas .canvas-text-container .canvas-text .lg {
    font-size: 6rem;
  }
}
@media all and (min-width: 992px) {
  .canvas .canvas-text-container .canvas-text .lg {
    font-size: 8.5rem;
  }
}
@media all and (max-width: 575.98px) {
  .canvas .canvas-text-container .canvas-text .sm {
    font-size: 0.75rem;
  }
}
@media all and (min-width: 576px) {
  .canvas .canvas-text-container .canvas-text .sm {
    font-size: 1rem;
  }
}
@media all and (min-width: 768px) {
  .canvas .canvas-text-container .canvas-text .sm {
    font-size: 1.5rem;
  }
}
@media all and (min-width: 992px) {
  .canvas .canvas-text-container .canvas-text .sm {
    font-size: 2rem;
  }
}
.canvas .canvas-text-container .canvas-text.design {
  position: absolute;
  top: 0%;
}
@media all and (max-width: 575.98px) {
  .canvas .canvas-text-container .canvas-text.design {
    left: 50%;
    transform: translate(-50%, 0%) translateZ(0) scale(1, 1);
  }
}
@media all and (min-width: 576px) {
  .canvas .canvas-text-container .canvas-text.design {
    left: 10%;
    transform: translate(-10%, 0%) translateZ(0) scale(1, 1);
  }
}
.canvas .canvas-text-container .canvas-text.develop {
  position: absolute;
  top: 33%;
}
@media all and (max-width: 575.98px) {
  .canvas .canvas-text-container .canvas-text.develop {
    left: 50%;
    transform: translate(-50%, -33%) translateZ(0) scale(1, 1);
  }
}
@media all and (min-width: 576px) {
  .canvas .canvas-text-container .canvas-text.develop {
    left: 36%;
    transform: translate(-36%, -33%) translateZ(0) scale(1, 1);
  }
}
.canvas .canvas-text-container .canvas-text.deploy {
  position: absolute;
  top: 66%;
}
@media all and (max-width: 575.98px) {
  .canvas .canvas-text-container .canvas-text.deploy {
    left: 50%;
    transform: translate(-50%, -66%) translateZ(0) scale(1, 1);
  }
}
@media all and (min-width: 576px) {
  .canvas .canvas-text-container .canvas-text.deploy {
    left: 56%;
    transform: translate(-56%, -66%) translateZ(0) scale(1, 1);
  }
}
.canvas .canvas-text-container .canvas-text.discover {
  position: absolute;
  top: 100%;
}
@media all and (max-width: 575.98px) {
  .canvas .canvas-text-container .canvas-text.discover {
    left: 50%;
    transform: translate(-50%, -100%) translateZ(0) scale(1, 1);
  }
}
@media all and (min-width: 576px) {
  .canvas .canvas-text-container .canvas-text.discover {
    left: 90%;
    transform: translate(-90%, -100%) translateZ(0) scale(1, 1);
  }
}
bg {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  margin: 0;
}

#pattern-hex polygon {
  fill: none;
  stroke: #EBEBF4;
  stroke-width: 5;
}
html {
  font-size: 16px;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  position: fixed;
  height: 100%;
  width: 100%;
  min-width: 300px;
  background-color: #F4F4F9;
  color: #3C3C60;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: transform 0.5s;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  body {
    position: relative;
    overflow-y: scroll;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}
.btn {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 2px solid transparent;
  border-radius: 4px;
  margin: 0;
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  line-height: 1.5;
  transition: all 0.15s ease-in-out;
  transform-style: preserve-3d;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}
@media all and (max-width: 575.98px) {
  .btn {
    font-size: 0.75rem;
  }
}
.btn:not(.disabled), .btn:not(:disabled) {
  cursor: pointer;
}
.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}
.btn:focus {
  outline: none;
}
.btn.is-rounded {
  border-radius: 290486px;
}
.btn.is-elevated {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 15, 0.2), 0 2px 2px 0 rgba(0, 0, 15, 0.14), 0 1px 5px 0 rgba(0, 0, 15, 0.12);
}
.btn.is-elevated:hover, .btn.is-elevated:focus {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 15, 0.2), 0 4px 5px 0 rgba(0, 0, 15, 0.14), 0 1px 10px 0 rgba(0, 0, 15, 0.12);
}
.btn.is-elevated:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 15, 0.2), 0 8px 10px 1px rgba(0, 0, 15, 0.14), 0 3px 14px 2px rgba(0, 0, 15, 0.12);
}
.btn.is-base {
  background-color: #F4F4F9;
  border-color: #F4F4F9;
  color: #3C3C60;
}
.btn.is-base:hover, .btn.is-base:focus {
  background-color: #dadaeb;
  border-color: #dadaeb;
}
.btn.is-base:active {
  background-color: #bfbfdc;
  border-color: #bfbfdc;
}
.btn.is-base.is-outline {
  background-color: transparent;
  border-color: #F4F4F9;
  color: #F4F4F9;
}
.btn.is-base.is-outline:hover, .btn.is-base.is-outline:focus {
  background-color: #F4F4F9;
  color: #3C3C60;
}
.btn.is-base.is-outline:active {
  background-color: #bfbfdc;
  border-color: #bfbfdc;
  color: #3C3C60;
}
.btn.is-base.is-svg {
  color: inherit;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  border-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn.is-base.is-svg:hover, .btn.is-base.is-svg:focus {
  color: #F4F4F9;
  transform: scale(1.2, 1.2);
}
.btn.is-base.is-svg:active {
  transform: scale(0.85, 0.85);
}
.btn.is-base.is-text {
  background-color: transparent;
  border: none;
  border-color: transparent;
  color: #F4F4F9;
}
.btn.is-base.is-text:hover, .btn.is-base.is-text:focus {
  background-color: rgba(244, 244, 249, 0.15);
}
.btn.is-base.is-text:active {
  background-color: rgba(244, 244, 249, 0.25);
}
@supports not (-ms-high-contrast: none) {
  .btn.is-base.is-text.is-custom {
    color: #297eab;
    color: var(--button-background-color, #297eab);
  }
  .btn.is-base.is-text.is-custom::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: all 0.15s ease-in-out;
    background-color: #297eab;
    background-color: var(--button-background-color, #297eab);
  }
  .btn.is-base.is-text.is-custom:hover, .btn.is-base.is-text.is-custom:focus {
    background-color: transparent;
  }
  .btn.is-base.is-text.is-custom:hover::after, .btn.is-base.is-text.is-custom:focus::after {
    opacity: 0.15;
  }
  .btn.is-base.is-text.is-custom:active {
    background-color: transparent;
  }
  .btn.is-base.is-text.is-custom:active::after {
    opacity: 0.25;
  }
}
.btn.is-primary {
  background-color: #297eab;
  border-color: #297eab;
  color: white;
}
.btn.is-primary:hover, .btn.is-primary:focus {
  background-color: #21668a;
  border-color: #21668a;
}
.btn.is-primary:active {
  background-color: #194e69;
  border-color: #194e69;
}
.btn.is-primary.is-outline {
  background-color: transparent;
  border-color: #297eab;
  color: #297eab;
}
.btn.is-primary.is-outline:hover, .btn.is-primary.is-outline:focus {
  background-color: #297eab;
  color: white;
}
.btn.is-primary.is-outline:active {
  background-color: #194e69;
  border-color: #194e69;
  color: white;
}
.btn.is-primary.is-svg {
  color: inherit;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  border-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn.is-primary.is-svg:hover, .btn.is-primary.is-svg:focus {
  color: #297eab;
  transform: scale(1.2, 1.2);
}
.btn.is-primary.is-svg:active {
  transform: scale(0.85, 0.85);
}
.btn.is-primary.is-text {
  background-color: transparent;
  border: none;
  border-color: transparent;
  color: #297eab;
}
.btn.is-primary.is-text:hover, .btn.is-primary.is-text:focus {
  background-color: rgba(41, 126, 171, 0.15);
}
.btn.is-primary.is-text:active {
  background-color: rgba(41, 126, 171, 0.25);
}
@supports not (-ms-high-contrast: none) {
  .btn.is-primary.is-text.is-custom {
    color: #297eab;
    color: var(--button-background-color, #297eab);
  }
  .btn.is-primary.is-text.is-custom::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: all 0.15s ease-in-out;
    background-color: #297eab;
    background-color: var(--button-background-color, #297eab);
  }
  .btn.is-primary.is-text.is-custom:hover, .btn.is-primary.is-text.is-custom:focus {
    background-color: transparent;
  }
  .btn.is-primary.is-text.is-custom:hover::after, .btn.is-primary.is-text.is-custom:focus::after {
    opacity: 0.15;
  }
  .btn.is-primary.is-text.is-custom:active {
    background-color: transparent;
  }
  .btn.is-primary.is-text.is-custom:active::after {
    opacity: 0.25;
  }
}
.btn.is-secondary {
  background-color: white;
  border-color: white;
  color: #3C3C60;
}
.btn.is-secondary:hover, .btn.is-secondary:focus {
  background-color: #ebebeb;
  border-color: #ebebeb;
}
.btn.is-secondary:active {
  background-color: #d6d6d6;
  border-color: #d6d6d6;
}
.btn.is-secondary.is-outline {
  background-color: transparent;
  border-color: white;
  color: white;
}
.btn.is-secondary.is-outline:hover, .btn.is-secondary.is-outline:focus {
  background-color: white;
  color: #3C3C60;
}
.btn.is-secondary.is-outline:active {
  background-color: #d6d6d6;
  border-color: #d6d6d6;
  color: #3C3C60;
}
.btn.is-secondary.is-svg {
  color: inherit;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  border-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn.is-secondary.is-svg:hover, .btn.is-secondary.is-svg:focus {
  color: white;
  transform: scale(1.2, 1.2);
}
.btn.is-secondary.is-svg:active {
  transform: scale(0.85, 0.85);
}
.btn.is-secondary.is-text {
  background-color: transparent;
  border: none;
  border-color: transparent;
  color: white;
}
.btn.is-secondary.is-text:hover, .btn.is-secondary.is-text:focus {
  background-color: rgba(255, 255, 255, 0.15);
}
.btn.is-secondary.is-text:active {
  background-color: rgba(255, 255, 255, 0.25);
}
@supports not (-ms-high-contrast: none) {
  .btn.is-secondary.is-text.is-custom {
    color: #297eab;
    color: var(--button-background-color, #297eab);
  }
  .btn.is-secondary.is-text.is-custom::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: all 0.15s ease-in-out;
    background-color: #297eab;
    background-color: var(--button-background-color, #297eab);
  }
  .btn.is-secondary.is-text.is-custom:hover, .btn.is-secondary.is-text.is-custom:focus {
    background-color: transparent;
  }
  .btn.is-secondary.is-text.is-custom:hover::after, .btn.is-secondary.is-text.is-custom:focus::after {
    opacity: 0.15;
  }
  .btn.is-secondary.is-text.is-custom:active {
    background-color: transparent;
  }
  .btn.is-secondary.is-text.is-custom:active::after {
    opacity: 0.25;
  }
}
.btn.is-dark {
  background-color: #2D323F;
  border-color: #2D323F;
  color: white;
}
.btn.is-dark:hover, .btn.is-dark:focus {
  background-color: #1c1f27;
  border-color: #1c1f27;
}
.btn.is-dark:active {
  background-color: #0b0c0f;
  border-color: #0b0c0f;
}
.btn.is-dark.is-outline {
  background-color: transparent;
  border-color: #2D323F;
  color: #2D323F;
}
.btn.is-dark.is-outline:hover, .btn.is-dark.is-outline:focus {
  background-color: #2D323F;
  color: white;
}
.btn.is-dark.is-outline:active {
  background-color: #0b0c0f;
  border-color: #0b0c0f;
  color: white;
}
.btn.is-dark.is-svg {
  color: inherit;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  border-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn.is-dark.is-svg:hover, .btn.is-dark.is-svg:focus {
  color: #2D323F;
  transform: scale(1.2, 1.2);
}
.btn.is-dark.is-svg:active {
  transform: scale(0.85, 0.85);
}
.btn.is-dark.is-text {
  background-color: transparent;
  border: none;
  border-color: transparent;
  color: #2D323F;
}
.btn.is-dark.is-text:hover, .btn.is-dark.is-text:focus {
  background-color: rgba(45, 50, 63, 0.15);
}
.btn.is-dark.is-text:active {
  background-color: rgba(45, 50, 63, 0.25);
}
@supports not (-ms-high-contrast: none) {
  .btn.is-dark.is-text.is-custom {
    color: #297eab;
    color: var(--button-background-color, #297eab);
  }
  .btn.is-dark.is-text.is-custom::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: all 0.15s ease-in-out;
    background-color: #297eab;
    background-color: var(--button-background-color, #297eab);
  }
  .btn.is-dark.is-text.is-custom:hover, .btn.is-dark.is-text.is-custom:focus {
    background-color: transparent;
  }
  .btn.is-dark.is-text.is-custom:hover::after, .btn.is-dark.is-text.is-custom:focus::after {
    opacity: 0.15;
  }
  .btn.is-dark.is-text.is-custom:active {
    background-color: transparent;
  }
  .btn.is-dark.is-text.is-custom:active::after {
    opacity: 0.25;
  }
}
.btn.is-darker {
  background-color: #222636;
  border-color: #222636;
  color: white;
}
.btn.is-darker:hover, .btn.is-darker:focus {
  background-color: #12141d;
  border-color: #12141d;
}
.btn.is-darker:active {
  background-color: #020304;
  border-color: #020304;
}
.btn.is-darker.is-outline {
  background-color: transparent;
  border-color: #222636;
  color: #222636;
}
.btn.is-darker.is-outline:hover, .btn.is-darker.is-outline:focus {
  background-color: #222636;
  color: white;
}
.btn.is-darker.is-outline:active {
  background-color: #020304;
  border-color: #020304;
  color: white;
}
.btn.is-darker.is-svg {
  color: inherit;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  border-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn.is-darker.is-svg:hover, .btn.is-darker.is-svg:focus {
  color: #222636;
  transform: scale(1.2, 1.2);
}
.btn.is-darker.is-svg:active {
  transform: scale(0.85, 0.85);
}
.btn.is-darker.is-text {
  background-color: transparent;
  border: none;
  border-color: transparent;
  color: #222636;
}
.btn.is-darker.is-text:hover, .btn.is-darker.is-text:focus {
  background-color: rgba(34, 38, 54, 0.15);
}
.btn.is-darker.is-text:active {
  background-color: rgba(34, 38, 54, 0.25);
}
@supports not (-ms-high-contrast: none) {
  .btn.is-darker.is-text.is-custom {
    color: #297eab;
    color: var(--button-background-color, #297eab);
  }
  .btn.is-darker.is-text.is-custom::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: all 0.15s ease-in-out;
    background-color: #297eab;
    background-color: var(--button-background-color, #297eab);
  }
  .btn.is-darker.is-text.is-custom:hover, .btn.is-darker.is-text.is-custom:focus {
    background-color: transparent;
  }
  .btn.is-darker.is-text.is-custom:hover::after, .btn.is-darker.is-text.is-custom:focus::after {
    opacity: 0.15;
  }
  .btn.is-darker.is-text.is-custom:active {
    background-color: transparent;
  }
  .btn.is-darker.is-text.is-custom:active::after {
    opacity: 0.25;
  }
}
.xs-display-block {
  display: block !important;
}

@media all and (min-width: 576px) {
  .sm-display-block {
    display: block !important;
  }
}
@media all and (min-width: 768px) {
  .md-display-block {
    display: block !important;
  }
}
@media all and (min-width: 992px) {
  .lg-display-block {
    display: block !important;
  }
}
@media all and (min-width: 1200px) {
  .xl-display-block {
    display: block !important;
  }
}
.xs-display-inline-block {
  display: inline-block !important;
}

@media all and (min-width: 576px) {
  .sm-display-inline-block {
    display: inline-block !important;
  }
}
@media all and (min-width: 768px) {
  .md-display-inline-block {
    display: inline-block !important;
  }
}
@media all and (min-width: 992px) {
  .lg-display-inline-block {
    display: inline-block !important;
  }
}
@media all and (min-width: 1200px) {
  .xl-display-inline-block {
    display: inline-block !important;
  }
}
.xs-display-flex {
  display: flex !important;
}

@media all and (min-width: 576px) {
  .sm-display-flex {
    display: flex !important;
  }
}
@media all and (min-width: 768px) {
  .md-display-flex {
    display: flex !important;
  }
}
@media all and (min-width: 992px) {
  .lg-display-flex {
    display: flex !important;
  }
}
@media all and (min-width: 1200px) {
  .xl-display-flex {
    display: flex !important;
  }
}
.xs-display-none {
  display: none !important;
}

@media all and (min-width: 576px) {
  .sm-display-none {
    display: none !important;
  }
}
@media all and (min-width: 768px) {
  .md-display-none {
    display: none !important;
  }
}
@media all and (min-width: 992px) {
  .lg-display-none {
    display: none !important;
  }
}
@media all and (min-width: 1200px) {
  .xl-display-none {
    display: none !important;
  }
}
.dropdown {
  display: block;
  position: relative;
  width: 100%;
  margin: 0.5rem auto;
  font-family: inherit;
  font-size: 1rem;
  user-select: none;
}
.dropdown:not(.disabled), .dropdown:not(:disabled) {
  cursor: pointer;
}
.dropdown:disabled {
  opacity: 0.45;
  pointer-events: none;
}
.dropdown:focus {
  outline: none;
}
.dropdown.is-base {
  background-color: inherit;
  color: inherit;
}
.dropdown.is-base:active .selected-options .arrow, .dropdown.is-base.active .selected-options .arrow {
  color: #F4F4F9;
}
.dropdown.is-base:active .selected-options .display:after, .dropdown.is-base.active .selected-options .display:after {
  height: 2px;
  background-color: #F4F4F9;
}
.dropdown.is-base:active .menu .options > li:hover, .dropdown.is-base:active .menu .options > li.hover, .dropdown.is-base.active .menu .options > li:hover, .dropdown.is-base.active .menu .options > li.hover {
  background-color: rgba(60, 60, 96, 0.15);
}
.dropdown.is-base:active .menu .options > li:active, .dropdown.is-base:active .menu .options > li.selected, .dropdown.is-base.active .menu .options > li:active, .dropdown.is-base.active .menu .options > li.selected {
  background-color: rgba(244, 244, 249, 0.25);
}
.dropdown.is-base:active .menu .options > li:active:hover, .dropdown.is-base:active .menu .options > li:active.hover, .dropdown.is-base:active .menu .options > li.selected:hover, .dropdown.is-base:active .menu .options > li.selected.hover, .dropdown.is-base.active .menu .options > li:active:hover, .dropdown.is-base.active .menu .options > li:active.hover, .dropdown.is-base.active .menu .options > li.selected:hover, .dropdown.is-base.active .menu .options > li.selected.hover {
  background-color: rgba(244, 244, 249, 0.4);
}
.dropdown.is-primary {
  background-color: inherit;
  color: inherit;
}
.dropdown.is-primary:active .selected-options .arrow, .dropdown.is-primary.active .selected-options .arrow {
  color: #297eab;
}
.dropdown.is-primary:active .selected-options .display:after, .dropdown.is-primary.active .selected-options .display:after {
  height: 2px;
  background-color: #297eab;
}
.dropdown.is-primary:active .menu .options > li:hover, .dropdown.is-primary:active .menu .options > li.hover, .dropdown.is-primary.active .menu .options > li:hover, .dropdown.is-primary.active .menu .options > li.hover {
  background-color: rgba(60, 60, 96, 0.15);
}
.dropdown.is-primary:active .menu .options > li:active, .dropdown.is-primary:active .menu .options > li.selected, .dropdown.is-primary.active .menu .options > li:active, .dropdown.is-primary.active .menu .options > li.selected {
  background-color: rgba(41, 126, 171, 0.25);
}
.dropdown.is-primary:active .menu .options > li:active:hover, .dropdown.is-primary:active .menu .options > li:active.hover, .dropdown.is-primary:active .menu .options > li.selected:hover, .dropdown.is-primary:active .menu .options > li.selected.hover, .dropdown.is-primary.active .menu .options > li:active:hover, .dropdown.is-primary.active .menu .options > li:active.hover, .dropdown.is-primary.active .menu .options > li.selected:hover, .dropdown.is-primary.active .menu .options > li.selected.hover {
  background-color: rgba(41, 126, 171, 0.4);
}
.dropdown.is-secondary {
  background-color: inherit;
  color: inherit;
}
.dropdown.is-secondary:active .selected-options .arrow, .dropdown.is-secondary.active .selected-options .arrow {
  color: white;
}
.dropdown.is-secondary:active .selected-options .display:after, .dropdown.is-secondary.active .selected-options .display:after {
  height: 2px;
  background-color: white;
}
.dropdown.is-secondary:active .menu .options > li:hover, .dropdown.is-secondary:active .menu .options > li.hover, .dropdown.is-secondary.active .menu .options > li:hover, .dropdown.is-secondary.active .menu .options > li.hover {
  background-color: rgba(60, 60, 96, 0.15);
}
.dropdown.is-secondary:active .menu .options > li:active, .dropdown.is-secondary:active .menu .options > li.selected, .dropdown.is-secondary.active .menu .options > li:active, .dropdown.is-secondary.active .menu .options > li.selected {
  background-color: rgba(255, 255, 255, 0.25);
}
.dropdown.is-secondary:active .menu .options > li:active:hover, .dropdown.is-secondary:active .menu .options > li:active.hover, .dropdown.is-secondary:active .menu .options > li.selected:hover, .dropdown.is-secondary:active .menu .options > li.selected.hover, .dropdown.is-secondary.active .menu .options > li:active:hover, .dropdown.is-secondary.active .menu .options > li:active.hover, .dropdown.is-secondary.active .menu .options > li.selected:hover, .dropdown.is-secondary.active .menu .options > li.selected.hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.dropdown.is-dark {
  background-color: inherit;
  color: inherit;
}
.dropdown.is-dark:active .selected-options .arrow, .dropdown.is-dark.active .selected-options .arrow {
  color: #2D323F;
}
.dropdown.is-dark:active .selected-options .display:after, .dropdown.is-dark.active .selected-options .display:after {
  height: 2px;
  background-color: #2D323F;
}
.dropdown.is-dark:active .menu .options > li:hover, .dropdown.is-dark:active .menu .options > li.hover, .dropdown.is-dark.active .menu .options > li:hover, .dropdown.is-dark.active .menu .options > li.hover {
  background-color: rgba(60, 60, 96, 0.15);
}
.dropdown.is-dark:active .menu .options > li:active, .dropdown.is-dark:active .menu .options > li.selected, .dropdown.is-dark.active .menu .options > li:active, .dropdown.is-dark.active .menu .options > li.selected {
  background-color: rgba(45, 50, 63, 0.25);
}
.dropdown.is-dark:active .menu .options > li:active:hover, .dropdown.is-dark:active .menu .options > li:active.hover, .dropdown.is-dark:active .menu .options > li.selected:hover, .dropdown.is-dark:active .menu .options > li.selected.hover, .dropdown.is-dark.active .menu .options > li:active:hover, .dropdown.is-dark.active .menu .options > li:active.hover, .dropdown.is-dark.active .menu .options > li.selected:hover, .dropdown.is-dark.active .menu .options > li.selected.hover {
  background-color: rgba(45, 50, 63, 0.4);
}
.dropdown.is-darker {
  background-color: inherit;
  color: inherit;
}
.dropdown.is-darker:active .selected-options .arrow, .dropdown.is-darker.active .selected-options .arrow {
  color: #222636;
}
.dropdown.is-darker:active .selected-options .display:after, .dropdown.is-darker.active .selected-options .display:after {
  height: 2px;
  background-color: #222636;
}
.dropdown.is-darker:active .menu .options > li:hover, .dropdown.is-darker:active .menu .options > li.hover, .dropdown.is-darker.active .menu .options > li:hover, .dropdown.is-darker.active .menu .options > li.hover {
  background-color: rgba(60, 60, 96, 0.15);
}
.dropdown.is-darker:active .menu .options > li:active, .dropdown.is-darker:active .menu .options > li.selected, .dropdown.is-darker.active .menu .options > li:active, .dropdown.is-darker.active .menu .options > li.selected {
  background-color: rgba(34, 38, 54, 0.25);
}
.dropdown.is-darker:active .menu .options > li:active:hover, .dropdown.is-darker:active .menu .options > li:active.hover, .dropdown.is-darker:active .menu .options > li.selected:hover, .dropdown.is-darker:active .menu .options > li.selected.hover, .dropdown.is-darker.active .menu .options > li:active:hover, .dropdown.is-darker.active .menu .options > li:active.hover, .dropdown.is-darker.active .menu .options > li.selected:hover, .dropdown.is-darker.active .menu .options > li.selected.hover {
  background-color: rgba(34, 38, 54, 0.4);
}
.dropdown:hover .selected-options .display:after, .dropdown:focus .selected-options .display:after {
  height: 2px;
}
.dropdown:active .selected-options .arrow, .dropdown.active .selected-options .arrow {
  transform: translateY(-50%) rotate(180deg);
}
.dropdown:active .menu, .dropdown.active .menu {
  visibility: visible;
  transform: scaleY(1);
  opacity: 1;
}
.dropdown .selected-options {
  position: relative;
  border-radius: 0.25rem 0.25rem 0 0;
}
.dropdown .selected-options .arrow {
  position: absolute;
  left: auto;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s;
}
.dropdown .selected-options .display {
  padding: 0.75rem 1.5rem 0.75rem 1rem;
  text-align: left;
}
.dropdown .selected-options .display:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  border-radius: 0.25rem;
  background-color: currentColor;
}
.dropdown.top .menu {
  transform-origin: bottom center;
  top: auto;
  bottom: 100%;
}
.dropdown .menu {
  visibility: hidden;
  position: absolute;
  top: 100%;
  bottom: auto;
  width: 100%;
  min-width: 112px;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  overflow: auto;
  z-index: 8;
  transition: 0.2s;
  border-radius: 5px;
  background-color: white;
  color: #3C3C60;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 15, 0.2), 0 5px 8px 0 rgba(0, 0, 15, 0.14), 0 1px 14px 0 rgba(0, 0, 15, 0.12);
}
.dropdown .menu .options {
  margin: 0;
  padding: 0.5rem 0;
  list-style-type: none;
}
.dropdown .menu .options > li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 1rem;
  overflow: hidden;
  transition: 0.2s;
}
.elevation-0 {
  box-shadow: 0 0 0 0 rgba(0, 0, 15, 0.2), 0 0 0 0 rgba(0, 0, 15, 0.14), 0 0 0 0 rgba(0, 0, 15, 0.12);
}

.elevation-1 {
  box-shadow: 0 2px 1px -1px rgba(0, 0, 15, 0.2), 0 1px 1px 0 rgba(0, 0, 15, 0.14), 0 1px 3px 0 rgba(0, 0, 15, 0.12);
}

.elevation-2 {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 15, 0.2), 0 2px 2px 0 rgba(0, 0, 15, 0.14), 0 1px 5px 0 rgba(0, 0, 15, 0.12);
}

.elevation-3 {
  box-shadow: 0 3px 3px -2px rgba(0, 0, 15, 0.2), 0 3px 4px 0 rgba(0, 0, 15, 0.14), 0 1px 8px 0 rgba(0, 0, 15, 0.12);
}

.elevation-4 {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 15, 0.2), 0 4px 5px 0 rgba(0, 0, 15, 0.14), 0 1px 10px 0 rgba(0, 0, 15, 0.12);
}

.elevation-5 {
  box-shadow: 0 3px 5px -1px rgba(0, 0, 15, 0.2), 0 5px 8px 0 rgba(0, 0, 15, 0.14), 0 1px 14px 0 rgba(0, 0, 15, 0.12);
}

.elevation-6 {
  box-shadow: 0 3px 5px -1px rgba(0, 0, 15, 0.2), 0 6px 10px 0 rgba(0, 0, 15, 0.14), 0 1px 18px 0 rgba(0, 0, 15, 0.12);
}

.elevation-7 {
  box-shadow: 0 4px 5px -2px rgba(0, 0, 15, 0.2), 0 7px 10px 1px rgba(0, 0, 15, 0.14), 0 2px 16px 1px rgba(0, 0, 15, 0.12);
}

.elevation-8 {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 15, 0.2), 0 8px 10px 1px rgba(0, 0, 15, 0.14), 0 3px 14px 2px rgba(0, 0, 15, 0.12);
}

.elevation-9 {
  box-shadow: 0 5px 6px -3px rgba(0, 0, 15, 0.2), 0 9px 12px 1px rgba(0, 0, 15, 0.14), 0 3px 16px 2px rgba(0, 0, 15, 0.12);
}

.elevation-10 {
  box-shadow: 0 6px 6px -3px rgba(0, 0, 15, 0.2), 0 10px 14px 1px rgba(0, 0, 15, 0.14), 0 4px 18px 3px rgba(0, 0, 15, 0.12);
}

.elevation-11 {
  box-shadow: 0 6px 7px -4px rgba(0, 0, 15, 0.2), 0 11px 15px 1px rgba(0, 0, 15, 0.14), 0 4px 20px 3px rgba(0, 0, 15, 0.12);
}

.elevation-12 {
  box-shadow: 0 7px 8px -4px rgba(0, 0, 15, 0.2), 0 12px 17px 2px rgba(0, 0, 15, 0.14), 0 5px 22px 4px rgba(0, 0, 15, 0.12);
}

.elevation-13 {
  box-shadow: 0 7px 8px -4px rgba(0, 0, 15, 0.2), 0 13px 19px 2px rgba(0, 0, 15, 0.14), 0 5px 24px 4px rgba(0, 0, 15, 0.12);
}

.elevation-14 {
  box-shadow: 0 7px 9px -4px rgba(0, 0, 15, 0.2), 0 14px 21px 2px rgba(0, 0, 15, 0.14), 0 5px 26px 4px rgba(0, 0, 15, 0.12);
}

.elevation-15 {
  box-shadow: 0 8px 9px -5px rgba(0, 0, 15, 0.2), 0 15px 22px 2px rgba(0, 0, 15, 0.14), 0 6px 28px 5px rgba(0, 0, 15, 0.12);
}

.elevation-16 {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 15, 0.2), 0 16px 24px 2px rgba(0, 0, 15, 0.14), 0 6px 30px 5px rgba(0, 0, 15, 0.12);
}

.elevation-17 {
  box-shadow: 0 8px 11px -5px rgba(0, 0, 15, 0.2), 0 17px 26px 2px rgba(0, 0, 15, 0.14), 0 6px 32px 5px rgba(0, 0, 15, 0.12);
}

.elevation-18 {
  box-shadow: 0 9px 11px -5px rgba(0, 0, 15, 0.2), 0 18px 28px 2px rgba(0, 0, 15, 0.14), 0 7px 34px 6px rgba(0, 0, 15, 0.12);
}

.elevation-19 {
  box-shadow: 0 9px 12px -6px rgba(0, 0, 15, 0.2), 0 19px 29px 2px rgba(0, 0, 15, 0.14), 0 7px 36px 6px rgba(0, 0, 15, 0.12);
}

.elevation-20 {
  box-shadow: 0 10px 13px -6px rgba(0, 0, 15, 0.2), 0 20px 31px 3px rgba(0, 0, 15, 0.14), 0 8px 38px 7px rgba(0, 0, 15, 0.12);
}

.elevation-21 {
  box-shadow: 0 10px 13px -6px rgba(0, 0, 15, 0.2), 0 21px 33px 3px rgba(0, 0, 15, 0.14), 0 8px 40px 7px rgba(0, 0, 15, 0.12);
}

.elevation-22 {
  box-shadow: 0 10px 14px -6px rgba(0, 0, 15, 0.2), 0 22px 35px 3px rgba(0, 0, 15, 0.14), 0 8px 42px 7px rgba(0, 0, 15, 0.12);
}

.elevation-23 {
  box-shadow: 0 11px 14px -7px rgba(0, 0, 15, 0.2), 0 23px 36px 3px rgba(0, 0, 15, 0.14), 0 9px 44px 8px rgba(0, 0, 15, 0.12);
}

.elevation-24 {
  box-shadow: 0 11px 15px -7px rgba(0, 0, 15, 0.2), 0 24px 38px 3px rgba(0, 0, 15, 0.14), 0 9px 46px 8px rgba(0, 0, 15, 0.12);
}
.flex {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.flex.center {
  margin: 0 auto;
}
.flex.row {
  flex-direction: row;
}
.flex.col {
  flex-direction: column;
}
.flex.xs-wrap {
  flex-wrap: wrap;
}
.flex.xs-nowrap {
  flex-wrap: nowrap;
}
.flex.row.xs-reverse {
  flex-direction: row-reverse;
}
.flex.row.xs-x-begin {
  justify-content: flex-start;
}
.flex.row.xs-x-center {
  justify-content: center;
}
.flex.row.xs-x-end {
  justify-content: end;
}
.flex.row.xs-y-begin {
  align-items: flex-start;
}
.flex.row.xs-y-center {
  align-items: center;
}
.flex.row.xs-y-end {
  align-items: flex-end;
}
.flex.row > *.xs-x-self-begin {
  margin-right: auto;
}
.flex.row > *.xs-x-self-center {
  margin-left: auto;
  margin-right: auto;
}
.flex.row > *.xs-x-self-end {
  margin-left: auto;
}
.flex.row > *.xs-y-self-begin {
  align-self: flex-start;
}
.flex.row > *.xs-y-self-center {
  align-self: center;
}
.flex.row > *.xs-y-self-end {
  align-self: flex-end;
}
.flex.row > *.xs-1 {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}
.flex.row > *.xs-2 {
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}
.flex.row > *.xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}
.flex.row > *.xs-4 {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}
.flex.row > *.xs-5 {
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}
.flex.row > *.xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}
.flex.row > *.xs-7 {
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}
.flex.row > *.xs-8 {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}
.flex.row > *.xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}
.flex.row > *.xs-10 {
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}
.flex.row > *.xs-11 {
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}
.flex.row > *.xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}
.flex.col.xs-reverse {
  flex-direction: column-reverse;
}
.flex.col.xs-y-begin {
  justify-content: flex-start;
}
.flex.col.xs-y-center {
  justify-content: center;
}
.flex.col.xs-y-end {
  justify-content: end;
}
.flex.col.xs-x-begin {
  align-items: flex-start;
}
.flex.col.xs-x-center {
  align-items: center;
}
.flex.col.xs-x-end {
  align-items: flex-end;
}
.flex.col > *.xs-y-self-begin {
  margin-bottom: auto;
}
.flex.col > *.xs-y-self-center {
  margin-top: auto;
  margin-bottom: auto;
}
.flex.col > *.xs-y-self-end {
  margin-top: auto;
}
.flex.col > *.xs-x-self-begin {
  align-self: flex-start;
}
.flex.col > *.xs-x-self-center {
  align-self: center;
}
.flex.col > *.xs-x-self-end {
  align-self: flex-end;
}
.flex.row > *.xs-auto, .flex.col > *.xs-auto {
  flex: 0 0 auto;
}
.flex.row > *.xs-grow, .flex.col > *.xs-grow {
  flex-grow: 1;
}
.flex.row > *.xs-shrink, .flex.col > *.xs-shrink {
  flex-shrink: 1;
}
.flex.row > *.xs-flex-1, .flex.col > *.xs-flex-1 {
  flex: 1;
}
.flex.row > *.xs-full, .flex.col > *.xs-full {
  flex-basis: 100%;
}
@media all and (min-width: 576px) {
  .flex.sm-wrap {
    flex-wrap: wrap;
  }
  .flex.sm-nowrap {
    flex-wrap: nowrap;
  }
  .flex.row.sm-reverse {
    flex-direction: row-reverse;
  }
  .flex.row.sm-x-begin {
    justify-content: flex-start;
  }
  .flex.row.sm-x-center {
    justify-content: center;
  }
  .flex.row.sm-x-end {
    justify-content: end;
  }
  .flex.row.sm-y-begin {
    align-items: flex-start;
  }
  .flex.row.sm-y-center {
    align-items: center;
  }
  .flex.row.sm-y-end {
    align-items: flex-end;
  }
  .flex.row > *.sm-x-self-begin {
    margin-right: auto;
  }
  .flex.row > *.sm-x-self-center {
    margin-left: auto;
    margin-right: auto;
  }
  .flex.row > *.sm-x-self-end {
    margin-left: auto;
  }
  .flex.row > *.sm-y-self-begin {
    align-self: flex-start;
  }
  .flex.row > *.sm-y-self-center {
    align-self: center;
  }
  .flex.row > *.sm-y-self-end {
    align-self: flex-end;
  }
  .flex.row > *.sm-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .flex.row > *.sm-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .flex.row > *.sm-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .flex.row > *.sm-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .flex.row > *.sm-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .flex.row > *.sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .flex.row > *.sm-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .flex.row > *.sm-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .flex.row > *.sm-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .flex.row > *.sm-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .flex.row > *.sm-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .flex.row > *.sm-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .flex.col.sm-reverse {
    flex-direction: column-reverse;
  }
  .flex.col.sm-y-begin {
    justify-content: flex-start;
  }
  .flex.col.sm-y-center {
    justify-content: center;
  }
  .flex.col.sm-y-end {
    justify-content: end;
  }
  .flex.col.sm-x-begin {
    align-items: flex-start;
  }
  .flex.col.sm-x-center {
    align-items: center;
  }
  .flex.col.sm-x-end {
    align-items: flex-end;
  }
  .flex.col > *.sm-y-self-begin {
    margin-bottom: auto;
  }
  .flex.col > *.sm-y-self-center {
    margin-top: auto;
    margin-bottom: auto;
  }
  .flex.col > *.sm-y-self-end {
    margin-top: auto;
  }
  .flex.col > *.sm-x-self-begin {
    align-self: flex-start;
  }
  .flex.col > *.sm-x-self-center {
    align-self: center;
  }
  .flex.col > *.sm-x-self-end {
    align-self: flex-end;
  }
  .flex.row > *.sm-auto, .flex.col > *.sm-auto {
    flex: 0 0 auto;
  }
  .flex.row > *.sm-grow, .flex.col > *.sm-grow {
    flex-grow: 1;
  }
  .flex.row > *.sm-shrink, .flex.col > *.sm-shrink {
    flex-shrink: 1;
  }
  .flex.row > *.sm-flex-1, .flex.col > *.sm-flex-1 {
    flex: 1;
  }
  .flex.row > *.sm-full, .flex.col > *.sm-full {
    flex-basis: 100%;
  }
}
@media all and (min-width: 768px) {
  .flex.md-wrap {
    flex-wrap: wrap;
  }
  .flex.md-nowrap {
    flex-wrap: nowrap;
  }
  .flex.row.md-reverse {
    flex-direction: row-reverse;
  }
  .flex.row.md-x-begin {
    justify-content: flex-start;
  }
  .flex.row.md-x-center {
    justify-content: center;
  }
  .flex.row.md-x-end {
    justify-content: end;
  }
  .flex.row.md-y-begin {
    align-items: flex-start;
  }
  .flex.row.md-y-center {
    align-items: center;
  }
  .flex.row.md-y-end {
    align-items: flex-end;
  }
  .flex.row > *.md-x-self-begin {
    margin-right: auto;
  }
  .flex.row > *.md-x-self-center {
    margin-left: auto;
    margin-right: auto;
  }
  .flex.row > *.md-x-self-end {
    margin-left: auto;
  }
  .flex.row > *.md-y-self-begin {
    align-self: flex-start;
  }
  .flex.row > *.md-y-self-center {
    align-self: center;
  }
  .flex.row > *.md-y-self-end {
    align-self: flex-end;
  }
  .flex.row > *.md-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .flex.row > *.md-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .flex.row > *.md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .flex.row > *.md-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .flex.row > *.md-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .flex.row > *.md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .flex.row > *.md-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .flex.row > *.md-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .flex.row > *.md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .flex.row > *.md-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .flex.row > *.md-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .flex.row > *.md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .flex.col.md-reverse {
    flex-direction: column-reverse;
  }
  .flex.col.md-y-begin {
    justify-content: flex-start;
  }
  .flex.col.md-y-center {
    justify-content: center;
  }
  .flex.col.md-y-end {
    justify-content: end;
  }
  .flex.col.md-x-begin {
    align-items: flex-start;
  }
  .flex.col.md-x-center {
    align-items: center;
  }
  .flex.col.md-x-end {
    align-items: flex-end;
  }
  .flex.col > *.md-y-self-begin {
    margin-bottom: auto;
  }
  .flex.col > *.md-y-self-center {
    margin-top: auto;
    margin-bottom: auto;
  }
  .flex.col > *.md-y-self-end {
    margin-top: auto;
  }
  .flex.col > *.md-x-self-begin {
    align-self: flex-start;
  }
  .flex.col > *.md-x-self-center {
    align-self: center;
  }
  .flex.col > *.md-x-self-end {
    align-self: flex-end;
  }
  .flex.row > *.md-auto, .flex.col > *.md-auto {
    flex: 0 0 auto;
  }
  .flex.row > *.md-grow, .flex.col > *.md-grow {
    flex-grow: 1;
  }
  .flex.row > *.md-shrink, .flex.col > *.md-shrink {
    flex-shrink: 1;
  }
  .flex.row > *.md-flex-1, .flex.col > *.md-flex-1 {
    flex: 1;
  }
  .flex.row > *.md-full, .flex.col > *.md-full {
    flex-basis: 100%;
  }
}
@media all and (min-width: 992px) {
  .flex.lg-wrap {
    flex-wrap: wrap;
  }
  .flex.lg-nowrap {
    flex-wrap: nowrap;
  }
  .flex.row.lg-reverse {
    flex-direction: row-reverse;
  }
  .flex.row.lg-x-begin {
    justify-content: flex-start;
  }
  .flex.row.lg-x-center {
    justify-content: center;
  }
  .flex.row.lg-x-end {
    justify-content: end;
  }
  .flex.row.lg-y-begin {
    align-items: flex-start;
  }
  .flex.row.lg-y-center {
    align-items: center;
  }
  .flex.row.lg-y-end {
    align-items: flex-end;
  }
  .flex.row > *.lg-x-self-begin {
    margin-right: auto;
  }
  .flex.row > *.lg-x-self-center {
    margin-left: auto;
    margin-right: auto;
  }
  .flex.row > *.lg-x-self-end {
    margin-left: auto;
  }
  .flex.row > *.lg-y-self-begin {
    align-self: flex-start;
  }
  .flex.row > *.lg-y-self-center {
    align-self: center;
  }
  .flex.row > *.lg-y-self-end {
    align-self: flex-end;
  }
  .flex.row > *.lg-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .flex.row > *.lg-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .flex.row > *.lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .flex.row > *.lg-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .flex.row > *.lg-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .flex.row > *.lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .flex.row > *.lg-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .flex.row > *.lg-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .flex.row > *.lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .flex.row > *.lg-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .flex.row > *.lg-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .flex.row > *.lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .flex.col.lg-reverse {
    flex-direction: column-reverse;
  }
  .flex.col.lg-y-begin {
    justify-content: flex-start;
  }
  .flex.col.lg-y-center {
    justify-content: center;
  }
  .flex.col.lg-y-end {
    justify-content: end;
  }
  .flex.col.lg-x-begin {
    align-items: flex-start;
  }
  .flex.col.lg-x-center {
    align-items: center;
  }
  .flex.col.lg-x-end {
    align-items: flex-end;
  }
  .flex.col > *.lg-y-self-begin {
    margin-bottom: auto;
  }
  .flex.col > *.lg-y-self-center {
    margin-top: auto;
    margin-bottom: auto;
  }
  .flex.col > *.lg-y-self-end {
    margin-top: auto;
  }
  .flex.col > *.lg-x-self-begin {
    align-self: flex-start;
  }
  .flex.col > *.lg-x-self-center {
    align-self: center;
  }
  .flex.col > *.lg-x-self-end {
    align-self: flex-end;
  }
  .flex.row > *.lg-auto, .flex.col > *.lg-auto {
    flex: 0 0 auto;
  }
  .flex.row > *.lg-grow, .flex.col > *.lg-grow {
    flex-grow: 1;
  }
  .flex.row > *.lg-shrink, .flex.col > *.lg-shrink {
    flex-shrink: 1;
  }
  .flex.row > *.lg-flex-1, .flex.col > *.lg-flex-1 {
    flex: 1;
  }
  .flex.row > *.lg-full, .flex.col > *.lg-full {
    flex-basis: 100%;
  }
}
@media all and (min-width: 1200px) {
  .flex.xl-wrap {
    flex-wrap: wrap;
  }
  .flex.xl-nowrap {
    flex-wrap: nowrap;
  }
  .flex.row.xl-reverse {
    flex-direction: row-reverse;
  }
  .flex.row.xl-x-begin {
    justify-content: flex-start;
  }
  .flex.row.xl-x-center {
    justify-content: center;
  }
  .flex.row.xl-x-end {
    justify-content: end;
  }
  .flex.row.xl-y-begin {
    align-items: flex-start;
  }
  .flex.row.xl-y-center {
    align-items: center;
  }
  .flex.row.xl-y-end {
    align-items: flex-end;
  }
  .flex.row > *.xl-x-self-begin {
    margin-right: auto;
  }
  .flex.row > *.xl-x-self-center {
    margin-left: auto;
    margin-right: auto;
  }
  .flex.row > *.xl-x-self-end {
    margin-left: auto;
  }
  .flex.row > *.xl-y-self-begin {
    align-self: flex-start;
  }
  .flex.row > *.xl-y-self-center {
    align-self: center;
  }
  .flex.row > *.xl-y-self-end {
    align-self: flex-end;
  }
  .flex.row > *.xl-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .flex.row > *.xl-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .flex.row > *.xl-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .flex.row > *.xl-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .flex.row > *.xl-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .flex.row > *.xl-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .flex.row > *.xl-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .flex.row > *.xl-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .flex.row > *.xl-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .flex.row > *.xl-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .flex.row > *.xl-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .flex.row > *.xl-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .flex.col.xl-reverse {
    flex-direction: column-reverse;
  }
  .flex.col.xl-y-begin {
    justify-content: flex-start;
  }
  .flex.col.xl-y-center {
    justify-content: center;
  }
  .flex.col.xl-y-end {
    justify-content: end;
  }
  .flex.col.xl-x-begin {
    align-items: flex-start;
  }
  .flex.col.xl-x-center {
    align-items: center;
  }
  .flex.col.xl-x-end {
    align-items: flex-end;
  }
  .flex.col > *.xl-y-self-begin {
    margin-bottom: auto;
  }
  .flex.col > *.xl-y-self-center {
    margin-top: auto;
    margin-bottom: auto;
  }
  .flex.col > *.xl-y-self-end {
    margin-top: auto;
  }
  .flex.col > *.xl-x-self-begin {
    align-self: flex-start;
  }
  .flex.col > *.xl-x-self-center {
    align-self: center;
  }
  .flex.col > *.xl-x-self-end {
    align-self: flex-end;
  }
  .flex.row > *.xl-auto, .flex.col > *.xl-auto {
    flex: 0 0 auto;
  }
  .flex.row > *.xl-grow, .flex.col > *.xl-grow {
    flex-grow: 1;
  }
  .flex.row > *.xl-shrink, .flex.col > *.xl-shrink {
    flex-shrink: 1;
  }
  .flex.row > *.xl-flex-1, .flex.col > *.xl-flex-1 {
    flex: 1;
  }
  .flex.row > *.xl-full, .flex.col > *.xl-full {
    flex-basis: 100%;
  }
}
.float-container {
  overflow: hidden;
}
.float-container .left {
  float: left;
  text-align: left;
}
.float-container .right {
  float: right;
  text-align: right;
}

.container, .card {
  background-color: transparent;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}

.card {
  border-radius: 5px;
}
.card.hide-overflow {
  overflow: hidden;
}
.card.is-in-grid {
  display: flex;
  flex-direction: column;
}
.card.is-in-grid > .image {
  flex: 0 0 auto;
}
.card.is-in-grid > .content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.card.is-in-grid > .content > * {
  max-width: 100%;
}
.card.is-in-grid > .content > .options {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.card > .image {
  height: 200px;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
}
.card .content {
  max-width: 100%;
}
.card .content.padding-1 {
  padding: calc(0.5rem * 1);
}
.card .content.padding-x-1 {
  padding-left: calc(0.5rem * 1);
  padding-right: calc(0.5rem * 1);
}
.card .content.padding-y-1 {
  padding-top: calc(0.5rem * 1);
  padding-bottom: calc(0.5rem * 1);
}
.card .content.padding-2 {
  padding: calc(0.5rem * 2);
}
.card .content.padding-x-2 {
  padding-left: calc(0.5rem * 2);
  padding-right: calc(0.5rem * 2);
}
.card .content.padding-y-2 {
  padding-top: calc(0.5rem * 2);
  padding-bottom: calc(0.5rem * 2);
}
.card .content.padding-3 {
  padding: calc(0.5rem * 3);
}
.card .content.padding-x-3 {
  padding-left: calc(0.5rem * 3);
  padding-right: calc(0.5rem * 3);
}
.card .content.padding-y-3 {
  padding-top: calc(0.5rem * 3);
  padding-bottom: calc(0.5rem * 3);
}
.card .content.padding-4 {
  padding: calc(0.5rem * 4);
}
.card .content.padding-x-4 {
  padding-left: calc(0.5rem * 4);
  padding-right: calc(0.5rem * 4);
}
.card .content.padding-y-4 {
  padding-top: calc(0.5rem * 4);
  padding-bottom: calc(0.5rem * 4);
}
.card .content.padding-5 {
  padding: calc(0.5rem * 5);
}
.card .content.padding-x-5 {
  padding-left: calc(0.5rem * 5);
  padding-right: calc(0.5rem * 5);
}
.card .content.padding-y-5 {
  padding-top: calc(0.5rem * 5);
  padding-bottom: calc(0.5rem * 5);
}
.card .content.padding-6 {
  padding: calc(0.5rem * 6);
}
.card .content.padding-x-6 {
  padding-left: calc(0.5rem * 6);
  padding-right: calc(0.5rem * 6);
}
.card .content.padding-y-6 {
  padding-top: calc(0.5rem * 6);
  padding-bottom: calc(0.5rem * 6);
}
.card .content.padding-7 {
  padding: calc(0.5rem * 7);
}
.card .content.padding-x-7 {
  padding-left: calc(0.5rem * 7);
  padding-right: calc(0.5rem * 7);
}
.card .content.padding-y-7 {
  padding-top: calc(0.5rem * 7);
  padding-bottom: calc(0.5rem * 7);
}
.card .content.padding-8 {
  padding: calc(0.5rem * 8);
}
.card .content.padding-x-8 {
  padding-left: calc(0.5rem * 8);
  padding-right: calc(0.5rem * 8);
}
.card .content.padding-y-8 {
  padding-top: calc(0.5rem * 8);
  padding-bottom: calc(0.5rem * 8);
}
.card .content.padding-9 {
  padding: calc(0.5rem * 9);
}
.card .content.padding-x-9 {
  padding-left: calc(0.5rem * 9);
  padding-right: calc(0.5rem * 9);
}
.card .content.padding-y-9 {
  padding-top: calc(0.5rem * 9);
  padding-bottom: calc(0.5rem * 9);
}
.card .content.padding-10 {
  padding: calc(0.5rem * 10);
}
.card .content.padding-x-10 {
  padding-left: calc(0.5rem * 10);
  padding-right: calc(0.5rem * 10);
}
.card .content.padding-y-10 {
  padding-top: calc(0.5rem * 10);
  padding-bottom: calc(0.5rem * 10);
}
.card .content > .title {
  padding-bottom: 1.5rem;
}
@media all and (max-width: 575.98px) {
  .card .content > .title {
    padding-bottom: 0.75rem;
  }
}
.card .content > .body ~ .options {
  padding-top: 1rem;
}
.card .content > .options {
  text-align: left;
  margin-bottom: -0.5rem;
}
hr {
  margin: 1rem auto;
  border: none;
  background-color: rgb(0, 0, 15);
  opacity: 0.1;
  height: 3px;
}
hr.is-light {
  background-color: white;
}
hr.is-width-10 {
  width: calc(10% * 1);
}
hr.is-shade-1 {
  opacity: calc(0.1 * 1);
}
hr.is-width-20 {
  width: calc(10% * 2);
}
hr.is-shade-2 {
  opacity: calc(0.1 * 2);
}
hr.is-width-30 {
  width: calc(10% * 3);
}
hr.is-shade-3 {
  opacity: calc(0.1 * 3);
}
hr.is-width-40 {
  width: calc(10% * 4);
}
hr.is-shade-4 {
  opacity: calc(0.1 * 4);
}
hr.is-width-50 {
  width: calc(10% * 5);
}
hr.is-shade-5 {
  opacity: calc(0.1 * 5);
}
hr.is-width-60 {
  width: calc(10% * 6);
}
hr.is-shade-6 {
  opacity: calc(0.1 * 6);
}
hr.is-width-70 {
  width: calc(10% * 7);
}
hr.is-shade-7 {
  opacity: calc(0.1 * 7);
}
hr.is-width-80 {
  width: calc(10% * 8);
}
hr.is-shade-8 {
  opacity: calc(0.1 * 8);
}
hr.is-width-90 {
  width: calc(10% * 9);
}
hr.is-shade-9 {
  opacity: calc(0.1 * 9);
}
hr.is-width-100 {
  width: calc(10% * 10);
}
hr.is-shade-10 {
  opacity: calc(0.1 * 10);
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
a.is-colored-link:hover {
  color: #654AA5;
}
main {
  position: relative;
  right: 0;
  width: 100%;
  height: 100%;
  font-family: "Nunito Sans";
  transition: right 0.5s;
  overflow: hidden;
}
main[shifted] {
  right: 13.4375rem;
}
main .scroll {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  main .scroll {
    overflow: hidden !important;
  }
}
.progress-bar {
  height: 5px;
  width: 100%;
  margin: 2rem 0.5rem;
  position: relative;
}
.progress-bar .track {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(to right, #297eab, #297eab);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(to right, var(--progress-bar-color, #297eab), var(--progress-bar-color, #297eab));
}
.progress-bar .fill {
  background: #297eab;
  background: var(--progress-bar-color, #297eab);
}
.progress-bar .buffer {
  background: linear-gradient(to right, rgba(0, 0, 15, 0.4), rgba(0, 0, 15, 0.4)), linear-gradient(to right, #297eab, #297eab);
  background: linear-gradient(to right, rgba(0, 0, 15, 0.4), rgba(0, 0, 15, 0.4)), linear-gradient(to right, var(--progress-bar-color, #297eab), var(--progress-bar-color, #297eab));
}
.progress-bar .track, .progress-bar .fill, .progress-bar .buffer {
  position: absolute;
  height: 100%;
  border-radius: 0.5rem;
  transition: 1.5s ease-in-out;
  transition-property: width;
}
.progress-bar .track {
  width: 100%;
}
.progress-bar .fill, .progress-bar .buffer {
  width: 0;
}
.progress-bar .marker {
  position: absolute;
  bottom: 5px;
  left: 0;
  opacity: 0;
  transform: rotate(60deg) scaleY(0) translateX(10px) translateX(-50%);
  transform-origin: center bottom;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, left 1.5s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.progress-bar .marker::after {
  content: "";
  width: 0;
  height: 0;
  margin-top: 0px;
  border-style: solid;
  border-bottom: none;
  border-color: #3C3C60 transparent transparent transparent;
  border-width: 7px 4px;
}
@media all and (max-width: 575.98px) {
  .progress-bar .marker::after {
    border-width: 5px 3px;
  }
}

.progress-bar:hover .marker, .progress-bar-hover-container:hover .marker {
  opacity: 1;
  transform: rotate(0deg) scaleY(1) translateX(-50%);
}
main .scroll {
  position: relative;
}
main .scroll::-webkit-scrollbar {
  width: 7px;
}
main .scroll::-webkit-scrollbar-track {
  background: white;
}
main .scroll::-webkit-scrollbar-thumb {
  width: 7px;
  background: #2D323F;
  border-radius: 2.5px;
}
.xs-padding-between-0 > * {
  padding: calc(0.2rem * 0);
}

.xs-x-padding-between-0 > * {
  padding-left: calc(0.2rem * 0);
  padding-right: calc(0.2rem * 0);
}
.xs-x-padding-between-0 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-0 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-0 > * {
  padding-top: calc(0.2rem * 0);
  padding-bottom: calc(0.2rem * 0);
}
.xs-y-padding-between-0 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-0 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-0 > * {
  margin: calc(0.2rem * 0);
}

.xs-x-margin-between-0 > * {
  margin-left: calc(0.2rem * 0);
  margin-right: calc(0.2rem * 0);
}
.xs-x-margin-between-0 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-0 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-0 > * {
  margin-top: calc(0.2rem * 0);
  margin-bottom: calc(0.2rem * 0);
}
.xs-y-margin-between-0 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-0 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-1 > * {
  padding: calc(0.2rem * 1);
}

.xs-x-padding-between-1 > * {
  padding-left: calc(0.2rem * 1);
  padding-right: calc(0.2rem * 1);
}
.xs-x-padding-between-1 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-1 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-1 > * {
  padding-top: calc(0.2rem * 1);
  padding-bottom: calc(0.2rem * 1);
}
.xs-y-padding-between-1 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-1 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-1 > * {
  margin: calc(0.2rem * 1);
}

.xs-x-margin-between-1 > * {
  margin-left: calc(0.2rem * 1);
  margin-right: calc(0.2rem * 1);
}
.xs-x-margin-between-1 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-1 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-1 > * {
  margin-top: calc(0.2rem * 1);
  margin-bottom: calc(0.2rem * 1);
}
.xs-y-margin-between-1 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-1 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-2 > * {
  padding: calc(0.2rem * 2);
}

.xs-x-padding-between-2 > * {
  padding-left: calc(0.2rem * 2);
  padding-right: calc(0.2rem * 2);
}
.xs-x-padding-between-2 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-2 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-2 > * {
  padding-top: calc(0.2rem * 2);
  padding-bottom: calc(0.2rem * 2);
}
.xs-y-padding-between-2 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-2 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-2 > * {
  margin: calc(0.2rem * 2);
}

.xs-x-margin-between-2 > * {
  margin-left: calc(0.2rem * 2);
  margin-right: calc(0.2rem * 2);
}
.xs-x-margin-between-2 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-2 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-2 > * {
  margin-top: calc(0.2rem * 2);
  margin-bottom: calc(0.2rem * 2);
}
.xs-y-margin-between-2 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-2 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-3 > * {
  padding: calc(0.2rem * 3);
}

.xs-x-padding-between-3 > * {
  padding-left: calc(0.2rem * 3);
  padding-right: calc(0.2rem * 3);
}
.xs-x-padding-between-3 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-3 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-3 > * {
  padding-top: calc(0.2rem * 3);
  padding-bottom: calc(0.2rem * 3);
}
.xs-y-padding-between-3 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-3 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-3 > * {
  margin: calc(0.2rem * 3);
}

.xs-x-margin-between-3 > * {
  margin-left: calc(0.2rem * 3);
  margin-right: calc(0.2rem * 3);
}
.xs-x-margin-between-3 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-3 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-3 > * {
  margin-top: calc(0.2rem * 3);
  margin-bottom: calc(0.2rem * 3);
}
.xs-y-margin-between-3 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-3 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-4 > * {
  padding: calc(0.2rem * 4);
}

.xs-x-padding-between-4 > * {
  padding-left: calc(0.2rem * 4);
  padding-right: calc(0.2rem * 4);
}
.xs-x-padding-between-4 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-4 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-4 > * {
  padding-top: calc(0.2rem * 4);
  padding-bottom: calc(0.2rem * 4);
}
.xs-y-padding-between-4 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-4 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-4 > * {
  margin: calc(0.2rem * 4);
}

.xs-x-margin-between-4 > * {
  margin-left: calc(0.2rem * 4);
  margin-right: calc(0.2rem * 4);
}
.xs-x-margin-between-4 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-4 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-4 > * {
  margin-top: calc(0.2rem * 4);
  margin-bottom: calc(0.2rem * 4);
}
.xs-y-margin-between-4 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-4 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-5 > * {
  padding: calc(0.2rem * 5);
}

.xs-x-padding-between-5 > * {
  padding-left: calc(0.2rem * 5);
  padding-right: calc(0.2rem * 5);
}
.xs-x-padding-between-5 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-5 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-5 > * {
  padding-top: calc(0.2rem * 5);
  padding-bottom: calc(0.2rem * 5);
}
.xs-y-padding-between-5 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-5 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-5 > * {
  margin: calc(0.2rem * 5);
}

.xs-x-margin-between-5 > * {
  margin-left: calc(0.2rem * 5);
  margin-right: calc(0.2rem * 5);
}
.xs-x-margin-between-5 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-5 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-5 > * {
  margin-top: calc(0.2rem * 5);
  margin-bottom: calc(0.2rem * 5);
}
.xs-y-margin-between-5 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-5 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-6 > * {
  padding: calc(0.2rem * 6);
}

.xs-x-padding-between-6 > * {
  padding-left: calc(0.2rem * 6);
  padding-right: calc(0.2rem * 6);
}
.xs-x-padding-between-6 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-6 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-6 > * {
  padding-top: calc(0.2rem * 6);
  padding-bottom: calc(0.2rem * 6);
}
.xs-y-padding-between-6 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-6 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-6 > * {
  margin: calc(0.2rem * 6);
}

.xs-x-margin-between-6 > * {
  margin-left: calc(0.2rem * 6);
  margin-right: calc(0.2rem * 6);
}
.xs-x-margin-between-6 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-6 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-6 > * {
  margin-top: calc(0.2rem * 6);
  margin-bottom: calc(0.2rem * 6);
}
.xs-y-margin-between-6 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-6 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-7 > * {
  padding: calc(0.2rem * 7);
}

.xs-x-padding-between-7 > * {
  padding-left: calc(0.2rem * 7);
  padding-right: calc(0.2rem * 7);
}
.xs-x-padding-between-7 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-7 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-7 > * {
  padding-top: calc(0.2rem * 7);
  padding-bottom: calc(0.2rem * 7);
}
.xs-y-padding-between-7 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-7 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-7 > * {
  margin: calc(0.2rem * 7);
}

.xs-x-margin-between-7 > * {
  margin-left: calc(0.2rem * 7);
  margin-right: calc(0.2rem * 7);
}
.xs-x-margin-between-7 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-7 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-7 > * {
  margin-top: calc(0.2rem * 7);
  margin-bottom: calc(0.2rem * 7);
}
.xs-y-margin-between-7 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-7 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-8 > * {
  padding: calc(0.2rem * 8);
}

.xs-x-padding-between-8 > * {
  padding-left: calc(0.2rem * 8);
  padding-right: calc(0.2rem * 8);
}
.xs-x-padding-between-8 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-8 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-8 > * {
  padding-top: calc(0.2rem * 8);
  padding-bottom: calc(0.2rem * 8);
}
.xs-y-padding-between-8 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-8 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-8 > * {
  margin: calc(0.2rem * 8);
}

.xs-x-margin-between-8 > * {
  margin-left: calc(0.2rem * 8);
  margin-right: calc(0.2rem * 8);
}
.xs-x-margin-between-8 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-8 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-8 > * {
  margin-top: calc(0.2rem * 8);
  margin-bottom: calc(0.2rem * 8);
}
.xs-y-margin-between-8 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-8 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-9 > * {
  padding: calc(0.2rem * 9);
}

.xs-x-padding-between-9 > * {
  padding-left: calc(0.2rem * 9);
  padding-right: calc(0.2rem * 9);
}
.xs-x-padding-between-9 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-9 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-9 > * {
  padding-top: calc(0.2rem * 9);
  padding-bottom: calc(0.2rem * 9);
}
.xs-y-padding-between-9 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-9 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-9 > * {
  margin: calc(0.2rem * 9);
}

.xs-x-margin-between-9 > * {
  margin-left: calc(0.2rem * 9);
  margin-right: calc(0.2rem * 9);
}
.xs-x-margin-between-9 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-9 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-9 > * {
  margin-top: calc(0.2rem * 9);
  margin-bottom: calc(0.2rem * 9);
}
.xs-y-margin-between-9 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-9 > *:last-child {
  margin-bottom: 0;
}

.xs-padding-between-10 > * {
  padding: calc(0.2rem * 10);
}

.xs-x-padding-between-10 > * {
  padding-left: calc(0.2rem * 10);
  padding-right: calc(0.2rem * 10);
}
.xs-x-padding-between-10 > *:first-child {
  padding-left: 0;
}
.xs-x-padding-between-10 > *:last-child {
  padding-right: 0;
}

.xs-y-padding-between-10 > * {
  padding-top: calc(0.2rem * 10);
  padding-bottom: calc(0.2rem * 10);
}
.xs-y-padding-between-10 > *:first-child {
  padding-top: 0;
}
.xs-y-padding-between-10 > *:last-child {
  padding-bottom: 0;
}

.xs-margin-between-10 > * {
  margin: calc(0.2rem * 10);
}

.xs-x-margin-between-10 > * {
  margin-left: calc(0.2rem * 10);
  margin-right: calc(0.2rem * 10);
}
.xs-x-margin-between-10 > *:first-child {
  margin-left: 0;
}
.xs-x-margin-between-10 > *:last-child {
  margin-right: 0;
}

.xs-y-margin-between-10 > * {
  margin-top: calc(0.2rem * 10);
  margin-bottom: calc(0.2rem * 10);
}
.xs-y-margin-between-10 > *:first-child {
  margin-top: 0;
}
.xs-y-margin-between-10 > *:last-child {
  margin-bottom: 0;
}

@media all and (min-width: 576px) {
  .sm-padding-between-0 > * {
    padding: calc(0.2rem * 0);
  }
  .sm-x-padding-between-0 > * {
    padding-left: calc(0.2rem * 0);
    padding-right: calc(0.2rem * 0);
  }
  .sm-x-padding-between-0 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-0 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-0 > * {
    padding-top: calc(0.2rem * 0);
    padding-bottom: calc(0.2rem * 0);
  }
  .sm-y-padding-between-0 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-0 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-0 > * {
    margin: calc(0.2rem * 0);
  }
  .sm-x-margin-between-0 > * {
    margin-left: calc(0.2rem * 0);
    margin-right: calc(0.2rem * 0);
  }
  .sm-x-margin-between-0 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-0 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-0 > * {
    margin-top: calc(0.2rem * 0);
    margin-bottom: calc(0.2rem * 0);
  }
  .sm-y-margin-between-0 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-0 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-1 > * {
    padding: calc(0.2rem * 1);
  }
  .sm-x-padding-between-1 > * {
    padding-left: calc(0.2rem * 1);
    padding-right: calc(0.2rem * 1);
  }
  .sm-x-padding-between-1 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-1 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-1 > * {
    padding-top: calc(0.2rem * 1);
    padding-bottom: calc(0.2rem * 1);
  }
  .sm-y-padding-between-1 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-1 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-1 > * {
    margin: calc(0.2rem * 1);
  }
  .sm-x-margin-between-1 > * {
    margin-left: calc(0.2rem * 1);
    margin-right: calc(0.2rem * 1);
  }
  .sm-x-margin-between-1 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-1 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-1 > * {
    margin-top: calc(0.2rem * 1);
    margin-bottom: calc(0.2rem * 1);
  }
  .sm-y-margin-between-1 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-1 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-2 > * {
    padding: calc(0.2rem * 2);
  }
  .sm-x-padding-between-2 > * {
    padding-left: calc(0.2rem * 2);
    padding-right: calc(0.2rem * 2);
  }
  .sm-x-padding-between-2 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-2 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-2 > * {
    padding-top: calc(0.2rem * 2);
    padding-bottom: calc(0.2rem * 2);
  }
  .sm-y-padding-between-2 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-2 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-2 > * {
    margin: calc(0.2rem * 2);
  }
  .sm-x-margin-between-2 > * {
    margin-left: calc(0.2rem * 2);
    margin-right: calc(0.2rem * 2);
  }
  .sm-x-margin-between-2 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-2 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-2 > * {
    margin-top: calc(0.2rem * 2);
    margin-bottom: calc(0.2rem * 2);
  }
  .sm-y-margin-between-2 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-2 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-3 > * {
    padding: calc(0.2rem * 3);
  }
  .sm-x-padding-between-3 > * {
    padding-left: calc(0.2rem * 3);
    padding-right: calc(0.2rem * 3);
  }
  .sm-x-padding-between-3 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-3 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-3 > * {
    padding-top: calc(0.2rem * 3);
    padding-bottom: calc(0.2rem * 3);
  }
  .sm-y-padding-between-3 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-3 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-3 > * {
    margin: calc(0.2rem * 3);
  }
  .sm-x-margin-between-3 > * {
    margin-left: calc(0.2rem * 3);
    margin-right: calc(0.2rem * 3);
  }
  .sm-x-margin-between-3 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-3 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-3 > * {
    margin-top: calc(0.2rem * 3);
    margin-bottom: calc(0.2rem * 3);
  }
  .sm-y-margin-between-3 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-3 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-4 > * {
    padding: calc(0.2rem * 4);
  }
  .sm-x-padding-between-4 > * {
    padding-left: calc(0.2rem * 4);
    padding-right: calc(0.2rem * 4);
  }
  .sm-x-padding-between-4 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-4 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-4 > * {
    padding-top: calc(0.2rem * 4);
    padding-bottom: calc(0.2rem * 4);
  }
  .sm-y-padding-between-4 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-4 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-4 > * {
    margin: calc(0.2rem * 4);
  }
  .sm-x-margin-between-4 > * {
    margin-left: calc(0.2rem * 4);
    margin-right: calc(0.2rem * 4);
  }
  .sm-x-margin-between-4 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-4 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-4 > * {
    margin-top: calc(0.2rem * 4);
    margin-bottom: calc(0.2rem * 4);
  }
  .sm-y-margin-between-4 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-4 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-5 > * {
    padding: calc(0.2rem * 5);
  }
  .sm-x-padding-between-5 > * {
    padding-left: calc(0.2rem * 5);
    padding-right: calc(0.2rem * 5);
  }
  .sm-x-padding-between-5 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-5 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-5 > * {
    padding-top: calc(0.2rem * 5);
    padding-bottom: calc(0.2rem * 5);
  }
  .sm-y-padding-between-5 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-5 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-5 > * {
    margin: calc(0.2rem * 5);
  }
  .sm-x-margin-between-5 > * {
    margin-left: calc(0.2rem * 5);
    margin-right: calc(0.2rem * 5);
  }
  .sm-x-margin-between-5 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-5 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-5 > * {
    margin-top: calc(0.2rem * 5);
    margin-bottom: calc(0.2rem * 5);
  }
  .sm-y-margin-between-5 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-5 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-6 > * {
    padding: calc(0.2rem * 6);
  }
  .sm-x-padding-between-6 > * {
    padding-left: calc(0.2rem * 6);
    padding-right: calc(0.2rem * 6);
  }
  .sm-x-padding-between-6 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-6 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-6 > * {
    padding-top: calc(0.2rem * 6);
    padding-bottom: calc(0.2rem * 6);
  }
  .sm-y-padding-between-6 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-6 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-6 > * {
    margin: calc(0.2rem * 6);
  }
  .sm-x-margin-between-6 > * {
    margin-left: calc(0.2rem * 6);
    margin-right: calc(0.2rem * 6);
  }
  .sm-x-margin-between-6 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-6 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-6 > * {
    margin-top: calc(0.2rem * 6);
    margin-bottom: calc(0.2rem * 6);
  }
  .sm-y-margin-between-6 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-6 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-7 > * {
    padding: calc(0.2rem * 7);
  }
  .sm-x-padding-between-7 > * {
    padding-left: calc(0.2rem * 7);
    padding-right: calc(0.2rem * 7);
  }
  .sm-x-padding-between-7 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-7 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-7 > * {
    padding-top: calc(0.2rem * 7);
    padding-bottom: calc(0.2rem * 7);
  }
  .sm-y-padding-between-7 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-7 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-7 > * {
    margin: calc(0.2rem * 7);
  }
  .sm-x-margin-between-7 > * {
    margin-left: calc(0.2rem * 7);
    margin-right: calc(0.2rem * 7);
  }
  .sm-x-margin-between-7 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-7 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-7 > * {
    margin-top: calc(0.2rem * 7);
    margin-bottom: calc(0.2rem * 7);
  }
  .sm-y-margin-between-7 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-7 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-8 > * {
    padding: calc(0.2rem * 8);
  }
  .sm-x-padding-between-8 > * {
    padding-left: calc(0.2rem * 8);
    padding-right: calc(0.2rem * 8);
  }
  .sm-x-padding-between-8 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-8 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-8 > * {
    padding-top: calc(0.2rem * 8);
    padding-bottom: calc(0.2rem * 8);
  }
  .sm-y-padding-between-8 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-8 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-8 > * {
    margin: calc(0.2rem * 8);
  }
  .sm-x-margin-between-8 > * {
    margin-left: calc(0.2rem * 8);
    margin-right: calc(0.2rem * 8);
  }
  .sm-x-margin-between-8 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-8 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-8 > * {
    margin-top: calc(0.2rem * 8);
    margin-bottom: calc(0.2rem * 8);
  }
  .sm-y-margin-between-8 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-8 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-9 > * {
    padding: calc(0.2rem * 9);
  }
  .sm-x-padding-between-9 > * {
    padding-left: calc(0.2rem * 9);
    padding-right: calc(0.2rem * 9);
  }
  .sm-x-padding-between-9 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-9 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-9 > * {
    padding-top: calc(0.2rem * 9);
    padding-bottom: calc(0.2rem * 9);
  }
  .sm-y-padding-between-9 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-9 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-9 > * {
    margin: calc(0.2rem * 9);
  }
  .sm-x-margin-between-9 > * {
    margin-left: calc(0.2rem * 9);
    margin-right: calc(0.2rem * 9);
  }
  .sm-x-margin-between-9 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-9 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-9 > * {
    margin-top: calc(0.2rem * 9);
    margin-bottom: calc(0.2rem * 9);
  }
  .sm-y-margin-between-9 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-9 > *:last-child {
    margin-bottom: 0;
  }
  .sm-padding-between-10 > * {
    padding: calc(0.2rem * 10);
  }
  .sm-x-padding-between-10 > * {
    padding-left: calc(0.2rem * 10);
    padding-right: calc(0.2rem * 10);
  }
  .sm-x-padding-between-10 > *:first-child {
    padding-left: 0;
  }
  .sm-x-padding-between-10 > *:last-child {
    padding-right: 0;
  }
  .sm-y-padding-between-10 > * {
    padding-top: calc(0.2rem * 10);
    padding-bottom: calc(0.2rem * 10);
  }
  .sm-y-padding-between-10 > *:first-child {
    padding-top: 0;
  }
  .sm-y-padding-between-10 > *:last-child {
    padding-bottom: 0;
  }
  .sm-margin-between-10 > * {
    margin: calc(0.2rem * 10);
  }
  .sm-x-margin-between-10 > * {
    margin-left: calc(0.2rem * 10);
    margin-right: calc(0.2rem * 10);
  }
  .sm-x-margin-between-10 > *:first-child {
    margin-left: 0;
  }
  .sm-x-margin-between-10 > *:last-child {
    margin-right: 0;
  }
  .sm-y-margin-between-10 > * {
    margin-top: calc(0.2rem * 10);
    margin-bottom: calc(0.2rem * 10);
  }
  .sm-y-margin-between-10 > *:first-child {
    margin-top: 0;
  }
  .sm-y-margin-between-10 > *:last-child {
    margin-bottom: 0;
  }
}
@media all and (min-width: 768px) {
  .md-padding-between-0 > * {
    padding: calc(0.2rem * 0);
  }
  .md-x-padding-between-0 > * {
    padding-left: calc(0.2rem * 0);
    padding-right: calc(0.2rem * 0);
  }
  .md-x-padding-between-0 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-0 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-0 > * {
    padding-top: calc(0.2rem * 0);
    padding-bottom: calc(0.2rem * 0);
  }
  .md-y-padding-between-0 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-0 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-0 > * {
    margin: calc(0.2rem * 0);
  }
  .md-x-margin-between-0 > * {
    margin-left: calc(0.2rem * 0);
    margin-right: calc(0.2rem * 0);
  }
  .md-x-margin-between-0 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-0 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-0 > * {
    margin-top: calc(0.2rem * 0);
    margin-bottom: calc(0.2rem * 0);
  }
  .md-y-margin-between-0 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-0 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-1 > * {
    padding: calc(0.2rem * 1);
  }
  .md-x-padding-between-1 > * {
    padding-left: calc(0.2rem * 1);
    padding-right: calc(0.2rem * 1);
  }
  .md-x-padding-between-1 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-1 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-1 > * {
    padding-top: calc(0.2rem * 1);
    padding-bottom: calc(0.2rem * 1);
  }
  .md-y-padding-between-1 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-1 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-1 > * {
    margin: calc(0.2rem * 1);
  }
  .md-x-margin-between-1 > * {
    margin-left: calc(0.2rem * 1);
    margin-right: calc(0.2rem * 1);
  }
  .md-x-margin-between-1 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-1 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-1 > * {
    margin-top: calc(0.2rem * 1);
    margin-bottom: calc(0.2rem * 1);
  }
  .md-y-margin-between-1 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-1 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-2 > * {
    padding: calc(0.2rem * 2);
  }
  .md-x-padding-between-2 > * {
    padding-left: calc(0.2rem * 2);
    padding-right: calc(0.2rem * 2);
  }
  .md-x-padding-between-2 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-2 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-2 > * {
    padding-top: calc(0.2rem * 2);
    padding-bottom: calc(0.2rem * 2);
  }
  .md-y-padding-between-2 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-2 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-2 > * {
    margin: calc(0.2rem * 2);
  }
  .md-x-margin-between-2 > * {
    margin-left: calc(0.2rem * 2);
    margin-right: calc(0.2rem * 2);
  }
  .md-x-margin-between-2 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-2 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-2 > * {
    margin-top: calc(0.2rem * 2);
    margin-bottom: calc(0.2rem * 2);
  }
  .md-y-margin-between-2 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-2 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-3 > * {
    padding: calc(0.2rem * 3);
  }
  .md-x-padding-between-3 > * {
    padding-left: calc(0.2rem * 3);
    padding-right: calc(0.2rem * 3);
  }
  .md-x-padding-between-3 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-3 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-3 > * {
    padding-top: calc(0.2rem * 3);
    padding-bottom: calc(0.2rem * 3);
  }
  .md-y-padding-between-3 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-3 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-3 > * {
    margin: calc(0.2rem * 3);
  }
  .md-x-margin-between-3 > * {
    margin-left: calc(0.2rem * 3);
    margin-right: calc(0.2rem * 3);
  }
  .md-x-margin-between-3 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-3 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-3 > * {
    margin-top: calc(0.2rem * 3);
    margin-bottom: calc(0.2rem * 3);
  }
  .md-y-margin-between-3 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-3 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-4 > * {
    padding: calc(0.2rem * 4);
  }
  .md-x-padding-between-4 > * {
    padding-left: calc(0.2rem * 4);
    padding-right: calc(0.2rem * 4);
  }
  .md-x-padding-between-4 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-4 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-4 > * {
    padding-top: calc(0.2rem * 4);
    padding-bottom: calc(0.2rem * 4);
  }
  .md-y-padding-between-4 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-4 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-4 > * {
    margin: calc(0.2rem * 4);
  }
  .md-x-margin-between-4 > * {
    margin-left: calc(0.2rem * 4);
    margin-right: calc(0.2rem * 4);
  }
  .md-x-margin-between-4 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-4 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-4 > * {
    margin-top: calc(0.2rem * 4);
    margin-bottom: calc(0.2rem * 4);
  }
  .md-y-margin-between-4 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-4 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-5 > * {
    padding: calc(0.2rem * 5);
  }
  .md-x-padding-between-5 > * {
    padding-left: calc(0.2rem * 5);
    padding-right: calc(0.2rem * 5);
  }
  .md-x-padding-between-5 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-5 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-5 > * {
    padding-top: calc(0.2rem * 5);
    padding-bottom: calc(0.2rem * 5);
  }
  .md-y-padding-between-5 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-5 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-5 > * {
    margin: calc(0.2rem * 5);
  }
  .md-x-margin-between-5 > * {
    margin-left: calc(0.2rem * 5);
    margin-right: calc(0.2rem * 5);
  }
  .md-x-margin-between-5 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-5 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-5 > * {
    margin-top: calc(0.2rem * 5);
    margin-bottom: calc(0.2rem * 5);
  }
  .md-y-margin-between-5 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-5 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-6 > * {
    padding: calc(0.2rem * 6);
  }
  .md-x-padding-between-6 > * {
    padding-left: calc(0.2rem * 6);
    padding-right: calc(0.2rem * 6);
  }
  .md-x-padding-between-6 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-6 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-6 > * {
    padding-top: calc(0.2rem * 6);
    padding-bottom: calc(0.2rem * 6);
  }
  .md-y-padding-between-6 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-6 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-6 > * {
    margin: calc(0.2rem * 6);
  }
  .md-x-margin-between-6 > * {
    margin-left: calc(0.2rem * 6);
    margin-right: calc(0.2rem * 6);
  }
  .md-x-margin-between-6 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-6 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-6 > * {
    margin-top: calc(0.2rem * 6);
    margin-bottom: calc(0.2rem * 6);
  }
  .md-y-margin-between-6 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-6 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-7 > * {
    padding: calc(0.2rem * 7);
  }
  .md-x-padding-between-7 > * {
    padding-left: calc(0.2rem * 7);
    padding-right: calc(0.2rem * 7);
  }
  .md-x-padding-between-7 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-7 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-7 > * {
    padding-top: calc(0.2rem * 7);
    padding-bottom: calc(0.2rem * 7);
  }
  .md-y-padding-between-7 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-7 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-7 > * {
    margin: calc(0.2rem * 7);
  }
  .md-x-margin-between-7 > * {
    margin-left: calc(0.2rem * 7);
    margin-right: calc(0.2rem * 7);
  }
  .md-x-margin-between-7 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-7 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-7 > * {
    margin-top: calc(0.2rem * 7);
    margin-bottom: calc(0.2rem * 7);
  }
  .md-y-margin-between-7 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-7 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-8 > * {
    padding: calc(0.2rem * 8);
  }
  .md-x-padding-between-8 > * {
    padding-left: calc(0.2rem * 8);
    padding-right: calc(0.2rem * 8);
  }
  .md-x-padding-between-8 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-8 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-8 > * {
    padding-top: calc(0.2rem * 8);
    padding-bottom: calc(0.2rem * 8);
  }
  .md-y-padding-between-8 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-8 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-8 > * {
    margin: calc(0.2rem * 8);
  }
  .md-x-margin-between-8 > * {
    margin-left: calc(0.2rem * 8);
    margin-right: calc(0.2rem * 8);
  }
  .md-x-margin-between-8 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-8 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-8 > * {
    margin-top: calc(0.2rem * 8);
    margin-bottom: calc(0.2rem * 8);
  }
  .md-y-margin-between-8 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-8 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-9 > * {
    padding: calc(0.2rem * 9);
  }
  .md-x-padding-between-9 > * {
    padding-left: calc(0.2rem * 9);
    padding-right: calc(0.2rem * 9);
  }
  .md-x-padding-between-9 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-9 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-9 > * {
    padding-top: calc(0.2rem * 9);
    padding-bottom: calc(0.2rem * 9);
  }
  .md-y-padding-between-9 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-9 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-9 > * {
    margin: calc(0.2rem * 9);
  }
  .md-x-margin-between-9 > * {
    margin-left: calc(0.2rem * 9);
    margin-right: calc(0.2rem * 9);
  }
  .md-x-margin-between-9 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-9 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-9 > * {
    margin-top: calc(0.2rem * 9);
    margin-bottom: calc(0.2rem * 9);
  }
  .md-y-margin-between-9 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-9 > *:last-child {
    margin-bottom: 0;
  }
  .md-padding-between-10 > * {
    padding: calc(0.2rem * 10);
  }
  .md-x-padding-between-10 > * {
    padding-left: calc(0.2rem * 10);
    padding-right: calc(0.2rem * 10);
  }
  .md-x-padding-between-10 > *:first-child {
    padding-left: 0;
  }
  .md-x-padding-between-10 > *:last-child {
    padding-right: 0;
  }
  .md-y-padding-between-10 > * {
    padding-top: calc(0.2rem * 10);
    padding-bottom: calc(0.2rem * 10);
  }
  .md-y-padding-between-10 > *:first-child {
    padding-top: 0;
  }
  .md-y-padding-between-10 > *:last-child {
    padding-bottom: 0;
  }
  .md-margin-between-10 > * {
    margin: calc(0.2rem * 10);
  }
  .md-x-margin-between-10 > * {
    margin-left: calc(0.2rem * 10);
    margin-right: calc(0.2rem * 10);
  }
  .md-x-margin-between-10 > *:first-child {
    margin-left: 0;
  }
  .md-x-margin-between-10 > *:last-child {
    margin-right: 0;
  }
  .md-y-margin-between-10 > * {
    margin-top: calc(0.2rem * 10);
    margin-bottom: calc(0.2rem * 10);
  }
  .md-y-margin-between-10 > *:first-child {
    margin-top: 0;
  }
  .md-y-margin-between-10 > *:last-child {
    margin-bottom: 0;
  }
}
@media all and (min-width: 992px) {
  .lg-padding-between-0 > * {
    padding: calc(0.2rem * 0);
  }
  .lg-x-padding-between-0 > * {
    padding-left: calc(0.2rem * 0);
    padding-right: calc(0.2rem * 0);
  }
  .lg-x-padding-between-0 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-0 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-0 > * {
    padding-top: calc(0.2rem * 0);
    padding-bottom: calc(0.2rem * 0);
  }
  .lg-y-padding-between-0 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-0 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-0 > * {
    margin: calc(0.2rem * 0);
  }
  .lg-x-margin-between-0 > * {
    margin-left: calc(0.2rem * 0);
    margin-right: calc(0.2rem * 0);
  }
  .lg-x-margin-between-0 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-0 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-0 > * {
    margin-top: calc(0.2rem * 0);
    margin-bottom: calc(0.2rem * 0);
  }
  .lg-y-margin-between-0 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-0 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-1 > * {
    padding: calc(0.2rem * 1);
  }
  .lg-x-padding-between-1 > * {
    padding-left: calc(0.2rem * 1);
    padding-right: calc(0.2rem * 1);
  }
  .lg-x-padding-between-1 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-1 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-1 > * {
    padding-top: calc(0.2rem * 1);
    padding-bottom: calc(0.2rem * 1);
  }
  .lg-y-padding-between-1 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-1 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-1 > * {
    margin: calc(0.2rem * 1);
  }
  .lg-x-margin-between-1 > * {
    margin-left: calc(0.2rem * 1);
    margin-right: calc(0.2rem * 1);
  }
  .lg-x-margin-between-1 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-1 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-1 > * {
    margin-top: calc(0.2rem * 1);
    margin-bottom: calc(0.2rem * 1);
  }
  .lg-y-margin-between-1 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-1 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-2 > * {
    padding: calc(0.2rem * 2);
  }
  .lg-x-padding-between-2 > * {
    padding-left: calc(0.2rem * 2);
    padding-right: calc(0.2rem * 2);
  }
  .lg-x-padding-between-2 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-2 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-2 > * {
    padding-top: calc(0.2rem * 2);
    padding-bottom: calc(0.2rem * 2);
  }
  .lg-y-padding-between-2 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-2 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-2 > * {
    margin: calc(0.2rem * 2);
  }
  .lg-x-margin-between-2 > * {
    margin-left: calc(0.2rem * 2);
    margin-right: calc(0.2rem * 2);
  }
  .lg-x-margin-between-2 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-2 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-2 > * {
    margin-top: calc(0.2rem * 2);
    margin-bottom: calc(0.2rem * 2);
  }
  .lg-y-margin-between-2 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-2 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-3 > * {
    padding: calc(0.2rem * 3);
  }
  .lg-x-padding-between-3 > * {
    padding-left: calc(0.2rem * 3);
    padding-right: calc(0.2rem * 3);
  }
  .lg-x-padding-between-3 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-3 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-3 > * {
    padding-top: calc(0.2rem * 3);
    padding-bottom: calc(0.2rem * 3);
  }
  .lg-y-padding-between-3 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-3 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-3 > * {
    margin: calc(0.2rem * 3);
  }
  .lg-x-margin-between-3 > * {
    margin-left: calc(0.2rem * 3);
    margin-right: calc(0.2rem * 3);
  }
  .lg-x-margin-between-3 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-3 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-3 > * {
    margin-top: calc(0.2rem * 3);
    margin-bottom: calc(0.2rem * 3);
  }
  .lg-y-margin-between-3 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-3 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-4 > * {
    padding: calc(0.2rem * 4);
  }
  .lg-x-padding-between-4 > * {
    padding-left: calc(0.2rem * 4);
    padding-right: calc(0.2rem * 4);
  }
  .lg-x-padding-between-4 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-4 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-4 > * {
    padding-top: calc(0.2rem * 4);
    padding-bottom: calc(0.2rem * 4);
  }
  .lg-y-padding-between-4 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-4 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-4 > * {
    margin: calc(0.2rem * 4);
  }
  .lg-x-margin-between-4 > * {
    margin-left: calc(0.2rem * 4);
    margin-right: calc(0.2rem * 4);
  }
  .lg-x-margin-between-4 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-4 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-4 > * {
    margin-top: calc(0.2rem * 4);
    margin-bottom: calc(0.2rem * 4);
  }
  .lg-y-margin-between-4 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-4 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-5 > * {
    padding: calc(0.2rem * 5);
  }
  .lg-x-padding-between-5 > * {
    padding-left: calc(0.2rem * 5);
    padding-right: calc(0.2rem * 5);
  }
  .lg-x-padding-between-5 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-5 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-5 > * {
    padding-top: calc(0.2rem * 5);
    padding-bottom: calc(0.2rem * 5);
  }
  .lg-y-padding-between-5 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-5 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-5 > * {
    margin: calc(0.2rem * 5);
  }
  .lg-x-margin-between-5 > * {
    margin-left: calc(0.2rem * 5);
    margin-right: calc(0.2rem * 5);
  }
  .lg-x-margin-between-5 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-5 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-5 > * {
    margin-top: calc(0.2rem * 5);
    margin-bottom: calc(0.2rem * 5);
  }
  .lg-y-margin-between-5 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-5 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-6 > * {
    padding: calc(0.2rem * 6);
  }
  .lg-x-padding-between-6 > * {
    padding-left: calc(0.2rem * 6);
    padding-right: calc(0.2rem * 6);
  }
  .lg-x-padding-between-6 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-6 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-6 > * {
    padding-top: calc(0.2rem * 6);
    padding-bottom: calc(0.2rem * 6);
  }
  .lg-y-padding-between-6 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-6 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-6 > * {
    margin: calc(0.2rem * 6);
  }
  .lg-x-margin-between-6 > * {
    margin-left: calc(0.2rem * 6);
    margin-right: calc(0.2rem * 6);
  }
  .lg-x-margin-between-6 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-6 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-6 > * {
    margin-top: calc(0.2rem * 6);
    margin-bottom: calc(0.2rem * 6);
  }
  .lg-y-margin-between-6 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-6 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-7 > * {
    padding: calc(0.2rem * 7);
  }
  .lg-x-padding-between-7 > * {
    padding-left: calc(0.2rem * 7);
    padding-right: calc(0.2rem * 7);
  }
  .lg-x-padding-between-7 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-7 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-7 > * {
    padding-top: calc(0.2rem * 7);
    padding-bottom: calc(0.2rem * 7);
  }
  .lg-y-padding-between-7 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-7 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-7 > * {
    margin: calc(0.2rem * 7);
  }
  .lg-x-margin-between-7 > * {
    margin-left: calc(0.2rem * 7);
    margin-right: calc(0.2rem * 7);
  }
  .lg-x-margin-between-7 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-7 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-7 > * {
    margin-top: calc(0.2rem * 7);
    margin-bottom: calc(0.2rem * 7);
  }
  .lg-y-margin-between-7 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-7 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-8 > * {
    padding: calc(0.2rem * 8);
  }
  .lg-x-padding-between-8 > * {
    padding-left: calc(0.2rem * 8);
    padding-right: calc(0.2rem * 8);
  }
  .lg-x-padding-between-8 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-8 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-8 > * {
    padding-top: calc(0.2rem * 8);
    padding-bottom: calc(0.2rem * 8);
  }
  .lg-y-padding-between-8 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-8 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-8 > * {
    margin: calc(0.2rem * 8);
  }
  .lg-x-margin-between-8 > * {
    margin-left: calc(0.2rem * 8);
    margin-right: calc(0.2rem * 8);
  }
  .lg-x-margin-between-8 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-8 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-8 > * {
    margin-top: calc(0.2rem * 8);
    margin-bottom: calc(0.2rem * 8);
  }
  .lg-y-margin-between-8 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-8 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-9 > * {
    padding: calc(0.2rem * 9);
  }
  .lg-x-padding-between-9 > * {
    padding-left: calc(0.2rem * 9);
    padding-right: calc(0.2rem * 9);
  }
  .lg-x-padding-between-9 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-9 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-9 > * {
    padding-top: calc(0.2rem * 9);
    padding-bottom: calc(0.2rem * 9);
  }
  .lg-y-padding-between-9 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-9 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-9 > * {
    margin: calc(0.2rem * 9);
  }
  .lg-x-margin-between-9 > * {
    margin-left: calc(0.2rem * 9);
    margin-right: calc(0.2rem * 9);
  }
  .lg-x-margin-between-9 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-9 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-9 > * {
    margin-top: calc(0.2rem * 9);
    margin-bottom: calc(0.2rem * 9);
  }
  .lg-y-margin-between-9 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-9 > *:last-child {
    margin-bottom: 0;
  }
  .lg-padding-between-10 > * {
    padding: calc(0.2rem * 10);
  }
  .lg-x-padding-between-10 > * {
    padding-left: calc(0.2rem * 10);
    padding-right: calc(0.2rem * 10);
  }
  .lg-x-padding-between-10 > *:first-child {
    padding-left: 0;
  }
  .lg-x-padding-between-10 > *:last-child {
    padding-right: 0;
  }
  .lg-y-padding-between-10 > * {
    padding-top: calc(0.2rem * 10);
    padding-bottom: calc(0.2rem * 10);
  }
  .lg-y-padding-between-10 > *:first-child {
    padding-top: 0;
  }
  .lg-y-padding-between-10 > *:last-child {
    padding-bottom: 0;
  }
  .lg-margin-between-10 > * {
    margin: calc(0.2rem * 10);
  }
  .lg-x-margin-between-10 > * {
    margin-left: calc(0.2rem * 10);
    margin-right: calc(0.2rem * 10);
  }
  .lg-x-margin-between-10 > *:first-child {
    margin-left: 0;
  }
  .lg-x-margin-between-10 > *:last-child {
    margin-right: 0;
  }
  .lg-y-margin-between-10 > * {
    margin-top: calc(0.2rem * 10);
    margin-bottom: calc(0.2rem * 10);
  }
  .lg-y-margin-between-10 > *:first-child {
    margin-top: 0;
  }
  .lg-y-margin-between-10 > *:last-child {
    margin-bottom: 0;
  }
}
@media all and (min-width: 1200px) {
  .xl-padding-between-0 > * {
    padding: calc(0.2rem * 0);
  }
  .xl-x-padding-between-0 > * {
    padding-left: calc(0.2rem * 0);
    padding-right: calc(0.2rem * 0);
  }
  .xl-x-padding-between-0 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-0 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-0 > * {
    padding-top: calc(0.2rem * 0);
    padding-bottom: calc(0.2rem * 0);
  }
  .xl-y-padding-between-0 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-0 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-0 > * {
    margin: calc(0.2rem * 0);
  }
  .xl-x-margin-between-0 > * {
    margin-left: calc(0.2rem * 0);
    margin-right: calc(0.2rem * 0);
  }
  .xl-x-margin-between-0 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-0 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-0 > * {
    margin-top: calc(0.2rem * 0);
    margin-bottom: calc(0.2rem * 0);
  }
  .xl-y-margin-between-0 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-0 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-1 > * {
    padding: calc(0.2rem * 1);
  }
  .xl-x-padding-between-1 > * {
    padding-left: calc(0.2rem * 1);
    padding-right: calc(0.2rem * 1);
  }
  .xl-x-padding-between-1 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-1 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-1 > * {
    padding-top: calc(0.2rem * 1);
    padding-bottom: calc(0.2rem * 1);
  }
  .xl-y-padding-between-1 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-1 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-1 > * {
    margin: calc(0.2rem * 1);
  }
  .xl-x-margin-between-1 > * {
    margin-left: calc(0.2rem * 1);
    margin-right: calc(0.2rem * 1);
  }
  .xl-x-margin-between-1 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-1 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-1 > * {
    margin-top: calc(0.2rem * 1);
    margin-bottom: calc(0.2rem * 1);
  }
  .xl-y-margin-between-1 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-1 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-2 > * {
    padding: calc(0.2rem * 2);
  }
  .xl-x-padding-between-2 > * {
    padding-left: calc(0.2rem * 2);
    padding-right: calc(0.2rem * 2);
  }
  .xl-x-padding-between-2 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-2 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-2 > * {
    padding-top: calc(0.2rem * 2);
    padding-bottom: calc(0.2rem * 2);
  }
  .xl-y-padding-between-2 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-2 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-2 > * {
    margin: calc(0.2rem * 2);
  }
  .xl-x-margin-between-2 > * {
    margin-left: calc(0.2rem * 2);
    margin-right: calc(0.2rem * 2);
  }
  .xl-x-margin-between-2 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-2 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-2 > * {
    margin-top: calc(0.2rem * 2);
    margin-bottom: calc(0.2rem * 2);
  }
  .xl-y-margin-between-2 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-2 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-3 > * {
    padding: calc(0.2rem * 3);
  }
  .xl-x-padding-between-3 > * {
    padding-left: calc(0.2rem * 3);
    padding-right: calc(0.2rem * 3);
  }
  .xl-x-padding-between-3 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-3 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-3 > * {
    padding-top: calc(0.2rem * 3);
    padding-bottom: calc(0.2rem * 3);
  }
  .xl-y-padding-between-3 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-3 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-3 > * {
    margin: calc(0.2rem * 3);
  }
  .xl-x-margin-between-3 > * {
    margin-left: calc(0.2rem * 3);
    margin-right: calc(0.2rem * 3);
  }
  .xl-x-margin-between-3 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-3 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-3 > * {
    margin-top: calc(0.2rem * 3);
    margin-bottom: calc(0.2rem * 3);
  }
  .xl-y-margin-between-3 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-3 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-4 > * {
    padding: calc(0.2rem * 4);
  }
  .xl-x-padding-between-4 > * {
    padding-left: calc(0.2rem * 4);
    padding-right: calc(0.2rem * 4);
  }
  .xl-x-padding-between-4 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-4 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-4 > * {
    padding-top: calc(0.2rem * 4);
    padding-bottom: calc(0.2rem * 4);
  }
  .xl-y-padding-between-4 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-4 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-4 > * {
    margin: calc(0.2rem * 4);
  }
  .xl-x-margin-between-4 > * {
    margin-left: calc(0.2rem * 4);
    margin-right: calc(0.2rem * 4);
  }
  .xl-x-margin-between-4 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-4 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-4 > * {
    margin-top: calc(0.2rem * 4);
    margin-bottom: calc(0.2rem * 4);
  }
  .xl-y-margin-between-4 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-4 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-5 > * {
    padding: calc(0.2rem * 5);
  }
  .xl-x-padding-between-5 > * {
    padding-left: calc(0.2rem * 5);
    padding-right: calc(0.2rem * 5);
  }
  .xl-x-padding-between-5 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-5 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-5 > * {
    padding-top: calc(0.2rem * 5);
    padding-bottom: calc(0.2rem * 5);
  }
  .xl-y-padding-between-5 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-5 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-5 > * {
    margin: calc(0.2rem * 5);
  }
  .xl-x-margin-between-5 > * {
    margin-left: calc(0.2rem * 5);
    margin-right: calc(0.2rem * 5);
  }
  .xl-x-margin-between-5 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-5 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-5 > * {
    margin-top: calc(0.2rem * 5);
    margin-bottom: calc(0.2rem * 5);
  }
  .xl-y-margin-between-5 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-5 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-6 > * {
    padding: calc(0.2rem * 6);
  }
  .xl-x-padding-between-6 > * {
    padding-left: calc(0.2rem * 6);
    padding-right: calc(0.2rem * 6);
  }
  .xl-x-padding-between-6 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-6 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-6 > * {
    padding-top: calc(0.2rem * 6);
    padding-bottom: calc(0.2rem * 6);
  }
  .xl-y-padding-between-6 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-6 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-6 > * {
    margin: calc(0.2rem * 6);
  }
  .xl-x-margin-between-6 > * {
    margin-left: calc(0.2rem * 6);
    margin-right: calc(0.2rem * 6);
  }
  .xl-x-margin-between-6 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-6 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-6 > * {
    margin-top: calc(0.2rem * 6);
    margin-bottom: calc(0.2rem * 6);
  }
  .xl-y-margin-between-6 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-6 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-7 > * {
    padding: calc(0.2rem * 7);
  }
  .xl-x-padding-between-7 > * {
    padding-left: calc(0.2rem * 7);
    padding-right: calc(0.2rem * 7);
  }
  .xl-x-padding-between-7 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-7 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-7 > * {
    padding-top: calc(0.2rem * 7);
    padding-bottom: calc(0.2rem * 7);
  }
  .xl-y-padding-between-7 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-7 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-7 > * {
    margin: calc(0.2rem * 7);
  }
  .xl-x-margin-between-7 > * {
    margin-left: calc(0.2rem * 7);
    margin-right: calc(0.2rem * 7);
  }
  .xl-x-margin-between-7 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-7 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-7 > * {
    margin-top: calc(0.2rem * 7);
    margin-bottom: calc(0.2rem * 7);
  }
  .xl-y-margin-between-7 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-7 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-8 > * {
    padding: calc(0.2rem * 8);
  }
  .xl-x-padding-between-8 > * {
    padding-left: calc(0.2rem * 8);
    padding-right: calc(0.2rem * 8);
  }
  .xl-x-padding-between-8 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-8 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-8 > * {
    padding-top: calc(0.2rem * 8);
    padding-bottom: calc(0.2rem * 8);
  }
  .xl-y-padding-between-8 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-8 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-8 > * {
    margin: calc(0.2rem * 8);
  }
  .xl-x-margin-between-8 > * {
    margin-left: calc(0.2rem * 8);
    margin-right: calc(0.2rem * 8);
  }
  .xl-x-margin-between-8 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-8 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-8 > * {
    margin-top: calc(0.2rem * 8);
    margin-bottom: calc(0.2rem * 8);
  }
  .xl-y-margin-between-8 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-8 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-9 > * {
    padding: calc(0.2rem * 9);
  }
  .xl-x-padding-between-9 > * {
    padding-left: calc(0.2rem * 9);
    padding-right: calc(0.2rem * 9);
  }
  .xl-x-padding-between-9 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-9 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-9 > * {
    padding-top: calc(0.2rem * 9);
    padding-bottom: calc(0.2rem * 9);
  }
  .xl-y-padding-between-9 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-9 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-9 > * {
    margin: calc(0.2rem * 9);
  }
  .xl-x-margin-between-9 > * {
    margin-left: calc(0.2rem * 9);
    margin-right: calc(0.2rem * 9);
  }
  .xl-x-margin-between-9 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-9 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-9 > * {
    margin-top: calc(0.2rem * 9);
    margin-bottom: calc(0.2rem * 9);
  }
  .xl-y-margin-between-9 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-9 > *:last-child {
    margin-bottom: 0;
  }
  .xl-padding-between-10 > * {
    padding: calc(0.2rem * 10);
  }
  .xl-x-padding-between-10 > * {
    padding-left: calc(0.2rem * 10);
    padding-right: calc(0.2rem * 10);
  }
  .xl-x-padding-between-10 > *:first-child {
    padding-left: 0;
  }
  .xl-x-padding-between-10 > *:last-child {
    padding-right: 0;
  }
  .xl-y-padding-between-10 > * {
    padding-top: calc(0.2rem * 10);
    padding-bottom: calc(0.2rem * 10);
  }
  .xl-y-padding-between-10 > *:first-child {
    padding-top: 0;
  }
  .xl-y-padding-between-10 > *:last-child {
    padding-bottom: 0;
  }
  .xl-margin-between-10 > * {
    margin: calc(0.2rem * 10);
  }
  .xl-x-margin-between-10 > * {
    margin-left: calc(0.2rem * 10);
    margin-right: calc(0.2rem * 10);
  }
  .xl-x-margin-between-10 > *:first-child {
    margin-left: 0;
  }
  .xl-x-margin-between-10 > *:last-child {
    margin-right: 0;
  }
  .xl-y-margin-between-10 > * {
    margin-top: calc(0.2rem * 10);
    margin-bottom: calc(0.2rem * 10);
  }
  .xl-y-margin-between-10 > *:first-child {
    margin-top: 0;
  }
  .xl-y-margin-between-10 > *:last-child {
    margin-bottom: 0;
  }
}
.is-size-1 {
  font-size: 6rem;
}
@media all and (max-width: 575.98px) {
  .is-size-1 {
    font-size: 5rem;
  }
}

.is-size-2 {
  font-size: 3.5rem;
}
@media all and (max-width: 575.98px) {
  .is-size-2 {
    font-size: 2.8125rem;
  }
}

.is-size-3 {
  font-size: 2.8125rem;
}
@media all and (max-width: 575.98px) {
  .is-size-3 {
    font-size: 2.125rem;
  }
}

.is-size-4 {
  font-size: 2.125rem;
}
@media all and (max-width: 575.98px) {
  .is-size-4 {
    font-size: 1.5rem;
  }
}

.is-size-5 {
  font-size: 1.5rem;
}
@media all and (max-width: 575.98px) {
  .is-size-5 {
    font-size: 1.25rem;
  }
}

.is-size-6 {
  font-size: 1.25rem;
}
@media all and (max-width: 575.98px) {
  .is-size-6 {
    font-size: 1rem;
  }
}

.is-size-7 {
  font-size: 1rem;
}
@media all and (max-width: 575.98px) {
  .is-size-7 {
    font-size: 0.875rem;
  }
}

.is-size-8 {
  font-size: 0.875rem;
}
@media all and (max-width: 575.98px) {
  .is-size-8 {
    font-size: 0.75rem;
  }
}

.is-size-9 {
  font-size: 0.75rem;
}
@media all and (max-width: 575.98px) {
  .is-size-9 {
    font-size: 0.625rem;
  }
}

.is-light-weight {
  font-weight: 200;
}

.is-normal-weight {
  font-weight: 400;
}

.is-semi-bold-weight {
  font-weight: 600;
}

.is-bold-weight {
  font-weight: 700;
}

.is-italic {
  font-style: italic;
}

.is-uppercase {
  text-transform: uppercase;
}

.is-sentence {
  text-transform: none;
}

.is-justified {
  text-align: justify;
}

.is-center-aligned {
  text-align: center;
}

.is-left-aligned {
  text-align: left;
}

.is-right-aligned {
  text-align: right;
}

.is-quote {
  padding-left: 1rem;
  border-left: 0.25rem solid #297eab;
}

.is-body {
  line-height: 1.5;
}

.is-handwriting {
  font-family: "Kalam";
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

.text-display-4 {
  font-size: 6rem;
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 112px;
}
@media all and (max-width: 575.98px) {
  .text-display-4 {
    font-size: 5rem;
  }
}

.text-display-3 {
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 58px;
}
@media all and (max-width: 575.98px) {
  .text-display-3 {
    font-size: 2.8125rem;
  }
}

.text-display-2 {
  font-size: 2.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 48px;
}
@media all and (max-width: 575.98px) {
  .text-display-2 {
    font-size: 2.125rem;
  }
}

.text-display-1 {
  font-size: 2.125rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 40px;
}
@media all and (max-width: 575.98px) {
  .text-display-1 {
    font-size: 1.5rem;
  }
}

.text-headline {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 32px;
}
@media all and (max-width: 575.98px) {
  .text-headline {
    font-size: 1.25rem;
  }
}

.text-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 26px;
}
@media all and (max-width: 575.98px) {
  .text-title {
    font-size: 1rem;
  }
}

.text-subtitle {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 24px;
}
@media all and (max-width: 575.98px) {
  .text-subtitle {
    font-size: 0.875rem;
  }
}

.text-body-2 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 24px;
}
@media all and (max-width: 575.98px) {
  .text-body-2 {
    font-size: 0.75rem;
  }
}

.text-body-1 {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 20px;
}
@media all and (max-width: 575.98px) {
  .text-body-1 {
    font-size: 0.75rem;
  }
}

.text-caption {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 17px;
}
@media all and (max-width: 575.98px) {
  .text-caption {
    font-size: 0.625rem;
  }
}

.text-link {
  font-size: 0.875rem;
  font-weight: 400;
}
@media all and (max-width: 575.98px) {
  .text-link {
    font-size: 0.75rem;
  }
}

.text-button {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: normal;
  text-transform: uppercase;
}
@media all and (max-width: 575.98px) {
  .text-button {
    font-size: 0.75rem;
  }
}
.is-theme-base {
  background-color: #F4F4F9;
  color: #3C3C60;
}
.is-theme-base *::selection {
  background-color: #297eab;
  color: white;
}
.is-theme-primary {
  background-color: #297eab;
  color: white;
}
.is-theme-primary *::selection {
  background-color: #F4F4F9;
  color: #3C3C60;
}
.is-theme-primary .is-color-light {
  color: rgba(255, 255, 255, 0.75);
}

.is-theme-secondary {
  background-color: white;
  color: #3C3C60;
}
.is-theme-secondary *::selection {
  background-color: #297eab;
  color: white;
}
.is-theme-secondary .is-color-light {
  color: #6A6A87;
}

.is-theme-dark {
  background-color: #2D323F;
  color: white;
}
.is-theme-dark *::selection {
  background-color: #F4F4F9;
  color: #3C3C60;
}
.is-theme-dark .is-color-light {
  color: rgba(255, 255, 255, 0.75);
}
.is-theme-dark .is-color-lighter {
  color: rgba(255, 255, 255, 0.35);
}
.is-theme-dark .is-color-action {
  color: #297eab;
}

.is-theme-darker {
  background-color: #222636;
  color: white;
}
.is-theme-darker *::selection {
  background-color: #F4F4F9;
  color: #2D323F;
}
.is-theme-darker .is-color-light {
  color: rgba(255, 255, 255, 0.75);
}
.is-theme-darker .is-color-action {
  color: #297eab;
}
.is-theme-darker .is-color-typescript {
  color: #1B93E2;
}
.is-theme-darker .is-color-react {
  color: #00D8FF;
}
.tooltip-container {
  position: relative;
}
.tooltip-container:hover .tooltip, .tooltip-container:active .tooltip, .tooltip-container:focus .tooltip {
  opacity: 1;
}
.tooltip-container:hover .tooltip.top, .tooltip-container:active .tooltip.top, .tooltip-container:focus .tooltip.top {
  bottom: 108%;
  transform: translateX(-50%) translateY(0) translateZ(0) scale(1, 1);
}
.tooltip-container:hover .tooltip.left, .tooltip-container:active .tooltip.left, .tooltip-container:focus .tooltip.left {
  right: 108%;
  transform: translateX(0) translateY(-50%) translateZ(0) scale(1, 1);
}
.tooltip-container:hover .tooltip.right, .tooltip-container:active .tooltip.right, .tooltip-container:focus .tooltip.right {
  left: 108%;
  transform: translateX(0) translateY(-50%) translateZ(0) scale(1, 1);
}
.tooltip-container .tooltip {
  display: block;
  position: absolute;
  z-index: 2;
  width: auto;
  text-align: center;
  background-color: #2D323F;
  color: white;
  border-radius: 0.5rem;
  transition: 0.2s;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  padding: 0.5rem;
}
@media all and (max-width: 575.98px) {
  .tooltip-container .tooltip {
    padding: 0.25rem;
  }
}
.tooltip-container .tooltip::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px;
}
@media all and (max-width: 575.98px) {
  .tooltip-container .tooltip::after {
    border-width: 4px;
  }
}
.tooltip-container .tooltip.top {
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(0) translateZ(0) scale(0, 0);
}
.tooltip-container .tooltip.top::after {
  top: 100%;
  left: 50%;
  border-color: #2D323F transparent transparent transparent;
  margin-left: -8px;
}
@media all and (max-width: 575.98px) {
  .tooltip-container .tooltip.top::after {
    margin-left: -4px;
  }
}
.tooltip-container .tooltip.left {
  top: 50%;
  right: 0;
  transform: translateX(0) translateY(-50%) translateZ(0) scale(0, 0);
}
.tooltip-container .tooltip.left::after {
  top: 50%;
  left: 100%;
  margin-left: -1px;
  transform: translateY(-50%);
  border-color: transparent transparent transparent #2D323F;
}
.tooltip-container .tooltip.right {
  top: 50%;
  left: 0;
  transform: translateX(0) translateY(-50%) translateZ(0) scale(0, 0);
}
.tooltip-container .tooltip.right::after {
  top: 50%;
  right: 100%;
  margin-right: -1px;
  transform: translateY(-50%);
  border-color: transparent #2D323F transparent transparent;
}
header.logo {
  width: 100%;
  padding: 0.5rem 2rem;
  background-color: white;
  user-select: none;
  -webkit-user-select: none;
}
header.logo .row {
  max-width: 75rem;
  margin: 0 auto;
}
header.logo .row .image {
  width: 4.675rem;
  height: 4.675rem;
  margin-right: 0.25rem;
  position: relative;
}
header.logo .row .image img {
  height: inherit;
  width: inherit;
  position: absolute;
  -webkit-user-drag: none;
  transform-origin: center center;
  -webkit-transform-origin: center center;
}
header.logo .row .image img:not(.preload) {
  transition: transform 1.5s;
  -webkit-transition: 1.5s;
  transform: scale(1, 1) rotate(0deg);
  -webkit-transform: scale(1, 1) rotate(0deg);
}
header.logo .row .image img.preload.outer {
  transform: scale(0, 0) rotate(360deg);
  -webkit-transform: scale(0, 0) rotate(360deg);
}
header.logo .row .image img.preload.inner {
  transform: scale(0, 0) rotate(-180deg);
  -webkit-transform: scale(0, 0) rotate(-180deg);
}
header.logo .row .info {
  margin-top: 0.825rem;
  font-weight: 700;
  font-family: "Open Sans";
  text-transform: uppercase;
}
@media all and (max-width: 575.98px) {
  header.logo .row .info {
    display: none;
  }
}
header.logo .row .info .name {
  font-size: 1.35rem;
}
header.logo .row .info .title {
  font-size: 0.8rem;
}
header.menu {
  position: fixed;
  top: 0;
  right: 2rem;
  height: 6.125rem;
  width: 1.5625rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
header.menu .hamburger {
  width: 100%;
  cursor: pointer;
}
header.menu .hamburger.light .line {
  background: white;
}
header.menu .hamburger .line {
  height: 2px;
  width: 100%;
  margin: 4px auto;
  background: #3C3C60;
  transition: 0.25s ease-in-out;
}
header.menu:not([open]) .hamburger:hover .line {
  margin: 6px auto;
}
header.menu[open] .hamburger .line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  -webkit-transform: translateY(6px) rotate(45deg);
}
header.menu[open] .hamburger .line:nth-child(2) {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
header.menu[open] .hamburger .line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  -webkit-transform: translateY(-6px) rotate(-45deg);
}
header.menu[open] .hamburger:hover .line {
  width: 90%;
}
header.navigation {
  position: fixed;
  height: 100%;
  width: 13.4375rem;
  margin-left: 100%;
  background: white;
  transition: box-shadow 0.5s;
  z-index: 1;
}

main[shifted] header.navigation {
  box-shadow: -15px 0px 25px rgba(0, 0, 15, 0.3);
}
header.navigation .sections {
  height: calc(100% - 6rem - 2px);
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
header.navigation .sections > a {
  width: 100%;
  min-height: 40px;
  position: relative;
  flex: 1;
  flex-basis: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Open Sans";
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  border-bottom: 10px inset rgba(0, 0, 15, 0.35);
}
header.navigation .sections > a > svg {
  width: 100% !important;
  height: 40%;
  min-height: 24px;
}
header.navigation .sections > a > svg > path {
  fill: white;
}
header.navigation .sections > a[href=\#about] {
  background-color: #639674;
}
header.navigation .sections > a[href=\#skills] {
  background-color: #638596;
}
header.navigation .sections > a[href=\#experience] {
  background-color: #746396;
}
header.navigation .sections > a[href=\#projects] {
  background-color: #966385;
}
header.navigation .sections > a[href=\#education] {
  background-color: #967463;
}
header.navigation .sections > a[href=\#connect] {
  background-color: #859663;
}
header.navigation .sections > a > .slider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%) translateX(16px);
  width: 100%;
  background-color: #2D323F;
  transition: left 0.5s, transform 0.5s;
  z-index: 1;
  text-transform: uppercase;
  color: white;
  font-family: "Open Sans";
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 10px inset rgba(0, 0, 15, 0.5);
}
header.navigation .sections > a:hover > .slider, header.navigation .sections > a[selected] > .slider {
  transform: translateX(0);
}
header.navigation div.header {
  background: white;
  list-style-type: none;
  padding: calc((6rem - 4rem) / 2) 4rem 0 3rem;
  height: 6rem;
  user-select: none;
  -webkit-user-select: none;
}

.navigation .header .title .logo {
  height: 3rem;
  width: 100%;
  -webkit-user-drag: none;
}
.navigation .header .title .logo img {
  height: inherit;
  width: auto;
}

.navigation .header .title .text {
  font-size: 0.825rem;
  color: #3C3C60;
  font-weight: 700;
  font-family: "Open Sans";
  text-transform: uppercase;
  line-height: 0.825rem;
}

.navigation hr {
  margin: 0 auto;
  border: none;
  background-color: rgba(0, 0, 15, 0.1);
  height: 3px;
}

section#about {
  box-shadow: 0 -40px 30px 0px rgba(0, 0, 15, 0.5);
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  section#about .about-me {
    min-height: 1px;
  }
  section#about .about-me img.me {
    min-height: 1px;
  }
}
section#about img.me {
  width: 100%;
  height: auto;
  border-radius: 50%;
  -webkit-user-drag: none;
  user-select: none;
}
section#about .flavor {
  animation: fade-in 1s;
  animation-play-state: running;
}
section#about .flavor.preload {
  animation-play-state: paused;
}
section#about .qualities > * {
  animation: fade-in 1s;
  animation-play-state: running;
}
section#about .qualities > *.preload {
  animation-play-state: paused;
}
section#about .qualities .icon {
  height: 3rem;
  width: auto;
  transform: scale(1, 1);
  transition: transform 0.5s;
}
section#about .qualities .icon:hover {
  transform: scale(1.25, 1.25);
}
section#about .qualities .icon, section#about .qualities .quality {
  margin-bottom: 0.75rem;
}
section#about .qualities .desc {
  padding: 0.25rem;
}
section#certificates .projects-container > * {
  animation: fade-in 1s;
  animation-play-state: running;
  position: relative;
}
section#certificates .projects-container > *.preload {
  animation-play-state: paused;
}
section#certificates .award {
  position: absolute;
  top: -1rem;
  right: -1rem;
  z-index: 1;
}
section#certificates .award:hover img {
  transform: translateY(-2px) scale(1.05, 1.05);
}
section#certificates .award img {
  height: 6rem;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.2s ease-in-out;
}
section#certificates .project {
  width: 100%;
  height: 100%;
}
section#certificates .project .content .options {
  transform: translateZ(1px);
}
section#certificates .project .content .options .btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
section#certificates .project .content .options .btn svg {
  height: 1.1rem;
  width: auto;
  transition: 0.5s ease-in-out;
  transition-property: opacity, transform, height, width;
}
@media all and (max-width: 575.98px) {
  section#certificates .project .content .options .btn svg {
    height: 0.85rem;
  }
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  section#certificates .project .content .options .btn svg {
    width: 1.5rem;
  }
}
section#certificates .project .content .options .btn span {
  display: inline-flex;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: 0.5s ease-in-out;
  transition-property: max-width;
}
section#certificates .project .content .options .btn:hover svg {
  opacity: 0;
  transform: scale(0, 0);
  height: 0;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  section#certificates .project .content .options .btn:hover svg {
    width: 0;
  }
}
section#certificates .project .content .options .btn:hover span {
  max-width: 10rem;
}
section#certificates .project .content .slider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out;
}
section#certificates .project .content .slider[opened] {
  transform: translateY(0);
}
section#certificates .project .content .slider .title .close-btn-wrapper {
  padding-right: 1rem;
}
section#certificates .project .content .slider .title .close-btn-wrapper .close > svg {
  width: 0.75rem;
  height: auto;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  section#certificates .project .content .slider .title .close-btn-wrapper .close {
    height: 0;
    width: 1.1rem;
    padding-top: 1.1rem;
  }
  section#certificates .project .content .slider .title .close-btn-wrapper .close > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
section#certificates .project .content .slider .body .details {
  padding-left: 1rem;
}
section#education {
  margin-top: -12rem;
}
section#education .card.education {
  animation: fade-in 1s;
  animation-play-state: running;
}
section#education .card.education.preload {
  animation-play-state: paused;
}
@media all and (max-width: 767.98px) {
  section#education .card.education .content .header > :not(:last-child), section#education .card.education .content .header .about > :not(:last-child) {
    margin-bottom: 1rem;
  }
}
section#education .card.education .content .header .icon {
  height: auto;
  margin-right: 1rem;
  width: 3rem;
}
@media all and (max-width: 767.98px) {
  section#education .card.education .content .header .icon {
    margin-right: 0;
  }
}
@media all and (min-width: 576px) {
  section#education .card.education .content .header .icon {
    width: 3.75rem;
  }
}
@media all and (min-width: 768px) {
  section#education .card.education .content .header .icon {
    width: 3rem;
  }
}
section#education .card.education .content .header .icon > img {
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
section#education .card.education .content .progress {
  padding-top: 2.5rem;
}
section#education .card.education .content .progress .progress-bar {
  margin-top: 0;
  margin-bottom: 0;
}
@media all and (max-width: 767.98px) {
  section#education .card.education .content .progress .progress-bar .marker.completed {
    display: none;
  }
}
section#education .card.education .content .info .courses ul {
  padding-left: 0;
  list-style-position: inside;
}
section#education .card.education .content .info .courses ul > li {
  padding: 0 1rem;
}
section#connect .direct-connect .form-container {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
section#connect .direct-connect .form-container form input, section#connect .direct-connect .form-container form textarea {
  display: block;
  width: 100%;
  outline: none;
  border: none;
  padding: 0.75rem 1rem;
  margin: 0.5rem auto;
  border-radius: 0;
  background: #222636;
  color: white;
  font-family: inherit;
  font-size: 1rem;
}
@media all and (max-width: 575.98px) {
  section#connect .direct-connect .form-container form input, section#connect .direct-connect .form-container form textarea {
    font-size: 0.875rem;
  }
}
section#connect .direct-connect .form-container form input:focus, section#connect .direct-connect .form-container form textarea:focus {
  outline: none;
}
section#connect .direct-connect .form-container form textarea {
  resize: vertical;
}
section#connect .direct-connect .form-container form img.formspree {
  width: auto;
  opacity: 0.35;
  -webkit-user-drag: none;
  height: 0.875rem;
}
@media all and (max-width: 575.98px) {
  section#connect .direct-connect .form-container form img.formspree {
    height: 0.75rem;
  }
}
section#connect .footer {
  color: rgba(255, 255, 255, 0.35);
}
section#connect .footer .logo {
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
  opacity: 0.35;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../images/Logo/Mono.svg");
}
@media all and (max-width: 575.98px) {
  section#connect .footer .logo {
    width: 2rem;
    height: 2rem;
  }
}
section#connect .footer .social-icons .social > .btn {
  width: 2rem;
  height: 2rem;
}
@media all and (max-width: 575.98px) {
  section#connect .footer .social-icons .social > .btn {
    width: 1.5rem;
    height: 1.5rem;
  }
}
section#connect .footer .social-icons .social > .btn > svg {
  height: 100%;
  width: auto;
}
section#connect .footer .note .react-icon {
  animation: react-spin 5s linear infinite;
}
@keyframes react-spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
section#experience .card.experience {
  animation: fade-in 1s;
  animation-play-state: running;
}
section#experience .card.experience.preload {
  animation-play-state: paused;
}
section#experience .card.experience .content .header {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
@media all and (max-width: 767.98px) {
  section#experience .card.experience .content .header {
    flex-wrap: wrap;
  }
  section#experience .card.experience .content .header > :not(:last-child) {
    margin-bottom: 1rem;
  }
}
section#experience .card.experience .content .header .icon {
  flex: 0 0 auto;
  height: auto;
  margin-right: 1rem;
  min-width: 3rem;
  width: 3rem;
}
@media all and (max-width: 767.98px) {
  section#experience .card.experience .content .header .icon {
    margin-right: 0;
  }
}
@media all and (min-width: 576px) {
  section#experience .card.experience .content .header .icon {
    width: 3.75rem;
  }
}
@media all and (min-width: 768px) {
  section#experience .card.experience .content .header .icon {
    width: 3rem;
  }
}
section#experience .card.experience .content .header .icon img {
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  user-select: none;
}
section#experience .card.experience .content .header .small {
  color: #6A6A87;
  font-weight: 400;
  font-style: italic;
  font-size: 0.75rem;
}
@media all and (max-width: 575.98px) {
  section#experience .card.experience .content .header .small {
    font-size: 0.5rem;
  }
}
section#experience .card.experience .content .header .company {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}
@media all and (max-width: 767.98px) {
  section#experience .card.experience .content .header .company {
    align-items: center;
    text-align: center;
  }
}
section#experience .card.experience .content .header .company .name {
  color: #3C3C60;
  transition: color 0.2s;
}
section#experience .card.experience .content .header .company .name:hover {
  color: #654AA5;
}
section#experience .card.experience .content .header .role {
  justify-self: flex-end;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
}
@media all and (max-width: 767.98px) {
  section#experience .card.experience .content .header .role {
    align-items: center;
    text-align: center;
  }
}
section#experience .card.experience .content .info {
  padding: 1rem 2rem;
}
section#experience .card.experience .content .info .description {
  padding-left: 1rem;
  border-left: 0.25rem solid #297eab;
}
section#experience .card.experience .content .info .job {
  padding-left: 1rem;
}
section#projects .projects-container > * {
  animation: fade-in 1s;
  animation-play-state: running;
  position: relative;
}
section#projects .projects-container > *.preload {
  animation-play-state: paused;
}
section#projects .award {
  position: absolute;
  top: -1rem;
  right: -1rem;
  z-index: 1;
}
section#projects .award:hover img {
  transform: translateY(-2px) scale(1.05, 1.05);
}
section#projects .award img {
  height: 6rem;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.2s ease-in-out;
}
section#projects .project {
  width: 100%;
  height: 100%;
}
section#projects .project .content .options {
  transform: translateZ(1px);
}
section#projects .project .content .options .btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
section#projects .project .content .options .btn svg {
  height: 1.1rem;
  width: auto;
  transition: 0.5s ease-in-out;
  transition-property: opacity, transform, height, width;
}
@media all and (max-width: 575.98px) {
  section#projects .project .content .options .btn svg {
    height: 0.85rem;
  }
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  section#projects .project .content .options .btn svg {
    width: 1.5rem;
  }
}
section#projects .project .content .options .btn span {
  display: inline-flex;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: 0.5s ease-in-out;
  transition-property: max-width;
}
section#projects .project .content .options .btn:hover svg {
  opacity: 0;
  transform: scale(0, 0);
  height: 0;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  section#projects .project .content .options .btn:hover svg {
    width: 0;
  }
}
section#projects .project .content .options .btn:hover span {
  max-width: 10rem;
}
section#projects .project .content .slider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out;
}
section#projects .project .content .slider[opened] {
  transform: translateY(0);
}
section#projects .project .content .slider .title .close-btn-wrapper {
  padding-right: 1rem;
}
section#projects .project .content .slider .title .close-btn-wrapper .close > svg {
  width: 0.75rem;
  height: auto;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  section#projects .project .content .slider .title .close-btn-wrapper .close {
    height: 0;
    width: 1.1rem;
    padding-top: 1.1rem;
  }
  section#projects .project .content .slider .title .close-btn-wrapper .close > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
section#projects .project .content .slider .body .details {
  padding-left: 1rem;
}
section#skills ul.hex-grid {
  list-style: none;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
}
section#skills .skill {
  animation: fade-in 1s;
  animation-play-state: running;
  position: relative;
  flex: 0;
  height: 0px;
}
section#skills .skill.preload {
  animation-play-state: paused;
}
@media all and (max-width: 575.98px) {
  section#skills .skill {
    min-width: 33.3333333333%;
    padding-top: 28.8675134667%;
  }
  section#skills .skill:nth-child(6n+1) {
    left: -8.3333333333%;
  }
  section#skills .skill:nth-child(6n+2) {
    left: -8.3333333333%;
  }
  section#skills .skill:nth-child(6n+3) {
    left: -8.3333333333%;
  }
  section#skills .skill:nth-child(6n+4) {
    left: 8.3333333333%;
  }
  section#skills .skill:nth-child(6n+5) {
    left: 8.3333333333%;
  }
  section#skills .skill:nth-child(6n+6) {
    left: 8.3333333333%;
  }
}
@media all and (min-width: 576px) {
  section#skills .skill {
    min-width: 16.6666666667%;
    padding-top: 14.4337567333%;
  }
  section#skills .skill:nth-child(12n+1) {
    left: -4.1666666667%;
  }
  section#skills .skill:nth-child(12n+2) {
    left: -4.1666666667%;
  }
  section#skills .skill:nth-child(12n+3) {
    left: -4.1666666667%;
  }
  section#skills .skill:nth-child(12n+4) {
    left: -4.1666666667%;
  }
  section#skills .skill:nth-child(12n+5) {
    left: -4.1666666667%;
  }
  section#skills .skill:nth-child(12n+6) {
    left: -4.1666666667%;
  }
  section#skills .skill:nth-child(12n+7) {
    left: 4.1666666667%;
  }
  section#skills .skill:nth-child(12n+8) {
    left: 4.1666666667%;
  }
  section#skills .skill:nth-child(12n+9) {
    left: 4.1666666667%;
  }
  section#skills .skill:nth-child(12n+10) {
    left: 4.1666666667%;
  }
  section#skills .skill:nth-child(12n+11) {
    left: 4.1666666667%;
  }
  section#skills .skill:nth-child(12n+12) {
    left: 4.1666666667%;
  }
}
@media all and (min-width: 768px) {
  section#skills .skill {
    min-width: 12.5%;
    padding-top: 10.82531755%;
  }
  section#skills .skill:nth-child(16n+1) {
    left: -3.125%;
  }
  section#skills .skill:nth-child(16n+2) {
    left: -3.125%;
  }
  section#skills .skill:nth-child(16n+3) {
    left: -3.125%;
  }
  section#skills .skill:nth-child(16n+4) {
    left: -3.125%;
  }
  section#skills .skill:nth-child(16n+5) {
    left: -3.125%;
  }
  section#skills .skill:nth-child(16n+6) {
    left: -3.125%;
  }
  section#skills .skill:nth-child(16n+7) {
    left: -3.125%;
  }
  section#skills .skill:nth-child(16n+8) {
    left: -3.125%;
  }
  section#skills .skill:nth-child(16n+9) {
    left: 3.125%;
  }
  section#skills .skill:nth-child(16n+10) {
    left: 3.125%;
  }
  section#skills .skill:nth-child(16n+11) {
    left: 3.125%;
  }
  section#skills .skill:nth-child(16n+12) {
    left: 3.125%;
  }
  section#skills .skill:nth-child(16n+13) {
    left: 3.125%;
  }
  section#skills .skill:nth-child(16n+14) {
    left: 3.125%;
  }
  section#skills .skill:nth-child(16n+15) {
    left: 3.125%;
  }
  section#skills .skill:nth-child(16n+16) {
    left: 3.125%;
  }
}
section#skills .skill .hexagon-container {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 0.1rem;
  pointer-events: auto;
}
section#skills .skill .hexagon-container > svg {
  display: block;
  transition: color 0.3s, opacity 0.3s, transform 0.3s;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  section#skills .skill .hexagon-container {
    height: 0px;
    margin-bottom: 5px;
    padding-top: 110%;
  }
  section#skills .skill .hexagon-container > svg.hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
section#skills .skill .hexagon-container > svg.icon {
  animation: fade-in 1s;
  animation-play-state: running;
  color: white;
  position: absolute;
  height: auto;
  width: 75%;
  padding: 10%;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) translateZ(0) scale(1, 1);
  -webkit-user-drag: none;
  user-select: none;
}
section#skills .skill .hexagon-container > svg.icon.preload {
  animation-play-state: paused;
}
section#skills .skill .hexagon-container .tooltip.top {
  transition: 0.3s;
}
section#skills .skill .hexagon-container:hover .tooltip.top, section#skills .skill .hexagon-container:active .tooltip.top, section#skills .skill .hexagon-container:focus .tooltip.top {
  bottom: 90%;
}
section#skills .skill .hexagon-container:hover > svg.hexagon, section#skills .skill .hexagon-container:active > svg.hexagon, section#skills .skill .hexagon-container:focus > svg.hexagon {
  opacity: 0;
  transform: scale(0, 0);
}
section#skills .skill .hexagon-container:hover > svg.icon, section#skills .skill .hexagon-container:active > svg.icon, section#skills .skill .hexagon-container:focus > svg.icon {
  color: inherit;
}
section#skills ul.hex-grid:not(:last-child) + * {
  margin-top: 2.5rem;
}
section#skills .skills-filter {
  margin: 0 auto 1rem;
  width: 100%;
  max-width: 320px;
}
section#skills.has-visual-tags::before {
  z-index: 1;
  content: "<Skills>";
}
section#skills.has-visual-tags::after {
  z-index: 1;
  content: "</Skills>";
}

section#experience.has-visual-tags::before {
  z-index: 1;
  content: "<Experience>";
}
section#experience.has-visual-tags::after {
  z-index: 1;
  content: "</Experience>";
}

section#projects.has-visual-tags::before {
  z-index: 1;
  content: '<Projects class="recent">';
}
@media all and (max-width: 575.98px) {
  section#projects.has-visual-tags::before {
    content: "<Projects>";
  }
}
section#projects.has-visual-tags::after {
  z-index: 1;
  content: "</Projects>";
}

section#education.has-visual-tags::before {
  z-index: 1;
  content: "<Education>";
}
section#education.has-visual-tags::after {
  z-index: 1;
  content: "</Education>";
}

section#certificates.has-visual-tags::before {
  z-index: 1;
  content: "<Certificates>";
}
section#certificates.has-visual-tags::after {
  z-index: 1;
  content: "</Certificates>";
}

section {
  width: 100%;
  position: relative;
}

.section {
  padding: 5rem 1.5rem;
  position: relative;
}
.section.is-theme-primary.is-wavy-top::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  background-size: 100% 100%;
  background-image: url("../images/Dividers/Wavy.svg");
  background-position: center center;
  bottom: calc(100% - 10px);
  transform: rotate(180deg);
}
.section.is-theme-primary.is-wavy-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  background-size: 100% 100%;
  background-image: url("../images/Dividers/Wavy.svg");
  background-position: center center;
  top: calc(100% - 10px);
}
.section.is-theme-dark.is-round-top::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  background-size: 100% 100%;
  background-image: url("../images/Dividers/Round.svg");
  background-position: center center;
  bottom: calc(100% - 10px);
  transform: rotate(180deg);
}
.section.has-subsections {
  padding: 0;
}
.section.has-subsections .section {
  padding: 2rem 1.5rem;
}
.section.is-long {
  padding-bottom: 12rem !important;
}
.section.has-no-top-padding {
  padding-top: 0 !important;
}
.section.has-no-bottom-padding {
  padding-bottom: 0 !important;
}
.section.has-visual-tags {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.section.has-visual-tags > * {
  width: 100%;
}
.section.has-visual-tags::before, .section.has-visual-tags::after {
  position: relative;
  font-family: "Kalam";
  font-weight: 700;
  margin: 0 auto;
  opacity: 0.5;
  width: 100%;
  max-width: 1000px;
  user-select: none;
  font-size: 1.25rem;
}
@media all and (max-width: 575.98px) {
  .section.has-visual-tags::before, .section.has-visual-tags::after {
    font-size: 1rem;
  }
}
.section.has-visual-tags::before {
  content: "<Section>";
  top: -1rem;
  text-align: left;
}
.section.has-visual-tags::after {
  content: "</Section>";
  top: 1rem;
  text-align: right;
}
.section .extra-bottom {
  margin-bottom: 2.5rem !important;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}