/*
 * NAVIGATION
 */
#site-navigation, #site-header {
   pointer-events: none;
}

#site-navigation li, #site-header a {
   pointer-events: auto;
}

/* IE11 on Win 8 doesn't seem to handle nested pointer-events correctly, so we compensate. */
.ie-browser #site-navigation, .ie-browser #site-header {pointer-events: auto;}
.ie-browser #site-navigation {width: 80%;}
.ie-browser.small-site #site-navigation, .ie-browser.medium-site #site-navigation {background-position: 50% 108%;}
/* end of IE hack */

/*
 * CONVEYOR
 */
.small-site main {
    height: auto !important
}

#content {
    position: relative;
    /* position: absolute; */
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 105%;
}

#content-bar {
    top: 6%;
    bottom: 7.2%;
    width: 100%;
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}

.small-site #content-bar {
    overflow-x: hidden;
    overflow-y: hidden;
    height: inherit;
    position: relative;
}


#content-bar::-webkit-scrollbar {
    height: 0;
    width: 0;
}

@media screen\0 {
    #content-bar {
        overflow: hidden;
    }
}

@-moz-document url-prefix() {
    #content-bar {
        overflow: hidden;
    }
}

#page-container {
    top: 5%;
    bottom: 5%;
    white-space: nowrap;
    position: absolute;
    /*position: relative;*/
    left: 0;

    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -ms-transition: left 1s;
    transition: left 1s;
}

#page-container.wipe,
#page-container.start {
    left: 100%;
}

.small-site #page-container {
    position: relative;
    height: auto;
}

#conveyor {
    background: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/conveyor.png") repeat-x;
    background-size: auto 100%;
    height: 100%;
    position: absolute;
    left: 0;

    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -ms-transition: left 1s;
    transition: left 1s;
}

#conveyor.wipe,
#conveyor.start {
    left: 100%;
}

#anti-conveyor {
    background: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/conveyor.png") repeat-x;
    background-size: auto 100%;
    background-position-x: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    right: 100%;

    -webkit-transition: right 1s;
    -moz-transition: right 1s;
    -ms-transition: right 1s;
    transition: right 1s;
}

#anti-conveyor.wipe,
#anti-conveyor.start {
    right: 0%;
}

.small-site #conveyor {
    display: none;
}

.page {
    height: 100%;
    position: relative;
    display: inline-block;
}

.small-site .page {
    height: auto;
}

.page.narrow {
    width: 50%;
} 

.page.wide {
    width: 100%;
}

.page.filler {
    width: 52%;
}

.slot {
    position: relative;
    float: left;
}

.slot.small {
    width: 50%;
    padding-bottom: 30.4%; /*28.085%;*/
    margin-bottom: -1.4%;
}

.page.narrow .slot.small {
    width: 100%;
    padding-bottom: 60.795%; /*56.17%;*/
    margin-bottom: -2.5%;
}

.slot.large {
    width: 100%;
    padding-bottom: 58.19%; /*56.17%*/
    
}

