/************* FONT FACE *********************/

@font-face {
    font-family: 'droid_serifbold_italic';
    src: url('font/droidserif-bolditalic_0-webfont.eot');
    src: url('font/droidserif-bolditalic_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/droidserif-bolditalic_0-webfont.woff2') format('woff2'),
         url('font/droidserif-bolditalic_0-webfont.woff') format('woff'),
         url('font/droidserif-bolditalic_0-webfont.ttf') format('truetype'),
         url('font/droidserif-bolditalic_0-webfont.svg#droid_serifbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'droid_serifitalic';
    src: url('font/droidserif-italic_0-webfont.eot');
    src: url('font/droidserif-italic_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/droidserif-italic_0-webfont.woff2') format('woff2'),
         url('font/droidserif-italic_0-webfont.woff') format('woff'),
         url('font/droidserif-italic_0-webfont.ttf') format('truetype'),
         url('font/droidserif-italic_0-webfont.svg#droid_serifitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latobold';
    src: url('font/lato-bold-webfont.eot');
    src: url('font/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato-bold-webfont.woff2') format('woff2'),
         url('font/lato-bold-webfont.woff') format('woff'),
         url('font/lato-bold-webfont.ttf') format('truetype'),
         url('font/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latomedium';
    src: url('font/lato-medium-webfont.eot');
    src: url('font/lato-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato-medium-webfont.woff2') format('woff2'),
         url('font/lato-medium-webfont.woff') format('woff'),
         url('font/lato-medium-webfont.ttf') format('truetype'),
         url('font/lato-medium-webfont.svg#latomedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoregular';
    src: url('font/lato-regular-webfont.eot');
    src: url('font/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato-regular-webfont.woff2') format('woff2'),
         url('font/lato-regular-webfont.woff') format('woff'),
         url('font/lato-regular-webfont.ttf') format('truetype'),
         url('font/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'latosemibold';
    src: url('font/lato-semibold-webfont.eot');
    src: url('font/lato-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato-semibold-webfont.woff2') format('woff2'),
         url('font/lato-semibold-webfont.woff') format('woff'),
         url('font/lato-semibold-webfont.ttf') format('truetype'),
         url('font/lato-semibold-webfont.svg#latosemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoitalic';
    src: url('font/lato-italic-webfont.eot');
    src: url('font/lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato-italic-webfont.woff2') format('woff2'),
         url('font/lato-italic-webfont.woff') format('woff'),
         url('font/lato-italic-webfont.ttf') format('truetype'),
         url('font/lato-italic-webfont.svg#latoitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latobold_italic';
    src: url('font/lato-bolditalic-webfont.eot');
    src: url('font/lato-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato-bolditalic-webfont.woff2') format('woff2'),
         url('font/lato-bolditalic-webfont.woff') format('woff'),
         url('font/lato-bolditalic-webfont.ttf') format('truetype'),
         url('font/lato-bolditalic-webfont.svg#latobold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}


/********************************************/

html{
margin:0 !important;
margin-top:0 !important;
}
body{
margin:0;
padding:0;
background:#fff;
position: relative;
}
#top_header_container{
width:100%;
height:184px;
}
    .content_container{
    padding-top:70px;
    }
    .content{
    width:1200px;
    height:auto;
    margin:0 auto;
    text-align: center;
    }
        .post_content{
        width:745px;
        height:auto;
        margin:100px auto 120px auto;
        text-align: center;
        }
            /*.post_content h2 {
                font: 15px 'latobold';
                text-transform: uppercase;
            }
            .post_content p {
                color: #000;
                font: 15px 'latoregular';
            }*/
    .texte_100pour100_regional {
        margin-bottom: 80px;
    }
    #logo_heure_container{
    width:665px;
    height:167px;
    float: left;
    }
    #logo{
    width:320px;
    height:102px;
    float: left;
    margin-top: 25px;
    }
    #heure_ouvert{
    width:275px;
    padding:50px 40px 0 30px;
    float: left;
    font:22px 'droid_serifbold_italic';
    color:#ec3f3c;
    text-align: center;
    }
    #mu_mp_container{
    width:450px;
    height:114px;
    float: right;
    }
        #menu_utilitaire{
        width:450px;
        height:75px;
        text-align: right;
        }
            #menu_utilitaire a{
            font:13px 'latobold';
            color:#ec3f3c;
            text-decoration: none;
            }

            #btn_point_service{
            background: url(images/point_vente_icon.jpg) no-repeat 0 0;
            float: left;
            padding: 5px 0 5px 30px;
            margin:15px 0 0 25px;
            }
            #btn_circulaire{
            background: url(images/circulaire_flag.jpg) no-repeat;
            text-align: center;
            margin-left: 12px;
            width:163px;
            height:75px;
            float: left;
            }
                #btn_circulaire a{
                font:14px 'droid_serifbold_italic';
                color:#fff;
                margin-top: 10px;
                display: block;
                }
                    .latobold{
                    font:15px 'latobold';
                    text-transform: uppercase;
                    }
            #btn_calendrier{
            background: url(images/calendrier_icon.jpg) no-repeat 0 0;
            padding: 5px 0 5px 30px;
            margin-left: 25px;
            float: left;
            margin-top:15px;
            }
            #btn_facebook{
            margin:18px 0 0 25px;
            float: left;
            }
        #menu_principal{
            width:535px;
            height:40px;
            float: right;
            padding-top:30px;
        }
        #menu_principal ul {
            margin: 0;
            padding: 0;
        }
            #menu_principal ul li {
                display: inline-block;
                line-height: 40px;
                margin: 0;
            }
                #menu_principal ul li a {
                    color: #000;
                    font: 13px "latomedium";
                    text-decoration: none;
                    text-transform: uppercase;
                    padding: 0 8px;
                    
                }
                #menu_principal ul li:first-child {
                    margin-left: 0;
                }
                #menu_principal ul li:last-child {
                    padding-right: 0;
                }
                    #menu_principal ul li:hover {
                        border-top: 2px solid #000;
                        border-bottom: 2px solid #000;
                        line-height: 36px;  
                    }
                        #menu_principal ul ul{
                            position: absolute;
                            overflow:hidden;
                            max-height:0em;
                            z-index:999;
                            margin:0;
                            padding: 17px 0 0 0;
                            /*width:150px;*/
                            /*left: 0;*/
                            top: 165px;
                            border: none;
                            display:block;
                        }
                        #menu_principal li:hover > ul{
                        transition: 1s max-height 0.2s;
                        max-height:20em;
                        display: block;
                        }
                        #menu_principal li > ul li{
                            width:100%;
                        }
                        #menu_principal ul ul li:first-child{
                            border-top: solid 2px #000;
                            background: #fff;
                            display:block;
                            list-style-type:none;
                            margin: 0;
                            text-align:left;
                            
                        }
                        #menu_principal ul ul li:first-child:hover {
                            border-top: solid 2px #000;
                        }
                        #menu_principal ul ul li:hover  {
                            /*padding: 5px 15px;*/
                            border: none;
                            line-height: normal;
                        }
                            #menu_principal ul ul li {
                                background: #fff;
                                display:block;
                                list-style-type:none;
                                margin: 0;
                                width: 163px;
                                padding: 10px 15px 0 15px;
                                text-align: left;
                                height: 20px;
                                line-height: normal;
                            }
                            #menu_principal ul ul li:last-child {
                                border: none;
                                width: 163px;
                                padding: 10px 15px 10px 15px;
                            }
                                #menu_principal ul ul li a{
                                    padding:0 0 10px 0;
                                    margin:0;
                                    font: 11px "latomedium";
                                    text-transform: none;
                                    border-bottom: solid 1px #a6a6a6;
                                    width: 100%;
                                    display: inline-block;
                                }
                                #menu_principal ul ul li:last-child a {
                                    border: none;
                                    
                                }
                                #menu_principal ul ul li a:hover{
                                color:#ec3f3c;  
                                }

    h1 {
        text-align: left;
    }

    .page {
    height:auto;
    margin: 0 auto;
    text-align: left;
    }
   
    .page h2 {
    font: 25px 'droid_serifbold_italic';
    margin: 0 auto 35px;
    }
        div.content.page p {
                margin: 0 0 30px 0;
                height: auto;
            }
            div.top_image {
            width: 1200px;
            height: 356px;
            background-repeat: no-repeat;
            background-position: top center;
            z-index: 1;
            margin:0 auto 75px auto;
            text-align: center !important;
            }
            em {
               font: 17px 'latobold';
               font-style: normal;
               display: inline-block;
            }
             .h1_page {
            text-align: center;
            position: relative;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            color: #fff;
            font: 60px 'latobold';
            text-transform: uppercase;
            z-index: 3;
            margin:0;
            }
            h1 .border_title{
            border-top: 4px solid #fff;
            border-bottom: 4px solid #fff;
            padding: 30px 0;
            }
            .content.page ul{
            padding-left:15px;
            }
            .content.page ul li {
            list-style-position: inside;
            list-style-type: none;
            }
            .content.page ul li:before {
            content:"~";
            color:#ec3f3c;
            margin-right:10px;
            }
            .content p {
            font: 15px 'latoregular';
            line-height: 20px;
            }
            .content a{
            color:#ec3f3c;
            text-decoration: none;
            }
                div.content.page p a {
/*                    color: #000;
                    font: 15px 'droid_serifbold_italic';
                    text-decoration: none;
                    border: 1px solid #000;
                    margin-top: 65px;
                    padding: 10px 15px;
                    display: inline-block;*/
                }
                div.content.page p img {
                    margin: 0;
                    z-index: 2;
                    display: inline-block;
                }
                div.content.page div.right {
                    float: right;
                    display: inline-block;
                }
        
        .slider_div {
            position: relative;
            width: 100%;
            margin: 0;
            padding: 0;
            height: auto;
            /*padding-left: 13px;*/
            z-index: 4;
        }
            .promotions_ruban {
                background: url(images/ruban.png) no-repeat;
                width: 478px;
                height: 91px;
                text-align: left;
                line-height: 40px;
                color: #fff;
                font: 40px 'droid_serifbold_italic';
                padding: 14px 0 25px 93px;
                position: absolute;
                top: 50%;
                margin: -72px 0 0 0;
                z-index: 999;
            }
            
            div.slider_div div#smooth_slider_1.smooth_slider {
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
                height: auto !important;
                max-height: 498px !important;
                max-width: 100% !important;
                text-align: center;
            }
            .smooth_slider .smooth_sliderb, .smooth_slider{
            max-height: 498px !important;
            }
            .smooth_slider_thumbnail{
            max-width: 100% !important;
            width: 100% !important;
            height: auto !important;
            max-height: none !important;
            }
            .smooth_slider .smooth_sliderb, .smooth_slider {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            height: auto !important;
            max-width: 100% !important;
            min-height:498px !important;
            text-align: center;
            }
                .smooth_sliderb {
                    height: auto !important;
                    width: 100% !important;
                    display: inline-block !important;
                }
                .smooth_slider .smooth_nav {
                    display: inline-block;
                    position: absolute !important;
                    z-index: 4;
                    bottom: 5px;
                    left: 47%;
                }
                div#smooth_slider_1_nav.smooth_nav a.smooth_slider_inav.smooth_slider_bnav {
                    background:url(images/boutons/point.png) left top !important;
                    background-repeat: no-repeat !important;
                    display: inline-block !important;
                    width: 13px !important;
                    height: 11px !important;
                }
                div#smooth_slider_1_nav.smooth_nav a.smooth_slider_inav.smooth_slider_bnav.activeSlide {
                    background:url(images/boutons/point_active.png) left top !important;
                    background-repeat: no-repeat !important;
                    display: inline-block !important;
                    width: 13px !important;
                    height: 11px !important;
                }
    .texte_bienvenue_mini_supermarche{
    font:18px 'droid_serifitalic';
    display: block;
    }
    .texte_100pour100_regional{
    font:25px 'droid_serifbold_italic';
    display: block;
    }
    .titre_trois_images_accueil{
    width:390px;
    height:95px;
    font:18px 'droid_serifitalic';
    text-align: center;
    border-top:solid 2px #000;
    border-bottom:solid 2px #000;
    display:table-cell;
    vertical-align:middle;
    position: relative;
    }
    
