@charset "utf-8";
/* CSS Document */
/*extra small*/
@media only screen and (max-width: 600px){
		
	/*********************Cookie************************************/
#mbmcookie {   position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               background-color: #789893;
               padding: 2% 1% 1% 1%;
               font-size: 6.5vw;
               font-family: "open sans", arial, sans-serif;}

    #mbmcookie a.button {cursor: pointer;
                         background: #000;
                         color: #fff;
                         padding: 1% 2% 1% 2%;
                         margin-left: 6%;
                         border-radius: 0.5em;
                         font-family: New Century Schoolbook, TeX Gyre Schola, serif;
                         font-weight: lighter;
                         float: right;}

    #mbmcookie a.button:hover {background-color: #bababa;
    									 color: #fff}

    #mbmcookie p.cookiemessage {display: block;
                               padding: 0;
                               margin: 0;
                               font-size: 5.5vw;
                               font-family: "open sans", arial, sans-serif;
                               color: #fff;}
    #mbmcookie a{
    	color: black;
    	text-decoration: none;
    	
    }
    
    #mbmcookie a:hover{
    				color: #bababa;
    }

/*******************Cookie Ende*********************************/
#overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	margin:0;
	background-color: rgba(0,0,0,0.8);
	z-index: 2;
	cursor: pointer;
}

button.transition {
		background-image: url(images/weihnachts.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		background-color: #fff;
		color: #2a312f;
		opacity: 0.5;
		border: none;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 5% 0%;
		font-size: 3.3vw;

}

button.transition:hover {
	cursor: pointer;
	opacity: 1;
	transition: 2s ease-in-out;
	text-shadow: 0em 0.6em 1em #f4e17c;

}
/******************************ModalBox*************************/

#myModal {
	background-image: url(images/modalBoxKlein.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: none;
	position: fixed;
	z-index: 2; 
  	top: 0;
  	width: 100%; 
  	height: 80%; 
  	overflow: auto;
  	margin: 10% 0%;
}

#myModal.modal{
	color: #fff;

}

.modal-content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-45%, -69%);
	text-align: center;
	width: 63%;
	height: auto;
}

.modal-content h1{
	font-size: 3vw;
	line-height: 2em;
}

.modal-content p{
	text-align: left;
	font-size: 2.6vw;

}

.modal-content a{
	color: #789893;

}

.modal-content .close{
	color: #000;
	float: none;
	width: 100%;
	height: 10%;
	font-size: 25vw;
	margin: 0;
	padding: 0;
	
}

.modal-content .close:hover{
	cursor: pointer;
	font-size: 25vw;
	color: #789893;
}

/******************************ModalBox ENDE********************/

@font-face {
  font-family: fahne2;
  font-style: normal;
  src: url("font/HappyDaySchool.ttf");
}

@font-face {
  font-family: fahne;
  font-style: normal;
  src: url("font/HappyDaySchoolOpposed.ttf");
}


@font-face {
  font-family: Herz;
  font-style: normal;
  src: url("font/HeartExplosion.otf");
}


@font-face {
  font-family: osternKunst;
  font-style: normal;
  src: url("font/Easter art.ttf");
}

@font-face {
  font-family: osternEi;
  font-style: normal;
  src: url("font/EasterEgg.ttf");
}


a{
			font-weight: bold;
			text-decoration: none;
			color: #000;
		}

a:hover{
			color: #bababa;
}

	h1{
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-size: 8vw;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 0;
	padding-top: 2em;
	font-weight: lighter;
}

h1#ostern.center{
		font-family: osternEi;
}

h2 {
	font-family: "open sans", arial, sans-serif;
	font-size: 3.3vw;	
	margin: 0;
	color: #bababa;
	text-align: center;
	font-weight: lighter;
	letter-spacing: 0.05em;
	padding-bottom: 5%;

}

p {
	font-family: "open sans", arial, sans-serif;	
	margin: 0;
}

hr {
   width: 20%;
   margin-top: 0.4em;
   color: #bababa;
}

img.icon {
			max-width: 6%;
			height: auto;
}


/*body*/
body {
       background-color: #FFF;
       width: 100%;
       height: 100%;
       margin: 0;
       }
/*div id head*/
#head {
		background-color: #ffffff;
		width: 100%;
		height: 17%;
       
       }
       
/*div id navi*/
#navi {
		background-color: #789893;
		width: 100%;
		height: 12%;
		position: sticky;
		top: 0;
		z-index: 1;
      } 
         
#navi ul{
		list-style-type: none;
		font-family: "open sans", arial, sans-serif;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 25%;
		padding: 0;
		overflow: hidden;
		background-color: #789893;
		font-size: 5vw;
		font-weight: lighter;
		line-height: 2.2em;
		
}

#navi li{
			float: left;
			padding-top: 1em;
			padding-bottom: 1em;
			padding-left: 0.5em;
			padding-right: 0.5em;
			background-color: #789893;
			color: #ffffff;
			overflow: hidden;
			display: block;
			margin-right: 0.2em;
			
}

#navi li:hover{
		background-color: 000000;
}

#navi li.dropdown:hover{
		background-color: black;
}

li a, .dopbtn {
	display: inline-block;
	color: white;
	text-decoration: none;
}

li a:hover, .dropdown:hover .dopbtn{
		background-color: #000;
}



li.dropdown {
	display: inline-block;
}

.dropdown-content {
						display: none;
						position: absolute;
						background-color:#000;
						z-index: 1;	
						margin-left: -0.5em;
}

