/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
article, aside, details, figure, figcaption,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}
/**/

@font-face {
  font-family: 'corbert_condensed';
  src: url(../fonts/corbert_condensed/CorbertCondensed-Regular.ttf) format('truetype');
  
}

/* Pix
-------------------------------------------------- */
img {
  display: block;
  max-width: 100%;
 }


/* allgemeine Links im Text
-------------------------------------------------- */
a {
  text-decoration: none;
  color: #ff6600;
  font-weight: 600!important;
 }
a:hover {
 color: #77cc77;

}

/*Raster
 * +++++++++++++++++++++++++++++++++++++++++++++++++*/
.row {
    width: auto;
    margin: auto;
}
.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.col {
    float: left;
}
    .large-0 {width: 25%;}
    .large-1 {width: 33.33%;}
    .large-2 {width: 50%;}
    .large-3 {width: 66.33%;}
    .large-4 {width: 75%;}
    .large-5 {width: 100%;}
    .large-6 {width: auto;}
    .large-7 {width: 20%;} 
    .large-8 {width: 80%;} 
    .large-9 {width: 30%;} 
    .large-10 {width: 40%;} 
 /* Site
------------------------------------------------------------------*/

body {
  font-family: 'corbert_condensed', sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 1.1em;
  line-height: 1.3;
  color: #565655;
  
}
.seite {
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  margin: auto;
}
.seite1 {
  width: 100%;
  padding-left: 9%;
  padding-right: 9%;
  margin: auto;
}

/*Hintergründe------------------------------------------------------
 * ----------------------------------------------------------------*/
 
.bgr01 {
    background-color: #565655;
    color:#fff;
}

.trennlinie img{
   width: 100%;
   padding-top: 2em;
   padding-bottom: 1em;
}
/*Spalten im Text*/
.columns {
  width: 100%;
  float: left;
}
.column {
  width: 47%;
  float: left;
  margin-right: 3%;
  margin-bottom: 1.5em;
}
 
/*allgemeine Einstellungen--------------------------------------------
 * -----------------------------------------------------------------*/
  .test {
    background-color: yellow;
  }

/* Überschriften udn Texteinstellungen-----------------------------  */
h1 {
  font-size: 1.9em;
  line-height: 1.25;
  font-weight: 300;
}
h2 {
  font-size: 1.5em;
  line-height: 1.25;
  font-weight: 400;
}
h3 {
  font-size: 1.3em;
  line-height: 1.25;
  font-weight: 400;
}
h4 {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.25;
}
h5 {
  font-size: 0.8em;
  font-weight: 300;
 }
.textmitte {
    text-align: center;
}
.linieoben {
    border-top : 1px solid #ccc;
}
.linieunten {
    border-bottom: 1px solid #ddd;
}
.linielinks {
    border-left: 2px solid #666;
}
.linieobenfooter {
    border-top : solid #fff 0px;
    margin-top: 0.5em; 
}
.honeypot {
    position: absolute;
    left: -9999px;
}

/*Abstände ---------------------------------------------------------
 * ----------------------------------------------------------------*/
/*besonderer Seitenabstand im grossen Bildschirm*/
 
/*normale Abstände*/
.dislinks01 {
    padding-left: 2%;
}
.disrechts01 {
    padding-right: 2%;
}
.disoben01  {
  padding-top: 0.5em;
}
.disoben02  {
  padding-top: 1em;
}
.disoben03  {
  padding-top: 1.5em;
}
.disoben04  {
  padding-top: 2em;
}
.disoben05  {
  padding-top: 2.5em;
}

.disunten01 {
   padding-bottom: 0.5em;
}
.disunten02 {
   padding-bottom: 1em;
}
.disunten03 {
   padding-bottom: 1.5em;
}
 .disunten04 {
   padding-bottom: 2em;
}
.disunten05 {
    padding-bottom: 2.5em;
}
.dislire01 {
    padding-left: 0.5em;
    padding-right: 0.5em;
} 
 .dislire02 {
    padding-left: 1em;
    padding-right: 1em;
}
.disinnen {
   padding-top: 2em;
   padding-bottom: 2em;
   padding-right: 1em;
   padding-left: 1em;
}
.disheader {
    padding-top: 2em;
    padding-bottom: 1em;
    padding-right: 1em;
    padding-left: 1em;
}
.disheadermenu {
    padding-top: 2em;
    padding-bottom: 1em;
    padding-right: 1em;
    padding-left: 1em;
}
.rahmen {
    border: solid 1px #ddd;
}

/* alle Angaben für den Inhaltsbereich Main bei Kirbytext
------------------------------------------------------------------- */
.main hr {
     margin-top: 1em;
     margin-bottom: 1em;
     color: #dfdfdf;
     height: 1px;
     width: 100%;
     border-width: 0;
     background-color: #dfdfdf;
     clear: both;
}
.main h1, h2, h3, h4 {
  padding-top: 0.5em;
  }
