/*********************************************************************************************************************

											ALL STYLES BY:


____________________________________________/\\\\\\__________________________________________________/\\\____
 ___________________________________________\////\\\________________________________________________/\\\\\____
  _________________________________/\\\_________\/\\\_____/\\\_____________________________________/\\\/\\\____
   _____/\\\\\_____/\\\____/\\\__/\\\\\\\\\\\____\/\\\____\///___/\\/\\\\\\_______/\\\\\\\\_______/\\\/\/\\\____
    ___/\\\///\\\__\/\\\___\/\\\_\////\\\////_____\/\\\_____/\\\_\/\\\////\\\____/\\\/////\\\____/\\\/__\/\\\____
     __/\\\__\//\\\_\/\\\___\/\\\____\/\\\_________\/\\\____\/\\\_\/\\\__\//\\\__/\\\\\\\\\\\___/\\\\\\\\\\\\\\\\_
      _\//\\\__/\\\__\/\\\___\/\\\____\/\\\_/\\_____\/\\\____\/\\\_\/\\\___\/\\\_\//\\///////___\///////////\\\//__
       __\///\\\\\/___\//\\\\\\\\\_____\//\\\\\____/\\\\\\\\\_\/\\\_\/\\\___\/\\\__\//\\\\\\\\\\___________\/\\\____
        ____\/////______\/////////_______\/////____\/////////__\///__\///____\///____\//////////____________\///_____




**********************************************************************************************************************/


/* New Box Model - Border Box
----------------------------------------------------------------------------------------------------*/
*,*:before,*:after {
   -moz-box-sizing:    border-box;   /* Firefox 1, probably can drop this */
   -webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */
    box-sizing:        border-box;   /* Everything else */
}

