.hidden {
    /*overflow: hidden; important for big folds but bad for demo because it cuts of the depth in other perspectives */
    transform-style: preserve-3d;
}

/* 
    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)
*/

.showHelpers .hidden .fold {
    outline: 1px solid rgba(255, 0, 0, .13);
    background: rgba(255, 0, 0, .13);
}
.showHelpers .hidden .fold .inner {
    outline: 1px solid rgba(0, 255, 0, .13);
    background: rgba(0, 255, 0, .13);
}
.showHelpers .hidden .fold .top,
.showHelpers .hidden .fold .bottom {
    overflow: visible;
}
.showHelpers .hidden .fold .top:after,
.showHelpers .hidden .fold .bottom:after {
    content: "";
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.34);
    position: absolute;
}

.hidden .fold {
    height: 0;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.hidden.ready .fold {
    transition: height 500ms linear;
}

/* reset the background color */
.hidden .fold section { background: none; }
/* 
    they are the two folds - top and bottom
*/
.hidden .fold .top,
.hidden .fold .bottom {
    width: 502px;
    transform-origin: top;
    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; /* hsl(192,6,33) */
    position: relative;
    overflow: hidden;
}

.hidden.ready .fold .top,
.hidden.ready .fold .bottom {
    /* closing transition */
    transition: transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in;
}

.hidden .fold .bottom {
    bottom: 0;
    position: absolute;
    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));
    transform-origin: bottom;
    transform: rotateX(90deg);
}

.hidden.visible .fold .top,
.hidden.visible .fold .bottom {
    transform: rotateX(0);
    background-color: white;
    /* opening transition */
    transition: transform 500ms cubic-bezier(0.000, 0.050, 1.000, 0.550), background-color 500ms ease-out;
}

/* inner holder for the content */
.hidden .fold .inner {
    position: absolute;
}

.seeMore {
    padding: 0;
    height: 23px;
    width: 500px;
    color: gray;
    text-align: center;
    background: repeating-linear-gradient(
        white, #ecefef 5px, #ccc 5px, #ccc 6px
    );
    border: 1px solid rgba(0,0,0,0.13);
    border-bottom: none;
    box-shadow: 0 -1px rgba(0,0,0,.16) inset;
    overflow: hidden;
    cursor: pointer;
    transition: 500ms;
}
.visible + .seeMore { 
    margin-bottom: -25px;
    border-top-color: white;
    border-bottom-color: white;
}

.seeMore > span {
    font-size: 11px;
    line-height: 29px;
    padding: 5px 8px;
    background: white;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.75), 0 1px white;
}


.hidden.ready, .hidden.ready.visible,
.hidden.ready .fold, .hidden.ready.visible .fold,
.hidden.ready .fold .top, .hidden.ready .fold .bottom,
.hidden.ready.visible .fold .top, .hidden.ready.visible .fold .bottom,
.hidden.ready .fold .inner,
.buddycloud .seeMore {
    transition-duration: 400ms;
}

.hidden.no-transition, .hidden.visible.no-transition,
.hidden.no-transition .fold, .hidden.visible.no-transition .fold,
.hidden.no-transition .fold .top, .hidden.no-transition .fold .bottom,
.hidden.visible.no-transition .fold .top, .hidden.visible.no-transition .fold .bottom,
.hidden.no-transition .fold .inner,
.buddycloud .visible.no-transition + .seeMore {
    transition: none;
}