.dropdown-content a {
	color: #bababa;
	text-decoration: none;
	display: block;
	text-align: left;
	padding: 0.5em;
	border-bottom-color: #bababa;
	border-bottom-style: inset;
	border-bottom-width: thin;
	font-size: 3.6vw;
}

.dropdown-content a:hover {
	background-color: #000;
	color: white;
}

.dropdown:hover .dropdown-content {
	display: block;	
}

/*div id landscapeImg*/
#landscapeImg {
					background-color: #000;
					width: 100%;
					height: 21%;
       }
       
#landscapeImg img{
						max-width: 100%;
						height: auto;
						margin-top: 0;
						margin-bottom: 0;
						margin-left: 0%
}

/*div id content*/
#content {
			background-color: #C0C0C0;
			width: 96%;
			height: 40%;
			margin-left: 2%;
			margin-right: 2%;
       
       }
       
#content .sidebanner{
		float: left;
		width: 33%;
		background-color: white;
		
}

#content h2.sidebanner {
   font-family: New Century Schoolbook, TeX Gyre Schola, serif;
   text-align: left;
   width: 100%;
   margin-top: 23%;
   font-size: 7.8vw;
   border-bottom: 0.22em solid #789893;
   padding-bottom: 0.1em;
   color: #000;
}

/*#content .sidebanner p{
          width: 95%;
          padding-top: 25%;
          padding-bottom: 25%;
          font-size: 1.9vw;
          padding-left: 5%;
          /*background-image: linear-gradient(to top, #bababa, #cbcbcb, #dcdcdc, #ededed, #ffffff);*/
          /*background-image: linear-gradient(to bottom, #ffffff, #f2f2f2, #e5e5e5, #d8d8d8, #cbcbcb, #cbcbcb, #cbcbcb, #cbcbcb, #d8d8d8, #e5e5e5, #f2f2f2, #ffffff);*/
          /*background-image: linear-gradient(to bottom, #ffffff, #e8eaee, #ced5dd, #b2c2ca, #97b0b5, #97b0b5, #97b0b5, #97b0b5, #b2c2ca, #ced5dd, #e8eaee, #ffffff);*/
          
/*          
}*/

.infobox {
			width: 16%;
			float: right;
			margin-top: 5%;
			position: absolute;
			margin-left: 42.7%;
			display: none;
			
}

#content p.infobox {
			float: right;
			padding-left: 14%;
			padding-right: 14%;
			margin-top: 10%;
			width: 53%;
			padding-top: 14%;
			padding-bottom: 14%;
			/*background-image: linear-gradient(to bottom, #ffffff, #e8eaee, #ced5dd, #b2c2ca, #97b0b5, #97b0b5, #97b0b5, #97b0b5, #b2c2ca, #ced5dd, #e8eaee, #ffffff);*/
			background-image: linear-gradient(to right, white 0%, #789893 30%, #789893 50%,#789893 70%, white 100%);
			border-bottom: inset #bababa thin;
			border-top: inset #bababa thin;
			color: white;
}


#content p.kurzinfo{
			margin-top: 5%;
			margin-bottom: 2%;
			text-align: left;
}

#content p.kurzinfo a{
			font-weight: bold;
			text-decoration: none;
			color: #000;
		}

#content p.kurzinfo a:hover{
			color: #bababa;
}


#content .center{
		width: 100%;
		float: left;
		margin-bottom: 3%;
}

.center p{
		font-size: 3.2vw;
}

.center h2{
			color: #000;
			text-align: left;
			font-size: 4.1vw;
			margin: 0;
			padding: 0;
}


#content .center article{
		   font-family: arial, sans-serif;
		   font-size: 3.5vw;
		   width: 100%;
		   /*padding-left: 6%;*/
		   line-height: 1em;
		   text-align: center;
		   margin-top: 5%;
		   /*margin-bottom: 10%;*/
		   font-weight: lighter;
		   letter-spacing: 0.05em;
		   color: #bababa;
}

h1.center{
	/*font-family: arial, sans-serif;*/
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-weight: lighter;
	text-align: left;
	/*font-style: italic;*/
	font-size: 4.8vw;
	margin-top: 0;
	margin-bottom: 1.5%;

}

#content p.center {
			width: 80%;
			font-family: arial, sans-serif;
			font-size: 1.2vw;
			line-height: 1.5em;

}

table {
		width: 100%;
		font-size: 3.2vw;
		font-family: "open sans", arial, sans-serif;
}

th {
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-size: 5.5vw;
	padding-bottom: 0.7em;
	padding-top: 1.4em;
	margin: 0;
}

tr {
}

td{
	border-bottom: #bababa dotted;
	width: 85%;
}

td.preis{
			border-bottom: none;
			vertical-align: bottom;
}

       
/*div id footer*/
#footer {
			background-color: #000000;
			width: 100%;
			height: 10%;
			clear: both;
			font-family: arial, sans-serif;
			font-weight: lighter;
			font-size: 2vw;
			text-align: center;
			padding-top: 1%;
			padding-bottom: 1%;
			border-top: #789893 thick;
         }

#footer p{
		 color: #bababa;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
		
	/*********************Cookie************************************/
