/*#####################################################################*/
/*# CSS Flip Box Styles for flipping content Verticaly or Horizontaly #*/
/*#####################################################################*/
.flip-box                           {
                                        /*background-color: transparent;*/
                                        width: 100%;
                                        height: 400px;
                                        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                     {                                        
                                        height: 100%;
                                        transition: transform 1.2s ease-in-out;
                                        transform-style: preserve-3d;
                                        -webkit-transition: -webkit-transform 1.2s ease-in-out; /* Safari */
                                        -webkit-transform-style: preserve-3d; /* Safari */                                                                                     
                                    }
/* Position the front and back side */
.flip-box-front, .flip-box-back     {
                                        position: absolute;
                                        width: 100%;
                                        height: 100%;
                                        padding:30px; 
                                        box-sizing:border-box; 
                                        border:1px rgba(255, 255, 255, 0.2) solid; 
                                        color: white; 
                                        background-color: rgba(180, 205, 230, 0.2);                                        
                                        box-shadow:0px 20px 20px 0px rgba(0, 0, 0, 0.35); 
                                        backdrop-filter:contrast(1) saturate(100%) blur(8px); 
                                        -webkit-backdrop-filter:blur(8px) contrast(1) saturate(100%);                                         
                                        backface-visibility: hidden;
                                        -webkit-backface-visibility: hidden; /* Safari */                                                                                
                                    }
/* Style the front side */
.flip-box-front                     {                                                                                
                                        transform: rotateX(0deg);
                                        -webkit-transform: rotateX(0deg);
                                    }
/* Style the back side */
.flip-box-back                      {                                       
                                        transform: rotateX(180deg);                 /*Flip on vertical axis*/
                                        -webkit-transform: rotateY(-180deg);        /*Flip on vertical axis*/
                                    }