body { background:#e7eaed; color:#333 }
body, ul, ol, li, p { padding:0; margin:0; border:0 }
body, h1, h2, h3 { font-family:'Titillium Web', 'Helvetica Neue', Helvetica, Arial, sans-serif }

ul, ol { list-style:none }
li { list-style-type:none }
img { border:0; vertical-align:middle }

a.link:link, a.link:visited, a.link:active { color:#476096; text-decoration:none; font-weight:600 }
a.link:hover { text-decoration:underline }

header { display:flex; justify-content:center; align-items:center; padding:1rem }
header > * { margin:0 }
header a { line-height:0 }
header h1 { color:#476096; margin-left:10px; margin-bottom:2px }

svg#naxe { width:150px; height:60px; display:inline-block }
#naxe path { fill:#476096 }
#naxe:hover { cursor:pointer }

main { background:#fff; width:60%; max-width:700px; margin:1rem auto; padding:2rem 1rem; display:flex; flex-direction:column; border:2px solid #476096; border-radius:.5rem; box-shadow:.3rem .3rem 1rem rgba(120, 120, 120, 0.3) }
main p { margin-bottom:1rem }

.row { display:flex; flex-direction:row }
.col { display:flex; flex-direction:column; margin:0 1rem }
form { margin-top:5px }

.agid { background:url('../img/spid-agid-logo.png') center no-repeat; background-size:contain; height:50px; margin-top:1rem }
footer { width:90%; margin:2rem auto 0; padding:1rem 0; text-align:center; }
footer br { display:none }

.center { text-align:center }

@media all and (max-width:767px) {
  main { width:80%; padding:1rem; margin:.5rem auto }
  main .col a { text-align:center }
  header { flex-direction:column; padding:.5rem 0 0 }
  h1 { font-size:1.5rem }
  h1 span { display:none }
  .row { flex-direction:column }
  form { text-align:center; margin:1.5rem 0 1rem }
  footer { font-size:.8rem; margin-top:.5rem }
}