/* Règles génériques affichage mobile */
@media (max-width: 500px) and (max-aspect-ratio: 13/9 /* workaround when keyboard popup */ ),
(max-width: 800px) and (min-aspect-ratio: 13/9 /* workaround when keyboard popup */ )
{
    body.noscroll
    {
        overflow: visible;
    }
    #background:after
    {
        animation: none;
        opacity: 0.8;
    }

    #menu
    {
        height: auto;
        position: relative;
        background: none;
        box-shadow: none;
        transition: none;
    }
    #menu.scroll
    {
        height: auto;
        box-shadow: none;
        background-color: transparent;
    }
    #menu.active
    {
        background-color: white;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }
    #menu #logo
    {
        display: inline-block;
        padding: 0;
    }
    #menu li#logo:hover {
        background:none;
    }
    #logo img
    {
        max-width: 100%;
    }
    #menu #menu_trigger, #menu #menu_trigger:hover
    {
        display: inline-block;
        cursor: pointer;
        padding: 0;
        vertical-align: middle;
        background: none;
        background-image: url('../pics/menu.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: all 0.5s ease-in-out;
    }
    #menu #menu_trigger.active
    {
        background-image: url('../pics/menu_close.png');
    }
    #menu_trigger.active ~ li
    {
        display: block;
    }
    ul#menu
    {
        padding: 0;
    }
    ul#menu li
    {
        display: none;
        text-align: left;
    }
    #menu li:hover
    {
        background: none;
        background-color: #F0F0F0;
    }
    #menu li.home a:before, #menu li.contact .link:before,
    #menu li.filter .link:before, #menu li.article_link a:before
    {
        width: 1.5em;
        height: 1.5em;
        left: 0;
        top: 0.5em;
        margin-right: 0;
    }
    ul#menu a, ul#menu .link
    {
        display: block;
    }

    #page
    {
        display: block;
        padding-top: 0;
    }
    #page.inactive
    {
        display: none;
    }

    #notification
    {
        display: block;
    }

    .box.content
    {
        width: 80%;:
    }
    .footer
    {
        margin: 0;
    }
    .footer_menu
    {
        max-width: 100vw;
        margin: 0;
    }
    .footer_menu a
    {
        display: inline-block;
    }

    #contact_popup_overlay,
    #filter_popup_overlay
    {
        position: relative;
        height: auto;
        top: auto;
        left: auto;
        display: none;
    }
    #contact_popup_overlay.show,
    #filter_popup_overlay.show
    {
        display: block;
    }
    #photo_popup_overlay
    {
        background-color: black;
    }
    #contact_popup,
    #filter_popup
    {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0 0 1em;
        padding-top: 0;
        font-size: 1.2em;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
    }
    #contact_popup hr
    {
        display: none;
    }
    #contact_popup .popup_button.close,
    #filter_popup .popup_button.close
    {
        width: 1em;
        height: 1em;
        padding: 0.5em;
        right: 1em;
        top: -1em;
    }
    #contact_popup h1,
    #filter_popup h1
    {
        font-size: 1.5em;
        margin-top: 0.5em;
    }
    #contact_form textarea
    {
        margin: auto;
        display: block;
        width: 90%;
        color: black;
    }
    #contact_form label,
    #biens_filter_form label
    {
        margin-right: 2em;
    }
    #contact_form input,
    #biens_filter_form input
    {
        padding: 0.5em;
    }
    input.secteurs_search
    {
        width: 40%;
    }
    .secteurs_search_result .list_item {
        padding: 0.5em 2em;
    }
    #contact_tel
    {
        font-weight: bold;
    }
    #biens_filter_form input[type="radio"] + label
    {
        display: inline;
        padding: 0.25em 1em;
    }
    #biens_filter_form .type_transaction
    {
        margin: 1em 0;
    }

    .biens_list .bien_preview
    {
        display: block;
        margin: 1em 0;
    }
    .biens_list .bien_preview .photo
    {
        width: 100%;
    }
    .biens_list .bien_preview .mask,
    .biens_list .bien_preview .description,
    .biens_list .bien_preview .info
    {
        display: none;
    }

    .bien .header
    {
        min-width: 90%;
    }
    .bien .header .titre
    {
        width: 90%;
        margin: auto;
        display: block;
        margin-bottom: 1em;
    }
    .bien .header .transac
    {
        width: 90%;
        margin: auto;
        display: block;
    }
    .bien .photos .photo_container:hover
    {
        transform: none;
        z-index: 100;
    }
    #map_popup
    {
        margin-top: 50vh;
        transform: translateY(-50%);
        width: 100%;
        height: 100vh;
    }
    #map_popup .popup_button.close,
    #photo_popup .popup_button.close
    {
        right: 0px;
        top: 0px;
    }
    #photo_popup_overlay .popup_button.close
    {
        right: 0;
        top: 0;
    }
    #photo_popup_overlay .popup_button.previous
    {
        left: 3em;
    }
    #photo_popup_overlay .popup_button.next
    {
        right: 3em;
    }
    #photo_popup
    {
        max-width: 100%;
        max-height: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    .bien .details .volet_gauche
    {
        min-width: 100%;
        margin: auto;
    }
    .bien .details .volet_droit
    {
        min-width: 100%;
        margin: auto;
    }
    .bien .details .documents
    {
        margin-bottom: 1em;
    }
    .bien .details .dpe p
    {
        font-size: 1em;
    }
}

/* Règles affichage mobile portrait */
@media (max-width: 500px) and (max-aspect-ratio: 13/9 /* workaround when keyboard popup */ )
{
    #logo
    {
        max-width: 55%;
        margin: 0.5em 8%;
    }
    #logo img
    {
        max-height: 3em;
    }

    #menu
    {
        line-height: 3em;
    }
    #menu.scroll
    {
        line-height: 3em;
    }
    #menu_trigger
    {
        height: 1.5em;
        width: 29%;
    }
    ul#menu li
    {
        font-size: 1.3em;
    }
    #photo {
        width: 100%;
    }

    #photo_popup
    {
        width: 100%;
        height: auto;
    }
    #photo_popup_overlay .popup_button.previous
    {
        top: 80%;
    }
    #photo_popup_overlay .popup_button.next
    {
        top: 80%;
    }
    #biens_filter_form input[type="checkbox"] + label
    {
        display: block;
        width: auto;
        padding: 0.25em 1em;
        margin: 0.25em;
    }
    .secteurs_search_result
    {
        width: 90%;
    }

    .biens_list .bien_preview
    {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding-bottom: 2em;
    }

    .bien .details .dpe img
    {
        width: 70%;
    }

    .biens_list.similaires .bien_preview
    {
        margin: auto;
        margin-top: 1em;
    }
    .biens_list.similaires .bien_preview
    {
        width: 200px;
        max-width: 200px;
        height: 200px;
    }
    .biens_list.similaires .bien_preview .photo
    {
        width: 200px;
        height: 128px;
    }
}

