/*
-------------------------------------------------------------------------
                          BODY RESET
-------------------------------------------------------------------------
*/

body { 
    font-size: 17px;
    line-height: 30px;
    background-color: #fafbf9;
}

:root {     
    --alt-font: 'Cormorant', sans-serif;
    --primary-font: 'Inter', sans-serif;
    --base-color:#777678;
    --dark-gray: #151515;
    --medium-gray:#626262;
}  

/*
-------------------------------------------------------------------------
                          LOGO
-------------------------------------------------------------------------
*/

header .navbar-brand img {
  max-height: 48px!important;
}

/*
-------------------------------------------------------------------------
                          HEADER
-------------------------------------------------------------------------
*/


header .container-fluid {
    padding-left: 4%;
    padding-right: 4%;
}
.navbar .navbar-nav .nav-link {
    font-size: 17px;
}

/*
-------------------------------------------------------------------------
                          NAV 
-------------------------------------------------------------------------
*/

.navbar .navbar-nav .nav-link.active {
color: #005644!important;
}

.navbar .navbar-nav .nav-link {
border-bottom: 4px solid transparent;
}

.navbar .navbar-nav .nav-link:hover {
border-bottom: 4px solid #005644;
}

.navbar .navbar-nav .nav-link.active {
border-bottom: 4px solid #005644!important;
}

.navbar .navbar-nav .nav-link { 
padding: 36px 0  30px 0!important;
font-weight: 500; 
font-size: 17px; 
margin: 0 18px; 
word-break: normal; }

.navbar .navbar-nav .nav-item:hover .nav-link, .navbar .navbar-nav .nav-item.active .nav-link {
opacity: 1!important;
border-bottom: 4px solid #005644;
}


/*
-------------------------------------------------------------------------
                          TITLES
-------------------------------------------------------------------------
*/


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
letter-spacing: -1px;
color: #777678!important; 
}

/*
-------------------------------------------------------------------------
                          LINK
-------------------------------------------------------------------------
*/

a {
color: #151515!important;
-webkit-transition: 0.3s;
transition: 0.3s;
text-decoration: none;
}

/*
-------------------------------------------------------------------------
                          VARIOUS
-------------------------------------------------------------------------
*/

.cookie-fallback {
background: #f7ec13;
padding: 20px 15px 1px 15px;
margin: 20px 0;
text-align: center;
}

/*
-------------------------------------------------------------------------
                          ANIMATION GALLERY UITSCHAKELEN
-------------------------------------------------------------------------
*/

#gallery-ammersee .portfolio-hover {
    display: none !important;
}

#gallery-ammersee .transition-inner-all,
#gallery-ammersee .transition-inner-all * {
    transition: none !important;
    transform: none !important;
}

#gallery-ammersee .portfolio-box:hover img {
    transform: none !important;
    opacity: 1 !important;
}

/*
-------------------------------------------------------------------------
                          INDEX PAGINA WIT STREEPJE UITSCHAKELEN
-------------------------------------------------------------------------
*/

.swiper-pagination-wrapper,
.pagination-progress-vertical,
.swiper-pagination-progress {
  display: none !important;
}

@media (min-width: 768px) {
  .ls-md-minus-5px {
    letter-spacing: -5px;
  }
}

/*
-------------------------------------------------------------------------
                          INDEX LEISTUNGEN
-------------------------------------------------------------------------
*/

.marquee-rotate-down {
  transform: rotate(3.87deg);   /* bovenste balk, positief = schuin naar rechts-onder */
  margin-bottom: -60px;         /* overlap met onderste balk */
}
.marquee-rotate-up {
  transform: rotate(-2.2deg);   /* onderste balk, negatief = schuin naar links-onder */
}


/*
-------------------------------------------------------------------------
                          INDEX LEISTUNGEN
-------------------------------------------------------------------------
*/

.services-box-style-05 figure figcaption a {
  display: inline-block;
  color: #005644;
}
.services-box-style-05 figure figcaption .content-box {
  margin-bottom: -80px;
}
.services-box-style-05 figcaption .box-title {
  color: #005644;
}
 .services-box-style-05 figure:hover figcaption .box-title {
  color: var(--white);
}
.services-box-style-05 figure:hover figcaption .box-overlay {
  opacity: 1;
  visibility: visible;
}

