/* Colors
blue: 	264895 rgba(38,72,149,1.0);
dark blue: 	0a2240 rgba(10,34,64,1.0);
yellow:	F9DC00 rgba(249,220,0,1.0);
grey: 	454545
*/
/* Variables */
:root {
    --blue: #264895;
    --blue-rgb: 38,72,149;
    --blue-dark: #0a2240;
    --blue-dark-rgb: 10,34,64;
    --yellow: #F9DC00;
    --yellow-rgb: 249,220,0;
    --bs-body-color: var(--blue);
    --bs-font-sans-serif:'Open Sans', sans-serif; 
    --bs-font-headings: 'Khand', sans-serif;
    --bs-primary: var(--blue);
    --bs-primary-rgb: var(--blue-rgb);
    --bs-body-bg: #f6f6f6;
    --swiper-theme-color: var(--blue)
    
}

/* Basics */
body {
    min-height: 100%;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--bs-font-headings);
      overflow-wrap: break-word;
    word-wrap: break-word;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
        hyphens: auto;
	 white-space:normal !important;
}
.fw-600 {
    font-weight: 600;
}
.striped {
	background-image: repeating-linear-gradient(
		-45deg,
		#F9DC00,
		#F9DC00 25px,
		transparent 25px,
		transparent 50px
	);
	height: 50px;
	width: 100%;
}
.bg-yellow {
    background: var(--yellow);
}
.btn {
    border-radius: 0;
    font-size: 16px;
    text-transform: uppercase;
    padding: 8px 20px;
    font-weight: 600;
}
.btn-yellow {
    color: #fff;
    background: var(--yellow);
}
.btn-yellow:hover,
.btn-yellow:focus{
    color: var(--yellow);
    background: var(--blue);
}
.btn-blue {
    color: #fff;
    background: var(--blue);
}
.btn-blue:hover,
.btn-blue:focus{
    color: var(--blue);
    background: var(--yellow);
}
.btn-blue-outline {
    color: var(--blue);
    border: 2px solid var(--blue);
    background: transparent;
    text-transform: uppercase;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: 600;
}
.btn-blue-outline:hover,
.btn-blue-outline:focus {
    color: #fff;
    background: var(--blue);
}
.btn-white-outline {
    color: #fff;
    border: 2px solid #fff;
    background: transparent;
    text-transform: uppercase;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: 600;
}
.btn-white-outline:hover,
.btn-white-outline:focus {

    color: var(--blue);
    background: #fff;
}




/* Header */
.header {
    position: relative;
        background-position: center;
    background-size: cover;
}
.header.header-home {
    min-height: 660px;
}
.header.header-page {
    min-height: 580px;
}
.header-page h1 {
    font-size: 48px;
    font-weight: 600;
    text-transform: uppercase;
}
.header .striped {
    height: 40px;
}
.header .container-bottom {
    position: absolute;
    bottom: 30px;
      left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.box-header {
    background: rgba(var(--blue-rgb), 0.8);
}
.box-header-img {
    padding: 60px;
}
.box-header-img img {
        max-height: 175px;
}
.box-header .btn {
    background-color: var(--blue);
    color: var(--yellow);
    border-radius: 0;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
}
.box-header .btn:hover,
.box-header .btn:focus {
        background-color: var(--yellow);
    color: var(--blue);
}

/* Navbar */
.navbar {
    background: rgba(var(--blue-rgb), 0.8);
    padding-top: 0;
    padding-bottom: 0;
}
.header-home .navbar {
    margin-bottom: 100px;
}
.navbar-brand>img {
    max-width: 160px;
}
.navbar .navbar-nav .nav-item.nav-link {
    font-family: var(--bs-font-headings);
    font-size: 18px;
    color: #fff;
    padding: 15px;
    text-transform: uppercase;
    font-weight: 300;
    border-bottom: transparent solid 2px;
    line-height: 1;
    white-space: nowrap;
}
.navbar .navbar-nav .nav-item.nav-link:hover,
.navbar .navbar-nav .nav-item.nav-link:focus{
    background: rgba(var(--blue-rgb), 0.7);
}

.navbar .navbar-nav .nav-item.nav-link.active {
    border-bottom-color: var(--yellow);
    background: rgba(var(--blue-rgb), 1);
}
span.score {
    font-size: 14px;
}
span.score>i {
    font-size: 11px;
    color: var(--yellow);
}
.navbar .navbar-toggler {
    border: none;
    padding: 4px 8px;
    margin-top: 36px;
    margin-bottom: 36px;
    font-size: 31px;
    color: #fff;
}
.navbar-toggler:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
}
/* Content */
.page-intro {
    background-color: var(--blue);
    font-size: 16px;
    color: #fff;
    font-weight: 300;
        padding: 0 0 80px;
    position: relative;
}
.page-intro .striped {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.page-intro h1 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 200;
    text-transform: uppercase;
}
.page-intro h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 200;
    text-transform: uppercase;
}
.page-intro p {
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    font-weight: 300;
}
.page-intro .breadcrumb li,
.page-intro .breadcrumb li > a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1.3;
    font-family: var(--bs-font-headings);
}
.page-intro .breadcrumb li > a:hover {
    text-decoration: underline;
}
.page-intro .breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
}
.page-content {
    padding: 0px 0 80px;
    background: #fff;
    position: relative;
}
section.cards {
    padding: 100px 0;
    background: #f6f6f6;
}
section.cards h2 {
    font-size: 36px;
    margin-bottom: 30px;
    font-weight: 400;
    text-transform: uppercase;
}
section.cards h3 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

