/*==== MEDIA ====*/
.cat-menu [type="checkbox"], .cat-menu label.toggleSubmenu{display: none;}
.cat-menu label.toggleMenu, .cat-menu label.toggleSubmenu {width:100%; padding: 15px 0; display: none; text-transform: uppercase; cursor: pointer; position: relative; text-align:center;}


iframe, video {max-width:100%;}


@media screen and (max-width: 999px) {
    #all, #header, #main {width: auto;}
    
    #header {padding:0; margin: 20px;}
    
    #nav.fixed {width: 100%; position:relative; }
    #nav ul {width: 100%;}
    #nav>ul>li>.menu-cat {}

    #main {padding:0; margin:0 20px;}
    
    .foot-info {width: auto; margin:0 20px;}
    
    

}

@media screen and (max-width: 700px) {
    #header {height: auto;}
    
    .logo, .contacts  {width: auto; margin: 0; float: none; text-align: center;}
    .logo img {width: auto; float: none; text-align: center;}
    .logo .podp {width: auto; margin: 0; }
    .contacts { margin: 10px 0;  font-size: 1.5em;}
    
    #nav {height: auto;}
    #nav ul>li { width: 32%; margin:0; text-align:center;}
    
    #aside {width: auto; margin:20px 0; float: none;  font-size:1.5em;}
    #content {margin: 20px 0;}

.cat-menu {width:100%;}
.cat-menu ul {width: auto; display: none;}
.cat-menu>ul>li>ul {width: auto; background:#878282;}
.cat-menu li {width:100%; position: relative;}
.cat-menu a, .cat-menu>ul>li>ul a {display:block !important; height:auto; margin:0; padding:15px 0; width:100%; text-align: center;}
.cat-menu label.toggleMenu {display: block; }
.cat-menu>ul>li:hover>ul {display: none;}
.cat-menu input.toggleMenu:checked ~ ul, .cat-menu input.toggleSubmenu:checked ~ ul{ width:100%; display: block; position: relative; max-height: 1000px;  transition: max-height 2s ease-in; }
.cat-menu label.toggleSubmenu{ position: absolute;  top: 0;  right: 0;  width: 100%;  height: 100%;  cursor: pointer;  display: block; }

.cat-menu ul>li.main>a {padding: 5px 0; font-weight: bold; text-align: center; background:#4C68AE;}

}


@media screen and (max-width: 500px) {
    
    #nav ul>li { width: 48%;}
   
}


@media screen and (max-width: 320px) {
    #nav ul>li { width: 100%;}
}