#viewp {
  -webkit-perspective: 400px;
  -webkit-perspective-origin: 0% 72%;
  -ms-perspective: 400px;
  -ms-perspective-origin: 0% 72%;
   perspective: 400px;
  perspective-origin: 0% 72%;
  -moz-perspective: 400px;
  -moz-perspective-origin: 0% 72%;
  height: 270px;
  width: 780px;
  position: absolute;
  top: 13%;
  left: 12%;
  cursor:pointer;
}
.box {
  position: absolute;
  /* width: 400px; */
  height: 156px;
  left: 24%;
  top: 30%;
  margin-left: -50px;
  margin-top: -50px;
}
#a {
  font-family: Prime, Verdana, Arial, sans-serif;
  width: 350px;
  font-weight: bold;
  font-size: 60px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-top: 6px solid #FFF;
  border-bottom: 2px solid #646060;
  color: #FFF;
  /* letter-spacing: 0.1em; */
  -webkit-transform: rotateY(26deg);
  -ms-transform: rotateY(26deg);
   -moz-transform: rotateY(26deg);
   transform:rotateY(26deg);
  text-align: left;
}
#b {
  border-top: 1px solid #3F3B3B;
  border-bottom: 5px solid #FFF;
  padding-bottom: 4px;
  text-shadow: -2px 1px 1px rgba(11, 11, 11, 0.9);
}
.jaune {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 64px;
  color: #0F0;
  text-shadow: none;
  position: relative;
  top: 64px;
  left: 310px;
  z-index: 10;
}
@media only screen and (min-width: 668px)and (max-width: 967px){
#viewp {left: 0%;}		
.box {left:8%;}		
}
@media only screen and (max-width: 717px){
#viewp {display:none;}
}
#discount {
	position: absolute;
	top:70%;
	left: 30%;
	z-index: 1099;
}
@media only screen and (min-width: 577px) and (max-width: 667px){
#discount {left: 12%;}	
}
@media only screen and (max-width: 577px){
#discount {display:none;}
}	
@media only screen and (max-height: 562px) and (orientation:landscape) {
#discount {display:none;}
}
.box-exp {
	display: block;
	border-right: 1px solid #454545;
	border-bottom: 1px solid #000;
	height: 10px;
	width: 10px;
	position: relative;
	top: 10px;
	left: 10px;
}

.box-exp1 {
	display: block;
	border-right: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	height: 10px;
	width: 10px;
	position: relative;
	top: 10px;
	left: 10px;
}
.box-expand{
	transition: all 250ms ease-in;
	transition-property: all;
	transition-duration: 250ms;
	transition-timing-function: ease-in;
	transition-delay: initial;
	border: 1px solid #000;
	height: 25px;
	width: 25px;
	display: block;
	border-radius: 2px;
	float: left;
	margin: 6px 0 12px 150px;
}
.box-expand2{
	transition: all 250ms ease-in;
	transition-property: all;
	transition-duration: 250ms;
	transition-timing-function: ease-in;
	transition-delay: initial;
	border: 1px solid #FFF;
	height: 25px;
	width: 25px;
	display: block;
	border-radius: 2px;
	float: left;
	margin: 12px 0 12px 130px;
	;
}
.caption {
top: 1800px; 
  position: absolute;
z-index: 10000;
}
.captation_slide {
	width: 100%;
	margin: 7% auto;
	padding: 0 7% 0 7%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#captation_slide1,#captation_slide7 {
	float:right;
	padding: 16px 26px 10px 20px;
	width: 320px;
	height:154px;
	margin-left: 20px;
	background-image:url(../img/transpa-2.png);
	margin-top: 12%;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
	margin-right: 7%;
}
@media only screen and (max-width: 577px){
#captation_slide1 {	margin-top: 22%;}
}
.captation_slide0 {
	width: 100%;
	margin: 10% auto;
	padding: 0 6% 0 12%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
@media only screen and (min-width: 1167px) and (max-width: 969px){
.captation_slide0 {	margin: 13% auto;}	
}
@media only screen and (max-width: 968px){
.captation_slide0 {	margin: 16% auto;}	
}
#captation_slide7 {
	float:left;
	margin:4% 0 0 25%;
	height:auto;
}
@media only screen and (max-width: 667px){
#captation_slide7 {	margin:4% 0 0 11%;}	
}
#captation_slide2 {
	float: left;
	margin: 30px 8% 0 0;
	padding: 16px 26px 10px 20px;
	width: 280px;
	background-image: url(../img/transp-1.png);
	height: 130px;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
}
.captation_slide3,.captation_slide4,.captation_slide8  {
	width: 100%;
	margin: 10% auto;
	padding: 0 6% 0 12%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.captation_slide4 {
	padding: 0 8% 0 8%;
}
.captation_slide8{ margin: 8% auto;}
#captation_slide5 {
	float: left;
	margin: 24px 300px 0 0;
	padding: 16px 26px 10px 20px;
	width: 264px;
	border: 1px solid #FFF;
	background-image: url(../img/transp-2.png);
	height: 240px;
}
@media only screen and (max-width: 1250px){
#captation_slide5 {	margin:24px 0 0 0;}	
}
#captation_slide6 {
  float: right;
  margin: 30px 8% 0 30%;
  padding: 16px 26px 10px 20px;
  width: 280px;
  background-image: url(../img/transp-1.png);
  height: 280px;
  border-right: 1px solid #FFF;
  border-left: 1px solid #FFF;
}
#what-evil {
  float: left;
  width: 320px;
  margin: -128px 0;
}
#capt_evil {
  float: left;
  width: 320px;
  height: auto;
  margin-top: 0%;
  color:#FFF;
  background-image: url(../img/transp-1.png);
}
#capt_what {
	float: left;
	width: 320px;
	height: 199px;
	margin-top: 30px;
}

