/*project listing*/

@media (min-width: 1600px) {
    body.view-projects #sp-main-body .container { width: 1600px; }
}

body.view-projects #sp-main-body {
    padding: 50px 0;
}

@media (max-width: 767px) {
    body.view-projects #sp-main-body { padding: 20px 0; }
}

.project-list .project.card .img-wrapper {
    width: 100%;
    height: 50vh;
    overflow: hidden;
}

.project-list .project.card .img-wrapper img {
    object-fit: cover;
    height: 100%;
    filter: grayscale(0.5);
    transition: 0.8s;
}

.project-list .project.card:hover .img-wrapper img {
    /* transform: scale(1.05); */
    filter: grayscale(0) saturate(1.5);
}

.project-list .project.card {
    margin-bottom: 50px;
}

.project-list .project.card .card-body p.card-title {
    font-size: 14px;
    font-weight: 200;
    margin-bottom: 0;
}

.project-list .project.card .card-body {
    padding-top: 15px;
    color: #2d2f31;
}

.project-list .project.card .card-body .card-info h3 {
    margin: 6px 0;
    font-size: 38px;
    font-weight: 600;
    letter-spacing: 1px;
}

.project-list .project.card .card-body .card-info p {
    font-size: 12px;
    color: rgb(45 47 49 / 60%);
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .project-list .project.card .img-wrapper { height: 250px; }
    .project-list .project.card .card-body p.card-title { font-size: 12px; }
    .project-list .project.card .card-body .card-info h3 { font-size: 24px; }
    .project-list .project.card { margin-bottom: 30px; }
}

/*end of project listing*/






body.com-portfolio.view-project section#sp-page-title {
    display: none;
}

body.com-portfolio.view-project section#sp-main-body {
    padding: 50px 0;
    border-top: 1px solid #1b2b46;
}

body.com-portfolio.view-project #sp-main-body .container {
    width: 100%;
    padding: 0;
}

body.com-portfolio.view-project .project-quote {
    padding: 25px;
    text-align: justify;
}

body.com-portfolio.view-project .project-quote p {
    margin: 0;
    font-size: 32px;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 1.3;
}

@media (max-width: 767px) {
    body.com-portfolio.view-project .project-quote { padding: 25px; }
}

.project-title {
    padding: 0 35px 50px;
}

.project-title h3 {
    color: #2d2f31;
    font-size: 52px;
    margin-top: 0;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
}

.project-title h3:before {
    content: "";
    position: absolute;
    background: #39465a;
    width: 50px;
    height: 3px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -70px;
}

.project-title h6 {
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 1px;
    position: relative;
    padding-left: 25px;
}

.project-title h6:before {
    content: "\f041";
    position: absolute;
    left: 5px;
    color: #2d2f31;
    font-family: 'FontAwesome';
    line-height: 1.4;
}

.project-image {
    padding: 0px 10px;
    display: flex;
}

.project-image>div {
    width: 100%;
}

.project-image img {
    padding: 15px !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: grayscale(0.5);
    transition: 0.8s;
    /* width: 100% !important; */
}

.project-image img:hover {
    filter: grayscale(0) saturate(1.5);
}

.project-cover-image {
    width: 100%;
    height: 80vh;
    padding: 0 25px;
    margin-bottom: 60px;
}

.project-cover-image img {
    object-fit: cover;
    height: 100%;
    width: 100% !important;
    filter: grayscale(0.5);
    transition: 0.8s;
}

.project-cover-image img:hover {
    filter: grayscale(0) saturate(1.5);
}

.project-description {
    padding: 0px 50px 30px;
    text-align: center;
}

.project-description p {
    margin: 0;
    width: 80%;
    margin: auto;
}

.project-description h4 {
    font-size: 16px;
    margin: 0 0 5px;
}

.project-specification {
    padding: 0 50px 50px;
    justify-content: center;
    text-align: center;
}

.project-specification h4 {
    font-size: 16px;
    margin: 20px 0 5px;
    font-weight: 500;
}

.project-specification p {
    margin: 0;
    font-size: 18px;
    color: #2d2f31;
    font-weight: 700;
    line-height: 1.5;
    width: 80%;
    margin: auto;
}