#mbmcookie {   position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               background-color: #789893;
               padding: 2% 1% 1% 1%;
               font-size: 2.5vw;
               font-family: "open sans", arial, sans-serif;}

    #mbmcookie a.button {cursor: pointer;
                         background: #000;
                         color: #fff;
                         padding: 1% 2% 1% 2%;
                         margin-left: 6%;
                         border-radius: 0.5em;
                         font-family: New Century Schoolbook, TeX Gyre Schola, serif;
                         font-weight: lighter;
                         float: right;}

    #mbmcookie a.button:hover {background-color: #bababa;
    									 color: #fff}

    #mbmcookie p.cookiemessage {display: block;
                               padding: 0;
                               margin: 0;
                               font-size: 2.5vw;
                               font-family: "open sans", arial, sans-serif;
                               color: #fff;}
    #mbmcookie a{
    	color: black;
    	text-decoration: none;
    	
    }
    
    #mbmcookie a:hover{
    				color: #bababa;
    }

/*******************Cookie Ende*********************************/
#overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	margin:0;
	background-color: rgba(0,0,0,0.8);
	z-index: 2;
	cursor: pointer;
}

button.transition {
		background-image: url(images/weihnachts.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		background-color: #fff;
		color: #2a312f;
		opacity: 0.5;
		border: none;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 5% 0%;
		font-size: 2.3vw;

}

button.transition:hover {
	cursor: pointer;
	opacity: 1;
	transition: 2s ease-in-out;
	text-shadow: 0em 0.6em 1em #f4e17c;

}
/******************************ModalBox*************************/

#myModal {
	background-image: url(images/modalBoxKlein.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: none;
	position: fixed;
	z-index: 2; 
  	top: 0;
  	width: 150%; 
  	height: 100%; 
  	overflow: auto;
  	margin: 0% -25%;
}

#myModal.modal{
	color: #fff;

}

.modal-content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-46%, -67%);
	text-align: center;
	width: 49%;
	height: auto;
}

.modal-content h1{
	line-height: 0.9em;
	padding-bottom: 3%;

}

.modal-content p{
	text-align: left;
	font-size: 2.8vw;

}

.modal-content a{
	color: #789893;

}

.modal-content .close{
	color: #000;
	width: 10%;
	height: auto;
	font-size: 19vw;
	margin-right: -8%;
	margin-top: 0%;
	
}

.modal-content .close:hover{
	cursor: pointer;
	font-size: 19vw;
	color: #789893;
}

/******************************ModalBox ENDE********************/

@font-face {
  font-family: fahne2;
  font-style: normal;
  src: url("font/HappyDaySchool.ttf");
}

@font-face {
  font-family: fahne;
  font-style: normal;
  src: url("font/HappyDaySchoolOpposed.ttf");
}


@font-face {
  font-family: Herz;
  font-style: normal;
  src: url("font/HeartExplosion.otf");
}

@font-face {
  font-family: osternKunst;
  font-style: normal;
  src: url("font/Easter art.ttf");
}

@font-face {
  font-family: osternEi;
  font-style: normal;
  src: url("font/EasterEgg.ttf");
}


a{
			font-weight: bold;
			text-decoration: none;
			color: #000;
		}

a:hover{
			color: #bababa;
}

	h1{
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-size: 5vw;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 0;
	padding-top: 2em;
	font-weight: lighter;
}

h1#ostern.center{
		font-family: osternEi;
}

h2 {
	font-family: "open sans", arial, sans-serif;
	font-size: 2.3vw;	
	margin: 0;
	color: #bababa;
	text-align: center;
	font-weight: lighter;
	letter-spacing: 0.05em;
	padding-bottom: 5%;

}

p {
	font-family: "open sans", arial, sans-serif;	
	margin: 0;
}

hr {
   width: 13%;
   margin-top: 0.4em;
   color: #bababa;
}

img.icon {
			max-width: 5.3%;
			height: auto;
}


/*body*/
body {
       background-color: #FFF;
       width: 100%;
       height: 100%;
       margin: 0;
       }
/*div id head*/
#head {
		background-color: #ffffff;
		width: 100%;
		height: 17%;
       
       }
       
/*div id navi*/
#navi {
		background-color: #789893;
		width: 100%;
		height: 12%;
		position: sticky;
		top: 0;
		z-index: 1;
      } 
         
#navi ul{
		list-style-type: none;
		font-family: "open sans", arial, sans-serif;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 36%;
		padding: 0;
		overflow: hidden;
		background-color: #789893;
		font-size: 2.5vw;
		font-weight: lighter;
		line-height: 1.2em;
		
}

#navi li{
			float: left;
			padding-top: 1em;
			padding-bottom: 1em;
			padding-left: 0.5em;
			padding-right: 0.5em;
			background-color: #789893;
			color: #ffffff;
			overflow: hidden;
			display: block;
			margin-right: 0.2em;
			
}

#navi li:hover{
		background-color: 000000;
}

#navi li.dropdown:hover{
		background-color: black;
}

li a, .dopbtn {
	display: inline-block;
	color: white;
	text-decoration: none;
}

li a:hover, .dropdown:hover .dopbtn{
		background-color: #000;
}



li.dropdown {
	display: inline-block;
}

.dropdown-content {
						display: none;
						position: absolute;
						background-color:#000;
						z-index: 1;	
						margin-left: -0.5em;
}

.dropdown-content a {
	color: #bababa;
	text-decoration: none;
	display: block;
	text-align: left;
	padding: 0.5em;
	border-bottom-color: #bababa;
	border-bottom-style: inset;
	border-bottom-width: thin;
	font-size: 2.2vw;
}

.dropdown-content a:hover {
	background-color: #000;
	color: white;
}

.dropdown:hover .dropdown-content {
	display: block;	
}

/*div id landscapeImg*/
#landscapeImg {
					background-color: #000;
					width: 100%;
					height: 21%;
       }
       
