@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

:root {
    /***Logo's***/
    --logo-standard: url("../../custom/theme/assets/images/logo.jpg");
    --logo-alt: url("../../custom/theme/assets/images/logo.jpg");
    
    /***Header Image***/
    /* --header-image: url("../images/header_background.jpg"); */

    /***Brand Colors***/
    --color-brand-primary: #e51937;
    --color-brand-primary-rgb: 229, 25, 55;
    --color-brand-secondary: #002e62;
    --color-brand-tertiary: #008A0B;
    --color-brand-light: #fff0f7;
    --color-brand-dark: #5e1c33;

    /***Font***/
    --font-family-body: 'Lato',Helvetica, Arial, Lucida, sans-serif;
    --font-family-title: 'Bree Serif', serif;
    --font-size: 1.6rem;

    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/
}

.countdown{
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin: 80px 0 50px 0;
    font-family: var(--font-family-title);
}
.box{
    width: 20vmin;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    box-shadow: 15px 15px 30px rgba(0,0,0,0.5);
    font-size: 16px;
}
.box:after{
    content: "";
    position: absolute;
    height: 100%;
    width: 50%;
    left: 0;
}
span.num{
    background-color: #ffffff;
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 5em;
}
span.text{
    font-size: 1.2em;
    color: #ffffff;
    background: #e51937;
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5em 0;
    font-weight: 400;
}
select, select:not(:disabled):hover {
    background-image: unset;
}
input[type="datetime-local"], input[type="time"], input[type="date"], input.hasDatepicker {
    max-width: unset;
} 
.layout-login {
    background-color: var(--color-neutral-white);
}
.login_formbox {
    border: 2px solid var(--color-brand-secondary);
    border-radius: 5px;
}
.form_check {
    display: inline;
}
.form_label_check {
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .countdown {
        justify-content: space-evenly;
        gap: 25px;
        margin: 30px 0 20px 0;
        flex-wrap: wrap;
    }
    .box:nth-child(n+4) {
        display:none;
    }
    span.num {
        font-size: 4em;
    }
}