:root { --blue: #0080C0; --light-blue: #DEF3FD; --orange: #C16400; --grey: #f4f4f4; --font-color: #1e1e1e; }

html { font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; color: var(--font-color); }

body { margin: 0; }

h2 { font-size: 1.5rem; margin: 1rem 0rem; }

h2 a { text-decoration: none; }

h3 { font-size: 1.7rem; }

h4 { font-size: 1.2rem; }

img { width: 100%; height: auto; display: block; }

a { color: var(--font-color); }

address { font-style: normal; }

.contact .contact-infos { font-size: 1.5rem; font-weight: bold; }

.contact .contact-infos:first-child { margin-bottom: 4rem; }

.container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; }

.container.justify-end { justify-content: flex-end; }

.cell { flex: 0 0 auto; width: 100%; }

.cell > * { padding: 0 1rem; }

.grid { display: flex; flex-wrap: wrap; }

.cell.full { width: 100%; }

.cell.half { width: 50%; flex: 1; }

@media only screen and (max-width: 640px) { .cell.half { width: 100%; } }

footer { background-color: var(--blue); padding: 1rem 0rem; }

nav { background-color: var(--orange); }

nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0 1rem; font-size: 18px; font-weight: bold; }

nav ul li { cursor: pointer; }

nav ul li a, nav ul li span { padding: 0.5rem 0.5rem; color: white; display: block; text-decoration: none; }

nav ul li.active a { color: var(--font-color); }

nav ul li:hover a { color: var(--font-color); }

.title { position: absolute; text-align: center; width: 100%; color: white; font-size: 69px; top: 18%; font-weight: 900; }

.small { display: block; font-size: 37px; font-style: italic; }

footer ul { display: flex; justify-content: flex-end; list-style: none; margin: 0; padding: 0; }

footer ul li { padding-left: 1rem; }

footer, footer a, nav { text-decoration: none; color: white; }

nav ul li { display: inline-block; }

.motivation { text-align: center; padding: 0 4rem; }

.motivation.left { text-align: left; }

.text-center { text-align: center; }

.motivation p { font-size: 1.3rem; }

.main-image { position: relative; }

.main-image::before { content: ''; display: block; background-color: black; opacity: 0; position: absolute; width: 100%; height: 100%; }

.services { list-style: disc; }

.services li { margin-bottom: 1rem; font-weight: bold; }

.services i { font-size: 2rem; vertical-align: middle; width: 50px; color: var(--orange); }

.margin-large { margin-top: 7rem; margin-bottom: 7rem; }

.background-grey { background: var(--grey); }

.copyright { margin: 1rem 0; }

.cards { max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }

.card { width: 35%; margin-top: 1rem; margin-right: 1rem; word-wrap: break-word; border: 1px solid; padding: 1rem 2rem; border-radius: 5px; background-color: var(--grey); box-shadow: 1px 2px 3px black; text-align: center; min-height: 200px; display: flex; flex-direction: column; justify-content: center; }

.card.clickable { cursor: pointer; }

.text-center { text-align: center; }

main .certification { display: flex; justify-content: center; flex-wrap: wrap; }

main .certification img { width: 200px; height: 100%; margin: 5rem 1rem 0rem 1rem; }

footer .certification { display: flex; }

footer .certification img { width: 80px; height: 100%; margin: 1rem; }

.images { display: flex; flex-wrap: wrap; justify-content: center; }

.images li { display: inline-block; height: 33%; margin: 0.25rem; }

.images li img { height: 30px; }

@media only screen and (min-width: 641px) and (max-width: 1024px) { .title { font-size: 44px; line-height: 1.4; } .small { font-size: 30px; } }

@media only screen and (max-width: 640px) { h3 { font-size: 1.5rem; } nav ul { font-size: 13px; margin-right: 1rem; } .title { font-size: 25px; line-height: 1.7; top: 10%; } .small { font-size: 16px; } html { font-size: 12px; } .cards .card { width: 100%; min-height: auto; } }

.pswp .pswp__bg { background: white !important; }

.pswp .pswp__top-bar { background-color: black !important; }