/* ExtraSmall devices (tablets, 767px and down) */
@media (max-width: 767px) {
    #home .section-title h1 {
        font-size: 32px;
    }

    .portfolio-items article {
        width: 49.4%;
    }

    .section-content {
        padding: 0px 0;
    }

    .section-title h1 {
        font-size: 45px;
    }

    .header .heading {
        font-size: 24px;
    }

        .header .heading:after, .header .heading:before {
            width: 40px;
            top: -6px;
        }

    .services-box {
        padding-bottom: 15px;
    }

    .header .box-heading {
        font-size: 44px;
    }

    .swiper-about, .swiper-about .swiper-slide {
        max-height: 350px;
    }

    .new-line {
        margin-top: 40px;
    }

    ul.timeline {
        width: 95%;
    }

    #ajaxpage .section-title h1 {
        font-size: 40px;
    }

    #filters a {
        clear: both;
        display: block;
        margin: 12px auto;
        width: 80%;
    }

        #filters a span {
            width: 100%;
        }

    .project-media, .project-description {
        margin: 40px 0 0 0;
        text-align: center;
    }

    #map_canvas {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .swiper-about .swiper-slide {
        max-height: 250px;
    }

    #comment_form input, #comment_form textarea {
        width: 100% !important;
    }

    .minified .logo a img.site_scroll_logo {
        height: 70px !important;
        padding: 0 !important;
    }
}

@media (max-width: 992px) {
    #HeaderSpace {
        margin-bottom: 75px !important;
    }

    section.ReadPage {
        /* min-height: 80vh; */
        padding-top: 180px;
    }

    .logo a img {
        max-height: 140px;
        /*display: none;*/
    }

        .logo a img.site_scroll_logo {
            /*display: block;*/
        }

    .banner {
        margin-top: 75px !important;
    }

    .swiper-about .swiper-slide {
        max-height: 450px;
    }

    .pagination-about {
        bottom: 0px;
        top: 0px;
    }
    /* Navigation */
    .mobile-nav-button {
        display: block;
    }

    .navbar div.nav-menu {
        display: none;
        top: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        float: none;
        /* height: 400px; */
        /* overflow: auto; */
    }

    .nav-menu ul li a {
        color: #1e1e1e;
    }

    .navbar div.nav-menu ul.nav {
        display: block;
        top: 0;
        width: 100%;
        height: auto;
    }

    .trans-nav div.nav-menu ul.nav {
        /* background: #ffffff; */
        background: #bbd3e6;
    }

    .navbar div.nav-menu ul.nav li {
        display: block;
        top: 0;
        width: 100%;
        float: none;
        padding: 0;
        clear: both;
    }

        .navbar div.nav-menu ul.nav li a {
            display: block;
            top: 0;
            width: 100%;
            padding: 0 15px;
            height: auto;
            line-height: 35px;
            border-top: 1px solid rgba(137,137,137,0.1);
        }

    .nav-menu ul.dropdown-menu {
        position: relative;
        width: 100%;
    }

    .navbar div.nav-menu ul.dropdown-menu li a {
        padding: 0 25px;
    }
}

