@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(@number:@number, @gutter:@gutter) { 
 & > * {
	  width: ~'calc(100% * 1 / @{number} - @{gutter})';
	}
	& > .flexitem-double {
		width: ~'calc(100% * 2 / @{number} - @{gutter})';
	}
	& > .flexitem-first {
		order: -1;
	}
	@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
		& > * {
			width: ~'calc(100% * 1 / 2 - @{gutter})';
		}
		& > .flexitem-double {
			width: ~'calc(100% - @{gutter})';
		}
	}
	@media (max-width: @tiny-screen) {
		& > * {
			width: ~'calc(100% - @{gutter})';
		}
		& > .flexitem-double {
			width: ~'calc(100% - @{gutter})';
		}
	}
}

.grid-6 {
	.grid(6);
}
*/

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

.grid-6 iconify-icon {
	font-size: 60px;
	color: #E78E14;
}

.grid-6 a {
	color: #3B68BB;
	text-decoration: none;
	padding: 10px;
	background-color: #F1F1F1;
	width: 43%;
	font-size: 25px;
	text-align: center;
	margin: 8px auto;
	border: 1px solid #DAD9D9;
	border-radius: 20px;
}

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

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

.bloc_visu_contenu .grid-6 a {
	width: 60%;
}

.bloc_liens_titre {
	display: block;
	margin: 10px 0;
}

.bloc_liens_description {
	font-size: 70%;
	color: #E78E14;
	font-style: italic;
}

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