/* ! appyhive.com v. 1.2.1 (c)2021 all rights reserved */

:root {
   font-size: 1rem;
}

*{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   text-rendering: optimizelegibility;
   --color-text: #12151e;
   --color-text-darkmode: #f5f5f5;
   --color-bg: #ffffff;
   --color-link: #111111;
   --color-link-hover: #032301;
   --color-link-active: #b73c06;
   --color-btn-bg: rgba(230,221,117,1);/*#e6dd75*/
   --color-btn-bg-hover: rgba(3,35,1,1);/*#032301*/
   --color-nav-link: #12151e;
}

html{
   scroll-behavior: smooth;
}

body {
   color: var(--color-text);
   background-color: var(--color-bg);
   font-family: 'Bilo', sans-serif;
   overscroll-behavior: none;
}

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

[hidden],
template {
   display: none;
}

/* globals */

a {
   text-decoration: none;
   color: var(--color-link);
   outline: none;
}

a:hover{
   color: var(--color-link-hover);
}

a::after,
a::before {
   display: none;
}

small{
   display: block;
   font-size: 70%;
   line-height: 1.4em;
}

.anim{
   -webkit-transition: -webkit-transform 0.5s;
   transition-timing-function: ease-out;
   transition: transform 0.5s;
}

.left{
   float: left;
}

.right{
   float: right;
}

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

.centred{
   display: block;
   text-align: center;
   margin-right: auto !important;
   margin-left: auto !important;
}

.centred > div{
   display: inline-flex;
   margin: 1em auto;
}

.hide{
   display: none !important;
}

.upper{
   text-transform: uppercase;
}

.clear {
   clear: both;
}

.loading::before {
   content: "";
   position: fixed;
   z-index: 100000;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--color-bg);
}

.loading::after {
   content: "";
   position: fixed;
   z-index: 100000;
   top: 50%;
   left: 50%;
   width: 60px;
   height: 60px;
   margin: -30px 0 0 -30px;
   border-radius: 50%;
   opacity: 0.4;
   background: var(--color-link);
   animation: pulse 0.7s linear infinite alternate;
}

.dialog {
   display: none;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background-color: rgba(255,255,255,0.85);
   z-index: 9998;
}

.locked{
   position: fixed !important;
   filter: blur(20px);
}

.fixed{
   position: fixed !important;
}

.obj{
   width: 50vw;
   height: 100vw;
   position: absolute;
   top: 125px;
   left: 52.75vw;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 0;
   background-size: cover;
   border-radius: 1.5em;
   z-index: 0;
}

/* content */

.page {
   width: 100%;
   height: 100%;
   position: relative;
   top: 0;
   left: 0;
   overflow: hidden;
   background-image: var(--image-bg);
}

.wallpaper{
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background-origin: border-box;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 50%;
}

.wallpaper.pattern{
   width: 100%;
   height: 100%;
   background-image: var(--image-bg);
   background-origin: border-box;
   background-size: auto;
   background-repeat: repeat;
   background-position: 0 0;
}

header{
   width: 100%;
   height: 12.55vh;
   position: relative;
   top: 0;
   left: 0;
   background: rgb(255,255,255);
   background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6712885837928921) 70%, rgba(255,255,255,0) 100%);
   z-index: 1000;
}

.menu-control{
   display: block;
   width: 95px;
   height: 40px;
   overflow: hidden;
   position: fixed;
   top: 5vh;
   left: auto;
   right: 5vw;
   text-indent: -8000px;
   border: 1px solid #b3b3b3;
   border-radius: 1em;
   padding: 0.5em 1em;
   cursor: pointer;
   z-index: 10000;
}

.menu-control.closed{
   background: var(--color-btn-bg) url(../imgs/ui/icons/menu-control.svg) no-repeat 50% 50%/42px auto;
}

.menu-control.opened{
   background: rgba(255,255,255,0.55) url(../imgs/ui/icons/menu-close.svg) no-repeat 50% 50%/42px auto;
}

