body{
	margin: 0;
	padding: 0;
	background: #f0f0f0;
	color: #777;
	font-family: netto;
}
@font-face{
	font-family: netto;
	src: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Ffonts%2FNettoOT.otf");
}
@font-face{
	font-family: netto-light;
	src: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Ffonts%2FNettoOT-Light.otf");
}
@font-face{
	font-family: aleo;
	src: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Ffonts%2FAleo-Light.otf");
}
@font-face{
	font-family: netto-black;
	src: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Ffonts%2FNettoOT-Black.otf");
}
@font-face {
	font-family: aleo-bold;
	src: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Ffonts%2FAleo-Bold.otf");
}
@@font-face {
	font-family: timeburner;
	src: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Ffonts%2Ftimeburnernormal.ttf");
}
.overlay{
	width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: #000;
    opacity: 0;
    //visibility: hidden;
	transition: 1s;
}
.close-pop{
	width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-weight: 900;
    //font-family: arial;
    border: 3px solid white;
    top: -14px;
    right: -14px;
    position: fixed;
    z-index: 13;
    line-height: 21px;
    text-align: center;
    font-size: 14pt;
}
.close-pop img{
	width: 15px;
	height: 15px;
	margin-left: 0px;
	margin-top: 6.5px;
}
.close-pop:hover{
	background: #000;
	cursor: pointer;
}
.lesson-container{
	//visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: -1;
	background: white;
	//border-radius: 10px;
	width: 50%;
	min-width: 675px;
	height: auto;
	top: 50%;
	left: 25%;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
	transition: 1s;
	transform: translate(0, -50%);
}
.lesson-head{
	height: 100px;
	//line-height: 100px;
	margin: 0 auto;
	text-align: center;
	color: #777;
	font-size: 32px;
	position: relative;
	font-weight: bold;
	background: #f5e90f;
	//border-top-left-radius: 10px;
	//border-top-right-radius: 10px;
	color: black;
}
.lesson-head span{
	display: inline-block;
	float: left;
	line-height: 100px;
	height: 100%;
	width: calc(100% - 260px);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lesson-head img{
	display: inline-block;
	float: left;
	height: 80px;
	margin-top: 10px;
	margin-left: 50px;
}
.lesson-head img:last-child{
	margin-left: 0;
	margin-right: 50px;
}
.lesson-body{
	padding: 20px 40px;
	width: calc(100% - 80px);
	height: calc(100% - 140px);
	overflow: auto;
}
.lesson-body p{
	font-size: 18px;
	line-height: 30px;
	text-indent: 40px;
}
.lesson-body p img{
	height: 30px;
	display: inline-block;
	vertical-align: middle;
}
.welcome-code{
	//visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: -1;
	background: white;
	//border-radius: 10px;
	width: 50%;
	min-width: 675px;
	height: auto;
	top: 50%;
	left: 25%;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
	transition: 1s;
	transform: translate(0, -50%);
}
.welcome-head{
	height: 100px;
	//line-height: 100px;
	margin: 0 auto;
	text-align: center;
	color: #777;
	font-size: 32px;
	position: relative;
	font-weight: bold;
	background: #f5e90f;
	//border-top-left-radius: 10px;
	//border-top-right-radius: 10px;
	color: black;
}
.welcome-head span{
	display: inline-block;
	float: left;
	line-height: 100px;
	height: 100%;
	width: calc(100% - 260px);
	text-align: center;
}
.welcome-head img{
	display: inline-block;
	float: left;
	height: 80px;
	margin-top: 10px;
	margin-left: 50px;
}
.welcome-head img:last-child{
	margin-left: 0;
	margin-right: 50px;
}
.welcome-body{
	padding: 20px 40px;
	width: calc(100% - 80px);
	height: calc(100% - 140px);
	overflow: auto;
}
.welcome-body p{
	font-size: 18px;
	line-height: 30px;
	text-indent: 40px;
}
.class-label {
	font-weight: bold;
	font-size: 14px;
}
#completed{
	display: none;
}
#incomplete{
	display: none;
}
#incomplete hr{
	border: 0;
    height: 0;
    border-top: 1px solid #777;
    //border-bottom: 1px solid rgba(255, 255, 255, 0.7);
	//margin-top: 30px;
}
.hint-img{
	display: block;
	margin: 0 auto;
	margin-top: 18px;
	margin-bottom: 18px;
	max-width: 520px;
	max-height: 250px;
}
#beginning{
	display: none;
}
#slide2{
	display: none;
}
#com{
	right: calc(50% - 214px);
	top: calc(50% - 156.5px);
}
#com1{
	right: calc(50% - 193px);
	top: calc(50% - 222.5px);
}
.header-container{
	width: 100%;
	min-width: 970px;
	height: 60px;
	box-shadow: 0px 5px 15px 5px #e3e3e3;
}
#logo{
	text-decoration: none;
	height: 60px;
	margin-left: 50px;
	display: inline-block;
	float: left;
}
#logo img{
	height: 35px;
	margin-top: 12.5px;
}
.lesson-progress{
	position: absolute;
	width: auto;
	top: 0;
	text-align: center;
	height: 60px;
	left: calc(50% - 150px);
}
.lesson-progress p{
	font-size: 24px;
	color: #fff;
	margin: 0;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 1px;
}
.links-wrapper{
	display: inline-block;
	height: 19px;
}
.lesson-progress a{
	display: inline-block;
	float: left;
	width: 17px;
	height: 17px;
	background: white;
	border-radius: 50%;
	color: black;
	font-size: 11px;
	text-decoration: none;
	line-height: 18.5px;
	margin-right: 8px;
	font-weight: 900;
	text-align: center;
}
.lesson-progress a:last-child{
	margin-right: 0 !important;
}
#future{
	//box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.5);
}
#finished{
	background: green;
	//box-shadow: inset 0px 0px 8px rgba(0, 50, 0, 0.5);
	border: 1px solid rgba(0, 50, 0, 0.5);
	color: white;
}
#current{
	//box-shadow: inset 0px 0px 6px rgba(0, 90, 0, 1);
	border: 1px solid rgba(0, 90, 0, 0.5);
	background: white;
	color: green;
}
#playground{
	font-size: 32px;
	margin-top: 8.5px;
	font-family: aleo;
	color: #fff;
}
#in-popup-no{
	position: relative;
	background: #999;
	bottom: 0;
	left: calc(50% - 75px);
	margin-bottom: 18px;
}
#in-popup-green{
	background: green;
	position: relative;
	bottom: 0;
	left: calc(50% - 75px);
	margin-bottom: 18px;
}
#in-popup-yes{
	position: relative;
	background: purple;
	bottom: 0;
	left: calc(50% - 75px);
	display: block;
	margin-bottom: 18px;
}
#profile_link{
	float: right;
	display: inline-block;
	margin-right: 50px;
	height: 60px;
	text-decoration: none;
	line-height: 60px;
	color: black;
	font-weight: bold;
	font-size: 18px;
	font-family: netto;
}
#profile_link:hover{
	text-decoration: underline;
}
#profile_link_2{
	float: right;
	display: inline-block;
	margin-right: 0px;
	height: 60px;
	text-decoration: none;
	line-height: 60px;
	color: black;
	font-weight: bold;
	font-size: 18px;
	font-family: netto;
}
#profile_link_2:hover{
	text-decoration: underline;
}
.main-container{
	width: 100%;
	min-width: 970px;
	position: absolute;
	height: calc(100% - 60px);
	height: -moz-calc(100% - 60px);
}
.code-container{
	width: 60%;
	height: 100%;
	display: inline-block;
	float: left;
}
.tabs-container{
	width: calc(100% - 50px);
	height: 20px;
	padding-top: 15px;
	overflow: hidden;
	margin-left: 50px;
}
.tab{
	display: inline-block;
	float: left;
	width: 115px;
	height: 100%;
	background: white;
	margin-right: 10px;
	-webkit-user-select: none;
}
.tab:hover{
	cursor: pointer;
}
.tab p{
	margin: 0;
	width: 90px;
	text-align: left;
	padding: 0 12.5px;
	overflow: hidden;
	line-height: 23px;
	font-weight: bold;
}
.tab p a{
	display: inline-block;
	float: right;
	width: 12.5px;
	height: 12.5px;
	margin: 3.75px 0;
	border-radius: 50%;
}
.tab p a img{
	width: 12.5px;
	height: 12.5px;
}
.swap{
	display: inline-block;
	float: right;
	width: 115px;
	height: 100%;
	background: white;
	margin-right: 50px;
	-webkit-user-select: none;
}
.swap p{
	margin: 0;
	width: 90px;
	text-align: center;
	padding: 0 12.5px;
	overflow: hidden;
	line-height: 23px;
	font-weight: bold;
}
.swap:hover{
	cursor: pointer;
}
#on-display{
	width: 275px;
	display: inline-block;
	float: left;
	height: calc(100% - 40px);
	padding-left: 25px;
	overflow: auto;
}
#on-display div{
	white-space: nowrap;
}
.editor{
	width: calc(100% - 50px);
	height: calc(100% - 80px);
	background: white;
	padding: 20px 0px 20px 50px;
	display: none;
	overflow-y: auto;
}
.js-inter{
	display: inline-block;
	float: left;
	width: calc(100% - 195px) !important;
}
.js-editor{
	width: 100% !important;
	height: calc(50% - 52.5px) !important;
}
.instruct{
	width: 100% !important;
	height: calc(50% - 52.5px) !important;
	background: white;
	margin-top: 25px;
	padding: 20px 25px;
	text-align: center;
	font-size: 18px;
}
.instruct p{
	margin-bottom: 5px;
}
.instruct span{
	color: green;
}
.instruct div{
	text-align: center;
}
.editor span{
	line-height: 32px;
	display: inline-block;
	float: left;
	margin-right: 10px;
	height: 30px;
}
/*.editor::-webkit-scrollbar{
	width: 10px;
}
.editor::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 1px;
}
.editor::-webkit-scrollbar-thumb {
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 15px rgba(0,0,0,0.7);
}*/
.line{
	width: calc(100% - 35px);
	margin-left: 0px;
	margin-bottom: 10px;
	line-height: 30px;
	//padding: 0px 10px;
	border: 0;
	outline: none;
	display: inline;
	float: right;
	vertical-align: middle;
}
.longer{
	height: 390px !important;
}
.langer{
	height: 450px !important;
}
.line span{
	line-height: 30px;
	display: inline-block;
	float: left;
	//margin-right: 15px;
}
.line img{
	max-height: 30px;
	display: inline-block;
	margin-right: 10px;
	margin-left: 10px;
	line-height: 30px;
	vertical-align: middle;
	-webkit-user-select: none !important;
	padding: 0 !important;
}
.line img:hover{
	cursor: move;
	-webkit-user-select: none;
}
.line div{
	height: 30px;
}
.lining-images{
	height: 100%;
	display: inline-block;
	vertical-align: middle;
	margin: 0 !important;
	float: none !important;
}
.code{
	display: inline-block;
	float: left;
	line-height: 33px !important;
	width: auto;
	margin: 0;
	margin-right: 10px !important;
	background: #dbdbdb;
	border-radius: 12px;
	height: 30px;
	padding: 0 10px;
	font-size: 16px;
	font-weight: bold;
}
.code:hover{
	cursor: text;
}
.code:focus{
	outline:none;
	color: black;
}
.emoji-container{
	display: inline-block;
	float: left;
	width: calc(40% - 40px);
	height: calc(100% - 40px);
	margin: 20px;
}
.emoji-container-title{
	margin: 0;
	margin-top: 0px;
	text-align: left;
	font-size: 22px;
	margin-bottom: 5px;
	font-weight: bold;
	display: inline-block;
	float: left;
	-webkit-user-select: none;
	margin-right: 5px;
}
.emoji-container-title img{
	height: 45px;
}
.notif{
	position: absolute;
	right: calc(40% - 85px);
	top: 20px;
	font-size: 14px;
	font-weight: bold;
	background: white;
	width: 17px;
	//display: block;
	border-radius: 50%;
	text-align: center;
	line-height: 19px;
	height: 17px;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
	color: white;
	background: #f0624a;
	display: none;
}
.emoji-container-title:nth-child(100n - 98){
	float: left;
	margin-right: 0px;
}
.emoji-container-title:hover{
	cursor: pointer;
	text-decoration: underline;
}
.emojis{
	width: 100%;
	height: calc(100% - 191px);
	overflow-y: auto;
	display: none;
}
.emojis:nth-child(2n - 1){
	display: block;
}
.emojis::-webkit-scrollbar{
	width: 10px;
}
.emojis::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 1px;
}
.emojis::-webkit-scrollbar-thumb {
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.emoji{
	width: 75px;
	height: 125px;
	display: inline-block;
	float: left;
	margin-right: 50px;
	border-radius: 4px;
	margin-bottom: 20px;
	//position: relative;
	z-index: 0;
}
.emoji img{
	display: block;
	width: 70px;
	padding-top: 10px;
	padding-left: 2.5px;
	padding-right: 2.5px;
	padding-bottom: 45px;
	position: relative;
	z-index: 1;
}
.emoji img:hover{
	cursor: move;
}
.emoji p{
	width: 75px;
	margin: 0;
	text-align: center;
	position: relative;;
	top: -30px;
	z-index: 0;
	//line-height: 95px;
}
.emoji p:hover{
	cursor: pointer;
}
.emoji:hover{
	cursor: pointer;
	background: #dbdbdb;
}
.tag{
	width: 95px;
	height: 45px;
	display: inline-block;
	float: left;
	margin-right: 15px;
	border-radius: 4px;
	margin-bottom: 20px;
	//position: relative;
	z-index: 0;
}
.tag img{
	display: block;
	height: 25px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	position: relative;
	z-index: 1;
}
.tag img:hover{
	cursor: move;
}
.tag:hover{
	cursor: pointer;
	background: #dbdbdb;
}
#text-box{
	display: inline-block;
	float: left;
	width: auto;
	height: auto;
}
#text-box:hover{
	cursor: pointer;
	border-radius: 12px;
	width: auto;
}
.tip{
	width: 40%;
	position: absolute;
	height: 150px;
	bottom: 0;
	right: 0;
	background: #dbdbdb;
	color: black;
	display: none;
	z-index: 6;
}
.tip img{
	display: inline-block;
	float: left;
	margin-left: 30px;
	margin-top: 50px;
	height: 50px;
}
.tip p{
	display: inline;
	float: left;
	margin: 0;
	margin-right: 40px;
	//margin-top: 10px;
	width: calc(100% - 140px);
	margin-left: 20px;
	font-size: 17px;
	position: relative;
	top: calc(50%);
}
.tip p img{
	height: 20px;
	vertical-align: middle;
	display: inline;
	margin: 0;
	float: none;
}
.test-code{
	bottom: 60px;
	position: absolute;
	left: 50px;
	background: #46a2d8;
	width: 150px;
	border-radius: 3px;
	height: 30px;
	color: white;
	text-align:center;
	font-size: 16px;
	line-height: 33px;
	z-index: 2;
	text-decoration: none;
	display: block;
}
.test-code:hover{
	cursor: pointer;
	-webkit-user-select: none;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.edit{
	display: inline-block;
	float: left;
	height: 30px;
	margin-top: 5px;
	padding: 0 10px;
	background: #dbdbdb;
	color: #777;
	border-radius: 12px;
	border: 0px;
	font-size: 16px;
	font-family: times new roman;
	//outline: none;
	margin-right: 10px;
	width: auto;
}
.edit:focus{
	outline: none;
	//border: 1px solid #444;
	height: 30px;
	color: black;
	cursor: text;
}
.cloud{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60%;
	z-index: 0;
}
#view{
	background: purple;
	z-index: 1;
}
#next{
	background: green;
	left: calc(60% - 210px);
	display: none;
}
#nachste{
	background: green;
	left: calc(95% - 225px);
	bottom: calc(5% + 60px);
	display: none;
	position: absolute;
	z-index: 102;
}
#share{
	background: red;
	left: calc(5% + 60px);
	bottom: calc(5% + 60px);
	display: none;
	position: absolute;
	z-index: 102;
}
#share-no{
	background: red;
	left: calc(5% + 60px);
	bottom: calc(5% + 60px);
	display: none;
	position: absolute;
	z-index: 102;
}
.hint{
	position: absolute;
	background: #f5e90f;
	bottom: 125px;
	left: 0px;
	height: 60px;
	width: 45px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	z-index: 2;
	box-shadow: 0px 0px 1px 7px #cdc308;
}
.hint img{
	width: 40px;
	height: 40px;
	margin-top: 10px;
	margin-left: 4px;
	transition: 2s;
}
.rotated-image{
	transition: 2s;
	transform: rotateY(180deg);
}
.hint:hover{
	cursor: pointer;
}
#hint{
	position: absolute;
	left: 0px;
	bottom: 125px;
	height: 60px;
	width: 0px;
	text-align: left;
	background: #f5e90f;
	color: black;
	font-weight: bold;
	font-size: 16px;
	line-height: 60px;
	z-index: 2;
	display: none;
	box-shadow: -8px 0px 1px 7px #cdc308;
	text-indent: 50px;
}
.options{
	width: 210px;
	height: 34px;
	border-radius: 15px;
	position: absolute;
	z-index: 5;
	//border: 1px solid black;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	background: white;
}
.options img{
	width: 30px;
	height: 30px;
	margin-left: 10px;
	display: inline-block;
	float: left;
	margin-top: 2px;
	transition: 0.1s;
}
.options img:hover{
	cursor: pointer;
	transition: 0.1s;
	//transform: translate(0, -2px);
	background: green;
}
.options:after, .options:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.options:after {
	border-color: none;
	border-top-color: white;
	border-width: 10px;
	margin-left: -10px;
}
.options:before {
	border-color: none;
	border-top-color: rgba(0, 0, 0, 0.2);
	border-width: 12px;
	margin-left: -12px;
}
.code-overlay{
	position: absolute;
	z-index: 101;
	width: 90%;
	height: 90%;
	left: 5%;
	top: 5%;
	opacity: 0;
	transition: 1s;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
}
.written-code{
	width: 200px;
	height: 100%;
	overflow: auto;
	float: right;
}
.code-object{
	display: inline-block;
	width: calc(100% - 350px);
	float: left;
	margin-right: 50px;
	z-index: 101;
	height: 100%;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}
