/********** GENERAL E-CIGARETTE/E-LIQUIDE ************/ 
/****************************************************/

p{font-size:16px;}

.onglet-saveur 
{
    margin-bottom: 3em;
}

.recap-pack
{
		margin:2em;
}

.cig-lien
{
	background-image:url(../img/packneo/pack_cigarette.png);
	width:231px;height:193px;
	display:inline-block;
	vertical-align:middle;
}

.cig-lien:hover
{
	background:url(../img/packneo/pack_cigarette_hover.png);
	transition:background 0.8s ease;
  	-webkit-transition:background 0.8s ease;
  	-o-transition:background 0.8s ease;
  	-moz-transition:background 0.8s ease;
}

.liquide-lien
{
	background:url(../img/packneo/pack_liquide.png);
	width:231px;height:193px;
	display:inline-block;
	vertical-align:middle;
}

.liquide-lien:hover
{
	background:url(../img/packneo/pack_liquide_hover.png);
	transition:background 0.8s ease;
  	-webkit-transition:background 0.8s ease;
  	-o-transition:background 0.8s ease;
  	-moz-transition:background 0.8s ease;
}

.pack-lien
{
	background-image:url(../img/packneo/pack_pack.png);
	width:231px;height:193px;
	display:inline-block;
	vertical-align:middle;
}

.pack-lien:hover
{
	background-image:url(../img/packneo/pack_pack_hover.png);
	transition:background-image 0.8s ease;
  	-webkit-transition:background-image 0.8s ease;
  	-o-transition:background-image 0.8s ease;
  	-moz-transition:background-image 0.8s ease;
}


.encart-debutant
{
  height:3.5em;
  background:#FEB238;
  cursor:pointer;
}

.encart-debutant h2
{
  margin: 0;
  text-align:center;
  font-size:1.3em;
  position: relative;
  z-index: 90;
  color:white;
  line-height:2.5em;

    transition:color 0.8s ease;
  -webkit-transition:color 0.8s ease;
  -o-transition:color 0.8s ease;
  -moz-transition:color 0.8s ease;
}

.encart-debutant:hover h2
{
  color:black;

  transition:color 0.8s ease;
  -webkit-transition:color 0.8s ease;
  -o-transition:color 0.8s ease;
  -moz-transition:color 0.8s ease;
}

.encart-debutant:hover .bouton_hamburger
{
    height:21px;
    width:42px;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 3em;
    position: absolute;
    z-index:90; 
    background:url(../img/packneo/picto_hamburger_hover.png);

  transition:background 0.8s ease;
  -webkit-transition:background 0.8s ease;
  -o-transition:background 0.8s ease;
  -moz-transition:background 0.8s ease;
}

.bouton_hamburger
{
    height: 21px;
    width: 42px;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 3em;
    position: absolute;
    z-index: 90;
    background: url(../img/packneo/picto_hamburger.png) no-repeat;

   transition:background 0.8s ease;
  -webkit-transition:background 0.8s ease;
  -o-transition:background 0.8s ease;
  -moz-transition:background 0.8s ease;
}

.bouton_hamburger:hover
{
   height:21px;
    width:42px;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 2em;
    position: absolute;
    z-index:90; 
    background:url(../img/packneo/picto_hamburger_hover.png);

      transition:background 0.8s ease;
  -webkit-transition:background 0.8s ease;
  -o-transition:background 0.8s ease;
  -moz-transition:background 0.8s ease;
}

.bouton_hamburger_close
{
    background:url(../img/packneo/picto_hamburger_close.png);
}


@keyframes playHamburger 
{ 
   from { background-position: 0 0; }
   to { background-position: -350px 0; }
}

@keyframes -moz-playHamburger 
{ 
   from { background-position: 0 0; }
   to { background-position: -350px 0; }
}

@keyframes -o-playHamburger 
{ 
   from { background-position: 0 0; }
   to { background-position: -350px 0; }
}

@keyframes -webkit-playHamburger 
{ 
   from { background-position: 0 0; }
   to { background-position: -350px 0; }
}


.encart-icones
{
    background: black;
    position: absolute;
    display: block;
    height: 0;
    padding:0;
    width: 100%;
    overflow:hidden;
    z-index: 50;
    text-align: center;
    border-bottom:0px solid #FEB238;

    transition:height 0.8s ease, padding 0.8s ease, border-bottom 0.8s linear;
  -webkit-transition:height 0.8s ease, padding 0.8s ease, border-bottom 0.8s linear;
  -o-transition:height 0.8s ease, padding 0.8s ease, border-bottom 0.8s linear;
  -moz-transition:height 0.8s ease, padding 0.8s ease, border-bottom 0.8s linear;
}

