﻿.bor
{
	border:1px solid red; 
}
.bor2
{
	border:0px solid red; 
}
.borgreen
{
	border:1px solid green; 
}


.bor3
{
	border:0px solid red; 
}

.borgreen3
{
	border:0px solid green; 
}



.mar-le-5
{
	margin-left:5px;
}

.mar-ri-5
{
	margin-right:5px;
}


/* ############################################ */
body
{
	/*background-color: #C0C0C0;*/
	background-color:#eee;
	color: #000000;
	font-family: Arial;
	font-weight: normal;
	font-size: 13px;
	line-height: 1.2;
	margin: 0px;
	padding: 0px;
}


/* ############################################ */
#topline
{
   background-color: #808080;
   overflow: hidden;
   text-align: left;
   width: 100%;
   height: 20px;
   margin-bottom: 5px;
}

#topline_e1
{
	margin-top: 2px;

	width: 100%; 
	max-width: 1240px; 	
	margin-left: auto; 
	margin-right: auto;
}

#BGCtitle
{
	margin-left: 5px;
	color: silver;
	font-size: 0.9rem;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
}



/* ############################################ */
#boxtop
{
	width: 100%; 
	max-width:1240px;
	min-height: 230px;
	margin-left: auto ;
	margin-right: auto ;
	background-color: #FFFFFF;
	-webkit-border-radius: 10px; 					/* Safari, Chrome */
	-moz-border-radius: 10px; 		 				/* Firefox */
	border-radius: 10px;
	-khtml-border-radius:10px; 						/* Konqueror */
	-webkit-box-shadow: 0px 0px 15px #808080; 		/* Safari, Chrome */
	-moz-box-shadow: 0px 0px 15px #808080; 		 /* Firefox */
	box-shadow: 0px 0px 15px #808080;
	
	background-image: url('../images/bgc_suppliers_worldwide_gray_gekippt.jpg'); background-repeat:no-repeat; background-position: center top; background-size: 70% 230px;
	
}


#bgclogo
{
	width: 310px;
	height: 150px;
}
.icon_factory
{
	width: 15px;
	height: 15px;
}
#faxnumber
{
	padding-top: 10px;
	color: gray; 
	font-size: 1.3rem; 
	font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
}


#headl2left
{
	float:left; width:30%; padding-top:13px;
	font-family: 'Work Sans', sans-serif; font-size: 1.8rem; line-height: 1.25; letter-spacing: -0.2px; color:gray;
	text-align: left;
}

#headl2center
{
	float:left; width:39%; text-align:center; padding-top:22px;
}

#headl2right
{
	float:left; width:30%; text-align:right; 
}


/*  http://codepen.io/Memphis/pen/ihjDu */
.form-wrapper {
	border-left: 1px solid #bababa;
	border-right: 1px solid #bababa;
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #aaa;
	background-color: #f6f6f6;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: 5px auto;
	overflow: hidden;
	padding: 5px;
	width: 420px;
	background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

.form-wrapper #search {
	border: 1px solid #CCC;
	-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
	-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
	box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #999;
	float: left;
	font: 14px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
	height: 10px;
	padding: 10px;
	width: 320px;
}

.form-wrapper #search:focus {
	border-color: #aaa;
	-webkit-box-shadow: 0 1px 1px #bbb inset;
	-moz-box-shadow: 0 1px 1px #bbb inset;
	box-shadow: 0 1px 1px #bbb inset;
	outline: 0;
}

.form-wrapper #search:-moz-placeholder,
.form-wrapper #search:-ms-input-placeholder,
.form-wrapper #search::-webkit-input-placeholder {
	color: #999;
	font-weight: normal;
}

.form-wrapper #submit {
	background-color: #183B87;
	border: 1px solid #00748f;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fafafa;
	cursor: pointer;
	height: 32px;
	float: right;
	font: 15px Arial, Helvetica;
	padding: 0px;
	text-transform: uppercase;
	width: 70px;
	background-image: linear-gradient(top, #31b2c3, #183B87);
}

