:root {
    --header: 'Open Sans', sans-serif;
    --subheader: "Inter Tight", sans-serif, system-ui;
    --bodytext: "Inter", sans-serif, system-ui;

    /*Colors*/
    --primary: #DE321B;
    --secondary:#5f646a;
    --highlight: #9e2616;
    --dark: #1b1b1b;
    --mute:#555555;
    --gray:#f5f6f6;
    --light:#e5e7e8;
    --lightBlue:#eaf1f8;
    
    /*Utilities*/
    --sliderHeight:640px;
}
body{color:var(--mute);}
body.subpage{ margin-top:120px;}
body.noScroll{ overflow:hidden;}
body::-webkit-scrollbar-track {background-color: #fff;}
body::-webkit-scrollbar { width: 5px; background-color: #fff;}
body::-webkit-scrollbar-thumb { background-color: var(--primary);}
a{color:var(--highlight); font-weight:500;}
/* 3. Base Elements */
h1, h2, h3, h4, h5, h6 {margin-top: 0;margin-bottom: 0.5rem;font-family:var(--header);font-weight: 600;text-align:left;text-rendering:optimizelegibility;line-height: 1.2;color: var(--secondary);
   a { color:inherit;}
}
.button{
    &.button-highlight {background: var(--primaryDark);border: 1px solid transparent;color: var(--white); }
}
header.Header {position: fixed;z-index: 99;top: 0;background: var(--white);transition: all .3s ease; box-shadow:0px 0px 1px rgb(9 9 9 / 30%);
    & .logo {position:relative;display: flex;flex-wrap: nowrap;justify-content: space-between;
        & img {width: 200px;padding: 10px 0;max-height: none;transition: all .3s ease;}
        button.navbar-toggler{ padding:15px; font-size:3em;}
    }
    .main-navigation {
        & ul {
            & li {
                & a, span {color: var(--dark);padding: 10px;font-size: 1.0em;border-top:2px solid transparent;font-weight: 400; cursor:pointer;}
                &.home a{font-size:0;text-align: center;padding: 8px 15px;margin: 0;
                    &:before{content:"\f424";font-family:bootstrap-icons!important;font-size: 18px;display: block;margin: 0 auto;}        
                } 
                &:hover{background:var(--primary);
                   & > a, span {color:var(--white); border-color:var(--highlight);}
                }
                ul li{
                    a{color:var(--white);}
                    &:hover{
                        a{ color:var(--dark);}
                    }
                }
            }
        }
    }               
}

.slider-block {position:relative;background: var(--dark);margin-top: 84px;}
.sliderSection {z-index: 1; position: relative;top: 0;width: 100%;left: 0;
    & .slide {
        & .caption {
            & :is(h1, h2, h3, h4){ font-family:var(--special);}
            .h1, h1 {font-size: calc(2.5rem + 1.5vw); 
                @media (min-width: 1200px) {font-size: 4rem; } 
            }
            .h2, h2 {font-size: calc(1.20rem + 0.5vw); 
                @media (min-width: 1200px) {font-size: 3.5rem; } 
            }
            .h3, h3 {font-size: calc(1.0rem + 0.075vw); 
                @media (min-width: 1200px) {font-size: 3rem; } 
            }
            p, div {font-size: calc(1.0rem + 0.05vw); 
                @media (min-width: 1200px) {font-size: 1.6rem; } 
            } 
            & .button.button-sm{ padding:10px 15px; }
        }
    }
    .tao-carousel .tao-item .item .caption { position:relative ; height:auto;}      
    @media (min-width: 0px) and (max-width: 549px) {
        --sliderHeight: 400px;
        & .slide { display:flex; flex-wrap:wrap; height:var(--sliderHeight);
            & .image{/* position:relative; */order:0;height: calc( var(--sliderHeight));width:100%;background-size:cover;background-position:center;}
            & .captionData{ order:1; height:auto;
                .caption {width:100%;/* padding:0; */}
            } 
            & .caption{
                .h1, h1 {font-size: calc(1.20rem + 1.5vw); 
                    @media (min-width: 1200px) {font-size: 3rem; } 
                }
                .h2, h2 {font-size: calc(1.4rem + 0.5vw); 
                    @media (min-width: 1200px) {font-size: 2.5rem; } 
                }
                .h3, h3 {font-size: calc(.70rem + 0.06vw); 
                    @media (min-width: 1200px) {font-size: 2rem; } 
                }
                p, div {font-size: calc(1.0rem + 0.05vw); 
                    @media (min-width: 1200px) {font-size: 1.6rem; } 
                }                
            }                  
        }  
    }                
}
.subpageHeader-block {margin-top: 86px;
    div.pageHeader{ position:relative; z-index:1;
        img{transform:scale(1); transition:all .5s ease; }
    } 
    img{ width:100%;}
}

.titleBlock {/* padding:30px 0; */
    &.white{ color:var(--white);}         
    span {font-size: 1.3rem;font-weight:400;font-family:var(--bodytext);font-weight: 500;margin: 0 0 10px;position: relative;display: inline-block;color: var(--primary);}
    .title{font-size: 2.65em;font-weight:600;font-family:var(--special);line-height: 1.0;}         
}

.homeContentCards {background: var(--white);}

/*Side nav*/
.sideNav ul{ margin-bottom:15px;}
.sideNav .highlight span, .sideNav .highlight a {background: var(--primary); color: var(--white); } 
#changeparameters_1{display:none;}
.taoGalleryBox .overlay {background:color-mix(in srgb,var(--mute) 85%,transparent) !important;}
.gallery_paging_links  span  a, .gallery_next_link_inactive, .gallery_prev_link_inactive {margin: 0 1px !important;}

.imageGallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; width: 100%; height: auto;
    .ligBox{max-width: none;}   
    @media (min-width: 0px) and (max-width: 1190px) {grid-template-columns: repeat(4, 1fr);}               
    @media (min-width: 0px) and (max-width: 778px) {grid-template-columns: repeat(3, 1fr);}
    @media (min-width: 0px) and (max-width: 479px) {grid-template-columns: repeat(2, 1fr);}               
}

.section-title {position: relative;z-index: 1;}
.section-title span.special{font-family: 'Kalam', cursive;font-size: 30px;text-transform:lowercase;color: #DE321B;line-height: 1;}
.titleBlock {
    &.white{ color:var(--white);}         
    span {font-size: 1.3rem;font-weight:400;font-family:var(--bodytext);font-weight: 500;position: relative;display: inline-block;color: var(--mute);border-bottom: 2px solid var(--primary);}
    .title{font-size: 2.65em;font-weight:600;font-family:var(--special);line-height: 1.0;}         
}

.about-block{ border-bottom: 1px solid #f9f9f9;
    img{ width:100%;}
    & .aboutContent {background:var(--light);padding: 30px;display: flex;flex-wrap: wrap;align-content: center;height: 100%;justify-content: center;}    
} 

.introBlock{ position:relative;
    &:before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background: url(/image/cache/icon-blue.svg) no-repeat;opacity: .1;background-size: auto 80%;background-position: 5% -50%;transform: rotate(0);}    
    & .container{position:relative; z-index:2;}
    & .introWrapper{box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.1);border-radius: 3px;}
    & .introText{height:100%;padding: 40px;
        & .section-title {
            span{font-family: "Kalam", cursive;font-size: 30px;text-transform:lowercase;color:var(--primary);line-height: 1;display: inline-block;}
            h2{color:var(--dark);margin-bottom:15px;line-height: 1.3;font-weight: bold;}
        }
    }
    & .aboutContentBlocks {
        & .iconBlock {display:flex;align-items: center;border-style: solid;border-width: 1px 1px 1px 1px;border-color: var(--light);border-radius: 4px 4px 4px 4px;background-color: var(--lightBlue);margin-bottom: 20px;padding: 10px;
            & .icon{min-width: 120px;
                 img{width:100%;color: #2D6A9F;padding: 0 16px;} 
            }  
            & .title.lead{font-weight:600;}
            p a {color: var(--highlight);font-size: 1.1em;
                i{vertical-align:middle;font-weight: bold;color: inherit;}  
            }
            @media (min-width: 0px) and (max-width: 549px) {flex-direction:column;}
        }    
    }                 
}
    
.featuredBlock{position:relative;overflow:hidden;height: 100%;background: var(--lightOrange);border-radius: 3px;
    div.img{ position:relative; z-index:1;
        img{transform:scale(1); transition:all .5s ease; }            
        &:after{content:'';display:block;position:absolute;width:100%;height:100%;top:0;left:0;transition:all .5s ease;background: linear-gradient(0deg, var(--secondary) 0%, rgb(255 255 255 / 15%) 100%);opacity: 0;}    
    }    
    & .details {position:relative;z-index: 9;padding: 15px 17px;transition:all .5s ease;background: var(--lightOrange);  
        h2{display:inline-block;color: var(--dark); font-size:1.3em; font-weight:600; margin:0;} 
    }   
    &:hover {
        div.img{
            img{ transform:scale(1.2);  transition:all .5s ease; }
        }
    }     
}
/*Home Events*/
.updatesBlock  { background:var(--lightBlue);}
.eventsBlock  { position:relative;}
.eventsBlock:before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background: url(/image/cache/icon-blue.svg) no-repeat;opacity: 0.1;background-size: auto 60%;background-position: 120% -25%;}
.eventsBlock .event:before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background: url(/image/cache/icon-blue.svg) no-repeat;opacity: .1;z-index: 0;background-size: auto 60%;background-position: 95% 110%;}