#landscapeImg img{
						max-width: 78%;
						height: auto;
						margin-top: 0;
						margin-bottom: 0;
						margin-left: 12%
}

/*div id content*/
#content {
			background-color: #C0C0C0;
			width: 80%;
			height: 40%;
			margin-left: 10%;
			margin-right: 10%;
       
       }
       
#content .sidebanner{
		float: left;
		width: 30%;
		background-color: white;
		
}

#content h2.sidebanner {
   font-family: New Century Schoolbook, TeX Gyre Schola, serif;
   text-align: left;
   width: 100%;
   margin-top: 23%;
   font-size: 3.8vw;
   border-bottom: 0.22em solid #789893;
   padding-bottom: 0.1em;
   color: #000;
}

/*#content .sidebanner p{
          width: 95%;
          padding-top: 25%;
          padding-bottom: 25%;
          font-size: 1.9vw;
          padding-left: 5%;
          /*background-image: linear-gradient(to top, #bababa, #cbcbcb, #dcdcdc, #ededed, #ffffff);*/
          /*background-image: linear-gradient(to bottom, #ffffff, #f2f2f2, #e5e5e5, #d8d8d8, #cbcbcb, #cbcbcb, #cbcbcb, #cbcbcb, #d8d8d8, #e5e5e5, #f2f2f2, #ffffff);*/
          /*background-image: linear-gradient(to bottom, #ffffff, #e8eaee, #ced5dd, #b2c2ca, #97b0b5, #97b0b5, #97b0b5, #97b0b5, #b2c2ca, #ced5dd, #e8eaee, #ffffff);*/
          
/*          
}*/

.infobox {
			width: 16%;
			float: right;
			margin-top: 5%;
			position: absolute;
			margin-left: 42.7%;
			display: none;
			
}

#content p.infobox {
			float: right;
			padding-left: 14%;
			padding-right: 14%;
			margin-top: 10%;
			width: 53%;
			padding-top: 14%;
			padding-bottom: 14%;
			/*background-image: linear-gradient(to bottom, #ffffff, #e8eaee, #ced5dd, #b2c2ca, #97b0b5, #97b0b5, #97b0b5, #97b0b5, #b2c2ca, #ced5dd, #e8eaee, #ffffff);*/
			background-image: linear-gradient(to right, white 0%, #789893 30%, #789893 50%,#789893 70%, white 100%);
			border-bottom: inset #bababa thin;
			border-top: inset #bababa thin;
			color: white;
}


#content p.kurzinfo{
			margin-top: 5%;
			margin-bottom: 2%;
			text-align: left;
}

#content p.kurzinfo a{
			font-weight: bold;
			text-decoration: none;
			color: #000;
		}

#content p.kurzinfo a:hover{
			color: #bababa;
}


#content .center{
		width: 100%;
		float: left;
		margin-bottom: 3%;
}

.center p{
		font-size: 2.2vw;
}

.center h2{
			color: #000;
			text-align: left;
			font-size: 2.8vw;
			margin: 0;
			padding: 0;
}


#content .center article{
		   font-family: arial, sans-serif;
		   font-size: 2.8vw;
		   width: 100%;
		   /*padding-left: 6%;*/
		   line-height: 1em;
		   text-align: center;
		   margin-top: 5%;
		   /*margin-bottom: 10%;*/
		   font-weight: lighter;
		   letter-spacing: 0.05em;
		   color: #bababa;
}

h1.center{
	/*font-family: arial, sans-serif;*/
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-weight: lighter;
	text-align: left;
	/*font-style: italic;*/
	font-size: 3.4vw;
	margin-top: 0;
	margin-bottom: 1.5%;

}

#content p.center {
			width: 80%;
			font-family: arial, sans-serif;
			font-size: 1.2vw;
			line-height: 1.5em;

}

table {
		width: 100%;
		font-size: 2.2vw;
		font-family: "open sans", arial, sans-serif;
}

th {
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-size: 3vw;
	padding-bottom: 0.7em;
	padding-top: 1.4em;
	margin: 0;
}

tr {
}

td{
	border-bottom: #bababa dotted;
	width: 90%;
}

td.preis{
			border-bottom: none;
			vertical-align: bottom;
}

       
/*div id footer*/
#footer {
			background-color: #000000;
			width: 100%;
			height: 10%;
			clear: both;
			font-family: arial, sans-serif;
			font-weight: lighter;
			font-size: 1.7vw;
			text-align: center;
			padding-top: 1%;
			padding-bottom: 1%;
			border-top: #789893 thick;
         }

#footer p{
		 color: #bababa;
}
}

/* Medium devices (landscape tablets, 768px and up) ***************/
@media only screen and (min-width: 768px) {
		
	/*********************Cookie************************************/
#mbmcookie {   position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               background-color: #789893;
               padding: 2% 1% 1% 1%;
               font-size: 1.5vw;
               font-family: "open sans", arial, sans-serif;}

    #mbmcookie a.button {cursor: pointer;
                         background: #000;
                         color: #fff;
                         padding: 1% 2% 1% 2%;
                         margin-left: 6%;
                         border-radius: 0.5em;
                         font-family: New Century Schoolbook, TeX Gyre Schola, serif;
                         font-weight: lighter;
                         float: right;}

    #mbmcookie a.button:hover {background-color: #bababa;
    									 color: #fff}

    #mbmcookie p.cookiemessage {display: block;
                               padding: 0;
                               margin: 0;
                               font-size: 1.5vw;
                               font-family: "open sans", arial, sans-serif;
                               color: #fff;}
    #mbmcookie a{
    	color: black;
    	text-decoration: none;
    	
    }
    
    #mbmcookie a:hover{
    				color: #bababa;
    }