@media (max-width: 560px) {
    .header .heading {
        font-size: 22px;
        letter-spacing: 0px;
    }

        .header .heading:after, .header .heading:before {
            width: 25px;
            top: -5px;
        }

    .accordion .accordion-heading {
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

        .accordion .accordion-heading .accordion-toggle > em {
            display: none;
        }

    .swiper-about, .swiper-about .swiper-slide {
        max-height: 300px;
    }

    .header .box-heading {
        font-size: 40px;
    }

    .portfolio-items article {
        width: 100%;
        margin: 0px 0px 5px 0px;
    }

    .section-title h1:before, .section-title h1:after {
        background: none;
    }

    .section-title h1.white:before, .section-title h1.white:after {
        background: none;
    }

    ul.timeline {
        background: none;
    }

    .timeline .note {
        width: 100%;
    }

        .timeline .note .arrow, .timeline .start {
            display: none;
        }

        .timeline .note:after {
            right: -20%;
        }

        .timeline .note:nth-of-type(2n):after {
            left: -20%;
        }

    .slide-content {
        margin: 0px auto;
    }
}

@media (max-width: 320px) {
    .header .heading {
        font-size: 18px;
        letter-spacing: 0px;
    }

    .header .box-heading {
        font-size: 34px;
    }

    .header .heading:after, .header .heading:before {
        width: 15px;
        top: -4px;
    }
}

@media (max-width: 1023px) {
    .item_top {
        top: 0;
        opacity: 1;
    }

    .item_left {
        left: 0px;
        opacity: 1;
    }

    .item_right {
        right: 0px;
        opacity: 1;
    }

    .item_bottom {
        bottom: 0;
        opacity: 1;
    }

    .item_fade_in {
        opacity: 1;
        right: 0px;
    }

    .chart {
        margin: 50px auto;
    }

    .parallax {
        background-attachment: scroll !important;
        background-position: center top !important;
        height: auto;
        margin: 0 auto;
        width: 100%;
    }

    .timeline .note:after {
        right: -8%;
    }

    .timeline .note:nth-of-type(2n):after {
        left: -8%;
    }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .project-description {
        text-align: center;
    }

    .portfolio-items article {
        width: 49.4%;
    }

    .process-flow {
        max-width: 750px;
        padding: 0px;
        margin: 0px auto;
    }

        .process-flow > li {
            clear: right;
            float: left;
            height: 120px;
            margin: 0;
            position: relative;
            width: 256px;
        }

            .process-flow > li .line {
                height: 400px;
                position: absolute;
                right: -48%;
                top: -6.7em;
                -moz-transform: rotate(-75deg);
                -webkit-transform: rotate(-75deg);
                -o-transform: rotate(-75deg);
                -ms-transform: rotate(-75deg);
                transform: rotate(-75deg);
            }

                .process-flow > li .line.active .progress {
                    height: 400px;
                }

            .process-flow > li:nth-child(2n) {
                clear: left;
                float: right;
            }

                .process-flow > li:nth-child(2n) .line {
                    left: -242%;
                    -moz-transform: rotate(75deg);
                    -webkit-transform: rotate(75deg);
                    -o-transform: rotate(75deg);
                    -ms-transform: rotate(75deg);
                    transform: rotate(75deg);
                }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* Navigation */
    .navbar div.nav-menu {
        display: block !important;
    }

    .project-description {
        text-align: inherit;
    }

    .portfolio-items article {
        width: 32.5%;
    }

    .slider-container {
        width: 940px;
        height: 604px;
        background: transparent url(../images/hd-screen.png) top center;
        background-size: cover;
    }

    .navbar .navbar-nav {
        float: right;
        margin: 2px 0;
    }

        .navbar .navbar-nav li {
            margin-left: 0px;
        }

            .navbar .navbar-nav li a {
                color: #717171;
                display: inline-block;
                padding: 8px 10px;
            }

    .navbar .navbar-collapse {
        background-color: rgba(255, 255, 255, 0);
        box-shadow: 0 4px 0 rgba(0, 0, 0, 0) inset;
        margin-top: 0;
        text-align: center;
    }

    .navbar-transparent .navbar-nav li a {
        color: #FFFFFF;
        display: inline-block;
        padding: 8px 12px;
    }

    .navbar-transparent .navbar-collapse {
        background-color: rgba(0, 0, 0, 0);
        box-shadow: 0 4px 0 rgba(0, 0, 0, 0) inset;
        margin-top: 0;
        text-align: center;
    }
}

@media (min-width: 1200px) {
    .portfolio-items article {
        width: 24.4%;
    }
}

/**Service List**/
@media (max-width: 768px) {
    ._service {
        -webkit-clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 20% 50%, 0% 0%) !important;
        clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 20% 50%, 0% 0%) !important;
        width: 33.33333% !important;
    }

        ._service:first-child {
            -webkit-clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0 53%, 0% 0%) !important;
            clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0 53%, 0% 0%) !important;
        }

        ._service:last-child {
            -webkit-clip-path: polygon(81% 0%, 90% 50%, 81% 100%, 16% 100%, 7% 50%, 16% 0) !important;
            clip-path: polygon(81% 0%, 90% 50%, 81% 100%, 16% 100%, 7% 50%, 16% 0) !important;
        }

        ._service h5 {
            padding-left: 45px !important;
            width: 112px !important;
            font-size: 14px !important;
        }

        ._service:last-child h5 {
            padding-left: 50px !important;
            width: 100% !important;
            font-size: 18px !important;
        }
}


