/*@import url("/image/cache/bootstrap-reboot.min.css");
@import url("/image/cache/bootstrap-grid.min.css");
@import url("/image/cache/bootstrap-utilities.min.css"); */

/*Tao default theme styles*/
:root {
    /*Fonts*/
    --header: "Poppins", sans-serif;    
    --subheader: "Inter Tight", sans-serif, system-ui; 
    --bodytext: "Inter", sans-serif, system-ui;     
    /*Colors*/
    --primary:#C45500;
    --highlight:#147cbb;
    --dark: #334652;     
    --text:#1c2730;
    --mute:#303e49;
    --gray:#dfebee; 
    --light:#f2f7f9;
    --offwhite:#FAF9F6;
    --white: #FFFFFF;
    --error:#ea1000;
    /*Utilities*/
    --sliderHeight:600px;
    @keyframes spinner-border{100% transform: rotate(360deg);}
}



/* 1. Reset/Normalize */
html{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-family:sans-serif; scroll-behavior:smooth;}
body{color:var(--text);  display:flex; flex-direction:column; font-family:var(--bodytext); font-size: .97rem;font-weight: 400;line-height: 1.5; margin:0; position:relative; text-align:left;  size-adjust: 105%; ascent-override: 92%; descent-override: 28%; line-gap-override: 0%;}
button, input, optgroup {margin: 0; font: inherit; color: inherit;  border: 1px solid var(--gray); }
button {overflow: visible; -webkit-appearance: button;}   
.button, input[type="button"], input[type="reset"], input[type="submit"] {display: inline-block; line-height: 1; width:auto; background-color: var(--primary); color: var(--white); fill: var(--white); text-align: center; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-size: 1.2em; font-weight: 400; border-radius: 5px; padding: 15px 30px;
    &:hover {background:var(--dark); color: var(--white); }
    &:active {background: var(--gray); }
}
input {line-height: normal;
    &[type="checkbox"], &[type="radio"] {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0 3px; }
    &[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button {height: auto; }
    &[type="email"], &[type="password"], &[type="tel"], &[type="text"], &[type="number"] {width: 100%; min-height: 40px; background-color: color-mix(in srgb, var(--gray) 25%, transparent); border: 1px solid color-mix(in srgb, var(--gray) 70%, transparent); padding: 10px; text-align: left; color: var(--text); border-radius: 5px;
        &::-webkit-input-placeholder {font-family: "Inter", sans-serif;color: var(--dark); }
        &::-moz-placeholder {font-family: "Inter", sans-serif; color: var(--dark); }
        &:-ms-input-placeholder {font-family: "Inter", sans-serif; color: var(--dark); }
        &:-moz-placeholder {font-family: "Inter", sans-serif; color: var(--dark); }
        &:focus::-webkit-input-placeholder, &:focus::-moz-placeholder, &:focus:-moz-placeholder, &:focus:-ms-input-placeholder {color: transparent; }
    }
    &[type="radio"] {display: block;float: left; margin-right: 10px; } 
}
select, textarea {width:100%;background-color: color-mix(in srgb, var(--gray) 25%, transparent); border: 1px solid color-mix(in srgb, var(--gray) 70%, transparent); padding: 10px; text-align: left; color: var(--text); border-radius: 5px;
    &::-ms-expand {display: none; }
    &::-moz-focus-inner, input::-moz-focus-inner {padding: 0;border: 0;}                  
    &::-webkit-input-placeholder, &::-moz-placeholder, &:-ms-input-placeholder, &:-moz-placeholder {color: var(--dark); }
    &:focus::-webkit-input-placeholder, &:focus::-moz-placeholder, &:focus:-moz-placeholder, &:focus:-ms-input-placeholder {color: transparent; }
}

/* 2. Global Styles */
#layout{background:var(--white); display:flex; flex-direction:column; left:0; min-height:100vh; min-width:100%; position:relative; top:0; width:100%; overflow: hidden;}
#wrapper{flex:1 0 auto; height:auto; margin:0 auto; position:relative; width:100%;}
header h1{display:none;}

/* 3. Base Elements */
h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 0.5rem; font-family:var(--header); font-weight: 500; text-align:left; text-rendering:optimizelegibility; line-height: 1.2; color:var(--dark);
   a { color:inherit;}
}
.h1, h1 {font-size: calc(1.375rem + 1.5vw); 
    @media (min-width: 1200px) {font-size: 2.5rem; } 
}
.h2, h2 {font-size: calc(1.3rem + 0.6vw); 
    @media (min-width: 1200px) {font-size: 1.75rem; } 
}
.h3, h3 {font-size: calc(1.25625rem + 0.075vw); 
    @media (min-width: 1200px) {font-size: 1.3125rem; } 
}
.h4, h4 {font-size: 1.125rem; }
.h5, h5 {font-size: 1rem; }
.h6, h6 {font-size: 0.875rem; }

