/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
#c-header {
  z-index: 50;
  font-family: 'Changa One', sans-serif;
  /**
	 * PBS Kids
	 */
  /**
	 * Logo
	 */
  /**
	 * Nav
	 */
  /**
	 * Home tab
	 */
  /**
	 * Condensed
	 */ }
  @media only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
    #c-header {
      position: relative; }
      #c-header::before {
        content: "";
        display: block;
        padding-top: 15.35714%; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    #c-header {
      height: 157.25714px; } }
  @media only screen and (max-width: 767px) {
    #c-header {
      position: relative; }
      #c-header::before {
        content: "";
        display: block;
        padding-top: 36.45833%; } }
  #c-header img {
    display: block;
    width: 100%;
    height: auto; }
  #c-header .block-resize-overflow {
    overflow: visible; }
  #c-header .block-resize-content::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none; }
  @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
    #c-header {
      margin-bottom: -1.78571%; }
      #c-header .block-resize-content::after {
        background: url(../static/global/header/bg-desktop.png) center top no-repeat;
        background-size: 100% auto; }
      main {
        padding-top: 4.28571%; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    #c-header {
      margin-bottom: -18px; }
      main {
        padding-top: 44px; } }
  @media only screen and (max-width: 767px) {
    #c-header .block-resize-content::after {
      background: url(../static/global/header/bg-mobile.png) center top no-repeat;
      background-size: 100% auto; }
    main {
      padding-top: 30px; } }
  #c-header .pbskids {
    position: absolute;
    z-index: 2; }
    @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
      #c-header .pbskids {
        top: 8.37209%;
        left: 15%;
        width: 4.28571%; } }
    @media only screen and (max-width: 767px) {
      #c-header .pbskids {
        top: 12.5%;
        left: 13.54167%;
        width: 7.8125%; } }
  #c-header .logo {
    position: absolute;
    z-index: 3; }
    @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
      #c-header .logo {
        top: 8.83721%;
        left: 20.35714%;
        width: 34.5%; } }
    @media only screen and (max-width: 767px) {
      #c-header .logo {
        top: 7.14286%;
        left: 23.4375%;
        width: 62.89062%; } }
  #c-header nav {
    text-align: center; }
    #c-header nav ul, #c-header nav li {
      margin: 0;
      padding: 0;
      list-style: none; }
    #c-header nav li {
      z-index: 2; }
      @media only screen and (min-width: 1400px) {
        #c-header nav li {
          font-size: 26px; } }
      @media only screen and (min-width: 1025px) and (max-width: 1399px) {
        #c-header nav li {
          font-size: 1.85714vw; } }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        #c-header nav li {
          font-size: 19.01714px; } }
      @media only screen and (max-width: 767px) {
        #c-header nav li {
          font-size: 5.46875vw; } }
    #c-header nav a {
      display: block;
      text-decoration: none; }
    @media only screen and (max-width: 767px) {
      #c-header nav {
        background: url(../static/global/header/menu-bg.jpg) center bottom no-repeat;
        background-size: 100% auto;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding-top: 10.41667%;
        z-index: 0;
        -webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms;
        transition: transform 300ms;
        transition: transform 300ms, -webkit-transform 300ms; }
        #c-header nav.open {
          -webkit-transform: translate(0, 75%);
                  transform: translate(0, 75%); }
        #c-header nav ul {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          padding: 0 30px; }
          #c-header nav ul li {
            width: 50%;
            position: relative; }
            #c-header nav ul li a {
              color: #FFF;
              height: 1.90476em;
              margin-bottom: 0.35714em;
              background-color: #89b13e;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
                  -ms-flex-pack: center;
                      justify-content: center;
              -webkit-box-align: center;
                  -ms-flex-align: center;
                      align-items: center;
              border-bottom: solid 0.38095em #709033;
              line-height: 1em; }
              #c-header nav ul li a:nth-child(odd) {
                margin-right: 6px; }
              #c-header nav ul li a:nth-child(even) {
                margin-left: 6px; }
        #c-header nav .toggle-wrapper {
          position: relative;
          padding-top: 11.71875%; }
          #c-header nav .toggle-wrapper .toggle {
            font-size: 5.98958vw;
            text-decoration: none;
            text-transform: uppercase;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color: #b51f6a; }
            #c-header nav .toggle-wrapper .toggle::before {
              content: "";
              display: inline-block;
              width: 0.90217em;
              height: 0.68478em;
              background: url(../static/global/header/icon.png) center center no-repeat;
              margin-right: 5%;
              background-size: contain; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
      #c-header nav li {
        position: absolute;
        text-transform: uppercase;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden; }
        #c-header nav li a {
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden; }
          #c-header nav li a::before {
            content: "";
            display: block;
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-position: center top;
            padding-top: 3%; }
        #c-header nav li:hover {
          -webkit-animation: sgBounce 300ms;
                  animation: sgBounce 300ms; }
      #c-header nav .home,
      #c-header nav .toggle {
        display: none; }
      #c-header nav .videos {
        top: 15.11628%;
        left: 56.35714%;
        width: 8.39286%; }
        #c-header nav .videos a {
          color: #b51f6a; }
          #c-header nav .videos a::before {
            padding-top: 100%;
            background-image: url(../static/global/header/video.png); }
      #c-header nav .games {
        top: 15.11628%;
        left: 65.57143%;
        width: 8.57143%; }
        #c-header nav .games a {
          color: #f7a11a; }
          #c-header nav .games a::before {
            padding-top: 97.91667%;
            background-image: url(../static/global/header/games.png); }
      #c-header nav .profiles {
        top: 6.97674%;
        left: 75.67857%;
        width: 8.39286%; }
        #c-header nav .profiles a {
          color: #89b13e; }
          #c-header nav .profiles a::before {
            padding-top: 116.17021%;
            background-image: url(../static/global/header/profile.png); } }
  @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
    #c-header .home-tab {
      position: relative;
      position: absolute;
      display: block;
      background: url(../static/global/header/home.png) center center no-repeat;
      background-size: 100% auto;
      left: 21.14286%;
      bottom: -8%;
      width: 6.57143%;
      z-index: 0; }
      #c-header .home-tab::before {
        content: "";
        display: block;
        padding-top: 48.91304%; } }
  @media only screen and (max-width: 767px) {
    #c-header .home-tab {
      display: none; } }
  @media only screen and (max-width: 767px) {
    #c-header.condensed {
      position: relative; }
      #c-header.condensed::before {
        content: "";
        display: block;
        padding-top: 27.73438%; } }
  @media only screen and (max-width: 767px) {
    #c-header.condensed nav {
      display: none !important; } }

