:root {
    --main-color: #E80000;
    --light-grey: #F5F5F5;
}
html,body{margin: 0;padding: 0;}
body{width: 100%;font-family: 'Hind',Arial, sans-serif;font-size:1em;background-color: var(--light-grey);}
header{position: relative;margin-bottom:40px;}
header #slogan{
    position: absolute;
    width: 45%;
    padding: 0 5%;
    bottom: 10%;
    color: #fff;
    font-size: 1.5rem;}

.btn-red{
    width: 12rem;
    padding: 1.3rem 2rem;
    background: var(--main-color);
    font-weight: 800;
}
header #slogan h1{font-weight: 100;line-height: 3.8rem;text-shadow: 1px 1px 10px #000;}
header #slogan h1 span{text-transform: uppercase;font-weight: 900;}
header img{max-width: 100%;}
.container{width: 100%;}
.container .wrapper-blocks{
    width:70%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
    justify-content: center;
    margin: auto;}
.container .wrapper-blocks .blocks{
    width: 25%;
    padding:1.5rem 2% ;
    background-color: #ffffff;
    box-shadow:0 0 0.5em #CCCCCC;
}
.container .wrapper-blocks .blocks h2{text-transform: uppercase;color:var(--main-color);margin-bottom: 0;}
.container .wrapper-blocks .blocks h2 span{
    display: block;
    line-height: 15px;
    font-weight: 200;
    font-size:1.1rem;
    letter-spacing: 0.1px;
}
.container .wrapper-blocks .blocks hr{width: 15%;margin:10px 0;color: #CCCCCC;border: none;border-top: 1px solid #CCCCCC;}
.container .wrapper-blocks .blocks p{margin-top: 0;width: 80%;}
footer{background-color: var(--main-color);color: #fff;margin-top:40px;padding-top:30px;}
footer h2 {font-weight: 100;font-size: 1.8rem;margin-top:0;text-align: center;margin-bottom: 0;}
footer h2 span{font-weight: 700;}
footer h2 span.subtitle{display: block;font-size:1.2rem;font-weight: 400;font-style: italic;}
footer hr { 
    width: 2%;  
    border: none;
    border-top: 1px solid #333;
    color: #000;
    overflow: visible;
    text-align: center;
    margin-bottom: 40px;}
footer form{display: flex;width:70%;flex-wrap: wrap; margin:auto;}
footer form fieldset{
    width: 50%;
    padding: 0;
    margin: 0;
    border:none;
}
footer form fieldset input{ 
    display: block;
    width: 66%;
    line-height: 40px;
    margin: 0 auto 30px auto;
    text-transform: uppercase;
    padding: 0 2%;}
footer form fieldset .rgpd{display: block;margin-left: 15%;}
footer form fieldset .rgpd input[type=checkbox]{display: inline-block;width:auto;margin: 0 auto;}
footer form fieldset .rgpd label{padding-left:10px;}
footer form fieldset .rgpd label a{color: #fff;}
footer form fieldset img{max-width: 80%;}
footer form input[type=submit]{
    margin: 40px auto 0 auto;
    background-color:var(--main-color);
    border:2px solid #fff;
    align-self:flex-end;
}
footer form input[type=submit]:hover{background-color:#fff;color:var(--main-color) ;}
footer p {width: 70%;margin:auto; text-align: right;}
footer p a{text-decoration: none;color: #000;}

.btn{
    display: block;
    width: 16rem; 
    padding: 1.5rem 2rem;
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}


/** Responsive **/
@media (max-width: 1024px) { 
    .container .wrapper-blocks,header #slogan,footer form{width: 90%;}
}
@media (max-width: 768px) {
    header #slogan h1{font-size: 2.1rem;line-height: 2.1rem;}
    .btn-red{padding: 1rem 2rem;}
    .container .wrapper-blocks,footer form{width: 100%;}
    .container .wrapper-blocks{gap:30px 30px;}
    .container .wrapper-blocks .blocks{width: 40%;}
    footer hr{width: 6%;}
    footer form fieldset img{max-width: 100%;}
    footer form fieldset input {margin: 0 auto 20px auto;}
    footer form fieldset .rgpd label {font-size: .8rem;}
    .btn{padding: 1.2rem 1.5rem;}
    .container .wrapper-blocks .blocks p{width: 100%;}
}

@media (max-width: 425px) {
    .container .wrapper-blocks .blocks{width: 80%;padding: 1.5rem 5%;}
    footer h2{padding: 0 2%;}
    footer p a{display:block; padding:10% 0 5% 0;}
    footer hr{width: 15%;}
    footer form{width: 100%;}
    footer form fieldset{width: 100%;}
    footer form fieldset img{display: none;}
    footer form fieldset .rgpd label{font-size: .9rem;}
}
@media (max-width: 375px) {
    .btn{width: 12rem;font-size: 1rem;padding: 1rem 1.5rem;}
    .btn-red{width: 10rem;padding: 1em;}
}

@media (max-width: 320px) {
    .container .wrapper-blocks .blocks p{width: 100%;}
    footer form fieldset input{width: 80%;}
    footer form fieldset .rgpd label{font-size: .8rem;}
    footer form fieldset .rgpd{margin-left: 10%;}
}