/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 5, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* This stuff related to the header and footer, and is largely copied from the existing site. */
/* line 3, ../scss/lrg/_outer_chrome.scss */
.menu-container {
  background: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
  height: 60px;
  padding: 0 42px;
  position: fixed;
  text-align: right;
  top: 0;
  width: 100%;
  z-index: 200;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* line 16, ../scss/lrg/_outer_chrome.scss */
.menu-container .hidden {
  display: none;
}

/* line 21, ../scss/lrg/_outer_chrome.scss */
.footer {
  background: white;
  color: #918f90;
  height: 60px;
  padding: 0;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* line 28, ../scss/lrg/_outer_chrome.scss */
.footer .hidden {
  display: none;
}
/* line 32, ../scss/lrg/_outer_chrome.scss */
.footer button {
  border: none;
  cursor: pointer;
}
/* line 36, ../scss/lrg/_outer_chrome.scss */
.footer .social-icons {
  float: right;
  line-height: 0;
  margin: 50px 0 0;
}
/* line 41, ../scss/lrg/_outer_chrome.scss */
.footer .content {
  margin: 0 auto;
  max-width: 1366px;
  padding: 0;
  width: 90%;
}
/* line 47, ../scss/lrg/_outer_chrome.scss */
.footer .links {
  position: relative;
  top: 22px;
  text-align: center;
  font-weight: 600;
  letter-spacing: .1em;
}
/* line 53, ../scss/lrg/_outer_chrome.scss */
.footer .links > * {
  color: #918f90;
  display: inline-block;
  font-size: 12px;
  margin: 0 32px 0 0;
  text-decoration: none;
  text-transform: uppercase;
}

/* line 64, ../scss/lrg/_outer_chrome.scss */
.home-logo {
  overflow: hidden;
  background: url("../images/main_logo.png") 0px 0px no-repeat;
  background-size: contain !important;
  display: inline-block;
  float: left;
  height: 27px;
  margin: 17px 0 0;
  width: 233px;
}

/* line 75, ../scss/lrg/_outer_chrome.scss */
.menu-link {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  box-sizing: border-box;
  color: #66676b;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  height: 60px;
  letter-spacing: 0.075em;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.25s ease-in-out;
  padding-left: 12px;
  padding-right: 12px;
}
/* line 91, ../scss/lrg/_outer_chrome.scss */
.menu-link:hover {
  color: #f00;
  transition: all 0.25s ease-in-out;
}

/* line 98, ../scss/lrg/_outer_chrome.scss */
.projects.menu-link:hover {
  border-bottom: 4px solid #bc3a94;
  color: #bc3a94;
}
/* line 102, ../scss/lrg/_outer_chrome.scss */
.projects.menu-link.active {
  color: #bc3a94;
}

/* line 107, ../scss/lrg/_outer_chrome.scss */
.mentors.menu-link:hover {
  border-bottom: 4px solid #8fc8c3;
  color: #8fc8c3;
}

/* line 112, ../scss/lrg/_outer_chrome.scss */
.makers.menu-link:hover {
  border-bottom: 4px solid #c6a2bb;
  color: #c6a2bb;
}

/* line 117, ../scss/lrg/_outer_chrome.scss */
.community.menu-link:hover {
  border-bottom: 4px solid #f2d535;
  color: #f2d535;
}

/* line 122, ../scss/lrg/_outer_chrome.scss */
.about.menu-link:hover {
  border-bottom: 4px solid #f59088;
  color: #f59088;
}

/* line 127, ../scss/lrg/_outer_chrome.scss */
.resources.menu-link:hover {
  border-bottom: 4px solid #5684b2;
  color: #5684b2;
}

/* line 133, ../scss/lrg/_outer_chrome.scss */
.social-icons > a, .social-icons > button {
  background-position: 50% 50% !important;
  background-size: contain !important;
  display: inline-block;
  height: 24px !important;
  margin: 0 0 0 20px;
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
  width: 24px !important;
  outline: 0;
}
/* line 143, ../scss/lrg/_outer_chrome.scss */
.social-icons > a:focus, .social-icons > button:focus {
  outline: 0;
}

/* line 147, ../scss/lrg/_outer_chrome.scss */
.social-icons > a:hover, .social-icons > button:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* line 151, ../scss/lrg/_outer_chrome.scss */
.social-icons > .gplus {
  height: 56px;
  width: 49px;
  overflow: hidden;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAA4CAYAAABUkxDUAAACk0lEQVR42u1a3VHDMAzOCJmA6mh5Z4SOwAiMwAiMwAgdISNkBEbwCN6gWMaB1JEd25JduLPu/NCDOvr090lKh6FLly5d/r2AkRPA+/EAszlXxpmfAJ6bKo8PFFAcj34EeGtufWf5H0XwM3rEeWY8AryeDvAZUtr8/eWu4XN8gMtaqVgI+GBvjgH6JwCgknvfwVAJeWTxXjsAJgQIJcZE8BMJxBilLYgDKE+BKaeChbxxTy8khVIsFFNyShrEBxeEK8n3S3CKD3JBuHuuEveIgShJSiljlJZWqrooEWO0Ir4QaeUmJQUilyuMLmfUZ90l8JIyM6SIVmTmGBQBDUwFsrxBcUW2EmwQ5gtkdTHgUph7E5KmbHNDu8QIQcLaCyvnBS3RbrBBxIA4jwCVTzehWOgBURCrzlQHvDIt1WMDWICdxUAsw4+7UKVMcLnTG3fULQV0Xg51sUSLUhVEShUrZHfqqHUekv/DzLsgu0stA0RzomCu1hKzQxMQwRbFAeE+uAmI6Ewt0H5XAYEXYbwv3GAfQkyCFJ+kLhqqgEDS2rN2ykntu2R7J1R+S27aMrMZbvy2A/Mjyu6ZW5PV7tfyUZYB7Gpya3ntBpOx8PvtpjvLxt4sgZ9LyqXzpBZn2FwAOZu/SAnWxJg6VgFBEZdEWaNakyo1nxwnjVfEDOSHaA0Q5Dab21hFvFxl/0RVE8kHETO3fIUKvMqaa4GoslgO1XWpFyNeTqgqlcnVdDbDplSnavtYy7KhdoEx8BPco6pxRGzUXCpV7sM36xuhQSkVSKiBU1iK98DYN03bfZVu+vLdNXCXvbbaH9iD77LNXVVDaJfFvwceVfLLAVS++U8fEgC9uk3fRK5OfreB56FLly5duPIF2qw9p/msnzUAAAAASUVORK5CYII=") 0px 0px no-repeat;
}

/* line 157, ../scss/lrg/_outer_chrome.scss */
.social-icons > .twitter {
  height: 56px;
  width: 56px;
  overflow: hidden;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAACJUlEQVR42u1aW3XDMAwthCFYddbufxAKYRAKYRACIRAKIRAMYRACwQw2yUnTpHn4KcferHP00zzsa19J10oPh2LFihX7D3YC+ESvT0cQE3+FG13LGdgVgbToPxpv6d619wAaLcYbwJfRoEY3ehjO5wUn1BgAe3ZBz052/vEeOb62DvC+ohsr5gvufIRvB3DK+2fF7HeASjv4O8DH5EEGkCquHMFt7azR4ETN2cMBQeIqX0KDox0lVijaU0zjAm5NoFp8EWa4ILu3QC1PlwRoRHlJLLQH+AhwcAU3oz+H69imAahWyDXDLtI/JjibSRAlKJ4sa169KzhHGglTpcEQf/qY26yDdk5Ko94ajGkHhat88hm0JXVBdCca3xOTQXzHAagm46E0IruwlVEwiFeqMakDRKbYF2ISr5g4etWRNEgj/RktlTO4dU1mL8bhd/BiHYM5AUxFEPPsHmb6ZI40TPLM/YSTQ7KxlmiZFfs25fZC/Pqn7Vm6CXA2N+qeGSacSonvaXtub3l2C9kBa1Kjp0/bJPmSETT2EiwZbbDYC9mJ3k13ZgUyUF/WLKtGPiM6a06f3eyPVSIGOJa4s+lWM1JXBi0J1jHJ0yUbds5bTHsCk3+GluqU332WarLNlr2gFgserYiz1rmRLIvdrpBE+aiUjAQ0PrCV2KuDngW7pvL1kJoRWFXcuxO+MP4Ig/f2Z8o8/8xDdH72XWlXrFixYsWKFRvsFxbHR8w69Nw7AAAAAElFTkSuQmCC") 0px 0px no-repeat;
}

/* line 163, ../scss/lrg/_outer_chrome.scss */
.social-icons > .facebook {
  height: 56px;
  width: 24px;
  overflow: hidden;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAA4CAYAAADn2zjOAAAAsklEQVR42u3VwQ2DMAwFUEZgAvhq4M4IjMAojNAROgIjMAIjMEJG6AZgJC70YpPiSqjfUm7Wf8hKTJb9TUEqAK+qxBxKLNqpgNYcvgVbQpOAUGA4G24GpOmZEm4CZOS5NL7dgAfQp4abAGmavAHreOL+MYdTA40G6OEFxuSHZQKAzhU49VoJaCuh/ebOq/gtAfcReQPRG5h8gc8ddTWw/Qm5KggQIECAAAECPwJYLNaNagVTEvGsA+4hKAAAAABJRU5ErkJggg==") 0px 0px no-repeat;
}

/* line 169, ../scss/lrg/_outer_chrome.scss */
.social-icons > .tumblr {
  height: 56px;
  width: 31px;
  overflow: hidden;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAA4CAYAAAAFByO3AAABDUlEQVR42u2YURGDMAyGkTAFkDsmZBKQMCmTgIRJQAISJqES6oClrNtDj7YpR+ge/v8uj/TLpUma0DQQlFDf0cy2hHYlepwBt1XgxNoCnwLvie714JH7Vofz4bcYWB/e0asKnO96TIHV4KkkU4NzVV36liYJeLWWni4vcpav5U+YrRhcYPEQs/caQBk8UceAA348nBuKaxahCQ+et74Nbc9rtlRpr4ADDjjggANeBc5m3LhdC76+6bldYJ0PeB8ogZsSB3goGb5R8HvA4MdyK3EynOeng8epArhwX1OBS1ZkVbj/H2OrwH/ZekQESrI9kgNmDzS7Jhc4Mfh1emvZML7sRuesSgOCIAj6a70BL10YpPBhBpcAAAAASUVORK5CYII=") 0px 0px no-repeat;
}

/* line 175, ../scss/lrg/_outer_chrome.scss */
.social-icon {
  background-size: contain !important;
  display: inline-block;
  height: 20px !important;
  margin: 9px 0 0;
  width: 20px !important;
}

/* line 182, ../scss/lrg/_outer_chrome.scss */
.social-icon.gplus {
  height: 70px;
  width: 70px;
  overflow: hidden;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAA4CAYAAABUkxDUAAACk0lEQVR42u1a3VHDMAzOCJmA6mh5Z4SOwAiMwAiMwAgdISNkBEbwCN6gWMaB1JEd25JduLPu/NCDOvr090lKh6FLly5d/r2AkRPA+/EAszlXxpmfAJ6bKo8PFFAcj34EeGtufWf5H0XwM3rEeWY8AryeDvAZUtr8/eWu4XN8gMtaqVgI+GBvjgH6JwCgknvfwVAJeWTxXjsAJgQIJcZE8BMJxBilLYgDKE+BKaeChbxxTy8khVIsFFNyShrEBxeEK8n3S3CKD3JBuHuuEveIgShJSiljlJZWqrooEWO0Ir4QaeUmJQUilyuMLmfUZ90l8JIyM6SIVmTmGBQBDUwFsrxBcUW2EmwQ5gtkdTHgUph7E5KmbHNDu8QIQcLaCyvnBS3RbrBBxIA4jwCVTzehWOgBURCrzlQHvDIt1WMDWICdxUAsw4+7UKVMcLnTG3fULQV0Xg51sUSLUhVEShUrZHfqqHUekv/DzLsgu0stA0RzomCu1hKzQxMQwRbFAeE+uAmI6Ewt0H5XAYEXYbwv3GAfQkyCFJ+kLhqqgEDS2rN2ykntu2R7J1R+S27aMrMZbvy2A/Mjyu6ZW5PV7tfyUZYB7Gpya3ntBpOx8PvtpjvLxt4sgZ9LyqXzpBZn2FwAOZu/SAnWxJg6VgFBEZdEWaNakyo1nxwnjVfEDOSHaA0Q5Dab21hFvFxl/0RVE8kHETO3fIUKvMqaa4GoslgO1XWpFyNeTqgqlcnVdDbDplSnavtYy7KhdoEx8BPco6pxRGzUXCpV7sM36xuhQSkVSKiBU1iK98DYN03bfZVu+vLdNXCXvbbaH9iD77LNXVVDaJfFvwceVfLLAVS++U8fEgC9uk3fRK5OfreB56FLly5duPIF2qw9p/msnzUAAAAASUVORK5CYII=") 0px 0px no-repeat;
}

/* Dialogs */
/* line 3, ../scss/lrg/_dialog.scss */
#dialog {
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 11;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  opacity: 0;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: rgba(41, 10, 40, 0.6);
  position: absolute;
  text-align: center;
}
/* line 18, ../scss/lrg/_dialog.scss */
#dialog .dialogContent {
  background-color: #fff;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-top: 30px;
}
/* line 28, ../scss/lrg/_dialog.scss */
#dialog .table-wrap {
  display: table;
}
/* line 31, ../scss/lrg/_dialog.scss */
#dialog h1, #dialog h2, #dialog p {
  padding-left: 70px;
  padding-right: 70px;
}
/* line 35, ../scss/lrg/_dialog.scss */
#dialog h1, #dialog h2 {
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
/* line 39, ../scss/lrg/_dialog.scss */
#dialog h1 {
  margin-top: 35px;
  margin-bottom: 10px;
  font-size: 22px;
}
/* line 43, ../scss/lrg/_dialog.scss */
#dialog h1.level-header {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px;
  border-radius: 5px 5px 0 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #952491;
  color: white;
  margin: 0 0 20px 0;
  padding-top: 50px;
  padding-bottom: 50px;
}
/* line 52, ../scss/lrg/_dialog.scss */
#dialog h1.level-header span {
  display: block;
  font-size: 120px;
  margin-top: 10px;
}
/* line 58, ../scss/lrg/_dialog.scss */
#dialog h1#congratulations_dialog_header {
  line-height: 1.3;
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 25px;
  text-transform: uppercase;
}
/* line 66, ../scss/lrg/_dialog.scss */
#dialog h2 {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
}
/* line 71, ../scss/lrg/_dialog.scss */
#dialog p {
  -ms-font-feature-settings: normal;
  font-family: 'Droid Serif', serif;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.3;
}
/* line 78, ../scss/lrg/_dialog.scss */
#dialog p.wider {
  padding-left: 40px;
  padding-right: 40px;
}
/* line 82, ../scss/lrg/_dialog.scss */
#dialog p.fix-width {
  width: 300px;
  margin-right: auto;
  margin-left: auto;
  font-size: 16px;
  padding-left: 0px;
  padding-right: 0px;
}
/* line 90, ../scss/lrg/_dialog.scss */
#dialog p a {
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  color: #952491;
  text-decoration: none;
}
/* line 96, ../scss/lrg/_dialog.scss */
#dialog .upper-spacing {
  margin-top: 40px;
}
/* line 99, ../scss/lrg/_dialog.scss */
#dialog .farSide {
  float: none;
  text-align: center;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 30px;
}
/* line 109, ../scss/lrg/_dialog.scss */
#dialog .farSide button {
  margin-bottom: 0;
}
/* line 113, ../scss/lrg/_dialog.scss */
#dialog.level-complete {
  background-color: white;
}
/* line 116, ../scss/lrg/_dialog.scss */
#dialog.project-complete {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-top: 2px solid #dcdcdc;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto !important;
  height: auto;
  margin-left: auto;
  z-index: 12;
  background: white;
}
/* line 130, ../scss/lrg/_dialog.scss */
#dialog.help-toolbox {
  left: 250px;
  top: 60px;
  margin-left: auto;
  height: auto !important;
  width: 350px;
  background: transparent;
}
/* line 138, ../scss/lrg/_dialog.scss */
#dialog .slide-head {
  height: 261px;
  display: block;
  position: relative;
  overflow: hidden;
}
/* line 144, ../scss/lrg/_dialog.scss */
#dialog .img-shadow {
  position: absolute;
  bottom: 0px;
  display: block;
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom, transparent 0%, transparent 59%, rgba(0, 0, 0, 0.65) 100%);
}
/* line 152, ../scss/lrg/_dialog.scss */
#dialog .top-shadow {
  display: none;
}
/* line 155, ../scss/lrg/_dialog.scss */
#dialog .level-section {
  height: 55px;
  width: 115px;
  border-radius: 90px 90px 0 0;
  -moz-border-radius: 90px 90px 0 0;
  -webkit-border-radius: 90px 90px 0 0;
  background-color: #bc3a94;
  position: absolute;
  bottom: 0px;
  display: block;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/* line 167, ../scss/lrg/_dialog.scss */
