@media screen and (orientation: portrait) and (max-width: 700px) {
#sidebar {
width: 50px;
border-right: solid 1px red;
}
}

/* ========== MAIN ========== */
@font-face {
font-family: jaapokki;
font-display: auto;
src: url('jaapokki.eot');
src: url('jaapokki.eot?#iefix') format('embedded-opentype'),
url('jaapokki.woff') format('woff'),
url('jaapokki.ttf') format('truetype');
}

html, body {
margin: 0;
font: normal 13px jaapokki, verdana;
color: #000000;
width: 100%;
height: 100%;
}

#sidebar {
width: 250px;
min-height: calc(100% - 40px);
min-height: -webkit-calc(100% - 40px);
min-height: -moz-calc(100% - 40px);
padding: 20px;
position: absolute;
z-index: 999;
border-right: solid 1px #545454;
background: transparent url('../img/bg-menu.png');
d1isplay: none;
}

#header, #logo, #menu {
width: 250px;
margin: 0;
}

#header h2 {
line-height: 35px;
}

#menu {
margin-top: 15px;
}

#menu a {
width: 250px;
height: 50px;
padding: 5px 0;
line-height: 2;
display: inline-block;
color: #ffffff;
}

#menu img.menu {
float: left;
margin-right: 10px;
}

#menu a:hover img {
outline: solid 1px #ffffff;
}

#menu a:active img {
outline: solid 2px #ffffff;
}

#map {
width: 100%;
height: 100%;
}




/* ========== HEADERS ========== */
h1, h2, h3, h4, h5 {
padding: 0;
margin: 0;
font-style: normal;
}

h1 {
font: normal 32px jaapokki;
text-transform: uppercase;
}

h2 {
font: normal 25px jaapokki;
text-transform: uppercase;
}

#sidebar h2 {
color: #ffffff;
}


/* ========== LINK ========== */
a {
text-decoration: none;
color: #000000;
}

a:hover {
text-decoration: underline;
}




/* ========== OTHERS ========== */
.bg {
font: normal 20px jaapokki;
text-transform: uppercase;
}

.gm-style .gm-style-iw-c {
text-align: center;
}