@import url('https://fonts.googleapis.com/css?family=Lato|Questrial');

h1, h2, h3, h4, h5, h6, h7, h8{font-family: 'Questrial', sans-serif !important;}
h2{padding: 0 0 20px;}
p {font-family: 'Lato', sans-serif !important;}
nav {font-family: 'Questrial', sans-serif !important;}
@media (min-width:992px){ .col-lg-12 p {max-width: 80%;}}
@media (min-width:1200px){.col-xl-12 p {max-width: 55%;}}
#accordion p{max-width: 100% !important;}
a{word-break: break-all;}

/* ***************** */
#stt span,
* {
    margin: 0
}

#stt {
    width: 50px;
    display: block;
    z-index: 999;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #000;
    background: rgba(0,0,0,0.50);
    height: 50px;
    border-radius: 0;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

#stt span {
	position: absolute;
	width: 10px;
	height: 10px;
	top: 22px;
	margin-left: 20px;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	box-sizing: border-box;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease
}
#stt span,
#stt:hover span{color: #fff;}
#stt:hover {background: rgba(0,123,255,1.00);}
#stt:hover span {top: 17px}
/* ***************** */


body nav i {
    margin-right: 5px;
}
body nav .fa-user{
    font-size: 1em;
}
body nav .fa-map-marker{
    font-size: 1.1em;
}
body nav .fa-building, body nav .fa-tasks, body nav .fa-users{
    font-size: .8em;
}
body main i, footer i {
    margin-right: 12px;
}
.kontakt ul, .list ul, .links ul{
    padding: 0!important;
    margin: 0!important;
}

.kontakt ul li, .list ul li, .links ul li{
    color: rgba(0,0,0,.7);
    list-style: none !important;
    line-height: 1.8em !important;
}
.kontakt ul li a, .list ul li a, .links ul li a{
    text-decoration: none;
    color: rgba(0,0,0,.7);
}
.kontakt ul li > a:hover, .list ul li > a:hover, .links ul li > a:hover, 
.kontakt ul li > a:focus, .list ul li > a:focus, .links ul li > a:focus{
    color: #007BFF;
    font-weight: bolder;
	-webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.kontakt .fa-phone, .list .fa-phone, .links .fa-phone {
    font-size: 1.2em; 
}
.kontakt .fa-mobile, .list .fa-mobile, .links .fa-mobile {
    font-size: 1.8em;
    padding: 0 2px;
}
.kontakt h3{
    padding: 40px 0 0;
    font-weight: bolder;
}
.kontakt p{
    padding: 0 0 15px;
}

.logo h2 {
    line-height: 0.5em;
    font-weight: bolder;
    color:#0039A0;
}
.logo p {
    background-color:#0039A0;
    color: white;
    padding: 2px 5px;
    max-width: 191px;
}
#kontakt li.company{
    font-weight: bolder;
    line-height: 1.2em !important;
    padding-bottom: 22px;
}

#anfahrt iframe {
width:100%;
height: 400px;
frameborder:0;
border:0;
}

.copyright {
    background-color:#001438;
    color: white;
}

.copyright.container-fluid {
    padding-top: 0!important;
    padding-bottom: 0!important;
}


.banner{
    width: 100%;
    height: 60vh;
    display: block;
    position: relative;
}

.bg-overlay{
	position: relative;
	width: 100%;
	height:auto;
	min-height: 60vh;
	background-size: cover;
	background-color: rgba(0,0,0,0.30);
}

.bg-img{
	position: relative;
	width: 100%;
	height:auto;
	min-height: 60vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center center;
}

@media(max-width:576px){
.banner{
    height: 70vh;
}
.bg-overlay, .bg-img{
	min-height: 70vh;
}
}

@media(max-height:720px){
.banner{
    height: 80vh;
}
.bg-overlay, .bg-img{
	min-height: 80vh;
}
}

@media(max-height:535px){
.banner{
    height: 100vh;
}
.bg-overlay, .bg-img{
	min-height: 100vh;
}
}
.bg-img.bg-01{
    background-image: url(../img/img1.jpg);
}

.nav-link.active {
    border-bottom: 2px solid #0039A0 !important;
}

.navbar-collapse {
    padding: 10px 0 5px 0px;
    
}

.navbar-brand{
    font-weight: bolder;
    font-size: 2em !important;
    color:#0039A0 !important;
    padding-left:2% !important;
}

#top h1{color: white;}
#top{
    padding-bottom: 40px;
}

.top-content{
    padding: 20vh 5% 0;
    color: white;
}
.top-content p{
    font-size: 1rem !important;
    line-height: 1.2em;
    padding: 0 0 20px;
}
@media(max-height:535px){
.top-content{
    padding: 25vh 5% 0;
}
}

@media(min-width:576px){
.top-content p{
    font-size: 1.04rem !important;
}
}
@media(min-width:768px){
.top-content p{
    font-size: 1.08rem !important;
}
}
@media(min-width:992px){
.top-content p{
    font-size: 1.15em !important;
}
}
@media(min-width:1200px){
.top-content p{
    font-size: 1.2rem !important;
}
}

.leistungen ul {
  list-style: none;
  padding: 0;
}
.leistungen li {
  padding:  8px 0 8px 1.3em;
}
.leistungen li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  margin-right: .5em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}
/*
[data-toggle="collapse"] .fa:before {  
  content: "\f068";
}

[data-toggle="collapse"].collapsed .fa:before {
  content: "\f067";
}

.card-header{*/
    /*max-width: 300px;*/
   /* padding: 5px 0;
}
.card-header i{
    float:right;
}

.card-block{
    padding: 10px 0 40px;
}

.card a{
    color:rgba(0,20,56,1.00) !important;
}

.card a:hover, .card a:focus, .card a[aria-expanded='true']{
    color:#0039A0 !important;
    font-weight: bolder;
    text-decoration: none !important;
}

.card h3{
  font-size: 1.05rem;
  padding: 5px 0;
}

@media(min-width:567px){
    .card h3{
      font-size: 1.1rem;
    }
}
@media(min-width:768px){
    .card h3{
      font-size: 1.15rem;
    }
}
@media(min-width:992px){
    .card h3{
      font-size: 1.2rem;
    }
}
@media(min-width:1200px){
    .card h3{
      font-size: 1.25rem;
    }
}
*/

.animatable {
  
  /* initially hide animatable objects */
  visibility: hidden;
  
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animate-in {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -ms-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

.animate-out {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;

  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  -ms-animation-direction: reverse;
  -o-animation-direction: reverse;
  animation-direction: reverse;
}

.animate-out:after {
  content:'';
  letter-spacing: inherit;
}

.animate-in.fadeInLeft {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}

/*
 * Tinyfade - responsive image slideshow backgrounds with plain javascript.
 *
 * Version 1.0
 * Copyright (c) 2017 Moritz Marquardt
 * Licensed under MIT License
 */
.tinyfade{position:relative;font-size:0}.tinyfade img{position:relative;width:100%;opacity:0}.tinyfade img:not(:first-of-type){position:absolute;top:0;left:0;right:0}.tinyfade:not(.tinyfade-js) img:first-of-type{opacity:1}img.tinyfade-current{z-index:2;opacity:1}img.tinyfade-last{z-index:1;opacity:1}