body,html{
	margin:0;padding:0;
	font:15px sans-serif;
	background:transparent;
	width:calc(100vw - 25px)
}
html{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c2c4d6+0,7f8096+100 */
	background: #c2c4d6; 
	background: radial-gradient(ellipse at center, #c2c4d6 0%,#7f8096 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2c4d6', endColorstr='#7f8096',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-attachment:fixed;
}

h2 > i {
	font-size:60%;color:inherit !important;line-height:auto;display:block;
}
a {text-decoration:none;display:inline-block;border-bottom:1px solid transparent;}
a:hover {transition:1s;color:#0055aa;border-color: #0055aa;}

section.main {
	margin:10vh auto 0 auto;
	min-height:48vh;
	margin-bottom:12em;
}
@keyframes articleshown {
	from { opacity:0;top:100vh; }
	to {opacity:1;top:10vh; }
}

section.main article {	
	position:absolute;
	top:101vh;
	left:calc(38vw + 50px);
	right:8vw;
	max-width:550px;
	opacity:0;	
}
section.main article * {color:#333; transition:1s}
section.main article h2 {margin-top:1.5em;}
section.main article a {color:#006693;}
section.main article p {margin-bottom:1px;}
section.main article h2, section.main article h3{ color:#555566; transition:1s }
section.main article img {max-width:100%;margin:1em 0;}
section.main article img:hover{margin:-7vh 10% 0 -45%;width:150%;max-width:150%;}
section.main article.shown *{opacity:1;}
section.main article.shown {
	animation-name: articleshown;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function:ease-in;
	top:10vh;
	opacity:1;
}
@keyframes objectenter {
	from {max-width:0;opacity:0; }
	to {max-width:28vw;opacity:1; }
}
section.main > object {
	position:absolute;
	right:calc(68vw - 50px);top:15vh;
	max-width:28vw;
	height:50vh;
	max-height:250px;
	display:inline-block;
	animation-name: objectenter;
	animation-duration: 2s;
	animation-timing-function:ease-out;
	animation-iteration-count: 1;
	animation-direction: normal;
}

div.espace{
	height:10em;
}

#art3 p {cursor:cell;}
#art3 p:hover b {text-decoration:underline;}
#art3 p img {height:0;transition:1s;opacity:0;vertical-align: top;}
#art3 p:focus img{	height:auto;transition:1s;opacity:1}

footer{
	position:fixed;height:auto;
	bottom:0;left:0;width:100vw;
	background:#556;
	text-align:center;
	height:10vh;
	min-height:3em;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#555566+0,78758c+100 */
	background: #555566; 
	background: linear-gradient(to bottom, #555566 0%,#78758c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555566', endColorstr='#78758c',GradientType=0 ); /* IE6-9 */
}
footer a {
	display:inline-block;margin:0.8em;
	color:#dde;
	text-decoration:none;border:0;
	font-size:1.1em;
}
footer a:hover{	color:#fff;}
footer a>span.info{	display:none;	font-size:75%;}
footer a:focus{	color:#FFCC00;}

footer a:before{	color:transparent;content:'{ ';font-size:130%;vertical-align:center;}
footer a:after{	color:transparent;content:' }';font-size:130%;vertical-align:center;}
footer a:focus:after,footer a:focus:before{	color:#00AAD4;transition:1s;}

footer a:focus>span.info{display:block;}

@media screen and (max-width:900px){
	section.main{margin-top:0}
	@keyframes articleshown {
		from { opacity:0;top:100vh; }
		to {opacity:1;top:20vh; }
	}
	section.main article {	
		position:absolute;
		top:101vh;
		left:5vw;
		right:5vw;
		max-width:90vw;
		opacity:0;
	}
	section.main article img {display:block;margin:3vh 5vw;width:100%;max-width:80vw;max-height:40vh;}
	section.main article img:hover{display: block;margin: 1vh 0 0 -4vw;width: 94vw;max-width: 94vw;max-height: 45vh;}
	section.main article.shown {
		animation-name: articleshown;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function:ease-in;
		top:20vh;
		opacity:1;
	}
	
	@keyframes objectenter {
		from {margin-top:7vh;height:0;max-width:0;max-height:0;opacity:0; }
		to {margin-top:2vh;height:13vh;max-width:35vw;max-height:13vh;opacity:1; }
	}
	section.main > object {
		position:relative;
		right:auto;top:auto;
		height:13vh;
		max-width:35vw;max-height:13vh;
		display:block;
		margin:2vh auto 0 auto;		
		animation-name: objectenter;
		animation-duration: 2s;
		animation-timing-function:ease-out;
		animation-iteration-count: 1;
		animation-direction: normal;
	}
}