/* GENERIC COLORS: #A2D5F9; 254C78, 2B6E9D,  D7EDFD----------------------- #314755 #26a0da #93b4c9 #c5ebfc*/
/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
*{ /* GENERAL PAGE STYLING ------------------------------------------------------- */
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Raleway', sans-serif, Arial;
	font-size: 14px;
	font-weight: 400;
	color: #254C78;
	transition: all 0.25s ease;
}
html,body {
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	scroll-behavior: smooth;
	background: rgb(162,213,249);
	/*background-image: linear-gradient(to right top, #5761c6, #5679d4, #5c8fe0, #6aa5e9, #7fbaf0, #81c7f6, #85d3fb, #8ddfff, #7de7ff, #6deeff, #62f5fa, #5ffbf1);*/
	background-image: linear-gradient(to right top, #819fff, #79a8ff, #75b0ff, #75b8fe, #78bffb, #72c7fd, #6ecefd, #6dd5fd, #5fdfff, #56e9fd, #55f2f9, #5ffbf1);
	background-repeat: no-repeat;
    background-attachment: fixed;
}


/* HEADER STYLING ---------------------------------------------------------------- */
header {
	overflow: hidden;
	margin: 0px;
	height: 60px;
	max-height: 60px;
	min-width: 300px;
	width: 100%;
	background: rgba(255,255,255,.95);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
}
header img.logo {
	float: left;
	margin: 10px;
	margin-left: 15px;
	height: 40px;
	width: 125px;
}
header form {
	float: right;
	margin: 10px 20px 10px 10px;
	padding: 2px;
	height: 40px;
}
header form input {
	margin-right: 4px;
	margin-left: 4px;
}
@media screen and (max-width: 800px) {
	header form input {
		display: none;
		width: 0px;
	}
	#mobile_navi {
		display: none;
		flex-flow: column nowrap;
	}
}
#notifbubble {
	display: none;
	position: fixed; bottom: -50px; left: 0; z-index: 101;
	width: 100%; padding: 5px;
	background: rgba(0,0,0,.9);
	font-size: 16px; color: #FFFFFF; text-align: center;
	-webkit-box-shadow: 0px 0px 17px 8px #FFFFFF; 
	box-shadow: 0px 0px 17px 8px #FFFFFF;
	padding: 10px;
	user-select: none;
}
/* NAVIGATION MENU STYLING ------------------------------------------------------- */
nav {
	display: inline-flex; align-items: center;
	position: fixed; top: 60px; left: 0; z-index: 99;
	margin: 0px; padding: 0px;
	width: 100%; min-width: 300px; height: 30px; max-height: 30px; line-height: 30px;
	background: rgba(245,245,255,.97);
	-webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.30);
	-moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.30);
	box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.30);
}
#navtoggle {
	display: inline;
	height: 100%; line-height: 100%; margin-left: 25px;
	position: absolute; right: 23px; z-index: 1;
	-webkit-user-select: none; user-select: none;
}
#navtoggle input {
	position: absolute; z-index: 1;
	width: 100%; height: 100%;
	cursor: pointer;
	opacity: 0;
}
#navhamburger {
	display: inline-flex;  align-items: center; justify-content: center;
	flex-direction: column;
}

#navhamburger span {
	position: relative;	z-index: 0;
	width: 22px; height: 2px; margin-bottom: 2px;
	background: #2B6E9D; border-radius: 3px;
	transform-origin: 0px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			  opacity 0.55s ease;
}
#navhamburger span:first-child { transform-origin: 0% 0%; }
#navhamburger span:last-child  { transform-origin: 0% 100%;}
#navtoggle input:checked { transform: translateX(10px) }
#navtoggle input:checked ~ #navhamburger span { opacity: 1; transform: translateX(10px) rotate(45deg) translate(0px, -6px) scale(1.1, 1); background: rgba(200,100,100); }
#navtoggle input:checked ~ #navhamburger span:nth-last-child(2) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
#navtoggle input:checked ~ #navhamburger span:last-child { transform: translateX(10px) rotate(-45deg) translate(0px, 6px) scale(1.1, 1); }
#navtoggle input:checked ~ #mobile_navi { left: 0%; }
#mobile_navi {
	position: fixed; top: 0; left: -90%; z-index: 3;
	display: flex; flex-flow: row wrap;
	overflow-x: hidden;
	width: 90%; height: 100%; background: #FFFFFF;
	list-style: none;
    margin: 0;
	font-size: 0px;
	/*-ms-overflow-style: none;   IE and Edge 
	scrollbar-width: none;  Firefox */
	scrollbar-width: thin;
	scrollbar-color: #2B6E9D #EFEFEF;
}
#mobile_navi::-webkit-scrollbar {
  /* display: none; */
  width: 12px;
}
#mobile_navi::-webkit-scrollbar-track {
  background: #EFEFEF;
}
#mobile_navi::-webkit-scrollbar-thumb {
  background-color: #2B6E9D;
  border-right: 1px solid #EFEFEF;
}

