/* Mobile first queries */
@media (max-width: 320px) {
  .quote-by-client{
    padding-top: 30px;
  }
  ul.font-block .font-div .font-chara{
    float: none;
    margin:auto;
  }
  ul.font-block li{
    width: 50%;
  }
  .font-div{
    text-align: center;
  }
  ul.color-block li {
    margin: auto;
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
  }
  ul.color-block .color-palette{
    margin: auto;
  }
  .color-book{
    padding-bottom: 10px;
  }
  .color-book h4,.font-library h4{
    text-align: center;
  }
  @keyframes ScreenFade {
    from {
      opacity: 0;
      transform: translateY(5px) scale(0.4); }
    to {
      opacity: 1;
      transform: translateY(0) scale(0.4); }
  }
  .screens{
    min-height: 610px
  }
  .screens .hold3 {
    top: 108px;
    left: 0;
    opacity: 0;
  }
  .screens .hold5 {
    top: -5px;
    left: 19px;
    opacity: 0;
  }
  .screens .hold2 {
    top: 2px;
    left: -197px;
    opacity: 0;
  }
  .screens .hold4 {
    top: -109px;
    left: -178px;
    opacity: 0;
  }
  .screens .hold1 {
    top: 156px;
    left: -150px;
    opacity: 0;
  }
  .screens .hold6 {
    top: -200px;
    left: -118px;
    opacity: 0;
  }
  .screens .hold7 {
    top: -97px;
    left: 76px;
    opacity: 0;
  }
  .screens .hold8 {
    top: -227px;
    left: 57px;
    opacity: 0;
  }
  .screens .bg-hold{
    min-height:463px !important;
    transform: skew(103deg, -54deg) !important;
    top: 193px !important;
    width: 134% !important;
    left: -665px !important;
  }
  .screens.mobile .srceen-holder {
    transform: scale(0.4);
  }
  .about-the-app p,.about-the-app h4{
    margin-bottom: 10px;
  }
  .about-the-app h4{
    margin-top: 10px;
  }
  .quote-by-client .person .name,.quote-by-client .profile .name{
    width: 100%;
  }
  @keyframes UpDown {
    0% {
        top: 50px;
        }
    50% {
        top: 20px;
        }
    100% {
        top: 50px;
        }
  }
  .portfo-banner .four{
    position: relative;
  }
  .portfo-banner img{
    height: 157px;
    left: 0;
    right:0;
    margin: auto;
  }
  .how-we-work .six:first-child{
    padding-bottom: 0;
  }
  .behind-the-labs,.behind-the-labs h3{
    text-align: center;
  }
  .built-tech,.awsm-clients{
    padding-bottom: 20px !important;
  }
  ul.client-logo .federal{
    background-position: -18px 12px;
    width: 118px;
  }
  ul.client-logo{
    margin-top: 20px !important;
    margin-bottom: 0;
  }
  .built-tech .columns{
    margin-left: 0;
  }
  .port-contact-us .full-width .txt, .port-contact-us .full-width .next-prjct .txt {
    padding: 27px 50px 50px 40px !important;
  }
  .port-contact-us .full-width .next-prjct .nxt-pro-back-div{
    left: -86px !important
  }
  .photo-gallery .img-holder {
    height: 139px !important;
  }
  body .container{
    width: 100%;
  }
  .quote-box{
    position: relative;
    left: 0;
    top: 30px;
    width: 80%;
  }
  .table-list{
    padding-bottom: 20px;
  }
  .table-list h3{
    font-size:50px !important;
  }
  .table-list .box{
    margin-bottom: 30px;
  }
  .table-list .box h4{
    font-size: 25px;
    line-height: 37px;
  }
  .back-slider{
    display: none;
  }
  .slider ul li:first-child {
    margin-left: -330px;
  }
  .web-slider,.mob-slider{
    display: none;
  }
  .app-section{
    top: -65px;
    padding: 30px;
  }
  .app-section p ,.app-section h5{
    font-size: 16px;
  }
  .testimonial-slider{
    padding-bottom: 0;
  }
  .software-used {
    padding-top: 20px;
  }
  .software-used a.cat{
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 18px;
  }
  .offer {
    padding-top: 30px;
  }
  ul.true-list {
    margin-top: 20px;
  }
  ul.true-list li {
    width: 100%;
    padding: 0px 4px;
    height: auto;
    padding-top: 6px;
  }
  ul.true-list li span {
    margin-right: 9px;
    margin-bottom: 3px;
    font-size: 26px;
    margin-top: -1px;
  }
  ul.true-list li a {
    font-size: 14px;
  }
  ul.true-list li:nth-child(2n){
    margin-left: 0;
  }
  .container.inner-inset {
    width: 95% !important;
  }
  .inner-banner{
    margin-top: -80px;
    padding-bottom: 15px;
  }
  .services h4,.services .desc{
    text-align: center;
  }
  .menu-cir{
    right: 0;
  }
  .banner .b-img {
      height: 270px;
  }
  .bg {
    height: 120%;
  }
  .services{
    padding: 30px 0
  }
  .services .desc {
    padding-top: 25px;
  }
  .person, .profile{
    height: auto;
    text-align: center;
  }
  .person img, .profile img, .person .name, .profile .name{
    float: none;
  }
  .person .name{
    width: 100%;
  }
  .person .name, .profile .name{
    padding-left: 0;
  }
  .testimonial .container .five .testm-content p{
    height: auto;
    -webkit-line-clamp: unset;
  }
  .testimonial .container .five .testm-content{
    height: 100%;
  }
  .company-logo .btn-blue {
    margin: 326px 0 53px 0 !important;
  }
  .company-logo{
    margin-bottom: 0;
  }
  .trust-us-div ul:first-child{
    display: none;
  }
  .trust-us-div.page-div ul:first-child{
    display: block;
  }
  .trust-us-div ul:nth-child(2){
    display: none;
  }
  .trust-us-div.page-div ul:nth-child(2){
    display: block;
  }
  .trust-us-div.page-div{
    margin-top: 0;
  }
  .mobile-clients h3 {
    margin-bottom: 20px;
  }
  .mobile-clients .trust-us-div ul li{
    width: 100% !important;
  }
  .trust-us-div ul:last-child li{
    width: 100%;
  }
  .trust-us-div ul li:nth-child(2n-1){
    border-right: 1px solid transparent !important;
  }
  .dwan{
    margin: auto;
  }
  .container.inset {
    width: 100% !important;
  }
  footer .top-footer .eight {
    padding-left: 24px;
  }
}
@media (min-width: 321px) and (max-width: 399px){
  body .container.inset {
    width: 100% !important;
  }
  .container.inner-inset {
    width: 95% !important;
  }
  .table-list h3{
    font-size:50px !important;
  }
  .table-list .box h4 {
    font-size: 24px;
    line-height: 33px;
  }
  .table-list .box{
    margin-bottom: 20px;
  }
}
@media (max-width: 400px){
  .person, .profile {
    height: auto;
    text-align: center;
  }
  .person img, .profile img, .person .name, .profile .name {
    float: none;
  }
  .portfo-banner {
    padding-top: 40px;
  }
  .quote-by-client{
    padding-top: 30px;
  }
  ul.font-block .font-div .font-chara{
    float: none;
    margin:auto;
  }
  ul.font-block li{
    width: 50%;
  }
  .font-div{
    text-align: center;
  }
  ul.color-block li {
    margin: auto;
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
  }
  ul.color-block .color-palette{
    margin: auto;
  }
  .color-book{
    padding-bottom: 10px;
  }
  .color-book h4,.font-library h4{
    text-align: center;
  }
  @keyframes ScreenFade {
    from {
      opacity: 0;
      transform: translateY(5px) scale(0.4); }
    to {
      opacity: 1;
      transform: translateY(0) scale(0.4); }
  }
  .screens{
    min-height: 610px
  }
  .screens .hold3 {
    top: 108px;
    left: 0;
    opacity: 0;
  }
  .screens .hold5 {
    top: -5px;
    left: 19px;
    opacity: 0;
  }
  .screens .hold2 {
    top: 2px;
    left: -197px;
    opacity: 0;
  }
  .screens .hold4 {
    top: -109px;
    left: -178px;
    opacity: 0;
  }
  .screens .hold1 {
    top: 156px;
    left: -150px;
    opacity: 0;
  }
  .screens .hold6 {
    top: -200px;
    left: -118px;
    opacity: 0;
  }
  .screens .hold7 {
    top: -97px;
    left: 76px;
    opacity: 0;
  }
  .screens .hold8 {
    top: -227px;
    left: 57px;
    opacity: 0;
  }
  .screens .bg-hold {
    min-height: 493px;
    transform: skew(103deg, -54deg);
    top: 172px;
    width: 97%;
    left: -647px;
  }
  .screens.mobile .srceen-holder {
    transform: scale(0.4);
  }
  .about-the-app p,.about-the-app h4{
    margin-bottom: 10px;
  }
  .about-the-app h4{
    margin-top: 10px;
  }
  .quote-by-client .person .name,.quote-by-client .profile .name{
    width: 100%;
    padding-left: 0;
  }
  @keyframes UpDown {
    0% {
        top: 50px;
        }
    50% {
        top: 20px;
        }
    100% {
        top: 50px;
        }
  }
  .portfo-banner .four{
    position: relative;
  }
  .portfo-banner img{
    height: 157px;
    left: 0;
    right:0;
    margin: auto;
  }
  .photo-gallery .img-holder{
    height: 137px !important;
  }
  .photo-gallery .eight.columns {
    height: 430px;
  }
  .photo-gallery .f-img{
    margin-left: 0;
  }
  .photo-gallery .six.columns{
    width: 48%;
    margin-left: 0 !important;
  }
  .photo-gallery .six.columns:first-child{
    margin-right: 6px;
  }
  .photo-gallery .four.columns .img-holder {
    width: 48%;
    display: inline-block;
    float:left;
  }
  .photo-gallery .four.columns .img-holder:first-child{
    margin-right: 6px;
  }
  .photo-gallery .four.columns .img-holder.long-h,.photo-gallery .four.columns{
    height: 160px;
    margin-left: 0;
  }
  .photo-gallery .img-holder{
    height: 160px;
  }
  .loc-and-exp ul li:first-child{
    margin-right: 0;
  }
  .btn-round.btn-trans{
    margin-left: 0;
  }
  .btn-round.modal-trigger{
    margin-bottom: 10px;
  }
  .openings li{
    width: 100%;
  }
  .loc-and-exp ul li{
    width: 100%;
  }
  .app-section{
    padding: 26px !important;
  }
  .app-section .slider-icon{
    right: 9px;
    font-size: 20px;
  }
  .app-section .icon-left {
    top: 34px;
  }
  .app-section .icon-right {
    top: 58px;
  }
  .app-section {
    top: -12px !important;
  }
  .services-need-div {
    margin-top: 20px !important;
  }
  .software-used a.cat {
    font-size: 14px !important;
  }
  ul.true-list li a {
    font-size: 16px !important;
  }
  .work-flow .services-need-div .seven img {
    height: auto !important;
  }
  .bg{
    margin-top: -150px;
  }
  .banner .banner-content {
    padding: 45px 5px 0 0;
  }
  .trust-us-div ul li:nth-child(2n-1){
    border-right: 1px solid #DDDDDD
  }
  .trust-us-div ul li{
    border-bottom: 1px solid #DDDDDD
  }
  .services .services-bg {
    height: 60% !important;
  }
  .container.inner-inset {
    width: 76%;
  }
  .wat-we-do {
    padding: 35px 0;
  }
  .built-tech .four.columns {
    margin-bottom: 25px;
  }
  .built-tech{
    padding-bottom: 50px;
  }
  ul.client-logo li {
    width: calc(100% / 2 - 5px);
    margin-top: -6px;
  }
  ul.client-logo{
    margin-top: 45px;
  }
  ul.client-logo li:nth-child(2n) {
    margin-left: -4px;
  }
  h3 {
    font-size: 22px !important;
    line-height: 30px !important;
  }
  .built-tech .box h4{
    font-size: 17px;
    line-height: 23px;
  }
  ul.client-logo li img {
    width: 75px;
    height: 70px;
  }
  .awsm-clients,.how-we-work,.behind-the-labs{
    padding-bottom: 50px;
  }
  .about-career .career-box .p-blck {
    width: 100%;
  }
  .about-career .career-box .button-blck {
    float: none;
    margin-top: 16px;
  }
  footer .footer-menu .three a {
    font-size: 14px;
  }
}
@media (max-width: 439px){
  .background-bg-div{
    top: -104px;
  }
  .software-used a.cat {
    font-size: 15px !important;
  }
  body .container {
    width: 93%;
  }
  .asiapham {
    height: 27px;
    background-position: -381px -56px;
  }
  .josco {
    background-position: -456px -56px;
  }
  .eastern {
    background-position: -445px -186px;
  }
  .table-list h3{
    font-size:50px !important;
  }
  .table-list .box h4 {
    font-size: 24px;
    line-height: 33px;
  }
  .table-list .box{
    margin-bottom: 20px;
  }
}
@media (min-width: 400px) {
  .banner .b-img img {
    position: absolute;
    left: -104px;
    width: 435px;
    top: 160px;
  }
  h3 {
    font-size: 28px;
  }
}


