:root {
    --header:"Source Sans Pro",sans-serif;
    --subheader: "Source Sans Pro",sans-serif;
    --bodytext: "Roboto", sans-serif;
    --mainNavText: "Source Sans Pro",sans-serif;
    
    /*Colors*/
    --primary:#c5383d;
    --primaryLight:#f16469;
    --secondary:#f0aaac;    
    --brandLight:#fde3e4;    
    --light: #fef2f2;    
    --accent:#48729E;    
    --highlight: #48729E;
    --dark: #333333;
    --mute: #b0b0b0;
    --gray:#f6f6f6;    
    /*Utilities*/
    --sliderHeight: 550px;
}
body{color:var(--dark);}

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(--primaryDark); 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(--primary);
   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;transform: translateY(0px);
    & .topMenu{background: var(--primary);border-bottom: 1px solid #f1dbdc;
        .topNav ul{padding:0;margin:0;list-style:none;display:flex;justify-content: space-around;
            li a{display:inline-block;padding: 5px;color: var(--white);font-size: 1.1em;font-weight: 400;
                &:hover{ background:var(--white); color:var(--primary);}    
            }          
        }
        @media all and (min-width: 0px) and (max-width: 768px) {
            .topNav ul li a{font-size:1em; text-align:center;}
        } 
        @media all and (min-width: 0px) and (max-width: 576px) {
            .topNav ul{flex-direction:column;}
            .topNav ul li{text-align:center;}
            .topNav ul li a{font-size:1em; text-align:center;}
        }                
    }
    & .logo {position:relative;
        & img {width: 300px;padding: 10px 0;max-height: none;transition: all .3s ease;}
        & img.icon{padding: 5px 0;max-width: 65px;}
        @media all and (min-width: 0px) and (max-width: 576px) {
            text-align:center;
        }        
    }
    .main-navigation {
        & ul {min-width: 315px;
            & li {
                &.hasSubmenu > a:after{content:'+';}
                & a {color: var(--dark);padding: 10px 30px;font-size: 1.1em;font-weight: 400;text-transform: lowercase; font-family:var(--mainNavText)}
                &:hover > a, a:hover{ background:var(--primary); color:var(--white);} 
                &.home a{font-size:0;text-align: center;padding: 28px 15px;margin: 0;
                    &:before{content:"\f424";font-family:bootstrap-icons!important;font-size: 18px;display: block;margin: 0 auto;}        
                }
                ul li{
                    a{color:var(--white);padding: 8px 10px;}
                    &:hover{
                        a{color:var(--dark);background:var(--secondary);}                    
                    }                    
                }
            }
        }
        @media all and (min-width: 0px) and (max-width: 1199px) {
            & ul {
              & li{
                    a{padding: 10px 15px;}
                }    
            }     
        }        
    }
    & .navigation {display: flex;justify-content: center;align-items: center; }
    & .iconMenu {display: flex;align-items: center;justify-content:flex-end;
        a.bookNow{background: var(--primary);border: 1px solid var(--light);color: var(--light);padding: 7px 12px;border-radius: 2px;font-size:1.0em;font-weight:400;text-align: center;}
        a.search{padding: 6px 10px;margin-left: 10px;
            i{font-size: 20px;color: var(--dark);}                     
        }
        a.userLogin{padding: 6px 10px;
            i{font-size:22px;color: var(--primary);}           
        }            
        button{background:none;border:0;padding: 15px;
            &:hover{color:var(--white);
                i{ color:var(--highlight);}       
            }
        } 
    }
    @media all and (min-width: 0px) and (max-width: 1199px) {justify-content:flex-end;
        & button.navbar-toggler{ padding:10px;
            i{ color:var(--dark); font-size:34px;}
        }
    }       
    @media all and (min-width: 0px) and (max-width: 576px) {
        & .iconMenu{width:100%;
            a.bookNow{padding:7px 10px;}           
        }
    }                 
    & .sloganText {text-align:center;padding: 8px 0;padding-bottom: 15px;background: var(--white);
        span{font-size: 1.5em;font-weight: 600;font-family: var(--header);color: var(--primary);line-height: 1;}              
    }
    &.toFixed{box-shadow: 0px 0px 1px rgb(9 9 9 / 30%);transition:all .3s ease;transform: translateY(-38px); 
        & .container{position:relative; z-index:1;}
        & .navigation {height:100%;
            & .iconMenu {
                button {color: var(--primary);}
            }
            ul li{
                a{color:var(--dark);}               
                &:hover{
                    a{background:var(--primary); color:var(--white);} 
                }
                ul li{
                     a{ color:var(--white);} 
                    &:hover{
                        a{background:var(--secondary); color:var(--dark);}
                    }
                }               
            }         
        }
        & .logo img{ filter:none;}
        @media all and (min-width: 0px) and (max-width: 576px) {
            transform: translateY(-103px);        
        }              
    }               
}

