/*.fixed.expanded:not(.top-bar) bella tola Custom top-bar s2w  */

/* s2w top-bar breakpoint custom - kombination mit zeile 486,  */

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:64em)/";
  width: 64em; }

/* original 
meta.foundation-mq-topbar {
	font-family: "/only screen and (min-width:40.0625em)/";
	width: 40.0625em;}
}*/


.headrow.collapse > .column,
.headrow.collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
.headrow.collapse .headrow {
    margin-left: 0;
    margin-right: 0; }
	
	
header {
	width: 100%;
	height: auto;
	line-height: auto;
	position: fixed;
	top: 0;
	background-color: #776447;
	z-index: 99;
}

header { 
	transition: all 0.5s ease;
}

header.sticky  {
	height: auto;
	line-height: auto;
	background-color: #776447;
}

header.sticky li.btnBook {
	visibility: visible;
	display: inherit !important;	
}


header div.wrap_quicknav {
	margin-bottom: 0px;
	/*border: solid 1px red;*/
}

header.sticky div.wrap_quicknav {
	display: none;
	visibility: hidden;
}


header div.wrap_quicknav a {
	color: #fff;
}
header div.wrap_quicknav a:hover {
	color: #fff;
}
header div.wrap_quicknav .active {
	color: #e1ddd4;
}


header .quicknav a.de, 
header .quicknav a.en, 
header .quicknav a.fr, 
header .quicknav a.zh,
header .quicknav a.ja
{ padding-right: 10px;}

/* unsichtbar temp 
a.zh {
	display: none !important;
	visibility: hidden; 
}
*/

header .quicknav a.active {
	color: #000;
	font-weight: 400;
}


#mobile {
	padding-top: 8px;
	padding-bottom: 0px;
	background-color: #ada796;
	width: 100%;
}
	
#mobile li {
	height: auto;
	float: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 16px;
}

#mobile div.lang {
  font-size: 0.8rem;
	padding-bottom: 10px;
}

#mobile li.lang {
  font-size: 0.8rem;
}

#mobile li.lang a.active {
	display: none !important;
	visibility: hidden; 
}


#mobile button3, .button3  {
	background-color: none;
	color: #FFFFFF;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: normal;
	line-height: 20px;
	position: relative;
	text-decoration: none !important;
	text-align: center;
	-webkit-appearance: none;
	border-radius: 0;
	display: inline-block;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 20px;
	padding-left: 4px;	
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	transition: background-color 300ms ease-out;
	/* [disabled]border: 1px solid #CCC; */
}

#mobile button3:hover, button3:focus, .button3:hover, .button3:focus {
	/*background-color: #CCCCCC;*/
	color: #FFFFFF;
}

#mobile .fa {
	color: #FFF;
}
#mobile a {
	color: #FFF;
}



/* end header styles  */




/* Wrapped around .top-bar to contain to grid width */
.contain-to-grid {
	width: 100%;
	background: none;
}
.contain-to-grid .top-bar {
	margin-bottom: 0;
}
.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
	left: 0;
}
.fixed.expanded:not(.top-bar) {
	height: auto;
	max-height: 100%;
	overflow-y: auto;
	width: 100%;
}
.fixed.expanded:not(.top-bar) .title-area {
	position: fixed;
	width: 100%;
	z-index: 99;
}
.fixed.expanded:not(.top-bar) .top-bar-section {
	margin-top: 2.8125rem;
	z-index: 98;
}
.top-bar {
	 /* farbe bg menu mobile top balken */
	height: 2.8125rem;
	line-height: 2.8125rem;
	margin-bottom: 0;
	overflow: hidden;
	position: relative;
}
.top-bar ul {
	list-style: none;
	margin-bottom: 0;
}
.top-bar .row {
	max-width: none;
}
.top-bar form,  .top-bar input,  .top-bar select {
	margin-bottom: 0;
}


/*
.top-bar input,  .top-bar select {
	font-size: 0.75rem;
	height: 1.75rem;
    padding-bottom: .35rem;
    padding-top: .35rem;
}
.top-bar .button, .top-bar button {
	font-size: 0.75rem;
	margin-bottom: 0;
	padding-bottom: 0.4125rem;
	padding-top: 0.4125rem;
}
*/

