/*Grid: video's positioneren op media */
.wrapper {
  margin: 0 auto;
  width: 94%;
  padding-bottom:2rem;
}
.music-wrapper {
	text-align: center;
}
.schedule-video{
  width: 100%;
}

@media screen and (min-width: 768px) {
  .media-wrapper {
    margin:0 20%;
    }
}
/*This is the container for the embedded video*/
/*We need this to be able to resize an embedded video*/
.videowrapper {
  /*The "position" styling is used to move an element any direction*/
  /*Here we set a "position: relative;" in order for the "position" in the iframe styling to work. So basically, it doesn't do anything visual to the "videowrapper"*/
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0px;
  margin-top: 4%;
}
/*Here we style the iframe*/
.videowrapper iframe {
  /*Here we set a "position: absolute;" in order for the iframe to have a 100% width and height of "videowrapper"*/
  position: absolute;
  margin:0;
  height: 100%;
  width: 100%;
}
.videowrapper video {
  /*Here we set a "position: absolute;" in order for the iframe to have a 100% width and height of "videowrapper"*/
  position: absolute;
  margin: 0;
  height: 100%;
  width: 100%;
}
/*Here we style the blockquote, werkt niet voor instagram*/
.videowrapper blockquote {
  /*Here we set a "position: absolute;" in order for the iframe to have a 100% width and height of "videowrapper"*/
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  height: 100%;
  width: 100%;
}
/*Hier stylen we de images in de videowrapper*/
.videowrapper img {
  /*Here we set a "position: absolute;" in order for the iframe to have a 100% width and height of "videowrapper"*/
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  height:100%;
  width: auto;
}

div.images{
  display:block;
  width: auto;
}