/*!
 * Start Bootstrap - Full HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
	font-family: 'Open Sans';
	background-color: transparent;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p {
	color: #FFF;
}
h2 {
	margin-top: 0px;
}
h4 {
	margin-top: 0px;
	margin-bottom: 0px;
}
.navbar {
	color: #CA4508;
}
.logo {
	position: absolute;
	left: 40px;
	top: 30px;
	max-width: 100px;
	max-height: 100px;
}
#myquiz .caption {
	position: absolute;
	left: 40px;
	top: 140px;
	margin-bottom: 0px;
	margin-top: 0px;
}

/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */

.full {
    background: url(../images/mushroom.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.boldtext {
	font-weight: 800;
}
.thintext {
	font-weight: 300;
}
/* svampequiz styling  */
#myquiz {
	width: 750px;
	height: 750px;
	position: relative;
	overflow: : hidden;
}

#myquiz .intro {
	position: relative;
	top: 240px;
	left: 2000px;
	width: 750px;
}
/* Questions  */
#myquiz .question {
	width: 750px;
	position: absolute;
	top: 240px;
	left: 2000px;
}

#myquiz .question .ans.image {
	min-height: 160px;
	padding: 0px;
	background-repeat: no-repeat;
	background-position:center;
	background-size: cover;
	background-position: 0px 0px;
}

#myquiz .ans {
	display: inline-block;
	width: 360px;
	border: 2px solid #FFF;
	border-radius: 6px;
	padding: 10px;
	margin: 0px 15px 15px 0px;
	position: relative;
}

#myquiz .ans.selected {
	border-color: #C23B22;
}
#myquiz .ans.correct {
	border-color: #459A2E;
}
#myquiz .ans::after {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background: #777 no-repeat 0px 0px;
	background-size: 20px 20px;
	position: absolute;
	top: 5px;
	right:5px;
	background-color: transparent;
}
#myquiz .question .ans.selected::after {
	background-image: url(../images/icon_incorrect.svg);
}
#myquiz .question .ans.correct::after {
	background-image: url(../images/icon_correct.svg);
}
#myquiz .question.unanswered .ans {
	cursor: pointer;
}
#myquiz .question.unanswered .ans:hover {
	background-color: rgba(238,189,102,.2);
}
#myquiz .question.answered .ans {
	cursor: default;
}
#myquiz .feedback {
	margin-top: 0px;
	transition: opacity 1.5s, margin-top 1.5s;
	visibility: hidden;
}
#myquiz .answered .feedback {
	visibility: visible;
	opacity: 1;
	margin-top: 10px;
}

#myquiz .active, #myquiz .inactive {
	transition: left 1.5s ease-in-out;
}
#myquiz .active {
	left: 40px !important;
}
#myquiz .intro.inactive, #myquiz.inactive.answered {
	left: -1350px;
}

/* Results */
#myquiz .results {
	position: absolute;
	top: 230px;
	left: 2000px;
	width: 750px;
}
#myquiz .results .share a.btn {
	margin-top: 20px;
	margin-right: 20px;
	padding: 9px 15px 8px 42px;
	background-repeat: no-repeat;
	background-position: 14px 8px;
	background-size: 25px 25px;
}
#myquiz .results .share a.btn.email {
	background-color: #f0a121;
	border-color: #f0a121;
	background-image: url(../images/icon_email.svg); 
}
#myquiz .results .share a.btn.twitter {
	background-color: #59adeb;
	border-color: #59adeb;
	background-image: url(../images/icon_twitter.svg); 
}
#myquiz .results .share a.btn.facebook {
	background-color: #46629E;
	border-color: #46629E;
	background-image: url(../images/facebook.png); 
}

/* Feedback */
#myquiz .feedback {
	transition: opacity 1.5s, margin-top 1.5s;
	visibility: hidden;
	opacity: 0;
	margin-top: 50px;
}
#myquiz .answered .feedback {
	visibility: visible;
	opacity: 1;
	margin-top: 10px;
}
/* Progress bar */
#myquiz .progresso {
	width: 750px;
	position: absolute;
	top: 190px;
	left: 40px;
}
#myquiz .progresso div {
	position: relative;
	display: inline-block;
	width: 28px;
	height: 30px;
	margin-right: 15px;
	transition: background-color 1s;
	background-image: url(../images/svamp1.png);
	opacity: 0.2;
}
#myquiz .progresso div.on,
#myquiz .progresso div.answered {
	background-image: url(../images/svamp1.png);
	opacity: 0.4;
}
#myquiz .progresso div.correct {
	background-image: url(../images/svamp1.png);
	opacity: 1;
}

/* Media Queries */
@media screen and (max-width: 600px) {
	body {
		padding: 0px;
		margin: 0px;
 		overflow-x:hidden;
	}
	#myquiz {
		width: 320px;
		background-size: 320px auto;
	}
	#myquiz .ans {
		display: inline-block;
		width: 225px;
		border: 2px solid #FFF;
		border-radius: 6px;
		padding: 10px;
		margin: 0px 15px 15px 0px;
		position: relative;
	}
	#myquiz .progresso {
		width: 300px;
		top: 250px;
		left: 40px;
	}
	#myquiz .progresso div {
		width: 28px;
		height: 30px;
		margin-right: 20px;
	}
	#myquiz .progresso div::after {
		top: -30px;
		width: 53px;
		height: 33px;
	}
	#myquiz .intro {
		width: 300px;
		top: 370px;
		left: 360px;
	}
	#myquiz .question {
		width: 300px;
		top: 350px;
		left: 360px;
	}
	#myquiz .question .ans.image {
		min-height: 130px;
		background-repeat: no-repeat;
		background-position:center;
		background-size: cover;
	}
	#myquiz .question .ans.image:hover {
		background-color: #000;
	}
	#myquiz .results {
		width: 260px;
		top: 350px;
		left: 360px;
	}
	#myquiz .results .share {
		margin-top: 20px;
	}
	#myquiz .active {
		left: 40px;
	}
	#myquiz .intro.inactive, #myquiz .inactive.answered {
		left: -650px;
	}

}