#mobile_navi #mnavi_logo {
	background: #FFFFFF;
	height: 40px; width: 100%;
	margin: 10px 0px 40px 15px;
}
#mobile_navi a { display: inline-block; text-decoration: none;}
#mobile_navi > li {
	margin: 0 0 20px 40px;
}
#mobile_navi > li ul{
	margin: 0 0 20px 30px;
}
#mobile_navi a img {
	line-height: 24px;
}
#mobile_navi li a:hover{
	color: #A2D5F9;
}
#mainnav a:hover img{
	filter: brightness(210%);
}
	
#mobile_navi li ul li a{
	font-weight: 400;
}
#mobile_navi li a, #mobile_navi li span {
	font-weight: 600;font-size: 24px; display: block; margin-bottom: 15px;
}

#mobile_navi ul{
	list-style: none;
}
.menu_divider {
	display: inline-block; width: 1px; height: 60%; border-radius: 1px; background: #A2D5F9; margin-left: 15px; content: '';
}
img.menu_homeico, .menu_ico{ width: 20px; height: 20px; margin-top: 8px; margin-left: 15px; user-select: none;}
img.menu_homeico { display: none; }
/* ------------------------------------------------------------------------------- */
#postdump{
	font-size: 8px;
	display: block;
}

ul.inside {
	list-style-position: inside;
	padding-left: 16px;
}

/* SECTION STYLING --------------------------------------------------------------- */
section {
	width: 100%;
	font-size: 16px;
	line-height: 1.5;
}
section#headspace {	height: 90px;}
section.mainTitle {
	position: relative;
	background: rgb(95,195,251,.8);
	background: linear-gradient(225deg, rgba(55,70,213,.8) 0%, rgba(95,195,251,1) 100%);
	padding: 40px 25px 20px 25px;
}
section.mainblocks {
	position: relative;
	background: rgba(255,255,255,.25);
	padding:20px 25px;
}
section.blankblocks {
	position: relative;
	padding:20px 25px;
}
div.mainblocks_neg {
	margin: 0 -25px; padding: 10px 25px; ;
}
section.mainblocks:nth-of-type(odd) { background: rgba(255,255,255,.65); }

