
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

:root {

    /***Logo's***/
--logo-standard:none;
    --logo-alt: url("../../themes/base/assets/images/logo_invitado_VM_wit.svg");

    /***Header Image (Van toepassing op visual.twig)***/
     --header-image: url("../../../../custom/theme/assets/images/Logo_NPM_blue_CMYK.png"), url("../../../../custom/theme/assets/images/gradient.png"), url("../../../../custom/theme/assets/images/HART_bg.jpg"); 

    /***Brand Colors***/
    --color-brand-primary: #1D3A8F;
    --color-brand-primary-rgb: 20, 45, 165;
    --color-brand-secondary: #7382C8;
    --color-brand-tertiary: #008A0B;
    --color-brand-light: #fff0f7;
    --color-brand-dark: #0A1753;
    --color-neutral-gray-0: #F9F4EF;
    --color-neutral-black: #142DA5;
    --color-neutral-gray-08: #142DA5;
    --border-radius: 0;



    /***Font***/
     --font-family:"Poppins", sans-serif;
     --font-family-title: "Poppins", sans-serif;
    /* --font-size: 1.6rem; */
    --menu-height:0;
    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/
}
.menu .language {
    margin-top: 6.4rem;
    
}
.logo {
    width: 100%;
    height: 31px;
}

a {
    color: #142DA5;
}
.layout-header-full-width .header_visual:before {
    content: "";
    background-image: var(--header-image);
    background-size: 150px, cover, cover;
    background-position: right 32px top 96px, 50% center, center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    height: 60vh;
    top: var(--menu-height);
    position: fixed;
    will-change: transform;
    z-index: -1;
}
.header_visual .header_visual-content {
    background: none;
    padding: 3.2rem;
}
.header_visual .header_visual-content h1 {
    margin: 0rem 0 0.8rem 0;
}
.sidebar h3{
    margin: 1.2rem 0 0.8rem 0;
}
.button{
    transition: all 0.3s ease-in-out;
}
.button:hover{
    background-color: var(--color-brand-dark);
}
.button--secondary{
    background-color: var(--color-brand-primary);
}
.icon-chevron-right:before {
    content: '\e5c8';
    z-index: 90;

}
.icon-chevron-left:before {
    content: '\e5c4';
    z-index: 90;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "Material Icons";
    font-size: 1em;
    position: relative;
}
.button--back{
    border: 1px solid var(--color-brand-primary);
    padding: 0.8rem 1.6rem;
}
.button--back:hover{
    color: var(--color-neutral-white);
}
.first-next{
    position: relative;
}

.first-next:after{
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 0px 45px 68px;
   border-color: transparent transparent var(--color-brand-secondary) transparent;
   transform: rotate(0deg);
   z-index: 1;
}

.layout-login .logo {
    background-image: none;
}
body.layout-header-full-width main {
    padding-top: 0;
}
.container-fluid .poweredby a{
    display: none;
}
footer {
    background-color: var(--color-brand-primary);
}

.header_visual-content h1 {
    font-weight: 400;
    font-size: 9rem;
}

h4 {
    font-size: var(--font-size-l);
}
@media (min-width: 1200px){
    .col-form {
        grid-column: span 6 / 12;
    }
}