@charset "utf-8";
/* CSS Document */

input:focus {border:solid 2px #F90 !important;}

body {
	font-family:'Quattrocento Sans', sans-serif;
	padding-top:0px;
	}
	
.page {
	box-shadow: 0px 0px 5px #888888;
	padding:0;
	overflow:hidden;
}

a:focus, a:active {border:none; outline:none;}

/*----------------------------------------------
				FONT-KRAM
-----------------------------------------------*/


h3 {
	font-weight:bold;
	color:#003063;
	margin:0 0 15px 0;
	line-height:1em;}

.title {
	font-size:48px;
	font-weight:lighter;}

	
.mhp-1 {
	position:absolute;
	top:20px;
	right:40px;
}
	
.blue, .blue a {
	color:#003063;
}

.white {
	color: #FFF;
}


h2 a {color:#000;}
h2 a:hover {color:#F90; text-decoration:none;}

/*----------------------------------------------
				TOGGLE-SWITCH
-----------------------------------------------*/

input[type=checkbox].toggle-switch:focus {
	border: none !important;
}

input[type=checkbox].toggle-switch {
	display: none;
}

input[type=checkbox].toggle-switch + label {
	display: inline-block;
	font-size: 6px;
	appearance:none !important;
	-moz-appearance:none;
	-webkit-appearance:none;
	width:6em;
	height:3em;
	background-color:rgba(0,0,0,0.6);
	border-radius:3em;
	outline:0;
	cursor:pointer;
	position: relative;
	border: none;
	transition: background-color 0.25s ease-in-out;
	margin-top: -2px;
	}

input[type=checkbox].toggle-switch:checked + label {
	background-color: #F90;
}

input[type=checkbox].toggle-switch + label::after {
	content: '';
	height: 3em;
	width: 3em;
	border-radius: 50%;
	position: absolute;
	left: 0em;
	background-color: #FFF;
	transform: scale(0.85);
	transition: left 0.25s ease-in-out;
	box-shadow: 0 0.1em rgba(0,0,0,0.5);
}

input[type=checkbox].toggle-switch:checked + label::after {
	left: 3em;
}

/*----------------------------------------------
				Configurator
-----------------------------------------------*/

.configurator {
	box-shadow: 0 0 3px rgba(0,0,0,0.7);
	border-radius: 5px;
	padding-bottom: 15px;
}

.configurator .row {
	padding-top: 10px;
}

.configurator .row:after {
	content: ' ';
	width: 98%;
	height: 1px;
	margin-left: 1%;
	background-color: rgba(0,0,0,0.2);
}

.premium .line:after, .einzel .line:after {
	content: ' ';
	width: 98%;
	height: 1px;
	margin-left: 1%;
	background-color: #FFF;
}

.inklusive {
	text-align: right;
}

.info-btn {
	display: inline-block;
	padding: 0.1em 0.7em;
	border-radius: 1em;
	border:solid 1px #000;
	color:#000;
	background-color: rgba(0,0,0,0.0);
	margin-right: 10px;
}

.premium {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #F90;
	border-radius: 5px;
	margin-top: 10px;
	box-shadow: 0 0 3px rgba(0,0,0,0.7);
}

.einzel {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #666;
	border-radius: 5px;
	margin-top: 10px;
	box-shadow: 0 0 3px rgba(0,0,0,0.7);
	display: none;
}

.btn-white {
	display: inline-block;
	font-weight:bold;
	font-size:16px;
	width: 100%;
	background-color: rgba(0,0,0,0);
	border-radius: 5px;
	border:solid 2px #FFF;
	padding: 10px 0;
	text-align: center;
	color: #FFF;
	transition-duration: 0.2s;
}

.btn-white:hover {
	background-color: #FFF;
	color: #F90;
	text-decoration: none;
	transition-duration: 0.2s;
}

.einzelpreis {
	border:none;
	color: #FFF;
	font-weight: bold;
	background-color: rgba(0,0,0,0);
	width: 100%;
}

/*----------------------------------------------
				CONTENT
-----------------------------------------------*/
	
form label span {
	font-weight:300 !important;
	margin-left: 15px;
}

.form-group label {
	font-weight:300;}
	
.form-control {
	border-radius:0;}
	
.box {
	border:solid 1px rgba(0,0,0,0.1);
	border-radius:5px;
	padding:10px 40px 10px 40px;}
	
.info {
	display:inline-block;
	padding:1px 10px;
	background-color:#CCC;
	border-radius:50%;
	margin-top:10px;}
	
.price {
	font-size:17px;
	float:right;
	margin-top:10px;}

.laufzeit {
	width:100%;
	border-top:solid 1px rgba(0,0,0,0.5);
	border-bottom:solid 1px rgba(0,0,0,0.5);
	padding-top:5px;
}
	
.box-orange {
	background-color:#F90;
	border:solid 1px #FFF;
	width:100%;
	padding:10px 0 10px 0;
	color:#FFF;
	border:none;
	border-radius:5px;
	transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-webkit-transition-duration:0.5s;}
	
.box-orange:hover {
	border:solid 1px #F90;
	background-color:#FFF;
	color:#F90;
	transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-webkit-transition-duration:0.5s;}
	
.img-shadow {
	box-shadow:1px 1px 5px rgba(0,0,0,0.3);
	}
	
.btn-blue {
	display:inline-block;
	border:solid 1px #FFF;
	background-color:#003063;
	padding:5px 45px 5px 45px;
	color:#FFF;
	border-radius:5px;
	margin-right:25px;
	box-sizing:border-box;
}

.btn-blue:hover {
	border:solid 1px #003063;
	background-color:#FFF;
	color:#003063;
	transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	text-decoration:none;
}

.uebersicht-hefte {
	margin-bottom:25px;
	border-bottom:solid 1px rgba(0,0,0,0.2);
	padding-bottom:20px;
}

.home-auswahl {
	display:block !important;
	font-weight:bold;
	width:100%;
	padding:10px;
	background-color:rgba(0,0,0,0.1);
	border-radius:5px 0 0 5px;
}



.staffelpreise {
	border-right:solid 1px #000;
	border-left:solid 1px #000;
	}

	
/*----------------------------------------------
				NAVBAR STYLES
-----------------------------------------------*/
.header {
	padding:20px 0 20px 80px; 
	background-image:url(../img/konfi-header-bg.jpg); 
	background-size:cover; 
	background-position:0 0px; 
	background-repeat:no-repeat;
}


.header-2 {
	padding:0 0 15px 60px; 
	background-image:url(../img/konfi-header-bg.jpg); 
	background-size:100% auto; background-position:0 20px; 
	background-repeat:no-repeat;
}

.header-2 img {margin-top:-10px;}

.anmelden {
	padding:5px 15px 5px 15px;
	color:#FFF;
	background-color:#F90;
	position:relative;
	left:10px;
	top:25px;}

.anmelden:hover {
	text-decoration:none;
	color:#FFF;}

.navbar.navbar-default {
	background-color:#003063;
	border:none;
	border-radius:0;}

.navbar.navbar-default ul li {
	padding-top:18px;}

.navbar.navbar-default ul li a {
	color:#FFF;
	text-transform:uppercase;
	font-weight:bold;
	border-right:solid 1px #FFF;
	padding:0 10px 0 10px;
	line-height:1em;}
	
.navbar.navbar-default ul li:last-child a {
	border:none;}

.navbar.navbar-default ul li a:hover {
	color:#F90;}
	
.navbar.navbar-default ul li .active {
	color:#F90;}

.nav-secondary {
	z-index:100;}

.nav-secondary ul {
	float:right;
	padding-top:10px;
	margin-right:25px;}

.nav-secondary ul li {
	list-style:none;
	float:left;
}


.nav-secondary ul li a {
	color:#000;
	font-size:14px;
	padding: 0 5px 0 5px;
	display:block;
	line-height:1em;
	border-right: solid 1px #000;}
	
.nav-secondary ul li:last-child a{
	padding-right:0;
	border:0;}



/*----------------------------------------------
				FOOTER STYLES
-----------------------------------------------*/

.footer {
	margin-top:25px;
	background-color:#003063;
	padding:30px 20px 25px 40px !important;
	margin-bottom:0 !important;
}

.footer a {
	color:#FFF;}
	
.footer a:hover {
	color:#F90;
	text-decoration:none;}
	
.footer p {
	color:#FFF;}
	



/*----------------------------------------------
				RANDOM
-----------------------------------------------*/

.space {
	padding: 0 40px 0px 40px;
	margin-bottom:25px;}
	
	
.border {
	border-top: solid 4px rgba(0,0,0,0.1);
	border-bottom: solid 4px rgba(0,0,0,0.1);
	padding:20px 0 10px 0;
}

.navbar-inverse.btn-navbar {
    color: white;
    background-color: #F00;
}

.fancybox-skin {
    position: relative;
    background: #fff !important;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


.row.is-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.is-flex  [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex  [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

/*----------------------------------------------
				CAPTION STYLE
-----------------------------------------------*/




	.caption-style{
		position: relative;
		
	}

	.caption-style:hover .caption{
		opacity: 1;

	}


	.caption-style img{
		z-index: 1;
		position:relative;
	}


	.caption-style .caption{
		cursor: pointer;
		position: absolute;
		opacity: 0;
		-webkit-transition:all 0.01s ease-in-out;
		-moz-transition:all 0.01s ease-in-out;
		-o-transition:all 0.01s ease-in-out;
		-ms-transition:all 0.01s ease-in-out;
		transition:all 0.01s ease-in-out;
		width:92%;
		height:90%;
		top:0;

	}
	.caption-style .blur{
		background-color: rgba(0,0,0,0.65);
		top:0;
		height: 100%;
		width: 100%;
		z-index: 5;
		position: absolute;
	}

	.caption-style .caption-text h1{
		font-size: 24px;
	}
	.caption-style .caption-text{
		z-index: 10;
		color: #fff;
		position: absolute;
		padding:15px;
		width: 100%;
		height: 100%;
		text-align: center;
		top:0;
	}
	
.countdown input {border:none; display:inline-block;}
/*----------------------------------------------
				MEDIA QUERIES
-----------------------------------------------*/
	
@media (max-width:992px) {
	
	.nav-secondary ul li a {
	color:#000;
	font-size:10px;
	padding: 0 5px 0 5px;
	display:block;
	line-height:1em;
	border-right: solid 1px #000;}
	
	.nav-secondary {
		top:-10px;}
	
	
	.teilnehmer:nth-child(3) div {
	border-right:none;}
	
	
	}
	
@media (max-width:1200px) {
	
	h1.mheft {
	font-size:46px !important;}
	
	#Code {width:60% !important;}
}
	
@media (min-width:992px) {
	
	.nav-secondary {
		top:-15px;}
		
	.footer-amw {
		margin-left:-45px;
	}
	
	.footer-ans {
		margin-left:-26px;
	}
	
	.footer-dis {
		margin-left:-25px;
		}
		
	
	}
	



@media (max-width:1200px) {
	.stoerer {
	padding:5px;
	border:solid 1px #003;
	border-radius:3px;
	display:inline-block;
	visibility:visble;
	width:150px;
	position:absolute;
	left:-215px; top:60px;
	transform:rotate(-0deg);}
	
	.roechling {
	margin-left:0px !important;}
	
	.title {
		font-size:36px;}
		
	
	
	}

@media (min-width:1200px) {
	.footer-amw {
		margin-left:-78px;
	}
	
	.footer-ans {
		margin-left:-48px;
	}
	
	.footer-dis {
		margin-left:-45px;
		}

}

@media (min-width:768px) {
	
	.nav-secondary {
		top:-15px !important;}
		
		
	
		
		
	
}

@media (max-width:768px) {
	
	.teilnehmer div {
		border-right:none;
		}
	
	.nav-secondary {
		top:40px !important;}
	
	.home-teaser h2, .teaser {
	font-family: 'Roboto', sans-serif;
	line-height:36px;
	font-size:24px;
	color:#000;
	}
	
	.onSmall {text-align:left !important;}
	
	.navbar.navbar-default ul li {

	}
	
	.referenten img {margin:0 auto !important;}
	
	.header .header-logo {
		width:189px;
		height:auto;}
		
	.header-2 .header-logo {
		width:122px;
		height:auto;}
	
	.header-2 img {margin:0px;}
		
	.anmelden {
		font-size:12px;}
		
	
		
		
		
}	
	
@media (max-width:700px) {
	img {margin-bottom:20px;
	}	
	
	.no-top {
		top:0 !important;}

		.img-smaller {
		width:100px;
		height:auto;}
		
	.text-center-small {
		text-align:center;
	}
	
	

}

@media (max-width:500px) {	
	.title-2 {font-size: 40px !important;}
	
}

@media (max-width:420px) {
	
	
	.mhp-1 {
		display:none;
	}

	.info-btn {
		font-size: 8px;
		display: inline-block;
		padding: 0.1em 0.7em;
		border-radius: 1em;
		border:solid 1px #000;
		color:#000;
		background-color: rgba(0,0,0,0.0);
		margin-right: 5px;
	}

	input[type=checkbox].toggle-switch {
	display:block;
}

	input[type=checkbox].toggle-switch + label {
		display: none;
	}

	input[type=checkbox].toggle-switch {
	font-size: 6px;
	appearance:none !important;
	-moz-appearance:none;
	-webkit-appearance:none;
	width:6em;
	height:3em;
	background-color:rgba(0,0,0,0.6);
	border-radius:3em;
	outline:0;
	cursor:pointer;
	position: relative;
	border: none;
	transition: background-color 0.25s ease-in-out;
	margin-top: -2px;
	}

input[type=checkbox].toggle-switch:checked {
	background-color: #F90;
}

input[type=checkbox].toggle-switch::after {
	content: '';
	height: 3em;
	width: 3em;
	border-radius: 50%;
	position: absolute;
	left: 0em;
	background-color: #FFF;
	transform: scale(0.85);
	transition: left 0.25s ease-in-out;
	box-shadow: 0 0.1em rgba(0,0,0,0.5);
}

input[type=checkbox].toggle-switch:checked::after {
	left: 3em;
}

.pd-home {
	padding: 10px;
}



}

@media print {
	
	.no-print {display:none;}
	
	}