@charset "UTF-8";
/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block;
}

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

[hidden] {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html, button, input, select, textarea {
  font-family: sans-serif;
  color: #222;
}

body {
  background: #fff;
  margin: 0;
  font-family: "Mulish", sans-serif;
  font-size: 62.5%;
  font-weight: 400;
  line-height: 1em;
  min-height: 100vh;
}

::-moz-selection {
  background: #ff9f2e;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #ff9f2e;
  color: #fff;
  text-shadow: none;
}

a {
  color: #ff9f2e;
  text-decoration: none;
}

a:visited {
  color: #ff9f2e;
}

a:hover {
  color: #ff9f2e;
}

a:focus {
  outline: thin dotted #ff9f2e;
}

a:hover, a:active {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

pre, code, kbd, samp {
  font-family: monospace, serif;
  _font-family: "courier new", monospace;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: none;
}

q:before, q:after {
  content: "";
  content: none;
}

small {
  font-size: 85%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

ul, ol {
  margin: 0;
  padding: 0;
}

dd {
  margin: 0 0 0 40px;
}

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

form {
  margin: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

label {
  cursor: pointer;
}

legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
  white-space: normal;
}

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

button, input {
  line-height: normal;
}

button, input[type=button], input[type=reset], input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible;
}

button[disabled], input[disabled] {
  cursor: default;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
  *width: 13px;
  *height: 13px;
}

input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input:invalid, textarea:invalid {
  background-color: #f0dddd;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  vertical-align: top;
}

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: black;
  padding: 0.2em 0;
}

/* =============================================================================
   Icons
   ========================================================================== */
.icon {
  display: inline-block;
  overflow: hidden;
  text-indent: -9999px;
}

.icon-arrow-right {
  background: transparent url(../../img/theme/icon-arrow-right.svg) no-repeat center center;
  background-size: 100%;
  height: 10px;
  width: 30px;
}

.icon-arrow-left {
  background: transparent url(../../img/theme/icon-arrow-right.svg) no-repeat center center;
  background-size: 100%;
  height: 10px;
  transform: rotate(-180deg);
  width: 30px;
}

.icon-magnifier {
  background: transparent url(../../img/theme/icon-magnifier.gif) no-repeat center center;
  background-size: 100%;
  height: 52px;
  width: 52px;
}

.icon-commas-1 {
  background: transparent url(../../img/theme/icon-commas-1.svg) no-repeat center center;
  background-size: 100%;
  height: 19px;
  width: 47px;
}

.icon-commas-2 {
  background: transparent url(../../img/theme/icon-commas-2.svg) no-repeat center center;
  background-size: 100%;
  height: 11px;
  width: 33px;
}

.icon-commas-3 {
  background: transparent url(../../img/theme/icon-commas-3.svg) no-repeat center center;
  background-size: 100%;
  height: 11px;
  width: 33px;
}

.icon-commas-5 {
  background: transparent url(../../img/theme/icon-commas-5.svg) no-repeat center center;
  background-size: 100%;
  height: 11px;
  width: 33px;
}

.icon-commas-6 {
  background: transparent url(../../img/theme/icon-commas-6.svg) no-repeat center center;
  background-size: 100%;
  height: 11px;
  width: 33px;
}

.icon-commas-8 {
  background: transparent url(../../img/theme/icon-commas-8.svg) no-repeat center center;
  background-size: 100%;
  height: 11px;
  width: 33px;
}

.icon-refes {
  background: transparent url(../../img/theme/icon-refes.svg) no-repeat center center;
  background-size: 100%;
  height: 21px;
  width: 16px;
}

.icon-refes-2 {
  background: transparent url(../../img/theme/icon-refes-2.svg) no-repeat center center;
  background-size: 100%;
  height: 21px;
  width: 16px;
  display: inline-block;
}

.icon-faqs {
  background: transparent url(../../img/theme/icon-faqs.svg) no-repeat center center;
  background-size: 100%;
  height: 20px;
  width: 20px;
  margin-left: 3px;
}

.icon-faqs-2 {
  background: transparent url(../../img/theme/icon-faqs-2.svg) no-repeat center center;
  background-size: 100%;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-left: 3px;
}

.icon-daniel {
  background: transparent url(../../img/theme/icon-daniel.svg) no-repeat center center;
  background-size: 100%;
  height: 46px;
  width: 46px;
}

.icon-maria {
  background: transparent url(../../img/theme/icon-maria.svg) no-repeat center center;
  background-size: 100%;
  height: 46px;
  width: 46px;
}

.icon-blanca {
  background: transparent url(../../img/theme/icon-blanca.svg) no-repeat center center;
  background-size: 100%;
  height: 46px;
  width: 46px;
}

.icon-lucia {
  background: transparent url(../../img/theme/icon-lucia.svg) no-repeat center center;
  background-size: 100%;
  height: 46px;
  width: 46px;
}

.icon-jose {
  background: transparent url(../../img/theme/icon-jose.svg) no-repeat center center;
  background-size: 100%;
  height: 46px;
  width: 46px;
}

.icon-martina {
  background: transparent url(../../img/theme/icon-martina.svg) no-repeat center center;
  background-size: 100%;
  height: 46px;
  width: 46px;
}

.icon-javier {
  background: transparent url(../../img/theme/icon-javier.svg) no-repeat center center;
  background-size: 100%;
  height: 46px;
  width: 46px;
}

.icon-window-actions {
  background: transparent url(../../img/theme/icon-window-actions.svg) no-repeat center center;
  background-size: 100%;
  height: 12px;
  width: 54px;
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   BUTTON Styles
   ========================================================================== */
.btn {
  border-radius: 50px;
  color: #fff;
  font-size: 0.94rem;
  line-height: 1.5rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  text-decoration: none;
}
.btn:visited {
  color: #fff;
}
.btn.btn-md {
  padding: 0.3rem 0.5rem;
}
.btn:disabled {
  opacity: 0.5;
}
.btn .ripple {
  display: none;
}

#loading {
  display: none;
}

.btn-primary {
  background-color: #651595;
  border: 2px solid #651595;
  color: #fff !important;
  min-width: 180px;
}
.btn-primary:disabled {
  background-color: #651595;
  border: 2px solid #651595;
}
.btn-primary:disabled #loading {
  display: inherit;
}
.btn-primary.active, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: #ff9f2e !important;
  border: 2px solid #ff9f2e !important;
}
.btn-primary span {
  margin: 7px 5px -2px 10px;
}
.btn-primary span.left {
  margin: 7px 10px -2px 5px;
}

