.comple{
z-index: 100;
position: relative;
max-width: 100%;
margin: 3em auto;
padding: 2em 2.5em 1em 1.5em;
border-radius: 3px;
border: 1px dashed #A68B62;
}
.comple::before,
.comple::after {
position: absolute;
content: '';
}
.comple::before {
top: -15px;
right: 10px;
height: 50px;
width: 15px;
border: 3px solid #999;
border-radius: 10px;
box-shadow: 1px 1px 2px rgb(0 0 0 / 30%);
transform: rotate(10deg);
}
.comple::after {
top: 0;
width: 10px;
right: 20px;
border: solid 5px #fff;
} .hamburger {
width: 26px;
height: 18px;
position: relative;
}
.hamburger span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #333;
display: block;
transform-origin: center;
backface-visibility: hidden;
transform: translateZ(0);
} .hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 7px; }
.hamburger span:nth-child(3) { top: 14px; } .hamburger.active span:nth-child(1) {
transform: rotate(45deg);
top: 7px;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg);
top: 7px;
}
.js-nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
opacity: 0;
transform: translateY(-20px); pointer-events: none;
transition:
transform .45s cubic-bezier(.22, 1, .36, 1),
opacity .35s ease;
} .js-nav.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
} .fade-in {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s ease, transform 1s ease;
}
.fade-in.show {
opacity: 1;
transform: translateY(0);
} img.fade-in {
display: block;
}