/* CSS Gabriels Feinkost */
body {
    font-family: 'Roboto';
color: #676767;  
font-size: 1.20rem;
font-weight: 400;
}

body a{
color: #ff0000;  
text-decoration: none;  
transition: color 400ms, background-color 400ms;
}
body a:hover{
color: #911717;  
}

.logo {
max-width: 70px;
margin: 10px 0px;   
}
@media (min-width: 576px) { 
.logo {
max-width: 70px;   
}    
}
@media (min-width: 768px) { 
.logo {
max-width: 80px;   
}    
}
@media (min-width: 992px) {
.logo {
max-width: 110px;   
} 
}

@media (min-width: 1200px) {
.logo {
max-width:140px;   
} 
}
/*---------------- Nav  -------------------*/
.bg-nav {
transition: 1.5s ease-in;
background-color: #b81e40;
}
.navbar .navbar-nav .nav-link {
font-family: 'M PLUS Rounded 1c'; 
font-weight: 500;  
font-size: 1.0rem;   
color: #fff;
text-transform: uppercase;
transition: color 1000ms linear; 
transition: background-color 1000ms linear; 
}
.navbar .navbar-nav .nav-item .nav-link:hover {
color: #ebebeb;
background-color: #a91b3a;
}

.nav-tel {
color: #fff;
font-family: 'M PLUS Rounded 1c'; 
font-weight: 500;  
font-size: 1.0rem; 
}
.nav-tel img{
max-width: 22px;
}

.navbar-toggler {
border: 0px;
}


@media (min-width: 768px) { 
.navbar .navbar-nav .nav-link {
font-size: 0.90rem;  
}  
.navbar-expand-md .navbar-nav .nav-link {
padding-right: 8px;
padding-left: 8px;
}
.nav-tel {
font-size: 0.90rem; 
}
.nav-tel img{
max-width: 22px;
}  
}
@media (min-width: 992px) {
.navbar .navbar-nav .nav-link {
font-size: 1.15rem;  
} 
.navbar-expand-md .navbar-nav .nav-link {
padding-right: 10px;
padding-left: 10px;
}
.nav-tel {
font-size: 1.15rem; 
}
.nav-tel img{
max-width: 28px;
}
}

@media (min-width: 1200px) {
.navbar .navbar-nav .nav-link {
font-size: 1.35rem;  
} 
.navbar-expand-md .navbar-nav .nav-link {
padding-right: 20px;
padding-left: 20px;
}
.nav-tel {
font-size: 1.35rem; 
}
.nav-tel img{
max-width: 32px;
}
}


/*---------------- Header  -------------------*/

#carouselGabrielsFeinkost {
margin-top: 116px;   
border-bottom: 20px solid #b81e40;
}
.carousel-caption {
position: absolute;
right: 0px;
left: 0px;
bottom: 10%;
padding-top: 1.05rem;
padding-bottom: 1.05rem;
color: #fff;
}

.carousel-caption h5 {
font-family: 'M PLUS Rounded 1c'; 
font-weight: 500;  
color: #fff;
font-size: 0.81rem; 
}

.carousel-caption p {
font-family: 'M PLUS Rounded 1c'; 
font-weight: 500;  
color: #fff;
font-size: 0.54rem;
}

.bg-caption {
background-color: rgba(184, 30, 64,0.6);
}

@media (min-width: 576px) {
#carouselGabrielsFeinkost {
margin-top: 116px;   
}
.carousel-caption {
bottom: 30%;
padding-top: 1.0rem;
padding-bottom: 1.0rem;
}
.carousel-caption h5 {
font-size: 1.1rem; 
}
.carousel-caption p {
font-size: 0.74rem; 
}
}


@media (min-width: 768px) {
#carouselGabrielsFeinkost {
margin-top: 126px;   
}
.carousel-caption h5 {
font-size: 1.55rem; 
}
.carousel-caption p {
font-size: 1.04rem; 
}
}


@media (min-width: 992px) {
#carouselGabrielsFeinkost {
margin-top: 156px;   
}
.carousel-caption h5 {
font-size: 2.45rem; 
}
.carousel-caption p {
font-size: 1.65rem; 
}
}


@media (min-width: 1200px) {
#carouselGabrielsFeinkost {
margin-top: 186px;   
}
.carousel-caption h5 {
font-size: 2.85rem; 
}
.carousel-caption p {
font-size: 1.9rem; 
}
}


#features img{
background-color: #b81e40;
border: 4px dotted#ffffff; 
border-radius: 100%; 
}
/*---------------- Content  -------------------*/
.jumptarget {
position: relative;
width: 10px;
z-index: 0;
}

