html {
        width: 100%;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
        overflow-y: scroll;
        background-color: #FFF;
        color: #0a0203;
        }

body {  background-color: #FFF;
        /* background-image:
        url('../images/fond_fleurs_printemps_bd.png'), url('../images/fond_fleurs_verger_hg.png'), url('../images/fond_abeille_hd.png');
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position:  bottom right, top left, top right;*/
    
    
}

body,div,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,table,table-cell,legend,input,button,textarea,p,blockquote,th,td,a {
        margin: 0;
        padding: 0;
        }

    a:link {
            color: #f47300;
            text-decoration:none;
            }

    a:hover {
            color: #0a0203;
            text-decoration: underline;
    }

    a:visited {
        color: inherit;
        text-decoration: inherit;
    }

    a:active {
        color: inherit;
        text-decoration: inherit;
    }

#global {
        width: 100%;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
        }

.contenu {
        z-index: 59;
        margin: 0 auto;
        }

    @media screen and (min-width: 1770px) {
        .contenu {                width: 60%;                }
    }

    @media screen and (max-width: 1769px) {
        .contenu {                width: 64%;                }
    }

    @media screen and (max-width: 1559px) {
        .contenu {                width: 74%;                }
    }

    @media screen and (max-width: 1339px) {
        .contenu {                width: 84%;                }
    }

    @media screen and (max-width: 1199px) {
        .contenu {                width: 98%;                }
    }

/* HEADER */

#header {
        z-index: 60;
        display: block;
        height: fit-content;
        }


#tophead {
        z-index: 63;
        display: block;
        height: 20px;
        min-height: 20px;
        max-height: 20px;
        overflow: hidden;
        background: url('../images/flag.png') top center no-repeat;
        }


#toplogo {
        z-index: 64;
        display: block;
        margin: 18px 0 8px 0;
        height: 100px;
        min-height: 100px;
        max-height: 100px;
        background: url('../images/apiculteur_a_vetheuil.png') center center no-repeat;
        background-size: contain;
        font-family: "Ms Madi", cursive;
        }

    #toplogo span {
            float: right;
            color: #f47300;
            padding-top: 16px;
            }

        #toplogo span a:hover {
            color: #0a0203; 
            }

    .material-icons.md-38 { font-size:24px; }

/* MENU */

#topmenu {
    z-index: 1000 !important;
    position: relative;
    clear: both;
    display: block;
    float: left;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding-bottom: 8px;
    padding-top: 70px;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif !important;
    color: #0a0203;
    text-transform: uppercase !important;
}

    #topmenu .menu {
        display: block;
        z-index: 2000 !important;
        font-family: 'Quicksand', sans-serif;
        color: #0a0203;
        float: left;
        width:50%;
    }

        #topmenu i {
            position: absolute;
            bottom: 0;
            left: 2px;
            z-index: 2100 !important;
            width: 32px !important;
            float: left;
            font-size: 34px !important;
            }

        #topmenu ul {
            z-index: 2400 !important;
            list-style-type:none;
            display: block;
            float: left;
            margin: 0;
            padding: 0;
            text-decoration: none;
         }

        #topmenu ul li {
            z-index: 2700 !important;
            float: left;
            min-height:100%;
            max-height:100%;
         }

        #topmenu ul li ul {
            z-index: 3000 !important;
            top : 36px;
            left: 0px;
            min-height:242px;
            max-height:242px;
                visibility: hidden;
                opacity: 0;
                transition: visibility 0s, opacity 0.25s linear;
            min-width: 180px;
            text-align: left;
            background-color: #FFF;
            right:10px;
            position:relative;
            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
            border-top: 1px rgba(0, 0, 0, 0.2) solid;
         }

        #topmenu ul li:hover ul {
            display: block;
                visibility: visible;
                opacity: 1;
         }

        #topmenu li:hover ul li {
            float:none;
         }

        #topmenu ul li ul li {
            z-index: 3100 !important;
            display:block !important;
            min-height: 18px;
            border: 0 !important;
        }

        .selectedli {
            z-index: 3105 !important;
            display: block;
            width: 100%;
            min-height: 16px;
            padding: 8px 0 8px 18px !important;
            border: 0 !important;
            color: #f47300;            
         }

        #topmenu .menu ul li ul li a {
            z-index: 3105 !important;
            display: block;
            width: 90%;
            min-height: 16px;
            padding: 8px 0 8px 9px !important;
            border: 0 !important;
            text-decoration: none;
         }


    #rezo {
        display: block;
        bottom: 0;
        right: -2px;
        z-index: 1999 !important;
        font-family: 'Quicksand', sans-serif;
        color: #0a0203;
        float: left;
        width:50%;
        }

        #rezo ul {
            display: block;
            position: absolute;
            float: right;
            bottom:4px;
        }

        #rezo a:link {
                color: #0a0203;
                text-decoration:none;
                }

        #rezo a:hover {
                color: #f47300;
                text-decoration: underline;
        }

        #rezo a:visited {
            color: inherit;
            text-decoration: inherit;
        }

        #rezo a:active {
            color: inherit;
            text-decoration: inherit;
        }

