@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');

        html {    font-size: 24px;}
        
@media (max-width: 1600px)
{
    .cd-f{width:80px}
    .cd-s{width: calc(100% - 80px);}
}

@media (min-width: 1600px){
        .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            max-width: 1520px !important;
            }
}




.hero{
background: url(../../img/hero-banner.jpg) center center/cover no-repeat local;
height: calc(72vh);
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 0 3rem 4rem 3rem;
}




@media (max-width: 1582px){
     .hero{height: calc(55vh);
   }
}
        
@media (max-width: 992px){
     .hero{height: calc(75vh);
   }
}
        
@media (min-height: 971px) and (min-width: 1600px) {
     .hero{
        height: 735px;
    }
}



body{
  font-family: 'Roboto', sans-serif;font-weight: 300;font-size: 1rem;color: #1f3744;
}
h1, h2,h3,h4{font-weight: 800;}
h2,h3{}
a{text-decoration: none}
a:hover{color:#191a25}

p.text{  font-size: 0.8rem;
margin: 0px 0 20px 0;
color: #1f3744;
}
p.text span{font-weight: 600}

.red, red{color: #709FBA}

.hero p{
 font-size: 4rem;
color: #fff;
font-weight: 900;
margin: 0 0 0.2em;
text-transform: uppercase;
line-height: 1em;    text-shadow: 3px 2px 29px rgb(16 38 52);
}
html {
  scroll-behavior: smooth;
}
#kontakt {
	scroll-behavior: smooth;
}
.impressum p{    
    font-size: 0.8rem;
    color: #1f3744;    
}
.impressum .container{padding: 40px 40px 60px; background: #dfe8ed;margin-top: 25px}
.breadcrumb {
    font-size: 18px;
}
.hero p.hero-pn{
text-transform: inherit;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0px;
    line-height: 1.2;
    margin-bottom: 25px;
    padding: 2px 0px 25px;
    margin-left: 3px;
}
.hero p.hero-pn span{font-weight: 300}



.mt-40{margin-top: 40px}
.sectionhead span{color: #709FBA; font-size: 0.7rem;font-weight: 600; text-transform: uppercase; letter-spacing: 3px}

.quote-text{margin-top: 40px}
.quote-text h2{font-size: 1.5rem;color: #709FBA; }



.btn-std{font-size: 0.7rem;
font-weight: 500;
padding: 20px 35px;
border: 0;
display: inline-block;
border-radius: 0;
text-transform: uppercase;
position: relative;
z-index: 1;
letter-spacing: 1px;
background-color: #6f9fba;
color: #fff;}



.btn-std:hover{ background-color: #fff;  color: #375A6E;}
.hero .btn-std{margin-top: 25px;margin-left: 10px;font-weight: 500}

.logo{max-width: 220px;}
.logo-light{max-width: 220px}


  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }


#header{padding: 20px 0}

.contact-box {
    border: 1px solid #dee2e6;
    height: 60px;
    display: inline-flex;

}

.contact-box p {
font-size: 0.6rem;
margin: 0;
font-weight: 300;
color: #878787;
}
.contact-box h5, .contact-box h5 a {
  font-size: 0.7rem;
margin: 0;
color: #375a6e;
font-weight: 800;
}


section.about{margin-top: 45px; margin-bottom: 45px}

section.about p{font-size: 0.55rem;
margin-bottom: 20px;letter-spacing: 5px;text-transform: uppercase;
font-weight: 300;
color: #6f9fba;
}

section.about h1{font-size: 0.7rem;
text-transform: uppercase;
font-weight: 400;    color: #375a6e;
letter-spacing: 5px;
line-height: 1.5;position:relative
}

section.about h1:after {
content: "";
width: 50%;
height: 1px;
position: absolute;
background-color: #dee2e6;
left: 25%;
bottom: -45px;
}


section.about h2{font-size: 0.7rem;
text-transform: uppercase;
font-weight: 400;    color: #375a6e;
letter-spacing: 2px;
line-height: 1.5;position:relative
}

section.about .icon{max-width: 50px
}




section.intro{margin-top: 45px}


.sig{    font-size: 0.7rem;
text-transform: uppercase;line-height: 1.1;
letter-spacing: 2px;font-weight: 400}

.consig{position: relative}
.consig:after{
    content: "";
width: 50%;
height: 1px;
position: absolute;
background-color: #dee2e6;
left: 25%;
bottom: -20px;
}

.sig span{font-weight: 300;font-size: 0.6rem;}

img.sig{    margin-bottom: 15px;
margin-top: 20px;}

.quote-start{position: relative;top:10px;left: 95px;}
.quote-end{position: absolute;    bottom: -10px;    transform: rotate(180deg);  left: -105px;      }

@media (max-width: 1582px) {
     .quote-start{position: relative;top:-28px;left: 7px;}
    .quote-end{position: absolute;    bottom: -34px;    transform: rotate(180deg);  left: -105px;      }
    .consig {
    position: relative;
    padding-top: 18px
    }
          
}
@media (min-height: 971px) and (max-width: 780px) {
     .hero{
        height:  calc(87vh);
    }
}

@media (max-width: 760px) {
    .head-phone{flex:auto; align-items: center!important;}
    .head-logo{flex:auto; align-items: center!important;}
    .text-end{text-align: center!important}
    
    .head-logo {
     text-align: center;
    display: block!important;
        margin-bottom: 10px
    }
    .hero p {
    font-size: 3rem;text-shadow: 3px 2px 1px rgb(17 51 64);
    }
    .hero {
    background: url(../../img/hero-banner.jpg) center center/cover no-repeat local;
    height: calc(63vh);
    }
    .hero p.hero-pn {text-shadow:none}
    
    
}
@media (max-width: 495px) {        
        
    .hero p {
    font-size: 2rem;text-shadow: 3px 2px 1px rgb(17 51 64);
    }
    .hero{
         background: url(../../img/hero-banner.jpg) 15% center/cover no-repeat local;
        padding: 0 1rem 3rem 1rem;height: calc(71vh);
    }
    .quote-end {
    position: absolute;
    bottom: -34px;
    transform: rotate(180deg);   left: 283px;
    }
    .quote-text {
    margin-top: 40px;
    margin-left: -25px;
    }
    .sectionhead span {
    line-height: 25px !important;
    display: block;
    }
    .aboutus h2 {
    line-height: 1;
        font-size: 2.5rem;
        
    }
     .con-div .feather {
    top: -5px !important;
    }
    .cd-s{margin-bottom: 30px; width: 100%}
     .cd-f{ width: 100%
    }
    .con-div{
        text-align: center
    }
    img.sig {
        margin-top: 60px
    }
    .text-start {
    text-align: left!important;
    width: 100%;
    display: block;
    flex: none
    }
    .sectionhead span,.sectionhead h2{text-align: center;display: block;}
    

}
        
 @media (max-width: 995px)  {
               .con-div .feather {
    top: -5px !important;
    }
    .cd-s{margin-bottom: 30px; width: 100%}
     .cd-f{ width: 100%
    }
    .con-div{
        text-align: center
    }
    img.sig {
        margin-top: 60px
    }
     .sectionhead span,.sectionhead h2{text-align: center;display: block;}    
}        
          
        
 @media (width:1280px) and (max-height: 800px) {
    .hero{
    height:  calc(85vh);
}
}  
 @media (width:1024px) and (max-height: 800px) {
     .hero{
        height:  calc(117vh);
    }
}     
@media (width:1024px) and (min-height: 1350px) {
     .hero{
        height:  calc(51vh);
    }
}          
@media (width:540px) {
     .hero{
        height:  calc(116vh);
    }
}         
@media (min-width: 411px) and (max-width: 420px) {
     .hero{
        height:  calc(81vh);
    }
}   
        
@media (max-width: 410px) {   
    .hero {
      height: calc(111vh);
    }
    .quote-text {
    margin-top: -24px;
    margin-left: -2px;
    }
    .quote-start {
        left: -25px;
    }
    .quote-end {
       bottom: -50px;
       left: 241px;
    }
    
}
        
@media  (max-width: 350px) {
     .hero{
        height:  calc(139vh);
    }
}          
@media  (max-width: 300px) {
     .hero{
        height:  calc(115vh);
    }
}        
        section.aboutus{margin-top: 75px;}
        section h2{font-size: 3rem;margin-bottom: 30px;color:#375A6E}
        
        .cd-s a{color: #213642 !important;}.cd-s a:hover{color: #e8113d !important;}
        .cd-s span{color: #375A6E}
        .wordcloud {
        border: 1px solid #dcdee1;
        height: 5in;
       
        padding: 0;
        page-break-after: always;
        page-break-inside: avoid;
        width: 100%;
        }

        
        
        .contact-features{margin-top: 75px}
        
        
        .con-div{padding-left: 0px !important}
        .con-div .feather{width: 50px;height: 50px; stroke-width: 1;color:#709FBA;position: relative;    top: 13px;}
      
        
        footer{   background: #354852;
        color: #d8d7df;
        margin-top: 115px;
        padding: 65px 0 45px;}
        footer p, footer a, footer h3{color: #d4e0e7; font-size: 0.7rem} 
        footer a:hover{color: #fff}
        
        
        footer .fsnd{font-size: 0.6rem;     padding-top: 60px;}
        .fsnd:before{content: "";
        width: 100%;
        height: 1px;
        position: absolute;
        background-color: #585a64;
        top: 30px;
        left: 0px;}
        
        

@media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
}