/*Déclaration variables couleurs*/ 

:root {
    
    --gray: rgba(238, 242, 246, 1);
    --lightblue: rgba(234, 244, 255, 1);
    --blue: rgba(201, 226, 251, 1);
    --blue2: rgba(201, 221, 240, 1);
    --orange: rgba(235, 83, 44, 1);
    --black: rgba(0, 0, 0, 1);
    --white: rgba(255, 255, 255, 1);
    
}

/*Déclaration polices*/

@font-face {
    font-family: 'Roboto-400';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-700';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-900';
    src: url('../fonts/Roboto-Black.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-500';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-style: normal;
} 


/*Eléments principaux de la page*/

body {
    
    color: var(--black);
    /*background-color: #E5E5E5;*/
    background-color: var(--white);
    font-family: 'Roboto-400', sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.03em;
    margin: 0;
    
}

body h1 {

    color: var(--black);
    font-family: 'Roboto-900', sans-serif;
    font-weight: normal;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body h3 {

    color: var(--black);
    font-family: 'Roboto-900', sans-serif;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body h2 {

    color: var(--black);
    font-family: 'Roboto-900', sans-serif;
    font-weight: normal;
    font-size: 32px;
    line-height: 37.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}


body h4 {

    color: var(--black);
    font-family: 'Roboto-500', sans-serif;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 10px;

}

body p {

    color: var(--black);
    font-family: 'Roboto-400', sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.03em;
}

article {

    margin-top: 8%;
}

.ui-loader .ui-corner-all .ui-body-a .ui-loader-default {

    display: none;
}

.ui-loader  h1{

    display: none;
}

/* Responsive header */

@media all and (max-width: 1024px) {

    body h1 {

        font-size: 26px;
    }

    body h2 {

        font-size: 26px;
    }

    body h4, body h3 {

        font-size: 20px;
    }

}

@media all and (max-width: 768px) {

    body h1 {

        font-size: 20px;
    }

    body h2 {

        font-size: 20px;
    }

    body h4, body h3 {

        font-size: 18px;
    }

}

@media all and (max-width: 414px) {

    body h2 {

        font-size: 20px;
    }
}