#logo {
    height: .9em;
    background-image: url('img/logo.png');
    margin:.1em;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
}

#logo:hover {
    background-color: white;
}

html, body {
    height: 100%;
}

body {
    background-color:#FFFFFF;
    margin:0;
	color: #000000;
	font-family: 'Play', sans-serif;
    display: flex;
    flex-direction: column;
}

#wrapper {
    flex: 1 0 auto;
    padding-top: 4.5em;
}

#navbar {
    position: fixed;
    width: 100%;
    box-shadow:0px 0px 20px #000;
    background-color:#FFFFFF;
    z-index:2;
}

nav {
    background-color:#FFFFFF;
    font-size:2.1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6em,1fr));
}

nav a:link {
    padding:.5em;
    text-decoration: none;
    color: #000000;
    text-align: center;
}

nav a:visited {
    text-decoration: none;
    color: #000000;
}

nav a:hover {
    background-color:#727272
}

main {
    position: relative;
    z-index: 1;
}

#main1 {
    padding-left:2em;
    padding-right:2em;
    padding-top:2em;
    padding-bottom:1em;
}

#main1 h2 {
    margin-top:0;
    margin-bottom:.4em;
    font-size:2em;
}

#main1 h3 {
    margin-top:0;
    margin-bottom:.4em;
    font-size:1.5em;
}

#main1 p {
    padding-left:1em;
    margin-top:0;
}

#main1 a:link{
    text-decoration:underline;
    color: #000000;
}

#main1 img {
    float:left;
    margin:1em;
    border-radius: 50%;
}

footer {
    background-color:#FFFFFF;
    text-align:center;
    z-index: 0;
    flex-shrink: 0;
    margin-top:2em;
}

footer p {
    margin-bottom:0;
}

footer a:link{
    text-decoration:underline;
    color: #000000;
}

#footerdiv {
    align-self: center;
    width:95%;
    margin:auto;
    border-top: 1px solid black;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(6em,1fr));
}

#copyright {
    color:#CCCCCC;
    text-align:right;
    margin-top:0;
    margin-bottom:5px;
    padding-right:1em;
}

#homehero {
    height:450px;
    width:100%;
	background-image: url('img/pexels-ruiyang-zhang-3717242.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    font-size:2em;
    color:white;
    text-shadow: -1px 1px 2px #000,-1px 1px 2px #000,-1px 1px 2px #000,-1px 1px 2px #000;
    z-index: -1;
}

#homehero h2 {
    padding-left:60px;
    padding-top:50px;
    margin-bottom:0;
    margin-top:0;
}

#homehero p {
    padding-top:.75em;
    padding-left:80px;
    padding-right:70px;
    margin-top:0;
    font-size:1em;
}

#civhero {
    height:200px;
    width:100%;
	background-image: url('img/pexels-thisisengineering-3862379.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    font-size:2em;
    color:white;
    text-shadow: -1px 1px 2px #000,-1px 1px 2px #000,-1px 1px 2px #000,-1px 1px 2px #000;
    z-index: -1;
    background-position: 0% 40%;
}

#civhero h2 {
    padding-left:60px;
    padding-top:50px;
    margin-bottom:0;
    margin-top:0;
}

#civhero p {
    padding-top:.75em;
    padding-left:80px;
    padding-right:70px;
    margin-top:0;
    font-size:1em;
}

#strhero {
    height:200px;
    width:100%;
	background-image: url('img/pexels-anete-lusina-4792483.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 60%;
    font-size:2em;
    color:white;
    text-shadow: -1px 1px 2px #000,-1px 1px 2px #000,-1px 1px 2px #000,-1px 1px 2px #000;
    z-index: -1;
}

#strhero h2 {
    padding-left:60px;
    padding-top:50px;
    margin-bottom:0;
    margin-top:0;
}

#strhero p {
    padding-top:.75em;
    padding-left:80px;
    padding-right:70px;
    margin-top:0;
    font-size:1em;
}

#surhero {
    height:200px;
    width:100%;
	background-image: url('img/surveying-equipment-2871066_1920.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 40%;
    font-size:2em;
    color:white;
    text-shadow: -1px 1px 2px #000,-1px 1px 2px #000,-1px 1px 2px #000,-1px 1px 2px #000;
    z-index: -1;
}

#surhero h2 {
    padding-left:60px;
    padding-top:50px;
    margin-bottom:0;
    margin-top:0;
}

#surhero p {
    padding-top:.75em;
    padding-left:80px;
    padding-right:70px;
    margin-top:0;
    font-size:1em;
}

#pc {
    display:inline
}

@media only screen and (max-width:1024px) {
    #logo{
        display:none
    }
}

@media only all and (max-width:823px) {
    #wrapper {
        padding-top:0em;
    }

    #homehero {
        font-size:1.75em;
        height: 316px;
    }

    #civhero {
        font-size:1.75em;
        height:300px;
    }

    #strhero {
        font-size:1.75em;
        height:300px;
    }

    #surhero {
        font-size:1.75em;
        height:300px;
    }

    #navbar {
        position: relative;
    }

    nav {
        display: block;
        padding:0px;
    }

    nav a:link {
        display:block;
        margin-right:0px;
        padding-top:.2em;
        padding-bottom:.2em;
    }

    #pc {
        display:none
    }
}