@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: Graphik;
  src: url('Graphik-Regular-Web.ttf') format('truetype'), url('Graphik-Regular-Web.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Stolzl;
  src: url('Stolzl-Medium.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Circular Std Book';
  font-style: normal;
  font-weight: normal;
  src: local('Circular Std Book'), url('CircularStd-Book.woff') format('woff');
}

#app-site {
  display: flex;
  width: 100%;
  height: 100vh;
}

.loader {
  position: relative;
  margin: 0 auto;
  width: 60px;
  height: 100%;
}

.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular {
  animation: rotate 2s linear infinite;
  -webkit-animation: rotate 2s linear infinite;
  height: auto;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes color {
  100%,
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}

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

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@-webkit-keyframes color {
  100%,
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}

/*
  	Motivation icon font: Motivation
  	Creation date: 24/09/2018 13:01
  	*/

@font-face {
  font-family: 'Motivation';
  src: url('Motivation.eot?g9v11w');
  src: url('Motivation.eot?g9v11w#iefix') format('embedded-opentype'), url('Motivation.ttf?g9v11w') format('truetype'),
    url('Motivation.woff?g9v11w') format('woff'), url('Motivation.svg?g9v11w#Motivation') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^='motiv-']:before,
[class*=' motiv-']:before,
[class^='motiv-']:after,
[class*=' motiv-']:after {
  font-family: Motivation;
  font-size: 28px;
  text-align: center;
  color: white;

  font-style: normal;
}

[class^='motiv-'],
[class*=' motiv-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Motivation' !important;
  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;
}

.motiv-top:before {
  content: '\e906';
  font-size: 28px !important;
}
.motiv-top-large:before {
  content: '\e906';
  font-size: 48px;
  color: black;
}
.motiv-fist:before {
  content: '\e900';
}
.motiv-muscle:before {
  content: '\e901';
}
.motiv-thumb-up:before {
  content: '\e902';
}
.motiv-motivation:before {
  content: '\e903';
}
.motiv-motivational:before {
  content: '\e904';
}
.motiv-trophy:before {
  content: '\e905';
}

.motiv-ribbon:before {
  content: '\e907';
}
.motiv-smile:before {
  content: '\e908';
}
.motiv-win:before {
  content: '\e909';
}
.motiv-super:before {
  content: '\e90a';
}
.motiv-thumb-up-1:before {
  content: '\e90b';
}
.motiv-idea:before {
  content: '\e90c';
}
.motiv-target:before {
  content: '\e90d';
}
.motiv-talent:before {
  content: '\e90e';
}
.motiv-laurel:before {
  content: '\e90f';
}
.motiv-goal:before {
  content: '\e910';
}
.motiv-medal:before {
  content: '\e911';
}
.motiv-flag:before {
  content: '\e912';
}
.motiv-finish-line:before {
  content: '\e913';
}
.motiv-podium:before {
  content: '\e914';
}
.motiv-happy:before {
  content: '\e915';
}
.motiv-success:before {
  content: '\e916';
}
.motiv-steps:before {
  content: '\e917';
}
.motiv-fame:before {
  content: '\e918';
}
.motiv-motivational-speech:before {
  content: '\e919';
}
.motiv-finish-flag:before {
  content: '\e91a';
}
.motiv-finish-line-1:before {
  content: '\e91b';
}
.motiv-support:before {
  content: '\e91c';
}
.motiv-passion:before {
  content: '\e91d';
}
.motiv-mindset:before {
  content: '\e91e';
}
.motiv-progress:before {
  content: '\e91f';
}
.motiv-progress-1:before {
  content: '\e920';
}
.motiv-creativity:before {
  content: '\e921';
}
.motiv-passion-1:before {
  content: '\e922';
}
.motiv-passion-2:before {
  content: '\e923';
}
.motiv-fist-1:before {
  content: '\e924';
}
.motiv-victory:before {
  content: '\e925';
}
.motiv-positive:before {
  content: '\e926';
}
.motiv-talent-1:before {
  content: '\e927';
}
.motiv-prize:before {
  content: '\e928';
}
.motiv-courage:before {
  content: '\e929';
}
.motiv-performance:before {
  content: '\e92a';
}
.motiv-motivated:before {
  content: '\e92b';
}
.motiv-heart-eyes:before {
  content: '\e92c';
}
.motiv-growth:before {
  content: '\e92d';
}
.motiv-motivational-speech-1:before {
  content: '\e92e';
}
.motiv-skill:before {
  content: '\e92f';
}
.motiv-focus:before {
  content: '\e930';
}
.motiv-loudspeaker:before {
  content: '\e931';
}
.motiv-deals-expand .path1:before {
  content: '\e932';
  color: rgb(0, 0, 0);
}
.motiv-deals-expand .path2:before {
  content: '\e933';
  margin-left: -1.0107421875em;
  color: rgb(35, 31, 32);
}
.motiv-deals-expand .path3:before {
  content: '\e934';
  margin-left: -1.0107421875em;
  color: rgb(255, 255, 255);
}
.motiv-top-plus .path1:before {
  content: '\e935';
  color: rgb(0, 0, 0);
}
.motiv-top-plus .path2:before {
  content: '\e936';
  margin-left: -1em;
  color: rgb(35, 31, 32);
}
.motiv-top-plus .path3:before {
  content: '\e937';
  margin-left: -1em;
  color: rgb(255, 255, 255);
}