/* colors */

/* dark blue:	#214059; rgb(33, 64, 89); */
/* sand:		#eee7df; rgb(238, 231, 223); */ /* darker version (f.e. text on sand): #877969; lighter version: #f6f3ef;
	rgba(135, 121, 105, 0.1); */
/* red:			#ea533f; rgb(234, 83, 63); */
/* paper: #FBFAF8; */


/* ######################################################################################################### */

@charset "UTF-8";

/* ######################################################################################################### */

html {
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
}

body {
	/*font-size: 0.875em;*/
	font-size: 0.95em;
	line-height: 1.6;
	font-family: "BrandonTextWeb", Arial, sans-serif;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background-color: #ffffff;
	color: #214059;
	-webkit-font-smoothing: antialiased;
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers.png);
}
	
body.menu {
	overflow: hidden;
	overflow-y: hidden;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*::selection {
	background: #F5DE87; /* Safari */
	}
*::-moz-selection {
	background: #F5DE87; /* Firefox */
}

/* ######################################################################################################### */

#loader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	text-align: center;
	padding-top: 30%;
	background-color: #214059;
	color: #ffffff;
}

.no-js #loader {
	display: none;
}

.loader-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(images/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: center center;
	text-indent: -9999px;
	overflow: hidden;
}

.js #no-js-info {
	display: none;
}

.no-js #no-js-info {
	display: block;
	position: fixed;
	top: 80px;
	left: 0;
	width: 100%;
	background: #eee7df;
	color: #877969;
	z-index: 2000;
	padding: 10px;
}

/* ################################################################################################# */

.s-icon {
	display: inline-block;
	font-family: "seaside_iconsvintage";
	font-size: 5em;
	speak: none;
	line-height: 1;
	margin: 0 0 10px 0;
}

.s-icon.small {
	position: relative;
	top: 5px;
	font-size: 2.5em;
	line-height: 1px;
	font-family: "seaside_iconsregular";
}

/* ########################################### BASIC ELEMENTS ###################################################### */

div {}

hr {
	clear: both;
	margin: 1.250em 0;
	height: 1px;
	border: 0 none;
	background-color: rgba(33, 64, 89, 0.1);
}

hr.thick {
	height: 2px;
}

/* CLEARFIX */
hr.divider { visibility: hidden; clear: both; margin: 0; height: 0; border: 0 none; }

a {
	color: #ea533f;
}

a:hover {
	
}

a:active {
	
}

p {
	margin: 1.250em 0;
}

h1 {
	font-size: 4em; 
	margin: 1.250em 0 0.25em 0;
	line-height: 1.3;
	font-family: "BrandonPrinted-One", "BrandonTextWeb", Arial, sans-serif;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
}

h2 {
	font-size: 2.5em; 
	margin: 1.250em 0 0.25em 0;
	line-height: 1.3;
	font-family: "BrandonPrinted-One", "BrandonTextWeb", Arial, sans-serif;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
}

h3 {
	font-size: 2em; 
	margin: 1.250em 0 0.25em 0;	
	line-height: 1.45;
	font-weight: 700;
}

h4 {
	font-size: 1.5em; 
	line-height: 1.2;
	margin: 1.250em 0 0.25em 0;	
	font-weight: 600;
}

h5 {
	font-size: 1.25em; 
	margin: 1.250em 0 0.25em 0;	
	font-family: "BrandonPrinted-One", "BrandonTextWeb", Arial, sans-serif;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
}

h6 {
	font-size: 1em; 
	margin: 1.250em 0 0.25em 0;	
	font-weight: 600;
}

h4.handwritten {
	font-family: "FeltThat";
	font-size: 2em;
}

h2 ~ h3,
h3 ~ h4 ,
h2 ~ h4 {
	margin-top: 0;
}

.printedextras {
	font-family: "BrandonPrinted-Extras";
}

/* first and last child elements follow padding of parents */
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, hr:first-child, p:first-child { margin-top: 0; }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, hr:last-child, p:last-child { margin-bottom: 0; }

/* paragraphs after headlines follow headline bottom margin */
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
	margin-top: 0;
}

/* headlines and paragraphs after horizontal rulers follow the hr margins */
hr + h1, hr + h2, hr + h3, hr + h4, hr + h5, hr + h6, hr + p {
	margin-top: 0;
}

.the-badge:before {
	content: "S";
	font-family: "BrandonPrinted-Extras";
}

/* ######################################################################################################### */
/* ############################################## HEADER BAR ############################################### */
/* ######################################################################################################### */

#logobox {
	position: absolute;
    width: 350px;
    left: 50%;
    margin-left: -175px;
}

#logo {
	display: block;
	float: left;
	height: 80px;
	width: 0px;
	padding: 0;
	margin: 0;
	text-decoration: none;
	color: #214059;
	font-size: 20px;
	overflow: hidden;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(images/seaside-logo-1.svg);
	background-size: 170px auto;
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

body.scrolled #logo,
body.menu #logo,
body.subpage #logo {
	width: 170px;
	filter: alpha(opacity=100);
	opacity: 1;
	margin: 0 30px;
}

#footer-logo {
	display: block;
	height: 40px;
	line-height: 40px;
	padding: 0;
	text-decoration: none;
	color: #fff;
	font-size: 20px;
	margin-right: 70px;	
	background-repeat: no-repeat;
	background-position: center center;
}

/* ######################################################################################################### */

#current-stuff-navigation-sticky {
	display: none;
	position: fixed;
	z-index: 999;
	top: 85px;
	left: 0;
	right: 0;
	text-align: center;
	color: #ea533f;
	background-color: #fff;
	background-image: url(images/lightpaperfibers.png);
}

#current-stuff-navigation {
	position: relative;
	text-align: center;
	color: #ea533f;
}

#current-stuff-navigation ul,
#current-stuff-navigation-sticky ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
	margin-bottom: -10px;
}

#current-stuff-navigation li,
#current-stuff-navigation-sticky li {
	display: block;
	margin: 0 10px 0 0;
	padding: 0;
	float: left;
	line-height: 40px;
}

#current-stuff-navigation a,
#current-stuff-navigation-sticky a {
	display: inline-block;
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-weight: 600;
	color: #ea533f;
}

#current-stuff-navigation a.highlighted,
#current-stuff-navigation-sticky a.highlighted {
	color: #ea533f;
}

#current-stuff-navigation a.booknow,
#current-stuff-navigation-sticky a.booknow {
	height: auto;
	font-size: 1em;
	padding: 2px 5px 0 5px;
	margin-left: 5px;
	color: #fff;
}

.extras {
	font-family: "BrandonPrinted-Extras";
	font-weight: normal;
	font-style: normal;
	font-size: 2em;
	position: relative;
	top: -2px;
}

/* ######################################################################################################### */

#redbar {
	background-color: #ea533f;
	height: 3px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	overflow: hidden;
	text-indent: -9999px;
}

#primary-navigation {
	background-color: #f6f3ef;
	position: fixed;
	z-index: 1000;
	top: -83px;
	left: 0;
	right: 0;
	height: 83px;
	padding: 0 30px;
	line-height: 80px;
	overflow: hidden;
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers_sand.png);
	margin-top: 3px;
}

#menu-stage {
	position: relative;
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers_sand.png);
	margin: 3px 0 0 0;
	text-align: center;
}

#primary-stage-menu {
	margin-bottom: -10px;
}

#menu-stage hr {
	margin: 0;
}

#menu-stage-logo {
	position: relative;
	padding: 30px 0 0 0;
	margin: 0 auto;
	height: 280px;
}