.btn-secondary {
  background-color: #ff9f2e;
  border: 2px solid #ff9f2e;
  color: #fff !important;
  min-width: 170px;
}
.btn-secondary:disabled {
  background-color: #ff9f2e;
  border: 2px solid #ff9f2e;
  opacity: 0.5;
}
.btn-secondary.active, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background-color: #651595 !important;
  border: 2px solid #651595 !important;
}
.btn-secondary span {
  margin: 7px 5px -2px 10px;
}
.btn-secondary span.left {
  margin: 7px 10px -2px 5px;
}

.btn-icon {
  background-color: #651595;
  border: 2px solid #651595;
  border-radius: 3rem;
  color: #fff !important;
  min-height: 37px;
  padding: 6px 3px 0 0;
  text-align: center;
  min-width: 37px !important;
}
.btn-icon:disabled {
  background-color: #651595;
  border: 2px solid #651595;
  opacity: 0.5;
}
.btn-icon.active, .btn-icon:hover, .btn-icon:active {
  background-color: #ff9f2e !important;
  border: 2px solid #ff9f2e !important;
}
.btn-icon.state-active {
  background-color: #ff9f2e !important;
  border: 2px solid #ff9f2e !important;
}

.is-mobile .btn {
  position: relative;
  overflow: hidden;
}
.is-mobile .btn:hover, .is-mobile .btn:active, .is-mobile .btn:focus {
  background-color: #651595 !important;
  border: 2px solid #651595 !important;
}
.is-mobile .btn.active {
  background-color: #ff9f2e !important;
  border: 2px solid #ff9f2e !important;
}
.is-mobile .btn .ripple {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  display: block;
  position: absolute;
  transform: scale(0);
  animation: ripple 0.6s linear;
}
.is-mobile .btn-icon.state-active {
  background-color: #ff9f2e !important;
  border: 2px solid #ff9f2e !important;
}

@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}
/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   FORM Styles
   ========================================================================== */
form {
  margin: 0;
}

label {
  color: #651595;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.1rem;
  margin-bottom: 0.5rem;
}

textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
input[type=file],
.uneditable-input {
  background-color: #fff;
  border: 1px solid #670F9B;
  border-radius: 2rem;
  color: #651595;
  display: inline-block;
  padding: 0.7rem 1rem;
  font-size: 0.94rem;
  vertical-align: middle;
  text-align: center;
}
textarea::placeholder,
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=datetime]::placeholder,
input[type=datetime-local]::placeholder,
input[type=date]::placeholder,
input[type=month]::placeholder,
input[type=time]::placeholder,
input[type=week]::placeholder,
input[type=number]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=color]::placeholder,
input[type=file]::placeholder,
.uneditable-input::placeholder {
  color: #cbcbcb;
  font-size: 0.94rem;
}

input {
  display: block;
  font-weight: 300;
  width: 100%;
}
input[type=submit] {
  width: auto;
}
input[type=checkbox], input[type=radio] {
  display: inline;
  margin: -1px 5px 0 0;
  width: auto;
}

select {
  background-color: #fff;
  border: 1px solid #670F9B;
  border-radius: 2rem;
  color: #651595;
  display: block;
  font-size: 1rem;
  min-height: 2.8rem;
  padding: 0.7rem 1rem;
  position: relative;
  width: 100%;
}
select option {
  position: relative;
}

textarea {
  width: 100%;
}

input:disabled,
textarea:disabled {
  background-color: rgba(0, 0, 0, 0.5);
}

.field {
  clear: both;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

/* Base for label styling */
.checkbox-custom-1[type=checkbox]:not(:checked),
.checkbox-custom-1[type=checkbox]:checked {
  position: absolute;
  left: 0;
  opacity: 0.01;
}

.checkbox-custom-1[type=checkbox]:not(:checked) + label,
.checkbox-custom-1[type=checkbox]:checked + label {
  position: relative;
  padding-left: 2.3em;
  font-size: 1.05em;
  line-height: 1.7;
  cursor: pointer;
}

/* checkbox aspect */
.checkbox-custom-1[type=checkbox]:not(:checked) + label:before,
.checkbox-custom-1[type=checkbox]:checked + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid #aaa;
  background: #fff;
  border-radius: 0.2em;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 rgba(203, 34, 237, 0.2);
  -webkit-transition: all 0.275s;
  transition: all 0.275s;
}

/* checked mark aspect */
.checkbox-custom-1[type=checkbox]:not(:checked) + label:after,
.checkbox-custom-1[type=checkbox]:checked + label:after {
  content: "✕";
  position: absolute;
  top: 0.525em;
  left: 0.18em;
  font-size: 1.375em;
  color: #cb22ed;
  line-height: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/* checked mark aspect changes */
.checkbox-custom-1[type=checkbox]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0) rotate(45deg);
  transform: scale(0) rotate(45deg);
}

.checkbox-custom-1[type=checkbox]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}

/* Disabled checkbox */
.checkbox-custom-1[type=checkbox]:disabled:not(:checked) + label:before,
.checkbox-custom-1[type=checkbox]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #e9e9e9;
}

.checkbox-custom-1[type=checkbox]:disabled:checked + label:after {
  color: #777;
}

.checkbox-custom-1[type=checkbox]:disabled + label {
  color: #aaa;
}

/* Accessibility */
.checkbox-custom-1[type=checkbox]:checked:focus + label:before,
.checkbox-custom-1[type=checkbox]:not(:checked):focus + label:before {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 6px rgba(203, 34, 237, 0.2);
}

.switch {
  bottom: -2px;
  display: inline-block;
  height: 16px;
  margin-right: 5px;
  position: relative;
  width: 26px;
}

