@charset "UTF-8";
/* CSS Document */

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}


/*============================
 FONTS (via pbs-kids.fonts)
============================*/
@font-face{
  font-family: 'Colfax-Regular';
  src: url('/shell/fonts/ColfaxWebRegular.eot'); /* IE9 Compat Modes */
  src: url('/shell/fonts/ColfaxWebRegular.woff') format('woff'); /* Modern Browsers */
}

@font-face{
  font-family: 'Colfax-Regular';
  font-style: italic;
  src: url('/shell/fonts/ColfaxWebRegularItalic.eot'); /* IE9 Compat Modes */
  src: url('/shell/fonts/ColfaxWebRegularItalic.woff') format('woff'); /* Modern Browsers */
}

@font-face{
  font-family: 'Colfax-Medium';
  src: url('/shell/fonts/ColfaxWebMedium.eot'); /* IE9 Compat Modes */
  src: url('/shell/fonts/ColfaxWebMedium.woff') format('woff'); /* Modern Browsers */
}

@font-face{
  font-family: 'Colfax-Medium';
  font-style: italic;
  src: url('/shell/fonts/ColfaxWebMediumItalic.eot'); /* IE9 Compat Modes */
  src: url('/shell/fonts/ColfaxWebMediumItalic.woff') format('woff'); /* Modern Browsers */
}

@font-face{
  font-family: 'Colfax-Bold';
  src: url('/shell/fonts/ColfaxWebBold.eot'); /* IE9 Compat Modes */
  src: url('/shell/fonts/ColfaxWebBold.woff') format('woff'); /* Modern Browsers */
}

@font-face{
  font-family: 'Colfax-Bold';
  font-style: italic;
  src: url('/shell/fonts/ColfaxWebBoldItalic.eot'); /* IE9 Compat Modes */
  src: url('/shell/fonts/ColfaxWebBoldItalic.woff') format('woff'); /* Modern Browsers */
}


