/********* Overrides for quiz styles ********/

/* First page */
body {
	background: transparent url("../img/quiz-bg.jpg") no-repeat fixed
		center center/cover;
}

audio {
	display: block !important;
	text-align: center;
	width: 320px;
	margin: 0px auto 40px;
	background: #20b49b;
}

.container {
	background: rgba(12, 103, 164, .8);
}

.fs-title {
	text-align: center;
}

.codrops-top {
	position: absolute;
	left: 3%;
	top: 4%
}

.codrops-top a {
	padding: 1em;
	border: 1px solid;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.codrops-icon:before {
	display: none;
}

.fs-form-wrap {
	position: fixed;
	overflow-y: scroll;
}

.fs-title h1 {
	margin-top: 20px;
	background: #20b49b;
	width: 270px;
	margin: 20px auto;
	-webkit-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

.fs-progress {
	background: #20b49b;
}

.fs-fields>li .fs-radio-custom div label {
	transition: background .2s ease;
	-webkit-transition: background .2s ease;
}

.fs-fields>li .fs-radio-custom div label:hover, .fs-fields>li .fs-radio-custom div label:active
	{
	background: #0e76bc;
	transition: background .2s ease;
	-webkit-transition: background .2s ease;
}

.fs-fields>li .fs-radio-custom div {
	width: 25%;
}

.fs-fields>li .fs-radio-custom div label {
	font-size: .8em;
	font-weight: 300;
}

.js .fs-form-full .fs-fields>li p.level {
	font-size: .6em;
	margin-top: 20px;
	background: #20B49B;
	width: 320px !important;
	-webkit-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
	padding: 10px 5px;
}

.js .fs-form-full .fs-fields>li p {
	font-size: .6em;
	margin-top: 20px;
	background: #CC655B;
	width: 320px;
	-webkit-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
	padding: 10px 5px;
}

.js .fs-form-full .fs-fields>li.audio p {
	width: 100%;
}

button.fs-continue {
	border: 3px solid #fff;
	color: #fff;
	transition: background .2s ease;
	-webkit-transition: background .2s ease;
}

button.fs-continue:hover, .fs-continue:focus, .fs-continue:active {
	background: #20b49b;
}

.fs-fields>li.audio .fs-radio-custom div {
	margin: 0px;
	clear: left;
	max-width: 100% !important;
	display: inline-block;
	width: 100%;
}

.fs-fields>li.audio .fs-radio-custom label {
	line-height: normal;
	border-radius: 0px;
	padding: 0px 10px;
	display: block !important;
	width: 100%;
}

/* Overview page */
.fs-form-overview {
	background: #20b49b;
}

.fs-form-overview .fs-fields>li .fs-radio-custom div label {
	font-size: 1.1em;
}

.fs-form-overview .fs-fields .fs-radio-custom input[type="radio"]:checked+label
	{
	background: #0E76BC;
	color: #fff;
}

/* Responsive, using breakpoints from plugin */
@media screen and (max-width: 52.5em) {
	.fs-title {
		text-align: left;
	}
	.fs-title .logo {
		display: block;
		width: 60px;
	}
	.fs-title .logo .img-responsive {
		max-width: 100%;
		height: auto;
	}
	.fs-title h1 {
		display: none;
	}
	.fs-form-full {
		top: 110px;
	}
	.fs-form-wrap {
		font-size: 100%;
	}
	.js .fs-form-full .fs-fields>li p {
		width: 120%;
		margin-top: 0;
		text-align: center;
	}
	.fs-fields>li .fs-radio-custom div {
		width: 50%;
		margin-bottom: 10px;
		padding: 10px;
	}
	.fs-fields>li .fs-radio-custom label {
		
	}
	.fs-fields>li label.fs-field-label {
		font-size: 0.7em;
	}
	.codrops-top {
		display: none;
	}
	.fs-fields .fs-radio-custom input[type="radio"] {
		margin: 0;
	}
	audio {
		width: 100%;
	}
	button.fs-continue {
		overflow: hidden;
	}
}