@gutter: 16px;
@number: 4;

@tiny-screen: 480px;
@small-screen: 640px;

// grid styles for container wich has a .grid(n,g) class
// n = number of columns (default = 4)
// g = gutter value (default = 1rem)
// example : .grid-container { .grid(12, 10px); }

[class*="grid-"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -@gutter;
}

[class*="grid-"] > * {
	flex: 0 0 auto;
	display: block; /* IE fix */
	width: ~'calc(100% * 1 / @{number} - @{gutter})';
	margin-left: @gutter;
}

.grid-6 {
	margin-top: 30px;
}

.grid-6 img {
	max-width: 120px;
	float: left;
	margin-right: 10px;
}

.grid-6 iconify-icon {
	font-size: 180%;
}

.grid-6 a {
	color: #3B68BB;
	text-decoration: none;
	padding: 10px;
	/* background-color: #EAEAEA; */
	width: 47%;
	text-align: left;
	margin: 8px auto;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
}

.grid-6 a > div > div {
	display: table;
}

@media only screen and (max-width: 680px), only screen and (max-device-width: 680px) {
	.grid-6 a {
		width: 90%;
	}

	.grid-6 a > div > div {
		font-size: 11px;
	}
}

.grid-6 a:hover {
	box-shadow: 2px 2px 15px #CCCCCC;
}

.bloc_liens_titre {
	display: block;
	color: #02540C;
	font-size: 150%;
	font-weight: bold;
}

.bloc_saison_episode {
	color: #000000;
	font-style: italic;
	display: inline-block;
	margin: 15px 0;
}

.bloc_dernier_episode_vu {
	color: #5BA200;
	display: block;
	margin-top: 10px;
	/* border: 1px solid; */
}

.bouton_opacity {
	opacity: 0.6;
	border: #FF7979 solid 1px !important;
	background-color: #FFF0F0 !important;
}

.div_series_plateforme {
	float: right;
	margin-top: 15px;
}

.div_series_plateforme img {
	max-width: 60px;
}

.saison_finie,
.div_series_decompte_episodes {
	display: inline-block;
	margin-left: -2px;
}

.div_series_qui {
	margin-top: 20px;
	color: #82ADE2;
}