@font-face {
  font-family: snLight;
  src: url(/fonts/SNEmeric-Light.woff);
}

@font-face {
  font-family: snSemi;
  src: url(/fonts/SNEmeric-SemiBold.woff);
}


:root {
  --orange: #FF9E18;
  --blue: #00729C;
  --light-blue: #78C3ED;
  --teal: #79CAC1;
  --trans-light-blue: rgba(120, 195, 237, 0.25);
  --grey: #404043;
  --mid-grey: #b4b4b4;
  --light-grey: #707070;
  --lighter-grey: #F6F8F9;
  --alt-grey: #717275;
  --green: #B4BC00;
  --pink: #F9D9DA;
  --dark-pink: #D774AE;
  --border-radius: 10px;
  --border-radius-sm: 5px;
  --border-radius-lg: 20px;
  --box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);
  --box-shadow-hover: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
  --grey-bg: #F6F8F9;
  --red: #F84C40;
  --light-red: #F78E82;
  --white-transparent: rgba(255, 255, 255, 0.75);
}

body {
  margin: 0;
  font-size: 16px;
  font-family: snLight, 'sans-serif';
  color: var(--grey);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  font-family: snSemi, 'sans-serif';
}

h1,
.h1 {
  font-size: 60px;
}

@media(max-width: 768px) {

  h1,
  .h1 {
    font-size: 40px;
  }
}

.h1-large {
  font-size: 80px;
}

h1 sup {
  top: -1.5em;
  font-size: 20px;
}

@media(max-width: 768px) {
  .h1-large {
    font-size: 60px;
  }
}

h2,
.h2 {
  font-size: 48px;
}

@media(max-width: 768px) {

  h2,
  .h2 {
    font-size: 32px;
  }
}

h3,
.h3 {
  font-size: 34px;
}

@media(max-width: 768px) {

  h3,
  .h3 {
    font-size: 26px;
  }
}

h4,
.h4 {
  font-size: 24px;
}

@media(max-width: 768px) {

  h4,
  .h4 {
    font-size: 18px;
  }
}

h5,
.h5 {
  font-size: 20px;
}

p {
  font-size: 16px;
}

.p-large {
  font-size: 20px;
}

@media(max-width: 768px) {
  .p-large {
    font-size: 16px;
  }
}

a {
  color: var(--orange);
}

.sn-light {
  font-family: snLight, 'sans-serif';
}

.sn-bold {
  font-family: snSemi, 'sans-serif';
}


.x-small {
  font-size: 12px;
}

.text-blue {
  color: var(--blue) !important;
}

.text-light-blue {
  color: var(--light-blue);
}

.text-orange {
  color: var(--orange) !important;
}

.text-black {
  color: #000000;
}

.text-grey {
  color: var(--grey);
}

.text-light-grey {
  color: var(--light-grey)
}

.text-green {
  color: var(--green);
}

.text-dark-pink {
  color: var(--dark-pink);
}

.text-light-red {
  color: var(--light-red);
}

.text-alt-grey {
  color: var(--alt-grey);
}

.text-underline {
  text-decoration: underline;
}

.text-white-bg {
  padding: 3px;
  background-color: #ffffff;
  border-radius: var(--border-radius-sm);
}

.cursor-pointer {
  cursor: pointer;
}

.text-no-dec {
  text-decoration: none;
}

.large-tick {
  font-size: 200px;
  color: var(--green);
}


.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

