body                                                                    {font-family: 'Open Sans', sans-serif;}
::selection                                                             {background: #579394; color: #fff;}
/*-------------------------------------------------------------------------------------*/
/*@CMS-CSS ----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.smartyButtonLink .smartyButton                                         {border: 0; box-shadow: none;}
.buttonWrapper select                                                   {padding: 5px;}
.smartyButtonLink .smartyButton .smartyButtonText                       {padding: .5rem;}
.buttonWrapper label::after                                             {font-size: 1rem;}

.calendarWrapper .calendarNavigation                                    {display: block !important;}
.calendarWrapper .smartyButtonLink .smartyButton                        {margin: 0 0 0 .5rem; line-height: unset;}
.calendarWrapper .calendarNavigation .calendarNavigationButton          {margin: 0;}

@media (max-width: 320px)                                               {#contentCmsBody h1 {font-size: 1.8rem !important;}}
/*-------------------------------------------------------------------------------------*/
/*@HELPERS ----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.btn {
    text-transform: uppercase; 
    transition: all 250ms; 
    white-space: normal; 
    font-weight: 700; 
    text-decoration: none; 
    padding: .8rem 2rem; 
    border: 0; 
    border-radius: 0;
}

.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: 0 0 0 .2rem rgba(255, 255, 255, 0.5) inset !important; outline: none !important;}

.btn-primary                                                            {background: #f9c13f !important; color: #fff !important;}

.btn-primary:hover, 
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active                       {background: #E68B15 !important; color: #fff !important;}

.btn-secondary                                                          {background: #fff !important; color: #4d4b45 !important;}

.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled).active, 
.btn-secondary:not(:disabled):not(.disabled):active                     {background: #eee !important; color: #579394 !important;}

.btn-tertiary                                                           {background: #fff !important; color: #f9c13f !important;}
.btn-tertiary:hover,
.btn-tertiary:not(:disabled):not(.disabled).active, 
.btn-tertiary:not(:disabled):not(.disabled):active                      {background: #eee !important; color: #f9c13f !important;}

.btn-small                                                              {width: 40px; padding: .5rem;}

.bg-primary                                                             {background: #f9c13f !important;}
.bg-secondary                                                           {background: #4d4b45 !important;}
.bg-tertiary                                                            {background: #579394 !important;}

.text-primary                                                           {color: #f9c13f !important;}
.text-secondary                                                         {color: #4d4b45 !important;}

.image                                                                  {height: 100%; width: 100%; z-index: 0;}

.shadow                                                                 {box-shadow: .5px .3rem .5rem rgba(0,0,0,.15) !important;}

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

.pointer-events-all                                                     {pointer-events: all;}
.pointer-events-none                                                    {pointer-events: none;}

.container-sm                                                           {max-width: 400px;}       
.font-18                                                                {font-size: 1.125rem !important;}   
/*-------------------------------------------------------------------------------------*/
/*@HEADER & FOOTER --------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
header .header-top                                                      {min-height: 60px;}
header .logo img                                                        {width: 400px;}

footer .logo-footer img                                                 {width: 450px;}
footer .brand img                                                       {width: 200px;}
footer .social div + div                                                {margin-left: .5rem;}

.logo-mobile                                                            {display: none; background: #fff; height: auto; width: 320px; position: absolute; top: 1.5rem; bottom: 0; left: 0; right: 0; margin: 1rem 0 0; z-index: 1; padding: .5rem;}
/*-------------------------------------------------------------------------------------*/
/*@SEARCH -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.search-container                                                       {position: fixed; z-index: 4; top: 1rem; right: 1rem; max-width: 70%; align-items: center; justify-content: center;}
.search-container.clicked                                               {margin-bottom: 0; width: 70%;}
.searchWrapperOnsite .searchContentWrapperOnsite                        {display: flex; flex-direction: row;}
.searchWrapperOnsite .searchTextOnsite                                  {color: #f9c13f; background: #f5f5f5; height: 40px; border: none; outline: none; box-shadow: none; border-radius: 0;}
.searchWrapperOnsite .searchOnsiteSubmitWrapper                         {background: #f9c13f;}
.searchWrapperOnsite .searchOnsiteSubmitWrapper:hover                   {background: #E68B15;}
.searchWrapperOnsite .searchOnsiteSubmitWrapper a                       {display: flex; height: 100%; align-items: center; text-decoration: none;}
.searchWrapperOnsite .searchOnsiteSubmitWrapper a::after                {color: #fff; content: '\f002'; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: flex; justify-content: center; align-items: center; width: 45px; height: 40px;}

.searchWrapperOnsite input::-webkit-input-placeholder                   {color: #666;}
.searchWrapperOnsite input:-moz-placeholder                             {color: #666; opacity: 1;}
.searchWrapperOnsite input::-moz-placeholder                            {color: #666; opacity: 1;}
.searchWrapperOnsite input:-ms-input-placeholder                        {color: #666;}
.searchWrapperOnsite input::-ms-input-placeholder                       {color: #666;}
.searchWrapperOnsite input::placeholder                                 {color: #666;}

.clicked .search-icon::before                                           {content: '\f00d'}
/*-------------------------------------------------------------------------------------*/
/*@NAV --------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.navbar-nav                                                             {flex-direction: column;}
.navbar-overlay                                                         {background: rgba(51, 49, 50, 0.9); height: 100vh; overflow: auto; margin-bottom: 2rem;}

.navbar .nav-link                                                       {color: #fff; transition: all 250ms; min-width: 130px; padding: .5rem 1rem; border: none !important; display: flex; justify-content: space-between; white-space: normal;}
.navbar .nav-link::before                                               {display: none;}

.navbar .dropdown-item                                                  {color: #fff; display: flex; justify-content: space-between; white-space: normal; padding: .3rem 1rem;}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:active,
.navbar .dropdown-item:focus                                            {background: rgba(255, 255, 255, 0.2); box-shadow: 0 -2px 0 #fff inset;}

.navbar .dropdown-item::before                                          {display: none;} /* Disables CMS icon-functionality */

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

.navbar .dropdown-toggle.dropdown-item                                  {background: rgba(0, 128, 0, .3); box-shadow: .5rem 0 0 0 #f9c13f inset; font-weight: 700; margin: .5rem 0;}
.subLevel.dropdown-menu .dropdown-item                                  {box-shadow: .2rem 0 0 0 rgba(255, 255, 255, .5) inset;}
.subLevel.dropdown-menu .dropdown-toggle.dropdown-item                  {background: rgba(255, 164, 46, .5);}                 
.subLevel.dropdown-menu .dropdown-submenu .subLevel.dropdown-menu       {background: transparent; display: none; flex-direction: column-reverse; margin: 0; margin-left: 1rem;}
.subLevel.dropdown-menu .dropdown-submenu .subLevel.dropdown-menu.show  {display: flex;}

.navbar .dropdown-toggle.dropdown-item::after,
.navbar .dropdown-toggle.dropdown-item[aria-expanded="true"]::after     {content: ""; font-family: 'Font Awesome 5 Free'; font-size: .8rem; font-weight: 900; display: flex; align-items: center;}

.navbar .dropdown-toggle.dropdown-item::after                           {content: "\f067"; transition: .3s transform ease-out;}
.navbar .dropdown-toggle.dropdown-item[aria-expanded="true"]::after     {content: "\f068"; transform: rotate(180deg);}

.navbar .dropdown-toggle::after                                         {margin-top: 1rem;}
.navbar .dropdown-menu  	                                            {background: transparent; border: 0;}

/* NAVBAR TOGGLE STYLING */
.navbar-toggler                                                         {position: relative; z-index: 3; height: 40px; border: 0; border-radius: 0;}
.navbar-toggler .icon-bar                                               {background: #4d4b45; display: block; width: 20px; height: 3px; border-radius: 1px; transform: rotate(0deg) translate(0px, 0px); transition: ease all .3s;}
.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(6px, 5px); 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(5px, -4px); transition: ease all .2s;}
/* NAVBAR TOGGLE STYLING END */
/*-------------------------------------------------------------------------------------*/
/*@TAAL -------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.language-wrapper .btn-language                                         {position: relative; display: flex;}
.language-wrapper .btn-language.lang-en::before                         {background: url('../images/lang_en.png') center / cover no-repeat;}
.language-wrapper .btn-language.lang-nl::before                         {background: url('../images/lang_nl.png') center / cover no-repeat;}
.language-wrapper .dropdown-toggle::after                               {display: none;}

.language-wrapper .btn-language::before                                 {content: ''; display: inline-flex; width: 100%; height: 24px;}
.language-wrapper .dropdown-menu                                        {background: rgba(51, 49, 50, 0.9) !important; box-shadow: .5px .3rem .5rem rgba(0,0,0,.15); left: auto; right: 0;}
/*-------------------------------------------------------------------------------------*/
/*@SLIDER -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.slideshow-container                                                    {background: #eee; touch-action: manipulation; min-height: 100px; max-height: 65vh;}
.slideshow-image                                                        {height: 50vh; width: auto; position: relative; background: no-repeat center / cover; border-bottom: 1.2rem #f9c13f solid;}

.slide .container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slideshow-item-overlay                                     {
    color: #fff;
    text-transform: uppercase;
}

.slideshow-item-overlay h2, .slideshow-intro                {
    font-size: 1rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-shadow: 2px 2px rgba(23, 23, 23, .5);
}

.slideshow-item-overlay h2                                  {font-weight: 700;}
/*-------------------------------------------------------------------------------------*/
/*@CONTENT ----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.main-wrapper                                               {min-height: 300px;}
.content-img .image                                         {min-height: 40vh !important;}
.bg                                                         {position: relative;}

.bg-40::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .4);  
}

.bg::before, .bg::after {
    content: '';
    display: none;
    height: 100px;
    width: 100%;
    position: absolute;
    pointer-events: none;
}
/*@BACKGROUND-SHAPES ------------------------------------------------------------------*/
.calendar-wrapper.bg::before {
    display: block;
    background: url('../images/shape-01.png') no-repeat left / contain;
    height: 250px;
    top: 5%;
    left: -75px;
}

.calendar-wrapper.bg::after {
    display: block;
    background: url('../images/shape-02.png') no-repeat right / contain;
    height: 200px;
    bottom: 5%;
    right: -75px;
}

.content-wrapper.bg::before {
    display: block;
    background: url('../images/shape-03.png') no-repeat right / contain;
    height: 300px;
    bottom: -30px;
    right: -75px;
}

.main-wrapper.content.bg::before {
    display: block;
    background: url('../images/shape-content.png') no-repeat right / contain;
    height: 800px;
    bottom: -200px;
    right: -50px;
    z-index: -1;
}

/* QUICKMENU */
.quick-menu-item + .quick-menu-item                             {margin-top: 1rem;}
.quick-menu-item:hover, .quick-menu-item:focus                  {opacity: .8; text-decoration: none; outline: none; transition: 250ms all;}
.quick-menu-item::after                                         {background: rgba(33, 33, 33, 0.05); content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 0;}
.quick-menu-item-head                                           {padding: 1rem 0; transition: 250ms all; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.quick-menu-item-name                                           {max-width: 350px; margin: 0 auto;}
.quick-menu-item-body                                           {bottom: 1rem; left: 0; right: 0;}
.quick-menu-icon                                                {top: 0; left: 0; right: 0; bottom: 0;}
.quick-menu-icon::before                                        {position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; font-size: 6rem;}
.quick-menu-image                                               {transition: 250ms all;}
.quick-menu-button .btn                                         {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;}

.quick-menu2 {margin: 20px 0;}
/*-------------------------------------------------------------------------------------*/
/*@FLOAT-MENU -------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.float-menu {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
}
/*@LANGUAGE ---------------------------------------------------------------------------*/
.float-menu .language-wrapper .lang-dropdown                    {width: 46px; height: 50px;}
.float-menu .dropdown-menu                 {
    background: #fff !important; 
    box-shadow: .5px .3rem .5rem rgba(0,0,0,.15); 
    left: auto !important;
    right: -103px;
    border: 0;
    border-radius: 0;
}
.float-menu .dropdown-item:hover,
.float-menu .dropdown-item:focus                                {background: #f9c13f; color: #fff;}
/*@BACK-TO-TOP ------------------------------------------------------------------------*/
.back-to-top                                                    {padding: .5rem 1rem !important;}
.btn-up:hover, .btn-up:focus                                    {background: #E68B15;}
.btn-up::after                                                  {content: '\f077'; font-family: 'Font Awesome 5 Free'; display: inline-block; color: inherit; font-weight: 900;}
/*-------------------------------------------------------------------------------------*/
/*@NEWS -------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.news .newsOSContent                                            {justify-content: center;}
.news .newsContentInner                                         {box-shadow: inset 0 0 0 .625rem #F1F1F1;}
.news .newsContentInner + .newsContentInner                     {margin-top: 1rem;}
.news .newsContentInner .newsItemImage                          {background: url('https://basisonlinefiles.nl/front/global/images/placeholders/image89562.png') no-repeat center / cover; width: 100%; height: 200px; max-width: 100% !important; max-height: 100% !important;}

.news .newsTitle                                                {box-shadow: inset 0 .625rem 0 0 #F1F1F1; padding: 1rem; font-size: 1.2rem; padding-top: 2rem; font-weight: 700; text-transform: uppercase;}
.news .newsTitle a                                              {color: #f9c13f;}
.news .newsTeaser                                               {padding: 0 1rem;}
.news .readMore                                                 {padding: 1rem; margin-bottom: .5rem;}
.news .readMore a                                               {color: #fff; padding: 0; font-weight: 700;}

.news .newsContentInner .readMore a                             {color: #4d4b45;}
/*-------------------------------------------------------------------------------------*/
/*@CALENDAR ---------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

/*@GENERAL ----------------------------------------------------------------------------*/
.calendar .topCalendar .monthName                               {color: #4d4b45; font-size: 1.2rem; text-transform: uppercase; width: 100%; text-align: center;}
.calendar .topCalendar .nextMonth, 
.calendar .topCalendar .prevMonth                               {color: #4d4b45; cursor: pointer; font-size: 0; width: 45px; height: 100%; display: flex; justify-content: center;}
.calendar .topCalendar .nextMonth::after                        {content: '\f0da'; font-family: 'Font Awesome 5 Free'; font-size: 1.4rem; font-weight: 900;}
.calendar .topCalendar .prevMonth::after                        {content: '\f0d9'; font-family: 'Font Awesome 5 Free'; font-size: 1.4rem; font-weight: 900;}

.calendar .dayHeaderItemMini                                    {display: flex; justify-content: center; align-items: center; border: 1px rgba(0, 0, 0, 0.04) solid; transition: 250ms ease-out;}
.calendar .dayHeaderItemMini::after                             {content: ''; padding-top: 100%;}

.calendar .dayWrapper a                                         {background: #FFFFFF; color: #4d4b45;}
.calendar .dayWrapper a:hover                                   {background: #C3C3C3; color: #fff;}
.calendar .currentDay a                                         {background: #f9c13f; color: #fff;}
.calendar .currentDay a:hover                                   {background: #E68B15;}
.calendar .dayBusy                                              {background: #8AC6C7; color: #fff;} 
.calendar .dayBusy:hover                                        {background: #579394;}

.calendar .currentDay .dayBusy                                  {background: #E68B15; color: #fff;}
.calendar .currentDay .dayBusy:hover                            {background: #CD7200;}

.calendar .otherMonth a                                         {background: #fff; color: #BCBCBC;}

.calendar .topCalendar .nextMonth:hover, 
.calendar .topCalendar .prevMonth:hover                         {background: rgba(12, 0, 3, .125); color: #fff; transition: 250ms;}

.calendar .dayWrapper a                                         {width: 100%; text-align: center; font-size: 1.2rem;}
.calendar .dayWrapper a:hover                                   {text-decoration: none;}
/*@CALENDAR-MONTH ----------------------------------------------------------------------*/
.calendar-month .calendarTitle                                  {display: none;}
.calendar-month .topCalendar                                    {background: #fff; display: flex; padding: .5rem; align-items: center;}
.calendar-month .headerRowMiniCalendar                          {display: flex; background: #bcbcbc;}
.calendar-month .miniHeaderItem                                 {background: #4d4b45; color: #fff; max-width: 14.28%; flex: 0 0 14.28%; padding: .5rem; flex-direction: column; justify-content: center; display: flex; text-align: center; text-transform: uppercase;}
.calendar-month .miniCalendarContent                            {background: #f5f5f5; 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;}
/* CALENDAR LIST -----------------------------------------------------------------------*/
.calendar-list .calendarOSHeader                                {background: #4d4b45; color: #fff; padding: .8rem; font-size: 1.2rem; text-transform: uppercase; text-align: center;}
.calendar-list .calendarOSContent                               {background: #F5F5F5;}
.calendar-list .calendarItem                                    {background: #F5F5F5; display: flex; flex-flow: column; align-items: center; transition: 250ms; cursor: pointer; padding: 1rem;}

.calendar-list .calendarItem:nth-child(even)                    {background: #fff;}
.calendar-list .calendarItem:nth-child(even) 
.calendarItemDate                                               {background: #f9c13f;}
.calendar-list .calendarItem:nth-child(even):hover 
.calendarItemDate                                               {background: #E68B15;}

.calendar-list .calendarItem:hover                              {background: #EDEDED;}
.calendar-list .calendarItem:hover .calendarItemDate            {background: #579394;}
.calendar-list .calendar-content                                {text-overflow: ellipsis; overflow: hidden;}
.calendar-list .calendarItemDate                                {background: #4d4b45; display: flex; flex-flow: column; align-items: center; height: 100%; justify-content: center; text-align: center; font-weight: 700; padding: .5rem; min-width: 80px; min-height: 80px;}
.calendar-list .calendarItemDate .dateDay                       {color: #fff; font-size: 2rem; line-height: normal;}
.calendar-list .calendarItemDate .dateMonth                     {color: #fff; font-size: 1.2rem; line-height: normal; text-transform: uppercase;}
.calendar-list .calendarItemTitle                               {color: #f9c13f; width: 100%; text-transform: uppercase; font-size: 1.125rem; text-decoration: none;}
.calendar-list .calendarItemTitle:hover                         {color: #E68B15;}
.calendar-list .calendarItemTitle,
.calendar-list .calendar-content-txt                            {min-height: 50px;}
.calendar-list .calendarItemDate:hover .dateDay,        
.calendar-list .calendarItemDate:hover .dateMonth               {color: #fff;}
.calendar-list .calendar-content-txt                            {color: #5D5D5D; font-size: 0.875rem; word-wrap: anywhere; max-width: 300px;}
/*-------------------------------------------------------------------------------------*/
/*@MEDIA-QUERIES ----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
@media (min-width: 576px) {
    .slideshow-wrapper                                  {min-height: auto;}
}

@media (min-width: 992px) { 
    .bg-lg-transparent                                  {background: transparent !important;}
    .bg-lg-white                                        {background: #fff !important;}
    .h2, h2                                             {font-size: 2.5rem;}
    .p-lg-8                                             {padding: 8rem !important;}
    .mt-lg-0                                            {margin-top: 0 !important;}
    .container-lg                                       {max-width: 400px;}  
    
    .search-container                                   {margin-top: -4.5rem; position: fixed; top: 0; left: 0; right: 0; border-radius: 0; max-width: 100%;}
    .search-container.clicked                           {margin-top: 0; width: 100%; position: fixed; top: 0; left: 0; right: 0; transition: 250ms;}
    .searchWrapperOnsite .searchTextOnsite              {background: #fff;}
    .searchWrapperOnsite .searchContentWrapperOnsite    {display: flex; flex-direction: row-reverse;}

    .slideshow-wrapper                                  {min-height: 400px; padding-top: 9rem;}
    .slideshow-image                                    {height: 65vh;}    
    .slideshow-image::before                            {display: none;}
    .slideshow-item-overlay h2, .slideshow-intro        {font-size: 3rem; margin: 0;}

    .navbar-collapse                                    {height: 100%; position: fixed; background: rgba(0, 0, 0, .3); top: 0; left: 0; right: 0; transition: 250ms ease;}
    .navbar-collapse.collapsing                         {height: 100%; top: -100%;}
    .navbar-collapse.show                               {transition: 250ms ease;}
    .navbar-overlay                                     {height: 70%; overflow-y: scroll; z-index: 2; border-bottom: .5rem #fff solid; box-shadow: 0.5px 0.3rem 0.5rem rgba(0,0,0,.15) !important; padding-top: 10rem; transition: 250ms ease;}

    .navbar-nav                                         {flex-direction: row; flex-wrap: wrap; padding-bottom: 2rem;}
    .navbar .nav-item                                   {max-width: 220px;}
    .navbar .topLevel.nav-item                          {flex-grow: 1;}
    .navbar .topLevel.nav-item + .topLevel.nav-item     {margin-left: 1rem;}
    .navbar .topLevel > .nav-link                       {pointer-events: none; cursor: default; font-size: 1.2em; padding: .5rem 1rem; text-transform: uppercase;}
    .navbar .topLevel > .dropdown-menu                  {display: block;}

    .navbar .dropdown-toggle::after                     {display: none;}

    .navbar .dropdown-menu                              {background: transparent; border: 0;}

    .quick-menu-item                                    {flex: 1 1 auto; -ms-flex: 1 1 auto; flex-basis: 1px; height: 300px;}
    .quick-menu-item + .quick-menu-item                 {margin-left: 2rem; margin-top: 0;}

    .quick-menu-item-head                               {padding: 2rem 0;}
    .calendar-list .calendarItem                        {flex-flow: row;}

    .news .newsOSContent                                {display: flex;}
    .news .newsContentInner + .newsContentInner         {margin-left: 1rem; margin-top: 0;}
}

@media (min-width: 1200px) {
    .ml-xl-10                                           {margin-left: 10rem;}
    .p-xl-8                                             {padding: 8rem !important;}
    .slideshow-item-overlay::after                      {width: 60%;}
    .slideshow-item-overlay h2, .slideshow-intro        {max-width: 70%;}
}

@media (min-width: 1400px) {
    .container-wide                                     {max-width: 1400px !important;}  
}

@media (max-width: 320px) {
    .menu-name                                          {display: none !important;}
    .slideshow-item-overlay                             {display: none !important;}
}

@media (max-width: 768px) {
    .search-container                                   {max-width: 60%;}
}

@media (max-width: 991px) {
    /*SIDEBAR MOBILE NAV STYLING*/
    .mainMenu {
        width: 100%;
    }

    .navbar {
        padding: 0;
        margin: 0;
        max-height: 100vh;
        width: 100%;
        position: fixed;
        z-index: 3;
        top: 0;
        left: 0;
        box-shadow: 0.5px 0.3rem 0.5rem rgba(0,0,0,.15) !important;
    }

    .navbar-collapse {
        height: 100%;
        position: fixed;
        overflow: auto;
        transition: .5s;
        top: 0;
        left: 0;
        margin-top: 4.5rem;
        width: 100%;
      }
      
      .navbar-collapse .nav-link {
        font-size: 1.4em;
        transition: 250ms;
      }

      .navbar-collapse.collapsing {
        height: 100%;
        transition: 250ms;
        left: -100%;
    }

    .navbar-collapse.show {
        left: 0;
        transition: 250ms;
    }

    .navbar-toggler {
        left: 1rem;
    }
}