@font-face{
  font-family: 'PBS_KIDS_Headline';
  src: url('/shell/fonts/pbskidsheadline-regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('/shell/fonts/pbskidsheadline-regular-webfont.woff') format('woff'), /* Modern Browsers */
       url('/shell/fonts/pbskidsheadline-regular-webfont.ttf')  format('truetype'), /* iOS 4.2+ */
       url('/shell/fonts/pbskidsheadline-regular-webfont.svg#PBS_KIDS_Headline') format('svg'); /* Older iOS */
}

@font-face{
  font-family: 'PBS_KIDS_Headline_Bold';
  src: url('/shell/fonts/pbskidsheadline-bold-webfont.eot'); /* IE9 Compat Modes */
  src: url('/shell/fonts/pbskidsheadline-bold-webfont.woff') format('woff'), /* Modern Browsers */
       url('/shell/fonts/pbskidsheadline-bold-webfont.ttf')  format('truetype'), /* iOS 4.2+ */
       url('/shell/fonts/pbskidsheadline-bold-webfont.svg#PBS_KIDS_Headline_Bold') format('svg'); /* Older iOS */
}



/*===============
  COLORS
===============*/
.white{
  background-color: #FFFFFF;
  border-color: #333333 !important;
}
.magenta{
  background-color: #EC2472;
  border-color: #C21D6A !important;
}
.purple{
  background-color:#802B83;
  border-color: #4F1E58 !important;
}



/*==================
  DEFAULT STYLES
==================*/

body{
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Colfax-Regular", "Arial", sans-serif;
  background: #F5BC19;
}

section[role='main']{
  width: 100%;
  overflow: hidden;
}

.has-headband section[role='main']{
  position: absolute;
  top: 40px;
}

.inner-wrapper{
  max-width: 960px;
  width: 98%;
  display: block;
  position: relative;
  margin: 0 auto;
}

.btn-square{
  display: inline-block;
  border: none;
  border-bottom-width: .3em;
  border-bottom-style: solid;
  padding: 0.5em 1.2em;
  color: #FFFFFF;
  font-size: 20px;
  font-family: "PBS_KIDS_Headline_Bold", "Arial", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  position: relative;
  bottom: 0;
  vertical-align: bottom;
  line-height: 1.2em;

  -webkit-transition-duration: 0.1s; /* Safari 3.1 to 6.0 */
          transition-duration: 0.1s;
   -webkit-transition-property: border-width, top, bottom, margin; /* Safari */
           transition-property: border-width, top, bottom, margin;
}

.btn-square:hover,
.btn-square:active{
  color: #FFFFFF;
  text-decoration: none;
}

.btn-square:hover{
  border-bottom-width: 0.6em;
}

.btn-square:active{
  border-bottom-width: 0;
}

    .btn-square a,
    .btn-square a:hover,
    .btn-square a:active{
      color: inherit;
      text-decoration: none;
    }

    .sign-out{
      display: none;
      visibility: hidden;
    }

    body.logged-in .sign-in{
      display: none;
      visibility: hidden;
    }

    body.logged-in .sign-out{
      display: inline;
      visibility: visible;
    }

.back-to-button{
  position: absolute;
  z-index: 20;
  height:220px;
}

    .back-to-button:before{
      content: "";
      background: #AD5525;
      width: 12px;
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -6px;
      top: 4px;
      bottom: 0px;
    }

    .back-to-button:after{
      content: "";
      width: 60px;
      height: 30px;
      border-radius: 30px 30px 0 0;
      background: #DA7226;
      padding: 0;
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -30px;
      bottom: 0px;
    }

    .no-borderradius .back-to-button:after{
    	border-color: #DA7226;
    }

    .back-to-button a,
    .back-to-button button{
      display: block;
      width: 118px;
      height: 118px;
      border: solid 12px #DA7226;
      background: #23C1F2;
      border-radius: 118px;
      position: relative;
      box-sizing: content-box;
      padding: 0;
      outline: none;
      overflow: visible;
    }

        .back-to-button .button-copy{
          font-size: 36px;
          color: #FFFFFF;
          font-family: "PBS_KIDS_Headline", "Arial", sans-serif;
          text-transform: uppercase;
          text-align: center;
          display: block;
          position: relative;
          width: 120%;
          top: 200px;
          left: -10%;
        }

        .back-to-top a:before,
        .back-to-top button:before{
          content:"";
          width: 0;
          height: 0;
          position: absolute;
          top: 50%;
          left: 50%;

          border-left: solid 37px transparent;
          border-bottom: solid 40px #FFFFFF;
          border-right: solid 37px transparent;
          margin-top: -40px;
          margin-left: -37px;
        }

        .back-to-top a:after,
        .back-to-top button:after{
          content:"";
          background: #FFFFFF;
          position: absolute;
          top: 50%;
          left: 50%;

          width:30px;
          height:40px;
          margin-top: -2px;
          margin-left: -15px;
        }

        .back-to-prev a:before,
        .back-to-prev button:before{
          content:"";
          width: 0;
          height: 0;
          position: absolute;
          top: 50%;
          left: 50%;

          border-top: solid 37px transparent;
          border-bottom: solid 37px transparent;
          border-right: solid 40px #FFFFFF;
          margin-top: -37px;
          margin-left: -40px;
        }

        .back-to-prev a:after,
        .back-to-prev button:after{
          content:"";
          background: #FFFFFF;
          position: absolute;
          top: 50%;
          left: 50%;

          width:40px;
          height:30px;
          margin-top: -15px;
          margin-left: -2px;
        }


.clearfix{ *zoom:1; }
.clearfix:after{ clear:both; }
.clearfix:before,
.clearfix:after{
  content:"";
  display:table;
}

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




/*================
  HEADER STYLES
================*/
#page-header{
	margin: 0 auto;
	width: 100%;
}

    #page-header hgroup{
      position: relative;
      margin: 14px 0 -100px;
      width: 37.5%;
      z-index: 10;
      min-width: 300px;
    }

    .kartcodes #page-header hgroup{
      margin-bottom:10px;
    }

        #page-header .kidslogo{
          margin: 0;
          margin-top: 8%;
          position: absolute;
          min-width: 60px;
          width: 20%;
        }

        #page-header .applogo{
          margin: 0;
          width: 100%;
        }

		        #page-header .kidslogo img,
		        #page-header .applogo img{
		        	width: 100%;
		        }


    #page-header .main-nav{
      position: absolute;
      bottom: 126px;
      right: 0;
      width: 100%;
      text-align: right;
    }


      #page-header .main-nav .btn-square{
        margin: 0;
        margin-left: 8px;
      }

      #page-header .banner-wrapper{
        position: relative;
        display: block;
        width: 100%;
        text-align: center;
      }

      #page-header .banner-wrapper .header-banner{
				width: 100%;
        max-width: 1277px;
				max-height: 520px;
			}

      #page-header .banner-wrapper.home-banner .header-banner-mobile{
        display: none;
      }

      #page-header .banner-wrapper.home-banner .header-banner,
      #page-header .banner-wrapper.home-banner .header-banner-mobile{
        background-color: rgb(71, 226, 222);
      }

			.ie9 #page-header .banner-wrapper.home-banner .header-banner{
				max-width: 1284px;
				display: block;
				margin: 0 auto;
			}

			@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
				/* IE10+ CSS styles go here */
				#page-header .banner-wrapper.home-banner .header-banner{
					max-width: 1284px;
					display: block;
					margin: 0 auto;
				}
			}

      #page-header .banner-wrapper.home-banner{
				margin-bottom: 80px;
			}


      #page-header.login .banner-wrapper{
        display: none;
				visibility: hidden;
      }

		      #page-header .banner-wrapper .login-prompt{
      			text-align: center;
      			position: absolute;
					  bottom: 0;
					  width: 100%;
      		}

          #page-header .banner-wrapper .download-app-prompt{
            display: none;
            padding: 0.35em;
            margin: -40px auto 0;
            width: 550px;

            text-align: center;
            font-size: 56px;
            color: #FFFFFF;
            text-shadow: 0.1em 0.1em 0.01em rgba(0, 0, 0, 0.5);
            text-transform: uppercase;
            text-decoration: none;
            font-family: "PBS_KIDS_Headline", "Arial", sans-serif;
          }

          #page-header .banner-wrapper .download-app-prompt img{
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            bottom: -55px;
          }

          .isios #page-header .banner-wrapper .ios,
          .issilky #page-header .banner-wrapper .amazon,
          .isandroid #page-header .banner-wrapper .android{
            display: block;
          }


          .isios #page-header .banner-wrapper .login-prompt,
          .issilky  #page-header .banner-wrapper .login-prompt,
          .isandroid #page-header .banner-wrapper .login-prompt{
            display:none;
          }

      				#page-header .banner-wrapper .login-prompt .login-task{
      					  width: 418px;
								  height: 418px;
								  border-radius: 418px;

								  position: relative;
								  display: inline-block;

								  background-color: #55D7FF;
								  background-image: url('https://www-tc.pbskids.org/kartkingdom/assets/images/login-avatars.svg');
								  background-repeat: no-repeat;
								  background-position: -5% -100%;
								  background-size: 200%;
      				}

      				#page-header .banner-wrapper .login-prompt .login-task.return-user{
								background-position: 105% -100%;
								margin-left: 7.332%;
							}

							.ie9 #page-header .banner-wrapper .login-prompt .login-task,
							.ie9 #page-header .banner-wrapper .login-prompt .login-task.return-user{
      					background-position-y:25%;
      				}

      				@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
								/* IE10+ CSS styles go here */
								#page-header .banner-wrapper .login-prompt .login-task,
								#page-header .banner-wrapper .login-prompt .login-task.return-user{
	      					background-position-y:25%;
	      				}
							}

		      				#page-header .banner-wrapper .login-prompt .btn-square{
                    width: 100%;
                    position: absolute;
                    margin: 0 auto;
                    left: 0;
                    right: 0;
                    bottom: -55px;
                    max-width: 418px;
                    font-size: 60px;
                    padding: 0.2em 0;
				      		}

				      		#page-header .banner-wrapper .login-prompt .btn-square:hover{
							      margin-top: -0.3em;
							    }

							    #page-header .banner-wrapper .login-prompt .btn-square:active{
							      margin-top: 0.3em;
							    }


          #featured-item{
            position: absolute;
            top: 0px;
            right: 8px;
            width: 188px;
            height: 188px;
            background: #FFF url('/www-tc.pbskids.org/kartkingdom/assets/images/featured-item-star.svg') no-repeat center 20px;
            border-radius: 0 0 50px 50px;
            overflow: hidden;
            box-shadow: -4px 4px 0px 4px #F69820;
            text-decoration: none;
            line-height: 188px;
            text-align: center;
          }

          .isios #featured-item,
          .issilky #featured-item,
          .isandroid #featured-item{
            pointer-events: none;
          }


              #featured-item img{
                width: 170px;
                margin: 0 auto;
                position: relative;
                display: inline-block;
                vertical-align: middle;
              }


          #featured-item em{
            text-align: center;
            color: #FFFFFF;
            font-style: normal;
            font-size: 20px;
            font-family: "PBS_KIDS_Headline_Bold", "Arial", sans-serif;

            background-color: #EC2072;
            -moz-transform: rotate(45deg);  /* FF3.5/3.6 */
            -o-transform: rotate(45deg);  /* Opera 10.5 */
            -webkit-transform: rotate(45deg);  /* Saf3.1+ */
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);  /* Newer browsers (incl IE10) */

            position:absolute;
            top: 15px;
            right: -55px;
            width: 180px;
            height: 40px;
            line-height: 40px;
          }


