.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; }
.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; }