@font-face {
  font-family: 'Colfax-Regular';
  src: url('../fonts/ColfaxWebRegular.eot'),
  url('../fonts/ColfaxWebRegular.woff') format('woff');/* IE9 Compat Modes */
  /* Modern Browsers */
}
@font-face {
  font-family: 'Colfax-Regular';
  font-style: italic;
  src: url('../fonts/ColfaxWebRegularItalic.eot'),
  url('../fonts/ColfaxWebRegularItalic.woff') format('woff');/* IE9 Compat Modes */
  /* Modern Browsers */
}
@font-face {
  font-family: 'Colfax-Medium';
  src: url('../fonts/ColfaxWebMedium.eot'),
  url('../fonts/ColfaxWebMedium.woff') format('woff');/* IE9 Compat Modes */
  /* Modern Browsers */
}
@font-face {
  font-family: 'Colfax-Medium';
  font-style: italic;
  src: url('../fonts/ColfaxWebMediumItalic.eot'),
  url('../fonts/ColfaxWebMediumItalic.woff') format('woff');/* IE9 Compat Modes */
  /* Modern Browsers */
}
@font-face {
  font-family: 'Colfax-Bold';
  src: url('../fonts/ColfaxWebBold.eot'),
  url('../fonts/ColfaxWebBold.woff') format('woff');/* IE9 Compat Modes */
  /* Modern Browsers */
}
@font-face {
  font-family: 'Colfax-Bold';
  font-style: italic;
  src: url('../fonts/ColfaxWebBoldItalic.eot'),
  url('../fonts/ColfaxWebBoldItalic.woff') format('woff');/* IE9 Compat Modes */
  /* Modern Browsers */
}
@font-face {
  font-family: 'PBS_KIDS_Headline';
  src: url('../fonts/pbskidsheadline-regular-webfont.eot'),
  url('../fonts/pbskidsheadline-regular-webfont.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pbskidsheadline-regular-webfont.ttf') format('truetype'), /* iOS 4.2+ */
  url('../fonts/pbskidsheadline-regular-webfont.svg') format('svg');/* IE9 Compat Modes */
  /* Older iOS */
}
@font-face {
  font-family: 'PBS_KIDS_Headline_Bold';
  src: url('../fonts/pbskidsheadline-bold-webfont.eot'),
  url('../fonts/pbskidsheadline-bold-webfont.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pbskidsheadline-bold-webfont.ttf') format('truetype'), /* iOS 4.2+ */
  url('../fonts/pbskidsheadline-bold-webfont.svg') format('svg');/* IE9 Compat Modes */
  /* Older iOS */
}

body {
    background: #1be8cf;
}

#wrapper {
    max-width: 1268px;
    margin: auto;
}

#kidsLogo {
  display: block;
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  max-width: 50px;
  min-width: 50px;
}

#whoopsText {
    margin: 4% 0 4% 0;
    width:58.7%;
    float:left;
    line-height: 1.5;
}

.whoopsTextbig {
    font-family: 'PBS_KIDS_Headline_Bold';
    font-size: 60pt;
    color: #fff;
}

.whoopsTextsmall {
    font-family: 'Colfax-Regular';
    font-size: 15pt;
    color: #fff;
}

.boxButton {
    width:18%;
    float: left;
    margin: 0 2% 0 0;
}

.boxButtonend {
    width:18%;
    float: left;
    margin: 0;
}

#fallingKidsbox {
    float: left;
    height: 407px;
    width:41.3%;
    margin:0 0 7% 0;
}

.kidOne {
    height: 715px;
    width:10%;
    background: url('../images/kid1.svg') no-repeat center;
    background-size: contain;
    position:absolute;
    margin: 0 0 0 15%;
}

.kidTwo {
    height: 576px;
    width:8%;
    background: url('../images/kid2.svg') no-repeat center;
    background-size: contain;
    position:absolute;
    margin: 0 0 0 5%;
}

.kidThree {
    height: 329px;
    width:13%;
    background: url('../images/kid3.svg') no-repeat center;
    background-size: contain;
    position:absolute;
    margin:0 0 0 14%;
}

.search-box {
    background-color: #6bf0e0;
    clear: both;
    padding: 20px 0;
    margin: 20px 0 150px;
    box-sizing: border-box;
    position: relative;
    *zoom: 1;
}

.search-box:before,
.search-box:after {
    content: "";
    display: table;
}

.search-box:after {
    clear: both;
}