nav{
   width: 100%;
   height: 100vh;
   position: fixed;
   top: -150vh;
   left: 0;
   right: auto;
   background-color: rgba(255,255,255,0.95);
   border-radius: 0;
   z-index: 1;
}

nav ul{
   display: block;
   list-style: none;
   padding: 0;
   margin: 8em 2em 1em 2em;
}

nav ul li{
   border-bottom: 0.75px solid #111111;
   padding: 1em 0.5em;
}

nav ul li:last-child{
   border-bottom: none;
}

nav ul li a{
   display: block;
   position: relative;
   width: 100%;
   height: 32px;
   font-size: 1.25rem;
   font-weight: 200;
   background: none;
   background-position: 0 50%;
   background-repeat: no-repeat;
   background-size: contain;
   color: var(--color-nav-link);
   pointer-events: initial;
   cursor: pointer;
   margin: 0 auto;
}

nav ul li a span{
   position: relative;
   bottom: -12px;
   left: 12vw;
   color: var(--color-text);
}

nav ul li.active a span{
   color: var(--color-link-active);
}

.client-logo {
   display: block;
   width: 64px;
   min-height: 64px;
   position: fixed;
   top: 0;
   left: 5vw;
   background: no-repeat 50% 50%/cover;
   text-align: center;
   margin: 2em auto;
   z-index: 10000;
}

.client-logo .icon{
   display: block;
   width: 64px;
   height: 64px;
   position: relative;
   overflow: inherit;
   text-indent: 0;
}

.client-logo h1{
   display: none;
   position: relative;
   font-size: 1.1rem;
   font-weight: 400;
}

.bwah{
   display: block;
   position: relative;
   width: 150px;
   height: 42px;
   background: url(../imgs/built-with-appy-hive-logo.svg) no-repeat 50% 50%/contain;
   overflow: hidden;
   font-size: 100%;
   margin: 1em;
   font-weight: normal;
   z-index: 99999;
}

.app-download-badge{
   width: 180px;
   height: 60px;
   background: no-repeat 50% 50%/cover;
   margin: 0.5em 0;
}

.app-store-en{
   background-image: url(../imgs/ui/icons/app-store-badge-en.svg);
}

.google-play-en{
   background-image: url(../imgs/ui/icons/google-play-badge-en.svg);
}

.hasLink{
   text-indent: -9000px;
}

.hasLink a{
   width: 100%;
   height: 100%;
}

.appyhive-logo.light{
   background: url(../imgs/appyhive-logo.svg) no-repeat 50% 50%/cover;
}

/* body content */

main{
   width: 100%;
   height: 100%;
   min-height: 200px;
   position: relative;
   top: 0;
   left: 0;
   padding: 0;
   margin: 0;
   z-index: 1;
}

.hero{
   display: block;
   min-height: 430px;
   padding-top: 128px !important;
}

.hero img{
   display: block;
   max-width: 150px;
   margin: 0 auto;
}

.content.hero .inner p{
   font-size: 1.75rem;
   letter-spacing: -0.5px;
   padding: 0;
   margin: 0 auto;
}

.content{
   width: 100%;
   height: 100%;
   position: relative;
   top: 0;
   left: 0;
   overflow: hidden;
   padding: 0;
   margin: 0 auto;
   z-index: 10;
}

.content.modal{
   overflow: auto;
}

.content .bg{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 17%;
   overflow: hidden;
   z-index: -1;
}

.content.hasBg{
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 50% 0;
}

.content.hasBg{
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 50% 17%;
}

.hasBg.fixed{
   background-attachment: fixed;
}

.content p,
.content ul,
.content ol{
   font-size: 1.25rem;
   font-weight: 300;
   line-height: 1.35em;
   margin: 0.5em auto;
}

.content ul li,
.content ol li{
   padding: 0.35em 0;
}

.content .inner.text-only h2{
   font-size: 3rem;
   padding: 0;
}

.content .inner.text-only p{
   font-size: 1.75rem;
   padding: 0.35em 0;
   margin: 0 auto;
}

