.shake,.shake-little,.shake-slow,.shake-hard,.shake-horizontal,.shake-vertical,.shake-rotate,.shake-opacity,.shake-crazy,.shake-chunk{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-freeze:hover,.shake-trigger:hover .shake-freeze,.shake:hover,.shake-trigger:hover .shake,.shake-little:hover,.shake-trigger:hover .shake-little,.shake-slow:hover,.shake-trigger:hover .shake-slow,.shake-hard:hover,.shake-trigger:hover .shake-hard,.shake-horizontal:hover,.shake-trigger:hover .shake-horizontal,.shake-vertical:hover,.shake-trigger:hover .shake-vertical,.shake-rotate:hover,.shake-trigger:hover .shake-rotate,.shake-opacity:hover,.shake-trigger:hover .shake-opacity,.shake-crazy:hover,.shake-trigger:hover .shake-crazy,.shake-chunk:hover,.shake-trigger:hover .shake-chunk{animation-play-state:running}@keyframes shake{2%{transform:translate(.5px, -.5px) rotate(.5deg)}4%{transform:translate(-.5px, 2.5px) rotate(.5deg)}6%{transform:translate(-1.5px, 2.5px) rotate(-.5deg)}8%{transform:translate(-1.5px, .5px) rotate(1.5deg)}10%{transform:translate(1.5px, 2.5px) rotate(.5deg)}12%{transform:translate(-1.5px, 2.5px) rotate(1.5deg)}14%{transform:translate(1.5px, 1.5px) rotate(-.5deg)}16%{transform:translate(2.5px, -.5px) rotate(1.5deg)}18%{transform:translate(1.5px, .5px) rotate(.5deg)}20%{transform:translate(1.5px, -1.5px) rotate(-.5deg)}22%{transform:translate(-1.5px, -1.5px) rotate(-.5deg)}24%{transform:translate(-.5px, -1.5px) rotate(.5deg)}26%{transform:translate(-1.5px, 2.5px) rotate(-.5deg)}28%{transform:translate(2.5px, 1.5px) rotate(1.5deg)}30%{transform:translate(.5px, -.5px) rotate(1.5deg)}32%{transform:translate(1.5px, 2.5px) rotate(1.5deg)}34%{transform:translate(-1.5px, -1.5px) rotate(-.5deg)}36%{transform:translate(-.5px, .5px) rotate(-.5deg)}38%{transform:translate(1.5px, -1.5px) rotate(1.5deg)}40%{transform:translate(-.5px, .5px) rotate(1.5deg)}42%{transform:translate(2.5px, -.5px) rotate(1.5deg)}44%{transform:translate(-1.5px, 2.5px) rotate(.5deg)}46%{transform:translate(-.5px, 2.5px) rotate(-.5deg)}48%{transform:translate(1.5px, -.5px) rotate(1.5deg)}50%{transform:translate(1.5px, -.5px) rotate(1.5deg)}52%{transform:translate(.5px, .5px) rotate(-.5deg)}54%{transform:translate(-.5px, -1.5px) rotate(-.5deg)}56%{transform:translate(1.5px, -1.5px) rotate(1.5deg)}58%{transform:translate(.5px, 1.5px) rotate(1.5deg)}60%{transform:translate(-.5px, -.5px) rotate(1.5deg)}62%{transform:translate(-.5px, .5px) rotate(1.5deg)}64%{transform:translate(.5px, -.5px) rotate(1.5deg)}66%{transform:translate(2.5px, .5px) rotate(1.5deg)}68%{transform:translate(1.5px, -.5px) rotate(1.5deg)}70%{transform:translate(.5px, 2.5px) rotate(1.5deg)}72%{transform:translate(1.5px, -.5px) rotate(.5deg)}74%{transform:translate(2.5px, -.5px) rotate(.5deg)}76%{transform:translate(2.5px, -.5px) rotate(1.5deg)}78%{transform:translate(-1.5px, -.5px) rotate(-.5deg)}80%{transform:translate(-1.5px, .5px) rotate(-.5deg)}82%{transform:translate(-1.5px, 2.5px) rotate(.5deg)}84%{transform:translate(-.5px, .5px) rotate(1.5deg)}86%{transform:translate(-1.5px, 1.5px) rotate(.5deg)}88%{transform:translate(-.5px, -.5px) rotate(1.5deg)}90%{transform:translate(-1.5px, -1.5px) rotate(1.5deg)}92%{transform:translate(2.5px, 1.5px) rotate(.5deg)}94%{transform:translate(2.5px, 1.5px) rotate(-.5deg)}96%{transform:translate(2.5px, -.5px) rotate(.5deg)}98%{transform:translate(1.5px, .5px) rotate(-.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake:hover,.shake-trigger:hover .shake,.shake.shake-freeze,.shake.shake-constant{animation-name:shake;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-little{2%{transform:translate(1px, 0px) rotate(.5deg)}4%{transform:translate(0px, 1px) rotate(.5deg)}6%{transform:translate(1px, 1px) rotate(.5deg)}8%{transform:translate(0px, 0px) rotate(.5deg)}10%{transform:translate(1px, 1px) rotate(.5deg)}12%{transform:translate(0px, 1px) rotate(.5deg)}14%{transform:translate(1px, 1px) rotate(.5deg)}16%{transform:translate(1px, 0px) rotate(.5deg)}18%{transform:translate(0px, 0px) rotate(.5deg)}20%{transform:translate(1px, 1px) rotate(.5deg)}22%{transform:translate(0px, 0px) rotate(.5deg)}24%{transform:translate(1px, 1px) rotate(.5deg)}26%{transform:translate(1px, 0px) rotate(.5deg)}28%{transform:translate(0px, 0px) rotate(.5deg)}30%{transform:translate(0px, 0px) rotate(.5deg)}32%{transform:translate(0px, 1px) rotate(.5deg)}34%{transform:translate(0px, 0px) rotate(.5deg)}36%{transform:translate(1px, 1px) rotate(.5deg)}38%{transform:translate(1px, 1px) rotate(.5deg)}40%{transform:translate(0px, 0px) rotate(.5deg)}42%{transform:translate(0px, 0px) rotate(.5deg)}44%{transform:translate(1px, 1px) rotate(.5deg)}46%{transform:translate(0px, 0px) rotate(.5deg)}48%{transform:translate(1px, 1px) rotate(.5deg)}50%{transform:translate(1px, 0px) rotate(.5deg)}52%{transform:translate(1px, 1px) rotate(.5deg)}54%{transform:translate(0px, 1px) rotate(.5deg)}56%{transform:translate(0px, 0px) rotate(.5deg)}58%{transform:translate(1px, 0px) rotate(.5deg)}60%{transform:translate(0px, 1px) rotate(.5deg)}62%{transform:translate(0px, 0px) rotate(.5deg)}64%{transform:translate(0px, 0px) rotate(.5deg)}66%{transform:translate(1px, 1px) rotate(.5deg)}68%{transform:translate(1px, 0px) rotate(.5deg)}70%{transform:translate(1px, 0px) rotate(.5deg)}72%{transform:translate(1px, 1px) rotate(.5deg)}74%{transform:translate(0px, 0px) rotate(.5deg)}76%{transform:translate(0px, 1px) rotate(.5deg)}78%{transform:translate(0px, 1px) rotate(.5deg)}80%{transform:translate(0px, 1px) rotate(.5deg)}82%{transform:translate(0px, 0px) rotate(.5deg)}84%{transform:translate(0px, 0px) rotate(.5deg)}86%{transform:translate(0px, 0px) rotate(.5deg)}88%{transform:translate(1px, 1px) rotate(.5deg)}90%{transform:translate(1px, 1px) rotate(.5deg)}92%{transform:translate(1px, 1px) rotate(.5deg)}94%{transform:translate(0px, 0px) rotate(.5deg)}96%{transform:translate(0px, 0px) rotate(.5deg)}98%{transform:translate(0px, 1px) rotate(.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-little:hover,.shake-trigger:hover .shake-little,.shake-little.shake-freeze,.shake-little.shake-constant{animation-name:shake-little;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-slow{2%{transform:translate(4px, 5px) rotate(3.5deg)}4%{transform:translate(-4px, 6px) rotate(2.5deg)}6%{transform:translate(-7px, 8px) rotate(-2.5deg)}8%{transform:translate(-2px, 10px) rotate(-1.5deg)}10%{transform:translate(9px, 8px) rotate(.5deg)}12%{transform:translate(-5px, 0px) rotate(.5deg)}14%{transform:translate(-1px, -3px) rotate(-2.5deg)}16%{transform:translate(5px, 5px) rotate(-2.5deg)}18%{transform:translate(1px, -3px) rotate(1.5deg)}20%{transform:translate(-7px, -4px) rotate(-.5deg)}22%{transform:translate(1px, 8px) rotate(-2.5deg)}24%{transform:translate(6px, 7px) rotate(.5deg)}26%{transform:translate(-1px, 6px) rotate(2.5deg)}28%{transform:translate(10px, 1px) rotate(-.5deg)}30%{transform:translate(-1px, 6px) rotate(-.5deg)}32%{transform:translate(-6px, -6px) rotate(-.5deg)}34%{transform:translate(6px, -4px) rotate(-2.5deg)}36%{transform:translate(3px, -8px) rotate(-2.5deg)}38%{transform:translate(8px, 5px) rotate(3.5deg)}40%{transform:translate(-6px, -6px) rotate(1.5deg)}42%{transform:translate(2px, -4px) rotate(1.5deg)}44%{transform:translate(2px, 5px) rotate(2.5deg)}46%{transform:translate(-6px, -6px) rotate(1.5deg)}48%{transform:translate(0px, -5px) rotate(-1.5deg)}50%{transform:translate(-5px, -3px) rotate(1.5deg)}52%{transform:translate(9px, 8px) rotate(1.5deg)}54%{transform:translate(-2px, -1px) rotate(-2.5deg)}56%{transform:translate(-5px, -1px) rotate(-2.5deg)}58%{transform:translate(5px, -4px) rotate(1.5deg)}60%{transform:translate(5px, -1px) rotate(3.5deg)}62%{transform:translate(-1px, 2px) rotate(-1.5deg)}64%{transform:translate(10px, -1px) rotate(2.5deg)}66%{transform:translate(-6px, 10px) rotate(-2.5deg)}68%{transform:translate(-5px, 4px) rotate(.5deg)}70%{transform:translate(8px, 10px) rotate(2.5deg)}72%{transform:translate(-2px, 7px) rotate(3.5deg)}74%{transform:translate(2px, 0px) rotate(-1.5deg)}76%{transform:translate(5px, -5px) rotate(-.5deg)}78%{transform:translate(7px, 3px) rotate(2.5deg)}80%{transform:translate(3px, 10px) rotate(-.5deg)}82%{transform:translate(3px, 7px) rotate(.5deg)}84%{transform:translate(-9px, -6px) rotate(1.5deg)}86%{transform:translate(-3px, -8px) rotate(-1.5deg)}88%{transform:translate(2px, -5px) rotate(3.5deg)}90%{transform:translate(6px, -6px) rotate(1.5deg)}92%{transform:translate(-7px, 3px) rotate(1.5deg)}94%{transform:translate(-8px, -5px) rotate(-1.5deg)}96%{transform:translate(6px, -3px) rotate(.5deg)}98%{transform:translate(1px, -5px) rotate(-1.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-slow:hover,.shake-trigger:hover .shake-slow,.shake-slow.shake-freeze,.shake-slow.shake-constant{animation-name:shake-slow;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-hard{2%{transform:translate(-7px, 5px) rotate(1.5deg)}4%{transform:translate(5px, -8px) rotate(1.5deg)}6%{transform:translate(-2px, 8px) rotate(1.5deg)}8%{transform:translate(-7px, 1px) rotate(-2.5deg)}10%{transform:translate(-2px, 8px) rotate(3.5deg)}12%{transform:translate(-3px, -8px) rotate(-1.5deg)}14%{transform:translate(-8px, -7px) rotate(2.5deg)}16%{transform:translate(0px, 1px) rotate(.5deg)}18%{transform:translate(-2px, -1px) rotate(-1.5deg)}20%{transform:translate(7px, 0px) rotate(-2.5deg)}22%{transform:translate(8px, -6px) rotate(-1.5deg)}24%{transform:translate(1px, -4px) rotate(-.5deg)}26%{transform:translate(-2px, 9px) rotate(3.5deg)}28%{transform:translate(1px, -5px) rotate(-1.5deg)}30%{transform:translate(-2px, 7px) rotate(.5deg)}32%{transform:translate(9px, 3px) rotate(3.5deg)}34%{transform:translate(2px, 5px) rotate(3.5deg)}36%{transform:translate(7px, -3px) rotate(-1.5deg)}38%{transform:translate(0px, -1px) rotate(3.5deg)}40%{transform:translate(10px, 0px) rotate(-2.5deg)}42%{transform:translate(9px, 10px) rotate(2.5deg)}44%{transform:translate(-3px, 9px) rotate(3.5deg)}46%{transform:translate(9px, -9px) rotate(3.5deg)}48%{transform:translate(2px, -4px) rotate(-1.5deg)}50%{transform:translate(5px, 10px) rotate(-1.5deg)}52%{transform:translate(-4px, -8px) rotate(-2.5deg)}54%{transform:translate(10px, -4px) rotate(1.5deg)}56%{transform:translate(4px, -6px) rotate(-1.5deg)}58%{transform:translate(2px, 2px) rotate(-1.5deg)}60%{transform:translate(-8px, 10px) rotate(-.5deg)}62%{transform:translate(-2px, 1px) rotate(3.5deg)}64%{transform:translate(9px, -4px) rotate(-.5deg)}66%{transform:translate(-3px, -3px) rotate(.5deg)}68%{transform:translate(4px, 7px) rotate(1.5deg)}70%{transform:translate(9px, 2px) rotate(2.5deg)}72%{transform:translate(-1px, -2px) rotate(1.5deg)}74%{transform:translate(-7px, 5px) rotate(.5deg)}76%{transform:translate(-6px, 4px) rotate(-2.5deg)}78%{transform:translate(-9px, 1px) rotate(.5deg)}80%{transform:translate(9px, 10px) rotate(2.5deg)}82%{transform:translate(-9px, -5px) rotate(2.5deg)}84%{transform:translate(9px, -9px) rotate(.5deg)}86%{transform:translate(2px, 2px) rotate(.5deg)}88%{transform:translate(7px, -1px) rotate(2.5deg)}90%{transform:translate(-1px, 8px) rotate(-1.5deg)}92%{transform:translate(1px, 0px) rotate(.5deg)}94%{transform:translate(1px, -6px) rotate(3.5deg)}96%{transform:translate(-3px, 1px) rotate(3.5deg)}98%{transform:translate(9px, -9px) rotate(-2.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-hard:hover,.shake-trigger:hover .shake-hard,.shake-hard.shake-freeze,.shake-hard.shake-constant{animation-name:shake-hard;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-horizontal{2%{transform:translate(-5px, 0) rotate(0)}4%{transform:translate(-4px, 0) rotate(0)}6%{transform:translate(0px, 0) rotate(0)}8%{transform:translate(8px, 0) rotate(0)}10%{transform:translate(-5px, 0) rotate(0)}12%{transform:translate(-1px, 0) rotate(0)}14%{transform:translate(10px, 0) rotate(0)}16%{transform:translate(5px, 0) rotate(0)}18%{transform:translate(3px, 0) rotate(0)}20%{transform:translate(4px, 0) rotate(0)}22%{transform:translate(7px, 0) rotate(0)}24%{transform:translate(10px, 0) rotate(0)}26%{transform:translate(0px, 0) rotate(0)}28%{transform:translate(9px, 0) rotate(0)}30%{transform:translate(-5px, 0) rotate(0)}32%{transform:translate(-5px, 0) rotate(0)}34%{transform:translate(-4px, 0) rotate(0)}36%{transform:translate(7px, 0) rotate(0)}38%{transform:translate(5px, 0) rotate(0)}40%{transform:translate(8px, 0) rotate(0)}42%{transform:translate(8px, 0) rotate(0)}44%{transform:translate(1px, 0) rotate(0)}46%{transform:translate(5px, 0) rotate(0)}48%{transform:translate(-6px, 0) rotate(0)}50%{transform:translate(9px, 0) rotate(0)}52%{transform:translate(10px, 0) rotate(0)}54%{transform:translate(-1px, 0) rotate(0)}56%{transform:translate(10px, 0) rotate(0)}58%{transform:translate(5px, 0) rotate(0)}60%{transform:translate(-7px, 0) rotate(0)}62%{transform:translate(-8px, 0) rotate(0)}64%{transform:translate(-7px, 0) rotate(0)}66%{transform:translate(1px, 0) rotate(0)}68%{transform:translate(10px, 0) rotate(0)}70%{transform:translate(3px, 0) rotate(0)}72%{transform:translate(6px, 0) rotate(0)}74%{transform:translate(-7px, 0) rotate(0)}76%{transform:translate(8px, 0) rotate(0)}78%{transform:translate(8px, 0) rotate(0)}80%{transform:translate(-9px, 0) rotate(0)}82%{transform:translate(7px, 0) rotate(0)}84%{transform:translate(-6px, 0) rotate(0)}86%{transform:translate(8px, 0) rotate(0)}88%{transform:translate(-2px, 0) rotate(0)}90%{transform:translate(2px, 0) rotate(0)}92%{transform:translate(-4px, 0) rotate(0)}94%{transform:translate(9px, 0) rotate(0)}96%{transform:translate(8px, 0) rotate(0)}98%{transform:translate(9px, 0) rotate(0)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-horizontal:hover,.shake-trigger:hover .shake-horizontal,.shake-horizontal.shake-freeze,.shake-horizontal.shake-constant{animation-name:shake-horizontal;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-vertical{2%{transform:translate(0, 6px) rotate(0)}4%{transform:translate(0, -8px) rotate(0)}6%{transform:translate(0, 0px) rotate(0)}8%{transform:translate(0, 6px) rotate(0)}10%{transform:translate(0, 0px) rotate(0)}12%{transform:translate(0, -9px) rotate(0)}14%{transform:translate(0, -6px) rotate(0)}16%{transform:translate(0, 9px) rotate(0)}18%{transform:translate(0, 10px) rotate(0)}20%{transform:translate(0, -9px) rotate(0)}22%{transform:translate(0, -4px) rotate(0)}24%{transform:translate(0, -5px) rotate(0)}26%{transform:translate(0, 2px) rotate(0)}28%{transform:translate(0, -3px) rotate(0)}30%{transform:translate(0, -4px) rotate(0)}32%{transform:translate(0, -8px) rotate(0)}34%{transform:translate(0, -1px) rotate(0)}36%{transform:translate(0, -8px) rotate(0)}38%{transform:translate(0, -6px) rotate(0)}40%{transform:translate(0, 4px) rotate(0)}42%{transform:translate(0, 1px) rotate(0)}44%{transform:translate(0, -8px) rotate(0)}46%{transform:translate(0, 7px) rotate(0)}48%{transform:translate(0, -7px) rotate(0)}50%{transform:translate(0, 4px) rotate(0)}52%{transform:translate(0, 5px) rotate(0)}54%{transform:translate(0, 8px) rotate(0)}56%{transform:translate(0, -6px) rotate(0)}58%{transform:translate(0, 2px) rotate(0)}60%{transform:translate(0, 5px) rotate(0)}62%{transform:translate(0, -2px) rotate(0)}64%{transform:translate(0, 1px) rotate(0)}66%{transform:translate(0, -8px) rotate(0)}68%{transform:translate(0, -5px) rotate(0)}70%{transform:translate(0, 7px) rotate(0)}72%{transform:translate(0, -2px) rotate(0)}74%{transform:translate(0, -7px) rotate(0)}76%{transform:translate(0, -9px) rotate(0)}78%{transform:translate(0, 2px) rotate(0)}80%{transform:translate(0, 0px) rotate(0)}82%{transform:translate(0, 3px) rotate(0)}84%{transform:translate(0, 7px) rotate(0)}86%{transform:translate(0, 10px) rotate(0)}88%{transform:translate(0, 6px) rotate(0)}90%{transform:translate(0, 10px) rotate(0)}92%{transform:translate(0, -1px) rotate(0)}94%{transform:translate(0, 7px) rotate(0)}96%{transform:translate(0, 6px) rotate(0)}98%{transform:translate(0, -6px) rotate(0)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-vertical:hover,.shake-trigger:hover .shake-vertical,.shake-vertical.shake-freeze,.shake-vertical.shake-constant{animation-name:shake-vertical;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-rotate{2%{transform:translate(0, 0) rotate(5.5deg)}4%{transform:translate(0, 0) rotate(.5deg)}6%{transform:translate(0, 0) rotate(4.5deg)}8%{transform:translate(0, 0) rotate(1.5deg)}10%{transform:translate(0, 0) rotate(4.5deg)}12%{transform:translate(0, 0) rotate(4.5deg)}14%{transform:translate(0, 0) rotate(-6.5deg)}16%{transform:translate(0, 0) rotate(6.5deg)}18%{transform:translate(0, 0) rotate(-5.5deg)}20%{transform:translate(0, 0) rotate(-5.5deg)}22%{transform:translate(0, 0) rotate(-3.5deg)}24%{transform:translate(0, 0) rotate(-5.5deg)}26%{transform:translate(0, 0) rotate(-6.5deg)}28%{transform:translate(0, 0) rotate(-3.5deg)}30%{transform:translate(0, 0) rotate(1.5deg)}32%{transform:translate(0, 0) rotate(-1.5deg)}34%{transform:translate(0, 0) rotate(-4.5deg)}36%{transform:translate(0, 0) rotate(6.5deg)}38%{transform:translate(0, 0) rotate(2.5deg)}40%{transform:translate(0, 0) rotate(6.5deg)}42%{transform:translate(0, 0) rotate(3.5deg)}44%{transform:translate(0, 0) rotate(-1.5deg)}46%{transform:translate(0, 0) rotate(.5deg)}48%{transform:translate(0, 0) rotate(1.5deg)}50%{transform:translate(0, 0) rotate(-6.5deg)}52%{transform:translate(0, 0) rotate(-6.5deg)}54%{transform:translate(0, 0) rotate(-5.5deg)}56%{transform:translate(0, 0) rotate(2.5deg)}58%{transform:translate(0, 0) rotate(4.5deg)}60%{transform:translate(0, 0) rotate(7.5deg)}62%{transform:translate(0, 0) rotate(-1.5deg)}64%{transform:translate(0, 0) rotate(7.5deg)}66%{transform:translate(0, 0) rotate(7.5deg)}68%{transform:translate(0, 0) rotate(-3.5deg)}70%{transform:translate(0, 0) rotate(2.5deg)}72%{transform:translate(0, 0) rotate(2.5deg)}74%{transform:translate(0, 0) rotate(-4.5deg)}76%{transform:translate(0, 0) rotate(-1.5deg)}78%{transform:translate(0, 0) rotate(-4.5deg)}80%{transform:translate(0, 0) rotate(5.5deg)}82%{transform:translate(0, 0) rotate(-4.5deg)}84%{transform:translate(0, 0) rotate(-2.5deg)}86%{transform:translate(0, 0) rotate(2.5deg)}88%{transform:translate(0, 0) rotate(3.5deg)}90%{transform:translate(0, 0) rotate(-1.5deg)}92%{transform:translate(0, 0) rotate(6.5deg)}94%{transform:translate(0, 0) rotate(-1.5deg)}96%{transform:translate(0, 0) rotate(3.5deg)}98%{transform:translate(0, 0) rotate(.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-rotate:hover,.shake-trigger:hover .shake-rotate,.shake-rotate.shake-freeze,.shake-rotate.shake-constant{animation-name:shake-rotate;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-opacity{10%{transform:translate(-2px, 2px) rotate(.5deg);opacity:.42}20%{transform:translate(-4px, 1px) rotate(2.5deg);opacity:.11}30%{transform:translate(0px, 5px) rotate(1.5deg);opacity:.81}40%{transform:translate(2px, 3px) rotate(1.5deg);opacity:.72}50%{transform:translate(3px, 5px) rotate(2.5deg);opacity:.2}60%{transform:translate(1px, 0px) rotate(1.5deg);opacity:.75}70%{transform:translate(-2px, -3px) rotate(.5deg);opacity:.61}80%{transform:translate(-3px, 5px) rotate(2.5deg);opacity:.84}90%{transform:translate(-4px, 1px) rotate(-1.5deg);opacity:.05}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-opacity:hover,.shake-trigger:hover .shake-opacity,.shake-opacity.shake-freeze,.shake-opacity.shake-constant{animation-name:shake-opacity;animation-duration:.5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-crazy{10%{transform:translate(-11px, -14px) rotate(9deg);opacity:.91}20%{transform:translate(-5px, -18px) rotate(-5deg);opacity:.37}30%{transform:translate(1px, -11px) rotate(2deg);opacity:.31}40%{transform:translate(20px, 10px) rotate(4deg);opacity:.64}50%{transform:translate(-18px, 0px) rotate(1deg);opacity:.5}60%{transform:translate(20px, -2px) rotate(3deg);opacity:.86}70%{transform:translate(-1px, -18px) rotate(0deg);opacity:.65}80%{transform:translate(18px, 5px) rotate(8deg);opacity:.1}90%{transform:translate(11px, -18px) rotate(-5deg);opacity:.35}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-crazy:hover,.shake-trigger:hover .shake-crazy,.shake-crazy.shake-freeze,.shake-crazy.shake-constant{animation-name:shake-crazy;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-chunk{2%{transform:translate(12px, 5px) rotate(-13deg)}4%{transform:translate(3px, 14px) rotate(-7deg)}6%{transform:translate(4px, 0px) rotate(11deg)}8%{transform:translate(-2px, 8px) rotate(-12deg)}10%{transform:translate(11px, 8px) rotate(-13deg)}12%{transform:translate(-12px, -2px) rotate(15deg)}14%{transform:translate(9px, -9px) rotate(-13deg)}16%{transform:translate(-10px, 7px) rotate(3deg)}18%{transform:translate(15px, 0px) rotate(2deg)}20%{transform:translate(2px, -13px) rotate(10deg)}22%{transform:translate(-8px, -13px) rotate(1deg)}24%{transform:translate(6px, 7px) rotate(-12deg)}26%{transform:translate(7px, -3px) rotate(4deg)}28%{transform:translate(-13px, 9px) rotate(0deg)}30%{transform:translate(-9px, -9px) rotate(13deg)}32%{transform:translate(1px, 11px) rotate(3deg)}34%{transform:translate(13px, -13px) rotate(6deg)}36%{transform:translate(-13px, 8px) rotate(0deg)}38%{transform:translate(1px, -1px) rotate(12deg)}0%,40%,100%{transform:translate(0, 0) rotate(0)}}.shake-chunk:hover,.shake-trigger:hover .shake-chunk,.shake-chunk.shake-freeze,.shake-chunk.shake-constant{animation-name:shake-chunk;animation-duration:4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}


html {
	box-sizing: border-box;
  }
  *, *:before, *:after {
	box-sizing: inherit;
  }
img {
	max-width:100%;
}
#game_canvas {
	width:calc(2 * 100vh);
	max-width:100vw;
	height:auto;
	position: relative;
	top: 50vh;
	transform: translateY(-50%) translateX(-50%);
    left: 50vw;
}

body {
	--gray:#323a45;
	--blue:#00afd1;
	--turq:#1fbba6;
	--orange:#f27935;
	--red:#d64541;
	font-family:arial,helvetica,sans-serif;
	margin:0;
	padding:0;
} 

.message_modal {
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    width: 100vw;
    height: 100vh;
	position: absolute;
	transition:all 0.3s ease;
	transform:scale(0);
}
.message_modal.active {
	transform:scale(1);
}
.message_modal_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.message_modal_flex {
    display: flex;
    /* height: 30vh; */
	
	width:70vh;
    background: rgba(255,255,255,0.9);
    padding: 2em;
    border-radius: 2em;
}
.message_modal_flex p {
    color: white;
    background: #2f3b46;
    border-radius: 1em;
	padding: 1em 2em;
	width:80%;
}

.message_modal_image_wrap {
    width: 20%;
    display: flex;
    margin-right: -1vh;
    z-index: 9999;
    position: relative;
    text-align: right;
    align-items: center;
}
.message_modal_image {
    border: 1vh solid #2f3b46;
    border-radius: 100%;
    overflow: hidden;
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 10vh;
	height: 10vh;
	background-image: url(/templates/match/images/icons/gold_washer.png);
    background-size: 140%;
}

#hero_preamble {
	position:absolute;
	width:100vh;
	height:40vh;
	bottom:25vh;
	left:5vw;
	padding:2em;
	z-index:999;
	display:none;
	background:url(../images/talkbubble.png);
	font-family: 'Bangers', sans-serif;
	font-size:190%;
	background-size:100% 100%;
	transition:all 0.3s ease;
	padding-left:4em;
}

.bgcircle {
	background:url(../images/phone-circle.png);
	background-repeat:no-repeat;
	background-size:contain;
}
#bossimage {
	width: 15vh;
	position:absolute;
	/* left: 50%;
	top:50%;
	transform: translateX(-50%) translateY(-50%); */
	left:20%;
	top:10%;
	animation-name: shake-slow;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

#intercom {
	display:none;
	z-index:999;
}
#intercom.active {
	display:block;
	position:absolute;
	right:2em;
	bottom:5em;
	width:25vh;
	height:25vh;
}
#intercom h3 {
	color:white;
	position: absolute;
    margin-top: -7em;
    /* width: 200%; */
	text-align: center;
	background:rgba(0,0,0,0.8);
	padding:1em;
	font-size:3vh;
}

#trigger_loss {
	z-index:99999;
	top: 5em;
    position: relative;
}
#trigger_won {
	z-index:99999;
	top:5em;
	left:5em;
	position:relative;
}
#telephone.active {
	display:block;
	position:absolute;
	right:2em;
	bottom:5em;
	width:25vh;
	height:25vh;
}
#telephone {
	display:none;
	position:absolute;
	z-index:9999;
}
#telephone img {
	margin-top:2em;
	animation-name: shake-slow;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.center {
	position:absolute;
	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
}
#winanim.active {
	display:block;
}
#winanim {
	display:none;
	width:80vh;
	height:80vh;
	z-index:999;	
}
#winanim img {
	width:100%;
	width:75%;
	display: block;
	margin: 0 auto;
}

#winanim h2 {
    color: white;
    text-align: center;
    font-family: 'Bangers', sans-serif;
    font-size: 5em;
    margin-bottom: 0;
}

.trigger {
	display:none;
}

.maytaghomedefendersplash {
	background-image:url(../images/homedefender-splash.jpg);
	background-size:cover;
	z-index:999;
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	background-position:center;
}
.maytaghomedefendersplash:hover, .splash:hover {
	cursor:pointer;
}

#lose_animation_container {
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	/*background:url(../images/water_bg.png);*/
	background-size:cover;
	background-repeat:no-repeat;
	height:0;
	width:0;
	opacity:0;
	
	transition:opacity 1s ease;
}
body.lost #lose_animation_container {
	animation: animatedBackground 30s linear 1;
	animation-fill-mode: forwards;
	height:100vh;
	width:100vw;
	opacity:1; 
}
body.lost #canvas_wrapper {
	opacity:0;
}



#foam {
	/*background-image:url(../images/bath.png);*/
	height: 100vh;
    width: 100vw;
    position: absolute;
    background-size: contain;
    bottom: 0;
    left: 0;
	background-repeat: no-repeat;
	background-position:bottom;
}
body.lost #foam {
	animation:animatedFoam 30s linear 1;
	animation-fill-mode:forwards;
}

@keyframes animatedBackground {
    0% { background-position: 0 0; }
	100% { background-position: 0 100vh; }
}
@keyframes animatedFoam {
    
	0% { bottom: 0; }
    100% { bottom:-40vh; }
}

@media screen and (orientation:portrait) {
	#portrait {
		display:block;
		position:absolute;
		width:100vw;
		height:100vh;
		background:var(--red);
		z-index:999;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	#portrait h1 {
		color:white;
		padding:2em;

	}
}
@media screen and (orientation:landscape) {
    #portrait {
		display:none;
	}
}

#canvas_wrapper {
	border:1px solid red;
	background:rgba(0,0,0,0.1);
}
#canvas {
	/*background:rgba(0,0,0,0.5);*/
	width:100vw;
	height:85vh;
	position:absolute;
	margin-left:auto;
	margin-right:auto;
	left:0;
	right:0;
	top:15vh; 
	transition:opacity 0.5s ease;
}


#game_main {
	position:relative;
	height:100vh;
	width:100%;
	transition:opacity 0.5s ease;
}
.question_active #game_main {
	opacity:1;
}
#ship {
	width:412px;
	height:445px;
	position:absolute;
	bottom:50px;
	left:500px;
}
.wrapped {
	margin:0;
	position:relative;
	padding-top:0;
}
.fullscreen {
	/* background:url(../images/mixbackground.jpg); */
	background-size:cover;
	background-position:center bottom;
	width:100vw;
	height:100vh;
	overflow:hidden;
	transition:opacity 1s ease;
	background-color:black;
}
body.splash .fullscreen {
	opacity:0;
}
body .splash {
	transform:scale(0);
	opacity:0;
	transition:all 1s ease;
	width:0vw;
	height:0vh;
}
body.splash .splash {
	transform:scale(1);
	opacity:1;
	width:100vw;
	height:100vh;
	position:absolute;
	background-image:url(../images/splash.jpg);
	background-position:center;
	background-size:cover;
}
#game_navbar {
	height: 12vh;
    position: absolute;
    background-image: url(../images/header.png);
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 16vh;
    width: 100%;
    z-index: 2;
}
#game_logo {
	display:block;
	position: absolute;
	left: 22vw;
	width:27vh;
	max-width:20vw;
}

#shuffle_trigger {
	position:absolute;
	bottom:1em;
	left:1em;
}
#modal_trigger {
	position:absolute;
	bottom:1em;
	left:7em;
}

.question {
	
	position:absolute;
	left:35vh;
	top:13vh;
	width:80vw;
	max-width:50em;
	min-width:540px;
	
	color:#555;
	overflow:hidden;
	font-size:3vh;
	z-index:9;
	/*height: 60vh;*/
	width:120vh;
	transform:scale(0);
	background:url(../images/talkbubble2.png); 
	transition:all 0.3s ease;
	background-size:100% 100%;
	background-repeat:no-repeat;
	padding-bottom:8em;
	padding-right:2em;
}
body.question_active .question {
	max-height:100vh;
	transform:scale(1);
}
.question_wrap {
	padding:1.5em 1.5em 1.5em .5em;
	position:relative;
}
.question h2 {
	

	color:#000;
	margin:1.5em 0 0 1em;
	padding:0.5em 1em;
	font-family: 'Bangers', sans-serif;
}

h2.choosehero {
	
	background:none!important;
	color:#000!important;
	margin:1em 0 0 1em;
	padding:0.5em 0em!important;
	font-family: 'Bangers', sans-serif;
	text-shadow: 2px 2px 1px #55a1d6!important;
}
.question p {
	padding:0;
	margin:0 2em 0 2em;
	line-height:1.6em;
}
.question ul {
	margin:1em 4em 1em 2em;
	padding:0;
	margin-top:1em;
	list-style:none;
}
.question ul li {
	margin-top:1em;
}

.question_text img {
	float:right;
	margin:0em 3em 1em -.5em;
	width:15%;
	height:15%;
}
.question .gotit {
	display:block;
	margin-top:1em;
	width:100%;
	border:3px solid black;
	text-transform:uppercase;
	font-size:150%;
	font-weight:bold;
	padding:0.5em;
	background:rgba(0,0,0,0.0);
	transition: 0.3s ease;
	
}
.question .gotit:hover {
	background:rgba(0,0,0,0.1);
	cursor:pointer;
}

#howtoplay ,  .modal {
	border-radius:20px; 
	border:1px solid #aaa;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
	top:17vh;
	width:45vw;
	max-width:35em;
	min-width:10em;
	background:rgba(255,255,255,0.9);
	color:#555;
	overflow:hidden;
	font-size:3vh;
	z-index:9;
	max-height:0vh;
	transform:scale(0);
	transition:all 0.3s ease;
	z-index:99;
}
#howtoplay .howtoplay_wrap, .modal .wrap {
	padding:1em;
}
#howtoplay.active,  .modal.active {
	height:auto;
	max-height:100vh;
	transform:scale(1);
}
#howtoplay h2, .modal h2 {
	background:#3b3b3b;
	color:white;
	text-shadow: 2px 2px 1px #000000;
	margin:0;
	padding:0.5em 1em;
	font-family: 'Bangers', sans-serif;
	
}

