.bottom-img{box-shadow:0 0 10px #AAA; -webkit-box-shadow:0 0 10px #AAA; -moz-box-shadow:0 0 10px #AAA; -o-box-shadow:0 0 10px #AAA; border:10px solid #FFF}
.bottom-img img{display:block}
#imageAlbum .thumbnails {
    margin-left: 0px;
	overflow-x: visible;
    overflow-y: visible;
}
#imageAlbum .thumbnail {
border:none;
}
#imageAlbum li {
    display: inline-block;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
 }

#imageAlbum li  img {
    max-width: 100%;
}

.jp-next.jp-previous{}


.animated {
     animation-duration: 1s;
     animation-fill-mode: both;
}

.animated.hinge {
     animation-duration: 2s;
}

@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}

@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}

.flash {
     animation-name: flash;
}

@keyframes shake {
0%, 100% { transform: translateX(0px); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes shake {
0%, 100% { transform: translateX(0px); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake {
     animation-name: shake;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0px); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0px); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}

.bounce {
     animation-name: bounce;
}

@keyframes tada {
0% { transform: scale(1); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
100% { transform: scale(1) rotate(0deg); }
}

@keyframes tada {
0% { transform: scale(1); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
100% { transform: scale(1) rotate(0deg); }
}

.tada {
     animation-name: tada;
}

@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

.swing {
     animation-name: swing;
     transform-origin: center top 0px;
}

@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}

@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}

.wobble {
     animation-name: wobble;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.pulse {
     animation-name: pulse;
}

@keyframes flip {
0% { transform: perspective(400px) rotateY(0deg); animation-timing-function: ease-out; }
40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; }
50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; }
80% { transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; }
100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; }
}

@keyframes flip {
0% { transform: perspective(400px) rotateY(0deg); animation-timing-function: ease-out; }
40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; }
50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; }
80% { transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; }
100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; }
}

.flip {
     animation-name: flip;
     backface-visibility: visible ! important;
}

@keyframes flipInX {
0% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
40% { transform: perspective(400px) rotateX(-10deg); }
70% { transform: perspective(400px) rotateX(10deg); }
100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}

@keyframes flipInX {
0% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
40% { transform: perspective(400px) rotateX(-10deg); }
70% { transform: perspective(400px) rotateX(10deg); }
100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}

.flipInX {
     animation-name: flipInX;
     backface-visibility: visible ! important;
}

@keyframes flipOutX {
0% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
100% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
}

@keyframes flipOutX {
0% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
100% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
}

.flipOutX {
     animation-name: flipOutX;
     backface-visibility: visible ! important;
}

@keyframes flipInY {
0% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
40% { transform: perspective(400px) rotateY(-10deg); }
70% { transform: perspective(400px) rotateY(10deg); }
100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
}

@keyframes flipInY {
0% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
40% { transform: perspective(400px) rotateY(-10deg); }
70% { transform: perspective(400px) rotateY(10deg); }
100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
}

.flipInY {
     animation-name: flipInY;
     backface-visibility: visible ! important;
}

@keyframes flipOutY {
0% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
100% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
}

@keyframes flipOutY {
0% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
100% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
}

.flipOutY {
     animation-name: flipOutY;
     backface-visibility: visible ! important;
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.fadeIn {
     animation-name: fadeIn;
}

@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0px); }
}

@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0px); }
}

.fadeInUp {
     animation-name: fadeInUp;
}

@keyframes fadeInDown {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0px); }
}

@keyframes fadeInDown {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0px); }
}

.fadeInDown {
     animation-name: fadeInDown;
}

@keyframes fadeInLeft {
0% { opacity: 0; transform: translateX(-20px); }
100% { opacity: 1; transform: translateX(0px); }
}

@keyframes fadeInLeft {
0% { opacity: 0; transform: translateX(-20px); }
100% { opacity: 1; transform: translateX(0px); }
}

.fadeInLeft {
     animation-name: fadeInLeft;
}

@keyframes fadeInRight {
0% { opacity: 0; transform: translateX(20px); }
100% { opacity: 1; transform: translateX(0px); }
}

