/*portfolio page start here*/
#filters {padding: 7px 0;list-style: none;width: 100%;text-align: center;background: #ffffff;}
#filters li, #filters li a {display: inline-block;}
#filters li span.filter {display: block;margin: 10px 8px 0;text-decoration: none;color: #1b2125;cursor: pointer;font-size: 17px;position: relative;}
#filters li span.active {color: #eb1e26;}
#filters li span.active::before {content: "";width: 100%;height: 2px;background: #ff517e;position: absolute;left: 0;right: 0;bottom: -7px;}
.portfolio-section-main {padding-top: 50px;}
.portfolio-main-section {background: #f3f5f7;}
.portfolio-new {padding: 20px 0px 26px;position: relative;clear: both;height: auto !important;}
.portfolio-project-section {float: left;padding: 0 15px;width: 50%;}
.portfolio-new .portfolio-img {background: #ffffff;box-shadow: 2px 0 10px rgba(0, 0, 0, 0.16);margin-bottom: 30px;position: relative;display: inline-block;text-align: center;padding: 0;width: 100%;}
.project-img-seciton {position: relative;overflow: hidden;}
.project-name-img-section {font-size: 23px;}
.portfolio-img .project-img-seciton .project-name-img-section {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.project-name-img-section::after, .project-name-img-section::before {background: rgba(0, 0, 0, 0.60);}
.project-name-img-section::before {content: "";position: absolute;opacity: 0;z-index: 3;box-shadow: none;transition: all 0.5s ease 0s;top: 0;left: 0;right: 100%;bottom: 100%;}
.project-name-img-section::after {content: "";position: absolute;opacity: 0;z-index: 3;box-shadow: none;transition: all 0.5s ease 0s;top: 100%;left: 100%;right: 0px;bottom: 0px;}
.project-name-img-section:hover::after {opacity: 1;left: 0;top: 0;}
.project-name-img-section:hover::before {opacity: 1;bottom: 0;right: 0;}
.project-name-section-txt {position: absolute;top: 0;bottom: 0;left:0px;right: 0;font-size: 26px;color: #ffffff;text-align: center;line-height: 33px;height: 80px;margin: auto;text-shadow: 0 1px 0px rgba(0, 0, 0, 0.7);width: 100%;}
.project-name-head-section {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.project-head-subline {font-size: 14px;font-weight: 400px; color: #ffffff;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.view-project-btn-section {position: absolute;height: 100%;width: 100%;top: 0;right: 0;bottom: 0;left: 0;margin: auto;z-index: 9;visibility: hidden;opacity: 0;transition: 1s;}
.view-project-btn-section.figeit-project-btn-section{height: 230px;}
.project-name-img-section:hover .view-project-btn-section {opacity: 1;visibility: visible;transition: 1.5s;}
.project-logo-section {margin-bottom: 15px;}
.portfolio img {max-width: 100%;position: relative;top: 0;-webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);}
.portfolio.wideek-main-section .project-logo-section img{width: 100px;}
.btn-view-project {display: inline-block;font-size: 15px;color: #ffffff;background: #ff517e;border: 1px solid #ff517e;padding: 8px 20px;font-weight: 600;margin-top: 10px;height: 40px;line-height: 20px;}
/* .btn-view-project span.search-icon-section {display: none;} */
#portfoliolist .portfolio {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;display: none;}
.btn-view-project:hover{background: transparent;border-color: #ffffff;color: #ffffff;}
.portfolio-app-buttons img{height: 40px;}
.portfolio-app-buttons a:hover{opacity: 0.9}
.my-hero-main-section .view-project-btn-section{height: 190px;}
.my-hero-main-section .project-logo-section img{width: 140px;}



@media all and (min-width:992px) {
    .project-name-img-section:hover:before {
        opacity: 1;
        bottom: 0;
        right: 0;
    }

    .project-name-img-section:hover:after {
        opacity: 1;
        left: 0;
        top: 0;
    }

    /*img over effect end*/
}

@media all and (max-width:1600px) {
    .project-name-head {
        max-width: 290px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }

    .project-name-img-section {
        font-size: 23px;
    }
}


@media all and (max-width:1400px) {
    .specific-problems-mobils-img-section {
        max-width: 900px;
        width: 100%;
        margin: 0 auto;
    }

    .portfolio-quedemonos-section .project-about-details {
        background-size: 650px;
    }

    .project-about-details {
        background-size: 500px;
        padding: 40px 0 0;
    }
}

@media all and (max-width:1199px) {
    .portfolio-project-section { width: 50%;}
    .mobile-project-details-about {
        padding: 50px 0;
    }

    .portfolio-details-section .specific-problems-content-section .get-in-touch-btn-section.specific-problems-points-btn .get-in-touch-btn {
        margin-top: 10px;
    }

    .portfolio-details-section .specific-problems-content-section {
        padding: 10px 10px;
    }

    .project-about-details {
        background-position: 128% bottom;
        padding: 60px 0;
    }

}

@media all and (max-width:991px) {

    /*portfolio page start here*/

    .project-name-details-section {
        float: none;
    }

    .view-project-btn-section {
        float: left;
        margin-top: 10px;
    }


    .industry-drop-section {
        left: auto;
        right: 0;
        z-index: 99
    }

    .industry-drop-section::before {
        left: auto;
        right: 15px;
    }


    .view-project-btn-section {
        float: left;
        margin-top: 42px;
        margin-left: -23px;
    }

    .industry-section-main:hover .industry-drop-section {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        transition: 0.5s;
    }

    .industry-section-main.active-drop .industry-drop-section {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        transition: 0.5s;
    }

    /*portfolio page end here*/
    .what-our-client-section {
        padding: 50px 0 0;
    }

    .technologies-used-section {
        position: relative;
        width: 100%;
    }

    .what-our-client-section::before {
        content: none;
    }

    .bast-deal-content-section,
    .bast-deal-btn-section {
        display: block;
        text-align: center;
        margin: 0;
    }

    .bast-deal-section-main.take-your-business-section.portfolio-details-section .get-in-touch-btn {
        margin: 20px auto 0;
        height: 40px;
        padding: 10px 25px;
    }

    .bast-deal-section-main.take-your-business-section.portfolio-details-section {
        padding: 30px 0;
    }

    .bast-deal-section-main.take-your-business-section.portfolio-details-section .want-to-talk-btn .get-in-touch-btn {
        padding: 10px 25px;
        max-width: none;
        width: auto;
        display: inline-block
    }

    .project-about-details {
        background-image: none !important;
    }

    .specific-problems-main {
        box-shadow: none;
        margin: 0;
    }

    .specific-problems-main::before {
        content: none
    }

    .portfolio-details-section .specific-problems-content-section {
        padding: 30px 0;
    }

    .banner-content-text.slider-content.text-col-postion h1 br {
        display: none
    }

    .portfolio-details-section .home-banner-block {
        height: auto;
        padding: 100px 0 30px
    }

    .portfolio-details-section .banner-content-text.slider-content.text-col-postion,
    .portfolio-mobile-details-section.portfolio-details-section .banner-content-text.slider-content.text-col-postion {
        text-align: left;
        height: auto
    }
}



@media all and (max-width:767px) {
    .col-xs-12 {
        width: 100%;
    }

    /*portfolio page start here*/
    .portfolio-section-main .banner-content-text.slider-content.text-col-postion {
        height: auto;
    }

    .portfolio-section-main .home-banner-block h1 {
        font-size: 25px;
        
        line-height: 35px;
    }

    .portfolio-section-main .home-banner-block .semi-head-section {
        font-weight: 400px; 
        font-size: 18px;
    }

    .portfolio-project-section {
        width: 100%;
        padding: 0 0px 0 0;
    }

    .portfolio-section-main .get-in-touch-btn-section .get-in-touch-btn {
        height: 40px;
        padding: 8px 20px;
    }

    .pronav_add .portfolio-section-main #filters{box-shadow: 0px 0px 10px 0px rgb(0, 0, 0, 0.09);position: fixed;top: 0;z-index: 999;}
    .pronav_add.pronav_rev .portfolio-section-main #filters{position: relative;}
    #filters li,
    #filters li a,
    #filters li span.filter {
        white-space: nowrap;    
    }
    #filters li span.filter{margin: 6px 8px 6px;}
    #filters {
        padding: 0;
        display: flex;
        justify-items: center;
        overflow-y: auto;
    }

    #filters li span.active::before {
        bottom: -1px;
    }

    .portfolio-new .portfolio-img {
        margin-bottom: 15px;
    }

    .portfolio-new {
        padding: 10px 0 0;
        display: block;
        grid-auto-flow: column;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        /* grid-gap: 0px 10px; */
    }

    /*portfolio page end here*/
    .portfolio-section-main .home-banner-block,
    .portfolio-details-section .home-banner-block,
    .portfolio-mobile-details-section.portfolio-details-section .home-banner-block {
        background: #202e3b !important;
        height: auto;
    }

    .portfolio-details-section .banner-panel::before {
        content: none;
    }

    .project-details-logo-section {
        margin-bottom: 15px;
        display: none;
    }

    .portfolio-mobile-details-section .project-details-logo-section img {
        width: 80px;
    }

    .portfolio-details-section .home-banner-block h1 {
        
        font-size: 25px;
        line-height: 35px;
        margin-bottom: 13px;
    }

    .portfolio-details-section .home-banner-block .semi-head-section {
        font-size: 16px;
    }

    .portfolio-details-section .home-banner-block .get-in-touch-btn-section .get-in-touch-btn {
        margin-top: 0px !important;
        
    }

    .portfolio-details-section .home-banner-block .get-in-touch-btn-section .get-in-touch-btn:hover {
        border-color: #ffffff;
        color: #ffffff;
    }

    .project-about-details {
        padding: 30px 0;
    }

    .project-laptop-img-seciton {
        display: none
    }

    .what-tech-did-content-main {
        margin: 0;
        padding: 30px 0;
    }

    .what-tech-head,
    .technologies-used-head,
    .what-tech-did-section .specific-problems-head,
    .project-head-black,
    .specific-problems-head {
        font-size: 25px;
        
    }

    .what-tech-did-content p {
        font-size: 16px;
    }

    .what-our-client-section {
        padding: 30px 0 0;
    }

    .what-our-client-head {
        font-size: 30px;
        margin-top: 10px;
    }

    .specific-problems-points-content {
        margin-left: 35px;
    }

    .technologies-used-section-content {
        padding: 0 15px;
        display: block;
    }

    .technologies-used-section {
        height: auto;
        display: block;
        padding: 20px 0;
    }

    .bast-deal-section-main.take-your-business-section.portfolio-details-section .get-in-touch-btn {
        background: #f23e45;
        border-color: #f23e45;
        margin-bottom: 20px;
    }

    .bast-deal-section-main.take-your-business-section.portfolio-details-section .get-in-touch-btn:hover {
        background: transparent;
    }

    .bast-deal-section-main.take-your-business-section.portfolio-details-section {
        padding: 30px 0 10px;
    }

    .portfolio-mobile-details-section .home-banner-block .semi-head-section {
        font-weight: 400px; 
    }

    .portfolio-mobile-details-section .home-banner-block .semi-head-section br {
        display: none
    }

    .portfolio-details-section .get-in-touch-btn-section .get-in-touch-btn {
        background: #f23e45;
        border-color: #f23e45;
    }

    .portfolio-details-section .get-in-touch-btn-section .get-in-touch-btn:hover {
        background: transparent;
    }

    .mobile-details-specific-seciton .specific-problems-content-section {
        padding: 0;
    }

    .specific-problems-mobils-img-section {
        margin-bottom: 30px;
    }

    .what-techtiq-content-block {
        margin: 10px 0 !important;
    }

    .technical-specifications-main-section,
    .mobile-project-details-about {
        padding: 30px 0;
    }

    .technical-specifications-head {
        font-size: 25px;
    }

    .what-did-semicontnet,
    .project-content-semi-head-content {
        font-size: 17px;
        line-height: 29px;
    }

    .red-head-section {
        font-size: 17px;
        text-transform: none;
    }

    .project-head-black {
        margin-bottom: 10px;
    }

    .project-about-content p {
        margin-bottom: 15px;
    }

    .portfolio-details-section .get-in-touch-btn-section .get-in-touch-btn {
        font-size: 16px;
        height: 40px;
        padding: 7px 20px;
        margin-top: 10px !important;
    }

    .seicific-problem-semi-head {
        font-size: 17px;
    }

    .technical-specification-icon {
        display: block;
        margin: 0;
    }

    /*wideek app page*/
    .portfolio-wideek-app-section .mobile-project-details-about:before,
    .portfolio-wideek-app-section .mobile-project-details-about:after {
        content: none;
    }

}