html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.mtvn-lyt-4-2, .mtvn-grid.mtvn-grid-4-2 {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}


@font-face {
    font-family:'SkaterGirlsRock-Regular';
    src: url('fonts/SkaterGirlsRock_gdi.eot');
    src: url('fonts/SkaterGirlsRock_gdi.eot?#iefix') format('embedded-opentype'),
    url('fonts/SkaterGirlsRock_gdi.woff') format('woff'),
    url('fonts/SkaterGirlsRock_gdi.ttf') format('truetype'),
    url('fonts/SkaterGirlsRock_gdi.svg#SkaterGirlsRock-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2212;
}

html,body{
    font-family: 'UnitedSansReg-Black';
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    font-size: 16px;
}
.t-d-container{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;

    margin: 0 auto;
    background-color: #3aabde;
    /*padding-bottom: 30%;*/
}

img{
    -webkit-transform: translate3d(0, 0, 0);
    /*-webkit-background-clip:padding-box*/
}

#bg{
    position: absolute;
    top: 0;
    /*width: 3000px;
    height: 1730px;*/
    width: 2544px;
    height: 1705px;
    /*background: url("img/bg.jpg") no-repeat center top;
    background-color: #44b1de;
    background-size: cover;*/
    left: 0;
    /*left: 50%;*/
    -webkit-transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    transform-origin:0% 0%
    /*-webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);*/


}
#bg-mobile{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("img/bg-mobile.jpg") no-repeat;
    background-size: cover;
    display: none;
}

#bg-mobile-img{
    width: 100%;
}




#granny{
    position: absolute;
    width: 78px;
    top: 29.8%;
    left: 29.0%;
    -webkit-transform-origin:70% 0%;
    -ms-transform-origin:70% 0%;
    transform-origin:70% 0%

}

#hutch{
    position: absolute;
    width: 237px;
    top: 1.8%;
    left: 65%;
    -webkit-transform-origin:50% 100%;
    -ms-transform-origin:50% 100%;
    transform-origin:50% 100%

}

#floor{
    position: absolute;
    width: 144px;
    top: 20.5%;
    left: 65.9%;
}

#windmill{
    position: absolute;
    width: 50.4px;
    top: 17.4%;
    left: 30.55%;


}

.wheels{
    position: absolute;
    width: 157.5px;
    top: 73.5%;
    background: url("img/bus-wheel.png");
    background-size: 100%;
    height: 116px;

}

#wheel1{
    left: 30.6%;
}

#wheel2{
    left: 59.8%;
}


#td-footer{
    position: absolute;
    width: 72%;
    bottom: 2.5%;
    text-align: center;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);

}

#footer-logo{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 12.87%;
    margin: 0 2% 0 2%;
}

#td-footer p{
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-family:'SkaterGirlsRock-Regular';
    width: 30%;
    text-align: left;
    font-size: 1em;
    margin: 0 2% 0 2%;
}

#t-d-content{
    position: relative;
    padding-top: 1px;
    width: 100%;
    height: 100%;
    max-width: 915px;
    pointer-events:none;
    margin: 0 auto;
}

#tinker-logo{
    position: absolute;
    top: 0;
    margin-top: 8%;
    max-width: 366px;
    width: 44%;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    display: block;
    pointer-events: none;
}

#tinker-logo img{
    width: 100%;
}

#signboard{
    position: relative;
    padding-top: 1px;
    background: url("img/signboard.png") no-repeat center top;
    max-width: 804px;
    width: 111%;
    padding-bottom: 95.8%;
    margin-top: 20.5%;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    background-size: 100%;
    pointer-events: all;

}

#new-epi{
    position: absolute;
    top: 0;
    left: -7%;
    width: 23.36%;
    pointer-events:none;
    -webkit-transform-origin:40% 0%;
    -ms-transform-origin:40% 0%;
    transform-origin:40% 0%
}

#rod{
    position: absolute;
    top: 0;
    left: 0;
    width: 3.08%;
    transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -ms-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
}

#new-epi img, #rod img{
    width: 100%;
}
#header{
    position: absolute;
    top: 0;
    max-width: 915px;
    width: 111%;
    margin-top: 0;
    left: 43%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    pointer-events:none;

}

