/* ------------------------------- 
Specification
------------------------------- */
body {
   font-family: 'Gilroy', Helvetica, Arial, sans-serif;
   color: #0e0e0e;
   font-size: 14px;
   margin: 0;
   padding: 0;
}

body, html {
   height: 100%;
}

div, p, form, input, a, span, button, textarea, input {
   box-sizing: border-box;
}

ul, li {
   display: block;
   padding: 0;
   margin: 0;
}

p {
   margin: 0;
   font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
   margin: 0;
}

a, a:hover, a:active {
   text-decoration: none;
}

a, button, input {
   transition: all 0.5s ease;
}

input {
   font-family: inherit;
   border-radius: 0;
   -webkit-appearance: button;
}

input, input:hover, input:focus, input:active,
button, button:hover, button:focus, button:active,
textarea, textarea:hover, textarea:focus, textarea:active {
   outline: none;
}

textarea {
   outline: none;
   resize: none;
   font-family: inherit;
   border: none;
   display: block;
}

main {
   flex: 1 1 auto;
}

.wrapper {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

.container {
   margin: 0 auto;
   max-width: 969px;
}

.grata-quiz {
   background-color: #F8F8F8;
   height: 100vh;
}

.grata-quiz-start-wrapper {
   position: relative;
   background: #ffffff;
   display: none;
   height: 100%;
   z-index: 1;
   color: #ffffff;
}

.grata-quiz-start-wrapper.active {
   display: block;
}

.grata-quiz-start-wrapper::after {
   position: absolute;
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   pointer-events: none;
   top: 0;
   left: 0;
   z-index: -1;
   background: linear-gradient(270deg, #272626, transparent);
}

.grata-quiz-start-wrapper .data-quiz-bg {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: -1;
}

.grata-quiz-start-wrapper .data-quiz-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.grata-quiz-start {
   width: 41.66666674%;
   margin-left: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
   border-left: 1px solid hsla(0, 0%, 100%, 0.16);
   padding: 28px 32px 28px;
}

.data-lock-icon svg {
   width: 11px;
   height: 11px;
   fill: #fff;
}

.grata-quiz-start .data-quiz-start-title {
   font-size: 30px;
   font-weight: 700;
   margin-bottom: 16px;
   padding-top: 16px;
   position: relative;
}

.grata-quiz-start .data-quiz-start-title:before {
   content: '';
   position: absolute;
   width: 38px;
   height: 3px;
   background-color: #ffffff;
   top: 0;
   left: 0;
}

.grata-quiz-start .data-quiz-start-description {
   font-size: 18px;
   font-weight: 500;
   line-height: 1.33;
   margin-bottom: 16px;
}

.grata-quiz-start .data-quiz-button-wrapper .grata-button {
   padding: 12px 25px;
   box-shadow: 0 1px 4px 0 rgba(0, 84, 221, 0.2);
   background-color: #005587;
   border: none;
   display: flex;
   align-items: center;
   gap: 5px;
   color: #ffffff;
   border-radius: 40px;
   line-height: 1.3rem;
   font-size: 18px;
   font-family: 'Gilroy';
   min-height: 55px;
   position: relative;
   overflow: hidden;
   max-width: 128px;
   cursor: pointer;
}

.grata-quiz-start .data-quiz-button-wrapper .grata-button:after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   height: 100%;
   background: linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 10%, hsla(0, 0%, 100%, 0.2) 20%, hsla(0, 0%, 100%, 0.6));
   width: 20px;
   transform: skewX(-45deg);
   left: -20%;
   transition: all 0.6s ease;
   animation-name: blick;
   animation-duration: 6s;
   animation-iteration-count: infinite;
}

.grata-quiz-start .data-quiz-button-wrapper .grata-button svg {
   min-width: 18px;
   height: 18px;
   fill: #ffffff;
}

@-webkit-keyframes blick {
   60% {
      left: 100%;
   }

   to {
      left: 130%;
   }
}

@keyframes blick {
   60% {
      left: 100%;
   }

   to {
      left: 130%;
   }
}

