@font-face {
    font-family: 'graublau_web';
    src: url('../fonts/graublauweb-webfont.eot');
    src: url('../fonts/graublauweb-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/graublauweb-webfont.woff') format('woff'),
         url('../fonts/graublauweb-webfont.ttf') format('truetype'),
         url('../fonts/graublauweb-webfont.svg#graublau_webregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'graublau_web';
    src: url('../fonts/graublauwebbold-webfont.eot');
    src: url('../fonts/graublauwebbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/graublauwebbold-webfont.woff') format('woff'),
         url('../fonts/graublauwebbold-webfont.ttf') format('truetype'),
         url('../fonts/graublauwebbold-webfont.svg#graublau_web_boldregular') format('svg');
    font-weight: bold;
    font-style: normal;

}
/* Setup --------------------------------------------- */
a { color: #AECA05; text-decoration: none;}
a:visited { color: #AECA05; }
a:hover { color: #000; }
a:focus { outline: thin dotted; }
body {background-color: white; color: #666; font-family: graublau_web, helvetica, arial, sans-serif;}
h1{margin: 0 0 .67em 0; font-size: 1.6em; font-weight: bold;}
h2{margin: 0 0 0 0; font-size: 1em; font-weight: bold;}
h3{margin: 0 0 1em 0; font-size: 1.3em; font-weight: bold;}
h4{margin: 0 0 1.33em 0; font-size: 1.2em; font-weight: bold;}
p{margin-bottom: 1em; font-weight: normal;}
strong{ font-weight: bold; }
hr{border-bottom: 1px solid #AECA05; border-top: 1px solid #AECA05; border-left: 0px; border-right: 0px; background-color: #FFF; height: 3px;}

/* Struktur ------------------------------------------ */
#container_wrapper{max-width: 1920px; position: relative; margin-left: auto; margin-right: auto;}
#container{ margin-left: 1em; margin-right: 1em; position: relative;}
#header{height: 70px; width: 100%; background-color:#2a2e31; margin-bottom: 2em;}
#header_inner{ font-size: 1.2em; color: white; margin: 0 auto 0 auto; width: 100%; max-width: 1400px; height:70px;}
#suchen_wrapper{float: right; margin-top: 1em; margin-right: 2em;}
#logo{float: right; margin-top: 0.5em; margin-right: 2em;}
#navi_wrapper{width: 100%;}
#navi{ margin: 0px 1em 2em 1em;}
#mainmenu{}
#mainmenu a{color: #666; text-decoration: none; border-bottom: 1px solid #AECA05; display: block; padding: 3px 3px 3px 0px;}
#mainmenu a:hover{background-image: url(../images/menu_hover.png); background-repeat: no-repeat; background-position: right center;}
#mainmenu a.now{color: #AECA05;}
#mainmenu li li a{margin-left: 1em;}
#mainmenu li li li a{margin-left: 2em;}
#mainmenu li li li li a{margin-left: 3em;}
#contact{margin: 1em; font-size: 0.9em;}
#content {width:100%;}
#content_inner{ min-height: 200px; padding-top: 1px;}
#footer{border-top: 1px solid #AECA05;}
#footer_inner{margin: 1em;}
#mobilemenu{display: none;}
#back-to-top { width: 50px; height: 50px; position:fixed; bottom:20px; right:0px; cursor:pointer; padding:10px; background:#AECA05; border-bottom-left-radius: 10px; border-top-left-radius: 10px; color:white; opacity: 0.3; background-image: url(../images/top.png); background-position: center center; background-repeat: no-repeat;}
#back-to-top:hover{opacity: 1;}

.page_counter{max-width:30%; margin-left:auto; margin-right:auto;}

#mitarbeiterSelect{float: right; border-radius: 0; margin:1em;}

/* Mobile Menu ####################################################################################*/

#mobile_wrapper{display: inline; border-bottom: 1px solid black; text-align:center; overflow:hidden;}
#mobile_schriftzug_wrapper{display:inline-block; width:78%;}
.mobile_icon{width:40px; height:45px; display:inline-block; float:left;}
#mobile_navi_inner{background-color:#2a2e31; display:none; text-align: left; overflow: hidden; position: absolute; top:70px; max-width:250px; z-index: 1; padding-bottom: 1em; min-width: 150px;}
#hamburger_line_wrapper{ width:100%; height:100%; padding-top:1.5em;}
.hamburger_line{position:relative; left: 7.5px;	height:4px;	top:10px; margin-bottom:3px; width: 25px; background-color: white; display:block; border-radius:2px;}
#mobile_schriftzug{background-image:url("design/images/Schriftzug.png"); width:230px; background-size: 100% auto; height:40px; background-repeat:no-repeat; display:inline-block; background-position:center;}
#mobile_logo img, #mobile_logo{max-width:40px; max-height: 40px;}
#mobile_logo{display:inline-block; float:right; margin-right: 1em;}
#mobile_navi_inner ul {display: block; overflow: hidden;}
#mobile_navi_inner ul li {text-align: left; border: none; padding-left: 5%; width: 93%;}
#mobile_navi_inner ul li ul{display: block;}
#mobile_navi_inner ul li ul li{width: 100%;}
#mobile_navi_inner ul li ul li{width: 100%;}
#mobile_navi_inner ul li ul li a{font-family: 'GrauBlau-Regular'; font-size: 0.8em;}
#mobile_navi_inner ul li.current ul li a{color: white;}
#mobile_navi_inner ul li ul li.current a{color: var(--colorGreen);}
#mobile_navi_inner ul li.current:hover ul li a{color: white;}
#mobile_navi_inner ul li.current ul li:hover a{color: var(--colorGreen);}

/* Mobile Menu END ################################################################################*/

/* Elemente ------------------------------------------ */

#Rechnungsadresse{float: left; margin: 0 2em 2em 0 width: 250px;}
#Lieferadresse{float: left; margin: 0 2em 2em 2em}

.clear { clear:both; float:none; }
.umflossen_r { float:right; }
.umflossen_l { float:left; }
.abstand_r { margin-right: 3%; }
.abstand_l { margin-left: 3%; }
.abstand_o { margin-top:1em; }
.abstand_u { margin-bottom:1em; }
.ganz {width: 100%;}
.halb { padding:0; width: 48.5%;}
.zweidrittel { padding:0; width: 62.66%; }
.drittel { padding:0; width: 31.33%; }
.viertel { padding:0; width: 23.875%; }
.trennlinie{ padding-bottom: 0.5em; padding-top: 0.5em; }
.green{background-color: #AECA05; color: #444; padding: 0.5em 1em 0.5em 1em;}
.gruen{background-color: #AECA05; color: #444;}
div.gruen .softColumn{margin: 0.5em;}
.tweety{background-color: #AECA05; color: #444; font-size: 1.2em; }
div.tweety .softColumn{margin: 0.5em;}
#filters{ background-color: #AECA05; border-radius: 5px; display: inline-block; margin-bottom: 1em;}
#filters a{ font-size: 12px; color: white; padding: 2px; padding-left: 15px; background-image: url(../images/close.png); background-repeat: no-repeat; background-position: 2px center;}
.SoftColumnFillBox{position: relative;}
.kat{border-bottom: 1px solid #AECA05; font-weight: bold; color: #AECA05; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; margin-bottom: 0.4em; cursor: pointer;}
div.gruen .kat, div.tweety .kat{border-bottom: 1px solid #fff; color: #FFF; margin: 0.5em 0.5em 0  0.5em}
div.gruen div.storyLink a{color: white; margin-right: 0.5em; }


#wrapper_left{float:left; width:49.5%; min-height: 500px;}
#wrapper_right{float:right; width:49.5%; }
#wrapper_todo{width: 98%; min-height: 150px; border: 1px solid black; display: block; margin-bottom:1em; padding: 1%;}
#wrapper_projekte{width: 46.5%; border: 1px solid black; min-height: 150px; float: left; padding: 1%;}
#wrapper_kunden{width: 46.5%; border: 1px solid black; min-height: 150px; float: right; padding: 1%;}
#wrapper_projekte p,#wrapper_kunden p,#wrapper_todo p{margin-bottom: 0;}
#wrapper_projekte input, #wrapper_kunden input {margin-right: 1em;}


.suche{vertical-align: middle;}
.suche p{margin: 0; padding: 0.25em 0 0.25em 0.25em;}
.sucheButton{float: left; margin-right:1em; margin-top: 0.183em; }

.dark{background-color:#afafaf;}

.softbox, .softbox.large{ margin-bottom: 2em;}
.softboxfallback{float: left; width: 30%; margin-right: 3%;}
.softboxfallback:nth-child(3n+1) {clear: both;}
.softbox_3{width: 30%;}
.softbox_3.large{width: 62.66%;}
.softbox_2{width: 46.5%;}
.softbox_2.large{width: 100%;}
.softbox h1{font-size: 1.2em;}
.softbox .halb, .softbox_large .halb{width: 100%; float: none; margin-left: 0;}

.intra_projects_table_head{float:left; width:12.5%;}
.intra_projects_table_cell{float:left; width: 12.5%;}
.projects_row{overflow: hidden;}
#intra_projects_navi_wrapper{width: 100%; margin-bottom: 5%;}

/*Projekt Hover Anzeige*/
.projects_hover_wrapper{width: 99.5%; border:2px solid #AECA05; position:relative; overflow:hidden;}
.projects_row + .projects_hover_wrapper{ display:none;}
.projects_row:hover + .projects_hover_wrapper{display:block;}

.projects_hover_left_column{ float:left; width: 30%;}
.projects_hover_right_column{ float: right; width: 70%;}

.intra_button_right{float: right; margin-bottom: 0.25em; width:100%;}
#form_intra_projects_options{overflow: hidden;}

#content_inner ul, #content_inner ol{margin-left: 1em; margin-bottom: 1em; padding: 0;}
#content_inner ul li{ list-style: outside none disc !important}
#content_inner ol li{ list-style: decimal outside !important}

#tableProjekte{height:500px; overflow:scroll;}
#tableProjektDetails{height:250px; width:100%; background-color:grey;}

/*Text + Bild für Scrollbewegungen fixiert*/
.imgFixed{width:100%; height:1000px; background-attachment:fixed;}
.txtFixed{width:100%; height:400px; background-color:#171d20;}
.bridge{background-image: url("../images/bridge.jpg")}



/*.h_iframe{position: relative; width: 75%;}
.h_iframe .ratio{display: block; width: 100%; height: auto;}
.h_iframe iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.h_iframe + div{ padding-bottom: 1em; }*/

.code_text{float: right; background-color: #AECA05; width: 37.34%; min-height: 296px; padding-top: 1px; padding-bottom: 1px;}
.code_text_inner{margin: 7%; margin-left: 10%; color: #444;}
.code_code{}
/**** Isotope Filtering ****/

.isotope-item { z-index: 2;}

.isotope-hidden.isotope-item { pointer-events: none; z-index: 1;}
.isotope-hidden{z-index:-1}

/**** Isotope CSS3 transitions ****/

.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

/* helper -------------------------------------------- */

.hidden { display: none !important; visibility: hidden; }
.clear {float: none; clear: both;}


/* #Media Queries -------------------------------------------- */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 768px) {
	body{font-size: 93%;}
	.responsiveslider div.zweidrittel{width: 100%; float: none;}
	.responsiveslider div.slider_text{width: 100%; float: none; margin-bottom: 0; padding-bottom: 1px;}
	.responsiveslider div.slider_text_inner{margin: 0.5em;}
	.responsiveslider div.slider_textslider_text p{margin-bottom: 0;}
	.code_text{width: 100%; float: none; min-height: 0;}
	.code_code{width: 100%;}
	.code_text_inner{margin: 5%;}
	.softboxfallback{float: left; width: 47%; margin-right: 3%;}
	.softboxfallback:nth-child(2n) {clear: both;}


}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 480px) {
  body{font-size: 95%;}
  #header{height: auto;}
  #navi_wrapper{float: none; width: 100%;}
  #content{width: 100%; float: none;}
  #contact{width: 100%;}
  #navi{display: none;}
  #mobilemenu{display: block;}
  #logo{width: 75px;}
  #contact{display: none; visibility: hidden;}
  #mobilemenu select{width: 100%; border: 1px gray solid; background-color: white; margin-bottom: 1em;}
  .softboxfallback{float: none; width: 100%; margin-right: 0%;}

}