.switch-input {
  display: none !important;
}

.switch-label {
  display: block;
  width: 26px;
  height: 15px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  user-select: none;
}

.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}

.switch-label::before {
  width: 100%;
  height: 100%;
  background-color: #FFCE5C;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
  top: 0;
}

.switch-label::after {
  top: 1px;
  left: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #EDEDED;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}

.switch-input:checked + .switch-label::before {
  background-color: #89c12d;
}

.switch-input:checked + .switch-label::after {
  left: 12px;
}

.select-buttons-input {
  bottom: -2px;
  display: inline-block;
  height: 16px;
  margin-right: 5px;
  position: relative;
  width: 26px;
}

.select-buttons-input {
  display: none !important;
}

.select-buttons-label {
  display: block;
  width: 100%;
  min-height: 38px;
  line-height: 38px;
  clip: rect(0 0 0 0);
  color: #fff;
  position: relative;
  text-align: center;
  user-select: none;
}
.select-buttons-label span {
  position: relative;
  z-index: 2;
}

.select-buttons-label::before {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
  z-index: 1;
}

.select-buttons-label::before {
  width: 100%;
  height: 100%;
  background-color: #F69A28;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
  top: 0;
}

.select-buttons-input:checked + .select-buttons-label::before {
  background-color: #C531CA;
}

#game-radio-8-list .select-buttons-label {
  margin: 0 auto 1rem;
  width: 80%;
}

.select-buttons-dashed-input,
.select-buttons-dashed-purple-input {
  bottom: -2px;
  display: inline-block;
  height: 16px;
  margin-right: 5px;
  position: relative;
  width: 26px;
}

.select-buttons-dashed-input,
.select-buttons-dashed-purple-input {
  display: none !important;
}

.select-buttons-dashed-label,
.select-buttons-dashed-purple-label {
  display: block;
  width: 100%;
  min-height: 38px;
  line-height: 1.2rem;
  clip: rect(0 0 0 0);
  color: #670F9B;
  font-weight: 400;
  margin-bottom: 1.2rem;
  padding: 0.75rem 1rem;
  position: relative;
  text-align: center;
  user-select: none;
}
.select-buttons-dashed-label span,
.select-buttons-dashed-purple-label span {
  position: relative;
  z-index: 2;
}

.select-buttons-dashed-label::before,
.select-buttons-dashed-purple-label::before {
  content: "";
  display: block;
  left: 0;
  position: absolute;
  cursor: pointer;
  z-index: 1;
}

.select-buttons-dashed-label::before,
.select-buttons-dashed-purple-label::before {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px dashed #F69A28;
  border-radius: 0.74rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
  top: 0;
}

.select-buttons-dashed-label::before,
.select-buttons-dashed-purple-label::before {
  border: 1px dashed #F69A28;
}

.select-buttons-dashed-input:checked + .select-buttons-dashed-label,
.select-buttons-dashed-purple-input:checked + .select-buttons-dashed-purple-label {
  color: #fff;
}

.select-buttons-dashed-input:checked + .select-buttons-dashed-label::before,
.select-buttons-dashed-purple-input:checked + .select-buttons-dashed-purple-label::before {
  background-color: #F69A28;
  border: 1px solid #F69A28;
}

.select-buttons-dashed-purple-input:checked + .select-buttons-dashed-purple-label::before {
  background-color: #C89BEF;
  border: 1px solid #C89BEF;
}

.select-buttons-dashed-label .icon-pills {
  background-size: 100%;
  display: block;
  height: 81px;
  margin: 1rem auto 0.75rem;
  width: 54px;
}

.select-buttons-dashed-label .icon-pills-1 {
  background: transparent url("../../img/theme/pills-1.svg") no-repeat 0 0;
}

.select-buttons-dashed-label .icon-pills-2 {
  background: transparent url("../../img/theme/pills-2.svg") no-repeat 0 0;
}

.select-buttons-dashed-label .icon-pills-3 {
  background: transparent url("../../img/theme/pills-3.svg") no-repeat 0 0;
}

.select-buttons-dashed-label .icon-pills-4 {
  background: transparent url("../../img/theme/pills-4.svg") no-repeat 0 0;
}

.select-buttons-dashed-input:checked + .select-buttons-dashed-label .icon-pills {
  background: transparent url("../../img/theme/pills-active.svg") no-repeat 0 0;
}

.select-buttons-abc-input {
  bottom: -2px;
  display: inline-block;
  height: 16px;
  margin-right: 5px;
  position: relative;
  width: 26px;
}

.select-buttons-abc-input {
  display: none !important;
}

.select-buttons-abc-label {
  display: block;
  width: 100%;
  min-height: 38px;
  line-height: 26px;
  clip: rect(0 0 0 0);
  color: #670F9B;
  font-weight: 400;
  position: relative;
  text-align: left;
  user-select: none;
  padding-left: 2.75rem;
  position: relative;
}
.select-buttons-abc-label span {
  border: 1px solid #7D7D7D;
  border-radius: 7px;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 800;
  left: 0;
  line-height: 30px;
  margin-right: 0.5rem;
  min-height: 30px;
  min-width: 32px;
  position: absolute;
  text-align: center;
  top: -0.2rem;
}

.select-buttons-abc-input:checked + .select-buttons-abc-label span {
  background-color: #F69A28;
  border-color: #F69A28;
  color: #fff;
}

.injection-buttons-input {
  bottom: -2px;
  display: inline-block;
  height: 16px;
  margin-right: 5px;
  position: relative;
  width: 26px;
}

.injection-buttons-input {
  display: none !important;
}

.injection-buttons-label {
  display: flex;
  width: 100%;
  min-height: 38px;
  line-height: 38px;
  clip: rect(0 0 0 0);
  color: #C89BEF;
  font-size: 1rem;
  line-height: 1.2rem;
  margin: 0 0 1.5rem;
  position: relative;
  text-align: right;
  user-select: none;
}
.injection-buttons-label .injection-buttons-button {
  border: 1px dashed #C89BEF;
  border-radius: 5px;
  display: inline-block;
  font-weight: 800;
  margin-right: 0.5rem;
  min-height: 39px;
  min-width: 78px;
  padding: 0.3rem 1rem;
  text-align: center;
}
.injection-buttons-label .injection-buttons-button strong {
  color: #C89BEF;
  display: block;
  font-size: 1.3rem;
}
.injection-buttons-label .injection-labels {
  color: #670F9B;
  margin: 0.3rem 0.5rem;
  text-align: left;
}