/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
#c-footer {
  font-family: "Changa One", sans-serif;
  z-index: 40;
  /**
	 * Top footer
	 */
  /**
	 * Sub footer
	 */ }
  @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
    #c-footer {
      margin-top: -1.78571%; }
      main {
        padding-bottom: 1.78571%; } }
  @media only screen and (max-width: 767px) {
    #c-footer {
      margin-top: -3.25521%; }
      main {
        padding-bottom: 1.95312%; } }
  #c-footer .top-footer {
    position: relative;
    z-index: 5;
    /**
		 * Purple zig-zag
		 */
    /**
		 * Content
		 */
    /* Nav */
    /* Logos */ }
    @media only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
      #c-footer .top-footer {
        position: relative; }
        #c-footer .top-footer::before {
          content: "";
          display: block;
          padding-top: 20.32143%; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      #c-footer .top-footer {
        height: 208.09143px; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
      #c-footer .top-footer {
        background: url(../static/global/footer/bg-desktop.png) center center no-repeat;
        background-size: cover; } }
    @media only screen and (max-width: 767px) {
      #c-footer .top-footer {
        background: url(../static/global/footer/bg-mobile-bottom.jpg) center bottom no-repeat, url(../static/global/footer/bg-mobile-top.png) center top no-repeat;
        background-size: 100% auto, 100% auto; }
        #c-footer .top-footer .block-resize-overflow {
          position: relative; } }
    #c-footer .top-footer .block-resize-content {
      padding: 1px 0; }
      #c-footer .top-footer .block-resize-content::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        background-size: 100%;
        background-repeat: no-repeat; }
      @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
        #c-footer .top-footer .block-resize-content::after {
          background-image: url(../static/global/footer/zig-zag-desktop.png);
          padding-top: 0.60714%; } }
      @media only screen and (max-width: 767px) {
        #c-footer .top-footer .block-resize-content::after {
          background-image: url(../static/global/footer/zig-zag-mobile.png);
          padding-top: 1.95312%; } }
    #c-footer .top-footer .content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      margin: 0 auto; }
      @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
        #c-footer .top-footer .content {
          margin-top: 5.35714%;
          width: 60%; } }
      @media only screen and (max-width: 767px) {
        #c-footer .top-footer .content {
          margin-top: 9.76562%;
          width: 70.3125%;
          padding-bottom: 15.625%; } }
    #c-footer .top-footer nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin: 0 -1em;
      position: relative; }
      @media only screen and (min-width: 1400px) {
        #c-footer .top-footer nav {
          font-size: 22px; } }
      @media only screen and (min-width: 1025px) and (max-width: 1399px) {
        #c-footer .top-footer nav {
          font-size: 1.57143vw; } }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        #c-footer .top-footer nav {
          font-size: 16.09143px; } }
      @media only screen and (max-width: 767px) {
        #c-footer .top-footer nav {
          font-size: 4.55729vw; } }
      #c-footer .top-footer nav a {
        text-align: center;
        text-decoration: none;
        color: #bb3276; }
        #c-footer .top-footer nav a:hover {
          text-decoration: underline; }
      @media only screen and (max-width: 767px) {
        #c-footer .top-footer nav {
          -webkit-box-ordinal-group: 0;
              -ms-flex-order: -1;
                  order: -1;
          padding-bottom: 1em; }
          #c-footer .top-footer nav::after {
            content: "";
            position: absolute;
            bottom: 0;
            width: 110%;
            left: -5%;
            background: url(../static/global/footer/stitches.png) center bottom no-repeat;
            background-size: contain;
            height: 20px; }
          #c-footer .top-footer nav a {
            margin: 0.25em 1em; } }
      @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
        #c-footer .top-footer nav {
          margin-top: 0.5em; }
          #c-footer .top-footer nav a {
            margin: 0.25em 0.75em; } }
    #c-footer .top-footer .logos {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      position: relative; }
      #c-footer .top-footer .logos .col {
        -ms-flex-negative: 1;
            flex-shrink: 1;
        color: #bb3276;
        white-space: nowrap; }
        @media only screen and (min-width: 1400px) {
          #c-footer .top-footer .logos .col {
            font-size: 14px; } }
        @media only screen and (min-width: 1025px) and (max-width: 1399px) {
          #c-footer .top-footer .logos .col {
            font-size: 1vw; } }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          #c-footer .top-footer .logos .col {
            font-size: 10.24px; } }
        @media only screen and (max-width: 767px) {
          #c-footer .top-footer .logos .col {
            font-size: 2.86458vw; } }
        #c-footer .top-footer .logos .col:last-child {
          margin-right: 0;
          padding-right: 0;
          border-right: 0; }
      #c-footer .top-footer .logos .images {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; }
        #c-footer .top-footer .logos .images a, #c-footer .top-footer .logos .images span {
          display: block; }
        #c-footer .top-footer .logos .images img {
          display: block;
          width: 100%;
          max-width: 40vw; }
          @media only screen and (max-width: 767px) {
            #c-footer .top-footer .logos .images img {
              margin: 0 auto; } }
        #c-footer .top-footer .logos .images .made-possible-by img {
          max-width: 20vw; }
      @media only screen and (max-width: 767px) {
        #c-footer .top-footer .logos {
          -ms-flex-wrap: wrap;
              flex-wrap: wrap; }
          #c-footer .top-footer .logos .col {
            -ms-flex-preferred-size: 50%;
                flex-basis: 50%;
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            text-align: center;
            margin-top: 2em; }
          #c-footer .top-footer .logos .images a, #c-footer .top-footer .logos .images span {
            margin-top: 1em;
            margin-left: 1em;
            margin-right: 1em; }
          #c-footer .top-footer .logos .additional-funding-by .images {
            -ms-flex-wrap: wrap;
                flex-wrap: wrap; }
            #c-footer .top-footer .logos .additional-funding-by .images a, #c-footer .top-footer .logos .additional-funding-by .images span {
              max-width: calc(50% - 2em); }
              #c-footer .top-footer .logos .additional-funding-by .images a img, #c-footer .top-footer .logos .additional-funding-by .images span img {
                max-width: 30vw; } }
      @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
        #c-footer .top-footer .logos {
          min-height: 1px; }
          #c-footer .top-footer .logos .col {
            margin-right: 2em;
            padding-right: 2em;
            border-right: solid #80bbb3 2px; }
          #c-footer .top-footer .logos .produced-by {
            width: 18%; }
          #c-footer .top-footer .logos .supported-by {
            width: 13%; }
          #c-footer .top-footer .logos .additional-funding-by {
            width: 65%; }
          #c-footer .top-footer .logos .images a, #c-footer .top-footer .logos .images span {
            margin-right: 1.25em;
            margin-top: 0.7em; }
            #c-footer .top-footer .logos .images a:last-child, #c-footer .top-footer .logos .images span:last-child {
              margin-right: 0; } }
  #c-footer .sub-footer {
    background: #b51f6a;
    text-align: center;
    color: white;
    display: block; }
    @media only screen and (min-width: 1400px) {
      #c-footer .sub-footer {
        font-size: 18px; } }
    @media only screen and (min-width: 1025px) and (max-width: 1399px) {
      #c-footer .sub-footer {
        font-size: 1.28571vw; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      #c-footer .sub-footer {
        font-size: 13.16571px; } }
    @media only screen and (max-width: 767px) {
      #c-footer .sub-footer {
        font-size: 2.73438vw; } }
    #c-footer .sub-footer a {
      color: white;
      text-decoration: underline; }
    @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
      #c-footer .sub-footer {
        padding: 0.85714%; } }
    @media only screen and (max-width: 767px) {
      #c-footer .sub-footer {
        padding: 1.5625%; } }

