@charset "utf-8";

/* WEB FONTS */

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("https://static.arcademics.com/fonts/poppins-latin-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("https://static.arcademics.com/fonts/poppins-latin-semi-bold.woff2") format("woff2");
}

/* BASE STYLES */

* {
	box-sizing: border-box;	/* Responsive Web Design */
	margin: 0;
	padding: 0;
}

html, body {	/* Sticky Footer */
	display: flex;
	flex-direction: column;
	height: 100%;
}

body {
	background: #FEFEFE;
	color: #666;
	font: 100% "Poppins", sans-serif;
	line-height: 1.5;
	overflow-y: scroll;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	border: 0;
}

ol, ul {
	margin: 1em 1em 1em 2em;
}

ol {
	list-style: decimal outside;
}

ul {
	list-style: disc outside;
}

caption, th {
	font-style: normal;
	font-weight: normal;
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before, q:after {
	content: '';
}

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

button {
	color: #666;
	cursor: pointer;
}

button[disabled] {
	background: #bebebe !important;
	border-color: #bebebe !important;
	cursor: default !important;
}

button[disabled]:hover {
	background: #bebebe !important;
	box-shadow: none !important;
}

input[type='text'], input[type='password'], input[type='number'], input[type='search'], select, textarea {
	border: 1px solid #CCC;
	border-radius: 4px;
	color: #666;
	padding: 6px 10px;
}

p {
	margin-bottom: 1em;
}

a {
	color: #2276ca;
	cursor: pointer;
	text-decoration: none;
}

.clear {clear: both;}
.hidden {display: none;}
.left {float: left;}
.right {float: right;}

::-webkit-scrollbar {
	height: 9px;
	width: 9px;
}

::-webkit-scrollbar-track {
	background-color: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
	background-color: #999;
	border-radius: 9px;
	outline: 1px solid rgba(0, 0, 0, 0);
	transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #999;
}

/* HEADER STYLES */

header {
	background: #fefefe;
	border-top: 4px solid #ff9933;
	border-bottom: 1px solid #dddddd;
	font-size: 0.9375rem;	/* 15px */
}

.logo {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") 0px 0px;
	cursor: pointer;
	display: inline-block;
	height: 22px;
	margin: 14px 0px;
	width: 210px;
}

.logoBasic {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") 0px -110px;
	cursor: pointer;
	display: inline-block;
	height: 22px;
	margin: 14px 0px;
	width: 286px;
}

.logoPlus {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") 0px -134px;
	cursor: pointer;
	display: inline-block;
	height: 22px;
	margin: 14px 0px;
	width: 282px;
}

.mobileMenu {
	display: none;
}

.topNav > ul {
	list-style: none;
	margin: -42px 0px 0px 0px;
	padding-bottom: 4px;
	text-align: right;
}

.topNav > ul > li {
	display: inline-block;
	margin: 0px 10px;
	padding-bottom: 8px;
}

.topNav > ul > li > button, .topNav > ul > li > a {
	color: #555;
	display: block;
	font-weight: bold;
	padding: 4px 0px;
	position: relative;
}

.topNav > ul > li > button:hover, .topNav > ul > li > a:hover {
	color: #983620;
}

.topNav > ul > li > button {
	background: none;
	border: none;
	padding-right: 10px;
}

.topNav > ul > li > button::after {
	border-right: 2px solid #555;
	border-bottom: 2px solid #555;
	content: "";
	height: 4px;
	position: absolute;
	right: 0px;
	top: 10px;
	transform: rotate(45deg);
	width: 4px;
}

.topNav > ul > li > ul {
	background: #4B2A0D;
	display: none;
	list-style: none;
	margin: 8px 0px 0px 0px;
	padding: 8px 16px;
	position: absolute;
	text-align: center;
	z-index: 1;
}

.topNav > ul > li > ul:before {
	border-color: transparent transparent #4B2A0D transparent;
	border-style: solid;
	border-width: 0px 7.5px 8px 7.5px;
	content: '';
	left: 20px;
	position: absolute;
	top: -8px;
	transform: rotate(360deg);
}

.topNav > ul > li > ul a {
	color: #FFF;
	font-weight: bold;
	line-height: 2;
}

.topNav > ul > li > ul a:hover {
	border-bottom: 2px solid #F93;
}

.topNav .signUp {
	background: #F46700;
	border: 1px solid#F46700;
	border-radius: 4px;
	color: #FFFFFF;
	padding: 4px 12px;
}

.topNav .signUp:hover {
	background: #F46700;
	color: #FFFFFF;
}

.topNav .login {
	background: #FFF;
	border: 1px solid #DDD;
	border-radius: 4px;
	color: #666;
	padding: 4px 12px;
}

.topNav .login:hover {
	background-color: #F5F5F5;
	color: #333;
}

.topNav .lock {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") -530px 0px;
	display: inline-block;
	height: 12px;
	margin: -2px 6px 0px 0px;
	vertical-align: middle;
	width: 9px;
}

/* CONTENT STYLES */

main {	/* Sticky Footer */
	flex: 1;
}

.container {
	margin: 0 auto;
	max-width: 1080px;
	padding: 0px 2%;
}

header .container {
	max-width: inherit;
}

.container800 {
	margin: 0 auto;
	max-width: 800px;
	padding: 0px 2%;
}

.contentSection {
	padding: 48px 0px;
}

.contentSection h1 {
	color: #333;
	font-size: 1.75rem;	/* 28px */
	margin-bottom: 1em;
}

.contentSection h2 {
	color: #4c4c4c;
	font-size: 1.5rem;	/* 24px */
	margin-bottom: 1em;
}

/* FOOTER STYLES */

footer {
	background-color: #fcfcfc;
	border-top: 1px solid #eeeeee;
	font-size: 0.9375rem;	/* 15px */
	padding: 48px 0px 16px;
}

footer p {
	font-size: 0.875rem;	/* 14px */
	line-height: 1.40625rem;	/* match rest of footer: 15px * 1.5 */
}

footer h2 {
	color: #6e6e6e;
	margin-bottom: 4px;
}

footer ul {
	list-style: none;
	margin: 0px;
}

footer a { 
	color: #cc4901;
}

footer a:hover {
	color: #930;
}

footer .description {
	float: left;
	margin: 0px 2%;
	width: 27%;
}

footer .siteLinks1 {
	float: left;
	margin: 0px 2%;
	width: 10%;
}

footer .siteLinks2 {
	float: left;
	margin: 0px 2%;
	width: 13%;
}

footer .followUs {
	float: left;
	margin: 0px 2%;
	width: 12%;
}

footer .followUs li {
	margin: 8px 0px 12px;
}

footer .downloadTheApps {
	float: left;
	margin: 0px 0px 0px 2%;
	width: 20%;
}

footer .downloadTheApps li {
	margin: 8px 0px 12px;
}

footer .downloadTheApps a:hover {
	color: #fff;
}

footer .copyright {
	float: left;
	margin: 0px 2%;
}

/* SPRITE STYLES */

.playOverlay {
	background: url("//static.arcademics.com/images/playOverlay.png");
	height: 145px;
	margin-top: -140px;
	position: relative;
	width: 140px;
}

footer .logoSmall {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") -568px 0px no-repeat;
	margin: -22px 0px 10px -36px;
	height: 40px;
	width: 78px;
}

footer .facebook {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") 0px -40px no-repeat;
	display: inline-block;
	line-height: 33px;	/* vertical center: icon image height */
	padding-left: 44px;
}

footer .twitter {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") -160px -40px;
	display: inline-block;
	line-height: 33px;	/* vertical center: icon image height */
	padding-left: 44px;
}

footer .instagram {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") -320px -40px;
	display: inline-block;
	line-height: 33px;	/* vertical center: icon image height */
	padding-left: 44px;
}

footer .appButton {
	padding: 8px 20px 8px 16px;
}

.appStore {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") -480px -40px;
	display: inline-block;
	height: 35px;
	width: 37px;
}

.googlePlay {
	background: url("//static.arcademics.com/images/sprites/main-20241113.png") -480px -83px;
	display: inline-block;
	height: 35px;
	width: 37px;
}

.appButton .text {
	display: inline-block;
	margin-top: 4px;
	text-align: left;
	vertical-align: top;
	width: 110px;
}

.appButton .line1 {
	font-size: 12px;	/* No browser font scaling. */
	font-weight: normal;
	line-height: 1;
	vertical-align: top;
}

.appButton .line2 {
	font-size: 18px;	/* No browser font scaling. */
	line-height: 1.2;
}

/* POWERUP ICON STYLES */

.colors				{background: url("//static.arcademics.com/images/power-ups/colors-0.png")}
.patterns			{background: url("//static.arcademics.com/images/power-ups/patterns-0.png")}
.booster			{background: url("//static.arcademics.com/images/power-ups/booster-0.png")}
.lightning			{background: url("//static.arcademics.com/images/power-ups/lightning-0.png")}
.colors.unlocked	{background: url("//static.arcademics.com/images/power-ups/colors-1.png")}
.patterns.unlocked	{background: url("//static.arcademics.com/images/power-ups/patterns-1.png")}
.booster.unlocked	{background: url("//static.arcademics.com/images/power-ups/booster-1.png")}
.lightning.unlocked	{background: url("//static.arcademics.com/images/power-ups/lightning-1.png")}

.sprite-83				{height: 52px; width: 83px;}
.colors-83				{background: url("//static.arcademics.com/images/sprites/badges_20200722.png") 0px -56px;}
.patterns-83			{background: url("//static.arcademics.com/images/sprites/badges_20200722.png") -84px -56px;}
.booster-83				{background: url("//static.arcademics.com/images/sprites/badges_20200722.png") -168px -56px;}
.lightning-83			{background: url("//static.arcademics.com/images/sprites/badges_20200722.png") -252px -56px;}

/* BADGE ICON STYLES */

.completed				{background: url("//static.arcademics.com/images/badges/completed-0.png")}
.first-place			{background: url("//static.arcademics.com/images/badges/first-place-0.png")}
.games-played			{background: url("//static.arcademics.com/images/badges/games-played-0.png")}
.rate					{background: url("//static.arcademics.com/images/badges/rate-0.png")}
.beat-my-best			{background: url("//static.arcademics.com/images/badges/beat-my-best-0.png")}
.hit-streak				{background: url("//static.arcademics.com/images/badges/hit-streak-0.png")}
.day-streak				{background: url("//static.arcademics.com/images/badges/day-streak-0.png")}
.mastery				{background: url("//static.arcademics.com/images/badges/mastery-0.png")}
.completed.unlocked		{background: url("//static.arcademics.com/images/badges/completed-1.png")}
.first-place.unlocked	{background: url("//static.arcademics.com/images/badges/first-place-1.png")}
.games-played.unlocked	{background: url("//static.arcademics.com/images/badges/games-played-1.png")}
.rate.unlocked			{background: url("//static.arcademics.com/images/badges/rate-1.png")}
.beat-my-best.unlocked	{background: url("//static.arcademics.com/images/badges/beat-my-best-1.png")}
.hit-streak.unlocked	{background: url("//static.arcademics.com/images/badges/hit-streak-1.png")}
.day-streak.unlocked	{background: url("//static.arcademics.com/images/badges/day-streak-1.png")}
.mastery.unlocked		{background: url("//static.arcademics.com/images/badges/mastery-1.png")}
.completed.gold			{background: url("//static.arcademics.com/images/badges/completed-2.png")}
.first-place.gold		{background: url("//static.arcademics.com/images/badges/first-place-2.png")}
.games-played.gold		{background: url("//static.arcademics.com/images/badges/games-played-2.png")}
.rate.gold				{background: url("//static.arcademics.com/images/badges/rate-2.png")}
.beat-my-best.gold		{background: url("//static.arcademics.com/images/badges/beat-my-best-2.png")}
.hit-streak.gold		{background: url("//static.arcademics.com/images/badges/hit-streak-2.png")}
.day-streak.gold		{background: url("//static.arcademics.com/images/badges/day-streak-2.png")}
.mastery.gold			{background: url("//static.arcademics.com/images/badges/mastery-2.png")}

/* IDEA ICON STYLES */

.ideaRibbon		{background: url("https://static.arcademics.com/images/sprites/ideas_20160308.png") 0px 0px no-repeat;}
.ideaApple		{background: url("https://static.arcademics.com/images/sprites/ideas_20160308.png") 0px -30px no-repeat;}
.ideaBracket	{background: url("https://static.arcademics.com/images/sprites/ideas_20160308.png") 0px -60px no-repeat;}
.ideaTrophy		{background: url("https://static.arcademics.com/images/sprites/ideas_20160308.png") 0px -90px no-repeat;}
.ideaVs			{background: url("https://static.arcademics.com/images/sprites/ideas_20160308.png") 0px -120px no-repeat;}
.ideaCrown		{background: url("https://static.arcademics.com/images/sprites/ideas_20160308.png") 0px -150px no-repeat;}

/* HOME PAGE STYLES */

.contentSectionBanner {
	background: #4a3635 url("//static.arcademics.com/images/homeBanner.png") no-repeat top right;
	height: 350px;
}

.contentSectionBanner h1 {
	color: #ffffff;
	font-size: 1.5rem;	/* 24px */
	font-weight: bold;
	line-height: 2.5rem;
	margin: -0.8rem 0 16px;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.contentSectionBanner h2 {
	color: #ffffff;
	font-size: 1rem;	/* 16px */
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 24px;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.contentSectionLeaderboards {
	background-color: #fdf0e3;
	border-bottom:1px solid #ddd;
	padding: 32px 0px 36px;
}

.contentSectionLeaderboards .leaderboardSelector {
	margin: 16px 0px 12px;
	text-align: center;
}

.contentSectionLeaderboards .gameTitle {
	color: #555;
	display: inline-block;
	font-size: 1.375rem;	/* 22px */
	height: 36px;	/* Fixed height for Dirt Bike Comparing Fractions overflow. */
	overflow: hidden;
	width: 284px;
}

.contentSectionLeaderboards .btnArrow {
	background-color: rgba(0, 0, 0, 0.07);
	border: none;
	border-radius: 3px;
	height: 29px;
	margin: 3px 16px 0;
	position: relative;
	vertical-align: top;
	width: 32px;
}

.contentSectionLeaderboards .btnArrow:hover {
	background-color: rgba(0, 0, 0, 0.15);
}

.contentSectionLeaderboards .btnArrow.prev::after {
	border-top: 4px solid #777;
	border-left: 4px solid #777;
	border-radius: 2px;
	content: "";
	height: 8px;
	position: absolute;
	right: 8px;
	top: 8px;
	transform: rotate(-45deg);
	width: 8px;
}

.contentSectionLeaderboards .btnArrow.next::after {
	border-top: 4px solid #777;
	border-left: 4px solid #777;
	border-radius: 2px;
	content: "";
	height: 8px;
	position: absolute;
	right: 11px;
	top: 8px;
	transform: rotate(135deg);
	width: 8px;
}

.contentSectionGames {
	background: #ffffb2 url("//static.arcademics.com/images/shine.png") no-repeat top center;
	padding: 24px 0px 0px;
}

.contentSectionGames h2 {
	color: #BF952D;
	font-size: 1.375rem;	/* 22px */
	margin: 0.5em 0px;
	text-align: center;
}

.contentSectionFollow {
	background: #FEFEFE url("//static.arcademics.com/images/featureFollow.png") top center no-repeat;
	border-top: 1px solid #EEE;
	padding: 36px 0px 48px;
}

.contentSectionFollow h2 {
	color: #007ac7;
	margin-bottom: 0.5em;
	text-align: center;
}

.contentSectionFollow p {
	margin-bottom: 24px;
	text-align: center;
}

.contentSectionFollow a {
	margin: 0px 2%;
}

.contentSectionApps {
	background: #FCFCFC;
	border-top: 1px solid #EEE;
}

.contentSectionApps .col1 {
	float: left;
	margin: 0px 2%;
	width: 34%;
}

.contentSectionApps .col2 {
	float: left;
	margin: 0px 2%;
	width: 58%;
}

.contentSectionApps h2 {
	color: #e46101;
	margin-bottom: 0.5em;
}

.contentSectionApps p {
	margin-bottom: 32px;
}

.contentSectionApps a {
	margin: 0px 16px 16px 0px;
	padding: 12px 32px 12px 24px;
}

.homePlayButton {
	display: block;
	position: relative;
	width: 120px;
}

.homePlayButton span {
	box-sizing: content-box;
}

.homePlayButton .edgesTop {
	position: absolute;
	height: 27px;
	width: 116px;
	transform: skewX(24deg);
	background-color: #ff9933;
	border-right: 6px solid #271010;
	border-left: 6px solid #271010;
	border-top: 5px solid #271010;
	border-top-left-radius: 6px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 2px;
	top: 0px;
	left: 0px;
	transition: background-color 0.2s;
}

.homePlayButton .edgesBottom {
	position: absolute;
	height: 27px;
	width: 116px;
	transform: skewX(-24deg);
	background-color: #ff9933;
	border-right: 6px solid #271010;
	border-left: 6px solid #271010;
	border-bottom: 5px solid #271010;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 3px;
	border-top-right-radius: 2px;
	top: 30px;
	left: 0px;
	transition: background-color 0.2s;
}

.homePlayButton:hover .edgesTop {
	background-color: #ff8001;
}

.homePlayButton:hover .edgesBottom {
	background-color: #ff8001;
}

.homePlayButton .chevronLeft {
	position: absolute;
	height: 26px;
	width: 6px;
	transform: skewX(24deg);
	border-right: 8px solid rgba(246, 235, 19, 0.3);
	border-left: 8px solid rgba(246, 235, 19, 0.3);
	top: 5px;
	left: -26px;
	transition: left 0.2s;
}

.homePlayButton:hover .chevronLeft {
	left: 134px;
}

.homePlayButton .chevronLeft::before {
	content: "";
	position: absolute;
	height: 26px;
	width: 6px;
	transform: skewX(-42deg);
	border-right: 8px solid rgba(246, 235, 19, 0.3);
	border-left: 8px solid rgba(246, 235, 19, 0.3);
	top: 26px;
	right: 4px;
}

.homePlayButton .chevronMid {
	position: absolute;
	height: 26px;
	width: 86px;
	transform: skewX(24deg);
	border-right: 8px solid rgba(246, 235, 19, 0.4);
	border-left: 8px solid rgba(246, 235, 19, 0.4);
	top: 5px;
	left: 14px;
}

.homePlayButton .chevronMid::before {
	content: "";
	position: absolute;
	height: 26px;
	width: 86px;
	transform: skewX(-42deg);
	border-right: 8px solid rgba(246, 235, 19, 0.4);
	border-left: 8px solid rgba(246, 235, 19, 0.4);
	top: 26px;
	right: 4px;
}

.homePlayButton .chevronRight {
	position: absolute;
	height: 26px;
	width: 6px;
	transform: skewX(24deg);
	border-right: 8px solid rgba(246, 235, 19, 0.3);
	border-left: 8px solid rgba(246, 235, 19, 0.3);
	top: 5px;
	right: -36px;
}

.homePlayButton .chevronRight::before {
	content: "";
	position: absolute;
	height: 26px;
	width: 6px;
	transform: skewX(-42deg);
	border-right: 8px solid rgba(246, 235, 19, 0.3);
	border-left: 8px solid rgba(246, 235, 19, 0.3);
	top: 26px;
	right: 4px;
}

.homePlayButton .title {
	color: #fff;
	font-size: 30px;	/* No browser font scaling. */
	font-style: italic;
	font-weight: bold;
	position: absolute;
	letter-spacing: -2px;
	left: 2px;
	text-align: center;
	line-height: 2;
	width: 100%;
}

.keywordCloud {
	margin: 16px 0px;
	padding: 0px 8%;
	text-align: center;
}

.keywordCloud button {
	background: none;
	border: none;
	color: #846643;
	margin: 0px 8px;
}

.homeItemContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 24px 48px;
	justify-content: center;
	margin-top: 40px;
}

.homeItem {
	color: #996C23;
	padding: 2px;
}

.homeItem:hover {
	background-color: #FFC;
	border-radius: 4px;
}

.homeItem .image {
	border-radius: 4px;
	display: block;
	height: 140px;
	width: 140px;
}

.homeItem .text {
	margin: -2px 0px 0px;
	text-align: center;
	width: 140px;
}

.homePenguin {
	float: right;
	margin: -111px 2% 0px 0px;
}

/* GAMEPLAY PAGE STYLES */

.contentSectionGameplay {
	background: #fdfdc2;
	padding: 24px 0px 48px;
}

.contentSectionGameplay h1 {
	color: #c35c00;
	margin: 0px;
}

.contentSectionGameplay h2 {
	color: #9a691b;
	font-size: 0.875rem;	/* 14px */
	margin-bottom: 6px;
}

.contentSectionGameplay .options {
	bottom: 0px;
	display: flex;
	position: absolute;
	right: 0px;
}

.contentSectionGameplay .options > * {
	background-color: #ffec92;
	border: none;
	border-radius: 4px;
	color: #cd6632;
	font-weight: bold;
	height: 34px;
	line-height: 34px;
	margin-left: 10px;
	position: relative;
	transition: background-color 200ms;
	width: 38px;
}

.contentSectionGameplay .options > *:hover {
	background-color: #fdd683;
	border: none;
}

.contentSectionGameplay .info {
	font-size: 24px;	/* No browser font scaling. */
}

.contentSectionGameplay .fullscreen:before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 0 9px;
	border-color: transparent transparent transparent #cd6632;
	left: 7px;
	bottom: 7px;
}

.contentSectionGameplay .fullscreen::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 9px 9px 0;
	border-color: transparent #cd6632 transparent transparent;
	top: 7px;
	right: 7px;
}

