/* FONT */

body {
    font-family: "Readex Pro", sans-serif;
    font-size: 1rem;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
}

@font-face {
    font-display: swap;
    font-family: "Readex Pro";
    font-style: normal;
    font-weight: 400;
    src: url('../../font/Readex-Pro/readex-pro-v27-latin-regular.woff2') format("woff2");
}

/* === DESKTOP LAYOUT === */

@media (width>= 769px) {
/* BODY */

body {
    font-family: "Readex Pro", sans-serif;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* HEADER */

.site-header {
    background-color: #007cb7;
    padding: 20px;
    position: sticky;
    top: 0;
    width: 100%;
}

.site-header .logo {
    height: 50px;
    width: 100%;
}

/* CONTAINER PRINCIPAL */

main {
    margin: 10px auto 0;
    min-width: 0;
    max-width: 1000px;
    padding: 0 20px;
    width: 100%;
}

/* HOME */

.home nav ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.home nav ul li::before {
    color: black;
    content: "> ";
    font-weight: 700;
}

.home nav ul li a {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

/* TITLE */

.title {
    font-size: 2rem;
    margin: 0;
    text-align: center;
}

/* ADMISSION BOX */

.admission-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    text-align: justify;
    width: 100%;
}

.admission-box h2 {
    font-size: 1.5rem;
    margin: 0;
    text-align: left;
}

.admission-footer {
    color: black;
    font-weight: 700;
    margin: 0;
}

.admission-footer p {
    margin: 0;
}

/* REGISTRATION BOX */

.registration-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 20px;
}

.registration-box h2 {
    font-size: 1.5rem;
    margin-bottom: 40px;
    margin-top: 0;
    text-align: center;
}

.registration-form {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 2fr)
        minmax(0, 1fr)
        minmax(0, 2fr);
    width: 100%;
}

.registration-form span {
    color: #373737;
    font-size: 1rem;
}

input,
select,
textarea {
    padding: 5px 8px;
}

.registration-form select {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    color: #373737;
    cursor: pointer;
    font-size: 1rem;
}

.registration-form label {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
}

.registration-form input {
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    text-align: left;
}

.registration-form textarea {
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    grid-column: 2 / 5;
    height: 130px;
    resize: vertical;
}

.address {
    display: grid;
    gap: 5px;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.sex label{
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
}

.sex input{
    margin-right: 8px;
    text-align: left;
}

.knowledge label {
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
}

.knowledge input{
    margin-right: 8px;
    text-align: left;
}

.specialization label{
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
}

.specialization input{
    margin-right: 8px;
    text-align: left;
}

input:valid,
select:valid {
    border-left: 4px solid #218838;
}

input:invalid,
select:invalid {
    border-left: 4px solid #c82333;
}

.address input:first-child{
    grid-column: 1 / 3;
}

input[type="date"]::-webkit-datetime-edit {
    color: #373737;
    cursor: pointer;
}

input[type="date"]::-moz-datetime-edit {
    color: #373737;
    cursor: pointer;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    cursor: pointer;
}

.button{
    margin-top: 40px;
    text-align: center;
}

/* SEND BUTTON */

.button button {
    background-color: #007cb7;
    border: 2px solid black;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 50px;
}

.button button:hover {
    background-color: #005680;
}

/* FOOTER */

.site-footer {
    background-color: #373737;
    color: #fff;
    font-size: 1rem;
    padding: 6px;
    text-align: center;
    width: 100%;
}

}