/* latin */
@font-face {
  font-family: 'Changa One';
  font-style: normal;
  font-weight: 400;
  src: url(../static/fonts/ChangaOne-Regular.eot);
  src: local("Changa One"), local("ChangaOne"), url(../static/fonts/ChangaOne-Regular.ttf) format("truetype");
  unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(../static/fonts/Lato.eot);
  src: local("Lato Regular"), local("Lato-Regular"), url(../static/fonts/Lato-Regular.ttf) format("truetype");
  unicode-range: u+0100-024f, u+1e00-1eff, u+20a0-20ab, u+20ad-20cf, u+2c60-2c7f, u+a720-a7ff; }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(../static/fonts/Lato.eot);
  src: local("Lato Regular"), local("Lato-Regular"), url(../static/fonts/Lato-Regular.ttf) format("truetype");
  unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(../static/fonts/Lato.eot);
  src: local("Lato Bold"), local("Lato-Bold"), url(../static/fonts/Lato-Bold.ttf) format("truetype");
  unicode-range: u+0100-024f, u+1e00-1eff, u+20a0-20ab, u+20ad-20cf, u+2c60-2c7f, u+a720-a7ff; }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(../static/fonts/Lato.eot);
  src: local("Lato Bold"), local("Lato-Bold"), url(../static/fonts/Lato-Bold.ttf) format("truetype");
  unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; }

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url(../static/fonts/Lato.eot);
  src: local("Lato Italic"), local("Lato-Italic"), url(../static/fonts/Lato-Italic.ttf) format("truetype");
  unicode-range: u+0100-024f, u+1e00-1eff, u+20a0-20ab, u+20ad-20cf, u+2c60-2c7f, u+a720-a7ff; }

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url(../static/fonts/Lato.eot);
  src: local("Lato Italic"), local("Lato-Italic"), url(../static/fonts/Lato-Italic.ttf) format("truetype");
  unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; }

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url(../static/fonts/Lato.eot);
  src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url(../static/fonts/Lato-BoldItalic.ttf) format("truetype");
  unicode-range: u+0100-024f, u+1e00-1eff, u+20a0-20ab, u+20ad-20cf, u+2c60-2c7f, u+a720-a7ff; }

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url(../static/fonts/Lato.eot);
  src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url(../static/fonts/Lato-BoldItalic.ttf) format("truetype");
  unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; }

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Lato', sans-serif; }

