html {
    scroll-behavior: smooth;
}

body {
    background-image: url("gfx/wallpaper_big.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    z-index: 1;
    margin: 0px;
    padding: 0px;
    font-size: 1.2em;
    line-height: 1.6em;
    scroll-behavior: smooth;
    text-rendering: geometricPrecision;
}





/* JOBS */
mark {
  background-color: red;
  color: white;
}
  



/* normal text */
@font-face {
    font-family: just_sans;
    src: url("Arimo_variable.ttf");
}

/* headings */
@font-face {
    font-family: just_sans_bold;
    src: url("Arimo_variable.ttf");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'just_sans';
    color: #31353a;
}



/* top panel */
header {
    width: 100%;
    margin: 0;
    float: left;
    background-image: linear-gradient(#ffffff 88%, #bbbbbb);
    padding: 0px 3% 0px 3%;
    position: fixed;
    top: 0;
    border-bottom: 1px solid #b3b3b3;
    z-index: 80;
}



/* Apo-Logo */
.brand-logo {
    max-width: 325px;
    float: left;
    margin: 5px 0px 0px 0px;
}

.brand-logo img {
    max-width: 325px;
    transition: 0.7s ease-out;
}



/* Menue */
.navigation {
    margin: 0px;
    float: right;
}

.navigation li {
    list-style: none;
    float: left;
}

.navigation li a {
    font-family: just_sans;
    color: #161c22;
    padding: 30px 20px;
    text-align: center;
    display: block;
    text-decoration: none;
    font-size: 1.2rem;
}


.navigation li a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
    color: #2d3946;
    text-decoration: underline;
    text-decoration-color: #006ab1;
    text-underline-offset: 0.4em;
    text-decoration-thickness: 2px;
}



/* hide and show menü button */
.show-menu-btn,
.hide-menu-btn {
    transition: 0.4s;
    cursor: pointer;
    display: none;
    margin: 0px;
}

#toggle-btn {
    position: absolute;
    visibility: hidden;
    z-index: -1111;
}

/* Submenue */
.dropdown-content {
    visibility: hidden;
    position: absolute;
    margin-top: -10px;
    margin-left: -28px;
    padding: 5px;
    background-color: #fdfdfd;
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-align: left;
    opacity: 0;
    transition: 0.5s;
    border-radius: 0px 0px 10px 10px;
}

.dropdown .dropdown-content a {
    font-size: 0.8em;
}

.dropdown-content .sublink {
    padding: 7px 5px;
}

.dropdown:hover .dropdown-content {
    transition: 0.5s;
    opacity: 1;
    visibility: visible;

}

/* Home Icon */
.homebutton {
    width: 24px;
    filter: brightness(0.8);
    transition: 0.1s;
}

.homebutton:hover {
    width: 24px;
    transform: scale(1.3);
    transition: 0.1s;
    filter: brightness(1.3);
}



/* Header and Slider Frame */
.content {
    z-index: -1;
    width: 100%;
    padding: 0px;
    margin-top: 150px;
}

/* image slider */
#demo1 {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0px;
}




/* surrounds each page topic and holds the square field */
.block {
    width: 100%;
    padding: 5% 16% 5% 16%;
    margin-bottom: 0px;
    background-image: url("gfx/background.jpg");
    z-index: -1;
    border-bottom: 40px solid #ff0000;
    border-top: 40px solid #00538a;
    box-shadow: 0px 5px 15px #000000d3;
}

/* formats the topic content */
.square {
    border: 1px solid #dddee2ec;
    background-color: #d0d2d87e;
    padding: 40px 75px 30px 75px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #7e7f813f;
}

/* responsive content box half-width */
.halfwidth {
    width: 45%;
    margin-right: 4%;
    display: inline-block;
    vertical-align: text-top;
}

.halfwidth2 {
    width: 45%;
    margin-left: 4%;
    display: inline-block;
    vertical-align: text-top;
}

/* Background of Content Box */
.fillcolor {
    background-color: #ffffff;
    padding: 60px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 2rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
}