#header-top{
    position: absolute;
    z-index: 3;
    top: 0;
    max-width: 915px;
    width: 111%;
    pointer-events:none;
    margin-top: 0;
    background-size: 100%;
    left: 43%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    pointer-events:none;
    transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -ms-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
}

#header img, #header-top img{
    width: 100%;

}

#nav-content{
    position: relative;
    top: 0;
    max-width: 720px;
    width: 98%;
    text-align: center;
   margin: 6.9% auto 0 auto;
}

#nav-break{
    position: absolute;
    top: 25%;
    width: 90%;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}


.nav-btn{
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    width: 30%;
    margin-left: 2%;
    margin-right: 2%;
}




#episodes-btn{
    width: 24.06%;
    padding-bottom: 6.8%;
    background: url("img/home-btn.png") no-repeat;
    margin-top: 1%;
    margin-left: 2%;
    background-size: 200%;
}

#characters-btn{
    width: 31.77%;
    padding-bottom: 6%;
    background: url("img/explore-btn.png") no-repeat;
    margin-top: 2%;
    background-size: 200%;
}

#extras-btn{
    width: 21.35%;
    padding-bottom: 6.32%;
    background: url("img/behind-btn.png") no-repeat;
    margin-top: 1%;
    background-size: 200%;
}
#episodes-btn:hover,#characters-btn:hover,#extras-btn:hover{
    background-position: 100%, 0%;
}

#episodes-btn.active,#characters-btn.active,#extras-btn.active{
    /*pointer-events:none;*/
    background-position: 100%, 0%;
}



.page-holder{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    /*padding-bottom: 55%;*/
    border-radius: 10px;
}

#vid-holder{
    position: relative;
    top: 0;
    max-width: 696px;
    width: 86%;
    margin: 6% auto 0 auto;
    /*padding-bottom: 60%;*/
}

#episodes{
    background: url("img/vid-holder.png") no-repeat;
    background-size: 100%;

}

#mobile-episodes{
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    display: none;
}

#mobile-episodes img{
    width: 100%;
}

#btn-holder{
    position: relative;

    max-width: 456px;
    width: 65.51%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
}

#ep-title{
    position: absolute;
    top: 80%;
    width: 58%;
    padding-bottom: 4%;
    background: url("img/ep-title.png?n=new") no-repeat;
    background-size: 100%;
    background-position: 0% 100%;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}

#dutch-btn{
    position: absolute;
    left: 0;
    width: 29.60%;
    max-width: 135px;
    background: url("img/dutch-anim.png");
    background-size: 2300%;
    padding-bottom: 23%;
    margin-bottom: 52%;
    bottom: 0;
}


#dutch-btn.over{
    -webkit-animation: dutch-hover 2s steps(22) infinite;
    -moz-animation: dutch-hover 2s steps(22) infinite;
    -ms-animation: dutch-hover 2s steps(22) infinite;
    -o-animation: dutch-hover 2s steps(22) infinite;
    animation: dutch-hover 2s steps(22) infinite;
    /*-webkit-animation-delay:2s;*/

}
#dutch-btn.out{
    -webkit-animation: dutch-out .7s steps(6);
    -moz-animation: dutch-out .7s steps(6);
    -ms-animation: dutch-out .7s steps(6);
    -o-animation: dutch-out .7s steps(6);
    animation: dutch-out .7s steps(6);

}

@-webkit-keyframes dutch-hover {
    100% { background-position: -2200%; }
}
@-moz-keyframes dutch-hover {
    100% { background-position: -2200%; }
}
@-ms-keyframes dutch-hover {
    100% { background-position: -2200%; }
}
@-o-keyframes dutch-hover {
    100% { background-position: -2200%; }
}
@keyframes dutch-hover {
    100% { background-position: -2200%; }
}

@-webkit-keyframes dutch-out {
    0% { background-position: -600%; }
    100% { background-position: 0%; }

}
@-moz-keyframes dutch-out {
    0% { background-position: -600%; }
    100% { background-position: 0%; }

}
@-ms-keyframes dutch-out {
    0% { background-position: -600%; }
    100% { background-position: 0%; }

}
@-o-keyframes dutch-out {
    0% { background-position: -600%; }
    100% { background-position: 0%; }

}

