@charset "utf-8";


.navicon{
  width: auto;
  height: 40px;
  display: none;
  text-align: center;
  font-size: 24px;
  line-height: 1;
  color: #333;
  cursor:pointer;
  float:left;
  position:relative;
}
.container-top .navicon{float:right;}
.navicon:before{
    content: '\f0c9';
    font-family: 'FontAwesome';
    display:block;
    line-height: 1;
    width: 24px;
    height: 24px;
    margin:8px 15px;
}
.navicon.active:before{
    content: '\f00d';
    font-weight:300;
}
.navicon:hover, .navicon:focus{color: #fb861e;}
.navicon span{
    width:12px;
    height:12px;
    position:absolute;
    top:0; right:0;
    background:#f00;
    border:2px solid #fff;
    
    -webkit-border-radius: 7px;
     -khtml-border-radius: 7px;
       -moz-border-radius: 7px;
            border-radius: 7px;
}

/*.content-header{
    background:blue;
}*/


.content-header .navicon{
  float:right;
  height: 32px; 
  margin:-5px 0 0 5px;
  font-size:20px;
  
  /*background:red;*/
}
.content-header .navicon:before{
  margin:6px 10px;
}

.side-left-mask {
    display:none;
    position: fixed;
    z-index:999;
    top: 40px; left: 0; right:0; bottom: 0;
    background-color: #000;
    opacity: 0.75; -moz-opacity:0.75; filter:alpha(opacity=75);
    -webkit-transition: all 200ms linear; 
       -moz-transition: all 200ms linear; 
         -o-transition: all 200ms linear; 
            transition: all 200ms linear;
}

.page_menu_button{
    display:none;
}

@media (max-width: 768px) {
    .user_main .user_main_photo{
        float:none;
        width:auto;
    }
    
    
    .page_menu_button{
        display:none;
    }
    
    
    
    body.show-leftbar,
    body.show-rightbar{
        overflow: hidden;
    }
   
   .navbar-brand {
        display: none;
    }
    .navicon {
        display: block;
    }
    
    
    .main .site .site_column{
        width:250px;
        float:none;
        position: fixed;
        overflow-y:auto;
        z-index: 1000;
        top: 57px;
        left: -250px;
        bottom: 0;
        -webkit-transition: all 200ms linear;
           -moz-transition: all 200ms linear;
             -o-transition: all 200ms linear;
                transition: all 200ms linear;
    }

    .main .site .site_content {
        margin: 0;
    }
    
    .user_about_info{
        padding:0;
    }
    
    .show-leftbar .main .site .site_column{
        left: 0;
        background:#fff;
    }
    
    .show-leftbar .side-left-mask,
    .show-rightbar .side-left-mask {
        display: block;
    }
    
    
    .content .app_right_column,
    .content .dialog_right_column,
    .content .dialogues_right_column{
        /*width:auto;*/
        float:none;
        
        background:#fff;
        width:250px;
        float:none;
        position: fixed;
        overflow-y:auto;
        z-index: 1000;
        top: 57px;
        right: -250px;
        bottom: 0;
        -webkit-transition: all 200ms linear;
           -moz-transition: all 200ms linear;
             -o-transition: all 200ms linear;
                transition: all 200ms linear;
    }
    .content .app_left_column,
    .content .dialog_left_column,
    .content .dialogues_left_column{
      margin-right:0;
    }
    .show-rightbar .content .app_right_column,
    .show-rightbar .content .dialog_right_column,
    .show-rightbar .content .dialogues_right_column{
      right: 0;
    }
    
    
    .user_main .user_main_photo{
      float:none;
      width:auto;
    }
    .user_main .user_main_wrap{
      margin:20px 0 0 0;
    }
    
    ul.list_users li{
      width:50%;
    }
    ul.list_users li a{
      margin:2px;
    }
    
    .content-header {
        margin:0 0 10px 0;
    }
    .content-header h1 {
        float:none;
        display:block;
    }
    .content-header .sub_title {
        display:none !important;
    }
    .content-header .breadcrumb {
        float:none;
        display:block;
        margin:10px 0 0 0;
    }
    .content-header .breadcrumb-item,
    .content-header .breadcrumb-item+.breadcrumb-item{
        float:left;
    }
}