.injection-buttons-input:checked + .injection-buttons-label .injection-buttons-button {
  background-color: #670F9B;
  border-color: #670F9B;
  color: #fff;
}
.injection-buttons-input:checked + .injection-buttons-label .injection-buttons-button strong {
  color: #fff;
}

.form-errors {
  background-color: #CA316D;
  margin-bottom: 1.5rem;
  padding: 1rem;
}
.form-errors * {
  color: #fff;
  font-size: 0.85rem;
  margin: 0 !important;
  text-align: left;
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   Modals
   ========================================================================== */
.modal h2 {
  color: #651595;
}
.modal form {
  margin: 30px 0 0;
}
.modal a {
  color: #651595;
}
.modal small {
  font-size: 0.9em;
}

.modal-content {
  border: 0;
  border-radius: 0;
}
.modal-content--with-radius {
  border-radius: 100px 0 100px 0;
}

.modal-title {
  color: #651595;
  font-size: 28px;
  font-weight: 800;
  padding: 0;
  text-align: center;
}
.modal-title .icon {
  display: block;
  margin: -20px auto 20px;
  text-align: center;
}

.modal-backdrop {
  background-color: #651595;
}
.modal-backdrop.show {
  opacity: 0.75;
}

.modal-header {
  border: 0;
  padding: 40px 60px 0;
}
.modal-header h1,
.modal-header h2 {
  font-size: 24px;
  line-height: 1.4;
}
.modal-header .close {
  color: #651595;
  font-size: 45px;
  font-weight: 200;
  margin-right: -30px;
  margin-top: -2rem;
  padding: 20px 15px 0;
  text-shadow: 0 0 0 #fff;
  z-index: 999;
}
.modal-header p {
  font-size: 12px;
  margin: 0 0 0 15px;
}

.modal-body {
  max-height: 600px;
  overflow-y: auto;
  padding: 10px 60px 20px;
}
.modal-body h1,
.modal-body h2,
.modal-body h3,
.modal-body h4,
.modal-body h5,
.modal-body h6 {
  background: transparent none;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}
.modal-body h2 {
  color: #651595;
  display: inline-block;
  font-size: 23px;
  line-height: 1.4;
  margin-bottom: 15px;
  padding: 10px 0 0;
}
.modal-body h3 {
  font-size: 18px;
  line-height: 1.4;
}
.modal-body h4,
.modal-body h5 {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}
.modal-body p,
.modal-body li {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.modal-body table {
  font-size: 13px;
  line-height: 20px;
}
.modal-body table td {
  padding: 10px;
}
.modal-body a {
  text-decoration: underline;
}
.modal-body .buttons-section {
  margin-top: 30px;
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   HEADER Styles
   ========================================================================== */
.header {
  position: relative;
}

.header-access {
  padding: 2.5rem 0 1.8rem;
}
.header-access::before {
  background-color: #651595;
  content: "";
  height: 4px;
  left: 50%;
  margin-left: -57px;
  position: absolute;
  top: 0;
  width: 114px;
}
.header-access .logo {
  width: 194px;
}

.header-content {
  margin-bottom: 2.5rem;
  padding: 2.5rem 1.2rem 0;
  text-align: center;
}
.header-content::before {
  background-color: #670F9B;
  content: "";
  height: 2.8rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.header-content .header-content-wrapper {
  background-color: #fff;
  border-radius: 2rem;
  box-shadow: 0 8.3px 13.5px -5.2px rgba(0, 0, 0, 0.07);
  margin: -1.6rem 0 -2rem;
  padding: 0.8rem 0.75rem 0.7rem 1.5rem;
  position: relative;
  z-index: 2;
}
.header-content .logo {
  width: 140px;
}

.clock {
  position: relative;
  text-align: right;
}
.clock img {
  left: -1rem;
  margin-top: -24px !important;
  position: absolute;
  top: 50%;
}
.clock .time-remaining {
  background-color: #FFA02F;
  border-radius: 2rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1rem 0.75rem 2rem;
  text-align: right;
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   FOOTER Styles
   ========================================================================== */
.main-footer {
  background-color: #fff;
  bottom: 0;
  left: 0;
  min-height: 80px;
  padding: 1.5rem 0;
  position: fixed;
  width: 100%;
  z-index: 3;
}
.main-footer .btn {
  min-width: 180px;
}
.main-footer #btnContinuar {
  padding-left: 1.5rem;
}

#logo-alexion {
  display: none;
  float: right;
  margin-right: 2rem;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
  width: 150px;
}

.access-page #logo-alexion {
  display: block;
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   Progress bar
   ========================================================================== */
.course-progress {
  margin: 0 2.5rem;
  min-height: 17px;
  padding: 0.75rem 0 1.5rem;
  position: relative;
}
.course-progress #pathContainer {
  position: relative;
  width: 100%;
}
.course-progress #pathContainer-sections {
  position: relative;
  min-height: 17px;
  z-index: 2;
}
.course-progress #pathContainer-sections span {
  background: transparent url("../../img/theme/progress-complete.svg") no-repeat 0 0;
  height: 17px;
  left: 0;
  margin-left: -9px;
  margin-top: -9px;
  position: absolute;
  top: 50%;
  width: 17px;
}
.course-progress #pathContainer-sections span.faded {
  background: transparent url("../../img/theme/progress-pending.svg") no-repeat 0 0;
}
.course-progress #pathContainer-sections span div {
  display: none;
}
.course-progress #pathContainer-bar {
  background-color: #C89BEF;
  height: 1px;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 1;
}
.course-progress #pathContainer-bar #pathContainer-progress {
  background-color: #670F9B;
  height: 1px;
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
body {
  background: #fff none;
  color: #651595;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  position: relative;
}
body.video-landscape {
  overflow: hidden;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}

