/*! normalize.css v1.1.3 | MIT License | git.io/normalize */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; }
body { margin: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
h1 { font-size: 2.4em; margin: 0 0 .67em; font-weight: normal; font-style: normal; color: #2c348a; }
h2 { font-size: 1.5em; margin: 0 0 1em; font-weight: normal; font-style: normal; }
h3 { font-size: 1.5em; margin: 0 0 1em; font-weight: normal; font-style: normal; }
h4 { font-size: 1.5em; margin: 0 0 1em; font-weight: normal; font-style: normal; }
h5 { font-size: 1.5em; margin: 0 0 1em; font-weight: normal; font-style: normal; }
h6 { font-size: 1.5em; margin: 0 0 1em; font-weight: normal; font-style: normal; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
p, pre { margin: 1em 0; }
code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ''; content: none; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
dl, menu, ol, ul { margin: 1em 0; }
dd { margin: 0 0 0 40px; }
menu, ol, ul { padding: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; white-space: normal; }
button { border: none; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }

html, button, input, select, textarea { color: #333; }
html { font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, img, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/*-----
WEB FONTS
-------*/

@font-face {
    font-family: 'gabriel_sans_condblack';
    src: url('../fonts/gabriel_sans_cond_black-webfont.eot');
    src: url('../fonts/gabriel_sans_cond_black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gabriel_sans_cond_black-webfont.woff') format('woff'),
         url('../fonts/gabriel_sans_cond_black-webfont.ttf') format('truetype'),
         url('../fonts/gabriel_sans_cond_black-webfont.svg#gabriel_sans_condblack') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gabriel_sans_condlight';
    src: url('../fonts/gabriel_sans_cond_light-webfont.eot');
    src: url('../fonts/gabriel_sans_cond_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gabriel_sans_cond_light-webfont.woff') format('woff'),
         url('../fonts/gabriel_sans_cond_light-webfont.ttf') format('truetype'),
         url('../fonts/gabriel_sans_cond_light-webfont.svg#gabriel_sans_condlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*-----
BASE STYLES
-------*/

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { font-size: 62.5%; color: #fff; background: #bf3b3b; background-size: cover; }

.clearfix:before,.clearfix:after, .grid:before, .grid:after {content: " ";display: table;}
.clearfix:after, .grid:after { clear: both; }
.grid { clear: both; }

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

body { padding: 0; overflow: hidden; }
a { color: #e67e22; }

h1, h2, h3, h4, h5, h6 { font-weight: 200; line-height: 1.1; }
p { margin: 0 0 8px; }
p, li, dt, dd { font-size: 1.4em; line-height: 1.1; }
p + h1 { margin-top: 30px; }
p + h2 { margin-top: 30px; }
p + h3 { margin-top: 30px; }
p + h4 { margin-top: 30px; }
p + h5 { margin-top: 30px; }
p + h6 { margin-top: 30px; }
.note { color: #F60; }

li li { font-size: 1em; }

.home { padding: 30px; text-align: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; color: #000; background: #d9d05b; background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,.1) 25px, rgba(255,255,255,.1) 50px) }
.home h1 { color: #000; font-size: 26px; font-family: 'gabriel_sans_condlight'; }
.btn { border-radius: 10px; padding: 10px 20px; font-family: 'gabriel_sans_condblack'; font-size: 26px; text-decoration: none; display: inline-block; }
.btn-primary { background: #fff; color: #bf3b3b; text-transform: uppercase; box-shadow: 10px 10px 0 rgba(0,0,0,0.3); transition: all .1s; position: relative; }
.btn-secondary { background: #d9d05b; color: #bf3b3b; font-size: 16px; font-family: 'gabriel_sans_condlight'; }

.btn-primary:hover { box-shadow: 9px 9px 0 rgba(0,0,0,0.3); }
.btn-primary:active { box-shadow: 2px 2px 0 rgba(0,0,0,0.3); position: relative; top: 3px; left: 3px; }

.checkboxes { padding: 0; margin: 0 0 20px; list-style: none; }
.checkboxes li { width: 50%; display: inline-block; text-align: center; margin: 0 0 20px; padding: 0 15px; }
.checkboxes li:nth-child(odd) { text-align: right; }
.checkboxes li:nth-child(even) { text-align: left; }
.checkboxes li input { position: absolute; left: -9999em; }
.checkboxes li input + label { background: #fff; display: inline-block; width: 100px; height: 100px; border-radius: 50%; box-shadow:inset 0 0 0 rgba(0,0,0,0.3), 25px 25px 0 rgba(0,0,0,0.1); cursor: pointer; transition: all 250ms; position: relative; top: 0; left: 0; }
.checkboxes li input + label:hover { box-shadow: inset 0 0 0 rgba(0,0,0,0.3), 25px 25px 0 rgba(0,0,0,0.1); position: relative; top: 2px; left: 2px; }
.checkboxes li input:checked + label { background: #bf3b3b; color: #fff; box-shadow: inset 3px 3px 0 rgba(0,0,0,0.3), 0 0 0 rgba(0,0,0,0.1);  position: relative; top: 5px; left: 5px; }
.checkboxes li label:after { font-family: sans-serif; font-size: 100px; color: #bf3b3b; display: block; position: absolute; left: 0; top: 0; width: 100px; height: 100px; line-height: 105px; text-align: center; }
.checkboxes li input:checked + label:after { color: #fff; }
.label-Add:after {  content: '+'; font-family: 'gabriel_sans_condblack'; }
.label-Subtract:after { content: '-'; font-family: 'gabriel_sans_condblack'; }
.label-Multiply:after { content: '×'; font-family: 'gabriel_sans_condblack'; }
.label-Divide:after { content: '÷'; font-family: 'gabriel_sans_condblack'; }
.checkboxes li .label-Add:after  { line-height: 100px; }
.checkboxes li .label-Subtract:after  { line-height: 87px; }
.checkboxes li .label-Multiply:after  { line-height: 100px; }
.checkboxes li .label-Divide:after  { line-height: 100px; }

.right:after { display: block; content: ''; width: 40px; height: 40px; background: url(../img/tick.png) no-repeat; background-size: 30px 30px; position: absolute; left: 10px; top: 50%; margin: -20px 0 0 0; }
.wrong:after { display: block; content: ''; width: 40px; height: 40px; background: url(../img/cross.png) no-repeat; background-size: 30px 30px; position: absolute; right: 10px; top: 50%; margin: -20px 0 0; }

.the-meat { position: relative; padding: 0 0; top: -30px; }

.question, .equals-holder { text-align: center; width: 100%; z-index: 10; font-family: 'gabriel_sans_condlight'; font-size: 60px; line-height: 1; }
.answer { width: 100%; text-align: center; height: 230px; line-height: 230px; font-size: 52px; font-family: gabriel_sans_condblack; color: #bf3b3b; }
.answer-button { display: block; border-radius: 50%; background: #fff; position: absolute; top: 50%; height: 320px; width: 320px; margin: -160px 0 0; z-index: -1; text-shadow: 0 0 10px rgba(0,0,0,0.5); opacity: 1; font-family: gabriel_sans_condblack; padding: 50px; line-height: 300px; color: #003; font-size: 5em; text-decoration: none; background-color: #bf3b3b;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,.1) 25px, rgba(255,255,255,.1) 50px); }
.right { right: -265px; text-align: left; }
.wrong { left: -265px; text-align: right;  }

.drag-the-answer { display: inline-block; }

.score-holder { width: 100%; text-align: right; background: #d9d05b; padding: 0 20px; margin: 0 0 30px; }
.score-added { font-size: 32px; color: #bf3b3b; display: inline-block; font-family: 'gabriel_sans_condlight'; position: relative; left: 0; opacity: 0; }
.animate .score-added { -webkit-animation-name: score-added; -webkit-animation-duration: .6s;-webkit-animation-iteration-count: 1; animation-name: score-added; animation-iteration-count: 1; animation-duration: .6s; }
.score { font-family: 'gabriel_sans_condlight'; text-align: right; font-size: 32px; color: #bf3b3b; display: inline-block; }
	
.total-score { display: none; background: #bf3b3b; padding: 30px; text-align: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; color: #000; background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,.1) 25px, rgba(255,255,255,.1) 50px); }

.drag-the-answer { background: #fff; width: 160px; height: 160px; line-height: 160px; border-radius: 50%; z-index: 10; font-size: 50px; box-shadow: 20px 20px 0 rgba(0,0,0,0.1); transition: all 250ms; position: relative; top: 0; left: 0; }
.drag-the-answer:active { box-shadow: 10px 10px 0 rgba(0,0,0,0.1); position: relative; top: 2px; left: 2px; }

.your-final-score-heading, .personal-best-score { color: #fff; font-size: 26px; font-family: 'gabriel_sans_condlight'; margin: 0 0 15px; }
.personal-best-score { margin: 0 0 30px; font-size: 18px; }
.personal-best-alert { font-size: 24px; font-family: 'gabriel_sans_condlight'; margin: 0 0 30px; background: #d9d05b; color: #bf3b3b; position: absolute; left: 0; top: 0; width: 100%; padding: 15px;}
.your-final-score { background: #fff; width: 160px; height: 160px; line-height: 160px; border-radius: 50%; z-index: 10; font-size: 40px; box-shadow: 20px 20px 0 rgba(0,0,0,0.1); transition: all 250ms; position: relative; top: 0; left: 0; margin: 0 auto 40px; font-family: 'gabriel_sans_condblack'; color: #bf3b3b; }
.play-again { margin: 0 0 20px; }

.timer-animation { margin: 0; padding: 0; list-style: none; position: absolute; left: 0; bottom: 10px; width: 100%; }
.circle { float: left; width: 10%; text-align: center; }
.circle span { display: inline-block; width: 20px; height: 20px; background: #d9d05b; border-radius: 50%; opacity: 1; }
.time-up .circle span { background: rgba(0,0,0,0.1); }

.background-points-representation .circle10 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: .2s; animation-delay: .2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle9 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: .4s; animation-delay: .4s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle8 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: .6s; animation-delay: .6s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle7 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: .8s; animation-delay: .8s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle6 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle5 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle4 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle3 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: 1.6s; animation-delay: 1.6s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle2 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .2s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .2s; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle1 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .2s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .2s; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }

.the-game { position: absolute; left: 0; top: 50%; width: 100%; margin: -175px 0 0; }
.the-intro { position: absolute; left: 0; top: 50%; width: 100%; margin: -195px 0 0; }
.scores { position: absolute; left: 0; top: 50%; width: 100%; margin: -175px 0 0; }

.intro-screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #bf3b3b; z-index: 102; background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,.1) 25px, rgba(255,255,255,.1) 50px); transition: left .25s; }
.intro-screen .img-holder { position: absolute; left: 0; width: 100%; top: 125px; height: 174px; text-align: center; }
.intro-screen .img-holder img { width: 200px; height: auto; display: block; margin: 0 auto; }

.about-the-game-screen { position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: #d9d05b; background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,.1) 25px, rgba(255,255,255,.1) 50px); z-index: 101; transition: left .25s; overflow: hidden; }

.instructions-animation { width: 100%; height: 320px; position: absolute; left: 0; top: 50px; margin: 0; }

.hand { width: 180px; height: 199px; position: absolute; left: 50%; margin: 0 0 0 -20px; top: 40%; animation: animateHand 3s linear infinite; }
.dummy-answer { position: absolute; left: 50%; top: 50px; width: 140px; height: 140px; background: #fff; border-radius: 70px; margin-left: -70px; animation: animateCircle 3s ease infinite; box-shadow: 0 0 20px rgba(0,0,0,.4); }
.dummy-answer::after { content: '4'; animation: answerRight 3s linear infinite; color: #333; text-align: center; line-height: 140px; position: absolute; left: 0; right: 0; font-size: 60px; opacity: 0; display: inline-block;font-family: 'gabriel_sans_condblack'; }
.dummy-answer::before { content: '3'; animation: answerWrong 3s linear infinite; color: #333; text-align: center; line-height: 140px; position: absolute; left: 0; right: 0; font-size: 60px; opacity: 1; display: inline-block;font-family: 'gabriel_sans_condblack';  }

.how-to-play-text { position: absolute; left: 0; right: 0; top: 420px; margin: 0; text-align: center; padding: 0 100px; }
.how-to-play-text h2 { font-size: 30px; color: #000; text-transform: uppercase; font-family: 'gabriel_sans_condblack'; }
.how-to-play-text p { font-size: 24px; color: #000; margin: 0 0 40px; }
.instructions-question { left: 0; font-family: 'gabriel_sans_condblack'; top: 0; position: absolute; right: 0; font-size: 36px; color: #000; text-align: center; }

.start-the-game,
.back-from-help { position: absolute; text-align: center; left: 0; bottom: 40px; width: 100%; }

.hold-the-help { position: absolute; top: 15px; right: 15px; } 
.hold-the-help .btn { border-radius: 50%; width: 60px; height: 60px; padding: 0; color: #bf3b3b; }


@media only screen and (max-width: 599px) { /*--320px--*/
.instructions-animation { top: 30px; }
.hand { width: 100px; }
.how-to-play-text { top: 280px; padding: 0 20px; }
.how-to-play-text h2 { margin: 0 0 5px; font-size: 24px; }
.how-to-play-text p { font-size: 16px; line-height: 1.5; }
}



@keyframes animateHand {
    0%   { left: 50%; transform: rotate(0); top: 40%; }
    15%   { left: 40%; transform: rotate(-20deg); top: 39%; }
    30%   { left: 50%; transform: rotate(0); top: 40%; }
    45%   { left: 50%; transform: rotate(0); top: 40%; }
    60%   { left: 60%; transform: rotate(20deg); top: 41%; }
    75%   { left: 50%; transform: rotate(0); top: 40%; }
}

@keyframes animateCircle {
    0%   { left: 50%; }
    2%   { left: 50%; }
    25%   { left: -140px; opacity: 1; }
    25.1%   { left: -140px; opacity: 0; }
    35%   { left: 50%; opacity: 0; }
    40%   { left: 50%; opacity: 1; }
    47%   { left: 50%; }
    73%   { left: 120%; opacity: 1; }
    75%   { left: 120%; opacity: 0;}
    95%   { left: 50%; opacity: 0; }
    100%  { left: 50%; opacity: 1; }
}

@keyframes answerWrong {
    0%   { display: inline-block; opacity: 1;}
    25%   { display: inline-block; opacity: 1; }
    25.1%   { display: none;  opacity: 0;}
    97%   { display: none; opacity: 0; }
    100%   { display: none; opacity: 1; }

}

@keyframes answerRight {
    0%   { display: none;opacity: 0; }
    30%   { display: none;  opacity: 0;}
    31%   { display: inline-block; opacity: 1; }
    90% { display:inline-block; opacity: 1;}
    91% { display:inline-block; opacity: 0;}
    100% { display:inline-block; opacity: 0;}

}


/* Chrome, Safari, Opera */
@-webkit-keyframes score-added {
    0%   { left: -45px; opacity: 0; }
    75% { left: 0; opacity: 1; }
	100% { opacity: 0; }
}

/* Standard syntax */
@keyframes score-added {
    0%   { left: -45px; opacity: 0; }
    75% { left: 0; opacity: 1; }
	100% { opacity: 0; }
} 	
	
	
/* Chrome, Safari, Opera */
@-webkit-keyframes scores {
    0%   { height: 100%;}
    100% { height: 0%;}
}

/* Standard syntax */
@keyframes scores {
    0%   { height: 100%;}
    100% { height: 0%;}
} 

/* Chrome, Safari, Opera */
@-webkit-keyframes time-fade {
    0%   { background: #d9d05b;}
	100% { background: rgba(0,0,0,0.1);}
}

/* Standard syntax */
@keyframes time-fade {
    0%   { background: #d9d05b;}
	100% { background: rgba(0,0,0,0.1);}
} 


@media only screen and (min-width: 0.001em) { /*--320px--*/


}



@media only screen and (min-width: 600px) { /*--600px--*/

.home h1 { color: #000; font-size: 36px; font-family: 'gabriel_sans_condlight'; }
.checkboxes { padding: 0; margin: 0; list-style: none; }
.checkboxes li { width: 45%; display: inline-block; text-align: center; margin: 0 0 44px; padding: 0 22px; }
.checkboxes li input + label { width: 157px; height: 157px; }
.checkboxes li label:after { font-size: 157px; color: #bf3b3b; width: 157px; height: 157px; line-height: 157px; }
.checkboxes li .label-Add:after  { line-height: 157px; }
.checkboxes li .label-Multiply:after  { line-height: 157px; }
.checkboxes li .label-Subtract:after  { line-height: 130px; }
.checkboxes li .label-Divide:after  { line-height: 157px; }

.the-meat { position: relative; padding: 30px 0; top: 0; }

.question, .equals-holder { font-size: 100px;}

.the-game { position: absolute; left: 0; top: 50%; width: 100%; margin: -270px 0 0; }
.the-intro { position: absolute; left: 0; top: 50%; width: 100%; margin: -300px 0 0; }
.scores { position: absolute; left: 0; top: 50%; width: 100%; margin: -251px 0 0; }

.drag-the-answer { background: #fff; width: 230px; height: 230px; line-height: 230px; border-radius: 50%; z-index: 10; font-size: 70px; box-shadow: 20px 20px 0 rgba(0,0,0,0.1); transition: all 250ms; position: relative; top: 0; left: 0; }
.drag-the-answer:active { box-shadow: 15px 15px 0 rgba(0,0,0,0.1); position: relative; top: 2px; left: 2px; }

.answer-button { display: block; border-radius: 50%; background: #fff; position: absolute; top: 50%; height: 400px; width: 400px; margin: -200px 0 0; z-index: -1; text-shadow: 0 0 10px rgba(0,0,0,0.5); opacity: 1; font-family: gabriel_sans_condblack; padding: 50px; line-height: 300px; color: #003; font-size: 5em; text-decoration: none; background-color: #bf3b3b;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,.1) 25px, rgba(255,255,255,.1) 50px); }
.right { right: -250px; text-align: left; }
.wrong { left: -250px; text-align: right;  }

.right:after { display: block; content: ''; width: 60px; height: 60px; background: url(../img/tick.png) no-repeat; background-size: 60px 60px; position: absolute; left: 20px; top: 50%; margin: -30px 0 0 0; }
.wrong:after { display: block; content: ''; width: 60px; height: 60px; background: url(../img/cross.png) no-repeat; background-size: 60px 60px; position: absolute; right: 20px; top: 50%; margin: -30px 0 0; }

.your-final-score-heading, .personal-best-score { color: #fff; font-size: 36px; font-family: 'gabriel_sans_condlight'; margin: 0 0 30px; }
.personal-best-score { margin: 0 0 120px; font-size: 24px; }
.personal-best-alert { font-size: 36px; font-family: 'gabriel_sans_condlight'; margin: 0 0 30px; background: #d9d05b; color: #bf3b3b; position: absolute; left: 0; top: 0; width: 100%; padding: 20px;}
.your-final-score { background: #fff; width: 230px; height: 230px; line-height: 230px; border-radius: 50%; z-index: 10; font-size: 54px; box-shadow: 20px 20px 0 rgba(0,0,0,0.1); transition: all 250ms; position: relative; top: 0; left: 0; margin: 0 auto 80px; font-family: 'gabriel_sans_condblack'; color: #bf3b3b; }

.btn { border-radius: 10px; padding: 10px 40px; font-size: 36px; text-decoration: none; display: inline-block; }
.btn-secondary { background: #d9d05b; color: #bf3b3b; font-size: 20px; }

.score-holder { width: 100%; text-align: right; background: #d9d05b; padding: 0 20px; margin: 0 0 30px; }
.score-added { font-size: 48px; color: #bf3b3b; display: inline-block; font-family: 'gabriel_sans_condlight'; position: relative; left: 0; opacity: 0; }
.score-added.animate { -webkit-animation-name: score-added; -webkit-animation-duration: 1s;-webkit-animation-iteration-count: 1; animation-name: score-added; animation-iteration-count: 1; animation-duration: 1s; }
.score { font-family: 'gabriel_sans_condlight'; text-align: right; font-size: 48px; color: #bf3b3b; display: inline-block; }

.timer-animation { margin: 0; padding: 0; list-style: none; position: absolute; left: 0; bottom: 20px; width: 100%; }
.circle { float: left; width: 10%; text-align: center; }
.circle span { display: inline-block; width: 50px; height: 50px; background: #d9d05b; border-radius: 50%; opacity: 1; }

.background-points-representation .circle10 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: .2s; animation-delay: .2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle9 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: .4s; animation-delay: .4s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle8 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: .6s; animation-delay: .6s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle7 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: .8s; animation-delay: .8s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle6 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle5 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle4 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle3 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .1s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .1s; -webkit-animation-delay: 1.6s; animation-delay: 1.6s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle2 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .2s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .2s; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }
.background-points-representation .circle1 span { -webkit-animation-name: time-fade; -webkit-animation-duration: .2s;-webkit-animation-iteration-count: 1; animation-name: time-fade; animation-iteration-count: 1; animation-duration: .2s; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; }

.intro-screen .img-holder { height: auto; top: 225px; }
.intro-screen .img-holder img { width: 302px; height: auto; }
.start-the-game { bottom: 300px; }

}

@media only screen and (max-height: 1200px) and (orientation: landscape) { /*--1023--*/
.intro-screen .img-holder { top: 175px; }
.start-the-game { bottom: 200px; }
.instructions-animation { top: 50px; }
.how-to-play-text { top: 450px; }
}

@media only screen and (max-height: 768px) and (orientation: landscape) { /*--1023--*/
.start-the-game { bottom: 150px; }
}

@media only screen and (min-width: 768px) and (max-height: 768px) and (orientation: landscape) { /*--1023--*/
.intro-screen .img-holder { top: 105px; }
.start-the-game { bottom: 100px; }
}

@media only screen and (max-width: 767px) and (max-height: 880px) { /*--1023--*/
.intro-screen .img-holder { top: 105px}
.start-the-game { bottom: 90px; }
}

@media only screen and (min-width: 1024px) { /*--1024px--*/


}

/*-----
HELPER CLASSES
-------*/

.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

@media screen and (-webkit-min-device-pixel-ratio:0) { 

/* Stop zoom in on form field */
 select:focus, textarea:focus, input:focus {
 font-size: 16px;
 }
}



/*-----
SVG
-------*/
@media only screen and (min-width: 480px) and (max-height: 600px) { /*--480px--*/

.checkboxes { margin: 0; }
.checkboxes li input + label { width: 80px; height: 80px; }
.checkboxes li input:checked + label { box-shadow: 15px 15px 0 rgba(0,0,0,0.1); }
.checkboxes li label:after { width: 90px; height: 80px; line-height: 90px; }
.checkboxes li .label-Multiply:after  { line-height: 80px; }
.the-intro { margin: -100px 0 0; }
.home h1 br { display: none; }
.checkboxes li { width: 24%; }

.answer { height: 200px; line-height: 200px; }
.the-intro { position: absolute; left: 0; top: 50%; width: 100%; margin: -105px 0 0; }
.question, .equals-holder { display: inline-block; width: auto; font-size: 40px; }
.the-game { text-align: center; margin: -100px 0 0; }
.scores { position: absolute; left: 0; top: 50%; width: 100%; margin: -85px 0 0; }

.your-final-score-heading { display: none; }
.drag-the-answer { width: 140px; height: 140px; line-height: 140px; font-size: 40px; }
.your-final-score { width: 100px; height: 100px; line-height: 100px; font-size: 30px; box-shadow: 15px 15px 0 rgba(0,0,0,0.1); margin: 0 auto 20px; }
.btn { font-size: 20px; }
.btn-secondary { font-size: 15px; }

}

.intro-screen { left: -100%; }
.about-the-game-screen { left: 0%; }

@media only screen and (max-height: 880px) and (max-width: 767px) {
.about-the-game-screen .start-the-game { bottom: 40px; }
}