.content.modal .inner h1{
   font-size: 2.75rem;
   font-weight: 100;
   letter-spacing: -1px;
   margin: 0.5em auto;
}

.content.modal .inner p{
   padding: 0.2em 0;
   margin: 0;
}

.content .container p{
   padding: 0.5em 0;
}

.content .block{
   display: block;
   position: relative;
   overflow: hidden;
   padding: 0 1em;
}

.content .full,
.content .half,
.content .third,
.content .quarter{
   width: 100%;
}

.content .block.first{
   margin-top: 3em;
   margin-bottom: 3em;
}

.content .block.first h2{
   font-weight: 900;
}

.content .block.last{
   margin-top: 4em;
   margin-bottom: 4em;
}

.content .signpost.full{
   margin: 1em auto;
   padding: 0;
}

.content .signpost .row.full{
   display: block;
   width: 100%;
   min-height: 340px;
   background: repeat-x 0 50% / cover;
   margin: 0.5em auto 0 auto;
}

.content .block.signpost .image-container img{
   max-height: 100%;
   position: relative;
}

.content.modal .block{
   margin: 3.5em auto 2em auto;
}

.content .intro{
   position: relative;
   padding-top: calc(100vh - 75vh);
}

.content .intro h2{
   display: block;
   position: relative;
   font-size: calc(100vw - 90vw);
   font-size: 3.75rem;
   font-weight: 100;
   letter-spacing: -3px;
   line-height: 0.82em;
   padding: 0;
   margin-bottom: 0;
}

.content .intro img {
   display: block;
   width: calc(100vw - 65vw);
   margin: 0 auto 1.5em auto;
}

.content .intro p{
   font-size: 1.25rem;
   font-weight: 300;
   text-align: center;
   line-height: 1.5em;
   margin: 0.5em auto;
}

.content .inner{
   max-width: 1200px;
   position: relative;
   overflow: hidden;
   padding: 0 1em;
   margin: 0 auto;
}

.content.modal .inner{
   padding: 0 1em;
}

.content .block.signpost .inner{
   padding: 0;
}

.content .inner .block{
   min-height: 1px;
   position: relative;
   padding: 0.5em 0;
}

.block.container{
   display: block;
   position: relative;
   background-repeat: no-repeat;
   background-position: 50% 40%;
   background-size: auto;
   background-attachment: scroll;
   text-align: center;
   padding: 1.5em;
}

.content .inner h2,
.content .container h2{
   display: block;
   position: relative;
   font-size: 2.55rem;
   font-weight: 200;
   letter-spacing: -1.5px;
   line-height: 0.95em;
   padding: 0;
   margin: 0.5em auto;
}

.content .inner h3,
.content .container h3{
   display: block;
   position: relative;
   font-size: 2.5rem;
   font-weight: 100;
   color: inherit;
   letter-spacing: -2px;
   line-height: 0.9em;
   padding: 0;
   margin: 0.5em auto 0.3em auto;
}

.content .inner h4,
.content .container h4{
   display: block;
   position: relative;
   font-size: 1.75rem;
   font-weight: 300;
   color: inherit;
   letter-spacing: -1.25px;
   line-height: 0.95em;
   padding: 0;
   margin: 0.5em auto;
}

.content .container.block.quarter p{
   font-size: 1.2rem !important;
}

.content.hero .inner h2{
   font-size: 4rem;
   font-weight: 700;
   letter-spacing: -3px;
}

.content .inner.full.signpost.dark h2,
.content .inner.full.signpost.dark h3{
   color: var(--color-heading-signpost);
}

.content .inner .feature{
   display: block;
   margin: 2em auto;
}

.content .inner .feature img,
.content .container img,
.content.modal .inner img{
   display: block;
   max-width: 150px;
   max-height: 145px;
   margin: 4em auto 0.5em auto;
}

.content .signpost img{
   display: block;
   max-width: 200px;
   max-height: 180px;
   margin: 1em auto;
}

.content .signpost .container.block img{
   display: block;
   max-width: 135px;
}

