@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700');



@charset "UTF-8";

body {
	font-family: 'Roboto Condensed', sans-serif;
}


a {
	color: inherit;
}


h1, h2, h3, h4, h5 {
	font-weight: 700;
	color: #00a3ba;
}




.grey {
	background-color: #f2f2f2;
}

.white {
    background: #fff;
}



section {
	padding: 2em 0;
	margin: 1em 0;
}


.row {
	padding: 1em 0;
}

.header .row {
	padding: 0;
}





.header {
	background-color: #096471;
	color: #fff;
	z-index: 99;
	border-bottom: 16px solid #fff;
}



.header a {
	text-decoration: none;
	color: #fff;
}

.header a:hover {
	text-decoration: none;
	color: #000;
}


.contentabstand {
	padding-top: 120px;
}

@media (min-width: 576px) {
	.contentabstand {
		padding-top: 180px;
	}
}

@media (min-width: 768px) {
	.contentabstand {
		padding-top: 260px;
	}
}

@media (min-width: 992px) {
	.contentabstand {
		padding-top: 180px;
	}
}

@media (min-width: 1200px) {
	.contentabstand {
		padding-top: 220px;
	}
}







.bottom {
	position: absolute;
	bottom: 20px;
}

.adresse p {
	padding: 0;
	margin: 0;
	display: block;
}






.sprung {
	font-size: 1.2em;
	font-weight: 700;
}

@media (min-width: 992px) {
	.sprung {
		font-size: 2em;
	}
}

.sprung p {
	line-height: 1.2;
	padding: 0;
	margin: 0;
	display: block;
}

.sprung a {
	text-decoration: none;
	color: #fff;
}

.sprung a:hover {
	text-decoration: none;
	color: #000;
}










.card-columns {
    column-count: 1;
}

@media (min-width: 576px) {
	.card-columns {
	    column-count: 2;
	}
}


@media (min-width: 992px) {
	.card-columns {
	    column-count: 3;
	}
}


.card-columns-sponsoren {
    column-count: 3;
}








	/* Fancybox*/

	#myImg {
	    border-radius: 5px;
	    cursor: pointer;
	    transition: 0.3s;
	}

	#myImg:hover {opacity: 0.7;}

	/* The Modal (background) */
	.modal {
	    display: none; /* Hidden by default */
	    position: fixed; /* Stay in place */
	    z-index: 10000; /* Sit on top */
	    padding-top: 100px; /* Location of the box */
	    left: 0;
	    top: 0;
	    width: 100%; /* Full width */
	    height: 100%; /* Full height */
	    overflow: auto; /* Enable scroll if needed */
	    background-color: rgb(0,0,0); /* Fallback color */
	    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
			max-height: 100%;
			text-align: center;
			vertical-align: middle;
	}

	/* Modal Content (image) */
	.modal-content {
	    margin: auto;
	    display: block;
	    max-width: 1600px;
			max-height: 1200px;
			vertical-align: middle;
	}


	.modal-dialog {
	  display: inline-block;
	  text-align: left;
	  vertical-align: middle;
		max-width: 1600px;
		max-height: 1200px;
	}

	/* Caption of Modal Image */
	#caption {
	    margin: auto;
	    display: block;
	    width: 80%;
	    max-width: 700px;
	    text-align: center;
	    color: #ccc;
	    padding: 10px 0;
	    height: 150px;
			vertical-align: middle;
	}


	/* Add Animation */
	.modal-content, #caption {
	    -webkit-animation-name: zoom;
	    -webkit-animation-duration: 0.6s;
	    animation-name: zoom;
	    animation-duration: 0.6s;
			vertical-align: middle;
	}


	/* The Close Button */
	.close {
	    position: absolute;
	    top: 20px;
	    right: 20px;
	    color: white;
			font-family: 'Roboto', sans-serif;
	    font-size: 50px;
	    font-weight: bold;
	    transition: 0.3s;
	}


	.close:hover {
		color: #f2f2f2;
	}


		@media screen and (max-width: 1600px) {
			.modal-content {
				width: 80vw;
			}

			.close {
	    top: 20px;
		}
}

		@media screen and (max-width: 768px)
		and (orientation: landscape)
	 {
			.modal-content {
				width: 80vw;
			}
			.modal {
	    	padding-top: 4px;
			}
			.close {
	    top: 0px;
			font-size: 40px;
					right: 10px;
		}
}

				@media screen and (max-width: 768px)
				and (orientation: portrait)
			 {
					.modal-content {
						width: 80vw;
						margin-top: 28px;

					}
					.modal {
			    	padding-top: 4px;
					}
					.close {
			    top: 0px;
					font-size: 40px;
							right: 10px;
				}
}



		@media screen and (min-width: 768px)
	 {
			.modal-content {
				width: 80vw;
				margin-top: 28px;

			}
			.modal {
	    	padding-top: 20px;
			}
			.close {
	    top: 0px;
}
		}





























/* youtube*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/* Maps*/
.map-responsive{
    overflow:hidden;
    padding-bottom: 80%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}









.footer {
	background-color: #333;
	color: #fff;
	margin-bottom: 0;
}


.footer a {
	color: #fff;
}

.footer a:hover {
	color: #fff;
	text-decoration: underline;
}