.sidr{
  display:block;
  position:fixed;
  top:0;
  height:100%;
  z-index:499;
  width:400px;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.33);
  -moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.33);
  box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.33);

 }

.sidr.right{
  left:auto;
  right:-450px;
 }

.sidr.left{
  left:-450px;
  right:auto;
}


/*------------------------------
SIDR
------------------------------*/

.sidr{
    background: rgba(65,65,67,1);
    color: rgba(255,255,255,1);
    border-left:solid 4px rgba(255,255,255,1);
}

.sidr > .sidr-inner:first-child{
    padding: 100px 30px 0px 30px;
    text-align: left;
    -webkit-transition: all 0.25s ease;
       -moz-transition: all 0.25s ease;
         -o-transition: all 0.25s ease;
        -ms-transition: all 0.25s ease;
            transition: all 0.25s ease;
}

.sidr > .sidr-inner{
    padding: 20px 30px 50px 30px;
}
.scrolled .sidr > .sidr-inner:first-child{padding: 120px 30px 0px 30px;}

/*-- TOP LEVEL --*/

.sidr > .sidr-inner > ul{
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidr > .sidr-inner > ul > li{
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align:left;
}

.sidr > .sidr-inner:first-child > ul > li{
  border-bottom:0;
}
.sidr > .sidr-inner:first-child > ul.sidr-class-horizontal{text-align:left;}
.sidr > .sidr-inner:first-child > ul.sidr-class-horizontal >li{margin-right:10px !important;}


.sidr > .sidr-inner > ul > li > a{
    font-family: 'Brown', sans-serif;
    display: block;
    color: rgba(255,255,255,1);
    font-size: 2rem;
    padding: 10px 0;
}

.sidr > .sidr-inner > ul > li > a:hover{
    color: rgba(72,103,255,1)
}

/*-- SECOND LEVEL --*/

.sidr > .sidr-inner > ul > li > ul{
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 7.5px;
}

.sidr > .sidr-inner > ul > li > ul > li{
    display: block;
    margin: 0;
    padding: 0;
    padding-left: 15px;
}

.sidr > .sidr-inner > ul > li > ul > li > a{
    display: block;
    font-size: 1.6rem;
    padding: 7.5px 0;
    color: rgba(255,255,255,0.75);
}

.sidr > .sidr-inner > ul > li > ul > li > a:hover{
    color: rgba(72,103,255,1)
}

/*-- THIRD LEVEL --*/

.sidr > .sidr-inner > ul > li > ul > li > ul{
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidr > .sidr-inner > ul > li > ul > li > ul > li{
    display: block;
    margin: 0;
    padding: 0;
    padding-left: 15px;
}

.sidr > .sidr-inner > ul > li > ul > li > ul > li > a{
    display: block;
    font-size: 1.4rem;;
    padding: 7.5px 0;
    color: rgba(255,255,255,0.5);
}

.sidr > .sidr-inner > ul > li > ul > li > ul > li > a:hover{
    color: rgba(72,103,255,1)
}

/*-- FOURTH LEVEL --*/

.sidr > .sidr-inner > ul > li > ul > li > ul > li > ul{
    display: none;
}

.sidr > .sidr-inner > ul > li > ul.sidr-class-sub-menu{display:none;}
.sidr-class-menu-item{
    position:relative;

}
.sidr-class-menu-item .button{
    position:absolute;
    right:0px;top:10px;
    margin:0;
    width:34px;
    height:34px;
    line-height:34px;
    font-size: 3rem;
    font-family: 'Lora', serif;
    font-weight:300;
    vertical-align: middle;
    cursor:pointer;
    text-align:center;
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
            transition: all 0.5s ease;
}
.sidr-class-menu-item .button:hover{color: rgba(72,103,255,1);}
.sidr > .sidr-inner > ul > li > a{
    display: block;
    font-size: 2rem;
    letter-spacing: 0.10em;
    padding: 15px 0 15px 0;
    color: rgba(255,255,255,1);
    width:calc(100% - 40px);
}

@media (max-width: 700px){
    .sidr{width:100%;}
    .sidr.right{
      left:auto;
      right:-120%;
      }

    .sidr.left{
      left:-120%;
      right:auto;
    }

    .sidr{border-left:0;}
    .sidr > .sidr-inner{padding:20px 5% 20px 5%;}
    .sidr > .sidr-inner:first-child{padding:120px 5% 20px 5%;}

}