.contentSectionGameplay .lineDiagonal {
	position: absolute;
	width: 24px;
	height: 1px;
	border-top: 2px solid #cd6632;
	transform: rotate(-42deg);
	top: 15px;
	left: 8px;
}

.contentSectionGameplay .boxFlex {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 8px;
}

.contentSectionGameplay .box {
	background-color: #fefed9;
	border-radius: 4px;
	padding: 8px;
}

.contentSectionGameplay .description p {
	color: #7e5a21;
	margin: 0px;
	padding: 8px;
}

.contentSectionGameplay .box.points, .contentSectionGameplay .box.badges {
	flex: 1;
	min-width: 282px;
}

.contentSectionGameplay h3 {
	color: #b75a0f;
	font-weight: bold;
	margin-bottom: 6px;
}

.contentSectionGameplay .pointsWrapper {
	background-color: #fef5ca;
	height: 120px;
	padding: 20px;
}

.contentSectionGameplay .pointsText {
	margin-bottom: 4px;
}

.contentSectionGameplay .pointsTotal {
	color: #fc7900;
	font-size: 1.25rem;	/* 20px */
	font-weight: bold;
	margin-left: 4px;
}

.contentSectionGameplay .pointsLabel {
	color: #a4652e;
	font-size: 0.875rem;	/* 14px */
	font-weight: bold;
	margin-left: 2px;
}

