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

}

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

}

@font-face {
    font-family: 'akzidenzboldcond';
    src: url('../font/akzidenzgrotesk-boldcond-webfont.eot');
    src: url('../font/akzidenzgrotesk-boldcond-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/akzidenzgrotesk-boldcond-webfont.woff2') format('woff2'),
         url('../font/akzidenzgrotesk-boldcond-webfont.woff') format('woff'),
         url('../font/akzidenzgrotesk-boldcond-webfont.ttf') format('truetype'),
         url('../font/akzidenzgrotesk-boldcond-webfont.svg#akzidenz-grotesk_bq_condensBd') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'akzidenzlight';
    src: url('../font/akzidenzgrotesk-light-webfont.eot');
    src: url('../font/akzidenzgrotesk-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/akzidenzgrotesk-light-webfont.woff2') format('woff2'),
         url('../font/akzidenzgrotesk-light-webfont.woff') format('woff'),
         url('../font/akzidenzgrotesk-light-webfont.ttf') format('truetype'),
         url('../font/akzidenzgrotesk-light-webfont.svg#akzidenz-grotesk_bq_lightRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'akzidenzlightitalic';
    src: url('../font/akzidenzgrotesk-lightitalic-webfont.eot');
    src: url('../font/akzidenzgrotesk-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/akzidenzgrotesk-lightitalic-webfont.woff2') format('woff2'),
         url('../font/akzidenzgrotesk-lightitalic-webfont.woff') format('woff'),
         url('../font/akzidenzgrotesk-lightitalic-webfont.ttf') format('truetype'),
         url('../font/akzidenzgrotesk-lightitalic-webfont.svg#akzidenz-grotesk_bq_lightIt') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'akzidenzlightcond';
    src: url('../font/akzidenzgrotesk-lightcond-webfont.eot');
    src: url('../font/akzidenzgrotesk-lightcond-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/akzidenzgrotesk-lightcond-webfont.woff2') format('woff2'),
         url('../font/akzidenzgrotesk-lightcond-webfont.woff') format('woff'),
         url('../font/akzidenzgrotesk-lightcond-webfont.ttf') format('truetype'),
         url('../font/akzidenzgrotesk-lightcond-webfont.svg#akzidenz-grotesk_bq_light_cRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
    position: absolute;
    background-image: url(../images/fond.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-color: grey;
    width: 100%;
    height:100%;
    top: 0;
    left:0;
    margin: 0;
    overflow: hidden;
    
    -webkit-transition: all 700ms ease-out;
    -moz-transition: all 700ms ease-out;
    -ms-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
}

p{
    font-family: caviar;
}

/*#conteneur{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}*/

#cercle{
    position: fixed;
    width: 26.041666666666668%;
    left: 36.9791666%;
    top: 20%;
    border: 4px solid black;
    border-radius: 100%;
    z-index: 10;
    cursor: pointer;
    
    -webkit-transition: all 700ms ease-out;
    -moz-transition: all 700ms ease-out;
    -ms-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
}

#barre{
    position: fixed;
    width: 100%;
    height: 8%;
    left: -100%;
    top: 4.5%;
    background-color: rgba(255,255,255,0.7);
    z-index: 0;
    
    -webkit-transition: all 700ms ease-out;
    -moz-transition: all 700ms ease-out;
    -ms-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
}

#bouton1{
    position: absolute;
    width: 10%;
    height: 100%;
    top:0;
    left:12%;
    cursor: pointer;
    background-color: #1c1f2e;
    text-align: center;
    line-height: 1vw;
    z-index: 1;
    overflow: hidden;
    background-position: center center;
}

#fondaccueil{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 2;
    
    -webkit-transition: all 1000ms ease-out;
    -moz-transition: all 1000ms ease-out;
    -ms-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
    transition: all 1000ms ease-out;
}

#bouton1:hover #fondaccueil{
    opacity: 1;
}

#boutontexte1{
    position: relative;
    font-family: geosanslight;
    color: white;
    font-size:1.7vw;
    z-index: 10;
    
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

#bouton2{
    position: absolute;
    width: 10%;
    height: 100%;
    top:0;
    left:27%;
    cursor: pointer;
    background-color: #1c1f2e;
    text-align: center;
    line-height: 1.5vw;
    z-index: 1;
    overflow: hidden;
}

#fondconcept{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 2;
    
    -webkit-transition: all 1000ms ease-out;
    -moz-transition: all 1000ms ease-out;
    -ms-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
    transition: all 1000ms ease-out;
}

#bouton2:hover #fondconcept{
    opacity: 1;
}

