/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */


/*@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');*/

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

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

* {
  font-family: 'Montserrat',' Arial', sans-serif;
  /*font-family: 'Scada',' Arial', sans-serif;*/
  color: #7a726d;
  font-weight: 400;
  margin:0;
  padding:0;
  outline:0;
  -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box
}


button,
input,
select,
textarea {
    color: #000;
}

body {
	  /*background: #ada58c;*/	
    line-height: 1.5em;
}


/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */


/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
   vertical-align: middle;
   max-width: 100%;
   height:auto;

}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/***Cookiehinweis****/
.cc_container .cc_btn, .cc_container .cc_btn:visited {
    color: white !important;
    background-color: #a12942 !important;
}
.cc_container a, .cc_container a:visited {
    color: #a12942 !important;
}
/**Ende Cookiehinweis****/

.hg-seite {	
		position: fixed;
    min-width: 950px;
    min-height: 100%;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    z-index: -10000;
}
.hg-seite-mobil {
		display:none;
}
#mainwrapper {
   width: 100%;
   float:left;
   height: auto;
   margin: 0 auto 0 auto;
   padding: 0 10px 0 10px;
   padding: 0;
   
}
#maincontentwrapper {
	 position: relative;
   max-width: 950px;
	 min-height: 500px;
	 background:transparent;
   margin: 0 auto 0 auto;
   /*min-height: 622px;*/
}

#kopfwrapper {
	width: 100%;
	height: auto;
	float:left;
	background:white;
}
#kopftext {
		position: absolute;
		top: 410px;
	  margin-left: 40px;
		z-index: 2000;
	}
#kopftext p {
	color:white;
	font-size: 1.1em;
	letter-spacing: 0.03em;
}

#logowrapper {
	width: 280px;
	float: left;
	margin: 40px 0 25px 40px;
}

#logowrapper img {
	float: left;
	width: 280px;
	height: auto;
	margin: 0px;
	border: 0;
}

#bannerwrapper {
	float:left;
	width: 100%;
	margin-top:40px;
}
.bannerpic {
	float: left;
	margin-right: 1.0526315%; /*10px*/
	width: 24.210526%; /*230px*/
}
.picmono {
	display:block;
}
.bp-4 {
	margin-right:0 !important;
}
.bannerbutton {
	background: #fff;
	margin-top: 3%;
	text-align: center;
	width:100%;
	min-height:90px;
}
.bannerbutton p {
	margin-bottom: 0;
}
.bannerbutton span {
	font-size: 1.2em;
}
.bannerwrapper a {
	text-decoration:none;
}

#paketwrapper {
	float:left;
	width: 100%;
	margin-top:40px;
}
.paket {
		border:1px solid white;
		color: white !important;
		background: #635851;
		opacity: 0.8;
		float:left;
		min-height:310px;
		max-width:310px;
		min-width:310px;
		margin-right:10px;
		text-align:center;
}
.paket-3 {
	 margin-right:0px;
}
.pakettxt {
	margin: 90px 20px 20px 20px;
}
.pakettxt p,
.pakettxt h2,
.pakettxt a,
#anfragewrapper p,
#anfragewrapper p b,
.angebote {
		color:white !important;
}

#anfragewrapper {
	float:left;
	width: 100%;
	/*background-color: #993333;*/
	background: url("../img/hg-buchungsanfrage.png") #993333 no-repeat 10px 12px;
	margin: 40px 0 80px 0;
	border:solid 1px white;
}
div#anfragewrapper {
	padding: 0 30px;
	padding-bottom: 15px;
}
#anfragewrapper .csc-textpic-imagewrap {
	  margin: 0 !important;
    padding-bottom: 0;
    /*padding-top: 15px;*/
}
#anfragewrapper p {
	margin: 4px 0;
}
#anfragewrapper p:first-child {
	margin-top: 25px;
}

#trailer {
	max-width: 100%;
	height: auto;
}

#trailer img {
	max-width: 100%;
	height: auto;
}
#trailertext {
	background-color: rgba(153, 51, 51, 0.8);
	width: 100%;
	padding: 10px 0 0 35px;
	position: relative;
	height: 40px;
	bottom: 40px;
}
#trailertext p {
	margin:0;
	color:white;
}
#trailertext img {
	margin-bottom:2px;
}
.hg_ranke {
	position:absolute;
	right:0;
	top:0;
}
#mainmenu-rahmen {
	float: right;
	display:inline;
	z-index: 100;
	width: 60%;
	font-size: 0.938em;
	/*	position: relative;*/
	margin: 130px 30px 0 0;
}
.menu-btn {
	background: none repeat scroll 0 0 #993333;
    color: white;
    cursor: pointer;
    display: none;
    left: 0;
    opacity: 0.9;
    height:33px;
    padding: 6px;
    width:100%;
    z-index:2000;
    position: fixed;
    top: 0;
}
#layerslider {
	float: left; 
}
.hg-folge {
	background:white !important;
}
#content {
	width: 100%; /*950px;*/
	margin: 0 0 0 0;
	font-size: 0.9em;
	font-weight:400;
}
#content ul {
    list-style-image: url("../img/listenpfeil-weiss.png");
    margin-left: 15px;
}
#content ul li {
	color: white;
	font-size: 0.85em;
	line-height: 2.0em;
}
#content_left {
    float: left;
    padding: 0 35px;
    width: 100%;
    margin-bottom: 40px;
}
#content_left p,
#content_left b {
		color: #7a726d;
}

