#genre {}

#main_systematique_title_outer { overflow: hidden; background-color: #555555; }
#main_systematique_title_outer.fixed { position: fixed; z-index: 1000; top: 100px; left: 0; }
.main_systematique_title { overflow: hidden; padding: 10px 0; height: auto; }
#main_systematique_title_outer.fixed .main_systematique_title { padding: 4px 0; }
.main_systematique_title p { display: block; float: left; width: 86px; height: 86px; overflow: hidden; border-radius: 15px; }
.main_systematique_title p img { display: block; max-height: 100%; min-width: 100%; }
.main_systematique_title .right { display: block; padding: 0 0 0 20px; color: #FFFFFF; width: auto; overflow: hidden; }
.main_systematique_title h2 { display: block; margin: 0 0 5px 0; color: #EFEFEF; font-size: 180%; line-height: 160%; }
#main_systematique_title_outer.fixed  .main_systematique_title h2 { font-size: 140%; line-height: 120%; }

#systematique_pathway { display: block; padding: 10px 0 0 0; margin: 0; font-size: 80%; overflow: hidden; }
#systematique_pathway li { display: block; float: left; color: #EFEFEF; padding: 0 3px; }
#systematique_pathway li a { color: #EFEFEF; transition: all 0.5s ease; }
#systematique_pathway li a:hover { color: #80F880; }
#systematique_pathway li:last-child { display: none; }
#systematique_pathway li:nth-child(even) { font-size: 70%; padding-top: 2px; }

#systematique_submenu { display: block; overflow: hidden; float: right; font-size: 85%; padding: 0; margin: -34px 0 0 0; }
#main_systematique_title_outer.fixed #systematique_submenu { margin: -28px 0 0 0; }
#systematique_submenu li { display: block; float: left; margin: 0 5px; }
#systematique_submenu li a { display: block; padding: 4px 6px; color: #EFEFEF; border-bottom: 2px solid #555555; background-color: #555555; padding: 0 0 2px 0; transition: all 0.5s ease; }
#systematique_submenu li a:hover { color: #EFEFEF; border-bottom: 2px solid #EFEFEF; } 
#systematique_submenu li.current a, #systematique_submenu li.current a:hover { color: #00bb0e; border-bottom: 2px solid #00bb0e; } 

#genre_infos_outer { overflow: hidden; background-color: #EFEFEF; padding: 40px 0; margin-bottom: 40px; }
#genre_infos_left { float: left; width: 50%; padding: 0 10px 0 0; overflow: hidden; }
#genre_infos_right { float: left; width: 50%; padding: 0 0 0 10px; overflow: hidden; }

#systematique_stats { display: block; font-size: 90%; overflow: hidden; }
.systematique_stats_inner { display: block; width: 60%; float: left; overflow: hidden; }
.systematique_stats_innerleft { display: block; width: 50%; float: left; padding: 0 10px 0 0; }
.systematique_stats_innerright { display: block; width: 50%; float: left; padding: 0 0 0 10px; }
span.especesconnues { color: rgba(51,153,51,1); font-size: 180%; font-weight: bold; line-height: 120%; }
span.especesnonconnues { color: rgba(51,255,51,1); font-size: 180%; font-weight: bold; line-height: 120%; }

p.synonymie { margin-top: 10px; font-size: 80%; }
p.synonymie b { display: block; }

#systematique_databases { display: block; margin-top: 20px; }
#systematique_databases ul { display: block; margin-top: 5px; padding: 0; }
#systematique_databases ul li { display: inline-block; margin: 0 4px; }
#systematique_databases ul li a { display: block; padding: 2px; border-radius: 3px; border: 1px solid #EFEFEF; transition: all 0.5s ease; }
#systematique_databases ul li a:hover { border: 1px solid #555555; }

#genre_body { margin-top: 40px; }
#genre_body h3 { display: block; width: 100%; font-size: 180%; line-height: 100%; color: #555555; padding-bottom: 6px; margin-bottom: 10px; text-align: right; }
.main_genre_part { margin-top: 30px; overflow: hidden; }
.main_genre_part h4 { display: block; width: 100%; color: #00bb0e; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid #CCCCCC; }
.main_genre_part .textcont { margin-left: 20px; -moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; column-count: 2; -moz-column-gap: 30px; -webkit-column-gap: 30px; -o-column-gap: 30px; column-gap: 30px; }
.main_genre_part .textcont.onecol { -moz-column-count: 1; -webkit-column-count: 1; -o-column-count: 1; column-count: 1; }

	/* illustrations */
	
	div.genre_description { margin-top: 40px; width: 100%; }
	div#genre_illustrations ul { display: table; width: 100%; text-align: center; clear: both; margin: 0 0 30px 0; }
	div#genre_illustrations ul li { display: table-cell; margin: 0 2px 0 2px; border: 1px solid #D8D8D8; vertical-align: top; text-align: center; background-color: #FFFFFF; opacity: 0.6; cursor: pointer; transition: all 0.6s ease; }
	div#genre_illustrations ul li:hover { background-color: #FFFFFF; border: 1px solid #4B5B26; opacity: 1; }
	div#genre_illustrations ul.t1 li { width: 50%; }
	div#genre_illustrations ul.t2 li { width: 48%; }
	div#genre_illustrations ul.t3 li { width: 30%; }
	div#genre_illustrations ul.t4 li { width: 25%; }
	div#genre_illustrations ul.t5 li { width: 20%; }
	div#genre_illustrations ul li img { display: block; height: 120px; width: auto; margin: 5px auto 5px auto; cursor: pointer; }
	div#genre_illustrations ul li img+span { display: block; opacity: 0; position: absolute; z-index: 100; width: 600px; font-size: 90%; line-height: 110%; padding: 10px; color: #606060; text-align: left; left: 180px; transition: all 0.6s ease; }
	div#genre_illustrations ul li img:hover+span, div#genre_illustrations ul li:hover img+span { display: block; opacity: 1; }

#genre_footer { font-size: 80%; text-align: right; margin-top: 20px; }

#genre_liste_especes { margin-top: 40px; margin-bottom: 40px; }
#genre_liste_especes h3 { display: block; width: 100%; font-size: 180%; line-height: 100%; color: #555555; padding-bottom: 6px; margin-bottom: 10px; text-align: right; }
#filter_alpha_inner { margin-left: 146px; }
#filter_photo_inner { margin-left: 226px; }

#listeespeces { overflow: hidden; min-height: auto!important; }
.elem_espece { float: left; width: 25%; padding: 5px; }
.elem_espece .elem_espece_inner { cursor: pointer; background-color: #FFFFFF; transition: all 0.5s ease; }
.elem_espece:hover .elem_espece_inner, .elem_espece.currentsp .elem_espece_inner { background-color: #00bb0e; }
.elem_espece.currentsp .elem_espece_inner a { color: #FFFFFF; }
.elem_espece_inner { display: table; border: 1px solid #CCCCCC; padding: 0 5px 0 0; overflow: hidden; }
.elem_espece_left { display: table-cell; width: 80px; height: 80px; overflow: hidden; float: left; }
.elem_espece_left img { width: 100%; min-height: 100%; height: auto; }
.elem_espece_left p.noimage { display: block; width: 100%; height: 100%; background-color: #EFEFEF; transition: all 0.5s ease; }
.elem_espece:hover .elem_espece_inner .elem_espece_left p.noimage { background-color: #00bb0e; }

.elem_espece_right { display: table-cell; width: 100%; overflow: hidden; padding: 0 0 5px 10px; vertical-align: middle; }

.elem_espece .elem_espece_right a, .elem_espece .elem_espece_right a:hover { color: #5D702F; transition: all 0.5s ease; }
.elem_espece:hover .elem_espece_right a, .elem_espece:hover .elem_espece_right a:hover { color: #FFFFFF; }

/* especes */

.detail_espece_inner { display: block; width: 100%; background-color: #FFFFFF; overflow: hidden; border: 1px solid #CCCCCC; margin-bottom: 40px; }

.detail_espece_header { display: block; width: 100%; max-width: 100%; overflow: hidden; background-color: #CCCCCC; position: relative; padding: 20px 20px 10px 20px; }
.detail_espece_header h3 { display: block; width: 100%; font-size: 160%; font-weight: bold; margin: 0!important; color: #555555; text-align: left!important; }
.detail_espece_header p { display: block; font-size: 90%; line-height: 100%; font-weight: normal; color: #555555; margin-bottom: 4px; margin-top: 6px; }
.close_detail_espece { display: block; position: absolute; right: 10px; top: 10px; color: #555555; }
.navespece { display: block; position: absolute; right: 10px; top: 40px; color: #555555; }
.navespece a { display: inline-block; padding: 0 4px;  }

.detail_espece_inner_body { display: block; width: 100%; padding: 20px 20px 10px 20px; -moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; column-count: 2; -moz-column-gap: 40px; -webkit-column-gap: 40px; -o-column-gap: 40px; column-gap: 40px; }
.detail_espece_inner_body h4 { display: block; color: #555555; font-size: 100%; font-weight: bold;  text-align: left; }
.detail_espece_inner_body div.textcont { display: block; font-size: 90%; text-align: left; margin: 0 0 10px 0; color: #000000; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.detail_espece_inner_body .especeillustrations img { display: block; max-width: 100%; float: right; height: auto; margin-left: 5px; margin-bottom: 5px; }
.detail_espece_inner_body .especegalerie { with: 100%; }
.detail_espece_inner_body .especegalerie a.nohidden { display: block; }
.detail_espece_inner_body .especegalerie a.hidden { display: none; }
.detail_espece_inner_body .especegalerie a img { max-width: 100%; height: auto; max-height: 300px; }
.detail_espece_inner_body .especeillustrations .bx-wrapper { border: none; box-shadow: none; }
.detail_espece_inner_body .especeillustrations .bx-default-pager { text-align: right; }
/*.detail_espece_inner_right .especeillustrations img { float: none; }*/
.detail_espece_inner_body #linkdatabase { display: none; padding: 10px 0 0 0; clear: both; position: absolute; bottom: 20px; right: 20px; }
.detail_espece_inner_body #linkdatabase li { display: inline-block; margin: 0 4px; }
.detail_espece_inner_body #linkdatabase li a { display: block; padding: 2px; width: 28px; height: 28px; border-radius: 3px; border: 1px solid #EFEFEF; transition: all 0.5s ease; }
.detail_espece_inner_body #linkdatabase li a:hover { border: 1px solid #555555; }
.detail_espece_inner_body #linkdatabase li a img { width: 24px; height: 24px; }

.detail_espece_inner_footer { width: 100%; overflow: hidden; padding: 10px 20px 20px 20px; }
.detail_espece_inner_footer p.date { width: 50%; float: left; text-align: left; font-size: 75%; padding-top: 20px; }
.detail_espece_inner_footer #linkdatabase { display: block; padding: 10px 0 0 0; overflow: hidden; width: auto; float: right; }
.detail_espece_inner_footer #linkdatabase li { display: inline-block; margin: 0 4px; }
.detail_espece_inner_footer #linkdatabase li a { display: block; padding: 2px; width: 28px; height: 28px; border-radius: 3px; border: 1px solid #EFEFEF; transition: all 0.5s ease; }
.detail_espece_inner_footer #linkdatabase li a:hover { border: 1px solid #555555; }
.detail_espece_inner_footer #linkdatabase li a img { width: 24px; height: 24px; }


.detail_espece_inner .end { display: block; clear: both; width: 100%; text-align: left; padding: 10px 20px 0 0; font-size: 80%; }

/* responsive */

@media screen and (min-width: 601px) {
	
	.detail_especes { display: none; }
	
}

@media screen and (max-width: 1150px) {
	
	#genre_liste_especes { padding: 40px 10px; }
	#ajaxbox { width: 65%; }
	
}

@media screen and (max-width: 1050px) {
	
	.main_systematique_title p { margin: 10px 0; }
	
}
	
@media screen and (max-width: 1000px) {

	.main_systematique_title h2 { margin: 0 0 5px 0; font-size: 140%; line-height: 100%; }
	#main_systematique_title_outer.fixed  .main_systematique_title h2 { font-size: 120%; line-height: 100%; }
	#systematique_submenu, #main_systematique_title_outer.fixed #systematique_submenu { margin: 0 0 10px 0; }
	
}

@media screen and (max-width: 950px) {
	
	.elem_taxo { width: 33.33%; }
	#ajaxbox { width: 90%; }
	.detail_espece_inner { overflow: auto!important; }
	.detail_espece_inner_left { width: 60%; }
	.detail_espece_inner_right { width: 40%; }

	
}

@media screen and (max-width: 800px) {

	#taxo_infos { font-size: 90%; }
	.systematique_stats_innerleft { width: 100%; float: none; padding: 0 10px 0 0; }
	.systematique_stats_innerright { width: 100%; float: none; padding: 0 0 0 10px; }
	span.especesnonconnues { font-size: 140%; line-height: 110%; }
	span.especesconnues { font-size: 140%; line-height: 110%; }
	
}

@media screen and (max-width: 700px) {
	
	#systematique_pathway li:nth-child(-n+4) { display: none; }
	
	.main_genre_part .textcont { margin-left: 0; -moz-column-count: 1; -webkit-column-count: 1; -o-column-count: 1; column-count: 1; }
	.elem_espece { width: 50%; }

	#listeespeces_inner { -moz-column-count: 3; -webkit-column-count: 3; -o-column-count: 3; column-count: 3; }

	.detail_espece_inner_left { width: 100%; float: none; padding:  10px; }
	.detail_espece_inner_right { width: 100%; float: none; height: auto; padding: 20px 10px 0 10px; text-align: center; }
	.detail_espece_inner_left div.textcont { font-size: 80%; }
	.detail_espece_inner_left .date { display: none!important; }

}

@media screen and (max-width: 600px) {
	
	#main_systematique_title_outer.fixed .main_systematique_title { padding: 4px 10px; }
	.main_systematique_title .right { padding: 0; color: #FFFFFF; }
	#systematique_pathway li:nth-child(-n+6) { display: none; }
	#systematique_pathway li:nth-child(even) { font-size: 30%; padding-top: 2px; }

	.systematique_stats_inner { width: 100%; }
	.systematique_stats_innerleft { width: 50%; float: left; padding: 0 10px 0 0; font-size: 90%; }
	.systematique_stats_innerright { width: 50%; float: left; padding: 0 0 0 10px; }

	
	.main_systematique_title h2 { font-size: 110%; }
	#main_systematique_title_outer.fixed  .main_systematique_title h2 { font-size: 110%; }
	.main_genre_part .textcont { font-size: 90%; }
	
	#genre_body h3, #genre_liste_especes h3 { font-size: 140%; }
	
	#filter_alpha_inner { margin-left: 0px; }
	#filter_photo_inner { margin-left: 0px; }
	
	#ajaxbox { width: 100%; min-height: 100vh;  /*position: absolute;*/ top: 0; margin: 0; transform: translateX(-50%) translateY(0); }
	.detail_espece_inner_body { padding: 20px 10px 0 10px; -moz-column-count: 1; -webkit-column-count: 1; -o-column-count: 1; column-count: 1; }
	.detail_espece_header { overflow: auto; }
	.detail_espece_header h3 { margin-top: 20px;  text-align: left; }
	.navespece { position: absolute; top: 10px; right: 50px; margin-bottom: 0; }

}

@media screen and (max-width: 560px) {
	
	#genre_liste_especes h3, #genre_body h3 { text-align: center; }

	#genre_liste_especes { padding: 0 5px; }
	
	.main_systematique_title p { display: none!important; }
	#systematique_submenu { font-size: 70%; }
	#listeespeces_inner { -moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; column-count: 2; }

	#genre_infos_left { float: none; width: 100%; padding: 0 0 20px 0; }
	#genre_infos_right { float: none; width: 100%; padding: 0; }
	
	#detail_especes { padding: 0 10px; }
	.detail_espece_header { padding: 20px 10px 10px 10px; }
	.detail_espece_inner_footer { padding: 10px 20px 20px 10px; }
	.detail_espece_inner_footer p.date { width: 100%; float: none; font-size: 70%; }


}

@media screen and (max-width: 500px) {
	
	.elem_espece { width: 100%; }

}