@charset "utf-8";
@import url("normalize.min.css");

/* ++++ FARBEN ++++
Blau: #005597
Grau, dunkel: #1a1a1a;
Orange: #EE7F01
Orange (dunkel, Buttons): #BA6402
++++++++++++++++ */

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v17-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v17-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v17-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v17-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

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

.clear {clear: both;}
body{background: #005597; color: #1a1a1a; font-size: 14px; font-size: 0.875rem; font-family: 'Open Sans', sans-serif !important;}
main{background: #fff; padding: 2em 0;}
p{ margin-top: 0; margin-bottom: 0; }
.usite p{margin-bottom: 1em;}
a {color: #005597;}
a[href^="tel:"] {color: inherit;text-decoration: none;}

/*Headline*/
h1, h2, h3, h4, h5, h6{ color: #1a1a1a; font-weight: bold; font-size: 1em; line-height: normal; margin-top: 0;margin-bottom: 0;}
h1, h2, h3{color: #005597;}
h1{ font-size: 2em;}
h2{ font-size: 1.25em;}
h4 small {font-size: 100%;font-weight: normal;}

/*Button*/
.button-download{display: inline-block;background: #bcd1ea;color: #005597;position: relative;padding: 0.8em 3.5em 0.8em 1em;margin-right: 1em;text-decoration: none; margin-bottom: 0.5em;}
.button-download:after{content: "";position: absolute;width: 1.857em;height: 1.857em;background: url(https://www.baustoff-metall.de/wp-content/themes/baustoff-metall/img/layout/download.png) no-repeat;right: 1em;top: 0;bottom: 0;margin: auto;}
.button-download:hover{color: #1a1a1a;}
.button-download:hover:after{-webkit-animation: jump 0.3s;animation: jump 0.3s;}
@-webkit-keyframes jump {
	from { top: 0; } to { top: -0.5em;}
}
@keyframes jump {
	from { top: 0; } to { top: -0.5em;}
}

.button{color: #fff;font-size: 1.143em;font-weight: bold;background: #EE7F01;padding: 1em 1.5em;text-decoration: none;display: inline-block;text-align: center;border-radius: 5px;box-shadow: 0px 5px #BA6402;line-height: inherit;outline: none;border: none;}
.button:hover{-moz-transform: scale(1.01);-webkit-transform: scale(1.01);-ms-transform: scale(1.01);-o-transform: scale(1.01);transform: scale(1.01);}
.button:active{-moz-transform: scale(1);-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);background:#BA6402;box-shadow: 0px 5px #EE7F01;padding: 0.9em 1.5em 1.1em 1.5em;}
.button_small{font-size: 1em;}
.button[disabled] {opacity: 0.6;cursor: wait;}
.margin-t{ margin-top: 2em;}

/*Kopfbereich*/
header{ padding: 0.5em 0 0 0; background: url(../img/award-background-2025.jpg) no-repeat; background-size: cover;}
#logo img {margin-top: 0.5em;margin-bottom: 0.5em;}
header #h1_slide{position: absolute;bottom: 15%;padding-top: 2em;padding-bottom: 2em;}
header #h1_slide:before{content: "";background: #fff;right: 0;left: -100%;top: 0;bottom: 0;position: absolute; -moz-box-shadow: 5px 2px 6px rgba(0,0,0,0.5);-webkit-box-shadow: 5px 2px 6px rgba(0,0,0,0.5);box-shadow: 5px 2px 6px rgba(0,0,0,0.5);}
header h1, header #h1_slide img{position: relative;}
#h1_slide h1{ margin-top: 1rem; }
header #emo_img img{ display: block; }

/*Animation Kopfbereich*/
#h1_slide {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
.fadeInLeft {-webkit-animation: fadeInLeft 1s both; animation: fadeInLeft 1s both;}
@-webkit-keyframes fadeInLeft {
	from {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
	to {opacity: 1;-webkit-transform: none;transform: none;}
}
@keyframes fadeInLeft {
	from {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
	to {opacity: 1;-webkit-transform: none;transform: none;}
}

/*Footer*/
footer {outline: 2px solid #005597;border-top: 1px solid #fff;padding-top: 1em;padding-bottom: 1em;text-align: center;}
footer ul {list-style: none;margin: 0;padding: 0;}
footer ul li a {color: #fff;text-decoration: none;}
footer ul li {margin-top: 1em;}

/*Formular*/
.form_block{ /*background: cyan;*/ padding-top: 1em; padding-bottom: 1em;}
.form_row {/*background: green;*/width: 100%; margin-bottom: 1em;}
.form_row:after {content: "";display: block;clear: both;}
.form_row div {width: 100%; display: block;position: relative;margin:0;}
.form_row div input, .form_row div textarea, .form_row div label {width: 100%;font-size: 1em;line-height: 1em;border: none;}
.form_row div input, .form_row div textarea, #upload, #upload_besch{padding: 1.5em 1em 0.5em 1em; outline: none; border: 1px solid #DFDFDF; background: #F7F7F7;}
#upload, #upload_besch {padding-right: 4em;}
.form_row div textarea{resize: none;}
.form_row div textarea, #upload{min-height: 117px;line-height: 1.25em;}
.form_row div input:focus, .form_row p textarea:focus{border-color: #1a1a1a;}
.form_row div label {padding: 1em;white-space: nowrap;overflow: hidden;position: absolute;width: 100%;cursor: text;top: 0;left: 0;-webkit-transition: padding .3s linear;-moz-transition: padding .3s linear;-o-transition: padding .3s linear;transition: padding .3s linear;border: 2px solid transparent;border-bottom: none;color: rgba(26, 26, 26, 0.8);}
.form_row .inhalt > label {padding: 0.3em 1em 0.2em 1em;font-size: 0.85em; margin: 1px;}
.form_row .inhalt > textarea + label {background: #f7f7f7;display: inline-block;width: auto;opacity: 1;}

.form_row .inpt_err > input, .form_row .inpt_err > textarea, .form_row .inpt_err.div_check, #error, .form_row .inhalt.inpt_err > textarea + label, #upload.inpt_err, #upload_besch.inpt_err{ /*background: rgba(253,46,46,0.2);*/ background: #ffd5d5;}
#error, #send{ padding: 1em; display: block;background: rgba(253,46,46,1);color: #fff;text-align: center;}
#send{background: #accb00;font-size: 1.25em;font-weight: bold;}
.form_row .inpt_err .inpt_err > input {background: #F7F7F7;}
.form_row .inpt_err.div_check {padding: 0 0.5em 0.5em 0.5em;}
/*.form_row .inpt_err > label, .form_row .inpt_err > label, .form_row .inpt_err.div_check, .form_row .inpt_err.div_check > label { color: #fff; }*/

.form_row input[type='checkbox'] + label, .form_row input[type='radio'] + label {cursor: pointer; padding: 0;white-space: normal;overflow: inherit;position: relative;display: block;line-height: 1.5em;font-size: inherit;margin: 0;}
.form_row input[type='checkbox'], .form_row input[type='radio']{cursor: pointer;background: transparent;position: relative;visibility: hidden;margin: 0;padding: 0;display: none;}
.form_row input[type='checkbox']:checked + label::before, input[type='checkbox']:not(:checked) + label::before, .form_row input[type='radio']:checked + label::before, input[type='radio']:not(:checked) + label::before{content: '✓'; display: inline-block;width: 22px;height: 22px;top: 6px;border: none;border: 1px solid #DFDFDF; background: #F7F7F7;margin-right: 0.5em;position: relative;overflow: hidden;text-indent: -40px;}
.form_row input[type='checkbox']:checked + label::before, input[type='checkbox'].readonly + label::before, .form_row input[type='radio']:checked + label::before, input[type='radio'].readonly + label::before {background: #005597; color: #fff; text-align: center; text-indent: 0px;}

.produkte_check:before {content: "B+M Produkte wurden:* ";}
.produkte_check > div {display: inline-block;width: auto;}
.produkte_check > div:first-child {margin-right: 1em;}
.produkte_check > div > label > div {display: inline;vertical-align: middle;}
.produkte_check > div > label > div > input[type="text"] {max-width: 4em;padding-top: 1em;padding-bottom: 1em;}

.divbeteiligt {margin-bottom: 1.5em;}
.divbeteiligt .form_row:last-child, .divbeteiligt:last-of-type {margin-bottom: 0;}
.divbeteiligt .form_row div textarea {min-height: 112px;}

.div-datepicker:after, #upload:after{content: "";position: absolute;width: 2em;height: 2em;background: url(../img/date.png);background-size: 2em 2em;opacity: 0.5;right: 0.5em;bottom: 0;top: 0;margin: auto;}
#upload:after{background: url(../img/upload.png);width: 3em;height: 3em;background-size: 3em auto;bottom: 0.5em;top: inherit;}

.form_row div.col{padding: 0; margin-bottom: 1em;}
.form_row div.col:last-child {margin-bottom: 0;}

/*Datepicker*/
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {background: #005597 !important;border: 1px solid #c5c5c5 !important;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background: #bcd1ea !important;border: 1px solid #c5c5c5 !important;color: #2b2b2b !important;}

/*Upload*/
#drag-and-drop-zone, #drag-and-drop-zone_besch {width: auto;display: inline-block;}
#upload #drag-and-drop-zone  input[type=file], #upload_besch #drag-and-drop-zone_besch input[type=file] {position: absolute;top: 0;right: 0;margin: 0;border: solid transparent;width: 100%;opacity: 0;cursor: pointer;-ms-touch-action: manipulation;touch-action: manipulation;}
#files, #files_besch {list-style: none;padding: 0;margin: 1em 0 0 0;font-size: 0.9em;}
#files .text-success, #files .text-danger:after, #files_besch .text-success, #files_besch .text-danger:after {background: #8bc34a;width: 1.5em;height: 1.5em;line-height: 1.5em;text-align: center;display: inline-block;border-radius: 50%;color: #fff;font-weight: bold;}
#files .text-danger:after, #files_besch .text-danger:after {content: "x";height: 1.5em;background: rgba(253,46,46,1);margin-left: 0.5em;}
#files .text-danger:before, #files_besch .text-danger:before {content: "- ";}
#files li.media, #files_besch li.media {margin-bottom: 0.5em;}
.progress {background: #1a1a1a;margin-top: 2px !important;font-size: 0.9em;}
.progress, .progress > .progress-bar {border-radius: 5px;}
.progress-bar{ display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;color: #fff;text-align: center;transition: width .6s ease}
.progress-bar.bg-success {background-color: #8bc34a!important;}
.progress-bar.bg-danger {display: none;}
.progress-bar.progress-bar-striped { background: #EE7F01 !important; }

.upload_del_hide{display: none;}
.upload_del {float: right;color: rgba(253,46,46,1);}
.upload_del:after {content: "";width: 1.5em;height: 1.5em;background: url(../img/delete.png) no-repeat;background-size: 100% auto;/* position: absolute; */display: inline-block;vertical-align: middle;margin-left: 0.5em;cursor: pointer;opacity: 0.5;}

/*Frau Rauber*/
.bg-hblau{ padding: 1em; background: #bcd1ea;}
.sprechblase {position: relative;margin-bottom: 1em;}
.sprechblase img {border-radius: 50%;border: 2px solid #fff;display: inline-block;vertical-align: top;}
.sprechblase p{color: #fff;padding: 1.5em 1em 1em 1em;position: relative;right: 0;top: 1em;width: 70%; max-width: 250px; display: inline-block; z-index: 1;}
.sprechblase.sb-klein p {width: auto;left: inherit;right: inherit;}
.sprechblase p:before {content: "";display: block;position: absolute;width: 0;height: 0;border-width: 0 0 1.25em 1.5em;border-style: none none solid dashed;border-color: transparent transparent #005597 transparent;left: -1.4em;bottom: 1em;}
.sprechblase p:after{content: ""; background: #005597;position: absolute;width: 100%; height: 100%; left: 0; top: 0; z-index: -1; clip-path: polygon(0% 0%, 95% 10%, 100% 100%, 0% 100%);}
.bg-hblau ul {list-style: none;margin-top: 0;margin-bottom: 0;padding: 0;}
.bg-hblau ul li {display: inline-block;}
.bg-hblau ul li:after {content: "|"; margin: 0 0 0 0.25em;}
.bg-hblau ul li:last-child:after {content: none;}

/*Cookie-Banner*/
#cmpbox * {font-weight: normal !important;} .cmpmorelink, A.cmpmorelink, A.cmpmorelink:link{color:#005597 !important;} *.cmpboxbtnyes, A.cmpboxbtnyes, A.cmpboxbtnyes:link{background-color:#005597 !important;} *.cmpboxbtnno, A.cmpboxbtnno, A.cmpboxbtnno:link, *.cmpboxbtncustom, A.cmpboxbtncustom, A.cmpboxbtncustom:link{background-color:#005597 !important;} *.cmpbox{border-top:solid 12px #005597 !important;} TD.cmpallvend, TH.cmpallvend, TD.cmpallprps, TH.cmpallprps, *.cmpboxnaviitemactive {background-color: #ddd !important;}
*.cmpboxbtnno, A.cmpboxbtnno, A.cmpboxbtnno:link, *.cmpboxbtncustom, A.cmpboxbtncustom, A.cmpboxbtncustom:link {background: #ddd !important;}
*.cmpboxBG {z-index: 9999 !important;}
#cmpbox th, #cmpbox td {padding: 0.4375em;text-align: left;}

#cmpcookieinfo {overflow: auto;margin-bottom: 1em;}
#cmpcookieinfo td, #cmpcookieinfo th {text-align: left; padding: 0.5em; border-top: 1px solid #666;border-right: 1px solid #666;white-space: nowrap;}
#cmpcookieinfo th {border-top: 0;}

/*Raster*/
.container{ max-width: 1230px; margin: 0 auto; }
.container:after, .row:after{ content: ""; display: block; clear: both; }
.col { padding-right:1rem; padding-left: 1rem; float:left; width: 100%;}
.col-right{ float: right; }
.row { width:100%;float:left; position: relative;}
.txt-right{ text-align: right; }
.txt-center{ text-align: center; }
.small-1-2{ width: 50%; }
.small-2-2{ width: 100%; }

@media screen and (min-width:770px) and (max-width: 1023px){
	.medium-1-6{ width: 16.666666666666666666666666666667%; }
	.medium-2-6{ width: 33.333333333333333333333333333333%; }
	.medium-3-6{ width: 50%; }
	.medium-4-6{ width: 66.666666666666666666666666666667%; }
	.medium-5-6{ width: 83.333333333333333333333333333333%; }
	.medium-6-6{ width: 100%; }
}

@media screen and (min-width: 1024px){	
	.large-1-12{ width: 8.3333333333333333333333333333333%; }
	.large-2-12{ width: 16.666666666666666666666666666667%; }
	.large-3-12{ width: 25%; }
	.large-4-12{ width: 33.333333333333333333333333333333%; }
	.large-5-12{ width: 41.666666666666666666666666666667%; }
	.large-6-12{ width: 50%; }
	.large-7-12{ width: 58.333333333333333333333333333333%; }
	.large-8-12{ width: 66.666666666666666666666666666667%; }
	.large-9-12{ width: 75%; }
	.large-10-12{ width: 83.333333333333333333333333333333%; }
	.large-11-12{ width: 91.666666666666666666666666666667%; }
	.large-12-12{ width: 100%; }
}

/*Responsive*/
@media screen and (max-width: 1023px){
	header #h1_slide:before {right: 40%;left: 0;}	
	header #h1_slide img{max-width: 55%;min-width: 215px;}
	header #emo_img img{float: right;}
	.divbeteiligt .large-6-12 .form_row {margin-bottom: 1em;}
}

@media screen and (max-width: 769px){
	#logo img {max-width: 150px;}
}

@media screen and (max-width: 499px){
	header #h1_slide {position: relative;padding-top: 1.5em;padding-bottom: 1em;}
	header #h1_slide:before{right: 1em;}
	header #h1_slide h1 {margin-top: 0.5rem;}
	header #emo_img {margin-top: 1em;}
}



@media screen and (min-width:480px){
	.form_row div.col{margin-bottom: 0;}
	.form_row .col.large-6-12 {width: 49%;}
	.form_row .col.large-4-12 {width: 33%;}
	.form_row .col.large-8-12 {width: 65%;}
}

@media screen and (min-width:770px){
	h1{ font-size: 2.857em;}
	h2, #send{ font-size: 1.286em;}
	.sprechblase p{position: absolute; max-width: inherit;}
}


@media screen and (min-width:820px){
	footer .container div > a {float: left;margin-top: 0.25em;}
	footer .container div > ul {float: right;}
	footer ul li {display: inline-block;margin-top: 0.5em;margin-bottom: 0.5em;}
	footer ul li:after {content: "|";color: #fff;padding-left: 0.25em;padding-right: 0.25em;}
	footer ul li:last-child:after {content: none;}
}

@media screen and (min-width:1160px){
	header #h1_slide:before{right: 4em;}
}