body                                                            {font-family: 'Open Sans', sans-serif;}
/*-------------------------------------------------------------------------------------*/
/*@HELPERS ----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.btn                                                            {border-radius: .625rem; text-transform: uppercase; 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-small                                                      {width: 40px; height: 40px; padding: 0; display: inline-flex; justify-content: center; align-items: center; transition: all 250ms;}

.z-index-0                                                      {z-index: 0 !important;}
.z-index-1                                                      {z-index: 1 !important;}
.z-index-2                                                      {z-index: 2 !important;}
.container-sm                                                   {max-width: 400px !important;}
.pointer-events-none                                            {pointer-events: none !important;}
/*-------------------------------------------------------------------------------------*/
/*@NAV --------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.navbar .nav-link                                               {border-radius: 0; padding: .5rem !important; transition: .3s;}
.navbar .nav-link::before                                       {display: none;}

.navbar .dropdown-item                                          {min-width: 250px; display: flex; justify-content: space-between; white-space: normal; text-transform: none;}
.navbar .dropdown-item::before                                  {display: none;}
.navbar .dropdown-menu                                          {border-radius: 0; margin: 0; padding: 0; border: 0; box-shadow: 0 6px 12px rgba(0,0,0,.175);}
.navbar .dropdown-submenu                                       {position: relative;}
.navbar .dropdown-submenu > .dropdown-menu                      {top: 0; left: 100%;}
.navbar .dropdown-submenu > .dropdown-item:after                {border: none;}

.navbar-toggler                                                 {position: relative; z-index: 2; left: 1rem; padding: .5rem; font-size: 1rem; border: 0; border-radius: .625rem;}
/*-------------------------------------------------------------------------------------*/
/*@SEARCH -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.btn-search                                                     {z-index: 3; border-radius: 100%;}
.btn-search::after                                              {content: '\f002'; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;}
.btn-search.clicked::after                                      {content: '\f00d';}

.btn-search-m                                                   {z-index: 1; border-radius: .625rem; top: 1rem; left: 4rem;}

.searchWrapperOnsite .searchContentWrapperOnsite                {display: flex;}
.searchWrapperOnsite .searchOnsiteSubmitWrapper a::after        {content: '\f002'; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: flex; width: 30px; height: 30px; align-items: center; justify-content: center;}

.searchWrapperOnsite input::-webkit-input-placeholder           {color: rgba(255, 255, 255, .5);}
.searchWrapperOnsite input:-moz-placeholder                     {color: rgba(255, 255, 255, .5);}
.searchWrapperOnsite input:-ms-input-placeholder                {color: rgba(255, 255, 255, .5);}
.searchWrapperOnsite input::-ms-input-placeholder               {color: rgba(255, 255, 255, .5);}

.search-container input[type=text]:focus                        {color: #333; background: #f5f5f5; outline: none; box-shadow: none; border: none;}
.search-container input::placeholder                            {color: #666; opacity: 1;}
.search-container input:-ms-input-placeholder                   {color: #666;}
.search-container input::-ms-input-placeholder                  {color: #666;}
.search-container input::-webkit-input-placeholder              {color: #666;}

.search-container .searchTextOnsite                             {height: auto; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; border: none;}

.search-container .searchOnsiteSubmitWrapper a                  {position: relative; height: 100%; padding: .5rem; border-top-right-radius: 10px; border-bottom-right-radius: 10px; display: flex; justify-content: center; align-items: center;}
.search-container .searchOnsiteSubmitWrapper a:hover            {text-decoration: none; transition: .1s;}
.searchContentWrapper                                           {display: flex; flex-wrap: wrap;}
.searchContentWrapper .buttonWrapper                            {flex: 1;}

.searchResultsWrapper .result .resultHeader .resultTitle        {line-height: 1 !important;}

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active                                   {transition: background-color 5000s ease-in-out 0s;}
.search-container                                               {top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); z-index: 2; display: none; flex-flow: column;}
.search-container.clicked                                       {display: flex;}
/*-------------------------------------------------------------------------------------*/
/*@SLIDER -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.slideshow-image                                                {height: 200px; width: 100%; background-size: cover; background-position: center;}

.slideshow-item-overlay                                         {display: flex; flex-direction: column; justify-content: center; height: 100%;}
.slideshow                                                      {position: relative; min-height: 180px; touch-action: manipulation;}
.slide                                                          {display: flex;}
.slideshow-item-image                                           {width: 100%;}
.slide > .container                                             {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

.slideshow .owl-dots                                            {position: absolute; top: 0; bottom: 0; right: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;}
.slideshow .owl-dots .owl-dot::after                            {content: "\2B24";}
/*-------------------------------------------------------------------------------------*/
/*@MAIN -------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.main-wrapper                                                   {position: relative; z-index: 1; overflow: hidden;}
.main-wrapper.extra-margin                                      {margin-top: -3.5rem;}

.quick-menu-item                                                {flex: 1 1 auto; flex-basis: 1px; height: 300px; border-radius: .625rem; overflow: hidden; text-align: center; text-transform: uppercase; font-size: 1.75rem; font-weight: 700;}
.quick-menu-item:hover                                          {text-decoration: none;}
.quick-menu-item + .quick-menu-item                             {margin: 1rem 0 0;}
.quick-menu-item-head                                           {transition: 250ms all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.quick-menu-item-image                                          {width: 100%; height: 190px;}
/*-------------------------------------------------------------------------------------*/
/*@PUZZLE -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.shape                                                          {width: 100%; overflow: hidden; position: relative; transition: 250ms all;}
.shape:hover                                                    {opacity: .85;}
.shape .albumThumbImage                                         {position: absolute; height: 100%; width: 100%; background-size: cover; background-position: center; background: url('https://basisonlinefiles.nl/front/global/images/placeholders/image89562.png') no-repeat center / cover;}

.square                                                         {height: 335px;}
 
.bg-quaternary .albumThumbImage                                 {opacity: .1;}

.albumOs                                                        {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/*-------------------------------------------------------------------------------------*/
/*@NEWS -------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.news                                                           {display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 20px;}

.news .date                                                     {display: none;}
.news .newsTitle a                                              {font-size: 28px; line-height: 35px; padding-bottom: 35px; display: flex;}
.news .readMore a                                               {font-size: 18px; text-transform: uppercase;}
.news .newsBlokTitle a, 
.news .newsTitle a, 
.news .readMore a                                               {color: #fff; font-weight: 700; text-decoration: none;}
.news .readMore a::after                                        {content: '\f30b'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-left: .625rem; display: inline-block;  transition: 250ms all;}

.news .readMore a:hover::after                                  {margin-left: 20px;}
.news .newsBlokTitle a                                          {font-size: 20px; text-transform: uppercase; display: none;}

.news .newsItemImage                                            {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; opacity: .1;}

.news .newsBlokTitle,
.news .dateTitle,
.news .readMore                                                 {position: relative; z-index: 1;}
/*-------------------------------------------------------------------------------------*/
/*@CALENDAR ---------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

/*@CALENDAR-MONTH ----------------------------------------------------------------------*/
.calendar-month                                                 {position: absolute; width: 100%; height: 100%; padding: 1rem;}
.calendar-month #miniMonthWrapper                               {max-width: 30rem; margin: 0 auto;}
.calendar-month .calendarTitle                                  {display: none;}
.calendar-month .topCalendar                                    {display: flex; padding: .5rem; align-items: center;}
.calendar-month .headerRowMiniCalendar                          {display: flex;}
.calendar-month .miniHeaderItem                                 {color: #fff; font-size: 1.2rem; font-weight: 700; max-width: 14.28%; flex: 0 0 14.28%; padding: .5rem; flex-direction: column; justify-content: center; display: flex; text-align: center;}
.calendar-month .miniCalendarContent                            {display: flex; flex-wrap: wrap; overflow: hidden;}
.calendar-month .dayWrapper                                     {display: flex; max-width: 14.28%; flex: 0 0 14.28%; flex-direction: column; align-items: center; padding: .1rem;}

.calendar-month .topCalendar .monthName                         {color: #fff; font-size: 1.8rem; text-transform: uppercase; width: 100%; text-align: center; font-weight: 700;}
.calendar-month .topCalendar .nextMonth, 
.calendar-month .topCalendar .prevMonth                         {color: #fff; cursor: pointer; font-size: 0; width: 40px; height: 100%; display: flex; justify-content: center;}
.calendar-month .topCalendar .prevMonth::after                  {content: '\f104'; font-family: 'Font Awesome 5 Free'; font-size: 1.4rem; font-weight: 900;}
.calendar-month .topCalendar .nextMonth::after                  {content: '\f105'; font-family: 'Font Awesome 5 Free'; font-size: 1.4rem; font-weight: 900;}

.calendar-month .dayHeaderItemMini                              {display: flex; justify-content: center; align-items: center; transition: 250ms ease-out;}
.calendar-month .dayHeaderItemMini::after                       {content: ''; padding-top: 100%;}

.calendar-month .dayBusy                                        {position: relative;}
.calendar-month .dayBusy::before                                {content: ''; position: absolute; height: .5rem; width: .5rem; top: .1rem; left: .1rem; border: 1px #fff solid;}

.calendar-month .topCalendar .nextMonth:hover, 
.calendar-month .topCalendar .prevMonth:hover                   {background: rgba(210, 210, 210, .25); color: #fff; transition: 250ms;}

.calendar-month .dayWrapper a                                   {width: 100%; text-align: center;}
.calendar-month .dayWrapper a:hover                             {text-decoration: none;}

/* CALENDAR ITEM */
.calendar-item                                                  {text-align: center; display: flex; height: 100%; width: 100%; position: absolute;}
.calendar-item a                                                {color: #fff;}
.calendar-item .dateDay                                         {color: rgba(255,255,255,0.5); font-size: 4rem; line-height: 60px;}
.calendar-item .dateMonth                                       {font-size: 30px;}
.calendar-item .dateDay, 
.calendar-item .dateMonth, 
.calendar-item .calendarItemTitle                               {font-weight: 700; display: block;}
.calendar-item .calendarItemTitle                               {color: #fff; text-decoration: none; font-size: 1.4rem;}
.calendar-item .calendarItem                                    {height: 100%; display: flex; justify-content: center; flex-direction: column;}
.calendar-item .calendarOSContent                               {width: 100%; height: 100%;}
/*-------------------------------------------------------------------------------------*/
/*@EXTRA ------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.sponsor-wrapper .owl-carousel                                  {z-index: 0;}
.sponsor-wrapper .owl-carousel .owl-stage, 
.sponsor-wrapper .owl-carousel .owl-item                        {display: flex; justify-content: center; transition: 250ms all ease;}
.sponsor-wrapper .owl-carousel .owl-stage-outer                 {padding-top: 3px;}
.sponsor-wrapper .owl-carousel .owl-item:hover                  {transform: translateY(-3px);}
.sponsor-wrapper .owl-item img                                  {backface-visibility: hidden;}
/*-------------------------------------------------------------------------------------*/
/*@FORM-CONTROL -----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
footer .form-control                                            {border: none !important; border-radius: 0 !important; white-space: normal;}
footer .form-group-select                                       {position: relative;}
footer .form-group-select select                                {-webkit-appearance: none; -moz-appearance: none; appearance: none; max-width: none;}
footer .form-group-select select::-ms-expand                    {display: none;}
footer .form-group-select::after                                {content: '\f107'; font-family: 'Font Awesome 5 Free'; font-weight: 700; position: absolute; top: .5rem; right: 1rem; pointer-events: none; display: inline-flex;}
/*-------------------------------------------------------------------------------------*/
/*@MEDIA-QUERIES ----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
@media (min-width: 768px) {
    .square-md                                                  {height: 670px;} 
}

@media (min-width: 992px) {
    .container-lg                                               {max-width: 400px;}
    .slideshow-image                                            {height: 500px;}

    .main-wrapper.extra-margin                                  {margin-top: -6rem;}
    .quick-menu-item + .quick-menu-item                         {margin: 0 0 0 1rem;}
    .quote-wrapper h2                                           {font-size: 3.25rem;}

    .navbar .nav-link                                           {padding: .5rem 1rem !important;}
    .navbar .dropdown-item                                      {padding: .5rem 1.5rem !important;}
    .navbar .nav-item:hover > ul.dropdown-menu, 
    .navbar .dropdown:hover > .dropdown-menu                    {display: block;}
    .navbar .nav-link::before                                   {display: inline-flex; margin-right: .5rem; font-weight: 700; font-family: 'Font Awesome 5 Free'}
}

@media (min-width: 1300px) {
    .calendar-month                                             {padding: 3rem;}
    .calendar-month .dayWrapper                                 {padding: .5rem;}
    .calendar-month .dayBusy::before                            {top: .3rem; left: .3rem;}

    .calendar-month .miniHeaderItem                             {font-size: 1.8rem;}
    .calendar-month .dayWrapper a                               {font-size: 1.8rem;}
}

@media (min-width: 300px) and (max-width: 768px) {
    .sponsor-wrapper .card                                      {max-width: 200px;}
}

@media (max-width: 767px) {
    .square-sm                                                  {height: 750px;} 
}

@media (max-width: 991px) {
    /*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;}
    .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;}
    /*SIDEBAR MOBILE NAV STYLING END*/
    .calendar-month                                             {display: flex; align-items: center;}
}