/*Backgrounds*/
.bg-grey {
  background-color: var(--grey-bg);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-light-blue {
  background-color: var(--light-blue);
}

.bg-teal {
  background-color: var(--teal);
}

.bg-green {
  background-color: var(--green);
}

.bg-orange {
  background-color: var(--orange);
}

.bg-pink {
  background-color: var(--pink);
}

.bg-dark-pink {
  background-color: var(--dark-pink);
}

/*Buttons*/
button {
  background-color: unset;
  border: unset;
  color: var(--grey);
}

.btn {
  padding: 12px 22px 12px 28px;
  font-size: 18px;
  min-width: 160px;
  text-align: left;
  position: relative;
  border-radius: var(--border-radius);
  background-color: var(--blue);
  font-family: snSemi, 'sans-serif';
  font-weight: 400;
  border-color: var(--blue);
  color: #ffffff;
  transition: all .3s ease-in-out;
  box-shadow: var(--box-shadow);
}

.btn:hover {
  background-color: transparent;
  color: var(--blue);
  border-color: var(--blue);
}



.btn-white {
  background-color: #ffffff;
  border-color: #ffffff;
  box-shadow: var(--box-shadow);
}

.btn-white:after {
  color: var(--blue);
}

.btn-white:hover {
  box-shadow: var(--box-shadow-hover);
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn-hover-orange:hover {
  background-color: #ffffff !important;
}

.btn-wide {
  min-width: 220px;
}

.btn-wider {
  min-width: 450px;
}

.btn-large {
  font-size: 24px;
}

.btn-large:after {
  font-size: 22px !important;
}

.btn-chunky {
  padding-top: 30px;
  padding-bottom: 30px;
}

.back-btn {
  padding: 12px 28px 12px 20px;
  text-align: right;
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.back-btn:hover {
  background-color: var(--blue) !important;
}

.helpWrapper {
  display: none;
}

.helpWrapper.active {
  display: inline-block;
}

.help-control {
  padding: 12px 0px 12px 0px;
  font-size: 18px;
  font-family: snSemi, 'sans-serif';
  font-weight: 400;
  border: 1px solid transparent;
}

.help-control i {
  font-size: 24px;
  margin-top: 2px;
}

.helpScreen .slideHIW {
  max-width: 400px;
  padding: 30px;
  background-color: #ffffff;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  border: 1px solid var(--light-blue);
}

.splide:not(.is-overflow) .splide__pagination {
  display: flex !important;
}


.rounded-outline-btn {
  border-radius: 50px;
  background-color: transparent;
  border-color: var(--blue);
  color: var(--blue);
}

.rounded-outline-btn:hover {
  border-color: var(--blue);
  color: #ffffff;
  background-color: var(--blue);
}

.btn-blue {
  background-color: var(--blue);
}

.btn-transparent {
  background-color: transparent;
}

.btn:after {
  content: '\F285';
  font-family: bootstrap-icons;
  font-size: 17px;
  float: right;
  padding-left: 15px;
  transition: transform .3s ease-in-out;
}

.back-btn:after {
  content: '\F284';
  float: left;
  padding-left: 0px;
  padding-right: 15px;
}

.btn:hover:after {
  transform: translatex(5px);
}

.back-btn:hover:after {
  transform: translatex(-5px);
}

.appCTA {
  max-width: 500px;
  width: 100%;
}

.CTAButtonNarrow button {
  max-width: 300px;
  margin: auto;
}

.CTAButtonChunky button {
  padding: 30px 20px;
}

.CTAButtonGreen button {
  border: 1px solid var(--green);
  border-radius: var(--border-radius);
}

.CTAButtonGreen span {
  color: var(--green);
}

.actionIcon {
  margin-right: 25px;
}

.langCTA {
  max-width: 450px;
}

.appCTAGraphic {
  padding-bottom: 80%;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background-color: var(--grey-bg);
  margin-bottom: -15px;
}

.largeCTA {
  width: 100%;
  background-color: #ffffff;
  border: none;
  box-shadow: var(--box-shadow);
  padding: 20px;
  border-radius: var(--border-radius);
  transition: all .5s ease-in-out;
}

.largeCTA:hover {
  box-shadow: var(--box-shadow-hover);
}


.largeCTA:after {
  content: '\F285';
  font-family: bootstrap-icons;
  margin-left: auto;
  padding-left: 20px;
  font-size: 24px;
  color: var(--blue);
  transition: all .3s ease-in-out;
}

.largeCTA:hover:after {
  transform: translateX(5px);
}

.langCTAbutton .largeCTA {
  border: 1px solid var(--light-blue);
}

/*Sections*/
#appWrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background .5s ease-in-out;
}

.helpScreen {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 999999;
}

.appOverview {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.appOverviewIntro {
  max-width: 600px;
}



.record-video-intro {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

.chooseApp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

.topMenu {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 9999999;
  transition: all .5s ease-in-out .1s;
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}

.topMenuInner {
  padding: 20px 0px;
}

#closeHelp {
  display: none;
}

.help-control {
  right: 0;
  top: 0;
}

.bottomMenu {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 999999;
  transition: all .5s ease-in-out .1s;
}

.bottomMenu.inactive {
  transform: translate(-50%, 100%);
}

.topMenu.inactive {
  transform: translate(-50%, -100%);
}

.bottomMenuInner {
  box-shadow: var(--box-shadow);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 5px 0px 2px 0px;
  height: 80px;
  background-color: #ffffff;
  border-bottom: 3px solid var(--orange);
}

.back-home i {
  font-size: 20px;
}

/*Global loader*/
.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite
}

.largeCTAloading {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
  position: absolute;
  top: calc(50% - 16px);
  right: 20px;
  background-color: #ffffff;
}

.largeCTAloading::before {
  border-width: 2px !important;
}

.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #FFF;
  animation: prixClipFix 2s linear infinite;
}

.loader-dark::before {
  border-color: var(--blue);
}

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

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
  }

  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
  }

  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
  }
}

