/*-----------------------------------Galerie---------------------------------------*/
/*Sly 3D CSS*/
			.middleContent button{ background: transparent;  border:none; color: #262625; opacity: .5;}
			.middleContent button:hover, .middleContent button:hover { opacity: 1; border:none; }
			.middleContent button:disabled, .middleContent button:disabled { opacity: .1; border:none; }

			.middleContent .prev { position: relative; padding: 10px; margin-top: -100px; width: 160px; float: left;margin-left: 80px; margin-right: 20px; font-size: 3em; overflow:hidden;}
			/*.middleContent .description { position: relative; padding: 10px; margin-top: 10px; width: 793px; height: 100px;float: left; margin-bottom: 10px; border: solid 1px #000000;}*/
			.middleContent .next { position: relative; padding: 10px; margin-top: -100px; width: 160px; float: right;margin-right: 80px;margin-left: 20px;font-size: 3em; }

/*windowSize*/.middleContent .frame { width: 101%; height: 500px; text-shadow: none; overflow:hidden;}
			.middleContent .frame ul { list-style: none; margin: 5px 0 0 0; padding-right: 0; height: 100%; font-size: 1.2em; }
/*itemSize*/.middleContent .frame ul li { float: left; width: 600px; height: 510px; margin: 0 1px 0 0; padding: 0; padding-top: 20px; text-align: center; overflow: hidden;}
			.middleContent .frame ul li img {margin-left:auto; margin-right:auto; margin-bottom:0%;}
/*description*/.middleContent .frame ul li.active p {margin-top:5px; border: solid 1px #A5A5A5; padding:1%; line-height: 30px; font-size: 1.2em; background-color: #FFFFFF; display: block;}
			.middleContent .frame ul li p {display:none;}
			.middleContent .frame ul li.active { color: #262625; }

			/*.middleContent .scrollbar { margin: 100px auto 0px; width: 940px; height: 2px; line-height: 0; }
			.middleContent .scrollbar .handle { width: 100px; height: 100%; background: #262625; opacity: .5; cursor: pointer; }
			.middleContent .scrollbar .handle .mousearea { position: absolute; top: -9px; left: 0; width: 100%; height: 20px; }*/


			/* 3D shenanigans */
			.middleContent .frame {
				padding-top:92px;
				padding-bottom:92px;
				height: 500px;
				-webkit-perspective: 800px;
				-ms-perspective: 800px;
				perspective: 800px;
				-webkit-perspective-origin: 50% 50%;
				-ms-perspective-origin: 50% 50%;
				perspective-origin: 50% 50%;
			}
			.middleContent .frame ul {
				-webkit-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.middleContent .frame ul li {
				position: relative;
				margin: 0 -25px;
				-webkit-transform: rotateY(60deg) scale(0.9);
				-ms-transform: rotateY(60deg) scale(0.9);
				transform: rotateY(60deg) scale(0.9);
				-webkit-transition: -webkit-transform 300ms ease-out;
				transition: transform 300ms ease-out;
				opacity: 0.2;
			}
			.middleContent .frame ul li.active {
				z-index: 10;
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
				opacity: 1;
			}
			.middleContent .frame ul li.active ~ li {
				-webkit-transform: rotateY(-60deg) scale(0.9);
				-ms-transform: rotateY(-60deg) scale(0.9);
				transform: rotateY(-60deg) scale(0.9);
			}
			#underMenu{
				min-width: 981px;
				margin-right: auto;
				margin-left: auto;
			}
			#sousMenu{
				width: 981px;
				position: relative;
				left: 160px;
				text-align: center;
				margin-right: auto;
				margin-left: auto;
			}
			.link{
				style=" -moz-box-shadow: 12px 12px 12px 12px #aaa; 
                -webkit-box-shadow: 1px 1px 12px #aaa; 
                box-shadow: 1px 1px 12px #555;filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
                zoom: 1;"
			}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {/*max-device-width*/ 
			#underMenu{
				min-width: 320px;
				margin-right: auto;
				margin-left: auto;
			}
			#sousMenu{
				width: 320px;
				position: relative;
				left: 0px;
				text-align: center;
				margin-right: auto;
				margin-left: auto;
			}
			.middleContent .frame{
				padding-top:20px;
				width: 320px;
				height: 500px;
				margin-left: auto;
				margin-right: auto;
			}
			.middleContent .frame ul li {
				width: 310px;
				margin-left: -25px;
			}
			img{
				max-height: 300px;
				max-width: 300px;
			}
}