/*
Theme Name: Vini-Al Grappolo
Theme URI: https://www.virtix.ch/
Author: Virtix Multimedia Productions
Author URI: https://www.virtix.ch/
Description: WordPress Theme spezifisch für Vini-Al Grappolo.
Version: 1.0
*/



@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,300italic,400italic,700,700italic);

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	color: #000000;
	background: url(images/BG_pattern.jpg) top left;
}

.clear {
	clear: both;
}

#wp-admin-bar-new-content-default #wp-admin-bar-new-events-archive {
	display: none !important;
}

#page-wrapper {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 0 0;
}

header {
	position: relative;
	height: 205px;
}

	#custom_header {
		position: absolute;
		right: 0;
		top: 64px;
		max-width: 240px;
		width: 100%;
		text-align: right;
	}
	
	#custom_header .search-field {
		float: right;
		background: #FFFFFF;
		width: 144px;
		height: 27px;
		border: none;
		font-size: 15px;
		font-weight: 400;
		text-transform: none;
		padding: 0 10px;
	}
	
	#custom_header .search-submit {
		display: none;
	}
	
	#custom_header .screen-reader-text {
		display: none;
	}
	
	input[type="search"]::-webkit-search-decoration {
		-webkit-appearance: none;
	}
	
	:-webkit-input-placeholder {
	   	color: #000000;
	   	font-family: 'Titillium Web', sans-serif;
		font-weight: 400;
		font-size: 14px;
	}
	
	:-moz-placeholder { /* Firefox 18- */
	   	color: #000000;
	   	font-family: 'Titillium Web', sans-serif;
		font-weight: 400;
		font-size: 14px;  
	}
	
	::-moz-placeholder {  /* Firefox 19+ */
	   	color: #000000;
	   	font-family: 'Titillium Web', sans-serif;
		font-weight: 400;
		font-size: 14px;
	}
	
	:-ms-input-placeholder {  
	   	color: #000000;
	   	font-family: 'Titillium Web', sans-serif;
		font-weight: 400;
		font-size: 14px;
	}
	
	#custom_header .warenkorb {
		float: right;
		width: 21px;
		height: 16px;
		margin: 5px 22px 0 0;
		background: transparent url(images/icon-warenkorb-head.png) center center no-repeat;
	}
	
	#custom_header .facebook {
		float: right;
		width: 16px;
		height: 16px;
		margin: 5px 15px 0 0;
		background: transparent url(images/icon-facebook.png) center center no-repeat;
	}
	
	#logo-vini {
		float: left;
		width: 167px;
		height: 100px;
		background: url(images/logo-vini.png) 0 0 no-repeat;
		margin: 75px 0 0 0;
	}
	
	#logo-hafebar {
		float: left;
		width: 300px;
		height: 100px;
		background: url(images/logo-hafebar.png) 0 0 no-repeat;
		background-size: 230px 66px;
		/*background-size: 346px 100px;*/
		margin: 81px 0 0 0;
	}
	
	nav {
		float: right;
	}
	
		nav ul {
			list-style: none;
			float: left;
			margin: 120px 0 0 0;
			padding: 0;
		}
		
		nav ul li {
			position:relative;
			list-style: none;
			float: left;
			margin: 0 29px 0 0;
			padding: 0;
		}
		nav ul li:last-child {
			list-style: none;
			float: left;
			margin: 0 0px 0 0;
			padding: 0;
		}
		
		
		ul.dropdown li a {
		 /*space the items, occupy entire height too.*/
			padding: 0 0 10px 0;
			margin: 0;
			font-size: 15px;
			line-height: 23px;
			font-weight: 300;
			font-size: 19px;
			line-height: 19px;
			text-decoration: none;	
			color: #000000;
			text-transform: lowercase;	
		}
		
		/* Style the link hover */
		ul.dropdown li:hover a {
			border-bottom: 3px solid #adbe39;
		}
		
		ul.dropdown .hafebar:hover a {
			border-bottom: 3px solid #7da8ae;
		}
		
		
		
		ul.dropdown li ul li:hover a {
			background: #e6ebc3;			
		}
		
		ul.dropdown .hafebar ul li:hover a {
			background: #dfe3e5;			
		}
		
		ul.dropdown li ul li ul li a {
			background: #FFFFFF !important;	
		}
		
		ul.dropdown li ul li ul li:hover a {
			background: #eaeae7 !important;			
		}
		
		
		
		
		/* Displays the link as blocks. */
		ul.dropdown li ul a {
			font-size: 15px;
			font-weight: 400;
			color: #000;
			text-decoration: none;
			display: block;
			padding: 3px 4px 3px 25px;
			margin: 0;
			text-align: left;
			text-transform: none !important;
			border-bottom: none !important;
			background: #FFFFFF;
		}
		
		 
		/* sub menus!!  */
		 
		ul.dropdown ul {
			list-style: none;
			margin:0; /* Appear just below the hovering list */
			padding: 20px 0 20px 0 !important;
			width:100%; /* specify the width. */
			min-width: 161px;
			position:absolute; /* needed */
			z-index:999; /* specify the order */
			-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
			-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
			box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
		}
		 
		ul.dropdown li ul {
			top: 37.5px; /* Positioning:Calc with top level horz list height */
			left: 0;
			width: 100%;
			padding: 0 0 0 0;
			background: #FFFFFF;
		}
		
		
		 
		ul.dropdown ul ul {
			top:-20px;
			left:100%; /* Position the sub menus to right. */
		}
		 
		ul.dropdown ul li {
			float:none; /* umm.. Appear below the previous one. mmkay? */
			border-bottom: none;
			padding: 0 0 0 0;
			margin: 0 0 0 0;
			height: auto;
			text-transform: none !important;
		}
		
		
		
		/* Drop Down! */
		 
		/* Hide all the dropdowns (submenus) */
		ul.dropdown ul,
		ul.dropdown li:hover ul ul,
		ul.dropdown ul li:hover ul ul { 
			display: none; 
		}
		 
		/* Display the submenus only when li are hovered */
		ul.dropdown li:hover ul,
		ul.dropdown ul li:hover ul ,
		ul.dropdown ul li ul li:hover ul { 
			display: block;
		}
		 
		ul.dropdown li * a:hover {
		/* Change color of links when hovered */
			
		}
		
		
		header nav .current_page_item > a,
		header nav .current_page_ancestor > a,
		header nav .current-post-ancestor > a,
		header nav .current-menu-item > a,
		header nav .current-menu-ancestor > a {
			border-bottom: 3px solid #adbe39;
		}
		
		header nav .hafebar.current_page_item > a,
		header nav .hafebar.current_page_ancestor > a,
		header nav .hafebar.current-post-ancestor > a,
		header nav .hafebar.current-menu-item > a,
		header nav .hafebar.current-menu-ancestor > a {
			border-bottom: 3px solid #7da8ae;
		}
		
		header nav li ul .current_page_item > a,
		header nav li ul .current_page_ancestor > a,
		header nav li ul .current-post-ancestor > a,
		header nav li ul .current-menu-item > a,
		header nav li ul .current-menu-ancestor > a {
			background: #e6ebc3;	
		}
		
		header nav .hafebar ul .current_page_item > a,
		header nav .hafebar ul .current_page_ancestor > a,
		header nav .hafebar ul .current-post-ancestor > a,
		header nav .hafebar ul .current-menu-item > a,
		header nav .hafebar ul .current-menu-ancestor > a {
			background: #dfe3e5;	
		}
		
		header nav li ul li ul .current_page_item > a,
		header nav li ul li ul .current_page_ancestor > a,
		header nav li ul li ul .current-post-ancestor > a,
		header nav li ul li ul .current-menu-item > a,
		header nav li ul li ul .current-menu-ancestor > a {
			background: #eaeae7 !important;	
		}
		
		
		