img {border:0; max-width: 100% !important; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic;}
strong, b {font-weight:bold;}
p{line-height:1.7em; margin:.5em 0;}
a{-moz-transition:all .4s ease; -o-transition:all .4s ease; -webkit-transition:all .4s ease; color:var(--primary); text-decoration:none; transition:all .4s ease;
    &:hover, &:focus{color:var(--highlight); text-decoration:none;}
}
/*Helper classs*/
.hide{display:none;}
/* 4. Components */
/*Buttons*/
.button {-o-transition: all 0.3s; -webkit-transition: all 0.3s; background-color: var(--primary); border-radius: 5px; color: var(--white); display: inline-block; fill: var(--white); font-size: 1.2em; font-weight: 400; line-height: 1; padding: 10px 30px; text-align: center; transition: all 0.3s;
    &.button-lg {font-size: 1.5em; padding: 20px 30px; }
    &.button-sm {border-radius:0.25rem; padding:0.5rem .85rem; font-size: 0.9rem;}

    &.button-primary {background: var(--primary); border: 1px solid transparent; color: var(--white);
        &:hover {background: var(--highlight); }
        &.button-lines { border-color: var(--primary); color: var(--primary); }
        &.button-lines:hover {background: var(--primary); color: var(--white); }
    }

    &.button-highlight {background: var(--highlight); border: 1px solid transparent; color: var(--white); 
        &:hover {background: var(--primary); } 
        &.button-lines { border-color: var(--highlight); color: var(--highlight); } 
        &.button-lines:hover {background: var(--highlight); color: var(--white); } 
    }
    &.button-white {background: var(--white); border: 1px solid transparent; color: var(--dark); 
        &:hover {background: var(--dark); color:var(--white);} 
        &.button-lines { border-color: var(--white); color: var(--white); } 
        &.button-lines:hover {background: var(--dadrk); color: var(--white); } 
    }  
    &.button-dark {background: var(--dark); border: 1px solid transparent; color: var(--white); 
        &:hover {background: var(--white); color:var(--dark);} 
        &.button-lines { border-color: var(--dark); color: var(--dark); } 
        &.button-lines:hover {background: var(--dark); color: var(--white); } 
    }   
    &.button-lines {background: transparent; border-width: .11em; }         
    &.button-arrow {
        &:after {content: ""; display: inline-block; font-family:bootstrap-icons!important; font-size: 40px; line-height: 30px; padding: 0 0 0 4px; vertical-align: middle; }
        &.right:after {content:"\f135"; } 
        &.left:after {content:"\f12c"; } 
        &.down:after {content:"\f124"; } 
        &.up:after {content:"\f145"; }         
        &.button-sm:after {font-size:26px;line-height: 0;}          
    }
}

