/* titillium-web-300 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  /* font-display: swap; */
  src: url('./fonts/titillium-web-v9-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/titillium-web-v9-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/titillium-web-v9-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/titillium-web-v9-latin-300.woff') format('woff'), /* Modern Browsers */
       url('./fonts/titillium-web-v9-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/titillium-web-v9-latin-300.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-regular - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  /* font-display: swap; */
  src: url('./fonts/titillium-web-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/titillium-web-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/titillium-web-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/titillium-web-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/titillium-web-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/titillium-web-v9-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-600 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  /* font-display: swap; */
  src: url('./fonts/titillium-web-v9-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/titillium-web-v9-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/titillium-web-v9-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/titillium-web-v9-latin-600.woff') format('woff'), /* Modern Browsers */
       url('./fonts/titillium-web-v9-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/titillium-web-v9-latin-600.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}





/* Grundeinstellungen ----------------------------------------------------------------------------- */
* {	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
* { margin: 0; padding: 0; }
* { position: relative; }
* { border: none; outline: none; }
* { font-size: 16px; font-family: 'Titillium Web', sans-serif; }
* { font-weight: 400; } /* font-weight: 300; font-weight: 600; */
html { overflow-y: scroll; }
body { color: #000; background-image: url(../design/edelweiss-gargellen-hintergrund.jpg); -webkit-font-smoothing: antialiased; }

h1, h2, h3 { font-weight: normal; }
ul, ol { margin: 0 0 15px 30px; }
.clearboth { clear: both; }

h1 { font-size: 22px; color: #87001B; font-weight: 600; margin: 0px 0px 8px 0px; }
h2 { font-size: 18px; color: #87001B; font-weight: 600; margin: 25px 0px 0px 0px; }
h3 { font-size: 16px; color: #87001B; font-weight: 600; margin: 0px 0px 0px 0px; }
#subnav h3 { font-size: 21px; color: #87001B; font-weight: 600; margin-bottom: 0px; }
#subnav h3 a { font-size: 21px; color: #87001B; font-weight: 600; text-decoration: none; }

p {  max-width: 525px; line-height: 1.25; margin-bottom: 19px; }
p.nomarginbottom { margin-bottom: 2px; }
p a { color: #87001B; }
strong { font-weight: 600; }
ul.nolistitem { list-style: none; margin-left: 15px; }
ul { list-style-image:url('../design/listitem.png'); }



table, th , td  { border: 1px #FFF solid; /* border-collapse:collapse; */  }
tr.strong td { font-weight: 600; background-color: #F66C7F; color: #FFF; }
tr { background-color: #EEE; }
td { vertical-align: top; padding: 5px 20px 5px 5px;  border: 1px #FFF solid; /*border-radius: 10px;*/ }

.linkext { text-decoration: none; color: #505050; }
.linkext:hover { text-decoration: none; color: #87001B; }

.linkint { text-decoration: none; color: #87001B; }
.linkint:hover { text-decoration: underline; color: #87001B; }

.imagefader {  position: relative; width: 525px; height: 260px; list-style: none; overflow: hidden; padding: 0; margin: 0 0 15px 0; }
.imagefader li { position: absolute; width: 525px; height: 260px; text-align: center; }



/* --------------------------- */
.slick_slider {
	margin-left: 0;
	max-width: 525px;
}
.slick_slider .slick-dots li button:before {
	font-family: 'slick';
	font-size: 15px;
	color: #af091f;
}
.slick_slider .slick-dots li.slick-active button:before {
	color: #af091f;
}
.slick-dotted.slick-slider {
	margin-bottom: 50px !important;
}
.slick-dots li {
	margin: 0px 1px !important;
}


/* 
Schwarz 	#000000
Grau 		#505050
Rot			#87001B 	Schrift
Rot 		#AA071F 	Hintergrund
Rot			#F66C7F 	Hintergrund Buttons / .active
*/


/* ------------------------------------------------------------------------------------------------ */
#topline { width: 100%; height: 7px; background-color: #AA071F; }

#topnav { width: 1150px; height: 86px; margin: 0 auto; }
#topnav ul { position: absolute; top: 4px; right: 0px; list-style: none; }
#topnav ul li { float: left; margin-left: 30px; }
#topnav ul li a { font-size: 14px; text-decoration: none; color: #505050; }
#topnav ul li.active a, #topnav ul li a:hover { color: #87001B; }

header { width: 1150px; height: 94px; margin: 0 auto; }

#logo { position: absolute; top: 0px; left: 64px; z-index: 100; }

#mainnav { position: absolute; top:34px; right: 0px;  }
#mainnav ul { list-style: none; }
#mainnav ul li { float: left; margin-left: 15px; background-color: #AA071F; padding: 3px 10px 3px 10px; box-shadow: 3px 3px 20px 0px #CCC; }
#mainnav ul li a { font-size: 14px; font-weight: 600; color: #FFF; text-transform: uppercase; text-decoration: none; }
#mainnav ul li.active , #mainnav ul li:hover { background-color: #F66C7F; }
#mainnav ul li.active a, #mainnav ul li a:hover { color: #FFF; }

#content {  width: 1150px; /*min-height: 535px;*/ margin: 0 auto; padding-bottom: 25px; background-color: rgba(255,255,255,0.7); box-shadow: 5px 9px 40px 0px #DEDEDE; }

#subnav { margin-left: 70px; width: 365px; padding-top: 220px; float: left; }
#subnav ul { list-style: none; margin: 0px; }
#subnav ul li { margin-bottom: 2px; }
#subnav ul li a { font-size: 16px; color: #444; text-decoration: none; }
#subnav ul li.active a, #subnav ul li a:hover { color: #87001B; }

article { width: 665px; padding-top: 24px; padding-bottom: 50px; float: left; }	
article img { margin-bottom: 10px; padding-bottom: 0px; }
/* .slider img { max-width: 100%; height: auto; } */
.imgborder { border: 1px #DDD solid; }

article table {
	width: 100%;
	max-width: 550px;
}



#buchen { position: absolute; bottom: 40px; left: 60px; width: 194px; height: 45px; background-image: url(../design/buchen.png); background-repeat: no-repeat; }
#buchen:hover { background-image: url(../design/buchen-active.png); }
#buchen a { display: block; width: 149px; height: 43px;  font-size: 25px; text-align: center; color: transparent; }

footer { width: 1150px; height: 86px; margin: 0 auto; font-size: 14px; color: #505050; text-align: right; padding-top: 5px; }
footer a { font-size: 14px; text-decoration: none; color: #505050; }
footer a:hover { color: #87001B; }


#mainnav ul li, #content, article img { border-radius: 5px; }





/* ------------------------------------------------------------------------------------------------ */
.formular { width: 100%; margin: 20px 0px 20px 0px; padding: 0px; }
.formlabel { float: left; width: 100px; margin-bottom: 5px; font-weight: 400; }
.forminput { float: left; width: 60%; margin-bottom: 5px; }
.formselect { float: left; width: 60%; margin-bottom: 5px; border: 1px #CCC solid; }
.formcheckbox { margin-bottom: 5px; }
.formsubmit { width: 60%; }
.error { padding: 10px; border: 1px red solid; margin-bottom: 10px; }
.error, .error strong {  color: red; }
input[type="radio"] { margin-bottom: 5px; }
input { border: 1px #CCC solid; background-color: #EEE; border-radius: 5px; padding: 0 5px; }
textarea { width: 60%; height: 80px; border: 1px #CCC solid; background-color: #EEE; padding: 0 5px; }
input[type="submit"] { background-color: #AA071F; color: #FFF; padding: 4px 0; }
input[type="submit"]:hover { background-color: #F66C7F; }





/* ------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1025px) { 
	#topnav, header, #content, footer { width: 960px; }
	#subnav { margin-left: 60px; width: 225px; padding-top: 220px; float: left; }
	#subnav h3 { font-size: 19px; }
	#subnav ul li { font-size: 16px; }
	#subnav ul li a { font-size: 16px; }	
	article { width: 625px; padding-top: 24px; float: left; }
	#buchen { position: absolute; bottom: 40px; left: 60px; }
	
	#mainnav ul li a { font-size: 12px; }
	#mainnav ul li { margin-left: 10px; padding: 0px 6px 3px 6px; }
	
	
}

/* ------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 800px) {
		#topnav, header, #content, footer { max-width: 90%; }
		
		#topnav { 	
			max-width: 88%;
			margin-left: 7%;
			margin-right: 5%;
		}
		#topnav ul {
			margin: 0;
		}
		
		#topnav ul li {
			float: left;
			margin: 0;
			margin-left: 10px;
			line-height: 1.1;
		}
		
		
		/*
		#topnav ul li {
			float: left;
			margin: 0;
			margin-right: 0px;
			margin-left: 15px;
			line-height: 1.1;
		}
		
		*/
		
		#logo { width: 27%; max-width: 150px; position: absolute; top: -40px; left: 4.3%; z-index: 0; }
		#logo img { width: 100%; height: auto; } 
		/**/
		#mainnav { position: relative; top:-15px; margin-left: 30%; }
		#mainnav ul { width: 100%; margin-left: 0px; }
		#mainnav ul li { width: 46%; margin: 0 2% 2% 0; }
		#subnav { margin: 0% 3% 0% 30%; width: 65%; padding: 25px 0 20px 0; float: none; border-bottom: 2px #AA071F solid; }
		#subnav h3 { font-size: 19px; margin-bottom: 5px; }
		#subnav ul li { font-size: 16px; margin: 0px 4px 4px 0px; padding: 3px 9px; background-color: #EEE; float: left; }
		#subnav ul li a { font-size: 16px; color: #000; }
		#subnav ul li.active , #subnav ul li:hover { background-color: #F66C7F; }
		#subnav ul li.active a, #subnav ul li:hover a { color: #FFF; }
		article { max-width: 65%; margin: 0% 3% 0% 30%; padding-top: 24px; float: none; }
		.slider img { max-width: 100%; height: auto; }
		#buchen { position: relative; bottom: 0px; left: 30%; margin-top: 40px; }
		footer { height: 40px; text-align: center; }
		
		.imagefader { width: 100%; height: 260px; }
		.imagefader li { width: 100%; height: auto; }
		
}

/* ------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
		header, #content { max-width: 90%; }
		header { height: auto; }
		/*
		#logo { width: 30%; max-width: 117px; position: absolute; top: -172px; left: 0%; z-index: 100; }
		#logo img { width: 100%; height: auto; } 
		*/
		#mainnav { position: relative; top:-40px; margin-left: 32%; }
		#mainnav ul { width: 100%; margin-left: 0px; }
		#mainnav ul li { width: 100%; margin: 0px 0px 2px 0px; float: none;  }
		#content { margin-top: -41px; } /* Korrektur top: -41px bei #logo #mainnav */
		#subnav { margin: 0% 5%; width: 90%; padding-top: 25px; float: none; }
		#subnav h3 { font-size: 19px; margin-bottom: 5px; }
		#subnav ul li { font-size: 14px; margin: 0px 4px 4px 0px; padding: 3px 9px; background-color: #EEE;  float: left; }
		#subnav ul li a { font-size: 14px; }
		#subnav ul li.active , #subnav ul li:hover { background-color: #F66C7F; }
		#subnav ul li.active a, #subnav ul li:hover a { color: #FFF; }
		article { max-width: 90%; margin-left: 5%;  padding-top: 24px; float: none; }
		.slider img { max-width: 100%; height: auto; }
		#buchen { position: relative; top: 0px; left: 5%; margin-top: 40px; }
		footer { max-width: 300px; height: 100px; text-align: center; }
		.linebreak { display: block; font-size: 1px; line-height: 1px; height: 1px; color: transparent; }
		
		td { padding: 1px; }
		
		
}

@media only screen and (max-width: 401px) { 
	
	#topnav ul li { margin-left: 8px; }
	td { font-size: 14px; padding: 1px; }
	
	.showOnMobile { display: block !important; }
	.hideOnMobile { display: none !important; }
	
}

/* Landscape Portrait settings -------------------------------------------------------------------------------- */
.showOnLandscape, .hideOnPortrait { display: block !important; }
.hideOnLandscape, .showOnPortrait { display: none !important; }
@media screen and (orientation: landscape) { .showOnLandscape, .hideOnPortrait { display: block !important; } .hideOnLandscape, .showOnPortrait { display: none !important; } }
@media screen and (orientation: portrait) {  .showOnPortrait, .hideOnLandscape { display: block !important; } .hideOnPortrait, .showOnLandscape { display: none !important; } }