/* Colors */
:root {
    --main-color1: #0C243C; /* Dark blue */
    --main-color2: #E9DBC0; /* Taupe */
    --main-color3: #AD883F; /* Gold */
    --main-color4: #6B6B6B; /* Medium grey */    
    --main-color5: #F5F5F5; /* Light grey 2 */
    --main-color6: transparent; /* transparent */
    --main-color-white: #FFF; /* White */
    --bs-body-color: #505050; /* Dark grey */
}

body {
    /*
    font-family: "Sansation", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2rem;
    */
    
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1.15rem;    
    
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Forum", serif;
    font-weight: 400;
    font-style: normal;    
    text-transform: uppercase;
}
h1 {
    font-size: 1.5rem;
    margin-bottom: 40px;
    position: relative;
}
h2 {
    font-size: 1.5rem;
    margin-bottom: 40px;
}
h1 span:nth-child(1), h2 span:nth-child(1) {
    text-transform: initial;
    font-size: 2rem;
    display: block;
}
h1:before {
    content: '';
    background-color: var(--main-color3);
    height: 5px;
    width: 70px;
    position: absolute;
    left: 0;
    bottom: -20px;
}
h3 {
    margin-bottom: 20px;
    color: var(--main-color3);
}
a:link, a:visited, a:active {
    color: var(--main-color1);
    text-decoration: none;
}
a:hover {
    color: var(--main-color2);
    text-decoration: none;
}

/* Custom */
.slogan {
    font-family: "Forum", serif;
    font-weight: 400;
    font-style: normal;    
    font-size: 3.5rem;
    color: var(--main-color1);
    padding: 100px 0;
}
.slogan span {
    font-size: 1.6rem;
    color: var(--main-color3);    
    display: block;
}
.hero {
    height: 60vh;
    position: relative;
}
.hero .riload-o {
    position: absolute;
    left: calc(85% - 65px);
    bottom: -65px;
    height: 130px;
    width: 130px;
}
.hero .riload-o img {
    height: 100%;
}
.container-plus {
    max-width: 100vw;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin: 0 auto;
}
.subcontainer {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);    
}
.bg3 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;    
    background-color: var(--main-color3);
    color: var(--main-color-white);
    padding: calc(var(--bs-gutter-x) * .5);;
}
.bg3 h2 {
    color: var(--main-color-white);    
}
.contact h2 {
    font-size: 1.7rem;
}
.contact i {
    width: 45px;
    height: 45px;
    border-radius: 45px;
    border: 1px solid var(--main-color2);
    line-height: 40px;
}
.contact a:link, .contact a:visited, .contact a:active {
    color: var(--main-color-white);
    text-decoration: none;
}
.contact a:hover {
    color: var(--main-color2);
    text-decoration: none;
}
.quote {
    color: var(--main-color3);
    font-size: 2rem;
    line-height: 1.3;
}
.call-to-action {
    background-color: var(--main-color1);
    color: var(--main-color2);
    font-size: 1.3rem;
    padding: 40px 0;
}

.trajecten h3 {
    text-transform: initial;
    font-size: 1.2rem;
    margin-bottom: 0;
}
.trajecten h4 {
    text-transform: initial;
    font-size: 1.7rem;
    margin-bottom: 30px;
}
.trajecten p:last-child {
    margin: 0;
}
.trajecten .card {
    border-radius: 0;
}
.trajecten .card-footer {
    border-top: none;
    background-color: transparent;
    padding: var(--bs-card-cap-padding-x);
}
.trajecten figure {
    position: relative;
    padding: var(--bs-card-spacer-x);
}
.trajecten figure img {
    border-radius: 0;    
}
.trajecten figure .riload-o {
    position: absolute;
    left: 25px;
    top: -33px;
    height: 60px;
    width: 60px;
}
.trajecten figure .riload-o img {
    height: 100%;
}
.privacypolicy h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

