body{
display:flex;
flex-direction:column;
height:80vh;
width:90vw;
background:black;
margin:auto;
}
#container{
display:flex;
justify-content:center;
perspective:1000px;

}
.bottom{
display:none;
background-color:brown;
height:100%;
width:100%;
z-index:0;
}
.section{
background:transparent;
width:250px;
height:200px;
margin-top:40vh;
display:flex;
justify-content:center;
 position:relative;
 transform-style:preserve-3d;
animation: spin 40s linear infinite;
}
.card{
display:inline-block;
width:202px;
height:200px;
margin:auto;
text-align:center;
background-color: black;
position:absolute;
/*animation: spin 120s linear infinite;*/

backface-visibility:hidden;
z-index:2;
}
.side{
display:flex;
width:48px;
height:200px;
flex-direction:column;

text-align:center;
background-color: black;
position:absolute;
/*animation: spin 120s linear infinite;*/

backface-visibility:hidden;
z-index:2;
}
.top{
width:200px;
height:48px;
background:black;
z-index:9999999;
}
.card  h3 {
margin:auto;
padding-top:40%;
color:white;
}
.blackwire{
margin:auto;
padding-top: 5px;
}
.blackwire p {
  padding: 0;
  margin: 0;
  font-size: 12px;
  color:white;
  font-weight:bold;
}

.top1{
 transform:translate(0px,0px)
           rotateX(90deg)
           rotateY(0deg)
           translateZ(24px);
}
.front1{
 background-image:url("family.jpg");
 background-size:100%,100%;
 transform:translate(0%,0px)
           rotateY(0deg)
           translateZ(24px);
}.back1{
 background-image:url("family2.jpg");
 background-size:100%,100%;
transform:translate(0%,0px)
           rotateY(180deg)
           translateZ(24px);
}
.side1{
 transform:translate(0px,0px)
           rotateY(90deg)
           translateZ(101px);
}
.side2{
 transform:translate(0px,0px)
           rotateY(-90deg)
           translateZ(101px);
}
.buttons{
display:flex;
justify-content:space-between;
}
.buttons button{
 width:50px;
 height:50px;
 border-radius:180px;
}
.btn{
cursor:pointer;
}
@keyframes spin{
    from{
        transform:rotateY(0deg);
    }to{
        transform:rotateY(360deg);
    }
}
body.iframe {
height:80vh;
width:90vw;
background:none;
}
body.iframe .section{margin:20px;}