@charset "UTF-8";
/**
 * Typecsset
 *
 * Typecsset is a small, unopinionated library for creating beautifully set type
 * on the web. Typecsset gives perfect vertical rhythm at any configurable font
 * size, as well as many other typographical niceties.
 */
/*------------------------------------*\
    #SHARED
\*------------------------------------*/
/**
 * A lot of elements in Typecsset need to share some declarations (mainly for
 * vertical rhythm), so we `@extend` some silent classes.
 */
h1, h2, h3, h4, h5, h6, ul, ol, dd, p, address, pre, blockquote, table {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, ul, ol, dd, p, address, pre, blockquote, table {
  margin-bottom: 30px;
  margin-bottom: 1.57895rem;
}

/*------------------------------------*\
    #BASE
\*------------------------------------*/
/**
 * 1. Set the base element’s `font-size` to the value of your choosing. Set in
 *    ems, assuming a browser default of 16px.
 * 2. Work out the unitless `line-height` for your project based around your
 *    desired `line-height` (defined previously in pixels), and your project’s
 *    base font size.
 */
/**
 * 3. If you have chosen to display a baseline grid, we turn it on here.
 */
html {
  font-size: 1.1875em;
  /* [1] */
  line-height: 1.57895;
  /* [2] */
  background-image: url(http://basehold.it/i/30);
  /* [3] */
}

body {
  margin: 0;
}

/*------------------------------------*\
    #HEADINGS
\*------------------------------------*/
h1 {
  font-size: 48px;
  font-size: 2.52632rem;
  line-height: 1.25;
}

h2 {
  font-size: 36px;
  font-size: 1.89474rem;
  line-height: 1.66667;
}

h3 {
  font-size: 30px;
  font-size: 1.57895rem;
  line-height: 1;
}

h4 {
  font-size: 24px;
  font-size: 1.26316rem;
  line-height: 1.25;
}

h5 {
  font-size: 20px;
  font-size: 1.05263rem;
  line-height: 1.5;
}

h6 {
  font-size: 20px;
  font-size: 1.05263rem;
  line-height: 1.5;
}

/*------------------------------------*\
    #LISTS
\*------------------------------------*/
ul, ol, dd {
  margin-left: 60px;
  margin-left: 3.15789rem;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

/*------------------------------------*\
    #PARAGRAPHS
\*------------------------------------*/
/**
 * Not strictly a paragraph, but probably doesn’t need its own section.
 */
/*------------------------------------*\
    #CODE
\*------------------------------------*/
/**
 * 1. Fix an odd quirk whereby, without this, code blocks are rendered at a
 *    font-size smaller than 1em.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* [1] */
}

/*------------------------------------*\
    #QUOTES
\*------------------------------------*/
/**
 * 1. Hang the opening quote of the blockquote.
 */
blockquote {
  text-indent: -0.41em;
  /* [1] */
}

/**
 * Set up quote marks on quoting elements. This is very English-based, so we are
 * using “, ”, ‘, and ’ quotes.
 */
blockquote {
  quotes: "“" "”";
  margin-left: 60px;
  margin-left: 3.15789rem;
}
blockquote p:before {
  content: "“";
  content: open-quote;
}
blockquote p:after {
  content: "";
  content: no-close-quote;
}
blockquote p:last-of-type:after {
  content: "”";
  content: close-quote;
}

q {
  quotes: "‘" "’" "“" "”";
  /**
   * If an element opens with an inline quote, let’s hang that.
   */
}
q:before {
  content: "‘";
  content: open-quote;
}
q:after {
  content: "’";
  content: close-quote;
}
q q:before {
  content: "“";
  content: open-quote;
}
q q:after {
  content: "”";
  content: close-quote;
}
q:first-child {
  display: inline-block;
  text-indent: -0.22em;
}

/*------------------------------------*\
    #TABLES
\*------------------------------------*/
/**
 * Crude table styles; tables are very difficult to keep on the baseline.
 */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 15px;
}

@font-face {
  font-family: 'VAGbold';
  src: url("../fonts/vagrounded-bold-webfont.eot");
  src: url("../fonts/vagrounded-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/vagrounded-bold-webfont.woff") format("woff"), url("../fonts/vagrounded-bold-webfont.ttf") format("truetype"), url("../fonts/vagrounded-bold-webfont.svg#VAGRoundedBoldRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Comic Neue';
  src: url("../fonts/ComicNeue-Regular.eot");
  src: url("../fonts/ComicNeue-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/ComicNeue-Regular.woff") format("woff"), url("../fonts/ComicNeue-Regular.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: 'Comic Neue';
  src: url("../fonts/ComicNeue-Regular-Oblique.eot");
  src: url("../fonts/ComicNeue-Regular-Oblique.eot?#iefix") format("embedded-opentype"), url("../fonts/ComicNeue-Regular-Oblique.woff") format("woff"), url("../fonts/ComicNeue-Regular-Oblique.ttf") format("truetype");
  font-weight: 300;
  font-style: oblique;
}
@font-face {
  font-family: 'Comic Neue';
  src: url("../fonts/ComicNeue-Bold.eot");
  src: url("../fonts/ComicNeue-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ComicNeue-Bold.woff") format("woff"), url("../fonts/ComicNeue-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: 'Comic Neue';
  src: url("../fonts/ComicNeue-Bold-Oblique.eot");
  src: url("../fonts/ComicNeue-Bold-Oblique.eot?#iefix") format("embedded-opentype"), url("../fonts/ComicNeue-Bold-Oblique.woff") format("woff"), url("../fonts/ComicNeue-Bold-Oblique.ttf") format("truetype");
  font-weight: 700;
  font-style: oblique;
}
@font-face {
  font-family: 'Consolas';
  src: url("../fonts/Consolas.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.reset, figure {
  margin: 0;
  padding: 0;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-success {
  color: #29c76c;
}

.text-warning {
  color: #f5a200;
}

.text-danger {
  color: #ed6751;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.invisible {
  visibility: hidden;
}

.vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.border-less {
  border: none !important;
  border-radius: 0 !important;
}

.rtl {
  direction: rtl;
}

article:before, div:before, dl:before, fieldset:before, footer:before, form:before, header:before, main:before, ol:before, section:before, nav:before, ul:before, .header:before, .breadcrumbs-list:before, .files-item:before, .index-list:before, .projects-list:before, article:after, div:after, dl:after, fieldset:after, footer:after, form:after, header:after, main:after, ol:after, section:after, nav:after, ul:after, .header:after, .breadcrumbs-list:after, .files-item:after, .index-list:after, .projects-list:after {
  content: '';
  display: table;
}
article:after, div:after, dl:after, fieldset:after, footer:after, form:after, header:after, main:after, ol:after, section:after, nav:after, ul:after, .header:after, .breadcrumbs-list:after, .files-item:after, .index-list:after, .projects-list:after {
  clear: both;
}

body {
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  background: #f8faf4;
  border-top: 7px solid rgba(52, 153, 70, 0.2);
  min-height: 100%;
  padding: 0 10px;
}
html.world {
  border-top-color: rgba(52, 119, 209, 0.2);
}

body {
  color: #111;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  font-feature-settings: "kern";
  font-weight: 300;
  margin: 0 auto;
  padding: 1em 0 2em;
  max-width: 800px;
  min-height: 100%;
  min-width: 300px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: #349946;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
a:active, a:focus, a:hover {
  color: #277335;
  text-decoration: underline;
}
a:visited {
  color: #349946;
  text-decoration: none;
}
.world a {
  color: #3477d1;
}
.world a:active, .world a:focus, .world a:hover {
  color: #275fab;
}
.world a:visited {
  color: #3477d1;
}
.text-success a, a.text-success {
  color: #29c76c;
}
.text-success a:active, .text-success a:focus, .text-success a:hover, .text-success a:visited, a.text-success:active, a.text-success:focus, a.text-success:hover, a.text-success:visited {
  color: #49da87;
}
.text-warning a, a.text-warning {
  color: #f5a200;
}
.text-warning a:active, .text-warning a:focus, .text-warning a:hover, .text-warning a:visited, a.text-warning:active, a.text-warning:focus, a.text-warning:hover, a.text-warning:visited {
  color: #ffb729;
}
.text-danger a, a.text-danger {
  color: #ed6751;
}
.text-danger a:active, .text-danger a:focus, .text-danger a:hover, .text-danger a:visited, a.text-danger:active, a.text-danger:focus, a.text-danger:hover, a.text-danger:visited {
  color: #f28f7f;
}

address {
  font-style: normal;
}

b {
  color: #111;
  font-weight: 500;
}

blockquote {
  margin: 0;
}

button {
  border: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

cite {
  display: block;
}

code {
  background: #d7d7d7;
  border-radius: 0.25em;
  color: #111;
  font-family: Consolas, monaco, monospace;
  font-size: 0.8em;
  padding: 0 0.5em;
}
code.blockblue {
  background: rgba(52, 119, 209, 0.5);
}
code.blockorange {
  background: rgba(245, 162, 0, 0.5);
}
code.blockyellow {
  background: rgba(245, 162, 0, 0.25);
}
code.blockpurple {
  background: rgba(155, 89, 182, 0.25);
}
code.blockmotion {
  background: #505FD7;
}
code.blocklooks {
  background: #9B33D9;
}
code.blocksound {
  background: #D000C2;
}
code.blockpen {
  background: #00A16F;
}
code.blockdata {
  background: #FF7500;
}
code.blockevents {
  background: #D38117;
}
code.blockcontrol {
  background: #E9AA00;
}
code.blocksensing {
  background: #00A3E6;
}
code.blockoperators {
  background: #00C114;
}
code.blockmoreblocks {
  background: #71009A;
}
code.blockmotion, code.blocklooks, code.blocksound, code.blockpen, code.blockdata, code.blockevents, code.blockcontrol, code.blocksensing, code.blockoperators, code.blockmoreblocks {
  color: #fff;
}

pre {
  background: #d7d7d7;
  border: 1px solid #bebebe;
  border-radius: 0.5em;
  display: block;
  padding: 1em;
  margin: 0 0 1em;
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre code {
  background-color: transparent;
  padding: 0;
  border: none;
}

em {
  font-style: italic;
}

figure {
  display: block;
  margin-bottom: 30px;
  margin-bottom: 1.57895rem;
}
figure img {
  display: block;
  max-width: 100%;
  width: 100%;
}

h1, .h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 48px;
  font-weight: 500;
}

h2, .h2, .index-title, .title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: 500;
}

h3, .h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 500;
}

h4, .h4 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
}

h5, .h5 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
}

h6, .h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
}

html[lang="en-GB"] h1, html[lang="en-GB"] .h1 {
  font-family: VAGbold, sans-serif;
  font-weight: 300;
}
html[lang="en-GB"] h2, html[lang="en-GB"] .h2, html[lang="en-GB"] .index-title, html[lang="en-GB"] .title {
  font-family: VAGbold, sans-serif;
  font-weight: 300;
}
html[lang="en-GB"] h3, html[lang="en-GB"] .h3 {
  font-family: VAGbold, sans-serif;
  font-weight: 300;
}
html[lang="en-GB"] h4, html[lang="en-GB"] .h4 {
  font-family: VAGbold, sans-serif;
  font-weight: 300;
}
html[lang="en-GB"] h5, html[lang="en-GB"] .h5 {
  font-family: VAGbold, sans-serif;
  font-weight: 300;
}
html[lang="en-GB"] h6, html[lang="en-GB"] .h6 {
  font-family: VAGbold, sans-serif;
  font-weight: 300;
}

i {
  font-style: italic;
}

input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

kbd {
  background: #d7d7d7;
  border-radius: 0.25em;
  color: #111;
  font-family: Consolas, monaco, monospace;
  font-size: 0.8em;
  padding: 0 0.5em;
}

label {
  margin: 0;
}

ol li {
  list-style: decimal;
}
ol li p {
  margin-bottom: 1em;
}
ol ol, ol ul {
  margin-bottom: 0;
}
ol ol li, ol ul li {
  font-size: 1em;
}

p, .p {
  margin-bottom: 1em;
}
p.lead, .p.lead {
  color: #111;
  font-size: 22px;
}
p.full, .p.full {
  max-width: none;
}

select {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

strong {
  color: #111;
  font-weight: 500;
}

table {
  border-collapse: collapse;
}

textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

time {
  display: inline-block;
  font-size: 14px;
}

ul li {
  list-style: disc;
}
ul li p {
  margin-bottom: 1em;
}
ul ol, ul ul {
  margin-bottom: 0;
}
ul ol li, ul ul li {
  font-size: 1em;
}

.breadcrumbs {
  background: rgba(52, 153, 70, 0.05);
  border-radius: 15px;
  margin: 0 0 1em;
}
.world .breadcrumbs {
  background: rgba(52, 119, 209, 0.05);
}

.header {
  margin-bottom: 1em;
  position: relative;
}

.beta {
  background: rgba(249, 251, 167, 0.25);
  border: 2px dashed #E79124;
  border-radius: 15px;
  margin-bottom: 1em;
  padding: 0.5em;
}
.beta p {
  font-size: 0.8em;
  margin: 0;
  max-width: none;
}

.breadcrumbs-list {
  font-size: 0.9em;
  margin: 0;
  padding: 0 1em;
}

.breadcrumbs-item {
  float: left;
  line-height: 2;
  list-style: none;
}
.breadcrumbs-item:before {
  content: '\00A0/\00A0';
}
.breadcrumbs-item:first-child:before {
  content: '';
}

.files-list {
  background: #fff;
  border-radius: 0.4em;
  margin: 0.25em 0;
  padding: 0.5em 0;
  text-indent: 0;
}
.files-list:last-child {
  margin-bottom: 0;
}

.files-item {
  border-top: 1px dotted rgba(52, 153, 70, 0.25);
  color: #349946;
  list-style: none;
  margin: 0;
  padding: 0 0.75em;
}
.files-item:first-child {
  border: none;
}
.files-item:hover {
  background: rgba(52, 153, 70, 0.05);
}
.files-item.materials {
  text-align: center;
}
.files-item.materials:hover {
  background: none;
}
.world .files-item.materials:hover {
  background: none;
}
.world .files-item {
  border-top-color: rgba(52, 119, 209, 0.25);
  color: #3477d1;
}
.world .files-item:hover {
  background: rgba(52, 119, 209, 0.05);
}
@media screen and (min-width: 501px) {
  .files-item span {
    display: none;
  }
}

@media screen and (min-width: 501px) {
  .files-link.pdf {
    float: right;
  }
}
.files-link.materials {
  border: 2px solid rgba(52, 153, 70, 0.5);
  border-radius: 0.5em;
  color: #349946;
  display: inline-block;
  float: none;
  line-height: 2em;
  margin: 1em auto 0.5em;
  padding: 0 1em;
}
.files-link.materials:hover {
  background: rgba(52, 153, 70, 0.5);
  color: #fff;
  text-decoration: none;
}
.world .files-link.materials {
  border-color: rgba(52, 119, 209, 0.5);
  color: #3477d1;
}
.world .files-link.materials:hover {
  background: rgba(52, 119, 209, 0.5);
  color: #fff;
}

.home-link {
  border-radius: 50px;
  display: block;
  height: 100px;
  margin: 0 auto 1em;
  width: 100px;
}
.world .home-link {
  width: 161px;
}

.index-list {
  margin: 0 0 1em;
}

.index-item {
  list-style: none;
  margin: 0 0 0.5em;
}
@media screen and (min-width: 501px) {
  .index-item {
    width: 50%;
  }
}

.index-link {
  background: #349946;
  border-radius: 0.25em;
  color: #fff;
  display: block;
  padding: 0 0.5em;
}
.index-link:hover, .index-link:visited {
  color: #fff;
  text-decoration: none;
}
.index-link:hover {
  background: #277335;
}
.world .index-link {
  background: #3477d1;
  color: #fff;
}
.world .index-link:hover, .world .index-link:visited {
  color: #fff;
}
.world .index-link:hover {
  background: #275fab;
}

.index-title {
  margin-bottom: 0.5em;
}

.index-warning {
  background: #F2DEDE;
  border-radius: 0.5em;
  font-size: 80%;
  padding: 0.5em 1em;
}

.legal-notice {
  background: rgba(52, 153, 70, 0.05);
  border: 1px dashed #349946;
  border-radius: 15px;
  margin-bottom: 1em;
  padding: 0.5em;
}
.legal-notice p {
  font-size: 0.65em;
  margin: 0;
  max-width: none;
}
.world .legal-notice {
  background: rgba(52, 119, 209, 0.05);
  border-color: #3477d1;
}

#legend {
  display: none;
}

html[lang="en-GB"] .lesson-steps em, html[lang="en-GB"] .lesson-steps i, html[lang="en-GB"] .lesson-steps li, html[lang="en-GB"] .lesson-steps p {
  font-family: "Comic Neue", "Comic Sans", sans-serif;
  font-weight: 500;
}
html[lang="en-GB"] .lesson-steps b, html[lang="en-GB"] .lesson-steps strong {
  font-family: "Comic Neue", "Comic Sans", sans-serif;
  font-weight: 700;
}
html[lang="en-GB"] .lesson-steps h1 b, html[lang="en-GB"] .lesson-steps h1 strong, html[lang="en-GB"] .lesson-steps h2 b, html[lang="en-GB"] .lesson-steps h2 strong {
  font-family: VAGbold, sans-serif;
}
.lesson-steps h1 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}
.lesson-steps h2 {
  font-size: 1.3em;
  margin-bottom: 0.5em;
}
.lesson-steps section {
  margin-bottom: 1.5em;
}
.lesson-steps section.intro {
  border-bottom: 3px dotted #f5a200;
}
.lesson-steps ol {
  margin-left: 1.5em;
}
.lesson-steps ol > li {
  list-style: disc;
}
.lesson-steps ol > li:before {
  display: none;
}
.lesson-steps ul {
  margin-left: 1.5em;
}
.lesson-steps ul > li {
  list-style: none;
  position: relative;
}
.lesson-steps ul > li:before {
  background: rgba(52, 119, 209, 0.1);
  border: 0.15em solid #3477d1;
  border-radius: 0.25em;
  content: ' ';
  cursor: pointer;
  display: block;
  left: -1.3em;
  position: absolute;
  top: 0.2em;
  height: 1em;
  width: 1em;
}
.lesson-steps ul > li img {
  border: none;
  max-width: 100%;
}
.lesson-steps ul > li img:before {
  content: ' ';
  display: block;
}
.lesson-steps ul > li img.inline {
  display: inline !important;
  margin: 0;
  vertical-align: top;
}
.lesson-steps ul > li img.inline:before {
  display: none;
}
.lesson-steps ul > li.activity-done {
  font-style: italic;
  text-decoration: line-through;
}
.lesson-steps ul > li.activity-done:before {
  background: #3477d1;
}
.lesson-steps ul > li ul li {
  list-style: disc;
}
.lesson-steps ul > li ul li:before {
  display: none;
}
.lesson-steps img {
  display: block;
  margin: 0 auto 1em auto;
  max-width: 100%;
}
.lesson-steps pre {
  line-height: 1.25;
  margin: 0 0 2em !important;
}
.lesson-steps pre code {
  background: none;
  padding: 0 !important;
  text-indent: 0;
}
.lesson-steps ul > pre {
  margin-top: 1.25em;
}

.level-indicator {
  background: #349946;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 0.9em;
  line-height: 30px;
  padding: 0 0.5em;
  position: absolute;
  right: 0;
  top: 70px;
}
.world .level-indicator {
  background: #3477d1;
}

.projects-list {
  margin: 0 0 1em;
}

.projects-item {
  background: #349946;
  border-radius: 0.5em;
  color: #fff;
  list-style: none;
  margin: 0 0 1em;
  padding: 0.25em;
}
.world .projects-item {
  background: #3477d1;
}

.projects-title {
  display: block;
  line-height: 2;
  margin-left: 0.75em;
}

.projects-level {
  white-space: nowrap;
}
.projects-level:before {
  content: ' \2014  ';
}
@media screen and (min-width: 501px) {
  .projects-level {
    float: right;
    padding-right: 0.65em;
  }
  .projects-level:before {
    content: '';
  }
}

.registration-note {
  background: rgba(52, 153, 70, 0.05);
  border: 1px dashed #349946;
  border-radius: 15px;
  margin-bottom: 1em;
  padding: 0.5em;
}
.registration-note p {
  font-size: 0.8em;
  margin: 0;
  max-width: none;
}
.world .registration-note {
  background: rgba(52, 119, 209, 0.05);
  border-color: #3477d1;
}

.title {
  background: rgba(52, 153, 70, 0.15);
  border-radius: 1.5em;
  line-height: 50px;
  margin: 0;
  text-align: center;
}
.world .title {
  background: rgba(52, 119, 209, 0.15);
}

.challenge {
  background: rgba(52, 119, 209, 0.1);
  border: 1px dotted #3477d1;
  border-radius: 0.5em;
  overflow: none;
  padding: 0.5em 1em 1em;
}
.challenge h2 {
  background-size: 1em auto;
  color: #3477d1;
}
.challenge p {
  margin-bottom: 0.75em;
}
.challenge ul {
  margin: 0;
}
.challenge > ul {
  margin-left: 1.5em;
}

.check h2 {
  background: url("../img/check.png") left center no-repeat;
  background-size: 1em auto;
  color: #f5a200;
  padding-left: 1.2em;
}

.flag {
  background: rgba(52, 153, 70, 0.1);
  border: 1px dotted #349946;
  border-radius: 0.5em;
  overflow: none;
  padding: 0.5em 1em 1em;
}
.flag h2 {
  background: url("../img/flag.png") left center no-repeat;
  background-size: 1em auto;
  color: #349946;
  padding-left: 1.2em;
}
.flag p {
  margin-bottom: 0.75em;
}
.flag ul {
  margin: 0 0 0 1.5em;
}
.flag li:before {
  background: rgba(52, 153, 70, 0.15);
  border-color: #349946;
}

.footnotes {
  background: rgba(52, 153, 70, 0.05);
  border-radius: 0.5em;
  padding: 1em 1.5em;
}
.footnotes hr {
  display: none;
}
.footnotes ol:before {
  content: "Footnotes";
  display: block;
  font-family: VAGbold, sans-serif;
  font-size: 1.3em;
  font-weight: 300;
  line-height: 0;
  margin-bottom: 2.5em;
  position: relative;
  top: 1.5em;
}

.save h2 {
  background: #3477d1;
  border-radius: 0.25em;
  color: #fff;
  margin-bottom: 1.5em;
  overflow: none;
  text-align: center;
  text-transform: uppercase;
}

.scratch-preview {
  margin: 0 0 2em;
  text-align: center;
}
.scratch-preview img {
  display: none;
}

.trinket {
  padding-bottom: 10px;
}

.try {
  background: rgba(52, 119, 209, 0.1);
  border: 1px dotted #3477d1;
  border-radius: 0.5em;
  overflow: none;
  padding: 0.5em 1em 1em;
}
.try h2 {
  background-size: 1em auto;
  color: #3477d1;
}
.try p {
  margin-bottom: 0.75em;
}
.try ul {
  margin: 0 0 0 1.5em;
}

@media print {
  html {
    background: #fff;
    border: none;
  }

  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    max-width: 100%;
    width: 100%;
  }

  a {
    color: #111 !important;
  }

  h1, .h1 {
    font-family: VAGbold, sans-serif;
  }

  .level1.activity > h1 {
      page-break-before: always;
  }

  h2, .h2 {
    font-family: VAGbold, sans-serif;
  }

  h3, .h3 {
    font-family: VAGbold, sans-serif;
  }

  h4, .h4 {
    font-family: VAGbold, sans-serif;
  }

  h5, .h5 {
    font-family: VAGbold, sans-serif;
  }

  h6, .h6 {
    font-family: VAGbold, sans-serif;
  }

  .breadcrumbs {
    display: none;
  }

  .legal-notice {
    display: none;
    padding: 1em 0 0;
  }
  .legal-notice.copyright {
    background: none;
    border: none;
    border-top: 1px solid #777;
    border-radius: 0;
    display: block;
  }

  .lesson-steps section {
    page-break-inside: avoid;
  }

  .scratch-preview iframe {
    display: none;
  }
  .scratch-preview img {
    display: block;
  }

  .level-indicator {
    border-radius: 15px;
    right: 0;
    top: 0;
  }
}