#content_left_zweispalt {
	float:left;
	width:55%;
	padding-left: 35px;
	padding-right: 35px;
}
#content a,
#content_left_zweispalt a {
	color: #7a726d;
}
#content_right_zweispalt {
	width: 45%;
	float:left;
	padding-right: 35px;
}
#contentright h1:first-child {
		padding: 0 35px;
}
#content_left_zweispalt b,
#content_right_zweispalt b {
	color: #7a726d;
}
#content_left_zweispalt p {
	margin:0;
}

/**********Übersichtsseiten Start********/			
.content_overview_wrap {
		float:left;
		width:100%;
		padding: 0px 0px;
		background:#666;
		border-left: solid 35px white;
		border-right: solid 35px white;
		margin-bottom: 8px;
}
.content_overview_img {
		position:relative;
		height: auto;
		float:left;
		border-right:solid 8px white;
}
.noborder {
		border:none !important;
}
.content_overview_txt {
		float:left;
		background-color: rgba(102, 102, 102, 0.8);
		padding: 0px 20px;
}
.content_layer_txt {
		position:absolute;
		background-color: rgba(102, 102, 102, 0.8);
		top: 0;
		padding: 0 20px;
		left:40px;
		height:100%;
}
.content_overview_txt,
.content_layer_txt {
		text-align: center;
}

.content_overview_txt,
.content_overview_txt h1,
.content_overview_txt p,
.content_layer_txt,
.content_layer_txt p,
.content_layer_txt h1 {
		color: white !important;
}
.content_overview_txt h1 {
	padding-top: 20px;
}

.breite70 {width:70%;}.breite68 {width:68%;}.breite30 {width:30%;}.breite75 {width:75%;}.breite55 {width:55%}.breite45 {width:45%}.breite32 {width:32%}.breite25 {width:25%;}.breite40 {width:40%;}.breite60 {width:60%;} 
.rahmenlinks {
		border-right:none !important;
		border-left:solid 8px white;
}

.hinweis p {
	margin-left: 35px;
	margin-right: 35px;
	color: #993333 !important;

}
.hinweis b {
	color: #993333;
	font-weight: 700 !important;
	font-size:16px;
}
.hinweis p {
	margin-top: 0;
	margin-bottom: 20px;
}
#schnellinfowrapper {
	float:left;
	width: 100%;
	background: url("../img/hg-ranke-info.png") #993333 no-repeat right center;
	margin: 40px 0 80px 0;
	border:solid 1px white;
	padding: 20px 35px;
}
#schnellinfowrapper p,
#schnellinfowrapper i {
	color: white;
	margin:0;
}
#schnellinfowrapper h1 {
	color:white;
  margin: 0 0 10px 0;
  font-size: 1.2em; 
}
#info_l,
#info_r {
	float:left;
	width:100%;
}

/**********Übersichtsseiten Ende********/			

#footerwrapper {
		background: #993333;
		margin-top:40px;
		padding:10px 40px;
		width: 100%;
		position:fixed;
		bottom:0;
		opacity:0.8;
}
#footerwrapper p {
		margin:0;
		color: white;
}
#footer-left {
		float:left;
}
#footer-left p a {
	font-size: 0.8em;
}
#footer-right {
		float: right;
}

.csc-textpic-imagewrap {
	margin-top: 20px;
	margin-bottom: 10px;
}
#anfragewrapper.csc-textpic-text {
	padding-top: 5px;
}
DIV.csc-textpic-left DIV.csc-textpic-imagewrap {
		width:100%;
		height: auto;
	}
DIV.csc-textpic DIV.csc-textpic-imagecolumn {
    width: 100% !important;
}	
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
    margin-bottom: 30px;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-lastcol {
    margin-right: 0 !important;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image {
    margin-bottom: 20px;
}

.lightboxgallery img {
    margin-bottom: 3px;
}

#zimmer_nav_wrap {
	float:left;
	z-index:0;
	width:100%;
	text-align:middle;
	padding: 0px 35px 25px 35px;
	margin-top: -20px;
}
.zimmer_nav {width:33.333333%;}
.zimmer_nav img {width:30px;height: auto;}

.navleft {float:left;text-align:left}
.navcenter {float:left;text-align:center}
.navright {float:right;text-align:right}


/* Datepicker
----------------------------------*/
.ui-datepicker .ui-datepicker-header { 
		position:relative; padding:0.2em 0;
		background-color : rgb(90,90,90);
		background-image : none;
		border : 1px solid rgb(0,0,255)
}
.ui-datepicker-month, 
.ui-datepicker-year {
	  color:white;
}
.ui-state-default, .ui-widget-content .ui-state-default {
    border: 1px solid #cccccc;
    color: #993333 !important;
    font-weight: bold;
    outline: medium none;
}
.ui-datepicker-today {
		
}
.ui-helper-clearfix:after {
    display: none !important;
}

