body {
			margin:0;
			font-family:Roboto,sans-serif;
			background-color:#e0e0e0;
		}
		h1,h2 {
			cursor:pointer;
			text-align:center;
			color:#c09;
		}
		h2:after {
			content:' ';
			
			display:inline-block;
			width:0px;
			height:0px;
			margin-left:1rem;
			border-bottom:solid transparent 12px;
			border-left:solid gray 12px;
			border-top:solid transparent 12px;
			transform:translate(0,4px);
		}
		h2:hover:after, h2.rot:after {
			transform:translate(0,6px) rotate(90deg) ;
		}
		.listimage {
			cursor:pointer;
			display:none;
		}
		.listimage img {
			border-radius:1rem;
			margin:1rem 1rem 0 0;
			-webkit-box-shadow: 0 0 2px 2px rgba(204,0,153,.25);
			box-shadow: 0 0 2px 2px rgba(204,0,153,.25);

		}
		.showimage {
			margin:0;
			padding:0;
			display:none;
			position:fixed;
			background-color:rgba(0,0,0,0.75);
			text-align:center;
			height:100vh;
			line-height:100vh;
			width:100vw;
			left:0;
			top:0;
		}
		.showimage img {
			/*
			max-height:100%;
			max-width:100%;
			*/
			vertical-align:middle;
		}
		.showimage span.legende {
			display:block;
			text-align:left;
			line-height:normal;
			left:1rem;
			top:1rem;
			color:white;
			position:absolute;
			z-index:2;
		}
		.showimage span.image {
			display:block;
			width:100%;
			height:100%;
			background-position:center center;
			background-size:contain;
			background-repeat:no-repeat;
			left:0;
			top:0;
			position:absolute;
			z-index:1;
		}
		.pres {
			background-color:#fff;
			padding:2rem 1rem;
			max-width:1280px;
			width:100%;
			margin:0 auto 2rem auto;
			text-align:center;
			border-radius:2rem;
			-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,.5);
			box-shadow: 0 0 5px 5px rgba(0,0,0,.5);
		}
		video {
			max-width:100vw;
		}
		.animation {
			box-sizing:border-box;
			cursor:pointer;
			width:400px;
			max-width:90%;
			margin:1rem auto;
			background-color:#e0e0e0;
			border:solid gray 1px;
			border-radius:1rem;
			padding:.5rem;
		}
		.animation small {
			font-weight:normal;
			font-size:75%;
			color:#c03;
		}
		.animation small.ok {
			color:#0c3;
		}
		.overlay {
			z-index:1000;
			position:fixed;
			background-color:rgba(0,0,0,.5);
			width:100vw;
			height:100vh;
			top:0;
			left:0;
			background-position:center center;
			background-size:contain;
			background-repeat:no-repeat;
			background-image:url();
			display:none;
			-webkit-transition: background-image 1s;
			-moz-transition: background-image 1s;
			-o-transition: background-image 1s;
			transition: background-image 1s;
		}
		.overlay .close {
			cursor:pointer;
			width:2rem;
			height:2rem;
			position:absolute;
			top:.5rem;
			right:1.5rem;
			background-color:#c03;
			color:#fff;
			line-height:2rem;
			text-align:center;
			border-radius:1rem;
			z-index:10;
		}
		.overlay .nav {
			opacity:.15;
			cursor:pointer;
			width:3rem;
			height:3rem;
			position:absolute;
			top:calc(50% - 1.5rem);
			background-color:rgba(0,0,0,.5);
			color:#999;
			line-height:calc(3rem - 6px);
			text-align:center;
			border-radius:1.5rem;
			font-size:2rem;
			font-weight:bold;
		}
		.overlay .nav.prec {
			left:1rem;
		}
		.overlay .nav.suiv {
			right:1rem;
		}
		.overlay .nav.pause {
			left:calc(50% - 2.5rem);
			width:5rem;
			height:5rem;
			top:calc(50% - 2.5rem);
			line-height:calc(5rem - 2px);
			border-radius:2.5rem;
		}
		.overlay.move .nav {
			opacity:.75;
		}
		.overlay .nav:hover {
			opacity:1;
			background-color:black;
			color:white;
		}
		.overlay .lemenu {
			display:block;
			position:absolute;
			bottom:0;
			text-align:center;
			width:100%;
			margin:0;
			padding:0;
			list-style-type:none;
		}
		.overlay .letitre {
			display:block;
			position:absolute;
			top:0;
			width:100%;
			margin:0;
			padding:0;
			list-style-type:none;
		}
		.overlay .letitre h3 {
			opacity:.35;
			display:inline-block;
			background-color:rgba(255,255,255,.5);
			margin:0;
			padding:.5rem 1rem;
		}
		.overlay .lemenu li {
			content:'•';
			display:inline-block;
			width:2rem;
			height:2rem;
			border-radius:1rem;
			background-color:rgba(0,0,0,.5);
			margin:1rem .25rem;
			color:white;
			line-height:2rem;
			cursor:pointer;
		}
		.overlay .lemenu li:hover, .overlay .lemenu li.over {
			background-color:black;
		}
		.overlay .letitre h3:hover, .overlay .letitre h3.over {
			opacity:1;
		}
		@media screen and (max-width: 1280px) {
				.body {
					height:100vh;
					width:100%;
				}
				.pres {
					width:100%;
					max-width:100vw;
				}
				.listimage img {
				}
				.showimage {
					height:100%;
					width:100%;
				}
				.showimage img {
					max-height:100%;
					max-width:100%;
				}
		}