<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 0; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }

/**
*
* Animate.css
* From : http://daneden.me/animate/
*
**/
.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s; }

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05); }

  70% {
    -webkit-transform: scale(0.9); }

  100% {
    -webkit-transform: scale(1); } }

@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.3); }

  50% {
    opacity: 1;
    -moz-transform: scale(1.05); }

  70% {
    -moz-transform: scale(0.9); }

  100% {
    -moz-transform: scale(1); } }

@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -o-transform: scale(0.3); }

  50% {
    opacity: 1;
    -o-transform: scale(1.05); }

  70% {
    -o-transform: scale(0.9); }

  100% {
    -o-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 {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px); }

  80% {
    -webkit-transform: translateY(10px); }

  100% {
    -webkit-transform: translateY(0); } }

@-moz-keyframes bounceInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateY(-30px); }

  80% {
    -moz-transform: translateY(10px); }

  100% {
    -moz-transform: translateY(0); } }

@-o-keyframes bounceInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(2000px); }

  60% {
    opacity: 1;
    -o-transform: translateY(-30px); }

  80% {
    -o-transform: translateY(10px); }

  100% {
    -o-transform: translateY(0); } }

@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px); }

  60% {
    opacity: 1;
    transform: translateY(-30px); }

  80% {
    transform: translateY(10px); }

  100% {
    transform: translateY(0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  -moz-animation-name: bounceInUp;
  -o-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px); }

  80% {
    -webkit-transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0); } }

@-moz-keyframes bounceInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateY(30px); }

  80% {
    -moz-transform: translateY(-10px); }

  100% {
    -moz-transform: translateY(0); } }

