.portfolio button, input[type="button"] {
   // -webkit-appearance: button;
    background-color: #3b4954;
    border: none;
  /*  border-bottom: 4px solid #000;*/
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    padding: 2px 38px;
    text-transform: uppercase;
    border-radius: 2px;
}
.portfolio button:hover, .portfolio button:focus {
    background-color:#627c8b;
/*    border-color: #AD2929;*/
    outline: none;
}

.item {
    width: 25%;
    float: left;
    overflow: hidden;
}
.item a, .item-title a{
    text-decoration: none;
}
/*.item img {
    width: 100%;
}*/
.portfolio-filter {
    display: table;
    margin: auto;
    margin-bottom: 20px;
}
.portfolio{
    
    
    height:600px;
    
}

  /*  .item { 
        border:1px solid #ccc;
        padding:5px;
        height:151px;
        width:195px;
    }*/
    .overlay {  
        background:rgba(0, 0, 0, .75);
        text-align:center;
        opacity:0;    
        width:100%;height:100%; 
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        position: absolute;
        /**/
        top: 0;
    }
    .item:hover {
        /*border:1px solid #555;
        border-radius:5px;*/
    }
    .item:hover .overlay {
        opacity:1;
    }

    .search {
        position:relative;
        top: 120px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .item:hover .search{        
        top: 60px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
  



/* image effect
------------------------------- */.effect-oscar {
   // background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
   // background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
    width: 318px;
    height: 192px;
}

/*.effect-oscar img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}*/

.effect-oscar figcaption {
    padding: 3em;
    background-color: rgba(58,52,42,0.7);
    -webkit-transition: background-color 0.35s;
    transition: background-color 0.35s;
}

.effect-oscar figcaption::before {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border: 1px solid #fff;
    content: '';
}

.effect-oscar h2 {
    margin: 20% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

.effect-oscar figcaption::before,
.effect-oscar .item-link a {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.effect-oscar:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.effect-oscar .item-link {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
   
}
.effect-oscar .item-link a {
    border: 1px solid transparent;
    border-radius: 100%;
    border: 1px solid #f1c152;
    width: 30px;
    height: 30px;
    display: block;
}
/*
.portfolio-item::-webkit-scrollbar {
    width: 12px;
}

.portfolio-item::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.portfolio-item::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}*/