/*Skip button*/
.skip-to-main-content-link {display: block;position: absolute;left: -999px;top: -999px; 
    &:focus{left: 0;top: 0;z-index: 99;padding: 3px;background: #ffc;border:1px solid var(--primary);}
}
:focus,:focus-visible{outline:1px dashed var(--primary);}
/*Default paging styles*/
#form_paging_links, #calendar_paging_links, #paging_links, #newschannel_paging_links, .gallery_paging_links {clear: both; float: none; margin: 10px 0; margin-top: 50px; text-align: center; display:flex; justify-content:center;
    &:after {clear: both; content: ''; display: table; }
    span {display: inline-block; text-align: center;
        a, &.gallery_next_link_inactive, &.gallery_prev_link_inactive{font-weight:300; font-size:.9em; text-transform:uppercase; padding:5px 15px; background:var(--light); color: var(--text); display: block; padding: 5px 10px; display:flex; align-items:center; margin:0 15px;
            &:hover{background: var(--primary); color: var(--white); text-decoration: none;} 
        }
        &.gallery_next_link_inactive, &.gallery_prev_link_inactive{color:color-mix(in srgb, var(--mute) 50%, transparent);
            &:hover{background:color-mix(in srgb, var(--gray) 85%, transparent); color:color-mix(in srgb, var(--mute) 50%, transparent)}
        }
        &.gallery_prev_link
        a:before, &.gallery_next_link a:after, &.gallery_next_link_inactive:after, &.gallery_prev_link_inactive:before{content:""; font-family:bootstrap-icons!important; display:inline-block; vertical-align:middle; line-height: 1;}
        &.gallery_prev_link
        a:before, &.gallery_prev_link_inactive:before{content:"\f22d";}
        &.gallery_next_link
        a:after, &.gallery_next_link_inactive:after{content:"\f231";}
        .currentpage {background: var(--highlight); color: var(--white);
            &.gallery_prev_link_inactive, &.gallery_next_link_inactive {display: none; }
        }
    }
}                                                                                                     
#paging_links {
    span {
        &.next_link {width: auto; }
        &.prev_link_inactive, &.next_link_inactive {display: none; }
    }
}
/*Login*/
form#changepass, .general_login, #sendinstructions {border: 1px solid #e9e9e9; margin: 0 auto; max-width: 360px; padding: 15px; text-align: left;
    h2, .logintitle {background: transparent; color: var(--dark); font-size: 18px; font-weight: 400; line-height: 25px; }
    .loginmessage {font-style: italic; margin-bottom: 20px; }
    .row {display: flex; flex-direction: column; margin: 10px 0; text-align: left;
        label, .label {min-width: 100px; text-align: left; }
        label {display: block; font-weight: 400; margin-bottom: 0; }
        span, .formw {display: inline-block; vertical-align: middle; }
        span {display: block;
            input {max-width: 100%; }
            .pwdlevel {font-size: .8em; font-style: italic; }
        }
        &:last-child {text-align: center;
            label {display: none;}
        }
    }
    .loginbtn {flex-direction: inherit; justify-content: center; text-align: center;
        input {width: auto; } 
    }
    .forgotpassword, .errmsg {text-align: center;
        &.errmsg {color:var(--primary); font-size: .84em; overflow: hidden; padding: 0; }
    }
    .remember {flex-direction: row; }
}
#filter {display: none; }
/*Search*/
.searchBlock {
    & .searchBlock_backdrop{background: color-mix(in srgb, var(--text) 30%, transparent);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999; display:none;}
    & .searchBlock_body {height: auto; left: 0; padding: 15px 0; position: fixed; top: 0; transform: translateY(-200px); width: 100%; z-index: 9999; transition:all .5s ease;
        & .container {height: 100%; position: relative; }
        & .search_Close {color: var(--white); display: none; position: relative; top: 120px; }
        & .searchBlock {position: relative;
            form {display: flex; flex-wrap: wrap; min-width: 100%; width: 100%;
                label {color: var(--highlight); display: none; font-family: var(--bodytext); font-size: 5em; font-weight: 600; min-width: 100%; text-transform: uppercase; }
                & .fieldsRow {display: flex; width: 100%;
                    #textfield {background: var(--white); border: 1px solid var(--gray); width:100%; border-bottom-left-radius: 5px; border-top-left-radius: 5px; font-size: 1.5em; margin: 0; padding: 20px; }
                    input[type="submit"] {background: transparent; border-bottom-right-radius: 5px; border-radius: 0; border-top-right-radius: 5px; font-size: 0; height: 100%; width: 80px; }
                    span {background: var(--primary); border: 1px solid var(--gray); border-bottom-right-radius: 5px; border-left: 0; border-top-right-radius: 5px; display: block; height: 100%; position: absolute; right: 0; top: 0; width: 80px; z-index: -1; 
                        &:after {color: var(--white); content:"\f52a"; display: block; font-family: bootstrap-icons!important; font-size: 30px;  width:80px; height:80px; line-height: 80px; text-align: center;} }
                }
            }
        }
    }
    &.show {
        & .searchBlock_body {  transform:translateY(100px); transition:all .5s ease; }
        & .searchBlock_backdrop {display: block; }
    }
}
/*Search form*/
form#sitesearch {display: flex; margin-bottom: 15px;
    input {margin: 0;
        &[type="text"] {border-bottom-left-radius: 5px; border-radius: 0; border-top-left-radius: 5px; }
        &[type="submit"] {border-bottom-right-radius: 5px; border-radius: 0; border-top-right-radius: 5px; }
    }
}
/*Search Results*/
#searchresults {padding: 15px 0;
    & .search_url {border-bottom: 1px dashed var(--gray); margin-bottom: 10px; padding-bottom: 10px; }
}
/*Calendar Table*/
#calendar {background: transparent; border-collapse: collapse; color: var(--primary); margin: 0 auto; width: 90%;
    tr {
        th, td {border: 1px solid var(--gray);height: 75px;width: 14.28%;vertical-align: top;padding: 5px;}
        th {background: var(--gray); color: var(--primary); font-family: "Inter", sans-serif; font-size: 18px; line-height: 20px; text-align: center; vertical-align: middle; }
        td.caption {background: var(--primary); color: var(--white); font-size: 24px; font-weight: 500; height: 50px; line-height: 50px; text-align: center; text-transform: uppercase;
            a.nav {color: var(--white); display: inline-block !important; font-size: 34px; height: 55px; line-height: 50px; padding: 0 20px; vertical-align: middle; }
        }
    }
    ul {display: block; list-style: none; margin: 0; padding: 0;
        li {background: var(--primary); border-bottom: 1px solid var(--white); color: var(--white); font-size: 11px; line-height: 16px; padding: 2px;
            a {color: var(--white); }
        }
    }
}
/* 5. Layout */
/* Custom Container sizes */
@media (min-width: 1440px) {.container{max-width:1240px!important;} }
@media (min-width: 1640px) {.container{max-width:1440px!important;} }
@media (min-width: 1840px) {.container{max-width:1640px!important;} }
@media (min-width: 2040px) {.container{max-width:1840px!important;} }
/*Header & logo*/
header.Header { position: relative; top: auto; transition: all 1s ease; width: 100%; z-index: 999;
    & .logo {position: relative;
        & img {max-height: 70px;opacity: 1;padding: 7px 0;position: relative;transition: all 0.5s ease;z-index: 1;}     
    } 
    & .navigation {display: flex; justify-content: end; align-items: center;
        & .iconMenu {display: flex; 
            button{background:none;border:0;padding: 15px 18px;color:var(--primary);font-size: 2rem;
                &:hover{ background:var(--primary); color:var(--white);}
            } 
        }
    } 
}
/*Navigation*/
.main-navigation {padding:0;
    ul {align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; height: 100%; justify-content: flex-end; list-style: none; margin: 0 auto; padding: 0; position: static; text-align: center;
        li {align-items: center; display: flex; position: relative; text-align: center; transition: all 0.3s ease;
            a {color: var(--primary);display: block;font-family: var(--bodytext);font-size: 1rem;font-weight: 500;padding:23px  10px;
                &:hover{ background-color:var(--primary); color:var(--white); }                
            }
            &:hover{ background-color:var(--primary);
                a{ color:var(--white); }
            }
            &:hover > ul {display: block; }
            &:hover > ul li {background: var(--primary); }

            ul {background: var(--primary);display: none;left: 0;list-style: none;margin: 0;margin-top: 0;min-width: 260px;height:auto;padding: 0;position: absolute;top: 100%;
                li {display: block; text-align: left; position: relative; width: auto; left: 0; top: 0;
                    &:first-child {padding-top: 1px; }
                    &:hover {
                        ul {display: block; }
                        a {background: var(--primary); color: var(--white); }
                    }
                    ul {background: var(--primary); left: auto; right: 100%; position: absolute; top: 0; }
                    a {color: var(--white); font-size: 0.9em; padding: 10px;
                        &:hover {background: var(--white); color: var(--primary); }
                    }
                }
                ul {left: 100%; }
            } 
        }
    }
}
/*Breadcrumbs*/
.breadcrumbs {color: var(--text); line-height: 0; background: var(--light); transition: all .5s ease; 
    & .container {display: flex; align-items: center; } 
    a {color: var(--text); font-size: 12px; line-height: 1; padding: 10px 5px; font-weight: 400; display: inline-block; }
}
/* 6. Utilities */
/*Go to Top button*/
.cd-top {position: fixed; bottom: 0; right: 40px; width: 40px; height: 32px; z-index: 10; border-radius: 5px 5px 0 0; background: color-mix(in srgb, var(--dark) 70%, var(--offwhite)); opacity: 0; visibility: hidden; overflow: hidden; display: block; transition: opacity .3s, visibility .3s;
    i {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; line-height: 35px; text-align: center; font-size: 1.4em; color: var(--white); text-indent: 0; }
    &.cd-is-visible, &.cd-fade-out, .no-touch &:hover {opacity: 1; visibility: visible; transition: opacity .3s, visibility .3s; }
    &.cd-fade-out {opacity: .75; }
    &:hover, .no-touch &:hover {background: var(--highlight); border-color: var(--white); }
    &:hover i {color: var(--white); }
}
/*Social Menu with icons*/
#social{margin:0; position:relative; width:100%; z-index:99; margin-bottom: 30px; padding:15px 0; background-color:color-mix(in srgb, var(--light) 5%, transparent);
    & ul{align-items:center; display:flex; justify-content:center; margin:0; padding:0; text-align:left;
        & li {display:inline-block; float:none; margin:0; vertical-align:middle;}
        & li a {color:var(--gray); display:block; padding:0!important; text-align:left; margin-right: 15px; font-size:0;  border-radius:3px; overflow:hidden;}
        & li a span{color:var(--highlight); display:none; font-family:"Inter",sans-serif; font-size:1.2rem; font-weight:500; text-transform:capitalize; }
        & li a:before{background: var(--primary); color:var(--white); content:''; display:inline-block; font-family:bootstrap-icons!important; font-size:1.25rem;text-align:center; vertical-align:middle; width:34px; height:34px; line-height:34px;}
        & li.facebook a:before{content:"\f344";}
        & li.twitter a:before{content:"\f8db";}
        & li.instagram a:before{content:"\f16d";}
        & li.linkedin a:before{content:"\f0e1";}
        & li.youtube a:before{content:"\f62b";}
        & li.pinterest a:before{content:"\f231";}
        & li.googleplus a:before{content:"\f0d4";}
        & li.contact a:before, & li.email a:before{content:"\f0e0";}
        & li:hover a{background:var(--highlight); color:var(--white); transition:all .3s ease;}
        & li a:hover:before {color:var(--white);  background:var(--highlight);}
    }
}
/*Home page slider*/
.sliderSection { height: var(--sliderHeight); max-height: 100vh; overflow: hidden; position: relative;
    & .slide {position: relative;  height:var(--sliderHeight);
        & .image {background-position: center;  background-size:contain; background-repeat: no-repeat; position: absolute; display:flex;  align-items:center; width: 100%; height: 100%; z-index: 0; top: 0; left: 0; 
            img{width:auto; }
            &.Fullwidth {background-size: cover; 
                img{width:100%;}
            } 
        }
        & .captionData {height: 100%; left:0; right:0; margin:auto; position: relative; width: 100%; }
        & .caption {display: none; padding: 45px; position: relative; z-index: 2; 
            &:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: -1; } 
            h1, h2, h3, h4, h5, h6 {color: var(--text); }
            .h1, h1 {font-size: calc(1.35rem + 1.5vw); 
                @media (min-width: 1200px) {font-size: 3rem; } 
            }
            .h2, h2 {font-size: calc(1.20rem + 0.5vw); 
                @media (min-width: 1200px) {font-size: 2.5rem; } 
            }
            .h3, h3 {font-size: calc(1.0rem + 0.075vw); 
                @media (min-width: 1200px) {font-size: 2rem; } 
            }
            p, div {font-size: calc(1.0rem + 0.05vw); 
                @media (min-width: 1200px) {font-size: 1.6rem; } 
            }                     
        }
        &.video {
            & .image {display: none; } 
            & .tao-video-wrapper {position: absolute; width: 100%; height: 100%; top: 0; left: 0; 
                & .container {max-width: none !important; display: none !important; }
                & .tao-video-tn { background-size:cover;}                
                iframe {position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: 99; }
            }
        }
        &.slShow .caption{display: block; color: var(--text); }              
    }                
    @media (min-width: 0px) and (max-width: 991px) { 
        --sliderHeight:540px;
        height:var(--sliderHeight);
        & .slide{ height:var(--sliderHeight);}
        img{width:auto;  height:100%; }
        & .slShow .caption{padding:15px; width:100%!important;}
    }  
    @media (min-width: 0px) and (max-width: 549px) {
        --sliderHeight:420px;
        & .slide { display:flex; flex-wrap:wrap;
            & .image{ position:relative; order:0; height:calc( var(--sliderHeight) / 2); 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.1rem + 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; } 
                }                
            }                  
        }  
    }              
}
/*Sub/Side Nav*/
.sideNav {
    ul {list-style: none; margin: 0; padding: 0;
        li {position: relative;
            &:hover > ul {display: block; }
            a {border-bottom: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); display: block; font-weight: 500; padding: 10px;
            }
            a:hover {background: var(--primary); color: var(--white); }            
            &:last-child a {border: 0;}
        }
        li ul { display: block; left: 0%; position: relative; top: 0; width: 100%;
            li {
                a { padding:5px 10px; border-bottom:0; font-size:.9em;
                    &:hover {background: var(--primary); color: var(--white); } 
                   &:hover:before {visibility:hidden;}
                } 
            }
        }
    }
}
/*news*/  
.news{display:flex; flex-direction:column; height:100%; justify-content:space-between;
     & .article {margin-bottom: 15px;padding-bottom:10px;border-bottom:1px dashed var(--primary);
        h2{font-size:1.33em;}
        & .splitleft, & .splitright { display:block;
            em{font-size:.9em;}
            a{display:inline-block; padding:3px 10px; font-size:.8em; text-transform:uppercase; border:1px solid var(--primary); border-radius:5px;
                 &:hover{ background:var(--primary); color:var(--white);}
             } 
        }
    }
    & .newsRow{margin-bottom:25px; padding-bottom:25px; border-bottom:1px dashed var(--gray)}      
}
/*Events*/ 
.events{
    h2{margin-top: 50px;margin-bottom: 15px;color: var(--mute);}
    & .eventrow { margin-bottom:25px; padding-bottom:25px; border-bottom:1px dashed var(--gray);
        h3{ font-size:1.125rem;}
        p{margin:0;}
        ul {margin-bottom:10px;
            li{ margin-right:15px;}
        }       
    }
}
/* Gallery */
.imageGallery{display:flex; flex-wrap: wrap;
    & .ligBox {cursor:pointer;max-width:25%; position:relative; margin:2px; border:1px solid var(--gray); 
        &:after{content:''; display:block; position:absolute; z-index:3; width:100%; height:100%; top:0; left:0;} 
        &:hover:after{background-color: rgba(0, 0, 0, .3);} 
        img{object-fit:cover; height:100%; width:100%; position:relative;} 
        & .gContent{display:none;} 
    }
    @media all and (min-width: 0px) and (max-width: 579px) {
        justify-content:center;
        & .ligBox {max-width: 45%;}   
    }           
}
/*Gallery Lists*/
.galleryLists {display:flex; flex-wrap:wrap; justify-content:start;
    .gallerylist {max-width:40%;flex: 0 0 auto; border: 1px solid var(--gray); text-align:center;margin:15px ;padding: 5px; 
        h3 {margin:10px 0; text-align: center; font-size: 1.1em; font-weight:400;}
        p {display: none;}
        @media (min-width: 0px) and (max-width: 579px) {
            width:80%;max-width:none;flex: 0 0 auto;
        }                
    }    
}
/*Webform Post*/
.error,.taoCMSerror {border:1px solid var(--error); border-left:5px solid; padding-left:5px;color: var(--error); margin-bottom:3px;
    p{ margin:0;}
}
/*Table post template*/
table.webform  {max-width: 80vw;
    .labelcol, .valuecol{width: 40%;} 
    .middlecol {width: 1%;}            
}
/*Div post template*/
.errmsg {color:var(--error);}
.group_nogroup_label,.group_nogroup_tr{ display:none; }
.fieldgroup{clear:both;margin-bottom: 30px;
    & .fieldgroup_label {border-bottom: 1px solid var(--primary);color: var(--primary);display:block;font-size: 1.3em;line-height: 1;font-weight: 500;padding-left: 5px;padding-bottom: 5px;}            
    & .fieldgroup_desc, & .field_desc{font-weight:inherit;margin-bottom:15px; color: var(--mute); font-size: .87em; font-style: italic; }
    & .fieldrow{display:block;text-align:left;
        & .fieldlabel{ display:block;
            sup{font-size: .95em;color:var(--error);}
        }   
        & .fieldval{display:block;width:100%;
            input, input[type=text], input[type=tel], input[type=email], select{width:100%;} 
            input[type=button], input[type=reset], input[type=submit], .button{width:auto;}
            textarea{min-height:100px; width:100%;} 
            input[type=file]{border:1px solid #ddd;}                    
        }                
    }            
}
/*Payment*/
.shippinginfotable {max-width: 420px;
  tr {
    td {padding: 5px; vertical-align: middle; 
       label {width: 100px;}
    }
  }
}
#cartbuttons, #changeinfo {margin-top: 30px;text-align: left;
  ul {list-style: none; margin: 0; padding: 0; margin-top: 30px;    
    li {
        .catalog.cancel:hover {background: var(--error); color: var(--white); }
        a {display: inline-block;line-height: 1;padding: 10px;border: 1px solid var(--mute); color:var(--mute);border-radius: 4px; 
          &:hover {background: var(--mute); color:var(--white); }
          &:before {content: "\f12c"; font-family: bootstrap-icons!important; display: inline-block;  vertical-align:middle;margin-right: 5px; }
        }
        &:nth-child(3):before{content: "\f3b9"; font-family: bootstrap-icons!important; display: inline-block; margin-right: 5px; }
    }
  }
}
#cartbuttons {text-align: left;width:420px;
  ul{padding:0;margin:0;margin-top: 30px;display:flex;list-style:none;justify-content: space-between;flex-direction: row-reverse;
      input.cancel{ background:var(--error);}
  }  
  input.payment.cancel, .payment.cancel {background: var(--error);} 
}