.card {
    border: none;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
            box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.card-img,.card-img-top {
    border-radius: 0;
}
.card-title {
        font-size: 24px;
}
.card-sub-title {
    font-size: 18px;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 400;
    font-family: var(--bs-font-headings);
}

section.testimonials {
    padding: 90px 0;
    background: url(../img/sections/building_blue.jpg) no-repeat center;
    color: #fff;
    background-size: cover;
}
section.testimonials h2 {
    font-size: 30px;
    text-transform: uppercase;
    line-height: 1.2;
    border-bottom: 2px solid #F9DC00;
    padding-bottom: 10px;
    position: relative;
}
section.testimonials h2:after {
    border-right: solid 4px transparent;
    border-left: solid 4px transparent;
    border-top: solid 4px #F9DC00;
    position: absolute;
    content: '';
    bottom: -6px;
    left: 8px;
    height: 0;
    width: 0;
}

#content ul, .page-content-text ul{
    list-style: none;
    padding-left: 17px;
}
#content ul > li, .page-content-text  ul > li{
    font-family: var(--bs-font-headings);
    line-height: 2rem;
    list-style-position: outside;
    font-size: 18px;
    font-weight: 500;
}
 #content ul > li::before, .page-content-text ul > li::before{
    content: "/ ";
    color: var(--yellow);
    margin-left: -17px;
    font-weight: 600;
    font-size: 18px;
}


.page-content-text a:not(.btn){color:var(--blue); text-decoration: none;}
.page-content-text a:hover:not(.btn),.page-content-text a:focus:not(.btn){color:var(--blue); text-decoration: underline;}

ul.list-custom {
    list-style: none;
    padding-left: 17px;
}
ul.list-custom > li {
    font-family: var(--bs-font-headings);
    line-height: 2rem;
    list-style-position: outside;
    font-size: 18px;
    font-weight: 500;
}
 ul.list-custom > li::before {
    content: "/ ";
    color: var(--yellow);
    margin-left: -17px;
    font-weight: 600;
    font-size: 18px;
}



.beratung {
    min-height: 580px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    padding-top: 120px;
}
.beratung h4 {
    font-family: var(--bs-font-sans-serif);
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
}
.beratung p {
font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 50px;
}
.ruler-wrapper {
    padding: 150px 0;
}
.ruler {
    background: #F9DC00;
    padding: 5px 0;
}
.ruler::before {
    content: '';
    display: block;
    width: 100%;
    height: 40px;
    background: url(../img/backgrounds/ruler_top.png) repeat-x;
}
.ruler::after {
    content: '';
    display: block;
    width: 100%;
    height: 40px;
    background: url(../img/backgrounds/ruler_bottom.png) repeat-x;
}
.ruler h3 {
    line-height: 1;
    font-size: 48px;
    font-weight: 300;
    text-transform: uppercase;
}
.ruler h3>.fw-bold {
    font-weight: 500 !important;
}
.contact-block h5 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 500;
}

.contact-block .bg-yellow a:not(.btn)  {
    color: var(--blue);
    text-decoration: none;
}
.contact-block .bg-yellow a:hover:not(.btn),.contact-block .bg-yellow a:focus:not(.btn) {
    color: var(--blue);
    text-decoration: underline;
}


/* Form */