.code-object::-webkit-scrollbar{
	width: 10px;
}
.code-object::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 1px;
}
.code-object::-webkit-scrollbar-thumb {
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 15px rgba(0,0,0,0.7);
}
.close-object{
	width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-weight: 900;
    //font-family: arial;
    border: 3px solid white;
    top: calc(5% - 14px);
    right: calc(5% - 14px);
    position: fixed;
    z-index: 102;
    line-height: 21px;
    text-align: center;
    font-size: 14pt;
	display: none;
	transition: 1s;
}
.close-object img{
	width: 15px;
	height: 15px;
	margin-left: 0px;
	margin-top: 7.5px;
}
.close-object:hover{
	cursor: pointer;
}
.map{
	height: 300px;
	width: 100%;
}
.header-wrapper{
	width: 100%;
	min-width: 970px;
	height: 60px;
	box-shadow: 0px 5px 15px 5px #e3e3e3;
}
.top-container{
	width: 100%;
	min-width: 970px;
	height: auto;
	padding-top: 25px;
}
.inner-container{
	width: 970px;
	margin: 0 auto;
	height: auto;
}
.student-dash-container{
	width:1200px !important;
}
.top-container img{
	width: 550px;
}
.redirect-container{
	width: 420px;
	height: 322.88px;
	display: inline-block;
	float: right;
}
.redirect-container p{
	font-family: netto;
	font-size: 37px;
	text-align: center;
	margin: 30px 0;
	margin-bottom: 40px;
}
.redirect-container a{
	display: inline-block;
	float: left;
	width: 150px;
	height: 60px;
	margin-left: 40px;
	text-decoration: none;
	color: white;
	background: #f0624a;
	border-radius: 15px;
	line-height: 63px;
	font-size: 24px;
	text-align: center;
	font-weight: 100;
}
.redirect-container a:hover{
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.prof-link{
	font-size: 17px;
	color: black;
	line-height: 60px;
	display: inline-block;
	float: right;
	margin-left: 20px;
	font-weight:bold;
	text-decoration: none;
	font-family: aleo;
}
.prof-link:hover{
	text-decoration: underline;
	cursor: pointer;
}
#home-logo{
	margin: 0;
	display: inline-block;
	float: left;
	height: 60px;
	text-decoration: none;
}
#home-logo img{
	height: 50px;
	margin-top: 5px;
}
.meat-container{
	width: 100%;
	min-width: 970px;
	height: auto;
	background: #0566c6;
	padding-bottom: 25px;
	overflow: hidden;
	padding-top: 10px;
}
.meat-container p{
	color: white;
	font-size: 37px;
	text-align: center;
	padding-top: 20px;
	margin: 0;
	padding-bottom: 20px;
	font-family: aleo;
	font-weight: bold;
}
.meat-container img{
	width: 100px;
	height: 100px;
}
.emos{
	width: 100px;
	height: 125px;
	margin-right: 74px;
	margin-top: 0px;
	margin-bottom: 10px;
	display: inline-block;
	float: left;
}
.emos:nth-child(6n + 1){
	margin-right: 0;
}
.emos span{
	color: #fff;
	font-size: 18px;
	line-height: 10px;
	display: block;
	width: 100px;
	height: 19px;
	text-align: center;
	margin-top: 9px;
}

.teaching-container{
	width: 100%;
	min-width: 970px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 40px;
}
.teaching-container p{
	font-size: 37px;
	width: 400px;
	display: inline-block;
	float: left;
	margin-right: 20px;
	text-align: center;
	margin-top: 63.5px;
	margin-bottom: 0px;
}
.teaching-container img{
	width: 550px;
	border-radius: 3px;
}
.footer-container{
	width: 100%;
	min-width: 970px;
	height: auto;
	background: #444;
	color: white;
	font-size: 16px;
	padding-bottom: 25px;
	padding-top: 10px;
}
.about{
	display: inline-block;
	width: 400px;
}
.resources{
	display: inline-block;
	float: right;
	width: 100px;
	margin-left: 35px;
	height: 146px;
}
.lessons{
	display: inline-block;
	float: right;
	width: 235px;
	margin-left: 50px;
	height: 146px;
}
.footer-container p{
	font-weight: 900;
	font-size: 20px;
	margin: 10px 0;
}
.footer-container a{
	display: block;
	color: white;
	text-decoration: none;
	margin-bottom: 3px;
}
.footer-container a:hover{
	text-decoration: underline;
}
.copyright{
	margin: 5px 0 0 0;
	text-align: center;
}
.login-container{
	width: 700px;
	height: 450px;
	background: white;
	position: fixed;
	z-index: -1;
	left: calc(50% - 350px);
	top: calc(50% - 225px);
	opacity: 0;
	transition: 1s;
	//border-radius: 10px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.google-login-container{
	width: 700px;
	height: 450px;
	background: white;
	position: fixed;
	z-index: -1;
	left: calc(50% - 350px);
	top: calc(50% - 225px);
	opacity: 0;
	transition: 1s;
	//border-radius: 10px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.format-glog{
	width: auto !important;
	height: auto !important;
	display: auto !important;
	float: auto !important;
	position: absolute;
	left: calc(50% + 115px);
	top: 259.75px;
}
.login-head{
	height: 75px;
	width: 100%;
	background: #f0624a;
	font-size: 37px;
	color: white;
	text-align: center;
	line-height: 75px;
	//border-top-left-radius: 10px;
	//border-top-right-radius: 10px;
}
#smaller-height{
	height: 25px;
}
.login-body{
	height: 314px;
	width: 100%;
	background: white;
}
.login-body div{
	width: 349.5px;
	height: 100%;
	display: inline-block;
	float: left;
}
.login-body div:first-child{
	border-right: 1px solid #dbdbdb;
}
.login-body form{
	width: 250px;
	margin: 0 auto;
	height: auto;
	margin-top: 94.5px;
}
.login-body input{
	width: 250px;
	height: 25px;
	font-family: netto;
	font-size: 14px;
	margin-bottom: 10px;
}
#submit{
	width: 80px;
	height: 35px;
	line-height: 36px;
	margin-left: 85px;
	margin-top: 3px;
	margin-bottom: 25px;
	outline: none;
	border: none;
	background: #f0624a;
	color: white;
	font-family: netto;
	font-size: 16px;
	border-radius: 3px;
}
#submit:hover{
	background: #d45742;
	cursor: pointer;
}
.close-login{
	width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-weight: 900;
    //font-family: arial;
    border: 3px solid white;
    top: calc(50% - 239px);
    right: calc(50% - 364px);
    position: fixed;
    z-index: 102;
    line-height: 21px;
    text-align: center;
    font-size: 14pt;
}
.close-login img{
	width: 15px;
	height: 15px;
	margin-left: 0.85px;
	margin-top: 7.5px;
}
.close-login:hover{
	cursor: pointer;
}
.signup-container{
	width: 700px;
	height: 450px;
	background: white;
	position: fixed;
	z-index: -1;
	left: calc(50% - 350px);
	top: calc(50% - 225px);
	opacity: 0;
	transition: 1s;
	//border-radius: 10px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.child-reg-container {
	width:350px;
	height:425px;
	background:white;
	position: fixed;
	z-index: -1;
	left: calc(50% - 175px);
	top: calc(50% - 202.5px);
	opacity: 0;
	transition: 1s;
	//border-radius: 10px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.signup-head{
	height: 75px;
	width: 100%;
	background: #f0624a;
	font-size: 37px;
	color: white;
	text-align: center;
	line-height: 75px;
}
.signup-body{
	margin-top: 0px;
	height: 314px;
	width: 100%;
	line-height: 25px;
}
.signup-body div{
	width: 349.5px;
	height: 100%;
	display: inline-block;
	float: left;
}
.bamboo{
	height: 250px;
	margin-top: 11px;
	margin-left: 85.385px;
}
.welcome{
	margin: 0;
	width: 242px;
	text-align:center;
	font-family: aleo;
	font-size: 22px;
	font-weight: bold;
	margin: 0 auto;
	margin-top: 12px;
	background: #fff;
	border-radius: 20px;
	border: 1px solid #ccc;
	padding: 7px;
	padding-bottom: 9px;
	position: relative;
}
.welcome:after, .welcome:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.welcome:after {
	border-color: none;
	border-top-color: #fff;
	border-width: 10px;
	margin-left: -10px;
}
.welcome:before {
	border-color: none;
	border-top-color: #ccc;
	border-width: 12px;
	margin-left: -12px;
}
.signup-body div:first-child{
	border-right: 1px solid #dbdbdb;
}
.signup-body form{
	width: 250px;
	margin: 0 auto;
	height: auto;
	margin-top: 35px;
}
#parent-signup form{
	margin-top: 65px;
}
#teacher-signup form{
	margin-top: 65px;
}
#parent-signup #submit-sign{
	margin-bottom: 27px;
}
#teacher-signup #submit-sign{
	margin-bottom: 27px;
}
.signup-body input{
	width: 250px;
	height: 25px;
	font-family: netto;
	font-size: 14px;
	margin-bottom: 17px;
	color: #777;
}
.signup-body select{
	height: 25px;
	margin-bottom: 17px;
	float: right;
	width: 200px;
	color: #777;
	font-family: netto;
	font-size: 14px;
}
.wrong-click{
	display: block;
	width: 100%;
	font-size: 14px;
	text-align: center;
	margin-top: 10px
}
.wrong-click a{
	color: #00aeef;
	text-decoration: none;
}
.wrong-click a:hover{
	cursor: pointer;
	text-decoration: underline;
}
#submit-sign{
	width: 125px;
	height: 35px;
	line-height: 36px;
	margin-left: 62.5px;
	margin-top: 3px;
	margin-bottom: 12px;
	outline: none;
	border: none;
	background: #f0624a;
	color: white;
	font-family: netto;
	font-size: 16px;
	border-radius: 4px;
}
#submit-sign:hover{
	background: #d45742;
	cursor: pointer;
}
.close-signup{
	width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-weight: 900;
    //font-family: arial;
    border: 3px solid white;
    top: calc(50% - 239px);
    right: calc(50% - 364px);
    position: fixed;
    z-index: 102;
    line-height: 21px;
    text-align: center;
    font-size: 14pt;
}
.close-signup img{
	width: 15px;
	height: 15px;
	margin-left: 0.85px;
	margin-top: 7.5px;
}
.close-signup:hover{
	cursor: pointer;
}
.errors{
	font-size: 12px !important;
	color: red !important;
	text-align: left;
	display: block;
	height: 12px;
	width: 100%;
	margin-bottom: 5px;
	line-height: 14px;
}
#username{
	margin-bottom: 0px;
}
#password{
	margin-bottom: 0px;
}
#confirm{
	margin-bottom: 0px;
}
#student-password{
	margin-bottom: 0px;
}
#student-confirm{
	margin-bottom: 0px;
}
#birthday{
	margin-bottom: 0px;
}
.signup-options{
	width: 700px;
	height: 421px;
	position: fixed;
	left: calc(50% - 350px);
	top: calc(50% - 210px);
	background: white;
	//border-radius: 10px;
	opacity: 0;
	z-index: -1;
	transition: 1s;
}
.g-signup-options{
	width: 700px;
	height: 421px;
	position: fixed;
	left: calc(50% - 350px);
	top: calc(50% - 210px);
	background: white;
	//border-radius: 10px;
	opacity: 0;
	z-index: -1;
	transition: 1s;
}
.signup-options2{
	width: 700px;
	height: 421px;
	position: fixed;
	left: calc(50% - 350px);
	top: calc(50% - 210px);
	background: white;
	//border-radius: 10px;
	opacity: 0;
	z-index: -1;
	transition: 1s;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
}
.signup-title{
	text-align: center;
	background: #f0624a;
	height: 75px;
	font-size: 37px;
	line-height: 75px;
	color: white;
	//border-top-right-radius: 10px;
	//border-top-left-radius: 10px;
}
.signup-opts{
	width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-weight: 900;
    //font-family: arial;
    border: 3px solid white;
    top: calc(50% - 224px);
    right: calc(50% - 364px);
    position: fixed;
    z-index: 102;
    line-height: 21px;
    text-align: center;
    font-size: 14pt;
}
.signup-opts img{
	width: 15px;
	height: 15px;
	margin-left: 0.85px;
	margin-top: 7.5px;
}
.signup-opts:hover{
	cursor: pointer;
}
#home-page:last-child{
	margin-right: 0;
}
#home-page:nth-child(7n - 6){
	margin-left: 25px;
}
#home-page{
	width: 200px;
	height: 250px;
	margin-top: 0px;
	position: relative;
}
#home-page img{
	margin-left: 25px;
	margin-top: 10px;
}
#home-page p{
	margin-top: 0px;
	font-weight: 900;
	font-family: aleo;
	margin-bottom: 0px;
	padding-top: 0;
	position: absolute;
	top: 155px;
	width: 100%;
	text-align: center;
	color: #666;
}
#home-page span{
	display: block;
	width: 175px;
	margin: 0 auto;
	font-size: 13px;
	font-family: netto;
	color: #777;
	margin-top: 35px;
	text-align: center;
}
.classes-wrapper{
	width: 970px;
	height: auto;
	position: relative;
	top: 50px;
	left: 50%;
	transform: translate(-50%, 0);
}
.running-feed {
	width: 300px;
}
.class{
	display: inline-block;
	width: 200px;
	//border-radius: 5px;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
	margin-right: 25px;
	height: 250px;
	color: white;
	background: #fff;
	//background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
	//background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
	text-decoration: none;
	transition: 0.2s;
	float: left;
	margin-bottom: 25px;
}
.google-class{
	display: inline-block;
	width: 200px;
	//border-radius: 5px;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
	margin-right: 25px;
	height: 250px;
	color: white;
	background: #fff;
	//background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
	//background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
	text-decoration: none;
	transition: 0.2s;
	float: left;
	margin-bottom: 25px;
}
.google-class img{
	width: 150px;
	margin-left: 25px;
	margin-top: 25px;
}
.google-class p{
	font-size: 25px;
	margin-top: 25px;
	margin-bottom: 25px;
	text-align: center;
	color: #777;
	font-weight: 900;
}
.google-class:hover{
	transform: scale(1.03);
	transition: 0.2s;
	cursor: pointer;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}
