#viewport {
          -webkit-perspective: 2000px;
          perspective: 2000px;
          width: 100%;
          height: 100%;
          overflow: hidden; }
        
        #container, #cube {
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }

        #container.srg, .srg>#cube {
          -webkit-transition: -webkit-transform 0.5s ease-in-out;
          transition: transform 0.5s ease-in-out;
        }

        #cube {
          position: absolute;
          height: 100%;
          width: 100%; }

        .face {
          position: absolute;
          height: 100%;
          width: 100%;
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          -o-backface-visibility: hidden;
          backface-visibility: hidden; }

        .face.primary {
          background: #fff;
          overflow: hidden;
          z-index: 2; }

        .face.secondary {
          background-size: cover; 
        }

        /* entire container, keeps perspective */
        .flip-container {
            -webkit-perspective: 1000;
                    perspective: 1000;

        }

        .flip-container, .front, .back {
        }

        /* flip speed goes here */
        .flipper {
          transform-origin: 50% 50%;
          position: relative;

          -webkit-transform-style: preserve-3d;

          -moz-transform: perspective(1000px);
          -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;

          transform-style: preserve-3d;

                
        }

        /* hide back of pane during swap */
        .front, .back {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;

              -webkit-transform-style: preserve-3d;
              -webkit-transform: rotateY(0deg);

              -moz-transform-style: preserve-3d;
              -moz-transform: rotateY(0deg);

              -o-transform-style: preserve-3d;
              -o-transform: rotateY(0deg);

              -ms-transform-style: preserve-3d;
              -ms-transform: rotateY(0deg);

              transform-style: preserve-3d;
              transform: rotateY(0deg);

            position: absolute;
            top: 0;
            left: 0;
        }

        /* front pane, placed above back */
        .front {
            z-index: 2;
            transform: rotateY(0deg);
        }

        /* back, initially hidden pane */
        .back {
            transform: rotateY(180deg);
        }
        .vert.back {
             transform: rotateX(180deg);
        }


.sample-flipbook{
	-webkit-transition:margin-left 0.2s;
	-moz-transition:margin-left 0.2s;
	-ms-transition:margin-left 0.2s;
	-o-transition:margin-left 0.2s;
	transition:margin-left 0.2s;
}

.sample-flipbook .page{
	background-color:white;
}

.sample-flipbook .page-wrapper{
	-webkit-perspective:2000px;
	-moz-perspective:2000px;
	-ms-perspective:2000px;
	-o-perspective:2000px;
	perspective:2000px;
}

.sample-flipbook .hard{
	background:#ccc !important;
	color:#333;
	-webkit-box-shadow:inset 0 0 5px #666;
	-moz-box-shadow:inset 0 0 5px #666;
	-o-box-shadow:inset 0 0 5px #666;
	-ms-box-shadow:inset 0 0 5px #666;
	box-shadow:inset 0 0 5px #666;
	font-weight:bold;
}

.sample-flipbook .page{
	
	
}