@import 'fonts.css';

html, body {
   padding: 0;
   margin: 0;
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 15px;
   line-height: 24px;
   color: #fff;
   background-color: #14313F !important;
   background-image: url(../media/background_content.jpg); background-position: center top; background-repeat: no-repeat;
   	-webkit-background-size: 100%;
	-moz-background-size: 100%;
	-o-background-size: 100%;
	background-size: 1900px;
	background-attachment: scroll !important;
}

img {
   border: 0px;
   padding: 0px;
   margin: 0px;
   line-height: 0px;
}


a {
   outline: 0;
   color: #FFFFFF;
}

* {
    -webkit-overflow-scrolling: touch;
}


/*----------------------------------------------------------------*/
/* Typo */
/*----------------------------------------------------------------*/

   h1 {
      color: #B20F10;
	  background: #fff;
	  padding: 8px;
      font-size: 40px;
      line-height: 40px;
      margin: 0px;
      font-weight: bold;
	  display: inline-block;
	  padding-right: 60px;
      border-right: 8px solid #B20F10;
   }

   h2 {
      color: #fff;
      background: #14313F;
      padding: 8px;
      font-weight: bold;
      font-size: 27px;
      margin: 0px;
      line-height: 34px;
 	  display: inline-block;
	  margin-top: 0%;
	  border-left: 8px solid #A3A48E;
      margin-left: 40px;
      margin-bottom: 50px;
   }

   h3 {
      border-bottom: 1px solid #959681;
	  color: #959681;
      font-size: 16px;
      font-weight: normal;
      text-transform: uppercase;
      padding-bottom: 5px;
      display: inline-block;
   }

   h4 {
      color: #929FAF;
      font-weight: 300;
      font-size: 15px;
      margin-top: 5px;
      margin-bottom: 0px;
   }

   .clear {
    clear: both;
    height: 1px;
    width: 100%;
    display: block;
   }

   .gray {
      font-size: 13px;
      color: #9BAEC3;
      font-weight: normal;
      text-transform: uppercase;
      padding-bottom: 5px;
      margin: 0px;
      margin-top: -4px;
   }

         .icon_phone {
               background-image: url(../media/icon_phone.gif);
               background-position: left center;
               background-repeat: no-repeat;
               padding-left: 35px;
               margin-bottom: 4px;
               display: inline-block;
         }

         .icon_mail {
               background-image: url(../media/icon_mail.gif);
               background-position: left center;
               background-repeat: no-repeat;
               padding-left: 35px;
               margin-bottom: 4px;
               display: inline-block;
         }

         .icon_web {
               background-image: url(../media/icon_web.gif);
               background-position: left center;
               background-repeat: no-repeat;
               padding-left: 35px;
               margin-bottom: 4px;
               display: inline-block;
         }

         .icon_adress {
               background-image: url(../media/icon_adress.gif);
               background-position: left top;
               background-repeat: no-repeat;
               padding-left: 35px;
               padding-bottom: 2px;
               margin-bottom: 4px;
         }


   .grid-two-colums {
      column-count: 2;
      column-gap: 8%;
      column-width: 46%;
   }

/*----------------------------------------------------------------*/
/* Seitengestaltung Basic */
/*----------------------------------------------------------------*/

#header-wrapper {
   width: 100%;
}

   #header {
         line-height: 18px;
         padding-top: 30px;
         padding-bottom: 30px;
   }

      #header a:hover {
         opacity: 0.7;
      }

      #logo {
         padding-top: 22px;
         width: 30%;
         float: left;
          padding-bottom: 5px;
      }

         #logo img {
            width: 416px;
            height: auto;
         }

      #menu {
         width: 70%;
         float: right;
         text-align: right;
      }

         #menu a {
            text-decoration: none;
            font-size: 20px;
         }

            #submenu {
               margin-top: 10px;
               margin-bottom: 55px;
            }

            #submenu a {
               text-decoration: none;
               font-size: 14px;
               color: #FFFFFF;
               opacity: 0.5;
               padding: 5px;
               padding-left: 15px;
            }

            a.mainmenuon {
               color: #FFFFFF;
               padding-bottom: 12px;
               border-bottom: 6px solid #B20F10;
            }

            a.mainmenuoff {
               color: #FFFFFF;
               opacity: 0.5;
            }

      #menu ul {
            list-style: none;
         }

         #menu li {
            display: inline-block;
            list-style: none;
            text-transform: none;
            padding: 5px;
            padding-left: 20px;
         }

