.animation_enchante{
position:relative;
height:660px;
background:url(../images/size_1_filet_1170.jpg) center center no-repeat;
margin:40px auto;
width: 760px; 
    font-style: italic;
}

.blockAnimation{
position:absolute	
}
.blockAnimation.top{
	top:0;
	left :50%;
	 -webkit-transform: translateX(-50%);	
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform:translateX(-50%);
}
.blockAnimation.bottom{
	bottom:0;
	left :50%;
	-webkit-transform: translateX(-50%);	
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform:translateX(-50%)	;
	
}
.blockAnimation.left{
	top:50%;
	left :0;
	-webkit-transform: translateY(-50%);	
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform:translateY(-50%)	;
}
.blockAnimation.right{
	top:50%;
	right :0;
	-webkit-transform: translateY(-50%);	
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform:translateY(-50%)	;
}
.animation_enchante .line{ 
	position:absolute;	
	background-color:#e1097e;	
	-webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
         -ms-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
             transition: all 0.3s ease;
	 
}
.animation_enchante .line.top{
	top:0;
	left :50%;
	-webkit-transform: translateX(-50%);	
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform:translateX(-50%);
	margin-top:85px; 
	width:2px;
	height:0%; 
}
.animation_enchante .line.bottom{
	bottom:0;
	left :50%;
	-webkit-transform: translateX(-50%);	
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform:translateX(-50%);
	margin-bottom:85px; 
	width:2px;
	height:0%;  
	direction: rtl;
}
.animation_enchante .line.left{
	top:50%;
	left :0;
	-webkit-transform: translateY(-50%);	
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform:translateY(-50%);
	margin-left:85px; 
	height:2px; 
	width:0%;  
}
.animation_enchante .line.right{
	top:50%;
	right :0;
	-webkit-transform: translateY(-50%);	
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform:translateY(-50%);
	margin-right:85px; 
	height:2px;
	width:0%; 
	direction: rtl;
}

.animation_enchante .line.longline{
	width:40%; 
}
.animation_enchante .line.verticallongline{
	height:25%; 
}


.rondContainer{
	position:relative;	
	width : 172px;
	height:172px;
}


.rondContainer .roundBorder{
	background-color:#adadad;
	border-radius:66px;
	position:absolute;
	width:132px;
	height:132px;
	top :50%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);	
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform:translate(-50%,-50%);
	-webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
         -ms-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
             transition: all 0.2s ease;
}
.rondContainer .roundIcone{
	background-color:#e1097e;
	width : 120px;
	height: 120px;
	position:absolute; 
	border-radius:60px;
	top :50%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);	
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.rondContainer .text{
	background-color:#ffffff;
	text-align:center;
	width:100%;
	position:absolute;
	bottom:-20px;
	-webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
         -ms-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
             transition: all 0.2s ease;
    font-size: 2.5rem;
    font-style: italic;
}

.animation_enchante .textExplication{
	position : absolute;
	top : 50%;
	left : 50%;
	-webkit-transform: translate(-50%,-50%);	
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform:translate(-50%,-50%);
	display:none;
	width:200px; 
	height:60px;
	background-color:#fff;
	line-height: 2.6rem;
	font-size: 2.1rem;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-style: normal;
	text-transform: uppercase;
}
.animation_enchante .textExplication.first{
	display:block;
}
.animation_enchante .textExplication span{
	position:absolute;
	top :50%;
	left : 50%;
	-webkit-transform: translate(-50%,-50%);	
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform:translate(-50%,-50%)
	margin:0;
	padding:0 ;
	width:100%
}

.rondContainer.hover .roundIcone{
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
}
.rondContainer.hover .roundBorder{
	width:100%;
	height:100%;
	border-radius:50%;
	opacity:0.5;
}
.rondContainer.hover .text{
	bottom:-40px
} 
@media screen and (max-width:767px){
	.animation_enchante{
		width: 100%;
		background: none;
		height: auto;
		font-size: 1.5rem;
	}
	.blockAnimation.top,
	.blockAnimation.bottom,
	.blockAnimation.left,
	.blockAnimation.right{
	position:relative;
		top :auto;
		left : auto;
		transform:none;
		display:inline-block;
		margin-bottom : 20px	
	}
	 
	.animation_enchante .textExplication{
		position:relative;
		top :auto;
		left : auto; 
		transform:none;
		display:block;
		float:right;
		width:50%;
		margin-top:60px;
		height:auto;  
		 
	}
	.animation_enchante .textExplication span{
			position:relative;
		top :auto;
		left : auto; 
		transform:none;
	}
	.animation_enchante .textExplication.first{
		display:none;
	}

}
@media screen and (max-width:480px){
	.animation_enchante .textExplication{ 
		width:40%;  
		line-height: 2rem;
		font-size:  1.8rem;
	}
}

