@charset "UTF-8";
/* CSS Document */

/* Responsive */
@-ms-viewport{
  width: device-width;
}



.title {
	
	font-size:1.5em; 
	font-weight: bold;
	
}


.texte {
	
	font-size: 1.3em;
	
	
}



.texte-trad {
	
	font-size: 1.3em;
	letter-spacing: 0.1em;
	
}
	



.infos {
	
	display:inline-block; 
	margin-right: 40px;
	width: 500px;  
	background-color: none; 
	float:left;
}



#Stubenbinne_name {
	
	position:fixed; 
	background-color:none; 
	padding-top:0px; 
	padding-left:100px; 
	color:#fff;
} 

#iconedroite {
	
	right:0; 
	position: fixed; 
	top:25; 
	width: 60px; 
	opacity:0.2;
}

#iconegauche {
	
	left:0; 
	position: fixed; 
	top:25px;
	width: 60px; 
	opacity:0.2;
}

#iconedroite:hover, #iconegauche:hover {
	
	opacity: 1;
}




	html {
		
		background-color: none;
	}


#traduction {
	

	clear:both; 
	position:relative; 
	width:100%; 
	background-color: none;
	padding-top: 0px;
	margin-top: 0px;
	top: -800px;

}



.zoom > div{
	position:absolute;
min-height: 100%;
	overflow: hidden;
  transition:0.5s;
  opacity:1;/* demo purpose image zoomée*/  
  background-size: auto 690px;
  background-position: 0% 0%; 
	background-color: none;
	display:inline-block;
	top:-780px;

}
div[class^="zoom img"] {
    background-size:670%;
	top:0px;
	
}

	
	.img1 {
  background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	width: 100%;
		height:100px;

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

		margin-top: 0;
	background-repeat: no-repeat;
	background-size: contain ;

}
	
		.img2 {
  	background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	position:absolute;
	left:0;		
	margin-top: 0;
	background-repeat: no-repeat;
	width:112%; 
	height:100%;
	background-size:auto 690px; 
	
	top:0;
	margin-left:-6%;
}

#container {
	
	background-size: contain; 
	width:90%; 
	background-color: none; 
	top:0px; 
	margin-left:5%;
}
	

[class^="zoom"] b:hover ~ div {
	
  background-size:auto 690px;
	
}


