#home div.flex-2, #home div.flex-3 {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

#home div.flex-3 div, #home div.flex-2 div div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .5s;
    opacity: 0.8;
}

#home div.flex-3 div:hover div,
#home div.flex-3 div:focus div,
#home div.flex-2 div:hover div,
#home div.flex-2 div:focus div{
    transform: scale(1.1);
    transition: all .5s;
    opacity: 1;
}

#home div.flex-3 div {
    flex-basis: 33.3333%;
    overflow: hidden;
    height: 350px;
}

#home div.flex-2 div {
    flex-basis: 50%;
    overflow: hidden;
    height: 400px;
}

#home img {
    height: 350px;
    opacity: 0.8;
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}

#home div div:hover img {
    opacity: 1;
    transform:scale(1.15);
}

#home h2 {
    position: relative;
    left: 20px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    color: #FFF;
    transition: transform 0.5s ease 0s;
    transform: translate3d(0px, 40px, 0px);
    padding-right: 20px;
}

#home div div:hover h2 {
    transform: translate3d(14px, 6px, 0px);
    text-decoration: underline;
    text-decoration-color: black;
}

#home a {
    text-decoration: none;
}

/* POST */

#container article h1 {
    font-size: 2.6em;
    font-weight: 300;
    line-height: 1.3em;
    text-align: center;
    margin-bottom: 50px;
    padding: 0px;
    color: #583F48;
    font-style: normal;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-rendering: optimizelegibility;
    margin-bottom: 15px;
}

.post_map {
    height: 400px;
    width: 100%;
}

/* END POST */

@media only screen and (max-device-width : 1280px) {
    #home img.flex-3 {
        height: 250px;
    }
    #home img.flex-2 {
        height: 300px;
    }
}

/* iPad in landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

}

/* iPad in portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    #home div.flex-3 {
        height: 250px;
    }
    #home img.flex-3 {
        height: 250px;
    }

    #home div.flex-2 {
        height: 300px;
    }
    #home img.flex-2 {
        height: 300px;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #home div.flex-3 {
        display:block;
    }

    #home div.flex-2 {
        display:block;
    }

    .justify-image {
        text-align: center;
    }

    .justify-image a {
        margin: 0;
    }

    .justify-image img {
        width: 100%;
    }

}

/* gallery */
.clear {
    clear: both;
}
.haere-gallery {
    max-width: 960px;
    margin: auto;
}
.haere-gallery img {
    object-fit: cover;
}
.haere-gallery-2 img {
    height: 460px;
    width: 460px;
}
.haere-gallery-3 img {
    height: 300px;
    width: 300px;
}
.haere-gallery-4 img {
    height: 220px;
    width: 220px;
}
.haere-gallery-5 img {
    height: 172px;
    width: 172px;
}
.justify-image {
    margin: auto;
}

.justify-image figure {
    display: inline-block;
}

.justify-image a{
    text-decoration: none;
    display: inline-block;
    margin: 10px;
}

.justify-image img {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.pswp {
    z-index: 9999999;
}
/* end gallery */

/* comments */
#comments {
    text-align: left;
}

#comments ol {
    list-style-type: none;
}

.comment {
    margin-bottom: 25px;
    border-bottom: 1px solid #DDD;
    padding: 5px;
}

.comment-avatar {
    float: left;
}

.comment-body {
    padding-left: 95px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
}

.comment-body-author {
    font-size: 20px;
}

.comment-body-date {
    font-size: 14px;
}

.comment-text p {
    margin: 5px 0;
}

.avatar {
    border-radius: 50%;
}
/* end comments */

/* comment form */
#comment{
    border: 1px solid #DDD;
    max-width: 940px;
    width: calc(100% - 22px);
    padding: 10px;
}

.form-submit {
    text-align: center;
}

.form-submit input#submit {
    color: #56646F;
    border: 2px solid #DCDCDC;
    padding: 10px;
    background-color: #F0F0F0;
}

#author, #email {
    border: 1px solid #DDD;
    width: 100%;
    padding: 10px;
}

#email {
    margin-left: -22px;
}

.comment-form-author, .comment-form-email {
    width: 46%;
    margin-bottom: 10px;
}

.comment-form-author {
    float: left;
}

.comment-form-email {
    float: right;
}
/* end comment form */

/* pagination */
.navigation.pagination h2 {
    display: none
}

.navigation.pagination {
    margin: auto;
    max-width: 960px;
    margin-bottom: 30px;
}

.navigation.pagination .page-numbers {
    padding: 10px 15px;
}

.navigation.pagination a {
    text-decoration: none;
    color: #56646F;
}

.navigation.pagination a.page-numbers:hover {
    background-color: white;
}

.navigation.pagination a:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
}

.navigation.pagination a.next:before {
    content: "\f04e";
}

.navigation.pagination a.prev:before {
    content: "\f04a";
}

.navigation.pagination .nav-links {
    text-align: center;
}

.navigation.pagination .current {
    background-color: #DCDCDC;
    adding: 12px 15px;
}
/* pagination */

.navigation.post-navigation .nav-links{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.navigation.post-navigation a {
    color: #56646F;
    text-decoration: none;
}

.navigation.post-navigation .nav-previous:hover {
    background-color: white;
}

.navigation.post-navigation .nav-next:hover {
    background-color: white;
}

.navigation.post-navigation .nav-next a:after,
.navigation.post-navigation .nav-previous a:before{
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
}

.navigation.post-navigation .nav-next a:after {
    padding-left: 5px;
    content: "\f04e";
}

.navigation.post-navigation .nav-previous a:before {
    padding-right: 5px;
    content: "\f04a";
}

.navigation.post-navigation {
    max-width: 960px;
}

.screen-reader-text {
    display: none;
}

/* Haere */

body {
    height: auto;
    min-height: 100%;
    color: #56646F;
    line-height: 26px;
}

#container article {
    margin: 0px auto 50px;
}

#container article header > img {
    max-width: 100%;
}

#container article header {
    margin-bottom: -5px;
}

.sub_content {
    display: flex;
    flex-direction: column;
}

.sub_content p,
.sub_content blockquote,
.sub_content ol,
.sub_content ul,
.sub_content h1,
.sub_content h2,
.sub_content h3,
.sub_content h4,
.sub_content h5,
.sub_content h6,
.sub_content pre,
.sub_content dl,
.sub_content figure,
.sub_content code {
    max-width: 700px;
    margin: 10px auto;
}

.sub_content p, .sub_content blockquote, .sub_content ol, .sub_content ul {
    font-family: "Roboto",sans-serif;
    font-size: 18px;
    background: white;
    padding: 18px 5px;
}

.sub_content figure img {
    max-width: 100%;
}

#container article h1 {
    font-size: 2.6em;
    font-weight: 300;
    line-height: 1.3em;
    text-align: center;
    margin-bottom: 50px;
    padding: 0px;
    color: #583F48;
    font-style: normal;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-rendering: optimizelegibility;
    margin-bottom: 15px;
}

#container article h1 a {
    text-decoration: none;
    color: #583F48;
}

article footer {
    text-align: center;
    max-width: 960px;
    margin: 10px auto;
}

article footer span {
    margin-right: 20px;
}

article footer span a {
    color: #56646F;
    text-decoration: none;
}

article footer span.fa:before {
    margin-right: 5px;
}

img.alignleft {
    float: left;
    margin: 10px 10px 10px 0px;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

img.alignright {
    float: right;
    margin: 10px 0px 10px 10px;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

img.aligncenter {
    height: auto;
    max-width: 100%;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
    margin: auto;
    display: block;
}

.wp-video {
    margin: auto;
}