.text-block {
width: 100%;
max-width: 600px;
padding: 0;
margin-bottom: 2em;
}
.text-block h4,
.text-block h6,
.text-block p {
margin: 0;
padding: 0 10px;
text-align: center;
}
.text-block p {
margin: 10px;
}
#nf-field-1-container {
--index: 0;
}
#nf-field-2-container {
--index: 1;
}
#nf-field-5-container {
--index: 2;
}
#nf-field-3-container {
--index: 3;
}
#nf-field-4-container {
--index: 4;
}
.nf-field-container {
opacity: 0;
transform: translateY(100%);
transition: all 0.5s;
animation: fade-in-section 1.5s ease-out normal forwards;
animation-delay: calc(0.4s * var(--index));
}
.nf-form-title h3 {
text-align: center;
}
.nf-form-content .list-select-wrap .nf-field-element > div, .nf-form-content input:not([type="button"]), .nf-form-content textarea {
color: #AA91E0 !important;
font-weight: bold;
border: 2px solid #AA91E0 !important;
background-color: rgba(255,181,216,0.5) !important;
}
.nf-form-content .list-select-wrap .nf-field-element > div:focus, .nf-form-content input:not([type="button"]):focus, .nf-form-content textarea:focus {
color: #fff !important;
font-size: 18px;
font-weight: normal;
border: 4px solid #AA91E0 !important;
background-color: #FFB5D8 !important;
}
.nf-form-content button, .nf-form-content input[type="button"], .nf-form-content input[type="submit"] {
width: 100% !important;
height: auto !important;
padding: 12px 40px;
font-size: 18px;
background-color: #AA91E0 !important;
}
.nf-form-content button:hover, .nf-form-content input[type="button"]:hover, .nf-form-content input[type="submit"]:hover {
color: #fff !important;
background-color: #FFB5D8 !important;
}
@media (max-width: 767px) {
/* .nf-field-container {
animation: fade-in-section-mobile 1s cubic-bezier(0.750, -0.015, 0.565, 1.055) normal forwards;
animation-delay: calc(0.2s * var(--index));
} */
.text-block {
margin-bottom: 1em;
}
}
@keyframes fade-in-section {
0% {
opacity: 0;
transform: translateY(100%);
}
33% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fade-in-section-mobile {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
