doodle3d-connect/css/bg.css

.uiButtonsContainer {
  position: absolute;
  max-width: 1024px;
  /*min-width: 800px;*/
  width: 100%;
  height: 100%;
  /*max-height: 768px;*/
  /*min-height: 300px;*/
  top: 0; left: 0; right: 0; bottom: 0;
  /*overflow: hidden;*/
  margin:  0 auto;
  outline: 2px solid #5e8c71;
  box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
  /*  height: 768px;*/
}

#d3dlogo {
	position: absolute;
	top:  2.5%;
	/*left: 31%;*/
  width: 100%;
  margin: 0 auto;
  height: 139px;
  background: url('../img/logo_full.png') no-repeat center center;
  cursor: pointer;
}

.bgContainer {
  position: absolute;
  width:  100%;
  height: 100%;
  overflow: hidden;
}
.bgTop, .bgMiddle, .bgBottom {
  opacity: 1.0;
  transition: opacity .35s linear;
  position: absolute;
  left: 0;
  z-index: -5;
}
.bgTop {
  top: 0;
}
.bgMiddle {
  top: 30%;
}
.bgBottom {
  bottom: 0;
}

/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */

@media screen and (max-height: 655px) {
  .bgMiddle { opacity: 0; }
}

@media screen and (max-height: 675px) {
	#d3dlogo {
    /*width: 399px;*/
    height: 74px;
    background-image: url('../img/logo_small.png');
    top:  6%;
  }
}

@media screen and (max-height: 560px) {
	#d3dlogo {
    /*width: 399px;*/
    height: 57px;
    background-image: url('../img/logo_smaller_wide.png');
    top:  6%;
  }
}

@media screen and (max-height: 420px) {
	#d3dlogo {
    top:  3%;
  }
}