#pu-post-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height:300px;
}

.gallery-cols-2 .pu-post-gallery-tile  { width: 49%; padding-bottom: 38%; }
.gallery-cols-3 .pu-post-gallery-tile  { width: 32%; padding-bottom: 18%; }
.gallery-cols-4 .pu-post-gallery-tile  { width: 24%; padding-bottom: 10%; }
.gallery-cols-5 .pu-post-gallery-tile  { width: 19%; padding-bottom: 6%; }
.gallery-cols-6 .pu-post-gallery-tile  { width: 15%; padding-bottom: 2%; }
.gallery-cols-7 .pu-post-gallery-tile  { width: 13%; padding-bottom: 1%; }
.gallery-cols-8 .pu-post-gallery-tile  { width: 11%; padding-bottom: 1%; }
.gallery-cols-9 .pu-post-gallery-tile  { width: 10%; padding-bottom: 1%; }
.gallery-cols-10 .pu-post-gallery-tile  { width: 9%; padding-bottom: 1%; }
.gallery-cols-11 .pu-post-gallery-tile  { width: 8%; padding-bottom: 1%; }
.gallery-cols-12 .pu-post-gallery-tile  { width: 7%; padding-bottom: 1%; }

@media (max-width: 415px) {
  .gallery-cols-2 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-3 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-4 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-5 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-6 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-7 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-8 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-9 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-10 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-11 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
  .gallery-cols-12 .pu-post-gallery-tile  { width: 49%; padding-bottom: 0%; }
}

.pu-post-gallery-tile {
    min-width:120px;
    display:inline-block;
    height: 200px;
    margin: 0 1% 1% 0;
    background-color: #EEE;
    line-height: 20px;
    position: relative;
    background-size: cover;
}
.pu-post-gallery-tile:hover {
    box-shadow:0px 0px 10px #BBB;
}

.pu-post-gallery-tile-title {
    position: absolute;
    bottom: 0%;
    left: 0px;
    right: 0px;
    background: rgba(0,0,0,0.6);
    padding: 10px;
    color: white;
    font-size: 0.9em;
    text-align:center; 
}



.selected {
  background:orange;
}




#post-gallery-filters {
  width: 100%;
  /*margin-left:10%;
  margin-right:10px;*/
  text-align: center;
  font-size:0.9em;
  margin: 0 0 2% 0;
}

#post-gallery-filters a {
  padding: 2px 8px;
  color:black;
  text-decoration:none;
  white-space: nowrap;
  font-size:0.9em;
}

.selectedfilter {
  background:orange !important;
  color:white; 
}

#post-gallery-pagination { width:100%; text-align:center; }
#post-gallery-pagination li { display:inline-block; }
#post-gallery-pagination li .current { color:red; }


/**************** animations ********************/

.fade-in {
animation: 		fadeIn ease 1s;
-webkit-animation:	fadeIn ease 1s;
-moz-animation:	fadeIn ease 1s;
-o-animation:		fadeIn ease 1s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}



.fade-up {
animation: fadeUp ease 3s;
-webkit-animation: fadeUp ease 3s;
-moz-animation: fadeUp ease 3s;
-o-animation: fadeUp ease 3s;
-ms-animation: fadeUp ease 3s;
}
@keyframes fadeUp {
0% {opacity:0;margin-top:30px;}
100% {opacity:1;margin-top:0px;}
}

@-moz-keyframes fadeUp {
0% {opacity:0;margin-top:30px;}
100% {opacity:1;margin-top:0px;}
}

@-webkit-keyframes fadeUp {
0% {opacity:0;margin-top:30px;}
100% {opacity:1;margin-top:0px;}
}

@-o-keyframes fadeUp {
0% {opacity:0;margin-top:30px;}
100% {opacity:1;margin-top:0px;}
}

@-ms-keyframes fadeUp {
0% {opacity:0;margin-top:30px;}
100% {opacity:1;margin-top:0px;}
}