body{
    background-color: #F5F5F5;
}

*{
@font-face {
    font-family: "Luciole-Bold";
    src: url(../font/Luciole-Bold.ttf);
  }
  @font-face {
    font-family: "Luciole-Regular";
    src: url(../font/Luciole-Regular.ttf);
  }
}




.wrapper1{
    display: grid;
    grid-template-columns: 1fr 3fr 0fr 3fr 1fr;
    margin-left: 1vw;
    margin-top: 8rem;
}

.firstbloc{
    font-size: 55px;
    color: #fb8500;
    font-family: 'Luciole-Bold';
    margin-left: 2vw;
    margin-top: 60px;

}

.firstbloc p{
    font-size: 22px;
    font-family:'Luciole-Regular';
    color: #222222;
    line-height: 32px;
    margin-top: 20px;
}

#container_firstimg{
    margin-top: 1vw;
    
}

#firstimg{
    width: 450px;
    margin-top: 2vw;
}

.wrapper2{
    display: grid;
    grid-template-columns: 1fr 320px 1fr;
    margin-top: 5vw;
    margin-right: 4vw;

}

.card1{
background-color: white;
box-shadow: 2px 2px 2px 2px #222222;
border-radius: 10px;
height: 550px;
margin-bottom: 200px;

}

.card1 h2{
font-family: 'Luciole-Bold';
color: #fb8500;
text-align: center;
font-size: 25px;
padding-bottom: 2vw;
margin-top: 25px;

}

.card2{
background-color: white;
box-shadow: 2px 2px 2px 2px #222222;
border-radius: 10px;
height: 550px;
margin-bottom: 200px;    

}

.card2 h2{
font-family: 'Luciole-Bold';
color: #fb8500;
text-align: center;
font-size: 25px;
padding-bottom: 2vw;
margin-top: 25px;

}

.card1 img{
width: 280px;
margin-left: 35px;
margin-top: 40px;

}



.card2 img{
width: 230px;
margin-left: 60px;
margin-top: 20px;
    
}


.card1 button{
background-color: #023047;
font-family: 'Luciole-Bold';
border-radius: 5px;
color: white;
padding-left: 30px;
padding-right: 30px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 50px;
margin-top: 10px;
font-size: 20px;

}

.card2 button{
background-color: #023047;
font-family: 'Luciole-Bold';
border-radius: 5px;
color: white;
padding-left: 30px;
padding-right: 30px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 50px; 
margin-top: 35px;
font-size: 20px;
   
}

.card1 button:hover{
    box-shadow: 1px 7px #FB8500;
    cursor: pointer;
}

.card2 button:hover{
    box-shadow: 1px 7px #FB8500;
    cursor: pointer;    
}

.retourHaut{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

@media screen and (max-width:800px) {
    .wrapper1{
        grid-template-columns: repeat(1, 4fr);
        padding: 20px;

    }
    .wrapper2{
        grid-template-columns: repeat(1, 4fr);
        width: 20px;
        margin-left: 80px;

    }
}











/*# sourceMappingURL=preconisations.css.map *//*# sourceMappingURL=preconisations.css.map */