/* Imports
---------------------------------------------------------------------------------------------------- */

@import "progressive-image.css";
@import "magnific-popup.css";

/* Tags
---------------------------------------------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: rgb(255, 255, 255);
  color: rgb(60, 60, 60);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

/* Photo Grid
---------------------------------------------------------------------------------------------------- */

.photos {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(12, 1fr);
  /* rows are inline so its easy to add rows when adding photos */
}

.photos a {
  background: rgb(230, 230, 230);
}

.photos a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Logo
---------------------------------------------------------------------------------------------------- */

#logo {
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 20px;
  height: 0;
  overflow: hidden;
  width: 120px;
  padding-top: 120px;
  background: url("../images/logo.png") no-repeat center center;
  background-size: 120px 120px;
}

@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  #logo {
    background-image: url("../images/logo@2x.png");
  }
}

/* Magnific Popup
---------------------------------------------------------------------------------------------------- */

/* zoom in and out */

.mfp-zoom-in {
}

/* start state */
.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
/* animate in */
.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}
/* animate out */
.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

/* no margins */

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
  padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
  top: 0;
  bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
  padding: 0;
}

/* hide close because it causes extra space on right in ios */

.mfp-close {
  display: none;
}

/* dont show zoom cursors */

.mfp-zoom-out-cur {
  cursor: default;
}