/*******************Cookie Ende*********************************/
#overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	margin:0;
	background-color: rgba(0,0,0,0.8);
	z-index: 2;
	cursor: pointer;
}

button.transition {
		background-image: url(images/weihnachts.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		background-color: #fff;
		color: #2a312f;
		opacity: 0.5;
		border: none;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 5% 0%;
		font-size: 2.3vw;

}

button.transition:hover {
	cursor: pointer;
	opacity: 1;
	transition: 2s ease-in-out;
	text-shadow: 0em 0.6em 1em #f4e17c;

}
/******************************ModalBox*************************/

#myModal {
	background-image: url(images/modalBoxKlein.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: none;
	position: fixed;
	z-index: 2; 
  	top: 0;
  	width: 114%; 
  	height: 80%; 
  	overflow: auto;
  	margin: 10% -7%;
}

#myModal.modal{
	color: #fff;

}

.modal-content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-48%, -61%);
	text-align: center;
	width: 49%;
	height: auto;
}

.modal-content h1{
	line-height: 0.8em;
	padding-bottom: 3%;

}

.modal-content p{
	text-align: left;
	font-size: 1.8vw;

}

.modal-content a{
	color: #789893;

}

.modal-content .close{
	color: #000;
	float: right;
	width: 10%;
	height: auto;
	font-size: 8vw;
	margin-right: -25%;
	margin-top: -12%;
	
}

.modal-content .close:hover{
	font-size: 8vw;
	cursor: pointer;
	color: #789893;
}

/******************************ModalBox ENDE********************/
@font-face {
  font-family: fahne2;
  font-style: normal;
  src: url("font/HappyDaySchool.ttf");
}

@font-face {
  font-family: fahne;
  font-style: normal;
  src: url("font/HappyDaySchoolOpposed.ttf");
}


@font-face {
  font-family: Herz;
  font-style: normal;
  src: url("font/HeartExplosion.otf");
}


@font-face {
  font-family: osternKunst;
  font-style: normal;
  src: url("font/Easter art.ttf");
}

@font-face {
  font-family: osternEi;
  font-style: normal;
  src: url("font/EasterEgg.ttf");
}


a{
			font-weight: bold;
			text-decoration: none;
			color: #000;
		}

a:hover{
			color: #bababa;
}

	h1{
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-size: 4vw;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 0;
	padding-top: 2em;
	font-weight: lighter;
}

h1#ostern.center{
		font-family: osternEi;
}

h2 {
	font-family: "open sans", arial, sans-serif;
	font-size: 2.3vw;	
	margin: 0;
	color: #bababa;
	text-align: center;
	font-weight: lighter;
	letter-spacing: 0.05em;
	padding-bottom: 5%;

}

p {
	font-family: "open sans", arial, sans-serif;	
	margin: 0;
}

hr {
   width: 13%;
   margin-top: 0.4em;
   color: #bababa;
}

img.icon {
			max-width: 4%;
			height: auto;
}


/*body*/
body {
       background-color: #FFF;
       width: 100%;
       height: 100%;
       margin: 0;
       }
/*div id head*/
#head {
		background-color: #ffffff;
		width: 100%;
		height: 17%;
       
       }
       
/*div id navi*/
#navi {
		background-color: #789893;
		width: 100%;
		height: 12%;
		position: sticky;
		top: 0;
		z-index: 1;
      } 
         
#navi ul{
		list-style-type: none;
		font-family: "open sans", arial, sans-serif;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 40%;
		padding: 0;
		overflow: hidden;
		background-color: #789893;
		font-size: 1.9vw;
		font-weight: lighter;
		line-height: 1.2em;
		
}

#navi li{
			float: left;
			padding-top: 1em;
			padding-bottom: 1em;
			padding-left: 0.5em;
			padding-right: 0.5em;
			background-color: #789893;
			color: #ffffff;
			overflow: hidden;
			display: block;
			margin-right: 0.2em;
			
}

#navi li:hover{
		background-color: 000000;
}

#navi li.dropdown:hover{
		background-color: black;
}

li a, .dopbtn {
	display: inline-block;
	color: white;
	text-decoration: none;
}

li a:hover, .dropdown:hover .dopbtn{
		background-color: #000;
}



li.dropdown {
	display: inline-block;
}

.dropdown-content {
						display: none;
						position: absolute;
						background-color:#000;
						z-index: 1;	
						margin-left: -0.5em;
}

.dropdown-content a {
	color: #bababa;
	text-decoration: none;
	display: block;
	text-align: left;
	padding: 0.5em;
	border-bottom-color: #bababa;
	border-bottom-style: inset;
	border-bottom-width: thin;
	font-size: 1.6vw;
}

.dropdown-content a:hover {
	background-color: #000;
	color: white;
}

.dropdown:hover .dropdown-content {
	display: block;	
}

/*div id landscapeImg*/
#landscapeImg {
					background-color: #000;
					width: 100%;
					height: 21%;
       }
       
#landscapeImg img{
						max-width: 72%;
						height: auto;
						margin-top: 0;
						margin-bottom: 0;
						margin-left: 14%
}

/*div id content*/
#content {
			background-color: #C0C0C0;
			width: 80%;
			height: 40%;
			margin-left: 10%;
			margin-right: 10%;
       
       }
       
