/**
 * @file
 * Styles are organized using the SMACSS technique. @see http://smacss.com/book/
 *
 * When you turn on CSS aggregation at admin/config/development/performance, all
 * of these @include files will be combined into a single file.
 */

/* HTML element (SMACSS base) rules */
@import "normalize.css";

/* Layout rules */
/*@import "layouts/responsive.css";*/

/* Component (SMACSS module) rules */
@import "components/misc.css";
/* Optionally, add your own components here. */
@import "print.css";

/* SMACSS theme rules */
/* @import "theme-A.css"; */
/* @import "theme-B.css"; */

#admin-menu {opacity: 0.9; transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s;} #admin-menu:not(:hover) {opacity: 0;}
html body.admin-menu {margin-top: 0 !important;}


a {color: #CCCCCC;} a:hover {color: #FFFFCC;}

body, #header {width: 100%; background: #996666 url("background_1600w.jpg") bottom left no-repeat;}

body {
	background-attachment: fixed !important;
	margin: 0;
	font-family: Verdana; color: white;
}

#header, nav {position: fixed;} #header, nav > section {padding: 0 !important;}
#header {
	min-height: 100%;
	clip: rect(auto, auto, 150px, auto); /* +30px to handle padding+margin-top of main section */
	background: #996666 url("background_1600w.jpg") bottom left no-repeat;
	z-index: 90;
}
#header-inner {
	background-color: rgba(66,66,66,0.6);
	width: 100%; height: 120px;
}
#header-logo {float: left;}
#header .region-header {
	position: absolute; top: 0;
	width: 100%;
	padding: 0 20px; box-sizing: border-box;
	text-align: right;
}
.social-icons {padding-top: 15px; padding-bottom: 5px;} 
.social-icons > a {margin-left: 10px; opacity: 0.9;} .social-icons > a:hover {opacity: 1;}

nav {
	background-color: rgba(0,0,0,0.6);
	width: 200px;
	top: 120px;
	min-height: 100%;
	z-index: 100;
}
nav ul.menu {list-style: none; padding: 0;}
nav ul.menu li a {
	display: block; margin: 0; width: 175px; padding: 0.5em 20px;
	border-top-right-radius: 20px; border-bottom-right-radius: 20px;
	color: white !important; text-decoration: none;
	transition: padding-right 0.1s;
		-o-transition: padding-right 0.1s;
		-moz-transition: padding-right 0.1s;
		-webkit-transition: padding-right 0.1s;
}
nav ul.menu li a:hover, nav ul.menu li a.active {color: #FFFF66 !important; background: rgba(33,33,33,0.8);}
nav ul.menu li a:hover {padding-right: 30px;} 
nav .cert {
	position: absolute;
	left: 24px; bottom: 144px;
}

.cert {display: block; width: 152px; height: 124px; background: green;}


article {
	/*position: absolute;*/ margin-left: 200px; /*top: 120px;*/
	padding: 10px; padding-top: 130px;
	min-height: calc(100% - 160px);
}
@media screen and (max-width: 1149px) {article {position: absolute;}}
#back-to-top {
	position: fixed; z-index: 100;
	height: 11px; top: 124px;
	margin-left: 50%; width: 80px; left: 80px; /*120 - half of 80*/
	text-align: center;
	background-color: #666666; opacity: 0.8;
	border-top-left-radius: 10px; border-top-right-radius: 10px; 
	border: 1px solid #6C6C6C; border-right-color: #606060; border-bottom: 11px solid #606060;
	display: none;
}
#back-to-top:hover {opacity: 1; background-color: #999933;
 border-color: #9F9F39; border-right-color: #93932D; border-bottom-color: #93932D;}
#back-to-top:hover:active {background-color: #888822; border-color: #888822;}
#back-to-top:before { /* Up arrow */
	content: "";
	display: inline-block; width: 0; height: 0;
	position: relative; top: -4px;
	border: 8px solid transparent; border-bottom-color: white;
}

article section {
	background-color: rgba(0,0,0,0.75);
	border-radius: 1em;
	padding: 2em;
	margin: 20px;
	text-align: center;
}

article section > p, article section > .field-text > p {text-align: left; margin: 1em 0;}
article section > p:first-of-type, article section > .field-text > p:first-of-type {margin-top: 0;}
article section > p:last-of-type, article section > .field-text > p:last-of-type {margin-bottom: 0;}
article section > .field-text > ul {text-align: left;}

footer, footer * {margin: 0 !important;}

.float-left {float: left; margin-right: 1em; margin-bottom: 1em;}
.float-right {float: right; margin-left: 1em; margin-bottom: 1em;}
.invisible {visibility: hidden;}

