body,html {
	margin: 0;
	padding: 0;
	background-color: #000000;
	background: #000000;
	background-image: url('../images/bwst_10.jpg');
}
	

.container {
	position: absolute; 
	margin: 0;
	padding: 0;
	width: 68%;
	max-width: 700px;
	height: auto;
	top: 50%; 
	left: 50%; 
	-ms-transform: translate(-50%, -50%); 
	transform: translate(-50%, -50%);
}

.overlay {
  position: relative;
  top: 0;
  bottom: 0;
	top: 0; 
	left: 0;
  opacity: 0;
  transition: .5s ease;
  /*background-color: #008CBA;*/
}

.container:hover .overlay {
  opacity: 1; background-color: rgba (0,0,0,0.5)
}

.image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* START --  Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (min-width: 400px) {

.container {
	max-width: 240px;
}

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

.container {
	max-width: 400px;
}

}

/* Larger than tablet */
@media (min-width: 750px) {

.container {
	max-width: 550px;
}

}

/* Larger than desktop */
@media (min-width: 1000px) {

}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	
.container {
	max-width: 800px;
}

}