#main {
	margin: 0 auto 40px auto;
	padding: 0 0 0 0;
	max-width: 960px;
	width: 100%;
}
	
	.spacer { height: 0px; display: none; }
	
	#main h1.page-title {
		text-transform: lowercase;
		font-weight: 300;
		font-size: 33px;
		line-height: 42px;
		margin: 0;	
		padding: 0px 0 47px 0;
	}
	
	#main .search-field {
		float: left;
		background: #FFFFFF;
		width: 166px;
		height: 27px;
		border: none;
		font-size: 15px;
		font-weight: 400;
		text-transform: none;
		padding: 0 10px;
		margin: 0 4px 0 0;
	}
	
	#main .search-submit {
		float: left;
		display: block;
		width: 100px;
		height: 27px;
		border: none;
		background: #FFFFFF;
		font-size: 15px;
		font-weight: 400;
		text-transform: none;
		padding: 0 10px;
	}
	
	#main .screen-reader-text {
		display: none;
	}
	
	#main ul, #main ul li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#main ul li:last-child {
		margin: 0 0 80px 0;
	}
	
	#main .item25{
		position: relative;
		float: left;
		width: 240px;
		overflow: hidden;
	}
	#main .item25:before{
		content: "";
		display: block;
		padding-top: 100%;
	}
	/*#main .item25:nth-child(3n+1) {
		background: #5e666c;
	}
	#main .item25:nth-child(3n+2) {
		background: #adbe38;
	}
	#main .item25:nth-child(3n+0) {
		background: #000000;
	}*/
	#main .item25-content{
		position:  absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		text-align: center;
		z-index: 100;
		cursor: pointer;
	}
	
	#main .item25-content h1 {
		font-size: 24px;
		font-weight: 300;
		margin: 0;
		padding: 0;
		text-transform: lowercase;
	}
	
	#main .item50{
		position: relative;
		float: left;
		width: 50%;
		overflow: hidden;
		background: #FFFFFF;
		color: #000000;
	}
	#main .item50:before{
		content: "";
		display: block;
		padding-top: 100%;
	}
	
	#main .item50:nth-child(3n+0) {
		background: #adbe38;
	}
	#main .item50-content{
		position:  absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		text-align: left;
	}
	
	#main .item25 .grau {
		background: #5e666c;
		color: #FFFFFF;
	}
	#main .item25 .gruen {
		background: #adbe38;
		color: #FFFFFF;
	}
	#main .item25 .gruen-hafe {
		background: #7da8ae;
		color: #FFFFFF;
	}
	
	#main .item25 .weiss {
		background: #FFFFFF;
		color: #000000 !important;
	}
	#main .item25 .schwarz {
		background: #000000;
		color: #FFFFFF;
	}
	
	#main .icon-restaurant {
		background: transparent url(images/icon-restaurant.png) center center no-repeat;
		margin: 66px auto 0 auto;
		width: 100px;
		height: 83px;
	}
	
	#main .icon-shop {
		background: transparent url(images/icon-shop.png) center center no-repeat;
		margin: 66px auto 0 auto;
		width: 100px;
		height: 83px;
	}
	
	#main .icon-aktuell {
		background: transparent url(images/icon-aktuell.png) center center no-repeat;
		margin: 66px auto 0 auto;
		width: 100px;
		height: 83px;
	}
	
	#main .icon-kontakt {
		background: transparent url(images/icon-kontakt.png) center center no-repeat;
		margin: 66px auto 0 auto;
		width: 100px;
		height: 83px;
	}
	
	#main .icon-degustation {
		background: transparent url(images/icon-degustation.png) center center no-repeat;
		margin: 66px auto 0 auto;
		width: 100px;
		height: 83px;
	}
	
	#main .icon-aktionen {
		background: transparent url(images/icon-aktionen.png) center center no-repeat;
		margin: 66px auto 0 auto;
		width: 100px;
		height: 83px;
	}
	
	#main .icon-spezialitaeten {
		background: transparent url(images/icon-spezialitaeten.png) center center no-repeat;
		margin: 66px auto 0 auto;
		width: 100px;
		height: 83px;
	}
	
	#main .icon-hafebar {
		background: transparent url(images/icon-hafebar.png) center center no-repeat;
		margin: 66px auto 0 auto;
		width: 100px;
		height: 83px;
	}
	
	#main #restaurant img,
	#main #shop img,
	#main #aktuell img,
	#main #kontakt img,
	#main #degustation img,
	#main #aktionen img,
	#main #spezialiaeten img,
	#main #hafebar img {
		position: absolute;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		max-width: 240px;
		height: auto;
		display: block;
		z-index: 99;
	}
	
	
	#main .content-home {
		clear:both;
		margin: 0 auto;
		text-align: center;
		max-width: 798px;
		width: 100%;
	}
	
		#main .content-home  a {
			color: #000000;
			text-decoration: underline;
		}
	
	#main .content-home hr {
			margin: 0px 0 20px 0;
		   	border : 0;
		   	height : 15px;
		   	background : url(images/horizontal_line_blaetter_grau.png) 50% 0 no-repeat;
       	}
	
	/*#main .content-home hr {
		margin: 10px 0 30px 0;
		padding: 0;
		height: 1px;
		background-color: transparent;
		border: none;
		border-top: 0px solid #000000;
		text-align: center;
	}
	
	#main .content-home hr:after {
		content: url(images/horizontal_line_blaetter_grau.png);
		width: 71px;
		height: 16px;
		display: inline-block;
		position: relative;
		top: -8px;
		background: none;
		padding: 0 0.25em;
	}*/
	
	#main .content-slidewrapper {
		max-width: 960px;
		width: 100%;
	}
	
	#main #googlemaps {
		width: 960px;
		height: 480px;
		clear: both;
		position:relative;
		display: block;
		overflow:hidden;
	}
	
	
		#main .content-slidewrapper #img-wrapper {
			position: relative;
			padding: 0 0 0 0;
			margin: 0 auto;
			max-width: 960px;
			width: 100%;
			/*height: auto;*/
		}
		
		#content .wp-post-image {
			width: 100%;
			height: auto;
			padding: 0 0 0 0;
		}
		
		#main .flexslider ul li:last-child {
			margin: 0 0 0px 0;
		}
		
		
		
		.flexslider img {
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}
		
		#carousel { 
			background: none !important;
		}
		
		#carousel .slides li {
			
			margin-right: 2px !important;
			cursor: pointer;
		}
		
		#carousel .slides li .img_wrapper img{
			width: 56px !important;
			height: 56px !important;
		}
		
		
	
	#main .thumbnail-wrapper {
		position: absolute;
		top: 515px;
		width: 348px;
		height: 56px;
		margin: 0 0 0 0;
	}
	
	#main .thumbnail-wrapper img {
		float: left;
		margin: 0 2px 0 0;
		width: 56px;
		height: 56px;
	}
	
	#main .thumbnail-wrapper .dummy-wrap {
		top: 0px;
		position: absolute;
		width: 348px;
		height: 56px;
		z-index: -1;
	}
	
	#main .thumbnail-wrapper .dummy {
		float: left;
		margin: 0 2px 0 0;
		width: 54px;
		height: 54px;
		border: 1px solid #777777;
		opacity: 0.5;
	}
	
	#main .content-slideshow img {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}
	
	#main .content {
		float: left;
		margin: 0 0 80px 0;
		padding: 0;
		max-width: 480px;
		width: 100%;
	}
	
		#main .content-inner {
			padding: 0 0 0 30px;
		}
		
		#main .content-inner ul {
			margin: 0 0 0 0;
			padding: 0 0 22px 0; /* make space for li's :before */
			list-style: none;
		}
		
		#main .content-inner ul li {
			position: relative;
			padding: 0 0 6px 0.9em; /* text distance to icon */
			line-height: 22px;
		}
		
		#main .content-inner ul li:last-child {
			padding: 0 0 6px 0.9em;
			margin: 0;
		}
		
		#main .content-inner ul li:before {
			position: absolute;
			left: 0.1em; /* same as ul padding-left */
			top: 0.00em; /* depends on character, maybe use padding-top instead */
			content: "\f111";
			font-family: FontAwesome;
			font-size: 6px;
		}
		
		#main .content-inner ol {
			margin: 0 0 0 14px;
			padding: 0 0 22px 0; /* make space for li's :before */
			list-style-position: outside
		}
		
		#main .content-inner ol li {
			position: relative;
			padding: 0 0 6px 2px; /* text distance to icon */
			line-height: 22px;
		}
		
		
		
		#main .content h1 {
			text-transform: lowercase;
			font-weight: 300;
			font-size: 33px;
			line-height: 42px;
			margin: 0;	
			padding: 56px 0 47px 0;
		}
		#main .content h2 {
			text-transform: none;
			font-weight: 700;
			font-size: 15px;
			line-height: 22px;
			margin: 0;	
			padding: 0 0 0 0;
		}
		#main .content p {
			margin: 0;	
			padding: 0 0 22px 0;
		}
		#main .content a {
			color: #000000;
			text-decoration: underline;
		}
		
		
		#main .content hr {
			margin: 26px 0 22px 0;
		   	border : 0;
		   	height : 15px;
		   	background : url(images/horizontal_line_blaetter.png) 50% 0 no-repeat;
       	}
		
		
		/*#main .content hr {
			margin: 26px 0 22px 0;
			padding: 0;
			height: 1px;
			background-color: transparent;
			border: none;
			border-top: 0px solid #000000;
			text-align: center;
		}
		
		#main .content hr:after {
			content: url(images/horizontal_line_blaetter.png);
			background-size: 71px 16px;
			width: 71px;
			height: 16px;
			display: inline-block;
			position: relative;
			top: -8px;
			background: none;
			padding: 0 0.25em;
		}*/
		
		
		#main .event li.item25:nth-child(8n+1),
		#main .event li.item25:nth-child(8n+1) a {
			background: #5e666c;
			color: #FFFFFF;
		}
		#main .event li.item25:nth-child(8n+2),
		#main .event li.item25:nth-child(8n+2) a {
			background: #7da8ae;
			color: #FFFFFF;
		}
		#main .event li.item25:nth-child(8n+3),
		#main .event li.item25:nth-child(8n+3) a {
			background: #000000;
			color: #FFFFFF;
		}
		#main .event li.item25:nth-child(8n+4),
		#main .event li.item25:nth-child(8n+4) a {
			background: #FFFFFF;
			color: #000000;
		}
		#main .event li.item25:nth-child(8n+5),
		#main .event li.item25:nth-child(8n+5) a {
			background: #000000;
			color: #FFFFFF;
		}
		#main .event li.item25:nth-child(8n+6),
		#main .event li.item25:nth-child(8n+6) a {
			background: #FFFFFF;
			color: #000000;
		}
		#main .event li.item25:nth-child(8n+7),
		#main .event li.item25:nth-child(8n+7) a {
			background: #5e666c;
			color: #FFFFFF;
		}
		#main .event li.item25:nth-child(8n+0),
		#main .event li.item25:nth-child(8n+0) a {
			background: #7da8ae;
			color: #FFFFFF;
		}
		
		#main .event .item25 img {
			position: absolute;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			max-width: 240px;
			height: auto;
			z-index: 2;
			display: none;
		}
		#main .event .item25-content {
			z-index: 1;	
		}
		
		#main .event .item25-content h1 {
			position:  absolute;
			bottom: 48px;
			text-transform: lowercase;
			font-size: 24px;
			line-height: 28px;
			font-weight: 300;
			margin: 0;	
			padding: 0 15px 0 31px;
			text-align: left;
		}
		
		#main .event .item25-content h1 p {
			text-align: left;
			padding: 0;
			margin: 0 0 10px 0;
			font-weight: 400;
			font-size: 13px;
			line-height: 20px;
			text-transform: none;
		}
		
		
		
		
		
		
		#main .blog li.item25:nth-child(8n+1),
		#main .blog li.item25:nth-child(8n+1) a {
			background: #5e666c;
			color: #FFFFFF;
		}
		#main .blog li.item25:nth-child(8n+2),
		#main .blog li.item25:nth-child(8n+2) a {
			background: #adbe38;
			color: #FFFFFF;
		}
		#main .blog li.item25:nth-child(8n+3),
		#main .blog li.item25:nth-child(8n+3) a {
			background: #000000;
			color: #FFFFFF;
		}
		#main .blog li.item25:nth-child(8n+4),
		#main .blog li.item25:nth-child(8n+4) a {
			background: #FFFFFF;
			color: #000000;
		}
		#main .blog li.item25:nth-child(8n+5),
		#main .blog li.item25:nth-child(8n+5) a {
			background: #000000;
			color: #FFFFFF;
		}
		#main .blog li.item25:nth-child(8n+6),
		#main .blog li.item25:nth-child(8n+6) a {
			background: #FFFFFF;
			color: #000000;
		}
		#main .blog li.item25:nth-child(8n+7),
		#main .blog li.item25:nth-child(8n+7) a {
			background: #5e666c;
			color: #FFFFFF;
		}
		#main .blog li.item25:nth-child(8n+0),
		#main .blog li.item25:nth-child(8n+0) a {
			background: #adbe38;
			color: #FFFFFF;
		}
		
		#main .blog .item25 img {
			position: absolute;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			max-width: 240px;
			height: auto;
			z-index: 2;
			display: none;
		}
		#main .blog .item25-content {
			z-index: 1;	
		}
		
		#main .blog .item25-content h1 {
			position:  absolute;
			bottom: 48px;
			text-transform: lowercase;
			font-size: 24px;
			line-height: 28px;
			font-weight: 300;
			margin: 0;	
			padding: 0 15px 0 31px;
			text-align: left;
			/*-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			hyphens: auto;
			word-wrap: break-word;*/
		}
		
		#main .blog .item25-content h1 p {
			text-align: left;
			padding: 0;
			margin: 0 0 10px 0;
			font-weight: 400;
			font-size: 13px;
			line-height: 20px;
			text-transform: none;
		}
		
		
		
		
		
	
	#main .sidebar {
		float: left;
		margin: 150px 134px 0 0;
		padding: 0;
		max-width: 346px;
		width: 100%;
	}
	
	#main .sidebar ul, #main .sidebar ul li {
		list-style: none;
		float: none;
		margin: 0;
		padding: 0;
	}
	
	#main .sidebar ul li:last-child {
		margin: 0 0 80px 0;
	}
		
		
		#main .sidebar .item50{
			position: relative;
			float: left;
			width: 100%;
			overflow: hidden;
			background: #FFFFFF;
		}
		#main .sidebar .item50:before{
			content: "";
			display: block;
			padding-top: 100%;
		}
		
		#main .sidebar .item50:nth-child(3n+1),
		#main .sidebar .item50:nth-child(3n+1) a {
			background: #adbe38;
			color: #FFFFFF;
		}
		#main .sidebar .item50:nth-child(3n+2),
		#main .sidebar .item50:nth-child(3n+2) a {
			background: #FFFFFF;
			color: #000000;
		}
		#main .sidebar .item50:nth-child(3n+0),
		#main .sidebar .item50:nth-child(3n+0) a {
			background: #5e666c;
			color: #FFFFFF;
		}
		
		#main .sidebar .event .item50:nth-child(3n+1),
		#main .sidebar .event .item50:nth-child(3n+1) a {
			background: #7da8ae;
			color: #FFFFFF;
		}
		#main .sidebar .event .item50:nth-child(3n+2),
		#main .sidebar .event .item50:nth-child(3n+2) a {
			background: #FFFFFF;
			color: #000000;
		}
		#main .sidebar .event .item50:nth-child(3n+0),
		#main .sidebar .event .item50:nth-child(3n+0) a {
			background: #5e666c;
			color: #FFFFFF;
		}
		
		#main .sidebar .item50 img {
			position: absolute;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			max-width: 346px;
			height: auto;
			z-index: 1;
			display: none;
		}
		
		#main .sidebar .item50-content{
			position:  absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			text-align: left;
			padding: 0 25px 0 45px;
		}
		
		#main .sidebar .item50-content h1 {
			position:  absolute;
			bottom: 65px;
			text-transform: lowercase;
			font-weight: 300;
			font-size: 33px;
			line-height: 42px;
			margin: 0;	
			padding: 0 25px 0 0;
		}
		
		#main .sidebar .item50-content h1 p {
			text-align: left;
			padding: 0;
			margin: 0 0 15px 0;
			font-weight: 400;
			font-size: 15px;
			line-height: 22px;
			text-transform: none;
		}
		
	#main .gallery .img_wrapper{
		position:  absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		text-align: center;
		cursor: pointer;
	}
	
	#main .gallery img {
		position: absolute;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		max-width: 240px;
		height: auto;
		display: block;
		z-index: 99;
	}
	
	#main .gallery .icon-plus {
		position: absolute;
		top: 50%;
		margin: -23px 0 0 -23px;
		left: 50%;
		background: transparent url(images/icon-plus.png) center center no-repeat;
		width: 46px;
		height: 46px;
	}