#howtoplay p {
	font-size:2vh;
	
}

.retromodal {
	z-index:999999;
	position:absolute;
	opacity:0;
	transition:all 0.3s ease;
	transform:scale(0);
	width:100vw;
	height:100vh;
}
.retromodal .wrap {
	padding:1em;
}

p#hero_preamble_text {
    font-size: 5vh;
    text-align: center;
    padding-right: 10%;
    padding-top: 5%;
}

@media screen and (max-width:1024px) {
	p#hero_preamble_text {
		padding-right: 11%;
		padding-top: 0%;
		margin: 0vh 4vh 0vh auto;
	}
}

@media screen and (max-width:812px) and (max-height: 375px) {
	p#hero_preamble_text {
		padding-right: 11%;
		padding-top: 0%;
		margin: -3vh 6vh 0vh auto;
	}
}

.dismiss_instructions {
	float:left;
	position:relative;
	padding-right:15vh !important;
	max-width:50%;
}
.dismiss_instructions img {
	position:absolute;
	display: block;
    width: 10vh;
    top: -1vh;
    right: 0;
}
.retromodal h2 {
	/*font-family:'VT323',monospace;*/
	font-size:25vh;
	font-size:18vh;
	color:#fff;
	text-shadow:0 0 5px rgba(0,0,0,0.5);
	font-weight:normal;
	font-weight:700;
	text-transform:uppercase;
	text-align:center;
	margin-top:1.2em;
	margin-top:1.7em;
	margin-bottom:0;
	letter-spacing: -0.02em;
	letter-spacing:-0.04em;
}
.retromodal.active {
	transform:scale(1);
	opacity:1;
}
.retromodal button {
	font-family: 'VT323',monospace;
    text-transform: uppercase;
    background: #383;
    color: #8d8;
    border: none;
    padding: 0.6em;
    font-size: 5vh;
    display: block;
	margin: 0 auto;
	border:0.5vh solid white;
	opacity:0.7;
}
.retromodal button:hover {
	cursor:pointer;
	opacity:1;
}


