body{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;min-width:981px}.feature-button:hover .line{animation:line 3s linear infinite 0s}.feature-button:hover .line-two{animation:line 3s linear infinite 1s}.feature-button:hover .line-three{animation:line 3s linear infinite 2s}.feature-button:hover .pencil{animation:pencil 1s linear infinite 0s}.pencil-animation{width:20px;height:20px;position:absolute;left:14px;top:16px}.pencil-animation .pencil{width:90%;height:90%;position:absolute;bottom:10%;left:0;background:url(/img/pencil-icon.svg);background-size:100%}.pencil-animation .line-wrapper{width:90%;height:90%;position:absolute;overflow:hidden}.pencil-animation .line{height:100%;width:96%;position:absolute;transform-origin:left;-webkit-transform-origin:left;transform:scaleX(0)}.pencil-animation .line:after{content:"";position:absolute;width:100%;height:13%;background:#fff;bottom:0}@keyframes pencil{0%{transform:translateX(0)}13.5%{transform:translateX(90%)}40%{transform:translateX(90%)}60%{transform:translateX(50%) translateY(-30%)}80%{transform:translateX(0)}}@keyframes line{5.5%{transform:scaleX(1)}20%{transform:scaleX(1)}33%{transform:scaleX(1) translateY(-43.5%)}53%{transform:scaleX(1) translateY(-43.5%)}66%{transform:scaleX(1) translateY(-87%)}87%{transform:scaleX(1) translateY(-87%)}to{transform:scaleX(1) translateY(-150%)}}body,html{padding:0;margin:0}.content-wrapper{width:964px;margin:0 auto;position:relative}.click-underlay{width:100%;min-height:100%;position:fixed;top:0;left:0;z-index:150;overflow:hidden}.navbar-thimble #navbar-login{border-left:none;margin-right:0!important}.navbar-thimble #navbar-login.signed-in{border-right:none}.navbar-thimble #navbar-right{margin-right:0}.navbar-thimble .navbar-logo-container:active,.navbar-thimble .navbar-logo-container:hover{transform:none}.navbar-thimble .thimble-logo{height:auto;width:auto}.feature-section{background:linear-gradient(160deg,#166f41,#4bc771)}.feature-section .feature-button{position:relative;font-size:20px;color:#fff;background:transparent;padding:15px 20px 16px;padding:12px 16px 13px;border:2px solid #fff;text-decoration:none;font-weight:400;border-radius:3px;display:inline-block}.feature-section .feature-button+.feature-button{margin-left:10px}.feature-section .feature-button#new-project-button{padding-left:50px}.feature-section .feature-button.repo{background:url(/img/icon/github-white.svg) 0 no-repeat;background-size:24px;background-position:15px 14px;padding:15px 20px 16px 60px;padding:12px 16px 13px 50px}.feature-section .feature-button:hover{background-color:hsla(0,0%,100%,.1)}.feature-section .good-bug-count{position:absolute;top:-20px;right:-18px;color:#fff;padding:8px 0;width:40px;display:none;text-align:center;font-size:18px;border-radius:50%;background:#e04a27;animation:notification-pop .2s ease-out}@keyframes notification-pop{0%{transform:scale(.4) translateY(5px)}40%{transform:scale(1.2) translateY(0)}to{transform:scale(1)}}.get-started-feature{background-size:200px;padding:30px 0}.get-started-feature .left-side{width:45%;padding:30px 0 80px}.get-started-feature h1{color:#fff;padding:0;font-weight:400;font-size:37px;line-height:42px;margin:0 0 20px}.get-started-feature p{color:hsla(0,0%,100%,.9);margin:0 0 45px;line-height:140%}.get-started-feature p a,.get-started-feature p a:hover{color:#fff}.get-started-feature .video{position:absolute;top:20px;right:0;height:284px;background:#000;box-shadow:7px 7px 0 rgba(0,0,0,.2)}.get-started-feature .video iframe{position:relative;z-index:2}.get-started-feature .not-found-message{text-align:center;padding:25px 0 35px}.get-started-feature .not-found-message h1{font-size:40px;margin-bottom:5px}.get-started-feature .not-found-message p{font-size:30px;line-height:120%}.page-heading{padding:60px 0;margin-bottom:50px}.page-heading h1{color:#fff;padding:0;font-size:37px;line-height:42px;margin:0 0 25px;font-weight:400}[data-locale^=en_] .page-heading h1{font-family:Arvo,sans-serif;font-weight:400}[data-locale^=en_] .page-content .right-box h2{font-family:Arvo,sans-serif}[data-locale^=en_] .get-started-feature h1{font-family:Arvo,sans-serif;font-weight:400}.page-content{margin:45px 0 55px;overflow:auto}.page-content p{margin-top:0}.page-content a{color:#268cb9;text-decoration:none}.page-content a:hover{text-decoration:underline}.page-content p{line-height:150%;color:rgba(0,0,0,.65);margin:0 0 26px}.page-content .link-list{margin-bottom:30px;padding-left:24px}.page-content strong{color:#000;font-weight:600}.page-content .good-bug{background:#0e8a16;color:#fff;font-size:.8em;padding:0 5px 1px;border-radius:2px;text-decoration:none}.page-content .good-bug:hover{text-decoration:none;opacity:.8}.page-content ul{padding-left:22px;margin-bottom:26px}.page-content ul li{padding:2px 0;color:rgba(0,0,0,.65)}.page-content em{color:#000;font-weight:600}.page-content .indent{position:relative;left:15px}.page-content h3{margin:15px 0 6px;font-size:20px}.page-content h2{font-size:30px;clear:both}.page-content .right-box{float:right;width:300px;padding:20px;background:rgba(56,152,194,.2);color:#268cb9}.page-content .right-box h2{margin:0;padding:0;text-align:left;font-size:24px;font-weight:400}.page-content .right-box ul{padding-left:22px;margin:18px 0 5px;color:inherit}.page-content .right-box li{padding:5px 0;color:#268cb9}.two-col{overflow:auto}.two-col>div{width:50%;box-sizing:border-box}.two-col>div:first-child{float:left;padding-right:20px}.two-col>div:last-child{float:right;padding-left:20px}.left-side{max-width:60%}.note{background:#ff0}footer{background:#47ad66}footer .content-wrapper{padding:40px 0;width:964px;margin:0 auto;position:relative;color:#fff;overflow:auto;font-size:15px}footer .social-links{list-style-type:none;margin:0 0 32px;display:flex;justify-content:center;padding:0}footer .social-links li{flex:1;padding:0;margin:0 5px}footer .social-links li a{display:block;position:relative;padding-left:25px}footer .social-links .icon{position:absolute;display:block;width:20px;height:20px;top:1px;left:0;background-repeat:no-repeat;background-position:50%}footer .social-links .email .icon{background-image:url(/img/footer-icon-email.svg)}footer .social-links .help .icon{background-image:url(/img/footer-icon-help.svg)}footer .social-links .twitter .icon{background-image:url(/img/footer-icon-twitter.svg)}footer .social-links .github .icon{background-image:url(/img/footer-icon-github.svg)}footer .social-links .terms .icon{background-image:url(/img/footer-icon-terms.svg);top:0}footer .social-links .privacy .icon{background-image:url(/img/footer-icon-privacy.svg);top:0}footer .social-links a{opacity:.7;color:#fff;text-decoration:none;transition:opacity .1s linear}footer .social-links a:hover{opacity:1}footer .project-info{background:#2e9961;padding:18px 20px;width:610px;margin:0 auto;position:relative;border-radius:2px;line-height:22px}footer .project-info .mozilla-logo{position:absolute;bottom:24px;left:20px;width:100px;height:29px;background-image:url(/img/mozilla-logo.svg);background-size:contain;background-repeat:no-repeat;background-position:50%}footer .project-info .thimble-context{margin:0 0 0 122px;padding:0 0 0 20px;color:hsla(0,0%,100%,.5);border-left:2px solid #47ad66}footer .project-info .thimble-context a{color:#fff;text-decoration:none}footer .project-info .thimble-context a:hover{text-decoration:underline}.blue-button{border:2px solid #268cb9;padding:8px 16px;border-radius:2px;display:inline-block;font-weight:600}.blue-button:hover{text-decoration:none!important;background:#3898c2;color:#fff}.featured-contributors{padding:40px 0 80px;background:#eee;text-align:center}.featured-contributors h2{margin:0 0 20px;padding:0;font-size:30px;font-weight:600}.featured-contributors h2+p{font-size:18px;width:65%;margin:0 auto 55px;line-height:150%;color:rgba(0,0,0,.7)}.featured-contributors h2+p strong{color:#000}.contributor-list{overflow:auto;text-align:left}.contributor-list .column{width:50%;box-sizing:border-box}.contributor-list .left-col{float:left;padding-right:10px}.contributor-list .right-col{float:right;padding-left:10px;padding-right:7px}.contributor-list .contributor{background:#fff;padding:17px 25px 20px;margin-bottom:20px;position:relative;display:inline-block;box-shadow:7px 7px 0 rgba(0,0,0,.1)}.contributor-list .contributor h3{margin:0 0 3px}.contributor-list .contributor .quote{font-size:16px;margin:0 0 15px;font-style:italic;line-height:150%;color:rgba(0,0,0,.5)}.contributor-list .contributor a[href*=github]{background-image:url(/img/icon/github-blue.svg);background-position:0 3px;padding-left:22px;background-size:18px;background-repeat:no-repeat;color:#2281bc;text-decoration:none}.contributor-list .contributor a[href*=github]:hover{text-decoration:underline}.contributor-list .contributor ul{padding-left:20px;font-size:.9em;margin:20px 0}.contributor-list .contributor ul li{color:#000}.contributor-list .contributor .contributor-photo{background:#fff;border-radius:50%;height:65px;width:65px;top:15px;right:15px;position:absolute}[data-locale^=en_] .featured-contributors h2{font-weight:400;font-family:Arvo,sans-serif}.gallery-wrapper{background:#efefef}.gallery-wrapper a{color:#3897c1;text-decoration:none}.gallery-wrapper a:hover{text-decoration:underline}.gallery-wrapper .gallery{text-align:center;max-width:964px;margin:0 auto;padding-top:36px;padding-bottom:60px;min-height:1000px}.gallery-wrapper .gallery .search-header{display:flex;position:relative}.gallery-wrapper .gallery.no-results-found .title{opacity:0}.gallery-wrapper .gallery.no-results-found .no-results-message{display:block}.gallery-wrapper .gallery .title{margin:0;font-size:28px;text-align:left;color:rgba(0,0,0,.7);padding:0;position:relative;top:7px;flex:1}.gallery-wrapper .gallery.loading .popular-tags{display:none}.gallery-wrapper .gallery .popular-tags{text-align:center;margin:35px 0 0}.gallery-wrapper .gallery .popular-tags.hidden{display:none}.gallery-wrapper .gallery .popular-tags .tags-title{color:rgba(0,0,0,.6);margin-right:5px}.gallery-wrapper .gallery .popular-tags .tag{background:#3897c1;border-bottom:1px solid rgba(0,0,0,.12);line-height:1em;color:#fff;margin-bottom:5px;margin-right:4px;display:inline-block;padding:9px 13px 8px 12px;text-decoration:none;font-size:1em;border-radius:3px;transition:opacity .1s ease-out;position:relative;cursor:pointer}.gallery-wrapper .gallery .popular-tags .tag .count{background:hsla(0,0%,100%,.2);border-radius:0 15px 15px 0;position:absolute;top:0;right:0;padding:8px 13px 8px 10px;display:none}.gallery-wrapper .gallery .popular-tags .tag:hover{opacity:.85}.gallery-wrapper .gallery .fade{opacity:0}.gallery-wrapper .gallery .activities{display:flex;flex-wrap:wrap;justify-content:center;transition:opacity .05s ease-out;padding-top:23px;margin:0 -10px}.gallery-wrapper .gallery .activity{flex:1;margin:10px;width:200px;text-align:left;background:#fff;min-width:250px;max-width:350px;position:relative;padding-bottom:90px;overflow:hidden;box-shadow:7px 7px 0 rgba(0,0,0,.12)}.gallery-wrapper .gallery .activity.activity-template{display:none}.gallery-wrapper .gallery .activity p{color:rgba(0,0,0,.6);margin:0}.gallery-wrapper .gallery .activity .details{padding:15px 18px}.gallery-wrapper .gallery .activity .buttons{position:absolute;bottom:0;width:100%;padding:0 17px 16px;box-sizing:border-box;display:flex;justify-content:center;align-items:stretch}.gallery-wrapper .gallery .activity .buttons a{flex:1;line-height:.9em;text-decoration:none;font-size:16px;text-align:center;border-radius:2px;padding:15px 0 14px;font-weight:600}.gallery-wrapper .gallery .activity .buttons a.hidden{display:none}.gallery-wrapper .gallery .activity .buttons a.teaching-kit{margin-left:8px;font-weight:400}.gallery-wrapper .gallery .activity .buttons .remix{display:block;color:#fff;background:#51b56b;padding:15px 0 14px;border-bottom:2px solid rgba(0,0,0,.2)}.gallery-wrapper .gallery .activity .buttons .remix:hover{background:#5cbf71}.gallery-wrapper .gallery .activity .buttons .remix:active{border-bottom:2px solid #fff;position:relative;top:2px;background:#3e9652;opacity:1}.gallery-wrapper .gallery .activity .buttons .teaching-kit{display:none;color:#3898c2;background:rgba(56,152,194,.2)}.gallery-wrapper .gallery .activity .buttons .teaching-kit[href]{display:block}.gallery-wrapper .gallery .activity .buttons .teaching-kit:hover{background:rgba(56,152,194,.2);text-decoration:underline}.gallery-wrapper .gallery .activity .tags a{color:#3897c1;display:inline-block;text-decoration:none;font-size:.85em;cursor:pointer}.gallery-wrapper .gallery .activity .tags a:hover{text-decoration:underline}.gallery-wrapper .gallery .activity .tags a:not(:last-child):after{content:",";color:rgba(0,0,0,.4);text-decoration:none}.gallery-wrapper .gallery .activity .thumbnail{height:185px;background-position:top;background-size:cover;background-repeat:no-repeat;display:block;transition:opacity .15s ease-out;position:relative}.gallery-wrapper .gallery .activity .thumbnail .thumbnail-overlay{position:absolute;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,.9);background:rgba(11,43,27,.95);background-image:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease-out}.gallery-wrapper .gallery .activity .thumbnail .thumbnail-overlay a{color:#fff;border:1px solid #fff;padding:9px 26px;border-radius:2px;cursor:pointer;text-decoration:none;transform:translateY(10px);transition:transform .2s ease-out}.gallery-wrapper .gallery .activity .thumbnail .thumbnail-overlay a:hover{background:hsla(0,0%,100%,.1)}.gallery-wrapper .gallery .activity .thumbnail:hover .thumbnail-overlay{opacity:1}.gallery-wrapper .gallery .activity .thumbnail:hover .thumbnail-overlay a{transform:translateY(0)}.gallery-wrapper .gallery .activity .project-title{font-size:20px;padding:0;margin:0 0 2px;color:rgba(0,0,0,.7);line-height:25px;font-weight:600;text-indent:-1px;cursor:pointer}.gallery-wrapper .gallery .activity .project-title:hover{text-decoration:none}.gallery-wrapper .gallery .activity .author{font-size:.85em;color:rgba(0,0,0,.4)}.gallery-wrapper .gallery .activity .author a{position:relative;color:inherit;font-size:inherit}.gallery-wrapper .gallery .activity .description{font-size:1em;line-height:140%;margin:15px 0 1em}.gallery-wrapper .gallery.loading .activity{background:#fff;min-height:350px}.gallery-wrapper .gallery[active] .search-wrapper-outer{transform:scale(1.03) translateZ(0);box-shadow:0 2px 3px rgba(0,0,0,.11)}.gallery-wrapper .gallery .search-wrapper{flex-shrink:1}.gallery-wrapper .gallery.loading-error .search-wrapper-outer{opacity:.5}.gallery-wrapper .gallery .search-wrapper-outer{display:inline-block;float:right;transition:all .15s ease-out;background:#fff;padding:6px 12px 6px 10px;position:relative;margin-left:10px;border-radius:6px}.gallery-wrapper .gallery.has-term .search-icon{opacity:0}.gallery-wrapper .gallery.has-term .clear{opacity:1}.gallery-wrapper .gallery input.search{border:none;width:300px;background:transparent;padding:0;margin:7px 0 6px;position:relative;font-size:18px;display:inline-block;font-family:inherit;outline:none;top:-1px}.gallery-wrapper .gallery .icon{position:absolute;top:7px;right:7px;width:36px;height:36px;background-size:18px;background-position:50%;background-repeat:no-repeat;transition:opacity .15s ease-out}.gallery-wrapper .gallery .clear{opacity:0}.gallery-wrapper .gallery .search-icon{background-image:url(/img/search.svg);opacity:.3}.gallery-wrapper .gallery .clear-icon{background-image:url(/img/clear.svg);background-size:16px}.gallery-wrapper .gallery.loading .loading-status{display:block}.gallery-wrapper .gallery .loading-status{text-align:center;font-size:1.4em;padding:30px 0 0;animation:loading-pulse 1s ease-in-out infinite;color:rgba(0,0,0,.6);display:none}.gallery-wrapper .gallery .loading-status .failure{display:none}@keyframes loading-pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.02);opacity:1}to{transform:scale(1);opacity:.8}}.gallery-wrapper .gallery.loading-error .loading-status{animation:none}.gallery-wrapper .gallery.loading-error .loading-status .failure{display:block}.gallery-wrapper .gallery.loading-error .loading-status .in-progress{display:none}.gallery-wrapper .gallery .no-results-message{text-align:center;position:relative;margin-top:40px;display:none;transition:opacity .2s ease-out}.gallery-wrapper .gallery .no-results-message a{font-weight:600;border-radius:2px}.gallery-wrapper .gallery .no-results-message h1{font-size:28px;margin:0 0 10px;font-weight:600;opacity:.6}.gallery-wrapper .gallery .no-results-message p{color:rgba(0,0,0,.6);font-size:18px;margin:0}.gallery-wrapper .gallery .pop{animation:pop .2s ease-out}@keyframes pop{30%{transform:scale(1.02)}}.gallery-wrapper .search-tags{display:inline-block}.gallery-wrapper .search-tags .search-tag{background:#3897c1;color:#fff;margin-right:4px;display:inline-block;padding:8px 40px 8px 13px;text-decoration:none;border-radius:3px;border-bottom:1px solid rgba(0,0,0,.12);transition:opacity .1s ease-out;cursor:pointer;position:relative;top:-2px;line-height:1em}.gallery-wrapper .search-tags .search-tag .remove{position:absolute;top:0;right:0;height:100%;width:40px;background-image:url(/img/remove.svg);background-size:12px;background-position:50%;background-repeat:no-repeat;opacity:.6;transition:opacity .15s ease-out}.gallery-wrapper .search-tags .search-tag .remove:hover{opacity:.9}.gallery-wrapper .contribute-activity{margin:30px 0 0;color:rgba(0,0,0,.7)}[data-locale^=en_] .gallery-wrapper .gallery .title{font-size:28px;font-weight:400;font-family:Arvo,sans-serif}.callout{font-size:18px;margin-bottom:60px;line-height:150%}.callout em{font-weight:600;text-decoration:underline}.feature-list{display:flex;flex-wrap:wrap}.feature-list .key{background:#333;background:rgba(0,0,0,.15);color:rgba(0,0,0,.5);padding:0 6px;border-radius:2px;font-weight:600}.feature-list .feature{overflow:auto;margin-bottom:40px;padding-bottom:5px;width:50%;box-sizing:border-box;padding-right:60px}.feature-list .feature .feature-description{color:rgba(0,0,0,.65);line-height:150%}.feature-list .feature .feature-description strong{color:#000}.feature-list .feature .feature-name{margin:0 0 12px;line-height:30px;font-size:22px}.feature-list .feature .feature-image{width:100%;margin:0 0 30px;box-shadow:7px 7px 0 rgba(0,0,0,.15)}.feature-list .feature video{width:100%;box-shadow:7px 7px 0 rgba(0,0,0,.15);background:rgba(0,0,0,.15);display:block}.feature-list .feature .video-wrapper{position:relative;margin:0 0 30px}.feature-list .feature .video-wrapper .video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:transparent;transition:background-color .4s ease-out}.feature-list .feature .video-wrapper .video-indicator{position:absolute;bottom:10px;right:12px;height:30px;width:30px;border-radius:2px;background-image:url(/img/icon/video-playing.svg);background-size:12px;background-repeat:no-repeat;background-position:9px 7px;opacity:.8;background-color:rgba(0,0,0,.4);animation:pulse .2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.feature-list .feature .video-wrapper.paused .video-indicator{background-image:url(/img/icon/video-paused.svg);background-color:transparent;animation:none}.feature-list .feature .video-wrapper.paused .video-overlay{background-color:rgba(0,0,0,.6)}.feature-list .feature.wide{width:100%;border:2px solid #ddd;padding-top:40px;padding-bottom:20px;border-width:2px 0;min-height:0}.feature-list .feature.wide ul{list-style-type:disc;padding-left:20px;overflow:hidden}.feature-list .feature.wide h2{clear:none}.feature-list .feature.wide .video-wrapper{width:calc(50% - 30px);margin-right:60px;float:left}