.edit-link a {
	background: #4b5155;
	color: #FFFFFF !important;
	padding: 10px 20px;
	text-decoration: none !important;
}

.hidden{
     opacity:0;
     filter: alpha(opacity=0);
}
.visible{
     opacity:1;
     filter: alpha(opacity=100);
}

/* Kontaktformular */

textarea,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="email"],
input[type="search"] { -webkit-appearance:none; -webkit-border-radius:0; }

.wpcf7-form input {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 15px;
	background: #FFFFFF;
    border: none;
    color: #000;
    font-size: 100%;
    padding: 3%;
	margin: 0;
	max-width: 480px;
	width: 94%;
}

.wpcf7-form textarea {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	background: #FFFFFF;
    border: none;
    color: #000;
    font-size: 100%;
    padding: 3%;
	margin: 0;
	max-width: 480px;
	width: 94%;
	height: 100px;
}

.wpcf7-form .wpcf7-submit {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 15px;
	background: #5e666c;
    border: none;
    color: #fff;
    font-size: 100%;
    padding: 6px;
	margin: 3px 0 10px 0;
	width: 100px;		
}

.wpcf7-form .wpcf7-submit:hover {
	background: #adbe38;
    color: #FFFFFF;
	cursor: pointer;		
}

div.wpcf7-response-output {
	margin: 0;
	padding: 5%;
	color: #fff;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	width: 95%;
}


