/* ROOT-FARBEN */
:root {
	--color-01: #004494; 					/* Hauptfarbe */
	--color-02: #fff;
	--color-03: #333;
	--color-04: #87888a;
}

/* RESPONSIVE */
.hgd-desktop {display: block;}
.hgd-mobil {display: none;}

/* PAGEBUILDER */
.hgd-default {display: block;}
.hgd-pagebuilder {display: none;}

ul.hgd-jobs li {list-style-type: square;}

.hgd-slider p {margin-bottom: 0;}
.mk-box {background: var(--color-01); text-align: center; margin: 3rem 0; padding-top:  clamp(1rem, 2.5vw, 5rem) !important;  padding-bottom:  clamp(1rem, 2.5vw, 5rem) !important; padding-left: clamp(3rem, 10vw, 15rem); padding-right: clamp(3rem, 10vw, 15rem); hyphens: none;}
.mk-box-border * {color: #fff;}
/* HINTERGRUNDFARBEN */
.color-topbar {background: var(--color-01); padding: 5px 0;}
.color-bottom {background: var(--color-01);}
.color-flipcards {background: var(--color-03); }
.color-featureboxen {width: 100%; padding: 50px 0; text-overflow: clip; background-color: var(--color-04); background-position: 0% 0%, 0% 0%, 0% 0%; background-attachment: scroll, scroll, scroll; background-image: linear-gradient(0deg, rgba(255,255,255, 0) 20%, rgba(255,255,255, 0.098) 20%, rgba(255,255,255, 0.098) 40%, rgba(255,255,255, 0.2) 40%, rgba(255,255,255, 0.2) 60%, rgba(255,255,255, 0.4) 60%, rgba(255,255,255, 0.4) 80%, rgba(255,255,255, 0.6) 80%), linear-gradient(-90deg, rgba(255,255,255, 0) 20%, rgba(255,255,255, 0.098) 20%, rgba(255,255,255, 0.098) 40%, rgba(255,255,255, 0.2) 40%, rgba(255,255,255, 0.2) 60%, rgba(255,255,255, 0.4) 60%, rgba(255,255,255, 0.4) 80%, rgba(255,255,255, 0.6) 80%), none; background-origin: padding-box; background-clip: border-box; background-size: 100% 100%;}
.color-featureboxen-small {background: var(--color-01); padding: 40px 0 20px 0; margin: 0; }
.color-copyright {background: var(--color-01); border-top: 1px solid #fff;}

.color-timeline {background: var(--color-04);
background-image: -moz-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.2) 50%, rgba(255,255,255, 0.4) 50%, rgba(255,255,255, 0.6) 100%);
background-image: -webkit-linear-gradient(left, rgba(255,255,255, 0) rgba(255,255,255, 0.2) 50%, rgba(255,255,255, 0.4) 50%,rgba(255,255,255, 0.6) 100%);
background-image: linear-gradient(to right, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.2) 50%, rgba(255,255,255, 0.4) 50%, rgba(255,255,255, 0.6) 100%);}
/* LOGO */
.logo {padding: 4% 0 1% 0;}
.logo img {width: 100%; max-width: 400px;}
.hgd-stack .logo {padding: 3% 0 1% 0;}
.pgt-logo img {width: 100%; max-width: 350px;}
#sppb-addon-1571735059314 .sppb-addon-title {margin-bottom: 25px !important;}
.pgtve-logo img {max-width: 100%;}
/* SLIDER */
.hgd-slider {margin-top: 120px;}
.hgd-slider-stack {margin-top: 194px;}
/* CONTENT */
.pgt-logo img {width: 100%;}
#section-id-1571735059294 p {}
#column-id-1571735059316 {border-right: 1px solid #555;}

/* NAVIGATION + LOGO / INLINE */
#navigation-logo {background: #fff; position: fixed; box-shadow: 0px 2px 3px rgba(0,0,0,0.3); z-index: 999;}
.navigation, .sprachauswahl {margin-top: 98px !important;}
.navigation {float: right;}
.sprachauswahl ul li {line-height: 40px;}
/* NAVIGATION + LOGO / STACK */
.hgd-stack .navigation {margin: 3% 0 !important; }