/* Larger than mobile */
/* Larger than phablet */
@media (max-width: 550px) {
  .services h3{
    text-align: center;
  }
  .built-in-tech .andr-img {
    width: 106px;
    margin-top: 110px;
  }
  .built-in-tech .eight.columns{
    width: 65.3333333333%;
  }
  .built-in-tech .four.columns{
    width: 30.6666666667%;
  }
  .tech-stack .icons-div img {
    width: 110px;
  }
  .back-gradient{
    height: 430px;
  }
  .font-library img {
    width: 100% !important;
  }
  .screens .hold11 {
    top: -288px;
    left: -278px;
    opacity: 0;
  }
  .screens .hold9 {
    top: -80px;
    left: -398px;
  }
  .screens .hold10 {
    top: -186px;
    left: -334px;
  }
  .screens.tablet .bg-hold {
    min-height: 380px;
  }
  .portfo-banner img{
    height: 146px !important;
  }
  .txt-holder {
    width: 100%;
  }
  .frames{
    display: none;
  }
  .portfolio-tab .main-menus li {
    width: calc(100% / 2 - 30px);
  }
  .portfolio-tab .app-content {
    padding: 0 6px;
  }
  .behind-the-labs img {
    width: 130px;
  }
  .about-career{
    margin-bottom: 15px;
  }
  .built-tech .four.columns{
    width: 100%;
  }
  .built-tech .box{
    margin-bottom: 10px;
  }
  .port-contact-us .full-width{
    height: auto;
  }
  .port-contact-us .full-width .contact-div,.port-contact-us .full-width .next-prjct{
    width: 100%;
    float: none;
  }
  .port-contact-us .full-width .next-prjct .nxt-pro-back-div{
    width: 124%;
    height: 100%;
    left: -91px;
  }
  .port-contact-us .full-width .txt,.port-contact-us .full-width .next-prjct .txt{
    padding: 27px 50px 50px 70px;
  }
  .photo-gallery .f-img{
    margin-left: 0;
  }
  .photo-gallery .six.columns{
    width: 48%;
    margin-left: 6px;
  }
  .photo-gallery .four.columns .img-holder {
    width: 48%;
    display: inline-block;
    float:left;
  }
  .photo-gallery .four.columns .img-holder:first-child{
    margin-right: 6px;
  }
  .photo-gallery .four.columns .img-holder.long-h,.photo-gallery .four.columns{
    height: 160px;
    margin-left: 0;
  }
  .photo-gallery .img-holder{
    height: 160px;
  }
  .photo-gallery .eight.columns {
    height: 430px;
    margin-bottom: 10px;
  }
  .openings li{
    width: 100%;
  }
  .table-list .box h4{
    font-size: 27px;
  }
  .table-list h3{
    font-size:50px !important;
  }
  .table-list .box{
    margin-bottom: 30px;
  }
  .quote-box{
    position: relative;
    left: 0;
    top: 30px;
    width: 80%;
  }
  .table-list .four.columns{
    width: 100%;
    margin-left: 0;
  }
  .app-section .button.btn-blue{
    font-size: 16px;
    padding: 3px 16px;
  }
  .t-slider{
    background: white
  }
  .home-menu .h3-hold i {
    left: -28px;
    top: 9px;
    font-size: 20px;
  }
  .app-section p{
    font-size: 18px;
  }
  .app-section{
    top: -45px;
    position: relative;
  }
  .slider ul li{
    width: 300px !important;
    height: 300px;
    padding: 0;
    opacity: 1
  }
  .slider-content {
    min-height: auto
  }
  .slider ul .slider-img img {
    margin-top: 5px;
  }
  .slider ul li:first-child {
    margin-left: 0;
  }
  .mobile-clients .trust-us-div ul li {
    width: calc(100% / 2 - 10px);
  }
  .mobile-clients .trust-us-div{
    margin-top: 0;
  }
  .mobile-clients h3 {
    margin-bottom: 30px;
  }
  .testimonial-slider{
    padding-bottom: 0;
    padding-top: 0;
  }
  .inner-banner{
    padding-top: 160px;
    padding-bottom: 15px;
  }
  .inner-banner h3{
    margin-bottom: 15px;
  }
  .software-used {
    padding-top: 30px;
  }
  .software-used .six{
    width: 50% !important;
  }
  .software-used a.cat {
    font-size: 20px;
  }
  .offer {
    padding-top: 50px;
  }
  ul.true-list li{
    width: 100%;
    padding: 8px 6px;
  }
  ul.true-list li a{
    font-size: 18px;
  }
  ul.true-list {
    margin-top: 25px;
    margin-bottom: 0;
  }
  ul.true-list li:nth-child(2n){
    margin-left: 0;
  }
  ul.true-list li span{
    margin-bottom: 4px;
  }
  .back-slider{
    display: none
  }
  .client-story {
    padding: 25px 0;
  }
  .testimonial .container {
    margin-top: 30px;
  }
  .banner h4{
    margin-top: -60px;
  }
  .services{
    padding: 0
  }
  .six.columns {
    width: 100%;
  }
  .home-menu .container{
    height: 83%;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .josco{
    margin-left: 0;
  }
  .federal {
    width: 150px;
    height: 42px;
    background-position: -11px 23px;
  }
  .trust-us-div ul:last-child li{
    border-bottom: 1px solid #DDDDDD
  }
  .res-menu .delay1s{
    -webkit-animation-delay: 0.55s !important;
    animation-delay: 0.45s !important;
  }
  .res-menu .delay2s{
    -webkit-animation-delay: 0.65s !important;
    animation-delay: 0.45s !important;
  }
  .res-menu .delay3s{
    -webkit-animation-delay: 0.75s !important;
    animation-delay: 0.45s !important;
  }
  .home-menu .six .row {
    margin-top: 0;
  }
  .home-menu ul li{
    margin-bottom: 10px;
  }
  .home-menu h3,.home-menu .icon-close{
    font-size: 30px;
  }
  .home-menu .icon-close {
    top: 65px;
  }
  .home-menu .container .inner-row {
    padding-left: 13%;
    padding-top: 56px;
  }
  .res-row .six{
    width: 100% !important;
    height: auto !important;
  }
  .home-menu .home-menu-list li.active .bg-hover{
    width: 254px;
    left: -19px;
  }
  .home-menu ul a{
    font-size: 18px;
  }
  .inner-menu{
    padding-left: 30px;
    padding-top: 150px;
  }
  .menu-cir{
    right: 0;
    top: -1px;
  }
  header .button.head-btn{
    display: none
  }
  header .brand{
    text-align: center;
    width: 50%;
  }
  body .container.inset{
    width: 85%;
  }
  header .nav-bar{
    width: 50%;
  }
  .banner .b-img img {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    top: 0;
    bottom: 0;
  }
  .banner .b-img{
    height: 335px;
  }
  .banner .banner-content{
    padding: 30px 0 0 0;
  }
  .testimonial-icon .icons{
    right:-5px;
  }
  .bg{
    height: 123%;
  }
  .services .one-half:hover .back{
    transform: scale(6);
  }
  .testimonial .container .seven h3,.pro-url, .testm-pro-url, .pro-desc{
    text-align: center;
  }
  .banner .mouse{
    display: none
  }
  .banner ul{
    margin-top: 25px;
    float: left;
  }
  .services .one-half{
    padding: 26px 20px;
  }
  .services .desc {
    width: 100%;
    text-align: center;
    padding-top: 0;
  }
  .services-menu {
    padding-top: 30px;
  }
  .services .item{
    text-align: center;
  }
  .services .app-icon{
    float: none;
  }
  .services .back{
    float:none;
  }
  .services .back,.services .back.navy-blue,.services .back.green,.services .back.pink{
    background: transparent
  }
  .services .services-bg{
    height: 53%;
    top:580px;
  }
  .testm-pro-url{
    text-align: center;
  }
  .testimonial .container .seven .img-div{
    display: none;
  }
  .testimonial .container .seven{
    padding: 40px;
    text-align: center;
  }
  .testimonial .container .seven{
    min-height: auto;
  }
  .testimonial .container .five h4{
    font-size: 18px;
    line-height: 30px;
  }
  .testimonial .container .five span{
    font-size: 10px;
  }
  .company-logo .btn-blue {
    margin: 183px 0 35px 0;
    font-size: 14px;
  }
  .company-logo {
    margin-bottom: 0;
  }
  .company-logo .row a{
    margin-bottom: 20px;
  }
  .company-logo .container {
    margin-bottom: 10px;
  }
  .services-need-div{
    margin-top: 0;
  }
  .services-need-div .seven img{
    height: auto;
    width: auto;
  }
  .services-need-div .seven,.work-flow .services-need-div .seven.columns{
    padding-bottom: 0;
    padding: 20px 0;
    width: 100%;
  }
  .news {
    padding-top: 30px;
  }
  .services-need-div .five,.work-flow .services-need-div .five.columns{
    width: 100%;
    padding-left: 0;
    padding-top: 0;
  }
  .web-slider,.mob-slider{
    display: none;
  }
  .mobile-clients .trust-us-div ul li {
    width: 100%;
  }
  .trust-us-div ul li:nth-child(2n-1){
    border-right: 1px solid transparent
  }
  .services-need-div .menu li{
    padding-left: 20px;
  }
  .services-need{
    padding-bottom: 20px;
    padding-top: 30px;
  }
  .news-box .box{
    height: 100px;
    margin-bottom: 20px;
  }
  .news-box .box img {
    display: none;
  }
  .news-box .box .newsdesc{
    width: 95%;
  }
  .news-box .box .newsdesc h4 {
    font-size: 15px;
    text-overflow: unset;
    word-wrap: break-word;
    height: 64px;
  }
  .news-box .box .newsdesc span {
    font-size: 10px;
    margin-top: -6px;
  }
  .news-box {
    margin-top: 25px;
  }
  .news .button.btn-blue {
    margin-top: 0;
    margin-bottom: 0;
  }
  .trust-us-div ul li{
    width: calc( 100% / 2 - 10px);
    border-bottom: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    margin-top: -6px;
  }
  .trust-us-div ul li:nth-child(2n-2){
    border-right: 1px solid transparent;
  }
  .wat-we-do .inner-inset h3 {
    margin-bottom: 20px;
  }
  .container.inner-inset {
    width: 80%;
  }
  .wat-we-do {
    padding: 30px 0;
  }
  .built-tech,.awsm-clients,.how-we-work,.behind-the-labs{
    padding-bottom: 50px
  }
  .behind-the-labs .three{
    text-align: center;
  }
  .behind-the-labs h3{
    text-align: center;
  }
  .about-career .career-box .p-blck {
    width: 100%;
  }
  .about-career .career-box .button-blck{
    float :none;
    margin-top: 22px;
  }
  .inner-banner .six.columns{
    width: 100%;
    margin-left: 0;
  }
  .approach-hold h3{
    margin-top: 15px;
    text-align: center;
    font-size: 25px;
  }
  .approach-hold .services-need-div .five{
    margin-bottom: 30px;
    margin-left: 0;
  }
  .approach-hold{
    padding: 0;
  }
  .service-list li {
    margin: 8px 0;
    width: 100%;
    text-align: center;
  }
  .services img {
    width: 100%;
  }
  .service-list h3{
    text-align: center;
  }
  .service-list li img{
    width: 100px;
  }
  ul.client-logo {
    margin-top: 47px;
  }
  ul.client-logo li{
    margin-top: -6px;
  }
  footer {
    margin-top: 0;
  }
  footer .footer-menu {
    padding-top: 50px;
    padding-bottom: 0;
  }
  footer .top-footer{
    text-align: center;
  }
  footer .top-footer .four{
    margin-bottom: 20px;
  }
  footer .bottom-footer{
    text-align: center;
  }
  footer .bottom-footer ul{
    text-align: center;
  }
  footer .bottom-footer ul li{
    margin-left: 2px;
    margin-top: 15px;
  }
  footer .footer-menu .three{
    width: 50%;
  }
  footer .top-footer .eight{
    padding-left: 30px;
  }
}
@media (min-width: 550px) and (max-width: 659px){
  .built-tech h4{
    font-size: 20px !important
  }
  .photo-gallery .six.columns {
    width: 46% !important;
    margin-left: 16px !important;
  }
  .photo-gallery .six.columns:first-child{
    margin-left: 10px !important;
  }
  .photo-gallery .img-holder {
    height: 170px !important;
  }
  .photo-gallery .four .img-holder {
    height: 317px !important;
  }
}
@media (min-width: 550px) and (max-width: 749px) {
  .josco {
    margin: auto;
    margin-top: 10px;
  }
  .softwares li img {
    width: 40px;
  }
  .softwares li img.jquery{
    width: 60px !important;
  }
  .softwares li img.node{
    width: 40px !important;
  }
  .softwares li img.html{
    width: 30px !important;
  }
  .softwares li img.angular{
    width: 46px !important;
  }
  header .container{
    padding-top: 30px;
  }
  .color-book {
    padding-bottom: 20px;
  }
  .screens {
    overflow: hidden;
    min-height: 784px;
  }
  .screens .hold1 {
    top: 284px;
    left: -28px;
  }
  .screens .hold2 {
    top: 140px;
    left: 29px;
  }
  .screens .hold3 {
    top: 269px;
    left: 282px;
  }
  .screens .hold4 {
    top: -39px;
    left: 0;
  }
  .screens .hold5 {
    top: 95px;
    left: 255px;
  }
  .screens .hold6 {
    top: 40px;
    left: 466px;
  }
  .screens .hold7 {
    top: -89px;
    left: 222px;
  }
  .screens .hold8 {
    top: -153px;
    left: 416px;
    opacity: 0;
  }
  .screens .bg-hold {
    min-height: 571px;
    background: #1C1D3B;
    transform: skew(12deg, -9deg);
    position: absolute;
    width: 204%;
    left: -76px;
    top: 60px;
  }
  @keyframes ScreenFade {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.5);
    }
  100% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }
  }
  .screens.mobile .srceen-holder {
    transform: scale(0.5);
  }
  .quote-by-client {
    padding-top: 25px;
  }
  .about-the-app .six{
    margin-left: 0;
  }
  .about-the-app {
    padding-top: 20px;
  }
  .portfo-banner img{
    height: 200px;
  }
  .txt-holder {
    width: 100%;
  }
  .frames{
    display: none;
  }
  .portfolio-tab .main-menus li {
    width: calc(100% / 2 - 30px);
  }
  .portfolio-tab .app-content {
    padding: 0 6px;
  }
  .photo-gallery .six.columns{
    width: 48%;
    margin-left: 8px;
  }
  .photo-gallery .four.columns .img-holder.long-h img{
    height: 100%;
    width: auto;
  }
  .photo-gallery .four.columns .img-holder.long-h {
    height: 295px;
    margin-bottom: 10px;
  }
  .photo-gallery .img-holder{
    height: 194px;
  }
  .photo-gallery img,.photo-gallery .eight.columns{
    border-radius: 5px;
  }
  ul.true-list {
    margin-top: 30px;
  }
  ul.true-list li a {
    font-size: 21px;
  }
  ul.true-list li span{
    margin-bottom: 5px !important;
  }
  .offer {
    padding-top: 40px;
  }
  .inner-banner{
    padding-bottom: 15px;
    padding-top: 160px;
  }
  .software-used {
    padding-top: 30px;
  }
  .work-flow .services-need-div .seven img{
    width: auto;
  }
  .back-slider{
    display: none;
  }
  .container.inner-inset {
    width: 70%;
  }
  .mobile-clients .trust-us-div ul li {
    width: calc(100% / 2 - 10px);
  }
  .home-menu .home-menu-list li.active .bg-hover {
    width: 152px;
  }
  .inner-menu {
    padding-left: 42px;
  }
  .home-menu .container .inner-row {
    padding-left: 10%;
  }
  .home-menu ul a{
    font-size: 18px;
  }
  .active-menu i {
    font-size: 20px;
    margin-right: 6px;
    margin-left: -27px;
  }
  .home-menu .icon-close {
    font-size: 23px;
  }
  h3{
    font-size: 26px !important;
    line-height: 38px !important;
  }
  .banner .banner-content {
    padding: 92px 0 0 0;
  }
  h3{
    font-size: 24px !important;
    line-height: 35px;
  }
  .banner .b-img img {
    left: -52px !important;
    width: 249px !important;
  }
  .banner .mouse{
    display: none;
  }
  .services .one-half{
    padding: 14px 16px;
  }
  .services .back,.services .back.navy-blue,.services .back.green,.services .back.pink{
    background-color: transparent;
  }
  .services .desc {
    width: 100%;
    text-align: center;
  }
  .services .item{
    text-align: center;
  }
  .services .app-icon{
    float: none;
    margin-right: 0;
  }
  .testimonial .container .seven{
    width: 100%;
  }
  .testimonial .container .five{
    width: 100%;
    margin-top: 30px;
  }
  .company-logo .btn-blue {
    margin: 183px 0 53px 0;
  }
  .company-logo .three.columns{
    width: 50%;
    margin: auto;
    float: left;
    height: 90px;
  }
  .company-logo .container{
    margin-bottom: 0
  }
  .services-need-div {
    margin-top: 30px;
  }
  .services-need-div .seven,.services-need-div .five,.work-flow .services-need-div .five.columns,.work-flow .services-need-div .seven.columns{
    width: 100%;
    padding: 0;
  }
  .approach-hold {
    padding-top: 20px;
  }
  .approach-hold h3{
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .approach-hold .services-need-div .five{
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 0;
  }
  .services-need-div .menulist div.active {
    text-align: center;
  }
  .news-box .six{
    width: 100%;
    margin-bottom: 20px;
    margin-left: 0;
  }
  .news-box {
    margin-top: 50px;
  }
  .news .button.btn-blue {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .trust-us-div ul li:nth-child(2n+1) {
    border-right: 2px solid #DDDDDD
  }
  .trust-us-div ul li {
    width: calc( 100% / 2 - 10px);
    text-align: center;
    margin: auto;
    border-bottom: 2px solid #DDDDDD;
    border-right: 2px solid transparent;
    margin-bottom: -8px;
    margin-left: -4px;
  }
  .trust-us-div ul li:last-child{
    border-right: 1px solid transparent;
  }
  .trust-us-div ul {
    margin-bottom: 0px;
  }
  .trust-us-div ul:last-child li{
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: -8px;
  }
  .services-need {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .web-slider,.mob-slider{
    display: none;
  }
  .app-section{
    top: -38px;
  }
  .t-slider{
    background: white;
  }
  .mobile-clients .trust-us-div{
    margin-top: 0;
  }
  footer .top-footer .four{
    width: 100%;
    margin-bottom: 35px;
  }
  footer .footer-menu {
    padding: 50px 0;
  }
  footer .top-footer .eight{
    width: 100%;
  }
  footer .footer-menu .three{
    width: 50%;
  }
  footer .footer-menu .three.columns{
    margin-left: 0;
  }
  footer .bottom-footer .six{
    width: 100%;
    text-align: center;
  }
  footer .bottom-footer .six.columns{
    margin-left: 0;
  }
  footer .bottom-footer ul{
    text-align: center;
  }
  footer .bottom-footer ul li {
    margin-left: 0px;
    margin-right: 20px;
    margin-top: 10px;
  }
}
@media (min-width: 551px) and (max-width: 578px) {
  .behind-the-labs .three{
    width: 46%;
    text-align: center;
  }
  .behind-the-labs h3{
    text-align: center;
  }
  .port-contact-us .full-width{
    height: auto;
  }
  .port-contact-us .full-width .contact-div,.port-contact-us .full-width .next-prjct{
    width: 100%;
    float: none;
  }
  .port-contact-us .full-width .next-prjct .nxt-pro-back-div{
    width: 120%;
    height: 100%;
    left: -91px;
  }
  .port-contact-us .full-width .txt,.port-contact-us .full-width .next-prjct .txt{
    padding: 27px 50px 50px 70px;
  }
  .loc-and-exp {
    padding-top: 30px;
  }
  .openings li {
    width: calc(100% / 2 - 17px);
  }
  .table-list{
    padding-top: 7px;
  }
  .table-list .box h4{
    font-size: 27px;
  }
  .table-list .four.columns{
    width: 100%;
    margin-left: 0;
  }
  .table-list h3{
    font-size:50px !important;
  }
  .table-list .box{
    margin-bottom: 30px;
  }
  .quote-box{
    position: relative;
    left: 0;
    top: 30px;
    width: 80%;
  }
  .app-section{
    top: -70px;
    position: relative;
    height: auto;
  }
  .app-section p {
    font-size: 18px;
  }
  .software-used .six{
    width: 50% !important;
  }
  .software-used a.cat {
    font-size: 18px;
  }
  .t-slider{
    background: white
  }
  .web-slider,.mob-slider{
    display: none;
  }
  ul.true-list li{
    width: 100%;
    padding: 8px 1px;
  }
  ul.true-list li span {
    margin-right: 18px;
    margin-bottom: 2px;
    margin-top: 4px;
    margin-left: 10px;
  }
  ul.true-list li a {
    font-size: 18px;
  }
  ul.true-list li:nth-child(2n){
    margin-left: 0;
  }
  .container.inset {
    width: 90% !important;
  }
  .services-content .six.columns{
    text-align: center;
  }
  .services{
    padding: 0;
  }
  .services .desc {
    padding-top: 15px;
  }
  .greeniee {
    width: 170px;
    height: 30px;
    background-position: -198px -48px;
  }
  .trust-us-div .container{
    padding-left: 30px;
  }
  .six.columns {
    width: 100%;
    margin-left: 0;
  }
  .service-list li{
    width: 100%;
    margin-bottom: 10px;
  }
  .service-list a,.service-list h3{
    text-align: center;
  }
  .services-need-div .seven img {
    width: 100%;
    height: 325px;
  }
  .trust-us-div ul li {
    width: calc( 100% / 2 - 10px);
    text-align: center;
    margin: auto;
    border-bottom: 2px solid #DDDDDD;
    margin-bottom: -7px;
    margin-left: -4px;
    border-right: 0;
  }
  footer .footer-menu .three.columns {
    margin-left: 0;
    padding-left: 40px;
  }
  footer{
    margin-top: 0;
  }
}
@media (min-width: 579px) and (max-width: 749px){
  .port-contact-us .full-width .next-prjct{
    height: 100%;
  }
  .port-contact-us .full-width .next-prjct .txt {
    padding: 55px 25px 50px 109px;
  }
  .port-contact-us .full-width .next-prjct .nxt-pro-back-div{
    left: 16px;
  }
  .port-contact-us .full-width{
    height: 344px
  }
  .port-contact-us .full-width .txt {
    padding: 47px 0 50px 31px;
  }
  footer .top-footer .eight{
    padding-left: 63px;
  }
}
@media (min-width: 579px) and (max-width: 768px) {
  @keyframes animenu {
    0% {
    right: 66.1406px;
    top: 31px;
    opacity: 0.95;
    }
    50% {
        width: 500px;
        height: 500px;
        top: -224px;
        right: -16px;
        border-radius: 50%;
    }
    100% {
        opacity: 1;
        width: 100%;
        height: 100%;
        border-radius: 0%;
        right: 0;
        top: 0;
    }
  }
  .softwares li img {
    width: 40px;
  }
  .softwares li img.jquery{
    width: 60px !important;
  }
  .softwares li img.node{
    width: 40px !important;
  }
  .softwares li img.html{
    width: 30px !important;
  }
  .softwares li img.angular{
    width: 46px !important;
  }
  header .container{
    padding-top: 30px;
  }
  .loader{
    padding-top: 22vh;
  }
  .awsm-clients .six{
    padding-top: 30px;
  }
  .behind-the-labs .three{
    width: 46%;
    text-align: center;
  }
  .behind-the-labs h3{
    text-align: center;
  }
  .built-in-tech .andr-img {
    width: 106px;
    margin-top: 110px;
  }
  .back-gradient{
    height: 411px;
  }
  .screens .hold10 {
    top: -222px;
    left: -213px;
  }
  .screens .hold11 {
    top: -286px;
    left: -158px;
  }
  .screens .hold9 {
    top: -156px;
    left: -263px;
  }
  .screens.tablet {
    min-height: 493px;
  }
  .screens.tablet .bg-hold{
    min-height: 301px;
    transform: skew(12deg, -10deg);
    width: 204%;
    left: -76px;
    top: 25px;
  }
  .screens {
    min-height: 800px;
  }
  @keyframes ScreenFade {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.5);
    }
  100% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }
  }
  .screens.mobile .srceen-holder {
    transform: scale(0.5);
  }
  .screens .hold1 {
    top: 284px;
    left: -28px;
  }
  .screens .hold2 {
    top: 140px;
    left: 29px;
  }
  .screens .hold3 {
    top: 269px;
    left: 282px;
  }
  .screens .hold4 {
    top: -39px;
    left: 0;
  }
  .screens .hold5 {
    top: 95px;
    left: 255px;
  }
  .screens .hold6 {
    top: 40px;
    left: 466px;
  }
  .screens .hold7 {
    top: -89px;
    left: 222px;
  }
  .screens .hold8 {
    top: -153px;
    left: 416px;
    opacity: 0;
  }
  .screens .bg-hold {
    min-height: 571px;
    background: #1C1D3B;
    transform: skew(12deg, -9deg);
    position: absolute;
    width: 204%;
    left: -76px;
    top: 60px;
  }
  .about-the-app {
    padding-top: 15px;
  }
  .about-the-app .six{
    margin-left: 0;
  }
  @keyframes UpDown {
    0% {
        top: 114px;
        }
    50% {
        top: 85px;
        }
    100% {
        top: 114px;
        }
  }
  .portfo-banner img{
    height: 200px;
  }
  .port-contact-us .full-width .next-prjct{
    height: 100%;
  }
  .port-contact-us .full-width .next-prjct .txt {
    padding: 55px 25px 50px 109px;
  }
  .port-contact-us .full-width .next-prjct .nxt-pro-back-div{
    left: 16px;
  }
  .port-contact-us .full-width{
    height: 344px
  }
  .port-contact-us .full-width .txt {
    padding: 47px 0 50px 31px;
  }
  .photo-gallery .four.columns .img-holder.long-h img{
    height: 100%;
    width: auto;
  }
  .photo-gallery .four.columns .img-holder.long-h {
    height: 295px;
    margin-bottom: 10px;
  }
  .photo-gallery .img-holder{
    height: 194px;
  }
  .photo-gallery img,.photo-gallery .eight.columns{
    border-radius: 5px;
  }
  .loc-and-exp {
    padding-top: 30px;
  }
  .openings li {
    width: calc(100% / 2 - 17px);
  }
  .table-list{
    padding-bottom: 30px;
    padding-top: 10px;
  }
  .table-list .box h4 {
    font-size: 20px;
    line-height: 30px;
  }
  .table-list h3{
    font-size:50px !important;
  }
  .table-list .box{
    padding: 10px;
  }
  .quote-box{
    position: relative;
    left: 0;
    top: -2px;
    width: 80%;
  }
  .slider-content {
    min-height: 360px;
  }
  body .container.inset {
    width: 85%;
  }
  .mobile-clients .trust-us-div{
    margin-top: 0;
  }
  .work-flow .services-need-div li {
    padding-right: 8px;
  }
  .app-section .button.btn-blue{
    font-size: 16px;
    padding: 1px 17px;
  }
  .app-section .icon-left {
    top: 25px;
  }
  .app-section .slider-icon{
    font-size: 25px;
  }
  .app-section .icon-right {
    top: 60px;
  }
  .slider ul .slider-img img{
    margin-top: 10px;
  }
  .app-section{
    top: -40px;
    padding: 28px;
    position:relative;
    height: auto;
  }
  .app-section h5{
    margin-bottom: 10px;
  }
  footer{
    margin-top: 0;
  }
  .slider ul li{
    width: 267px !important;
    height: 267px;
    padding: 0
  }
  .slider ul li:first-child {
    margin-left: -60px;
  }
  .slider-arrows hr.long {
    border-top: 107px solid #DDDDDD;
  }
  .slider-arrows hr.short {
    border-top: 50px solid #DDDDDD;
  }
  .back-div p{
    font-size: 20px
  }
  .back-slider {
    padding: 76px 0 0 0;
    min-height: 440px;
  }
  .t-slider{
    padding-bottom: 20px;
  }
  .testimonial-slider{
    padding-bottom: 0;
  }
  ul.true-list {
    margin-top: 35px;
  }
  .offer{
    padding-top: 35px;
  }
  .software-used{
    padding-top: 20px;
  }
  .back-div h3{
    margin-top: 0;
  }
  .back-div {
    width: 70%;
    padding: 28px;
  }
  .mobile-clients .container.inner-inset{
    width: 88% !important;
  }
  .container.inner-inset {
    width: 70%;
  }
  .inner-banner .six{
    margin-left: 0;
  }
  .software-used a.cat {
    font-size: 18px;
  }
  .app-section p {
    font-size: 18px;
  }
  ul.true-list li{
    width: 97%;
    padding: 7px 7px;
  }
  ul.true-list li span {
    margin-right: 18px;
    margin-bottom: -1px;
    margin-left: 11px;
  }
  ul.true-list li:nth-child(2n){
    margin-left: 0;
  }
  .software-used .six.columns{
    width: 50%;
  }
  .six.columns {
    width: 100%;
  }
  .home-menu .container .inner-row {
    padding-left: 10%;
    padding-top: 100px;
  }
  .inner-menu{
    padding-top: 265px;
  }
  .home-menu ul a{
    font-size: 23px;
  }
  .active-menu i {
    margin-right: 6px;
    margin-left: -33px;
  }
  .menu-cir {
    right: 87px;
  }
  .services-content .six.columns{
    width: 100%;
    text-align: center;
    margin-left: 0;
  }
  .services,.services .desc{
    padding: 0;
  }
  .service-list li {
    width: calc(100% / 2 - 15px);
    margin: 7px 5px;
  }
  .services-content .six{
    width: 100%;
  }
  .company-logo .btn-blue {
    margin: 210px 0 53px 0;
  }
  .service-list a,.service-list h3{
    text-align: center;
  }
  .services{
    padding: 15px 0;
  }
  .services .desc {
    padding-top: 0px;
  }
  .service-list li {
    width: calc(100% / 2 - 15px);
    margin: 9px 5px;
  }
  .service-list h3{
    font-size: 16px !important;
  }
  .testimonial .container .seven{
    padding: 40px 0 40px 192px;
  }
  .work-flow .services-need-div .seven img{
    width: auto;
  }
  .services-need-div .seven img {
    width: 100%;
    height: auto;
  }
  .company-logo{
    margin-bottom: 20px
  }
  footer .top-footer .eight{
    margin-left: 3%;
  }
}
@media (min-width: 660px) and (max-width: 719px){
  .photo-gallery .six.columns {
    width: 46% !important;
    margin-left: 16px !important;
  }
  .photo-gallery .six.columns:first-child{
    margin-left: 10px !important;
  }
  .photo-gallery .img-holder {
    height: 170px !important;
  }
  .photo-gallery .four .img-holder {
    height: 317px !important;
  }
}
@media(max-width: 992px){
  .font-library img {
    width: 50%;
  }
}