.fillcolor a h3:hover {
    background-color: #00538a;
    color: #ffffff;
    text-shadow: 0px;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.fillcolor h3 {
    display: inline;
}

.postpic {
    width: 80%;
}




/* Headings */
h1 {
    font-family: just_sans_bold;
    background-image: linear-gradient(180deg, #0064ac, #004879);
    color: #fff;
    text-shadow: 1px 1px 0px #002c49;
    border-radius: 0.6rem;
    text-align: center;
    padding: 20px;
    margin-bottom: 80px;
    margin-top: 50px;
    width: 100%;
    font-size: 1.9rem;
}

h2 {
    font-family: just_sans_bold;
    color: #00538a;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    clear: both;
    line-height: 2rem;
    text-align: center;
}

h3 {
    font-family: just_sans_bold;
    font-size: 1.5rem;
    color: #00538a;
    line-height: 4rem;
}


h4 {
    font-family: just_sans_bold;
    margin-bottom: 0.4rem;
}



/* paragraphs in the content */
p {
    margin-bottom: 1rem;
}

/* bold text in the content */
b {
    line-height: 2rem;
    text-shadow: 0px;
}

/* ul lists in the content */
.ulcon { display: block;}
.ulcon li {
    color: #1b6396;
    list-style-type: square;
    list-style-position: outside;
    margin-left: 25px;
    line-height: 2rem;
    font-size: 0.9 rem;
}



/* spacer between topic-boxes */
.separator {
    height: 600px;
    clear: both;
}



/* hyperlinks */
a {
    color: #c00000;
    text-decoration: underline;
}

a:hover {
    color: #e20000;
    text-decoration: underline #af0000;
}

/* Blak Button Notdienst */
.nd_btn:hover {
    filter:drop-shadow(0 0 2px #dedede);
}



/* Cookie Overlay Div */
#mbmcookie {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: linear-gradient(#fcfcfd 65%, #e5e6eb);
    border-radius: 10px;
    border: 1px solid #000000;
    padding: 2%;
    z-index: 1000;
}

#mbmcookie a.button {
    cursor: pointer;
    background-image: linear-gradient(180deg, #0064ac, #004879);
    color: #eeeeee;
    padding: 10px 20px;
    margin-bottom: 10px;
    margin-right: 15px;
    border-radius: 10px;
    float: right;
    z-index: 1000;
    border: 0px;
    box-shadow: 1px 1px 3px #00000077;
    text-shadow: 1px 1px 1px #002b47;
}

#mbmcookie a.button:hover {
    background-image: linear-gradient(180deg, #007ed8, #0062a3);
    color: #ffffff;
    text-decoration: none;
}

#mbmcookie p.cookiemessage {
    display: block;
    padding: 0;
    margin: 0;
    z-index: 1000;
}

input[type=checkbox] {
    transform: scale(1.6);
    margin-left: 5px;
    margin-right: 10px;
}

#overlayDiv {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: #000;
    color: #fff;
    opacity: .80;
}

#overlayDiv p {
    display: none;
}

#pageDiv {
    position: relative;
    z-index: 100;
}



/* adress bar under slider */
.fdaten {
    background-image: linear-gradient(#dddddd, #ffffff 25%, #ffffff 75%, #bbbbbb);
    border-top: 1px solid #ffffff;
    border-bottom: 2px solid #8a8a8a;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    padding: 10px;
    position: relative;
}

.eintrag {
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    padding: 0px 30px 0px 30px;
    font-size: 0.8em;
}




/* piktograms with hover effect in the index-page */
.piktogramm {
    float: left;
    width: 18%;
    margin-right: 40px;
    margin-bottom: 100px;
    filter: saturate(0.6);
    transition: 0.2s;
}

.piktogramm:hover {
    transition: transform 0.4s;
    transform: rotate(-10deg);
    filter: saturate(1);
}

/* larger pictograms in the sub-sites */
.boxpic_responsive {
    width: 20%;
    margin-left: 35px;
    margin-right: 25px;
    float: right;
}


/* div for the location sliders or half width images */
.locpic {
    border: 1px solid #aeb2b4b9;
    box-shadow: 0px 0px 12px #8e9294;
    border-radius: 4px;
    float: right;
    width: 50%;
    margin-left: 50px;
    margin-top: 20px;
    transition: 0.3s linear;
}

/* style for wide images like the team pictures */
.pic {
    border: 1px solid #aeb2b4b9;
    box-shadow: 0px 0px 12px #8e9294;
    border-radius: 4px;
}

/* qm image in the impressum */
.qm_img {
    margin: 25px;
    border: 1px solid #e7e8f0;
    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
}

/* Manufacturer Pictures Seni, Tena etc */
.img_hersteller {
    display: inline-block;
    width: 150px;
    padding: 5px;
    margin: 20px;
    background-color: #838d941c;
    border: 1px solid #838d9423;
    border-radius: 25px;
}

/* Medizini, ApothekenUmschau etc. */
.img_zeitschrift {
    display: inline-block;
    width: 250px;
    padding: 10px;
    margin: 40px;
    background-color: #838d941c;
    border: 1px solid #838d9423;
    border-radius: 5px;
}

.img_zeitschrift:hover,
.img_hersteller:hover {
    box-shadow: 0px 0px 20px #6f828f8e;
}



/* style meineApotheke logo */
.img_myapo {
    margin: 25px;
    border: 1px solid #e7e8f0;
    width: 40%;
    display: block;
    border-radius: 5px;
}

.img_aponet_qr {
    margin-top: 20px;
    border: 1px solid #e7e8f0;
    width: 25%;
    display: inline-block;
    border-radius: 5px;
}



/* to top arrow */
#totop {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 99;
    display: none;
    width: 50px;
    transition: 0.4s;
    animation-name: arrowanim;
    animation-duration: 1.5s;
}