/* MOZAIC */

#mosaic {
    clear: both;
    z-index: 20;
        }

    .image-mosaic {
      display: grid;
      gap: 0.25em;
      grid-template-columns: repeat(auto-fit, minmax(4em, 1fr));
      grid-auto-rows: 5em;
    }

    .card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #FFF;
      font-size: 3em;
      color: #FFF;
      /*box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;*/
      height: 100%;
      width: 100%;
      border-radius: 0.1em;
      transition: all 500ms;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 0;
      margin: 0;
    }

      .card-tall {
        grid-row: span 2 / auto;
      }

      .card-wide {
        grid-column: span 2 / auto;
      }


/* FOOTER */

#footer {
    clear: both;
    display: block;
    z-index: 30;
    width: 100%;
    min-width: 100%;

    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    padding-top: 24px;
    }

    #footcoo {
        z-index: 67 !important;
        display: block;
        width: 100%;
        min-width: 100%;
        background-color: rgba(200, 200, 200, 0.2);
        color: #0a0203;
        overflow: hidden;
        padding: 8px 0;
        }

        #footer #footcoo a:link {
                color: #0a0203;
                text-decoration:none;
                }

        #footer #footcoo a:hover {
                color: #f47300;
        }

        #footcoo .contenu {
            z-index: 81 !important;
            clear: both;
            }

        #adresse {
            width : 100%;
            text-align: center;
                }

            #adresse i {
                position: relative;
                }

        #email {
            float: left;
            width : 62%;
            padding-left: 2%;
            text-align: center;
                }

            #email i {
                position: relative;
                }

        #telephone {
            float: left;
            width : 34%;
            padding-right: 2%;
            text-align: right;
                }

            #telephone i {
                position: relative;
                }

    #footcon {
        z-index: 68 !important;
        display: block;
        width: 100%;
        min-width: 100%;
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        background-color: #f47300;
        color: #FFF;
        overflow: hidden;
        }

        #footer #footcon a:link {
                color: #FFF;
                text-decoration:none;
                }

        #footer #footcon a:hover {
                color: #0a0203;
                text-decoration:none;
        }

        #footcon .contenu {
            z-index: 82 !important;
            clear: both;
            }

             #footcon .contenu #droits {
                position: relative;
                z-index: 83 !important;
                padding-top: 6px;
                width : 100%;
                text-align: center;
                }

             #footcon .contenu #mentions {
                position: relative;
                z-index: 85;
                width : 100%;
                text-align: center;
                }

             #footcon .contenu #reseaux {
                position: relative;
                z-index: 87;
                width : 50%;
                float: left;
                font-family: 'Medias_Sociaux';
                text-align: right;
                color: #FFF;
                font-size: 36px;
                }