@charset "utf-8"; @media (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family: 'mielicon-2regular';
        src: url('font-Mielicon/mielicon_v2-webfont.svg#mielicon-2regular') format('svg');
    }
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    font-size: 62.5%
}

body {
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    font-family: 'Cabin',sans-serif;
    font-size: 1.4em;
    color: #a09ba0;
    position: relative;
    overflow-x: hidden;
    height: 100%;
    font-size: 1.4em
}

img {
    border: none;
}

a img {
    border: none;
}

#lienTop {
    position: absolute;
    z-index: 1000;
    left: 1%;
    top: 20px;
}

#lienTop a {
    padding-left: 18px;
    min-height: 12px;
    margin-right: 17px;
    transition: all .3 ease-in-out;
    -moz-transition: all .3 ease-in-out;
    -ms-transition: all .3 ease-in-out;
    -webkit-transition: all .3 ease-in-out;
    -o-transition: all .3 ease-in-out;
}
#lienTop a:nth-child(3) {
     margin-right: 0;
}
#lienTop a:last-child {
    padding-left: 0;
}

#lienTop a:hover {
    transition: all .3 ease-in-out;
    -moz-transition: all .3 ease-in-out;
    -ms-transition: all .3 ease-in-out;
    -webkit-transition: all .3 ease-in-out;
    -o-transition: all .3 ease-in-out
}

#header {
    position: relative;
    z-index: 50;
    height: 30%;
    margin: 0 auto;
    display: none;
}

#header #imgLoading {
    background-color: #fff;
    background-image: url(img/bgLoader.png);
    background-position: center 150%;
    background-repeat: no-repeat;
    text-align: center;
    margin: 0 auto;
    height: 78%;
    padding: 0;
}

#header #imgLoading img {
    min-height: 100%;
    max-height: 100%;
    height: auto;
    box-sizing: border-box;
    width: auto;
    margin: 0;
    padding: 0;
}

#header #txtLoading {
    text-align: center;
    margin-top: 40px;
    color: #a09ba0;
    font-size: 1.4em
}

#header_tab {
    background: url(img/logo.jpg) no-repeat center top fixed;
    background-size: auto 23%;
    height: 100%;
}

/*#header_tab-blanc{background:url(img/logo_blanc.png) no-repeat center top ; background-size:auto 23%;  height:100%;}
*/
ul#nav {
    list-style: none;
    position: fixed;
    right: 2%;
    height: 100%;
    z-index: 999;
    width: 15%;
    min-width: 200px;
    top: -2%;
    display: flex;
    flex-direction: column;
}

ul#nav li {
    height: 6%;
    z-index: 10;
}

ul#nav li a {
    text-transform: uppercase;
    text-decoration: none;
    outline: none;
    color: #939393;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    height: 95%;
    font-size: 1em;
    background: url(img/li-nav.png) left top no-repeat;
    background-size: contain;
    padding: 5%;
    display: block
}

ul#nav li a#scrollTop {
    position: fixed;
    bottom: 5%;
    right: 5%;
    z-index: 10000;
    max-height: 30px;
    max-width: 30px;
    text-transform: uppercase;
    text-decoration: none;
    outline: none;
    color: #939393;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    height: 95%;
    font-size: 1em;
    background: url(img/backTop.png) right bottom no-repeat;
    background-size: 30%;
    display: block
}

ul#nav li a#scrollTop div {
    background-color: transparent;
}

ul#nav li a div {
    display: inline-block;
    background-color: #FFFFFF;
    vertical-align: middle;
    text-align: left;
    margin-left: 29%;
    margin-top: 0px;
    padding: 2px 3px;
}

ul#nav li a.navCop {
    padding: 2%
}

ul#nav li a:hover {
    opacity: 0.6;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

ul#nav li a:focus,ul#nav li a:visited {
    text-decoration: none;
    outline: none
}

ul#nav li:nth-child(2) a.current {
    color: #fff;
    background: url(img/curent-nature.png) left top no-repeat;
    background-size: contain;
    display: block
}

