/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap');

@font-face {
    font-family: Boston-Light;
    src: url('/css/fonts/Boston-Light.woff') format('woff2'),
    url('/css/fonts/Boston-Light.woff') format('woff');
}

@font-face {
    font-family: Boston-Regular;
    src: url('/css/fonts/Boston-Regular.woff') format('woff2'),
    url('/css/fonts/Boston-Regular.woff') format('woff');
}

@font-face {
    font-family: Boston-RegularIt;
    src: url('/css/fonts/Boston-RegularIt.woff') format('woff2'),
    url('/css/fonts/Boston-RegularIt.woff') format('woff');
}

@font-face {
    font-family: Boston-Bold;
    src: url('/css/fonts/Boston-Bold.woff') format('woff2'),
    url('/css/fonts/Boston-Bold.woff') format('woff');
}

@font-face {
    font-family: Boston-BoldIt;
    src: url('/css/fonts/Boston-BoldIt.woff') format('woff2'),
    url('/css/fonts/Boston-BoldIt.woff') format('woff');
}

@font-face {
    font-family: Boston-Black;
    src: url('/css/fonts/Boston-Black.woff') format('woff2'),
    url('/css/fonts/Boston-Black.woff') format('woff');
}

@font-face {
    font-family: Boston-BlackIt;
    src: url('/css/fonts/Boston-BlackIt.woff') format('woff2'),
    url('/css/fonts/Boston-BlackIt.woff') format('woff');
}

@font-face {
    font-family: Boston-Heavy;
    src: url('/css/fonts/Boston-Heavy.woff') format('woff2'),
    url('/css/fonts/Boston-Heavy.woff') format('woff');
}

@font-face {
    font-family: Boston-HeavyIt;
    src: url('/css/fonts/Boston-HeavyIt.woff') format('woff2'),
    url('/css/fonts/Boston-HeavyIt.woff') format('woff');
}

@font-face {
    font-family: Boston-SemiBold;
    src: url('/css/fonts/Boston-SemiBold.woff') format('woff2'),
    url('/css/fonts/Boston-SemiBold.woff') format('woff');
}

@font-face {
    font-family: Boston-SemiBoldIt;
    src: url('/css/fonts/Boston-SemiBoldIt.woff') format('woff2'),
    url('/css/fonts/Boston-SemiBoldIt.woff') format('woff');
}

/* Font opmaak */

h1 {
    font-family: 'Boston-Heavy', Helvetica, Arial, sans-serif;
}

h3 {
    font-family: 'Boston-blackIt', Helvetica, Arial, sans-serif;
    color: #1c3664;
    font-size: 29px;
}

h2, h5, h6, h4 {
    font-family: 'Boston-Bold', Helvetica, Arial, sans-serif;
    color: #1c3664;
}

h4 {
    font-size: 23px;
}

body {
    font-size: 17px;
}

a {
    font-weight: 700;
    transition: all 300ms ease 0ms;
    color: #c9312c;
}

a:hover {
    color: #1c3664;
}

body, input, textarea, select {
    font-family: 'Nunito', Helvetica, Arial, Lucida, sans-serif;
    line-height: 1.6em;
    color: #101319;
}

span.o-quiz-question, label.o-form-label {
    font-weight: 700;
    font-size: 20px;
    color: #1c3664;
    font-family: 'Boston-SemiBold', Helvetica, Arial, sans-serif;
}

.o-bold-text {
    font-weight: 700;
    color: #1c3664;
    font-family: 'Boston-SemiBold', Helvetica, Arial, sans-serif;
}

label.o-quiz-answer {
    margin-left: 10px;
    font-size: 17px;
}

.uk-offcanvas-bar {
    background-color: #C9312C;
}

#offcanvas-menu .uk-offcanvas-bar .uk-nav-primary .uk-nav-divider {
    border-top-color: white;
}

#offcanvas-menu .uk-offcanvas-bar .uk-nav-primary a {
    color: white;
}

#offcanvas-menu .uk-offcanvas-bar .uk-close {
    color: white;
}

.uk-pointer {
    cursor: pointer;
}

.o-2x-icon-size {
    font-size: 2em;
}

.o-icon-size {
    font-size: 20px;
}

.o-background {
    background-color: #1C3664;
}

.o-menu-background {
    background-color: #C9312C;
    padding-top: 15px;
    padding-bottom: 15px;
}

.o-content-background {
    background-color: #FFFFFF;
    padding-top: 20px;
}

.o-heading {
    color: white;
    font-weight: bold;
}

.o-btn, .uk-button-primary {
    background-color: #C9312C;
    font-family: 'Boston-Bold', Helvetica, Arial, sans-serif !important;
    font-size: 15px;
    letter-spacing: 1px;
    border-width: 2px;
    transition: color 300ms ease 0ms;
    background-color: #1c3664;
    border-width: 4px !important;
    border-color: #1c3664;
    color: white;
}

.o-btn:hover, .uk-button-primary:hover {
    background-color: #132546 !important;
    border-color: #132546 !important;
}

.uk-list-bullet > li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: block;
    width: 7px;
    height: 7px;
    background: #c9312c;
    content: '';
}

.o-form li {
    font-weight: 700;
    color: #1c3664;
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
    border-color: #1c3664;
}

.o-form span.uk-text-large {
    color: #c9312c;
}

span.uk-text-muted.uk-float-right {
    color: white !important;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 20px;
    font-family: 'Boston-Bold', Helvetica, Arial, sans-serif !important;
}

.o-form .uk-input, .o-form .uk-select, .o-form .uk-textarea {
    margin-top: 8px;
}

.o-form .uk-checkbox:checked, .o-form .uk-checkbox:indeterminate, .o-form .uk-radio:checked {
    background-color: #c9312c !important;
}

.uk-alert-warning {
    font-size: 20px;
    font-weight: 700;
}

.uk-alert-danger {
    background: #c9312c !important;
    color: #ffffff !important;
    font-weight: 700;
}

.uk-radio:disabled:checked {
    background-image: unset !important;
}

.o-quizfeedback {
    padding: 20px;
    border-radius: 0px 10px 10px 10px;
    -webkit-box-shadow: 13px 10px 26px -21px rgba(0, 0, 0, 0.73);
    -moz-box-shadow: 13px 10px 26px -21px rgba(0, 0, 0, 0.73);
    box-shadow: 13px 10px 26px -21px rgba(0, 0, 0, 0.73);
}

.o-greybackground {
    background-color: #e5e5e5;
    padding: 20px;
    margin-bottom: 20px;
    color: #666;
}

.o-vraagselectie {
    margin-bottom: 30px;
}

span#wordcount {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
}

section.uk-margin-large {
    margin-top: 20px !important;
}

.uk-navbar-nav > li:hover > a.o-menu-button, .uk-navbar-nav > li > a.uk-open.o-menu-button, .uk-navbar-nav > li > a.o-menu-button:focus {
    color: #e5e5e5;
}

.uk-navbar-nav>li>a {
    color: white;
}

.uk-background-primary{
    background-color: #1C3664;
}