@keyframes fadeInRight {
0% { opacity: 0; transform: translateX(20px); }
100% { opacity: 1; transform: translateX(0px); }
}

.fadeInRight {
     animation-name: fadeInRight;
}

@keyframes fadeInUpBig {
0% { opacity: 0; transform: translateY(2000px); }
100% { opacity: 1; transform: translateY(0px); }
}

@keyframes fadeInUpBig {
0% { opacity: 0; transform: translateY(2000px); }
100% { opacity: 1; transform: translateY(0px); }
}

.fadeInUpBig {
     animation-name: fadeInUpBig;
}

@keyframes fadeInDownBig {
0% { opacity: 0; transform: translateY(-2000px); }
100% { opacity: 1; transform: translateY(0px); }
}

@keyframes fadeInDownBig {
0% { opacity: 0; transform: translateY(-2000px); }
100% { opacity: 1; transform: translateY(0px); }
}

.fadeInDownBig {
     animation-name: fadeInDownBig;
}

@keyframes fadeInLeftBig {
0% { opacity: 0; transform: translateX(-2000px); }
100% { opacity: 1; transform: translateX(0px); }
}

@keyframes fadeInLeftBig {
0% { opacity: 0; transform: translateX(-2000px); }
100% { opacity: 1; transform: translateX(0px); }
}

.fadeInLeftBig {
     animation-name: fadeInLeftBig;
}

@keyframes fadeInRightBig {
0% { opacity: 0; transform: translateX(2000px); }
100% { opacity: 1; transform: translateX(0px); }
}

@keyframes fadeInRightBig {
0% { opacity: 0; transform: translateX(2000px); }
100% { opacity: 1; transform: translateX(0px); }
}

.fadeInRightBig {
     animation-name: fadeInRightBig;
}

@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}

.fadeOut {
     animation-name: fadeOut;
}

@keyframes fadeOutUp {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes fadeOutUp {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(-20px); }
}

.fadeOutUp {
     animation-name: fadeOutUp;
}

@keyframes fadeOutDown {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(20px); }
}

@keyframes fadeOutDown {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(20px); }
}

.fadeOutDown {
     animation-name: fadeOutDown;
}

@keyframes fadeOutLeft {
0% { opacity: 1; transform: translateX(0px); }
100% { opacity: 0; transform: translateX(-20px); }
}

@keyframes fadeOutLeft {
0% { opacity: 1; transform: translateX(0px); }
100% { opacity: 0; transform: translateX(-20px); }
}

.fadeOutLeft {
     animation-name: fadeOutLeft;
}

@keyframes fadeOutRight {
0% { opacity: 1; transform: translateX(0px); }
100% { opacity: 0; transform: translateX(20px); }
}

@keyframes fadeOutRight {
0% { opacity: 1; transform: translateX(0px); }
100% { opacity: 0; transform: translateX(20px); }
}

.fadeOutRight {
     animation-name: fadeOutRight;
}

@keyframes fadeOutUpBig {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(-2000px); }
}

@keyframes fadeOutUpBig {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(-2000px); }
}

.fadeOutUpBig {
     animation-name: fadeOutUpBig;
}

@keyframes fadeOutDownBig {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(2000px); }
}

@keyframes fadeOutDownBig {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(2000px); }
}

.fadeOutDownBig {
     animation-name: fadeOutDownBig;
}

@keyframes fadeOutLeftBig {
0% { opacity: 1; transform: translateX(0px); }
100% { opacity: 0; transform: translateX(-2000px); }
}

@keyframes fadeOutLeftBig {
0% { opacity: 1; transform: translateX(0px); }
100% { opacity: 0; transform: translateX(-2000px); }
}

.fadeOutLeftBig {
     animation-name: fadeOutLeftBig;
}

@keyframes fadeOutRightBig {
0% { opacity: 1; transform: translateX(0px); }
100% { opacity: 0; transform: translateX(2000px); }
}

@keyframes fadeOutRightBig {
0% { opacity: 1; transform: translateX(0px); }
100% { opacity: 0; transform: translateX(2000px); }
}

.fadeOutRightBig {
     animation-name: fadeOutRightBig;
}