.block {
    cursor: pointer;
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.slot.large .block {
    margin: 1%;
    padding: 0.4%;
}

.slot.small .block {
    margin: 2%;
    padding: 1%;
}

.block.game {

}

.block.printable {

}

.block-image {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    width: 100%;
}

.slot.large .block-image{
    padding-right: 3.3%;
    padding-left: 2.8%;
    padding-top: 2.9%;
    padding-bottom: 1.7%;
}

.slot.small .block-image{
    padding-right: 3%;
    padding-left: 3.7%;
    padding-top: 3.2%;
    padding-bottom: 1.2%;
}

.block-frame {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.slot.large .block-frame {
    background-size: 100% 100%;
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/content-frame-large.png");
}

.slot.small .block-frame {
    background-size: 100% 100%;
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/content-frame-small.png");
}

.decal {
    width: 11.783%;
    height: 15.815%;
    background-size: 200% 500%;
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/category-icons.png");
    background-repeat: no-repeat;
    position: absolute;
}

.small .decal {
    width: 15.637%;
    height: 21.35%;
}

.decal.new {
    background-position: 0% 0%;
}

.en-español .decal.new {
    background-position: 0% 25%;
}


.decal.lyrics {
    background-position: 100% 100%;
}

.decal.craft {
    background-position: 100% 50%;
}

.decal.coloring {
    background-position: 100% 25%;
}

.decal.activity {
    background-position: 100% 75%;
}

.decal.top_left {
    left: 0.9%;
    top: 1.7%;
}

.decal.top_right {
    right: 1.2%;
    top: 1.7%;
}

.decal.bottom_left {
    left: 0.9%;
    bottom: 2%;
}

.decal.bottom_right {
    right: 1.2%;
    bottom: 1.8%;
}

.small .decal.top_left {
    left: 1.8%;
    top: 3.4%;
}

.small .decal.top_right {
    right: 0.7%;
    top: 2.5%;
}


.small .decal.bottom_left {
    left: 2.1%;
    bottom: 2.6%;
}

.small .decal.bottom_right {
    right: 1.1%;
    bottom: 2.6%;
}

.arrow {
    width: 128px;
    height: 192px;
    position: absolute;
    /*display: none;*/
    overflow: hidden;

    -webkit-transition: width 0.25s;
    -moz-transition: width 0.25s;
    -ms-transition: width 0.25s;
    transition: width 0.25s;
}

.arrow.hide-arrow{
    width: 0;
}

.arrow.left {
    left: -1px;
    cursor: pointer;
    transform-origin: bottom left;
}

.arrow.right {
    right: 380px;
    cursor: pointer;
    transform-origin: bottom right;
}

#arrow-innards {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    
}

#left-arrow #arrow-innards {
    left: 0%;
    background-size: 200% 100%;
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/content-left.png");

    -webkit-transition: left 0.25s;
    -moz-transition: left 0.25s;
    -ms-transition: left 0.25s;
    transition: left 0.25s;
}

#left-arrow #arrow-innards:hover {
    background-position-x: 100%;
}

#left-arrow.hide-arrow #arrow-innards{
    left: -100%;
}


#right-arrow #arrow-innards {
    right: 0%;
    background-size: 200% 100%;
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/content-left.png");
    -webkit-transition: right 0.25s;
    -moz-transition: right 0.25s;
    -ms-transition: right 0.25s;
    transition: right 0.25s;
}

#right-arrow #arrow-innards:hover {
    background-position-x: 100%;
}

#right-arrow.hide-arrow #arrow-innards{
    right: 100%;
}

#content-machine {
    border-width: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 410px;
    height: 1200px;
    transform-origin: top right;
    display: none;
}

.machine-foot {
    height: 11.5%;
    position: absolute;
    bottom: 0;
}

.small-site .machine-foot{
    display: none;
}

#machine-foot-0 {
    right: 85%;
}

#machine-foot-1 {
    right: 65%;
}

#machine-foot-2 {
    right: 45%;
}

#machine {
    height: 100%;
    position: absolute;
    bottom: 0.5%;
    right: 0;
    z-index: 0;
}

.small-site #machine{
    display: none;
}

#machine-lip {
    height: 100%;
    position: absolute;
    bottom: 0.5%;
    right: 0;
    z-index: 0;
}   

.small-site #machine-lip{
    display: none;
}

#print-category-buttons {
    position: absolute;
    width: 589px; /* 0.9 * 654*/
    height: 170px;
    transform-origin: bottom right;
    overflow-x: hidden;
    opacity: 0;
}

#print-category-buttons-fill {
    position: relative;
    width: 110%; /* 654px;*/
    height: 100%;
}

.print-category {
    cursor: pointer;
    background-image:  url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/print-category-arm.png");
    float: left;
}

#lyrics-button {
    width: 16.666%;
    height: 100%;
    position: relative;
    background-size: 600% 200%;
    background-position: 0 0;
}

#lyrics-button.pressed {
    background-position: 0 100%;
}

#craft-button {
    width: 16.666%;
    height: 100%;
    position: relative;
    background-size: 600% 200%;
    background-position: 20% 0;
}

#craft-button.pressed {
    background-position: 20% 100%;
}


#color-button {
    width: 16.666%;
    height: 100%;
    position: relative;
    background-size: 600% 200%;
    background-position: 40% 0;
}

#color-button.pressed {
    background-position: 40% 100%;
}

#activity-button {
    width: 16.666%;
    height: 100%;
    position: relative;
    background-size: 600% 200%;
    background-position: 60% 0;
}

#activity-button.pressed {
    background-position: 60% 100%;
}

#faux-button {
    cursor: initial;
    width: 33.333%;
    height: 100%;
    position: relative;
    background-size: 300% 200%;
    background-position: 100% 0;
}

.print-category.button-boing:hover,
.arrow.button-boing:hover {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
}