@font-face {
  font-family: 'Source Sans Pro'; 
  font-style: normal;
  font-weight: 400;
  src: url('https://hhglobal.gfm-trend.de/template/_fonts/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('https://hhglobal.gfm-trend.de/template/_fonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/source-sans-pro-v21-latin-regular.woff') format('woff'),/*  Modern Browsers*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS*/

 }
 
/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato 300'),local('Lato-300'),
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-300.woff') format('woff'), /* Modern Browsers */
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}


/*lato-regular - latin*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-regular.eot'); /*IE9 Compat Modes*/
  src: local('Lato regular'), local('Lato-regular'),
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS   */
	 
}


/*lato-700 - latin*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-700.eot'); /*IE9 Compat Modes*/
  src: local('Lato 700'), local('Lato-700'),
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-700.woff') format('woff'), /* Modern Browsers*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS*/
       url('https://hhglobal.gfm-trend.de/template/_fonts/lato-v23-latin-700.svg#Lato') format('svg'); /* Legacy iOS*/
}


/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('https://hhglobal.gfm-trend.de/template/_fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto regular'),local('Roboto-regular'),
       url('.https://hhglobal.gfm-trend.de/template/_fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://hhglobal.gfm-trend.de/template/_fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://hhglobal.gfm-trend.de/template/_fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://hhglobal.gfm-trend.de/template/_fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://hhglobal.gfm-trend.de/template/_fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}



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

html,
button,
input,
select,
textarea {
	color: #494747;
}

html {
	overflow-y: scroll;
}

html,
body {
	height: 100%;
	width: 100%;
}

body {
	font-size: 1em;
	line-height: 1.3;
	color: #494747;
	font: 400 1em/22px "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
}

::-moz-selection {
	background: #c9c9c9;
	text-shadow: none;
}

::selection {
	background: #c9c9c9;
	text-shadow: none;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

img {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	width: auto;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

h1, .h1 {
	font-family: 'Source Sans Pro', sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	font-size: 1.8em;
}

h2 {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 1.6em;
}

h3 {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 1.4em;
}

h4 {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	margin: 1em 0;
	font-size: 1.2em;
}

p {
	font-weight: 400;
}

blockquote {
	font-weight: 400;
}

pre {
	font-weight: 400;
}

a {
	outline: 0;
	text-decoration: none;
	color: #494747;
}

a:hover,
a:active {
	text-decoration: underline;
}

a:hover,
a:active,
a:focus {
	outline: 0;
}

ul {
	margin: 0;
}

.left {
	float: left;
}

.right {
	float: right;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

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


/*Processwire Image Class#############################################*/

.align_right {
	float: right;
	margin-left: 15px;
	margin-right: 0;
	margin-top: 0;
}

.align_left {
	float: left;
	margin-left: 0;
	margin-right: 15px;
	margin-top: 0;
}

.align_center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


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

.red {
	color: #af262a;
}

.green {
	color: #139e2f;
}

.alert {
	color: #af262a;
	font-weight: bold;
}

.mailok {
	color: #139e2f;
	font-weight: bold;
}


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

.button {
	-webkit-box-shadow: inset 0px 1px 0px 0px #fff;
	box-shadow: inset 0px 1px 0px 0px #fff;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color: #ededed;
	border: 1px solid #dcdcdc;
	display: inline-block;
	color: #777;
	font-family: arial;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	text-shadow: 1px 1px 0px #fff;
	border-radius: 4px;
	padding: 5px 30px;
}

.button:hover {
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color: #dfdfdf;
}

.button:active {
	position: relative;
	top: 1px;
}

.editpage {
	margin-left: 5px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9000;
	padding: 1px 5px;
}


/* ===============================================================
	Site Styles
	============================================================== */


/*layout #############################################################*/

body {
	background-color: #3A3A3A;
	/*background-color: #E3E3E3;*/
	
}

.slider.headerimage{
	clear: both;
	max-width: 1000px;
	max-height: 500px;
	background: #c9c6c1;
	background: url(images/spin.gif) center no-repeat;
	background-color: rgba(255, 255, 255, 0.95);
	margin: 0 auto;
	max-height: 500px;
	overflow: hidden;

}

.flexslider {
	visibility: hidden;
	margin: 0 auto;
	max-width: 1000px;
	overflow: hidden;
	/*background: #c9c6c1;*/
	background-color: rgba(255, 255, 255, 0.95);
}

.flexslider .slides img {
	flex-shrink:0;
}


/*slider home#####################################################*/

.page-home .slider.headerimage {
	max-width: 100%;
	max-height: 100%;
}

.page-home .flexslider {
	max-width: 100%;
	max-height: 100%;
	position: absolute;
}

.page-home .flexslider .slides,
.page-home .flexslider .slides li {
	width: 100%;
	height: 100%;
}

.page-home .flexslider ul li img {
	min-height: 100%;
	min-width: 100%;
	object-fit: cover;
}

.home-scrolltocontent {
	position: absolute;
	width: 50px;
	height: 50px;
	z-index: 10;
	left: 50%;
	right: 50%;
	cursor: pointer;
	margin-left: -25px;
	border-radius: 50%;
	border: 1px solid #eee;
	box-shadow: 0 2px 5px 0 rgba(1, 1, 1, 0.2);
}

.home-scrolltocontent:before {
	content: "\f103";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	color: #eee;
	font-size: 40px;
	position: absolute;
	top: 15px;
	left: 12px;
}

/*social-buttons home#####################################################*/
.social-buttons{
	position: fixed;
	right:-100px;
	top:180px;
	z-index: 11;
	 background: rgba(238, 238, 238, 0.6);
	box-shadow: 0 2px 5px 0 rgba(1, 1, 1, 0.2);
	border-radius: 4px;
	padding:5px;
	/*border: 1px solid #eee;*/
	-webkit-transition: right 0.8s ease-in;
	-moz-transition: right 0.8s ease-in;
	-o-transition: right 0.8s ease-in;
	-ms-transition: right 0.8s ease-in;
	transition: right 0.8s ease-in;
}

.social-buttons a{
	display: block;
	font-size: 30px;
	color: rgba(4, 4, 4, 0.4);

}

.social-buttons .button{
	background: rgba(238, 238, 238, 0.7);
	border-radius: 4px;
	width: 50px;
	height: 50px;
	margin-bottom: 5px;
	padding: 5px;
	text-align: center;
}

.social-buttons i{
	display: block;
	position: relative;
}

.social-buttons .button:last-child{
	margin-bottom: 0;
}
.social-buttons a:hover{
	text-decoration: none;
}

.social-buttons a:hover {
	background:rgba(238, 238, 238, 1);
}

.social-kontakt i{
margin: 5px  0 0 0;
}

.social-facebook i{
margin: 5px  0 0 -3px;
}

.social-youtube i{
margin: 5px  0 0 1px;
}

.social-instagramm i{
margin: 5px  0 0 1px;
}

.social-pinterest i{
margin: 5px  0 0 1px;
}


/*backgroundimage ################################################*/

.backgroundimage {
	position: fixed;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
}

.backgroundimage img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	min-width: 50%;
	min-height: 50%;
	opacity: 0.6;
}

.page-home .backgroundimage img {
	opacity: 0.2;
}

.maincontainer {
	position: relative;
	z-index: 10;
}

header {
	max-width: 100%;
	margin: 0 auto 0px auto;
	z-index: 100;
	position: relative;
	background-color: rgba(255, 255, 255, 0.95);
}

.headertop {
	max-width: 1000px;
	margin: 0 auto;
}


/*logo rechts*/

.logoright .logo {
	margin: 20px 20px 20px 0;
	float: right;
}


/*logo links*/

.logoleft .logo {
	margin: 20px 60px 20px 20px;
	float: left;
}

.headertop .logo img {
	height: 70px;
}

.headertop .haus {
	padding: 20px;
	color: #323232;
}


/*logo rechts*/

.logoright .haus h1, .logoright .haus .h1{
	float: left;
	margin: 20px 0 0 0;
	font-size: 2.0em;
	text-shadow: 0 2px 0px rgba(50, 50, 50, 0.1);
}


/*logo links*/

.logoleft .haus h1, .logoleft .haus .h1{
	float: left;
	margin: 10px 0 0 0;
	font-size: 1.8em;
	text-shadow: 0 2px 0px rgba(50, 50, 50, 0.1);
}

.headertop .haus h2 {
	clear: both;
	float: left;
	margin: 0;
	font-size: 1.1em;
}


/*navigation*/

nav {
	margin-top: -10px;
	position: relative;
	z-index: 99;
	max-width: 100%;
	/*background-color: rgba(255, 255, 255, 1);*/
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 5px 0px rgba(1, 1, 1, 0.5);
}

.makesticky {
	transition: top 0.8s linear 0s;
}

.stickyani {
	top: -40px;
}

.stickytop {
	position: fixed;
	width: 100%;
	top: 4px;
}

.navigation {
	max-width: 1000px;
	margin: 10px auto 0 auto;
	clear: left;
	z-index: 500;
}

.container {
	/*background: #e7e8e8;*/
	margin: 0;
	padding: 0;
	
}

.main {
	margin: 0 auto;
	position: relative;
	max-width: 1000px;
	background-color: rgba(255, 255, 255, 0.95);
	padding: 0 20px 50px 20px;
	min-height: 300px;
	z-index: 98;
	overflow: hidden;
}

.page-home .container {
	/*background-color: rgb(50, 50, 50);*/
}

.page-home .main {
	background: none;
}

.page-home .main h1,
.page-home .main h2,
.page-home .main .content,
.page-home .link_weitere_informationen a {
	color: #eee;
}

.main h1 {
	display: inline-block;
	margin: 30px 0 10px 0;
	width: 100%;
	line-height: 1.2em;
}

.main h2 {
	margin-bottom: 40px;
}

.main img {}

.content {}

.content li {
	margin-left: -20px;
	list-style: square;
	line-height: 1.8em;
}

.teaser {
	margin-bottom: 20px;
}


/* navigation open close############################################*/

.opennav {
	display: none;
}

.closenav {
	display: none;
}


/* navigation level1################################################*/

.topnav {
	position: relative;
	list-style: none;
	margin-left: -40px;
	z-index: 900;
}

.topnav li {
	position: relative;
	display: inline;
	margin: 0 1px 0 0;
	padding: 8px 8px 5px 8px;
}

.topnav a {
	display: inline-block;
	padding: 10px;
	color: #323232;
}

.topnav li a:hover {
	color: #7a7a7a;
}

.topnav .active {
	border-top: 2px solid rgba(50, 50, 50, 0.8);
}

.topnav ul {
	position: absolute;
	left: -9999px;
	margin: 0 0 0 -5px;
	padding: 0;
	min-width: 120px;
	text-align: left;
	z-index: 901;
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 2px solid rgba(50, 50, 50, 0.8);
	opacity: 0;
	transition: opacity 0.4s, margin 0.4s;
}

.topnav ul li {
	display: block;
	padding: 0px 8px 0px 8px;
}

.topnav li:hover ul {
	left: 0;
	margin: 0 0 0 0;
	opacity: 1;
}

.topnav li:hover a {
	text-decoration: none;
}

.topnav li:hover ul a {
	text-decoration: none;
}

.topnav li:hover ul a:hover {
	text-decoration: none;
}

.topnav ul a {
	white-space: nowrap;
	display: block;
}

.topnav .submenu .active {
	border-top: 0;
}

.topnav .submenu .active:before {
	content: "\f105";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	padding-right: 0.5em;
	position: absolute;
	top: 5px;
	left: 5px;
}


/*home icon*/

.m_home span {
	display: none;
}

.m_home i {
	font-size: 1.2em;
}

.topnav .m_home {
	border-top: none !important;
	padding-right: 0;
}


/*footer#########################################################*/

footer {
	position: relative;
	padding: 0 0 20px 0;
	z-index: 1000;
	width: 100%;
	box-shadow: 0 -5px 5px -5px rgba(1, 1, 1, 0.5);
	background-color: rgba(50, 50, 50, 0.8);
	font-size: 0.8em;
	color: #eee;
}

.page-home footer {
	bottom: 0;
}

footer a {
	color: #eee;
}

.footercontainer {
	max-width: 1000px;
	margin: 0 auto;
	padding: 10px 20px 0 20px;
	margin-bottom: 100px;
}

.footernav {
	width: 100%;
	padding: 10px 0 0 30px;
	letter-spacing: 0.05em;
	
}

.footernav li {
	float: right;
	padding-bottom: 5px;
	list-style: none;
}

.footernav li {
	margin-left: 20px;
}

.footernav li:last-child {
	margin-left: 0;
}

.footernav a {
	display: block;
	color: #fff;
}

.footercontainer .oeffnungszeiten {}

.totop {
	clear: both;
	max-width: 1000px;
	margin: 20px auto 30px auto;
	padding: 5px;
}

#scrolltotop {
	float: right;
	color: rgba(58, 58, 58, 0.30);
	text-decoration: none;
	transition: color 0.8s;
	position: relative;
	height: 20px;
	display: inline-block;
	padding: 20px 25px 0 0;
	margin: -20px 20px 0 0;
}

#scrolltotop:hover {
	color: rgba(58, 58, 58, 0.8);
}

#scrolltotop i {
	top: 10px;
}