.contentSectionGameplay .pointsBar {
	background-image: linear-gradient(to right, #fc7900, #fcc500);
	height: 10px;
	position: relative;
	transform: skewX(-25deg);
	width: calc(100% - 16px);
}

.contentSectionGameplay .pointsFillNegative {
	background-color: #ece4bc;
	height: 10px;
	position: absolute;
	right: 0px;
	transition: width 1s ease-out;
}

.contentSectionGameplay .powerUpContainer {
	position: relative;
	width: calc(100% - 16px);
}

.contentSectionGameplay .powerUp {
	position: absolute;
}

.contentSectionGameplay .powerUp::after {
	background-color: #fef5ca;
	content: "";
	height: 22px;
	left: calc(50% + 1px);
	position: absolute;
	top: -21px;
	transform: rotate(25deg);
	width: 2px;
}

.contentSectionGameplay .colors {
	background-size: 18px 27px;
	height: 27px;
	left: calc(25% - 9px);
	top: 5px;
	width: 18px;
}

.contentSectionGameplay .patterns {
	background-size: 22px 27px;
	height: 27px;
	left: calc(50% - 11px);
	top: 5px;
	width: 22px;
}

.contentSectionGameplay .booster {
	background-size: 40px 21px;
	height: 21px;
	left: calc(75% - 20px);
	top: 10px;
	width: 40px;
}

.contentSectionGameplay .lightning {
	background-size: 32px 22px;
	height: 22px;
	left: calc(100% - 16px);
	top: 10px;
	width: 32px;
}

.contentSectionGameplay .badgeFlex {
	align-items: center;
	background-color: #fef5ca;
	display: flex;
	flex-wrap: wrap;
	height: 120px;
	justify-content: space-between;
	padding: 20px;
}

.contentSectionGameplay .badge {
	background-size: 40px 45px;
	/*filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.1));	/* This strangely affects tooltip positioning */
	height: 45px;
	width: 40px;
}

.contentSectionGameplay .status {
	background-color: #111;
	border-radius: 4px;
	color: #ffcc58;
	font-weight: bold;
	padding: 4px 6px;
}

.contentSectionGameplay .save {
	position: relative;
	width: 180px;
}

.contentSectionGameplay .save::before {
	border-color: transparent transparent #fdfdc2 transparent;
	border-style: solid;
	border-width: 0 0 83px 50px;
	bottom: -2px;
	content: "";
	height: 0;
	position: absolute;
	right: -2px;
	width: 0;
}

.contentSectionGameplay .save::after {
	border-color: transparent #fdfdc2 transparent transparent;
	border-style: solid;
	border-width: 0 50px 83px 0;
	content: "";
	height: 0;
	position: absolute;
	right: -2px;
	top: -2px;
	width: 0;
}

.contentSectionGameplay .save p {
	color: #7e5a21;
	margin: 1em 0px 1.25em;
}

.contentSectionGameplay .learn {
	background: #e66c00;
	border: 1px solid #e66c00;
	border-radius: 4px;
	color: #fafafa;
	font-weight: bold;
	padding: 4px 12px;
}

.contentSectionGameplay .learn:hover {
	background: #f17f0c;
}

.contentSectionGameplay .leaderboardHeading {
	margin: 48px 0px 12px;
}

.contentSectionGameplay .leaderboardHeading h3 {
	background-color: #fdfdc2;
	font-size: 1rem;	/* 16px */
	margin-bottom: 12px;
	padding: 0px 32px;
}

.contentSectionGameplay .leaderboard {
	background-color: #fefed9;
}

.contentSectionGameplay .leaderboard .title {
	font-size: 1.125rem;	/* 18px */
}

.contentSectionRelatedGames {
	background: #F6F6F6;
	border-top: 1px solid #EEE;
	padding: 32px 0px 48px;
}

.contentSectionRelatedGames h2 {
	color: #6F6F6F;
}

.gameplayItemContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 24px 48px;
}

