/* Coolors Exported Palette - coolors.co/694486-dabfff-907ad6-2c2a4a-7fdeff */
* {
  box-sizing: border-box; }

img {
  max-width: 100%;
  height: auto; }

/* font scale and mappy breakpoints */
html {
  font-size: 100%;
  line-height: 1.6; }
  @media all and (min-width: 450px) {
    html {
      font-size: 112.5%;
      line-height: 1.6; } }
  @media all and (min-width: 1200px) {
    html {
      font-size: 125%;
      line-height: 1.8; } }

body {
  margin: 0;
  padding: 0;
  font-family: Raleway, sans-serif;
  color: #2c2a4a;
  background-color: white; }

h1, h2, h3 {
  font-family: Baloo, sans-serif;
  margin: .2em 0; }

h1 {
  font-weight: 400;
  font-size: 3.157rem;
  line-height: 1.1;
  letter-spacing: -0.01em; }

h2 {
  font-weight: 400;
  font-size: 2.369rem;
  line-height: 1.2; }

h3 {
  font-size: 1.777rem;
  line-height: 1.2;
  font-weight: 200; }

h4 {
  font-size: 1.333rem;
  line-height: 1.2;
  font-weight: bold; }

h5 {
  font-size: 1.333rem;
  line-height: 1.2;
  font-weight: normal;
  font-style: italic; }

p {
  font-weight: 500;
  margin-bottom: 36px; }

a {
  color: #694486;
  text-decoration-skip: ink; }

