.topPart{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	background-color: #FFFFFF;
	background-image: url("../src/pictures/mediaBanner.jpg");
	background-size: cover;
	background-position: center;
	height: 420px;
	text-shadow: 2px 2px #835d91;
	padding-bottom: 30px;
	box-shadow: 0px 20px 20px 0px #d5bdaf;
	border-bottom: 3px solid #9a8c98;
	margin-bottom: 50px;
}
body{
	background-color: #eee2df;
}

#title{
	font-size: 300%;
}

#subTitle{
	font-size: xx-large;
}

.bodyDiv{
	display: flex;
	justify-content: center;
	align-items: center;
}

.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 50%;
  display: flex;
  justify-content: space-around;
  flex-flow: column;
  align-items: flex-start;
}

figcaption{
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 5px;
	visibility: hidden;
	transition-duration: 0.3s;
	transition-property: visibility, background-color;
	border-radius: 20px;
	color: transparent;
}

img:hover + figcaption, video:hover + figcaption{
	visibility: visible;
	background-color: #5e548e;
	color: white;
}

figure > img, figure > video{
	width: 350px;
	margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 0px;
  vertical-align: middle;
  border-radius: 3px;
  border: 6px solid #ffb4a2;
  box-shadow: 20px 38px 34px -26px rgba(0,0,0,.2);
  transition-duration: 0.6s;
  transition-property: width, margin-top, margin-left, margin-bottom, margin-right, box-shadow, border;
}

figure > img:hover, figure > video:hover{
	width: 360px;
	margin-top: 10px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 0px;
  box-shadow: 4px 10px 6px -8px rgba(0,0,0,.3);
  border: 6px solid #5e548e;
}

#credits{
	display: none;
}


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

  .column > img, .column > video{
	  margin-left: 0px;
	  width: 90%;
	  transition-duration: 0.6s;
	  transition-property: width, margin-top, margin-left, margin-bottom, margin-right;
	}

	.column > img:hover, .column > video:hover{
		width: 95%;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-left: 0px;
		margin-right: 0px;
	}
}

@media screen and (max-width: 1000px) {
  #c3, #c1, #c4{
  	display: none;
	 	visibility: hidden;
	}

}

@media screen and (max-width: 1900px) {
	#c1, #c4{
	 	visibility: hidden;
	}
}