.s-opts{
	margin-top: 10px;
	overflow: hidden;
	padding-top: 10px;
	height: 250px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.class:hover{
	transform: scale(1.03);
	transition: 0.2s;
	cursor: pointer;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}
.class img{
	width: 150px;
	margin-left: 25px;
	margin-top: 25px;
}
.class p{
	font-size: 25px;
	margin-top: 25px;
	margin-bottom: 25px;
	text-align: center;
	color: #777;
	font-weight: 900;
}
.grades-wrapper{
	width: 970px;
	height: auto;
	margin: 0 auto;
	margin-top: 50px;
}
.grades{
	display: inline-block;
	width: 125px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
	margin-right: calc(220px/5);
	height: 150px;
	color: white;
	background: white;
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
	background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
	text-decoration: none;
	transition: 0.2s;
	float: left;
	margin-bottom: 25px;
}
.grades:nth-child(6n){
	margin-right: 0;
}
#fix-margin{
	margin-right: 44px;
}
.grades:hover{
	transform: scale(1.05);
	transition: 0.2s;
	cursor: pointer;
}
.grades img{
	width: 100px;
	margin-left: 12.5px;
	margin-top: 12.5px;
}
.grades p{
	font-size: 25px;
	margin-top: 0px;
	margin-bottom: 12.5px;
	text-align: center;
	color: #777;
	font-weight: 900;
}
.search-bar{
	display: block;
	width: 100%;
	border-radius: 5px;
	height: 50px;
	font-size: 32px;
	color: #777;
	padding: 5px;
	border: 2px solid #999;
}
#class-title{
	margin-bottom: 25px;
}
#students-search{
	margin-top: 50px;
}
.studs{
	width: 100%;
	height: auto;
	margin-top: 25px;
}
.student{
	width: auto;
	height: 50px;
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
	background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
	display: inline-block;
	margin-right: 25px;
	margin-bottom: 10px;
}
.student:hover{
	cursor: pointer;
	box-shadow: 0px 0px 5px rgba(0, 128, 0, 1);
}
.student img{
	width: 35px;
	height: 35px;
	margin-left: 7.5px;
	margin-top: 7.5px;
}
.student span{
	font-size: 15px;
	text-align: center;
	color: #777;
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 53px;
	height: 50px;
	float: right;
}
.added{
	width: 100%;
	height: auto;
}
#adds:hover{
	box-shadow: 0px 0px 5px rgba(128, 0, 0, 1);
}
#adds{
	margin-bottom: 25px;
}
#adds p{
	margin-top:10px;
	font-size: 15px;
}
#subs{
	margin-bottom: 25px;
}
#subs p{
	margin-top:10px;
	font-size: 15px;
}
#ahead{
	margin-bottom: 25px;
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #7de285));
    background: -moz-linear-gradient(top, white 0%, white 55%, #7de285 130%);
}
#ahead p{
	margin-top:10px;
	font-size: 15px;
}
#behind{
	margin-bottom: 25px;
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #f99898));
    background: -moz-linear-gradient(top, white 0%, white 55%, #f99898 130%);
}
#behind p{
	margin-top:10px;
	font-size: 15px;
}
.ducks{
	font-size: 26px;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 5px;
}
.create{
	width: 150px;
	height: 40px;
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #d5e4f5));
	background: -moz-linear-gradient(top, white 0%, white 55%, #d5e4f5 130%);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	margin: 0 auto;
	color: #777;
	line-height: 43px;
	text-align: center;
	font-weight: 900;
	display: block;
	margin-top: 0px;
	font-size: 18px;
}
.create:hover{
	cursor: pointer;
	box-shadow: 0px 0px 5px rgba(0, 128, 0, 1);
}
.errs{
	color: red;
	font-size: 20px;
	margin-top: 10px;
}
.lessos{
	display: inline-block;
	width: 100px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
	margin-right: calc(170px/7);
	height: 125px;
	color: white;
	background: white;
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
	background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
	text-decoration: none;
	transition: 0.2s;
	float: left;
	margin-bottom: 25px;
}
.lessos:hover{
	transform: scale(1.05);
	transition: 0.2s;
	cursor: pointer;
}
.lessos img{
	width: 75px;
	margin-left: 12.5px;
	margin-top: 12.5px;
}
.lessos p{
	font-size: 15px;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
	color: #777;
	font-weight: 900;
	margin-top: 10px;
}
#c{
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #7de285));
	background: -moz-linear-gradient(top, white 0%, white 55%, #7de285 130%);
}
#l{
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #f99898));
	background: -moz-linear-gradient(top, white 0%, white 55%, #f99898 130%);
}
#mar{
	margin-top: 175px;
}
#marr{
	margin-top: 300px;
}
.save-display{
	width: 400px;
	height: 185px;
	position: fixed;
	z-index: 101;
	top: calc(50% - 92.5px);
	left: calc(50% - 200px);
	background: white;
	//border-radius: 10px;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
	line-height: 150px;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}