hr {
  display: block;
  height: 0.1rem;
  border: 0;
  border-top: 1px solid #670F9B;
  margin: 1.8rem 0.75rem 2rem;
  opacity: 1;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

a:hover {
  cursor: pointer;
}

/* ==========================================================================
   Helpers
   ========================================================================== */
.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

/* ==========================================================================
     COMMON Styles
     ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #651595;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.3rem;
  margin-bottom: 1rem;
  margin-top: 0;
  padding-left: 0;
}

p {
  color: #670F9B;
  font-size: 1.065rem;
  letter-spacing: -0.06rem;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

ul,
ol {
  margin: 0;
  padding: 0 0 1rem 1rem;
}

li {
  color: #670F9B;
  font-size: 1.065rem;
  letter-spacing: -0.06rem;
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
}

table {
  color: #670F9B;
  font-size: 1.065rem;
  letter-spacing: -0.06rem;
  line-height: 1.5rem;
}

.table td,
.table th {
  padding: 0.5rem;
}

strong {
  color: #670F9B;
  font-weight: 700;
}

.text-sm {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-xs {
  font-size: 0.63rem;
  line-height: 1rem;
}

.main-content {
  padding-bottom: 2rem;
}

.refs {
  padding: 1.5rem 0.5rem 1rem;
}
.refs p {
  color: #454545;
  font-size: 0.75rem;
  line-height: 1rem;
  margin: 0;
}
.refs strong {
  color: #595959;
  font-weight: 800;
}

.text-gray {
  color: #7D7D7D;
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   Access page
   ========================================================================== */
.access-page {
  background: rgb(101, 21, 149);
  background: linear-gradient(29deg, rgb(101, 21, 149) 23%, rgb(255, 159, 46) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2.5rem 0;
  text-align: center;
}
.access-page form {
  padding: 0 0.5rem;
}
.access-page h1 {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1rem 0 0.8rem;
}
.access-page p {
  margin-bottom: 2rem;
}
.access-page .btn {
  margin-top: 1rem;
}

.access-page-wrapper {
  background-color: #fff;
  border-radius: 2rem;
  margin: auto 2.2rem;
  padding: 0 1rem 1.5rem;
  position: relative;
}
.access-page-wrapper .main-content {
  padding-bottom: 1rem;
}

#register-form {
  padding: 0 0.5rem;
}
#register-form .field {
  margin-bottom: 2.5rem;
  margin-top: 0.5rem;
}
#register-form a {
  color: #595959;
}

#passwRecovered {
  font-size: 20px;
}

