/* ############################################################## */
/*! ### AK Kioskquiz CSS by ilab crossmedia og, www.ilab.at ### */
/* ###		  Authors Martin Jank, Gerhard Mischitz		 ### */
/* ############################################################## */

/* ########## ########## ##########
 * UEBERSICHT:
 *
 * FONTS
 * GENERELLES
 * HEADER
 * MAIN
 * FOOTER
 * FORM
 * ANIMATIONS
 * MEDIA
 * ########## ########## ########## */


/* ########## ########## ########## */
/* FONTS */
/* ########## ########## ########## */

body {
	font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

.test:before {
	font-family: "fontello";
}

/* ########## ########## ########## */
/* FONTS */
/* ########## ########## ########## */




/* ########## ########## ########## */
/* GENERELLES */
/* ########## ########## ########## */

a {
	color: #6F6F6F; /*#009fe3;*/
	-webkit-transition: color .4s ease 0s, background-color .4s ease 0s, box-shadow .4s ease 0s;
	transition: color .4s ease 0s, background-color .4s ease 0s, box-shadow .4s ease 0s;
}

a:hover,
a:focus {
	color: #9C9C9C; /*#006F9F;*/
	outline: 0;
}

.btn:focus {
	box-shadow: none;
}

/* ########## ########## ########## */
/* /GENERELLES */
/* ########## ########## ########## */




/* ########## ########## ########## */
/* HEADER */
/* ########## ########## ########## */


/* ########## ########## ########## */
/* /HEADER */
/* ########## ########## ########## */




/* ########## ########## ########## */
/* MAIN */
/* ########## ########## ########## */

main {
	overflow: hidden;
	min-height: 80vh;
	position: relative;
	z-index: 50;
}

section {
	width: 100%;
}

h1 {
	font-weight: 200;
}

.logo {
	display: block;
	width: 100%;
}

.homepage {
	display: block;
	position: absolute;
	top: 80%;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	color: #6F6F6F;

}

.l_home {
	padding: 2rem 0 2rem 10rem;
	text-decoration: none;
	position: relative;
}

.l_home:hover,
.l_home:focus {
	text-decoration: none;
}

.l_start:after {
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	width: 7rem;
	height: 10rem;
	background-image: url(/images/icon_wahlkabine.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: translateY(-50%);
}
/*
.l_home img {
	width: 12rem;
	height: 12rem;
}
*/
.l_text {
	font-size: 3.5rem;
	font-weight: 200;
	padding-left: 3rem;
	position: relative;
}


.l_start .l_text:before,
.l_wahlkabine .l_text:before,
.selection:before {
	content: "";
	width: 60%;
	height: 50%;
	position: absolute;
	right: 36.75%;
	top: -30%;
	box-shadow: -1px 1px 0 0 #E30613 inset;
}

.l_start .l_text:before {
	content: "";
	width: 60%;
	height: 40%;
	position: absolute;
	right: 41.75%;
	top: -23%;
	box-shadow: -1px 1px 0 0 #E30613 inset;
}

.l_wahlkabine .l_text:before {
	top: 85%;
	right: 37.25%;
	box-shadow: -1px -1px 0 0 #FBBA00 inset;
}
.t_home {
	color:#6F6F6F;
	font-size: 1.8rem;
	line-height: 2.4rem;
	font-weight: 200;
	padding-left: 2rem;
}

.l_info:before {
	position: absolute;
	content: "";
	width: 9rem;
	height: 9rem;
	background:#FBBA00;
	border-radius: 50%;
	bottom: 7rem;
	left:0;
}

.l_start:before {
	position: absolute;
	content: "";
	width: 9rem;
	height: 9rem;
	background:#E30613;
	border-radius: 50%;
	top:0;
	left:0;
	animation: pulse 2s infinite;
}




.quiz_img_container {
	position: fixed;
	width: 50vh;
	height: 50vh;
	border-radius: 50%;
	overflow: hidden;
	right: -22vh;
	top: 47.5%;
	transform: translateY(-50%);
}

.c_big img,
.quiz_img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	height: 100%;
}

#q_num {
	font-size: 2rem;
	font-weight: 200;
	padding: 0 2rem;
}

.c_navi {
	background-color: #6F6F6F;
	color: #FFF;
	display: inline-block;
	width: 6rem;
	height: 6rem;
	line-height: 6rem;
	border-radius: 50%;
	position: relative;
	font-size: 3rem;
	text-align: center;
	margin: 1.5rem .75rem;
}


.c_navi:hover,
.c_navi:focus {
	color: #FFF;
	/* background-color: #9C9C9C; */
}

#q_next,
#q_cancel {
	background-color: #55b348;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: none;
}
#q_next.disabled,
#q_cancel.disabled {
	background-color: #6F6F6F;
}

#q_next.make_pulse,
#q_cancel.make_pulse  {
	animation: pulse 2s infinite;
}