@media (max-width: 1299px){
	#page-header .banner-wrapper .login-prompt .login-task{
		width: 31.885%;
		height: auto;
		padding-bottom: 31.885%;
	}
}


@media (max-width: 749px){
  #page-header .logos-nav-wrapper{
    width: 100%;
    background-color: rgb(71, 226, 222);
    padding: 12px 0 100px;
    margin-bottom: -4px;
  }

      #page-header hgroup{
        width: 300px;
        margin: 0 auto;
      }

          #page-header .kidslogo{
            width: 60px;
          }

          #page-header .applogo{
            width: 300px;
          }


  #featured-item{
    display: none;
  }

  #page-header .banner-wrapper .login-prompt .btn-square{
    width: 56.948228883%;
  }

  #page-header .main-nav{
      bottom: 20px;
      text-align: center;
  }

      #page-header .main-nav .btn-square{
        font-size: 24px;
        margin: 0 1%;
        padding: 0.5em 0;
        width: 30%;
      }


  #page-header .banner-wrapper .login-prompt .login-task{
		width: 35%;
		padding-bottom: 35%;
	}

	#page-header .banner-wrapper .login-prompt .login-task.return-user{
	  margin-left: 10%;
	}

  #page-header .banner-wrapper .download-app-prompt {
    display: none !important;
  }

  .isios #page-header .banner-wrapper.home-banner,
  .issilky #page-header .banner-wrapper.home-banner,
  .isandroid #page-header .banner-wrapper.home-banner{
    margin-bottom: -20px;
  }
}


