.offcanvas-collapse {
position: fixed;
top: 0px; /* Height of navbar */
bottom: 0;
right: 100%;
left:-300px;
width: 300px;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #1D1D1B;
transition-timing-function: ease-in-out;
transition-duration: .3s;
transition-property: left, visibility;
}
.offcanvas-collapse {
align-items:start;
/*   Adds a subtle drop shadow   */
-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
border-right:5px solid rgb(211, 83, 26);
}
/* Makes the nav visibile with the open class */
.offcanvas-collapse.open {
left: 0;
top: 0;
visibility: visible;
}
.navbar-expand-lg .navbar-nav {
-ms-flex-direction: column;
flex-direction: column;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
color: #6c757d;
}
.nav-underline .nav-link:hover {
color: #007bff;
}
.nav-underline .active {
font-weight: 500;
color: #1D1D1B;
}
.navbar-dark .navbar-toggler {
color: rgba(255, 255, 255, 0);
border-color: rgba(255, 255, 255, 0);
}
.scroll-title {
display: none;
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: auto;
}
.scroll-title  h2 {
text-align: center;
color: #fff;
font-size: 1.1em;
margin: 0;
padding: 5px 0 5px 0;
}
/* Icon 1 */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
width: 60px;
height: 45px;
position: relative;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #f64338;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* Icon 2 */
#nav-icon2 {
display: none;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease
}
#nav-icon2 span {
display: block;
position: absolute;
height: 9px;
width: 50%;
background: #f64338;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon2 span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}
#nav-icon2 span:nth-child(odd) {
left:0px;
border-radius: 9px 0 0 9px;
}
#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
top: 0px;
}
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
top: 18px;
}
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
top: 36px;
}
#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon2.open span:nth-child(1) {
left: 5px;
top: 7px;
}
#nav-icon2.open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
#nav-icon2.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
#nav-icon2.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
#nav-icon2.open span:nth-child(5) {
left: 5px;
top: 29px;
}
#nav-icon2.open span:nth-child(6) {
left: calc(50% - 5px);
top: 29px;
}
.top-bar {
width: 100%;
position: relative;
background: #1D1D1B;
border-bottom: 2px solid #333;
color: #fff;
font-family: 'Galano Grotesque';
text-transform: uppercase;
font-weight: 600;
}
.top-bar a {
color: #fff;
}
#menu-one li {
display: inline-block;
transition-duration: 0.5s;
position: relative;
padding-left: .5em;
padding-right: .5em;
}
#menu-one  ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
left: 0;
display: none;
z-index: 99999;
background: #1D1D1B;
padding-inline-start: 0;
padding: 0 1em 0 1em;
}
#menu-one ul li:hover >  ul, #menu-one ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
#menu-one ul li ul li {
clear: both;
width: max-content;
}
.top-bar li {
padding: .5em 0 .5em 0;
}
.top-bar li.active {
border-bottom: 5px solid #f64338;
}
#menu-two ul {
list-style: none;
padding: 0;
}
#menu-two li {
margin: .5em 0 .5em 0;
}
#menu-two a {
color: #fff;
font-family: 'Galano Grotesque';
font-weight: 700;
}
#menu-two ul.sub-menu {
padding-left: 40px;
}
@media (max-width: 575.98px) {
.top-bar {
display: none;
}
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
top: 10px;
}
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
top: 20px;
}
#nav-icon2 span:nth-child(even) {
left: 30%;
border-radius: 0 9px 9px 0;
}
#nav-icon2 span {
display: block;
position: absolute;
height: 5px;
width: 30%;
background: #f64338;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
width: 50px;
height: 30px;
position: relative;
    margin: 0px -25px 0em 0em;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
}