#controls {
  overflow: hidden;
  background: #eee;
  margin: 0 auto;
}

#controls > * {
	margin: 8px;
	cursor: pointer;
	opacity: 0.5;
}

#controls > *:hover {
	opacity: 1;
}

#toggleplay {
  float: left;
  background: url('img/ic_pause_black_24dp.svg');
  width: 24px;
  height: 24px;
}

#toggleplay.paused {
  background: url('img/ic_play_arrow_black_24dp.svg');
}

#time {
  float: left;
  height: 19px;
  padding-top: 5px;
}

#togglemute {
  float: right;
  background: url('img/ic_volume_up_black_24dp.svg');
  width: 24px;
  height: 24px;
}

#togglemute.muted {
  background: url('img/ic_volume_off_black_24dp.svg');
}

#volumerange {
  float: right;
  width: 100px;
  height: 24px;
}

/* MOBILE */
@media screen and (max-width: 700px) {
  iframe {
    width: 100%;
    height: 240px;
  }
}
/* DESKTOP */
@media screen and (min-width: 700px) {
  iframe {
    height: 50vh;
    width: 100%;
  }

  h1, h2, p {
    width: 100%;
    margin: 1rem auto;
  }

  #controls {
    width: 100%;
  }
}

 ul.carousel {
    display: flex;
    width: 100%;
    margin: 20px auto;
    padding: 0;
    justify-content: center;
    overflow: auto;
}

/* MOBILE */
@media screen and (max-width: 700px) {
	ul.carousel {
	  width: 100%;
	  justify-content: flex-start;
	}

	 ul.carousel li:first-child {
	    padding-left: 0;
	}

	ul.carousel li:last-child {
	    padding-right: 0;
	}
}

ul.carousel li {
	list-style: none;
	margin: 0;
	padding: 0 10px;
	display: inline-block;
}
ul.carousel li a {
    display: inline-block;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #999;
    text-decoration: none;
}
ul.carousel li a.current {
	color: blue;
	text-decoration: underline;
}
ul.carousel li a img {
	width: 80px;
	height: 45px;
}
ul.carousel li a small {
	display: block;
}