.save-display p{
	font-size: 32px;
	text-align: center;
	margin: 0;
	height: 59px;
	line-height: 61px;
	font-weight: 400;
	background: #f0624a;
	color: white;
	border-bottom: 1px solid #dbdbdb;
}
.save-display input{
	width: 300px;
	height: 30px;
	margin-bottom: 0px;
	margin-top: 25px;
	font-size: 18px;
	color: #777;
}
#save-p{
	height: 30px;
	width: 150px;
	line-height: 25px;
	margin-top: 15px;
	font-size: 17px;
	border: none;
	outline: none;
	background: green;
	box-shadow: 0;
	color: white;
	line-height: 31px;
	border-radius: 3px;
	font-family: netto;
	font-size: 16px;
}
#save-p:hover{
	cursor: pointer;
	-webkit-user-select: none;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.save-display span{
	display: block;
	height: 125px;
	line-height: 125px;
	text-align: center;
	color: #777;
	font-size: 18px;
	font-weight: 400;
}
.close-share{
	width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-weight: 900;
    border: 3px solid white;
    top: calc(50% - 106.5px);
    right: calc(50% - 214px);
    position: fixed;
    z-index: 102;
    line-height: 21px;
    text-align: center;
    font-size: 14pt;
    display: block;
    transition: 1s;
}
.close-share img{
	width: 15px;
    height: 15px;
    margin-left: 0px;
    margin-top: 7.5px;
}
.close-share:hover{
	cursor: pointer;
}
.projs{
	display: inline-block;
	width: 100px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
	margin-right: calc(170px/7);
	height: 125px;
	color: white;
	background: white;
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
	background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
	text-decoration: none;
	transition: 0.2s;
	float: left;
	margin-bottom: 25px;
}
.projs img{
	width: 75px;
	margin-left: 12.5px;
	margin-top: 12.5px;
}
.projs p{
	font-size: 15px;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
	color: #777;
	font-weight: 900;
	margin-top: 10px;
}
.projs:hover{
	transform: scale(1.05);
	transition: 0.2s;
	cursor: pointer;
}
.find{
	position: fixed;
	height: auto;
	width: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: white;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	z-index: -1;
	opacity: 0;
	transition: 1s;
}
.search-title{
	height: 80px;
	font-size: 37px;
	font-weight: 900;
	line-height: 80px;
	text-align: center;
	transition: 1s;
	margin: 0;
}
#studs-search{
	width: 350px;
	margin: 0 25px;
	font-size: 25px;
	height: 35px;
	margin-top: 15px;
}
#on-page{
	width: 350px;
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 15px;
}
.info{
	width: 150px;
	height: 100px;
	display: inline-block;
	float: left;
	background: white;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8);
	margin-right: 22px;
	margin-left: 22px;
	margin-bottom: 25px;
}
.info p{
	text-align: center;
	margin-bottom: 0px;
}
#bigger{
	font-size: 42px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 0;
	margin-top: 4px;
}
.find-close{
	width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-weight: 900;
    border: 3px solid white;
    top: calc(50% - 76.5px);
    right: calc(50% - 214px);
    position: fixed;
    z-index: 102;
    line-height: 21px;
    text-align: center;
    font-size: 14pt;
    display: none;
    transition: 1s;
}
.find-close img{
	width: 15px;
    height: 15px;
    margin-left: 0px;
    margin-top: 7.5px;
}
.find-close:hover{
	cursor: pointer;
}
.child{
	position: fixed;
	height: auto;
	width: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: white;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	z-index: -1;
	opacity: 0;
	transition: 1s;
	text-align: center;
}
.child-close{
	width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-weight: 900;
    border: 3px solid white;
    top: calc(50% - 116.5px);
    right: calc(50% - 214px);
    position: fixed;
    z-index: 102;
    line-height: 21px;
    text-align: center;
    font-size: 14pt;
    display: none;
    transition: 1s;
}
.child-close img{
	width: 15px;
    height: 15px;
    margin-left: 0px;
    margin-top: 7.5px;
}
.child-close:hover{
	cursor: pointer;
}
#child-search{
	width: 350px;
	margin: 0 25px;
	font-size: 22px;
	height: 35px;
	margin-top: 5px;
}
#child-pw{
	width: 350px;
	margin: 0 25px;
	font-size: 22px;
	height: 35px;
	margin-top: 10px;
	margin-bottom: 10px
}
#su{
	//margin-left: 150px;
	margin-top: 5px;
	margin-bottom: 20px;
	width: 100px;
	font-size: 16px;
	font-family: netto;
}
.nav{
	width: 100%;
	background: #f5f5f5;
	border-bottom: 1px solid #dbdbdb;
	height: 50px;
}
.nav div{
	width: auto;
	display: inline-block;
	float: left;
	line-height: 52px;
	font-size: 18px;
	//font-weight: bold;
	height: 100%;
	padding-left: 16.5px;
	padding-right: 16.5px;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	text-align: center;
	-webkit-user-select: none;
}
.nav div:nth-child(100n - 99){
	margin-left: 20px;
}
.nav div:nth-last-child(200n - 198){
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}
#no-logout div:nth-last-child(200n - 199){
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}
#no-logout div:nth-last-child(200n - 198){
	border-right: 0;
}
.nav div:hover{
	cursor: pointer;
	background: white;
}
.active{
	border-bottom: 1px solid white;
	background: white;
}
.border{
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
	background: #fff;
}
.tabitha{
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
.tab1{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
#shown{
	display: block !important;
}
.statistics{
	width: 100%;
	height: 100px;
}
.assigned{
	width: 926px;
	height: auto;
	margin-bottom: 25px;
	margin-left: 22px;
}
.assigned p{
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 8px;
}
.assigned table{
	width: 100%;
	height: auto;
	border-collapse: collapse;
	margin-bottom: 25px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.assigned table tr:nth-child(even){
	background: #f5f5f5;
}
.assigned thead{
	color: #444;
	background: #f5f5f5;
	text-align: left;
	border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.assigned th{
	font-weight: 600;
	padding: 9px 8px 7px;
	line-height: 21px;
	height: 19px;
}
.assigned tr{
	border-bottom: 1px solid #dbdbdb;
}
.assigned td{
	padding: 9px 8px 7px;
}
.assigned a{
	text-decoration: none;
	color: #777;
}
.assigned a:hover{
	text-decoration: underline;
}
.inline-it{
	display: inline-block;
	margin-top: 0px;
}
.addLessons{
	margin-top: 15px !important;
	width: 150px;
	height: 30px;
	background: rgb(0, 128, 0);
	font-size: 18px;
	color: white;
	text-align: center;
	margin: 0 auto;
	line-height: 30px;
	display: inline-block;
	text-decoration: none;
	-webkit-user-select: none;
	margin-left: 225px;
}
.addLessons:hover{
	cursor: pointer;
	background: rgb(0, 150, 0);
}
.newAddLessons{
	margin-top: 0px !important;
	width: 150px;
	height: 30px;
	background: rgb(0, 128, 0);
	font-size: 18px;
	color: white;
	text-align: center;
	margin: 0 auto;
	line-height: 30px;
	display: inline-block;
	float: right;
	text-decoration: none;
	-webkit-user-select: none;
}
.newAddLessons:hover{
	cursor: pointer;
	background: rgb(0, 150, 0);
}
.addStuds{
	width: 150px;
	height: 30px;
	background: rgb(0, 128, 0);
	font-size: 18px;
	color: white;
	text-align: center;
	margin-left: calc(50% - 75px);
	margin-bottom: 25px;
	line-height: 30px;
	border-radius: 3px;
	box-shadow: 0 0 3px rgba(0, 50, 0, 1);
	display: inline-block;
	float: left;
	text-decoration: none;
	-webkit-user-select: none;
}
.addStuds:hover{
	cursor: pointer;
	background: rgb(0, 150, 0);
}
.generation{
	width: 150px;
	height: 30px;
	background: rgb(0, 128, 0);
	font-size: 18px;
	color: white;
	text-align: center;
	margin-left: 50px;
	margin-bottom: 25px;
	line-height: 30px;
	border-radius: 3px;
	box-shadow: 0 0 3px rgba(0, 50, 0, 1);
	display: inline-block;
	float: left;
	text-decoration: none;
	-webkit-user-select: none;
}
.generation:hover{
	cursor: pointer;
	background: rgb(0, 150, 0);
}
#gcl{
	margin-left: 50px;
}
.tab2{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
.inner-tab{
	width: calc(100% - 44px);
	margin-left: 22px;
	height: auto;
	margin-top: 25px;
	margin-bottom: 25px;
}
.lessons_view{
	width: 100%;
	height: auto;
	display: block;
}
.tab-header{
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 8px;
}
.tab-lesson{
	display: inline-block;
	position: relative;
	width: 100px;
	height: 150px;
	margin-right: 32.6px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
	text-decoration: none;
	color: #777;
	background: #f5f5f5;
	margin-bottom: 22px;
}
.tab-lesson a{
	display: block;
	width: 100%;
	height: auto;
	text-decoration: none;
	color: #777;
}
.tab-lesson:hover{
	box-shadow: 0 0 2px rgba(0, 0, 0, 1);
	cursor: pointer;
}
.tab-lesson img{
	width: 75px;
	margin-top: 12.5px;
	margin-left: 12.5px;
}
.tab-lesson p{
	text-align: center;
	font-size: 15px;
	margin-top: 10px;
	margin-bottom: 5px;
	font-weight: 600;
	height: 18px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tab-lesson div{
	height: 28px;
	width: 100%;
	line-height: 30px;
	font-size: 14px;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	color: green;
}
.tab-lesson div:hover{
	background: red;
	color: white;
	cursor: pointer;
	-webkit-user-select: none;
}
.tab-lesson:nth-child(7n){
	margin-right: 0;
}
.assign{
	height: 40px;
	width: 100% !important;
	line-height: 42px;
	font-size: 14px;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	color: green;
}
.unlocked{
	height: 40px;
	width: 100% !important;
	line-height: 42px;
	font-size: 14px;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	color: green !important;
}
.locked{
	height: 40px;
	width: 100% !important;
	line-height: 42px;
	font-size: 14px;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	color: red !important;
}
.s-assign{
	height: 40px;
	width: 100% !important;
	line-height: 42px;
	font-size: 14px;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	color: green;
}
.assign:hover{
	background: red;
	color: white;
	cursor: pointer;
	-webkit-user-select: none;
}
#unassigned{
	color: red;
}
#unassigned:hover{
	color: white;
}
#assign{
	color: green;
}
#assign:hover{
	color: white;
}
.tab3{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
.tab6{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
.tab7{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
.tab8{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
.tab9{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
.tab10{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
.gradebook{
	width: 100%;
	height: auto;
	min-height: 166px;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8);
	position: relative;
}
.empty{
	width: 167px;
	height: 166px;
	display: inline-block;
	float: left;
	background: white;
	border-bottom: 1px solid #dbdbdb;
}
.rotate{
	width: 759px;
	height: 150px;
	display: inline-block;
	float: left;
}
.grade-lesson{
	display: inline-block;
	float: left;
	height: 158px;
	width: 22px;
	margin: 0;
	font-size: 18px;
	padding: 0px 4px 8px 6px;
	background: #f5f5f5;
	border-left: 1px solid #dbdbdb;
	border-bottom: 1px solid #dbdbdb;
	position: relative;

}
.grade-lesson span{
	position: absolute;
	top: 158px;
	display: block;
	width: 158px;
	height: 22px;
	transform: rotate(270deg);
	transform-origin: left top 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pls-fit{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.row{
	width: 100%;
	height: 33px;
	margin: 0;
	display: inline-block;
	float: left;
	position: relative;
}
.row:nth-child(100n - 97) .grade-name{
	border-top: 1px solid #dbdbdb;
	height: 21px;
}
.row:nth-child(2n){
	background: #f5f5f5;
}
.grade-name{
	width: 159px;
	margin: 0;
	font-size: 18px;
	padding: 6px 0px 4px 8px;
	border-right: 1px solid #dbdbdb;
	border-bottom: 1px solid #dbdbdb;
	display: inline-block;
	float: left;
	height: 22px;
	color: #777;
	text-decoration: none;
}
.grade-name:hover{
	text-decoration: underline;
}
.grid{
	width: 32px;
	height: 32px;
	border-right: 1px solid #dbdbdb;
	border-bottom : 1px solid #dbdbdb;
	display: inline-block;
	float: left;
}
.grid img{
	width: 25px;
	height: 25px;
	margin-left: 4px;
	margin-top: 4px;
}
.grid:last-child{
	border-right: 0;
}
.row:last-child .grade-name{
	border-bottom: 0;
}
.row:last-child .grid{
	border-bottom: 0;
}
.tab4{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
.tab5{
	display: none;
	height: auto;
	width: 100%;
	background: white;
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 0.1px;
}
#large{
	font-size: 26px;
	margin-bottom: 20px;
}
#before-input{
	margin-top: 8px;
	margin-bottom: 3px;
}
.edit-input{
	width: 250px;
	height: 30px;
	font-family: netto;
	color: #777;
	font-size: 16px;
	padding-left: 5px;
}
.edit-select{
	width: 250px;
	height: 30px;
	font-size: 16px;
	color: #777;
	font-family: netto;
}
.edit-submit{
	width: 150px;
	height: 30px;
	background: green;
	font-family: netto;
	font-size: 16px;
	color: white;
	outline: none;
	box-shadow: none;
	border: 0;
	border-radius: 3px;
	box-shadow: 0 0 3px rgba(0, 50, 0, 1);
	margin: 0;
}
.edit-submit:hover{
	background: rgb(0, 150, 0);
	cursor: pointer;
}
.inner-tab hr{
	border: 0;
    height: 0;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin-top: 30px;
}
#delete{
	background: rgb(210, 0, 0);
	box-shadow: 0 0 3px rgba(50, 0, 0, 1);
	margin-left: 0;
	font-size: 16px;
}
#delete:hover{
	background: rgb(255, 0, 0);
}
.left-container{
	display: inline-block;
	width: 645px;
	margin-left: 0;
	height: auto;
	float: left;
}
.classroom{
	width: 100%;
	height: 125px;
	background: #fff;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8);
	margin-bottom: 15px;
}
.class-name{
	text-decoration: none;
	font-size: 26px;
	color: #777;
	margin-top: 10px;
	margin-left: 15px;
	display: inline-block;
}
.class-name:hover{
	text-decoration: underline;
	cursor: pointer;
}
.class-grade{
	display: inline-block;
	float: right;
	margin-right: 15px;
	margin-top: 10px;
	font-size: 16px;
	margin-bottom: 0px;
}
.infograms{
	width: 200px;
	margin: 0 auto;
	height: 75px;
}
.infograms a{
	width: 100px;
	height: 100%;
	display: inline-block;
	float: left;
	border-radius: 5px;
	text-decoration: none;
	color: #777;
}
.infograms a:hover{
	background: #dbdbdb;
	cursor: pointer;
}
.infograms img{
	height: 50px;
	margin-left: 25px;
}
.infograms span{
	margin: 0 auto;
	display: block;
	text-align: center;
	font-size: 16px;
	margin-top: 6px;
	line-height: 20px;
}
.right-container{
	width: 300px;
	margin-left: 25px;
	display: inline-block;
	height: auto;
	float: right;
	padding-bottom: 15px;
}
.upgrade{
	display: block;
	width: 100%;
	background: #f5f5f5;
	margin: 0;
	height: 50px;
	border-bottom: 1px solid #dbdbdb;
	line-height: 52px;
	text-align: center;
	font-size: 25px;
	color: rgb(0, 128, 0);
	font-weight: 400;
	text-decoration: none;
}
.right-container img{
	margin-left: 80px;
	width: 140px;
	margin-top: 15px;
	margin-bottom: 15px;
}
.username{
	font-weight: 900;
	font-size: 22px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 8px;
}
.info-box{
	width: 75px;
	height: 50px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
	display: inline-block;
	float: left;
	margin-left: 10px;
}
.info-box:nth-child(100n - 96){
	margin-left: 27.5px;
}
.info-box p{
	text-align: center;
	font-size: 28px;
	margin: 0;
	padding-top: 0px;
	height: 30px;
	line-height: 38px;
}
.info-box span{
	display: block;
	font-size: 12px;
	text-align: center;
	padding-top: 3px;
}
.upgrade:hover{
	cursor: pointer;
	background: #f8f8f8;
}
.less-margin{
	margin-bottom: 0px !important;
}

.achievement-box {
	padding-bottom: 10px;
	background: #fff;
	min-height: 400px;
	height: auto;
}
.achievement {
	margin-bottom: 10px;
	margin-top: 0px;
	margin-left: 15px;
	margin-right: 15px;
	background-color: #f5f5f5;
	padding: 0px;
	padding-right: 5px;
	padding-left: 0px;
	font-family: netto-light;
	font-size: 15px;
	//border-radius: 20px;
	overflow: hidden;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
	border: 1px solid #f0624a;
	border-style: solid inset;
}
.achievement:last-child{
	margin-bottom: 0;
}
.achievement p{
	display: inline-block;
	float: left;
	margin-left: 5px;
	width: calc(100% - 63px);
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: middle;
	padding-top: 11px;
}
.date-achieved{
	background: #f0624a;
	border-radius: 50%;
	height: 58px;
	width: 58px;
	color: white;
	font-size: 14px;
	font-family: netto;
	display: inline-block;
	float: left;
	text-align: center;
}
.date-achieved span{
	width: 100%;
	height: 37px;
	font-size: 32px;
	font-family: netto;
	font-weight: 900;
	display: block;
	line-height: 48px;
	text-align: center;
}
.achievement-header {
	height: 49px;
	background-color: #f5f5f5;
	font-size: 25px;
	margin-bottom: 10px;
	color: #777;
	border-bottom: 1px solid #dbdbdb;
	text-align: center;
	font-family: netto;
	line-height: 52px;
}
.achievement-container {
	border-style:none;
	min-height: 410px;
	/*border-radius:10px;
	height: auto;*/
}
.achievement-container::-webkit-scrollbar{
	width: 10px;
}
.achievement-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 1px;
}
.achievement-container::-webkit-scrollbar-thumb {
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 15px rgba(0,0,0,0.7);
}
#margin-top{
	margin-top: 25px;
}
#no-pad{
	padding: 0;
}
.no-pad{
	padding: 0 !important;
}
.owned{
	background: white !important;
	color: green !important;
}
.bold{
	font-weight: 900;
}
.keys{
	margin: 0;
	font-size: 24px;
	text-align: center;
	height: 50px;
	line-height: 52px;
	background: #f5f5f5;
	border-bottom: 1px solid #dbdbdb;
}
.answers{
	margin-top: 3px;
	padding-left: 30px;
	font-size: 14px;
}
.answers a{
	font-size: 14px;
	color: #777;
	text-decoration: none;
}
.answers li{
	margin-bottom: 0px;
	padding-left: 3px;
}
.answers a:hover{
	text-decoration: underline;
}
.box-header{
	font-size: 16px;
	margin-top: 15px;
	margin-bottom: 0px;
	padding-left: 5px;
	text-align: center;
	text-decoration: underline;
}
.footer{
	background: #222;
	position: relative;
	width: 100%;
	min-width: 970px;
	height: 145px;
	font-family: aleo;
	clear: both;
	//box-shadow: 0px -5px 15px 5px #dbdbdb;
}
.top-footer{
	background: #292F35;
	height: 45px;
	padding-top: 10px;
}
.margin-top{
	margin-top: 77px;
}
.mar-top{
	margin-top: 15px;
}
.email-list{
	width: 100%;
	height: auto;
	margin-bottom: 15px;
	overflow: hidden;
}
.email-list p{
	color: white;
	font-family: netto;
	color: white;
	font-size: 37px;
	display: inline-block;
	float: left;
	margin: 0;
	line-height: 62px;
}
.email-list input{
	display: inline-block;
	float: left;
	height: 31px;
	width: 271.4px;
	margin-left: 15px;
	font-family: netto;
	color: #36648B;
	font-size: 20px;
	margin-top: 11.5px;
	padding-left: 5px;
}
#email-submit{
	width: 125px;
	margin-left: 10px;
	font-size: 21px;
	line-height: 37px;
	background: #0566c6;
	border: none;
	outline: none;
	height: 36.4px;
	border-radius: 3px;
	margin-top: 11.5px;
	color: white;
}
#email-submit:hover{
	box-shadow: 0px 0px 5px 1px #1c364c;
	cursor: pointer;
	background:#0352a0;
}
.social-media{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.social{
	text-decoration: none;
	color: white;
	display: inline-block;
	float: left;
	width: 100px;
	height: 135px;
	margin-right: 190px;
}
.social:hover{
	text-decoration: underline;
}
.social:last-child{
	margin-right: 0;
}
.outer-social{
	width: 100px;
	height: 100px;
	border-radius: 25px;
	background: #002a5c;
}
.outer-social img{
	width: 50px;
	height: 50px;
	margin-left: 25px;
	margin-top: 25px;
}
.social span{
	font-size: 15px;
	font-family: aleo;
	width: 100px;
	display: block;
	text-align: center;
	margin-top: 8px;
}
.bottom-footer{
	background: #292F35;
	width: 100%;
	min-width: 970px;
	height: auto;
	padding-top: 25px;
	padding-bottom: 10px;
	text-align: center;
}
.links{
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 10px;
}
.links a{
	font-family: netto;
	font-size: 15px;
	color: white;
	margin-bottom: 10px;
	margin-right: 40px;
	text-decoration: none;
}
.links a:hover{
	text-decoration: underline;
}
.links a:last-child{
	margin-right: 0px;
}
.legal{
	display: inline-block;
	margin-right: 206.41px;
	height: 135px;
	color: #fff9db;
	font-size: 16px;
	float: left;
}
.legal:last-child{
	margin-right: 0;
}
.legal p{
	font-size: 18px;
	font-weight: 900;
	margin-bottom: 10px;
}
.legal a{
	text-decoration: none;
	font-size: 15px;
	color: #fff9db;
	display: block;
	margin-bottom: 2px;
}
.legal a:hover{
	text-decoration: underline;
}
.main{
	width: 100%;
	min-width: 970px;
	position: relative;
	height: 585px;
	display: block;
	height: calc(100% - 85px);
	margin-top: 25px;
}
.margin-bot{
	margin-bottom: 25px;
}
.no-margin-bot{
	margin-bottom: 0px !important;
}
.pad-top{
	margin-bottom: 0px !important;
}
.padding-top{
	padding-top: 25px;
}
.pad-bot{
	padding-bottom: 25px;
}
.pad-bot a{
	color: #00aeef;
	text-decoration: none;
}
.pad-bot a:hover{
	text-decoration: underline;
}
#fix:nth-child(100n - 97){
	margin-right: 28.75px !important;
}
#fix:nth-child(2n + 1){
	margin-right: 0px;
}
#fix{
	margin-right: 28.75px;
}
#fax:nth-child(3n){
	margin-right: 0px;
}
#fax{
	margin-right: 141.75px;
}
#fyx:nth-child(3n){
	margin-right: 0px;
}
#fyx{
	margin-right: 143.75px;
}
#fex:nth-child(3n+1){
	margin-right: 0px;
}
#fex{
	margin-right: 123.75px;
}
#fux{
	margin-right: 27.75px;
}
#fux:nth-child(3n + 1){
	margin-right: 0px;
}
#fux:nth-child(3n + 2){
	margin-left: 1px;
}
.project-view{
	width: 289.5px;
	height: 203px;
	margin-right: 22px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
	display: inline-block;
	float: left;
	text-decoration: none;
	color: #777;
	margin-bottom: 25px;
}
.project-view:nth-child(2n + 1){
	margin-right: 0px;
}
#in-class:nth-child(2n+1){
	margin-right: 26.75px;
}
#in-class:nth-child(3n){
	margin-right: 0px;
}
#in-class{
	margin-right: 26.75px;
}
#volles{
	width: 100%;
}
.project-view img{
	width: 289.5px;
	height: 163px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	//padding: 12.5px;
	//background: #f5f5f5;
}
.project-view p{
	font-size: 20px;
	height: 39px;
	line-height: 40px;
	margin-top: 0px;
	text-align: center;
	width: 169px;
	overflow: ellipsis;
	display: inline-block;
}
.project-view span{
	display: inline-block;
	width: 52.25px;
	height: 39px;
	line-height: 22px;
	padding-left: 8px;
	font-size: 14px;
	text-decoration: none;
	//padding-top: 0px;
	vertical-align: top;
}
.project-view span:hover{
	background: #444;
	color: white;
}
.project-view span:hover img{
	content: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Fimages%2Fwhite-edit.png");
}
.project-view span p{
	display: inline-block;
	width: 27.25px;
	margin: 0;
	height: 39px;
	line-height: 40px;
	font-size: 14px;
}
.project-view span img{
	height: 20px;
	width: 20px;
	padding-top: 8px;
	padding-right: 0px;
	border-bottom: 0 !important;
	vertical-align: top;
}
.project-view:hover{
	cursor: pointer;
	box-shadow: 0 0 2px rgb(0, 0, 0);
}
.project-view span:nth-child(4n){
	padding-left: 6px;
	width: 54.25px;
	z-index: 50;
}
.project-view span:nth-child(4n) img{
	padding-left: 2px;
	width: 22px;
	height: 27px;
	padding-top: 6px;
}
.project-view span:nth-child(4n):hover img{
	content: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Fimages%2Fwhite-eye.png");
}
#second-right{
	margin-top: 25px;
	clear: both;
}
.delete-overlay{
	top: calc(50% - 82.5px);
	left: calc(50% - 300px);
	width: 600px;
	height: 165px;
	background: white;
	z-index: -1;
	position: fixed;
	opacity: 0;
	transition: 1s;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.8);
}
.delete-close{
	width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-weight: 900;
    //font-family: arial;
    border: 3px solid white;
    top: calc(50% - 96.5px);
    right: calc(50% - 314px);
    position: fixed;
    line-height: 21px;
    text-align: center;
    font-size: 14pt;
}
.delete-close img{
	width: 15px;
	height: 15px;
	margin-left: 0px;
	margin-top: 6.5px;
}
.delete-close:hover{
	cursor: pointer;
}
.delete-title{
	text-align: center;
	font-size: 30px;
	height: 74px;
	line-height: 76px;
	font-weight: 900;
	margin-bottom: 25px;
	background: #f5f5f5;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.delete-button{
	display: inline-block;
	float: left;
	width: 200px;
	height: 40px;
	margin-left: 75px;
	cursor: pointer;
	font-family: netto;
	color: white;
	font-size: 25px;
	text-align:center;
	line-height: 42px;
}
#sure{
	background: red;
	border: 0px;
	outline: none;
	box-shadow: 0 0 3px rgba(200, 0, 0, 1);
}
#not-sure{
	background: green;
	box-shadow: 0 0 3px rgba(0, 150, 0, 1);
	margin-left: 50px;
}
#sure:hover{
	background: rgb(180, 0, 0);
}
#not-sure:hover{
	background: rgb(0, 150, 0);
}
#not-owned{
	color: red !important;
}
.black{
	color: #000;
	margin-bottom: 5px !important;
}
#less-margin{
	margin-top: 5px;
}
.view-lesson{
	display: inline-block;
	float: left;
	width: 437.5px;
	margin-right: 81.5px;
	height: 125px;
	background: #f5f5f5;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
	text-decoration: none;
	color: #777;
	margin-bottom: 22px;
	margin-left: 81.5px;
	margin-top: 2px;
}

.view-lesson-parent {
	display: inline-block;
	float: left;
	width: 300px;
	height: 220px;
	background: #f5f5f5;
	margin-left: 20px;
	margin-right: 20px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
	text-decoration: none;
	color: #777;
	margin-bottom: 22px;
	margin-top: 2px;
}

.view-lesson-parent img {
	height: 100px;
	padding: 12.5px;
	display: inline-block;
	float: left;
	width: 99px;
	margin-top: 47.5px;
}

.view-lesson-parent h1{
	display: inline-block;
	float: left;
	width: 100%;
	height: 35px;
	margin: 0;
	padding: 0;
	line-height: 45px;
	font-size: 22px;
	text-align:center;
	font-weight: 400;
}

.view-lesson-parent div{
	width: 150px;
	padding-right: 12.5px;
	padding-left: 12.5px;
	height: 125px;
	display: inline-block;
	float: left;
}
.view-lesson-parent p{
	font-size: 15px;
	margin: 0;
	display: inline-block;
	float: left;
	text-align: justify;
}

