/* MODULES */

.module-frontpage,
.module-header,
.module-footer {
  display: flex;
  justify-content: center;
  margin: 15px 0 10px 0;
  width: 100%;
}
#section-left + #section-main > .module-header,
#section-left + #section-main > .module-footer {
  justify-content: left;
}
.module-frontpage > a,
.module-footer > a,
.module-header > a {
  background-color: #000;
  box-sizing: border-box;
  max-width: 725px;
  width: 100%;
  border: 2px solid #000;
}
.module-frontpage > a picture,
.module-header > a picture,
.module-footer > a picture {
  width: 100%;
}
.module-frontpage > a {
  border-color: #ECCC91;
}

/* MODAL */

#modal {
  z-index: 100;
  position: absolute; 
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  cursor: default;
  display: flex;
  justify-content: center;
}
#modal .modal-background {
  background: rgba(62,2,2,.8);
  z-index: 101;
  position: fixed; 
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  cursor: default;
}
#modal .modal-window {
  /* max-height: calc(100% - 100px); */
  top: 20px;
  position: relative;
  max-width: 700px;
  width: 100%;
  z-index: 102;
  line-height: 0;
  height: 0;
}
#modal .modal-window .modal-link {
  line-height: 0;
  display: block;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,.5);
  border: 1px solid #333;
  clear:both
}
#modal .modal-window .modal-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
#modal .modal-window .modal-close {
  font-size: 50px;
  line-height: .5;
  float: right;
  color: #ECCC91;
  text-shadow: 0 -1px 1px rbga(0,0,0,.6);
  font-weight: bold;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}
#modal .modal-window .modal-close:hover {
  color: #FFF;
}
@media (orientation: portrait) {
  #modal .modal-window.mobile {
    max-width: 100% !important;
  }
}
@media (orientation: landscape) {
  #modal .modal-window.mobile {
    min-width: 50% !important;
    max-width: 50% !important;
        width: 50% !important;
  }
}
#modal .modal-window.mobile .modal-close {
  font-size: 100px;
}
#modal.show .modal-window {
  animation: 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s normal forwards 1 running ModalWindowShow;
  opacity: 0;
}
#modal.show .modal-background {
  animation: 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s normal forwards 1 running ModalBackgroundShow;
  opacity: 0;
}
#modal, #modal.hide {
  display: none;
}
#modal.show {
  display: flex;
}
@keyframes ModalWindowShow {
    0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes ModalBackgroundShow {
    0% { opacity: 0; }
  100% { opacity: 1; }
}