.top-bar .title-area {
	margin: 0;
	position: relative;
}
.top-bar .name {
	
	height: 2.8125rem;
	margin: 0;
}
.top-bar .name h1, .top-bar .name h2, .top-bar .name h3, .top-bar .name h4, .top-bar .name p, .top-bar .name span {
	
	line-height: 2.8125rem;
	margin: 0;
}
.top-bar .name h1 a, .top-bar .name h2 a, .top-bar .name h3 a, .top-bar .name h4 a, .top-bar .name p a, .top-bar .name span a {
	font-size: 0.9rem;
	color: #FFFFFF;
	display: block;
	font-weight: normal;
	padding: 0 0.9375rem;
	width: 75%;
}




.top-bar .toggle-topbar {
	position: absolute;
	right: 0;
	top: 0;
}

/* MENU textgroesse */
.top-bar .toggle-topbar a {
	color: #FFFFFF;
	display: block;
	font-size: 0.8125rem;
	font-weight: bold;
	height: 2.8125rem;
	line-height: 2.8125rem;
	padding: 0 0.9375rem;
	position: relative;
	text-transform: uppercase;
}
.top-bar .toggle-topbar.menu-icon {
	margin-top: -16px;
	top: 50%;
}
.top-bar .toggle-topbar.menu-icon a {
	color: #FFFFFF;
	height: 34px;
	line-height: 33px;
	padding: 0 2.5rem 0 0.9375rem;
	position: relative;
}
.top-bar .toggle-topbar.menu-icon a span::after {
	content: "";
	display: block;
	height: 0;
	position: absolute;
	margin-top: -8px;
	top: 50%;
	right: 0.9375rem;
	box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
	width: 16px;
}
.top-bar .toggle-topbar.menu-icon a span:hover:after {
	box-shadow: 0 0 0 1px "", 0 7px 0 1px "", 0 14px 0 1px "";
}
.top-bar.expanded {
	background: transparent;
	height: auto;
}
.top-bar.expanded .title-area {
	background-color: #c5c2b9; /* menu mobile top balken aktiv */
}
.top-bar.expanded .toggle-topbar a {
	color: #fff;
}
.top-bar.expanded .toggle-topbar a span::after {
	box-shadow: 0 0 0 1px #65635c, 0 7px 0 1px #65635c, 0 14px 0 1px #65635c;
}



.top-bar-section {
	left: 0;
	position: relative;
	width: auto;
	transition: left 300ms ease-out;
}
.top-bar-section ul {
	display: block;
	font-size: 14px;
	height: auto;
	margin: 0;
	padding: 0;
	width: 100%;
}
.top-bar-section .divider,  .top-bar-section [role="separator"] {
	border-top: solid 1px #ada796;
	clear: both;
	height: 1px;
	width: 100%;
}
.top-bar-section ul li {
	/*background: #e1ddd4;*/
}
.top-bar-section ul li > a {
	color: #fff;
	display: block;
	font-family: 'Raleway', sans-serif;
	font-size: 0.7125rem;
	font-weight: 300;
	padding: 12px 0 12px 0.9375rem;
	text-transform: uppercase;
	width: 100%;
}
.top-bar-section ul li > a.button {
	/*font-size: 0.8125rem;*/
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;

}
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
	/*background-color: red;*/
}
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
	color: #FFFFFF;
}



.top-bar-section ul li > button {
	/*font-size: 0.8125rem;*/
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	background-color: #008CBA;
	/* [disabled]border-color: red; */
	/* [disabled]color: red; */
}
.top-bar-section ul li > button:hover, 
.top-bar-section ul li > button:focus {
	/*background-color: red;*/
}
.top-bar-section ul li > button:hover, 
.top-bar-section ul li > button:focus {
	color: #FFFFFF;
}


.top-bar-section ul li.active > a {
	background-color: #ada796;
	color: #FFFFFF;
}
.top-bar-section ul li.active > a:hover {
	background-color: red;
	color: #FFFFFF;
}


.top-bar-section ul li.btnBook {	
	background-color: #4D412E !important;
}
.top-bar-section ul li.btnBook > a {
	color: #FFFFFF;
	font-weight: normal;
}



