/* 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: 535px;
}

#slide1 .nom-tuto   {
    position: absolute;
    top: 90px;
    left: 505px;
    text-align: center;
    font-family: 'Sephora', Helvetica, sans-serif;
    text-transform: uppercase;
    width: 340px;
    font-size: 25px;
}

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

#slide1 .nom {
    position: absolute;
    top: 232px;
    left: 650px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: #3b007f;
    width: 220px;
    font-size: 1.2em;
    line-height: 1em;
    text-transform: uppercase;
}

#slide1 .nom strong {
    font-size: 1.4em;
    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: 26px;
}

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

#slide2 .details {
    position: absolute;
    top: 50px;
    left: 180px;
}

#slide2 .formule {
    position: absolute;
    top: 140px;
    left: 80px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    font-size: 18px;
    text-align:center;
    width: 200px;
    line-height: 1em;
}

#slide2 .formule strong, #slide2 .brosse strong{
    font-size: 18px;
}

#slide2 .brosse {
    position: absolute;
    top: 145px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    left: 470px;
    font-size: 15px;
}

#slide2 .v1 {
    position: absolute;
    top: 320px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    text-align: center;
    left: 460px;
    font-size: 14px;
    width: 120px;
    line-height: 1em;
}

#slide2 .v2 {
    position: absolute;
    top: 320px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    text-align: center;
    left: 590px;
    font-size: 14px;
    width: 150px;
    line-height: 1em;
}

#slide2 .v3 {
    position: absolute;
    top: 320px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    text-align: center;
    left: 747px;
    font-size: 14px;
    width: 120px;
    line-height: 1em;
}

#slide2 .pc{
    position: absolute;
    top: 140px;
    right: 45px;
}

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

#slide2 .lg a strong:after{
    font-size: 15px;
    content : " ?";
    font-family: 'Sephora', Helvetica, sans-serif;
    font-weight: 200;
}

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


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

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

.rejouer {
    position: absolute;
    top: 300px;
    left: 690px;
    width: 120px;
    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: 23px;
    right: 0px;
    z-index: 10;
}

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

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

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

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

#slide3 .texte, #slide4 .texte {
    position: absolute;
    top: 160px;
    left: 580px;
}

#slide5 .texte {
    position: absolute;
    top: 180px;
    left: 580px;
}

#slide3 strong, #slide4 strong, #slide5 strong {
        font-size: 16px;
}

#slide3 .paragraphe, #slide4 .paragraphe, #slide5 .paragraphe  {
    position: absolute;
    top: 130px;
    left: 508px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    font-size: 16px;
    width: 320px;
    text-align: center;
}

#slide3 .paragraphe-2, #slide4 .paragraphe-2 {
    position: absolute;
    top: 350px;
    left: 510px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    font-size: 14px;
    width: 320px;
    text-align: center;
}

#slide5 .paragraphe-2 {
    position: absolute;
    top: 369px;
    left: 520px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    font-size: 14px;
    width: 300px;
    text-align: center;
}

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

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

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

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

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

#slide7 .texte {
    position: absolute;
    top: 178px;
    left: 490px;
    font-family: 'Century Gothic', 'Helvetica', sans-serif;
    color: rgba(0,0,0,1);
    width: 350px;
    font-size: 14px;
    text-transform: none;
    text-align: justify;
    margin-bottom: 10px;
}

#slide7 .texte strong {
    text-transform: uppercase;
    padding-top: 10px;
    text-align: left;
    line-height: 20px;
    font-family: 'Century Gothic Bold', 'Helvetica', sans-serif;
    font-size: 17px;
}

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

#slide7 .fleche {
    position: absolute;
    top: 310px;
    left: 430px;
}

#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);
}

.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{
-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: 620px;
}

#slide8 .produit {
    position: absolute;
    top: 160px;
    left: 470px;
}

/* 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;
}

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

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

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

#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;
    text-align: center;
    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;
}

#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;
}

.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: 0px;
    left: 535px;
}

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

#products-slide #description {
    position: absolute;
    left: 480px;
    top: 130px;
    text-align: left;
    width: 330px;
    font-family: 'Sephora', Helvetica, sans-serif;
    color: black;
    text-transform: uppercase;
    font-size: 1em;
}

#products-slide #descriptionc {
    position: absolute;
    left: 590px;
    top: 380px;
    text-align: left;
    width: 120px;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    color: black;
    font-size: 1em;
}

#products-slide #more a{
    position: absolute;
    left: 480px;
    top: 148px;
    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: 435px;
    top: 5px;
}

#products-slide .product2{
    position: absolute;
    left: 435px;
    top: 125px;
}

#products-slide .product3{
    position: absolute;
    left: 435px;
    top: 240px;
}

#products-slide .product4{
    position: absolute;
    left: 435px;
    top: 355px;
}

#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: 26px;
    right: 70px;
    z-index: 20;
}

#barre2 .rejouer2 {
    position: absolute;
    bottom: 35px;
    right: 100px;
    width: 60px;
    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: 11px;
}