/*
* MOBILE
*/
@media all and (max-width:960px){
    .offer {min-height: 480px}
    #banner {height: 200px}
    .offer .items .item {width: 30%; margin: 10px 1.6%;}
    .offer .gallery .items .item {width: 30%;  margin: 10px 1.6%;}
}

@media all and (max-width:760px){
    header .items {flex-wrap: wrap}
    header .items #logo {width: 260px; margin: auto}
    header .items #logo img {}
    header .items .right {width: 100%}
    header .items .right #top-contact {text-align: center; margin: 10px 0 10px}
    header .items .right nav ul {float: none; text-align: center;}
    header .items .right nav ul li {margin: 0 10px}
    header .items .right nav ul li a {text-align: center; margin: 0}
    .offer .content .picture {width: 45%}
}

@media all and (max-width:680px){
    #contact .flex {flex-wrap: wrap}
    #contact .left {width: 100%; padding-right: 0px;}
    #contact .right {width: 100%;}
}

@media all and (max-width:520px){
    #banner {height: 100px}
    .offer .items .item {width: 46%; margin: 10px 2%;}
    .offer .gallery .items .item {width: 46%;  margin: 10px 2%;}
    #contact .right #map {height: 340px}
}

@media all and (max-width:400px){
    .offer .items .item {width: 100%; margin: 10px 40px;}
    .offer .gallery .items .item {width: 100%;  margin: 10px 40px;}
    .offer .content .picture {width: 100%; margin: 0 0px 20px 0px}
}