@keyframes dutch-out {
    0% { background-position: -600%; }
    100% { background-position: 0%; }

}



#tinker-btn{
    position: absolute;
    right: 0;
    width: 24.18%;
    max-width: 110.25px;
    background: url("img/tinker_anim.png");
    background-size: 600%;
    padding-bottom: 26%;
    margin-bottom: 55%;
    bottom:-4%;
}

#tinker-btn.over{
    -webkit-animation: tink-hover .7s steps(5) forwards;
    -moz-animation: tink-hover .7s steps(5) forwards;
    -ms-animation: tink-hover .7s steps(5) forwards;
    -o-animation: tink-hover .7s steps(5) forwards;
    animation: tink-hover .7s steps(5) forwards;

}
#tinker-btn.out{
    -webkit-animation: tink-out .7s steps(5);
    -moz-animation: tink-out .7s steps(5);
    -ms-animation: tink-out .7s steps(5);
    -o-animation: tink-out .7s steps(5);
    animation: tink-out .7s steps(5);

}

@-webkit-keyframes tink-hover {
    100% { background-position: -500%; }
}
@-moz-keyframes tink-hover {
    100% { background-position: -500%; }
}
@-ms-keyframes tink-hover {
    100% { background-position: -500%; }
}
@-o-keyframes tink-hover {
    100% { background-position: -500%; }
}
@keyframes tink-hover {
    100% { background-position: -500%; }
}

@-webkit-keyframes tink-out {
    0% { background-position: -500%; }
    100% { background-position: 0%; }

}
@-moz-keyframes tink-out {
    0% { background-position: -500%; }
    100% { background-position: 0%; }

}
@-ms-keyframes tink-out {
    0% { background-position: -500%; }
    100% { background-position: 0%; }

}
@-o-keyframes tink-out {
    0% { background-position: -500%; }
    100% { background-position: 0%; }

}

@keyframes tink-out {
    0% { background-position: -500%; }
    100% { background-position: 0%; }

}



.main-btn{
    position: absolute;
    top: 0%;
    margin-top: 28%;
    max-width: 186.75px;
    width: 40.95%;
    padding-bottom: 50%;
    cursor: pointer;

}

#or{
    position: relative;
    width: 11.35%;
    display: inline-block;
    top: 0%;
    margin: 32% auto 0 auto;
}

#or img{
    width: 100%;
}

#normal-btn{
     float: left;
     left: 0;
     background: url("img/normal.png") no-repeat;
     background-size: 200%;
 }

#interactive-btn{
    float: right;
    right: 0;
    background: url("img/interactive.png") no-repeat;
    background-size: 200%;
}

#normal-btn:active, #interactive-btn:active{
    background-position: 100% 0%;
}

.page-nav{
    position: absolute;
    top: 0%;
    margin-top: 59%;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}

.episodes{
    width: 93.86%;
    background: url("img/episodes.png") no-repeat;
    background-size: 100%;

    text-align: center;
    padding-bottom: 10%;

}

#epi-line{
    position: absolute;
    top: 32%;
    width: 50%;
    background-color: white;
    margin-left: 38%;
    padding-bottom: 1%;
}

.episode-holder{

}

#ep1{
    /*margin-left: 28%;*/
}

#x-ep1{
    margin-left: 28%;
}

.episode{
    position: relative;
    left: 0;
    display: inline-block;
    vertical-align: top;
    margin-top: 8%;
    margin-left: 2%;
    margin-right: 2%;
    padding-bottom: 17%;
    width: 13.2%;
}

#ep1{
    background: url("img/ep1.png") no-repeat;
    background-size: 200%;
}
#ep2{
    background: url("img/ep2.png") no-repeat;
    background-size: 200%;
}
#ep3{
    background: url("img/ep3.png") no-repeat;
    background-size: 200%;
}
#ep4{
    background: url("img/ep4.png") no-repeat;
    background-size: 200%;
}
#ep5{
    background: url("img/ep5.png") no-repeat;
    background-size: 200%;
}

