/*----------------------------------
    MEDIUM LAYOUT: 1280px
-----------------------------------*/

@media (min-width: 1400px) { 
    #top-bar-2:after {
        width: 20%;

    }
    #top-bar-2:before {
        width: 71%;
    }
}


/*----------------------------------
    TABLET LAYOUT: 768px
------------------------------------*/

@media (min-width: 768px) and (max-width: 991px) {
    
     #top-bar-2:after {
        width: 8%;

    }
    #top-bar-2:before {
        width: 85%;
    }
    
    .section-heading{
        margin-bottom: 30px;
    }
    
   .info-block p {
        margin: 10px 0px 5px;

    }
    .contact-info{
        margin-top: 30px;
        position: absolute;
    }
    .info-box{
        margin-bottom: 30px;
    }
    .info-box h4 span{
        font-size: 16px;
    }
    .info-box i {
        font-size: 36px
    }
    
     
    /*    Home 2 */
    
    .intro-content{
        margin-bottom: 30px;
    }
    
    .about-box-2{
        margin-top: 170px;
    }
    
    .case-study-block img {
        width: 100%;
    }
    
     .test-title h3,   .test-title p{
        color: #fff;
    }
    /*    ONepage HOME */
    .trans-navigation {
        position: relative;
        width: 100%;
        background: #fff;
    }
    .trans-navigation .navbar-white .navbar-nav .nav-link {
        color: #222;
    }
    
    .team-block,.career-block{
        margin-bottom: 30px;
    }
    .case-block img{
        width: 90%;
        display: block;
        margin: 0 auto;
    }
    
    .intro-block {
        padding: 40px 20px;

    }

}


/*----------------------------------
    MOBILE LAYOUT: 320px
-----------------------------------*/



/*----------------------------------
    WIDE MOBILE LAYOUT: 480px
-----------------------------------*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
    
    .display-4 {
        font-size: 2.5rem;
    }
    
    .top-bar {
        margin-bottom: 51px;
    }
    
    .about-img img{
        min-height: 100%;
    }
   .service-block{
        padding-left: 30px;
    }
    
    .service-icon{
        position: relative;
    }
    .counter-block {
        margin-bottom: 30px;
    }
    
    .blog-content{
        margin-bottom: 40px;
    }
    
    .blog-box{
        padding-left: 0px;
    }
    
    .contact-info{
        margin-top: 30px;
    }
    .info-box{
        margin-bottom: 30px;
    }
    .info-box h4 span{
        font-size: 16px;
    }
    .info-box i {
        font-size: 36px
    }
    
    .footer-widget{
        margin-bottom: 20px;
    }
    
    .intro-content{
        margin-bottom: 30px;
    }
    
    .about-box-2{
        margin-top: 170px;
    }
    
     .test-title h3,   .test-title p{
        color: #fff;
    }
    
    /*    ONepage HOME */
    .trans-navigation {
        position: relative;
        width: 100%;
        background: #fff;
    }
    .trans-navigation .navbar-white .navbar-nav .nav-link {
        color: #222;
    }
    
    .team-block,.career-block{
        margin-bottom: 30px;
    }
    .case-block img{
        width: 90%;
        display: block;
        margin: 0 auto;
    }
    .intro-block {
        padding: 40px 20px;

    }
    
}

/* Extra Small Devices, Phones */

@media (min-width: 478px) and (max-width: 640px) {
    .display-4 {
        font-size: 2.5rem;
    }
    
    .banner-content p{
        padding-right: 0px;
    }
    
    .main-navigation.menu-2 {
        margin-top: 20px;
        position: absolute;
        width: 100%;
    }
    
    
    .banner-content p{
        padding-right: 0px;
    }
    .service-block{
        padding-left: 20px;
    }
    
    .service-icon{
        position: relative;
    }
    
    .blog-content{
        margin-bottom: 40px;
    }
    
    .blog-box{
        padding-left: 0px;
    }
    
    .contact-info{
        margin-top: 30px;
    }
    .info-box{
        margin-bottom: 30px;
    }
    .info-box h4 span{
        font-size: 16px;
    }
    .info-box i {
        font-size: 36px
    }
    
    .footer-widget{
        margin-bottom: 20px;
    }
     .case-study-block img {
        width: 90%;
         margin: 0 auto;
         display: block;
    }
    .test-title h3,   .test-title p{
        color: #fff;
    }
    .intro-content{
        margin-bottom: 30px;
    }
    
    .about-box-2{
        margin-top: 170px;
    }
    /*    ONepage HOME */
    .trans-navigation {
        position: relative;
        width: 100%;
        background: #fff;
    }
    .trans-navigation .navbar-white .navbar-nav .nav-link {
        color: #222;
    }
    
    .team-block,.career-block{
        margin-bottom: 30px;
    }
    .case-block img{
        width: 90%;
        display: block;
        margin: 0 auto;
    }
    
    .intro-block {
        padding: 40px 20px;

    }
    
}
   

/* Custom, iPhone Retina */ 
@media (min-width : 320px) and (max-width: 478px)  {
    
    .navbar-collapse.collapse.show{
        padding-bottom: 30px;
        padding-top: 20px;
    }
    
   
    
    .section{
        padding: 60px 0px;
    }
    
    .section-bottom{
        padding-bottom: 60px;    
    }
    .section-top{
        padding-top: 60px;    
    }
  
    .about-img img {
        min-height: 100%;
        width: 100%;
    }
    
    .case-block img{
        width: 100%;
    }
    
    .blog-content{
        margin-bottom: 40px;
    }
    
    .blog-box{
        padding-left: 0px;
    }
    
    .contact-info{
        margin-top: 30px;
    }
    .info-box{
        margin-bottom: 30px;
    }
    .info-box h4 span{
        font-size: 16px;
    }
    .info-box i {
        font-size: 36px
    }
    
    .footer-widget{
        margin-bottom: 20px;
    }
    .sub-form .w-btn-main{
        position: relative;
        margin-top: 10px;
    }
    
    body,html{
        font-size: 15px;
    }
    .main-banner h1.display-4 {
        line-height: 56px;
    }
    .display-4 {
        font-size: 2.5rem;
    }
    
    /*    Home 2 */
    
    .intro-content{
        margin-bottom: 30px;
    }
    
    .about-box-2{
        margin-top: 170px;
    }
    
    .case-study-block img {
        width: 100%;
    }
    
    .test-title h3,  .test-title p{
        color: #fff;
    }
    
/*    ONepage HOME */
    .trans-navigation {
        position: relative;
        width: 100%;
        background: #fff;
    }
    .trans-navigation .navbar-white .navbar-nav .nav-link {
        color: #222;
    }
    
    .team-block,.career-block{
        margin-bottom: 30px;
    }
    .case-block img{
        width: 90%;
        display: block;
        margin: 0 auto;
    }
    .intro-block {
        padding: 40px 20px;

    }
}