/* RESPONSIVE CSS
-------------------------------------------------- */


@media screen and (max-width: 1500px) {
	#page {
		margin-right:16em;
		width:calc(100% - 16em);
	}

	#wrap-header {
		width: 16em;
	}
	
}


@media screen and (max-width: 1280px) {
	#page {
		margin-right:13em;
		width:calc(100% - 13em);
	}

	#wrap-header {
		width: 13em;
	}
	
	.zitat {
		/*margin-right:-50px;  */
	}
}

@media screen and (max-height: 750px) {
	#mobile-logo {
		height:300px; 

	}
}


@media screen and (max-width: 1080px) , screen and (max-height: 650px) {

	.row {
		margin-right: 0px !important;
		margin-left: 0px !important;
	}
	
	.container {
		margin-left: auto;
		margin-right: auto;
		padding-left: 15px !important;
		padding-right: 15px !important;
		max-width:100% !important; 
	}
	
	#section-id-33 .row, #section-id-46 .row {
		margin-left:-15px !important;
		margin-right:-15px !important;
	}

	#wrap-header {
		display:none; 
		height:0px !important; 
	}
	
	#page {
		margin-right: 0em;
		width: 100% !important;
		/*margin-top:64px;*/ 
	}
	
	#language { display:none; }
	
	#mobile-header {
		display:block !important;
	}
	
	#mobile-logo {
		display:block; 
		position:absolute;
		top:10px;
		right:12px; 
		height:300px; 
		width:auto; 
		z-index:500;
	}
	
	#mobile-logo img {
		height:100%;
		width:auto; 
	}
	
	a.backtotop { bottom: 25px; }
	
	.section-state3  {
		display:block !important;
	}

	
	.zitat {
		top: 70%;
		margin-right: 10%;
		height: auto;
	}


	.mfp-content {
		z-index: 1100 !important;
	}	

	button.mfp-close, button.mfp-arrow {
		z-index: 1101;
	}
	
	.mfp-close {
		color: #999 !important;
		top: 8px !important; 
		right:20px !important; 
	}

	.white-popup-block {
		background: #FFF;
		padding: 20px 15px !important;
		text-align: left;
		max-width: 100% !important;
		margin: 0 auto !important;
		position: relative;
	}
	
	.mfp-container {
		padding: 0px 0px !important; 
	}
	
	#mobile-language {
		left: 0px;
	}

}



@media screen and (max-width: 767px) {
	div[class*="col-sm-"] { margin-bottom:25px !important }	
	
	#meguralink {
		  position: relative !important;
		  text-align: left !important;
	}
}



@media screen and (max-width: 680px) {
	.section-content {
		padding: 40px 15px 40px 15px;
	}
	
	#section-id-8 .section-content, #section-id-47 .section-content {
		padding-left:0px !important;
		padding-right:0px !important; 
	}
}



@media screen and (max-width: 640px) { 
	section {
		/*border-top:0px solid #fff; 
		border-left:0px solid #fff; 
		border-right:0px solid #fff; 
		background-color:#fff !important;*/
	}
	
	.section-state3  {
		/*background-color: #E8E8E8 !important;*/
	}
	
	.linktable th:first-child, .linktable td:first-child {
		width:100%; 
	}

	.linktable th, .linktable td {
		width:100%; 
		display:block !important; 
		line-height:110% !important; 
	}

	.linktable tr td:last-child	{
		padding-bottom:18px; 
	}

}


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

	#phone {
		display: block;
		position: absolute;
		top: 30px;
		right: 15px;
	}
	
	a.backtotop {
		bottom: 15px;
	}
	.zitat {
		position:absolute;
		right:initial !important;
		bottom:10px;
		top:initial !important;
		margin-right:0; 
		/*max-width:calc(100% - 30px); */
		width:calc(100% - 15px);
		padding: 0px 15px 0px 0px;
		height:auto; 
	}
	
	#megura-swissness {
		width: 80px;
		height: 80px;
		position: absolute;
		bottom: 100px;
		right: 15px;
	}
	
}



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

	.topbild {
		background-position:35px 10px !important;
	}

}


@media screen and  (max-width: 480px) { 
    #logo a {font-size: 18px;}

}





/* Tablets  AND Small Laptops */
@media screen and (min-width: 1080px)  and (max-height: 800px)  {

	#logo {
		height: 380px;
		width: auto;
	}
	
	#dmenu {
		bottom: 10px;
	}
	
	#dmenu li {
		margin-bottom: 10px;
	}
	
}

@media screen and (min-width: 1080px)  and (max-height: 660px)  {

	#logo {
		height: 300px;
		width: auto;
	}
	
	#dmenu {
		bottom: 5px;
	}
	
	#dmenu li {
		margin-bottom: 8px;
	}
	
}