/*
-------------------------------------------------------------------------
                          GALLERY + TEAM
-------------------------------------------------------------------------
*/

/* Gallery reveal */
#gallery-ammersee .portfolio-wrapper .grid-item {
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: opacity;
}

#gallery-ammersee .portfolio-wrapper .grid-item.is-revealed {
  opacity: 1;
}

/* Team cards reveal */
.team-reveal .rotate-box-style-02 {
  opacity: 0;
  transform: translate3d(-16px, 12px, 0);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}

.team-reveal .rotate-box-style-02.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/*
-------------------------------------------------------------------------
                          FOOTER
-------------------------------------------------------------------------
*/

footer .footer-logo img {
max-height: 60px!important;
}
.footer-dark {
color: #FFFFFF;
}
footer a {
color: #FFFFFF!important;
}
.footer-dark p, .footer-dark a {
color: #FFFFFF;
border-bottom: 1px solid #005644!important;
}
.footer-dark a:hover {
border-bottom: 1px solid #FFFFFF!important;
}
.tp-scroll {
display: inline-block;
float: right;
width: 65px;
height: 65px;
background-color: #fafbf9;
text-align: center;
color: #000!important;
font-size: 18px;
line-height: 65px;
}


/*
-------------------------------------------------------------------------
                          LIST
-------------------------------------------------------------------------
*/

.list-style-04{
  padding-left: 0;       /* we bouwen zelf de inspringing */
  margin: 0;
}

.list-style-04 li{
  list-style: none;
  position: relative;
  padding-left: 22px;    /* ruimte voor het bullet */
  margin: 0 0 10px;
}

.list-style-04 li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;           /* uitlijning t.o.v. eerste tekstregel */
  width: 10px;
  height: 10px;
  background: #005644;   
}

/*
-------------------------------------------------------------------------
                          PREISE
-------------------------------------------------------------------------
*/

.tablePreise {
  width: 100%;
  margin: 16px 0 0;
  padding: 0 24px;           /* links + rechts ruimte */
  border-collapse: collapse;
  box-sizing: border-box;
}

.tablePreise td {
  padding: 6px 0;
  border-bottom: 1px dotted #a4a2a4;
  text-align: left;          /* linker kolom standaard links */
  vertical-align: top;
}

.tablePreise td.TableRowRight {
  text-align: right;
  white-space: nowrap;
}

.tablePreise tr:last-child td {
  border-bottom: none;
}


/*
-------------------------------------------------------------------------
                          BUTTON
-------------------------------------------------------------------------
*/

