/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Reset //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,img,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,hgroup,menu,nav,summary,time,mark,audio,video,header,footer { margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; background:transparent; }
ol,ul { list-style:none; }
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block; }
a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; }

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Clearfix ----------- */
/* Some clearfix code from HTML5 Boilerplate */

.clearfix:before,
.clearfix:after								{ content: ""; display: table; }

.clearfix:after								{ clear: both; }

.clearfix						 			{ zoom: 1; }

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-size:100%; }
body { background-color: #fff; min-height: 100%; min-width: 100%; overflow: auto; font: normal 1rem Arial, Helvetica, sans-serif; font-size: 12px; color: #4b403c;  }

#preloader 	{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; z-index: 1100; }
#loader	{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('../images/loading.gif') 50% 50% no-repeat rgb(249,249,249); }

p { margin: 0 20px 20px 20px; }

strong { font-weight: bold; }

h1 { display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; }
h3 { display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; }
h4 { display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; }

h1, h3 { margin-left: 20px; }

ul { display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; }
ul li { display: list-item; text-align: -webkit-match-parent; }

.logo { width: 413px!important; height: auto!important; margin: 20px auto 0 auto; }

.Stil1 { font-family: Arial, Helvetica, sans-serif; color: #333333; }
.Stil2 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #ffcc00; }

.content { text-align: center; margin: 0 auto; width: 100%; max-width: 800px; }

.spacing { word-spacing: 0.5em; }

.link { font-size: 20px; font-weight: normal; text-transform: uppercase; text-decoration: none; padding: 10px; }

a.col1 { color: #ffcc00; transition: color 0.4s; }
a.col1:hover { color: #4b403c; }
a.col2 { color: #4b403c; transition: color 0.4s; }
a.col2:hover { color: #ffcc00; }
a.col1.active { border-bottom: #4b403c 1px solid; }
a.col2.active { border-bottom: #ffcc00 1px solid; }


.divi { font-weight: lighter; font-size: 20px; color: #ffcc00; font-style: italic; }

.topic { width: 100%; max-width: 600px; margin: 60px auto; font-size: 14px; line-height: 2em; text-align:left; }
.condition { width: 100%; max-width: 600px; margin: 60px auto; font-size: 14px; text-align: left; }
.text {font-size: 20px; text-align: center;}

.footer { width: 100%; max-width: 750px; margin: 30px auto 20px auto; }
.footer p { margin: 0 20px 0 20px; }

.link a { text-decoration: none; }
.link a:hover { text-decoration: underline; }

a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; }
.copylink a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #333333; text-decoration: none; } 
.copylink a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #ffcc00; text-decoration: underline; }

.gear-animation { background-image: url('../images/desk_ani.gif'); background-position:center center; background-size: contain; background-repeat: no-repeat; width: 750px; height: 253px; margin: 20px auto; }

.inner-left     { width: 70%; float: left; text-align: left; line-height: 20px; }
.inner-right    { width: 30%; float: left; display: flex; justify-content: center; }
.inner-right img { width: 130px; height: auto; margin-top: 20px; }

.cc-banner.cc-bottom { width: 70%!important; margin: 0 auto!important; }
.cc-message a    { font-size: 100%!important; }

#tablegears {display: flex; justify-content: center;}
#tablecsr {width: 80%; margin: 30px auto; border-spacing: 16px 8px;}


.tablecsrtext {vertical-align: middle; padding-left: 20px; text-align:left;}
.tablecsrimg {vertical-align: middle;}


/* Hover effect */

.popupimg {width: 102px; height: auto;}

 
 div#popup01,
 div#popup02,
 div#popup03,
 div#popup04,
 div#popup05,
 div#popup06,
 div#popup07,
 div#popup08,
 div#popup09,
 div#popup10 {
   display: none;
   position: absolute;
   width: 480px;
   padding: 10px;
   background: #eeeeee;
   color: #000000;
   border: 3px solid #ffcc00;
   font-size: 14px;
 }

/*Mobiles*/

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

.logo { width: 310px!important; height: auto!important; margin: 0 auto 0 auto; }

.gear-animation { background-image: url('../images/mob_ani.gif'); background-position:center center; background-size: contain; background-repeat: no-repeat; width: 250px; height: 347px; }

.inner-left { width: 100%; text-align: center; }
.inner-right { width: 100%; }

.cc-banner.cc-bottom { width: 100%!important; }

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


 div#popup01,
 div#popup02,
 div#popup03,
 div#popup04,
 div#popup05,
 div#popup06,
 div#popup07,
 div#popup08,
 div#popup09,
 div#popup10 {
   display: none;
   width: 50%;
   padding: 3px;
   background: #eeeeee;
   color: #000000;
   border: 3px solid #ffcc00;
   font-size: 1em;
 }

}

#tablecsr {width: 80%; margin: 30px auto; border-spacing: 16px 8px;}

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

.logo { width: 250px!important; height: auto!important; margin: 0 auto 0 auto; }

.gear-animation { background-image: url('../images/mob_ani.gif'); background-position:center center; background-size: contain; background-repeat: no-repeat; width: 250px; height: 347px; margin: 10px auto 10px auto; }

#tablecsr {width: 80%; margin: 30px auto; border-spacing: 16px 8px;}

}

/*Karriereseite*/

.karriere {
	background: url("../buttons/karriereseite_001.png") top right;
	margin-top: -140px;
	margin-left: -200px;
    float: left;
    width:140px;
    height:140px;	
}

.karriere a {
width:100%; 
height:100%; 
display:block; 
text-decoration:none;
}

.karriere a span {
display:block; 
width:100%;
}

.karriere {background:url("../buttons/karriereseite_001.png") top right;}
.karriere:hover {background:url("../buttons/karriereseite_001.png") bottom right;}