#menu-stage-logo img {
	width: 200px;
	height: auto;
	margin-bottom: 20px;
}

#primary-stage-menu ul li a {
	line-height: 80px;
	height: 80px;
}

/**/

body.scrolled #primary-navigation,
body.menu #primary-navigation,
body.subpage #primary-navigation {
	top: 0;
}

body.scrolled #current-stuff-navigation-sticky,
body.menu #current-stuff-navigation-sticky,
body.subpage #current-stuff-navigation-sticky {
	display: block;	
}


#primary-navigation > .inset, #stage-nav {
	position: relative;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;
	text-align: center;
}

#primary-menu, #stage-nav > .inset, #primary-stage-menu {
	display: inline-block;
}

#primary-menu ul, #stage-nav ul, #primary-stage-menu ul {
	display: block;
	float: left;
	list-style: none;
	margin: 0 20px;
	padding: 0;	
}

#primary-menu ul:first-child, #primary-stage-menu ul:first-child {
	margin: 0 0 0 20px;
}

#primary-menu ul:last-child, #primary-stage-menu ul:last-child {
	margin: 0 20px 0 0;
}

#primary-menu ul li, #stage-nav ul li, #primary-stage-menu ul li {
	display: block;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}

#primary-menu ul li a, #stage-nav ul li a, #primary-stage-menu ul li a {
	display: block;
	padding: 0 10px;
	height: 80px;
	text-decoration: none;
	color: #214059;
	background-color: rgba(135, 121, 105, 0);
	-webkit-transition: background-color 0.3s ease;
	-moz-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
	font-weight: 500;
}

#primary-menu ul li a:hover, #primary-menu ul li.current-item a, #primary-stage-menu ul li a:hover, #primary-stage-menu ul li.current-item a {
	/*background-color: rgba(135, 121, 105, 0.1);*/
	color: #ea533f;
}

#primary-navigation #burger-button, #stage-burger-button, #primary-stage-menu #burger-button, #burger-button {
	display: none;
	font-family: "icons";
	position: absolute;
	z-index: 10;
	top: 13px;
	right: 30px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	color: #214059;
	cursor: pointer;
	overflow: hidden;
	text-align: center;
	font-size: 25px;
	line-height: 40px;
	text-shadow: none !important;
}

#burger-button {
	position: fixed;
	z-index: 1001;
}

#stage-burger-button {
	right: 30px;
}

#burger-button:hover,
#primary-navigation #burger-button:hover,
body.menu #primary-navigation #burger-button,
#stage-burger-button:hover {
	background-color: #214059;
	color: #fff;
}

/**/

#mobile-menu-wrapper {
	display: none;
	position: fixed;
	overflow-y: auto;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background-color: rgba(33, 64, 89, 0.9);
}

#mobile-menu {
	margin: 30px;
}

#mobile-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 40px;
}

#mobile-menu ul li {
	margin: 0;
	padding: 0;
	float: none;
}

#mobile-menu ul li a {
	display: block;
	border-bottom: 0px none;
	line-height: 60px;
	background-color: #fff;
	padding: 0 20px;
	text-decoration: none;
	color: #214059;	
}

#mobile-menu ul li a:hover {
	background-color: #214059;
	color: #fff;
}


/**/

#stage-nav ul li {
	line-height: 80px;
}

#stage-nav ul li a {
	color: #fff;
	font-weight: 600;
	font-size: 1.2em;
}

#stage-nav ul li a:hover {
	/*background-color: rgba(234, 83, 63, 0.35);*/
	color: #ea533f;
}

/*#stage-nav > .inset {
	border-left: 2px solid rgba(255, 255, 255, 0.5);
	border-right: 2px solid rgba(255, 255, 255, 0.5);
}*/



#primary-menu ul li.bookonline a,
#stage-nav ul li.bookonline a,
#kontakt .contact-book a,
a.booknow,
#primary-stage-menu ul li.bookonline a {
	height: 30px;
	margin: 23px 0 0 20px;
	line-height: 20px;
	padding: 7px 10px 0 10px;
	background-color: #ea533f;
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#stage-nav ul li.bookonline a {
	margin: 23px 20px 0 20px;
	text-shadow: none;
}

#kontakt .contact-book a,
a.booknow {
	display: inline-block;
	text-decoration: none;
	font-size: 1.25em;
	padding: 17px 20px 10px 20px;
	height: 50px;
	margin-left: 0;
}

/* ######################################################################################################### */

#scroll-hint {
	display: block;
	position: absolute;
	z-index: 200;
	left: 50%;
	bottom: 20px;
	width: 120px;
	height: 120px;
	margin-left: -60px;
	font-family: "seaside_iconsvintage";
	line-height: 120px;
	font-size: 120px;
	text-align: center;
	color: #fff;
	background-color: transparent;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	text-decoration: none;
	text-shadow: none;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	font-weight: normal;
}

/*#scroll-hint {
	display: block;
	position: absolute;
	z-index: 200;
	left: 50%;
	bottom: 20px;
	width: 60px;
	height: 60px;
	margin-left: -30px;
	text-decoration: none;
	text-shadow: none;
	border-style: solid;
	border-width: 30px;
	border-color: #fff transparent transparent transparent;
	overflow: hidden;
	text-indent: -9999px;
}*/

/* ######################################################################################################### */

#language-switch {
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 30px;
}

#language-switch ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

#language-switch ul li {
	display: none;
	position: relative;
}

#language-switch ul li.current-language,
#language-switch ul:hover li {
	display: block;
}

#language-switch ul li a {
	display: block;
	position: relative;
	height: 40px;
	width: 60px;
	text-align: center;
	background-color: #214059;
	color: #fff;
	line-height: 30px;
	padding: 0 15px 0 15px;
	cursor: pointer;
	font-weight: 500;
	text-decoration: none;
}

#language-switch ul li.current-language a {
	padding: 28px 15px 0 15px;
	height: 83px;
}

#language-switch ul li a:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -30px;
	left: 0;
	width: 30px;
	height: 30px;
	border-color: #214059 transparent transparent #214059;
	border-width: 15px;
	border-style: solid;
}

#language-switch ul li a:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -30px;
	right: 0;
	width: 30px;
	height: 30px;
	border-color: #214059 #214059 transparent transparent;
	border-width: 15px;
	border-style: solid;
}

/*#language-switch ul:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -33px;
	left: 0;
	width: 36px;
	height: 36px;
	border-color: #214059 transparent transparent #214059;
	border-width: 18px;
	border-style: solid;
}

#language-switch:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -33px;
	right: 0;
	width: 36px;
	height: 36px;
	border-color: #214059 #214059 transparent transparent;
	border-width: 18px;
	border-style: solid;
}*/

#language-switch ul li a:hover {
	/*background-color: #fff;*/
	color: #ea533f;
}

#language-switch ul li.current-language a:hover {
	/*background-color: #fff;*/
	color: #fff;	
}

/* ######################################################################################################### */

#stage {
	/*background-color: #214059;*/
	background: transparent;
	color: #fff;
	text-align: center;
	/*background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;*/
	/*background-attachment: fixed;*/
	text-shadow: 0px 0px 40px rgba(33, 64, 89, 1);
}

#stage > .inset {
	padding: calc(10% - 70px) 0 170px 0;
}

#stage h1 {
	margin: 0;
}

#stage h4 {
	margin: 0;
}

/* ######################################################################################################### */

#stage-logo {
	display: inline-block;
	width: 350px;
	height: 350px;
	margin-bottom: -30px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(images/seaside-logo-2.png);
	overflow: hidden;
	text-indent: -9999px;
}

