/*
Theme Name: Stack Child
Theme URI: http://www.tommusrhodus.com/stack-wordpress-theme
Description: Child theme for the Stack theme
Author: <a href="http://www.tommusrhodus.com">Tom Rhodes</a>
Author URI: http://www.tommusrhodus.com
Template: stack
Version: 10.0.0
*/

@import url('../stack/style.css');


/*************
*
* LAYOUT CHANGES
*
**************/

/********************************
* ZigZag-Layout for bloglist
*/

/* Only make the posts zigzag on larger display */
@media screen and (min-width: 768px) {
  .masonry-blog-list article {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
  }

  /* 50/50 Layout */
  .masonry-blog-list article > div {
    flex: 0 0 50%;
    padding: 2% !important;
  }

  /* Make every odd-element reversed */
  .masonry-blog-list article:nth-of-type(odd) {
    flex-direction: row-reverse;
  }

  /* Featured Posts are fullwidth */
  article[data-featured="featured-post"] {
    display: block;
  }

}

/* Reduce padding between posts a little */
.masonry-blog-list article {
    padding-top: 2em;
}

/* Left align excerpt */
.masonry-blog-list article .article__body p {
  text-align: left;
}

/* Remove Offset for Blog List */
.home .col-md-offset-2, .archive .col-md-offset-2, .blog .col-md-offset-2 {
  width: 100%;
  margin-left: 0;
}

/* RewardStyle positioning */
.post-reward-style {
    margin-top: 35px;
}

/* Align pagination below posts */
.home .pagination, .archive .pagination {
    padding-left: 35px;
    padding-right: 35px;
}

/* Homepage - reduce default padding on top */
.home .main-container .container:first-of-type {
    padding-top: 0 !important;
}

/* Remove border below articles in list-layout */
.masonry-blog-list article {
  border: none;
}

/********************************
* Post Meta Display Customizations
*/

.post-meta {
  margin-bottom: 2em;
}

.post-meta .post-date {
  font-family: Courier, monospace;
  font-size: 1em;
  margin-bottom: 1em;
  line-height: 1.75em;
}

.post-meta .post-category {
  display: inline-block;
  margin: auto;
  margin-right: -150px;
}

.post-meta .post-category a:last-of-type {
  padding-right: 75px;
}

.post-meta .post-category a {
  color: inherit;
  font-family: "Antro Vectra";
  font-size: 1.75em;
  line-height: 1.5;
  font-weight: lighter;
}

.post-meta .post-category::after {
  display: block;
  content: "";
  height: 1px;
  background: #000;
  top: -1.15em;
  position: relative;
}

@media screen and (max-width: 768px) {
  .article__thumbnail {
    margin-bottom: 2.5em;
  }

  .menu-item {
      text-align: center;
      padding: .5em;
      font-size: 15px;
  }


  .dropdown__container ul li {
      font-size: 12px;
      padding: 0em;
  }

  .dropdown__content {
      padding: 1em !important;
  }
}

/********************************
* Header Customizations
*/

.bar-stacked .logo {
  margin-bottom: 0;
}

.bar.bar--lg {
  padding: 1.5em;
}

@media screen and (min-width: 768px) {
  .home bar-stacked#menu6 {
    position: absolute !important;
  }
	
  ul#menu-hauptmenue {
    display: flex;
  }

  .home .nav-container {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 999;
  }



  .home .bar:not(.bg--light):not(.pos-fixed) .menu-horizontal > li > span,
  .home .bar:not(.bg--light):not(.pos-fixed) .menu-horizontal > li > a {
    color: white;
    opacity: 1;
  }

  .home .bar:not(.bg--light):not(.pos-fixed) .logo-dark {
    display: none;
  }
  .home .bar:not(.bg--dark):not(.pos-fixed) .logo-light {
    display: inline;
  }

}

.menu-horizontal > li:not(:hover) > a, .menu-horizontal > li:not(:hover) > span {
  opacity: 1;
}


/* Divide Elements to left and right */
@media screen and (min-width: 768px) {
  ul#menu-hauptmenu {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .menu-item {
    display: inline-block;
    padding: 0 10px;
    text-transform: uppercase;
    font-size: 1.15em;
  }

  .menu-item:nth-of-type(5) {
    margin-left: auto;
  }
}

/* Top Bar & Search Styling */
.header--top-bar .text-right {
    float: right;
    padding-right: 25px;
}

.header--top-bar {
    position: absolute;
    right: 0;
    left: 0;
}

