@charset "UTF-8";
/*Style der Überschriften*/

h1{
	font-family: 'oswald-700', sans-serif;
	font-weight: 700;
	font-size:3em;
	margin-bottom:5px;
	line-height:1.2em;

}
h2 { /*genutzt für alle Hauptüberschriften auf der Seite */ 
	font-family: 'Fira Sans', sans-serif;
	font-style: normal;
	line-height: normal;
	margin-top: 0px;
	font-weight: 800;
	font-size: 35px;
	text-transform: uppercase;
}
h3{
	font-family: 'oswald-500', sans-serif;
	font-weight: 500;
	font-size: 1.5em;
	margin-bottom:0;
}

.h3{
	font-family: 'oswald-500', sans-serif;
	font-weight: 500;
	font-size: 1.5em;
}
.Text_Hinweis {	font-family: 'Fira Sans', sans-serif;
	font-style: normal;
	line-height: normal;
	margin-top: 0px;
	font-weight: 800;
	font-size: 20px;
	text-transform: uppercase;}
@media screen and (max-width: 600px) {
	h2 {
		font-size: 25px;
	}
}

h3 { /*genutzt für Überschriften in Infoblöcken und News*/ 
	font-family: 'Fira Sans', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 17,5px;
	color: #FAAA00;
	margin-bottom:0;
}
h3g { /*genutzt für Überschriften in Infoblöcken und News*/ 
	font-family: 'Fira Sans', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 35px;
	color: #FAAA00;
	margin-bottom:0;
}
h4 {
	font-family: fira sans;
	font-size: 25px;
	font-weight: 700;
	line-height: 0.5px;
	text-align: left;
	text-transform: uppercase;
	color: #2A2A2A
}

h5 {
	font-family: fira sans;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: #2a2a2a;
}

.h5{
	font-family: fira sans;
    font-size: 17px;
	    font-weight: bold;
}


hprodukt { /*Überschrift für den Produktnamen am Seiteneinstieg*/
	font-family: 'Fira Sans', sans-serif;
	font-style: normal;
	line-height: normal;
	margin-top: 0px;
	font-weight: 800;
	font-size: 50px;
	text-transform: uppercase;
}

@media screen and (max-width: 600px) {
	hprodukt {
		font-size: 25px;
	}
}

hflex{
	font-family: Fira Sans, Sans Serif;
	font-size: 50px;
	font-weight: 800;
	text-align: left;
}

@media screen and (max-width: 600px) {
	hflex {
		font-family: Fira Sans, Sans Serif;
		font-size: 27.5px;
		font-weight: 800;
		text-align: left;
	}
}

@media screen and (max-width: 350px) {
	hflex {
		font-family: Fira Sans, Sans Serif;
		font-size: 22px;
		font-weight: 800;
		text-align: left;
	}
}

hflex100{
	font-family: Fira Sans, Sans Serif;
	font-size: 120px;
	font-weight: 900;
	text-align: left;
	line-height:75px;
}

@media screen and (max-width: 600px) {
	hflex100 {
		font-family: Fira Sans, Sans Serif;
		font-size: 50.5px;
		font-weight: 900;
		text-align: left;
		line-height: 30px;
	}
}

@media screen and (max-width: 350px) {
	hflex100 {
		font-family: Fira Sans, Sans Serif;
		font-size: 50px;
		font-weight: 900;
		text-align: left;
		line-height: 30px;
	}
}	

* {
    box-sizing: border-box;
}

a.class1:link {
	color: #fedb31;
	font-weight: 500;
	text-decoration: none;
}
a.class1:visited {
	color: #fedb31;
	font-weight: 500;
	text-decoration: none;
}
a.class1:hover {
	color: #2a2a2a;
	font-weight: 500;
	text-decoration: none;
}


a.class2:link {
	color: #fff;
	font-weight: 400;
	text-decoration: none;
}
a.class2:visited {
	color: #fff;
	font-weight: 400;
	text-decoration: none;
}
a.class2:hover {
	color: #909090;
	font-weight: 400;
	text-decoration: none;
}

a.class2b:link {
	color: black;
	font-weight: 500;
	text-decoration: none;
}
a.class2b:visited {
	color: black;
	font-weight: 500;
	text-decoration: none;
}
a.class2b:hover {
	color: #909090;
	font-weight: 500;
	text-decoration: none;
}

a.class3:link { /*Links auf den Seiten, im Text, unter Bildern usw.*/
	color: #2a2a2a;
	font-weight: 700;
	text-decoration: none;
}

