/* lato-100 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/lato-v23-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lato-v23-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v23-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v23-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v23-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v23-latin-100.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v23-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lato-v23-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v23-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v23-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v23-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v23-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/lato-v23-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lato-v23-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v23-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v23-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v23-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v23-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}



body {  
  font-family: 'Lato', sans-serif; 
  background-color: #f9f9f9;
}

.bg-home {  
  background-image: url("../../pics/bg.jpg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: 20%;
}

.wrapper {
	height: 100%;
	min-height: 100vh;
	height:auto !important;
	padding: 0;
	margin: 0;
	width: 100vw;
}

.nav {
	position: absolute;
	top: 50px;
	left: 50px;
}

.naviHL {
	font-size: 30px;
	font-weight: 400;
	font-style: normal;
	padding-left: 20px;
	line-height: 100%;
	padding-top: 4px;
}

.logo {
	font-size: 30px;
	font-weight: 900;
	font-style: normal;
	text-decoration: none;
	line-height: 100%;
}

.logo-parent {
	position: absolute;
	top: 50px;
	right: 50px;
	margin-top: 3px;
}

.logo-parent p {
	margin: 0px;
	font-size: 21px;
	font-weight: 400;
}

.logo-parent a {
	margin: 0; 
	padding: 0;
}

.logo:hover {
	text-decoration: none;
}

.content {
	width: 100%; 
    height: calc(100vh - 170px); 
    min-height: calc(100vh - 170px);
    position: absolute;
    top: 120px;
    scroll-snap-type: y mandatory;	
	-webkit-overflow-scrolling: touch;
	overflow-x: scroll;
	scroll-behavior: smooth;
}

.content a {
	text-align: center;
	font-size: 16px;
	text-decoration: none;
}

.content a:hover {
	text-decoration: underline;
}

.werksbezeichnung {
	position: absolute;
	background-color: #f9f9f9; 
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	bottom: 0px;
}

section {
	background-position: center top;
	background-size: contain; 
	background-repeat: no-repeat;
	scroll-snap-align: start;
	height: 100vh;
	margin-bottom: 500px;
	position: relative;
	padding-left: 50px;
	padding-right: 50px;
}

.lastsection {
		margin-bottom: 0px !important;
	}

.weiter {
		padding-top: 20vh; 
		width: 100%;  
		text-align: center; 
		font-size: 30px;
		line-height: 1.8;
	}

.weiter a {
		font-size: 30px;
		font-weight: 900;
	}

 /* Hide scrollbar for Chrome, Safari and Opera */
.content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.content {
  -ms-overflow-style: none;
}

.bild {
	width: 100%;
}

a {
	color: #251f18;
	text-decoration: underline;
	font-size: 12px;
}

a:hover, a:visited, a:active, a:focus {
	color: #251f18;
}

p {
	color: #251f18;
	font-size: 16px;
	line-height: 120%;
}

h1 {
	font-size: 24px;
	font-weight: 900;
	font-style: normal;
}

h2 {
	font-size: 24px;
	margin-bottom: 20px;
	padding-top: 20px;
}





.modal-content.custom {
	border-radius: 0px;
	width: 100%;
  	height: 100%;
  	background-color: #251f18 !important;
  	padding: 0px;
  	margin: 0px;
}

.close.custom {
	color: #f9f9f9;
	opacity: 1;
	font-size: 48px;
	box-shadow: 0px !important;
	position: absolute;
	top: 10px !important;
  	left: 20px !important;
}

.modal a {
	font-size: 3.5em;
	line-height: 160%;
	color: #f9f9f9;
	text-decoration: none;
	font-weight: 900 !important;
	padding-left: 30px;
}

