html { font-family:Montserrat, sans-serif; font-weight:300; }

html { font-size:16px; }
@media (min-width:400px) { html { font-size:20px; } }
@media (min-width:800px) { html { font-size:24px; font-size:3vw; } }
@media (min-width:1200px) { html { font-size:36px; } }

* { box-sizing:border-box; }
html { position:relative; display:block; }

body { position:relative; display:block; width:100%; margin:0; padding:0; line-height:1.4; text-align:left; overflow-x:hidden; overflow-y:scroll; }

header, main, footer { position:relative; display:block; width:100%; margin:0; padding:0; overflow-x:hidden; }

h1, h2, h3, h4, h5, h6 { position:relative; margin:0; padding:0; font-size:1em; font-weight:300; color:inherit; }

div { position:relative; margin:0; padding:0; }

a, a:link, a:active, a:visited, a:focus { font-size:inherit; color:inherit; text-decoration:inherit; outline-color:transparent; }

img { margin:0; padding:0; border:0; }
svg { position:relative; display:inline-block; vertical-align:top; height:100%; width:100%; margin:0; padding:0; }

p { font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:1em 0 0 0; }
p:first-of-type, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { padding-top:0; }
span { position:relative; display:inline; font-size:inherit; margin:0; padding:0; }

ul { position:relative; margin:0; padding:0; }
li { position:relative; font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:0; }

section { width:90%; min-width:300px;  max-width:800px; margin:0 auto; padding:0; diplay:block; position:relative; }

h1 { width:70%; max-width:500px; margin:2em auto 2em auto; }
 
ul { position:relative; display:block; list-style-type:none; margin:0 auto; padding:0; font-size:1rem; }
ul li { font-size:1em; position:relative; display:block; margin:0.8em 0; padding:0; color:#fff; }
ul li a { font-size:1.3em; font-weight:300; text-decoration:none; position:relative; display:block; text-align:center; background-color:#4884B3; border-radius:0.25em; margin:0; padding:0.5em 2.9em 0.5em 0.5em; }
ul li a:hover { text-decoration:none; }
ul li a:after { content:''; display:inline-block; position:absolute; margin:0 0 0 1em; padding:0; background-repeat:no-repeat; background-size:contain; background-position:50% 50%; width:1.4em; height:1.4em; top:50%; transform:translateY(-50%); background-image:url('./sociaux/globe.svg'); }
ul li.instagram a:after { background-image:url('./sociaux/instagram.svg'); }
ul li.linkedin a:after { background-image:url('./sociaux/linkedin-in.svg'); }
ul li.vimeo a:after { background-image:url('./sociaux/vimeo-v.svg'); }