a.class3:hover {
	color: #909090;
	font-weight: 700;
	text-decoration: none;
}

a.class3:visited {
	color: #2a2a2a;
	font-weight: 700;
	text-decoration: none;
}


a.contact:link{
	font-family: fira sans;
	font-size: 17px;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
}
a.contact:visited{
	font-family: fira sans;
	font-size: 17px;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
}
a.contact:hover{
	font-family: fira sans;
	font-size: 17px;
	font-weight: 400;
	color: #909090;
	text-decoration: none
}


a.menu:link{
	font-family: fira sans;
	font-size: 17px;
	font-weight: 700;
	color: black;
	text-decoraration: none;
}

a.menu:visited{
	font-family: fira sans;
	font-size: 17px;
	font-weight: 700;
	color: black;
	text-decoraration: none;
}

a.menu:active{
	font-family: fira sans;
	font-size: 17px;
	font-weight: 700;
	color: #B0B0Bo;
	text-decoraration: none;
}

a.menu:hover{
	font-family: fira sans;
	font-size: 17px;
	font-weight: 700;
	color: #B0B0B0;
	text-decoraration: none;
}

a.submenu-icon:link{
	color: #2a2a2a;
	font-weight: 500;
	text-decoration: none;
}

a.submenu-icon:hover {
	color: #909090;
	font-weight: 500;
	text-decoration: none;
}

a.submenu-icon:visited {
	color: #2a2a2a;
	font-weight: 500;
	text-decoration: none;
}
.gdi_button_hellgrau{
	
	background-color: #282727;
	color:#ffffff;
	font-family: 'oswald-500';
	font-size: 1.5em;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 7px;
	 -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
	border:none;
	outline: none;
	width: 400px; /* Breite in Pixel */
}
.gdi_button_rot{
	
	background-color: #cc0000;
	color:#ffffff;
	font-family: 'oswald-500';
	font-size: 1.3em;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 7px;
	 -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
	border:none;
	outline: none;
	
}
.gdi_button_gruen{
	background-color: #25D366;
	color:#ffffff;
	font-family: 'oswald-500';
	font-size: 1.3em;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 7px;
	 -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
	border:none;
	outline: none;

}
@media screen and (min-width: 601px){
	a.submenu-icon {
		font-size: 65px;
	}
}
@media screen and (max-width: 600px){
	a.submenu-icon {
		font-size: 40px;
	}
}

/*Social Media bar start*/
/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 30%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
right:0%;
	z-index: 888;
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 0px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}
.katalog {
  background: #d4cfcf;
  color: white;
}
/*Social Media bar end*/


a.submenu-text:link{
	color: #2a2a2a;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
}

a.submenu-text:hover {
	color: #909090;
	font-weight: 500;
	text-decoration: none;
}

a.submenu-text:visited {
	color: #2a2a2a;
	font-weight: 500;
	text-decoration: none;
}
@media screen and (min-width: 601px){
	a.submenu-text {
		font-size: 17px;
	}
}
@media screen and (max-width: 600px){
	a.submenu-text {
		font-size: 12.5;
	}
}

/*Links in großen Button, wie bspw. der zu den Ersatzteilen */
a.bigbutton:link{
	font-family: fira sans;
	font-size: 35px;
	font-weight: 800;
	color: black;
	text-decoraration: none;
	z-index: 1;
}

a.bigbutton:active{
	font-family: fira sans;
	font-size: 35px;
	font-weight: 800;
	>color: #fed31b;
	text-decoraration: none;
}

a.bigbutton:hover{
	font-family: fira sans;
	font-size: 35px;
	font-weight: 800;
	color: #fed31b;
	text-decoraration: none;
}

a.bigbutton:visited{
	font-family: fira sans;
	font-size: 35px;
	font-weight: 800;
	color: black;
	text-decoraration: none;
}

p{
	    line-height: 1.6em;
}

p.texte {
    font-family: "Fira Sans";
    font-size: 17.5px;
    font-weight: 400;
    line-height: 27.5px;
    color: black;
    float: left;
    text-decoration: none;
    font-style: inherit;
}

p.alternative { /*Definition für die Subunterschrift bei den Produktalternativen*/
	font-family: fira sans;
	font-size: 20px;
	font-weight: 400;
	color: #2a2a2a;
	float: left;
	text-decoration: none;
	margin-top: -10px;
	margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
	p.alternative {
		float: left;
		text-align: left;
	}
}

