#sederTape {
    width: 556px;
    height: 375px;
}

#brunchTape {
    width: 559px;
    height: 379px;
}

#tapes .background {
    z-index: -1;
}

#tapes .tape-stack {
    position:fixed;
    top:50%;
    left:50%;
    width:600px;
    height:501px;
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Safari */
    transform: translate(-50%, -50%);
    margin: 0 auto;
    z-index: -1;
}

#tapes section {
    margin-bottom: 15%;
}

#tapes section:first-child {
    margin-bottom: 50%;
}

#tapes section:last-child {
    margin-bottom: 75%;
}

#tapes .tape {
    margin: 15% auto;
}

#tapes .controls {
    width: 300px;
    position: relative;
    pointer-events: inherit;
}

.controls .play,
.controls .pause,
.controls .rewind {
    float: left;
    
    background-repeat: no-repeat;

    height: 40px;
    width: 40px;

    cursor: pointer;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.controls .play {
    background-image: url('../assets/images/object_tapes/play-btn@2x.png');
    background-size: 40px 40px;
}

.controls .pause {
    background-image: url('../assets/images/object_tapes/pause-btn@2x.png');
    background-size: 40px 40px;
    display: none;
}

.controls .rewind {
    background-image: url('../assets/images/object_tapes/rewind-btn@2x.png');
    background-size: 40px 40px;
    margin-right: 5px;
}

.controls .play:hover, .controls .pause:hover, .controls .rewind:hover {
    opacity:.8;
}

.controls .playhead {
    background-color: #111;
    outline: 1px solid #fff;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    width: 200px;
    height: 3px;

    position: absolute;
    right: 0;
    top: 20px;
}

.controls .playhead .progress {
    background-color: #fff;
    width: 0;
    height: 3px;
    position: absolute;
}