#scrolltotop .fa-angle-double-up {
	margin: 4px 0 0 1px;
}

.seotext {
	clear: both;
	background: #eee;
	border-bottom: 2px solid #e3e3e3;
	border-radius: 4px;
	font-size: 0.8em;
	margin-top: 30px;
	padding: 20px 30px;
}

.cookie-conf{
	position: fixed;
	z-index: 9998;
	right:-78px;
	bottom: 2px;
	background: rgba(255,255,255,0.8);
	border: 1px solid #ddd;
	color: #444;
	padding: 2px;
	font-size: 0.8em;
	-webkit-transition: all 0.2s ease;
	  -moz-transition: all 0.2s  ease;
	  -o-transition: all 0.2s  ease;
	  -ms-transition: all 0.2s  ease;
	  transition: all 0.2s  ease;
}

.cookie-conf:hover{
	right:2px;
}


.cookie-conf i{
	margin-right: 5px;
}

/* ==================================================
	  Page Styles
	================================================= */


/*home##########################################################*/


/*boxen sortiment*/

.homesortiment {
	margin: 0 0 40px -20px;
}

.homesortiment.animate.scroll {
	opacity: 0;
	transform: scale(1.08, 1.08);
	transition: all 0.8s ease;
}

.homesortiment.animate.in-view {
	opacity: 1;
	transform: scale(1, 1);
}

