/********************************************************************************
*                             BEM Methodology                                   *
*  [$] Block = block                                                            *
*  [$] Element = block__element                                                 *
*  [$] Modifier = block__element--modifier                                      *
*                                                                               *
*                             gallery Component                                 *
*                                                                               *
*  [^]gihe = gallery Image Hover effet                                          *                                                             
*  [^]gtoi = gallery Text On Image                                              *
*  [^]fi = Filter Items                                                         *
*                                                                               *
*                                                                               *
*                                                                               *
*                                                                               *
********************************************************************************/


/* [$] Element *****************************************/

.box-gallery-shadow {
    box-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.23);
}

.square-boxe .gallery__caption--text-under-image {
    padding-top: 0;
}

figure > figcaption {
    display: block
}

figcaption {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: 100%;
}

.gallery__column figure {
    max-height: 250px;
    min-height: 100px;
    overflow: hidden;
    position: relative;
}

.gallery__column figure > div img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery__column{
    padding-right:30px;
    padding-left:30px;
}
    
.gallery__caption > div {
    font-size: 1.1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 90%;
    overflow:hidden;
}

.filter-tag.selected {
   /* background-color: #FF4000;*/
    color: #FF4000;
}

/* [^]gtoi */
    
    @media (min-width:1200px){
        .gallery__container .gallery__column.col-lg-1:nth-child(12n+1){clear:left;}
        .gallery__container .gallery__column.col-lg-2:nth-child(6n+1){clear:left;}
        .gallery__container .gallery__column.col-lg-3:nth-child(4n+1){clear:left;}
        .gallery__container .gallery__column.col-lg-4:nth-child(3n+1){clear:left;}
        .gallery__container .gallery__column.col-lg-6:nth-child(odd){clear:left;}
    }
    @media (min-width:992px){
        .gallery__container .gallery__column.col-md-1:not(.hidden):nth-child(12n+1){clear:left;}
        .gallery__container .gallery__column.col-md-2:not(.hidden):nth-child(6n+1){clear:left;}
        .gallery__container .gallery__column.col-md-3:not(.hidden):nth-child(4n+1){clear:left;}
        .gallery__container .gallery__column.col-md-4:not(.hidden):nth-child(3n+1){clear:left;}
        .gallery__container .gallery__column.col-md-6:not(.hidden):nth-child(odd){clear:left;}
    }
    @media (min-width:768px) and (max-width:991px){
        .gallery__container .gallery__column.col-sm-1:nth-child(12n+1){clear:left;}
        .gallery__container .gallery__column.col-sm-2:nth-child(6n+1){clear:left;}
        .gallery__container .gallery__column.col-sm-3:nth-child(4n+1){clear:left;}
        .gallery__container .gallery__column.col-sm-4:nth-child(3n+1){clear:left;}
        .gallery__container .gallery__column.col-sm-6:nth-child(odd){clear:left;}
    }
    @media (max-width:767px){
        .gallery__container .gallery__column.col-xs-1:nth-child(12n+1){clear:left;}
        .gallery__container .gallery__column.col-xs-2:nth-child(6n+1){clear:left;}
        .gallery__container .gallery__column.col-xs-3:nth-child(4n+1){clear:left;}
        .gallery__container .gallery__column.col-xs-4:nth-child(3n+1){clear:left;}
        .gallery__container .gallery__column.col-xs-6:nth-child(odd){clear:left;}
    }  
    
    
    .gallery__column-clear-left{clear:left !important;}
    .gallery__column-clear-none{clear:none !important;}

/* end of [^]gtoi */


/* [^]gt */

.gallery__title{
  text-align: center;
}

/* end of [^]bt */

/* [^]gihe */
  
/* Overlay with margin */
.gallery__image-hover-effect--overlay {
    position: absolute;
    top: 5%;
    bottom: 0;
    left: 2.5%;
    right: 0;
    height: 90%;
    width: 95%;
    opacity: 0;
    transition: .5s ease;
    overflow: hidden;
}

/* Overlay without margin
.gallery__image-hover-effect--overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    overflow: hidden;
}
*/

/*.gallery__image-hover-effect .gallery__column {
    cursor:pointer;
}*/

.gallery__image-hover-effect .gallery__column:hover .gallery__image-hover-effect--overlay {
    opacity: 1;
}



/* end of [^]gihe */
 

 /* [^]fi */
    
/* [$] Block ****************************************/ 

.filter-items .navbar-default .navbar-nav>li>a {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1.5em;
    font-weight: 500;
}

.filter-items .navbar-header p{
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1.5em;
    font-weight: 500; 
}

/*.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{
    color: white; 
    background-color: #F26115;
    background:#F26115;
}*/

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: inherit;
    background-color: transparent;
}

.filter-items .navbar{
    border-radius: 0px;
} 
.filter-items .navbar-default .navbar-nav>li:focus, .filter-items .navbar-default .navbar-nav>li:hover,
.filter-items .navbar-default .navbar-nav>li.selected{
    background-color: white;
    background:white;
    color: #F26115;
}

.filter-items .navbar-default .navbar-nav>li:focus a, .filter-items .navbar-default .navbar-nav>li:hover a,
.filter-items .navbar-default .navbar-nav>li.selected a{
    color: #F26115 !important;
}

.filter-items .navbar-default .navbar-nav>li a, .bg-color-orange .navbar-brand, .bg-color-orange .navbar-brand:focus, .bg-color-orange .navbar-brand:hover{
    color: #fff;
}

.filter-items .menu__tags-xs{
    padding-top:15px;
}

.filter_title {
    text-align: center;
}


 /* end of [^]fi */
 
/* [$] Modifier ****************************************/     
 
.gallery__title--section-h2 {
    font-size:3em;
    margin: 0;
}
.list-tags--li li {
  /*  border: 1px solid #FF4000;*/
    margin-right: 40px;
    /*padding: 5px 30px;*/
}

.list-tags--li a {
    color: inherit;
    text-decoration:none;
}

.filter-by--padding{
     padding: 5px 0;    
}

.filter-button--btn {
    border-radius: 0;
    border: 1px solid #FF4000;
    padding: 12px 24px;
    margin: auto;
}

.filter-button--btn:hover {
    color: #fff;
    background-color: #FF4000;
    border-color:#FF4000;
}

.list-tags--dropdown-menu {
    border-radius: 0;
    right: 0;
    left: 0;
}

.list-tags--dropdown-menu>li>a:focus, .list-tags--dropdown-menu>li>a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #FF4000;
}

.gallery__column:hover .gallery__caption--text-under-image{
   color:#808080; 
}

.gallery__caption--text-under-image {
    padding-top: 20px;
}

.gallery__column a {
    text-decoration: none;

}




/* [#] md screen */
@media (min-width: 992px) and (max-width: 1199px) {
    
    .list-tags--li li {
        margin-right: 28px;
       /* padding: 5px 18px;*/
    }
    .gallery__column{
        padding-right:15px;
        padding-left:15px
    }
    
}

/* [#] sm screen */
@media (min-width: 768px) and (max-width: 991px) {
    
    .list-tags--li li {
        margin-right: 13px;
        padding: 5px 6px;
    }
    .gallery__column{
        padding-right:15px;
        padding-left:15px
    }
             
}

/* [#] xs screen */
@media (max-width: 767px) { 
    
    .gallery__title--section-h2 {
        font-size:2em;
    }
    
.gallery__column {
    padding-right: 0;
    padding-left: 0;
}
    
}