%main.pre-enter{:ontouchstart => true}
.background
%div
.container
.player
.back
%header
%h1
%a ‹
%h1 Up Next
%ol
%li
%a
%img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/obedear.jpg"}
%div
%h3 Obedear
%h4 Purity Ring
%hr
%li
%a
%img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/heartsigh.jpg"}
%div
%h3 Heartsigh
%h4 Purity Ring
%hr
%li
%a
%img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/empathy.jpg"}
%div
%h3 Empathy
%h4 Crystal Castles
%hr
%li
%a
%img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/adventure.jpg"}
%div
%h3 Adventure
%h4 Disasterpeace
%hr
%li
%a
%img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/points.jpg"}
%div
%h3 Between Two Points
%h4 The Glitch Mob
%hr
%li
%a
%img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/grotto.jpg"}
%div
%h3 Secret Grotto
%h4 Lifeformed
%hr
%li
%a
%img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/ida.jpg"}
%div
%h3 Ida's Theme
%h4 Grigori
.front
%img.art{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/345377/thousand-thursday%402x.jpg"}
.bar
%hr
.meta
%time
%span 1:29
%span 2:58
.controls.top
%a.rewind.skip
%svg{:viewBox => "0 0 36 20"}
%path{:d => "M1.69813738,11.0254725 C0.75331072,10.4595484 0.761328762,9.53720142 1.69813738,8.97607983 L16.2885768,0.236823587 C17.2334034,-0.329100579 17.9993368,0.11180583 17.9993368,1.20339155 L17.9993368,18.7981608 C17.9993368,19.8979057 17.2253854,20.3258504 16.2885768,19.7647288 L1.69813738,11.0254725 Z"}
%path{:d => "M19.6988006,8.97607983 C18.7539739,9.542004 18.761992,10.4643509 19.6988006,11.0254725 L34.28924,19.7647288 C35.2340667,20.3306529 36,19.8897465 36,18.7981608 L36,1.20339155 C36,0.103646637 35.2260486,-0.324298001 34.28924,0.236823587 L19.6988006,8.97607983 Z"}
%a.play
%svg{:viewBox => "0 0 36 42"}
%path{:d => "M35.26504,19.9918476 C36.223232,20.5486348 36.2272024,21.4490581 35.26504,22.0081524 L1.73495997,41.4918476 C0.776768039,42.0486348 0,41.6018839 0,40.4980004 L0,1.50199958 C0,0.396325744 0.772797585,-0.0509419441 1.73495997,0.508152418 L35.26504,19.9918476 Z"}
%a.forward.skip
%svg{:viewBox => "0 0 36 20"}
%path{:d => "M34.3018626,8.97607983 C35.2466893,9.542004 35.2386712,10.4643509 34.3018626,11.0254725 L19.7114232,19.7647288 C18.7665966,20.3306529 18.0006632,19.8897465 18.0006632,18.7981608 L18.0006632,1.20339155 C18.0006632,0.103646637 18.7746146,-0.324298001 19.7114232,0.236823587 L34.3018626,8.97607983 Z"}
%path{:d => "M16.3011994,8.97607983 C17.2460261,9.542004 17.238008,10.4643509 16.3011994,11.0254725 L1.71075999,19.7647288 C0.765933339,20.3306529 0,19.8897465 0,18.7981608 L0,1.20339155 C0,0.103646637 0.773951381,-0.324298001 1.71075999,0.236823587 L16.3011994,8.97607983 Z"}
.info
%h1 Solid Gold (ft. MNDR)
%h2 Michna - Thousand Thursday
.controls.bottom
%a
%svg{:viewBox => "0 0 24 20"}
%path{:d => "M13.2373287,1.79729532 C15.7059873,-0.59131555 19.6719532,-0.59131555 22.1445244,1.80184551 C24.6188818,4.21700618 24.6188818,8.1293472 22.1428711,10.5355725 L12.713653,19.7107814 C12.3197664,20.0940573 11.6860418,20.0986738 11.2878246,19.7110025 L1.8660259,10.5387159 C-0.621617914,8.13135849 -0.621617914,4.21556839 1.86368241,1.79993513 C3.07278074,0.634789609 4.67258351,0 6.32148154,0 C7.96903306,0 9.56085834,0.633814887 10.7729901,1.80153767 L12.0029801,3.00139253 L13.2373287,1.79729532 Z M20.041022,8.41556527 C21.3200493,7.17258662 21.3200493,5.16867425 20.0431981,3.922352 C18.7408346,2.66182552 16.6367424,2.66182552 15.3381723,3.91827146 L12.7184593,6.47380052 C12.3233088,6.85926968 11.6838285,6.86042189 11.2807479,6.46721195 L8.67450711,3.9247929 C8.03187321,3.30572487 7.19151346,2.97111997 6.32148154,2.97111997 C5.4489221,2.97111997 4.60106916,3.30754159 3.96039524,3.92491574 C2.67871929,5.17068349 2.67871929,7.17114678 3.96586581,8.41676109 L12.00095,16.2390493 L20.041022,8.41556527 Z"}
%a
%svg{:viewBox => "0 0 24 20"}
%path{:d => "M10.1639425,10 L5.222766,17 L1.00700182,17 C0.450850071,17 0,17.4426603 0,17.9989566 L0,19.0010434 C0,19.5527519 0.45097518,20 0.990777969,20 L6,20 C6.4873848,20 6.94438517,19.7632025 7.22545179,19.3650248 L12,12.6010815 L16.7745482,19.3650248 C17.0556148,19.7632025 17.5126152,20 18,20 L23.009222,20 C23.5564136,20 24,19.5573397 24,19.0010434 L24,17.9989566 C24,17.4472481 23.5547099,17 22.9929982,17 L18.777234,17 L13.8360575,10 L18.777234,3 L22.9929982,3 C23.5491499,3 24,2.55733967 24,2.00104344 L24,0.998956561 C24,0.447248087 23.5490248,0 23.009222,0 L18,0 C17.5126152,0 17.0556148,0.236797487 16.7745482,0.634975204 L12,7.39891849 L7.22545179,0.634975204 C6.94438517,0.236797487 6.4873848,0 6,0 L0.990777969,0 C0.443586406,0 0,0.442660332 0,0.998956561 L0,2.00104344 C0,2.55275191 0.445290091,3 1.00700182,3 L5.222766,3 L10.1639425,10 Z"}
%a
%svg{:viewBox => "0 0 24 20"}
%path{:d => "M18,2.00104344 C18,2.55275191 18.4426603,3 18.9989566,3 L21,3 L21,17 L3,17 L3,3 L11.0024554,3 C11.553384,3 12,2.55733967 12,2.00104344 L12,0.998956561 C12,0.447248087 11.544239,5.68434189e-14 10.9975267,5.68434189e-14 L1.00247329,5.68434189e-14 C0.448822582,5.68434189e-14 0,0.455305576 0,0.99180311 L0,19.0081969 C0,19.5559546 0.44746922,20 1.00069463,20 L22.9993054,20 C23.5519738,20 24,19.5446944 24,19.0081969 L24,0.99180311 C24,0.444045377 23.5490248,9.4128217e-14 23.009222,9.05011945e-14 L18.990778,6.35006168e-14 C18.4435864,5.98239479e-14 18,0.442660332 18,0.998956561 L18,2.00104344 Z"}
%a.flip
%svg{:viewBox => "0 0 24 20"}
%rect{:width => "3", :height => "3", :rx => "1"}
%rect{:width => "18", :height => "3", :x => "6", :rx => "1"}
%rect{:width => "18", :height => "3", :x => "6", :y => "8.5", :rx => "1"}
%rect{:width => "18", :height => "3", :x => "6", :y => "17", :rx => "1"}
%rect{:width => "3", :height => "3", :y => "8.5", :rx => "1"}
%rect{:width => "3", :height => "3", :y => "17", :rx => "1"}@use 'sass:color';
@use 'sass:math';
$red: #EB2045;
$grey: #0B0B0B;
$p: 12px;
$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
*, *:before, *:after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
::selection { background: none; }
a { cursor: pointer; }
body, html { height: 100%; }
hr {
border: 0;
margin: 0;
padding: 0;
width: 100%;
height: 1px;
background: rgba($grey, .5);
}
body {
color: $grey;
font-family: "Roboto Mono", monospace;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
main {
perspective: 1000px;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
position: relative;
width: 100%;
height: 100%;
padding: $p;
}
.background {
background: white;
&, &:before, &:after, div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:before {
content: "";
background: url('/static/code/images/music-player/thousand-thursday.jpeg') center center / cover;
filter: blur(2px);
}
div {
background: $red;
mix-blend-mode: screen;
}
&:after {
content: "";
background: rgba(black, .15);
}
}
.player {
position: relative;
z-index: 3;
width: 100%;
max-width: 320px;
.back {
opacity: 0;
}
&.playlist {
.front {
z-index: -1;
opacity: 0;
}
.back {
z-index: 1;
opacity: 1;
}
}
}
.player, .back, .front {
will-change: transform;
transform-origin: center center;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.front, .back {
transition: all 500ms $easeOutBack;
background: white;
border-radius: 2px;
box-shadow: 0 0 15px rgba(color.mix($red, $grey), .2);
}
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
header {
display: flex;
align-items: center;
align-content: center;
background: rgba($grey, .1);
padding: $p;
a {
display: block;
padding: 0 5px 3px!important;
border-radius: 2px;
margin-right: $p;
background: rgba($grey, .1);
}
}
a {
display: flex;
padding: $p;
&:hover, &:focus {
background: $red;
color: white;
}
&:active {
background: $grey;
}
}
img {
display: block;
border-radius: 2px;
height: 32px;
width: 32px;
+ div {
padding-left: $p;
}
}
hr {
margin-left: $p;
width: calc(100% - #{$p*2});
background: rgba($grey, .1);
}
h3 {
margin-bottom: 4px;
font-size: 16px;
font-weight: 300;
}
h4 {
font-size: 12px;
font-weight: 500;
}
}
.art {
border-radius: 2px 2px 0 0;
display: block;
width: 100%;
}
.bar {
position: relative;
z-index: 2;
width: 100%;
height: $p;
margin-top: -$p*.5;
overflow: hidden;
&:before, hr {
display: block;
position: absolute;
top: 50%;
margin-top: -1px;
left: 0;
width: 100%;
height: 2px;
}
&:before {
content: "";
background: #bbb;
}
hr {
transform: translateX(-50%);
margin-bottom: 0;
padding: 0;
border: 0;
background: $red;
&:after {
transform-origin: center center;
content: "";
display: block;
position: absolute;
right: -$p*.5;
top: 50%;
margin-top: -$p*.5;
width: $p;
height: $p;
background: $red;
border-radius: 2px;
}
&:hover {
background: $grey;
&:after {
background: $grey;
}
}
}
}
.controls {
display: flex;
align-items: center;
align-content: center;
width: 100%;
a {
display: block;
svg {
display: block;
width: 100%;
height: 100%;
}
&.skip {
width: 36px;
height: 20px;
}
&.play {
width: 42px;
height: 36px;
}
}
&.top {
justify-content: space-around;
padding: $p;
a {
transition: all 250ms ease-out;
will-change: transform;
svg {
fill: $grey;
}
&:hover, &:focus {
transition: all 500ms $easeOutBack;
transform: scale(1.1);
svg {
fill: $red;
}
}
&:active {
transform: scale(1);
}
}
}
&.bottom {
justify-content: space-between;
padding: $p*1.5 $p $p;
a {
width: 24px;
height: 20px;
svg {
fill: rgba($red, .25);
}
&:hover, &:focus, &.active {
svg {
fill: $red;
}
}
&.flip {
svg {
fill: rgba($grey, .25);
}
&:hover, &:focus {
svg {
fill: $grey;
}
}
}
}
}
}
.meta {
text-align: center;
time {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 math.div($p, 3);
font-size: 10px;
}
.info {
padding: $p;
}
h1 {
font-size: 20px;
font-weight: 300;
margin-bottom: $p*.5;
}
h2 {
font-size: 14px;
font-weight: 500;
}
}
.pre-enter {
.background {
opacity: 0;
}
.player {
opacity: 0;
transform-origin: center top;
will-change: opacity, transform;
@media (prefers-reduced-motion: no-preference) {
transform: rotateX(30deg) rotateY(-30deg) translateY(300px) translateZ(200px);
}
}
}
.on-enter {
.background {
transition: all 1000ms ease-out;
opacity: 1;
}
.player {
@media (prefers-reduced-motion: no-preference) {
animation: rotateIn 1000ms $easeOutCubic 500ms forwards;
}
@media (prefers-reduced-motion: reduce) {
animation: fade 1000ms $easeOutCubic 500ms forwards;
}
}
}
@keyframes rotateIn {
0% {
opacity: 0;
transform: rotateX(30deg) rotateY(-30deg) translateY(300px) translateZ(200px);
}
10% {
opacity: 1;
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media only screen and (max-height: 510px) {
.container {
transform-origin: center center;
transform: scale(0.75);
}
}
@media only screen and (min-width: 640px) {
.with-hover {
.player {
transition: all 500ms ease-out;
&:hover {
transition: all 1000ms $easeOutBack;
}
}
}
.player {
will-change: transform;
&:hover {
@media (prefers-reduced-motion: no-preference) {
transform: translateZ(#{$p*5});
}
}
.back {
@media (prefers-reduced-motion: no-preference) {
transform: rotateY(180deg);
}
* {
opacity: 0;
}
}
&.playlist {
.front {
@media (prefers-reduced-motion: no-preference) {
transform: rotateY(180deg);
}
* {
opacity: 0;
}
}
.back {
@media (prefers-reduced-motion: no-preference) {
transform: rotateY(0);
}
* {
opacity: 1;
}
}
}
}
.bar {
hr {
cursor: col-resize;
}
}
}
<div>
<svg width="636px" viewBox="-100 0 536 190" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="stroke-glow">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
<feOffset dx="0" dy="0" in="shadowInner" result="shadowInner"></feOffset>
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.793633078 0 0 0 0 0.184316773 0 0 0 0 0.184316773 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter2"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter2" result="shadowOffsetOuter2"></feOffset>
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
<feOffset dx="0" dy="0" in="shadowInner" result="shadowInner"></feOffset>
<feComposite in="shadowOffsetOuter2" in2="shadowInner" operator="out" result="shadowOffsetOuter2"></feComposite>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M213.248,144.368 L193.952,144.368 C196.544,138.992 201.248,133.712 205.472,126.8 C211.136,117.584 213.92,109.904 213.92,103.856 C213.92,102.8 213.824,101.552 213.632,100.112 L200.48,110.096 C200.96,110.48 201.344,110.864 201.536,111.344 C201.824,111.92 201.92,112.592 201.92,113.264 C201.92,117.872 199.136,123.728 194.528,131.312 C189.92,139.088 185.792,144.944 185.792,151.472 L185.792,152.144 C186.464,150.992 187.712,150.608 189.632,150.608 L213.248,150.608 L213.248,158.096 C213.248,162.704 212.096,164.816 208.064,165.776 L208.064,167.696 L233.312,167.696 L233.312,165.776 C229.28,164.816 228.128,162.704 228.128,158.096 L228.128,150.608 L232.352,150.608 C234.08,150.608 234.944,151.376 235.424,153.008 L238.016,140.528 C236,143.12 234.08,144.368 231.584,144.368 L228.128,144.368 L228.128,115.184 C228.128,110.96 228.704,105.392 229.856,98.384 L227.84,98 C225.92,109.04 220.832,115.856 213.248,118.064 L213.248,144.368 Z" id="error-3-4"></path>
<path d="M159.816,103.088 C173.544,103.088 183.816,115.664 183.816,135.92 C183.816,156.176 173.544,168.848 159.816,168.848 C146.088,168.848 135.816,156.272 135.816,135.92 C135.816,115.568 146.088,103.088 159.816,103.088 Z M159.816,109.04 C154.056,109.04 152.04,117.776 152.04,135.92 C152.04,154.064 154.056,162.8 159.816,162.8 C165.576,162.8 167.592,154.064 167.592,135.92 C167.592,117.776 165.576,109.04 159.816,109.04 Z" id="error-2-0"></path>
<path d="M107.456,144.368 L88.16,144.368 C90.752,138.992 95.456,133.712 99.68,126.8 C105.344,117.584 108.128,109.904 108.128,103.856 C108.128,102.8 108.032,101.552 107.84,100.112 L94.688,110.096 C95.168,110.48 95.552,110.864 95.744,111.344 C96.032,111.92 96.128,112.592 96.128,113.264 C96.128,117.872 93.344,123.728 88.736,131.312 C84.128,139.088 80,144.944 80,151.472 L80,152.144 C80.672,150.992 81.92,150.608 83.84,150.608 L107.456,150.608 L107.456,158.096 C107.456,162.704 106.304,164.816 102.272,165.776 L102.272,167.696 L127.52,167.696 L127.52,165.776 C123.488,164.816 122.336,162.704 122.336,158.096 L122.336,150.608 L126.56,150.608 C128.288,150.608 129.152,151.376 129.632,153.008 L132.224,140.528 C130.208,143.12 128.288,144.368 125.792,144.368 L122.336,144.368 L122.336,115.184 C122.336,110.96 122.912,105.392 124.064,98.384 L122.048,98 C120.128,109.04 115.04,115.856 107.456,118.064 L107.456,144.368 Z" id="error-1-4"></path>
<path d="M37.4817931,46.5 L37.4817931,39.6206897 C37.4817931,33.5862069 37.9645517,30.8103448 44.9645517,30.8103448 C55.705931,30.8103448 63.5507586,37.3275862 66.6886897,48.9137931 L68.2576552,48.6724138 L64.2748966,22 C62.8266207,23.5689655 60.7748966,24.0517241 57.7576552,24.0517241 L10.568,24.0517241 L10.568,27.4310345 C14.3093793,27.6724138 16.2404138,30.2068966 16.2404138,34.9137931 L16.2404138,92.9655172 C16.2404138,97.6724138 14.3093793,100.327586 10.568,100.568966 L10.568,103.948276 L55.3438621,103.948276 C60.6542069,103.948276 63.9128276,104.068966 65.4817931,106 L73.568,76.0689655 L72.3611034,75.7068966 C65.6024828,90.0689655 56.6714483,97.3103448 45.8093793,97.3103448 C37.6024828,97.3103448 37.4817931,93.5689655 37.4817931,85.6034483 L37.4817931,53.5 L40.6197241,53.5 C49.1886897,53.5 53.6542069,57.1206897 55.3438621,65.8103448 L56.7921379,65.8103448 L54.0162759,37.6896552 L52.568,37.6896552 C51.9645517,43.9655172 49.068,46.5 42.6714483,46.5 L37.4817931,46.5 Z" id="error-1-e"></path>
<path d="M77.384,24 L114.248,24 C124.232,24 129.224,27.072 129.224,33.792 C129.224,40.032 125.384,44.64 117.512,48.672 C124.616,58.176 127.976,69.12 131.912,80.256 C132.488,81.792 133.064,82.848 133.448,83.424 C134.216,84.384 135.176,84.768 136.52,84.864 L136.52,87.552 L111.848,87.552 L111.848,84.864 C113.672,84.768 114.536,83.712 114.536,81.696 C114.536,78.528 111.848,68.352 103.688,54.816 C102.152,55.488 100.616,55.872 98.792,56.256 L98.792,78.816 C98.792,82.656 100.232,84.672 103.208,84.864 L103.208,87.552 L77.384,87.552 L77.384,84.864 C80.36,84.672 81.896,82.56 81.896,78.816 L81.896,32.64 C81.896,28.896 80.36,26.88 77.384,26.688 L77.384,24 Z M98.792,49.92 C107.432,47.616 112.136,42.624 112.136,36.576 C112.136,32.256 109.64,29.856 105.128,29.856 C100.424,29.856 98.792,31.584 98.792,36 L98.792,49.92 Z" id="error-2-r"></path>
<path d="M140.072,24 L176.936,24 C186.92,24 191.912,27.072 191.912,33.792 C191.912,40.032 188.072,44.64 180.2,48.672 C187.304,58.176 190.664,69.12 194.6,80.256 C195.176,81.792 195.752,82.848 196.136,83.424 C196.904,84.384 197.864,84.768 199.208,84.864 L199.208,87.552 L174.536,87.552 L174.536,84.864 C176.36,84.768 177.224,83.712 177.224,81.696 C177.224,78.528 174.536,68.352 166.376,54.816 C164.84,55.488 163.304,55.872 161.48,56.256 L161.48,78.816 C161.48,82.656 162.92,84.672 165.896,84.864 L165.896,87.552 L140.072,87.552 L140.072,84.864 C143.048,84.672 144.584,82.56 144.584,78.816 L144.584,32.64 C144.584,28.896 143.048,26.88 140.072,26.688 L140.072,24 Z M161.48,49.92 C170.12,47.616 174.824,42.624 174.824,36.576 C174.824,32.256 172.328,29.856 167.816,29.856 C163.112,29.856 161.48,31.584 161.48,36 L161.48,49.92 Z" id="error-3-r"></path>
<path d="M192.744,56.6360024 C192.744,36.1880024 205.416,22.9400024 223.08,22.9400024 C240.456,22.9400024 251.976,35.1320024 251.976,55.7720024 C251.976,65.1800024 248.808,73.5320024 243.336,79.4840024 C237.96,85.3400024 230.28,88.7000024 222.408,88.7000024 C204.264,88.7000024 192.744,76.4120024 192.744,56.6360024 Z M221.544,28.8920024 C213.96,28.8920024 210.408,35.7080024 210.408,49.4360024 C210.408,71.5160024 214.44,82.4600024 222.984,82.4600024 C230.568,82.4600024 234.12,75.6440024 234.12,61.7240024 C234.12,39.7400024 230.088,28.8920024 221.544,28.8920024 Z" id="error-4-o"></path>
<path d="M252,24 L298.12987,24 C310.623377,24 316.87013,27.8187311 316.87013,36.1722054 C316.87013,43.929003 312.064935,49.6570997 302.214286,54.6691843 C311.103896,66.4833837 315.308442,80.0876133 320.233766,93.9305136 C320.954545,95.8398792 321.675325,97.152568 322.155844,97.8685801 C323.116883,99.0619335 324.318182,99.5392749 326,99.6586103 L326,103 L295.126623,103 L295.126623,99.6586103 C297.409091,99.5392749 298.49026,98.2265861 298.49026,95.7205438 C298.49026,91.7824773 295.126623,79.1329305 284.915584,62.3066465 C282.993506,63.141994 281.071429,63.6193353 278.788961,64.0966767 L278.788961,92.1404834 C278.788961,96.9138973 280.590909,99.4199396 284.314935,99.6586103 L284.314935,103 L252,103 L252,99.6586103 C255.724026,99.4199396 257.646104,96.7945619 257.646104,92.1404834 L257.646104,34.7401813 C257.646104,30.0861027 255.724026,27.5800604 252,27.3413897 L252,24 Z M278.788961,56.2205438 C289.600649,53.3564955 295.487013,47.1510574 295.487013,39.6329305 C295.487013,34.2628399 292.363636,31.2794562 286.717532,31.2794562 C280.831169,31.2794562 278.788961,33.4274924 278.788961,38.9169184 L278.788961,56.2205438 Z" id="error-5-r"></path>
<rect id="error-right" x="252" y="113" width="74" height="4"></rect>
<rect id="error-left" x="10" y="113" width="63" height="4"></rect>
<rect id="error-top" x="10" y="10" width="307" height="4"></rect>
</defs>
<g fill-rule="evenodd">
<g class="glow" fill="black" fill-opacity="1">
<use class="error-3-4" filter="url(#stroke-glow)" xlink:href="#error-3-4"></use>
<use class="error-2-0" filter="url(#stroke-glow)" xlink:href="#error-2-0"></use>
<use class="error-1-4" filter="url(#stroke-glow)" xlink:href="#error-1-4"></use>
<use class="error-1-e" filter="url(#stroke-glow)" xlink:href="#error-1-e"></use>
<use class="error-2-r" filter="url(#stroke-glow)" xlink:href="#error-2-r"></use>
<use class="error-3-r" filter="url(#stroke-glow)" xlink:href="#error-3-r"></use>
<use class="error-4-o" filter="url(#stroke-glow)" xlink:href="#error-4-o"></use>
<use class="error-5-r" filter="url(#stroke-glow)" xlink:href="#error-5-r"></use>
<use class="error-right" filter="url(#stroke-glow)" xlink:href="#error-right"></use>
<use class="error-left" filter="url(#stroke-glow)" xlink:href="#error-left"></use>
<use class="error-top" filter="url(#stroke-glow)" xlink:href="#error-top"></use>
</g>
<g class="top" fill="none" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<use class="error-3-4" xlink:href="#error-3-4"></use>
<use class="error-2-0" xlink:href="#error-2-0"></use>
<use class="error-1-4" xlink:href="#error-1-4"></use>
<use class="error-1-e" xlink:href="#error-1-e"></use>
<use class="error-2-r" xlink:href="#error-2-r"></use>
<use class="error-3-r" xlink:href="#error-3-r"></use>
<use class="error-4-o" xlink:href="#error-4-o"></use>
<use class="error-5-r" xlink:href="#error-5-r"></use>
<use class="error-right" xlink:href="#error-right"></use>
<use class="error-left" xlink:href="#error-left"></use>
<use class="error-top" xlink:href="#error-top"></use>
</g>
</g>
</svg>
</div>
<div>
<svg width="293px" viewBox="0 0 293 63" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="fill-glow">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.961017219 0 0 0 0 0.478442028 0 0 0 0 0.478442028 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M11.8,10 C11.24,10 10.78,10.6 10.78,11.4 C10.78,12.2 11.24,12.8 11.8,12.8 C12.36,12.8 12.82,12.2 12.82,11.4 C12.82,10.62 12.36,10 11.8,10 Z M12.64,14.2 L10.06,14.4 L10.06,14.58 C10.12,14.58 10.18,14.56 10.24,14.56 C10.78,14.56 11.02,14.9 11.02,15.54 L11.02,22.54 C11.02,23.64 10.74,24.12 10,24.12 L10,24.3 L13.66,24.3 L13.66,24.12 C12.92,24.12 12.64,23.64 12.64,22.54 L12.64,14.2 Z M17.54,22.54 L17.54,15.22 L18.64,15.22 C18.86,15.22 19.04,15.22 19.26,15.36 L19.66,14.14 C19.42,14.3 19.12,14.4 18.8,14.4 L17.54,14.4 L17.54,13.1 C17.54,11.6 17.9,10.82 18.98,10.82 C19.74,10.82 20.16,11.28 20.2,12.2 L20.26,12.22 L20.8,10.32 C20.3,10.08 19.68,10 18.96,10 C17.26,10 16.04,11.02 15.88,12.7 C15.74,14.1 15.96,14.88 14.64,15.04 L14.64,15.22 L15.92,15.22 L15.92,22.54 C15.92,23.64 15.64,24.12 14.9,24.12 L14.9,24.3 L18.56,24.3 L18.56,24.12 C17.82,24.12 17.54,23.64 17.54,22.54 Z M31.18,18.6 C28.6,19.08 27.18,20.38 27.18,21.94 C27.18,22.86 27.76,23.48 28.68,23.48 C30.28,23.48 31.2,22 31.2,19.14 C31.2,18.96 31.18,18.78 31.18,18.6 Z M31.14,17.84 C31.14,17.66 31.16,17.48 31.16,17.26 C31.16,15.84 30.72,15.12 29.48,15.12 C27.88,15.12 26.62,16.1 26.3,17.7 L26.16,17.7 L26.5,14.5 C26.66,14.7 26.84,14.8 27.06,14.8 C27.58,14.8 28.68,14.2 30.26,14.2 C32.24,14.2 32.8,15.12 32.8,16.98 L32.8,21.98 C32.8,23.4 33.12,24.08 33.96,24.12 L33.96,24.3 L31.7,24.3 C31.44,23.8 31.26,23.28 31.14,22.7 C30.46,23.88 29.44,24.48 28.1,24.48 C26.54,24.48 25.54,23.5 25.54,22.06 C25.54,20.02 27.46,18.48 31.14,17.84 Z M37.26,22.54 L37.26,18.8 C37.26,18.04 37.32,17.32 37.74,16.64 C38.26,15.82 39.08,15.36 39.68,15.36 C40.5,15.36 40.96,15.9 40.96,16.68 L40.96,22.54 C40.96,23.64 40.68,24.12 39.94,24.12 L39.94,24.3 L43.6,24.3 L43.6,24.12 C42.86,24.12 42.58,23.64 42.58,22.54 L42.58,16.9 C42.58,15.08 42.06,14.2 40.64,14.2 C39.48,14.2 38.28,14.88 37.2,16.26 C37.14,15.46 37.04,14.82 36.8,14.3 L34.48,14.48 L34.48,14.68 C34.54,14.68 34.58,14.66 34.64,14.66 C35.3,14.66 35.64,15.42 35.64,16.92 L35.64,22.54 C35.64,23.64 35.36,24.12 34.62,24.12 L34.62,24.3 L38.28,24.3 L38.28,24.12 C37.54,24.12 37.26,23.64 37.26,22.54 Z M44.84,15.96 L46.88,22.02 C47.24,23.08 47.4,23.94 47.4,24.56 C47.4,26.24 46.7,27.22 45.76,27.22 C45.16,27.22 44.78,26.78 44.78,25.96 C44.78,25.78 44.8,25.56 44.86,25.3 L44.78,25.28 L43.8,27.86 C44.32,28.4 44.9,28.66 45.52,28.66 C46.58,28.66 47.5,27.92 48.1,26.52 C48.58,25.36 48.8,24.14 49.14,22.98 L51.1,16.4 C51.42,15.3 51.64,14.66 52.42,14.58 L52.42,14.4 L49.64,14.4 L49.64,14.58 C50.06,14.58 50.28,14.82 50.28,15.3 C50.28,15.48 50.22,15.86 50.06,16.42 L48.5,22.12 L46.6,16.06 C46.5,15.76 46.44,15.6 46.44,15.56 C46.44,15.38 46.4,15.28 46.4,15.24 C46.4,14.9 46.62,14.62 47.02,14.58 L47.02,14.4 L43.78,14.4 L43.78,14.58 C44.46,14.68 44.56,15.14 44.84,15.96 Z M55.48,15.24 L55.48,21.94 C55.48,22.94 55.62,23.46 56.86,23.46 C58.72,23.46 59.94,21.98 59.94,19.38 C59.94,16.8 58.62,15.22 56.28,15.22 C56.04,15.22 55.78,15.22 55.48,15.24 Z M53.86,12.42 C53.86,11.78 53.62,11.46 53.1,11.46 C53.04,11.46 52.96,11.48 52.9,11.48 L52.9,11.28 L55.48,10.68 L55.48,14.42 C55.98,14.4 56.32,14.38 56.5,14.38 C59.74,14.38 61.7,16.5 61.7,19.58 C61.7,21.34 61.04,22.74 59.84,23.54 C58.8,24.24 57.52,24.3 55.86,24.3 L52.86,24.3 L52.86,24.12 C53.6,24.12 53.86,23.64 53.86,22.54 L53.86,12.42 Z M62.84,19.38 C62.84,16.22 64.66,14.2 67.22,14.2 C69.64,14.2 71.4,16.26 71.4,19.14 C71.4,22.5 69.62,24.5 67.02,24.5 C64.58,24.5 62.84,22.48 62.84,19.38 Z M66.96,15.04 C65.58,15.04 64.62,16.34 64.62,18.7 C64.62,21.96 65.64,23.66 67.24,23.66 C68.64,23.66 69.6,22.32 69.6,19.88 C69.6,16.74 68.52,15.04 66.96,15.04 Z M80.38,22.54 C80.38,23.64 80.66,24.12 81.4,24.12 L81.4,24.3 L78.4,24.3 C76.98,24.3 75.82,24.26 74.8,23.76 C73.4,23.06 72.56,21.54 72.56,19.58 C72.56,16.5 74.52,14.38 77.76,14.38 C77.94,14.38 78.28,14.4 78.78,14.42 L78.78,13.06 C78.78,12.78 78.76,12.6 78.76,12.48 C78.76,11.76 78.54,11.48 77.98,11.48 L77.8,11.48 L77.8,11.28 L80.38,10.68 L80.38,22.54 Z M78.78,15.24 C78.48,15.22 78.2,15.22 77.96,15.22 C75.62,15.22 74.3,16.8 74.3,19.5 C74.3,21.98 75.54,23.46 77.4,23.46 C78.64,23.46 78.78,22.94 78.78,21.94 L78.78,15.24 Z M82.7,15.96 L84.74,22.02 C85.1,23.08 85.26,23.94 85.26,24.56 C85.26,26.24 84.56,27.22 83.62,27.22 C83.02,27.22 82.64,26.78 82.64,25.96 C82.64,25.78 82.66,25.56 82.72,25.3 L82.64,25.28 L81.66,27.86 C82.18,28.4 82.76,28.66 83.38,28.66 C84.44,28.66 85.36,27.92 85.96,26.52 C86.44,25.36 86.66,24.14 87,22.98 L88.96,16.4 C89.28,15.3 89.5,14.66 90.28,14.58 L90.28,14.4 L87.5,14.4 L87.5,14.58 C87.92,14.58 88.14,14.82 88.14,15.3 C88.14,15.48 88.08,15.86 87.92,16.42 L86.36,22.12 L84.46,16.06 C84.36,15.76 84.3,15.6 84.3,15.56 C84.3,15.38 84.26,15.28 84.26,15.24 C84.26,14.9 84.48,14.62 84.88,14.58 L84.88,14.4 L81.64,14.4 L81.64,14.58 C82.32,14.68 82.42,15.14 82.7,15.96 Z M101.24,18.6 C98.66,19.08 97.24,20.38 97.24,21.94 C97.24,22.86 97.82,23.48 98.74,23.48 C100.34,23.48 101.26,22 101.26,19.14 C101.26,18.96 101.24,18.78 101.24,18.6 Z M101.2,17.84 C101.2,17.66 101.22,17.48 101.22,17.26 C101.22,15.84 100.78,15.12 99.54,15.12 C97.94,15.12 96.68,16.1 96.36,17.7 L96.22,17.7 L96.56,14.5 C96.72,14.7 96.9,14.8 97.12,14.8 C97.64,14.8 98.74,14.2 100.32,14.2 C102.3,14.2 102.86,15.12 102.86,16.98 L102.86,21.98 C102.86,23.4 103.18,24.08 104.02,24.12 L104.02,24.3 L101.76,24.3 C101.5,23.8 101.32,23.28 101.2,22.7 C100.52,23.88 99.5,24.48 98.16,24.48 C96.6,24.48 95.6,23.5 95.6,22.06 C95.6,20.02 97.52,18.48 101.2,17.84 Z M105.12,24.5 C105.28,24.26 105.48,24.14 105.76,24.14 C106.18,24.14 106.92,24.5 108.1,24.5 C110.24,24.5 111.74,23.06 111.74,21.22 C111.74,19.28 110.56,18.68 108.52,17.9 C107.36,17.46 106.74,17.14 106.74,16.32 C106.74,15.56 107.42,14.96 108.4,14.96 C109.64,14.96 110.66,15.86 110.88,17.3 L111.02,17.3 L110.8,14.28 C110.6,14.46 110.4,14.52 110.16,14.52 C109.68,14.52 109,14.18 108.18,14.18 C106.42,14.18 105.2,15.34 105.2,16.76 C105.2,18.5 106.56,18.86 108.68,19.78 C109.74,20.24 110.22,20.74 110.22,21.64 C110.22,22.78 109.28,23.66 107.9,23.66 C106.22,23.66 105.34,22.62 105.08,20.42 L104.94,20.44 L105.12,24.5 Z M117.18,18.28 C118.82,20.54 119.48,22.5 119.48,23.48 C119.48,23.94 119.32,24.1 118.92,24.12 L118.92,24.3 L122.3,24.3 L122.3,24.12 C121.54,24.04 121.36,23.64 121.14,22.92 C120.48,20.84 119.6,19 118.26,17.04 L118.88,16.34 C119.94,15.18 120.8,14.6 121.44,14.58 L121.44,14.4 L118.18,14.4 L118.18,14.58 C118.52,14.6 118.66,14.74 118.66,15.06 C118.66,15.3 118.46,15.62 118.1,16.06 L115.82,18.84 L115.82,10.68 L113.24,11.28 L113.24,11.48 C113.3,11.48 113.38,11.46 113.44,11.46 C113.96,11.46 114.2,11.78 114.2,12.42 L114.2,22.54 C114.2,23.64 113.92,24.12 113.18,24.12 L113.18,24.3 L116.84,24.3 L116.84,24.12 C116.1,24.12 115.82,23.64 115.82,22.54 L115.82,19.76 L117.18,18.28 Z M123.14,24.5 C123.3,24.26 123.5,24.14 123.78,24.14 C124.2,24.14 124.94,24.5 126.12,24.5 C128.26,24.5 129.76,23.06 129.76,21.22 C129.76,19.28 128.58,18.68 126.54,17.9 C125.38,17.46 124.76,17.14 124.76,16.32 C124.76,15.56 125.44,14.96 126.42,14.96 C127.66,14.96 128.68,15.86 128.9,17.3 L129.04,17.3 L128.82,14.28 C128.62,14.46 128.42,14.52 128.18,14.52 C127.7,14.52 127.02,14.18 126.2,14.18 C124.44,14.18 123.22,15.34 123.22,16.76 C123.22,18.5 124.58,18.86 126.7,19.78 C127.76,20.24 128.24,20.74 128.24,21.64 C128.24,22.78 127.3,23.66 125.92,23.66 C124.24,23.66 123.36,22.62 123.1,20.42 L122.96,20.44 L123.14,24.5 Z M135.94,14.4 L135.94,14.58 C136.52,14.62 136.62,15.02 136.8,15.86 L138.24,22.88 C138.3,23.22 138.36,23.5 138.36,23.74 C138.36,24 138.32,24.12 138.16,24.12 L138.12,24.12 L138.12,24.3 L140.44,24.3 L140.44,24.12 C140.26,24.08 140.24,24.04 140.24,23.9 C140.24,23.74 140.28,23.38 140.42,22.84 L141.76,17.26 L143.18,22.98 C143.28,23.42 143.32,23.68 143.32,23.74 C143.32,24 143.24,24.12 143.04,24.12 L143.04,24.3 L145.46,24.3 L145.46,24.12 C145.24,24.1 145.22,24 145.22,23.78 C145.22,23.5 145.28,23.18 145.38,22.8 L146.96,16.3 C147.24,15.14 147.48,14.58 148.04,14.58 L148.08,14.58 L148.08,14.4 L145.6,14.4 L145.6,14.58 C145.94,14.58 146.04,14.74 146.04,15.14 C146.04,15.4 145.96,15.68 145.9,15.98 L144.48,22.56 L142.44,14.4 L141.6,14.4 L139.68,22.52 L138.4,15.92 C138.32,15.5 138.3,15.22 138.3,15.1 C138.3,14.82 138.52,14.6 138.92,14.58 L138.92,14.4 L135.94,14.4 Z M151.2,22.54 L151.2,18.8 C151.2,18.04 151.26,17.32 151.68,16.64 C152.2,15.82 153.02,15.36 153.62,15.36 C154.44,15.36 154.9,15.9 154.9,16.68 C154.9,16.86 154.92,17.06 154.92,17.32 L154.92,22.54 C154.92,23.64 154.64,24.12 153.9,24.12 L153.9,24.3 L157.56,24.3 L157.56,24.12 C156.82,24.12 156.54,23.64 156.54,22.54 L156.54,16.9 C156.54,15.08 156,14.2 154.58,14.2 C153.42,14.2 152.24,14.88 151.2,16.26 L151.2,10.68 L148.62,11.28 L148.62,11.48 C148.68,11.48 148.76,11.46 148.82,11.46 C149.34,11.46 149.58,11.78 149.58,12.42 L149.58,22.54 C149.58,23.64 149.3,24.12 148.56,24.12 L148.56,24.3 L152.22,24.3 L152.22,24.12 C151.48,24.12 151.2,23.64 151.2,22.54 Z M160.28,18.8 L164.6,17.32 C164.34,15.84 163.64,15.06 162.62,15.06 C161.26,15.06 160.28,16.38 160.28,18.32 L160.28,18.8 Z M160.26,19.64 C160.46,22.1 161.86,23.58 163.58,23.58 C164.82,23.58 165.72,22.88 166.34,21.42 L166.42,21.44 L165.78,24.38 C165.6,24.28 165.46,24.26 165.38,24.26 C165.1,24.26 164.46,24.48 163.42,24.48 C160.32,24.48 158.58,22.48 158.58,19.2 C158.58,16.2 160.46,14.2 162.9,14.2 C164.76,14.2 166.1,15.5 166.28,17.62 L160.26,19.64 Z M170.02,16.42 C169.94,15.52 169.82,14.84 169.5,14.3 L167.18,14.48 L167.18,14.68 L167.26,14.68 C168.02,14.68 168.46,15.46 168.46,16.92 L168.46,22.54 C168.46,23.64 168.2,24.12 167.46,24.12 L167.46,24.3 L171.1,24.3 L171.1,24.12 C170.36,24.12 170.08,23.64 170.08,22.54 L170.08,18.94 C170.08,16.72 170.88,15.66 172.14,15.66 C172.38,15.66 172.68,15.74 173.02,15.92 L173.34,14.18 C173.18,14.14 173.02,14.12 172.82,14.12 C171.86,14.12 170.82,14.88 170.02,16.42 Z M175.84,18.8 L180.16,17.32 C179.9,15.84 179.2,15.06 178.18,15.06 C176.82,15.06 175.84,16.38 175.84,18.32 L175.84,18.8 Z M175.82,19.64 C176.02,22.1 177.42,23.58 179.14,23.58 C180.38,23.58 181.28,22.88 181.9,21.42 L181.98,21.44 L181.34,24.38 C181.16,24.28 181.02,24.26 180.94,24.26 C180.66,24.26 180.02,24.48 178.98,24.48 C175.88,24.48 174.14,22.48 174.14,19.2 C174.14,16.2 176.02,14.2 178.46,14.2 C180.32,14.2 181.66,15.5 181.84,17.62 L175.82,19.64 Z M189.26,15.22 L189.26,21.26 C189.26,23.42 189.7,24.5 191.54,24.5 C192.3,24.5 192.96,24.38 193.6,24.08 L194.16,21.98 L194.02,21.98 C193.72,22.92 193,23.48 192.24,23.48 C191.4,23.48 190.92,22.84 190.92,21.7 L190.92,15.22 L192.52,15.22 C192.74,15.22 192.92,15.22 193.14,15.36 L193.54,14.14 C193.3,14.3 193,14.4 192.68,14.4 L190.92,14.4 L190.92,10.82 L189.56,11.54 C189.62,11.82 189.66,12.12 189.66,12.42 C189.66,13.94 188.86,14.94 187.62,15.04 L187.62,15.22 L189.26,15.22 Z M197.44,22.54 L197.44,18.8 C197.44,18.04 197.5,17.32 197.92,16.64 C198.44,15.82 199.26,15.36 199.86,15.36 C200.68,15.36 201.14,15.9 201.14,16.68 C201.14,16.86 201.16,17.06 201.16,17.32 L201.16,22.54 C201.16,23.64 200.88,24.12 200.14,24.12 L200.14,24.3 L203.8,24.3 L203.8,24.12 C203.06,24.12 202.78,23.64 202.78,22.54 L202.78,16.9 C202.78,15.08 202.24,14.2 200.82,14.2 C199.66,14.2 198.48,14.88 197.44,16.26 L197.44,10.68 L194.86,11.28 L194.86,11.48 C194.92,11.48 195,11.46 195.06,11.46 C195.58,11.46 195.82,11.78 195.82,12.42 L195.82,22.54 C195.82,23.64 195.54,24.12 194.8,24.12 L194.8,24.3 L198.46,24.3 L198.46,24.12 C197.72,24.12 197.44,23.64 197.44,22.54 Z M206.7,10 C206.14,10 205.68,10.6 205.68,11.4 C205.68,12.2 206.14,12.8 206.7,12.8 C207.26,12.8 207.72,12.2 207.72,11.4 C207.72,10.62 207.26,10 206.7,10 Z M207.54,14.2 L204.96,14.4 L204.96,14.58 C205.02,14.58 205.08,14.56 205.14,14.56 C205.68,14.56 205.92,14.9 205.92,15.54 L205.92,22.54 C205.92,23.64 205.64,24.12 204.9,24.12 L204.9,24.3 L208.56,24.3 L208.56,24.12 C207.82,24.12 207.54,23.64 207.54,22.54 L207.54,14.2 Z M210.24,24.5 C210.4,24.26 210.6,24.14 210.88,24.14 C211.3,24.14 212.04,24.5 213.22,24.5 C215.36,24.5 216.86,23.06 216.86,21.22 C216.86,19.28 215.68,18.68 213.64,17.9 C212.48,17.46 211.86,17.14 211.86,16.32 C211.86,15.56 212.54,14.96 213.52,14.96 C214.76,14.96 215.78,15.86 216,17.3 L216.14,17.3 L215.92,14.28 C215.72,14.46 215.52,14.52 215.28,14.52 C214.8,14.52 214.12,14.18 213.3,14.18 C211.54,14.18 210.32,15.34 210.32,16.76 C210.32,18.5 211.68,18.86 213.8,19.78 C214.86,20.24 215.34,20.74 215.34,21.64 C215.34,22.78 214.4,23.66 213.02,23.66 C211.34,23.66 210.46,22.62 210.2,20.42 L210.06,20.44 L210.24,24.5 Z M226.1,23.54 C226.38,23.56 226.66,23.58 226.9,23.58 C229.26,23.58 230.56,22.02 230.56,19.24 C230.56,16.72 229.26,15.22 227.56,15.22 C226.24,15.22 226.1,15.68 226.1,16.76 L226.1,23.54 Z M226.1,24.38 L226.1,26.9 C226.1,27.98 226.42,28.46 227.24,28.46 L227.3,28.46 L227.3,28.66 L223.46,28.66 L223.46,28.46 C224.2,28.46 224.48,28 224.48,26.9 L224.48,16.14 C224.48,15.04 224.2,14.58 223.46,14.58 L223.46,14.4 L226.46,14.4 C227.86,14.4 229.02,14.44 230.04,14.94 C231.44,15.64 232.3,17.14 232.3,19.14 C232.3,22.3 230.32,24.4 227.1,24.4 C226.94,24.4 226.6,24.4 226.1,24.38 Z M238.88,18.6 C236.3,19.08 234.88,20.38 234.88,21.94 C234.88,22.86 235.46,23.48 236.38,23.48 C237.98,23.48 238.9,22 238.9,19.14 C238.9,18.96 238.88,18.78 238.88,18.6 Z M238.84,17.84 C238.84,17.66 238.86,17.48 238.86,17.26 C238.86,15.84 238.42,15.12 237.18,15.12 C235.58,15.12 234.32,16.1 234,17.7 L233.86,17.7 L234.2,14.5 C234.36,14.7 234.54,14.8 234.76,14.8 C235.28,14.8 236.38,14.2 237.96,14.2 C239.94,14.2 240.5,15.12 240.5,16.98 L240.5,21.98 C240.5,23.4 240.82,24.08 241.66,24.12 L241.66,24.3 L239.4,24.3 C239.14,23.8 238.96,23.28 238.84,22.7 C238.16,23.88 237.14,24.48 235.8,24.48 C234.24,24.48 233.24,23.5 233.24,22.06 C233.24,20.02 235.16,18.48 238.84,17.84 Z M248.52,23.54 L248.52,16.76 C248.52,15.68 248.36,15.22 247.04,15.22 C245.34,15.22 244.06,16.72 244.06,19.24 C244.06,22.02 245.36,23.58 247.72,23.58 C247.98,23.58 248.24,23.56 248.52,23.54 Z M251.16,14.58 C250.4,14.58 250.14,15.04 250.14,16.14 L250.14,21.82 C250.14,21.88 250.12,22.1 250.12,22.46 C250.12,22.94 250.22,23.16 250.44,23.46 C250.88,24.04 251.4,24.54 251.4,25.5 C251.4,27.34 249.44,28.72 246.74,28.72 C244.94,28.72 243.2,28.06 241.82,26.8 L243.66,24.54 L243.78,24.62 C243.6,24.92 243.5,25.2 243.5,25.54 C243.5,26.82 244.66,27.8 246.48,27.8 C248.44,27.8 249.7,26.76 249.7,25.62 C249.7,24.86 249.22,24.36 248.32,24.36 C248.08,24.36 247.72,24.4 247.24,24.4 C244.38,24.4 242.3,22.3 242.3,19.14 C242.3,17.34 242.98,15.96 244.18,15.16 C245.2,14.48 246.46,14.4 248.14,14.4 L251.16,14.4 L251.16,14.58 Z M253.94,18.8 L258.26,17.32 C258,15.84 257.3,15.06 256.28,15.06 C254.92,15.06 253.94,16.38 253.94,18.32 L253.94,18.8 Z M253.92,19.64 C254.12,22.1 255.52,23.58 257.24,23.58 C258.48,23.58 259.38,22.88 260,21.42 L260.08,21.44 L259.44,24.38 C259.26,24.28 259.12,24.26 259.04,24.26 C258.76,24.26 258.12,24.48 257.08,24.48 C253.98,24.48 252.24,22.48 252.24,19.2 C252.24,16.2 254.12,14.2 256.56,14.2 C258.42,14.2 259.76,15.5 259.94,17.62 L253.92,19.64 Z M268.02,10 C267.46,10 267,10.6 267,11.4 C267,12.2 267.46,12.8 268.02,12.8 C268.58,12.8 269.04,12.2 269.04,11.4 C269.04,10.62 268.58,10 268.02,10 Z M268.86,14.2 L266.28,14.4 L266.28,14.58 C266.34,14.58 266.4,14.56 266.46,14.56 C267,14.56 267.24,14.9 267.24,15.54 L267.24,22.54 C267.24,23.64 266.96,24.12 266.22,24.12 L266.22,24.3 L269.88,24.3 L269.88,24.12 C269.14,24.12 268.86,23.64 268.86,22.54 L268.86,14.2 Z M271.56,24.5 C271.72,24.26 271.92,24.14 272.2,24.14 C272.62,24.14 273.36,24.5 274.54,24.5 C276.68,24.5 278.18,23.06 278.18,21.22 C278.18,19.28 277,18.68 274.96,17.9 C273.8,17.46 273.18,17.14 273.18,16.32 C273.18,15.56 273.86,14.96 274.84,14.96 C276.08,14.96 277.1,15.86 277.32,17.3 L277.46,17.3 L277.24,14.28 C277.04,14.46 276.84,14.52 276.6,14.52 C276.12,14.52 275.44,14.18 274.62,14.18 C272.86,14.18 271.64,15.34 271.64,16.76 C271.64,18.5 273,18.86 275.12,19.78 C276.18,20.24 276.66,20.74 276.66,21.64 C276.66,22.78 275.72,23.66 274.34,23.66 C272.66,23.66 271.78,22.62 271.52,20.42 L271.38,20.44 L271.56,24.5 Z M279.68,25.98 L280.94,25.98 L282.5,21.92 L280.66,21.92 C280.74,22.12 280.8,22.3 280.8,22.5 C280.8,22.78 280.74,23.18 280.56,23.64 L279.68,25.98 Z" id="quote-top"></path>
<path d="M72.66,34 C72.1,34 71.64,34.6 71.64,35.4 C71.64,36.2 72.1,36.8 72.66,36.8 C73.22,36.8 73.68,36.2 73.68,35.4 C73.68,34.62 73.22,34 72.66,34 Z M73.5,38.2 L70.92,38.4 L70.92,38.58 C70.98,38.58 71.04,38.56 71.1,38.56 C71.64,38.56 71.88,38.9 71.88,39.54 L71.88,46.54 C71.88,47.64 71.6,48.12 70.86,48.12 L70.86,48.3 L74.52,48.3 L74.52,48.12 C73.78,48.12 73.5,47.64 73.5,46.54 L73.5,38.2 Z M76.9,39.22 L76.9,45.26 C76.9,47.42 77.34,48.5 79.18,48.5 C79.94,48.5 80.6,48.38 81.24,48.08 L81.8,45.98 L81.66,45.98 C81.36,46.92 80.64,47.48 79.88,47.48 C79.04,47.48 78.56,46.84 78.56,45.7 L78.56,39.22 L80.16,39.22 C80.38,39.22 80.56,39.22 80.78,39.36 L81.18,38.14 C80.94,38.3 80.64,38.4 80.32,38.4 L78.56,38.4 L78.56,34.82 L77.2,35.54 C77.26,35.82 77.3,36.12 77.3,36.42 C77.3,37.94 76.5,38.94 75.26,39.04 L75.26,39.22 L76.9,39.22 Z M82.78,38.48 L84.06,38.48 L85.68,35.06 L83.88,35.06 L83.88,35.16 C83.88,35.48 83.8,35.82 83.62,36.28 L82.78,38.48 Z M88.1,48.5 C88.26,48.26 88.46,48.14 88.74,48.14 C89.16,48.14 89.9,48.5 91.08,48.5 C93.22,48.5 94.72,47.06 94.72,45.22 C94.72,43.28 93.54,42.68 91.5,41.9 C90.34,41.46 89.72,41.14 89.72,40.32 C89.72,39.56 90.4,38.96 91.38,38.96 C92.62,38.96 93.64,39.86 93.86,41.3 L94,41.3 L93.78,38.28 C93.58,38.46 93.38,38.52 93.14,38.52 C92.66,38.52 91.98,38.18 91.16,38.18 C89.4,38.18 88.18,39.34 88.18,40.76 C88.18,42.5 89.54,42.86 91.66,43.78 C92.72,44.24 93.2,44.74 93.2,45.64 C93.2,46.78 92.26,47.66 90.88,47.66 C89.2,47.66 88.32,46.62 88.06,44.42 L87.92,44.44 L88.1,48.5 Z M103.9,46.54 L103.9,34.68 L101.32,35.28 L101.32,35.48 C101.38,35.48 101.46,35.46 101.52,35.46 C102.04,35.46 102.28,35.78 102.28,36.42 L102.28,46.54 C102.28,47.64 102,48.12 101.26,48.12 L101.26,48.3 L104.92,48.3 L104.92,48.12 C104.18,48.12 103.9,47.64 103.9,46.54 Z M107.8,42.8 L112.12,41.32 C111.86,39.84 111.16,39.06 110.14,39.06 C108.78,39.06 107.8,40.38 107.8,42.32 L107.8,42.8 Z M107.78,43.64 C107.98,46.1 109.38,47.58 111.1,47.58 C112.34,47.58 113.24,46.88 113.86,45.42 L113.94,45.44 L113.3,48.38 C113.12,48.28 112.98,48.26 112.9,48.26 C112.62,48.26 111.98,48.48 110.94,48.48 C107.84,48.48 106.1,46.48 106.1,43.2 C106.1,40.2 107.98,38.2 110.42,38.2 C112.28,38.2 113.62,39.5 113.8,41.62 L107.78,43.64 Z M117.62,46.54 C117.62,47.64 117.9,48.12 118.64,48.12 L118.64,48.3 L114.98,48.3 L114.98,48.12 C115.72,48.12 116,47.64 116,46.54 L116,39.22 L114.72,39.22 L114.72,39.04 C116.04,38.88 115.82,38.1 115.96,36.7 C116.12,35.02 117.34,34 119.04,34 C119.76,34 120.38,34.08 120.88,34.32 L120.34,36.22 L120.28,36.2 C120.24,35.28 119.82,34.82 119.06,34.82 C117.98,34.82 117.62,35.6 117.62,37.1 L117.62,38.4 L118.88,38.4 C119.2,38.4 119.5,38.3 119.74,38.14 L119.34,39.36 C119.12,39.22 118.94,39.22 118.72,39.22 L117.62,39.22 L117.62,46.54 Z M121.94,39.22 L120.3,39.22 L120.3,39.04 C121.54,38.94 122.34,37.94 122.34,36.42 C122.34,36.12 122.3,35.82 122.24,35.54 L123.6,34.82 L123.6,38.4 L125.36,38.4 C125.68,38.4 125.98,38.3 126.22,38.14 L125.82,39.36 C125.6,39.22 125.42,39.22 125.2,39.22 L123.6,39.22 L123.6,45.7 C123.6,46.84 124.08,47.48 124.92,47.48 C125.68,47.48 126.4,46.92 126.7,45.98 L126.84,45.98 L126.28,48.08 C125.64,48.38 124.98,48.5 124.22,48.5 C122.38,48.5 121.94,47.42 121.94,45.26 L121.94,39.22 Z M133.84,39.22 L133.84,45.26 C133.84,47.42 134.28,48.5 136.12,48.5 C136.88,48.5 137.54,48.38 138.18,48.08 L138.74,45.98 L138.6,45.98 C138.3,46.92 137.58,47.48 136.82,47.48 C135.98,47.48 135.5,46.84 135.5,45.7 L135.5,39.22 L137.1,39.22 C137.32,39.22 137.5,39.22 137.72,39.36 L138.12,38.14 C137.88,38.3 137.58,38.4 137.26,38.4 L135.5,38.4 L135.5,34.82 L134.14,35.54 C134.2,35.82 134.24,36.12 134.24,36.42 C134.24,37.94 133.44,38.94 132.2,39.04 L132.2,39.22 L133.84,39.22 Z M142.02,46.54 L142.02,42.8 C142.02,42.04 142.08,41.32 142.5,40.64 C143.02,39.82 143.84,39.36 144.44,39.36 C145.26,39.36 145.72,39.9 145.72,40.68 C145.72,40.86 145.74,41.06 145.74,41.32 L145.74,46.54 C145.74,47.64 145.46,48.12 144.72,48.12 L144.72,48.3 L148.38,48.3 L148.38,48.12 C147.64,48.12 147.36,47.64 147.36,46.54 L147.36,40.9 C147.36,39.08 146.82,38.2 145.4,38.2 C144.24,38.2 143.06,38.88 142.02,40.26 L142.02,34.68 L139.44,35.28 L139.44,35.48 C139.5,35.48 139.58,35.46 139.64,35.46 C140.16,35.46 140.4,35.78 140.4,36.42 L140.4,46.54 C140.4,47.64 140.12,48.12 139.38,48.12 L139.38,48.3 L143.04,48.3 L143.04,48.12 C142.3,48.12 142.02,47.64 142.02,46.54 Z M151.1,42.8 L155.42,41.32 C155.16,39.84 154.46,39.06 153.44,39.06 C152.08,39.06 151.1,40.38 151.1,42.32 L151.1,42.8 Z M151.08,43.64 C151.28,46.1 152.68,47.58 154.4,47.58 C155.64,47.58 156.54,46.88 157.16,45.42 L157.24,45.44 L156.6,48.38 C156.42,48.28 156.28,48.26 156.2,48.26 C155.92,48.26 155.28,48.48 154.24,48.48 C151.14,48.48 149.4,46.48 149.4,43.2 C149.4,40.2 151.28,38.2 153.72,38.2 C155.58,38.2 156.92,39.5 157.1,41.62 L151.08,43.64 Z M170.28,38.22 C170.08,38.34 169.9,38.38 169.66,38.38 C169.18,38.38 168.56,38.2 167.82,38.2 C165.16,38.2 163.3,40.2 163.3,43.22 C163.3,46.44 165.16,48.48 168,48.48 C169,48.48 169.62,48.34 169.88,48.34 C170.08,48.34 170.2,48.38 170.3,48.5 L171.16,45.74 L171.02,45.74 C170.62,46.88 169.58,47.62 168.38,47.62 C166.5,47.62 165.12,46.08 165.12,43.42 C165.12,40.6 166.44,39 168.26,39 C169.42,39 170.24,39.78 170.44,41.18 L170.58,41.18 L170.28,38.22 Z M171.96,43.38 C171.96,40.22 173.78,38.2 176.34,38.2 C178.76,38.2 180.52,40.26 180.52,43.14 C180.52,46.5 178.74,48.5 176.14,48.5 C173.7,48.5 171.96,46.48 171.96,43.38 Z M176.08,39.04 C174.7,39.04 173.74,40.34 173.74,42.7 C173.74,45.96 174.76,47.66 176.36,47.66 C177.76,47.66 178.72,46.32 178.72,43.88 C178.72,40.74 177.64,39.04 176.08,39.04 Z M182.72,40.58 L182.72,45.8 C182.72,47.62 183.24,48.48 184.68,48.48 C185.94,48.48 187.3,47.7 188.14,46.34 C188.2,47.16 188.3,47.8 188.54,48.3 L190.82,48.3 L190.82,48.12 C189.98,48.06 189.74,47.28 189.74,45.62 L189.74,38.2 L187.06,38.4 L187.06,38.68 L187.16,38.68 C187.88,38.68 188.12,39.28 188.12,40.58 L188.12,42.86 C188.12,45.82 187.18,47.28 185.58,47.28 C184.78,47.28 184.34,46.78 184.34,45.8 L184.34,38.2 L181.68,38.4 L181.68,38.68 L181.78,38.68 C182.5,38.68 182.72,39.28 182.72,40.58 Z M194.76,46.54 L194.76,42.8 C194.76,42.04 194.82,41.32 195.24,40.64 C195.76,39.82 196.58,39.36 197.18,39.36 C198,39.36 198.46,39.9 198.46,40.68 L198.46,46.54 C198.46,47.64 198.18,48.12 197.44,48.12 L197.44,48.3 L201.1,48.3 L201.1,48.12 C200.36,48.12 200.08,47.64 200.08,46.54 L200.08,40.9 C200.08,39.08 199.56,38.2 198.14,38.2 C196.98,38.2 195.78,38.88 194.7,40.26 C194.64,39.46 194.54,38.82 194.3,38.3 L191.98,38.48 L191.98,38.68 C192.04,38.68 192.08,38.66 192.14,38.66 C192.8,38.66 193.14,39.42 193.14,40.92 L193.14,46.54 C193.14,47.64 192.86,48.12 192.12,48.12 L192.12,48.3 L195.78,48.3 L195.78,48.12 C195.04,48.12 194.76,47.64 194.76,46.54 Z M203.36,39.22 L203.36,45.26 C203.36,47.42 203.8,48.5 205.64,48.5 C206.4,48.5 207.06,48.38 207.7,48.08 L208.26,45.98 L208.12,45.98 C207.82,46.92 207.1,47.48 206.34,47.48 C205.5,47.48 205.02,46.84 205.02,45.7 L205.02,39.22 L206.62,39.22 C206.84,39.22 207.02,39.22 207.24,39.36 L207.64,38.14 C207.4,38.3 207.1,38.4 206.78,38.4 L205.02,38.4 L205.02,34.82 L203.66,35.54 C203.72,35.82 203.76,36.12 203.76,36.42 C203.76,37.94 202.96,38.94 201.72,39.04 L201.72,39.22 L203.36,39.22 Z M211.58,40.42 C212.38,38.88 213.42,38.12 214.38,38.12 C214.58,38.12 214.74,38.14 214.9,38.18 L214.58,39.92 C214.24,39.74 213.94,39.66 213.7,39.66 C212.44,39.66 211.64,40.72 211.64,42.94 L211.64,46.54 C211.64,47.64 211.92,48.12 212.66,48.12 L212.66,48.3 L209.02,48.3 L209.02,48.12 C209.76,48.12 210.02,47.64 210.02,46.54 L210.02,40.92 C210.02,39.46 209.58,38.68 208.82,38.68 L208.74,38.68 L208.74,38.48 L211.06,38.3 C211.38,38.84 211.5,39.52 211.58,40.42 Z M215.9,39.96 C215.62,39.14 215.52,38.68 214.84,38.58 L214.84,38.4 L218.08,38.4 L218.08,38.58 C217.68,38.62 217.46,38.9 217.46,39.24 C217.46,39.28 217.5,39.38 217.5,39.56 C217.5,39.6 217.56,39.76 217.66,40.06 L219.56,46.12 L221.12,40.42 C221.28,39.86 221.34,39.48 221.34,39.3 C221.34,38.82 221.12,38.58 220.7,38.58 L220.7,38.4 L223.48,38.4 L223.48,38.58 C222.7,38.66 222.48,39.3 222.16,40.4 L220.2,46.98 C219.86,48.14 219.64,49.36 219.16,50.52 C218.56,51.92 217.64,52.66 216.58,52.66 C215.96,52.66 215.38,52.4 214.86,51.86 L215.84,49.28 L215.92,49.3 C215.86,49.56 215.84,49.78 215.84,49.96 C215.84,50.78 216.22,51.22 216.82,51.22 C217.76,51.22 218.46,50.24 218.46,48.56 C218.46,47.94 218.3,47.08 217.94,46.02 L215.9,39.96 Z" id="quote-bottom"></path>
</defs>
<g fill-rule="evenodd">
<g class="glow" fill="black" fill-opacity="1">
<use class="quote-top" filter="url(#fill-glow)" xlink:href="#quote-top"></use>
<use class="quote-bottom" filter="url(#fill-glow)" xlink:href="#quote-bottom"></use>
</g>
<g class="top" fill="#FF0000">
<use class="quote-top" xlink:href="#quote-top"></use>
<use class="quote-bottom" xlink:href="#quote-bottom"></use>
</g>
</g>
</svg>
</div>
<div>
<a>
<svg width="107px" viewBox="0 0 107 34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="fill-glow">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.961017219 0 0 0 0 0.478442028 0 0 0 0 0.478442028 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M17.16,14.52 L17.16,14.7 C18.06,14.82 18.22,15.42 18.22,16.66 L18.22,20.28 C18.22,21.76 18.1,22.62 16.48,22.62 C13.94,22.62 11.96,19.98 11.96,15.9 C11.96,12.72 13.4,10.88 15.66,10.88 C17.18,10.88 18.28,11.74 19.08,13.54 L19.18,13.52 L18.62,10.02 C18.44,10.26 18.18,10.36 17.8,10.36 C17.22,10.36 16.4,10.02 15.28,10.02 C12.32,10.02 10,12.54 10,16.3 C10,18.8 10.94,20.94 12.56,22.26 C13.66,23.16 15.04,23.52 16.84,23.52 C17.18,23.52 17.52,23.5 17.88,23.5 L20.74,23.5 L20.74,23.32 C20.06,23.22 19.92,22.58 19.92,21.36 L19.92,16.66 C19.92,15.42 20.1,14.82 20.98,14.7 L20.98,14.52 L17.16,14.52 Z M32.98,16.88 C32.98,21.02 30.32,23.74 27.26,23.74 C24.3,23.74 22.18,20.9 22.18,16.88 C22.18,12.72 24.82,10.02 27.9,10.02 C30.84,10.02 32.98,12.88 32.98,16.88 Z M27.88,22.76 C29.76,22.76 31.02,21 31.02,17.74 C31.02,13.42 29.54,11.02 27.26,11.02 C25.4,11.02 24.14,12.78 24.14,16.04 C24.14,20.36 25.62,22.76 27.88,22.76 Z M49.04,21.36 L49.04,12.4 C49.04,11.16 49.22,10.56 50.16,10.44 L50.16,10.26 L46.12,10.26 L46.12,10.44 C47.06,10.56 47.24,11.16 47.24,12.4 L47.24,13.96 L42.46,13.96 L42.46,12.4 C42.46,11.16 42.64,10.56 43.58,10.44 L43.58,10.26 L39.54,10.26 L39.54,10.44 C40.48,10.56 40.66,11.16 40.66,12.4 L40.66,21.36 C40.66,22.6 40.46,23.2 39.54,23.32 L39.54,23.5 L43.58,23.5 L43.58,23.32 C42.64,23.2 42.46,22.6 42.46,21.36 L42.46,14.84 L47.24,14.84 L47.24,21.36 C47.24,22.6 47.04,23.2 46.12,23.32 L46.12,23.5 L50.16,23.5 L50.16,23.32 C49.22,23.2 49.04,22.6 49.04,21.36 Z M62.42,16.88 C62.42,21.02 59.76,23.74 56.7,23.74 C53.74,23.74 51.62,20.9 51.62,16.88 C51.62,12.72 54.26,10.02 57.34,10.02 C60.28,10.02 62.42,12.88 62.42,16.88 Z M57.32,22.76 C59.2,22.76 60.46,21 60.46,17.74 C60.46,13.42 58.98,11.02 56.7,11.02 C54.84,11.02 53.58,12.78 53.58,16.04 C53.58,20.36 55.06,22.76 57.32,22.76 Z M68.18,10.26 L63.88,10.26 L63.88,10.44 C64.82,10.56 65,11.16 65,12.4 L65,21.36 C65,22.6 64.8,23.2 63.88,23.32 L63.88,23.5 L67.24,23.5 L67.24,23.32 C66.3,23.2 66.14,22.6 66.14,21.36 L66.14,11.42 L69.46,18.76 L72.94,11.52 L72.94,21.36 C72.94,22.6 72.74,23.2 71.82,23.32 L71.82,23.5 L75.78,23.5 L75.78,23.32 C74.84,23.2 74.68,22.6 74.68,21.36 L74.68,12.4 C74.68,11.16 74.84,10.56 75.78,10.44 L75.78,10.26 L71.58,10.26 L71.58,10.44 C71.9,10.48 72.06,10.64 72.06,10.92 C72.06,11.1 71.94,11.42 71.72,11.88 L69.78,15.76 L67.94,11.68 C67.8,11.38 67.72,11.14 67.72,10.94 C67.72,10.7 67.88,10.5 68.18,10.44 L68.18,10.26 Z M80.36,14.06 L80.36,12.74 C80.36,11.62 80.58,11.08 82.04,11.08 C83.96,11.08 85.32,12.06 85.88,13.84 L86.02,13.82 L85.32,10 C84.98,10.22 84.66,10.26 84.28,10.26 L77.44,10.26 L77.44,10.44 C78.38,10.56 78.56,11.16 78.56,12.4 L78.56,21.36 C78.56,22.6 78.36,23.2 77.44,23.32 L77.44,23.5 L85.06,23.5 C85.38,23.5 85.6,23.52 85.78,23.68 L87,18.82 L86.86,18.82 C86,21.28 84.22,22.66 82.12,22.66 C80.82,22.66 80.36,22 80.36,20.46 L80.36,14.94 L81.36,14.94 C83,14.94 83.64,15.08 84.12,17.14 L84.24,17.14 L83.6,12.86 L83.52,12.88 C83.3,13.9 82.78,14.06 81.64,14.06 L80.36,14.06 Z" id="link-phrase"></path>
<path d="M90.76,20.2 C91.46,19.76 92.12,19.58 92.6,19.58 L92.94,19.58 L92.96,19.44 C92.3,19.38 91.96,19.04 91.96,18.46 C91.96,17.82 92.44,17.38 93.4,16.8 C94.4,16.18 95.26,15.76 95.74,15.18 C96.28,14.52 96.56,13.86 96.56,13.24 C96.56,11.4 95.04,10.02 92.7,10.02 C90.54,10.02 89.3,11.04 88.86,11.04 C88.72,11.04 88.58,10.98 88.42,10.86 L89.14,14.68 L89.28,14.66 C89.26,14.44 89.26,14.24 89.26,14.08 C89.26,12.32 90.74,10.92 92.46,10.92 C93.68,10.92 94.42,11.68 94.42,12.86 C94.42,14.4 93.46,15.16 92.18,16.36 C91.08,17.4 90.4,17.96 90.4,19.02 C90.4,19.44 90.5,19.82 90.76,20.2 Z M91.66,20.88 C91.1,20.88 90.64,21.48 90.64,22.28 C90.64,23.08 91.1,23.68 91.66,23.68 C92.22,23.68 92.68,23.08 92.68,22.28 C92.68,21.5 92.22,20.88 91.66,20.88 Z" id="link-mark"></path>
</defs>
<g fill-rule="evenodd">
<g class="glow" fill="black" fill-opacity="1">
<use class="link-phrase" filter="url(#fill-glow)" xlink:href="#link-phrase"></use>
<use class="link-mark" filter="url(#fill-glow)" xlink:href="#link-mark"></use>
</g>
<g class="top" fill="#FF0000">
<use class="link-phrase" xlink:href="#link-phrase"></use>
<use class="link-mark" xlink:href="#link-mark"></use>
</g>
</g>
</svg>
</a>
</div>@use 'sass:color';
$p: 12px;
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
*, *:before, *:after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }
body { background: #121214; }
main {
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
width: 100%;
height: 100%;
padding: $p;
perspective: 1000px;
> div {
display: flex;
justify-content: center;
width: 100%;
svg {
height: 100%;
}
&:nth-child(1) {
opacity: 0;
@media (prefers-reduced-motion: no-preference) {
transform: translateZ(1000px);
animation: zoomFadeIn 5000ms $easeOutCubic forwards;
transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
animation: fadeIn 5000ms $easeOutCubic forwards;
}
.error-1-e {
@media (prefers-reduced-motion: no-preference) {
transform: translateX(-50%);
animation: slideRight 3000ms $easeOutCubic -500ms forwards;
}
}
.error-2-r {
@media (prefers-reduced-motion: no-preference) {
transform: translateY(-20%);
animation: slideDown 5000ms $easeOutCubic -500ms forwards;
}
}
.error-4-o {
@media (prefers-reduced-motion: no-preference) {
transform: translateX(10%);
animation: slideLeftSmall 3000ms $easeOutCubic -300ms forwards;
}
}
.error-5-r {
@media (prefers-reduced-motion: no-preference) {
transform: translateX(50%);
animation: slideLeft 3000ms $easeOutCubic -500ms forwards;
}
}
.error-2-0 {
@media (prefers-reduced-motion: no-preference) {
transform: translateY(20%);
animation: slideUp 5000ms $easeOutCubic -500ms forwards;
}
}
.error-top {
@media (prefers-reduced-motion: no-preference) {
transform: scaleX(0);
// transform-origin: center center;
transform-origin: 163px 3px;
animation: scaleXIn 750ms $easeOutExpo 3000ms forwards;
}
@media (prefers-reduced-motion: reduce) {
opacity: 0;
animation: fadeIn 750ms $easeOutCubic 3000ms forwards;
}
}
.error-left {
@media (prefers-reduced-motion: no-preference) {
transform: scaleX(0);
// transform-origin: right center;
transform-origin: 75px 3px;
animation: scaleXIn 750ms $easeOutExpo 3500ms forwards;
}
@media (prefers-reduced-motion: reduce) {
opacity: 0;
animation: fadeIn 750ms $easeOutCubic 3500ms forwards;
}
}
.error-right {
@media (prefers-reduced-motion: no-preference) {
transform: scaleX(0);
// transform-origin: left center;
transform-origin: 250px 3px;
animation: scaleXIn 750ms $easeOutExpo 3500ms forwards;
}
@media (prefers-reduced-motion: reduce) {
opacity: 0;
animation: fadeIn 750ms $easeOutCubic 3500ms forwards;
}
}
}
&:nth-child(2) {
.quote-top, .quote-bottom {
opacity: 0;
@media (prefers-reduced-motion: no-preference) {
animation: slideUpFadeIn 1000ms $easeOutCubic 5500ms forwards;
}
@media (prefers-reduced-motion: reduce) {
animation: fadeIn 1000ms $easeOutCubic 5500ms forwards;
}
}
.quote-bottom {
animation-delay: 5750ms;
}
}
&:nth-child(3) {
.link-phrase, .link-mark {
opacity: 0;
@media (prefers-reduced-motion: no-preference) {
animation: slideUpFadeIn 1000ms $easeOutCubic 6250ms forwards;
}
@media (prefers-reduced-motion: reduce) {
animation: fadeIn 1000ms $easeOutCubic 6250ms forwards;
}
}
.link-mark {
opacity: 0;
animation: fadeIn 1000ms $easeOutCubic 6750ms forwards;
}
a {
cursor: pointer;
transition: all 500ms ease-out;
.top use {
transition: all 150ms ease-out;
}
&:hover, &:focus {
@media (prefers-reduced-motion: no-preference) {
animation: jitter 225ms ease-in-out 2 forwards;
}
.top use {
fill: white;
}
}
&:active {
.top use {
fill: color.adjust(#FF0000, $lightness: -15%);
}
}
}
}
}
}
@-moz-document url-prefix() {
main {
> div {
&:nth-child(3) {
a {
&:hover, &:focus {
animation: none;
}
}
}
}
}
}
@keyframes slideDown {
0% { transform: translateY(-20%); }
100% { transform: none; }
}
@keyframes slideUp {
0% { transform: translateY(20%); }
100% { transform: none; }
}
@keyframes slideRight {
0% { transform: translateX(-50%); }
100% { transform: none; }
}
@keyframes slideLeft {
0% { transform: translateX(50%); }
100% { transform: none; }
}
@keyframes slideLeftSmall {
0% { transform: translateX(10%); }
100% { transform: none; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slideUpFadeIn {
0% {
transform: translateY(50%);
opacity: 0;
}
100% {
transform: none;
opacity: 1;
}
}
@keyframes scaleXIn {
0% { transform: scaleX(0); }
100% { transform: none; }
}
@keyframes zoomFadeIn {
0% {
opacity: 0;
transform: translateZ(1000px);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes jitter {
0% {
transform: translateX(0px) translateY(0px);
opacity: 1;
}
10% {
transform: translateX(2px) translateY(2px);
opacity: 0.8;
}
20% {
transform: translateX(0px) translateY(0px);
opacity: 0.47;
}
30% {
transform: translateX(0px) translateY(2px);
opacity: 0.3;
}
70% {
transform: translateX(-1px) translateY(1px);
opacity: 0.96;
}
80% {
transform: translateX(0px) translateY(-2px);
opacity: 0.9;
}
90% {
transform: translateX(1px) translateY(-2px);
opacity: 0.81;
}
100% {
transform: translateX(0) translateY(0);
opacity: 1;
}
}A couple of tutorials for direction-aware CSS-only hover effects.
%ul{:ontouchstart => true}
%li
.link
- 4.times do
%a{:href => "https://codepen.io/gabriellewee", :target => "_blank"}
.cube.codepen
- 4.times do
%div
%div
%svg{:viewbox => "0 0 85 85"}
%path{:d => "M82.5,29.1666667 L42.5,2.5 L2.5,29.1666667 L2.5,55.8922001 L42.5,82.5 L82.5,55.8922001 L82.5,29.1666667 Z M42.5,2.9120677 L42.5,29.1666667 L42.5,2.9120677 Z M42.5,55.8922001 L42.5,82.5 L42.5,55.8922001 Z M2.5,29.1666667 L2.5,55.8922001 L42.5,29.1666667 L82.5,55.8922001 L82.5,29.1666667 L42.5,55.8922001 L2.5,29.1666667 Z"}
%div /gabriellewee
%li
.link
- 4.times do
%a{:href => "https://github.com/gabriellewee", :target => "_blank"}
.cube.github
- 4.times do
%div
%div
%svg{:viewbox => "0 0 85 85"}
%path.fill{:d => "M76.7 19c1.1-4.8 0.6-10.1-1.6-15 -0.7-1.7-2.3-2.9-4.2-3 -0.5-0.1-1.1-0.1-1.6-0.1 -4.6 0-10.7 1.6-15 5C50.4 5 46.4 4.6 42.5 4.6V4.4c-3.9 0-7.9 0.4-11.8 1.3 -4.3-3.4-10.4-5-15-5 -0.5 0-1.1 0-1.6 0.1 -1.9 0.1-3.5 1.3-4.2 3C7.7 8.7 7.2 14 8.3 18.8c-3.3 4.4-5 9.6-5 15.4 0 12.5 4.2 21.4 12.5 26.4 2.6 1.6 5.6 2.9 9 3.7 -0.6 1.7-0.9 3.7-0.9 6.1v11.2h0c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5l0-11c0-4.5 1.5-7.7 4.5-9.7 -1.5-0.1-3.2-0.3-5.2-0.8 -3.8-0.7-7-1.9-9.7-3.6C11.6 52.4 8.3 45.1 8.3 34.4c0-5.6 1.9-10.3 5.6-14.3 -1.7-4.4-1.4-9.6 0.6-14.3 0.4 0 0.8 0 1.2 0 4.9 0 10.8 2.2 13.5 5.5 4.5-1.2 9-1.8 13.3-1.8v0.1c4.3 0 8.8 0.6 13.3 1.8 2.7-3.3 8.6-5.5 13.5-5.5 0.4 0 0.8 0 1.2 0 2 4.7 2.3 9.9 0.6 14.3 3.7 4 5.6 8.7 5.6 14.3 0 10.7-3.3 18-10.2 22.2 -2.7 1.7-5.9 2.9-9.7 3.6 -2 0.5-3.7 0.7-5.2 0.8 3 2 4.5 5.2 4.5 9.7l0 11c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5h0V70.6c0-2.4-0.3-4.4-0.9-6.1 3.4-0.8 6.4-2.1 9-3.7 8.3-5 12.5-13.9 12.5-26.4C81.7 28.6 80 23.4 76.7 19z"}
%div /gabriellewee
%svg.clips{:viewbox => "0 0 0 0", :xmlns => "http://www.w3.org/2000/svg"}
%defs
%clippath#clip-right
%polygon#right{:points => "48 0 48 96 0 48"}
%clippath#clip-left
%polygon#left{:points => "0 0 0 96 48 48"}
%clippath#clip-bottom
%polygon#bottom{:points => "96 48 0 48 48 0"}
%clippath#clip-top
%polygon#top{:points => "0 0 96 0 48 48"}@use 'sass:color';
$indigo: #3023ae;
$iris: #53a0fe;
$lime: #b4ed50;
$codepen: #fcd000;
$github: #4183c4;
$f: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$p: 12px;
*, *:before, *:after { box-sizing: border-box; }
* { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }
body {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
overflow: hidden;
padding: $p;
background: color.mix($iris, $lime);
background: linear-gradient(135deg, $indigo 0%, $iris 50%, $lime 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$indigo', endColorstr='$lime',GradientType=1 );
font-family: $f;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
ul {
perspective: 1000px;
transform: translateZ(#{$p*8});
display: flex;
list-style: none;
margin: 0;
padding: $p;
li {
padding: $p;
}
}
.clips {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 0;
z-index: -100;
}
.link {
position: relative;
width: $p*8;
height: $p*8;
a {
transform-origin: $p*4 $p*4 -#{$p*4};
display: block;
position: absolute;
z-index: 1;
transform: translateZ(#{$p*2});
width: 100%;
height: 100%;
&:nth-child(1) {
top: 0;
left: 0;
height: 50%;
clip-path: polygon(50% 100%, 0 0, 100% 0);
@-moz-document url-prefix() {
clip-path: url(#clip-top);
}
&:hover, &:focus {
~ .cube {
transform: rotateX(-0.5turn);
div:nth-child(6) {
transform: rotateY(180deg) rotateZ(180deg) translateZ($p*8);
}
}
}
}
&:nth-child(2) {
top: 0;
right: 0;
width: 50%;
clip-path: polygon(100% 100%, 0 50%, 100% 0);
@-moz-document url-prefix() {
clip-path: url(#clip-right);
}
&:hover, &:focus {
~ .cube {
transform: rotateY(-0.5turn);
}
}
}
&:nth-child(3) {
bottom: 0;
right: 0;
height: 50%;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
@-moz-document url-prefix() {
clip-path: url(#clip-bottom);
}
&:hover, &:focus {
~ .cube {
transform: rotateX(0.5turn);
div:nth-child(6) {
transform: rotateY(180deg) rotateZ(180deg) translateZ($p*8);
}
}
}
}
&:nth-child(4) {
bottom: 0;
left: 0;
width: 50%;
clip-path: polygon(0 100%, 0 0, 100% 50%);
@-moz-document url-prefix() {
clip-path: url(#clip-left);
}
&:hover, &:focus {
~ .cube {
transform: rotateY(0.5turn);
}
}
}
&:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) {
&:hover, &:focus {
z-index: 2;
transform: translateZ(#{$p*3});
width: 100%!important;
height: 100%!important;
clip-path: none!important;
transition: all 100ms ease 500ms;
}
}
}
}
.cube {
transform-origin: $p*4 $p*4 -#{$p*4};
position: relative;
z-index: 0;
display: block;
width: 100%;
height: 100%;
transition: all 300ms ease-out;
div {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
// border-radius: 3px;
svg {
width: $p*4;
height: $p*4;
path:not(.fill) {
fill: none;
stroke: white;
stroke-width: 5px;
stroke-linecap: round;
stroke-linejoin: round;
}
path.fill {
fill: white;
}
}
// top
&:nth-child(1) {
transform-origin: center top;
transform: rotateX(90deg) translateY(#{-($p*8)});
}
// bottom
&:nth-child(2) {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY($p*8);
}
// left
&:nth-child(3) {
transform-origin: left center;
transform: rotateY(-90deg) translateX(#{-($p*8)});
}
// right
&:nth-child(4) {
transform-origin: right center;
transform: rotateY(90deg) translateX($p*8);
}
// front
&:nth-child(5) {
transform-origin: center center;
transform: rotateX(0);
}
// back
&:nth-child(6) {
transform-origin: center center;
transform: rotateY(180deg) translateZ($p*8);
}
}
&.codepen {
div {
// top
&:nth-child(1) {
background: color.adjust($codepen, $lightness: 35%);
}
// bottom
&:nth-child(2) {
background: color.adjust($codepen, $lightness: 10%);
}
// left
&:nth-child(3) {
background: color.adjust($codepen, $lightness: 20%);
}
// right
&:nth-child(4) {
background: color.adjust($codepen, $lightness: 20%);
}
// front
&:nth-child(5) {
background: $codepen;
}
// back
&:nth-child(6) {
background: white;
color: $codepen;
}
}
}
&.github {
div {
// top
&:nth-child(1) {
background: color.adjust($github, $lightness: 35%);
}
// bottom
&:nth-child(2) {
background: color.adjust($github, $lightness: 10%);
}
// left
&:nth-child(3) {
background: color.adjust($github, $lightness: 20%);
}
// right
&:nth-child(4) {
background: color.adjust($github, $lightness: 20%);
}
// front
&:nth-child(5) {
background: $github;
}
// back
&:nth-child(6) {
background: white;
color: $github;
}
}
}
}%main
.totem
- 4.times do
%div
- 3.times do
%div@use 'sass:color';
@use 'sass:math';
$p: 12px;
*, *:before, *:after { box-sizing: border-box; }
* { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none; }
body, html { height: 100vh; max-height: 100%; }
body {
background: #f8f5da;
background: linear-gradient(to bottom, #f8f5da 0%,#FFF4E2 25%,#A3C4D0 75%,#3e4f53 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f5da', endColorstr='#3e4f53',GradientType=0 );
overflow: hidden;
}
main {
transform: translateZ(100px);
perspective-origin: 100% 100% none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
transform-origin: center center;
@media only screen and (max-height: 470px) {
transform: scale(0.75);
}
}
.totem {
@media (prefers-reduced-motion: no-preference) {
transform: translateZ(40px) translateY(100vh);
animation: enter 2000ms cubic-bezier(.075,.820,.165,1) 500ms forwards;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
animation: fade 500ms ease-out forwards;
}
> div {
transform-origin: $p*4 $p*4 -#{$p*4};
position: relative;
width: $p*8;
height: $p*8;
> div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&:before, &:after {
content: "";
display: block;
position: absolute;
}
// top
&:nth-child(1) {
background: #FDA13E;
transform-origin: center top;
transform: rotateX(90deg) translateY(#{-($p*8)});
border: $p*.5 solid #FDAA4E;
}
// left
&:nth-child(2) {
background: #FED240;
transform-origin: left center;
transform: rotateY(-90deg) translateX(#{-($p*8)});
}
// right
&:nth-child(3) {
background: #FEF440;
transform-origin: center center;
transform: rotateX(0);
}
}
// one
&:nth-child(1) {
transform: rotateX(-15deg) rotateY(30deg) translateY(-45px) translateX(-30px) translateZ(60px);
@media (prefers-reduced-motion: no-preference) {
animation: one 3000ms linear infinite forwards;
will-change: transform;
}
> div {
// top
&:nth-child(1) {
border: 0;
background: #FFFD68;
&:before, &:after {
top: 0;
}
&:before {
left: $p;
width: calc(100% - #{$p*2});
height: calc(100% - #{$p});
background: #E4FFFF;
}
&:after {
left: $p*2;
width: calc(100% - #{$p*4});
height: calc(100% - #{$p*2});
background: #E4FFFF;
border: $p solid #FFFD68;
border-top: 0;
}
}
// left
&:nth-child(2) {
&:before, &:after {
border-radius: 100%;
}
&:before {
top: $p;
left: $p;
width: calc(100% - #{$p*2});
height: calc(100% - #{$p*2});
background: #FFFFF9;
}
&:after {
top: $p*2;
left: $p*2;
width: calc(100% - #{$p*4});
height: calc(100% - #{$p*4});
background: #9F355A;
@media (prefers-reduced-motion: no-preference) {
animation: eye 8000ms linear infinite forwards;
will-change: transform;
}
}
}
// right
&:nth-child(3) {
&:before {
top: $p;
left: $p;
width: calc(100% - #{$p*2});
height: calc(100% - #{$p});
background: #D7ECE4;
}
&:after {
top: $p*2;
left: $p*2;
width: calc(100% - #{$p*4});
height: calc(100% - #{$p*2});
background: #FEF440;
}
}
}
}
// two
&:nth-child(2) {
transform: rotateX(-15deg) rotateY(30deg) translateY(-30px) translateX(-20px) translateZ(40px);
> div {
// left
&:nth-child(2) {
background: linear-gradient(to bottom, #FED240, #FED240 50%, #C2C9CC 50%, #C2C9CC), linear-gradient(to right, #FED240, #FED240 50%, #C2C9CC 50%, #C2C9CC);
background-size: $p*7 $p*2, $p*2 $p*8;
background-position: top right, bottom left;
background-repeat: no-repeat;
&:before, &:after {
bottom: 0;
right: 0;
}
&:before {
width: calc(100% - #{$p*2});
height: calc(100% - #{$p*2});
background: linear-gradient(to bottom, #FED240, #FED240 50%, #C2C9CC 50%, #C2C9CC), linear-gradient(to right, #FED240, #FED240 50%, #C2C9CC 50%, #C2C9CC);
background-size: $p*5 $p*2, $p*2 $p*6;
background-position: top right, bottom left;
background-repeat: no-repeat;
}
&:after {
width: calc(100% - #{$p*4});
height: calc(100% - #{$p*4});
background: linear-gradient(to bottom, #FED240, #FED240 50%, #C2C9CC 50%, #C2C9CC), linear-gradient(to right, #FED240, #FED240 50%, #C2C9CC 50%, #C2C9CC), #FED240;
background-size: $p*3 $p*2, $p*2 $p*8;
background-position: top right, bottom left;
background-repeat: no-repeat;
}
}
// right
&:nth-child(3) {
background: linear-gradient(to bottom, #FEF440, #FEF440 50%, #D1EADE 50%, #D1EADE), linear-gradient(to bottom, #FEF440, #FEF440 50%, #D1EADE 50%, #D1EADE), #FEF440;
background-size: 100% $p*2;
background-repeat: no-repeat;
background-position: 0 0, 0 $p*2;
&:before, &:after {
bottom: $p*2;
width: calc(50% - #{$p*.5});
height: $p;
background: #D1EADE;
}
&:before {
left: 0;
}
&:after {
right: 0;
}
}
}
}
// three and four
&:nth-child(3), &:nth-child(4) {
> div {
// left
&:nth-child(2) {
cursor: grab;
&:before, &:after {
border-radius: 100%;
}
&:before {
top: $p*2;
left: $p*2;
width: calc(100% - #{$p*4});
height: calc(100% - #{$p*4});
background: #FDAE56;
}
&:after {
top: $p*2;
left: $p*2;
width: calc(100% - #{$p*4});
height: calc(100% - #{$p*4});
background: #EF9355;
border: $p solid #FEEE57;
transform: translateZ($p*.5);
}
}
}
}
// three
&:nth-child(3) {
transform: rotateX(-15deg) rotateY(30deg) translateY(-15px) translateX(-10px) translateZ(20px);
> div {
// right
&:nth-child(3) {
&:before {
top: 0;
left: $p;
width: calc(100% - #{$p*2});
height: 100%;
background: linear-gradient(to top, #FEF440, #FEF440), linear-gradient(to top, #FEF440, #FEF440), #CAE7DE;
background-size: $p $p;
background-position: 0 $p*6, $p*5 $p*6;
background-repeat: no-repeat;
}
&:after {
top: $p;
left: $p*2;
width: calc(100% - #{$p*4});
height: calc(100% - #{$p*2});
background: #CAE7DE;
border: $p solid #FEF440;
border-bottom: 0;
}
}
}
}
// four
&:nth-child(4) {
transform: rotateX(-15deg) rotateY(30deg) translateZ(0);
> div {
// right
&:nth-child(3) {
cursor: grab;
&:before, &:after {
border-radius: 100%;
}
&:before {
top: $p*2;
left: $p*2;
width: calc(100% - #{$p*4});
height: calc(100% - #{$p*4});
background: #FDAA55;
}
&:after {
top: $p*2;
left: $p*2;
width: calc(100% - #{$p*4});
height: calc(100% - #{$p*4});
background: #FDAA55;
border: $p solid #FFFD60;
transform: translateZ(math.div($p, 3) * 2);
}
}
}
}
}
&:hover {
> div {
&:nth-child(3), &:nth-child(4) {
> div {
&:nth-child(2) {
&:before {
background: color.adjust(#FDAE56, $lightness: 2%);
}
&:after {
background: color.adjust(#EF9355, $lightness: 2%);
border-color: color.adjust(#FEEE57, $lightness: 10%);
}
}
}
}
&:nth-child(4) {
> div {
&:nth-child(3) {
&:before {
background: color.adjust(#FDAA55, $lightness: 2%);
}
&:after {
background: color.adjust(#FDAA55, $lightness: 2%);
border-color: color.adjust(#FFFD60, $lightness: 10%);
}
}
}
}
}
}
}
@keyframes enter {
0% {
transform: translateZ(40px) translateY(100vh);
}
100% {
transform: translateZ(40px);
}
}
@keyframes one {
0% {
transform: rotateX(-15deg) rotateY(30deg) translateY(-45px) translateX(-30px) translateZ(60px);
animation-timing-function: ease-out;
}
5% {
transform: rotateX(-15deg) rotateY(30deg) translateY(-65px) translateX(-30px) translateZ(60px);
animation-timing-function: ease-in;
}
10%, 12% {
transform: rotateX(-15deg) rotateY(30deg) translateY(-45px) translateX(-30px) translateZ(60px);
animation-timing-function: ease-out;
}
15% {
transform: rotateX(-15deg) rotateY(30deg) translateY(-65px) translateX(-30px) translateZ(60px);
animation-timing-function: ease-in;
}
20% {
transform: rotateX(-15deg) rotateY(30deg) translateY(-45px) translateX(-30px) translateZ(60px);
animation-timing-function: ease-out;
}
}
@keyframes eye {
// top left
// transform: translate3d(-8px,-8px,0);
// top right
// transform: translate3d(8px,-8px,0);
// bottom right
// transform: translate3d(8px,8px,0);
// bottom left
// transform: translate3d(-8px,8px,0);
0%, 23.5% {
transform: translate3d(0,0,0);
}
25%, 48.5% {
transform: translate3d(#{math.div($p, 3) * 2},#{math.div($p, 3) * 2},0);
}
50%, 73.5% {
transform: translate3d(#{-(math.div($p, 3) * 2)},#{$p*.5},0);
}
75%, 98.5% {
transform: translate3d(#{$p*.5},#{-(math.div($p, 3) * 2)},0);
}
100% {
transform: translate3d(0,0,0);
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<ul>
<li>
<p>
Drop an <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d" target="_blank">SVG path description</a> in the first box to find its length, i.e. <code><path d="<span>M22.5,88.5 L257.5,293.5</span>"></code> - useful when calculating stroke-dashoffset for animation.
</p>
</li>
<li>
<form>
<input id="path-length" type="text" onClick="this.select();"/>
</form>
<button id="submit-btn">get length</button>
</li>
<li>
<input id="path-output" class="copy" data-clipboard-target="#path-output" type="tel" />
<button id="copy-btn" class="copy" data-clipboard-target="#path-output">copy</button>
</li>
</ul>
<svg><path d=""></path></svg>
<script src="/static/code/js/jquery.min.js"></script>
<script src="/static/code/js/clipboard.min.js"></script>
<script>
$("body").addClass("pre-enter");
setTimeout(function(){
$("body").addClass("on-enter");
}, 500);
setTimeout(function(){
$("body").removeClass("pre-enter on-enter");
}, 1500);
function round(value, decimals) {
return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}
$('#submit-btn').click(function(){
var path = document.querySelector('path');
var submitted = document.getElementById('path-length').value;
path.setAttribute("d", submitted);
setTimeout(function(){
var length = path.getTotalLength();
var total = round(length, 3);
console.log(total);
document.getElementById('path-output').value = total;
}, 100);
});
new ClipboardJS('.copy');
</script>@use 'sass:color';
@use 'sass:math';
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body, html { height: 100%; }
body {
overflow: hidden;
color: $forest;
font-family: $font;
background: color.adjust($beige, $lightness: 5%);
margin: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
&.pre-enter {
opacity: 0;
}
&.on-enter {
opacity: 1;
transition: all 1000ms ease-out;
}
}
::selection {
background: $pink;
}
a {
color: $forest;
&:hover, &:focus {
color: white;
background: $pink;
border-radius: 2px;
}
&:active {
background: $grey;
}
}
p {
font-size: 18px;
line-height: 1.5;
}
code {
color: $slate;
span {
border-radius: 2px;
background: $pink;
color: white;
}
}
svg {
position: absolute;
opacity: 0;
}
ul {
margin: 0 auto;
max-width: 800px;
width: 100%;
display: flex;
flex-flow: row wrap;
position: relative;
z-index: 10;
padding: $padding*.5;
list-style: none;
margin: 0;
li {
padding: $padding*.5;
width: 100%;
}
}
input, button {
display: block;
width: 100%;
margin: 0;
font-family: $font;
appearance: none;
border: 0;
border-radius: 2px;
&:focus {
outline: none!important;
}
}
input {
font-size: 48px;
font-weight: 600;
text-align: center;
color: $grey;
&::placeholder {
color: rgba($grey, .5);
}
&:focus {
color: $slate;
&::placeholder {
color: rgba($grey, .75);
}
}
}
button {
cursor: pointer;
margin-top: $padding;
background: $green;
color: white;
font-size: 20px;
font-weight: 600;
height: 48px;
width: 100%;
&:hover, &:focus {
background: $grey;
color: $forest;
}
&:active {
background: $forest;
color: white;
}
}
@media only screen and (min-width: 640px) {
body, main {
display: flex;
align-items: center;
justify-content: center;
}
ul {
li {
width: 50%;
&:first-child {
width: 100%;
}
}
}
input {
font-size: 96px;
}
button {
font-size: 24px;
height: 64px;
}
}<div class="changelog">
<button id="back">Back</button>
<div>
<h2>05/24/2022 at 9:18pm</h2>
<ul>
<li>Temporarily remove unusable reset button</li>
</ul>
</div>
<div>
<h2>04/18/2022 at 12:30pm</h2>
<ul>
<li>Fixed changelog layout</li>
<li>Update libraries</li>
</ul>
</div>
<div>
<h2>08/18/2016 at 7:00PM</h2>
<ul>
<li>Fixed bug where double-clicking a card would mark it as matched without an actual match.</li>
<li>Fixed bug where card values were visible in Firefox.</li>
</ul>
</div>
<div>
<h2>08/18/2016 at 1:30PM</h2>
<ul>
<li>Fixed bug where cards would still be marked as matched on multiple replays after the first one</li>
<li>Adjusted delays to better avoid mismatches or standalone cards</li>
<li>Fixed bug where cards would still be clickable even after being matched</li>
</ul>
</div>
</div>
<div class="start">
<h1>Isotope Card Match</h1>
<p>Click on a card to flip it over. If you turn over two matching cards, you get to keep them; if they don't match, they get flipped back. Every fifteen seconds, the cards will reshuffle. Match all twenty cards to win! View in full-page mode to play.</p>
<div>
<button id="start">Start</button>
</div>
<footer>
<a href="https://isotope.metafizzy.co" target="_blank">Isotope by Metafizzy</a> · Designed by <a href="http://gabriellew.ee" target="_blank">Gabrielle Wee</a> · <a id="changelog-1" href="#">Changelog</a>
</footer>
</div>
<div class="congrats">
<h1>Congrats, you've won!</h1>
<div>
<button id="play">Play again?</button>
</div>
<footer>
<a href="https://isotope.metafizzy.co" target="_blank">Isotope by Metafizzy</a> · Designed by <a href="http://gabriellew.ee" target="_blank">Gabrielle Wee</a> · <a id="changelog-2" href="#">Changelog</a>
</footer>
</div>
<ul class="cards">
<li>
<div class="playing-card-container play-ace">
<input type="radio" name="hearts-ace"/>
<input type="radio" name="hearts-ace"/>
<input type="radio" name="hearts-ace"/>
<input type="radio" name="hearts-ace"/>
<div class="playing-card play-heart">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">A</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-two">
<input type="radio" name="hearts-two"/>
<input type="radio" name="hearts-two"/>
<input type="radio" name="hearts-two"/>
<input type="radio" name="hearts-two"/>
<div class="playing-card play-heart">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">2</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-jack">
<input type="radio" name="hearts-jack"/>
<input type="radio" name="hearts-jack"/>
<input type="radio" name="hearts-jack"/>
<input type="radio" name="hearts-jack"/>
<div class="playing-card play-heart">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">J</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-queen">
<input type="radio" name="hearts-queen"/>
<input type="radio" name="hearts-queen"/>
<input type="radio" name="hearts-queen"/>
<input type="radio" name="hearts-queen"/>
<div class="playing-card play-heart">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">Q</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-king">
<input type="radio" name="hearts-king"/>
<input type="radio" name="hearts-king"/>
<input type="radio" name="hearts-king"/>
<input type="radio" name="hearts-king"/>
<div class="playing-card play-heart">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">K</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-ace">
<input type="radio" name="diamonds-ace"/>
<input type="radio" name="diamonds-ace"/>
<input type="radio" name="diamonds-ace"/>
<input type="radio" name="diamonds-ace"/>
<div class="playing-card play-diamond">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">A</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-two">
<input type="radio" name="diamonds-two"/>
<input type="radio" name="diamonds-two"/>
<input type="radio" name="diamonds-two"/>
<input type="radio" name="diamonds-two"/>
<div class="playing-card play-diamond">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">2</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-jack">
<input type="radio" name="diamonds-jack"/>
<input type="radio" name="diamonds-jack"/>
<input type="radio" name="diamonds-jack"/>
<input type="radio" name="diamonds-jack"/>
<div class="playing-card play-diamond">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">J</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-queen">
<input type="radio" name="diamonds-queen"/>
<input type="radio" name="diamonds-queen"/>
<input type="radio" name="diamonds-queen"/>
<input type="radio" name="diamonds-queen"/>
<div class="playing-card play-diamond">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">Q</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-king">
<input type="radio" name="diamonds-king"/>
<input type="radio" name="diamonds-king"/>
<input type="radio" name="diamonds-king"/>
<input type="radio" name="diamonds-king"/>
<div class="playing-card play-diamond">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">K</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-ace">
<input type="radio" name="clubs-ace"/>
<input type="radio" name="clubs-ace"/>
<input type="radio" name="clubs-ace"/>
<input type="radio" name="clubs-ace"/>
<div class="playing-card play-club">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">A</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-two">
<input type="radio" name="clubs-two"/>
<input type="radio" name="clubs-two"/>
<input type="radio" name="clubs-two"/>
<input type="radio" name="clubs-two"/>
<div class="playing-card play-club">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">2</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-jack">
<input type="radio" name="clubs-jack"/>
<input type="radio" name="clubs-jack"/>
<input type="radio" name="clubs-jack"/>
<input type="radio" name="clubs-jack"/>
<div class="playing-card play-club">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">J</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-queen">
<input type="radio" name="clubs-queen"/>
<input type="radio" name="clubs-queen"/>
<input type="radio" name="clubs-queen"/>
<input type="radio" name="clubs-queen"/>
<div class="playing-card play-club">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">Q</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-king">
<input type="radio" name="clubs-king"/>
<input type="radio" name="clubs-king"/>
<input type="radio" name="clubs-king"/>
<input type="radio" name="clubs-king"/>
<div class="playing-card play-club">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">K</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-ace">
<input type="radio" name="spades-ace"/>
<input type="radio" name="spades-ace"/>
<input type="radio" name="spades-ace"/>
<input type="radio" name="spades-ace"/>
<div class="playing-card play-spade">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">A</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-two">
<input type="radio" name="spades-two"/>
<input type="radio" name="spades-two"/>
<input type="radio" name="spades-two"/>
<input type="radio" name="spades-two"/>
<div class="playing-card play-spade">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">2</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-jack">
<input type="radio" name="spades-jack"/>
<input type="radio" name="spades-jack"/>
<input type="radio" name="spades-jack"/>
<input type="radio" name="spades-jack"/>
<div class="playing-card play-spade">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">J</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-queen">
<input type="radio" name="spades-queen"/>
<input type="radio" name="spades-queen"/>
<input type="radio" name="spades-queen"/>
<input type="radio" name="spades-queen"/>
<div class="playing-card play-spade">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">Q</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class="playing-card-container play-king">
<input type="radio" name="spades-king"/>
<input type="radio" name="spades-king"/>
<input type="radio" name="spades-king"/>
<input type="radio" name="spades-king"/>
<div class="playing-card play-spade">
<div class="back">
<div><div><div></div></div></div>
</div>
<div class="front">
<svg viewBox="0 0 250 350">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M181,114.589487 C181,98.2465582 167.776199,85 151.466344,85 C139.864282,85 129.833984,91.6958698 125.003748,101.438048 C120.163517,91.6958698 110.140715,85 98.5361549,85 C82.228799,85 69,98.2465582 69,114.589487 C69,153.630788 124.386538,175 124.386538,175 C124.386538,175 181,153.360451 181,114.589487 L181,114.589487 Z" class="heart" stroke="#F04F54" stroke-width="3" fill="#F04F54"></path>
<polygon class="diamond" stroke="#F04F54" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#F04F54" points="124.861436 74 180.723407 129.861971 124.861436 185.723943 68.9994643 129.861971"></polygon>
<path d="M152.113309,112.798631 C151.699475,112.798631 151.283133,112.808673 150.874314,112.828758 C151.852468,110.036972 152.391707,107.039317 152.391707,103.918642 C152.391707,89.0558964 140.35289,77 125.502508,77 C110.649618,77 98.6108012,89.0558964 98.6108012,103.918642 C98.6108012,107.039317 99.1475318,110.036972 100.125686,112.828758 C99.7168675,112.808673 99.3030331,112.798631 98.8891988,112.798631 C84.0363087,112.798631 72,124.849506 72,139.709742 C72,154.577509 84.0363087,166.625873 98.8891988,166.625873 C107.647438,166.625873 115.412475,162.425641 120.320801,155.938253 C117.386339,167.318799 113.486264,179.176358 109.262646,183 L125.377104,183 L125.620388,183 L141.737354,183 C137.518752,179.176358 133.623693,167.336373 130.684215,155.958338 C135.595049,162.433173 143.365102,166.623363 152.113309,166.623363 C166.958675,166.623363 179,154.574998 179,139.707231 C179,124.849506 166.958675,112.798631 152.113309,112.798631 L152.113309,112.798631 Z" class="club" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<path d="M126.124735,78 C126.124735,78 69,99.6590241 69,138.45067 C69,154.805904 82.3453437,168.061618 98.8055264,168.061618 C106.78951,168.061618 114.036433,164.932005 119.382648,159.856416 C116.595952,169.907287 113.092389,179.624633 109.341457,183 L125.380101,183 L125.619899,183 L141.658543,183 C137.910135,179.624633 134.406572,169.907287 131.617352,159.856416 C136.963567,164.934513 144.21049,168.061618 152.199522,168.061618 C168.657181,168.061618 182,154.805904 182,138.45067 C182.005048,99.3856846 126.124735,78 126.124735,78 L126.124735,78 Z" class="spade" stroke="#40484B" stroke-width="3" fill="#40484B"></path>
<text font-family="Brandon Grotesque, Brandon Text, Futura, Source Sans Pro, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" font-size="72" font-weight="900" fill="#40484B" text-anchor="middle">
<tspan x="125" y="257">K</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</li>
</ul>
<!-- <button id="reset">
<svg width="24px" height="24px" viewBox="0 0 100 100">
<g fill="none" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
<path d="M29.4845956,42.273876 L17.4830158,50.6684299 L9.5,38.3892642"></path>
<path d="M21.4439147,64.2244662 C26.6881822,74.7544952 37.5187724,82 50,82 C67.6001728,82 81.918101,67.5925239 81.918101,49.8841841"></path>
<path d="M78.5541862,35.7755338 C73.3099187,25.2455048 62.4793285,18 49.9981009,18 C32.397928,18 18.0799999,32.4074761 18.0799999,50.1158159"></path>
<path d="M70.5199966,57.726124 L82.5215765,49.3315701 L90.5045923,61.6107358"></path>
</g>
</svg>
</button> -->
<script src="/static/code/js/jquery.min.js"></script>
<script src="/static/js/lib/isotope.min.js"></script>
<script src="/static/code/js/card-game.js"></script>@use 'sass:color';
$red: #F04F54;
$black: #40484b;
$green: #43cb9d;
$grey: #ebebeb;
$padding: 12px;
$font: "brandon-grotesque", "Brandon Grotesque", "Brandon Text", "Futura", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
*:focus { outline: none; }
body, html { height: 100%; }
body {
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
background: $grey;
perspective: 1000px;
margin: 0;
overflow: hidden;
font-family: $font;
font-size: 18px;
color: $black;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
&.success {
transition: all 250ms ease-out;
background: $green;
#reset {
opacity: 0;
z-index: -1;
}
.start {
opacity: 0;
z-index: -100;
}
.congrats {
transition: all 250ms ease-out 250ms;
opacity: 1;
z-index: 100;
}
}
&.begin {
#reset {
opacity: 1;
z-index: auto;
}
.start {
opacity: 0;
z-index: -100;
}
.congrats {
opacity: 0;
z-index: -100;
}
.playing-card {
> div {
&.back {
> div {
> div {
> div {
animation: timer 15s linear infinite forwards;
}
}
}
}
}
}
}
}
main {
width: 100%;
}
strong {
font-weight: 600;
}
button {
appearance: none;
cursor: pointer;
border: 0;
font-family: $font;
border-radius: 2px;
font-size: 20px;
background: $green;
color: white;
transition: all 250ms ease-out;
* {
transition: all 250ms ease-out;
}
&:hover, &:focus {
background: color.mix(white, $green);
color: color.mix($black, $green);
svg {
* {
stroke: color.mix($black, $green);
}
}
}
&:active {
background: color.mix($black, $green);
color: white;
svg {
* {
stroke: white;
}
}
}
}
.changelog {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: $padding*2 $padding $padding;
background: $grey;
overflow: auto;
&.visible {
transition: opacity 250ms ease-out;
opacity: 1;
z-index: 101;
}
&:not(.visible) {
transition: opacity 250ms ease-out, z-index 0ms ease-out 250ms;
opacity: 0;
z-index: -101;
}
button {
display: block;
margin: 0 auto;
height: 48px;
min-width: 128px;
}
div {
width: 100%;
max-width: 512px;
margin-top: $padding;
margin-left: auto;
margin-right: auto;
h2 {
margin: 0;
font-weight: 600;
}
ul {
list-style: circle;
padding: $padding*.25 0;
li {
padding: $padding*.25 0;
line-height: 1.4;
}
}
}
}
.congrats, .start {
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
flex-flow: row wrap;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: $padding;
h1, p, div {
width: 100%;
}
h1 {
font-size: 48px;
margin-bottom: $padding;
text-align: center;
}
p {
max-width: 512px;
line-height: 1.4;
+ p {
margin-top: $padding;
font-size: 14px;
}
}
button {
display: block;
margin: $padding auto 0;
height: 64px;
min-width: 256px;
&:hover, &:focus {
background: color.mix(white, $green);
color: color.mix($black, $green);
}
&:active {
background: color.mix($black, $green);
color: white;
}
}
footer {
position: absolute;
bottom: 0;
left: 0;
text-align: center;
padding: $padding;
width: 100%;
font-size: 14px;
a {
background: $green;
color: white;
text-decoration: none;
display: inline-block;
border-radius: 2px;
padding: 2px 4px;
&:hover, &:focus {
background: $red;
color: white;
}
&:active {
background: $black;
color: white;
}
}
}
}
.congrats {
transition: opacity 250ms ease-out 250ms, z-index 0ms linear 500ms;
background: rgba($green, .95);
color: white;
opacity: 0;
z-index: -100;
button {
background: white;
color: $green;
}
footer {
a {
background: white;
color: $green;
&:hover, &:focus {
background: $red;
color: white;
}
&:active {
background: $black;
color: white;
}
}
}
}
.start {
transition: opacity 250ms ease-out 250ms, z-index 0ms linear 500ms;
background: rgba($grey, .8);
opacity: 1;
z-index: 100;
}
.cards {
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
padding: $padding*.5;
width: 100%;
max-width: 492px;
margin: 0 auto;
height: 100%;
li {
padding: $padding*.5;
}
}
#reset {
position: absolute;
bottom: 0;
right: 0;
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 0;
border-top-left-radius: 2px;
background: $grey;
opacity: 0.5;
svg {
* {
stroke: $black;
}
}
&:hover, &:focus {
opacity: 1;
svg {
* {
stroke: $red;
}
}
}
&:active {
opacity: 1;
svg {
* {
stroke: $black;
}
}
}
}
.playing-card-container {
position: relative;
input {
position: absolute;
appearance: none;
opacity: 0;
z-index: 10;
margin: 0;
width: 50%;
height: 50%;
cursor: pointer;
&:hover, &:focus {
~ .playing-card {
> div {
&.back {
> div {
background: $red;
}
}
}
}
}
&:nth-child(1) {
top: 0;
left: 0;
&:hover, &:focus {
~ .playing-card {
transform-origin: bottom right;
transform: rotateX(3deg) rotateY(-3deg) translateZ(0);
}
}
}
&:nth-child(2) {
top: 0;
right: 0;
&:hover, &:focus {
~ .playing-card {
transform-origin: bottom left;
transform: rotateX(3deg) rotateY(3deg) translateZ(0);
}
}
}
&:nth-child(3) {
bottom: 0;
right: 0;
&:hover, &:focus {
~ .playing-card {
transform-origin: top left;
transform: rotateX(-3deg) rotateY(3deg) translateZ(0);
}
}
}
&:nth-child(4) {
bottom: 0;
left: 0;
&:hover, &:focus {
~ .playing-card {
transform-origin: top right;
transform: rotateX(-3deg) rotateY(-3deg) translateZ(0);
}
}
}
&:checked ~ .playing-card {
> div {
&.front {
opacity: 1;
transform: rotateY(0deg) translateZ(0);
}
&.back {
opacity: 0;
transform: rotateY(180deg) translateZ(0);
> div {
> div {
transition: 0ms;
opacity: 0;
}
}
}
}
}
}
}
.complete {
input {
display: none!important;
pointer-events: none;
}
}
.playing-card {
width: 84px;
transform-style: preserve-3d;
transition: all 250ms ease-out;
* {
transform-origin: center center;
transform-style: preserve-3d;
transition: all 250ms ease-out;
}
> div {
width: 100%;
height: 100%;
background: white;
border-radius: 10px;
&.front {
opacity: 0;
backface-visibility: hidden;
transform: rotateY(180deg);
position: relative;
z-index: 2;
svg {
display: block;
width: 100%;
height: 100%;
}
}
&.back {
opacity: 1;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
padding: 12px;
backface-visibility: hidden;
> div {
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
border-radius: 2px;
width: 100%;
height: 100%;
background: #f5f5f5;
> div {
border-radius: 100%;
width: 36px;
height: 36px;
background: white;
overflow: hidden;
transform: translateZ(0);
transition: 250ms ease 250ms;
> div {
width: 36px;
height: 36px;
background: color.mix(white, $black, 80%);
transform: translate3d(0,-100%,0);
}
}
}
}
}
}
.play-heart {
.diamond, .spade, .club {
display: none;
}
text {
fill: $red;
}
}
.play-diamond {
.heart, .spade, .club {
display: none;
}
text {
fill: $red;
}
}
.play-spade {
.diamond, .heart, .club {
display: none;
}
text {
fill: $black;
}
}
.play-club {
.diamond, .spade, .heart {
display: none;
}
text {
fill: $black;
}
}
@keyframes timer {
0% { transform: translateY(100%); }
100% { transform: translateY(0); }
}
@-moz-document url-prefix() {
.playing-card {
> div {
&.back {
> div {
> div {
border-radius: 2px;
> div {
border-radius: 2px;
}
}
}
}
}
}
}var $container = $('.cards');
$container.isotope({
itemSelector: 'li',
masonry: { columnWidth: 'li' }
});
$('#changelog-1, #changelog-2').click(function() {
$(".changelog").addClass("visible");
});
$('#back').click(function() {
$(".changelog").removeClass("visible");
});
$('#start, #play').click(function() {
$("body").removeClass("success").addClass("begin");
$container.isotope('shuffle');
$('input').prop('checked', false);
$('.selected-1, .selected-2, .complete').removeClass();
window.setInterval(function(){
$container.isotope('shuffle');
}, 15000);
});
// $('#reset').click(function() {
// $('body').removeClass("success");
// $('input').prop('checked', false);
// $('.selected-1, .selected-2, .completed').removeClass();
// window.setInterval(function(){
// $container.isotope('shuffle');
// }, 250);
// });
$('input').click(function() {
var card = $(this).parent().parent();
if ($('.selected-1').length === 0) {
card.addClass('selected-1');
} else if ($('.selected-1').length === 1) {
if (!$(this).parent().parent().hasClass("selected-1")) {
card.addClass('selected-2');
}
var selectOne = $(".selected-1").children(".playing-card-container");
var selectTwo = $(".selected-2").children(".playing-card-container");
if ((selectOne.is('.play-ace')) && (selectTwo.is('.play-ace'))) {
$('.selected-1, .selected-2').addClass("complete");
setTimeout(function() {
$('.complete').removeClass("selected-1 selected-2");
}, 250);
} else if ((selectOne.is('.play-two')) && (selectTwo.is('.play-two'))) {
$('.selected-1, .selected-2').addClass("complete");
setTimeout(function() {
$('.complete').removeClass("selected-1 selected-2");
}, 250);
} else if ((selectOne.is('.play-jack')) && (selectTwo.is('.play-jack'))) {
$('.selected-1, .selected-2').addClass("complete");
setTimeout(function() {
$('.complete').removeClass("selected-1 selected-2");
}, 250);
} else if ((selectOne.is('.play-queen')) && (selectTwo.is('.play-queen'))) {
$('.selected-1, .selected-2').addClass("complete");
setTimeout(function() {
$('.complete').removeClass("selected-1 selected-2");
}, 250);
} else if ((selectOne.is('.play-king')) && (selectTwo.is('.play-king'))) {
$('.selected-1, .selected-2').addClass("complete");
setTimeout(function() {
$('.complete').removeClass("selected-1 selected-2");
}, 250);
} else {
setTimeout(function() {
$('.selected-1, .selected-2').children('.playing-card-container').children('input').prop('checked', false);
}, 250);
setTimeout(function() {
$('.selected-1, .selected-2').removeClass();
}, 255);
}
if ($('.complete').length === 20 ) {
$('body').removeClass("begin").addClass("success");
for (i=0; i<100; i++){
window.clearInterval(i);
}
}
}
});
Another long break since the last time I posted on this site. I did in fact finish up the models from my last blog post. Here’s a photo of the final product.
I wasn’t able to get as many elements into the level as I would have liked, but overall I’m pretty satisfied with how the atmosphere turned out. Maybe a little less fog next time.
Finally finished with the term! It was a harrowing eight weeks in which I had all-nighters at least once a week. I finally pulled through - my final was yesterday. Since then, I have had a total of at least twenty hours of sleep, if not more. Finally being able to catch up on my sleep has worked wonders.
In the game production class I took, we worked on modeling game level elements. Next term, we’ll be texturing and putting on the final touches for our models.