.episode.hidden{
    background-position: 100% 0 !important;
}

.episode.hidden .lock{
    display: block;
}

#newflag{
    position: absolute;
    top: 20%;
    left: 73.4%;
    width: 10%;
    height: 20.78%;
    transform: rotate(-30deg);
    background: url("img/newflag.png");
    background-size: 2500%;
    -webkit-animation: wave 1s steps(25) infinite;
    -moz-animation: wave 1s steps(25) infinite;
    -ms-animation: wave 1s steps(25) infinite;
    -o-animation: wave 1s steps(25) infinite;
    animation: wave 1s steps(25) infinite;
}

@-webkit-keyframes wave {
    100% { background-position: -2500%; }
}
@-moz-keyframes wave {
    100% { background-position: -2500%; }
}
@-ms-keyframes wave {
    100% { background-position: -2500%; }
}
@-o-keyframes wave {
    100% { background-position: -2500%; }
}
@keyframes wave {
    100% { background-position: -2500%; }
}

.epnum{
    position: relative;
    margin: 42% auto;
    font-family: 'SkaterGirlsRock-Regular';
    color: #C60313;
    font-size: 2.8em;
    cursor: pointer;
}


.epnum p {
    position: absolute;
    top: 50%;
    float:left;
    width:100%;
    text-align:center;
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    transform: translate(0%,-50%);
}

.lock{
    position: absolute;
    top: -1%;
    width: 56.52%;
    padding-bottom: 70%;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    pointer-events:none;
    background: url("img/lock.png") no-repeat;
    background-size: 100%;
    display: none;
}


.shrimp_anim{
    position: absolute;
    top: 0;
    margin-top: 8%;
    left: -10%;
    width: 32%;
    padding-bottom: 29%;
    background: url("img/tinker_epi.png");
    background-size: 800%;
    pointer-events:none;
}

#start-date{
    position: absolute;
    /*top: 43.4%;*/
    top: -7%;
    left: 50%;
    width: 111%;
    max-width: 588px;
    background: url("img/start-date.png") no-repeat;
    background-size: 100%;
    padding-bottom: 35%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    pointer-events: all;
}

@keyframes shrimp_select {
    100% { background-position: 100%; }
}
@-webkit-keyframes shrimp_select {
    100% { background-position: 100%; }
}

#bus{
    position:absolute;
    overflow: hidden;
    background: url("img/bus.png") no-repeat center top;
    max-width: 1300px;
    width: 165%;
    padding-bottom: 105%;
    top: 46%;
    left: 50%;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;

    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    background-size: 100%;
}


#characters{
    background: #3caddf;
    background-size: 100%;
    display: none;
}

#choose-btn{
    position: absolute;
    width: 33.40%;
    top: 70%;
    left: 54%;
    cursor: pointer;
}


.shrimp-hand-small{
    position: absolute;

    /*right: 4%;*/
    right: -20%;
    bottom: 0%;
    width: 32.43%;
    pointer-events: none;
}

.about{
    position: absolute;

    bottom: 0%;
    width: 100%;
    display: none;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}

.about p{
    position: absolute;
    top: 35%;
    font-family:'SkaterGirlsRock-Regular';
    font-size:.9em ;
    color: white;
    width: 40%;
    text-align: left;
    left: 52%;
}

#choose-char{
    width: 93.86%;
    background: url("img/coose-char.png") no-repeat;
    background-size: 100%;
    padding-bottom: 19.1%;
    text-align: center;
}

.char-btn{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    margin: 0 -4.5%;
    width: 25.7%;
    padding-bottom: 27%;
    left: 5%;
    cursor: pointer;

}



/*#tinker-bio-btn:hover, #dutch-bio-btn:hover, #king-bio-btn:hover, #ingrid-bio-btn:hover, #michael-bio-btn:hover,#judge-bio-btn:hover{
    background-position: 100% 0%;
}*/

.char-bio{
    position: absolute;

    bottom: 0%;
    width:100%;
    display: none;
    left: 0%;


}
.char-btn:hover,.clip-btn:hover{
    background-position: 100% 0% !important;
}

