/* noto-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-serif-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/noto-serif-v23-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-serif-v23-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/noto-serif-v23-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
	font-family: 'Noto Serif';
}

header {
	height: 700px;
}

div.overlayer {
	width: 100%;
	height: 900px;
	background-color: rgba(0,0,0,0);
	z-index: 89034;
	position: absolute;
}

div.menu {
	position: relative;
	float: right;
	top: 0px;
}

div.mobilemenu {
	position: relative;
	display: none;
	float: right;
	top: 32px;
}

div.smallmenu {
	  z-index: -9889;
	overflow: hidden;
	position: fixed;
	margin-top: -450px;
	width: 100%;
	top: 101px;
	height: 305px;
  	background-color: rgb(255,255,255);
  	text-decoration: none !important;

  	-webkit-transition: all 700ms cubic-bezier(0.695, 0.005, 0.415, 0.765); 
   -moz-transition: all 700ms cubic-bezier(0.695, 0.005, 0.415, 0.765); 
     -o-transition: all 700ms cubic-bezier(0.695, 0.005, 0.415, 0.765); 
        transition: all 700ms cubic-bezier(0.695, 0.005, 0.415, 0.765);
}

.active {
	margin-top: 0px !important;

	-webkit-transition: all 700ms cubic-bezier(0.695, 0.005, 0.415, 0.765); 
   -moz-transition: all 700ms cubic-bezier(0.695, 0.005, 0.415, 0.765); 
     -o-transition: all 700ms cubic-bezier(0.695, 0.005, 0.415, 0.765); 
        transition: all 700ms cubic-bezier(0.695, 0.005, 0.415, 0.765);
}

div.smallmenu a, div.smallmenu p {

  	text-decoration: none !important;
}

select {
	font-family: 'Noto Serif' !important;
	background-color: white;
	color: black;
	text-decoration: none;
	height: 40px;
}

div.teaser {
	width: 100%;
	height: 100vh;

	background: url(../img/bss-img-start.jpg) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	background-size: cover;
}

div.teaser img {
	top: 35%;
	position: relative;
	width: 30%;
	left: 35%;
}

div.nav {
	z-index: 9969860;
	background-color: white;
	height: 100px;
	width:100%;
}

.fix {
	position: fixed;
 	top: 0;
	border-bottom: 1px solid black;
}

.high {
	margin-top: 100px;
}

div.navcontainer {
	z-index: 987;
	margin: 0 auto;
	width: 90%;
  	padding: 0 5% 0 5%;
  	background-color: white;
}

div.breakimg {
	width: 100%;
	height: 450px;
	clear: both;

	border-bottom: 2px solid black;
	border-top: 2px solid black;
}

div.wrapper {
	width: 100%;
	margin: 1px 0 1px 0;
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	float: left;
}

div.wrapperbox {
	position: relative;
	padding: 70px 0;
	margin: 0 auto;
	width: 60%;
	line-height: 1.6em;
	clear: both; 
}

div.text {
	text-align: left;
}

div.textcenter {
	text-align: center;
}

div.lefttext {
	position: relative;
	sheight: auto;
	width: 45%;
	float: left;
	padding-right: 5%;
}

div.righttext {
	sheight: auto;
	position: relative;
	width: 45%;
	float: left;
	padding-left: 5%;
}

div.insta {
	height: 48vw;
}

div.righttext object, div.lefttext object {
	height: 12px;
}

footer {
	width: 100%;
	bottom: 0;
}

div.footer {
	position: relative;
	text-align: center;
	background-color: rgb(20,20,20);
	bottom: 0;
	height: 60px;
	width: 100%;
	clear: both; 
}

b.bu {
	padding-left: 16px;
}

b.fat {
	font-weight: 600;
	color: black;
}

b.kursiv {
	font-style: italic;
	font-weight: 100;
}


/* PICTUREs */

.philosophie {
	background: url(../img/bss-img-philosophie.jpg) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	background-size: cover;
}

