/*
*****************************
******** MOBILE MENU ********
*****************************
*/


/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
/*
.no-csstransforms3d .mp-pusher,
.no-js .mp-pusher {
    padding-left: 300px;
}
*/
.no-csstransforms3d .mp-menu .mp-level,
.no-js .mp-menu .mp-level {
    display: none;
}

.no-csstransforms3d .mp-menu > .mp-level,
.no-js .mp-menu > .mp-level {
    display: block;
}

.mp-menu {
    position: absolute; /* we can't use fixed here :( */
    top: 0;
    left: 0;
    z-index: 1;
    width: 300px;
    height: 100vh;
    background : #ffffff;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);

    transition : transform 0.5s;
    -webkit-transition : transform 0.5s;
    -ms-transition : transform 0.5s;
}

.mp-level>ul>li>a>span,
.mp-level>ul>li>.lien-off>span{
    color:#333333;
}
.mp-level>ul>li>a:hover>span,
.mp-level>ul>li>.lien-off:hover>span{
    color: #028e02;
}

/* menu mobile */

.mp-level {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: auto;
    height : calc( 100vh - 50px );
    overflow : hidden;
    background: #F4F4F4;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

.mp-menu > .mp-level {
    top : 60px;
}

.mp-level.mp-level-open,
.mp-menu > .mp-level.mp-level-open {
    height: calc( 100% - 50px );
}

.mp-level.mp-level-open {
    height : calc( 100vh - 50px );
    overflow : auto;
}

.mp-level.mp-level-open.mp-level-overlay {
    overflow : hidden;
    height : 200vh;
}

.mp-level.mp-level-open.mp-level-overlay > ul > li:not(.m_current) {
    opacity : 0;
    visibility : hidden;
}

.mp-level.mp-level-overlay {
    cursor: pointer;
}

.mp-level.mp-level-overlay.mp-level:before {
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 1;
}

.mp-pusher,
.mp-level {
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    transition: transform 0.5s;
}

/* overlap */
.mp-overlap .mp-level.mp-level-open {
    box-shadow: 1px 0 2px rgba(0,0,0,0.2);
    -webkit-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    transform: translateX(-40px);

}

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
    box-shadow: none;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: transform 0.5s, -webkit-transform 0.5s;
    -moz-transition: transform 0.5s, -moz-transform 0.5s;
    transition: transform 0.5s;
}

/* cover */
.mp-cover .mp-level.mp-level-open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

/* titles */

.mp-menu .title {
    margin: 0 20px;
    color : #028e02;
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    font-size: 16px;
    min-height : 40px;
    line-height : 40px;
    padding : 0.7em 0;
    text-transform: uppercase;
    font-weight: 400;
    display : block;
}

.mp-menu .title .text {
    vertical-align : middle;
    margin-left : 20px;
}

.mp-menu .title .picto + .text {
    margin-left : 0;
}

.mp-menu .mp-level .mp-level .mp-level .title, .mp-menu .close_bloc .title {
    color: #ffffff;
}

.mp-menu .mp-level .mp-level .mp-level .title a,
.mp-menu .mp-level .mp-level .mp-level .title .lien-off {
    vertical-align : middle;
    line-height : 18px;
    display : inline-block;
    padding-bottom: 3px;
}

.mp-menu .title a:hover, .mp-menu ul li .title a:hover,
.mp-menu .title a:hover, .mp-menu ul li .title .lien-off:hover {
    background : transparent;
    color : #56c1ff;
}

.mp-menu .title .picto, .mp-menu .title a .picto,
.mp-menu .title .picto, .mp-menu .title .lien-off .picto {
    font-size : 40px;
    line-height : 40px;
    overflow : visible;
    width : auto;
    margin: 0 5px;
}

.mp-menu .title .picto + .centered-height {
    width : calc(100% - 60px);
}

