.menu-mobile {
position: absolute;
margin-top: 100px;
}
#main-left {
padding-right: 20px;
z-index: 9999;
}
#main-left li {
line-height: 35px;
}
#left-menu ul {
position:relative;
list-style: none;
padding: 0;
margin: 0;
}
.main-left-but {
z-index: 9999;
position: absolute;
left: 20px;
height: 46px;
width: 50px;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.menu-left {
height: fit-content;
padding: 20px;
width: fit-content;
position: relative;
z-index: 999;
left: 0;
background-color: #000; 
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-fill-mode: none;
animation-fill-mode: none; 
}
#main-left .fa-sort-down {
position: absolute;
z-index: 999;
right: -10px;
color: #C0C0C0;
font-size: 26px;
padding: 10px; }
.fa-sort-down{
-moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.fa-sort-down {
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.fa-sort-down:active,
.fa-sort-down:hover,
.fa-sort-down:focus {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.open-arrow:active .fa-sort-down,
.open-arrow:hover .fa-sort-down,
.open-arrow:focus .fa-sort-down {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
#main-left .open-arrow:hover .fa-sort-down {
color: cyan;
cursor: pointer;
}
.open-arrow {
position: absolute;
z-index: 999;
right: -10px;
color: #C0C0C0;
font-size: 26px;
padding: 10px;
margin-top: -15px;
display: inline-block;
width: 100%;
height: 45px;
cursor: pointer;
}
#main-left .fa-sort-down:hover {
color: cyan;
cursor: pointer;
}
.menu-left a {
color: #C0C0C0;
text-decoration:none;
}
#left-menu .sub-menu li a {
padding-left: 30px;
}
#left-menu ul .sub-menu li a {
padding-left: 50px;
}
#left-menu ul .sub-menu .sub-menu li a {
padding-left: 70px;
}
#left-menu ul .sub-menu .sub-menu .sub-menu li a {
padding-left: 90px;
}
#left-menu ul .sub-menu .sub-menu .sub-menu .sub-menu li a {
padding-left: 110px;
}
#left-menu ul .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a {
padding-left: 120px;
}
#left-menu ul .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a {
padding-left: 130px;
}
#left-menu ul .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a {
padding-left: 140px;
}
.menu-left a {
display: inline-block;
width: 100%;
border-left: 3px solid #000;
padding: 0 10px 0 20px;
padding-right: 40px;
-webkit-transition: all 0.4s linear 0s;
-moz-transition: all 0.4s linear 0s;
-o-transition: all 0.4s linear 0s;
transition: all 0.4s linear 0s;	
}
.menu-left .sub-menu {
display: none;
}
.menu-left .sub-menu .sub-menu {
display: none;
}
.menu-left a:hover {
color: cyan;
border-left: 3px solid cyan;
-webkit-transition: all 0.4s linear 0s;
-moz-transition: all 0.4s linear 0s;
-o-transition: all 0.4s linear 0s;
transition: all 0.4s linear 0s;
}
.menu-left  {
padding: 5px 0;
top: 60px;
}
.menu-left ul {
list-style-type: none;
padding: 0;
}
.bar {
display: block;
height: 5px;
width: 30px;
background-color: #C0C0C0;
margin: 5px auto;
}
.nav-right .button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right .button:hover .bar {
background-color: #fff;
}
.nav-right {
position: fixed;
left: 10px;
top: 6px;
}
.nav-right.visible-xs {
z-index: 3;
}
.hidden-xs {
display: none;
}
.middle {
margin: 0 auto;
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right.visible-xs .active .bar {
background-color: #FFF;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right .button.active .top {
-webkit-transform: translateY(10px) rotateZ(45deg);
-moz-transform: translateY(10px) rotateZ(45deg);
-ms-transform: translateY(10px) rotateZ(45deg);
-o-transform: translateY(10px) rotateZ(45deg);
transform: translateY(10px) rotateZ(45deg);
}
.nav-right .button.active .bottom {
-webkit-transform: translateY(-10px) rotateZ(-45deg);
-moz-transform: translateY(-10px) rotateZ(-45deg);
-ms-transform: translateY(-10px) rotateZ(-45deg);
-o-transform: translateY(-10px) rotateZ(-45deg);
transform: translateY(-10px) rotateZ(-45deg);
}
.nav-right .button.active .middle {
width: 0;
}
.move-to-left {
-webkit-transform: translateX(-400px);
-moz-transform: translateX(-400px);
-ms-transform: translateX(-400px);
-o-transform: translateX(-400px);
transform: translateX(-400px);
}
.sidebar-list-left {
padding: 0;
margin: 0;
list-style: none;
position: relative;
text-align: left;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item.active {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #FFF;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
background-color: #FFF;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before {
width: 100%;
}
@media (min-width: 480px) {
.nav-list {
display: block;
}
}
@media (min-width: 1024px) {
.nav-right {
position: absolute;
}
.hidden-xs {
display: block;
}
.visible-xs {
display: none;
}
} 
@media (max-width: 1024px) {
.main-left-but  {
display: none;
}
.nav-right {
position: relative;
left:0;
top: 0;
padding-left: 10px;
padding-top: 5px;
background: #000;
}
.menu-left {
top: 0;  
}
.menu-mobile, .menu-left {
position: relative;
display: block; 
top: 0 !important;
background: #000;
}
.menu-mobile {
margin-top: 0 !important;
}
}