@media (width >= 480px) and (width <= 768.5px) {
    /* BODY */

    body {
        font-family: "Readex Pro", sans-serif;
        font-size: 1rem;
        margin: 0;
        overflow-x: hidden;
        padding: 0;
        width: 100%;
    }

    /* HEADER */

    .site-header {
        background-color: #007cb7;
        padding: 20px;
        position: sticky;
        top: 0;
        width: 100%;
    }

    .site-header .logo {
        height: 50px;
        width: auto;
    }

    /* MAIN */

    main {
        margin: 10px auto 0;
        max-width: 768px;
        padding: 0 20px;
    }

    /* HOME */

    .home nav ul {
        list-style: none;
        margin: 20px 0;
        padding: 0;
    }

    .home nav ul li::before {
        color: black;
        content: "> ";
        font-weight: 700;
    }

    .home nav ul li a {
        color: #007cb7;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
    }

    /* TITLE */

    .title {
        font-size: 2rem;
        margin: 0;
        text-align: center;
    }

    /* ADMISSION BOX */

    .admission-box {
        background-color: #f6f7f8;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        box-sizing: border-box;
        margin-top: 20px;
        padding: 20px;
        text-align: justify;
        width: 100%;
    }

    .admission-box h2 {
        font-size: 1.5rem;
        margin: 0;
        text-align: left;
    }

    .admission-footer {
        color: black;
        font-weight: 700;
        margin: 0;
    }

    .admission-footer p {
        margin: 0;
    }

    /* REGISTRATION BOX */

    .registration-box {
        background-color: #f6f7f8;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        box-sizing: border-box;
        margin-bottom: 20px;
        margin-top: 20px;
        padding: 20px;
    }

    .registration-box h2 {
        font-size: 1.5rem;
        margin-bottom: 40px;
        margin-top: 0;
        text-align: center;
    }

    .registration-form {
        align-items: center;
        display: grid;
        gap: 8px 20px;
        grid-template-columns: 1fr 1fr;
        width: 100%
    }

    .registration-form span {
        color: #373737;
        font-size: 1rem;
    }

    input,
    select,
    textarea {
        padding: 5px 8px;
    }

    .registration-form select {
        background-color: #f6f7f8;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        color: #373737;
        cursor: pointer;
        font-size: 1rem;
        grid-column: inherit;
        min-width: 0;
        width: 100%;
    }

    .registration-form label {
        color: #007cb7;
        font-size: 1rem;
        font-weight: 700;
        grid-column: inherit;
        text-align: left;
    }

    .registration-form input {
        align-content: end;
        background-color: #fff;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        font-size: 1rem;
        grid-column: inherit;
        min-width: 0;
        text-align: left;
    }

    .registration-form textarea {
        background-color: #fff;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        font-size: 1rem;
        grid-column: 1 / 3;
        height: 130px;
        resize: vertical;
    }

    .address {
        display: grid;
        gap: 5px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .sex label{
        color: #373737;
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
        text-align: left;
    }

    .sex input{
        margin-right: 8px;
        text-align: left;
    }

    .knowledge label {
        color: #373737;
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
        text-align: left;
    }

    .knowledge input{
        margin-right: 8px;
        text-align: left;
    }

    label[for="last-name"] { grid-column: 1; grid-row: 1; }
    #last-name            { grid-column: 1; grid-row: 2; }

    label[for="first-name"] { grid-column: 2; grid-row: 1; }
    #first-name             { grid-column: 2; grid-row: 2; }

    /* Email (col 1) + Birth-date (col 2) */
    label[for="email"] { grid-column: 1; grid-row: 3; }
    #email             { grid-column: 1; grid-row: 4; }

    label[for="birth-date"] { grid-column: 2; grid-row: 3; }
    #birth-date             { grid-column: 2; grid-row: 4; }

    /* Sex (label direct #5) + Civil status (label direct #6) */
    .registration-form > label:nth-of-type(5) { grid-column: 1; grid-row: 5; }
    .registration-form > .sex                { grid-column: 1; grid-row: 6; }

    .registration-form > label:nth-of-type(6) { grid-column: 2; grid-row: 5; }
    #civil                                    { grid-column: 2; grid-row: 6; align-self: start; }

    .registration-form > label:nth-of-type(8) { grid-column: 2; grid-row: 7; }
    #avs                                      { grid-column: 2; grid-row: 8; align-self: start; }

    .registration-form > label:nth-of-type(9) { grid-column: 1; grid-row: 9; }
    .registration-form > .knowledge           { grid-column: 1; grid-row: 10; align-self: start; }

    .registration-form > label:nth-of-type(10) { grid-column: 2; grid-row: 9; }
    .registration-form > .specialization       { grid-column: 2; grid-row: 10; align-self: start; }

    .registration-form > label:nth-of-type(11) { grid-column: 1 / 3; grid-row: 11; }
    #comment                                   { grid-column: 1 / 3; grid-row: 12; }

    .specialization label{
        color: #373737;
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
        text-align: left;
    }

    .specialization input{
        margin-right: 8px;
        text-align: left;
    }

    input:valid,
    select:valid {
        border-left: 4px solid #218838;
    }

    input:invalid,
    select:invalid {
        border-left: 4px solid #c82333;
    }

    .address input:first-child{
        grid-column: 1 / 3;
    }

    input[type="date"]::-webkit-datetime-edit {
        color: #373737;
        cursor: pointer;
    }

    input[type="date"]::-moz-datetime-edit {
        color: #373737;
        cursor: pointer;
    }

    input[type="checkbox"]:hover,
    input[type="radio"]:hover {
        cursor: pointer;
    }

    .button{
        margin-top: 40px;
        text-align: center;
    }

    /* SEND BUTTON */

    .button button {
        background-color: #007cb7;
        border: 2px solid black;
        color: white;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 700;
        padding: 10px 50px;
    }

    .button button:hover {
        background-color: #005680;
    }

    /* FOOTER */

    .site-footer {
        background-color: #373737;
        color: #fff;
        font-size: 1rem;
        padding: 6px;
        text-align: center;
        width: 100%;
    }

}



@media (width>= 431px) and (width<=479.5px) {
    /* BODY */

    body {
        font-family: "Readex Pro", sans-serif;
        font-size: 1rem;
        margin: 0;
        overflow-x: hidden;
        padding: 0;
        width: 100%;
    }

    /* HEADER */

    .site-header {
        background-color: #007cb7;
        padding: 20px;
        position: sticky;
        top: 0;
        width: 100%;
    }

    .site-header .logo {
        height: 50px;
        width: auto;
    }

    /* CONTAINER PRINCIPAL */

    main {
        margin: 10px auto 0;
        max-width: 1000px;
        padding: 0 20px;
    }

    /* HOME */

    .home nav ul {
        list-style: none;
        margin: 20px 0;
        padding: 0;
    }

    .home nav ul li::before {
        color: black;
        content: "> ";
        font-weight: 700;
    }

    .home nav ul li a {
        color: #007cb7;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
    }

    /* TITLE */

    .title {
        font-size: 2rem;
        margin: 0;
        text-align: center;
    }

    /* ADMISSION BOX */

    .admission-box {
        background-color: #f6f7f8;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        box-sizing: border-box;
        margin-top: 20px;
        padding: 20px;
        text-align: justify;
        width: 100%;
    }

    .admission-box h2 {
        font-size: 1.5rem;
        margin: 0;
        text-align: left;
    }

    .admission-footer {
        color: black;
        font-weight: 700;
        margin: 0;
    }

    .admission-footer p {
        margin: 0;
    }

    /* REGISTRATION BOX */

    .registration-box {
        background-color: #f6f7f8;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        box-sizing: border-box;
        margin-bottom: 20px;
        margin-top: 20px;
        padding: 20px;
    }

    .registration-box h2 {
        font-size: 1.5rem;
        margin-bottom: 40px;
        margin-top: 0;
        text-align: center;
    }

    .registration-form {
        align-items: center;
        display: grid;
        gap: 20px;
        grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 2fr);
        width: 100%;
    }

    .registration-form span {
        color: #373737;
        font-size: 1rem;
    }

    input,
    select,
    textarea {
        padding: 5px 8px;
    }

    .registration-form select {
        background-color: #f6f7f8;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        color: #373737;
        cursor: pointer;
        font-size: 1rem;
    }

    .registration-form label {
        color: #007cb7;
        font-size: 1rem;
        font-weight: 700;
        text-align: left;
    }

    .registration-form input {
        background-color: #fff;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        font-size: 1rem;
        text-align: left;
    }

    .registration-form textarea {
        background-color: #fff;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        font-size: 1rem;
        grid-column: 1 / 3;
        height: 130px;
        resize: vertical;
    }

    .address {
        display: grid;
        gap: 5px;
        grid-column: 2;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .sex label{
        color: #373737;
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
        text-align: left;
    }

    .sex input{
        margin-right: 8px;
        text-align: left;
    }

    .knowledge label {
        color: #373737;
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
        text-align: left;
    }

    .knowledge input{
        margin-right: 8px;
        text-align: left;
    }

    .specialization label{
        color: #373737;
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
        text-align: left;
    }

    .specialization input{
        margin-right: 8px;
        text-align: left;
    }

    input:valid,
    select:valid {
        border-left: 4px solid #218838;
    }

    input:invalid,
    select:invalid {
        border-left: 4px solid #c82333;
    }

    .address input:first-child{
        grid-column: 1 / 3;
    }

    input[type="date"]::-webkit-datetime-edit {
        color: #373737;
        cursor: pointer;
    }

    input[type="date"]::-moz-datetime-edit {
        color: #373737;
        cursor: pointer;
    }

    input[type="checkbox"]:hover,
    input[type="radio"]:hover {
        cursor: pointer;
    }

    .button{
        margin-top: 40px;
        text-align: center;
    }

    /* SEND BUTTON */

    .button button {
        background-color: #007cb7;
        border: 2px solid black;
        color: white;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 700;
        padding: 10px 50px;
    }

    .button button:hover {
        background-color: #005680;
    }

    /* FOOTER */

    .site-footer {
        background-color: #373737;
        color: #fff;
        font-size: 1rem;
        padding: 6px;
        text-align: center;
        width: 100%;
    }

}




@media (width <= 430.5px) {
    /* BODY */

    body {
        font-family: "Readex Pro", sans-serif;
        font-size: 1rem;
        margin: 0;
        overflow-x: hidden;
        padding: 0;
        width: 100%;
    }


    /* HEADER */

    .site-header {
        background-color: #007cb7;
        padding: 20px;
        position: sticky;
        top: 0;
        width: 100%;
    }

    .site-header .logo {
        height: 50px;
        max-width: 100%;
        width: auto;
    }

    /* MAIN */

    main {
        margin: 10px auto 0;
        max-width: 100%;
        min-width: 0;
        padding: 0 20px;
    }

    /* HOME */

    .home nav ul {
        list-style: none;
        margin: 20px 0;
        padding: 0;
    }

    .home nav ul li::before {
        color: black;
        content: "> ";
        font-weight: 700;
    }

    .home nav ul li a {
        color: #007cb7;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
    }

    /* TITLE */

    .title {
        font-size: 2rem;
        margin: 0;
        text-align: center;
    }

    /* ADMISSION BOX */

    .admission-box {
        background-color: #f6f7f8;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        box-sizing: border-box;
        margin-top: 20px;
        padding: 20px;
        text-align: justify;
        width: 100%;
    }

    .admission-box h2 {
        font-size: 1.5rem;
        margin: 0;
        text-align: left;
    }

    .admission-footer {
        color: black;
        font-weight: 700;
        margin: 0;
    }

    .admission-footer p {
        margin: 0;
    }

    /* REGISTRATION BOX */

    .registration-box {
        background-color: #f6f7f8;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        box-sizing: border-box;
        margin-bottom: 20px;
        margin-top: 20px;
        padding: 20px;
    }

    .registration-box h2 {
        font-size: 1.5rem;
        margin-bottom: 40px;
        margin-top: 0;
        text-align: center;
    }

    .registration-form {
        align-items: center;
        display: grid;
        gap: 8px 0;
        grid-template-columns: minmax(0, 1fr);
        width: 100%
    }

    .registration-form span {
        color: #373737;
        font-size: 1rem;
    }

    input,
    select,
    textarea {
        padding: 5px 8px;
    }

    .registration-form select {
        background-color: #f6f7f8;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        color: #373737;
        cursor: pointer;
        font-size: 1rem;
        min-width: 0;
        width: 100%;
    }

    .registration-form label {
        color: #007cb7;
        font-size: 1rem;
        font-weight: 700;
        text-align: left;
    }

    .registration-form input {
        align-content: end;
        background-color: #fff;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        font-size: 1rem;
        min-width: 0;
        text-align: left;
    }

    .registration-form textarea {
        background-color: #fff;
        border: 1px solid #d6d8db;
        border-radius: 5px;
        font-size: 1rem;
        grid-column: 1;
        height: 130px;
        resize: vertical;
    }

    .address {
        display: grid;
        gap: 5px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .sex label{
        color: #373737;
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
        text-align: left;
    }

    .sex input{
        margin-right: 8px;
        text-align: left;
    }

    .knowledge label {
        color: #373737;
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
        text-align: left;
    }

    .knowledge input{
        margin-right: 8px;
        text-align: left;
    }

    label[for="last-name"] { grid-column: 1; grid-row: 1; }
    #last-name            { grid-column: 1; grid-row: 2; }

    label[for="first-name"] { grid-column: 1; grid-row: 3; }
    #first-name             { grid-column: 1; grid-row: 4; }

    /* Email (col 1) + Birth-date (col 2) */
    label[for="email"] { grid-column: 1; grid-row: 5; }
    #email             { grid-column: 1; grid-row: 6; }

    label[for="birth-date"] { grid-column: 1; grid-row: 7; }
    #birth-date             { grid-column: 1; grid-row: 8; }

    /* Sex (label direct #5) + Civil status (label direct #6) */
    .registration-form > label:nth-of-type(5) { grid-column: 1; grid-row: 9; }
    .registration-form > .sex                { grid-column: 1; grid-row: 10; }

    .registration-form > label:nth-of-type(6) { grid-column: 1; grid-row: 11; }
    #civil                                    { grid-column: 1; grid-row: 12; }

    .registration-form > label:nth-of-type(7) { grid-column: 1; grid-row: 13; }
    #address                                  { grid-column: 1; grid-row: 14; }

    .registration-form > label:nth-of-type(8) { grid-column: 1; grid-row: 15; }
    #avs                                      { grid-column: 1; grid-row: 16; }

    .registration-form > label:nth-of-type(9) { grid-column: 1; grid-row: 17; }
    .registration-form > .knowledge           { grid-column: 1; grid-row: 18; }

    .registration-form > label:nth-of-type(10) { grid-column: 1; grid-row: 19; }
    .registration-form > .specialization       { grid-column: 1; grid-row: 20; }

    .registration-form > label:nth-of-type(11) { grid-column: 1; grid-row: 21; }
    #comment                                   { grid-column: 1; grid-row: 22; }

    .specialization label{
        color: #373737;
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
        text-align: left;
    }

    .specialization input{
        margin-right: 8px;
        text-align: left;
    }

    input:valid,
    select:valid {
        border-left: 4px solid #218838;
    }

    input:invalid,
    select:invalid {
        border-left: 4px solid #c82333;
    }

    .address input:first-child{
        grid-column: 1 / 3;
    }

    input[type="date"]::-webkit-datetime-edit {
        color: #373737;
        cursor: pointer;
    }

    input[type="date"]::-moz-datetime-edit {
        color: #373737;
        cursor: pointer;
    }

    input[type="checkbox"]:hover,
    input[type="radio"]:hover {
        cursor: pointer;
    }

    .button{
        margin-top: 40px;
        text-align: center;
    }

    /* SEND BUTTON */

    .button button {
        background-color: #007cb7;
        border: 2px solid black;
        color: white;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 700;
        padding: 10px 50px;
    }

    .button button:hover {
        background-color: #005680;
    }

    /* FOOTER */

    .site-footer {
        background-color: #373737;
        color: #fff;
        font-size: 1rem;
        padding: 6px;
        text-align: center;
        width: 100%;
    }

}