@charset "utf-8";
* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    margin:0 auto;
    background-color: #fff;
    font-size: 1em;
    line-height: 1.2em;
    overflow-x: hidden;
    text-align: center;
    letter-spacing: 0.5px;
    color: #313245;
    
}
h1 {
    font-size: 3em;
    font-weight: 300;
    color: #025b9a;
    line-height: 1.2em;
    margin:2em 0 0.5em 0;
    
}
h2 {
    font-size: 2.5em;
    font-weight: 300;
    color: #025b9a;
    line-height: 1.2em;
    margin-bottom: 0.5em;
    
}
h3 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.2em;
    margin-bottom: 0.5em;
     color: #313245; 
    
}
h4 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.2em;
    margin-bottom: 0.5em;
    color:#fff;
    padding-right: 10px;
    hyphens: none;
}
h5 {
    font-size: 1.6em;
    font-weight: 600;
    line-height: 1em;
    margin-bottom: 0.5em;
     color: #313245; 
}
h6 {
    font-size: 1.6em;
    font-weight: 600;
    line-height: 1em;
    margin-bottom: 0.5em;
    color:#fff;
}
h7 {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.2em;
    margin-bottom: 1em;
    width:100%;
    
}
h8 {
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.2em;
    width:100%;
    z-index:10000; 
    position:absolute; 
    padding: 1em 1.5em 1em 0; bottom:0px; 
    background-color: rgba(255,255,255,0.7);
    
}
p {
    font-size: 1em;
    margin-bottom: 0.5em;
    font-weight: 400;
    line-height: 1.6em;
}
a {
    color: #313245;
    text-decoration: none;
}
a:hover {
    color: #999;
    text-decoration: none;
}
img{
    max-width:100%;
/*    max-height:100%;*/
}

.right {
    float:right;
    text-align: right;
}
.left {
    float:left;
    text-align: left;
    padding-top: 5px;
}
.recht {
    float:right;
    text-align: right;
    
}
.klein {
    font-size: 75%;
}
.bold {
    font-weight: 600;
}

.actice {
    font-weight: 600;
    text-transform: uppercase;
    color: #025b9a; 
}
.abstand {
    margin:2em auto;
}
.top{
    margin-top:1em;
}
.bottom{
    margin-bottom:1em;
}
.top2{
    margin-top:2em;
}
.bottom2{
    margin-bottom:2em;
}


.blau {
    color: #025b9a; 
}
.black {
    color: #313245;
}
.weiss {
    color:#fff;
}
.white {
    background-color: rgba(255,255,255,0.9);
}
.center {
    display: flex;
	align-items: center;
	justify-content: center;
    height:100%;
    width:100%;
    
/*    object-position: center;*/
}
.versal {
    text-transform:uppercase;
}
.einzug {
 text-indent: -10px;
    padding-left:-10px;
}
.kleinoben{
    bottom:52.5%;
}


ul li {
    line-height: 1.6em;
    font-weight: 400;
}

.liste ul {
    display: flex;
    width:100%;
    height:20px;
    justify-content: center;
}
.liste ul li {
    text-decoration: none;
    list-style-type: none;
    padding:0 15px;
    border-left:1px solid #025b9a;
    width:auto;
    text-align: center;

}
.liste ul li:last-child {
    border-right:1px solid #025b9a;
}
.liste ul li img {
    width:30px;
    padding-bottom: 3px;
}

#inhalt {
    height:auto;
    max-width: 4100px;
    margin:0 auto;
}
#line {
    width:100%;
    z-index:60000;
    border-bottom: 1px solid #313245;
    position: fixed;
    left: 50%;
    top: 76px;
    transform: translate(-50%, 0%);
    
}
#header {
    width:100%;
    height:112px;
    z-index:900;
    position: fixed;
    top:0;
    left: 50%;
    transform: translate(-50%, 0%);
    background: #fff !important;
    
}
.topline {
    position: relative;
    display: grid;
    height:112px;
    justify-content: center;
    align-content: center;
    z-index:800;
    width:100%;
    margin-top: 13px;

/*    background: #fff;*/
        
    }
.topline h2 {
    font-size:3.2em;
}
.mailkontakt {
    position: absolute;
    right:0;
    width:150px;
    height:60px;
    top:24px;
    z-index:905;
}
.mailkontakt img{
    position: relative;
    float:right;
    width:60px;
    height: 40px;
    padding:0;
    margin:0;
    left:0;
    right:0;
}

