code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#272822}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}li{font-family:didot,times new roman,serif;font-style:italic}.avatar{width:100px;border-radius:100px}.avatars .avatar{width:80px;display:inline-block;margin:10px 10px 0}.big-avatars .avatar{width:120px;margin:16px 16px 0}.avatars{margin:0 60px}.seek-logo{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/seek.svg");width:300px;height:300px;background-size:auto 100%;position:relative;left:3px}.seek-logo.small{width:150px;height:150px}.static{background-size:contain;background-repeat:no-repeat;-webkit-transform:translateZ(0)none!important;transform:translateZ(0)none!important}.static.bespoke-backdrop-active{opacity:1}.space{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/space.jpg");-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.space.bespoke-backdrop-active{-webkit-transition:opacity 5s ease,-webkit-transform 20s ease;transition:opacity 5s ease,transform 20s ease}.chapter-13{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/chapter-13.jpg");background-position:50% 20%}.css-zen-garden-0{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/css-zen-garden-0.png")}.css-zen-garden-1{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/css-zen-garden-1.png")}.css-zen-garden-2{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/css-zen-garden-2.png")}.css-zen-garden-3{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/css-zen-garden-3.png")}.initial-commit{background-color:#fff;background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/initial-commit.png");background-position:0 50%;-webkit-transform-origin:20% 30%;transform-origin:20% 30%}.gulp-logo{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/gulp-logo.jpg")}.gulp-logo.bespoke-backdrop-active{opacity:1}.sass-logo{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/sass-logo.png")}.sass-logo.bespoke-backdrop-active{opacity:1}.postcss-logo{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/postcss-logo-dark.png")}.postcss-logo.bespoke-backdrop-active{opacity:1}.lego{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/lego.gif")}.lego.bespoke-backdrop-active{opacity:.1}[data-bespoke-backdrop="bem"]{color:#000}.bem{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/bem.svg");background-size:contain;background-repeat:no-repeat;-webkit-transform:translateZ(0) translateZ(0) translateX(9%) translateY(-20px) scale(1);transform:translateZ(0) translateZ(0) translateX(9%) translateY(-20px) scale(1)}.bem.bespoke-backdrop-active{opacity:1}.bem.bespoke-backdrop-active,.bem.bespoke-backdrop-before{-webkit-transform:translateZ(0) translateZ(0) translateX(9%) translateY(-20px) scale(.6);transform:translateZ(0) translateZ(0) translateX(9%) translateY(-20px) scale(.6)}[data-bespoke-backdrop="jquery-ui-datepicker"] h2{background:#000;padding:20px 18px 20px 30px}.jquery-ui-datepicker{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/jquery-ui-datepicker.png");background-position:0 50%}.jquery-ui-datepicker.bespoke-backdrop-active{opacity:.5}.react{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/react.png")}.bespoke-bullet.show{opacity:1}.circles{position:absolute;z-index:1;width:270px;height:150px;top:50%;left:50%;margin-left:-135px;margin-top:-75px}.circles.circles--multiple{z-index:0}.circles div{-webkit-transition:all 1s cubic-bezier(.725,-.365,.175,1);transition:all 1s cubic-bezier(.725,-.365,.175,1);width:150px;height:150px;border-radius:150px;position:absolute;top:0;left:50%;margin-left:-75px}.circles div:after{display:block;width:100%;text-align:center;color:#222;line-height:150px;font-size:30px}.circles .css{z-index:1;background:#fff}.show-css-and-js.bespoke-bullet-active .circles .css{-webkit-transform:translateZ(0) translateX(60px);transform:translateZ(0) translateX(60px)}.circles .css:after{content:'CSS'}.circles .css.style:after{content:'Style'}.circles .js{background:#ff0}.circles .js:after{content:'JS'}.show-css-and-js.bespoke-bullet-active .circles .js{-webkit-transform:translateZ(0) translateX(-60px);transform:translateZ(0) translateX(-60px)}.circles .component{opacity:0;-webkit-transition:all .6s ease;transition:all .6s ease;border:1px solid #888;background:#111;-webkit-transform:translateZ(0) scale(2.5);transform:translateZ(0) scale(2.5);z-index:-1}.circles .component:after{content:'Component';position:absolute;color:#888;font-size:14px;top:-48px}.show-component.bespoke-bullet-active .circles .component{opacity:1}.circles .local-scope:after{content:'Local Scope'}.show-component-tree{-webkit-transition:all 1.6s cubic-bezier(.725,-.365,.175,1);transition:all 1.6s cubic-bezier(.725,-.365,.175,1)}.show-component-tree.bespoke-bullet-active{-webkit-transform:translateZ(0) translateY(-150px) scale(.3);transform:translateZ(0) translateY(-150px) scale(.3)}.show-bigger-component-tree{-webkit-transition:all 2.2s cubic-bezier(.725,-.365,.175,1);transition:all 2.2s cubic-bezier(.725,-.365,.175,1)}.show-bigger-component-tree.bespoke-bullet-active{-webkit-transform:translateZ(0) scale(.5);transform:translateZ(0) scale(.5)}.show-app-boundary{-webkit-transition:all 1s cubic-bezier(.725,-.365,.175,1);transition:all 1s cubic-bezier(.725,-.365,.175,1);-webkit-transform-origin:100% 300%;transform-origin:100% 300%}.show-app-boundary.bespoke-bullet-active{-webkit-transform:translateZ(0) scale(.75);transform:translateZ(0) scale(.75)}.show-style-guide-boundary{-webkit-transition:all 1s cubic-bezier(.725,-.365,.175,1);transition:all 1s cubic-bezier(.725,-.365,.175,1)}.show-style-guide-boundary.bespoke-bullet-active{-webkit-transform:translateZ(0) scale(.65) translateX(-2800px) translateY(600px);transform:translateZ(0) scale(.65) translateX(-2800px) translateY(600px)}.boundary{border-radius:40px;opacity:0;-webkit-transition:all .6s ease;transition:all .6s ease;-webkit-transition-delay:.6s;transition-delay:.6s;border:3px solid #fff;-webkit-transform:translateZ(0) scale(2.5);transform:translateZ(0) scale(2.5);z-index:-1;position:absolute}.app-boundary{width:2050px;height:1370px;top:620px;left:-1000px}.app-boundary:after{content:'Application';position:absolute;color:#fff;font-size:120px;top:1172px;left:740px}.show-app-boundary.bespoke-bullet-active .app-boundary{-webkit-transition-delay:0;transition-delay:0;opacity:1}.style-guide-boundary{width:2050px;height:1370px;top:620px;left:4500px}.style-guide-boundary:after{content:'Style Guide';position:absolute;color:#fff;font-size:120px;top:1172px;left:740px}.show-style-guide-boundary.bespoke-bullet-active .style-guide-boundary{-webkit-transition-delay:0;transition-delay:0;opacity:1}.circles{-webkit-transition:all 1s cubic-bezier(.725,-.365,.175,1);transition:all 1s cubic-bezier(.725,-.365,.175,1)}.circles--multiple-0,.circles--multiple-8{-webkit-transition-delay:.3s;transition-delay:.3s}.circles--multiple-1,.circles--multiple-9{-webkit-transition-delay:.35s;transition-delay:.35s}.circles--multiple-2,.circles--multiple-10{-webkit-transition-delay:.4s;transition-delay:.4s}.circles--multiple-3,.circles--multiple-11{-webkit-transition-delay:.45s;transition-delay:.45s}.circles--multiple-4,.circles--multiple-12{-webkit-transition-delay:.5s;transition-delay:.5s}.circles--multiple-5,.circles--multiple-13{-webkit-transition-delay:.55s;transition-delay:.55s}.circles--multiple-6,.circles--multiple-14{-webkit-transition-delay:.6s;transition-delay:.6s}.circles--multiple-7,.circles--multiple-15{-webkit-transition-delay:.65s;transition-delay:.65s}.circles--multiple-16{-webkit-transition-delay:.7s;transition-delay:.7s}.circles--multiple-17{-webkit-transition-delay:.75s;transition-delay:.75s}.circles--multiple-18{-webkit-transition-delay:.8s;transition-delay:.8s}.circles--multiple-19{-webkit-transition-delay:.85s;transition-delay:.85s}.circles--multiple-20{-webkit-transition-delay:.9s;transition-delay:.9s}.circles--multiple-21{-webkit-transition-delay:.95s;transition-delay:.95s}.circles--multiple-22{-webkit-transition-delay:1s;transition-delay:1s}.circles--multiple-23{-webkit-transition-delay:1.05s;transition-delay:1.05s}.show-component-tree.bespoke-bullet-active .circles--multiple-0{-webkit-transform:translateZ(0) translateY(500px) translateX(-500px);transform:translateZ(0) translateY(500px) translateX(-500px)}.show-component-tree.bespoke-bullet-active .circles--multiple-1{-webkit-transform:translateZ(0) translateY(500px);transform:translateZ(0) translateY(500px)}.show-component-tree.bespoke-bullet-active .circles--multiple-2{-webkit-transform:translateZ(0) translateY(500px) translateX(500px);transform:translateZ(0) translateY(500px) translateX(500px)}.show-component-tree.bespoke-bullet-active .circles--multiple-3{-webkit-transform:translateZ(0) translateY(1000px) translateX(-1000px);transform:translateZ(0) translateY(1000px) translateX(-1000px)}.show-component-tree.bespoke-bullet-active .circles--multiple-4{-webkit-transform:translateZ(0) translateY(1000px) translateX(-500px);transform:translateZ(0) translateY(1000px) translateX(-500px)}.show-component-tree.bespoke-bullet-active .circles--multiple-5{-webkit-transform:translateZ(0) translateY(1000px);transform:translateZ(0) translateY(1000px)}.show-component-tree.bespoke-bullet-active .circles--multiple-6{-webkit-transform:translateZ(0) translateY(1000px) translateX(500px);transform:translateZ(0) translateY(1000px) translateX(500px)}.show-component-tree.bespoke-bullet-active .circles--multiple-7{-webkit-transform:translateZ(0) translateY(1000px) translateX(1000px);transform:translateZ(0) translateY(1000px) translateX(1000px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-8{-webkit-transform:translateZ(0) translateY(1500px) translateX(-1500px);transform:translateZ(0) translateY(1500px) translateX(-1500px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-9{-webkit-transform:translateZ(0) translateY(1500px) translateX(-1000px);transform:translateZ(0) translateY(1500px) translateX(-1000px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-10{-webkit-transform:translateZ(0) translateY(1500px) translateX(-500px);transform:translateZ(0) translateY(1500px) translateX(-500px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-11{-webkit-transform:translateZ(0) translateY(1500px);transform:translateZ(0) translateY(1500px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-12{-webkit-transform:translateZ(0) translateY(1500px) translateX(500px);transform:translateZ(0) translateY(1500px) translateX(500px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-13{-webkit-transform:translateZ(0) translateY(1500px) translateX(1000px);transform:translateZ(0) translateY(1500px) translateX(1000px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-14{-webkit-transform:translateZ(0) translateY(1500px) translateX(1500px);transform:translateZ(0) translateY(1500px) translateX(1500px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-15{-webkit-transform:translateZ(0) translateY(2000px) translateX(-2000px);transform:translateZ(0) translateY(2000px) translateX(-2000px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-16{-webkit-transform:translateZ(0) translateY(2000px) translateX(-1500px);transform:translateZ(0) translateY(2000px) translateX(-1500px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-17{-webkit-transform:translateZ(0) translateY(2000px) translateX(-1000px);transform:translateZ(0) translateY(2000px) translateX(-1000px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-18{-webkit-transform:translateZ(0) translateY(2000px) translateX(-500px);transform:translateZ(0) translateY(2000px) translateX(-500px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-19{-webkit-transform:translateZ(0) translateY(2000px);transform:translateZ(0) translateY(2000px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-20{-webkit-transform:translateZ(0) translateY(2000px) translateX(500px);transform:translateZ(0) translateY(2000px) translateX(500px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-21{-webkit-transform:translateZ(0) translateY(2000px) translateX(1000px);transform:translateZ(0) translateY(2000px) translateX(1000px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-22{-webkit-transform:translateZ(0) translateY(2000px) translateX(1500px);transform:translateZ(0) translateY(2000px) translateX(1500px)}.show-bigger-component-tree.bespoke-bullet-active .circles--multiple-23{-webkit-transform:translateZ(0) translateY(2000px) translateX(2000px);transform:translateZ(0) translateY(2000px) translateX(2000px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-1{-webkit-transform:translateZ(0) translateY(250px) translateX(4250px);transform:translateZ(0) translateY(250px) translateX(4250px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-4{-webkit-transform:translateZ(0) translateY(750px) translateX(4250px);transform:translateZ(0) translateY(750px) translateX(4250px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-6{-webkit-transform:translateZ(0) translateY(750px) translateX(4750px);transform:translateZ(0) translateY(750px) translateX(4750px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-9{-webkit-transform:translateZ(0) translateY(1250px) translateX(4250px);transform:translateZ(0) translateY(1250px) translateX(4250px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-11{-webkit-transform:translateZ(0) translateY(1250px) translateX(4750px);transform:translateZ(0) translateY(1250px) translateX(4750px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-13{-webkit-transform:translateZ(0) translateY(1250px) translateX(5250px);transform:translateZ(0) translateY(1250px) translateX(5250px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-15{-webkit-transform:translateZ(0) translateY(1750px) translateX(4250px);transform:translateZ(0) translateY(1750px) translateX(4250px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-16{-webkit-transform:translateZ(0) translateY(1750px) translateX(4750px);transform:translateZ(0) translateY(1750px) translateX(4750px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-18{-webkit-transform:translateZ(0) translateY(1750px) translateX(5250px);transform:translateZ(0) translateY(1750px) translateX(5250px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-20{-webkit-transform:translateZ(0) translateY(1750px) translateX(5750px);transform:translateZ(0) translateY(1750px) translateX(5750px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-22{-webkit-transform:translateZ(0) translateY(1750px) translateX(6250px);transform:translateZ(0) translateY(1750px) translateX(6250px)}.show-style-guide-boundary.bespoke-bullet-active .circles--multiple-23{-webkit-transform:translateZ(0) translateY(1750px) translateX(6750px);transform:translateZ(0) translateY(1750px) translateX(6750px)}@-webkit-keyframes slowspin{0%{-webkit-transform:rotateX(-33.5deg)rotateY(45deg);transform:rotateX(-33.5deg)rotateY(45deg)}20%,100%{-webkit-transform:rotateX(-33.5deg)rotateY(225deg);transform:rotateX(-33.5deg)rotateY(225deg)}}@keyframes slowspin{0%{-webkit-transform:rotateX(-33.5deg)rotateY(45deg);transform:rotateX(-33.5deg)rotateY(45deg)}20%,100%{-webkit-transform:rotateX(-33.5deg)rotateY(225deg);transform:rotateX(-33.5deg)rotateY(225deg)}}@-webkit-keyframes fastspin{0%{-webkit-transform:rotateX(-33.5deg)rotateY(45deg);transform:rotateX(-33.5deg)rotateY(45deg)}20%,100%{-webkit-transform:rotateX(-33.5deg)rotateY(-315deg);transform:rotateX(-33.5deg)rotateY(-315deg)}}@keyframes fastspin{0%{-webkit-transform:rotateX(-33.5deg)rotateY(45deg);transform:rotateX(-33.5deg)rotateY(45deg)}20%,100%{-webkit-transform:rotateX(-33.5deg)rotateY(-315deg);transform:rotateX(-33.5deg)rotateY(-315deg)}}.logo{width:100%;height:220px;position:relative;overflow:hidden}.cube{width:100%;height:100%;padding:0;-webkit-transform-origin:50px 50px;transform-origin:50px 50px;-webkit-transform:rotateX(-33.5deg)rotateY(45deg);transform:rotateX(-33.5deg)rotateY(45deg);-webkit-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation:slowspin 5s ease-in-out infinite 1s;-ms-animation:slowspin 5s ease-in-out infinite 1s;animation:slowspin 5s ease-in-out infinite 1s;margin:-50px 0 0 -50px;top:50%;left:50%}.cube,.cube span{display:block;position:absolute}.cube span{width:100px;height:100px;-webkit-transition:-webkit-transform 1s ease-in-out;transition:transform 1s ease-in-out}.cube .front,.cube .back,.cube .right,.cube .left,.cube .top{background:-webkit-radial-gradient(transparent 30%,rgba(16,47,91,.2)100%);background:radial-gradient(transparent 30%,rgba(16,47,91,.2)100%)}.cube span:after{content:"";display:block;position:absolute;width:100px;height:100px;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(126,169,232,.5);-webkit-transition:-webkit-transform 1s ease-in-out;transition:transform 1s ease-in-out}.cube .front{-webkit-transform:translateZ(50px);transform:translateZ(50px)}.cube .back{-webkit-transform:rotateX(-180deg)translateZ(50px);transform:rotateX(-180deg)translateZ(50px)}.cube .right{-webkit-transform:rotateY(90deg)translateZ(50px);transform:rotateY(90deg)translateZ(50px)}.cube .left{-webkit-transform:rotateY(-90deg)translateZ(50px);transform:rotateY(-90deg)translateZ(50px)}.cube .top{-webkit-transform:rotateX(90deg)translateZ(50px);transform:rotateX(90deg)translateZ(50px)}.cube .top:after{background-color:rgba(152,186,237,.5)}.cube .bottom{-webkit-transform:rotateX(-90deg)translateZ(50px);transform:rotateX(-90deg)translateZ(50px)}.cube .floor:after{display:none}.cube .floor{box-shadow:-300px 0 50px rgba(0,0,0,.3);-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;width:110px;height:110px;left:295px;background-color:rgba(0,0,0,0);-webkit-transform:rotateX(-90deg)translateZ(60px);transform:rotateX(-90deg)translateZ(60px)}.cube-inner{width:100%;height:100%;padding:0;top:50%;left:50%;-webkit-transform-origin:25px 25px;transform-origin:25px 25px;margin:-25px 0 0 -25px;-webkit-transform:rotateX(-33.5deg)rotateY(45deg);transform:rotateX(-33.5deg)rotateY(45deg);-webkit-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation:fastspin 5s ease-in-out infinite 1s;-ms-animation:fastspin 5s ease-in-out infinite 1s;animation:fastspin 5s ease-in-out infinite12s;display:block;position:absolute}.cube-inner span{display:block;position:absolute;width:50px;height:50px;-webkit-transition:-webkit-transform 1s ease-in-out;transition:transform 1s ease-in-out}.cube-inner .front,.cube-inner .back,.cube-inner .right,.cube-inner .left,.cube-inner .top{background:-webkit-radial-gradient(transparent 30%,rgba(5,17,53,.2)100%);background:radial-gradient(transparent 30%,rgba(5,17,53,.2)100%)}.cube-inner span:after{content:"";display:block;position:absolute;width:50px;height:50px;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(16,58,177,.5);-webkit-transition:-webkit-transform 1s ease-in-out;transition:transform 1s ease-in-out}.cube-inner .front{-webkit-transform:translateZ(25px);transform:translateZ(25px)}.cube-inner .back{-webkit-transform:rotateX(-180deg)translateZ(25px);transform:rotateX(-180deg)translateZ(25px)}.cube-inner .right{-webkit-transform:rotateY(90deg)translateZ(25px);transform:rotateY(90deg)translateZ(25px)}.cube-inner .left{-webkit-transform:rotateY(-90deg)translateZ(25px);transform:rotateY(-90deg)translateZ(25px)}.cube-inner .top{-webkit-transform:rotateX(90deg)translateZ(25px);transform:rotateX(90deg)translateZ(25px)}.cube-inner .top:after{background-color:rgba(22,78,234,.5)}.cube-inner .bottom{-webkit-transform:rotateX(-90deg)translateZ(25px);transform:rotateX(-90deg)translateZ(25px)}.cube-inner .floor:after{display:none}.cube-inner .floor{box-shadow:-300px 0 50px rgba(0,0,0,.3);-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;width:60px;height:60px;left:295px;background-color:rgba(0,0,0,0);-webkit-transform:rotateX(-90deg)translateZ(35px);transform:rotateX(-90deg)translateZ(35px)}.webpack-logo{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-bottom:-48px;margin-left:-100px;margin-top:-110px;zoom:3;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1);opacity:.6}.logo{-webkit-transform:translateZ(0) rotateX(0deg);transform:translateZ(0) rotateX(0deg)}ul.minimal li:before{display:none}.vjeux{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/vjeux.jpg");-webkit-transform-origin:55% 20%;transform-origin:55% 20%}.vjeux.bespoke-backdrop-active{opacity:.2}.css-in-js-slide{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/css-in-js-slide.png");background-color:#000;background-size:contain;background-repeat:no-repeat;-webkit-transform:translateZ(0)none;transform:translateZ(0)none}.css-in-js-slide.bespoke-backdrop-active{opacity:1}.michelebertoli{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/michelebertoli.jpg");-webkit-transform-origin:50% 30%;transform-origin:50% 30%}.michelebertoli.bespoke-backdrop-active{opacity:.5}.geelen{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/avatars/geelen.jpg");-webkit-transform-origin:50% 30%;transform-origin:50% 30%}.geelen.bespoke-backdrop-active{opacity:.5}.andreypopp{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/avatars/andreypopp.png");-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.andreypopp.bespoke-backdrop-active{opacity:.2}.want{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/want.gif");-webkit-transform:translateZ(0)none;transform:translateZ(0)none}.want.bespoke-backdrop-active{opacity:1}.legobricks{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/legobricks.jpg");-webkit-transform-origin:50% 60%;transform-origin:50% 60%}.legobricks.bespoke-backdrop-active{opacity:.3}.mjackson{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/mjackson.jpg");-webkit-transform-origin:50% 30%;transform-origin:50% 30%}.mjackson.bespoke-backdrop-active{opacity:.3}.larrydavid{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/larrydavid.gif");-webkit-transform:translateZ(0)none!important;transform:translateZ(0)none!important;background-position:50% 0}.larrydavid.bespoke-backdrop-active{opacity:.6}.scared{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/scared.gif");-webkit-transform:translateZ(0)none!important;transform:translateZ(0)none!important;background-position:50% 0}.scared.bespoke-backdrop-active{opacity:.4}.experiment{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/experiment.jpg");background-position:100% 0;-webkit-transform-origin:60% 30%;transform-origin:60% 30%}.experiment.bespoke-backdrop-active{opacity:.4}.maze{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/maze.gif");-webkit-transform:translateZ(0)none!important;transform:translateZ(0)none!important}.maze.bespoke-backdrop-active{opacity:1}.hide-checkbox,.show-checkbox{opacity:1!important}.hide-checkbox input,.hide-checkbox h2{-webkit-transition:opacity 2s ease;transition:opacity 2s ease;opacity:0}.show-checkbox.bespoke-bullet-active input,.show-checkbox.bespoke-bullet-active h2{opacity:1}.takeoff{width:100px;height:200px;margin:0 auto;position:relative;left:22px}.takeoff input+label{width:56px;height:118px;background:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/rocket.png") 0 0 no-repeat;display:block;-webkit-transition:-webkit-transform 8s;transition:transform 8s;-webkit-transition-timing-function:cubic-bezier(.38,-.1,.46,.45);transition-timing-function:cubic-bezier(.38,-.1,.46,.45)}.takeoff input:checked+label{height:156px;background-position:0 100%;-webkit-transform:translateZ(0) translateY(-20em);transform:translateZ(0) translateY(-20em)}.takeoff input~.stars{background:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/star-background.jpg");opacity:.4;background-size:cover;position:absolute;z-index:-2;left:-500px;top:-1000px;width:1100px;height:2000px;-webkit-transition:all 5s ease;transition:all 5s ease}.takeoff input:checked~.stars{-webkit-transform:translateZ(0) translateY(200px);transform:translateZ(0) translateY(200px);-webkit-transition:all 10s ease;transition:all 10s ease;-webkit-transition-delay:.3s;transition-delay:.3s}.takeoff input~.planet{position:absolute;bottom:-1950px;left:-980px;width:2040px;height:2040px;background:#222;box-shadow:0 0 50px rgba(255,255,255,.5);border-radius:2040px;z-index:-1;-webkit-transition:all 5s ease;transition:all 5s ease;-webkit-transition-delay:.3s;transition-delay:.3s}.takeoff input:checked~.planet{-webkit-transform:translateZ(0) translateY(400px);transform:translateZ(0) translateY(400px)}.aphrodite{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/aphrodite.jpg");background-position:50% 70%;-webkit-transform-origin:60% 30%;transform-origin:60% 30%}.aphrodite.bespoke-backdrop-active{opacity:.6}.jlfwong{background-image:url("/prx/000/http/markdalgleish.github.io/presentation-the-case-for-css-modules/images/jlfwong.png");background-position:50% 70%;-webkit-transform-origin:60% 30%;transform-origin:60% 30%;-webkit-filter:blur(10px);filter:blur(10px)}.jlfwong.bespoke-backdrop-active{opacity:.3}.emoji{font-size:80px}section.code-columns{-webkit-transform:translateZ(0) translateZ(0);transform:translateZ(0) translateZ(0)}pre.left,pre.right{position:absolute;width:30%;top:5%;left:50%}pre.left{-webkit-transform:translateZ(0) translateX(-80%);transform:translateZ(0) translateX(-80%)}pre.right{-webkit-transform:translateZ(0) translateX(0%);transform:translateZ(0) translateX(0%)}