/*
 * Base structure
 */

html, body {  height: 100%; margin: 0; padding: 0; }

body {  font-family: 'Roboto', sans-serif; }
img { max-width: 100%; height:auto; }
p, ul li { color: #000; font-size: 16px; }
p {  line-height: 1.6; }
ul li { line-height: 1.3; padding: 3px 0;}
a { color: #000; font-size: 20px; text-decoration:none; font-weight:400; text-underline-offset: 3px; }
a:hover {text-decoration: underline;}

main {  display: flex;  width: 100%;  justify-content: center;}

main .content { text-align: center; padding: 40px 20px 30px 20px;}
main .content .logo { max-width: 250px; width: 100%; margin-bottom: 20px;}
main .content .texte { display: block; max-width: 980px; text-align: left; margin: 40px auto 0 auto; }
main .content .galerie {  display: block; max-width: 1100px;  margin: 30px -10px 0 -10px; }
main .content .galerie::after { content: ""; clear: both; display: block;  }
main .content .galerie .image { float:left; width: 33.333%; box-sizing: border-box; padding: 10px; }

@media (max-width: 575px) {
    
    a { font-size: 16px; }
    p, ul li { font-size: 14px; }
    main .content .texte { margin: 30px auto 0 auto; }
    main .content .galerie .image { width: 100%; }

}