@media only screen and (max-width: 879px){#what-evil {display:none;}}
@media only screen and (max-height: 544px){
#what-evil {display:none;}
}
.cap-title,.cap-title2,.cap-title3,.cap-title4,.cap-title5  {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 48px;
	font-weight:bold;
	font-style:italic;
	width:auto;
	padding-top: 5px;
	padding-bottom: 0px;
	border-top: 5px solid #FFF;
	border-bottom: 5px solid #FFF;
	text-align: center;
}
.cap-title{
	float:left;
	margin: 3% 0 0 30%;
	width:320px;
	padding-top: 5px;
	padding-bottom: 0px;
	border-radius:9px;
	border-top: 5px solid #FFF;
	border-bottom: 5px solid #FFF;
	color: #FFF;
}

.cap-title2 {
	float: right;
	color: #FFF;
	margin: 5% 0 20px 30%;
}

@media only screen and (max-width: 859px){
.cap-title2 {float: left;}
#captation_slide2 {clear:left; margin: 0px 8% 0 0;padding-top:26px;}
}
.cap-title3 {
	float: left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 48px;
	font-style: italic;
	font-weight: bold;
	height: auto;
	width: 300px;
	padding: 5px 0;
	padding-bottom: 0px;
	border-top: 5px solid #FFF;
	border-bottom: 5px solid #FFF;
	text-align: center;
	color: #FFF;
	margin: 0 16% 20px 0;
}
.cap-title4 {
  float: right;
  margin: 0 8% 0 48%;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 5px solid #F90;
  border-bottom: 5px solid #F90;
  text-align: center;
  color: #F90;
}
.cap-title5 {
	float: right;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 48px;
	font-style: italic;
	font-weight: bold;
	height: auto;
	width: 320px;
	padding: 5px 0;
	padding-bottom: 0px;
	border-top: 5px solid #FFF;
	border-bottom: 5px solid #FFF;
	text-align: center;
	color: #FFF;
	margin: 0 10% 20px auto;
}
@media only screen and (max-height: 502px)  {
.cap-title3,.cap-title4 {display:none}
}
.cap-text {
	text-align: justify;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 20px;
	font-size: 15px;
	color: #000;
	text-shadow:0px 1px 0px rgba(0, 0, 0, 0.7);
}
.cap-text2 {
	text-align: justify;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: 16px;
	color: #FFF;
}
.cap-next {
	font-family: Prime;
	font-size: 19px;
	border-radius: 9px;
	height: 57px;
	margin-top: -16px;
	float:right;
	text-align: center;
	width: 140px;
	padding-top: 9px;
	background-image: url(../img/triangle7.png);
	color: #000;
	background-repeat: no-repeat;
	margin-right: 80px;
}
.cap-next4, .cap-next5{
	font-family: Prime;
	font-size: 19px;
	border-radius: 9px;
	height: 57px;
	margin-top: 16px;
	float: left;
	margin-left: 90px;
	text-align: center;
	width: 140px;
	padding-top: 9px;
	background-image: url(../img/triangle8.png);
	color: #000;
	background-repeat: no-repeat;
}
.cap-next5{	margin-top: 56px;}
.cap-next2 {
	float: right;
	margin: 6% 0 0 20%;
	border: 1px solid #FFF;
}
@media only screen and (max-width: 967px){
.cap-next2 {margin: -1% 0 0 20%;}
}
@media only screen and (max-width: 859px){
.cap-next2 {display:none}
}
@media only screen and (max-height: 622px)  {
.cap-next2 {display:none}
}
.cap-next2b {
	float: right;
	margin: 5% 0% 0 4%;
	border: 1px solid #FFF;
}
@media only screen and (max-width: 820px){
.cap-next2b {display:none}
}
.cap-next2d {
	float: right;
	margin: 5% 0% 0 12%;
	border: 1px solid #FFF;
}
@media only screen and (max-width: 980px){
.cap-next2d {display:none;}
}
@media only screen and (max-height: 618px){
.cap-next2d {display:none;}
}
.cap-2c {
	position:absolute;
	bottom:106px;
	width:90%;
	z-index:10000;
}
.cap-next2c {
width:180px;
margin:0 auto 0 auto;
padding-left:10%;
}
@media only screen and (max-width: 980px) and (min-width: 879px){
.cap-next2c {padding-left:30%;}
}
@media only screen and (max-width: 879px){
.cap-next2c {display:none;}
}
.cap-next3 {
	float:left;
	height: 37px;
	margin-top: 37%;
	margin-right: auto;
	margin-left: 10%;
	width: 100px;
	padding-top: 0px;
	background-image: url(../img/triangle9.png);
}
.midle {
	text-align: center;
	vertical-align: middle;
}
.black {
	color: #006;
	font-style: italic;
	font-size: 14px;
	width: 100%;
	text-align: center;
	float: left;
	padding-top: 10px;
}
.left-o {
	float: left;
	padding-top:22px;
}
.evilo {
	padding: 4px 0 4px 10px;
}
.s12 {
	font-size: 12px;
}
.s11 {
	font-size: 11px;
}