/* STYLESHEET */

/* FONTS ADDENDUM */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Krona+One&display=swap');

/* <style> ================================================================================================================== */
/* ================================================================================================================== */
/* INLINE VARS */ 
/* ================================================================================================================== */

:root {

    --clr-primary:          #cca041;
    --clr-primary-darker:   #b28627;
    --clr-secondary:        #2c1129;
    --clr-secondary-darker: #12000f;

    --clr-dark-grey:        #d0d0d0;
    --clr-light-grey:       #ebebeb;
    --clr-background:       #D9D9D92E;

    --font-color:           #000000;
    --font-primary:         'Alexandria','Open Sans', Arial, sans-serif; 
    --font-secondary:       'Krona One','Alexandria','Open Sans', Arial, sans-serif; 
    
    --brand-gradient-ltr:       linear-gradient(to right, rgba(23, 91, 138, 1), rgba(102, 188, 80, 1));
    --brand-gradient-ttb:       linear-gradient(to bottom, rgba(23, 91, 138, 1), rgba(102, 188, 80, 1));
    
    --main-border-radius:   4px;
    --main-border-radius-outspoken:   10px;
}

.bg-primary     { background-color: var(--clr-primary) !important; }
.bg-secondary   { background-color: var(--clr-secondary) !important; }
.bg-odd         { background-color: var(--clr-background) !important; }

/* ================================================================================================================== */
/* BASIC TEXT SETTINGS */
/* ================================================================================================================== */


html, body { 
    max-width:100%;
    height:100%;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.4em; 
    font-weight: 300;
    color: var(--font-color);
    background-color: #FDFDFD;
    margin: 0;
    padding: 0;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 
    margin-bottom: 1em;
    font-family: var(--font-secondary);
    font-weight: 300;
}

h1 { font-size: 2.2em; line-height: 1.5em; color: var(--clr-secondary); }
h2 { font-size: 1.6em; line-height: 1.5em; text-transform: uppercase; }
h3 { font-size: 1.4em; line-height: 1.5em; }
p { font-size: 1em; line-height: 1.5em; margin-bottom: 1.3em; }
.lead { font-size: 1.3em; font-family: var(--font-secondary); font-weight: 100; }

@media only screen and (min-width : 768px)
{
    html, body { font-size: 17px; line-height: 1.6em; } 
}

@media only screen and (min-width : 992px)
{
    html, body { font-size: 18px; line-height: 1.6em; } 
}

/* ================================================================================================================== */
/* BOOTSTRAP OVERWRITES */
/* ================================================================================================================== */

.btn-primary {
    --bs-btn-color: var(--clr-primary);
    --bs-btn-bg: var(--clr-primary);
    --bs-btn-border-color: var(--clr-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--clr-primary);
    --bs-btn-hover-border-color: var(--clr-primary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--clr-primary-darker);
    --bs-btn-active-border-color: #a67a1b;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--clr-primary);
    --bs-btn-disabled-border-color: var(--clr-primary);
}

.btn {
    --bs-btn-padding-x: 2.2rem;
    --bs-btn-padding-y: 0.5rem;
    
    border-width: 2px;
    border-radius: 1px; 
    border-bottom-right-radius: 20px;
    background-color: transparent;
    font-family: var(--font-secondary);
    font-weight: 300;
}

.btn:hover, .btn:focus {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
    background-position: right bottom !important;
}

/*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*/

.jumbotron { padding: 35px 35px 25px 35px; border-radius: var(--main-border-radius-outspoken); }
.jumbotron h1 { margin: 0 0 10px 0; }
.jumbotron p { margin: 0 0 10px 0; }

/*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*/

.form-group {
    margin-bottom: 1rem;
}

.form-group .help-block { 
    color: #999;
    font-size: 0.85em;
    line-height: 1.3em;
}

