.w-b{width: 100%;  box-sizing: border-box;}

.ac{align-items: center;}

.jcs{justify-content: space-around;}

.df{display: flex;}

.dfm{display: flex;}

.db{display: block;}

.dib{display: inline-block;}

.w42{width: 42%;}
.w80{width: 80%;}
.w62{width: 62%;}
.w22{width: 22%;}

.o2{order: 2;}
.o1{order: 1;}

.pr{position: relative;}

#map{width: 100%;height: 500px;}
.loca{text-align:center; position:absolute; z-index:5000; background-color: white; color:#5f5f5f; padding: 2vh; left: 3%; top: 3%; font-weight: bold;}

.spiner{position: fixed;display: none; bottom: 2vh; right: 1%; color:beige;background-color: #3b2200; font-size: 45px; border-radius: 100%;border: beige 2px solid; padding: 0.5vh 1.5vh 2vh;}

.foot{margin-left: 10%;padding-left: 3%;box-sizing: border-box; border-left: #eee1ac solid 0.7vh;  border-image: linear-gradient(to bottom, #746d2a00, #eee1ac,#746d2a00) 1 round;}

.fr{float: right;}
/*///////////*/

@media screen and (max-width:1000px) {
    .df,.dib{display:block}
    .w42,.w80,.w62,.w22{width: 90%;}
    .foot{border-left: none;padding-left: 0;margin-left: 0%; border-bottom: #eee1ac solid 2px; border-image: linear-gradient(to left, #746d2a00, #eee1ac,#746d2a00) 1 round;}
    footer .w22,footer .w62{width: 100%;}
    .spiner{font-size: 35px; padding: 0.5vh 1vh 1.3vh;}
}

@media screen and (max-width:500px) {
    .foot{border-bottom: #eee1ac solid 1px;}
    #map{height: 400px;}
    .spiner{font-size: 20px; padding: 0.5vh 0.8vh 1vh;}

}