@media (max-width: 679px){
  #page-header .banner-wrapper.home-banner{
    margin-bottom: 70px;
  }

  #page-header .banner-wrapper .login-prompt .btn-square{
    font-size: 50px;
    bottom: -45px;
  }
}


@media (max-width: 599px){
	#page-header .banner-wrapper.home-banner{
    margin-bottom: 60px;
  }

  #page-header .banner-wrapper .login-prompt .btn-square{
    font-size: 40px;
    bottom: -35px;
  }

  #page-header .logos-nav-wrapper{
    padding-bottom: 120px;
  }

  #page-header .main-nav .btn-square{
    word-spacing: 80px;
    line-height: 1.3em;
  }

  #page-header .main-nav .btn-square.one-word{
    line-height: 2.5em;
  }
}


@media (max-width: 499px) {
  .isios #page-header .banner-wrapper.home-banner,
  .issilky #page-header .banner-wrapper.home-banner,
  .isandroid #page-header .banner-wrapper.home-banner{
    margin-bottom: 0px;
  }

  #page-header .banner-wrapper.home-banner .header-banner{
    display: none;
  }

  #page-header .banner-wrapper.home-banner .header-banner-mobile{
    display: block;
  }
}


@media (max-width: 469px){
	#page-header .banner-wrapper.home-banner{
    margin-bottom: 50px;
  }

  #page-header .banner-wrapper .login-prompt .btn-square{
    font-size: 30px;
    min-width: 220px;
    bottom: -25px;
  }
}


@media (max-width: 435px){
	#page-header .banner-wrapper .login-prompt .login-task{
  	width: 142px;
  	height: 142px;
  	padding-bottom: 0;
  }
}


@media (max-width: 400px){
  #page-header .logos-nav-wrapper{
    padding-bottom: 100px;
  }

  #page-header .main-nav{
  	bottom: 15px;
  }

  #page-header .main-nav .btn-square{
    font-size: 20px;
  }

  #page-header .banner-wrapper.home-banner .header-banner{
	  height: 156px;
	  max-width: inherit;
	  width: 500px;
	  margin-left: -250px;
	  left: 50%;
	  position: relative;
	}
}


@media (max-width: 359px){
	#page-header .banner-wrapper .login-prompt .login-task{
	  width: 136px;
  	height: 136px;
	}

	#page-header .banner-wrapper .login-prompt .login-task.return-user{
	  margin-left: 5%;
	}
}

@media (max-width: 320px){
	#page-header .banner-wrapper .login-prompt .login-task.return-user{
	  margin-left: 6px;
	}
}


/*==================
  CONTENT STYLES
==================*/
.app-promo {
  margin: 0 auto 30px;
  padding-right: 30px;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;

  color: #FFFFFF;
  background-color: #007DD1;
}

    .app-promo .ios,
    .app-promo .amazon,
    .app-promo .android{
      display: none;
    }

    .app-promo .default{
      display: inline-block;
    }

    .isios .app-promo .default,
    .issilky .app-promo .default,
    .isandroid .app-promo .default{
      display: none;
    }

    .isios .app-promo .ios,
    .issilky .app-promo .amazon,
    .isandroid .app-promo .android{
      display: inline-block;
    }

    .app-promo .app-icon {
      margin: 23px auto;
      width: 200px;
      line-height: 0;
    }

    .app-promo .app-promo-content {
      margin: 12px 0 30px 30px;
      flex: 0 0 400px;
      text-align: center;
    }

        .app-promo .app-promo-content p{
          text-transform: uppercase;
          text-decoration: none;
          font-family: "PBS_KIDS_Headline", "Arial", sans-serif;
          text-align: center;
          line-height: 1em;
          margin: 0 auto 0.3em;
          font-size: 72px;
        }

        .app-promo .app-promo-content small{
          display: block;
          font-style: normal;
          line-height: 1em;
          font-size: 0.42em;
        }

        .app-promo .app-promo-content .default small{
          font-size: 0.7em;
        }

    .app-promo .app-badge-links {
      list-style: none;
      display: flex;
      margin: 4px auto 0;
      padding: 0;
      font-size: 16px;
      justify-content: center;
      align-items: center;
    }

      .app-promo .app-badge-links li {
        margin: 0 1%;
        line-height: 0;
      }


