#container {
  position: relative;
  margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

#container canvas {
	position: absolute;
	margin: 0;
	left: %10;
	right: %10;
	z-index:0;
}

#logox {
  position: absolute;
  	top: 50%;
	left: 50%;
  z-index:10;
}

.panel-transparent 
{
        background: none;
}

.panel-transparent .panel-heading
{
        background: rgba(122, 130, 136, 0.2)!important;
}

.panel-transparent .panel-body
{
        background: rgba(46, 51, 56, 0.2)!important;
}
	
body
{
	font-family: sans-serif;
	font-size: 100%;
	margin: 0px;
	color: #222266;
	background-color: #FFFFFF;
}

a { color: #fff; }

img.logo
{
	position: absolute;
	max-width: 80%;
	top: 10%;
	left: 10%;
}

img.logo:empty
{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media screen and (orientation: portrait) {
  img.logo {
      max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.logo {
      max-height: 80%;
  }
}

img.esenjalogo
{
	position: absolute;
	max-width: 80%;
	top: 5%;
	left: 10%;
	margin: 0px;
}

img.esenjalogo:empty
{
	top: 95%;
	left: 50%;
	margin: 0px;
	-webkit-transform: translate(-50%, -90%);
	-moz-transform: translate(-50%, -90%);
	-ms-transform: translate(-50%, -90%);
	-o-transform: translate(-50%, -90%);
	transform: translate(-50%, -90%);
}

@media screen and (orientation: portrait) {
  img.esenjalogo {
      max-width: 90%;
  }
}

@media screen and (orientation: landscape) {
  img.esenjalogo {
      max-height: 90%;
  }
}