body {
	margin: 0;
	height: 100%;
	overflow-y: hidden;

}

.app-area {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

#gameArea {



}

/*global*/

*:focus {
  outline: none !important;

 }

* {
	 text-decoration: none;
   list-style-type: none;
   outline: none;
	box-sizing: border-box;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

  
}

@font-face {
    font-family: aRegular;
    src: url(Ahkio-Regular.otf);
}

@font-face {
    font-family: pRegular;
    src: url(Poppins-Regular.otf);
}

@font-face {
    font-family: pBold;
    src: url(Poppins-Bold.otf);
}
@font-face {
    font-family: pBoldI;
    src: url(Poppins-BoldItalic.otf);
}

@font-face {
    font-family: pLight;
    src: url(Poppins-Light.otf);
}


@font-face {
    font-family: pLightI;
    src: url(Poppins-LightItalic.otf);
}




#beecanvas {

	width: 100%;
	height: 100%;
	margin: 0;
}

#login { 


}



/*nav*/
a {
	text-decoration: none;
}

.beenav {
	position: fixed;
	top:0;
	right: 0;
	width: 50%;
	z-index: 1;
	background-color: white;
	opacity: .5;
	border-bottom-left-radius: 7px;
	border-bottom: 1.5px solid #4D4447;
	border-left: 1.5px solid #4D4447;
	padding-top: 5px;
	padding-bottom: 5px;
}

.beenav a:hover:active{
	opacity: 1;
	color: #4D4447;
}

.beenav a {
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: white;
	color: #4D4447;
}




/*covers*/

.stagecover {
	background-color: white;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:0;
	z-index: 1;
}

.white-cover,
.success-white-cover {
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255, 0.5);
	
}

/* Profile */

.profcont,
.regcont,
.usercont,
.tempcont,
.reward-note{
	height: 100%;
	position: absolute;

}



.profcont,
.regcont,
.usercont {

	background-color: white;
	border-left: 1.5px solid #4D4447; 
	top:0;
	right:0;


}


.tempstage {
	height: 100%;
	
}

.tempcont {
	background-color: white;
	padding-left: 45px;
	padding-top: 45px;
	height: 100vh;
	top:0;
	left:0;
}



.logincont
{
	width: 100%;
	margin: 0 auto;
	padding: 25px;
	padding-right: 45px;
	padding-left: 45px;
}

.userprofcont
{
	width: 100%;
	margin:0 auto;
	padding-top:25px;
	padding-right: 45px;
	padding-left: 45px;
}

.loginbtncont {
	width: 100%;
	margin: 0 auto;
	padding-top:10px;
	padding-right: 45px;
	padding-left: 45px;

}

.tempbtncont {
	padding-right: 10px;	
	
}

.tempbtnform {
	display: flex;
	justify-content: space-between;
}

.closeprof,
.closered {
	text-align:left;
}


.profcard {
	position: relative;
}

/*headers*/



h1, h2, h3{

	font-family: 'aRegular';
	margin: 0;
}

.maintitle {
	position: fixed;
	bottom: 5px;
	left: 5px;
	opacity: 1;
	font-size: 24px;
	display: block;
	
}

.temptitle, .profheader {
	text-align: center;
/*   	-webkit-text-stroke-color: #4D4447;
-webkit-text-stroke-width: 0.5px; */
	color: #4D4447;
  	
}

.temptitle {
	font-size: 100px;
	color: #4D4447;
	

}

.profheader {
	font-size: 50px;
	
}




/*inputs*/

label {
	font-family: pLight;
	
}



.input, .input input, .input .bar {
	position: relative;	
}

.input + .input {
	margin-top: 20px;
}

.input, label, .input .bar {
	transition: .3s cubic-bezier(.4, 0, .2, 1);
   -webkit-transition: 300ms cubic-bezier(.4, 0, .2, 1);
   -ms-transition: 300ms cubic-bezier(.4, 0, .2, 1);

}

.input label {
	color:#C2C0C1;
   position: absolute;
   top: 15px;
   z-index: 2;
   cursor: pointer;
   line-height: 30px;
   font-weight: bold;
   font-size: 14px;
}