@-o-keyframes bounceInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -o-transform: translateY(30px); }

  80% {
    -o-transform: translateY(-10px); }

  100% {
    -o-transform: translateY(0); } }

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

  60% {
    opacity: 1;
    transform: translateY(30px); }

  80% {
    transform: translateY(-10px); }

  100% {
    transform: translateY(0); } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px); }

  80% {
    -webkit-transform: translateX(-10px); }

  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateX(30px); }

  80% {
    -moz-transform: translateX(-10px); }

  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -o-transform: translateX(30px); }

  80% {
    -o-transform: translateX(-10px); }

  100% {
    -o-transform: translateX(0); } }

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

  60% {
    opacity: 1;
    transform: translateX(30px); }

  80% {
    transform: translateX(-10px); }

  100% {
    transform: translateX(0); } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  -moz-animation-name: bounceInLeft;
  -o-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px); }

  80% {
    -webkit-transform: translateX(10px); }

  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes bounceInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateX(-30px); }

  80% {
    -moz-transform: translateX(10px); }

  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes bounceInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px); }

  60% {
    opacity: 1;
    -o-transform: translateX(-30px); }

  80% {
    -o-transform: translateX(10px); }

  100% {
    -o-transform: translateX(0); } }

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px); }

  60% {
    opacity: 1;
    transform: translateX(-30px); }

  80% {
    transform: translateX(10px); }

  100% {
    transform: translateX(0); } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  -moz-animation-name: bounceInRight;
  -o-animation-name: bounceInRight;
  animation-name: bounceInRight; }

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

  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateIn {
  0% {
    -moz-transform-origin: center center;

    -moz-transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    -o-transform-origin: center center;
    -o-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  -moz-animation-name: rotateIn;
  -o-animation-name: rotateIn;
  animation-name: rotateIn; }

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

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  -moz-animation-name: rotateInUpLeft;
  -o-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

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

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  -moz-animation-name: rotateInDownLeft;
  -o-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

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

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  -moz-animation-name: rotateInUpRight;
  -o-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

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

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

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

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  -moz-animation-name: rotateInDownRight;
  -o-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

body, html { }

body {
  color: #fff;
  font-family: 'Oswald', sans-serif; }

/**
*
* Responsive list
*
**/
.responsive {
  width: 800px;
  margin:0 auto ;
  perspective: 800px !important;
   }

.content {
  float: left;
  width: 100%;
  height: 100%;
  perspective: 800px !important;}
  .content img {
    width: 100%;
    height: 100%; }
  .content li {
    float: left;
    width: 250px;
    height: 140px;
	margin:5px;
    position: relative;

    /* Colors Hover */ }
    .content li:hover {
      cursor: pointer; }
      .content li:hover .card-front {
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);
		
        -webkit-transform: perspective(1000) rotateX(180deg);
        -moz-transform: perspective(1000) rotateX(180deg);
        -ms-transform: perspective(1000) rotateX(180deg);
        -o-transform: perspective(1000) rotateX(180deg);
        transform: perspective(1000) rotateX(180deg); }
      .content li:hover .card-back {
        z-index: 950;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        transform: rotateX(0deg);

		-webkit-transform-style: preserve-3d;
			   -moz-transform-style: preserve-3d;			
			    -ms-transform-style: preserve-3d;			
			     -o-transform-style: preserve-3d;			
					  transform-style: preserve-3d; }
    .content li:nth-child(1) .card-back, .content li:nth-child(9) .card-back {
      background: #EC6F01; }
    .content li:nth-child(2) .card-back {
      background: #AA3B03; }
    .content li:nth-child(3) .card-back {
      background: #73090D ; }
    .content li:nth-child(4) .card-back {
      background: #C63542; }
    .content li:nth-child(5) .card-back {
      background: #932540; }
    .content li:nth-child(6) .card-back {
      background: #770C5A; }
    .content li:nth-child(7) .card-back {
      background: #da222b; }
    .content li:nth-child(8) .card-back {
      background: #f07938; }
    .content li:first-child, .content li:last-child { }
  .content .card-front,
  .content .card-back {
    text-align: right;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 400ms;
    -moz-transition: -moz-transform 400ms;
    -o-transition: -o-transform 400ms;
    transition: transform 400ms;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%; }
  .content .card-front {
    -webkit-transform: perspective(1000) rotateX(0);
    -moz-transform: perspective(1000) rotateX(0);
    -ms-transform: perspective(1000) rotateX(0);
    -o-transform: perspective(1000) rotateX(0);
    transform: perspective(1000) rotateX(0);
		
    z-index: 900; }
  .content .card-back {
    -webkit-transform: translateY(0%)  rotateX(-180deg);
    -moz-transform:  translateY(0%) rotateX(-180deg);
    -ms-transform:  translateY(0%) rotateX(-180deg);
    -o-transform:  translateY(0%) rotateX(-180deg);
    transform:  translateY(0%) rotateX(-180deg) ;

    z-index: 800; }
  .content h2 {
    float: left;
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-top: 20%;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
	font-weight:400; }
    .content h2 b {
      float: right;
      width: 100%; }
  .content p {
    line-height: 1.3em;
    color: #3d3d3d;
    width: 90%;
    float: right;
    margin-right: 20px; }

.close {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 20px; }

.active {
}
  .active .all-content {
    position: absolute;
    left: 10px;
    top: 20px; }
    .active .all-content h1 {
      font-size: 80px;
      width: 50%; }
	  
	  
	  
	  body{
				margin:0;
				font: 14px Helvetica, Arial, serif;
			}
			.title {
			  text-align: center;
			  color: #333;
			  font-size: 1.6em;
			}
			.creds {
			  text-align: center;
			  color: #666;
			  font-size: 0.85em;
			}
			.creds a {
			  color: #000;
			  text-decoration: none;
			  border-bottom: 1px dotted #000;
			}
		
			.flip-item-wrap{
			width: 25%;
		    height: auto;
		    float: left;
			position:relative;
			-webkit-perspective:800px;
			   -moz-perspective:800px;
			    -ms-perspective:800px;
			     -o-perspective:800px;
			        perspective:800px;
			}
			@media screen and (min-width: 1280px) {
				.flip-item-wrap{
				width: 24%;
				}
			}
			@media screen and (max-width: 979px) {
				.flip-item-wrap{
				width: 33.3%;
				}
				
			}
			@media screen and (max-width: 639px) {
				.flip-item-wrap{
				width: 50%;
				}
			}
			@media screen and (max-width: 379px) {
				.flip-item-wrap{
				width: 100%;
				}
			}
			.flip-item-wrap img{
			width:100%;
			height:auto;
			display:block;
			margin:0;
			}
			.flip-item-wrap input{
			display: none;
			}
			.flip-item-wrap .fake-image{
			visibility: hidden;
			}
			.flip-item{
			display: block;
			width:100%;
			height:100%;
			float:left;
			position:absolute;
			top:0;
			left:0;
			cursor:pointer;
			color:#fff;
			-webkit-transform-style:preserve-3d;
			   -moz-transform-style:preserve-3d;
			    -ms-transform-style:preserve-3d;
			     -o-transform-style:preserve-3d;
			        transform-style:preserve-3d;
			-webkit-transition:-webkit-transform .4s;
			   -moz-transition:   -moz-transform .4s;
			     -o-transition:     -o-transform .4s;
			        transition:        transform .4s;
			}
			.flip-item figure{
			display:block;
			position:absolute;
			width:100%;
			height:100%;
			margin:0;
			-webkit-backface-visibility:hidden;
			   -moz-backface-visibility:hidden;
			    -ms-backface-visibility:hidden;
			     -o-backface-visibility:hidden;
			        backface-visibility:hidden;
			}
			.flip-item .back{
			width:100%;
			display:block;
			margin:0;
			-webkit-transform:rotateX( 180deg );
			   -moz-transform:rotateX( 180deg );
			    -ms-transform:rotateX( 180deg );
			     -o-transform:rotateX( 180deg );
			        transform:rotateX( 180deg );
			}
			
			.flipper:checked + .flip-item,.flipper:hover{
			-webkit-transform:rotateX( -180deg );
			   -moz-transform:rotateX( -180deg );
			    -ms-transform:rotateX( -180deg );
			     -o-transform:rotateX( -180deg );
			        transform:rotateX( -180deg );
			}
			
			.flip-item-desc{
			background: rgba(0,0,0,0.2);
			width:90%;
			height:90%;
			padding:5%;
			position:absolute;
			top: 0;
			left: 0;
			text-shadow:1px 2px 1px rgba(0,0,0,0.9);
			overflow:hidden;
			}
			.flip-item-title{
			font-size: 1.5em;
			margin: 1em 0 0.8em;
			}
			

@media (min-width: 481px) and (max-width: 768px) {
  .content h2 {
    font-size: 22px; }
  .content p {
    font-size: 13px; }
  .content li {
    width: 40%; }
	.responsive {
  width: 85%;
  height: 100%;
  margin:0% 15% 0%	;
  padding-bottom:0%;
  perspective: 100% !important; }
  .content {
  float: left;
  width: 100%;
  height: 100%;
  overflow:hidden;
  perspective: 100% !important; }

	 }
	 @media (max-width: 350px) {
  .content h2 {
    font-size: 15px; }
  .content p {
    font-size: 13px; }
  .content li {
    width: 95%; }
		.responsive {
  width: 99%;
  height: 100%;
  margin:10% 0% 0% 1%;
  padding-bottom:21%;
  perspective: 800px !important; }
  .content {
  float: left;
  width: 100%;
  height: 100%;
  overflow:hidden;
  perspective: 800px !important; }
 }
@media (min-width: 351px) and (max-width: 480px) {
  .content h2 {
    font-size: 22px; }
  .content p {
    font-size: 13px; }
  .content li {
    width: 46%; }
	.responsive {
  width: 100%;
  height: 100%;
  margin:0% 1% 0%	;
  padding-bottom:0%;
  perspective: 800px !important; }
  .content {
  float: left;
  width: 100%;
  height: 100%;
  overflow:hidden;
  perspective: 800px !important; }

	 }
	 @media (max-width: 350px) {
  .content h2 {
    font-size: 15px; }
  .content p {
    font-size: 13px; }
  .content li {
    width: 95%; }
		.responsive {
  width: 99%;
  height: 100%;
  margin:10% 0% 0% 1%;
  padding-bottom:21%;
  perspective: 800px !important; }
  .content {
  float: left;
  width: 100%;
  height: 100%;
  overflow:hidden;
  perspective: 800px !important; }
 }
@media (max-width: 450px) {
  .content h2 {
    font-size: 22px; }
    .content h2 b {
      width: 100%; }
}
@media (min-width:1000px) {
	.flip-menu {
    margin: 0 auto;
    width: 1000px;
}
}