#paymentinvoice {display: flex;flex-wrap: wrap; 
    #billtable, #shiptable {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;margin-bottom: 15px; 
        h3 {font-size: 1.4em; } 
        > div{padding:10px;border:1px solid var(--gray);
            div.name{font-weight:bold;}    
        }                        
    }
}                 
#cartform {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
#subscriptionorder, #paymentcharge, #payment_totalamount, #giftcertificateamount {display: block;float: none;clear: both;width: 100%;padding: 15px 0;font-weight: bold;}
.paymentcharge {display: none; }
.paymenttitle {margin-top: 15px; font-family: var(--header); font-size: 1.3em; }
.paymentmessage {color:var(--mute);}
#paymentdiv {margin-bottom: 30px;} 
.paymentchoice {font-weight: bold; }
#authorizenet_radio {display: block; background: url(/image/cache/visa-mastercard.png) no-repeat right; background-size: 150px; min-height: 50px; display: flex; font-size: 0; width: 171px; }
#mail_payment_details .instructions, #paymentinstructions {margin: 10px 0; padding: 15px 0; }
.paymentdetails {max-width: 460px; 
    .nameoncardlabel, .nameoncardinput {width: 100%; display: block; }                 
    .ccnameoncard-block, .carddetail-block {display: flex;flex-wrap: wrap;justify-content: space-between; 
      .cardnumber-block {-ms-flex: 0 0 69%;flex: 0 0 69%;max-width: 69%;padding: 10px -0;} 
      .codeoncard-block {-ms-flex: 0 0 30%;flex: 0 0 30%;max-width: 30%;padding: 10px 0;}
      .expireoncardinput  select{-ms-flex: 0 0 49%;flex: 0 0 49%;max-width: 49%;}                                             
    }
}                 
.expireoncard-block {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;padding: 10px 0; 
  label {display: block; width: 100%; } 
  .expireoncardinput {display: flex;width: 100%;justify-content: space-between; 
    select {width: 49%; } 
  } 
}
#returntocart {text-align: center; margin: 10px; 
  a {display: inline-block; line-height: 1; background-color: #191919; color: #fff; fill: #fff; text-align: center; transition: all 0.3s; font-size: 1.2em; font-weight: 400; border-radius: 5px; padding: 10px 30px; 
    &:hover {background: #ddd; } 
  } 
}
.shippinginfotable {max-width: 420px;
  tr td {padding: 5px;
      label {width: 100px;}
  }                   
}