.main p,
.main ul,
.main ol {
 padding-top: 0.5em;
 display: block;
}
.main li {
    margin-left: 0.5em;
    padding-bottom: 0.5em;
}
.main table {
    width: 100%!important;
    border-collapse: collapse;
    margin-top: 2em;
    margin-bottom: 2em;
}
.main th {
    font-weight: 400;
}
.main table, th, td {
    width: auto;
    padding: 0.5em;
    border: 1px solid #dfdfdf;
    text-align: left;
}
/*Tabelle Kontakt*/
.tabkontakt table {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: -0.5em;
}
.tabkontakt table, tr, td {
    width: auto;  
    border-collapse: collapse;
    border: 0px solid #fff;
    padding: 0.5px;
}

.sp1 {
    width: 10%;
    text-align: center;
}
.sp2 {
    width: 90%;
    padding-left: 0.5em;
}

/* Text blocks
 * -----------------------------------------------------------------*/
.text ul,
.text ol {
  margin-left: 1em;
}
.textklein {
    font-size: 0.8em;
}
/*Bilder allgemen --------------------------------------------------*/
.bild100 {
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildmitte80 {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
.bildmitte70 {
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
}
.bildmitte60 {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
}
.bildmitte50 {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}
.bildmitte40 {
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
}
.bildmitte30 {
    width: 30%;
    margin-left: 35%;
    margin-right: 35%;
}
.bildlinks20 {
    width: 20%;
    padding-right: 1em;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildlinks25 {
    width: 25%;
    padding-right: 1em;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildlinks30 {
    width: 33.33%;
    padding-right: 1em;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildlinks40 {
    width: 40%;
    padding-right: 1em;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildlinks50 {
    width: 50%;
    padding-right: 1em;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildlinks60 {
    width: 60%;
    padding-right: 1em;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildlinks70 {
    width: 70%;
    padding-right: 1em;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildlinks80 {
    width: 80%;
    padding-right: 1em;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildlinks90 {
    width: 90%;
    padding-right: 1em;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildrechts20 {
    width: 20%;
    padding-left: 1em;
    float: right;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildrechts25 {
    width: 25%;
    padding-left: 1em;
    float: right;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildrechts30 {
    width: 33.33%;
    padding-left: 1em;
    float: right;
    padding-top: 1em;
    padding-bottom: 1em;
} 
.bildrechts40 {
    width: 40%;
    padding-left: 1em;
    float: right;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildrechts50 {
    width:50%;
    padding-left: 1em;
    float: right;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildrechts60 {
    width: 60%;
    padding-left: 1em;
    float: right;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildrechts70 {
    width: 70%;
    padding-left: 1em;
    float: right;
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildrechts80 {
    width: 80%;
    padding-left: 1em;
    float: right;
    padding-top: 1em;
    padding-bottom: 1em;
}

/*Allgemeine Angabe für alle Bildunterschriften*/
figcaption {
    color: #606060;
    padding-bottom: 1.5em;
    font-size: 0.9em;
    font-style: italic;
 }
 
/*Video allgemein  ------------------------------------------------*/

.video iframe
 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
} 

/*Farben*/


/*
 * Header -------------------------------------------------------*/ 
 .headerbox01 {
     width: 11%;
     margin-left: 10%;     
     border: solid 1px #373736;
     background-color: #373736;
     opacity:0.9;
     color: #ee7621;
     border-radius: 50px 0 50px 0;
  }
  .headerbox03{
     border: solid 1px #373736;
     background-color: #373736;
     opacity:0.9;
     color: #ee7621;
     
     border-radius: 50px 0 50px 0;
  }
 .headerbox02 {
    width: 79%  ;
  } 
 .headerbox02 p {
    color: #ee7621;
    etter-spacing: 1px;
   } 
  .logo {
      width: 80%;
      margin-left: 10%;
      margin-top: 2em;
      margin-bottom: 2em;
  }
  .logoref img{
    width: 60%;  
    margin-left: 10%;
    margin-top: 2em;
  }
  .refbild img {
     width: 80% ;
     margin-left: 10%;
     border: 2px solid #ddd;
  }
  .refcol p{
    color: #ee7621;
    
  }
  
 .bgrhome {
    background:
    linear-gradient(to top, #fff 10%, transparent 10% 90%, #fff 10%);    
    background-position: center;
 }
 .menuheader {
    padding-left: 10%;
    text-transform: uppercase;
    margin-bottom: 1em;
    
 }
 .menuheader li {
    list-style: none; 
    padding-bottom: 0.5em; 
    font-size: 1.1em;
 }
 /*Brotkrümelmenu, snippet breadcrumb ----------------------------------*/

.crumb li {
    display: inline;
    font-size: 0.8em;
}
 
 .menufooter {
    padding-left: 0%;
    text-transform: uppercase;
    margin-top: 0.5em;
 }
 .menufooter li {
    list-style: none;
    padding-bottom: 0.25em;
    font-size: 1em;
 }
 .activeheader {
     color: #77cc77;
 }
 /*Home*/
    .flexhome-container {
      display: flex;
      flex-direction: row ;
      flex-wrap:wrap;
      
  }

  .flexhome-box {
     width: 23%;
     margin-left: 1%;
     margin-right:1%;
     margin-top: 1em;
     margin-bottom: 1em;
     height: auto;
     background-color: #f5f5f5;
     border-radius: 50px 0 50px 0;
     border: 1px solid #c3c3c2;
    
  }
  
  .flexhome-box h3 {
      text-align: center;
  }
  
   /*Flexbox Artikel*/
    .flexblog-container {
      display: flex;
      flex-direction: row ;
      flex-wrap:wrap;
      margin-bottom: 1em;
  }

  .flexblog-box {
     width: 23%;
     margin-left: 1%;
     margin-right:1%;
     margin-top: 1em;
     margin-bottom: 1em;
     height: auto;
     background-color: #f5f5f5;
     border: 2px solid #ccc;
     border-radius: 50px 0 50px 0;
  }
  .flexblog-box a {
      color: #565656;
     
  }
  .flexblog-box a:hover {
      color: #77cc77;
      
      }
      
  .flexblog-box h3 {
      text-align: center;
  }
  .flexblog-box img {
     border-radius: 50px 0px 0px 0px;
  }
  
  /*flexbox partner ------------------------------------*/
   .flexpartner-container {
      display: flex;
      flex-direction: row ;
      flex-wrap:wrap;
      margin-bottom: 1em;
  }

  .flexpartner-box {
     width: 23%;
     margin-left: 1%;
     margin-right:1%;
     margin-top: 1em;
     height: auto;
     background-color: #fff; 
     border: 1px solid #ccc;   
     border-radius: 50px 0 50px 0;
     padding: 1%;
  }

  /*flexbox partner ------------------------------------*/
   .flexpresse-container {
      display: flex;
      flex-direction: row ;
      flex-wrap:wrap;
      margin-bottom: 1em;
  }

  .flexpresse-box {
     width: 23%;
     margin-left: 1%;
     margin-right:1%;
     margin-top: 1em;
     height: auto;
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 50px 0 50px 0;
     padding: 1em;
     text-align: center;
  }
  
/*Flexcontainer für Referenzbilder auf Artikelseiten----------------*/
.refcontainer {
    display: flex;
    flex-direction: row ;
    flex-wrap: wrap;
}
.refbox {
     width: 23%;
     margin-left: 1%;
     margin-right: 1%;
     margin-top: 1em;


}
.refbox p {
    padding: 0.5em;
  font-style: italic;
}
.reftext {
    font-style: italic;
    font-size: 0.8em;
}
/*Formular auf Kontaktseite ------------------------------------------*/
 .formhome input, textarea {
     display: block;
     width: 100%;
     border: solid 1px #dcdcdc;
     background-color: #fff;
     padding: 0.5em;
     border-radius:5px;
 }
 
#button1 {
     text-align: center;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
     width: 100%;
     margin-left: 0%;
     margin-right: 0%;
     padding: 0.5em;
     border: 1px solid #c0c0c0;
     border-radius:5px;
     background-color: #ff6633;
     color: #fff;
     font-size: 1.2em;   
 }  
 

  

 @media screen and (max-width: 1024px) {
   body{
       
   }
.seite {
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  margin: auto;
}
.seite1 {
  width: 100%;
  padding-left: 4%;
  padding-right: 4%;
  margin: auto;
}
   
   .normal-0 { width: 25%;}
   .normal-1 { width: 33.33%;}
   .normal-2 { width: 50%;}
   .normal-3 { width: 66.6%;}
   .normal-4 { width: 75%;}
   .normal-5 { width: 100%;}

   .headerbox01 {
     width: 20%;
     margin-left: 5%;
     border: solid 1px #472816;
     background-color: #4f4f4f;
     opacity:0.9;
     color: #ffa500;
     border-radius: 50px 0 50px 0;
  }
 .headerbox02 {
    width: 75%  ;
  }
  .flexhome-box {
     width: 48%;
    }

  .flexblog-box {
   width: 48%;
  
  }

  .flexpartner-box {
     width: 48%;
    
  }


     }
  /*Angaben für Bildschirm größer 780Pixel
 * ----------------------------------------------------------------*/
@media screen and (max-width: 768px) {
     body{
      
   }
  .middle-0 {width: 50%;}
  .middle-1 {width: 100%;}
    
  .headerbox01 {
     width: 25%;
     margin-left: 5%;
     border: solid 1px #472816;
     background-color: #4f4f4f;
     opacity:0.9;
     color: #ff6600;
     border-radius: 50px 0 50px 0;
  }
 .headerbox02 {
    width: 70%  ;
  }
 .headerbox02 p {
    color: #ff6600;
    letter-spacing: 2px;
 }
 .logo {
      width: 80%;
      margin-left: 10%;
      margin-top: 2em;
      margin-bottom: 2em;
  }
  .logoref img{
    width: 80%;
    margin-left: 10%;
    margin-top: 2em;
  }
  .disheadermenu {
    padding-top: 2em;
    padding-bottom: 1em;
    padding-right: 0em;
    padding-left: 2em;
}
  
  
  .bgrhome {
    background:
    linear-gradient(to top, #fff 10%, transparent 10% 75%, #fff 35%), url(../images/kvin-ig-ingenieurgesellschaft-mbh-halle-saale-header-04.jpg);

     background-position: center;
 } 
 
  
  .bildmitte80 {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
}
.bildmitte70 {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
.bildmitte60 {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
} 

.flexhome-box {
     width: 48%;
   }
 .flexblog-box {
     width: 48%;
   }
  .flexpartner-box {
     width: 48%;
  }
   .flexpresse-box {
     width: 48%;
  }


 
  
}

 /*Angaben für Bildschirm größer 520Pixel
 * ----------------------------------------------------------------*/

@media screen and (max-width: 520px) {
  body {
     
      
    }
  .small-0 {width: 50%;}
  .small-1 {width: 100%;}

  .headerbox01 {
     width: 40%;
     margin-left: 5%;
     margin-right: 55%;
     border: solid 1px #472816;
     background-color: #4f4f4f;
     opacity:0.9;
     color: #ff6600;
     border-radius: 50px 0 50px 0;
  }
 .headerbox02 {
    width: 100%;
    }
 .headerbox02 p {
    color: #ff6600;
    letter-spacing: 2px;
    margin-left: 3%;
 }
 .logo {
      width: 80%;
      margin-left: 10%;
      margin-top: 2em;
      margin-bottom: 2em;
  }
  .bgrhome {
    background:
    linear-gradient(to top, #fff 25%, transparent 25% 90%, #fff 10%), url(../images/kvin-ig-ingenieurgesellschaft-mbh-halle-saale-header-04.jpg);

     background-position: center;
 }

 .flexhome-box {
     width: 98%;
   }
 .flexblog-box {
     width: 98%;
   }
  .flexpartner-box {
     width: 98%;
  }
   .flexpresse-box {
     width: 98%;
  }
  

/*Bilder allgemen --------------------------------------------------*/
.bild100 {
    padding-top: 1em;
    padding-bottom: 1em;
}
.bildlinks20 {
    width: 50%;
    padding-right: 1em;
    float: left;
}
.bildlinks25 {
    width: 50%;
    padding-right: 1em;
    float: left;
}
.bildlinks30 {
    width: 50%;
    padding-right: 1em;
    float: left;
}
.bildlinks40 {
    width: 100%;
    padding-right: 1em;
    float: left;
}
.bildlinks50 {
    width: 100%;
    padding-right: 1em;
    float: left;
}
.bildlinks60 {
    width: 100%;
    padding-right: 1em;
    float: left;
}
.bildlinks70 {
    width: 100%;
    padding-right: 1em;
    float: left;
}
.bildrechts20 {
    width: 50%;
    padding-left: 1em;
    float: right;
}
.bildrechts25 {
    width: 50%;
    padding-left: 1em;
    float: right;
}
.bildrechts30 {
    width: 50%;
    padding-left: 1em;
    float: right;
}
 .bildrechts40 {
    width: 100%;
    padding-left: 1em;
    float: right;
}
.bildrechts50 {
    width: 100%;
    padding-left: 1em;
    float: right;
} 
.bildrechts60 {
    width: 100%;
    padding-left: 1em;
    float: right;
}
.bildrechts70 {
    width: 100%;
    padding-left: 1em;
    float: right;
}

.linieobenfooter {
    border-top : solid #ddd 1px;
    margin-top: 1em;
    
}
 .linielinks {
    border-left: 0px solid #666;
}
.disheader {
    padding-top: 1em;
    padding-bottom: 1.5em;
    padding-right: 0%;
    padding-left: 10%;
}
.disheadermenu {
    padding-top: 2em;
    padding-bottom: 1em;
    padding-right: 0em;
    padding-left: 0%;
}

.bildmitte70 {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
}

.bildmitte60 {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
}
}