#totop:hover {
    filter: brightness(110%);
    transform: scale(1.2);
}

@keyframes arrowanim {
    0% { transform: scale(0.3);}
    80% { transform: scale(0.9);}
    90% { transform: scale(0.5);}
    100% { transform: scale(1);}
}



/* copyright text */
.copyright {
    background-color: #ffffff;
    color: #454555;
    text-align: center;
    font-size: 0.5em;
}

/* Footer picture wave */
.img_footer {
    background-color: #ffffff;
    z-index: -1;
    width: 100%;
    padding: 0px;
    border-top: 75px solid #ffffff;
    border-bottom: 30px solid #ffffff;
}



/* Browser Scrollbar */
body::-webkit-scrollbar {
    width: 18px;    /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
    background: #ffffff;    /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
    background-color: #e30613;  /* color of the scroll thumb */
    border-radius: 10px;    /* roundness of the scroll thumb */
    border: 3px solid #f8f8f8;  /* creates padding around scroll thumb */
}




















/* Responsive CSS << 1650px */
/* ------------------------ */
@media screen and (max-width:1650px) {

    .navigation li a {
        font-family: just_sans;
        color: #636d7e;
        padding: 30px 15px;
        text-align: center;
        display: block;
        text-decoration: none;
        font-size: 1.2rem;
    }
}
















/* Responsive CSS << 1440px */
/* ------------------------ */

@media screen and (max-width:1440px) {

    body {
        background-image: url("gfx/wallpaper_medium.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        font-family: just_sans;
    }

    header {
        width: 100%;
    }

    #demo1 {
        width: 100%;
        height: 100%;
    }



    /* logo */
    .brand-logo,
    .brand-logo img {
        max-width: 250px;
    }



    /* menue bar */
    .navigation {
        position: fixed;
        width: 100%;
        height: 150vh;
        background-image: linear-gradient(270deg, #ffffff 70%, #cccccc);
        top: -300%;
        left: 0;

        transition: 1.2s;
    }

    .navigation li {
        width: 100%;
    }

    .navigation li a {
        padding: 5px 25px;
        font-size: 18px;
        text-align: center;
    }

    .navigation li a i {
        width: auto;
        font-size: 44px;
    }

    #toggle-btn:checked~nav .navigation {
        top: 0px;
    }

    .show-menu-btn,
    .hide-menu-btn {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
    }

    .show-menu-btn i,
    .hide-menu-btn i {
        line-height: 80px;
        font-size: 44px;
    }

    .dropdown-content {
        position: relative;
        transition: 0.5s;
        opacity: 1;
        visibility: visible;
        margin: 0px 10% 20px 10%;
        background-color: transparent;
        box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.1);
    }

    .dropdown .dropdown-content a {
        font-size: 0.8rem;
    }



    /* content box */
    .content {
        margin-top: 118px;
    }

    .block {
        padding: 2%;
        margin: 0px;
        background-image: url("gfx/background.jpg");
    }

    .square {
        padding: 30px 50px 100px 50px;
        margin: 4% 10% 4% 10%;
    }

    /* full width layer */
    .halfwidth {
        width: 45%;
        margin-right: 2%;
        display: inline-block;
        vertical-align: text-top;
    }

    .halfwidth2 {
        width: 47%;
        margin-left: 5%;
        display: inline-block;
        vertical-align: text-top;
    }

    .fillcolor {
        padding: 30px;
    }



    /* star action */
    .astar {
        position: absolute;
        top: 20px;
        right: 150px;
        width: 25%;
    }



    /* Piktogramme */
    .piktogramm {
        width: 20%;
        margin-right: 25px;
    }





    /* pictures for the side */
    img {
        max-width: 100%;
    }

    .img_myapo {
        width: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .img_aponet_qr {
        display: none;
    }

    .img_zeitschrift {
        width: 50%;
        margin-top: 50px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


    /* headers */
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.3rem;
    }


    .bar {
        width: 90%;
    }


    /* adressline */
    .fdaten {
        padding: 15px;
    }

    .eintrag {
        text-align: center;
        padding: 4px 10px 4px 10px;
    }



    /* paragraph */
    p {
        line-height: 1.7rem;
    }



    /* Manufacturer Pictures */
    .img_hersteller {
        width: 175px;
        padding: 20px;
    }



    /* space between boxes */
    .separator {
        height: 375px;
    }



    /* top arrow */
    #totop {
        bottom: 10px;
        right: 10px;
        width: 7%;
    }



    /* footer picture */
    .img_footer {
        display: none;
    }

}