@media (min-width: 871px) {
  .app-promo .app-icon {
    display: none !important;
  }
}

@media (max-width: 870px) {
  .app-promo {
    padding-left: 30px;
  }

  .app-promo .app-promo-graphic {
    display: none !important;
  }

  .app-promo .app-promo-content {
    margin: 22px 0 30px 30px;
  }
}

@media (max-width: 649px){
  .app-promo {
    display: block;
    padding: 22px 20px 32px;
    width: 100%;
  }

  .app-promo .app-icon {
    position: absolute;
    width: 200px;
    top: 165px;
    left: 50%;
    margin: 0 0 0 -100px;
  }

  .isios .app-promo .app-icon,
  .issilky .app-promo .app-icon,
  .isandroid .app-promo .app-icon{
    top: 146px;
  }

  .app-promo .app-promo-content {
    margin: 0 auto;
    max-width: 460px;
  }

  .app-promo .app-promo-content p {
    margin-bottom: 0;
  }

  .app-promo .app-badge-links {
    margin-top: 250px;
  }
}

@media (max-width: 519px){
  .app-promo .app-badge-links {
    flex-direction: column;
    max-width: 240px;
  }

  .app-promo .app-badge-links li{
    margin: 1% 0;
  }
}

@media (max-width: 479px){
  .app-promo .app-promo-content p {
    font-size: 56px;
  }

  .app-promo .app-icon {
    top: 138px;
  }

  .isios .app-promo .app-icon,
  .issilky .app-promo .app-icon,
  .isandroid .app-promo .app-icon{
    top: 124px;
  }
}

@media (max-width: 379px){
  .app-promo {
    padding-left: 16px;
    padding-right: 16px;
  }

  .app-promo .app-promo-content p {
    font-size: 48px;
  }

  .app-promo .app-icon {
    top: 124px;
  }

  .isios .app-promo .app-icon,
  .issilky .app-promo .app-icon,
  .isandroid .app-promo .app-icon{
    top: 115px;
  }
}

#call-to-action{
  font-size: 34px;
  font-family: "Colfax-Bold", Arial, sans-serif;
  color: #FFFFFF;
  max-width: 878px;
  margin: 0 auto;
  padding: 0 8px;
  text-align: center;
}

.main-content{
  background-color: #FFDF00;
  font-family: "Colfax-Regular", Arial, sans-serif;
  padding: 0 1.04% 10px;
  box-sizing: border-box;
}

    .main-content b,
    .main-content strong,
    .main-content .bold{
      font-family: "Colfax-Bold", Arial, sans-serif;
    }

    .main-content article{
      font-size: 16px;
      color: #404041;
      background-color: #FFFFFF;
      margin: 10px auto 0;
      padding: 20px 5.106% 44px;
    }

        .main-content article p{
          line-height: 1.45em;
        }


        .main-content article h1{
          font-family: "PBS_KIDS_Headline", "Arial", sans-serif;
          font-size: 48px;
          color: #802A84;
          margin: 0 0 24px 10px;
          text-transform: uppercase;
        }

        .main-content article h2{
          font-family: "PBS_KIDS_Headline_Bold", "Arial", sans-serif;
          font-size: 36px;
          color: #000000;
          margin: 0 0 24px 10px;
          text-transform: uppercase;
        }

        .main-content article.info h2{
          color: #802A84;
          margin: 0 0 24px 0px;
        }

        .main-content article.info h3 {
          background-color: #802A84;
          color: #FFF;
          width: 50%;
          min-width: 250px;
          font-size: 1.5em;
          padding: 0.7em 0em 0.6em 0.7em;
          margin: 2em 0 0px -0.5em;
          text-transform: uppercase;
        }

        .main-content article.info a {
          color: #10BAB9;
          font-weight: bold;
        }

        .main-content article footer{
          background-color: initial;
          margin: 0;
          padding: 0;
        }

        .main-content article.info blockquote{
          background-color: #EBF9F9;
          padding: 1em;
          font-style: italic;
          margin: 1em 4.75%;
        }

            .main-content article.info blockquote p{
              margin-top: 0;
              padding-left: 0.75em;
            }

                .main-content article.info blockquote p:before,
                .main-content article.info blockquote p:after{
                  position: relative;
                }

                .main-content article.info blockquote p:before{
                  content: "\201D";
                  margin-left:-0.75em;
                }

                .main-content article.info blockquote p:after{
                  content: "\201C";
                }

            .main-content article.info blockquote cite{

            }

        .main-content ol{
          list-style: decimal;
        }

        		.main-content ol li{
						  margin-bottom: 0.5em;
						}


        .main-content article.info ul{
          list-style: none;
        }

            .main-content article.info ul li{
              margin-bottom: 0.5em;
            }

                .main-content article.info ul li:before {
                  content: "";
                  background-color: #802A84;
                  width: 0.5em;
                  height: 0.5em;
                  margin: 0.2em 0.5em 0 -1em;
                  display: block;
                  position: absolute;
                }

                .main-content article.info li b{
                	color: #802A84;
                }


