/* MEDIA QUERIES - RESPONSIVE CSS
-------------------------------------------------- */
@media screen and (max-height: 880px) { 
	#item-l {
		top:-6%;
	}

	#item-u {
		top:-6%;
	}
}


@media screen and (max-height: 800px) { 
	
	.modal-dialog {
		position: absolute !important;
		top: 0px !important;
		left: 50%;
		-webkit-transform: translateX(-50%) !important;
		transform: translateX(-50%,) !important;
	}
}


@media screen and (max-height: 800px) and (orientation: landscape) {

	#impression {
		left: 26%;
		max-width: 500px !important;
		max-height: 500px !important;
	}

	#item-m {
		bottom: 4%;
		left: initial;
		right:68%;
	}

	#item-l {
		width:170px !important;
		height:170px !important;
	}

	#item-u,
	#item-m,
	#item-o {
			width:calc(170px * 1.096) !important;
			height:170px !important;
	}
} 




@media screen and (min-width: 1980px) { 
	#wrap-topbild {
		height:32vw;
	}
}


@media screen and (max-width: 2400px) { 
	#item-l {
		width:350px;
		height:350px;
	}

	#item-u,
	#item-m,
	#item-o {
			width:calc(350px * 1.096);
			height:350px;
	}

	#impression {
		left:24%;
		max-width: 720px !important;
		max-height: 720px !important;
	}
}


@media screen and (max-width: 2180px) { 
	#item-l {
		width:315px;
		height:315px;
	}

	#item-u,
	#item-m,
	#item-o {
			width:calc(315px * 1.096);
			height:315px;
	}
}



@media screen and (max-width: 1760px) { 
	#item-l {
		width:280px;
		height:280px;
	}

	#item-u,
	#item-m,
	#item-o {
			width:calc(280px * 1.096);
			height:280px;
	}

	#impression {
		left:24%;
		max-width: 630px !important;
		max-height: 630px !important;
	}
}




@media screen and (max-width: 1500px) { 
	#wrap-topbild {
		height: 36vw;
	}

	#topbild, #topbild .ce-image img {
		width: 112% !important;
		height: auto;
	}

	#impression {
		left:23%;
		max-width: 600px !important;
		max-height: 600px !important;
	}

}


@media screen and (max-width: 1320px) { 
	#item-l {
		width:250px;
		height:250px;
	}

	#item-u,
	#item-m,
	#item-o {
			width:calc(250px * 1.096);
			height:250px;
	}

}




@media screen and (max-width: 1200px) { 
	.container {
  		width:100% !important;
  		max-width:100% !important;
  		margin-left: auto;
  		margin-right: auto;
  		padding-left: 15px;
  		padding-right: 15px;
	}

	#item-l {
		top:-6%;
	}

	#item-u {
		top:-6%;
	}

	#impression {
		left:24%;
		max-width: 580px !important;
		max-height: 580px !important;
	}

	#architect {
		right: 10px;
		margin-right:0px;
	}

}


@media screen and (max-width: 1120px) { 
	.modal-dialog {
		width: 100% !important;
		max-width:100% !important;
		-moz-box-shadow: 0px;
		-webkit-box-shadow: 0px;
		box-shadow: 0px;
		position: absolute !important;
		top: 0 !important;
		left: 0;
		-webkit-transform: none !important;
		transform: none !important;
		margin: 0px 0px !important;
		min-height:100%; 
	}

	.modal-content {
		border: 0px !important;
	}

	.modal-body .bg-blue {
		padding: 20px 15px;
	}

	.modal-body .content-inner {
		padding: 20px 15px; 
	}
}



@media screen and (max-width: 1020px) { 
	
	#megura-swissness {
	right: 15px !important;
	}

	.inhalt .row, #footer .row {
      margin-left:  0px !important;
      margin-right: 0px !important; 
    }


	#impression {
		left: 20%;
		max-width: 520px !important;
		max-height: 520px !important;
		top:15%;
		transform:none;
	}


	#item-l {
		width:200px;
		height:200px;
	}

	#item-u,
	#item-m,
	#item-o {
			width:calc(200px * 1.096);
			height:200px;
	}


}


