@font-face {
    font-family: "Open Sans";
    src: url(../fonts/OpenSans-Regular.ttf)
}

html,
body {
    font: 16px/24px "Open Sans", sans serif;
    font-style: normal;
    font-variant: normal;
    height: 100%;
}

#fullpage {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

h1 { font-size: 26px; font-weight: 700; line-height: 28.4px; }
h2 { font-size: 23px; font-weight: 700; line-height: 24.4px; }
h3 { font-size: 20px; font-weight: 700; line-height: 22.4px; }
h4 { font-size: 16px; font-weight: 700; line-height: 18.4px; }
p { font-size: 16px; font-weight: 400; line-height: 20px; text-align: justify; text-justify: auto; }
a { font-size: 16px; font-weight: 400; line-height: 20px; color: #072F26; text-decoration: none; }
blockquote { font-size: 14px; font-weight: 700; line-height: 20px; }
pre { font-size: 13px; font-weight: 400; line-height: 18.5714px; }
figcaption { font-size: 14px; font-weight: 700; line-height: 20px; }

/* ------ Site Header styling ------ */
.site-header {
    width: 100%;
    height: 100px;
    color: #072F26;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header-body {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 1;
}

.site-header-body h1 {
    text-shadow: 2px 2px 4px #C7DDDA;
}

.site-header-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.site-header-menu-item {
    width: 100px;
}

.site-header-menu-item h4 {
    margin: 0px;
}

/* ------ Page Header styling ------ */
.page-header {
    display: flex;
    flex-direction: column;
}
.page-header h3 {
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 10px;
}
.page-header h4 {
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 10px;
}

main {
    flex: 1;
}

article h2 {
    max-width: 750px;
    margin: 0 auto;
    padding-top: 1em;
    padding-bottom: 10px;
}
article h3 {
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 10px;
}
article h4 {
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 10px;
}

article p {
    max-width: 750px;
    margin: 0 auto;
    margin-top: 1em;
    padding-bottom: 1em;
    padding-left: 3em;
    padding-right: 3em;
}

article blockquote {
    margin: 0px;
    padding-left: 12%;
    padding-right: 12%;
    background-color: #C7DDDA;
}

article > figure {
    margin: 0px;
    margin-bottom: 1em;
}

article > figure h4 {
    margin-top: 1em;
}

.columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.svgmap {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.svgmap svg {
    width: 100%;
    height: 50vh;
    margin: 1em;
}

.trip-entries {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.trip-entry {
    height: 180px;
    position: relative;
    margin: 5px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 8px;
    max-width: 240px;
    overflow: hidden;
}

/*
  We override the image to have it 'fill' out the above list entry if it isn't a perfect 4:3 aspect ratio
  This will crop the image - this is preferrable to having whitespace in the image.
*/
.trip-entry picture img {
    object-fit: cover;
    height: 100%;
}

@media only screen and (max-width:600px) {
    .trip-entry {
        height: 90px;
        position: relative;
        margin: 5px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        border-radius: 8px;
        max-width: 120px;
        overflow: hidden;
    }
    .trip-entry-content p {
        display: none;
    }   
}

.trip-entry a {
    display: block;
    height: 100%;
}
.trip-entry picture {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    border-radius: 8px;
}
.trip-entry-content {
    float: left;
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding-left: 5px;

    color: white;
    text-shadow: 2px 2px 4px #000000;
}
.trip-entry-content h4 {
    margin: 0px;
    font-size: 16px;
}
.trip-entry-content p {
    margin-top: 0px;
    margin-bottom: 5px;
    padding-left: 0em;
    font-weight: 200;
    font-size: 14px;
}

/* Styling for images across the articles.
   Use the hugo 'figure' directive to include a title underneath by default */
figure {
    position: relative;
    text-align: center;
}
figure img {
    max-height: 30vh;
    max-width: 100% !important;
    height: auto !important;
}
figure figcaption h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

/* ------ Page Footer styling ------ */
.page-footer {
    display: flex;
    flex-direction: row;
    padding: 5px;
}
.page-footer div {
    display: flex;
    font-size: 14px;

    -webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
}
.page-footer p {
    font-size: 14px;
}
.page-footer a {
    font-size: 14px;
}
.page-footer .previous {
    align-items: center;
    justify-content: left;
}
.page-footer .center {
    align-items: center;
    justify-content: center;
}
.page-footer .next {
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
}

/* ------ Site Footer styling ------ */
.site-footer {
    background-color: #072F26;
    color: white;
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-footer-body {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    flex: 1;
}

.site-footer-body h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    margin: 15px;
}
.site-footer-body p {
    font-size: 14px;
    font-weight: 300;
    line-height: 14px;
    margin: 5px;
}
.site-footer-body a {
    font-size: 14 px;
    color: #C7DDDA;
}
.site-footer-copyright {
    font-size: 10px;
    text-align: center;
}
.site-footer-copyright a {
    font-size: 10px;
    color: #C7DDDA;
}