.grid-960 {
   width: 1400px;
   overflow: auto;
   padding: 0px;
   margin: 0 auto;
   z-index: 50;
   clear: both;
}

.ambientImg img {
   display: block;
   width: 100%;
   height: auto;
}

#whitebar-wrapper {
   background-color: #fff;
   padding: 50px;
   color: #8B8F94;
   padding-bottom: 50px;
   overflow: auto;
}

#darkgraybar-wrapper {
   padding: 50px;
   color: #fff;
   padding-bottom: 50px;
   min-height: 300px;
   overflow: auto;
}

#lightgraybar-wrapper {
   padding: 50px;
   color: #959681;
   padding-bottom: 50px;
   min-height: 300px;
   background: #E2E7EA;
   overflow: auto;
}

#ambient-wrapper {
   /* background-color: #334864; */
   background-color: #fff;
   min-height: 100px;
   color: #fff;
}

      #ambient-wrapper img {
         width: 100%;
         display: block;
         margin: 0 auto;
      }


#footer-wrapper {
   border-bottom: #930000 solid 20px;
   width: 100%;
   background-color: #B9C4C9;
   /* background-color: #004D91; */
}

   #footer {
      /* background-color: #fff; */
      color: #14313F;
      padding-top: 40px;
      padding-bottom: 80px;
      font-size: 14px;
   }

   #footer a {
      color:  #444B50;
   }

   .adress a {
      text-decoration: none;
   }

/*----------------------------------------------------------------*/
/* Grids */
/*----------------------------------------------------------------*/

.grid-50p {
	width: 50%;
	float: left;
}

.grid-60p {
	width: 56%;
	float: left;
}

	.grid-60p h1 {
		color: #959681;		
		font-size: 50px;
		padding-bottom: 15px;
		  background: none;
		  border: 0px;
		  padding-left: 0px;
		  padding-right: 0px;
		  display: block;
		  margin-left: -5px;
	}

.grid-30p {
	width: 30%;
	float: right;
}

/*----------------------------------------------------------------*/
/* Seitengestaltung Custom */
/*----------------------------------------------------------------*/

.iconbox {
	padding-left: 100px;
}
		
	.iconbox h2 {
			color: #959681;		
			font-size: 30px;
			line-height: 35px;
			display: block;
			width: auto;
			font-weight: bold;
			  background: none;
			  border: 0px;
			  padding-left: 0px;
			  padding-right: 0px;
			  display: block;
			  margin-left: -5px;
      		  margin-bottom: 15px;
	}
	
		.iconbox1 {
			background-image: url(../media/icons/icon_1.jpg); background-position: left top; background-repeat: no-repeat;
		}
		
		.iconbox2 {
			background-image: url(../media/icons/icon_2.jpg); background-position: left top; background-repeat: no-repeat;
		}

   #darkgraybar-wrapper ul, #lightgraybar-wrapper ul {
      list-style-type: none;
   }


      #darkgraybar-wrapper li {
         background-image: url(../media/icon_li.png); background-position: left top; background-repeat: no-repeat;
         padding-left: 40px;
         padding-bottom: 10px;
      }

      #lightgraybar-wrapper li {
         background-image: url(../media/icon_li_light.png); background-position: left top; background-repeat: no-repeat;
         padding-left: 40px;
         padding-bottom: 10px;
      }

   #darkgraybar-wrapper ul strong, #lightgraybar-wrapper ul strong {
      width: 100px;
      display: block;
      }

   .w30 {
      width: 40%;
      float: right;
   }

   .w70 {
      width: 55%;
      float: left;
   }

      .w70 img {
         width: 100%;
         height: auto;
      }


		
	.button {
		padding: 10px 25px;
		background-color: #fff;
		color: #A6A790;
		text-decoration: none;		
		font-size: 16px;
		display: inline-block;
		border-bottom: 4px solid #B20F10;
		margin-top: 15px;
		font-weight: bold;
	}
	
	a.button {
		color: #A6A790 !important;
		font-weight: bold;
	}

