/* Larger */
@media screen and (max-width: 1680px) {

    html, body {
        font-size: 14pt;
    }

    .wrapper {
        padding: 5em 0 5em 0;
        text-align: center;
    }

    .container {
        /*width: 1200px;*/
        width: auto;
    }
}

/* Large */
@media screen and (max-width: 1280px) {

    html, body {
        font-size: 14pt;
    }

    .wrapper {
        padding: 5em 0 5em 0;
        text-align: center;
    }

    .container {
        /*width: 960px;*/
        width: auto;
    }

}

/* Medium Large */
@media screen and (max-width: 1023px) {

    html, body {
        font-size: 14pt;
    }

    .wrapper {
        padding: 5em 0 5em 0;
        text-align: center;
    }

    .container {
        width: auto;
    }

    /* modify bootstrap class otherwise overflow*/
    .navbar-nav { 
        /*background: #dbd8e3;*/
        /*overflow:scroll;*/
        display: inline-block;
        text-align: justify;
    }

}

/* Medium */
@media screen and (max-width: 980px) {

    html, body {
        font-size: 14pt;
    }

    .wrapper {
        padding: 5em 0 5em 0;
        text-align: center;
    }

    .container {
        /*width: 100%;*/
        width: auto;
    }

}

/* Small */
/* Note: When designing view with browser developer mode which sections are overflowing or compressing, then design here for those sections only*/
/* Note: design top down i.e. start from html and body, then go into nested compartments*/
@media screen and (max-width: 736px) {

    html {
        font-size: 12pt;
    }

    body {
        padding-top: 44px;
        line-height: 1.75em;
        font-size: 12pt;
        letter-spacing: 0;
    }

    .wrapper {
        padding: 3em 0 3em 0;
        text-align: center;
    }

    .container {
        /*width: 100%;*/
        width: auto;
    }

    .button {
        text-align: center;
        /*font-size: 1.2em;*/
        width: 100%;
        padding: 1em 0 1em 0;
    }


    .col-4, .col-5, .col-6, .col-8 {
        width: 100%;
        text-align: center;
      }

    a {
        /*vertical-align: baseline;*/
        color: #0d0cb5;
        text-decoration: underline;
        transition: color .2s ease-in-out;
        overflow:hidden;
        word-wrap: break-word;
        }
}