.mag {
	border: 1px solid #FFF;
	border-radius: 4px;
	padding: 4px;

	cursor: pointer;
}

.mag:hover,
.mag.current {
	border-color: #9cc31e;
}

.mag.disabled {
	filter: grayscale(80%);
	opacity: 0.7;
}



.mag .check {
	color: #9cc31e;
	padding-top: 10px;
	display: flex;
	justify-content: space-between;
}

.mag .check span {
	display: inline-block;
	border: 1px solid #9cc31e;
	border-radius: 16px;
	margin-right: 5px;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.mag .check span em {
	display: inline-block;
	margin: 3px;
	width: 10px;
	height: 10px;
	border-radius: 10px;
}

.mag:hover .check span em,
.mag.current .check span em {
	background-color: #9cc31e;
}

.mag.disabled:hover .check span em {
	background-color: transparent;
}

.mag.disabled:hover {
	border: 1px solid #fff;
	cursor: default;
 }

.c8 {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

@media all and (max-width: 600px) {
	.flex .c8.m1 { width: calc( 50% - 25px); }
}

@media all and (min-width: 600px) and (max-width: 799px){
	.flex .c8.m1 { width: calc( 25% - 25px); }
}

@media all and (min-width: 800px) and (max-width: 1099px) {
	.flex .c8.m1 { width: calc(16.66666% - 25px); }
}

@media all and (min-width: 1100px){
	.flex .c8.m1 { width: calc(12% - 20px); }
}