:root{
    --font-H1-Size : 88px;
    --font-H1-LineHeight : 96px;
    --font-H1-name : "Anton";

    --font-H2-Size : 60px;
    --font-H2-LineHeight : 124px;
    --font-H2-name : "Amarillo";

    --font-H3-Size : 44px;
    --font-H3-LineHeight : 76px;
    --font-H3-name : "Amarillo";

    --font-H4-Size : 44px;
    --font-H4-LineHeight : 62px;
    --font-H4-name : "Anton";

    --font-Body-2-Size : 30px;
    --font-Body-2-LineHeight : 58px;
    --font-Body-2-name : "Satoshi Variable";

    --font-Body-1-Size : 24px;
    --font-Body-1-LineHeight : 48px;
    --font-Body-1-name : "Satoshi Variable";

    --font-Body-h4-Size: 20px;
    --font-Body-h4-LineHeight: 36px;
    --font-Body-h4-name: "Satoshi Variable";

    --font-bouton-Size : 24px;
    --font-bouton-LineHeight : 24px;
    --font-bouton-name : "Satoshi Variable";


    --spaces-inicio-bloc-illustration-height : 800px;
    --spaces-inicio-bloc-illustration-illustration-width : 600px;
    --spaces-inicio-bloc-illustration-text-width : 550px;
    --spaces-inicio-bloc-illustration-Gap : 104px;
    --spaces-inicio-bloc-illustration-padding-horizontal : 0;
    --spaces-inicio-bloc-illustration-padding-vertical-down : 0;
    --spaces-inicio-bloc-illustration-Gap-vertical-text : 80px;

    --spaces-inicio-bloc-H2-Padding-vertical: 132px;
    --spaces-inicio-bloc-H2-Padding-horizontal : 0;
    --spaces-inicio-bloc-H2-text-width : 860px;
    --spaces-inicio-bloc-H2-Gap-vertical-text : 112px;

    --spaces-inicio-bloc-H1-Padding-vertical: 72px;
    --spaces-inicio-bloc-H1-Padding-horizontal : 0;
    --spaces-inicio-bloc-H1-Gap-vertical : 80px;

    --spaces-secondary-bloc-demi-photo-height :750px;
    --spaces-secondary-bloc-demi-photo-padding-down :0;
    --spaces-secondary-bloc-demi-photo-GAP:0;
    --spaces-secondary-bloc-demi-photo-text-width:580px;
    --spaces-secondary-bloc-demi-photo-Text-padding-horizontal : 0;
    --spaces-secondary-bloc-demi-photo-Text-padding-vertical : 0;

    --spaces-secondary-bloc-h4-Padding-vertical: 140px;
    --spaces-secondary-bloc-h4-bloc-illus-width : 1300px;
    --spaces-secondary-bloc-h4-width-illustration-et-txt : 360px;
    --spaces-secondary-bloc-h4-GAP-illustration-et-txt : 64px;
    --spaces-secondary-bloc-h4-illustration-height : 200px;

    --picture-picture-full-height: 840px;

    --picture-picture-half-height: 420px;

}