/* Larger than tablet */
@media (min-width: 750px) and (max-width: 1000px) {
  .services h3{
    text-align: center;
  }
  .txt-holder {
    width: 90%;
  }
  .frames{
    display: none;
  }
  .portfolio-tab .main-menus li {
    width: calc(100% / 2 - 30px);
  }
  .portfolio-tab .app-content {
    padding: 0 6px;
  }
  .how-we-work {
    padding-bottom: 60px;
  }
  .behind-the-labs {
    padding-bottom: 50px;
  }
  .about-career .career-box{
    margin-bottom: 20px;
  }
  .behind-the-labs img {
    width: 180px;
  }
  .awsm-clients .six:first-child{
    padding-bottom: 10px;
  }
  .awsm-clients {
    padding-bottom: 10px;
  }
  ul.client-logo .federal{
    width: 154px;
  }
  .built-tech{
    padding-bottom: 60px;
  }
  .wat-we-do {
    padding: 20px 0;
  }
  .port-contact-us .full-width .next-prjct{
    height: 100%;
  }
  .port-contact-us .full-width .next-prjct .txt {
    padding: 55px 25px 50px 109px;
  }
  .port-contact-us .full-width .next-prjct .nxt-pro-back-div{
    left: 16px;
  }
  .port-contact-us .full-width{
    height: 308px
  }
  .port-contact-us .full-width .txt {
    padding: 47px 0 50px 31px;
  }
  .photo-gallery .eight.columns{
    height: 500px;
  }
  .photo-gallery .f-img{
    width: 97%;
  }
  .photo-gallery .six.columns{
    width: 47%;
    margin-left: 8px;
  }
  .photo-gallery .four.columns .img-holder.long-h img{
    height: 100%;
    width: auto;
  }
  .photo-gallery .four.columns .img-holder.long-h {
    height: 295px;
    margin-bottom: 10px;
  }
  .photo-gallery .img-holder{
    height: 165px;
  }
  .photo-gallery img,.photo-gallery .eight.columns{
    border-radius: 5px;
  }
  .loc-and-exp {
    padding-top: 30px;
  }
  .openings li {
    width: calc(100% / 2 - 17px);
  }
  .mobile-clients .container.inner-inset{
    width: 68%;
  }
  .quote-box{
    width: 100%;
    top: 0;
    left: 0;
  }
  .table-list{
    padding-bottom: 30px;
    padding-top: 10px;
  }
  .table-list .box h4 {
    font-size: 20px;
    line-height: 30px;
  }
  .table-list h3{
    font-size:50px !important;
  }
  .table-list .box{
    padding: 10px;
  }
  .software-used a.cat {
    font-size: 17px;
  }
  .slider ul li{
    width: 300px !important;
    height: 300px;
    padding: 0;
  }
  .slider-content {
    min-height: 330px;
  }
  .back-slider {
    padding: 100px 0 0 0;
    min-height: 400px;
  }
  .slider-arrows hr.long {
    border-top: 143px solid #DDDDDD;
  }
  .t-slider{
    padding-bottom: 20px;
  }
  .testimonial-slider{
    padding-bottom: 0;
  }
  .back-div {
    width: 520px;
  }
  .work-flow .services-need-div .five.columns{
    padding-right: 13px;
  }
  .mobile-clients .trust-us-div {
    margin-top: 0;
  }
  .mobile-clients .trust-us-div ul li:last-child{
    display: inline-block;
  }
  .mobile-clients .trust-us-div ul li:nth-last-child(2){
    border-right: 1px solid #DDDDDD
  }
  .mobile-clients .trust-us-div ul{
    padding-left: 35px;
  }
  ul.true-list li span{
    margin-bottom: 5px;
    margin-top: -1px;
  }
  ul.true-list li{
    padding: 7px 20px;
    margin-bottom: 20px;
  }
  .software-used, .offer {
    padding-top: 36px;
  }
  ul.true-list li a {
    font-size: 20px;
  }
  .josco,.dwan{
    margin: 10px auto;
  }
  .vguard {
    width: 152px;
    background-position: -4px -185px;
  }
  .menu-cir{
    right: 92px;
    top: 4px;
  }
  .banner .banner-content {
    padding: 100px 0 0 0;
  }
  .banner .b-img img {
    left: -77px;
    width: 340px;
  }
  .services .one-half{
    padding: 13px 20px;
  }
  .services-content .six.columns{
    width: 100%;
    text-align: center;
    margin-left: 0;
  }
  .services,.services .desc{
    padding: 0;
  }
  .service-list li {
    width: calc(100% / 2 - 15px);
    margin: 7px 5px;
  }
  .service-list h3 {
    font-size: 16px !important;
  }
  .service-list a, .service-list h3 {
    text-align: center;
  }
  .services .desc {
    width: 100%;
  }
  .services .item{
    text-align: center;
  }
  .services .app-icon {
    float: none;
  }
  .services .back{
    left: -11px;
    right: 0;
    margin: auto;
    top: 13px;
  }
  .testimonial .container .seven{
    width: 100%;
    padding: 40px 0 40px 280px;
  }
  .services-need-div .seven img {
    width :auto;
    height: auto;
  }
  .approach-hold{
    padding-top: 0;
  }
  .approach-hold h3{
    text-align: center;
  }
  .services-need-div .menulist div.active {
    display: block;
    text-align: center;
  }
  .approach-hold .services-need-div .five{
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .testimonial .container .five .testm-content{
    padding-top: 60px;
    height: 200px;
  }
  .testimonial .container .five{
    width: 100%;
  }
  .company-logo .btn-blue {
    margin: 210px 0 53px 0 !important;
  }
  .company-logo .row .three:last-child{
    display: none;
  }
  .company-logo .three.columns {
    width: 30%;
  }
  .services-need-div {
    margin-top: 10px !important;
  }
  .services-need-div .seven,.services-need-div .five{
    width: 100%;
    padding: 0;
  }
  .news-box .six{
    width: 100%;
    margin-bottom: 20px;
    margin-left: 0;
  }
  .services-need{
    padding-bottom: 50px;
  }
  .menulist{
    margin-top: 30px;
  }
  .news .button.btn-blue {
    margin-top: 30px;
    margin-bottom: 10px;
  }
  .trust-us-div ul li {
    width: calc( 100% / 3 - 10px);
    margin-bottom: 0;
    margin-top: -6px
  }
  .trust-us-div ul li:nth-child(3n) {
    border-right: 1px solid transparent
  }
  .trust-us-div ul li:last-child{
    border-right: 1px solid transparent;
  }
  .trust-us-div ul li:nth-last-child(2){
    border-right: 1px solid #DDDDDD;
  }
  .trust-us-div ul:last-child li{
    border-top: 1px solid #DDDDDD;
  }
  .trust-us-div ul:last-child li:first-child,.trust-us-div ul:last-child li:nth-child(2),.trust-us-div ul:last-child li:nth-child(3){
    border-top: 1px solid transparent;
  }
  .trust-us-div ul {
    margin-bottom: -1px;
  }
  .services .services-bg{
    top: 285px;
  }
  footer{
    margin-top: 0;
  }
  footer .footer-menu .three {
    width: 50%;
    margin-left: 0;
  }
  footer .footer-menu {
    padding: 50px 0;
  }
  footer .top-footer .four{
    margin-top: 148px;
  }
}
@media (min-width: 750px) and (max-width: 768px){
  .home-menu .container{
    overflow-y: scroll
  }
  .softwares li img {
    width: 40px;
  }
  .softwares li img.jquery{
    width: 60px !important;
  }
  .softwares li img.node{
    width: 40px !important;
  }
  .softwares li img.html{
    width: 30px !important;
  }
  .softwares li img.angular{
    width: 46px !important;
  }
  .photo-gallery .six.columns{
    width: 48%;
    margin-left: 8px;
  }
  .photo-gallery .four.columns .img-holder.long-h img{
    height: 100%;
    width: auto;
  }
  .photo-gallery .four.columns .img-holder.long-h {
    height: 295px;
    margin-bottom: 10px;
  }
  .photo-gallery .img-holder{
    height: 194px;
  }
  .photo-gallery img,.photo-gallery .eight.columns{
    border-radius: 5px;
  }
  .slider-arrows hr.long {
    border-top: 80px solid #DDDDDD;
  }
  .mobile-clients .container.inset{
    width: 89%;
  }
  .federal {
    width: 135px;
    background-position: -11px 22px;
  }
  .makervillage {
    width: 145px;
    background-position: 3px -114px;
  }
  .bottom-footer .six.columns{
    margin-left: 0;
  }
  footer .bottom-footer ul{
    text-align: left;
  }
  footer .bottom-footer ul li{
    margin-left: 25px;
  }
  footer .bottom-footer ul li:first-child{
    margin-right: 10px;
  }
}
@media (min-width: 769px) and (max-width: 999px){
  .softwares li img {
    width: 40px;
  }
  .softwares li img.jquery{
    width: 60px !important;
  }
  .softwares li img.node{
    width: 40px !important;
  }
  .softwares li img.html{
    width: 30px !important;
  }
  .softwares li img.angular{
    width: 46px !important;
  }
  .screens {
    min-height: 820px;
  }
  @keyframes ScreenFade {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.6);
    }
  100% {
        opacity: 1;
        transform: translateY(0) scale(0.6);
    }
  }
  .screens.mobile .srceen-holder {
    transform: scale(0.6);
  }
  .screens .hold1 {
    top: 287px;
    left: -28px;
  }
  .screens .hold2 {
    top: 128px;
    left: 29px;
  }
  .screens .hold3 {
    top: 287px;
    left: 338px;
  }
  .screens .hold4 {
    top: -19px;
    left: 115px;
  }
  .screens .hold5 {
    top: 138px;
    left: 420px;
  }
  .screens .hold6 {
    top: 62px;
    left: 637px;
  }
  .screens .hold7 {
    top: -96px;
    left: 336px;
  }
  .screens .hold8 {
    top: -151px;
    left: 605px;
    opacity: 0;
  }
  .screens .bg-hold {
    min-height: 571px;
    background: #1C1D3B;
    transform: skew(12deg, -9deg);
    position: absolute;
    width: 187%;
    left: -76px;
    top: 69px;
  }
  .about-the-app {
    padding-top: 15px;
  }
  @keyframes UpDown {
    0% {
        top: 114px;
        }
    50% {
        top: 85px;
        }
    100% {
        top: 114px;
        }
  }
  .portfo-banner img{
    height: 200px;
  }
  .photo-gallery .f-img {
    width: 96% ;
  }
  .photo-gallery .eight.columns {
    height: 467px;
  }
  .container.inner-inset {
    width: 76%;
  }
  ul.true-list li a {
    font-size: 16px !important;
  }
  .back-slider .container{
    width: 90% !important;
  }
  .mobile-clients .container.inner-inset{
    width: 88% !important;
  }
}