/* General Semantic Tags & Reset
----------------------------------------------------------------------------------------------------*/
div,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {
    display:block;position: relative;
}
	nav h1 { display: none; }
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
html,body{margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;/* font-size:100%;line-height:1; */font-family:inherit}
html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
a:hover,a:active{outline:0}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}
img{-ms-interpolation-mode:bicubic}*{-webkit-box-sizing:border-box;-khtml-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
html,body{height:100%}

/* Vertical Flow
----------------------------------------------------------------------------------------------------*/
p,dl,hr,ol,ul,pre,table,fieldset,video,audio,iframe {margin-bottom: 20px;font-weight: normal;}

/* Tables
----------------------------------------------------------------------------------------------------*/
table {border-collapse:collapse; border-spacing:0; /* table-layout:fixed; */}
td, th {vertical-align: top; padding-right: 15px; /* padding-bottom: 7px; */}
td:last-child {padding-right: 0;}

/* Fonts
----------------------------------------------------------------------------------------------------*/
@font-face {font-family: 'DIN-MediumRegular'; src: url('/css/fonts/DINM____.eot'); src: local('☺'), url('/css/fonts/DINM____.eot?#iefix') format('embedded-opentype'), 	 url('/css/fonts/DINM____.woff') format('woff'), url('/css/fonts/DINM____.ttf') format('truetype'), url('/css/fonts/DINM____.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'DIN-LightRegular'; src: url('/css/fonts/DINL____.eot'); src: local('☺'), url('/css/fonts/DINL____.eot?#iefix') format('embedded-opentype'), 	 url('/css/fonts/DINL____.woff') format('woff'), url('/css/fonts/DINL____.ttf') format('truetype'), url('/css/fonts/DINL____.svg') format('svg'); font-weight: normal; font-style: normal; }

/* !Make IE behave like a normal browser
----------------------------------------------------------------------------------------------------*/
canvas { -ms-touch-action: double-tap-zoom; }

/* !Body
----------------------------------------------------------------------------------------------------*/

body { background: #f3f3f3; font-size: 15px; line-height: 20px; color: #252525; font-style: normal; font-family: 'DIN-LightRegular', sans-serif; }


/* !Links
----------------------------------------------------------------------------------------------------*/
a, a:visited { color: #29a4ae; text-decoration: none; }
a:hover, a:focus, a:active, .link:hover { color:#red; }

#social a, #social a:visited { color: #252525; }

/* Image links remove the Magic border below images (another method would be to make images display as block) */
a img, a:hover img {border: none!important; text-decoration: none; vertical-align: bottom; background: none;}


/* !Headings & Formatting
----------------------------------------------------------------------------------------------------*/
h1, h2, h3, h4 {font-family: 'DIN-MediumRegular', sans-serif; font-weight: normal; font-style: normal; font-variant: normal;
	/* text-shadow: #252525 0px 1px; */ line-height: 20px; margin-bottom: 20px; color: #252525; text-transform: uppercase;}

h1 { font-size: 18px;  }
h2 {font-size: 18px; }
h2 a, h2 a:visited { }
h3 { font-size: 15px; }
h4 { font-size: 15px; margin-bottom: 0em; } /* wie h3 aber kein margin bottom */

/* Inline Formats
----------------------------------------------------------------------------------------------------*/
i, em {font-size: 14px; color: #333; font-weight: normal; color: #000; font-style: italic;}
b {font-weight:normal; color:#252525; text-shadow: #fff 0px 1px;}

.white h2, .white h3, .white h4, .white p, .white a, .white a:visited, .white table td, .white strong, .white h1 {color: #f8f8f8;}
.white h4 {text-transform: none;}
.white a, .white a:visited {color: #29a4ae!important;}
.white a:hover {color: red!important;}


/* Layout DIVS
----------------------------------------------------------------------------------------------------*/

	#header { width: 100%;  text-align: center; }
		#social { margin-top: 20px; margin-bottom: 20px; }
		#logo { margin-bottom: 20px; }
			#logo img { width: 35%; max-width: 380px; min-width: 250px; height: auto; }


	#main_nav { width: 100%; background: #252525; text-align: center; padding: 10px 0; }
		#main_nav ul { width: 100%; max-width: 600px; list-style: none; margin: 0 auto; }
		#main_nav ul li { display: inline; padding-left: 7px; padding-right: 7px; }
		#main_nav ul li a { color: #f7f7f7; text-transform: uppercase; font-size: 18px; line-height: 30px; }
		#main_nav ul li.here a, #main_nav ul li a:hover { color: red; }

	#sub_nav { width: 100%; text-align: center; padding: 10px 0; margin-bottom: 10px; }
		#sub_nav ul { width: 100%; max-width: 600px; list-style: none; margin: 0 auto; }
		#sub_nav ul li { display: inline; padding-left: 2.5px; padding-right: 2.5px; }
		#sub_nav ul li a { background: #252525; color: #ffffff; font-size: 14px; line-height: 16px;
			padding: 2px 5px; border-radius: 5px;
		}
		#sub_nav ul li.here a, #sub_nav ul li a:hover { color: red; }

	#calendar { width: 100%; background-color: gainsboro; margin-bottom: 20px; }
		#next_events { max-width: 600px; padding: 20px 0; margin: 0 auto; }
			#next_events table { margin-bottom: 0px; }
			#next_events a { color: #252525; }
			#next_events a:hover { color: red; }
				.date_col { min-width: 170px; text-align: right; /* padding-bottom: 20px; */ }
				.entry_col { text-align: left; /* padding-bottom: 20px; */ }
					.entry_col p { margin-bottom: 0; }


	/* Static
	----------------------------------------------------------------------------------------------------*/
	#static_container { width: 100%; max-width: 600px; min-width: 320px; margin: 0 auto; margin-top: 30px; padding: 0 20px;}

		/* Slideshow with ul > li
		----------------------------------------------------------------------------------------------------*/
		.thumbnail_list { list-style: none; font-size: 0; }
		.thumbnail_list.columns3 li { display: inline-block; vertical-align: top; width: 32%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; }
		.thumbnail_list.columns5 li { display: inline-block; vertical-align: top; width: 19%; margin-left: 0.5%; margin-right: 0.5%; margin-bottom: 1%; }

			.thumbnail_list li.first { margin-left: 0; }
			.thumbnail_list li.last { margin-right: 0; }
		.thumbnail_list img { display: block; width: 100%; height: auto; }



	/* shop
	----------------------------------------------------------------------------------------------------*/
	#shop_menu_item { display: inline; }

	#shop_container { width: 100%; max-width: 850px; min-width: 320px; margin: 0 auto; margin-top: 30px; margin-bottom: 30px; }
		.shop_container {position: relative; width: 850px; float: left; margin-bottom: 20px;}
			.products_container {position: relative; float: left; width: 810px;}
				.products_thumb { position: relative; float: left; margin-right: 20px; width: 197px; overflow: hidden; margin-bottom: 20px; }
				.products_thumb p {margin: 0;}
				.no_margin_right { margin-right: 0;}

		#cartbox {position: relative; float: left; width: 850px; background: #252525; padding: 20px 20px 0 20px; margin-bottom: 20px;}
		.cartbox {padding-top: 20px;}

		.checkout_table {width: 850px;}
			.checkout_table thead th { padding: 5px; color: #f8f8f8; background: #252525; margin-bottom: 15px;}
			.checkout_table tr.product td { padding-top: 15px;}
			.checkout_table td.first {padding-top: 15px;}

		.checkout_table td {vertical-align: top;}

		.content_left { position: relative; /* width: 580px; */ width: 68%; float: left; padding-right: 20px; margin-bottom: 20px; }
		.content_right { position: relative; /* width: 250px; */ width: 32%; float: left; margin-bottom: 20px; }
			.content_title {position: relative; width: 100%; padding: 20px; background: #252525; margin-bottom: 20px;}
			.content_more {position: relative; width: 100%; border-bottom: 2px solid #252525; margin-bottom: 30px; /* font-size: 0.8em; */ width: 100%;}

		.shop_style p {margin-bottom: 0;}
		.price {font-size: 20px; line-height: 25px;}
		.line {width: 100%; height: 4px; margin-bottom: 20px; background: #252525;}



		/* Form Styles
		----------------------------------------------------------------------------------------------------*/

		input[type="text"],
		input[type="email"],
		input[type="number"],
		input[type="tel"],
		input[type="password"],
		textarea,
		select {
			position: relative;
			width: 100%;
			-webkit-appearance: none;
			-moz-appearance:    none;
			appearance:         none;
			background: white; color: #252525;
			border: 1px solid #252525; border-radius: 0;
			padding: 10px;
			font-size: 15px; line-height: 20px;
		}

		input[type=number]::-webkit-inner-spin-button,
		input[type=number]::-webkit-outer-spin-button
		{
		  -webkit-appearance: none;
		  margin: 0;
		}
		input[type=number]
		{
		  -moz-appearance: textfield;
		}

		select {
			padding-top: 7px; padding-bottom: 8px;
			padding-right: 40px;
			min-width: 110px;
			background: url(/images/layout/dropdown-arrow.svg) no-repeat calc(100% - 10px) center transparent;
			background-size: 25px;
			margin-bottom: 20px;
		}


		button, input[type="submit"] {
			-webkit-appearance: none;
			-moz-appearance:    none;
			appearance:         none;
			background: none;
			border: none;
			background: #252525; color: #fff;
			padding: 10px;
			font-size: 15px; line-height: 20px;
		}

		.button, a.button, a:hover.button {
			-webkit-appearance: none;
			-moz-appearance:    none;
			appearance:         none;
			border: none; box-shadow: none; text-decoration: none;
			display: inline-block; text-align: center;
			background: #252525; color: #fff;
			font-size: 15px; line-height: 20px;
			padding: 10px;
		}


	/* home
	----------------------------------------------------------------------------------------------------*/
	#content_container { text-align: center; margin-bottom: 30px; }

		.entry_image { display: inline-block; position: relative; padding: 20px;  }
			.hidden { display: none; }
			.entry_image img{ display:block; max-width: 100%; }


		.detail_container { width: 100%; padding: 20px; max-width: 600px; margin: 0 auto; }
			.full{ border-bottom: 2px solid white; margin-bottom: 10px; padding-bottom: 10px; }


	/* Calendar
	----------------------------------------------------------------------------------------------------*/

	#calendar_container { width: 100%; max-width: 600px; min-width: 320px; margin: 0 auto; margin-top: 30px; margin-bottom: 30px; padding: 0 20px; text-align: center;}

		.calendar_item { float: left; width: 50%; padding: 20px; }
		.calendar_title { font-size: 36px; line-height: 42px; margin-bottom: 30px; padding-bottom: 30px; text-align: center; border-bottom: 2px solid #252525; }
		.item { margin-bottom: 2%; }
		.gutter_sizer { width: 2%; }
	/*
		With masonry:
		#item_container { width: 100%; float: left; }
			.item { width: 350px; margin-bottom: 10px; }
			.gutter_sizer { width: 10px; }
	*/

	/* http://alijafarian.com/responsive-image-grids-using-css/ */

	ul.even_grid { list-style: none; font-size: 0px; /* set font to 0 */
		margin-left: -2.5%; /* should match li left margin */ }

	ul.even_grid li {
		display: inline-block;
		font-size: 15px; /* reset font to what it should be */
		margin: 0 0 0 2.5%;
		vertical-align: top;
		word-wrap: break-word;
	}

	/* class for x columns */
	ul.even_grid.columns-2 li { width: 47.5%; /* this value + 2.5 should = 50% */ }
	ul.even_grid.columns-3 li { width: 30.83%; /* this value + 2.5 should = 33% */ }
	ul.even_grid.columns-4 li { width: 22.5%; /* this value + 2.5 should = 25% */ }


/* Pagination
----------------------------------------------------------------------------------------------------*/
.article_pagination {position: relative; /* float: left; */ width: 100%; margin-bottom: 40px;}
	.article_pagination a {border: 1px solid #252525; background: #252525; color: #f7f7f7; font-weight: normal; margin: 0 2px; padding: 2px 5px;}
	.article_pagination a:hover, .article_pagination a.active {border: 1px solid #29a4ae; background: #29a4ae; color: #f7f7f7; font-weight: normal; margin: 0 2px; padding: 2px 5px;}
	.pagination_deactivated	{opacity: 0.3;}


/* Specials
----------------------------------------------------------------------------------------------------*/
.nomargin {margin-bottom: 0;}
.margin_bottom { margin-bottom: 20px;}
.no_margin_bottom { margin-bottom: 0px;}

.small {color: #666; font-size: 0.8em; }
.small a {color:#666; background: none; padding: 0;}
.small a:hover {color:#252525; }

.gray { color: grey!important; }

.full_image_width { width: 100%; height: auto; }
.full_image_height { width: 66%; height: auto; }

.video_full_width_container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-bottom: 21px;
}
.video_full_width_container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.message { color: red!important; }

.highlighted,
a.highlighted {  background:#ea690b!important; color: #fff!important; padding: 0px 4px!important; -moz-border-radius: 2px 2px 2px 2px!important; -webkit-border-top-left-radius: 2px!important; -webkit-border-top-right-radius: 2px!important; -webkit-border-bottom-right-radius: 2px!important; -webkit-border-bottom-left-radius: 2px!important;}
a:hover.highlighted {  background:none!important; color: #333!important; }

.shadow { box-shadow: 2px 2px 2px #ccc; -moz-box-shadow: 2px 2px 2px #ccc; -webkit-box-shadow: 2px 2px 2px #ccc; }
.frame {margin: 0px; margin-bottom: 7px; padding: 4px; border: 1px solid #e5e5e5; background: #fff;}

.center { text-align: center!important;}

.ACHTUNG {background: red; padding: 1em; color: #fff;}

.clear {clear: both;}
.hide { display: none!important; }


/* logged stuff
----------------------------------------------------------------------------------------------------*/

#performance_indicator {position: fixed; top: 0px; right: 0px; width: 140px; text-align: right; padding: 0 10px; background: black; color: white; font-size: 0.8em; z-index: 999;}

.toggler {display: block; margin-bottom: 1em;}
.toggler_inline {display: inline;}

.toggler_c_inline {display: inline;}

#edit_home {position: fixed; top: 0; left: 20px; z-index: 5; padding: 10px; background: #f8f8f8; border: 2px solid #252525; border-top: none;}
	#edit_home li {list-style: none; float: left; padding-right: 20px;}



/*

	MEDIA QUERIES !!

----------------------------------------------------------------------------------------------------*/


@media all and (max-width: 600px) {

	#shop_menu_item { display: none!important; } /* disable the shop */
	.thumbnail_list.columns5 li { width: 31%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; }

}