body {
	background-color: #7d818a;
	background: url("image/Font.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-attachment: fixed;
	margin: 0px;
	overflow-x: hidden; 
	overflow-y: scroll;
	padding-bottom: 100px;
	left: 0px; top: 0px;
}





img{
	width: 110px;
	margin-left: 5px;
	cursor: zoom-in;
	color: white;
}

.pictogram{
	width: 30px;
	cursor: unset;
	float: right;
	margin-top: -15px;
}
.pictogram_info{
	width: 20px;
	cursor: unset;
	margin: 0px 10px 0px 0px;
	float: left;
}



p{
	background-color: RGB(255, 255, 255, 0.2);
	margin: 0px 80px 7px 45px;
	padding: 15px 15px 10px 15px;
	border: 1.5px solid black;
	border-radius: 4px;
}
a{
	margin-left: 30px;
	cursor: pointer;
	vertical-align: 30px;
	cursor:help;
	font-size: 30px;
	color: black;
	text-decoration: none;
}a:hover{
	color: white;
}


h1{
	color: back;
	font-size: 40px;
	font-weight: bold;
	margin: 10px 0px 10px 25px;
}
h2{
	color: back;
	font-size: 25px;
	font-weight: bolt;
	margin: 10px 0px 10px 25px;
}
h3{
	color: back;
	font-size: 20px;
	font-weight: normal;
	margin: 10px 0px 10px 25px;
}


.header{
	background-color: #9A8BB7;
	height: 75px;	
	margin : 0%;
	display: block;
	background-attachment : inherit;
	font-size: 50px;
	color: red; 
	text-align: left;
	padding: 10px 0px 0px 250px;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none; 
	text-shadow: 2px 2px 3px black;
}

.button-open-box{
	display: block;
	position: fixed;
	width: 50px;
	height: 50px;
	left: 10px; top: 10px;
	background-attachment : fixed;
	font-size: 45px;
	font-weight: bolt;
	background-color: RGB(173, 137, 107, 1);
	border: 2px solid black;
	border-radius: 7px;
	cursor: pointer;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}
.button-open-box:hover{
	background-color: RGB(170, 125, 82, 1);
}

.button-box{
	background-color: RGB(193, 159, 131, 0.70);
	width: 190px;
	height: 100%;	
	margin: 0px;
	display: block;
	position: fixed;
	left: 0px; top: 0px;
	background-attachment : fixed;
	padding-top: 120px;
	font-size: 20px;
	text-align: right;
	padding-right: 10px;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
@-webkit-keyframes sladerightbox {
    0% {
		display: none;
		transform: translate(-200px); 
    }
    99% {
        transform: translate(0px);
    }
    100% {
        display: block;
    }
}

.button-box>a{
	cursor:pointer;
	color: black;
	text-decoration: none;
	margin: inherit;
	vertical-align: inherit;
	font-size: inherit;
}
.button-box>a:hover{
	color: white;
}
#bb-decale{
	padding-right: 10px;
	border-right: 1px solid black;
	color: #543838;
}
#bb-decale:hover{
	color: white;
}


.Content-Box{
	background-attachment : inherit;
	display: block;
	margin-left: 210px;
	margin-top: 10px;
	margin-right: 10px;
	width: auto;
}

#Box-Of-Menu{
	display: block;
	margin: 10px 0px 10px 20px;
}





.Barrederecherche{
	overflow: hidden;
	margin-right: 5%;
	content: block;
	width: auto;
	background-color: RGB(255,255,255,0.7);
	padding: 2% 2% 2% 2%;
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
}

.Barrederechercheinput{
	width: 40%;
	Margin-left:5%;
}

.SortieBarrederecherche{
	display. block;
}


.PresentationSub {
    overflow: hidden;
	margin-right: 5%;
	content: block;
	width: auto;
	background-color: RGB(255,255,255,0.7);
	padding: 2% 2% 2% 2%;
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
}
.LastAddedPresentation{
	width: 100%;
}
.presentationText{
	text-align: justify;
	width: 58%;
	padding: 0px;
	margin: 0px;
}
.presentationImage{
	width: 40%;
	margin: 0px;
	padding: 0px;
}
#LeftAlign {
    float: left;
}
#RightAlign {
    float: right;
}   
#ImagePresentation{
	width: 100%;
	padding: inherit;
	cursor: auto;
}



#Box-Of-AlphaClassification{
	display: none;
	padding: 20px;
	font-size: 30px;
	margin-top: -30px;
}
#Box-Of-AlphaClassification>button{
	width: 150px;
	height: 150px;
	margin: 10px 0px 10px 20px;
	font-size: 50px;
	border: 3px solid black;
	border-radius: 7px;
	background: rgba(0, 0, 0, 0.50);
	color: white;
	box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
#Box-Of-AlphaClassification>button:hover{
	transform: scale(1.01);
	background: rgba(50, 50, 50, 0.50);
}

#Box-Of-ClassClassification{
	display: none;
	padding: 20px;
	font-size: 30px;
	margin-top: -30px;
}
#Box-Of-ClassClassification>button{
	width: 500px;
	height: 150px;
	margin: 10px 0px 10px 20px;
	font-size: 25px;
	border: 3px solid black;
	border-radius: 7px;
	background: rgba(0, 0, 0, 0.50);
	color: white;
	box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