.watch-btn{
    position: absolute;
    width: 24.24%;
    padding-bottom: 8%;
    top: 85.5%;
    left: 54.1%;
    background: url("img/watch-btn.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
}





.char-bio img{
    width: 100%;
}

#extras{
    background: #3caddf;
    background-size: 100%;
    display: none;
}

#choose-clip-btn{
    position: absolute;
    width: 33.40%;
    top: 70%;
    left: 54%;
    cursor: pointer;
}

.clips{
    position: absolute;
    width: 101.61%;
    background: url("img/clips.png") no-repeat;
    background-size: 100%;
    height: 52%;
    text-align: center;
}

#clip-holder{
    position: relative;
    overflow: hidden;
    width: 76%;
    height: 100%;
    margin: 0 auto;
}

#clip-cont{
    position: absolute;
    /*width: 83.23%;*/
    width: 400%;
    height: 100%;
    top: 0;
    left: 0;
    transition: left .7s;
    -moz-transition: left .7s;
    -ms-transition: left .7s;
    -webkit-transition: left .7s;
}

.clip-btn{
    position: relative;
    float: left;
    margin: 1.5% 0%;
    width: 6.25%;
    padding-bottom: 18%;
    cursor: pointer;
}

.tinker-bio-btn{
    background: url("img/tinker-bio-btn.png") no-repeat;
    background-size: 200%;
    margin: 0 0% 0 -13%;

}
.dutch-bio-btn{
    background: url("img/dutch-bio-btn.png") no-repeat;
    background-size: 200%;
    margin-left: -10%;
}

.king-bio-btn{
    background: url("img/king-bio-btn.png") no-repeat;
    background-size: 200%;

}

.ingrid-bio-btn{
    background: url("img/ingrid-bio-btn.png") no-repeat;
    background-size: 200%;
}

.michael-bio-btn{
    background: url("img/michael-bio-btn.png") no-repeat;
    background-size: 200%;
}

.judge-bio-btn{
    background: url("img/judge-bio-btn.png") no-repeat;
    background-size: 200%;

}

.clip-btn:first-child{
    margin-left: 1%;
}

.x-tinker-btn{
    background: url("img/tinker-xtra-btn.png") no-repeat;
    background-size: 200%;
    /*margin: 0 0% 0 0%;*/

}
.x-dutch-btn{
    background: url("img/dutch-xtra-btn.png") no-repeat;
    background-size: 200%;
    /*margin-left: -3%;*/
}

.x-king-btn{
    background: url("img/king-xtra-btn.png") no-repeat;
    background-size: 200%;

}


/*.x-ingrid-bio-btn{
    background: url("img/ingrid-xtra-btn.png") no-repeat;
    background-size: 200%;
}*/

.x-michael-btn{
    background: url("img/michael-xtra-btn.png") no-repeat;
    background-size: 200%;
}

.x-inspire-btn{
    background: url("img/inspire-xtra-btn.png") no-repeat;
    background-size: 200%;

}
.x-theme-btn{
    background: url("img/theme-xtra-btn.png") no-repeat;
    background-size: 200%;

}
.x-making-btn{
    background: url("img/making-xtra-btn.png") no-repeat;
    background-size: 200%;

}
.x-anim-btn{
    background: url("img/anim-xtra-btn.png") no-repeat;
    background-size: 200%;

}
.x-acting-btn{
    background: url("img/acting-xtra-btn.png") no-repeat;
    background-size: 200%;

}
.x-drawtink-btn{
    background: url("img/drawtink-xtra-btn.png") no-repeat;
    background-size: 200%;

}

.x-drawdutch-btn{
    background: url("img/drawdutch-xtra-btn.png") no-repeat;
    background-size: 200%;

}

.x-drawking-btn{
    background: url("img/drawking-xtra-btn.png") no-repeat;
    background-size: 200%;

}

.x-drawmichael-btn{
    background: url("img/drawmichael-xtra-btn.png?n=n") no-repeat;
    background-size: 200%;

}




