@font-face {
    font-family: "intel_light";
    src: url('../fonts/intelone-display-latin-light.e8ee702d.woff2') format("woff2");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "intel_regular";
    src: url('../fonts/intelone-display-latin-regular.7d30ccfa.woff2') format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "intel_medium";
    src: url('../fonts/intelone-display-latin-medium.38e8d51a.woff2') format("woff2");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "intel_bold";
    src: url('../fonts/intelone-display-latin-bold.1e07e246.woff2') format("woff2");
    font-weight: 700;
    font-style: normal
}

:root {
    /*========== Colors ==========*/
    --black-color: #000;
    --green-color: #71e928;
    --orange-color: #fd8910;
    --red-color: #ef1b27;
}

/*========== Layout ==========*/

body {
    position: relative;
    font-family: "intel_regular", serif;
}


.green_color {
    color: var(--green-color);
}

.orange_color {
    color: var(--orange-color);
}

.intel__bold {
    font-family: "intel_bold", serif;
}


/*========== Formsection ==========*/

#formAnchor {
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.4);
}

.formSection {
    margin: 30px auto 20px auto !important;
    text-align: center;
    padding: 10px 10px 25px 10px;
    width: 100%;
    border-radius: 5px;
}

.formSection #formopacity {
    width: 90%;
    margin: 0 auto;
}

.formSection > h2 {
    font-weight: 800 !important;
    font-size: 36px !important;
}

#form h4 {
    font-weight: 800 !important;
    margin: 30px auto !important;
}

#form ::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.formSection .formSection__form {
    width: 800px;
    margin: 0 auto;
}

.formSection .formSection__form .oneInput,
.formSection .formSection__form .twoInput {
    margin: 10px auto;
}

.formSection .formSection__form .twoInput {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 15px;
}

.formSection .formSection__form .threeInput {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 15px;
    align-items: center;
}

.formSection .formSection__form .oneInput input,
.formSection .formSection__form .twoInput input,
.formSection .formSection__form .threeInput input {
    width: 100%;
    padding: 15px 0 15px 12px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    font-size: 13px;
}

.formSection .formSection__form select {
    width: 100%;
    font-size: 13px;
    padding: 10px 10px 10px 30px;
    height: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/arrow.png) 93% / 4.5% no-repeat #000;
    border-radius: 9px;
    border: 1px solid #000;
}

.formSection .formSection__form .oneInput select {
    background: url(../img/arrow.png) 96.5% / 2.2% no-repeat rgba(0, 0, 0, 0.3);
}

.formSection .formSection__form #fileSection {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #000;
    border-radius: 24px;
    padding: 30px 23px 20px 23px;
    width: 100%;
}


#form #btnSend {
    margin: 0 auto;
    background: none;
    color: #fff;
    background: var(--orange-color);
    border-radius: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 800 !important;
    padding: 18px 10px !important;
    text-decoration: none !important;
    text-align: center !important;
    font-size: 18px !important;
    width: 290px !important;
    transition: 0.15s !important;
    cursor: pointer !important;
    z-index: 5 !important;
}


.modelBoxBG {
    width: 100%;
    height: 340px;
    top: 20%;
    background: #F38D28;
    background: linear-gradient(33deg, rgba(243, 141, 40, 1) 0%, rgba(240, 88, 38, 1) 50%, rgba(238, 28, 37, 1) 100%);
    clip-path: polygon(0 11%, 100% 0, 100% 93%, 0 100%);
}

@media screen and (max-width: 909px) {
    #form #btnSend {
        bottom: 240px;
    }
}

#form #btnSend:hover {
    transform: scale(0.95);
}

#form .exampleFile {
    margin-top: 5px;
}

#form .exampleFile .btn-tertiary {
    padding: 9px 0;
    font-size: 14px;
}

#form .exampleFile .btn-tertiary2 {
    padding: 9px 0;
    font-size: 13px;
}

#form .exampleFile .btn-tertiary:hover {
    color: #fff;
    text-decoration: none;
}

@media screen and (max-width: 1279px) {
    .formSection {
        width: 100%;
    }
}

@media screen and (max-width: 999px) {
    .formSection .formSection__form {
        width: 95% !important;
    }
}

