@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');



/* MOBIL */



@media (orientation: portrait) {



	*{

		margin: 0;

		padding: 0;

		box-sizing: border-box;

		font-family: 'Montserrat', sans-serif;

	}



	html{

		height: 100%;

		width: 100%;

		position: relative;

		overflow: hidden;

	}



	body{

		/*background-color: #990000;*/

		height: 100%;

		width: 100%;

		/*background-image: url("images/übersicht-bg.png");

		background-repeat: no-repeat;

		background-position: center;

		background-size: cover;*/

	}



	#preload-images{

		position:absolute;

		height:0;

		width:0;

		top:0;

		left:0;

	}



	#preload-images img{

		position:absolute;

		height:0;

		width:0;

		top:0;

		left:0;

	}



	#content{

		height: 100%;

		width: 100%;

		position: absolute;

		top: 0;

		left: 0;

		background-image: url("../images/Background-Karussell-0.jpeg");

		background-repeat: no-repeat;

		background-position: center;

		background-size: cover;

	}



	.overlay-1{

		height: 100%;

		width: 100%;

		position: absolute;

		top: 0;

		left: 0;

		opacity: 0;

		background-color: black;

		transition: opacity .5s;

	}



	.overlay-2{

		height: 100%;

		width: 100%;

		position: absolute;

		top: 0;

		left: 0;

		opacity: 0.4;

		background-color: black;

	}



	#logo{

		width: 50%;

		height: 10%;

		position: absolute;

		top: 0;

		left: 0;

		z-index: 101;

		opacity: 1;

		background-color: transparent;

		

		display: flex;

		align-items: center;

		justify-content: center;

		

		animation-name: logoMove;

		/*animation-duration: 4s;*/

		animation-duration: 3s;

		animation-fill-mode: forwards;

	}



	#logo img{

		height: auto;

		width: 80%;

		-webkit-filter: drop-shadow(0 0 15px rgba(0,0,0,0.7));	

	}







	#cont{

		height: 85%;

		width: 100%;

		background-color: transparent;

		position: absolute;

		left: 0;

		top: 10%;

		opacity: 0;

		

		overflow-y: auto;

		

		/*

		display: flex;

		align-items: center;

		justify-content: space-evenly;

		*/

		

		animation-name: boxesIn;

		animation-duration: 2s;

		animation-fill-mode: forwards;

		animation-delay: .5s;

	}



	#headline{

		color: white;

		margin: 3% 0 0 0;

		font-size: 4vh;

		text-align: center;

	}



	.box-cont{

		width: 100%;

		min-height: 80%;

		background-color: transparent;

		

		display: flex;

		align-items: center;

		justify-content: space-evenly;

		flex-direction: column;

	}

	.box-headline{
		text-align: center;

		color: white;

		word-wrap: break-word;

		font-size: 6vw;
	}

	.box-1{

		height: auto;

		width: 90%;

		border-radius: 25px;

		box-shadow: 0 0 15px black;

		overflow: hidden;

		position: relative;

		cursor: pointer;

		transition: transform .5s;

		margin: 1%;

	}



	.box-1 img{

		width: 100%;

		height: 100%;

		object-fit: cover;

		display: flex; 

		justify-content: center; 

		align-items: center;

	}



	.box-1 h2{

		position: absolute;

		bottom: 3%;

		width: 100%;

		height: 20%;

		display: flex;

		align-items: center;

		justify-content: center;

		color: white;

		font-size: 3rem;

		text-shadow: 0 0 15px #000;

	}



	@keyframes boxesIn {

		0% {

			opacity: 0;

		}

		100% {

			opacity: 1;

		}

	}



	.box-1:hover{

		transform: scale(1.1);

	}



	.box-1:hover .overlay-1{

		opacity: 0;

	}



	.box-2{

		height: 30vh;

		width: 80vw;

		border-radius: 25px;

		box-shadow: 0 0 15px black;

		overflow: hidden;

		position: relative;

		cursor: pointer;

		transition: transform .5s;

		margin: 1%;

	}



	.box-2 iframe{

		height: 100%;

		width: 100%;

	}



	.box-2:hover{

		transform: scale(1.1);

	}

	

	.box-3{

		/*min-height: 50%;

		min-width: 20%;*/

		width: 90%;

		height: auto;

		border-radius: 25px;

		box-shadow: 0 0 15px black;

		overflow: hidden;

		position: relative;

		object-fit: cover;

		cursor: pointer;

		transition: transform .5s;

		margin: 1%;

	}



	.box-3 img{

		/*height: 500px;

		width: 80%;*/

		/*object-fit: cover;*/

		width: 100%;

		height: 100%;

		object-fit: cover;

		display: flex; 

		justify-content: center; 

		align-items: center;

	}



	.box-3:hover{

		transform: scale(1.1);

	}



	#auftritte{

		height: 10%;

		width: 100%;

		text-align: center;

		margin: 5% auto 0 auto;

		color: #990000;

		font-size: 4vw;



		display: flex;

		justify-content: center;

		align-items: center;

	}



	#auftritte h2 {

		background-color: rgba(255,255,255,.7);

		border-radius: 30px;

		width: 50%;

		border: 2px solid #990000;

	}



	#timeline-container{

		min-height: 500px;

		width: 80%;

		margin: .5% auto 1% auto;

		background-color: transparent;

		position: relative;

	}



	#timeline{

		width: 30px;

		height: 100%;

		background-color: #FFF;

		border-radius: 25px;

		position: absolute;

		left: 5%;

		top: 0;

		box-shadow: 0 0 15px #000;

	}





	.timeline-eintrag{

		width: 90%;

		height: auto;

		background-color: transparent;

		position: relative;

		margin: 1% 5% 0 5%;

	}



	.dot{

		height: 50px;

		width: 50px;

		border-radius: 25px;

		background-color: #999;

		position: absolute;

		left: -11px;

		top: 0;

		box-shadow: 0 0 15px #000;

		

		display: flex;

		align-items: center;

		justify-content: center;

		text-align: center;

		

		font-size: 2rem;

	}



	.line{

		width: 65px;

		height: 12px;

		background-color: white;

		position: absolute;

		left: 50px;

		top: 19px;

	}



	.timeline-eintrag h2{

		color: white;

		/*position: absolute;

		left: 130px;

		top: 8px;*/

		position: relative;

		margin: 0 0 0 130px;

		padding: 8px 0 0 0;

		font-size: 3.5vw;

	}



	.timeline-eintrag p{

		position: relative;

		margin: 0 0 0 130px;

		color: white;

		word-wrap: break-word;

		font-size: 2.5vw;

	}



	.timeline-ort{

		cursor: pointer;

		text-decoration: underline;

	}



	.timeline-ort:hover span{

		display: block;

	}



	.map{

		display: none;

		position: relative;

		height: 100%;

		width: auto;

		z-index: 200;

	}

	

	.wiggle{

		-webkit-animation-name: wiggle;

		animation-name: wiggle;

		-webkit-animation-timing-function: ease-in;

		animation-timing-function: ease-in;

		-webkit-animation-duration: 0.75s;

		animation-duration: 3s;

		animation-delay: 2s;

		animation-iteration-count: infinite;

		animation-fill-mode: forwards;

	}

	

	/*.wiggle:hover{

		animation-play-state: paused;

	}*/

	

	@keyframes wiggle {

		0% { transform: skewX(9deg); } 

		2.5% { transform: skewX(-8deg); } 

		5% { transform: skewX(7deg); } 

		7.5% { transform: skewX(-6deg); } 

		10% { transform: skewX(5deg); } 

		12.5% { transform: skewX(-4deg); } 

		15% { transform: skewX(3deg); } 

		17.5% { transform: skewX(-2deg); } 

		20% { transform: skewX(1deg); } 

		22.5% { transform: skewX(0deg); } 

		25% { transform: skewX(0deg); }

	}



	.box-arrow-bottom{

		display: none;

	}



	.box-arrow-bottom:after {

		display: none;

	}



	.hideTipp{

		display: none;

	}

	

	#images-watch{

		display: none;

	}

	

	#pause-resume{

		display: none;

	}



	

	/* Jubiläums Banner */



	.box-4{

		/*height: 90%;*/

		width: 80%;

		border-radius: 25px;

		position: relative;

		overflow:hidden;

		/*border: 1px solid white;*/

		padding: 1% 0;

	}



	.b-top{

		/*min-height: 35%;*/

		width: 100%;

		background-color: white;

		/*position: absolute;

		top: 0;

		left: 0;*/

		padding: 0 1%;

	}



	.b-top img{

		width: 80%;

		height: auto;

		margin: 0 0 0 10%;

	}



	.b-top h2{

		width: 100%;

		text-align: center;

		color: black;

		font-size: 4.5vw;

		font-weight: bold;

	}



	.b-bottom{

		height: 55%;

		width: 100%;

		background-color: #990000;

		/*position: absolute;

		left: 0;

		bottom: 0;*/

	}



	.b-bottom h2{

		width: 100%;

		text-align: center;

		color: white;

		font-size: 4vw;

		font-weight: bold;

	}



	.b-bottom h3{

		width: 100%;

		text-align: center;

		color: white;

		font-size: 3.5vw;

		font-weight: bold;

	}



	.b-p-cont {

		width: 100%;

		padding: 3%;

		display: flex;

		flex-direction: row;

		justify-content: center;



		text-align: center;

	}



	.b-border{

		border-right: 1px solid white;

	}



	.b-p-cont p {

		font-size: 2.5vw;

		color: white;

		padding: 1%;

	}



	.b-infos{

		width: 100%;

		text-align: center;

		color: white;

		padding: 1% 0 4% 0;

	}



}