#stage-logo-claim, #menu-stage-logo h2 {
	font-family: "BrandonTextWeb", Arial, sans-serif;
	font-size: 1.35em;
	font-weight: 600;
	margin: -10px 0 30px 0;
	
}


/* ######################################################################################################### */


#footer {
	position: relative;
	padding: 1px 30px 1px 30px;
	
	/* style */
	background-color: #214059;
	color: rgba(255, 255, 255, 0.8);
}

#footer > .inset {
	position: relative;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;
	padding: 30px 0;
}

#footer hr {
	background-color: rgba(255, 255, 255, 0.2);
}

#footer-menu {
	display: block;
}

#footer-menu ul {
	display: block;
	list-style: none;
	margin: 10px 0;
	padding: 0;	
	line-height: 30px;
}

#footer-menu ul li {
	display: block;
	list-style: none;
	margin: 0 20px 20px 0;
	padding: 0;
	float: left;
}

#footer-menu ul li a {
	display: block;
	padding: 0;
	text-decoration: none;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/**/

#footer-notes {
	clear: both;
	text-align: right;
	margin-top: 150px;
}

#footer-notes a, #footer-notes span {
	display: inline-block;
	margin: 0 0 10px 10px;
	white-space: nowrap;
}

/**/

#social-links {
	display: block;
	position: absolute;
	top: 20px;
	right: 0;
}

#social-links ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;	
	line-height: 30px;
}

#social-links ul li {
	display: block;
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0;
	float: left;
}

#social-links ul li a {
	display: block;
	padding: 0;
	text-decoration: none;
	color: #fff;
	border-bottom: none;
	width: 50px;
	height: 50px;
	overflow: hidden;
	text-indent: -9999px;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 50px 100px;
}

#social-links ul li a:hover {
	background-position: center bottom;
}

#facebook-link {
	background-image: url(images/si-facebook.png);
}

#instagram-link {
	background-image: url(images/si-instagram.png);
}


/* ######################################################################################################### */
/* ####################################### FORM AND INPUT ELEMENTS ######################################### */
/* ######################################################################################################### */

input, textarea {
	outline: none;
}

input[type=text],
input[type=password],
input[type=number],
input[type=email],
textarea {
	border: 2px solid rgb(33, 64, 89);;
	background-color: rgba(33, 64, 89, 0.05);
	color: #214059;
	font-family: "BrandonTextWeb", Arial, sans-serif;
	font-size: 1em;
	padding: 10px;
	width: 100%;
	margin: 0 0 20px 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

textarea {
	resize: vertical;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus {
	border: 2px solid rgb(234, 83, 63);;
	background-color: rgba(234, 83, 63, 0.1);	
}

input[type=button], input[type=submit], input[type=reset] {
	background-color: rgb(33, 64, 89);
	border: 2px solid rgb(33, 64, 89);
	color: #fff;
	font-family: "BrandonTextWeb", Arial, sans-serif;
	font-weight: 600;
	font-size: 1em;
	padding: 10px;
	width: 100%;
	max-width: 200px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
}

input[type=reset] {
	background-color: #fff;
	border: 2px solid rgb(33, 64, 89);
	color: rgb(33, 64, 89);
}

::-webkit-input-placeholder {	color: rgba(33, 64, 89, 0.5);
}
:-moz-placeholder {
	color: rgba(33, 64, 89, 0.5);
	opacity:  1;
}
::-moz-placeholder {
	color: rgba(33, 64, 89, 0.5);
	opacity:  1;
}
:-ms-input-placeholder {
	color: rgba(33, 64, 89, 0.5);
}
:placeholder-shown {
	color: rgba(33, 64, 89, 0.5);
}

input + hr, textarea + hr {
	margin-top: 0;
}


.form-footer {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.form-footer input,
.form-footer a {
	width: auto;
	margin-left: 20px;
	margin-bottom: 10px;
}

.form-footer a {
	line-height: 45px;
}

a.cancel {
	cursor: pointer;
	text-decoration: underline;
}

.form-label {
	margin-bottom: 5px;
}

.required-label {
	display: inline-block;
	color: rgba(33, 64, 89, 0.5);
	font-weight: 500;
	background-color: rgba(33, 64, 89, 0.1);
	padding: 3px 5px 0 5px;
	line-height: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.input-wrapper {
	position: relative;
}

.check-badge {
	position: absolute;
	top: 13px;
	right: 13px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	display: block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-position: center center;
	background-repeat: no-repeat;
}

.check-badge[state-data="invalid"] {
	background-color: #ea533f;
	color: #fff;
	background-image: url(images/warning.svg);
}

.check-badge[state-data="valid"] {
	background-color: #5FA33E;
	color: #fff;
	background-image: url(images/check.svg);
}

.highlight {
	color: #ea533f;
}

.book-form .window {
	max-width: 700px;
}

.note {
	background-color: #eee7df;
	color: #877969;
	padding: 10px 10px 5px 10px;
	margin-bottom: 20px;
}

.note .note-label {
	text-decoration: underline;
}

/* ######################################################################################################### */
/* ###################################### PRIMARY CONTENT ELEMENTS ######################################### */
/* ######################################################################################################### */

#contents {
	position: relative;
	/*border-top: 5px solid #214059;
	margin-top: 10px;*/
}

/* ######################################################################################################### */

.section {
	position: relative;
	padding: 1px 30px 1px 30px;
}

.section > .inset {
	position: relative;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;
	padding: 30px 0;
}

.section > .inset:first-of-type {
	padding-top: 0;
}

.section.hr-top {
	border-top: 1px solid rgba(33, 64, 89, 0.1);
}

.section.hr-bottom {
	border-bottom: 1px solid rgba(33, 64, 89, 0.1);
}

/* ######################################################################################################### */

.speisekarten-section > .inset {
	max-width: 1000px;
}

/* ######################################################################################################### */

.image-divider {
	/*background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;*/
	height: 500px;
	background: transparent;
	/*background-attachment: fixed;*/
}

.schuppen-divider {
	height: 200px;
	background-repeat: repeat;
	background-position: top left;
	background-image: url(images/schuppen-pattern-2.png);
	background-color: #eee7df;
	background-attachment: fixed;
}

/* ######################################################################################################### */

.danke-box {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

/* ######################################################################################################### */

.column, .sidebar {
	margin: 30px 0;
}

.box {
	padding: 0;
}

.box.leftborder {
	padding: 0 0 0 30px;
	border-left: 1px solid rgba(33, 64, 89, 0.1);	
}

.box img {
	width: 100%;
	height: auto;
	margin: 30px 0;
}

img.halfleft {
	float: left;
	width: calc(50% - 15px);
	height: auto;
	margin: 30px 30px 30px 0;
}

img.halfright {
	float: right;
	width: calc(50% - 15px);
	height: auto;
	margin: 30px 0 30px 30px;
}

img.halfleft + img.halfright {
	margin: 30px 0 30px 0;
}

/**/

.sidebar:first-child h2,
.sidebar:first-child h3,
.sidebar:first-child h4,
.sidebar:first-child h5 {
	text-align: right;
}

.sidebar:first-child .s-icon {
	display: block;
	text-align: right;
	font-size: 5em;
	line-height: 1;
	margin: -10px 0 20px 0;
}

.s-icon + h2 {
	margin-top: 0px;
}

.imagebox {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	margin: 10px 7px !important;
	overflow: hidden;
	text-indent: -9999px;
	background-color: transparent;
}

.imagebox.imgb1 {
	background-image: url(images/illu-steinbutt.png);
	height: 310px;
}

.imagebox.imgb2 {
	background-image: url(images/illu-hummer.png);
	height: 350px;
}

.imagebox.imgb3 {
	background-image: url(images/illu-tea.png);
	height: 350px;
}

.imagebox.imgb4 {
	background-image: url(images/illu-wine.png);
	height: 555px;
	background-size: 250px 555px;
}

.box.dotted-border {
	padding: 10px;
	background-color: #214059;
	color: #fff;
}

.box.dotted-border > .inset {
	border: 2px dotted #fff;
	padding: 30px;
}

.box.dotted-border > .inset + .inset {
	border-top: none;
}

#speisekarte .box.dotted-border h3 {
	padding-bottom: 0;
}


.box.dotted-border h3 {
	display: block;
	margin: 0 0 30px 0;
	font-family: "BrandonPrinted-One";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 2.5em;
	position: relative;
}

#speisekarte .box.dotted-border .foodname, #speisekarte .box.dotted-border .variant-name {
	background-color: #214059;
	color: #fff;
	background-image: none;
}

#speisekarte .box.dotted-border ul li:not(.variants):after, #speisekarte .box.dotted-border .foodvariant:after {
	border-bottom: 2px dotted rgba(255, 255, 255, 0.5);
}

#speisekarte .box.dotted-border .foodprice {
	background-color: #214059;
	color: #fff;
	background-image: none;
}