div.wpcf7-mail-sent-ok {
	border: none;
	background: #adbe38;
}

div.wpcf7-mail-sent-ng {
	border: none;
	background: #5e666c;
}

div.wpcf7-spam-blocked {
	border: none;
	background: #5e666c;
}

div.wpcf7-validation-errors {
	border: none;
	background: #5e666c;
}

span.wpcf7-form-control-wrap {
	position: relative;
}

span.wpcf7-not-valid-tip {
	color: #999;
	font-size: 14px;
	display: block;
	margin: 0;
	padding: 0;
}

.use-floating-validation-tip span.wpcf7-not-valid-tip { 
	position: absolute;
	top: -8px;
	left: 0;
	z-index: 100;
	border: none;
	background: #FFFFFF;
	padding: 2% 2% 2% 3%;
	margin: 0;
	color: #888888;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 15px;
}


.backbtn-vini {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 15px;
	background: #5e666c;
    border: none;
    color: #fff;
    font-size: 100%;
    padding: 6px;
	margin: 3px 0 10px 0;
	width: 100px;
	display: block;		
}

.backbtn-vini:hover {
	background: #adbe38;
    color: #FFFFFF;
	cursor: pointer;		
}

.backbtn-hafebar {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 15px;
	background: #7da8ae;
    border: none;
    color: #fff;
    font-size: 100%;
    padding: 6px;
	margin: 30px 0 10px 0;
	width: 100px;
	display: block;		
}