section.prereq {
	position: relative;
	background: linear-gradient(90deg, rgba(37,76,120,1) 50%, rgba(37,76,120,0) 100%);
	/*background: rgba(37,76,120,1);*/
	color: #FFFFFF;
	padding:8px 25px 8px 25px;
}
section.prereq a { color: #FFFFFF; }
section.prereq ul { margin-top: -3px;}
section.prereq ul li { color: #FFFFFF; }
section.lesson {
	position: relative;
	background: rgba(255,255,255,1);
	color: #254C78;
	padding:20px 25px;
}
section.lesson h2 {margin-bottom: 5px;}
section.lessongoal {
	position: relative;
	background-image: linear-gradient(to bottom, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #fefefe, #fcfcfc, #fbfbfb, #f8f8f8, #f4f4f4, #f1f1f1, #eeeeee);
	color: #254C78;
	padding: 10px 0px 10px 25px;
	border-bottom: 1px solid #CCCCCC;
}
section.nextlesson {
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(162,213,249,0) 0%, rgba(255,255,255,1) 50%);
	color: #254C78;
	padding:10px 25px;
	text-align: right;
	
	
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	align-self: flex-end;
	-webkit-box-shadow: 100px -4px 20px 3px rgba(162,213,249,.2);
	-moz-box-shadow: 100px -4px 20px 3px rgba(162,213,249,.2);
	box-shadow: 100px -4px 20px 3px rgba(162,213,249,.2);
	
}
section.nextlesson h3{
	display: inline-block;
}
#worksheets:target {
	animation: grow_pop 1s ease-in-out .2s 1 normal;
}
/* ------------------------------------------------------------------------------- */

/* EXPANDABLE SECTION STYLING --------------------------------------------------------------- */
.expandable{
	width: 100%;
}
.expandable h2 {
	width: 100%;
	padding: 10px;
	background: #D7EDFD;
}
.expandable h2:hover {
	background: #F2FAFF;
}
.expandable h2:active {
	background: #C4E8FF;
}
.expandable h2 span{
	font-size: inherit;
}
.expandable div {
	width: 100%;
	padding: 20px;
	display: none;
	border-left: 3px solid #D7EDFD;
}
/* ------------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------------- */
.disableselect{
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
/* IMAGE STYLING ----------------------------------------------------------------- */
img.logo {
	height: 40px;
	width: 125px;
	user-select: none;
}
img.coreiqtest {
	height: 30px;
	display: inline-block;
	user-select: none;
}

img.ico {
	height: 12px;
	margin-right:3px;
}
img.disp {
	height: 192px;
	width: 192px;
}
img.mathobj {
	width: 32px;
	height: 32px;
	margin-right: 5px;
}
img.mathobj2 {
	width: 50px;
	height: 50px;
	margin-right: 5px;
}
img.mathobj2:hover {
	width: 52px;
	height: 52px;
	margin-right: 5px;
}
img.mathobj2:active {
	width: 49px;
	height: 49px;
	margin-right: 5px;
}
a.worksheet img{
	background: #FFFFFF;
	border: 1px dashed #254C78;
	border-radius: 6px;
	margin-right: 5px;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(255,255,255,.1);
	-moz-box-shadow: 5px 5px 10px 0px rgba(255,255,255,.1);
	box-shadow: 5px 5px 10px 0px rgba(255,255,255,.1);
}
a.worksheet:hover img{
	background: #254C78;
	-webkit-box-shadow: 2px 2px 10px 5px rgba(255,255,255,1);
	-moz-box-shadow: 2px 2px 10px 5px rgba(255,255,255,1);
	box-shadow: 2px 2px 10px 5px rgba(255,255,255,1);
}
.imgFig {
	display:block;
	width: 70%; max-width: 500px;
	margin: 15px 15% 0px 15%;
}
.imgFigSpan {
	display:block;
	width: 70%;
	margin: 0px 15% 15px 15%;
	font-size: 11px;

}

/* ACTIVITY DIV STYLING */
div.activity {
	width:93px;
	height:120px;
	position: relative;
	border-radius: 6px;
	margin-right: 16px;
	display: inline-block;
}
div.activity:last-child{
	margin-right: 0px;
}
div.activity span.title{
	opacity:0;
	padding: 5px;
	position: absolute;
	top:0;
	left:0;
	font-weight: 500;
	user-select: none;
	pointer-events: none;
}
div.activity img{
	width:93px;
	height:120px;
	border: 1px dashed #254C78;
	border-radius: 6px;
	margin-right: 5px;
	cursor: pointer;
		-webkit-box-shadow: 0px 2px 2px 1px rgba(50,50,50,.15), 0px 4px 8px 1px rgba(100,100,100,.05);
	-moz-box-shadow: 0px 2px 2px 1px rgba(50,50,50,.15), 0px 4px 8px 1px rgba(100,100,100,.05);
	box-shadow: 0px 2px 2px 1px rgba(50,50,50,.15), 0px 4px 8px 1px rgba(100,100,100,.05);
}
div.activity img.worksheet{
	border: 1px solid #ffbf00;
}
div.activity:hover img{

	opacity: 0.10;
}
div.activity:hover span.title{
	opacity:1;
}

button.a_button {
	display: inline-block;
	border-radius: .25rem;
	border-style: 1px solid #254C78;
	color: #254C78;
	padding: 8px;
	background: rgb(215,237,253);
    font-size: 24px;
    z-index: 1;
	margin: 5px;
	float: left;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(162,213,249,.1);
	-moz-box-shadow: 2px 2px 5px 0px rgba(162,213,249,.1);
	box-shadow: 2px 2px 5px 0px rgba(162,213,249,.1);
}
button.a_button:hover {
    font-size: 24px;
	-webkit-box-shadow: 2px 2px 5px 2px rgba(162,213,249,1);
	-moz-box-shadow: 2px 2px 5px 2px rgba(162,213,249,1);
	box-shadow: 2px 2px 5px 2px rgba(162,213,249,1);
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
}
button.a_button:active{
    font-size: 24px;
	-webkit-box-shadow: 2px 2px 5px 2px rgba(162,213,249,1);
	-moz-box-shadow: 2px 2px 5px 2px rgba(162,213,249,1);
	box-shadow: 2px 2px 5px 2px rgba(162,213,249,1);
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
}

/* ------------------------------------------------------------------------------- */
/* OTHER GENERIC STYLING --------------------------------------------------------- */
br { user-select: none; }
a { font-size: inherit; font-color: inherit; }
.min-h { min-height: 400px; }
.dropshadow, .dropshadow_h {
	-webkit-box-shadow: 0px 2px 2px 1px rgba(50,50,50,.15), 0px 4px 8px 1px rgba(100,100,100,.05);
	-moz-box-shadow: 0px 2px 2px 1px rgba(50,50,50,.15), 0px 4px 8px 1px rgba(100,100,100,.05);
	box-shadow: 0px 2px 2px 1px rgba(50,50,50,.15), 0px 4px 8px 1px rgba(100,100,100,.05);
}
.dropshadow_h:hover {
	-webkit-box-shadow: 0px 2px 2px 1px rgba(50,50,50,.15), 0px 4px 8px 1px rgba(100,100,100,.05);
	-moz-box-shadow: 0px 2px 2px 1px rgba(50,50,50,.15), 0px 4px 8px 1px rgba(100,100,100,.05);
	box-shadow: 0px 2px 2px 1px rgba(50,50,50,.35), 0px 4px 8px 1px rgba(100,100,100,.25);
}
.dropshadow2 {
	-webkit-box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.2), 0px 8px 5px 5px rgba(215,237,253,0.5); 
	box-shadow: 0px 5px 10x 5px rgba(0,0,0,0.2), 0px 8px 5px 5px rgba(215,237,253,0.5);
}
.dpshadow {
	filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45)) drop-shadow(0 2px 2px rgba(0,0,0,0.25));
}
.pad_b { padding-bottom: 50px; }
.pad_b8 { padding-bottom: 8px; }
.pad_t20 { padding-top: 20px; }
.pad_r16{ padding-right: 16px; }
.pad_r25{ padding-right: 25px; }
.pad_l16{ padding-left: 16px; }
.margin_tb { margin-top: 16px; margin-bottom: 16px; }
.margin_tb8 { margin-top: 8px; margin-bottom: 8px; }
.margin_lr8 { margin-left: 8px; margin-right: 8px; }
.margin_lr { margin-left: 16px; margin-right: 16px; }
.margin_l { margin-left: 16px; }
.margin_r { margin-right: 16px; }
.margin_l8 { margin-left: 8px; }
.margin_r8 { margin-right: 8px; }
.fc_w{ color: #FFFFFF;}
.fs12 { color: inherit; font-size: 12px; }
.fs16 { color: inherit; font-size: 16px; }
.fs20 { color: inherit; font-size: 20px; }
.fs32 { color: inherit; font-size: 32px; }
.fs64 { color: inherit; font-size: 64px; }
.fs96 { color: inherit; font-size: 96px; }
.italic { font-style: italic;}
.bold { font-size: inherit; font-weight: 600; }
.ta_c{ text-align: center; }
.ta_r{ text-align: right; }

.flex_container{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	padding: 0;
	margin: 0;
	list-style: none;
}
.flex_item {
	background: rgba(255,255,255, 1);
	padding: 16px;
	width: 300px;
	margin-top: 10px;
	text-align: center;
	border-radius: 3px;
	align-items: center;
}
div.importantwhite{
	width: 100%;
	background: rgba(255,255,255, 1);
	border-radius: 5px;
	padding: 10px;
	margin: 5px;
}
div.importanthighlight{
	width: 100%;
	background: rgba(255,255,235, 1);
	border-radius: 5px;
	padding: 10px;
	margin: 5px;
}
div.roundblocks {
	background: #FFFFFF;
	border-radius: 5px;
	padding: 15px 20px;
}
.inline {
	display:inline-block;
}
span.emptitle {
	color: inherit;
	font-size: 51px;
	font-weight: 400;
	letter-spacing: 0.1em;
}

h1 { color: inherit; font-size: 34px; font-weight: 800; }
h2 { color: inherit; font-size: 20px; font-weight: 700; }
h3 { color: inherit; font-size: 16px; font-weight: 600; }
h1.whitetitle {
  text-shadow: 0px 1px 3px #254C78;
  color: #FFFFFF;
}

p { color: inherit; font-size: 16px; line-height: 1.5; text-indent: 32px; }
span { font-size: 16px; }
p.pad { padding: 8px 0px; }

input:focus,
select:focus,
textarea:focus,
button:focus { outline: none; }

input {
	border-radius: .25rem;
	border-style: solid;
	border-width: 1px;
	border-color: #2B6E9D;
	padding: 8px;
}
input::-webkit-input-placeholder { color: rgba(220,210,210,1); }
input:-ms-input-placeholder  { color: rgba(220,210,210,1); }
input::placeholder { color: rgba(220,210,210,1); }

input:focus {
	-webkit-box-shadow: inset 1px 1px 10px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 1px 1px 10px -6px rgba(0,0,0,0.75);
	box-shadow: inset 1px 1px 10px -6px rgba(0,0,0,0.75);
}
.redboxshadow {
	-webkit-box-shadow: 0px 2px 2px 1px rgba(204,22,32,.15), 0px 4px 8px 1px rgba(242, 99, 99,.05);
	-moz-box-shadow: 0px 2px 2px 1px rgba(204,22,32,.15), 0px 4px 8px 1px rgba(242, 99, 99,.05);
	box-shadow: 0px 2px 2px 1px rgba(204,22,32,.45), 0px 4px 8px 1px rgba(242, 99, 99,.2);
}
button {
    display: inline-block;
	border-radius: .25rem;
	border-style: none;
	padding: 8px;
    color: #FFFFFF;
	background: rgb(37,76,120);
	background: linear-gradient(180deg, rgba(37,76,120,1) 0%, rgba(43,110,157,1) 100%);
    font-size: 14px;
    letter-spacing: .15rem;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
button:hover {
	font-size: 16px;
	background: rgb(43,110,157);
	background: linear-gradient(180deg, rgba(43,110,157,1) 0%, rgba(37,76,120,1)100%);
}
button:active{
	font-size: 13px;
	background: rgb(48,123,175);
	background: linear-gradient(180deg, rgba(43,110,157,1) 50%, rgba(37,76,120,1) 100%);
}

.va_c{ position: absolute; top: 50%; transform: translate(0, -50%); }
.floatclear { clear: both; float:none; }
.floatclear:after { content:" ";clear: both; float:none; display: table;}
/* ------------------------------------------------------------------------------- */


/* LESSON PAGE STYLING ----------------------------------------------------------- */
.mainprogressTitle{ }
.mainprogressTitle h3{ float: left; color: inherit;}
.mainprogressTitle div{ float: right; color: inherit; }
.mainprogressTitle span{  color: inherit; font-size: 16px; font-weight: 600; }
.mainprogressIconsContainer{
	position: relative; z-index:2;
	height: 5px; width: 100%; 
	margin: 5px 0px 0px 0px;  
}
.mainprogressContainer{
	position: relative; overflow: hidden; 
	border: 2px solid rgba(255,255,255,1); border-radius: 10px; background: rgb(240,240,245, 0);
	height: 15px; width: 100%; margin: 0px 0px 15px 0px;   
	-webkit-box-shadow: 0px 1px 3px 1px rgba(37, 76, 120,1);
	-moz-box-shadow: 0px 1px 3px 1px rgba(37, 76, 120,1);
	box-shadow: 0px 1px 3px 1px rgba(37, 76, 120,1);
}

.mainprogressBar{
	position: absolute; top: 0; left: 0;
	background: rgb(255,255,255, .95);
	background: linear-gradient(90deg, rgba(255,255,255, 1) 0%, rgba(255,255,255, .95) 100%);
	min-width: 100%; min-height: 15px; max-height: 15px;
	user-select: none;
}
.mainprogressIcon{
	height: 25px; width: 25px;
	position: absolute; 
	margin-left: -13px;
	margin-top: -10px;
	user-select: none;
	box-shadow: 0px 1px 3px -3px rgba(255, 255, 255,1);
}
	
ul.lessonlist {
	position: relative;
	list-style: none;
	margin-left: 15px;
	padding-left: 1.2em;
	transition: all 0.3s ease;
}
ul.lessonlist li {
	margin: 5px 10px 5px 5px;
	padding: 4px 14px;
	border-radius: 5px;
	background: #A2D5F9;
	-webkit-box-shadow: 0px 1px 3px 1px rgba(37, 76, 120,1);
	-moz-box-shadow: 0px 1px 3px 1px rgba(37, 76, 120,1);
	box-shadow: 0px 1px 3px 1px rgba(240,240,245,1);
}
ul.lessonlist li:hover, ul.lessonlistflex li:hover  {
	cursor: pointer;
	font-weight: 600;
}
ul.lessonlist li:before {
	position: absolute; left: 0;
	content: "\2022";
	font-size: 30px;
	line-height: 16px;
}
ul.lessonlist li.completed:before, ul.lessonlistflex li.completed:before {
	color: green;
	font-size: 16px;
	content: "\2714";
}
ul.lessonlist li span, ul.lessonlistflex li span  { display: none; }


ul.lessonlistflex {
	display: flex;
	flex-flow: row wrap;
	position: relative;
	list-style: none;
	margin-left: 0px;
	padding-left: 1.2em;
}

ul.lessonlistflex li {
	margin: 5px 10px 5px 5px;
	padding: 4px 14px 4px 25px;
	border-radius: 5px;
	background: #A2D5F9;
	-webkit-box-shadow: 0px 1px 3px 1px rgba(37, 76, 120,1);
	-moz-box-shadow: 0px 1px 3px 1px rgba(37, 76, 120,1);
	box-shadow: 0px 1px 3px 1px rgba(240,240,245,1);
}

ul.lessonlistflex li:before {
	position: absolute; left: 1;
	margin-left: -17px;
	margin-top: 2px;
	content: "\2022";
	font-size: 30px;
	line-height: 16px;
}


#practiceid { display: none;}
/* ------------------------------------------------------------------------------- */
/* BUTTONSTYLES------------------------------------------------------------------- */
.anibtn {
	transition: .2s ease;
	padding: 5px 10px;
	background-image: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
	background-image: -moz-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
	background-image: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
	background-image: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
	background-image: linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
	-webkit-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
	-moz-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
	box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
	border: solid 1px rgba(112,112,112,1);
	border-radius: 2px;
	display: inline-block;
	color: rgba(0,0,0,1);
}
.anibtn:hover {
	animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
   background-image: -webkit-linear-gradient(top, rgba(234,246,253,1) 0%,rgba(217,240,252,1) 50%, rgba(190,230,253,1) 50%,rgba(167,216,245,1) 100%);
   background-image: -moz-linear-gradient(top, rgba(234,246,253,1) 0%,rgba(217,240,252,1) 50%, rgba(190,230,253,1) 50%,rgba(167,216,245,1) 100%);
   background-image: -ms-linear-gradient(top, rgba(234,246,253,1) 0%,rgba(217,240,252,1) 50%, rgba(190,230,253,1) 50%,rgba(167,216,245,1) 100%);
   background-image: -o-linear-gradient(top, rgba(234,246,253,1) 0%,rgba(217,240,252,1) 50%, rgba(190,230,253,1) 50%,rgba(167,216,245,1) 100%);
   background-image: linear-gradient(top, rgba(234,246,253,1) 0%,rgba(217,240,252,1) 50%, rgba(190,230,253,1) 50%,rgba(167,216,245,1) 100%);
   -webkit-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
   box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
   border: solid 1px rgba(60,126,177,1);
}
.anibtn:active {
   background-image: -webkit-linear-gradient(top, rgba(234,246,253,1) 0%,rgba(196,229,246,1) 50%, rgba(152,208,239,1) 50%,rgba(104,178,218,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(234,246,253,1) 0%,rgba(196,229,246,1) 50%, rgba(152,208,239,1) 50%,rgba(104,178,218,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(234,246,253,1) 0%,rgba(196,229,246,1) 50%, rgba(152,208,239,1) 50%,rgba(104,178,218,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(234,246,253,1) 0%,rgba(196,229,246,1) 50%, rgba(152,208,239,1) 50%,rgba(104,178,218,1) 100%);
   background-image:         linear-gradient(top, rgba(234,246,253,1) 0%,rgba(196,229,246,1) 50%, rgba(152,208,239,1) 50%,rgba(104,178,218,1) 100%);
   -webkit-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
   box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
   border: solid 1px rgba(44,98,139,1);
}

/* ------------------------------------------------------------------------------- */
/* SECTION TEST SCREEN STYLING --------------------------------------------------- */
section#testScreen {
	display: none; overflow: hidden;
	position: fixed; top: 0; left: 0; z-index: 100;
	width: 100%; height: 100%;
}
#testScreenContainer {
	position: fixed; top: 5%; left: 5%; z-index: 101;
	width: 90%; height: 90%; 
	margin: 0px; padding: 0px;
	background: #FFFFFF;
}
#testScreenContent {
	position: relative;
	width: 100%; height: 100%; 
	margin: 0px; padding: 0px;
}
#testScreenBackground {
	position: fixed; top: 0; left: 0; z-index: 100;
	width: 100%; height: 100%; 
	background: rgba(0,0,0,.7);
}
button#testScreenClose {
	position: absolute; top:0; right: 0; z-index: 99;
    display: inline-block; overflow: hidden; height: 20px;
	border-style: none; border-radius: 0px 0px 0px 5px;
	background: rgb(240,240,240); padding: 4px;
    font-size: 10px; font-weight: 300; color: #254C78; 
}
button#testScreenClose:hover {
	background: rgb(173,66,66); 
	color: #FFFFFF;
}
	