/* Footer */
footer {
    background-color: var(--main-color2);
}
footer .logo {
    max-width: 200px;
}
footer h4 {
    font-size: 2rem;
    margin-bottom: 20px;
}
footer a:link, footer a:visited, footer a:active {
    color: var(--bs-body-color);
    text-decoration: none;
}
footer a:hover {
    color: var(--main-color3);
    text-decoration: none;
}
footer .fa-ul {
    --fa-li-margin: 1.5em;
}
footer li {
    margin-bottom: 8px;
}
.subfooter {
    border-top: 1px solid var(--main-color-white);
    background-color: var(--main-color1);
    color: var(--main-color-white);
    padding: 10px 0;
    font-size: .8rem;
}
.subfooter p {
    margin: 0;
}
.subfooter a:link, .subfooter a:visited, .subfooter a:active {
    color: var(--main-color-white);
    text-decoration: none;
}
/* End footer */

/* Buttons */
.btn {
    border-radius: 100px;
    text-transform: uppercase;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.375rem;

    /*
    font-family: "Sansation", sans-serif;
    font-weight: 300;
    font-style: normal;    
    */    
    
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;    
}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--extra-color1) !important;
    background-color: var(--main-color3) !important;
    border-color: var(--main-color3) !important;
}
.btn:focus-visible {
    color: var(--extra-color1);
    background-color: var(--main-color3);
    border-color: var(--main-color3);
    outline: 0;
    box-shadow: var(--main-color2);
}
.btn-primary {
    background-color: var(--main-color1);
    border-color: var(--main-color1);
    color: var(--main-color-white);
}
.btn-primary:hover {
    background-color: transparent;
    border-color: var(--main-color1);
    color: var(--main-color1);    
}
a.btn-primary:link, a.btn-primary:visited, a.btn-primary:active {
    color: #FFF;
    text-decoration: none;
}
a.btn-primary:hover {
    color: var(--main-color1);  
}
.btn-secondary {
    background-color: var(--main-color3);
    border-color: var(--main-color3);
    color: var(--main-color-white);
}
.btn-secondary:hover {
    background-color: transparent;
    border-color: var(--main-color3);
    color: var(--main-color3);
}
a.btn-secondary:link, a.btn-secondary:visited, a.btn-secondary:active {
    color: #FFF;
    text-decoration: none;
}
a.btn-secondary:hover {
    color: var(--main-color3);  
}
.btn-info {
    background-color: var(--main-color1);
    border-color: var(--main-color-white);
}
.btn-info:hover {
    background-color: var(--main-color4);
    border-color: var(--main-color-white);
}
a.btn-info:link, a.btn-info:visited, a.btn-info:active {
    color: #FFF;
    text-decoration: none;
}
a.btn-info:hover {
    color: #FFF;
}
.btn-lg {
    padding: .8rem 1.5rem .8rem 1.5rem;
}
/* End buttons */

/* End custom */


/* container size:
  xs: 0,
  sm: 540px,
  md: 720px,
  lg: 960px
  xl: 1140px
  xxl: 1320px

breakpoints:
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

/*

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container-plus {
        max-width: calc(540px + 4em);
    }
    .subcontainer {
        padding: 2em;
    }     
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    .slogan {
        font-size: 5rem;
    }
    .slogan span {
        font-size: 2rem;
    }    
    .container-plus {
        max-width: calc(720px + 6em);
    }    
    .subcontainer {
        padding: 3em;
    }    
    .hero .riload-o {
        left: calc(50% - 65px);
    }        
    .call-to-action {
        font-size: 2rem;
    }    
    .call-to-action.small {
        font-size: 1.5rem;
    }    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h1 {
        font-size: 2.5rem;
    }    
    h2 {
        font-size: 2.3rem;
    }    
    .container-plus {
        max-width: calc(960px + 8em);
    }   
    .subcontainer {
        padding: 4em;
    }      
    .call-to-action {
        font-size: 1.7rem;
    }       
    .neg-bottom-offset {
        margin-bottom: -200px;
    }    
    .trajecten {
        margin-top: 200px;
    }    
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    h1 {
        font-size: 3.3rem;
    }     
    h2 {
        font-size: 2.8rem;
    }        
    .container-plus {
        max-width: calc(1140px + 8em);
    }      
    .call-to-action {
        font-size: 2.2rem;
    }       
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .container-plus {
        max-width: calc(1320px + 8em);
    }     
    .call-to-action {
        font-size: 2.5rem;
    }       
}

@media (pointer:coarse) {
}