@import url(http://fonts.googleapis.com/css?family=Montserrat:400);
body {
background-color: #777;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);
padding-top: 80px;
text-align: center;
}
.flipper-container {
text-align: center;
margin-top: 40px;
-moz-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
.flipper {
display: inline-block;
position: relative;
text-decoration: none;
font-family: 'Montserrat', arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
width: 11em;
height: 4.5em;
background-color: #282828;
box-shadow: 0 3px 5px #282828;
-moz-transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
-o-transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
-webkit-transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flipper:target {
-moz-transform: rotateX(90deg);