.modal-size {
	margin: 0px;
	padding: 36px;
	width: 100vw; 
    height: 100vh; 
    min-height: 600px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.modal-backdrop {
    opacity:0 !important;
}

.modal-nav {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	padding-left: 10vw;
}

.navlink, .navaktiv{
	min-height: 35px;
}

.navlink:hover a {
	color: #251f18;
}

.navaktiv a {
	color: #251f18;
}

.aktiv1, .nav-stroke1:hover {
	background-image: url("../../pics/brush1.svg");
	background-size: contain;
	background-repeat: no-repeat;
	color: red;
}

.aktiv2, .nav-stroke2:hover{
	background-image: url("../../pics/brush2.svg");
	background-size: contain;
	background-repeat: no-repeat;
	color: red;
}

.aktiv3, .nav-stroke3:hover {
	background-image: url("../../pics/brush3.svg");
	background-size: contain;
	background-repeat: no-repeat;
	color: red;
}

.aktiv4, .nav-stroke4:hover {
	background-image: url("../../pics/brush4.svg");
	background-size: contain;
	background-repeat: no-repeat;
	color: red;
}

.nav-stroke5:hover {
	background-image: url("../../pics/brush5.svg");
	background-size: contain;
	background-repeat: no-repeat;
	color: red;
}

.metanav a {
	font-weight: 100 !important;
	font-size: 2em;
}

.sign {
	position: absolute;
	bottom: 50px;
	right: 50px;
}

.paravita {
	padding-bottom: 10px;
}

.stoerer  {
	position: absolute;   
  	left: 10%; 
  	bottom: 10%;
}

.stoerer h3 {
	font-size: 24px;
	line-height: 1.5;
	font-weight: 400;
	color: white;
	background-color: #251f18;
	margin: 5px;
}

.stoerer p,a {
	font-size: 24px;
	line-height: 1.5;
	margin: 5px;
}


@media screen and (min-device-width : 768px) 
and (max-device-width : 969px)  {
	.wrapper {
		width: 100% !important;
		height: calc(var(--vh, 1vh) * 100) !important;
		min-height: calc(var(--vh, 1vh) * 100) !important;
	}

	.bg-home {  
  		background-image: url("../../pics/bg-tablet.jpg") !important;
  	}

  	.content {
		width: 100vw; 
	    height: calc((var(--vh, 1vh) * 100) - 175px) !important; 
	    min-height: 30vh;
	    position: absolute;
	    top: 125px;
	}

	.modal-size {
		height: calc(var(--vh, 1vh) * 100) !important;
		padding: 36px !important;
	    min-height: 400px !important;
	}

	section {
		height: 100% !important;
		width: calc(100vw-40px) !important;
		background-position: center 25%;
		margin-left: auto;
	    margin-right: auto;

	}

}

@media screen and (max-width: 767px) {
  	.wrapper {
		width: 100% !important;
		height: calc(var(--vh, 1vh) * 100) !important;
		min-height: calc(var(--vh, 1vh) * 100) !important;
	}

	.nav {
		position: static !important;
		top: 0px !important;
		right: 0px !important;
	}

	.naviHL {
		font-size: 22px !important;
	}

	.logo {
		font-size: 21px !important;
	}

	.logo-parent {
		position: static !important;
		top: 0px !important;
		right: 0px !important;
		padding-left: 10px;
		margin-top: 3px !important;
		padding-top: 5px !important;
	}

	.logo-parent p {
		font-size: 14px !important;
		line-height: 140% !important;
	}

	.bg-home {  
  		background-image: url("../../pics/bg-sp.jpg") !important;
  		height: calc(var(--vh, 1vh) * 100) !important;
	}

	.close.custom {
		font-size: 40px !important;
		top: 5px !important;
  		left: 15px !important;
	}

	.modal a {
		font-size: 24px !important;
		padding-left: 0px !important;
		line-height: 100% !important;
	}

	.modal-size {
		height: calc(var(--vh, 1vh) * 100) !important;
		padding: 10px !important;
	    min-height: 400px !important;
	}

	.modal-nav {
		display: flex !important;
		flex-direction: column;
		justify-content: space-evenly;
		height: 80vh;
	}

	.sign {
		position: absolute;
		bottom: 20px !important;
		right: 20px !important;
	}

	.mobile-nav {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
	}
  	
	.content {
	    height: calc((var(--vh, 1vh) * 100) - 95px) !important; 
	    min-height: 10% !important;
	    top: 75px !important;
	    padding-left: 20px;
	    padding-right: 20px;
	    margin-top: 20px;	
	    padding-bottom: 20px;
	}

	.lastsection {
		margin-bottom: 20px !important;
	}

	.weiter {
		font-size: 21px !important;
		text-align: left !important; 
		padding-left: 10px;
	}

	.weiter a {
		font-size: 21px !important;
	}

	section {
		width: calc(100vw-40px) !important;
		background-position: center 25%;
		margin-left: auto;
	    margin-right: auto;
	}

	.werksbezeichnung {
		bottom: 0px;
		left: 0px !important;
		max-width: 50vw !important;
	}

	.stoerer  {
		position: absolute;   
	  	left: 25px; 
	  	bottom: 5%;
	}

	.stoerer h3 {
		font-size: 18px;
	}

	.stoerer p,a {
		font-size: 18px;
	}

	.metanav {
		padding-left: 0px !important;
	}

	.metanav a {
		font-size: 18px !important;

}