/********************************/
/* LISTE DES ANIMAUX PAR PIECES */
/********************************/

/* VERSION 2.01 */

@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;
	
	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;

	flex-direction:column;
	justify-content:center;
	flex-wrap:wrap;
	margin:0px auto 0px auto;
	padding:10px 0px 10px 0px;
}

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

/* CADRE INFOS */

#CADRE-INFO
{
	display:flex;
	width:1140px;
	justify-content:center;
	flex-wrap:wrap;
	margin:0px auto 0px auto;
	padding:20px 0px 10px 0px;
}

@media all and (max-width: 480px) /* Mobile */
{
    #CADRE-INFO
    {
		width:360px;
		padding:10px 0px 10px 0px;
		margin:0px 0px 0px 0px;
		border:none;
    }
}

.cadre-image-bouton
{
	display:flex;
	flex-direction:column;
	align-items:center;
}

@media all and (max-width: 480px) /* Mobile */
{
    .cadre-image-bouton
    {
		width:360px;
		justify-content:center;
		align-items:center;
		margin:0px 0px 20px 0px;
    }
}

.ImagePart
{
	background:white;
	padding:5px;
	border-radius:10px;
	border:1px solid silver;
	box-shadow:3px 3px 3px silver;
}

.btnVoirFiche
{
	background:#ffd503;
	margin:20px 0px 0px 0px;
	padding:10px 5px 10px 5px;
	border:2px solid black;
	border-radius:4px;
	box-shadow: 2px 2px 0px gray;
	transition: all .2s ease-in-out;
	
	font-size:16px;
	color:rgb(20,34,37);
	text-align:center;
	cursor:pointer;
}

.btnVoirFiche:hover
{
	transform: translateY(2px) translateX(2px);
	box-shadow: 0px 0px 0px black;
}

.TitrePiece
{
	display:flex;
	flex-direction:column;
	padding:10px 0px 0px 20px;
}

@media all and (max-width: 480px) /* Mobile */
{
    .TitrePiece
    {
		width:350px;
		padding:10px 0px 0px 0px;
    }
}

.RefPiece
{
	display:flex;
	font-size:26px;
	color:white;
	font-weight:bold;
}

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

.RefPieceLEGO
{
	display:flex;
	margin:5px 0px 10px 0px;
	align-items:center;
	font-size:18px;
	color:white;
}

.btnPickABrick
{
	margin:0px 0px 0px 20px;
	border:2px solid black;
	border-radius:4px;
	box-shadow: 2px 2px 0px gray;
	transition: all .2s ease-in-out;
}

.btnPickABrick:hover
{
	transform: translateY(2px) translateX(2px);
	box-shadow: 0px 0px 0px black;
}

.InfoPiece
{
	display:flex;
	align-items:center;
	padding:5px 0px 20px 0px;
	width:900px;
	font-size:18px;
	color:white;
	font-style:italic;
}

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

.idPart
{
	display:none;
}

.image-to-bricklink
{
	display:flex;
	justify-content:center;
	margin:-10px 0px 0px 20px;
	filter: grayscale(0) blur(0px);
	transition: all 0.5s ease;
}

.image-to-bricklink:hover
{
	transform: rotate(360deg);
}

.InfoPart
{
	margin:8px 0px 0px 0px;
	font-size:20px;
	color:white;
	font-weight:bold;
}

@media all and (max-width: 480px) /* Mobile */
{
    .InfoPart
    {
		margin:20px 0px 0px 0px;
		font-size:16px;
    }
}


.printTorso
{
	margin:0px 0px 0px 10px;
	font-size:18px;
	color:white;
}

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

.InfoLien
{
	font-size:20px;
	color:orange;
	font-weight:normal;
}

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

.InfoLien:hover
{
	text-decoration:underline;
}

.ligne-color
{
	display:flex;
	align-items:center;
}

.puceColor
{
	width:20px;
	height:20px;
	margin:0px 0px 0px 10px;
	border:1px solid white;

}

@media all and (max-width: 480px) /* Mobile */
{
    .puceColor
    {
		margin:12px 0px 0px 10px;
    }
}

/************/
/* SECTIONS */
/************/

.ligne-agrandir-reduire
{
	display:flex;
	align-items:center;
	margin:0px 5px 20px 5px;
	padding:10px 0px 0px 0px;
}

.image-developper-section
{
	margin:0px 30px 0px 20px;
	cursor:pointer;
}

@media all and (max-width: 480px) /* Mobile */
{
	.image-developper-section
	{
		margin:0px 20px 0px 5px;
	}
}

.titre-section
{
	display:flex;
}

@media all and (max-width: 480px) /* Mobile */
{
	.titre-section
	{
		display:flex;
		flex-direction:column;
	}
}

.nb-part
{
	display:none;
}

.titre-cadre
{
	display:flex;
	font-size:32px;
	color:white;
	font-variant:small-caps;
	font-weight:bold;
	text-shadow:1px 1px 1px silver;
}

@media all and (max-width: 480px) /* Mobile */
{
    .titre-cadre
	{
		font-size:16px;
		font-variant:normal;
		text-shadow:none;
		text-align:center;
    }
}

/*******************/
/* AUTRES COULEURS */
/*******************/

#CADRE-AUTRES-COULEURS
{
	background:rgb(20,34,37);
	display:flex;
	flex-direction:column;
	margin:0px auto 0px auto;
	border-bottom:2px solid rgb(20,34,37);
}

#btnAgrandirAutresCouleurs
{
	display:none;
}

#btnReduireAutresCouleurs
{
	display:flex;
}

#listeAutresCouleurs
{
	display:none;
	flex-wrap:wrap;
	margin:0px 0px 10px 0px;
}

@media all and (max-width: 480px) /* Mobile */
{
	#listeAutresCouleurs
    {
		justify-content:center;
    }
}

.cadrePartOtherColor
{
	display:flex;
	flex-direction:column;
	align-items:center;
}

.ImagePartOtherColor
{
	background:white;
	margin:5px;
	padding:5px;
	border:2px solid black;
	border-radius:4px;
	box-shadow: 2px 2px 0px gray;
	transition: all .2s ease-in-out;
}

.ImagePartOtherColor:hover
{
	transform: translateY(2px) translateX(2px);
	box-shadow: 0px 0px 0px black;
}

.ImagePartOtherColorSelect
{
	background:white;
	margin:5px;
	padding:5px;
	border-radius:4px;
	border:2px solid black;
	box-shadow:2px 2px 0px orange;
}

.txtPartOtherColor
{
	width:100px;
	font-size:10px;
	color:white;
	text-align:center;
}

.txtPartOtherColorSelect
{
	width:100px;
	font-size:10px;
	color:orange;
	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:20px auto 40px auto;
}

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