ul#nav li:nth-child(2) a.current div {
    background-color: #a2be6c;
}

ul#nav li:nth-child(4) {
    margin-left: -1.8%
}

ul#nav li:nth-child(4) div {
    margin-top: -4%
}

ul#nav li:nth-child(4) a.current {
    color: #fff;
    background: url(img/curent-apiculteurs.png) left top no-repeat;
    background-size: contain;
    display: block
}

ul#nav li:nth-child(4) a.current div {
    background-color: #806e64;
}

ul#nav li:nth-child(6) {
    margin-left: 2%
}

ul#nav li:nth-child(6) a.current {
    color: #fff;
    background: url(img/curent-miel.png) left top no-repeat;
    background-size: contain;
    display: block
}

ul#nav li:nth-child(6) a.current div {
    background-color: #1d031f;
}

ul#nav li:nth-child(8) {
    margin-left: -2%
}

ul#nav li:nth-child(8) a.current {
    color: #fff;
    background: url(img/curent-coop.png) left top no-repeat;
    background-size: contain;
    display: block
}

ul#nav li:nth-child(8) a.current div {
    background-color: #795877;
}

ul#nav li.borderNavTop {
    min-height: 10px;
    height: 10%;
    top: 0
}

ul#nav li.borderNavBottom {
    min-height: 10px;
    height: 40%
}

ul#nav li.interNav {
    margin: 0;
    min-height: 10px;
    height: 12%
}

ul#nav li.interNav,ul#nav li.borderNavBottom,ul#nav li.borderNavTop {
    display: block;
    border-left: solid;
    border-width: 1px;
    color: #afafaf;
    margin-left: 10%;
    z-index: 0;
}

#nature {
    background-image: url(img/bgruche.png);
    background-position: 12% 83%;
    background-size: 15%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #fff;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    border-bottom-style: solid;
    border-bottom-color: #e5e5e5;
    border-bottom-width: 1.5em;
    background-clip: border-box;
    z-index: 10;
    overflow: hidden;
}

#nature #trefle1 {
    background: url(img/pot1.png) no-repeat fixed;
    background-position: 80% 115%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 200;
    background-size: 20%
}

#nature #alveole {
    background: url(img/pot2.png) no-repeat fixed;
    background-position: 9% 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
    background-size: 20%
}

#nature #cuillere1 {
    background: url(img/cuillere2.png) no-repeat fixed;
    background-position: 0% 0%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
    background-size: 27%
}

#nature #abeille1 {
    position: absolute;
    z-index: 2;
    top: 25%;
    left: 15%;
    z-index: 2000;
    max-width: 8%;
    width: auto
}

#nature #abeille1 img {
    height: 100%;
    width: auto;
    box-sizing: border-box
}

#nature #txt1 {
    top: 35%;
}

#actu_home {
    /*     max-width:820px; */
    /*position:absolute;min-width:50px;z-index:10000; width:35%; left:32.5%;*/
    background-color: rgba(100,100,100,0.1);
    /*bottom:14%;*/
    width: 100%;
}

.homeActuContainer {
    padding: 15px 60px 80px;
}

.homeActuTitle {
    font-size: 1.8em;
    font-family: 'Cabin', sans-serif;
    color: #6d166b;
    line-height: normal;
    font-weight: 600;
    margin: 0;
}

.homeActuSubTitle {
    font-size: 1.3em;
    font-family: 'Cabin', sans-serif;
    color: #6d166b;
    line-height: normal;
}

.homeActuText {
    margin: 20px 0 0 0
}

#actu_home .homeActuText, .bx-controls-direction {
    display: inline;
}

#actu_home .more {
    text-align: right;
}