#boutontexte2{
    position: relative;
    font-family: geosanslight;
    color: white;
    font-size:1.5vw;
    z-index: 5;
    margin-top: 6.5%;
    z-index: 10;
    
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

#bouton3{
    position: absolute;
    width: 10%;
    height: 100%;
    top:0;
    left:42%;
    cursor: pointer;
    background-color: #1c1f2e;
    text-align: center;
    line-height: 1vw;
    overflow: hidden;
}

#fondprint{
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    opacity: 0;
    z-index: 2;
    
    -webkit-transition: all 1000ms ease-out;
    -moz-transition: all 1000ms ease-out;
    -ms-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
    transition: all 1000ms ease-out;
}

#bouton3:hover #fondprint{
    opacity: 1;
}


#boutontexte3{
    position: relative;
    font-family: geosanslight;
    color: white;
    font-size:1.7vw;
    z-index: 5;
    
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

#bouton4{
    position: absolute;
    width: 10%;
    height: 100%;
    top:0;
    left:57%;
    cursor: pointer;
    background-color: #1c1f2e;
    text-align: center;
    line-height: 1vw;
    overflow: hidden;
    z-index: 1;
}

#fondweb{
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    opacity: 0;
    z-index: 2;
    
    -webkit-transition: all 1000ms ease-out;
    -moz-transition: all 1000ms ease-out;
    -ms-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
    transition: all 1000ms ease-out;
}

#bouton4:hover #fondweb{
    opacity: 1;
}

#bouton4:hover #boutontexte4{
    color: black;
}

#boutontexte4{
    position: relative;
    font-family: geosanslight;
    color: white;
    font-size:1.7vw;
    z-index: 5;
    
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

#bouton5{
    position: absolute;
    width: 10%;
    height: 100%;
    top:0;
    left:72%;
    cursor: pointer;
    background-color: #1c1f2e;
    text-align: center;
    line-height: 1vw;
    overflow: hidden;
    z-index: 1;
}

#fondcours{
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    opacity: 0;
    z-index: 2;
    
    -webkit-transition: all 1000ms ease-out;
    -moz-transition: all 1000ms ease-out;
    -ms-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
    transition: all 1000ms ease-out;
}

#bouton5:hover #fondcours{
    opacity: 1;
}

#boutontexte5{
    position: relative;
    font-family: geosanslight;
    color: white;
    font-size:1.7vw;
    z-index: 5;
    
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

#bouton6{
    position: absolute;
    width: 10%;
    height: 100%;
    top:0;
    left:87%;
    cursor: pointer;
    background-color: #1c1f2e;
    text-align: center;
    line-height: 1vw;
    overflow: hidden;
    z-index: 1;
}

#fondcontact{
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    opacity: 0;
    z-index: 2;
    
    -webkit-transition: all 1000ms ease-out;
    -moz-transition: all 1000ms ease-out;
    -ms-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
    transition: all 1000ms ease-out;
}

#bouton6:hover #fondcontact{
    opacity: 1;
}

#boutontexte6{
    position: relative;
    font-family: geosanslight;
    color: white;
    font-size:1.7vw;
    z-index: 5;
    
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

#conteneur1{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    text-align: center;
}

#texteaccueil1{
    font-size: 3vw;
    margin-top: 17%;
    font-family: akzidenzlightcond;
    color: #efefef;
}

.fullcycle{
    font-family: akzidenzboldcond;
    color: #1c1f2e;
    font-size:3.5vw;
}

.gris{
    color:#b0b7dd;
    font-family: akzidenzlight;
    font-size:2.5vw;
}

#texteaccueil2{
    font-size: 1vw;
    margin-top: 2%;
    color: #efefef;
    font-family: akzidenzlightitalic;
}

#conteneur2{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 100%;
    z-index: -1;
    opacity: 0;
    
    -webkit-transition: all 700ms ease-out;
    -moz-transition: all 700ms ease-out;
    -ms-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
}

#divconcept{
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
}

#texteconcept1{
    display: inline-block;
    width: 60%;
    font-family: akzidenzlightcond;
    font-size: 3.5vw;
    margin-top: 20%;
    margin-left: 10%;
    color: #efefef;
    line-height: 3.5vw;
    padding-bottom: 2%;
    border-bottom: 1px solid #efefef;
}

.concept{
    font-family: akzidenzboldcond;
    color: #1c1f2e;
    font-size: 4vw;
}

#pour{
    font-size: 2.5vw;
}

#refonte{
    font-size: 4vw;
}

#texteconcept2{
    display: inline-block;
    width: 70%;
    font-family: geosanslight;
    font-size: 1vw;
    margin-top: -5%;
    margin-left: 10%;
    color: #efefef;
}