.form-control { border-radius: var(--main-border-radius);  }
.formtitle { font-size: 1.2em; color: var(--clr-primary); padding-bottom: 10px; border-bottom: 1px solid var(--clr-primary); }
.formwrapper small, .legalblob small { display: inline-block; line-height: 1.4em; }
.has-error.checkbox { color: #dc3545; }
.meta-pagination { color: #999; }

/*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*/

.text-right { text-align: right; }
.text-left { text-align: left; }
.float-right { float: right; }

/*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*/

a { color: black; }
a:hover, a:focus { color: var(--clr-primary-darker) }

/*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*/

.container {
    max-width: 1600px;
    padding-right: calc(var(--bs-gutter-x) * .5 + 10px);
    padding-left: calc(var(--bs-gutter-x) * .5 + 10px);
}

/*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*.=.-.-.=.*/

.pagination-wrapper {
    text-align: center;
}

.pagination {
    display: inline-flex;
    --bs-pagination-color: #000;
    --bs-pagination-bg: var(--clr-primary);
    --bs-pagination-border-color: var(--clr-primary-darker);
    
    --bs-pagination-hover-color: black;
    --bs-pagination-hover-bg: var(--clr-primary-darker);
    --bs-pagination-hover-border-color: #dee2e6;
    
    --bs-pagination-focus-color: var(--clr-primary);
    --bs-pagination-focus-bg: #e9ecef;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #000;
    --bs-pagination-active-border-color: #111;
    
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #dee2e6;
    
    font-family: var(--font-secondary);
    font-weight: 500;
    margin-top: 35px;
}

.page-item {
    padding: 0 5px;
}

.page-link {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50px !important;
    transition: all .25s ease-in-out;
}

.center-outer {
    display: table;
    height: 100%;
    width: 100%;
}

.center-inner {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.gal.item img {
    margin: 15px 0;
    border: 2px solid var(--clr-primary);
    border-radius: 2px;
    border-top-left-radius: 50px;
}

/* ================================================================================================================== */
/* HEADER */
/* ================================================================================================================== */

#header .container {
    position: relative;
}

#header .logo { 
    height: 40px; 
    margin: 10px 0;
}

.LWMtoggle { display: inline-block; margin: 15px 0 0; padding: 0px; margin:  }
.LWMtoggle .icon-bar { display: block; width: 100%; background-color: #000; transition: 0.5s; width: 35px; height: 4px; }
.LWMtoggle .icon-bar+.icon-bar { margin-top: 7px; }

@media only screen and (min-width : 768px)
{
    #header .logo { height: 50px; margin: 15px 0; }
    .LWMtoggle { margin-top: 23px; }
}

@media only screen and (min-width : 992px)
{
    #header .logo { height: 60px; margin: 20px 0; }
    .LWMtoggle { margin-top: 33px; }
}


/* ================================================================================================================== */
/* Hero */
/* ================================================================================================================== */

#hero {
    background-color: var(--clr-secondary);
    color: white;
    min-height: 50px;
}

#hero.home {
    height: 50vh;
    background-image: url('../img/pootjes-wit.png');
    background-position: left bottom;
    background-repeat: no-repeat;
}

#hero .accentlogo { 
    height: 40vh; 
    max-width: 80%;
}

.herotitle {
    padding: 1.9em 0 0.8em;
    font-size: 2em; 
    line-height: 1.3em;
    font-family: var(--font-secondary);
}


/* ================================================================================================================== */
/* MAIN CONTENT */
/* ================================================================================================================== */

#maincontent {
    padding: 5em 0 8em;
    
    background-image: url('../img/pootjes-gold.png');
    background-position: right bottom;
    background-repeat: no-repeat;
}

ul.prijzengrid {
    margin: 0; 
    padding: 0;
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
}

ul.prijzengrid li { 
    margin: 0;
    padding: 30px 20px;
    text-align: center;
    border: 2px solid var(--clr-primary);
    border-radius: 2px;
    list-style-type: none;
}

ul.prijzengrid li strong {
    font-size: 1.3em;
    color: var(--clr-primary);
}

ul.prijzengrid li:nth-child(1) { border-top-left-radius: 40px; }
ul.prijzengrid li:nth-child(2) { border-top-right-radius: 40px; }
ul.prijzengrid li:nth-last-child(2) { border-bottom-left-radius: 40px; }
ul.prijzengrid li:last-child { border-bottom-right-radius: 40px; }

@media only screen and (min-width : 992px) 
{
    ul.prijzengrid { grid-template-columns: 1fr 1fr 1fr; }
    
    ul.prijzengrid li:nth-child(2) { border-top-right-radius: 0; }
    ul.prijzengrid li:nth-child(3) { border-top-right-radius: 40px; }
    ul.prijzengrid li:nth-last-child(3) { border-bottom-left-radius: 40px; }
    ul.prijzengrid li:nth-last-child(2) { border-bottom-left-radius: 0px; }
}

/* ================================================================================================================== */
/* Light Weight Menu */
/* ================================================================================================================== */

/* The side navigation menu */
#leLWM {
    width: 100%; /*  width - change this with JavaScript */
    margin-right: -100%;
    height: 100% !important;
    position: fixed; /* Stay in place */
    z-index: 9; /* Stay on top */
    top: 0; /* Stay at the top */
    bottom: 0; /* Stay at the bottom */
    right: 0;
    padding: 0;
    background-color: var(--clr-secondary);
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.25s; /* 0.5 second transition effect to slide in the sidenav */
    border: 0;
    box-shadow: 0;
}