.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
	background-color: #31b2c3;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#183B87), to(#31b2c3));
	background-image: -webkit-linear-gradient(top, #183B87, #31b2c3);
	background-image: -moz-linear-gradient(top, #183B87, #31b2c3);
	background-image: -ms-linear-gradient(top, #183B87, #31b2c3);
	background-image: -o-linear-gradient(top, #183B87, #31b2c3);
	background-image: linear-gradient(top, #183B87, #31b2c3);
}

.form-wrapper #submit:active {
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	outline: 0;
}

.form-wrapper #submit:-moz-focus-inner {
	border: 0;
}

/* ############################################ */





/* ############################################ */
#boxmain
{
	width: 100%; 
	max-width:1240px;
	min-height: 800px;
	margin-left: auto ;
	margin-right: auto ;
	background-color: #FFFFFF;
	-webkit-border-radius: 10px; 					/* Safari, Chrome */
	-moz-border-radius: 10px; 		 				/* Firefox */
	border-radius: 10px;
	-khtml-border-radius:10px; 						/* Konqueror */
	-webkit-box-shadow: 0px 0px 15px #808080; 		/* Safari, Chrome */
	-moz-box-shadow: 0px 0px 15px #808080; 		 /* Firefox */
	box-shadow: 0px 0px 15px #808080;
}


/* ############################################ */
/*h1 {font-size:30px;}*/
h2 {font-size:25px;}




/* ############################################ */
/* Back top TOP - weiter unten stehen noch 2 Zeilen */
        body {font-family:Verdana, sans-serif;}
        p {padding:20px 0;}

        #backtop {
	        position: fixed;
            left:auto; right: 20px; top:auto; bottom: 20px;
	        outline: none;
            overflow:hidden;
            color:#fff;
            text-align:center;
            /*background-color:rgba(49,79,96,0.84);*/
            background-color:#CF0907;
            height:40px;
            width:40px;
            line-height:40px;
            font-size:14px;
            border-radius:2px;
            cursor:pointer;
            transition:all 0.3s linear;
            z-index:999999;
            opacity:1;
            display:none;
        }
        #backtop:hover {
            background-color:#416ED0;
        }
        #backtop.mcOut {
            opacity:0;
        }




/* ############################################ */
/* http://www.bestcssbuttongenerator.com/ */
.myButton {
	background-color:#3d70bd;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #417fdb;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:11px;
	font-weight:bold;
	padding:3px 30px;
	text-decoration:none;
	text-shadow:0px 1px 0px #eb1717;
}
.myButton:hover {
	background-color:#e04e4e;
}
.myButton:active {
	position:relative;
	top:1px;
}





/* ############################################ */
/* image dynamisch verkleinern */
.amensic-image-wrapper{
 max-width:90%;
 height:auto;
 position: relative;
 display:block;
 margin:0 auto;
}
.amensic-image-wrapper img{
 width:100% !important;
 height:auto !important;
 display:block;
}


/* ############################################ */
/* Equipment items Startpage */
.art_new
{
	float:left; 
	border:0px solid silver; 
	padding:0px; 
	background:transparent; 
	width:48%; 
}







