@font-face {
  font-family: "Cloud";
  src: url("../fonts/Cloud-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Cloud";
  src: url("../fonts/Cloud-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Cloud";
  src: url("../fonts/Cloud-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Cloud Mono";
  src: url("../fonts/CloudMono-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Cloud Mono";
  src: url("../fonts/CloudMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}


::-webkit-scrollbar {
    width:0rem;
}


html, body{   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
                                height: -webkit-fill-available;
  height: -moz-available;
  height: fill-available;
  font-size: 0.052083333333333336vw;}



*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
}
  body {
  position: relative;

  min-width: 320rem;
  font-size: 18rem;
  line-height: 1.25;
  color: #fff;
  font-family: "Cloud", sans-serif;
  font-weight: 300;
overflow: hidden;
background: transparent;
   color: #343F48;
  width: 100vw;
  height: 100vh;background: #F5F5F7;
  margin: 0; padding: 0;   
}

img {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.container{max-width: 1460rem; min-width: 1460rem;
    display: block;}

p{margin: 0;padding: 0;}

section{display: flex;  width: 100vw;
  height: 100vh;opacity: 0; pointer-events: none;    position: fixed;justify-content: center; align-content: center; align-items: center;
    top: 0;
    left: 0;transition: 1s;
  margin: 0; padding: 0;  }
section.active{opacity: 1; pointer-events: all;}


.section_01 .title{
    font-style: normal;
    font-weight: 700;
    font-size: 76rem;
    line-height: 91.9%;
    margin-bottom: 40rem;
    text-transform: uppercase;
    color: #07E897;
    max-width: 760rem;
   
    opacity: 0;transition: 2s ; transform: translateY(50rem);
}

.section_01 .title span {
    font-style: normal;
    font-weight: 700;
    font-size: 28rem;
    line-height: 105.9%;
    margin-top: 18rem;
    text-transform: uppercase;
    color: #343f48;
    max-width: 860rem;
    display: block;
}
.section_01.active .title{opacity: 1; transform: translateY(0); transition-delay: 1s;}
.section_01.active.animation-step .title{opacity: 0;  transform: translateY(-150vh);transition-delay: 0.5s;}
.section_01 .content{
    font-style: normal;
    font-weight: 300;
    font-size: 18rem;
    margin-bottom: 40rem;
    line-height: 120%;
    color: #343F48;
  
    max-width: 850rem;
    font-family: 'Cloud Mono';opacity: 0;transition: 2s; transform: translateY(50rem);

}
.section_01.active .content{opacity: 1; transform: translateY(0); transition-delay: 1.5s;}
.section_01.active.animation-step .content{opacity: 0;  transform: translateY(-150vh);transition-delay: 0.5s;}
.section_01 .content span{font-weight: 600;}
.btn {
    background: #07E897;
    border-radius: 100rem;
    font-style: normal;
    font-weight: 600;
    font-size: 18rem;
    line-height: 25rem;
    text-transform: uppercase;
    color: #343F48;text-decoration: none;
    padding: 20rem 60rem;
    border: 0;cursor: pointer;
    margin: 0;   border: 3rem solid transparent;
    font-family: 'Cloud';transition: 0.3s;
}
.btn:hover {
    background: #13D38E;
}
.section_01 .btn {

    opacity: 0;transition: 2s; transform: translateY(50rem); transition-delay: 2s;
  
}

.section_01.active .btn{opacity: 1; transform: translateY(0);}

.section_01.active.animation-step .btn{opacity: 0;  transform: translateY(-150vh);transition-delay: 0.5s;}



a.cloud {
    position: absolute;
    background-image: url(../img/cloud.svg);
    width: 154rem;
    height: 37rem;
    top: 50rem;
    background-size: contain;
    left: 50rem;
    cursor: pointer;
    background-repeat: no-repeat;transition: 1s;
}
a.forbes{
    position: absolute;
    background-image: url(../img/forbes.svg);
    width: 37rem;
    height: 37rem;
    top: 50rem;
    background-size: contain;
    right: 50rem;
    cursor: pointer;
    background-repeat: no-repeat;transition: 1s;
}


.section_03 .request-image,.section_01 .request-image {
    position: absolute;
    width: 674rem;
    height: 691rem;
    right: -80rem;
    top: 50%;
    transform: translateY(-20%);opacity: 0;transition: 2s; 
}
.section_03 .ball-white,.section_01 .ball-white {
    top: 300rem;
    height: 222rem;
    position: absolute;
    width: 250rem;
    left: -90rem;opacity: 0;transition: 2s; transform: translateY(50rem);
 
}
.section_03 .ball-small,.section_01 .ball-small {
    position: absolute;
    width: 238rem;
    height: 225rem;
    top: 50rem;
    left: 65%;
    transform: translateX(-50%);opacity: 0;transition: 2s; transform: translateY(50rem);
}

.section_03.active .request-image,.section_01.active .request-image{opacity: 1;  transform: translateY(-50%)}
.section_03.active .ball-white,.section_01.active .ball-white{opacity: 1; transform: translateY(0);   animation: 3s ball-white  alternate  infinite ease-in-out;}
.section_03.active .ball-small, .section_01.active .ball-small{opacity: 1; transform: translateY(0); animation: 3s ball-small  alternate  infinite ease-in-out;}

.section_01.active.animation-step .request-image{opacity: 0;  transform: translateY(-150vh);transition-delay: 0.5s;}
.section_01.active.animation-step .ball-white{opacity: 0;  transform: translateY(-150vh); transition-delay: 0.5s; }
.section_01.active.animation-step .ball-small{opacity: 0;  transform: translateY(-150vh);transition-delay: 0.5s; }

@keyframes ball-white {
  from {    top: 300rem;left: -90rem;}
  to {top: 260rem;left: -20rem;}
}

@keyframes ball-small {
  from {    top: 50rem;
    left: 65%;}
  to { top: 75rem;
    left: 60%;}
}


.social-wrap {
  position: fixed;
  bottom: 50rem;
  right: 50rem;
  z-index: 999;
  -webkit-transition: 1s 2.5s;
  transition: 1s 2.5s;

}

.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.social .shareButton.main .share, .social .shareButton.main .close, .social .shareButton.main .check {
  position: absolute;
  top: 12rem;
  left: 12rem;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}

.social .shareButton.main .share, .social .shareButton.main.open .close, .social .shareButton.main.sent .check {
  -webkit-transform: rotate(0) scale(1);
          transform: rotate(0) scale(1);
  opacity: 1;
}

.social .shareButton.main .close, .social .shareButton.main.open .share, .social .shareButton.main .check, .social .shareButton.main.sent .share {
  opacity: 0;
  -webkit-transform: rotate(90deg) scale(0);
          transform: rotate(90deg) scale(0);
}

.shareButton, .shareButton.open {
  border: none;
  border-radius: 50%;
 background: #07e897;
  padding: 12rem;
  overflow: hidden;cursor: pointer;
  outline: none;
  margin: 0.5rem;
  width: 24rem;
  height: 24rem;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-transition: all 200ms;
  transition: all 200ms;
  position: relative;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
          box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.shareButton:hover, .shareButton.open:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.shareButton svg, .shareButton.open svg {
  display: block;
  fill: #343f48;
  width: 24rem;
  height: 24rem;
  opacity: 1;
  -webkit-transition: all 150ms;
  transition: all 150ms;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.btn-a {
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn-a svg {
  width: 0;
  height: 0;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.section_01{background-color: #fff; }
body.soty{background-image: url(../img/section02.jpg); background-size: cover;background-position: right;}
.section_03{background-color: #fff;}
.section_02 .title .opacity {
    opacity: 0.5;
}
.section_02 .title .green {
    color: #07e897;
}
.section_02 .question {

    display: flex;
    flex-direction: column;
}
.section_02 .title {
font-family: 'Cloud Mono';
    font-style: normal;
    font-weight: 200;
    font-size: 20rem;
    line-height: 125%;
    color: #343F48;
    max-width: 740rem;
}
.section_02 .title span {
    font-weight: 600;
}
.q1 .title.block{opacity: .5;}
.section_02 .btn-wrap .btn {
    background: #F5F5F7;
    width: 760rem;
    height: 90rem;
    border-radius: 8rem;
    font-family: 'Cloud Mono';
    font-style: normal;
    letter-spacing: -0.5rem;
    font-weight: 100;
    font-size: 18rem;
    line-height: 28rem;
    color: #343F48;
    text-align: left;
    padding: 0 60rem;
    margin-bottom: 20rem;
    text-transform: inherit;border: 1px solid rgb(0 0 0 / 0%);
}
.section_02 .btn-wrap {
    display: flex;
    margin-top: 50rem;flex-direction: column;

}
.section_02 .question .btn-wrap .btn:hover {
    transform: translateY(-10rem);
    box-shadow: 0rem 30rem 10rem rgb(0 0 0 / 5%);
    background: #fff;
}

.section_02 .btn-wrap .btn.active {
    transform: translateY(-10rem);
    box-shadow: 0rem 20rem 10rem rgb(0 0 0 / 5%);
    background: #fff;
    border: 1px solid rgb(0 0 0 / 5%);
}
.section_02 .btn-wrap .btn.cloud {
    transform: translateY(-10rem);
    box-shadow: 0rem 20rem 10rem rgb(7 232 151 / 14%);
    background: #fff;
    border: 1px solid rgb(7 232 151);
}
.section_02 .btn-wrap.block .btn {
    pointer-events: none;opacity: 0.5;
}

.count{/* 1 / 5 */
    position: absolute;
    bottom: 50rem;
    font-family: 'Cloud Mono';
    font-style: normal;
    font-weight: 100;
    font-size: 20rem;
    line-height: 30rem;
    opacity: 1;
    color: #343f48;
}
.popup .icon {
    background-image: url(../img/cloud-icon-g.svg);
    width: 40rem;
    height: 40rem;
    background-size: cover;
    position: relative;
    top: 0;
    left: 50%;
   
}
.popup.cloud .icon{display: flex;}
.count span{color: #07e897;}
.section_02  .figure-standard {
    position: absolute;
    width: 800rem;
    height: 800rem;
    background-image: url(../img/img001.png);
    right: 60rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    background-size: cover;
    filter: drop-shadow(0rem 55rem 55rem rgb(84 101 115 / 87%));
    animation: 4s figure alternate  infinite ease-in-out;
}
.section_02.q2 .figure-standard{
      background-image: url(../img/img002.png);
}
.section_02.q3 .figure-standard{
      background-image: url(../img/img003.png);
}
.section_02.q4 .figure-standard{
      background-image: url(../img/img005.png);
}

.section_02.q5 .figure-standard{
      background-image: url(../img/img004.png);
}


@keyframes figure {
  from {transform: translateY(-45%);
  filter: drop-shadow(0rem 55rem 15rem rgb(84 101 115 / 50%));}
  to {transform: translateY(-55%);
      filter: drop-shadow(0rem 55rem 55rem rgb(84 101 115 / 50%));}
}

.popup{    opacity: 0;
    position: absolute;
    width: 670rem;
    height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    top: 50%;
    pointer-events: none;
    left: 75%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 8rem;
    padding: 50rem 75rem;
    transition: 0.75s;
    box-sizing: border-box;box-shadow: 0px 10px 50px rgb(0 0 0 / 20%);}
.popup.active {pointer-events: all;
    opacity: 1;   transform: translate(-50%, -50%) scale(1); z-index: 1;
}
.popup .title {
    font-family: 'Cloud';
    font-style: normal;
    font-weight: 700;
    font-size: 32rem;
    line-height: 117.5%;
    color: #343F48;
}
.popup p.content {
font-family: 'Cloud Mono';
    font-style: normal;
    font-weight: 100;
    font-size: 18rem;
    text-align: left;
    line-height: 135%;
    color: #343F48;
    margin-top: 20rem;
}
.ct {
    position: fixed;
    top: 50rem;
    z-index: 9;
    left: 50%;
}

.popup p.content span {
    display: block;
    margin-top: 20rem;
    font-weight: 600;
}
.popup .btn-wrap {
      margin-top: 20rem;
    flex-direction: row;
    display: flex;
}


    .popup .btn-wrap .btn-outline {
    background: transparent;
    border: 3rem solid #D7D7D9;
}
  .btn-outline {
    background: transparent;
    border: 3rem solid #D7D7D9;
}
.popup .btn-wrap .btn{      font-size: 14rem;
    padding: 16rem 20rem;
    position: relative;
    text-align: center;
    flex: 1;
    width: auto;
    height: auto;
    font-weight: 700;
    font-family: 'Cloud';
    text-transform: uppercase;border-radius: 100rem;}
.popup .btn-wrap .btn-cloud {
    margin-right: 20rem;
}
/*.popup.cloud .btn-cloud {
    display: flex;
    justify-content: center;
    align-items: center;
}*/
.section_02.q1 .figure-standard.active{    transform: translateY(-50%) scale(0);
    animation: none;transition: 1s;}
    .btn-outline:hover{background: #343F48;color: #fff;   border: 3rem solid transparent;}
.popup .btn-wrap .btn-cloud.btn.btn-green {
    padding-left: 30rem;background: #07E897;
}
    a.btn-cloud.btn.btn-green:before {
    background: url(../img/cloud-icon.svg);
    background-size: cover;
    width: 30rem;
    height: 30rem;
    display: flex;
    content: '';
    position: absolute;
    left: 20rem;
    top: 50%;
    transform: translateY(-50%);
}

.res .title {
    font-style: normal;
    font-weight: 700;
    font-size: 64rem;
    line-height: 91.9%;
    margin-bottom: 40rem;
    text-transform: uppercase;
    color: #07E897;
    max-width: 900rem;
}

.res .content {
    font-style: normal;
    font-weight: 300;
    font-size: 20rem;
    display: none;
    margin-bottom: 40rem;
    line-height: 125%;
    color: #343F48;
    max-width: 850rem;
    margin-bottom: 60rem;
    font-family: 'Cloud Mono';
}
input#ct {
    display: none;
}
#ct.count1 + .res .content.low{display: block;}
#ct.count2 + .res .content.low{display: block;}
#ct.count3 + .res .content.low{display: block;}
#ct.count4 + .res .content.low{display: block;}
#ct.count5 + .res .content.low{display: block;}
#ct.count6 + .res .content.low{display: block;}

#ct.count7 + .res .content.middle{display: block;}
#ct.count8 + .res .content.middle{display: block;}
#ct.count9 + .res .content.middle{display: block;}
#ct.count10 + .res .content.middle{display: block;}
#ct.count11 + .res .content.middle{display: block;}
#ct.count12 + .res .content.middle{display: block;}

#ct.count13 + .res .content.high{display: block;}
#ct.count14 + .res .content.high{display: block;}
#ct.count15 + .res .content.high{display: block;}
#ct.count16 + .res .content.high{display: block;}
#ct.count17 + .res .content.high{display: block;}
#ct.count18 + .res .content.high{display: block;}

p.reklama {
    position: fixed;
    font-size: 12rem;
    bottom: 50rem;
    left: 50rem;
    color: #222222;
}


@media only screen and (max-width: 1024px) {
p.reklama {
    bottom: 20rem;
    left: 20rem;
    max-width: 170rem;
}
    html,body,main,section{    height: -webkit-fill-available;}
    .social-wrap{    bottom: 30rem;
    right: 30rem;}
  html { font-size: 0.2vw;}
  body, body.soty{background-position: 70%;}
.section_02 .title{    font-size: 18rem;  letter-spacing: -0.6rem;}
.section_02 .btn-wrap .btn {
    width: 100%;
    height: auto;
    padding: 10rem 30rem;
    font-size: 17rem;
    line-height: inherit;
}
.section_02 .btn-wrap{margin-top: 20rem;}
.section_02 .figure-standard {
width: 280rem;
    height: 280rem;
    bottom: -18%;
    left: 28%;
    top: auto;
}
.popup .icon{display: flex;}
.count{bottom: 30rem;}
.popup p.content{    font-size: 18rem;
    text-align: center;
    line-height: 20rem;}
    .popup .btn-wrap {
    flex-direction: column;
}
.popup.cloud .icon {

}
.popup .btn-wrap .btn {
    padding: 20rem 30rem;
    font-size: 15rem;
}

.popup {
    left: 50%;
    top: 50%; position: fixed;
    width: calc(100% - 50rem);
    height: auto;
    padding: 40rem 40rem;
    transform: translate(-50%, -50%) scale(0);
}
.popup.active{transform: translate(-50%, -50%) scale(1);}
  a.cloud{ top: 30rem; left: 30rem;}
    a.forbes{top: 30rem; right: 30rem;}
.section_03 .request-image, .section_01 .request-image,.section_03 .ball-white, .section_01 .ball-white,.section_03 .ball-small, .section_01 .ball-small{z-index: -1;}
    .section_03 .request-image, .section_01 .request-image{width: 400rem;
    height: 410rem;
    top: 90%;animation: none;}
    .container{min-width: auto;
    max-width: 100%;
    padding: 0 30rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 100rem;}
    .section_03 .ball-white, .section_01 .ball-white{}
    @keyframes ball-white {
  from {    top: 630rem;left: -90rem;}
  to {top: 550rem;left: -20rem;}
}

    @keyframes ball-small {
0% {
    top: 50rem;
    left: 73%;
}

100% {
    top: 75rem;
    left: 70%;
}
}
    .section_01 .title{font-size: 60rem;    margin-bottom: 20rem;}
    .section_01 .content{    font-size: 0rem;
    margin-bottom: 20rem;
    line-height: 0rem;}
    a.btn-cloud.btn.btn-green:before{left: 30rem;}
    .res .title{    font-size: 50rem;    margin-bottom: 20rem;display: none;}
    .res .content{  font-size: 18rem;
    margin-bottom: 20rem;
    line-height: 21rem;}
    .result.container .btn-wrap {
    display: flex;
    flex-direction: column;
}
.section_01 .content span {
    font-size: 20rem;
 font-weight: 200;
    line-height: 115%;
}
.section_01 .title span{font-size: 26rem;
    max-width: 419rem;}
.result.container .btn-wrap .btn {
    display: flex;
    position: relative;
    justify-content: center;
    margin-bottom: 20rem;
    align-items: center;
}
}