body                                                            {font-family: "Baloo";}
/*-------------------------------------------------------------------------------------*/
/*@HELPERS ----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.btn                                                            {border-radius: 10px; font-size: 1.125rem; border: none; cursor: pointer; white-space: normal;}
.btn:active, .btn.active, button:focus,  	                
.btn.focus, .btn:focus, .btn:active:focus,
.btn:not(:disabled):not(.disabled).active, 
.btn:not(:disabled):not(.disabled):active                       {box-shadow: none !important; outline: none !important;}

.btn-brand                                                      {position: relative; width: 35px; height: 35px; display: inline-flex; justify-content: center; align-items: center;}
.btn-brand .fab                                                 {position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center;}
.btn:focus, 
.btn:active:focus, 
.btn.active:focus                                               {outline: none !important;}
.mt-6                                                           {margin-top: 5rem !important;}
.mw-600                                                         {max-width: 600px;}
.overflow-hidden                                                {overflow: hidden;}
.z-index-1                                                      {z-index: 1 !important;}
.z-index-2                                                      {z-index: 2 !important;}
/*-------------------------------------------------------------------------------------*/
/*@SEARCH -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.searchContentWrapperOnsite                                     {pointer-events: all; position: relative;}

.search-container {
    margin: -135px 0 0 0;
    transition: margin-top 250ms;
    position: fixed;
    z-index: 2;
    width: auto;
}

.search-container input[type=text], 
.search-container .searchOnsiteSubmitWrapper a                  {box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);}

.search-container input[type=text] {
    margin: 15px 0;
    width: calc(100% - 35px);
    height: 35px;
    padding: 0 15px;
    line-height: 43px;
    float: left;
    border: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.search-container input[type=text]:focus, 
.search-container a                                             {outline: none;}
.searchOnsiteSubmitWrapper                                      {display: inline-block;}
.search-container.clicked                                       {margin: -80px 0 0;}
.search-container.clicked::before                               {content: ""; background: rgba(0, 0, 0, .5); height: 100vh; width: 100%; position: fixed; z-index: 0; transition: .5s ease-in;}

.search-container .searchOnsiteSubmitWrapper a {
    position: relative;
    height: 35px;
    width: 35px;
    padding: 0 10px;
    float: left;
    line-height: 35px;
    margin: 15px 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.search-container .searchOnsiteSubmitWrapper a:before {
    content: "\f002";
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-size: 20px;
    left: 8px;
    position: absolute;
}

.btn-search-m {
    position: absolute;
    top: 8px;
    left: 4rem;
    height: 40px;
    width: 40px;
    border-radius: 5px;
}

.btn-search:before                                              {content: "\f002"; font-weight: 700; font-family: 'Font Awesome 5 Free';}
.btn-search.clicked:before                                      {content: '\f00d';}
/*-------------------------------------------------------------------------------------*/
/*@HEADER -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
header                                                          {height: 450px; transition: height ease 0.3s;}
header .quick-menu                                              {position: absolute; top: -2rem; right: 3rem;}
header .quick-menu .btn                                         {min-width: 45px; min-height: 40px;}
/*-------------------------------------------------------------------------------------*/
/*@NAV --------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.navbar                                                         {z-index: 2; text-align: center;}

.navbar .nav-link                                               {padding: .5rem !important;}
.navbar .nav-link::before                                       {display: none;}

.navbar .dropdown-item                                          {text-transform: none; display: flex; justify-content: space-between; white-space: normal;}
.navbar .dropdown-item::before                                  {display: none;}
.navbar .nav-link:before.dropdown,
.navbar .dropdown-submenu                                       {position: relative;}
.navbar .dropdown-menu                                          {background: transparent;}
.navbar .dropdown-submenu > .dropdown-menu                      {top: 0; left: 100%;}
.navbar .dropdown-submenu > .dropdown-item:after                {border: none;}

/* NAVBAR TOGGLE STYLING */
.navbar-toggler                                                 {position: relative; z-index: 2; left: 1rem; padding: .5rem; font-size: 1rem; border: 0;}
/*-------------------------------------------------------------------------------------*/
/*@SLIDESHOW --------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.slideshow                                                      {position: absolute; width: 100%; top: 0;}
.slide > .container                                             {position: absolute; left: 0; right: 0; bottom: 50px;}
.slideshow-image                                                {height: 515px; background-size: cover; background-position: center;}
.slideshow-image::before                                        {content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 100%;}
.slideshow-intro                                                {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.slideshow-item-overlay                                         {position: relative; font-size: 2.625rem; text-align: center;}
/*-------------------------------------------------------------------------------------*/
/*@MAIN -------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.bg-overlay                                                     {position: absolute; top: 0; bottom: 0; width: 100%;}
.bg-overlay::before                                             {content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 100%; z-index: 1;}
.bg-default                                                     {background: url('https://basisonlinefiles.nl/front/global/images/placeholders/image89562.png') no-repeat center / cover; /*default fallback*/}
/*-------------------------------------------------------------------------------------*/
/*@NEWS -------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.content-wrapper .newsBlokTitle {
    text-align: center;
    font-size: 30px;
    margin: 0 0 20px;
    width: 100%;
    display: inline-block;
}

.newsContentItem  {
    display: inline-block;
    border-radius: .625rem;
    overflow: hidden;
    width: calc(50% - 20px);
    height: 280px;
    margin: 0 .625rem;
    float: left;
    position: relative;
}

.newsContentItem .newsItemImage {
    height: 220px;
    max-width: none !important;
    max-height: none !important;
    background: url('../images/default-news-photo.png') no-repeat center center;
    background-size: cover;
}

.newsContentItem  .newsTitle {
    padding: 0 .625rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsContentItem .newsTitle a {
    font-size: 22px;
    line-height: 21px;
    text-overflow: ellipsis;
    max-height: 42px;
    overflow: hidden;
}

.newsContentItem .dateTitle .date {
    position: absolute;
    top: 0;
    text-align: center;
    padding: 3px 10px;
    line-height: normal;
}

.newsContentItem .dateTitle .date .dateDay                                      {display: block; font-size: 24px; line-height: 24px;}
.newsContentItem .dateTitle .date .dateMonth                                    {display: block; font-size: 13px; text-transform: uppercase;}

.allNews a                                                                      {display: inline-block; text-align: center; margin: 2.1875rem 0 0; width: 100%;}
/*-------------------------------------------------------------------------------------*/
/*@CALENDAR ---------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.calendar-month, .calendar-list                                                 {width: 100%; border-radius: 10px; min-height: 0; overflow: hidden;}

/*LINKER KALENDER*/
.calendar-month                                                                 {margin-bottom: 1rem;}
.calendar-month a:hover                                                         {text-decoration: none;}
.calendar-month .miniCalendar                                                   {width: 100%; margin: 0 auto; min-height: 0;}
.calendar-month .miniCalendar .miniCalendarContent .dayWrapper                  {width: 14.28%; float: left; text-align: center; padding: 0; line-height: 26px;}
.calendar-month .topCalendar                                                    {width: 100%; position: relative; text-align: center;}
.calendar-month .topCalendar .monthName                                         {width: 100%; font-size: 18px; margin-bottom: 5px;}

