/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

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

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

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

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

textarea {
    resize: vertical;
}

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


/* ==========================================================================
   Rubi's custom styles
   ========================================================================== */
@media screen and (min-width: 30rem){
    html {
	font-size: calc(14px + (18 - 14) * ((100vw - 400px) / ( 1200 - 400)));
	}
}
body {
	font-family: 'Roboto', sans-serif;
	background: #FFF5EC;
}
/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }
/* Best practice for hiding elements from visibility:
Notes on accessible CSS image sprites by Steve Faulkner www.paciellogroup.com */
  .visually-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}
#home #content-wrapper {
	height: 100vh;
	background: transparent url("../photos/chalet-sommer.jpg") no-repeat fixed;
	background-position: 50% 50%;
	background-size: cover;
}
#apartment #content-wrapper {
	max-width: 63rem;
	margin: 0 auto;
}
#rates {
	background: transparent url("../photos/waldbild.jpg") no-repeat fixed center top;
	background-size: cover;
}
#rates #content-wrapper {
	height: 100vh;
}
#content-wrapper {
	display: -ms-Flexbox;
	-ms-box-orient: horizontal;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: center;
}
@-webkit-keyframes homeintro {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes homeintro {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes homeintro {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes homeintro {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
.chalet-intro {
	opacity: 0;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-flow: column wrap;
	-moz-flex-flow: column wrap;
	-ms-flex-flow: column wrap;
	flex-flow: column wrap;
	align-items: center;
	background: rgba(49, 41, 34, 0.6);
	padding: 1rem 2rem;
	margin: auto;
	border: 3px solid;
	border-color: rgba(255, 245, 236, 0.4);
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	/*animation-name: homeintro;
	animation-duration: 4s;
	animation-delay: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;*/
	-webkit-animation: homeintro 4s ease 1.0s 1 forwards;
	-moz-animation: homeintro 4s ease 1.0s 1 forwards;
	-o-animation: homeintro 4s ease 1.0s 1 forwards;
	animation: homeintro 4s ease 1.0s 1 forwards;
}
.chalet-rates {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-flow: column wrap;
	-moz-flex-flow: column wrap;
	-ms-flex-flow: column wrap;
	flex-flow: column wrap;
	align-items: center;
	background: rgba(49, 41, 34, 0.6);
	padding: 2rem;
	margin: auto;
}
.chalet-rates table {
	margin: 1rem 0;
}
section.slider-wrap {
	display: block;
	max-width: 63rem;
	margin: 0 auto;
	text-align: center;
}
.bxslider {
	padding-left: 0;
}
.col-content {
	max-width: 63rem;
	margin: 0 auto;
	padding: 0 0.25rem;
}
#situation .col-content {
	max-width: 45rem;
	margin: 0 auto;
	padding: 0 0.25rem;
}
.col-content ul {
	list-style: none;
	padding-left: 0;
	-webkit-column-width: 300px;
    -webkit-column-gap: 2rem;
    -webkit-column-rule: 1px solid #ddd;
    -moz-column-width: 300px;
    -moz-column-gap: 2rem;
    -moz-column-rule: 1px solid #ddd; 
    -ms-column-width: 300px;
    -ms-column-gap: 2rem;
    -ms-column-rule: 1px solid #ddd; 
    column-width: 300px;
    column-gap: 2rem;
    column-rule: 1px solid #ddd; 
    padding: 5px;
}
.col-content ul li {
	-webkit-column-break-inside: avoid;	/* Chrome, Safari, Opera */
	page-break-inside: avoid;	/* Firefox */
	break-inside: avoid;	/* IE 10+ */
}
/* css hack to avoid different margins at top of columns http://stackoverflow.com/questions/5314726/:*/
.col-content ul li:after {
	content: '';
	display: block;
	height: 0.125rem;
}
footer {
	background-color: #E9CAB2;
	margin-top: 2rem;
	border-top: 1px dotted #ddd;
	/*padding: 1.5rem;*/
}
footer .main-wrap, #situation .map-container {
	max-width: 63rem;
	margin: 0 auto;
}
.col-33 {
	display: inline-block;
	vertical-align: top;
	width: 33.333333%;
}
.datens {
	margin: 0 1.5rem 2.25rem 1.5rem;
	padding: 2rem 10% 2rem 10%;
}

/* ==========================================================================
   Main Navigation
   ========================================================================== */
nav {
	position: relative;
	z-index: 10;
	height: 4rem;
}
nav .main-nav::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
.main-nav {
	position: relative;
	width: 100%;
	margin: 0 auto;
	/*height: 4rem;*/
	background: #9E7453;
	/*background-color: rgba(0,0,0,.7);*/
	border-bottom: 1px solid #633A19;
	background-clip: padding-box;
	-webkit-backface-visibility: hidden;
	vertical-align: bottom;
	z-index: 10;
}
.main-nav ul {
	text-align: center;
	height: 100%;
	padding-left: 0;
	margin: 0 auto;
}
.main-nav li {
	position: relative;
	display: inline-block;
	height: 100%;
}
.main-nav li a {
	display: block;
	height: 100%;
	padding: 0 1.5rem 0;
	color: #FFF5EC;
	font-family: 'Roboto Slab', serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 4rem;
	text-decoration: none;
	border-bottom: none;
}
.main-nav li a:current {
	outline: none;
}
.main-nav li:last-of-type a {
	font-family: 'Roboto', sans-serif;
	padding: 0 0.5rem 0;
	/*text-transform: uppercase;*/
	font-size: 1.25rem;
	font-weight: 400;
	color: #FFFEFD;
}
.main-nav li:hover a, #lang-selection a:hover {
	color: #fbceaa;
}
.main-nav .home-nav a {
	padding: 0;
}
.main-nav .home-nav:hover a {
	background: transparent;
}
.main-nav li.current a, #lang-selection a.current {
	color: #fbceaa;
	cursor: default;
}
.go-to-menu-de, .go-to-menu-en {
	display: none;
}
 /*======================================
   TEXTLINKS
   ====================================== */
