@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,600|Open+Sans:400,600);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
body{
  background:#efebeb;
  margin-left:100px;
}
.sidebar{
  background:#332f2f;
  position:fixed;
  padding-top:40px;
  top:0px;left:0;bottom:0px;
  width:200px;
  z-index:9999;
  transition:200ms all ease-in-out;
}
.social-bar.up .slidenav{
  left:195px;
  top:-4px !important;
  background:#2D2727;
  padding:0px 5px 0px 3px;
}
.sidebar.up{
  padding-top:0px;
  top:0;
}
.sidebar a.profile li{
  background:url('http://puu.sh/hbBR0/e1bb7d2ca2.png');
  height:60px;
  box-shadow: rgba(0, 0, 0, 0.57) 0px -3px 8px;
  width:60px;
  display:inline-block;
  position:relative;
  z-index:9999;
  color:#332F2F;
  padding:0px;
}
.sidebar a.profile i{
  font-size:56px;
  padding:8px 0px;
  padding-bottom:0px;
}
@media screen and (max-width: 1300px) {
    .sidebar{
      width:100px;
    }
    body{
      margin-left:100px;
    }
    ul.icon{
      display:block !important;
    }
    ul.text{
      display:none;
    }
}
.social-bar.up{
  top:-45px;
}
.slidenav{
  position:fixed;
  top:0;
  left:0;
  transition:400ms all ease-in-out;
}
.social-bar .bar{
  background:#eee;
  height:4px;
  width:35px;
  margin:7px 4px;
  display:block;
  transition:200ms all ease-in-out;
  position:relative;
  top:0;
  left:0;
}
.social-bar.up .slidenav{
  transform:scale(0.8);
  top:-1px;
}
.social-bar.up .bar.middle{
  transform:rotate(90deg);
  width:25px;
  left:1px;
}
.social-bar.up .bar:first-child{
  transform:rotate(-45deg);
  width:15px;
  left:10px;
  top:20px;
}
.social-bar.up .bar:last-child{
  transform:rotate(45deg);
  width:15px;
  left:2px;
  top:-2px;
}
ul.icon{
  display:none;
}
.sidebar ul{
  padding:0;
  margin:0;
}
a{
  text-decoration:none;
}
.sidebar li {
  color: #EEE;
  font-family: 'Titillium Web', sans-serif;
  padding: 4px 12px;
  border-bottom: 1px solid #2D2727;
  transition: 200ms all ease-in-out;
  font-size: 18px;
}
.sidebar li:hover{
  padding-left:16px;
  background:#2D2727;
}
.sidebar a.profile div{
  display:inline-block;
  color:#eee;
  font-size:22px;
  font-family:'Open Sans', sans-serif;
  vertical-align:top;
  padding: 15px 2px;
  text-align: center;
  background: #2D2727;
  width:136px;
}
.social-bar{
  position:fixed;
  top:0;
  left:0px;
  z-index:999999;
  right:0;
  background:#C02323;
  height:40px;
  box-shadow: rgba(0, 0, 0, 0.57)0px 0px 8px;
  transition:200ms all ease-in-out;
}
.social-bar ul{
  float:right;
  margin:0;
  padding:0;
}
.social-bar li{
  color:#efebeb;
  display:inline-block;
  font-family:'Titillium Web', sans-serif;
  padding:8px;
}