/* =======================================================
   STATUS GRAPHITE
   Responsive additions
   ======================================================= */

/* Keep the whole page centred */

body {

    margin: 0;
    padding: 0;

    background: #666 url("../image/gifs/bg1.gif") repeat;

    text-align: center;

}

/* Main content */

table {

    margin-left: auto;
    margin-right: auto;


}

/* Large instrument photographs 1000px */

.product-image-1000 {

    display: block;

    width: 100%;

    max-width: 1000px;

    height: auto;

    margin: 20px auto;

}

/* Large instrument photographs 900px */

.product-image-900 {

    display: block;

    width: 100%;

    max-width: 900px;

    height: auto;

    margin: 20px auto;

}

/* Large instrument photographs 800px */

.product-image-800 {

    display: block;

    width: 100%;

    max-width: 800px;

    height: auto;

    margin: 100px auto;

}

/* Large instrument photographs 720px */

.product-image-720 {

    display: block;

    width: 100%;

    max-width: 720px;

    height: auto;

    margin: 20px auto;

}


/* Large instrument photographs 700px */

.product-image-700 {

    display: block;

    width: 100%;

    max-width: 700px;

    height: auto;

    margin: 20px auto;

}


/* Large instrument photographs 650px */

.product-image-650 {

    display: block;

    width: 100%;

    max-width: 650px;

    height: auto;

    margin: 20px auto;

}



/* Large instrument photographs  500px*/

.product-image-500 {

    display: block;

    width: 100%;

    max-width: 500px;

    height: auto;

    margin: 20px auto;

}


/* Large instrument photographs  350px*/

.product-image-350 {

    display: block;

    width: 100%;

    max-width: 350px;

    height: auto;

    margin: 20px auto;

}


/* Large instrument photographs  200px*/

.product-image-200 {

    display: block;

    width: 100%;

    max-width: 200px;

    height: auto;

    margin: 20px auto;

}



/* Never allow any image to overflow the screen */

img {

    max-width: 100%;

    height: auto;

}

/* =======================================================
   MOBILE MENU
   The existing Milonic menu remains unchanged for
   screens wider than 700px.  Phones use the menu below.
   ======================================================= */

.mobile-menu {
    display: none;
}

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

    /* Hide the old desktop menu on phones. */
    .mobile-menu {
        display: block;
        width: 90%;
        max-width: 580px;
        margin: 0 auto 35px auto;
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
    }



.mobile-menu-button {
    width: 100%;
    min-height: 45px;
    margin: 0;
    padding: 8px 18px;
    border: 2px solid #777;
    background: #333;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-sizing: border-box;
}



    .mobile-menu-button:hover,
    .mobile-menu-button:focus {
        background: #444;
        outline: none;
    }

    /* Three-bar hamburger symbol. */
    .hamburger-icon {
        display: inline-flex;
        width: 22px;
        height: 18px;
        flex: 0 0 22px;
        flex-direction: column;
        justify-content: space-between;
    }

    .hamburger-icon span {
        display: block;
        height: 3px;
        width: 22px;
        background: #fff;
    }

    .mobile-navigation {
        display: none;
        margin: 0;
        padding: 0;
        border-left: 2px solid #777;
        border-right: 2px solid #777;
        border-bottom: 2px solid #777;
    }

    .mobile-navigation.open {
        display: block;
    }

    .mobile-navigation ul {
        list-style: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .mobile-navigation li {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border-top: 2px solid #666;
        background: #333;
        box-sizing: border-box;
    }

    .mobile-navigation a,
    .mobile-navigation .submenu-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 45px;
        padding: 8px 18px;
        border: 0;
        background: transparent;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        line-height: 1.25;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
        box-sizing: border-box;
    }

    .mobile-navigation a:hover,
    .mobile-navigation a:focus,
    .mobile-navigation .submenu-button:hover,
    .mobile-navigation .submenu-button:focus {
        background: #444;
        outline: none;
    }

    /* CSS chevron - avoids character-encoding problems. */
    .mobile-chevron {
        width: 11px;
        height: 11px;
        margin-left: 15px;
        border-right: 3px solid #fff;
        border-bottom: 3px solid #fff;
        transform: rotate(45deg);
        flex: 0 0 auto;
        transition: transform 0.15s ease;
    }

    .submenu-button[aria-expanded="true"] .mobile-chevron {
        transform: rotate(225deg);
    }

    .mobile-navigation .submenu {
        display: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        padding-left: 18px;
        background: #262626;
        border-top: 1px solid #555;
        box-sizing: border-box;
    }

    .mobile-navigation .submenu.open {
        display: block;
    }

    .mobile-navigation .submenu a,
    .mobile-navigation .submenu .submenu a,
    .mobile-navigation .submenu .submenu .submenu a {
        min-height: 45px;
        padding-left: 18px;
        font-size: 20px;
        background: #292929;
        box-sizing: border-box;
    }

    .mobile-navigation .submenu .submenu a {
        padding-left: 14px;
    }

    .mobile-navigation .submenu .submenu .submenu a {
        padding-left: 14px;
    }

    .mobile-navigation .submenu li {
        border-top: 1px solid #555;
    }
}

/* =======================================================
   MAIN PAGE TEXT
   700px maximum on PC.
   25px margin each side on smaller screens.
   ======================================================= */

.page-text {
    display: block !important;
    width: calc(100% - 10px) !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}