/* Portrait */
@media screen and (orientation:portrait) {
  #landscape {
  	display: none;
  }
  #portrait {
  	display: block;
  }
}
/* Landscape */
@media screen and (orientation:landscape) {
  #landscape {
  	display: block;
  }
  #portrait {
  	display: none;
  }
}

.uiButtonsContainer {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 1024px;
  min-height: 500px;
  max-height: 768px;
  height: 100%;
  /*  height: 768px;*/
}
.uiButtonsContainer:before {
  content:' ';
  display:block;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  border: 2px solid #333;
}

#d3dlogo {
	position: absolute;
	top:  15px;
	left: 31%;
  width: 399px;
  height: 139px;
  background-image: url('../img/logo_full.png');
  cursor: pointer;
}

.bgTop {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -5;
}
.bgMiddle {
	display: block;
	position: absolute;
	top: 30%;
	left: 0px;
	z-index: -5;
}
.bgBottom {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: -5;
}

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

@media screen and (max-height: 675px) {
	.bgMiddle {
		display: none;
	}
	#d3dlogo {
    width: 399px;
    height: 74px;
    background-image: url('../img/logo_small.png');
    margin-top:  9px;
  }
}

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