p.spezifikation { /*Definition für die Subunterschrift bei den Produktalternativen*/
	font-family: fira sans;
	font-size: 20px;
	font-weight: 400;
	color: #2a2a2a;
	text-align: center;
	text-decoration: none;
	margin-top: -10px;
	margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
	p.spezifikation {
		text-align: center;
	}
}

hr {
	display: block;
	width: 97.5%; 
	height: 3px; 
	border: 0;
	margin-top: 50px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background-color: #ededed;
}

hr.grau {
	display: block;
	width: 97.5%; 
	height: 3px; 
	border: 0;
	margin-top: 50px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background-color: #ededed;
}


/* Body */
body {
	font-family: 'Fira Sans', sans-serif;
	background-color: #fff;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 400;
}
/* Container */
.container {
	container-position: center;
	container-repeat: no-repeat;
	container-size: cover;
	position: relative;
	
	
	position: relative;
	text-align: center;
	height: 450px; 
	background-color: black;
}
/* Add some padding inside the card container */
.container2 {
    padding-top: 5px;
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 6px;
}

.container3 {
	padding: 2px 16px;
	position: relative;
	text-align: center;
	color: white;
}

.container4 {
	margin-top: 15px;
	overflow: hidden;
}

.card {
		transition: 0.3s;
		float: left;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
		margin: 25px;
}

.card:hover {
		box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
	}


/* Navigation */
header {
	width: 100%;
	height: 5%;
	background-color: #fff;
	/*border-bottom: 5px solid #2A2A2A;*/
}

/*Anfang Menu*/
.topnav {
  overflow: hidden;
  background-color: #2a2a2a;
}

.topnav a {
  float: left;
  display: block;
  color: #ededed;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: Fira sans;
  font-weight: 400;
  font-size: 17px;
}

.topnav a:hover {
  color: #909090;
}

.topnav .active {
  color: #909090;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	background-color: black;
	opacity: 0.9;
  }
}
/*Ende Manu*/

/*Anfang Sub-Menu in den Hämmern*/
main {
	background-color: #ededed;
	padding: 10px;
}

main div{
	background: #ededed;
	color: black;
	padding: 15px;
	max-width: 125px;
	margin: 5px;
}

@media screen and (max-width: 600px) {
	main div {
		padding-left: 5px;
		padding-right: 5px;
		margin: 1px;
	}
}

.flex-center{
	display: flex;
	justify-content: center;
	text-align: center;
}

/*Ende Sub-Menu in den Haemmern*/