.grata-quiz .data-bonus-wrapper {
   margin-top: 40px;
   width: 100%;
   max-width: 400px;
   position: relative;
}

.grata-quiz .data-bonus-wrapper .data-bonus-title {
   margin-bottom: 7px;
   text-transform: uppercase;
   font-size: 10px;
   font-weight: 700;
   line-height: 2.4;
   letter-spacing: 1px;
}

.grata-quiz .data-bonus-wrapper .data-bonus-blocks {
   display: flex;
   gap: 15px;
}

.grata-quiz .data-bonus-wrapper .data-bonus-item {
   max-width: 192px;
   width: 100%;
   display: flex;
   align-items: center;
   gap: 15px;
   border-radius: 5px;
   line-height: 1.2;
   background: linear-gradient(331deg, rgb(0, 45, 117), rgb(66, 139, 255));
   position: relative;
   padding: 8px 13px;
   cursor: pointer;
   position: relative;
   z-index: 1;
}

.grata-quiz .data-bonus-wrapper .data-bonus-item:after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.55));
   top: 0;
   right: 0;
   z-index: -1;
}

.grata-quiz .data-bonus-wrapper .data-bonus-text {
   font-size: 13px;
   font-weight: 600;
   color: #fff;
   max-height: 60%;
   text-align: right;
   word-break: break-word;
}

.grata-quiz .data-bonus-wrapper .data-lock-icon {
   position: absolute;
   top: 0;
   right: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transform: translate(40%, -40%);
   background-color: #8d8d8d;
   border-radius: 100%;
   z-index: 2;
   height: 25px;
   width: 25px;
   border: 4px solid #fff;
   box-shadow: 0 4px 10px 0 var(--color-bg-alpha2, rgba(0, 0, 0, 0.1));
}

/*
* Questions Wrapper
*/
.grata-quiz .grata-quiz-questions {
   display: none;
}

.grata-quiz .grata-quiz-questions.active {
   display: block;
}

.grata-questions-form .data-question-block {
   display: none;
}

.grata-questions-form .data-question-block.active {
   display: block;
}

.grata-quiz-questions-wrapper {
   height: 100vh;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   max-width: 1024px;
   width: 95%;
   margin: auto;
   display: none;
}

.grata-quiz-questions-wrapper.active {
   display: flex;
}

.grata-quiz-questions-wrapper .data-progress-bar {
   width: 100%;
}

.grata-quiz-questions-wrapper .data-progress-bar .data-step {
   display: block;
   font-size: 18px;
   font-weight: 500;
   color: #005587;
   width: 100%;
   text-align: center;
   margin-bottom: 15px;
}

.grata-quiz-questions-wrapper .data-progress-bar .data-step span {
   font-weight: 700;
}

.grata-quiz-questions-wrapper .data-progress-bar .progress-bar-wrapper {
   width: 100%;
   background-color: #e0e0e0;
   border-radius: 5px;
   max-width: 1024px;
   position: relative;
   height: 10px;
   margin-bottom: 15px;
}

.grata-quiz-questions-wrapper .data-progress-bar .progress-bar-fill {
   height: 100%;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   background-color: #005587;
   border-radius: 5px;
   transition: width 0.5s;
}

.grata-questions-form {
   width: 100%;
}

.grata-quiz-questions-wrapper .data-question-block {
   max-height: 75vh;
   min-height: 570px !important;
   box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.15);
   border: 5px solid #e6e6e6;
   border-radius: 4px;
   width: 100%;
   padding: 30px 30px 95px;
   background-color: #ffffff;
}

.grata-quiz-questions-wrapper .data-question-block .data-question-title {
   font-size: 28px;
   color: #363636;
   line-height: 1.2;
   font-weight: 500;
   margin-bottom: 16px;
}

.grata-quiz-questions-wrapper .data-question-block .data-question-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 16px 8px;
}

.grata-quiz-questions-wrapper .data-question-block .data-question-item {
   width: calc(50% - 10px);
}