/*How it works sliders*/
.splideHIW .splide__track {
  overflow: visible;
  cursor: grab;
}

.splideHIW .splide__track:active {
  cursor: grabbing;
}

.splideHIW .slideHIW {
  padding: 15px;
  background-color: #ffffff;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  border: 1px solid var(--light-blue);
  min-height: 335px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slideHIWimg {
  width: 100%;
  max-width: 200px;
  margin: auto;
}

.slideHIWcopy span:last-of-type {
  margin-top: 3px;
}

.splideHIW .splide__pagination {
  bottom: 0.3em;
  justify-content: flex-end;
  padding-right: 0;
}

.splideHIW .splide__pagination__page {
  background-color: var(--mid-grey);
  border: 2px solid var(--grey);
  width: 15px;
  height: 15px;
}

.splideHIW .splide__pagination__page.is-active {
  transform: scale(1);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23404043'/%3e%3c/svg%3e");
}

.slideHIWcopy {
  min-height: 60px;
}

.slideHIWcopy .h5 {
  font-size: 16px;
}

.HIWnum {
  margin-right: 10px !important;
}

/*Forms*/
.consentForm {
  display: none;
  z-index: 99999;
}

.consentFormInner {
  padding: 50px;
  max-width: 600px;
  border: 1px solid var(--light-blue);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
  background-color: #ffffff;
}

.consentCheckboxes {
  height: 270px;
  overflow-y: scroll;
  margin-bottom: 30px;
  border: solid 1px #dee2e6;
  border-radius: var(--border-radius);
  padding: 15px 15px 15px 0;
}

.consentCheckboxes ul {
  list-style: none;
  margin-left: 6px;
  margin-bottom: 15px;
  padding: 0;
}

.consentCheckboxes ul li ul {
  font-weight: 400;
  margin-left: 17px;
  margin-bottom: 0px;
  list-style: disc;
}

.consentCheckboxes ul li li {
  color: #333;
}

.consentCheckboxes ul li li li {
  color: #333;
}

@media (max-width: 768px) {
  .consentFormInner {
    padding: 30px;
  }
}

.form-control:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 0.25rem var(--trans-light-blue);
}

.form-check {
  padding-left: 1.1em;
}

.form-check-input {
  border-color: var(--orange);
  width: 1.3em;
  height: 1.3em;
  margin-top: 0.1em;
}

.form-check-input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FF9E18'/%3e%3c/svg%3e");
}

.form-check-input:checked {
  background-color: #ffffff;
  border-color: var(--orange);
}

.form-check-input[type=checkbox]:checked {
  background-color: var(--orange);
}

.formError {
  display: none;
  color: var(--red);
}

@media(max-width: 768px) {

  .form-control-lg,
  .form-select-lg {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
  }
}


/* Video Grid (screen.php) */

