/* TUTO ROUGE INFUSION */
/* REALISE PAR GUILLAUME CAMPONOVO POUR LES IMPRODUCTIBLES ET SEPHORA */

/* GŽnŽrique */
* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

img {
    border:0;
}


strong {
    font-family: 'Sephora', Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 22px;
}

@font-face {
    font-family: 'Century Gothic Bold';
    src: url('./fonts/century_gothic_bold-webfont.eot');
    src: url('./fonts/century_gothic_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/century_gothic_bold-webfont.woff') format('woff'),
         url('./fonts/century_gothic_bold-webfont.ttf') format('truetype'),
         url('./fonts/century_gothic_bold-webfont.svg#century_gothicbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Century Gothic';
    src: url('./fonts/century_gothic-webfont.eot');
    src: url('./fonts/century_gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/century_gothic-webfont.woff') format('woff'),
         url('./fonts/century_gothic-webfont.ttf') format('truetype'),
         url('./fonts/century_gothic-webfont.svg#century_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Sephora';
    src: url('./fonts/sephora-basic-webfont.eot');
    src: url('./fonts/sephora-basic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/sephora-basic-webfont.woff') format('woff'),
         url('./fonts/sephora-basic-webfont.ttf') format('truetype'),
         url('./fonts/sephora-basic-webfont.svg#sephora_basicbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* SpŽcifiques aux slides */
#slide1 {
    background-image: url(./images/background1.jpg);
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
}

#slide1 .bt, #slide2 .bt {
    position: absolute;
    bottom: 30px;
    right: 20px;
}

#slide1 .lg a {
    position: absolute;
    bottom: 43px;
    right: 73px;
    text-align: right;
    width: 250px;
    text-decoration: none;
    color: black;
    line-height:25px;
    margin-top: 10px;
    font-size: 20px;
    text-transform: uppercase;
    font-family: 'Century Gothic Bold', Helvetica, sans-serif;
}

#slide1 .logo {
    position: absolute;
    top: 15px;
    left: 520px;
}

#slide1 .nom-tuto   {
    position: absolute;
    top: 90px;
    left: 470px;
    text-align: center;
    font-family: 'Sephora', Helvetica, sans-serif;
    text-transform: uppercase;
    width: 380px;
    font-size: 19px;
    z-index: 20;
}

#slide1 .produit {
    position: absolute;
    top: 155px;
    left: 510px;
}

#slide1 .nom {
    position: absolute;
    top: 200px;
    left: 640px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: #34276b;
    width: 210px;
    font-size: 1.3em;
    line-height: 1em;
    text-transform: uppercase;
}

#slide1 .nom strong {
    font-size: 1.5em;
    line-height: 0.9em;
    text-transform: none;
    font-family: 'Century Gothic Bold', 'Helvetica', sans-serif;
}

.masque-pola {
    position: absolute;
    top: 15px;
    left: 50px;
    z-index: 100;
}

.rendu {
    position: absolute;
    top: 25px;
    left: 56px;
    z-index: 50;
}

#rendu {
    position: absolute;
    top: 25px;
    left: 59px;
    z-index: 50;
}

.beautyrendu {
    position: absolute;
    top: 25px;
    left: 40px;
    z-index: 50;
}

.logo {
    position: absolute;
    top: 15px;
    left: 545px;
}

.nom-tuto   {
    position: absolute;
    top: 80px;
    left: 495px;
    text-align: center;
    font-family: 'Sephora', Helvetica, sans-serif;
    text-transform: uppercase;
    width: 340px;
    font-size: 19px;
}

#slide2 {
    background-image: url(./images/background2.jpg);
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
}

#slide2 .details {
    position: absolute;
    top: 0px;
    left: 300px;
}

#slide2 .trio {
    position: absolute;
    top: 165px;
    left: 160px;
    font-family: 'Sephora', Helvetica, sans-serif;
    font-size: 30px;
    line-height: 1em;
    color : #34276b;
    text-transform: uppercase;
    width: 220px;
}

#slide2 .actif {
    position: absolute;
    top: 270px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    left: 160px;
    font-size: 14px;
    width: 220px;
}

#slide2 .actif strong, #slide2 .actif2 strong, #slide2 .actif3 strong  {
    font-size: 16px;
}

#slide2 .actif2 {
    position: absolute;
    top: 210px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    left: 610px;
    font-size: 14px;
    width: 200px;
    text-align: center;
}

#slide2 .actif3 {
    position: absolute;
    top: 320px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    left: 610px;
    font-size: 14px;
    width: 200px;
    text-align: center;
}

#slide2 .lg a {
    position: absolute;
    bottom: 40px;
    right: 73px;
    text-align: right;
    width: 250px;
    text-decoration: none;
    color: black;
    font-size: 20px;
    line-height: 16px;
    text-transform: uppercase;
    font-family: 'Century Gothic Bold', Helvetica, sans-serif;
}