.gradient{
    background-image: linear-gradient(#e4f4f8, #fff);
/*
    max-width:100%;
    width:1140px;
*/    
    width:100%;
    height: 100%;
    margin:0 auto;
    position: relative;
}
.gradientleftzweispaltig{
background: rgb(228,244,248);
background: -moz-linear-gradient(90deg, rgba(228,244,248,1) 0%, rgba(255,255,255,1) 50%, rgba(228,244,248,1) 50%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(228,244,248,1) 0%, rgba(255,255,255,1) 50%, rgba(228,244,248,1) 50%, rgba(255,255,255,1) 100%);
background: linear-gradient(90deg, rgba(228,244,248,1) 0%, rgba(255,255,255,1) 50%, rgba(228,244,248,1) 50%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e4f4f8",endColorstr="#ffffff",GradientType=1);
}
.gradientleft{
background: rgb(228,244,248);
background: -moz-linear-gradient(90deg, #e4f4f8, #fff);
background: -webkit-linear-gradient(90deg, #e4f4f8, #fff);
background: linear-gradient(90deg, #e4f4f8, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e4f4f8",endColorstr="#ffffff",GradientType=1);
}

.hgblau {
    background-color: #025b9a;
}   
#hgblau{
    background-color: #025b9a; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    min-width: 100%;
min-height: 100%;
max-width: 4100px;
max-height: auto;
    
    
/*
    width:100%;
    height:auto;
    width:100%;
*/
    position: relative;
    color:#fff;
    padding:2em 0;
}
#hgblau p, #hgblau a, #hgblau ul li {
    font-weight: 400;
}
#hgweiss{
    
    
    min-width: 100%;
min-height: 100%;
max-width: 4100px;
max-height: auto;
/*
    width:100%;
    height:auto;
    width:100%;
*/
    position: relative;
/*    padding:2em 0;*/
    padding: 2em 0;
    color:#313245;
}
#hgweiss h4, #hgweiss p, #hgweiss a, #hgweiss ul li {
    color:#313245;
/*    font-weight: 400;*/
}

#mailkasten {
    border:1px solid #025b9a;
    margin:-1em 2em 5em 2em;
    background-color: #e4f4f8;
    display: flex;
    justify-content: center;
    align-content: center;
    padding:12px 6px 0 6px ;
}
#kasten {
    border:1px solid #025b9a;
    margin: 1em 0 3em 0;

    display: flex;
    justify-content: center;
    align-content: center;
    padding:9px 6px 0 6px ;
}
#kasten:hover {
    border:1px solid #025b9a;
    background:#e4f4f8;
    margin: 1em 0 3em 0;

    display: flex;
    justify-content: center;
    align-content: center;
    padding:9px 6px 0 6px ;
}
iframe {
    width:800px;
    height:450px;
}
.kundenlogo{
    width: 100%;
    height:auto;
    float:left;
}
.kundenlogo img {
    width:100%;
    height:100%;
}

.container-fluid {
    margin:0 auto;
    width:100%;
/*    max-width: 1140px;*/
    padding:0px;    
    position: relative;
    z-index:0;
/*    padding-bottom:2em;*/
    padding-bottom:3em;
    padding-top:112px;
    text-align: center;

}
.container {
    margin:0 auto;
    max-width:100%;
/*    max-width: 1140px;*/
/*    padding:2em 15px;    */
    padding:3em 15px;    
    position: relative;
    z-index:0;
    text-align: center;

}
.container2 {
    margin:0 auto;
    max-width:100%;
/*    max-width: 1140px;*/
/*    padding:2em 15px;    */
    padding:0 15px;    
    position: relative;
    z-index:0;
    text-align: center;

}
.row {
    width:100%;
    max-width: 1140px;
    margin:0 auto;
    
}


.borderleft{
    border-left: 15px solid #fff;
} 
.borderright{
    border-right: 15px solid #fff;
}
.borderbottom {
    border-bottom: 1px solid #666;
    
}
.aufzaehlung ul{
    color:#fff;
    text-align: left;
/*    font-weight: 400;*/
    padding:0 1em;
    margin:0;
}
.aufzaehlung ul li{
    margin-bottom:20px;
}
.bildhoch {
    width:100%;
    height:100%;
    position: relative;
    object-fit: cover;

}
.bildklein {
    position: relative;
    object-fit: cover;
    width:100%;
    height:50%;
    overflow:hidden;
}
.bildhoch img{
    width:100%;
    height:100%;
    position: relative;
    object-fit: cover;
    overflow:hidden;


}
.bildhoch h8 {
    padding: 1em 1.5em;
}
.bildklein img{
    width:100%;
    height:100%;
    position: relative;
    object-fit: cover;
    overflow:hidden;
}

#blautitel h1, #blautitel h4 {
     color:#fff;
}
#blautitel a, #blautitel p{
    color:#fff;
    font-weight: 400;

}
#blautitel a:hover, #blautitel a:active {
    color:#d1d1d1;
    text-decoration: none;
}


#footer {
    background-color: #025b9a; 
    background-image: url(../media/hg_footer.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    max-width: 4100px;
    height:auto;
    min-height: 75px;
    margin:0 auto;
    color:#fff;
    text-align: left;
    padding:30px 0 15px 0;
/*    font-size: 1em;*/
/*    font-size: 1em;*/
    line-height: 1.5em;
    
}
#footer h6, #footer p {
    color:#fff;
    text-align: left;
    font-size:1em;
}
#footer img{
    width:40px;
    margin-bottom:8px;
    
}
#footer a, #footer p{
    color:#fff;
    text-align: left;