.page-legal h1 {
  margin-bottom: 0;
  text-align: center;
}
.page-legal h2 {
  font-size: 1rem;
  margin-top: 1.5rem;
  text-align: left;
}
.page-legal h3 {
  font-size: 1rem;
  margin-top: 1.5rem;
  text-align: left;
}
.page-legal p, .page-legal li {
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
  text-align: left;
}
.page-legal .close {
  float: right;
  background-color: #651595;
  border-radius: 30px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 30px;
  margin-top: -2.5rem;
  position: relative;
  z-index: 2;
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   Course selection
   ========================================================================== */
.course-selection .main-content {
  padding: 0 0 5rem;
}
.course-selection #page-game-select-actions {
  padding: 1.5rem 1.5rem;
}
.course-selection img {
  max-width: 100%;
}
.course-selection p {
  padding: 0.5rem 1.5rem 1.85rem;
}
.course-selection .bg-purple {
  background-color: rgba(238, 214, 255, 0.6);
  border-radius: 10px 10px 0 0;
  margin: 0 0 -1.25rem 0;
}
.course-selection .bg-orange {
  background-color: rgba(255, 239, 221, 0.7);
  border-radius: 10px 10px 0 0;
  margin: 0 0 -1.25rem 0;
}
.course-selection a {
  color: #670F9B;
  text-decoration: underline;
}
.course-selection .btn {
  text-decoration: none;
}
.course-selection .btn-primary {
  min-width: 160px;
  padding-left: 1.5rem;
}
.course-selection .bg {
  padding: 1.75rem 1.75rem 1rem;
}
.course-selection .bg p {
  font-weight: 600;
}
.course-selection .bg img {
  border-radius: 24px;
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.07);
  margin-bottom: 0.5rem;
  margin-right: -15px;
  width: 100%;
}
.course-selection .bg-1 {
  background: transparent url("../../img/theme/bg-1.png") no-repeat 0 0;
}
.course-selection .bg-2 {
  background: transparent url("../../img/theme/bg-2.png") no-repeat 100% 80%;
}
.course-selection .refs {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
Course content
========================================================================== */
.course-content .main-content {
  padding: 0 1rem 7rem;
}
.course-content h1 {
  font-weight: 900;
  padding: 0 0 0.8rem;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
}
.course-content img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.course-content .full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

#image-content-wrap.full-width img {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

.dialog-0 {
  margin-bottom: 3rem;
  padding: 0;
  position: relative;
}
.dialog-0 p,
.dialog-0 li {
  color: #670F9B;
}

.dialog-1 {
  border: 1px solid #F69A28;
  border-radius: 10px;
  margin-bottom: 3rem;
  padding: 0;
  position: relative;
}
.dialog-1 div {
  background-color: rgba(246, 154, 40, 0.07);
  border-radius: 10px;
  margin: 8px -8px -8px 8px;
  padding: 2rem 1.5rem 3rem;
}
.dialog-1 .icon,
.dialog-1 .dialog-icon-1 {
  position: absolute;
}
.dialog-1 .icon-left-top {
  background-color: #fff;
  border: 1px solid #F69A28;
  border-radius: 3rem;
  left: -16px;
  top: -26px;
}
.dialog-1 .icon-right-top {
  background-color: #fff;
  border-left: 10px solid #fff;
  border-right: 10px solid #fff;
  right: 36px;
  top: -12px;
}
.dialog-1 .dialog-icon-1 {
  background: transparent url(../../img/theme/dialog-icon-1.svg) no-repeat 0 0;
  bottom: -26.5px;
  left: 30px;
  height: 31.11px;
  width: 97.5px;
}

.dialog-2,
.dialog-7 {
  border: 1px solid #42E1FB;
  border-radius: 10px;
  margin-bottom: 2.5rem;
  padding: 0;
  position: relative;
}
.dialog-2 div,
.dialog-7 div {
  background-color: rgba(66, 225, 251, 0.2);
  border-radius: 10px;
  margin: 4px 4px -4px -4px;
  padding: 0.75rem 1.5rem 0.05rem;
}
.dialog-2 .icon,
.dialog-2 .dialog-icon-1,
.dialog-7 .icon,
.dialog-7 .dialog-icon-1 {
  position: absolute;
}
.dialog-2 .icon-left-top,
.dialog-7 .icon-left-top {
  background-color: #fff;
  border-radius: 3rem;
  left: -16px;
  top: -26px;
}
.dialog-2 .icon-right-top,
.dialog-7 .icon-right-top {
  background-color: #fff;
  border-left: 8px solid #fff;
  border-right: 8px solid #fff;
  right: 10px;
  top: -8px;
}
.dialog-2 .dialog-icon-1,
.dialog-7 .dialog-icon-1 {
  background: transparent url(../../img/theme/dialog-icon-2.svg) no-repeat 0 0;
  bottom: -26.5px;
  left: 20px;
  height: 31.11px;
  width: 97.5px;
}
.dialog-2 p,
.dialog-2 li,
.dialog-7 p,
.dialog-7 li {
  color: #670F9B;
}

.dialog-3,
.dialog-4 {
  border: 1px solid #7115AD;
  border-radius: 10px;
  margin-bottom: 2.5rem;
  padding: 0;
  position: relative;
}
.dialog-3 div,
.dialog-4 div {
  background-color: rgba(113, 21, 173, 0.1);
  border-radius: 10px;
  margin: 4px 4px -4px -4px;
  padding: 0.75rem 1.5rem 0.05rem;
}
.dialog-3 .icon,
.dialog-3 .dialog-icon-1,
.dialog-4 .icon,
.dialog-4 .dialog-icon-1 {
  position: absolute;
}
.dialog-3 .icon-right-top,
.dialog-4 .icon-right-top {
  background-color: #fff;
  border-radius: 3rem;
  right: -16px;
  top: -26px;
}
.dialog-3 .icon-left-top,
.dialog-4 .icon-left-top {
  background-color: #fff;
  border-left: 8px solid #fff;
  border-right: 8px solid #fff;
  left: 10px;
  top: -8px;
}
.dialog-3 .dialog-icon-1,
.dialog-4 .dialog-icon-1 {
  background: transparent url(../../img/theme/dialog-icon-3.svg) no-repeat 0 0;
  bottom: -26.5px;
  right: 20px;
  height: 31.11px;
  width: 97.5px;
}
.dialog-3 p,
.dialog-3 li,
.dialog-4 p,
.dialog-4 li {
  color: #670F9B;
}

.dialog-5 {
  border: 1px solid #C531CA;
  border-radius: 10px;
  margin-bottom: 2.5rem;
  padding: 0;
  position: relative;
}
.dialog-5 div {
  background-color: rgba(254, 234, 255, 0.5);
  border-radius: 10px;
  margin: 4px 4px -4px -4px;
  padding: 0.75rem 1.5rem 0.05rem;
}
.dialog-5 .icon,
.dialog-5 .dialog-icon-1 {
  position: absolute;
}
.dialog-5 .icon-right-top {
  background-color: #fff;
  border-radius: 3rem;
  right: -16px;
  top: -26px;
}
.dialog-5 .icon-left-top {
  background-color: #fff;
  border-left: 8px solid #fff;
  border-right: 8px solid #fff;
  left: 10px;
  top: -8px;
}
.dialog-5 .dialog-icon-1 {
  background: transparent url(../../img/theme/dialog-icon-5.svg) no-repeat 0 0;
  bottom: -26.5px;
  right: 20px;
  height: 31.11px;
  width: 97.5px;
}
.dialog-5 p,
.dialog-5 li {
  color: #670F9B;
}

.dialog-8 {
  border: 1px solid #20DC60;
  border-radius: 10px;
  margin-bottom: 2.5rem;
  padding: 0;
  position: relative;
}
.dialog-8 div {
  background-color: rgba(211, 255, 226, 0.3);
  border-radius: 10px;
  margin: 4px 4px -4px -4px;
  padding: 0.75rem 1.5rem 0.05rem;
}
.dialog-8 .icon,
.dialog-8 .dialog-icon-1 {
  position: absolute;
}
.dialog-8 .icon-right-top {
  background-color: #fff;
  border-radius: 3rem;
  right: -16px;
  top: -26px;
}
.dialog-8 .icon-left-top {
  background-color: #fff;
  border-left: 8px solid #fff;
  border-right: 8px solid #fff;
  left: 10px;
  top: -8px;
}
.dialog-8 .dialog-icon-1 {
  background: transparent url(../../img/theme/dialog-icon-8.svg) no-repeat 0 0;
  bottom: -26.5px;
  right: 20px;
  height: 31.11px;
  width: 97.5px;
}
.dialog-8 p,
.dialog-8 li {
  color: #670F9B;
}

.dialog-6 {
  border: 1px solid #F6CF02;
  border-radius: 10px;
  margin-bottom: 2.5rem;
  padding: 0;
  position: relative;
}
.dialog-6 div {
  background-color: rgba(246, 207, 2, 0.08);
  border-radius: 10px;
  margin: 4px 4px -4px -4px;
  padding: 0.75rem 1.5rem 0.05rem;
}
.dialog-6 .icon,
.dialog-6 .dialog-icon-1 {
  position: absolute;
}
.dialog-6 .icon-left-top {
  background-color: #fff;
  border-radius: 3rem;
  left: -16px;
  top: -26px;
}
.dialog-6 .icon-right-top {
  background-color: #fff;
  border-left: 8px solid #fff;
  border-right: 8px solid #fff;
  right: 10px;
  top: -8px;
}
.dialog-6 .dialog-icon-1 {
  background: transparent url(../../img/theme/dialog-icon-6.svg) no-repeat 0 0;
  bottom: -26.5px;
  left: 20px;
  height: 31.11px;
  width: 97.5px;
}
.dialog-6 p,
.dialog-6 li {
  color: #670F9B;
}

.bg-paper {
  background: transparent url("../../img/theme/bg-paper.svg") repeat-x center center;
}

.window {
  background-color: #fff;
  border: 1px solid #DAAFF9;
  border-radius: 10px;
  box-shadow: -8px 6px 0 #DAAFF9;
  margin: 0 0.25rem 0 0.75rem;
  padding-top: 30px;
  position: relative;
}
.window .icon {
  position: absolute;
  right: 10px;
  top: 8px;
}
.window .window-header {
  border-top: 1px solid #DAAFF9;
  display: flex;
  padding: 1.2rem 1.75rem 0.5rem;
}
.window .window-header img {
  margin: 0 0.75rem 0 0;
  max-width: 72px;
}
.window .window-content {
  padding: 0 1.75rem 1rem;
}
.window h2 {
  margin-top: 0.75rem;
  font-weight: 400;
}
.window h2 strong {
  display: block;
}
.window p,
.window li {
  color: #670F9B;
}

.custom-list {
  padding: 0 0 1.5rem;
}
.custom-list li {
  list-style-type: none;
  padding-left: 1.5rem;
  position: relative;
}
.custom-list li::before {
  background: transparent url("../../img/theme/list-bullet.gif") no-repeat 0 0;
  background-size: 100%;
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  top: 0.25rem;
  width: 14px;
}

.bg-gradient-custom-1 {
  background: rgb(255, 163, 35);
  background: linear-gradient(45deg, rgb(255, 163, 35) 0%, rgb(255, 243, 116) 100%);
  padding: 1rem 1.75rem 1.5rem;
}

.info {
  background-color: #fff;
  border-radius: 1.5rem;
  position: relative;
  padding: 0 1.75rem 0.5rem;
}
.info .info-header {
  display: flex;
  padding: 1.5rem 0 0.75rem;
}
.info .info-header.center {
  justify-content: center;
}
.info .info-header img {
  margin: 0 0.75rem 0 0;
}
.info .info-header::before {
  background-color: #EC9028;
  content: "";
  height: 4px;
  left: 50%;
  margin-left: -84px;
  position: absolute;
  top: 0;
  width: 168px;
}
.info .modal-page-content {
  background-color: #fff;
}
.info h2 {
  color: #EC9028;
  margin-top: 1.2rem;
}
.info p,
.info li {
  color: #670F9B;
}

.analytic {
  background-color: rgba(245, 245, 245, 0.3);
  border: 1px solid #D6D6D6;
  position: relative;
  padding: 0 1.75rem 0.5rem;
}
.analytic .analytic-header {
  display: flex;
  padding: 1.5rem 0 0.75rem;
}
.analytic .analytic-header img {
  align-self: center;
  margin-left: -25px;
  margin-right: 0;
  width: 78px;
}
.analytic .analytic-header::before {
  background: transparent url("../../img/theme/page-icon-1.svg") no-repeat 0 0;
  background-size: 100%;
  content: "";
  height: 43px;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 39px;
}
.analytic .analytic-header p {
  color: #651595;
  font-size: 1.125rem;
  font-weight: 400;
  margin-top: 2.2rem;
}
.analytic h2 {
  color: #651595;
  font-weight: 400;
  margin-top: 2.2rem;
}
.analytic .analytic-content img {
  margin-bottom: 1.2rem;
  max-width: 100%;
}
.analytic p,
.analytic li {
  color: #670F9B;
}
.analytic.analytic-blue {
  background-color: #2F3368;
  border: 1px solid #2F3368;
  border-radius: 10px;
}
.analytic.analytic-blue .analytic-header::before {
  background: transparent url("../../img/theme/page-icon-2.svg") no-repeat 0 0;
  height: 45px;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 40px;
}
.analytic.analytic-blue h2 {
  color: #fff;
  font-weight: 600;
  margin: 0.75rem 0 0.5rem;
}
.analytic.analytic-blue p,
.analytic.analytic-blue li {
  color: #fff;
}
.analytic.analytic-purple {
  background-color: rgba(200, 155, 239, 0.21);
  border: 1px solid #670F9B;
  border-radius: 10px;
}
.analytic.analytic-purple .analytic-header::before {
  background: transparent url("../../img/theme/page-icon-3.svg") no-repeat 0 0;
  height: 45px;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 40px;
}
.analytic.analytic-purple h2 {
  font-weight: 600;
  margin: 0.75rem 0 0.5rem;
}
.analytic.analytic-purple .analytic-content form {
  padding-bottom: 1rem;
}

.component h2 .bg-orange {
  background-color: #F69A28;
  color: #fff;
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
}

.section-title {
  padding-top: 3rem;
  text-align: center;
}
.section-title h1 {
  font-size: 1.75rem;
  line-height: 2.5rem;
  margin: 0 0;
  text-decoration: none;
}
.section-title img, .section-title lottie-player {
  max-width: 100%;
}
.section-title lottie-player {
  margin: 0 auto;
}

.question-form .question-form-header {
  align-items: flex-start;
  display: flex;
  flex-shrink: 0;
  justify-content: left;
}
.question-form .question-form-header img {
  height: auto;
  margin-left: -15px;
  max-width: 66px;
}
.question-form .question-form-header p {
  font-weight: 800;
}
.question-form .question-form-header.analytic-header p {
  margin-top: 0.5rem;
  padding-right: 1.5rem;
}
.question-form .field {
  margin: 0;
}

.column-1 {
  margin-top: 50px;
}

.injection {
  padding-right: 0.5rem;
  position: relative;
  text-align: right;
}
.injection img {
  display: inline-block;
}
.injection #injection-bar {
  background: rgba(200, 155, 239, 0.2);
  top: 29px;
  height: 0;
  right: 10px;
  position: absolute;
  width: 24px;
}