@media (max-width: 991px) {
    .project-title {padding: 0 15px 30px;}
    .project-title h6 { font-size: 12px; padding-left: 20px; }
    .project-title h6:before { line-height: 1.5; }
    .project-title h3 {font-size: 26px;margin-bottom: 6px;font-weight: 600;}
    .project-title h3:before { display: none; }
    .project-cover-image {height: 450px;padding: 0 15px;margin-bottom: 30px;}
    .project-description {padding: 0 15px 0;}
    .project-description p { width: 100%; }
    .project-specification { padding: 10px 15px 30px; }
    .project-specification h4 { font-size: 14px; }
    .project-specification p { font-size: 16px; width: 100%; }
    .project-image { padding: 0; display: block; }
    .project-image>div { display: block !important; }
    .project-image img { width: 100% !important; padding-bottom: 0 !important;}
}

@media (max-width: 767px) {
    .project-cover-image {height: 40vh;}
}




/**filter*/

.project-list-filter button[type="Submit"] {
    padding: 0;
    position: absolute;
    right: 0;
    background: none;
    font-weight: 500;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: 9;
    color: #301d01;
    box-shadow: none !important;
}

.project-list-filter .btn-wrapper.input-append {
    position: relative;
    margin: 0;
}

.js-stools .js-stools-container-filters select.active, .js-stools .js-stools-container-filters .chzn-container.active .chzn-single {
    border: 0;
    border-bottom: 1px solid #2d2f31;
}

.project-list-filter label {
      display: none;
    border-bottom: 3px solid #ce1c1c;
    color: #8e8e8e;
    padding-right: 2px;
    margin-right: 20px;
}

.project-list-filter button.btn.hasTooltip.js-stools-btn-filter {
    padding: 0px 30px;
    font-size: 14px;
    height: 34px;
    transition: 0.3s;
    /* background: transparent; */
    color: #6d1717cf;
    border: 1px solid #000;
}

.project-list-filter button.btn.hasTooltip.js-stools-btn-filter:hover {
  opacity:40%;
}

.project-list-filter {
    margin-bottom: 20px;
}
@media(max-width:991px){
.project-list-filter {
    margin-bottom: 30px;
}}
button.btn.hasTooltip.js-stools-btn-clear {
    padding: 2px 15px;
    height: 33px;
    transition: 0.3s;
    font-size: 12px;
    font-weight: 400;
    border-radius: 0;
    color: #fff;
    background: #301d01;
    line-height: 1;
}

button.btn.hasTooltip.js-stools-btn-clear:hover {
    border-color: #fff;
}
.btn:active:focus, .btn:focus {
    outline: none;
}

.project-list-filter input#filter_search {
    border: 0;
    background: none;
    border-bottom: 1px solid #a9b0bc;
    border-radius: 0;
    color: #2d2f31;
    font-size: 13px;
    box-shadow: none;
    padding: 5px 30px 5px 10px;
}

.project-list-filter input#filter_search::placeholder {
    color: rgb(45 47 49 / 50%);
    letter-spacing: 0.5px;
}

.project-list-filter .js-stools-field-filter select {
    border: 0;
    border-bottom: 1px solid #a9b0bc;
    border-radius: 0;
    background: none;
    padding: 5px 25px 5px 5px;
    font-size: 13px;
    color: #2d2f31;
    box-shadow: none;
    letter-spacing: 0.5px;
}

.project-list-filter .js-stools-field-filter select option {
    color: #5a5a5a;
}

@media (max-width: 480px) {
    .project-list-filter .js-stools-field-filter {display: block;}
    .project-list-filter .js-stools-field-filter select { width: 100%; }
}






.pagination {
    margin-bottom: 0;
}

.pagination>.active>a, .pagination>.active>span {
    color: #ffffff;
    background: #2d2f31;
    border: 1px solid #2d2f31 !important;
}

.pagination >li { margin: 0 5px !important ;}

.pagination >li.next,
.pagination >li.prev {
    display: none;
}

.pagination>.active>a:hover, .pagination>.active>a:focus, .pagination>.active>span:hover, .pagination>.active>span:focus {background: #2d2f31;color: #fff;}

.pagination>li>a, .pagination>li>span {
    border: 1px solid #dddd;
}