.input input {
   height: 30px;
   top: 15px;
   z-index: 3;
   background-color: transparent;
   cursor: pointer;
   padding: 5px;
   padding-left: 0;
   padding-right: 0;
   font-size: 14px;
/*    border-bottom: 2px solid #4D4447;
border-top:0;
border-left:0;
border-right:0; */
   width: 100%;
   border: none;
   transition:all 0.3s ease-in-out;
   font-family: pRegular;
   color:#4D4447;

}

.input .bar {
	width: 100%;
	opacity: .5;
	top:5px;
}



.beeplexinput {
	font-family: 'pRegular';
	border-radius: 8px;
	padding: 5px;
	border: 1px solid #4D4447;
	width: 100%;
	color:#4D4447;

	
}


.largelabel {
	font-size: 28px;
}

.medlabel {
	font-size: 20px;
}

.beelabel {

	color: #C56A6E;
	font-family: 'aRegular';
  	letter-spacing: 1px;

}


.beelabel + input {
	margin-top: 5px;
	margin-bottom: 5px;
}




/*btns*/

button {
	font-family: 'pBold';
 	text-align: center;

	
}

.buttonbasics {
	font-family: 'pBold';
	color: #4D4447;
	font-weight: bold;
	padding: 5px;
	width: 75px;
	height: 35px;
	border-radius: 8px;
	border: 1.5px solid #4D4447;
	text-align:center;
	
}

.submit {
	
	background-color: #AEC2A6;
}

.submit:active:hover {
	transform: scale(0.9,0.9);
	background-color: #899F8B;
}

.form-submit .submit, .form-submit .logout{
	margin-top: 10px;
}

.grey {

	background-color: #B9B1AD ;
	color: #C2C0C1;


}



.closeprofbtn,
.closeregbtn,
.closetempbtn {

	color: #4D4447;
	background-color: #C56A6E;
	border: 1.5px solid #4D4447;
	border-radius: 8px;
	width: 35px;
	height: 35px;
	margin-left: 5px;
	margin-top: 5px;
	position: absolute;
	top:0;
	left: 0;
	font-family: 'pBold';

}

.closeprofbtn:active:hover,
.closetempbtn:active:hover {

	color:#C4696D;
	background-color: #A65A60;
	transform: scale(0.9,0.9);
}

/*open/close*/
.back-large {
	background-color: #C56A6E;
}





.staged{
	position:absolute;
	top:0;
	right:0;
	transition:all 0.3s ease-in-out;
	opacity:0;
	width: 100%;
}








/*float*/

.floatright {
	float:right;
}

/*imgs*/

img {
	max-width: 100%;
	margin: 0;
	vertical-align: middle;
}



.beeplexloginlogo .loginlogo {
	margin:0 auto;

}
.loginlogo{
	max-height: 45vh;
	display: block;
}

.tempBcont {
	display: flex;
	justify-content: space-between;
	
}
.tempB {
	max-width: 100%;
	align-self: center;
}

.temptitle {
	margin: 0;
	padding: 0;

}

.tempcardcont {
	padding-right: 10px;
}

.tempsubmitcont {
	margin: 0 auto;
}


.tempbar {
	
}

