body {
  	font-size: 0.95em;
  	font-family: "Open sans", Helvetica, Arial, sans-serif;
  	color: #666666;
  	padding: 0;
}
/*********************************************************************

                                TYPOGRAPHY

**********************************************************************/
fieldset {
	margin: 0;
	border: none;
}
form {
	margin: 0;
	padding: 0;
}
p {
  	line-height: 1.7em;
  	margin: 0 0 10px 0;
}
.margin-bottom {
	margin: 0 0 10px 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  	font-family: "Open sans", Helvetica, Arial, sans-serif;
  	color: #333333;
}
h1 {
  	font-size: 40px;
  	font-weight: 400;
}
h2 {
  	font-size: 36px;
  	font-weight: 300;
}
h3 {
  	font-size: 20px;
  	font-weight: 300;
}
h4 {
  	font-size: 18px;
  	margin-top: -30px;
  	padding: 0;
}
h5 {
  	font-size: 20px;
  	font-weight: 300;
  	margin: 15px 0 10px 0;
  	padding: 0;
}
h6 {
  	font-size: 1.3em;
  	font-weight: 200;
  	margin: 0 0 10px 0;
  	padding: 0;
}
a {
  	color: #bd1550;
}
a:hover {
  	color: #e93675;
}

dl {
	font-size: 1.05em;
	padding: 5px 0 5px 0;
}
dt {
	width: 200px;
	margin-top: 10px;
	padding: 5px 0 5px 0;
}
dd {
	width: 300px;
	margin: -30px auto 0 205px;
	padding: 5px 0 5px 0;
}
/* ====================================================   HEADER   ==================================================== */
header {
	position: relative;		
	height: 14em;
	margin: 1.5em  2em  0em;
	background: #676767 url("../images/beam-product_logo.svg") no-repeat right; 
	background-size: contain; 			 
	padding: 0 0 0.5em;
}
header a h1,
header a p {
	color: white; 
	font-size: 1.25em;
	font-family: verdana;
	border-left: 0;
	padding: 0px;
    display: table;
/* Überschriften und Absätze sind sonst immer 100% breit, durch display:table und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig. */
}
#h1 {
	font-family: verdana;
	font-size: 2.2em;
}
label {
	margin-bottom: 20px;
}
.ribbon {
	display: inline-block;
	position: relative;	
	margin: 2em 0 2em -1.4em;
	padding: 0.4em 0.8em 0 1em;
	background: #4e7a92;
	box-shadow: 0px 1px 3px rgba(0,0,0,.8);
	text-decoration: none;
}
.ribbon::before{
	display: block;
	width: 1.5em;
	height: 0;
	position: absolute;
	bottom: -1.5em;
	left: -1.5em;
	content: "";
	border-bottom: 1.5em solid transparent;
	border-right: 1.5em solid rgb(0, 80, 116);
}
.darkblue {
	color: #003366;
}
/*********************************************************************

                            Navigation in header

**********************************************************************/
.border {
	border: black 1px solid;
}
.main-menu {
  	border-style: solid;
  	border-width: 1px;
  	border-color: #cccccc;
  	border-radius: 5px;
  	background-color: #f1f1f1;
  	font-weight: 200;
  	font-size: 1.1em;
  	margin: 23px 0 0px 0;
}
.main-ul-menu {
	display: flex;
	justify-content: center;
	margin: 0px 0 0 0px;
	padding: 0;
}
.main-ul-menu li {
	text-align: center;
	list-style: none;
	padding: 12px 38px 9px 36px;
}
.main-ul-menu a {
	text-decoration: none;
	color: #454545;
	font-size: 1.0em;
}
.main-ul-menu li:hover,
.main-ul-menu li:focus {
  color: #000000;
  background-color: #BEBEBE;
}
#start-menu:target #product-content {
}
#product-content {
	display: none;
	margin: 40px 0 0 73px;
	width:  175px;
	list-style: none;
	border: 1px solid gray;
	position: absolute;
	background-color: #ddd;
	padding: 0;
}
#product-content li {
	width:  150px;
	text-align: left;
	margin-top: 0px;
	padding:  8px 12px 12px 12px;
}
.active {
	background: #BEBEBE;
}
/*********************************************************************

                                Smartphone

**********************************************************************/
.topnav {
	display: none;
	height: 62px;
	margin-left: 25px;
	width: auto;
	font-size: 20px;
	background-color: #f1f1f1;
	border-bottom: 1px solid #104e8b;
}
.topnav a {
  	padding: 20px 10px;
  	font-size: 20px;
  	display: inline-block;
  	color: #003366;
  	font-family: verdana;
  	text-decoration: none;
}
.topnav a:hover {
  	background-color: #ddd;
  	color: black;
}
#myLinks {
	display: none;
	list-style: none;
}
#myLinks a {
	text-decoration: none;
	font-size: 1.2em;
	color: #454545;
	}
