/*
CSS for cassette tape
Derek Dixon - Spark!
Mar 2017
Disney - GOTG2
*/

.emptytape {
    width: 100%;
    height: 100%;
    /*background: url(../images/emptytape.jpg) no-repeat center center;*/
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    /* --> uncomment to hide */
}

.animation_container {
    position: absolute;
    overflow: hidden;
    z-index: 50;
}

.tapeback {
    width: 100%;
    height: 100%;
    background: url(../images/Under.jpg) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
}

#leftreel, #leftreel_mobile {
    background: url(../images/Left.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    width: 42%;
    height: 80%;
    top: 2%;
    left: 9%;
}

#rightreel, #rightreel_mobile {
    background: url(../images/Right.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    width: 42%;
    height: 80%;
    top: 2%;
    right: 9%;
}

.tapefront {
    width: 100%;
    height: 100%;
    background: url(../images/Top.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

#pauseBt, #pauseBt_mobile {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

#pauseBt:hover, #pauseBt_mobile:hover {
    background: rgba(0, 0, 0, 0.5) url(../images/pausebt.png) no-repeat center center;
    background-size: cover;
}

#playBt, #playBt_mobile {
    background: rgba(0, 0, 0, 0.5) url(../images/playbt.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    cursor: pointer;
}

@-webkit-keyframes rotating
/* Safari and Chrome */

{
    from {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    to {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    to {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.rotating {
    -webkit-animation: rotating 3s linear infinite;
    -moz-animation: rotating 3s linear infinite;
    -ms-animation: rotating 3s linear infinite;
    -o-animation: rotating 3s linear infinite;
    animation: rotating 3s linear infinite;
}

@media only screen and (orientation:portrait) {
    #animation_mobile div.tapefront {
        width: 100%;
        height: 100%;
        background: url(../images/Top2.png) no-repeat center center;
        background-size: cover;
    }
    #animation_mobile div.tapeback {
        width: 100%;
        height: 100%;
        background: url(../images/Under2.jpg) no-repeat center center;
        background-size: cover;
    }
    #animation_mobile div.emptytape {
        width: 100%;
        height: 100%;
        /*background: url(../images/emptytape2.jpg) no-repeat center center;*/
        background-size: cover;
    }
    #leftreel_mobile {
        width: 80%;
        height: 42%;
        top: 9%;
        left: 18%;
    }
    #rightreel_mobile {
        width: 80%;
        height: 42%;
        top: 49%;
        left: 18%;
    }
}

@media only screen and (orientation:landscape) {}