a {
	color: #7E5433;
	border-bottom: 1px dotted;
	text-decoration: none;
	outline: none;
}
.chalet-intro a, .chalet-rates a {
	color: #FFF5EC;
	border-bottom: 2px dotted;
}
.bx-controls-direction a {
	border-bottom: none; /*boxslider*/
}
a:hover {
	text-decoration: none;
	border-bottom: 1px solid;
}
.img-link {
	text-decoration: none;
	border-bottom: none;
}
.img-link:hover, .bx-controls-direction a:hover {
	text-decoration: none;
	border-bottom: none;
}
.chalet-rates a {
	font-size: 1.5rem;
}
 /*======================================
   KONTAKTFORMULAR
   ====================================== */
#contact .form-container {
	max-width: 40rem;
	margin: 0 auto;
}
#contactform {
	background: rgba(255, 255, 255, 0.75);
	border: 10px solid rgba(102, 58, 0, 0.2);
	margin: 1.5rem 0 0;
	padding: 0 1.5rem 1.5rem 1.5rem;
	width: 100%;
}
#contactform input[type="date"], #contactform input[type="text"], #contactform input[type="email"], #contactform input[type="tel"], #contactform textarea {
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
	background: transparent none repeat scroll 0 0;
	border-bottom: 1px solid rgba(42, 42, 42, 0.25) !important;
	border-left: none;
	border-right: none;
	border-top: none;
	color: #2a2a2a;
	display: inline-block !important;
	margin: 0;
	outline: medium none;
	padding: 6px 8px 12px;
	width: 100% !important;
	font-size: 1.125rem;
}
#contactform textarea {
	height: 8rem;
}
#contactform label {
	font-size: 1.125rem;
	color: #565656;
}
#contactform input:focus, #contactform textarea:focus {
	background: #fff;
	box-shadow: 0 0 3px #aaa;
}
/* #message-submit Style */
#message-submit.submit {
    background-color: #a1a1a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#a1a1a1), to(#565656));
    background: -webkit-linear-gradient(top, #a1a1a1, #565656);
    background: -moz-linear-gradient(top, #a1a1a1, #565656);
    background: -ms-linear-gradient(top, #a1a1a1, #565656);
    background: -o-linear-gradient(top, #a1a1a1, #565656);
    background: linear-gradient(top, #a1a1a1, #565656);
    border: 1px solid #959595;
    border-bottom: 1px solid #9c9c9c;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #c1c1c1;
    -webkit-box-shadow: 0 1px 0 0 #c1c1c1 inset ;
    -moz-box-shadow: 0 1px 0 0 #c1c1c1 inset;
    -ms-box-shadow: 0 1px 0 0 #c1c1c1 inset;
    -o-box-shadow: 0 1px 0 0 #c1c1c1 inset;
    color: white;
    font-weight: bold;
    padding: 3px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #25430d;
}
#message-submit.submit:hover {
    opacity: .85;
    cursor: pointer; 
}
#message-submit.submit:active {
	border: 1px solid #553000;
	box-shadow: 0 0 10px 5px #AA7939 inset;
	-webkit-box-shadow: 0 0 10px 5px #AA7939 inset;
	-moz-box-shadow: 0 0 10px 5px #AA7939 inset;
	-ms-box-shadow: 0 0 10px 5px #AA7939 inset;
	-o-box-shadow: 0 0 10px 5px #AA7939 inset;
}
#contactform input:focus:invalid, #contactform textarea:focus:invalid, #contactform textarea:focus:invalid, #contactform select:focus:invalid { /* when a field is considered invalid by the browser */
	background: #fff;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535;
}
#contactform input:required:valid, #contactform textarea:required:valid, #contactform select:focus:valid { /* when a field is considered valid by the browser */
	background: #fff;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}
.z {
	display: none;
}
p.warning {
	color: #FF0000;
}
p.info {
	color: #009933;
}
p.warning, p.info {
	text-align: center;
}
/* ==========================================================================
   Lageplan
   ========================================================================== */
#situation iframe {
	height: 50vh;
	width: 100%;
	border: none;
}
/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6, caption {
	font-family: 'Roboto Slab', serif;
	color: #2A1300;
	margin: 1.414rem 0 0.5rem;
	font-weight: inherit;
	line-height: 1.2;
}
h2 {
	font-size: 2.25rem;
}
h3, h4 {
	font-size: 1.5rem;
}
.col-content h3, .col-content h4 {
	margin-top: 0;
}
.main-title {
	color: #724A29;
	font-weight: 700;
	letter-spacing: 0.06rem;
	margin: 2rem auto;
	text-align: center;
}
/*.col-content h3:first-of-type {
	margin-top: 0;
}*/
.chalet-intro, .chalet-rates, .chalet-rates h2, .chalet-rates caption {
	color: #FFF5EC;
}
.chalet-rates caption {
	font-size: 1.75rem;
}
.chalet-intro h2 {
	font-size: 6rem;
	font-weight: 700;
	line-height: 1;
	margin: 0;
	color: #FFF5EC;
}
.chalet-intro p, .chalet-rates td {
	font-size: 1.5rem;
}
.chalet-intro p:first-of-type {
	font-size: 2rem;
	margin: 0;
}
.chalet-intro p:nth-of-type(2), .chalet-rates p {
	max-width: 45rem;
	padding: 0 2rem 0 2rem;
}
.chalet-rates td {
	padding: 0 1rem;
}
.star-holder {
	font-size: 3rem;
	font-weight: bold;
}
footer {
	text-align: center;
}
address, .contact {
	font-style: normal;
	font-size: 1.125rem;
	font-weight: 400;
}
footer h3 {
	font-weight: 700;
}