.box.dotted-border hr {
	border-bottom: 2px dotted #fff;	
}

/* ######################################################################################################### */

.two-column > .inset > .columns {
	display: flex;
}

.two-column .column {
	width: 50%;
	/*float: left;*/
	padding: 0 30px 0 0;
}

.two-column .column:nth-child(2n) {
	/*float: right;*/
	padding: 0 0 0 30px;
}

.two-column.with-divider .column:nth-child(2n) {
	border-left: 1px solid rgba(33, 64, 89, 0.1);
}

/**/

.promo-title {
	position: relative;
	text-align: center;
	color: #fff;
	padding: 40px 30px;
	min-height: 500px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 0;
}

.two-column .column.promo-title {
	padding: 40px 30px;
}

.promo-title h4 {
	position: absolute;
	bottom: 40px;
	left: 20px;
	right: 20px;
}

.promobox {
	text-align: center;
	padding-top: 40px;
}

.window-button {
	cursor: pointer;
}

.promobox a.booknow {
	margin: 10px;
}

#adventmenus-title {
	max-width: 300px;
	height: auto;
	margin: 0;
}

#adventmenus-title ~ h4 {
	margin-top: 0;
}

.special-menus-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	
}

.special-menu {
	background-color: #f6f3ef;
	background-image: url(images/lightpaperfibers_sand.png);
	padding: 30px;
	width: 49%;
}

.special-menu:nth-child(2n) {
	margin: 1% 0 1% 1%;
}

.special-menu:nth-child(2n+1) {
	margin: 1% 1% 1% 0;
}

/* ######################################################################################################### */

.single-column-wrapper .column {
	position: relative;
	clear: both;
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
}

/* ######################################################################################################### */

.three-column {
}

.three-column .column {
	width: 33.333%;
	float: left;
	padding: 0 40px 0 0;
}

.three-column .column:nth-child(2n) {
	padding: 0 20px 0 20px;
}

.three-column .column:nth-child(3n) {
	float: right;
	padding: 0 0 0 40px;
}

.three-column.with-divider .column:nth-child(2n),
.three-column.with-divider .column:nth-child(3n) {
	border-left: 1px solid rgba(33, 64, 89, 0.1);
}

/* ######################################################################################################### */

.with-sidebar {
}

.with-sidebar .column {
	width: 66.666%;
}

.with-sidebar .sidebar {
	width: 33.333%;
}

/* floating of column and sidebar depends on their position */
.with-sidebar .column:nth-child(2n), .with-sidebar .sidebar:nth-child(2n) {
	float: right;
	padding: 0 0 0 30px;
}

.with-sidebar .column:nth-child(2n+1), .with-sidebar .sidebar:nth-child(2n+1) {
	float: left;
	padding: 0 30px 0 0;
}

/* ######################################################################################################### */

.bigicon {
	width: 100%;
	height: 200px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	text-indent: -9999px;
}

/* headlines directly after big icons are centered */
.bigicon + h2, .bigicon + h3, .bigicon + h4, .bigicon + h5, .bigicon + h6 {
	text-align: center;
	margin-top: 0.25em;
	margin-bottom: 1em;
}

/* ######################################################################################################### */

ul.bigiconlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.bigiconlist li {
	display: block;
	list-style: none;
	margin: 0;
	width: 100%;
	min-height: 140px;
	padding: 20px 0 20px 120px;
	background-position: left 15px;
	background-repeat: no-repeat;
}


/* ######################################################################################################### */


.section-title {
	position: relative;
	text-align: center;
	margin: 40px 0 0 0;
	padding: 0;
}

.section-title-2 {
	position: relative;
	text-align: center;
	margin: 40px 0 0 0;
}

/*.section-title:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100px;
	margin-left: -50px;
	height: 2px;
	background-color: #214059;
}*/

/* ######################################################################################################### */

.order-steps {
	position: relative;
}

.order-steps > div {
	position: relative;
	height: 150px;
	font-size: 2em;
	font-family: "BrandonPrinted-One", "BrandonTextWeb", Arial, sans-serif;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	text-align: center;
	padding: 53px 0 0 0;
	border-bottom: 3px double #214059;
	background-position: center center;
	background-repeat: no-repeat;
}

.order-steps > div.step-3 {
	border-bottom: none;
}

.step-1 {
	background-image: url(images/step-1.png);
}

.step-2 {
	background-image: url(images/step-2.png);
}

.step-3 {
	background-image: url(images/step-3.png);
}




/* ######################################################################################################### */
/* ######################################################################################################### */
/* ######################################################################################################### */

#speisekarte #speiseinfo #frischefische {
	max-width: 820px;
	margin: 70px auto;
}

/* ######################################################################################################### */

.infobox {
	padding: 30px;
	background-color: rgba(238, 231, 223, 0.5);
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers_sand.png);
}

.infobox h4 {
	text-align: center;
	margin-bottom: 20px;
}

/* ######################################################################################################### */

.infobox2 {
	display: block;
	border: 2px solid rgba(33, 64, 89, 0.2);
	padding: 30px;
	margin: 10px 0 30px 0;
}

/* ######################################################################################################### */

.starlinebox {
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-top: 15px !important;
}

.starlinebox:before {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	height: 30px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(images/starline1.png);
}

.starlinebox:after {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	height: 30px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(images/starline2.png);
}

.starlinebox h3 {
	font-family: "BrandonPrinted-Inline";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 2.5em;
}

/* ######################################################################################################### */

.framebox, .hangframebox {
	position: relative;
	z-index: 1;
	padding: 30px;
	border: 1px solid #214059;
	margin: 3px;
}

.hangframebox {
	border: 2px solid #214059;
	margin: 5px;
}

.hangframebox:before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: -60px;
	width: 250px;
	height: 55px;
	left: 50%;
	margin-left: -125px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 250px 55px;
	background-image: url(images/hang.png);
}

.framebox:after, .hangframebox:after {
	display: block;
	content: "";
	position: absolute;
	z-index: -1;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border: 2px solid #214059;
}

.hangframebox:after {
	top: -6px;
	left: -6px;
	right: -6px;
	bottom: -6px;
}

.hangframebox h3 {
	font-family: "BrandonPrinted-One";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 2.5em;
}

/* ######################################################################################################### */

.classicsbox {
	background-color: #214059;
	color: #fff;
	padding: 3px;
	position: relative;
}