.mobile_instructions {
	display:none;
}
p.mobile_instructions {
	font-size:2vh !important;
}
body.touch .desktop_instructions {
	display:none;
}
body.touch .mobile_instructions {
	display:block;
}
#howtoplay button,  .modal button {
    display: block;
	box-shadow: 0 0 0px rgba(0,0,0,0.2);
	text-align:center;
	text-transform:uppercase;
	display:block;
	margin:0 auto;
	font-size:120%;
	color:white;
	text-shadow: 2px 2px 1px #000000;
	margin:1em auto .5em auto;
	padding:0.5em 2em;
	font-family: 'Bangers', sans-serif;
	background-image: url(../images/header2.png);
    background-repeat: repeat-x;
    background-position: top left;
	border-color: #3b3b3b;
	border-radius:2vh;
	max-width: 49%;
}

#howtoplay button:hover {
	cursor:pointer;
	background-image: url(../images/header3.png);
    background-repeat: repeat-x;
    background-position: top left;
	transition:all 0.2s ease-in!important;
}

/* Ipad Pro fix for the button text */
/* biome-ignore lint: not solving now */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
	#howtoplay button {
		padding: 0.5em 1em;
		font-size: 100%;
	}
	.dismiss_instructions img{
		width: 8vh;
	}
}

