* {
    box-sizing: border-box;
}

.clearer {
    clear: both;
}
/* All Images*/
img {
        box-shadow: 2px 2px 6px 0 rgba(0,0,0,.2);
}
/*Bootstrap Container*/
.container {
        box-shadow: 2px 2px 6px 0 rgba(0,0,0,.2);
}

/*change colors by hovering */
a:hover {
    color: #cd0405; 
}
/*all links are white*/
a {
    color: white;
    text-decoration: none;
}
/*class for text left*/
.left {
    text-align: left
}
/*Navbar right color and word spacing*/
.navbuttons {
    color: white;
    display: block;
    word-spacing: 35px;
    font-size: 125%;
    padding-right: 25px;
}
/*navbar links*/
.navbuttonslinks {
    color: white;
    text-decoration: none;
    padding: 16px;
}
/*Sparlogo nav*/
.navbarimg {
    max-width: 150px;
    max-height: 15%;
}
/*Box for the Spar-Logo and the Translate Button*/
.nav_translate_logo{
    float: left;
}
/*Nav Shadow*/
nav {
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,.2);
    font-family: 'Source Sans Pro', sans-serif;
}
/*Copyrighttag David and Gabriel*/
.copyrightbottomline {
    font-weight: normal;
    text-align: center;
}
/*footer shadow*/
.footercontainershadow {
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,.2);
}
/*icon hover footer*/
.iconhover:hover {
    color: #cd0405;
}
/*line between icons*/
.icons {
    float: left;
    width: 100px;
    box-sizing: border-box;
}
/*instagram icon*/
.instagramicon {
    float: left;
    width: 100px;
    box-sizing: border-box;
    margin-left: auto;
}
/*Google Icon*/
.googleicon {    
    float: left;
    width: 100px;
    box-sizing: border-box;
    margin-right: auto;
}
h1{
    font-size: 60px;
    font-family: 'Assistant', sans-serif;
    padding: 20px
}
h2{
    color: black; /*color: #e42332;*/
    font-family: 'Source Sans Pro', sans-serif;
}
/*Text AGB*/
.textAgbDsUsw{
    padding-left: 5%;
    color: black;
    font-size: 125%;
}
/*Background-Container color*/
.otherbg{
    background-color: #ADADAD;
}
/*Background-Container color*/
.otherbgRed{
    background-color: #cd0405;
}




/*Translate Dropdown-Menu*/
.dropbtntranslate {
    border: none;
    background-color: #212529;
    color: white;
    margin: 5px;
    margin-left:10px;
    margin-right:10px;
    width: 80%;
}
/* Hover Dropdown main Button*/
.dropbtntranslate:hover{
    color: #cd0405;
}
/* Show the dropdown menu on hover */
.dropdowntranslate:hover .dropdowntranslate-content {
    display: block;
}
/* The container <div> - needed to position the dropdown content */
.dropdowntranslate {
    display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdowntranslate-content {
    display: none;
    position: absolute;
    background-color: #212529;
    min-width: 10px;
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,.2);
    z-index: 1;
    text-align: center;
    font-weight: bold;
}
/* Links inside the dropdown */
.dropdowntranslate-content a {
    color: white;
    margin: 12px 16px;
    text-decoration: none;
    display: block;
}
/* Change color of dropdown links on hover */
.dropdowntranslate-content a:hover {
    color: #cd0405;
}




/*Nav-Buttons Home,etc*/
.dropbtnnav {
    border: none;
    background-color: #212529;
    color: white;
    margin: 5px;
}
/* Hover Dropdown main Button*/
.dropbtnnav:hover{
    color: #cd0405;
}
/* Show the dropdown menu on hover */
.dropdownnav:hover .dropdownnav-content {
    display: block;
}
/* The container <div> - needed to position the dropdown content */
.dropdownnav {
    display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdownnav-content {
    display: none;
    position: absolute;
    background-color: #212529;
    min-width: 100px;
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,.2);
    z-index: 1;
    text-align: left;
}
/* Links inside the dropdown */
.dropdownnav-content a {
    color: white;
    margin: 12px 16px;
    text-decoration: none;
    display: block;
}
/* Change color of dropdown links on hover */
.dropdownnav-content a:hover {
    color: #cd0405;
}