a:hover {
  color: #907ad6; }

a:focus {
  color: #000;
  background-color: #7fdeff;
  outline: 1px solid #4cd1ff; }

.section-header {
  display: grid;
  grid-gap: .6em;
  grid-template-columns: 1fr auto 1fr;
  margin: 1em 0 1em 0; }

.section-header::before {
  content: "";
  border-bottom: 1px solid #ccf2ff;
  align-self: center; }

.section-header::after {
  content: "";
  border-bottom: 1px solid #ccf2ff;
  align-self: center; }

blockquote {
  margin: 0 0 2em 0;
  padding-left: 1em;
  border-left: 5px solid #e5f8ff; }

blockquote:nth-child(even) {
  border-left: 5px solid #d1c8ee; }

blockquote .cite {
  font-size: 0.75rem; }

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

.book-feature {
  display: grid;
  grid-gap: 20px; }
  @media all and (min-width: 53.125em) {
    .book-feature {
      grid-template-columns: 1fr minmax(150px, 300px);
      grid-template-rows: minmax(231px, auto); } }

.book-feature img {
  display: block;
  border: 1px solid #ececec; }

.book-feature .book-nav {
  margin: 0 0 1em 0;
  padding: 0;
  list-style: none; }

.book-feature .book-nav li:last-child {
  font-weight: bold; }

.book-feature .book-nav a:link {
  text-decoration: none; }

.book-feature .book-image {
  background-size: cover; }
  @media all and (min-width: 53.125em) {
    .book-feature .book-image {
      align-self: stretch;
      justify-self: stretch;
      grid-column: 2;
      grid-row: 1; } }

.book-feature .book-content {
  display: flex;
  flex-direction: column; }
  @media all and (min-width: 53.125em) {
    .book-feature .book-content {
      grid-column: 1;
      grid-row: 1;
      padding: 20px; } }

.book-content .meta {
  font-size: 0.75rem;
  margin: 0;
  padding: 0;
  margin-top: auto; }

.box-feature {
  display: grid;
  grid-gap: 20px; }
  @media all and (min-width: 53.125em) {
    .box-feature {
      grid-template-columns: repeat(6, 1fr); } }

.box-feature .box-image {
  background-size: cover; }
  @media all and (min-width: 53.125em) {
    .box-feature .box-image {
      align-self: stretch;
      justify-self: stretch;
      grid-column: 1 / -1;
      grid-row: 1 / 4; } }

@media all and (min-width: 53.125em) {
  .box-feature .box-feature-title {
    grid-column: 2 / -1;
    grid-row: 1;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    align-self: start;
    padding: 20px; } }

@media all and (min-width: 75em) {
  .box-feature .box-feature-title {
    grid-column: 3 / -1; } }

@media all and (min-width: 53.125em) {
  .box-feature .box-content {
    grid-column: 2 / -1;
    grid-row: 2;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 20px; } }

@media all and (min-width: 53.125em) {
  .box-feature a:link,
  .box-feature a:visited {
    color: #fff; } }

.box-newer {
  padding: 20px; }

.box-newer.box-media {
  border: 1px dotted #7fdeff;
  background-color: transparent; }

.box-newer .icon-head {
  display: flex;
  flex-wrap: wrap; }

.box-newer .icon-head img {
  flex: 0 1 auto;
  margin: 0 20px 0 0; }

.box-newer .icon-head .title {
  flex: 1; }

.box-newer.box-media, .box-newer.box-media:nth-child(2n+1) {
  border: 1px dotted #7fdeff;
  background-color: transparent; }

.box-newer:nth-child(2n+1) {
  background-color: #7fdeff; }

.box-newer a:link, .box-newer a:visited {
  text-decoration-skip: ink; }

.box-newer:nth-child(2n+1) a:link,
.box-newer:nth-child(2n+1) a:visited {
  color: #000; }

.box-newer:nth-child(2n+1) a:focus {
  background-color: rgba(255, 255, 255, 0.7); }

.box-newer:nth-child(2n+1) a:focus {
  color: #000; }

.box-older {
  padding: 20px;
  font-size: 0.75rem; }

.box-older h3 {
  font-size: 1.333rem;
  line-height: 1.2; }

.box-older a:link, .box-older a:visited {
  text-decoration-skip: ink; }

.box-speaking {
  border: 1px dotted #dabfff;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column; }

.box-speaking header {
  display: flex;
  padding: 20px; }

.when {
  font-size: 0.75rem; }

.box-speaking h3 {
  margin: 0; }

.box-speaking a {
  text-decoration: none;
  color: #2c2a4a; }

.box-speaking header:before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  height: 60px;
  width: 60px;
  border-radius: 5px;
  flex: 0 0 60px;
  margin-right: 20px; }

.box-speaking .description {
  padding: 0 20px; }

.box-speaking header:before {
  transform: rotate(-5deg); }

.box-speaking.flag-gb header:before {
  background-image: url(/assets/img/icons/flags/gb.svg); }

.box-speaking.flag-gb-sct header:before {
  background-image: url(/assets/img/icons/flags/gb-sct.svg); }

.box-speaking.flag-at header:before {
  background-image: url(/images/icons/flags/at.svg); }

.box-speaking.flag-au header:before {
  background-image: url(/images/icons/flags/au.svg); }

.box-speaking.flag-be header:before {
  background-image: url(/images/icons/flags/be.svg); }

.box-speaking.flag-ca header:before {
  background-image: url(/images/icons/flags/ca.svg); }

.box-speaking.flag-ch header:before {
  background-image: url(/images/icons/flags/ch.svg); }

.box-speaking.flag-cz header:before {
  background-image: url(/images/icons/flags/cz.svg); }

.box-speaking.flag-de header:before {
  background-image: url(/images/icons/flags/de.svg); }

.box-speaking.flag-dk header:before {
  background-image: url(/images/icons/flags/dk.svg); }

.box-speaking.flag-es header:before {
  background-image: url(/images/icons/flags/es.svg); }

.box-speaking.flag-fr header:before {
  background-image: url(/images/icons/flags/fr.svg); }

.box-speaking.flag-gr header:before {
  background-image: url(/images/icons/flags/gr.svg); }

.box-speaking.flag-hu header:before {
  background-image: url(/images/icons/flags/hu.svg); }

.box-speaking.flag-hk header:before {
  background-image: url(/images/icons/flags/hk.svg); }

.box-speaking.flag-ie header:before {
  background-image: url(/images/icons/flags/ie.svg); }

.box-speaking.flag-it header:before {
  background-image: url(/images/icons/flags/it.svg); }

.box-speaking.flag-lt header:before {
  background-image: url(/images/icons/flags/lt.svg); }

.box-speaking.flag-nl header:before {
  background-image: url(/images/icons/flags/nl.svg); }

.box-speaking.flag-no header:before {
  background-image: url(/images/icons/flags/no.svg); }

.box-speaking.flag-po header:before {
  background-image: url(/images/icons/flags/po.svg); }

.box-speaking.flag-pl header:before {
  background-image: url(/images/icons/flags/pl.svg); }

.box-speaking.flag-pt header:before {
  background-image: url(/images/icons/flags/pt.svg); }

.box-speaking.flag-ro header:before {
  background-image: url(/images/icons/flags/ro.svg); }

.box-speaking.flag-sg header:before {
  background-image: url(/images/icons/flags/sg.svg); }

.box-speaking.flag-se header:before {
  background-image: url(/images/icons/flags/se.svg); }

.box-speaking.flag-us header:before {
  background-image: url(/images/icons/flags/us.svg); }

.box-speaking.flag-jp header:before {
  background-image: url(/images/icons/flags/jp.svg); }

.box-speaking.flag-hr header:before {
  background-image: url(/images/icons/flags/hr.svg); }

.box-speaking.flag-online header:before {
  background-image: url(/images/icons/flags/online.svg); }

.box-title {
  background-color: #694486;
  color: #fff;
  padding: 20px;
  align-self: flex-start; }

.promo {
  padding: 20px; }

.promo-a {
  background-color: #694486;
  color: #fff; }

.promo-b {
  background-color: #e6dced; }

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

.promo .cta a:link,
.promo .cta a:visited {
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  padding: 5px 20px;
  background-color: #7fdeff;
  color: #2c2a4a; }

.promo .cta a:hover {
  background-color: #19c4ff;
  transition: background-color .6s;
  -webkit-transition: background-color .6s; }

.promo.promo-a .cta a:link,
.promo.promo-a .cta a:visited,
.promo.promo-b .cta a:link,
.promo.promo-b .cta a:visited {
  background-color: #fff;
  color: #2c2a4a; }

.promo.promo-a .cta a:hover,
.promo.promo-b .cta a:hover {
  background-color: #9c76ba;
  color: #fff;
  transition: background-color .6s, color .3s;
  -webkit-transition: background-color .6s, color .3s; }

.promo-perch,
.promo-runway {
  border: 1px dotted #7fdeff;
  background-repeat: no-repeat;
  background-position: 20px bottom;
  padding-left: 100px; }

.promo-perch {
  background-image: url(/assets/img/burd1.png);
  background-size: 62px 67px; }

@media all and (min-width: 40em) and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
  .promo-perch {
    background-image: url(/assets/img/burd1@2x.png);
    background-size: 62px 67px; } }

.header-boxset {
  margin: 0 0 40px 0; }

.header-boxset img {
  object-fit: contain; }

.boxset-me p {
  font-size: 0.75rem; }

.boxset-me ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr; }

.boxset-me a {
  text-decoration: none;
  font-size: 0.75rem;
  border-radius: 3px;
  display: flex;
  padding: .5rem;
  align-items: center;
  transition: all .3s ease-out; }

.boxset-me svg {
  fill: currentColor;
  margin-right: 10px;
  width: 30px; }

.me-twitter a {
  border: 1px solid #1DA1F2;
  color: #1DA1F2; }

.me-twitter a:hover {
  background-color: #1DA1F2;
  color: #fff; }

.me-linkedin a {
  border: 1px solid #0077B5;
  color: #0077B5; }

.me-linkedin a:hover {
  background-color: #0077B5;
  color: #fff; }

.me-github a {
  border: 1px solid #181717;
  color: #181717; }

.me-github a:hover {
  background-color: #181717;
  color: #fff; }

.me-googleplus a {
  border: 1px solid #DC4E41;
  color: #DC4E41; }

.me-googleplus a:hover {
  background-color: #DC4E41;
  color: #fff; }

.microblog a {
  text-decoration: none;
  display: block;
  padding: .5rem .2rem;
  transition: background-color .8s ease-out; }

.microblog li {
  border-bottom: 1px solid silver; }

.microblog ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem; }

.boxset .microblog h2 {
  font-size: 1rem;
  margin: 0 0 .5rem 0; }

.boxset .microblog h3 {
  font-size: 0.75rem;
  font-weight: 600; }

.microblog p {
  margin: 0; }

.comment-form {
  background-color: #eafaff;
  border: 1px dotted #7fdeff;
  padding: 2em 0; }

.comment-form label {
  float: left;
  width: 150px; }

.comment-form .oops,
.comment-form input.button {
  margin-left: 150px; }

@supports (display: grid) {
  .comment-form label {
    width: auto; }
  .comment-form .oops,
  .comment-form input.button {
    margin-left: 0; } }

/* each individual row is a grid ideally. This is because I'd rather control the layout from the grid, rather than on the items using flex. */
.comment-form .content > div {
  display: grid;
  align-items: center;
  grid-column-gap: 20px;
  padding: 10px;
  border-bottom: 1px solid #ccf2ff;
  grid-row-gap: 10px; }
  @media all and (min-width: 28.125em) {
    .comment-form .content > div {
      grid-template-columns: 160px 1fr; } }
  @media all and (min-width: 53.125em) {
    .comment-form .content > div {
      grid-template-columns: 160px 2fr 1fr; } }

.comment-form .content > div:last-child {
  border-bottom: none; }

.comment-form .content > div.error {
  border: 1px solid red;
  background-color: #ffcccc; }

.comment-form .oops {
  font-weight: bold;
  font-size: 0.75rem;
  padding: 5px 10px; }
  @media all and (min-width: 28.125em) {
    .comment-form .oops {
      grid-column: 1 / -1; } }
  @media all and (min-width: 53.125em) {
    .comment-form .oops {
      grid-column: 3 / -1; } }

.comment-form input, .comment-form textarea {
  font-size: 100%;
  line-height: 1.6; }
  @media all and (min-width: 450px) {
    .comment-form input, .comment-form textarea {
      font-size: 112.5%;
      line-height: 1.6; } }
  @media all and (min-width: 1200px) {
    .comment-form input, .comment-form textarea {
      font-size: 125%;
      line-height: 1.8; } }

.comment-form input.button {
  font-weight: bold;
  padding: 5px 20px;
  justify-self: center;
  background-color: #7fdeff;
  color: #2c2a4a;
  font-size: 0.75rem;
  border: 0; }
  @media all and (min-width: 28.125em) {
    .comment-form input.button {
      grid-column: 2; } }

.comment-form input.button:hover {
  background-color: #19c4ff;
  transition: background-color .6s;
  -webkit-transition: background-color .6s;
  cursor: pointer; }

.comment {
  padding: 20px;
  margin: 0 0 20px 0; }

/*.comment:nth-child(odd) {

}*/
.comment .commenter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; }

.commenter > img {
  flex: 0 1 auto;
  margin: 0 20px 0 0;
  align-self: flex-start;
  border-radius: 50%;
  border: 5px solid #ccf2ff;
  height: 64px;
  width: 64px; }

.comments-listing {
  padding-top: 40px; }

.comments-listing h3 {
  padding-top: 20px; }

.article-meta {
  grid-column: content;
  text-align: center;
  font-size: 0.75rem;
  margin: 40px 0; }

.article-meta p {
  padding: 0;
  margin: 0; }

.article-feature {
  margin-top: 20px; }

.twitter {
  display: flex;
  grid-column: content;
  justify-content: center;
  align-items: center; }
  @media all and (min-width: 75em) {
    .twitter {
      justify-content: flex-start;
      flex-direction: column;
      margin: 1em;
      grid-column: content-end / -1; } }

.twitter > * {
  margin: 0 1em; }
  @media all and (min-width: 75em) {
    .twitter > * {
      margin: .5em 0; } }

a.work {
  font-size: 0.75rem;
  text-decoration: none; }

.content-listing {
  list-style: none; }

.content-listing li {
  border-bottom: 2px dotted #dabfff;
  margin: 20px 0;
  padding: 20px 0;
  display: flex; }

.content-listing .image {
  flex: 0 1 200px;
  margin: 0 20px 0 0;
  align-self: flex-start; }

.content-listing .inner {
  flex: 1; }

.content-listing p {
  max-width: auto; }

.content-listing li:last-child {
  border: 0; }

.content-listing .meta {
  font-size: 0.75rem;
  margin: 0; }

.content-listing h2 {
  font-size: 1.333rem;
  line-height: 1.2; }

.cta {
  background-color: #f2effa;
  padding: 1em 0; }

.cta .content {
  background-color: #fff;
  margin: 20px 0;
  padding: 10px 20px; }

.event-resources {
  list-style: none;
  margin: auto -5px 0 -5px;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap; }

.single-col .content .event-resources {
  padding: 0;
  margin: 1em 0 2em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.event-resources li {
  margin: 0 5px 10px 5px;
  flex: 1 1 auto; }

.event-resources li a {
  background-color: #19c4ff;
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 0.75rem; }

.event-resources li a:hover {
  background-color: #0084b2;
  transition: background-color .6s;
  -webkit-transition: background-color .6s; }

table {
  border-collapse: collapse;
  margin: 0 0 2rem 0;
  width: 100%; }

th {
  border-bottom: 4px solid #907ad6;
  padding: 10px;
  text-align: left; }

td {
  padding: 10px;
  font-size: 0.75rem; }

tr:nth-child(2n) {
  background-color: #f2effa; }

.single-col {
  margin: 0 auto;
  display: grid;
  grid-template-columns: [full-start] minmax(1em, 1fr) [content-start] minmax(0, 40em) [content-end] minmax(1em, 1fr) [full-end]; }

.single-col .content,
.single-col h1 {
  margin: 0 20px; }

@media all and (min-width: 53.125em) {
  .single-col .content,
  .single-col h1 {
    margin: 0 auto;
    max-width: 800px; } }

@supports (display: grid) {
  .single-col .content {
    margin: 0;
    grid-column: content; } }

.single-col .full {
  grid-column: full; }

.single-col h1 {
  grid-column: full;
  text-align: center; }

.single-col h1 + .content p:first-child,
.single-col h1 + .article-meta + .content p:first-child {
  font-weight: bold;
  color: #445c7b;
  font-size: 1.333rem;
  line-height: 1.7; }

.facepile a:link,
.facepile a:visited {
  text-decoration: none; }

.facepile img {
  border-radius: 50%;
  border: 5px solid #ccf2ff;
  width: 64px;
  height: 64px; }

.main-footer {
  background-color: #2c2a4a;
  color: #fff;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
  margin-top: 1em; }

.main-footer ul {
  list-style: none;
  margin: 0;
  padding: 0; }

.main-footer p {
  margin: 0 0 1em 0; }

.main-footer a:link,
.main-footer a:visited {
  color: #7fdeff;
  font-weight: bold;
  text-decoration: none; }

.main-footer a:hover {
  color: #4cd1ff; }

.main-footer .about,
.footer-nav,
.footer-elsewhere {
  grid-column: 1 / -1; }

@media all and (min-width: 53.125em) {
  .main-footer .about,
  .main-footer .footer-nav,
  .main-footer .footer-elsewhere {
    width: 25%;
    margin-right: 2%;
    display: inline-block;
    vertical-align: top; }
  .main-footer .about {
    width: 35%; }
  @supports (display: grid) {
    .main-footer .about {
      width: auto;
      grid-column: 1 / 6;
      padding-right: 20px;
      border-right: 4px dashed #fff; }
    .main-footer .footer-nav {
      width: auto;
      grid-column: 6 / 9; }
    .main-footer .footer-elsewhere {
      width: auto;
      grid-column: 9 / -1; } } }

.boxset h2,
.boxset h3 {
  font-family: Raleway, sans-serif;
  margin: .2em 0; }

.boxset h2 {
  font-weight: 400;
  font-size: 1.333rem;
  line-height: 1.2; }

.boxset h3 {
  font-size: 1rem;
  font-weight: 200; }

.boxset-feature-image-a {
  grid-column: 1 / 10;
  grid-row: 1;
  object-fit: cover;
  width: 100%;
  height: 100%; }

.boxset-feature-image-b {
  grid-column: 1 / 10;
  grid-row: 2;
  object-fit: cover;
  width: 100%;
  height: 100%; }

.boxset-feature-image-c {
  grid-column: 10 / 17;
  grid-row: 1 / 3;
  object-fit: cover;
  width: 100%;
  height: 100%; }

.boxset-content {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  grid-template-rows: 200px 200px;
  gap: 10px;
  grid-gap: 10px;
  font-size: 0.75rem; }

.boxset-content .boxset-stream {
  grid-column: 18 / -1;
  grid-row: 1 / 4; }

.boxset-item {
  grid-column: 2 / 15;
  padding: 2rem 0; }

.book,
.grid {
  display: contents; }

.book-image {
  grid-column: 12 / 18;
  transform: translateY(-20px);
  grid-row: 5; }

.book-content {
  grid-column: 2 / 12;
  grid-row: 5; }

.grid-image {
  grid-row-end: span 2;
  grid-column: 2 / 6;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.grid-content {
  grid-column: 7 / 17; }

* {
  box-sizing: border-box; }

body.cheatsheets {
  font: 1em "Source Sans Pro", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fdfafd; }

.cheatsheets h1, .cheatsheets h2, .cheatsheets h3 {
  font-family: "Roboto Slab", serif;
  margin: 1em 0; }

.cheatsheets h1 {
  font-size: 2.074rem; }

.sheet {
  margin-right: 11%;
  margin-left: 3%;
  background-color: #fff;
  border-right: 1px dashed #ccc;
  border-left: 1px dashed #ccc;
  padding: 0 20px 0 3%; }

.sheet .section-title {
  background-color: #190F22;
  color: #fff;
  margin: 0;
  padding: 10px;
  font-size: 1.2rem; }

.sheet .short-desc {
  font-size: 1.2rem;
  margin: 0;
  padding: 10px;
  font-family: "Roboto Slab", serif; }

.sheet .grid-def,
.sheet .flex-def,
.sheet .wide-sheet {
  border: 1px dashed #ccc;
  margin-bottom: 2em; }

@supports (display: grid) {
  .sheet {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(7, 1fr); }
  .sheet .title,
  .sheet .intro,
  .sheet .resources {
    grid-column: 1 / 8;
    justify-self: center; }
  .sheet .section-title {
    grid-column: 1 / 8;
    align-self: start; }
  .sheet .short-desc {
    grid-column: 1 / 8;
    justify-self: end; }
  .sheet .grid-def,
  .sheet .flex-def,
  .sheet .wide-sheet {
    grid-column: 1 / 8; }
  @media screen and (min-width: 800px) {
    .sheet .section-title {
      grid-column: 1 / 6; }
    .sheet .short-desc {
      grid-column: 1 / 6;
      justify-self: start; } }
  @media screen and (min-width: 1000px) {
    .sheet .intro,
    .sheet .resources {
      grid-column: 2 / 7; }
    .sheet .section-title {
      grid-column: 1 / 4; }
    .sheet .short-desc {
      grid-column: 5 / 8;
      justify-self: end; }
    .sheet .grid-def {
      grid-column: 2 / span 3; }
    .sheet .flex-def {
      grid-column: 5 / span 3; }
    .sheet .wide-sheet {
      grid-column: 2 / 8; } } }

.sheet .box-label {
  font-size: 0.833rem;
  color: #fff;
  background-color: #694486;
  position: absolute;
  top: -20px;
  right: -10px;
  padding: 5px;
  border-radius: 5px; }

.sheet .grid-label {
  grid-column: 4;
  justify-self: end; }

.sheet .info-box {
  position: relative; }

.sheet .example {
  margin: 10px; }

.sheet .resources {
  margin-bottom: 4em; }

.sheet dl {
  margin: 0;
  padding: 10px; }

.sheet dd, .sheet dt {
  margin: 0; }

.sheet dt {
  font-weight: bold;
  margin-top: 1em; }

.sheet .content {
  margin: 0;
  padding: 10px; }

@supports (display: grid) {
  .sheet .example-grid {
    display: grid;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto; }
  .sheet dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin: 0;
    padding: 0; }
  .sheet dd, .sheet dt {
    margin: 0;
    padding: .5em 10px;
    border-bottom: 1px dashed #ccc; } }

.sheet .flex-label {
  grid-column: 7; }

.cheatsheets p code,
.cheatsheets dl code,
.cheatsheets li code {
  border-radius: 2px;
  background-color: #fcfcfc;
  border: 1px solid #ccc;
  padding: 0 .2em;
  margin: 0 .2em;
  white-space: nowrap;
  font-family: Courier New, Courier, monospace;
  color: #000; }

.css-header, .site-footer {
  background-color: #190F22;
  color: #fff; }

.css-header {
  padding: 10px 10px 10px 100px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; }

.css-header .sitelink {
  color: #fff;
  text-decoration: none;
  font-size: 1.44rem;
  font-family: "Roboto Slab", serif;
  margin-right: 1em; }

.css-header .twitter {
  margin-left: auto; }

.css-header .dotslashcss {
  font-size: 2.074rem;
  font-family: "Roboto Slab", serif; }

.site-footer {
  display: flex;
  padding: 20px 3%; }

.site-footer a {
  color: #fff; }

.site-footer a:hover {
  text-decoration: none; }

.site-footer .more {
  margin-right: 10%;
  flex: 1 1 0; }

.site-footer .about {
  flex: 2 1 0; }

.site-footer .more ul {
  margin: 0;
  padding: 0;
  list-style: none; }

.get-on-the-grid {
  border: 1px solid #c92a2a;
  padding: 10px;
  background-color: #ffe3e3; }

@supports (display: grid) {
  .get-on-the-grid {
    display: none; } }

.homepage-top {
  background-color: #000;
  color: #fff;
  padding: 20px;
  margin: 0 20px 40px 20px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(12, 1fr); }
  @media all and (min-width: 53.125em) {
    .homepage-top {
      background-image: url(/assets/img/rachel.jpg);
      background-repeat: no-repeat;
      background-size: auto 100%;
      min-height: 450px; } }

.homepage-top a:link,
.homepage-top a:visited {
  color: #fff; }

/* float the panel. If we have grid layout, the float is overwritten when the item becomes a grid item. We just need to overwrite the width using a feature query. */
.homepage-inner {
  grid-column: 1 / -1; }
  @media all and (min-width: 53.125em) {
    .homepage-inner {
      float: right;
      width: 50%;
      grid-column: 6 / -2;
      background-color: rgba(0, 0, 0, 0.7);
      border-radius: 10px;
      padding: 0 20px;
      align-self: center; }
      @supports (display: grid) {
        .homepage-inner {
          width: auto; } } }
  @media all and (min-width: 75em) {
    .homepage-inner {
      grid-column: 5 / -2; } }

.listing {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 20px; }

.listing .inline-head,
.listing .speaking-meta {
  flex: 1 1 100%;
  grid-column: 1 / -1;
  justify-self: center;
  margin: 20px 0; }

.speaking-meta {
  font-size: 0.75rem; }

/* deal with the flex items in flex layout */
.listing > * {
  flex: 1 1 30%;
  margin: 0 20px 20px 20px; }

@supports (display: grid) {
  .listing > * {
    margin: 0; } }

.box-title {
  grid-column: 1 / -1;
  grid-row: 1; }
  @media all and (min-width: 53.125em) {
    .box-title {
      grid-column: 1 / 6;
      grid-row: 1 / 3; } }
  @media all and (min-width: 75em) {
    .box-title {
      grid-column: 1 / 4;
      grid-row: 1 / 2; } }

.listing .content-listing {
  grid-column: 1 / -1; }
  @media all and (min-width: 53.125em) {
    .listing .content-listing {
      grid-column: 6 / -1;
      grid-row: auto / span 4; } }
  @media all and (min-width: 75em) {
    .listing .content-listing {
      grid-column: 4 / -1;
      grid-row: auto / span 2; } }

/* in flex layout in the listing give the feature box a wider flex basis. */
.listing .box-feature {
  flex: 1 1 60%; }

/* then do grid */
.box-feature {
  grid-column: 1 / -1;
  grid-row: 2; }
  @media all and (min-width: 53.125em) {
    .box-feature {
      grid-column: 6 / -1;
      grid-row: 1 / 3; } }
  @media all and (min-width: 75em) {
    .box-feature {
      grid-column: 4 / -1;
      grid-row: 1 / 2; } }

.box-newer {
  grid-column: 1 / -1; }
  @media all and (min-width: 28.125em) {
    .box-newer {
      grid-column: auto / span 6; } }
  @media all and (min-width: 53.125em) {
    .box-newer {
      grid-column: auto / span 4; } }

.box-newer.box-media {
  grid-row-end: span 2; }

.box-older {
  grid-column: 1 / -1; }
  @media all and (min-width: 28.125em) {
    .box-older {
      grid-column: auto / span 4; } }
  @media all and (min-width: 53.125em) {
    .box-older {
      grid-column: auto / span 3; } }

.box-speaking {
  grid-column: 1 / -1; }
  @media all and (min-width: 28.125em) {
    .box-speaking {
      grid-column: auto / span 6; } }
  @media all and (min-width: 53.125em) {
    .box-speaking {
      grid-column: auto / span 4; } }

.box-older:nth-of-type(1) {
  grid-column-start: 1; }

.mainnav ul {
  list-style: none;
  margin: 0 20px 40px 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; }
  @media all and (min-width: 53.125em) {
    .mainnav ul {
      border-bottom: 4px solid #dabfff; } }

.mainnav li {
  margin: 0 10px; }

.mainnav a {
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  font-size: 0.75rem;
  padding: 10px 0; }

.mainnav a:hover {
  border-bottom: 4px solid #694486;
  margin-bottom: -4px; }

.mainnav a.selected, .mainnav a.selected:hover {
  color: #694486;
  border-bottom: 4px solid #694486;
  margin-bottom: -4px; }

.paging {
  margin: 0 0 40px 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: baseline;
  line-height: 1.2; }

.paging li {
  padding: 0;
  margin: 0; }

.paging a {
  display: block;
  padding: 10px;
  margin: 0 5px;
  text-decoration: none; }

.paging a:hover {
  border-bottom: 4px solid #694486;
  margin-bottom: -4px; }

.paging a.selected, .paging a.selected:hover {
  color: #694486;
  border-bottom: 4px solid #694486;
  margin-bottom: -4px; }

.paging .prev, .paging .next {
  font-size: 0.75rem; }

.subnav {
  margin: -30px 20px 40px 20px;
  text-align: center; }

.subnav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ececec; }

.subnav li {
  margin: 0 20px; }

.subnav a {
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  font-size: 0.75rem;
  padding: 10px 0;
  color: #2c2a4a; }

.subnav a:hover, .subnav a.selected, .subnav a.selected:hover {
  color: #694486; }

/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+css-extras+php */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none; }

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
  border-radius: 0.3em; }

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #272822; }

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal; }

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray; }

.token.punctuation {
  color: #f8f8f2; }

.namespace {
  opacity: .7; }

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #f92672; }

.token.boolean,
.token.number {
  color: #ae81ff; }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a6e22e; }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2; }

.token.atrule,
.token.attr-value,
.token.function {
  color: #e6db74; }

.token.keyword {
  color: #66d9ef; }

.token.regex,
.token.important {
  color: #fd971f; }

.token.important,
.token.bold {
  font-weight: bold; }

.token.italic {
  font-style: italic; }

.token.entity {
  cursor: help; }