.gameplayItem {
	padding: 2px;
}

.gameplayItem:hover {
	background-color: #FFF;
	border-radius: 4px;
}

.gameplayItem .image {
	border-radius: 4px;
	display: block;
	height: 140px;
	width: 140px;
}

.gameplayItem .text {
	margin: -2px 0px 0px;
	text-align: center;
	width: 140px
}

/* LEADERBOARD STYLES */

.leaderboardHeading {
	background: url("//static.arcademics.com/images/leaderboardsStar.png") top center repeat-x;
	text-align: center;
}

.leaderboardHeading h2, .leaderboardHeading h3 {
	background-color: #fdf0e3;
	color: #c06000;
	display: inline-block;
	font-size: 1.5rem;	/* 24px */
	margin: calc((1em*1.5 - 14px) / -2) 0px 0px;	/* vertical center: (line height - star image height) / -2 */
	padding: 0px 16px;
	vertical-align: top;
}

.leaderboardFlex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	width: 100%;
}

.leaderboard {
	background-color: #FFF;
	border: 1px solid #EEE;
	flex: 0.3333;
	max-width: 330px;
	min-width: 300px;
}

.leaderboard .title {
	color: #555;
	display: inline-block;
	font-size: 1.25rem;	/* 20px */
	line-height: 41px;	/* vertical center: icon image height */
	margin-left: 10px;
	vertical-align: top;
}