/* Règles affichage mobile paysage */
@media (max-width: 800px) and (min-aspect-ratio: 13/9 /* workaround when keyboard popup */ )
{
    #logo
    {
        max-width: 60%;
        margin: 0.5em 10%;
    }
    #logo img
    {
        max-height: 2.5em;
    }

    #menu
    {
        line-height: 2em;
    }
    #menu.scroll
    {
        line-height: 2em;
    }
    #menu_trigger
    {
        height: 2em;
        width: 20%;
    }
    ul#menu li
    {
        font-size: 1em;
    }

    #photo {
        height: 100%;
    }
    #photo_popup
    {
        width: auto;
        height: 100%;
    }
    #photo_popup_overlay .popup_button.previous
    {
        top: 60%;
    }
    #photo_popup_overlay .popup_button.next
    {
        top: 60%;
    }
    #biens_filter_form input[type="checkbox"] + label
    {
        display: inline;
        padding: 0.25em 1em;
        margin: 0.25em;
    }

    .biens_list .bien_preview
    {
        width: 100%;
        max-width: 100%;
        margin: 1em auto;
        text-align: left;
        height: auto;
    }
    .biens_list .bien_preview .photo
    {
        display: inline-block;
        width: 55%;
    }
    .biens_list .bien_preview .details
    {
        display: inline-block;
        width: 40%;
        margin: 0;
        padding: 2em 0 5% 1em;
        vertical-align: top;
    }
    .biens_list .bien_preview .details .type
    {
        display: block;
    }
    .biens_list .bien_preview .details .secteur
    {
        display: block;
    }
    .biens_list .bien_preview .transac
    {
        right: auto;
        left: 5px;
    }
    .biens_list .bien_preview .details .nombre_pieces
    {
        left: auto;
        right: 38%;
    }
    .biens_list .bien_preview .details .surface
    {
        left: auto;
        right: 25%;
    }
    .biens_list .bien_preview .details .nombre_chambres
    {
        left: auto;
        right: 10%;
    }
    .bien .details .dpe .kwh,
    .bien .details .dpe .ges
    {
        display: inline-block;
    }
    .bien .details .dpe img
    {
        width: 80%;
    }

    .biens_list.similaires .bien_preview
    {
        display: inline-block;
        margin: 1em;
    }
}