/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media (max-width: 640px) {

    /* Navigation*/
    .tablet-nav .header .brand {
        float: none;
        display: inline-block;
        margin-left: 22px;
        margin-bottom: 22px;
    }

    .brand h1 {
        font-size: 32px;
    }

    .tablet-nav .header {
        padding: 0px;
        height: 190px;
    }

    .tablet-nav .header .inner {
        padding: 20px 0 0 0;
        min-height: 0;
    }

    .tablet-nav .header .primary .nav-open-button { /* styling and positioning of the nav toggle button */
        z-index: 100;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        top: 20px;
        display: block;
        cursor: pointer;
    }

    .tablet-nav .header .primary {
        position: absolute;
        top: 30px;
        z-index: 21;
    }

    .tablet-nav .header .primary ul {
        z-index: 10;
        position: absolute;
        display: none; /* initially hiding the navigation */
        float: right;
        padding: 0;
        top: 170px;
        right: -10px;
        width: 335px;
        background: linear-gradient(to right, #12375f, #134f81);
    }

    .tablet-nav .header .primary ul li {
        width: 100%;
        margin: 0;
        padding: 0;
        float: none; /* displays list items vertically */
        background: none;
        position: relative;
    }

    .tablet-nav .header .primary ul li a,
    .tablet-nav .header .primary ul li.current a,
    .tablet-nav .header .primary ul li.section a { /* styling the  top level nav links */
        padding: 0 10px 0 30px;
        font-weight: bold;
        font-size: 16px;

    }

    .tablet-nav .header .primary li.section:after,
    .tablet-nav .header .primary li.current:after {
        display: none; /* hides the link arrow on current top level page */
    }

    .tablet-nav .tablet-nav .header nav.primary ul li {
        padding: 0;
    }

    .SubscribePage .main {
        width: 100%;
    }

    .subscribe-form-container .form-container form .field-list, fieldset {
        flex-direction: column;
        row-gap: 20px;
    }

    .subscribe-form-container .form-container form fieldset .field,
    .subscribe-form-container .form-container form fieldset .middleColumn,
    .subscribe-form-container .form-container form fieldset .middleColumn input {
        width: 100%;
        max-width: unset;
    }

    .content-container, .sidebar {
        width: 100%; /* sidenav is now shown above the page content */
        margin-bottom: 30px;
    }

    .typography h1 { /* decrease size of page heading due to smaller screen */
        font-size: 30px;
        line-height: 35px;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .typography p {
        font-size: 14px;
        line-height: 23px;
    }

    /* Footer */
    footer .inner div {
        width: 100%;
        margin-bottom: 20px;
    }

    footer nav.primary ul {
        padding: 0;
    }

    .header nav.primary ul {
        margin: 0 10px;
    }

    .header nav.primary li.hassub ul.nestedLinks {
        right: 10px;
        left: -10px;
        padding: 10px 25px 10px 5px;
        display: block;
        visibility: hidden;
    }

    .header .primary li i {
        padding-left: 0;
        margin-right: 5px;
    }

    .header .primary li.hassub:hover .nestedLinks {
        visibility: hidden;
        opacity: 0;
    }

}