main {
  display: block; }

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }

.clearfix::after {
  content: "";
  display: table !important;
  clear: both; }

/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
/**
 * Background
 */
html {
  background: #3f3131 center top url(../static/global/bg.jpg); }

/**
 * Main
 */
main {
  background-color: #FFF; }
  main a {
    color: #bb3276; }

/**
 * Viewport
 */
#viewport {
  max-width: 1400px;
  margin: 0 auto;
  background-color: #FFF; }
  @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
    #viewport {
      overflow-x: hidden; } }

/**
 * Block resize
 * Handles the "scale to crop to scale" resize nature.
 */
.block-resize {
  position: relative; }
  .block-resize > .block-resize-overflow {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
    .block-resize > .block-resize-overflow > .block-resize-content {
      position: relative;
      height: 100%; }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .block-resize > .block-resize-overflow > .block-resize-content {
          position: relative;
          width: 1024px;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
                  transform: translate(-50%, 0); } }

/**
 * Theme-chalkboard
 */
.theme-chalkboard main {
  background: url(../static/global/chalkboard-bg.jpg) top center; }
  .theme-chalkboard main .content-wrapper {
    background: url(../static/global/doodle-bg.png) top center no-repeat;
    background-size: 100% auto; }
  .theme-chalkboard main .content {
    position: relative;
    background-color: #FFF;
    max-width: 980px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto 40px auto;
    color: #8c8c85; }
    .theme-chalkboard main .content::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: -11px;
      width: 100%;
      height: 12px;
      background: url(../static/global/tear-top.png) bottom center no-repeat;
      background-size: 100% auto; }
    .theme-chalkboard main .content::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: -15px;
      height: 16px;
      width: 100%;
      background: url(../static/global/tear-bottom.png) top center no-repeat;
      background-size: 100% auto; }
  @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
    .theme-chalkboard main .content {
      width: 70%;
      min-height: 600px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .theme-chalkboard main .content-wrapper {
      position: relative;
      width: 1024px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0); } }
  @media only screen and (max-width: 767px) {
    .theme-chalkboard main .content {
      margin-left: 30px;
      margin-right: 30px; }
    .theme-chalkboard main .content-wrapper {
      background: url(../static/global/doodle-bg.png) top center no-repeat, url(../static/global/doodle-left.png) left 10px no-repeat, url(../static/global/doodle-right.png) right 12px no-repeat;
      background-size: 100% auto, auto, auto; } }