.testLayoutHeader{ flex: 0 1 24px; }
.testLayoutContainer { display: flex; flex-flow: column; height: 100%; }
.testLayoutContainer h2 { flex: 0 1 18px; padding-left:2.5%; font-size: 18px }
.testLayoutContent { flex: 1 1 auto; display: flex; align-items: stretch ; justify-content: center; width: 100%; height: 100%; overflow: auto; position: relative;}
.testLayoutContent h3 { font-size: 13px }

.progressHeader{
	position: absolute; top: 0; left: 0; 
	height: 24px; width: 100%; padding: 5px 5px; margin-bottom: 24px; 
	background: #FFFFFF; 
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); 
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); 
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30);
}
.progressIconsContainer{
	position: relative; z-index:2;
	height: 5px; width: 90%; 
	margin: 15px 5% 0px 5%;  
}
.progressContainer{
	position: relative; overflow: hidden; 
	border: 1px solid rgba(221,221,221,.5); border-radius: 10px; background: rgb(240,240,245);
	height: 5px; width: 90%; margin: 0px 5% 15px 5%;   
}
.progressBar{
	position: absolute; top: 0; left: 0;
	background: rgb(37,76,120);
	background: linear-gradient(90deg, rgba(37,76,120,1) 0%, rgba(107,177,255,1) 100%);
	min-width: 60%; min-height: 5px; max-height: 5px;
	user-select: none;
}
.progressIcon{
	height: 15px; width: 15px;
	position: absolute; 
	margin-left: -10px;
	-webkit-box-shadow: 0px 0px 4px 2px rgba(255,255,255,.5);
	-moz-box-shadow: 0px 0px 4px 2px rgba(255,255,255,.5);
	box-shadow: 0px 0px 14px 2px rgba(255,255,255,.5);
	user-select: none;
}
.piconWhite{ filter: opacity(100%) grayscale(100%) brightness(230%); }
.piconBronze{ filter: hue-rotate(200deg) opacity(100%) brightness(170%); }
.piconSilver{ filter: opacity(100%) grayscale(100%) brightness(230%); }
.piconGold{ filter: hue-rotate(200deg) opacity(100%) brightness(230%); }
/*display: flex; align-items: center; justify-content: center; width: 100%;  overflow: auto;*/
.progressIcon60{ left: 60%; }
.progressIcon80{ left: 80%; }
.progressIcon100{ left: 100%; }