.bar {
	height: 3px;
	background-color: #666169;
	border:1px solid #4D4447;
	width: 100%;
	border-radius: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* text and font */

p{
	margin:0;
	padding: 0;
	font-size: 100%;
	color: #4D4447;
	font-family: 'pRegular';
	
}


.error-msg {
	font-size: 12px;
	color:#C4696D;
	font-family: 'pLightI';
	
}

.bar + .error-msg{
	margin-top: 10px;
}

.tag, .textlink{
	font-size: 12px;
	opacity: .5;
}
.reg-tag {
	width: 100%;
	text-align: center;
}

.textlink {
	font-family: 'pBold';
	cursor: pointer;
}
.textlink:active:hover {
	opacity: 1;
}
.btn-text {
	font-family: 'pBold';
	font-size: 16px;
	text-align: center;

	
}

.btn-name {
	margin-top: 0;
}

.btn-selected {
	margin-top: 5px;
}

.temptext {
	font-family: 'pLightI';
	padding-top: 10px;
	padding-bottom: 10px;

}

.bodytext {
	height: 100%;
	font-size: 100%;
	padding-top: 5px;

}




.page-control {
	height: 100%;
	position: relative;

}

.tempchoice-btns {
	width: 100%;
	align-self: center;
	align-items: flex-start;
}

.tempchoice-btns label {
	width:100%;
	display:block;
}

/*
.tempchoice-btns input:checked+label>img {
	transform:scale(1,1);
}*/





.btn-grid {
	grid-template-columns: 60px 60px 60px 60px 60px;
	grid-template-rows: 90px 90px 90px 90px 90px;
	grid-column-gap: 10px;
}





/* Media Query */





@media (min-width:0){










.temptext {
	font-size: 12px;
}

.temptitle {
	font-size: 100%;
	white-space: nowrap;
}
.tempcont{
	padding: 15px;
	padding-top: 45px;
	padding-right: 45px;
	padding-left: 45px;
	height: 100%;
}
.tempbtncont {
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: white;
}

.tempcardcont {
	position: fixed;
	top: 0;
	left:0;
	margin-top: 45px;

}

.tempBcont {
	position: relative;
	bottom: 0;
	margin-bottom: 80px;
	
}





.tempBcont,.tempcardcont,.tempbtncont {
	padding-left: 10px;
	padding-right: 10px;
}

.tempB {
	max-height: 40vh;
}
}


@media (min-width:400px){

.beenav {

	border-bottom-left-radius: 7px;
	border-bottom: 1.5px solid #4D4447;
	border-left: 1.5px solid #4D4447;
}




.temptitle {
	font-size: 75px;
}

.tempicon {
	
}



.tempcardcont {
	position: fixed;
	top: 0;
	left:0;
	margin-top: 45px;

	max-height: 30%;
} 
.tempB {
	text-align: center;
}

.tempBcont{
	margin-bottom: 0;
	bottom: 0;
	right: 0;
	position: fixed;
	text-align: center;
	
}

.tempbtncont {
	position: fixed;
	bottom: 0;
	left: 0;
	padding-bottom: 10px;
	background-color: white;
}



}


@media (min-width:801px){

.tempbtncont,
.tempcardcont {
	position: relative;
	background-color: none;
}

.tempBcont{
	position: fixed;
	right: 0;
	bottom:0;
	
}


.tempcardcont {
	margin-top: 0;
}

.tempiconimg {
	width: 90%;
}

.temptext {
	font-size: 18px;
}



.tempB {
	max-height: 100vh;
	
	max-width: 100%;
}

}






/* animations */

.off-right {
	transform:translateX(100%);
}
.off-left {
	transform:translateX(-100%);
}
.off-top {
	transform:translateY(-100%);
}
.off-bottom {
	transform:translateY(100%);
}

.staged.active {
	transform:translateX(0);
	opacity:1;
}

.show-Img, .show-btns {
	transform:translateX(0);
	opacity:1;
	transition:all 0.3s ease-in-out;
}

/* Btn Animations */

.tempchoice-btns label>img {
	max-width:100%;
	transform:scale(0.8,0.8);
}

.tempchoice-btns label>img:active:hover {
	transform: scale(0.6,0.6);

}


.tempactives {
	transform: scale(0.8,0.8);
	transition:all .3s ease-in-out;
}

.tempactives.scaleup {
	-webkit-animation: .3s scaleup ease-in-out;
	animation-fill-mode: forwards;
	
}

.tempicon.rotateRight {
	-webkit-animation: .3s rotateRight ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes scaleup {
	0% {transform: scale(0.8);}
	75% {transform: scale(1.7);}
	100% {transform: scale(1.1);}

}

@keyframes rotateRight {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(720deg);
	}
}





/* flexcontrols */

[data-role=page] {
    overflow: auto;
}
.hidden {
	display:none;
}

.not-vis {
	opacity: 0;
}
.yes-vis {
	opacity: 1;
}
.not-visable{
	visibility: hidden;
}
.form-control.inline {
	display:inline-block;
}

.flex-parent {
	display:flex;
}
.flex-child {
	flex:1 1 auto;
}
.flex-none {
	flex:none;
}
.flex-center {
	align-items:center;
}
.flex-vertical {
	flex-direction:column;
}

.flex-between {
	justify-content: space-between;
}
.flex-around {
	justify-content: space-around;
}
.flex-j-center {
	justify-content: center;
}

.flex-grow {
	flex-grow:5;
}

.flex-align {
	align-self: center;

}


#profcont-page,
#regcont-page,
#usercont-page,
#reward-note-page {
	z-index: 15;
}
#temp-success-note-page {
	z-index: 16;
}