.clipnum{
    position: relative;
    margin: 0 auto;
    font-family: 'SkaterGirlsRock-Regular';
    color: #C60313;
    font-size: 2.8em;
    line-height: 1.5em;
    cursor: pointer;
    top: 50%;

}

.scroll-btn{
    position: absolute;
    top: 35%;
    width: 5%;
    padding-bottom: 13.5%;
}

#left-btn{
    float: left;
    left: 3%;
    background: url("img/left-btn.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
}


#right-btn{
    float: right;
    right: 2.5%;
    background: url("img/right-btn.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
}



#trailer{
    /*background: url("img/trailer-bg.png") no-repeat;
    background-size: 100%;

    padding-bottom: 54.6%;*/
    background-color: #31d2cb;
    padding-bottom: 0px;
}



#big-ant{
    position: absolute;
    top: 9%;
    width: 22.41%;
    left: 50%;
    opacity: 0;
    background-color: #3caddf;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}

#trailer-btn{
    position: absolute;
    width: 42.24%;
    top: 17%;
    left: 50%;
    background: url("img/trailer-btn.png") no-repeat;
    background-size: 200%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    cursor: pointer;
    padding-bottom: 33%;
}

#trailer-btn:hover{
    background-position: 100% 0;
}

.hand-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 54.6%;
    pointer-events:none;
}

#shrimp-hand{
    position: absolute;

    left: 5%;
    bottom: -90%;
    width: 58.08%;
    pointer-events: none;
}

#shrimp-hand img{
    width: 100%;
    pointer-events: none;
}

#trailer-info{
    position: absolute;
    top: 50%;
    font-family:'SkaterGirlsRock-Regular';
    font-size:1.1em ;
    color: white;
    width: 65%;
    text-align: center;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}


#trailer-player{
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 101%;
    margin: 0;
    padding: 0;
    z-index: 6;
    border-radius: 3%;
    display: none;
}

#player-holder{
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.play-btn {
    position: absolute;
    width: 0;
    height: 0;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 10%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    overflow: hidden;
    cursor: pointer;
    display: none;
    z-index: 5;
}
.play-btn:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-500px;
    margin-left: -500px;

    border-top: 500px solid transparent;
    border-bottom: 500px solid transparent;
    border-left: 500px solid #ffffff;
}

#td-mpu-holder{
    position: absolute;
    right: -7%;
    top: 166%;
    pointer-events: all;
}



#td-mpu{
    position: relative;
    font-family:'SkaterGirlsRock-Regular';
    font-size:4em ;
    width: 300px;
    height: 250px;
    line-height: 250px;
    margin: 0 auto;
    background-color: black;
    text-align: center;
    top: 3.5%;


}

#mpu-frame{
    position: absolute;
    width: 100%;
    top: 0%;
    left: 0%;
    z-index: 2;
}

#td-mpu-holder .ad_300x250{
    top: 0 !important;
}

#t-d-black{
    position: absolute;
    z-index: 7;
    width: 500%;
    height: 500%;
    top: 50%;
    left: 50%;
    background-color: rgba(0,0,0,.9);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: none;
}
#t-d-interactive-player{
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
    /*border-radius: 10px;*/
    z-index: 8;
}
#t-d-player{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: none;

}


#t-d-player canvas{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

#t-d-player #dl-btn{
    position: absolute;
    width: 29.52%;
    left: 5%;
    bottom:20%;
    display: none;
}

#dl-btn img{
    width: 100%;
}
#plane-container{
    position: absolute;
    width: 130%;
    height: 20%;
    overflow: hidden;
    top: 0;
    left: 0;
}

#bi-plane{
    position: absolute;
    top: 1%;
    left: 0%;

    width: 392px;
    height:128px;

    cursor: pointer;
    -webkit-animation: FLY-PLANE 22s infinite; /* Safari 4+ */
    -moz-animation:    FLY-PLANE 22s infinite; /* Fx 5+ */
    -o-animation:      FLY-PLANE 22s infinite; /* Opera 12+ */
    animation:         FLY-PLANE 22s infinite; /* IE 10+, Fx 29+ */

}
#bi-plane-inner {
    background-size: auto 100%;
    width: 392px;
    height:128px;
    background-image: url("img/biplane.png");
    -webkit-animation: PLANE-INNER 1s steps(50, end) infinite;
    -moz-animation: PLANE-INNER 1s steps(50, end) infinite;
    animation: PLANE-INNER 1s steps(50, end) infinite;
}
/*
#bi-planei img{
    width: 100%;
}*/

