/* CSS Document */
html,body {font-family: 'Nunito Sans', sans-serif; background-color: #0e355e;}

a {color: #7d00ff; text-decoration: none;}
a:hover {color: #7d00ff; text-decoration: none;}
button:focus, a:focus {outline: none;}

.bg-oomt {background-color: #FFE500; color: #000; font-size: 1.4rem; line-height: 1.3;}
.bg-oomt-logo {background-color: rgba(255,255,255,0.85); color: #000; font-size: 2.5rem; line-height: 1.3; font-weight: 700; text-align: center;}
.bg-oomt a, .bg-oomt-logo a {color: #000; background-color: transparent;}
.bg-oomt a:hover {font-weight: normal;}
.bg-oomt a:focus, .bg-oomt-logo a:focus {outline: none;}
.bg-oomt-logo .logo-max-w {margin-right: 100px;}
.d-lg-none a i.fa-solid {color: #999; -webkit-transition: all 0.5s 0.75s; -moz-transition: all 0.5s 0.75s; transition: all 0.5s 0.75s; transform: rotate(180deg);}
.d-lg-none a.collapsed i.fa-solid {transform: rotate(0deg);}

.btn-purple {background-color: #7d00ff; color: #FFF;}
.btn-purple:hover, .btn-purple:focus {border: 1px solid #7d00ff; color: #7d00ff; background-color: transparent;}

.text-purple {color: #7d00ff;}
.marker-purple li::marker {color: #7d00ff;}

@media (max-width: 991px) {
	.titelkader {bottom: -40px; left: 0;}
}
@media (min-width: 992px) {
	.bg-oomt .intro-link {font-size: 1rem; color: #555; font-style: italic;}
	.bg-oomt .intro-link a {color: #555;}
    .item-stretch-lg, .img-fh .item-stretch-lg .d-lg-block {height: 100% !important;}
    .img-fh .item-stretch-lg .d-lg-block .img-fluid {height: 100% !important; object-fit: cover;}
    .bg-oomt-logo .logo-max-w .img-fluid {max-width: 175px;}
}
@media (min-width: 1600px) {
	.titelkader .bg-oomt {padding: 2rem !important;}
}
@media (min-width: 1800px) {
	.titelkader .bg-oomt {padding: 3rem !important;}
}

@media (min-width: 1900px) {
	.bg-oomt .intro-link {font-size: 1.2rem;}
	
}

.modal-oomt .modal-body .row a {text-decoration: underline;}
.modal-oomt .modal-body .row a:hover {color: #FF6E00;}
.modal-oomt .modal-body .row a.carousel-control-next:hover, .modal-oomt .modal-body .row a.carousel-control-prev:hover {color: #FFE400;}
.modal-oomt .modal-body .row a.carousel-control-next .fa-solid, .modal-oomt .modal-body .row a.carousel-control-prev .fa-solid {text-shadow: 3px 3px 7px #7d00ff;}

a.tt-oomt {white-space: nowrap; text-decoration: underline;}
.oomt-tooltip .tooltip-inner {background-color: #7d00ff; color: #FFF; border: 1px solid #000; max-width: 400px; padding: 0.25rem 1rem;}
.modal-oomt .modal-body .row .oomt-tt-link {white-space: nowrap; color: #7d00ff; text-decoration: none;}
.oomt-tooltip:hover, .oomt-tooltip:focus {color: #7d00ff; font-weight: 400;}
.fw-bold .oomt-tooltip:hover, .fw-bold .oomt-tooltip:focus {font-weight: 700;}

a.bold-link {font-weight: 700;}

.modal-oomt {max-width: 60%; padding-left: 0.5rem; padding-right: 0.5rem;}
.modal-oomt .modal-header {background-color: #FFE500; color: #000; padding: 1rem 1rem 1rem 5rem; border: none;}
.modal-oomt .modal-header h5 {font-weight: 700; font-size: 1.25rem; margin-bottom: 0px;}
.modal-oomt .modal-header h5 small {color: #7d00ff; font-weight: 400; font-style: italic;}
.modal-oomt .modal-header .close {margin-right: 1rem;}
.modal-oomt .oomt-header {color: #000; padding: 1rem 5rem 1rem 2rem; font-weight: 700; font-size: 1.25rem; min-height: 125px; position: absolute; z-index: 10; width: 70%; max-width: 500px; bottom: 0; left: 0; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260.54 94.17'%3E%3Cpath fill='%23ffe400' d='M260.54,94.17C223.46,37.47,159.42,0,86.62,0,55.7,0,26.37,6.77,0,18.89v75.29h260.54Z'/%3E%3C/svg%3E"); background-position: left top; background-repeat: no-repeat; background-size: cover;}
.modal-oomt .oomt-header .close {margin-right: 1.5rem;}
.modal-oomt .modal-body {padding: 0rem 5rem 1rem; font-size: 1.25rem;}
.modal-oomt .modal-body h1.route-header {font-size: 1.75rem; font-weight: 700; font-style: italic; color: #7d00ff;}
.modal-oomt .modal-body .subtekst {font-size: 1rem;}
.modal-oomt .modal-body .img-h {margin-right: -5rem; margin-left: -5rem;}
.modal-oomt .modal-body a.carousel-control-prev {background-color: transparent; font-size: 3rem; -ms-flex-align: flex-start; justify-content: flex-start;}
.modal-oomt .modal-body a.carousel-control-next {background-color: transparent; font-size: 3rem; -ms-flex-align: flex-start; justify-content: flex-end;}
.modal-oomt .modal-footer a {background-color: transparent;}

.modal-oomt .carousel-control-next, .modal-oomt .carousel-control-prev {opacity: 0.75;}

.modal.fade#modal-stimuleren .modal-dialog {-webkit-transform: translate(-100%,-25%); transform: translate(-100%,-25%);}
.modal.show#modal-stimuleren .modal-dialog {-webkit-transform: translate(0,0); transform: translate(0,0);}

.modal.fade#modal-werkgeverschap .modal-dialog {-webkit-transform: translate(100%,-25%); transform: translate(100%,-25%);}
.modal.show#modal-werkgeverschap .modal-dialog {-webkit-transform: translate(0,0); transform: translate(0,0);}

.modal.fade#modal-oomt-2023 .modal-dialog, .modal.fade#modal-ondersteuning .modal-dialog {-webkit-transform: scale(0,0) translate(0,100%); transform: scale(0,0) translate(0,100%);}
.modal.show#modal-oomt-2023 .modal-dialog, .modal.show#modal-ondersteuning .modal-dialog {-webkit-transform: scale(1,1) translate(0,0); transform: scale(1,1) translate(0,0);}

.modal.fade#modal-onderwijs .modal-dialog {-webkit-transform: translate(-100%,200%); transform: translate(-100%,200%);}
.modal.show#modal-onderwijs .modal-dialog {-webkit-transform: translate(0,0); transform: translate(0,0);}

.modal.fade#modal-veilig-gezond .modal-dialog {-webkit-transform: translate(100%,200%); transform: translate(100%,200%);}
.modal.show#modal-veilig-gezond .modal-dialog {-webkit-transform: translate(0,0); transform: translate(0,0);}

body.modal-open .container-fluid .oomt-item, body.modal-open .container-fluid .bg-oomt-logo, body.modal-open .container-fluid .bg-oomt {-webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);}

.bg-image {background-image: url('../attachments/bg_xxl.jpg'); background-repeat: no-repeat; background-size: cover; min-height: 100vh;}

.card-oomt {border-radius: 0px; border-top: 0px;}

.list-unstyled {font-size: 1.1rem;}
.list-unstyled li {margin-bottom: 1rem;}

.list-oomt {list-style: disc; padding-left: 20px;}
.list-oomt li {margin-bottom: 0rem;}

.bg-image {min-height: 100vh;}
.bg-route {background-image: url('../attachments/bg-route1a.png'); background-repeat: no-repeat; background-size: 100% 100%;}
.bg-route.r1{background-image: url('../attachments/bg-route1a.png'); background-repeat: no-repeat; background-size: 100% 100%;}
.bg-route.r2 {background-image: url('../attachments/bg-route2a.png'); background-repeat: no-repeat; background-size: 100% 100%;}
.bg-route.r3 {background-image: url('../attachments/bg-route3a.png'); background-repeat: no-repeat; background-size: 100% 100%;}
.bg-route.r4 {background-image: url('../attachments/bg-route4a.png'); background-repeat: no-repeat; background-size: 100% 100%;}

.bg-route .route {color: #FFF; font-size: 1.75rem; line-height: 1.15; font-weight: 700;}
.bg-route .routenr {color: #FFF; font-size: 4rem; line-height: 1; font-weight: 900;}
.bg-route .titel a {color: #FFF; font-size: 1.75rem; line-height: 1.15; font-weight: 700; background-color: transparent;}
.bg-route .titel .start-link a {font-size: 1.5rem; line-height: 1.15; font-weight: 400; color: #FFF; font-style: italic; margin-top: 10px; margin-left: 20px; display: block;}
.bg-route .titel.text-center .start-link a {margin-left: 0px;}
.bg-oomt-logo .start-link a, .bg-route .start-link a.col-link {font-size: 1.5rem; line-height: 1.15; font-weight: 400; color: #7d00ff; font-style: italic; margin-top: 10px; display: block;}

.bg-route a.col-route {background-color: transparent; color: #FFF; font-size: 1.5rem; line-height: 1.15; font-weight: 700;}
.bg-route a.col-route .nr {font-size: 3rem; font-weight: 900;}
.bg-route a.col-link {background-color: transparent; color: #FFF; font-size: 1.5rem; line-height: 1.15; font-weight: 700;}

.bg-other {background: rgba(225,229,0,0.8); border: 1px solid rgba(255,229,0,0.7);}
.bg-other .titel a {color: #000; font-size: 1.75rem; line-height: 1.15; font-weight: 700; background-color: transparent;}
.bg-other .titel .start-link a {font-size: 1.5rem; line-height: 1.15; font-weight: 400; color: #000; font-style: italic; margin-top: 10px; margin-left: 20px; display: block;}

.bg-other a.col-link {background-color: transparent; color: #FFF; font-size: 1.5rem; line-height: 1.15; font-weight: 700;}

.start-link a.col-link .fa-solid.fa-chevron-down {background: #FFE500; border-radius: 50%; border: 2px solid #7d00ff; padding: 5px; width: 38px;}

.modal-body h1, .card-oomt h1 {font-size: 1.75rem; line-height: 1.25; font-weight: 700; margin-top: 1.5rem; margin-bottom: 1rem; color: #333;}
.modal-body h2, .card-oomt h2 {font-size: 1.35rem; line-height: 1.25; font-weight: 700; margin-top: 1rem; margin-bottom: 0rem; color: #7d00ff;}
.modal-body h3, .card-oomt h3 {font-size: 1.25rem; line-height: 1.25; font-weight: 700; margin-top: 1rem; margin-bottom: 0rem;}

@media (min-width: 992px) {
	.bg-video {max-height: 100vh; max-width: 100vw; width: 100%; height: 100%; overflow: hidden;}
	.bg-video video {object-fit: cover; height: 100%; width: 100%;}
	
	.bg-route .route {font-size: 1.25rem;}
	.bg-route .routenr {font-size: 2rem;}
	.bg-route .titel a {font-size: 1.25rem;}
	.bg-route .titel .start-link a {font-size: 1.1rem;}
	.py-resp {padding-top: 1rem; padding-bottom: 1rem;}
}

@media (min-width: 1400px) {
	.bg-route .route {font-size: 1.5rem;}
	.bg-route .routenr {font-size: 4rem;}
	.bg-route .titel a {font-size: 1.5rem;}
	.bg-route .titel .start-link a {font-size: 1.25rem;}
	.py-resp {padding-top: 2rem; padding-bottom: 2rem;}
}

@media (min-width: 1600px) {
	.bg-route .route {font-size: 1.75rem;}
	.bg-route .routenr {font-size: 4rem;}
	.bg-route .titel a {font-size: 1.75rem;}
	.bg-route .titel .start-link a {font-size: 1.5rem;}
	.py-resp {padding-top: 3rem; padding-bottom: 3rem;}
}

@media (min-width: 2000px){
	.modal-oomt {max-width: 1200px;}
}

@media (max-width: 1700px) {
	.modal-oomt .modal-body {padding-left: 3rem; padding-right: 3rem;}
	.modal-oomt .modal-body .img-h {margin-right: -3rem; margin-left: -3rem;}
	.modal-oomt .oomt-header {padding: 1rem 5rem 1rem 3rem;}
}
@media (max-width: 1600px) {
	.modal-oomt {max-width: 75%;}
	.bg-oomt {font-size: 1.2rem;}
	.modal-oomt .modal-body {padding-left: 2rem; padding-right: 2rem;}
	.modal-oomt .modal-body .img-h {margin-right: -2rem; margin-left: -2rem;}
	.modal-oomt .oomt-header {padding: 1rem 5rem 1rem 2rem;}
}
@media (max-width: 1400px) {
	.bg-oomt {font-size: 1.1rem;}
	.bg-oomt-logo {font-size: 2.25rem; line-height: 1.2;}
    .bg-oomt-logo .subtitel-start {font-size: 1.3rem;}
	.bg-oomt-logo .intro {font-size: 1.3rem;}	
	.modal-oomt .modal-body {font-size: 1.1rem;}
}
@media (max-width: 1200px) {
	.bg-oomt {font-size: 1rem;}
	.bg-oomt-logo {font-size: 2rem; line-height: 1.2;}
    .bg-oomt-logo .subtitel-start {font-size: 1.1rem;}
	.bg-oomt-logo .intro {font-size: 1.1rem;}
	.bg-image {background-image: url('../attachments/bg_xl.jpg'); background-repeat: no-repeat; background-size: cover; min-height: 100vh;}
}

@media (max-width: 992px){
	.bg-route, .bg-other {position: relative; z-index: 10;}
	.hoofd {position: relative;}
	.hoofd:before {background: rgba(255,255,255,1); content: ""; width: 100%; height: 0px; border-left: 1px solid rgba(0,0,0,0.17); border-right: 1px solid rgba(0,0,0,0.17);position: absolute; left: 0px; top: 0px; z-index: 1; animation: showup 2s 0.25s forwards;}
	.hoofd.nor:before {height: 0px; top:0px; animation: showupnor 1s 0.25s forwards;}
	.bg-image {background-image: url('../attachments/bg_md.jpg'); background-repeat: no-repeat; background-size: cover; min-height: 100vh;}
}

@media (max-width: 767px) {
	.bg-image {background-image: url('../attachments/bg_sm.jpg'); background-repeat: no-repeat; background-size: cover; min-height: 100vh;}
}


@keyframes showup {
  from {height: 0px; top: 0px;}
  to {height: 60px; top: -60px;}
}
@keyframes showupnor {
  from {height: 0px; top: 0px;}
  to {height: 16px; top: -16px;}
}

@media (max-width: 767px) {
	.bg-image {min-height: 100vh;}
}
@media (max-width: 575px) {
	.bg-oomt {font-size: 1.2rem;}
	.bg-oomt-logo {font-size: 1.8rem;}
}

/******************** UP *************************/
.btn-up {transition: all 2s; opacity: 0; visibility: hidden; background-color: rgba(125, 0, 255, 0.75); border: 1px solid #FFF; color: #FFF;}
.btn-up.live {opacity: 1; visibility: visible;}

/******************** Footer *********************/
.footer {background-color: rgba(52,58,64,0.8);}
.footer a {color: #FFF; background-color: transparent;}