.global-menu{height:100%;width:100%;z-index:91}.shape-overlays{z-index:9}.global-menu.active{pointer-events:all;visibility:visible;display:flex;z-index:100}.global-menu__item,.global-menu__item:hover{font-style:normal;-webkit-transition:all .2s ease-in;transition:all .2s ease-in;letter-spacing:-.01em;line-height:110%}.global-menu__item{font-weight:350;margin-bottom:32px;color:#fff}.global-menu{-ms-flex-pack:left;justify-content:left;-webkit-box-pack:left}.global-menu .wrapper{position:relative;max-width:1208px}.global-menu .wrapper .global-menu__wrap{position:relative;z-index:10}.global-menu.active .menu-footer,.menu-cover{-webkit-transition-delay:.8s;transition-delay:.8s}.menu-cover{right:-120px;-webkit-transition:all 1s ease-in;transition:all 1s ease-in;position:absolute;opacity:0;top:-200px;z-index:5}.global-menu.active .menu-cover,.global-menu.active .menu-footer,.menu-footer{-webkit-transition:all 1s ease-in;transition:all 1s ease-in;opacity:1}.menu-footer{padding-top:66px;position:absolute;border-top:1px solid #fff;opacity:0;width:100%}.menu-footer p,section#slider .desc,section#slider .title{font-style:normal;color:#fff;line-height:110%}.menu-footer p{font-size:20px;font-weight:400;letter-spacing:-.01em}.menu-footer ul li{margin-right:1%}.demo-1{--path-fill-3:#ccc;--font-size-title:7vmax;--color-link-hover:#2735da;--color-link:#fff;--color-bg:#ddd;--path-fill-1:#413f46;--button-line:#222;--font-weight-menu:700;--font-weight-title:700;--color-info:#fff;--font-family-title:"Montserrat",sans-serif;--color-menu-hover:#fff;--button-bg:#fff;--color-title:#fff;--color-text:#fff;--color-menu:#171616;--font-family-menu:"Montserrat",sans-serif;--path-fill-2:#e6e5ea;--font-size-menu:3vmax;--button-circle:#6b6b6b;--color-main-bg:#171619}.demo-2{--path-fill-3:#30436f;--font-size-title:6vmax;--color-link-hover:#f44e5e;--color-link:#fff;--color-bg:#333;--path-fill-1:#dce3f1;--button-line:#222;--font-weight-menu:200;--font-weight-title:200;--color-info:#fff;--font-family-title:inherit;--color-menu-hover:#fff;--button-bg:#fff;--color-title:#fff;--color-text:#fff;--color-menu:#fff;--font-family-menu:inherit;--path-fill-2:#869ccc;--font-size-menu:4vmax;--path-fill-4:#0d1831;--button-circle:#fff;--color-main-bg:#efcb7b}.demo-3{--path-fill-3:#000;--font-size-title:5vmax;--color-link-hover:#fff;--color-link:#fff;--color-bg:#333;--path-fill-1:#fff;--button-line:#222;--font-weight-menu:400;--font-weight-title:400;--color-info:#fff;--font-family-title:"Arapey",serif;--color-menu-hover:#7ede27;--button-bg:#fff;--color-title:#fff;--color-text:#000;--color-menu:#fff;--path-fill-2:#7ede27;--font-size-menu:3vmax;--button-circle:#ada4a4;--color-main-bg:#24262d}.demo-4{--font-size-title:6vmax;--color-link-hover:#d3eaa2;--color-link:#1b198c;--color-bg:#333;--path-fill-1:#241e84;--button-line:#fff;--font-weight-menu:300;--font-weight-title:300;--color-info:#fff;--font-family-title:"Pompiere",serif;--color-menu-hover:#b2dc53;--button-bg:#b3dc53;--color-title:#fff;--color-text:#fff;--color-menu:#3735d0;--font-family-menu:var(--font-family-title);--path-fill-2:#d3eaa2;--font-size-menu:4vmax;--button-circle:#1b198b;--color-main-bg:#3735d0}.demo-5{--font-size-title:6vmax;--color-link-hover:#c14343;--color-link:#2d2c2b;--color-bg:#333;--path-fill-1:#626262;--button-line:#2d2c2b;--font-weight-menu:400;--font-weight-title:700;--color-info:#fff;--font-family-title:"Playfair Display",serif;--color-menu-hover:#c14343;--button-bg:#fff;--color-title:inherit;--color-text:#626262;--color-menu:#fff;--font-family-menu:var(--font-family-title);--path-fill-2:#1b1a19;--font-size-menu:3.5vmax;--button-circle:#c14343;--color-main-bg:#ece7de}.demo-6{--path-fill-3:url(#gradient3);--font-size-title:8vmax;--color-link-hover:#e83779;--color-link:#110046;--color-bg:#333;--path-fill-1:url(#gradient1);--button-line:#fff;--font-weight-menu:400;--font-weight-title:400;--color-info:#fff;--font-family-title:"Rozha One",serif;--color-menu-hover:#c14343;--button-bg:#120047;--color-title:inherit;--color-text:#120047;--color-menu:#fff;--font-family-menu:var(--font-family-title);--path-fill-2:url(#gradient2);--font-size-menu:3.5vmax;--button-circle:#9236f7;--color-main-bg:#7115d8}.js body{transition:opacity .3s}.js body,.js body.render{opacity:1}a{text-decoration:none;color:#5d93d8;color:var(--color-link);outline:none}a:focus,a:hover{color:#423c2b;color:var(--color-link-hover);outline:none}.icon--keyboard{display:none}.content--fixed{height:100vh;min-height:0;grid-template-columns:50% 50%;padding:1.5em;position:fixed;grid-template-rows:auto auto 4em;max-width:none;top:0;align-content:space-between;left:0;width:100%;grid-template-areas:"header ..." "... ..." "github demos";display:grid}.content--fixed a{pointer-events:auto}.codrops-header{grid-area:header;justify-self:start;position:relative;flex-direction:row;align-self:start;align-items:flex-start;align-items:center;display:flex;z-index:100}.codrops-header__title{padding:.75em 0;font-size:1em;font-weight:700;margin:0}.info{font-weight:700;font-style:italic;color:var(--color-info);margin:0 0 0 1.25em}.github{grid-area:github;justify-self:start;margin:.5em}.demos,.github{align-self:end;display:block}.demos{grid-area:demos;margin-bottom:.5em;position:relative;text-align:center}.demo{margin:0 .15em}.demo:focus,.demo:hover{opacity:.5}.demo span{pointer-events:none;text-transform:lowercase;white-space:nowrap}.demo span:before{content:"#"}a.demo--current{pointer-events:none}.codrops-links{justify-content:center;position:relative;text-align:center;margin:0 1em 0 0;white-space:nowrap;display:flex}.codrops-icon{padding:.25em;margin:.15em;display:inline-block}.demo-title{font-size:var(--font-size-title);font-weight:var(--font-weight-title);color:var(--color-title);font-family:var(--font-family-title)}.global-menu{height:90vh;pointer-events:none;justify-content:center;position:fixed;top:0;align-items:center;left:0;width:100vw;z-index:-1}.demo-5 .global-menu{text-align:center}.global-menu__item{transform:translateY(-100%);pointer-events:none;font-size:var(--font-size-menu);font-weight:var(--font-weight-menu);color:var(--color-menu);opacity:0;margin:.25em 0;font-family:var(--font-family-menu);display:block}.global-menu__item--demo-2:nth-child(odd){transform:translateY(-100%) rotate(10deg)}.global-menu__item--demo-2:nth-child(2n){transform:translateY(-100%) rotate(-10deg)}.global-menu__item--demo-3{transform:translateY(100%)}.global-menu__item--demo-3,.global-menu__item--demo-4,.global-menu__item--demo-5{transition:transform .1s,opacity .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(.5)}.global-menu__item--demo-5:nth-child(2n){transform:translateX(100%) rotate(-10deg) scale(.5)}.global-menu__item--demo-6{transform:translateY(100%)}.global-menu__item:hover{color:var(--color-menu-hover)}.global-menu__item.is-opened{transform:translateY(0) rotate(0);pointer-events:auto;transition-timing-function:ease;opacity:1}.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(.23,1,.355,1.4)}.global-menu__item:first-of-type{transition-delay:0s}.global-menu__item.is-opened:first-of-type{transition-delay:.85s}.global-menu__item:nth-of-type(2){transition-delay:.05s}.global-menu__item.is-opened:nth-of-type(2){transition-delay:.8s}.global-menu__item:nth-of-type(3){transition-delay:.1s}.global-menu__item.is-opened:nth-of-type(3){transition-delay:.75s}.global-menu__item:nth-of-type(4){transition-delay:.15s}.global-menu__item.is-opened:nth-of-type(4){transition-delay:.7s}.global-menu__item--demo-2:first-of-type{transition-delay:0s}.global-menu__item--demo-2.is-opened:first-of-type{transition-delay:.85s}.global-menu__item--demo-2:nth-of-type(2){transition-delay:.05s}.global-menu__item--demo-2.is-opened:nth-of-type(2){transition-delay:.8s}.global-menu__item--demo-2:nth-of-type(3){transition-delay:.1s}.global-menu__item--demo-2.is-opened:nth-of-type(3){transition-delay:.75s}.global-menu__item--demo-2:nth-of-type(4){transition-delay:.15s}.global-menu__item--demo-2.is-opened:nth-of-type(4){transition-delay:.7s}.global-menu__item--demo-2:nth-of-type(5){transition-delay:.2s}.global-menu__item--demo-2.is-opened:nth-of-type(5){transition-delay:.8s}.global-menu__item--demo-3.is-opened{transition-duration:.3s}.global-menu__item--demo-3:first-of-type{transition-delay:0s}.global-menu__item--demo-3.is-opened:first-of-type{transition-delay:.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:.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:.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:.8s}.global-menu__item--demo-4.is-opened{transition-duration:.6s}.global-menu__item--demo-4:first-of-type{transition-delay:0s}.global-menu__item--demo-4.is-opened:first-of-type{transition-delay:.45s}.global-menu__item--demo-4:nth-of-type(2){transition-delay:.05s}.global-menu__item--demo-4.is-opened:nth-of-type(2){transition-delay:.5s}.global-menu__item--demo-4:nth-of-type(3){transition-delay:.1s}.global-menu__item--demo-4.is-opened:nth-of-type(3){transition-delay:.55s}.global-menu__item--demo-4:nth-of-type(4){transition-delay:.15s}.global-menu__item--demo-4.is-opened:nth-of-type(4){transition-delay:.6s}.global-menu__item--demo-5.is-opened{transition-duration:.4s}.global-menu__item--demo-5:first-of-type{transition-delay:0s}.global-menu__item--demo-5.is-opened:first-of-type{transition-delay:.55s}.global-menu__item--demo-5:nth-of-type(2){transition-delay:.05s}.global-menu__item--demo-5.is-opened:nth-of-type(2){transition-delay:.6s}.global-menu__item--demo-5:nth-of-type(3){transition-delay:.1s}.global-menu__item--demo-5.is-opened:nth-of-type(3){transition-delay:.65s}.global-menu__item--demo-5:nth-of-type(4){transition-delay:.15s}.global-menu__item--demo-5.is-opened:nth-of-type(4){transition-delay:.7s}.global-menu__item--demo-5:nth-of-type(5){transition-delay:.2s}.global-menu__item--demo-5.is-opened:nth-of-type(5){transition-delay:.75s}.global-menu__item--demo-5:nth-of-type(6){transition-delay:.25s}.global-menu__item--demo-5.is-opened:nth-of-type(6){transition-delay:.8s}.global-menu__item--demo-5:nth-of-type(7){transition-delay:.3s}.global-menu__item--demo-5.is-opened:nth-of-type(7){transition-delay:.85s}.global-menu__item--demo-5:nth-of-type(8){transition-delay:.35s}.global-menu__item--demo-5.is-opened:nth-of-type(8){transition-delay:.9s}.global-menu__item--demo-6.is-opened{transition-duration:.8s}.global-menu__item--demo-6:first-of-type{transition-delay:.25s}.global-menu__item--demo-6.is-opened:first-of-type{transition-delay:1s}.global-menu__item--demo-6:nth-of-type(2){transition-delay:.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:.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:.1s}.global-menu__item--demo-6.is-opened:nth-of-type(4){transition-delay:1.3s}.shape-overlays{height:100vh;pointer-events:none;position:fixed;opacity:.9;top:0;left:0;width:100vw;z-index:99}.shape-overlays.is-opened{pointer-events:auto}.shape-overlays__path:first-of-type{fill:var(--path-fill-1)}.shape-overlays__path:nth-of-type(2){fill:var(--path-fill-2)}.shape-overlays__path:nth-of-type(3){fill:var(--path-fill-3)}.shape-overlays__path:nth-of-type(4){fill:var(--path-fill-4)}@-webkit-keyframes intervalHamburgerBorder{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}80%{-webkit-transform:scale(1.6);transform:scale(1.6)}to{-webkit-transform:scale(1.6);transform:scale(1.6);opacity:0}}@keyframes intervalHamburgerBorder{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}80%{-webkit-transform:scale(1.6);transform:scale(1.6)}to{-webkit-transform:scale(1.6);transform:scale(1.6);opacity:0}}.hamburger{height:64px;pointer-events:auto;position:relative;cursor:pointer;width:64px;display:block;z-index:110}.hamburger__line{height:2px;overflow:hidden;position:absolute;width:28px;z-index:10}.hamburger__line-in{height:2px;position:absolute;top:0;left:0;width:84px}.hamburger__line-in:after,.hamburger__line-in:before{height:2px;content:"";position:absolute;top:0;background-color:#fff;width:28px;display:block}.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,.hamburger__line-in{-webkit-transition-duration:.6s;transition-duration:.6s}.hamburger__line,.hamburger__line-in,.hamburger__line-in:after,.hamburger__line-in:before{-webkit-transition-timing-function:cubic-bezier(.19,1,.22,1);transition-timing-function:cubic-bezier(.19,1,.22,1)}.hamburger__line-in:after,.hamburger__line-in:before{-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:.2s;transition-delay:.2s}.hamburger__line-in--02{-webkit-transition-delay:.25s;transition-delay:.25s}.hamburger__line-in--02:after,.hamburger__line-in--02:before{-webkit-transition-delay:.05s;transition-delay:.05s}.hamburger__line-in--03{-webkit-transition-delay:.3s;transition-delay:.3s}.hamburger__line-in--03:after,.hamburger__line-in--03:before{-webkit-transition-delay:.1s;transition-delay:.1s}.hamburger__line-in--cross01{-webkit-transition-delay:0s;transition-delay:0s}.hamburger__line-in--cross02{-webkit-transition-delay:.05s;transition-delay:.05s}.hamburger__line-in--cross02:after,.hamburger__line-in--cross02:before{-webkit-transition-delay:.1s;transition-delay:.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:.05s;transition-delay:.05s}.hamburger.is-opened-navi .hamburger__line-in--03{-webkit-transition-delay:.1s;transition-delay:.1s}.hamburger.is-opened-navi .hamburger__line-in--cross01{-webkit-transition-delay:.25s;transition-delay:.25s}.hamburger.is-opened-navi .hamburger__line-in--cross02{-webkit-transition-delay:.3s;transition-delay:.3s}.hamburger:hover .hamburger__line-in:after,.hamburger:hover .hamburger__line-in:before{-webkit-transform:translateX(200%);transform:translateX(200%)}.hamburger:hover .hamburger__line-in--01:after,.hamburger:hover .hamburger__line-in--01:before,.hamburger:hover .hamburger__line-in--02:after,.hamburger:hover .hamburger__line-in--02:before,.hamburger:hover .hamburger__line-in--03:after,.hamburger:hover .hamburger__line-in--03:before{-webkit-transition-duration:1s;transition-duration:1s}.hamburger:hover .hamburger__line-in--cross01:after,.hamburger:hover .hamburger__line-in--cross01:before,.hamburger:hover .hamburger__line-in--cross02:after,.hamburger:hover .hamburger__line-in--cross02:before{-webkit-transition-duration:0s;transition-duration:0s}.hamburger.is-opened-navi:hover .hamburger__line-in--cross01:after,.hamburger.is-opened-navi:hover .hamburger__line-in--cross01:before,.hamburger.is-opened-navi:hover .hamburger__line-in--cross02:after,.hamburger.is-opened-navi:hover .hamburger__line-in--cross02:before{-webkit-transition-duration:1s;transition-duration:1s}.hamburger.is-opened-navi:hover .hamburger__line-in--01:after,.hamburger.is-opened-navi:hover .hamburger__line-in--01:before,.hamburger.is-opened-navi:hover .hamburger__line-in--02:after,.hamburger.is-opened-navi:hover .hamburger__line-in--02:before,.hamburger.is-opened-navi:hover .hamburger__line-in--03:after,.hamburger.is-opened-navi:hover .hamburger__line-in--03:before{-webkit-transition-duration:0s;transition-duration:0s}@media screen and (min-width:55em){.icon--keyboard{height:46px;fill:var(--color-link);right:.55em;position:absolute;bottom:-30%;width:54px;display:block}.demos{justify-self:end;padding-right:80px;display:flex}.demo{height:17px;margin:0 4px;border-radius:50%;background:var(--color-link);width:17px;display:block}a.demo--current{background:var(--color-link-hover)}.demo span{right:100%;position:absolute;margin:0 1em 0 0;line-height:1;display:none}.demo--current span{display:block}}@media screen and (max-width:55em){.hamburger{transform:scale(.75);position:fixed}.content{height:auto;min-height:0;flex-direction:column;padding-bottom:10em}.content--fixed{padding:.85em;position:relative;display:block;z-index:0}.codrops-header{flex-direction:column;align-items:center}.codrops-header__title{font-weight:700;text-align:center;padding-bottom:.25em}.github{margin:1em auto;display:block}.codrops-links{margin:0}}