/* ############################################ */
/* Equipment items */
.equip
{
	border:1px solid silver;
	padding:15px; 
	margin-top:10px;
}
.equip-div-pic
{
	float:left; 
	margin-right:0px; 
	width:20%; 
	text-align:left; 
	padding-right:10px;
}
.equip-box
{
	float:right;
	width:80%;
}
.equip-art-desc
{
	background-color:#FAEA7A;
	font-size:20px;
	padding-left:10px;
	background: linear-gradient(to top, white 0%, #FFCC00 50%);
}
.equip-category
{
	font-size:10px;
	padding-right:10px;
	text-align:right;
}
.equip-art-det
{
	font-size:14px; padding-left:12px;
}
.equip-art-price
{
	font-size:12px; padding-left:12px; padding-top:5px;padding-bottom:5px;
}
.equip-art-avai
{
	font-size:12px; padding-left:11px; padding-top:5px;padding-bottom:5px;;
}
.equip-art-bti
{
	background-color:#EEEEEE; border:1px solid #FFFFFF;
}




/* ############################################ */
.tbl-chemicals
{
	color:#333333; width:100%; border-collapse:collapse; border:1px solid silver; font:11px Arial;
}
.tbl-chemicals td
{
	padding:5px; vertical-align:top;
}
.tbl-chemicals tr
{
	padding-top:5px; font-size:14px; height:20px;
}

/* ############################################ */
.welltest{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}

/* ############################################ */
.paym
{
	text-align:right; padding-top:10px; padding-bottom:10px;
}
.paym img
{
	border:0px; width:70px; padding:5px;
}




/* ############################################ */
#footerblock1
{
   /*background-color: #808080;*/
   /*background-color:#183B87;*/
   background-color:#264374;
   /* overflow: hidden; */
   text-align: left;
   width: 100%;
   min-height: 200px;
   margin-bottom: 0px;
}

#footerblock1_e1
{
	width: 100%; 
	max-width: 1240px;
	min-height: 200px;	
	margin-left: auto; 
	margin-right: auto;
}


#footerblock1_line
{
	width:100%; border:0px solid green; display: flex;
}
#footerblock1_vline
{
	border-left:1px solid white; float:left; padding-top: 50px; padding-bottom:50px;
}
#footerblock1_1v3
{
	width:33%; float:left; margin-left: auto; margin-right: auto; 
}
#footerblock1_2v3
{
	width:33%; float:left; margin-left: auto;	margin-right: auto;
}
#footerblock1_3v3
{
	width:33%; float:left; margin-left: auto;	margin-right: auto;
}


/* ############################################ */
#footerblock2
{
   background-color:#808080;
   /* overflow: hidden; */
   text-align: left;
   width: 100%;
   min-height: 20px;
   margin-bottom: 0px;
}

#footerblock2_e1
{
	width: 100%; 
	max-width: 1240px;	
	margin-left: auto; 
	margin-right: auto;
}
#footercopy
{
	color: silver;
	font-size: 1.4rem;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	padding-top:50px;
}











.sticky-container {
/*background-color: #333;*/
padding: 0px;
margin: 0px;
position: fixed;
left: -170px;
top: 230px;
width: 200px;
}
.sticky li {
text-align:right;
list-style-type: none;
background-color: #808080;
color: #efefef;
height: 36px;
padding: 0px;
margin: 0px 0px 2px 0px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
cursor: pointer;
/*
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
*/
-webkit-filter: grayscale(0%);
}
.sticky li:hover {
margin-right: -35px;
-webkit-transform: translateX(50px);
		-moz-transform: translateX(50px);
		-o-transform: translateX(50px);
		-ms-transform: translateX(50px);
		transform:translateX(50px);
		/*background-color: #8e44ad;*/
/*
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
*/
-webkit-filter: grayscale(0%);
}
.sticky li img {
float: right;
margin: 2px 2px;
margin-right: 2px;
}
.sticky li p {
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 36px;
}










/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */
@media only screen and (max-width: 1280px)
{
	#faxnumber
	{
		padding-top: 5px;
		font-size: 1.0rem; 
	}
	.form-wrapper {
		width: 98%;
	}
	.form-wrapper #search {
		width: 70%;
	}
	.form-wrapper #submit {
		width: 20%;
	}
	#menu_menu
	{
		display: none;
	}
}






/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */
@media only screen and (max-width: 1100px)
{
	/* Hauptmenü aus */
	#menu_bl
	{
		display: none;
	}
	/* AusklappMenü aus */
	#menu_s_bl
	{
		display: block;
	}
}


/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */
@media only screen and (max-width: 1000px)
{
	#headl2left
	{
		font-size: 1.4rem;
	}
	#bgclogo
	{
		width: 262px;
		height: 125px;
	}
	#boxtop
	{
		background-size: 60% 150px;
	}
	#faxtitle
	{
		display: none;
	}

	#menu_menu
	{
		display: block;
	}
	/* Hauptmenü aus */
	#menu_lo
	{
		display: none;
	}
	/* AusklappMenü aus */
	#menu_s_lo
	{
		display: block;
	}
	/* Hauptmenü aus */
	#menu_so
	{
		display: none;
	}	
	/* AusklappMenü aus */
	#menu_s_so
	{
		display: block;
	}
}




