/*
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
-------------------------------------------------------------- */
body {
 padding-top: 139px!important;
 background-color: #ddd7ca;
}

.logogrootte {
 width: 200px;
}

.bg-menu {
 background-color: #ddd7ca;
}

.offcanvas {
 background-color: #ddd7ca;
}

.offcanvas-title {
 color: #000000;
}

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

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

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

.bg-home {
 background-image:url(img/bewustrundvleeshome.jpg);
 min-height: 600px;
 background-size: cover;
 background-position: center center;
}

.bg-home h1, .bg-home p, .bg-home a, .afbeeldingknop a, .afbeeldingknoprechts a, .knoppentekst p, .nav-link, .paginatitel, .offcanvas-title, .vleespakketten h3, .contactinfo, .contactformuliertitel {
 font-family: "Philosopher", sans-serif;
 font-weight: 400;
 font-style: normal;
}

.homefotoblokhoogte {
 min-height: 600px;
 margin-bottom: 0px;
}

.hometekst {
 text-shadow: 2px 2px 5px black;
}

.centreerverticaal {
 display: block;
 align-content: center;
}

.wp-block-buttons .wp-block-button__link {
 border-radius: 0px;
}

.groeprelative > div {
 position: relative;
}

.afbeeldingknop {
 position: absolute;
 left: 0;
 bottom: 10px;
 width: 100%;
 justify-content: center;
}

.afbeeldingknoprechts {
 position: absolute;
 left: 0;
 bottom: 10px;
 width: 100%;
 justify-content: center;
}

.afbeeldingknoprechts a {
 background-color: transparent;
 font-size: 1.3rem;
}

.afbeeldingknoprechts a:after {
 content:"";
 height:36px; 
 width:100%;
 background:url("img/logobewustrundvleesonderkantbeige.png");
 display: block;
 background-repeat: no-repeat;
 background-size: contain;
}


.contactinfo {
 list-style-type: none;
}

.contactinfo a {
 color: #212529;
 text-decoration: none;
}

.telicon, .emailicon{
 position: relative;
}

.telicon:before {
 content: "\f095";
 position: absolute;
 right: calc(100% + 5px);
 font-family: 'FontAwesome';
}

.emailicon:before {
 content: "\f0e0";
 position: absolute;
 right: calc(100% + 5px);
 font-family: 'FontAwesome';
}

.contactinfomidden > div {
 justify-content: center;
 align-items: center;
}

.paginalogo {
 position: relative;
}

.paginatitel {
 font-size: 42px;
 position: relative;
 margin-top: 150px;
}

.paginatitel:before {
 background-image:url(img/logobewustrundvleesbovenkant.png);
 background-repeat: no-repeat;
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
 content: "";
 width: 250px;
 aspect-ratio: 5/2.7;
 background-position: center;
 background-size: 100% 100%;
}

.paginatitel:after {
 background-image:url(img/logobewustrundvleesonderkant.png);
 background-repeat: no-repeat;
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%);
 content: "";
 width: 250px;
 aspect-ratio: 52/1;
 background-position: center;
 background-size: 100% 100%;
 margin-top: 5px;
}

.reserverenimg {
 margin-top: 50px!important;
}

.knoppentekst {
 display: flex;
 justify-content: center;
}

iframe {
 width: 100%;
}

.footerlogo {
 width: 100px;
}

.vleespakkettendatum {
 list-style-type: none;
}

.vleespakkettendatumicon {
 position: relative;
}

.vleespakkettendatumicon:before {
 content: "\f133";
 position: absolute;
 right: calc(100% + 5px);
 font-family: 'FontAwesome';
}

.besteldatum {
 position: relative;
 aspect-ratio: 1/1;
 display: grid;
 place-items: center;
 width: 100%;
 max-width: 300px;
 margin-left: auto;
 margin-right: auto; 
}

.besteldatum p {
 color: #fff;
}

.besteldatumtekst {
 margin-bottom: 0px!important;
 margin-top: 30px!important;
}

.besteldatum:before {
 content: "";
 position: absolute;
 background-image: url(img/bestelkalender.png);
 background-size: cover;
 width: 100%;
 height: 100%;
 z-index: 0;
}

.besteldatum > div {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    z-index: 1;
    padding: 45% 15% 15% 15%;
}


@media screen and (max-width: 575px) {
.besteldatum p {
 font-size: 18px!important;
}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
.besteldatum p {
 font-size: 22px!important;
}
}

@media screen and (max-width: 781px) {
 .kolommenmarge {
 margin-bottom: 0px;
 }
}

@media screen and (min-width: 782px) {
 .bg-pagina {
 height: calc(100vh - 139px);
}
}