.leaderboard .table {
	height: 336px;
	width: 100%;
}

.leaderboard tr {
	border-bottom: 1px solid #fff7d7;
	height: 28px;
}

.leaderboard tr:last-child {
	border-bottom: none;
}

.leaderboard .icon {
	width: 28px;
}

.leaderboard .icon img {
	display:block;
	margin: 0px auto;
}

.leaderboard .name {
	color: #555;
	font-size: 0.9375rem;	/* 15px */
	max-width: 80px;	/* Needed for ellipsis. Just works. 80px value is irrelevant. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.leaderboard .value {
	color:#cc2036;
	font-size: 0.9375rem;	/* 15px */
	font-variant-numeric: tabular-nums;
	padding: 0px 8px;
	text-align: right;
	white-space: nowrap;
	width: 1%;
}

.leaderboard .badges {
	font-size: 0;	/* Hack to set space width to 0. */
	white-space: nowrap;
	width: 1%;
}

.leaderboard .badges img {
	margin-right: 2px;
}

.leaderboard .flag {
	width: 38px;
}

.leaderboard .flag img {
	display: block;
	margin: 0px auto;
}

/* SHARED STYLES */

.contentSectionArcademics {
	background: #FCFCFC;
	padding: 60px 0px;
}

.contentSectionArcademics .col1 {
	float: left;
	margin: 0px 0px 0px 1%;
	width: 48%;
}

