@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}.js .grid,article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}.grid__item-number>span,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%}.content__item-text p,body,figure{margin:0}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-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:"“""”""‘""’"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .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]{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{box-sizing:border-box}.product-section{padding-top:80px;padding-bottom:80px;background-image:url(../assets/section-bg-light.jpg);background-position:center center;background-attachment:fixed;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;clear:both}@media only screen and (min-width:820px){.ani{content:"";position:absolute;bottom:calc(32px + 5%);left:calc(32px + 5%)}}@media only screen and (max-width:820px){.ani{display:none}}body{--color-text:#003386;--color-bg:#e8e8e8;--color-link:#003386;--color-link-hover:#003386;--color-info:#003386;--grid-item-bg:#FFD212;--color-close:#ec1752;font-family:Futura,"futura-pt",sans-serif;min-height:100vh;color:#57585c;color:var(--color-text);background-color:#fff;background-color:var(--color-bg)}.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:.4;background:var(--color-link);animation:loaderAnim .7s linear infinite alternate forwards}a{text-decoration:none;color:var(--color-link);outline:0}a:focus,a:hover{color:var(--color-link-hover);outline:0}.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none}.icon{display:block;width:1.5em;height:1.5em;margin:0 auto;fill:currentColor}.frame,main{position:relative}.frame{padding:1.5rem 2.5rem}.frame a:hover{color:#4c33f7}.codrops-header{position:relative;z-index:100;text-align:center;font-size:1rem}.codrops-header__title{font-size:1rem;font-weight:400;margin:0;padding:0}.info{margin:0 0 0 1.25em;color:var(--color-info)}.github{display:block;margin:.15em .15em .15em .5em;padding:.25em}.title{text-align:center}.title__name,.title__sub{font-weight:400;margin:0;font-size:1rem}.title__sub{position:relative}.codrops-links{position:relative;display:flex;justify-content:center;text-align:center;white-space:nowrap}.codrops-icon{display:inline-block;margin:.15em;padding:.25em}.grid-wrap{position:relative;max-width:1100px;margin:0 auto;padding:6rem 1rem 0}.grid-wrap--hidden{height:0;overflow:hidden}.grid{margin:0 auto;position:relative;display:none}.grid__item{width:260px;padding:2.75rem;margin-bottom:5rem}.grid__item,.grid__item-wrap{position:relative}.grid__item-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--grid-item-bg)}.grid__item-img{pointer-events:none;position:relative;max-width:100%;margin:0 auto;display:block;outline:1px solid transparent}.grid__item:nth-child(even) .grid__item-img{transform:rotate3d(0,0,1,4deg)}.grid__item:nth-child(odd) .grid__item-img{transform:rotate3d(0,0,1,-4deg)}.grid__item-title{font-weight:400;position:absolute;left:0;top:0;margin:0 0 0 1rem;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:0 50%;color:#003386}.grid__item-number{font-weight:700;position:absolute;right:0;bottom:0;font-size:2.65rem;margin:0 0 .15rem}.content{margin:0 auto;grid-template-columns:100%;grid-template-rows:100%;align-items:center;pointer-events:none}.js .content{position:fixed;top:0;left:0;width:100%;z-index:1000}.content__item{padding:10rem 5vw;grid-area:1/1/1/1}.js .content__item{height:0;opacity:0;overflow:hidden;padding:0;pointer-events:none}.js .content__item--current{height:auto;opacity:1;padding:3rem 5vw 10rem;pointer-events:auto}.content__item-intro{position:relative;display:grid;grid-template-columns:100%;grid-template-rows:100%;align-items:center}.content__item-img{position:relative;height:auto;max-width:100%;display:block;margin:0 auto;grid-area:1/1/1/1}.js .content__item-img{visibility:hidden}.content__item-title{font-family:"Oswald",sans-serif;color:#003386;position:relative;font-size:7vw;line-height:1;text-align:center;margin:0;padding:0 5vw;white-space:nowrap;grid-area:1/1/1/1}.content__item-title>span{white-space:pre;display:inline-block}.content__item-subtitle{text-align:center;font-size:1.25rem;font-weight:400;margin:3rem auto}.content__item-text{text-align:justify;max-width:800px;margin:0 auto}.content__close{position:absolute;top:.75rem;left:50%;z-index:10000;transform:translateX(-50%);background:0 0;border:0;margin:0;padding:0;cursor:pointer;color:var(--color-text);font-size:32px}.content__close:focus{outline:0}.content__item--current~.content__close{pointer-events:auto}.content__indicator{position:absolute;top:calc(100vh - 6rem);left:calc(50% - .75rem);display:none}.content__close,.content__indicator,.js .content__item-subtitle,.js .content__item-text,.js .content__item-title>span{opacity:0}@media screen and (min-width:55em){.frame{display:grid;align-items:start;justify-items:start;grid-template-columns:40% 60%;grid-template-areas:"title header"}.codrops-header{grid-area:header;justify-self:end;display:flex;flex-direction:row;align-items:center;text-align:left}.codrops-links{margin:0 0 0 1.5rem}.title{grid-area:title;display:flex;text-align:left}.title__sub{position:relative;padding:0 0 0 5rem;margin:0 0 0 1rem}.title__sub::before{content:"";height:1px;width:4rem;background:currentColor;position:absolute;top:.65rem;left:0}.title__sub-works{display:block}.grid__item-number{right:-2.45rem}.grid__item-title{margin-left:-.25rem}.content__item-subtitle{font-size:3vw}.content__item-text{column-count:2;column-gap:20px}.content__item-img{max-width:none;height:calc(100vh - 6rem)}.content__item-subtitle{max-width:50%}.content__indicator{display:block}}