body {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  
}
.cinema{
  margin-top: 100px;
  overflow: hidden;

}
.content3{
  display: flex;
}
.content3 h1{
  font-size: 24px;
  margin-top: 50px;
}
.line4{
  width: 880px;
  height: 1px;
  background-color: black;
  margin: auto;
}
.child-a{
  width: 100%;
  
  height: 300px;
  background-color:;
  flex: 1 1 200px;
  margin: 1%;
}
.child-b{
  width: 100%;
  height: 300px;
  background-color: ;
  flex: 1 1 400px;
  margin: 1%;
}
.child-c{
  width: 100%;
  height: 300px;
  background-color: ;
  flex: 1 1 200px;
  margin: 1%;
}
.child-d{
  width: 50%;
  height: 300px;
  background-color: ;
  flex: 1 1 200px;
  margin: 5%;
}
.child-e{
  width: 100%;
  height: 300px;
  background-color: ;
  flex: 1 1 200px;
  margin: 5%;
}
.child-f{
  width: 50%;
  height: 300px;
  background-color: ;
  flex: 1 1 200px;
  margin: 5%;
}
.child-g{
  width: 100%;
  height: 300px;
  background-color: ;
  flex: 1 1 200px;

  margin: 5%;
}
.child-h{
  width: 100%;
  height: 300px;
  background-color: ;
  flex: 1 1 200px;
  margin: 5%;
}
.child-i{
  width: 100%;
  height: 300px;
  background-color:;
  flex: 1 1 200px;
  margin: 5%;
}
.child-j{
  width: 50%;
  height: 300px;
  background-color: ;
  flex: 1 1 200px;
  margin: 1%;
}
.child-k{
  width: 100%;
  height: 300px;
  background-color:;
  flex: 1 1 400px;
  margin: 1%;
}
.child-l{
  width: 50%;
  height: 300px;
  background-color: ;
  flex: 1 1 200px;
  margin: 1%;
}
.cinemaadd{
  width: 100%;
  height: 150px;
  background-color: ;
  flex: 1 1 100%;
  margin: 9%;
}


/*flip*/
.close {
  cursor: pointer;
  position: absolute;
  padding: 3px 5px;
  transform: translate(0%, -50%);
  background-color: red;
    border-radius: 50%;
   right: 100%;
   top: 0%;
    
    


}

.flip-box {
  background-color: transparent;
  width: 100px;
  height: 95px;
  perspective: 1000px;
  position: fixed;
  right: 15%;
  bottom: 5%;


}

.flip-box-inner{
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
    box-shadow: 1px 5px 5px #aaaaaa;
    border-radius: 10px;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
  margin: 0;
  padding: 0;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);

}
.flip-box-inner{
  animation: rotation 5s infinite ease;
}

@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }}

  #footer{
    width: 89%;
    position: relative;
    left: 10.5%;
    /* right: 25%; */
  }
  @media only screen and (max-width: 980px) {
  #footer{
    width: 100%;
    position: relative;
    left: 0%;
  }
  }