/* Larger than desktop */
@media (min-width: 1001px) and (max-width: 1160px){
  .port-contact-us .full-width{
    height: 290px;
  }
  .port-contact-us .full-width .next-prjct{
    height: 100%;
  }
  .port-contact-us .full-width .next-prjct .txt {
    padding: 36px 0 50px 160px;
  }
  .port-contact-us .full-width .txt {
    padding: 32px 51px 0 65px;
  }
  .photo-gallery .eight.columns{
    height: 463px;
  }
  .photo-gallery .f-img{
    width: 96%;
  }
  .photo-gallery .six.columns{
    width: 47%;
    margin-left: 8px;
  }
  .photo-gallery .four.columns .img-holder.long-h img{
    height: 100%;
    width: auto;
  }
  .photo-gallery .four.columns .img-holder.long-h {
    height: 295px;
    margin-bottom: 10px;
  }
  .photo-gallery .img-holder{
    height: 165px;
  }
  .photo-gallery img,.photo-gallery .eight.columns{
    border-radius: 5px;
  }
  .service-list a{
    padding: 7px;
  }
  .service-list h3,.service-list a{
    text-align: center;
  }
  .testimonial .container .seven {
    padding: 40px 0 40px 205px;
  }
  .loc-and-exp {
    padding-top: 30px;
  }
  .openings li {
    width: calc(100% / 2 - 17px);
  }
  footer{
    margin-top:0;
  }
}
@media (min-width: 1000px) and (max-width: 1199px){
  .softwares li img {
    width: 40px;
  }
  .softwares li img.jquery{
    width: 60px !important;
  }
  .softwares li img.node{
    width: 40px !important;
  }
  .softwares li img.html{
    width: 30px !important;
  }
  .softwares li img.angular{
    width: 46px !important;
  }
  .screens {
    min-height: 820px;
  }
  @keyframes ScreenFade {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.6);
    }
  100% {
        opacity: 1;
        transform: translateY(0) scale(0.6);
    }
  }
  .screens.mobile .srceen-holder {
    transform: scale(0.6);
  }
  .screens .hold1 {
    top: 287px !important;
    left: -28px !important;
  }
  .screens .hold2 {
    top: 128px !important;
    left: 29px !important;
  }
  .screens .hold3 {
    top: 287px !important;
    left: 338px !important;
  }
  .screens .hold4 {
    top: -19px !important;
    left: 115px !important;
  }
  .screens .hold5 {
    top: 138px !important;
    left: 420px !important;
  }
  .screens .hold6 {
    top: 62px !important;
    left: 637px !important;
  }
  .screens .hold7 {
    top: -96px !important;
    left: 336px !important;
  }
  .screens .hold8 {
    top: -151px !important;
    left: 605px !important;
    opacity: 0 !important;
  }
  .screens .bg-hold {
    min-height: 571px !important;
    transform: skew(12deg, -9deg) !important;
    width: 187% !important;
    left: -76px !important;
    top: 69px !important;
  }
  .about-the-app {
    padding-top: 15px;
  }
  @keyframes UpDown {
    0% {
        top: 114px;
        }
    50% {
        top: 85px;
        }
    100% {
        top: 114px;
        }
  }
  .portfo-banner img{
    height: 200px;
  }
  .txt-holder {
    width: 90%;
  }
  .frames{
    display: none;
  }
  .portfolio-tab .main-menus li {
    width: calc(100% / 2 - 30px);
  }
  .portfolio-tab .app-content {
    padding: 0 6px;
  }
  .photo-gallery .long-h img{
    width: auto;
    height: 100%;
  }
  .photo-gallery .four.columns .img-holder.long-h{
    height: 288px;
    margin-bottom: 10px;
  }
  .approach-hold .services-need-div .five{
    margin-left: 0;
  }
  .mobile-clients .container.inner-inset{
    width: 74% !important;
  }
  .slider ul li{
    width: 300px !important;
    height: 300px;
    padding: 0;
  }
  .slider-content {
    min-height: 330px;
  }
  .back-slider {
    padding: 100px 0 0 0;
    min-height: 400px;
  }
  .slider-arrows hr.long {
    border-top: 143px solid #DDDDDD;
  }
  .t-slider{
    padding-bottom: 20px;
  }
  .testimonial-slider{
    padding-bottom: 0;
  }
  .back-div {
    width: 520px;
  }
  .work-flow .services-need-div .five.columns{
    padding-right: 13px;
  }
  .mobile-clients .trust-us-div {
    margin-top: 0;
  }
  .mobile-clients .trust-us-div ul li:last-child{
    display: inline-block;
  }
  .mobile-clients .trust-us-div ul li:nth-last-child(2){
    border-right: 1px solid #DDDDDD
  }
  .mobile-clients .trust-us-div ul{
    padding-left: 60px;
  }
  ul.true-list li span{
    margin-bottom: 1px;
    margin-top: -1px;
  }
  ul.true-list li{
    padding: 7px 20px;
    margin-bottom: 20px;
  }
  .software-used, .offer {
    padding-top: 36px;
  }
  ul.true-list li a {
    font-size: 18px;
  }
  .vguard {
    width: 152px;
    background-position: -4px -185px;
  }
  .federal {
    width: 150px;
    height: 42px;
    background-position: -11px 23px;
  }
  .trust-us-div ul li:nth-child(3n) {
    border-right: 1px solid #DDDDDD;
  }
  .trust-us-div ul li:last-child{
    display: none
  }
  .trust-us-div ul li {
    width: calc( 100% / 5 - 10px);
  }
  .josco,.dwan{
    margin: 10px auto;
  }
  .news-box {
    margin-top: 50px;
  }
  .testimonial .container .five .testm-content {
    padding-top: 60px;
    height: 177px;
  }
  .client-story{
    padding: 10px 0
  }
  .services{
    padding: 0;
  }
  .services .one-half {
    padding: 40px 33px;
    height: 355px;
  }
  .services-menu .container{
    width: 88%;
  }
  .services .item{
    text-align: center;
  }
  .services .app-icon {
    float: none;
  }
  .services .back{
    left: -11px;
    right: 0;
    margin: auto;
    top: 40px;
  }
  .services h4{
    margin-top:20px;
  }
  .services .services-bg{
    height: 56%;
  }
  .client-story {
    margin-top: 30px;
  }
  .company-logo .btn-blue {
    margin: 30px 0 53px 0;
  }
  .testimonial .container .seven h3{
    font-size: 26px;
  }
  .services-need-div {
    margin-top: 50px;
  }
  .services-need{
    padding-bottom: 50px;
  }
  .news-box .six{
    width: 100%;
    margin-bottom: 20px;
    margin-left: 0;
  }
  .news .button.btn-blue {
    margin-top: 35px;
    margin-bottom: 17px;
  }
  .news-box .box{
    width: 85%;
    margin: auto;
  }
  .company-logo .btn-blue {
    margin: 0 0 66px 0px;
  }
  .trust-us-div ul li:nth-last-child(2){
    border-right: 1px solid transparent;
  }
  footer .footer-menu .three a{
    font-size: 14px;
  }
  footer .footer-menu .three h4 {
    font-size: 18px;
  }
  footer .footer-menu {
    padding: 50px 0;
    padding-bottom: 10px;
  }
  footer .top-footer .four {
    margin-top: 25px;
  }
}
@media screen and ( min-width: 1000px ) and (max-width:1366px){
  @keyframes animenu {
    0% {
    right: 211.906px;
    top: 31px;
    opacity: 0.95;
    }
    50% {
        width: 500px;
        height: 500px;
        top: -224px;
        right: -16px;
        border-radius: 50%;
    }
    100% {
        opacity: 1;
        width: 100%;
        height: 100%;
        border-radius: 0%;
        right: 0;
        top: 0;
    }
  }
  footer .bottom-footer ul li {
    margin-left: 5px;
  }
  .banner .mouse{
    bottom: 72px;
  }
  .banner ul {
    margin-bottom: 70px;
    margin-top: -45px;
  }
  header .container{
    padding-top: 55px;
  }
  .mob-clr-bk{
    padding-top: 50px;
  }
  .offer .container.inner-inset{
    width: 66%;
  }
  h3{
    font-size: 30px;
  }
  .screens.mobile .srceen-holder{
    transform: scale(0.8);
  }
  .screens.tablet .srceen-holder{
    transform: scale(0.8);
  }
  .screens.mobile .bg-hold{
    width: 214%;
    left: -734px;
    top: 258px;
    min-height: 537px;
  }
  .screens.tablet .bg-hold {
    width: 224%;
    left: -441px;
    top: 99px;
    min-height: 318px;
  }
  .screens.mobile .hold1 {
    top: 469px;
    left: 105px;
    opacity: 0;
  }
  .screens.mobile .hold2 {
    top: 245px;
    left: 155px;
    opacity: 0;
  }
  .screens.mobile .hold3 {
    top: 460px;
    left: 556px;
    opacity: 0;
  }
  .screens.mobile .hold4 {
    top: 127px;
    left: 435px;
    opacity: 0;
  }
  .screens.mobile .hold5 {
    top: 336px;
    right: 30px;
    opacity: 0;
  }
  .screens.mobile .hold6 {
    top: -80px;
    right: 330px;
    opacity: 0;
  }
  .screens.mobile .hold7 {
    top: 124px;
    right: -84px;
    opacity: 0;
  }
  .screens.tablet .hold9 {
    top: -242px;
    left: -278px;
    opacity: 0;
  }
  .screens.tablet .hold10 {
    top: -300px;
    left: -81px;
    opacity: 0;
  }
  .screens.tablet .hold11 {
    top: -347px;
    left: 69px;
    opacity: 0;
  }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
  header .container {
      padding-top: 55px;
  }
  .height{
    height: 300px
  }
  .txt-holder {
    width: 54%;
  }
  .portfolio-tab .main-menus li {
    width: calc(100% / 4 - 23px);
    padding: 6px;
  }
  .approach-hold .services-need-div .five{
    margin-left: 0;
  }
  .banner .banner-content {
    padding: 100px 78px 100px 0;
    transition: all 2s ease-in;
  }
  .banner .scroll-btn{
    right: 80px;
  }
  .banner .b-img img {
    position: absolute;
    left: -104px;
    width: 585px;
    top: 36px;
  }
  .services-menu .container{
    width: 87% !important;
  }
}
@media screen and ( min-width: 1500px ){
  @keyframes animenu {
    0% {
    right: 372.531px;
    top: 31px;
    opacity: 0.95;
    }
    50% {
      width: 500px;
      height: 500px;
      top: -224px;
      /* right: -16px; */
      border-radius: 50%;
    }
    100% {
        opacity: 1;
        width: 100%;
        height: 100%;
        border-radius: 0%;
        right: 0;
        top: 0;
    }
  }
  .head-holder h3{
    margin-top: 30px
  }
  .screens {
    min-height: 820px;
  }
  @keyframes ScreenFade {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.8);
    }
  100% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
    }
  }
  .screens.mobile .srceen-holder {
    transform: scale(0.8);
  }
  .screens.mobile .hold1 {
    top: 271px;
    left: 105px;
    opacity: 0;
  }
  .screens.mobile .hold2 {
    top: 48px;
    left: 155px;
    opacity: 0;
  }
  .screens.mobile .hold3 {
    top: 256px;
    left: 556px;
    opacity: 0;
  }
  .screens.mobile .hold4 {
    top: -41px;
    left: 475px;
    opacity: 0;
  }
  .screens.mobile .hold5 {
    top: 165px;
    right: 132px;
    opacity: 0;
  }
  .screens.mobile .hold6 {
    top: -125px;
    right: 190px;
    opacity: 0;
  }
  .screens.mobile .hold7 {
    top: 89px;
    right: -217px;
    opacity: 0;
  }
  .screens .hold8 {
    top: -180px;
    right: -196px;
    opacity: 0;
  }
  .screens .bg-hold {
    min-height: 571px !important;
    transform: skew(12deg, -6deg) !important;
    width: 151% !important;
    left: -79px !important;
    top: 83px !important;
  }
  .about-the-app {
    padding-top: 15px;
  }
  @keyframes UpDown {
    0% {
        top: 114px;
        }
    50% {
        top: 85px;
        }
    100% {
        top: 114px;
        }
  }
  .quote-box{
    top:-74px
  }
  .slider ul li{
    padding: 10px;
    width: 380px !important;
    height: 363px;
  }
  .slider ul .slider-img img{
    margin-top: 47px;
  }
  .slider ul li:first-child{
    margin-left:380px;
  }
  .josco,.dwan{
    margin: 10px auto
  }
  .services-need-div {
    margin-top: 50px;
  }
  .services-need{
    padding-bottom: 50px
  }
  .testimonial .container .seven{
    padding: 40px 0 40px 320px;
  }
  .testimonial .container .seven .img-div img {
    height: 320px;
  }
  .client-story {
    padding:0;
    margin-bottom: 30px;
  }
  body .container.inset {
    width: 62%;
  }
  .services-menu .container {
    width: 70%;
  }
  body .container {
    width: 75%;
  }
  .menu-cir{
    right: 347px;
  }
}
@media screen and (min-width: 1920px){
  .banner ul li.active hr{
    top: 15px;
  }
  header .container{
    padding-top: 55px
  }
  .font-library img {
    width: 40%;
  }
  @keyframes UpDown {
    0% {
        top: 11px;
    }
    50% {
        top: 50px;
    }
    100% {
        top: 10px;
    }
  }
  .portfo-banner img{
    height: 400px;
  }
  .about-the-app{
    padding-top: 50px;
  }
  .color-book{
    padding-top: 50px;
    padding-bottom: 100px;
  }
  .port-contact-us .full-width .next-prjct .txt {
    padding: 80px 260px;
  }
  .port-contact-us .full-width .txt {
    padding: 100px;
  }
  .port-contact-us .full-width{
    height: 300px;
  }
  .mobile-app{
    padding-top: 80px;
  }
  .quote-by-client {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .port-contact-us .full-width .next-prjct .nxt-pro-back-div{
    left: 40px;
  }
  .approach-hold h3{
    font-size: 30px;
  }
  .company-logo .btn-blue{
    padding: 12px 9px;
  }
  .testimonial .container .seven .img-div{
    height: 420px;
  }
  .testimonial .container .seven .btn-normal {
    margin-top: 12px;
  }
  .testimonial .container .seven .pro-desc{
    margin-top: 19px;
  }
  .testimonial .container .seven {
    padding: 80px 0 40px 276px;
  }
  .testm-pro-url{
    margin-top: 10px;
    display: block;
  }
  .testimonial .container .seven .img-div img {
    height: 370px;
    left: -156px;
    top: 26px;
  }
  .testimonial .container .seven{
    min-height: 400px;
  }
  .client-story{
    padding-top: 120px;
    height: 736px;
  }
  .client-story .testimonial{
    margin-top: 92px;
  }
  .services-menu {
    padding-top: 140px;
  }
  .service-list{
    padding: 0 30px;
  }
  .service-list a{
    height: 186px;
  }
  .service-list{
    padding: 0 28px;
  }
  .services-content img {
    width: 540px;
  }
  .services .desc {
    padding-top: 91px;
    padding-left: 62px;
  }
  header .nav-bar{
    padding-right: 68px;
  }
  body .container.inset {
    width: 69%;
  }
  .banner ul li {
    padding: 14px;
  }
  .banner .pro-name{
    margin-top: -34px;
  }
  .banner .pro-url{
    margin-bottom: 32px;
    display: block;
  }
  .banner .mouse{
    left: 34px;
    bottom: 50px;
  }
  .banner h3{
    margin-top: 43px;
  }
  .banner .b-img img {
    position: absolute;
    left: -95px;
    width: 611px;
    top: 97px
  }
  .banner .b-img{
    height: 600px;
  }
  .banner ul{
    margin-top: -62px;
    margin-bottom: 57px;
  }
  .banner .banner-content {
    padding: 100px 270px 100px 0;
    margin-left: 0;
  }
  header .container{
    padding-top: 40px;
  }
  h3{
    font-size: 33px;
  }
  p{
    font-size: 16px;
  }
  .screens.mobile .hold1 {
    top: 271px;
    left: 262px;
  }
  .screens.mobile .hold2 {
    top: 38px;
    left: 315px;
  }
  .screens.mobile .hold3 {
    top: 256px;
    left: 720px;
  }
  .screens .hold8 {
    top: -145px;
    right: 3px;
  }
  .screens.mobile .hold7 {
    top: 89px;
    right: 36px;
  }
  .screens.mobile .hold6 {
    top: -125px;
    right: 430px;
  }
  .screens.mobile .hold5 {
    top: 175px;
    right: 351px;
  }
  .screens.mobile .hold4 {
    left: 656px;
  }
  .screens.tablet {
    min-height: 737px;
  }
  .screens .hold9 {
      top: -192px;
      left: -171px;
      opacity: 0;
  }
  .screens .hold10 {
      top: -250px;
      left: 58px;
      opacity: 0;
  }
  .screens .hold11 {
    top: -313px;
    left: 265px;
    opacity: 0;
  }
  .screens.tablet .bg-hold {
    min-height: 440px !important;
    transform: skew(-26deg, -7deg) !important;
    width: 125% !important;
    left: -332px !important;
    top: 118px !important;
  }
  .background-bg-div {
    transform: skew(0, -7deg) !important;
  }
  .screen img {
    width: 100%;
  }
  .txt-holder {
    width: 38%;
  }
  .photo-gallery .four.columns .img-holder.long-h {
    height: 285px;
    margin-bottom: 10px;
  }
  .slider-arrows{
    right: 133px;
  }
  .slider-arrows hr.long {
    border-top: 115px solid #DDDDDD;
  }
  .slider ul li:first-child {
    margin-left: 1078px;
  }
  .slider ul .slider-img img{
    margin-top: 52px;
  }
  .app-section{
    top: -53px;
  }
}