html {
       font-size: 62.5%;
}
body {
       text-align: center;
}
.wrapper-main {
       padding-left: 0px;
       padding-right: 10px;
       width: 992px;
       line-height: 1.1;
       margin: 0 auto;
}

    @media only screen and (max-width: 600px) and (orientation: landscape) {

       .wrapper-main {
            width: 100%;
            text-align: center;
            line-height: 1.1;
            font-size: 1.5rem;
        }           
}

    @media only screen and (max-width: 600px) and (orientation: portrait) {

       .wrapper-main {
            text-align: center;
            width: 100%;
            line-height: 1.1;
            font-size: 1.5rem;
                    }           
}
    @media only screen and (min-width: 601px) {

       .wrapper-main {
            text-align: center;
            width: 100%;
            line-height: 1.1;
            font-size: 1.5rem;
         }           
}

    @media only screen and (min-width: 768px) {

       .wrapper-main {
            width: 100%;
            line-height: 1.1;
                    }           
}

    @media only screen and (min-width: 1000px) {

       .wrapper-main {
       text-align: center; 
       width: 100%;
       line-height: 1.1;
       font-size: 1.5rem;
                    }           
}


/* Helps:  Breakpoints for various devices <600px, 601px, 768px ,992px, 1200px */
/* Can do limits too.  i.e. @media only screen and (min-width: 601px) and (max-width: 768px) */>

</body>