.top-bar-section .has-form {
	padding: 0.9375rem;
}
.top-bar-section .has-dropdown {
	position: relative;
}
.top-bar-section .has-dropdown > a:after {
	border: inset 5px;
	content: "";
	display: block;
	height: 0;
	width: 0;
	border-color: transparent transparent transparent rgba(0, 0, 0, 0.4);
	border-left-style: solid;
	margin-right: 0.9375rem;
	margin-top: -4.5px;
	position: absolute;
	top: 50%;
	right: 0;
}
.top-bar-section .has-dropdown.moved {
	position: static;
}
.top-bar-section .has-dropdown.moved > .dropdown {
	position: absolute !important;
	height: auto;
	width: 100%;
	overflow: visible;
	clip: auto;
	display: block;	
	
	/*
	
	*/
}
.top-bar-section .has-dropdown.moved > a:after {
	display: none;
}
.top-bar-section .dropdown {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	display: block;
	padding: 0;
	top: 0;
	z-index: 99;
	left: 100%;
}


.top-bar-section .dropdown li {
	height: auto;
	width: 100%;
}
.top-bar-section .dropdown li a {
	font-weight: normal;
	padding: 8px 0.9375rem;
}
.top-bar-section .dropdown li a.parent-link {
	font-weight: normal;
}
.top-bar-section .dropdown li.title h5, .top-bar-section .dropdown li.parent-link {
	margin-bottom: 0;
	margin-top: 0;
	font-size: 1.125rem;
}
.top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a {
	color: #FFFFFF;
	display: block;
}
.top-bar-section .dropdown li.title h5 a:hover, .top-bar-section .dropdown li.parent-link a:hover {
	background: none;
}
.top-bar-section .dropdown li.has-form {
	padding: 8px 0.9375rem;
}
.top-bar-section .dropdown li .button,  .top-bar-section .dropdown li button {
	top: auto;
}
.top-bar-section .dropdown label {
	color: #777777;
	font-size: 0.625rem;
	font-weight: bold;
	margin-bottom: 0;
	padding: 8px 0.9375rem 2px;
	text-transform: uppercase;
}
.js-generated {
	display: block;
}








@media screen and (-webkit-min-device-pixel-ratio: 0) {	
.top-bar.expanded .top-bar-section .has-dropdown.moved > .dropdown,  .top-bar.expanded .top-bar-section .dropdown {	clip: initial;}
.top-bar.expanded .top-bar-section .has-dropdown:not(.moved) > ul {	padding: 0;}
}




/* max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (max-width: 40em) {
	
.distance_top {
	height: 220px;
	background-color: #776447;
}	
	
	
header .quicknav {
	width: 100%;
	font-size: 0.8rem;
	float: left;
	color: #fff;
	line-height: normal;
	font-weight: 400;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 0px;
	margin: 0px;
	
}

header .quicknav .button-book {
	visibility: hidden;
	display: none;	
}
	
span.logo {
	background-image: url(/themes/bt/images/design/LogoBellaTola-2020.png);
	width: 62px;
	height: 110px;
	margin-top: 10px;
	background-repeat: no-repeat;
	display: block;
	margin-left: auto;
	margin-right: auto;

}
header.sticky span.logo {
	background-image: url(/themes/bt/images/design/LogoBellaTola-sticky_ws.png);
	height: 45px;
	margin-top: 2px;
	background-repeat: no-repeat;
}	
	
	
ul.qnav {
	width: 240px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;}
	
ul.qnav li {
	/*display: inline;*/
	display: inline-block;
	margin-left: 0px;
	margin-right: 0px;
}
	
.top-bar {
	background-color: #776447; /* farbe bg menu mobile top balken */
}
	
.top-bar .button, .top-bar button {
	position: relative;
	top: -1px;
}


	
}  
/* end max-width 640px, mobile-only styles */


/*  tablet-only */
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

