:root {
    --primary: #008ac4;
    --primary-sh1: #00648f;
    --primary-sh2: #00405c;
    --secondary: #878787;
    --secondary-light: #bababa;
    --text: #000;
    --background: #fff;
}

*, html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
    color: var(--secondary);
}

header {
    background-color: var(--background);
    min-height: 100px;
    padding-top: 1rem;
}

main {
    background-color: var(--background);
    min-height: calc(100vh - 380px);
}

footer {
    background-color: var(--secondary-light);
    min-height: 100px;
}


/* HEAD SECTION */
.navigation {
    padding-top: 1rem;
    padding-bottom: 1rem;

    color: var(--secondary);
    font-size: 1.25rem;
}

.navelement {
    transition: ease-in-out 0.2s;
    cursor: pointer;
}

.navelement:hover, .navelement:active, .navelement:focus {
    color: var(--primary);
    text-shadow: 2px 2px 4px var(--secondary-light);
}

.navdist {
    margin-left: 1.5rem;
}



/* MAIN SECTION */
.main {
    padding-top: 4rem;
    padding-bottom: 4rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}

.hero {
    width: 100%;
    background-image: url(../images/main-hero-bg.jpg);
    background-repeat: none;
    background-size: cover;
    height: 960px;
}

.herocontent {
    height: 100%;
}

.herobox {
    padding: 2rem;
    padding-top: 480px;
    vertical-align: bottom;
    width: 60%;
    color: var(--background);
    text-shadow: 2px 2px 4px var(--text);
    translate: -2rem;
}

.subpage {
    padding-top: 4rem;
    padding-bottom: none;
    display: grid;
}

.maintext {
    line-height: 150%;
    padding-bottom: 1rem;
}

.confirm {
    width: 80%;
    font-size: 85%;
}

.minipics {
    padding-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.nopad {
    padding-top: 0;
}

.sendbutton {
    background-color: var(--primary);
    color: white;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--primary);
    border-radius: 5px;
    transition: ease-in-out 0.2s;
}

.sendbutton:hover, .sendbutton:active, .sendbutton:focus {
    border: 1px solid var(--primary-sh2);
    background-color: var(--primary-sh1)
}

.zoomable {
    transition: ease-in-out 0.5s;
}

.zoomable:hover {
    scale: 1.3;
    box-shadow: 0.2rem 0.2rem 0.5rem var(--text);
}

.form-control {
    font-size: 1rem;
    padding: 0.25rem;
}

input[type=checkbox] {
    width: 1.25rem;
}

#fullname, #emailaddr, #phonenum {
    width: 40%;
}

#message {
    width: 95%;
}

#store {
    display: none;
}

li {
    transform: translateX(1rem);
}


/* FOOTER SECTION */
.footer {
    padding-top: 2rem;
    padding-bottom: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4rem;
}

.footercontent {
    font-size: 0.8rem;
    line-height: 125%;
}

.footercontent > a {
    color: var(--text);
}




/* Globals */
h1 {
    font-size: 6rem;
    text-shadow: 5px 5px 9px var(--text);
}

h2 {
    padding-top: 1rem;
    font-size: 1.4rem;
    line-height: 1.8rem;
}

h3 {
    color: var(--primary);
    padding-bottom: 1rem;
}

.highlighttext {
    color: var(--primary);
    font-weight: bold;
}

.imgfluid {
    width: 100%;
}

.maxwidth {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.subpagehead {
    color: var(--primary);
}

#logooutset {
    translate: -46px;
}