/* CSS Sayco */

/* #### Farben ####
Grün: 102.191.125
#66bf7d

Blau: 6.47.103
#062f67


*/

body {
font-family: 'Open Sans';
color: #062f67;    
}

.bg-blau {
background-color: #062f67;     
}
.text-gruen {
color: #66bf7d;     
}
.bg-gruen {
background-color: #66bf7d;     
}
.text-weiss {
color: #ffffff;      
}

body a{
color: #66bf7d;  
text-decoration: none;  
}
body a:hover{
color: #000000;  
}

.button {
 color: #ffffff;  
 background-color: #66bf7d;   
 padding: 6px 10px;
 border-radius: 8px;
 text-transform: uppercase;
}
.button:hover {
color: #66bf7d;  
background-color: #eff9f2;   
padding: 6px 10px;
border-radius: 10px;
text-transform: uppercase;
   }
/* ############## NAV ############# */
.navbar{
padding-top: 0px!important;
}

.navbar-toggler:focus {
    box-shadow: none;
}


.navbar-brand {
margin-top: 10px;    
}
.logo {
max-height: 70px;
    
}

.navbar-nav .nav-link {
font-weight: 500;
color: #062f67;     
text-transform: uppercase;
padding: 60px 5px 0px 5px !important;
border-radius: 12px;
text-align: center;
width: 6rem;
}

.navbar-nav .nav-link:hover {
    background-color: rgba(102,191,125, 0.1);
    }

.navbar-nav .nav-link.active, .navbar-nav .show > .nav-link {
color: #66bf7d; 
background-color: rgba(102,191,125, 0.1);

}

/* ############# SLIDER ############ */    
#carouselSayco {
margin-top: 123px;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    background-size: 60% 60%;
    background-color: rgba(102, 191, 125,0.8); 
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
  }
/* ############# BOXEN ############ */   
#markenboxen {
position: relative;
margin-top: -20px;
z-index: 2;
}

#markenboxen .img{
margin-inline: clamp(0.2rem, -0.0817rem + 1.2019vw, 1rem);
}

@media (min-width: 576px) { 
#markenboxen {
margin-top: -50px;
}    
}

@media (min-width: 768px) { 
#markenboxen {
margin-top: -90px;
}
}

@media (min-width: 992px) { 
#markenboxen {
margin-top: -100px;
}    
}

.rund {
border-radius: 12px;    
}

#markenboxen .img img:hover {
animation: ani 3s linear forwards infinite;
}      
    
@keyframes ani {
    from{  transform: rotateY(0deg)   }
    to  {  transform: rotateY(360deg) }
}

/* ############# PRODUKTE ############ */  
.jumptarget {
    position: relative;
    width: 10px;
    z-index: 0;
    }
    
    .jumptarget:before {
    width: 10px;
    display: block;
    content: " ";
    margin-top: -115px;
    height: 115px;
    visibility: hidden;
    }

#produkte p,#prod-conni p,#prod-profem p,#prod-efemia p,#ueber-uns p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-lines: 4;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-lines: 4;

}

/* ############# Produktdetails ############ */ 
.box-conni {
background-color: rgba(255, 144, 39,0.2); 
border-radius: 12px;
}

.box-profem {
background-color: rgba(102, 45, 145,0.2);
border-radius: 12px;   
}
.box-renew {
background-color:rgba(0, 36, 105, 0.2);
border-radius: 12px;   
}  
.box-actiderma {
background-color:rgba(167, 40, 85, 0.2);
border-radius: 12px;   
} 

#carouselSayco2 .carousel-caption{
left: 0px;    
right: 0px;
bottom: -30px;
background-color: #ffe9d3; 
}

#carouselSayco3 .carousel-caption{
left: 0px;    
right: 0px;
bottom: -30px;
background-color: #e0d5e9; 
}
#carouselSayco4 .carousel-caption{
left: 0px;    
right: 0px;
bottom: -30px;
background-color: #ccd3e1; 
}

#carouselSayco5 .carousel-caption{
left: 0px;    
right: 0px;
bottom: -30px;
background-color: #edd4dd; 
}

#carouselSayco2 .carousel-caption h5,#carouselSayco3 .carousel-caption h5,#carouselSayco4 .carousel-caption h5,#carouselSayco5 .carousel-caption h5 {
color: #062f67;
text-transform: uppercase;
}

/*/ X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
#carouselSayco2 .carousel-caption,#carouselSayco3 .carousel-caption,#carouselSayco4 .carousel-caption,#carouselSayco5 .carousel-caption{
bottom: 0px;
}
}

/*/ XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
#carouselSayco2 .carousel-caption,#carouselSayco3 .carousel-caption,#carouselSayco4 .carousel-caption,#carouselSayco5 .carousel-caption{
bottom: 0px;
}    
}
/* ############# Produktboxen ############ */ 
.button-bottom {
   width: 100%; 
   left: 0px;
   position: absolute; 
   bottom: 10px;
}

/* ############# ÜBER UNS ############ */ 

@media (min-width: 576px) { 
.text-gross {
font-size: 1.8rem;
}    
}
    
@media (min-width: 768px) { 
.text-gross {
font-size: 3.0rem;
}
}
    
@media (min-width: 992px) { 
.text-gross {
font-size: 4.0rem;
}    
}

.layer-box {
position: relative;
display: block;
z-index: 1;
}

.layer {  
position: absolute;
display: block;
bottom: 0px;
left: 0px;
width: 100%;
font-size: 1.8rem;
z-index: 2;
}
.bg-layer-gruen {
background-color: rgba(102, 191, 125,0.4);    
}
.bg-layer-blau {
background-color: rgba(6, 47, 103,0.4);    
}

/* ############# FOOTER ############ */


.footercontainer {  
    position: relative;
    bottom: 0;
    width: 100%;
    height: auto;
    line-height: 30px;
    background-color: #062f67;
  }

footer p,li {
color: #fff;
font-size: 0.90rem;
}

footer a {
    color: #fff;
    text-decoration: none; 
}

footer a:hover {
    color: #65be7c; 
}
.footer-nav li{
display: inline;    
}

.klein-text{
font-size: 0.70rem;
}

.modal-body li{
color: #062f67;
}

/*--------- Button Scroll Top ---------*/

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #65be7c; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 15px; /* Some padding */
    border-radius: 12px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover {
    color: #65be7c; 
    background-color: #eff9f2;  /* Add a dark-grey background on hover */
  }