@media( max-width: 799px){
  .main-content article h1,
  .main-content article h2{
    margin-bottom: 16px
  }

  .main-content article h1{
    font-size: 32px;
  }

  .main-content article h2{
    font-size: 28px;
  }
}


@media( max-width: 599px){
	#call-to-action{
	  font-size: 28px;
	}

  .main-content article h1,
  .main-content article h2{
    margin-bottom: 8px
  }

  .main-content article h1{
    font-size: 24px;
  }

  .main-content article h2{
    font-size: 22px;
  }
}


@media( max-width: 499px){
  .main-content{
    width: 100%;
  }

  .main-content article{
    font-size: 14px;
  }
}


@media (max-width: 400px){
  #call-to-action{
	  font-size: 22px;
	}
}





/*================
  FOOTER STYLES
================*/
footer{
  background-color: #F69820;
  color: #045175;
  font-size: 14px;
  font-family: "Colfax-Regular", "Arial", sans-serif;
  margin-top: 60px;
  padding-top: 40px;
  padding-bottom: 45px;
  position: relative;
}

.has-sponsor footer{
  padding-top: 140px;
  margin-top: 160px;
}

    footer .back-to-top{
      top: -200px;
      left: 100%;
      margin-left: 12px;
    }

    .has-sponsor footer .back-to-top{
      top:-300px;
    }

    footer a{
      color: inherit;
    }

    footer .app-sponsor{
      display: none;
    }

    .has-sponsor footer .app-sponsor{
      display: block;
      background: #FFF;
      position: absolute;
      top: -240px;
      height: 200px;
      overflow: hidden;
    }

        footer .app-sponsor h1{
          width: 164px;
          height: 164px;
          line-height: 164px;
          text-align: center;
          position: absolute;
          margin: 16px;
        }

            footer .app-sponsor h1 a{
              width: 100%;
              height: 100%;
              display: block;
            }

                footer .app-sponsor h1 a img{
                  display: inline-block;
                  width: 90%;
                  vertical-align: middle;
                  margin-top: -0.5em;
                }


        footer .app-sponsor .app-sponsor-message{
          font-family: "PBS_KIDS_Headline", "Arial", sans-serif;
          font-size: 36px;
          text-align: center;
          color: #802A84;
          padding-top: 30px;
          margin: 0 40px 0 216px;
        }

            footer .app-sponsor .app-sponsor-learn-more{
              position: absolute;
              bottom: 30px;
              right: 65px;
              text-decoration: underline;
            }


    footer .fineprint{
      float: left;
      width: 50%;
      max-width: 400px;
      padding-top: 4px;
      margin: 0;
    }

        footer .cpblogo{
          width: 77px;
          float: left;
          margin-top: -4px;
          margin-right: 12px;
        }

        		footer .cpblogo img{
		        	width: 100%;
		        }


    footer .footerlinks{
      float: right;
      padding: 0;
      margin: 0;
      text-align: right;
      line-height: 2em;
      width: 48%;
    }

        footer .footerlinks li{
          list-style: none;
          display: inline;
          margin-left: 4px;
          white-space: nowrap;
        }

            footer .footerlinks li a{
              margin-right: 5px;
              text-decoration: underline;
            }


@media (max-width: 1300px){
  footer .back-to-top{
    display: none;
  }
}

@media (max-width: 749px){
  footer{
    font-size: 0.8em;
  }

      footer .fineprint{
        width: 60%;
      }

      footer .footerlinks{
        width: 35%
      }
}


