:root {
    --header: "Public Sans", sans-serif ;
    --subheader: "Inter Tight", sans-serif, system-ui; 
    --bodytext: "Inter", sans-serif, system-ui;
    --special :"Nova Square", sans-serif; 
    /*Colors*/
    --primary:#FA4132;
    --highlight:#c31f12;
    --dark: #3e3e3e;     
    --mute:#303e49;
    /*Utilities*/    
}

body{color: #303e49;}
body.noScroll{ overflow:hidden;}
body::-webkit-scrollbar-track {background-color: #fff;}
body::-webkit-scrollbar { width: 7px; background-color: #fff;}
body::-webkit-scrollbar-thumb { background-color: var(--primary);}
body.subpage .Header { background:rgb(255 255 255 / 70%);}
a{color:var(--highlight);font-weight:500;}
figure { margin:0; position:relative;
    figcaption {position: absolute;bottom: 0;right: 0;background: var(--light);color: var(--dark);display: block;padding: 3px 10px;font-size: .9em;} 
}

#modalData iframe { width: 100%; }
button.close {
  color: rgb(255, 255, 255); background: var(--dark); right: 0px; position: absolute; z-index: 99; top: 0px; width: 25px; height: 25px; line-height: 20px; font-size: 1.2em; opacity: 1; text-shadow: none; border-top-right-radius: 0.5rem;
  & span { line-height: 0; display: inline-block; }
  &:hover { background: var(--highlight); }
}

header.Header {position: fixed;width: 100%;z-index: 99;padding: 0;top: auto;left: auto;transition: all .5s ease;transform: translateY(0px);transition: all .5s ease;
    & .logo {min-width:250px;
        & svg {padding:5px 0; max-height: 70px;}
    }
    .main-navigation {
        & > ul {
            & > li { 
                & > a {padding: 30px 10px;font-size: 1rem;border-bottom: 3px solid transparent; transition:all .5s ease;
                    &:hover { border-bottom: 3px solid var(--primary);}
                }
                &.home a{font-size:0;text-align: center;padding: 28px 15px;margin: 0;
                    &:before{content:"\f425";font-family:bootstrap-icons!important;font-size: 18px;display: block;margin: 0 auto;}        
                }
                &.phone a {display:flex; align-items:center; padding: 27px 15px;margin: 0;
                    &:before{content:"\f5b4";font-family:bootstrap-icons!important;font-size: 18px; margin-right: 5px;}
                }
                
            }
        }
    }
    &.toFixed{box-shadow: 0px 0px 1px rgb(9 9 9 / 30%);transform: translateY(-100%);transition:all .3s ease;}
    &.headBg.toFixed {background: var(--primary);transition: all .5s ease;position: fixed;top: 0;transform: translateY(0px);
        & .logo{
            span{color:var(--white);}
            svg g {fill:var(--white);}
        }   
        & .navigation {
            & .iconMenu { 
                button, a{color: var(--white); 
                    &:hover{color: var(--dark);}
                } 
            }
        }               
    } 
    @media (min-width: 0px) and (max-width: 768px) {
        & .logo a {font-size:1.3em;}
        & .iconMenu {
            span{ display:none;}
            i{font-size:24px;}
        }
    }  
    @media (min-width: 0px) and (max-width: 576px) {
         & .iconMenu a{display:none;}
        & .logo a {font-size:1.2em;}
    }               
               
}

/*Slider*/
.slider-block {--sliderHeight: 100vh ;
    .sliderSection {
        & .slide {
            & .image {
                & .imagecredits {position:absolute;bottom:0;right:0;background: var(--light);color: var(--dark);display:block;padding:3px 10px;font-size: .9em;}
            }
        }
    }

    
    @media (min-width: 0px) and (max-width: 576px) {
         & .sliderSection{margin-top: 75px;}
    }    
}

.subpageHeader-block{ position:relative;
    img{ width:100%;}                     
    & .pageTitle {position:absolute;z-index: 5;top: 50%;width:100%;transform: translateY(-50%);}
    & h2{font-size:4em;font-weight:600;text-transform:uppercase;color:var(--primary);display: inline-block;border-bottom: 4px solid var(--white);}
    & .pageHeader{ position:relative;
        & .caption{position:absolute;z-index: 2;bottom:0;width:100%;left: 0;text-align: center;
            & .captionVal p{color:var(--white);}
        }             
    }
    .credits{position:absolute;bottom:0;right:0;background:var(--primary);color:var(--white);display:block;padding:3px 10px;font-size: .9em;}
    @media (min-width: 0px) and (max-width: 768px) {
        & .pageHeader {padding-top: 75px;}
    }
}

.titleBlock {padding: 15px 0;
    &.white{ color:var(--white);}         
    span {font-size: 1.953rem;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;}         
}

/*Side nav*/
.sideNav ul{ margin-bottom:15px;}
.sideNav .highlight span, .sideNav .highlight a {background: var(--primary); color: var(--white); } 

/*Gallery*/
.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);}               
}

