@media screen and (min-width:320px) {

    .que_diffu_large, .que_diffu_medium, .que_diffu_large_et_medium, .affiche_print, #btn_connexion_base, #btn_inscrire, .cadre_onoffswitch, .pub_pied_de_page {
        display: none;
    }

    .que_diffu_small, .que_diffu_medium_et_small {
        display: block;
    }

    #header_top {
        margin:auto;
        width:320px;
        height:100px;
        position:relative;
    }

    #btn_connexion_base_img {
        position:absolute;
        top:10px;
        right:0px;
        cursor:pointer;
        background-image: url('../images/user.png');
        opacity:0.5;
        width:19px;
        height:22px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    #btn_connexion_base_img:hover {
        opacity:1;
    }

    #btn_inscrire_img {
        position:absolute;
        top:10px;
        right:45px;
        cursor:pointer;
        background-image: url('../images/ajout_user.png');
        opacity:0.5;
        width:22px;
        height:22px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    #btn_inscrire_img:hover {
        opacity:1;
    }

    #diffusion_logo img {
        width:200px !important;
        height:auto;
    }


    #btn_connexion {
        position:absolute;
        top:10px;
        right:0px;
        color:#767168;
        font-family: "OpenSans";
        font-size:13px;
        cursor:pointer;
    }

    #bulle_log {
        background-color:#fff;
        border:1px solid #767168;
        border-radius:10px 0px 10px 10px;
        padding:10px;
        display:none;
        position:absolute;
        right:0px;
        top:45px;
        z-index: 5;
        font-size:12px;
        text-align: center;
        -webkit-box-shadow: 3px 3px 5px 0 #BDBDBD;
        box-shadow: 3px 3px 5px 0 #BDBDBD;
    }

    #btn_menu_mobil {
        width:21px;
        height:15px;
        background-image: url('../images/btn_mobile_menu.png');
        cursor:pointer;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        position:absolute;
        top: 60px;
        right: 0px;
    }

    #btn_menu_mobil:hover {
        background-image: url('../images/btn_mobile_menu_2.png');
    }

    .block_accueil {
        width:320px;
        margin:auto;
        height:60px;
        border-radius:6px 6px 6px 40px;
        color:#faf5ed;
        background-color:#a49986;
        padding-left: 60px;
        padding-right: 60px;
        padding-top:3px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-weight:bold;
        font-size:20px;
        position:relative;
        text-align:center;
        vertical-align:middle;
        cursor:pointer;
    }

    #contenu {
        min-height:300px;
        padding-top:20px;
        width:100%;
        
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #contenu_interieur, #contenu_interieur_recette {
        width:320px;
        margin:auto;
    }

    #liste_par_jour {
        width:100%;
        padding:10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .pagedisplay {
        width:50px;
    }


    .block_recette {
        width:280px;
        margin:5px;
        display:inline-block;
        vertical-align: top;
        height:350px;
        border: 1px solid #767168;
        font-size: 12px;
        position: relative;
    }

    .block_recette:before {
        content: '';
        width:20px;
        height:20px;
        position:absolute;
        bottom:-1px;
        right:-1px;
       /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+49,767168+51,ffffff+53 */
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(-45deg,  #ffffff 48%, #767168 51%, #ffffff 55%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right bottom, color-stop(48%,#ffffff), color-stop(51%,#767168), color-stop(55%,#ffffff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(-45deg,  #ffffff 48%,#767168 51%,#ffffff 55%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(-45deg,  #ffffff 48%,#767168 51%,#ffffff 55%); /* Opera 11.10+ */
        background: -ms-linear-gradient(-45deg,  #ffffff 48%,#767168 51%,#ffffff 55%); /* IE10+ */
        background: linear-gradient(135deg,  #ffffff 48%,#767168 51%,#ffffff 55%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }






    #logo {
        width:260px;
        height:74px;
        position:absolute;
        left:5px;
        top:10px;
        background-image:url('../images/petit_logo.png');
    }

    .message {
        background-color:#ede6e6;
        border:1px solid #47bc6d;
        padding:15px;
        width:300px;
        margin:auto;
        color:#284933;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }

    .message a {
        color:#000;
        font-family:"OpenSans_bold", Arial, sans-serif;
    }

    .message_erreure {
        background-color:#e6ede9;
        border:1px solid #bc4747;
        padding:15px;
        width:300px;
        margin:auto;
        color:#492828;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }

    .message_erreure a {
        color:#000;
        font-family:"OpenSans_bold", Arial, sans-serif;
    }

    

    .zone_recherche {
        width:300px;
        margin:auto;
    }

    .champ_recherche {
        background-color: #bcb09c;
        padding: 4px;
        border-radius: 3px;
        display: inline-block;
        position:relative;
    }

    .champ_recherche input[type=search] {
        border: 1px solid #767168;
        font-size: 12px;
        padding:8px;
        color: #525252;
        font-family: "OpenSans";
        width:200px;
    }

    .btn_simple {
        background-color:#303030;
        color:#fff;
        font-family: "OpenSans_bold";
        font-size:11px;
        padding-left:10px;
        padding-right:10px;
        padding-top:14px;
        padding-bottom:14px;
        cursor:pointer;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        display:inline-block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .btn_simple:hover {
        background-color:#000;
    }

    .image_recette {
        display:inline-block;
        width:320px;
        overflow:hidden;
        vertical-align: top;
    }

    .prelude_recette {
        display:inline-block;
        width:320px;
        vertical-align:top;
    }

    .ingredient_recette {
        float:left;
        margin-right:20px;
        margin-bottom:10px;
    }

    .btn_validation {
        background-color:#bcb09c;
        color:#fff;
        font-family: "OpenSans_bold";
        font-size:15px;
        padding:10px;
        cursor:pointer;
        border:1px solid #767168;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .btn_validation:hover {
        background-color:#767168;
        border:1px solid #000;
    }

    .cadre_sous_menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: columns;
        -ms-flex-direction: columns;
        flex-direction: columns;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        font-size: .875rem;
        position: relative;
        height: auto;
    }

    .cadre_sous_menu ul li a, .cadre_sous_menu ul li span {
        font-family: "OpenSans_bold";
        color:#000;
        cursor:pointer;
        display:inline-block;
        padding:2px;
        -webkit-flex-grow: 1;
        -webkit-box-flex: 1;
        -moz-flex-grow: 1;
        flex-grow: 1;
        text-align: center;
        border-right: 1px solid #DCDCDC;
        height: auto;
    }

    .cadre_sous_menu ul li:hover {
        background-color: #f0f0f0;
    }
    

    .ss_nav_actif {
        background-color:#DCDCDC;
    }

    .btn_add {
        background-color:#bcb09c;
        color:#fff;
        font-family: "OpenSans_bold";
        font-size:12px;
        padding:8px;
        text-align: center;
        cursor:pointer;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .btn_add:hover {
        background-color:#767168;
        text-decoration: none;
    }

    .btn_suppr {
        background-color:#d9b4c0;
        color:#fff;
        font-family: "OpenSans_bold";
        font-size:12px;
        padding:8px;
        cursor:pointer;
        border:1px solid #767168;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .btn_suppr:hover {
        background-color:#ad6b7f;
        border:1px solid #000;
    }

    .contenu_cadre_sous_menu {
        width:320px;
        border:1px solid #bcb09c;
        font-size:12px;
        padding:15px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        overflow:hidden;
    }

    #liste_resultat_ingredient {
        text-align:center;
    }

    #form_ajout_ingredient {
        font-size:12px;
    }

    .zone_404 {
        background-image:url('../images/404_exterieur.jpg');
        height:232px;
        width:100%;

    }

    .zone_404_interieur {
        height:232px;
        background-image:url('../images/404_interieur3.jpg');
        background-repeat:no-repeat;
        width:100%;
        margin:auto;
        position:relative;
    }

    .label_fleche {
        height:34px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-image:url('../images/label_fleche.png');
        position:absolute;
        color:#717171;
        font-family: "OpenSans_bold";
        padding-top:5px;
        padding-left:5px;
        padding-right:5px;
        text-shadow: 0 0 2px #fff;
        font-size:14px;
    }

    .label_fleche_before {
        position:absolute;
        background-image:url('../images/label_fleche_befor.png');
        height:34px;
        width:18px;
        left:-18px;
        top: 0px;
    }

    .label_fleche_after {
        position:absolute;
        background-image:url('../images/label_fleche_after.png');
        height:34px;
        width:6px;
        right:-6px;
        top: 0px;
    }

    .zone_text_diapo, .zone_text_diapo_second {
        font-size:25px;
    }

    .contenu_plan_du_site li {
        padding-top:20px;
        padding-bottom:20px;
    }

    .contenu_plan_du_site li a {
        font-size: 20px;
    }

    .pied_de_page {
        line-height: 29px;
    }

    .pied_de_page a {
        font-size: 17px;
        margin:8px;
    }
}