.classicsbox .corner-ul,
.classicsbox .corner-ur,
.classicsbox .corner-ll,
.classicsbox .corner-lr {
	display: block;
	width: 18px;
	height: 18px;
	background-size: 18px 18px;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 10;
	overflow: hidden;
	text-indent: -9999px;
}

.classicsbox .corner-ul {
	top: 0;
	left: 0;
	background-image: url(images/classics-corner-ul.gif);
}

.classicsbox .corner-ur {
	top: 0;
	right: 0;
	background-image: url(images/classics-corner-ur.gif);
}

.classicsbox .corner-lr {
	bottom: 0;
	right: 0;
	background-image: url(images/classics-corner-lr.gif);
}

.classicsbox .corner-ll {
	bottom: 0;
	left: 0;
	background-image: url(images/classics-corner-ll.gif);
}



.classicsbox > .inset {
	border: 2px solid #fff;
	padding: 30px;
}

.classicsbox h3 {
	font-family: "BrandonPrinted-One";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 2.5em;
}

/* ######################################################################################################### */

.saladsbox h3 {
	background-color: #214059;
	color: #fff;
	display: block;
	padding: 4px 50px 3px 50px !important;
	margin: 0 0 10px 0;
	font-family: "BrandonPrinted-Inline";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 2.5em;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(images/dirt-bg-1.gif);
	background-size: 408px 52px;
	position: relative;
}

.saladsbox h3:before,
.saladsbox h3:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	background-position: center center;
	background-repeat: repeat-x;
}

.saladsbox h3:before {
	top: 0;
	background-image: url(images/dirt-top.gif);
	background-size: 490px 4px;
}

.saladsbox h3:after {
	bottom: 0;
	background-image: url(images/dirt-bottom.gif);
	background-size: 490px 4px;
}

.saladsbox h3 span {
	display: block;
}

.saladsbox h3 span:before,
.saladsbox h3 span:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	height: 60px;
	margin-top: -30px;
	background-position: center center;
	background-repeat: repeat-x;
}

.saladsbox h3 span:before {
	left: 0;
	width: 31px;
	background-image: url(images/dirt-left.gif);
	background-size: 31px 55px;
}

.saladsbox h3 span:after {
	right: 0;
	width: 34px;
	background-image: url(images/dirt-right.gif);
	background-size: 34px 56px;
}

/* ######################################################################################################### */


.sweetsbox h3 {
	display: block;
	padding: 7px 50px 7px 50px !important;
	margin: 0 0 30px 0;
	font-family: "BrandonPrinted-Inline";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 2.5em;
	position: relative;
}

.sweetsbox h3:before,
.sweetsbox h3:after {
	content: "";
	display: block;
	width: 200px;
	height: 4px;
	background-color: #214059;
	position: absolute;
	z-index: 10;
	left: 50%;
	margin-left: -100px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(images/dirt-bg-2.gif);
	background-size: 200px 10px;
}

.sweetsbox h3:before {
	top: 0;
	background-position: center top;
}

.sweetsbox h3:after {
	bottom: 0;
	background-position: center bottom;
}

/* ######################################################################################################### */

.kidsbox h3 {
	display: block;
	padding: 7px 50px 7px 50px !important;
	margin: 0 0 30px 0;
	font-family: "BrandonPrinted-Two";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 2.5em;
	position: relative;
}

/* ######################################################################################################### */

.coffeebox h3 {
	display: block;
	padding: 7px 50px 7px 50px !important;
	margin: 0 0 30px 0;
	font-family: "BrandonPrinted-Two";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 2.5em;
	position: relative;
}

/* ######################################################################################################### */

.aperitifsbox h3 {
	display: block;
	padding: 7px 50px 7px 50px !important;
	margin: 0 0 30px 0;
	font-family: "BrandonPrinted-Two";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 2.5em;
	position: relative;
}

/* ######################################################################################################### */

.skewbox {
	-webkit-transform: skew(0deg, -6deg);
	-moz-transform: skew(0deg, -6deg);
	-o-transform: skew(0deg, -6deg);
	-ms-transform: skew(0deg, -6deg);
	transform: skew(0deg, -6deg);
}

.skewbox.framebox {
	/*background-color: #fff;*/
}

/* ######################################################################################################### */

#menu-note-1 {
	display: inline-block;
	-webkit-transform: skew(0deg, -6deg);
	-moz-transform: skew(0deg, -6deg);
	-o-transform: skew(0deg, -6deg);
	-ms-transform: skew(0deg, -6deg);
	transform: skew(0deg, -6deg);
	padding: 8px 12px 5px 12px;
	border: 2px solid rgba(33, 64, 89, 0.15);
	
}

/* ######################################################################################################### */

.boxwrapper {
	position: relative;
}

.bannerflag-top, .bannerflag-bottom,
.bannerflag2-top, .bannerflag2-bottom {
	-webkit-transform: skew(0deg, 6deg);
	-moz-transform: skew(0deg, 6deg);
	-o-transform: skew(0deg, 6deg);
	-ms-transform: skew(0deg, 6deg);
	transform: skew(0deg, 6deg);
}

.bannerflag-top hr, .bannerflag-bottom hr {
	display: none;
	background-color: #214059;
	height: 2px;
}

.bannerflag-top {
	display: block;
	position: absolute;
	z-index: 1;
	top: -12px;
	right: -4px;
	background-color: transparent;
	width: 150px;
	height: 18px;
	border-width: 2px;
	border-style: solid;
	border-color: #214059 transparent transparent #214059;
}

.bannerflag-top:after {
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	width: 130px;
	height: 14px;
	border-width: 1px;
	border-style: solid;
	border-color: #214059 transparent transparent #214059;
}

.bannerflag-bottom {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: -12px;
	left: -4px;
	background-color: transparent;
	width: 150px;
	height: 18px;
	border-width: 2px;
	border-style: solid;
	border-color:  transparent #214059 #214059 transparent;
}

.bannerflag-bottom:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 130px;
	height: 14px;
	border-width: 1px;
	border-style: solid;
	border-color:  transparent #214059 #214059 transparent;
}

/**/

.hangbox {
	position: relative;
	background-color: #214059;
	color: #fff;
	padding: 7px;
	margin: 0;
}

.hangbox > .inset {
	background-color: #214059;
	border: 2px solid #fff;
	padding: 20px;
}

/**/

.bannerflag2-top {
	display: block;
	position: absolute;
	z-index: -10;
	top: -10px;
	right: 0px;
	background-color: #214059;
	width: 170px;
	height: 28px;
	padding: 7px;
}

.bannerflag2-bottom {
	display: block;
	position: absolute;
	z-index: -10;
	bottom: -10px;
	left: 0px;
	background-color: #214059;
	width: 170px;
	height: 28px;
	padding: 7px;
}

/**/

.patternbox {
	padding: 30px;
	border: 2px solid #214059;
	background-repeat: repeat;
	background-position: top left;
	background-image: url(images/schuppen-pattern-2.png);
}

/**/

.simplebox {
	padding: 30px;
	border: 2px solid #214059;
}


/* ######################################################################################################### */
/* #################################### INDIVIDUAL CONTENT ELEMENTS ######################################## */
/* ######################################################################################################### */

#title {
	padding-top: 20px;
	text-align: center;
	background-position: center -20px;
	background-repeat: no-repeat;
	background-image: url(images/illu-garnele.png);
}

#title p {
	margin: 30px 0;
}

#title .column {
	width: 100%;
	max-width: 700px;
	margin: 40px auto;
}