#dialog .level-section .level-text {
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  color: white;
  padding-top: 12px;
  font-size: 10px;
  line-height: .8;
  text-transform: uppercase;
}
/* line 174, ../scss/lrg/_dialog.scss */
#dialog .level-section .level-text span {
  font-size: 30px;
  display: block;
  margin-top: 8px;
}
/* line 184, ../scss/lrg/_dialog.scss */
#dialog #intro .level-1-intro p {
  margin-bottom: 30px;
}
/* line 189, ../scss/lrg/_dialog.scss */
#dialog #intro .instructions {
  padding-top: 70px;
}
/* line 192, ../scss/lrg/_dialog.scss */
#dialog #intro .instructions p {
  margin-bottom: 0;
}
/* line 196, ../scss/lrg/_dialog.scss */
#dialog #intro .instructions .upper-spacing {
  margin: 0;
}
/* line 200, ../scss/lrg/_dialog.scss */
#dialog #intro .instructions .intro-thumb {
  width: 105px;
  margin-bottom: 15px;
}
/* line 205, ../scss/lrg/_dialog.scss */
#dialog #intro .instructions .fix-width {
  font-size: 14px;
  margin-bottom: 35px;
}
/* line 214, ../scss/lrg/_dialog.scss */
#dialog #levelIntro {
  height: 600px;
  width: 408px;
}
/* line 217, ../scss/lrg/_dialog.scss */
#dialog #levelIntro h2 {
  margin-top: 30px;
  margin-bottom: 20px;
}
/* line 223, ../scss/lrg/_dialog.scss */
#dialog #levelOutroVideo {
  height: 540px;
  width: 80%;
}
/* line 227, ../scss/lrg/_dialog.scss */
#dialog #levelOutroVideo #close-video {
  z-index: 10;
}
/* line 232, ../scss/lrg/_dialog.scss */
#dialog #levelOutroVideo .video-wrapper video {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* line 245, ../scss/lrg/_dialog.scss */
#dialog #intro {
  height: 600px;
  width: 408px;
}
/* line 250, ../scss/lrg/_dialog.scss */
#dialog #dialogLevelDone,
#dialog #dialogLevelError,
#dialog #concept, #dialog.full-screen .dialogContent {
  height: 520px;
  width: 410px;
}

/* line 261, ../scss/lrg/_dialog.scss */
.intro .slide-head img {
  top: 50%;
  position: absolute;
  margin-top: -150px;
}

/* line 269, ../scss/lrg/_dialog.scss */
#dialogBorder {
  display: none;
}

/* line 272, ../scss/lrg/_dialog.scss */
.dialogAnimate {
  transition-property: width, height, left, top, opacity;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}

/* line 277, ../scss/lrg/_dialog.scss */
.dialogHiddenContent {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
/* line 283, ../scss/lrg/_dialog.scss */
.dialogHiddenContent.center-vertically-dialog {
  display: none;
}

@media only screen and (min-width: 650px) and (max-height: 750px) {
  /* line 292, ../scss/lrg/_dialog.scss */
  #dialog #intro.dialogContent {
    height: 530px;
  }
  /* line 295, ../scss/lrg/_dialog.scss */
  #dialog #intro.dialogContent .slide-head {
    height: 200px;
  }
  /* line 299, ../scss/lrg/_dialog.scss */
  #dialog #intro.dialogContent .instructions {
    padding-top: 3%;
  }
  /* line 303, ../scss/lrg/_dialog.scss */
  #dialog #intro.dialogContent h1 {
    margin-top: 15px;
  }
  /* line 307, ../scss/lrg/_dialog.scss */
  #dialog.full-screen .dialogContent,
  #dialog #concept,
  #dialog #dialogLevelDone {
    height: 490px;
    background: white;
  }
  /* line 315, ../scss/lrg/_dialog.scss */
  #dialog .dots {
    position: absolute;
    width: 100%;
    bottom: 15%;
  }
}
/* line 2, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .download-button {
  position: relative;
  display: block;
  width: 232px;
  height: 50px;
  line-height: 50px;
  background: #b4539b;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  border-radius: 2px;
  box-shadow: 0px 2px 0px #dadada;
  margin: 0 auto;
}
/* line 18, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .download-button__icon {
  position: relative;
  display: inline-block;
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -115px;
  height: 13px;
  width: 12px;
}
/* line 25, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns {
  padding: 20px 50px;
}
/* line 28, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .header {
  overflow: hidden;
  *zoom: 1;
  padding: 20px 50px;
  display: table;
}
/* line 33, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .header .back {
  display: none;
}
/* line 36, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .header h1 {
  font-size: 27px;
  margin-top: 0px;
  margin-bottom: 20px;
}
/* line 41, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .header p {
  font-size: 14px;
  line-height: 1.4;
  padding: 0 100px;
}
/* line 48, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .copy, #dialogProjectDone .img {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
}
/* line 54, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .img {
  text-align: right;
  height: 473px;
}
/* line 58, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .img img {
  font-size: 20px;
  width: auto;
  max-width: 100%;
  height: 100%;
}
/* line 66, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone h2 {
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 25px;
  margin-top: 0;
}
/* line 72, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone h2.share {
  font-size: 20px;
  margin: 50px 0 0 0;
}
/* line 78, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
/* line 84, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .btn .button {
  font-size: 15px;
  padding: 0;
}
/* line 88, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .btn .button:after {
  font-size: 10px;
  position: relative;
  top: -1px;
}
/* line 96, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns {
  background: #f7eef5;
  padding-bottom: 30px;
}
/* line 97, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns.slider {
  width: auto;
  overflow: auto;
}
/* line 100, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns.slider .slides {
  overflow: visible;
}
/* line 102, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns.slider .slides .slide {
  width: auto;
}
/* line 108, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns .dots {
  display: none;
}
/* line 113, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns .item .inner {
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  min-height: 420px;
}
/* line 122, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns .item {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-left: 20px;
}
/* line 125, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns .item .inner {
  position: relative;
  overflow: hidden;
  background: white;
  width: 359px;
}
/* line 130, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns .item .inner h2 {
  font-size: 27px;
  margin: 20px auto 10px auto;
}
/* line 134, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns .item .inner p {
  font-size: 14px;
  padding: 0 20px;
}
/* line 138, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns .item .inner img {
  max-width: 100%;
}
/* line 142, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns .item:first-child {
  margin-left: 0;
}
/* line 148, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns.no-space {
  background-color: white;
}
/* line 151, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns.no-space .item {
  margin-left: 0px;
  position: relative;
}
/* line 154, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns.no-space .item .inner {
  -moz-box-shadow: 0 0 0 transparent;
  -webkit-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  width: 372px;
}
/* line 159, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns.no-space .item:before {
  content: "";
  display: block;
  position: absolute;
  display: block;
  height: 100%;
  width: 2px;
  background-color: rgba(0, 0, 0, 0.08);
  z-index: 1;
}
/* line 170, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .row-with-columns.no-space .item:first-child:before {
  display: none;
}
/* line 178, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .other-projects {
  padding-top: 25px;
  padding-left: 41px;
  padding-right: 41px;
}
/* line 184, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .other-projects .item .inner {
  min-height: 390px;
}
/* line 187, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .other-projects .item .inner img {
  width: 100%;
}
/* line 191, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .other-projects .item .inner h2 {
  font-size: 18px;
  margin: 25px auto;
}
/* line 195, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .other-projects .item .inner p {
  padding-bottom: 0px;
  margin-bottom: 25px;
}
/* line 202, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .step-up-your-game {
  background-color: white;
  background: #f7eef5;
  padding: 25px 41px;
}
/* line 208, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .step-up-your-game .item .inner {
  min-height: 240px;
}
/* line 213, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .step-up-your-game .item .logo {
  display: table;
  min-height: 80px;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* line 219, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .step-up-your-game .item .logo div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100%;
}
/* line 227, ../scss/lrg/_dialog_project_done.scss */
#dialogProjectDone .step-up-your-game .item:first-child {
  border-left: 0;
}

/* line 6, ../scss/_lrg.scss */
html {
  min-height: 450px;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}
/* line 21, ../scss/_lrg.scss */
html.no-scroll {
  height: 100%;
  overflow: hidden;
}
/* line 25, ../scss/_lrg.scss */
html.no-scroll body {
  height: 100%;
  overflow: hidden;
}

/* line 31, ../scss/_lrg.scss */
body {
  color: #66676b;
  background: #d9a9cd url('../images/backgrounds/diamond.png?1447957644');
  font-family: sans-serif;
  margin: 0;
  -webkit-text-size-adjust: none;
}
/* line 38, ../scss/_lrg.scss */
body.project-complete-visible {
  overflow-y: visible;
}
/* line 45, ../scss/_lrg.scss */
body.project-complete-visible #app_shell {
  overflow-y: visible;
}
/* line 49, ../scss/_lrg.scss */
body.project-complete-visible #root {
  min-height: 1700px;
}
/* line 52, ../scss/_lrg.scss */
body.project-complete-visible header {
  z-index: 13;
}
/* line 55, ../scss/_lrg.scss */
body.project-complete-visible .action-links {
  display: none;
}
/* line 58, ../scss/_lrg.scss */
body.project-complete-visible .close-button {
  display: block;
}
/* line 61, ../scss/_lrg.scss */
body.project-complete-visible .level-select {
  display: none;
}
/* line 64, ../scss/_lrg.scss */
body.project-complete-visible .block-counter {
  display: none;
}

/* line 70, ../scss/_lrg.scss */
h1 a {
  text-decoration: none;
}

/* line 73, ../scss/_lrg.scss */
a:hover {
  color: #f00;
}

/* line 77, ../scss/_lrg.scss */
#level-answer {
  display: none;
}

/* line 80, ../scss/_lrg.scss */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* line 105, ../scss/_lrg.scss */
header {
  color: #952491;
  background-color: white;
  height: 60px;
  line-height: 60px;
  position: relative;
  z-index: 12;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
  letter-spacing: 2px;
  font-size: 20px;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  color: #952491;
}
/* line 119, ../scss/_lrg.scss */
header a {
  letter-spacing: 2px;
  font-size: 20px;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  color: #952491;
}
/* line 126, ../scss/_lrg.scss */
header .project-title {
  text-transform: uppercase;
  float: left;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-left: 25px;
}
/* line 132, ../scss/_lrg.scss */
header .project-title-center {
  display: none;
  text-transform: uppercase;
}
/* line 135, ../scss/_lrg.scss */
header .project-title-center .project-title {
  clear: both;
  margin-left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/* line 140, ../scss/_lrg.scss */
header .project-title-center .intro-back {
  display: none;
  float: left;
  position: absolute;
  margin-left: 35px;
  color: #bc3a94;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
  line-height: 58px;
}
/* line 151, ../scss/_lrg.scss */
header .project-title-center #leftArrow {
  float: left;
  position: absolute;
  margin-left: 11px;
  color: #bc3a94;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  margin-top: 20px;
}
/* line 162, ../scss/_lrg.scss */
header .action-links {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  height: 60px;
  float: right;
}
/* line 168, ../scss/_lrg.scss */
header .action-links button {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  color: #952491;
  width: 70px;
  border: 0;
  outline: 0;
  border-right: #f3f3f3 1px solid;
  background-color: transparent;
  border-radius: 0;
  padding: 26px 0 0 0;
  text-transform: uppercase;
  line-height: 1.2em;
}
/* line 184, ../scss/_lrg.scss */
header .action-links button:first-child {
  border-left: #f3f3f3 1px solid;
}
/* line 187, ../scss/_lrg.scss */
header .action-links button:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -12px;
  font-size: 20px;
  top: 0;
}

