/* entire container, keeps perspective */

.flip-container {
	perspective: 1000px;
}
	
.flip-container.hover .flipper, .flip-container.flip .flipper {
	transform: rotateY(180deg);
}

	
.flip-button{
	background-color: #575965;
	background-image: none;
	color: #F4F4F4;
	display: inline-block;
	border-radius: 2em;
	width: 48px;
	height: 48px;
	position: absolute;
	bottom:32px;	
	z-index: 1000; 
}
.flip-button img{
	position: absolute;
	bottom:12px;	
	left:12px;
}


@media only screen and (max-width:767px){
	
	/* centering on Mobile view */
.hold-button{
	
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: -16px;
}
.flip-button{
position: relative;
}


.row-cartes, .row-cartes .column{
	display: inline-block;
		width: 100%;
	}
.flip-container{
width:100%;
padding: 32px;
}


.row-cartes .col--gutter{
display:none;
}
.flip-container, .front, .back {
width: 100%;
min-height: 380px;
height: 380px;
text-align: center;
}

.front {
background-color: transparent;
	background-position: 50% 50%;
	background-size: contain;
	filter: none;
	background-repeat: no-repeat;
}
.clear{clear:both;}
 
.front img.mobile{
max-width: 300px;
}
#card-1 .front {
	background-image: none;
}
#card-2 .front {
	background-image: none;
}
#card-3 .front {
	background-image: none;
}
}




@media only screen and (max-width:425px){
.flip-container {
    padding: 2px;
 }
.row-cartes .column{
	min-width: 370px;
} 

 }

    
    
@media only screen and (min-width:768px){
	.front img.mobile{
		display: none;
	}
	
.row-cartes{

display: table;
table-layout: fixed;
width:100%;
margin-left: auto;
margin-right: auto;
background-color: transparent;
}


.row-cartes .column{
display: table-cell;
float: none;
vertical-align: top;
direction: ltr;
}


#card-1 .front {
	background-position: 3% 50%;
}
#card-2 .front {
  background-position: 50% 50%;
}
#card-3 .front {
  background-position: 98% 50%;
}


/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	text-align: center;	
	line-height: 1.35;
	
	color: #575965;
	background-color: transparent;
	background-position: 3% 50%;
	background-size: cover;
	filter: none;
	background-image: url(../img/e477201720a5dd76225739fa314969e9.jpg);
	background-repeat: no-repeat;
}


}


@media only screen and (min-width:768px) and (max-width:978px){


	
.row-cartes .col--gutter{
width:8px;
height:8px;
}
.row-cartes{
	width: 676px; 
	}
.flip-container, .front, .back {
	width: 243px;
	min-height: 470px;
	height: 470px;
}

.flip-button{
	left: 97px;
}
}

@media only screen and (min-width:979px){
	
.row-cartes .col--gutter{
width:16px;
height:16px;
}
.row-cartes{
	max-width: 980px; 
	}
.flip-container, .front, .back {
width: 309px;
min-height: 550px;
height: 550px;
}
.flip-button{
	left: 130px;
}
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}


/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered 
.flip-container:hover .flipper,	
	
	*/
	 .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}



/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}


@media only screen and (min-width:979px){

.front, .back {
	left: 4px;
}

}

/*.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}*/

/* flip speed goes here
transition: 0.6s;
	*/
.flipper {
z-index: 1;
	-webkit-transition: all 0.9s ease-in-out 0s,outline 0s;
-moz-transition: all 0.9s ease-in-out 0s,outline 0s;
-ms-transition: all 0.9s ease-in-out 0s,outline 0s;
-o-transition: all 0.9s ease-in-out 0s,outline 0s;
transition: all 0.9s ease-in-out 0s,outline 0s;

	transform-style: preserve-3d;
	position: relative;
}


/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	background-color: #f4f4f4;
	background-image: none;
	text-align: center;
}

.flipper .title{	
	text-transform: uppercase;
	position: absolute;
	top:48px;
	z-index: 1000;
	text-align: center;
	width:100%;
	color: #575965;
}

.back .text-content{
	color: #575965;
	font-size: 0.88em;
	padding: 16px;
	margin-top: 64px;		
	text-align: center;
	line-height: 1.7;
	font-size: 13px;
}
.back .text-content p{
	margin-bottom: 10px;
}
.back .text-content ul{
	margin-bottom: 16px;
	margin-left: 0px;
	padding-left: 16px;
	padding-right: 16px;
}

.back ul{
padding-left: 0px;
}

.back ul li{
line-height: 1.2em;
margin-top: 0.4em;
}