@media screen and (max-width: 759px) {
    .formSection .formSection__form {
        width: 90%;
    }

    .formSection .formSection__form .twoInput,
    .formSection .formSection__form .threeInput {
        display: block;
    }

    .formSection .formSection__form .twoInput input:nth-child(2),
    .formSection .formSection__form .twoInput select:nth-child(2) {
        margin-top: 10px;
    }
}

/* Checkbox */

.flex-checkbox {
    position: relative;
    z-index: 10;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    color: #fff !important;
}

.flex-checkbox a {
    text-decoration: underline !important;
}

.flex-checkbox label {
    margin-left: 10px;
    font-size: 12px;
    margin-top: 2px;
}

input[type="checkbox"] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    background: none;
    height: 16px;
    width: 16px;
    border: 1px solid #000;
}

input[type="checkbox"]:checked {
    background: #000;
}

input[type="checkbox"]:hover {
    filter: brightness(90%);
}

input[type="checkbox"]:disabled {
    background: none;
    opacity: 0.6;
    pointer-events: none;
}

input[type="checkbox"]:after {
    content: "";
    position: relative;
    left: 40%;
    top: 20%;
    width: 15%;
    height: 40%;
    border: 1px solid #000;
    transform: rotate(45deg);
    display: none;
}

input[type="checkbox"]:checked:after {
    display: block;
}

input[type="checkbox"]:disabled:after {
    border-color: #000;
}

.form__checkbox {
    margin-top: 40px;
}

.form__checkbox a {
    color: #000;
}

.form__checkbox .flex-checkbox label {
    color: #000;
}

.form__checkbox p {
    color: #000;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 10px;
    text-align: left;
}

.form__checkbox p a {
    text-decoration: underline !important;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/arrow.png) 96% / 4% no-repeat #fff;
}

.modelsBG select {
    background: url(../img/arrow.png) 96% / 3% no-repeat #fff;
}

#selectorModels1,
#selectorModels2 {
    margin-top: 16%;
}

/* == LOADER == */

#form .loader {
    display: none;
    padding: 50px 0;
    position: relative;
    color: #000;
    text-align: center;
    font-size: 24px;
}

#loading-bar-spinner.spinner {
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
    position: absolute;
    z-index: 19 !important;
    -webkit-animation: loading-bar-spinner 350ms linear infinite;
    animation: loading-bar-spinner 350ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon {
    width: 40px;
    height: 40px;
    border: solid 3px transparent;
    border-top-color: #000 !important;
    border-left-color: #000 !important;
    border-radius: 50%;
}

@-webkit-keyframes loading-bar-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loading-bar-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*========== MEDIA QUERIES ==========*/

@media screen and (max-width: 1024px) {
    #selectorModels1,
    #selectorModels2 {
        margin-top: 5%;
    }

    .modelBoxBG {
        height: 440px;
    }

    .formSection {
        margin: 0 auto 0 auto !important;
    }

    .formSection .formSection__form .oneInput select {
        background: url(../img/arrow.png) 96.5% / 4.5% no-repeat rgba(0, 0, 0, 0.3);
    }

}

@media screen and (min-width: 2009px) {
    .formSection .formSection__form {
        width: 1100px;
        margin: 0 auto;
    }

    .formSection .formSection__form .oneInput input, .formSection .formSection__form .twoInput input, .formSection .formSection__form .threeInput input {
        font-size: 18px;
    }

    .row_file p, .flex-checkbox label, .form__checkbox p {
        font-size: 18px;
    }

    .modelBoxBG {
        height: 540px;
        top: 20%;
    }

    #selectorModels1 {
        margin-top: 24%;
    }

}

@media screen and (max-width: 1309px) {
    .formSection .formSection__form {
        width: 100%;
    }
}

/*========== Animations ==========*/

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    1.78571% {
        transform: translate(8px, 0);
    }
    5.57143% {
        transform: translate(0, 0);
    }
    9.35714% {
        transform: translate(8px, 0);
    }
    14.14286% {
        transform: translate(0, 0);
    }
    18.92857% {
        transform: translate(8px, 0);
    }
    25.71429% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}