body {
    font-family: 'PT Sans', sans-serif;
    min-height: 740px;
    color: #621708;

    background: rgb(215, 215, 215);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#FFFCF8), to(#FFECB8));
    background: -webkit-radial-gradient(#FFFCF8, #FFECB8);
    background:    -moz-radial-gradient(#FFFCF8, #FFECB8);
    background:     -ms-radial-gradient(#FFFCF8, #FFECB8);
    background:      -o-radial-gradient(#FFFCF8, #FFECB8);
    background:         radial-gradient(#FFFCF8, #FFECB8);
}

.slide {
    display: block;

    width: 900px;
    height: 700px;
    padding: 40px 60px;

    background-color: #FFE8E1;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

    color: #621708; /* rgb(102, 102, 102); */
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -1px;
}

.slide q {
    display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 100px;
}

.slide q strong {
    white-space: nowrap;
}

#Lift-Up b {
    display: inline-block;
    -webkit-transition: 0.5s;
    -moz-transition:    0.5s;
    -ms-transition:     0.5s;
    -o-transition:      0.5s;
    transition:         0.5s;
}

#Lift-Up.present .rotating {
    -webkit-transform: rotate(-180deg);
    -moz-transform:    rotate(-180deg);
    -ms-transform:     rotate(-180deg);
    -o-transform:      rotate(-180deg);
    transform:         rotate(-180deg);

    -webkit-transition-delay: 0.25s;
    -moz-transition-delay:    0.25s;
    -ms-transition-delay:     0.25s;
    -o-transition-delay:      0.25s;
    transition-delay:         0.5s;
}
#Face {
    width: 900px;
    height: 700px;
    opacity: 1;
    background-image: url("/img/sad-happy-face.png");
    background-position: center;
    background-repeat: no-repeat;
}

#Face.past {
    opacity: 1;
    /* background-color: #E4C652; */
}

#method { width: 800px }

/*
    ... so we define display to `inline-block` to enable transforms and
    transition duration to 0.5s ...
*/
#method b {
    display: inline-block;
    -webkit-transition: 0.5s;
    -moz-transition:    0.5s;
    -ms-transition:     0.5s;
    -o-transition:      0.5s;
    transition:         0.5s;
}

/*
    ... and we want 'positioning` word to move up a bit when the step gets
    `present` class ...
*/
#method.present .positioning {
    -webkit-transform: translateY(-10px);
    -moz-transform:    translateY(-10px);
    -ms-transform:     translateY(-10px);
    -o-transform:      translateY(-10px);
    transform:         translateY(-10px);

    -webkit-transition-delay: 0.25s;
    -moz-transition-delay:    0.25s;
    -ms-transition-delay:     0.25s;
    -o-transition-delay:      0.25s;
    transition-delay:         01.25s;
}

/*
    ... 'rotating' to rotate a quarter of a second later ...
*/
#method.present .rotating {
    -webkit-transform: rotate(-10deg);
    -moz-transform:    rotate(-10deg);
    -ms-transform:     rotate(-10deg);
    -o-transform:      rotate(-10deg);
    transform:         rotate(-10deg);

    -webkit-transition-delay: 0.25s;
    -moz-transition-delay:    0.25s;
    -ms-transition-delay:     0.25s;
    -o-transition-delay:      0.25s;
    transition-delay:         01.5s;
}

/*
    ... and 'scaling' to scale down after another quarter of a second.
*/
#method.present .scaling {
    -webkit-transform: scale(0.7);
    -moz-transform:    scale(0.7);
    -ms-transform:     scale(0.7);
    -o-transform:      scale(0.7);
    transform:         scale(0.7);

    -webkit-transition-delay: 0.5s;
    -moz-transition-delay:    0.5s;
    -ms-transition-delay:     0.5s;
    -o-transition-delay:      0.5s;
    transition-delay:         01.75s;
}



#method-peache p {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style:    preserve-3d; /* Y U need this Firefox?! */
    -ms-transform-style:     preserve-3d;
    -o-transform-style:      preserve-3d;
    transform-style:         preserve-3d;
}

/*
    Below we position each word separately along Z axis and we want it to transition
    to default position in 0.5s when the step gets `present` class.

    Quite a simple idea, but lot's of styles and prefixes.
*/
#its-peache span,
#its-peache b {
    display: inline-block;
    -webkit-transform: translateZ(40px);
    -moz-transform:    translateZ(40px);
    -ms-transform:     translateZ(40px);
    -o-transform:      translateZ(40px);
    transform:        translateZ(40px);

    -webkit-transition: 0.5s;
    -moz-transition:    0.5s;
    -ms-transition:     0.5s;
    -o-transition:      0.5s;
    transition:         0.5s;
}

#its-peache .have {
    -webkit-transform: translateZ(-40px);
    -moz-transform:    translateZ(-40px);
    -ms-transform:     translateZ(-40px);
    -o-transform:      translateZ(-40px);
    transform:         translateZ(-40px);
}

#its-peache .you {
    -webkit-transform: translateZ(20px);
    -moz-transform:    translateZ(20px);
    -ms-transform:     translateZ(20px);
    -o-transform:      translateZ(20px);
    transform:         translateZ(20px);
}

#its-peache .noticed {
    -webkit-transform: translateZ(-40px);
    -moz-transform:    translateZ(-40px);
    -ms-transform:     translateZ(-40px);
    -o-transform:      translateZ(-40px);
    transform:         translateZ(-40px);
}

#its-peache .its {
    -webkit-transform: translateZ(60px);
    -moz-transform:    translateZ(60px);
    -ms-transform:     translateZ(60px);
    -o-transform:      translateZ(60px);
    transform:         translateZ(60px);
}

#its-peache .in {
    -webkit-transform: translateZ(-10px);
    -moz-transform:    translateZ(-10px);
    -ms-transform:     translateZ(-10px);
    -o-transform:      translateZ(-10px);
    transform:         translateZ(-10px);
}

#its-peache .footnote {
    font-size: 32px;

    -webkit-transform: translateZ(-10px);
    -moz-transform:    translateZ(-10px);
    -ms-transform:     translateZ(-10px);
    -o-transform:      translateZ(-10px);
    transform:         translateZ(-10px);
}

#its-peache.present span,
#its-peache.present b {
    -webkit-transform: translateZ(0px);
    -moz-transform:    translateZ(0px);
    -ms-transform:     translateZ(0px);
    -o-transform:      translateZ(0px);
    transform:         translateZ(0px);
}


#its-peache {
    text-align: center;
}

#its-peache img {
    width: 200px;
}