body                                                        {font-family: 'PT Sans', sans-serif;}

::selection                                                 {background: #6B809B; color: #fff;}
a:hover                                                     {color: #617588;}

.btn {
    text-transform: lowercase;
    transition: all 250ms;
    white-space: normal;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-weight: 700;
    border-radius: .25rem;
}

.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-primary, .newsOS .readMore a                           {background: #6B809B; color: #fff;}

.btn-primary:hover, 
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active,
.readMore a:hover                                           {background: #617588; color: #fff;}

.btn-secondary                                              {background: transparent; color: #fff;}
.btn-secondary:hover                                        {background: #fff; color: #617588;}

.h2, h2                                                     {font-size: 2.625rem;}

.text-primary                                               {color: #6B809B !important;}
.text-secondary                                             {color: #4488C9 !important;}
.text-tertiary                                              {color: #BEAFB4 !important;}

.bg-primary                                                 {background: #6B809B !important;}
.bg-secondary                                               {background: #384D6C !important;}
.bg-grey                                                    {background: #F5F5F5;}
.bg-white-50                                                {background: rgba(255, 255, 255, 0.50);}

.overflow-hidden                                            {overflow: hidden;}

.image                                                      {min-height: 500px;}

.z-index-1                                                  {z-index: 1;}
.z-index-2                                                  {z-index: 2;}
.z-index-3                                                  {z-index: 3;}

.border,
.btn, 
.btn:hover, 
.btn:not(:disabled):not(.disabled).active, 
.btn:not(:disabled):not(.disabled):active,
.navbar .selected .nav-link,
.navbar .dropdown-menu                                  {border: 3px #E5E5E5 solid !important;}

.container-sm                                               {max-width: 300px;}

/*-------------------------------------------------------------------------------------*/
/*@HEADER -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

.logo                                                       {width: 300px;}
.logo-footer img                                            {width: 250px;}
.logo-gezonde-school img                                    {width: 95px;}
.logo-stichting img                                         {width: 250px;}

/*-------------------------------------------------------------------------------------*/
/*@SEARCH -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

.search-container {
    transition: margin-top 250ms;
    position: fixed;
    z-index: 4;
    top: 9px;
    max-width: 70%;
    align-items: center;
    justify-content: center;
    right: 1rem;
}

.searchWrapperOnsite .searchContentWrapperOnsite            {display: flex; flex-direction: row;}
.searchWrapperOnsite .searchTextOnsite                      {color: #6B809B; background: transparent; border: none; outline: none; box-shadow: none; border-radius: 0; text-transform: uppercase;}
.searchWrapperOnsite .searchOnsiteSubmitWrapper             {border: 1px solid transparent; display: inline-flex; align-items: center; cursor: pointer; vertical-align: middle; position: absolute; right: 0;}
.searchWrapperOnsite .searchOnsiteSubmitWrapper:hover       {background: #fff; border-radius: 100%;}
.searchWrapperOnsite .searchOnsiteSubmitWrapper a           {display: block; height: 100%; padding: 4px 8.5px;}
.searchWrapperOnsite .searchOnsiteSubmitWrapper a::after    {content: '\f002'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #6B809B; display: inline-block;}

.searchWrapperOnsite input::-webkit-input-placeholder       {color: #6B809B;}
.searchWrapperOnsite input:-moz-placeholder                 {color: #6B809B;}
.searchWrapperOnsite input:-ms-input-placeholder            {color: #6B809B;}
.searchWrapperOnsite input::-ms-input-placeholder           {color: #6B809B;}

.search-container.clicked {margin: auto auto 0 auto; width: 70%;}

/*-------------------------------------------------------------------------------------*/
/*@NAV --------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

.navbar .nav-link                                           {color: #BEAFB4;}
.navbar .nav-link:hover                                     {background: #f5f5f5; color: #6B809B;}
.navbar .nav-link::before                                   {display: none;}

.navbar .selected .nav-link                                 {color: #fff !important; background: #6B809B;}

.navbar .dropdown-item                                      {color: #6B809B; text-transform: lowercase; display: flex; justify-content: space-between;}
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus  {color: #6B809B;}
.navbar .dropdown-item::before                              {display: none;}
.navbar .nav-link:before.dropdown,
.navbar .dropdown-submenu                                   {position: relative;}
.navbar .dropdown-toggle.dropdown-item                      {background: #f5f5f5; font-weight: 700;}
.navbar .dropdown-menu                                      {margin: 0;}

.navbar .dropdown:hover .nav-link                           {color: #6B809B;}

.navbar .dropdown.show .nav-link                            {background: #f5f5f5; color: #6B809B !important;}

.navbar .dropdown-submenu > .dropdown-menu                  {top: 0; left: 100%;}
.navbar .dropdown-submenu > .dropdown-item:after            {content: "\f0da"; font-family: 'Font Awesome 5 Free'; font-weight: 900; border: none;}

/* NAVBAR TOGGLE STYLING */
.navbar-toggler {
    background: #f5f5f5;  
    position: relative;
    z-index: 2;
    left: 1rem;
    padding: 0.6rem;
}

.navbar-toggler .icon-bar { 
    background: #6B809B;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    transform: rotate(0deg) translate(0px, 0px); 
    transition: ease all .2s;
}

.navbar-toggler .icon-bar:nth-child(2)                      {width: 16px; transition: ease all .2s;}
.navbar-toggler .icon-bar + .icon-bar                       {margin-top: 4px;}
.navbar-toggler:hover > .icon-bar:nth-child(2)              {width: 22px; transition: ease all .2s;}
.navbar-toggler:active > .icon-bar:nth-child(2)             {width: 22px; transition: ease all .2s;}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1)      {transform: rotate(45deg) translate(5px, 4px); transition: ease all .2s;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2)      {opacity: 0; transition: ease all .2s;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3)      {transform: rotate(-45deg) translate(4px, -4px); transition: ease all .2s;}
/* NAVBAR TOGGLE STYLING END */

.dropdown-item:active, 
.dropdown-item:focus, 
.dropdown-item:hover                                        {background: transparent; color: #fff;}

.search-wrapper .nav-link.search                            {color: #BEAFB4 !important; cursor: pointer;}
.search-wrapper .nav-link.search:hover                      {color: #6B809B !important;}

/*-------------------------------------------------------------------------------------*/
/*@SLIDER -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

.slideshow-wrapper                                          {touch-action: manipulation; min-height: 100px;}
.slideshow-image                                            {position: relative; background: no-repeat center / cover; height: 520px; width: auto;}
.slideshow-image::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.15);
}

.slide .container                                           {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.slideshow-item-overlay                                     {
    color: #fff;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    top: 20%;
}

.slideshow-item-overlay h2, .slideshow-intro                {font-size: 2.625rem; font-weight: 700; font-style: italic; margin: 0;}

/*-------------------------------------------------------------------------------------*/
/*@CONTENT ----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

.image {    
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    min-height: auto;
}

.image-default {
    background: url(/images/default.png) no-repeat center / contain;
}

.image::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.15);
}

.image-calendar {
    background: url(/images/content-bg.png) no-repeat center / cover;
    z-index: -1;
}

/* QUICKMENU */
.quick-menu-item                                                {display: block; flex: 1 1 auto; flex-basis: 1px; max-height: 300px;}

.quick-menu-item:nth-child(3n+1) .quick-menu-item-head,
.quick-menu-item:nth-child(3n+1) .btn-primary                   {background: #6B809B;}
.quick-menu-item:nth-child(3n+2) .quick-menu-item-head,
.quick-menu-item:nth-child(3n+2) .btn-primary                   {background: #384D6C;}
.quick-menu-item:nth-child(3n+3) .quick-menu-item-head,
.quick-menu-item:nth-child(3n+3) .btn-primary                   {background: #BEAFB4;}

.quick-menu-item:nth-child(3n+1):hover .quick-menu-item-head,
.quick-menu-item:nth-child(3n+1) .btn-primary:hover             {background: #617588;}
.quick-menu-item:nth-child(3n+2):hover .quick-menu-item-head,
.quick-menu-item:nth-child(3n+2) .btn-primary:hover             {background: #2E3F57;}
.quick-menu-item:nth-child(3n+3):hover .quick-menu-item-head,
.quick-menu-item:nth-child(3n+3) .btn-primary:hover             {background: #A59A9E;}

.quick-menu-item:hover, .quick-menu-item:focus                  {color: rgb(175, 164, 164); text-decoration: none; outline: none;}
.quick-menu-item:hover .quick-menu-image                        {opacity: 0.8;}
.quick-menu-item + .quick-menu-item                             {margin: 1rem 0 0;}

.quick-menu-item-head                                           {padding: 1rem 0; transition: 250ms all; font-size: 1.2rem;}

.quick-menu-image                                               {background: url('/images/default.png') no-repeat center / cover; width: 100%; height: 200px; transition: 250ms all;}
.quick-menu-button                                              {bottom: 1rem;}

/*-------------------------------------------------------------------------------------*/
/*@BACK-TO-TOP ------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

.back-to-top {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    display: none;
}

.btn-up:hover, .btn-up:focus    {background: #2d3e57;}
.btn-up::after {
    content: '\f077';
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    color: inherit;
    font-weight: 900;
}

/*-------------------------------------------------------------------------------------*/
/*@CALENDAR ---------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

.calendar-wrapper::before, .calendar-wrapper::after    {content: ''; position: absolute; width: 100%; pointer-events: none;}
.calendar-wrapper::before {
    background: url(/images/calendar-bg.png) no-repeat left / contain;
    height: 100%;
}             

/*@GENERAL ----------------------------------------------------------------------------*/
.miniMonthWrapper .topCalendar .monthName               {color: #fff; text-transform: uppercase; width: 100%; text-align: center;}
.miniMonthWrapper .topCalendar .nextMonth, 
.miniMonthWrapper .topCalendar .prevMonth               {color: #fff; cursor: pointer; font-size: 0; width: 35px; height: 30px; text-align: center;}
.miniMonthWrapper .topCalendar .nextMonth::after        {content: '\f0da'; font-family: 'Font Awesome 5 Free'; display: inline-block; font-size: 22px; font-weight: 900;}
.miniMonthWrapper .topCalendar .prevMonth::after        {content: '\f0d9'; font-family: 'Font Awesome 5 Free'; display: inline-block; font-size: 22px; font-weight: 900;}

.miniMonthWrapper .dayWrapper .dayHeaderItemMini        {background: #f5f5f5; color: #6e6e6e; display: flex; justify-content: center; align-items: center; transition: 250ms ease-out;}
.miniMonthWrapper .dayWrapper .dayHeaderItemMini:hover  {background: #C3C3C3 !important; color: #fff !important;}
.miniMonthWrapper .dayWrapper .dayHeaderItemMini::after {content: ''; display: inline-block; padding-top: 100%;}
.miniMonthWrapper .currentDay .dayHeaderItemMini        {color: #fff !important; background: #6B809B !important;}
.miniMonthWrapper .otherMonth .dayHeaderItemMini        {background: #fff; color: rgba(110,110,110,.6);}

.miniMonthWrapper .topCalendar .nextMonth:hover, 
.miniMonthWrapper .topCalendar .prevMonth:hover         {background: #6B809B; color: #fff; transition: 250ms;}

.miniMonthWrapper .dayWrapper a                         {width: 100%; text-align: center;}
.miniMonthWrapper .dayWrapper a:hover                   {text-decoration: none;}
.miniMonthWrapper .dayBusy                              {background: #BEAFB4 !important; color: #fff !important} 

/*@CALENDAR LEFT ----------------------------------------------------------------------*/
.calendar-left, .calendar-right                         {width: 100%;}

.calendarOS .calendarOverview                           {text-align: center;}
.calendar-left .calendarTitle                           {display: none;}
.calendar-left .calendarOS .calendarOSHeader, 
.calendar-left .calendarOS .calendarOSContent, 
.calendar-btn .calendarOS .calendarOSHeader, 
.calendar-btn .calendarOS .calendarOSContent            {display: none;}
.calendar-left .miniMonthHeader                         {position: absolute; top: -115px; left: 0; right: 0;}
.miniMonthWrapper .topCalendar                          {background: #6B809B; display: flex; padding: .625rem; align-items: center;}
.miniMonthWrapper .headerRowMiniCalendar                {display: flex; background: #bcbcbc;}
.miniMonthWrapper .miniHeaderItem                       {background: #384D6C; color: #fff; max-width: 14.28%; flex: 0 0 14.28%; padding: .4375rem 0; flex-direction: column; justify-content: center; display: flex; text-align: center; text-transform: uppercase;}
.miniMonthWrapper .miniCalendarContent                  {background: #f5f5f5; display: flex; flex-wrap: wrap; overflow: hidden;}
.miniMonthWrapper .dayWrapper                           {display: flex; max-width: 14.28%; flex: 0 0 14.28%; flex-direction: column; align-items: center;}

/*@CALENDAR RIGHT ---------------------------------------------------------------------*/
.calendar-right                                         {margin: 1rem 0 0;}
.calendar-right .calendarOS, 
.calendar-right .calendarOSContent, 
.calendar-right .calendarItem                           {height: 100%;}
.calendar-right .calendarItem                           {background: #f5f5f5; display: flex; flex-flow: column-reverse; justify-content: center; align-items: center;}
.calendar-right .calendarItemTitle                      {background: #6B809B; color: #fff; width: 100%; text-align: center; text-transform: uppercase; padding: .8rem .625rem; font-size: 1rem;}
.calendar-right .calendarItemDate                       {display: flex; flex-flow: column; align-items: center; height: 100%; justify-content: center; font-weight: 700;}
.calendar-right .calendarItemDate .dateDay              {color: #BEAFB4; font-size: 7rem; line-height: normal; margin-bottom: -20px;}
.calendar-right .calendarItemDate .dateMonth            {color: #5D5D5D; font-size: 4rem; line-height: normal; text-transform: uppercase;}

.calendar .floatDivider                                 {display: none;}
.calendarWrapper .calendarNavigation                    {width: 289px;}
.calendarNavigation                                     {display: flex !important;}

/*-------------------------------------------------------------------------------------*/
/*@MEDIA-QUERIES ----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

@media (min-width: 767px) {
    .quick-menu                                                                 {margin-top: -5.5rem; z-index: 1;}
    .newsOS .newsOSContent                                                      {flex-direction: row;}
    .newsOS .newsContentItem + .newsContentItem                                 {margin: 0 0 0 3rem;}
    .navbar .dropdown-submenu, .navbar .dropdown-submenu > .dropdown-menu       {margin: 0;} 
    footer span + span                                                          {margin-left: .5rem; padding-left: .5rem; border-left: 1px solid;}
}

@media (min-width: 992px) {
    .container-md                                                               {max-width: 630px;}
    .rounded-lg-0                                                               {border-radius: 0 !important; border: 0 !important;}
    
    .search-container                                                           {margin: -2.6rem 0 0 0; transition: margin-top 250ms; position: static; border-radius: 0; max-width: 100%;}
    .search-container.clicked                                                   {margin: 0 auto auto auto; width: 100%;}
    .searchWrapperOnsite .searchContentWrapperOnsite                            {display: flex; flex-direction: row-reverse;}
    .searchWrapperOnsite .searchOnsiteSubmitWrapper                             {position: relative;}

    .navbar .nav-link                                                           {font-size: 1.25rem; padding: 1rem 1.5rem !important}

    .navbar .dropdown:hover > .dropdown-menu                                    {display: block;}
    .navbar .dropdown-menu, .dropdown-submenu                                   {margin: 0; padding: 0; border: 0; border-radius: 5px;}
    
    .navbar .dropdown                                                           {display: inline-flex;}
    .navbar .dropdown .nav-item                                                 {position: relative;}
    .navbar .dropdown-menu .nav-link                                            {color: #6B809B;}
    .navbar .dropdown-menu .nav-link:hover                                      {color: #fff;}
    .navbar .dropdown:hover .nav-link                                           {color: #6B809B !important;}
    .navbar .dropdown:hover .nav-link,
    .navbar .dropdown-menu, .dropdown-submenu                                   {background: #f5f5f5;}
    .navbar-toggler:not(:disabled):not(.disabled)                               {outline: none;}

    .dropdown-item                                                              {padding: 0.5rem 1.5rem;}
    .dropdown-item:hover                                                        {background: transparent; color: #fff;}
    
    .navbar .dropdown-menu .selected .nav-link                                  {box-shadow: none;}
    .navbar .dropdown-toggle::after                                             {display: inline-flex;}

    .navbar .nav-item:hover > ul.dropdown-menu, 
    .navbar .dropdown:hover > .dropdown-menu                                    {display: block;}

    .quick-menu-item                                                            {max-width: 300px;}
    .quick-menu-item + .quick-menu-item                                         {margin: 0 0 0 5rem;} 
    .quick-menu-item-head                                                       {font-size: 1.4rem;}
    
    .calendar-right                                                             {margin: 0 0 0 2.5rem;}
    .miniMonthWrapper .miniHeaderItem,
    .miniMonthWrapper .dayWrapper                                               {max-width: 14.29%;}
}

@media (max-width: 991px) {
    /*SIDEBAR MOBILE NAV STYLING*/
    .navbar {
        padding: 0;
        margin: 0;
        max-height: 100vh;
        height: 60px;
        width: 100%;
        background: #fff;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        box-shadow: 0.5px 0.3rem 0.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: 0.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; border: none !important;}
    .navbar .dropdown-menu  	                            {background: #fff; border: 0;}
}