@import '../component/title-effect.css';

@import '../component/breadcrumb.css';

@import '../component/form-messages.css';

@import '../component/pagination.css';


section.main-content

{

    padding-bottom: 80px;

    min-height: 450px;

}



.projects .cate-project {

    text-align: center;

    margin-bottom: 15px;

}



.projects .cate-project ul {

    margin: 0 auto;

    display: inline;

    border: dashed 1px #f23;

    white-space: nowrap;

    padding: 15px 10px;

    border-radius: 15px;

}



.projects .cate-project ul li {

    list-style: none;

    list-style-type: none;

    display: inline-block;

    font-size: 22px;

    line-height: 26px;

    padding: 10px 0;

    margin: 0 20px;

    border-bottom: 3px transparent solid;

    cursor: pointer;

    font-weight: 500;

}



.projects .cate-project ul li.active {

    border-bottom: 3px #f23 solid;

}



.projects .list-project .item {

    overflow: hidden;

    position: relative;

    margin: 15px 0;

}



.projects .list-project .item .overlay {

    position: absolute;

    top: 10%;

    left: 10%;

    width: 80%;

    height: 80%;

    background: linear-gradient(180deg, #FB3323 0%, rgba(103, 13, 5, 0.8) 100%);

    transition: all 900ms ease;

    -moz-transition: all 900ms ease;

    -webkit-transition: all 900ms ease;

    -ms-transition: all 900ms ease;

    -o-transition: all 900ms ease;

    -moz-transform: rotateY(-180deg);

    -webkit-transform: rotateY(-180deg);

    -ms-transform: rotateY(-180deg);

    -o-transform: rotateY(-180deg);

    transform: rotateY(-180deg);

    opacity: 0;

}



.projects .list-project .item > a {

    position: absolute;

    bottom: 0;

    left: -50px;

    display: inline-block;

    width: 50px;

    height: 50px;

    font-size: 26px;

    line-height: 50px;

    color: #FB3323;

    background: #000;

    text-align: center;

    transition-delay: 2s;

    transition: 0.5s;

}



.projects .list-project .item:hover .overlay {

    transform: rotateY(0deg);

    opacity: 1;

}





.projects .list-project .item:hover a {

    left: 0;

}



.projects .list-project .item .overlay div {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    color: #fff;

    font-size: 16px;

    text-align: center;

}

.projects .list-project .item .overlay div .title-pr
{
    margin-top: 0;
    margin-bottom: 15px;
}


.projects .list-project .item .overlay div .title-pr a {

    color: #000;

    font-size: 20px;

    font-weight: 600;

    line-height: 23px;

    text-decoration: none;

}



.projects .list-project .item .overlay div span {

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

}