* {outline:none;}
body {
	background-image: url("../img/HG.jpg");
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	background-color:#f6f3c4;	
	color:#637037;
	font-family: museo-sans, sans-serif;
	font-weight:300;
}
a {
	color:#637037;
	text-decoration:underline;
	font-family: museo-slab, serif;
	font-style:italic;
	font-weight:900;
}
a:hover {color:#637037;}
.text-left{text-align:left !important;}
.text-left {text-align:center !important;} 
.text-left {text-align:left !important;}

.gap-xs {margin-bottom:15px;}
.gap-sm {margin-bottom:30px;}
.gap-lg {margin-bottom:60px;}
.gap-xl {margin-bottom:90px;}

header {
	background-image: url("../img/HG.jpg");
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	background-color: #f8f8d3;
}

.main-header {
		position: fixed;
		width:100%;
		height:98px;
		background-color:#f8f8d3;
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	}
.logo {width:60%;}

#main-nav {
	position: absolute;
	top: 58px;
	right: 20px;
}

.main-header,
nav.navbar {z-index: 500;}

.navbar-nav .nav-link,
.imprint-link {
	color: #637037 !important;
	text-decoration:none;
	font-size:22px;
	font-weight:500;
	font-family: museo-slab, serif;
	font-style:italic;
}
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link,
.navbar-nav .nav-item:active .nav-link,
.navbar-nav .nav-item:focus .nav-link,
.imprint-link:hover {
	font-weight:900;
	text-decoration:none;
}

h1,h2,h3,h4,h5,h6 {
	font-family: museo-slab, serif;
	font-style:italic;
	font-weight:900;
}

.swiper-container {height: 100%;}

.swiper-button-next, .swiper-button-prev {
    position: relative;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: 0;
    z-index: 10;
    background: transparent;
}

.chevron-l1, .chevron-l2,
.chevron-r1, .chevron-r2 {
	font-size:50px;	
	position:relative;
	top:50%;
	margin-top: -30px;
	opacity:0.4;
}
.arrow:hover .chevron-l1, .arrow:hover .chevron-l2,
.arrow:hover .chevron-r1, .arrow:hover .chevron-r2 {
	opacity:0.6;
	cursor:pointer;
}
.arrow:hover .chevron-l2, .arrow:hover .chevron-r1 {opacity:1;}

.chevron-l2 {margin-left: -25px;}
.chevron-r1 {margin-right: -25px;}
.chevron-l1, .chevron-r2 {opacity:0.2;}

.swiper-slide {text-align:center;}

.swiper-slide p,
.swiper-slide ul {text-align:justify;}

.swiper-slide p b,
.swiper-slide li b {font-weight: bold;}

.swiper-slide.block {padding: 0 20% 5%;}

.swiper-slide.block .svg-inline--fa {font-size:100px}
.swiper-slide.block h2 {font-size:35px}
.swiper-slide.block p {font-size:16px}

#fragslaendle video {
	-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.13); 
	-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.13); 
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.13);
	max-width: 1000px;
    height: auto;
}

#fragslaendle-2 {margin-top: 30px;}

#fragslaendle-5 h2 {margin-top: 50px;}
#fragslaendle-5 img {width: 90%;}

#fragslaendle-6 h2 {margin-top: 40px;}

#fragslaendle-7 h2 {margin-top: 100px;}
#fragslaendle-7 p {width:95%;}

#fuerslaendle {padding-top:5%;}

#ueberuns img {width: 45%;}

#ueberuns-2 img,
#ueberuns-3 img,
#ueberuns-4 img,
#ueberuns-5 img {display:inline;}

/*
#ueberuns .oberkirch,
#ueberuns .offenburg,
#ueberuns .tourismusdigital,
#ueberuns .billiance {position:absolute;}
*/

ul.lightslider {height:300px !important;}

.lslide {width:10%;}

.section {width:1500px;}

.demo ul.navbar-nav, .demo footer {display:none;}

.empty {color:#f6f3c4;}

.modal {top: auto;}
.modal .modal-xl {
	max-width: 80%;
	margin-bottom: 0;	
}
.modal .modal-xl .modal-content {
	border-radius: 18px;
	border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	background-image: url("../img/HG.jpg");
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	background-color: #f8f8d3;
}
.modal .modal-xl .modal-content .modal-header {border:none;}

.modal .modal-xl .modal-content .modal-header .close {
    padding: 8px 12px;
    background-color: #637037;
    border-radius: 50%;
    opacity: 1;
    color: #fff;
    font-size: 2.2rem;
    position: absolute;
    right: 0;
    top: 0
}

.infografik {width:80%;}

#kontakt .row {
	text-align:left;
	font-size:14px;
}