.c_big {
	border-radius: 50%;
	width: 95vh;
	height: 95vh;
	position: absolute;
	left: -20vh;
	top: -30vh;
	overflow: hidden;
	font-weight: 300;
}

.c_quiz {
	background-color: #FBBA00;
	color: #FFF;
	padding: 20vh 10vh 0 35vh;
	z-index: 10;
}

#q_question {
	font-size: 3rem;
	font-weight: 300;
}

.selection {
	font-size: 4.5rem;
	font-weight: 200;
	padding: 1.4rem 2rem;
	margin-bottom: 2rem;
	display: block;
	width: 80%;
	text-align: left;
	position: relative;
	border-radius: 6rem;
}

.selection:before {
	width: 7vw;
	right: calc(100% - (85vh - -1.9rem));
	height: 20%;
	top: 0;
	box-shadow: -1px 1px 0 0 #FBBA00 inset;
}

.selection:after {
	content: "";
	position: relative;
	left: 1rem;
	width: 1rem;
	height: 1rem;
	background-color: #E30613;
	border-radius: 50%;
	display: inline-block;
}

.selection_2:before {
	right: calc(100% - (85vh - -2.75rem));
	width: 10vw;
}

.selection.active {
	box-shadow: 0 0 0 1px #FBBA00 inset;
}

.p_big {
	padding-left: 85vh;
}

.c_wahlkabine,
.c_results {
	width: 75vh;
	height: 75vh;
	top: -15vh;
}

.c_results {
	background-color: #E30613;
	color: #FFF;
	padding: 15vh 10vh 15vh 30vh;
	font-size: 3.5rem;
	line-height: 1.2em;
}

.c_results strong {
	font-weight: 800;
}

.content,
.modal-body {
	font-size: 1.5rem;
	font-weight: 300;
}

.content.p_big {
	padding-left: 65vh;
}

.content h1 {
	font-size: 3rem;
	margin-bottom: 2rem;
}


.content h1.error_report {
	color: #E30613;
}

.no_overflow {
	overflow: visible;
}

.box {
	border: 1px solid #FBBA00;
	border-radius: 2rem;
	padding:  2rem;
}

.box.error {
	border: 1px solid #E30613;
}

.result_question {
	padding-bottom: 30px;
	padding-top: 25px;

}

.result_bar {
	margin: 0 60px 0 60px;
	background: #E30613;
	position: relative;
	height: 60px;
}

.result_bar:before {
	content: "JA";
	position: absolute;
	top: 20px;
	left: -21px;
	font-size: 1rem;
	color: #FBBA00;
	transform: rotate(-90deg);
	z-index: 1;
	font-weight: bold;
}

.result_bar:after {
	content: "NEIN";
	position: absolute;
	top: 17px;
	right: -31px;
	font-size: 1rem;
	color: #E30613;
	transform: rotate(90deg);
	font-weight: bold;
}


.result_inner {
	position: absolute;
	background: #FBBA00;
	height: 60px;
	left:0;
	top: 0;
}

.more_info {
	display: none;
	height: 0;
	position: sticky;
	bottom: 0;
}

.more_link {
	font-size: 2rem;
	font-weight: 200;
	padding: 0 2rem;
	line-height: 2.25rem;
}

.more_info .more_link {
	position: absolute;
	bottom: 0;
}

.more_link .text {
	display: inline-block;
	padding-right: 1rem;
}

.modal-footer .btn {
	box-shadow: 0 0 0 1px #FBBA00;
	border-radius: 2rem;
	padding: .5rem 1.5rem;
}

.modal-footer .btn + .btn {
	box-shadow: 0 0 0 1px #E30613;
}

/* Forms */

.form_holder .btn {
	box-shadow: 0 0 0 1px #FBBA00;
	border-radius: 2rem;
	padding: .5rem 1.5rem;
}

.btn_send {
	display: block;
	width: 100%;
	font-size: 1.3rem;
	line-height: 2rem;
	text-transform: uppercase;
	color: #000;
	background-color: #fff;
}

.btn_send:hover,
.btn_send:focus {
	background-color: #FBBA00;
}


.result_yes {
	color: #FBBA00;
}

.result_no {
	color: #E30613;
}

.result_ja_prozent,
.result_nein_prozent {
	color: #fff;
	display: block;
	position: absolute;
	z-index:2;
	font-size: 2.5rem;
	line-height: 3.3rem;
	font-weight: 400;
}

.result_ja_prozent {
	top: 3px;
	left: 3px;
}
.result_nein_prozent {
	top: 3px;
	right: 3px;
}


#q_up {
	transform: rotate(180deg);
}

#q_up,
#q_down {
	background-color: #55b348;
}

#q_up.disabled,
#q_down.disabled {
	background-color: #6F6F6F;
}

/* ########## ########## ########## */
/* /MAIN */
/* ########## ########## ########## */




/* ########## ########## ########## */
/* FOOTER */
/* ########## ########## ########## */

