/*---------------------SMALL PHONES--------------------*/
/*---------------------FROM 0 TO 480px--------------------*/

@media only screen and (max-width: 480px) {

section {padding: 25px 0;}
.contact-form {width: 100%;}

}

/*---------------------SMALL PHONES--------------------*/
/*---------------------FROM SMALL PHONES TO SMALL TABLET FROM 481 - 767 px--------------------*/

@media only screen and (max-width: 767px) {

    body {font-size: 14px;}
    section {padding: 30px 0;}

    .row {padding: 0 5%}

    .col {
        width: 100%;
        margin: 0% 0 4% 0%;
    }

    .main-nav {display: none;}

    h1 {
        font-size: 150%;
        text-align: center;}

    h2 {font-size: 150%;}

    .quote-box {margin-top: 5px;}
 

}

/*---------------------IPAD Portrait Mode--------------------*/
/*---------------------FROM SMALL TABLET TO BIG TABLET FROM 767 to 1023 PX--------------------*/

@media only screen and (max-width: 1023px) {

    body { font-size: 18px; }
    section { padding: 60px 0; }

    .safecracker-locksmith-image {
        height: 50%;
        width: 50%;
    }

    .about-scls-text,
    .why-scls-text,
    .quote-scls-text,
    .contact-scls-text1,
    .contact-scls-text {
        width: 80%;
        margin-left: 10%;
    }
    
    .quote-box { margin-top: 10px;}
    .why-box {margin-top: 10px;}

    .company-logo {
        height: 50%;
        width: 50%;
    }
    
    .why-icon {
        height: 25%;
        width: 25%;
    }
  

    h3 {font-size: 95%;}
    
    .why-box p,
    .quote-box p {
        font-size: 90%;
    }
}

/*---------------------IPAD Portrait Mode--------------------*/
/*---------------------FROM BiG TABLET TO 1200px (widths smaller than the 1140 px row --------------------*/

@media only screen and (max-width: 1200px) {

    .intro-text-box {
        width: 100%;
        padding: 0 2%;
    }

    .row {
        padding: 0 2%;        
    }


}