#kontakt h4 {
	font-weight:bold;
	font-size:14px;
}
#kontakt a {
	font-family: museo-sans, sans-serif;
    font-weight: 300;
	text-decoration: none;
	
}

footer {    
	height: 300px;
    background-image: url(../img/bg_footer.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    background-size: 90%;
}
.imprint-link {
	position: relative;
    top: 200px;
}

.modal.animate-bottom {animation: animatebottom 0.4s;}

.block-w-img h2 {text-align:left;}
.block-w-img p {text-align:justify;}

.multicol-2col {
	-webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
	-webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;	
}
.multicol-3col {
	-webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
	-webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}
.multicol-2col h2,
.multicol-3col h2 {
	-webkit-column-span: all;
    column-span: all;	
}
.multicol-2col p,
.multicol-3col p {text-align:left;}

.stoerer {
	position: absolute;
    bottom: 20px;
    left: 30px;
}
.stoerer img {width:80%;}

.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

/* *** Media Queries *** */

/* mobileview start */
@media (max-width: 1400px) {	
	nav button,
	nav #main-nav,
	.imprint-link,
	footer .container-fluid {display:none !important;}
	
	footer {background:none !important;}
	
	.stoerer {
		position: fixed !important;
		bottom: 0 !important;
		left: 2% !important;
	}
	
	#mobileview {padding: 185px 25px 0;}
	#mobileview p {
		margin-top:10px;
		padding-left:30px;
		padding-right:30px;
	}
}

/* mobileview end */


@media (min-width: 1300px) {
	footer {background-size: 80%;}
}

@media (min-width: 1900px) {
	.main-header {height: 113px;}
	
	.navbar-brand {margin-left:5%;}
	
	.logo {width: 70%;}	
	
	.container-fluid.content,
	.row.content {height: calc(100vh);}
	
	.content-center {
		
	}	
	
	.chevron-l1, .chevron-l2,
	.chevron-r1, .chevron-r2 {font-size:90px;}
	
	footer {
		background-size: 76%;
		position: fixed;
		bottom: -20px;
		width: 100%;
		background-position: center bottom -55px;
		height: 320px;
	}	
	.imprint-link {
		top: 240px;
		right: 15px;
	}
}

@media (min-width: 2000px) {	
	.main-header {height:155px;}
	
	.logo {width:100%;}
	nav {
		width: 90%;
		margin: 0 auto;
	}
	.navbar-brand {margin-left:10%;}
	
	#main-nav {
		top: 98px;
		right: 0;
	}
	.sub-nav {
		right: 0;
		top: 100px;
		min-width: 530px;
	}
	
	#main-nav .nav-item {text-align: right;}
	#main-nav .nav-item.item-1,
	#main-nav .nav-item.item-2 {width: 150px;}
	#main-nav .nav-item.item-3 {width: 120px;}
	#main-nav .nav-item.item-4 {width: 116px;}
	
	.swiper-slide.block {padding: 5% 20% 5%;}	
	.swiper-slide.block .svg-inline--fa {font-size:140px}
	
	.swiper-slide.block h2,
	.block-w-img h2,
	#kontakt h2,
	#ueberuns h2 {font-size:50px}
	
	#fragslaendle-6 h2 {margin-top: 80px;}
	
	.swiper-slide.block p,
	.swiper-slide.block ul,
	.block-w-img p,
	.block-w-img ul,
	#kontakt h4,
	#kontakt .row {font-size:20px}
	
	.infografik {width: 70%;}
	
	footer {background-size: 64%;}
}

@media (min-height: 500px) and (max-height: 1000px) {
	.swiper-slide p {font-size: 15px;}
	
	#fragslaendle video { 
		margin-top: 10%;
	}
	
	#fragslaendle-2 .col-sm-7 {padding-top:3%;}
	
	.infografik {width: 85%;}
	
	.swiper-button-next, .swiper-button-prev {
		top: 50%;
		margin-top: 0;
	}
	
	#fuerslaendle,
	#fuerslaendle-3 {
		padding-top: 8%;
	}
	
	#fuerslaendle-3,
	#fuerslaendle-4 {
		padding-top: 5%;
	}
}