img:hover,
i:hover {
    opacity: 1;
}

img,
i {
    opacity: 0.5;
    height: auto;
    max-width: 100%;
}

#buttons i,
img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

@media (min-width: 768px) {
    img {
        width: 50%;
    }
}

div input {
    opacity: 0;
    transition: all 0.5s ease;
}

.visible {
    opacity: 100;
}

.muted,
#mute:hover {
    opacity: 100;
    color: red;
}

svg {
    fill: white !important;
}

.slider {
    -webkit-appearance: none;
    height: 5px;
    background: #d3d3d3;
    outline: none;
    -webkit-transition: 1s;
    margin-top: 1.5rem;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: black;
    cursor: pointer;
}

#master-slider {
    width: 20%;
    margin-top: 1.0rem;
}

#brand,
#time span {
    font-family: Quicksand;
}

footer p {
    font-family: Raleway;
}

#main-container {
    min-height: 70vh;
    /* will cover the 100% of viewport */
    overflow: hidden;
    display: block;
    position: relative;
    /* height of your footer */
}

footer {
    flex: 1;
    position: absolute;
    bottom: 0;
    width: 100%;
}

html::-webkit-scrollbar {
    display: none;
}