/*Patterns*/
.pattern {
  z-index: 9999;
  opacity: 1;
  transition: all .5s ease-in-out;
}

.pattern path,
.pattern rect {
  fill: #ffffff;
  transition: all .5s ease-in-out;
}

.pattern-top-right {
  right: 0;
  top: 0;
  transform: translate(60%, -50%);
}

.pattern-bottom-left {
  left: 0;
  bottom: 0;
  transform: translate(-30%, 25%);
}

.pattern-bottom-right {
  right: 0;
  bottom: 0;
  transform: translate(30%, 10%);
}

.white-patterns .pattern path,
.white-patterns .pattern rect {
  fill: #ffffff;
}

.orange-patterns .pattern path,
.orange-patterns .pattern rect {
  fill: var(--orange);
}

.teal-patterns .pattern path,
.teal-patterns .pattern rect {
  fill: var(--teal);
}

.light-blue-patterns .pattern path,
.light-blue-patterns .pattern rect {
  fill: var(--light-blue);
}

.no-patterns .pattern {
  opacity: 0;
  visibility: hidden;
}

.faded-patterns .pattern {
  opacity: 0.3;
}

.no-bottom-left-pattern .pattern-bottom-left {
  opacity: 0;
}

.no-bottom-right-pattern .pattern-bottom-right {
  opacity: 0;
}

.no-top-right-pattern .pattern-top-right {
  opacity: 0;
}

/*App transitions*/
.loading-bar {
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #ffffff;
  z-index: 99999999;
}

.loading-bar-inner {
  background: var(--orange);
  transition: transform .2s linear;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

.loading-bar-inner1 {
  animation: growBar1 1.5s infinite, moveBar1 1.5s infinite;
}

.loading-bar-inner2 {
  animation: growBar2 1.5s infinite, moveBar2 1.5s infinite;
}

@keyframes growBar1 {
  0% {
    animation-timing-function: linear;
    transform: scaleX(.1);
  }

  36.6% {
    animation-timing-function: cubic-bezier(.33473, .12482, .78584, 1);
    transform: scaleX(.1);
  }

  69.15% {
    animation-timing-function: cubic-bezier(.22573, 0, .23365, 1.37098);
    transform: scaleX(.83)
  }

  100% {
    transform: scaleX(.1);
  }
}

@keyframes moveBar1 {
  0% {
    left: -105.16667%;
    animation-timing-function: linear
  }

  20% {
    left: -105.16667%;
    animation-timing-function: cubic-bezier(.5, 0, .70173, .49582);
  }

  69.15% {
    left: 21.5%;
    animation-timing-function: cubic-bezier(.30244, .38135, .55, .95635);
  }

  100% {
    left: 95.44444%;
  }
}

@keyframes growBar2 {
  0% {
    animation-timing-function: cubic-bezier(.20503, .05705, .57661, .45397);
    transform: scaleX(.1);
  }

  19.15% {
    animation-timing-function: cubic-bezier(.15231, .19643, .64837, 1.00432);
    transform: scaleX(.57);
  }

  44.15% {
    animation-timing-function: cubic-bezier(.25776, -.00316, .21176, 1.38179);
    transform: scaleX(.91);
  }

  100% {
    transform: scaleX(.1);
  }
}

@keyframes moveBar2 {
  0% {
    left: -54.88889%;
    animation-timing-function: cubic-bezier(.15, 0, .51506, .40968);
  }

  25% {
    left: -17.25%;
    animation-timing-function: cubic-bezier(.31033, .28406, .8, .73372);
  }

  48.35% {
    left: 29.5%;
    animation-timing-function: cubic-bezier(.4, .62703, .6, .90203);
  }

  100% {
    left: 117.38889%;
  }
}

#appMobile {
  display: none;
}

@media(max-width: 767px) {
  #appWrapper {
    display: none;
  }

  #appMobile {
    display: block;
  }
}

.validateError {
  border: solid 3px red;
}

.splashText1,
.splashText2 {
  display: none;
}

.exitAppScreen {
  display: none;
  top: 0;
  left: 0;
  z-index: 999999;
  background-color: #ffffff;
}

.exitLoader {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}