/*
 Theme Name:   Westervier
 Theme URI:    -
 Description:  Thema voor Westervier gebaseerd op Illdy
 Author:       Lelivero Design
 Author URI:   https://leliverodesign.nl
 Template:     illdy
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         e-commerce, portfolio
 Text Domain:  illdy-child
*/

:root {
  --font-main: 'Open Sans', sans-serif;
  --font-header: 'Noto Sans TC', sans-serif;
  --color-primary: #030323;
  --color-primary-trans: rgba(3, 3, 35, 0.8);
  --color-secondary: #cccccc;
  --color-tertiary: #999;
}

body {
  font-family: var(--font-main);
  color: var(--color-primary);//#000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-header);
  font-weight:500;
  color: var(--color-primary);//#000;
}

#header.header-blog {
  /* background-attachment: scroll !important; */
}


#header .top-header .header-logo {
  font-family: var(--font-header);
  font-weight:400;
}

#header .is-sticky .top-header .header-logo {
  font-size: 28px;
  line-height: 35px;
}

@media (max-width: 768px) {
  #header .top-header .header-logo {
    font-size: 40px;
  }
}

#header .top-header .header-logo:hover {
  color: var(--color-secondary);
}

#header .top-header .header-logo.isDisabled:hover {
  color: #fff;
}

@media only screen and (max-width: 992px) {
  .responsive-menu {
      margin-top: 0;
  }
}

#header .is-sticky .top-header .header-navigation > ul {
  margin-top: 0px;
}

#header .top-header .header-navigation ul li {
  font-family: var(--font-header);
  font-weight: 500;
}

#header .top-header .header-navigation ul li:hover a {
  color: var(--color-secondary);
}

#header .bottom-header h1 {
  font-family: var(--font-header);
  font-weight:500;
}

#header .bottom-header.blog {
  height: 220px;
}

#header .bottom-header h1,
#header .bottom-header h2 {
  font-size: 65px;
  line-height: 70px;
  margin-top: 60px;
}

#header .top-header {
  background-color: var(--color-primary);
  padding: 8px;
}

#header .bottom-header.front-page,
#header .bottom-header.blog {
  padding-top: 0;
  padding-bottom: 0;
}

.markup-format a {
  color: var(--color-primary)
}

#blog .blog-post .blog-post-title {
  color: var(--color-primary);
}

#blog .blog-post .blog-post-title:hover {
  color: var(--color-tertiary);
}

.blog-post-image {
  overflow: hidden;
}

#blog .blog-post .blog-post-image {
  display: flex;
  /* align-items: center; */
  overflow: hidden;
  height: 350px;
}

@media only screen and (max-width: 1200px) {
  #blog .blog-post .blog-post-image {
    height: 285px;
  }
}

@media only screen and (max-width: 991px) {
  #blog .blog-post .blog-post-image {
    height: 215px;
  }
}

@media only screen and (max-width: 767px) {
  #blog .blog-post .blog-post-image {
    height: auto;
    max-height: 475px;
  }
}

@media only screen and (max-width: 100px) {
  #blog .blog-post .blog-post-image {
    height: 350px;
  }
}



.blog-post-image img {
  transform: scale(1);
  transition-property: transform, filter, -webkit-filter;
  transition-duration: .3s, .3s, .3s;
  transition-delay: 0s, 0s, 0s;
}

.blog-post-image img:hover {
  transform: scale(1.06);
}

.bottom-footer {
  background-color: var(--color-primary);
}

.copyright, .copyright a {
  color: var(--color-secondary);
}

.copyright a:hover {
  color: #fff;
  text-decoration: none;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body #header {
  /* order: 1; */
}

body .container {
  /* min-width: 100%; */
  /* width: 100%; */
  flex: 1;
  /* order: 2; */
}

@media only screen and (max-width: 768px) {
  body .container {
    /* background-color: lightblue; */
    width: 100%;
  }
}

body .container .row {
  /* width: 100%; */
}

body .bottom-footer {
  /* order: 3; */
}

#wpadminbar {
  /* position: relative; */
  /* order: 0; */
}