@media(min-width: 768px){
    .loginPanel{
        height:100%;
        box-sizing:border-box;
        position:relative;
    }
    .loginPanelMenu{
        float:left;
        height:100%;
        width:220px;
        left:0;
        position:relative;
        overflow:hidden;
        margin:0 30px 0 0;
    }
    
    .loginPanelBody{
        height:100%;
        overflow-y:auto;
        position:relative;
    }

    .loginMenu{
        float:left;
        clear: both;
        width: 100%;
        color:#222;
        border-radius:4px;
        border:1px solid #e5e5e5;
        overflow:hidden;
    }
    .loginMenu ul, .loginMenu li{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    .loginMenu ul{
        position:relative;
        float:left;
        width: 100%;
    }
    .loginMenu ul li{
        position:relative;
        float:left;
        width: 100%;
    }
    .loginMenu ul li a{
        padding:0;
        font-size:14px;
        padding:14px 12px;
        display:block;
        color:#222;
        font-weight:bold;
        text-decoration:none;
        text-align:left;
        border-bottom:1px solid #e5e5e5;
    }
    .loginMenu ul li a:hover{
        background:#eee;
    }
    .loginMenu ul li a:active{
        background:#ccc;
    }
    .loginMenu ul li > ul{
        display:block;
    }
    .loginMenu ul li ul a{
        display:block;
        padding-left:30px;
        font-size:14px;
        font-weight:normal;
    }

    .loginMenu .loginMenuCheck a{
        background:#0096A0;
        color:#fff;
    }
    .loginMenu .loginMenuCheck a:hover{
        background:#0096A0;
    }

    .annoncesShow{
        height:100%;
        width:100%;
        position:relative;
        padding:0 0 20px;
    }
    .annoncesShowBody{
        float:left;
        height:100%;
        width:650px;
        left:0;
        position:relative;
        overflow:hidden;
        margin:0 30px 0 0;
    }
    .annoncesShowRight{
        height:100%;
        overflow-y:auto;
        position:relative;
    }

    .annoncesShowBody h1{
        font-size:20px;
    }
    .annoncesShowIllus{
        float:left;
        clear: both;
        width:100%;
        margin:10px 0 20px;
    }
    .annoncesIllus{
        float:left;
        clear: both;
        width:100%;
        background:#000;
        height:360px;
    }
    .annoncesIllus span{
        display:block;
        width:100%;
        height:100%;
        background-size:cover;
        cursor:pointer;
    }

    .annoncesDetails{
        float:left;
        clear: both;
        width:100%;
        border-radius:4px;
        background:#f0f0f0;
        padding:10px 0;
        margin:0 0 20px;
    }
    .annoncesDetails .detailsItem{
        display:inline-block;
        width:100%;
        padding:5px 20px;
        font-size:14px;
    }
    .annoncesDetails .textPrix{
        font-size:24px;
        font-weight:bold;
        color:#df0000;
    }

    #annoncesDiap{
        position:fixed;
        display:none;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,0.8);
        z-index:10;
    }
    .annoncesDiapFlex{
        display:flex;
        align-items:center;
        justify-content: center;
        width:100%;
        height:100%;
    }
    .annoncesDiapItem{
        margin:0 auto;
        width:1000px;
        height:80%;
    }

    .photosSlider .swiper-slide img{
        margin:0 auto;
        width:1000px;
        height:80%;
    }

    .progDate{
        display:inline-block;
        width:100%;
    }
    .progDate .item{
        font-size:20px;
        padding:15px 20px;
        border-bottom:1px solid #e5e5e5;
        transition: ease-in-out 0.1s;
    }
    .progDate .item:hover{
        background:#f8e8bf;
        border-color:#FFBD12;
    }

    .blockBgTitle{
        background:#0096A0 url(../images/ban0.jpg) no-repeat center;
        background-size:cover;
        min-height:250px;
    }
    .blockBgTitle h1{
        font-size:22px;
        color:#222;
        width:40%;
        padding:15px 20px;
        background:#FFBD12;
    }
}