/*    font-weight: 400;*/

}
#footer a:hover, #footer a:active {
    color:#d1d1d1;
    text-decoration: none;
}
#footerhell {
    background: #fff;
    color: #313245;
/*    background-image: url(../media/hg_footer_hell.jpg);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    max-width: 4100px;
    height:auto;
    min-height: 75px;
    margin:0 auto;
    text-align: left;
    padding:30px 0 15px 0;
/*    font-size: 1em;*/
    line-height: 1.5em;
}
#footerhell h6, #footerhell p {
    color:#313245;
    text-align: left;
    font-size:1em;
}
#footerhell img{
    width:40px;
    margin-bottom:8px;
    
}
#footerhell a, #footerhell p{
    color:#313245;
    text-align: left;
/*    font-weight: 400;*/

}
#footerhell a:hover, #footerhell a:active {
    color:#999;
    text-decoration: none;
}

/* Flipkarte*/
.karte {
  position: relative;
  width: 100% ; 
  height: 20rem;
  perspective: 1500;
    background: #fff;
}
.karte .front img {
    width:100%;
    height: 100%;
    object-fit: cover;
}
.karte .back img {
    width:100%;
    height: 100%;
    object-fit: contain;
}
.text {
    background: #fff;
    margin-bottom:2em;
    padding:1em;
}
.text img {
    width:60px;
    margin-top:15px;
}
.front, .back {
  position: absolute;
  width: 100%; 
    height: 100%;
  transition: transform 1s;
  backface-visibility:hidden;
}
.front { 
  background-color: #fff; 
}
.back { 
  background-color: #fff; 
  transform: rotateY(180deg); 
}
.karte:hover .front{ 
    transform: rotateY(180deg); 
}
.karte:hover .back { 
    transform: rotateY(360deg); 
}

/*Slider*/
.slider {
    position: relative; 
    width:100%;  
    background-image: url(../media/portfolio2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;


}
.rechts {
    position: relative; 
    width:100%;
    max-height:50%;
    float:left;
    display: grid;
    align-content: space-between;

}
.unten {
    position: relative; 
    width:100%;
    float:left;
}
.slider img, .rechts img {
    width:100%;
    height: auto;
}
.unten img {
    width:100%;
}
.slider:hover img {
    transition: all 1s linear;
    transform: translate(0%,-100%);

}

/*topabbildungen*/
#mitHG {
    background-repeat: no-repeat;
    background-size: cover;

    min-width:100%;
    min-height: 100%;
    max-width: 4100px;
    max-height: auto;
    display: flex;
    margin-top:110px;
    padding-bottom:50px;
	align-items: center;
	justify-content: center;
    z-index: 0;
    position: static;
}
#mitHG .container {
    padding:8px 15px 3em 15px;
    
}
#NewsHG {

    max-width: 4100px;
    max-height: 850px;
    overflow: hidden;
    margin-top:110px;
    display: flex;
    align-items: center;
	justify-content: center;

}
#blautitel {
     background-color: #025b9a; 
    background-image: url(../img/hg_footer.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-width:100%;
    min-height: 100%;
    max-width: 2200px;
    max-height: 850px;
    display: flex;
    margin-top:70px;
    padding-bottom:50px;
	align-items: center;
	justify-content: center;
    position: relative;
/*    z-index:901;*/
    

}


/*imageslider*/
.slides, .slides ul, .slides li { 
    position: relative; 
    overflow: hidden; 
    width: 750px; 
    height: 563px; 
    margin: 0; 
    padding: 0; 
}
.slides { 
    margin: 0 auto; 
}
.slides ul li { 
    float: left; 
    list-style: none; 
}
.slides img {
    width:90%;
    margin:0 auto;
    margin-bottom: 2em;
}

a.slide-prev, a.slide-next { 
	position: absolute; 
    top: 38%; 
    z-index: 999; 
    display: block; 
    width: 75px; 
    height: 75px; 
    margin: 0 auto;
    cursor: pointer; 

}
a.slide-prev:hover, a.slide-next:hover { 
    opacity: 0.7; 
    transition: all 0.7s ease; 
}
a.slide-next { 
    right: 0; 
}

/* Maps */
#map_canvas {
  width: 100%;
  height: 750px;
    margin:0;
    padding:0;
}
#map_canvas .col-sm-12 {
    margin:0;
    padding:0;
}



.content{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
 .bildgross {
    width:100%;
    height:auto;
/*    position: relative;*/
    object-fit: cover;
    
}
.bildhoch{
    width:100%;
    height:100%;
    position: relative;
    object-fit: cover;
}  

.bildgross:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
    float:left;
}



.bildhoch:before{
	content: "";
	display: block;
	padding-top: 100%; /* initial ratio of 1:2*/
    float:left;
}









@media only screen and (max-width: 991px) {
    #footer, #footerhell {
        font-size: 16px !important;
    }
}

@media only screen and (max-width: 767px) {
    #footer, #footerhell {
        font-size: 16px !important;
    }
}

@media only screen and (max-width: 576px) {
    #footer, #footerhell {
        font-size: 16px !important;
    }
}