.contentSectionArcademics .col2 {
	float: left;
	margin: 0px 1% 0px 6%;
	width: 44%;
}

.contentSectionArcademics h1 {
	color: #4c4c4c;
	font-size: 1.875rem;	/* 30px */
	margin-bottom: 0.5em;
}

.contentSectionArcademics p {
	margin-bottom: 1.5em;
}

@media screen and (max-width: 760px) {
	.contentSectionArcademics .col1 {
		float: none;
		margin: 0 0 2em;
		text-align: center;
		width: 100%
	}

	.contentSectionArcademics .col2 {
		float: none;
		margin: 0;
		text-align: center;
		width: 100%
	}
}

.contentSectionHere {
	border-top: 1px solid #EEE;
	height: 620px;
}

.contentSectionHere.basic {
	background: url("https://static.arcademics.com/images/overviewBasic.png") no-repeat top center;
}

.contentSectionHere.families {
	background: url("https://static.arcademics.com/images/overviewFamilies.png") no-repeat top center;
}

.contentSectionHere.plus {
	background: url("https://static.arcademics.com/images/overviewPlus.png") no-repeat top center;
}

.contentSectionHere h2 {
	color: #F38C06;
	text-align: center;
}

.contentSectionHere p {
	color: #333333;
	display: inline-block;
	font-size: 0.9375rem;	/* 15px */
	width: 320px;
}

.contentSectionHere p strong {
	color: #e85c25;
	font-weight: bold;
}

/* INCLUDE STYLES */

.contentSectionBadges {
	border-top: 1px solid #EEE;
	padding: 32px 0px;
}

.contentSectionBadges h2 {
	color: #16bc9b;
	text-align: center;
}

.contentSectionBadges p {
	margin-bottom: 2em;
	text-align: center;
}

.contentSectionBadges .cols {
	text-align: center;
}

.contentSectionBadges .col {
	display: inline-block;
	margin: 12px 24px;
}

.contentSectionBadges .title {
	color: #888;
	font-size: 0.75rem;	/* 12px */
	margin-bottom: 1em;
	text-align: center;
}

.contentSectionBadges .badgeWrapper {
	float: left;
	margin: 0px 8px 0px;
}

.contentSectionBadges .badge {
	background-size: 48px 54px;
	filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.1));
	height: 54px;
	width: 48px;
}

.contentSectionBadges .powerUp {
	float: left;
}

.contentSectionBadges .description {
	color: #888;
	font-size: 0.75rem;	/* 12px */
	margin-top: 0.5em;
	text-align: center;
}

.contentSectionBGCA {
	background: #FCFCFC;
	border-top: 1px solid #EEE;
}

.contentSectionBGCA h2 {
	color: #009DE3;
	text-align: center;
}

.contentSectionBGCA h2 img {
	margin-top: -8px;
	vertical-align: middle;
}

.contentSectionBGCA .col1 {
	float: left;
	margin: 0px 2%;
	width: 52%;
}

.contentSectionBGCA .col2 {
	float: left;
	margin: 0px 2%;
	text-align: center;
	width: 40%;
}

.contentSectionInsightful {
	border-top: 1px solid #EEE;
	padding: 32px 0px;
}

.contentSectionInsightful h2 {
	color: #f87941;
	text-align: center;
}

.contentSectionInsightful p {
	margin-bottom: 2em;
	text-align: center;
}

.contentSectionInsightful .chartBox {
	float: left;
	margin: 0px 2%;
	width: 29.33%;
}

.contentSectionInsightful .chartBox .chart {
	height: 90px;
	margin-bottom: 12px;
}

.contentSectionInsightful .chartBox p {
	font-size: 0.75rem;	/* 12px */
}

.contentSectionInsightful #classFluencyChart {
	height: 192px;
	margin: -20px 0px -70px;
}

@media screen and (max-width: 760px) {
	.contentSectionInsightful .chartBox {
		float: none;
		margin: 0px 0px 1em;
		width: 100%;
	}
}

.contentSectionWhat {
	background: #FCFCFC;
	border-top: 1px solid #EEE;
	padding: 32px 0px 48px;
}

.contentSectionWhat h2 {
	color: #b09100;
	margin-bottom: 1.5em;
	text-align: center;
}

.contentSectionWays {
	border-top: 1px solid #EEE;
	padding: 32px 0px;
}

.contentSectionWays h2 {
	color: #3E85AE;
	margin-bottom: 1.5em;
	text-align: center;
}

.contentSectionWays .col {
	float: left;
	margin: 0px 2%;
	width: 46%;
}

.contentSectionWays h3 {
	color: #526A94;
	font-size: 1.125rem;	/* 18px */
	line-height: 27px;	/* vertical center: icon image height */
	padding-left: 30px;
}

.contentSectionWays p {
	margin-bottom: 24px;
	padding-left: 30px;
}

