/*
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
-------------------------------------------------------------- */
@font-face{
    font-family:'Comfortaa';
    src: url("fonts/comfortaa/Comfortaa-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family:'Comfortaa';
    src: url("fonts/comfortaa/Comfortaa-Regular.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family:'Comfortaa';
    src: url("fonts/comfortaa/Comfortaa-Bold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root{

    /*kleuren*/
    --gp-blue: #2d2e83;
    --gp-blue-50:#FDFDFF;
    --gp-blue-100:#FAFAFF;
    --gp-blue-200:#B2BBDF;
    --gp-blue-600:#1E1E4F;

    --gp-light-blue:#36a9e1;
    --gp-light-blue-50:#F5FCFF;
    --gp-light-blue-100: #EBF8FF;
    --gp-light-blue-600: #0F2D3B;

    --gp-orange: #f39200;
    --gp-orange-50: #FFFCF8;
    --gp-orange-100: #FFF8ED;
    --gp-orange-600: #382100;

    --gp-green: #95c11f;
    --gp-green-50: #FCFFF6;
    --gp-green-100: #FAFFED;
    --gp-green-600: #313F0A;

    --gp-purple: #662483;
    --gp-purple-50: #FDF8FF;
    --gp-purple-100: #F9EBFF;
    --gp-purple-600: #341243;

    --gp-pink:#e6007e;
    --gp-pink-50:#FFFBFD;
    --gp-pink-100:#FFEAF5;
    --gp-pink-600:#35001D;


    /*shadows*/
    --gp-shadow-blue-light: hsl(from var(--gp-blue-200) h s l / 40%);

    /*color-gradients*/
    --gp-clr-all-hard-hor: linear-gradient(to right, var(--gp-blue) 16.66%, var(--gp-light-blue) 16.66%, var(--gp-light-blue) 33.33%, var(--gp-purple) 33.33%, var(--gp-purple) 49.99%, var(--gp-orange) 49.99%, var(--gp-orange) 66.66%, var(--gp-green) 66.66%, var(--gp-green) 83.32%, var(--gp-pink) 83.32%);
    --gp-clr-all-hard-vert: linear-gradient(to bottom, var(--gp-blue) 16.66%, var(--gp-light-blue) 16.66%, var(--gp-light-blue) 33.33%, var(--gp-purple) 33.33%, var(--gp-purple) 49.99%, var(--gp-orange) 49.99%, var(--gp-orange) 66.66%, var(--gp-green) 66.66%, var(--gp-green) 83.32%, var(--gp-pink) 83.32%);

    /*tekst*/
	/*font-kleuren wit*/
	--font-clr-white-100: hsl(0deg 0% 100% / 1);
	--font-clr-white-90: hsl(0deg 0% 100% / 0.9);
	--font-clr-white-80: hsl(0deg 0% 100% / 0.8);
	--font-clr-white-70: hsl(0deg 0% 100% / 0.7);
	--font-clr-white-60: hsl(0deg 0% 100% / 0.6);
	--font-clr-white-50: hsl(0deg 0% 100% / 0.5);
	--font-clr-white-40: hsl(0deg 0% 100% / 0.4);
	--font-clr-white-30: hsl(0deg 0% 100% / 0.3);
	--font-clr-white-20: hsl(0deg 0% 100% / 0.2);
	
	/*font-kleuren zwart*/
	--font-clr-black-100: hsl(0deg 0% 0% / 1);
	--font-clr-black-90: hsl(0deg 0% 0% / 0.9);
	--font-clr-black-80: hsl(0deg 0% 0% / 0.8);
	--font-clr-black-70: hsl(0deg 0% 0% / 0.7);
	--font-clr-black-60: hsl(0deg 0% 0% / 0.6);
	--font-clr-black-50: hsl(0deg 0% 0% / 0.5);
	--font-clr-black-40: hsl(0deg 0% 0% / 0.4);
	--font-clr-black-30: hsl(0deg 0% 0% / 0.3);
	--font-clr-black-20: hsl(0deg 0% 0% / 0.2);
	
	/*font-families*/
	--comfortaa:"Comfortaa", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" ;
    --open-sans:"Open Sans", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" ;
    --allura:"Allura", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

	/*font grotes*/
	font-size:20px;
	
	--font-size-xxxl: 3em;
	--font-size-xxl: 2.5em;
	--font-size-xl: 2em;
	--font-size-lg: 1.5em;
	--font-size-md: 1em;
	--font-size-sm: 0.8em;
	
	/*spacing*/
	--spacing-xxxl: 6.778rem;
	--spacing-xxl: 4.236rem;
	--spacing-xl: 2.618rem;
	--spacing-lg: 1.618rem;
	--spacing-md: 1rem;
	--spacing-sm: 0.618rem;
	--spacing-xs: 0.382rem;
}

/*recduce motion if set in browser*/
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/*headings and other text related*/

h1, h2, h3, h4, h5, h6{ 
    font-family: var(--comfortaa);
    color: var(--gp-blue);
    font-weight: 600;
}

/*heading colors*/
.oranje{ color: var(--gp-orange);}

.groen{ color: var(--gp-green);}

.roze{ color: var(--gp-pink);}

.licht-blauw{ color: var(--gp-light-blue);}

p{ font-family: var(--open-sans);}

.underline{ text-decoration: underline;}

ul.no-marker{
    list-style-type: none;
    padding-left: 0px;
}

.comfortaa{ 
    font-family: var(--comfortaa);
    color: var(--font-clr-black-50);
}

.huge-txt.huge-txt{ font-size: 7em!important;}

body{    
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--gp-blue-100);
}


/*main menu*/
header nav > .container{
    background-color: var(--gp-blue-50);
    box-shadow: 0px 0px 1px var(--gp-shadow-blue-light), 2px 4px 12px var(--gp-shadow-blue-light);
    border-radius: 8px;
    padding: 12px;
    margin-top: 0.5em;
}

header nav > .container .navbar-toggler{ border: none;}

header nav .navbar-brand{ padding: 0px;}

header nav .navbar-brand img{ 
    width: 150px;
    padding: 0px;
}

header nav .offcanvas{
    background-color: var(--gp-blue-50);
    border-radius: 20px 0px 0px 20px;
}

header nav .offcanvas .offcanvas-body{ justify-content: flex-end;}

header nav .offcanvas .navbar-nav{ padding-bottom: var(--spacing-md);}

header nav .navbar-nav li.menu-item a{ 
    font-family: var(--open-sans);
    position:relative;
    left: 0px;
    transition: left 200ms cubic-bezier(0.34, 2, 0.64, 1);
}

header nav .navbar-nav li.menu-item a:hover{ left: 5px;}

header nav .navbar-nav li.menu-item.active a{ color: hsl(from var(--gp-light-blue) h s calc(l - 15));}

header nav .navbar-nav li.menu-item .dropdown-menu { 
    border: none; 
    padding: 10px 8px;
}

header nav .navbar-nav li.menu-item.dropdown.active a{ color: initial;}

header nav .navbar-nav li.menu-item.dropdown li.menu-item.active a{ color: hsl(from var(--gp-light-blue) h s calc(l - 15));}

header nav .navbar-nav li.menu-item .dropdown-menu li{ position: relative;}

header nav .navbar-nav li.menu-item .dropdown-menu li::before{
    content:'-';
    position: absolute;
    top: 5px;
    left: 0px;
}

header nav .navbar-nav li.menu-item .dropdown-menu a{
    position: relative;
    left: 0px;
    transition: left 200ms cubic-bezier(0.34, 2, 0.64, 1);
}

header nav .navbar-nav li.menu-item .dropdown-menu a:hover{
    background-color: unset;
    left: 5px;
}

header nav .navbar-nav li.menu-item .dropdown-menu a:focus{ color: unset;}

/*footer*/

footer { margin-top:auto; /*houdt de footer beneden op pagina's met weinig content*/}

footer a{
    color: var(--font-clr-white-100);
    text-decoration: none;
}

footer .footer-info{
    background-color: var(--gp-blue);
    color: var(--font-clr-white-80);
    padding: var(--spacing-md) var(--spacing-sm);
}

footer .footer-nav > .row{  height: 100%;}

footer .footer-nav > .row > a:first-child{ border-radius: 20px 20px 0px 0px;}

footer .footer-nav > .row > a{
    display: grid;
    place-items: center;
    position: relative;
    min-height: 175px;
    background: url('/wp-content/uploads/2026/03/Get-Praut-Maatwerk-IT-Bladel-Drukwerk-en-websites-bouwen.avif');
    color: var(--font-clr-white-100);
    text-decoration: none;
    font-family: var(--comfortaa);
    object-fit: cover;
    background-size: 900px;
    background-position: center;
    transition: background-size 300ms;
}

footer .footer-nav > .row > a:hover{ background-size: 1200px;}

footer .footer-nav > .row > a::before{
    content:'';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: hsl(from var(--gp-light-blue) h s l / 0.6);
    backdrop-filter: grayscale(1);
    z-index:1;
}

footer .footer-nav > .row > a:first-child::before{ border-radius: 20px 20px 0px 0px;}

footer .footer-nav > .row > a:nth-child(2){
    background: url('/wp-content/uploads/2026/03/Get-Praut-Maatwerk-IT-dagbesteding-de-Kempen-contact-opnemen.avif');
     background-size: 900px;
    background-position: top center;
    transition: background-size 300ms;
}

footer .footer-nav > .row > a:nth-child(2):hover{ background-size: 1200px;}

footer .footer-nav > .row > a:nth-child(2)::before{  background-color: hsl(from var(--gp-orange) h s l / 0.6);}

footer .footer-nav > .row > a > div{
    position: relative;
    z-index: 2;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

footer .footer-nav > .row > a:hover > div{ transform: scale(1.2);}

/*socials*/
.socials ul{
    display: flex;
    flex-direction: row;
    gap: 8px;
    list-style-type: none;
    padding-left: 0px;
    margin-top: 24px;
    margin-bottom: 0px;
}

.socials ul li{ 
    font-size: 1.6em;
    margin-bottom: 0px;
}

footer ul li{ margin-bottom: 0.4em;}

/*icons list*/
ul.iconfy{
    list-style-type: none;
    padding-left: 30px;
}

ul.iconfy li{ position: relative;}

ul.iconfy li::before{
    content: '';
    font-family: FontAwesome;
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    color: var(--font-clr-white-100);
    text-align: center;
}

ul.iconfy li.list-mail-icoon::before{ content: '\f0e0';}

ul.iconfy li.list-telefoon-icoon::before{ content: '\f3ce';}

ul.iconfy li.list-adres-icoon::before{ content: '\f3c5';}

/*header-spacing*/
.header-white-space{ height: 129px;}

/*home banner*/
.get-praut-banner-home{ 
    background-image: url('img/Get-Praut-Maatwerk-IT-de-Kempen-banner-home-SVG.svg');
    background-size: cover;
}

/*tekst*/
.get-praut-banner-home h1, .get-praut-banner-home h2{ color: var(--gp-blue);}

.get-praut-banner-home h1{
    font-size: 2.5em;
    margin-top: 40px;
}

.get-praut-banner-home .luxe{
    font-family: var(--allura);
    font-size: 2em!important;
    font-weight: 200;
    margin-left: 0px;
    line-height: 0.6em;
}

.get-praut-banner-home h2{
    font-family: var(--open-sans);
    font-size: var(--font-size-lg);
}

.get-praut-banner-home h2 .banner-txt-klein{ font-size: 20px!important;}

/*video*/
.get-praut-banner-home .banner-laptop-prop{ display: none;}

.get-praut-banner-home #banner-video-wrap{
    display: block;
    max-width: 720px;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9.9;
    margin: 0px auto var(--spacing-md);
}

.get-praut-banner-home #banner-video-wrap .banner-video{
    width: 100%;
    height: 100%;
}

.get-praut-banner-home  #banner-video-wrap > div{ height: 100%;}

/*buttons*/
/*standard*/
.gp-standard-btn.gp-standard-btn.gp-standard-btn{
    --gp-btn-bg-clr:var(--_gp-btn-bg-clr, var(--gp-orange)) ;
    --gp-btn-bg-clr-sec: rgb(from var(--gp-btn-bg-clr) calc(r + 12) calc(g + 36) calc(b + 13));
    --gp-btn-bg-clr-sec-hvr: rgb(from var(--gp-btn-bg-clr-sec) r calc(g + 29) calc(b + 36));
    --gp-btn-shadow: var(--_gp-btn-shadow, var(--gp-orange-600));
    --gp-btn-txt-clr: var(--_gp-btn-txt-clr, var(--gp-blue));

    background-color: var(--gp-btn-bg-clr);
    position: relative;
    border-radius: 100vw;
    display: inline-flex;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 0px 0px 2px hsl(from var(--gp-btn-shadow) h s l / 40%), 2px 2px 2px hsl(from var(--gp-btn-shadow) h s l / 20%);
}

.gp-standard-btn.gp-standard-btn.gp-standard-btn:hover{
    background-color: var(--gp-btn-bg-clr-sec);
}

.gp-standard-btn a{
    color: var(--gp-btn-txt-clr);
    font-size: 0.8em;
    background-color: transparent;
    position: relative;
    z-index: 2;
}

.gp-standard-btn a{ padding: 10px 20px 10px 20px;}

.gp-standard-btn a::after{
    content: '→';
    position: relative;
    height: 100%;
    width: 30px;
    z-index: 2;
    align-self: center;
    margin-left: 8px;
}

.gp-standard-btn a[target=_blank]::after{ 
    content: '\f08e';
    font-family: FontAwesome;
    font-size: 16px;
}

/*alternative button colors*/
/*blue*/
.gp-standard-btn.gp-standard-btn.gp-standard-btn.--blue{
    --_gp-btn-bg-clr: var(--gp-blue) ;
    --_gp-btn-shadow: var(--_gp-blue-600);
    --_gp-btn-txt-clr: var(--font-clr-white-90);
}

/*light blue*/
.gp-standard-btn.gp-standard-btn.gp-standard-btn.--light-blue{
    --_gp-btn-bg-clr: var(--gp-light-blue) ;
    --_gp-btn-shadow: var(--gp-light-blue-600);
    --_gp-btn-txt-clr: var(--gp-light-blue-600);
}

/*light blue*/
.gp-standard-btn.gp-standard-btn.gp-standard-btn.--green{
    --_gp-btn-bg-clr: var(--gp-green) ;
    --_gp-btn-shadow: var(--gp-green-600);
    --_gp-btn-txt-clr: var(--gp-green-600);
}

/*purple*/
.gp-standard-btn.gp-standard-btn.gp-standard-btn.--purple{
    --_gp-btn-bg-clr: var(--gp-purple) ;
    --_gp-btn-shadow: var(--gp-purple-600);
    --_gp-btn-txt-clr: var(--font-clr-white-90);
}

/*pink*/
.gp-standard-btn.gp-standard-btn.gp-standard-btn.--pink{
    --_gp-btn-bg-clr: var(--gp-pink) ;
    --_gp-btn-shadow: var(--gp-pink-600);
    --_gp-btn-txt-clr: var(--gp-pink-600);
}

/*special menu button*/
.special-menu-btn{
    --gp-btn-bg-clr:var(--_gp-btn-bg-clr, var(--gp-orange)) ;
    --gp-btn-bg-clr-sec: rgb(from var(--gp-btn-bg-clr) calc(r + 12) calc(g + 36) calc(b + 13));
    --gp-btn-bg-clr-sec-hvr: rgb(from var(--gp-btn-bg-clr-sec) r calc(g + 29) calc(b + 36));
    --gp-btn-shadow: var(--_gp-btn-shadow, var(--gp-orange-600));
    --gp-btn-txt-clr: var(--_gp-btn-txt-clr, var(--gp-blue));

    background-color: var(--gp-btn-bg-clr-sec);
    position: relative;
    border-radius: 8px;
    display: inline-flex;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 0px 0px 2px hsl(from var(--gp-btn-shadow) h s l / 40%), 2px 2px 2px hsl(from var(--gp-btn-shadow) h s l / 20%);
}

.special-menu-btn:hover{ background-color: var(--gp-btn-bg-clr-sec-hvr);}

.special-menu-btn::before{
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    height: 100%;
    width: 100%;
    z-index: 2;
    mask-image: url('data:image/svg+xml,%3Csvg width=%22132%22 height=%2219%22 viewBox=%220 0 132 19%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M66 7.97256C55.0489 3.7334 27.5 -8.61328 0 9.88672V14.3864V18.8865H132V9.88645C113.227 22.4082 78.1244 13.1899 66 7.97256Z%22 fill=%22black%22/%3E%3C/svg%3E');
    mask-repeat: repeat-x;
    mask-size: 66.66% 65px;
    background-color: var(--gp-btn-bg-clr);
    transition: top 0.3s;
    animation-name: btn-golf;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.special-menu-btn:hover::before{ top: -70%;}

.special-menu-btn::after{
    content: '';
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 0px;
    width: 100%;
    z-index: 1;
    background-color: var(--gp-btn-bg-clr);
    transition: height 0.3s;
}

.special-menu-btn:hover::after{ height: 100%;}

.special-menu-btn a{
    color: var(--gp-btn-txt-clr);
    text-decoration: none;
    background-color: transparent;
    padding: 10px 25px 10px 31px;
    position: relative;
    z-index: 2;
}

@keyframes btn-golf{ 100% { mask-position: 200% 0px;}}


/*content bento blocks*/
.gp-bento-blocks-puzzle{
    --gp-block-bg-clr: var(--_gp-block-bg-clr, var(--gp-blue-50));
    --gp-block-heading-clr: var(--_gp-block-heading-clr, var(--gp-blue));
    --gp-block-shadow: var(--_gp-block-shadow, var(--gp-shadow-blue-light));
    --gp-block-img-overlay-clr: var(--_gp-block-img-overlay-clr, transparent);

    gap: 0px;
    flex-direction: column;
}

.gp-bento-blocks-puzzle .gp-bento-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding:var(--spacing-lg);
    border-radius: 20px;
    background-color: var(--gp-block-bg-clr);
    box-shadow: 2px 4px 4px var(--gp-block-shadow), 0px 0px 1px var(--gp-block-shadow);
}

.gp-bento-blocks-puzzle.switch-order .gp-bento-content{ order: 2;}

.gp-bento-blocks-puzzle .gp-bento-content::after{
    content: '';
    position: absolute;
    bottom: calc(100% - 30px);
    left: 50%;
    transform: translatex(-50%);
    width: 70px;
    height: 70px;
    border-radius: 9999px;
    background-color: inherit;
    z-index:1;
}

.gp-bento-blocks-puzzle.no-puzzle .gp-bento-content::after{ content: none;}

.gp-bento-blocks-puzzle.deco-line .gp-bento-content{ padding: 1.618rem 1.618rem calc(1.618rem + 10px);}

.gp-bento-blocks-puzzle.deco-line .gp-bento-content::before{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-radius: 0px 0px 20px 20px;
    width: 100%;
    height: 17px;
    background-image: var(--gp-clr-all-hard-hor);
    z-index: 2;
}

.gp-bento-blocks-puzzle .gp-bento-content h1, .gp-bento-blocks-puzzle .gp-bento-content h2,
.gp-bento-blocks-puzzle .gp-bento-content h3, .gp-bento-blocks-puzzle .gp-bento-content h4,
.gp-bento-blocks-puzzle .gp-bento-content h5,.gp-bento-blocks-puzzle .gp-bento-content h6{
    color: var(--gp-block-heading-clr);
}

/*afbeelding stuk*/
.gp-bento-blocks-puzzle .gp-bento-afb{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 2px 4px 4px var(--gp-block-shadow), 0px 0px 1px var(--gp-block-shadow);
}

.gp-bento-blocks-puzzle.switch-order .gp-bento-afb{ order: 1;}

/*overlay*/
.gp-bento-blocks-puzzle.img-overlay .gp-bento-afb::before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background-color: var(--gp-block-img-overlay-clr);
    opacity: 0.6;
    z-index: 1;
}