#Box-Of-ClassClassification>button:hover{
	transform: scale(1.01);
	background: rgba(50, 50, 50, 0.50);
}


#Box-Of-Gemmes{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Rare{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Fossiles{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Mineraux{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Metaux{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Roches{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Autres{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Nonclasses{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Showroom{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Tableur{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Infostiers{
	display: none;
	margin: 10px 0px 10px 20px;
}
#Box-Of-Canvas{
	display: none;
	margin: 10px 0px 10px 20px;

}
@media (min-width:721px)  {
#Box-Of-Canvas img{width: 200px; height: 150px; }
}
@media (min-width:481px) and (max-width:720px)  {
#Box-Of-Canvas img{width: 150px; height: 112px; }
}
@media (min-width:0px) and (max-width:480px)  {
#Box-Of-Canvas img{width: 100px; height: 75px; }
}



#imagefondtableau {
	cursor:initial;
	display: block;
	width: 90%;
	margin: 0px 0px 0px 20px;
}
#enssembledepoints {
	width: 100%;
	
}
.pointtab{
	position: absolute;
	top:0;
	left:0;
	background-color: black;
	width: 12px;
	height: 12px;
	border-radius: 6px;
	cursor: initial;
	opacity: 0.75;
	box-shadow: none;
}
.pointtab>p{background-color: RGB(0, 0, 0, 0);}
.paginationpointtab{
	position: absolute;
	top: -30px;
	Left: -50px;
	font: inherit;
	font-size: 9px;
	border: none;
	margin: 0px,0px,0px,0px;
	cursor:initial;
	transform: rotate(-20deg);
	cursor: initial;
	pointer-events: none;
}.paginationpointtab:hover{
    pointer-events: none;
}


#PanneauSurvol{
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px;
	text-align : left;
	background-color: white;
	border: 1px solid #000000;
	border-radius: 3px;
	font-size: 1em;
	display: none;
	pointer-events: none;
}
#textelegendetableau{
	width: 400px;
	font-size: 20px;
}





	

@media (min-width:1201px) {
	.header{ font-size: 45px;} h1{ font-size: 37px; } h2{ font-size: 25px; } h3{ font-size: 19px; } a{ font-size: 28px;vertical-align: 27px;margin-left: 36px; } img{width: 110px; } #Box-Of-ClassClassification>button{ width: 140px; height: 100px; font-size: 50px; } #Box-Of-ClassClassification>button{ width: 500px; height: 130px; font-size: 25px; }
	#textelegendetableau{width: 400px;font-size: 20px;}
	.pictogram{width: 30px;}
}
@media (min-width:1025px) and (max-width:1200px){
	.header{ font-size: 40px;} h1{ font-size: 34px; } h2{ font-size: 23px; } h3{ font-size: 18px; } a{ font-size: 26px;vertical-align: 24px;margin-left: 35px; } img{width: 100px; } #Box-Of-AlphaClassification>button{ width: 130px; height: 130px; font-size: 50px; } #Box-Of-ClassClassification>button{ width: 500px; height: 130px; font-size: 25px; }
	#textelegendetableau{width: 400px;font-size: 20px;}
	.pictogram{width: 30px;}
}
@media (min-width:901px) and (max-width:1024px){
	.header{ font-size: 35px;} h1{ font-size: 31px; } h2{ font-size: 22px; } h3{ font-size: 17px; } a{ font-size: 24px;vertical-align: 21px;margin-left: 34px; } img{width: 90px; } #Box-Of-AlphaClassification>button{	width: 120px; height: 120px; font-size: 40px; } #Box-Of-ClassClassification>button{ width: 500px; height: 120px; font-size: 25px; }
	#textelegendetableau{width: 400px;font-size: 15px;}
	.pictogram{width: 20px;}
}
@media (min-width:769px) and (max-width:900px){
	.header{ font-size: 30px;} h1{ font-size: 28px; } h2{ font-size: 20px; } h3{ font-size: 16px; } a{ font-size: 22px;vertical-align: 19px;margin-left: 32px; } img{width: 80px; } #Box-Of-AlphaClassification>button{	width: 110px; height: 110px; font-size: 40px; } #Box-Of-ClassClassification>button{ width: 500px; height: 110px; font-size: 25px; }
	#textelegendetableau{width: 400px;font-size: 15px;}
	.pictogram{width: 20px;}
}
@media (min-width:721px) and (max-width:768px)  {
	.header{ font-size: 25px;} h1{ font-size: 25px; } h2{ font-size: 18px; } h3{ font-size: 15px; } a{ font-size: 20px;vertical-align: 16px;margin-left: 27px; } img{width: 70px; } #Box-Of-AlphaClassification>button{	width: 100px; height: 100px; font-size: 40px; } #Box-Of-ClassClassification>button{ width: 300px; height: 100px; font-size: 15px; }
	#textelegendetableau{width: 400px;font-size: 15px;}
	.pictogram{width: 20px;}
}
@media (min-width:481px) and (max-width:720px)  {
	.header{ font-size: 20px;} h1{ font-size: 22px; } h2{ font-size: 16px; } h3{ font-size: 14px; } a{ font-size: 19px;vertical-align: 13px;margin-left: 22px; } img{width: 60px; } #Box-Of-AlphaClassification>button{	width: 90px; height: 90px; font-size: 30px; } #Box-Of-ClassClassification>button{ width: 300px; height: 90px; font-size: 15px; }
	#textelegendetableau{width: 200px;font-size: 10px;}
	.pictogram{width: 15px;}
}
@media (min-width:321px) and (max-width:480px)  {
	.header{ font-size: 15px;} h1{ font-size: 19px; } h2{ font-size: 14px; } h3{ font-size: 13px; } a{ font-size: 17px;vertical-align: 10px;margin-left: 10px; } img{width: 50px; } #Box-Of-AlphaClassification>button{	width: 80px; height: 80px; font-size: 30px; } #Box-Of-ClassClassification>button{ width: 300px; height: 80px; font-size: 15px; }
	#textelegendetableau{width: 200px;font-size: 10px;}
	.pictogram{width: 15px;}
}
@media (min-width:0px) and (max-width:320px)  {
	.header{ font-size: 10px;} h1{ font-size: 164px; } h2{ font-size: 12px; } h3{ font-size: 11px; } a{ font-size: 15px;vertical-align: 5px;margin-left: 5px; } img{width: 45px; } #Box-Of-AlphaClassification>button{	width: 70px; height: 70px; font-size: 30px; } #Box-Of-ClassClassification>button{ width: 300px; height: 70px; font-size: 15px; }
	#textelegendetableau{width: 200px;font-size: 10px;}
	.pictogram{width: 15px;}
}



