.pageflip-container {
    padding-top: 1px;
}

.imgPage {
    Width: 640px;
    Height: 800px;
}

audio {
    width: 180px;
    height: 32px;
    position: absolute;
    z-index: 2;
}

audio::-webkit-media-controls-panel {
    background: #ca0002;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, orange, yellow);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, orange, yellow);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, orange, yellow);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, orange, yellow);
    /* Standard syntax */
    overflow: hidden;
}

.video_icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    -webkit-box-shadow: 0px 0px 20px 0px #c4302b;
    box-shadow: 0px 0px 20px 0px #c4302b;
    text-align: center;
    line-height: 35px;
    font-size: 60px;
    position: relative;
    display: inline-block;
    animation: pulse 1.2s linear infinite;
    cursor: pointer;
    position: absolute;
    z-index: 2;
}

.video_icon i {
    color: #c4302b;
    position: relative;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 15px rgba(255, 0, 0, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

@keyframes animate {
    0% {
        box-shadow: 0 0 0 0 #c4302b, 0 0 0 0 #c4302b;
    }
    40% {
        box-shadow: 0 0 10px rgba(255, 0, 64, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);
    }
    80% {
        box-shadow: 0 0 0 10px rgba(255, 0, 64, 0), 0 0 0 10px rgba(255, 0, 64, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 10px rgba(255, 0, 64, 0);
    }
}

.interactive_icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    -webkit-box-shadow: 0px 0px 20px 0px #007bff;
    box-shadow: 0px 0px 20px 0px #007bff;
    text-align: center;
    line-height: 35px;
    font-size: 60px;
    position: relative;
    display: inline-block;
    animation: pulse2 1.2s linear infinite;
    cursor: pointer;
    position: absolute;
    z-index: 2;
}

.interactive_icon i {
    color: #007bff;
    position: relative;
}

.album_icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    -webkit-box-shadow: 0px 0px 20px 0px orangered;
    box-shadow: 0px 0px 20px 0px orangered;
    text-align: center;
    line-height: 40px;
    font-size: 35px;
    position: relative;
    display: inline-block;
    animation: pulse3 1.2s linear infinite;
    cursor: pointer;
    position: absolute;
    z-index: 2;
}

.album_icon i {
    color: orangered;
    position: relative;
    top: 10px;
}

@-webkit-keyframes pulse3 {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 145, 0, 0.418);
    }
    70% {
        -webkit-box-shadow: 0 0 0 15px rgba(255, 145, 0, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 145, 255, 0);
    }
}

@-webkit-keyframes pulse2 {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 60, 255, 0.418);
    }
    70% {
        -webkit-box-shadow: 0 0 0 15px rgba(0, 60, 255, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 60, 255, 0);
    }
}

a {
    text-decoration: none;
}