.checkAnswerContainer{
	flex: 0 1 40px;
	align-self: flex-end;
	position: relative; 
	background: rgba(221,221,221,.5);
	width: 100%;
	height: 40px;
}
.checkAnswerContainer button{
	position: absolute; right:0; top: 50%; transform: translate(0, -50%); overflow: hidden; z-index: 1;
	border-style: none; border-radius: .25rem;
	padding: 4px; margin-right: 10px;
	background: rgb(37,76,120); background: linear-gradient(180deg, rgba(37,76,120,1) 0%, rgba(43,110,157,1) 100%);
    font-size: 12px; color: #FFFFFF; letter-spacing: .15rem;
}
.checkAnswerContainer button:hover{
	position: absolute; right:0; top: 50%; transform: translate(0, -50%); overflow: hidden; z-index: 1;
	border-style: none; border-radius: .25rem;
	padding: 4px; margin-right: 10px;
	background: rgb(37,76,120); background: linear-gradient(180deg, rgba(37,76,120,1) 0%, rgba(43,110,157,1) 100%);
    font-size: 12px; color: #FFFFFF; letter-spacing: .15rem;
}
.checkAnswerContainer button:hover {
	font-size: 14px;
	background: rgb(43,110,157);
	background: linear-gradient(180deg, rgba(43,110,157,1) 0%, rgba(37,76,120,1)100%);
}
.checkAnswerContainer button:active{
	
	font-size: 13px;
	background: rgb(48,123,175);
	background: linear-gradient(180deg, rgba(43,110,157,1) 50%, rgba(37,76,120,1) 100%);
}