.grata-quiz-questions-wrapper .data-question-block .data-question-item label {
   width: 100%;
   display: block;
   border-radius: 5px;
   border: solid 1px rgba(217, 216, 230, 0.55);
   will-change: box-shadow;
   -webkit-transition: -webkit-box-shadow 0.15s ease-out;
   transition: -webkit-box-shadow 0.15s ease-out;
   transition: box-shadow 0.15s ease-out;
   transition: box-shadow 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;
   padding: 12px 16px;
   box-sizing: border-box;
   cursor: pointer;
}

.grata-quiz-questions-wrapper .data-question-block .data-question-item label:focus,
.grata-quiz-questions-wrapper .data-question-block .data-question-item label:hover {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.grata-quiz-questions-wrapper .data-question-block .data-question-item input {
   width: 0;
   height: 0;
   opacity: 0;
   margin: 0;
}

.grata-quiz-questions-wrapper .data-question-block .data-question-item label span {
   font-size: 16px;
   position: relative;
   padding-left: 36px;
}

.grata-quiz-questions-wrapper .data-question-block .data-question-item label span:before {
   content: '';
   position: absolute;
   width: 20px;
   height: 20px;
   border-radius: 100px;
   background-color: #e8e8e8;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   border: 2px solid transparent;
}

.grata-quiz-questions-wrapper .data-question-block .data-question-item label input:checked+span:before {
   border: 2px solid #7957d5;
   box-shadow: 0 0 0.5em rgba(121, 87, 213, 0.8);
}

.grata-quiz-questions-wrapper .data-question-block .data-question-item label span:after {
   content: "";
   position: absolute;
   left: 7px;
   bottom: 4px;
   width: 10px;
   height: 10px;
   transition: -webkit-transform 0.15s ease-out;
   transition: transform 0.15s ease-out;
   transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out;
   border-radius: 50%;
   transform: scale(0);
   background: #5759d5;
}

.grata-quiz-questions-wrapper .data-question-block .data-question-item label input:checked+span:after {
   transform: scale(1);
}

.grata-quiz-questions-wrapper .data-question-last {
   padding: 0;
}

.data-question-last .data-block-inner {
   display: flex;
   justify-content: space-between;
   min-height: 672px;
}

.data-question-last .data-block-info {
   max-width: 600px;
   padding: 100px;
   padding-left: 80px;
   padding-right: 39px;
}

.data-question-last .data-block-info .data-info-text {
   font-size: 14px;
   font-weight: 500;
   width: 90%;
   color: rgba(0, 0, 0, 0.7);
   margin-bottom: 8px;
   line-height: 1;
}

.data-question-last .data-block-info .data-info-title {
   line-height: 1;
   font-size: 26px;
   font-weight: 500;
   color: #000000;
   max-width: 440px;
   margin-bottom: 10px;
}

.data-question-last .data-block-info .data-info-description {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
   max-width: 440px;
   color: rgba(0, 0, 0, 0.7);
   margin-bottom: 30px;
}

.data-question-last .data-block-info .data-bonus-title {
   font-weight: 900;
   font-size: 11px;
   line-height: 1.53;
   letter-spacing: 1.1px;
   color: rgba(0, 0, 0, 0.7);
   margin-bottom: 20px;
}

.data-question-last .data-block-info .data-bonus-item {
   background: #d1d1d1;

}

.data-question-last .data-block-info .data-bonus-text {
   color: #2e2e54;
}

.data-question-last .data-block-info .data-bonus-arrow {
   position: absolute;
   overflow: hidden;
   height: 45px;
   right: -70px;
   bottom: -30px;
   transform: scaleX(-1) rotate(180deg);
}

.data-question-last .data-block-info .data-bonus-arrow svg {
   width: 50px;
   fill: #005587;
}

.data-question-last .data-block-info .data-bonus-item:after {
   display: none;
}

.data-question-last .data-block-info .data-info-description p:not(:last-child) {
   margin-bottom: 8px;
}

.data-question-last .data-block-info .data-info-progress {
   height: 6px;
   position: relative;
   background: #dbdbdb;
   border-radius: 25px;
   box-shadow: inset 0 -1px 1px hsla(0, 0%, 100%, 0.3);
   margin-bottom: 30px;
}

.data-question-last .data-block-info #final-progress-1 {
   width: 95%;
   display: block;
   height: 100%;
   border-radius: 20px;
   background-image: linear-gradient(90deg, #0041a8, #005587);
   box-shadow: inset 0 2px 9px hsla(0, 0%, 100%, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4), 0.6px 1.9px 7px 0 rgba(0, 84, 221, 0.5);
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease;
}

.data-question-last .data-block-info #final-progress-1:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-image: linear-gradient(-45deg, hsla(0, 0%, 100%, 0.08) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, 0.08) 0, hsla(0, 0%, 100%, 0.08) 75%, transparent 0, transparent);
   z-index: 1;
   background-size: 20px 20px;
   -webkit-animation: move 1.5s linear infinite;
   animation: move 1.5s linear infinite;
   border-radius: 20px;
   overflow: hidden;
}