#title h2 {
	/*font-family: "BrandonTextWeb", Arial, sans-serif;
	font-weight: 400;*/
	font-size: 2em;
    margin: 1.250em 0 0.25em 0;
    line-height: 1.3;
    font-family: "BrandonPrinted-One", "BrandonTextWeb", Arial, sans-serif;
    font-weight: normal;
    font-variant: normal;
    font-style: normal;
}

#news {
	background-color: rgba(238, 231, 223, 0.5);
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers.png);
}

.news-item h3 {
	margin: 0;
}

.news-item h4 {
	margin: 0 0 20px 0;
}

.news-item-date {
	position: relative;
	margin-bottom: 20px;
}

.news-item-date:after {
	content: "";
	display: block;
	width: 50px;
	height: 2px;
	background-color: rgba(33, 64, 89, 0.25);
	position: absolute;
	bottom: -10px;
	left: 0;
}


/* ######################################################################################################### */

#stage-box {
	position: absolute;
	z-index: 500;
	top: 20px;
	right: 120px;
	background-color: #fff;
	text-shadow: none;
	color: #214059;
	padding: 3px;
	width: 20%;
	background-image: url(images/lightpaperfibers.png);
	font-size: 0.75em;
	line-height: 1.5;
}

#stage-box > .inset {
	padding: 18px;
	border: 2px solid rgba(33, 64, 89, 0.5);
}

#stage-box h2 {
	font-family: "BrandonPrintedTwo-Shadow";
	font-size: 2.5em;
	margin: 0 0 10px 0;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
}

#stage-box span {
	white-space: nowrap;
	margin: 0;
}

.handpoint {
	display: block;
	position: relative;
	padding: 0 30px;
	font-weight: 600;
	margin: 0 0 20px 0;
}

.handpoint:before {
	content: ">";
	display: block;
	position: absolute;
	top: 50%;
	left: -20px;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	line-height: 40px;
	text-align: center;
	font-family: "BrandonPrinted-Extras";
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	font-size: 3em;
}

.handpoint:after {
	content: "<";
	display: block;
	position: absolute;
	top: 50%;
	right: -20px;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	line-height: 40px;
	text-align: center;
	font-family: "BrandonPrinted-Extras";
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	font-size: 3em;
}

.boxpoint {
	display: block;
	position: relative;
	padding: 15px;
	background-color: #f6f3ef;
	margin: 20px 0 0 0;
	background-image: url(images/lightpaperfibers_sand.png);
}

.boxpoint:before,
.boxpoint:after,
.boxpoint > div:before,
.boxpoint > div:after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	position: absolute;
	background-image: url(images/lightpaperfibers.png);
}

.boxpoint:before {
	top: -10px;
	left: -10px;
}

.boxpoint:after {
	top: -10px;
	right: -10px;
}

.boxpoint > div:before {
	bottom: -10px;
	left: -10px;
}

.boxpoint > div:after {
	bottom: -10px;
	right: -10px;
}




/* ######################################################################################################### */


#speisekarte {
	padding-top: 20px;
}

#speisekarte .box {
	margin: 70px 7px;
}

#speisekarte .box:first-of-type {
	margin-top: 37px;
}

#speisekarte #speiseinfo .box:first-of-type {
	margin-top: 70px;
}
	
#speisekarte .box .section-title-2 {
	margin: 0;
}

#speisekarte .box .section-title-2 h3 {
	margin: 5px 0 0 0;
	padding: 0;
	font-family: "BrandonPrintedTwo-Shadow";
	font-size: 4em;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
}

#speisekarte .box .section-title-2 h4 {
	margin: 0;
	padding: 0;
}

#speisekarte ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#speisekarte ul li {
	position: relative;
	margin: 0 0 20px 0;
	padding: 0 30px 0 0;
}

#speisekarte ul li.variants {
	padding: 0;
}

#speisekarte ul li:not(.variants):after,
#speisekarte .foodvariant:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	bottom: 9px;
	height: 2px;
	border-bottom: 2px dotted rgba(33, 64, 89, 0.5);
}

#speisekarte .foodname,
#speisekarte .variant-name {
	position: relative;
	z-index: 1;
	display: inline;
	background-color: #fefefc;
	padding-right: 5px;
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers.png);
}

#speisekarte .foodprice {
	position: absolute;
	z-index: 1;
	display: inline-block;
	background-color: #fefefc;
	padding-left: 5px;
	bottom: 0;
	right: 0;
	width: auto;
	text-align: right;
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers.png);
}

#speisekarte .foodvariant {
	position: relative;
	margin-left: 30px;
}

#speisekarte .hangbox .foodname,
#speisekarte .hangbox .foodprice,
#speisekarte .classicsbox .foodname,
#speisekarte .classicsbox .foodprice {
	background-color: #214059;
	background-image: none;
}

#speisekarte .hangbox ul li:after,
#speisekarte .classicsbox ul li:after {
	border-bottom: 2px dotted rgba(255, 255, 255, 0.5);
}

/**/

#speisekarte .box h3 {
	text-align: center;
	padding-bottom: 20px;
}

#speiseinfo .column {
	/*width: 100%;
	max-width: 600px;*/
	margin: 30px auto;
	text-align: center;
}

.infosection {
	position: relative;
	width: 26%;
	float: left;
	text-align: center;
	margin: 20px 5.5% 20px 5.5%;
}

.infosection:nth-child(3n) { /* last in row */
	margin: 20px 0 20px 5.5%;
}

.infosection:nth-child(3n+1) { /* first in row */
	margin: 20px 5.5% 20px 0;
}

.infosection:before,
.infosection:after {
	content: "•";
	display: block;
}

.infosections {
	position: relative;
	padding-top: 30px;
}

.infosections:before,
.infosections:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 50px;
	bottom: 50px;
	width: 1px;
	background-color: #214059;
	
}

.infosections:before {
	left: 31.5%;
}

.infosections:after {
	right: 31.5%;
}

/* ######################################################################################################### */

.wine-section-headline,
.wine-sub-category {
	text-align: center;
	display: block;
	position: relative;
}

.wine-section-headline:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #214059;
	z-index: -1;
	margin-top: -2px;
}

.wine-sub-category:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #ea533f;
	z-index: -1;
	margin-top: -2px;
}

.wine-sub-category span,
.wine-section-headline span {
	display: inline-block;
	background-color: #fefefc;
	padding: 0 10px;
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers.png);
}

	


/* ######################################################################################################### */

#shop {
	/**/
}


/* ######################################################################################################### */

#kontakt {
	padding-top: 1px;
	background-color: #eee7df;
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers_sand.png);
}

#kontakt .contact-book {
	background-color: #fff;
	text-align: center;
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers.png);
}

#kontakt .contact-book > .inset {
	padding-top: 0;
}

/* ######################################################################################################### */

.expandable-section-wrapper {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	border-top: 2px solid rgba(33, 64, 89, 0.1);
}

#menu-navigation > .inset {
	position: relative;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;
}

#menu-navigation .expandable-section-title {
	position: relative;
	float: left;
	width: 50%; /*25%*/
	border-top: 2px solid rgba(33, 64, 89, 0.1);
	border-left: 2px solid rgba(33, 64, 89, 0.1);
	border-right: 2px solid rgba(33, 64, 89, 0.1);
	padding: 1px;
}

#menu-navigation .expandable-section-title.collapsed {
	border-top: 2px solid rgba(33, 64, 89, 0);
	border-left: 2px solid rgba(33, 64, 89, 0);
	border-right: 2px solid rgba(33, 64, 89, 0);
}

.expandable-section-title {
	/*cursor: pointer;*/
	position: relative;
	
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */ 
}

.expandable-section-title a {
	display: block;
	padding: 15px 0 10px 0;
	color: #214059;
	text-decoration: none;
}