.content .signpost.large img{
   max-width: 65vw;
   max-height: 200px;
}

.content .image-container{
   display: block;
   position: relative;
   width: 45vw;
   overflow: hidden;
   margin: 2em auto;
}

.content .image-container img{
   display: block;
   position: relative;
   bottom: 0;
   width: 100%;
   max-height: 155px;
   outline: 0;
   border: 0;
   margin: auto;
}

.content .delimiter{
   height: 22vh;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover;
}

.social {
   display: block;
   margin: 2em auto 1em auto;
}

.social ul {
   display: block;
   list-style: none;
   text-align: center;
   padding: 0;
}

.social ul li {
   display: inline-flex;
   margin: 0.5em 1em;
}

.person .social ul{
   display: inline-flex;
}

.person .social ul li{
   display: flex;
   margin: 0 1em;
}

.smallprint{
   border-top: 1px solid #333333;
}

.smallprint p{
   font-size: 0.9rem !important;
   color: #333333;
}

/* footer */

footer{
   width: 100%;
   position: relative;
   bottom: 0;
   overflow: hidden;
   background: rgb(255,255,255);
   background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 95%, rgba(255,255,255,0) 100%);
   margin: 0 auto;
   padding: 1em;
   z-index: 10;
}

footer .notice {
   display: block;
   text-align: center;
   padding: 1.2em 2em;
}

.notice p{
   display: block;
   text-align: left;
}

.notice ul{
   clear: both;
   list-style: none;
   padding: 0;
   margin: 1em auto;
}

.notice ul li{
   display: flex;
   padding: 0.3em;
}

.notice ul li a{
   text-decoration: underline;
}

footer .logos{
   display: block;
   max-width: 1280px;
   margin: 0 auto;
}


@media screen and (min-width: 960px) {

   header{
      height: auto;
      position: relative;
   }

   .client-logo {
      width: 128px;
      min-height: 128px;
      position: relative;
      top: 1vh;
      left: 1vw;
   }

   .client-logo .icon{
      width: 128px;
      height: 128px;
   }

   .client-logo h1{
      display: block;
   }

   nav{
      width: 100%;
      min-height: 100vh;
      height: auto;
      position: fixed;
      right: auto;
      left: 0;
      background: rgba(240,240,240,0.5);
      background: linear-gradient(0deg, rgba(240,240,240,0.75) 30%, rgba(250,250,250,1) 75%);
      color: var(--color-text);
      border-radius: 0;
      opacity: 0;
      z-index: 9999;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
   }

   nav.opened{
      opacity: 1;
   }

   nav ul{
      width: 50vw;
      text-align: center;
      margin: 25vh auto 1em auto;
   }

   nav ul li{
      display: inline-block;
      width: 10vw;
      border: none;
      padding: 0 1em;
   }

   nav ul li a{
      display: block;
      position: relative;
      width: 100%;
      height: 64px;
      font-size: 1.30rem;
      font-weight: 200;
      background-position: 50% 100%;
      background-repeat: no-repeat;
      background-size: contain;
      pointer-events: initial;
      cursor: pointer;
      margin: 0 auto;
   }

   nav ul li a span{
      width: 100%;
      position: absolute;
      bottom: -35px;
      left: 0;
   }

   nav ul li a.special{
      position: absolute;
   }

   .content{
      width: 75%;
   }

   .content.full{
      width: 100%;
   }

   .content .half{
      width: 50%;
   }

   .content .third{
      width: 33.3333%;
   }

   .content .quarter{
      width: 25%;
   }

   .content .intro {
      padding-top: calc(100vh - 80vh);
   }

   .content .intro h2{
      font-size: calc(100vw - 95vw);
   }

   .content .intro img{
      width: calc(100vw - 85vw);
   }

   .content .intro p{
      font-size: 1.2rem;
      font-weight: 300;
   }

   .content .inner .block{
      min-height: 530px;
      padding: 0.75em;
   }

   .block.container{
      min-height: 510px;
   }

   .block.container.half{
      min-height: 605px;
   }

   .content .inner{
      padding: 0 2em;

   }

   .content .inner h2,
   .content .container h2{
      font-size: 3.5rem;
      font-weight: 100;
   }

   .content p,
   .content ul,
   .content ol{
      font-size: 1.55rem;
      line-height: 1.25em;
   }

   .content .signpost .row.full{
      min-height: 430px;
      background: repeat-x 0 50% / contain;
   }

   .content .signpost.large img{
      max-width: 25vw;
   }

   .btn.bottom{
      position: absolute;
      bottom: 2em;
      left: calc(50% - 4em);
   }

   .notice p{
      text-align: center;
   }

   .notice ul li{
      display: inline-flex;
   }
}

