:root {
    --oi-green: #15540d;
    --font-color-dark: black;
    --font-color-light: #dbdbdb;
}
body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin:0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
p {
    margin: 0;
}

.header-wrapper {
    height: clamp(50px, 20vh, 90px);
    border-bottom: 1px solid black;
}
header {
    display: grid;
    grid-template-columns: clamp(180px,15vw,250px) 1fr;
    height: 100%;
    width: 90%;
    margin: 0 auto;
}
.header-logo-wrapper {
    padding: 5px;
}
.header-logo {
    height: 99%;
}
.header-logo > a > img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    z-index: 100;
}
.header-nav-wrapper {
    position: relative;
    overflow: hidden;
}
.header-nav-positioning {
    position: absolute;
    bottom: clamp(5%,20%,30%);
    margin-left: 20px;
    width: 100%;
}
.header-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.header-nav > .nav-item {
    margin: 0 clamp(5px,18px,18px);
    white-space: nowrap;
}
.nav-item a {
    color: var(--oi-green);
    text-decoration: none;
}


.sticky-footer {
    flex: 1;
}
.footer-wrapper {
    background-color: var(--oi-green);
    color: var(--font-color-light);
}
footer {
    padding: 5px 0;
}
.footer-copyright {
    margin: 0 auto;
    width: fit-content;
    font-size: 0.8em;
}
.vertical-horizontal-center{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}






.page-bg-img{
    overflow:hidden;
    position:relative;
    height: 300px;
    background: url(/img/pivot1.jpg);
    background-size:cover;
    background-color: var(--oi-green);
}
.slogan{
    color:white;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left:80px;
}
.slogan h1{
    font-size:45px;
    margin:0;
}
.slogan h1:last-of-type {
    padding-top: 6px;
}
.slogan h4 {
    margin: 0;
}
.slogan hr {
    margin: 15px 0;
    border-color: white;
}





.error-wrapper{
    min-height:200px;
    min-width:350px;
    width: 40vw;
    max-width: 600px;
}
.error-content{
    text-align: center;
    width:100%;
}
.error-content > h1{
    font-size: 3.5rem;
    margin:0;
}
.error-content > hr{
	width:99%;
}