.mp-menu.mp-overlap .title:before {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 8px;
    font-size: 75%;
    line-height: 1.8;
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
    transition: opacity 0.3s, transform 0.1s 0.3s;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

.mp-overlap .mp-level.mp-level-overlay > .title:before {
    opacity: 1;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

/* lists */

.mp-menu ul {
    list-style: none;
    text-align : left;
    overflow : hidden;
}

.mp-menu > .mp-level > ul {
    margin: 0;
    padding: 0;
    overflow : auto;
    width : 300px;
    height : 100%;
    position : relative;
}

.mp-menu ul li:before {
    position: absolute;
    left: 10px;
    z-index: -1;
    color: rgba(0,0,0,0.8);
    line-height: 30px;
}

/* lists links */

.mp-menu ul li > a,
.mp-menu ul li > .lien-off {
    display: block;
    padding: 0.7em 1em 0.7em 1em;
    outline: none;
    font-size: 16px;
    line-height : 20px;
    font-weight : 400;
    text-transform : uppercase;
    -webkit-transition: background 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s;
}

.mp-menu ul li > a .icon,
.mp-menu ul li > .lien-off .icon {
    font-size : 12px;
}

.mp-level a,
.mp-level .lien-off {
    color : rgba(0, 0, 0, 0.7);
}


#mp-menu .mp-level ul{
    list-style: none;
}

#mp-menu .mp-level-2 a,
#mp-menu .mp-level-2 .lien-off {
    text-transform : none;
    line-height : 20px;
    vertical-align : middle;
}

#mp-menu .mp-level-2 .centered-height a,
#mp-menu .mp-level-2 .centered-height .lien-off {
    line-height : 1;
    display : inline-block;
    float : none;
    vertical-align : middle;
}

#mp-menu .mp-level-2 .c_container a,
#mp-menu .mp-level-2 .c_container .lien-off,
#mp-menu .mp-level-2 .c_container span {
    /*color : rgba(0, 0, 0, 0.7);*/
}

#mp-menu .mp-level-2 a.mp-back,
#mp-menu .mp-level-2 .lien-off.mp-back {
    text-transform : uppercase;
}

#mp-menu .mp-level-2 ul {
    padding : 5px 0;
}

#mp-menu .mp-level-2 li {
    padding : 0 5px;
}
/*
#mp-menu > .mp-level > ul > li > a:hover {
	background : rgba(240, 74, 49, 0.9);
	color : #ffffff;
}
*/

.mp-level .title a,
.mp-level .title .lien-off,
.mp-level .title a:hover,
.mp-level .title .lien-off:hover {
    color: #028e02 !important;
    text-transform: uppercase !important;
}

.mp-level a .text,
.mp-level .lien-off .text {
    padding-left : 0px;
    vertical-align : middle;
    -webkit-transition: border-color 0.3s ease-in, padding 0.3s ease-in;
    -moz-transition: border-color 0.2s ease-in, padding 0.2s ease-in;
    transition: border-color 0.2s ease-in, padding 0.2s ease-in;
}

.mp-level a:hover .text,
.mp-level .lien-off:hover .text {
    padding-left : 5px;
}

.mp-level a .picto,
.mp-level .lien-off .picto {
    margin : 0 10px 0 0;
    font-size : 22px;
    width : 24px;
    overflow : visible;
}

.mp-level > ul > li > a,
.mp-level > ul > li > .lien-off {
    box-shadow: inset 0 1px rgba(0,0,0,0.2);
}

.mp-menu.out ul li a:hover,
.mp-menu.out ul li .lien-off:hover {
    background: rgba(0,0,0,0.2);
    box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-menu.out .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a,
.mp-menu.out .mp-level.mp-level-overlay > ul > li > .lien-off,
.mp-level.mp-level-overlay > ul > li:first-child > .lien-off {
    box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-level > ul > li:first-child > a:hover,
.mp-level.mp-level-overlay > ul > li:first-child > a,
.mp-level > ul > li:first-child > .lien-off:hover,
.mp-level.mp-level-overlay > ul > li:first-child > .lien-off{
    box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);
}

.mp-level > ul > li.li-menu-header-devis > a,
.mp-level > ul > li.li-menu-header-devis > .lien-off {
    background-color: #E34F2B;
    color: #fff;
}
.mp-level > ul > li.li-menu-header-devis > a > span,
.mp-level > ul > li.li-menu-header-devis > .lien-off > span {
    color: #fff;
}
.mp-level > ul > li.li-menu-header-devis > a .icon,
.mp-level > ul > li.li-menu-header-devis > .lien-off .icon {
    font-size: 25px;
    margin-left: 3px;
}

#mp-menu .mp-level .picto_menu {
    position : static;
    margin : 0 0 0 6px;
    vertical-align : middle;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.7);

    -webkit-transition: border-color 0.2s ease-in, margin 0.3s ease-in;
    -moz-transition: border-color 0.2s ease-in, margin 0.3s ease-in;
    transition: border-color 0.2s ease-in, margin 0.3s ease-in;
}