.search-box .input-group {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.search-box .input-group label {
    color: #008791;
    font-family: Colfax-Regular, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.4;
    font-style: normal;
    display: block;
    text-align: center;
    margin-bottom: 14px;
}

.search-box .input-group input[type=text] {
    border: none;
    outline: none;
    background-color: #fff;
    color: #008791;
    padding: 20px;
    margin-right: 14px;
    float: left;
    width: 65%;
    font-family: Colfax-Bold, Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.4;
    font-style: normal;
}

.search-box .input-group .phat-button {
    display: block;
    position: static;
    width: 26%;
    font-size: 28px;
    text-align: center;
    margin-top: 2px;
    padding: 18px 20px 13px;
}

.search-box .input-group .phat-button:hover {
    margin-top: 7px;
}

.search-box input[type=text],
.search-box label {
    color: #0869b2;
}

.search-box .phat-button {
    border-color: #ce1569;
    background-color: #f41971;
}

.phat-button.show-all {
    border-color: #ce1569;
    background-color: #f41971;
}

.phat-button {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-style: none none solid;
    border-width: medium medium 10px;
    color: #fff;
    float: left;
    font-family: PBS_KIDS_Headline, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 1px;
    outline: medium none;
    text-decoration: none;
    text-rendering: optimizelegibility;
    text-transform: uppercase;
    transition: margin-top 0.15s ease 0s, margin-bottom 0.15s ease 0s, border 0.15s ease 0s, padding 0.15s ease 0s, top 0.15s ease 0s, bottom 0.15s ease 0s, width 0.15s ease 0s, height 0.15s ease 0s;
    z-index: 100;
}

.phat-button.magenta {
    border-color: #ce1569;
}

.phat-button.hovered,
.phat-button:hover,
.phat-button:focus {
    cursor: pointer;
    border-bottom-width: 6px;
    margin-top: 18px;
    text-decoration: none;
}

.phat-button.tapped,
.phat-button.clicked {
    border-bottom-width: 0px;
    margin-top: 24px;
    text-decoration: none;
}

.pbsKidsHomeBox a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 133px;
    width: 236px;
    margin: 0 auto;
    background: #fee000;
}

.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

