/* 
=============================================================================

All of this is based on nice work from mrflix (http://www.felixniklas.de/) 
in Paperfold (https://developer.mozilla.org/en-US/demosdetail/paperfold-css)

=============================================================================

Every fold is holding two identical divs: top and bottom 
the children divs are positioned relative to it
the slice grows from zero to 1/n of the elements height (n = number of slices)

Easing functions
================

kappa = 0.5522847498307936
- half circle (low): cubic-bezier(0.552, 0.000, 1.000, 0.448)
- half circle (top): cubic-bezier(0.000, 0.552, 0.448, 1.000) 
- ease cubic-bezier(0.250, 0.100, 0.250, 1.000)
- inverse-ease cubic-bezier(0.750, 0.000, 0.750, 0.900) 

- self tested cubic-bezier(0.500, 0.200, 0.900, 0.820)
*/
.container { float: right; margin-top: 25px; }
.panel { }
.paperfold-toggle { background: none; padding-right:16px;}
.paperfold { overflow: hidden; position: relative; -webkit-transform: translateZ(0); margin-top: 26px; right: 0; z-index:1; }
.paperfold .fold { -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; height: 0; perspective: 1000px; position: relative; }
.paperfold, .paperfold .fold { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }
/* They are the two folds - top and bottom */
.paperfold .top, .paperfold .bottom { background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.55) 3%, rgba(255,255,255,0.5) 66%, rgba(255,255,255,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.55) 3%, rgba(255,255,255,0.5) 66%, rgba(255,255,255,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.55) 3%, rgba(255,255,255,0.5) 66%, rgba(255,255,255,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.55) 3%, rgba(255,255,255,0.5) 66%, rgba(255,255,255,0)); -webkit-transform-origin: top; -moz-transform-origin: top; -o-transform-origin: top; -ms-transform-origin: top; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); background-image: linear-gradient(top,  rgba(255,255,255,0.5),  rgba(255,255,255,0.55) 3%,  rgba(255,255,255,0.5) 66%,  rgba(255,255,255,0)); background-color: #505455; overflow: hidden; position: relative; transform-origin: top; transform: rotateX(-90deg); width: 100%; }
.paperfold .bottom { background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5) 34%, rgba(255,255,255,.95) 97%, rgba(255,255,255,1)); background-image: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5) 34%, rgba(255,255,255,.95) 97%, rgba(255,255,255,1)); background-image: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5) 34%, rgba(255,255,255,.95) 97%, rgba(255,255,255,1)); background-image: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5) 34%, rgba(255,255,255,.95) 97%, rgba(255,255,255,1)); -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -o-transform-origin: bottom; -ms-transform-origin: bottom; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -o-transform: rotateX(90deg); -ms-transform: rotateX(90deg); /*background-image: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5) 34%, rgba(255,255,255,.95) 97%, rgba(255,255,255,1));*/
bottom: 0; position: absolute; transform-origin: bottom; transform: rotateX(90deg); }
/* Inner holder for the content */
.paperfold .inner { position: absolute; }
/* Background for the default elements */
.paperfold .default-content { background: rgb(0,0,0,0.5); position: absolute; top: 0; z-index: 100;  }
.paperfold .default-content ul li{ height:45px; line-height:45px;}
.paperfold .default-content ul li a{ height:45px; line-height:45px; display: block; color:#fff;}
.paperfold.ready .fold { -webkit-transition: height 500ms linear; -moz-transition: height 500ms linear; -o-transition: height 500ms linear; -ms-transition: height 500ms linear; transition: height 500ms linear; }
/* Closing transition */
.paperfold.ready .fold .top, .paperfold.ready .fold .bottom { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in; -moz-transition: -moz-transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in; -o-transition: -o-transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in; -ms-transition: -ms-transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in; transition: transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in; }
/* Opening transition */
.paperfold.visible .fold .top, .paperfold.visible .fold .bottom { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -o-transform: rotateX(0); -ms-transform: rotateX(0); -webkit-transition: -webkit-transform 500ms cubic-bezier(0.000, 0.050, 1.000, 0.550), background-color 500ms ease-out; -moz-transition: -moz-transform 500ms cubic-bezier(0.000, 0.050, 1.000, 0.550), background-color 500ms ease-out; -o-transition: -o-transform 500ms cubic-bezier(0.000, 0.050, 1.000, 0.550), background-color 500ms ease-out; -ms-transition: -ms-transform 500ms cubic-bezier(0.000, 0.050, 1.000, 0.550), background-color 500ms ease-out; background-color: #FFF; transform: rotateX(0); transition: transform 500ms cubic-bezier(0.000, 0.050, 1.000, 0.550), background-color 500ms ease-out; }
.paperfold.ready, .paperfold.ready .fold, .paperfold.ready .fold .top, .paperfold.ready .fold .bottom, .paperfold.ready .fold .inner, .paperfold.ready.visible, .paperfold.ready.visible .fold, .paperfold.ready.visible .fold .top, .paperfold.ready.visible .fold .bottom { -webkit-transition-duration: 400ms; -moz-transition-duration: 400ms; -o-transition-duration: 400ms; -ms-transition-duration: 400ms; transition-duration: 400ms; }
.paperfold.no-transition, .paperfold.no-transition .fold, .paperfold.no-transition .fold .top, .paperfold.no-transition .fold .bottom, .paperfold.no-transition .fold .inner, .paperfold.visible.no-transition, .paperfold.visible.no-transition .fold, .paperfold.visible.no-transition .fold .top, .paperfold.visible.no-transition .fold .bottom { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; }