/* -------------------------------- 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;
}
.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: 'Calibri', 'Arial';
    font-size: 2.7em;
    font-weight:400;
    z-index: 3;
}
.texte p, .prix p, .descriptif_produit p{
    position: relative;
    top: 50%;
     -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.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:10%;
    height: 4em;
    top: 102%;
    margin:  0 5%;
    font-size: 2em;
    font-family:sans-serif;
    text-transform:uppercase;
    color: #303030;
    text-align:center;
}


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


.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: 90%; 
    position: absolute;
}




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

/* --------------------- TEXT ANIMATION ------------------ */
.page .word1{
    opacity: 0;
    transition:all 2s ease .4s;
}

.page .word2{
    opacity: 0;
    transition:all 2s ease .6s;
}

.page .word3{
    opacity: 0;
    transition:all 2s ease .8s;
}

.page .word4{
    opacity: 0;
    transition:all 2s ease 1s;
}

.page .word5{
    opacity: 0;
    transition:all 2s ease 1.2s;
}

.page .word6{
    opacity: 0;
    transition:all 2s ease 1.4s;
}

.page .word7{
    opacity: 0;
    transition:all 2s ease 1.6s;
}

.page .word8{
    opacity: 0;
    transition:all 2s ease 1.8s;
}

.page .word9{
    opacity: 0;
    transition:all 2s ease 2s;
}

.page .word10{
    opacity: 0;
    transition:all 2s ease 2.2s;
}

.page .word11{
    opacity: 0;
    transition:all 2s ease 2.4s;
}

.page.page-active .word1, .page.page-active .word2, .page.page-active .word3,.page.page-active .word4,.page.page-active .word5,.page.page-active .word6, .page.page-active .word7, .page.page-active .word8, .page.page-active .word9, .page.page-active .word10,.page.page-active .word11{
    opacity: 1;
}

.img-partenaire {    
    -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.1);
    }
    100%{
        -webkit-transform: rotate(0deg) scale(1);
    }
}

@keyframes zoom {
    0%{
        transform: rotate(0deg) scale(1);
    }
    50%{
        transform: rotate(3deg) scale(1.1);
    }
    100%{
        transform: rotate(0deg) scale(1);
    }
}