.result-ok .info .info-header h2 {
  color: #C531CA;
}
.result-ok .info .info-header::before {
  background-color: #C531CA;
}

.result-ko .info .info-header h2 {
  color: #CA316D;
}
.result-ko .info .info-header::before {
  background-color: #CA316D;
}

#game-radio-1 .question-form {
  padding: 0.5rem;
}
#game-radio-1 .field {
  margin-top: 1.5rem !important;
}

#game-radio-2 .analytic-content {
  padding-bottom: 1.5rem;
}
#game-radio-2 .analytic-content p, #game-radio-2 .analytic-content strong {
  color: #fff;
}
#game-radio-2 form {
  margin-top: 2rem;
}
#game-radio-2 .question-form-header {
  padding-right: 1rem;
}
#game-radio-2 .question-form-header p {
  margin: 0.5rem 0 0;
}
#game-radio-2 .select-buttons-abc-label {
  color: #fff;
}
#game-radio-2 .select-buttons-abc-label span {
  border-color: #F69A28;
}

#game-radio-3 .analytic-content {
  padding-bottom: 1.5rem;
}
#game-radio-3 form {
  margin-top: 2rem;
}
#game-radio-3 .question-form-header {
  padding-right: 1rem;
}
#game-radio-3 .question-form-header p {
  margin: 0.5rem 0 0;
}