.bar-3 ul.menu-horizontal {
    z-index: 999;
    font-size: 1.25em;
}

.search-box {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(60, 60, 60, 0.98);
}

.search-box form {
    width: 100%;
}

.search-box input[type="search"] {
    background: transparent;
    color: #fafafa;
    border-color: #fafafa;
    font-size: 3em;
    font-family: "Playfair Display";
    font-weight: lighter;
}

.notification .notification-close-cross:before {
    color: white;
    font-size: 5em;
}

@media screen and (max-width: 768px) {
  .header--top-bar {
    display: none;
  }
}

/********************************
* Footer Customizations
*/

footer.space--sm {
  padding-top: 0;
  padding-bottom: 0;
}

footer.space--sm .container {
  padding-top: 2em !important;
  padding-bottom: 2em !important;
}

footer .widget_text {
    padding-top: 25px;
}

/* Instagram Footer */
.instagram-header {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
}
.instagram-header .instagram-heading {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 3em;
  display: table;
  margin: auto;
  margin-bottom: .5em;
}
.instagram-header .instagram-heading::after {
  display: block;
  content: "";
  height: 3px;
  background: #000;
}

/* Hover effect for instagramm feed */
a.sbi_photo {
    opacity: 1 !important;
}
.sbi_photo_wrap .sbi_photo::before {
    content: "";
    display: block;
    opacity: 0;
    background: rgba(51, 51, 51, 0.25);
    width: 100%;
    height: 100%;
    transition: opacity .3s;
}
.sbi_photo_wrap:hover .sbi_photo::before {
    opacity: 1;
    transition: opacity .3s;
}


/********************************
* Single Page
*/

/* Add default padding to pages */
.page .main-container .container:first-of-type {
  padding-top: 100px;
}
.page .main-container .container {
  padding: 50px 0;
}
.single-page .instagram-feed {
  padding-top: 100px;
}

/* Single page header */
.styled-page-header h1 {
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: .25em;
    font-size: 2em;
}

.styled-page-header {
    text-align: center;
    margin-bottom: 100px;
}

.styled-page-header h1::after {
    display: block;
    content: "";
    height: 2px;
    background: #000;
    top: .15em;
    position: relative;
}

.styled-page-header h3 {
    text-transform: lowercase;
    font-family: "Courier", monospace;
    font-size: 1.25em;
}

/********************************
* Single Post
*/

/* No Box Shadow */
.box-shadow-wide {
  box-shadow: none;
}

/* Reduce first section padding on top */
.single-page .main-container section:first-of-type,
.single-post .main-container section:first-of-type {
    padding-top: 3.5em;
}
/* Remove first padding on mobile entirely */
@media screen and (max-width: 768px) {
  .single-page .main-container section:first-of-type,
  .single-post .main-container section:first-of-type,
  .home .main-container section:nth-of-type(2) {
      padding-top: 0;
  }
}

/* Fix featured image position */
.single-post .featured-image-holder {
  margin: 0 auto 50px;
}
.single-post .featured-image-holder img {
  width: 100%
}

.post-content {
  max-width: 900px;
  margin: auto;
}

/* Make post-content justified */
.post-content p {
    text-align: justify;
}

/* Floated images get 50% width in order to get the content to float to the other side */
img.alignleft, img.alignright {
    width: 50%;
}

/* Galeries - 2-column-layout with special scaling for second image */
.gallery img {
  border: none !important;
  padding: 15px;
}

@media screen and (min-width: 768px) {
  .gallery-columns-2 .gallery-item:nth-of-type(2) {
    transform: scale(.85);
  }
}

@media screen and (max-width: 767px) {
  .gallery-columns-2 .gallery-item {
    width: 100% !important;
  }

  .gallery img {
    padding: 0;
  }
}

/* Related Heading customizations */
h3.related-heading {
    position: relative;
    display: inline-block;
    font-size: 2.5em;
}

h3.related-heading:after {
    display: block;
    content: "";
    height: 1px;
    background: #000;
    top: -.75em;
    position: relative;
    transform: scaleX(1.5);
    transform-origin: left;
}

/* Related Posts Display */
.feature__body.related-info {
    padding: 1.5em;
    text-align: center;
}
.feature__body.related-info .date {
    font-family: "Courier", monospace;
    font-weight: lighter;
}

/* Post navigation */
.post-navigation {
    max-width: 600px;
    margin: auto;
    border-bottom: none;
}
section:not(.imagebg):not([class*='bg-']) + section.bg--secondary {
    border-top: none;
}
.post-navigation .feature-7 {
    height: 20em;
}