@media(max-width:1600px){
    :root{
        --font-H1-Size : 72px;
        --font-H1-LineHeight : 80px;
        --font-H1-name : "Anton";
    
        --font-H2-Size : 52px;
        --font-H2-LineHeight : 104px;
        --font-H2-name : "Amarillo";
    
        --font-H3-Size : 40px;
        --font-H3-LineHeight : 72px;
        --font-H3-name : "Amarillo";
    
        --font-H4-Size : 40px;
        --font-H4-LineHeight : 56px;
        --font-H4-name : "Anton";
    
        --font-Body-2-Size : 28px;
        --font-Body-2-LineHeight : 52px;
        --font-Body-2-name : "Satoshi Variable";
    
        --font-Body-1-Size : 20px;
        --font-Body-1-LineHeight : 44px;
        --font-Body-1-name : "Satoshi Variable";
    
        --font-Body-h4-Size: 20px;
        --font-Body-h4-LineHeight: 36px;
        --font-Body-h4-name: "Satoshi Variable";
    
        --font-bouton-Size : 20px;
        --font-bouton-LineHeight : 20px;
        --font-bouton-name : "Satoshi Variable";
    
    
        --spaces-inicio-bloc-illustration-height : 630px;
        --spaces-inicio-bloc-illustration-illustration-width : 520px;
        --spaces-inicio-bloc-illustration-text-width : 480px;
        --spaces-inicio-bloc-illustration-Gap : 60px;
        --spaces-inicio-bloc-illustration-padding-horizontal : 0;
        --spaces-inicio-bloc-illustration-padding-vertical-down : 0;
        --spaces-inicio-bloc-illustration-Gap-vertical-text : 52px;
    
        --spaces-inicio-bloc-H2-Padding-vertical: 104px;
        --spaces-inicio-bloc-H2-Padding-horizontal : 0;
        --spaces-inicio-bloc-H2-text-width : 800px;
        --spaces-inicio-bloc-H2-Gap-vertical-text : 80px;
    
        --spaces-inicio-bloc-H1-Padding-vertical: 56px;
        --spaces-inicio-bloc-H1-Padding-horizontal : 0;
        --spaces-inicio-bloc-H1-Gap-vertical: 72px;
    
        --spaces-secondary-bloc-demi-photo-height :650px;
        --spaces-secondary-bloc-demi-photo-padding-down :0;
        --spaces-secondary-bloc-demi-photo-GAP:0;
        --spaces-secondary-bloc-demi-photo-text-width:450px;
        --spaces-secondary-bloc-demi-photo-Text-padding-horizontal : 0;
        --spaces-secondary-bloc-demi-photo-Text-padding-vertical : 0;
    
        --spaces-secondary-bloc-h4-Padding-vertical: 124px;
        --spaces-secondary-bloc-h4-bloc-illus-width : 950px;
        --spaces-secondary-bloc-h4-width-illustration-et-txt : 292px;
        --spaces-secondary-bloc-h4-GAP-illustration-et-txt : 48px;
        --spaces-secondary-bloc-h4-illustration-height : 180px;
    
        --picture-picture-full-height: 700px;
    
        --picture-picture-half-height: 350px;
    
    }
}

@media(max-width:1250px){
    :root{
        --font-H1-Size : 56px;
        --font-H1-LineHeight : 72px;
        --font-H1-name : "Anton";
    
        --font-H2-Size : 40px;
        --font-H2-LineHeight : 80px;
        --font-H2-name : "Amarillo";
    
        --font-H3-Size : 32px;
        --font-H3-LineHeight : 52px;
        --font-H3-name : "Amarillo";
    
        --font-H4-Size : 32px;
        --font-H4-LineHeight : 44px;
        --font-H4-name : "Anton";
    
        --font-Body-2-Size : 20px;
        --font-Body-2-LineHeight : 40px;
        --font-Body-2-name : "Satoshi Variable";
    
        --font-Body-1-Size : 16px;
        --font-Body-1-LineHeight : 32px;
        --font-Body-1-name : "Satoshi Variable";
    
        --font-Body-h4-Size: 18px;
        --font-Body-h4-LineHeight: 32px;
        --font-Body-h4-name: "Satoshi Variable";
    
        --font-bouton-Size : 16px;
        --font-bouton-LineHeight : 16px;
        --font-bouton-name : "Satoshi Variable";
    
    
        --spaces-inicio-bloc-illustration-height : 600px;
        --spaces-inicio-bloc-illustration-illustration-width : 400px;
        --spaces-inicio-bloc-illustration-text-width : 380px;
        --spaces-inicio-bloc-illustration-Gap : 44px;
        --spaces-inicio-bloc-illustration-padding-horizontal : 50px;
        --spaces-inicio-bloc-illustration-padding-vertical-down : 100px;
        --spaces-inicio-bloc-illustration-Gap-vertical-text : 56px;
    
        --spaces-inicio-bloc-H2-Padding-vertical: 80px;
        --spaces-inicio-bloc-H2-Padding-horizontal : 50px;
        --spaces-inicio-bloc-H2-text-width : 480px;
        --spaces-inicio-bloc-H2-Gap-vertical-text : 56px;
    
        --spaces-inicio-bloc-H1-Padding-vertical: 48px;
        --spaces-inicio-bloc-H1-Padding-horizontal : 50px;
        --spaces-inicio-bloc-H1-Gap-vertical : 56px;
    
        --spaces-secondary-bloc-demi-photo-height :500px;
        --spaces-secondary-bloc-demi-photo-padding-down :0;
        --spaces-secondary-bloc-demi-photo-GAP:0;
        --spaces-secondary-bloc-demi-photo-text-width:480px;
        --spaces-secondary-bloc-demi-photo-Text-padding-horizontal : 50px;
        --spaces-secondary-bloc-demi-photo-Text-padding-vertical : 104px;
    
        --spaces-secondary-bloc-h4-Padding-vertical: 80px;
        --spaces-secondary-bloc-h4-bloc-illus-width : 700px;
        --spaces-secondary-bloc-h4-width-illustration-et-txt : 240px;
        --spaces-secondary-bloc-h4-GAP-illustration-et-txt : 36px;
        --spaces-secondary-bloc-h4-illustration-height : 150px;
    
        --picture-picture-full-height: 600px;
    
        --picture-picture-half-height: 280px;
    
    }
}

