*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body { -webkit-font-smoothing: antialiased; }
#page { position: relative; z-index: 1; -webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
-ms-transition: -ms-transform 0.6s ease;                                                                                                                      
-o-transition: -o-transform 0.6s ease;                                                                                                                        
transition: transform 0.6s ease;}                                                                                                                             
.active-sidebar, .active-sidebar body { overflow: hidden; height: 100%; }                                                                                                      
.active-sidebar #page { -ms-transform: translate(270px, 0);                                                                                                     
-webkit-transform: translate3d(270px, 0, 0);                                                                                                                    
-moz-transform: translate3d(270px, 0, 0);                                                                                                                       
-ms-transform: translate3d(270px, 0, 0);                                                                                                                        
-o-transform: translate3d(270px, 0, 0);                                                                                                                         
transform: translate3d(270px, 0, 0);                                                                                                                            
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);                                                                                                              
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);                                                                                                                 
box-shadow: 0 0 10px rgba(0,0,0,0.2); }                                                                                                                       
                                                                                                                                                             
#navsidebar { opacity: 0; z-index:0; position: fixed; top: 0; height: 100%; display: block; overflow-y: auto; overflow-x: hidden; background: #1e2a38; }                                 
#navsidebar {width: 540px; -webkit-transition: opacity 0.5s ease-in-out;                                                                                       
                         -moz-transition: opacity 0.5s ease-in-out;                                                                                          
                         -o-transition: opacity 0.5s ease-in-out;                                                                                            
                         transition: opacity 0.5s ease-in-out; -webkit-text-size-adjust: none; }                                                                                         
.active-sidebar #navsidebar { opacity: 1; background: #1e2a38; }   

.nav_list li ul { position: absolute; top: 0; left: 270px; width: 270px; display: none; z-index: 100; } 

#navsidebar { -webkit-transition: -webkit-transform 0.6s ease;
 -moz-transition: -moz-transform 0.6s ease;
    -ms-transition: -ms-transform 0.6s ease;
       -o-transition: -o-transform 0.6s ease;
          transition: transform 0.6s ease;}  

.module h4, .module ul { width: 270px;}

#header { background: #054085; height: 45px; }
#header a { color: #fff; }
.hamburger_wrapper { position: absolute; left: 7px; top: 14px; }
.hamburger { background: url(../images/hamburger.png); display: block; color: #fff; width: 23px; height: 17px; background-size: 23px 17px; text-indent: -9999px; }
.logo { height: 28px; width: auto; margin-top: 2px; }
#header h1 { display: block; text-align: center; overflow: hidden;  }
#header h1 a { display: inline-block; }
#header h1 img { }
#header .avatar_wrapper { position: absolute; right: 7px; display: block; float: right; }
#header .avatar, .nav_wrapper .avatar {  display: inline-block; width: 35px; height: 36px; margin-top: 4px; }
#header .avatar_img, .nav_wrapper .avatar_img { border-radius: 50%; max-width: 36px; height: auto; }
#header .avatar_img.no_img, .nav_wrapper .avatar_img.no_img { background: #fff; }
#header .login { display: inline-block; position: absolute; right: 7px; line-height: 45px; font-weight: bold; }


.nav_wrapper { margin-bottom: 35px; }
.nav_wrapper a { color: #bdc2c7; }

.nav_wrapper .module { margin-bottom: 35px; clear: both; }


.search { background: #28384a; padding: 0; text-align: center; margin: 0 0 20px 0; height: 45px; max-width: 270px; }
::-webkit-input-placeholder, input:-moz-placeholder { color: #bdc2c7; }
.search form input { background: rgba(255, 255, 255, 0.2); width: 86%; margin: 7px auto 0; border: none; height: 30px; border-radius: 4px; padding: 4px 15px; color: #fff; }
.nav_wrapper .avatar { margin-top: 0; }

.nav_wrapper h4.heading { font-size: 11px; color: #bdc2c7; padding: 6px 0 4px 20px; margin-bottom: 0; border-bottom: 1px solid #636161; font-weight: 100; text-transform: uppercase; letter-spacing: 2px; }
ul.nav_list { background-color: inherit; }
ul.nav_list li, ul.nav_list li:last-child { border-bottom: 1px solid #636161; padding: 0; }
ul.nav_list li a { font-size: 14px; padding: 15px 0 15px 20px; color: #bdc2c7; display: block; margin: 0; font-weight: 700; }
.desktop_site { margin-top: 30px; margin-left: 20px; }
.desktop_site a { font-size: 14px; line-height: 20px; display: block; vertical-align: top; }
.desktop_site img { max-height: 20px; height: auto; margin-right: 5px; display: inline-block; }
.user { margin: 0 0 20px 20px; }
.user h3, .user .avatar_wrapper { display: inline-block; vertical-align: middle; }
.user .avatar_wrapper { width: 50px; margin-right: 6px; }
.user h3 { font-weight: 400; font-size: 15px; }
.user .avatar img { max-width: 50px; height: auto; }

.nav_list .arrow { background-image: url(../images/arrow-right.png); background-size: 10px 16px; background-repeat: no-repeat; background-position: 96% 50%; }
.nav_list .arrow.left { background-image: url(../images/arrow-left.png); background-position: 4% 50%; border-bottom: none; background-color: #28384a; }
.nav_list .back_button { padding-left: 32px; }

#page #nav { display: none; }