body{
    &.subpage {
        header.Header{box-shadow: 0px 0px 1px rgb(9 9 9 / 30%);transition:all .3s ease;}
    }
    &.show-promo-popup{
        header.Header{position:relative;z-index:9;}
    }    
}

.slider-block {position:relative;/* background: var(--dark); */margin-top: 145px;}
/*Home page slider*/
.sliderSection {height: auto;max-height: none;overflow: hidden;position: relative;
    & .slide {position: relative;height: auto; flex-direction: column;justify-content: space-between;
        & .image {background-position: center;background-size:contain;background-repeat: no-repeat;position: absolute;display: block; width: 100%; z-index: 0; margin-bottom:30px;  
            img{width:auto; }
            &.Fullwidth {background-size: cover;position: relative;order: 0; 
                img{display: block;}
            } 
        }
        & .captionData {height: auto;margin:auto;position: relative;width: 100%;order: 1; 
            &.justify-Left{justify-content:start;}
            &.justify-Center{justify-content:center;}
            &.justify-Right{justify-content:end;}                        
            &.align-Top{align-items:start;}            
            &.align-Middle{align-items:center;}
            &.align-Bottom{align-items:end;}
        }
        & .caption {display: none;padding: 15px 0;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); padding:10px; }              
    }    

    & .tao-nav button{
        &:hover{ background:none;}        
        &.tao-next {right: -10%;
            span:after {content:"\f285";}
        }
        &.tao-prev{left: -10%;
            span:after {content:"\f284";}                    
        }            
        span{    
            &:after {content:"\f285";color:var(--primary);}
            &:hover:after{ color:var(--highlight);}
        }
        &:hover{background:none !important;}
    }
                
    @media (min-width: 0px) and (max-width: 991px) { 
        
        --sliderHeight:540px;
        /* height:var(--sliderHeight); */
        
        & .slide{/* height:var(--sliderHeight); */}
        img{width:auto;  height:100%; }
        & .slide {
            & .image.Fullwidth {background-size: cover;}     
        }
        & .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:5px;}
            } 
            & .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; } 
                }                
            }                  
        }  
    }              
}
.subpageHeader-block {padding-top: 146px;
    div.pageHeader{ position:relative; z-index:1;
        img{transform:scale(1); transition:all .5s ease; }            
    } 
    img{ width:100%;}
    @media all and (min-width: 0px) and (max-width: 578px) {
        padding-top: 180px;
    }                      
}

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

