html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}svg{display:block}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,*::after,*::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{background:#fff}body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;min-height:100vh;color:#57585c;color:var(--color-text);background-color:#fff;background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.js body{opacity:0;-webkit-transition:opacity 0.3s;-o-transition:opacity 0.3s;transition:opacity 0.3s}.js body.render{opacity:1}.js .loading::before{content:"";position:fixed;z-index:100000;top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.js .loading::after{content:"";position:fixed;z-index:100000;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;pointer-events:none;border-radius:50%;opacity:0.4;background:var(--color-link);-webkit-animation:loaderAnim 0.7s linear infinite alternate forwards;animation:loaderAnim 0.7s linear infinite alternate forwards}@-webkit-keyframes loaderAnim{to{opacity:1;-webkit-transform:scale3d(0.5, 0.5, 1);transform:scale3d(0.5, 0.5, 1)}}@keyframes loaderAnim{to{opacity:1;-webkit-transform:scale3d(0.5, 0.5, 1);transform:scale3d(0.5, 0.5, 1)}}a{text-decoration:none;color:var(--color-link);outline:none}a:hover,a:focus{color:var(--color-link-hover);outline:none}.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none}.message{position:relative;z-index:100;display:none;text-align:center;line-height:1.4;background:var(--color-bg);color:var(--color-link);padding:2em 2em 1em}.icon{display:block;width:1.5em;height:1.5em;margin:0 auto;fill:currentColor}.icon--keyboard{display:none}main{position:relative;width:100%}.content{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:0 auto;min-height:100vh}.content--fixed{position:fixed;z-index:10000;top:0;left:0;display:grid;-webkit-align-content:space-between;-ms-flex-line-pack:justify;align-content:space-between;width:100%;max-width:none;min-height:0;height:100vh;padding:1.5em;pointer-events:none;grid-template-columns:50% 50%;grid-template-rows:auto auto 4em;grid-template-areas:"header ..." "example ..." "github demos"}@media (max-width: 768px){.content--fixed{grid-template-columns:1fr}}.content--fixed a{pointer-events:auto}.codrops-header{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;align-self:start;grid-area:header;justify-self:start}.codrops-header__title{font-size:1em;font-weight:bold;margin:0;padding:0.75em 0}@media (max-width: 768px){.codrops-header__title{margin-right:15px}}.info{margin:0 0 0 1.25em;color:var(--color-info)}.github{display:block;align-self:end;grid-area:github;justify-self:start}.demos{position:relative;display:block;align-self:end;text-align:center;grid-area:demos}.demos__links{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;position:fixed;left:50%;bottom:1.5em;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}@media (max-width: 768px){.demos__links{width:100%;max-width:-webkit-calc(100vw - 5em - 48px);max-width:calc(100vw - 5em - 48px);-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}}.demo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;line-height:1;margin:0 12px;color:var(--color-link);-webkit-transition:color 0.2s ease;-o-transition:color 0.2s ease;transition:color 0.2s ease;height:24px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.demo span{-webkit-transition:color 0.2s ease;-o-transition:color 0.2s ease;transition:color 0.2s ease}a.demo--current span{color:var(--color-text)}.demo span{white-space:nowrap}a.demo--current{pointer-events:none}.codrops-links{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 1em 0 0;text-align:center;white-space:nowrap}.codrops-icon{display:inline-block;margin:0.15em;padding:0.25em}@media screen and (max-width: 55em){.info{margin:0}.codrops-links{margin:0}}@media screen and (min-width: 55em){.icon--keyboard{position:absolute;right:0.55em;bottom:-30%;display:block;width:54px;height:46px;fill:var(--color-link)}.demos{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-right:80px;justify-self:end}.demo span{line-height:1}}@media (pointer: coarse){.message{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:95vh;width:100%;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.demo-2 .message{background:none}.cursor-wrapper,.arrow-cursor,.circle-cursor,.square-cursor,.demos{display:none !important}}@media (pointer: coarse) and (min-width: 55em){.message{position:absolute;left:0;top:0;padding:0}}/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */.pswp{display:none;position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action:none;z-index:1500000;-webkit-text-size-adjust:100%;-webkit-backface-visibility:hidden;outline:none}.pswp *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.pswp img{max-width:none}.pswp--animate_opacity{opacity:0.001;will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);-o-transition:opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);transition:opacity 333ms cubic-bezier(0.4, 0, 0.22, 1)}.pswp--open{display:block}.pswp__bg{position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;opacity:0;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;will-change:opacity}.pswp__scroll-wrap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}.pswp__container,.pswp__zoom-wrap{-ms-touch-action:none;touch-action:none;position:absolute;left:0;right:0;top:0;bottom:0}.pswp__container,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none}.pswp__zoom-wrap{position:absolute;width:100%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);transition:-webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);-o-transition:transform 333ms cubic-bezier(0.4, 0, 0.22, 1);transition:transform 333ms cubic-bezier(0.4, 0, 0.22, 1);transition:transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1)}.pswp__bg{will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);-o-transition:opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);transition:opacity 333ms cubic-bezier(0.4, 0, 0.22, 1)}.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap{-webkit-transition:none;-o-transition:none;transition:none}.pswp__container,.pswp__zoom-wrap{-webkit-backface-visibility:hidden}.pswp__item{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}.pswp__img{position:absolute;width:auto;height:auto;top:0;left:0}.pswp__img--placeholder{-webkit-backface-visibility:hidden}.pswp__img--placeholder--blank{background:#222}.pswp--ie .pswp__img{width:100% !important;height:auto !important;left:0;top:0}.pswp__error-msg{position:absolute;left:0;top:50%;width:100%;text-align:center;font-size:14px;line-height:16px;margin-top:-8px;color:#ccc}.pswp__error-msg a{color:#ccc;text-decoration:underline}.pswp__item,.pswp__img,.pswp__top-bar{cursor:none !important}.pswp__top-bar{display:none}/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */.pswp__button{width:44px;height:44px;position:relative;background:none;cursor:pointer;overflow:visible;-webkit-appearance:none;display:block;border:0;padding:0;margin:0;float:right;opacity:0.75;-webkit-transition:opacity 0.2s;-o-transition:opacity 0.2s;transition:opacity 0.2s;-webkit-box-shadow:none;box-shadow:none}.pswp__button:focus,.pswp__button:hover{opacity:1}.pswp__button:active{outline:none;opacity:0.9}.pswp__button::-moz-focus-inner{padding:0;border:0}.pswp__ui--over-close .pswp__button--close{opacity:1}.pswp__button,.pswp__button--arrow--left:before,.pswp__button--arrow--right:before{background:url(../img/default-skin/default-skin.png) 0 0 no-repeat;background-size:264px 88px;width:44px;height:44px}@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (-o-min-device-pixel-ratio: 35/32), (min-resolution: 105dpi), (-o-min-device-pixel-ratio: 11/10), (min-resolution: 1.1dppx){.pswp--svg .pswp__button,.pswp--svg .pswp__button--arrow--left:before,.pswp--svg .pswp__button--arrow--right:before{background-image:url(../img/default-skin/default-skin.svg)}.pswp--svg .pswp__button--arrow--left,.pswp--svg .pswp__button--arrow--right{background:none}}.pswp__button--close{background-position:0 -44px}.pswp__button--share{background-position:-44px -44px}.pswp__button--fs{display:none}.pswp--supports-fs .pswp__button--fs{display:block}.pswp--fs .pswp__button--fs{background-position:-44px 0}.pswp__button--zoom{display:none;background-position:-88px 0}.pswp--zoom-allowed .pswp__button--zoom{display:block}.pswp--zoomed-in .pswp__button--zoom{background-position:-132px 0}.pswp--touch .pswp__button--arrow--left,.pswp--touch .pswp__button--arrow--right{visibility:hidden}.pswp__button--arrow--left,.pswp__button--arrow--right{background:none;top:50%;margin-top:-50px;width:70px;height:100px;position:absolute}.pswp__button--arrow--left{left:0}.pswp__button--arrow--right{right:0}.pswp__button--arrow--left:before,.pswp__button--arrow--right:before{content:'';top:35px;background-color:rgba(0,0,0,0.3);height:30px;width:32px;position:absolute}.pswp__button--arrow--left:before{left:6px;background-position:-138px -44px}.pswp__button--arrow--right:before{right:6px;background-position:-94px -44px}.pswp__counter,.pswp__share-modal{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pswp__share-modal{display:block;background:rgba(0,0,0,0.5);width:100%;height:100%;top:0;left:0;padding:10px;position:absolute;z-index:1500100;opacity:0;-webkit-transition:opacity 0.25s ease-out;-o-transition:opacity 0.25s ease-out;transition:opacity 0.25s ease-out;-webkit-backface-visibility:hidden;will-change:opacity}.pswp__share-modal--hidden{display:none}.pswp__share-tooltip{z-index:1500120;position:absolute;background:#FFF;top:56px;border-radius:2px;display:block;width:auto;right:44px;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.25);box-shadow:0 2px 5px rgba(0,0,0,0.25);-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-transition:-webkit-transform 0.25s;transition:-webkit-transform 0.25s;-o-transition:transform 0.25s;transition:transform 0.25s;transition:transform 0.25s, -webkit-transform 0.25s;-webkit-backface-visibility:hidden;will-change:transform}.pswp__share-tooltip a{display:block;padding:8px 12px;color:#000;text-decoration:none;font-size:14px;line-height:18px}.pswp__share-tooltip a:hover{text-decoration:none;color:#000}.pswp__share-tooltip a:first-child{border-radius:2px 2px 0 0}.pswp__share-tooltip a:last-child{border-radius:0 0 2px 2px}.pswp__share-modal--fade-in{opacity:1}.pswp__share-modal--fade-in .pswp__share-tooltip{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.pswp--touch .pswp__share-tooltip a{padding:16px 12px}a.pswp__share--facebook:before{content:'';display:block;width:0;height:0;position:absolute;top:-12px;right:15px;border:6px solid rgba(0,0,0,0);border-bottom-color:#FFF;-webkit-pointer-events:none;-moz-pointer-events:none;pointer-events:none}a.pswp__share--facebook:hover{background:#3E5C9A;color:#FFF}a.pswp__share--facebook:hover:before{border-bottom-color:#3E5C9A}a.pswp__share--twitter:hover{background:#55ACEE;color:#FFF}a.pswp__share--pinterest:hover{background:#CCC;color:#CE272D}a.pswp__share--download:hover{background:#DDD}.pswp__counter{position:absolute;left:0;top:0;height:44px;font-size:13px;line-height:44px;color:#FFF;opacity:0.75;padding:0 10px}.pswp__caption{position:absolute;left:0;bottom:0;width:100%;min-height:44px}.pswp__caption small{font-size:11px;color:#BBB}.pswp__caption__center{text-align:left;max-width:420px;margin:0 auto;font-size:13px;padding:10px;line-height:20px;color:#CCC}.pswp__caption--empty{display:none}.pswp__caption--fake{visibility:hidden}.pswp__preloader{width:44px;height:44px;position:absolute;top:0;left:50%;margin-left:-22px;opacity:0;-webkit-transition:opacity 0.25s ease-out;-o-transition:opacity 0.25s ease-out;transition:opacity 0.25s ease-out;will-change:opacity;direction:ltr}.pswp__preloader__icn{width:20px;height:20px;margin:12px}.pswp__preloader--active{opacity:1}.pswp__preloader--active .pswp__preloader__icn{background:url(../img/default-skin/preloader.gif) 0 0 no-repeat}.pswp--css_animation .pswp__preloader--active{opacity:1}.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn{-webkit-animation:clockwise 500ms linear infinite;animation:clockwise 500ms linear infinite}.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut{-webkit-animation:donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;animation:donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite}.pswp--css_animation .pswp__preloader__icn{background:none;opacity:0.75;width:14px;height:14px;position:absolute;left:15px;top:15px;margin:0}.pswp--css_animation .pswp__preloader__cut{position:relative;width:7px;height:14px;overflow:hidden}.pswp--css_animation .pswp__preloader__donut{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;border:2px solid #FFF;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;position:absolute;top:0;left:0;background:none;margin:0}@media screen and (max-width: 1024px){.pswp__preloader{position:relative;left:auto;top:auto;margin:0;float:right}}@-webkit-keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes donut-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes donut-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}.pswp__ui{-webkit-font-smoothing:auto;visibility:visible;opacity:1;z-index:1500050}.pswp__top-bar{position:absolute;left:0;top:0;height:44px;width:100%}.pswp__caption,.pswp__top-bar,.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right{-webkit-backface-visibility:hidden;will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);-o-transition:opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);transition:opacity 333ms cubic-bezier(0.4, 0, 0.22, 1)}.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right{visibility:visible}.pswp__top-bar,.pswp__caption{background-color:rgba(0,0,0,0.5)}.pswp__ui--fit .pswp__top-bar,.pswp__ui--fit .pswp__caption{background-color:rgba(0,0,0,0.3)}.pswp__ui--idle .pswp__top-bar{opacity:0}.pswp__ui--idle .pswp__button--arrow--left,.pswp__ui--idle .pswp__button--arrow--right{opacity:0}.pswp__ui--hidden .pswp__top-bar,.pswp__ui--hidden .pswp__caption,.pswp__ui--hidden .pswp__button--arrow--left,.pswp__ui--hidden .pswp__button--arrow--right{opacity:0.001}.pswp__ui--one-slide .pswp__button--arrow--left,.pswp__ui--one-slide .pswp__button--arrow--right,.pswp__ui--one-slide .pswp__counter{display:none}.pswp__element--disabled{display:none !important}.pswp--minimal--dark .pswp__top-bar{background:none}.demo-1{--color-text: #fff;--color-bg: #171717;--color-link: #19caff;--color-link-hover: #19caff;--color-info: #19caff}.demo-1,.demo-1 a{cursor:none !important}.demo-1 .grid{position:absolute;padding:-webkit-calc(1.5em + 42px + 1.5em) 1.5em;padding:calc(1.5em + 42px + 1.5em) 1.5em;width:100vw;height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;overflow:hidden}.demo-1 .grid img{max-width:100%;height:auto;line-height:0;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;-webkit-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease}.demo-1 .grid img.lazyloaded{opacity:1}.demo-1 .grid__inner{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-transition:opacity 0.2s ease;-o-transition:opacity 0.2s ease;transition:opacity 0.2s ease;width:100%}.demo-1 .grid__item{-webkit-box-flex:0;-webkit-flex:0 0 -webkit-calc(97% * 2 / 5);-ms-flex:0 0 calc(97% * 2 / 5);flex:0 0 calc(97% * 2 / 5);line-height:0;margin-bottom:3%}.demo-1 .grid__item:nth-child(3),.demo-1 .grid__item:nth-child(4){margin-bottom:0}.demo-1 .grid__item a{display:block;height:0;padding-top:100%;position:relative;background-color:#1d1d1d}.demo-1 .grid__item--wide{-webkit-box-flex:0;-webkit-flex:0 0 -webkit-calc(97% * 3 / 5);-ms-flex:0 0 calc(97% * 3 / 5);flex:0 0 calc(97% * 3 / 5)}.demo-1 .grid__item--wide a{padding-top:-webkit-calc(100% / 3 * 2);padding-top:calc(100% / 3 * 2)}.demo-1 .cursor-wrapper{position:fixed;opacity:1;width:100px;height:100px;left:-50px;top:-50px;-webkit-transform:translate(-100%, -100%);-ms-transform:translate(-100%, -100%);transform:translate(-100%, -100%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;z-index:1600000;pointer-events:none}.demo-1 .cursor-wrapper.has-blend-mode{mix-blend-mode:exclusion}@supports (-ms-ime-align: auto){.demo-1 .cursor-wrapper.has-blend-mode.is-outside .custom-cursor__outer{border-color:black}.demo-1 .cursor-wrapper.has-blend-mode.is-outside .custom-cursor__inner:before,.demo-1 .cursor-wrapper.has-blend-mode.is-outside .custom-cursor__inner:after{background:black}}.demo-1 .custom-cursor{position:relative;left:0;top:0}.demo-1 .custom-cursor__outer{width:6px;height:6px;border:2px solid white;background:white;border-radius:50%}.demo-1 .custom-cursor__inner{position:relative;width:100%;height:100%}.demo-1 .custom-cursor__inner:before,.demo-1 .custom-cursor__inner:after{content:"";position:absolute;width:40%;height:1px;background:white;-webkit-transition:-webkit-transform 0.1s linear;transition:-webkit-transform 0.1s linear;-o-transition:transform 0.1s linear;transition:transform 0.1s linear;transition:transform 0.1s linear, -webkit-transform 0.1s linear}.demo-1 .custom-cursor__inner:before{left:50%;top:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.demo-1 .custom-cursor__inner:after{left:50%;top:50%;-webkit-transform:translateX(-50%) rotate(-90deg);-ms-transform:translateX(-50%) rotate(-90deg);transform:translateX(-50%) rotate(-90deg)}.demo-1 .custom-cursor__inner.is-closing:after{-webkit-transform:translateX(-50%) rotate(0deg);-ms-transform:translateX(-50%) rotate(0deg);transform:translateX(-50%) rotate(0deg)}@media (pointer: coarse){.content--demo1,.content--demo2,.content--demo3,.content--demo4,.content--demo5{display:none !important}}.demo-2{--color-text: #919191;--color-bg: #e4dfdd42;--color-link: #000000;--color-link-hover: #000000;--color-info: #000000;--swiper-height: 65vh}.demo-2 .grid{position:absolute;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.demo-2 .grid img{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;-webkit-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease}.demo-2 .grid img.lazyloaded{opacity:1}.demo-2 .swiper-container{width:100%;height:var(--swiper-height);overflow:hidden}.demo-2 .swiper-container .swiper-wrapper{width:100%}.demo-2 .swiper-container .swiper-slide{width:auto;background-color:#eaeaea;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:0;padding-left:-webkit-calc(var(--swiper-height) / 2 * 3);padding-left:calc(var(--swiper-height) / 2 * 3)}.demo-2 .swiper-container .swiper-slide__img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.demo-2 .swiper-container .swiper-slide--square{padding-left:var(--swiper-height)}.demo-2 .swiper-container .swiper-slide--portrait{padding-left:-webkit-calc(var(--swiper-height) / 3 * 2);padding-left:calc(var(--swiper-height) / 3 * 2)}.demo-2 .swiper-button-prev,.demo-2 .swiper-button-next{width:50%;height:100%;margin-top:0;top:0;background-image:none;cursor:none}.demo-2 .swiper-button-prev{left:0}.demo-2 .swiper-button-next{right:0}.demo-2 .arrow-cursor{width:150px;height:110px;position:fixed;left:-75px;top:-55px;z-index:10000000;pointer-events:none}.demo-2 .arrow-cursor__icon{position:absolute;left:0;top:0;width:100%;height:100%}.demo-2 .arrow-cursor__path{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}.demo-3{--color-text: #fff;--color-bg: #171717;--color-line: #292929;--color-link: #ff0000;--color-link-hover: #ff0000;--color-info: #ff0000}.demo-3,.demo-3 a{cursor:none}.demo-3 .circle-cursor{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%}.demo-3 .circle-cursor--outer{width:30px;height:30px;border:1px solid var(--color-text);z-index:12000;opacity:0.2}.demo-3 .circle-cursor--inner{width:5px;height:5px;left:-2.5px;top:-2.5px;z-index:11000;background:var(--color-text)}.demo-3 .grid{position:absolute;padding:-webkit-calc(1.5em + 42px + 1.5em) 1.5em;padding:calc(1.5em + 42px + 1.5em) 1.5em;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.demo-3 .grid__inner{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}.demo-3 .browser-window{width:-webkit-calc(100% - 100px);width:calc(100% - 100px);max-width:960px;position:relative}.demo-3 .browser-window__bar{height:25px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:1px solid var(--color-line);border-bottom:0;border-radius:10px 10px 0 0}.demo-3 .browser-window__bar .dot{width:11px;height:11px;border-radius:5px;background:var(--color-line);margin-left:8px}.demo-3 .browser-window__bar .dot:first-child{margin-left:12px}.demo-3 .browser-window__content{border:1px solid var(--color-line);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:300px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:20px;position:relative;-o-border-image:-o-linear-gradient(top, var(--color-line) 0%, var(--color-line) 50%, var(--color-bg) 100%);border-image:-webkit-gradient(linear, left top, left bottom, from(var(--color-line)), color-stop(50%, var(--color-line)), to(var(--color-bg)));border-image:-webkit-linear-gradient(top, var(--color-line) 0%, var(--color-line) 50%, var(--color-bg) 100%);border-image:linear-gradient(to bottom, var(--color-line) 0%, var(--color-line) 50%, var(--color-bg) 100%);border-image-slice:1}.demo-3 .browser-window__content-right{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.demo-3 .browser-window__content-right .browser-window__link{margin-left:10px}.demo-3 .browser-window__link{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:75px;height:75px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.demo-3 .browser-window__link .hamburger{display:block;width:26px;height:18px;position:relative}.demo-3 .browser-window__link .hamburger span{display:block;position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:100%;height:2px;background:var(--color-text);z-index:0}.demo-3 .browser-window__link .hamburger span:nth-child(1){top:0px}.demo-3 .browser-window__link .hamburger span:nth-child(2){top:8px}.demo-3 .browser-window__link .hamburger span:nth-child(3){top:16px}.demo-3 .browser-window__link .hamburger span:before,.demo-3 .browser-window__link .hamburger span:after{position:absolute;content:"";display:block;top:0;height:100%;width:0;right:0;left:auto}.demo-3 .browser-window__link .hamburger span:before{z-index:1;background:var(--color-link);-webkit-transition:all 0.15s linear 0s;-o-transition:all 0.15s linear 0s;transition:all 0.15s linear 0s}.demo-3 .browser-window__link .hamburger span:after{z-index:2;background:var(--color-bg);-webkit-transition:all 0.15s linear 0.3s;-o-transition:all 0.15s linear 0.3s;transition:all 0.15s linear 0.3s}.demo-3 .browser-window__link .hamburger span:nth-child(2):before{-webkit-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s}.demo-3 .browser-window__link .hamburger span:nth-child(3):before{-webkit-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s}.demo-3 .browser-window__link .hamburger span:nth-child(2):after{-webkit-transition-delay:0.45s;-o-transition-delay:0.45s;transition-delay:0.45s}.demo-3 .browser-window__link .hamburger span:nth-child(3):after{-webkit-transition-delay:0.6s;-o-transition-delay:0.6s;transition-delay:0.6s}.demo-3 .browser-window__link .settings-icon{width:34px;height:34px}.demo-3 .browser-window__link .settings-icon__line{stroke:var(--color-text);stroke-width:5px;-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.demo-3 .browser-window__link .settings-icon__rect{stroke:var(--color-text);fill:var(--color-bg);stroke-width:5px;-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.demo-3 .browser-window__link svg{width:30px;height:30px}.demo-3 .browser-window__link svg path{fill:var(--color-text);-webkit-transition:all 0.2s ease 0s;-o-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s}.demo-3 .browser-window__link .magnifyer{-webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}.demo-3 .browser-window__link:hover svg path{fill:var(--color-link);-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.demo-3 .browser-window__link:hover .hamburger span:after,.demo-3 .browser-window__link:hover .hamburger span:before{width:100%;left:0;right:auto}.demo-3 .browser-window__link:hover .hamburger span:after{z-index:1;-webkit-transition:all 0.15s linear 0s;-o-transition:all 0.15s linear 0s;transition:all 0.15s linear 0s}.demo-3 .browser-window__link:hover .hamburger span:before{z-index:2;-webkit-transition:all 0.15s linear 0.3s;-o-transition:all 0.15s linear 0.3s;transition:all 0.15s linear 0.3s}.demo-3 .browser-window__link:hover .hamburger span:nth-child(2):after{-webkit-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s}.demo-3 .browser-window__link:hover .hamburger span:nth-child(3):after{-webkit-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s}.demo-3 .browser-window__link:hover .hamburger span:nth-child(2):before{-webkit-transition-delay:0.45s;-o-transition-delay:0.45s;transition-delay:0.45s}.demo-3 .browser-window__link:hover .hamburger span:nth-child(3):before{-webkit-transition-delay:0.6s;-o-transition-delay:0.6s;transition-delay:0.6s}.demo-3 .browser-window__link:hover .settings-icon__line,.demo-3 .browser-window__link:hover .settings-icon__rect{stroke:var(--color-link);-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.demo-3 .browser-window__link:hover .settings-icon__group--1 .settings-icon__rect{-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}.demo-3 .browser-window__link:hover .settings-icon__group--2 .settings-icon__rect{-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}.demo-3 .browser-window__link:hover .settings-icon__group--3 .settings-icon__rect{-webkit-transform:translateY(25px);-ms-transform:translateY(25px);transform:translateY(25px)}.demo-3 .browser-window__link:hover .avatar__head{-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px)}.demo-3 .browser-window__link:hover .magnifyer{-webkit-transform:rotate(88deg);-ms-transform:rotate(88deg);transform:rotate(88deg);-webkit-transform-origin:45% 43%;-ms-transform-origin:45% 43%;transform-origin:45% 43%}.demo-4{--color-text: #fff;--color-bg: #171717;--color-line: #292929;--color-link: #ff0000;--color-link-hover: #ff0000;--color-info: #ff0000}.demo-4,.demo-4 a{cursor:none}.demo-4 .circle-cursor{position:fixed;left:0;top:0;pointer-events:none}.demo-4 .circle-cursor--outer{width:100vw;height:100vh;z-index:12000}.demo-4 .circle-cursor--inner{width:5px;height:5px;left:-2.5px;top:-2.5px;border-radius:50%;z-index:11000;background:var(--color-text)}.demo-4 .grid{position:absolute;padding:-webkit-calc(1.5em + 42px + 1.5em) 1.5em;padding:calc(1.5em + 42px + 1.5em) 1.5em;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.demo-4 .grid__inner{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}.demo-4 .browser-window{width:-webkit-calc(100% - 100px);width:calc(100% - 100px);max-width:960px;position:relative}.demo-4 .browser-window__bar{height:25px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:1px solid var(--color-line);border-bottom:0;border-radius:10px 10px 0 0}.demo-4 .browser-window__bar .dot{width:11px;height:11px;border-radius:5px;background:var(--color-line);margin-left:8px}.demo-4 .browser-window__bar .dot:first-child{margin-left:12px}.demo-4 .browser-window__content{border:1px solid var(--color-line);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:300px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:20px;position:relative;-o-border-image:-o-linear-gradient(top, var(--color-line) 0%, var(--color-line) 50%, var(--color-bg) 100%);border-image:-webkit-gradient(linear, left top, left bottom, from(var(--color-line)), color-stop(50%, var(--color-line)), to(var(--color-bg)));border-image:-webkit-linear-gradient(top, var(--color-line) 0%, var(--color-line) 50%, var(--color-bg) 100%);border-image:linear-gradient(to bottom, var(--color-line) 0%, var(--color-line) 50%, var(--color-bg) 100%);border-image-slice:1}.demo-4 .browser-window__content-right{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.demo-4 .browser-window__content-right .browser-window__link{margin-left:10px}.demo-4 .browser-window__link{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:75px;height:75px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.demo-4 .browser-window__link .hamburger{display:block;width:26px;height:18px;position:relative}.demo-4 .browser-window__link .hamburger span{display:block;position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:100%;height:2px;background:var(--color-text);z-index:0}.demo-4 .browser-window__link .hamburger span:nth-child(1){top:0px}.demo-4 .browser-window__link .hamburger span:nth-child(2){top:8px}.demo-4 .browser-window__link .hamburger span:nth-child(3){top:16px}.demo-4 .browser-window__link .hamburger span:before,.demo-4 .browser-window__link .hamburger span:after{position:absolute;content:"";display:block;top:0;height:100%;width:0;right:0;left:auto}.demo-4 .browser-window__link .hamburger span:before{z-index:1;background:var(--color-link);-webkit-transition:all 0.15s linear 0s;-o-transition:all 0.15s linear 0s;transition:all 0.15s linear 0s}.demo-4 .browser-window__link .hamburger span:after{z-index:2;background:var(--color-bg);-webkit-transition:all 0.15s linear 0.3s;-o-transition:all 0.15s linear 0.3s;transition:all 0.15s linear 0.3s}.demo-4 .browser-window__link .hamburger span:nth-child(2):before{-webkit-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s}.demo-4 .browser-window__link .hamburger span:nth-child(3):before{-webkit-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s}.demo-4 .browser-window__link .hamburger span:nth-child(2):after{-webkit-transition-delay:0.45s;-o-transition-delay:0.45s;transition-delay:0.45s}.demo-4 .browser-window__link .hamburger span:nth-child(3):after{-webkit-transition-delay:0.6s;-o-transition-delay:0.6s;transition-delay:0.6s}.demo-4 .browser-window__link .settings-icon{width:34px;height:34px}.demo-4 .browser-window__link .settings-icon__line{stroke:var(--color-text);stroke-width:5px;-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.demo-4 .browser-window__link .settings-icon__rect{stroke:var(--color-text);fill:var(--color-bg);stroke-width:5px;-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.demo-4 .browser-window__link svg{width:30px;height:30px}.demo-4 .browser-window__link svg path{fill:var(--color-text);-webkit-transition:all 0.2s ease 0s;-o-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s}.demo-4 .browser-window__link .magnifyer{-webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}.demo-4 .browser-window__link:hover svg path{fill:var(--color-link);-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.demo-4 .browser-window__link:hover .hamburger span:after,.demo-4 .browser-window__link:hover .hamburger span:before{width:100%;left:0;right:auto}.demo-4 .browser-window__link:hover .hamburger span:after{z-index:1;-webkit-transition:all 0.15s linear 0s;-o-transition:all 0.15s linear 0s;transition:all 0.15s linear 0s}.demo-4 .browser-window__link:hover .hamburger span:before{z-index:2;-webkit-transition:all 0.15s linear 0.3s;-o-transition:all 0.15s linear 0.3s;transition:all 0.15s linear 0.3s}.demo-4 .browser-window__link:hover .hamburger span:nth-child(2):after{-webkit-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s}.demo-4 .browser-window__link:hover .hamburger span:nth-child(3):after{-webkit-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s}.demo-4 .browser-window__link:hover .hamburger span:nth-child(2):before{-webkit-transition-delay:0.45s;-o-transition-delay:0.45s;transition-delay:0.45s}.demo-4 .browser-window__link:hover .hamburger span:nth-child(3):before{-webkit-transition-delay:0.6s;-o-transition-delay:0.6s;transition-delay:0.6s}.demo-4 .browser-window__link:hover .settings-icon__line,.demo-4 .browser-window__link:hover .settings-icon__rect{stroke:var(--color-link);-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.demo-4 .browser-window__link:hover .settings-icon__group--1 .settings-icon__rect{-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}.demo-4 .browser-window__link:hover .settings-icon__group--2 .settings-icon__rect{-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}.demo-4 .browser-window__link:hover .settings-icon__group--3 .settings-icon__rect{-webkit-transform:translateY(25px);-ms-transform:translateY(25px);transform:translateY(25px)}.demo-4 .browser-window__link:hover .avatar__head{-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px)}.demo-4 .browser-window__link:hover .magnifyer{-webkit-transform:rotate(88deg);-ms-transform:rotate(88deg);transform:rotate(88deg);-webkit-transform-origin:45% 43%;-ms-transform-origin:45% 43%;transform-origin:45% 43%}.demo-5{--color-text: #fff;--color-bg: #171717;--color-line: #464646;--color-link: #2edf16;--color-link-hover: #2edf16;--color-info: #2edf16;--image-height: 55vh;--cursor-width: 22px;--link-width: 35px;cursor:none !important}.demo-5 a{cursor:none}.demo-5 .grid img{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;-webkit-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease}.demo-5 .square-cursor{position:fixed;left:0;top:0;pointer-events:none;opacity:1;z-index:5000;width:100px;height:100px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.demo-5 .square-cursor__inner{width:var(--cursor-width);height:var(--cursor-width);border:1px solid var(--color-link);z-index:5000;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.demo-5 .grid__inner{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.demo-5 .grid__inner .image-wrapper{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin-bottom:40px}.demo-5 .grid__inner .image-wrapper__inner{height:var(--image-height);width:0;padding-left:-webkit-calc(var(--image-height) * 3 / 2);padding-left:calc(var(--image-height) * 3 / 2);background:#2b2b2b;position:relative}.demo-5 .grid__inner .image-wrapper__img{opacity:0;-webkit-transition:none;-o-transition:none;transition:none}.demo-5 .grid__inner .image-wrapper__img.is-visible.lazyloaded{opacity:1;-webkit-transition:none;-o-transition:none;transition:none}.demo-5 .grid__inner .nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:auto}.demo-5 .grid__inner .nav__link{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--link-width);height:var(--link-width);border:1px solid var(--color-line);-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;letter-spacing:2px;font-size:0.8em;color:var(--color-line);-webkit-transition:none;-o-transition:none;transition:none}.demo-5 .grid__inner .nav__link:not(:last-child){border-right:0}.demo-5 .grid__inner .nav__link:hover,.demo-5 .grid__inner .nav__link.is-active{color:var(--color-link)}.demo-5 .grid__inner .nav__link.is-active{border:1px solid var(--color-link)}body.tutorial{--color-text: #fff;--color-bg: #171717;--color-line: #292929;--color-link: #ff0000;--color-link-hover: #ff0000;--color-info: #ff0000;opacity:1 !important;background-color:var(--color-bg)}.tutorial .page{position:absolute;padding:-webkit-calc(1.5em + 42px + 1.5em) 1.5em;padding:calc(1.5em + 42px + 1.5em) 1.5em;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.tutorial .page__inner{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}.tutorial .page,.tutorial .page a{cursor:none}.tutorial .cursor{position:fixed;left:0;top:0;pointer-events:none}.tutorial .cursor--small{width:5px;height:5px;left:-2.5px;top:-2.5px;border-radius:50%;z-index:11000;background:var(--color-text)}.tutorial .cursor--canvas{width:100vw;height:100vh;z-index:12000}.tutorial .nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.tutorial .link{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:75px;height:75px;margin:0 5px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.tutorial .settings-icon{display:block;width:40px;height:40px}.tutorial .settings-icon__line{stroke:var(--color-text);stroke-width:5px;-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.tutorial .settings-icon__rect{stroke:var(--color-text);fill:var(--color-bg);stroke-width:5px;-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.tutorial .link:hover .settings-icon__line,.tutorial .link:hover .settings-icon__rect{stroke:var(--color-link);-webkit-transition:all 0.2s ease 0.05s;-o-transition:all 0.2s ease 0.05s;transition:all 0.2s ease 0.05s}.tutorial .link:hover .settings-icon__group--1 .settings-icon__rect{-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}.tutorial .link:hover .settings-icon__group--2 .settings-icon__rect{-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}.tutorial .link:hover .settings-icon__group--3 .settings-icon__rect{-webkit-transform:translateY(25px);-ms-transform:translateY(25px);transform:translateY(25px)}

/*# sourceMappingURL=styles.css.map */