@media screen and (max-width: 760px) {
	.contentSectionWays .col {
		float: none;
		margin: 0px;
		width: 100%;
	}
}

/* QUOTES STYLES */

.quoteBox {
	float: left;
	margin: 0px 1%;
	width: 23%;
}

.quoteBox33 {
	width: 31%;
}

.quoteBox q {
	background: #FEEFA6 url("//static.arcademics.com/images/quoteBox.png") no-repeat 10px 10px;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px;
	display: block;
	color: #80451D;
	line-height: 1.4;
	padding: 16px;
}

.quoteArrow {
	background: url("//static.arcademics.com/images/quoteTag.png") no-repeat 30px 0;
	height: 20px;
}

.quoteImage {
	border-radius: 3px;
	float: left;
	height: 42px;
	width: 42px;
}

.quoteInfo {
	float: left;
	margin-left: 10px;
}

.quoteName {
	color: #ae630e;
	font-size: 1.125rem;	/* 18px */
	line-height: 21px;
}

.quoteDescription {
	color: #E0922A;
}

.quoteBreedlove	{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") 0px 0px;}
.quoteSmeltz	{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -44px 0px;}
.quoteSprankle	{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -88px 0px;}
.quoteWhite		{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -132px 0px;}
.quoteSanchez	{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -176px 0px;}
.quoteSchulte	{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -220px 0px;}
.quoteFoote		{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -264px 0px;}
.quoteWoodward	{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -308px 0px;}
.quoteJill		{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -352px 0px;}
.quoteCaroline	{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -396px 0px;}
.quoteDavid		{background: url("//static.arcademics.com/images/sprites/quotes_20200407.png") -440px 0px;}


/* LOADER STYLES */

.loader {
	animation: loader 1s infinite ease;
	border-radius: 50%;
	font-size: 4px;	/* No browser font scaling. */
	height: 6px;
	margin: -10px auto 4px;
	position: relative;
	width: 6px;
}

@keyframes loader {
	0%, 100%	{box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);}
	12.5%		{box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);}
	25%			{box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);}
	37.5%		{box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);}
	50%			{box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);}
	62.5%		{box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);}
	75%			{box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);}
	87.5%		{box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;}
}

/* NOTIFICATION STYLES */

.notification {
	border: 1px solid #666;
	border-radius: 3px;
	color: #4C4C4C;
	margin: 10px 0px;
	padding: 8px 22px 8px 12px;
	position: relative;
}

.notification .close {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	border: none;
	color: #eee;
	height: 12px;
	line-height: 10px;
	position: absolute;
	right: 4px;
	top: 4px;
	transition: all 0.2s;
	width: 12px;
}

.notification .close:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

.notification .close::after {
	content: "\00d7";
	font-size: 13px;	/* No browser font scaling. */
	font-weight: bold;
	left: 2px;
	position: absolute;
	top: 0;
}

.nError {
	background: #F6C5C6;
	border-color: #EC9B9B;
}

.nInformation {
	background: #C1D8F0;
	border-color: #50B0EC;
}

.nSuccess {
	background: #C8F5AF;
	border-color: #72CB67; 
}

.nWarning {
	background: #FBF38E;
	border-color: #FEDE2F;
}

/* MODAL STYLES */

.modal {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.7);
	display: none;
	height: 100%;
	justify-content: center;
	left: 0;
	opacity: 0;
	padding: 0 10px;
	position: fixed;
	top: 0;
	transition: all 200ms;
	width: 100%;
	z-index: 1;
}

.modalContent {
	border-radius: 4px;
	max-width: 840px;
	position: relative;
}
.modalContent video {
	height: 100%;
	width: 100%;
}

.modalHeader {
	background: #333;
	padding: 0 24px;
}

.modalHeader h2 {
	color: #fff;
	font-size: 1.125rem;	/* 18px */
	font-weight: bold;
	line-height: 50px;
}

.modalHeader .close {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	border: none;
	color: #eee;
	height: 28px;
	line-height: 26px;
	position: absolute;
	right: 8px;
	top: 10px;
	transition: all 0.2s;
	width: 30px;
}

.modalHeader .close:hover {
	background-color: rgba(0, 0, 0, 0.4);
}

.modalHeader .close::after {
	content: "\00d7";
	font-size: 30px;	/* No browser font scaling. */
	font-weight: bold;
	left: 7px;
	position: absolute;
	top: 0;
}

.modalBody {
	background-color: #f9f9f9;
	padding: 20px 24px;
	max-height: calc(100vh - 220px);
	overflow-y: auto;
}

.modalFooter {
	background-color: #f6f6f6;
	border-top: 1px solid #e6e6e6;
	padding: 16px 24px;
}

/* TOOLTIP STYLES */

[data-tooltip] {
	cursor: pointer;
}

.tooltip {
	background-color: #333;
	border-radius: 4px;
	color: #eee;
	font-size: 0.8125rem;	/* 13px */
	margin-top: -6px;
	padding: 8px 12px;
	pointer-events: none;	/* prevents rapid flashing */
	position: absolute;
	text-wrap: nowrap;	/* fixes width when target element position is absolute */
	z-index: 1;
}

.tooltip::after {
	border-color: #333 transparent transparent transparent;
	border-style: solid;
	border-width: 5px;
	content: "";
	left: 50%;
	margin-left: -5px;
	position: absolute;
	top: 100%;
}

/* BUTTON STYLES */

.button {
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.1);	/* for button and input elements */
	border-radius: 4px;
	cursor: pointer;	/* for button and input elements */
	color: #888;
	display: inline-block;	/* for a elements */
	font-weight: bold;
	padding: 8px 28px;
	transition: background-color 0.3s ease;
	text-align: center;
}

.button:hover {
	background: #fff;
	box-shadow: 1px 1px 1px rgb(0 0 0 / 8%);
}

