/*#####################################################################*/
/*# CSS Flip Box Styles for flipping content Verticaly or Horizontaly #*/
/*#####################################################################*/
.flip-box                           {
                                        /*background-color: transparent;*/
                                        width: 100%;
                                        height: auto;
                                        perspective: 1000px; /* Remove this if you don't want the 3D effect */                                        
                                    }

/* This container is needed to position the front and back side */
.flip-box-inner                     {
                                        position: relative;
                                        width: 100%;
                                        height: 100%;
                                        text-align: center;
                                        transition: transform 0.8s;
                                        transform-style: preserve-3d;
                                        -webkit-transform-style: preserve-3d;
                                    }
/* Class that gets added to the class in JS mfFlip function.  This performs the actual flip */
.flip                               {
                                        transition: transform 0.8s;
                                        transform-style: preserve-3d;   
                                        transform: rotateX(180deg);
                                    }
/* Position the front and back side */
.flip-box-front, .flip-box-back     {
                                        position: absolute;
                                        width: 100%;
                                        height: 100%;
                                        -webkit-backface-visibility: hidden; /* Safari */
                                        backface-visibility: hidden;
                                    }
/* Style the front side */
.flip-box-front                     {
                                        z-index: 2;
                                        -webkit-transform: rotateX(0deg);
                                        transform: rotateX(0deg);
                                    }
/* Style the back side */
.flip-box-back                      {                                       
                                        /*color: white;*/
                                        /*transform: rotateX(180deg);*/             /*Flip on Horizontal axis*/
                                        /*-webkit-transform: rotateX(-180deg);*/    /*Flip on Horizontal axis*/
                                        transform: rotateX(180deg);                 /*Flip on vertical axis*/
                                        -webkit-transform: rotateY(-180deg);        /*Flip on vertical axis*/                                                
                                    }