.testUl {
	list-style: none;
}
.testUl li {
	font-size: 32px;
	background: #F8F8F8;
	border: 1px dotted #DDDDDD;
	display: inline-block;
	padding: 8px;
	margin: 4px;
	min-width: 50px;
	text-align: center;
}
#testContent { width: 100%;height: 100%; padding: 20px 30px 0px 30px; }
#testContent h3 { margin: 0px 0px 5px 0px; }
#testContent label { display: inline-block;  }
#testContent label input {display: none;}
#testContent label span {
	display: inline-block;
	background:#F8F8F8; border: 1px dotted #DDDDDD;
	margin: 1px 4px 1px 4px; padding: 8px;
	min-width: 50px;
	font-size: 26px; text-align: center;
	user-select: none;
}
#testContent input:checked + span { background: #D7EDFD; border-color: #A2D5F9; }
#testResponse {
	position: absolute; top: 0; z-index:2; display: none; align-items: center; justify-content: center; 
	background: #FFFFFF;
	width: 100%; height: 100%; padding: 30px;

}
#responseText {	font-size: 60px; font-weight: 800; width: 100%; height: 100%; text-align: center; }
#achievementimg { height: 125px; position: absolute; top: 0; right: 0;}
/*
	background: linear-gradient(to left bottom, #5761c6, #5679d4, #5c8fe0, #6aa5e9, #7fbaf0, #81c7f6, #85d3fb, #8ddfff, #7de7ff, #6deeff, #62f5fa, #5ffbf1);
	color: linear-gradient(to left bottom, #5761c6, #5679d4, #5c8fe0, #6aa5e9, #7fbaf0, #81c7f6, #85d3fb, #8ddfff, #7de7ff, #6deeff, #62f5fa, #5ffbf1);
	border-radius: 20px; width: 50%; height: 50%; padding: 15px;
	*/
}
/* ------------------------------------------------------------------------------- *//* ------------------------------------------------------------------------------- */
a.same{
	font-size: inherit; font-family: inherit;font-weight: inherit;
}
#container_privacypolicy {
	display: none;
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 9000;
}
#notif_background {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	background: linear-gradient(0deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 100%);
	z-index: 9001;
}
#notif_privacypolicy {
	text-align: justify;
	position: fixed;
	bottom: 0; left: 0;
	background: #FFFFFF;
	width: 100%;
	z-index: 9002;
	box-shadow: 0px 0px 8px 1px rgba(204, 204, 204,1), 0px -1px 10px 2px rgba(204, 204, 204,.5);
}
#notif_privacypolicy div{
	display: block;
	margin: 20px 10%;
	width: 80%;
}
#notif_privacypolicy span{
	display: inline-block;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 50px;
}
#accept_container {
	position: absolute; bottom: 0;
	text-align: right;
}
@keyframes privacypolicy_show {
  0% { bottom: -30%; }
  100% { bottom: 0;}
}
@keyframes privacypolicy_hide {
  0% { bottom: 0%; }
  100% { bottom: -50%;}
}
.pp_show {
	animation: privacypolicy_show .4s cubic-bezier(0.5, 0.2, 0.3, 1.0) 0s normal 1 forwards;
}
.pp_hide {
	animation: privacypolicy_hide .4s cubic-bezier(0.5, 0.2, 0.3, 1.0) 0s normal 1 forwards;
}
/*------------------------------------------------------------------------------- */
.worksheettitle {
	position: -webkit-sticky; position: sticky; top: 30px;
	margin: 0 -25px; margin-top: -20px; padding: 10px 0px 10px 25px;
	background: rgba(207,234,254,1); 
	background: linear-gradient(90deg, rgba(37,76,120,1) 100%, rgba(37,76,120,0) 100%);
	border-bottom: 1px solid rgba(79,116,123,.1);
	color: #FFFFFF;
	z-index: 1;
}
.worksheettitle a {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}
.worksheettitle a:hover {
	text-decoration: underline;
}

.graphic_speechbubble_br {
	position: relative; z-index: 1;
	min-width: 100px;
	background: #FFF;
	color: #254C78;
	border-radius: 10px;
}
.graphic_speechbubble_br::after {
	transform: rotate(125deg);
	content: ""; width: 0px; height: 0px;
	position: absolute; bottom: -6px; right: 3px; z-index: -1;
	border-radius: 5px;
	border-left: 10px solid transparent;
	border-right: 10px solid #FFF;
	border-top: 10px solid #FFF;
	border-bottom: 10px solid transparent;
	
}
.maxw{ margin: 0 auto; width: 85%; }
@media screen and (max-width: 800px) { .maxw{ width: 100%; } }

/*------------------------------------------------------*/
.safarifix_overflow {
	-webkit-backface-visibility: hidden; 
	-moz-backface-visibility: hidden; 
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-transform: translate3d(0, 0, 0);
}