:root {
    --blue: #213a8f;
    --yellow: #FFDD05;
}

html { height: 100%; }
body { font-family: 'Open Sans'; display: flex; flex-direction: column; height: 100%; }
h1,
h2,
h3,
h4 { font-family: 'Oswald'; }

h4 { margin-bottom: 1rem; }
a { color: var(--blue); }

.btn { border-radius: 0; font-weight: 700; font-size: 1.25rem; padding: 0.5rem 1.25rem; font-family: 'Oswald'; text-transform: uppercase; }
.btn:active { transform: translateY(2px); }

.btn.btn-primary { background: var(--yellow); border-color: var(--yellow); color: #000; }
.btn.btn-primary:hover { background: #dfc105; border-color: #dfc105; color: #000; }
.btn.btn-primary:active,
.btn.btn-primary:focus { background: #b59c02; border-color: #b59c02; box-shadow: rgb(181 156 2 / 25%) 0px 0px 0px 4px; }
.btn.btn-primary:active:focus { background: #b59c02; border-color: #b59c02; color: #000; }

.form-group { margin-bottom: 1rem; }
.form-group label { font-size: 0.875rem; font-weight: 700; }
.form-group .row { margin-left: -8px; margin-right: -8px; }
.form-group .row > * { padding-left: 8px; padding-right: 8px; }
.form-group .form-control { margin-bottom: 1rem; border-radius: 0; }

.topbar { height: 70px; background: url('../images/danger.jpg') repeat-x; flex-shrink: 0; }

header { background: var(--blue); }
nav.navbar { align-items: flex-end; }
nav.navbar .navbar-brand { margin-top: -70px; padding-bottom: 0; }
nav.navbar .navbar-collapse { justify-content: space-between; }
nav.navbar .nav-item { font-family: 'Oswald'; font-size: 1.25rem; text-transform: uppercase; font-weight: 500; }
nav.navbar .nav-link { color: #fff; }
nav.navbar .nav-link:hover { opacity: 0.8; }
nav.navbar .navbar-nav .nav-item:last-child .nav-link { padding-right: 0; }

.breadcrumb-wrap { display: flex; justify-content: flex-end; font-family: 'Oswald'; font-weight: 500; padding-top: 10px; }
.breadcrumb-wrap a { text-decoration: none; }

.races {  }
.races .item { margin-bottom: var(--bs-gutter-x); }
.races .item .card { text-decoration: none; border-radius: 0; background: var(--blue); color: #fff; transition: background 0.3s; height: 100%; }
.races .item .card:hover { background: #3a57b7; }
.races .item .card .card-body { display: flex; flex-direction: column; }
.races .item h4 { font-size: 1rem; font-family: 'Open Sans'; }
.races .item button.btn { margin-top: auto; }

.inschrijving {  }
.inschrijving h4 { margin-top: 25px; }
.inschrijving .payMethodes { margin-bottom: 50px; }
.inschrijving .payMethodes input { height: 0; width: 0; position: absolute; visibility: hidden; }
.inschrijving .payMethodes label { border: 1px solid #B5B5B5; padding: 10px 15px; border-radius: 4px; cursor: pointer; user-select: none; text-align: center; }
.inschrijving .payMethodes label:hover { background: rgba(200,200,200,0.1); }
.inschrijving .payMethodes label:active { background: rgba(200,200,200,0.3); }
.inschrijving .payMethodes label.active { border: 1px solid var(--blue); }

.checkcontainer { font-size: 1rem; display: block; margin-bottom: 0; display: flex; word-break: break-word; user-select: none; cursor: pointer; margin-bottom: 5px; }
.checkcontainer .checkmark { display: inline-flex; width: 20px; height: 20px; border-radius: 1px; border: 1px solid var(--blue); margin-right: 10px; position: relative; transition: 0.3s; top: 0; flex-shrink: 0; justify-content: center; align-items: center; }
.checkcontainer:hover .checkmark { background: var(--blue); opacity: 0.2; }
.checkcontainer input[type="checkbox"] { position: absolute; height: 0; width: 0; visibility: hidden; }
.checkcontainer input:checked ~ .checkmark { background: var(--blue); }
.checkcontainer input:checked ~ .checkmark::after { content: '\f00c'; font-family: 'Font Awesome 6 Pro'; line-height: 11px; font-size: 0.875rem; text-align: center; color: #fff; }
.checkcontainer:hover input:checked ~ .checkmark { background: var(--blue); opacity: 0.8; }

.form-inputs { margin-bottom: 50px; }
.form-btns { margin-bottom: 25px; }

footer { margin-top: auto; background: var(--blue); color: #fff; padding: 5px 0; }
footer .endpage { display: flex; justify-content: space-between; }


.row > .container { width: 100%; margin-right: auto; margin-left: auto; }

@media only screen and (max-width: 1399px) {
    .row > .container { max-width: 1140px; }

    .races .item h3 { font-size: 1.5rem; }
}


@media only screen and (max-width: 1199px) {
	.row > .container { max-width: 960px; }
}


@media only screen and (max-width: 991px) {
	.row > .container { max-width: 720px; }
}


@media only screen and (max-width: 767px) {
    .row > .container { max-width: 540px; }

    .btn { font-size: 1rem; }
}


@media only screen and (max-width: 575px) {
	.row > .container { max-width: none; }

    .races .item { margin-bottom: calc(var(--bs-gutter-x) * 0.5); }
}


@media only screen and (max-width: 479px) {

}

.card-body a{
    color:white;
    text-decoration: none;
}
.card-body a:hover{
    opacity: .8;
}