@font-face {
    font-family: 'dmsans';
    src: url('fonts/dmsans-webfont.woff2') format('woff2'),
    url('fonts/dmsans-webfont.woff') format('woff');
}

:root{--cl-py: #0186e3;--cl-sy: #363435;--cl-dk: #000000;--cl-md: #a9a3a6;--cl-lt: #ffffff;--spc-2: 20px;}
*{box-sizing: border-box;padding: 0;margin: 0;}
html{height: inherit;min-height: 100%;}
body {position: relative;display: flex;align-items: center;height: 100vh;width: 100%;overflow: hidden;}
h1, h2, h3, h4, p, span, label, a, button, input, select, textarea, *{font-family: 'dmsans', sans-serif;font-style: normal;font-weight: 400;text-decoration: none;}
h1, h2, h3, h4, p, span, label, a, button, input, select, textarea{font-size: 20px;line-height: 1.05;color: var(--cl-sy);}
::-webkit-scrollbar{display: block;width: 10px;}
::-webkit-scrollbar-track{background: var(--cl-md);}
::-webkit-scrollbar-thumb{background: var(--cl-sy);}
::-webkit-scrollbar-thumb:hover{background: var(--cl-py);}
*::placeholder{font-family: 'dmsans', sans-serif;font-size: 19px;color: var(--cl-md);}
input,select, textarea{-webkit-appearance: none;-moz-appearance: none;appearance: none;border: none;outline: none;font-size: 20px;width: 100%;}
label{display: flex;margin-bottom: 10px;font-size: 25px;}
button{display: flex;align-items: center;width: fit-content;max-width: 572px;background-color: var(--cl-py);color: var(--cl-lt);font-size: 20px;text-align: center;text-transform: uppercase;cursor: pointer;padding: 14px 40px;border-radius: 50px;border: none;transition: 1s}
button.center{margin-left: auto;margin-right: auto;}
button:disabled{background-color: var(--cl-md);opacity: .75;transition: all .5s, background-color .0s, opacity .1s;}

a.btn-back{display: flex;align-items: center;color: var(--cl-md);line-height: 20px;cursor: pointer;}
a.btn-back::before{content: '';display: block;width: 32px;height: 32px;background: url('img/arrow-left.svg') 50% no-repeat;background-size: cover;}

.radio-box{display: flex;position: relative;padding-left: 32px;height: auto;min-height: 24px;align-items: center;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.radio-box *{transition: all .2s ease;}
.radio-box :hover input ~ .checkmark{background-color: var(--cl-lt);}
.radio-box .checkmark{position: absolute;top: 50%;left: 0;height: 24px;width: 24px;transform: translateY(-50%);background-color: var(--cl-sy);border: 1px solid var(--cl-py);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);}
.radio-box .checkmark::after{content: "";position: absolute;display: none;left: 50%;top: 50%;width: 25%;height: 50%;border: solid white;border-width: 0 3px 3px 0;transform: translate(-50%, -60%) rotate(45deg);}
.radio-box input{position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.radio-box input:checked ~ .checkmark{background-color: var(--cl-py);border: none;}
.radio-box input:checked ~ .checkmark::after{display: block;}
.radio-box.inline{display: inline-flex;}
.radio-box.small{min-height: 18px;padding-left: 26px;}
.radio-box .checkmark{height: 18px;width: 18px;}

.font-bold{font-weight: 600}
.font-size-sm,.font-size-sm *{font-size: 15px;}
.font-size-md {font-size: 20px;}
.font-size-lg{font-size: 30px;}
.font-size-xl, .font-size-xl *{font-size: 42px;}

.cl-py{color: var(--cl-py);}
.cl-lt{color: var(--cl-lt);}

.mt-1{margin-top: 10px;}.mb-1{margin-bottom: 10px;}
.mt-2{margin-top: 20px;}.mb-2{margin-bottom: 20px;}
.mt-3{margin-top: 30px;}.mb-3{margin-bottom: 30px;}
.mt-4{margin-top: 40px;}.mb-4{margin-bottom: 40px;}

.flex, .flex-desk, .flex-pad{display: flex;align-items: center;justify-content: space-between;}
.flex-desk.top{align-items: flex-start;}
.flex.end{justify-content: flex-end;}
.txt-center, .txt-center * {text-align: center}

.efx{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity: 0;visibility: hidden;transition: all .6s, transform 1s;}
.efx-show{-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;visibility: visible;}
.efx-hide{-webkit-transform: translateY(100%);transform: translateY(100%);}

.main{position: relative;width: 100%;max-width: 600px;height: 300px;margin: 0 auto 100px;}

a.logo {position: absolute;left: 20px;bottom: 20px;display: block;width: 100%;max-width: 200px;aspect-ratio: 137/27;background: url("img/hexah-digital.avif") 50% no-repeat;background-size: contain;}

.step {position: absolute;width: 100%;margin: 0 auto;}
.step[data-step-id='1']{padding: 0 60px;}
.step h2{margin-bottom: 30px;}

.label-box{display: flex;flex-direction: column-reverse;width: 100%;}
.label-box .btn-remove-file{position: absolute;bottom: 10px;right: 0;padding: 4px 8px;z-index: 10;cursor: pointer;background: var(--cl-py)}
.label-box textarea{display: block;min-height: 86px;max-height: 86px;min-width: 100%;max-width: 100%;border: none;border-left: var(--cl-py);}
.label-box input:required:valid + label,
.label-box select:required:valid + label,
.label-box select:required:invalid{color: var(--cl-md)}
.label-box select option{color: var(--cl-sy)}
.label-box .select-label {position: relative;}
.label-box .select-label::after{content: '';position: absolute;top: calc(100% + 10px);left: 50%;display: block;width: 20px;height: 20px;background: url(img/arrow-down.svg) no-repeat 50% 60% #ffffff;background-size: 30px;transform: translate(-50%);}

.label-box.file-upload{flex-direction: row-reverse;align-items: center;justify-content: flex-end;}
.label-box.file-upload input{display: block;height: 0;width: 0;overflow: hidden;}
.label-box.file-upload label{margin: auto 0 auto 10px;font-size: 20px;}
.label-box.file-upload button{min-height: 49px;min-width: 120px;background: #fff;color: var(--cl-sy);text-transform: capitalize;border: 1px solid var(--cl-md);}
.label-box.file-upload button::after{content: '';width: 26px;height: 26px;background: url("img/attachment.svg") no-repeat 50% #fff;background-size: 26px;margin-left: 5px;}

.btn-box{justify-content:flex-start;margin-top: 40px}
.btn-box button{position: relative;margin-left: 40px}
.btn-box button::after{content: 'ou pressione Enter';position: absolute;left: 0;bottom: 0;width: 100%;font-size: 11px;color: var(--cl-md);text-transform: initial;transition: .2s;z-index: -1;}
.btn-box button:enabled::after{bottom: -20px;}

.input-name{font-size: 30px;text-transform: capitalize}

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

@-webkit-keyframes animateInput {
    0% {opacity: 0;-webkit-transform: translateY(50px);transform: translateY(50px)}
    to {opacity: 1;-webkit-transform: none;transform: none}
}
@keyframes animateInput {
    0% {opacity: 0;-webkit-transform: translateY(50px);transform: translateY(50px)}
    to {opacity: 1;-webkit-transform: none;transform: none}
}