@media only screen and (min-width: 40.063em) and (max-width: 64em)  {

.distance_top {
	height: 115px;
	background-color: #776447;
}	
	
	
header .quicknav {
	width: 100%;
	font-size: 0.8rem;
	float: left;
	color: #fff;
	line-height: normal;
	font-weight: 400;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	margin: 0px;	
}
ul.qnav {margin-bottom: 12px;}

ul.qnav li {
	line-height: normal;
	font-size: 0.8rem;
	display: inline;
	list-style-image: none;
	list-style-type: none;
	list-style-position: outside;
	margin-right: 20px;
}	
	
	
	
header .quicknav .button-book {
	visibility: hidden;
	display: none;	
}

span.logo {
	background-image: url(/themes/bt/images/design/LogoBellaTola-2020.png);
	width: 62px;
	height: 110px;
	margin-top: 6px;
	background-repeat: no-repeat;
	display: block;
	margin-left: auto;
	margin-right: auto;

}
header.sticky span.logo {
	background-image: url(/themes/bt/images/design/LogoBellaTola-sticky_ws.png);
	height: 45px;
	margin-top: 2px;
	background-repeat: no-repeat;
}	
		
	

}  

/* end  min-width 641px and max-width 1024px, tablet-only issues */


/* s2w top-bar breakpoint custom, original: @media only screen and (min-width: 40.063em) {  */
/* min-width 641px, medium screens up */

@media only screen and (min-width: 64.0625em) {

.distance_top {
	height: 115px;
	background-color: #776447;
}	
	
header .quicknav {
	float: right;
	color: #fff;
	line-height: normal;
	font-weight: 400;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 20px;
	margin: 0px;
	
}
	
header .quicknav .button-book {
	border-width: 0;
	cursor: pointer;
	font-weight: normal;
	line-height: normal;
	position: relative;
	text-decoration: none;
	text-align: center;
	-webkit-appearance: none;
	display: inline-block;
	font-size: 0.9rem;
	background-color: #4D412E;
	color: #fff;
	transition: background-color 300ms ease-out;
	text-transform: uppercase;
	margin: 0px;
	padding-top: 0.3em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.3em;
}
.quicknav .button-book:hover, 
.quicknav .button-book:focus {
    background-color: #776447; 
	color: #fff;}	

header div.wrap_quicknav {
	margin-bottom: 0;
}
	
header li.btnBook {	
	visibility: hidden;
	display: none;
}

span.logo {
	background-image: url(/themes/bt/images/design/LogoBellaTola-2020.png);
	width: 62px;
	height: 110px;
	margin-top: 6px;
	background-repeat: no-repeat;
	display: block;
	margin-left: 0px;

}
header.sticky span.logo {
	background-image: url(/themes/bt/images/design/LogoBellaTola-sticky_ws.png);
	height: 45px;
	margin-top: 2px;
	background-repeat: no-repeat;
}
	
ul.qnav {margin-bottom: 40px;}

ul.qnav li {
	line-height: normal;
	font-size: 0.7rem;
	display: inline;
	list-style-image: none;
	list-style-type: none;
	list-style-position: outside;
	margin-left: 20px;
}
/*
ul.qnav li:after {
     position:absolute;
	font-size: 0.8rem;
        top: 0;
        left: 16px;
        content: " | "; 
}
*/	
	
.top-bar {
	background-color: none;
	overflow: visible;
}
.top-bar:before, .top-bar:after {
	content: "";
	display: table;
}
.top-bar:after {
	clear: both;
}
.top-bar .toggle-topbar {
	display: none;
}
.top-bar .title-area {
	float: left;
}
.top-bar .name h1 a,  .top-bar .name h2 a,  .top-bar .name h3 a,  .top-bar .name h4 a,  .top-bar .name h5 a,  .top-bar .name h6 a {
	width: auto;
}
	
/*
.top-bar input,  .top-bar select,  .top-bar .button,  .top-bar button {
	font-size: 0.875rem;
	height: 1.75rem;
	position: relative;
	top: 0.53125rem;
}	
.top-bar .has-form > .button,  .top-bar .has-form > button {
	font-size: 0.875rem;
	height: 1.75rem;
	position: relative;
	top: 0.53125rem;
}
*/	
	
.top-bar.expanded {
	/*background-color: red;*/
}
.contain-to-grid .top-bar {
	margin: 0 auto;
	margin-bottom: 0;
	max-width: 62.5rem;
}
.top-bar-section {
	transition: none 0 0;
	left: 0 !important;
}
.top-bar-section ul {
	display: inline;
	height: auto !important;
	width: auto;
}
.top-bar-section ul li {
	float: left;
}
		
.top-bar-section ul li .js-generated {
	display: none;
}
.top-bar-section li.hover > a:not(.button) {
	background-color: #555555;
	color: #FFFFFF;
}
.top-bar-section li:not(.has-form) a:not(.button) {
	/*background-color: #e1ddd4;*/
	line-height: 2.8125rem;
	padding: 0 0.9375rem;
}
/* hover inaktive bottons	*/
.top-bar-section li:not(.has-form) a:not(.button):hover {
	/*background-color: #4D412E;*/
	/*border-bottom: solid #000000;*/
}
.top-bar-section li.starter_active:not(.has-form) a:not(.button) {
	/*background-color: #c5c2b9;*/
	color: #FFFFFF;
	line-height: 2.8125rem;
	padding: 0 0.9375rem;
	/*border-bottom: solid #000000;*/
}
.top-bar-section li.starter_active:not(.has-form) a:not(.button):hover {
	background-color: #ada796;
	color: #FFFFFF;
	
}
.top-bar-section .has-dropdown > a {
	padding-right: 2.1875rem !important;
}
.top-bar-section .has-dropdown > a:after {
	border: inset 5px;
	content: "";
	display: block;
	height: 0;
	width: 0;
	border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent;
	border-top-style: solid;
	margin-top: -2.5px;
	top: 1.40625rem;
}
.top-bar-section .has-dropdown.moved {
	position: relative;
}
.top-bar-section .has-dropdown.moved > .dropdown {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	display: block;
}
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
	/*position: static !important;*/
	height: auto;
	width: auto;
	overflow: visible;
	clip: auto;
	display: block;
	position: absolute !important;
}
.top-bar-section .has-dropdown > a:focus + .dropdown {
	/*position: static !important;*/
	height: auto;
	width: auto;
	overflow: visible;
	clip: auto;
	display: block;
	position: absolute !important;
}
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
	border: none;
	content: "\00bb";
	top: 0.1875rem;
	right: 5px;
}
.top-bar-section .dropdown {
	left: 0;
	background: transparent;
	min-width: 100%;
	top: auto;
}
.top-bar-section .dropdown li a {
	/*background-color: red;*/
	color: #FFFFFF;
	line-height: 2.8125rem;
	padding: 12px 0.9375rem;
	white-space: nowrap;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
	background-color: #776447;
	color: #fff;
}
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
	background-color: #4D412E;
	color: #fff;

}

