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

    .row { margin: 0 2%;}
}

/* from 768 to 1023 */
@media only screen and (max-width: 1023px) {
    body { font-size: 16px}

    section { padding: 60px 0;}
}

/* from 481 to 767 */
@media only screen and (max-width: 767px) {
    body {font-size: 14px;}

    section { padding: 30px 0;}

    .row,
    .hero-text-box { padding: 0 4%; }

    .col { width: 100%;}
}

/* from 0 to 480 */
@media only screen and (max-width: 480px) {

}