/****************************************
* Masonry
****************************************/

.masonry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;

  -ms-grid-template-columns: repeat(12, 1fr);
  -ms-grid-auto-flow: dense;

  /* Fallback */
  column-count: 3;
  column-gap: 0;

  background-color: #ffffff;
/*  background-image: url('/images/layout/gray-floral.png');*/
  padding: .25rem;
}

.masonry img {
  display: block;
  object-fit: cover;
  margin: 0;
  width: 100%;
  height: 100%;
}

.masonry div {
  /*margin: .25rem;*/
  border: .25rem solid #ffffff;
}

/****************************************
* Shapes
****************************************/

.masonry .big-square,
.masonry .square,
.masonry .small-square {
  grid-column-start: span 2;
}

.masonry .landscape {
  grid-column-start: span 4;
  grid-row: span 1;
}

.masonry .portrait {
  grid-column-start: span 2;
  grid-row: span 2;
}

@media (max-width: 1350px) {
  .masonry {
    grid-template-columns: repeat(12, 1fr);
    -ms-grid-template-columns: repeat(12, 1fr);

    /* Fallback */
    column-count: 3;
  }

  /* Normal Landscape */
  .masonry .landscape {
    grid-column-start: span 4;
    grid-row: span 1;
  }
}

@media (max-width: 850px) {
  .masonry {
    grid-template-columns: repeat(6, 1fr);
    -ms-grid-template-columns: repeat(6, 1fr);

    /* Fallback */
    column-count: 3;
  }
}

@media (max-width: 600px) {
  .masonry {
    grid-template-columns: repeat(4, 1fr);
    -ms-grid-template-columns: repeat(4, 1fr);

    /* Fallback */
    column-count: 3;
  }
}

/* Anchor and image */
.masonry div img {
	display: block;
	outline: none;
	border: none;
}

.masonry div {
	position: relative;
	overflow: hidden;
}

/* Curtain element */
.masonry .curtain {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #96cdc8;
	border: none;
}

.masonry .curtain {
	-webkit-transform: translate3d(0,-100%,0);
	transform: translate3d(0,-104%,0);
}

/* Shadow */
.masonry .curtain::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,1);
	content: '';
}

.masonry .curtain::after {
	top: -100%;
}

/****************************************
* Animation
****************************************/

.masonry div.animate .curtain {
	-webkit-animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
	animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
}

@-webkit-keyframes swipeDown {
	0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
	50%, 60% { -webkit-transform: translate3d(0,0,0); }
	100% { -webkit-transform: translate3d(0,100%,0); }
}

@keyframes swipeDown {
	0% {}
	50%, 60% { -webkit-transform: translate(0); transform: translate(0); }
	100% { transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); }
}

/****************************************
* Shadow
****************************************/

/* Hide image and title and show at half time */
.masonry div img {
	visibility: hidden;
}

.masonry div.animate .curtain::after {
	-webkit-animation: fadeOut 1.5s ease forwards;
	animation: fadeOut 1.5s ease forwards;
	-webkit-animation-delay: inherit;
	animation-delay: inherit;
}

@-webkit-keyframes fadeOut {
	0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
	50%, 60% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes fadeOut {
	0% {}
	50%, 60% { opacity: 1; }
	100% { opacity: 0; }
}

.masonry div.animate img {
	-webkit-animation: showMe 1.5s step-end forwards;
	animation: showMe 1.5s step-end forwards;
}

@-webkit-keyframes showMe {
	from { visibility: hidden; }
	60%, 100% { visibility: visible; }
}

@keyframes showMe {
	from { visibility: hidden; }
	60%, 100% { visibility: visible; }
}

.masonry div.shown img {
	visibility: visible;
}