html, body { width:100%; height:100%; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; display:flex; justify-content:center; }
.container { width:100%; float:left; max-width:1200px; position:relative; }
.rooms { width:100%; float:left; position:relative; }
.room { width:100%; float:left; visibility:hidden; opacity:0; transition:visibility 0.3s, opacity 0.3s ease; position:absolute; top:0; left:0; }
.room.selected { visibility:visible; opacity:1; }
.image { width:100%; float:left; position:relative; margin-bottom:10px; }
.image img { width:100%; float:left; object-fit:contain; position:relative; z-index:1; border:1px solid #ccc; box-sizing:border-box; }
.image .bg1 { width:32%; height:100%; position:absolute; top:0; left:0; z-index:0; }
.image .bg2 { width:68%; height:100%; position:absolute; top:0; left:32%; z-index:0; }
.image .bg3 { width:100%; height:100%; position:absolute; top:0; left:0; z-index:0; }
.image .bg4 { width:55%; height:100%; position:absolute; top:0; left:0; z-index:0; }
.image .bg5 { width:45%; height:100%; position:absolute; top:0; left:55%; z-index:0; }
.image .bg6 { width:100%; height:100%; position:absolute; top:0; left:0; z-index:0; }
div.colors { width:100%; float:left; }
div.colors ul { width:100%; float:left; list-style:none; padding:0; margin:0; display:none; }
div.colors ul.selected { display:block; }
div.colors ul li { width:calc(100% / 9); float:left; text-align:center; margin:10px 0; }
div.colors ul li a { cursor:pointer; float:left; padding:10% 0; width:70%; margin:0 15%; border-radius:10px; min-height:90px; }
div.colors ul li a.selected { background:#eee; }
div.colors ul li a div { width:50px; height:50px; border-radius:100%; display:inline-block; border:1px solid rgba(0,0,0,0.3); box-sizing:border-box; }
div.colors ul li a span { width:100%; float:left; text-align:center; font-size:12px; margin-top:5px; }
ul.walls { width:100%; float:left; list-style:none; padding:0; text-align:center; margin:10px 0; justify-content:center; display:flex; }
ul.walls li { width:fit-content; margin-right:10px; float:left; }
ul.walls li:last-child { margin-right:0; }
ul.walls li a { cursor:pointer; background:#eee; font-size:12px; padding:6px; border:1px solid #ccc; border-radius:5px; }
ul.walls li a.selected { background:#ccc; }
.prev, .next { background:#de3b92; position:absolute; bottom:5%; color:#fff; z-index:2; padding:8px 14px; font-size:24px; font-weight:bold; cursor:pointer; right:0; }
.prev { right:50px; }
@media screen and (max-width: 750px){
	div.colors ul li { width:calc(100% / 6); }
}
@media screen and (max-width: 500px){
	div.colors ul li { width:calc(100% / 4); margin:0; }
}