.encart-iconesOpen
{
  height:255px;
  padding-top: 2em;
  border-bottom: 4px #FEB238 solid;

  transition:height 0.8s linear;
  -webkit-transition:height 0.8s linear;
  -o-transition:height 0.8s linear;
  -moz-transition:height 0.8s linear;
}

.encart-image
{
  height:195px;
  overflow:hidden;
  display:inline-block;
  margin:0;
}

.encart-cigarette
{
  width:231px; height:192px;
  overflow:hidden;
}

.img-cigarette
{	
	width:231px; height:192px;
	background-image:url(../img/packneo/cig_anime.png);
  	background-repeat:no-repeat;
}

.img-cigarette:hover
{
	animation: playCigarette 1s steps(26) forwards ;
  -webkit-animation: playCigarette 1s steps(26)forwards ;
  -moz-animation: playCigarette 1s steps(26)forwards ;
  -o-animation: playCigarette 1s steps(26)forwards ;
}

@keyframes playCigarette 
{ 
   from { background-position: 0 0; }
   to { background-position: -6006px 0; }
}

@keyframes -moz-playCigarette 
{ 
   from { background-position: 0 0; }
   to { background-position: -6006px 0; }
}

@keyframes -o-playCigarette 
{ 
   from { background-position: 0 0; }
   to { background-position: -6006px 0; }
}

@keyframes -webkit-playCigarette 
{ 
   from { background-position: 0 0; }
   to { background-position: -6006px 0; }
}

.encart-liquide
{
  width:231px;
  height:192px;
  overflow:hidden;
}

.img-liquide
{ 
  width:231px;
  height:192px;
  background:url(../img/packneo/liquide_anime.png) left no-repeat;
  display:block;

}


.img-liquide:hover
{
    animation: play 1s steps(23) forwards ;
  -webkit-animation: play 1s steps(23)forwards ;
  -moz-animation: play 1s steps(23)forwards ;
  -o-animation: play 1s steps(23)forwards ;
}

@keyframes play 
{ 
   from { background-position: 0 0; }
   to { background-position: -5313px 0; }
}

@keyframes -moz-play 
{ 
   from { background-position: 0 0; }
   to { background-position: -5313px 0; }
}

@keyframes -o-play 
{ 
   from { background-position: 0 0; }
   to { background-position: -5313px 0; }
}

@keyframes -webkit-play 
{ 
   from { background-position: 0 0; }
   to { background-position: -5313px 0; }
}


p
{
	margin: 0 0 0;
}

.cig-page h2, .liquide-page h2
{
    font-size: 1.5rem;
    margin: 1em 0;
    margin-top: 2em;
    margin-bottom: 2em;
}

.liquide-page h3
{
	font-size:1.2rem;
}

.cig-page, .liquide-page 
{
	text-align:center;
	width:800px;
	margin:0 auto;
}

#cig-texte, #liquide-texte
{
	width:800px;
	margin:2em auto;
	letter-spacing: 0.3px;
}

.trait-jaune
{
	width: 2em;
	height: 0.5em;
	background-color:#FEB238;
	margin:2em auto;
}

.bandeau
{
	margin:3em 0;
}

.bandeau-1
{
	margin-top:0;
}

.bouton-pack
{
	display: inline-block;
	background-color: #000;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1em;
	width: 500px;
	color:#FEB238;
}

.bouton-pack:hover
{
	color:#000;
	background-color:#FEB238;
}

.bouton-go
{
	background-image:url(../img/packneo/bouton_go.png);
	width:130px;height:250px;
	position:fixed;
	right: 8em;
	top: 23em;
	opacity:0;
}

.bouton-go:hover
{
	background-image:url(../img/packneo/bouton_go_hover.png);
}

/********** CIGARETTE ELECTRONIQUE LEGENDE ************/ 
/*****************************************************/

.cig-img
{
	width:800px;
	margin:7em auto 0em auto;
}

.cig-img>div
{
	display:inline-block;
	position:relative;
	background-repeat: no-repeat;
	height:700px;
	vertical-align:bottom;
	margin-right:16px;
}

.cig-nom
{
	display:block;
	text-align:left;
	margin-left:-5em;
	opacity:0;
}

.cig-nom-droite
{
	text-align:right;
	margin-right: 2.9em;
	margin-left:0;
}

.cig-nom h3, .cig-nom .cig-puce
{
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
}

