html{
  background: url(tabkle.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
background-size: cover; 
                background-size: 100% 100%;
}


.carte{
      width:27em; /* you can use % */
    height: auto;
    position: absolute;
    top: 20%;
    left: 35%;
    transform: rotate(10deg);
    z-index: 50;
}
.journal{
  width: 25em;
  height: auto;
  position: absolute;
  top: 20%;
  left: 35%;
  transform: rotate(-15deg);
  z-index: 55;
}

.musee{
  width: 15em;
  height: auto;
  position: absolute;
  top: 20%;
  left: 35%;
  transform: rotate(-7deg);
  z-index: 45;
}

.tourmont{
  width: 17em;
  height: auto;
  position: absolute;
  top: 20%;
  left: 35%;
  z-index: 40;
  transform: rotate(1deg);
}

.champ_elysee{
  width: 10em;
  height: auto;
  position: absolute;
  top: 20%;
  left: 35%;
  z-index: 20;
  transform: rotate(30deg);
}

.bain_fix{
  width: 25em;
  height:auto;
  position: absolute;
  top: 10%;
  left: 65%;
}

#bain_fix_non_dev{
  visibility: hidden;
}

#bain_fix_dev{
  visibility: hidden;
  opacity: 0;
}

.dvlp{
  width: 17em;
  height: auto;
  position: absolute;
  top: 10%;
  left: 65%;
  visibility: hidden;
}


.grow { transition: all .2s ease-in-out; cursor: pointer}
.grow:hover { transform: scale(1.1); z-index: 88}

.non_dvlp{
  width: 17em;
  height: auto;
  position: absolute;
  top: 20%;
  left: 35%;
  cursor: grab;
  z-index: 1;
}

.selectable:hover {
  	transition: 0.6s;
	transform-style: preserve-3d;
transition-timing-function: ease-in;
  transform: scale(2,2) translate(50%, 50%);
  
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.5);
    overflow-x: hidden;
    /*transition: 0.5s;*/
}

/* entire container, keeps perspective */
.flip-container {
  position:absolute;
	perspective: 1000px;
	        left:0; right:0;
        top:0; bottom:0;
        margin:auto;
  z-index:101;
        /*this to solve "the content will not be cut when the window is smaller than the content": */
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 21em;
	height: 31em;
}

.carte_zoomed{
  width: 50em; height: 31.5em;
}

.journal_zoomed{
  width: 50em; height: 37.5em;
position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -18.75em; /* Half the height */
   margin-left: -25em;
}

.dvlp_zoomed{
  width: 50em; height: 33.45em;
}

.musee_zoomed{
  width: 40em; height: 32.38em;
}

.tourmont_zoomed{
  width: 36.1em; height: 40em;
}

.champ_zoomed{
  width: 28.84em; height: 40em;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
transition-timing-function: ease-in;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  background-color: #F8ECC2;
	transform: rotateY(180deg);
	font-family: 'Schoolbell', arial, serif;
	text-align: center
}

.footer{
  font-size: 1.5em;
  color: White;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    position: absolute;
    bottom: 3%;
    width: 100%;
    }
    
    .note{
      font-size: 1.5em;
      	font-family: 'Schoolbell', arial, serif;
	text-align: center;
	margin: 5em;
	margin-top: 33%
    }