#emailCheck,#Adresszusatz {
    display: none;
}
form legend {
        font-family: var(--bs-font-headings);
        font-size: 18px;
    font-weight: 600;
    border: none;
}
form textarea {
    height: auto;
}
.form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}
.dmxDropzone {
    border-color: rgba(var(--blue-rgb), 0.7);
}
.dmxDropzoneMessage {
    color: var(--blue);
}

.btn-star {
    padding: 0 4px 0 0;
}
.btn-check:focus+.btn, .btn:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
}
.btn-star .fa-star {
  color: rgba(var(--blue-rgb), 0.7)
}
.btn-star.active .fa-star,
.btn-star:hover .fa-star,
.btn-star:hover ~ .btn-star .fa-star {
  color: var(--yellow); 
}
.rating small {
    font-size: 12px;
}
input:required ~ label::after {
    position: relative;
    display: inline;
    content: "*";
    margin-left: 2px;
}
.invalid-rating {
    width: 100%;
    margin-top: 0.25rem;
    font-size: .875em;
    color: #dc3545;
}


section#instagram {
    padding: 60px 0;
    background: #efefef;
}
section#instagram h3 {
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 30px;
}
section#instagram .btn-link {
    color: #666;
}
section#instagram .logo-lines::before,
section#instagram .logo-lines::after {
    width: 60px;
}
section#instagram .logo-lines::before {
    left: -90px;
}
section#instagram .logo-lines::after {
    right: -90px;
}


/* Swiper */
.swiper {
    padding-bottom: 40px;
}
.swiper-auto-slides .swiper-slide {
    width: auto !important;
}
.swiper-auto-slides .swiper-slide img {
    height: 420px;
}
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 0;
    background: #fff;
    opacity: 1;
    border: 2px solid var(--blue)
}
.swiper-pagination-bullet-active {
    background: var(--blue);
}
.swiper-testimonials .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 0;
    background: none;
    opacity: 1;
    border: 2px solid var(--yellow)
}
.swiper-testimonials .swiper-pagination-bullet-active {
    background: var(--yellow);
}
.testimonial {
    background-color: rgba(1, 39, 109, 0.8);
    padding: 30px 15px;
}
.testimonial h4 {
  font-size: 18px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 5px;
}
.testimonial h5 {
  font-size: 16px;
  color: rgb(204, 205, 201);
    margin-top: 0;
    text-transform: uppercase;
}
.testimonial .rating i{
    color: var(--yellow);
}
.testimonial p.comment {
    font-style: italic;
}
span.date {
    position: absolute;
    top: 30px;
    right: 15px;
    font-size: 12px;
    color: rgb(204, 205, 201);
}

/* Modals */

.modal-yellow .modal-content{
    border-radius: 0;
    background: var(--yellow);
}
.modal-yellow .modal-header {
    
    padding: 0;
    background: var(--blue);
}
.modal-yellow .modal-header,
.modal-yellow .modal-content,
.modal-yellow .modal-footer {
border-radius: 0;
border:none;
}
.modal-yellow .modal-content h3 {
    font-size: 24px;
}
.modal-yellow .modal-content h4 {
    font-size: 18px;
}




#mdlCookie .modal-body{
  font-size: 16px;
   
}
#mdlCookie .modal-header,
#mdlCookie .modal-content, 
#mdlCookie .modal-footer 
{
  border: none;
  border-radius: 0;
  color: var(--blue);
   background: var(--yellow);
} 
#mdlCookie .modal-header {
  padding-bottom: 0;

}
#mdlCookie .modal-header h5 {
 text-transform: uppercase;
 font-size: 24px;
}
#mdlCookie .modal-footer {
  padding-top: 0;

}


/* Timeline */