.leistungen {
	background: url(../img/bss-img-leistungen.jpg) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	background-size: cover;
}

.bestattungsarten {
	background: url(../img/bss-img-bestattungsarten.jpg) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	background-size: cover;
}

.impressionen {
	background: url(../img/bss-img-impressionen.jpg) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	background-size: cover;
}

.kontakt {
	background: url(../img/bss-img-kontakt.jpg) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	background-size: cover;
}

/* IMGs */
#mobile {
	  top: 8px;
  position: relative;
  width: 70px;
  float: right;
  height: auto;
  display: none;
}

div.nav img {
	height: 60px;
	padding-top: 20px;
}

div.nav object {
	height: 60px;
	padding-top: 20px;
}

/* INPUTs */
input {
	width: 92%;
	border: none;
	padding: 4%;
	background-color: #e2ebd9;
	margin-bottom: 10px;
}

textarea {
	height: 200px;
	width: 92%;
	border: none;
	padding: 4%;
	background-color: #e2ebd9;
	margin-bottom: 10px;
}

button {
	width: 50%;
	border: none;
	padding: 10px;
	background-color: #3d7803;
	margin-bottom: 10px;
	color: white;
	float: right;
}

/* iFRAME */

iframe.mobile {
	display: none;
}

/* FONTs */
#big {
	font-size: 16pt;
	margin: -14px 0 0 0 !important;
	padding: 0 !important;
}

a {
	text-decoration: none !important;
	color: black;
	
}


div.text p, div.lefttext p, div.righttext p  {
	font-size: 14pt;
}


.depth {
	padding-bottom: 100px ;
}

div.footer p, div.footer a{
	color: white; 
	padding: 20px;
}

div.navcontainer p {
	position: relative;
	top: 20px;
	color: black;
	padding: 5px 10px;
	float: right;
}

div.smallmenu p {
	position: relative;
	color: black;
	padding: 5px 20px 20px 20px;
	border-bottom: 1px solid rgb(220,220,220);
}

div.nav p:hover {
	color: #3d7803;
}

.border {
	border-right: 1px solid black;
}

b {
	color: #3d7803;
}

div.head h1 {
	margin: 0;
	text-align: center;
	width: 100%;
	font-size: 26px;
	color: #3d7803;
	padding-bottom: 35px;
}

h4 {
	font-weight: 100;
	font-style: italic;
	font-size: 26px;
	color: #3d7803;
	line-height: 1.5em;
}


/* ---------- MediaQueries ---------- */


@media only screen and (max-height: 700px) {

	div.insta {
	height: 68vh;
	}


}


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

	div.navcontainer {
		width: 90%;
	}


	div.teaser img {
		width: 50%;
		left: 25%;
	}

	div.wrapperbox {
		width: 80%;
		overflow: hidden;
	}
	
	div.insta {
	height: 64vw;
	}

}

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

	iframe.desktop {
		display: none !important;
	}

	iframe.mobile {
		display: block !important;
	}

	div.menu {
		display: none;
	}

	#mobile {
		display: block !important;
	}

	div.insta {
	height: 125vw;
	}


}

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

	.contact {
		text-align: center !important;
	}

	#mobile {
		top: 10px !important;
  		right: 20px !important;
  		width: 60px !important;
	}


	div.navcontainer {
		margin: 0 auto;
		width:90% ;
	}

	div.wrapperbox {
		width: 90%;
		overflow: hidden;
	}

	div.lefttext {
		float: none;
		width: 100%;
		padding-right: 0px !important;
	}

	div.righttext {
		float: none;
		width: 100%;
		padding-left: 0px !important;
	}

	/*.depth {
		padding-bottom: 40px;
	}*/

	div.teaser img {
		width: 80%;
		left: 10%;
	}


	div.insta {
	height: 140vw;
	}


}


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

	div.navcontainer {
		width: 98%;
	}

	div.insta {
	height: 140vw;
	}


}


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


	div.insta {
	height: 137vw;
	}


}