html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Regular.eot');
    src: local('Euclid Circular A Regular'), local('EuclidCircularA-Regular'),
        url('../fonts/EuclidCircularA-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-Regular.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Regular.woff') format('woff'),
        url('../fonts/EuclidCircularA-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Semibold.eot');
    src: local('Euclid Circular A Semibold'), local('EuclidCircularA-Semibold'),
        url('../fonts/EuclidCircularA-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-Semibold.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Semibold.woff') format('woff'),
        url('../fonts/EuclidCircularA-Semibold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Medium.eot');
    src: local('Euclid Circular A Medium'), local('EuclidCircularA-Medium'),
        url('../fonts/EuclidCircularA-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-Medium.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Medium.woff') format('woff'),
        url('../fonts/EuclidCircularA-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Bold.eot');
    src: local('Euclid Circular A Bold'), local('EuclidCircularA-Bold'),
        url('../fonts/EuclidCircularA-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-Bold.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Bold.woff') format('woff'),
        url('../fonts/EuclidCircularA-Bold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

html, body {
  overflow: hidden;
}

body {
  font-family: 'Euclid Circular A', 'Helvetica Neue', helvetica, arial, sans-serif;
	font-weight: normal;
  font-size: 20px;
  line-height: 1.75;
  color: #202124;
  background-color: #fff;
}

body.movin,
body.movin * {
  cursor: col-resize !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

* {
  font-family: 'Euclid Circular A', 'Helvetica Neue', helvetica, arial, sans-serif;

	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

  cursor: default;
}

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background-color: #fff;
}

.overflow-hidden {
  overflow: hidden;
}

.clear {
  clear: both;
}

.none {
  display: none !important;
}

.hidden {
  opacity: 0;
  transition-property: none;
}

.relative {
  position: relative;
}

a {
  color: #30488E;
  cursor: pointer;
}
@media (hover: hover) {
  a:hover {
    color: #33336B;
  }
}

b, strong, .bold {
  font-weight: 900;
}

i, .italic {
  font-style: italic;
}

h1, h2, h3,
.h1, .h2, .h3 {
  font-family: 'Euclid Circular A', 'helvetica neue', helvetica, arial, sans-serif;
  font-size: 3.5em;
  line-height: 1.142857;
  font-weight: bold;
  margin-bottom: 0.3em;
}
h1, .h1 {
  letter-spacing: -0.05em;
  margin-bottom: 0.15em;
}
h2, .h2 {
  font-size: 2em;
  line-height: 1.25;
  letter-spacing: -0.04em;
}
h3,
.h3,
.h-small h2,
.h-large h4 {
  font-size: 1.25em;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
h4, .h4 {
  font-family: 'Euclid Circular A';
  font-size: 1em;
  font-weight: bold;
  margin: 0.7em 0 0.2em 0;
}

p {
  margin-bottom: 0.5em;
}
p.padding-right {
  padding-right: 3em;
}

ul {
  list-style-position: outside;
  padding: 0.5em 0 0.5em 1.1em;
}

ul li {
  list-style-type: disc;
  margin-bottom: 0.2em;
}

a {
  -webkit-touch-callout: none;
}

.scroll.default,
.scroll.delay {
  transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.1s;
  transition-property: transform, opacity;
  transform: translateY(0);
  opacity: 1;
}
.scroll.delay {
  transition-delay: 0.5s;
}
.scroll.default.above,
.scroll.delay.above {
  opacity: 1;
  transform: translateY(0);
}
.scroll.default.below {
  transform: translateY(8vw);
  opacity: 0;
}
.scroll.delay.below {
  transform: translateY(8em);
}

.inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  padding: 0 4em;
  margin-right: auto;
  margin-left: auto;
}
.inner.margin-top {
  margin-top: 6em;
}
.inner.margin-top-small {
  margin-top: 3.5em;
}

.main-content-c {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
}

.main-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  background-color: #fff;
  transform: translateX(0);
  transition: all 0.8s ease;
  transition-property: opacity, transform;
  overflow-x: hidden;
}
.main-content.page-section {
  z-index: 3;
  transition: all 0.4s ease-in-out;
  transform: translateY(0) scale(1);
  box-shadow: 0 1em 3em rgba(0, 0, 0, 0.5);
}
.main-content.fade-in {
  opacity: 0;
}
.main-content.instant {
  transition-duration: 0s;
}
.main-content.start.fade-out,
.main-content.page-module.fade-out {
  opacity: 0;
  transform: translateX(-25vw);
}
.main-content.page-module.fade-in {
  transform: translateX(50vw);
}

.main-content.page-section.fade-out {
  opacity: 0;
  transform: translateY(-5vh) scale(0.9);
}
.main-content.page-section.fade-in {
  transform: translateY(5vh) scale(0.9);
}


