html, body {
    margin: 0;
    padding: 0;
    background: transparent;
}

* {
    font-family: "Work Sans", sans-serif;
}

#contentHolder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    max-width: clamp(600px, 600px, 95%);

    min-height: 300px;
    margin: 0 auto;
    padding: 5px;
}
#contentHolder #errorNote {
    min-height: 20px;
    color: red;
    line-height: 20px;
    font-size: 14px;
    text-align: center;
    justify-content: center;
}
#contentHolder #errorNote.hidden {
    opacity: 0;
    display: block !important;
}
#contentHolder > * {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    transition: all 1000ms ease-in-out;
}
#contentHolder > * > * {
    flex: 1 1 auto;
    outline: 1px solid #f7b632;
    outline-offset: 3px;
    transition: all 500ms ease-in-out;
}
#contentHolder > * > *:not(:last-child) {
    margin-right: 3%;
}
#contentHolder > * > *:focus {
    box-shadow: 0 0 8px #f7b632;
}
#contentHolder #names > * {
    flex: 1 1 25%;
    /*max-width: calc(33.33% - 2% - 12px);*/
    max-width: calc(33.33% - 12px); /* for some reason on live site the -2% (6% margin /3) shouldn't be deducted to keep thigns responsive */
}

#contentHolder .required {
    border: 1px solid red;
}
.hidden {
    display: none !important;
}
#contentHolder .error {
    border-color: red !important;
    outline: 2px solid red !important;
}

input {
    border: 1px solid #7380b9;
    background-color: #7380b9;
    border-radius: 5px !important;

    padding: 5px !important;
    color: white;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
}
input:focus-visible,
input:hover {
    border-color: #f7b632;
    outline: 2px solid #f7b632 !important;
}
select {
    -webkit-appearance: none;
    appearance: none;

    color: white;
    outline: 0;
    padding: 5px 27px 5px 5px !important;
    border-radius: 5px !important;

    text-align: center;

    border: 1px solid #7380b9;
    background-color: #7380b9;
    background-image: linear-gradient(#f7b632, #f7b632), linear-gradient(-135deg, transparent 50%, #f7b632 50%), linear-gradient(-225deg, transparent 50%, #f7b632 50%), linear-gradient(#f7b632 42%, #7380b9 42%);

    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 25px 24px, 24px 22px, 25px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom;

    font-size: 16px;
    line-height: 25px;
    font-weight: bold;
    width: 64%;

    cursor: pointer;
}

select:focus-visible,
select:focus {
    border-color: #f7b632;
    outline: 2px solid #f7b632 !important;
}
option {
    text-align: center;
}

select:hover {
    /*opacity: 1;*/
}

/* START SUBMIT BUTTON */
input[type="button"] {
    cursor: pointer;
    font-weight: bold;
    animation: scaleInOutGlow 3000ms infinite ease-in-out;
    outline: none !important;

}
input[type="button"]:active {
    transform: scale(0.95);
    transition: all 250ms ease-in-out;

}
/* END SUBMIT BUTTON */
#resultHolder {
    display: block;
}
#resultHolder > * {
    flex: none;
    outline: none;
}

.flex-holder {
    display: flex;
}
.flex-holder > * {
    padding: 10px;
    flex: 1 1 auto;
}
#contentHolder #resultHolder .result {
    margin-right: 0;
}
.result .flex-holder {
    min-height: 150px;
    border: 1px solid #7380b9;
    border-radius: 5px;
    margin-bottom: 20px;
}
.result-box {
    flex: 0 1 150px;
    text-align: center;
    background: url('images/number_bg.jpg');
    padding: 0;
}
img.result-num {
    max-width: 100%;
}
.result-box .result-number {
    font-size: 20px;
    line-height: 25px;
    font-weight: bold;
}
.result-description {
    text-align: left;
}
.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#submitFormHolder p {
    text-align: center;
    margin-bottom: 20px;
}
#submitFormHolder .flex-holder {
    display: flex;
    justify-content: center;
}
#submitFormHolder .flex-holder > input {
    flex: 0 1 0;
}
input[type="email"] {
    width: clamp(300px, 300px, calc(100% - 200px));
    /*flex: 0 1 250px !important;*/
    margin-right: 20px;
}
.share-title {
    background: #7380b9;
    padding: 5px;
    text-align: center;
    margin: 20px 0;

    /*color: rgb(178, 86, 0);*/
    color: white;
    font-size: 25px;
    line-height: 30px;
    font-weight: bold;
}

#resultHolder .klaviyo-form [data-testid="form-row"]:first-child p {
    /* uncomment this if you want "want to know more" to animate as well */
    /*animation: scaleInOut 3000ms infinite ease-in-out !important;*/
}
#resultHolder .klaviyo-form button {
    animation: scaleInOutGlow 3000ms infinite ease-in-out !important;
}

.fading-out {
    animation: fadingOut 500ms ease-in-out forwards;
}
.fading-in {
    animation: fadingIn 500ms ease-in-out forwards;
}
@keyframes fadingIn {
    0% {
        opacity: 0 !important;
        transform: scale(0);
    }
    100% {
        opacity: 1 !important;
        transform: scale(1);
    }
}
@keyframes fadingOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
@keyframes scaleInOut {
    0% {
        transform: scale(0.95);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(0.95);
    }
}
@keyframes scaleInOutGlow {
    0% {
        transform: scale(0.95);
    }
    50%{
        transform: scale(1);
        box-shadow: -5px -5px 10px rgba(247, 182, 50, 0.4), 5px -5px 10px rgba(247, 182, 50, 0.4), -5px 5px 10px rgba(247, 182, 50, 0.4), 5px 5px 10px rgba(247, 182, 50, 0.4);
    }
    100%{
        transform: scale(0.95);
    }
}


#tryAgain {
    margin-top: 20px;
    cursor: pointer;

    border: 1px solid #7380b9;
    background-color: #7380b9;
    border-radius: 5px !important;
    padding: 5px !important;

    color: white;
    font-size: 16px;
    line-height: 25px;
    text-align: center;

    font-weight: bold;
}
#tryAgain:hover {
    border-color: #f7b632;
    outline: 2px solid #f7b632 !important;
    animation: scaleInOutGlow 3000ms infinite ease-in-out;
}