/* ================================================================================== */
/* == Normalize.css v3.03 =========================================================== */
/* ================================================================================== */

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}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}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}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}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

*,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none }



/* ================================================================================== */
/* == Global ======================================================================== */
/* ================================================================================== */

html,body { height: 100%; font-family: "proxima-nova", "proxima nova", sans-serif; font-weight: 300; font-size: 16px; color: #616160; line-height: 1.5; background: #F3F4F6; }

/* This completely disables highlighting text on the entire website. Because of the nature of the app, there's no reason to need to highlight text. Disabling highlighting helps prevent accidental highlighting interference that sometimes occurs on touch devices. */ 
* { -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }


/* ================================================================================== */
/* == Navigation ==================================================================== */
/* ================================================================================== */

#menu { position: fixed; left: 0; top: 0; height: 100%; width: 100px; z-index: 9;
background: #2B6FC5;
background: -moz-linear-gradient(top, #2663b0 0%, #3f7cc9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2663b0), color-stop(100%,#3f7cc9));
background: -webkit-linear-gradient(top, #2663b0 0%,#3f7cc9 100%);
background: -o-linear-gradient(top, #2663b0 0%,#3f7cc9 100%);
background: -ms-linear-gradient(top, #2663b0 0%,#3f7cc9 100%);
background: linear-gradient(to bottom, #2663b0 0%,#3f7cc9 100%); }
#menu > ul > li { display: block; width: 100px; color: #fff; }

#menu .submenu { position: fixed; left: 100px; top: 0; width: 230px; height: 100%; background: #3A4659; display: none; color: #909DB4; }
#menu li.active .submenu { display: block; }
#menu .submenu h1 { color: #fff; text-transform: uppercase; letter-spacing: 0.1em; font-size: 22px; font-weight: 600; margin: 0; height: 100px; line-height: 100px;  padding-left: 30px; }
	#menu #menu-multiplication .submenu h1 { letter-spacing: normal; }
#menu .submenu li { font-size: 18px; cursor: pointer; padding: 10px 0px 9px 30px; }
#menu .submenu li.active { background-color: rgba(0,0,0,0.1); }
#menu .submenu li:hover { background-color: rgba(0,0,0,0.15); }
#menu li:nth-child(3) .submenu li:nth-child(4):after { content: "²"; }

#menu > ul {
min-height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
#menu > ul > li,
#menu .icon { 
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }

#menu .icon { display: block; text-indent: -9999px; cursor: pointer; }
#menu li.active,
#menu li:hover { background-color: rgba(58,70,89,0.25); }

#menu #menu-addition .icon { background: url(../img/icon-plus@2x.png) no-repeat center center; background-size: 44px; }
#menu #menu-subtraction .icon { background: url(../img/icon-minus@2x.png) no-repeat center center; background-size: 44px; }
#menu #menu-multiplication .icon { background: url(../img/icon-multiply@2x.png) no-repeat center center; background-size: 44px; }
#menu #menu-division .icon { background: url(../img/icon-divide@2x.png) no-repeat center center; background-size: 44px; }
#menu #menu-percentage .icon { background: url(../img/icon-percent@2x.png) no-repeat center center; background-size: 44px; }
#menu #menu-square .icon { background: url(../img/icon-square@2x.png) no-repeat center center; background-size: 44px; }
#menu #menu-settings .icon { background: url(../img/icon-settings@2x.png) no-repeat center center; background-size: 44px; }



/* ================================================================================== */
/* == Header ======================================================================== */
/* ================================================================================== */

#header { position: fixed; top: 0; right: 0; z-index: 8; width: calc(100% - 330px); height: 100px; background: #fff; text-align: center; border-bottom: 1px solid #EAEBED; }
#header #logo { background: url(../img/logo@2x.png) no-repeat center; background-size: 180px 47px; display: block; width: 100%; height: 100%; text-indent: -9999px; cursor: pointer; }


#score { position: absolute; top: 32px; right: 30px; font-size: 24px; }
#score div { float: left; }
#score #score-correct { color: #81BD48; }
#score #score-correct:before { content: "Score: "; color: #616160; font-weight: 700; }
#score #score-correct:after { content: "/"; color: #616160; margin: 0 5px;}
#score #score-wrong { color: #F00060; }

@media only screen and (max-height: 600px) { 
	#score { top: 13px; }
}

@media only screen and (max-width: 900px) { 
	#score #score-correct:before { display: none; }
}



/* ================================================================================== */
/* == Main ========================================================================== */
/* ================================================================================== */

.main { position: absolute; bottom: 0; right: 0; z-index: 1; width: calc(100% - 330px); height: calc(100% - 100px); /*padding: 100px;*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d; }

.main-math .main-inner { margin: 0; width: 100%; height: calc(100% - 160px); }



/* ================================================================================== */
/* == Home Intro ==================================================================== */
/* ================================================================================== */

.main-intro { text-align: center; padding: 75px 10% 0 10%; }
.main-intro h2 { font-size: 2em; line-height: normal; }
.main-intro h1 { font-size: 1.4em; line-height: normal; margin: 0.35em 0 1em 0; }
.main-intro p { }

#start-app { color: #fff; border: none; background: #2B6FC5; font-size: 20px; padding: 0 50px; height: 80px; line-height: 80px; text-align: center; border-radius: 8px; margin-top: 2em; }

/*Taller than 800px and greater than 1200px wide*/
@media only screen and (min-height: 800px) and (min-width: 120px) {
	.main-intro { padding: 0 15%; font-size: 18px; }
	.main-intro .main-inner { 
		position: relative;
		top: 46%;
		-webkit-transform: translateY(-46%);
		-ms-transform: translateY(-46%);
		transform: translateY(-46%);
	}
}
/*Shorter than 700px*/
@media only screen and (max-height: 700px) {
	.main-intro { padding-top: 30px; }
}
/*Shorter than 500px*/
@media only screen and (max-height: 520px) {
	.main-intro h2 { display: none; }
}

@media only screen and (max-width: 450px) {
	.main-intro { padding: 30px 30px 0 30px; font-size: 14px; }
	#start-app { height: 60px; line-height: 60px; font-size: 17px; }
}
@media only screen and (max-width: 350px) { 
	.main-intro { padding: 20px 20px 0 20px; font-size: 13px; }
	.main-intro h2 { display: none; }
}



/* ================================================================================== */
/* == Settings Page ================================================================= */
/* ================================================================================== */

.main-settings { text-align: center; padding: 75px 10% 0 10%; }
.main-settings h2 { font-size: 2em; line-height: normal; }
.main-settings p { }

.mode-button { display: block; color: #fff; border: none; background: #3A4659; font-size: 20px; padding: 0 50px; height: 80px; line-height: 80px; text-align: center; border-radius: 8px; margin: 1.2em auto 0 auto; opacity: 0.8; }
.mode-button:hover { opacity: 1; }
.mode-button.active { background: #2B6FC5; opacity: 1; }



/* ================================================================================== */
/* == Math Problem ================================================================== */
/* ================================================================================== */

.board { 
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-bottom: 0;
}
	
.problem { border-bottom: 2px solid; position: relative; margin: 0 auto; font-family: "droid-sans-mono", Droid Sans Mono, "proxima-nova", "proxima nova", sans-serif; font-weight: 300; font-size: 32px; text-shadow: 0px 0px 1px rgba(255,255,255,0.1); -webkit-font-smoothing: antialiased; }
.problem span { display: block; text-align: right; margin: 0 auto; }

.problem { font-size: 42px; line-height: 1.25em; }

.problem[data-math-type='singles'] { width: 70px; }
.problem[data-math-type='doubles'],
.problem[data-math-type='doubles1'],
.problem[data-math-type='doubles2'],
.problem[data-math-type='square'],
.problem[data-math-type='eleven'] { width: 90px; }
.problem[data-math-type='triples'],
.problem[data-math-type='triples1'],
.problem[data-math-type='triples2'],
.problem[data-math-type='triples3'],
.problem[data-math-type='sales'] { width: 110px; }
.problem[data-math-type='quadruples'],
.problem[data-math-type='quadruples1'],
.problem[data-math-type='quadruples2'],
.problem[data-math-type='quadruples3'] { width: 130px; }

.problem:after { content: "+"; position: absolute; left: 0; bottom: 0; }
.problem[data-math-kind='addition']:after { content: "+"; }
.problem[data-math-kind='subtraction']:after { content: "−"; }
.problem[data-math-kind='multiplication']:after { content: "×"; }
.problem[data-math-kind='division']:after { content: "÷"; }
.problem[data-math-kind='percentage']:after { content: "%"; }
.problem[data-math-kind='square']:after { content: "√"; }

.problem[data-math-kind='percentage'][data-math-type='sales'] span { text-align: center; }
.problem[data-math-kind='percentage'][data-math-type='sales']:after { display: none; }
.problem[data-math-kind='percentage'][data-math-type='sales'] span:last-child:after { content: "%"; margin-left: 0.15em; }

#new { display: block; margin: 0 auto; }

#answer { width: 100%; height: 110px; line-height: 100px; text-align: center; color: #81BD48; font-size: 50px; font-weight: 500; margin: 0; }

#reveal { background: #81BD48; color: #fff; border: none; display: block; height: 80px; line-height: 80px; width: 100%; font-size: 20px; border-radius: 8px; margin: 110px 0 0 0; }
#reveal.active { background: #C2C3C4; margin: 0; }

#rehide { color: #616160; border: none; background: none; font-size: 20px; width: 100%; height: 80px; line-height: 80px; text-align: center; border-radius: 8px; }

#new { color: #2B6FC5; border: none; background: none; font-size: 20px; width: 100%; height: 80px; line-height: 80px; text-align: center; border-radius: 8px; }
#new.active { color: #fff; background: #2B6FC5; }

.hidden { display: none !important; }

:focus { outline: none; }



/* ================================================================================== */
/* == Reveal Mode =================================================================== */
/* ================================================================================== */

#mode-reveal.main-math .main-inner { width: 230px; margin: 0 auto; }

/*Taller than 775px*/
@media only screen and (min-height: 775px) {
	#mode-reveal.main-math .main-inner { 
		height: auto;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	#mode-reveal.main-math .board { 
    	position: relative;
    	top: auto;
    	-webkit-transform: none);
    	-ms-transform: none;
    	transform: none;
    }
}



/* ================================================================================== */
/* == Multiple Mode ================================================================= */
/* ================================================================================== */

#mode-multiple {  }
#mode-multiple .board { padding: 0; }

#multiple-choice { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; padding-left: 15px; }
#multiple-choice li { float: left; width: calc(50% - 15px); margin: 0 15px 15px 0; height: 65px; text-align: center; background: #DBDCDD; cursor: pointer; border-radius: 8px; line-height: 65px; font-size: 20px; }
#multiple-choice li:hover { background: #CECFD1; }
#multiple-choice li.correct { background: #81BD48; color: #fff; }
#multiple-choice li.wrong { background: #F00060; color: #fff; }
#multiple-choice li.disable { pointer-events: none; }



/* ================================================================================== */
/* == Responsive ==================================================================== */
/* ================================================================================== */

/*Shorter than 775px*/
@media only screen and (max-height: 775px) {	
	#mode-reveal.main-math .main-inner { margin: 0; width: 100%; height: calc(100% - 160px); }	
	
	.board { padding-bottom: 65px; }
	#answer { height: 50px; line-height: 50px; margin: 15px 0 -65px 0; }
	
	#reveal,
	#new.active { position: absolute; left: 15px; bottom: 80px; width: calc(100% - 30px); }
	#rehide,
	#new { position: absolute; left: 0; bottom: 0; width: 100%; }
}


/*Shorter than 600px*/
@media only screen and (max-height: 600px) {
	#header { height: 60px; }
	#header .logo { background: url(../img/logo@2x.png) no-repeat center; background-size: 144px 38px; }
	
	/*#menu > ul > li { height: 80px; }*/
	#menu .submenu h1 { height: 58px; line-height: 82px; margin: 0; font-size: 18px; }
	#menu .submenu li { font-size: 15px; cursor: pointer; }
	
	.main { top: 60px; height: calc(100% - 60px); }
	.main-math .main-inner { height: calc(100% - 120px); }
	
	#reveal,
	#rehide,
	#new { height: 60px; line-height: 60px; font-size: 17px; }
	#reveal,
	#new.active { bottom: 60px; }
}


/*Shorter than 600px OR less than 600px wide*/
@media only screen and (max-height: 600px), only screen and (max-width: 600px) {
	#menu #menu-addition .icon { background: url(../img/icon-plus@2x.png) no-repeat center center; background-size: 22px; }
	#menu #menu-subtraction .icon { background: url(../img/icon-minus@2x.png) no-repeat center center; background-size: 22px; }
	#menu #menu-multiplication .icon { background: url(../img/icon-multiply@2x.png) no-repeat center center; background-size: 22px; }
	#menu #menu-division .icon { background: url(../img/icon-divide@2x.png) no-repeat center center; background-size: 22px; }
	#menu #menu-percentage .icon { background: url(../img/icon-percent@2x.png) no-repeat center center; background-size: 22px; }
	#menu #menu-square .icon { background: url(../img/icon-square@2x.png) no-repeat center center; background-size: 22px; }
	#menu #menu-settings .icon{ background: url(../img/icon-settings@2x.png) no-repeat center center; background-size: 22px; }
}


/*Shorter than 600px and less than 350px wide*/
@media only screen and (max-height: 600px) and (max-width: 350px) {
	
	.problem { font-size: 35px; }
	#answer { font-size: 40px; }

	.problem[data-math-type='singles'] { width: 50px; }
	.problem[data-math-type='doubles'],
	.problem[data-math-type='doubles1'],
	.problem[data-math-type='doubles2'],
	.problem[data-math-type='square'],
	.problem[data-math-type='eleven'] { width: 70px; }
	.problem[data-math-type='triples'],
	.problem[data-math-type='triples1'],
	.problem[data-math-type='triples2'],
	.problem[data-math-type='triples3'],
	.problem[data-math-type='sales'] { width: 90px; }
	.problem[data-math-type='quadruples'],
	.problem[data-math-type='quadruples1'],
	.problem[data-math-type='quadruples2'],
	.problem[data-math-type='quadruples3'] { width: 110px; }
}


/*Less wide than than 740px*/
@media only screen and (max-width: 740px) {
	#header { width: calc(100% - 50px); }
	#menu li .submenu { left: 100%; transition: .7s; width: 100%; opacity: 0; }
	#menu li .submenu.active { left: 100px; transition: .7s; opacity: 1;}
	.main { width: calc(100% - 100px); }
}


/*Less wide than than 480px*/
@media only screen and (max-width: 480px) {	
	#menu { width: 50px; }
	#menu > ul > li { width: 50px; }

	#menu li .submenu.active { left: 50px; }
	
	.main { width: calc(100% - 50px); }
}