.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 3s infinite;





}











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





  position: absolute;





  width: 100%;





  height: 100%;





  backface-visibility: hidden;





}











.flip-box-front {





  background-color: #0073c6;





  color: black;





}





.flip-box-back {





  background-color: #0073c6;





  color: white;





  transform: rotateY(180deg);





}











@keyframes fsi {





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





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





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





}