.featuredBlock {position:relative;display: flex;flex-wrap: wrap;
     & .contentBlock {width:100%;border: 1px solid #ddd;background: var(--offwhite);
        & .details{position:relative;padding:30px;min-height: 250px;display: flex;flex-wrap: wrap;align-content: space-between;
            h2{text-transform:uppercase;font-size: 1.5625rem;font-weight: 500;color:var(--mute);}
            a{border-bottom: 2px solid var(--primary);font-weight: 400;font-size: 1.0em;}
        }        
    }
}

.about-block{background: url(/image/cache/bgpattern2.png) bottom;background-repeat: repeat-x;border-bottom: 1px solid #f9f9f9;
    img{ width:100%;}
    & .aboutContent {background:var(--light);padding: 30px;display: flex;flex-wrap: wrap;align-content: center;height: 100%;}    
}

.member-block {position:relative;background: var(--dark);
    &:after{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;/* background: url("/image/cache/memberBG.jpg") no-repeat center; *//* opacity: .3; */}
    .memberDetails {color:var(--white);position:relative;z-index:1;display: flex;background: var(--dark);padding: 60px;/* min-height: 100%; */flex-wrap: wrap;align-content: center;
        h2{color:var(--white);font-size: 1.953em;font-weight:600;text-transform:uppercase;}    
        p{font-size: 1.25rem;}
        a.button{text-transform:uppercase;font-size: 1.25em;}
    }              
}

.memberRows {background: var(--offwhite);
    & .memberLogo {text-align:center;min-height: 150px;/* border: 1px solid var(--gray); */background: var(--light);display: flex;flex-wrap: wrap;align-items: center;justify-content: center;
        a{display:flex;flex-wrap: wrap;align-items: center;}
        span {display:none;}
        img{display: block;margin: 0 auto;} 
    } 
    [class="memberLogo noImage"] span, [class="memberLogo noImage#"] span{font-weight:bold;display:block;}             
}

.memberCard {height: 100%;display: flex;flex-direction: column;flex-wrap: wrap;   
    & .memberLogo {text-align:center;}
    p{ margin:0; margin-bottom:5px;}
    address{display:block;text-align:left;margin: 0;
        p{padding-left: 25px;
          a{word-break: break-all; }
          i{display:inline-block;margin-left: -25px; text-align:center; vertical-align:middle; width: 25px;}
        } 
    }
    & [class="memberLogo noImage#"], [class="memberLogo noImage"] {/* background:var(--light) ; */
        img{width: 130px;padding: 15px;}
    }        
}
 
/*Events*/ 
.updates{
    h2{font-size: 1.5625rem;font-weight: 500;text-transform: uppercase;margin-bottom: 15px;color: var(--mute);display: inline-block;border-bottom: 2px solid var(--primary);padding-right: 15px;}
    & .eventrow {margin-bottom: 15px;padding-bottom: 5px;border: 1px dashed var(--gray);
        img {display: block;margin: 0 auto;max-height: 250px;width: auto;}
        .details { padding:10px;}
        h3{font-size: 1.2rem;}
        p{margin:0;}
        ul {margin-bottom:10px;
            li{ margin-right:15px;}
            i {color: var(--bs-gray-500);}
        }       
    }
    h3 {font-size: 1.3rem;/* margin: 0; */} 
    & .button{ font-size:.9em;}
}

/*News*/
.newsRow{margin-bottom: 15px;padding-bottom: 5px;border-bottom:1px dashed var(--gray);
    & .date { color:var(--bs-gray-500);}
}

/*Directory*/
.directoryBlock {text-align:center;height: 100%;/* border: 1px solid var(--gray); */background: var(--offwhite);
    & .image {min-height:200px;
        &.noImage{background: var(--light) url(/image/cache/logo_gray.svg) no-repeat center;background-size: 150px;}    
    }             
    & .details{padding: 15px;text-align: left;border-top: 2px solid var(--primary);
        p {padding-left: 25px;margin: 0;margin-top: 10px; 
            i{margin-left: -24px;}
            a{ font-weight:400;}  
        }          
    }
}

/*Image meta tag*/
span.imageMeta{display:block;font-size:.90em;clear: both;color: var(--dark);padding: 0 5px;margin-bottom: 10px;background: var(--light);
    &:before{content:'';}              
}

