/* http://dabblet.com/gist/5592972 scalable, reponsive image map + font-size so are em values for radius & shadow*/
html {
font-size:30px;
min-height:100%;
background:linear-gradient(0deg, transparent,gray);}
p , h1{text-align:center;
position:relative;text-shadow:1px 1px #999
}
.image_map  {
width:640px;height:480px;
margin:1em auto;
border : solid gray;
box-shadow:0 0 0.5em  white,0 0 0  2000px rgba(0,0,0,0.5);
transition:0.5s;
border-radius:1em;
overflow:hidden;
position:relative;
}

@media all and (max-width:700px) {
div.image_map {
width:480px;height:360px;overflow:hidden;
position:relative;border:solid red;
box-shadow:0 0 0.5em  white,0 0 0  2000px rgba(100,50,0,0.5);
transition:0.5s;}
html {transition:0.5s;
font-size:20px;}
.image_map img, map {
position:absolute;
transform:scale(0.75);transform-origin:0 0}
 }
 @media all and (max-width:500px) { 
div.image_map {
border:solid blue;
width:320px;height:240px;overflow:hidden;
position:relative;border:solid;
box-shadow:0 0 0.5em  white,0 0 0  2000px rgba(0,100,200,0.5);
transition:0.5s;}
html {transition:0.5s;
font-size:15px;}
.image_map img, map {
position:absolute;
transform:scale(0.5);transform-origin:0 0}
 }
 img {vertical-align:top;}
 h1,p {margin:0;}
 
 /* chrome */
 map, area {position:absolute;display:block;text-align:center}
 map {top:0;left:0;font-size:2em;}
 area:before {content:attr(title);color:white;text-shadow:0 0 1px #333;}
 area[title="Lien 1"] {top:0;left:0;width:298px;height:248px;background:rgba(0,0,0,0.5);line-height:248px;}
 area[title="lien 2"] {top:0;left:298px;width:342px;height:248px;background:rgba(0,0,0,0.5);line-height:248px;}
 area[title="lien 3"] {top:248px;left:0;width:338px;height:232px;background:rgba(0,0,0,0.5);line-height:232px;}
 area[title="lien 4"] {top:248px;left:338px;width:302px;height:232px;background:rgba(0,0,0,0.5);line-height:232px;}
 area:hover {background:none;}