/*.expandable-section-title:hover,*/
.expandable-section-title a:hover {
	color: #ea533f;
}

.expandable-section-title .inset {
	position: relative;
	padding-bottom: 60px;
}

.expandable-section-title:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 10;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #FBFAF8;
	background-position: center top;
	background-repeat: repeat;
	background-image: url(images/lightpaperfibers.png);
}

.expandable-section-title.collapsed:after {
	display: none;
}



.expandable-section-title .inset:after {
	content: "I";
	display: block;
	font-family: "seaside_iconsvintage";
	position: absolute;
	left: 50%;
	bottom: -15px;
	margin-left: -30px;
	font-size: 60px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.expandable-section-title.collapsed .inset:after {
	content: "O";
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	bottom: 10px;
}

.expandable-section-title h2 {
	font-size: 1.5em;
	text-align: center;
	margin: 0;
	padding: 80px 0 0 0;
}

.expandable-section-title .inset h2:before {
	content: "";
	display: block;
	font-family: "seaside_iconsvintage";
	font-size: 60px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -30px;
	text-align: center;
}

.expandable-section.collapsed {
	display: none;
	border-top: 2px solid rgba(33, 64, 89, 0);
}

.expandable-section {
	border-top: 2px solid rgba(33, 64, 89, 0.1);
}



/* ######################################################################################################### */

.expandable-section-title[data-expand-trigger="speisen"] .inset h2:before {
	content: "1";
}

.expandable-section-title[data-expand-trigger="lunch"] .inset h2:before {
	content: "(";
}

.expandable-section-title[data-expand-trigger="drinks"] .inset h2:before {
	content: ")";
}

.expandable-section-title[data-expand-trigger="wine"] .inset h2:before {
	content: "Q";
}

/* ######################################################################################################### */

/*.gallery-item {
	width: 30%;
	height: 200px;
	margin: 0 5% 5% 0;
	float: left;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.gallery-item:nth-child(3n) {
	margin: 0 0 5% 0;
}*/

#gallery {
	position: relative;
}


.slide-item {
	height: 500px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: #f6f3ef;
}

.unslider-arrow {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	height: auto;
	line-height: 50px;
	z-index: 100;
	font-family: "seaside_iconsvintage";
	font-size: 100px;
	color: #fff;
}

.unslider-arrow span {
	display: block;
	position: absolute;
	height: 100px;
	top: 50%;
	margin-top: -50px;
}

.unslider-arrow.next {
	right: 0px !important;
}

.unslider-arrow.prev {
	left: 0px !important;
}

.unslider-arrow.next span {
	right: 10px;
	text-align: right;
}

.unslider-arrow.prev span {
	left: 10px;
	text-align: left;
}

.unslider-nav {
	display: none;
}

#gallery-badge {
	width: 300px;
	height: 200px;
	background-size: 300px 200px;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: -9999px;
	background-image: url(images/gallery-badge.png);
	position: absolute;
	z-index: 100;
	top: 30px;
	left: 50%;
	margin-left: -150px;
}

/* ######################################################################################################### */

.address-block {
	text-align: center;
}

/* ######################################################################################################### */

#job-positions-list {

}

.job-position-overview-item {
	margin: 0;
	padding: 25px 0 5px 0;
	border-top: 2px solid #f6f3ef;
}

.job-position-overview-item:last-of-type {
	border-bottom: 2px solid #f6f3ef;
}

a.jobinfos-button {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	margin-right: 10px;
}

a.jobapply-button {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	margin-left: 10px;
	padding: 3px 10px 0px 10px;
	border: 2px solid #ea533f;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

a.abbrechen-button {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	margin-right: 10px;
}

/* ######################################################################################################### */

.window-wrapper {
	display: none;
	background-color: rgba(33, 64, 89, 0.9);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	overflow-y: auto;
}

.window-wrapper.active {
	display: block;
}

.window {
	background-color: #fff;
	padding: 40px;
	position: relative;
	margin: 5% auto;
	width: 90%;
	max-width: 1000px;
}

.close-window {
	cursor: pointer;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	font-size: 50px;
	line-height: 50px;
	text-align: center;
	font-family: "seaside_iconsvintage";
	font-size: 5em;
	speak: none;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	
}

/* ######################################################################################################### */

#lageplan {
	display: block;
	text-decoration: none;
	margin: 30px 0 0 0;
	height: 875px;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 997px 941px;
	background-image: url(images/seaside-map.png);
}

.google-maps-button {
	display: inline-block;
	text-decoration: none;
	background-color: rgba(234, 83, 63, 0.1);
	padding: 6px 8px 3px 8px;
	line-height: 1;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/* ######################################################################################################### */

#substage {
	background-color: #214059;
	color: #fff;
	min-height: 300px;
	padding-top: 90px;
}

/* ######################################################################################################### */

.beer-badge {
	display: block;
	text-align: center;
	width: 200px;
	height: 76px;
	margin: 0 auto;
	margin-bottom: 40px;
	color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(images/beer-badge-bg.png);
	background-size: 200px 76px;
	line-height: 76px;
	font-family: "BrandonPrinted-One";
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-size: 2.5em;
}

/* ######################################################################################################### */
/* ########################################### MEDIA QUERIES ############################################### */
/* ######################################################################################################### */

/* ############################################ */
/* ######## HIGH RESOLUTION DISPLAYS: ######### */
/* ############################################ */

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
	
	#logo {
		background-image: url(images/seaside-logo-1-2x.jpg);
		background-size: 170px 70px;
	}
	
	#stage-logo {
		background-image: url(images/seaside-logo-2-2x.jpg);
		background-size: 350px 350px;
	}
	
	#title {
		background-image: url(images/illu-garnele-2x.jpg);
		background-size: 500px 333px;
	}

	.step-1 {
		background-image: url(images/step-1-2x.jpg);
		background-size: 150px 150px;
	}
	
	.step-2 {
		background-image: url(images/step-2-2x.jpg);
		background-size: 150px 150px;
	}
	
	.step-3 {
		background-image: url(images/step-3-2x.jpg);
		background-size: 150px 150px;
	}
	
	.hangframebox:before {
		background-image: url(images/hang-2x.jpg);
	}
	
	#lageplan {
		background-image: url(images/seaside-map-2x.jpg);
	}
	
	.classicsbox .corner-ul {
		background-image: url(images/classics-corner-ul-2x.jpg);
	}
	
	.classicsbox .corner-ur {
		background-image: url(images/classics-corner-ur-2x.jpg);
	}
	
	.classicsbox .corner-lr {
		background-image: url(images/classics-corner-lr-2x.jpg);
	}
	
	.classicsbox .corner-ll {
		background-image: url(images/classics-corner-ll-2x.jpg);
	}
	
	.saladsbox h3 {
		background-image: url(images/dirt-bg-1-2x.jpg);
	}

	.saladsbox h3:before {
		background-image: url(images/dirt-top-2x.jpg);
	}
	
	.saladsbox h3:after {
		background-image: url(images/dirt-bottom-2x.jpg);
	}

	.saladsbox h3 span:before {
		background-image: url(images/dirt-left-2x.jpg);
	}
	
	.saladsbox h3 span:after {
		background-image: url(images/dirt-right-2x.jpg);
	}
	
	.sweetsbox h3:before,
	.sweetsbox h3:after {
		background-image: url(images/dirt-bg-2-2x.jpg);
	}
	
	#gallery-badge {
		background-image: url(images/gallery-badge-2x.jpg);
	}
	
	.beer-badge {
		background-image: url(images/beer-badge-bg-2x.jpg);
	}

	#facebook-link {
		background-image: url(images/si-facebook-2x.jpg);
	}
	
	#instagram-link {
		background-image: url(images/si-instagram-2x.jpg);
	}
	
	body,
	#kontakt .contact-book,
	.boxpoint:before,
	.boxpoint:after,
	.boxpoint > div:before,
	.boxpoint > div:after,
	#news,
	#stage-box {
		background-image: url(images/lightpaperfibers_-2X.jpg);
		background-size: 500px 300px;		
	}
	
	#primary-navigation,
	.infobox,
	#kontakt,
	.boxpoint {
		background-image: url(images/lightpaperfibers_sand_-2X.jpg);
		background-size: 500px 300px;
	}
	
}

