@font-face{font-family:"Fira Medium";src:url("https://code.cdn.mozilla.net/fonts/woff/FiraSans-Regular.woff") format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"Fira Regular";src:url("https://code.cdn.mozilla.net/fonts/woff/FiraSans-Light.woff") format("woff");font-weight:normal;font-style:normal}body,html{font-family:"Fira Regular";padding:0;margin:0}.click-underlay{width:100%;min-height:100%;position:fixed;top:0;left:0;z-index:150;overflow:hidden}header{padding:20px;overflow:auto;background:#2e9961}header .branding{float:left;color:white}header .branding img{position:relative;top:2px}header .account-actions{float:right;color:rgba(255,255,255,0.7);font-size:15px}header .account-actions a{color:white;text-decoration:none}header .account-actions a:hover{text-decoration:underline}.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:hover{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.navbar-thimble .navbar-logo-container:active{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.navbar-thimble .thimble-logo{height:auto;width:auto}footer{background:#47ad66;margin-top:80px}footer .content-wrapper{padding:40px 0 40px 0;width:964px;margin:0 auto;position:relative;color:white;overflow:auto;font-size:15px}footer .social-links{list-style-type:none;margin:0 0 32px 0;display:flex;justify-content:center;padding:0}footer .social-links li{line-height:15px;padding:0;margin:0 15px}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:-4px;left:-2px;background-repeat:no-repeat;background-position:center}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:-5px}footer .social-links .privacy .icon{background-image:url(/img/footer-icon-privacy.svg);top:-5px}footer .social-links a{opacity:.7;color:white;text-decoration:none;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-ms-transition:opacity .1s linear;-o-transition:opacity .1s linear;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:4px;line-height:22px}footer .project-info .mozilla-logo{position:absolute;bottom:24px;left:20px}footer .project-info .mozilla-logo img{display:block;width:100px}footer .project-info .thimble-context{margin:0 0 0 122px;padding:0 0 0 20px;color:rgba(255,255,255,0.5);border-left:solid 2px #47ad66}footer .project-info .thimble-context a{color:white;text-decoration:none}footer .project-info .thimble-context a:hover{text-decoration:underline}.main-cta{background-color:#47ad66;background-image:url(/img/teach-pattern-2.png);background-size:200px;padding:30px 0}.main-cta .content-wrapper{width:964px;margin:0 auto;position:relative}.main-cta .left-side{width:45%;padding:40px 0 80px 0}.main-cta h1{color:white;padding:0;font-weight:normal;font-size:37px;line-height:37px;margin:0 0 15px 0}.main-cta p{color:rgba(255,255,255,0.9);margin:0 0 45px 0}.main-cta p a{color:white}.main-cta p a:hover{color:#fff}.main-cta .new-project-button-wrapper{display:inline-block;padding:5px;border-radius:5px;position:relative;top:-5px;left:-5px;-webkit-transition:background .1s ease-out;-moz-transition:background .1s ease-out;-ms-transition:background .1s ease-out;-o-transition:background .1s ease-out;transition:background .1s ease-out}.main-cta .new-project-button-wrapper:hover{background:#2d9961}.main-cta .new-project-button-wrapper:active{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;background:none}.main-cta .button{background-color:white;padding:11px 21px 10px 45px;line-height:28px;display:inline-block;color:#47ad66;border-radius:3px;box-shadow:0 2px 0 rgba(0,0,0,0.15);position:relative;text-decoration:none;font-size:18px;background-position:13px center;background-repeat:no-repeat;cursor:pointer;box-sizing:border-box;outline:solid 3px transparent}.main-cta .button:active{position:relative;top:2px;opacity:1;box-shadow:none}.main-cta .video{position:absolute;top:20px;right:0;background:black}.main-cta .video iframe{position:relative;z-index:2}.main-cta .video:before{content:"";position:absolute;bottom:0;left:10px;width:calc(100% - 20px);height:35px;box-shadow:0 5px 15px rgba(0,0,0,0.3);border-radius:40%;z-index:1}.main-cta .not-found-message{text-align:center;padding:25px 0 35px 0}.main-cta .not-found-message h1{font-family:"Fira Medium";font-size:40px;margin-bottom:5px}.main-cta .not-found-message p{font-size:30px;line-height:120%}.remix-projects .content-wrapper{width:964px;margin:0 auto}.remix-projects .projects-heading{text-align:center;color:#545454;font-size:30px;margin:37px 0 27px 0;padding:0}.remix-projects .remixable-projects{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.remix-projects .remixable-projects:first-of-type{padding-bottom:45px;margin-bottom:40px;border-bottom:solid 2px #eee}.remix-projects .remixable-projects .project{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;margin-right:75px}.remix-projects .remixable-projects .project .title{margin:0 0 12px 0;font-size:22px;color:#545454;text-align:center;white-space:nowrap}.remix-projects .remixable-projects .project:last-child{margin:0}.remix-projects .remixable-projects .project .thumbnail{width:271px;height:278px;position:relative;margin:0 0 20px 0;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-ms-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}.remix-projects .remixable-projects .project .thumbnail:hover{opacity:.9;-webkit-transform:translateY(-3px);-moz-transform:translateY(-3px);-ms-transform:translateY(-3px);-o-transform:translateY(-3px);transform:translateY(-3px)}.remix-projects .remixable-projects .project .thumbnail .image{width:271px;display:block;height:278px;z-index:2;position:relative;border-radius:3px}.remix-projects .remixable-projects .project .thumbnail:before{content:"";position:absolute;bottom:0;left:10px;width:calc(100% - 20px);height:40px;box-shadow:0 2px 15px rgba(0,0,0,0.2);border-radius:40%;z-index:1}.remix-projects .remixable-projects .project .description{color:#999;font-size:15px;line-height:19px;margin:0 0 15px 0}.remix-projects .remixable-projects .project .or-wrapper{position:relative;height:30px;margin-top:14px}.remix-projects .remixable-projects .project .or-wrapper hr{border:none;height:0;border-bottom:solid 2px #e9e9e9;position:absolute;top:10px;width:100%}.remix-projects .remixable-projects .project .or-wrapper .or{position:absolute;left:calc(50% - 18px);width:36px;background:white;color:#c9c9c9;text-transform:uppercase;top:8px;font-size:15px;font-weight:bold;text-align:center;font-family:"Fira Medium"}.remix-projects .remixable-projects .project.keep-calm .image{background:url(/img/thumbnail-keep-calm.png) #8b0208}.remix-projects .remixable-projects .project.postcard .image{background:url(/img/thumbnail-postcard.png) #fed831}.remix-projects .remixable-projects .project.comic-strip .image{background:url(/img/thumbnail-comic-strip.png) #efefef}.remix-projects .remixable-projects .project.my-six-word-summer .image{background:url(/img/thumbnail-my-six-word-summer.png) #29b7fd}.remix-projects .remixable-projects .project.homework-excuse-generator .image{background:url(/img/thumbnail-homework-excuse-generator.png) #e0caad}.remix-projects .remixable-projects .project.three-things-i-heart .image{background:url(/img/thumbnail-three-things-i-heart.png) #e0caad}.remix-projects .remixable-projects .project .remix-button{display:block;cursor:pointer;background:#47ad66;padding:10px 0 8px 0;border-radius:3px;box-shadow:0 2px 0 #417c53;font-size:18px;color:white;text-align:center;text-decoration:none}.remix-projects .remixable-projects .project .remix-button:hover{background:#51b56b}.remix-projects .remixable-projects .project .remix-button:active{position:relative;top:2px;box-shadow:none;background:#3f9956}.remix-projects .teach h3{font-family:"Fira Medium";padding:0;margin:15px 0 12px 0;font-size:15px;color:#777}.remix-projects .teach ul{margin:0 0 12px 0;padding:0 0 0 18px}.remix-projects .teach ul li{font-size:15px;color:#999;line-height:19px}.remix-projects .teach a{font-size:15px;font-family:"Fira Medium";color:#47ad66;text-decoration:none}.remix-projects .teach a:hover{text-decoration:underline}.button:hover .line{-webkit-animation:line 3s linear infinite 0s;-moz-animation:line 3s linear infinite 0s;-ms-animation:line 3s linear infinite 0s;animation:line 3s linear infinite 0s}.button:hover .line-two{-webkit-animation:line 3s linear infinite 1s;-moz-animation:line 3s linear infinite 1s;-ms-animation:line 3s linear infinite 1s;animation:line 3s linear infinite 1s}.button:hover .line-three{-webkit-animation:line 3s linear infinite 2s;-moz-animation:line 3s linear infinite 2s;-ms-animation:line 3s linear infinite 2s;animation:line 3s linear infinite 2s}.button:hover .pencil{-webkit-animation:pencil 1s linear infinite 0s;-moz-animation:pencil 1s linear infinite 0s;-ms-animation:pencil 1s linear infinite 0s;animation:pencil 1s linear infinite 0s}.pencil-animation{width:20px;height:20px;position:absolute;left:14px;top:15px}.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;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);-o-transform:scaleX(0);transform:scaleX(0)}.pencil-animation .line:after{content:"";position:absolute;width:100%;height:13%;background:#47ad66;bottom:0}@keyframes pencil{0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}13.5%{-webkit-transform:translateX(90%);-moz-transform:translateX(90%);-ms-transform:translateX(90%);-o-transform:translateX(90%);transform:translateX(90%)}40%{-webkit-transform:translateX(90%);-moz-transform:translateX(90%);-ms-transform:translateX(90%);-o-transform:translateX(90%);transform:translateX(90%)}60%{-webkit-transform:translateX(50%) translateY(-30%);-moz-transform:translateX(50%) translateY(-30%);-ms-transform:translateX(50%) translateY(-30%);-o-transform:translateX(50%) translateY(-30%);transform:translateX(50%) translateY(-30%)}80%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes pencil{0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}13.5%{-webkit-transform:translateX(90%);-moz-transform:translateX(90%);-ms-transform:translateX(90%);-o-transform:translateX(90%);transform:translateX(90%)}40%{-webkit-transform:translateX(90%);-moz-transform:translateX(90%);-ms-transform:translateX(90%);-o-transform:translateX(90%);transform:translateX(90%)}60%{-webkit-transform:translateX(50%) translateY(-30%);-moz-transform:translateX(50%) translateY(-30%);-ms-transform:translateX(50%) translateY(-30%);-o-transform:translateX(50%) translateY(-30%);transform:translateX(50%) translateY(-30%)}80%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@keyframes line{5.5%{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1)}20%{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1)}33%{-webkit-transform:scaleX(1) translateY(-43.5%);-moz-transform:scaleX(1) translateY(-43.5%);-ms-transform:scaleX(1) translateY(-43.5%);-o-transform:scaleX(1) translateY(-43.5%);transform:scaleX(1) translateY(-43.5%)}53%{-webkit-transform:scaleX(1) translateY(-43.5%);-moz-transform:scaleX(1) translateY(-43.5%);-ms-transform:scaleX(1) translateY(-43.5%);-o-transform:scaleX(1) translateY(-43.5%);transform:scaleX(1) translateY(-43.5%)}66%{-webkit-transform:scaleX(1) translateY(-87%);-moz-transform:scaleX(1) translateY(-87%);-ms-transform:scaleX(1) translateY(-87%);-o-transform:scaleX(1) translateY(-87%);transform:scaleX(1) translateY(-87%)}87%{-webkit-transform:scaleX(1) translateY(-87%);-moz-transform:scaleX(1) translateY(-87%);-ms-transform:scaleX(1) translateY(-87%);-o-transform:scaleX(1) translateY(-87%);transform:scaleX(1) translateY(-87%)}100%{-webkit-transform:scaleX(1) translateY(-150%);-moz-transform:scaleX(1) translateY(-150%);-ms-transform:scaleX(1) translateY(-150%);-o-transform:scaleX(1) translateY(-150%);transform:scaleX(1) translateY(-150%)}}@-webkit-keyframes line{5.5%{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1)}20%{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1)}33%{-webkit-transform:scaleX(1) translateY(-43.5%);-moz-transform:scaleX(1) translateY(-43.5%);-ms-transform:scaleX(1) translateY(-43.5%);-o-transform:scaleX(1) translateY(-43.5%);transform:scaleX(1) translateY(-43.5%)}53%{-webkit-transform:scaleX(1) translateY(-43.5%);-moz-transform:scaleX(1) translateY(-43.5%);-ms-transform:scaleX(1) translateY(-43.5%);-o-transform:scaleX(1) translateY(-43.5%);transform:scaleX(1) translateY(-43.5%)}66%{-webkit-transform:scaleX(1) translateY(-87%);-moz-transform:scaleX(1) translateY(-87%);-ms-transform:scaleX(1) translateY(-87%);-o-transform:scaleX(1) translateY(-87%);transform:scaleX(1) translateY(-87%)}87%{-webkit-transform:scaleX(1) translateY(-87%);-moz-transform:scaleX(1) translateY(-87%);-ms-transform:scaleX(1) translateY(-87%);-o-transform:scaleX(1) translateY(-87%);transform:scaleX(1) translateY(-87%)}100%{-webkit-transform:scaleX(1) translateY(-150%);-moz-transform:scaleX(1) translateY(-150%);-ms-transform:scaleX(1) translateY(-150%);-o-transform:scaleX(1) translateY(-150%);transform:scaleX(1) translateY(-150%)}}