/* z-index */
.modal {
z-index: 1000;
}
.m-toggle {
z-index: 1001;
}
/* Modal Base Styles */
.modal {
overflow: hidden;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 1.0);
opacity: 0;
pointer-events: none;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transform: translateY(10px) scale(0.98);
will-change: transform, opacity;
}
.modal.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* Toggle Button */
.m-toggle {
position: fixed;
top: 34px;
right: 35px;
width: 50px;
height: 50px;
background: black;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out;
border-radius: 0;
}
.m-toggle::before,
.m-toggle::after,
.m-toggle .middle-line {
content: '';
position: absolute;
width: 28px;
height: 4px;
background: #f5f5f5;
transition: 0.2s;
}
.m-toggle::before {
transform: translateY(-10px);
}
.m-toggle::after {
transform: translateY(10px);
}
.m-toggle .middle-line {
background: #f5f5f5;
}
.m-toggle.active::before {
transform: translateY(0px) rotate(45deg);
}
.m-toggle.active::after {
transform: translateY(0px) rotate(-45deg);
}
.m-toggle.active .middle-line {
opacity: 0;
}
.m-toggle.active::before,
.m-toggle.active::after,
.m-toggle.active .middle-line {
background: #f3b104;
/*			background-color: #f8d329;*/
}
.m-toggle:hover::before,
.m-toggle:hover::after,
.m-toggle:hover .middle-line {
background-color: #131315;
}
.m-toggle:hover {
background-color: #f3b104;
/*			background-color: #f8d329;*/
}
/* Modal Content */
.modal-content {
width: 100%;
max-width: 1800px;
height: 100vh;
padding: 6rem 1rem 2rem 1rem;
margin: 0 auto;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.modal-content::-webkit-scrollbar {
display: none;
}
@media (max-width: 734px) {
.m-toggle {
position: fixed;
top: 20px;
right: 19px;
width: 50px;
height: 50px;
background: black;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
}