/* Screen sizes smaller than ipad pro fixes for the buttons */
@media screen and (max-width:1024px) {
	#howtoplay button {
		padding: 0.5em 0.1em;
		font-size: 100%;
	}
	.dismiss_instructions img{
		width: 8vh;
	}
}

.male {
	float: left;
}

.female {
	float: right;
}

.touch_control {
	position:absolute;
	border:1vh solid white;
	transition:all 0.3s ease;
	opacity:0.07;
	display:none;
}
#status {
	color:white;
	text-shadow: 2px 2px 1px #000000;
	font-family: 'Bangers', sans-serif;
	position:absolute;
	top:0; 
	left:2vh;
}
#status p {
	font-size:5vh;
	color:#fff;
	margin:0;
	padding:1vh;
}
#status #score, #status #lives {
	color:white;
}
#status #supershots {
	color:blue;
}
canvas {
	/* fix clicking issues on launch rocket */
	cursor:pointer;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	margin:0 auto;
} 
.touch_control:hover {
	cursor:pointer; /* make click events work on ios */
}
.answers li {
	cursor:pointer; /* make click events work on ios */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body.touch .touch_control {
	display:block;
}
.touch_control.circle {
	border-radius:50%;
}
.touch_control span {
	display:block;
	height:20vh;
	width:20vh;
	background:#000;
	color:white;
	font-size:18vh;
	font-weight:bold;
	text-shadow:0 0.05em 1px rgba(0,0,0,0.5);
	text-align:center;
	transition:all 0.3s ease;
}
.touch_control.circle span {
	border-radius:50%;
}

#touch_left {
	left:2em;
	top:40vh;
}
#touch_right {
	right:2em;
	top:40vh;
}
#touch_fire {
	left:48vw;
	bottom:8vh;
}