#slide2 .lg a strong{
    font-size: 15px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    font-weight: 200;
}

.next {
    position: absolute;
    bottom: 23px;
    right: 25px;
    z-index: 15;
}

.replay {
    position: absolute;
    top: 305px;
    left: 625px;
}

.rejouer {
    position: absolute;
    top: 300px;
    left: 670px;
    width: 110px;
    text-align: justify;
}

.rejouer a {
    text-decoration: none;
    color: black;
    line-height:25px;
    font-size: 22px;
    text-transform: uppercase;
    font-family: 'Century Gothic', Helvetica, sans-serif;
}

.rejouer a strong{
    font-family: 'Century Gothic Bold', Helvetica, sans-serif;
    font-size: 23px;
}

.replay img, .replay2 img{
  -webkit-transition:-webkit-transform .9s; // Chrome Safari
  -moz-transition:-moz-transform .9s;       // Mozilla
  -o-transition:-o-transform .9s;           // OpŽra
  -ms-transition:-ms-transform .9s;         // IE
  transition:transform .9s;
}
 
.replay  img:hover, .replay2  img:hover{
  -webkit-transform:rotate(-540deg); 
  -moz-transform:rotate(-540deg);
  -o-transform:rotate(-540deg); 
  -ms-transform:rotate(-540deg); 
  transform:rotate(-540deg);
}

.previous {
    position: absolute;
    top: 435px;
    left: 830px;
    z-index: 15;
}

.barre {
    position: absolute;
    bottom: 15px;
    right: 0px;
    z-index: 10;
}

#legende3 {
    position: absolute;
    top: 365px;
    left: 60px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 342px;
    height: 90px;
    font-size: 25px;
    text-transform: none;
    text-align: center;
    z-index: 200;
    line-height: 90px;
    text-align:center;
}

#legende3 p {
    vertical-align:middle;
    display:inline-block;
    line-height:1.3em;
     font-size: 35px;
    text-transform : capitalize;
}

.min-pc {
    position: absolute;
    bottom: 16px;
    right: 91px;
    z-index: 20;
}

.min-mm {
    position: absolute;
    bottom: 17px;
    right: 210px;
    z-index: 20;
}

#slide3 {
    background-image: url(./images/background2.jpg);
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
}

.pola {
    position: absolute;
    top: 3px;
    left: 50px;
    z-index: 100;
}

#slide3 .produit {
    position: absolute;
    top: 10px;
    left: 240px;
}

#slide3 .paragraphe {
    position: absolute;
    top: 170px;
    left: 470px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    font-size: 14px;
    width: 370px;
    text-align: justify;
}

#slide3 .paragraphe strong{
    font-size: 14px;
}

#slide3 .bt-repassage {
    position: absolute;
    top: 310px;
    left: 500px;
}

#slide3 .t-repassage a {
    position: absolute;
    top: 320px;
    left: 550px;
    width: 100px;
    font-size: 12px;
    font-family: "Sephora", Helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
    z-index:10;
    color: black;
    text-decoration: none;
}

#slide3 .t-serum a {
    position: absolute;
    top: 328px;
    left: 713px;
    width: 100px;
    font-size: 12px;
    text-transform: uppercase;
    font-family: "Sephora", Helvetica, sans-serif;
    text-align: center;
    z-index:10;
    color: white;
    text-decoration: none;
}

#slide3 .bt-serum {
    position: absolute;
    top: 310px;
    left: 670px;
}

.etape {
    position: absolute;
    z-index:100;
    top: 50px;
    left: 390px;
}

#slide4 {
    background-image: url(./images/background5.jpg);
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
}

#slide4 .texte, #slide5 .texte, #slide6 .texte {
    position: absolute;
    top: 135px;
    left: 540px;
}

.serum {
    width: 210px;
    text-align: left;
    position: absolute;
    top: 170px;
    left: 650px;
    font-family: 'Century Gothic Bold', Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    z-index: 10;
}

.massage {
    width: 220px;
    text-align: left;
    position: absolute;
    top: 170px;
    left: 650px;
    font-family: 'Century Gothic Bold', Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    z-index: 10;
}
#slide4 .sexplication, #slide5 .sexplication  {
    width: 200px;
    text-align: left;
    position: absolute;
    top: 225px;
    left: 670px;
     font-family: 'Century Gothic', Helvetica, sans-serif;
    font-size: 15px;
    z-index: 10;
}

#slide5 {
    background-image: url(./images/background5.jpg);
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
}

.huile{
    position: absolute;
    bottom: -6px;
    right: 250px;
    z-index: 2;
}

#slide6 {
    background-image: url(./images/background4.jpg);
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
}