.cig-nom h3
{
	font-size:16px;
	text-align:left;
	margin:0;
	margin-left:0.3em;
	margin-top: 0.2em;

	transition:  color 0.5s ease;
	-moz-transition: color 0.5s ease;
	-o-transition: color 0.5s ease;
	-webkit-transition: color 0.5s ease;
}

.cig-puce
{
	width:15px;
	height:15px;
	background-image:url(../img/packneo/puce_plus.png);
}

.cigPuceMoins
{
	width:15px;
	height:15px;
	background-image:url(../img/packneo/puce_moins.png);
}

.cig-texte
{
	font-size:13px;
	text-align:left;
	margin-left: 2em;
	overflow:hidden;
	display:none;
}

.cig-texte-droite
{
	text-align:right;
	padding-right: 11em;
	margin-left:0;
}

.trait-legende
{
	background-color:black;
	width:1.5px;
	margin-left: 0.4em;
}

.trait-legende-droite 
{
    position: relative;
}

.trait-legende-batterie 
{
    height: 0em;
}

.trait-legende-base 
{
    height: 0px;
    left: 16.8em;
    bottom:-11em;
}

.trait-legende-resistance 
{
    height:0;
}

.trait-legende-reservoir 
{
    height: 0px;
    left: 16.8em;
    top: 19em;
}

.trait-legende-driptip 
{
    height: 0;
}

.cig-explication
{
	position:relative;
	width:360px;
}

.cig-exp-batterie
{
    top: 37em;
    left: 5em;
}

.cig-exp-base 
{
	right: 16em;
	top: 19em;
}

.cig-exp-resistance
{
	top: 23em;
	left: 1em;
}

.cig-exp-reservoir 
{
	right: 12em;
	top: 12em;
}

.cig-exp-driptip 
{
	top: 15em;
	left: 4em;
}

.cig-batterie
{	
/* 	top:5em;
opacity:0; */
	width:319px;
	background: url(../img/packneo/batterie.png);
}

.cigBatterieHover
{
	width:319px;
	opacity:0.5;
	background: url(../img/packneo/batterie_hover.png);
}


.cig-base
{	
	/* top:-5em; */
/* 	opacity:0; */
	width:61px;
	background-image: url(../img/packneo/base.png);
}

.cigBaseHover
{
	width:61px;
	opacity:0.5;
	background: url(../img/packneo/base_hover.png);
}

.cig-resistance
{	
	/* top:5em; */
	/* opacity:0; */
	width:67px;
	background-image: url(../img/packneo/resistance.png);
}

.cigResistanceHover
{
	width:67px;
	opacity:0.5;
	background: url(../img/packneo/resistance_hover.png);
}

.cig-reservoir
{	
	/* top:-5em; */
	/* opacity:0; */
	width:116px;
	background-image: url(../img/packneo/reservoir.png);
}

.cigReservoirHover
{
	width:116px;
	opacity:0.5;
	background: url(../img/packneo/reservoir_hover.png);
}

.cig-driptip
{	
	/* top:5em; */
	/* opacity:0; */
	width:80px;
	background-image: url(../img/packneo/driptip.png);
}

.cigDripTipHover
{
	width:80px;
	opacity:0.5;
	background: url(../img/packneo/driptip_hover.png);
}

/********** CIGARETTE ELECTRONIQUE COUP DE COEUR ************/ 
/***********************************************************/


.coup-de-coeur 
{
    margin-top:4em;
}

.pack
{
	margin:3em 0;
}

.contenu-pack
{
	display:inline-block;
}

.contenu-pack.cig-q16 
{
    height: 500px;
}

.contenu-pack.cig-q16 img
{
	height:100%;width:auto;
}

.contenu-pack span
{
	color:#FEB238;
	font-weight:500;
}



/******************* E-LIQUIDE ************************/ 
/*****************************************************/

.flacon-img
{
	margin-top:3em;
	margin-bottom:16em;
}

.flacons
{
	height:506px;
	position:relative;
	display:inline-block;
	vertical-align:bottom;
}

.flacon-alcool
{
	background-image:url(../img/packneo/alcool.png);
	width:105px;
}

.flacon-arome
{
	background-image:url(../img/packneo/arome.png);
	width:105px;
}

.flacon-base
{
	background-image:url(../img/packneo/base_liquide.png);
	width:135px;
}

.flacon-nicotine
{
	background-image:url(../img/packneo/nicotine.png);
	width:111px;
}

.flacon-eau-distille
{
	background-image:url(../img/packneo/eau_distille.png);
	width:113px;
	margin-left: -0.5em;
}

