/*https://www.w3schools.com/howto/howto_css_flip_box.asp ?*/
/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */
.col_one { width: 100%; }
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_one,
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }

.cadre_icone_box_img {
    max-width: 32px;
    max-height: 32px;
}

/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip le_panel */
/*-=-=-=-=-=-=-=-=-=-=- */
@media screen and (min-width:320px) {
	.cadre_de_flipbox{ width: 320px; margin: 0 auto;  hoverflow: hidden;}

	.box1, .box2 {
		font-size:15px;
	}

	.le_panel .back, .le_panel.flip .back {
		/*display:none;*/
	}
}

@media screen and (min-width:760px) {
	.cadre_de_flipbox{ width: 740px; margin: 0 auto;  hoverflow: hidden;}

	.box1, .box2 {
		font-size:12px;
	}

	.le_panel .back, .le_panel.flip .back {
		display:block;
	}

	.le_panel .front {
		-webkit-transform: rotateX(0deg) rotateY(0deg);
		   -moz-transform: rotateX(0deg) rotateY(0deg);
		-webkit-transform-style: preserve-3d;
		   -moz-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
		   -moz-backface-visibility: hidden;
		-webkit-transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
		   -moz-transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
			-ms-transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
			 -o-transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
				transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
	}

	.le_panel .back {
		-webkit-transform: rotateY(-180deg);
		   -moz-transform: rotateY(-180deg);
		-webkit-transform-style: preserve-3d;
		   -moz-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
		   -moz-backface-visibility: hidden;
		-webkit-transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
		   -moz-transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
			-ms-transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
			 -o-transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
				transition: all 1.9s cubic-bezier(0.2, 0.85, 0.4, 1.275) ;
	}
	.le_panel.flip .front {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
	}
	.le_panel.flip .back {
		-webkit-transform: rotateX(0deg) rotateY(0deg);
		-moz-transform: rotateX(0deg) rotateY(0deg);
	}
}

@media screen and (min-width:1100px) {
	.cadre_de_flipbox{ width: 1100px; margin: 0 auto;  hoverflow: hidden;}

	.box1, .box2 {
		font-size:15px;
	}
}

.le_panel {
	margin: 0 auto;
	/*
	height: 150px;
	*/
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
}

.le_panel .front,
.le_panel .back {
	text-align: center;
}
	
.le_panel .front {
	height: inherit;
	position: absolute;
	width:100%;
	/*
	height:150px;
	*/
	top: 0;
	z-index: 900;
	text-align: center;
}

.le_panel .back {
	height: inherit;
	position: absolute;
	width:100%;
	/*
	height:150px;
	*/
	top: 0;
	z-index: 1000;
}
.le_panel.flip .front {
	z-index: 900;
}
.le_panel.flip .back {
	z-index: 1000;
}
.box1 {
	width: 100%;
	margin: 0 auto;
	padding: 20px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	cursor:pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden;
}

.box2 {
	width: 100%;
	margin: 0 auto;
	padding: 15px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden;
}

.cadre_icone_box {
	background-color: #333333;
    height: 64px;
    width: 64px;
    border-radius: 50%;
    background-clip: padding-box;
    padding-top:15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}