@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.3); }
50% { opacity: 1; transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { transform: scale(1); }
}

@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.3); }
50% { opacity: 1; transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { transform: scale(1); }
}

.bounceIn {
     animation-name: bounceIn;
}

@keyframes bounceInUp {
0% { opacity: 0; transform: translateY(2000px); }
60% { opacity: 1; transform: translateY(-30px); }
80% { transform: translateY(10px); }
100% { transform: translateY(0px); }
}

@keyframes bounceInUp {
0% { opacity: 0; transform: translateY(2000px); }
60% { opacity: 1; transform: translateY(-30px); }
80% { transform: translateY(10px); }
100% { transform: translateY(0px); }
}

.bounceInUp {
     animation-name: bounceInUp;
}

@keyframes bounceInDown {
0% { opacity: 0; transform: translateY(-2000px); }
60% { opacity: 1; transform: translateY(30px); }
80% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

@keyframes bounceInDown {
0% { opacity: 0; transform: translateY(-2000px); }
60% { opacity: 1; transform: translateY(30px); }
80% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

.bounceInDown {
     animation-name: bounceInDown;
}

@keyframes bounceInLeft {
0% { opacity: 0; transform: translateX(-2000px); }
60% { opacity: 1; transform: translateX(30px); }
80% { transform: translateX(-10px); }
100% { transform: translateX(0px); }
}

@keyframes bounceInLeft {
0% { opacity: 0; transform: translateX(-2000px); }
60% { opacity: 1; transform: translateX(30px); }
80% { transform: translateX(-10px); }
100% { transform: translateX(0px); }
}

.bounceInLeft {
     animation-name: bounceInLeft;
}

@keyframes bounceInRight {
0% { opacity: 0; transform: translateX(2000px); }
60% { opacity: 1; transform: translateX(-30px); }
80% { transform: translateX(10px); }
100% { transform: translateX(0px); }
}

@keyframes bounceInRight {
0% { opacity: 0; transform: translateX(2000px); }
60% { opacity: 1; transform: translateX(-30px); }
80% { transform: translateX(10px); }
100% { transform: translateX(0px); }
}

.bounceInRight {
     animation-name: bounceInRight;
}

@keyframes bounceOut {
0% { transform: scale(1); }
25% { transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.1); }
100% { opacity: 0; transform: scale(0.3); }
}

@keyframes bounceOut {
0% { transform: scale(1); }
25% { transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.1); }
100% { opacity: 0; transform: scale(0.3); }
}

.bounceOut {
     animation-name: bounceOut;
}

@keyframes bounceOutUp {
0% { transform: translateY(0px); }
20% { opacity: 1; transform: translateY(20px); }
100% { opacity: 0; transform: translateY(-2000px); }
}

@keyframes bounceOutUp {
0% { transform: translateY(0px); }
20% { opacity: 1; transform: translateY(20px); }
100% { opacity: 0; transform: translateY(-2000px); }
}

.bounceOutUp {
     animation-name: bounceOutUp;
}

@keyframes bounceOutDown {
0% { transform: translateY(0px); }
20% { opacity: 1; transform: translateY(-20px); }
100% { opacity: 0; transform: translateY(2000px); }
}

@keyframes bounceOutDown {
0% { transform: translateY(0px); }
20% { opacity: 1; transform: translateY(-20px); }
100% { opacity: 0; transform: translateY(2000px); }
}

.bounceOutDown {
     animation-name: bounceOutDown;
}

@keyframes bounceOutLeft {
0% { transform: translateX(0px); }
20% { opacity: 1; transform: translateX(20px); }
100% { opacity: 0; transform: translateX(-2000px); }
}

@keyframes bounceOutLeft {
0% { transform: translateX(0px); }
20% { opacity: 1; transform: translateX(20px); }
100% { opacity: 0; transform: translateX(-2000px); }
}

.bounceOutLeft {
     animation-name: bounceOutLeft;
}

@keyframes bounceOutRight {
0% { transform: translateX(0px); }
20% { opacity: 1; transform: translateX(-20px); }
100% { opacity: 0; transform: translateX(2000px); }
}