/* ############################################ */
/* ############# VIEWPORT SIZES: ############## */
/* ############################################ */

@media only screen and (max-width: 1100px) {
	
	/* ######################################################################################################### */
	
	#logobox {
		position: relative;
		top: 0 !important;
		left: 0 !important;
		margin: 100px 0 0 0;
		width: 60%;
		float: left;
	}
	
	#stage-contents-wrapper {
		margin: 0 70px;
	}

}

@media only screen and (max-width: 1000px) {

	/* ######################################################################################################### */
	
	#language-switch {
		display: none;
	}
	
	#burger-button,
	#primary-navigation #burger-button {
		display: block;
	}
	
	#primary-navigation #primary-menu ul li,
	#primary-stage-menu,
	#menu-stage hr {
		position: absolute;
		visibility: hidden;
	}
	
	#primary-navigation #primary-menu ul:last-of-type li:last-of-type {
		display: inline;
	}
	
	body.menu #mobile-menu-wrapper {
		display: block;
	}
	
	#primary-navigation > .inset, #stage-nav {
		text-align: left;
		padding-right: 100px;
	}
	
	#stage-box > .inset {
		padding: 13px;
	}
	
	#stage-box h2 {
		font-size: 2em;
	}
	
	
	/*#logobox {
		left: 0;
		margin-left: 50px;
	}*/
	
	/* ######################################################################################################### */
	
	.expandable-section-title h2 {
		font-size: 1.25em;	
	}
	
	body.scrolled #logo,
	body.menu #logo,
	body.subpage #logo {
		margin-left: 0;
	}

}


@media only screen and (max-width: 900px) {
	
	.skewbox {
		margin: 60px 3px;
	}
	
	.speisekarten-section > .inset {
		max-width: 500px;
	}
	
	/**/
	
	.two-column > .inset > .columns {
		display: block;
	}
	
	.two-column .column {
		width: 100%;
		float: none;
		padding: 0;
	}
	
	.two-column .column:nth-child(2n) {
		float: none;
		padding: 0;
	}
	
	.two-column.with-divider .column:nth-child(2n) {
		border-left: none;
		border-top: 1px solid rgba(33, 64, 89, 0.1);
	}
	
	/* ################################## */
	
	.three-column .column {
		width: 100%;
		float: none;
		padding: 0;
	}
	
	.three-column .column:nth-child(2n) {
		padding: 0;
	}
	
	.three-column .column:nth-child(3n) {
		float: none;
		padding: 0;
	}

	.three-column.with-divider .column:nth-child(2n),
	.three-column.with-divider .column:nth-child(3n) {
		border-left: none;
		border-top: 1px solid rgba(33, 64, 89, 0.1);
	}
	
	/* ################################## */
	
	.with-sidebar .column, .with-sidebar .sidebar, .with-sidebar .column:nth-child(2n), .with-sidebar .sidebar:nth-child(2n), .with-sidebar .column:nth-child(2n+1), .with-sidebar .sidebar:nth-child(2n+1) {
		width: 100%;
		float: none;
		padding: 0;
	}
	
	/* ################################## */
	
	#speisekarte .box .section-title-2 h3 {
		font-size: 3em;
	}
	
}


@media only screen and (max-width: 800px) {
	
	.expandable-section-title h2 {
		font-size: 1em;	
	}
	
	/* ######################################################################################################### */
	
	/*#logo {
		width: 170px;
		filter: alpha(opacity=100);
		opacity: 1;
		margin: 0 30px 0 0;
	}*/
	
	#stage-box {
		position: relative;
		top: 0 !important;
		left: 0 !important;	
		margin: 0 20% 20px 20%;
		width: auto;
	}	
	
	
	#logobox {
		width: 100%;
		float: none;
	}
	
	#stage-contents-wrapper {
		margin: 0;
	}
	
	/* ######################################################################################################### */
	
	#lageplan {
		height: 600px;
		background-size: auto 700px;
	}
	
}


@media only screen and (max-width: 650px) {

	/*#menu-navigation .expandable-section-title {
		width: 50%;
	}*/
	
	/* ################################## */
	
	#speisekarte .box .section-title-2 h3 {
		font-size: 2.5em;
	}
	
}

@media only screen and (max-width: 600px) {
		
	#primary-navigation > .inset, #stage-nav {
		padding-right: 50px;
	}
	
	/* ################################## */
	
	#speisekarte .box .section-title-2 h3 {
		font-size: 2.25em;
	}
	
	/* ################################## */
	
	#stage-nav {
		display: none;
	}
	
	#stage-burger-button {
		display: block;
	}
	
	.special-menu {
		width: 100%;
	}

	.special-menu:nth-child(2n),
	.special-menu:nth-child(2n+1) {
		margin: 1% 0;
	}

}



@media only screen and (max-width: 500px) {

	ul.bigiconlist li {
		padding: 120px 0 20px 0;
		background-position: center top;
	}
	
	#primary-navigation #primary-menu ul:last-of-type li:last-of-type {
		display: none;
	}
	
	/* ################################## */
	
	#speisekarte .box .section-title-2 h3 {
		font-size: 1.75em;
	}
	
	.expandable-section-title h2 {
		position: relative;
		display: block;
		height: 260px;
		padding-top: 0;
		text-align: left;
	}
	
	.expandable-section-title h2 span {
		display: block;
		position: absolute;
		text-align: center;
		top: 170px;
		left: 0;
		right: 0;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	
	#menucard-button-lunch.expandable-section-title h2 span {
		top: 145px;
	}
	
	.expandable-section-title h2:before {
	}
	
	#stage-logo {
		width: 300px;
		height: 300px;
		background-size: cover;
	}
	
	/* ######################################################################################################### */
	
	#lageplan {
		height: 500px;
		background-size: auto 600px;
	}
	
	#stage-box {
		margin: 0 5% 20px 5%;
	}

}



@media only screen and (max-height: 800px) {

	#primary-navigation {
		line-height: 60px;
		height: 63px;
		top: -63px;
	}
	
	#current-stuff-navigation-sticky {
		top: 65px;
	}
	
	#primary-stage-menu ul li a {
		line-height: 60px;
		height: 60px;
	}
	
	
	#primary-menu ul li a, #stage-nav ul li a {
		height: 60px;
	}
	
	#primary-menu ul li.bookonline a, #stage-nav ul li.bookonline a,
	#primary-stage-menu ul li.bookonline a {
		margin: 13px 0 0 20px;
	}
	
	#logo {
		height: 60px;
		background-size: 120px auto;
	}
	
	body.scrolled #logo,
	body.menu #logo,
	body.subpage #logo {
		width: 120px;
	}
	
	#primary-navigation #burger-button, #stage-burger-button {
		top: 10px;
	}
	
	#mobile-menu-wrapper {
		top: 60px;
	}
	
}


@media only screen and (max-height: 600px) {
	
	#gallery-badge {
	    top: -20px;
	}	
	
}