#get_question {
	position:absolute;
	bottom:10vh;
	right:10vh;
	height:10vh;
	width:10vh;
	border:0.5vh solid white;
	border-radius:50%;
	transition:all 0.3s ease;
}
#get_question span {
	display:block;
	width:8.5vh;
	height:8.5vh;
	background:var(--red);
	border-radius:50%;
	position:relative;
	left:0.25vh;
	top:0.25vh;
	color:white;
	font-size:8vh;
	font-weight:bold;
	text-shadow:0 0.05em 1px rgba(0,0,0,0.5);
	text-align:center;
	transition:all 0.3s ease;
}
#get_question:hover {
	cursor:pointer;
	filter:opacity(0.8);
}
#get_question:hover span {
	transform:scale(1.2);
}
body.question_active #get_question {
	transform:scale(0);
}
body.question_active .touch_control {
	transform:scale(0);
}
body.noammo #get_question {
	animation: waggle 1s 1s forwards ease-out;
	animation-iteration-count: infinite;
}
body.noammo.question_active #get_question {
	animation:waggle 4s 1s forwards ease-out;
	animation-iteration-count: infinite;
	opacity:0.5;
}
body.noammo #get_question span {
	background:#f00;
}
@keyframes waggle {
	0% {
	  transform: none;
	}
	50% {
	  transform: rotateZ(-20deg) scale(1.4);
	}
	60% {
	  transform: rotateZ(25deg) scale(1.1);
	}
	67.5% {
	  transform: rotateZ(-25deg) scale(1.4);
	}
	75% {
	  transform: rotateZ(25deg) scale(1.1);
	}
	82.5% {
	  transform: rotateZ(-12deg) scale(1.2);
	}
	85% {
	  transform: rotateZ(0) scale(1.2);
	}
	100% {
	  transform: rotateZ(0) scale(1);
	}
  }