/* a.button {
   color: #14313F;
   background-color: #fff;
   padding: 4px 6px;
   text-decoration: none;
   margin-bottom: 20px;
   margin-top: 20px;
   display: block;
    width: 120px;
} */

/*----------------------------------------------------------------*/
/* Startseite */
/*----------------------------------------------------------------*/

a.teaserboxes { 
	width: 21%;
	display: block;
	float: left;
	background-color: #14313F;
	margin-right: 5%;
	text-decoration: none;
}

	a.teaserboxes:last-child {
		margin-right: 0%;
	}
	
	a.teaserboxes h2 {
		background-color: #fff;
		color: #B20F10;		
		line-height: 35px;
		display: block;
		padding-left: 30px;
		padding-top: 20px;
		padding-bottom: 20px;
		width: auto;
		font-weight: bold;
		margin: 0px;
	}
	
	a.teaserboxes img {
		display: block;
		width: 100%;
		height: auto;
	}
	
	a.teaserboxes  p {
		color: #fff;
		padding: 25px;
		margin: 0px;
	}
	
	a.teaserboxes .button {
		margin-left: 25px;
		margin-bottom: 25px;
	}


.backgroundStart {
	background: url(../media/background_start.jpg) no-repeat center center; 
	-webkit-background-size: cover;
    -moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#featureGoup {
   padding-bottom: 25px;
   overflow: auto;
}

.featureBox {
   width: 17.1%;
   margin-right: 5%;
   float: left;
   border: 1px solid #75818F;
   padding: 2%;
   min-height: 280px;
}

.featureBox:last-child {
   margin-right: 0%;
}

/*----------------------------------------------------------------*/
/* Kompetenzen */
/*----------------------------------------------------------------*/

.targetGroup {
    width: 25%;
    padding-right: 8%;
    float: left;
}

.clear {
   clear: both;
}

.targetGroupLast  {
    padding-right: 0%;
}

.targetGroup img {
   width: 100%;
   height: auto;
   padding-top: 50px;
   padding-bottom: 50px;
}

/*----------------------------------------------------------------*/
/*   Projekte */
/*----------------------------------------------------------------*/

.project-gallery {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 10px;
}

.project-gallery-link {
   display: block;
}

.project-gallery-link:first-of-type {
   grid-column: 1/-1;
}

.project-gallery-link > img {
   width: 100%;
}

/*----------------------------------------------------------------*/
/* Kompetenzen */
/*----------------------------------------------------------------*/

a.referBox {
   width: 23%;
   height: 280px;
   margin-right: 2%;
   float: left;
   border-bottom: 5px solid #B20F10;
   text-decoration: none;
   background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
   position: relative;
   opacity: 0.4;
}

   a.referBox:hover {
      opacity: 1;
   }

   .referInner {
      background: #14313F;
      padding-top: 10px;
      padding-bottom: 10px;
      position: absolute;
      width: 100%;
      bottom: 0;
   }

   .referBox strong {
      display: block;
   }


   .w25 {
      width: 25%;
      float: left;
   }

   .w75 {
      width: 65%;
      float: right;
   }

      .w75 img {
         width: 100%;
         height: auto;
      }

/*----------------------------------------------------------------*/
/* Einblicke */
/*----------------------------------------------------------------*/

.newsBox {
   width: 45%;
   margin-right: 5%;
   float: left;
   margin-top: 25px;
}

.newsImage {
   width: 40%;
   float: left;
}
   .newsImage img {
      display: block;
      width: 100%;
      height: auto;
   }

.newsTxt {
   width: 55%;
   float: right;
}

.spacer {
   clear: both;
   height: 50px;
}

/*----------------------------------------------------------------*/
/* Footer */
/*----------------------------------------------------------------*/

.adressbox {
   width: 100%;
   overflow: auto;
   display: block;
   opacity: 80%;
}

   .adress {
         width: 40%;
         float: left;
   }

   .adressDetails {
         width: 55%;
         float: right;
   }

      .adressContent {
         float: left;
      }

      .adressBox1 {
         width: 40%;
      }

      .adressBox2, .adressbox3 {
         width: 30%;
      }