#karte{ 
	width: 100%; 
 	height: 210px;
} 
/* Mitarbeiter */
.ma-container {
	box-sizing: border-box;
	position:relative;
	float:left;
	padding-right: 2.27273%;
	padding-bottom: 2.27273%;
	width: 33.3333%;
	/*background:yellow;*/
}

.ma-container p{
	margin: 0 0 0 0;
}
.ma-img {
	float:left;
	height: auto;
}
.ma-blende {
	position: absolute;
	display:none;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #b1b3b4;
}

.ma-namepos {
	position: absolute;
	bottom: 6.8%;
	left:0;
	opacity: 0.6;
	font-size: 14px;
	z-index: 0;
	background: #eee;
	width: 93.41%;
	text-align:center;
}
.ma-nameposwrap p {
	color: #333;
}
.ma-nameposwrap {
	margin-top:0.5em;
}
.ma-info {
	position:absolute;
	width: 93.41%;
	bottom: 6.8%;
	left: 0;
	display:none;
	background: #993333;
	opacity: 0.8;
	padding: 10px 0;
	text-align: center;
	z-index:3;
}
.ma-info p {
	color: white;
	width: 100%;
	margin:0;
	text-align:center;
}
.ma-info a {
	color: white;
}
/*------Impressionen -------------------*/
#hotel-impress-desk {
	display:block;	
}

/* =====================
		Typographie
   ========================================================================== */

.smallh1 {
	margin: 0.67em 0;
	font-weight: 200;
	line-height: 1.3em;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media screen and (max-width: 950px) {
    /* Style adjustments for viewports that meet the condition */
			body {
				    background: #D3B583;
			}
			.hg-seite {
				 display:none;	
			}
			.hg-seite-mobil {
				display:block;
			}
				
			#bannerwrapper {
				padding:0 2%;
			}
			.paket {
				max-width:none;
				width:100%;
			}
			#content_right {
				clear: left;
				width: 100%;
				padding-left: 20px;
				padding-right:20px;
				margin-top: 40px;
			}
			#content_left {
				width: 100%;
			}
			.ma-container:nth-child(2n+3) {
				clear:left;
			}
			.ma-container {
				width: 50%;
			}
			.ma-namepos {
			  width: 95.35%
			}
			
			#content_left_zweispalt {
				clear:left;
				width:100%;
			}
			#content_right_zweispalt {
				width: 100%;
				padding: 0 35px 60px 35px;
			}
			
/********* Übersichtsseiten Begin*********/
			.content_overview_wrap {
			}
			.content_overview_img {
				border: none;
				border-bottom: solid 8px white;
			}
			
			.content_overview_txt,
			.content_layer_txt {
				clear: left;
				height:auto;
				/*text-align: left;*/
			}
			.content_overview_img,
			.content_overview_txt,
			.content_layer_txt,
			.breite25,
			.breite30,
			.breite70 {
				width:100% !important;
			}
			.content_layer_txt {
				 position:relative;
				 left:0px;
				 padding:10px;
			}
/**********Übersichtsseiten Ende********/			
			#logowrapper,
			.felement_1 {
				margin-left: 20px; 
			}
			
			#logowrapper {
				margin-top: 55px;
			}
			
			#logowrapper img {
				width: 90%;
				height: auto;	
			}
	
			#trailerschatten {
				display:none;
			}
			#mainmenu-rahmen {
				width: 100%;
				display:none;
				height: auto;
				margin-top: 0px;
				margin-bottom: 0px;
				padding: 0;
				background: #A1947D;
			}
			.menu-btn {
					display:block;
			}

			#footerwrap {
					background: none;
			}
			.felement_2,
			.felement_3,
			.felement_4 {
				display:none;
			}	
			.felement_1 {
				padding-right: 15px;
			}		
			.felement_5 {
				padding-left: 15px;
			}
			DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI {
				width:100%;
			}
			.ls-s-1 {
				display:none !important;
			}	
			#anfragewrapper ul li:nth-child(4) {
				margin-top: 3% !important;
			}
			#anfragewrapper {
				clear: left;
			}
}

@media screen and (max-width: 700px) {
			.bannerpic {
				clear: left;
				width:100%;
			}
			.picmono {
				display:none;
			}
			#anfragewrapper .csc-textpic-text {
				/*display:none;*/	
			}
			#anfragewrapper .csc-textpic-imagewrap {
    		 text-align: center;
         width: 100%;
         padding-top: 10px;
			}
			#anfragewrapper p:first-child {
				 margin-top: 10px;
}
}


@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}
/*------Impressionen -------------------*/
@media screen and (max-width: 400px) {
	#footer-right {
		display:none;
	}
	.ma-container {
  				min-width: 100%;
  				padding-right:0;
  				padding-bottom: 3%;
	}
	.ma-namepos {
		width:100%;
		margin:0;
		padding:0;
	}		
		
}
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: none;
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}