.video-element video {
    display: block;
    width: 100%;
  }

  section.video-element {
    position: relative;
    display: block;
  }

/*styling sound toggle icon (mute/unmute) /*general styling of mutebutton*/
.media-toggle {
    height: 50px;
    width: 50px;
    background-position: center;
    background-size: 37px 37px;
    background-repeat: no-repeat;
    border: 3px solid #e5e5e5;
    border-radius: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    opacity: 0.5;
    transition: opacity 0.3s;
    cursor: pointer;
    z-index: 99;
    float: right;
    margin-right: 15px;
    margin-top: 15px;
}

/* smaller buttons on mobile */
@media screen and (max-width: 620px){
    .media-toggle {
        height: 40px;
        width: 40px;
        background-size: 30px 30px;
        opacity: 0.3;
        margin-right: 10px;
        margin-top: 10px;
    }
}


.media-toggle-container {
    position: absolute;
    width: 100%;
    top: 0px;
    z-index: 99;
}


/*hover effect buttons*/
.media-toggle:hover {
    opacity: 1;
}

/*icon sound off */
.sound-toggle[data-soundactive="false"]  {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNlNWU1ZTU7fS5jbHMtMntmaWxsOm5vbmU7c3Ryb2tlOiNlNWU1ZTU7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjVweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPnNvdW5kT2ZmPC90aXRsZT48ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03LDIzLjA1YTMsMywwLDAsMC0zLDNWMzhhMywzLDAsMCwwLDMsM2g3Ljg5VjIzLjA1WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM2LjE4LDEwLjE3LDE2Ljk0LDIyLjRWNDEuNkwzNi4xOCw1My44M0ExLDEsMCwwLDAsMzcuNzMsNTNWMTFBMSwxLDAsMCwwLDM2LjE4LDEwLjE3WiIvPjwvZz48ZyBpZD0iTGFnXzMiIGRhdGEtbmFtZT0iTGFnIDMiPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjQyIiB5MT0iMjIiIHgyPSI2MiIgeTI9IjQyIi8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iNDIiIHkxPSI0MiIgeDI9IjYyIiB5Mj0iMjIiLz48L2c+PC9zdmc+")
}

/*icon sound on*/
.sound-toggle[data-soundactive="true"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNlNWU1ZTU7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5zb3VuZE9uPC90aXRsZT48ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03LDIzLjA1YTMsMywwLDAsMC0zLDNWMzhhMywzLDAsMCwwLDMsM2g3Ljg5VjIzLjA1WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM2LjE4LDEwLjE3LDE2Ljk0LDIyLjRWNDEuNkwzNi4xOCw1My44M0ExLDEsMCwwLDAsMzcuNzMsNTNWMTFBMSwxLDAsMCwwLDM2LjE4LDEwLjE3WiIvPjwvZz48ZyBpZD0iTGFnXzIiIGRhdGEtbmFtZT0iTGFnIDIiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTUxLjkyLDExLjU5bC0xLjg1LDEuNzVhMjcsMjcsMCwwLDEtLjE4LDM3LjMybDEuOCwxLjc1YTI5LjUxLDI5LjUxLDAsMCwwLC4yMy00MC44MloiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00Ny42OSwxNS41OWwtMS44MiwxLjczYTIxLjE3LDIxLjE3LDAsMCwxLS4xNSwyOS4zbDEuODEsMS43NmEyMy42OCwyMy42OCwwLDAsMCwuMTYtMzIuNzlaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDMuNDksMTkuNThsLTEuODIsMS43M2ExNS4zNywxNS4zNywwLDAsMS0uMTEsMjEuMjhsMS44MSwxLjc1YTE3Ljg3LDE3Ljg3LDAsMCwwLC4xMi0yNC43NloiLz48L2c+PC9zdmc+")
}

/*icon replay*/

.replay-toggle {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFnXzQiIGRhdGEtbmFtZT0iTGFnIDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2Utd2lkdGg6NnB4O30uY2xzLTEsLmNscy0ye3N0cm9rZTojZTVlNWU1O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uY2xzLTJ7ZmlsbDojZTVlNWU1O3N0cm9rZS13aWR0aDoycHg7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5yZXBsYXk8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE4LDEyLjI5QTI0LjQyLDI0LjQyLDAsMCwxLDMyLDgsMjQsMjQsMCwxLDEsOCwzMiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI3Ljc1IDE5LjUzIDIyLjEzIDE5LjU3IDEyLjMxIDUuODkgNy43NSAxOS41MyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MCAzMiAyOCAyNCAyOCA0MCA0MCAzMiIvPjwvc3ZnPg==")
}