#leLWM.opened {
    margin-right: 0px;
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

@media only screen and (min-width : 992px) 
{
    #leLWM { width: 400px; margin-right: -400px; }
}

@media only screen and (min-width : 1200px) 
{
    #leLWM { width: 500px; margin-right: -500px; }
}

#leLWM .closer { height: 30px; margin: 30px 0 0; padding: 0 30px; color: white; font-size: 25px; line-height: 30px; }
#leLWM .center-outer { height: calc(100% - 60px); }


.menu-logo { max-width: 65%; }

.menu-social {
    display: inline-block; 
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    color: var(--clr-primary);
}

.menu-social:hover {
    color: var(--clr-secondary);
}

.menu-social + .menu-social { margin-left: 10px; }

ul.LWMmenu { 
    margin: 2.5em 0;
    padding: 0;
    list-style-type: none;
}

ul.LWMmenu li { 
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.LWMmenu li a {
    display: inline-block;
    color: white;
    font-family: var(--font-secondary);
    font-size: 1.6em;
    line-height: 1.2em;
    padding: 0.5em 0;
    text-decoration: none;
}

ul.LWMmenu li.active a {
    color: var(--clr-primary);
}

ul.LWMmenu a:hover {
    color: var(--clr-primary-darker);
}

/* ================================================================================================================== */
/* personal */
/* ================================================================================================================== */

#personal {
    background-color: var(--clr-secondary);
    color: white;
    padding: 4em 0;
}

#personal .container {
    max-width: 1200px;
    padding-right: calc(var(--bs-gutter-x) * .5 + 10px);
    padding-left: calc(var(--bs-gutter-x) * .5 + 10px);
}

#personal p { margin: 0; }
#personal .pic img { 
    border-top-left-radius: 100px;
}

#personal .frame {
    border: 1px solid white;
    padding: 23px;
}

#personal .p-slogan { font-weight: 100; font-size: 1.4em; line-height: 1.4em; margin: 0 0 15px 0; }
#personal .p-aut { font-family: var(--font-secondary); line-height: 1.4em; margin: 0 0 15px 0;  }

@media only screen and (min-width : 768px) 
{
    #personal .wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: center;
    }
    
    #personal .frame { 
        border-left: 0;
        padding: 40px 80px;
        border-bottom-right-radius: 75px;
    }
    
    #personal .p-slogan { font-size: 1.6em; line-height: 1.4em; margin: 0 0 25px 0; }
    #personal .p-aut { margin: 0 0 25px 0;  }
}

@media only screen and (min-width : 992px) 
{   
    #personal .frame { 
        border-left: 0;
        border-width: 3px;
        padding: 50px 150px;
        border-bottom-right-radius: 100px;
    }
    
    #personal .p-slogan { font-size: 2em; line-height: 1.4em; margin: 0 0 25px 0; }
    #personal .p-aut { margin: 0 0 25px 0;  }
}

/* ================================================================================================================== */
/* TESTIMONIAL */
/* ================================================================================================================== */

#testimonials { padding: 5em 0 4em; }
.t-txt { font-size: 1.2em; line-height: 1.5em; }
.t-aut { color: var(--clr-secondary); font-weight: 400; }
.slick-dots li button:before { color: var(--clr-secondary); }
.slick-dots li.slick-active button:before { color: var(--clr-secondary); }


/* ================================================================================================================== */
/* MAPDIVIDER */
/* ================================================================================================================== */

#mapdivider {
    background-color: #efefef;
}

#mapdivider img {
    width: 100%;
  object-fit: cover;
}


/* ================================================================================================================== */
/* FOOTER */
/* ================================================================================================================== */

footer {
    text-align: center;
    padding: 50px 0;
    font-weight: 300;
}

footer p { margin: 10px 0; }
footer .postfooter { font-size: 0.8em; }

footer a { color: black; text-decoration: none; }
footer a:hover { color: #333; text-decoration: underline; }

.footer-left, .footer-right { text-align: center; }

@media only screen and (min-width : 768px)
{
    .footer-left { text-align: left; }
    .footer-right { text-align: right; }
}

.bottom-social {
    display: inline-block; 
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    color: var(--clr-secondary);
}

.bottom-social:hover {
    color: var(--clr-primary);
}

.bottom-social + .bottom-social { margin-left: 10px; }