/*
Theme Name: Pure Technology Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/


/* Hover Box */

.item--featured {
            position: relative;
            overflow: hidden
        }

        .item--featured img {
            width: 100%
        }

        .item--featured-bg {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: 50%;
            background-size: cover;
            -webkit-filter: blur(4px);
            filter: blur(4px);
            -webkit-transform: scale(1.3);
            -khtml-transform: scale(1.3);
            -moz-transform: scale(1.3);
            -ms-transform: scale(1.3);
            -o-transform: scale(1.3);
            transform: scale(1.3);
            -webkit-transition: all .3s;
            -khtml-transition: all .3s;
            -moz-transition: all .3s;
            -ms-transition: all .3s;
            -o-transition: all .3s;
            transition: all .3s
        }

        .item-number {
            font-size: 24px;
            color: #fff;
            display: inline-block;
            margin-bottom: 15px
        }

        .item--title {
            font-size: 22px;
            margin-bottom: 22px
        }

        .item--title a {
            color: #fff
        }

        a.btn-readmore {
            width: 38px;
            text-align: center;
            height: 35px;
            line-height: 40px;
            background-color: #fff;
            display: inline-block;
            color: #000;
            z-index: 1;
            position: relative;
            overflow: hidden
        }

        a.btn-readmore:after {
            content: "";
            -webkit-transition: all .8s;
            -khtml-transition: all .8s;
            -moz-transition: all .8s;
            -ms-transition: all .8s;
            -o-transition: all .8s;
            transition: all .8s;
            position: absolute;
            height: 120%;
            width: 15px;
            opacity: .2;
            left: -35%;
            top: -10%;
            transform: rotate(0);
            -moz-transform: rotate(0);
            -webkit-transform: rotate(0);
            -o-transform: rotate(0)
        }

        a.btn-readmore:hover,
        a.btn-readmore:focus {
            background: #fa4318;
            color: #fff
        }

        a.btn-readmore:hover:after,
        a.btn-readmore:focus:after {
            left: 130%
        }

        a.btn-readmore i {
            font-size: 18px;
            font-weight: 400;
/*             margin-left: 2px; */
            font-style: normal
        }

        .item--content {
            height: 0;
            color: #a9a9a9;
            font-size: 17px;
            line-height: 28px;
            overflow: visible;
            -webkit-transform: scaleY(0);
            -khtml-transform: scaleY(0);
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -o-transform: scaleY(0);
            transform: scaleY(0);
            transform-origin: top center;
            -webkit-transform-origin: top center;
            -webkit-transition: .3s cubic-bezier(.24, .74, .58, 1);
            -khtml-transition: .3s cubic-bezier(.24, .74, .58, 1);
            -moz-transition: .3s cubic-bezier(.24, .74, .58, 1);
            -ms-transition: .3s cubic-bezier(.24, .74, .58, 1);
            -o-transition: .3s cubic-bezier(.24, .74, .58, 1);
            transition: .3s cubic-bezier(.24, .74, .58, 1);
            opacity: 0;
            margin-bottom: 0
        }

        @media screen and (min-width: 1400px) {
            .item--content {
                max-width: 80%
            }
        }

        .item--holder {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            padding: 35px 15px 35px 30px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            -webkit-transition: .3s cubic-bezier(.24, .74, .58, 1);
            -khtml-transition: .3s cubic-bezier(.24, .74, .58, 1);
            -moz-transition: .3s cubic-bezier(.24, .74, .58, 1);
            -ms-transition: .3s cubic-bezier(.24, .74, .58, 1);
            -o-transition: .3s cubic-bezier(.24, .74, .58, 1);
            transition: .3s cubic-bezier(.24, .74, .58, 1)
        }

        .grid-item-inner {
            position: relative
        }

        .grid-item-inner:hover .item-number {
            color: #faa80a;
            display: inline-block;
            margin-bottom: 15px
        }

        .grid-item-inner:hover .item--featured-bg {
            opacity: 0
        }

        .grid-item-inner:hover .item--holder {
            background-color: rgba(0, 0, 0, .8);
            top: 30px;
            left: 30px;
            bottom: 30px;
            right: 30px
        }

        .grid-item-inner:hover .item--content {
            height: auto;
            -webkit-transform: scaleY(1);
            -khtml-transform: scaleY(1);
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -o-transform: scaleY(1);
            transform: scaleY(1);
            opacity: 1;
            -webkit-transition-delay: .12s;
            -moz-transition-delay: .12s;
            transition-delay: .12s;
            margin-bottom: 25px
        }

        .grid-item-inner:hover a.btn-readmore {
            background-color: #1e9cde;
            color: #fff
        }