html, body {
    background:#fff; 
    font:400 14px; 
    font-family: "Open Sans Condensed",sans-serif;
    color: #333333;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

#menu  {
    width: 100%; 
    height: 60px; 
    background-image: url('/img/head1.jpg');
    background-repeat: no-repeat; 
    background-position: center;
    background-size: cover;
    background-color: #333333;
    color: #ffffff;
    opacity: 0.9;
    position: fixed;
    z-index: 1000;
}

#menu img { width: 150px; margin: 12px; width: 150px; margin: 12px; }

#menu div.nav { width: 900px; padding: 18px; float: right;  }
#menu div.nav a { color: white; text-decoration: none; margin: 0 24px 0 24px; float: right; }
#menu div.nav a span { border-bottom: none; display: inline-block; padding-bottom: 4px; padding-top: 4px;  }
#menu div.nav a span.active { border-bottom: 2px solid #ffffff; }
#menu div.nav a span:hover { border-bottom: 2px solid #ffffff; }

.clr { clear: both; }

#content_main { width: 100%; padding-top: 50px; height: calc(100% - 50px); overflow: hidden !important;}
#content { width: 100%; padding-top: 50px; height: 100%;}
#left { position: fixed; float: left; 
        width: 20%; max-width: 280px; display: inline-block;
        border-right: 2px solid #006464; min-height: calc(100% - 0px); padding: 10px; height: calc(100% - 0px); 
        font-size: 14px; 
z-index: 10000;
margin-top: 10px;
}
#left_title { font-size: 22px; padding: 0; margin: 30px 0 16px 0; text-transform: uppercase; }
#left_title i { color: #006464; }
#right { width: 60%; display: inline-block; font-size: 14px; padding-top: 10px; margin-left: 25%; }
#right h1 { text-align: center; font-size: 22px; font-weight: normal; padding: 0; margin: 30px 0 0 0; text-transform: uppercase; }

#right_full { width: 100%; display: inline-block; font-size: 14px; padding-top: 10px; height: calc(100% - 0px); margin-top: 0; overflow: hidden !important; }
#right_full h1 { text-align: center; font-size: 22px; font-weight: normal; padding: 0; margin: 30px 0 0 0; }
.desktop {display: block;}
.mobile {display: none;}
.mobilenav {float: right; padding: 14px 20px 14px 0; font-size: 28px; }
.mobilenav i {color: fefdfd;}
#mobilenav{width: 60%; background: #666666; padding: 20px; margin-top: -8px; float: right;display: none; }
#mobilenavclose{float: right;}
#mobilenav a {display: block; text-decoration: none; color: #ffffff; font-size: 16px; margin-bottom: 12px;}
#left_mobile_submenu_open, #left_mobile_submenu_close {
    border-bottom: 2px solid #006464; 
    border-left: 2px solid #006464;
    border-right: 2px solid #006464;
    color: #006464;
    width: 130px;
    margin-left: 14px;
    padding: 8px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    position: fixed;
    text-align: center;
    background-color: #ffffff;
    display: none;
    margin-top: 10px;
}
#left_mobile_submenu_close { display: none; z-index: 10001; }
.subitems { text-decoration: none; color: #333333; display: block; margin-bottom: 6px; }
.subitems i { color: #006464; }

#gallery { width: 95%; height: 100%; margin-right: 3%; padding-top: 20px;}

#image_paper { width: 50%; }

.knigi {
    width: 49%; display: inline-block; margin-top: 22px;
}
.knigi img { width: 80%; display: block; margin: 0 auto; }

.knigi h3 { text-align: center; color: #333333; height: 64px; }

@media only screen and (max-width:  1024px) {
    .desktop {display: none;}
    .mobile {display: block;}
    #left {display: none; position: fixed; width: 80%; background: #ffffff;}
    #right { width: 95%; display: inline-block; float: none; margin-left: 2%; }
    #right h1 { margin-top: 44px; }
    #left_title {visibility: hidden;}
    #left_mobile_submenu_open {display: block;}
    #gallery { margin: 0 auto; }
    #image_paper { width: 100%; }
    
   .knigi { width: 100%; }

}