.event {margin: 10px 0;padding: 15px;position: relative;margin-bottom: 30px;display: flex;justify-content: flex-start;background: var(--white);align-items: center;border-radius: 5px;/* -webkit-box-shadow: 0px 0px 5px #e9e9e9; *//* box-shadow: 2px 2px 4px #e9e9e9; */
    &  .event_date {text-align: center;font-weight: 700;font-size: 1.4em;line-height: 1em;text-transform: uppercase;color: #444; 
            & .event_day {font-size: 1.5em;padding: 10px;}
            &  .event_content {padding: 10px;font-weight: normal;font-size: 1em;text-align: left;line-height: 1.5em;position: relative;z-index: 1;}
        }
    & .event_content{ padding-left:15px;
         a {font-size: 1.1em;color: var(--secondary);}
    }
    & .event_name a{ vertical-align: middle;word-break: break-word;  }
        
} 

.featuredNewsList {height:100%;display: flex;flex-direction: column;justify-content: space-between;
    .news-listing {padding: 15px;position: relative;background: #ffffff;border-radius: 5px;margin-bottom: 30px;/* -webkit-box-shadow: 5px 5px 5px #e9e9e9; *//* box-shadow: 0px 0px 5px #e9e9e9; */display: -webkit-box;display: -ms-flexbox;display: flex;flex-wrap: nowrap;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-transition: -webkit-box-shadow .35s ease;-o-transition: box-shadow .35s ease;transition: box-shadow .35s ease;
        &:before{content:'';display:block;width:100%;height:100%;position:absolute;z-index: 0;top:0;left:0;/* background: url(/image/cache/icon-blue.svg) no-repeat; */opacity: .1;background-size: auto 60%;background-position: 95% 110%;}              
        & img{width: 80px;height: 80px;object-fit:cover;}
        & .news-info{position:relative;z-index:1;padding-left: 15px;
            a{ color:var(--secondary);}
            p{ margin:0;}            
        }     
        &:last-child{/* margin-bottom:0; */}
        &:hover {-webkit-box-shadow: 0 5px 10px #dcdcdc;box-shadow: 0 5px 10px #dcdcdc;-webkit-transition: -webkit-box-shadow .35s ease;-o-transition: box-shadow .35s ease;transition: box-shadow .35s ease}
    }
}

/*Board & Staff*/

.directorRows {
    & .directorBlocks{
        & .name{flex: 0 0 auto; width: 300px;}
        & .address{display:block;text-align:left;color: var(--bodytext);
            p{padding-left: 25px;word-break: break-all;display:flex;flex-wrap: wrap;
              &.hide{display:none;}
              i{display:inline-block;margin-left: -25px; text-align:center; vertical-align:middle; width: 25px;}
              span{min-width:100%;}
            }
            a{color: var(--bodytext);}  
            & .button-sm{ padding:13px;} 
        }
    }
    
    .directorRow{display:flex;padding-bottom: 30px;align-items: stretch;height: 100%;
        & .image{min-width: 225px;
                img{width:100%;height:100%;object-fit:cover;max-height: 335px;}    
            } 
        & .biography{ padding:15px; border: 1px solid #ddd;}
        @media all and (min-width: 0px) and (max-width: 769px) {
            flex-direction:column;
            & .image{text-align:center;
                img{max-height: none;width: auto;height: auto;}    
            }
        } 
        @media all and (min-width: 0px) and (max-width: 479px) {
            & .image{text-align:center;
                img{width: 100%;}    
            }            
        }                 
    }
}

footer#footer { background:transparent; color:var(--white);
    & .footerWrapper {background: var(--secondary);padding-top: 50px;}
    & .footlogo img{width: 150px;filter: brightness(0) invert(1);/* margin-bottom: 30px; */}
    & .footerDetails{ }
    & .address{}   
    & .credentails{
        > img{width: 300px;display:block;/* margin-bottom: 30px; */}
    }
    & .footerNav{
        ul{display:flex;flex-wrap: wrap;
             li {min-width:50%;text-align: right;}        
        }  
        @media (min-width: 0px) and (max-width: 991px) {
            ul li {text-align:center;}
        }
        @media (min-width: 0px) and (max-width: 769px) {
            ul li {text-align:left;}
        }        
    }
               
    & .copyright{margin-top: 30px; 
        span{text-align:right;}
        @media all and (min-width: 0px) and (max-width: 769px) {
         nav, ul{justify-content:center;}
        }                  
    }  
    @media all and (min-width: 0px) and (max-width: 769px) {
        nav.footerNav ul li {min-width:100%;}
        & .copyright{ 
            span{text-align:center;}
        }        
    } 
}

#social {background:transparent;margin-bottom: 15px;}

@media all and (min-width: 0px) and (max-width: 991px) {}
 
@media all and (min-width: 0px) and (max-width: 779px) {
    .sliderSection{position:relative;height: auto;background: #333;}
    .sliderSection {
    & .slide {/* height:auto; */}
    }    
}

@media all and (min-width: 0px) and (max-width: 579px) {
    .sliderSection{/* margin-top: 73px; */}
}
@media all and (min-width: 0px) and (max-width: 479px) {
    .sliderSection{/* margin-top: 63px; */}
}