html{ border-top-color: rgb(255, 255, 12); }
@media (max-width: 768px) { 
	html{ border-top-color: rgb(255, 255, 1); }
} 
	.layout { gap: 8%;	 }	
	.zeroTwelfths { 
		flex: 0 0 -8%; 
		width: -8%; display:none;
	} 
	.oneTwelfth { 
		flex: 0 0 1%; 
		width: 1%; 
	} 
	.twoTwelfths { 
		flex: 0 0 10%; 
		width: 10%; 
	} 
	.threeTwelfths { 
		flex: 0 0 19%; 
		width: 19%; 
	} 
	.fourTwelfths { 
		flex: 0 0 28%; 
		width: 28%; 
	} 
	.fiveTwelfths { 
		flex: 0 0 37%; 
		width: 37%; 
	} 
	.sixTwelfths { 
		flex: 0 0 46%; 
		width: 46%; 
	} 
	.sevenTwelfths { 
		flex: 0 0 55%; 
		width: 55%; 
	} 
	.eightTwelfths { 
		flex: 0 0 64%; 
		width: 64%; 
	} 
	.nineTwelfths { 
		flex: 0 0 73%; 
		width: 73%; 
	} 
	.tenTwelfths { 
		flex: 0 0 82%; 
		width: 82%; 
	} 
	.elevenTwelfths { 
		flex: 0 0 91%; 
		width: 91%; 
	} 
	.twelveTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
@media (max-width: 768px) { 
	.zeroTwelfths { 
		flex: 0 0 -8%; 
		width: -8%; display:none;
	} 
	.oneTwelfth { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.twoTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.threeTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.fourTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.fiveTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.sixTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.sevenTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.eightTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.nineTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.tenTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.elevenTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.twelveTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.zeroWholes { 
		flex: 0 0 -8%; 
		width: -8%; display:none;
	} 
	.oneWhole { 
		flex: 0 0 92%; 
		width: 92%; 
	} 

} 
	html { font-size: 20px; } 
	@media (max-width: 1568.1px) { 
		html { font-size: 19.6px; } 
	} 

	@media (max-width: 1493.4px) { 
		html { font-size: 18.7px; } 
	} 

	@media (max-width: 1422.3px) { 
		html { font-size: 17.8px; } 
	} 

	@media (max-width: 1354.5px) { 
		html { font-size: 16.9px; } 
	} 

	@media (max-width: 1290px) { 
		html { font-size: 16.1px; } 
	} 

	@media (max-width: 1228.6px) { 
		html { font-size: 15.4px; } 
	} 

	@media (max-width: 1170.1px) { 
		html { font-size: 14.6px; } 
	} 

	@media (max-width: 1114.4px) { 
		html { font-size: 13.9px; } 
	} 

	@media (max-width: 1061.3px) { 
		html { font-size: 13.3px; } 
	} 

	@media (max-width: 1010.8px) { 
		html { font-size: 12.6px; } 
	} 

	@media (max-width: 962.6px) { 
		html { font-size: 12px; } 
	} 

	@media (max-width: 916.8px) { 
		html { font-size: 11.5px; } 
	} 

	@media (max-width: 873.1px) { 
		html { font-size: 10.9px; } 
	} 

	@media (max-width: 831.6px) { 
		html { font-size: 10.4px; } 
	} 

	@media (max-width: 792px) { 
		html { font-size: 9.9px; } 
	} 

	@media (max-width: 768px) { 
		html { font-size: 24px; } 
	} 

	@media (max-width: 754.3px) { 
		html { font-size: 23.6px; } 
	} 

	@media (max-width: 718.3px) { 
		html { font-size: 22.4px; } 
	} 

	@media (max-width: 684.1px) { 
		html { font-size: 21.4px; } 
	} 

	@media (max-width: 651.6px) { 
		html { font-size: 20.4px; } 
	} 

	@media (max-width: 620.5px) { 
		html { font-size: 19.4px; } 
	} 

	@media (max-width: 591px) { 
		html { font-size: 18.5px; } 
	} 

	@media (max-width: 562.8px) { 
		html { font-size: 17.6px; } 
	} 

	@media (max-width: 536px) { 
		html { font-size: 16.8px; } 
	} 

	@media (max-width: 510.5px) { 
		html { font-size: 16px; } 
	} 

	@media (max-width: 486.2px) { 
		html { font-size: 15.2px; } 
	} 

	@media (max-width: 463.1px) { 
		html { font-size: 14.5px; } 
	} 

	@media (max-width: 441px) { 
		html { font-size: 13.8px; } 
	} 

	@media (max-width: 420px) { 
		html { font-size: 13.1px; } 
	} 

	@media (max-width: 400px) { 
		html { font-size: 12.5px; } 
	} 
@media (orientation: portrait) {


}
html {
	border-bottom-color:black;
}
@media only screen and (max-width: 768px){ /*SMARTPHONE */
	html {
		border-bottom-color:white;
	}
	.desktop {
		display: none !important;
    }

    .mobile {
		display: block;
    }

	.layout{
		gap: 2rem;
		flex-direction: column;
	}
	div.login{
		padding-bottom: calc(3 / 4 * (100% + 8rem));
		width:calc(100% + 6em);
	}

	div.loginForm form{
		text-align: center;
	}

	div.loginForm input{
		margin-right: 0;
		margin-bottom: 2rem;
		display:block;
	}

	div.loginForm button{
		margin-right: 0;
	}

	body{
		padding:2rem;
	}

	div.collection.angebot .gallery{
		margin-left: -2rem;
	}

	.collection.start .twoTwelfths{
		width:80%;
		flex-basis:80%;
		margin-left: 10%;
	}

	.deviceContainer {
		&.desktop {
			margin-top:4rem;
			transform: translateX(0);
			display:block !important;

			&+div.wow{
				margin-left: 0 !important;
				margin-top:4rem;
				padding-right: 0 !important;
			}
		}
	}

	div.collection.team div.collection div.threeTwelfths img{
		width:50%;
		flex-basis: 50%;
	}
	div.collection.team div.collection div.threeTwelfths img.mobile{
		margin-top:-52%;
		margin-left: 52%;
	}

	div.collection.faqItem .fourTwelfths{
		width:100%;
		flex:0 0 100%;
	}

	[data-label='imprint']  .twelveTwelfths{
		column-count:1;
	}

	/* **************************** NAVBAR ****************************** */
	ul.navbar-items{
		display: block;
		height: auto;
		padding: 1rem 1rem 7rem 1rem;
		border-radius: 3rem;
	}
	body.navbarTop ul.navbar-items{
		padding: 7rem 1rem 1rem 1rem;
	}

	div.navbar-toggler {
		width: 6rem;
		height: 6rem;
	}
	div.navbar{
		top:calc( 100% - 8rem);
		font-size: 1.7rem;
		right:2rem;
		height: 6rem;
		width: 6rem;
		border-radius: 3rem;
	}

	body.navbarTop .navbar{
		top: 2rem;
	}

}