.animationStandard{
	position:relative;
	min-height:780px;
	font-size: 2.4rem;
	font-style: italic;
	color:#fff
}
.animationStandard .texteAnimation{
	color:#000;
	position : absolute;
	width: 270px;
	line-height: 2.2rem;
	font-size: 1.8rem;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-style: normal;
	text-transform: uppercase;
	
}
.animationStandard .cartContainerAbs{
	position:absolute;
}
.animationStandard .cartContainerAbs .cartContainer{
	position: relative; 
	width:200px;
	height:200px;
	box-sizing:border-box;
	-webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
}
.animationStandard .cartContainerAbs .cartContainer .card{
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 -webkit-transition: -webkit-transform 0.5s ease;
         -moz-transition: -moz-transform 0.5s ease;
           -o-transition: -o-transform 0.5s ease;
              transition: transform 0.5s ease;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d; 
	
}
.animationStandard .cartContainerAbs .cartContainer .card.flipped {
 -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
}

.animationStandard .cartContainerAbs .cartContainer .front,
.animationStandard .cartContainerAbs .cartContainer .back{
	margin: 0;
  	display: block;
  	position: absolute;
  	width: 100%;
  	height: 100%; 
	box-sizing:border-box;
	-webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
}
.animationStandard .cartContainerAbs .cartContainer .front{
	border:#adadad 10px solid;	
	background-color:#e1097e;
	border-radius:50%;  
}
.animationStandard .cartContainerAbs .cartContainer .front span{
	position:absolute;
	top:50%;
	left:50%;
	display:block;
	-webkit-transform: translate(-50%,-50%);	
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform:translate(-50%,-50%) ;
	-webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
}
.animationStandard .cartContainerAbs .cartContainer .back{
	 
	-webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
}

.bg3d{
	background: url(../images/animes/3d/fd_3d.png) center center no-repeat;
}
.bgPrint{
	background: url(../images/animes/print/fd_print.png) center center no-repeat;
}
.bgInternet{
	background: url(../images/animes/internet/fd_internet.jpg) center center no-repeat;
}
.bgConseil{
	background: url(../images/animes/conseil/fd_conseil.png) center center no-repeat;
}
.a1p1{
	top : 300px;
	left: 220px;
}
.a1p2{
	top : 60px;
	left: 470px;
}
.a1p3{
	top : 560px;
	left: 470px;
}
.a1p4{
	top : 300px;
	left: 730px;
}

.a2p1{
	top : 350px;
	left: 280px;
}
.a2p2{
	top : 30px;
	left: 600px;
}
.a2p3{
	top : 250px;
	left: 850px;
}
.a3p1{
	top : 80px;
	left: 90px;
}
.a3p2{
	top : 350px;
	left: 350px;
}
.a3p3{
	top : 30px;
	left: 690px;
}
.a3p4{
	top : 420px;
	left: 780px;
}
.a4p1{
	top : 360px;
	left: 220px;
}
.a4p2{
	top : 50px;
	left: 550px;
}
.a4p3{
	top : 280px;
	left: 780px;
}
.a1Texte{
	top : 340px;
	left: 420px; 
  width: 300px !important;
}
.a2Texte{
	top : 70px;
	left: 220px; 
  width: 300px !important;
}
.a3Texte{
	top : 150px;
	left: 320px; 
  width: 320px !important;
}
.a4Texte{
	top : 100px;
	left: 150px; 
  width: 320px !important;
}

@media screen and (max-width:1199px){
  .animationStandard > div {
  	margin-left:-100px
  }
}
@media screen and (max-width:998px){
  .animationStandard > div {
  	margin-left:-200px
  }
}
@media screen and (max-width:767px){
  .animationStandard .cartContainerAbs {
  	display:none
  }
  .animationStandard .texteAnimation{
  	width:100% !important;
  	position : relative;
  	top: auto;
  	left : auto;
  	margin:50px auto 30px; 
  	font-size: 1.8rem;
  }
  .animationStandard{
  	background: none !important;
  	min-height: 100px;
  }
}