#slide6 .texte {
    position: absolute;
    top: 120px;
    left: 515px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 300px;
    font-size: 15px;
    text-transform: none;
    text-align: center;
    z-index: 10;
}

#slide6 .teintes {
    position: absolute;
    top: 170px;
    left: 503px;
}

#slide6 .teinte1 {
    position: absolute;
    top: 285px;
    left: 480px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 180px;
    font-size: 14px;
    text-transform: none;
    text-align: center;
}

#slide6 .teinte1 b, #slide6 .teinte2 b {
    font-size: 14.5px;
}

#slide6 .teinte2 {
    position: absolute;
    top: 285px;
    left: 680px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 180px;
    font-size: 14px;
    text-transform: none;
    text-align: center;
}

#slide6 .close strong{
    position: absolute;
    top: 380px;
    left: 495px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 350px;
    font-size: 15px;
    text-align: center;
}

#slide6 .texte strong {
    text-transform: uppercase;
    text-align: left;
    line-height: 20px;
    font-family: 'Century Gothic Bold', 'Helvetica', sans-serif;
    font-size: 18px;
    text-transform: none;
}

.beauty {
    position: absolute;
    top: 6px;
    left: 35px;
    z-index: 100;
}

#slide8 {
    background-image: url(./images/background1.jpg);
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
}

.mix-match {
    position: absolute;
    top: 160px;
    left: 620px;
}

.pc img:hover, .mix-match img:hover, .min-mm IMG:hover, .min-pc img:hover, .produits-complementaires img:hover {
-webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2);
     -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
         transform: scale(1.2);
}

.product1 img:hover, .product2 img:hover, .product3 img:hover, .product4 img:hover {
-webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
     -ms-transform: scale(1.05); 
      -o-transform: scale(1.05); 
         transform: scale(1.05); 
}

.mix-match img, .produits-complementaires img{
-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
    -moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);
     -ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);
      -o-transition: all .5s cubic-bezier( .6, 2, .4, 1);
         transition: all .5s cubic-bezier( .6, 2, .4, 1);
width: 260px;
}

.min-mm img, .pc img, .min-pc img, .product1 img, .product2 img, .product3 img, .product4 img{
-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
    -moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);
     -ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);
      -o-transition: all .5s cubic-bezier( .6, 2, .4, 1);
         transition: all .5s cubic-bezier( .6, 2, .4, 1);
}

.produits-complementaires {
    position: absolute;
    top: 200px;
    left: 600px;
}

#slide8 .produit {
    position: absolute;
    top: 140px;
    left: 480px;
}

/* SpŽcifiques ˆ la page mix-match.php */
#mix-slide {
    background-image: url(./images/background4.jpg);
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
}

#mix-slide .logo {
    position: absolute;
    top: 10px;
    left: 434px;
}

#mix-slide #teintes {
    position: absolute;
    top: 180px;
    left: 430px;
    width: 160px;
    height: 190px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#mix-slide #teintes a img{
    padding: 0;
}

#mix-slide #teintes a {
    color: black;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 9px;
    text-align: left;
}

#type {
    position: absolute;
    left: 600px;
    top: 180px;
    text-align: center;
    width: 280px;
    font-family: 'Sephora', Helvetica, sans-serif;
    color: black;
    text-transform: uppercase;
    font-size: 1.2em;
     z-index: 3;
}

#g-fleche {
    position: absolute;
    left: 640px;
    top: 150px;
}

#fleche {
    position: absolute;
    left: 495px;
    top: 0px;
    z-index: 3;
}

#produit-comp {
    position: absolute;
    top: 180px;
    left: 590px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 250px;
    font-size: 15px;
    text-transform: none;
    text-align: center;
    z-index: 1;
}

#produit-comp p strong{
    font-size: 15px;
    text-transform: none;
}

#description {
    position: absolute;
    left: 600px;
    top: 340px;
    text-align: center;
    width: 280px;
    font-family: 'Sephora', Helvetica, sans-serif;
    color: black;
    text-transform: uppercase;
    font-size: 1em;
    z-index: 3;
}

#description b{
    font-size: 1.05em;
}

#more a{
    position: absolute;
    left: 650px;
    top: 360px;
    text-align: left;
    width: 200px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    color: #252525;
    font-size: 0.8em;
    text-decoration: none;
        z-index: 3;
}

.legende, #legende {
    position: absolute;
    top: 380px;
    left: 70px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 342px;
    height: 85px;
    font-size: 16px;
    text-transform: none;
    z-index: 200;
    line-height: 85px;
    text-align:center;
}

.legende p, #legende p{
    vertical-align:middle;
    display:inline-block;
    line-height:1.3em; 
}