/*#apiculteurs{background-image:url(img/logo.jpg),url(img/bgApiculteurs.jpg); background-position: center top, center; background-repeat: no-repeat; background-attachment: fixed;background-size: 17% auto, cover;color:white;margin:0 auto;overflow:hidden;padding:0;z-index:5; border-bottom-style:solid;border-bottom-color:rgba(0,0,0,0.3);border-bottom-width:1.5em;}
*/
#apiculteurs {
    background-image: url(img/bgApiculteurs.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    z-index: 5;
    border-bottom-style: solid;
    border-bottom-color: rgba(0,0,0,0.3);
    border-bottom-width: 1.5em;
    overflow: hidden;
}

#apiculteurs #abeille2 {
    background-image: url(img/abeille2.png);
    background-attachment: fixed;
    background-position: 0px 600px;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 500;
    width: 50%;
    height: 100%;
    top: 0;
    left: 70%;
    background-size: 3%
}

#apiculteurs #abeille3 {
    background-image: url(img/abeille3.png);
    background-position: 0px 400px;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 500;
    width: 400px;
    height: 100%;
    top: 0;
    left: auto;
    right: 600px;
    background-size: auto 20%
}

#apiculteurs #abeille4 {
    background-image: url(img/abeille4.png);
    background-position: 0px 500px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    z-index: 500;
    width: 50%;
    height: 1064px;
    top: 0px;
    left: 20%;
    background-size: 5%
}

#apiculteurs #txt2 {
    position: absolute;
    top: 35%;
    display: block;
    padding: 0px 2%;
    padding-bottom: 40%;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 10000;
}

/*#miel{background:url(img/bgMiels.jpg) 50% 0 no-repeat fixed;background-size:cover;color:white;padding:100px 0 0 0;z-index:10; box-sizing:border-box;}
*/
#miel {
    background-image: url(img/logo_blanc.png),url(img/bgMiels.jpg);
    background-position: center top, 50% 0;
    background-repeat: no-repeat;
    background-attachment: scroll, scroll;
    background-size: auto 14%,cover;
    color: white;
    padding: 100px 0 0 0;
    z-index: 10;
    box-sizing: border-box;
}

#miel #blocTxt1 {
    position: absolute;
    top: 18%;
    left: 38%;
    display: block;
}

#miel #miel1 {
    background-image: url(img/miel1.png);
    background-position: 15% 0px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0;
    background-size: 22%
}

#miel #acc1 {
    background-image: url(img/acc1.png);
    background-position: 40% 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 25%
}

#miel #blocTxt2 {
    position: absolute;
    top: 46%;
    left: 50%;
    display: block;
}

#miel #miel2 {
    background-image: url(img/miel2.png);
    background-position: 30% 0px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100%;
    left: 0;
    background-size: 20%
}

#miel #acc2 {
    background-image: url(img/acc2.png);
    background-position: 52% 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 25%
}

#miel #cuillere {
    background-image: url(img/cuillere.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 500;
    width: 45%;
    height: 100%;
    left: 0;
    background-size: 90%
}

#miel #miel3 {
    background-image: url(img/miel3.png);
    background-position: 60% 0px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100%;
    left: 0;
    background-size: 20%
}

#miel #acc3 {
    background-image: url(img/acc3.png);
    background-position: 78% 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 25%
}

#miel #blocTxt3 {
    position: absolute;
    top: 78%;
    left: 25%;
    display: block;
}

#coop {
    background-image: url(img/bg_eshop.jpg);
    background-attachment: fixed;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto 100% ;
    margin: 0 auto;
    z-index: 0
}

#coop #potdouble {
    background-image: url(img/potdouble.png);
    background-position: center 10%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-size: 53%;
    z-index: 0;
}

#coop a#eshop {
    position: absolute;
    top: 22%;
    left: 58%;
    z-index: 100;
    height: 30%;
    max-height: 293px;
    text-decoration: none;
    outline: none;
    border: none 0px;
}

#coop a#eshop img {
    bordre: none;
    opacity: 1;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
}

#coop a#eshop:hover img {
    -khtml-opacity: 0.8;
    -moz-opacity : 0.8;
    -ms-filter: "alpha(opacity=80)";
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    filter : alpha(opacity=80);
    opacity: 0.8;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    height: auto;
    max-height: 95%;
    max-width: 95%;
}