/* line 200, ../scss/_lrg.scss */
button.primary {
  /* Can't use "text-align: start" due to IE. */
  text-align: left;
}

/* line 204, ../scss/_lrg.scss */
html[dir="RTL"] button.primary {
  text-align: right;
}

/* line 208, ../scss/_lrg.scss */
#blockly {
  z-index: 0;
  position: absolute;
  height: 650px;
}

/* line 214, ../scss/_lrg.scss */
#downloadImageLink {
  display: none;
}

/* line 217, ../scss/_lrg.scss */
#sampleHelp3, #sampleHelp4 {
  height: 50px;
  width: 250px;
}

/* line 222, ../scss/_lrg.scss */
.blocklyToolboxDiv {
  width: 250px;
  max-width: 300px;
}

@media (max-width: 320px) {
  /* line 228, ../scss/_lrg.scss */
  .blocklyToolboxDiv {
    width: 200px;
  }
}
/* Slider. */
/* line 234, ../scss/_lrg.scss */
.sliderTrack {
  stroke: #aaa;
  stroke-width: 6px;
  stroke-linecap: round;
}

/* line 239, ../scss/_lrg.scss */
.sliderKnob {
  fill: #ddd;
  stroke: #bbc;
  stroke-width: 1px;
  stroke-linejoin: round;
}

/* line 245, ../scss/_lrg.scss */
.sliderKnob:hover {
  fill: #eee;
}

/* line 248, ../scss/_lrg.scss */
.full-bleed {
  position: relative;
  display: block;
  position: relative;
  display: block;
  width: 100%;
}

/* line 256, ../scss/_lrg.scss */
.intro-thumb {
  width: 120px;
}

/* line 260, ../scss/_lrg.scss */
#display {
  display: block;
  margin: 0px 0px 0px auto;
}

/* line 266, ../scss/_lrg.scss */
#hintButton:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  content: "\E87F";
}

/* line 295, ../scss/_lrg.scss */
#helpButton:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  font-family: "Material Icons";
  content: "\E887";
}

/* line 325, ../scss/_lrg.scss */
#linkButton:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  font-family: "Material Icons";
  content: "\E895";
}

/* line 357, ../scss/_lrg.scss */
#restartButton:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  font-family: "Material Icons";
  content: "\E863";
}

/* line 387, ../scss/_lrg.scss */
#backToProjects:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 34px;
  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  margin-left: -5px;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  font-family: "Material Icons";
  content: "\E314";
}

/* line 414, ../scss/_lrg.scss */
#leftArrow {
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -89px;
  height: 21px;
  width: 13px;
}

/* line 418, ../scss/_lrg.scss */
.level-select {
  display: inline-block;
  position: relative;
  float: left;
  margin-left: 20px;
}
/* line 424, ../scss/_lrg.scss */
.level-select:hover #level_dropdown {
  display: block;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* line 431, ../scss/_lrg.scss */
.block-counter {
  text-transform: uppercase;
  font-size: 14px;
  margin-right: 20px;
  display: inline-block;
  float: right;
}

/* line 439, ../scss/_lrg.scss */
.farSide {
  text-align: right;
  float: right;
  display: inline-block;
}

/* line 445, ../scss/_lrg.scss */
html[dir="RTL"] .farSide {
  text-align: left;
}

/* line 449, ../scss/_lrg.scss */
#containerCode {
  direction: ltr;
  background-color: #eee;
  padding: 5px;
  margin: 0 3ex;
  font-size: large;
  overflow: auto;
  max-height: 200px;
}

/* line 459, ../scss/_lrg.scss */
img[src$="help.png"] {
  height: 64px;
  width: 64px;
}

/* line 464, ../scss/_lrg.scss */
html[dir="RTL"] .mirrorImg {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
}

/* line 472, ../scss/_lrg.scss */
#languageMenu {
  vertical-align: top;
  margin-top: 16px;
}

/* Buttons */
/* line 478, ../scss/_lrg.scss */
button.primary,
button.secondary,
button.resources,
.play-button {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  border: 0px solid #ddd;
  font-size: large;
  background-color: #eee;
  color: #000;
  outline: 0;
  min-width: 120px;
}
/* line 493, ../scss/_lrg.scss */
button.primary:active, button.primary:focus,
button.secondary:active,
button.secondary:focus,
button.resources:active,
button.resources:focus,
.play-button:active,
.play-button:focus {
  outline: 0;
}
/* line 496, ../scss/_lrg.scss */
button.primary.bigger,
button.secondary.bigger,
button.resources.bigger,
.play-button.bigger {
  font-size: 17px;
  padding: 12px 50px;
}
/* line 500, ../scss/_lrg.scss */
button.primary:disabled,
button.secondary:disabled,
button.resources:disabled,
.play-button:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .6;
  box-shadow: none;
}

/* line 507, ../scss/_lrg.scss */
button.primary {
  border: 1px solid #dd4b39;
  background-color: #dd4b39;
  color: #fff;
}

/* line 513, ../scss/_lrg.scss */
.play-button,
button.secondary,
button.resources {
  transition: all 1s;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: #bc3a94;
  color: #fff;
}

/* line 530, ../scss/_lrg.scss */
.play-button,
button.secondary {
  border-color: #bc3a94;
}

/* line 535, ../scss/_lrg.scss */
#resetButton {
  display: block;
}
/* line 537, ../scss/_lrg.scss */
#resetButton i {
  position: relative;
  top: 7px;
  margin-right: 10px;
  margin-top: -10px;
  font-size: 22px;
}

/* line 546, ../scss/_lrg.scss */
button.resources {
  background-color: #5684b2;
  border: 1px solid #5684b2;
}

/* line 550, ../scss/_lrg.scss */
button.primary > img,
button.secondary > img,
button.resources > img {
  opacity: 1;
}

/* line 555, ../scss/_lrg.scss */
button > img {
  opacity: 0.6;
  vertical-align: text-bottom;
}

/* line 568, ../scss/_lrg.scss */
#dialog {
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
/* line 571, ../scss/_lrg.scss */
#dialog #dialogProjectDone .button.alt {
  cursor: pointer;
  display: inline-block;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 10px 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
/* line 572, ../scss/_lrg.scss */
#dialog #dialogProjectDone .button.alt.pink {
  color: #bc3a94;
}
/* line 575, ../scss/_lrg.scss */
#dialog #dialogProjectDone .button.alt.blue {
  color: #5b89b5;
}
/* line 588, ../scss/_lrg.scss */
#dialog #dialogProjectDone .button.alt:after {
  font-family: "Arial";
  content: '\25ba';
  padding-left: 0.5em;
}

/* line 596, ../scss/_lrg.scss */
button.alt {
  cursor: pointer;
  background-color: white;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 10px 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
/* line 597, ../scss/_lrg.scss */
button.alt.pink {
  color: #bc3a94;
}
/* line 600, ../scss/_lrg.scss */
button.alt.blue {
  color: #5b89b5;
}
/* line 612, ../scss/_lrg.scss */
button.alt:after {
  font-family: "Arial";
  content: '\25ba';
  padding-left: 0.5em;
}

/* line 620, ../scss/_lrg.scss */
.readonly .blocklyMainBackground {
  stroke: none;
}

/* line 623, ../scss/_lrg.scss */
.blocklyMainBackground {
  stroke: none;
}

/* line 627, ../scss/_lrg.scss */
#visualization-container {
  position: relative;
  z-index: 1;
  height: 650px;
  width: 50%;
  left: 50%;
  background: #fff url('../images/backgrounds/grid.png?1447957644');
}

/* line 637, ../scss/_lrg.scss */
#control {
  position: absolute;
  left: 69%;
  z-index: 8;
  bottom: 80px;
  visibility: hidden;
  -moz-transition: left 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  -o-transition: left 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  -webkit-transition: left 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  transition: left 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
/* line 644, ../scss/_lrg.scss */
#control #runButton {
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: all 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  -o-transition: all 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  -webkit-transition: all 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  transition: all 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* line 650, ../scss/_lrg.scss */
#control.show {
  visibility: visible;
}
/* line 652, ../scss/_lrg.scss */
#control.show #runButton {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  transition-delay: 0s;
}

/* line 658, ../scss/_lrg.scss */
#blockly {
  top: 60px;
  background-color: white;
  width: 600px;
}

/* line 663, ../scss/_lrg.scss */
.slider {
  border-radius: 0px;
  width: 410px;
  overflow: hidden;
}
/* line 667, ../scss/_lrg.scss */
.slider .slides {
  overflow: hidden;
  *zoom: 1;
  -moz-transition: margin 500ms ease-in-out;
  -o-transition: margin 500ms ease-in-out;
  -webkit-transition: margin 500ms ease-in-out;
  transition: margin 500ms ease-in-out;
}
/* line 671, ../scss/_lrg.scss */
.slider .slide {
  width: 410px;
  float: left;
}

/* line 676, ../scss/_lrg.scss */
.dots {
  text-align: center;
  margin-bottom: 10px;
}

/* line 680, ../scss/_lrg.scss */
.dot {
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -133px;
  height: 12px;
  width: 12px;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  text-indent: -10000px;
  margin-left: 10px;
}
/* line 685, ../scss/_lrg.scss */
.dot:first-child {
  margin-left: 0;
}
/* line 688, ../scss/_lrg.scss */
.dot.active-dot {
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 0;
  height: 12px;
  width: 12px;
}

/* line 693, ../scss/_lrg.scss */
.slider-arrow {
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  opacity: 0;
}
/* line 699, ../scss/_lrg.scss */
.slider-arrow.active {
  cursor: pointer;
  opacity: 1;
}
/* line 702, ../scss/_lrg.scss */
.slider-arrow.active:hover {
  opacity: 0.9;
}
/* line 706, ../scss/_lrg.scss */
.slider-arrow.left-slider-arrow {
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -17px;
  height: 31px;
  width: 20px;
  left: -100px;
}
/* line 709, ../scss/_lrg.scss */
.slider-arrow.left-slider-arrow:hover {
  left: -105px;
}
/* line 713, ../scss/_lrg.scss */
.slider-arrow.right-slider-arrow {
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -53px;
  height: 31px;
  width: 19px;
  right: -100px;
}
/* line 716, ../scss/_lrg.scss */
.slider-arrow.right-slider-arrow:hover {
  right: -105px;
}

/* line 722, ../scss/_lrg.scss */
.things-to-learn {
  margin-bottom: 13px;
  margin-top: 10px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
}
/* line 731, ../scss/_lrg.scss */
.things-to-learn li {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  margin-left: 20px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}
/* line 741, ../scss/_lrg.scss */
.things-to-learn li:first-child {
  margin-left: 0;
}
/* line 744, ../scss/_lrg.scss */
.things-to-learn li:before {
  content: "";
  display: block;
  margin: 7px 20px;
}
/* line 751, ../scss/_lrg.scss */
.things-to-learn #learn_sequence:before {
  height: 41px;
  width: 41px;
  background-image: url("../images/svg/sequence_principle.svg");
}
/* line 758, ../scss/_lrg.scss */
.things-to-learn #learn_loops:before {
  height: 41px;
  width: 41px;
  background-image: url("../images/svg/loop_principle.svg");
}
/* line 765, ../scss/_lrg.scss */
.things-to-learn #learn_conditional:before {
  height: 41px;
  width: 41px;
  background-image: url("../images/svg/conditional_principle.svg");
}
/* line 772, ../scss/_lrg.scss */
.things-to-learn #learn_function:before {
  height: 41px;
  width: 41px;
  background-image: url("../images/svg/function_principle.svg");
}
/* line 779, ../scss/_lrg.scss */
.things-to-learn #learn_variable:before {
  height: 41px;
  width: 41px;
  background-image: url("../images/svg/variable_principle.svg");
}

/* line 787, ../scss/_lrg.scss */
#level_dropdown_handle {
  position: relative;
  font-size: 14px;
  line-height: 25px;
  cursor: pointer;
  padding-right: 25px;
}
/* line 793, ../scss/_lrg.scss */
#level_dropdown_handle:hover {
  color: #D9C3DC;
}
/* line 795, ../scss/_lrg.scss */
#level_dropdown_handle:hover strong {
  background: #D9C3DC;
  border: 1px solid #D9C3DC;
}
/* line 799, ../scss/_lrg.scss */
#level_dropdown_handle:hover:after {
  opacity: 0.25;
}
/* line 803, ../scss/_lrg.scss */
#level_dropdown_handle strong {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  color: white;
  font-size: 12px;
  margin-left: 5px;
  margin-top: -1px;
  width: 24px;
  padding-left: 1px;
  height: 25px;
  position: relative;
  line-height: 26px;
  text-align: center;
  border: 1px solid #952491;
  background: #952491;
}
/* line 820, ../scss/_lrg.scss */
#level_dropdown_handle:after {
  font-family: 'Material Icons';
  content: "\E5C5";
  display: block;
  position: absolute;
  right: -5px;
  top: -10%;
  /* margin-top: -4px; */
  font-size: 30px;
}

/* line 833, ../scss/_lrg.scss */
#level_dropdown {
  -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
  position: absolute;
  top: 60px;
  left: 0;
  background: white;
  width: 260px;
  -moz-transition: all, 350ms, cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all, 350ms, cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transition: all, 350ms, cubic-bezier(0.19, 1, 0.22, 1);
  transition: all, 350ms, cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}

