<!--

body {background-color: #FFFFFF; font-family:Arial, Helvetica, sans-serif; text-align:center; }

#top		{text-align: center; background-image: url(/grafik/logooben-com18.png);  background-repeat: no-repeat; background-position: center;}
#menu		{display: flex; align-items: center; justify-content: center; word-spacing:3em; }
#submenu	{text-align:center; background-image:url(/grafik/logounten-com18.png); background- srepeat:no-repeat; background-position:center; word-spacing:20px;}

/*-----------------Schrift-----------------*/

@font-face { font-family: 'Eras Light ITC'; font-style: normal; font-weight: normal; src: local('Eras Light ITC'), url('ERASLGHT.woff') format('woff');}
@font-face {font-family: 'joeHand2Regular'; src: url('/styles/joehand2-webfont.eot'); src: url('/styles/joehand2-webfont.eot?#iefix') format('embedded-opentype'), url('/styles/joehand2-webfont.woff') format('woff'), url('/styles/joehand2-webfont.ttf') format('truetype'), url('/styles/joehand2-webfont.svg#joeHand2Regular') format('svg'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'CALIST';  src: url(/styles/CALIST.ttf ); font-weight:normal format('truetype');}

h1 {font-family: 'Dosis'; font-size: 27px; color: #000000; font-weight:normal}
h2 {font-family: 'Dosis'; font-size: 18px; color: #000000; font-weight:normal}
h3 {font-family: 'Dosis'; font-size: 22px; color: #000000; font-weight:normal}
h4 {font-family: 'Dosis'; font-size: 23px; color: #fff; font-weight:normal;}

p, ul, li  	{font-family: 'Dosis', sans-serif; font-size: 1.2em; color: #000000; font-weight:light; }
.Stil6 		{font-family: 'Dosis', sans-serif; font-size: 0.9em; color: #757b7f; font-weight: normal;}

/*-----------------Links-----------------*/

a {text-decoration: none; outline: none;}
a:link, a:visited, a:hover, a:active {font-family: 'Dosis'; font-style: normal; font-size:19px; color: #000000; font-weight:normal; text-decoration: none; letter-spacing:0.2em;  }
a:hover {color: #bbbbbb; }
a:active {color: #bbbbbb;}

a.topmenu:link, a.topmenu:visited, a.topmenu:hover, a.topmenu:active {font-family: 'Dosis'; font-style: normal; font-size:20px; color: #000000; font-weight:normal; text-decoration: none; letter-spacing:0.0em;  }
a.topmenu:hover {color: #bbbbbb; }
a.topmenu:active {color: #bbbbbb;}

a.endmenu:link, a.endmenu:visited, a.endmenu:hover, a.endmenu:active {font: 'Dosis', sans-serif; font-size:0.9em; color: #757b7f; font-weight:normal; text-decoration: none;}
a.endmenu:hover {color: #bbbbbb;}
a.endmenu:active {color: #bbbbbb;}

a.hochzeit-caption, a.hochzeit-caption:visited, a.hochzeit-caption:hover, a.hochzeit-caption:active {font-family: 'Dosis'; font-size: 23px; color: #fff; font-weight:normal; opacity: 0.7; letter-spacing:0em;}

/*-----------------Bilder-----------------*/
.thumb-container {max-width:1200px; width:100%; }
.hochzeit-thumb {display: inline-block; text-align: center;}
.hochzeit-caption {position: relative; bottom:0px; text-align:center;}
.minthu    {height: 13.6em; width:20.4em; padding:0px 0px 0px;   margin:0px 3px -78px;  }

.container {background: white;	max-width: 1200px;	margin: auto;}
.header {width: 100%; float: left; background: white; }
.logo {float: left;}
.navi {float: right; margin-right: 1em;}
.navi ul {list-style: none;	padding: 0;}
.navi li {float: left; }
.navi a {display: block; background: white;	padding: 1em;}
.contentbox {width: 100%; float:left; margin-top:20px;}
#textleft {width: 66%; clear:both; margin:auto; text-align:left;}
#textcenter {width: 66%; clear:both; margin:auto; }
#footer {width: 100%; clear:both;}
.footimp {width: 10%; float:right}
.naviend {float: left; }
.sidebar {width: 34%; float: right;}
.fbin {font-family: 'Dosis', sans-serif; font-size: 2em; color: #000000; font-weight:light; }


.minthuold { height: 12em; width:18em;   padding:10px 10px 35px; margin:10px; -webkit-box-shadow: 2px 3px 7px 3px rgba(204,204,204,0.6); -moz-box-shadow: 2px 3px 7px 3px rgba(204,204,204,0.6); box-shadow: 2px 3px 7px 3px rgba(204,204,204,0.6);}
/*-----------------MenuMobile-----------------*/

a {transition: color 0.3s ease;}
#menuToggle {display: block; position: relative; top: 40px; left: 20px; z-index: 1; -webkit-user-select: none; user-select: none;}
#menuToggle input {display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */  z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none;}

/*-------------Hamburger---------------*/
#menuToggle span {display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #444444; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
#menuToggle span:first-child {transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2) {transform-origin: 0% 100%;}
/* Transform into a crossmark. */
#menuToggle input:checked ~ span {opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #444444;}
/* hide middle */
#menuToggle input:checked ~ span:nth-last-child(3) {opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
/* last other direction */
#menuToggle input:checked ~ span:nth-last-child(2) {transform: rotate(-45deg) translate(0, -1px);}


/*---------Absolute Position at the top left of the screen----------------*/
#menum {position: absolute; width: 100%; margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px; background: #fafafa; list-style-type: none; -webkit-font-smoothing: antialiased; /* stop flickering text in safari */ transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); -webkit-box-shadow: 3px 4px 8px 4px rgba(204,204,204,0.6); -moz-box-shadow: 3px 4px 8px 4px rgba(204,204,204,0.6); box-shadow: 3px 4px 8px 4px rgba(204,204,204,0.6);}
#menum li {padding: 10px 0; font-size: 22px;}

/*-------Slide in from left-----------*/
#menuToggle input:checked ~ ul{  transform: none;}


/*-----------------Responsive-----------------*/

@media print {  
  .logo {float:right;}
  .navi, .sidebar {display:none;}
  .content {width:100%;}}

/*-----------------Größer als 990 mit Menu in Worten-----------------*/

@media screen and (min-width:990px) {
	.container {margin-top: 44px;}	
	ul {list-style: none;}
	li {display: inline-block; float:inherit;}
	#menuToggle {display:none;}
	.header {margin-bottom:10px;}
    .header2 {display:none;}
	.header1 {width: 100%; float: left;	background: white;}
	}

/*-----------------Kleiner als 989 mit Menu zum klappen-----------------*/

@media screen and (max-width:989px) {
	.container {margin-top: 15px;}	
	.contentbox {margin-top: 15px;}	
	.thumb-container { margin-top:-40px;}
    .navi { display:none;}
    .naviend { display:none;}
	.header { float:none; display: flex; align-items: right; justify-content: center; margin-bottom:4em;}	
    .header1 { display:none;}	
	.header2 {	width: 100%; background: white; float:none; display: flex; align-items: right; justify-content: center; margin-bottom:5em;}	
	}

/*-----------------Kleiner als 814-----------------*/

@media screen and (max-device-width:814px) and (orientation:portrait) {
	.body {width:100%; padding:1px; margin:1px; }
	.contentbox {margin-top: -25px;}		
	.container {width:100%; padding:1px; margin:1px; margin-top: -25px;}
	#textleft {width: 80%; clear:both; margin:auto; text-align:left;}
	#textcenter {width: 80%; clear:both; margin:auto; }	
	.minthu { height: 12em; width:18em;}
	}

@media screen and (max-width:814px) and (orientation : landscape) {
	.container {margin-top: -25px;}	
	.contentbox {margin-top: -25px;}
	.minthu { height: 9em; width:13.5em;}
	}

/*-----------------Kleiner als 736-----------------*/

@media screen and (max-device-width:736px) {
	.body {width:100%; padding:0px; margin:0px; }
	.container {width:100%; padding:0px; margin:0px;}
	.content, .sidebar {width:100%;}
	#textleft {width: 90%; clear:both; margin:auto; font-size:0.6em;}	
	#textcenter {width: 90%; clear:both; margin:auto; font-size:0.6em;}		
	p {font-size:2em;}
	.stil6 {font-size:1.5em;}
	a.endmenu:link, a.endmenu:visited, a.endmenu:hover, a.endmenu:active {font-size:1.5em; }
	#footer {width:95%; margin-left:1.4em;}
	.badge {width:20%;}
	a:link {font-size:1.0em;}
	.minthu { height: 22em; width:33em; }
	}

/*-----------------Kleiner als 662-----------------*/
	
@media screen and (max-width:450px) {
	.logo { position:relative; margin-left:50px; width:200px; }		
	.minthu { height: 60%; width:90%;}
	}
	
/*-----------------768-1024 Landscape-----------------*/
	
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {.minthu { height: 16em; width:24em;}}	
	
-->