body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            /*background-color: #f4f4f4;*/
        }
        header {
            /* centered 1000px wide version */
            max-width: 920px;
            margin: 0 auto;

            background-color: white;
            color: black;
            /*
            padding: 20px;
            padding: 10px;
            position: relative;
            overflow: hidden;
            */
            /*
            display: flex;
            align-items: center;
            */
            /*
            justify-content: center;
            height: 200px;
            */
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            grid-column-gap: 10px;
            justify-items: center;
            font-family: sans-serif;
            font-size: 15px;
        }
        header h2 {
            font-family: cursive;
            font-size: 32px;
        }


        #heading {
            text-align: left;
            /*
            position: absolute;
            text-align: center;
            width: 100%;
            margin: auto auto;
            */
            grid-column-start: 2;
            /*
            width: 100%;
            margin-left: 20px;
            margin: auto auto;
            margin-top: auto;
            margin-bottom: auto;
            */
        }
        #logoimg {
            max-height: 200px;
            display: block;
            margin: 20px auto;
            /*
            margin-left: auto;
            margin-right: auto;
            */
            padding: 20px;
            background: white;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }
        #logotitle_p, #logotitle_i {
            /*
            position: absolute;
            */
            /*
            left: 0;
            */
            margin-right: auto;
            margin-top: auto;
            margin-bottom: auto;
            max-height: 200px;
            min-width: 100px;
            justify-self: start;
            object-fit: cover;  /* crop image on resize */
            height: 100px;
            width: 200px;
            object-position: center 50%;
            /*
            vertical-align: middle;
            display: block;
            margin: 20px auto;
            */
            /*
            margin: 20px 20px;
            margin-left: auto;
            margin-right: auto;
            */
            /*
            padding: 20px;
            background: white;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            */
        }

        nav {
            display: block;
            max-width: 800px;
            margin: 0 auto;

            text-align: center;
            justify-content: center;
            align-items: center;
            /*
            background-color: #0a9396;
            */
            background-color: black;
            border-radius: 25px;
            box-sizing: border-box;
            /*padding: 10px;*/
        }
        nav a {
            display: inline-block;
            color: white;
            text-align: center;
            text-decoration: none;
            margin: 0 15px;
            padding: 10px 15px; 
            font-size: 18px;
            box-sizing: border-box;
            background-color: transparent;
        }

        nav a:hover, .dropdown_menu:hover, .drop_btn:hover  {
            background-color: red;
            /* background-color: #005f73; */
        }

        /* dropdown_menu is not used for now (easier to use directly drop_btn) */
        .dropdown_menu {
            /*float: left;*/
            /* float: right; */
            /*overflow: hidden;*/
            margin-right: 20px;
        }

        .dropdown_menu, .drop_btn {
            display: inline-block;
            position: relative;
            color: white;
            font-size: 18px;
            /* margin: 0 0; */
            padding: 0 0;
            text-align: center;
            text-decoration: none;

            background-color: inherit;
            font-family: inherit;
            border: none;
            outline: none;
            margin: 0 15px;
            padding: 10px 0px;

            font-size: 18px;
            box-sizing: border-box;
        }

        .drop_content {
            display: none;
            position: absolute;
            width: 100%;
            margin-top: 10px;
            background-color: black;
            min-width: 150px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 0px 0px 25px 25px;
            box-sizing: border-box;
        }

        .drop_content a, .drop_content div{
            float: none;
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            margin: 0 0 0 0;
            box-sizing: border-box;
        }

        .drop_content a:hover, .drop_content #expand_tel:hover, .drop_content #expand_email:hover {
            background-color: darkred;
            border-radius: 0px 0px 25px 25px;
        }

        .drop_btn:hover .drop_content {
            display: block;
        }
        
        #drop_tel, #drop_email {
            display: none;
            position: absolute;
            left: 30%;
            width: max-content;
            margin 0;
            /*margin-left: 100%;*/
            background-color: #404040;
            color: white;
            /*min-width: 150px;*/
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 25px 25px 25px 25px;
            box-sizing: border-box;
        }

        #dropmenu_sep {
            text-align: center;
        }

        #expand_tel:hover #drop_tel{
            display: block;
        }
        #expand_email:hover #drop_email{
            display: block;
        }
        #expanded_tel_time {
            font-size:16px;
        }
        
        #drop_tel:hover, #drop_email:hover {
            color:black;
            background: white;
        }

        #drop_tel:hover  a {
            color: blue;
        }

        #drop_tel a:hover {
            color: white;
            border-radius: 25px 25px 25px 25px;
        }

        #drop_email:hover {
            color: blue;
        }

        .drop_content a, .drop_content div{
            float: none;
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            margin: 0 0 0 0;
            box-sizing: border-box;
        }


        .drop_btn:hover .drop_content {
            display: block;
        }

        #nav_sticky {
            position: sticky;
            top: 0px;
        }
        #doctolib_button1, #jameda_button1 {
            position:fixed;
            top:50%;
            right:10px;
            /*
            display:block;
            */
            display: none; /* disabled for now*/
            text-align:center;
            background-color:black;
            color:white;
            font-size:14px;
            width:100px;
            /*border-radius:4px 0 0 4px;*/
            border-radius: 12px;
            padding:10px;
            z-index:999;
            box-shadow:1px 2px 4px rgba(0,0,0,0.2);
            line-height:1.4;
        }

        /* differences from doctolib */
        #jameda_button1 {
            margin-top: 120px;
        }

        #doctolib_button1 a, #jameda_button1 a {
            display:block;
            text-decoration:none;
            padding:5px;
            margin-top:5px;
            border-radius:4px;
            background:white;
            color:black;
        }

        #doctolib_button1 a:hover, #jameda_button1 a:hover {
            background-color:red;
            color:white;
        }

        .container {
            border-radius: 25px;
            max-width: 800px;
            margin: 20px auto;
            /*margin-right: max(130px, calc((100vw - 820px)/2)); */
            padding: 20px;
            background: white;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            font-family: cursive;
            font-size: 24px;
        }
        .container h2 {
            font-family: sans-serif;
            font-size: 22px
        }

        #contact {
            font-family: sans-serif;
            font-size: 18px;
        }

        .opening-hours {
            font-family: sans-serif;
            font-size: 18px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }
        #opening-hours {
            position:fixed;
            top:40%;
            /*
            right:10px;
            */
            /*
            left: max(840px, calc(20px + 100% - (100% - 840px)/2));
            */
            right: 20px;
            display:block;
            text-align:center;
            background-color:white;
            color:black;
            font-size:14px;
            /*width:150px; */
            width: max-content;
            /*border-radius:4px 0 0 4px;*/
            border-radius: 12px;
            padding:10px;
            z-index:999;
            box-shadow:1px 2px 4px rgba(0,0,0,0.2);
            line-height:1.4;
            /*
               margin-top: 240px;
            */
        }

        #logo {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        footer {
            max-width: 800px;
            margin: 0 auto;

            text-align: center;
            padding: 10px;
            /*
            margin: 10px 0;
            */
            margin-top: 20px;
            color: white;
            background-color: black;
            border-radius: 25px;
        }
        footer a {
            color: white;
            margin: 10px 0;
            padding: 10px 0;
            text-decoration: none;
        }
        footer a:hover {
            background-color: red;
        }

        #map1 {
            background-size: cover;
            position: relative;
            overflow: hidden;
            /*padding-top: 76.25%;  16:9  */
            /* padding-top: 400px;*/
            height: 400px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* display: table-cell;
               vertical-align: middle;
             */
        }
        #map1 iframe {
            position: absolute;
            top 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #map1 img {
            object-fit: cover;  /* crop image on resize */
        }

        /* small screen changes: if no space for opening-hours
           stop centering and align to left*/
        @media(max-width: 1228px) {
            header, .container {
                margin-left: 10px;
            }
            nav, footer {
                margin-left: 30px;
            }
        }
        /* even smaller screen: show opening hours inline
           in a normal "container" */
        @media(max-width: 1048px) {
            #opening-hours {
                /*display:none;*/
                position: revert;
                top: revert;
                right: revert;
                display: revert;
                text-align: revert;
                border-radius: 25px;
                max-width: 800px;
                margin-top: 20px;
                margin-bottom: 20px;
                /*margin: 20px auto;*/
                width: revert;
                /*
                   width: max-content;
                   margin-left: max(0px, calc((100vw - 840px)/2));
                */
                padding: 20px;
                font-family: sans-serif;
                font-size: 18px;
            }
        }
        @media(max-width: 860px) {
            #doctolib_button1 {
                left: 10px;
                right: auto;
                top: auto;  /* or initial */
                bottom: 145px;
                font-size: 12px;
            }
            #jameda_button1 {
                left: 10px;
                right: auto;
                top: auto;  /* or initial */
                bottom: 45px;
                font-size: 12px;
            }
        }

        /* really small screen, change heading
           to display the logo centered and not in
           the same line with the title
        */
        @media(max-width: 600px) {
            header {
                grid-template-columns: 1fr;
            }
            #heading {
                grid-column-start: 1;
                text-align: center;
            }
            #logotitle_p, #logotitle_i {
                max-height: 150px;
                min-width: 80px;
                margin-left: auto;
            }
        }