#content .sidebanner{
		float: left;
		width: 26%;
		background-color: white;
		
}

#content h2.sidebanner {
   font-family: New Century Schoolbook, TeX Gyre Schola, serif;
   text-align: left;
   width: 100%;
   margin-top: 23%;
   font-size: 2.8vw;
   border-bottom: 0.22em solid #789893;
   padding-bottom: 0.1em;
   color: #000;
}

/*#content .sidebanner p{
          width: 95%;
          padding-top: 25%;
          padding-bottom: 25%;
          font-size: 1.9vw;
          padding-left: 5%;
          /*background-image: linear-gradient(to top, #bababa, #cbcbcb, #dcdcdc, #ededed, #ffffff);*/
          /*background-image: linear-gradient(to bottom, #ffffff, #f2f2f2, #e5e5e5, #d8d8d8, #cbcbcb, #cbcbcb, #cbcbcb, #cbcbcb, #d8d8d8, #e5e5e5, #f2f2f2, #ffffff);*/
          /*background-image: linear-gradient(to bottom, #ffffff, #e8eaee, #ced5dd, #b2c2ca, #97b0b5, #97b0b5, #97b0b5, #97b0b5, #b2c2ca, #ced5dd, #e8eaee, #ffffff);*/
          
/*          
}*/

.infobox {
			width: 15.3%;
			float: right;
			margin-top: 4%;
			position: absolute;
			margin-left: 56.7%;
			display: block;
			
}

#content p.infobox {
			float: right;
			padding-left: 14%;
			padding-right: 14%;
			margin-top: 10%;
			width: 100%;
			padding-top: 14%;
			padding-bottom: 14%;
			/*background-image: linear-gradient(to bottom, #ffffff, #e8eaee, #ced5dd, #b2c2ca, #97b0b5, #97b0b5, #97b0b5, #97b0b5, #b2c2ca, #ced5dd, #e8eaee, #ffffff);*/
			background-image: linear-gradient(to right, white 0%, #789893 30%, #789893 50%,#789893 70%, white 100%);
			border-bottom: inset #bababa thin;
			border-top: inset #bababa thin;
			color: white;
			font-size: 1.6vw;
			text-align: center;
			display: block;
			
}


#content p.kurzinfo{
			margin-top: 5%;
			margin-bottom: 2%;
			text-align: left;
}

#content p.kurzinfo a{
			font-weight: bold;
			text-decoration: none;
			color: #000;
		}

#content p.kurzinfo a:hover{
			color: #bababa;
}


#content .center{
		width: 100%;
		float: left;
		margin-bottom: 3%;
}

.center p{
		font-size: 2vw;
}

.center h2{
			color: #000;
			text-align: left;
			font-size: 2.3vw;
			margin: 0;
			padding: 0;
}


#content .center article{
		   font-family: arial, sans-serif;
		   font-size: 1.8vw;
		   width: 100%;
		   /*padding-left: 6%;*/
		   line-height: 1em;
		   text-align: center;
		   margin-top: 5%;
		   /*margin-bottom: 10%;*/
		   font-weight: lighter;
		   letter-spacing: 0.05em;
		   color: #bababa;
}

h1.center{
	/*font-family: arial, sans-serif;*/
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-weight: lighter;
	text-align: left;
	/*font-style: italic;*/
	font-size: 2.5vw;
	margin-top: 0;
	margin-bottom: 1.5%;

}

#content p.center {
			width: 80%;
			font-family: arial, sans-serif;
			font-size: 1.2vw;
			line-height: 1.5em;

}

table {
		width: 80%;
		font-size: 1.5vw;
		font-family: "open sans", arial, sans-serif;
}

th {
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-size: 1.9vw;
	padding-bottom: 0.7em;
	padding-top: 1.4em;
	margin: 0;
}

tr {
}

td{
	border-bottom: #bababa dotted;
	width: 90%;
}

td.preis{
			border-bottom: none;
			vertical-align: bottom;
}

       
/*div id footer*/
#footer {
			background-color: #000000;
			width: 100%;
			height: 10%;
			clear: both;
			font-family: arial, sans-serif;
			font-weight: lighter;
			font-size: 1.7vw;
			text-align: center;
			padding-top: 1%;
			padding-bottom: 1%;
			border-top: #789893 thick;
         }

#footer p{
		 color: #bababa;
}
}

/* Large devices (laptops/desktops, 992px and up) ****************/
@media only screen and (min-width: 992px) {
	
	/*********************Cookie************************************/
#mbmcookie {   position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               background-color: #789893;
               padding: 2% 1% 1% 1%;
               font-size: 1.5vw;
               font-family: "open sans", arial, sans-serif;}

    #mbmcookie a.button {cursor: pointer;
                         background: #000;
                         color: #fff;
                         padding: 1% 2% 1% 2%;
                         margin-left: 6%;
                         border-radius: 0.5em;
                         font-family: New Century Schoolbook, TeX Gyre Schola, serif;
                         font-weight: lighter;
                         float: right;}

    #mbmcookie a.button:hover {background-color: #bababa;
    									 color: #fff}

    #mbmcookie p.cookiemessage {display: block;
                               padding: 0;
                               margin: 0;
                               font-size: 1.5vw;
                               font-family: "open sans", arial, sans-serif;
                               color: #fff;}
    #mbmcookie a{
    	color: black;
    	text-decoration: none;
    	
    }
    
    #mbmcookie a:hover{
    				color: #bababa;
    }

/*******************Cookie Ende*********************************/

#overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	margin:0;
	background-color: rgba(0,0,0,0.8);
	z-index: 2;
	cursor: pointer;
}

button.transition {
		background-image: url(images/weihnachts.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		background-color: #fff;
		color: #2a312f;
		opacity: 0.5;
		border: none;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 5% 0%;
		font-size: 1.3vw;

}

button.transition:hover {
	cursor: pointer;
	opacity: 1;
	transition: 2s ease-in-out;
	text-shadow: 0em 0.6em 1em #f4e17c;

}
/******************************ModalBox*************************/

#myModal {
	background-image: url(images/modalBoxKlein.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: none;
	position: fixed;
	z-index: 2; 
  	top: 0;
  	width: 80%; 
  	height: 100%; 
  	overflow: auto;
  	margin: 2% 10%;
}

#myModal.modal{
	color: #fff;

}

.modal-content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-47%, -60%);
	text-align: center;
	width: 49%;
	height: auto;
}

.modal-content h1{
	line-height: 0.9em;
	padding-bottom: 3%;

}

.modal-content p{
	text-align: left;
	font-size: 1.3vw;

}

.modal-content a{
	color: #789893;

}

.modal-content .close{
	color: #000;
	float: right;
	width: 10%;
	height: auto;
	font-size: 5vw;
	margin-right: -20%;
	margin-top: -5%;
	
}

.modal-content .close:hover{
	cursor: pointer;
	font-size: 5vw;
	color: #789893;
}

/******************************ModalBox ENDE********************/

/*#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  cursor: pointer;
}

#myModal.modal {
  display: none; /
  position: fixed; 
  z-index: 2; 
  top: 5%:
  bottom: 5%;
  left: 10%;
  right: 10%
  width: auto; 
  height: 90%; 
  background-image: url("images/modalBoxKlein.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: auto; 
}

.modal-content {
	width: 100%;
	height: 100%;
}

.modal-content h1{
	color: white;
	opacity: 0.7;
	font-size: 1.8vw;
}

.modal-content p{ 
	color: white;
	opacity: 0.7;
	font-size: 1.2vw;
}

.modal-content a{
	color: lightgoldenrodyellow;
}


button.transition {
  font-size: 1.3vw;
  color: #bababa;
  opacity: 0.4;
  font-family: "open sans", arial, sans-serif;
  margin: -13% 0% 0% 0%;
  padding: 11% 3% 11% 3%;
  text-align: center;
  background-image: url("images/weihnachts.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  width: 100%;
  height: 20%;
 

}

button.transition:hover {
 
  font-family: "open sans", arial, sans-serif;
  background-size: contain;
  background-color: #fff;
  text-align: center;
  font-weight: bold;
  color: #222;
  opacity: 1;
  width: 100%;
  height: auto%;
  

}

.close {
  color: #bababa;
  float: right;
  padding: 7% 16% 1% 4%;
  font-size: 5vw;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #789893;
  text-decoration: none;
  cursor: pointer;
}*/
/******************************ModalBox ENDE********************/
@font-face {
  font-family: fahne2;
  font-style: normal;
  src: url("font/HappyDaySchool.ttf");
}

@font-face {
  font-family: fahne;
  font-style: normal;
  src: url("font/HappyDaySchoolOpposed.ttf");
}


@font-face {
  font-family: Herz;
  font-style: normal;
  src: url("font/HeartExplosion.otf");
}

@font-face {
  font-family: osternKunst;
  font-style: normal;
  src: url("font/Easter art.ttf");
}

@font-face {
  font-family: osternEi;
  font-style: normal;
  src: url("font/EasterEgg.ttf");
}

a{
			font-weight: bold;
			text-decoration: none;
			color: #000;
		}

a:hover{
			color: #bababa;
}

	h1{
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-size: 3vw;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 0;
	padding-top: 2em;
	font-weight: lighter;
}

h1#ostern.center{
		font-family: osternEi;
}

h2 {
	font-family: "open sans", arial, sans-serif;
	font-size: 1.3vw;	
	margin: 0;
	color: #bababa;
	text-align: center;
	font-weight: lighter;
	letter-spacing: 0.05em;
	padding-bottom: 5%;

}

p {
	font-family: "open sans", arial, sans-serif;	
	margin: 0;
}

hr {
   width: 7%;
   margin-top: 0.4em;
   color: #bababa;
}


img.icon {
			max-width: 4%;
			height: auto;
}

/*body*/
body {
       background-color: #FFF;
       width: 100%;
       height: 100%;
       margin: 0;
       }
/*div id head*/
#head {
		background-color: #ffffff;
		width: 100%;
		height: 17%;
       
       }
       
/*div id navi*/
#navi {
		background-color: #789893;
		width: 100%;
		height: 12%;
		position: sticky;
		top: 0;
		z-index: 1;
      } 
         
#navi ul{
		list-style-type: none;
		font-family: "open sans", arial, sans-serif;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 45%;
		padding: 0;
		overflow: hidden;
		background-color: #789893;
		font-size: 0.9vw;
		font-weight: lighter;
		line-height: 1.2em;
		
}

#navi li{
			float: left;
			padding-top: 1em;
			padding-bottom: 1em;
			padding-left: 0.5em;
			padding-right: 0.5em;
			background-color: #789893;
			color: #ffffff;
			overflow: hidden;
			display: block;
			margin-right: 0.2em;
			
}

#navi li:hover{
		background-color: 000000;
}

#navi li.dropdown:hover{
		background-color: black;
}