/* line 847, ../scss/_lrg.scss */
.level_number {
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  position: relative;
  font-size: 15px;
  display: inline-block;
  height: 25px;
  width: 23px;
  padding-left: 2px;
  line-height: 27px;
  color: white;
  text-align: center;
  text-decoration: none;
  margin-top: 10px;
  color: #952491;
  border: 2px solid #952491;
}
/* line 862, ../scss/_lrg.scss */
.level_number.level_current {
  background: #952491;
  color: white;
  border: 1px solid #952491;
}
/* line 866, ../scss/_lrg.scss */
.level_number.level_current:hover {
  color: white;
}
/* line 870, ../scss/_lrg.scss */
.level_number:hover {
  background: #D9C3DC;
  color: #952491;
}

/* line 876, ../scss/_lrg.scss */
.level-name {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  position: relative;
  padding-left: 20px;
  font-size: 12px;
  text-decoration: none;
  width: 185px;
  color: #66676b;
}
/* line 885, ../scss/_lrg.scss */
.level-name.level_current {
  color: #952491;
}
/* line 892, ../scss/_lrg.scss */
.level-name:hover {
  color: #D9C3DC;
}
/* line 896, ../scss/_lrg.scss */
.level-name.level_done:after {
  font-family: 'Material Icons';
  /* BYO icon font, mapped smartly */
  content: "\E876";
  display: block;
  position: absolute;
  display: inline-block;
  margin-left: 20px;
  color: #7acdc7;
  font-size: 25px;
}

/* line 910, ../scss/_lrg.scss */
.level-container {
  border-top: 1px solid #f7eef5;
  display: block;
  line-height: 40px;
  height: 40px;
  padding-left: 20px;
  padding-bottom: 7px;
}

/* line 920, ../scss/_lrg.scss */
.big-checkbox {
  display: block;
  background: url('../images/end-of-level-checkmark.png?1447957644') center center no-repeat;
  height: 142px;
  width: 142px;
  background-size: 142px 142px;
  margin: 30px auto 0;
}

/* line 929, ../scss/_lrg.scss */
#dialogLevelError img {
  width: 55%;
  margin: 20px 0;
}

/* line 934, ../scss/_lrg.scss */
.dialogLevelDone_share {
  text-align: center;
  margin-top: 25px;
}
/* line 937, ../scss/_lrg.scss */
.dialogLevelDone_share li {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-left: 7px;
}
/* line 940, ../scss/_lrg.scss */
.dialogLevelDone_share li:first-child {
  margin-left: 0;
}
/* line 943, ../scss/_lrg.scss */
.dialogLevelDone_share li a {
  display: block;
}
/* line 946, ../scss/_lrg.scss */
.dialogLevelDone_share li .fb {
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -228px;
  height: 40px;
  width: 40px;
}
/* line 949, ../scss/_lrg.scss */
.dialogLevelDone_share li .google {
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -273px;
  height: 40px;
  width: 40px;
}
/* line 952, ../scss/_lrg.scss */
.dialogLevelDone_share li .tumblr {
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -318px;
  height: 40px;
  width: 40px;
}
/* line 955, ../scss/_lrg.scss */
.dialogLevelDone_share li .twitter {
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -363px;
  height: 40px;
  width: 40px;
}
/* line 958, ../scss/_lrg.scss */
.dialogLevelDone_share li .download {
  display: none;
}
/* line 960, ../scss/_lrg.scss */
.open-ended .dialogLevelDone_share li .download {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  background-image: url('../images/icons-s713a7c18ab.png');
  background-size: 40px 425px;
  background-position: 0 -183px;
  height: 40px;
  width: 40px;
}

/* line 968, ../scss/_lrg.scss */
#helpToolbox {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  position: relative;
  background: rgba(110, 114, 255, 0.93);
  font-size: 12px;
  color: white;
}
/* line 974, ../scss/_lrg.scss */
#helpToolbox .helpText {
  text-align: left;
  padding: 18px 15px;
  line-height: 1.8;
}
/* line 979, ../scss/_lrg.scss */
#helpToolbox .close {
  position: absolute;
  right: 8px;
  top: 4px;
  color: white;
  font-size: 18px;
  text-shadow: 0 0;
  cursor: pointer;
}
/* line 987, ../scss/_lrg.scss */
#helpToolbox .close:hover {
  color: black;
}
/* line 991, ../scss/_lrg.scss */
#helpToolbox:before {
  content: "";
  display: none;
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent rgba(110, 114, 255, 0.93) transparent transparent;
  overflow: hidden;
}

/* line 1007, ../scss/_lrg.scss */
#conceptBanner {
  opacity: .93;
  background: #005776;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  height: 81px;
  position: relative;
  font-size: 14px;
  color: white;
}
/* line 1015, ../scss/_lrg.scss */
#conceptBanner .bannerText {
  text-align: left;
  padding: 15px;
  line-height: 1.2;
}
/* line 1020, ../scss/_lrg.scss */
#conceptBanner .close {
  position: absolute;
  right: 8px;
  top: 4px;
  color: white;
  font-size: 18px;
  text-shadow: 0 0;
  cursor: pointer;
}
/* line 1028, ../scss/_lrg.scss */
#conceptBanner .close:hover {
  color: black;
}
/* line 1032, ../scss/_lrg.scss */
#conceptBanner img {
  width: 25px;
  display: inline-block;
  left: 0px;
  position: relative;
  margin: 0 0px;
  position: relative;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* line 1042, ../scss/_lrg.scss */
#conceptBanner .right {
  display: inline-block;
  width: 88%;
  float: right;
}
/* line 1046, ../scss/_lrg.scss */
#conceptBanner .right .bannerTextContainer {
  display: table;
  height: 81px;
  padding: 0px 20px 0 0;
}
/* line 1050, ../scss/_lrg.scss */
#conceptBanner .right .bannerTextContainer .bannerText {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  line-height: 1.8;
  letter-spacing: 0px;
  padding: 0px;
}

/* line 1062, ../scss/_lrg.scss */
#errorBanner {
  opacity: .93;
  background: #f31f51;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  height: 81px;
  position: relative;
  font-size: 14px;
  color: white;
}
/* line 1070, ../scss/_lrg.scss */
#errorBanner .bannerText {
  text-align: left;
  padding: 15px;
  line-height: 1.2;
}
/* line 1075, ../scss/_lrg.scss */
#errorBanner .close {
  position: absolute;
  right: 8px;
  top: 4px;
  color: white;
  font-size: 18px;
  text-shadow: 0 0;
  cursor: pointer;
}
/* line 1083, ../scss/_lrg.scss */
#errorBanner .close:hover {
  color: black;
}
/* line 1087, ../scss/_lrg.scss */
#errorBanner i {
  font-size: 34px;
  display: inline-block;
  left: 0px;
  position: relative;
  margin: 0 0px;
  position: relative;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* line 1097, ../scss/_lrg.scss */
#errorBanner .right {
  display: inline-block;
  width: 85%;
  float: right;
}
/* line 1101, ../scss/_lrg.scss */
#errorBanner .right .bannerTextContainer {
  display: table;
  height: 80px;
  padding: 0px 20px 0 0;
}
/* line 1105, ../scss/_lrg.scss */
#errorBanner .right .bannerTextContainer .bannerText {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  line-height: 1.8;
  letter-spacing: 0px;
  padding: 0px;
}

/* line 1117, ../scss/_lrg.scss */
#successBanner {
  opacity: .93;
  background: #70c9c3;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  height: 81px;
  position: relative;
  font-size: 12px;
  color: white;
}
/* line 1125, ../scss/_lrg.scss */
#successBanner .bannerText {
  text-align: left;
  padding: 15px;
  line-height: 1.2;
}
/* line 1130, ../scss/_lrg.scss */
#successBanner .close {
  position: absolute;
  right: 8px;
  top: 4px;
  color: white;
  font-size: 18px;
  text-shadow: 0 0;
  cursor: pointer;
}
/* line 1138, ../scss/_lrg.scss */
#successBanner .close:hover {
  color: black;
}
/* line 1142, ../scss/_lrg.scss */
#successBanner i {
  font-size: 34px;
  display: inline-block;
  left: 0px;
  position: relative;
  margin: 0 0px;
  position: relative;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* line 1152, ../scss/_lrg.scss */
#successBanner .right {
  display: inline-block;
  width: 80%;
  float: right;
}
/* line 1156, ../scss/_lrg.scss */
#successBanner .right .bannerTextContainer {
  display: table;
  height: 81px;
  padding: 0px 20px 0 0;
}
/* line 1160, ../scss/_lrg.scss */
#successBanner .right .bannerTextContainer .bannerText {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  line-height: 1.8;
  letter-spacing: 0px;
  padding: 0px;
}

/* line 1172, ../scss/_lrg.scss */
#conceptTip {
  position: relative;
  font-size: 12px;
  text-transform: uppercase;
  color: #AE629C;
}

/* line 1179, ../scss/_lrg.scss */
.center-vertically-dialog {
  height: 100%;
  display: table;
  margin: 0 auto;
  z-index: 14;
}

/* line 1186, ../scss/_lrg.scss */
.center-vertically {
  display: table-cell;
  vertical-align: middle;
}
/* line 1189, ../scss/_lrg.scss */
.center-vertically h1 {
  margin-top: 0;
  margin-bottom: 60px;
  font-size: 26px;
  padding-left: 50px;
  line-height: 1.3;
  padding-right: 50px;
}

/* line 1199, ../scss/_lrg.scss */
.site-menu {
  margin-left: auto;
  margin-right: auto;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
}
/* line 1205, ../scss/_lrg.scss */
.site-menu.hidden {
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
}

/* line 1209, ../scss/_lrg.scss */
#app_shell {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.24);
  margin-bottom: 10px;
}
/* line 1218, ../scss/_lrg.scss */
#app_shell.disabled #visualization-container {
  background: #fff;
}
/* line 1220, ../scss/_lrg.scss */
#app_shell.disabled #visualization-container #visualization {
  display: none;
}
/* line 1224, ../scss/_lrg.scss */
#app_shell.disabled #control {
  display: none;
}

/* line 1230, ../scss/_lrg.scss */
#action_link_hamburger {
  display: none;
}

/* line 1234, ../scss/_lrg.scss */
#backToProjects {
  display: none;
}

/* line 1239, ../scss/_lrg.scss */
#dropdown_under {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

/* line 1248, ../scss/_lrg.scss */
#landscape-mode-error {
  display: none;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  font-size: 30px;
}

/* line 1255, ../scss/_lrg.scss */
.close-button {
  display: none;
  position: relative;
  height: 40px;
  width: 40px;
  float: right;
  top: 8px;
  right: 7px;
}
/* line 1263, ../scss/_lrg.scss */
.close-button:before {
  top: 20px;
  width: 25px;
  height: 2px;
  position: absolute;
  content: "";
  left: 8px;
  background: #952491;
  -moz-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
  -ms-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
  -webkit-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
  transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
  -webkit-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
}
/* line 1276, ../scss/_lrg.scss */
.close-button:after {
  top: 20px;
  width: 25px;
  height: 2px;
  position: absolute;
  content: "";
  cursor: default;
  opacity: 1;
  left: 8px;
  margin: 0;
  padding: 0;
  background: #952491;
  -moz-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
  -ms-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
  -webkit-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
  transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
}

/* line 1295, ../scss/_lrg.scss */
#realHelp h1 {
  margin-top: 0;
}
/* line 1299, ../scss/_lrg.scss */
#realHelp .farSide {
  position: static;
  padding-bottom: 0;
}
/* line 1303, ../scss/_lrg.scss */
#realHelp .help-section {
  margin: 10px auto;
  width: 310px;
}
/* line 1306, ../scss/_lrg.scss */
#realHelp .help-section img {
  display: inline-block;
  float: left;
  width: 25%;
  padding-left: 5px;
}
/* line 1312, ../scss/_lrg.scss */
#realHelp .help-section p {
  display: inline-block;
  padding: 0px;
  width: 65%;
  margin-top: 12px;
  text-align: left;
  padding-left: 5px;
}

/* line 1323, ../scss/_lrg.scss */
#concept img {
  width: 150px;
}
/* line 1327, ../scss/_lrg.scss */
#concept h1.title {
  padding-left: 20px;
  padding-right: 20px;
  margin: 40px 0 60px;
}

/* line 1336, ../scss/_lrg.scss */
.blocklyTreeRow.last {
  display: none;
}

/* line 1341, ../scss/_lrg.scss */
.close-button-dialog {
  cursor: pointer;
  display: block;
  position: absolute;
  height: 40px;
  width: 40px;
  float: right;
  top: 3px;
  right: 3px;
}
/* line 1350, ../scss/_lrg.scss */
.close-button-dialog:before {
  top: 20px;
  width: 25px;
  height: 2px;
  position: absolute;
  content: "";
  left: 8px;
  background: #bc3a94;
  -moz-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
  -ms-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
  -webkit-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
  transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
  -webkit-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
}
/* line 1363, ../scss/_lrg.scss */
.close-button-dialog:after {
  top: 20px;
  width: 25px;
  height: 2px;
  position: absolute;
  content: "";
  cursor: default;
  opacity: 1;
  left: 8px;
  margin: 0;
  padding: 0;
  background: #bc3a94;
  -moz-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
  -ms-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
  -webkit-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
  transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
}

/* line 1379, ../scss/_lrg.scss */
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  cursor: pointer;
  display: block;
  width: 0px;
}

/* line 1401, ../scss/_lrg.scss */
.x-small #app_shell {
  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}
/* line 1404, ../scss/_lrg.scss */
.x-small .menu-container {
  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}
