body {
    -webkit-font-smoothing: antialiased;
}
button:focus {
    outline:none;
}

@font-face {
    font-family: 'frutiger_cnregular';
    src: url('../fonts/frutigercn-webfont.woff2') format('woff2'),
         url('../fonts/frutigercn-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.calque {
    top:0;
    left:0;
    position:absolute;
    width:100%;
    transition: opacity 0.2s ease-in-out;
}
.cent100 {
    opacity:1;
}
.vingt100 {
    opacity:0.2;
}
.quarante100 {
    opacity:0.4;
}
.soixante100 {
    opacity:0.6;
}
h1 {
    font-size: 2.4vw;
    line-height:2.6vw;
    font-family: frutiger_cnregular;
    margin: 2vw 2.8vw;
}
h2 {
    font-size: 1.8vw;
    line-height:2vw;
    font-family: frutiger_cnregular;
    margin: 2vw 2.8vw;
    text-transform:uppercase;
}

#chapeau {
    position:absolute;
    top:39.5vw;
    left:71vw;
    background-color:#C4B09B;
    color:#fff;
    width:24vw;
    box-shadow: 3px 3px 10px #aaa;
    font-size: 1vw;
}
#chapeau .entete {
    background-color:#958478;
    padding:0.2vw;
    text-align:center;
    font-size: 1.3vw;
    font-family: frutiger_cnregular;
    text-transform: uppercase;
}
#chapeau div {
    padding: 0.5vw;
}
.legendes {
    background-color:#fff;
    width:13.5vw;
    border: 1px solid #ccc;
    padding: 1vw 1.5vw 1.6vw 1vw;
    position:absolute;
    top:8vw;
    left:2.8vw;
    box-shadow: 1px 1px 5px #ccc;
}
.legendes ul {
    list-style-type: none;
    padding:0;
    margin:0;
}
#legende > ul > li {
    cursor:pointer;
}
#legende > ul > li:hover {
    opacity:0.8;
}
.survol { 
    /*border:1px solid blue;*/
    position:absolute;
}
#survol1 {top:8vw; left:17vw;width:35vw;height:24.5vw;}
#survol2 {top:18vw; left:2.8vw;width:14.2vw;height:40vw;}
#survol3 {top:32.5vw; left:17vw;width:41vw;height:22vw;}
#survol4 {top:38vw; left:58vw;width:13vw;height:18vw;}
#survol5 {top:28vw; left:75vw;width:22vw;height:10vw;}
#survol6 {top:3vw; left:48vw;width:18vw;height:5vw;}
#survol7 {top:2.75vw; left:69.8vw;width:15.2vw;height:4.8vw;}

.pointeur {
    cursor:pointer;
}

.boutons { display:none; }
.bouton { 
    /*border:1px solid red;*/
    position:absolute;
    cursor:pointer;
}
#btGeothermie {top:24vw; left:2.2vw;width:9.7vw;height:2vw;}
#btEoliennes {top:11.2vw; left:19.6vw;width:14vw;height:2vw;}
#btPhotovoltaiques {top:8.1vw; left:36.1vw;width:13.6vw;height:3.4vw;}
#btBepos {top:2.75vw; left:54.2vw;width:11.9vw;height:2vw;}
#btParking {top:45.48vw; left:20.8vw;width:15.4vw;height:2vw;}
#btPartage {top:43.35vw; left:47.65vw;width:11vw;height:2vw;}
#btEau {top:52.1vw; left:58.7vw;width:5.4vw;height:2vw;}
#btJardin {top:28.7vw; left:84.1vw;width:14.1vw;height:2vw;}
#btBatiNeuf {top:2.75vw; left:69.8vw;width:15.2vw;height:4.8vw;}

.popover{
    border-radius: 2px;
    padding:0 0 6px;    
    max-width: 25vw;
}
#bt_energie .popover-content {
    border-top: 6px solid #FF0000
}
#bt_eau .popover-content, #btSanitaires + .popover > .popover-content  {
    border-top: 6px solid #009EE2
}
#bt_transport .popover-content {
    border-top: 6px solid #35A949
}
#btCloisons + .popover > .popover-content, #btAccessibilite + .popover > .popover-content  {
    border-top: 6px solid #F49B00
}
#btCollecte + .popover > .popover-content  {
    border-top: 6px solid #847E72
}
#btVMC + .popover > .popover-content, #btToiture + .popover > .popover-content, #btITE + .popover > .popover-content  {
    border-top: 6px solid #E1D8CF
}
#btCollecte + .popover  {
    margin-right:2vw;
}

/* specifique Batiment.html */
.fancybox-slide--iframe .fancybox-content {
	width  : 80%;
	height : 80%;
	/*max-width  : 80%;
	max-height : 80%;*/
	margin: 0;
}

.fancybox-slide>*  { padding:0; margin:0; }

#batiment_fond { width:90vw; top:0; left:0; }

#btVMC {top:12.9vw; left:68.8vw;width:14.5vw;height:5vw; }
#btToiture {top:24.5vw; left:68.8vw;width:21vw;height:5vw;}
#btCloisons {top:39vw; left:68.8vw;width:11.04vw;height:2.8vw;}
#btSanitaires {top:52vw; left:68.8vw;width:12.14vw;height:5vw;}
#btAccessibilite {top:59.8vw; left:68.8vw;width:13.25vw;height:3vw;}
#btCollecte {top:64vw; left:66.5vw;width:13.52vw;height:6.8vw;}
#btITE {top:26.8vw; left:22.5vw;width:10vw;height:2.8vw;}

#batiment_page h2 {
    position:absolute; left:0; top:0;
    font-size: 2.9vw;
    line-height:3.17vw;
    margin: 2.76vw 3.86vw;
    text-transform:uppercase;
}

#legende_bn {width:19.3vw; top:11vw; }