/*
Theme Name: Get Praut
Theme URI: https://getpraut.nl/
Description: Get Praut - Thema
Author: Get Praut
Author URI: https://getpraut.nl/
Version: 1.0
*/

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone{margin:0}
.aligncenter,div.aligncenter{display:block;margin:5px auto 5px auto}
.alignright{float:right;margin:0 0 15px 15px}
.alignleft{float:left;margin:0 15px 15px 0}
.aligncenter{display:block;margin:5px auto 5px auto}
a img.alignright{float:right;margin:0 0 15px 15px}
a img.alignnone{margin:0}
a img.alignleft{float:left;margin:0 15px 15px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption.alignnone{margin:0}
.wp-caption.alignleft{margin:0 15px 15px 0}
.wp-caption.alignright{margin:0 0 15px 15px}
.wp-caption img{border:0 none;height:auto;margin:0;max-width:100%;padding:0;width:auto}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

/* Custom CSS
-------------------------------------------------------------- */
.bg-home {
 background-image: url(img/dorpsraadwesterhoven.jpg);
 background-size: cover;
 min-height: 100vh;
}

.logogrootte {
 width: 200px;
}

.paginalogobreedte {
width: 200px;
}

.home .paginalogomenu {
display: none;
}

.home .navbar-brand {
display: block!important;
}

.home .navbar-brand h3{
    display: none;
}

.page .navbar-brand, .category .navbar-brand, .single .navbar-brand {
display: none;
}

.page h1 {
 margin-top: 30px;
}

nav.navbar .navbar-toggle-icoon > div
 {
    height: 2px;
    width: 100%;
    background-color: #333333;
}

nav.navbar .navbar-toggle-icoon
 {
    display: flex;
    flex-flow: column wrap;
    gap: 8px;
    width: 25px;
}

nav.navbar .navbar-toggler {
 border: none;
}

nav.navbar .btn-close {  
   opacity: 1;
   filter: invert(0%);
}

.navbar>.container {
 display: grid;
 grid-template-columns: auto auto auto;
}

.socialmediaicons li
 {
  list-style: none;
  padding: 4px;
}

.home-layout{
	padding-left: 0px;
	padding-right:0px;
	max-height: calc(100vh - 90px);
}

.home-layout > div {
 display: grid;
grid-template-columns: 1fr; 

}

.home-logo {
 order: 1;
}

.home-logo > div {

}

.fixed-layer > div{
	position: static;
	top: 50%;
    left: 0%;
	display: grid;
    justify-content: center;
	grid-template-columns: 1fr; 
	width: 100%;
	z-index: 0;
}

.logo-wrapper {
	width: 100%;
}

.content-left {
 order: 2;
 border-left: 6px solid #efc130;
 border-right: 6px solid #efc130;
}

.content-left > div {
 display: grid;
 grid-template-rows: 1fr 1fr 1fr 1fr;
 height: 100%;
}

.content-right {
 order: 3;
 border-left: 6px solid #8c0000;
 border-right: 6px solid #8c0000;
}

.content-right > div {
 display: grid;
 grid-template-rows: 1fr 1fr 1fr 1fr;
 height: 100%;
}

.content-left, .content-right{
	position: relative;
	z-index: 1;
    overflow: hidden;
}

.content-left > div > div, .content-right > div > div {
 display: grid;
 justify-items: center;
 align-items: center; 
}

.blokgeel {
 background-color: #efc130;
}

.blokrood {
 background-color: #8c0000;
}

.blokhoogte a {
 color: #000000;
 text-decoration: none;
}

.blokgeel a, .blokrood a {
 color: #ffffff;
}

.blokhoogte {
 transition: transform .3s;
}

.blokhoogte:hover {
 transform: scale(1.05);
}

.bg-menu {
 border-bottom: 6px solid #001aa2;
}

.page #breadcrumbs {
 margin-top: 30px;
}

.btn-custom {
 background-color: #001aa2;
 color: #ffffff;
}

.btn-custom:hover {
  background-color: #001aa2;
  color: #ffffff;
}

.socialmediaicons i {
 font-size: 24px;
}

.socialmediaicons ul {
        display: flex;
        flex-direction: row;
        padding-inline-start: 0px !important;
        margin-bottom: 0px;
}

@media only screen and (min-width: 768px){
    .home .navbar-brand h3{
        display: block;
    }
}

@media only screen and (max-width: 1199px){
 .content-left {
 border-top: 6px solid #efc130;
 }
 .content-right {
 border-bottom: 6px solid #8c0000;
}
}

@media only screen and (min-width: 1200px){
    .home-layout > div {
        display: grid;
        grid-template-columns: 400px 1fr 400px; 
        height: calc(100vh - 74px);
    }

    .fixed-layer > div{
        position: fixed;
        justify-content: unset;
        grid-template-columns: 400px 1fr 400px; 
        -webkit-transform: translateY( -50%);
        transform: translateY( -50%);
    }

    .logo-wrapper {
        grid-column: 2;
    }

    .content-left {
        order: 1;
    }

    .home-logo {
        order: 2;
    }
}