.hero[data-v-028b1ce5]{color:#fff}.logo[data-v-028b1ce5]{width:100%;height:auto;max-width:600px}.fadeInDown[data-v-028b1ce5]{-webkit-animation-duration:3s;animation-duration:3s}.section[data-v-4543d7c0]{color:#fff}.logo[data-v-4543d7c0]{width:100%;height:auto;max-width:600px}footer[data-v-7bc0b384]{background-color:#1e1d22}.slideshow{--color-text:#fff;--color-bg:#f1f1f1;--color-link:#fff;--color-link-hover:#74c3d0;--color-stitle:#fff;--fontsize-stitle:6vw;--color-nav:#fff;--color-nav-hover:#000}@-webkit-keyframes loaderAnim{to{opacity:1;transform:scale3d(0.5,0.5,1)}}@keyframes loaderAnim{to{opacity:1;transform:scale3d(0.5,0.5,1)}}a{text-decoration:none;color:var(--color-link);outline:none}a:focus,a:hover{color:var(--color-link-hover);outline:none}.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}.icon--arrow-rot{transform:rotate(180deg)}main{width:100%}.content,main{position:relative}.content{display:flex;justify-content:center;align-items:center;margin:0 auto;min-height:100vh}.content--fixed{position:fixed;z-index:10000;top:0;left:0;display:grid;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 github" "... ..." "... demos"}.content--fixed a{pointer-events:auto}.codrops-header{position:relative;z-index:100;display:flex;flex-direction:row;align-items:flex-start;align-items:center;align-self:start;grid-area:header;justify-self:start}.codrops-header__title{font-size:1em;font-weight:400;margin:0;padding:0}.github{display:block;align-self:start;grid-area:github;justify-self:end;padding:0.5em 0}.demos{position:relative;display:block;align-self:end;text-align:center;grid-area:demos}.demo{margin:0 0.15em}.demo:focus,.demo:hover{opacity:0.5}.demo span{white-space:nowrap;text-transform:lowercase;pointer-events:none}.demo span:before{content:"#"}a.demo--current{pointer-events:none}.codrops-links{position:relative;display:flex;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}.slideshow{width:100%;height:75vh;position:relative;overflow:hidden}.slide,.slides{position:absolute;width:100%;height:100%}.slide{overflow:hidden;opacity:0;pointer-events:none;display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center}.slide--current{opacity:1;pointer-events:auto}.slide__img{position:absolute;top:-200px;left:-200px;width:calc(100% + 400px);height:calc(100% + 400px);background-size:cover;background-position:50% 50%}.slidenav{position:absolute;width:300px;margin-left:-150px;left:50%;bottom:0;text-align:center;padding:2em}.slidenav__item{border:0;background:none;font-weight:700;color:#fff}.slidenav__item:focus{outline:none}.slidenav__item:hover{color:var(--color-nav-hover)}.shape{position:absolute;width:100%;height:100%;fill:var(--color-shape-fill);top:0;pointer-events:none}.slide__title{font-size:var(--fontsize-stitle);margin:0;line-height:1;color:var(--color-stitle);background-color:rgba(17,87,139,0.6);padding:0.2em}.slide__desc,.slide__title{position:relative;cursor:default}.slide__desc{font-size:1.5em;margin:0 0 2em 0;color:var(--color-sdesc);padding:0 1em;text-align:center}.slide__link{position:relative;font-size:1em;font-weight:700;padding:1em 2em;display:block;color:var(--color-slink);background:var(--color-slink-bg);transition:color 0.3s,background 0.3s}.slide__link:hover{color:var(--color-slink-hover);background:var(--color-slink-hover-bg)}@media screen and (min-width:55em){.demos{display:flex;justify-self:end}.demo{display:block;width:17px;height:17px;margin:0 4px;border-radius:50%;background:var(--color-link)}a.demo--current{background:var(--color-link-hover)}.demo span{line-height:1;position:absolute;right:100%;display:none;margin:0 1em 0 0}.demo--current span{display:block}}@media screen and (max-width:55em){.content{flex-direction:column;height:auto;min-height:0;padding-bottom:10em}.content--fixed{position:relative;z-index:1000;display:block;padding:0.85em}.codrops-header{flex-direction:column;align-items:center}.codrops-header__title{font-weight:700;padding-bottom:0.25em;text-align:center}.github{display:none}.codrops-links{margin:0}.slide__desc{font-size:1em}.slide__link{font-size:0.85em}}#map{position:absolute;overflow:hidden}.map-wrapper{position:absolute;height:400px;width:100%}.marker{position:absolute;background-repeat:no-repeat;display:block;border:none;padding:0}.section{min-height:100vh;width:100vw}.section h4{letter-spacing:0.1em}.section h5{letter-spacing:0.2em}.section .boxed{background-color:rgba(73,69,66,0.66);padding:1em;max-width:600px;margin:auto}.p-sans,.p-sans *{font-family:Raleway,sans-serif}.first-section{background:radial-gradient(farthest-side at 50% 50%,#f6f6f5,#fcf2ec);color:#494542}.third-section{background:radial-gradient(farthest-side at 50% 50%,#897155,#84735a);color:#f6f6f6}.third-section h4{max-width:400px}.fifth-section{background:radial-gradient(farthest-side at 50% 50%,#252026,#141d22);color:#f6f6f6}.sixth-section{background:radial-gradient(farthest-side at 50% 50%,#3471b0,#1c80b4);color:#fff}.sixth-section h6{letter-spacing:0.2em;margin:4em 0 0em 0}.sixth-section p{max-width:300px;margin:auto;letter-spacing:0.1em}.last-section .boxed{background-color:rgba(28,28,33,0.66)}.last-section .logo{max-width:100%;height:auto}