.backbtn-hafebar:hover {
	background: #5e666c;
    color: #FFFFFF;
	cursor: pointer;		
}


.newsletteranmeldung {
	max-width: 960px;
	width: 100%;
	display: block;
	clear: both;
	padding: 0 0 30px 0;
}


	.newsletteranmeldung input {
		font-family: 'Titillium Web', sans-serif;
		font-weight: 400;
		font-size: 15px;
		background: #FFFFFF;
		border: none;
		color: #000;
		font-size: 100%;
		padding: 3%;
		margin: 0;
		max-width: 480px;
		width: 94%;
	}

	.newsletteranmeldung .js-cm-submit-button {
		font-family: 'Titillium Web', sans-serif;
		font-weight: 400;
		font-size: 15px;
		background: #5e666c;
		border: none;
		color: #fff;
		font-size: 100%;
		padding: 6px;
		margin: 3px 0 10px 0;
		width: 100px;	
	}

	.newsletteranmeldung .js-cm-submit-button:hover {
		background: #adbe38;
		color: #FFFFFF;
		cursor: pointer;		
	}



@media screen and (max-width: 959px) {
	#page-wrapper {
		max-width: 720px;
		width: 100%;
		margin: 0 auto;
		padding: 0 0 0 0;
	}
	
	#logo-hafebar {
		float: left;
		width: 167px;
		height: 100px;
		background: url(images/logo-hafebar.png) 0 0 no-repeat;
		background-size: 167px 48px;
		/*background-size: 346px 100px;*/
		margin: 96px 0 0 0;
	}
	
	#main .thumbnail-wrapper {
		position: absolute;
		top: 393px;
		width: 348px;
		height: 56px;
		margin: 0 0 0 0;
	}
	
	#main .content {
		float: left;
		margin: 0 0 80px 0;
		padding: 0;
		max-width: 360px;
		width: 100%;
	}
	
	#main #googlemaps {
		width: 720px;
		height: 360px;
		clear: both;
		position:relative;
		display: block;
		overflow:hidden;
	}
	
	#main .sidebar {
		float: left;
		margin: 150px 14px 0 0;
		padding: 0;
		max-width: 346px;
		width: 100%;
	}
	
	.use-floating-validation-tip span.wpcf7-not-valid-tip { 
			position: absolute;
			top: -5px;
			left: 0;
			z-index: 100;
			border: none;
			background: #FFFFFF;
			padding: 2% 2% 2% 3%;
			margin: 0;
			color: #888888;
			font-family: 'Titillium Web', sans-serif;
			font-weight: 400;
			font-size: 15px;
		}
	
}