.clear{
clear: both;
}

/****************** FOOTER ***********************/

#top_footer_container{
width:100%;
height:310px;
padding: 65px 0 45px 0;
background:#fdf0e2;
align-items: center;
display: flex;
}
    .footer_content{
    /*width:1020px;*/
    height:auto;
    margin:0 auto;
    }
        #google_map {
        width: 520px;
        height: 310px;
        float: left;
        text-align: right;
        }
        /*#info_container {
        width: 470px;
        height: 310px;
        text-align: left;
        float: left;
        margin: 30px 0 0 30px;
        position: relative;
        }*/
        #point_service_container{
        width:470px;
        height:auto;
        float: left;
        margin-left: 30px;
        }
        .point_service_content{
        width:220px;
        height:auto;
        float: left;
        }
            .img_container{
            width:220px;
            height:150px;
            }
               .img_footer{
               width:220px;
               height:150px;
              /* float: left;*/
               }
                .rv_du_moulin{
                background:url(images/rv_du_moulin.jpg) no-repeat;
                }
                .begin{
                background:url(images/begin.jpg) no-repeat;
                }
            #logo_footer{
            width:90px;
            height:90px;
            background:url(images/logo_bienvenue_footer.png) no-repeat;
            position: absolute;
            top: -65px;
            left: 195px;
            }
           
                .margin_left{
                margin-left:30px;
                }
            .info_img_container{
            width:220px;
            height:auto;
            margin-top:10px;
            }
                .img_info{
                width:220px;
                border-top:solid 1px #000;
                border-bottom:solid 1px #000;
                padding:10px 0;
                font:14px 'latobold';
                /*float:left;*/
                }
                    .droid_serif_italic{
                    font:14px 'droid_serifitalic';
                    }
            #temps_ouverture{
            width:470px;
            height:31px;
            background:url(images/bg_heure_ouverture.jpg) no-repeat;
            color:#fff;
            font:22px 'droid_serifbold_italic';
            text-align: center;
            margin-top:10px;
            }