footer#footer {background:transparent;/* color:var(--white); */border-top: 1px solid var(--secondary);padding-top: 30px;
    & .footerWrapper {background: var(--dark);padding-top: 50px;}
    & .footerLogo{
         img{ margin-bottom:10px;} 
    }
    & .footnav ul{display:flex;justify-content: flex-start;flex-wrap: wrap;
        li {text-align: left; min-width:50%;
            a{display:inline-block;margin: 0;margin-right: 15px;padding: 5px;text-align: left;}
        }  
    }
               
    & .copyright{margin-top: 15px;padding: 5px; 
        & .d-flex {justify-content:space-between;align-items: center;}
        span{text-align:right;} 
        & .footnav ul{display:flex;justify-content: flex-start;flex-wrap: nowrap;
            li {min-width:auto;text-align: left;
                a{display:inline-block;margin: 0;margin-right: 15px;padding: 5px;text-align: left;}
            }  
        }                 
    }  
    & .sociolinks h3{text-align:right;}
    & .sociolinks a.locations:before {content: "\f3e7"; font-family: bootstrap-icons!important; display: inline-block; vertical-align: middle; width: 20px; font-size: 21px; text-align: center; }               
    & .social {background:transparent; padding:0; padding-top:10px;
        & ul {flex-wrap:nowrap; justify-content:flex-end;
            & li{min-width:auto;line-height: 40px;
                a{margin:0; margin-left:15px;}
                &.textLink a{font-size:1em;background: var(--white);color: var(--text);padding:0 15px !important;
                    &:before{display:none;}            
                }
                span{display:none;}
                a:before{color: var(--primary);font-size: 22px;}
                &.skin a {background: #f37072 url(/image/cache/skinfromscratch-gr30.gif) no-repeat center center; width: 85px; height: 24px; padding: 3px !important; border-radius: 4px; }
                &.fb a:before{content:"\f344";}
                &.twittr a:before{content:"\f8db";}
                &.instg a:before{content:"\f437";}
                &.linkedin a:before{content:"\f0e1";}
                &.ytb  a:before{content:"\f62b";}                 
            }
        }
    }  
    @media (min-width: 0px) and (max-width: 991px) {
        & .copyright {text-align:center;
            & .footnav{text-align:center;
                 ul{justify-content:center;}                       
            }   
            p{text-align:center;}
        }
        & .sociolinks h3{text-align:center;}        
        & .social{
            & ul{ justify-content:center;}
        }          
    }               
    @media all and (min-width: 0px) and (max-width: 769px) {
        & .footerLogo{text-align:center;}

        nav.footerNav ul li {min-width:100%;}
        & .copyright{ 
            span{text-align:center;}
        }        
      
    } 
    @media all and (min-width: 0px) and (max-width: 578px) {
        & .footerLogo{text-align:center;}
        & .sociolinks h3{text-align:center; margin-bottom:15px;}        
        & .social{
            & ul{ justify-content:center;}
        }
        & .footnav{
            ul{flex-wrap:nowrap;flex-direction: column;
                li{text-align:center;margin:5px 0;
                    a{margin-right: 0px; margin:0 10px;}  
                }
            }            
        }        
        & .copyright{         
            & .footnav{
                ul{flex-wrap:wrap; 
                    li{text-align:center;margin:5px 0;
                        a{margin-right: 0px; margin:0 10px;}  
                    }
                }            
            } 
        }
    }               
}

