/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
/* Einstellungen fuer die Tech-ibc website */
h1 {
  color: #a61f21;
  margin: 0 0 0.8rem 0;
  text-rendering: optimizeLegibility;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2rem;
}
h2 {
  color: #000000;
  margin: 0 0 0 0;
  text-rendering: optimizeLegibility;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8rem;
}
h3 {
  color: #000000;
  margin: 0.15rem 0 0.15rem 0;
  text-rendering: optimizeLegibility;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 2.1rem;
}
h4, h5 {
  color: #000000;
  margin: 0.15rem 0 0.15rem 0;
  text-rendering: optimizeLegibility;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 2.1rem;
}
h6 {
  color: #a61f21;
  margin: 0 0 0.8rem 0;
  text-rendering: optimizeLegibility;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 3.6rem;
}
strong {
  font-weight: 700;
}
a {
  color: #a61f21;
  background: transparent;
  text-decoration: underline;
  font-size: 1.1rem;
}
p {
  color: #0c0c0c;
  margin: 0.5rem 0 0.5rem 0;
  text-rendering: optimizeLegibility;
  font-size: 1.1rem;
  text-align: justify;
}
p.con {
  line-height: 1px;
}
.hx {
  color: #a61f21;
  margin: 0 0 0.8rem 0;
  text-rendering: optimizeLegibility;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.6rem;
}
body {
  font-size: 1.1rem;
  line-height: 1.8rem;
  margin: 0rem 0 0rem 0;
}
.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.1875rem;
  box-shadow: 1px 1px 1px black;
  background: #a61f21;
  color: #ffffff;
  border: 0;
  line-height: 1.5;
  font-size: 1rem;
  vertical-align: middle;
  text-shadow: none;
  transition: background 0.1s;
}
.button:hover {
  background: #dd5c06;
  color: #ffffff;
}
.btn-danger {
  font-size: 1rem;
  background: #a21f61;
  color: #ffffff;
  border: 0;
  line-height: 1.8;
  width: 150px;
}
.btn-primary {
  font-size: 1rem;
  background: #0c5f22;
  color: #ffffff;
  border: 0;
  line-height: 1.8;
  width: 150px;
}
.box-mit-schatten {
  box-shadow: 5px 5px 5px 5px rgba(1, 1, 1, 0.2);
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 50px;
  margin-top: 50px;
  border-radius: 30px 30px;
  width: 100%;
  min-height: 400px;
}
td {
  padding: 2rem 2rem 2rem 2rem;
  vertical-align: top;
}
th {
  padding: 1rem 2rem 1rem 2rem;
}
/* Innenrahmen der Zeile ausblenden */
.box-mit-schatten td {
  border: hidden;
}
.subhead {
  padding: 2rem 2rem 0rem 2rem;
}
/* overrides fuer gantry 5 */
#g-footer {
  background: #a61f21;
  color: #ffffff;
  font-size: 0.5rem;
  line-height: 1;
  margin: 0 0 0 0;
}
#g-feature {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
#g-main {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
#g-navigation .g-main-nav .g-toplevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active > .g-menu-item-container {
  color: #cfccc8;
}
.g-grid {
  margin: 0 50 0 50;
  padding: 50 50 50 50;
}
.g-array-item-text {
  margin: 0 10 0 0;
  padding: 0 0 10 0;
}
.g-content-contact {
  margin: 20 20 20 20;
  padding: 0 0 0 0;
}
#g-article {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
#g-block {
  flex: 1;
}
#g-navigation .g-main-nav .g-toplevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active {
  background: #cc2222;
}
/* Why-us Layout */
.grid-container-why {
  display: grid;
  grid-template-rows: 180px 180px 180px 180px 180px 180px 180px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 25px;
  grid-template-areas: "why1 why1 why1 why1 why1 why1 why1 why1 why1 why1 why1 why1" "why2p why2p why2 why2 why2 why2 why2 why2 why2 why2 why2 why2" "why3 why3 why3 why3 why3 why3 why3 why3 why3 why3 why3p why3p" "why4p why4p why4 why4 why4 why4 why4 why4 why4 why4 why4 why4" "why5 why5 why5 why5 why5 why5 why5 why5 why5 why5 why5p why5p" "why6p why6p why6 why6 why6 why6 why6 why6 why6 why6 why6 why6" "why7 why7 why7 why7 why7 why7 why7 why7 why7 why7 why7p why7p";
}
.grid-item-why1 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  grid-area: why1;
}
.grid-item-why2 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  grid-area: why2;
}
.grid-item-why3 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  grid-area: why3;
}
.grid-item-why4 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  grid-area: why4;
}
.grid-item-why5 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  grid-area: why5;
}
.grid-item-why6 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  grid-area: why6;
}
.grid-item-why7 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  grid-area: why7;
}
.grid-item-why2p {
  align-self: center;
  width: fit-content;
  grid-area: why2p;
}
.grid-item-why3p {
  align-self: center;
  width: fit-content;
  grid-area: why3p;
}
.grid-item-why4p {
  align-self: center;
  width: fit-content;
  grid-area: why4p;
}
.grid-item-why5p {
  align-self: center;
  width: fit-content;
  grid-area: why5p;
}
.grid-item-why6p {
  align-self: center;
  width: fit-content;
  grid-area: why6p;
}
.grid-item-why7p {
  align-self: center;
  width: fit-content;
  grid-area: why7p;
}
/* Introduction Layout */
.grid-container {
  display: grid;
  grid-template-rows: 200px 110px 150px 180px 180px 50px 120px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
  grid-template-areas: "area1 area1 area1 area1 area2 area2 area2 area2 area2 area2 area2 area2" "area4 area4 area4 area4 area4 area4 area4 area4 area4 area4 area4 area4" "area13 area13 area13 area5 area5 area5 area5 area5 area5 area5 area5 area5" "area13 area13 area13 area6 area6 area6 area6 area6 area6 area6 area6 area6" "area8 area8 area8 area8 area8 area8 area8 area8 area8 area3 area3 area3" "area9 area11 area11 area11 area11 area11 area11 area11 area11 area3 area3 area3" "area9 area11 area11 area11 area11 area11 area11 area11 area11 area3 area3 area3";
}
.grid-item1 {
  background: white;
  text-align: left;
  max-height: 220px;
  align-self: top;
  grid-area: area1;
}
.grid-item2 {
  background: white;
  text-align: right;
  padding-left: 1rem;
  border: black 1px none;
  grid-area: area2;
}
.grid-item13 {
  background: white;
  align-self: top;
  width: fit-content;
  grid-area: area13;
}
.grid-item4 {
  background: white;
  height: auto;
  padding-left: 1rem;
  align-self: baseline;
  width: fit-content;
  text-align: justify;
  border-left: 5px solid #ffffff;
  padding-left: 0rem;
  grid-area: area4;
}
.grid-item5 {
  background: white;
  text-align: justify;
  width: fit-content;
  align-self: baseline;
  align-content: center;
  padding-left: 1rem;
  border: black 1px none;
  grid-area: area5;
}
.grid-item6 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  padding-left: 1rem;
  border: black none;
  grid-area: area6;
}
.grid-item8 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  border-left: 0px solid #ffffff;
  grid-area: area8;
}
.grid-item9 {
  align-self: center;
  width: fit-content;
  grid-area: area9;
}
.grid-item11 {
  background: white;
  width: fit-content;
  text-align: justify;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  border-left: 5px solid #e40a0a;
  grid-area: area11;
}
.grid-item3 {
  background: white;
  width: fit-content;
  align-self: center;
  border: black 1px none;
  padding-left: 1rem;
  border-left: 0px solid #ffffff;
  grid-area: area3;
}
.grid-item-arrow-right {
  align-self: center;
  width: fit-content;
  grid-area: arrow-right;
}
/* Grid Demo */
.grid-democontainer {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  grid-template-areas: "area1 area1 area1 area1 area1" "area2 area2 . area3 area3" "area2 area2 area4 area4 area4";
}
.grid-demoitem1 {
  background: blue;
  text-align: center;
  border: black 5px solid;
  grid-area: area1;
}
.grid-demoitem2 {
  background: red;
  text-align: center;
  border: black 5px solid;
  grid-area: area2;
}
.grid-demoitem3 {
  background: green;
  text-align: center;
  border: black 5px solid;
  grid-area: area3;
}
.grid-demoitem4 {
  background: yellow;
  text-align: center;
  border: black 5px solid;
  grid-area: area4;
}
/* Holy-Grail-Layout mit 3 Spalten für "Our Clients" */
.grid-container-3col {
  display: grid;
  grid-gap: 0.2rem;
  grid-template-columns: 28% 28% 44%;
  grid-template-rows: 70px auto;
  grid-template-areas: "title title title" "clients1 clients2 comment";
}
.grid-title {
  grid-area: title;
  text-align: left;
}
.grid-clients1 {
  grid-area: clients1;
  line-height: 50px;
  text-align: left;
}
.grid-clients2 {
  grid-area: clients2;
  line-height: 50px;
  text-align: left;
}
.grid-comment {
  grid-area: comment;
  line-height: 50px;
  padding-top: 20px;
  text-align: left;
}
/* grid-template-columns: 1fr 1fr 3fr; verwendet nur Bruchteile fr (fraction) - der verfügbare Platz verteilt sich automatisch.
Die Höhe richtet sich in der ersten Reihe nach dem Inhalt (auto), in der letzten beträgt sie min-content - die mittlere Reihe nimmt mit der Festlegung 1fr wieder den verfügbaren Rest ein. */
/* Nur title wird mit grid-column von der ersten (1) bis zur letzen Randlinie (-1) positioniert. Im 3-Spalten-Layout bei breiten Viewports erstrecken sie sich über die gesamte Breite. */
/* 3-spaltiges Layout fuer breitere Viewports */
/* @media (min-width: 45em) {
	}
 */
/*# sourceMappingURL=custom_30.css.map */