#motif {
    background-color:white;
    width: 100%;
    position: relative;
    height:60vh;
    overflow: hidden;
}
.motifh{
    text-align:left;
    margin-left:3%;
    color: #bbd29e;
}
.textile {
    display:none; 
}
.seul {
    margin-top:9%!important;
    width:60%;
    display:flex;
}
.motifstextiles {
    margin-top:3%!important;
    width:100%;
    height:100vh;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.boutontextile {
    position: absolute;
    display: block;
    width: 24%;
    z-index: 4;
    height: auto;
    top: 5%;
    left: 62%;
}


/*MEDIA SCREEN */
@media (min-width: 576px) {
    #motif {
    width: 100%;
    height:100vh;
}
    
}
/* Tablettes */
@media screen and (min-width:768px) {
#motif {
    width:100%;
    height:auto;
}
.boutontextile {
    width: 19%;
    position: absolute;
    display: block;
    z-index: 4;
    height: auto;
    top: 15%;
    left: 62%;
    }
    
.motifstextiles {
    width:100%;
    height:30vh;
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom:6%!important;
    }
    
.textile {
    display: flex;
    width:20%;
    margin:1%;
    border:5px solid white;
    }
    
.seul {
    display: none;
    }
}
/* */
@media (min-width: 992px) {
        
}
/* Ordinateur de bureau */
@media screen and (min-width:1024px) {
    #motif {
        width:100%;
        height:auto;
    }
    .boutontextile{
        width: 14%;
        top:20%;
    }   
}
@media screen and (min-width:1440px) {
    .boutontextile:{
        width: 15%;
    }
}
/* HD Desktop */

@media screen and (min-width:1920px) {

.boutontextile {
    width: 10%;
}
.motifstextiles {
    margin-top: 10%!important;
    margin-bottom: 11%!important;
}
}