#myLinks li {
	width: 180px;
	padding:  15px 15px 15px 12px;
	margin:  0 5px 0 15px;
	}
#myLinks li:hover {
  	background-color: #BEBEBE;
  	color: black;
}
/* hamburger-icon */
#mobile_icon {
	height: 50px;
	width: auto;
	font-size: 20px;
	display: block;
	position: fixed;
	padding: 0;
	right: 12px;
	top: 15px;
	z-index: 1;
}
#dropdown-article {
	display: none;
	list-style: none;
	border: 1px solid gray;
	position: fixed;
	background-color: #ddd;
	margin: -145px 0 0 130px;
}
#dropdown-article li {
	margin: 0 0 0 -40px;
	padding: 15px 5px 15px 12px;
}
#dropdown-article li:hover,
#dropdown-article li:focus {
  color: #000000;
  background-color: #BEBEBE;
}
.navbar-navM {
	margin: 0;
	padding: 10px;
	list-style: none;
}
.mobile-product-title {
	margin-top: 20px;
}
/*********************************************************************

                            main content

**********************************************************************/
#breadcrumb {
	font-size: 1.0em;
	margin: 42px 30px 0 30px;
}
#breadcrumb p {
	padding: 5px 20px 0px 0px;
	text-decoration: none;
}
#breadcrumb a {
	text-decoration: none;
}
.breadcrumb_activ {
	background-color: #BEBEBE;
}
.main-breadcrumb {
	color: black;
}
.lead-text {
	font-size: 1.1em;
	margin-top: 7px;
}
.text {
	text-decoration: none;
	font-size: 1.0em;
	color: #663300;
	}
.float-left {
	float: left;
	padding: 0;
}
.img {
	float: left;
	padding: 0;
	margin: 0 10px 0 0;
	border: 1px #666666 solid;
}
.float-clear {
	clear: both;
	margin: 0;
}
.main {
	margin: 52px 30px 0 32px;
}
.main-product {
	margin: 8px 30px 0 30px;
}
.home-intro {
	margin-top: 0px;
	padding:  5px 10px 0 0;
	max-width: 900px;
}
.kontakt-intro {
	margin-top: 10px;
	padding:  5px 10px 0 0;
	max-width: 580px;
}
.container-flex {
	display: flex;
	margin: 0 -10px 0 0;
	max-width: 950px;
}
.product-presentation {
	width: 450px;
	margin: 10px 10px 10px 0;
	border: 1px #e12424 solid;
	border-radius: 10px;
}
.product-presentation a {
	text-decoration: none;
}
.product-list {
	padding:  10px;
	display: flex;
}
.product_title {
	font-size: 1.2em;
	color: darkblue;
	font-weight: 300;
}
.pic1 {
	width: 467px;
	height: auto;
	border: black 1px solid;
	margin-top: 18px;
}
.bildzeile {
	padding: 10px 0 10px 0;
}
/*********************************************************************

                           Footer

**********************************************************************/
.footer-flex {
	display: flex;
	background: #f1f1f1; 
	margin:  10px 0 5px 0;
}
.footer-part {
	width: 240px;
	border-left: 1px black solid;
	padding:  5px 10px 0 10px;
}
.footer-title {
	font-size: 1.25em;
	margin: 5px 0 5px 0;
	padding: 0;
}
.footer-p {
	margin: 5px;
}
.agb {
	max-width: 550px;
}
/*********************************************************************

                          Big Images

**********************************************************************/
.pointer {
	cursor: pointer;
}
.lupe {
	position: absolute;
	margin: 5px 0 0 -23px;
	font-size: 1.3em;
}
.img_box {
	display: none;
	position: absolute;
	width: 400px;
	border: 1px black solid;
	z-index: 10;
}
.crossHeader {
	position:  relative;
	left: 330px;
	cursor: pointer;
	display: inline-block;
	border: 1px black solid;
 	margin: 5px 20px 5px 12px;
	padding: 0px 9px 3px 9px;
	font-size: 2.2em;
	height: auto;
	color: black;
}
.crossContainer {
	background-color: white;
	cursor: pointer;
	padding: 0;
	margin: 0;
	width: auto;
}
.img_2 {
	margin-top: 0px;
	display: none;
}
/*********************************************************************

                           Kontaktseite

**********************************************************************/
.form_border {
	border: black 1px solid;
}
.help_site {
	margin: 40px 0 50px 0;
}
.red {
	color: darkred;
}
/************** Formulare ******************/
.achtung {
    color: #CC0000;
    font-weight: normal;
    font-size: 1.0em;
}
.ok {
    color: #009900;
    font-weight: bold;
    font-size: 1.0em;
}
.warning {
	float: left;
	width: 20px;
	height: auto;
	font-weight: bold;
	margin: 7px 7px 0 0;
}
.text_klein {
	font-size: 13px;
}
input, select, textarea, button {
	font-size: inherit;
	font-family: inherit;
}
::placeholder {
	color: darkgray;
	opacity: 1;
	transition: opacity 1s;
}
:focus::placeholder { opacity:0  }
select {
   background-color: seashell; 
   width:180px; 
   font-size: 1.1em; 
   font-family: inherit;
   font-weight: 300;
}