.view-lesson:hover{
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}
.view-lesson img{
	height: 100px;
	padding: 12.5px;
	display: inline-block;
	float: left;
	width: 99px;
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.view-lesson h1{
	display: inline-block;
	float: left;
	width: 100%;
	height: 35px;
	margin: 0;
	padding: 0;
	line-height: 45px;
	font-size: 22px;
	text-align:center;
	font-weight: 400;
}
.view-lesson div{
	width: 287.5px;
	padding-right: 12.5px;
	padding-left: 12.5px;
	height: 125px;
	display: inline-block;
	float: left;
}
.view-lesson p{
	font-size: 15px;
	margin: 0;
	display: inline-block;
	float: left;
	text-align: justify;
	height: 72px;
	overflow: hidden;
	text-overflow: clip ellipsis;
}
.ls{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.floaters{
	display: inline-block;
	float: left;
	width: 100%;
	margin-bottom: 7px;
	margin-top: 8px;
	border-top: 1px solid rgba(0, 0, 0, 0.17) !important;
}
.wrap{
	margin-bottom: 25px;
	display: inline-block;
	float: left;
	margin-top: 0;
	width: 100%;
}
.remove-margin{
	margin: 0;
}
.two-px-margin{
	margin: 2px !important;
	margin-left: 95.25px !important;
}
.two-px-margin:first-child{
	margin-left: 2px !important;
}
#not-full{
	width: 700px;
	margin-left: 0px;
	display: block;
}
.actions{
	position: absolute;
	right: calc(50% - 463px);
	top: 85px;
	font-size: 15px;
	color: #777;
}
#del{
	color: red;
}
#del:hover{
	cursor: pointer;
	text-decoration: underline;
}
#genn{
	color: blue;
}
#genn:hover{
	cursor: pointer;
	text-decoration: underline;
}
.redfont{
	color: red;
}
#ann{
	color: green;
}
#ann:hover{
	cursor: pointer;
	text-decoration: underline;
}
.right-float:hover{
	cursor: pointer;
	text-decoration: underline;
}
#special{
	width: 289.5px;
}
.editor-example{
	display: inline-block;
	float: left;
	width: 450px;
	height: 500px;
}
.editor-example img{
	width: 100%;
	height: 100%;
}
.emo-box{
	background: #f0f0f0;
	width: 450px;
	display: inline-block;
	float: left;
	height: 435px;
	margin-left: 70px;
	margin-top: 15px;
}
#manage-height{
	height: 45px;
}
#add-margin{
	margin-top: 560px;
}
#new-img{
	display: inline-block;
	float: left;
	width: 970px;
	height: 500px;
}
@-webkit-keyframes rotate-pic1{
	from{
		transform: rotateY(0deg);
	}
	to{
		transform: rotateY(90deg);
	}
}
@-webkit-keyframes rotate-pic2{
	from{
		transform: rotateY(90deg);
	}
	to{
		transform: rotateY(270deg);
	}
}
@-webkit-keyframes rotate-pic3{
	from{
		transform: rotateY(270deg);
	}
	to{
		transform: rotateY(360deg);
	}
}
.projects{
	display: block;
	width: 100%;
	padding-bottom: 25px;
	margin-top: 25px;
}
.block-wrap{
	display: block;
	width: 100%;
	height: auto;
	padding-bottom: 0.1px;
	background: white;
	overflow: hidden;
}
.chart{
	position:relative;
    width:275px;
	height:275px;
	background: #fff;
	//border-radius: 50%;
	display: inline-block;
	float: left;
	margin-top: 0px;
}
.override{
	background: white;
	width: 289px;
	height: 289px;
	border-radius: 50%;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
}
.override canvas{
	left: 19.5px;
	top: 19.5px;
}
.override .details{
	color: #777;
}
.chaaht{
	position: relative;
	display: inline-block;
	float: left;
	width: 307.33333333px;
	height: 307.33333333px;
	background: #fff;
	margin-top: 10px;
	margin-left: 0px !important;
}
.less-height{
	height: 250px;
	margin-top: 0px;
}
.less-height #inner-circle{
	line-height: 190px;
}
.less-height .details{
	top: 120px;
}
#repos{
	margin-top: 8px;
	display: inline-block;
	padding-top: 0;
	padding-bottom: 0;
	height: 35px;
	line-height: 31px;
	z-index: 6;
	-webkit-user-select: none;
	text-decoration: none;
}
#repos:hover{
	cursor: pointer;
	box-shadow: 0px 0px 2px 1px #BE5E00;
}
.borders{
	//border: 1px solid #ef8600;
	border-radius: 50%;
	position: absolute;
	z-index: 4;
}
#inner{
	width: 210.5px;
	height: 210.5px;
	top: 43.75px;
	left: 43.75px;
}
#outer{
	width: 248px;
	height: 248px;
	top: 25px;
	left: 25px;
}
#css-graph{
	margin-left: 1px;
}
canvas {
    display: block;
    /*position:absolute;
    top:25px;
    left:25px;*/
		z-index: 0;
}
#no-top{
	top: 0px;
}
#inner-circle{
	color:#555;
    display:block;
    line-height:235px;
    text-align:center;
    width:300px;
    font-family:aleo;
    font-size:60px;
    font-weight:100;
    margin-left:5px;
}
.details{
	position: absolute;
	top: 143px;
	width: 300px;
	text-align: center;
	font-family: aleo;
	font-size: 20px;
	font-weight: 900;
	z-index: 1;
}
#no-mar-top{
	margin-top: 0;
}
#margin-fixes span{
	margin-top: 0px;
}
#margin-fixes{
	margin-top: 35px;
	margin-bottom: 15px;
}
.continue-button {
	background-color: #EF8600;
	font-weight: bold;
	font-size: 21px;
	color: #FFFFFF;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 10px;
}

.wide-button {
	width:740px;
	height: 40px;
	padding: 15px;
	padding-left: 50px;
	background-color: #46A2D8;
	color: #FFFFFF;
	font-size: 36px;
	font-weight: bold;
	border-radius: 15px;
	margin:20px;
	margin-right: 0px;
	margin-top:40px;
	float:left;
}

.large-button {
	width: 25%;
	height: 400px;
	font-size: 48px;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 15px;
	float: left;
	padding: 20px;
	margin:10px;
}
.large-button p{
	width: 100%;
	font-size: 60px;
	margin: 10px 0;
	text-align: center;
	margin-bottom: 15px;
}
.large-button:hover{
	cursor: pointer;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
}
#html-button {
	background-color: #EF8600;
}

#css-button {
	background-color: #46A2D8;
}

#js-button {
	background-color: #3BD46B;
}

.project-holder {
	float:left;
}

.dash-header {
	font-size:30px;
	font-weight:bold;
	margin-bottom: 10px;
}

.class-overlay{
	width: 370px;
	height: auto;
	position: fixed;
	margin-left: calc(50% - 185px);
	top: calc(50% - 165px);
	background: white;
	z-index: -1;
	opacity: 0;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
	transition: 1s;
}
.join-class{
	width: 370px;
	height: auto;
	position: fixed;
	left: calc(50% - 185px);
	top: calc(50% - 165px);
	background: white;
	z-index: -1;
	opacity: 0;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
	transition: 1s;
}
.change-password{
	width: 370px;
	height: auto;
	position: fixed;
	left: calc(50% - 185px);
	top: calc(50% - 165px);
	background: white;
	z-index: -1;
	opacity: 0;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
	transition: 1s;
}
#class-close{
	right: calc(50% - 199px);
	top: calc(50% - 179px);
}
.class-body{
	height: 330px;
	width: 100%;
}
.class-body span{
	display: block;
	font-size: 18px;
	color: #777;
	margin-top: 15px;
}
.class-body span:first-child{
	margin-top: 35px;
}
.class-body input{
	height: 32px;
	font-size: 17px;
	color: #777;
	padding-left: 1px;
	width: 100%;
	font-family: netto;
}
.class-body select{
	width: 100%;
	height: 32px;
	font-family: netto;
	font-size: 17px;
	color: #777;
}
#new-class{
	left: 112.5px !important;
	bottom: 35px;
	background: green;
}
.class-title{
	font-size: 32px;
	color: white;
	margin: 0;
	height: 75px;
	line-height: 77px;
	text-align: center;
	background: #f0624a;
}
.generate-overlay{
	width: 400px;
	height: 480px;
	top: calc(50% - 210px);
	left: calc(50% - 200px);
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
	z-index: -1;
	opacity: 0;
	transition: 1s;
	background: white;
	position: fixed;
}
.gen-body p{
	width: 100%;
	height: 75px;
	background: #f0624a;
	color: white;
	font-size: 32px;
	text-align: center;
	margin: 0;
	line-height: 77px;
}
.gen-body{
	height: 100%;
	width: 100%;
}
.card{
	height: 234.6px;
	width: 300px;
	margin-left: 50px;
}
.add-overlay{
	width: 400px;
	height: 325px;
	top: calc(50% - 162.5px);
	left: calc(50% - 200px);
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
	z-index: -1;
	opacity: 0;
	transition: 1s;
	background: white;
	position: fixed;
}
.gclass-overlay{
	width: 400px;
	height: 260px;
	top: calc(50% - 130px);
	left: calc(50% - 200px);
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
	z-index: -1;
	opacity: 0;
	transition: 1s;
	background: white;
	position: fixed;
}
.add-body p{
	width: 100%;
	height: 75px;
	background: #f0624a;
	color: white;
	font-size: 32px;
	text-align: center;
	margin: 0;
	line-height: 77px;
}
.add-body{
	height: 100%;
	width: 100%;
}
#add-close{
	top: calc(50% - 176.5px);
	right: calc(50% - 214px);
	transition: 1s;
}
.warning{
	display: block;
	font-size: 17px;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
}
#gen-close{
	top: calc(50% - 224.5px);
	right: calc(50% - 214px);
	transition: 1s;
}
#gen{
	bottom: 15px;
	left: 125px;
}
#gen2{
	z-index: 200;
	background: red;
	bottom: 15px;
	left: 125px;
}
#join-close{
	top: calc(50% - 184px);
	right: calc(50% - 204px);
	transition: 1s;
}
#smaller{
	height: 250px;
}
.option{
	width: 356px;
	margin: 0 auto;
	height: 50px;
	border-radius: 25px;
	background: #f0624a;
	margin-top: 35px;
	color:white;
	line-height: 52px;
	text-align:center;
	-webkit-user-select: none;
}
.option:hover{
	cursor: pointer;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9);
}
.option:nth-child(4n){
	margin-top: 15px;
}
.hidden{
	width: 356px;
	margin: 0 auto;
	height: 0px;
	overflow: hidden;
	transition: 1s;
}
#enroll p{
	background: white;
	color: #777;
	font-size: 18px;
	height: 35px;
	line-height: 36px;
	margin-top: 15px;
	font-weight: bold;
}
#enroll a{
	text-decoration: none;
	color: #46a2d8;
}
#enroll a:hover{
	text-decoration: underline;
}
#csv p{
	background: white;
	color: #777;
	font-size: 18px;
	height: 35px;
	line-height: 36px;
	margin-top: 15px;
	font-weight: bold;
}
#csv a{
	text-decoration: none;
	color: #46a2d8;
}
#csv a:hover{
	text-decoration: underline;
}
#create p{
	background: white;
	color: #777;
	font-size: 18px;
	height: 35px;
	line-height: 36px;
	margin-top: 20px;
	font-weight: bold;
	margin-bottom: 5px;
}
#create span{
	font-size: 16px;
	margin-top: 5px;
}
#create input{
	width: 356px;
	height: 25px;
	color: #777;
	font-size: 15px;
	margin-bottom: 0px;
	font-family: netto;
}
#create-student{
	background: green;
	z-index: 0;
	position: relative;
	margin: 0 auto;
	left: 0;
	bottom: 0;
}
.tiny-error{
	color: red;
	font-size: 12px !important;
	font-family: netto;
	width: 100%;
	display: block;
	margin: 0 !important;
	margin-bottom: 0px !important;
	height: 15px !important;
}
.hidden-overflow{
	overflow: hidden;
	padding: 2px;
}
.padding{
	text-align: center;
	padding: 25px;
	padding-bottom: 100px;
	font-size: 37px !important;
}
#yes-enroll{
	background: green;
	top: 100px;
	left: calc(50% - 175px);
}
#not-enroll{
	background: red;
	top: 100px;
	left: calc(50% + 25px);
}
.helper-image{
	width: 354px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
	margin-left: 1px;
	margin-top: 20px;
}

#message-overlay{
	height: 400px;
	width: 400px;
	top: calc(50% - 200px);
	left: calc(50% - 200px);
	overflow: hidden;
	transition: 1s;
}
#message-close{
	top: calc(50% - 214px);
	right: calc(50% - 214px);
	transition: 1s;
}
.message-body p{
	text-align: center;
	margin: 0;
	height: 75px;
	line-height: 77px;
	color: white;
	background: #f0624a;
	font-size: 32px;
}
.message-body span{
	display: block;
	margin-top: 20px;
	margin-bottom: 5px;
	margin-left: 22px;
	font-size: 18px;
}
.message-body textarea{
	resize: none;
	margin-left: 22px;
	width: 356px;
	height: 200px;
	font-family: netto;
	font-size: 15px;
	color: #777;
	padding: 5px;
}
.message-body{
}
#send-message{
	bottom: 25px;
	left: 125px;
	background: green;
	z-index: 0;
}
.vert-options{
	height: auto;
	width: 34px;
	background: white;
	border-radius: 10px;
	position: absolute;
	z-index: 5;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	padding-bottom: 10px;
}
.vert-options img{
	width: 30px;
	height: 30px;
	margin-top: 10px;
	margin-left: 2px;
	transition: 0.1s;
}
.vert-options img:hover{
	cursor: pointer;
	background: green;
}
.vert-options:after, .vert-options:before {
	top: 50%;
	left: -20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.vert-options:after {
	border-color: none;
	border-right-color: white;
	border-width: 10px;
	margin-top: -10px;
}
.vert-options:before {
	border-color: none;
	border-right-color: rgba(0, 0, 0, 0.2);
	border-width: 12px;
	margin-top: -12px;
	margin-left: -4px;
}
.hor-options{
	width: 0px;
	height: 34px;
	border-bottom-right-radius: 15px;
	border-top-right-radius: 15px;
	background: white;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-left: 0;
	position: absolute;
	z-index: 5;
	overflow: hidden;
	transition: 0.5s;
}
.hor-options img{
	width: 30px;
	height: 30px;
	margin-left: 10px;
	margin-top: 2px;
}
.hor-options img:hover{
	background: green;
	cursor: pointer;
}
/* CSS for the playground area/lessons */
.color-1{
	color: red;
}
.color-2{
	color: blue;
}
.color-3{
	color: green;
}
.color-4{
	color: orange;
}
.color-5{
	color: purple;
}
.size-1{
	font-size: 12px;
}
.size-2{
	font-size: 22px;
}
.size-3{
	font-size: 32px;
}
.size-4{
	font-size: 42px;
}
.size-5{
	font-size: 52px;
}
.family-1{
	font-family: arial;
}
.family-2{
	font-family: times new roman;
}
.family-3{
	font-family: netto;
}
.family-4{
	font-family: comic sans;
}
.family-5{
	font-family: aleo;
}
.align-1{
	text-align: left;
}
.align-2{
	text-align: center;
}
.align-3{
	text-align: right;
}
.align-4{
	text-align: justify;
}
.style-1{
	text-decoration: underline;
}
.style-2{
	font-weight: 900;
}
.style-3{
	font-style: italic;
}
.style-4{
	text-decoration: line-through;
}
.width-1{
	width: 20%;
}
.width-2{
	width: 40%;
}
.width-3{
	width: 60%;
}
.width-4{
	width: 80%;
}
.width-5{
	width: 100%;
}
.height-1{
	height: 20%;
}
.height-2{
	height: 40%;
}
.height-3{
	height: 60%;
}
.height-4{
	height: 80%;
}
.height-5{
	height: 100%;
}
.background-1{
	background: red;
}
.background-2{
	background: blue;
}
.background-3{
	background: green;
}
.background-4{
	background: orange;
}
.background-5{
	background: purple;
}
.border-1{
	border: 5px solid red;
}
.border-2{
	border: 5px solid blue;
}
.border-3{
	border: 5px solid green;
}
.border-4{
	border: 5px solid orange;
}
.border-5{
	border: 5px solid purple;
}
.radius-1{
	border-radius: 50%;
}
.radius-2{
	border-radius: 40%;
}
.radius-3{
	border-radius: 30%;
}
.radius-4{
	border-radius: 20%;
}
.radius-5{
	border-radius: 10%;
}
.css-styling{
	margin: 0;
	width: auto;
	height: 100%;
	line-height: 36px;
	margin-left: 5px;
	margin-right: 5px;
	font-family: netto;
	text-align: center;
	display: inline-block;
}
.css-styling input{
	width: 40px;
	height: 20px;
	margin-left: 5px;
	margin-right: 5px;
	vertical-align: top;
	margin-top: 7px;
	font-family: netto;
	color: #777;
	font-size: 14px;
	padding-top: 2px;
	text-align: right;
	padding-right: 3px;
}
#kolor input{
	width: 60px;
}

#lesson-map-chart {
	float:right !important;
}

.stu-lesson1 {
	display:none;
}

.stu-lesson2 {
	display:none;
}

.stu-lesson3 {
	display:none;
}

#hidden {
	display:none;
}

.lesson-map {
	width: 820px;
	height: 620px;
	border-radius: 15px;
	background-color: green;
	float: left;
	color: #FFFFFF;
	font-size:20px;
	margin-bottom: 20px;
}

