/* CODE PANEL 1 */

.padback{
font-size:14px;
padding:20px;
text-align:center;
margin-top:50px;
}


.ffaf{
    background: #ffffff none repeat scroll 0 0;
    color: #333333;
    display: block;
    font-family: "Montserrat-regular",sans-serif;
    font-size: 14px;
    height: 75px;
    line-height: 14px;
    text-decoration: none;
    text-shadow: none;
    transition: all 0.3s ease 0s;
    width: 240px;
	margin-top:25px;
	text-align:left;
}

.pdf{
float:left;
}

.pdf img{
padding-top:10px;
padding-left:8px;

}

.ffaf:hover .bt-ffaf{

	color:#ffffff;
	width:170px;

}
.ffaf:hover{
	height:75px;
    transition: all 0.3s ease 0s;
	background: #333333;
	border:1px solid #ffffff;
}


.bt-ffaf{
	display: block;
    float: left;
    font-weight: bold;
    height: 65px;
	color:#333333;
    padding: 10px;
	width:172px;

}



.padbacklink{
display:block;
margin-top:20px;
color:#d5d5d5;
font-size:12px;
font-style:italic;
}

.padbacklink:hover{
color:#ffffff;
}

.marque{
text-transform:uppercase;
font-size:18px;
}


	.panel {
		float: left;
		width: 280px;
		height: 280px;
		margin: 40px 40px 5px;
		position: relative;
		font-size: .8em;

		-webkit-perspective: 600px;
		-moz-perspective: 600px;
						perspective: 600px;
	}
	/* -- make sure to declare a default for every property that you want animated -- */
	/* -- general styles, including Y axis rotation -- */
	
	.panel .front {
	border:none;
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 900;
		width: inherit;
		height: inherit;
		/*border: 1px solid #ccc;*/
		background: #ffffff;
		text-align: center;
		box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1);

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}
	
	.panel.flip .front {
		z-index: 900;
		border-color: #eee;
		background: #333;
		box-shadow: 0 15px 50px rgba(0,0,0,0.2);

		-webkit-transform: rotateY(180deg);
			 -moz-transform: rotateY(180deg);
						transform: rotateY(180deg);
	}

	.panel .back{
		border:none;
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 800;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		background: #333;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.6);

		-webkit-transform: rotateY(-180deg);
			 -moz-transform: rotateY(-179deg); /* setting to 180 causes an unnatural-looking half-flip */
						transform: rotateY(-179deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}

	.panel.flip .back {
		z-index: 1000;
		background: #333333;
		color:#ffffff;

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		box-shadow: 0 15px 50px rgba(0,0,0,0.2);
	}
	
	

/* CODE PANEL 2 */
	.panel2 {
		float: left;
		width: 600px;
		height: 280px;
		margin: 40px 40px 5px;
		position: relative;
		font-size: .8em;

		-webkit-perspective: 600px;
		-moz-perspective: 600px;
						perspective: 600px;
	}
	/* -- make sure to declare a default for every property that you want animated -- */
	/* -- general styles, including Y axis rotation -- */
	
	.panel2 .front {
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 900;
		width: inherit;
		height: inherit;
		/*border: 1px solid #ccc;*/
		background: #ffffff;
		text-align: center;
		box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1);

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}
	
	.panel2.flip .front {
		z-index: 900;
		border-color: #eee;
		background: #333;
		box-shadow: 0 15px 50px rgba(0,0,0,0.2);

		-webkit-transform: rotateX(180deg);
			 -moz-transform: rotateX(180deg);
						transform: rotateX(180deg);
	}

	.panel2 .back{
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 800;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		background: #333;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.6);

		-webkit-transform: rotateX(-180deg);
			 -moz-transform: rotateX(-179deg); /* setting to 180 causes an unnatural-looking half-flip */
						transform: rotateX(-179deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}

	.panel2.flip .back {
		z-index: 1000;
		background: #333333;
		color:#ffffff;

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		box-shadow: 0 15px 50px rgba(0,0,0,0.2);
	}
	
	.espacement{
	margin-left:150px;
	}
	
	.espacement2{
	margin-top:70px;
	}
	
	.espacement3{
	margin-top:170px;
	}
	

@media only screen and (max-width: 1024px){

	.espacement{
	margin-left:5%;
	}
	
	.espacement2{
	margin-left:5%;
	}
	
	.espacement3{
	margin-left:5%;
	}
	
	.panel{
	margin: 40px 5% 5px;
	}
	
	.panel2{
	margin: 40px 5% 5px;
	width:280px;
	height:280px;
	}	
	
	.panel2 .front .pad img{
	padding-top:70px;
	}
	

}