#project {
    position: relative;
    background: #062550;
    padding: 70px 0px;
}

#project h2,
h5,
p {
    color: #fff;
}


@media (min-width: 1024px) {
    .item-project:nth-child(6n+1) {
        float: left;
        height: 35vh;
        padding: 0px 15px;
        padding-bottom: 30px;
    /*display: inline-block;*/
    width: 50%;
    margin-bottom: 0px;
    }
    
    .item-project:nth-child(6n+2) {
    float: left;
    height: 35vh;
    padding: 0px 15px;
    padding-bottom: 30px;
    /*display: inline-block;*/
    width: 25%;
    margin-bottom: 0px;
    }
    
    .item-project:nth-child(6n+3) {
    float: left;
    height: 35vh;
    padding: 0px 15px;
    padding-bottom: 30px;
    /*display: inline-block;*/
    width: 25%;
    margin-bottom: 0px;
    }
    
    .item-project:nth-child(6n+4) {
    float: left;
    height: 35vh;
    padding: 0px 15px;
    padding-bottom: 30px;
    /*display: inline-block;*/
    width: 25%;
    margin-bottom: 0px;
    }
    
    .item-project:nth-child(6n+5) {
    float: left;
    height: 35vh;
    padding: 0px 15px;
    padding-bottom: 30px;
    /*display: inline-block;*/
    width: 25%;
    margin-bottom: 0px;
    }
    
    .item-project:nth-child(6n+6) {
    float: left;
    height: 35vh;
    padding: 0px 15px;
    padding-bottom: 30px;
    /*display: inline-block;*/
    width: 50%;
    margin-bottom: 0px;
    }
}

.row-project {
    margin-right: -15px;
    margin-left: -15px;
}

.item-project {
    position: relative;
    display: block;
    float: left;
    width: 50%;
    height: 150px;
    padding: 0px 15px;
    margin-bottom: 30px;
}

.item-project .box-text{
    position: relative;
    overflow: hidden;
    padding: 10px 10px;
}

.item-project .box-project .box-text{
    position: absolute;
    background: #414e61cc;
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -khtml-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.item-project .box-project:hover .box-text{
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -khtml-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.box-project {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    -webkit-transition: all 1s ease-in-out;
    -khtml-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.box-project a{
    display: block;
    width: 100%;
    height: 100%;
}

#project .btn-light {
    position: relative;
    padding: 12px 50px;
    color: #062550;
    background: #fff;
}

#project .btn-light::before {
    content: '';
    width: 0%;
    height: 1px;
    position: absolute;
    left: 10px;
    bottom: -10px;
    background: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#project .btn-light::after {
    content: '';
    width: 1px;
    height: 0%;
    position: absolute;
    right: -10px;
    top: 10px;
    background: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

#project .btn-light:hover:before {
    content: '';
    width: 105%;
    height: 1px;
    position: absolute;
    left: 10px;
    bottom: -10px;
    background: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#project .btn-light:hover:after {
    content: '';
    width: 1px;
    height: 110%;
    position: absolute;
    right: -10px;
    top: 10px;
    background: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}










#project .col-pro {
    display: block;
    border: 1px solid #00000000;
    -webkit-transition: all .25s ease-in-out;
    -khtml-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

#project .col-pro:hover {
    border: 1px solid #004490;
    -webkit-transition: all .25s ease-in-out;
    -khtml-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}