html, body {
margin: 0;
border: 0;
padding: 0;
font-family: "Open Sans", "Helvetica", sans;
font-size: 2vmin;
background-color: #C8C8C8;
color: #434244;
}

div.sidebyside {
display: table-cell;
}

#navpane {
margin: 0;
padding: 0;
background-color: #434244;
text-transform: uppercase;
}

#wrapper {
width: 17vw;
min-height: 95vh;
}

#navpane > a {
display: inline-block;
margin: 0;
padding: 0;
}

#navpane #logo {
width: 100%;
}

#navpane ul {
display: block;
list-style: none;
margin: 0;
padding:0;
}

#navpane ul li {
padding: 0;
margin: 0;
border-bottom: solid #2B2A2B 1px;
}

#navpane ul li:first-child {
border-top: solid #2B2A2B 1px;
}

#navpane li a {
display: block;
text-decoration: none;
margin: 0;
padding: 1em 1em 1em 1em;
text-align: center;
color: #E5E3E8;
}

#navpane li a:hover {
background-color: #535254;
}

#content {
width: 100%;
vertical-align: top;
background-color: #ffffff;
padding-bottom: 2em;
}

#content > * {
padding-left: 3%;
padding-right: 3%;
}

img {
max-width: 100%;
}

img.header {
width: 100%;
padding: 0 !important;
}

#footer {
margin: 0;
border-top: solid 1px #ff8200;
padding: 1px;
text-align: center;
background-color: #C8C8C8;
font-size: 80%;
}

.alert {
background: #FFE931;
border: solid #FFE931 1px;
border-width: 2em 1px 1px 1px;
margin: -2em 0 0 0;
font-size: 120%;
}

div.table {
display: table;
border-collapse: separate;
width: 94%; /* 100% - 3% padding on each side */
}

div.row {
display: table-row;
}

div.cell {
display: table-cell;
padding: 0 1em 0 1em;
margin: 0;
width: 50%;
}
div.cell:first-of-type {
padding-left: 0;
}
div.cell:last-of-type {
padding-right: 0;
}
div.cell > * {
/* Compensate for margin collapsing that doesn't occur with the div */
margin-top: 0;
}

h1 {
font-weight: 600;
line-height: 1.5;
letter-spacing: 0px;
font-style: normal;
text-transform: uppercase;
text-align: center;
}

h1:after{
content: "";
display: block;
position: relative;
left: 50%;
margin-left: -2.5em;
width: 5em;
bottom: 0;
border-bottom: solid 0.1em #ff8200;
}

h2 {
font-weight: 600;
line-height: 1.5;
letter-spacing: 0px;
font-style: normal;
}

h2:after{
content: "";
display: block;
position: relative;
left: 0;
width: 2em;
bottom: 0;
border-bottom: solid 0.1em #ff8200;
}

h3, h4, h5, h6 {
line-height: 1.5;
}

a.button {
display: inline-block;
margin-top: 1.5em;
margin-bottom: 0.8em;
color: #eeeeee;
text-decoration: none;
font-weight: bold;
background-color: #ff8200;
padding: 0.6em 1.5em;
min-width: 10em;
border: solid #B85E00 0.2em;
border-radius: 0.4em;
}

iframe.map {
margin: 0 !important;
padding: 0 !important;
height: 80vh;
width: 100%;
}

.blogdate {
font-style: italic;
font-size: 90%;
}
/* Video embeds */
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* For the contact form */
#contactform * {
margin: 0;
}
input, textarea {
width: 100%;
border: solid #ff8200 0.1em;
border-radius: 0.2em;
background-color: #FFEBD7;
font-family: "Open Sans";
font-size: 100%;
margin: 1em 0;
}
div.contact div.cell {
width: auto;
}

/* For small screens - keep it readable */
@media (max-width: 500px) {
    html, body {
    font-size: 2.5mm;
    }

    #wrapper {
    width: 7em;
    }

    div.table {
    display: block;
    }

    div.row {
    display: block;
    }

    div.cell {
    display: block;
    margin: 0;
    width: auto;
    }
    div.cell > * {
    /* Compensate for margin collapsing that doesn't occur with the div */
    margin-top: 0;
    }
}