@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSans-700.woff2') format('woff2'),
      url('../fonts/MuseoSans-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSans-500.woff2') format('woff2'),
      url('../fonts/MuseoSans-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSans-300.woff2') format('woff2'),
      url('../fonts/MuseoSans-300.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-alt: 'Museo Sans', sans-serif;
  --font-size: 16px;
  --row-height: 1.5rem;
  --color-primary: #244081;
  --color-secondary: #139CD8;
  --color-text: #404040;
  --color-text-rgb: 64, 64, 64;
  --color-text-alt: #FFFFFF;
  --color-text-alt-rgb: 255, 255, 255;
  --color-error: #E13B3B;
  --color-error-active: #BB2D2D;
}

html {
  font-size: var(--font-size);
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.5em;
  color: var(--color-text);
  user-select: none;
  overflow-y: hidden;
}

h1 {
  font-family: var(--font-family-alt);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.125em;
  letter-spacing: 0.05em;
  margin-bottom: calc(var(--row-height) * 2);
}

h6 {
  font-family: var(--font-family-alt);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  line-height: 1.125rem;
  letter-spacing: 0.1em;
}

/* wrapper */

.t-wrapper {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}

/* logo */

.t-logo {
  text-align: center;
  margin-top: var(--row-height);
  flex-shrink: 0;
}

.t-logo img {
  display: inline-block;
  width: auto;
  height: 6vw;
  min-height: calc(var(--row-height) * 5);
  mix-blend-mode: darken;
}

/* smalltitle */

.t-smalltitle {
  text-align: center;
  color: var(--color-primary);
  margin-top: var(--row-height);
  flex-shrink: 0;
}

/* content */

.t-content {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: var(--row-height) 0;
  width: calc(100% - calc(var(--row-height) * 2))
}

/* form */

.t-form {
  position: relative;
  width: clamp(
    375px,
    50%,
    800px
  );
}

.t-form-box {
  position: relative;
  background-color: rgba(232, 232, 232, 0.5);
  border-radius: 6px;
  overflow: hidden;
}

.t-form-box::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: #E8E8E8;
}

@media screen and (max-width: 740px) {
  .t-form::before {
    width: 40%;
  }
}

.t-form-item {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.t-form-item:first-child {
  padding-top: calc(var(--row-height) * 1);
}

.t-form-item:last-child {
  padding-bottom: calc(var(--row-height) * 1);
}

.t-form-item:last-child {
  margin-bottom: 0;
}

.t-form-item label {
  display: block;
  padding: var(--row-height);
  color: var(--color-primary);
  width: 30%;
}

.t-form-field {
  width: 70%;
  padding: calc(var(--row-height) / 2) var(--row-height);
}

@media screen and (max-width: 740px) {
  .t-form-item label {
    width: 40%;
    padding: calc(var(--row-height) / 2);
  }

  .t-form-field {
    width: 60%;
    padding: calc(var(--row-height) / 2);
  }
}

.t-form-select select,
.t-form input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  background-color: transparent;
  border-width: 0;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  font-family: var(--font-family);
  letter-spacing: 0.1em;
  line-height: 1.5em;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0;
}

.t-form input {
  border-bottom: 1px solid rgba(var(--color-text-rgb), 0.2);
}

.t-form input:focus {
  outline: none;
  background-color: #E8E8E8;
}

.t-form-select {
  position: relative;
}

.t-form-select select:focus {
  outline: none;
  background-color: #E8E8E8;
}

.t-form-select svg {
  position: absolute;
  top: calc(50% - 4.5px);
  right: var(--row-height);
}

.t-form-actions {
  margin-top: var(--row-height);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
}

.t-call-actions {
  margin-top: var(--row-height);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
}

.t-button {
  font-family: var(--font-family-alt);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.125rem;
  padding: calc(var(--row-height) / 2) calc(var(--row-height) * 2);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
}

.t-button.t-button-sm {
  padding: calc(var(--row-height) / 4) calc(var(--row-height) * 0.5);
}

.t-button + .t-button {
  margin-left: var(--row-height);
}

.t-button.t-button--primary {
  background-color: var(--color-secondary);
  color: var(--color-text-alt);
}

.t-button.t-button--primary:hover {
  background-color: var(--color-primary);
}

