:root {
    --vs-blue: #94c3e7;
    --vs-blue-hover: #b2d7f1;
    --vs-blue-light-hover: #c4e8fd;
    --vs-blue-font-hover: #404041;
    --vs-blue-font: #41538A;
    --vs-blue-disabled: #dce5ed;
    --vs-blue-bg: #f0f4f7;
    --vs-blue-bar-hover:#ddeaf6;
    --vs-grey-bg:#f9f9f9;
}
.btn-blue-primary,.btn-blue-secondary,.btn-blue-ghost {  
    font-weight: 700;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: .5px;
    margin-top: 0;
    padding: 0.9em 3em;
    text-transform: uppercase;
    transition: border .5s, color .5s, background .5s;
    -webkit-transition: border .5s, color .5s, background .5s;
    min-width: 200px;
}
.btn-blue-primary{background: var(--vs-blue);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue);}
.btn-blue-secondary{background: #fff;color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-ghost{color:var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-primary:hover,.btn-blue-primary:active,.btn-blue-secondary:hover,
.btn-blue-secondary:active{background: var(--vs-blue-hover);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue);box-shadow:0 0 0 1px var(--vs-blue)}
.btn-blue-ghost:hover{background: #fff;color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-ghost:active{background: var(--vs-blue-hover);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue);}
.dropdown-menu.dropdown-menu-wide {
    min-width: 100%;
    text-align: center;
    margin: 0;
}

.btn-group.dropup>.btn[aria-expanded=true] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.btn-group.dropup>.btn:focus {
    box-shadow: none;
}

.btn-group.dropup>.dropdown-menu.dropdown-menu-wide {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group.dropup .dropdown-item:hover {
    background: var(--vs-blue-hover);
}
.bg-blue{background:var(--vs-blue-bg)}
.bg-blue-bottom{background: linear-gradient(to top,#f0f4f7 0%,#f0f4f7 40%, #fff 40%);}
.bg-blue-top {background: linear-gradient(to bottom, #f0f4f7 0%, #f0f4f7 60%, #fff 60%);}
.bg-white-blue {background: linear-gradient(to top, #f0f4f7 70%, #fff 100%);}
.bg-grey{background-color: var(--vs-grey-bg);}
.bg-grey-mask{background:linear-gradient(to top, var(--vs-grey-bg) 0%, rgba(0, 0, 0, 0) 50%); }
.sticky-top.bg-subnav{background-color: rgba(255, 255, 255, 0.7)}
.sticky-top.bg-subnav.affix{background-color: #fff;box-shadow: 5px 5px 15px rgb(0 0 0 / 10%);}
.site-alert{z-index: 30;}
.kv .nav-buy .btn{width: fit-content; min-width: inherit;}
.vs-spec .nav-link { font-weight: 400; }
#productNav .nav-link:hover, #productNav .nav-link.active{color: #005a9e;}
.footer {background-color: var(--vs-blue-bg);}
h2{font-size: 2.5em; font-weight: 700;}
h5{font-size: 15px; color:#222; line-height: 24px;}

.kv{background-position: 50% 0%}
.kv h2{font-size: 2em;}
.kv h2 img{padding-left: 0.25rem;padding-right: 0.25rem; padding-bottom: 0.3rem; width: 130px;}
.kv-top{ padding-top: 8vw;z-index: 1; }
.kv-top img{max-height: 55vh;width: auto;}
.kv-title{z-index: 20;}

.light1-animate{ animation: light1 2s infinite; animation-direction:alternate-reverse; animation-delay: 0.5s;
}
.light2-animate{ animation: light2 2s infinite; animation-direction:alternate-reverse; animation-delay: 0.5s;}
@keyframes light1 {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }   
}
@-webkit-keyframes light1 {
     0% {
         opacity: 0%;
     }

     100% {
         opacity: 100%;
     }
 }
@-moz-keyframes  light1 {
     0% {
         opacity: 0%;
     }

     100% {
         opacity: 100%;
     }
 }
@keyframes light2 {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0%;
    }
}
@-webkit-keyframes light2 {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0%;
    }
}
@-moz-keyframes  light2 {
     0% {
         opacity: 100%;
     }

     100% {
         opacity: 0%;
     }
 }
.key3 .col-md-4{display: flex;}
.key3 .col-md-4 div{
    background-color: var(--vs-blue-bg);
    border-radius: 10px;
    flex: 1;
    transition: 0.5s;  
}
.key3 h3{font-size: 15px; color:#222; line-height: 24px;}
.mdc-tab-indicator .mdc-tab-indicator__content--underline{
  border-color:var(--vs-blue-hover);
  border-top-width:6px;
  border-radius:5px;
  
}
.mdc-tab{position:relative; height:auto; white-space:normal; padding:5px 12px;min-width: 50px; text-transform: none;
    text-transform: var(--mdc-typography-button-text-transform, none);
letter-spacing: 0;letter-spacing: var(--mdc-typography-button-letter-spacing, 0);}
.mdc-tab::before {

    transition: all ease 0.3s;
}
.mdc-tab:first-child::before{border-radius: 5px 0 0 5px;}
.mdc-tab:last-of-type::before{border-radius: 0 5px 5px 0;}
.mdc-tab:hover::before {
   content: "";
    position: absolute;
    height: 6px;
    bottom: 0;
    left: 0px;
    background: var(--vs-blue-bar-hover);
    width: 100%;
    border-radius: 5px;
}
.mdc-tab .mdc-tab__text-label {
    text-align: center;
    font-weight: 700 !important;
    margin: 15px auto;
    color: var(--vs-blue-font-hover);
    font-size: 16px;
    line-height: 1.2;
}
.mdc-tab-scroller{min-height: 56px;}
.mdc-tab-scroller__scroll-content::after{content:""; position: absolute; bottom: 0; width:100%; border-radius: 5px; height: 6px;background: #fff;}
.mdc-tab-scroller__scroll-area--scroll {scrollbar-width: initial}
.mdc-tab:hover .mdc-tab__text-label{color:var(--vs-blue-font) ;}
.mdc-tab-indicator .mdc-tab-indicator__content{
    transition-duration: 0.5s;

}
.mdc-tab-bar button:focus{outline:0}
.mdc-tab-bar button:focus-visible {
  outline: 2px dotted #333;outline-offset: -2px;
}
.btn:focus-visible {
    outline: 2px dotted;
}
.content{
  display: none;
  padding-top:1em;

}
.contentTouch {
    display: none;
    padding-top: 0;

}
.content--active {
  display: block;
  animation-name: uk-fade;
  animation-duration: 0.5s;
  animation-delay: 0.1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.mdc-tab-scroller__scroll-area--scroll{scrollbar-color: transparent;overflow: -moz-scrollbars-none;}

#product-filter .uk-card, #touch-tech .uk-card{display: flex; flex-direction: column; padding-top: 0.8em; width: 100%;}
#product-filter .uk-card-default, .uk-card-default{ border-radius: 10px;}
#product-filter .uk-card-hover:hover, #touch-tech .uk-card-hover:hover, #subscribe .uk-card-hover:hover {
    background-color: #fff;
    box-shadow: 0 8px 20px rgb(0 0 0 / 16%);
}
#product-filter .uk-card-hover:hover, #touch-tech .uk-card-hover:hover {margin-top: -5px;margin-bottom: 5px;}
#product-filter .uk-card-hover, #touch-tech .uk-card-hover{
    transition: all .3s ease;
}
#product-filter .uk-card-body, #touch-tech .uk-card-body {padding-bottom: 0;}
#product-filter .uk-card-body a:hover, #touch-tech .uk-card-body a:hover{ text-decoration: none; color: initial;}
#product-filter .uk-card-default .uk-card-footer, #touch-tech .uk-card-default .uk-card-footer{border-top: 0;margin-top: auto; margin-right: auto;margin-left: auto;padding-top: 0; padding-bottom: 30px;padding-right: 15px;padding-left: 15px;}
#product-filter .uk-card-footer a, #touch-tech .uk-card-footer a{display: block;}
#product-filter h6{color:#222; font-weight: 700; text-align: center; text-transform: uppercase;}
#product-filter a:hover, #touch-tech a:hover{text-decoration: none;}
.tab-card{background: white; border-radius:0 0 10px 10px; margin-bottom: 1em;}
#product-filter .uk-card-title{font-weight: 600;}
.footer-height{flex-basis: 133px;}
.rcbg .d-flex{width: fit-content;}
a.wp-feature-tile:hover h3,a.wp-feature-tile:hover .vs-read-more{color: #005a9e;}
.wp-feature-tile h3 {
    margin-top: 0.3rem;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.6;
    color: #555;
}
.wp-feature-tile *{transition: all 0.3s ease;}
.bg-fixed-desktop {background-attachment: fixed;}

#subscribe label a{font-weight: 700;}
#subscribe .form-group input {
    border-radius: 50px 0 0 50px;
    height: 44px;
    border: 1px solid var(--vs-blue-bg);
    margin-top: 5px;
}
.btn-subscribe {
    margin-left: -1em;
    z-index: 2;
}
.form-control:focus{
    box-shadow: 0 0 0 0px rgba(0, 123, 255, .25);
}
.kv .btn, #contact .btn{min-width: 225px}

.rectangle-blue-bg{
    background-image: url("/vsAssetFile/global/img/lcd/workpro-blue-rectangle.svg"), url("/vsAssetFile/global/img/lcd/workpro-blueout-rectangle.svg");
    background-repeat: no-repeat;
    background-position: 0% 250%,110% 40%;
}



@media(min-width: 2560px){.kv h1 big {font-size: 4rem;}}
@media(max-width: 1200px){.kv .height-fix{height: 45vh;} #subscribe .uk-card-body{padding: 50px;}
}
@media (min-width:768px) {
    .rcbg .vs-container-fluid:nth-child(2n+1) .col-md-7{
      order:2
    }
}
@media(max-width: 992px){
    h2{font-size: 2em; }
    .kv h1{font-size: 2.2rem;}
    .kv h2{font-size: 1.2rem;}
    .kv{ background-image: url("/vsAssetFile/global/img/lcd/workpro-m-bg.jpg") !important; background-size: 100%;background-position-y:10% ;}
    .kv-top{padding-top: 5vh;} 
    .kv h2 img{width:80px;padding-bottom: 0.25rem;padding-left: 0.2rem;padding-right: 0.2rem;;}
    .bg-grey-mask{background:linear-gradient(to top, var(--vs-grey-bg) 50%, rgba(0, 0, 0, 0) 60%); }
    .kv .height-fix { height: 30vh;}
    #product-filter .uk-card-hover:hover, #touch-tech .uk-card-hover:hover {margin-top: 0;margin-bottom: 0;}
    .mdc-tab-scroller__scroll-area--scroll {scrollbar-width: none}
    .mdc-tab::before{display: none;}

    .mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:0px;}
    .mdc-tab{color:var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);
    font-weight: 700;
    border-radius: 50px;
    margin-top: 0;
    margin: 0.2em;
    min-height: 44px;
    transition: border .5s, color .5s, background .5s;
    -webkit-transition: border .5s, color .5s, background .5s;
    }
   
    .mdc-tab:hover .mdc-tab__text-label{color: var(--vs-blue-font-hover);} 
    .mdc-tab__content{margin: auto; }
    .mdc-tab .mdc-tab__text-label{font-size: 12px; margin:2px 5px; line-height:1}
    .mdc-tab:active, .mdc-tab--active{background: var(--vs-blue-hover);
        color: var(--vs-blue-font-hover);
        border: 1px solid var(--vs-blue-hover);
    }
    .mdc-tab-scroller__scroll-content::after{height: 0;}
    .content{padding-top: 2em;}
    .tab-card{background:transparent; margin-bottom: 0;}
    .bg-fixed-desktop {background-attachment: initial}
    .btn-subscribe {margin-left: -2em;}
   
    #subscribe h3 big{font-size: 1.2857rem;}
    #subscribe .uk-card-body{padding: 30px;}
    #subscribe .form-group input{border-radius: 50px;}
    .subscribe-bg {background-position: 90% 40%, 10% 80%}
}
@media (max-width:768px) {
    .kv:has(*.show) {background-position-y: 40%;}
    .btn-subscribe {margin-left: 0;}   
    .rectangle-blue-bg{
    background-image: url("/vsAssetFile/global/img/lcd/workpro-blue-rectangle.svg");
    background-repeat: no-repeat;
    background-position: 150% 250%
}
.vs-spec .navbar-brand:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 100;
    content: '\f078';
    margin-left: 0.8em;
    font-size: .6em;
    transition: .2s all linear;
    display: inline-block;
    position: relative;
    }
    .vs-spec .navbar-brand[aria-expanded=true]:after {transform: rotate(-180deg);}
    .kv .nav-buy .btn{width: 100%;}
    .sticky-top.bg-subnav{background-color: #fff;}
}
@supports ((position:-webkit-sticky) or (position:sticky)){
    .sticky-top {z-index: 900;}
} 
@media (min-aspect-ratio: 21/10) {
    .kv-top{padding-top: 12vw;}
    }