@media screen and (min-width: 1280px) {

   .obj{
      width: 14.1vw;
      height: 27vw;
      top: 55px;
   }

   .page{
      display: block;
      max-width: 100%;
      height: 100%;
      padding: 0;
      margin: 0 auto;
   }

   .client-logo {
      margin: 5em auto 1em auto;
   }

   .appyhive-logo {
      margin: 0;
   }

   .content .inner .block{
      min-height: 430px;
      padding: 1em;
   }

   .content .inner .container.block.half,
   .content .inner .container.block.third{
      min-height: 525px;
   }

   .content .intro{
      padding-top: calc(100vh - 80vh);
   }

   .content .intro img{
      width: calc(100vw - 90vw);
      margin: 1em auto 1.5em auto;
   }

   .content .intro h2{
      font-size: 4vw;
      font-weight: 900;
      letter-spacing: -0.15vw;
   }

   .content .intro p{
      font-size: calc(100vw - 99vw);
      font-weight: 300;
      text-align: center;
      margin: 1em auto 0.5em auto;
   }

   .content .inner{
      padding: 0 2em;
   }

   .content .inner p{
      line-height: 1.35em;
      padding: 1em 0;
   }

   .content .inner ul,
   .content .inner ol{
      list-style-position: outside;
      font-size: 1.75rem;
      font-weight: 300;
      line-height: 1.65em;
   }

   .block .container{
      min-height: 570px;
      background-size: cover;
      background-attachment: fixed;
      padding: 1em 2.3em;
   }

   .content .container p{
      padding: 0.5em 3em;
   }

   .content .signpost .row.full{
      background: repeat-x 5% 50% / cover;
   }

   .content .signpost.large img{
      max-width: 14vw;
   }

   .content .image-container{
      width: 200px;
      margin: 1em auto;
   }

   .content .block.signpost{
      min-height: 500px;
      background-attachment: fixed;
   }

   .content .block.signpost p{
      display: block;
      font-size: 1.5rem;
      text-align: center;
      padding: 0.5em 0 1em 0;
   }

   .content.modal .block{
      margin-top: 4.5em;
   }

   .content .inner.person{
      padding: 1em 7.5em;
      margin: 3em auto 1em auto;
   }

   .content .block.signpost .inner{
      padding: 2em;
   }

   footer{
      background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 93%, rgba(255,255,255,0.5) 100%);
   }

   .app-download-badge{
      margin: 0 1em 2em auto;
   }

}

/* design */

.delimiter.wires{
   background-image: url(../imgs/ui/backgrounds/wires-multicoloured-bg.svg);
}

.bg-fixed{
   background-attachment: fixed;
}

.hasBg.multiply{
   background-blend-mode: multiply;
}

.hasBg.color-dodge{
   background-blend-mode: color-dodge;
}

.hasBg.gradient.white{
   background: linear-gradient(180deg, rgba(218,218,218,0) 12%, rgba(255,255,255,1) 65%, rgba(218,218,218,0) 100%);
}


.hasBg.gradient.yellow{
   background: linear-gradient(0deg, rgba(249,222,104,0.4864146342130602) 0%, rgba(255,200,55,0.9570028695071778) 49%, rgba(249,222,104,0.021) 100%);
}

.hasBg.gradient.orange{
   background: linear-gradient(180deg, rgba(218,218,218,0) 12%, rgba(244,122,0,1) 65%, rgba(218,218,218,0) 100%);
}