@media screen and (max-width: 992px) {

	#wrap-inhalt {
		margin-top: 40px;
	}


	.home #wrap-inhalt {
		margin-top:80px; 
		/* padding-top: 80px; */
	}

	.accordion .card-body  {
		 max-width:100%; 
	 }

}



@media screen and (max-width: 820px) { 

	#impression {
		left: 50%;
		top:40%;
		max-width: 380px !important;
		max-height: 380px !important;
		transform:translate(-50%, -40%);
	}

	#item-m {
		bottom: 4%;
		left: initial;
		right:68%;
	}

	#item-l {
		width:170px;
		height:170px;
	}

	#item-u,
	#item-m,
	#item-o {
			width:calc(170px * 1.096);
			height:170px;
	}
}





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

	#wrapper {
	 display:block !important;
	}

	#wrap-topbild {
		margin-top: 80px;
		height:auto;
		height: 40vw;
	}

	#topbild, #topbild .ce-image img {
		width: 128% !important;
		height: auto;
	}

	.bg-white:first-child {
		border-top:0px !important; 
	}

	.col-12, .col-6 {
		margin-bottom:25px;
	}

	#wrap-footer {
		border-left: 0px;
		border-right: 0px;
		border-bottom:0px;
	}

	#frow1 .col-12 {
		margin-bottom:20px; 
	}

	#frow2 {
		margin-top:10px; 
	}

	#frow3 .ce-column {
		margin-bottom: 0px !important;
	}
		
	main img {
		max-width: 100% !important;
		height: auto; 
	}

	#wrap-inhalt.notb {
		margin-top: 100px;
	}

	.modal-footer {
		display: block;
		padding: 10px 15px !important;
	}

	.fa-angle-down::after {
		width: 30.7px;
		height: 40.9px;
	}
}


@media screen and (max-width: 680px) { 
	
	#megura-swissness {
	width:80px;
	height:80px;
	bottom:0px;
	}

	#impression {
		max-width: 320px !important;
		max-height: 320px !important;
	}
}



@media screen and (max-width: 640px) { 

	#item-l {
		width:140px;
		height:140px;
	}

	#item-u,
	#item-m,
	#item-o {
			width:calc(140px * 1.096);
			height:140px;
	}
}



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

	#logo {
		width: 175px;
	}	

	#wrap-topbild {
		height: 48vw;
	}

	#topbild, #topbild .ce-image img {
		width: 145% !important;
		height: auto;
	}

	#frow1 .col-12 {
		margin-bottom:30px; 
	}

	footer .empty {
		display:none; 
	}
	
	 .show-menu .letter {
	 	opacity:0.10;
	 }

	.bg-blue {
		padding: 60px 0px 50px 0px;
		border-bottom:30px solid #fff;
		border-top:30px solid #fff;
	}

	.bg-white {
		border-bottom:30px solid #fff;
		border-top:30px solid #fff;
	}

	#impression {
		left: 30%;
		top: 40%;
		transform:translate(-30%, -40%);
	}

}



@media screen and  (max-width: 520px) {

	#impression {
		max-width: 280px !important;
		max-height: 280px !important;
	}

	#architect {
		width: 30px;
		height: 308px;
		right:18px; 
	}

	#architect img {
		max-width: 100% !important;
		height: auto;
		width: 30px;
		height: 308px;
	}

	#item-l {
		width:100px;
		height:100px;
	}

	#item-u,
	#item-m,
	#item-o {
			width:calc(100px * 1.096);
			height:100px;
	}


 	#home-anim, #home-anim-menu {
		height:calc(100vh - 80px) !important;
		min-height: -webkit-fill-available;
	}

	#item-o, #item-m {
		bottom: 12%;
	}

}





@media screen and  (max-width: 480px) { 

	#impression {
		max-width: 200px !important;
		max-height: 200px !important;
	}
	
}