/* CSS Document */

/**************************/
/* début structure grille */
/**************************/
.alfagrid {
	max-width: 1024px;
    position: relative;
    width: 100%;
}
.alfagrid:after{
	content:"";
	clear: both;
}
.alfagrid li {
	color: #000;
	float:left;
	margin: 0px;
    overflow: hidden;
	position:relative;
}

/* apparence produit */
.alfagrid li .image-wrapper,
.alfagrid li .image-persona{
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
}
.alfagrid li .image-persona { z-index: 0; }
.alfagrid li .image-persona.first { z-index: 2; }
.alfagrid li .image-wrapper { z-index: 1; }

.alfagrid article {
    bottom: 0;
    line-height: 1.25em;
    position: absolute;
    width: 100%;
    z-index: 1000;
}
.alfagrid article h4 {
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
	margin: 0px;
    padding: 0.8em 0.5em;
    width: 100%;
}
.alfagrid article  h4 span { font-weight: 300; }

.alfagrid article p {
	color: #fff;
	display: block;
	font-size: 16px;
    font-style: italic;
	margin: 0;
	max-height: 0;
	padding: 0 8% 0 8%;
	text-align: center;
	width: 100%;
	-webkit-transition: all 0.6s ease-out 0s;
	-moz-transition: all 0.6s ease-out 0s;
	transition: all 0.6s ease-out 0s;
}
.alfagrid li:hover article p { max-height: 12.5em; padding: 8% 8% 8% 8%; }

/* btn "En savoir plus" - grid */
.alfagrid p span {
    background-color: #fff;
    border: 1px solid #fff;
    color: #333;
    clear: both;
    display: inline-block;
    font-style: normal;
    margin-top: 1em;
    padding: 0.5em 1em;
    border-radius: 5px;
}
.alfagrid .bg-brown p span { color: #df8c53; }
.alfagrid .bg-blue p span { color: #4185cb; }
.alfagrid .bg-pink p span { color: #ff6a8f; }
.alfagrid .bg-purple p span { color: #8960b4; }
.alfagrid .bg-yellow p span { color: #ffc752; }
.alfagrid .bg-orange p span { color: #e75e41; }
.alfagrid .bg-green p span { color: #5eb384; }
.alfagrid p span:hover { background-color: transparent; color: #fff; }

/* couleur grille */
[data-color=bg-blue-gradient] { background: #2d5db6; background: radial-gradient(circle at 50% 50%,  #6193d0 10%,  #2d5db6 50%); }
[data-color=bg-pink-gradient] { background: #ff6a8f; background: radial-gradient(circle at 50% 50%,  #ff8cab 10%,  #ff6a8f 50%); }
[data-color=bg-purple-gradient] { background: #66449c; background: radial-gradient(circle at 50% 50%,  #8559b4 10%,  #66449c 50%); }
[data-color=bg-yellow-gradient] { background: #f0b136; background: radial-gradient(circle at 50% 50%,  #f4c447 10%,  #f0b136 50%); }
[data-color=bg-orange-gradient] { background: #eb523f; background: radial-gradient(circle at 50% 50%,  #ee624b 10%,  #eb523f 50%); }
[data-color=bg-green-gradient] { background: #5fb486; background: radial-gradient(circle at 50% 50%,  #7cc5a2 10%,  #5fb486 50%);	}

.bg-blue { background: #2d5db6; }
.bg-pink { background: #ff6a8f; }
.bg-purple { background: #66449c; }
.bg-yellow { background: #f0b136; }
.bg-orange { background: #eb523f; }
.bg-green { background: #5fb486; }

/* taille grille */
.alfagrid li { padding-bottom: 50.04%; width: 50%; }
.alfagrid .block-2x1, .alfagrid .block-2x2 { padding-bottom: 50%; width: 100%; }
.alfagrid .block-2x2 { padding-bottom: 100%; }

@media only screen and (min-width: 768px) {
	/* taille grille */
	.alfagrid li { padding-bottom: 25.04%; width: 25%; }
	.alfagrid .block-2x1, .alfagrid .block-2x2 { padding-bottom: 24.99%; width: 50%; }
	.alfagrid .block-2x2 { padding-bottom: 50.01%; }

	/* position grille */
	.alfagrid .margintop25 { margin-top: 25%; }
	.alfagrid .margintop-25 { margin-top: -25%; }

	.alfagrid .marginleft-25 { margin-left: -25%; }
	.alfagrid .marginleft25 { margin-left: 25%; }
	.alfagrid .marginleft50 { margin-left: 50%; }
}