#footer {
	z-index: 10;
	/* z-index: inherit; */
}

#footer.info {
	position: relative;
	padding-top: 10vw;
}

footer:after {
	content: "";
	background-image: url(/images/kioskquiz_bg.jpg);
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 101vh;
	z-index: -1;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
}

footer.info:after {
	bottom: 0;
}

footer.wahlkabine:after {
	background-image: url(/images/kioskquiz_bg_quiz.jpg);
}

.f_logos {
	padding: 0 2.5rem;
}

/* .wahlkabine .f_logos {
	z-index: 60;
} */

.partner_logo {
	width: 8.5rem;
	margin: 0 -.5rem 1.5rem;
	padding: 0 .5rem;
}

.p_ak {
	width: 7.5rem;
}

.p_igka {
	width: 8.75rem;
}

.p_ogb {
	width: 136px;
	height: 73.5px

}

.f_logos .logo {
	width: 12rem;
}

.wissen,
.wissen h2 {
	font-weight: 300;
	font-size: 2rem;
	color: #fff;
}

.wissen h2 {
	color: #E30613;
}

.wissen p {
	margin-bottom: 1.5rem;
	line-height: 2.4rem;
}

/* ########## ########## ########## */
/* /FOOTER */
/* ########## ########## ########## */




/* ########## ########## ########## */
/* FORM */
/* ########## ########## ########## */

.form-control {
	border-color: #899eaa;
	height: auto;
	height: 3.25rem;
	font-size: 1.25rem;
	padding: .75rem 1rem;
	border-radius: 2px;
	box-shadow: 0 0 0 #899eaa;

	-webkit-transition: border-color .4s ease 0s, box-shadow .4s ease 0s, padding .4s ease 0s;
	transition: border-color .4s ease 0s, box-shadow .4s ease 0s, padding .4s ease 0s;

	-webkit-appearance: none;
}

.form-group {
	position: relative;
	margin-bottom: 1rem;
}

.form-group label{
	position: absolute;
	left: 1rem;
	top: 0;
	color: #899eaa;
	font-size: .75rem;
	font-weight: 300;
	opacity: .00001;
	line-height: 1em;
	-webkit-transition: opacity .4s ease 0s, top .4s ease 0s;
	transition: opacity .4s ease 0s, top .4s ease 0s;
	letter-spacing: .1em;
}

.show_floating_label label {
	opacity: 1;
	top: 5px;
}

.show_floating_label .form-control {
	padding: 1rem 1rem .25rem;
}

/* ########## ########## ########## */
/* /FORM */
/* ########## ########## ########## */




/* ########## ########## ########## */
/* ANIMATIONS */
/* ########## ########## ########## */

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}


/* ########## ########## ########## */
/* /ANIMATIONS */
/* ########## ########## ########## */




/* ########## ########## ########## */
/* MEDIA */
/* ########## ########## ########## */

@media (min-width:576px) {

}/* min-width:576px */

@media (min-width:768px) {


}/* min-width:768px */

@media (min-width:992px) {

	/* MAIN ########## ########## */


	/* /MAIN ########## ########## */

}/* min-width:992px */

@media (min-width:1200px) {

	/* MAIN ########## ########## */


	/* /MAIN ########## ########## */

}/* min-width:1200px */

@media (min-width:1400px) {

	/* MAIN ########## ########## */

	.container {
		max-width: 1340px;
	}

	/* /MAIN ########## ########## */

}/* min-width:1400px */

@media (max-width:1600px) and (min-width:1200px) {

	/* MAIN ########## ########## */


	/* /MAIN ########## ########## */

}/* max-width:1600px and min-width:1200px */

@media (max-width:1199px) {

	/* MAIN ########## ########## */


	/* /MAIN ########## ########## */

}/* max-width:1199px */

@media (max-width:991px) {

	/* MAIN ########## ########## */


	/* /MAIN ########## ########## */

}/* max-width:991px */

@media (max-width:991px) and (min-width:576px) {

	/* MAIN ########## ########## */


	/* /MAIN ########## ########## */

}/* max-width:991px and min-width:576px */

@media (max-width:991px) and (min-width:768px) {

}/* max-width:991px and min-width:768px */

@media (max-width:767px) {

}/* max-width:767px */

@media (max-width:767px) and (min-width:576px) {


}/* max-width:767px and min-width:576px */

@media (max-width:600px) {

}/* max-width:600px */

@media (max-width: 575px) {

	/* MAIN ########## ########## */


	/* /MAIN ########## ########## */

}/* max-width:575px */

@media (max-width:500px) {

	/* MAIN ########## ########## */


	/* /MAIN ########## ########## */

}/* max-width:500px */


@media (max-width:440px) {

	/* MAIN ########## ########## */


	/* /MAIN ########## ########## */

}/* max-width:440px */

@media (max-width:340px) {

}/* max-width:340px */

/* ########## ########## ########## */
/* /MEDIA */
/* ########## ########## ########## */