@media(max-width:550px){
    :root{
        --font-H1-Size : 32px;
        --font-H1-LineHeight : 32px;
        --font-H1-name : "Anton";
    
        --font-H2-Size : 24px;
        --font-H2-LineHeight : 52px;
        --font-H2-name : "Amarillo";
    
        --font-H3-Size : 28px;
        --font-H3-LineHeight : 45px;
        --font-H3-name : "Amarillo";
    
        --font-H4-Size : 20px;
        --font-H4-LineHeight : 24px;
        --font-H4-name : "Anton";
    
        --font-Body-2-Size : 18px;
        --font-Body-2-LineHeight : 36px;
        --font-Body-2-name : "Satoshi Variable";
    
        --font-Body-1-Size : 16px;
        --font-Body-1-LineHeight : 32px;
        --font-Body-1-name : "Satoshi Variable";
    
        --font-Body-h4-Size: 12px;
        --font-Body-h4-LineHeight: 28px;
        --font-Body-h4-name: "Satoshi Variable";
    
        --font-bouton-Size : 12px;
        --font-bouton-LineHeight : 12px;
        --font-bouton-name : "Satoshi Variable";
    
    
        --spaces-inicio-bloc-illustration-height : 600px;
        --spaces-inicio-bloc-illustration-illustration-width : 300px;
        --spaces-inicio-bloc-illustration-text-width : 300px;
        --spaces-inicio-bloc-illustration-Gap : 32px;
        --spaces-inicio-bloc-illustration-padding-horizontal : 40px;
        --spaces-inicio-bloc-illustration-padding-vertical-down : 64px;
        --spaces-inicio-bloc-illustration-Gap-vertical-text : 40px;
    
        --spaces-inicio-bloc-H2-Padding-vertical: 44px;
        --spaces-inicio-bloc-H2-Padding-horizontal : 50px;
        --spaces-inicio-bloc-H2-text-width : 320px;
        --spaces-inicio-bloc-H2-Gap-vertical-text : 40px;
    
        --spaces-inicio-bloc-H1-Padding-vertical: 24px;
        --spaces-inicio-bloc-H1-Padding-horizontal : 40px;
        --spaces-inicio-bloc-H1-Gap-vertical : 40px;
    
        --spaces-secondary-bloc-demi-photo-height :700px;
        --spaces-secondary-bloc-demi-photo-padding-down :64px;
        --spaces-secondary-bloc-demi-photo-GAP:64px;
        --spaces-secondary-bloc-demi-photo-text-width:300px;
        --spaces-secondary-bloc-demi-photo-Text-padding-horizontal : 50px;
        --spaces-secondary-bloc-demi-photo-Text-padding-vertical : 50px;
    
        --spaces-secondary-bloc-h4-Padding-vertical: 56px;
        --spaces-secondary-bloc-h4-bloc-illus-width : 300px;
        --spaces-secondary-bloc-h4-width-illustration-et-txt : 220px;
        --spaces-secondary-bloc-h4-GAP-illustration-et-txt : 24px;
        --spaces-secondary-bloc-h4-illustration-height : 64px;
    
        --picture-picture-full-height: 550px;
    
        --picture-picture-half-height: 200px;
    
    }
}



@font-face{
	font-family: "Satoshi Variable";
	src: url('./font/Satoshi-Variable.ttf') format('truetype')
}

@font-face{
	font-family: "Anton";
	src: url('./font/anton.ttf') format('truetype')
}

@font-face{
	font-family: "Amarillo";
	src: url('./font/Amarillo.ttf') format('truetype')
}