/* Project:  City Priority
 * Developed by Publicis Singapore
 * Author - HtetHtetWin
 * Created Date - 27.03.2015
 */
.paperfold {
overflow: hidden;
position: relative;
-webkit-transform: translateZ(0);
background-color: #ffffff;
}
.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 {

-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-color: #ffffff;
overflow: hidden;
position: relative;
transform-origin: top;
transform: rotateX(-90deg);
width: 100%;

}
.paperfold .bottom {

-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);

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: #ffffff;
position: absolute;
top: 0;
z-index: 100;

pading-left: 20px;
}
.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);

background-color: #ffffff;

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;
}
.paperfold .panel{
  background-color:#ffffff;
}