/* Big tablets to 1200px (widths smaller than 1140px) */
@media only screen and (max-width: 1200px)
{
    .hero-text-box
    {
        width: 100%;
        padding: 0 2%;
    }
    
    .row {   padding: 0 2%; }

}

/* Small Tablet to Big Tablets: from 768px to  1023px */
@media only screen and (max-width: 1023px)
{
    body{ font-size: 18px;}
    
    section { padding: 60px 0;}
    
    .contact-form{ width: 80%}
    
    .about_image img{width: 100%; }
    
    .logo  { height: 135px; }
    
}

/* Small Phones to Small Tablets: from 481px to  767px */
@media only screen and (max-width: 767px)
{
    body{ font-size: 16px}
    section{ padding: 30px 0;}
    .row, .hero-text-box { padding: 0 4%;}
    
    .col{width: 100%;}
    
    .logo { height: 100px; }
    
    ..main-nav { display: none; }
    
    .mobile-nav-icon { display: inline-block;}
    
    .main-nav
    {
        float:left;
        margin-top: 30px;
        margin-left: 25px;
    }
    
    .main-nav li {  display:block;   }
    
    .main-nav li a:link, 
    .main-nav li a:visited
    {
        display:block;
        border: 0;
        padding: 5px 0;
        font-size: 100%;
    }
    
    .sticky .main-nav   { margin-top: 10px;     float: left;}

    .sticky .main-nav li a:hover, 
    .sticky .main-nav li a:active {  padding: 10px 0;  }

    .sticky .mobile-nav-icon { margin-top: 10px; }
    
    
    .services_image img
    {
        height: auto;
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        font-size: 100%;
    }
    
    .services_image { text-align: center; }

}

/* Small Phones: from 0 to  480px */
@media only screen and (max-width: 480px)
{
    section { padding: 25px 0;}
    .contact-form{ width: 100%}
   
    .main-nav{display: none;}

}