pushpop.css

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

html {
  background: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25em;
}

.pp-view {
  background-color: #ddd;
  display: none;
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pp-view.active, .pp-view.push, .pp-view.pop {
  display: block;
}

div.pp-navigationbar-buttons {
  display: none;
}

.pp-view-stack {
  background: #333 url('background.png');
  background-size: 320px 460px;
  position: absolute;
  height: auto;
  width: 100%;
  top: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -o-perspective: 2000px;
  perspective: 2000px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .pp-view-stack {
    background: #333 url('background@2x.png');
  }
}

/**
  Pushpop.Button
  ==============
  pp-button
*/
.pp-button {
  background: #8da3c0; /* Old browsers */
  background: -moz-linear-gradient(top,  #8da3c0 0%, #5877a2 50%, #476999 51%, #496b9a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8da3c0), color-stop(50%,#5877a2), color-stop(51%,#476999), color-stop(100%,#496b9a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #8da3c0 0%,#5877a2 50%,#476999 51%,#496b9a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #8da3c0 0%,#5877a2 50%,#476999 51%,#496b9a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #8da3c0 0%,#5877a2 50%,#476999 51%,#496b9a 100%); /* IE10+ */
  background: linear-gradient(top,  #8da3c0 0%,#5877a2 50%,#476999 51%,#496b9a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8da3c0', endColorstr='#496b9a',GradientType=0 ); /* IE6-9 */
	border: 1px solid rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.4em;
	padding: 0.55em 0.9em 0.5em;
	margin: 0.5em;
	min-width: 2.5em;
	opacity: 1;
	outline: none;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
	zoom: 1; /* Trigger "hasLayout" in IE */
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
	-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
	-webkit-transition: opacity 0.2s ease;
	-moz-transition: opacity 0.2s ease;
	-ms-transition: opacity 0.2s ease;
	-o-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}

.pp-button:hover {
  text-decoration: none;
}

.pp-button:active {
  background: #7c87a4; /* Old browsers */
  background: -moz-linear-gradient(top,  #7c87a4 0%, #3a4e78 50%, #253c6a 51%, #263e6c 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c87a4), color-stop(50%,#3a4e78), color-stop(51%,#253c6a), color-stop(100%,#263e6c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* IE10+ */
  background: linear-gradient(top,  #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c87a4', endColorstr='#263e6c',GradientType=0 ); /* IE6-9 */
}

.pp-button + .pp-button { margin-left: 0; } /* Correct the spacing between consecutive buttons. */

.pp-button-style-black {
  background: #2d2d2d; /* Old browsers */
  background: -moz-linear-gradient(top,  #7e7e7e 0%, #404040 50%, #2d2d2d 51%, #272727 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7e7e7e), color-stop(50%,#404040), color-stop(51%,#2d2d2d), color-stop(100%,#272727)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #7e7e7e 0%,#404040 50%,#2d2d2d 51%,#272727 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #7e7e7e 0%,#404040 50%,#2d2d2d 51%,#272727 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #7e7e7e 0%,#404040 50%,#2d2d2d 51%,#272727 100%); /* IE10+ */
  background: linear-gradient(top,  #7e7e7e 0%,#404040 50%,#2d2d2d 51%,#272727 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7e7e', endColorstr='#272727',GradientType=0 ); /* IE6-9 */
}

.pp-button-style-black:active {
  background: #5e5e5e; /* Old browsers */
  background: -moz-linear-gradient(top,  #5e5e5e 0%, #202020 50%, #0d0d0d 51%, #070707 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(50%,#202020), color-stop(51%,#0d0d0d), color-stop(100%,#070707)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #5e5e5e 0%,#202020 50%,#0d0d0d 51%,#070707 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #5e5e5e 0%,#202020 50%,#0d0d0d 51%,#070707 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #5e5e5e 0%,#202020 50%,#0d0d0d 51%,#070707 100%); /* IE10+ */
  background: linear-gradient(top,  #5e5e5e 0%,#202020 50%,#0d0d0d 51%,#070707 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#070707',GradientType=0 ); /* IE6-9 */
}

.pp-button-style-blue {
  background: #7a9de9; /* Old browsers */
  background: -moz-linear-gradient(top,  #7a9de9 0%, #376fe0 50%, #2260dd 51%, #2362dd 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a9de9), color-stop(50%,#376fe0), color-stop(51%,#2260dd), color-stop(100%,#2362dd)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* IE10+ */
  background: linear-gradient(top,  #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a9de9', endColorstr='#2362dd',GradientType=0 ); /* IE6-9 */
}

.pp-button-style-blue:active {
  background: #7c87a4; /* Old browsers */
  background: -moz-linear-gradient(top,  #7c87a4 0%, #3a4e78 50%, #253c6a 51%, #263e6c 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c87a4), color-stop(50%,#3a4e78), color-stop(51%,#253c6a), color-stop(100%,#263e6c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* IE10+ */
  background: linear-gradient(top,  #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c87a4', endColorstr='#263e6c',GradientType=0 ); /* IE6-9 */
}

.pp-button-style-green {
  background: #61b860; /* Old browsers */
  background: -moz-linear-gradient(top,  #61b860 0%, #279f25 50%, #058f02 51%, #079004 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#61b860), color-stop(50%,#279f25), color-stop(51%,#058f02), color-stop(100%,#079004)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #61b860 0%,#279f25 50%,#058f02 51%,#079004 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #61b860 0%,#279f25 50%,#058f02 51%,#079004 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #61b860 0%,#279f25 50%,#058f02 51%,#079004 100%); /* IE10+ */
  background: linear-gradient(top,  #61b860 0%,#279f25 50%,#058f02 51%,#079004 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61b860', endColorstr='#079004',GradientType=0 ); /* IE6-9 */
}

.pp-button-style-green:active {
  background: #217840; /* Old browsers */
  background: -moz-linear-gradient(top,  #217840 0%, #075f05 50%, #034f00 51%, #055002 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#217840), color-stop(50%,#075f05), color-stop(51%,#034f00), color-stop(100%,#055002)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #217840 0%,#075f05 50%,#034f00 51%,#055002 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #217840 0%,#075f05 50%,#034f00 51%,#055002 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #217840 0%,#075f05 50%,#034f00 51%,#055002 100%); /* IE10+ */
  background: linear-gradient(top,  #217840 0%,#075f05 50%,#034f00 51%,#055002 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#217840', endColorstr='#055002',GradientType=0 ); /* IE6-9 */
}

.pp-button-style-red {
  background: #ed8288; /* Old browsers */
  background: -moz-linear-gradient(top,  #ed8288 0%, #c83640 50%, #be1623 51%, #bd1421 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed8288), color-stop(50%,#c83640), color-stop(51%,#be1623), color-stop(100%,#bd1421)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ed8288 0%,#c83640 50%,#be1623 51%,#bd1421 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ed8288 0%,#c83640 50%,#be1623 51%,#bd1421 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ed8288 0%,#c83640 50%,#be1623 51%,#bd1421 100%); /* IE10+ */
  background: linear-gradient(top,  #ed8288 0%,#c83640 50%,#be1623 51%,#bd1421 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8288', endColorstr='#bd1421',GradientType=0 ); /* IE6-9 */
}

.pp-button-style-red:active {
  background: #a65960; /* Old browsers */
  background: -moz-linear-gradient(top,  #a65960 0%, #94262f 50%, #8d141e 51%, #8d131e 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a65960), color-stop(50%,#94262f), color-stop(51%,#8d141e), color-stop(100%,#8d131e)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #a65960 0%,#94262f 50%,#8d141e 51%,#8d131e 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #a65960 0%,#94262f 50%,#8d141e 51%,#8d131e 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #a65960 0%,#94262f 50%,#8d141e 51%,#8d131e 100%); /* IE10+ */
  background: linear-gradient(top,  #a65960 0%,#94262f 50%,#8d141e 51%,#8d131e 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a65960', endColorstr='#8d131e',GradientType=0 ); /* IE6-9 */
}

/**
  Pushpop.Switch
  ==============
  pp-switch
*/
.pp-switch {
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
  width: 5.95em;
  height: 2.1em;
  margin: 0 0 -0.7em 0;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.pp-switch > input {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

.pp-switch > .pp-switch-inner {
  position: static;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  -webkit-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.2);
}

.pp-switch > .pp-switch-inner > .pp-switch-slider {
  display: block;
  width: 10.2em;
  height: 100%;
  margin-left: -4em;
  -webkit-transition: margin-left 0.2s ease;
  -moz-transition: margin-left 0.2s ease;
  -ms-transition: margin-left 0.2s ease;
  -o-transition: margin-left 0.2s ease;
  transition: margin-left 0.2s ease;
}

.pp-switch > .pp-switch-inner > .pp-switch-slider::after {
  background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.5) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,0.2)), color-stop(100%,rgba(255,255,255,0.5))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.5) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.5) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.5) 100%); /* IE10+ */
  background: linear-gradient(top,  rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.5) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#80ffffff',GradientType=0 ); /* IE6-9 */
  content: '';
  display: block;
  float: left;
  margin: -1em 0 0 0.6em;
  width: 9em;
  height: 1em;
  z-index: 1;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}

.pp-switch > input:checked + .pp-switch-inner > .pp-switch-slider {
  margin-left: -0.1em;
}

.pp-switch > .pp-switch-inner > .pp-switch-slider > .pp-switch-on,
.pp-switch > .pp-switch-inner > .pp-switch-slider > .pp-switch-off {
  display: block;
  float: left;
  position: static;
  font-size: 1.2em;
  font-weight: bold;
  width: 3.3em;
  height: 1.9em;
  line-height: 1.8em;
  text-align: center;
  -webkit-box-shadow: inset 0 0.15em 0.2em 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0 0.15em 0.2em 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0.15em 0.2em 0 rgba(0, 0, 0, 0.25);
}

.pp-switch > .pp-switch-inner > .pp-switch-slider > .pp-switch-on {
  background: #007fea;
  color: #fff;
  padding: 0 0.75em 0 0.25em;
  text-shadow: 0 -0.1em 0 rgba(0, 0, 0, 0.3);
  -webkit-border-top-left-radius: 2em;
  -webkit-border-bottom-left-radius: 2em;
  -moz-border-radius-topleft: 2em;
  -moz-border-radius-bottomleft: 2em;
  border-top-left-radius: 2em;
  border-bottom-left-radius: 2em;
}

.pp-switch > .pp-switch-inner > .pp-switch-slider > .pp-switch-off {
  background: #e3e3e3;
  color: #7f7f7f;
  padding: 0 0.25em 0 0.75em;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  -webkit-border-top-right-radius: 2em;
  -webkit-border-bottom-right-radius: 2em;
  -moz-border-radius-topright: 2em;
  -moz-border-radius-bottomright: 2em;
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
}

.pp-switch > .pp-switch-inner > .pp-switch-slider > .pp-switch-handle {
  background: rgb(211,211,211); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(211,211,211,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,211,211,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(211,211,211,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(211,211,211,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(211,211,211,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
  background: linear-gradient(top,  rgba(211,211,211,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  border: 0.1em solid rgba(128, 128, 128, 0.8);
  display: block;
  float: left;
  margin: -0.1em 0 0 -6.1em;
  position: relative;
  width: 2em;
  height: 2.1em;
  line-height: 2em;
  z-index: 2;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  -webkit-box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.3), inset 0 0 0.1em 0.1em rgba(255, 255, 255, 1);
  -moz-box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.3), inset 0 0 0.1em 0.1em rgba(255, 255, 255, 1);
  box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.3), inset 0 0 0.1em 0.1em rgba(255, 255, 255, 1);
}

/**
  Pushpop Transition
  ==================
  slide-horizontal (2D)
  flip-horizontal (2D)
  card-swap(2D)
*/
.pp-view.slide-horizontal,
.pp-view.flip-horizontal,
.pp-view.card-swap {
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}

.pp-view.push.slide-horizontal,
.pp-view.push.flip-horizontal,
.pp-view.push.card-swap {
  -webkit-transform: translate(100%, 0);
  -moz-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.pp-view.push.slide-horizontal.transition,
.pp-view.push.flip-horizontal.transition,
.pp-view.push.card-swap.transition {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.pp-view.push.slide-horizontal.active,
.pp-view.push.flip-horizontal.active,
.pp-view.push.card-swap.active {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.pp-view.push.slide-horizontal.active.transition,
.pp-view.push.flip-horizontal.active.transition,
.pp-view.push.card-swap.active.transition {
  -webkit-transform: translate(-100%, 0);
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

.pp-view.pop.slide-horizontal,
.pp-view.pop.flip-horizontal,
.pp-view.pop.card-swap {
  -webkit-transform: translate(-100%, 0);
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

.pp-view.pop.slide-horizontal.transition,
.pp-view.pop.flip-horizontal.transition,
.pp-view.pop.card-swap.transition {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.pp-view.pop.slide-horizontal.active,
.pp-view.pop.flip-horizontal.active,
.pp-view.pop.card-swap.active {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.pp-view.pop.slide-horizontal.active.transition,
.pp-view.pop.flip-horizontal.active.transition,
.pp-view.pop.card-swap.active.transition {
  -webkit-transform: translate(100%, 0);
  -moz-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

/**
  Pushpop Transition
  ==================
  slide-horizontal (3D)
*/
.csstransforms3d .pp-view.slide-horizontal {
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.csstransforms3d .pp-view.push.slide-horizontal {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.csstransforms3d .pp-view.push.slide-horizontal.transition {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.push.slide-horizontal.active {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.push.slide-horizontal.active.transition {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.csstransforms3d .pp-view.pop.slide-horizontal {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.csstransforms3d .pp-view.pop.slide-horizontal.transition {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.pop.slide-horizontal.active {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.pop.slide-horizontal.active.transition {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

/**
  Pushpop Transition
  ==================
  slide-vertical (2D)
  flip-vertical (2D)
*/
.pp-view.slide-vertical,
.pp-view.flip-vertical {
  -webkit-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6); /* NOTE: Possible performance implications on some devices/browsers. */
  -moz-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}

.pp-view.push.slide-vertical,
.pp-view.push.flip-vertical {
  z-index: 1;
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

.pp-view.push.slide-vertical.transition,
.pp-view.push.flip-vertical.transition {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.pp-view.push.slide-vertical.active,
.pp-view.push.flip-vertical.active {
  z-index: 0;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.pp-view.push.slide-vertical.active.transition,
.pp-view.push.flip-vertical.active.transition {
  -webkit-transform: translate(0, -1%);
  -moz-transform: translate(0, -1%);
  -ms-transform: translate(0, -1%);
  -o-transform: translate(0, -1%);
  transform: translate(0, -1%);
}

.pp-view.pop.slide-vertical,
.pp-view.pop.flip-vertical {
  z-index: 0;
  -webkit-transform: translate(0, -1%);
  -moz-transform: translate(0, -1%);
  -ms-transform: translate(0, -1%);
  -o-transform: translate(0, -1%);
  transform: translate(0, -1%);
}

.pp-view.pop.slide-vertical.transition,
.pp-view.pop.flip-vertical.transition {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.pp-view.pop.slide-vertical.active,
.pp-view.pop.flip-vertical.active {
  z-index: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.pp-view.pop.slide-vertical.active.transition,
.pp-view.pop.flip-vertical.active.transition {
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

/**
  Pushpop Transition
  ==================
  slide-vertical (3D)
*/
.csstransforms3d .pp-view.slide-vertical {
  -webkit-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6); /* NOTE: Possible performance implications on some devices/browsers. */
  -moz-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.csstransforms3d .pp-view.push.slide-vertical {
  z-index: 1;
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.csstransforms3d .pp-view.push.slide-vertical.transition {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.push.slide-vertical.active {
  z-index: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.push.slide-vertical.active.transition {
  -webkit-transform: translate3d(0, -1%, 0);
  -moz-transform: translate3d(0, -1%, 0);
  -ms-transform: translate3d(0, -1%, 0);
  -o-transform: translate3d(0, -1%, 0);
  transform: translate3d(0, -1%, 0);
}
.csstransforms3d .pp-view.pop.slide-vertical {
  z-index: 0;
  -webkit-transform: translate3d(0, -1%, 0);
  -moz-transform: translate3d(0, -1%, 0);
  -ms-transform: translate3d(0, -1%, 0);
  -o-transform: translate3d(0, -1%, 0);
  transform: translate3d(0, -1%, 0);
}
.csstransforms3d .pp-view.pop.slide-vertical.transition {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.pop.slide-vertical.active {
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.pop.slide-vertical.active.transition {
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

/**
  Pushpop Transition
  ==================
  flip-horizontal (3D)
*/
.csstransforms3d .pp-view.flip-horizontal {
  -webkit-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6); /* NOTE: Possible performance implications on some devices/browsers. */
  -moz-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  -webkit-transition: -webkit-transform 1s ease;
  -moz-transition: -moz-transform 1s ease;
  -ms-transition: -ms-transform 1s ease;
  -o-transition: -o-transform 1s ease;
  transition: transform 1s ease;
}
.csstransforms3d .pp-view.push.flip-horizontal {
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  -moz-transform: rotate3d(0, 1, 0, 180deg);
  -ms-transform: rotate3d(0, 1, 0, 180deg);
  -o-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg);
}
.csstransforms3d .pp-view.push.flip-horizontal.transition {
  -webkit-transform: rotate3d(0, 1, 0, 0deg);
  -moz-transform: rotate3d(0, 1, 0, 0deg);
  -ms-transform: rotate3d(0, 1, 0, 0deg);
  -o-transform: rotate3d(0, 1, 0, 0deg);
  transform: rotate3d(0, 1, 0, 0deg);
}
.csstransforms3d .pp-view.push.flip-horizontal.active {
  -webkit-transform: rotate3d(0, 1, 0, 0deg);
  -moz-transform: rotate3d(0, 1, 0, 0deg);
  -ms-transform: rotate3d(0, 1, 0, 0deg);
  -o-transform: rotate3d(0, 1, 0, 0deg);
  transform: rotate3d(0, 1, 0, 0deg);
}
.csstransforms3d .pp-view.push.flip-horizontal.active.transition {
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
  -moz-transform: rotate3d(0, 1, 0, -180deg);
  -ms-transform: rotate3d(0, 1, 0, -180deg);
  -o-transform: rotate3d(0, 1, 0, -180deg);
  transform: rotate3d(0, 1, 0, -180deg);
}
.csstransforms3d .pp-view.pop.flip-horizontal {
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
  -moz-transform: rotate3d(0, 1, 0, -180deg);
  -ms-transform: rotate3d(0, 1, 0, -180deg);
  -o-transform: rotate3d(0, 1, 0, -180deg);
  transform: rotate3d(0, 1, 0, -180deg);
}
.csstransforms3d .pp-view.pop.flip-horizontal.transition {
  -webkit-transform: rotate3d(0, 1, 0, 0deg);
  -moz-transform: rotate3d(0, 1, 0, 0deg);
  -ms-transform: rotate3d(0, 1, 0, 0deg);
  -o-transform: rotate3d(0, 1, 0, 0deg);
  transform: rotate3d(0, 1, 0, 0deg);
}
.csstransforms3d .pp-view.pop.flip-horizontal.active {
  -webkit-transform: rotate3d(0, 1, 0, 0deg);
  -moz-transform: rotate3d(0, 1, 0, 0deg);
  -ms-transform: rotate3d(0, 1, 0, 0deg);
  -o-transform: rotate3d(0, 1, 0, 0deg);
  transform: rotate3d(0, 1, 0, 0deg);
}
.csstransforms3d .pp-view.pop.flip-horizontal.active.transition {
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  -moz-transform: rotate3d(0, 1, 0, 180deg);
  -ms-transform: rotate3d(0, 1, 0, 180deg);
  -o-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg);
}

/**
  Pushpop Transition
  ==================
  flip-vertical (3D)
*/
.csstransforms3d .pp-view.flip-vertical {
  -webkit-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6); /* NOTE: Possible performance implications on some devices/browsers. */
  -moz-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  -webkit-transition: -webkit-transform 1s ease;
  -moz-transition: -moz-transform 1s ease;
  -ms-transition: -ms-transform 1s ease;
  -o-transition: -o-transform 1s ease;
  transition: transform 1s ease;
}
.csstransforms3d .pp-view.push.flip-vertical {
  -webkit-transform: rotate3d(1, 0, 0, -180deg);
  -moz-transform: rotate3d(1, 0, 0, -180deg);
  -ms-transform: rotate3d(1, 0, 0, -180deg);
  -o-transform: rotate3d(1, 0, 0, -180deg);
  transform: rotate3d(1, 0, 0, -180deg);
}
.csstransforms3d .pp-view.push.flip-vertical.transition {
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
  -moz-transform: rotate3d(1, 0, 0, 0deg);
  -ms-transform: rotate3d(1, 0, 0, 0deg);
  -o-transform: rotate3d(1, 0, 0, 0deg);
  transform: rotate3d(1, 0, 0, 0deg);
}
.csstransforms3d .pp-view.push.flip-vertical.active {
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
  -moz-transform: rotate3d(1, 0, 0, 0deg);
  -ms-transform: rotate3d(1, 0, 0, 0deg);
  -o-transform: rotate3d(1, 0, 0, 0deg);
  transform: rotate3d(1, 0, 0, 0deg);
}
.csstransforms3d .pp-view.push.flip-vertical.active.transition {
  -webkit-transform: rotate3d(1, 0, 0, 180deg);
  -moz-transform: rotate3d(1, 0, 0, 180deg);
  -ms-transform: rotate3d(1, 0, 0, 180deg);
  -o-transform: rotate3d(1, 0, 0, 180deg);
  transform: rotate3d(1, 0, 0, 180deg);
}
.csstransforms3d .pp-view.pop.flip-vertical {
  -webkit-transform: rotate3d(1, 0, 0, 180deg);
  -moz-transform: rotate3d(1, 0, 0, 180deg);
  -ms-transform: rotate3d(1, 0, 0, 180deg);
  -o-transform: rotate3d(1, 0, 0, 180deg);
  transform: rotate3d(1, 0, 0, 180deg);
}
.csstransforms3d .pp-view.pop.flip-vertical.transition {
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
  -moz-transform: rotate3d(1, 0, 0, 0deg);
  -ms-transform: rotate3d(1, 0, 0, 0deg);
  -o-transform: rotate3d(1, 0, 0, 0deg);
  transform: rotate3d(1, 0, 0, 0deg);
}
.csstransforms3d .pp-view.pop.flip-vertical.active {
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
  -moz-transform: rotate3d(1, 0, 0, 0deg);
  -ms-transform: rotate3d(1, 0, 0, 0deg);
  -o-transform: rotate3d(1, 0, 0, 0deg);
  transform: rotate3d(1, 0, 0, 0deg);
}
.csstransforms3d .pp-view.pop.flip-vertical.active.transition {
  -webkit-transform: rotate3d(1, 0, 0, -180deg);
  -moz-transform: rotate3d(1, 0, 0, -180deg);
  -ms-transform: rotate3d(1, 0, 0, -180deg);
  -o-transform: rotate3d(1, 0, 0, -180deg);
  transform: rotate3d(1, 0, 0, -180deg);
}

/**
  Pushpop Transition
  ==================
  card-swap (3D)
*/
.csstransforms3d .pp-view.card-swap {
  -webkit-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6); /* NOTE: Possible performance implications on some devices/browsers. */
  -moz-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
  -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
  -moz-transition: -moz-transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
  -ms-transition: -ms-transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
  -o-transition: -o-transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
  transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
}
.csstransforms3d .pp-view.push.card-swap {
  -webkit-transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
  -moz-transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
  -ms-transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
  -o-transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
  transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
}
.csstransforms3d .pp-view.push.card-swap.transition {
  -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -moz-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -ms-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -o-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.push.card-swap.active {
  -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -moz-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -ms-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -o-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.push.card-swap.active.transition {
  -webkit-transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
  -moz-transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
  -ms-transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
  -o-transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
  transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
}
.csstransforms3d .pp-view.pop.card-swap {
  -webkit-transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
  -moz-transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
  -ms-transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
  -o-transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
  transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
}
.csstransforms3d .pp-view.pop.card-swap.transition {
  -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -moz-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -ms-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -o-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.pop.card-swap.active {
  -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -moz-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -ms-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  -o-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
  transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
}
.csstransforms3d .pp-view.pop.card-swap.active.transition {
  -webkit-transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
  -moz-transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
  -ms-transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
  -o-transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
  transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
}

/**
  Pushpop Transition
  ==================
  zoom (2D)
*/
.pp-view.zoom {
  -webkit-transition-property: -webkit-transform, opacity;
  -webkit-transition-duration: 0.5s, 0.5s;
  -webkit-transition-timing-function: ease, ease;
  -moz-transition-property: -moz-transform, opacity;
  -moz-transition-duration: 0.5s, 0.5s;
  -moz-transition-timing-function: ease, ease;
  -ms-transition-property: -ms-transform, opacity;
  -ms-transition-duration: 0.5s, 0.5s;
  -ms-transition-timing-function: ease, ease;
  -o-transition-property: -o-transform, opacity;
  -o-transition-duration: 0.5s, 0.5s;
  -o-transition-timing-function: ease, ease;
  transition-property: transform, opacity;
  transition-duration: 0.5s, 0.5s;
  transition-timing-function: ease, ease;
}
.pp-view.push.zoom {
  z-index: 1;
  opacity: 0.75;
  -webkit-transform: scale(0.75, 0.75);
  -moz-transform: scale(0.75, 0.75);
  -ms-transform: scale(0.75, 0.75);
  -o-transform: scale(0.75, 0.75);
  transform: scale(0.75, 0.75);
}
.pp-view.push.zoom.transition {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.pp-view.push.zoom.active {
  z-index: 2;
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.pp-view.push.zoom.active.transition {
  opacity: 0;
  -webkit-transform: scale(1.5, 1.5);
  -moz-transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
}
.pp-view.pop.zoom {
  z-index: 2;
  opacity: 0;
  -webkit-transform: scale(1.5, 1.5);
  -moz-transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
}
.pp-view.pop.zoom.transition {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.pp-view.pop.zoom.active {
  z-index: 1;
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.pp-view.pop.zoom.active.transition {
  opacity: 0.75;
  -webkit-transform: scale(0.75, 0.75);
  -moz-transform: scale(0.75, 0.75);
  -ms-transform: scale(0.75, 0.75);
  -o-transform: scale(0.75, 0.75);
  transform: scale(0.75, 0.75);
}

/**
  Pushpop Transition
  ==================
  zoom (3D)
*/
.csstransforms3d .pp-view.zoom {
  -webkit-transition-property: -webkit-transform, opacity;
  -webkit-transition-duration: 0.5s, 0.5s;
  -webkit-transition-timing-function: ease, ease;
  -moz-transition-property: -moz-transform, opacity;
  -moz-transition-duration: 0.5s, 0.5s;
  -moz-transition-timing-function: ease, ease;
  -ms-transition-property: -ms-transform, opacity;
  -ms-transition-duration: 0.5s, 0.5s;
  -ms-transition-timing-function: ease, ease;
  -o-transition-property: -o-transform, opacity;
  -o-transition-duration: 0.5s, 0.5s;
  -o-transition-timing-function: ease, ease;
  transition-property: transform, opacity;
  transition-duration: 0.5s, 0.5s;
  transition-timing-function: ease, ease;
}
.csstransforms3d .pp-view.push.zoom {
  z-index: 1;
  opacity: 0.75;
  -webkit-transform: scale3d(0.75, 0.75, 1);
  -moz-transform: scale3d(0.75, 0.75, 1);
  -ms-transform: scale3d(0.75, 0.75, 1);
  -o-transform: scale3d(0.75, 0.75, 1);
  transform: scale3d(0.75, 0.75, 1);
}
.csstransforms3d .pp-view.push.zoom.transition {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}
.csstransforms3d .pp-view.push.zoom.active {
  z-index: 2;
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}
.csstransforms3d .pp-view.push.zoom.active.transition {
  opacity: 0;
  -webkit-transform: scale3d(1.5, 1.5, 1);
  -moz-transform: scale3d(1.5, 1.5, 1);
  -ms-transform: scale3d(1.5, 1.5, 1);
  -o-transform: scale3d(1.5, 1.5, 1);
  transform: scale3d(1.5, 1.5, 1);
}
.csstransforms3d .pp-view.pop.zoom {
  z-index: 2;
  opacity: 0;
  -webkit-transform: scale3d(1.5, 1.5, 1);
  -moz-transform: scale3d(1.5, 1.5, 1);
  -ms-transform: scale3d(1.5, 1.5, 1);
  -o-transform: scale3d(1.5, 1.5, 1);
  transform: scale3d(1.5, 1.5, 1);
}
.csstransforms3d .pp-view.pop.zoom.transition {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}
.csstransforms3d .pp-view.pop.zoom.active {
  z-index: 1;
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}
.csstransforms3d .pp-view.pop.zoom.active.transition {
  opacity: 0.75;
  -webkit-transform: scale3d(0.75, 0.75, 1);
  -moz-transform: scale3d(0.75, 0.75, 1);
  -ms-transform: scale3d(0.75, 0.75, 1);
  -o-transform: scale3d(0.75, 0.75, 1);
  transform: scale3d(0.75, 0.75, 1);
}

/**
  Pushpop Transition
  ==================
  cross-fade
*/
.pp-view.cross-fade {
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.pp-view.push.cross-fade {
  z-index: 1;
  opacity: 0.75;
}
.pp-view.push.cross-fade.transition {
  opacity: 1;
}
.pp-view.push.cross-fade.active {
  z-index: 2;
  opacity: 1;
}
.pp-view.push.cross-fade.active.transition {
  opacity: 0;
}
.pp-view.pop.cross-fade {
  z-index: 2;
  opacity: 0;
}
.pp-view.pop.cross-fade.transition {
  opacity: 1;
}
.pp-view.pop.cross-fade.active {
  z-index: 1;
  opacity: 1;
}
.pp-view.pop.cross-fade.active.transition {
  opacity: 0.75;
}