/* Titelbil allgemein */
.titel-image {
    /* Das Bild selbst */
    background-image: url(../Bilder/Titelbild_1_bbg-boehler_bohrhammer.png);

    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
/* Titelbild Bohrhämmer*/
.titel-image-Staubsauger {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Staubsauger-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Gesteinsbearbeitung*/
.titel-image-Gesteinsbearbeitung {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Steinmetzwerkzeuge-Druckluft-BBG_Boheler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}



.titel-image-schraub {
	    /* Das Bild selbst */
    background-image: url("../Bilder/headgrafik/bbg_boehler_schlagschrauber_headgrafik.jpg");
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.titel-image-kompressor {
	    /* Das Bild selbst */
    background-image: url("../Bilder/headgrafik/Kompressoren-BBG-Boehler.png");
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}


/* Titelbild Bohrhämmer*/
/* Titelbild Bohrhämmer*/
.titel-image-Bohr {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Bohrhaemmerauswahl-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Bohrhämmer*/
/* Titelbild SeilBalancer*/
.titel-image-SeilBalancer {
	    /* Das Bild selbst */
	
    background-image: url(../Bilder/Hintergruende/Balancerwerkzeuge-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Bohrhämmer*/
/* Titelbild ImlochBohrhämmer*/
.titel-image-ImlochBohr {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Imlochbohrhaemmer-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Bohrhämmer*/

.titel-image-Meisselhaemmer {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Meissel-Abbau-Abruch-Haemmer-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Ankertechnik*/
.titel-image-Ankertechnik {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/bbg-boehler-Bergsicherung-Felssicherung.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Bohrstative*/
.titel-image-Bohrstative {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Bohrstative-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Bohrhämmer*/
.titel-image-Lanzenhaemmer {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Lanzenhaemmer-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Monoblocbohrer*/
.titel-image-Monobloc {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Monoblockbohren-Integraldrill-Titel-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.titel-image-Konusbohren {
	/* Das Bild selbst */
	background-image: url(../Bilder/Hintergruende/Konusbohren_Tapered_Drill_BBG_Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.titel-image-Verlaengerungsbohren {
	/* Das Bild selbst */
	background-image: url(../Bilder/Hintergruende/Verlaengerungsbohren_Extension_Drill_BBG_Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Bohrwerkzeuge*/
.titel-image-Bohrwerkzeuge {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Bohrwerkzeuge-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Bohrwerkzeuge*/
.titel-image-Dreh-Bohrwerkzeuge {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Bohren-Brechen-Gestein-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Dreh-Bohrwerkzeuge*/
.titel-image-Drehbar-Bohrwerkzeuge {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Drehbohrer-BBG-Boehler.gif);

	height: 100%;
	/* Die Höhe, die genutzt werden soll */
	
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

/* Titelbild Werkzeug*/
.titel-image-Werkzeug {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Werkzeuge-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild MeisselWerkzeug*/
.titel-image-MeisselWerkzeug {
	/* Das Bild selbst */
	background-image: url(../Bilder/Hintergruende/Meissel-Werkzeuge-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

/* Titelbild Bohrhämmer*/
.titel-image-teile-Bohr {
    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Bohrhaemmerauswahl-BBG-Boehler.png);
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.titel-image-Produktsuche {
    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Suche-von-Produkten-Kopf-BBG-Bohler.png);
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.titel-image-teile {
    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Titelbild-Ersatzteile-BBG-Boehler.png);
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	
    position: relative;
}


/* Titelbild Kontakt*/
.titel-image-kontakt {
    /* Das Bild selbst */
    /*background-image: url(../Bilder/Hintergruende/Bohrhaemmer-Anwendung-BBG-Boehler.png);*/
	background-image: url(../Bilder/LOGO/BBG-BoehlerEarth.gif);
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 20%;
	position: relative;
}

/* Titelbild startseite*/
.titel-image-startseite-aktuell{
    /* Das Bild selbst */
    background-image: url("../Bilder/headgrafik/bbg_boehler_gdi_startseite_head_blank.jpg");
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
	width: 100%;
}

/* Titelbild iPower*/
.titel-image-iPower {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Titelbild_black.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

/* Titelbild Abbruchhaemmer*/
.titel-image-Abbruch {
    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Aabbruchhaemmer_Titelbild-Haemmer.png);
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Titelbild Service-Unterseiten*/
.titel-image-Zubehoer {
    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Zubehoer-BBG-Boehler.png);
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
/* Titelbild Service-Unterseiten*/
.titel-image-Information {
    /* Das Bild selbst */
    background-image: url("../Bilder/Download-Titelbild.png");
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
/* Titelbild Service-Unterseiten*/
.titel-image-Baustelle {
    /* Das Bild selbst */
    background-image: url(../Bilder/Baustelle-BBG-Boehler.gif);
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
/* Titelbild Service-Unterseiten*/
.titel-image-Service {
    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Aabbruchhaemmer_Titelbild-Haemmer.png);
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
/* Titelbild Service-Unterseiten*/
/* Titelbild Service-Unterseiten*/
.titel-image-Balancer {
    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Balancer-BGG-Boehler.png);
	
    /* Die Höhe, die genutzt werden soll */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
/* Titelbild Service-Unterseiten*/
/* Titelbil schwarz */
.titel-image-black {
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	background-image: url(Bilder/Hintergruende/Titelbild_black.png), -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,1.00) 100%);
	background-image: url(Bilder/Hintergruende/Titelbild_black.png), -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,1.00) 100%);
	background-image: url(Bilder/Hintergruende/Titelbild_black.png), -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,1.00) 100%);
	background-image: url(Bilder/Hintergruende/Titelbild_black.png), linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,1.00) 100%);
}

/* Titelbild Öler*/
.titel-image-Oeler {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Oeler-Titelbild-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Öler*/
/* Titelbild Öler*/
.titel-image-Oeler-Ersatzteile {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Linienoeler-Ersatzteil-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Titelbild Öler*/
.titel-image-Bohrlafetten {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Hintergruende/Bohrlafetten-BBG-Boehler.png);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.titel-image-Bohrlafetten-Fertigung {
	    /* Das Bild selbst */
    background-image: url(../Bilder/Lafetten-Story/gdi_herdecke_fussbodendraese_story_headrafik.jpg);
	/* Die Höhe, die genutzt werden soll */
	height: 100%;
	/* Position and center the image to scale nicely on all screens */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Text in der Mitte des Bildes, bspw. Aktionen oder ähnliches */
.titel-text {
	text-align: center;
	position: absolute;
	top: 80%;
	left: 30%;
	transform: translate(-50%, -50%);
	color: #FFE91E;
	width: 255px;
}

/*Das Logo oben rechts auf dem Bild*/
.Logo-titel {
	width: 100%; 
	
	background-color: transparent;
	opacity: 0.95;
	
	padding-right: 10px; 
	padding-left: 10px; 
	padding-bottom: 25px; 
	padding-top: 40px; 
}

@media screen and (max-width: 800px) {
	.Logo-titel {width: 30%;
    padding-top: 0px;
        }
}

/*Test für zentrierte Ausrichtung*/
.straight {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}


/* When the screen is less than 600 pixels wide, center the Cards */
@media screen and (max-width: 500px) {
	.straight {
		width: 70%;
	}
}

/* When the screen is less than 600 pixels wide, center the Cards */
@media screen and (max-width: 400px) {
	.straight {
		width: 75%;
	}
}

/* When the screen is less than 600 pixels wide, center the Cards */
@media screen and (max-width: 350px) {
	.straight {
		width: 88%;
	}
}

/* Jubiläumsbild / Aktionsbild */
.action-image {
 /* The image used */
  background-image: url(../Bilder/Jubilaeum/100Jahre-Druckluft_BBG-Boehler.de-GDI.png);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.action-text{
	background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  position: relative;
  top: 50%;
  z-index: 2;
  width: 50%;
  padding: 20px;
  text-align: left;
}

.tagline {
	text-align: center;
	color: #FFFFFF;
	margin-top: 10px;
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1px;
}
/* Willkommen Bereich */
.text_column { /*Definition für Textbereiche wie den auf der Startseite */
	width: 100%;
	text-align: left; /*linksbündiger Text*/
	line-height: 25px;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	color: #2a2a2a; /*Schriftfarbe */
}
.text_column90 { /*Definition für Textbereiche, die in einem schmaleren Bereich über die gesamte Seite laufen sollen */
	width: 100%;
	text-align: justify; /*Verhalten des Textes, jede Zeile ist gleich breit, wie Blocksatz*/
	line-height: 25px;
	float: left;
	padding-left: 42px;
	padding-right: 42px;
	color: #2a2a2a; /*Schriftfarbe */
}
.infotext { /*Die Definition für den Bereich in dem der Infotext steht, also das Verhalten der Schrift, die Farbe des Hintergrunds usw.*/
	padding-left: 20px;
	padding-right: 25px;
	padding-top: 30px;
	padding-bottom: 30px;
	display: inline-block; 
	margin-top: 0px;
	margin-bottom: 0px;
}

.footertext { /*Die Definition für den Text im Footer*/
	width: 100%;
	padding-left: 30px;
	padding-right: 25px;
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: none; /*Hintergrundfarbe des ganzen Bereichs */
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 25px;
}

.button {
	width: 200px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 30px;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.3s linear;
}
.button:hover {
	background-color: #FEFEFE;
	color: #2a2a2a;
	cursor: pointer;
}
.copyright {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #fedb31;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
}
.footer-column { /*Text, der im Footer geschrieben ist. (hier: Besuchen Sie uns hier...*/
	/*padding-top: 20px;
	padding-bottom: 0px;
	padding-left: 30px;
	padding-right: 30px;*/
	float:left;
	width: 33.33%;
	padding-top: 0px;
	padding-bottom: 0px;
	flex: 33,3%;
}

.footer-column-25 { /*Text, der im Footer geschrieben ist. (hier: Besuchen Sie uns hier...*/
	/*padding-top: 20px;
	padding-bottom: 0px;
	padding-left: 30px;
	padding-right: 30px;*/
	float:left;
	width: 25%;
	padding-top: 0px;
	padding-bottom: 0px;
	
}

.column { /*ersetzen in allen Texten durch column2 */
	float:left;
	width: 50%;
	padding-top: 0px;
	padding-bottom: 0px;
	flex: 50%;
}	

/*Zweispaltige Kolumne */
.column2 {
	float: left;
	width: 50%;
}
	
/*Dreispaltige Kolumne */
.column3 {
	float: left;
	width: 33.3%;
}	

/*Die Orientuerung wird nach jedem Bereich zurückgesetzt */	
.row:after {
    content: "";
    display: table;
    clear: both;
}

.inline-border div{
	position: relative;
	float: left;	
}

.inline-border div #border{
	position: absolute;
	border: 5px solid #2a2a2a;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.upper {
	padding-top: 150px;
	
}

@media screen and (max-width: 600px) {
	.upper {
		padding-top: 100px;
		
	}	
}

@media screen and (max-width: 350px) {
	.upper {
		padding-top: 50px;
	}	
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 98%;
	border: 1px solid #ededed;
	font-family: fira sans;
	font-size: 17px;
	font-weight: 400;
}

th, td {
	text-align: left;
	padding: 16px;
}
	
tr:nth-child(even) {
	background-color: #ededed
}

@media screen and (max-width: 600px) {
	table {
		font-size: 15px;
	}	
}

/*Anfang Tabelle mit Vertikalem Split*/
table.Service {
	border-collapse: collapse;
	border-spacing: 0;
	width: 98%;
	border: 1px solid #ededed;
	font-family: fira sans;
	font-size: 17px;
	font-weight: 400;
}

.verticalSplit {
	border-top: none;
	border-bottom: none;
}

.verticalSplit:first-of-type {
	border-left: none;
}

.verticalSplit:last-of-type {
	border-right: none;
} /*Ende Tabelle mit Vertikalem Split*/

.collapsible {
	background-color: #2a2a2a;
	color: white;
	cursor: pointer;
	padding: 16px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 20px;
	font-family: fira sans;
	font-weight: 700;
	text-transform: uppercase;
}

.collapsible:active {
	background-color: #2a2a2a;
}

.collapsible:hover {
	background-color: #fed31b;
}
	


.content {
	padding: 0 16px;
	margin-top: 2.5px;
	display: none;
	overflow: hidden;
	background-color: #ededed;
	font-family: fira sans;
	transition: max-height 0.2s ease-out;
}


	
#myInput {
    background-image: url(../Bilder/Icons/Lupe_Suchen.svg); /* Add a search icon to input */
    background-position: 2px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
	background-size: auto;
	height: 100%;
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ededed; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#myUL li a {
    border: 1px solid #ededed; /* Add a border to all links */
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6; /* Grey background color */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove default text underline */
    font-size: 18px; /* Increase the font-size */
    color: black; /* Add a black text color */
    display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
    background-color: #fedb31; /* Add a hover effect to all links, except for headers */
}	
	

.responsive {
    width: 100%;
    height: auto;
}

.teile-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
		
	cursor: pointer;
		
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 35px;
	padding-bottom: 35px;
		
	background-color: white;
	opacity: 0.9;
	transition: 0.3s;
	box-shadow: 0 4px 88px rgba(0,0,0,0.2);
		
	font-family: 'Fira Sans', sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size: 35px;
	text-transform: uppercase;
	color: black;	
}

.teile-button:hover {
	box-shadow: 0 12px 24px 0 rgba(0,0,0,0.75);
}


.teile-bild {
		position: relative;
		text-align: center;
		color: white;
}
.Bildmitte { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.download {
	background-color: #2a2a2a;
	border: none;
	color: white;
	transition: 0.3s;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	
	position: relative;
	
	font-family: fira Sans;
	font-weight: 800;
	font-size: 17px;
	text-transform: uppercase;
	padding-top: 35px;
	padding-bottom: 35px;
	cursor: pointer;
}

.download:hover {
	box-shadow: 0 12px 24px 0 rgba(0,0,0,0.9);
}

/*Die Hammerauswahl mit Filterfunktion - Anfang*/
.filterDiv {
    float: left;
    background-color: #ededed;
    color: #2a2a2a;
    text-align: center;
    margin: 2px;
    display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/*Die Auswahlbutton*/
.filterbtn {
  font-family: fira sans;
  font-weight: 500;
  font-size: 17px;
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #ededed;
  cursor: pointer;
}

/* Add a light grey background on mouse-over */
.filterbtn:hover {
  background-color: #909090;
  color: white;
  cursor: pointer;
}

/* Add a dark background to the active button */
.filterbtn:active {
  background-color: #909090;
  color: white;
}

.small-btn {
	background-color: #2a2a2a;
	border: none;
	color: white;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	
	font-family: fira Sans;
	font-weight: 800;
	font-size: 20px;
	text-transform: uppercase;
	float: right;
	text-align: left;
	
	padding: 12px 30px;
	cursor: pointer;
}
.small-btn:hover {
	box-shadow: 0 12px 24px 0 rgba(0,0,0,0.9);
}
.small-DRMbtn {
	background-color: #2a2a2a;
	border: none;
	color: white;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	
	font-family: fira Sans;
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	float: right;
	text-align: left;
	
	padding: 12px 30px;
	
}
.top-right {
	position: absolute;
	top: 0px;
	right: 10px;
	width: 200px;
	height: 200px;
}

.bottom-right {
	position: absolute;
	bottom: 25px;
	right: 20px;
}

.artikelnummer {
	background-color: #ededed;
	border: none;
	color: black;
	
	font-family: fira Sans;
	font-weight: 400;
	font-size: 17px;
	float: right;
	text-align: left;
	
	padding: 12px 30px;
}

	
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
	.navbar a:not(:first-child), .dropdown .dropbtn {
		display: none;
	}
	.navbar a.icon {
		float: right;
		display: block;
	}
}

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .column2 {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .column3 {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .footer-column {
        width: 100%;
    }
}

.center {
	display: block;
	margin-top: 25px;
	padding-top: 50px;
	padding-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
	border-top: solid 0px #2a2a2a;
}

.hidden {
	display: none;
}
.greetingweihnachtstyle {
            margin: 20px auto;
            padding: 20px;
            border: 2px solid #b22222;
            background-color: #ffffffdd;
            border-radius: 20px;
            
        }
/* Mobile */
@media (max-width: 320px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.container header nav {
	float: left;
  display: block;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	display: none;
}
header nav ul {
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
}
.text_column {
	width: 100%;
	text-align:left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}	
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 90%;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 12px;
	float: none;
	text-align: center;
}
.banner {
	background-color: #2D9AB7;
	background-image: none;
}
.tagline {
	margin-top: 20px;
	line-height: 22px;
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #043745;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	overflow: auto;
	display: inline-block;
	background: #52bad5;
}
	
header nav ul {
	padding: 0px;
	float: none;
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
}
.text_column {
	width: 100%;
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 30%;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: none;
	width: 100%;
	text-align: center;
}
.thumbnail {
	width: 50%;
}
.parallax {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 20%;
}
.parallax_description {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	padding-top: 30px;
}
.banner {
	padding-left: 20px;
	padding-right: 20px;
}
	
.footer_column {
	width: 100%;
}
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
.text_column {
	width: 100%;
}
.thumbnail {
	width: 50%;
}
.text_column {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.banner {
	margin-top: 0px;
	padding-top: 0px;
}


.active {
	/* Add an active class to highlight the current page */
    background-color: #4CAF50;
    color: white;
}
}
}
img.zoom {
 transition: transform 0.5s;
 -moz-transition: transform 0.5s;
 -webkit-transition: transform 0.5s;
 -o-transition: transform 0.5s;
 -ms-transition: transform 0.5s;
}
img.zoom:hover {
 cursor: zoom-in; 
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(20em,0);
 -moz-transform: scale(6.0, 6.0);
 -webkit-transform: scale(6.0, 6.0);
 -o-transform: scale(6.0, 6.0);
 -ms-transform: scale(6.0, 6.0);
}


.container3 p.alternative {
	float: inherit;
}

.container3 h4{
	text-align: center;
}

/* Flex Elemente */


.flex{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	display: -moz-box;
}

.flex-row{
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
}

.flex-center{
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.flex-col{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}

.flex-between{
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
}

.flex-end{
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: flex-end;
}

.flex-start{
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

.flex-align{
	
	-webkit-box-align: center;
	
	    -ms-flex-align: center;
	
	        align-items: center;
}

.bbg-row{
	width:100%;
	padding:50px;
	height:auto;
}

.row_ohne{
	width:100%;
	height:auto;
}

.section_ohne{
	padding-top:0;
}

.col-4 {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col-4:first-child { margin-left: 0; }

.col-3 {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col-3:first-child { margin-left: 0; }

.col{
	margin-right:2%;
}
.col_ohne{
	margin-right:2%;
}

.col-button{
	margin-right:2%;
}

.col:first-of-type{
	margin-right:0;
}

.col-5 {
display: block;
	float:left;
	margin: 1% 0 1% 2%;
}

.col:last-of-type{
	margin-right:0;
}

.col-hor-2-3{
	height:66%;
}

.col-hor-1-3{
	height:32%;
}

.col-hor{
	margin-bottom: 2%;
}

.col-hor:last-of-type{
	margin-bottom: 0;
}

.col-md-3{
	position: relative;
    width: 100%;
	height: auto;
    overflow: hidden;
}

.col-md-12{
	position: relative;
    width: 100%;
	height:auto;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.bbg-max{
	max-width:70%;
	height:auto;
	margin:0 auto;
}

.col-1-2{
	width:49%;
	height:auto;
	float:left;
}

.col-1-2-vollbreite{
	width:49%;
	height:auto;
	float:left;
}

.col-1-3{
	width:32%;
	height:auto;
	float:left;
}

.col-1-3_produkt{
		width:32%;
	height:auto;
	float:left;
}

.col-1-3-ohne{
	width:33,3%;
	height:auto;
	float:left;
}

.col-2-3{
	width:66%;
	height:auto;
	float:left;
}

.col-3-3{
	width:98%;
	height:auto;
	float:left;
}

.col-2-3_produkt{
	width:66%;
	height:auto;
	float:left;
}


.col-1-4{
	width: 23.5%;
	height:auto;
	float:left;
}

.col_ohne {
    margin-right: 2%;
}

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

/* parallax */
.parallax_startseite {
  /* The image used */
  background-image: url("../Bilder/bbg_boeheler_gdi_herdecke_parallax_startseite.png");
  /* Set a specific height */
  min-height: 250px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*buttons*/

.bbg_button_blau{
	background-color: #0A5082;
	color:#ffffff;
	font-family: 'Fira Sans', sans-serif;
    font-size: 1em;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
	 -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
	border:none;
	outline: none;
	
}

.bbg_button_blau:hover{
	color:#ffffff;
	background-color: #5a5a5a;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	
}

.desaturate {
    filter: grayscale(100%); /* Standard */
    -webkit-filter: grayscale(100%); /* Webkit */
    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit */
}

.kontakt_teaser_image img{
	width: 100%;
	height:auto;
}

.kontakt_teaser_image{
	margin-right: 3%;
}

.kontakt_teaser_image a{
	cursor: pointer;
	color:#fedb31;
}

.kontakt_teaser_image a:hover{
	color:#0057a1;
}

.grow{
	-webkit-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

.grow:hover{
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
}

.weiss{
	color:#FFFFFF;
}

.gelb{
	color:#FAAA00;
}

.blau{
	color:#0A5082;
}

.kontaktteaser a{
	color:#FAAA00;
	cursor:pointer;
}
.kontaktteaser a:hover{
	color:#0057a1;
}

.kontaktblock{
	
	background-color: #B0B0B0;
    padding: 2%;
}

.flex-center_neu{
	justify-content: center;
}

.abstand_neu{
	    margin-top: 5%;
    margin-bottom: 5%;
}

textarea{
	width:70%;
}

.bildbereich_bbg_produkte img{
	width:100%;
}

.produkt_abstand{
	margin-top:3%;
}

@media screen and (max-width: 800px){
	
	.responsive{
		display:block;
		width:100%;
		float:left;
		height: auto;
	}
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none
img vertical-align: middle;


}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 60px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position "Prev"-Button 400px links von der Mitte */
.prev {
  left: calc(50% - 400px);
}

/* Position "Next"-Button 400px rechts von der Mitte */
.next {
  left: calc(50% + 400px);
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
 
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
.rot{
	color:#cc0000;
}
.produktion_start .col:first-of-type{
	margin-right:2%;
}
.gdi-max{
	max-width:80%;
	height:auto;
	margin:0 auto;
}
.col-1-6{	
	width:15%;
	height:auto;
	float:left;
}
.col-1-4{
	 width:15%;
	height:auto;
	float:left;
	
}
 .wrapper {
    
    justify-content: center; /* horizontal zentrieren */
    align-items: center;     /* vertikal zentrieren */
   
  }
.col {
  flex: 0 1 calc(16.66% - 10px);
  box-sizing: border-box;
  padding: 10px;
}
.tooltip {
    position: relative;
	margin-top: 15px;
  }
 .tooltip-box {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 10;
    width: 230px;
    transition: opacity 0.3s;
    pointer-events: none; /* Verhindert Klick-Blockierung */
    font-size: 0.85em;
  }

  .tooltip:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
  }
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}
.gdi_button_rot {
  animation: blink 2s infinite; /* Blinkt alle 2 Sekunden */
}
/* Mobile Search Button (nur auf mobilen Geräten sichtbar) */
.mobile-search-container {
  display: none; /* Standard: ausgeblendet */
  background-color: #e60000; /* Rot wie Menü */
  text-align: center;
  padding: 8px 0;
}

.mobile-search-btn {
  background: transparent;
  color: white;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

/* Sichtbar nur auf Geräten mit max. 768px Breite */
@media (max-width: 768px) {
  .mobile-search-container {
    display: block;
  }
}