.lesson-map-back-button {
	float: left;
	width:250px;
	padding:20px;
	margin:20px;
	text-align: center;
	font-size: 26px;
	color: #FFFFFF;
	background-color: #46A2D8;
	border-radius: 10px;
	margin-top: 50px;
}
.lesson-map-back-button:hover{
	cursor: pointer;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
}
.lesson-map-continue-button {
	float: left;
	width:240px;
	padding:25px;
	margin:20px;
	text-align: center;
	font-size: 26px;
	color: #FFFFFF;
	background-color: #3BD46B;
	border-radius: 10px;
	text-decoration: none;
}
.lesson-map-continue-button:hover{
	cursor: pointer;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
}
.beta-email{
	width: 100%;
	height: auto;
}
.beta-email p{
	width: 100%;
	padding-top: 15px;
	margin: 0;
	padding-bottom: 15px;
	text-align: center;
	font-size: 37px;
}
.beta-email form{
	padding-bottom: 25px;
}
.beta-email input{
	width: 400px;
	height: 32px;
	font-size: 25px;
	display: block;
	margin: 0 auto;
}
#beta-submit{
	width: 150px;
	height: 30px;
	line-height: 29px;
	margin-top: 15px;
	background: #337ab7;
	color:white;
	font-size: 16px;
	outline: none;
	border: 0;
	border-radius: 5px;
}
#beta-submit:hover{
	cursor: pointer;
	background:#2467a0;
}
.beta-email div{
	font-size: 25px;
	margin-bottom: 5px;
}
.beta-email select{
	width: 300px;
	height: 30px;
	font: 18px netto;
	color: #777;
	margin-bottom: 15px;
}
.beta-email option{
	padding-top: 10px;
	height: 30px;
}
.beta-email textarea{
	width: 100%;
	resize: none;
	height: 300px;
	font-family: netto;
	color: #777;
	font-size: 16px;
	padding: 5px;
}
#right-button {
	float:right;
	margin-right: 20px;
	position: relative;
}

#left-button {
	float:left;
	margin-left: 20px;
	position: relative;
}

.child-manage-button {
	background-color: #F9ED32;
	color: #000000;
	font-weight: bold;
	font-size: 24px;
	border-radius: 15px;
	padding:10px;
	width: 300px;
	text-align: center;
}

.child-manage-button:hover {
	cursor: pointer;
	text-decoration: underline;
}

.bottom-child-manage {
	bottom: -70px;
	left: -22px;
	position: absolute;
	background-color: #CECECE;
	height:50px;
	float:left;
	padding: 10px;
	width: 1180px;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
}

.search-description {
	margin-right:10px;
	margin-left: 50px;
	width:300px;
}

#reg-child {
	margin-left:30px !important;
}

.error-message {
	display: hidden;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
}

.title-banner {
	font-weight: bold;
	color: #FFFFFF;
	font-size: 30px;
	margin-bottom: 10px;
	background-color: #EF8600;
	border-radius: 10px;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	max-width: 300px;
	width:auto;
	text-align: center;
	display: inline-block;
}

.left-column {
	float: left;
	width: 33%;
}

.right-column {
	float: right;
	width: 33%;
}

.center-column{
	display: inline-block;
	width: 33%;
}

.student-detail-holder {
	background:white;
	margin-top: 25px;
	margin-bottom: 25px;
	width: 970px;
	margin-left: 0;
	height: auto;
	float: left;
	padding:20px;
	border-radius: 15px;
}

.return-to-dash-button {
	float: right;
	width:200px;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	top:0;
	right:0;
	text-align: center;
	font-size: 26px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #46A2D8;
	border-radius: 10px;
}

.recent-lesson {
	float: left;
	width: 540px;
	background-color: #3BD46B;
	font-weight: bold;
	font-size: 30px;
	color: #FFFFFF;
	border-radius: 15px;
	padding: 15px;
	margin-top: 15px;
}
.relativity{
	position: relative;
	margin-bottom: 0px !important;
}
.full-wid{
	width: 300px;
}
.feedback-overlay{
	position: fixed;
	width: 600px;
	height: 200px;
	background: white;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
	top: calc(50% - 100px);
	left: calc(50% - 300px);
	transition: 1s;
	z-index: -1;
	opacity: 0;
}
#feed-close{
	top: calc(50% - 114px);
	right: calc(50% - 314px);
}
#feed-close img{
	margin-left: 0 !important;
	width: 15px !important;
	margin-top: 6.5px !important;
}
#feed-close img:hover{
	content: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Fimages%2Fwhite-x.png");
}
.feedback-overlay p{
	background: #f7941d;
	text-align:center;
	margin: 0;
	height: 75px;
	line-height: 77px;
	color: white;
	font-size: 37px;
}
.feedback-overlay img{
	width: 40px;
	margin-top: 30px;
}
.feedback-overlay img:hover{
	content: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Fimages%2Fstar.png");
	cursor: pointer;
}
.feedback-overlay img:first-child{
	margin-left: 80px
}
.entspannen{
	width: 200px;
	display: inline-block;
	float: left;
	margin-left: 85px;
}
.entspannen:last-child{
	margin-left: 0;
	float: right;
	margin-right: 85px;
	text-align: right;
}
.thanks{
	font-size: 25px;
	color: #777;
	display: block;
	width: 100%;
	text-align: center;
	height: 125px;
	line-height: 127px;
}
.inline-title {
	font-size: 30px;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 10px;
}
.child-box {
	margin:20px;
	display: inline-block;
	width: 200px;
	border-radius: 15px;
	margin-right: calc(170px/3);
	height: 250px;
	color: white;
	background: #46A2D8;
	text-decoration: none;
	float: left;
	margin-bottom: 25px;
}

.child-box img{
	width: 150px;
	margin-left: 25px;
	margin-top: 25px;
}
.child-box p{
	font-size: 30px;
	margin-top: 25px;
	margin-bottom: 25px;
	text-align: center;
	color: #FFFFFF;
	font-weight: 900;
}
.scaled-object{
	width: 100%;
	height: 100%;
	outline: 0;
	border: 0;
	background: white;
}
.joinbeta{
	position: fixed;
	top: 0;
	width: 250px;
	height: 40px;
	background: #f9ed32;
	color: #000;
	font-size: 25px;
	text-align: center;
	display: block;
	line-height: 42px;
	text-decoration:none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 2px solid rgba(0, 0, 0, 0.7);
	border-top: 0;
	left: calc(50% - 125px);
	//box-shadow: 0px 0px 4px #ad0465;
	z-index: 76;
}
.joinbeta:hover{
	text-decoration: underline;
}
.smiley-holder {
	overflow-y: hidden;
	overflow-x: scroll;
	height: 100px;
	width:100%;
	white-space: nowrap;
	border-top-style: solid;
	border-bottom-style: solid;
	border-width: 2px;
	float:left;
	clear:left;
	display: inline-block;
}
.smiley-holder img{
	width: 70px;
}
.smiley-image {
	margin-top: 10px;
	margin-left: 2.5px;
	display: inline-block;
}
.smiley-container {
	display: inline-block;
	float: left;
	z-index: 3;
	width: 100%;
}
.achievement-error {
	font-size: 26px;
	font-weight: bold;
	padding: 10px;
	margin: 10px;
	background-color: #f5f5f5;
	border: 3px solid #f0624a;
	border-style: solid inset;
}
.t-container{
	height: auto;
}
.image-wrapper{
	height: 600px;
	width: 100%;
	position: relative;
	overflow: hidden;
	min-width: 970px;
}
.image-wrapper img{
	position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
	opacity: 1;
}
.magic-shield{
	height: 600px;
	width: 100%;
	position: absolute;
	top: 60px;
	left: 0;
	background: #000;
	opacity: 0.7;
	z-index: 1;
	min-width: 970px;
}
.heeder{
	width: 100%;
	height: 60px;
	background: #0566c6;
	min-width: 970px;
}
.heeder img{
	height: 50px;
	width: auto;
	margin-top: 5px;
}
.navi{
	display: inline-block;
	float: right;
}
.navi a{
	text-decoration: none;
}
#within{
	height: 50px;
	line-height: 50px;
}
.navi div{
	height: 30px;
	display: inline-block;
	margin-left: 15px;
	line-height: 26px;
	color: white;
	font-size: 18px;
	font-family: aleo;
	border: 2px solid white;
	border-radius: 20px;
	padding: 2px 15px;
	margin-top: 11px;
	transition: 0.2s;
	-webkit-user-select: none;
}
.navi div:hover{
	//text-decoration: underline;
	cursor: pointer;
	color: #0566c6;
	background: white;
	font-weight: bold;
}
.seller{
	width: 100%;
	height: 300px;
	background: white;
}
.float-wrap{
	overflow: hidden;
}
.information{
	display: inline-block;
	width: calc(90%/3);
	margin-right: 5%;
	height: 100%;
	float: left;
	color: black;
	font-family: netto;
}
.information:last-child{
	margin-right: 0;
}
.information img{
	width: 125px;
	display: block;
	margin: 0 auto;
	margin-top: 27px;
}
.information p{
	text-align:center;
	font-size: 25px;
	font-weight: bold;
	margin: 0px;
	margin-top: 10px;
	//margin-bottom: 5px;
}
.information div{
	width: 100%;
	text-align: center;
	font-family: aleo;
}
.overlay-text{
	position: absolute;
	z-index: 1;
	top: 234px;
	left: calc(50% - 485px);
	width: 970px;
	color: white;
}
.overlay-text h1{
	font-family: netto;
	color: white;
	text-align: center;
	font-size: 60px;
	font-weight: 900;
	//text-shadow: 2px 2px black;
	//-webkit-text-stroke: 0.5px black;
	//-webkit-text-fill-color: white;
	margin: 0;
}
.overlay-text span{
	display: block;
	width: 100%;
	text-align:center;
	font-family: netto;
	//text-shadow: 1.5px 1.5px black;
	font-size: 36px;
}
.link-button{
	width: 175px;
	height: 60px;
	background: transparent;
	color: #fff !important;
	display: inline-block;
	float: left;
	margin-left: 260px;
	margin-top: 35px;
	line-height: 62px;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	border-radius: 13px;
	box-shadow: 0px 0px 5px #444;
	text-decoration: none !important;
	-webkit-user-select: none;
	border: 3px solid #fff;
}
.link-button:last-child{
	margin-left: 50px;
}
.link-button:hover{
	//background: white;
	//border-color: blue;
	background: #0566c6;
	transition: 0.2s;
	//color: blue;
	cursor: pointer;
}
.video-container{
	background: #f9741d;
	height: 315px;
	width: 100%;
	min-width: 970px;
}
.instructional-video{
	width: 560px;
	height: 315px;
	margin-top: 0px;
	display: inline-block;
	float: right;
}
.info-about{
	width: 390px;
	height: 315px;
	margin-top: 10px;
	float: left;
	display: inline-block;
}
.info-about p{
	text-align: center;
	font-size: 37px;
	font-weight: bold;
	font-family: aleo;
	margin-bottom: 15px;
	color: white;
	width: 300px;
	margin-left: 45px;
	margin-top: 65px;
}
.info-about div{
	color: white;
	font-family: aleo;
	font-size: 17px;
}
#float-right{
	float: right;
	color: black !important;
}
#float-left{
	float: left;
}
#float-left img{
	height: 315px;
}
.teach-container{
	background: white;
	height: 315px;
	width: 100%;
	min-width: 970px;
	//padding-top: 25px;
	//padding-bottom: 25px;
}
#black{
	color: black !important;
}
#maarg{
	margin-top: 50px;
	//margin-left: auto;
	color: black;
}
.advisory{
	width: 100%;
	height: 200px;
	background: #fff;
	min-width: 970px;
}
.advisory p{
	font-size: 37px;
	color: #000;
	text-align: center;
	margin: 25px;
	margin-top: 0;
	padding-top: 15px;
	font-family: aleo;
	margin-bottom: 15px;
	font-weight: bold;
	color: white;
}
.wrapping{
	width: auto;
	display: inline-block;
	margin: 0 auto;
	height: auto;
	margin-left: 414.25px;
}
.logos{
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	//margin-left: 203.5px;
	padding-top: 20px;
	display: block;
}
.logos img{
	height: 60px;
	display: inline-block;
	float: left;
	margin-right: 30px;
}
.logos img:last-child{
	margin-right: 0;
}
.advisory hr{
	border: 0;
	height: 0;
	border-top: 1px solid #777;
	margin-bottom: 20px;
	width: 970px;
	margin-left: 0px;
}
#segnup{
	background: white;
	color: #0566c6;
	font-weight: bold;
	-webkit-user-select: none;
}
#segnup:hover{
	background: #efefef;
}
#nottop{
	margin-top: 15px;
	margin-left: 30.8334px;
	font-weight: normal !important;
	margin-bottom: 5px;
}
#schools{
	background: #0566c6;
}
.no-margin-top{
	margin-top: 0;
}
.already-have{
	width: 100%;
	height: 60px;
	background: #f5f5f5;
	border-top: 1px solid #dbdbdb;
}
.wrapping-paper{
	width: 500px;
	height: auto;
	margin: 0 auto;
}
#lesser{
	width: 275px;
}
#greater{
	width: 508px;
}
#google-offset{
	width: 296px;
}
.wrapping-paper div{
	display: inline-block;
	float: left;
}
.i-already{
	height: 60px;
	line-height: 62px;
	font-size: 16px;
}
.signi{
	margin-left: 20px;
	width: 80px;
	height: 35px;
	border-radius: 3px;
	background: #f0624a;
	color: white;
	line-height: 36px;
	font-size: 16px;
	text-align: center;
	margin-top: 12.5px;
}
.signi:hover{
	cursor: pointer;
	background: #d45742;
}
.coming{
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.soon{
	color: white;
	font-size: 100px;
	text-align: center;
	font-family: aleo-bold;
	margin: 0;
	width: 100%;
}
.hoffentlich{
	color: white;
	font-family: netto;
	font-size: 22px;
	text-align: center;
	width: 550px;
	margin: 0 auto;
	margin-top: 5px;
}
.hoffentlich a{
	color: #00aeef;
	text-decoration: none;
}
.hoffentlich a:hover{
	cursor: pointer;
	text-decoration: underline;
}
.comeon{
	position: absolute;
	top: 35%;
	left: calc(50% - 290px);
}
.unlock-overlay{
	top: calc(50% - 110px);
	left: calc(50% - 225px);
	width: 450px;
	height: 220px;
	background: white;
	z-index: -1;
	position: fixed;
	opacity: 0;
	transition: 1s;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.8);
}
#unlock-close{
	right: calc(50% - 239px);
	top: calc(50% - 124px);
}
.center-text{
	text-align: center;
	font-weight: 400;
	font-size: 32px;
	margin-top: 25px;
	margin-bottom: 10px;
}
#wide-load{
	display: inline-block;
	width: auto;
	padding: 0 10px;
	height: 35px;
	line-height: 36px;
	border-radius: 4px;
	margin-left: 114px;
}