.service-blocks{
    & .serviceDetails{color: var(--dark); margin-bottom:15px;
        h1{color: var(--dark); font-size: 2.5em;font-weight: 600;}
    }    
    & .serviceBlocksWrapper{position: relative;width:100%;
        & .controls{position: relative;width: 100%;text-align: right;
            span{display:inline-block;cursor: pointer;
                i{font-size: 28px;line-height: 1;color: var(--mute);} 
            }          
        }                       
    }
    & .serviceBlocksCarousel{flex-wrap: nowrap;scroll-behavior: smooth;display: flex;cursor: grab;overflow: hidden;}
    & .serviceBlocksCarousel.dragging {scroll-behavior: auto;cursor: grabbing;}    
    & .serviceBlock{overflow:hidden;position:relative;height: 100%;display: flex;transition:all .5s ease;flex-direction: column;transform:translateY(0);flex: 0 0 auto;padding: 10px;width: 25%;justify-content: space-between;
        & .details{background: var(--light);color: var(--dark);position: relative;order: 1;padding: 30px;transition: all .5s ease; container-type: inline-size;
                & .serviceTitle{font-size: clamp(1.6rem, 6cqi, 3rem);font-weight:600;font-family:var(--header);display: block;color: var(--dark); white-space: nowrap;} 
                & .desc { font-weight:400; font-style:oblique; color: var(--dark);}
                & .learn {margin:10px 0;
                    a{ color:var(--mute);  text-transform:uppercase; transition: all .5s ease;}         
                }
                & .book a{margin:5px 0; display:block;background:var(--brandLight); padding:6px 10px; border:1px solid var(--dark);color:var(--dark); font-family:var(--header); text-align:center; font-size:1.3em; text-transform:uppercase; transition: all .5s ease;}
        }
        & .image{position:relative;z-index: 0;overflow: hidden;
            img{transform:scale(1); transition:all .5s ease;}
        }
        &:hover{transition:all .5s ease;color:var(--dark);  transform:translateY(-10px);
            & .details{ background:var(--brandLight); }
            & .learn a{color:var(--dark); transition: all .5s ease;}
            & .book a{background:var(--primary); color:var(--white); transition: all .5s ease;}
        } 
        &.blog{height:auto;
            & .image{height:100%;width:100%;object-fit:cover;}
            img{width:100%;height:100%;object-fit:cover;}
            & .details{padding: 20px;/* height: 100%; */
                & .date{font-weight: 400;font-style: oblique;color: var(--dark);}
                & .serviceTitle{font-size: 1.5em;  white-space:wrap;}
            }
        }
    }
    &.sugar{background: var(--white);}
    &.spray{background:var(--dark);
        & .serviceDetails{color:var(--white);
            h1{color:var(--white);}                  
        }      
    }
    &.skin{background:var(--primary);
        & .controls span i{color:var(--white);}    
        & .serviceDetails{color:var(--white);
            h1{color:var(--white);}                  
        }            
    }
    &.brow{background:var(--dark);
        & .serviceDetails{color:var(--white);
            h2{color:var(--white);}                  
        }            
    }    
    @media (min-width: 0px) and (max-width: 1199px) {
         & .serviceBlock{flex: 0 0 auto;width: 33.333%;}
    }    
    @media (min-width: 0px) and (max-width: 991px) {
         & .serviceBlock{flex: 0 0 auto;width: 50%;}
    }    
    @media all and (min-width: 0px) and (max-width: 578px) {
         & .serviceBlock{flex: 0 0 auto;width: 100%;}
    }    
}

.aboutContentBlock{background:var(--gray);
    & .aboutContent{color:var(--dark);padding:15px;height:100%;display:flex;flex-direction: column;justify-content: center;
        h1{color:var(--dark);}               
    }
}

.newHomeContentBlock{
     ul.welcomeList {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0;margin: 0; 
        li {float: none;-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 48%;padding-left: 35px;min-height: 30px;background: url(/image/cache/sugaricon.png) no-repeat left top;background-size: 22px 22px;padding-left: 35px;display: inline-block;vertical-align: top;margin-bottom: 5px;
            strong{font-weight:500;}   
        }        
    } 
}
 