@-webkit-keyframes FLY-PLANE {
  0%   { -webkit-transform: translate3d(-500px,0,0); }
  100% { -webkit-transform: translate3d(1800px,0,0); }
}
@-moz-keyframes FLY-PLANE {
  0%   { -moz-transform: translate3d(-500px,0,0); }
  100% { -moz-transform: translate3d(1800px,0,0); }
}
@-o-keyframes FLY-PLANE {
  0%   { -o-transform: translate3d(-500px,0,0); }
  100% { -o-transform: translate3d(1800px,0,0); }
}
@keyframes FLY-PLANE {
  0%   { transform: translate3d(-500px,0,0); }
  100% { transform: translate3d(1800px,0,0); }
}

@-webkit-keyframes PLANE-INNER  {
  0%   { background-position: 0; }
  100% { background-position: -19600px; }
}
@-moz-keyframes PLANE-INNER  {
  0%   { background-position: 0; }
  100% { background-position: -19600px; }
}
@-o-keyframes PLANE-INNER  {
  0%   { background-position: 0; }
  100% { background-position: -19600px; }
}
@keyframes PLANE-INNER  {
  0%   { background-position: 0; }
  100% { background-position: -19600px; }
}






@media screen and (max-width:800px) {
    .epnum{
        /*font-size: .9em;*/
    }

    .t-d-container{
        padding-bottom: 0%;
    }

    #td-mpu-holder{
        right: 0;
    }


    #td-mpu{
        font-size: 4.5em;
        line-height: 250px;
    }
    #td-mpu-holder .ad_300x250{
        top: 0 !important;
    }

    .clipnum{
        font-size: 2.5em;
        line-height:1.7 ;
    }



}

@media screen and (max-width:600px) {
    .epnum{
        /*font-size: .7em;*/
    }
    #trailer-info{
        font-size: .7em;
    }

    .about p{
        font-size: .6em;
    }

    .t-d-container{
        padding-bottom: 35%;
    }

    #plane-container{
        width: 180%;
    }

    #bi-plane{
        top: -12%;
    }

    #td-mpu{
        font-size: 4em;
        line-height: 250px;
    }
    #td-mpu-holder .ad_300x250{
        top: 0 !important;
    }

    .char-btn{
        /*margin: 6.3% 3% 0 -2%;*/
    }

    .clipnum{
        font-size: 1.5em;
        line-height:1.8 ;
    }


}

@media screen and (max-width:400px) {

    #bg{
        display: none;
    }

    #bg-mobile{

        display: block;
    }

    #mobile-episodes{
        display: block;
    }
    .epnum{
        font-size: .9em;
    }

    #trailer-info{
        font-size: .5em;
    }

    .about p{
        font-size: .5em;
    }
    #td-mpu-holder{
        top: 165%;
        right: 50%;
        -webkit-transform: translate(50%,0%);
        -moz-transform: translate(50%,0%);
        -ms-transform: translate(50%,0%);
        transform: translate(50%,0%);
    }

    #td-mpu{
        font-size: 3em;
        line-height: 250px
    }
    #td-mpu-holder .ad_300x250{
        top: 0 !important;
    }

    .clipnum{
        font-size: 1.2em;
        line-height:1.8 ;
    }

    #td-footer{
        position: absolute;
        width: 100%;
        bottom: 1%;
        text-align: center;
        left: 50%;
        -webkit-transform: translate(-50%,0%);
        -moz-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
        transform: translate(-50%,0%);

    }

    #footer-logo{
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 20%;
        margin: 0 2% 0 2%;
    }

    #td-footer p{
        position: relative;
        display: inline-block;
        vertical-align: top;
        font-family:'SkaterGirlsRock-Regular';
        width: 70%;
        text-align: left;
        font-size: 8px;
        margin: 0 2% 0 2%;
    }





}