#coop #txt4 {
    position: absolute;
    bottom: 15%;
    display: block;
}

#coop #supFooter {
    position: absolute;
    bottom: 7%;
    right: 21%
}

#coop #footer {
    position: absolute;
    bottom: 0;
    background-color: rgba(0,0,0,0.2);
    padding: 5px 0px;
    width: 100%;
    height: 5%
}

#coop #footer ul#fonctionnelle {
    list-style-type: none;
    display: inline;
    position: absolute;
    right: 20%;
    bottom: 1%;
    width: 60%;
    text-align: right;
}

#coop #footer ul#fonctionnelle li {
    list-style-type: none;
    display: inline;
    margin-right: 18px;
    padding-left: 20px
}

#coop #footer ul#fonctionnelle li a {
    color: #fff
}

#origine {
    width : 20%;
    display: block;
    height: 7.5%;
    max-height: 70px;
    margin-left: 40%;
    margin-right: 40%;
    min-width: 165px;
    bottom: 3%;
    position: absolute;
    z-index: 10000;
    /* background-color:#FFFFFF;*/
}

#origine.origine_v2 {
    bottom: 1.5%;
}

#origine .cale_origine {
    width: 20%;
    min-width: 40px;
    max-width: 80px;
    float: left;
    height: 100%;
    /*background-repeat:no-repeat; background-size:contain; background-image:url(img/alveole_france1.png);*/
    font-family: 'mielicon-2regular';
    font-size: 4.5em;
    color: #FFFFFF;
    text-shadow: #999 0px 0px 5px;
    line-height: 1em;
    padding-right: 1em;
}

#origine .origine_txt {
    float: left;
    height: 100%;
    margin: 0 auto;
}

#origine.origine_v1 h3 {
    color: #a09ba0;
    font-size: 1.5em;
    line-height: 0.1em;
}

#origine.origine_v1 h4 {
    color: #6d166b;
    font-size: 1em;
    line-height: 0.3em;
}

#origine.origine_v2 h3 {
    color: #fff;
    font-size: 1.5em;
    line-height: 0.1em;
}

#origine.origine_v2 h4 {
    color: #fff;
    font-size: 1em;
    line-height: 0.3em;
}

.fleche {
    margin: 0 5px 0 0
}

.clear {
    clear: both;
    border-width: 0px;
    width: 100%;
    height: 0px;
    margin: 0;
    padding: 0
}

#noscript {
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    background-color: #fff;
    display: block;
    z-index: 10000;
    float: left;
    position: fixed;
    top: 0;
    left: 0
}

#noscript p {
    margin: 0;
    position: relative
}

#pageTransition {
    width: 0%;
    min-height: 100%;
    background-color: #fff;
    display: block;
    z-index: 10000;
    float: left;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.7
}

a {
    color: #afafaf;
    text-decoration: none;
    outline: none;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out
}

a:hover {
    text-decoration: none;
    color: #6d166b;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    opacity: 0.7
}

a:visited,a:active {
    text-decoration: none;
    outline: none
}

.slide {
    width: 100%
}

.blocTxt20 {
    position: absolute;
    min-width: 50px;
    z-index: 10000;
    float: left;
    width: 20%;
}

.blocTxt35 {
    position: absolute;
    min-width: 50px;
    z-index: 10000;
    float: left;
    width: 35%;
    left: 32.5%;
    background-color: rgba(255,255,255,0.5);
}

.blocTxt40 {
    position: absolute;
    min-width: 50px;
    z-index: 10000;
    float: left;
    width: 40%;
    left: 30%;
    background-color: rgba(255,255,255,0.5);
}

.fond_blanc {
    background-color: #FFF;
    min-height: 600px;
}

p {
    margin: 0;
    padding: 0
}

#detailActualite {
    width: 90%;
    max-width: 600px;
    padding: 2em;
    margin: 0 auto;
}

@media screen and (max-aspect-ratio: 2.01) and (min-aspect-ratio:1.57) {
    #origine .origine_txt {
        padding-left:20px;
    }

    
}