.liquide-explication
{
	position:relative;
	width:360px;
}

.liquide-alcool-exp 
{
    top: 19em;
}

.liquide-nom
{
	display:block;
	text-align:right;
	z-index:99;
	position:relative;

}

.liquide-nom h3
{
	margin:0;
	padding:0;
}

.liquide-nom-droite, .liquide-nom-gauche
{
	opacity:0;
}

.liquide-nom h3, .liquide-nom .cig-puce
{
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
}

.legende
{
	background-color:#000;
	height:2px;
	position:relative;
}

.legende-alcool
{
	width: 0em;
	left: 27em;
	top: 1em;
}

.liquide-alcool-exp 
{
    top: 29em;
    left: -35em;
    opacity:0;
}

.liquide-eau-exp 
{
    top: 24em;
}

.legende-eau 
{
	width: 0em;
	top: 1em;
	left: 5em;
}

.liquide-nicotine-exp 
{
	top: 28em;
	left: -6em;
/*	opacity:0;*/
}

.legende-nicotine 
{
	position: relative;
	width: 22em;
	top: 3.5em;
	left: 10em;
}

.liquide-nicotine-exp .liquide-texte-droite 
{
    left: 21em;
}

.liquide-arome-exp 
{
	top: -8em;
	right: 37em;
	/*opacity:0;*/
}

.legende-arome 
{
	position: relative;
	top: 11.3em;
	left: 16em;
}

.liquide-base-exp 
{
    left: 6em;
    top: -3em;
    opacity:0;
}

.legende-base 
{
    width: 0;
    left: 4em;
    top: 1em;
}

.liquide-base-exp 
{
    left: 2em;
    top: 0em;
}

.liquide-base-exp .liquide-texte-droite 
{
    left: 23.7em;
}

.liquide-texte
{
	display: none;
}

.liquide-texte-gauche
{
	text-align:right;
}

.liquide-texte-droite
{
	text-align:left;
	position:relative;
	left:20.1em;
}