#conteneur3{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 200%;
    z-index: -1;
    opacity: 0;
    
    -webkit-transition: all 700ms ease-out;
    -moz-transition: all 700ms ease-out;
    -ms-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
}

#divprint1{
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
}

#texteprint1{
    font-family: akzidenzlightcond;
    font-size: 3.5vw;
    margin-top: 25%;
    margin-left: 20%;
    color: #efefef;
    line-height: 5.5vw;
}

#mission{
    font-family: akzidenzboldcond;
    color: #1c1f2e;
    font-size: 6vw;
}

#texteprint2{
    display: inline-block;
    width: 60%;
    font-family: geosanslight;
    font-size: 1vw;
    margin-top: 0%;
    margin-left: 10%;
    color: #efefef;
}

#divprint2{
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
}

#texteprint3{
    font-family: akzidenzlightcond;
    font-size: 3.5vw;
    margin-top: 25%;
    margin-left: 25%;
    color: #efefef;
    line-height: 4vw;
}

#texteprint4{
    display: inline-block;
    width: 60%;
    font-family: geosanslight;
    font-size: 1vw;
    margin-top: 0%;
    margin-left: 30%;
    color: #efefef;
    text-align: right;
}

#exister{
    font-family: akzidenzboldcond;
    color: #1c1f2e;
    font-size: 6vw;
}

#surle{
    margin-left: 10%;
    font-size: 2.5vw;
}

#net{
    font-size: 5.7vw;
}

#conteneur4{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 0;
    z-index: -1;
    opacity: 0;
    
    -webkit-transition: all 700ms ease-out;
    -moz-transition: all 700ms ease-out;
    -ms-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
}

#divweb{
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
}

#texteweb1{
    font-family: akzidenzboldcond;
    font-size: 6.5vw;
    margin-top: 24%;
    margin-left: 70%;
    color: #1c1f2e;
    line-height: 5.5vw;
}

#ligne{
    position: absolute;
    width: 60%;
    height: 1px;
    top: 37%;
    left: 30%;
    border-bottom: 1px solid #efefef;
}

#texteweb2{
    display: inline-block;
    width: 70%;
    font-family: geosanslight;
    font-size: 1vw;
    margin-top: -7%;
    margin-left: 10%;
    color: #efefef;
}

#conteneur5{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 100%;
    z-index: -1;
    opacity: 0;
    
    -webkit-transition: all 700ms ease-out;
    -moz-transition: all 700ms ease-out;
    -ms-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
}

#textecours1{
    margin-top: 17%;
    margin-left: 10%;
    font-family: akzidenzlightcond;
    color: #efefef;
}

#cycle{
    font-family: akzidenzboldcond;
    color: #efefef;
    font-size:4.5vw;
}

#propose{
    margin-left:5%;
    font-size: 3vw;
}

#textecours2{
    font-size: 3vw;
    margin-top: 0%;
    margin-right: 7%;
    font-family: akzidenzlightcond;
    color: #efefef;
    text-align: right;
}

#large{
    font-size: 4vw;
    color: #b0b7dd;
    font-family: akzidenzboldcond;
}

#particuliers{
    font-size: 2.5vw;
    margin-right: 7%;
}

#conteneur6{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 200%;
    z-index: -1;
    opacity: 0;
    
    -webkit-transition: all 700ms ease-out;
    -moz-transition: all 700ms ease-out;
    -ms-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
}

#twitter{
    position: absolute;
    top: 20%;
    left: 10%;
    width: 10%;
    border: 1px solid #efefef;
    border-radius: 100%;
    
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

#twitter:hover{
    left: 12%;
}

#facebook{
    position: absolute;
    top: 50%;
    left: 20%;
    width: 10%;
    border: 1px solid #efefef;
    border-radius: 100%;
    
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

#facebook:hover{
    left: 22%;
}

#google{
    position: absolute;
    top: 20%;
    right: 10%;
    width: 10%;
    border: 1px solid #efefef;
    border-radius: 100%;
    
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

#google:hover{
    right: 12%;
}

#skype{
    position: absolute;
    top: 50%;
    right: 20%;
    width: 10%;
    border: 1px solid #efefef;
    border-radius: 100%;
    
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

#skype:hover{
    right: 22%;
}

#youtube{
    position: absolute;
    top: 75%;
    left: 45%;
    width: 10%;
    border: 1px solid #efefef;
    border-radius: 100%;
    
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

#youtube:hover{
    top: 73%;
}

#socialmedia{
    display: none;
}