/*Mobile Sidebar Menu*/
.Sidebar{
    & .Sidebar_backdrop{background: color-mix(in srgb, var(--text) 30%, transparent);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999; display:none;}
    & .Sidebar_body{-webkit-overflow-scrolling:touch;-webkit-transition:right .3s ease-in-out;background-color:var(--dark); bottom:0;overflow-y:auto;position:fixed;right:-320px;top:0;transition:right .3s ease-in-out;width:320px;z-index:10000;
        & .sidebar_Close {text-align:right;
            button {
                i{font-size:30px;background:var(--primary);color:var(--white);display: block;}
                &:hover i{background:var(--dark);}
            }                         
        }          
    }    
    &.show{
        & .Sidebar_body{right:0;}
        & .Sidebar_backdrop{display:block;}
    }    
    .SidebarMenu{padding: 30px 0;
        ul{list-style:none; margin:0; padding:0;
            li{
                a{color:var(--white);display:block;font-size:1.1em;font-weight: 400;padding:10px 15px;text-decoration:none;text-transform:uppercase;} 
                ul li{padding:0;}
                ul li a{text-transform:none;font-size:.96em;}
            }
                        a:hover{background:var(--primary); color:var(--light);}
        }  
    } 
}
/*Page Structure*/
                
footer{background:var(--dark);  position:relative; z-index:1;
    & .address{display:block;text-align:left;color: var(--white);
        p{padding-left: 25px; word-break: break-all; 
          i{display:inline-block;margin-left: -25px; text-align:center; vertical-align:middle; width: 25px;}
        }
        a{color: var(--white);}               
    }
    ul{margin:0; padding:0; flex-wrap:nowrap;justify-content: end;list-style:none;
        li{text-align:right; display:block;
            a{color: var(--white);display:inline-block;font-size:1.0em;padding-bottom:8px;text-align:right;}
            ul li{padding: 1px 15px;}
            ul li a{font-size:1em; font-weight:400; padding:5px 0;}
        }
        a:hover{color:var(--highlight);}       
    }
    & .copyright{background-color:color-mix(in srgb, var(--gray) 3%, transparent);color:var(--white);font-size: .8rem;margin-top:30px;padding: 10px 0;text-align:left;
        & .subfooter-nav {
            ul {margin:0;padding: 0;} 
            ul li{display:inline-block!important; vertical-align: middle;            
                a{padding: 0 10px 0 0!important;color:var(--white);
                    &:hover{background:none!important;} 
                }           
            } 
        }
        span{display:block; text-align:right;}                 
    }
    @media all and (min-width: 0px) and (max-width: 779px){
        & .address{text-align:center; margin-bottom:15px;
            p{padding:0;
                 i{margin:0;}
             }
        }
        ul li{text-align:center;}
        & .copyright{
           & .subfooter-nav{
               &.nav{justify-content:center; margin-bottom:5px;}
           }
           span{text-align:center;}            
        }
    }  
    @media all and (min-width: 0px) and (max-width: 579px){
        & .footerNav ul{ margin-top:30px;
            li a{font-size:1em; margin-bottom:10px;}          
        }  
    }
}

/*Responsive styles*/
@media all and (min-width: 0px) and (max-width: 1199px) { }
@media all and (min-width: 0px) and (max-width: 1080px) { } 
@media all and (min-width: 0px) and (max-width: 779px) { }
@media all and (min-width: 0px) and (max-width: 639px) { }
@media all and (min-width: 0px) and (max-width: 579px) { }
@media all and (min-width: 0px) and (max-width: 460px) { }
@media all and (min-width: 0px) and (max-width: 380px) { }

body.dark{
    --primary:#fdbb94;
    --highlight:#88cbf1;
    --dark: #f2f7f9;
    --text:#FAF9F6;
    --mute:#FAF9F6;
    --gray:#dfebee;
    --light:#416679;
    --offwhite: #303e49;
    --white: #334652;
    .slide .caption :is(h1, h2, h3, h4, h5, h6, p, div){ color:var(--offwhite);}
    footer { background:var(--white);
        *{color:var(--dark) !important;}
    }
}