.homesortiment .col {}

.homesortiment .box {
	box-shadow: 0 0px 2px 0px rgba(1, 1, 1, 0.2);
	height: 150px;
	position: relative;
	overflow: hidden;
}

.homesortiment .box img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	backface-visibility: hidden;
	/*transition: all 0.3s linear 0s;*/
}

.homesortiment .box:hover img {
	/*transform: scale(1.03, 1.03);*/
}

.homesortiment .box p:before {
	content: "\f105";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	color: #eee;
	font-size: 18px;
	padding-right: 0.5em;
	position: absolute;
	top: 10px;
	left: 5px;
	opacity: 0;
	transition: opacity.3s ease;
}

.homesortiment .box p {
	position: absolute;
	display: block;
	width: 100%;
	bottom: -16px;
	background: rgba(50, 50, 50, 0.8);
	padding: 2px 10px;
	color: #eee;
	transition: padding 0.3s ease;
}

.homesortiment .box:hover p {
	padding: 10px 10px 10px 20px;
}

.homesortiment .box:hover p:before {
	opacity: 1;
}

.prospekthome {
	margin-top: 25px;
	background: #eee;
	/*border-bottom:  2px solid #eee;*/
	border-radius: 4px!important;
	padding: 5px;
}

.prospekthome .row {}

