/*
 Theme Name:   Industrial Child
 Theme URI:    http://industrial.bold-themes.com
 Description:  Industrial Child Theme
 Author:       BoldThemes
 Author URI:   http://bold-themes.com
 Template:     industrial
 Version:      1.0.0
 Tags:         one-column, right-sidebar, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  industrial-child
*/


/* Theme customization starts here
-------------------------------------------------------------- */
.i4ewOd-pzNkMb-haAclf {
    left: 0!important;
    right: 0!important;
    z-index: 9!important;
    overflow: hidden;
    color: transparent;
    position: absolute;
    -webkit-transition: background-color .25s;
    transition: background-color .25s;
}


.btPageHeadline.wBackground.cover, .btPageHeadline.wBackground.cover {
    background-color: #fbc002;
}


.btn.fil-cat{
    font-size: 15px;
    color: #000000;
    background-color: transparent;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    text-decoration: none;
    line-height: 1.5;
    letter-spacing: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    border-width: 1px;
    border-color: #fcc003;
    border-style: solid;
    transition: 0.2s all;
    -ms-transition: 0.2s all;
    -webkit-transition: 0.2s all;
    -o-transition: 0.2s all;
    display: inline-block;
    margin-left:10px;
    margin-right:10px;
}

.btn.fil-cat:hover{color:#fcc003; }

.btn.fil-cat.active{color:#fcc003; }


.toolbar{display: flex;justify-content: center;margin-top: 20px;margin-bottom: 20px;}


.mask-inner{
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
}


.mask-inner a{padding: 10px 15px;display: block;}
.mask-inner p{display: block;text-align: center;    color: #fff;
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    text-decoration: none;
    line-height: 1.5;
    letter-spacing: 0;
max-height: 90px;
    overflow: hidden;
 opacity: 0;
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
padding: 0px 10px;
}

.mask-inner{z-index: 11;}

.mask-inner a h4{
background-color: rgba(0,0,0,0.8);
font-size: 15px;
    color: #fff;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    text-decoration: none;
    line-height: 1.5;
    letter-spacing: 0;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
    opacity: 0;
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    text-align: center;
    position: relative;
    padding: 10px 5px;
}

.tile:hover .mask-inner a h4{
    transform: translateY(0px);
     transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    opacity: 1;

}



.tile:hover .mask-inner p{
    transform: translateY(0px);
     transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    opacity: 1;

}




.tile{
    position: relative;
}


.tile:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

.tile img {
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}



.tile{position: relative;overflow: hidden;margin: 0;}
.tile::after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    content: "";
    background-color: rgba(0,0,0,0.7);
    opacity: 0;
     transition: all 0.2s linear;

}

.tile:hover::after{opacity: 1; transition: all 0.2s linear;}

#portfolio{column-gap: 8px !important;}