html {
position: relative;
min-height: 100%;
}
html,
body {
overflow-x: hidden; }
body {     min-height: 100%;
height: auto;
height: 100%;
} @media screen and (max-width: 767.98px) {
.off-canvas {
position: relative;
min-height: 100%;
-webkit-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.off-canvas-right {
right: 0;
}
.off-canvas-right.off-canvas-active {
right: 300px;
}
.off-canvas-right .sidebar-off-canvas {
right: -100%;
-webkit-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
border-left-color: #e7e7e7;
}
.off-canvas-right.off-canvas-active .sidebar-off-canvas {
right: 0;
border-left: 1px solid #e7e7e7;
}
.sidebar-off-canvas {
position: fixed;
top: 0;
bottom: 0;
width: 300px;
padding: 60px 15px 15px;
border-radius: 0;
overflow-y: auto;
z-index: 1050;
}
.sidebar-off-canvas .dropdown-menu {
border: medium none;
background: none;
border-radius: 0;
box-shadow: none;
float: none;
margin: 0;
padding-top: 0;
position: static;
}
.navbar-toggler {
z-index: 1060;
}
} .footer {   width: 100%;  line-height: 60px;  -webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
}
@media screen and (max-width: 767.98px) {
.footer.off-canvas-right.off-canvas-active {
right: 300px;
}
} .icon-bar {
width: 1.5rem;
height: 0.125rem;
border-radius: 1rem;
background-color: white;
display: block;
transition: all 0.2s;
}
.navbar-toggler:hover { }
.navbar-toggle-icon {
position: relative;
cursor: pointer;
display: inline-block;
vertical-align: middle;
padding-bottom: 0.125rem;
}
.navbar-toggler .top-bar {
transform: rotate(0);
transform-origin: 1.5% 1.5%;
background-color: blue;
}
.navbar-toggler .middle-bar {
margin-top: 0.375rem;
opacity: 1;
background-color: blue;
}
.navbar-toggler .bottom-bar {
margin-top: 0.375rem;
transform: rotate(0);
transform-origin: 1.5% 98.5%;
background-color: blue;
}
.off-canvas-active .navbar-toggler .top-bar {
transform: translate(4px)rotate(45deg);
background-color: blue;
}
.off-canvas-active .navbar-toggler .middle-bar {
opacity: 0;
}
.off-canvas-active .navbar-toggler .bottom-bar {
transform: translate(4px)rotate(-45deg);
}