#mp-menu .mp-level a:hover .picto_menu,
#mp-menu .mp-level .lien-off:hover .picto_menu {
    border-color : transparent transparent transparent #ffffff;
}

/* back buttons */

.mp-back {
    background: rgba(0,0,0,0.1);
    outline: none;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    display: block;
    font-size: 1.2em;
    padding: 1em 1em 1em 3.4em;
    position: relative;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
    -webkit-transition: color 0.2s, background 0.3s, padding 0.2s;
    -moz-transition: color 0.2s, background 0.3s, padding 0.2s;
    transition: color 0.2s, background 0.3s, padding 0.2s;
}

.mp-back:hover {
    padding : 1em 1em 1em 4em;
}

.mp-menu.out .mp-level.mp-level-overlay > .mp-back {
    background: transparent;
    box-shadow: none;
    color: transparent;
}

#mp-menu  .mp-back .picto_menu, #mp-menu .mp-level-2 .mp-back .picto_menu {
    position:absolute;
    top:50%;
    margin-top:-2.5px;
    left:18px;
    display:inline-block;
    width:0px;
    height:0px;
    border-width : 3px 4px 3px 0;
    border-color : transparent #333 transparent transparent;
    border-style : solid;
    vertical-align:middle;
    overflow:hidden;
}

#mp-menu  .mp-back .picto_menu {
    border-color : transparent rgba(0, 0, 0, 0.7) transparent transparent;
}

#mp-menu  .mp-level .mp-back:hover .picto_menu {
    border-color : transparent #ffffff transparent transparent;
}

.mp-level li{
    margin-left:0;
}

.m_event:after{
    content:"\e90f";
    font-family: 'ecofont';
    margin:0 20px;
    vertical-align: middle;
}

/*#mp-menu li.eboutique a span, #mp-menu li.fooding a span{*/
/*color:#ffffff;*/
/*}*/

/* fancy mobile rules */
.fancybox-inner, #fancybox-content>div{
    overflow: hidden !important;
}
#fancybox-content>div img{
    width:100%;
}
/* ***************** */
.mp-pusher {
    transition : transform 0.5s;
    -webkit-transition : transform 0.5s;
}

.fancy_visible .scroller, .menu_visible .scroller {
    overflow: hidden;
    height: 100%;
}

.menu_visible html{
    overflow:hidden;
}

.mp-fancy {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateX(-340px);
    -webkit-transform: translateX(-340px);
    -ms-transform: translateX(-340px);
    width: 340px;
    z-index: 1;
}

.scroller:before{
    position: absolute;
    top: 0;
    right: 0;
    width : 0;
    height : 0;
    content: '';
    display : block;
    z-index : 9999;
}

.scroller.mp-pushed {
    cursor:pointer;
}

.scroller.mp-pushed:before{
    left : 0;
    bottom : 0;
    width : auto;
    height : auto;
    background : rgba(0, 0, 0, 0.5);

    transition : background 0.5s;
    -webkit-transition : background 0.5s;
}

.mp-pusher.fancy_visible {
    transform: translateX(340px);
    -webkit-transform: translateX(340px);
    -ms-transform: translateX(340px);
}

.mp-pusher.menu_visible {
    transform: translateX(300px);
    -webkit-transform: translateX(300px);
    -ms-transform: translateX(300px);
}

.mp-pusher::after{
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    content: '';
    opacity: 0;
}