#legende2 {
    position: absolute;
    top: 365px;
    left: 60px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 342px;
    height: 90px;
    font-size: 20px;
    text-transform: none;
    text-align: center;
    z-index: 200;
    line-height: 90px;
    text-align:center;
}

#legende2 p {
    vertical-align:middle;
    display:inline-block;
    line-height:1.3em;
     font-size: 17px;
    text-transform : capitalize;
}

#legende2 p strong{
    font-weight: 600;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    font-size: 17px;
    text-transform: none;
    text-decoration: none;
}

#legende 2 .gros{
    font-weight: 600;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    font-size: 30px;
    text-transform: none;
}

.teasing a{
    position: absolute;
    bottom: 70px;
    right: 20px;
    width: 80px;
    font-family : 'Sephora', 'Helvetica', sans-serif;
    font-size: 8px;
    text-transform: uppercase;
    text-align: center;
    color: black;
    text-decoration: none;
}

.legende p strong, #legende p strong{
    font-weight: 600;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    font-size: 16px;
    text-transform: none;
}

#produit-comp p {
    margin-top: 20px;
}

#produit-comp strong {
    text-align: center;
    font-family: 'Century Gothic Bold','Helvetica', sans-serif;
    line-height: 1.3em;
    font-weight: 600;
    font-size: 35px;
    text-transform: none;
}

::-webkit-scrollbar {									/* Scrollbars */
	width: 14px;
	height: 14px;
	background: #ffffff 0 0 repeat;
}

::-webkit-scrollbar-track-piece {						/* Fond */
	background: transparent none;
	border: solid 4px transparent;
	border-right-width: 8px;
	margin: 4px;
	-webkit-box-shadow: inset 1px 1px 0 0 rgb(137,131,117), inset -1px -1px 0 0 rgb(224,220,210);
}

::-webkit-scrollbar-thumb {								/* Barre */
	border: solid 0 transparent;
        height: 30px;
	border-right-width: 4px;
	-webkit-box-shadow: inset 0 0 0 1px rgb(0, 0, 0), inset 0 0 0 6px rgb(0, 0, 0);
}
::-webkit-scrollbar-thumb:hover {						/* Barre */
	-webkit-box-shadow: inset 0 0 0 1px rgb(79, 79, 79), inset 0 0 0 6px rgb(110,110,110);
}

::-webkit-scrollbar-corner {							/* Coin de la fen�tre */
	background: #fff 0 0 no-repeat;
}

/* SpŽcifiques ˆ la page products.php */

#products-slide {
    background-image: url(./images/background4.jpg);
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
}

#products-slide .logo {
    position: absolute;
    top: 30px;
    left: 555px;
}

#products-slide #produit-comp {
    position: absolute;
    top: 140px;
    left: 560px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 280px;
    font-size: 1em;
    text-transform: none;
    text-align: center;
}

#products-slide #descriptionp {
    position: absolute;
    left: 600px;
    bottom: 230px;
    width: 230px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    color: black;
    font-size: 14px;
    text-transform: none;
}

#products-slide #descriptionp strong{
    font-family: 'Sephora', Helvetica, sans-serif;
    color: black;
    text-transform: uppercase;
    font-size: 15px;
}

#products-slide #more a{
    position: absolute;
    left: 610px;
    top: 280px;
    text-align: left;
    width: 200px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    color: #252525;
    font-size: 0.6em;
    text-decoration: none;
}

#products-slide .product1{
    position: absolute;
    left: 445px;
    top: 5px;
    z-index:5;
}

#products-slide .product2{
    position: absolute;
    left: 445px;
    top: 121px;
    z-index:5;
}

#products-slide .product3{
    position: absolute;
    left: 445px;
    top: 238px;
     z-index:5;
}

#products-slide .product4{
    position: absolute;
    left: 445px;
    top: 355px;
     z-index:5;
}

#barre2 .barre {
    position: absolute;
    bottom: 25px;
    right: 15px;
    z-index: 10;
}

#barre2 .min-pc {
    position: absolute;
    bottom: 20px;
    right: 200px;
    z-index: 20;
}

#barre2 .min-mm {
    position: absolute;
    bottom: 20px;
    right: 195px;
    z-index: 20;
}

#barre2 .replay2 {
    position: absolute;
    bottom: 25px;
    right: 85px;
    z-index: 20;
}

#barre2 .rejouer2 {
    position: absolute;
    bottom: 35px;
    right: 125px;
    width: 65px;
    line-height:0.8em;
    text-align: justify;
    z-index: 20;
}

#barre2 .rejouer2 a {
    text-decoration: none;
    color: black;
    font-size: 13px;
    text-transform: uppercase;
    font-family: 'Century Gothic', Helvetica, sans-serif;
}

#barre2 .rejouer2 a strong{
    font-family: 'Century Gothic Bold', Helvetica, sans-serif;
    font-size: 13px;
}