@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: 50px;
  left: 20px;
  max-width: 50px;
  min-width: 50px;
}

a {
    color:#ed1872;
}

#retireText {
    margin: 15% 5% 4% 0%;
    width:95%;
    float:left;
    line-height: 1.2;
    text-align:center;
}

#retireText h1 {
    font-family: 'PBS_KIDS_Headline_Bold';
    font-size: 44pt;
    color: #fff; 
    display:block;
}

#retireText h2 {
    font-family: 'PBS_KIDS_Headline';
    font-size: 30pt;
    color: #fff; 
    display:block;
    margin-top:30px;
}

#retireText p {
    font-family: 'Colfax-Regular';
    font-size: 18pt;
    margin-bottom: 0px;
    margin-top: 0px;
    color: #fff;
    display:block;
}

.boxButton.boxyBox {
    margin-left:20%;
}
.boxButton {
    width:18%;
    float: left;
    margin: 0 2% 5% 0;
}

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

.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;
}

/* Clifford */

body.clifford {
    background: 
        url(../images/cliffordbg.jpg) 
        repeat               
        #60BB57;   
}

#retireText.cliffordtext {
    margin: 15% 5% 0% 0%;
    width:100%;
    line-height: 1.2;
    text-align:center;
}

#retireText.cliffordtext h1 {
    font-family: 'PBS_KIDS_Headline';
    font-size: 44pt;
    font-weight: normal;
    letter-spacing: 1px;
    color: #fff; 
    display:block;
}

#retireText.cliffordtext h3 {
    font-family: 'Colfax-Medium';
    font-size: 22pt;
    font-weight: normal;
    letter-spacing: 1px;
    color: #146007; 
    display:block;
    clear: both;
    padding: 20px 10px;
    margin: 35px 0 65px;
    box-sizing: border-box;
    position: relative;
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(255, 255, 255);
    /* RGBa with 0.6 opacity */
    background-color: rgba(255, 255, 255, 0.3);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
}

.cliffordimg img {
    width:100%;
      max-width: 800px;
      height: auto;
}

@media only screen and (max-width: 1280px) {
    
}
@media only screen and (max-device-width: 1280px) and (orientation:portrait) {   
    .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) {   
    .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);
    }
    #retireText{
        width:100%;
        margin-left:0%;
    }

}
@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);
    }
    #retireText{
        width:100%;
        margin-left:0%;
    }
}
@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);
    }
    #retireText{
        width:100%;
        margin-left:0%;
    }
}

@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.boxyBox {
        margin-left: 2%;
    }
    .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;
    }
    
    #retireText{
        -ms-transform: scale(.9);
        -webkit-transform: scale(.9);
        transform: scale(.9);
        margin:15% 0px 3% 0px;
        width:95%;
        text-align:center;
    }
    #retireText.cliffordtext h3 {
        margin: 35px 0 -39px;
    }
}
@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;
    }
    #retireText{
        -ms-transform: scale(.9);
        -webkit-transform: scale(.9);
        transform: scale(.9);
        margin:10% 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;
    }
    #retireText{
        width:100%;
        margin:25% 0px 4% 0px;
        text-align:center;
    }
    .boxButton.boxyBox {
        margin-left: 31%;
    }
    .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%;
    }
    #retireText.cliffordtext h1 {
        font-size: 36pt;
    }
    #retireText.cliffordtext h3 {
        font-size: 16pt;
        margin: 35px 0 5px;
    }
    
    #retireText.cliffordtext {
        margin: 20% 5% 0% 0%;
    }
}
@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;
    }
    #retireText{
        width:100%;
        margin:20% 0px 4% 0px;
        text-align:center;
    }
    #retireText h1 {
        font-family: 'PBS_KIDS_Headline_Bold';
        font-size: 46pt;
        color: #fff; 
    }
    #retireText p {
        font-family: 'Colfax-Bold';
        font-size: 18pt;
        color: #fff;
    }
    #kidsLogo {
      top: 40px;
      left: 40px;
      width: 100%;
      -ms-transform: scale(1.5);
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
    }
    .boxButton.boxyBox {
        margin-left: 32%;
    }
    .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.boxyBox {
        margin-left: 1%;
    }
    .boxButton, .boxButtonend{
        width:100%;
        -ms-transform: none;
        -webkit-transform: none;
        transform: none;
        margin-left:1%;
        text-align:center;
    }
}

@media only screen and (max-width: 480px) {
    .search-box .input-group input[type=text] {
        width: 88%;
        min-width: 252px;
    }
    #retireText h1 {
        font-size: 34pt;
    }
    #retireText.cliffordtext {
        margin: 30% 5% 0% 0%;
    }
}

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

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

}