nav.agrikon-shape-overlay-menu a {
text-decoration: none;
color: #5d93d8;
color: #fff;
outline: none;
}
nav.agrikon-shape-overlay-menu a:hover,
nav.agrikon-shape-overlay-menu a:focus {
color: #423c2b;
color: #2735da;
outline: none;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
nav.agrikon-shape-overlay-menu.is-opened-navi {
z-index: 9999;
}
nav.agrikon-shape-overlay-menu .content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
pointer-events: none;
}
nav.agrikon-shape-overlay-menu.is-opened-navi .content {
height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}  .global-menu {
width: 100vw;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 100;
}
.demo-5 .global-menu {
text-align: center;
}
.global-menu__item {
color: 171616;
font-size: 3vmax;
font-weight: 700;
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
display: block;
margin: 0.25em 0;
transition: transform 0.3s, opacity 0.3s;
transition-timing-function: ease-in;
}
.global-menu__item--demo-2:nth-child(odd) {
transform: translateY(-100%) rotate(10deg);
}
.global-menu__item--demo-2:nth-child(even) {
transform: translateY(-100%) rotate(-10deg);
}
.global-menu__item--demo-3 {
transition: transform 0.1s, opacity 0.1s;
transform: translateY(100%);
transition-timing-function: ease-out;
}
.global-menu__item--demo-4,
.global-menu__item--demo-5 {
transition: transform 0.1s, opacity 0.1s;
transition-timing-function: ease-out;
}
.global-menu__item--demo-4 {
transform: translateX(40%);
}
.global-menu__item--demo-5:nth-child(odd) {
transform: translateX(100%) rotate(10deg) scale(0.5);
}
.global-menu__item--demo-5:nth-child(even) {
transform: translateX(100%) rotate(-10deg) scale(0.5);
}
.global-menu__item--demo-6 {
transform: translateY(100%);
}
.global-menu__item:hover {
color: #ffffff;
}
.global-menu__item.is-opened {
opacity: 1;
transform: translateY(0) rotate(0);
pointer-events: auto;
transition-timing-function: ease;
}
.global-menu__item--demo-4.is-opened,
.global-menu__item--demo-5.is-opened {
transform: translateX(0) rotate(0);
}
.global-menu__item--demo-4.is-opened {
transition-timing-function: cubic-bezier(0.230, 1.000, 0.355, 1.400);
}
.global-menu__item:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item.is-opened:nth-of-type(1) {
transition-delay: 0.85s;
}
.global-menu__item:nth-of-type(2) {
transition-delay: 0.05s;
}
.global-menu__item.is-opened:nth-of-type(2) {
transition-delay: 0.8s;
}
.global-menu__item:nth-of-type(3) {
transition-delay: 0.1s;
}
.global-menu__item.is-opened:nth-of-type(3) {
transition-delay: 0.75s;
}
.global-menu__item:nth-of-type(4) {
transition-delay: 0.15s;
}
.global-menu__item.is-opened:nth-of-type(4) {
transition-delay: 0.7s;
}
.global-menu__item:nth-of-type(5) {
transition-delay: 0.2s;
}
.global-menu__item.is-opened:nth-of-type(5) {
transition-delay: 0.65s;
}
.global-menu__item:nth-of-type(6) {
transition-delay: 0.25s;
}
.global-menu__item.is-opened:nth-of-type(6) {
transition-delay: 0.6s;
}
.global-menu__item:nth-of-type(7) {
transition-delay: 0.3s;
}
.global-menu__item.is-opened:nth-of-type(7) {
transition-delay: 0.55s;
}
.global-menu__item:nth-of-type(8) {
transition-delay: 0.35s;
}
.global-menu__item.is-opened:nth-of-type(8) {
transition-delay: 0.5s;
} .global-menu__item--demo-2:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item--demo-2.is-opened:nth-of-type(1) {
transition-delay: 0.85s;
}
.global-menu__item--demo-2:nth-of-type(2) {
transition-delay: 0.05s;
}
.global-menu__item--demo-2.is-opened:nth-of-type(2) {
transition-delay: 0.8s;
}
.global-menu__item--demo-2:nth-of-type(3) {
transition-delay: 0.1s;
}
.global-menu__item--demo-2.is-opened:nth-of-type(3) {
transition-delay: 0.75s;
}
.global-menu__item--demo-2:nth-of-type(4) {
transition-delay: 0.15s;
}
.global-menu__item--demo-2.is-opened:nth-of-type(4) {
transition-delay: 0.7s;
} .global-menu__item--demo-3.is-opened {
transition-duration: 0.3s;
}
.global-menu__item--demo-3:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item--demo-3.is-opened:nth-of-type(1) {
transition-delay: 0.65s;
}
.global-menu__item--demo-3:nth-of-type(2) {
transition-delay: 0s;
}
.global-menu__item--demo-3.is-opened:nth-of-type(2) {
transition-delay: 0.7s;
}
.global-menu__item--demo-3:nth-of-type(3) {
transition-delay: 0s;
}
.global-menu__item--demo-3.is-opened:nth-of-type(3) {
transition-delay: 0.75s;
}
.global-menu__item--demo-3:nth-of-type(4) {
transition-delay: 0s;
}
.global-menu__item--demo-3.is-opened:nth-of-type(4) {
transition-delay: 0.8s;
} .global-menu__item--demo-4.is-opened {
transition-duration: 0.6s;
}
.global-menu__item--demo-4:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item--demo-4.is-opened:nth-of-type(1) {
transition-delay: 0.45s;
}
.global-menu__item--demo-4:nth-of-type(2) {
transition-delay: 0.05s;
}
.global-menu__item--demo-4.is-opened:nth-of-type(2) {
transition-delay: 0.5s;
}
.global-menu__item--demo-4:nth-of-type(3) {
transition-delay: 0.1s;
}
.global-menu__item--demo-4.is-opened:nth-of-type(3) {
transition-delay: 0.55s;
}
.global-menu__item--demo-4:nth-of-type(4) {
transition-delay: 0.15s;
}
.global-menu__item--demo-4.is-opened:nth-of-type(4) {
transition-delay: 0.6s;
} .global-menu__item--demo-5.is-opened {
transition-duration: 0.4s;
}
.global-menu__item--demo-5:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item--demo-5.is-opened:nth-of-type(1) {
transition-delay: 0.55s;
}
.global-menu__item--demo-5:nth-of-type(2) {
transition-delay: 0.05s;
}
.global-menu__item--demo-5.is-opened:nth-of-type(2) {
transition-delay: 0.6s;
}
.global-menu__item--demo-5:nth-of-type(3) {
transition-delay: 0.1s;
}
.global-menu__item--demo-5.is-opened:nth-of-type(3) {
transition-delay: 0.65s;
}
.global-menu__item--demo-5:nth-of-type(4) {
transition-delay: 0.15s;
}
.global-menu__item--demo-5.is-opened:nth-of-type(4) {
transition-delay: 0.7s;
} .global-menu__item--demo-6.is-opened {
transition-duration: 0.8s;
}
.global-menu__item--demo-6:nth-of-type(1) {
transition-delay: 0.25s;
}
.global-menu__item--demo-6.is-opened:nth-of-type(1) {
transition-delay: 1s;
}
.global-menu__item--demo-6:nth-of-type(2) {
transition-delay: 0.2s;
}
.global-menu__item--demo-6.is-opened:nth-of-type(2) {
transition-delay: 1.1s;
}
.global-menu__item--demo-6:nth-of-type(3) {
transition-delay: 0.15s;
}
.global-menu__item--demo-6.is-opened:nth-of-type(3) {
transition-delay: 1.2s;
}
.global-menu__item--demo-6:nth-of-type(4) {
transition-delay: 0.1s;
}
.global-menu__item--demo-6.is-opened:nth-of-type(4) {
transition-delay: 1.3s;
}
.shape-overlays {
width: 100vw;
height: 100vh;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
.shape-overlays.is-opened {
pointer-events: auto;
}
.shape-overlays__path:nth-of-type(1) {
fill: #413f46;
}
.shape-overlays__path:nth-of-type(2) {
fill: #e6e5ea;
}
.shape-overlays__path:nth-of-type(3) {
fill: #cccccc;
}
.shape-overlays__path:nth-of-type(4) {
fill: #0d1831;
}
@-webkit-keyframes intervalHamburgerBorder {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
@keyframes intervalHamburgerBorder {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
.agrikon-shape-overlay-menu .hamburger-wrapper {
position: relative;
display: flex;
z-index: 999999;
align-items: center;
justify-content: center;
}
.agrikon-shape-overlay-menu .hamburger {
width: 64px;
height: 64px;
display: block;
cursor: pointer;
position: relative;
border-radius: 50%;
background-color: #fff;
pointer-events: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.agrikon-shape-overlay-menu .hamburger:not(.anim-off)::after {
width: 64px;
height: 64px;
box-sizing: border-box;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
border: 4px solid #6b6b6b;
border-radius: 50%;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-name: intervalHamburgerBorder;
animation-name: intervalHamburgerBorder;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.hamburger__line {
width: 28px;
height: 2px;
overflow: hidden;
position: absolute;
z-index: 10;
}
.hamburger__line-in {
width: 84px;
height: 2px;
position: absolute;
top: 0;
left: 0;
}
.hamburger__line-in::before,
.hamburger__line-in::after {
width: 28px;
height: 2px;
content: '';
display: block;
position: absolute;
top: 0;
background-color: #222;
}
.hamburger__line-in::before {
left: -56px;
}
.hamburger__line-in::after {
left: 0;
}
.hamburger__line--01,
.hamburger__line--02,
.hamburger__line--03,
.hamburger__line--cross01,
.hamburger__line--cross02 {
left: 18px;
}
.hamburger__line--01 {
top: 24.6px;
}
.hamburger__line--02,
.hamburger__line--cross01,
.hamburger__line--cross02 {
top: 31px;
}
.hamburger__line--03 {
top: 37.4px;
}
.hamburger__line--cross01 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.hamburger__line--cross02 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hamburger__line {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger__line-in {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger__line-in::before,
.hamburger__line-in::after {
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.hamburger__line-in--cross01,
.hamburger__line-in--cross02 {
-webkit-transform: translateX(-33.3%);
transform: translateX(-33.3%);
}
.hamburger__line-in--01 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.hamburger__line-in--02 {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.hamburger__line-in--02::before,
.hamburger__line-in--02::after {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hamburger__line-in--03 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.hamburger__line-in--03::before,
.hamburger__line-in--03::after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hamburger__line-in--cross01 {
-webkit-transition-delay: 0.0s;
transition-delay: 0.0s;
}
.hamburger__line-in--cross02 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hamburger__line-in--cross02::before,
.hamburger__line-in--cross02::after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hamburger.is-opened-navi .hamburger__line-in--01,
.hamburger.is-opened-navi .hamburger__line-in--02,
.hamburger.is-opened-navi .hamburger__line-in--03 {
-webkit-transform: translateX(33.3%);
transform: translateX(33.3%);
}
.hamburger.is-opened-navi .hamburger__line-in--cross01,
.hamburger.is-opened-navi .hamburger__line-in--cross02 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.hamburger.is-opened-navi .hamburger__line-in--01 {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.hamburger.is-opened-navi .hamburger__line-in--02 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hamburger.is-opened-navi .hamburger__line-in--03 {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hamburger.is-opened-navi .hamburger__line-in--cross01 {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.hamburger.is-opened-navi .hamburger__line-in--cross02 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.hamburger:hover .hamburger__line-in::before,
.hamburger:hover .hamburger__line-in::after {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
.hamburger:hover .hamburger__line-in--01::before,
.hamburger:hover .hamburger__line-in--01::after,
.hamburger:hover .hamburger__line-in--02::before,
.hamburger:hover .hamburger__line-in--02::after,
.hamburger:hover .hamburger__line-in--03::before,
.hamburger:hover .hamburger__line-in--03::after {
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.hamburger:hover .hamburger__line-in--cross01::before,
.hamburger:hover .hamburger__line-in--cross01::after,
.hamburger:hover .hamburger__line-in--cross02::before,
.hamburger:hover .hamburger__line-in--cross02::after {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.hamburger.is-opened-navi:hover .hamburger__line-in--cross01::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--cross01::after,
.hamburger.is-opened-navi:hover .hamburger__line-in--cross02::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--cross02::after {
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.hamburger.is-opened-navi:hover .hamburger__line-in--01::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--01::after,
.hamburger.is-opened-navi:hover .hamburger__line-in--02::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--02::after,
.hamburger.is-opened-navi:hover .hamburger__line-in--03::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--03::after {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
@media screen and (max-width: 55em) {
.agrikon-shape-overlay-menu .hamburger {
transform: scale(0.75);
}
.content {
height: auto;
min-height: 0;
flex-direction: column;
}
}