.t-button.t-button--primary:active {
  color: rgba(var(--color-text-alt-rgb), 0.75);
}

.t-button.t-button--secondary {
  background-color: #e4e4e4;
}

.t-button.t-button--secondary:hover {
  background-color: #d4d4d4;
}

.t-button.t-button--secondary:active {
  color: rgba(var(--color-text-rgb), 0.75);
}

.t-button.t-button--error {
  background-color: #E13B3B;
}

.t-button.t-button--error:hover {
  background-color: #BB2D2D;
}

.t-button.t-button--error:active {
  color: rgba(var(--color-text-rgb), 0.75);
}

.t-form-privacy {
  margin-top: var(--row-height);
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.t-form-privacy a {
  color: var(--color-secondary);
}

.t-form-privacy a:hover {
  color: var(--color-primary);
}

.t-form-privacy a:active {
  opacity: 0.7;
}

.t-form-checkbox {
  position: relative;
  overflow: hidden;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #E5E5E5;
  border-radius: 3px;
  margin-right: 1rem;
  cursor: pointer;
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.t-form-checkbox.t-form-checkbox--active::before {
  transform: scale(1);
}

.t-form-checkbox::before {
  content: "";
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  transform: scale(0);
  transition: transform 500ms ease-in-out;
}

.t-form-checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-110%, -110%);
}

.t-loader {
  margin: calc(var(--row-height) * 2) 0;
}

.t-loader svg {
  display: block;
  animation-name: loader;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.t-callend {
  display: block;
  width: calc(var(--row-height) * 4);
  height: calc(var(--row-height) * 4);
}

.t-callend path {
  fill: var(--color-secondary);
}

.t-player {
  background-color: var(--color-text);
  width: 63.59375vw;
  height: 33.125vw;
  border-radius: 10px;
  overflow: hidden;
}

@media screen and (max-width: 740px) {
  .t-player {
    width: 90vw;
    height: 46.87960687960688vw;
    border-radius: 2vw;
  }
}

#volume {
  width: 43.58vw;
  margin: auto;
  border: 0;
  background: #eee;
  border-radius: 100px;
}

.error-message {
  color: var(--color-error-active);
}

#volume::-moz-progress-bar {
  border-radius: 100px;
  background: linear-gradient(to right, rgba(85, 255, 65, .5), rgba(217, 63, 63, .8));
}

#volume::-webkit-progress-bar {
  background: #eee;
  border-radius: 100px;
}

#volume::-webkit-progress-value {
  border-radius: 100px;
  background: linear-gradient(to right, rgba(85, 255, 65, .5), rgba(217, 63, 63, .8));
}

/* MODAL */

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  margin: auto;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  height: 40%;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.modal__close:before {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {

  .modal__inner {
    width: 70%;
    height: 50%;
    box-sizing: border-box;
  }
}

#loading {
  display: flex;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100%;
  background-color: rgba(192,192,192, 1);
  /*background-image: url('../img/logo.png');*/
  background-repeat: no-repeat;
  background-position: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@font-face {
  font-family: 'icomoon';
  src:url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.eot?-9haulc');
  src:url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.eot?#iefix-9haulc') format('embedded-opentype'),
  url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.woff?-9haulc') format('woff'),
  url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.ttf?-9haulc') format('truetype'),
  url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.svg?-9haulc#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-spinner:before {
  content: "\e000";
}
.icon-spinner-2:before {
  content: "\e001";
}
.icon-spinner-3:before {
  content: "\e002";
}
.icon-spinner-4:before {
  content: "\e003";
}
.icon-spinner-5:before {
  content: "\e004";
}
.icon-spinner-6:before {
  content: "\e005";
}
.icon-spinner-7:before {
  content: "\e006";
}

@keyframes anim-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spinner {
  display: inline-block;
  font-size:9em;
  height: 1em;
  line-height: 1;
  margin: .5em;
  animation: anim-rotate 2s infinite linear;
  color: #000000;
  text-shadow: 0 0 .25em rgba(255,255,255, .3);
}
.spinner--steps {
  animation: anim-rotate 1s infinite steps(8);
}
.spinner--steps2 {
  animation: anim-rotate 1s infinite steps(12);
}