.gp-bento-blocks-puzzle.img-overlay .gp-bento-afb img{ filter: grayscale(1);}

.gp-bento-blocks-puzzle.img-overlay.--overlay-blue{ --_gp-block-img-overlay-clr: var(--gp-blue);}

.gp-bento-blocks-puzzle.img-overlay.--overlay-light-blue{ --_gp-block-img-overlay-clr: var(--gp-light-blue);}

.gp-bento-blocks-puzzle.img-overlay.--overlay-orange{ --_gp-block-img-overlay-clr: var(--gp-orange);}

.gp-bento-blocks-puzzle.img-overlay.--overlay-green{ --_gp-block-img-overlay-clr: var(--gp-green);}

.gp-bento-blocks-puzzle.img-overlay.--overlay-purple{ --_gp-block-img-overlay-clr: var(--gp-purple);}

.gp-bento-blocks-puzzle.img-overlay.--overlay-pink{ --_gp-block-img-overlay-clr: var(--gp-pink);}

/*de afbeelding zelf*/
.gp-bento-blocks-puzzle .gp-bento-afb figure{
    height: 100%;
    margin-bottom: 0px;
}

.gp-bento-blocks-puzzle .gp-bento-afb figure img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/*bento kleur varianten*/
/*bento blauw*/
.gp-bento-blocks-puzzle.--bento-clr-blue{
    --_gp-block-bg-clr: var(--gp-blue-100);
    --_gp-block-heading-clr: var(--gp-blue);
    --_gp-block-shadow: var(--gp-blue-200);
}

