/**
 * Image Gallery -  CSS - customize this in your theme folder
 * 
 * Image Gallery
 * 
 * @copyright 2016 SCHLIX Web Inc
 *
 * @license MIT
 *
 * @package gallery
 * @version 1.0
 * @author  SCHLIX Web Inc <info@schlix.com>
 * @link    http://www.schlix.com
 */

ul.imagegallery-folder {    
    display:inline-block;
    position:relative;
    min-height:200px;
    list-style:none;
}
.app-gallery h2.category.title {margin:40px 0;}
ul.imagegallery-folder li {margin-bottom:10px !important;}
ul.imagegallery-folder a {
    background:white;
    display:inline;
    float:left;
    width:auto;
    padding:5px;
    text-align:center;
    text-decoration:none;
    color:#333;
    font-size:10px;
    font-weight:bold;
    -webkit-box-shadow:0px 0px 10px rgba(0,0,0,1);
    -moz-box-shadow:0px 0px 10px rgba(0,0,0,1);
    box-shadow:0px 0px 10px rgba(0,0,0,1);
    -webkit-transition:all .30s;
    -moz-transition:all .30s;
    -o-transition:all .30s;
    transition:all .30s;
    position:absolute;
}
ul.imagegallery-folder img {
    display:block;
    max-width:256px;
    max-height:256px;
}
ul.imagegallery-folder a:hover {
    z-index:100;
}

ul.imagegallery-folder li
{
    top:0%;
    left:50%;    
}
/* Pictures placement, scaling and rotation */
ul.imagegallery-folder li:nth-child(n) a {
    -webkit-transform:rotate(120deg) scale(1,1);
    -moz-transform:rotate(120deg) scale(1,1);
    transform:rotate(120deg) scale(1,1);
}

ul.imagegallery-folder li:nth-child(1n) a {
    -webkit-transform:rotate(30deg) scale(0.7,0.7);
    -moz-transform:rotate(30deg) scale(0.7,0.7);
    transform:rotate(0deg) scale(0.7,0.7);
    z-index:90;
}
ul.imagegallery-folder li:nth-child(2n) a {
    -webkit-transform:rotate(15deg) scale(0.7,0.7);
    -moz-transform:rotate(15deg) scale(0.7,0.7);
    transform:rotate(15deg) scale(0.7,0.7);
    z-index:80;
}
ul.imagegallery-folder li:nth-child(3n) a {
    -webkit-transform:rotate(25deg) scale(0.7,0.7);
    -moz-transform:rotate(25deg) scale(0.7,0.7);
    transform:rotate(25deg) scale(0.7,0.7);
    z-index:70;
}
ul.imagegallery-folder li:nth-child(4n) a {
    -webkit-transform:rotate(55deg) scale(0.7,0.7);
    -moz-transform:rotate(55deg) scale(0.7,0.7);
    transform:rotate(55deg) scale(0.7,0.7);
    z-index:60;

}
ul.imagegallery-folder li:nth-child(5n) a {
    -webkit-transform:rotate(65deg) scale(0.7,0.7);
    -moz-transform:rotate(65deg) scale(0.7,0.7);
    transform:rotate(65deg) scale(0.7,0.7);
    z-index:50;
}
ul.imagegallery-folder li:nth-child(6n) a {
    -webkit-transform:rotate(75deg) scale(0.7,0.7);
    -moz-transform:rotate(75deg) scale(0.7,0.7);
    transform:rotate(75deg) scale(0.7,0.7);
    z-index:40;
}
ul.imagegallery-folder li:nth-child(7n) a {
    -webkit-transform:rotate(90deg) scale(0.7,0.7);
    -moz-transform:rotate(90deg) scale(0.7,0.7);
    transform:rotate(90deg) scale(0.7,0.7);
    z-index:30;
}

/* Pictures rotation and scaling on hover */

ul.imagegallery-folder li:nth-child(n) a:hover {
    -webkit-transform:rotate(0deg) scale(1,1);
    -moz-transform:rotate(0deg) scale(1,1);
    transform:rotate(0deg) scale(1,1);
}

/************* MASONRY *************/
.gallery-masonry {
  transition: all .5s ease-in-out;
  position: relative;
  column-gap: 5px;
  column-fill: initial;
}

.gallery-masonry img {transition: width 2s ease-in-out, height 2s ease-in-out, left 2s  ease-in-out, top 2s  ease-in-out;}

.gallery-masonry .gallery-item {
  margin-bottom: 5px;
  /*display: inline-block; */
  vertical-align: top; 
}

.gallery-masonry .gallery-item img {
  transition: all .5s ease-in-out;
  backface-visibility: hidden; 
}

.gallery-masonry .gallery-item:hover img {
  opacity: .75;
}

.gallery-item {
  position: relative;
  text-align: center;
  color: white;

}


.gallery-item .title {
  position: absolute;  
  bottom: 0px;
  /*left: 50%;
  transform: translate(-50%, -50%);*/
  padding: 0px;margin:0px;
  font-size: 1.2rem;
  background:#666666;width:100%;opacity: 0.7;padding:5px;
}

.gallery-item:hover .title 
{
    background:#333333;
}
.gallery-item .title a {
  color:white;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.42);
}
 
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .gallery-masonry {
    column-count: 2;
  }
}


@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .gallery-masonry {
    column-count: 3;
  }
}
@media only screen and (min-width: 1280px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .gallery-masonry {
    column-count: 4;
  }
}
/*
.flexbox {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100vw;
}
.flexbox:hover img {
  opacity: 0.28;
}
.flexbox .item {
  position: relative;
  width: 33.33%;
}
.flexbox .item img {
  width: 100%;
  display: block;
  transition: all .8s;
}
.flexbox .item .title {
  position: absolute;
  top: 48%;
  left: 0;
  width: 100%;
  padding: 0 3%;
  font-size: 30px;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.42);
}
.flexbox .item:hover img {
  opacity: 1;
}

@media (max-width: 860px) {
  .flexbox {
    height: 220vw;
  }
  .flexbox .item {
    width: 50%;
  }
}
@media (max-width: 667px) {
  .flexbox {
    height: auto;
  }
  .flexbox .item {
    width: 100%;
  }
}
*/