html, body {
    margin:0;
	padding:0;
    font-family: 'Roboto', sans-serif;
    position: fixed;
    position: relative;
    overflow: hidden;
}

body {
    height:100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
}

#divCanvas{
	display: flex;
	align-items: center;
	justify-content: center;
    overflow: hidden;
    flex-flow : column;
    flex-basis:100%;
}

#fullscreen {
    height:100vh;
    height: calc(var(--vh, 1vh) * 100);
	width:100%;
	position:absolute;
	display:flex;
    margin: 0px;
    flex-flow : column;
}

#configuration, #divimage, #menugauche{
    background-color: rgb(67,68,68);
}
#configuration{
    width: 100%;
    position:relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-right : 2%;
    padding-left: 100px;
    flex: 0 0 100px;
}
#divimage{
    display: flex;
	/* align-items: center; */
	/* justify-content: center; */
    overflow: hidden;
    width: 100%;
}
#menugauche{
    flex: 0 0 100px;
}
#maison{
    overflow-y:auto;
    overflow-x: hidden;
    height: 100%;
}

#maison div{
    padding:7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maisonselected{
    background-color: white;
}

.BoutonMaison{
    width: 100%;
    object-fit: cover;
}


#configuration a{
    color:black;
    display: flex;
}
#configuration div{
    line-height: 0;
    display: flex;
}

#brique{
    flex-grow: 6;
}
#chassis{
    flex-grow: 2;
}
#toit{
    flex-grow: 2;
}
#divcote{
    flex-grow: 1;
}
#contact{
    flex-grow: 2;
    border-left: rgba(119,119,119) solid thin;
}
#ImagePrincipale{
    object-fit:contain;
}

#materiaux{
    border-right: rgba(119,119,119) solid thin;
    justify-content: flex-start;
}

#details{
    flex-grow: 2;
    justify-content: center;
    border-right: rgba(119,119,119) solid thin;
}
#contact{
    justify-content: flex-end;
}

#logo{
    width: 100px;
}

#configuration input, #configuration img{
    margin: 5px;
    padding-top:3px;
    width: 70px;
    height: 70px;
}

input:focus {outline: none}

@media (max-width: 1200px), (max-height: 675px) {
    #maison div{
        padding:6px;
    }
    #configuration{
        flex: 0 0 80px;
        padding-left: 80px;
    }
    #configuration input, #configuration img{
        margin: 4px;
        padding-top:3px;
        width: 60px;
        height: 60px;
    }
    #menugauche{
        flex: 0 0 80px;
    }
}

@media (max-width: 960px), (max-height: 590px) {
    #maison div{
        padding:5px;
    }
    #configuration{
        flex: 0 0 60px;
        padding-left: 60px;
    }
    #configuration input, #configuration img{
        width: 50px;
        height: 50px;
    }
    #menugauche{
        flex: 0 0 60px;
    }
}

@media (max-width: 810px), (max-height: 490px){
    #maison div{
        padding:4px;
    }
    #configuration{
        flex: 0 0 40px;
        padding-left: 40px;
    }
    #menugauche{
        flex: 0 0 40px;
    }
    #configuration input, #configuration img{
        margin: 3px;
        padding-top:3px;
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 525px), (max-height: 300px) {
    #maison div{
        padding:3px;
    }
    #configuration{
        flex: 0 0 20px;
        padding-left: 20px;
    }
    #menugauche{
        flex: 0 0 20px;
    }
    #configuration input, #configuration img{
        margin: 1px;
        padding-top:3px;
        width: 15px;
        height: 15px;
    }
}