.left-menu{
	width: 375px;
	background: #444;
	height: calc(100% - 60px);
	height: -moz-calc(100% - 60px);
	padding: 0;
	display: inline-block;
	float: left;
	position: absolute;
}
.menu-title{
	height: 50px;
	line-height: 50px;
	width: calc(371px / 3);
	padding: 0;
	margin: 0;
	font-family: aleo;
	font-weight: bold;
	color: white;
	font-size: 18px;
	display: inline-block;
	float: left;
	border-right: 2px solid #dbdbdb;
	text-align: center;
	-webkit-user-select: none;
}
.menu-title:hover{
	background: #dbdbdb;
	color: #444;
	cursor: pointer;
}
.menu-title:last-child{
	border-right: 0;
}
.top-bar-wrapper{
	height:50px;
	width: 100%;
	border-bottom: 2px solid #dbdbdb;
}
.menu-content{
	padding: 20px;
	width: 335px;
	height: calc(100% - 182px);
	border-bottom: 2px solid #dbdbdb;
	display: none;
	overflow: auto;
}
.item{
	width: 40%;
	background: #00aeef;
	color: #fff;
	height: 30px;
	margin-right: 6.66666%;
	margin-left: 6.66666%;
	font-family: netto;
	font-size: 16px;
	line-height: 33px;
	text-align: center;
	display: inline-block;
	float: left;
	border-radius: 15px;
	-webkit-user-select: none;
	//border: 2px solid #dbdbdb;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
	margin-bottom: 20px;
}
.item:hover{
	cursor: pointer;
	background: #0194cc;
}
.item:nth-child(2n){
	margin-left: 0;
}
.action-container{
	width: 250px;
	height: calc(100% - 60px);
	height: -moz-calc(100% - 60px);
	position: absolute;
	left: 375px;
}
.instructions{
	width: 100%;
	height: 50px;
	border-bottom: 2px solid #444;
	line-height: 50px;
	text-align:center;
	color: #444;
	font-family: aleo;
	font-size: 18px;
	font-weight: bold;
	margin: 0;
}
.inner-sequence{
	width: 134px;
	padding: 0 58px;
	padding-top: 20px;
	height: calc(100% - 162px);
	border-bottom: 2px solid #444;
	overflow: auto;
}
.doublews{
	height: calc(50% - 118px) !important;
}
.inner-sequence div{
	margin: 0;
	width: 134px;
	margin-bottom: 10px;
}
.run{
	height: 45px;
	width: 175px;
	margin-left: 37.5px;
	background: green;
	color: white;
	border-radius: 4px;
	text-align: center;
	line-height: 47px;
	font-size: 25px;
	font-weight: bold;
	-webkit-user-select: none;
	margin-top: 22px;
}
.run:hover{
	cursor: pointer;
	background: #006300;
}
.sprite-container{
	width: calc(100% - 625px);
	height: calc(100% - 60px);
	height: -moz-calc(100% - 60px);
	right: 0;
	background: #fff;
	position: absolute;
	overflow: hidden;
}
.sprite-container img{
	width: 200px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	transition: 1s;
}
#double-sprite img{
	width: 200px;
	margin: auto;
	position: absolute;
	top: calc(50% - 100px);
	left: calc((100% - 400px)/3);
	margin: 0;
	transition: 1s;
}
#double-sprite img:nth-child(2n){
	width: 200px;
	margin: auto;
	position: absolute;
	top: calc(50% - 100px);
	left: calc((2*((100% - 400px)/3)) + 200px);
	margin: 0;
	transition: 1s;
}
.cs-embed{
	width: 100%;
	background: #0566c6;
	height: 300px;
	overflow: hidden;
	padding-top: 0px;
}
.change-embed-petition{
	margin-left: 185px;
	height: 598px !important;
	overflow: hidden;
	background: transparent;
}
#cc{
	color: white;
	font-size: 37px;
	text-align: center;
	padding-top: 20px;
	margin: 0;
	padding-bottom: 20px;
	font-family: aleo;
	font-weight: bold;
}
#reset{
	left: calc(100% - 170px);
	bottom: 28px;
	background: purple;
}
#garbage-drop{
	position: absolute;
	top: 60px;
	left: 0;
	display: none;
	background: rgba(255, 0, 0, 0.5);
	color: rgba(255, 255, 255, 0.8);
	line-height: 100%;
	text-align: center;
	font-family: aleo;
	font-size: 80px;
	font-weight: bold;
	justify-content:center;
	align-items:center;
}
#save-sprite{
	background: red;
	left: 112.5px;
	bottom: 28px;
}
.sprite{
	width: 134px;
	margin-left: 20px;
	margin-right: 30px;
	background: #f0f0f0;
	border-radius: 10px;
	height: auto;
	padding-top: 17px;
	padding-bottom: 17px;
	display: inline-block;
	float: left;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
	margin-bottom: 20px;
}
.sprite:hover{
	cursor: pointer;
	border: 3px solid #46a2d8;
	width: 128px !important;
	padding-top: 14px;
	padding-bottom: 14px;
}
.sprite:hover > img{
	margin-left: 14px !important;
}
.sprite:nth-child(2n){
	margin-left: 0px;
	margin-right: 0px;
}
.sprite img{
	width: 100px;
	margin-left: 17px;
}
.position{
	font-family: aleo;
	color: black;
	top: 5px;
	right: 10px;
	font-weight: bold;
	position: absolute;
}
.duration-bar{
	background: #ccc;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15px;
	border-top: 1px solid #444;
	border-bottom: 1px solid #444;
}
#prog{
	width: 0%;
 	background: green;
}
.container-color{
	position: absolute;
	top: 5px;
	left: 10px;
	width: 70px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	height: 40px;
	background: #fff;
}
.container-color div{
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
	width: 12px;
	height: 12px;
	display: inline-block;
	float: left;
	margin-left: 8.5px;
	margin-top: 5.333px;
}
.container-color div:hover{
	cursor: pointer;
	box-shadow: 0px 0px 1px #00aeef;
}
.sound{
	background: #92278f;
}
.sound:hover{
	background: #6e0d7f;
}
.rhetoric{
	width: 250px;
	margin: 0 auto;
	text-align:center;
	font-size: 20px;
	margin-top: 25px;
	margin-bottom: 20px;
}
#g-lo{
	margin-top: 84.75px;
}
#rhet{
	margin-top: 0px;
}
#run-animation{
	bottom: 28px;
}
.speech-bubble{
	width: auto;
	padding: 5px;
	border: 2px solid #444;
	height: 20px;
	position: absolute;
	left: 50%;
	z-index: 50;
	border-radius: 10px;
	line-height: 20px;
	background: white;
	font-size: 20px;
	color: black;
}
.speech-bubble:after, .speech-bubble:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.speech-bubble:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 10px;
	margin-left: -10px;
}
.speech-bubble:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #444;
	border-width: 13px;
	margin-left: -13px;
}
#msg{
	width: 150px;
}
.informative{
	font-weight: normal;
	font-size: 16px;
	height: 10px;
	width: 100%;
	line-height: 40px;
}
.featured-tab{
	position: absolute;
	top: 55px;
	left: 0px;
	width: 100px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 18px;
	color: #0566c6;
	background: white;
	//border: 1px solid #444;
	border-bottom: 0;
	//border-right: 1px solid #444;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
	background: #dbdbdb;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}
.featured-tab:nth-child(2n){
	left: 100px;
}
.featured-tab:hover{
	cursor: pointer;
	background: #fff;
}
.featured{
	background: transparent;
	width: 100%;
	height: 200px;
	//border: 1px solid #444;
	overflow: hidden;
}
#s{
	display: none;
}
.arrow{
	height: 75px;
	position: absolute;
	top: 147.5px;
	opacity: 0.7;
	z-index: 5;
}
.arrow:hover{
	cursor: pointer;
	opacity: 0.9;
}
#right-a{
	right: 10px;
}
#left-a{
	left: 10px;
}
#left-margin{
	margin-right: 50px;
}
.featured div{
	width: 300px;
	display: inline-block;
	float: left;
	height: 100%;
}
.p-view{
	width: 289.5px;
	height: 200px;
	margin-right: 22px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
	display: inline-block;
	float: left;
	text-decoration: none;
	color: #777;
}
.p-view img{
	width: 289.5px;
	height: 163px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	//padding: 12.5px;
	//background: #f5f5f5;
}
.p-view p{
	font-size: 20px;
	height: 36px;
	line-height: 37px;
	margin-top: 0px;
	text-align: center;
	width: 169px;
	overflow: ellipsis;
	display: inline-block;
	padding: 0;
	float: left;
}
.p-view span{
	display: inline-block;
	width: 52.25px;
	height: 39px;
	line-height: 22px;
	padding-left: 8px;
	font-size: 14px;
	text-decoration: none;
	//padding-top: 0px;
	//vertical-align: top;
	float: left;
}
.p-view span:hover{
	background: #444;
	color: white;
}
.p-view span:hover img{
	content: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Fimages%2Fwhite-edit.png");
}
.p-view span p{
	display: inline-block;
	width: 27.25px;
	margin: 0;
	height: 39px;
	line-height: 40px;
	font-size: 14px;
	float: left;
}
.p-view span img{
	height: 20px;
	width: 20px;
	padding-top: 8px;
	padding-right: 0px;
	border-bottom: 0 !important;
	vertical-align: top;
}
.p-view:hover{
	cursor: pointer;
	box-shadow: 0 0 2px rgb(0, 0, 0);
}
.p-view span:nth-child(4n){
	padding-left: 6px;
	width: 54.25px;
	z-index: 50;
}
.p-view span:nth-child(4n) img{
	padding-left: 2px;
	width: 22px;
	height: 27px;
	padding-top: 6px;
}
.p-view span:nth-child(4n):hover img{
	content: url("/?originalUrl=https%3A%2F%2Fcodemoji.com%2Fimages%2Fwhite-eye.png");
}
.project-title{
	height: 36px;
	font-size: 18px;
	width: 100%;
	text-align:center;
	padding: 0;
	margin: 0;
	line-height: 36px;
	display: block;
	font-weight: normal;
	position: absolute;
	top: 164px;
	background: #fff;
}
.slight-height{
	height: 200px;
	margin-bottom: 0;
	position: relative;
	margin-right: 50.75px;
}
.slight-height:nth-child(n){
	margin-right: 50.75px;
}
.inner-track{
	width: 5400px !important;
	position: relative;
	display: block;
	left: 0;
	top: 0;
	margin-right: 0 !important;
	transition: 0.5s;
}
.kopf{
	background: #0566c6;
	width: 100%;
	/*min-width: 970px;*/
	height: 60px;
}
.logo-link img{
	height: 35px;
	margin-top: 12.5px;
}
.nav-links{
	width: auto;
	overflow: hidden;
	height: 60px;
	display: inline-block;
	float: right;
}
.nav-links a{
	display: inline-block;
	float: left;
	height: 60px;
	line-height: 60px;
	color: white;
	font-family: aleo;
	font-weight: bold;
	padding: 0px 15px;
	text-decoration: none;
	font-size: 18px;
}
.nav-links a:hover{
	color: #0566c6;
	background: #f0f0f0;
}
.advert{
	width: 35%;
	height: 400px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
	text-decoration: none;
	display: inline-block;
	float: left;
	margin-left: 8%;
	margin-top: 25px;
	margin-bottom: 25px;
	transition: 0.5s;
}
.advert:last-of-type{
	margin-left: 14%;
}
.advert img{
	width: 200px;
	margin-left: 69.75px;
	margin-top: 25px;
}
.advert p{
	width: 100%;
	height: 50px;
	font-size: 37px;
	line-height: 50px;
	font-family: aleo;
	font-weight: bold;
	color: #444;
	text-align: center;
	margin-bottom: 15px;
	margin-top: 30px;
}
.advert div{
	width: 80%;
	margin: 0 auto;
	font-size: 18px;
	color: #777;
	text-align:center;
}
.advert:hover{
	background: #f0f0f0;
}
.beta-sticker{
	position: absolute;
	top: 0px;
	right: calc(50% - 407px);
	height: 100px;
	width: 100px !important;
}
#direct{
	width: 242.5px;
	height: 300px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
	text-decoration: none;
	display: inline-block;
	float: left;
	margin-left: 5%;
	margin-right: 2.5%;
	margin-top: 25px;
	margin-bottom: 25px;
	transition: 0.5s;
}
#direct img{
	width: 150px;
	margin-left: 46.25px;
	margin-top: 40px;
}
#direct p{
	font-size: 20px;
	margin-bottom: 10px;
	margin-top: 25px;
}
#direct div{
	font-size: 16px;
}
#direct2{
	width: 242.5px;
	height: 300px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
	text-decoration: none;
	display: inline-block;
	float: left;
	margin-left: 5%;
	margin-right: 2.5%;
	margin-top: 25px;
	margin-bottom: 25px;
	transition: 0.5s;
}
#direct2 img{
	width: 150px;
	margin-left: 46.25px;
	margin-top: 40px;
}
#direct2 p{
	font-size: 20px;
	margin-bottom: 10px;
	margin-top: 25px;
}
#direct2 div{
	font-size: 16px;
}
#direct2:hover{
	cursor: pointer;
}
.direct:hover{
	background: #f0f0f0;
}
#square{
	margin-top: 20px !important;
	width: 115px !important;
	margin-left: 63.75px !important;
}
#darn{
	margin-top: 16px !important;
}
#squared{
	margin-top: 24px !important;
	width: 115px !important;
	margin-left: 63.75px !important;
}
#darnd{
	margin-top: 20px !important;
}
#niedem{
	background: green;
	left: 650px;
	bottom: 28px;
	display: none;
}
#js-beta{
	position: absolute;
	z-index: 2;
	top: 25px;
	height: 100px;
	width: 100px !important;
	margin: 0 !important;
	right: calc(50% - 437px);
}
#combo-beta{
	position: absolute;
	z-index: 2;
	top: 375px;
	height: 100px;
	width: 100px !important;
	margin: 0 !important;
	left: calc(50% - 294px);
}
.progress-bar{
	width: 350px;
	height: 8px;
	background: #f5f5f5;
	margin-top: 5px;
	border-radius: 15px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
	border: 1px solid #fff;
}
.inner-progress{
	height: 8px;
	border-radius: 15px;
	border-bottom-left-radius: 15px;
	background: #348834;
}
.forgot{
	color: #337ab7;
	height: auto;
	display: block;
	width: 250px;
	margin-bottom: 5px;
	margin-top: 2px;
	font-size: 14px;
	text-decoration: none;
}
.forgot:hover{
	cursor: pointer;
	text-decoration: underline;
}
#email-popup{
	background: #f0624a;
	color: white;
}
#email-popup span{
	width: 100%;
	font-family: aleo;
	font-size: 36px;
}
.left-sidebar{
	width: 350px;
	display: inline-block;
	float: left;
	height: 100%;
	background: #666;
}
.left-sidebar a{
	width: calc(100% - 35px);
	height: 60px;
	color: white;
	font-family: timeburner;
	text-align: left;
	padding-left: 35px;
	font-size: 20px;
	text-decoration: none;
	display: block;
	line-height: 60px;
	border-bottom: 2px solid white;
}
.left-sidebar a:hover{
	background: #555;
}
#slight-top-margin{
	margin-top: 10px !important;
	margin-bottom: 2px !important;
}
#slight-bottom-margin{
	margin-bottom: 5px !important;
}
#slight-less-top-margin{
	margin-top: 5px !important;
	margin-bottom: 2px !important;
}
#grade-recommendation{
	font-size: 14px !important;
	margin-top: 8px;
	color: #444;
}
#intermediate-beta{
	position: absolute;
	z-index: 2;
	top: 25px;
	height: 100px;
	width: 100px !important;
	margin: 0 !important;
	right: calc(50% - 121px);
}
.instructionals{
	background: #fff;
  border-bottom: 1px solid #dbdbdb;
	border-top: 1px solid #dbdbdb;
	height: 60px;
	line-height: 62px;
	text-align: center;
	font-size: 18px;
}
.instr{
	overflow: hidden;
	height: 346px;
}
.instr-options{
	padding-top: 11px;
	height: 211px;
	background: #f5f5f5;
}
.emoji-option{
	display: inline-block;
	width: 200px;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
	margin-left: 25px;
	height: 200px;
	color: white;
	background: #fff;
	text-decoration: none;
	transition: 0.2s;
	float: left;
	margin-bottom: 25px;
	position: relative;
}
.emoji-option:hover{
	transform: scale(1.03);
	transition: 0.2s;
	cursor: pointer;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}
.emoji-option img{
	width: 125px;
	margin: 37.5px;
}
.emoji-option2{
	display: inline-block;
	width: 200px;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
	margin-left: 25px;
	height: 200px;
	color: white;
	background: #fff;
	text-decoration: none;
	transition: 0.2s;
	float: left;
	margin-bottom: 25px;
	position: relative;
}
.emoji-option2:hover{
	transform: scale(1.03);
	transition: 0.2s;
	cursor: pointer;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}
.emoji-option2 img{
	height: 60px;
	margin: 0 auto;
	display: block;
	margin-top: 65px;
}
.submit-answer{
	height: 61px;
	line-height: 62px;
	width: 100%;
	border-top: 1px solid #dbdbdb;
	text-align: center;
  font-size: 18px;
}
#answer{
	background: #888;
	bottom: 16px;
	left: 275px;
}
#answer:hover{
	cursor: default;
	box-shadow: none;
}
#padding-bottom-gradebook{
	padding-bottom: 166px;
}
.prog-bar{
	width: 100% !important;
	background: #dbdbdb;
	height: 15px;
	border-top: 1px solid #999;
	margin: 0 !important;
	margin-top: 26px !important;
}
.inner-prog-bar{
	width: 50% !important;
	background: green;
	margin: 0 !important;
	display: block;
  height: 100%;
  box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}