@-webkit-keyframes move {
   0% {
      background-position: 0 0;
   }

   to {
      background-position: 20px 20px;
   }
}

@keyframes move {
   0% {
      background-position: 0 0;
   }

   to {
      background-position: 20px 20px;
   }
}

.data-question-last .data-block-info .data-info-progress-text {
   position: absolute;
   top: -28px;
   right: 0px;
}

.data-question-last .data-block-info .data-info-progress-num {
   position: relative;
   font-size: 14px;
   color: #005587;
   left: calc(-50% - 1px);
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 8px;
}

.data-question-last .data-block-info .data-info-progress-arrow {
   position: absolute;
   left: -6px;
   bottom: -3px;
   border: 3px solid transparent;
   border-top: 7px solid #005587;
   z-index: 1;
}

.data-question-last .data-block-form {
   padding: 20px 45px;
   box-shadow: 2.5px 8.7px 15px 0 rgba(0, 0, 0, 0.11);
   background-color: #fff;
   border-left: solid 1.2px #e8e8e8;
   min-height: 100%;
   max-width: 416px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.data-question-last .data-form-inner {
   padding: 20px 45px;
   border-left: solid 1.2px #e8e8e8;
   border-right: solid 1.2px #e8e8e8;
   min-height: 517px;
}

.data-question-last .data-form-inner .data-form-group {
   position: relative;
   margin-bottom: 20px;
}

.data-question-last .data-form-inner .data-form-group label {
   text-transform: uppercase;
   padding-left: 3px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-align: left;
   word-break: break-all;
   color: rgba(0, 0, 0, 0.7);
   margin-bottom: 6px;
   display: block;
}

.data-question-last .data-form-inner .data-form-group input {
   border: solid 1.2px #b1b5be;
   color: #363636;
   border-radius: 4px;
   background-color: #fff;
   height: 60px;
   font-size: 15px;
   font-weight: 500;
   width: 100%;
   font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
   padding-left: 54px;
}

.data-question-last .data-form-inner .data-form-group .data-form-icon {
   position: absolute;
   top: 50%;
   transform: translateY(-25%);
   left: 4%;
}

.data-question-last .data-form-inner .data-form-group .data-form-icon svg {
   width: 36px;
   height: 36px;
   fill: #dbdbdb;
}

.data-question-last .data-form-inner .grata-button-wrapper {
   margin-top: 30px;
   position: relative;
   overflow: hidden;
}

.data-question-last .data-form-inner .grata-button-wrapper .grata-button {
   border: 1px solid #005587;
   min-height: 50px;
   max-width: 235px;
   margin: auto;
   background-color: transparent;
   font-size: 18px;
   padding: 12px 30px;
   min-height: 43px;
   height: auto;
   border-radius: 24px;
   line-height: 1.3rem;
   color: #005587;
   font-family: 'Gilroy';
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.data-question-last .data-form-inner .grata-button-wrapper .grata-button:hover {
   background-color: #005587;
   color: #ffffff;
}

.data-question-last .data-form-inner .grata-button-wrapper .grata-button:after {
   content: "";
   position: absolute;
   top: -50%;
   bottom: -50%;
   background: linear-gradient(90deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.6) 100%);
   width: 45px;
   -webkit-transform: skewX(-22deg);
   transform: skewX(-22deg);
   left: -65%;
   -webkit-animation-name: blick;
   animation-name: blick;
   -webkit-animation-duration: 3s;
   animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
}

@-webkit-keyframes blick {
   60% {
      left: 100%;
   }

   to {
      left: 130%;
   }
}

@keyframes blick {
   60% {
      left: 100%;
   }

   to {
      left: 130%;
   }
}

.grata-error-message {
   color: red;
   font-weight: 500;
}

.iti {
   width: 100%;
}

.grata-thanks .data-thanks-content {
   height: 100vh;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 95%;
   margin: auto;
}

.grata-thanks .data-title {
   font-size: 35px;
   margin-bottom: 15px;
}

@media only screen and (max-width: 1200px) {
   .grata-quiz-questions-wrapper {
      justify-content: flex-start;
      width: 100%;
   }

   .grata-quiz {
      background-color: #ffffff;
   }

   .grata-quiz-questions-wrapper .data-question-block {
      padding: 0;
      border-radius: 0;
      background-color: transparent;
      box-shadow: none;
      border: none;
   }

   .grata-quiz-questions-wrapper .data-progress-bar {
      display: flex;
      flex-direction: column-reverse;
   }

   .grata-questions-form {
      padding: 0 16px;
   }

   .data-question-last .data-block-info {
      padding-left: 0;
   }

   .data-question-last .data-block-form {
      padding: 0;
   }
}

@media only screen and (max-width: 992px) {
   .grata-quiz-start {
      width: 65%;
      padding: 24px 32px;
   }

   .data-question-last .data-block-inner {
      flex-direction: column;
      min-height: auto;
   }

   .data-question-last .data-block-info {
      padding: 20px 0 0;
      max-width: 100%;
      margin-bottom: 50px;
   }

   .data-question-last .data-block-info .data-info-title,
   .data-question-last .data-block-info .data-info-description,
   .data-question-last .data-block-form {
      max-width: 100%;
   }

   .data-question-last .data-form-inner {
      padding: 0;
      min-height: auto;
      border: none;
      max-width: 500px;
      width: 100%;
   }

   .data-question-last .data-block-form {
      box-shadow: none;
      border-left: none;
   }

   .data-question-last .data-form-inner .grata-button-wrapper .grata-button {
      max-width: 100%;
      width: 100%;
   }

   .data-question-last .data-block-info .data-bonus-arrow {
      display: none;
   }
}

@media only screen and (max-width: 768px) {
   .grata-quiz-start {
      width: 100%;
      height: auto;
   }

   .grata-quiz-start-wrapper {
      color: #000000;
   }

   .grata-quiz-start-wrapper .data-quiz-bg {
      position: static;
      height: 220px;
   }

   .grata-quiz-start-wrapper::after,
   .grata-quiz-start .data-quiz-start-title:before {
      display: none;
   }

   .grata-quiz-start .data-quiz-start-title {
      padding-top: 0;
      font-size: 26px;
   }

   .grata-quiz-start .data-quiz-start-description {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.7);
   }

   .grata-quiz-start .data-quiz-button-wrapper .grata-button {
      max-width: 100%;
      width: 100%;
      justify-content: center;
   }

   .grata-quiz .data-bonus-wrapper .data-bonus-text {
      position: absolute;
      right: 10px;
      max-width: 100px;
   }

   .grata-quiz .data-bonus-wrapper .data-bonus-icon img {
      width: 30px;
      height: 30px;
   }

   .grata-quiz .data-bonus-wrapper .data-bonus-item {
      height: 64px;
   }

   .grata-quiz-questions-wrapper .data-question-block .data-question-item {
      width: 100%;
   }

   .grata-quiz-questions-wrapper .data-question-block .data-question-title {
      font-size: 22px;
      margin-bottom: 20px;
   }

   .grata-quiz {
      padding-bottom: 100px;
      height: auto;
   }

   .grata-quiz-questions-wrapper .data-question-block {
      max-height: 100%;
   }

   .grata-quiz-questions-wrapper {
      height: 100%;
   }

   .grata-thanks .data-title {
      font-size: 30px;
   }
}