@media screen and (max-width: 719px) {
	#page-wrapper {
		max-width: 480px;
		width: 100%;
		margin: 0 auto;
		padding: 0 0 0 0;
	}
	
	header {
		position: relative;
		height: 150px;
	}
	
		#custom_header {
			position: absolute;
			right: 40px;
			top: 64px;
			max-width: 240px;
			width: 100%;
			text-align: right;
			z-index: 2;
		}
		
		#custom_header .search-field {
			float: right;
			background: #FFFFFF;
			width: 144px;
			height: 27px;
			border: none;
			font-size: 15px;
			font-weight: 400;
			text-transform: none;
			padding: 0 10px;
			display: none;
		}
		
		#logo-vini {
			position: absolute;
			float: left;
			width: 167px;
			height: 100px;
			background: url(images/logo-vini.png) 0 0 no-repeat;
			margin: 30px 0 0 10px;
			z-index: 3 !important;
		}
		
		#logo-hafebar {
			position: absolute;
			float: left;
			width: 167px;
			height: 100px;
			background: url(images/logo-hafebar.png) 0 0 no-repeat;
			background-size: 167px 48px;
			margin: 46px 0 0 10px;
			z-index: 3 !important;
		}
		
		nav {
			float: right;
			display: none;
		}
		
		#click-menu {
			position: absolute;
			top: 49px !important;
			z-index: 100 !important;
			width:100%;
			max-width: 480px;
			min-width: 320px;
			
			margin: 0 auto !important;
			padding: 0 0 0 0 !important;
			left: 0;
			right: 0;
		}
		
		#responsive-menu-button {
			float: right !important;
			padding-right: 10px !important;
		}
	
		#responsive-menu-container {
			
		}
		
		.responsive-menu-item.hidden {
			display: none;
		}
	
		#responsive-menu .responsive-menu-subarrow {
			border-left: none !important;
			border-right: none !important;
			border-bottom: none !important;
		}
	
		#responsive-menu-title {
			padding: 12px 11px 12px 14px !important;
			background: #000000 !important;
		}
		
		#responsive-menu-title a {
			background: none !important;
			text-transform: uppercase;
			padding: 0 0 0 0 !important
		}
	
		#responsive-menu li ul li {
			margin-left: 25px !important;
		}
		#responsive-menu li ul li a {
			padding-left: 5px !important;
		}
		#responsive-menu .menu-item ul .responsive-menu-subarrow {
			border: none !important;
			right: 25px !important;
		}
	.responsive-menu-search-form .responsive-menu-search-box {
		border-radius: 0px !important;
		border: 0px !important;
		height: 30px !important;
	}
	
	
	.spacer { height: 60px; display: none; }
	
	
	#main .item25{
			position: relative;
			float: left;
			max-width: 480px;
			width: 100%;
			overflow: hidden;
		}
		
		#main .item25-content h1 {
			position:  absolute;
			bottom: 40%;
			text-transform: lowercase;
			font-size: 33px;
			line-height: 42px;
			font-weight: 300;
			margin: 0;	
			padding: 0 0 0 0;
			text-align: center;
			width: 100%;
		}
		
		#main .icon-restaurant {
			background: transparent url(images/icon-restaurant.png) center center no-repeat;
			margin: 33% auto 0 auto;
			width: 100px;
			height: 83px;
		}
		
		#main .icon-shop {
			background: transparent url(images/icon-shop.png) center center no-repeat;
			margin: 33% auto 0 auto;
			width: 100px;
			height: 83px;
		}
		
		#main .icon-aktuell {
			background: transparent url(images/icon-aktuell.png) center center no-repeat;
			margin: 33% auto 0 auto;
			width: 100px;
			height: 83px;
		}
		
		#main .icon-kontakt {
			background: transparent url(images/icon-kontakt.png) center center no-repeat;
			margin: 33% auto 0 auto;
			width: 100px;
			height: 83px;
		}
		
		#main .icon-degustation {
			background: transparent url(images/icon-degustation.png) center center no-repeat;
			margin: 33% auto 0 auto;
			width: 100px;
			height: 83px;
		}
		
		#main .icon-aktionen {
			background: transparent url(images/icon-aktionen.png) center center no-repeat;
			margin: 33% auto 0 auto;
			width: 100px;
			height: 83px;
		}
		
		#main .icon-spezialitaeten {
			background: transparent url(images/icon-spezialitaeten.png) center center no-repeat;
			margin: 33% auto 0 auto;
			width: 100px;
			height: 83px;
		}
		
		#main .icon-hafebar {
			background: transparent url(images/icon-hafebar.png) center center no-repeat;
			margin: 33% auto 0 auto;
			width: 100px;
			height: 83px;
		}
		
		#main #restaurant img,
		#main #shop img,
		#main #aktuell img,
		#main #kontakt img,
		#main #degustation img,
		#main #aktionen img,
		#main #spezialiaeten img,
		#main #hafebar img {
			position: absolute;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			max-width: 480px;
			height: auto;
			display: block;
			z-index: 99;
		}
		
		#main .gallery img {
			position: absolute;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			max-width: 480px;
			height: auto;
			display: block;
			z-index: 99;
		}
		
		#main .blog .item25 img,
		#main .event .item25 img {
			position: absolute;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			max-width: 480px;
			height: auto;
			z-index: 2;
			display: none;
		}
		#main .blog .item25-content,
		#main .event .item25-content {
			z-index: 1;	
		}
		
		#main .blog .item25-content h1,
		#main .event .item25-content h1 {
			position:  absolute;
			bottom: 65px;
			text-transform: lowercase;
			font-size: 33px;
			line-height: 42px;
			font-weight: 300;
			margin: 0;	
			padding: 0 45px 0 45px;
			text-align: left;
			max-width: 390px;
		}
		
		#main .blog .item25-content h1 p,
		#main .event .item25-content h1 p {
			text-align: left;
			padding: 0;
			margin: 0 0 10px 0;
			font-weight: 400;
			font-size: 15px;
			line-height: 22px;
			text-transform: none;
		}
	
	
	#main .thumbnail-wrapper {
		position: absolute;
		top: 280px;
		width: 348px;
		height: 56px;
		margin: 0 0 0 0;
		display: none;
	}
	
	#main #googlemaps {
		max-width: 480px;
		width: 100%;
		height: 240px;
		clear: both;
		position:relative;
		display: block;
		overflow:hidden;
	}
	
	#main #table-wrapper {
		display: -webkit-flex;
   		display: flex;
   		-webkit-flex-flow: column;
        flex-flow: column;
	}
	
	#main .content {
		float: none;
		margin: 0 0 0px 0;
		padding: 0;
		max-width: 480px;
		width: 100%;
		-webkit-order: 1;
        order: 1;
	}
	
		#main .content h1 {
			text-transform: lowercase;
			font-weight: 300;
			font-size: 33px;
			line-height: 42px;
			margin: 0;	
			padding: 56px 0 27px 0;
		}
		
		#main .content-inner {
			padding: 0 20px 0 20px;
		}
	
	#main .sidebar {
		float: none;
		margin: 60px 0px 0 0;
		padding: 0;
		max-width: 480px;
		width: 100%;
		-webkit-order: 2;
        order: 2;
	}
	
		#main .sidebar .item50{
			position: relative;
			float: left;
			width: 100%;
			overflow: hidden;
			background: #FFFFFF;
		}
		#main .sidebar .item50:before{
			content: "";
			display: block;
			padding-top: 100%;
		}
		
		#main .sidebar .item50:nth-child(3n+1),
		#main .sidebar .item50:nth-child(3n+1) a {
			background: #adbe38;
			color: #FFFFFF;
		}
		#main .sidebar .item50:nth-child(3n+2),
		#main .sidebar .item50:nth-child(3n+2) a {
			background: #FFFFFF;
			color: #000000;
		}
		#main .sidebar .item50:nth-child(3n+0),
		#main .sidebar .item50:nth-child(3n+0) a {
			background: #5e666c;
			color: #FFFFFF;
		}
		
		#main .sidebar .item50 img {
			position: absolute;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			max-width: 480px;
			height: auto;
			z-index: 1;
			display: none;
		}
		
		#main .sidebar .item50-content{
			position:  absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			text-align: left;
			padding: 0 25px 0 45px;
		}
		
		#main .sidebar .item50-content h1 {
			position:  absolute;
			bottom: 65px;
			text-transform: lowercase;
			font-weight: 300;
			font-size: 33px;
			line-height: 42px;
			margin: 0;	
			padding: 0 25px 0 0;
		}
		
		#main .sidebar .item50-content h1 p {
			text-align: left;
			padding: 0;
			margin: 0 0 15px 0;
			font-weight: 400;
			font-size: 15px;
			line-height: 22px;
			text-transform: none;
		}
		
		.use-floating-validation-tip span.wpcf7-not-valid-tip { 
			position: absolute;
			top: -8px;
			left: 0;
			z-index: 100;
			border: none;
			background: #FFFFFF;
			padding: 2% 2% 2% 3%;
			margin: 0;
			color: #888888;
			font-family: 'Titillium Web', sans-serif;
			font-weight: 400;
			font-size: 15px;
		}
		
}

