@viewport {
 max-width: 320px;
}

@keyframes rollFromCenter {
  from {
	/*clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);*/
	clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  to {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}


#Sound {
	-moz-transition: transform 0.4s ease-in-out;
	-webkit-transition: transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
}
#Sound:hover {
	-moz-transform:scale(1.1);
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
}


/*Modal bambou*/

#BijBamb span {
	-webkit-position:absolute;
	-webkit-display:none;
	position:absolute;
	display:none;
	max-width:400px;
	height:auto;
}
#BijBamb #imgBamb {
	border-radius: 4px;
	border: solid 1px rgba(255, 255, 255, 0.3);
	filter: drop-shadow(0 0 1rem black);
}
#BijBamb:hover span {
	-webkit-display:block;
	display:block;
	margin: 0 -50px;
	animation: rollFromCenter 0.5s ease-in-out forwards;
	z-index:99;
}


/*Image Modal lampe bambou*/
@keyframes fonduBamb{
	0%{background-image: url('https://www.pratosphera.fr/images/Bagt_02.jpg');}
	16%{background-image: url('https://www.pratosphera.fr/images/banc.jpg');}
	33%{background-image: url('https://www.pratosphera.fr/images/chaise_Bambu.jpg');}
	50%{background-image: url('https://www.pratosphera.fr/images/Condimt.jpg');}
	66%{background-image: url('https://www.pratosphera.fr/images/Larfeuille.jpg');}
	83%{background-image: url('https://www.pratosphera.fr/images/Noeud.jpg');}
	100%{background-image: url('https://www.pratosphera.fr/images/Bagt_02.jpg');}
}
.LampBamb a span {
	-webkit-position:absolute;
	-webkit-display:none;
	position:absolute;
	display:none;
	max-width:400px;
	height: auto;
}
.LampBamb #Lamp {
	width:400px;
	height:268px;
	border-radius: 4px;
	border: solid 1px rgba(255, 255, 255, 0.3);
	/*border-top:solid 6px #e44c65;
	border-bottom:solid 6px #2b9b49;*/
	filter: drop-shadow(0 0 1rem black);
	background-image: url('https://www.pratosphera.fr/images/Bagt_02.jpg') no-repeat;
	background-size: contain;
	background-color: black;
	-webkit-animation: fonduBamb 15s ease-in-out infinite;
	-moz-animation: fonduBamb 15s ease-in-out infinite;
	-o-animation: fonduBamb 15s ease-in-out infinite;
	animation: fonduBamb 15s ease-in-out infinite;

}
.LampBamb a:hover span {
	-webkit-display:block;
	display:block;
	overflow: hidden;
	margin: 0 -50px;
	animation: rollFromCenter 0.5s ease-in-out forwards;
	z-index: 99;
}

/*Image modal bijoux*/

@keyframes fonduBij{
	0%{background-image: url('https://www.pratosphera.fr/images/Bij_Espanto.jpg');}
	20%{background-image: url('https://www.pratosphera.fr/images/pajaro.jpg');}
	40%{background-image: url('https://www.pratosphera.fr/images/Plaque_bamb.jpg');}
	60%{background-image: url('https://www.pratosphera.fr/images/Quetzal.jpg');}
	80%{background-image: url('https://www.pratosphera.fr/images/tolima.jpg');}
	100%{background-image: url('https://www.pratosphera.fr/images/Bij_Espanto.jpg');}
}

.imgModal a span {
	-webkit-position:absolute;
	-webkit-display:none;
	position:absolute;
	display:none;
	max-width:400px;
	height: auto;
}
.imgModal #imgPaja {
	width: 400px;
	height: 268px;
	border-radius: 4px;
	border: solid 1px rgba(255, 255, 255, 0.3);
	/*border-top:solid 6px #e44c65;
	border-bottom:solid 6px #2b9b49;*/
	filter: drop-shadow(0 0 1rem black);
	background-color: black;
	background-image: url('https://www.pratosphera.fr/images/Bij_Espanto.jpg');
	background-size: contain;
	-webkit-animation: fonduBij 12s ease-in-out infinite;
	-moz-animation: fonduBij 12s ease-in-out infinite;
	-o-animation: fonduBij 12s ease-in-out infinite;
	animation: fonduBij 12s ease-in-out infinite;
}
.imgModal a:hover span {
	-webkit-display:block;
	display:block;
	overflow: hidden;
	margin: 0 -50px;
	animation: rollFromCenter 0.5s ease-in-out forwards;
	z-index:99;
}


/*Image modal verre*/

#imgModal2 a span {
	-webkit-position:absolute;
	-webkit-display:none;
	position:absolute;
	display:none;
	max-width:400px;
	height: auto;
}
#imgModal2 #imgBout {
	width:400px;
	height:auto;
	/*border-top:solid 6px #e44c65;
	border-bottom:solid 6px #2b9b49;*/
	border-radius: 4px;
	border: solid 1px rgba(255, 255, 255, 0.3);
	filter: drop-shadow(0 0 1rem black);
}
#imgModal2 a:hover span {
	-webkit-display:block;
	display:block;
	margin: 0 -50px;
	z-index:99;
	animation: rollFromCenter 0.5s ease-in-out forwards;
}