@media (max-width: 1200px) {
    /*._ServiceList {
        width: 100%;
    }*/

    ._service {
        -webkit-clip-path: polygon(77% 0%, 100% 50%, 77% 100%, 0% 100%, 22% 50%, 0% 0%) !important;
        clip-path: polygon(77% 0%, 100% 50%, 77% 100%, 0% 100%, 22% 50%, 0% 0%) !important;
        width: 165px !important;
    }

        ._service:first-child {
            -webkit-clip-path: polygon(77% 0%, 100% 50%, 77% 100%, 0% 100%, 0 50%, 0% 0%) !important;
            clip-path: polygon(77% 0%, 100% 50%, 77% 100%, 0% 100%, 0 50%, 0% 0%) !important;
        }

        ._service .fa-3x {
            font-size: 2.5em;
            margin-left: -2px;
            margin-top: 2px;
        }

        ._service h5 {
            padding-left: 36px !important;
            width: 105px !important;
            font-size: 12px !important;
        }

        ._service:last-child h5 {
            padding-left: 50px !important;
            width: 100% !important;
            font-size: 18px !important;
        }
}

@media (max-width: 860px) {
    ._service:nth-child(4) {
        clear: both;
    }

    ._service:last-child {
        -webkit-clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 14% 100%, 0% 50%, 14% 0) !important;
        clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 14% 100%, 0% 50%, 14% 0) !important;
        width: 250px !important;
        margin-left: -25px;
    }

        ._service:last-child h5 {
            font-size: 17px !important;
            line-height: 22px;
        }

        ._service:last-child span {
            padding-left: 0 !important;
        }

        ._service:last-child:before {
            left: 7px;
        }

        ._service:last-child:after {
            right: 9px !important;
        }
}

@media (max-width: 560px) {
    ._service:nth-child(4) {
        clear: none;
    }

    ._service:nth-child(2n+1) {
        clear: both;
    }
}

/*
@media (max-width: 1001px) {
    ._service {
        -webkit-clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 20% 50%, 0% 0%) !important;
        clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 20% 50%, 0% 0%) !important;
        width: 20% !important;
    }

        ._service:first-child {
            -webkit-clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0 53%, 0% 0%) !important;
            clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0 53%, 0% 0%) !important;
        }

        ._service:last-child {
            -webkit-clip-path: polygon(81% 0%, 90% 50%, 81% 100%, 16% 100%, 7% 50%, 16% 0) !important;
            clip-path: polygon(81% 0%, 90% 50%, 81% 100%, 16% 100%, 7% 50%, 16% 0) !important;
        }

        ._service h5 {
            padding-left: 45px !important;
            width: 112px !important;
            font-size: 14px !important;
        }

        ._service:last-child h5 {
            padding-left: 50px !important;
            width: 100% !important;
            font-size: 18px !important;
        }
}*/
/***Slider**/
@media only screen and (max-width:980px) {
    section.SliderContent {
        height: 400px !important;
    }

        section.SliderContent .slide-ct .bContainer h1 {
            font-size: 35px !important;
            padding-left: 27% !important;
        }

        section.SliderContent .slide-ct .bContainer {
            width: auto !important;
        }

        section.SliderContent .container {
            padding: 0px;
            width: 100%;
            height: 100%;
        }

        section.SliderContent .rsArrowLeft {
            left: 25px;
        }

        section.SliderContent .rsArrowRight {
            right: 25px;
        }

    section.ProductContent .brands ul li,
    section.ProductContent .services ul li {
        width: 25%;
    }
}