.top-bar-section .dropdown li .dropdown {
	left: 100%;
	top: 0;
}


/* striche zwischen buttons    border-right: solid 1px red;  */
 .top-bar-section > ul > .divider,  
 .top-bar-section > ul > [role="separator"] {
 border-right: none;
 border-bottom: none;
 border-top: none;
 clear: none;
 height: 2.8125rem;
 width: 0;
}


.top-bar-section .has-form {
	background: #333333;
	height: 2.8125rem;
	padding: 0 0.9375rem;
}
.top-bar-section .right li .dropdown {
	left: auto;
	right: 0;
}
.top-bar-section .right li .dropdown li .dropdown {
	right: 100%;
}
.top-bar-section .left li .dropdown {
	right: auto;
	left: 0;
}
.top-bar-section .left li .dropdown li .dropdown {
	left: 100%;
}
.no-js .top-bar-section ul li:hover > a {
	background-color: #555555;
	color: #FFFFFF;
}
.no-js .top-bar-section ul li:active > a {
	background-color: #008CBA;
	color: #FFFFFF;
}
.no-js .top-bar-section .has-dropdown:hover > .dropdown {
	/*position: static !important;*/
	height: auto;
	width: auto;
	overflow: visible;
	clip: auto;
	display: block;
	position: absolute !important;
}
.no-js .top-bar-section .has-dropdown > a:focus + .dropdown {
	/*position: static !important;*/
	height: auto;
	width: auto;
	overflow: visible;
	clip: auto;
	display: block;
	position: absolute !important;
}
	
	

}   /* end min-width 641px, medium screens */