button.scroll-hint {
  position: fixed;
  font-size: 1em;
  z-index: 12;
  right: 0;
  bottom: 3.5em;
  left: 0;
  margin: auto;
  padding: 0;
  width: 2.2em;
  height: 2.2em;
  text-align: center;
  border: 0.075em #fff solid;
  border-radius: 50%;
  background-color: transparent !important;
  animation: hint 1.7s ease-in-out infinite;
  transition: all 0.5s ease-in-out;
  transition-property: opacity, background-color;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
button.scroll-hint * {
  cursor: pointer;
}
button.scroll-hint.inverted {
  border-color: #272727;
}
button.scroll-hint.small {
  bottom: 2em;
}

.show-scroll-hint button.scroll-hint {
  opacity: 1;
  transition-duration: 0.75s;
  pointer-events: auto;
}
.instant-hide button.scroll-hint {
  transition-duration: 0s;
}

button.scroll-hint svg {
  width: 2.05em;
  height: 2.05em;
  fill: #fff;
  animation: hint-icon 1.7s ease-in-out infinite;
  pointer-events: none;
}
button.scroll-hint.inverted svg {
  fill: #272727;
}

@media (hover: hover) {
  button.scroll-hint:hover {
    animation: none;
    transform: translateY(0.3125em);
    transition-duration: 0.1s;
  }

  button.scroll-hint:hover svg {
    animation: none;
  }
}

button.scroll-hint.touched {
  animation: none;
  transform: translateY(0.3125em);
  transition-duration: 0s;
}

button.scroll-hint.touched svg {
  animation: none;
}

@keyframes hint {
	0% {
		transform: translateY(0);
	}
  20% {
    transform: translateY(0.625em);
	}
  100% {
    transform: translateY(0);
	}
}
@keyframes hint-icon {
	0% {
		transform: translateY(-0.1em);
	}
  20% {
    transform: translateY(0.1em);
	}
  100% {
    transform: translateY(-0.1em);
	}
}

@media (min-width: 1271px) and (max-width: 1439px) {
  body {
    font-size: 1.389854vw;
  }
}

@media (max-width: 1270px) {
  body {
    font-size: 17.64705882px;
  }
}

@media (max-width: 374px) {
  body {
    font-size: 14px;
  }
}

@media (min-width: 2000px) {
  body {
    font-size: 1vw;
  }

  .inner {
    max-width: 84.705882vw;
  }
}

@media (max-width: 900px) {
  h1, .h1 {
    font-size: 2.5em;
    letter-spacing: -0.04em;
  }
  h2, .h2 {
    font-size: 1.75em;
  }
}

@media (max-width: 750px) {
  h1, .h1 {
    font-size: 2.25em;
  }
  h2, .h2 {
    font-size: 1.5em;
  }
}.white {
  color: #fff;
}

.black {
  color: #272727;
}

.bg-bluegrey {
  background-color: #153C4E;
}

.bg-blueclear {
  background-color: #30488E;
}

.bg-bluesunset {
  background-color: #33336B;
}

.bg-bluenight {
  background-color: #27234A;
}

.bg-white {
  background-color: #fff;
}

.bg-greywarm {
  background-color: #F7F5F1;
}

.bg-teal {
  background-color: #045C6E;
}

.bg-violetdeep {
  background-color: #4D345F;
}button,
a.button {
  display: inline-block;
  font-family: 'Euclid Circular A';
  font-size: 0.75em;
  line-height: 1.222222;
  margin: 0 0 0.3em 0;
  padding: 1em 1.5em 1em;
  background-color: #272727;
  border: 1px #272727 solid;
  border-radius: 0.8em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  transition-property: opacity, transform, background-color, box-shadow;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

button.inverted,
a.button.inverted {
  background-color: #fff;
  border: 1px #fff solid;
  color: #27234A;
}

button.with-border,
a.button.with-border {
  background-color: #fff;
  border: 2px #272727 solid;
  padding: 0.93333333em 1.43333333em 0.93333333em;
  color: #272727;
}

button .border,
a.button .border {
  display: block;
  width: 0;
  height: 1px;
  margin: 1px auto 0 auto;
  background-color: #fff;
  transition: width 0.3s ease-in-out;
}

button.inverted .border,
a.button.inverted .border,
button.simple .border,
a.button.simple .border {
  background-color: #27234A;
}

button.simple.inverted .border,
a.button.simple.inverted .border {
  background-color: #fff;
}

button.primary,
a.button.primary {
  margin-right: 0;
  margin-left: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, margin 0.5s ease, padding 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
button.primary[disabled],
a.button.primary[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

button.simple,
a.button.simple {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #27234A;
  padding: 0.5em;
  margin: 0.5em 0;
}

button.simple.inverted,
a.button.simple.inverted {
  color: #fff;
}

button.wider,
a.button.wider {
  padding-right: 2.5em;
  padding-left: 2.5em;
}

button.arrow svg,
a.arrow svg {
  width: 1.08333333em;
  height: 0.67708333em;
  margin-left: 1.5em;
  fill: #fff;
}
button.arrow svg.lock,
a.arrow svg.lock {
  width: 1em;
  height: 1em;
}
button.download svg,
a.download svg {
  width: 0.8em;
  height: 1.06666667em;
  margin-left: 1em;
  fill: #fff;
}
button.inverted.arrow svg,
a.inverted.arrow svg {
  fill: #27234A;
}

button:focus,
a.button:focus {
  transition-duration: 0.1s;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

button[disabled],
a.button[disabled] {
  pointer-events: none;
}

button.fade,
a.button.fade {
  opacity: 0;
}

button.back,
a.button.back {
  font-size: 1em;
  background-color: transparent !important;
  line-height: 1.2;
  border: 0;
  padding: 0;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

button.back > span,
a.button.back > span {
  display: inline;
}

button.back > span:nth-child(2),
a.button.back > span:nth-child(2) {
  display: block;
  text-align: center;
}

button.back > span:nth-child(2) > span:first-child,
a.button.back > span:nth-child(2) > span:first-child {
  font-size: 0.75em;
  font-weight: normal;
}

.inverted button.back > span:nth-child(2) > span:first-child,
.inverted a.button.back > span:nth-child(2) > span:first-child {
  color: #272727;
}

button.back > span:nth-child(1),
a.button.back > span:nth-child(1) {
  display: flex;
  width: 2em;
  height: 2em;
  position: relative;
  align-items: center;
  justify-content: center;
  margin-right: 0.8em;
}

button.back > span:nth-child(1) > span,
a.button.back > span:nth-child(1) > span {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 2em 2em;
  background-position: 50% 50%;
  border-radius: 1em;
  transition: width 0.3s ease-in-out;
}
.inverted button.back > span:nth-child(1) > span,
.inverted a.button.back > span:nth-child(1) > span {
  background-color: #272727;
}


button.back > span:nth-child(1) > span,
a.button.back > span:nth-child(1) > span {
  background-image: url('../images/back-arrow.svg');
}
.inverted button.back > span:nth-child(1) > span,
.inverted a.button.back > span:nth-child(1) > span {
  background-image: url('../images/back-arrow-inverted.svg');
}

button.fwd,
button.bwd {
  width: 1.4em;
  height: 1.4em;
  font-size: 1em;
  background-repeat: no-repeat;
  background-color: #272727;
  background-size: 1.4em 1.4em;
  margin-right: 0.9em;
  line-height: 1.2;
  border: 0;
  padding: 0;
  pointer-events: auto;
}
button.fwd:last-child,
button.bwd:last-child {
  margin-right: 0;
}

button.fwd[disabled],
button.bwd[disabled] {
  opacity: 0.2;
  pointer-events: none;
}

button.fwd {
  background-image: url('../images/forward-arrow.svg');
}

button.bwd {
  background-image: url('../images/backward-arrow.svg');
}


button.close,
a.button.close {
  position: absolute;
  font-size: 1em;
  line-height: 1.2;
  background-color: transparent;
  border: 0;
  pointer-events: auto;
  top: 3.3em;
  right: 3.3em;
  height: 2em;
  padding: 0.25em 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

button.close > span,
a.button.close > span {
  display: inline;
}

button.close > span:nth-child(1),
a.button.close > span:nth-child(1) {
  margin-right: 0.8em;
}

button.close > span:nth-child(1) > span:first-child,
a.button.close > span:nth-child(1) > span:first-child {
  font-size: 0.75em;
  font-weight: normal;
}

button.close > span:nth-child(2),
a.button.close > span:nth-child(2) {
  display: flex;
  width: 2em;
  height: 2em;
  position: relative;
  align-items: center;
  justify-content: center;
}

button.close > span:nth-child(2) > span,
a.button.close > span:nth-child(2) > span {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: #272727;
  background-repeat: no-repeat;
  background-size: 2em 2em;
  background-position: 50% 50%;
  border-radius: 1em;
  transition: width 0.3s ease-in-out;
}

button.close > span:nth-child(2) > span,
a.button.close > span:nth-child(2) > span {
  background-image: url('../images/close.svg');
}
button.close.dark > span:nth-child(2) > span,
a.button.close.dark > span:nth-child(2) > span {
  background-image: url('../images/close-dark.svg');
}
button.close.inverted > span,
a.button.close.inverted > span {
  transition: color 0.3s ease-in-out;
  color: #272727;
}
button.close.inverted .border,
a.button.close.inverted .border {
  transition: all 0.3s ease-in-out;
  transition-property: width, background-color;
  background-color: #272727;
}

button.close.focus > span:nth-child(2) > span,
a.button.close:focus > span:nth-child(2) > span {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

button.back:focus,
a.button.back:focus,
button.close:focus,
a.button.close:focus {
  box-shadow: none !important;
}

button.back.focus > span:nth-child(1) > span,
a.button.back:focus > span:nth-child(1) > span {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

button.back .border,
a.button.back .border,
button.close .border,
a.button.close .border {
  display: block;
  width: 0;
  height: 1px;
  margin: 1px auto 0 auto;
  background-color: #fff;
  transition: width 0.3s ease;
}

.inverted button.back .border,
.inverted a.button.back .border {
  background-color: #272727;
}

button.link,
a.button.link {
  color: #30488E !important;
  background-color: transparent !important;
  border: 0 !important;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 0.11764706em;
  padding: 0;
}
.white button.link,
.white a.button.link {
  color: #fff !important;
}
.black button.link,
.black a.button.link {
  color: #30488E !important;
}
button.link.regular,
a.button.link.regular {
  font-weight: normal;
  text-decoration-thickness: 0.05882353em;
}

button.step {
  font-size: 1em;
  width: 2em;
  height: 2em;
  padding: 0;
  background-color: #272727;
  border: 0.1em #272727 solid;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.45em;
}
button.step:last-child {
  margin-right: 0;
}
button.step[disabled] {
  background-color: transparent;
  border-color: #cbcac7;
  pointer-events: none;
}
button.step svg {
  width: 0.81em;
  height: 0.515em;
  fill: #fff;
  transition: fill 0.3s ease-in-out;
}
button.step[disabled] svg {
  fill: #cbcac7;
}

button.expand {
  font-size: 1em;
  width: 2.45em;
  height: 2.45em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #272727;
  background-image: url('../images/expand.svg');
  background-repeat: no-repeat;
  background-size: 2.45em 2.45em;
  background-position: 50% 50%;
  margin: 0;
}
.inverted button.expand {
  background-color: #fff;
  background-image: url('../images/expand-dark.svg');
}
.completed button.expand {
  background-image: url('../images/icon-completed-2.svg');
}
.inverted .completed button.expand {
  background-image: url('../images/icon-completed-2-dark.svg');
}
.c-word-cloud .w-c .b-c .completed.fade {
  animation: none;
  opacity: 0;
}

button.close-modal {
  font-size: 1em;
  background-color: transparent;
  border: 0;
  width: 2em;
  height: 2em;
  margin: 0;
  padding: 0;
  background: transparent url('../images/close-modal.svg') no-repeat;
  background-size: 2em 2em;
}
button.close-modal.inverted {
  background-image: url('../images/close-modal-inverted.svg');
}

button *,
a.button * {
  cursor: pointer;
  pointer-events: none;
}

.button.disabled {
  cursor: default;
  pointer-events: none;
}

.scroll-icon-c {
  position: absolute;
  width: 2.05em;
  height: 2.05em;
  right: 0;
  bottom: 1.5em;
  left: 0;
  margin: auto;
}
.scroll-icon-c.lower {
  height: 4.5em;
  bottom: -2em;
}
.scroll-icon-c.less-height {
  height: 1em;
  bottom: 2.5em;
}

button.scroll-icon {
  font-size: 1em;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: 2.05em;
  height: 2.05em;
  border-radius: 1.025em;
  border: 0.075em #fff solid;
  animation: hint 1.7s ease-in-out infinite;
  transition-property: opacity, transform, background-color, box-shadow, margin, height;
}

button.scroll-icon svg {
  width: 1.9em;
  height: 1.9em;
  fill: #fff;
  animation: hint-icon 1.7s ease-in-out infinite;
}

@keyframes hint {
	0% {
		transform: translateY(-0.3125em);
	}
  20% {
    transform: translateY(0.3125em);
	}
  100% {
    transform: translateY(-0.3125em);
	}
}
@keyframes hint-icon {
	0% {
		transform: translateY(-0.15em);
	}
  20% {
    transform: translateY(0.15em);
	}
  100% {
    transform: translateY(-0.15em);
	}
}

@media (hover: hover) {
  button:hover,
  a.button:hover {
    transition-duration: 0.1s;
  }

  button.primary:hover,
  a.button.primary:hover {
    margin-right: -0.75em;
    margin-left: -0.75em;
    padding-right: 2.25em;
    padding-left: 2.25em;
  }

  button.wider:hover,
  a.button.wider:hover {
    padding-right: 3.25em !important;
    padding-left: 3.25em !important;
  }

  button:hover .border,
  a.button:hover .border {
    width: 100%;
  }

  button.back:hover > span:nth-child(1) > span,
  a.button.back:hover > span:nth-child(1) > span {
    transition-duration: 0.2s;
    width: 2.5em;
  }

  button.close:hover > span:nth-child(2) > span,
  a.button.close:hover > span:nth-child(2) > span {
    transition-duration: 0.2s;
    width: 2.5em;
  }

  button.scroll-icon:hover {
    animation: none;
    margin-top: -0.25em;
    height: 2.55em;
    background-color: rgba(0, 0, 0, 0.5);
  }

  button.scroll-icon:hover svg {
    animation: none;
    transform: translateY(0.1em);
  }

  button.expand:hover {
    transition-duration: 0.1s;
    transform: scale(1.1);
  }

  button.fwd:hover,
  button.bwd:hover {
    transform: scale(1.15);
  }
}

button.touched,
a.button.touched {
  transition-duration: 0s;
}

button.primary.touched,
a.button.primary.touched,
button.primary:focus,
a.button.primary:focus {
  margin-right: -0.75em;
  margin-left: -0.75em;
  padding-right: 2.25em;
  padding-left: 2.25em;
}

button.wider.touched,
a.button.wider.touched,
button.wider:focus,
a.button.wider:focus {
  padding-right: 3.25em !important;
  padding-left: 3.25em !important;
}

button.touched .border,
a.button.touched .border,
button:focus .border,
a.button:focus .border {
  width: 100%;
}

button.back.touched > span:nth-child(1) > span,
a.button.back.touched > span:nth-child(1) > span,
button.back:focus > span:nth-child(1) > span,
a.button.back:focus > span:nth-child(1) > span {
  transition-duration: 0.2s;
  width: 2.5em;
}

button.close.touched > span:nth-child(2) > span,
a.button.close.touched > span:nth-child(2) > span,
button.close:focus > span:nth-child(2) > span,
a.button.close:focus > span:nth-child(2) > span {
  transition-duration: 0.2s;
  width: 2.5em;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

button.scroll-icon.touched,
button.scroll-icon:focus {
  animation: none;
  margin-top: -0.25em;
  height: 2.55em;
  background-color: rgba(0, 0, 0, 0.5);
}

button.scroll-icon.touched svg,
button.scroll-icon:focus svg {
  animation: none;
  transform: translateY(0.1em);
}

button.expand.touched,
button.expand:focus {
  transition-duration: 0.1s;
  transform: scale(1.1);
}

button.fwd.touched,
button.bwd.touched {
  transform: scale(1.15);
}

button.link:focus,
.button.link:focus {
  box-shadow: none;
  background-color: #CAD7FB !important;
  border-radius: 0;
}

@media (max-width: 1100px) {
  button.close,
  a.button.close {
    top: 2.5em;
    right: 40px;
  }
}

@media (max-width: 650px) {
  button.close,
  a.button.close {
    top: 30px;
    right: 20px;
  }
}.start .top-box {
  position: relative;
  width: 100vw;
  border-radius: 1.5em;
  overflow: hidden;
}

.start .top-box img {
  position: absolute;
  width: 100vw;
  height: 100%;
  object-fit: cover;
}

.start .top-box .area {
  padding-top: 2.25em;
  padding-bottom: 5em;
}

.start .top-box .logo {
  width: 8.35em;
  height: 1.65em;
  background: transparent url('../images/logo.svg') no-repeat;
  background-size: 8.35em 1.65em;
}

.start .top-box .t-c {
  width: 35.7em;
  padding-top: 1.6em;
}

.start .top-box .b-c {
  display: inline-block;
  margin: 1.8em 0;
}

.start .box-area {
  position: relative;
  width: 100vw;
  padding-top: 3.9em;
}
.start .box-area:last-child {
  padding-bottom: 5em;
}

.start .box-area .image-c {
  position: absolute;
  bottom: 0;
  width: 37.5em;
  height: 25.85em;
  pointer-events: none;
}
.start .box-area .image-left .image-c {
  left: 0;
  transform: translateX(-4em);
}
.start .box-area .image-right .image-c {
  right: 0;
  transform: translateX(3.3em);
}

.start .box-area .image-c img {
  width: 37.5em;
  height: 25.85em;
}

.start .box-area .box {
  width: 100%;
  min-height: 22.85em;
  border-radius: 1.5em;
  padding: 3.75em 4.65em 2.5em;
}

.start .box-area .box .t-c {
  width: 29.45em;
}

.start .box-area .image-left .box .t-c {
  margin-left: 26.25em;
}


.start .box-area .box .b-c {
  display: inline-block;
  margin-top: 1.5em;
}

.start .test-area {
  position: relative;
  width: 100vw;
  padding-top: 8em;
}

.start .test-area .area {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.start .test-area .t-c {
  width: 31.15em;
}

.start .test-area .image {
  width: 29.7em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.start .test-area .image img {
  width: 25.35em;
  height: 20.95em;
}
.start .test-area .b-c {
  display: inline-block;
  margin: 1.8em 0;
}

@media (max-width: 1200px) {
  .start .box-area {
    padding-top: 3em;
  }

  .start .box-area .image-c {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .start .box-area .image-right .image-c {
    justify-content: flex-end;
  }

  .start .box-area .image-c img {
    width: 55vw;
    height: 37.91333333vw;
  }

  .start .box-area .box {
    min-height: 37.91333333vw;
    padding: 2em 5vw 1.5em;
  }

  .start .box-area .box .t-c {
    width: 45vw;
  }

  .start .box-area .image-left .box .t-c {
    margin-left: 40vw;
  }

  .start .box-area .box .b-c {
    margin-top: 1em;
  }

  .start .test-area .b-c {
    margin-top: 1em;
  }
}

@media (max-width: 900px) {
  .start .box-area {
    padding-top: 2em;
  }

  .start .box-area .box .t-c {
    width: 40vw;
  }

  .start .box-area .box .t-c p {
    font-size: 0.85em;
  }

  .start .box-area .image-left .box .t-c {
    margin-left: 38vw;
  }

  .start .test-area .t-c {
    width: 65vw;
  }

  .start .test-area .image {
    width: 30vw;
  }

  .start .test-area .image img {
width: 30vw;
height: 24.79289941vw;
}
}

@media (max-width: 650px) {
  .start .top-box {
    border-radius: 1em;
  }

  .start .top-box .t-c {
    width: 100%;
  }

  .start .box-area .box .t-c,
  .start .box-area .image-left .box .t-c {
    margin-left: 0;
    width: 100%;
  }

  .start .box-area .box {
    border-radius: 1em;
    padding: 1.5em 1.5em 8em 1.5em;
    min-height: auto;
  }

  .start .box-area .box .b-c {
    margin-top: 0.5em;
  }

  .start .test-area .b-c {
    margin-top: 0.5em;
  }

  .start .box-area .image-c img {
    width: 40vw;
    height: 27.57333333vw;
  }

  .start .box-area .image-left .image-c {
    transform: translateX(-1em);
  }

  .start .box-area .image-right .image-c {
    transform: translateX(1em);
  }
}.area {
  position: relative;
  width: 56em;
  margin: 0 auto;
}

.area.max {
  width: 100vw;
}

.area.min {
  width: 50.8em;
}

.area.wide {
  width: 63.5em;
}

.intro {
  pointer-events: none;
}

.intro .t-c {
  width: 50.8em;
  margin: 0 auto 6em;
  padding-top: 8em;
  text-align: center;
}
.intro.sam .t-c {
  margin-bottom: 0;
}

.intro.small .t-c {
  width: 41em;
}

.intro.small .t-c .intro-t {
  pointer-events: auto;
}

.intro .t-c img {
  width: 10.8725em;
  height: 11.446em;
  margin-top: 0.75em;
}

.t-small p,
.t-small ul {
  font-size: 0.85em;
  line-height: 1.47058824;
}

.intro.lower .t-c {
  margin-bottom: 2.5em;
}

.intro .t-c .intro-t p {
  font-size: 2em;
  line-height: 1.25;
  font-weight: bold;
  letter-spacing: -0.02em;
  margin-bottom: 0.55em;
  text-wrap: balance;
}

.info {
  position: relative;
  display: inline-block;
  font-size: 0.75em;
  font-weight: 500;
  color: #272727;
  margin: 0.7em 0;
  pointer-events: auto;
}
.white .info {
  color: #fff;
}

.info::before {
  position: relative;
  display: inline-block;
  content: url('../images/info.svg');
  width: 1.73333em;
  height: 1.73333em;
  margin-right: 0.86667em;
  vertical-align: middle;
}
.white .info::before {
  content: url('../images/info-white.svg');
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100vw;
}

.progressbar {
  position: absolute;
  height: 0.5em;
  top: 0;
  right: 0;
  left: 0;
  background-color: #E3E3E3;
}

.progressbar.white {
  background-color: #fff;
}

.progressbar > div {
  position: absolute;
  width: 0;
  height: 0.5em;
  top: 0;
  left: 0;
  background-color: #33336B;
}
.progressbar.white > div {
  background-color: #045C6E;
}

.progressbar.animate > div {
  transition: width 0.5s ease;
}

.page-header .close-c {
  position: absolute;
  top: 0;
  right: 0;
}

.page-header .back-c {
  position: absolute;
  top: 2.75em;
  left: 2.75em;
}

.section-end,
.section-end > div {
  width: 100vw;
  height: 8em;
}
.section-end {
  overflow: hidden;
}
.section-end > div {
  padding: 0 1.5em;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-end.m0 > div {
  color: #272727;
  background-color: #fff;
}
.section-end.m1 > div {
  background-color: #33336B;
}
.section-end.m2 > div {
  background-color: #045C6E;
}
.section-end.m3 > div {
  background-color: #4D345F;
}
.section-end.m4 > div {
  background-color: #27234A;
}

.section-end > div p {
  font-size: 1.125em;
  line-height: 1.47058824;
}

.section-end > div .b-c {
  margin-left: 1em;
}

.start .box-area .box .t-c h2 .completed,
.start .test-area .t-c h2 .completed {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  margin-left: 0.5em;
  border-radius: 50%;
  background-color: #089086;
  background-image: url('../images/icon-completed.svg');
  background-repeat: no-repeat;
  background-size: 1.2em 1.2em;
  background-position: 50% 50%;
  vertical-align: middle;
  transform: translateY(-0.1em);
}
.start .test-area .t-c h2 .completed {
  margin-left: 0.3em;
}

@media (max-width: 1200px) {
  .area.wide {
    width: calc(100vw - 60px);
  }
}

@media (max-width: 1100px) {
  .area,
  .area.min,
  .area.wide {
    width: calc(100vw - 60px);
  }

  .intro .t-c {
    width: calc(100vw - 100px);
    padding-top: 20vw;
  }

  .page-header .back-c {
    left: 30px;
  }
}

@media (max-width: 900px) {
  .intro .t-c .intro-t p {
    font-size: 1.5em;
  }

  .intro .t-c img {
    width: 20vw;
    height: 21.05495516vw;
    margin-top: 1vw;
  }
}

@media (max-width: 800px) {
  .intro.small .t-c {
    width: calc(100vw - 100px);
  }
}

@media (min-width: 1700px) {
  .area {
    width: 75em !important;
  }

  .area.header {
    width: 67em !important;
  }
}

@media (max-width: 650px) {
  .page-header .back-c {
    top: 30px;
    left: 24px;
  }

  .area,
  .area.min,
  .area.wide {
    width: calc(100vw - 48px);
  }

  .intro .t-c .intro-t p {
    font-size: 1.25em;
  }
}.module {
  width: 100vw;
  min-height: 100vh;
}

.module .header {
  padding-right: 0;
  min-height: 32em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.module .header .t-c {
  width: 27em;
}

.module .header .t-c h1 {
  margin-bottom: 0.4em;
}

.module .header .t-c p {
  font-size: 1.25em;
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: -0.02em;
}

.module .header img {
  width: 32.25em;
  height: 27.15em;
  margin-right: -4.7em;
}

@media (max-width: 1100px) {
  .module .header {
    min-height: 50vw;
  }

  .module .header .t-c {
    width: 40vw;
  }

  .module .header img {
    width: 50vw;
    height: 42.09302326vw;
    margin-right: -5vw;
  }
}

@media (max-width: 900px) {
  .module .header {
    min-height: 70vw;
  }
}

@media (max-width: 650px) {
  .module .header {
    width: calc(100vw - 48px);
    flex-direction: column-reverse;
    padding-bottom: 80px;
  }

  .module .header .t-c {
    width: 100%;
  }

  .module .header img {
    width: 30vw;
    height: 29.46511628vw;
    margin: 80px 0 20px 0;
  }
}.section .header {
  text-align: center;
}

.section .header .t-c {
  width: 50em;
  margin: 0 auto;
  padding-top: 10em;
  text-align: center;
}

.end-margin {
  width: 100%;
  height: 8em;
}

@media (max-width: 900px) {
  .section .header .t-c {
    width: calc(100vw - 100px);
  }
}.modal {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 0;
  overflow-y: auto;
  display: block;
}
.modal.none {
  display: none !important;
}
.modal.show {
  display: block !important;
}

.modal .backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(39, 39, 39, 0.5);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

.modal.show .backdrop {
  opacity: 1;
}

.modal > div:last-child {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.modal.scroll > div:last-child {
  width: auto;
  display: block;
}

.modal .modal-c {
  transition: all 0.5s ease-in-out;
  transition-property: transform, opacity;
  transform: translateY(2vh) scale(0.8);
  opacity: 0;
  text-align: left;
}

.modal.show .modal-c {
  transition: all 0.3s ease-in-out;
  transition-property: transform, opacity;
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal .modal-c > div {
  position: relative;
}

.modal .modal-content {
  display: block;
  padding: 0;
}

.modal .modal-content > div {
  border-radius: 0.25em;
  overflow: hidden;
}

.modal .modal-content > div > div {
  margin: 1em auto;
}

.modal .video {
  width: 49.273em;
  height: 27.85em;
}

.modal .end-info {
  position: relative;
  width: calc(100vw - 6em);
  height: calc(100vh - 6em);
  padding: 2em 1.7em;
  background-color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal .end-info-c {
  width: 60%;
}

.modal .end-info-c .b-c {
  width: 100%;
  margin-top: 2em;
  text-align: center;
}

.modal h3 {
  margin-bottom: 1em;
}

.modal .close-c {
  position: absolute;
  top: 1.5em;
  right: 1.7em;
}
.modal .close-c.video-close {
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0.5s;
}

.modal.show .close-c {
  opacity: 1;
}

.modal button.close,
.modal a.button.close {
  top: 0;
  right: 0;
}

@media (max-width: 650px) {
  .modal .close-c {
    position: absolute;
    top: 1em;
    right: 1em;
  }
}.s-flip-container {
  width: 100%;
}

.s-flip-views {
  width: 100%;
  transition: height 0.5s ease-in-out;
}

.s-flip-container .view-c {
  transition: all 0.5s ease-out;
  transition-property: opacity, transform;
  opacity: 1;
  transform: translateX(0);
}
.s-flip-container .view-c.forward-out {
  opacity: 0;
  transform: translateX(-30vw);
  transition-timing-function: ease-in-out;
}
.s-flip-container .view-c.forward-in {
  opacity: 0;
  transform: translateX(30vw);
  transition-timing-function: ease-out;
}
.s-flip-container .view-c.backward-out {
  opacity: 0;
  transform: translateX(30vw);
  transition-timing-function: ease-in-out;
}
.s-flip-container .view-c.backward-in {
  opacity: 0;
  transform: translateX(-30vw);
  transition-timing-function: ease-out;
}

.s-flip-container .nav {
  position: absolute;
  right: 0;
  bottom: 3em;
  left: 0;
  width: 17em;
  margin: 0 auto;
  text-align: center;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}
.s-flip-container .nav.show {
  transition-delay: 1s;
  opacity: 1;
}
.s-flip-container .nav > div {
  position: absolute;
  top: 0;
}
.s-flip-container .nav > div:first-child {
  right: 0;
}
.s-flip-container .nav > div:last-child {
  left: 0;
}
.s-flip-container .nav .dots {
  position: relative;
  width: calc(100% - 6em);
  padding-top: 0.6em;
  margin: 0 auto;
  width: 17em;
  text-align: center;
}
.s-flip-container .nav .dots > div {
  display: inline-block;
  width: 0.55556em;
  height: 0.55556em;
  margin: 0.44444em;
}
.s-flip-container .nav .dots > div > div {
  width: 0.55556em;
  height: 0.55556em;
  border-radius: 50%;
  background-color: transparent;
  border: 0.11111em solid #F1BB80;
  transition: all 0.3s ease-in-out;
  transition-property: background-color, transform, border-color;
}
.s-flip-container .nav .dots > div.active > div {
  background-color: #BE450F;
  border-color: #BE450F;
  transform: scale(1.4);
}

@media (max-width: 768px) {
  .s-flip-container .nav {
    bottom: 1em;
  }
}

@media (max-width: 450px) {
  .s-flip-container .nav {
    bottom: 0.5em;
  }
}.c-module-menu {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-module-menu .i-c {
  width: 45.7em;
  text-align: center;
}

.c-module-menu .i-c img {
  width: 42.05em;
  height: 27.85em;
}

.c-module-menu .menu {
  width: 27.5em;
  margin-right: -1.2em;
  border-radius: 1.2em;
  background-color: #fff;
  padding: 1.1em 3.2em 1.1em 2.1em;
}

.c-module-menu .menu > div {
  transition: height 0.5s ease-in-out;
}

.c-module-menu ul {
  margin: 0;
  padding: 0;
}

.c-module-menu li {
  position: relative;
  list-style: none;
  color: #272727;
  margin-bottom: 0.5em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.c-module-menu li:last-child {
  margin-bottom: 0em;
}

.c-module-menu li .width-calc {
  position: absolute;
  opacity: 0;
}

.c-module-menu li .b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.2em;
  background-color: #E3E3E3;
  flex-shrink: 0;
  flex-grow: 0;
}

.c-module-menu li .b > div {
  width: 0.2em;
  height: 0;
  background-color: #33336B;
  transition: height 0.5s ease-in-out;
}
.c-module-menu li.active .b > div {
  height: 100%;
}
.c-module-menu li.neutralize .b > div {
  height: 0 !important;
}

.c-module-menu .menu > div.fixed-menu,
.c-module-menu .fixed-menu li .b > div,
.c-module-menu .fixed-menu li .c,
.c-module-menu .fixed-menu li.neutralize .c {
  transition-duration: 0s;
}

.c-module-menu li .c {
  margin: 0.25em 0 0.25em 0.8em;
  width: 100%;
  transition: height 0.5s ease-in-out;
}
.c-module-menu li.active .c {
  overflow: hidden;
}
.c-module-menu li.neutralize .c {
  background-color: transparent;
  transition: height 0.5s ease-in-out, background-color 0.3s ease-in-out;
}

.c-module-menu li button {
  position: relative;
  background-color: transparent;
  border: 0;
  font-weight: bold;
  font-size: 1.25em;
  letter-spacing: -0.02em;
  color: #272727;
  padding: 0.4em 0;
  margin: 0;
  width: 100%;
  text-align: left;
  transition: all 0.3s ease-in-out;
  transition-property: background-color;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.c-module-menu li button:active,
.c-module-menu li button:focus {
  box-shadow: none !important;
}

.c-module-menu li button span:first-child {
  display: inline-block;
  text-align: left;
}

.c-module-menu li button .border {
  display: block;
  width: 0;
  height: 2px;
  margin: 2px auto 0 auto;
  background-color: #33336B;
  transition: width 0.3s ease;
}

.c-module-menu li button .completed {
  width: 1.5em;
  height: 1.5em;
  display: block;
  margin-left: 0.5em;
  border-radius: 50%;
  background-color: #089086;
  background-image: url('../images/icon-completed.svg');
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  background-position: 50% 50%;
  transform: translateY(-0.1em);
  opacity: 0;
}
.c-module-menu li button .completed.complete {
  opacity: 1;
}
.c-module-menu li button .completed.animate {
  animation: menu-completed 0.9s ease-in-out 1 0.5s forwards;
}
@keyframes menu-completed {
  0% {
		transform: scale(0.4);
    opacity: 0;
	}
  25% {
    transform: scale(1.25);
    opacity: 0.4;
	}
  50% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  75% {
    transform: scale(1.05);
		opacity: 1;
  }
  100% {
    transform: scale(1);
		opacity: 1;
  }
}

.c-module-menu li .t {
  padding-bottom: 0.4em;
}

.c-module-menu li .t-c {
  font-size: 0.85em;
  line-height: 1.47058824;
}

.c-module-menu li .b-c {
  font-size: 1em;
}

@media (hover: hover) {
  .c-module-menu li button:hover {
    transition-duration: 0.1s;
    transform: scale(1);
    color: #33336B;
  }

  .c-module-menu li button:hover .border {
    width: 100%;
  }
}

.c-module-menu li button.touched {
  transition-duration: 0s;
  transform: scale(1);
  color: #33336B;
}

.c-module-menu li button:focus {
  transition-duration: 0.1s;
  transform: scale(1);
  color: #33336B;
}

.c-module-menu li.active button {
  color: #33336B;
}

.c-module-menu li button.touched .border,
.c-module-menu li button:focus .border {
  width: 100%;
}

@media (max-width: 1270px) {
  .c-module-menu .menu {
    flex-shrink: 0;
  }

  .c-module-menu .i-c img {
    width: auto;
    height: auto;
  }
}

.c-module-menu .i-c {
width: 45.7em;
text-align: center;
}

@media (max-width: 900px) {
  .c-module-menu .i-c {
    width: 65vw;
    margin: 0 -7vw;
  }

  .c-module-menu .menu {
    position: relative;
    z-index: 1; 
    padding: 1em 3em 1em 1.5em;
  }
}

@media (max-width: 650px) {
  .c-module-menu .i-c {
    display: none;
  }

  .c-module-menu .menu {
    width: 100%;
    border-radius: 0;
    padding: 1em 24px 1em 24px;
  }
}.c-module-infobox {
  position: relative;
  width: 100vw;
  color: #272727;
  z-index: 1;
}

.c-module-infobox .bg {
  position: absolute;
  width: 100vw;
  height: 50vw;
}

.c-module-infobox .bg img {
  width: 100vw;
  height: 50vw;
  object-fit: cover;
}

.c-module-infobox .c {
  min-height: 50vw;
  max-width: 56em;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-module-infobox .c-c {
  position: relative;
  width: 100%;
}

.c-module-infobox .c-c .c-parts .tabs {
  width: 100%;
  padding: 2em 3em 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.c-module-infobox .c-c .c-parts .tabs li {
  width: 33%;
  text-align: center;
  list-style: none;
}

.c-module-infobox .c-c .c-parts .tabs li button {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  background-color: transparent;
  border: 0;
  font-weight: bold;
  font-size: 1.25em;
  letter-spacing: -0.02em;
  color: #272727;
  height: calc(100% - 0.17em);
  padding: 0.4em 0.25em;
  margin: 0;
  transition: all 0.3s ease-in-out;
  transition-property: background-color, transform;
}
.c-module-infobox .c-c .c-parts .tabs li button:active,
.c-module-infobox .c-c .c-parts .tabs li button:focus {
  box-shadow: none !important;
}
.c-module-infobox .c-c .c-parts .tabs li button:focus {
  transition-duration: 0.1s;
  transform: translateY(0.1em);
}

.c-module-infobox .c-c .c-parts .tabs li button span:first-child {
  display: inline-block;
  text-align: left;
}

.c-module-infobox .c-c .c-parts .tabs li .b {
  width: 100%;
  height: 0.2em;
  background-color: #E3E3E3;
}

.c-module-infobox .c-c .c-parts .tabs li .b > div {
  height: 0.2em;
  width: 0;
  background-color: #33336B;
  transition: width 0.5s ease-in-out;
}
.c-module-infobox .c-c .c-parts .tabs li.active .b > div {
  width: 100%;
}

.c-module-infobox .c-c .c-parts {
  width: 100%;
  background-color: #fff;
  border-radius: 1.05em;
  overflow-x: hidden;
}

.c-module-infobox .c-c .c-parts .parts {
  width: 100%;
  padding: 1.5em 3.9em 3.5em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.c-module-infobox .c-c .c-parts .p {
  width: 35em;
  text-align: center;
  transition: opacity 0.3s ease-in-out;
}
.c-module-infobox .c-c .c-parts .p.fade {
  opacity: 0;
}

.c-module-infobox .c-c .c-parts .p > div {
  text-wrap: balance;
}

.c-module-infobox .c-c .c-parts .p > div:first-child {
  width: 27em;
  margin-right: auto;
  margin-left: auto;
}

.c-module-infobox .c-c .c-parts .p .buttons {
  margin-top: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.c-module-infobox .c-c .c-parts .p .b-c {
  position: relative;
  margin: 0.5em 0.5em 0.5em;
}

.c-module-infobox .c-c .c-parts .p .b-c .completed {
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: #272727 url('../images/icon-completed.svg') no-repeat;
  background-size: 100% 100%;
  animation: c-module-infobox-completed 0.8s ease-in-out 1;
  animation-fill-mode: forwards;
}
.c-module-infobox .c-c .c-parts .p .b-c .completed.fade {
  animation: none;
  opacity: 0;
}
.c-module-infobox .c-c .c-parts .p .b-c .completed.static {
  animation: none;
  opacity: 1;
}
@keyframes c-module-infobox-completed {
  0% {
		transform: scale(0.4);
    opacity: 1;
	}
  25% {
    transform: scale(1.2);
	}
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
		opacity: 1;
  }
}

.c-module-infobox .buttons button {
  font-size: 1em;
  border-radius: 1.1em;
  border: 0;
  padding: 0.2em 1.5em 0.2em 0.7em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, margin 0.5s ease, padding 0.5s ease;
}
.c-module-infobox .buttons .b-c:nth-child(1) button,
.c-module-infobox .box.t-1 {
  background-color: #FDD1D1;
  color: #272727;
}
.c-module-infobox .buttons .b-c:nth-child(2) button,
.c-module-infobox .box.t-2 {
  background-color: #efe9df;
  color: #fff;
  color: #272727;
}
.c-module-infobox .buttons .b-c:nth-child(3) button,
.c-module-infobox .box.t-3 {
  background-color: #154E45;
  color: #fff;
}
.c-module-infobox .buttons .b-c:nth-child(4) button,
.c-module-infobox .box.t-4 {
  background-color: #AF4E55;
  color: #fff;
}

.c-module-infobox .buttons button img {
  width: 1.75em;
  height: 1.75em;
  margin-right: 0.25em;
}

.c-module-infobox .buttons button > span > span:first-child {
  font-size: 0.75em;
}
.c-module-infobox .buttons .b-c:nth-child(1) button > span > span:first-child,
.c-module-infobox .buttons .b-c:nth-child(2) button > span > span:first-child {
  color: #272727;
}

.c-module-infobox .buttons .b-c:nth-child(1) button .border,
.c-module-infobox .buttons .b-c:nth-child(2) button .border {
  background-color: #272727;
}

@media (hover: hover) {
  .c-module-infobox .buttons button:hover {
    margin-right: -0.5em;
    margin-left: -0.5em;
    padding-right: 2em;
    padding-left: 1.2em;
  }
}

.c-module-infobox .buttons button.touched,
.c-module-infobox .buttons button:focus {
  margin-right: -0.5em;
  margin-left: -0.5em;
  padding-right: 2em;
  padding-left: 1.2em;
}

.c-module-infobox .box {
  position: absolute;
  border-radius: 1em;
  top: 4em;
  right: 4em;
  bottom: 4em;
  left: 4em;
  background-color: #009BA2;
  opacity: 0;
}

.c-module-infobox .box.animate {
  transition: opacity 0.3s ease-in-out, inset 0.4s ease-in-out, height 0.4s ease-in-out, margin 0.4s ease-in-out;
}

.c-module-infobox .box.expand {
  transition: opacity 0.3s ease-in-out, inset 0.8s ease, height 0.4s ease-in-out, margin 0.4s ease-in-out;
  inset: 0 0 0 0 !important;
  opacity: 1;
}

.c-module-infobox .box .c {
  padding: 2.5em 3.5em 3em;
  position: relative;
  width: 100%;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  transition: opacity 0.4s ease-in-out;
}
.c-module-infobox .box.fade .c {
  opacity: 0;
}

.c-module-infobox .box .c .c-1 {
  width: 14em;
  margin-top: 1.5em;
}

.c-module-infobox .box .c .c-2 {
  width: 33.6em;
  margin-top: 1em;
}

.c-module-infobox .box .c .c-2 h3 {
  margin: 0.25em 0 0.6em;
}

.c-module-infobox .box .c .c-2 .t-small ul p {
  font-size: 1em;
}

.c-module-infobox .box .c .c-1 img {
  width: 10.5em;
  height: 10.1em;
}

.c-module-infobox .box .close-c {
  position: absolute;
  top: 1.5em;
  right: 1.7em;
  z-index: 1;
}

.c-module-infobox .box.t-3 .close-c button.close-modal,
.c-module-infobox .box.t-4 .close-c button.close-modal {
  background-image: url('../images/close-modal-inverted.svg');
}

@media (max-width: 900px) {
  .c-module-infobox .box .c {
    padding: 1.5em 2.5em 2em;
  }

  .c-module-infobox .box .c .c-1 {
    width: 20vw;
    margin-top: 1.5em;
  }

  .c-module-infobox .box .c .c-1 img {
    width: 15vw;
    height: 14.42857143vw;
  }

  .c-module-infobox .box .c .c-2 {
    width: 60vw;
  }

  .c-module-infobox .c-c .c-parts .tabs {
    padding: 1.5em 2em 0;
  }

  .c-module-infobox .c-c .c-parts .tabs li button {
    font-size: 1em;
  }
}

@media (max-width: 750px) {
  .c-module-infobox .c-c .c-parts .tabs {
    padding: 1.5em 1.5em 0;
  }
}

@media (max-width: 650px) {
  .c-module-infobox .c-c .c-parts {
    border-radius: 0.75em;
  }

  .c-module-infobox .c-c .c-parts .p {
    width: 100%;
  }

  .c-module-infobox .c-c .c-parts .p > div:first-child {
    width: 100%;
  }

  .c-module-infobox .box {
    border-radius: 0.7em;
  }

  .c-module-infobox .c-c .c-parts .tabs {
    padding: 1em 1em 0;
  }

  .c-module-infobox .c-c .c-parts .parts {
    padding: 1em 24px;
  }

  .c-module-infobox .box .close-c {
    top: 1em;
    right: 1em;
  }

  .c-module-infobox .box .c {
    padding: 1em 1.5em 1.5em;
  }

  .c-module-infobox .box .c .c-1 {
    display: none;
  }

  .c-module-infobox .box .c .c-2 {
    width: 100%;
  }

  .c-module-infobox button.scroll-icon {
    display: none;
  }
}.c-module-download {
  color: #272727;
  overflow: hidden;
  margin-top: -3em;
}

.c-module-download > div {
  position: relative;
  width: 100vw;
}

.c-module-download .bg {
  position: absolute;
  width: 100vw;
  height: 43.055556vw;
}

.c-module-download .bg img {
  width: 100vw;
  height: 46.527778vw;
  object-fit: cover;
}

.c-module-download .c {
  min-height: 46.527778vw;
  max-width: 56em;
  padding-top: 5em;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-module-download .c .c-1 {
  width: 23.1em;
  background-color: #fff;
  border-radius: 1em;
  padding: 3em 3.9em;
}

.c-module-download .c .c-1 h2 {
  margin-bottom: 0.55em;
}

.c-module-download .c .c-1 .b-c {
  display: inline-block;
  margin-top: 1.5em;
}

.c-module-download .c .c-2 {
  width: 28em;
  height: 17.7em;
  position: relative;
}

.c-module-download .c .c-2 > div {
  position: absolute;
  border-radius: 1em;
  overflow: hidden;
}

.c-module-download .c .c-2 > div:nth-child(1) {
  width: 10.5em;
  height: 11.4em;
  top: 2.1em;
  right: 6.5em;
  background-color: #27234A;
}

.c-module-download .c .c-2 > div:nth-child(2) {
  width: 8.85em;
  height: 8.15em;
  top: 0;
  right: 0;
}
.c-module-download .c .c-2 > div:nth-child(2) img {
  width: 8.85em;
  height: 8.15em;
}

.c-module-download .c .c-2 > div:nth-child(3) {
  width: 17.75em;
  height: 11.85em;
  bottom: 0;
  left: 0;
}
.c-module-download .c .c-2 > div:nth-child(3) img {
  width: 17.75em;
  height: 11.85em;
}

.c-module-download .c .c-2 > div:nth-child(4) {
  width: 5.45em;
  height: 5.95em;
  right: 3.3em;
  bottom: 1.5em;
}
.c-module-download .c .c-2 > div:nth-child(4) img {
  width: 5.45em;
  height: 5.95em;
}

.c-module-download .c .c-2 > div:nth-child(5) {
  width: 10.55em;
  height: 10.55em;
  top: -3em;
  left: 1.6em;
}
.c-module-download .c .c-2 > div:nth-child(5) img {
  width: 10.55em;
  height: 10.55em;
  border-radius: 0;
}


@media (max-width: 1270px) {
  .c-module-download .c .c-1 {
    flex-shrink: 0;
  }

  .c-module-download .c .c-2 img {
    width: auto;
    height: auto;
  }
}

@media (max-width: 1200px) {
  .c-module-download .c .c-1 {
    padding: 2em 2.5em 2.5em;
  }
}

@media (max-width: 1000px) {
  .c-module-download .c .c-2 {
    font-size: 1.5vw;
  }
}

@media (max-width: 900px) {
  .c-module-download .c .c-1 {
    width: 45vw;
    padding: 1.5em 2em 2em;
  }
}

@media (max-width: 650px) {
  .c-module-download .c {
    width: calc(100vw - 48px);
    max-width: none;
    display: block;
  }

  .c-module-download .c .c-1 {
    width: 100%;
    padding: 1.5em 24px 1.5em;
    border-radius: 0.75em;
  }

  .c-module-download .c .c-2 {
    font-size: 2.5vw;
    width: 70vw;
    height: 44.25vw;
    margin: 2em auto 0;
    position: relative;
  }
}.c-coherent-image {
  width: 100vw;
  margin-bottom: 3em;
}

.c-coherent-image .i-c,
.c-coherent-image .i-c img {
  width: 100vw;
  height: 27.095652vw;
}

.c-coherent-image .t-c {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.c-coherent-image .t-c > div {
  width: 33%;
  margin: 3em 2.5em 1.1em 0;
}
.c-coherent-image .t-c > div:last-child {
  margin-right: 0;
}

.c-coherent-image .t-c > div h2 {
  text-align: center;
  margin-bottom: 0.6em;
}

@media (max-width: 900px) {
  .c-coherent-image .t-c > div {
    width: 33%;
    margin: 2em 2em 1em 0;
  }

  .c-coherent-image .t-c > div h2 {
    text-align: left;
  }
}

@media (max-width: 650px) {
  .c-coherent-image .t-c {
    display: block;
  }

  .c-coherent-image .t-c > div {
    width: 100%;
    margin: 2em 2em 1em 0;
  }
}.c-browsable-area {
  width: 100%;
  max-width: 50.8em;
}

.c-browsable-area .box {
  width: 100%;
  background-color: #EFE9DF;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.c-browsable-area .box .texts-c {
  padding-bottom: 11.5em;
}
.c-browsable-area .box .texts-c.extra-padding {
  padding-bottom: 13.5em;
}

.c-browsable-area .box .texts {
  width: 100%;
}

.c-browsable-area .box .texts .t-c {
  padding: 3.6em 2.75em 0 3.6em;
}

.c-browsable-area .box .texts .t-c .cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.c-browsable-area .box .texts .t-c .col-1 {
  width: 46%;
  margin-right: 3%;
  flex-shrink: 0;
  flex-grow: 0;
}

.c-browsable-area .box .texts .t-c .col-2 {
  width: 51.7%;
  flex-shrink: 0;
  flex-grow: 0;
}

.c-browsable-area .box .texts .steps {
  font-size: 0.85em;
  line-height: 1.47058824;
}
.c-browsable-area .box .texts .t-c .steps {
  margin-bottom: 0.4em;
}
.c-browsable-area .box .texts .t-c p {
  margin-top: 0.5em;
}

.c-browsable-area .box .buttons {
  margin: -2.2em 0 0 3.6em;
  position: relative;
  z-index: 1;
}

.c-browsable-area .box .images {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.c-browsable-area .box .images .i-c {
  position: relative;
}

.c-browsable-area .box .images .i-c,
.c-browsable-area .box .images .i-c img {
  width: 100%;
  height: 12.1em;
  pointer-events: none;
}

.c-browsable-area .box .images .i-c img {
  position: absolute;
  bottom: 0;
  left: 0;
  transition: opacity 0.6s ease-in-out;
}
.c-browsable-area .box .images .i-c img.fade {
  opacity: 0;
}

@media (max-width: 900px) {
  .c-browsable-area .box .texts .t-c {
    padding: 2.5em 2em 0 2em;
  }

  .c-browsable-area .box .buttons {
    margin: -2.2em 0 0 2em;
  }

  .c-browsable-area .box .images .i-c {
    height: 24vw;
  }

  .c-browsable-area .box .images .i-c img {
    height: auto;
  }
}

@media (max-width: 650px) {
  .c-browsable-area .box .texts-c {
    padding-bottom: 19vw;
  }

  .c-browsable-area .box .texts .t-c {
    padding: 1.5em 24px 0 24px;
  }

  .c-browsable-area .box .texts .t-c .cols {
    display: block;
  }

  .c-browsable-area .box .texts .t-c .col-1,
  .c-browsable-area .box .texts .t-c .col-2 {
    width: 100%;
  }

  .c-browsable-area .box .buttons {
    margin: 20px 0 0 24px !important;
  }

  .c-browsable-area .box .texts-c.extra-padding {
    padding-bottom: 6.5em;
  }
}.c-visual-accordion {
  position: relative;
  width: 100%;
  max-width: 50.8em;
  margin-bottom: 4em;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.c-visual-accordion .image-c,
.c-visual-accordion .image-c img {
  width: 23.6em;
  height: 23.25em;
}

.c-visual-accordion .image-c {
  position: relative;
  background-repeat: no-repeat;
  background-size: 23.6em 23.25em;
  border-radius: 1em;
}
.c-visual-accordion .image-c.m1-1-1,
.c-visual-accordion .image-c.m1-5-2,
.c-visual-accordion .image-c.m2-5-1,
.c-visual-accordion .image-c.m3-2-1,
.c-visual-accordion .image-c.m4-1-1,
.c-visual-accordion .image-c.m4-3-1,
.c-visual-accordion .image-c.m4-3-2,
.c-visual-accordion .image-c.m4-3-3 {
  background-image: url('../../images/c-visual-accordion/1-1-1-bg.svg');
}
.c-visual-accordion .image-c.m1-3-1,
.c-visual-accordion .image-c.m4-2-1 {
  background-image: url('../../images/c-visual-accordion/1-3-1-bg.svg');
}
.c-visual-accordion .image-c.m1-4-1,
.c-visual-accordion .image-c.m1-5-1,
.c-visual-accordion .image-c.m3-1-1,
.c-visual-accordion .image-c.m3-3-1 {
  background-image: url('../../images/c-visual-accordion/1-4-1-bg.svg');
}

.c-visual-accordion .image-c img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.6s ease;
  transition-property: opacity, transform;
}
.c-visual-accordion .image-c img.fade {
  transition-duration: 0s;
  opacity: 0;
}
.c-visual-accordion .image-c img.fade-from {
  transition-duration: 0s;
  opacity: 0;
  transform: scale(1.2);
}
.c-visual-accordion .image-c img.fade-in {
  transition-duration: 0.6s;
  opacity: 1;
  transform: scale(1);
}
.c-visual-accordion .image-c img.fade-out {
  transition-duration: 0.6s;
  opacity: 0;
  transform: scale(0.8);
}

.c-visual-accordion .text-c {
  width: 23.35em;
}

.c-visual-accordion.video-desc .text-c {
  width: 100%;
}

.c-visual-accordion h2 {
  display: block;
  font-weight: normal;
  font-size: 1.5em;
  margin-bottom: 1.2em;
}

.c-visual-accordion > div > ul {
  margin: 0;
  padding: 0;
}

.c-visual-accordion.video-desc > div > ul {
  background-color: #F7F5F1;
  border-radius: 1em;
  margin-top: 1em;
  padding: 0 1em 0 1.5em;
}

.c-visual-accordion > div > ul > li {
  border-bottom: 0.05em #E3E3E3 solid;
  list-style: none;
  transition: border 0.4s ease-in-out;
}
.c-visual-accordion > div > ul > li.active {
  border-bottom: 0.1em #30488E solid;
}

.c-visual-accordion.video-desc > div > ul > li {
  border-bottom: 0;
}

.c-visual-accordion > div > ul > li > div {
  margin: 0.5em 0;
  width: 100%;
  transition: height 0.4s ease-in-out;
}
.c-visual-accordion > div > ul > li.neutralize > div {
  background-color: transparent;
  transition: height 0.4s ease-in-out, background-color 0.3s ease-in-out;
}

.c-visual-accordion > div > ul > li button {
  position: relative;
  background-color: transparent;
  border: 0;
  font-size: 1em;
  font-weight: normal;
  color: #000;
  padding: 0.6em 2em 0.7em 0;
  margin: 0;
  width: 100%;
  text-align: left;
  transition: all 0.3s ease-in-out;
  transition-property: background-color;
}
.c-visual-accordion > div > ul > li button:active,
.c-visual-accordion > div > ul > li button:focus {
  box-shadow: none !important;
}

.c-visual-accordion > div > ul > li button > span:first-child {
  font-size: 1.125em;
  text-align: left;
}
.c-visual-accordion.video-desc > div > ul > li button > span:first-child {
  font-size: 0.85em;
  color: #0E1C40;
  font-weight: 500;
}

.c-visual-accordion > div > ul > li button:focus > span:first-child {
  text-decoration: underline;
  text-decoration-color: #ddd;
  text-underline-offset: 0.3em;
}

.c-visual-accordion > div > ul > li button > span:last-child {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.75em;
  height: 1.75em;
  margin: auto 0;
  transition: box-shadow 0.4s ease;
}
.c-visual-accordion > div > ul > li button > span:last-child > span {
  display: block;
  width: 1.75em;
  height: 1.75em;
  background: transparent url('../images/open.svg') no-repeat;
  background-size: 1.75em 1.75em;
  transition: transform 0.4s ease;
}
/* .c-visual-accordion > div > ul > li button:focus > span:last-child {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
} */
.c-visual-accordion > div > ul > li button.active > span:last-child > span {
  transform: rotate(-45deg);
}

.c-visual-accordion > div > ul ul {
  margin: 0 0 1em;
}

@media (hover: hover) {
  .c-visual-accordion > div > ul > li button:hover {
    transition-duration: 0.1s;
    transform: scale(1);
  }
}

.c-visual-accordion > div > ul > li button.touched {
  transition-duration: 0s;
  transform: scale(1);
}

.c-visual-accordion > div > ul > li button:focus {
  transition-duration: 0.1s;
  transform: scale(1);
}

.c-visual-accordion .text-c .t {
  padding: 0.2em 0 0.05em;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.c-visual-accordion.video-desc .text-c .t {
  padding-top: 1em;
  padding-right: 4em;
  padding-bottom: 1.5em;
}
.c-visual-accordion .text-c .t.fade {
  opacity: 0;
}

.c-visual-accordion .text-c .t ul li {
  margin: 0 0 0.6em 0;
  padding-left: 0.2em;
}
.c-visual-accordion .text-c .t li:last-child {
  margin-bottom: 0;
}

@media (max-width: 1000px) {
  .c-visual-accordion .image-c,
  .c-visual-accordion .image-c img {
    width: 30vw;
    height: 29.55508475vw;
    background-size: 30vw 29.55508475vw;
  }

  .c-visual-accordion .image-c {
    margin-top: 1em;
  }

  .c-visual-accordion .text-c {
    width: 57vw;
  }
}

@media (max-width: 1000px) {
  .c-visual-accordion .image-c {
    border-radius: 0.75em;
  }
}

@media (max-width: 650px) {
  .c-visual-accordion .image-c {
    border-radius: 0.5em;
  }

  .c-visual-accordion .image-c {
    width: 20vw;
    height: 19.70338983vw;
    background-size: 20vw 19.70338983vw;
  }

  .c-visual-accordion .image-c img {
    width: 26vw;
    height: 25.61440678vw;
    margin: -3vw;
  }

  .c-visual-accordion .text-c {
    width: 65vw;
  }

  .c-visual-accordion.video-desc > div > ul {
    border-radius: 0.75em;
    padding: 0 0.75em 0 1em;
  }

  .c-visual-accordion.video-desc .text-c .t {
    padding-right: 1em;
  }
}

/* @media (max-width: 450px) and (max-aspect-ratio: 1/1) {
  .c-visual-accordion h2 {
    font-size: 1.125em;
    margin-bottom: 1em;
  }

  .c-visual-accordion ul {
    margin: 0.5em 0 4.5em;
  }

  .c-visual-accordion ul li {
    margin-bottom: 0em;
  }

  .c-visual-accordion > div > ul > li > div {
    margin: 0;
  }

  .c-visual-accordion > div > ul > li button {
    font-size: 0.875em;
  }

  .c-visual-accordion > div > ul > li button span:first-child {
    font-size: 1em;
  }

  .c-visual-accordion .text-c .t {
    padding: 0.2em 0;
  }

  .c-visual-accordion .text-c .t p {
    margin: 0 0 0.5em;
  }
} */.c-cards {
  width: 100vw;
  margin-bottom: 3em;
}

.c-cards .wrapper {
  width: 100vw;
  overflow-x: hidden;
}

.c-cards .cards-c {
  width: 750em;
  transition: transform 0.8s ease;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

.c-cards .cards-c.active-1 {
  transform: translateX(10.6em);
}
.c-cards .cards-c.active-2 {
  transform: translateX(-27.15em);
}
.c-cards .cards-c.active-3 {
  transform: translateX(-64.9em);
}
.c-cards .cards-c.active-4 {
  transform: translateX(-102.65em);
}
.c-cards .cards-c.active-5 {
  transform: translateX(-140.4em);
}
.c-cards .cards-c.active-6 {
  transform: translateX(-178.15em);
}
.c-cards .cards-c.active-7 {
  transform: translateX(-215.9em);
}
.c-cards .cards-c.active-8 {
  transform: translateX(-253.65em);
}
.c-cards .cards-c.active-9 {
  transform: translateX(-291.4em);
}
.c-cards .cards-c.active-10 {
  transform: translateX(-329.15em);
}

.c-cards .cards-c .card {
  width: 36.8em;
  min-height: 17.65em;
  border-radius: 1em;
  background-color: #089086;
  color: #fff;
  border: 0.05em #E3E3E3 solid;
  margin-right: 0.95em;
  padding: 1.6em 1.6em 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  transition: all 0.4s ease-in-out;
  transition-property: background-color, color;
}
.c-cards .cards-c .card.ocean-green {
  background-color: #089086;
}
.c-cards .cards-c .card.violet-deep {
  background-color: #4D345F;
}
.c-cards .cards-c .card.bright-blue {
  background-color: #30488E;
}
.c-cards .cards-c .card.white {
  background-color: #fff;
}
.c-cards .cards-c .card.beige {
  background-color: #F7F5F1;
}
.c-cards .cards-c .card.light-blue {
  background-color: #D6DAE8;
}
.c-cards .cards-c .card.white,
.c-cards .cards-c .card.beige,
.c-cards .cards-c .card.light-blue {
  color: #272727;
}

.c-cards .cards-c .card .c-1 {
  width: 12.1em;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}

.c-cards .cards-c .card .c-1 .icon-c {
  min-height: 10em;
  width: 20em;
  transform: translateX(-1.6em);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.c-cards .cards-c .card .c-1 .icon-c img {
  width: 36.8em;
  height: 17.65em;
}

.c-cards .cards-c .card .c-2 {
  width: 19.65em;
}

.c-cards .cards-c .card .c-2 .t-c {
  padding-top: 0.2em;
}

.c-cards .cards-c .card .c-2 .t-c h3 {
  font-size: 0.85em;
  margin: 0;
}

.c-cards .navigation {
  margin-top: 1em;
  padding-left: 11.2em;
}

@media (max-width: 1000px) {
  .c-cards .cards-c.active-1 {
    transform: translateX(calc(50vw - 325px));
  }

  .c-cards .cards-c.active-2 {
    transform: translateX(calc(50vw - 325px - 37.75em));
  }
  .c-cards .cards-c.active-3 {
    transform: translateX(calc(50vw - 325px - 75.5em));
  }
  .c-cards .cards-c.active-4 {
    transform: translateX(calc(50vw - 325px - 113.25em));
  }
  .c-cards .cards-c.active-5 {
    transform: translateX(calc(50vw - 325px - 151em));
  }
  .c-cards .cards-c.active-6 {
    transform: translateX(calc(50vw - 325px - 188.75em));
  }
  .c-cards .cards-c.active-7 {
    transform: translateX(calc(50vw - 325px - 226.5em));
  }
  .c-cards .cards-c.active-8 {
    transform: translateX(calc(50vw - 325px - 264.25em));
  }
  .c-cards .cards-c.active-9 {
    transform: translateX(calc(50vw - 325px - 302em));
  }
  .c-cards .cards-c.active-10 {
    transform: translateX(calc(50vw - 325px - 339.75em));
  }

  .c-cards .navigation {
    transform: translateX(calc(50vw - 325px));
    padding-left: 0.5em;
  }
}

@media (max-width: 750px) {
  .c-cards .cards-c .card {
    width: 32em;
  }

  .c-cards .cards-c .card .c-1 {
    width: 10em;
  }

  .c-cards .cards-c .card .c-1 .icon-c img {
    width: 32em;
    height: 15.35em;
  }

  .c-cards .cards-c .card .c-2 {
    width: 17em;
  }

  .c-cards .cards-c.active-1 {
    transform: translateX(calc(50vw - 290px));
  }

  .c-cards .cards-c.active-2 {
    transform: translateX(calc(50vw - 290px - 32.95em));
  }
  .c-cards .cards-c.active-3 {
    transform: translateX(calc(50vw - 290px - 65.9em));
  }
  .c-cards .cards-c.active-4 {
    transform: translateX(calc(50vw - 290px - 98.85em));
  }
  .c-cards .cards-c.active-5 {
    transform: translateX(calc(50vw - 290px - 131.8em));
  }
  .c-cards .cards-c.active-6 {
    transform: translateX(calc(50vw - 290px - 164.75em));
  }
  .c-cards .cards-c.active-7 {
    transform: translateX(calc(50vw - 290px - 197.7em));
  }
  .c-cards .cards-c.active-8 {
    transform: translateX(calc(50vw - 290px - 230.65em));
  }
  .c-cards .cards-c.active-9 {
    transform: translateX(calc(50vw - 290px - 263.6em));
  }
  .c-cards .cards-c.active-10 {
    transform: translateX(calc(50vw - 290px - 296.55em));
  }

  .c-cards .navigation {
    transform: translateX(calc(50vw - 290px));
  }
}

@media (max-width: 650px) {
  .c-cards .cards-c .card {
    display: block;
    position: relative;
    width: calc(100vw - 70px);
    height: 23em;
    min-height: auto;
    padding: 1.2em 1.2em 0;
    margin-right: 17px;
    border-radius: 0.75em;
  }

  .c-cards .cards-c .card .c-1,
  .c-cards .cards-c .card .c-2 {
    width: 100%;
  }

  .c-cards .cards-c .card .c-1 .icon-c {
    position: absolute;
    bottom: 0;
    transform: translateX(-1.2em);
  }

  .c-cards .cards-c .card .c-1 .icon-c img {
    width: 16em;
    height: 7.675em;
  }

  .c-cards .cards-c.active-1 {
    transform: translateX(24px);
  }

  .c-cards .cards-c.active-2 {
    transform: translateX(calc(-100vw + 77px));
  }

  .c-cards .cards-c.active-3 {
    transform: translateX(calc(-200vw + 130px));
  }
  
  .c-cards .cards-c.active-4 {
    transform: translateX(calc(-300vw + 183px));
  }
  
  .c-cards .cards-c.active-5 {
    transform: translateX(calc(-400vw + 236px));
  }
  
  .c-cards .cards-c.active-6 {
    transform: translateX(calc(-500vw + 289px));
  }
  
  .c-cards .cards-c.active-7 {
    transform: translateX(calc(-600vw + 342px));
  }
  
  .c-cards .cards-c.active-8 {
    transform: translateX(calc(-700vw + 395px));
  }
  
  .c-cards .cards-c.active-9 {
    transform: translateX(calc(-800vw + 448px));
  }
  
  .c-cards .cards-c.active-10 {
    transform: translateX(calc(-900vw + 501px));
  }

  .c-cards .navigation {
    transform: translateX(24px);
  }
}.c-questions {
  position: relative;
  text-align: center;
  margin-top: 5em;
}

.c-questions .position-info {
  font-size: 0.85em;
  line-height: 1.47058824;
  margin: 0 0 1em;
}

.c-questions .q-c .question-c {
  width: 44em;
  min-height: 25em;
  margin: 0 auto;
  transition: all 0.3s ease-out;
  transition-property: opacity, transform;
  opacity: 1;
  transform: translateX(0);
}
.c-questions .q-c .question-c.forward-out {
  opacity: 0;
  transform: translateX(-10em);
  transition-timing-function: ease-in-out;
}
.c-questions .q-c .question-c.forward-in {
  opacity: 0;
  transform: translateX(10em);
  transition-timing-function: ease-out;
}
.c-questions .q-c .question-c.backward-out {
  opacity: 0;
  transform: translateX(10em);
  transition-timing-function: ease-in-out;
}
.c-questions .q-c .question-c.backward-in {
  opacity: 0;
  transform: translateX(-10em);
  transition-timing-function: ease-out;
}

.c-questions .q-c .question-c h3 {
  max-width: 26.4em;
  margin-right: auto;
  margin-bottom: 3em;
  margin-left: auto;
}

.c-questions .bf-c {
  position: relative;
  min-height: 17.5em;
}

.c-questions .buttons-c {
  position: relative;
  width: 33em;
  height: 9.8em;
  margin: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.c-questions .buttons-c button {
  position: relative;
  font-size: 1em;
  width: 10.25em;
  height: 9.8em;
  border-radius: 0.6em;
  border: 0;
  margin: 0;
  background-color: #30488e;
  transition-property: box-shadow, transform, opacity;
}
.c-questions .buttons-c button:focus {
  box-shadow: 0 0 0 0.1875em rgba(0, 0, 0, 0.3) !important;
}

.c-questions .buttons-c button > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 10.25em;
  height: 9.8em;
}

.c-questions .buttons-c button > span {
  font-size: 0.75em;
  position: absolute;
  left: 0;
  bottom: 1.2em;
  right: 0;
  padding: 0 1em;
  text-align: center;
  color: #fff;
}

.c-questions .answered .buttons-c button {
  opacity: 0;
}
.c-questions .buttons-c button.selected {
  opacity: 1;
  transition-timing-function: ease;
  transition-property: box-shadow, transform, left, opacity;
}
.c-questions .buttons-c button.selected:nth-child(1) {
  transition-duration: 0.4s;
  transform: scale(1) translate(-5.5em, 0) rotate(0deg) !important;
}
.c-questions .buttons-c button.selected:nth-child(2) {
  transition-duration: 0.6s;
  transform: scale(1) translate(-16.875em, 0) rotate(0deg) !important;
}
.c-questions .buttons-c button.selected:nth-child(3) {
  transition-duration: 0.8s;
  transform: scale(1) translate(-28.25em, 0) rotate(0deg) !important;
}
.c-questions .buttons-c button.selected.reset:nth-child(1) {
  transition-duration: 0.4s;
  transform: scale(1) translate(0, 0) rotate(0deg) !important;
}
.c-questions .buttons-c button.selected.reset:nth-child(2) {
  transition-duration: 0.6s;
  transform: scale(1) translate(0, 0) rotate(0deg) !important;
}
.c-questions .buttons-c button.selected.reset:nth-child(3) {
  transition-duration: 0.8s;
  transform: scale(1) translate(0, 0) rotate(0deg) !important;
}

@media (hover: hover) {
  .c-questions .buttons-c button:nth-child(1):hover {
    transform: scale(1) translateY(-0.2em) rotate(-3deg);
  }
  .c-questions .buttons-c button:nth-child(2):hover {
    transform: scale(1) translateY(-0.2em) rotate(1deg);
  }
  .c-questions .buttons-c button:nth-child(3):hover {
    transform: scale(1) translateY(-0.2em) rotate(5deg);
  }
}

.c-questions .buttons-c button.touched {
  transition-duration: 0.1s;
}

.c-questions .buttons-c button:nth-child(1).touched,
.c-questions .buttons-c button:nth-child(1):focus {
  transform: scale(1) translateY(-0.2em) rotate(-3deg);
}
.c-questions .buttons-c button:nth-child(2).touched,
.c-questions .buttons-c button:nth-child(2):focus {
  transform: scale(1) translateY(-0.2em) rotate(1deg);
}
.c-questions .buttons-c button:nth-child(3).touched,
.c-questions .buttons-c button:nth-child(3):focus {
  transform: scale(1) translateY(-0.2em) rotate(5deg);
}

.c-questions .feedback {
  position: absolute;
  top: 0;
  right: 0;
  width: 31em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  transition: opacity 0.3s ease-in-out;
}
.c-questions .feedback.fade {
  opacity: 0;
}
.c-questions .feedback > div {
  width: 100%;
}
.c-questions .feedback h4 {
  margin-top: 0;
}
.c-questions .feedback p {
  font-size: 0.85em;
  line-height: 1.47058824;
}

.c-questions .feedback .buttons {
  display: inline-block;
  margin-top: 1em;
}

.c-questions .feedback .buttons .b-c {
  width: 100%;
  text-align: center;
}

.c-questions .feedback .buttons .b-c button.simple {
  padding-right: 0;
  padding-left: 0;
}

.c-questions .bf-c .b-c2 {
  width: 100%;
  text-align: center;
  margin-top: 2.5em;
}

.c-questions .nav {
  position: absolute;
  width: calc(100% - 4em);
  left: 2em;
  bottom: 16em;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}
.c-questions .nav.fade {
  opacity: 0;
}
.c-questions .nav button {
  pointer-events: auto;
}

.c-questions button.flip:focus {
  box-shadow: 0 0 0 0.1875em rgba(88, 176, 225, 1) !important;
}

@media (max-width: 900px) {
  .c-questions .q-c .question-c {
    width: 86.3vw;
    min-height: 20em;
  }

  .c-questions .buttons-c button.selected:nth-child(1) {
    transform: scale(1) translate(0, 0) rotate(0deg) !important;
  }
  .c-questions .buttons-c button.selected:nth-child(2) {
    transform: scale(1) translate(-11.375em, 0) rotate(0deg) !important;
  }
  .c-questions .buttons-c button.selected:nth-child(3) {
    transform: scale(1) translate(-22.75em, 0) rotate(0deg) !important;
  }

  .c-questions .feedback {
    width: 21.625em;
    margin-right: calc(25vw - 10.8125em);
  }

  .c-questions .feedback > div:first-child > div:first-child > div:nth-child(2) {
    font-size: 0.85em;
    line-height: 1.47058824;
  }
}

@media (max-width: 650px) {
  .c-questions .q-c .question-c {
    width: 100%;
    min-height: 15em;
  }

  .c-questions .q-c .question-c h3 {
    margin-bottom: 2em;
  }

  .c-questions .buttons-c {
    width: calc(100vw - 48px);
  }

  .c-questions .buttons-c button {
    font-size: 0.8em;
    width: calc(33.33vw - 24px);
    height: calc(33.33vw - 24px);
    border-radius: 0.4em;
    padding: 0 10px;
    overflow: hidden;
  }

  .c-questions .buttons-c button > img {
    top: -0.75em;
    width: calc(33.33vw - 24px);
    height: auto;
  }

  .c-questions .buttons-c button > span {
    bottom: 0.5em;
    padding: 0 0.5em;
  }

  .c-questions .buttons-c button.selected:nth-child(1) {
    transform: scale(1) translateX(0) rotate(0deg) !important;
  }
  .c-questions .buttons-c button.selected:nth-child(2) {
    transform: scale(1) translateX(calc(-33.33vw + 12px)) rotate(0deg) !important;
  }
  .c-questions .buttons-c button.selected:nth-child(3) {
    transform: scale(1) translateX(calc(-66.66vw + 24px)) rotate(0deg) !important;
  }

  .c-questions .feedback {
    width: calc(60vw - 24px);
    margin-right: 0;
  }
}.c-clickable-image {
  width: 100%;
  max-width: 50.8em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-clickable-image .t-c {
  width: 22.15em;
}

.c-clickable-image .t-c h2 {
  margin-bottom: 0.6em;
}



.c-clickable-image .i-c,
.c-clickable-image .i-c .c,
.c-clickable-image .i-c .c img {
  position: relative;
  width: 27.2em;
  height: 18.15em;
}
.c-clickable-image .i-c .c {
  border-radius: 1em;
  overflow: hidden;
}

.c-clickable-image .i-c .b-c {
  position: absolute;
  transform: translate(-1.225em, -1.225em);
}
.c-clickable-image .i-c .b-c .completed {
  animation: c-clickable-image-completed 0.8s ease-in-out 1;
  animation-fill-mode: forwards;
}

.c-clickable-image .i-c .b-c .completed.fade {
  animation: none;
  opacity: 0;
}
@keyframes c-clickable-image-completed {
  0% {
		transform: scale(0.4);
    opacity: 1;
	}
  25% {
    transform: scale(1.2);
	}
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
		opacity: 1;
  }
}

.c-clickable-image-modal {
  position: relative;
  width: 30.25em;
  padding: 3.75em 3.75em 3.25em;
  border-radius: 1em;
  background-color: #fff;
}

.c-clickable-image-modal .h-c {
  padding-right: 7.55em;
}

@media (max-width: 1000px) {
  .c-clickable-image .t-c {
    width: 39.08823529vw;
  }
  
  .c-clickable-image .i-c {
    font-size: 1.764705882vw;
  }
}

@media (max-width: 900px) {
  .c-clickable-image .i-c .b-c > div {
    transform: scale(1.1);
    transform-origin: center center;
  }
}

@media (max-width: 800px) {
  .c-clickable-image .i-c .b-c > div {
    transform: scale(1.2);
  }

  .c-clickable-image-modal .h-c {
    padding-right: 2em;
  }
}

@media (max-width: 650px) {
  .c-clickable-image {
    display: block;
  }

  .c-clickable-image .t-c {
    width: 100%;
  }

  .c-clickable-image .i-c,
  .c-clickable-image .i-c .c,
  .c-clickable-image .i-c .c img {
    font-size: 1em;
    width: calc(100vw - 48px);
    height: calc(66.727941vw - 32.02941176px);
    border-radius: 0.75em;
  }

  .c-clickable-image .i-c {
    margin-top: 1.5em;
  }

  .c-clickable-image .i-c .b-c > div {
    transform: scale(1);
  }

  .c-clickable-image-modal {
    width: calc(100vw - 48px);
    padding: 1.5em 24px;
    border-radius: 0.75em;
  }
}.c-word-cloud {
  width: 100%;
  margin: 6em 0 4em;
}

.c-word-cloud .t-c {
  width: 26.1em;
  margin: 0 auto 2em;
  text-align: center;
}

.c-word-cloud .t-c h2 {
  margin-bottom: 0.6em;
}

.c-word-cloud .w-c {
  width: 40em;
  margin: 4em auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.c-word-cloud .w-c .b-c {
  position: relative;
  margin: 0.5em 0.5em 1.1em;
}

.c-word-cloud .w-c .b-c .completed {
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: #272727 url('../images/icon-completed.svg') no-repeat;
  background-size: 100% 100%;
  animation: c-word-cloud-completed 0.8s ease-in-out 1;
  animation-fill-mode: forwards;
}
.c-word-cloud .w-c .b-c .completed.fade {
  animation: none;
  opacity: 0;
}
@keyframes c-word-cloud-completed {
  0% {
		transform: scale(0.4);
    opacity: 1;
	}
  25% {
    transform: scale(1.2);
	}
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
		opacity: 1;
  }
}

.c-word-cloud button {
  font-size: 1em;
  border-radius: 1em;
  border: 0;
  padding: 0.4em 1.2em 0.4em 0.7em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, margin 0.5s ease, padding 0.5s ease;
}
.c-word-cloud .w-c .b-c:nth-child(1) button,
.c-word-cloud-modal.t-1 {
  background-color: #efe9df;
  color: #272727;
}
.c-word-cloud .w-c .b-c:nth-child(2) button,
.c-word-cloud-modal.t-2  {
  background-color: #045C6E;
}
.c-word-cloud .w-c .b-c:nth-child(3) button,
.c-word-cloud-modal.t-3  {
  background-color: #AF4E55;
}
.c-word-cloud .w-c .b-c:nth-child(4) button,
.c-word-cloud-modal.t-4  {
  background-color: #154E45;
}
.c-word-cloud .w-c .b-c:nth-child(5) button,
.c-word-cloud-modal.t-5  {
  background-color: #e3e3e3;
  color: #272727;
}
.c-word-cloud .w-c .b-c:nth-child(6) button,
.c-word-cloud-modal.t-6  {
  background-color: #30488E;
}
.c-word-cloud .w-c .b-c:nth-child(7) button,
.c-word-cloud-modal.t-7  {
  background-color: #272727;
}

.c-word-cloud .w-c .b-c:nth-child(1) button .border,
.c-word-cloud .w-c .b-c:nth-child(5) button .border {
  background-color: #272727;
}

.c-word-cloud button img {
  width: 1.75em;
  height: 1.75em;
  margin-right: 0.5em;
}

.c-word-cloud button > span > span:first-child {
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

@media (hover: hover) {
  .c-word-cloud button:hover {
    margin-right: -0.5em;
    margin-left: -0.5em;
    padding-right: 1.7em;
    padding-left: 1.2em;
  }
}

.c-word-cloud button:focus {
  margin-right: -0.5em;
  margin-left: -0.5em;
  padding-right: 1.7em;
  padding-left: 1.2em;
}

.c-word-cloud-modal {
  position: relative;
  width: 34.9em;
  padding: 2em 2.8em 2.5em;
  border-radius: 1em;
  background-color: #30488E;
  color: #fff;
}

.c-word-cloud-modal .h-c {
  padding-right: 7.55em;
}

.c-word-cloud-modal .h-c h3 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.c-word-cloud-modal .h-c h3 img {
  width: 1.48em;
  height: 1.48em;
  margin-right: 0.5em;
}

.c-word-cloud-modal .h-c h3 span {
  padding-top: 0.15em;
}

@media (max-width: 800px) {
  .c-word-cloud .w-c {
    width: calc(100vw - 60px);
  }

  .c-word-cloud-modal .h-c {
    padding-right: 2em;
  }
}

@media (max-width: 650px) {
  .c-word-cloud .t-c {
    width: calc(100vw - 48px);
  }

  .c-word-cloud .w-c {
    width: calc(100vw - 48px);
    margin: 2em auto;
  }

  .c-word-cloud-modal {
    width: calc(100vw - 48px);
    padding: 1.5em 24px;
    border-radius: 0.75em;
  }

  .c-word-cloud .w-c .b-c {
    margin: 0.5em;
  }
}.c-video {
  width: 100%;
  margin: 6em 0 4em;
}

.c-video .v-c {
  width: 50.8em;
  height: 28.6em;
  margin: 0 auto;
  border-radius: 1em;
  overflow: hidden;
}

@media (max-width: 1000px) {
  .c-video .v-c {
    width: 89.64705881vw;
    height: 50.47058823vw;
  }

  .c-video .area.min.c-visual-accordion {
    width: 89.64705881vw;
  }
}

@media (max-width: 650px) {
  .c-video .v-c {
    width: calc(100vw - 48px);
    height: calc(56.299213vw - 27.02362224px);
    border-radius: 0.75em;
  }
}.c-user-modal {
  position: relative;
  width: 32em;
  padding: 2em 2.8em 2.5em;
  border-radius: 1em;
  background-color: #fff;
  color: #272727;
  overflow: hidden;
}

.c-user-modal .s-flip-views > div {
  transition: all 0.3s ease-out;
  transition-property: opacity, transform;
  opacity: 1;
  transform: translateX(0);
}

.c-user-modal .s-flip-views > div.forward-out {
  opacity: 0;
  transform: translateX(-10em);
  transition-timing-function: ease-in-out;
}
.c-user-modal .s-flip-views > div.forward-in {
  opacity: 0;
  transform: translateX(10em);
  transition-timing-function: ease-out;
}
.c-user-modal .s-flip-views > div.backward-out {
  opacity: 0;
  transform: translateX(10em);
  transition-timing-function: ease-in-out;
}
.c-user-modal .s-flip-views > div.backward-in {
  opacity: 0;
  transform: translateX(-10em);
  transition-timing-function: ease-out;
}

.c-user-modal .t-small {
  margin-top: 1em;
}

.c-user-modal .b-cs {
  margin-top: 1.5em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.c-user-modal .b-cs .b-c {
  margin-right: 1em;
}

.c-user-modal .b-cs2 {
  margin-top: 1.5em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.c-user-modal .b-cs2 .b-c2 {
  text-align: center;
}

.c-user-modal .b-cs2 .b-c {
  position: relative;
}

.c-user-modal .form .label {
  font-size: 0.85em;
  margin: 1.5em 0 0.3em;
}

.c-user-modal .form input {
  font-size: 0.85em;
  width: 100%;
  color: #272727;
  background-color: #fff;
  border: 1px #707070 solid;
  border-radius: 0.3em;
  margin: 0;
  padding: 0em 2.2em 0 1em;
  height: 2.5em;
}

.c-user-modal .t-small.margin {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.c-user-modal .alert {
  font-size: 0.85em;
  line-height: 1.47058824;
  margin-top: 1.5em;
  transition: height 0.3s ease-in-out;
}

.c-user-modal .alert-info {
  width: 100%;
  background-color: #AF4E55;
  border-radius: 0.5em;
  color: #fff;
  padding: 0.6em 1em 0.8em;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}

.c-user-modal .alert-info.show {
  opacity: 1;
}

.c-user-modal .completed {
  position: absolute;
  top: 0.3em;
  right: -2.5em;
  width: 1.76470588em;
  height: 1.76470588em;
  display: block;
  border-radius: 50%;
  background-color: #089086;
  background-image: url('../images/icon-completed.svg');
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  background-position: 50% 50%;
  transform: translateY(-0.1em);
  opacity: 0;
}
.c-user-modal .completed.complete {
  animation: user-completed 0.9s ease-in-out 1 forwards;
}
@keyframes user-completed {
  0% {
		transform: scale(0.4);
    opacity: 0;
	}
  25% {
    transform: scale(1.25);
    opacity: 0.4;
	}
  50% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  75% {
    transform: scale(1.05);
		opacity: 1;
  }
  100% {
    transform: scale(1);
		opacity: 1;
  }
}

@media (max-width: 650px) {
  .c-user-modal {
    width: calc(100vw - 48px);
    padding: 1.5em 24px;
    border-radius: 0.75em;
  }
}.dropdown {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.dropdown .select {
  position: relative;
  width: 100%;
  z-index: 1;
  text-align: left;
  font-size: 0.888889em;
  font-weight: 300;
  cursor: pointer;
}
.dropdown .select * {
  cursor: pointer;
}
.dropdown .select > button {
  font-size: 1em;
  width: 100%;
  font-weight: normal;
  position: relative;
  z-index: 2;
  color: #272727;
  background-color: #fff;
  border: 1px #707070 solid;
  margin: 0;
  padding: 0em 2.2em 0 1em;
  height: 2.5em;
  background-image: url('../images/dropdown-arrow.svg');
  background-repeat: no-repeat;
  background-size: 1.82352941em 0.70588235em;
  background-position: right center;
  border-radius: 0.3em;
  text-align: left;
  text-overflow: ellipsis;
  transform: scale(1) !important;
}
.dropdown .options {
  position: absolute;
  background-color: #fff;
  border: 1px #707070 solid;
  border-radius: 0.4em;
  width: 100%;
  padding: 0;
  transition: all 0.4s ease;
  transition-property: opacity, transform;
}
.dropdown .options.fade {
  opacity: 0;
  transform: translateY(-0.5em);
}

.dropdown .options > button {
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  padding: 0.1em 1em 0 1em;
  margin: 0;
  width: 100%;
  color: #272727;
  border: 0;
  border-radius: 0.4em;
  background-color: #fff;
  min-height: 2.5em;
  transition: background-color 0.1s ease-in-out;
  transform: scale(1) !important;
}
.dropdown .options > button:focus {
  box-shadow: none;
}
.dropdown .options > button.selected {
  transition-duration: 0.1s;
  background-color: #272727;
  color: #fff;
}
.dropdown .options > button.selected.active,
.dropdown .options > button.selected:focus,
.dropdown .options > button.active,
.dropdown .options > button:focus {
  background-color: #272727;
  color: #fff;
}

@media (hover: hover) {
  .dropdown .options:hover > button:hover {
    transition-duration: 0.1s;
    background-color: #272727;
    color: #fff;
  }
}.c-introduction {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #30488E;
  overflow: hidden;
}

.c-introduction .bg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.c-introduction .bg > div {
  width: 1000vh;
  height: 100vh;
  background: transparent url('../../images/c-introduction/bg.svg') no-repeat;
  background-size: 1000vh 100vh;
  transition: transform 0.9s cubic-bezier(0.15, 0, 0.45, 1);
}
.c-introduction .bg.step-1 > div {
  transform: translateX(-20vw);
}
.c-introduction .bg.step-2 > div {
  transform: translateX(-40vw);
}
.c-introduction .bg.step-3 > div {
  transform: translateX(-60vw);
}
.c-introduction .bg.step-4 > div {
  transform: translateX(-80vw);
}
.c-introduction .bg.step-5 > div {
  transform: translateX(-100vw);
}
.c-introduction .bg.step-6 > div {
  transform: translateX(-120vw);
}
.c-introduction .bg.step-7 > div {
  transform: translateX(-140vw);
}
.c-introduction .bg.step-8 > div {
  transform: translateX(-160vw);
}
.c-introduction .bg.step-9 > div {
  transform: translateX(-180vw);
}
.c-introduction .bg.step-10 > div {
  transform: translateX(-200vw);
}

.c-introduction-questions .c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-introduction-questions .t-c {
  width: 29.2em;
  text-align: center;

  transition: all 0.3s ease-out;
  transition-property: opacity, transform;
  opacity: 1;
  transform: translateX(0);
}
.c-introduction-questions .t-c.forward-out {
  opacity: 0;
  transform: translateX(-10em);
  transition-timing-function: ease-in-out;
  pointer-events: none;
}
.c-introduction-questions .t-c.forward-in {
  opacity: 0;
  transform: translateX(10em);
  transition-timing-function: ease-out;
  pointer-events: none;
}
.c-introduction-questions .t-c.backward-out {
  opacity: 0;
  transform: translateX(10em);
  transition-timing-function: ease-in-out;
  pointer-events: none;
}
.c-introduction-questions .t-c.backward-in {
  opacity: 0;
  transform: translateX(-10em);
  transition-timing-function: ease-out;
  pointer-events: none;
}

.c-introduction-questions .t-c .left {
  text-align: left;
}

.c-introduction-questions .t-c h2 {
  margin-bottom: 0.5em;
}

.c-introduction-questions .t-c .b-c {
  width: 100%;
  margin-top: 2.25em;
  display: flex;
  justify-content: center;
}

.c-introduction-questions.c-questions {
  position: static;
}

.c-introduction-questions.c-questions .question-c.hidden {
  opacity: 0;
  transition-duration: 0s;
}

.c-introduction-questions.c-questions .bf-c {
  min-height: 12em;
  margin-bottom: 1em;
}

.c-introduction-questions.c-questions .q-c .question-c h3 {
  max-width: none;
}

.c-introduction-questions.c-questions .buttons-c button:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3) !important;
}

.c-introduction-questions.c-questions .buttons-c button:nth-child(1),
.c-introduction-questions.c-questions .buttons-c button:nth-child(2),
.c-introduction-questions.c-questions .buttons-c button:nth-child(3) {
  background-color: #fff;
}

.c-introduction-questions.c-questions .buttons-c button > span {
  color: #272727;
}

@media (hover: hover) {
  .c-introduction-questions.c-questions .buttons-c button:nth-child(1):hover,
  .c-introduction-questions.c-questions .buttons-c button:nth-child(2):hover,
  .c-introduction-questions.c-questions .buttons-c button:nth-child(3):hover {
    transform: scale(1.1);
  }
}

.c-introduction-questions.c-questions .buttons-c button:nth-child(1).touched,
.c-introduction-questions.c-questions .buttons-c button:nth-child(1):focus,

.c-introduction-questions.c-questions .buttons-c button:nth-child(2).touched,
.c-introduction-questions.c-questions .buttons-c button:nth-child(2):focus,

.c-introduction-questions.c-questions .buttons-c button:nth-child(3).touched,
.c-introduction-questions.c-questions .buttons-c button:nth-child(3):focus,

.c-introduction-questions.c-questions .buttons-c button.fixed-button {
  transform: scale(1.1);
}

.c-introduction-questions .back-c .b-c2 {
  display: flex;
  justify-content: center;
}
.c-introduction-questions .back-c .b-c2:first-child {
  margin-top: -1em;
}

.c-introduction-questions .feedback {
  position: absolute;
  z-index: 10;
  width: 10.25em;
  height: 9.8em;
  background-color: #E3E3E3;
  border-radius: 0.6em;
  opacity: 0;
  transition: all 0.6s ease;
  transition-property: width, height, top, left, opacity, border-radius;
}
.c-introduction-questions .feedback.expanded {
  width: 100vw;
  height: calc(100vh - 0.5em);
  top: 0.5em !important;
  left: 0 !important;
  opacity: 1;
  border-radius: 0;
}
.c-introduction-questions .feedback.fade {
  opacity: 0;
  transition-duration: 0.5s;
}

.c-introduction-questions .feedback .c {
  width: 100vw;
  height: calc(100vh - 0.5em);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s ease-in-out;
  transition-property: opacity, transform;
}
.c-introduction-questions .feedback .c.fade {
  opacity: 0;
}
.c-introduction-questions .feedback .c.fade-out {
  opacity: 0;
  transition-duration: 0.25s;
}

.c-introduction-questions .feedback .i-c {
  width: 26.6em;
  height: calc(100vh - 0.5em);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-introduction-questions .feedback .i-c img {
  width: 32.19em;
  height: 33.25em;
  transform: translate(-5em, 3em);
}

.c-introduction-questions .feedback .t-c {
  width: calc(100vw - 26.6em);
  text-align: left;
}

.c-introduction-questions .feedback .t-c > div {
  width: 31.1em;
}

.c-introduction-questions .feedback .close-c {
  position: absolute;
  top: 0;
  right: 0;
}

.c-introduction-questions .feedback button.close {
  top: 2.25em;
}

.c-introduction-questions.c-questions h4 {
  margin-bottom: 1em;
}

.c-introduction-questions .nav-c {
  display: inline-block;
  margin-top: 1.25em;
}

.c-introduction-questions .nav-c .b-c2 {
  width: 100%;
  text-align: center;
}

@media (min-width: 1401px) {
  .c-introduction-questions .feedback .c {
    width: 1400px;
    margin-right: calc(50vw - 700px);
    margin-left: calc(50vw - 700px);
  }
}

@media (max-width: 1000px) {
  .c-introduction-questions .feedback .i-c {
    width: 30vw;
  }

  .c-introduction-questions .feedback .i-c img {
    width: 40vw;
    height: 41.31717925vw;
    transform: translate(-5vw, -3vw);
  }

  .c-introduction-questions .feedback .t-c {
    width: 70vw;
  }

  .c-introduction-questions .feedback .t-c > div {
    width: calc(70vw - 80px);
    padding-left: 20px;
  }
}

@media (max-width: 650px) {
  .c-introduction-questions.c-questions .q-c .question-c {
    width: calc(100vw - 48px);
  }

  .c-introduction-questions .t-c {
    width: calc(100vw - 48px);
  }

  .c-introduction-questions .feedback button.close {
    top: 24px;
  }

  .c-introduction-questions .feedback .i-c {
    width: 25vw;
  }

  .c-introduction-questions .feedback .i-c img {
    transform: translate(-5vw, -10vw);
  }

  .c-introduction-questions .feedback .t-c {
    width: 75vw;
  }

  .c-introduction-questions .feedback .t-c > div {
    width: calc(75vw - 20px);
  }
}.c-test {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #EFE9DF;
  overflow: hidden;
}

.c-test-questions .c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-test-questions .t-c {
  width: 40em;
  text-align: center;

  transition: all 0.3s ease-out;
  transition-property: opacity, transform;
  opacity: 1;
  transform: translateX(0);
}
.c-test-questions .t-c.forward-out {
  opacity: 0;
  transform: translateX(-10em);
  transition-timing-function: ease-in-out;
  pointer-events: none;
}
.c-test-questions .t-c.forward-in {
  opacity: 0;
  transform: translateX(10em);
  transition-timing-function: ease-out;
  pointer-events: none;
}
.c-test-questions .t-c.backward-out {
  opacity: 0;
  transform: translateX(10em);
  transition-timing-function: ease-in-out;
  pointer-events: none;
}
.c-test-questions .t-c.backward-in {
  opacity: 0;
  transform: translateX(-10em);
  transition-timing-function: ease-out;
  pointer-events: none;
}

.c-test-questions .t-c .t-small {
  width: 29.2em;
  margin-right: auto;
  margin-left: auto;
}

.c-test-questions .t-c .left {
  text-align: left;
}

.c-test-questions .t-c .h3 {
  margin-bottom: 0.8em;
}

.c-test-questions .t-c h2 {
  margin-bottom: 0.5em;
}

.c-test-questions .t-c .b-c {
  width: 100%;
  margin-top: 2.25em;
  display: flex;
  justify-content: center;
}

.c-test-questions.c-questions {
  position: static;
}

.c-test-questions.c-questions .question-c.hidden {
  opacity: 0;
  transition-duration: 0s;
}

.c-test-questions.c-questions .bf-c {
  min-height: 12em;
  margin-bottom: 1em;
}

.c-test-questions.c-questions .q-c .question-c h3 {
  max-width: none;
}

.c-test-questions.c-questions .buttons-c.answered button {
  opacity: 0.4;
}

.c-test-questions.c-questions .buttons-c button > span:nth-child(2) {
  min-height: 42%;
  line-height: 1.33333;
  color: #272727;
}

.c-test-questions.c-questions .buttons-c button > span:nth-child(3) {
  opacity: 0;
  position: absolute;
  left: -1000em;
  height: 0;
}

.c-test-questions.c-questions .buttons-c button:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3) !important;
}

.c-test-questions.c-questions .buttons-c button:nth-child(1),
.c-test-questions.c-questions .buttons-c button:nth-child(2),
.c-test-questions.c-questions .buttons-c button:nth-child(3) {
  background-color: #fff;
}

@media (hover: hover) {
  .c-test-questions.c-questions .buttons-c button:nth-child(1):hover,
  .c-test-questions.c-questions .buttons-c button:nth-child(2):hover,
  .c-test-questions.c-questions .buttons-c button:nth-child(3):hover {
    transform: scale(1.1);
  }

  .c-test-questions.c-questions .buttons-c.answered button:hover {
    opacity: 1;
  }
}

.c-test-questions.c-questions .buttons-c button:nth-child(1).touched,
.c-test-questions.c-questions .buttons-c button:nth-child(1):focus,

.c-test-questions.c-questions .buttons-c button:nth-child(2).touched,
.c-test-questions.c-questions .buttons-c button:nth-child(2):focus,

.c-test-questions.c-questions .buttons-c button:nth-child(3).touched,
.c-test-questions.c-questions .buttons-c button:nth-child(3):focus,
.c-test-questions.c-questions .buttons-c button.fixed-button {
  transform: scale(1.1);
  opacity: 1;
}

.c-test-questions.c-questions .buttons-c button.fixed-button > span:nth-child(3) {
  display: block;
}

.c-test-questions.c-questions .buttons-c.answered button.touched {
  opacity: 1;
}

.c-test-questions .back-c .b-c {
  display: flex;
  justify-content: center;
}

.c-test-questions .question-c .back-c {
  margin-top: -1em;
}

.c-test-questions.c-questions h4 {
  margin-bottom: 1em;
}

.c-test-questions .nav-c {
  display: inline-block;
  margin-top: 1.25em;
}

.c-test-questions .nav-c .b-c2 {
  width: 100%;
  text-align: center;
}

.c-test-questions .icon {
  width: 3.9em;
  height: 3.9em;
  margin: 0 auto 1.25em;
  background: transparent url('../images/test-completed.svg') no-repeat;
  background-size: 3.9em 3.9em;
}

@media (max-width: 650px) {
  .c-test-questions.c-questions .q-c .question-c {
    width: calc(100vw - 48px);
  }

  .c-test-questions .t-c {
    width: calc(100vw - 48px);
  }

  .c-test-questions .t-c .t-small {
    width: calc(100vw - 48px);
  }
}