.scroll-lock{
overflow-y:hidden;
}
.dt-hamburger-menu {
z-index: 999;
position: relative;
margin: auto;
width: 30px;
height: 30px;
cursor: pointer;
}
.dt-hamburger-menu .dt-hamburger {
position: relative;
transform: translateY(10px);
background: #ffffff;
transition: all 0.3s ease-in-out;
}
.dt-hamburger-menu .dt-hamburger,
.dt-hamburger-menu .dt-hamburger:after,
.dt-hamburger-menu .dt-hamburger:before {
width: 30px;
height: 3px;
}
.dt-hamburger-menu .dt-hamburger:after,
.dt-hamburger-menu .dt-hamburger:before {
content: "";
position: absolute;
left: 0;
bottom: 10px;
background: #ffffff;
}
.dt-hamburger-menu .dt-hamburger:before {
transition: all 0.3s ease-in-out;
bottom: 10px;
transform-origin: center;
}
.dt-hamburger-menu .dt-hamburger:after {
top: 10px;
transition: all 0.3s ease-in-out;
transform-origin: center;
}
.dt-hamburger-menu .dt-hamburger.menu-opened{
background:transparent;
transition: all 0.3s ease-in-out;
}
.dt-hamburger-menu .dt-hamburger.menu-opened:before{
bottom: 0px;
transition: all 0.3s ease-in-out;
transform:rotate(45deg);
transform-origin: center;
}
.dt-hamburger-menu .dt-hamburger.menu-opened:after{
top: 0px;
transition: all 0.3s ease-in-out;
transform:rotate(-45deg);
transform-origin: center;
}
.dt-mask{
position:fixed;
top: 0px;
left:0px;
height: 100vh;
width:100%;
background: #333;
opacity:0;
z-index: -100;
pointer-events: none;
}
.dt-mask.show{
opacity:0.5;
z-index: 200;
pointer-events: all;
}
.dt-mobile-menu--wrapper {
opacity: 1;
position: fixed;
top:0;
left:-450px;
height: 100vh;
width: 450px;
background: #333333;
transition: left 0.8s ease-in-out;
z-index: 300;
padding:40px 40px 40px 40px;
overflow-x:hidden;
overflow-y: scroll;
overscroll-behavior: contain;
scrollbar-color: #ffffff50 transparent;
}
.dt-mobile-menu--wrapper--open{
left: 0px;
}
@media (max-width:767px){
.dt-mobile-menu--wrapper {
left:-100vw;
width:100vw
}
.dt-mobile-menu--wrapper--open{
left: 0px;
padding:20px 20px 20px 20px;
}
}
.dt-mobile-menu--wrapper .dt-mobile-menu:not(:first-of-type) {
display: none;
}
.dt-mobile-menu--wrapper .dt-mobile-menu:first-of-type .dt-mobile-menu-back-button {
display: none;
}
.dt-mobile-menu--wrapper .dt-mobile-menu {
font-family:sans-serif;
padding:0;
margin:0;
}
.dt-mobile-menu--wrapper .dt-mobile-menu > ul{
list-style: none;
padding:0;
margin:0;
}
.dt-mobile-menu--wrapper .dt-mobile-menu > ul > li{
padding:0;
margin:0;
}
.dt-mobile-menu--wrapper .dt-mobile-menu > ul > li > a{
display: block;
}
.dt-mobile-menu--wrapper .dt-mobile-menu a{
color:#ffffff;
}
.dt-mobile-menu--wrapper .dt-mobile-menu .dt-mobile-menu-back-button{
display:flex;
align-items: center;
gap:5px;
}
.dt-mobile-menu--wrapper .dt-mobile-menu .dt-mobile-menu-back-button:before{
font-size:10px;
content:'\25C0';
}
.dt-mobile-menu--wrapper .dt-mobile-menu .dt-mobile-menu-sub-menu{
display:flex;
justify-content: space-between;
align-items: center;
}
.dt-mobile-menu--wrapper .dt-mobile-menu .dt-mobile-menu-sub-menu:after{
font-size:10px;
content:'\25B6';
}
.dt-mobile-menu--wrapper .dt-mobile-menu.slide-left-in {
animation: 0.3s slide-left-in;
}
.dt-mobile-menu--wrapper .dt-mobile-menu.slide-right-in {
animation: 0.3s slide-right-in;
}
.dt-mobile-menu--wrapper .dt-mobile-menu.slide-left-out{
animation: 0.3s slide-left-out;
}
.dt-mobile-menu--wrapper .dt-mobile-menu.slide-right-out {
animation: 0.3s slide-right-out;
}
@keyframes slide-left-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0%);
}
}
@keyframes slide-right-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}