.st15{fill:none;stroke:#000000;stroke-miterlimit:10;}

.nicotine, .pg-vg
{
	margin-bottom: 8em;
}

.nicotine .nb-cig
{
	display:inline-block;
	margin:4em 1em;
	width:230px;
	vertical-align:top;
}

.nb-cig p
{
	font-size:1em;
}

#svg-nicotine,#svg-arome
{
	opacity:0;
}

.animateArome 
{
	stroke-miterlimit:10;
	stroke-dasharray:500;
	stroke-dashoffset:0;
  	animation: dash 1s ease-in-out forwards;
}

.animateNicotine
{
	stroke-miterlimit:10;
	stroke-dasharray:500;
	stroke-dashoffset:0;
  	animation: dash 1s ease-in-out forwards;
}

@keyframes dash 
{
	0% 		{stroke-dashoffset:500;opacity:0}
	100%	{stroke-dashoffset:0;opacity:1}
}


.saveur-tabac,.saveur-fraiche
{
	display:inline-block;
	margin:0 auto;
}

.saveur-tabac
{
	background-image: url(../img/packneo/saveur_tabac.png);
	width:200px;height:201px;
	cursor:pointer;
	position:relative;
	z-index:15;
}

.saveur-tabac:hover
{
	background-image: url(../img/packneo/saveur_tabac_hover.png);
}

.saveur-fraiche
{
	background-image: url(../img/packneo/saveur_fraiche.png);
	width:200px;height:201px;
	cursor:pointer;
	position:relative;
	z-index:15;
}

.saveur-fraiche:hover
{
	background-image: url(../img/packneo/saveur_fraiche_hover.png);
}

.saveur-produit
{
	position:relative;
	width:700px;
	border:1px solid black;
	top: -7.8em;
	margin:0 auto;
	padding-top:0;
	padding-left:2em;
	padding-right:2em;
	padding-bottom:2em;
	/*overflow:hidden;*/
	display: none;
}

.saveur-produit p
{
	padding:0;
}

.bouton-produit p
{
	padding:0;
	opacity:0;
}

.produit-flacon
{
	width:160px;
	display:inline-block;
	margin:2em auto;vertical-align:top;
	margin-left: 2em;
}

.produit-flacon img
{
	width:50%;
}

.produit-flacon p
{
	text-align:center;
}

.bouton-saveur
{
	width:0; height:50px;
	line-height:50px;
	position: relative;
	background-color: #000;
	color: #fff;
	margin-bottom: 0.5em;
	padding:0 0.8em;
	left: 48em;
	text-align:right;
	overflow:hidden;
	text-transform: uppercase;
	font-weight: 700;

	transition: background-color 0.5s ease;
	-moz-transition:background-color 0.5s ease;
	-o-transition:background-color 0.5s ease;
	-webkit-transition:background-color 0.5s ease;
}

.bouton-saveur:hover
{
	background-color:#FEB238;
	cursor:pointer;
}

.hover-bouton
{
	background-color:#FEB238;

	transition: background-color 0.5s ease;
	-moz-transition:background-color 0.5s ease;
	-o-transition:background-color 0.5s ease;
	-webkit-transition:background-color 0.5s ease;
}

.taux-pgvg
{
	margin:5em auto;
	display:inline-block;
	background-image:url(../img/packneo/frise.png);
	width:142px;height:1447px;
}

.taux-pgvg .taux
{
	position: relative;

	width: 200px;
	padding: 2em;
}

.taux-pgvg .taux-left
{
	left: -12em;
}

.pg-left:after
{
	content: '';
	background-image: url(../img/packneo/bidule.png);
	width: 18px;
	height: 27px;
	position: absolute;
	left: 13.87em;
	top: 1em;
}

.pg-right:after
{
	content: '';
	background-image: url(../img/packneo/bidule_br.png);
	width: 18px;
	height: 27px;
	position: absolute;
	left: -1.13em;
	top: 1em;
}

.vg-left:after
{
	content: '';
	background-image: url(../img/packneo/bidule_jl.png);
	width: 18px;
	height: 27px;
	position: absolute;
	left:13.87em;
	top: 1em;
}

.vg-right:after
{
	content: '';
	background-image: url(../img/packneo/bidule_right.png);
	width: 18px;
	height: 27px;
	position: absolute;
	left:-1.13em;
	top: 1em;
}


.taux-pgvg .taux-right
{
	left: 8em;
}

.taux-pgvg .taux-pg
{
	border: 2px solid #00AFA2;
}

.taux-pgvg .taux-vg
{
	border: 2px solid #FEB238;
}

.pg-2 
{
   top: -2.1em;
}

.pg-3 
{
    top: -2.6em;
}

.pg-4 
{
    top: -3.5em;
}

.pg-5 
{
   top: -3.8em;
}

.vg-2 
{
  	top: -4.5em;
}

.vg-3 
{
   top: -5.1em;
}

.vg-4 
{
    top: -2.5em;
}

.vg-5 
{
    top: -1.5em;
}

.pg-titre
{
	color:#00AFA2;
}

.vg-titre
{
	color:#FEB238;
}

.taux-pgvg h2
{
	margin-top:0;
	margin-bottom:1em;
}

.bouton-mg 
 {
    margin-left: 1em;
    background-color: #000;
    color: #FEB238;
    padding: 0.5em;
    width: 150px;
    display: inline-block;
    margin-bottom: 0.5em;
    font-weight:700;
}

.bouton-mg:hover
{
	color:#fff;
}


/******************  FAQ  *****************************/ 
/*****************************************************/


#accordion 
{
    width: 800px;
    text-align: center;
    margin: 0 auto;
}

.reponse-toggle
{
	background-color:black;
	text-align:right;
	padding: 2em 4em 2em;
	color: #fff;
	border-bottom: 0.5em solid #FEB238;
}

.reponse-toggle p,
.reponse-toggle ul li
{
	text-align:left;
}

.reponse-toggle>img
{
	padding-top:4em;
	cursor:pointer;
}

.accordion-content 
{
	display: none;
	font-size: 14px
}

.accordion-content.default 
{
	display: block;
}

.accordion-toggle 
{
	background-color:#FEB238;
	color: #343738;
	cursor: pointer;
	font-size:1.2rem;
	padding: 10px 40px;
	text-align:left;
	text-transform:uppercase;
	font-weight:700;
	margin-top:1em;
}

.accordion-toggle:hover
{
	background-color:black;
	color:#FEB238;

	transition: background 0.5s ease, color 0.5s ease;
	-moz-transition:background 0.5s ease, color 0.5s ease;
	-o-transition:background 0.5s ease, color 0.5s ease;
	-webkit-transition:background 0.5s ease, color 0.5s ease;
}

.accordion-toggle:before 
{
	font-size: 20px;
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
	content: "•";
	color:white;
}

.compo_pack>div
{
	display:inline-block;
	margin-bottom:2em;
}

.liquides_3
{
	margin:0em 5em;;
}

/* RESPONSIVE */

@media (max-width: 768px)  
{
	.encart-debutant
	{
		display:none;
	}
}