/*   
Theme Name: Sander Foederer fotografie
Author: De Zagerij ontwerpbureau
Template: esteem
Version: 1.0
*/

/* Apply basic typography styles */
@import url('../esteem/style.css');
@import url('responsive.css');

/* Import font */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap');
@import url('../esteem/fontawesome/css/font-awesome.css');


/* algemene lay-out aanpassingen */
#primary {
	position: relative;
}

body {
	background-color: #f2f2f2; /* onder- en bovenkant korte pagina */
}

#page {
	box-shadow: none;
	background-color: #f2f2f2;
}

.home .site-header {
  	border-bottom: 0;
}

#masthead {
  	padding-bottom: 35px;
}

.entry-content {
  	padding-top: 0;
}

.page-template-over .entry-content {
  	padding-top: 10px !important;
}

#main {
  	padding-top: 30px;
}

#outline {
	width: 80% !important;
	max-width: 878px;
	height: calc(100vh - 50px) !important;
	height: -o-calc(100vh - 50px) !important; /* opera */
	height: -webkit-calc(100vh - 50px) !important; /* google, safari */
	height: -moz-calc(100vh - 50px) !important; /* firefox */
    border: 2px solid #335946;
    position: relative;
    top: 50px;
  	left: 50%;
  	transform: translate(-50%); 
  	margin-bottom: -5000px; /* Om de verticale lijn tot helemaal beneden door te laten lopen */
	padding-bottom: 5000px; /* Om de verticale lijn tot helemaal beneden door te laten lopen */	
}

#kader {
	position: absolute;
	top: -26px;
	left: -26px;
}

#site-title {
	text-transform: lowercase;
}
  
#site-title a {
	color: #335946 !important;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 400 !important;
	font-size: 24px !important;
	line-height: 34px !important;
	position: fixed;
	top: 5px;
	left: 10px;
}

.page-template-over a:hover {
   color: #b1c2b6 !important;
}

/* typografie */
body,
button,
input,
select,
textarea {
	color: #335946;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
	color: #335946;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
}

.wp-element-caption {
	color: #335946;
	font-family: 'IBM Plex Sans', sans-serif;
}

/* navigatie */
.lang-item {
  	padding-top: 20px;
}

.nav-menu > ul > li > a, .menu > ul > li > a {
  line-height: 47px;
  height: 45px;
  color: #335946;
}

.main-navigation ul li {
  font-size: 18px;
}

.main-navigation ul li:last-child {
  padding-right: 0;
}

.hgroup-wrap-right {
  padding-top: 20px;
}

.hgroup-wrap {
  max-width: 878px !important;
  margin: 0 auto;
  width: 85% !important;
}

/* animatie hover */
.main-navigation ul li a:after {
    transition: all ease-in-out .2s;
    background: none repeat scroll 0 0 #335946;
    content: "";
    display: block;
    height: 2px;
    width: 0;
}

.main-navigation ul li a:hover:after {
    width: 100%;
}

.main-navigation ul li:last-child a:after {
  	height: 0 !important;
}

/* actief menu */
.main-navigation li.current_page_item a:after,
.main-navigation li.current-menu-item a:after, /* Actief menu bij single page */
.main-navigation ul .current-page-ancestor a:after /* Actief menu zonder dat het in menu staat maar slechts als subpagina */ {
    content: '';
    background: #335946;
    width: 100%;
    display: block;   
    height: 2px;
}

/* post grid */
.rt-tpg-container .rt-tpg-isotope-buttons button {
	background: #f2f2f2;
  	border: 1px solid #335946;
  	border-radius: 5px;
  	color: #335946;
}

.rt-tpg-container .rt-tpg-isotope-buttons button:hover {
	background: #b1c2b6;
}


.rt-tpg-isotope-buttons .selected {
  	background-color: #b1c2b6 !important;
}

.rt-tpg-container .tpg-iso-filter {
  margin: 0 0 45px !important;
}

.rt-tpg-container .rt-tpg-isotope-buttons button {
  padding: 6px 15px !important;
}

/* berichtenpagina */
:where(.is-layout-flex) {
  gap: 0em;
}

.wp-block-button {
	border: 1px solid #335946;
  	border-radius: 5px;
  	color: #335946;
  	font-size: 15px;
	line-height: 1.8;
	margin: 4px !important;
	padding: 6px 15px;
	background: #f2f2f2;
}

.wp-block-button-actief {
	border: 1px solid #335946;
  	border-radius: 5px;
  	color: #335946;
  	font-size: 15px;
	line-height: 1.8;
	margin: 4px !important;
	padding: 6px 15px;
	background: #b1c2b6;
}

.wp-block-button:hover {
	background: #b1c2b6;
}

.single #content {
	padding-top: 0px;
}

.wp-embed-aspect-16-9.wp-has-aspect-ratio {
	margin: 45px 0;
}

.slider-pro,
.single .wp-block-image {
	margin: 45px 0;
}

.sp-bottom-thumbnails .sp-thumbnail-container {
  margin-right: 10px;
  margin-bottom: 10px;
}

.sp-thumbnail-container {
	margin-top: 10px;
}

.sp-arrow {
 	width: 10px !important;
}

.sp-thumbnail-arrow {
  	width: 10px;
}

.sp-bottom-thumbnails .sp-next-thumbnail-arrow {
  	right: 7px;
}

.sp-bottom-thumbnails .sp-previous-thumbnail-arrow {
  	left: 7px;
}

.single #primary p,
.single #primary h2,
.page-template-over .entry-content,
.page-template-over #primary h2,
.sp-caption-container {
	width: 78% !important;
	max-width: 878px;
  	margin: 0 auto;
}

.page-template-over iframe {
	max-width: 765px;
  	position: relative;
  	left: 50%; 
	transform: translateX(-50%);
 }
 
 /* footer naar onderkant pagina verplaatsen bij korte pagina's
----------------------------------------------- */
#main {
	min-height: calc(100vh - 430px);
}

/* footer */
#colophon .widget-wrap.inner-wrap,
#site-generator.inner-wrap {
	width: 77% !important;
	max-width: 858px !important;
  	margin: 0 auto;
  	padding-left: 10px;
  	padding-right: 10px;
  	position: relative;
}

.text-widget p {
	width: 77% !important;
	max-width: 858px !important;
  	margin: 0 auto;
}

#colophon {
	border-top: 0 !important;
	background: #e1e6e3;
	color: #335946;
}

#colophon a {
	color: #335946 !important;
}

#colophon a:hover {
   color: #b1c2b6 !important;
}

#site-generator {
  border-top: 0;
  color: #335946;
}

#site-generator a {
  color: #335946;
  text-decoration: underline;
}

#site-generator a:hover {
   color: #b1c2b6 !important;
}