/**
 * Button
 */
.button {
  display: inline-block;
  text-decoration: none;
  font-family: "Changa One", sans-serif;
  padding: 0.5em 0.75em;
  border: none;
  border-bottom: 0.25em solid;
  -webkit-appearance: none;
  border-radius: 0; }
  .button.green {
    background-color: #89b13e;
    border-bottom-color: #739534;
    color: #FFF; }
    .button.green:hover {
      background-color: #739534;
      border-bottom-color: #89b13e; }
  .button.purple {
    background-color: #bb3276;
    border-bottom-color: #a12a65;
    color: #FFF; }
    .button.purple:hover {
      background-color: #a12a65;
      border-bottom-color: #bb3276; }
  .button.lilac {
    background-color: #974fb7;
    border-bottom-color: #7b22a2;
    color: #FFF; }
    .button.lilac:hover {
      background-color: #7b22a2;
      border-bottom-color: #974fb7; }
  .button.blue {
    background-color: #98d6cf;
    border-bottom-color: #83aeaa;
    color: #FFF; }
    .button.blue:hover {
      background-color: #83aeaa;
      border-bottom-color: #98d6cf; }

/**
 * Animations
 */
@-webkit-keyframes sgBounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.07);
            transform: scale(1.07); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }
@keyframes sgBounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.07);
            transform: scale(1.07); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
.torn-block {
  margin-bottom: 50px; }
  .torn-block .torn-block-inner {
    position: relative;
    background-color: #FFF;
    max-width: 980px;
    margin: 0 auto;
    padding: 1px 0; }
    .torn-block .torn-block-inner::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: -11px;
      width: 100%;
      height: 12px;
      background: url(../static/global/tear-top.png) bottom center no-repeat;
      background-size: 100% auto; }
    .torn-block .torn-block-inner::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: -15px;
      height: 16px;
      width: 100%;
      background: url(../static/global/tear-bottom.png) top center no-repeat;
      background-size: 100% auto; }
  @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1399px), only screen and (min-width: 1400px) {
    .torn-block .torn-block-inner {
      width: 70%; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .torn-block {
      position: relative;
      width: 1024px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0); } }
  @media only screen and (max-width: 767px) {
    .torn-block .torn-block-inner {
      margin-left: 20px;
      margin-right: 20px; }
      .torn-block .torn-block-inner::before, .torn-block .torn-block-inner::after {
        background-size: auto 100%; } }