.calendar-month .miniCalendar .miniCalendarContent .dayHeaderItemMini           {width: inherit; float: none; font-size: 16px;}
.calendar-month .miniCalendarContent .currentDay .dayHeaderItemMini, 
.calendar-month .miniCalendar .miniCalendarContent .dayHeaderItemMini:hover     {display: block;}
.calendar-month .miniCalendarContent .currentDay .dayHeaderItemMini             {border: none;}
.calendar-month .miniCalendarContent .dayHeaderItemMini:hover         	        {text-decoration: none;}

.calendar-month .topCalendar .prevMonth, 
.calendar-month .topCalendar .nextMonth                                         {width: 9px; cursor: pointer; position: absolute; top: 0; left: 0; font-size: 0;}
.calendar-month .topCalendar .nextMonth                                         {left: inherit;right: 0;}
.calendar-month .topCalendar .prevMonth::after, 
.calendar-month .topCalendar .nextMonth::after                                  {content: "\f104"; font-family: 'Font Awesome 5 Free'; font-weight: 700; position: absolute; left: 10px; top: -5px; font-size: 24px;}
.calendar-month .topCalendar .nextMonth::after                                  {content: "\f105"; left: -10px;}
.calendar-month .miniCalendar .headerRowMiniCalendar .miniHeaderItem            {width: 14.28%; text-align: center;}
.calendar-month .headerRowMiniCalendar                                          {display: flex;}
.calendar-month .miniMonthHeader, 
.calendarTitle                                                                  {display: none;}
.calendarOverview                                                               {position: absolute; bottom: 0; right: 30%; display: none;}

.calendarWrapper .calendarNavigation                                            {width: 289px;}

/*RECHTER KALENDER*/
.calendar-list .calendarOSHeader, .calendar-month .monthName                    {width: 100%; font-size: 18px; margin-bottom: 5px;}
.calendar-list .calendarItem                                                    {display: flex; padding-bottom: 8px;}
.calendar-list .calendarItemDate, .calendarItemTitle                            {width: 100%;}
.calendar-list .calendarItemDate .dateDay                                       {display: inline; padding: 5px; margin-right: 5px;}