.zoom {
  display:inline-block;
	height:200px;
	margin-top:-18px;
	background-color: none;
	display:inline-block;
 
}

	
.zoom b {
	margin-top:-18px;
  height:200px;
  width:9.09%;
  float:left;
  position:relative;
  z-index:1;
	background-color: none;
	background-color: none;
	display:inline-block;
	
	
}
	
		.zoom b:hover {
	margin-top:-18px;
  height:200px;
  width:9.09%;
	background-color:none;
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #8a0028;*/
			
			background-image: url(../icones/barre_hover.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
			display:inline-block;
}


b:nth-child(1) {
	
  background-position: 10% 0%;
	 
  width:9.09%;
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #000;*/
	background-image: url(../icones/barre.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
	opacity: 1;

}


b:nth-child(1):hover {

 background-position: 10% 0%;
	
  width:9.09%;
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #000;*/
	background-image: url(../icones/barre_hover.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
	opacity: 1;
}


b:nth-child(1):hover ~ div {
	
  background-position: 0% 0%;


}

b:nth-child(2):hover ~ div {
  background-position: 10% 0%;


}
b:nth-child(3):hover ~ div {
  background-position: 20% 0;
}
b:nth-child(4):hover ~ div {
  background-position: 30% 0;
}
b:nth-child(5):hover ~ div {
  background-position: 40% 0;
}
b:nth-child(6):hover ~ div {
  background-position: 50% 0;
}
b:nth-child(7):hover ~ div {
  background-position: 60% 0%;
}
b:nth-child(8):hover ~ div {
  background-position: 70% 0%;
}
b:nth-child(9):hover ~ div {
  background-position: 80% 0%;
}
b:nth-child(10):hover ~ div {
  background-position: 90% 0%;
}
	b:nth-child(11):hover ~ div {
  background-position: 100% 0%;
}




body {
  width:100%;
  margin:auto;
	position: absolute;
	
}

div.zoom:nth-child(3),
div.zoom:nth-child(6){
  top: 100px;
  background-size:contain;
  background-repeat:no-repeat;
	position:absolute;
}
div.zoom:nth-child(3) > div,
div.zoom:nth-child(6) > div{
  top: 200px;
	
  transform:translate(340px);
  opacity:1;
  position:absolute;
}
div.zoom:nth-child(3) > div:before,
div.zoom:nth-child(6) > div:before {

  position:absolute;
  left:0;
  top:0;
  right:0;
  font-weight:normal;
  color:white;
}














@media screen and (min-height: 1201px) and (max-width: 2600px) { 
	
	html { 
	 	background-color: none;
	}
	

	
.zoom > div{
	position:relative;
max-height: 100%;
	overflow: hidden;
  transition:0.5s;
  opacity:1;/* demo purpose image zoomée*/  
  background-size: auto 590px;
  background-position: 0% 0%; 
	display:inline-block;
	top:-780px;
	

}
div[class^="zoom img"] {
    background-size:670%;
}

	.img1 {
  background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	width: 100%;
	height: 4100%;
	position:absolute;
	left:0;
	top: -560%;
	background-color: none;

		margin-top: 0;
	background-repeat: no-repeat;
	background-size: contain ;

}
	
		.img2 {
  	background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	position:absolute;
	left:0;		
	
	background-repeat: no-repeat;
	width:112%; 
	height:100%;
	background-size:auto 590px; 
	background-color:none; 
	top:-600px;
	margin-left:-6%;
}
	
	.zoom b {
	margin-top:-18px;
  height:200px;
  width:8.7%;
  float:left;
  position:relative;
  z-index:1;
	background-color: none;
	background-color: none;
	display:inline-block;
	
	
}
	
		.zoom b:hover {
	margin-top:-18px;
  height:200px;
  width:8.7%;
	background-color:none;
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #8a0028;*/
			
			background-image: url(../icones/barre_hover.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
			display:inline-block;
}



#container {
	
	background-size: contain; 
	width:90%; 
	top:620px; 
	margin-left:4%;
	
}

[class^="zoom"] b:hover ~ div {
	
  background-size:auto 590px;
	
}
	
	
	
b:nth-child(1) {
	
  background-position: 10% 0%;
	 width:8.7%;
  
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #000;*/
	background-image: url(../icones/barre.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
	opacity: 1;

}


b:nth-child(1):hover {

 background-position: 10% 0%;
	width:8.7%;
  
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #000;*/
	background-image: url(../icones/barre_hover.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
	opacity: 1;
}


b:nth-child(1):hover ~ div {
	
  background-position: 0% 0%;


}
	
b:nth-child(2):hover ~ div {
  background-position: 10% 0%;


}
b:nth-child(3):hover ~ div {
  background-position: 20% 0;
}
b:nth-child(4):hover ~ div {
  background-position: 30% 0;
}
b:nth-child(5):hover ~ div {
  background-position: 40% 0;
}
b:nth-child(6):hover ~ div {
  background-position: 50% 0;
}
b:nth-child(7):hover ~ div {
  background-position: 60% 0%;
}
b:nth-child(8):hover ~ div {
  background-position: 70% 0%;
}
b:nth-child(9):hover ~ div {
  background-position: 80% 0%;
}
b:nth-child(10):hover ~ div {
  background-position: 90% 0%;
	background-color: none;
}
	b:nth-child(11):hover ~ div {
  background-position: 100% 0%;
		background-color: none;
}




body {
  width:100%;
  margin:auto;
	position: absolute;

}
div.zoom:nth-child(3),
div.zoom:nth-child(6){
  top: 100px;
  background-size:contain;
  background-repeat:no-repeat;
	position:absolute;
}
div.zoom:nth-child(3) > div,
div.zoom:nth-child(6) > div{
  top: 200px;
	
  transform:translate(340px);
  opacity:1;
  position:absolute;
}
div.zoom:nth-child(3) > div:before,
div.zoom:nth-child(6) > div:before {

  position:absolute;
  left:0;
  top:0;
  right:0;
  font-weight:normal;
  color:white;
}

	
	
	}



@media (max-height: 1800px) {
	
	
	.zoom {
  display:inline-block;
	height:180px;
	margin-top:-18px;
		
 
}

	
.zoom b {
	margin-top:-18px;
  height:180px;
  width:9.09%;
  float:left;
  position:relative;
  z-index:1;
	display:inline-block;
	
	
	
}
	
		.zoom b:hover {
	margin-top:-18px;
  height:180px;
  width:9.09%;
	background-color:none;
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #8a0028;*/
			
			background-image: url(../icones/barre_hover.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
}
	
	
	html { 
	 	background-color:none;
	}
	
	
	.zoom {
  display:inline-block;
 
}

	

.zoom > div{
	position:relative;
max-height: 100%;
	overflow: hidden;
  transition:0.5s;
  opacity:1;/* demo purpose image zoomée*/  
  background-size: auto 590px;
  background-position: 0% 0%; 

}
div[class^="zoom img"] {
    background-size:670%;
}

	.img1 {
  background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	width: 100%;
	height: 4100%;
	position:absolute;
	left:0;
	top: -560%;
	background-color: none;

		margin-top: 0;
	background-repeat: no-repeat;
	background-size: contain ;

}
	
		.img2 {
  	background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	position:absolute;
	left:0;		
	margin-top: 0px;
	background-repeat: no-repeat;
	width:112%; 
	height:100%;
	background-size:auto 590px; 
	background-color:none; 
	top:-78%;
	margin-left:-6%;
}

#container {
	
	background-size: contain; 
	width:90%; 
	top:620px; 
	margin-left:5%;
}
	

[class^="zoom"] b:hover ~ div {
	
  background-size:auto 590px;
	
}
b:nth-child(2):hover ~ div {
  background-position: 10% 0%;


}
b:nth-child(3):hover ~ div {
  background-position: 20% 0;
}
b:nth-child(4):hover ~ div {
  background-position: 30% 0;
}
b:nth-child(5):hover ~ div {
  background-position: 40% 0;
}
b:nth-child(6):hover ~ div {
  background-position: 50% 0;
}
b:nth-child(7):hover ~ div {
  background-position: 60% 0%;
}
b:nth-child(8):hover ~ div {
  background-position: 70% 0%;
}
b:nth-child(9):hover ~ div {
  background-position: 80% 0%;
}
b:nth-child(10):hover ~ div {
  background-position: 90% 0%;
}
	b:nth-child(11):hover ~ div {
  background-position: 100% 0%;
}




body {
  width:100%;
  margin:auto;
	position: absolute;

}
div.zoom:nth-child(3),
div.zoom:nth-child(6){
  top: 100px;
  background-size:contain;
  background-repeat:no-repeat;
	position:absolute;
}
div.zoom:nth-child(3) > div,
div.zoom:nth-child(6) > div{
  top: 200px;
	
  transform:translate(340px);
  opacity:1;
  position:absolute;
}
div.zoom:nth-child(3) > div:before,
div.zoom:nth-child(6) > div:before {

  position:absolute;
  left:0;
  top:0;
  right:0;
  font-weight:normal;
  color:white;
}

	
	
	}





@media (max-height: 800px) {
	
	

	
	
	.zoom {
  display:inline-block;
	height:150px;
	margin-top:-18px;
 
}

	
.zoom b {
	margin-top:-18px;
  height:150px;
  width:9.09%;
  float:left;
  position:relative;
  z-index:1;
	background-color: none;
	
	
}
	
		.zoom b:hover {
	margin-top:-18px;
  height:150px;
  width:9.09%;
	background-color:none;
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #8a0028;*/
			
			background-image: url(../icones/barre_hover.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
}
	
	html { 
	 	background-color: none;
	}
	
	
	.zoom {
  display:inline-block;
 
}

	

.zoom > div{
	position:relative;
max-height: 100%;
	overflow: hidden;
  transition:0.5s;
  opacity:1;/* demo purpose image zoomée*/  
  background-size: auto 590px;
  background-position: 0% 0%; 
	top:-750px;

}
div[class^="zoom img"] {
    background-size:670%;
}

	.img1 {
  background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	width: 100%;
	height: 4100%;
	position:absolute;
	left:0;
	top: -660%;
	background-color: none;

		margin-top: 0;
	background-repeat: no-repeat;
	background-size: contain ;

}
	
		.img2 {
  	background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	position:absolute;
	left:0;		
	margin-top: 0px;
	background-repeat: no-repeat;
	width:112%; 
	height:100%;
	background-size:auto 590px; 
	background-color:none; 
	top:-78%;
	margin-left:-6%;
}

#container {
	
	background-size: contain; 
	width:90%; 
	top:620px; 
	margin-left:5%;
}
	

[class^="zoom"] b:hover ~ div {
	
  background-size:auto 590px;
	
}
b:nth-child(2):hover ~ div {
  background-position: 10% 0%;


}
b:nth-child(3):hover ~ div {
  background-position: 20% 0;
}
b:nth-child(4):hover ~ div {
  background-position: 30% 0;
}
b:nth-child(5):hover ~ div {
  background-position: 40% 0;
}
b:nth-child(6):hover ~ div {
  background-position: 50% 0;
}
b:nth-child(7):hover ~ div {
  background-position: 60% 0%;
}
b:nth-child(8):hover ~ div {
  background-position: 70% 0%;
}
b:nth-child(9):hover ~ div {
  background-position: 80% 0%;
}
b:nth-child(10):hover ~ div {
  background-position: 90% 0%;
}
	b:nth-child(11):hover ~ div {
  background-position: 100% 0%;
}




body {
  width:100%;
  margin:auto;
	position: absolute;

}
div.zoom:nth-child(3),
div.zoom:nth-child(6){
  top: 100px;
  background-size:contain;
  background-repeat:no-repeat;
	position:absolute;
}
div.zoom:nth-child(3) > div,
div.zoom:nth-child(6) > div{
  top: 200px;
	
  transform:translate(340px);
  opacity:1;
  position:absolute;
}
div.zoom:nth-child(3) > div:before,
div.zoom:nth-child(6) > div:before {

  position:absolute;
  left:0;
  top:0;
  right:0;
  font-weight:normal;
  color:white;
}

	
	
	}



@media (max-height: 700px) {
	
	html { 
	 	background-color: none;
	}
	

	
	.zoom {
  display:inline-block;
 
}



.zoom > div{
	position:relative;
max-height: 100%;
	overflow: hidden;
  transition:0.5s;
  opacity:1;/* demo purpose image zoomée*/  
  background-size: auto 490px;
  background-position: 0% 0%; 
	top:-640px;

}
div[class^="zoom img"] {
    background-size:670%;
}

	.img1 {
  background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	width: 100%;
	height: 4100%;
	position:absolute;
	left:0;
	top: -560%;
	background-color: none;

		margin-top: 0;
	background-repeat: no-repeat;
	background-size: contain ;

}
	
		.img2 {
  	background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	position:absolute;
	left:0;		
	margin-top: 0px;
	background-repeat: no-repeat;
	width:112%; 
	height:100%;
	background-size:auto 490px; 
	background-color:none; 
	top:-65%;
	margin-left:-6%;
}

#container {
	
	background-size: contain; 
	width:90%; 
	top:510px; 
	margin-left:5%;
}
	

[class^="zoom"] b:hover ~ div {
	
  background-size:auto 490px;
	
}
b:nth-child(2):hover ~ div {
  background-position: 10% 0%;


}
b:nth-child(3):hover ~ div {
  background-position: 20% 0;
}
b:nth-child(4):hover ~ div {
  background-position: 30% 0;
}
b:nth-child(5):hover ~ div {
  background-position: 40% 0;
}
b:nth-child(6):hover ~ div {
  background-position: 50% 0;
}
b:nth-child(7):hover ~ div {
  background-position: 60% 0%;
}
b:nth-child(8):hover ~ div {
  background-position: 70% 0%;
}
b:nth-child(9):hover ~ div {
  background-position: 80% 0%;
}
b:nth-child(10):hover ~ div {
  background-position: 90% 0%;
}
	b:nth-child(11):hover ~ div {
  background-position: 100% 0%;
}




body {
  width:100%;
  margin:auto;
	position: absolute;
	
}
div.zoom:nth-child(3),
div.zoom:nth-child(6){
  top: 100px;
  background-size:contain;
  background-repeat:no-repeat;
	position:absolute;
}
div.zoom:nth-child(3) > div,
div.zoom:nth-child(6) > div{
  top: 200px;
	
  transform:translate(340px);
  opacity:1;
  position:absolute;
}
div.zoom:nth-child(3) > div:before,
div.zoom:nth-child(6) > div:before {

  position:absolute;
  left:0;
  top:0;
  right:0;
  font-weight:normal;
  color:white;
}

	

	
}




@media (max-height: 590px) {
	
	
	.zoom {
  display:inline-block;
	height:150px;
	margin-top:-18px;
 
}

	
.zoom b {
	margin-top:-18px;
  height:150px;
  width:9.09%;
  float:left;
  position:relative;
  z-index:1;
	background-color: none;
	
	
}
	
		.zoom b:hover {
	margin-top:-18px;
  height:150px;
  width:9.09%;
	background-color:none;
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #8a0028;*/
			
			background-image: url(../icones/barre_hover.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
}
	
	html { 
	 	background-color: none;
	}
	
	#traduction {

	clear:both; 
	position:relative; 
	width:100%; 
	height: 1000px;
	margin-top: 0px;
		
	background-color: none;
	
}
	
	



.zoom > div{
	position:relative;
max-height: 100%;
	overflow: hidden;
  transition:0.5s;
  opacity:1;/* demo purpose image zoomée*/  
  background-size: auto 290px;
  background-position: 0% 0%; 
	top:-435px;

}
div[class^="zoom img"] {
    background-size:670%;
}

	.img1 {
  background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	width: 100%;
	height: 4100%;
	position:absolute;
	left:0;
	top: -560%;
	background-color: none;

		margin-top: 0;
	background-repeat: no-repeat;
	background-size: contain ;

}
	
		.img2 {
  	background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	position:absolute;
	left:0;		
	margin-top: 0px;
	background-repeat: no-repeat;
	width:112%; 
	height:100%;
	background-size:auto 290px; 
	background-color:none; 
	top:-39%;
	margin-left:-6%;
}

#container {
	
	background-size: contain; 
	width:90%; 
	top:310px; 
	margin-left:5%;
}
	

[class^="zoom"] b:hover ~ div {
	
  background-size:auto 290px;
	
}
b:nth-child(2):hover ~ div {
  background-position: 10% 0%;


}
b:nth-child(3):hover ~ div {
  background-position: 20% 0;
}
b:nth-child(4):hover ~ div {
  background-position: 30% 0;
}
b:nth-child(5):hover ~ div {
  background-position: 40% 0;
}
b:nth-child(6):hover ~ div {
  background-position: 50% 0;
}
b:nth-child(7):hover ~ div {
  background-position: 60% 0%;
}
b:nth-child(8):hover ~ div {
  background-position: 70% 0%;
}
b:nth-child(9):hover ~ div {
  background-position: 80% 0%;
}
b:nth-child(10):hover ~ div {
  background-position: 90% 0%;
}
	b:nth-child(11):hover ~ div {
  background-position: 100% 0%;
}




body {
  width:100%;
  margin:auto;
	position: absolute;
	
}
div.zoom:nth-child(3),
div.zoom:nth-child(6){
  top: 100px;
  background-size:contain;
  background-repeat:no-repeat;
	position:absolute;
}
div.zoom:nth-child(3) > div,
div.zoom:nth-child(6) > div{
  top: 200px;
	
  transform:translate(340px);
  opacity:1;
  position:absolute;
}
div.zoom:nth-child(3) > div:before,
div.zoom:nth-child(6) > div:before {

  position:absolute;
  left:0;
  top:0;
  right:0;
  font-weight:normal;
  color:white;
}

	

	
}

@media (max-height: 400px) {
	
	
	html { 
	 	background-color: none;
	}
	
	
	
	.zoom {
  display:inline-block;
	height:150px;
	margin-top:-18px;
 
}

	
.zoom b {
	margin-top:-18px;
  height:150px;
  width:9.09%;
  float:left;
  position:relative;
  z-index:1;
	background-color: none;
	
	
}
	
		.zoom b:hover {
	margin-top:-18px;
  height:150px;
  width:9.09%;
	background-color:none;
  float:left;
  position:relative;
  z-index:1;
	/*border-top: 10px solid #8a0028;*/
			
			background-image: url(../icones/barre_hover.svg);
	background-repeat: no-repeat;
	background-size: 120px;
	background-position: center top;
}
	

.zoom > div{
	position:relative;
max-height: 100%;
	overflow: hidden;
  transition:0.5s;
  opacity:1;/* demo purpose image zoomée*/  
  background-size: auto 230px;
  background-position: 0% 0%; 
	top:-370px;

}
div[class^="zoom img"] {
    background-size:670%;
}

	.img1 {
  background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	width: 100%;
	height: 4100%;
	position:absolute;
	left:0;
	top: -560%;
	background-color: none;

		margin-top: 0;
	background-repeat: no-repeat;
	background-size: contain ;

}
	
		.img2 {
  	background:url(../images/Stubenbinnen/__24-a-Weissenhaus-frei_rgb.jpg);
	position:absolute;
	left:0;		
	margin-top: 0;
	background-repeat: no-repeat;
	width:112%; 
	height:100%;
	background-size:auto 230px; 
	background-color:none; 
	top:-30.5%;
	margin-left:-6%;
}

#container {
	
	background-size: contain; 
	width:90%; 
	top:240px; 
	margin-left:5%;
}
	

[class^="zoom"] b:hover ~ div {
	
  background-size:auto 230px;
	
}
b:nth-child(2):hover ~ div {
  background-position: 10% 0%;


}
b:nth-child(3):hover ~ div {
  background-position: 20% 0;
}
b:nth-child(4):hover ~ div {
  background-position: 30% 0;
}
b:nth-child(5):hover ~ div {
  background-position: 40% 0;
}
b:nth-child(6):hover ~ div {
  background-position: 50% 0;
}
b:nth-child(7):hover ~ div {
  background-position: 60% 0%;
}
b:nth-child(8):hover ~ div {
  background-position: 70% 0%;
}
b:nth-child(9):hover ~ div {
  background-position: 80% 0%;
}
b:nth-child(10):hover ~ div {
  background-position: 90% 0%;
}
	b:nth-child(11):hover ~ div {
  background-position: 100% 0%;
}




body {
  width:100%;
  margin:auto;
	position: absolute;
	
}
div.zoom:nth-child(3),
div.zoom:nth-child(6){
  top: 100px;
  background-size:contain;
  background-repeat:no-repeat;
	position:absolute;
}
div.zoom:nth-child(3) > div,
div.zoom:nth-child(6) > div{
  top: 200px;
	
  transform:translate(340px);
  opacity:1;
  position:absolute;
}
div.zoom:nth-child(3) > div:before,
div.zoom:nth-child(6) > div:before {

  position:absolute;
  left:0;
  top:0;
  right:0;
  font-weight:normal;
  color:white;
}

	

	
}

@media (max-width: 480px) {
		
		#traduction {
	

	clear:both; 
	position:relative; 
	width:100%; 
	background-color: none;
	padding-top: 0px;
	margin-top: 0px;
	top: -850px;
}

	
.texte-trad {
	
	font-size: 0.8em;
	letter-spacing: 0.1em;
	width: 280px;
	
}
	

.title {
	
	font-style: normal;
	font-weight: bold;
	font-size: 1.2em ;
	line-height: 1em;
	color: none;
	width: 280px;
}
	

.texte {
	
	font-style: normal;
	font-weight: normal;
	font-size: 0.8em ;
	width: 280px;
}
	
	.infos {
		
		width:280px;
	}

		
}