.piece {
position: absolute;
width: 25%;
height: 25%;
cursor: pointer; }
.piece1 {
left: 0;
top: 0;
}
.piece2 {
left: 25%;
top: 0;
}
.piece3 {
left: 50%;
top: 0;
}
.piece4 {
left: 75%;
top: 0;
}
.piece5 {
left: 0;
top: 25%;
}
.piece6 {
left: 25%;
top: 25%;
}
.piece7 {
left: 50%;
top: 25%;
}
.piece8 {
left: 75%;
top: 25%;
}
.piece9 {
left: 0;
top: 50%;
}
.piece10 {
left: 25%;
top: 50%;
}
.piece11 {
left: 50%;
top: 50%;
}
.piece12 {
left: 75%;
top: 50%;
}
.piece13 {
left: 0;
top: 75%;
}
.piece14 {
left: 25%;
top: 75%;
}
.piece15 {
left: 50%;
top: 75%;
}
.piece16 {
left: 75%;
top: 75%;
}
.popup-dentman {
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(0);
width: 450px;
height: 450px;
max-width: 80%;
max-height: 80%;
border-radius: 10px;
background-color: #6CACE4;
transition: all 0.4s; 
}
.popup-dentman.open {
transform: translateX(-50%) translateY(-50%) scale(1);
}
.popup-dentman .close {
position: absolute;
right: 0;
top: 0;
width: 45px;
height: 45px;
background-color: #fab742;
border-radius: 100%;
transform: translateX(30%) translateY(-30%);
cursor: pointer;
}
.popup-dentman .close:hover .croix {
transform: translate(7px, 17px) scale(0.8);
}
.popup-dentman .close div.close1 {
position: absolute;
width: 30px;
height: 3px;
background-color: white;
transform: rotate(45deg);
}
.popup-dentman .close div.close2 {
position: absolute;
width: 30px;
height: 3px;
background-color: white;
transform: rotate(-45deg);
}
.popup-dentman .croix {
position: relative;
width: 100%;
height: 100%;
transform: translate(8px, 21px);
transition: all 0.3s;
}
.popup-dentman-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 15px;
background-size: 90%;
background-position: center;
background-repeat: no-repeat;
}
.popup-dentman-text1 {
font-family: Cocon;
color: white;
text-align: center;
}
.popup-dentman-text2 {
font-family: Cocon;
color: white;
text-align: center;
}
.popup-dentman-img1 {
width: 70%;
max-height: 30%;
}
.popup-dentman-img1 img {
width: 100%;
max-height: 100%;
}
.popup-dentman-img2 {
width: 70%;
max-height: 30%;
}
.popup-dentman-img2 img {
width: 100%;
max-height: 100%;
}