@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
html, body{
	margin: 0;
	padding: 0;
	background: white;
	font-family: "Titillium Web";
}

#navContent{
	margin: auto;
	width: 800px;
	height: 400px;
	position: relative;
	overflow-x: hidden;
	}

#game1{
	margin: auto;
	width: 800px;
	height: 400px;
	right: 0px;
	position: absolute;
	}
	
#game2{
	margin: auto;
	width: 800px;
	height: 400px;
	right: -800px;
	position: absolute;
	}
	
.questionText{
	font-size: 26px;
	color: #333;
	}

#topbar{
	margin: auto;
	color: #333;
	font-size: 26px;
	width: 800px;
	margin-bottom:20px;
	}

@keyframes expandWidth{
	0% { width:0;}
	100% {width:auto;}
}

/* Styles for options/choices */
.option{
	margin: 15px;
	font-size: 16px;
	color: #333;
	padding: 10px 10px 10px 10px;
	border: 2px solid rgb(111, 145, 195) ;
	cursor: pointer;
	background-color: #78AADB;
}

.d1{
	border: 10px solid #B73BBD;
	border-style: none none none solid;
    /* Old browsers */
	background: linear-gradient(to left, #78AADB 50%, #B73BBD 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 0.5s ease;
}
.d1:hover {
    background-position:left bottom;
	border: 10px solid #B73BBD;
	border-style: none none none solid;
	color: #fff;
}

.d2{
	border: 10px solid #0DACEB;
	border-style: none none none solid;
    /* Old browsers */
    background: linear-gradient(to left, #78AADB 50%, #0DACEB 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 0.5s ease;
}

.d2:hover{
	background-position:left bottom;
	border: 10px solid #0DACEB;
	border-style: none none none solid;
	color: #fff;
}

.d3{
	border: 10px solid #FFB701;
	border-style: none none none solid;
	/* Old browsers */
    background: linear-gradient(to left, #78AADB 50%, #FFB701 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 0.5s ease;
}

.d3:hover{
	background-position:left bottom;
	border: 10px solid #FFB701;
	border-style: none none none solid;
	color: #fff;
}

.d4{
	border: 10px solid #00BC9A;
	border-style: none none none solid;
	/* Old browsers */
	background: linear-gradient(to left, #78AADB 50%, #00BC9A 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 0.5s ease;
}

.d4:hover{
	background-position:left bottom;
	border: 10px solid #00BC9A;
	border-style: none none none solid;
	color: #fff;
}

/* Results */
.b1,.b2,.b3 {height:27.8%;border: 10px solid #00BC9A;border-style: none none none solid;}
.b4,.b5,.b6 {height:33.3%;border: 10px solid #FFB701;border-style: none none none solid;}
.b7,.b8,.b9 {height:38.9%;border: 10px solid #0DACEB;border-style: none none none solid;}

.b1,.b4,.b7 {width:25%;border: 10px solid #00BC9A;border-style: none none none solid;}
.b2,.b5,.b8 {width:31%;border: 10px solid #FFB701;border-style: none none none solid;}
.b3,.b6,.b9 {width:35%;border: 10px solid #0DACEB;border-style: none none none solid;}

.box{
	opacity:1.0;
	vertical-align:middle;
	text-align:center;
	margin:1px;
	padding:5px;
	border:1px solid #dadada; 
	border-style:solid;
	height:100px;
	float:left;
	display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

.resContainer{
	width:90%;
	margin:auto auto;
	margin-right:20px; 
}

.resI {
    position: absolute;
	padding: 5px;
	color: #7f7f7f;
	top: 90%;
	border-top: solid 2px #7f7f7f;
	width: 100%;
	left:-10px;
	text-align: center;
}

.resS{
	transform: rotate(270deg);
	color: #7f7f7f;
	position: absolute;
	top: 45%;
	left: -22%;
	border-bottom: #7f7f7f 2px solid;
	width: 50%;
	text-align: center;
}


@media screen and (max-width:620px) {
	.box{width:95%;height:50px;}
	.resS{display:none;}
	.resI{display:none;}
} 

@media screen and (max-width:800px) {
	#topbar{margin-left:1%;margin-right:1%;width:96%;}
	#navContent{width:98%;}	
	#game1{width:98%;}
	#game2{width:98%;}
}