@font-face {

    font-family: pangolin;
    src: url(../fonts/Pangolin-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}


* {

    list-style-type: none;
    box-sizing: border-box;
}


header {
    margin-top: -1%;
    height 50px;

}

body {
    background: rgb(76, 255, 208);
    background: linear-gradient(0deg, rgba(76, 255, 208, 1) 7%, rgba(2, 255, 15, 1) 100%);
    height: 900px;
    background-repeat: cover;
}


.singe img {
    width: 20%;
    margin-top: 10%;
    margin-left: 40%;
}

h1 {
    font-family: pangolin;
    font-size: 80px;
    background: linear-gradient(0deg, rgba(2, 255, 15, 1) 0%, rgba(76, 255, 208, 1) 39%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 4%;
    margin-top: 1%;
    position: absolute;
    z-index: 5;
}



.illu button {
    height: 100%;
    width: 40%;
    opacity: 0%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.design button {
    height: 100%;
    opacity: 0%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.graph button {
    height: 100%;
    width: 40%;
    opacity: 0%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

button:hover {
    cursor: pointer;
}

.illu {
    display: block;
    margin-top: 10%;
    background: url(../images/illu1.png);
    width: 33%;
    height: 10%;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 1%;
}

.illu:hover {
    background: url(../images/illu.gif);
    background-size: contain;
    background-repeat: no-repeat;
}



.design {
    display: block;
    margin-top: 10%;
    background: url(../images/D2.png);
    width: 33%;
    height: 10%;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.design:hover {
    background: url(../images/design.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



.graph {
    display: block;
    margin-top: 10%;
    background: url(../images/G3.png);
    width: 33%;
    height: 12%;
    float: left;
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
}

.graph:hover {
    background: url(../images/graphisme.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}






footer {
    width: 100%;
}


/*animation banniere*/

@keyframes animbanniere {

    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}

.banniere {
    margin-top: 2%;
    animation: animbanniere 15s infinite linear;
    background-image: url(../images/singeblanc.png);
    background-size: contain;
    height: 100px;
    position: relative;
    z-index: 4;
}

.singe img {}

.singe:hover {}


.chaise {
    display: block;
    margin-top: 5%;
    margin-right: 5%;
    background: url(../images/chaise1.png);
    width: 33%;
    height: 80%;
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
    align-self: flex-end;


}

.chaise:hover {
    background: url(../images/chaise2.gif);
    background-size: contain;
    background-repeat: no-repeat;


}


.textchaise {
    text-align: right;
    font-size: 30px;
    margin-top: 15%;
    margin-left: 15%;
    position: absolute;
    font-family: pangolin;
    color: white;
    width: 40%;
}

.woufi {
    background-image: url(../images/woufiweb.png);
    display: block;
    margin-top: 1%;
    margin-left: 5%;
    width: 25%;
    height: 70%;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;

}

.skate {
    background-image: url(../images/skatweb.png);
    display: block;
    margin-top: 1%;
    width: 30%;
    height: 70%;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;

}

.woufitriste1 {
    background-image: url(../images/woufitriste1.png);
    display: block;
    margin-top: 1%;
    width: 30%;
    height: 50%;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;

}

.woufitriste2 {
    background-image: url(../images/woufitriste2.png);
    display: block;
    width: 30%;
    height: 50%;
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
}

.woufitriste3 {
    background-image: url(../images/woufitriste3.png);
    display: block;
    width: 30%;
    height: 50%;
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
}

.caf {
    background-image: url(../images/caf.png);
    display: block;
    width: 30%;
    height: 90%;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 2%;
    margin-left: 2%;
}

.pey {
    background-image: url(../images/pey.png);
    width: 45%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    margin-top: 45px;
}

.cc1 {
    background-image: url(../images/CC1.png);
    width: 45%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    margin-top: 45px;
}

.DDD1 {
    background-image: url(../images/3D1.png);
    width: 45%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    margin-top: 45px;
}

.naton {
    background-image: url(../images/naton.png);
    width: 45%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    margin-top: 45px;
}

.pepere {
    background-image: url(../images/pepere.png);
    width: 45%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    margin-top: 45px;
}


.fdlm {
    background-image: url(../images/fdlm.png);
    width: 45%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    margin-top: 45px;
}

.maison {
    background-image: url(../images/m3.png);
    width: 50px;
    height: 80px;
    margin-right: 10px;
    margin-top: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    float: right;
}

.maison:hover {
    background-image: url(../images/maison.gif);
    width: 50px;
    height: 80px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    float: right;
}

.maison button {
    width: 100%;
    height: 100%;
    opacity: 0%;
}

.maison2 {
    background-image: url(../images/m3.png);
    width: 50px;
    height: 80px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    float: right;
}

.maison2:hover {
    background-image: url(../images/maison.gif);
    width: 50px;
    height: 80px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    float: right;
}

.maison2 button {
    width: 100%;
    height: 100%;
    opacity: 0%;
}

@media only screen and (max-width: 1180px) {

    .caf,
    .woufi,
    .skate,
    .woufitriste1,
    .woufitriste2,
    .woufitriste3,
    .pey,
    .fdlm,
    .pepere,
    .cc1,
    .DDD1,
    .naton,
    .illu,
    .design,
    .graph {
        width: 100%;
    }
    
    .body {
        height: 2500px;
    }

    .illu,
    .design,
    .graph {
        background-position: center;
        align-content: center;
    }

    .graph:hover,
    .design:hover,
    .illu:hover {
        background-position: center;
    }

    .graph button,
    .design button,
    .illu button {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .textchaise {
        margin-left: auto;
        font-size: 20px;
    }
    
    .chaise {
        height: 30%;
    }
}