/*=======================================
   Styling
  =======================================*/

/*----------------------------
   Before Load
  ----------------------------*/
.field-node--field-images .field__items {
  position: relative;
  opacity: .7;
  padding: 1px;
  max-height: 48.6em;
  /* max-height: 80vh; */
  overflow:  hidden;
}

.field-node--field-images .field__items:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #da6e01;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.field-node--field-images .field__items:after {
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  font-size: 3em;
  margin: -.5em;
  background-color: #eee;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

.field-node--field-images .field__items:after,
.field-node--field-images .field__items:before {
  content: '';
  position: absolute;
  z-index: 10;
  opacity: 1;
}


/*----------------------------
   After Load
  ----------------------------*/
.field-node--field-images .field__items.collaged  {
  opacity: 1;
  max-height: none;
}

.field-node--field-images .field__items.collaged:before {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.field-node--field-images .field__items.collaged:after {  display: none;  }

/*----------------------------
   Both
  ----------------------------*/
.field-node--field-images .field__item,
.field-node--field-images img {
  display: inline-block;
  -webkit-transition: none;
  transition: none;
}

/*----------------------------
   Animation
  ----------------------------*/
@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}