@media (max-width: 599px){
  footer .fineprint{
    float: none;
    margin: 10px auto;
    width: 285px;
  }

      footer .fineprint .cpblogo{
        width: 90px;
      }

  footer .footerlinks{
    float: none;
    width: 100%;
    text-align: center;
    margin-top: 40px;
  }
}



/*================
  VIDEO TRAILER
================*/
#trailer{
  margin-top: 4.375%;
}



/*================
  KART CODES
================*/
.kartcodes{
    background: #2FC0F0;
}
    .kartcodes section[role='main']{
      padding-bottom: 140px;
    }

    .kartcodes section[role='main']:before{
      content:"";
      width: 100%;
      height: 260px;
      position: absolute;
      bottom: 0;
      background: #0869B2;
    }

    .kartcodes .main-content{
      background: none;
      padding: 0;
    }

        .kartcodes .main-content article{
          background: #EC2472;
          padding-top: 0;
          padding-left: 0;
          padding-right: 0;
          color: #FFFFFF;
        }

            .kartcodes .main-content article h1{
              margin-left:0;
              margin-right:0;
              width:100%;
              background: #FFFFFF;
              text-align: center;
            }


  .kartcodes .kart-steps{
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

      .kartcodes .kart-steps li{
        text-align: right;
        padding: 36px 36px 36px 0;
        display: block;
      }

      .kartcodes .kart-steps li > *{
        display: inline-block;
        direction: ltr;
      }

      .kartcodes .kart-steps li figure{
        position: relative;
      }

      .kartcodes .kart-steps li.step2{
        text-align: left;
        direction: rtl;
        padding: 36px 0 36px 36px;
        position: relative;
        z-index: 2;
      }

      .kartcodes .kart-steps li.step1 figure:before,
      .kartcodes .kart-steps li.step3 figure:before{
        background-image:url('https://www-tc.pbskids.org/kartkingdom/assets/images/dotted-path.svg');
      }

      .kartcodes .kart-steps li.step1 figure:before,
      .kartcodes .kart-steps li.step3 figure:before{
        content:"";
        background-repeat: no-repeat;
        position: absolute;
        width: 510px;
        height:300px;
        top: 75%;
        left: -70%;
        background-position: 0 top;
      }

      .kartcodes .kart-steps li.step3 figure:before{
        top: -75%;
        background-position: 0 bottom;
      }


          .kartcodes .kart-steps li .copy{
            vertical-align: top;
            font-family: "PBS_KIDS_Headline", "Arial", sans-serif;
            font-size: 1.5em;
            width: 300px;
            margin-right: 26px;
          }

          .kartcodes .kart-steps li.step1 .copy{
            padding-top: 10%;
          }

          .kartcodes .kart-steps li.step2 .copy{
            padding-top: 15%;
            text-align: left;
            margin-right: 0;
            margin-left: 26px;
          }

          .kartcodes .kart-steps li.step3 .copy{
            padding-top: 18%;
          }

          .kartcodes .kart-steps li figure{
            border: solid 8px #FFFFFF;
            border-radius: 10px;
          }

              .kartcodes .kart-steps li figure img{
                display: block;
                position:relative;
              }

              .kartcodes .kart-steps li figure figcaption{
                background: #FFFFFF;
                font-family: "PBS_KIDS_Headline", "Arial", sans-serif;
                font-size: 1.25em;
                color: #933C96;
                position: absolute;
                border-radius: 0 0 1em 0;
                padding: 0.25em 0.8em 0.45em 0.6em;
                text-transform: uppercase;
                z-index: 2;
              }

              .kartcodes .kart-steps li figure figcaption:before,
              .kartcodes .kart-steps li figure figcaption:after{
                content: "";
                position: absolute;
                width: 20px;
                height: 20px;
                border-radius: 20px 0 0;
                border-top: solid 8px #FFFFFF;
                border-left: solid 8px #FFFFFF;
                box-sizing: border-box;
              }

              .kartcodes .kart-steps li figure figcaption:before{
                top: -8px;
                right: -12px;
              }

              .kartcodes .kart-steps li figure figcaption:after{
                left: -8px;
                bottom: -12px;
              }

@media (max-width: 880px){
  .kartcodes .kart-steps {
    text-align: center;
    padding: 0 5.106%;
  }

  .kartcodes .kart-steps li{
    text-align: left;
    padding: 36px 0!important;
    margin: 0 auto;
    direction: ltr !important;
    display: inline-block;
  }

      .kartcodes .kart-steps li .copy{
        display: block;
        width: auto;
        padding-top: 0 !important;
        margin: 0 !important;
      }

      .kartcodes .kart-steps li.step1 figure:before,
      .kartcodes .kart-steps li.step3 figure:before{
        content: none;
      }

}



/*================
  LOGIN OVERLAY
================*/
#login-header{
  background: url('https://www-tc.pbskids.org/kartkingdom/assets/images/login-frame-header.svg') no-repeat center 0;
  position: absolute;
  width: 810px;
  height: 237px;
  z-index: 10;
  bottom: 100%;
  margin-left: -405px;
  margin-bottom: -10px;
  left: 50%;
}

