* {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,7db9e8+100 */
  background: #1e5799; /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #7db9e8 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
    color: white;
}

.playing {
  filter: sepia(100%);
  transition: 0.01s;
}

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    margin: 0px !important;
}

.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0px;
    position: relative;
    text-align: center;
}

.column img {
    margin-top: 0px;
    vertical-align: middle;
    width: 100%;
}

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none
  user-drag: none;
}

.img-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
  color: white;
  z-index: 9999;
}

.img-text h1 {
  font-size: 22px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none
  user-drag: none;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  margin-bottom: 20px;
}

.btn-group button {
    background-color: #14738c;
    border: 1px solid #085e74;
    color: white;
    padding: 10px 24px;
    cursor: pointer;
    float: left;
    min-width: 200px;
}

.btn-group button:not(:last-child) {
    border-right: none;
}

.btn-group button:hover {
    background-color: #0685a7;
}

@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

.share {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 500;
    color: white;
    border: 1px solid white;
    padding: 10px;
}
.share:hover {
 cursor: pointer;
 background-color: white;
 color: black;
}

.shared-audio {
  display: flex;
  justify-content: center;
}