#middle_footer_container{
width:100%;
height:110px;
line-height:110px;
background: #ec3f3c;
text-align: center;
color:#fdf0e2;
font:18px 'latobold';
}
    #middle_footer_container span{
    line-height: 110px;
    }
    #middle_footer_container a{
    text-decoration: none;
    color:#fdf0e2;
    font:18px 'latoregular';
    }
#copyright_container{
width:100%;
height:55px;
background:#000;
color:#fff;
font:13px 'latosemibold';
}
    #copyright{
    width:50%;
    height:55px;
    line-height:55px;
    float: left;
    }
    #realise{
    width:50%;
    height:55px;
    line-height:55px;
    float: right;
    text-align: right;
    }
        #realise a{
        text-decoration: none;
        color:#ec3f3c;
        }
        
/******* CLASS *******/

h2 {
font:25px 'droid_serifbold_italic';
}
.gras{
font-family: 'latobold';
}
.italic{
font-family: 'latoitalic';
}
.gras_italic{
font-family: 'latobold_italic';
}

/****************************************
VERSION MOBILE
******************************************/

/********** MENU RESPONSIVE ****************/
        
#click-menu {
width: 100% !important;
padding: 10px 0 !important;
}
#responsive-menu{
padding-top:37px;
text-transform: uppercase;
}
.sub-menu{
padding-left:0 !important;
font-size:13px;
}
/***************************/

