*:focus {
    outline: 0;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

.main {
    padding-top: 10%;
    text-align: center;
}

.cover {

    opacity: 1;
}

.container:hover .cover {
    opacity: 1;
}

.cover svg {
    position: absolute;
    top: 55%;
    left: 50%;
    stroke: #fff;
    width: 90px;
    height: 90px;
    background-color: #ffab40;
    opacity: 0.8;
    display: none;
    /*border: none;*/
    border-radius: 100%;
    transform: translate(-50%, -50%);
    /*pointer-events: none;*/
    z-index: 0;
}

.play, .pause {
    position: absolute;
    top: 55%;
    left: 50%;
    z-index: 3;
    width: 90px;
    background: transparent !important;
    height: 90px;
    cursor: pointer;
    transform: translate(-50%, -50%);
    /*display: none;*/
}

.play::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    /*border: 5px solid rgba(255, 255, 255, 0.3);*/
    border-radius: 100%;
    opacity: 0;
    border-style: none !important;
}

.play::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZdJREFUeNrs29FNQjEYBlAgDuAIuAFugBvgBrABTiBOgE4AGzgCbCAbwAayAbZJb0KMT77wt/ecpO/39qP9CqGDAQAAAAAAAAAAAAAA8A+Xy2WWxr2ZiBPILo1jGlOzESeQzmcaY7MSJ5DsO42lmYkTSOcrjYkZihNIZ630YwVyKaU/M1txAunsWir9UQPvkI/GuVtWPsoxVsjv0p9aIXHkE9iu5tIfNbrI8neWXPpzgcSRV8imttJvOZDr0j/WUvp9CKTzWsMPln0KJBuX0t9ELf2+BdKZl21sKZBYpb8upT8RSMBv+hG2MYFclX4JZioQBPKHtzQeh8Ph/pYPcSeHQQ7gJQVxsEJu61yCeIoSRp9XyLaEcY72YH0L5JTG4tY9YcsqpZ2CeIgcRl9WyL6sipNj7+1Le1FK+1TLQ7cayHsaeXva1vbgrW1Zh3J62tf6Aq0EkrenjxTEqvYXaSGQqkq75Q7JATzXVtpV8mfregJxHSFIIC7sBArElbYggbj0GSgQ16IBAAAAAAAAAAAAACCsHwEGACfr+SLf7BaJAAAAAElFTkSuQmCC');
    background-size: 80%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#circle {
    visibility: hidden;
    stroke-width: 5;
}

.playing #circle, .pausing #cricle {
    visibility: visible;
}

.playing .play::after {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAK9JREFUeNrs0sEJhDAQQFEjW4ilWYp2slYS7MROYgrQZQc8DPgeiBcZQ/4MAwAAAAAAAAAAAAAAZFcyHaa1NvfX9PfhS1lu5iyB3x59ztcqXF9kbQE/5kTUTHcwWoNcBBEEQQRBEEEQRBAEEQRBEEQQBBEEQQRBEEEQBEEEQRBBEEQQBBEEQRBEEAQRBEEEQZB3+iQ7z9af/YE5a+DbwxoAAAAAAAAAAAAAAEDEKcAA4xprM8PkP94AAAAASUVORK5CYII=');
}

.playing .play::before {
    opacity: 1;
}

.play_backward {
    position: absolute;
    top: 55%;
    left: 27%;
    z-index: 3;
    /*color: #212121;*/
    color: #EFBE00;
    font-size: 50px;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.play_forward {
    position: absolute;
    top: 55%;
    left: 73%;
    z-index: 3;
    /*color:#212121;*/
    color: #EFBE00;
    font-size: 50px;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.play_forward:active, .play_backward:active {
    color: white;
}

.navbar {
    margin-bottom: 0 !important;
}

.activeNav {
    background: rgba(0, 0, 20, 0.7) !important;
}

@media (max-width: 660px) {
    .modal {
        max-height: 21% !important;
    }

    .brand-logo {
        max-width: 100% !important;
    }
}

#logo {
    font-size: 30px;
    padding-left: 30px;
}

@media (max-width: 660px) {
    #logo {
        font-size: 14px;
        /*left: 28%;*/
        top: 1px;
    }

    .brand-logo {
        max-width: 100% !important;
        left: 250px;
    }
}

@media only screen and (max-width: 992px) {
    nav .brand-logo {
        left: 11% !important;
    }
}

.brand-logo {
    max-width: 100%;
    max-height: 100%;
}

#home, #author {
    color: #EFBE00 !important;
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (max-width: 375px) {
    .cover svg, .play_forward, .play_backward, .play {
        top: 45%;
    }
}

/* iPhone X ----------- */
@media only screen and (min-width: 375px) {
    .cover svg, .play_forward, .play_backward, .play {
        top: 40%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .cover svg, .play_forward, .play_backward, .play {
        top: 30%;
    }

    .play_backward {
        left: 39%;
    }

    .play_forward {
        left: 61%;
    }

    .play_forward, .play_backward {
        font-size: 80px;
    }
}

@media (min-width: 768px) {
    .cover svg, .play_forward, .play_backward, .play {
        top: 30%;
    }

    .play_backward {
        left: 40%;
    }

    .play_forward {
        left: 60%;
    }

    .play_forward, .play_backward {
        font-size: 80px;
    }
}

@media screen
and (min-device-width: 1200px)
/* and (max-device-width: 1600px) */
and (-webkit-min-device-pixel-ratio: 1) {
    .cover svg, .play_forward, .play_backward, .play {
        top: 70%;
    }

    .play_backward {
        left: 20%;
    }

    .cover svg {
        left: 28%;
    }

    .play_forward {
        left: 35%;
    }

    .play_forward, .play_backward {
        font-size: 60px;
    }

    .play {
        left: 28%;
    }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    .cover svg, .play_forward, .play_backward, .play {
        top: 25%;
    }

    .play_backward {
        left: 40%;
    }

    .play_forward {
        left: 60%;
    }

    .play_forward, .play_backward {
        font-size: 80px;
    }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    .cover svg, .play_forward, .play_backward, .play {
        top: 25%;
    }

    .play_backward {
        left: 14%;
    }

    .play_forward {
        left: 38%;
    }

    .cover svg {
        left: 26%;
    }

    .play {
        left: 26%;
    }

    .play_forward, .play_backward {
        font-size: 60px;
    }

    img {
        height: 100% !important;
    }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1112px)
and (max-device-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {

}