@keyframes bounceOutRight {
0% { transform: translateX(0px); }
20% { opacity: 1; transform: translateX(-20px); }
100% { opacity: 0; transform: translateX(2000px); }
}

.bounceOutRight {
     animation-name: bounceOutRight;
}

@keyframes rotateIn {
0% { transform-origin: center center 0px; transform: rotate(-200deg); opacity: 0; }
100% { transform-origin: center center 0px; transform: rotate(0deg); opacity: 1; }
}

@keyframes rotateIn {
0% { transform-origin: center center 0px; transform: rotate(-200deg); opacity: 0; }
100% { transform-origin: center center 0px; transform: rotate(0deg); opacity: 1; }
}

.rotateIn {
     animation-name: rotateIn;
}

@keyframes rotateInUpLeft {
0% { transform-origin: left bottom 0px; transform: rotate(90deg); opacity: 0; }
100% { transform-origin: left bottom 0px; transform: rotate(0deg); opacity: 1; }
}

@keyframes rotateInUpLeft {
0% { transform-origin: left bottom 0px; transform: rotate(90deg); opacity: 0; }
100% { transform-origin: left bottom 0px; transform: rotate(0deg); opacity: 1; }
}

.rotateInUpLeft {
     animation-name: rotateInUpLeft;
}

@keyframes rotateInDownLeft {
0% { transform-origin: left bottom 0px; transform: rotate(-90deg); opacity: 0; }
100% { transform-origin: left bottom 0px; transform: rotate(0deg); opacity: 1; }
}

@keyframes rotateInDownLeft {
0% { transform-origin: left bottom 0px; transform: rotate(-90deg); opacity: 0; }
100% { transform-origin: left bottom 0px; transform: rotate(0deg); opacity: 1; }
}

.rotateInDownLeft {
     animation-name: rotateInDownLeft;
}

@keyframes rotateInUpRight {
0% { transform-origin: right bottom 0px; transform: rotate(-90deg); opacity: 0; }
100% { transform-origin: right bottom 0px; transform: rotate(0deg); opacity: 1; }
}

@keyframes rotateInUpRight {
0% { transform-origin: right bottom 0px; transform: rotate(-90deg); opacity: 0; }
100% { transform-origin: right bottom 0px; transform: rotate(0deg); opacity: 1; }
}

.rotateInUpRight {
     animation-name: rotateInUpRight;
}

@keyframes rotateInDownRight {
0% { transform-origin: right bottom 0px; transform: rotate(90deg); opacity: 0; }
100% { transform-origin: right bottom 0px; transform: rotate(0deg); opacity: 1; }
}

@keyframes rotateInDownRight {
0% { transform-origin: right bottom 0px; transform: rotate(90deg); opacity: 0; }
100% { transform-origin: right bottom 0px; transform: rotate(0deg); opacity: 1; }
}

.rotateInDownRight {
     animation-name: rotateInDownRight;
}

@keyframes rotateOut {
0% { transform-origin: center center 0px; transform: rotate(0deg); opacity: 1; }
100% { transform-origin: center center 0px; transform: rotate(200deg); opacity: 0; }
}

@keyframes rotateOut {
0% { transform-origin: center center 0px; transform: rotate(0deg); opacity: 1; }
100% { transform-origin: center center 0px; transform: rotate(200deg); opacity: 0; }
}

.rotateOut {
     animation-name: rotateOut;
}

@keyframes rotateOutUpLeft {
0% { transform-origin: left bottom 0px; transform: rotate(0deg); opacity: 1; }
100% { transform-origin: left bottom 0px; transform: rotate(-90deg); opacity: 0; }
}

@keyframes rotateOutUpLeft {
0% { transform-origin: left bottom 0px; transform: rotate(0deg); opacity: 1; }
100% { opacity: 0; }
}

.rotateOutUpLeft {
     animation-name: rotateOutUpLeft;
}

@keyframes rotateOutDownLeft {
0% { transform-origin: left bottom 0px; transform: rotate(0deg); opacity: 1; }
100% { transform-origin: left bottom 0px; transform: rotate(90deg); opacity: 0; }
}