@media(max-width:768px){
    .loginPanel{
        float:left;
        clear: both;
        width:100%;
        position:relative;
    }
    .loginPanelMenu{
        float:left;
        clear: both;
        width:100%;
        position:relative;
        overflow:hidden;
        margin:0 30px 20px 0;
    }
    
    .loginPanelBody{
        float:left;
        clear: both;
        width:100%;
        position:relative;
    }

    .loginMenu{
        float:left;
        clear: both;
        width: 100%;
        color:#222;
        border-bottom:1px solid #e5e5e5;
        overflow:hidden;
    }
    .loginMenu ul, .loginMenu li{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    .loginMenu ul{
        position:relative;
        float:left;
        width: auto;
    }
    .loginMenu ul li{
        position:relative;
        float:left;
        width: auto;
    }
    .loginMenu ul li a{
        padding:0;
        font-size:16px;
        padding:15px 15px 15px;
        display:block;
        color:#222;
        font-weight:bold;
        text-decoration:none;
        text-align:left;
    }
    .loginMenu ul li a:hover{
        background:#eee;
    }
    .loginMenu ul li a:active{
        background:#ccc;
    }
    .loginMenu ul li > ul{
        display:block;
    }
    .loginMenu ul li ul a{
        display:block;
        padding-left:30px;
        font-size:14px;
        font-weight:normal;
    }

    .loginMenu .loginMenuCheck a{
        padding:15px 15px 10px;
        border-bottom:5px solid#0096A0;
        color:#0096A0;
    }

    .annoncesShow{
        float:left;
        clear: both;
        width:100%;
        position:relative;
        padding:0 0 20px;
    }
    .annoncesShowBody{
        float:left;
        clear: both;
        width:100%;
        position:relative;
        overflow:hidden;
        margin:0 30px 0 0;
    }
    .annoncesShowRight{
        float:left;
        clear: both;
        width:100%;
        margin:20px 0;
        position:relative;
    }

    .annoncesShowBody h1{
        font-size:20px;
    }
    .annoncesShowIllus{
        float:left;
        clear: both;
        width:100%;
        margin:10px 0 20px;
    }
    .annoncesIllus{
        height:360px;
    }
    .annoncesIllus span{
        display:block;
        width:100%;
        height:100%;
        background-size:cover;
        cursor:pointer;
    }

    .annoncesDetails{
        float:left;
        clear: both;
        width:100%;
        border-radius:4px;
        background:#f0f0f0;
        padding:10px 0;
        margin:0 0 20px;
    }
    .annoncesDetails .detailsItem{
        float:left;
        clear: both;
        width:100%;
        padding:5px 20px;
        font-size:14px;
    }
    .annoncesDetails .textPrix{
        font-size:24px;
        font-weight:bold;
        color:#df0000;
    }

    #annoncesDiap{
        position:fixed;
        display:none;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,0.8);
        z-index:100;
    }
    .annoncesDiapFlex{
        display:flex;
        align-items:center;
        justify-content: center;
        width:100%;
        height:100%;
    }
    .annoncesDiapItem{
        margin:0 auto;
        width:1000px;
        height:80%;
    }

    #annoncesDiap .swiper-slide img{
        max-width:100%;
        height:auto;
    }

    .photosSlider .swiper-slide img{
        max-width:100%;
        height:auto;
    }

    .progDate{
        display:inline-block;
        width:100%;
    }
    .progDate .item{
        font-size:20px;
        padding:15px 20px;
        border-bottom:1px solid #e5e5e5;
        transition: ease-in-out 0.1s;
    }
    .progDate .item:hover{
        background:#f8e8bf;
        border-color:#FFBD12;
    }

    .blockBgTitle{
        background:#0096A0 url(../images/ban0.jpg) no-repeat center;
        background-size:cover;
        min-height:250px;
    }
    .blockBgTitle h1{
        font-size:20px;
        color:#222;
        width:50%;
        padding:15px 20px;
        background:#FFBD12;
    }
}

@media(max-width:480px){
    .annoncesIllus{
        height:280px;
    }

    .blockBgTitle h1{
        width:60%;
        font-size:18px;
    }
}

.photosSlider{
    background:#111;
}