.projegallery {
    position: relative;
    display: block;
    margin: auto;
    max-width: 1000px;
    width: 98%;
    text-align: center;
}

    .projegallery .galbox {
        height: 200px;
        background-size: cover;
        background-position: center center;
        position: relative;
        float: left;
        width: 31%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 2%;
        cursor: pointer;
        overflow: hidden;
    }

        .projegallery .galbox:before {
            content: "\e611";
            font-family: 'themify';
            position: absolute;
            color: white;
            z-index: 2;
            font-size: 0.3rem;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            webkit-transition: all 300ms;
            -moz-transition: all 300ms;
            -ms-transition: all 300ms;
            -o-transition: all 300ms;
            transition: all 300ms;
        }

        .projegallery .galbox:after {
            content: '';
            position: absolute;
            background:  #c11b20; /*background: #fd5d14;*/
            /*background: #ffca61;*/
            width: 0%;
            z-index: 1;
            height: 0%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            opacity: 0.8;
            webkit-transition: all 300ms;
            -moz-transition: all 300ms;
            -ms-transition: all 300ms;
            -o-transition: all 300ms;
            transition: all 300ms;
        }

        .projegallery .galbox:hover:after {
            width: 100%;
            height: 100%;
        }

        .projegallery .galbox:hover:before {
            font-size: 3rem;
        }

    .projegallery .galbox2 {
        height: 200px;
        background-size: cover;
        background-position: center center;
        position: relative;
        float: left;
        width: 31%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 2%;
        cursor: pointer;
        overflow: hidden;
    }

        .projegallery .galbox2:before {
            content: "\e6ad";
            font-family: 'themify';
            position: absolute;
            color: white;
            z-index: 2;
            font-size: 3rem;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            webkit-transition: all 300ms;
            -moz-transition: all 300ms;
            -ms-transition: all 300ms;
            -o-transition: all 300ms;
            transition: all 300ms;
        }

        .projegallery .galbox2:after {
            content: '';
            position: absolute;
            background: #ffca61;
            width: 0%;
            z-index: 1;
            height: 0%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            opacity: 0.8;
            webkit-transition: all 300ms;
            -moz-transition: all 300ms;
            -ms-transition: all 300ms;
            -o-transition: all 300ms;
            transition: all 300ms;
        }

        .projegallery .galbox2:hover:after {
            width: 100%;
            height: 100%;
        }

        .projegallery .galbox2:hover:before {
            font-size: 3rem;
        }