/* Responsive CSS << 800px for Smartphone */
/* -------------------------------------- */

@media screen and (max-width:800px) {


    body {
        background-image: url("gfx/wallpaper_small.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        font-family: just_sans;
        font-size: 0.8em;
        line-height: 1.5em;
    }

    header {
        width: 100%;
    }

    #demo1 {
        width: 100%;
        height: 100%;
    }


    /* logo */
    .brand-logo,
    .brand-logo img {
        max-width: 200px;
        margin: 0px;
        padding: 0px;
    }



    /* menue bar */
    .navigation {
        position: fixed;
        width: 100%;
        /*height: 130vh;*/
        background: #ffffff;
        background-image: linear-gradient(270deg, #ffffff 70%, #cccccc);
        top: -300%;
        left: 0px;
        padding: 50px 0px;
        transition: 1s ease-out;
    }

    .navigation li {
        width: 100%;
    }

    .navigation li a {
        padding: 5px 15px;
        text-align: center;
        font-size: 1.5em;
        line-height: 2.0em;
    }

    .navigation li a i {
        width: auto;
        font-size: 44px;
    }

    #toggle-btn:checked~nav .navigation {
        top: 0px;
    }

    .show-menu-btn,
    .hide-menu-btn {
        display: block;
        position: absolute;
        top: 15px;
        right: 30px;
    }

    .show-menu-btn i,
    .hide-menu-btn i {
        line-height: 80px;
        font-size: 22px;
    }

    /* Submenue */
    .dropdown-content {
        line-height: 0.9rem;
        padding: 5px;
    }

    /* content box */
    .content {
        margin-top: 90px;
        width: 100%;
    }

    .block {
        padding: 0%;
        margin: 0px;
        width: 100%;
        background-image: url("gfx/background.jpg");
        background-size: 500px;
    }

    .square {
        padding: 20px 0px 20px 0px;
        margin: 0px;
        box-shadow: 0px 0px 0px;
        border: 0px;
        width: 100%;
    }

    .halfwidth {
        width: 100%;
        margin: 0%;
    }

    .halfwidth2 {
        width: 100%;
        margin: 0%;
        margin-top: 30px;
    }

    .fillcolor {
        padding: 25px;
        border-radius: 0rem;
        width: 100%;
    }

    .postpic {
        width: 100%;
    }



    /* Piktogramme */
    .piktogramm {
        clear: both;
        display: block;
        width: 33%;
        margin-top: 15px;
        margin-bottom: 25px;
        margin-left: 33%;
        margin-right: 33%;
    }

    .boxpic_responsive {
        display: block;
        width: 50%;
        margin-left: 23%;
        margin-right: 22%;
        margin-bottom: 25px;
    }



    /* pictures for the side */
    img {
        max-width: 100%;
    }

    .img_myapo {
        width: 75%;
    }

    .img_aponet_qr {
        display: none;
    }

    .img_zeitschrift {
        width: 75%;
    }



    /* headers */
    h1 {
        font-size: 1.1em;
        margin-top: 30px;
        margin-bottom: 0px;
        margin-right: 10px;
        font-weight: bold;
        padding: 15px;
        border-radius: 3px;
    }

    h2 {
        font-size: 1.0rem;
        margin: 1.2em;
        line-height: 1.2em;
    }

    h3 {
        font-size: 0.9rem;
        margin-top: 1rem;
        margin-bottom: 0.6rem;
        line-height: 1.2em;
    }



    /* adressline */
    .fdaten {
        padding: 10px;
        margin: 0px;
        margin-top: 0px;
        line-height: 14px;
    }

    .eintrag {
        font-size: 0.7rem;
    }

    .eintrag a {
        font-size: 0.7rem;
    }



    /* paragraph */
    p {
        line-height: 1.3em;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    /* bold text in the content */
    b {
        line-height: 1.3rem;
    }

    /* ul lists in the content */
    .ulcon li {
        margin-left: 10px;
        line-height: 1.5rem;
    }


    /* Manufacturer Pictures */
    .img_hersteller {
        width: 28%;
        padding: 1%;
        margin: 2%;
    }



    /* location Picture */
    .locpic {
        width: 100%;
        margin-bottom: 25px;
        clear: both;
    }

    .qm_img {
        width: 60%;
    }


    /* space between content boxes */
    .separator {
        height: 375px;
    }



    /* top arrow */
    #totop {
        bottom: 25px;
        right: 25px;
        width: 15%;
    }


    /* footer picture */
    .img_footer {
        display: none;
    }

    #mbmcookie {
        top: 50%;
        left: 50%;
        width: 90%;
        /*transform: translate(-10%, -10%);*/
        background: #ffffff;
        font-size: 1rem;
        padding: 2%;
        z-index: 1000;
    }
}