img.arrowimg {
  filter: brightness(50%);
  margin:auto;
  position:absolute;
  top:0;
  bottom:0
}
div.arrowleft a img.arrowimg {
  margin-left:0;
  padding-left:10%;
}
div.arrowright a img.arrowimg {
  margin-right:0;
  padding-right:10%;
  right:0px;
}
div.arrowleft:hover a img.arrowimg{
  filter: brightness(80%);
}
div.arrowright:hover a img.arrowimg{
  filter: brightness(80%);
}
img.arrowimg:active{
  filter: brightness(100%);
  border: 0;
}
a.navigate, a.navigate:focus, a.navigate:active {
  outline: none;
  width:100%;
  height:100%;
  position:relative;
}
html, body {
  margin: 0;        /* Avoid default margin on top              */
  height: 100%;     /* Must have a height because               */
                    /* child height is relative to this.        */
}
div.container {
  margin: auto;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display: table;   /* Same as for div.all                        */
display: flex;    /* Same as for div.all                        */
flex-direction: row; /* Children are placed next to each other. */
flex:1;           /* Use full height */
width:100%;
align-items:center;
}

@media screen and (max-width: 700px) {
  div.global {
    display:inline;
  }
  div.container {
    position: static;
    margin-top:3em;
    flex-direction: column;
  }
  div.arrows {
      display: none;
  }
}

@media not screen and (max-width: 700px) {
  div.mobileScroll {
      display: none;
  }
}

div.arrowleft {
  display:table-cell; /* IE fallback */
  display: flex;
  width:50%;
  height:100%;
  /*
  padding-left:10%;
  margin-right:auto;
  */
  z-index:1;
}
div.arrowright {
  display:table-cell; /* IE fallback */
  display: flex;
  width:50%;
  height:100%;
  /*
  padding-right:10%;
  margin-left:auto;
  */
  z-index:1;
  /*   margin-right:calc( ( 100% - ( 518px + 172px ) ) / 2); */
}
div.hidden {
  visibility:hidden;
}

div.navbar {
  position: absolute;
  margin-top: 0.5em;
  margin-left: 0.5em;
  left: 0;
  top; 0;
  z-index: 3;
}

div.navbar a {
  color: #888888;
}

div.navbar a:hover {
  color: #eeeeee;
}

.inner_image {
  border: 1px solid #222222; 
  margin: auto; 
  padding: 0; 
  background-color:#111111; 
  vertical-align: middle;
  z-index:2;
  max-width:99%;
}

@media screen and (orientation: landscape) {
  .inner_image {
      max-height:45vw;
      max-width:none;
  }
}