/*1.6*/
@media screen and (max-aspect-ratio: 8/5) {
    ul#nav li a div {
        margin-left:38%
    }

    /*#actu_home{
    position:absolute;min-width:50px;z-index:10000; width:55%; left:23.5%; background-color:rgba(255,255,255,0.5);
    bottom:8%;
}*/
}

/*1.33*/
@media screen and (max-aspect-ratio: 4/3) {
    ul#nav li a div {
        margin-left:43%
    }
}

/*1.1*/
@media screen and (max-aspect-ratio: 40/37) {
    ul#nav li a div {
        margin-left:53%
    }
}

/*1.77*/
@media screen and (min-aspect-ratio: 16/9) {
    ul#nav li a div {
        margin-left:25%
    }

    #origine {
        bottom: 5%;
    }

    .blocTxt35 {
        width: 40%;
        left: 30%;
    }

    #origine .origine_txt {
        padding-left: 10px;
    }
}

@media screen and (min-width: 2100px) {
    html {
        font-size:68%
    }

    #coop #txt4 {
        bottom: 25%;
    }
}

@media screen and (min-width: 1401px) {
    html {
        font-size:62.5%
    }
}

@media screen and (max-width: 1400px) {
    html {
        font-size:60%
    }

    .blocTxt20 {
        width: 30%;
    }

    .blocTxt40 {
        width: 45%;
        left: 27.5%;
    }

    #miel #blocTxt3 {
        left: 15%;
    }

    #origine .origine_txt {
        padding-left: 10px;
    }

    #miel #blocTxt1 {
        top: 16%;
    }
}

@media screen and (max-width: 1280px) {
    html {
        font-size:58%
    }

    /*#actu_home{
    margin:0 auto;
    position:absolute;min-width:50px;z-index:10000; width:55%; left:23.5%; background-color:rgba(255,255,255,0.5);
    bottom:8%;
}*/
    .homeActuContainer {
        padding: 10px 20px 50px;
    }

    #actu_home .homeActuText, .bx-controls-direction {
        display: none
    }
}

@media screen and (max-width: 1160px) {
    html {
        font-size:53%
    }

    #apiculteurs #txt2 {
        top: 28%;
    }
}

@media screen and (max-width: 1040px) {
    html {
        font-size:50%
    }

    .blocTxt40 {
        width: 50%;
        left: 25%;
    }

    #coop #supFooter {
        right: 17%
    }

    .blocTxt35 {
        width: 40%;
        left: 30%;
    }
}

@media screen and (max-width: 920px) {
    html {
        font-size:43%
    }

    .blocTxt20 {
        width: 35%;
    }

    .blocTxt40 {
        width: 55%;
        left: 22.5%;
    }
}

@media screen and (max-width: 800px) {
    html {
        font-size:40%
    }

    body #nav {
        display: none
    }

    body #miel #blocTxt3 {
        left: 5%
    }

    body .blocTxt20 {
        width: 40%;
    }

    .blocTxt35 {
        width: 50%;
        left: 25%;
    }

    .blocTxt40 {
        width: 70%;
        left: 15%;
    }

    #coop #supFooter {
        right: 7%
    }

    /*#actu_home{
    
    bottom:2%;
}*/
}

@media screen and (max-width: 680px) {
    html {
        font-size:38%
    }
}

@media screen and (max-width: 560px) {
    html {
        font-size:35%
    }
}

@media screen and (max-width: 440px) {
    html {
        font-size:35%
    }
}

@media screen and (max-width: 320px) {
    html {
        font-size:35%
    }
}

@media screen and (max-height: 650px) {
    #actu_home .homeActuText, #actu_home .homeActuSubTitle, .bx-controls-direction {
        display: none
    }

    .homeActuContainer {
        padding: 3px 20px 40px;
    }
}
@media screen and (max-aspect-ratio: 18/10) and (min-aspect-ratio:16/10) {
    

    #actu_home .homeActuText {
        display: none
    }
}