li a, .dopbtn {
	display: inline-block;
	color: white;
	text-decoration: none;
}

li a:hover, .dropdown:hover .dopbtn{
		background-color: #000;
}



li.dropdown {
	display: inline-block;
}

.dropdown-content {
						display: none;
						position: absolute;
						background-color:#000;
						z-index: 1;	
						margin-left: -0.5em;
}

.dropdown-content a {
	color: #bababa;
	text-decoration: none;
	display: block;
	text-align: left;
	padding: 0.5em;
	border-bottom-color: #bababa;
	border-bottom-style: inset;
	border-bottom-width: thin;
	font-size: 0.8vw;
}

.dropdown-content a:hover {
	background-color: #000;
	color: white;
}

.dropdown:hover .dropdown-content {
	display: block;	
}

/*div id landscapeImg*/
#landscapeImg {
					background-color: #000;
					width: 100%;
					height: 21%;
       }
       
#landscapeImg img{
						max-width: 68%;
						height: auto;
						margin-top: 0;
						margin-bottom: 0;
						margin-left: 15%
}

/*div id content*/
#content {
			background-color: #C0C0C0;
			width: 60%;
			height: 40%;
			margin-left: 20%;
			margin-right: 20%;
       
       }
       
#content .sidebanner{
		float: left;
		width: 26%;
		background-color: white;
		
}

#content h2.sidebanner {
   font-family: New Century Schoolbook, TeX Gyre Schola, serif;
   text-align: left;
   width: 100%;
   margin-top: 23%;
   font-size: 1.8vw;
   border-bottom: 0.22em solid #789893;
   padding-bottom: 0.1em;
   color: #000;
}

/*#content .sidebanner p{
          width: 95%;
          padding-top: 25%;
          padding-bottom: 25%;
          font-size: 1.9vw;
          padding-left: 5%;
          /*background-image: linear-gradient(to top, #bababa, #cbcbcb, #dcdcdc, #ededed, #ffffff);*/
          /*background-image: linear-gradient(to bottom, #ffffff, #f2f2f2, #e5e5e5, #d8d8d8, #cbcbcb, #cbcbcb, #cbcbcb, #cbcbcb, #d8d8d8, #e5e5e5, #f2f2f2, #ffffff);*/
          /*background-image: linear-gradient(to bottom, #ffffff, #e8eaee, #ced5dd, #b2c2ca, #97b0b5, #97b0b5, #97b0b5, #97b0b5, #b2c2ca, #ced5dd, #e8eaee, #ffffff);*/
          
/*          
}*/

.infobox {
			width: 10%;
			float: right;
			margin-top: 5%;
			position: absolute;
			margin-left: 50.7%;
			
}

#content p.infobox {
			float: right;
			padding-left: 14%;
			padding-right: 14%;
			margin-top: 10%;
			width: 100%;
			padding-top: 14%;
			padding-bottom: 14%;
			/*background-image: linear-gradient(to bottom, #ffffff, #e8eaee, #ced5dd, #b2c2ca, #97b0b5, #97b0b5, #97b0b5, #97b0b5, #b2c2ca, #ced5dd, #e8eaee, #ffffff);*/
			background-image: linear-gradient(to right, white 0%, #789893 30%, #789893 50%,#789893 70%, white 100%);
			border-bottom: inset #bababa thin;
			border-top: inset #bababa thin;
			color: white;
			font-size: 1vw;
			text-align: center;
}


#content p.kurzinfo{
			margin-top: 5%;
			margin-bottom: 2%;
			text-align: left;
}

#content p.kurzinfo a{
			font-weight: bold;
			text-decoration: none;
			color: #000;
		}

#content p.kurzinfo a:hover{
			color: #bababa;
}


#content .center{
		width: 100%;
		float: left;
		margin-bottom: 3%;
}

.center p{
		font-size: 1.2vw;
}

.center h2{
			color: #000;
			text-align: left;
			font-size: 1.5vw;
			margin: 0;
			padding: 0;
}


#content .center article{
		   font-family: arial, sans-serif;
		   font-size: 1.5vw;
		   width: 100%;
		   /*padding-left: 6%;*/
		   line-height: 1em;
		   text-align: center;
		   margin-top: 5%;
		   /*margin-bottom: 10%;*/
		   font-weight: lighter;
		   letter-spacing: 0.05em;
		   color: #bababa;
}

h1.center{
	/*font-family: arial, sans-serif;*/
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-weight: lighter;
	text-align: left;
	/*font-style: italic;*/
	font-size: 1.8vw;
	margin-top: 0;
	margin-bottom: 1.5%;

}

#content p.center {
			width: 80%;
			font-family: arial, sans-serif;
			font-size: 1.2vw;
			line-height: 1.5em;

}

table {
		width: 80%;
		font-size: 1.2vw;
		font-family: "open sans", arial, sans-serif;
}

th {
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	font-size: 1.5vw;
	padding-bottom: 0.7em;
	padding-top: 1.4em;
	margin: 0;
}

tr {
}

td{
	border-bottom: #bababa dotted;
	width: 90%;
}

td.preis{
			border-bottom: none;
			vertical-align: bottom;
}

       
/*div id footer*/
#footer {
			background-color: #000000;
			width: 100%;
			height: 10%;
			clear: both;
			font-family: arial, sans-serif;
			font-weight: lighter;
			font-size: 0.7vw;
			text-align: center;
			padding-top: 1%;
			padding-bottom: 1%;
			border-top: #789893 thick;
         }

#footer p{
		 color: #bababa;
}
      }