#game-radio-4 form {
  margin-top: 1rem;
}
#game-radio-4 .field {
  margin-bottom: 1rem;
}

#game-radio-5 form {
  margin-top: 1rem;
}
#game-radio-5 .field {
  margin-bottom: 1rem;
}
#game-radio-5 .select-buttons-dashed-label {
  min-height: 172px;
}

#game-video {
  position: relative;
}

.landscape #game-video {
  position: fixed;
  z-index: 12;
  height: 100vh;
  top: 0;
  left: 0;
  width: 100vw;
}

#game-video-tag-boton {
  height: 44px;
  left: 50%;
  margin: -22px 0 0 -22px;
  position: absolute;
  top: 50%;
  width: 44px;
  z-index: 13;
}
#game-video-tag-boton img {
  height: 100%;
  width: 100%;
}

.landscape #game-video-tag-boton {
  position: fixed;
}

#game-video-tag {
  margin: 0 auto;
  max-width: 100%;
  position: relative;
}
#game-video-tag.fullscreen {
  left: 50%;
  position: fixed;
  top: 0;
  z-index: 11;
}

#video-overlay {
  background-color: #000;
  content: "";
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#skipVideo {
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 11;
}
#skipVideo .btn {
  min-width: 0;
}

.is-mobile #skipVideo {
  position: fixed;
}

.accordion {
  background: transparent none;
  border-radius: 0;
}
.accordion .accordion-item {
  border: 0;
  color: #651595;
}
.accordion .accordion-item:first-of-type .accordion-button {
  border-radius: 0;
}
.accordion .accordion-item:first-of-type .accordion-button.accordion-button:not(.collapsed) {
  color: #651595;
  background-color: transparent;
  box-shadow: none;
}
.accordion .accordion-header {
  background-color: transparent;
  border-bottom: 1px solid #C89BEF;
  color: #651595;
  padding: 2.5rem 0 0.5rem;
  outline: none !important;
}
.accordion .accordion-body {
  color: #651595;
  font-size: 1.05rem;
  line-height: 1.4rem;
  padding: 1.25rem 0 0;
}
.accordion .accordion-button {
  background-color: transparent;
  box-shadow: none !important;
  color: #651595;
  font-size: 1.26rem;
  font-weight: 600;
  outline: none !important;
  padding: 0;
}
.accordion .accordion-button img {
  margin: -15px 0 -10px -15px;
  width: 76px;
}
.accordion .accordion-button.collapsed::after,
.accordion .accordion-button:not(.collapsed)::after {
  background-image: url("../../img/theme/icon-arrow-accordion.svg");
  background-size: 100%;
  height: 12px;
  transform: rotate(0deg);
  width: 11px;
}
.accordion .accordion-button.collapsed::after {
  transform: rotate(45deg);
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   Video page
   ========================================================================== */
.video-page {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.video-page.portrait .page-wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotate(-90deg);
  width: 100%;
}
.video-page .btn {
  margin-top: 1rem;
}
.video-page #video {
  height: 100%;
  position: absolute;
  width: 100%;
}

/* =============================================================================
  COLOR Styles
  ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/*@font-face {
  font-family: 'DINCond';
  src: url('../../fonts/DINCond-Bold.eot');
  src: url('../../fonts/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/DINCond-Bold.woff2') format('woff2'),
  url('../../fonts/DINCond-Bold.woff') format('woff'),
  url('../../fonts/DINCond-Bold.ttf') format('truetype'),
  url('../../fonts/DINCond-Bold.svg#DINCond-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}*/
/* =============================================================================
   FONT Styles
   ========================================================================== */
/* ==========================================================================
   Congrats page
   ========================================================================== */
.congrats h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.4rem;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-align: center;
  text-transform: none;
}
.congrats h2 {
  font-size: 1.36rem;
  margin: 0;
  text-align: center;
}
.congrats h2 img {
  margin-left: -16px;
  max-width: 72px;
}
.congrats .box {
  margin: 0 auto 1.5rem;
  max-width: 13rem;
}
.congrats .box .box-value {
  border: 1px solid #F69A28;
  border-radius: 10px;
  margin: 0 1rem;
}
.congrats .box .box-value div {
  background-color: rgba(246, 154, 40, 0.07);
  border-radius: 10px;
  display: block;
  color: #F69A28;
  font-size: 2.6rem;
  font-weight: 700;
  margin: 4px -4px -4px 4px;
  padding: 2rem 1rem;
  text-align: center;
}

/* =============================================================================
   Media Queries
   ========================================================================== */
@media (min-width: 576px) {
  .container-fluid {
    max-width: 480px;
  }
  .main-content,
  .course-progress {
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
  }
  .course-progress {
    padding: 0.75rem 1rem 1.5rem;
  }
}
/* =============================================================================
   Print Styles
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important; /* Black prints faster:
       http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

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