/* Picture of the quote*/
.quoteimg {
    max-width: 100%; 
    border-radius: 40px;
    margin-bottom: 3%;
    margin-top: 3%;
}
/*Box for the imgae at the quote*/
.quoteimgbox {
    flex: 30%;
    float: right;
}
/*Box for the Text of the quote*/
.quotetextbox {
   flex: 80%;
}
/* Text of the Josef Mark quote*/
.intelligentquote {
    font-size: 160%;
    padding: 20px;
    width: 100%;
    padding-top: 50px;
}
/*Josef Mark quote*/
.josefmarkquote{
    font-weight: bold;
    font-size: 300%;
}
/*Rotats the 2. quote*/
.rotatequote {
    transform: rotate(180deg)
}
/*Download Button*/
.downloadbtnsepa {
    background-color: white;
    border: none;
    color: #cd0405;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 20px;
    width: 300px;
    height: 55px;
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,.2);
}
/* Darker background on mouse-over */
.downloadbtnsepa:hover {
    background: #cd0405;
    color: white;
}
/*Download Button AGB*/
..downloadbtnagb {
    background-color: white;
    border: none;
    color: #cd0405;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 20px;
    width: 325px;
    height: 55px;
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,.2);
}
/* Darker background on mouse-over */
.downloadbtnagb:hover {
    background: #cd0405;
    color: white;
}
/*Download Button Nutzungsbedingungen*/
.downloadbtnnb {
    background-color: white;
    border: none;
    color: #cd0405;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 20px;
    width: 400px;
    height: 55px;
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,.2);
}
/* Darker background on mouse-over */
.downloadbtnnb:hover {
    background: #cd0405;
    color: white;
}

/*Downloadbox centred*/
.downloadbtnbox {
    text-align: center;
}
/*Instagrampost 
.instagrampost {
    padding-left: 30px;
    padding-top: 15px;
    padding-bottom: 7px;
} */
.instafeed-container {
   min-height: 200px;
}
/*Karriere h2*/
.karriereh2 {
    font-size: 300%
}
.textkarriere {
    padding-left: 5%;
    color: black;
    font-size: 175%;
}



.allergene_A {
    float: left;
    width: 10px;
}
.allergene_B {
    float: right;
    width: 10%;
}
.flex_boxen {
    display: flex;
}
/*Sepamandat box*/
.sepa_mandat_box_text {
    padding: 5%;
    color: black;
    font-size: 150%;
    flex: 70%;
}
.sepa_mandat_box_bild {
    flex: 30%;
    padding: 2%;
}
/*Sepa Mandat Card Picture*/
.sepa_mandat_img {
    width: 100%;
    border-radius: 40px;
}
/*Phone  view*/
@media only screen and (max-width: 800px) {
    .flex_boxen {
        flex-direction: column;
    }
    html {
        font-size: 130%;
    }
    .container {
        background: ;
    }
    h1 {
        font-size: 200%;
    }
    h2 {
        font-size: 175%;
    }
    #nav-placeholder {
        text-align: center;
    }
    /* Picture of the quote*/
    .quoteimg {
        border-radius: 0;
    }
    .navbuttons {
        color: white;
        text-align: center;
        word-spacing: ;
        font-size: 150%;
        padding-right: 0px;
    }
    .navbarimg {
        display: none;
    }
    .sepa_mandat_img {
        width: 100%;
        border-radius: 0;
    }
     /* Links inside the dropdown */
    .dropdowntranslate-content a {
        font-size: 120%;
    }
}