.mp-pusher.fancy_visible {
    transform: translateX(340px);
    -webkit-transform: translateX(340px);
    -ms-transform: translateX(340px);
}

#mp-fancy > .header {
    border-bottom : 5px solid #5cb39b;
    position:relative;
}

/* Launcher du menu */
#menu_launcher{
    position:relative;
    z-index: 90;
    width: 40px;
    height: 40px;
    top: 4px;
    left: 0;
    margin:auto auto auto 0;
    color:#ffffff;
    font-size:20px;
    cursor:pointer;
}
@media only screen and (max-width : 599px) {
    #mini-header.sticky #menu_launcher,
    #mini-header.sticky .text_miniheader_tel,
    #mini-header.sticky .text_miniheader_mail {
        position: fixed;
        z-index: 11;
    }

    #mini-header.sticky #menu_launcher {
        top: 4px;
        left: 30px;
    }

    #mini-header.sticky .text_miniheader_tel {
        top: 8px;
        right: 5px;
    }

    #mini-header.sticky .text_miniheader_mail {
        top: 8px;
        right: 45px;
    }
}

#menu_launcher a,
#menu_launcher .lien-off {
    display : block;
}

#menu_launcher .text {
    vertical-align : middle;
    font-size : 1.1em;
    color : #191818;
    line-height : 1;
    padding-bottom : 5px;
    text-transform: uppercase;
}

/* hamburger */

.picto-menu {
    position : absolute;
    top: 16px;
    left: 6px;
    width : 28px;
    height : 2px;
    background : #000000;
    display : inline-block;
    transition: all 0.3s ease-in-out 0s;
}

.picto-menu:before, .picto-menu:after {
    background: #000000 none repeat scroll 0 0;
    content: "";
    display: inline-block;
    height: 2px;
    left: 0;
    position: absolute;
    transform-origin: center center 0;
    -webkit-transform-origin: center center 0;
    transition: all 0.3s ease-in-out 0s;
    width: 28px;
}

.picto-menu:before {
    top: 8px;
}

.picto-menu:after {
    top: -8px;
}

.menuhidden .picto-menu:before {
    height: 2px;
    transform: rotate(45deg);
}
.menuhidden .picto-menu:after {
    height: 2px;
    transform: rotate(-45deg);
}
.menuhidden .picto-menu:before, .menuhidden .picto-menu:after {
    top: 0;
    transform-origin: 50% 50% 0;
}
.menuhidden .picto-menu {
    background: transparent none repeat scroll 0 0;
}




/* Menu icon */
.m_icon {
    display: inline-block;
    position: relative;
    margin: 10px 0;
    height: 2px;
    width: 24px;
    background: #191818;
    vertical-align: middle;
}
.m_icon:before {
    content: '';
    display: block;
    position: absolute;
    top: -8px;
    left: 0;
    height: 2px;
    width: 24px;
    background: #191818;
}
.m_icon:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -8px;
    left: 0;
    height: 2px;
    width: 24px;
    background: #191818;
}

/* Partie Logo */
#mh_close{
    text-align:right;
    padding-right:15px;
    padding-top:15px;
}
#mh_close .icon{
    padding:10px;
    cursor:pointer;
}
#logo_mh{
    text-align: center;
    width: 100px;
    margin: 16px auto;
}


#mp-menu #mh_close {
    cursor : pointer;
    width : 40px;
    height : 40px;
    position : absolute;
    top : 0;
    right : 0;
}

/* symbols */

.symbol {
    display : inline-block;
    font-size : 1em;
    position : relative;
}

.symbol-close {
    width : 30px;
    height : 2px;
    margin : 19px 5px;
    background : #3d3d3d;
    position : relative;
    transform : rotate(45deg);
}

.symbol-close:after {
    content : '';
    display : block;
    position : absolute;
    top : 0;
    left : 0;
    width : 30px;
    height : 2px;
    background : #3d3d3d;
    transform-origin : 50% 50%;
    transform : rotate(90deg);
}


@media (min-width: 992px) {
    #menu_launcher{
        display:none;
    }
}
@media (max-width: 992px) {
    #header.sticky #menu_launcher{
        left: 20px;
    }
}