.flex-wrapper {display: flex; align-items: flex-start; flex-wrap: wrap;}
.flex-wrapper .flex-section-1 {flex-grow: 10; width: 320px !important; align-self: stretch;}
.flex-wrapper .flex-section-1-2 {margin-top: 40px;}
.flex-wrapper .flex-section-2 {flex-grow: 1; text-align: center;}

.flex-wrapper:nth-of-type(2n) {flex-direction: row-reverse;}

/* Specific pages */

.homepage-contact-numbers h3.field-label,
  .homepage-contact-numbers h3.field-label + div {font-size: 100%; display: inline;}
.homepage-contact-numbers h3.field-label + div:after {content: ""; display: block;}


.field-menu-sections > .field-section-name {margin-top: 0; margin-bottom: 1.5em; color: #FFFF99; font-variant-caps: small-caps;}
.field-menu-sections > .field-section-name:before, .field-menu-sections > .field-section-name:after {content: "=";}
.field-menu-sections .field-items {padding: 2em 0; border-bottom: 1em dotted rgba(120,120,120,0.8);}
.field-menu-sections .field-items:first-of-type {padding-top: 0;}
.field-menu-sections .field-items:last-of-type {padding-bottom: 0; border: none;}
.field-menu-sections .field-preface {padding-bottom: 2em;} .field-menu-sections .field-postface {padding-top: 2em;}
.field-menu-sections .field-section-name + .field-postface {padding-top: 0;} /* Collapse if there are no items in-between */

.node-menu-item {position: relative;}
.node-menu-item header * {display: inline; font-size: 110%;}
.node-menu-item h4 {font-style: italic; font-weight: normal;}
.node-menu-item .field-image {float: left; margin-right: 1em; margin-bottom: 1em;}
.field-image img {border-radius: 20px; border: 2px solid transparent;} .field-image img:hover {border-color: white;}
.node-menu-item .field-price {
	text-align: right; float: right;
	font-size: large; font-weight: bold;
	margin-left: 2em; margin-bottom: 1em; min-width: 4.25em;
} .field-price:before {content: "€"; float: left;}
.node-menu-item .field-image + .field-price, .node-menu-item .field-image + .field-price + header {padding-top: 1em;}
.node-menu-item .field-price-alternates {margin-top: 1em; text-align: right; color: #AAAAAA; clear: right;}
.node-menu-item .field-price-alternates .field-option:before {content: "-";}
.node-menu-item .allergen-wrapper {position: absolute; right: 0; bottom: 0; text-align: right; margin-top: 1em;}
.node-menu-item .allergen-wrapper-invisible {position: static; visibility: hidden;} /*Invisible duplicate element ensures there's enough space at the bottom*/
.node-menu-item .allergen-wrapper div {display: inline-block; margin-right: 0.5em; font-size: small; color: #CCCCCC;}
.node-menu-item .allergen-wrapper strong {
  display: inline-block;
  background: #990000; border-radius: 0.75em;
  padding: 0.1em 0.75em; padding-top: 0; margin-bottom: 0.5em;
  font-size: small; font-weight: normal; text-align: center; text-align: center;
} .node-menu-item .allergen-wrapper strong.field-vegetarians {background: #009900;}
.group-items-basic .field-price-alternates {margin: 0.25em; font-size: 110%;}
.group-items-basic .field-option {width: 45%; display: inline-block; text-align: right; padding-right: 1em; font-weight: bold;}
.group-items-basic .field-price {width: 45%; display: inline-block; text-align: left;}
.group-items-basic .field-price:before {float: none;}


.menu-list-nav {margin-top: 2em;}
.menu-list-nav ul {
  list-style: none; padding: 0 2em; margin: 20px;
  display: flex; justify-content: center;
}
.menu-list-nav li a {
  position: relative;
  padding: 0.5em 1em; margin: 0 2px;
  background-color: #111111;
  border: 2px outset #111111; border-radius: 1em;
  text-decoration: none;
  white-space: nowrap;
}
.menu-list-nav li a.active {background: #660000; border: 2px solid #660000; color: white;}
.menu-list-nav li a.active:after {
  content: "";
	display: inline-block; width: 0; height: 0;
	position: absolute; left: 50%; margin-left: -12px;
	border: 12px solid transparent;
}
.menu-list-nav-top li a.active:after {border-top-color: inherit; bottom: -24px;}
.menu-list-nav-bottom li a.active:after {border-bottom-color: inherit; top: -24px;}
.menu-list-nav li a:hover {background: #666600; border-color: #666600;}

.field-slideshow {margin: 0 auto;}
.field-slideshow-pager a {
  display: inline-block; margin: 4px; width: 12px; height: 12px;
  border: 1px solid #cccccc; border-radius: 12px;
  font-size: 0;
}
.field-slideshow-pager a.activeSlide {background: #cccccc;}
.field-slideshow-pager a:hover {background: #ffff99; border-color: #ffff99;}