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

body {   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;
        border-width: 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 {
        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: 22px;
        min-height: 22px;
        max-height: 22px;
        overflow: hidden;
        background: url('../images/flag.png') top center no-repeat;
        }

#toplogo {
        z-index: 61;
        display: block;
        margin: 30px 0 18px 0;
        height: 125px;
        min-height: 125px;
        max-height: 125px;
        overflow: hidden;    
        background: url('../images/apiculteur_a_vetheuil.png') center center no-repeat;
        }

    #toplogo a {
            display: block;
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            height: 100%;
            min-height: 100%;
            max-height: 100%;
            }

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

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

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

/* MENU */

#topmenu {
    display: block;
    z-index: 62;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    padding : 6px 0;
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    float: left;
    }


    #rezo {
        color: #0a0203;
        float: left;
        width: 13.5%;
        padding-right: 0.5%;
        text-align:right;
        }

    #topmenu .menu {        
        font-family: 'Mali', cursive;
        font-weight: 400;
        color: #0a0203;
        float: left;
        width: 86%;
    }

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

        #topmenu a:hover {
                color: #f47300;
        }

        #topmenu .select {
            color: #f47300;
            }

        #topmenu ul {
            list-style-type:none;
            width: 100%;
            min-height:24px;
            max-height:24px;
            margin: 0 auto;
            padding: 0;
            text-decoration: none;
            text-align: center;
            font-size: 15px;
                }

        #topmenu li {
            display: inline-block;
            height:24px;
            min-height:24px;
            max-height:24px;
            overflow: hidden;      
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            text-align: center;
                }

            @media screen and (max-width: 938px) {
                #topmenu ul {
                    text-align: center;
                        }
    
                #topmenu li {   
                    margin: 0 0 0 0;
                    padding: 0.4em 0 0 0;
                        }
            }

            .space {
                display: block;
                width: 6%;
                }

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

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

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

/* MOZAIC INDEX */

#mosaicindex {
    clear: both;
    z-index: 20;
    overflow: hidden;
    padding: 9px 0 0 0;
        }

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

    #mosaicindex .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;
    }

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

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

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

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

      #mosaicindex .card-tall {
        grid-row: span 1 / auto;
      }

      #mosaicindex .card-wide {
        grid-column: span 1 / auto;
      }
    }

    @media screen and (max-width: 1199px) {
      #mosaicindex .cardlast {
        display: none;
      }
    }


/* MOZAIC */

#mosaic {
    clear: both;
    z-index: 20;
    overflow: hidden;
    padding: 9px 0 0 0;
        }

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

    #mosaic .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;
    }

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

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

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

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

      #mosaic .card-tall {
        grid-row: span 1 / auto;
      }

      #mosaic .card-wide {
        grid-column: span 1 / auto;
      }
    }

    @media screen and (max-width: 1199px) {
      #mosaic .cardlast {
        display: none;
      }
    }

/* FOOTER */

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

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

    #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 {
            float: left;
            width : 40%;
            text-align: left;
                }

            #adresse i {
                position: relative;
                }

        #email {
            float: left;
            width : 30%;
            text-align: center;
                }

            #email i {
                position: relative;
                }

        #telephone {
            float: left;
            width : 30%;
            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;
            background-color: aquamarine;
            }

             #footcon .contenu #droits {
                position: relative;
                z-index: 83 !important;
                padding-top: 17px;
                float: left;
                width : 40%;
                text-align: left;
                }

             #footcon .contenu #mentions {
                position: relative;
                z-index: 85;
                padding-top: 17px;
                float: left;
                width : 30%;
                text-align: center;
                }

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