.AnKuNavForTilda {
position: fixed;
top: 0;
right: var(--Nav_1920_Slide);
bottom: 0;
width: var(--Nav_1920_Width);
height: 100vh;
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition:-webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition:transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition:transform 900ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 3000;
overflow-y: scroll;
overflow-x: hidden;
}
.AnKuNavForTilda .t396__artboard {
min-height:100vh!important;
height:100vh!important;
}
@media screen and (max-width: 1200px) {
.AnKuNavForTilda,
.PreNavLayer {
width: var(--Nav_1200_Width);
right: var(--Nav_1200_Slide);
}
}
@media screen and (max-width: 960px) {
.AnKuNavForTilda,
.PreNavLayer {
width: var(--Nav_960_Width);
right: var(--Nav_960_Slide);
}
}
@media screen and (max-width: 640px) {
.AnKuNavForTilda,
.PreNavLayer {
width: var(--Nav_640_Width);
right: var(--Nav_640_Slide);
}
}
@media screen and (max-width: 480px) {
.AnKuNavForTilda,
.PreNavLayer {
width: var(--Nav_480_Width);
right: var(--Nav_480_Slide);
}
}
.AnKuNavForTilda.show {
transition-delay:opacity 900ms!important;
-webkit-box-shadow: 0 0 25px 1px black;
box-shadow: 0 0 25px 1px black;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms, -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
}
.NavOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--NavOverlayColor);
opacity: 0;
pointer-events: none;
transition: all 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
z-index: 2900;
}
.NavOverlay.show {
-webkit-transition: opacity 900ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, -webkit-transform 100ms cubic-bezier(0.77, 0, 0.175, 1);
transition: opacity 900ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, -webkit-transform 100ms cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 100ms cubic-bezier(0.77, 0, 0.175, 1), opacity 900ms cubic-bezier(0.77, 0, 0.175, 1) 100ms;
transition: transform 100ms cubic-bezier(0.77, 0, 0.175, 1), opacity 900ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, -webkit-transform 100ms cubic-bezier(0.77, 0, 0.175, 1);
opacity: 1;
pointer-events: all;
z-index: 2900;
}
.PreNavLayer {
position: fixed;
top: 0;
bottom: 0;
right: var(--Nav_1920_Slide);
width: var(--Nav_1920_Width);
height: 100vh;
background-color: var(--PreNavBgColor);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms, -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
z-index: 2950;
}
.PreNavLayer.show {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
}
.NavActive {
height:100vh!important;
overflow:hidden!important;
}
.TriggerAnKuNav {
z-index: 3050!important;
}
.NavIconWrap {
position:fixed;
top: var(--NavTop);
right: var(--NavRight);
left: var(--NavLeft);
padding: 10px;
border-radius: 100%;
overflow: hidden;
background: var(--NavIconWrapColor);
height: 40px;
width: 40px;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.NavIconWrap {
top: var(--NavTop480);
right: var(--NavRight480);
left: var(--NavLeft480);
}
}
.NavIconWrap.open {
background: var(--NavIconActiveWrapColor);
}
.NavIcon {
width: 30px;
height: 20px;
overflow: hidden;
position: relative;
-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;
}
.NavIcon span {
display: block;
position: absolute;
height: 4px;
width: 50%;
background: var(--BurgerColor);
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;
overflow:hidden;
}
.NavIcon.open span {
background: var(--BurgerActiveColor);
}
.NavIcon span:nth-child(even) {
left: 50%;
border-radius: 0 20px 20px 0;
}
.NavIcon span:nth-child(odd) {
left:0px;
border-radius: 20px 0 0 20px;
}
.NavIcon span:nth-child(1), .NavIcon span:nth-child(2) {
top: 0px;
}
.NavIcon span:nth-child(3), .NavIcon span:nth-child(4) {
top: 8px;
}
.NavIcon span:nth-child(5), .NavIcon span:nth-child(6) {
top: 16px;
}
.NavIcon.open span:nth-child(1),.NavIcon.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.NavIcon.open span:nth-child(2),.NavIcon.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.NavIcon.open span:nth-child(1) {
left: 3px;
top: 5px;
}
.NavIcon.open span:nth-child(2) {
left: calc(50% - 5px);
top: 5px;
}
.NavIcon.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
.NavIcon.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
.NavIcon.open span:nth-child(5) {
left: 3px;
top: 12px;
}
.NavIcon.open span:nth-child(6) {
left: calc(50% - 5px);
top: 12px;
}