.prospekthome .col {
	margin: auto !important;
}

.prospekthome .prospektcontainer {
	width: 66%;
	/*margin: auto;*/
}

.prospekthome .col a {
	float: left;
	display: block;
}

.prospekthome .col a:hover {
	text-decoration: none;
}

.prospekthome .prospekt_text {
	margin-top: 10px;
}

.prospekthome .text {
	width: 25%;
	float: left;
	background: #eee;
	box-shadow: 0 0 2px 0 rgba(1, 1, 1, 0.2);
	min-height: 120px;
	padding: 5px 10px 0 20px;
	position: relative;
	text-shadow: 1px 1px #fff;
	margin-left: 0;
}

.prospekthome .homeprospekt {
	width: 50%;
}

.prospekthome .link {
	width: 25%;
	float: left;
	background: #eee;
	box-shadow: 0 0 2px 0 rgba(1, 1, 1, 0.2);
	min-height: 120px;
	padding: 12px 10px 0;
	position: relative;
	text-shadow: 1px 1px #fff;
	margin-left: 0;
}

.prospekthome .link p {
	display: block;
	margin: 33px 0 0 5px;
}

.prospekthome .link i {
	position: absolute;
	right: 10px;
	top: 5px;
	font-size: 100px;
	display: block;
	color: #E3E3E3;
	transition: color 0.3s ease-in-out;
}