/* line 1407, ../scss/_lrg.scss */
.x-small .hidden {
  -moz-transform: translateY(-72px);
  -ms-transform: translateY(-72px);
  -webkit-transform: translateY(-72px);
  transform: translateY(-72px);
}
/* line 1411, ../scss/_lrg.scss */
.x-small .slide-head img {
  top: 50%;
  position: absolute;
  margin-top: -120px;
}
/* line 1418, ../scss/_lrg.scss */
.x-small #dialog .slide-head {
  height: 200px;
}
/* line 1427, ../scss/_lrg.scss */
.x-small #dialog #intro .instructions {
  padding-top: 20px;
}
/* line 1433, ../scss/_lrg.scss */
.x-small #dialogProjectDone .img {
  text-align: right;
  height: 440px;
}

/* line 1, ../scss/_waves.scss */
.waves-effect {
  position: relative;
  cursor: pointer;
  /*  display: inline-block;*/
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* line 16, ../scss/_waves.scss */
.waves-effect.light .waves-ripple {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* line 20, ../scss/_waves.scss */
.cta.waves-effect.light .waves-ripple {
  background: white !important;
}

/* line 24, ../scss/_waves.scss */
.cta.waves-effect.transparent .waves-ripple {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* line 28, ../scss/_waves.scss */
.waves-effect.dark-ripple .waves-ripple {
  background: rgba(0, 0, 0, 0.27059) !important;
}

/* line 32, ../scss/_waves.scss */
.waves-effect.med-ripple .light {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* line 36, ../scss/_waves.scss */
.waves-effect .waves-ripple {
  position: absolute;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  background: rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0) translate(0, 0);
  -moz-transform: scale(0) translate(0, 0);
  -ms-transform: scale(0) translate(0, 0);
  -o-transform: scale(0) translate(0, 0);
  -webkit-transform: scale(0) translate(0, 0);
  -moz-transform: scale(0) translate(0, 0);
  -o-transform: scale(0) translate(0, 0);
  -ms-transform: scale(0) translate(0, 0);
  transform: scale(0) translate(0, 0);
  pointer-events: none;
}

/* line 69, ../scss/_waves.scss */
.cta.color--projects-text.waves-effect:hover {
  background: rgba(180, 83, 155, 0.2);
}

/* line 72, ../scss/_waves.scss */
.cta.color--projects-text.waves-effect .waves-ripple {
  background: rgba(180, 83, 155, 0.2);
}

/* line 75, ../scss/_waves.scss */
.color--mentors-text.waves-effect .waves-ripple {
  background: rgba(143, 200, 195, 0.2);
}

/* line 78, ../scss/_waves.scss */
.cta.color--about-text.waves-effect .waves-ripple {
  background: rgba(245, 144, 136, 0.2);
}

/* line 81, ../scss/_waves.scss */
.cta.color--community-text.waves-effect .waves-ripple {
  background: rgba(242, 213, 53, 0.2);
}

/* line 84, ../scss/_waves.scss */
.cta.color--resources-text.waves-effect:hover {
  background: rgba(86, 132, 178, 0.2);
}

/* line 87, ../scss/_waves.scss */
.cta.color--resources-text.waves-effect .waves-ripple {
  background: rgba(86, 132, 178, 0.2);
}

/* line 90, ../scss/_waves.scss */
.waves-effect .waves-ripple.light {
  background: rgba(255, 255, 255, 0.1);
}

/* line 93, ../scss/_waves.scss */
.cta.waves-effect .waves-ripple.light {
  background: #fff;
}

/* line 96, ../scss/_waves.scss */
.waves-effect.waves-subble .waves-ripple {
  background: rgba(0, 0, 0, 0.1);
}

/* line 99, ../scss/_waves.scss */
.waves-effect.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* line 102, ../scss/_waves.scss */
.waves-effect.waves-classic .waves-ripple {
  background: rgba(0, 0, 0, 0.1);
}

/* line 105, ../scss/_waves.scss */
.waves-effect.waves-classic.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}

/* line 108, ../scss/_waves.scss */
.waves-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

/* line 115, ../scss/_waves.scss */
.waves-button,
.waves-circle {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
}

/* line 128, ../scss/_waves.scss */
.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 1em;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}

/* line 143, ../scss/_waves.scss */
.waves-button {
  -webkit-border-radius: 0.2em;
  border-radius: 0.2em;
}

/* line 147, ../scss/_waves.scss */
.waves-button-input {
  margin: 0;
}

/* line 150, ../scss/_waves.scss */
.waves-input-wrapper {
  -webkit-border-radius: 0.2em;
  border-radius: 0.2em;
  vertical-align: bottom;
}

/* line 155, ../scss/_waves.scss */
.waves-input-wrapper.waves-button {
  padding: 0;
}

/* line 158, ../scss/_waves.scss */
.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

/* line 164, ../scss/_waves.scss */
.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
}

/* line 173, ../scss/_waves.scss */
.waves-float {
  -webkit-mask-image: none;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -ms-transition: all 300ms;
  transition: all 300ms;
}

/* line 184, ../scss/_waves.scss */
.waves-block {
  display: block;
}

/* line 187, ../scss/_waves.scss */
a.waves-effect .waves-ripple {
  z-index: -1;
}