/* ==========================================================================
   Media Queries
   ========================================================================== */
@media screen and (max-width: 1240px) {
	.main-nav li a {
		font-size: 1.25rem;
	}
	.main-nav li:last-of-type a {
	font-size: 1.125rem;
}
}
@media screen and (max-width: 1020px) {
	.main-nav li a {
		font-size: 1.125rem;
		padding: 0 1rem 0;
	}
	.main-nav li:last-of-type a {
	font-size: 1rem;
}
}
@media screen and (max-width: 800px) {
	.main-nav li a {
		padding: 0 0.5rem 0;
	}
	.chalet-intro {
		padding: 1rem;
	}
	.chalet-intro h2 {
		font-size: 5rem;
	}
	.chalet-intro p {
		font-size: 1.25rem;
	}
	.chalet-intro p:first-of-type {
		font-size: 1.5rem;
		font-weight: 700;
	}
}
@media screen and (max-width: 700px) {
	.go-to-menu-de, .go-to-menu-en {
		content: '';
		position: absolute;
		z-index: 10;
		top: 0;
		right: 0;
		display: block;
		height: 4rem;
		width: 100%;
		padding: 0 4rem;
		font-size: 1.5rem;
		line-height: 4rem;
		color: #FFF5EC;
		border: 0;
		background: #2A1300;
		background-repeat: no-repeat;
		background-clip: padding-box;
		background-image: url("../graphics/icon-menu.png");
		background-image: url("../graphics/icon-menu.svg");
		background-position: 1rem center;
	}

	.go-to-menu-de:hover, .go-to-menu-en:hover {
		color: #FFA258;
		border: 0;
	}
	
	.go-to-menu-en:before {
		content: "Show ";
	}

	.show-nav .go-to-menu-en:before {
		content: "Hide ";
	}

	.go-to-menu-de:after {
		content: " anzeigen";
	}

	.show-nav .go-to-menu-de:after {
		content: " verbergen";
	}

	.main-nav ul {
		/*height: 3rem;*/
		position: static;
		border-bottom: none;
		display: none;
		position: absolute;
		z-index: 10;
		left: 0;
	}
	.show-nav .main-nav ul {
		position: absolute;
		right: 0;
		top: 4rem;
		display: block;
		width: 100%;
		margin: 0;
	}
	.main-nav ul li {
		display: block;
		background: #9E7453;
		width: 100%;
	}
	.main-nav ul li a {
		font-size: 1.25rem;
		text-align: center;
	}
	.main-nav li:hover a {
		background: #8A664A;
	}
	.main-nav ul li.current {
		background: #E7B892;
	}
	.main-nav ul li.current a {
		color: #000000;
	}
	.chalet-rates h2 {
		text-align: center;
	}
	.chalet-rates table {
		margin: 0;
	}
}
@media screen and (max-width: 480px) {
	.chalet-intro, .chalet-rates {
		padding: 0 0.25rem;
	}
	.chalet-intro h2 {
		font-size: 4rem;
	}
	.col-33 {
		width: 100%;
	}
}
@media screen and (max-width: 420px) {
	.chalet-intro h2 {
		font-size: 3rem;
	}
	.chalet-rates h2 {
		font-size: 1.75rem;
	}
	.chalet-intro p, .chalet-rates td, .chalet-rates a {
		font-size: 1.125rem;
	}
	.chalet-intro p:first-of-type {
		font-size: 1.25rem;
	}
	.star-holder {
		font-size: 2rem;
	}
}
@media screen and (max-height: 520px) and (orientation: landscape) { 
	#content-wrapper {
		min-height: 32.5rem;
	}
	.chalet-rates {
		padding: 0.5rem;
	}
	#situation iframe {
		height: 80vh;
	}
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

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

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

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

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

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
	*, *:before, *:after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	.chalet-intro {
		opacity: 1;
	}

	nav, .chalet-rates p:last-of-type {
		display: none;
	}

	a, a:visited, .chalet-intro a, .chalet-rates a {
		border-bottom: none;
	}
	/*     a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    } */
	#content-wrapper {
		height: auto;
		justify-content: flex-start;
	}
	footer {
		border-top: none;
		page-break-inside: avoid;
	}
	pre, blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

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

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

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

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