.panel-cover {
  top: -100%; }

html, body {
  width: 100%;
  height: 100%;
  color: #e1dedf; }

body {
  background-image: url("/images/panelbgdark.jpg"), url("/images/panelbgdark2.jpg");
  background-repeat: no-repeat, repeat;
  background-size: 100%, cover;
  text-align: center; }

a {
  color: #e1dedf;
  text-decoration: none; }

a:hover, a:focus {
  border: 0px none;
  color: white; }

#container {
  max-width: 1200px;
  margin: 0 auto 50px auto; }

/* HEADER */
#head {
  clear: both;
  width: 100%;
  position: relative;
  overflow: auto; }

#icon {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -30px;
  width: 60px; }

#title {
  max-width: 80%;
  width: 500px; }

/* ELEMENTS */
div.element {
  clear: both;
  position: relative;
  margin: 20px auto 0 auto;
  width: 100%;
  height: 525px;
  background-color: black; }

/* margin paddin in included in width */
div.element * {
  box-sizing: border-box; }

div.element #inner-box {
  position: absolute;
  display: block;
  top: 50%;
  margin-top: -225px;
  left: 50%;
  margin-left: -525px;
  width: 1050px;
  height: 450px;
  max-width: 100%; }

div.element img#left {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  z-index: 1;
  margin-top: -187.5px;
  width: 500px;
  height: 375px; }

div.element img#right {
  position: absolute;
  display: block;
  top: 50%;
  right: 0;
  z-index: 1;
  margin-top: -187.5px;
  width: 500px;
  height: 375px; }

div.element img#top {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin-top: -196.875px;
  margin-left: -262.5px;
  width: 525px;
  height: 393.75px; }

#top-sep {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; }

#right-sep {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2px; }

#left-sep {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px; }

#bottom-sep {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; }

#tl {
  position: absolute;
  top: 10px;
  left: 10px; }

#tr {
  position: absolute;
  top: 10px;
  right: 10px; }

#br {
  position: absolute;
  bottom: 10px;
  right: 10px; }

#bl {
  position: absolute;
  bottom: 10px;
  left: 10px; }

div#description {
  margin-top: 40px;
  font-size: 120%; }

div#description #points {
  margin-top: 50px; }

@media (min-width: 1100px) {
  div.element img#left:hover, div.element img#right:hover, div.element img#top:hover {
    z-index: 10;
    -webkit-transform: scale(1.1);
    /* Saf3.1+, Chrome */
    -moz-transform: scale(1.1);
    /* FF3.5+ */
    -ms-transform: scale(1.1);
    /* IE9 */
    -o-transform: scale(1.1);
    /* Opera 10.5+ */
    transform: scale(1.1); } }
@media (max-width: 1100px) {
  #icon {
    width: 40px;
    margin-top: -20px; }

  div.element {
    overflow: auto;
    height: initial; }

  div.element #inner-box {
    position: static;
    overflow: auto;
    height: initial;
    margin: 0;
    padding: 20px; }

  div.element img#left {
    position: static;
    margin: 0 auto;
    padding: 10px; }

  div.element img#right {
    position: static;
    margin: 0 auto;
    padding: 10px; }

  div.element img#top {
    position: static;
    margin: 0 auto;
    padding: 10px;
    width: 500px;
    height: 375px; }

  #tl {
    display: none; }

  #tr {
    display: none; }

  #br {
    display: none; }

  #bl {
    display: none; } }
@media (max-width: 500px) {
  div.element {
    overflow: auto;
    height: initial; }

  div.element #inner-box {
    overflow: auto;
    height: initial; }

  div.element img#left {
    max-width: 100%;
    height: initial; }

  div.element img#right {
    max-width: 100%;
    height: initial; }

  div.element img#top {
    max-width: 100%;
    height: initial; } }