@charset "UTF-8";
body {
  margin: 0;
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


.image-grid {
  width: 100%;
  overflow: hidden;
  padding: 0px 0px 0;
  padding-top: 120px;
  background-color: #333;
}

.image__cell {
  float: left;
  position: relative;
}

@media screen and (min-width: 1061px) {
  .image__cell {
    width: 20%;
  }
  .image__cell:nth-of-type(5n+2) .image--expand {
    margin-left: -100%;
  }
  .image__cell:nth-of-type(5n+3) .image--expand {
    margin-left: -200%;
  }
  .image__cell:nth-of-type(5n+4) .image--expand {
    margin-left: -300%;
  }
  .image__cell:nth-of-type(5n+5) .image--expand {
    margin-left: -400%;
  }
  .image__cell:nth-of-type(5n+6) {
    clear: left;
  }
}
@media screen and (min-width: 799px) and (max-width: 1060px) {
  .image__cell {
    width: 25%;
  }
  .image__cell:nth-of-type(4n+2) .image--expand {
    margin-left: -100%;
  }
  .image__cell:nth-of-type(4n+3) .image--expand {
    margin-left: -200%;
  }
  .image__cell:nth-of-type(4n+4) .image--expand {
    margin-left: -300%;
  }
  .image__cell:nth-of-type(4n+5) {
    clear: left;
  }
}
@media screen and (min-width: 537px) and (max-width: 798px) {
  .image__cell {
    width: 33.33333%;
  }
  .image__cell:nth-of-type(3n+2) .image--expand {
    margin-left: -100%;
  }
  .image__cell:nth-of-type(3n+3) .image--expand {
    margin-left: -200%;
  }
  .image__cell:nth-of-type(3n+4) {
    clear: left;
  }
}
@media screen and (max-width: 536px) {
  .image__cell {
    width: 50%;
  }
  .image__cell:nth-of-type(2n+2) .image--expand {
    margin-left: -100%;
  }
  .image__cell:nth-of-type(2n+3) {
    clear: left;
  }
}
.image__cell.image--basic {
  cursor: pointer;
}
.image__cell.is-expanded .image--expand {
  max-height: 800px;
  margin-bottom: 12px;
  z-index: 1;
}
.image__cell .arrow--up {
  height: 0px;
  width: 100%;
}
.image__cell.is-expanded .arrow--up {
  border-bottom: 9px solid #222;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  height: 0;
  width: 0;
  padding-top: 3px;
  margin: 0 auto 0;
  opacity: 1;
  transition: opacity 0.225s;
  transition-delay: 0.3s;
}

.image--basic {
  position: relative;
  width: 100% !important;
}

.image--large {
  width: auto;
  max-height: 750px;
  display: block;
  padding: 40px;
  margin: 0 auto;
  box-sizing: border-box;
}


.image__cell.is-expanded .expand-close {
  display: block;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
}

.arrow--left,
.arrow--right {
  color: #fff;
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  font-size: 80px;
  line-height: 80px;
  color: #454545;
  opacity: 0;
}

.arrow--left:hover,
.arrow--right:hover {
  color: #fff;
}

.image__cell.is-expanded .arrow--left, .image__cell.is-expanded
.arrow--right {
  opacity: 1;
  transition: opacity 0.225s;
  transition-delay: 0.3s;
}

.arrow--left {
  left: 0;
  padding-left: 12px;
}

.arrow--left:before {
  content: '‹';
}

.arrow--right {
  right: 0;
  padding-right: 12px;
}

.arrow--right:before {
  content: '›';
}

.arrow--up {
  opacity: 0;
}

.image--basic {
  padding: 0px;
  opacity: 1;

}

.image--basic .basic__img {
  -webkit-transition:all 1s ease-in;
   -moz-transition:all 1s ease-in;;
   -o-transition:all 1s ease-in;;
   -ms-transition:all 1s ease-in;;
   transition:all 1s ease-in;;
}

.image--basic:hover .basic__img{
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter:alpha(opacity=100);
  opacity: .3;

    -webkit-transition:all .4s ease-in;
   -moz-transition:all .4s ease-in;
   -o-transition:all .4s ease-in;
   -ms-transition:all .4s ease-in;
   transition:all .4s ease-in;

   -webkit-transition-delay:.2s;
   -moz-transition-delay:.2s;
   -o-transition-delay:.2s;
   -ms-transition-delay:.2s;
   transition-delay:.2s;
}

.image--basic:hover .image--text {
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter:alpha(opacity=100);
   opacity:1;
   bottom:12px;
}

.image--text {
   opacity:0;
   position:absolute;
   height:25%;
   width:100%;
   bottom: 16px;
   padding: 10px;
   background:rgba(220,200,0,.9);
   letter-spacing: .05em;
   font: 100%/2em;
   font-family: 'Dosis', sans-serif;
   color:#222;
   line-height: 1em;

    -webkit-transition:all .4s ease-in;
   -moz-transition:all .4s ease-in;
   -o-transition:all .4s ease-in;
   -ms-transition:all .4s ease-in;
   transition:all .4s ease-in;

   -webkit-transition-delay:.3s;
   -moz-transition-delay:.3s;
   -o-transition-delay:.3s;
   -ms-transition-delay:.3s;
   transition-delay:.3s;
}


.basic__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.image--expand {
  position: relative;
  left: -6px;
  padding: 0 6px;
  margin-bottom: 12px;
  box-sizing: content-box;
  overflow: hidden;
  background: #222;
  max-height: 0;
  transition: max-height 0.3s ease-in-out, margin-bottom 0.12s ease-in-out;
}


@media screen and (min-width: 1061px) {
  .image--expand {
    width: 500%;
  }
}

@media screen and (min-width: 799px) and (max-width: 1060px) {
  .image--expand {
    width: 400%;
  }
}

@media screen and (min-width: 537px) and (max-width: 798px) {
  .image--expand {
    width: 300%;
  }
}

@media screen and (max-width: 536px) {
  .image--expand {
    width: 200%;
  }
}

.image__cell .image--expand {
  margin-bottom: 0;
}

.expand__close {
  position: absolute;
  top: 12px;
  right: 24px;
  color: #454545;
  font-size: 50px;
  line-height: 50px;
  text-decoration: none;
}
.expand__close:before {
  content: 'x';
}
.expand__close:hover {
  color: #fff;
}

.image--large {
  max-width: 100%;
  height: auto;
  display: block;
  padding: 40px;
  margin: 0 auto;
  box-sizing: border-box;
}