/*#imghyp {display:none;}*/
#roue1, #roue2, #roue3, #roue4, #roue5, #roue6 {position:absolute;}
#roue1 {top:100px; left:150px;}
#roue2 {top:75px; left:120px;}
#roue3 {top:160px; left:140px;}
#roue4 {top:180px; left:90px;}
#roue5 {top:160px; left:55px;}
#roue6 {top:70px; left:230px;}
.titre {font-size:2.5em; line-height:100px;}
#fleche {position:fixed; top:200px; right:0;}

/*////hypnose rotate*/
.cube {padding-left:25%;}
.cub-cont {
  perspective: 1100px;
  perspective-origin: 50% 160px;
 /* position:absolute;*/
  height:340px;
}
#cubeparent {
  position: absolute;
  width: 320px;
  transform-style: preserve-3d;
  animation: spin 15s infinite linear;
  perspective-origin: 50% 160px;
}
#face1 {
	 transform: translateZ(160px);
	 position:absolute;
}
#face2 {
	transform: rotateY(-270deg) translateX(160px);
    transform-origin: top right;
    position:absolute;
	
}
#face3 {
	transform: translateZ(-160px) rotateY(180deg);
	position:absolute;
}
#face4 {
	transform: rotateY(270deg) translateX(-160px);
    transform-origin: center left;
    position:absolute;
	
}
@keyframes spin {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}
/*//Fin hypnose rotate*/
.cardWrapper{
  width:100%;
  height:231px;
  position:relative;
  /*background-color:#333;*/
  float:left;
  margin-right:10px;
  cursor:pointer;
  -webkit-font-smoothing:antialiased;
}
.cardFace{
  position:absolute;
  width:100%;
  height:231px;
  overflow:hidden;
}
.back {background:#fff;}
.back h4 {background:#333; color:#fff; border-top:solid 6px #666; border-bottom:solid 6px #666; line-height:50px;}
.moreinfo {padding:30px;}

@media screen and (min-width: 950px) and (max-width:1500px) {
  .back h4  {line-height:25px;}
  .moreinfo {padding:10px; font-weight:normal; font-size:14px;}
}

@media screen and (max-width: 950px) {
.titre {font-size:1.8em; line-height:80px; text-align:center;}
#hypnomod2 > div.inner {text-align:center;}
.cube {padding-left:15%; margin-top:50px;}
}
@media screen and (max-width: 680px) {
  .hyp-img {width:250px;}
  #cubeparent {width:250px;}
  #face1 {transform: translateZ(125px);}
  #face2 {transform: rotateY(-270deg) translateX(125px);}
  #face3 {transform: translateZ(-125px) rotateY(180deg);}
  #face4 {transform: rotateY(270deg) translateX(-125px);
}