.calendarNavigation                                                             {display: flex !important;}
.table-responsive                                                               {overflow-x: inherit;}
/*-------------------------------------------------------------------------------------*/
/*@QUOTE ------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.quote-wrapper .head-wrapper                                                    {font-size: 2.375rem;}
.quote-wrapper .quote q                                                         {font-family: 'Dancing Script'; font-size: 3rem;}
.quote-wrapper .img-circle                                                      {margin: 0 auto 1.25rem; display: block;}
.quote-wrapper .image-wrapper                                                   {max-width: 195px; margin: 0 1.25rem;}
.quote-wrapper .testimonial-image                                               {border-radius: 50%; width: 100%; height: auto; padding-top: 100%; overflow: hidden;}
.quote-wrapper .testimonial-image img                                           {position: absolute; top: 0; width: auto; margin: auto; height: 100%;}
/*-------------------------------------------------------------------------------------*/
/*@NIEUWE OUDERS ----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.team-wrapper, .maps-wrapper                                                    {height: 270px;}
.team-wrapper:hover .team-text                                                  {bottom: 10px;}
.team-text                                                                      {bottom: 0; right: 0; left: 0; transition: bottom 0.3s ease;}
/*-------------------------------------------------------------------------------------*/
/*@MEDIA-QUERIES ----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

@media (min-width: 768px) {
    .calendar-list, .calendar-month                                             {min-height: 280px !important;}
    .calendar-month .miniCalendar .miniCalendarContent .dayWrapper              {padding: 2px 3px;}
}

@media (min-width: 992px) {
    header                                                                      {height: 350px;}

    .navbar                                                                     {top: 2rem;}
    .navbar .nav-link                                                           {padding: .5rem 1.5rem !important;}
    .navbar .dropdown-submenu                                                   {position: relative;}
    .navbar .nav-item:hover > ul.dropdown-menu, 
    .navbar .dropdown:hover > .dropdown-menu                                    {display: block;}
    .navbar .nav-item                                                           {font-size: 1.2rem;}
    .navbar .nav-item .nav-link::before                                         {display: block; font-weight: 700;}
    .navbar .nav-item .dropdown-menu                                            {min-width: 300px; margin: 0 -150px; left: 50%; border: 0; border-radius: 0; padding: 0;}
    .navbar .dropdown-submenu > .dropdown-menu                                  {top: 0; left: 100%; margin-left: 0;}

    .navbar-nav .nav-item:first-child .nav-link                                 {border-top-left-radius: .625rem; border-bottom-left-radius: .625rem;}
    .navbar-nav .nav-item:last-child  .nav-link                                 {border-top-right-radius: .625rem; border-bottom-right-radius: .625rem;}

    .navbar-nav li ul li:first-of-type > a                                      {border-top-left-radius: .625rem; border-top-right-radius: .625rem;}
    .navbar-nav li ul li:last-of-type  > a                                      {border-bottom-left-radius: .625rem; border-bottom-right-radius: .625rem;}

    .calendar-month                                                             {border-radius: 10px 0 0 10px; margin-bottom: 0;}
    .calendar-list                                                              {border-radius: 0 10px 10px 0;}
    .content-wrapper .calendar-title, 
    .newsOS .newsBlokTitle, .newsBlokTitle a                                    {margin-top: 0;}
}

@media (max-width: 767px) {
    .slideshow-item-overlay                                                     {display: none;}
    .newsContentItem                                                            {width: 100%; margin: 0 0 10px 0;}
}

@media (max-width: 991px) {
    .search-container {
        margin: -75px 0 0 0;
        transition: margin-top 250ms;
        position: fixed;
        z-index: 3;
        top: 0;
        width: 100%;
    }
    
    .search-container.clicked {margin: 3.5rem auto auto auto;}

    /*SIDEBAR MOBILE NAV STYLING*/
    .navbar {
        padding: .5rem 0;
        margin: 0;
        max-height: 100vh;
        width: 100%;
        background: #fff;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        box-shadow: .5px .3rem .5rem rgba(0,0,0,.15) !important;
    }

    .navbar-collapse {
        height: 100vh;
        position: fixed;
        overflow: auto;
        z-index: -1;
        background: rgba(20, 20, 20, 0.9);
        transition: .5s;
        top: 0;
        left: 0;
        padding: 4rem 1rem;
        width: 100%;
      }
      
      .navbar-collapse .nav-link {
        font-size: 1.4em;
        transition: 0.3s;
      }

      .navbar-collapse.collapsing {
        height: 100%;
        transition: left 0.3s ease;
        left: -100%;
    }

    .navbar-collapse.show {
        left: 0;
        transition: left 0.3s ease-in;
    }

    .navbar .nav-link                                                           {min-width: 130px; padding-left: 1rem; padding-top: 100px; border: none !important;}
    .navbar .dropdown-menu  	                                                {border: 0; border-radius: 0;}
}