/* Flip bOx styles */

.flip-box {
  background-color: transparent;
  width: 100%;
  max-width:500px;
  height: 350px;
  /*border: 1px solid #f1f1f1;*/
  perspective: 1000px;
  
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

.flip-box-front, .flip-box-front2, .flip-box-front3, .flip-box-front4, .flip-box-front5, .flip-box-front6, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front3, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}



.flip-box-front {
	background-color: #ffffff;
	color: black; /* code each box up accordingly eg flip-box-front1,2,3,4,5,6  images 414 x 300 */;
	background-image: url('../box_images/renovation_box.jpg');
	overflow: hidden;
	background-repeat: no-repeat;
}

.flip-box-front2 {
	background-color: #ffffff;
	color: black; /* code each box up accordingly eg flip-box-front1,2,3,4,5,6  images 414 x 300 */;
	background-image: url('../box_images/loft_box.jpg');
	overflow: hidden;
	background-repeat: no-repeat;
}
.flip-box-front3 {
	background-color: #ffffff;
	color: black; /* code each box up accordingly eg flip-box-front1,2,3,4,5,6  images 414 x 300 */;
	background-image: url('../box_images/garage_box.jpg');
	overflow: hidden;
	background-repeat: no-repeat;
}

.flip-box-front3 {
	background-color: #ffffff;
	color: black; /* code each box up accordingly eg flip-box-front1,2,3,4,5,6  images 414 x 300 */;
	background-image: url('../box_images/garage_box.jpg');
	overflow: hidden;
	background-repeat: no-repeat;
}

.flip-box-front4 {
	background-color: #ffffff;
	color: black; /* code each box up accordingly eg flip-box-front1,2,3,4,5,6  images 414 x 300 */;
	background-image: url('../box_images/extension_box.jpg');
	overflow: hidden;
	background-repeat: no-repeat;
}

.flip-box-front5 {
	background-color: #ffffff;
	color: black; /* code each box up accordingly eg flip-box-front1,2,3,4,5,6  images 414 x 300 */;
	background-image: url('../box_images/general_box.jpg');
	overflow: hidden;
	background-repeat: no-repeat;
}

.flip-box-front6 {
	background-color: #bbb;
	color: black; /* code each box up accordingly eg flip-box-front1,2,3,4,5,6  images 414 x 300 */;
	background-image: url('../box_images/kitchen_box.jpg');
	overflow: hidden;
	background-repeat: no-repeat;
}


.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateX(180deg);
  width:96%;
  padding-left:2%;
  padding-right:2%;
}