body.question_active canvas {
	filter:blur(5px);
}
canvas:focus { outline: none; }
.possible_answer label {
	transition:color 0.3s ease;
	margin-left:1em;
}
.possible_answer label:hover {
	cursor:pointer;
	color:black;
}
.possible_answer input[type=radio] {
	border:0px;
	width:1.5em;
	height:1.5em;
}

.answers li {
	display:block;
}
span.multiple_answer.answer_option {
    background: rgba(0,0,0,0.1);
    padding: 0.5em;
    margin-bottom: 0.5em;
    display: block;
	border-radius: 0.5em;
	box-shadow:0 0 0px rgba(0,0,0,0.2);
	transition:all 0.2s ease;
}
span.multiple_answer.answer_option:hover {
	box-shadow:0 0.2em 0.2em rgba(0,0,0,0.2);
	transform:translateY(-0.1em);
}

.blink {
	font-family:'VT323',monospace;
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
	top:36vh;
	font-size:10vh;
	text-align:center;
	animation:1s ease-in 0s 1 zoomfade;
	opacity:0;
	transform:scale(0);
}

.blink.score {
	color:green;
	font-size:5vh;
}
.blink.bonus.poor {
	color:orange;
	font-size:7vh;	
}
.blink.bonus {
	color:blue;
	font-size:15vh;
	animation-duration:1.5s;
}
.blink.warning {
	color:red;
	font-size:20vh;
	animation-duration:1.5s;
}
@keyframes zoomfade {
	0% { 
	  transform: scale(1);
	  opacity:1;
	}
	50% {
		transform:scale(1.5);
		opacity:0.5;
	}
	100% {
	  transform: scale(25) rotateZ(110deg);
	  opacity:0;
	}
}
.answers p {
	font-style: italic;
	border-top: 1px solid #ddd;
	padding-top: 1em;
	margin-top: 2em;
	line-height:1em;
	color:#888;
}

