/* Homepage + Blog Page Blogs */
.moduleButton.blogButton { background: #5C636B; }
.moduleButton.blogButton a { color: #FFF; text-decoration: none; }

#blogListings { width: calc(100% - 20px); max-width: 1900px; margin: 20px auto; padding: 0 0 0 20px; }
#blogHome { text-align: center; }
#blogPage .blogCard { width: calc((100% - 60px) / 3); margin: 0 20px 20px 0; float: left; }
#blogHome .blogCard { width: 100%; margin: 0; float: left; text-align: left; }

#blogPage h2.listingsHeader, #blogHome h2.listingsHeader { margin-top: 0; }
#blogPage .blogImage, #blogHome .blogImage { width: 100%; height: 200px; background-size: cover !important; position: relative; }
#blogPage .blogImage a, #blogHome .blogImage a { width: 100%; height: 100%; display: block; }
#blogPage .blogHeadline, #blogHome .blogHeadline { background: #5C636B; padding: 0; font-weight: 700; line-height: 20px; height: 70px; position: relative; border-bottom: 5px solid #4B4F54; }
#blogPage .blogInfo, #blogHome .blogInfo { position: absolute; bottom: 12px; right: 12px; width: calc(100% - 24px); }
#blogPage .blogHeadline a, #blogHome .blogHeadline a { text-decoration: none; color: #FFF; }
#blogPage .blogMore, #blogHome .blogMore { margin-top: 5px; font-size: 12px; line-height: 16px; font-weight: 400; color: #FFF; }
#blogPage .moreBlogs, #blogHome .moreBlogs { display: none; }

.blogGallery { display: flex; flex-wrap: wrap; }
.galleryImage { width: calc(50% - 20px); margin: 0 20px 20px 0; position: relative; }
.galleryImage.even { margin-right: 0; }
.galleryImage a { display: block; background: rgba(75, 79, 84, .4); color: #FFF; padding-bottom: 66.6%; }
.galleryImage a:hover { background: none; transition: 1s; }
.galleryImage a > .photoCaption { position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); text-align: center; font-weight: 700; }

iframe.instagram-media { }

.fancybox-caption { font-family: 'Muli', sans-serif; }

/* Search */
.headerSearch { margin-bottom: 25px; }
.headerSearch input { border: 0; color: #000; background: rgba(255, 255, 255, .75); padding: 10px; font-size: 13px; font-family: Muli, sans-serif; width: 50%; min-width: 220px; }
.headerSearch ::-webkit-input-placeholder { color: rgba(0, 0, 0, .75); }
.headerSearch button { background:#A80B7A; border: 0; color: #FFF; padding: 9px 11px 10px; font-size: 17px; cursor: pointer; }
.moreBlogsButton { width: calc(100% - 20px); }
.moreBlogsButton a { font-family: Oswald, sans-serif; font-size: 30px; line-height: 40px; font-weight: 300; text-transform: uppercase; border: #AAA 2px solid; display: block; padding: 2px 10px; border-radius: 20px; color: #AAA; text-decoration: none; width: calc(100% - 24px); max-width: 400px; margin: 30px auto; text-align: center; cursor: pointer;  }
.moreBlogsButton a:hover { background: #AAA; color: #FFF; }

/* Right Column */
#pageRight { margin-right: 20px; text-align: center; }
#pageRight.altRight { margin-right: 0; }
#pageRight h3 { margin-top: 0; }
#pageRight a.button { font-family: Oswald, sans-serif; font-size: 18px; line-height: 30px; font-weight: 300; text-transform: uppercase; border: #AAA 2px solid; display: block; padding: 2px; border-radius: 10px; color: #AAA; text-decoration: none; width: calc(100% - 8px); margin: 10px auto; text-align: center; }
#pageRight a.button:hover { background: #AAA; color: #FFF; }

@media screen and (max-width: 1380px) {
  #blogPage .blogCard { width: calc((100% - 40px) / 2); margin: 0 20px 20px 0; float: left; }
}

@media screen and (max-width: 980px) {
  #blogPage .blogCard { width: calc(100% - 20px); margin: 0 20px 20px 0; float: left; }
}

@media screen and (max-width: 800px) {
  #pageRight { width: calc(100% - 20px); }
}

@media screen and (max-width: 640px) {
  .galleryImage { width: 100%; margin: 0 0 20px; position: relative; }
}