.prospekthome .col a:hover i {
	color: #494747;
}

.news {
	padding-top: 20px;
}

.news .row {
	margin-bottom: 20px;
	padding: 20px;
	border-bottom: 2px solid #eee;
	background: #fff;
}

.newshome {
	margin-top: -30px;
}

.newshome .row {
	border-radius: 4px;
}

.news .row:last-child {
	margin-bottom: 0;
}

.news .image {}

.news h3 {
	max-width: 88%;
	margin-top: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.news .date {
	display: block;
	float: right;
	font-size: 0.8em;
	background-color: #eee;
	padding: 10px;
	/*color:#eee;*/
	margin: -20px -18px 0 0;
	border-radius: 0 0 10px 10px;
}

.news .intro {
	margin-top: -10px;
	padding: 0 0 0 30px;
}

.newsartikel {
	border-bottom: 2px solid #eee;
}

.newsartikel h1 {
	border-bottom: 1px solid #eee;
}

.newsartikel .date {
	display: block;
	float: right;
	font-size: 0.8em;
	margin-top: -40px;
}

.MarkupPagerNav {
	display: inline-block;
	font-size: 1em;
	margin: 30px 0 20px -40px;
}

.MarkupPagerNav li {
	display: inline;
	list-style: outside none none;
	margin: 0;
}

.MarkupPagerNav li a,
.MarkupPagerNav li.MarkupPagerNavSeparator {
	text-decoration: none;
	display: block;
	float: left;
	margin-right: 3px;
	padding: 0 2px;
	text-transform: uppercase;
}

.MarkupPagerNav li.MarkupPagerNavOn a {
	color: #af262a;
}

.MarkupPagerNav li a:hover {
	color: #af262a;
	text-decoration: none;
}


/*anfahrt#########################################################*/

.anfahrt .hausdaten {
	padding-left: 20px;
}

.anfahrt .hausdaten .addresse {
	margin-top: -20px;
	border-bottom: 2px solid #eee;
}

.anfahrt .hausdaten .oeffnungszeiten {
	margin-top: 40px;
	border-bottom: 2px solid #eee;
}

.gmap {
	width: 100%;
	height: 500px;
}

.gmap iframe{
	width: 100%;
	height: 500px;
 border: 0;
}


/*prospekte#######################################################*/

.prospekte :hover {
	text-decoration: none;
}

.prospekte .col {}

.prospekt {
	position: relative;
	background: #eee;
	box-shadow: 0 0px 2px 0px rgba(1, 1, 1, 0.2);
	min-height: 120px;
	padding: 10px 10px 0 10px;
}

.prospekt .prospekt_image {
	float: left;
	width: 35%;
	overflow: hidden;
}

.prospekt .prospekt_image img {}

.prospekt h4 {
	margin: 0 0 -10px 0;
	text-shadow: 1px 1px #fff;
}

.prospekt .prospekt_text {
	display: block;
	float: left;
	width: 65%;
	font-size: 0.85em;
}

.prospekt:hover:after {
	background: #000;
}


/*image overlay#################################################*/

.prospekt .mask {
	/*cursor: pointer;*/
	color: #fff;
	padding: 40px 20px 20px 20px;
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	background-color: rgba(50, 50, 50, 0.8);
	transition: all 0.3s ease-in-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.prospekt:hover .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.prospekt .mask p {
	margin: auto;
	text-align: center;
}

.prospekt .mask p:before {
	content: "\f08e";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	color: #eee;
	font-size: 18px;
	padding-right: 0.5em;
}


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


/*animate########################################################*/

.animate {}

.produktbox .animate.scroll,
.hausprodukte .animate.scroll {
	position: relative;
	opacity: 0;
	-moz-transition: all 500ms linear;
	-webkit-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
	-moz-transform: translate(0px, 30px);
	-webkit-transform: translate(0px, 30px);
	-o-transform: translate(0px, 30px);
	-ms-transform: translate(0px, 30px);
	transform: translate(0px, 30px);
}

.produktbox .animate.in-view,
.hausprodukte .animate.in-view {
	opacity: 1;
	-moz-transform: translate(0px, 0px, );
	-webkit-transform: translate(0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
}


/*scheinen########################################################*/

.produktuebersicht {}

.produktuebersicht .col {}

.produktuebersicht .box {
	box-shadow: 0 0px 2px 0px rgba(1, 1, 1, 0.2);
	height: 300px;
	position: relative;
}

.produktuebersicht .box img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.produktuebersicht .box p:before {
	content: "\f105";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	color: #eee;
	font-size: 18px;
	padding-right: 0.5em;
	position: absolute;
	top: 10px;
	left: 5px;
	opacity: 0;
	transition: opacity.3s ease;
}

.produktuebersicht .box p {
	position: absolute;
	display: block;
	width: 100%;
	bottom: -16px;
	background: rgba(50, 50, 50, 0.8);
	padding: 10px;
	color: #eee;
	transition: padding 0.3s ease;
}

.produktuebersicht .box:hover p {
	padding: 10px 10px 10px 20px;
}

.produktuebersicht .box:hover p:before {
	opacity: 1;
}


/*scheinen / sortiment detail##########################################*/

.produktbox {}

.produktbox .row {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 2px solid #eee;
}

.produktbox .img {
	background: #eee;
	box-shadow: 0 0px 2px 0px rgba(1, 1, 1, 0.2);
}

.produktbox .img img {
	width: 100%;
}

.produktbox .txt {
	padding: 0 10px 10px 40px;
}


/*ausstellungsstücke###############################################*/

.hausprodukte {
	border-top: 2px solid #eee;
	margin-top: 20px;
}

.hausprodukte .row {
	margin-bottom: 20px;
	padding: 0;
	background: #eee;
	border-bottom: 2px solid #bcbcbc;
	overflow: hidden;
}

.hausprodukte .col {
	margin-top: -10px;
}

.hausprodukte .row:first-child {}

.hausprodukte .popup {
	box-shadow: 0 0px 2px 0px rgba(1, 1, 1, 0.2);
	height: 300px;
	position: relative;
}

.hausprodukte .popup img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.hausprodukte .popup:last-child {
	margin-top: 10px;
}

.hausprodukte .txt {
	padding: 10px 10px 10px 40px;
}

.hausprodukte .preise {
	width: 100%;
	border-radius: 4px;
}

.hausprodukte .preisneu {
	font-size: 1.3em;
	color: #af262a;
	text-shadow: 1px 1px #fff;
	letter-spacing: 1px;
}

.hausprodukte .trenner {
	font-size: 0.9em;
	padding-left: 10px;
}

.hausprodukte .preisalt {
	font-size: 0.9em;
}

.pagination {
	margin-top: -20px;
}

.pagination .pagination-nav {}

.pagination .fa-angle-left,
.pagination .fa-angle-right {
	position: relative;
	font-size: 30px;
	top: 5px;
}

.pagination .paginate {
	padding: 0 1px;
	font-size: 16px;
}

.pagination .aktive,
.pagination a:hover {
	color: #af262a;
}

.paginateinfo {
	float: right;
	margin: -22px 0 0 0;
	font-size: 12px;
}


/*kontakt#########################################################*/


.formular .required{
	color: #af262a;
	font-weight: 700;
}



strong {
	font-weight: 700;
}

.anschrift {
	background: #eee;
	border-radius: 4px;
	padding: 5px 20px 20px 20px;
	margin-bottom: 10px;
}

.formular {
	margin-left: -10px;
}

.formular #alertdiv {
	color: #ff6666;
	margin-left: 10px;
}

.formular .alertdiv .alert {}

.formular .alertdiv .mailok {
	color: #139e2f;
}

.formular .cell {
	padding: 10px;
}

.formular .label {
	margin-bottom: 10px;
	font-weight: 700;
}

.formular .input {
	border: 1px solid #eee;
	padding: 10px;
	width: 100%;
}

input:invalid,
textarea:invalid {
	box-shadow: 0 0 3px #ff6666;
}

input:required,
textarea:required {
	border: 1px solid #eee;
	box-shadow: none;
}

input:focus {
	border: 1px solid #eee;
	border-bottom: 3px solid #139e2f;
	outline: none;
}

.formular .textarea {
	padding: 10px;
	width: 100%;
	border: 1px solid #eee;
	height: 200px;
}

.formular .button {
	padding: 10px 20px;
	float: right;
	margin-right: 10px;
}


.formular .pflichtfelder{
	margin-top: -10px;
}

/*honeypot##*/
.c-webseite{
display: none;
}

/*//bilder galerie####################################################*/
.box-galerie{
	width: 33%;
	padding: 5px;
}

.div-galerie{
	box-shadow: 0 0 2px 0 rgba(1, 1, 1, 0.2);
	position: relative;
}

.box-galerie .div-galerie img {
	/*height: 100%;*/
	object-fit: cover;
	width: 100%;
}

.box-galerie .div-galerie .text{
	background: rgba(50, 50, 50, 0.8);
    bottom:-17px;
    color: #eee;
    display: block;
    padding: 10px;
    position: absolute;
    /*transition: padding 0.3s ease 0s;*/
    width: 100%;
}

/* ==================================================
		Media Queries
	===================≠≠≠≠========================== */


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

	.social-buttons{
		position: absolute;
		right:-100px;
		top:180px;
	}
}


/* Smaller than standard 960 (devices and browsers) */

@media only screen and (max-width: 959px) {
	body {
		/*border: 3px solid #011892;*/
		background-color: #E3E3E3;
	}
	.backgroundimage {
		display: none;
	}
	.page-home .main {
		background-color: rgba(255, 255, 255, 0.95);
	}
	.page-home .main h1,
	.page-home .main h2,
	.page-home .main .content,
	.page-home .link_weitere_informationen a {
		color: #494747;
	}
	/*ist logo rechts?*/
	.logoright .logo {
		float: left;
		margin-left: 10px;
	}
	.opennav {
		z-index: 110;
	}
	.opennav,
	.closenav {
		display: inherit;
		position: absolute;
		cursor: pointer;
		right: 20px;
		top: 6px;
		font-size: 1.8em;
	}
	.closenav {
		right: 15px;
		top: 6px;
		z-index: 1000;
	}
	/*################################################################*/
	/* navigation level1##################################################*/
	.mobilenav {
		position: absolute;
		float: left;
		width: 100%;
		height: 100%;
		top: 0;
		margin: 0 0 0 -110%;
		padding: 0;
		background: rgba(255, 255, 255, 0.95);
		display: inline-block;
		visibility: hidden;
		-webkit-transition: margin 0.4s ease-in;
		-moz-transition: margin 0.4s ease-in;
		-o-transition: margin 0.4s ease-in;
		-ms-transition: margin 0.4s ease-in;
		transition: margin 0.4s ease-in;
		overflow-y: scroll;
		z-index: 1000;
		background: #fff;
	}
	.topnav {
		display: inline-block;
		margin: 0;
		float: left;
		width: 100%;
		background: rgba(255, 255, 255, 1);
		border-bottom: 2px solid #e3e3e3;
	}
	.topnav .active {
		border-top: none;
	}
	.topnav li {
		clear: both;
		float: inherit;
		margin: 2px 0 2px -20px;
		width: 100%;
		border-bottom: 2px solid #e3e3e3;
		font-weight: 700;
	}
	.topnav li:last-child {
		border: none;
	}
	.topnav li a {
		display: block;
		width: 100%;
		padding: 5px;
	}
	.topnav li ul,
	.topnav li:hover ul {
		position: relative;
		left: auto;
		margin: 10px 0 0 0;
		background: none;
		border-bottom: none;
		background: #fff;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
		opacity: 1;
	}
	.topnav li ul li {
		margin: 2px 0 2px -5px;
		padding-left: 20px;
		border: none;
		border-bottom: 1px solid #e3e3e3;
		font-weight: normal;
	}
	.topnav li ul li:last-child {
		border: none;
	}
	/*################################################################*/
	/*################################################################*/
	.headertop .haus {
		clear: both;
		padding: 0;
	}
	.headertop .haus h1 {
		font-size: 1em;
		display: block;
		margin: 0;
		padding: 0 0 10px 10px;
	}
	.prospekthome .prospektcontainer {
		width: 100%;
	}
	.news .row {
		border: 1px solid #eee;
		border-bottom: 2px solid #eee;
	}
	.news .row .image {
		width: 100%;
	}
	.news .intro {
		margin: 30px 0 0 0;
		padding: 0;
	}
	.news h3 {
		max-width: 100%;
	}
	.anfahrt .hausdaten {
		width: 100%;
		margin-top: 20px;
		padding-left: 0;
	}
	.anfahrt .addresse {}
	.produktbox .col66,
	.produktbox .col33 {
		width: 100%;
	}
	.produktbox .txt {
		padding: 0;
	}
	.hausprodukte .txt {
		padding: 10px;
	}
	.pagination {
		margin: 10px 0;
	}
	.pagination .paginate {
		margin: 5px 0;
		padding: 8px 14px;
		border-radius: 4px;
		background: #eee;
		display: inline-block;
	}
	.pagination .fa-angle-left,
	.pagination .fa-angle-right {
		position: relative;
		font-size: 16px;
		top: 0;
	}
	.paginateinfo {
		margin-top: 20px;
		display: block;
		float: left;
	}
	.footercontainer {
		margin-bottom: 30px;
		display: inline-block;
		width: 100%;
	}
	
	.footernav {
		margin-left: -50px;
	}
	.footernav li {
		float: left;
		padding: 0 10px 10px 0;
		margin-left: 20px;
		float: inherit;
	}

			
		.footernav li:last-child {
		margin-left: 20px !important;
		}
}
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		body {
			/*border:3px solid #ff9300;*/
		}
		.homesortiment .col {
			width: 50%;
		}
		.prospekte .col33 {
			width: 50%;
		}

		.social-buttons{
			position: absolute;
			right:-100px;
			top:160px;
		}

		.social-buttons a{
			font-size: 20px;
		}
		.social-buttons .button{
			width: 30px;
			height: 30px;
			margin-bottom: 5px;
			padding: 10px;

		}
		.social-kontakt i{
		margin: -5px  0 0 -6px;
		}

		.social-facebook i{
		margin: -5px  0 0 -2px;
		}

		.social-youtube i{
		margin: -5px  0 0 -4px;
		}

	}
	
	.footercontainer{
		margin-bottom: 130px;
	}
	@media only screen and (max-width: 579px) {
		.prospekthome .text {
			width: 100%;
		}
		.prospekthome .homeprospekt {
			width: 100%;
		}
		.prospekthome .link {
			width: 100%;
		}
		


	}
	@media only screen and (max-width: 479px) {
		body {
			/*border:3px solid #009192;*/
		}
		.prospekte .col33 {
			width: 100%;
		}
	}
	/* ==================================================
   Helper classes
   ================================================= */
	.ir {
		background-color: transparent;
		border: 0;
		overflow: hidden;
		*text-indent: -9999px;
	}
	.ir:before {
		content: "";
		display: block;
		width: 0;
		height: 150%;
	}
	.hidden {
		display: none !important;
		visibility: hidden;
	}
	.visuallyhidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	.visuallyhidden.focusable:active,
	.visuallyhidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}
	.invisible {
		visibility: hidden;
	}
	.clearfix:before,
	.clearfix:after {
		content: " ";
		display: table;
	}
	.clearfix:after {
		clear: both;
	}
	.clearfix {
		*zoom: 1;
	}
	/* ==================================================
   Print styles
   ================================================= */
	@media print {
		* {
			background: transparent !important;
			color: #000 !important;
			/* Black prints faster: h5bp.com/s */
			-webkit-box-shadow: none !important;
			/* Black prints faster: h5bp.com/s */
			box-shadow: none !important;
			text-shadow: none !important;
		}
		a,
		a:visited {
			text-decoration: underline;
		}
		a[href]:after {
			content: " (" attr(href) ")";
		}
		abbr[title]:after {
			content: " (" attr(title) ")";
		}
		/*
	 * Don't show links for images, or javascript/internal links
	 */
		.ir a:after,
		a[href^="javascript:"]:after,
		a[href^="#"]:after {
			content: "";
		}
		pre,
		blockquote {
			border: 1px solid #999;
			page-break-inside: avoid;
		}
		thead {
			display: table-header-group;
			/* h5bp.com/t */
		}
		tr,
		img {
			page-break-inside: avoid;
		}
		img {
			max-width: 100% !important;
		}
		@page {
			margin: 0.5cm;
		}
		p,
		h2,
		h3 {
			orphans: 3;
			widows: 3;
		}
		h2,
		h3 {
			page-break-after: avoid;
		}
	}