@keyframes rotateOutDownLeft {
0% { transform-origin: left bottom 0px; transform: rotate(0deg); opacity: 1; }
100% { transform-origin: left bottom 0px; transform: rotate(90deg); opacity: 0; }
}

.rotateOutDownLeft {
     animation-name: rotateOutDownLeft;
}

@keyframes rotateOutUpRight {
0% { transform-origin: right bottom 0px; transform: rotate(0deg); opacity: 1; }
100% { transform-origin: right bottom 0px; transform: rotate(90deg); opacity: 0; }
}

@keyframes rotateOutUpRight {
0% { transform-origin: right bottom 0px; transform: rotate(0deg); opacity: 1; }
100% { transform-origin: right bottom 0px; transform: rotate(90deg); opacity: 0; }
}

.rotateOutUpRight {
     animation-name: rotateOutUpRight;
}

@keyframes rotateOutDownRight {
0% { transform-origin: right bottom 0px; transform: rotate(0deg); opacity: 1; }
100% { transform-origin: right bottom 0px; transform: rotate(-90deg); opacity: 0; }
}

@keyframes rotateOutDownRight {
0% { transform-origin: right bottom 0px; transform: rotate(0deg); opacity: 1; }
100% { transform-origin: right bottom 0px; transform: rotate(-90deg); opacity: 0; }
}

.rotateOutDownRight {
     animation-name: rotateOutDownRight;
}

@keyframes hinge {
0% { transform: rotate(0deg); transform-origin: left top 0px; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(80deg); transform-origin: left top 0px; animation-timing-function: ease-in-out; }
40% { transform: rotate(60deg); transform-origin: left top 0px; animation-timing-function: ease-in-out; }
80% { transform: rotate(60deg) translateY(0px); opacity: 1; transform-origin: left top 0px; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); opacity: 0; }
}

@keyframes hinge {
0% { transform: rotate(0deg); transform-origin: left top 0px; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(80deg); transform-origin: left top 0px; animation-timing-function: ease-in-out; }
40% { transform: rotate(60deg); transform-origin: left top 0px; animation-timing-function: ease-in-out; }
80% { transform: rotate(60deg) translateY(0px); opacity: 1; transform-origin: left top 0px; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); opacity: 0; }
}

.hinge {
     animation-name: hinge;
}

@keyframes rollIn {
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

@keyframes rollIn {
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

.rollIn {
     animation-name: rollIn;
}

@keyframes rollOut {
0% { opacity: 1; transform: translateX(0px) rotate(0deg); }
100% { opacity: 0; transform: translateX(100%) rotate(120deg); }
}

@keyframes rollOut {
0% { opacity: 1; transform: translateX(0px) rotate(0deg); }
100% { opacity: 0; transform: translateX(100%) rotate(120deg); }
}

.rollOut {
     animation-name: rollOut;
}



/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/

pre code {
  display: block; padding: 0.5em;
  color: #000;
  background: #f8f8ff
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
  color: #998;
  font-style: italic
}

pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .lisp .title,
pre .subst {
  color: #000;
  font-weight: bold
}

pre .number,
pre .hexcolor {
  color: #40a070
}

pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
  color: #d14
}

pre .title,
pre .id {
  color: #900;
  font-weight: bold
}

pre .javascript .title,
pre .lisp .title,
pre .subst {
  font-weight: normal
}

pre .class .title,
pre .haskell .label,
pre .tex .command {
  color: #458;
  font-weight: bold
}

pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  color: #000080;
  font-weight: normal
}

pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body {
  color: #008080
}

pre .regexp {
  color: #009926
}

pre .class {
  color: #458;
  font-weight: bold
}

pre .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .lisp .keyword,
pre .tex .special,
pre .input_number {
  color: #990073
}

pre .builtin,
pre .built_in,
pre .lisp .title {
  color: #0086b3
}

pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
  color: #999;
  font-weight: bold
}

pre .deletion {
  background: #fdd
}

pre .addition {
  background: #dfd
}

pre .diff .change {
  background: #0086b3
}

pre .chunk {
  color: #aaa
}

pre .tex .formula {
  opacity: 0.5;
}