@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
.inner-prog-bar:after{
	content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
.class-lesson{
	display: inline-block;
	position: relative;
	width: 100px;
	height: 150px;
	margin-right: 32.6px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
	text-decoration: none;
	color: #377dbb;
	background: #f5f5f5;
	margin-bottom: 22px;
}
.class-lesson a{
	display: block;
	width: 100%;
	height: auto;
	text-decoration: none;
	color: #23527c;
}
.class-lesson a:hover{
	text-decoration: none !important;
	color: #23527c !important;
}
.class-lesson a:hover > span i{
	text-decoration: none !important;
	color: #23527c !important;
}
.class-lesson:hover{
	box-shadow: 0 0 2px rgba(0, 0, 0, 1);
	cursor: pointer;
	text-decoration: none !important;
}
.class-lesson span i{
	text-align: center;
	display: block;
	width: 100%;
	margin-top: 25px;
	margin-bottom: 18px;
}
.class-lesson span i:hover{
	color: #23527c !important;
}
.class-lesson p{
	text-align: center;
	font-size: 15px;
	margin-top: 10px;
	margin-bottom: 5px;
	font-weight: 600;
	height: 18px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.class-lesson p:hover{
	color: #23527c !important;
}
.class-lesson div{
	height: 28px;
	width: 100%;
	line-height: 30px;
	font-size: 14px;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	color: green;
}
.class-lesson:nth-child(7n){
	margin-right: 0;
}
#not-done{
	color: white;
	background: red;
}
#is-done{
	color: white;
	background: green;
}
.larger-header{
	font-size: 22px;
}
.blocker{
	position: absolute;
	background: #000;
	opacity: 0.9;
	width: 242.5px;
	height: 300px;
	top: 127px;
	left: calc(50% - 461px);
	z-index: 50;
}
.blocker p{
	width: 100%;
	margin-top: 70px;
	font-size: 48px;
	color: white;
	text-align: center;
	font-weight: bold;
}
.blocker div{
	color: white;
	font-size: 16px;
	text-align: center;
	width: 80%;
	margin: 0 auto;
}
.mastered{
	position: absolute;
	background: rgb(0, 60, 0);
	opacity: 0.9;
	width: 242.5px;
	height: 300px;
	top: 127px;
	left: calc(50% - 461px);
	z-index: 49;
}
.mastered p{
	width: 100%;
	margin-top: 70px;
	font-size: 48px;
	color: white;
	text-align: center;
	font-weight: bold;
}
.mastered div{
	color: white;
	font-size: 16px;
	text-align: center;
	width: 80%;
	margin: 0 auto;
}
#dashb{
	background: green;
	left: calc(50% - 250px);
	top: 245px;
	height: 50px;
	width: 200px;
	font-size: 22px;
	line-height: 50px;
}
#playg{
	top: 245px;
	left: calc(50% + 50px);
	height: 50px;
	width: 200px;
	font-size: 22px;
	line-height: 50px;
}
.coding-area{
	width: 625px;
	height: calc(100% - 60px);
	display: inline-block;
	float: left;
}
.characters{
	width: 120px;
	background: #444;
	height: calc(100% - 12.5px);
	padding-top: 12.5px;
	overflow-y: scroll;
	display: inline-block;
	float: left;
}
.character-wrapper{
	width: 75px;
	background: #f0f0f0;
	border-radius: 10px;
	height: auto;
	padding-top: 12.5px;
	padding-bottom: 12.5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
	margin-left: 12.5px;
	margin-bottom: 12.5px;
}
.characters img{
	width: 60px;
	margin-left: 7.5px;
	margin-top: 0px;
}
.character-wrapper:hover{
	cursor: pointer;
	border: 2px solid #46a2d8;
	width: 71px !important;
	padding-top: 10.5px;
	padding-bottom: 10.5px;
}
.character-wrapper:hover > img{
	margin-left: 5.5px !important;
}
.right-side{
	right: 0px;
	left: auto;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}
.right-side img{
	transform: rotate(180deg);
}
#run-js{
	left: 285px;
	top: calc(50% - 50px);
}
.led-red {
	margin-left: 8px;
  width: 24px;
  height: 24px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkYellow 1s infinite;
  -moz-animation: blinkYellow 1s infinite;
  -ms-animation: blinkYellow 1s infinite;
  -o-animation: blinkYellow 1s infinite;
  animation: blinkYellow 1s infinite;
}

.led-red:hover{
	cursor: pointer;
}

@-webkit-keyframes blinkYellow {
    from { background-color: #F00; }
    50% { background-color: #A00;}
    to { background-color: #F00; }
}
@-moz-keyframes blinkYellow {
    from { background-color: #F00; }
    50% { background-color: #A00; }
    to { background-color: #F00; }
}
@-ms-keyframes blinkYellow {
    from { background-color: #F00; }
    50% { background-color: #A00; }
    to { background-color: #F00; }
}
@-o-keyframes blinkYellow {
    from { background-color: #F00; }
    50% { background-color: #A00; }
    to { background-color: #F00; }
}
@keyframes blinkYellow {
    from { background-color: #F00; }
    50% { background-color: #A00;}
    to { background-color: #F00; }
}

.led-blue {
  margin-left: 8px;
  width: 24px;
  height: 24px;
  background-color: #24E0FF;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 14px;
}

.led-yellow {
  margin-left: 8px;
  width: 24px;
  height: 24px;
  background-color: #FF0;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 12px;
}

.led-green {
  margin-left: 8px;
  width: 24px;
  height: 24px;
  background-color: #ABFF00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
}

.led-black{
	margin-left: 8px;
  width: 24px;
  height: 24px;
  background-color: #444;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #222 0 -1px 9px, #666 0 2px 12px;
}

#help-button{
	position: absolute;
	top: 65px;
	z-index: 85;
	left: 5px;
}

#help-button:hover{
	cursor: pointer;
}
.buddy{
	z-index: 50;
	position:absolute;
	left: calc(30% - 50px);
	bottom: 0px;
	width: 100px;
}
#margin-right{
	margin-right: 20px;
}
#more-top-margin{
	margin-top: 25px;
}
.cover-trial{
	position: absolute;
	width: 75px;
	height: 10px;
	background: white;
	left: calc(50% - 470px);
	top: 365px;
	z-index: 95;
}
#link-cover{
	left: calc(50% + 400px);
	height: 15px;
	top: 363px;
}
#cover2{
	top: 703px;
}
#link-cover2{
	left: calc(50% + 400px);
	height: 15px;
	top: 697px;
}
#cover3{
	top: 1041px;
}
#link-cover3{
	left: calc(50% + 400px);
	height: 15px;
	top: 1035px;
}
.trash{
	position: absolute;
	z-index: 50;
	top: 330px;
	height: 35px;
	left: calc(60% - 56px);
	transition: 1s;
	padding: 20px;
}
.trash:hover{
	cursor: pointer;
	transform: scale(1.2);
}
.refresh{
	position: absolute;
	z-index: 50;
	top: 40px;
	height: 40px;
	width: 40px;
	left: calc(60% - 46px);
	transition: 1s;
}
.refresh:hover{
	cursor: pointer;
	transform: rotate(360deg);
}
.js-refresh{
	position: absolute;
	z-index: 50;
	top: 80px;
	height: 40px;
	width: 40px;
	right: 10px;
	transition: 1s;
}
.js-refresh:hover{
	cursor: pointer;
	transform: rotate(360deg);
}
.js-double-refresh{
	position: absolute;
	z-index: 50;
	top: 60px;
	height: 40px;
	width: 40px;
	right: 10px;
	transition: 1s;
}
.js-double-refresh:hover{
	cursor: pointer;
	transform: rotate(360deg);
}
.bar:nth-child(7n - 4){
  fill: #F08080;
}
.bar:nth-child(7n - 3){
  fill: #20B2AA;
}
.bar:nth-child(7n - 2){
  fill: #eeb422;
}
.bar:nth-child(7n - 1){
  fill: #008000;
}
.bar:nth-child(7n){
  fill: #0e2f44;
}
.bar:nth-child(7n + 1){
  fill: #cb4541;
}
.bar:nth-child(7n + 2){
  fill: steelblue;
}
.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}
.chart-header{
	font-size: 36px;
	text-align: center;
	margin: 0;
}
text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke-width: 1.5px;
}

.label {
  text-anchor: middle;
}

.label rect {
  fill: white;
}

.label-key {
  font-weight: bold;
}
#playground-ref{
	top: 100px;
}
.over-bar{
	position: absolute;
	color: white;
	z-index: 60;
	display: block;
	width: 242.5px;
}
#ih{
	left: calc(50% - 122px);
	width: 243px;
}
#cb{
	top: 502px;
}
#ci{
	top: 502px;
	left: calc(50% - 122px);
	width: 243px;
}
#jb{
	top: 876px;
}
#ji{
	top: 876px;
	left: calc(50% - 122px);
	width: 243px;
}
#cob{
	top: 1252px;
}
.z-ind{
	z-index: 3;
}
.panel-login {
	border-color: #ccc;
	-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.panel-login>.panel-heading {
	color: #00415d;
	background-color: #fff;
	border-color: #fff;
	text-align:center;
}
.panel-login>.panel-heading a{
	text-decoration: none;
	color: #666;
	font-weight: bold;
	font-size: 15px;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	transition: all 0.1s linear;
}
.panel-login>.panel-heading a.active{
	color: #029f5b;
	font-size: 18px;
}
.panel-login>.panel-heading hr{
	margin-top: 10px;
	margin-bottom: 0px;
	clear: both;
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
	background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
	background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
	background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
}
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
	height: 45px;
	border: 1px solid #ddd;
	font-size: 16px;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
	outline:none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border-color: #ccc;
}
.btn-login {
	background-color: #59B2E0;
	outline: none;
	color: #fff;
	font-size: 14px;
	height: auto;
	font-weight: normal;
	padding: 14px 0;
	text-transform: uppercase;
	border-color: #59B2E6;
}
.btn-login:hover,
.btn-login:focus {
	color: #fff;
	background-color: #53A3CD;
	border-color: #53A3CD;
}
.forgot-password {
	text-decoration: underline;
	color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
	text-decoration: underline;
	color: #666;
}

.btn-register {
	background-color: #1CB94E;
	outline: none;
	color: #fff;
	font-size: 14px;
	height: auto;
	font-weight: normal;
	padding: 14px 0;
	text-transform: uppercase;
	border-color: #1CB94A;
}
.btn-register:hover,
.btn-register:focus {
	color: #fff;
	background-color: #1CA347;
	border-color: #1CA347;
}
#reco{
	text-align: center;
}
.error-message{
	font-size: 10px;
	color: red;
	padding-left: 14px;
	display: none;
}
.reg-stuff{
  position: fixed;
  opacity: 0;
  transition: 1s;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: -1;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
	outline: none;
}
.custom-file-input::before {
  content: 'Upload Class CSV File';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
	margin-left: 87px;
	outline: none;
}
.custom-file-input:hover::before {
  border-color: black;
	outline: none;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
	outline: none;
}
.class-selector{
	width: 970px;
	margin: 0 auto;
	margin-top: 20px;
}
.class-select{
	width:250px;
  height:30px;
	border: 0;
	outline: none;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
	cursor: pointer;
	font-family: netto;
	font-size: 15px;
	color: #777;
}
.class-opt{
	height: 30px;
	background-color: #fff;
	cursor: pointer;
}

.class-head{
	display: block;
	width: 100%;
	font-family: netto;
	font-size: 18px;
	text-align: center;
}
.my-class{
	display: block;
	width: 120px;
	height: 40px;
	line-height: 40px;
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
	border-top: 1px solid #ccc;
	text-decoration: none;
	color: #777;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-class:hover{
	cursor: pointer;
	background: #f0f0f0;
}
.xp-container{
	display: inline-block;
	float: left;
	width: calc(100% - 135px);
	margin-left: 40px;
	margin-right: 0;
	height: 50px;
	margin-top: -10px;
}
.xp-container img{
	display: inline-block;
	float: left;
	height: 25px;
	margin-top: 12.5px;
}
.middle-xp{
	display: inline-block;
	float: left;
	width: calc(100% - 80px);
	height: 100%;
	margin-left: 15px;
	margin-right: 15px;
}
.middle-xp h5{
	text-align: center;
	margin: 0;
}
.lessons-bar{
	margin: 0 !important;
}
.middle-xp h6{
	margin-top: 3px;
	text-align: center;
}
.blue{
	background: #0b58a5;
}
.js-xp-container{
	position: absolute;
	left: calc(50% - 150px);
	width: 300px;
	height: 50px;
	top: 5px;
}
.js-xp-container img{
	display: inline-block;
	float: left;
	height: 35px;
	width: 35px !important;
	margin-top: 7.5px !important;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
}
.js-middle-xp{
	display: inline-block;
	float: left;
	width: calc(100% - 100px);
	height: 100%;
	margin-left: 15px;
	margin-right: 15px;
}
.removed{
	display: none !important;
}
.upgraded{
  position: absolute;
  z-index: 3;
  right: calc(50% - 407px);
  top: 336px;
  color: rgb(0, 85, 0);
  display: block;
  font-size: 18px;
  padding: 5px;
  border: 2px solid rgb(0, 85, 0);
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
	background: #fff;
}
.upgraded:hover{
  text-decoration: none !important;
  color: #fff !important;
  background: rgb(0, 85, 0);
}
.vid-wrapper video{
	width: 500px;
	height: auto;
}
.vid-wrapper h3{
	color: #777;
	margin-bottom: 5px;
}
.boot-invis{
	position: fixed;
  width: 350px;
  height: 275px;
  //background: black;
  left: calc(50% - 175px);
  top: calc(50% - 137.5px);
  z-index: -1;
  opacity: 0;
  transition: 1s;
}
.icon-holder{
  position: fixed;
  border-radius: 50%;
  background: #428bca;
  height: 75px;
  width: 75px;
  left: calc(50% - 37.5px);
  top: calc(50% - 190px);
  color: white;
  font-size: 48px;
  line-height: 75px;
  text-align: center;
}
.icon-holder img{
	width: 40px;
	height: 40px;
	margin-left: 4px;
	margin-top: 17.5px;
}
.msg-body{
  padding: 15px;
  color: #444;
  text-align: center;
  background: #efefef;
  border: 1px solid #e0e0e0;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}
.msg-body h3{
  margin-bottom: 18px;
}
.msg-body p{
  font-size: 13px;
  margin-bottom: 22px;
}
.close-box{
  width: 60%;
  margin: 0 auto;
  background: #428bca;
  border: 1px solid #357ebd;
  border-radius: 3px;
  height: 45px;
  font-size: 20px;
  line-height: 45px;
  color: white;
  cursor: pointer;
}

.close-box:hover{
  background: #3276b1;
  border-color: #285e8e;
}
.attendance{
	width: 926px;
	height: auto;
}
.attendance table{
	width: 100%;
	height: auto;
	border-collapse: collapse;
	margin-bottom: 25px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.attendance table tr:nth-child(even){
	background: #f5f5f5;
}
.attendance thead{
	color: #444;
	background: #f5f5f5;
	text-align: left;
	border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.attendance th{
	font-weight: 600;
	padding: 9px 8px 7px;
	line-height: 21px;
	height: 19px;
	text-align: center;
}
.attendance tr{
	border-bottom: 1px solid #dbdbdb;
}
.attendance td{
	padding: 9px 8px 7px;
	text-align: center;
}
.attendance td img{
	height: 18px;
	width: 18px;
}
.attendance a{
	text-decoration: none;
	color: #777;
}
.attendance a:hover{
	text-decoration: underline;
}
#unam{
	text-align: left !important;
}
#week{
	display: inline-block;
	float: left;
	width: 50%;
	margin-top: 0;
}
#attendance-key{
	display: inline-block;
	float: right;
	width: 50%;
	margin-top: 0;
	text-align: right;
	margin-bottom: 11px;
}
#attendance-key img{
	height: 15px;
	vertical-align: middle;
}
.accelerate{
	font-size: 14px;
	color: #00b2ff;
	display: inline-block;
	float: left;
	margin: 0;
	user-select: none;
	width: 50%;
}
.accelerate:hover{
	text-decoration: underline;
	cursor: pointer;
}
#forwards{
	float: right;
	text-align: right;
}
.inline-it{
	display: inline-block;
	float: left;
}
.quiz-key{
	display: inline-block;
	float: right;
	height: 30px;
}
.quiz-key img{
	height: 25px;
	vertical-align: middle;
}
.feed-item{
	overflow: hidden;
	padding: 2px;
	margin-bottom: 15px;
}
.feed-item img{
	height: 50px;
	display: inline-block;
	float: left;
}
.middle-wrap{
	display: inline-block;
	float: left;
}
.feed-title{
	margin-left: 25px;
}
.feed-title h3{
	margin-top: 6px;
	margin-bottom: 3px;
	font-size: 14pt;
}
.feed-title h3 a{
	color: #46a2d8;
	text-decoration: none;
}
.feed-title h3 a:hover{
	text-decoration: underline;
}
.feed-desc{
	margin-left: 25px;
}
.feed-desc p{
	margin-top: 0px;
	margin-bottom: 0px;
}
.feed-desc p a{
	color: #46a2d8;
	text-decoration: none;
}
.feed-desc p a:hover{
	text-decoration: underline;
}
.bleg{
	display: inline-block;
	float: right;
	height: 30px;
	width: 100px;
	background: #46a2d8;
	color: white;
	text-decoration: none;
	font-size: 11pt;
	line-height: 32px;
	text-align: center;
	border-radius: 2px;
	box-shadow: 0px 0px 3px rgba(20, 50, 100, 0.5);
	margin-top: 10px;
	margin-left: 15px;
	margin-right: 10px;
}
.bleg:hover{
	background: #218be0;
}
.feed-wrap{
	display: inline-block;
	float: left;
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3);
	padding: 10px;
}
#spaced-out{
	height: 50px;
	width: 258px;
	float: right;
}
#spaced-out p{
	margin: 0;
	line-height: 18px;
	margin-top: 4px;
	word-wrap: break-word;
	overflow: hidden;
}
#spaced-out span{
	font-weight: bold;
	text-decoration: underline;
}
#fixed-width{
	width: 610px;
}