/*
Theme Name: 	Bellwald
Theme URI: 		http://mohnrot.ch
Version: 		1.0
Author: 		mohnrot
Author URI: 	http://mohnrot.ch
*/



/*** Sensible Defaults ***/

@import "css/reset.css";
@import "css/fonts/stylesheet-times.css";
@import "blocks.css";
@import "css/flickity.css";
@import "js/lightbox/css/lightbox.min.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
/*::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; } */

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
	        font-smoothing: antialiased;
}

/* Helper Classes */

.clear { clear: both; }
strong { font-weight: bold; }
em { font-style: italic; }
a, a:link, a:visited, a:hover, a:focus { color: inherit; }

html, body {
	font-family: "Times New Roman", Times, serif;
	font-size: 13px;
	line-height: 140%;
	color: #414744;
	background: #e2d8cd;
}

body.optima {
	font-family: "Optima", sans-serif;
}

.page-wrap {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	background: #FEEAD2;
}

.wrap {
	width: 100%;
	padding: 0 20px;
	max-width: 980px;
	margin: 0 auto;
}

.flex {
	display: flex;
	flex-flow: row wrap;
}

header {
	background: #fff;
	color: #fff;
	padding: 1rem 0;
	width: 100%;
}

	@media (min-width: 500px) {
		header {
			background: #A73312;
		}
	}

	header .nav-toggle {
		width: 44px;
		height: 30px;
		cursor: pointer;
		margin-left: -10px;
		padding-top: 3px;
	}

		header .nav-toggle span {
			display: block;
			background: #414744;
			width: 25px;
			height: 3px;
			margin: 4px auto;
		}

		@media (min-width: 500px) {
			header .nav-toggle {
				display: none;
			}
		}

	header nav {
		display: none;
	}

	.nav-open header nav {
		display: block;
	}

		@media (min-width: 500px) {
			header nav {
				display: block;
			}
		}

	header nav ul {
		display: flex;
		font-size: 1.4rem;
		line-height: 100%;
		font-weight: bold;
	}

	header nav ul li {
		margin-right: 1.75rem;
	}

		@media (min-width: 750px) {
			header nav ul {
				font-size: 1.6rem;
				line-height: 100%;
			}

			header nav ul li {
				margin-right: 2.5rem;
			}
		}

	header nav ul a {
		text-decoration: none;
	}

	@media (max-width: 499px) {
		header nav {
			background: rgba(65, 71, 68, 0.8);
			color: #fff;
			position: absolute;
			top: 43px;
			left: 0;
			width: 100%;
			min-height: 100vh;
			z-index: 9999;
		}

		header nav ul {
			display: block;
			padding: 15px 0;
			font-size: 1.5rem;
			line-height: 100%;
		}

		header nav ul li {
			width: 100%;
		}

		header nav ul li a {
			padding: 5px 20px;
			display: block;
		}
	}


.title-area {
	padding: 1.5rem 0 1.5rem 0;
	background: #D68552 url(css/img/muster-new.jpg) no-repeat center;
	background-size: cover;
	color: #feead2;
}

	.title-area::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: rgba(0,0,0,0.2);
	}

	@media (min-width: 500px) {
		.title-area {
			padding: 3rem 0 3rem 0;
		}
	}

	@media (min-width: 750px) {
		.title-area {
			padding: 6rem 0 3rem 0;
		}
	}

	/* body.home .title-area {
		height: 40vw;
		max-height: 520px;
	} */

	.title-overlay {
		background: rgba(167, 51, 18, 0.8);
		padding: 2rem 0;
		color: #FFDEA0;
		font-size: 1.15rem;
		line-height: 130%;
		width: 100%;
	}

		@media (min-width: 700px) {
			.title-overlay {
				position: absolute;
				transform: translateY(-100%);
			}
		}

	h1 {
		font-size: 2rem;
		font-size: 2

		font-size: 2rem;
			rem;
		line-height: 100%;
		font-weight: bold;

	}

	@media (min-width: 500px) {
		h1 {
			font-size: 3rem;
			line-height: 100%;
		}
	}

	@media (min-width: 750px) {
		h1 {
			font-size: 4rem;
			line-height: 100%;
		}
	}

.hero {
	background: #D68552;
	height: 47.6vw;
	max-height: 611px;
}

	.slider {
		height: 100%;
		position: relative;
	}

		.slide {
			width: 100%;
			height: 100%;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			position: absolute;
			z-index: 0;
			opacity: 0;
		}

			.slide:nth-child(1) { z-index: 99; opacity: 1; }
			.slide:nth-child(2) { z-index: 98; opacity: 1; }
			.slide:nth-child(3) { z-index: 97; }


article.main {
	flex-grow: 1;
	display: flex;
	flex-flow: row wrap;
}

.booking-teaser aside {
	display: flex;
	flex-flow: row wrap;
}

.content {
	padding: 1.5rem 0;
	flex: 1;
	width: 100%;
}

	@media (min-width: 500px) {
		.content {
			padding: 3.5rem 0;
			width: auto;
		}
	}

	.has-sidebar .content .wrap {
		margin: 0;
		/* transform: translateX(-50%); */
	}


	@media (min-width: 980px) {
		.has-sidebar .content {
			padding-left: calc((100vw - 980px)/2);
			padding-right: 3rem;
		}
	}

	@media (min-width: 1300px) {
		.has-sidebar .content {
			padding-left: calc((1300px - 980px)/2);
			padding-right: 3rem;
		}
	}