.btn {
font-family: var(--primary-font);
font-weight: 500;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

.btn.btn-transparent-tp-1 { 
background: #1d402a; 
border-color: #1d402a!important;
color: #FFFFFF!important;
}

.btn.btn-transparent-tp-1:hover, 
.btn.btn-transparent-tp-1:focus { 
background: transparent!important;
border-color: #005644!important;
color: #005644!important;
}

.btn.btn-transparent-tp-2 { 
background: #005644; 
border-color: #005644!important;
color: #FFFFFF!important;
}

.btn.btn-transparent-tp-2:hover, 
.btn.btn-transparent-tp-2:focus { 
background: transparent!important;
border-color: #777678!important;
color: #777678!important;
}

.btn.btn-transparent-tp-3 { 
background: #777678!important;
border-color: #777678!important;
color: #FFFFFF!important; 
}

.btn.btn-transparent-tp-3:hover, 
.btn.btn-transparent-tp-3:focus { 
background: transparent!important;
border-color: #777678!important;
color: #FFFFFF!important;
}

.btn.btn-transparent-tp-4 { 
background: transparent!important;
border-color: #005644!important;
color: #005644!important;
}

.btn.btn-transparent-tp-4:hover, 
.btn.btn-transparent-tp-4:focus { 
background: #005644!important;
border-color: #005644!important;
color: #FFFFFF!important;
}

.btn.btn-transparent-tp-5 { 
background: #005644; 
border-color: #005644!important;
color: #FFFFFF!important;
}

.btn.btn-transparent-tp-5:hover, 
.btn.btn-transparent-tp-5:focus { 
background: transparent!important;
border-color: #005644!important;
color: #000000!important;
}



.text-link-border {
color: inherit; /* behoudt de tekstkleur van de omgeving of gebruik bv. #151515 */
text-decoration: none; /* verwijdert de standaard underline */
border-bottom: 2px solid currentColor; /* lijn in dezelfde kleur als de tekst */
padding-bottom: 2px; /* beetje ruimte zodat border niet tegen de tekst plakt */
transition: border-color 0.3s, color 0.3s;
}

.text-link-border:hover {
color: #005644; /* gewenste hoverkleur */
border-bottom-color: #005644;
}

/*
-------------------------------------------------------------------------
                          BORDER
-------------------------------------------------------------------------
*/

.border-color-transparent-tp-1 {
  border-color: rgba(121, 158, 155, 0.3) !important;
}

.border-color-transparent-tp-2 {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.border-base-color {
border-color: #777678!important;
}

.border-color-tp-1 {
border-color: #005644!important;
}

/*
-------------------------------------------------------------------------
                          BACKGROUND
-------------------------------------------------------------------------
*/

.bg-tp-1 { 
background-color: #777678;
}
.bg-tp-2 { 
background-color: #005644;
}
.bg-tp-3 { 
background-color: #fafbf9;
}
.bg-tp-4 { 
background-color: #dddbdf;
}
.bg-tp-5 { 
background-color: #3f6d60;
}

.bg-gradient-tp-1-transparent {
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(20, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.0) 80%, rgba(255, 255, 255, 0.0) 100%);
}


/*
-------------------------------------------------------------------------
                          COLORS
-------------------------------------------------------------------------
*/

.text-tp-1, 
.btn-link.text-tp-1,
a.text-tp-1-hover:hover{ 
color: #777678!important; 
color: rgba(119, 118, 120, 1); 
}
.text-tp-2 {
color: #005644!important; 
color: rgba(0, 86, 68, 1); 
}
.text-tp-3 {
color: #fafbf9;
}
.text-tp-4 {
color: #dddbdf;
}

.text-tp-4 {
color: #3f6d60;
}



/*
-------------------------------------------------------------------------
                      MEDIA
-------------------------------------------------------------------------
*/

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1270px;
    }
}

@media (max-width: 1600px) {
    header .container-fluid {
        padding-left: 2%;
        padding-right: 2%;
    }
}

@media (max-width: 1399px) {
    .navbar .navbar-nav .nav-link {
        padding: 10px 10px;
    }
}

@media (max-width: 991px) {

header .navbar-brand img {
  max-height: 30px!important;
}

  .show-menu .header-push-button .push-button span {
    background: var(--dark-gray)!important;
  }
  
/* Mobile menu close "X" (toggler in open state) */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-line{
  background-color: #FFF !important;
}
.navbar .navbar-nav .nav-link.active {
color: #FFFFFF!important;
}

.navbar-full-screen-menu-inner .navbar-nav .nav-item .nav-link {
display: inline-block;
line-height: 25px;
font-size: 17px;
font-weight: 500;
color: var(--white)!important;
padding-left: 0 !important;
padding-right: 0 !important;
}


}

@media (max-width: 767px) { 
header .navbar-brand img {
  max-height: 30px!important;
}

.navbar .navbar-nav .nav-link.active {
color: #FFFFFF!important;
}

}
    
/*
-------------------------------------------------------------------------
                      HERO - MEDIA - IPAD
-------------------------------------------------------------------------
*/
    
/* iPad (touch) in landscape: vertical scroll terug, hero blijft intact */
@media (orientation: landscape)
  and (hover: none)
  and (pointer: coarse)
  and (min-width: 1024px)
  and (max-width: 1366px) {

  /* jouw class blokkeert nu ook Y; dit draait dat terug */
  body.overflow-x-hidden {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* als dezelfde class ook op wrappers staat */
  .overflow-x-hidden {
    overflow-y: auto !important;
  }
}