#timeline {
  position: relative;
  display: block;
}
#timeline > .row {
    margin-bottom: 90px;
}
#timeline:before {
    position: absolute;
    height: 100%;
    width: 4px;
    left: 50%;
    margin-left: -2px;
    top: 0;
    content: "";
    background: #ccc;
}
.timeline-content {
    position: relative;
    padding: 2px 10px;
}
.timeline-content:before {
    position: absolute;
    height: 17px;
    width: 17px;
    border:none;
    background: #ccc;
    top: 50px;
    left: -21px;
    border-radius: 50%;
    content: "";
  z-index: 10;
}
.timeline-content:after {
    position: absolute;
    height: 31px;
    width: 31px;
    border:none;
    background: rgba(236, 236, 236, 0.4);
    top: 43px;
    left: -28px;
    border-radius: 50%;
    content: "";
    z-index: 9;
    -webkit-transition: background 0.8s ease;
    transition: background 0.8s ease;
}
.timeline-content-left:before{
    right: -21px;
    left: auto;
}
.timeline-content-left:after{
    right: -28px;
    left: auto;
}
.timeline-content:hover:after {
  background: rgba(236, 236, 236, 1);
}
.timeline-title {
    font-size: 22px;
    text-transform: uppercase;
    background: #cecece;
    padding: 20px 15px 10px;
    margin-bottom: 0;
}
.timeline-text {
    font-weight: 500;
    padding: 15px;
    background: #f7f7f7;
}
.timeline-year {
    display: inline-block;
    background: var(--blue);
    border: 3px solid #ecedee;
    color: #fff;
    padding: 5px 12px 3px;
    border-radius: 20px;
    margin: 0;
    position: absolute;
    top: -60px;
}
#timeline > .row:nth-child(odd) .timeline-year{
    right:0;
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
}
#timeline > .row:nth-child(even) .timeline-year{
    left: 0;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
}
.timeline-year.timeline-today {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
          top: -30px;
}


/* Divers */


.tree {color:green; margin:5px; display: inline-block;}
.car { margin:5px; display: inline-block;}
h3.car-wrapper{margin-top:50px;}


/* Footer */

footer ul {
    margin: 0;
}
footer ul>li{
    line-height: 1;
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    font-family: var(--bs-font-headings);
}

footer ul>li::before {
    content: "/ ";
    color: var(--yellow);
    font-weight: 600;
    font-size: 18px;

}
footer ul>li:first-child:before {
    display: none;
}
.footer-content-top a {
    color: var(--blue);
    text-decoration: none;
}
.footer-content-top a:focus,
.footer-content-top a:hover {
        color: var(--blue);
    text-decoration: underline;
}
.footer-content-bottom {
    color: #fff;
    font-size: 13px;
}
.footer-content-bottom a {
    color: #fff;
    text-decoration: none;
}
.footer-content-bottom a:focus,
.footer-content-bottom a:hover {
        color: #fff;
    text-decoration: underline;
}

#scroll-top {
  position: fixed;
  bottom: 47px;
	width: 54px;
	height: 54px;
	right: 40px;
  color: white;
  background-color: var(--blue);
  text-align: center;
  cursor: pointer;
  font-size: 24px;
  line-height: 48px;
 border-radius: 0px;
  z-index: 9999;
  opacity: 0;
   -webkit-transition: all .5s ease;
   transition: all .5s ease;
border:var(--blue) solid 2px;
	
}
#scroll-top.show-btn {
    opacity: 1;
}

/* Instagram */


section#instagram {
    padding: 60px 0;
    background: #fff;
}
section#instagram h3 {
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 30px;
}
section#instagram .btn-link {
    color: #666;
}
section#instagram .logo-lines::before,
section#instagram .logo-lines::after {
    width: 60px;
}
section#instagram .logo-lines::before {
    left: -90px;
}
section#instagram .logo-lines::after {
    right: -90px;
}

.ig-permalink {
    display: block;
    position: relative;
}
.ig-img-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}
.ig-img-overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ig-img-overlay i {
    color: #fff;
}
.ig-post:hover .ig-img-overlay {
    opacity: 1;
}



/* Responsive */
@media (max-width:767px) {
        #timeline:before {
        left: 40px;
    }
    .timeline-content {
        padding: 0 30px 0 60px;
        margin: 15px 0;
    }
    .timeline-content:before {
        left: 30.5px;
    }
    .timeline-content:after {
        left: 24px;
    }
    .timeline-year {
        position: relative;
        top: -30px;
    }
    #timeline > .row:nth-child(odd) .timeline-year {
        right: auto;
        -webkit-transform: translateX(11px);
        transform: translateX(11px);
        left: auto;
    }
    #timeline > .row:nth-child(even) .timeline-year {
        right: auto;
        -webkit-transform: translateX(11px);
        transform: translateX(11px);
        left: auto;
    }
    #timeline > .row {
        margin-bottom: 25px;
    }
}
@media (min-width:992px) {
.navbar .navbar-nav .nav-item.nav-link {
    padding: 45px 15px 43px;
    line-height: 20px;
}    
}
@media(min-width: 1200px) {
    .navbar .navbar-nav .nav-item.nav-link {
    font-size: 20px;
    padding: 45px 30px 43px;
}
.navbar-brand>img {
    max-width: 243px;
}
}
@media (min-width: 1600px) {
    .container {
        max-width: 1570px;
    }
}