@import url('https://fonts.googleapis.com/css?family=Biryani|Oswald');
@keyframes blinker { 0% {  transform: scale(1); } 50% { transform: scale(1.2);} 100% { transform: scale(1);} }
@keyframes blinkerPath { 0% {  opacity: 1;} 50% { opacity: 0.5;} 100% { opacity: 1;}}
body { overflow-x : hidden; font-size:0; }
ol,ul {display:inline; list-style-type:none; margin:0; padding:0;}
a,summary { outline: none; text-decoration: none; color:black; cursor: pointer;}
p,li { font-family: 'Biryani', sans-serif;}
h1,h2,h3,h4,h5,h6,a { font-family: 'Oswald', sans-serif;  margin:0; padding:0; line-height:1;}

header {position: relative; margin-top:2rem;  }
header h1 {  overflow:visible; height: 10rem; margin-bottom:0.5rem; text-transform:uppercase; color: #000000;}
header h1 span { display: inline-block;  position: absolute; }
header h1 span.titre { left:4%; top: 5rem; font-size:2.5rem; width:40%; text-align: right; }
header h1 span.motcle { left:45%; top:-1rem; font-size:5.6rem;  font-weight: bolder;  width:55%;}
header h2, header h3 { position: relative; font-size:1.2rem; left:10%; width: 85%; padding:0.5rem 0 0 0; text-align: center; }
header h2 { font-weight: bold; }
header h3  { font-weight: normal; padding-bottom:2rem;}

aside { position: absolute; top:0; left:85%;  width:15%; height:0; padding-bottom:85%; vertical-align: top;  }
ul#vignettes { display: block; width:100%; }
ul#vignettes li { position: relative; display: block; width:75%; margin: 0 auto; padding-bottom:15%;}
ul#vignettes img { display: block; position: relative; border-radius:100%; width:50%; border: 0.5vw solid black; cursor: pointer; transition: all 0.5s ease-out; margin:auto; padding:5px; }
ul#vignettes li.active img { transition: all 0.5s ease-out; z-index:3;animation: blinker 2s linear infinite; transform: scale(1.2);}
div#legende {  position: absolute; display:block; width:100%; bottom:0; text-align: center; transition: opacity 0.3s ease-out; }
div#legende h6 { font-size:1.2rem; font-weight: bold; text-transform: uppercase; width:100%;} 
div#legende.inactive { opacity: 0; transition: opacity 0.1s ease-out;}
div#legende svg {  width:100%; } 
div#legende rect { stroke: #000000; stroke-width:0.5px;}

div#outerContainer { margin:2vw auto 0; position: relative; background-color: white; padding: 1%;  z-index:1; clear: both; max-width:820px; }
div#mainContainer { position: relative; }
div#svgContainer {display: block; position: relative; padding:0 0 78%; width:85%; height:0; }
svg#carte { display: block; position: relative; padding:1vw 0 -70%; width:100%;  position: relative;  z-index:1; overflow: hidden; }
svg#carte path { cursor:pointer; fill: #cccccc; stroke:#ffffff;stroke-width: 0;}
g#departements path:hover, g#departements path.active { animation: blinkerPath 3s ease-out infinite;}
svg#carte  path[id^="r"] { pointer-events: none; stroke:#ffffff; stroke-width: 1px; fill:transparent;}
svg#carte text.info { stroke:#000000; font-size:1rem;}
rect#fond { fill: transparent;}
rect#fond.active { cursor: zoom-out;}
g#departements path { stroke-width: 0.5px;}
g#regions path { stroke-width: 100; filter:url(#ombre); stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: dash 1s linear forwards;}
@keyframes dash {  to { stroke-dashoffset: 0; } }
div#loupe {position: absolute; cursor: pointer; top:10px; left:10px; z-index:99; background-image: url("../img/magnifier.png"); background-repeat: no-repeat; background-size:100%; width:5%; background-position: top left; padding-bottom:5%;  opacity:0;} 

div#infoBox {width:100%; position: relative; margin-top: 4rem; padding: 1rem 0; border-top: thin solid rgba(0,0,0,0.3);border-bottom: thin solid rgba(0,0,0,0.3);transition: opacity 0.3s ease-out;}
div#infoBox.inactive {opacity: 0; transition: opacity 0.1s ease-out;} 
div#localisation { width:75%; }
div#localisation h6 { font-size:1.2rem; color:#888888; font-weight: bolder; text-transform: uppercase;}
div#localisation h5 { font-size:3rem;}
div#chiffre { display: block; padding: 0 0 0 20%;   width:10rem; position: absolute;  top: -2rem; right:0rem; text-align: center;} 
div#chiffre p#rac { font-family: 'Oswald', sans-serif; font-size:3rem; color: white; padding:0.5rem 0;}
p#classement { font-size:1rem; margin-top: -0.2rem;}

div#footer {  margin-top: 5rem;  position: relative; }
div#footer img { width:5rem; }
div#footer a { font-family: 'Biryani', sans-serif; }
div#footer>a { float: left; }
div#footer p {  font-size:1rem; text-align: right; padding:0; line-height:1rem;}

@media (max-width:830px){
	header h1 { height: 6rem; margin-bottom:0; }
	header h1 span.titre{  top: 2.9rem; font-size:1.5rem; }
	header h1 span.motcle {  top: -0.7rem; font-size:3.4rem; }
	header h2, header h3 { font-size: 1rem; }
	div#legende h6 { font-size:0.8rem;}
	div#infoBox h6 { font-size:1rem; }
	div#infoBox h5 { font-size:2rem;}
	div#chiffre { top: -1rem; } 
	div#chiffre p#rac { font-size:2rem; }
	div#footer p { font-size:0.8rem;}
}


@media (min-width:1200px){
	ul#vignettes img {border-width: thick;}
}