.flip-box {





  background-color: transparent;





  height: 150px;





}





  @media screen and (min-width:400px){





.flip-box {





  background-color: transparent;





  height: 250px;





}  





} 





  @media screen and (min-width:500px){





.flip-box {





  background-color: transparent;





  height: 300px;





}  





}





 @media screen and (min-width:600px){





.flip-box {





  background-color: transparent;





  height: 450px;





}  





} 





@media screen and (min-width:700px){





.flip-box {





  background-color: transparent;





  height: 500px;





}  





} 





@media screen and (min-width:800px){





.flip-box {





  background-color: transparent;





  height: 600px;





}  





} 





  @media screen and (min-width:900px){





.flip-box {





  background-color: transparent;





  height: 700px;





}  





} 





@media screen and (min-width:1000px){





.flip-box {





  background-color: transparent;





  height: 800px;





}  





}  





 





  











.flip-box-inner {





  











  position: relative;











  width: 100%;











  height: 100%;











  text-align: center;











  transition: transform 0.8s;











  transform-style: preserve-3d;

















}























.flip-box-inner {











animation:fsi 5s infinite;











}

















.flip-box-front, .flip-box-back {











  position: absolute;











  width: 100%;











  height: 100%;











  backface-visibility: hidden;











}























.flip-box-front {











  background-color: transparent;











  color: black;











}























.flip-box-back {











  background-color: transparent;











  color: white;











  transform: rotateY(180deg);











}











@keyframes fsi {





      0%{transform: rotateY(0deg);}





     15%{transform: rotateY(180deg);}





     30%{transform: rotateY(0deg);}





     75%{transform: rotateY(180deg);}





    100%{transform: rotateY(0deg);}





}