.sidebar {
	width: 100%;
	background: #8C2B0B;
}


	@media (min-width: 500px) {
		.sidebar {
			width: 33.33%;
		}
	}

	.booking-teaser .sidebar,
	footer .sidebar {
		background: transparent;
		padding-right: 20px;
	}

	.sidebar.map {
		position: relative;
	}

	.sidebar.map::before {
		content: "";
		display: block;
		padding-bottom: 145%;
	}

		.sidebar iframe {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

	.sidebar .image {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.sidebar .image::before {
		content: "";
		display: block;
		padding-bottom: 145%;
	}

	@media (min-width: 500px) {
		.current-page–gutschein-bestellen .sidebar .image {
			height: 100%;
		}
	}


.accordion {
	margin: 0 0 1rem 0;
}

	.accordion .accordion-title {
		font-size: 1.7rem;
		line-height: 120%;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
	}

	.accordion .accordion-title:hover {
		color: #A73312
	}

	.accordion .accordion-content {
		display: none;
		padding: 1rem 0;
	}

.article-formatting {
	font-size: 1.07rem;
	line-height: 130%;
}

	.article-formatting h2 {
		font-size: 2rem;
		
		line-height: 120%;
		margin: 1.5em 0 0.5em 0;
	}

		.article-formatting > h2:first-child {
			margin-top: 0;
		}

	.article-formatting p {
		margin-bottom: 1.3rem;
	}

	.article-formatting ul {
		padding-left: 20px;
	}

		.article-formatting ul li {
			list-style-type: disc;
		}

	.article-formatting strong,
	.article-formatting b {
		font-weight: bold;
	}

	.article-formatting em {
		font-style: italic;
	}


.booking-teaser {
	color: #E1B69F;
	background: #414744;
}

	.booking-teaser .logo {
		width: 100%;
		width: calc(100% - 2rem);
		max-width: 424px;
		background: url(css/img/logo.svg) no-repeat center;
		background-size: contain;
	}

		.booking-teaser .logo::before {
			content: "";
			display: block;
			padding-bottom: 42%;
		}

	.booking-teaser .sidebar {
		padding: 1.5rem 20px;
	}

		@media (min-width: 500px) {
			.booking-teaser .sidebar {
				padding: 3.5rem 0;
			}
		}

	.booking-teaser .sidebar a.button {
		color: #DBA88D;
		background: #A73312;
		text-decoration: none;
		padding: 0.5em 1em;
		font-size: 1.5rem;
		line-height: 100%;
		display: inline-block;
		font-weight: bold;
		margin-top: 2rem;
		margin-bottom: 2rem;
	}

	.button a,
	.form-row input[type='submit'] {
		color: #fff;
		background: #A73312;
		text-decoration: none;
		padding: 0.5em 1em;
		font-size: 1.5rem;
		line-height: 100%;
		display: inline-block;
		font-weight: bold;
		width: auto;
	}

.error-message {
	background: #ecb6b6;
	color: rgb(119, 32, 32);
	padding: 1rem;
	border-radius: 4px;
	font-weight: bold;
	margin: 0 0 1rem 0;
}

.form-row {
	margin: 0 0 5px 0;
}

.form-row label {
	color: #414744;
	font-weight: bold;
	margin: 1rem 0 5px 0;
	display: block;
}

.form-row p {
	margin: 2rem 0;
}

.form-row {
	width: 100%;
	max-width: 360px;
}

.form-row input.text,
.form-row select,
input[type='submit'] {
	display: block;
	width: 100%;
	background: #FCD199;
	font: inherit;
	padding: 0.75rem 1rem;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	outline: none;
}

.form-row select,
form.wpcf7-form select {
	background-image: url(css/img/dropdown.svg);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 30px auto;
}



/* WPCF7 Forms */
form.wpcf7-form {
	max-width: 450px;
}

	form.wpcf7-form .form-item {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	.wpcf7-form-control-wrap {
		flex: 1
	}

	form.wpcf7-form .inlinetext {
		margin-bottom: 5px;
		padding: 0.5em 0.75em;
	}

	form.wpcf7-form input[type='text'],
	form.wpcf7-form input[type='date'],
	form.wpcf7-form input[type='email'],
	form.wpcf7-form input[type='submit'],
	form.wpcf7-form textarea,
	form.wpcf7-form select {
		display: block;
    width: 100%;
    background: #FCD199;
    font: inherit;
    padding: 0.75rem 1rem;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    outline: none;
	}

	form.wpcf7-form select {
		background-image: url(css/img/dropdown.svg);
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 30px auto;
	}



	form.wpcf7-form textarea {
		height: 10rem
	}

	form.wpcf7-form .g-recaptcha {
		margin: 0 0 1em 0;
	}

	form.wpcf7-form input[type='submit'] {
		color: #fff;
    	background: #A73312;
	    text-decoration: none;
	    padding: 0.5em 1em;
	    font-size: 1.5rem;
	    line-height: 100%;
	    display: inline-block;
	    font-weight: bold;
	    width: auto;

	}

footer {
	background: #081812;
	color: #959593;
	font-size: 0.8125rem;
	line-height: 130%;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
}

	footer .content {
		padding: 0 0;
	}

		footer .content .footer-area {
			width: 50%;
			padding-right: 1rem;
		}

	footer .sidebar {
		padding: 1rem 20px;
		text-align: right;
	}

		@media (min-width: 500px) {
			footer .sidebar {
				padding: 2.5rem 0;
				text-align: left;
			}
		}

	footer a {
		text-decoration: none;
	}