@media screen and (max-width: 1200px) {
    .content{
    width:90%;
    }
    #mu_mp_container, #menu_principal{
    float:none;
    margin:15px auto 0 auto;
    }
    #top_header_container{
    height:auto
    }
    #logo_heure_container{
    margin:0 auto;
    float: none;
    }
    .promotions_ruban{
    width: 350px;
    padding: 14px 0 25px 30px;
    top:33%;
    background-position: right;
    }
    div.top_image{
    width:100%;
    background-size:cover;
    }
}
@media screen and (max-width: 1000px) {
    #google_map, #point_service_container {
    float: none;
    margin:0 auto;
    }
    #point_service_container{
    margin-top:30px;
    }
    #info_container{
    float: none;
    margin:50px auto 0 auto;
    }
    .footer_content{
    width:90%;
    }
    #top_footer_container{
    height:auto;
    }
    #logo_footer{
    top:-30px;
    }
    .titre_trois_images_accueil{
    display:block;
    height:auto;
    padding:20px 0;
    margin:0 auto 55px auto;
    }
    .post_content{
    width:90%;
    margin: 60px auto 120px auto;
    }
    .promotions_ruban{
    display:none;
    }
    .content.page ul li:before{
    content:"";
    }
}
@media screen and (max-width: 800px) {
    #logo_heure_container{
    padding-top:55px;
    }
    #smooth_slider_1{
    display: none;
    }
    .slider_div{
    background:url(images/img_header_mobile.jpg) no-repeat center;
    width:100%;
    height:400px;
    background-size: cover;
    }
}
@media screen and (max-width: 700px) {
    #google_map {
    width:100%;
    }
    #logo, #heure_ouvert{
    float: none;
    margin:0 auto;
    }
    #logo_heure_container{
    height:auto;
    width:100%;
    }
}
@media screen and (max-width: 600px) {

    #middle_footer_container{;
    height:auto;
    padding:30px 0;
    }
    #middle_footer_container span{
    line-height: 28px;
    width:90%;
    display: inline-block;
    }
    #copyright_container{
    height:auto;
    padding:20px 0;
    }
    #copyright, #realise{
    float: none;
    margin:0 auto;
    width:90%;
    text-align: center;
    height:auto;
    line-height:30px;
    }
    .point_service_content{
    float: none;
    margin:0 auto 30px auto;
    }
    .img_container{
    margin:0 auto
    }
    .info_img_container{
    margin:10px auto 0 auto;
    }
    #temps_ouverture{
    width:90%;
    height:auto;
    color:#ec3f3c;
    background:none;
    margin:0 auto;
    text-align: center;
    }
}
@media screen and (max-width: 500px) {
    
    #mu_mp_container{
    display: none;
    }
    #point_service_container, .point_service_content{
    width:90%;
    }
    #heure_ouvert{
    margin:30px auto;
    padding:0;
    }
    .titre_trois_images_accueil{
    width:90%;
    }
    #logo, #logo img{
    width:90%;
    height:auto;
    }
}