.orangeButton {
	background: #f9a106;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	padding: 8px 28px;
	transition: background-color 0.3s ease;
	text-align: center;
}

.orangeButton:hover {
	background: #ef8d24;
}

.blueButton {
	background: #1ba4e6;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	padding: 8px 28px;
	transition: background-color 0.3s ease;
	text-align: center;
}

.blueButton:hover {
	background: #0990d3;
}

.greenButton {
	background: #0ac775;
	border-radius: 4px;
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	padding: 8px 28px;
	transition: background-color 0.3s ease;
	text-align: center;
}

.greenButton:hover {
	background: #03ab62;
}

/* OTHER STYLES */

.checkMark {
	background: url("//static.arcademics.com/images/checkMark.png") 0px 0px;
	height: 26px;
	width: 26px;
}



@media screen and (max-width: 1366px) {
	.contentSectionBanner {
		background-position: top center;
	}
}

@media screen and (max-width: 1004px) {
	.leaderboard {
		flex: 0.5;
	}
	
	.home .leaderboard.correctInARow {
		display: none;
	}
}

@media screen and (max-width: 960px) {
	.logo, .logoBasic, .logoPlus {
		transform: translate(-10%, 0) scale(0.8, 0.8);
	}
	
	.topNav > ul > li {
		margin: 0px 6px;
	}
	
	.topNav > ul > li > button, .topNav > ul > li > a {
		font-size: 0.8125rem;	/* 13px */
	}
	
	.contentSectionMembership .col1 {
		float: none;
		margin: 0px 0px 1em;
		text-align: center;
		width: 100%;
	}
	
	.contentSectionMembership .col2 {
		float: none;
		margin: 0px;
		text-align: center;
		width: 100%;
	}
}

@media screen and (max-width: 760px) {
	header {
		background: #ffbc47;
		border-bottom: 1px solid #ff9933;
	}
	
	.logo {
		background: url("//static.arcademics.com/images/sprites/main-20241113.png") -212px 0px;
	}
	
	.mobileMenu {
		background: url("//static.arcademics.com/images/sprites/main-20241113.png") -542px 0px;
		display: block;
		margin: 14px 12px 0px 0px;
		height: 19px;
		position: absolute;
		right: 8px;
		top: 6px;
		width: 25px;
	}
	
	.topNav > ul {
		background: #FEB117;
		border-bottom: 1px solid #F93;
		display: none;
		margin: 0px -2%;
		padding-bottom: 0px;
		position: absolute;
		text-align: left;
		width: 100%;
		z-index: 1;
	}
	
	.topNav > ul > li {
		border-top: 1px solid #F93;
		display: block;
		margin: 0px 4px;
		padding-bottom: 0px;
	}
	
	.topNav > ul > li > button {
		background: #FFBC34;
		text-align: left;
		width: 100%;
	}
	
	.topNav > ul > li > button, .topNav > ul > li > a {
		color: #ffffff;
		font-size: 0.9375rem;	/* 15px */
		font-weight: normal;
		padding: 10px 6px;
		text-transform: none;
	}
	
	.topNav > ul > li:hover {
		background: #ffc834;
	}
	
	.topNav > ul > li > button:hover, .topNav > ul > li > a:hover {
		color: #ffffff;
	}
	
	.topNav > ul > li > button::after {
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		right: 10px;
		top: 15px;
	}
	
	.topNav > ul > li > ul {
		background: transparent;
		margin: 0px;
		padding: 0px;
		position: static;
		text-align: left;
	}
	
	.topNav > ul > li > ul:before {
		border: none;
	}
	
	.topNav > ul > li > ul > li {
		background: #FFBC34;
		border-top: 1px solid #F93;
		padding: 6px 12px;
	}
	
	.topNav > ul > li > ul > li:hover {
		background: #ffc834;
	}
	
	.topNav > ul > li > ul a {
		display: block;
		font-weight: normal;
		text-transform: none;
	}
	
	.topNav > ul > li > ul a:hover {
		border-bottom: none;
		color: #ffffff;
	}
	
	.topNav .signUp {
		background: transparent;
		border: none;
		color: #ffffff;
		padding: 10px 6px;
	}
	
	.topNav .signUp:hover {
		background: transparent;
		color: #ffffff;
	}
	
	.topNav .login {
		background: transparent;
		border: none;
		color: #ffffff;
		padding: 10px 6px;
	}
	
	.topNav .login:hover {
		background: transparent;
		color: #ffffff;
	}
	
	.topNav .lock {
		display: none;
	}
	
	footer .description {
		width: 96%;
	}
	
	footer .siteLinks1 {
		width: 30%;
	}
	
	footer .siteLinks2 {
		width: 28%;
	}
	
	footer .followUs {
		width: 30%;
	}
	
	footer .downloadTheApps {
		display: none;
	}
	
	.keywordCloud {
		padding: 0px;
	}
	
	.contentSectionFeature {
		background-position: top left;
	}
	
	.contentSectionApps .col1 {
		float: none;
		margin: 0px 0px 1em;
		text-align: center;
		width: 100%;
	}
	
	.contentSectionApps .col2 {
		float: none;
		margin: 0px;
		text-align: center;
		width: 100%;
	}
	
	.quoteBox {
		float: none;
		margin: 40px 0px;
		width: 100%;
	}
	
	.quoteBox33 {
		width: 100%;
	}
	
	.contentSectionGameplay .left {
		float: none;
		width: 100% !important;
	}
	
	.contentSectionGameplay .right {
		float: none;
		width: 100% !important;
	}
}

@media screen and (max-width: 750px) {
	.leaderboard {
		flex: 1;
	}
	
	.home .leaderboard.mostPoints {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	.contentSectionBGCA .col1 {
		float: none;
		margin: 0px;
		width: 100%;
	}
	
	.contentSectionBGCA .col2 {
		float: none;
		margin: 0px 0px 1em;
		width: 100%;
	}
}