/* -------------------------------- PROMO ------------------------------ */

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

}


*{margin:0;padding:0;}
body{
 overflow:hidden;
 background-color: white;
 position:absolute;
 width: 100%;
 height:100%;
}
.fond{
    position:absolute;
    width: 100%;
    height:100%;
    z-index: 2;
}

.fond-produit{
    z-index: 4;   
}
.produit{
    position:absolute;
    width: 30%;
    top:18%;
    left:3%;
    height:80%;
    z-index: 3;
}
.produit img{
    width:100%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.texte{
    position:absolute;
    width: 50%;
    height: 50%;
    top: 15%;
    left: 45%;
    font-size: 8em;
    font-family: 'sport2000promoregular', sans-serif;
    text-transform: uppercase;
    z-index: 3;
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    transform: rotate(-7deg);
    
}
.descriptif_produit{
    position:absolute;
    text-transform: uppercase;
    width:35%;
    height: 20%;
    bottom: 5%;
    left:40%;
    font-family: 'sans-serif','Arial';
    font-size: 2.3em;
    font-weight:600;
    z-index: 3;
}
.texte p, .descriptif_produit p{
    position: relative;
    top: 50%;
     -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.prix .prix-container{
    position: relative;
    top: 52%;
     -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.prix-public{
    position: relative;   
    font-size: 0.3em;
    color:rgba(255, 255, 255, 0.8);
    text-decoration: line-through;
}

.prix-public.prix-reduc{
    position: relative;   
    font-size: 0.3em;
    color:rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.prix-reduc{
    position: relative;   
    font-size: 0.4em;
    color:rgba(255, 255, 255, 0.9);
} 
.texte p b{
    font-size: 1.2em;
    font-weight: 600;
}
.prix{
    position:absolute;
    width: 16%;
    height: 31%;
    top: 61%;
    left: 78.5%;
    font-size: 6em;
    font-weight: bold;
    font-family: 'Calibri', 'Arial';
    text-transform: uppercase;
    text-align: center;
    color: white;
    z-index: 3;
    vertical-align: middle;
}

/* -------------------------------- PRODUIT ------------------------------ */
.produits{
    position:absolute;
    width:52%;
    height: 92%;
    top:5%;
    left:24%;
    border-radius: 100%;
    z-index: 3;
}

/* ----------------------- SLIDER - APP ------------------------------ */


.produits .slider_images{
    position: relative;
    top: 15%;
    left:11%;
    width:70%;
    height: 70%;
    /*animation:lecture 20s infinite;
    -webkit-animation:lecture 20s infinite; /* Safari and Chrome */
}

.produits .slider_images img {
    position: absolute;
    width: 100%;
    height: 100%;
    margin:  0 5%;
    border-radius: 20%;
}

.slide{
   display:none;
}

.slideActu{
   display:none;
}

.texte-associe{
    position: absolute;
    width: 80%;
    left:0;
    height: 4em;
    top: 102%;
    margin:  0 5%;
    padding: 5px 70px;
    font-size: 2em;
    font-family:sans-serif;
    text-transform:uppercase;
    color: #303030;
    text-align:center;
    background:white;
}


/* ---------------- Page Partenaire && Actu || Promos ---------------- */
.partenaire, .actu{
    position:absolute;
    width: 50%;
    top:14%;
    left:0%;
    height:86%;
    z-index: -1;

     -moz-transform: translateX(-10%);
     transform: translateX(-10%);   
}
.partenaire img, .actu img{
   max-width:200%;
   height: 100%; 

    position: absolute;
    top:50%;
   /* z-index: -1; */

    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
     translateY(-50%); 
  
}


.promo{
    position:absolute;
    width: 40%;
    top:18%;
    left:0%;
    height:80%;
    z-index: -1;

  /*   -moz-transform: : translateX(-200px);
     transform: : translateX(-200px);   */
}
.promo img{
    max-width:120%;
    height: 82%; 

    position: absolute;
    top:48%;
   /* z-index: -1; */
   -moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
   transform:  translateY(-50%);  
}

.promo img.logo-marque{
    position:absolute;
    top:820px;left:10px;
    max-width:150px;
    max-height:150px;
}


.texte-partenaire, .texte-actu{
    position:absolute;
    width: 45%;
    height: 50%;
    top: 25%;
    left: 52%;
    font-size: 8em;
    font-family: 'sport2000promoregular', sans-serif;
    text-transform: uppercase;
    z-index: 3;
    -webkit-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
}
.texte-promo{
    position:absolute;
    width: 45%;
    height: 50%;
    top: 20%;
    left: 40%;
    font-size: 8em;
    font-family: 'sport2000promoregular', sans-serif;
    text-transform: uppercase;
    z-index: 3;
    -webkit-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
}
.texte-partenaire p, .texte-actu p, .texte-promo p{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.texte-partenaire p b, .texte-actu p b{
    font-size: 1.2em;
    font-weight: 600;
}

.texte-actu{
    color: white;
}

i{
    color:red;
    font-style:normal;
}

/* Main affichage */
.page{
    position:absolute;
    width:100%;
    height: 100%;
    display:none;
}

.page-active{
    display:block;
}



.img_active{

    position: absolute;
}

/* ANIMATION */

.img-produit {    
    -webkit-animation: zoom 15s infinite;
    animation: zoom 15s infinite;
}

@-webkit-keyframes zoom {
    0%{
        -webkit-transform: rotate(0deg) scale(1);
    }
    50%{
        -webkit-transform: rotate(3deg) scale(1.8);
        margin-top: 50%;
    }
    100%{
        -webkit-transform: rotate(0deg) scale(1);
    }
}

@keyframes zoom {
    0%{
        transform: rotate(0deg) scale(1);
    }
    50%{
        transform: rotate(3deg) scale(1.8);
        margin-top: 50%;
    }
    100%{
        transform: rotate(0deg) scale(1);
    }
}