@media (min-width: 650px) {
  /* line 10, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
  html, body {
    height: 100%;
  }

  /* line 12, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
  #root {
    clear: both;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -60px;
  }
  /* line 18, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
  #root #root_footer {
    height: 60px;
  }

  /* line 20, ../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
  #footer {
    clear: both;
    position: relative;
    height: 60px;
  }

  /* line 36, ../scss/screen.scss */
  #app_shell_upper {
    height: 80px;
  }
}
@media (max-width: 650px) {
  /* line 2, ../scss/sml/_dialog_project_done.scss */
  #dialog.project-complete {
    overflow: scroll;
  }
  /* line 6, ../scss/sml/_dialog_project_done.scss */
  #dialog .top-shadow {
    display: block;
    width: 100%;
    position: absolute;
    height: 200px;
    background: linear-gradient(to top, transparent 0%, transparent 59%, rgba(0, 0, 0, 0.65) 100%);
  }
  /* line 14, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone {
    overflow-x: hidden;
    background: white;
    color: #66676b;
  }
  /* line 19, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .copy, #dialog #dialogProjectDone .img {
    float: none;
    width: auto;
  }
  /* line 24, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone h1, #dialog #dialogProjectDone h2, #dialog #dialogProjectDone p {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* line 29, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .step-up-your-game {
    margin-bottom: 100px;
  }
  /* line 32, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .step-up-your-game .item .inner {
    min-height: 340px;
  }
  /* line 34, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .step-up-your-game .item .inner p {
    margin-bottom: 0;
    padding-bottom: 20px;
  }
  /* line 42, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone h2.share {
    margin-top: 0;
    font-size: 13px;
  }
  /* line 47, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .dialogLevelDone_share {
    margin-top: 15px;
  }
  /* line 50, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .dialogLevelDone_share li a {
    width: 30px;
    height: 30px;
    background-size: 100% auto;
  }
  /* line 54, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .dialogLevelDone_share li a.fb {
    background-position: 0 -157px;
  }
  /* line 57, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .dialogLevelDone_share li a.google {
    background-position: 0 -191px;
  }
  /* line 60, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .dialogLevelDone_share li a.twitter {
    background-position: 0 -258px;
  }
  /* line 63, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .dialogLevelDone_share li a.tumblr {
    background-position: 0 -225px;
  }
  /* line 70, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .btn {
    position: relative;
  }
  /* line 74, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns {
    background: white;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
  /* line 79, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns .dots {
    clear: left;
    display: block;
    margin-top: 0;
  }
  /* line 83, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns .dots .dot {
    margin-top: 20px;
  }
  /* line 90, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns.no-space .item:before {
    display: none;
  }
  /* line 97, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns .item .inner img {
    width: 100%;
    height: auto;
  }
  /* line 101, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns .item .inner .logo {
    margin-top: 0px;
    padding: 20px 0;
    background-color: #e5edf5;
  }
  /* line 105, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns .item .inner .logo img {
    width: auto;
    max-width: 95%;
  }
  /* line 112, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns.slider {
    overflow: visible;
  }
  /* line 114, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns.slider .slides {
    text-align: left;
    overflow: visible;
    position: relative;
    left: calc(10% - 10px);
  }
  /* line 119, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns.slider .slides .slide {
    width: auto;
    margin: 0 10px;
  }
  /* line 125, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns .item {
    text-align: center;
    margin: 0;
  }
  /* line 128, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns .item .inner {
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: auto;
    min-height: 0px;
    margin-left: auto;
    margin-right: auto;
  }
  /* line 137, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns.no-space {
    padding: 20px 50px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
  /* line 142, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns.no-space .item {
    margin-left: 20px;
    text-align: center;
    margin: 0px;
  }
  /* line 146, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .row-with-columns.no-space .item .inner {
    width: 350px;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: auto;
  }
  /* line 155, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .header {
    padding: 0px;
    margin-bottom: 0;
    padding-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
  }
  /* line 178, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .header h1 {
    margin-top: 20px;
    font-size: 22px;
  }
  /* line 182, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .header .close-button {
    display: none;
  }
  /* line 185, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .header .back {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    line-height: 28px;
    color: #bc3a94;
    display: block;
    text-align: left;
    text-decoration: none;
    margin-top: 0px;
    position: absolute;
    left: 5px;
    top: 0px;
    color: white;
    z-index: 3;
  }
  /* line 198, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .header .back:before {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 34px;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    font-family: "Material Icons";
    content: "\E314";
    position: relative;
    top: 12px;
  }
  /* line 220, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .header .top-shadow {
    z-index: 2;
  }
  /* line 223, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .header .img {
    box-ordinal-goup: 1;
    -moz-box-ordinal-group: 1;
    -webkit-ordinal-group: 1;
    order: 1;
    -moz-order: 1;
    -webkit-order: 1;
    text-align: center;
    overflow: hidden;
    position: relative;
    max-height: 450px;
  }
  /* line 234, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .header .img img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20px;
    left: 38px;
  }
  /* line 242, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .header .copy {
    box-ordinal-goup: 2;
    -moz-box-ordinal-group: 2;
    -webkit-ordinal-group: 2;
    order: 2;
    -moz-order: 2;
    -webkit-order: 2;
    background-color: white;
  }
  /* line 253, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .other-projects:before {
    margin: 30px auto;
  }
  /* line 256, ../scss/sml/_dialog_project_done.scss */
  #dialog #dialogProjectDone .other-projects:after {
    margin-top: 30px;
  }

  /* line 2, ../scss/sml/_viz_container.scss */
  #visualization-container {
    -moz-transform: translate(1000px, 0);
    -ms-transform: translate(1000px, 0);
    -webkit-transform: translate(1000px, 0);
    transform: translate(1000px, 0);
  }

  /* line 6, ../scss/sml/_viz_container.scss */
  #control {
    left: 0;
    position: absolute;
    z-index: 8;
    bottom: 0px;
    right: 0;
    text-align: right;
  }

  /* line 15, ../scss/sml/_viz_container.scss */
  #backToCodeButton {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    display: none;
    position: relative;
    line-height: 28px;
    padding-left: 30px;
    color: #bc3a94;
    text-align: left;
    text-decoration: none;
    position: absolute;
    left: 20px;
    top: 15px;
  }
  /* line 28, ../scss/sml/_viz_container.scss */
  #backToCodeButton:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    background-image: url('../images/icons-s713a7c18ab.png');
    background-size: 40px 425px;
    background-position: 0 -150px;
    height: 28px;
    width: 17.5px;
  }

  /* line 37, ../scss/sml/_viz_container.scss */
  .play-reset {
    height: 60px;
  }
  /* line 39, ../scss/sml/_viz_container.scss */
  .play-reset.levels {
    height: 45px;
  }

  /* line 44, ../scss/sml/_viz_container.scss */
  #keep_coding_back {
    display: block;
    transition: 0s;
    margin: 0px auto;
    padding: 10px 20px 10px 7px;
    float: left;
    left: 10px;
    position: absolute;
    bottom: 10px;
  }
  /* line 53, ../scss/sml/_viz_container.scss */
  #keep_coding_back i {
    position: relative;
    top: 7px;
    margin-right: 10px;
    display: n;
    margin-top: -10px;
  }

  /* line 91, ../scss/sml/_viz_container.scss */
  .play-button:active {
    opacity: 0.8;
  }

  /* line 2, ../scss/sml/_dialog.scss */
  #dialog.help-toolbox, #dialog.project-complete {
    top: 42px;
  }
  /* line 7, ../scss/sml/_dialog.scss */
  #dialog .dialogContent {
    margin-top: 21px;
  }
  /* line 11, ../scss/sml/_dialog.scss */
  #dialog #intro {
    height: 600px;
  }

  /* line 6, ../scss/_sml.scss */
  body {
    height: 100%;
    padding-bottom: 0px;
    padding-top: 0;
    overflow: hidden;
  }
  /* line 15, ../scss/_sml.scss */
  body.project-complete-visible .blocklyTreeRow.last {
    display: none;
  }
  /* line 18, ../scss/_sml.scss */
  body.project-complete-visible header {
    position: fixed;
    width: 100%;
  }
  /* line 23, ../scss/_sml.scss */
  body.project-complete-visible #app_shell {
    position: inherit;
    margin-bottom: 0;
  }
  /* line 32, ../scss/_sml.scss */
  body.project-complete-visible .level-select {
    display: block;
  }
  /* line 36, ../scss/_sml.scss */
  body.project-complete-visible #root {
    min-height: 0px;
  }
  /* line 39, ../scss/_sml.scss */
  body.project-complete-visible .action-links {
    display: block;
  }
  /* line 42, ../scss/_sml.scss */
  body.project-complete-visible .close-button {
    display: none;
  }

  /* line 48, ../scss/_sml.scss */
  #display {
    display: block;
    position: absolute;
    top: 0;
  }

  /* line 55, ../scss/_sml.scss */
  #level_dropdown {
    top: 42px;
  }

  /* line 59, ../scss/_sml.scss */
  #mobile-flyout {
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    left: 249px;
    bottom: 72px;
    background: url('../images/mobile-flyout-sprite.png?1447957644');
    height: 57.5px;
    width: 24.5px;
    background-size: 24.5px 115px;
    z-index: 10;
    background-position: 0 -173px !important;
  }
  /* line 71, ../scss/_sml.scss */
  #mobile-flyout.open {
    pointer-events: all;
    left: 249px;
    background-position: 0 0 !important;
  }
  /* line 76, ../scss/_sml.scss */
  .visualization-container-shown #mobile-flyout {
    display: none;
  }

  /* line 81, ../scss/_sml.scss */
  header {
    background-color: #eeeeee;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    height: 42px;
  }
  /* line 85, ../scss/_sml.scss */
  header .action-links {
    position: absolute;
    top: 0;
    right: 0;
  }
  /* line 89, ../scss/_sml.scss */
  header .action-links button {
    font-size: 16px;
    border: 0;
    outline: 0;
    color: #66676b;
    display: block;
    text-align: left;
    padding: 10px 0 10px 35px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    text-transform: initial;
  }
  /* line 102, ../scss/_sml.scss */
  header .action-links button:first-child {
    border: 0;
    outline: 0;
  }
  /* line 106, ../scss/_sml.scss */
  header .action-links button:before {
    color: #952491;
    font-size: 20px;
    content: "";
    display: block;
    position: absolute;
    margin-left: 0;
    top: 50%;
    margin-top: -9px;
    left: 0;
  }
  /* line 119, ../scss/_sml.scss */
  header .action-link-menu {
    -moz-box-shadow: 0 2px 0 #999999;
    -webkit-box-shadow: 0 2px 0 #999999;
    box-shadow: 0 2px 0 #999999;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    background: #f7f7f7;
    padding: 5px 0 0px 25px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    margin-top: 10px;
    margin-right: 10px;
    width: 0px;
    pointer-events: none;
    padding-right: 0px;
    padding-left: 0px;
  }
  /* line 133, ../scss/_sml.scss */
  header .action-link-menu button {
    opacity: 0;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    transition-delay: 0.3s;
  }
  /* line 137, ../scss/_sml.scss */
  header .action-link-menu button:before {
    top: 18px;
    left: 25px;
  }
  /* line 142, ../scss/_sml.scss */
  header .action-link-menu button:last-child:before {
    top: 25px;
  }
  /* line 147, ../scss/_sml.scss */
  header .action-link-menu.open {
    pointer-events: all;
    width: 215px;
    position: relative;
    display: block;
    z-index: 100;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  /* line 154, ../scss/_sml.scss */
  header .action-link-menu.open button {
    padding-left: 60px;
    opacity: 1;
  }
  /* line 161, ../scss/_sml.scss */
  header .action-link-menu .menu-divider {
    height: 2px;
    background-color: #999999;
    width: 85%;
    margin: 0 auto;
  }
  /* line 168, ../scss/_sml.scss */
  header .intro-left {
    float: left;
    display: inline;
    position: absolute;
    font-size: 24px;
    color: #bc3a94;
    line-height: 42px;
    text-decoration: none;
    height: 100%;
    width: 40%;
  }
  /* line 180, ../scss/_sml.scss */
  header .project-title {
    line-height: 47px;
    font-size: 14px;
    margin-left: 14px;
  }
  /* line 187, ../scss/_sml.scss */
  header .project-title-center .intro-back {
    font-size: 11px;
    line-height: 42px;
    margin-left: 25px;
  }
  /* line 192, ../scss/_sml.scss */
  header .project-title-center .project-title {
    float: none;
    position: absolute;
  }

  /* line 200, ../scss/_sml.scss */
  #blockly {
    width: 100%;
    top: 42px;
  }

  /* line 205, ../scss/_sml.scss */
  #backToProjects {
    display: block;
    padding: 15px 0px 15px 60px;
    margin: 0px;
  }
  /* line 209, ../scss/_sml.scss */
  #backToProjects:before {
    margin-top: -17px;
  }

  /* line 215, ../scss/_sml.scss */
  #control.show #runButton {
    display: block;
  }

  /* line 221, ../scss/_sml.scss */
  #app_shell {
    overflow: hidden;
    width: auto;
    height: 100%;
  }

  /* line 229, ../scss/_sml.scss */
  #root {
    height: 100%;
  }

  /* line 232, ../scss/_sml.scss */
  .level-container {
    border-top: 2px solid white;
  }
  /* line 234, ../scss/_sml.scss */
  .level-container:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
  }

  /* line 240, ../scss/_sml.scss */
  header .level-select {
    float: none;
    display: block;
    -webkit-tap-highlight-color: transparent;
    line-height: 42px;
    position: relative;
    margin-left: 0px;
  }
  /* line 247, ../scss/_sml.scss */
  header .level-select #level_dropdown {
    margin-left: 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: 0 2px 0 #999999;
    -webkit-box-shadow: 0 2px 0 #999999;
    box-shadow: 0 2px 0 #999999;
    width: auto;
    right: 0;
    background-color: #f7f7f7;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -moz-transform: scaleY(0) !important;
    -ms-transform: scaleY(0) !important;
    -webkit-transform: scaleY(0) !important;
    transform: scaleY(0) !important;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    top: 42px;
  }
  /* line 259, ../scss/_sml.scss */
  header .level-select #level_dropdown .level-container {
    transition-delay: 0s;
    opacity: 0;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
  }
  /* line 267, ../scss/_sml.scss */
  header .level-select.open #level_dropdown {
    -moz-transform: scaleY(1) !important;
    -ms-transform: scaleY(1) !important;
    -webkit-transform: scaleY(1) !important;
    transform: scaleY(1) !important;
    display: block !important;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  /* line 271, ../scss/_sml.scss */
  header .level-select.open #level_dropdown .level-container {
    transition-delay: 0.3s;
    opacity: 1;
  }
  /* line 278, ../scss/_sml.scss */
  header .close-button {
    display: none !important;
  }

  /* line 282, ../scss/_sml.scss */
  .level-name {
    width: calc(100% - 80px);
  }
  /* line 285, ../scss/_sml.scss */
  .level-name.level_done:before {
    right: -8px;
  }

  /* line 291, ../scss/_sml.scss */
  .block-counter {
    display: none;
  }

  /* line 296, ../scss/_sml.scss */
  #level_dropdown_handle strong {
    width: 17px;
    height: 17px;
    line-height: 19px;
  }
  /* line 302, ../scss/_sml.scss */
  #level_dropdown_handle:after {
    font-size: 24px;
    right: 0px;
  }

  /* line 308, ../scss/_sml.scss */
  #level_dropdown_handle:hover {
    opacity: 1;
    color: #952491;
  }
  /* line 311, ../scss/_sml.scss */
  #level_dropdown_handle:hover strong {
    background: #952491;
    border-color: #952491;
  }
  /* line 315, ../scss/_sml.scss */
  #level_dropdown_handle:hover:after {
    opacity: 1;
  }

  /* line 322, ../scss/_sml.scss */
  #realHelp p {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
  }
  /* line 327, ../scss/_sml.scss */
  #realHelp h1 {
    margin-top: 30px;
  }

  /* line 332, ../scss/_sml.scss */
  .level_dropdown_handle_title {
    display: none;
  }

  /* line 336, ../scss/_sml.scss */
  #action_link_hamburger {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    -webkit-tap-highlight-color: transparent;
    padding: 0px 14px 0 26px;
    position: absolute;
    right: 0;
    line-height: 42px;
    width: 17px;
    font-size: 25px;
    height: 44px;
  }

  /* line 349, ../scss/_sml.scss */
  #visualization-container {
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    -webkit-transition: all 200ms;
    transition: all 200ms;
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    left: 100%;
    z-index: 6;
  }

  /* line 360, ../scss/_sml.scss */
  #share .dialogLevelDone_share {
    margin-bottom: 50px;
  }
  /* line 362, ../scss/_sml.scss */
  #share .dialogLevelDone_share li {
    margin-left: 16px;
  }

  /* line 367, ../scss/_sml.scss */
  #dialog.help-toolbox {
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
  }

  /* line 376, ../scss/_sml.scss */
  .other-projects {
    position: relative;
  }
  /* line 378, ../scss/_sml.scss */
  .other-projects:after, .other-projects:before {
    display: block;
    content: "";
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    height: 1px;
    background: #952491;
  }
  /* line 388, ../scss/_sml.scss */
  .other-projects:before {
    margin-bottom: 40px;
    margin-top: 20px;
  }
  /* line 392, ../scss/_sml.scss */
  .other-projects:after {
    margin-top: 50px;
  }

  /* line 398, ../scss/_sml.scss */
  #helpToolbox {
    -moz-box-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.28);
    -webkit-box-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.28);
    box-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.28);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    background: rgba(110, 114, 255, 0.93);
    font-size: 14px;
  }
  /* line 404, ../scss/_sml.scss */
  #helpToolbox .close {
    display: none;
  }
  /* line 407, ../scss/_sml.scss */
  #helpToolbox .helpText {
    text-align: left;
    padding: 13px 15px;
    line-height: 1.8;
  }
  /* line 413, ../scss/_sml.scss */
  #helpToolbox.arrowLeft:before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 20%;
    top: auto;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: rgba(110, 114, 255, 0.93) transparent transparent transparent;
    overflow: hidden;
  }
  /* line 431, ../scss/_sml.scss */
  #helpToolbox.arrowRight:before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 75%;
    top: auto;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: rgba(110, 114, 255, 0.96) transparent transparent transparent;
    overflow: hidden;
  }
  /* line 449, ../scss/_sml.scss */
  #helpToolbox.arrowCenter:before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 45%;
    top: auto;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: rgba(110, 114, 255, 0.96) transparent transparent transparent;
    overflow: hidden;
  }

  /* line 468, ../scss/_sml.scss */
  #dialog.info-banner {
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
  }

  /* line 475, ../scss/_sml.scss */
  #conceptBanner {
    -moz-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.35);
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    font-size: 12px;
    line-height: 1.3;
    height: 81px;
  }
  /* line 487, ../scss/_sml.scss */
  #conceptBanner .close {
    display: none;
  }
  /* line 490, ../scss/_sml.scss */
  #conceptBanner img {
    width: 25px;
    display: inline-block;
    left: 0px;
    position: relative;
    margin: 0 10px 0 8px;
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  /* line 500, ../scss/_sml.scss */
  #conceptBanner .right {
    display: inline-block;
    width: 80%;
    float: right;
  }
  /* line 504, ../scss/_sml.scss */
  #conceptBanner .right .bannerTextContainer {
    display: table;
    height: 81px;
  }
  /* line 507, ../scss/_sml.scss */
  #conceptBanner .right .bannerTextContainer .bannerText {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    line-height: 1.8;
    letter-spacing: 0px;
    padding: 0px;
  }

  /* line 519, ../scss/_sml.scss */
  #dialog.help-toolbox {
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
  }

  /* line 527, ../scss/_sml.scss */
  #helpToolbox {
    -moz-box-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.28);
    -webkit-box-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.28);
    box-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.28);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    background: rgba(110, 114, 255, 0.93);
    font-size: 14px;
  }
  /* line 533, ../scss/_sml.scss */
  #helpToolbox .close {
    display: none;
  }
  /* line 536, ../scss/_sml.scss */
  #helpToolbox .helpText {
    text-align: left;
    padding: 13px 15px;
    line-height: 1.8;
  }
  /* line 542, ../scss/_sml.scss */
  #helpToolbox.arrowLeft:before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 20%;
    top: auto;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: rgba(110, 114, 255, 0.93) transparent transparent transparent;
    overflow: hidden;
  }
  /* line 560, ../scss/_sml.scss */
  #helpToolbox.arrowRight:before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 75%;
    top: auto;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: rgba(110, 114, 255, 0.96) transparent transparent transparent;
    overflow: hidden;
  }
  /* line 578, ../scss/_sml.scss */
  #helpToolbox.arrowCenter:before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 45%;
    top: auto;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: rgba(110, 114, 255, 0.96) transparent transparent transparent;
    overflow: hidden;
  }

  /* line 597, ../scss/_sml.scss */
  #dialog.info-banner {
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
  }

  /* line 604, ../scss/_sml.scss */
  #conceptBanner {
    -moz-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.35);
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    font-size: 12px;
    line-height: 1.3;
    height: 81px;
  }
  /* line 616, ../scss/_sml.scss */
  #conceptBanner .close {
    display: none;
  }
  /* line 619, ../scss/_sml.scss */
  #conceptBanner img {
    width: 25px;
    display: inline-block;
    left: 0px;
    position: relative;
    margin: 0 10px 0 8px;
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  /* line 629, ../scss/_sml.scss */
  #conceptBanner .right {
    display: inline-block;
    width: 80%;
    float: right;
  }
  /* line 633, ../scss/_sml.scss */
  #conceptBanner .right .bannerTextContainer {
    display: table;
    height: 81px;
  }
  /* line 636, ../scss/_sml.scss */
  #conceptBanner .right .bannerTextContainer .bannerText {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    line-height: 1.8;
    letter-spacing: 0px;
    padding: 0px;
  }

  /* line 648, ../scss/_sml.scss */
  #successBanner {
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    height: 81px;
  }
  /* line 660, ../scss/_sml.scss */
  #successBanner .close {
    display: none;
  }
  /* line 663, ../scss/_sml.scss */
  #successBanner i {
    font-size: 34px;
  }

  /* line 668, ../scss/_sml.scss */
  #errorBanner {
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    height: 81px;
  }
  /* line 680, ../scss/_sml.scss */
  #errorBanner .close {
    display: none;
  }
  /* line 683, ../scss/_sml.scss */
  #errorBanner i {
    font-size: 34px;
  }

  /* line 688, ../scss/_sml.scss */
  #dialog.help-toolbox {
    height: 64px;
    width: 100%;
    z-index: 15;
  }

  /* line 695, ../scss/_sml.scss */
  .blocklyTreeRow.last {
    display: block;
  }

  /* line 701, ../scss/_sml.scss */
  #resetButton {
    margin: 10px auto;
  }
  /* line 703, ../scss/_sml.scss */
  #resetButton.open {
    margin-right: 10px;
    display: block;
    transition: 0s;
    margin: 0px auto;
    padding: 10px 20px 10px 7px;
    float: left;
    /* left: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
  }

  /* line 717, ../scss/_sml.scss */
  #footer {
    display: none;
  }

  /* line 721, ../scss/_sml.scss */
  .menu-container {
    display: none;
  }

  /* line 725, ../scss/_sml.scss */
  .close-button-dialog {
    display: block;
    position: absolute;
    height: 40px;
    width: 40px;
    float: right;
    top: 40px;
    right: 7px;
  }
  /* line 733, ../scss/_sml.scss */
  .close-button-dialog:before {
    top: 20px;
    width: 25px;
    height: 2px;
    position: absolute;
    content: "";
    left: 8px;
    -moz-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
    -ms-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
    transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
    -moz-transform-origin: 50% 50% 0 50%;
    -ms-transform-origin: 50% 50% 0 50%;
    -webkit-transform-origin: 50% 50% 0 50%;
    transform-origin: 50% 50% 0 50%;
  }
  /* line 743, ../scss/_sml.scss */
  .close-button-dialog:after {
    top: 20px;
    width: 25px;
    height: 2px;
    position: absolute;
    content: "";
    cursor: default;
    opacity: 1;
    left: 8px;
    margin: 0;
    padding: 0;
    -moz-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    -ms-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
  }
}
@media (max-width: 650px) and (max-width: 500px) {
  /* line 760, ../scss/_sml.scss */
  #dialogProjectDone .img {
    height: 310px;
  }
}
@media (max-width: 650px) and (max-width: 320px) {
  /* line 768, ../scss/_sml.scss */
  #mobile-flyout.open {
    left: 199px;
  }
}
@media (max-width: 650px) {
  /* line 1, ../scss/xsml/_dialog.scss */
  #dialog {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    top: 0;
    margin: auto;
    left: 0;
    right: 0;
    width: auto;
    bottom: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    background: rgba(41, 10, 40, 0);
  }
  /* line 12, ../scss/xsml/_dialog.scss */
  #dialog .farSide {
    bottom: auto;
    position: relative;
  }
  /* line 17, ../scss/xsml/_dialog.scss */
  #dialog #levelIntro {
    width: 100%;
    height: 100%;
  }
  /* line 22, ../scss/xsml/_dialog.scss */
  #dialog.help-toolbox {
    height: 64px;
    width: 100%;
  }
  /* line 27, ../scss/xsml/_dialog.scss */
  #dialog .dialogContent {
    background: white;
    top: 0;
    left: 0;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    margin: 0;
    width: 100%;
  }
  /* line 37, ../scss/xsml/_dialog.scss */
  #dialog.levelDialog .dialogContent,
  #dialog.levelDialog #intro,
  #dialog.levelDialog #levelIntro {
    background: white;
    color: #66676b;
    z-index: 11;
    height: calc(100% - 42px);
    width: 100%;
    top: 42px;
  }
  /* line 48, ../scss/xsml/_dialog.scss */
  #dialog.full-screen {
    z-index: 13;
  }
  /* line 51, ../scss/xsml/_dialog.scss */
  #dialog.full-screen .dialogContent {
    background: white;
    height: 100%;
    width: 100%;
  }
  /* line 57, ../scss/xsml/_dialog.scss */
  #dialog.full-screen .farSide {
    position: absolute;
    bottom: 30px;
    padding-bottom: 0;
  }
  /* line 64, ../scss/xsml/_dialog.scss */
  #dialog.level-complete {
    background: #fff;
  }
  /* line 68, ../scss/xsml/_dialog.scss */
  #dialog h1, #dialog h2, #dialog p {
    padding-left: 50px;
    padding-right: 50px;
  }
  /* line 73, ../scss/xsml/_dialog.scss */
  #dialog h1.level-header {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  /* line 78, ../scss/xsml/_dialog.scss */
  #dialog.intro {
    background: white;
    color: #66676b;
    overflow-x: hidden;
  }
  /* line 84, ../scss/xsml/_dialog.scss */
  #dialog .center-vertically h1 {
    margin-top: 0;
  }
  /* line 90, ../scss/xsml/_dialog.scss */
  #dialog .slide-head img {
    position: relative;
    top: 0;
    margin-top: 0;
  }
  /* line 97, ../scss/xsml/_dialog.scss */
  #dialog .things-to-learn {
    margin: 0;
  }
  /* line 102, ../scss/xsml/_dialog.scss */
  #dialog #share .social-header {
    padding: 0 30px;
  }
  /* line 107, ../scss/xsml/_dialog.scss */
  #dialog .slide-content {
    display: table;
    width: 100%;
    height: 100%;
  }
  /* line 112, ../scss/xsml/_dialog.scss */
  #dialog .slide-content .content-wrapper {
    display: table-cell;
    vertical-align: middle;
  }
  /* line 119, ../scss/xsml/_dialog.scss */
  #dialog #intro,
  #dialog #levelIntro {
    position: relative;
  }
  /* line 122, ../scss/xsml/_dialog.scss */
  #dialog #intro .wrapper,
  #dialog #levelIntro .wrapper {
    height: 100%;
  }
  /* line 125, ../scss/xsml/_dialog.scss */
  #dialog #intro .slide-content,
  #dialog #levelIntro .slide-content {
    height: 41%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  /* line 130, ../scss/xsml/_dialog.scss */
  #dialog #intro .slide-content p,
  #dialog #levelIntro .slide-content p {
    font-size: 14px;
    padding: 0;
    width: 70%;
    margin: 0 auto;
  }
  /* line 137, ../scss/xsml/_dialog.scss */
  #dialog #intro .slide-head,
  #dialog #levelIntro .slide-head {
    height: 40%;
  }
  /* line 140, ../scss/xsml/_dialog.scss */
  #dialog #intro .dots,
  #dialog #levelIntro .dots {
    width: 100%;
    position: absolute;
    bottom: calc(3% + 39px);
  }
  /* line 146, ../scss/xsml/_dialog.scss */
  #dialog #intro .inner-wrapper,
  #dialog #intro .slider,
  #dialog #intro .slides,
  #dialog #intro .slide,
  #dialog #levelIntro .inner-wrapper,
  #dialog #levelIntro .slider,
  #dialog #levelIntro .slides,
  #dialog #levelIntro .slide {
    height: 100%;
  }
  /* line 153, ../scss/xsml/_dialog.scss */
  #dialog #intro h1,
  #dialog #levelIntro h1 {
    margin-top: 0;
  }
  /* line 157, ../scss/xsml/_dialog.scss */
  #dialog #intro h2,
  #dialog #levelIntro h2 {
    margin-top: 5%;
    padding: 0;
  }
  /* line 162, ../scss/xsml/_dialog.scss */
  #dialog #intro .farSide,
  #dialog #levelIntro .farSide {
    position: absolute;
    padding-bottom: 0;
    width: 100%;
    bottom: 3%;
  }
  /* line 169, ../scss/xsml/_dialog.scss */
  #dialog #intro .instructions,
  #dialog #levelIntro .instructions {
    padding-top: 0;
  }
  /* line 172, ../scss/xsml/_dialog.scss */
  #dialog #intro .instructions .slide-content,
  #dialog #levelIntro .instructions .slide-content {
    height: 84%;
  }
  /* line 176, ../scss/xsml/_dialog.scss */
  #dialog #intro .instructions .image-wrapper,
  #dialog #levelIntro .instructions .image-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  /* line 181, ../scss/xsml/_dialog.scss */
  #dialog #intro .instructions .image-wrapper .intro-thumb,
  #dialog #levelIntro .instructions .image-wrapper .intro-thumb {
    width: 33%;
    margin-bottom: 1%;
  }
  /* line 186, ../scss/xsml/_dialog.scss */
  #dialog #intro .instructions .fix-width,
  #dialog #levelIntro .instructions .fix-width {
    margin-bottom: 0;
    width: 85%;
  }
  /* line 190, ../scss/xsml/_dialog.scss */
  #dialog #intro .instructions li,
  #dialog #levelIntro .instructions li {
    margin-bottom: 7%;
  }
  /* line 193, ../scss/xsml/_dialog.scss */
  #dialog #intro .instructions li:last-child,
  #dialog #levelIntro .instructions li:last-child {
    margin-bottom: 0;
  }
  /* line 200, ../scss/xsml/_dialog.scss */
  #dialog #levelOutroVideo {
    height: 100%;
    width: 100%;
  }
  /* line 204, ../scss/xsml/_dialog.scss */
  #dialog #levelOutroVideo #close-video {
    z-index: 10;
  }
  /* line 209, ../scss/xsml/_dialog.scss */
  #dialog #levelOutroVideo .video-wrapper video {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  /* line 223, ../scss/xsml/_dialog.scss */
  #dialog #dialogLevelDone,
  #dialog #concept {
    height: 100%;
    width: 100%;
  }
  /* line 228, ../scss/xsml/_dialog.scss */
  #dialog #dialogLevelDone h1#congratulations_dialog_header,
  #dialog #concept h1#congratulations_dialog_header {
    padding: 0;
    width: 70%;
    margin: 0 auto 4%;
    font-size: 22px;
  }
  /* line 235, ../scss/xsml/_dialog.scss */
  #dialog #dialogLevelDone .big-checkbox,
  #dialog #concept .big-checkbox {
    background-size: 100% auto;
  }
  /* line 241, ../scss/xsml/_dialog.scss */
  #dialog #restartConfirmation p {
    font-size: 13px;
    padding: 0 30px;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 650px) and (max-height: 550px) {
  /* line 253, ../scss/xsml/_dialog.scss */
  #intro h2,
  #levelIntro h2 {
    margin-bottom: 5px;
  }
  /* line 257, ../scss/xsml/_dialog.scss */
  #intro .things-to-learn li,
  #levelIntro .things-to-learn li {
    text-transform: uppercase;
    width: auto;
    margin-left: 10px;
    padding-top: 0;
    font-size: 11px;
  }
  /* line 263, ../scss/xsml/_dialog.scss */
  #intro .things-to-learn li:before,
  #levelIntro .things-to-learn li:before {
    opacity: 0;
    height: 0;
  }
  /* line 268, ../scss/xsml/_dialog.scss */
  #intro .things-to-learn li:first-child,
  #levelIntro .things-to-learn li:first-child {
    margin-left: 0;
  }

  /* line 278, ../scss/xsml/_dialog.scss */
  #dialog #dialogLevelDone h1#congratulations_dialog_header {
    font-size: 17px;
    width: 60%;
  }
  /* line 282, ../scss/xsml/_dialog.scss */
  #dialog #dialogLevelDone .big-checkbox {
    background-size: 100% auto;
    padding-bottom: 40%;
    width: 40%;
    height: 0;
  }
  /* line 288, ../scss/xsml/_dialog.scss */
  #dialog #dialogLevelDone p {
    font-size: 13px;
  }
}
@media (max-width: 650px) {
  /* line 294, ../scss/xsml/_dialog.scss */
  #dialogLevelDone {
    color: #66676b;
  }
  /* line 296, ../scss/xsml/_dialog.scss */
  #dialogLevelDone .dialogLevelDone_share {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 650px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40 / 71) {
  /* line 311, ../scss/xsml/_dialog.scss */
  #dialog #intro h1,
  #dialog #levelIntro h1 {
    font-size: 18px;
  }
  /* line 315, ../scss/xsml/_dialog.scss */
  #dialog #intro h2,
  #dialog #levelIntro h2 {
    margin-top: 8%;
    font-size: 14px;
    margin-bottom: 5px;
  }
  /* line 326, ../scss/xsml/_dialog.scss */
  #dialog #intro .slide-content p,
  #dialog #levelIntro .slide-content p {
    width: 65%;
  }
  /* line 333, ../scss/xsml/_dialog.scss */
  #dialog #intro .instructions .image-wrapper .intro-thumb,
  #dialog #levelIntro .instructions .image-wrapper .intro-thumb {
    width: 25%;
  }
}
@media (max-width: 650px) {
  /* line 6, ../scss/_xsml.scss */
  body {
    height: 100%;
    padding-bottom: 0px;
    padding-top: 0;
    overflow: hidden;
  }
  /* line 15, ../scss/_xsml.scss */
  body.project-complete-visible .blocklyTreeRow.last {
    display: none;
  }
  /* line 18, ../scss/_xsml.scss */
  body.project-complete-visible header {
    position: fixed;
    width: 100%;
  }
  /* line 23, ../scss/_xsml.scss */
  body.project-complete-visible #app_shell {
    position: inherit;
    margin-bottom: 0;
  }
  /* line 32, ../scss/_xsml.scss */
  body.project-complete-visible .level-select {
    display: block;
  }
  /* line 36, ../scss/_xsml.scss */
  body.project-complete-visible #root {
    min-height: 0px;
  }
  /* line 39, ../scss/_xsml.scss */
  body.project-complete-visible .action-links {
    display: block;
  }
  /* line 42, ../scss/_xsml.scss */
  body.project-complete-visible .close-button {
    display: none;
  }

  /* line 48, ../scss/_xsml.scss */
  #display {
    left: 0;
    top: 0;
  }

  /* line 55, ../scss/_xsml.scss */
  #level_dropdown {
    top: 42px;
  }

  /* line 59, ../scss/_xsml.scss */
  header {
    background-color: #eeeeee;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    height: 42px;
  }
  /* line 63, ../scss/_xsml.scss */
  header .action-links {
    position: absolute;
    top: 0;
    right: 0;
  }
  /* line 67, ../scss/_xsml.scss */
  header .action-links button {
    font-size: 16px;
    border: 0;
    outline: 0;
    color: #66676b;
    display: block;
    text-align: left;
    padding: 10px 0 10px 35px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    text-transform: initial;
  }
  /* line 80, ../scss/_xsml.scss */
  header .action-links button:first-child {
    border: 0;
    outline: 0;
  }
  /* line 84, ../scss/_xsml.scss */
  header .action-links button:before {
    color: #952491;
    font-size: 20px;
    content: "";
    display: block;
    position: absolute;
    margin-left: 0;
    top: 50%;
    margin-top: -9px;
    left: 0;
  }
  /* line 97, ../scss/_xsml.scss */
  header .action-link-menu {
    -moz-box-shadow: 0 2px 0 #999999;
    -webkit-box-shadow: 0 2px 0 #999999;
    box-shadow: 0 2px 0 #999999;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    background: #f7f7f7;
    padding: 5px 0 0px 25px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    margin-top: 10px;
    margin-right: 10px;
    width: 0px;
    pointer-events: none;
    padding-right: 0px;
    padding-left: 0px;
  }
  /* line 111, ../scss/_xsml.scss */
  header .action-link-menu button {
    opacity: 0;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    transition-delay: 0.3s;
  }
  /* line 115, ../scss/_xsml.scss */
  header .action-link-menu button:before {
    top: 18px;
    left: 25px;
  }
  /* line 120, ../scss/_xsml.scss */
  header .action-link-menu button:last-child:before {
    top: 25px;
  }
  /* line 125, ../scss/_xsml.scss */
  header .action-link-menu.open {
    pointer-events: all;
    width: 215px;
    position: relative;
    display: block;
    z-index: 100;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  /* line 132, ../scss/_xsml.scss */
  header .action-link-menu.open button {
    padding-left: 60px;
    opacity: 1;
  }
  /* line 139, ../scss/_xsml.scss */
  header .action-link-menu .menu-divider {
    height: 2px;
    background-color: #999999;
    width: 85%;
    margin: 0 auto;
  }
  /* line 146, ../scss/_xsml.scss */
  header .intro-left {
    float: left;
    display: inline;
    position: absolute;
    font-size: 24px;
    color: #bc3a94;
    line-height: 42px;
    text-decoration: none;
    height: 100%;
    width: 40%;
  }
  /* line 158, ../scss/_xsml.scss */
  header .project-title {
    line-height: 47px;
    font-size: 14px;
    margin-left: 14px;
  }
  /* line 165, ../scss/_xsml.scss */
  header .project-title-center .intro-back {
    font-size: 11px;
    line-height: 42px;
    margin-left: 25px;
  }
  /* line 170, ../scss/_xsml.scss */
  header .project-title-center .project-title {
    float: none;
    position: absolute;
  }

  /* line 178, ../scss/_xsml.scss */
  #blockly {
    width: 100%;
    top: 42px;
  }

  /* line 183, ../scss/_xsml.scss */
  #backToProjects {
    display: block;
    padding: 15px 0px 15px 60px;
    margin: 0px;
  }
  /* line 187, ../scss/_xsml.scss */
  #backToProjects:before {
    margin-top: -17px;
  }

  /* line 193, ../scss/_xsml.scss */
  #app_shell {
    overflow: hidden;
    width: auto;
    height: 100%;
  }

  /* line 201, ../scss/_xsml.scss */
  #root {
    height: 100%;
  }

  /* line 204, ../scss/_xsml.scss */
  .level-container {
    border-top: 2px solid white;
  }
  /* line 206, ../scss/_xsml.scss */
  .level-container:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
  }

  /* line 212, ../scss/_xsml.scss */
  header .level-select {
    float: none;
    display: block;
    -webkit-tap-highlight-color: transparent;
    line-height: 42px;
    position: relative;
    margin-left: 0px;
  }
  /* line 219, ../scss/_xsml.scss */
  header .level-select #level_dropdown {
    margin-left: 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: 0 2px 0 #999999;
    -webkit-box-shadow: 0 2px 0 #999999;
    box-shadow: 0 2px 0 #999999;
    width: auto;
    right: 0;
    background-color: #f7f7f7;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -moz-transform: scaleY(0) !important;
    -ms-transform: scaleY(0) !important;
    -webkit-transform: scaleY(0) !important;
    transform: scaleY(0) !important;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    top: 42px;
  }
  /* line 231, ../scss/_xsml.scss */
  header .level-select #level_dropdown .level-container {
    transition-delay: 0s;
    opacity: 0;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
  }
  /* line 239, ../scss/_xsml.scss */
  header .level-select.open #level_dropdown {
    -moz-transform: scaleY(1) !important;
    -ms-transform: scaleY(1) !important;
    -webkit-transform: scaleY(1) !important;
    transform: scaleY(1) !important;
    display: block !important;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  /* line 243, ../scss/_xsml.scss */
  header .level-select.open #level_dropdown .level-container {
    transition-delay: 0.3s;
    opacity: 1;
  }
  /* line 250, ../scss/_xsml.scss */
  header .close-button {
    display: none !important;
  }

  /* line 254, ../scss/_xsml.scss */
  .level-name {
    width: calc(100% - 80px);
  }
  /* line 257, ../scss/_xsml.scss */
  .level-name.level_done:before {
    right: -8px;
  }

  /* line 263, ../scss/_xsml.scss */
  .block-counter {
    display: none;
  }

  /* line 268, ../scss/_xsml.scss */
  #level_dropdown_handle strong {
    width: 17px;
    height: 17px;
    line-height: 19px;
  }
  /* line 274, ../scss/_xsml.scss */
  #level_dropdown_handle:after {
    font-size: 24px;
    right: 0px;
  }

  /* line 280, ../scss/_xsml.scss */
  #level_dropdown_handle:hover {
    opacity: 1;
    color: #952491;
  }
  /* line 283, ../scss/_xsml.scss */
  #level_dropdown_handle:hover strong {
    background: #952491;
    border-color: #952491;
  }
  /* line 287, ../scss/_xsml.scss */
  #level_dropdown_handle:hover:after {
    opacity: 1;
  }

  /* line 294, ../scss/_xsml.scss */
  #realHelp p {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
  }
  /* line 299, ../scss/_xsml.scss */
  #realHelp h1 {
    margin-top: 30px;
  }

  /* line 304, ../scss/_xsml.scss */
  .level_dropdown_handle_title {
    display: none;
  }

  /* line 308, ../scss/_xsml.scss */
  #action_link_hamburger {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    -webkit-tap-highlight-color: transparent;
    padding: 0px 14px 0 26px;
    position: absolute;
    right: 0;
    line-height: 42px;
    width: 17px;
    font-size: 25px;
    height: 44px;
  }

  /* line 321, ../scss/_xsml.scss */
  #visualization-container {
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    -webkit-transition: all 200ms;
    transition: all 200ms;
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    left: 100%;
    z-index: 6;
  }

  /* line 332, ../scss/_xsml.scss */
  .slide .full-bleed {
    min-width: 100%;
    max-width: 100%;
  }
  /* line 337, ../scss/_xsml.scss */
  .slide .slide-head {
    max-height: 400px;
  }

  /* line 343, ../scss/_xsml.scss */
  #share .dialogLevelDone_share {
    margin-bottom: 50px;
  }
  /* line 345, ../scss/_xsml.scss */
  #share .dialogLevelDone_share li {
    margin-left: 16px;
  }

  /* line 351, ../scss/_xsml.scss */
  .other-projects {
    position: relative;
  }
  /* line 353, ../scss/_xsml.scss */
  .other-projects:after, .other-projects:before {
    display: block;
    content: "";
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    height: 1px;
    background: #952491;
  }
  /* line 363, ../scss/_xsml.scss */
  .other-projects:before {
    margin-bottom: 40px;
    margin-top: 20px;
  }
  /* line 367, ../scss/_xsml.scss */
  .other-projects:after {
    margin-top: 50px;
  }

  /* line 373, ../scss/_xsml.scss */
  .slider .slides {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
  }

  /* line 378, ../scss/_xsml.scss */
  #dialog.help-toolbox {
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
  }

  /* line 386, ../scss/_xsml.scss */
  #helpToolbox {
    -moz-box-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.28);
    -webkit-box-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.28);
    box-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.28);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    background: rgba(110, 114, 255, 0.93);
    font-size: 14px;
  }
  /* line 392, ../scss/_xsml.scss */
  #helpToolbox .close {
    display: none;
  }
  /* line 395, ../scss/_xsml.scss */
  #helpToolbox .helpText {
    text-align: left;
    padding: 13px 15px;
    line-height: 1.8;
  }
  /* line 401, ../scss/_xsml.scss */
  #helpToolbox.arrowLeft:before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 20%;
    top: auto;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: rgba(110, 114, 255, 0.93) transparent transparent transparent;
    overflow: hidden;
  }
  /* line 419, ../scss/_xsml.scss */
  #helpToolbox.arrowRight:before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 75%;
    top: auto;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: rgba(110, 114, 255, 0.96) transparent transparent transparent;
    overflow: hidden;
  }
  /* line 437, ../scss/_xsml.scss */
  #helpToolbox.arrowCenter:before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 45%;
    top: auto;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: rgba(110, 114, 255, 0.96) transparent transparent transparent;
    overflow: hidden;
  }

  /* line 456, ../scss/_xsml.scss */
  #dialog.info-banner {
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
  }

  /* line 463, ../scss/_xsml.scss */
  #conceptBanner {
    -moz-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.35);
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    font-size: 12px;
    line-height: 1.3;
    height: 81px;
  }
  /* line 475, ../scss/_xsml.scss */
  #conceptBanner .close {
    display: none;
  }
  /* line 478, ../scss/_xsml.scss */
  #conceptBanner img {
    width: 25px;
    display: inline-block;
    left: 0px;
    position: relative;
    margin: 0 10px 0 8px;
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  /* line 488, ../scss/_xsml.scss */
  #conceptBanner .right {
    display: inline-block;
    width: 80%;
    float: right;
  }
  /* line 492, ../scss/_xsml.scss */
  #conceptBanner .right .bannerTextContainer {
    display: table;
    height: 81px;
  }
  /* line 495, ../scss/_xsml.scss */
  #conceptBanner .right .bannerTextContainer .bannerText {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    line-height: 1.8;
    letter-spacing: 0px;
    padding: 0px;
  }

  /* line 507, ../scss/_xsml.scss */
  #successBanner {
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    height: 81px;
  }
  /* line 519, ../scss/_xsml.scss */
  #successBanner .close {
    display: none;
  }
  /* line 522, ../scss/_xsml.scss */
  #successBanner i {
    font-size: 34px;
  }

  /* line 527, ../scss/_xsml.scss */
  #errorBanner {
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    height: 81px;
  }
  /* line 539, ../scss/_xsml.scss */
  #errorBanner .close {
    display: none;
  }
  /* line 542, ../scss/_xsml.scss */
  #errorBanner i {
    font-size: 34px;
  }

  /* line 548, ../scss/_xsml.scss */
  .blocklyTreeRow.last {
    display: block;
  }

  /* line 554, ../scss/_xsml.scss */
  #resetButton {
    margin: 10px auto;
  }
  /* line 556, ../scss/_xsml.scss */
  #resetButton.open {
    margin-right: 10px;
  }

  /* line 561, ../scss/_xsml.scss */
  #mobile-flyout {
    bottom: 17px;
  }

  /* line 565, ../scss/_xsml.scss */
  #footer {
    display: none;
  }

  /* line 569, ../scss/_xsml.scss */
  .menu-container {
    display: none;
  }

  /* line 573, ../scss/_xsml.scss */
  .close-button-dialog {
    display: block;
    position: absolute;
    height: 40px;
    width: 40px;
    float: right;
    top: 40px;
    right: 7px;
  }
  /* line 581, ../scss/_xsml.scss */
  .close-button-dialog:before {
    top: 20px;
    width: 25px;
    height: 2px;
    position: absolute;
    content: "";
    left: 8px;
    background: white;
    -moz-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
    -ms-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
    transform: rotateZ(45deg) scaleX(1) scaleY(1) scaleZ(1);
    -moz-transform-origin: 50% 50% 0 50%;
    -ms-transform-origin: 50% 50% 0 50%;
    -webkit-transform-origin: 50% 50% 0 50%;
    transform-origin: 50% 50% 0 50%;
  }
  /* line 592, ../scss/_xsml.scss */
  .close-button-dialog:after {
    top: 20px;
    width: 25px;
    height: 2px;
    position: absolute;
    content: "";
    cursor: default;
    opacity: 1;
    left: 8px;
    margin: 0;
    padding: 0;
    background: white;
    -moz-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    -ms-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
  }
}
@media (max-width: 650px) and (max-width: 500px) {
  /* line 610, ../scss/_xsml.scss */
  #dialogProjectDone .img {
    height: 310px;
  }
}
@media (max-width: 650px) and (max-width: 320px) {
  /* line 618, ../scss/_xsml.scss */
  #mobile-flyout.open {
    left: 199px;
  }
}
@media (orientation: landscape) and (max-device-width: 1024px) {
  /* line 51, ../scss/screen.scss */
  #landscape-mode-error {
    display: table;
    text-align: center;
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    height: 100%;
    width: 100%;
  }
  /* line 63, ../scss/screen.scss */
  #landscape-mode-error .inner {
    display: table-cell;
    vertical-align: middle;
    background: white;
    height: 100%;
    width: 100%;
  }

  /* line 72, ../scss/screen.scss */
  .landscape-disabled #landscape-mode-error {
    display: none;
  }
}
/* line 78, ../scss/screen.scss */
#preloader {
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #381e39;
  opacity: 0.9;
  z-index: 12;
}

/* line 89, ../scss/screen.scss */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  width: 80px;
  height: 80px;
  border: 10px solid #751c70;
  border-radius: 50%;
}

/* line 100, ../scss/screen.scss */
.loader:after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border: solid 10px;
  border-color: #d864a6 transparent transparent transparent;
  border-radius: 100%;
  top: -10px;
  left: -10px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* line 128, ../scss/screen.scss */
#preloader > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  margin-top: 80px;
  margin-left: -40px;
  font-size: 14px;
  font-family: 'Exo', sans-serif;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

/* line 143, ../scss/screen.scss */
#dialog {
  transition: opacity 0.2s 0.1s;
}