.hasBg.gradient.light-orange{
   background: linear-gradient(180deg, rgba(218,218,218,0) 12%, rgba(246,215,145,1) 65%, rgba(218,218,218,0) 100%);
}

.hasBg.gradient.light-green{
   background: linear-gradient(180deg, rgba(218,218,218,0) 12%, rgba(218,255,212,1) 65%, rgba(218,218,218,0) 100%);
}

.hasBg.gradient.light-blue{
   background: linear-gradient(180deg, rgba(218,218,218,0) 12%, rgba(203,237,254,1) 65%, rgba(218,218,218,0) 100%);
}

.bg-white{
   background-color: rgba(255,255,255,1);
}

.bg-yellow{
   background-color: rgba(249,222,104,1);
}

.bg-red{
   background-color: rgba(157,39,0,1);
   color: #f5f5f5;
}

.bg-orange{
   background-color: rgba(244,122,0,1);
   color: #000000;
}

.bg-darkgrey{
   background-color: rgba(32,34,38,1);
   color: #f5f5f5;
}

.bg-green{
   background-color: rgba(218,255,212,1);
   color: #000000;
}

.comb-pattern{
   background-image: url(../imgs/ui/backgrounds/comb-pattern-dark.svg);
   background-size: 18vw auto !important;
   background-repeat: repeat !important;
}

.screen1{
   background-image: url(../imgs/ui/backgrounds/home-screen-1567x1175.svg);
}

.screen2{
   background-image: url(../imgs/ui/backgrounds/home-screen-1567x1175.svg);
}

.screen3{
   background-image: url(../imgs/ui/backgrounds/home-screen-1567x1175.svg);
}

.screen4{
   background-image: url(../imgs/ui/backgrounds/home-screen-1567x1175.svg);
}


/* ui / form objects */

.obj-wrap{
   display: block;
   overflow: hidden;
   margin: 1.5em auto;
}

.obj-wrap p{
   font-size: 1rem;
}

.obj-wrap a{
   text-decoration: underline;
}

.obj-wrap .radioBlock{
   min-height: 300px;
   position: relative;
   padding: 0.5em 1em;
}

.form-counter{
   width: 100%;
   position: fixed;
   top: 0;
   background-color: rgba(0,0,0,0.55);
   padding: 1.5em 0;
   z-index: 1;
}

.home.registration .form-counter{
   display: none;
}

.btn{
   display: grid;
   max-width: 300px;
   background-color: var(--color-btn-bg);
   font-size: 1.35rem;
   color: #111111;
   text-align: center;
   text-decoration: none !important;
   border: 0.75px solid rgba(18,21,30,1);
   border-radius: 1.55em;
   padding: .75em 1.75em;
   margin: 0.75em 0;
   cursor: pointer;
}

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

.btn.large{
   max-width: 350px;
}

.btn.transparent{
   background-color: rgba(18,21,30,0);
   color: #12151e;
}

.btn.semi-transparent{
   background-color: rgba(255,255,255,.5);
   color: #12151e;
}

.btn.transparent:hover,
.btn.semi-transparent:hover{
   background-color: rgba(18,21,30,0.9);
   color: #f5f5f5;
}

.btn.green{
   background-color: rgba(0,65,15,0.45);
}

.btn.isLast{
   margin-top: 1.5em;
}

.btn.isSingle{
   margin-bottom: 2em;
}

.btn-gradient {
   transition: 0.5s;
   background-size: 200% auto;
   color: #1c1e27;
}

.btn-gradient:hover {
   background-position: right center;
   color: #fff;
}

