/**************************************/
/* LISTE TOTALE DES ANIMAUX PAR ANNEE */
/**************************************/

/* VERSION : 2.00 */

@font-face {
	font-family: "Cera";
	font-display: fallback;
	src: url('../../../fonts/Cera Pro/CeraPro-Regular.ttf');
}

body
{
	background-color:white;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	
	font-family:Cera, Arial, Helvetica, sans-serif;
}

a{outline: none;}
:focus{-moz-outline-style: none;}

a:link {text-decoration:none;}
a:active {text-decoration:none;} 
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}

.image-FB-hide
{
	display:none;
}

/**************/
/* CADRE MENU */
/**************/

#CADRE-MENU
{
	background:rgb(20,34,37);
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	padding:5px 0px 5px 0px;
}

@media all and (max-width: 480px) /* Mobile */
{
    #CADRE-MENU
	{
		width:360px;
		margin:0px auto 0px auto;
		padding:5px 0px 5px 0px;
    }
}

/*************************/
/* CADRE CENTRAL DU MENU */
/*************************/

#CADRE-CENTRAL-MENU
{
	background:rgb(20,34,37);
	display:flex;
	justify-content:center;
}

@media all and (max-width: 480px) /* Mobile */
{
    #CADRE-CENTRAL-MENU
	{
		width:360px;
		display:flex;
		margin:0px auto 0px auto;
		padding:1px 0px 1px 0px;
    }
}

.cadre-menu-ani
{
	display:flex;
	justify-content:center;
}

.sous-menu-ani
{
	display:flex;
	align-items:center;
}

.titres-menu
{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
	margin:0px 0px 0px 10px;
	padding:0px 12px 0px 12px;
}

.ligne-titre1
{
	display:flex;
}

@media all and (max-width: 480px) /* Mobile */
{
    .ligne-titre1
	{
		flex-direction:column;
		align-items:center;
    }
}

.titre1
{	
	font-size:48px;
	color:white;
	text-shadow:1px 1px 1px silver;
	font-variant:small-caps;
	font-weight:bold;
}

@media all and (max-width: 480px) /* Mobile */
{
    .titre1
	{
		font-size:30px;
    }
}

.titre2
{	
	font-size:20px;
	color:orange;
	font-variant:small-caps;
	font-weight:normal;
}

@media all and (max-width: 480px) /* Mobile */
{
    .titre2
	{
		font-size:16px;
		text-align:center;
    }
}

.cadre-year-selected
{
	background:white;
	height:100px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:5px 10px 5px 10px;
	font-size:45px;
	color:orange;
	font-variant:small-caps;
	font-weight:bold;
	text-align:center;
}

/* BOUTON POUR CHANGER D'ANNEE */

.menu-choix-year
{
	background:black;
	display:flex;
	justify-content:center;
	font-size:18px;
	color:white;
	font-variant:small-caps;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-align:center;
	cursor:pointer;
}

.menu-choix-year:hover
{
	color:orange;
}

/* CADRE CHOIX ANNEE COULISSANT */

.menu-nav-year-close
{
	display:flex;
	margin:0px 0px 0px auto;
	cursor:pointer;
	width:50px;
}

.menu-label-year
{
	-webkit-appearance: none;
	-moz-appearance: none;
	margin:0px 0px 0px 0px;
	padding:6px 10px 6px 10px;
	border:1px solid white;
	cursor:pointer;
	z-index:4;
}

.menu-cb-year
{
	-webkit-appearance: none;
	-moz-appearance: none;
	margin:0px 0px 0px 0px;
	cursor:pointer;
	z-index:4;
}

.menu-nav-year
{
	position:relative;
	background:rgb(20,34,37);
	display:flex;
	flex-direction:column;
	padding:5px;
	width:900px;
	height:640px;
	overflow-y:scroll;
	border-top:3px solid black;
	border-bottom:3px solid black;
	border-right:3px solid black;
	z-index:1000;                  
	position: fixed;                
	top:0px;                       
	left:0px;
	transform: translateX(-100%);
	transition: transform .3s linear;
}

@media all and (max-width: 800px) /* Tablette */
{
    .menu-nav-year
	{
		width:600px;
    }
}

@media all and (max-width: 480px) /* Mobile */
{
    .menu-nav-year
	{
		width:320px;
		height:490px;
    }
}

.menu-cb-year:checked ~ .menu-nav-year
{
	transform: translateX(0);
}

