nav,rightPane{
	border:none;
	/*background-color:var(--black);*/
}

.page{
	grid-template-areas:
        "main main main";
	grid-template-rows: minmax(80vh,auto);
}


main{
   background-color:var(--black);
	color:white;	
	display:block;
}

a{
	vertical-align:unset;	
}

body{
	background-image:none;
}

form[gyg]{
	width:100%;	
}

customInput[gyg]{
	text-align:left;
	width: 200px;
    /*left: -100px;*/
	text-align:left;	
}

label[gyg]{
	color:white;
	font-size:var(--fontp1);
}

input[gyg]{
	text-align:left;
	min-height:unset;
	width:130%;
}

select[gyg]{
    width: 130%;
	border-radius:unset;
	margin-top: 5px;
    padding: 2px;
	 background: white;
    color: black;
	min-height:unset;
}


check{
	display:inline-block;
	width:43px;
	height:43px;
	background-image:url(http://bringyourgreen.com/imgs/check_unchecked.png);
	background-repeat:no-repeat;
	background-position:top left;
	cursor:pointer;
	vertical-align:middle;
}
check[checked="true"]{	background-image:url(http://bringyourgreen.com/imgs/check_checked.png);	}
check[disabled="true"]{	background-image:url(http://bringyourgreen.com/imgs/check_unchecked_disabled.png);	}
check[disabled="true"][checked="true"]{		background-image:url(http://bringyourgreen.com/imgs/check_checked_disabled.png);	}

check[checked="checked"]{	background-image:url(http://bringyourgreen.com/imgs/check_checked.png);	}
check[disabled="checked"]{	background-image:url(http://bringyourgreen.com/imgs/check_unchecked_disabled.png);	}
check[disabled="checked"][checked="checked"]{		background-image:url(http://bringyourgreen.com/imgs/check_checked_disabled.png);	}


input[disabled="true"]{
	background-color:grey;	
}

.welcome{
	background-color: rgb(140,198,64);
    padding: 11px;
    border-radius: 0px 0px 20px 20px;
    margin-top: 0px;
	color:white;
	padding-top: 10px;
    padding-bottom: 2px;
}

.welcome-cont{
	background-color:var(--black);
	    padding-bottom: 1px;
}

.question{
	display: grid;
}

.question_box{
display: grid;
    grid-template-areas:
        "qsel qlet qopt";
    grid-template-columns: 0.1fr 0.3fr 4fr;
    grid-gap: 0px;
	/*width:min(400px, max(40%,550px));*/
	margin:5px 0;
	font-size:20px;
	background-color:none;
	border-radius:10px;	
	text-align: left;
	color:#565454;
}

.question_box:hover{
	cursor:pointer;
}

.score-cont{
	font-size: 52px;
	color: var(--green);
}

.qlet{
	margin:auto;
}

.qsel, [selected="false"] .qsel{
	background-color:white;
	border-radius:50%;
	width:15px;
	height:15px;
	margin:auto;	
	border:black solid 1px;
}

[selected="true"] .qsel{
	background-color:var(--green);	
}

[selected="incorrect"] .qsel{
	background-color:var(--red);	
}

.quiz-button{
	font-size:16px;
	border-radius:20px;
	background-color:var(--green);
	width: 5rem;
	
	color: white;
    padding: 5px 10px;
	margin: 0;
	border: 0 solid gray;
	top:30px;
}

.quiz-button:hover{
	cursor:pointer;	
}

.quiz-button[type="next"]{
	margin-bottom:40px;	
	right:0px;;
	padding:5px 24px;
	width: 5rem;
}


.question[animate-correct]::before{
	content:"";
	display: block;
	position: absolute;
	--size:50%;
	width:calc(100% + var(--size) + var(--size));
	height:calc(100% + var(--size) + var(--size));
	left:calc(0 - var(--size));
	top:calc(0 - var(--size));
	scale:0.8;
	z-index: -1000;
    transition: all ease-in-out 0.5s;
	background-repeat: no-repeat;
	--ccolor:var(--green);

	background-image:  
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%),
		radial-gradient(circle,  transparent 20%, var(--ccolor) 20%, transparent 30%),
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%), 
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%),
		radial-gradient(circle,  transparent 10%, var(--ccolor) 15%, transparent 20%),
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%),
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%),
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%),
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%),
		radial-gradient(circle,  transparent 10%, var(--ccolor) 15%, transparent 20%),
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%),
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%),
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%),
		radial-gradient(circle, var(--ccolor) 20%, transparent 20%)
		;
	
	background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%, 7% 7%, 5% 5%, 25% 25%, 30% 30%, 3% 3%;

	animation: explode-correct-animation 650ms ease-out;
}
@keyframes explode-correct-animation {
	0%{
		background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%, 12% 77%, 0% 50%, 20% 100%, 33% 66%, 44% 88%;
	}
	25%{--ccolor:var(--purple);}
	50% {
		--ccolor:var(--blue);
		background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%, 45% 66%, 32% 80%, 20% 70%, 15% 40%, 44% 20%;
	}
	75%{--ccolor:var(--yellow);}
	100% {
		background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%, 30% 20%, 12% 40%, 20% 40%, 15% 10%, 70% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}

.answer{
	font-size:18px;	
}
.correct-text{
	color:var(--green);
	font-size:26px;	
}

.incorrect-text{
	color:var(--red);
	font-size:22px;
}

.explanation-text{
	font-size:inherit;
	text-align: left;
	color: #565454;
}

.explanation-area{
	max-width: 100%;
    margin-bottom: 20px;
	font-size:inherit;
}

.explanation-img{
	max-width:200px;
	padding-top:40px;
}

.home-button-cont{
	background-color: white;
    margin-bottom: 20px;
	}
.game-quiz-container{
	min-width: -webkit-fill-available;
}	

.home-button{
	display: inline-block;
    margin: 15px;
	width:250px;
	background-color: unset;
    color: black;
    padding: 10px;
    font-size: 20px;
}

.home-button:hover{
	background-color:white;
	color:var(--green);	
}

.home-button[selected="true"]{
	background-color:white;
	color:var(--green);	
	text-decoration:underline;
}

.front-page-area{
	width:100%;
	/*display:none;	*/
	margin-top:10px;
	font-size:20px;
	margin:auto;
}

.front-page-area[selected="true"]{
	display:block;	
}

.front-page-area[type="join"], .front-page-area[type="sign"]{
	width:70%;
	margin:auto;	
}

.front-page-title{
	font-size:var(--fonth1);
	color:var(--green);	
}

.home-button[disabled="true"]{
	pointer-events:none;
	color:grey;	
}


.content{
	width:95%;
	background-color:var(--black);
	margin:auto;
}
.round-header{
	background-color:var(--green);
	padding: 11px;
	border-radius: 0px 0px 20px 20px;
	margin-top: 0px;
	color:white;
}

.quiz-name{
	font-size:24px;
	color:var(--green);	
	text-align:left;
}

.sign-in-blocks{
	display: grid;
    grid-template-areas:
        "bus-img area-img"
        "bus-block area-block";
    grid-template-columns: 1fr 1fr;
	grid-template-rows: 200px auto;
}

.img-circle{
	border-radius:50%;
	background-color:white;	
	width:210px;
	height:210px;
}

.block-img{
	padding-top:10px;	
}

.blocks{
	padding-top:20px;	
}

custominput[type="gyg"]{
	width: 200px;
/*    left: -100px;	*/
}

.swap-button{
	display:inline-block;
}

.swap-button:hover{
	cursor:pointer;
	color:var(--green);
	background-color:white;	
}


.change-button{
	width:225px;
}

.change-button:hover{
	cursor:pointer;
	color:var(--green);
	background-color:white;	
}


.swap-button[selected="true"]{
	color:var(--green);
	background-color:white;	
}

.ready-button:hover{
	cursor:pointer;
	color:var(--green);
	background-color:white;	
}


.quiz-box{
	width:360px;
	display:inline-block;	
	margin:5px;
}

.quiz-box:hover{
	cursor:pointer;
	box-shadow:	0px 0px 4px 4px var(--green);
}

.quiz-box-title{
	padding: 10px;
    font-size: 24px;
    background-color: white;
    color: black;
    margin: 0px;
	text-align:center;
}

.quiz-box-img{
	width: inherit;
    margin: 0px;
	max-height:230px;
	min-height:230px;
}

.challenge-title{
	font-size:32px;	
}

.challenge-desc{
	margin-top:10px;
	font-size:18px;
	padding: 10px 20% 10px 20%;
	color:black;
	background-color:white;
}

.challenge-desc > *{
	font-size:18px;
}

.challenge-button{
	display: inline-block;
    width: 250px;
    margin: 20px;
	margin-bottom:75px;
}

.challenge-button[disabled="true"]{
	background-color:grey;
	pointer-events:none;	
}

.challenge-button:hover{
	color:var(--green);
	background-color:white;	
}

.action-title{
	font-size:36px;
}

gry{
	color:grey;	
}

.action-sub-title{
	font-size: 18px;
    width: 70%;
}


.act-cont{
	width:200px;
	height:400px;
	background-color:white;	
	display:inline-block;
	margin:25px;
	vertical-align:top;
	border: 2px solid var(--green);
    border-radius: 5px;
}

.act-part{
	font-size:12px;
	color:var(--green);	
}

.act-points{
	font-size:56px;
	color:black;	
}

.act-point-text{
	font-size:14px;
	color:black;	
	top:-15px;
}

.act-title{
	font-size: 16px;
    text-transform: uppercase;
    color: var(--blue);
    top: -10px;
	padding:2px;
	min-height:2.4em;
}

.act-desc{
	font-size: 13px;
    color: black;
    width: 90%;
}

.act-desc > *{
	font-size: 13px;
    /*color: black;*/
	/*text-decoration:underline;*/
}
.act-desc > a{
	text-decoration:underline;
}

.act-check{
	position: absolute;
    bottom: 60px;
    left: 80px;
}

.act-bottom-box{
	height:50px;
	width:100%;
	background-color:var(--green);
	bottom:0px;
	position:absolute;
}

.act-bottom-box-text{
	color:white;
	font-size:14px;
	top:10px;
}

.score-box{
	width: 70%;
    background-color: black;
    position: absolute;
    top: 60%;
	padding:5px;
	z-index:5;
}

.score-box-text{
	color:var(--green);
	text-align:left;
	font-size:14px;
	line-height:1em;	
}

.button-cont{
	border: solid 2px var(--green);
    border-radius: 35px;
	font-size:20px;
}

.save-button{
	color:var(--green);	
	font-size:20px;
}

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

inv{
	color:var(--green);	
}

inv:hover{
	cursor:pointer;
	text-decoration:underline;	
}

.popUpContent[size="invite"]{
	width:70%;
	height:600px;	
	min-height:unset;
	
}


.send-invite-btn{
	margin-top: 10px;
    font-size: 20px;	
}

.send-invite-desc{
	display:inline-block;
	text-align:left;
	width:320px;
	padding-bottom:30px;	
}

.submit-btn{
	background-color: var(--green);
    padding: 3px 10px;
    margin: 3px;
    /* border-radius: 2em; */
    border: 2px solid var(--brightgreen);
    display: inline-block;
    min-width: 100px;
    color: white;
    cursor: pointer;
    /* border-radius: 50px; */
    text-shadow: 0px 0px 1px black;
    font-size: 15px;
	text-align: unset; 
    border-radius: unset;
	border-top: unset;
  
}	

.submit-btn:hover{
    background: rgb(88,88,88);
    color: white;
    border-bottom: 2px solid var(--green);
    box-shadow: 0px 0px 2px white;
}

.send-invite-form{
	margin-top:50px;	
}

.shader-box{
	
	background-color:rgba(255,255,255,0.4);
	width:200%;
	height:200%;
	position:absolute;
	top:-50%;
	
}


.shader-box[type="left"]{
	right:0%;	
}

/*
.shader-box[type="right"]{
	left:50%;	
	
}
*/

.shader-cont{
	height:235px;
	width:50%;
	position:absolute;	
	bottom:0px;
	overflow:hidden;
}

.shader-cont[type="left"]{
	right:50%;
}

.shader-cont[type="right"]{
	left:50%;
}

.current-build{
	font-size:20px;	
}

.current-build > *{
	font-size:20px;	
}

.num-box{
	width:20px;
	height:20px;
	border:solid 2px white;
	margin:3px;
	text-align:center;
	display:inline-block;
	color:var(--green);	
}

.team-area[type="employee"]{
	position: absolute;
    left: -25%;
    top: 40%;	
}

.team-area[type="citizen"]{
	position: absolute;
    right: -25%;
    top: 40%;	
}

.team-img{
	margin-top:10px;
	max-width:220px;	
	max-height:180px;
}

.join-team{
	width: 220px;
    text-align: center;
}

.ins-cont{
	vertical-align: top;
    width: 230px;
    display: inline-block;
	right: -14%;
}

.ins-text{
	width: 80%;
    position: absolute;
    color: black;
    left: 10%;
    top: 12%;
    z-index: 2;
	font-style: italic;
}

.ins-text > * {
	text-align:center;	
	font-size:15px;
}

.ins-img{
	height:365px;
}

.ins-below{
	color:var(--green);	
	font-size:24px;
	font-style: italic;
}

.question h4,
.question h3{
	max-width: 100%;
	text-align: left;
	font-size: 20px;
}
.question h3{
	color:var(--green)
}
.question h4{
	color: #565454;
}
.question h2{
	padding: 0 0 30 0;
    font-size: 30px;
    text-align: left;
}


.centered-white-container{
	margin:1em 15%;
	border-radius:5px;
	padding:1em;
	background-color:white;
	color:black;
}

@media only screen and (max-width: 768px){
	custominput[type="gyg"]{
		left: -30%;	
		grid-template-columns: auto 15em;
	}
	.team-area{
		display:none;
	}

}