/* various changes to def pure.css */
            
            body {
                /* overflow-x: hidden; */
            }
            
            .small-caps {
                font-variant: small-caps;
            }
            
            .centered {
                text-align: center;
            }
            
            .background-c {
                background-color: darkgreen;
            }
            
            header h2,
            h1 {
                color: white;
                font-variant: small-caps;
            }
            
            .short-top {
                margin-top: -40px;
            }
            
            ul {
                padding: 0px 5px;
            }
            /* side menu styling change for logo */
            
            #menu img {
                margin: 0px -.4em;
            }
            /*slideshow css*/
            
            .section {
                height: 30vh;
                background-color: white;
            }
            
            #slides {
                position: relative;
                padding: 0px;
                margin: 0px;
            }
            
            #slides img {
                -o-object-fit: cover;
                object-fit: cover;
                height: 30vh;
                width: 100%;
            }
            
            .slide {
                position: absolute;
                left: 0px;
                top: -1px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                opacity: 0;
                z-index: 0;
                -webkit-transition: opacity 1s;
                transition: opacity 1s;
            }
            
            .showing {
                top: -1px;
                opacity: 1;
                z-index: 1;
            }
            
            @media screen and (min-width: 768px) {
                .section {
                    height: 50vh;
                    background-color: white;
                }
                #slides img {
                    height: 50vh;
                }
            }
            /*  contact info on front page  */
            
            #contact-grid .content-subhead {
                margin-top: 10px;
            }
            
            .contact-us {
                padding-top: 0em;
                /* width: 100%; */
                text-align: left;
            }
            
            @media screen and (min-width: 768px) {
                #contact-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-auto-rows: 3em;
                }
                #contact-grid .header {
                    padding-top: 10px;
                }
                .contact-us {
                    grid-column: 2/4;
                    grid-row: 1;
                }
                .david {
                    grid-column: 1/3;
                    grid-row: 2;
                }
                .peter {
                    grid-column: 3/5;
                    grid-row: 2;
                }
            }
            /* services bottom of home page */
            
            #service-short p {
                text-align: center;
                color: black;
            }
            
            #service-short a {
                text-decoration: underline;
                color: inherit;
            }
            
            #service-short a:hover {
                color: black;
                background-color: #bbb;
            }
            /*  content grid and unordered list settings for pages  */
            
            .small-head {
                text-align: center;
                font-size: 80%;
            }
            
            .content-grid,
            .engineering-grid {
                padding: 0px 5vh;
                color: inherit;
            }
            
            @media screen and (min-width: 568px) {
                .content-grid,
                .engineering-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-auto-rows: auto;
                    grid-column-gap: 5vh;
                }
            }
            
            @media screen and (min-width: 1024px) {
                .content-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            /*  query based general hiding classes etc...   */
            
            @media screen and (max-width: 568px) {
                .hide-dropdown {
                    display: none;
                }
            }
            
            .show-on-big {
                display: none;
            }
            
            @media screen and (min-width: 568px) {
                .hide-on-big {
                    display: none;
                }
                .show-on-big {
                    display: initial;
                }
            }