.bookNowBlock {/* margin: 30px 0px; */text-align: center;color: var(--white); 
    h2 {text-align: center;font-size: 1.7em;font-weight: 500;line-height: unset;text-transform: uppercase;color: #FFF;}              
    & .bookNowContent {/* padding: 30px 0; */}
    & .linkBlock {
        a {color: #f16469;font-weight: 500;display: inline-block;font-size: 24px;vertical-align: middle;padding: 10px 20px;background: #FFF;border: 1px solid #c5383d;border-radius: 25px;transition: all .5s ease; 
            &:hover {text-decoration: none; } 
            &.bookNow{
                &:before {content:"\f1e2"; font-family: bootstrap-icons!important; display: inline-block; vertical-align: initial; width: 30px; text-align: center; font-weight: normal;}
                &:hover {background: #cc4f54; }                
            }
        }
    } 
}  

.specialsBlock{color:var(--white);
    h2{color:var(--white);}
    a{color: var(--white); font-weight:900; font-size:1.2em;}
    ul {margin: 0;padding: 0;list-style: none;display: flex; 
        li {/* padding-left: 35px; */display: flex;vertical-align: top;width: 50%;margin: 6px;position: relative;align-items: flex-start;
            &:before{content:'';display:inline-block;min-width: 30px;height:30px;margin-right: 10px;background: url(/image/cache/bee50x50.png) no-repeat left top;background-size: 30px 30px;backdrop-filter: brightness(0) invert(1);}  
        } 
    } 
}

.bookInks {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; 
    & .locationsList{max-width: 300px;}           
     div {margin: 20px; 
        a {margin: 0; }
    }
} 

.divTable {display: table; width: 100%; 
    & .divRow {display: table-row; 
        &.head {
            & .divCol {background: #c5383d; color: #fff; font-weight: bold; vertical-align: middle; } 
        } 
        & .divCol {display: table-cell; padding: 10px; border-bottom: 1px solid #ccc; font-weight: 500; color: #333; 
            &[data="Description "] {width: 50%; } a {font-weight: 500; color: #c5383d; } 
        } 
    } 
}

 .blogRow {border: 1px solid #ddd; height: 100%; border-radius: 9px; overflow: hidden; background: #fff; transition: all 0.3s ease; 
    img {display: block; margin: 0 auto; width: 100%; max-height: 280px; object-fit: cover; } 
    & .content {padding: 7px; } 
    span {margin: 0; line-height: 1.3; color: #333; } 
    a {
        &:hover {text-decoration: none; } 
    } 
    &:hover {background: #c5383d; color: #fff; transition: all 0.3s ease; 
        a span {color: #fff; } 
    } 
}


body {
    &.mobileApp {.logo a, 
        .headtop {display: none; } 
        .HeaderWrapper {border-radius: 0; } 
        #locationSearchForm {
            .headtop {display: block; } 
            .appbuttons {display: inline-block; } 
        } 
    } 
    &.show-promo-popup {padding-top: 88px; 
        .mainnav {top: 88px; }
        .slider-block{margin-top:0;}
        .subpageHeader-block{padding-top:0;}
    } 
}
 

#am_promo_placeholder {
    background: #f2f2f2;
    width: 100%;
    height: 88px;
    position: fixed;
    top: 0;
    z-index: 99;
}

#promo_popup_div {
    position: fixed;
    font-family: 'HelveticaNeue-Light','Open Sans',sans-serif;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    height: 88px;
    max-width: 400px;
    font-size: 15px;
    background-color: #f2f2f2;
    line-height: initial;
    z-index: 99999;
    border-top: 1px solid #aeaeae;
    border-bottom: 1px solid #aeaeae;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#promo_popup_div #promo_close_div {
    cursor: pointer;
}

#promo_popup_div #promo_close_div #promo_close_btn {
    font-size: 18px;
    color: #747474;
    display: inline-block;
    padding: 10px;
}

#promo_popup_div #promo_logo_div img {
    width: 65px;
}

#promo_popup_div #promo_logo_div #promo_logo_img {
    width: 66px;
    height: 66px;
    border-radius: 15px
}

#promo_popup_div #promo_details_div {
}

#promo_popup_div #promo_details_div #promo_details_divtitle {
    font-size: 16px;
}

#promo_popup_div #promo_details_div #promo_details_divsubtitle {
    font-size: 16px;
}

#promo_popup_div #promo_details_div #promo_details_divGet {
    font-size: 14px;
    color: #272727;
    margin-top: 8px
}

#promo_popup_div #promo_view_div {
}

#promo_popup_div #promo_view_div #promo_view_btn {
    font-size: 14px;
    color: #1d88fd;
    font-weight: 500;
}

#promo_popup_div * {
    box-sizing: border-box;
}


@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;}
    .sliderSection {
    & .slide {/* height:auto; */}
    }    
}

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