.btn-gradient.yellow-orange {
   background-image: linear-gradient(to right, #f47a00 0%, #F9D423  51%, #f47a00  100%);
}

.btn-gradient.grey-black {
   background-image: linear-gradient(to right, #000000 0%, #333333  51%, #f47a00  100%);
   color: #f5f5f5;
}

.badge{
   width: 32px;
   height: 32px;
   position: absolute;
   overflow: hidden;
   text-indent: -6000px;
   border: 0;
   border-radius: 100%;
}

.badge.phone{
   top: 120px;
   left: calc(50% + 60px);
}

.badge.green{
   background-color: rgba(0,65,15,0.95);
}

.badge.red{
   background-color: rgba(125,0,15,0.95);
}

.modal form{
   display: block;
   margin: 1.75em auto;
}

#topic{
   display: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea{
   display: block;
   width: 100%;
   max-width: 450px;
   font-size: 1.2rem;
   background-color: transparent;
   border: none;
   border-bottom: 1px solid #12151e;
   padding: 1em .75em;
   margin: 1em auto;
}

textarea{
   min-width: 100%;
   max-width: 100%;
   min-height: 150px;
   max-height: 300px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus{
   background-color: rgba(255,255,255,0.55);
   outline: none;
}

input[type="text"].lineup,
input[type="email"].lineup,
input[type="tel"].lineup,
textarea.lineup{
   border-top: 1px solid #12151e;
}

input.valid,
select.valid{
   color: #000000;
   border-bottom: 2px solid #009245;
}

input[type="text"].error,
input[type="email"].error,
input[type="tel"].error{
   color: #e00031;
   border-bottom: 1px solid #e00031;
   border-radius: 1em;
   background-color: rgba(139,39,45,0.35);
}

[type="checkbox"],
[type="radio"]{
   margin: 0 0.5em;
}

[type="checkbox"].error,
[type="radio"].error{
   border: 1px solid #e00031;
}

label.error{
   display: block;
   font-size: 1.2rem;
   color: #d0021b;
   text-align: center;
   margin: 0.5em auto;
}

label .input-label {
   -webkit-transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
   -moz-transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
   -ms-transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
   -o-transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
   transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
   color: #000000;
   display: block;
   font-size: 1.2rem;
   font-weight: 400;
   line-height: 1;
   margin-bottom: 5px;
   opacity: 0;
}

label.has-focus {
   background-color: rgba(16,66,45,0.20);
   cursor: text;
}

label.has-focus .input-wrapper:after {
   color: #393536;
}

label.has-focus .input-label {
   color: #111111;
}

label.has-value .input-label {
   opacity: 1;
   font-size: 1.35rem;
   font-weight: 400;
}

label.selectable:hover{
   background-color: rgba(16,66,45,0.20);
}

label.selectable a:hover{
   color: #17402D;
}

.content .inner label h2 {
   display: block;
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: -1px;
}

label span{
   display: block;
}

.content.modal .inner label p{
   display: block;
   font-size: 1.2rem;
   padding: 1em;
}

.content .inner label h2.has-icon{
   display: block;
   background-repeat: no-repeat;
   background-position: 50% 30px;
   background-size: 64px auto;
   padding-top: 5em;
}

.has-icon.ui-state-hover{
   background: #000;
}

.ui-widget{
   font-family: 'Bilo', sans-serif;
}

.obj-wrap .radioBlock .ui-checkboxradio-label{
   min-height: 300px;
}

.ui-checkboxradio-label{
   display: block;
   height: 100%;
   border: 1px solid #12151e;
   border-radius: 10px;
}

.ui-state-default{
   border: 1px solid #12151e;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{
   border: 1px solid #f47f02;

}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
   background-image: linear-gradient(to right, #f47a00 0%, #F9D423  51%, #f47a00  100%);
   color: #12151e;
}


/* icons */

.icon{
   display: inline-flex;
   overflow: hidden;
   text-indent: -6000px;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: contain;
}

.icon.round{
   border: 1px solid #12151e;
   border-radius: 100%;
   background-size: 30% auto;
}

.icon.small{
   width: 24px;
   height: 24px;
}

.icon.medium{
   width: 32px;
   height: 32px;
}

.icon.large{
   width: 45px;
   height: 45px;
}

.icon.x-large{
   width: 64px;
   height: 64px;
}

.icon.xx-large{
   width: 128px;
   height: 128px;
}

.modal .icon{
   position: absolute;
   top: 1.2em;
   right: 1.5em;
   z-index: 100;
}

.icon.hasLink{
   cursor: pointer;
}

.icon.hasLink a{
   display: block;
   width: 100%;
   height: 100%;
}

.close{
   background-image: url(../imgs/ui/icons/icon-close-dark.svg);
}

.help{
   background-image: url(../imgs/ui/icons/icon-help-dark.svg);
   cursor: help;
}

.by-sb{
   background-image: url(../imgs/sb-by-logo-outlined.svg);
}

.business-reg{
   background-image: url(../imgs/ui/icons/icon-business-dark.svg);
}

.person-reg{
   background-image: url(../imgs/ui/icons/icon-person-dark.svg);
}

.organisation-reg{
   background-image: url(../imgs/ui/icons/icon-organisation-dark.svg);
}

.mic{
   background-image: url(../imgs/ui/icons/icon-mic-dark.svg);
}

.phone-wires{
   background-image: url(../imgs/ui/backgrounds/phone-wires-multicolour.svg);
}

.phone-single-wire{
   background-image: url(../imgs/ui/backgrounds/phone-single-wire-multicolour.svg);
}

.facebook{
   background-image: url(../imgs/ui/icons/icon-facebook-256x256.svg);
}

.twitter{
   background-image: url(../imgs/ui/icons/icon-twitter-256x256.svg);
}

.linkedin{
   background-image: url(../imgs/ui/icons/icon-linkedin-256x256.svg);
}

.instagram{
   background-image: url(../imgs/ui/icons/icon-instagram-256x256.svg);
}

.crunchbase{
   background-image: url(../imgs/ui/icons/icon-crunchbase-256x256.svg);
}

/* effects and animation */


.trans{
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -ms-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}

.fade-in {
   -webkit-animation: fadeIn 3s normal;
   -moz-animation: fadeIn 3s normal;
   animation: fadeIn 3s normal;
}

.fade-in-up {
   -webkit-animation: fadeInUp 2s ease-out;
   -moz-animation: fadeInUp 2s ease-out;
   animation: fadeInUp 2s ease-out;
}

.fade-in-down {
   -webkit-animation: fadeInDown 3s normal;
   -moz-animation: fadeInDown 3s normal;
   animation: fadeInDown 3s normal;
}

.fade-in-down-rotate {
   -webkit-animation: fadeInDown 2s forwards, rotateRightTen 3s forwards;
   -moz-animation: fadeInDown 2s forwards, rotateRightTen 3s forwards;
   animation: fadeInDown 2s forwards, rotateRightTen 3s forwards;
}

.yank-left {
   -webkit-animation: yankLeft 3s normal;
   -moz-animation: yankLeft 3s normal;
   animation: yankLeft 3s normal;
}

.boop {
   -webkit-animation: boop 3s, pulse 1s normal;
   -moz-animation: boop 3s , pulse 1s normal;
   animation: boop 3s, pulse 1s normal;
}

.pull-left-large{
   -webkit-animation: pullLeftLarge 3s normal;
   -moz-animation: pullLeftLarge 3s normal;
   animation: pullLeftLarge 3s normal;
}

.bounce{
   -webkit-animation: bounce 5s ease-in infinite;
   -moz-animation: bounce 5s ease-in infinite;
   animation: bounce 5s ease-in infinite;
}

/* @dark mode */

@media screen and (prefers-color-scheme: dark) {

   nav{
      background-color: rgba(0,0,0,0.95);
      background: linear-gradient(0deg, rgba(0,0,0,0.75) 30%, rgba(0,0,0,1) 75%);
   }

   nav ul li{
      border-bottom: 0.55px solid #f5f5f5;
   }

   @media screen and (min-width: 1280px) {
      nav ul li{
         border-bottom: none;
      }
   }

   nav ul li a span{
      color: var(--color-text-darkmode);
   }

   .dialog {
      background-color: rgba(0,0,0,0.85);
   }
}