/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */
@media only screen and (max-width: 850px)
{

	/* Hauptmenü aus */
	#menu_scp
	{
		display: none;
	}	
	/* AusklappMenü an */
	#menu_s_scp
	{
		display: block;
	}


	
}





/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */
@media only screen and (max-width: 768px)
{
	/* ############################################ */
	#boxtop
	{
		min-height: 100px;
	}

	#bgclogo
	{
		width: 210px;
		height: 100px;
	}

	.form-wrapper {
		width: 98%;
	}
	.form-wrapper #search {
		width: 70%;
	}
	.form-wrapper #submit {
		width: 20%;
	}
	
	#headl2left
	{
		display: none;
	}
	#headl2center
	{
		float:left; width:100%; text-align:center; 
	}
	#headl2right
	{
		display: none;
	}

	#menu_scn
	{
		display: none;
	}
	/* AusklappMenü an */
	#menu_s_scn
	{
		display: block;
	}
	#menu_scp
	{
		display: none;
	}
	/* AusklappMenü an */
	#menu_s_scp
	{
		display: block;
	}
	#menu_so
	{
		display: none;
	}
	/* AusklappMenü an */
	#menu_s_so
	{
		display: block;
	}



	#maintabline
	{
		width:100%; border:0px solid green; display:block;
	}
	#maintab1v3
	{
		width:100%; float:none; 
	}
	#maintabline12v3
	{
		display: none;
	}
	#maintab2v3
	{
		width:100%; min-width:auto; float:none; margin:auto;
	}
	#maintab1v2
	{
		width:100%; min-width:auto; float:none; margin:auto;
	}
}



/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */
@media only screen and (max-width: 500px)
{

	#menu_spn
	{
		display: none;
	}
	/* AusklappMenü an */
	#menu_s_spn
	{
		display: block;
	}
	#menu_saz
	{
		display: none;
	}
	/* AusklappMenü an */
	#menu_s_saz
	{
		display: block;
	}
	#menu_scas
	{
		display: none;
	}
	/* AusklappMenü an */
	#menu_s_scas
	{
		display: block;
	}

	#maintab1v2
	{
		display: block;
	}
	#maintab1v4
	{
		width:100%; min-width:auto; float:none; margin:auto;
	}	
	#maintabline12v4
	{
		display: none;
	}

	
	/* ############################################ */
	/* Equipment items Startpage */
	.art_new
	{
		float:none;
		width:98%;
	}

	
	
	.equip-div-pic
	{
		float:none; 
		margin-right:auto;margin-left:auto; 
		width:100%; 
		text-align:left; 
		padding-right:auto;padding-left:auto;
	}
	.equip-box
	{
		float:none;
		width:100%;
	}
}


/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */
@media only screen and (max-width: 320px)
{
	#bgclogo
	{
		width: 105px;
		height: 50px;
	}


}





/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */

/* https://blog.kulturbanause.de/2014/11/gestaltungsraster-css-grids-web-design/ */
/* Gestaltung des Beispiels */
/*
article:nth-of-type(1) { background: #0099ff; }
article:nth-of-type(2) { background: #66cc00; }
aside { background: #ff0099; }


.columns div {background:rgba(0, 0, 0, 0.2);}
*/

/* Raster */
/*

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
*/

.rowJ {
  width:auto;
  color:white;
}
.rowJ a {
  color:#CCCCCC;
}

.rowJ:before, 
.rowJ:after {
  content: " ";
  display: table;
}

.rowJ:after {
    clear: both;
}

.columns {
  float:left;
  padding: 30px;
}

.bor-1{
  border-right:1px solid #CCCCCC;
}
.bor-2{
  border-right:1px solid #CCCCCC;
}


@media screen and (max-width:600px) {

/* Small */
.small-1 {width:100%;}
.bor-1 {border-right:0px;}
.bor-2 {border-right:0px;}

}

@media screen and (min-width:600px) and (max-width:1000px) {

/* Medium */
.medium-1 {width:50%;}

.medium-2 {width:100%;}
.bor-2 {border-right:0px;}
}

@media screen and (min-width:1000px) {

/* Large */
.large-1 {width:33.333%;}

.large-2 {width:66.666%;}

.large-3 {width:100%;}

}