@media only screen and (max-width:1200px) {
    section.SliderContent img.rsImg {
        /*position: relative;
        height: 100%;
        width: auto;
        max-width: initial;
        object-fit: fill;
        margin: 0 !important;
        top: initial;*/
    }
}

@media only screen and (max-width:768px) {
    #home {
        margin-top: 123px;
    }
}

@media only screen and (max-width:640px) {
    section.SliderContent .slide-ct .bContainer h1 {
        font-size: 25px !important;
    }
}

@media only screen and (max-width:410px) {
    section.SliderContent {
        height: 275px !important;
    }
}

@media only screen and (max-width:520px) {
    section.SliderContent {
        height: 330px !important;
    }

    .rsArrow {
        top: 60% !important;
        background-color: #fff;
        display: inline-block;
        margin-top: -25px;
        height: 30px !important;
        width: 30px !important;
        line-height: 30px;
        line-height: 30px;
        text-align: center;
        z-index: 5;
    }

        .rsArrow .fs3 {
            font-size: 20px !important;
            line-height: 30px !important;
        }

    section.SliderContent .rsArrowRight {
        right: 0;
    }

    section.SliderContent .rsArrowLeft {
        left: 0;
    }
}

@media only screen and (max-width:480px) {
    section.SliderContent .slide-ct .bContainer h1 {
        font-size: 20px !important;
        padding-left: 27% !important;
    }
}

@media only screen and (max-width:380px) {
    section.SliderContent {
        max-height: 250px !important;
    }
}

@media only screen and (max-width:320px) {
    section.SliderContent {
        max-height: 210px !important;
    }
}
/***Partners***/
@media only screen and (max-width:768px) {
    #PartnersLogo ul li img {
        max-width: 170px !important;
    }
}


/***Contact***/

@media only screen and (max-width:480px) {
    footer .nav-menu ul li a, footer .copyright {
        font-size: 14px !important;
        padding: 0 5px;
    }

    section.ContactContent .feedback-input:first-child, section.ContactContent .feedback-input:nth-child(3), section.ContactContent .container .col-lg-6 {
        width: 100% !important;
    }

    section.ContactContent .feedback-input:first-child,
    section.ContactContent .feedback-input:last-child,
    section.ContactContent .feedback-input,
    section.ContactContent .feedback-button {
        margin-right: 0;
        margin-left: 0;
        width: 100% !important
    }

    section.ContactContent .col-lg-6:last-child {
        padding: 0px !important;
    }
}

@media only screen and (min-width:481px) {
    section.ContactContent .container .col-lg-6 {
        width: 50%;
    }

    section.ContactContent .container .col-lg-12 {
        width: 100%;
    }
}


@media only screen and (max-width:320px) {
    section.ContactContent .container .col-lg-6 {
        width: 100%;
    }

    section.ContactContent .feedback-input:first-child,
    section.ContactContent .feedback-input:last-child,
    section.ContactContent .feedback-input,
    section.ContactContent .feedback-button {
        margin-right: 0;
        margin-left: 0;
        width: 100% !important;
    }
}



/**About**/


@media only screen and (max-width:768px) {
    .number-counters .col-sm-6 {
        width: 50% !important;
        float: left;
    }
}


/**Library**/
@media only screen and (max-width:680px) {
    ._LibraryList ._Library {
        width: 50% !important;
        float: left;
    }

        ._LibraryList ._Library > div {
            min-height: 195px !important;
        }
}