.slideDown2 {
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-fill-mode: backwards;
    -webkit-animation-fill-mode: backwards;
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

.slideDown3 {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-fill-mode: backwards;
    -webkit-animation-fill-mode: backwards;
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

@keyframes slideDown {
    0% {
        transform: translateY(-200%);
    }
    50% {
        transform: translateY(8%);
    }
    65% {
        transform: translateY(-4%);
    }
    80% {
        transform: translateY(4%);
    }
    95% {
        transform: translateY(-2%);
    }
    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-200%);
    }
    50% {
        -webkit-transform: translateY(8%);
    }
    65% {
        -webkit-transform: translateY(-4%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    95% {
        -webkit-transform: translateY(-2%);
    }
    100% {
        -webkit-transform: translateY(0%);
    }
}

@media only screen and (max-width: 1280px) {
    .kidOne {
        width:12%;
        margin: 0 0 0 20%;
    }

    .kidTwo {
        width:10%;
        margin: 0 0 0 7%;
    }

    .kidThree {
        width:16%;
        margin:0 0 0 19%;
    }
}
@media only screen and (max-device-width: 1280px) and (orientation:portrait) {
    .kidOne {
        width:12%;
        margin: 0 0 0 20%;
    }
    .kidTwo {
        width:10%;
        margin: 0 0 0 7%;
    }
    .kidThree {
        width:16%;
        margin:0 0 0 19%;
    }
    .boxButton{
        width:1%;
        -ms-transform: scale(.75);
        -webkit-transform: scale(.75);
        transform: scale(.75);
        margin:0 19% 0 0;
    }
    .boxButtonend{
        width:1%;
        -ms-transform: scale(.75);
        -webkit-transform: scale(.75);
        transform: scale(.75);
        margin:0px;
    }
}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
    .kidOne {
        width:12%;
        margin: 0 0 0 20%;
    }
    .kidTwo {
        width:10%;
        margin: 0 0 0 7%;
    }
    .kidThree {
        width:16%;
        margin:0 0 0 19%;
    }
    .boxButton{
        width:1%;
        -ms-transform: scale(.95);
        -webkit-transform: scale(.95);
        transform: scale(.95);
        margin:0 19% 0 0;
    }
    .boxButtonend{
        width:1%;
        -ms-transform: scale(.95);
        -webkit-transform: scale(.95);
        transform: scale(.95);
        margin:0px;
    }
}

@media only screen and (max-width: 1024px) {
    .boxButton{
        width:19%;
        margin: 0 1.7% 0 0;
        -ms-transform: scale(.8);
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    .boxButtonend{
        width:19%;
        -ms-transform: scale(.8);
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    #fallingKidsbox
    {
        width:37%;
        height:397px;
    }
    #whoopsText{
        width:60%;
        margin-left:2%;
    }
    .kidOne {
        height: 703px;
        width:15%;
        margin-left:18%;
    }

    .kidTwo {
        width:11%;
        margin-left:3%;
    }

    .kidThree {
        width:20%;
        margin-left:15%;
    }
}
@media only screen and (max-device-width: 1024px) and (orientation:portrait)  {
    .boxButton{
        width:19%;
        margin: 0 1.7% 0 0;
        -ms-transform: scale(.8);
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    .boxButtonend{
        width:19%;
        -ms-transform: scale(.8);
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    #fallingKidsbox
    {
        width:37%;
        height:397px;
    }
    #whoopsText{
        width:60%;
        margin-left:2%;
    }
    .kidOne {
        height: 703px;
        width:15%;
        margin-left:18%;
    }

    .kidTwo {
        width:11%;
        margin-left:3%;
    }

    .kidThree {
        width:20%;
        margin-left:15%;
    }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape)  {
    .boxButton{
        width:19%;
        margin: 0 1.7% 0 0;
        -ms-transform: scale(.8);
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    .boxButtonend{
        width:19%;
        -ms-transform: scale(.8);
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    #fallingKidsbox
    {
        width:37%;
        height:397px;
    }
    #whoopsText{
        width:60%;
        margin-left:2%;
    }
    .kidOne {
        height: 703px;
        width:15%;
        margin-left:18%;
    }

    .kidTwo {
        width:11%;
        margin-left:3%;
    }

    .kidThree {
        width:20%;
        margin-left:15%;
    }
}

@media only screen and (max-width: 850px) {
    .search-box {
        padding: 20px 0 6px;
    }
    .search-box .input-group {
        -ms-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    .boxButton{
        width:30%;
        -ms-transform: scale(.99);
        -webkit-transform: scale(.99);
        transform: scale(.99);
        margin:4% 4% 4% 0px;
    }
    .boxButtonend{
        width:30%;
        -ms-transform: scale(.99);
        -webkit-transform: scale(.99);
        transform: scale(.99);
        margin:4% 0 4% 0;
    }
    #fallingKidsbox
    {
        width:100%;
        height:355px;
        margin:0px;
    }
    .kidOne {
        height:548px;
        margin-left:51%;
        width:16%;
    }
    .kidTwo {
        height:454px;
        margin-left:32%;
        width:13%
    }
    .kidThree {
        height:259px;
        margin-left:48%;
        width:21%;
    }

    #whoopsText{
        -ms-transform: scale(.9);
        -webkit-transform: scale(.9);
        transform: scale(.9);
        margin:0px 0px 3% 0px;
        width:100%;
        text-align:center;
        width:100%;
    }
}
@media only screen and (max-device-width: 850px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation:landscape) {
    .search-box {
        padding: 20px 0 6px;
    }
    .search-box .input-group {
        -ms-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    .boxButton{
        width:10%;
        -ms-transform: scale(1.25);
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
        margin:4% 24.2% 4% 1%;
        text-align: center;
    }
    .boxButtonend{
        width:10%;
        -ms-transform: scale(1.25);
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
        margin:4% 0 4% 0;
        text-align: center;
    }
    #fallingKidsbox{
        width:100%;
        height:355px;
        margin:0px;
    }
    .kidOne {
        height:548px;
        margin-left:51%;
        width:16%;
    }
    .kidTwo {
        height:454px;
        margin-left:32%;
        width:13%
    }
    .kidThree {
        height:259px;
        margin-left:48%;
        width:21%;
    }
    #whoopsText{
        -ms-transform: scale(.9);
        -webkit-transform: scale(.9);
        transform: scale(.9);
        margin:0px 0px 3% 0px;
        width:100%;
        text-align:center;
        width:100%;
    }
}

@media only screen and (max-width: 700px) {
    .all-page .section-panel .search-box .input-group input[type=text] {
        width: 55%;
        margin-left: 6%;
    }
    .search-box .input-group .phat-button {
        width: 150px;
    }
    .boxButton{
        width:4%;
        -ms-transform: scale(.84);
        -webkit-transform: scale(.84);
        transform: scale(.84);
    }
    .boxButtonend{
        width:4%;
        -ms-transform: scale(.84);
        -webkit-transform: scale(.84);
        transform: scale(.84);
        margin:0px;
    }
    #fallingKidsbox
    {
        width:100%;
        height:230px;
    }
    .kidOne {
        height:368px;
        margin-left:48%;
    }
    .kidTwo {
        height:314px;
        margin-left:30%;
    }
    .kidThree {
        height:169px;
        margin-left:45%;
    }
    #whoopsText{
        width:100%;
        margin:0px 0px 4% 0px;
        text-align:center;
    }
    .boxButton{
        width:100%;
        margin: 0 0 2% 31%;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .boxButtonend{
        width:100%;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        margin:0px 0 7% 31%;
    }
}
@media only screen and (max-device-width: 700px) and (orientation:portrait) {
    .all-page .section-panel .search-box .input-group input[type=text] {
        width: 55%;
        margin-left: 6%;
    }
    .search-box .input-group .phat-button {
        width: 150px;
    }
    #fallingKidsbox
    {
        width:100%;
        height:600px;
    }
    .kidOne {
        height:968px;
        margin-left:50%;
        width:25%;
    }
    .kidTwo {
        height:754px;
        margin-left:24%;
        width:18%
    }
    .kidThree {
        height:500px;
        margin-left:46%;
        width:28%;
    }
    #whoopsText{
        width:100%;
        margin:0px 0px 4% 0px;
        text-align:center;
    }
    .whoopsTextbig {
        font-family: 'PBS_KIDS_Headline_Bold';
        font-size: 80pt;
        color: #fff;
    }
    .whoopsTextsmall {
        font-family: 'Colfax-Bold';
        font-size: 25pt;
        color: #fff;
    }
    #kidsLogo {
      top: 40px;
      left: 40px;
      width: 100%;
      -ms-transform: scale(1.5);
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
    }
    .boxButton {
        margin-bottom:4%;
    }
    .boxButton, .boxButtonend{
        width:40%;
        -ms-transform: none;
        -webkit-transform: none;
        transform: none;
        text-align:center;
        -ms-transform: scale(2.5);
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        margin-top:20%;
        margin-left:32%;
    }
    .boxButtonend{
        margin-bottom:15%;
    }
}

@media only screen and (max-width: 599px) {
    .search-box {
        padding: 10px 0;
    }
     .search-box .input-group input[type=text] {
        width: 94%;
        float: none;
        margin-left: 0;
        margin-bottom: 20px;
    }
    .search-box .input-group .phat-button {
        float: none;
        margin: 0 auto;
        width: 275px;
    }
    .boxButton, .boxButtonend{
        width:100%;
        -ms-transform: none;
        -webkit-transform: none;
        transform: none;
        margin-left:1%;
        text-align:center;
    }
    .kidOne {
        margin-left:50%;
        width:18%;
    }
    .kidTwo {
        margin-left:29%;
        width:14%
    }
    .kidThree {
        margin-left:45%;
        width:28%;
    }
}

@media only screen and (max-width: 480px) {
    .search-box .input-group input[type=text] {
        width: 88%;
        min-width: 252px;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #whoopsText {
        line-height: 1;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.slideDown {
    animation-name: slideDown2;
    -webkit-animation-name: slideDown2;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

.slideDown2 {
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-fill-mode: backwards;
    -webkit-animation-fill-mode: backwards;
    animation-name: slideDown2;
    -webkit-animation-name: slideDown2;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

.slideDown3 {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-fill-mode: backwards;
    -webkit-animation-fill-mode: backwards;
    animation-name: slideDown2;
    -webkit-animation-name: slideDown2;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}
}*/

@keyframes slideDown2 {
    0% {
        transform: translateY(-200%);
    }
    50% {
        transform: translateY(8%);
    }
    65% {
        transform: translateY(-4%);
    }
    80% {
        transform: translateY(4%);
    }
    95% {
        transform: translateY(-.1%);
    }
    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes slideDown2 {
    0% {
        -webkit-transform: translateY(-200%);
    }
    50% {
        -webkit-transform: translateY(8%);
    }
    65% {
        -webkit-transform: translateY(-4%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    95% {
        -webkit-transform: translateY(-.1%);
    }
    100% {
        -webkit-transform: translateY(0%);
    }
}