#anrede {
	color: #3f3f3f;
	width: 130px;
	height: auto;
    margin: 5px 0 15px;
    padding: 4px;
}
#name {
	margin-right: 150px;
	width: 380px; 
	height: 30px;
	font-size: 1.0em;
}
#email {
    width: 380px;
    height: 30px;    
    font-size: 1.0em;
}
#nachricht {
    width: 381px;
    height: 150px;    
    font-size: 1.0em;
}
input[type=button] {
	font-size: 0.9em;
	background-color: #006699;
	border-radius: 9px;
	color: white;
	padding: 10px 40px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}
input[type=submit] {
	font-size: 0.9em;
	background-color: #006699;
	border-radius: 7px;
	border: none;
	color: white;
	padding: 10px 40px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}
#btn-submit {
    margin-top: 5px;
    position: relative;
    left: 100px;
}
.label {
	display: block;
    font-size: 1.1em;
    margin-top: .9em;
}
.identity {
	display: none;
}
/************** Product Details ******************/
.product-button {
	font-size: 1.2em;
	margin: 5px 0 5px 0;
	padding: 5px;
	cursor: pointer;
}
.details-menu {
	cursor: pointer;
	margin: -5px 0 -5px -40px;
	font-size: 1.1em;
	list-style: none;
	text-decoration: underline;
	color: darkred;
}
.details-menu li {
	margin-left: -5px;
	padding: 5px 0 5px 5px;
}
.details-activ {
	background: #efefef;
}
.product-details {
	position: absolute;
	display: none;
	z-index: 10;
	background: #FFFAF0;
	max-width: 700px;
	margin: 0 10px 10px 0;
	border: 1px gray solid;
	border-radius: 5px;
	padding: 10px;
}
.line {
	border-color: black;
	border-width: 0.5px;
}
.detail-div {
	display: none;
}
.detail-bild {
	display: flex;
	margin-left: 25px;
}
/*********************************************************************

                     Media-Queries

**********************************************************************/
/* weniger als 950px */
@media(max-width: 950px) {
}
/* weniger als 850px */
@media(max-width: 850px) {
	.container-flex {
		flex-flow: wrap;
	}
}
/* weniger als 750px */
@media(max-width: 750px) {
	.product-presentation {
	}
}
/* über 680px  dont't show mobile navigation */
@media(min-width: 681px) {
	.topnav {
		display: none;
	}
	#mobile_icon {
		display: none;
	}
	#myLinks {
		display: none;
	}
	.mobile-title {
		display: none;
	}
	.mobile-product-title {
		display: none;
	}
}
/* weniger als 680px */
@media(max-width: 680px){
	header {
		display: none;
	}
	#breadcrumb {
		display: none;
	}
	.topnav {
		display: block;
	}
	.product-presentation {
		margin: 10px 10px 10px 0;
	}
	.footer-flex {
		display: inline-block; 
		background: #f1f1f1;
	}
	.footer-part{
		border-left: none;
		border-bottom: 1px black solid;
	}
	dt {
	color: black;
	}
	dd {
		margin: 0;
	}	 
}
/* weniger als 580px */
@media(max-width: 580px){
	.product-presentation {
		border: none;
		margin-left: -10px;
	}
}
/* weniger als 510px */
@media(max-width: 510px){
	#myLinks {
		min-width: 420px;
	}
	.img {
		width: 150px;
		height: auto;
	}
	.pic1 {
		width: 350px;
	}
	#name {
		width: 320px;
	}
	#email {
    	width: 320px;
	}
	#nachricht {
   		width: 321px;
	}
}
/* weniger als 420px */
@media(max-width: 420px) {
	#myLinks {
		min-width: 350px;
	}
	.pic1 {
		width: 311px;
	}
	#name {
		margin-right: 0;
		width: 260px;
	}
	#email {
    	width: 260px;
	}
	#nachricht {
    	width: 261px;
    }
    #btn-submit {
    	left: 80px;
    }
    .form_border {
	    border: none;
    }
    .main {
		margin: 52px 15px 0 17px;
	}
	.topnav {
		margin-left: 15px;
	}
	.product-list {
		padding:  0px;
	}
}
/* weniger als 420px */
@media(max-width: 420px) {
	.pic1 {
		width: 175px;
	}
}