.jumptarget:before {
width: 10px;
display: block;
content: " ";
margin-top: -115px;
height: 115px;
visibility: hidden;
}

#content td {
color: #676767; 
font-size: 1.20rem;
font-weight: 400;
}

h1,h2,h3,h4,h5 {
color: #b81e40; 
text-transform: uppercase;
}
h1 {
font-size: 2.8rem;
}

.headline1 {
font-family: 'M PLUS Rounded 1c'; 
font-weight: 500; 
font-size: 1.8rem;   
}

@media (min-width: 576px) {
.headline1 {
font-size: 2.4rem;
}
}

@media (min-width: 768px) {
.headline1 {
font-size: 2.8rem;
}
}

p,td {
font-family: 'Roboto';
hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-lines: 4;
}

.rot-text {
color: #b81e40;
font-style: italic;
font-weight: 300;
}

.rot {
 color: #b81e40;
}
.bg-rot {
background-color: #b81e40;    
}
.weiss {
color: #fff; 
}
.bg-weiss {
background-color: #fff;
}

/*---------Profil  ---------*/
.profilbild {
border-radius: 100%;
border: 8px dotted #fff;
}

.picto-profil {
background-color: #b81e40;  
background-image: url("../images/picto-profil.png");
background-repeat: no-repeat;
background-attachment:scroll;
background-position-x: 98%;
background-position-y: 75%;
background-size: 15%;     
}

.bg-pictos-profil2 {
background-color: transparent,transparent,transparent,transparent,transparent,transparent;  
background-image: 
url("../images/bg-picto-bohne-links.png"),
url("../images/bg-picto-bohne-rechts.png"),
url("../images/bg-picto-kringel.png"),
url("../images/bg-picto-teigwinkel.png"),
url("../images/bg-picto-teigwinkel.png"),
url("../images/bg-picto-kringel.png");
background-repeat: no-repeat, no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-attachment:scroll,scroll,scroll,scroll,scroll,scroll;
background-position-x: -2%,102%,104%,-2%,102%,-7%;
background-position-y: 24%,52%,24%,50%,80%,78%;
background-size: 25%,25%,18%,25%,25%,18%;     
}

@media (min-width: 768px) {
.picto-profil {
background-position-x: 98%;
background-position-y: 20px;
}
.bg-pictos-profil2 {
background-position-x: -2%,102%,104%,-2%,102%,34%;
background-position-y: 20%,55%,20%,55%,82%,82%;
background-size: 15%,15%,12%,12%,12%,7%;
}
}    
/*----------------Märkte  -----------------*/
#marktdaten h1,h4,h6 {
    font-family: 'M PLUS Rounded 1c'; 
font-weight: 500;  

    }
#marktdaten h6 {
font-size: 1.33rem;
}
#marktdaten p {
line-height: 24px;
}

.button {
font-family: 'M PLUS Rounded 1c'; 
font-size: 1.08rem;
font-weight: 500; 
color: #fff; 
background-color: #b81e40;
padding: 1px 26px;
border-radius:25px;
border: 2px dotted #fff;
transition: background-color 1000ms linear;   
}
.button:hover {
color: #fff; 
background-color: #a91b3a; 
}
/*-------------------- Kontakt ---------------------*/
#kontakt p,#kontakt td,#kontakt a {
font-family: 'Roboto';
font-weight: 100;   
color: #fff; 
}
#kontakt a:hover {
color: #303030; 
}

#kontakt .kontaktlinie {
border-left: 1px solid #b81e40;  
}

@media (min-width: 768px) {
#kontakt .kontaktlinie {
border-left: 1px solid #fff;  
}    
}
/*--------- footer ---------*/
.footercontainer {  
bottom: 0;
width: 100%;
height: auto;
line-height: 30px;
background-color: #b81e40;
}

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

#footer .nav-item {
color: #fff;
font-size: 0.90rem;
font-weight: 300;
}

#footer a {
color: #ffffff;  
text-decoration: none; 
font-size: 0.90rem;
transition: color 1000ms linear; 
}

#footer a:hover {
color: #272727; 
font-size: 0.90rem;
}

#footer .i-weiss {
color: #ffffff; 
}

#datenschutz p,li,td {
color: #676767; 
font-size: 1.20rem;
font-weight: 400;
}

/*--------- 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: 2px dotted #fff; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #b81e40; /* Set a background color */
    color: #ffffff; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 15px; /* Some padding */
    border-radius: 27px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    transition: background-color 1000ms linear; 
    }
      
    #myBtn:hover {
    background-color: #676767;  /* Add a dark-grey background on hover */
    }