@import 'fonts.css';

html, body {
   padding: 0;
   margin: 0;
   background-color: #818994;
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 15px;
   line-height: 24px;
   color: #757776;
   height: 100%;
   overflow: auto;
}

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


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

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


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

   h1 {
      color: #223B8E;
      font-size: 30px;
      padding: 0px;
      padding-top: 25px;
      margin: 0px;
      font-weight: 600;
      background-image: url(../media/ground_h1.png);
      background-position: left top;
      background-repeat: no-repeat;
   }

   h2 {
      color: #223B8E;
      font-weight: bold;
      font-size: 27px;
      margin-top: 5px;
      line-height: 34px;
   }

   h3 {
      border-bottom: 1px solid #75818F;
      font-size: 16px;
      font-weight: boldl;
      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%;
	background: #FFFFFF;
	min-height: 60%;
	background-image: url(../gfx/background.jpg);
	background-position: right top;
	background-repeat: no-repeat;
}

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

      #header a:hover {
         opacity: 0.7;
      }

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

         #logo img {
            width: 270px;
            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;
   background: #475157;
   overflow: auto;
}

#lightgraybar-wrapper {
   padding: 50px;
   color: #524E4B;
   padding-bottom: 50px;
   background: #AEAEAE;
   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 {
   width: 100%;
   background-color: #818994;
}

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

   #footer a {
      color:  #444B50;
   }

   .adress a {
      text-decoration: none;
   }

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


   .w50 {
      width: 45%;		
      float: left;
   }

		.w50:first-child {
			padding-right: 10%;
		}

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

	.imageLogo {
		margin-top: 6.9%;
	}

		#imageElementTop {
			background: #818995;
			height: 24px;
			width: 93px;
			overflow: hidden;
		}

		#imageElementPick {
			z-index: -1;
		}

		#imageElementBottom {
			background: #213A8F;
			height: 93px;
			width: 93px;
			overflow: hidden;
			margin-top: -50px;
			float: right;
			z-index: 1;
			position: relative;
		}	


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

.adressbox {
   width: 100%;
   overflow: auto;
   display: block;
   opacity: 80%;
   line-height: 26px;
}

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

   .adressDetails {
         width: 100%;
         float: left;
		line-height: 26px;
   }

      .adressContent {
         float: left;
      }

      .adressBox1, .adressBox2, .adressBox3, .adressBox4 {
         padding-right: 50px;
      }

	.adressBox4 {
		float: right;
		padding-right: 0px;
	}

	.adressBox4 a {
		color: #fff !important;
	    padding-left: 15px;
	}