@charset "UTF-8";
/* CSS Document */
body,html{
	
}
body{
	margin:0;
	-webkit-text-size-adjust:100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased !important;
}
#container,
#titreExplo,
#nav,
#introcredits{
	font-family: Arial, Helvetica, sans-serif;
}
#reveal{
	left: 0px;
	height: calc(100%);
	width: 100%;
	position: absolute;
}
#reveal img{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
}
img
{
	border:0
}
@keyframes leaves {
        0% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
        100% {
            transform: scale(1.25);
            -webkit-transform: scale(1.25);
        }
    }
.over, #imgs {
	position:absolute;
	width: 100%;
	top: 0;
	left: 0;
	transform-origin: left top;
}
#imgs img{
	width:auto !important;
}
.over img{
	width:auto !important;
	/*animation: leaves 1s ease-in-out 2 alternate;
    -webkit-animation: leaves 1s ease-in-out 2 alternate;
	animation-delay: 2s, 4ms;*/
}
.containerexplo
{
	margin:0 auto;
	position:relative;
	-moz-user-select: none;
  	-webkit-user-select: none;
 	-ms-user-select: none;
	width:100%;
	height:100%;
	overflow:hidden;
	}
.containerexplo  #image
{
	position:absolute;top:0;left:0;width:100%;
}
.containerexplo #image img#imagefond
{
	position:absolute;top:0;left:0;
	width:100%;
	height:auto;
}
h1{
	
}
#nav{
	position:fixed;
	height:55px;
	width:100%;
	z-index:300;
	line-height:48px;
	bottom:0;
	left:0;
}
#nav .copy
{
	float:left;
	padding-left:1.5em;
	cursor:pointer;
}
.pictos
{
	white-space: nowrap;height:100%;
}

.pictos>div{
	line-height:48px;
	font-size:30px;
	height:100% !important;
	padding:0 20px;
	cursor:pointer;
	float:left;
}

.outils
{
	float:right;
	height:100%;
}

/**/
#main
{
	position:relative;
}
canvas{
	display:none
}
.roll{
	
}
#zones canvas{
	
}
.cleaner
{
	
}
#reveal{
position:relative;
}
#revealbackground
{
	position:absolute;top:0;left:0;
	display:block !important;
}
.commentaire
{
	display:none;
}
table{
	border-collapse:collapse;
}
.tooltipster-grow {
transform-origin: right;
}
.tooltipster-content img{
	width:100%;
}

area{
	cursor:pointer
}
.roll{
	
}
.containerpuce{
	display:table;
	width:100%;
	height:100%;
}
.puce{
	width:auto;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	opacity: 0;
}
.puce>div{
	background-color:rgba(0,0,0,.5);
	border-radius:40px;
	color:#fff;
	width:40px;
	height:40px;
	line-height:40px;
	margin:0 auto;
}
#comments, #fond-resp{
	display:none;
}
/**/
@media screen and (max-width: 768px) {
#fond-resp {
	display: block;
}
#fond-resp img {
	width: 100% !important;
	position: relative !important;
	top: auto !important;left: auto !important;
}
#fond {
	display: none;
}
#reveal,#main{
		height:auto !important;
}
.containerexplo{
	height:auto;
	width:auto !important;
	padding:0 !important;
}
.containerexplo #image,
.containerexplo #image img{
	/*display:none;*/
}
#reveal>img {
	display: none;
}
#imgs {
	position:relative;
	width: 100%;
	top: auto;
	left: auto;
	transform-origin: none;
	transform: none !important;
}

#comments img{
	width:100% !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
}
#comments{
	display:block;
	font-size:14px;
}
.comment{
	display: table;table-layout: fixed;
	margin-bottom:1em;
	position:relative;
	margin:0 1em 1em 1em;
}
#pop img {
	width: 100%;
}
#pop .comment {
	margin: 0;
	display: table-cell;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
}
@media screen and (max-width: 650px) {
.tttexte {
   width:60%;
}
.ttimagetop, .ttimage, .ttimageright {
    display: table-cell;
    width: 40%;
    float: none;

}
}
@media screen and (max-width: 550px) {
.tttexte {
   width:100%;
   display:block;
}
.ttimagetop, .ttimage, .ttimageright {
    display:block;
    width: 100%;
    float: none;
	padding: 0 20px;
	margin: 0;
}
}