@media screen and (min-width:1000px) {
	.question {
		font-size:2vh;
	}
}

#win_animation_container {
	height:0;
	width:0;
	overflow:hidden;
	position:absolute;
	opacity:0;
	transition:opacity 1s ease;
}
body.wonround #win_animation_container {
	height:100vh;
	width:100vw;
	top:0;
	left:0;
	opacity:1;
	z-index:9;
}

#bubbles {
	width:100vw;
	height:100vh;
}
.navlist {
	float:right;
	height:7vh;
}
.navlist img {
	max-height:7vh;
	padding:1vh;
}

.navlist a {
		color:white;
	text-shadow: 2px 2px 1px #000000;
	font-family: 'Bangers', sans-serif;
	position:absolute;
	top: .8vh;
    right: 45vh;
    font-size: 4.2vh;

	margin:0;
	padding:1vh;
	text-decoration:none;
}

.navlist a:hover {
		text-shadow: 4px 4px 6px #000000!important;
	opacity:1;
	background:rgba(255,255,255,0);
}
.navbutton {
	background: none;
    border: none;
    color: white;
    font-size: 3vh;
    line-height: 1em;
    text-transform: uppercase;
    border: 1px solid white;
	margin-top: 1vh;
	margin-left:1vh;
    float: right;
    margin-right: 1vh;
	padding: 1vh;
	z-index:999;
	transition:all 0.3s ease;
}
.navbutton:hover {
	background:rgba(255,255,255,0.2);
	cursor:pointer;
}

.form-group {
	margin-bottom:1em;
	text-align:center;
}
.form-group label {
	width:6em;
	display:inline-block;
}
.form-group input {
	border:none;
	background:white;
	border-bottom:2px solid #aaa;
	font-size:3vh;
}

body #logout {
	display:none;
}
body #login {
	display:block;
	color:white;
	text-shadow: 2px 2px 1px #000000;
	font-family: 'Bangers', sans-serif;
	width:15vh;
	background-size:contain;
    border: none!important;
    color: transparant;
    font-size: 4vh;
    line-height: 1em;
    text-transform: uppercase;
    border: 0px solid white;
    margin-top: 1vh;
    margin-left: 1vh;
    margin-right: 1vh;
    padding: 1vh;
}

body #login:hover {
	
	text-shadow: 3px 3px 6px #000000!important;
	opacity:1;
	background:rgba(255,255,255,0);
	
}
body #logout {
	/*background-image:url(../images/logout.png);*/
	background-position:center;
	background-repeat:no-repeat;
	text-indent:-9999px;
	width:15vh;
	background-size:contain;
    border: none!important;
    color: transparant;
    font-size: 3vh;
    line-height: 1em;
    text-transform: uppercase;
    border: 0px solid white;
    margin-top: 1vh;
    margin-left: 1vh;
    margin-right: 1vh;
    padding: 1vh;
}