.menu-cote-year {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.cadreChoixListeYear
{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	margin:0px auto 0px auto;
}

.cadre-annee
{
	width:130px;
	padding:5px;
}

.nom-annee
{
	font-size:24px;
	color:white;
	text-align:center;
	cursor:pointer;
}

.nom-annee:hover
{
	color:orange;
}

.nom-annee-selected
{
	font-size:24px;
	color:orange;
	text-align:center;
}

/**********************************************************/
/* CADRE DROIT AVEC LES BOUTONS TOUT/COLLECTION/RECHERCHE */
/**********************************************************/

#CADRE-BOUTONS-LISTE
{
	display:flex;
	justify-content:center;
	margin:5px 0px 0px 50px;
	align-items:center;
}

@media all and (max-width: 800px) /* Tablette */
{
    #CADRE-BOUTONS-LISTE
    {
		flex-direction:column;
		margin:15px 0px 0px 0px;
    }
}

@media all and (max-width: 480px) /* Mobile */
{
    #CADRE-BOUTONS-LISTE
    {
		flex-direction:column;
		margin:15px 0px 0px 0px;
    }
}

/* BOUTONS */

.cadreBouton
{
	display:flex;
	justify-content:center;
	align-items:center;
}

.BoutonALL
{
	width:150px;
	margin:0px 10px 5px 10px;
	padding:5px 5px 5px 5px;
	border:3px solid white;
	border-radius:4px;
	font-size:24px;
	color:white;
	text-shadow:1px 1px 1px white;
	font-variant:small-caps;
	text-align:center;
	transition: all 0.5s ease;
}

.BoutonALL:hover
{
	background:white;
	color:black;
	text-shadow:1px 1px 1px black;
	opacity:0.8;
}

.BoutonALL-Selected
{
	background:white;
	width:150px;
	margin:0px 10px 5px 10px;
	padding:5px 5px 5px 5px;
	border:3px solid white;
	border-radius:4px;
	font-size:24px;
	color:color;
	text-shadow:1px 1px 1px black;
	font-variant:small-caps;
	text-align:center;
}

.NbAniALL
{
	font-size:14px;
	text-shadow:none;
}

.BoutonALL-C
{
	width:150px;
	margin:0px 10px 5px 10px;
	padding:5px 5px 5px 5px;
	border:3px solid rgb(40,210,91);
	border-radius:4px;
	font-size:24px;
	color:rgb(40,210,91);
	text-shadow:1px 1px 1px rgb(40,210,91);
	font-variant:small-caps;
	text-align:center;
	transition: all 0.5s ease;
}

.BoutonALL-C:hover
{
	background:rgb(40,210,91);
	color:black;
	text-shadow:1px 1px 1px black;
	opacity:0.8;
}

.BoutonALL-C-Selected
{
	background:rgb(40,210,91);
	width:150px;
	margin:0px 10px 5px 10px;
	padding:5px 5px 5px 5px;
	border:3px solid rgb(40,210,91);
	border-radius:4px;
	font-size:24px;
	color:black;
	text-shadow:1px 1px 1px black;
	font-variant:small-caps;
	text-align:center;
}

.NbAniALL-C
{
	font-size:14px;
	text-shadow:none;
}

.BoutonALL-R
{
	width:150px;
	margin:0px 10px 5px 10px;
	padding:5px 5px 5px 5px;
	border:3px solid rgb(244,172,74);
	border-radius:4px;
	font-size:24px;
	color:rgb(244,172,74);
	text-shadow:1px 1px 1px rgb(244,172,74);
	font-variant:small-caps;
	text-align:center;
	transition: all 0.5s ease;
}

.BoutonALL-R:hover
{
	background:rgb(244,172,74);
	color:black;
	text-shadow:1px 1px 1px black;
	opacity:0.8;
}

.BoutonALL-R-Selected
{
	background:rgb(244,172,74);
	width:150px;
	margin:0px 10px 5px 10px;
	padding:5px 5px 5px 5px;
	border:3px solid rgb(244,172,74);
	border-radius:4px;
	font-size:24px;
	color:black;
	text-shadow:1px 1px 1px black;
	font-variant:small-caps;
	text-align:center;
}

.NbAniALL-R
{
	font-size:14px;
	text-shadow:none;
}

.image-complete
{
	margin:0px auto 0px auto;
}

.collection-complete
{
	font-size:14px;
	font-variant:small-caps;
	font-weight:bold;
	color:rgb(122,192,67);
	text-align:center;
}

/*******************/
/* PAGE PRINCIPALE */
/*******************/

#MAIN_PAGE
{
	display:flex;
	justify-content:center;
}

#PAGE
{
	width:1150px;
	display:flex;
	flex-direction:column;
	margin:20px 0px 0px 0px;
	padding:20px 0px 20px 0px;
	border:1px solid rgb(205,205,205);
	box-shadow:5px 5px 5px rgb(225,225,225);
}

@media all and (max-width: 480px) /* Mobile */
{
    #PAGE
    {
		width:360px;
		border:none;
		box-shadow:none;
    }
}

/*********************/
/* CADRE DES ANIMAUX */
/*********************/

#CADRE-PHOTOS
{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin:40px auto 0px auto;
}

/* Grandes photos et petites photos*/
/* Infos animal sous la grande/petite photo */
/* Voir view/common/CSS/listes-minifig-animaux.css */