.gp-bento-blocks-puzzle.--bento-clr-light-blue{
    --_gp-block-bg-clr: var(--gp-light-blue-100);
    --_gp-block-heading-clr: var(--gp-light-blue-600);
    --_gp-block-shadow: hsl(from #aab0b5 h s l / 100%);
}

.gp-bento-blocks-puzzle.--bento-clr-orange{
    --_gp-block-bg-clr: var(--gp-orange-100);
    --_gp-block-heading-clr: var(--gp-orange-600);
    --_gp-block-shadow: hsl(from #bfb7ab h s l / 100%);
}

.gp-bento-blocks-puzzle.--bento-clr-green{
    --_gp-block-bg-clr: var(--gp-green-100);
    --_gp-block-heading-clr: var(--gp-green-600);
    --_gp-block-shadow: hsl(from #c0c3b7 h s l / 100%);
}

.gp-bento-blocks-puzzle.--bento-clr-purple{
    --_gp-block-bg-clr: var(--gp-purple-100);
    --_gp-block-heading-clr: var(--gp-purple-600);
    --_gp-block-shadow: hsl(from #aea1b3 h s l / 100%);
}

.gp-bento-blocks-puzzle.--bento-clr-pink{
    --_gp-block-bg-clr: var(--gp-pink-100);
    --_gp-block-heading-clr: var(--gp-pink-600);
    --_gp-block-shadow: hsl(from #bbb1b7 h s l / 100%);
}

/*Tweedelig bento content block*/
.gp-bento-double-content{
    --gp-block-bg-clr-major: var(--_gp-block-bg-clr-major, var(--gp-blue-50));
    --gp-block-bg-clr-minor: var(--_gp-block-bg-clr-minor, var(--gp-blue-50));
    --gp-block-heading-clr-major: var(--_gp-block-heading-clr-major, var(--gp-blue));
    --gp-block-heading-clr-minor: var(--_gp-block-heading-clr-minor, var(--gp-blue));
    --gp-block-text-clr-major: var(--_gp-block-text-clr-major, --font-clr-black-80);
    --gp-block-text-clr-minor: var(--_gp-block-text-clr-minor, var(--gp-blue));
    --gp-block-shadow: var(--_gp-block-shadow, var(--gp-shadow-blue-light));
    
    gap: 0px;
    flex-direction: column;
}

.gp-bento-double-content .gp-bento-content-major{
    padding:var(--spacing-lg);
    border-radius: 20px;
    background-color: var(--gp-block-bg-clr-major);
    box-shadow: 2px 4px 4px var(--gp-block-shadow), 0px 0px 1px var(--gp-block-shadow);
    color: var(--gp-block-text-clr-major);
}

.gp-bento-double-content .gp-bento-content-major h1, .gp-bento-double-content .gp-bento-content-major h2,
.gp-bento-double-content .gp-bento-content-major h3, .gp-bento-double-content .gp-bento-content-major h4,
.gp-bento-double-content .gp-bento-content-major h5, .gp-bento-double-content .gp-bento-content-major h6{
    color: var(--gp-block-heading-clr-major);
}

.gp-bento-double-content .gp-bento-content-minor h1, .gp-bento-double-content .gp-bento-content-minor h2,
.gp-bento-double-content .gp-bento-content-minor h3, .gp-bento-double-content .gp-bento-content-minor h4,
.gp-bento-double-content .gp-bento-content-minor h5, .gp-bento-double-content .gp-bento-content-minor h6{
    color: var(--gp-block-heading-clr-minor);
}

.gp-bento-double-content .gp-bento-content-minor{
    padding:var(--spacing-lg);
    border-radius: 20px;
    background-color: var(--gp-block-bg-clr-minor);
    box-shadow: 2px 4px 4px var(--gp-block-shadow), 0px 0px 1px var(--gp-block-shadow);
    color: var(--gp-block-text-clr-minor);
}

.gp-bento-double-content .gp-bento-content-major p, .gp-bento-double-content .gp-bento-content-minor p
.gp-bento-double-content .gp-bento-content-major a, .gp-bento-double-content .gp-bento-content-minor a{
    color: inherit;
}

/*contact blok*/
.gp-bento-double-content.contact-block{
    --_gp-block-bg-clr-minor: var(--gp-blue);
    --_gp-block-heading-clr-minor: var(--font-clr-white-100);
    --_gp-block-text-clr-minor: var(--font-clr-white-100);
}

.gp-bento-double-content.contact-block .gp-bento-content-minor{
    background-color: initial;
    background: url('https://getpraut.nl/wp-content/uploads/2026/03/Logo-Getpraut-wit-puzzlestuk-10-procent.png'), linear-gradient(var(--gp-block-bg-clr-minor));
    background-repeat: no-repeat;
    background-position: right 20px, center;
    background-size: 250px, 100%;
}

/*overlapping sticky section*/
.sticky-overlap-section{
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 64px;
}

.sticky-overlap-section > div{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/*content area's*/
.gp-content-block{
    --gp-block-img-overlay-clr: var(--_gp-block-img-overlay-clr, transparent);

    flex-direction: column;
    scroll-padding-top: 130px;

}

.gp-content-block.switch-order .gp-content-afb{ order: 1;}

.gp-content-block .gp-content-afb{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 2px 4px 4px var(--gp-block-shadow), 0px 0px 1px var(--gp-block-shadow);
}

/*de afbeelding zelf*/
.gp-content-block .gp-content-afb figure{
    height: 100%;
    margin-bottom: 0px;
}

.gp-content-block .gp-content-afb figure img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.gp-content-block .gp-content-afb{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 2px 4px 4px var(--gp-block-shadow), 0px 0px 1px var(--gp-block-shadow);
}

/*overlay*/
.gp-content-block.img-overlay .gp-content-afb::before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background-color: var(--gp-block-img-overlay-clr);
    opacity: 0.6;
    z-index: 1;
}

.gp-content-block.switch-order .gp-content-afb{ order: 1;}

.gp-content-block.img-overlay .gp-content-afb img{ filter: grayscale(1);}

.gp-content-block.img-overlay.--overlay-blue{ --_gp-block-img-overlay-clr: var(--gp-blue);}

.gp-content-block.img-overlay.--overlay-light-blue{ --_gp-block-img-overlay-clr: var(--gp-light-blue);}

.gp-content-block.img-overlay.--overlay-orange{ --_gp-block-img-overlay-clr: var(--gp-orange);}

.gp-content-block.img-overlay.--overlay-green{ --_gp-block-img-overlay-clr: var(--gp-green);}

.gp-content-block.img-overlay.--overlay-purple{ --_gp-block-img-overlay-clr: var(--gp-purple);}

.gp-content-block.img-overlay.--overlay-pink{ --_gp-block-img-overlay-clr: var(--gp-pink);}

/*forms*/
.form-input-row{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1em;
}

.form-input-row > div{ flex-basis: calc(50% - 1em / 2);}

.wpcf7 input, .wpcf7 select, .wpcf7 textarea{
    width: 100%;
    padding: 8px;
    border: 0px;
    box-shadow: inset 1px 2px 1px hsl(from var(--gp-blue-200) h s l / 60%), inset 0px 0px 2px hsl(from var(--gp-blue-200) h s l / 60%);
    outline-color: var(--gp-blue);
}

.wpcf7 input{ border-radius: 8px 8px 8px 8px;}

.wpcf7 select{ border-radius: 8px 8px 8px 8px;}

.wpcf7 textarea{
    border-radius: 8px 8px 2px 8px;
    box-shadow: inset 1px 2px 1px hsl(from var(--gp-blue-200) h s l / 60%), inset 0px 0px 2px hsl(from var(--gp-blue-200) h s l / 60%);
}

.wpcf7 label{
    font-family: var(--open-sans);
    color: var(--gp-blue);
}

.wpcf7 label, .wpcf7 p{
    display: block;
    width: 100%;
}

.form-info{
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--font-clr-black-40) !important;
}

/*form button*/
.wpcf7.wpcf7 .form-submit input[type="submit"]{
    width: auto;
    padding-right: 72px;
    padding-left: 20px;
    color: var(--gp-blue);
    background-color: transparent;
    position: relative;
    z-index: 2;
    box-shadow: none;
}

.wpcf7 .form-submit{
    background-color: var(--gp-orange);
    position: relative;
    border-radius: 100vw;
    display: inline-flex;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 0px 0px 2px hsl(from var(--gp-orange-600) h s l / 40%), 2px 2px 2px hsl(from var(--gp-orange-600) h s l / 20%);
}

.wpcf7 .form-submit::before{
    content: '';
    position: absolute;
    left: calc( 100% - 70px) ;
    top: 0px;
    height: 100%;
    width: 20px;
    mask-image: url('data:image/svg+xml,%3Csvg width=%2215%22 height=%2232%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg clip-path=%22url(%23clip0_268_411)%22%3E%3Cpath d=%22M15 0C15 3.99074 12.0772 7.29371 8.2559 7.89648C4.17727 8.33157 1.00005 11.7934 1 16C1 20.2247 4.20465 23.6987 8.3086 24.1094C12.1042 24.734 15 28.0275 15 32H-2V0H15Z%22 fill=%22black%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_268_411%22%3E%3Crect width=%2215%22 height=%2232%22 fill=%22white%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
    mask-repeat: repeat-y;
    mask-position: right;
    mask-size: 100% 160px;
    background-color: var(--gp-orange);
    transition: width 0.3s;
    animation-name: btn-wiggly;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 2;
}

.wpcf7 .form-submit:hover::before{ width: 70px;}

.wpcf7 .form-submit::after{
    --calculated-bg: rgb(from var(--gp-orange) calc(r + 12) calc(g + 36) calc(b + 13));

    content: '';
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 70px;
    z-index: 1;
    background-color: var(--calculated-bg);
    transition: background-color 0.3s;
}

.wpcf7 .form-submit:hover::after{ background-color: rgb(from var(--calculated-bg) r calc(g + 29) calc(b + 36));}

.wpcf7 .wpcf7-spinner{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;   
}

/*contact icons in block*/
.contact-info-rows > div{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contact-info-rows > div > div:first-child figure { margin: 0px;}

.contact-info-rows > div > div figure{
    margin-left: 8px;
    margin-right: 8px;
}

.contact-info-rows a{ text-decoration: none;}

/*link blokjes voor onderaan de pagina*/
.link-blok{
    --overlay-clr: var(--_overlay-clr, var(--gp-blue));
    --bg-image: var(--_bg-image, url('/wp-content/uploads/2026/02/Get-praut-keyboard-wit.jpg'));

    display: grid;
    place-items: center;
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    max-width:300px;
    padding: 0px;
    background-image: var(--bg-image);
    background-size: 900px;
    background-position: center;
    transition: background-size 300ms;
    border-radius: 25px;
    overflow: hidden;
    text-decoration: none;
}

.link-blok:hover{ background-size: 1000px;}

.link-blok:before{
    content:'';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: hsl(from var(--overlay-clr) h s l / 60%);
    backdrop-filter: grayscale(1);
}

.link-blok > span{
    font-family: var(--comfortaa);
    color: var(--font-clr-white-100);
    transform: scale(1);
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.link-blok:hover > span{ transform: scale(1.2);}

/*link blokken kleuern*/
.link-blok.--licht-blauw{ --_overlay-clr: var(--gp-light-blue);}

.link-blok.--groen{ --_overlay-clr: var(--gp-green);}

.link-blok.--oranje{ --_overlay-clr: var(--gp-orange);}

.link-blok.--paars{ --_overlay-clr: var(--gp-purple);}

.link-blok.--roze{ --_overlay-clr: var(--gp-pink);}

/*link-blokken afbeeldingen*/
.link-blok.--bg-maatwerk{--_bg-image: url('/wp-content/uploads/2026/02/Get-praut-keyboard-wit.jpg');}

.link-blok.--bg-werken-leren{--_bg-image: url('/wp-content/uploads/2026/03/Get-Praut-Maatwerk-IT-Eindhoven-Cursussen.avif');}

.link-blok.--bg-voor-wie{--_bg-image: url('/wp-content/uploads/2026/03/Get-Praut-Maatwerk-IT-ontstaan-dagbesteding.avif');}

/*accordions*/
.wp-block-accordion.wp-block-accordion{
    border-radius: 8px;
    background-color: var(--gp-blue-50);
    box-shadow: 2px 4px 4px var(--gp-shadow-blue-light), 0px 0px 1px var(--gp-shadow-blue-light);
}

.wp-block-accordion.wp-block-accordion .wp-block-accordion-heading__toggle{
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--gp-shadow-blue-light);
    margin-bottom: 0px;
}

.wp-block-accordion.wp-block-accordion .wp-block-accordion-heading__toggle[aria-expanded="true"]{
    border-bottom: none;
}

.wp-block-accordion.wp-block-accordion .wp-block-accordion-heading__toggle .wp-block-accordion-heading__toggle-title{
    transition: color 200ms;
}

.wp-block-accordion.wp-block-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{
    color: var(--gp-orange);
}

.wp-block-accordion.wp-block-accordion .wp-block-accordion-heading__toggle[aria-expanded="true"]:hover .wp-block-accordion-heading__toggle-title{
    color: var(--gp-pink);
}

.wp-block-accordion.wp-block-accordion .wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-title{
    color: var(--gp-pink);
}

.wp-block-accordion.wp-block-accordion .wp-block-accordion-panel{
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--gp-shadow-blue-light);
}

.wp-block-accordion.wp-block-accordion .wp-block-accordion-item:last-child .wp-block-accordion-panel, 
.wp-block-accordion.wp-block-accordion .wp-block-accordion-item:last-child .wp-block-accordion-heading__toggle{
    border-bottom: none;
}

/*small container*/
.container.small{ 
    max-width: 850px;
    padding: 0px;
}

/*archive posts*/
#cards{
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

#cards .card{
    width: 100%;
    border: none;
    border-radius: 0px;
    background-color: unset;
}

#cards .card a{ text-decoration: none;}

#cards .card .card-image img{
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 2px 4px 4px var(--gp-shadow-blue-light), 0px 0px 1px 1px var(--gp-shadow-blue-light);
    transition: box-shadow 100ms;
}

#cards .card a:hover .card-image img{ box-shadow: 3px 6px 10px 3px var(--gp-shadow-blue-light), 0px 0px 1px 1px var(--gp-shadow-blue-light);}

/*archive pagination*/
.post-nav ul{
    --gp-bg-clr:var(--_gp-bg-clr, var(--gp-orange)) ;
    --gp-bg-clr-sec: rgb(from var(--gp-bg-clr) calc(r + 12) calc(g + 36) calc(b + 13));
    --gp-bg-clr-sec-hvr: rgb(from var(--gp-bg-clr-sec) r calc(g + 29) calc(b + 36));

    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    list-style-type: none;
    padding-left: 0px;
    margin-bottom: 3em;
}

.post-nav ul li a, .post-nav ul li.active span{
    background-color: var(--gp-blue-50);
    font-family: var(--open-sans);
    font-weight: 600;
    color: var(--gp-blue);
    text-decoration: none;
    padding: 2px var(--spacing-xs);
    box-shadow: 2px 4px 4px var(--gp-shadow-blue-light), 0px 0px 1px 1px var(--gp-shadow-blue-light);
    border-radius: 4px;
    transition: background-color 300ms;
}

.post-nav ul li a:hover{ background-color: var(--gp-bg-clr-sec);}

.post-nav ul li.active span{ background-color: var(--gp-bg-clr-sec-hvr);}

/*single posts*/
.single h1{ margin-bottom: var(--spacing-lg);}


.single-content img{ box-shadow: 2px 4px 4px var(--gp-shadow-blue-light), 0px 0px 2px -1px var(--gp-shadow-blue-light);}

/*portefolio sidebar*/
.portefolio-sidebar{
    position: relative;
    background-color: var(--gp-blue-50);
    padding: var(--spacing-lg);
    border-radius: 8px;
    box-shadow: 2px 4px 4px var(--gp-shadow-blue-light), 0px 0px 1px 1px var(--gp-shadow-blue-light);
}

.portefolio-sidebar::before{
    content: '';
    position: absolute;
    right: 0px;
    top: 0px;
    background-image: var(--gp-clr-all-hard-vert);
    height: 100%;
    width: 10px;
    border-radius: 0px 8px 8px 0px;
}

.portefolio-sidebar > div{
    display: grid;
    place-items: center;
}

.portefolio-sidebar.portefolio-sidebar img{
    width: 100%;
    max-width: 225px;
}

/* Small devices (landscape phones, 576px and up)*/
@media only screen and (min-width: 576px) {
	/*buttons*/
    .gp-standard-btn a{
        font-size: 1.1em;
        padding: 10px 25px 10px 31px;
    }

  

     /*bento puzzle blocks*/
    .gp-bento-blocks-puzzle .gp-bento-content::after{
        width: 100px;
        height: 100px;
    }

    /*forms*/
    .form-input-row{ flex-direction: row;}
}

/* Medium devices (tablets, 768px and up)*/
@media only screen and (min-width: 768px) {
	footer .footer-info{ border-radius: 0px;}

    footer .footer-nav > .row > a, footer .footer-nav > .row > a:first-child,
    footer .footer-nav > .row > a::before, footer .footer-nav > .row > a:first-child::before{ 
        border-radius: 20px 20px 0px 0px;
    }

    /*home banner*/
    /*banner text*/
    .get-praut-banner-home h1{
        font-size: 5em;
        margin-top: 40px;
    }

    .get-praut-banner-home .luxe{
        font-size: 2em!important;
        margin-left: 70px;
    }

    .get-praut-banner-home h2{ font-size: var(--font-size-xxl);}

    .get-praut-banner-home h2 .banner-txt-klein{ font-size: 32px!important;}

    /*gp basic button*/
    .gp-standard-btn.gp-standard-btn.gp-standard-btn:hover{
        background-color: var(--gp-btn-bg-clr);
    }

    .gp-standard-btn::before{
        content: '';
        position: absolute;
        left: calc( 100% - 70px);
        top: 0px;
        height: 100%;
        width: 10px;
        mask-image: url('data:image/svg+xml,%3Csvg width=%2215%22 height=%2232%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg clip-path=%22url(%23clip0_268_411)%22%3E%3Cpath d=%22M15 0C15 3.99074 12.0772 7.29371 8.2559 7.89648C4.17727 8.33157 1.00005 11.7934 1 16C1 20.2247 4.20465 23.6987 8.3086 24.1094C12.1042 24.734 15 28.0275 15 32H-2V0H15Z%22 fill=%22black%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_268_411%22%3E%3Crect width=%2215%22 height=%2232%22 fill=%22white%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
        mask-repeat: repeat-y;
        mask-position: right;
        mask-size: 100% 160px;
        background-color: var(--gp-btn-bg-clr);
        transition: width 0.3s;
        animation-name: btn-wiggly;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        z-index: 2;
    }

    .gp-standard-btn a::after{ margin-left: 40px;}

    .gp-standard-btn::before{ 
        left: calc( 100% - 70px) ;
        width: 20px;
    }

    .gp-standard-btn:hover::before{ width: 70px;}

    .gp-standard-btn::after{
        content: '';
        position: absolute;
        right: 0px;
        top: 0px;
        height: 100%;
        width: 70px;
        z-index: 1;
        background-color: var(--gp-btn-bg-clr-sec);
        transition: background-color 0.3s;
    }

    .gp-standard-btn:hover::after{ background-color: var(--gp-btn-bg-clr-sec-hvr);}

    @keyframes btn-wiggly{
        0% { mask-position: 0px 0px;}
        100% { mask-position: 0px 160px;}
    }
}

/* Wordpress column element breakpoint (781px and up)*/
@media only screen and (min-width: 781px) {
    /*archive posts*/
    #cards{ grid-template-columns: 1fr 1fr;}
}

/* Large devices (desktops, 992px and up)*/
@media only screen and (min-width: 992px) {
    header .offcanvas-body{ position: relative;}

    header nav .offcanvas-body > ul.nav{
        padding-bottom: 0px;
        margin: 0px var(--spacing-sm);
        z-index: 0;
        anchor-name: --highlighted-menu-item;
    }

    header nav .offcanvas-body > ul.nav::before{
        content: '';
        position: absolute;
        inset: auto 0 0;
        left: anchor(left);
        right: anchor(right);
        bottom: anchor(bottom);
        height: 0px;
        background: var(--gp-orange);
        position-anchor: --highlighted-menu-item;
        transition: left 300ms 300ms, right 300ms 300ms , height 300ms;
        border-radius:8px;
        z-index: -1;
    }

    header nav .offcanvas-body > ul.nav:hover::before{
        transition: left 200ms cubic-bezier(0.34, 1.56, 0.64, 1), right 200ms cubic-bezier(0.34, 1.56, 0.64, 1), height 200ms 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        height: 100%;
    }

    header nav .offcanvas-body > ul.nav > li > a{
        margin-left: 0px!important;
        margin-right: 0px!important;
    }

    header nav .offcanvas-body > ul.nav > li > a:hover{ left: 0px;}

    header nav .offcanvas-body > ul.nav > li:hover{ anchor-name: --highlighted-menu-item;}

    header nav .offcanvas-body > ul.nav > li:has(a[aria-expanded="true"]){
        background-color: var(--gp-orange);
        border-radius: 8px;
    }

    header nav .offcanvas-body > ul.nav > li > a[aria-expanded="true"]{ color: var(--gp-light-blue-600);}

    header nav .offcanvas-body > ul.nav > li:hover > a{
        color: var(--gp-light-blue-600);
        transition: color 60ms 120ms;
    }

    /*submenu*/
    header nav .navbar-nav li.menu-item .dropdown-menu {
        margin-top: 12px;
        border-radius: 0px 0px 8px 8px;
        box-shadow: 0px 0px 1px var(--gp-shadow-blue-light), 2px 12px 12px -5px var(--gp-shadow-blue-light), inset 0px 6px 6px -6px var(--gp-shadow-blue-light);
    }

    /*footer*/
    footer{ padding: 15px;}

    footer > .row{
        margin-left: 0px!important;
        margin-right: 0px!important;
    }

    footer .footer-info{ 
        border-radius: 20px;
        box-shadow: 2px 4px 4px #e2e2e2;
    }

    footer .footer-nav > .row > a, footer .footer-nav > .row > a:first-child,
    footer .footer-nav > .row > a::before, footer .footer-nav > .row > a:first-child::before{ 
        border-radius: 20px;
        box-shadow: 0px 8px 4px -3px #e2e2e2;
    }

    /*knoppen*/
    .gp-standard-btn a{ padding: 15px 25px 15px 31px;}

	/*content bento blocks*/
    .gp-bento-blocks-puzzle, .gp-content-block{ flex-direction: row;}

    .gp-bento-blocks-puzzle.switch-order .gp-bento-content,
    .gp-content-block.switch-order .gp-content{ 
        order: 1;
    }

    /*colorfull decoration line*/
    .gp-bento-blocks-puzzle.deco-line .gp-bento-content{ padding: calc(3rem + 10px) 1.618rem 3rem;}

    .gp-bento-blocks-puzzle.deco-line .gp-bento-content::before{
        top: 0px;
        left: 0px;
        bottom: initial;
        border-radius: 20px 20px 0px 0px;
    }

    /*circle decoration*/
    .gp-bento-blocks-puzzle .gp-bento-content::after{
        left: initial;
        right: calc(100% - 30px);
        top: 50%;
        transform: translateY(-50%);
        width: 130px;
        height: 130px;
    }

	.gp-bento-blocks-puzzle.switch-order .gp-bento-content::after{
        left: calc(100% - 30px);
        top: 50%;
        transform: translateY(-50%);
    }

    .gp-bento-blocks-puzzle.switch-order .gp-bento-afb,
    .gp-content-block.switch-order .gp-bento-afb{ 
        order: 2;
    }

    /*Tweedelig bento content block*/
    .gp-bento-double-content{ flex-direction: row;}

    .gp-bento-double-content.contact-block .gp-bento-content-minor{
        background-position: 160px center, center;
        background-size: 550px, 100%;
    }

    /*contact icons in block*/
    .contact-info-rows > div > div figure{
        margin-left: 3px;
        margin-right: 0;
    }
}

/* X-Large devices (large desktops, 1200px and up)*/
@media only screen and (min-width: 1200px) {
    /*home banner*/
    /*banner text*/
    .get-praut-banner-home h1{
        font-size: 5em;
        margin-top: 40px;
    }

    .get-praut-banner-home .luxe{
        font-size: 2em!important;
        margin-left: 70px;
    }

    .get-praut-banner-home h2{ font-size: var(--font-size-xxl);}

    .get-praut-banner-home h2 .banner-txt-klein{ font-size: 32px!important;}

    /*banner video*/
    .get-praut-banner-home .banner-laptop-video-wrap{
        display: inline;
        shape-outside: url('https://getpraut.nl/wp-content/uploads/2026/03/Getpraut-Laptop-banner-home-shaduw-shapeoutside-w-800px.avif');
        shape-margin: 2em;
        float:right;
        width: 800px;
    }

    .get-praut-banner-home .banner-laptop-video-wrap > div{
        position: relative;
        perspective: 480px;
        perspective-origin: 88%;
    }

    .get-praut-banner-home .banner-laptop-prop{ 
        position: relative; 
        display: block;
        perspective: 600px;
        perspective-origin: inherit;}

    .get-praut-banner-home #banner-video-wrap{
        display: inline;
        position: absolute;
        top: 22px;
        right: 32px;
        aspect-ratio: 16/9.9;
        max-width: /*520px*/ 56.3%;
        width: 100%;
        height: auto;
        transform-style: preserve-3d;
        transform: rotateX(3.5deg) rotateY(354deg) rotateZ(4.3deg);
        border-radius: 2px;
    }

 

    /*bento boxes*/
    .sticky-overlap-section .gp-bento-blocks-puzzle .gp-bento-content{ min-height: 450px;}

    /*overlapping stick section*/
	.sticky-overlap-section > div {gap: 200px;}

    .sticky-overlap-section .gp-bento-blocks-puzzle{
        position: sticky;
        position: -webkit-sticky;
        top: 140px;
        margin-bottom: 0px;
    }

    /*archive posts*/
    #cards{ grid-template-columns: 1fr 1fr 1fr;}
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media only screen and (min-width: 1400px) {
    /*homebanner*/
    /*home banner text*/
    .get-praut-banner-home .luxe{
        font-size: 2em!important;
        margin-left: 35px;
    }

    /*home banner video laptop*/
	.get-praut-banner-home .banner-laptop-video-wrap{ 
        width: 1000px;
        shape-outside: url('https://getpraut.nl/wp-content/uploads/2026/03/Getpraut-Laptop-banner-home-shaduw-shapeoutside-w-1000px.avif');
    }

    .get-praut-banner-home  #banner-video-wrap{
        top: 25px;
        right: 44px;
        max-width: /*520px*/ 56.3%;
        transform: rotateX(3.4deg) rotateY(354.4deg) rotateZ(4.5deg);
    }

}