body #restart {
	display:block;
	background-image:url(../images/restart-btn.png);
	background-position:top left;
	background-repeat:no-repeat;
	text-indent:-9999px;
	width:30vh;
	background-size:180%;
    border: none!important;
    color: transparant;
    font-size: 3vh;
    line-height: 4em;
    text-transform: uppercase;
    border: 0px solid white;
    margin-top: 0vh;
    margin-left: 1vh;
    margin-right: -3.1vh;
    padding: 0vh;
	overflow:hidden;
}

body #restart:hover {

	background-position: -27vh top;
    opacity: 1!important;
	background-color: rgba(255,255,255,0);
	    transition: all 0.1s linear;
}

.gear {
	background-image:url(../images/gear-btn.png);
	background-position:center;
	background-repeat:no-repeat;
	text-indent:-9999px;
	width:4vh;
	background-size:contain;
	margin-top:1.5vh;
	margin-right:4vh;
	
}

body.loggedin #login {
	display:none;
}
body.loggedin #logout {
	display:block;
}
span#dismiss_login {
    float: right;
}
span#dismiss_login:hover {
	cursor:pointer;
	opacity:0.8;
}

#boardwrap {
	max-width: 122vh;
    /* margin: 15vh; */
    position: absolute;
    top: 15vh;
    left: 5vh;
}
.card {
	width:17vh;
	height:17vh;
	position:relative;
	opacity:1;
	overflow:hidden;
	background-image:url(/gnarly/images/cardback.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#aaa;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25), 4px 4px 10px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.3s ease-in-out, transform 0.3s ease, opacity 0.5s ease; 
	
}
.card:hover {
	transform:scale(1.05);
	cursor:pointer;
}
.card_wrap {
	padding:1vh;
	display:inline-block;
	float:left;
	transition:transform 2s ease;
}
.card.open {
	transform: rotateY(0);
    background: #fafafa;
    cursor: default;
    animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
	animation-duration: .75s;
	background:#000;
}
.cardface {
	display: none;
}
.card.faded {
	opacity:0.0;
}
.card.open .cardface {
	height:17vh;
	width:17vh;
	display: block;
  }
.card.flipClose {
	/* transform: rotateY(90deg); */
	/* background: #fafafa; */
	cursor: default;
	animation-name: flipInYreverse;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .5s;
  }
  .card.match {
	cursor: default;
	/* background: #E5F720; */
	/* font-size: 33px; */
	animation-name: pulse;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .75s;
  }
  
  .card.unmatched {
	transform: rotateY(0);
	/* animation-name: pulse; */
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .75s;
	/* background: #e2043b; */
  }
  
  .card.disabled {
	pointer-events: none;
	opacity: 0;
  }

.cardface {
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	background-color:white;
}
.cardface.dishwasher {
	background-image:url(../images/icons/Dishwasher_Solid-01.png);
}


div#big_cards_wrap {
	margin:2em 0;
	display:flex;
	justify-content: space-around;
}
.big_card {
    width: 40vh;
    height: 40vh;
	background-image: url(/gnarly/images/cardback.jpg);
	background-size:cover;
}
.big_card:hover {
	cursor:pointer;
}
.big_card.open {
	transform: rotateY(0);
    background: #fafafa;
    cursor: default;
    animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
	animation-duration: .75s;
}
.big_card.open .cardface {
	display:flex;
	align-items: center;
  justify-content: center;
  height: 40vh;
    background: #eee;
}
.big_card h3 {
	font-size:10vh;
}
.dismiss_gameover {
	margin-bottom:1em !important;
}

#turnswrap {
    position: absolute;
    top: 16vh;
	min-width: 3em;
	width:calc(100vw - 126vh);
	max-width:15em;
    outline: 1px solid #555;
    height: 76vh;
    right: 2vw;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    background: white;
    padding: 1vh;
}
.turn {
    width: 100%;
    height: 6vh;
    outline: 1px solid #aaa;
    /* margin: 1vh; */
	margin-bottom: 1.5vh;
	background-color:rgba(100,255,100,0.5);
	opacity:1;
	transition:all 1s ease;
	
}
.turn.inactive {
	height:0;
	opacity:0;
	margin:0;
}
#turnswrap h4 {
	position: absolute;
	text-align: center;
	width: 100%;
	margin-top: -3em;
	text-transform: uppercase;
	color: #aaa;
	font-size:2vh;
}


/* timer */
#countdown {
	position: absolute;
    top: 2vh;
    left: calc(50vw - 5vh);
    height: 10vh;
    width: 10vh;
    text-align: center;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    /* padding: 1em; */
	visibility: hidden;
  }
  
  #countdown-number {
	color: white;
	display: inline-block;
	line-height: 4vh;
  }
  
  svg {
	position: absolute;
	top: 0;
	right: 0;
	width: 10vh;
	height: 10vh;
	transform: rotateY(-180deg) rotateZ(-90deg);
  }
  
  svg circle {
	stroke-dasharray: 113px;
	stroke-dashoffset: 0px;
	stroke-linecap: round;
	stroke-width: 2px;
	stroke: white;
	fill: none;
	
  }
 

  @keyframes countdown {
	from {
	  stroke-dashoffset: 0px;
	}
	to {
	  stroke-dashoffset: 113px;
	}
  }
/* end timer */

  /* animations */

@keyframes flipInY {
	from {
	  transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
	  animation-timing-function: ease-in;
	}
  
	40% {
	  transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
	  animation-timing-function: ease-in;
	}
  
	60% {
	  transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
	}
  
	80% {
	  transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}
  
	to {
	  transform: perspective(400px);
	}
  }
  
  @keyframes flipInYreverse {
	from {
	  transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
	  animation-timing-function: ease-in;
	}
  
	/* to {
	  transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
	  animation-timing-function: ease-in;
	} */
  
	60% {
	  transform: perspective(400px) rotate3d(0, 1, 0, 5deg);
	}
  
	80% {
	  transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
	}
  
	to {
	  transform: perspective(400px);
	}
  }
  
  @keyframes rubberBand {
	from {
	  transform: scale3d(1, 1, 1);
	}
  
	30% {
	  transform: scale3d(1.25, 0.75, 1);
	}
  
	40% {
	  transform: scale3d(0.75, 1.25, 1);
	}
  
	50% {
	  transform: scale3d(1.15, 0.85, 1);
	}
  
	65% {
	  transform: scale3d(.95, 1.05, 1);
	}
  
	75% {
	  transform: scale3d(1.05, .95, 1);
	}
  
	to {
	  transform: scale3d(1, 1, 1);
	}
  }
  
  @keyframes pulse {
	from {
	  transform: scale3d(1, 1, 1);
	}
  
	50% {
	  transform: scale3d(1.2, 1.2, 1.2);
	}
  
	to {
	  transform: scale3d(1, 1, 1);
	}
  }

  /* end animations */