/* Comments */
.comments__list li {
    background: none !important;
    border: none !important;
}

.bg--secondary.related-container {
    background: #fff;
    padding-bottom: 0;
}

.single-post .post-reward-style {
    margin: .5em 0 5em;
}

.single-post-social-share {
    margin-bottom: 5em;
}

/********************************
* Presseartikel
*/

.press-info {
    text-align: center;
    padding: 2.5em;
}

.press-title {
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: .5em;
}

.press-title::after {
    content: "";
    display: block;
    height: 2px;
    background: #000;
}

.press-info .date {
    font-family: "Courier", monospace;
}

h1.center-title {
    text-align: center;
    margin: 1.25em 0 1.25em;
}

/*************
*
* TYPOGRAPHY
*
**************/

/********************************
* Antro Vecrtra custom font
*/
@font-face {
  font-family: 'Antro Vectra';
  src: url('fonts/antro-vectra/antro_vectra-webfont.woff2') format('woff2'),
  url('fonts/antro-vectra/antro_vectra-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/********************************
* Helper Classes
*/

.handwritten {
  font-family: "Antro Vectra";
}

/* Adds a line below with padding to the right */
.line-below-spacing-right {
  display: inline-block;
}
.line-below-spacing-right::after {
  content: "";
  display: block;
  height: .025em;
  background: #000;
  width: calc(100% + 50px);
  margin-top: -.25em;
}


/********************************
* Pagination
*/

.pagination a {
  font-size: 3em;
  font-family: "Antro Vectra";
  text-transform: lowercase;
}

/********************************
* Read More Links
*/


article a.read-more-link {
  font-family: "Antro Vectra", serif;
  font-size: 2em;
  color: inherit;
  text-transform: lowercase;
  font-weight: lighter;
}

/********************************
* Links within posts
*/

p a, span a, label a {
  text-decoration: none;
  font-weight: inherit;
  color: inherit;
}

p a:hover, span a:hover, label a:hover, a:hover {
  font-weight: inherit;
  text-decoration: none;
  color: inherit;
}

.post-content a {
  font-weight: bold;
}

a {
  color: inherit;
}

/********************************
* Page title styling
*/

.article__body h2, .post-title, .single .article__title h1 {
  display: table;
  margin: 0 auto 30px;
  text-transform: uppercase;
}

.article__body h2::after, .article__title h1::after {
  position: relative;
  top: 10px;
  display: block;
  content: "";
  height: 2px;
  background: black;
  width: 100%;
  margin: auto;
}

.single section:first-of-type:not(.bar-3) .container {
  background: #f5f5f5;
  width: 100%;
  padding: 50px;
}

/*************
*
* PLUGINS
*
**************/

/********************************
* SassySocialShare
*/

ul.heateor_sss_sharing_ul {
    display: flex;
    justify-content: center;
    padding: 15px;
    left: 0 !important;
}
.heateorSssEmailBackground {
    margin-left: 200px !important;
    position: relative;
}

.heateorSssEmailBackground::before {
    display: inline !important;
    content: 'send to a friend' !important;
    width: 100px !important;
    font-size: 13px !important;
    position: absolute !important;
    left: -100px;
    line-height: 2;
}

.heateorSssEmailSvg {
    display: inline-block !important;
}

.heateor_sss_sharing_container.heateor_sss_horizontal_sharing {
    margin-top: 35px;
}
.heateor_sss_sharing_container {
    width: 100%;
    left: 0 !important;
}

/* Fix Reward Style sometimes being to wide*/
.shopthepost-widget {
    max-width: 520px;
    margin: auto;
}

[data-pin-log="button_pinit_floating"] {
    z-index:9 !important;
}

[data-pin-log="button_pinit_floating"] {
    z-index: 9 !important;
    background: url('http://www.lesfactoryfemmes.com/wp-content/uploads/2018/02/PIN-IT-01.png') !important;
    width: 400px !important;
    height: 100px !important;
    background-position: center;
    background-size: contain !important;
    box-shadow: none !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
}

body:not(.single-post) [data-pin-log="button_pinit_floating"] {
  display: none;
}

body.home [data-pin-log="button_pinit_floating"] {
  display: block;
}

.single-post img:hover, .home img:hover  {
    filter: brightness(70%);
    transition: filter .5s;
}

.single-post img, .home img {
    transition: filter .5s;
}