body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.bg {
  /* The image used */
  background-image: url("../img/bg-full.png");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
  
  /* Then style the iframe to fit in the container div with full height and width */
  .responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
  }


@media screen and (max-width: 420px) {
  .bg {
	  /* The image used */
	  background-image: url("../img/bg-mobile-420.png") !important;

	  /* Full height */
	  height: 100%;

	  /* Center and scale the image nicely */
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
  }
}


@media screen and (max-width: 990px) {
  .container {
	height: 100%;
  }
}





@media screen and (max-width: 1080px) {
  .bg {
	  /* The image used */
	  background-image: url("../img/bg-mobile.png");

	  /* Full height */
	  height: 100%;
	  /* Center and scale the image nicely */
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
  }
}