#login-progress{
  width: 450px;
  height: 80px;
  background: #98C800;
  margin: 14px auto 0;
  border: solid 7px #587200;
  border-top: none;
  border-radius: 0 0 20px 20px;
  position: relative;
  top: 100%;
}


    #login-steps{
      width: 275px;
      position: relative;
      margin: 0 auto;
      top: 50%;
      background: #039FD2;
      height: 10px;
      margin-top: -4px;
      border: solid 2px #7DDDF7;
      list-style: none;
      padding: 0;
    }

        #login-steps:after{
          content:"";
          position: absolute;
          background: url('https://www-tc.pbskids.org/kartkingdom/assets/images/signup-progress-kart.svg') no-repeat center center;
          background-size: 100%;
          width: 58px;
          height: 55px;
          margin: -32px 0 0 -29px;
          top: 50%;
          left:0;
          -webkit-transition: all 600ms cubic-bezier(.49,.24,.3,1.23);
                  transition: all 600ms cubic-bezier(.49,.24,.3,1.23);
        }

        #login-steps.create-password:after{
          left: 33.333333333%;
          content:" ";
        }

        #login-steps.create-secretcode:after{
          left: 66.666666666%;
          content:"";
        }

        #login-steps.complete-print:after{
          left:100%;
          content:" ";
        }

        #login-steps .login-step{
          position: absolute;
          background: #812A88;
          width: 30px;
          height: 30px;
          border-radius: 30px;
          border: solid #FFFFFF 3px;
          margin-top: -15px;
          margin-left: -15px;
          top: 50%;
        }

        #login-steps .login-step.step2{
          margin-left: -15px;
          left: 33.333333333%;
        }

        #login-steps .login-step.step3{
          left: 66.666666666%;
        }

        #login-steps .login-step.step4{
          width:36px;
          height:36px;
          margin-top: -18px;
          margin-left: -16px;
          background-color: #FF4E00;
          left:100%;
        }



/*================
  ERROR PAGES
================*/
.error-page{
  padding:0!important;
  background: none!important;
  border: none!important;
}

    .error-page header{
      background: #046699;
    }
        .error-page h1{
          background: #449C47;
          text-align: center;
          margin: 0!important;
          padding-top: 30px;
        }

          .error-page h1 .error-message{
            display: none;
          }

          .error-page h1 .error-code{
            color: #70C066;
            font-family: "PBS_KIDS_Headline", "Arial", sans-serif;
            font-size: 560px;
            letter-spacing: 0;
            line-height: 0.75em;
            overflow: hidden;
            display: block;
          }


        .error-page h2{
          padding-bottom: 72px;
          position:relative;
        }

            .error-page h2 .back-to-prev{
              bottom: 50%;
              left:0;
              height: 142px;
              padding-bottom: 6.042%;
            }

            .error-page h2 img{
              height: 534%;
              position: absolute;
              display: block;
              right: 2%;
              bottom: 50%;
              margin-bottom: -8px;
            }

    .error-page p{
      color: #FFFFFF;
      font-size: 34px;
      font-family: "Colfax-Bold", "Arial", sans-serif;
      text-align: center;
    }


@media (max-width: 1299px){
  .error-page h2 {
    padding-bottom: 5.5385%;
  }
}


@media (max-width: 1039px){
  .error-page h1 .error-code{
    font-size: 500px;
  }
}


@media (max-width: 999px){
  .error-page h1 .error-code{
    font-size: 400px;
  }
}


@media (max-width: 749px){
  .error-page h1 .error-code{
    font-size: 300px;
  }
}


@media (max-width: 599px){
  .error-page h1 .error-code{
    font-size: 220px;
  }

  .error-page h2 .back-to-prev{
    padding-bottom: 0;
    height: auto;
    bottom: 4px;
  }

    .error-page h2 .back-to-prev:before,
    .error-page h2 .back-to-prev:after{
      display: none;
    }

    .error-page h2 .back-to-prev a{
      width: 400%;
      height: auto;
      padding-bottom: 400%;
    }
}


@media (max-width: 549px){
  .error-page h2 .back-to-prev{
    display: none;
  }
}


@media (max-width: 400px){
  .error-page h1 .error-code{
    font-size: 150px;
  }

  .error-page p{
    font-size: 22px;
  }
}




/*================
  MISC.
================*/
.hidden{
  display: none !important;
  visibility: none !important;
}