/*
Theme Name: CMS Demo
Description: Designed to be flexible, versatile theme. Its collection of templates and patterns tailor to different needs.. A multitude of possibilities open up with just a few adjustments to color and typography. This theme comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 5.9
Tested up to: 6.1.1
Requires PHP: 7.4
Author: Invision Web
Author URI: https://www.invisionweb.ca
Version: 3.4.69
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: CVSD
*/


.absolute {
     position: absolute;
     z-index: 10;
     right: 0;
     left: 0;
     top: 0px;
}

.text-white {
     color: #FFF;
}


.alert {
    background-color: #DDD;
    box-sizing: border-box;
    color: #333;
    padding: 20px 48px;
}
.alert-red {
    background-color: #a83a3a;
    color: #FFF;
}
.alert-green {
    background-color: #58bf81;
    color: #0c4824;
}
.alert-yellow {
    background-color: #efe683;
    color: #625d20;
}
.alert-blue {
    background-color: #83c3ef;
    color: #1f5287;
}
.wp-block-template-part {
   margin-top: 0;
}

.news-post-feature-image {
    height: 200px;
    overflow: hidden;
}


.flex-container {
     display: flex;
     /*margin: -10px;*/
 }
 
 .flex-container > div {
     flex: 1 1 25%; /* Initial width of 25% for 4 columns */
     margin-right: 1.5em;
     max-width: 25%; /* Prevent wrapping on desktop */
     background-color: #f6f6f6;
     border: 1px solid #e6e3e3;
 }
 .flex-container > div:last-child {
     margin-right: 0;
 }
 @media (max-width: 1200px) {
     .flex-container > div {
         flex: 1 1 33.33%; /* 3 columns for medium screens */
         max-width: 33.33%; /* Ensure no wrapping */
     }
 }
 
 @media (max-width: 768px) { /* iPad screen width */
     .flex-container > div {
         flex: 1 1 50%; /* 2 columns for iPad screens */
         max-width: 50%; /* Ensure no wrapping */
     }
 }
 
 @media (max-width: 500px) {
     .flex-container > div {
         flex: 1 1 100%; /* 1 column for extra small screens */
         max-width: 100%; /* Ensure no wrapping */
     }
 }
.flex-container .news-wrapper {
     padding: 1.5em 2em;
}


 
 .event-slider {
     display: flex;
     overflow: hidden;
 justify-content: space-evenly;
 }
 
 .event-slide {
     text-align: center;
     padding: 10px;
 }
 
 .event-icon {
     font-size: 2rem;
     margin-bottom: 10px;
 }
 
 .event-title {
     font-size: 1.25rem;
     font-weight: bold;
     margin-bottom: 5px;
 }
 
 .event-date {
     font-size: 1rem;
     color: #666;
 }
 
 .alert p {
     display: inline;
 }