@media (min-height:600px) {.button-box{font-size: 17px; padding-top: 90px;}}
@media (min-height:510px) and (max-height:599px){.button-box{font-size: 16px; padding-top: 90px;}}
@media (min-height:460px) and (max-height:509px){.button-box{font-size: 14px; padding-top: 90px;}}
@media (min-height:385px) and (max-height:459px){.button-box{font-size: 11px; padding-top: 90px;}}
@media (min-height:340px) and (max-height:384px){.button-box{font-size: 9px; padding-top: 90px;}}
@media (min-height:0px) and (max-height:339px){.button-box{font-size: 7px; padding-top: 90px;}}




@media screen and (orientation: portrait){
	.header{
		padding: 10px 0px 0px 75px;
	}
	.button-box{
		display: none;
		background-color: RGB(193, 159, 131, 0.90);
		width: 140px;
		font-size: 14px;
	}
	.Content-Box{
		margin-left: 10px;
	}
	#Box-Of-AlphaClassification>button{
		margin: 9px 0px 9px 9px;
	}
	p{
		margin: 0px 18px 5px 9px;
	}
	.paginationpointtab{
		top: -9em;
		Left: -7em;
	}
	.presentationText{
		text-align: justify;
		width: 80%;
		padding: 0px;
		margin: 0px;
		margin-left: 6%;
	}
	.presentationImage{
		width: 70%;
		max-width: 350px;
		margin: 15px 0px 15px 0px;
		padding: 0px;
		margin-left: 13%;
	}
	#LeftAlign {
		float: inherit;
	}
	#RightAlign {
		float: inherit;
	}   
	#bb-decale{
		padding-right: 5px;
	}
}
@media screen and (orientation: landscape) {
	.button-box{
		-webkit-animation: sladerightbox 500ms;
		display: block;
		background-color: RGB(193, 159, 131, 0.70);
	}
}



#Gototopbtn{
	border: 2px solid black;
	background-color: RGB(193, 159, 131, 0.50);
	margin-top: 6em;
	width: 10em;
	height: 3em;
	display: block;
	margin-left: auto;
	margin-right: auto;
	font-size: 15px;
}
#Gototopbtn:hover{
	transform: scale(1.03);
	box-shadow: 10px 5px 5px grey;
	cursor: pointer;
}






#panel1  {display: none; -webkit-animation: 1.5s ouvrirpanneau;}		
#panel2  {display: none; -webkit-animation: 1.5s ouvrirpanneau;}		
#panel3  {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel4  {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel5  {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel6  {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel7  {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel8  {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel9  {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel10 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel11 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel12 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel13 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel14 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel15 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel16 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel17 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel18 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel19 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel20 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel21 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel22 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel23 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel24 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel25 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel26 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel27 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel28 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel29 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel30 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel31 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel32 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel33 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panel34 {display: none; -webkit-animation: 1.5s ouvrirpanneau;}

#panelNat {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelSulu {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelHal {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelOxy {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelCar {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelBor {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelSula {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelPho {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelSil {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelOrg {display: none; -webkit-animation: 1.5s ouvrirpanneau;}
#panelHC {display: none; -webkit-animation: 1.5s ouvrirpanneau;}

@-webkit-keyframes ouvrirpanneau { from{transform: scaleY(0%);} to{transform: scaleY(100%);} };