/* -------------------------------- 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:fixed;
    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%);
    -ms-transform:translateY(-50%);
    -o-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);
    -ms-transform:rotate(-7deg);
    -o-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%;
    font-size:1em;
    font-size:2vw;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-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-size:5vw;
    font-weight:bold;
    font-family:'Calibri', 'Arial';
    text-transform:uppercase;
    text-align:center;
    color:white;
    z-index:3;
}
.prix-container{
    position:relative;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.prix-public{
    position:absolute;
    width:10%;
    height:8%;
    top:85%;
    right:14%;
    font-size:4em;
    font-size:3vw;
    font-family:'Calibri', 'Arial';
    text-align:center;
    background:black;
    background-image:url(image/fd_prix_public.png);
    -webkit-background-size:100% 100%;
    -moz-background-size:100% 100%;
    -o-background-size:100% 100%;
    background-size:100% 100%;
    color:white;
    z-index:3;
}
.prix-reduc{
    position:absolute;
    width:10%;
    height:13%;
    top:58%;
    right:2%;
    font-size:3.5em;
    font-size:3vw;
    font-family:'Calibri', 'Arial';
    text-align:center;
    background-image:url(image/fd_reduc.png);
    -webkit-background-size:100% 100%;
    -moz-background-size:100% 100%;
    -o-background-size:100% 100%;
    background-size:100% 100%;
    color:white;
    z-index:3;
}
.prix-reduc .prix-container{
    padding-right:15%;
}
/* -------------------------------- PRODUIT ------------------------------ */
.produits{
    position:absolute;
    width:52%;
    height:92%;
    top:5%;
    left:24%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    z-index:3;
}
/* ----------------------- SLIDER - APP ------------------------------ */


.produits .slider_images{
    position:relative;
    top:15%;
    left:11%;
    width:70%;
    height:70%;
}
.produits .slider_images img{
    position:absolute;
    width:100%;
    height:100%;
    margin:0 5%;
    -webkit-border-radius:20%;
    -moz-border-radius:20%;
    border-radius:20%;
}
.slide{
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.slideActu{
    display:none;
}
.texte-associe{
    position:absolute;
    width:100%;
    left:0;
    height:4em;
    top:102%;
    margin:0 5%;
    padding:5px 0px;
    font-size:2em;
    font-size:2vw;
    font-family:sans-serif;
    text-transform:uppercase;
    text-align:center;
    color:#303030;
    background:white;
}
.texte-associe span{
    padding:4%;
}
/* ---------------- Page Partenaire && Actu || Promos ---------------- */
.partenaire, .actu{
    position:absolute;
    width:50%;
    top:14%;
    left:0%;
    height:86%;
    z-index:-1;
    -webkit-transform:translateX(-10%);
    -moz-transform:translateX(-10%);
    -ms-transform:translateX(-10%);
    -o-transform:translateX(-10%);
    transform:translateX(-10%);
}
.partenaire img, .actu img{
    max-width:200%;
    height:100%;
    position:absolute;
    top:50%;
    -moz-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.promo{
    position:absolute;
    width:40%;
    top:18%;
    left:0%;
    height:80%;
    z-index:-1;
}
.promo img{
    max-width:120%;
    height:82%;
    position:absolute;
    top:48%;

    -moz-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-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-size:15vh;
    font-family:'sport2000promoregular', sans-serif;
    text-transform:uppercase;
    z-index:3;
    -webkit-transform:rotate(-7deg);
    -moz-transform:rotate(-7deg);
    -ms-transform:rotate(-7deg);
    -o-transform:rotate(-7deg);
    transform:rotate(-7deg);
}
.texte-promo{
    position:absolute;
    width:45%;
    height:50%;
    top:20%;
    left:40%;
    font-size:8em;
    font-size:15vh;
    font-family:'sport2000promoregular', sans-serif;
    text-transform:uppercase;
    z-index:3;
    -webkit-transform:rotate(-7deg);
    -moz-transform:rotate(-7deg);
    -ms-transform:rotate(-7deg);
    -o-transform:rotate(-7deg);
    transform:rotate(-7deg);
}
.texte-partenaire p, .texte-actu p, .texte-promo p{
    position:relative;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-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;
    -moz-animation:zoom 15s infinite;
    -ms-animation:zoom 15s infinite;
    -o-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: 40%;
}
100%{
    -webkit-transform: rotate(0deg) scale(1);
}
}
@keyframes zoom{
0%{
    transform: rotate(0deg) scale(1);
}
50%{
    transform: rotate(3deg) scale(1.8);
    margin-top: 40%;
}
100%{
    transform: rotate(0deg) scale(1);
}
}