.splotLightRow { margin-bottom:15px; 
    img{ width:100%;}
    & .details {padding:10px; background:var(--white); text-align:center; border:1px solid #DDD; transition:all .3s ease;
        strong{ display:block;}           
    }
    &:hover{
        img{ opacity:.9}
        & .details{ background:var(--primary); transition:all .3s ease;
            a{ color:var(--white);}          
        }
    }
}
.spotlightDetail{
    & .images{margin-bottom: 30px;
        figure{width: 50%;margin: 0 10px;}
    }
    figcaption {padding: 3px;position: relative;text-align: center;font-style:italic;
        span{background: var(--light); padding: 3px 10px;}
    }   
    @media (min-width: 0px) and (max-width: 768px) {
        .images{flex-direction:column; 
            figure{width:100%;min-width: 100%; margin-bottom:15px;}
        }
    }    
}

#memberDues div[class*="_radio"] {display: flex;}
#total { font-weight:bold;}

#orderinfo h2 {display:none;}

#loader {position: fixed;width: 100%;height: 100vh;left: 0px;top: 0px;z-index: 99;background: rgba(26, 26, 26, 0.19);text-align: center;display: flex;justify-content: center;align-items: center;}

/*Webforms*/
.fieldgroup{clear:both;margin-top: 30px;
    & .fieldgroup_label {padding-bottom: 5px; border-bottom: 1px solid var(--primary);}
    & .fieldgroup_desc{margin-top:5px;margin-bottom: 30px;
        ul{padding-left:15px;
            li{margin-bottom:3px;}
        }                  
    }
}

/*Exhibitor Registrations*/
.planDetails img{max-width: 300px;border: 1px solid var(--gray);margin-top: 15px;}

.fieldval{
    &.sponsorships, &.event_sponsorships, &.registration_type {flex-wrap:wrap;
        & .disable{pointer-events: none; background:var(--offwhite);
            & > strong{display:block; }
            input, label{pointer-events: none;}
        }                                    
    }
    div[class*="_multicheckbox"],  div[class*="radio"]{min-width: 50%; padding-right: 15px; margin-bottom:15px;
        &.exhibitor_booth_radio{min-width:33.33%;margin-bottom: 15px;
            > div{padding-left: 20px;font-style: italic; font-size: 0.87em; }
            & .boothImage{margin:0;display: inline-block;text-align: center; 
                a{display:block;}             
            }
        }
        &.event_sponsorships, &.sponsorships_multicheckbox{padding: 10px;margin-right: 1%;border:1px solid var(--gray);flex: 0 0 auto;width: 48%;min-width: auto;
            >div{padding-left:15px;}
        }
        &.bringing_guests_radio{min-width:auto;}
        ul{padding:0; margin:0;
            li{padding-left: 4px;font-size: .93em;list-style: none;color: #333;margin-bottom: 3px;font-weight: 300;display:flex;align-items:center;
                &:before{content:"\f287";font-family:bootstrap-icons!important;font-size: 7px;display:inline-block;vertical-align: inherit;padding-right: 3px;line-height:1.2;font-weight:600;}
            }
        }
        label{font-weight: 400;}
    }
    @media (min-width: 0px) and (max-width: 991px) {
        flex-wrap:wrap;        
        div[class*="_multicheckbox"],  div[class*="radio"]{ 
            &.exhibitor_booth_radio{min-width:100%;} 
            &.event_sponsorships, &.sponsorships_multicheckbox{min-width: auto;flex: 0 0 auto;width: 100%;margin: 0;margin-bottom: 15px;}
        }        
    }
    @media (min-width: 0px) and (max-width: 768px) {


    }    
}

/*Additional Member registration*/
.taoFieldBuilder {
    & .head, & .tafb_row {display:flex;width:100%;flex-wrap: nowrap;align-items: center; text-align:center;
        span{width: 95%;line-height: 45px;
            &.tfbact{width: 5%;font-size: 22px;font-weight: bold;padding: 0;}    
        }                     
    }
    & .head{ background:#ddd;
        span  a{display: block;background:green;color:#FFF;text-align: center;}
    }
    & .tafb_row {
        span{ margin: 1px;background: #f1f1f1;
            a{display: block;background:var(--highlight);color:#FFF;text-align: center;}
            input{margin:0 1px;            
        }
    }
}
 


p[data="No Category"]{ display:none;}

@media all and (min-width: 0px) and (max-width: 991px) {} 
@media all and (min-width: 0px) and (max-width:779px) {}
@media all and (min-width: 0px) and (max-width: 579px) {}
@media all and (min-width: 0px) and (max-width: 479px) {}