/* NAVIGATION-STICKY */
.hgd-sticky {background: #fff; position: sticky; top: 0px; z-index: 1000; transition: all ease .3s;}
.sticky-fix {position: fixed !important; transition: all ease .3s;}
/* CONTENT-PAGEBUILDER */
.hgd-topper {margin-top: 140px;}
.contentbox {display: flex;width:100%;}
.contentbox  h2  {font-size: 2.5em; letter-spacing: 2px; padding: 70px 0 30px 0; text-align: center;}
.contentbox ul{list-style:none;list-style-image:url(../../images/listenpunkt.png); padding-left:18px;}
.contentbox ul li{padding-bottom:0.5em;}
.hgd-projekt-header h2 {text-align: center; color: var(--color-03); font-size: 2.5em; padding: 60px 0 0 0px; letter-spacing: 2px;}
#section-id-1571735059294 {padding-bottom: 70px !important;}

/* BOTTOM-BOXEN */
.color-bg-parallax {background: rgba(0,0,0,0.2); }

.hgd-bottom-box a {color: var(--color-02); font-weight: 300; text-decoration: none; transition: all ease .3s;}
.hgd-bottom-box a:hover, .hgd-bottom-box .hgd-social-media .fab:hover, .color-topbar a:hover  {color: #ccc;}

.hgd-bottom-box h3 {font-size: large; color: var(--color-02); font-weight: 500;  letter-spacing: 2px; border-bottom: 1px dotted var(--color-02); padding-bottom: 10px;}
.hgd-bottom-box h4 {font-size: medium; font-weight: 300; line-height: 1.3em; color: var(--color-02);}

.hgd-bottom-box .hgd-social-media .fab {font-size: 1.3em; color: var(--color-02);}
.hgd-bottom-box .table tr td {border: 0px; vertical-align: middle;}

.bottom a {text-decoration: none; color: #333;}
.bottom a:hover {color: var(--color-02);}
.hgd-bottom-box {margin: 60px 0 35px 0}
.box-top-icon .fal.fa-home, .box-top-icon .fal.fa-phone, .box-top-icon .fal.fa-fax, .box-top-icon .fal.fa-at {font-size: 1.2em; color: var(--color-02);}

.box-top-icon .fal.fa-home {font-size: 4em;}

.hgd-social-media .fab {font-size: 2.7em; color: var(--color-02); float: left; margin-right: 15px; transition: all ease .3s;}
.hgd-social-media .fab:hover {color: #333;}

.bottom-menu li {float: none; width: 100%; border-bottom: 1px dotted var(--color-02); padding: 3px 0;}

/* FLIPCARDS-HEADER */
.hgd-flipcard-header {text-align: center; color: var(--color-03); font-size: 1.7em; padding: 30px 0;}

/* FLIPCARS */
#hgd-flip {height: 370px;}

.flip-container {-webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; perspective: 1000;}

.flip-container:hover .flipper, .flip-container.hover .flipper {-webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.flip-container, .hgd-flip-front, .hgd-flip-back {width: 100%; height: 300px; }

.flipper {transition: 0.8s; transform-style: preserve-3d; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; position: relative;}

.hgd-flip-front, .hgd-flip-back {-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0;    -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -o-transition: 0.6s; -o-transform-style: preserve-3d; -ms-transition: 0.6s; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d;}
	
.hgd-flip-front {z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); background-color: var(--color-01); color: var(--color-02); padding: 15px; border: 2px solid rgba(0,0,0,0.4); box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.6);}

.hgd-flip-back {-webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); background-color:#333; color: #fff; padding: 15px; border: 2px solid rgba(255,255,255,0.8); box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.6);}

.hgd-flip-front, .hgd-flip-back {font-size: 1em; text-align: center; hyphens: auto; min-height: 320px;}
.hgd-flip-front h3, .hgd-flip-back h3 {text-align: center; letter-spacing: 1px;}
.hgd-flip-front img, .hgd-flip-back img {width: 100%; max-width: 300px; margin-top: 10px; border: 2px solid #fff;}
.hgd-flip-front a, .hgd-flip-back a {width: 100%; display: block; background: #fff; color: #333; padding: 4px 10px; text-align: center; border-radius: 3px; text-decoration: none; transition: all ease .3s;}

/* FEATURE-BOXEN-HEADER */
.hgd-featureboxen-header h2 {text-align: center; color: var(--color-03); font-size: 2.5em; padding: 40px 0; letter-spacing: 2px;}

/* FEATURE-BOXEN */
.hgd-featurebox {text-align: center; margin-bottom: 15px; }
.hgd-featurebox .col {background: #fff;-webkit-transition: box-shadow .4s ease-in-out; box-shadow: 0 20px 30px -20px rgba(0,0,0,.2),0 10px 15px -5px rgba(0,0,0,.2),0 2px 3px 0 rgba(0,0,0,.2);}

.hgd-featurebox ul {padding: 0; list-style: none; font-size: small !important; text-align: left; line-height: 1.3em; margin-bottom: 0px;}
.hgd-featurebox ul li{margin-bottom: 0.7em;}
.hgd-featurebox .fa, .hgd-featurebox .fab, .hgd-featurebox .fal, .hgd-featurebox .far, .hgd-featurebox .fas {font-size: 3em; color: var(--color-01); }

.ct-featureBox h4 {padding: 10px 5px; color: #333; font-size: medium; font-weight: 500;}
.ct-featureBox p {margin-bottom: 0;}

.ct-featureBox {min-height: 300px; background: #fff; padding: 40px 0; display: flex; text-align: center; color: inherit; -webkit-transition: background-color, 0.25s, ease-in-out;transition: background-color, 0.25s, ease-in-out;}
.ct-featureBox .inner {display: table-cell; width: 100%; vertical-align: middle;}
.ct-featureBox .image {text-align: center;}
.ct-featureBox .image img {width: 100%; max-width: 130px; display: inline-block;}

.btn-primary {margin-top: 15px; color: #333; background-color:#fff; border-color: #fff; font-size: small; font-weight:bold;}
.btn-primary:hover {color: #fff; background-color: var(--color-01); border-color: #333;}

img, figure {max-width: 100%;}
@media screen and (max-width: 991px) {.ct-featureBox {padding: 20px 55px;}}

@media screen and (max-width: 767px) {.main-content {padding-right: 80px;padding-left: 80px;}.ct-featureBox {width: 100%;min-height: 200px;}}
@media screen and (max-width: 600px) {.main-content {padding-right: 40px;padding-left: 40px;}}
@media screen and (max-width: 480px) {.main-content {padding-right: 15px;padding-left: 15px;}}

/* FEATURE-BOXEN-SMALL */
.hgd-row {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: 0px; margin-left: 0px;}

.featureBoxSmall {display: flex; }
.featureBoxSmall h4 {text-align: left; color: var(--color-02); font-size: large; margin-bottom: 10px; letter-spacing: 2px;}
.featureBoxSmall p {color: var(--color-02); opacity: .8; text-align: left; hyphens: auto; font-size: small; font-weight: 300;}
.featureBoxSmall .fa, .featureBoxSmall .fab, .featureBoxSmall .fal, .featureBoxSmall .far, .featureBoxSmall .fas {background: rgba(255,255,255,0.2); border-radius: 50%; color: #fff; font-size: 1em; font-weight: 100;}

.fa-stack {line-height: 2.3em; width: 2.3em;}

/* TOPBAR */
.color-topbar, .color-topbar a {color: var(--color-02); font-weight: 300; letter-spacing: 1px; text-decoration: none; transition: all ease .3s;} 

.topbar .fal {font-size: medium; padding-right: 7px;}

.hgd-social-media .fab {font-size: 1.4em;}
.hgd-social-media .fab:hover  {color: #333;}

/* CONTENT-TIMELINE */
.content-timeline {color: #fff; padding: 15px; padding-top: 7%; text-align: justify; hyphens: auto;}
.content-timeline h3 {color: #fff; font-size: 2.5em; }

.hgd-content-timeline-button {font-size: 1.3em; color: var(--color-02); transition: all ease .4s;}
.hgd-content-timeline-button:hover {color: var(--color-01);}
.hgd-content-timeline-button .fa-location-arrow {padding-left: 7px;}

/* TIMELINE */
.hgd-timeline {position: relative; max-width: 1200px; margin: 0 auto; padding: 50px 0; overflow: hidden !important;}
.hgd-timeline::after {content: ''; position: absolute; width: 5px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px;}
.hgd-timeline-container { padding: 10px 40px; position: relative; background-color: inherit; width: 50%;}
.hgd-timeline-container:after {content: ''; position: absolute; width: 25px; height: 25px; right: -12px; background-color: white; border: 4px solid var(--color-01); top: 15px; border-radius: 50%; z-index: 1; box-shadow: 0px 2px 5px rgba(0,0,0,0.7);}

.hgd-timeline h2 {color: var(--color-01); }

.tl-left {left: 0;}
.tl-right {left: 50%;}

.tl-left:before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white;}
.tl-right:before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}
.tl-right:after {left: -16px;}


.hgd-timeline-content {padding: 15px 15px 5px; background-color: white; position: relative; border-radius: 6px; box-shadow: 3px 3px 5px rgba(0,0,0,0.6);}


@media screen and (max-width: 600px) {
  .hgd-timeline:after {left: 31px;}

  .hgd-timeline-container {width: 100%; padding-left: 70px; padding-right: 25px;}
  .hgd-timeline-container:before {left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}

  .tl-left:after, .tl-right:after {left: 15px;}
  .tl-right {left: 0%;}
	}

/* SCROLL-TO-TOP */
#HGDscrollBtn {background-color: var(--color-01); opacity:0; position: fixed;  bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; color: white; cursor: pointer; padding: 0px 9px; border: 5px solid rgba(0,0,0,0.5); border-radius: 100%; font-size: 1rem; transition: opacity .4s; transition: all ease .3s;}
#HGDscrollBtn:hover {background-color: #333;}
#HGDscrollBtn .fal.fa-angle-up:before {font-size: 2em;}

/* SEARCHBOX */
.search {float: right;}
[type="search"] {background: rgba(255,255,255,0.3); color: var(--color-02); border: 1px solid var(--color-02); border-radius: 4px; padding: 0 15px;}
	
/* COPYRIGHT */
.footer1 {text-align: center; padding: 15px; color: var(--color-02);}

.copyright-menu ul {width: 100%;}
.copyright-menu li {display: inline-block;}

/* GOOGLE-MAPS */
.hgd-google-maps {margin-left: -15px; margin-right: -15px;}
.gmnoprint, .gm-style-cc {display:none;}

/* Sweep To Right */
.hvr-sweep-to-right {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color;  transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-01); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {color: white;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {-webkit-transform: scaleX(1); transform: scaleX(1);}