@media screen and (max-width: 400px) {
	
		#main .item25-content h1 {
			position:  absolute;
			bottom: 30%;
			text-transform: lowercase;
			font-size: 33px;
			line-height: 42px;
			font-weight: 300;
			margin: 0;	
			padding: 0 0 0 0;
			text-align: center;
			width: 100%;
		}
		
		#main .blog .item25-content h1,
		#main .event .item25-content h1 {
			position:  absolute;
			bottom: 65px;
			text-transform: lowercase;
			font-size: 29px;
			line-height: 39px;
			font-weight: 300;
			margin: 0;	
			padding: 0 45px 0 45px;
			text-align: left;
		}
		
		#main .sidebar .item50-content h1 {
			position:  absolute;
			bottom: 65px;
			text-transform: lowercase;
			font-weight: 300;
			font-size: 29px;
			line-height: 39px;
			margin: 0;	
			padding: 0 25px 0 0;
		}
		
		.use-floating-validation-tip span.wpcf7-not-valid-tip { 
			position: absolute;
			top: -5px;
			left: 0;
			z-index: 100;
			border: none;
			background: #FFFFFF;
			padding: 2% 2% 2% 3%;
			margin: 0;
			color: #888888;
			font-family: 'Titillium Web', sans-serif;
			font-weight: 400;
			font-size: 15px;
		}
}