: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;
}
.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: 180px;
}
.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);}
.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%);}
.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-image:url("/vsAssetFile/global/img/lcd/TD_touch.png"), url("/vsAssetFile/global/img/lcd/touch-bg.jpg");
    background-size: 100vw, cover;
    background-repeat: no-repeat;
    background-position: 50% 75%, 50% 50%;
    height: calc(100vh - 60px)
}
.kv h1 big {font-size: 5cqh;}
.kv .height-fix{height: 50vh;}
.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;  
}

.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 {
   /* content: "";
    position: absolute;
    height: 6px;
    bottom: 0;
    left: 0px;
    background: #fff;
    width: 100%;
    border-radius: 5px; */
    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;
}
.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-industry .uk-card, #touch-tech .uk-card{display: flex; flex-direction: column; padding-top: 0.8em; width: 100%;}
#product-industry .uk-card-default, .uk-card-default{ border-radius: 10px;}
#product-industry .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-industry .uk-card-hover:hover, #touch-tech .uk-card-hover:hover {margin-top: -5px;margin-bottom: 5px;}
#product-industry .uk-card-hover, #touch-tech .uk-card-hover{
    transition: all .3s ease;
}
#product-industry .uk-card-body, #touch-tech .uk-card-body {padding-bottom: 0;}
#product-industry .uk-card-body a:hover, #touch-tech .uk-card-body a:hover{ text-decoration: none; color: initial;}
#product-industry .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-industry .uk-card-footer a, #touch-tech .uk-card-footer a{display: block;}
#product-industry h6{color:#222; font-weight: 700; text-align: center; text-transform: uppercase;}
#product-industry a:hover, #touch-tech a:hover{text-decoration: none;}
.tab-card{background: white; border-radius:0 0 10px 10px; margin-bottom: 1em;}

.footer-height{flex-basis: 133px;}

a.wp-feature-tile:focus-visible{outline: 2px dotted #333  }
a.wp-feature-tile:hover h4,a.wp-feature-tile:hover .vs-read-more{color:var(--vs-blue)}
.wp-feature-tile *{transition: all 0.3s ease;}
.bg-fixed-desktop {background-attachment: fixed;}
/* #contact .container{container-type: inline-size;}
.end-cta a {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
} */
#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}
.subscribe-bg{
    background-image: url("/vsAssetFile/global/img/lcd/Rectangle-blue-out.svg"), url("/vsAssetFile/global/img/lcd/Rectangle-blue.svg");
        background-repeat: no-repeat;
        background-position: 110% 40%, -5% 90%;
        background-size: ;}



@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(max-width: 992px){
    h2{font-size: 2em; }
    .kv {
            background-image: url("/vsAssetFile/global/img/lcd/touch-bg-m.jpg");
            background-size:  100vw;
            background-repeat: no-repeat;
            background-position: 50% 0%;
    }

    .kv .height-fix { height: 30vh;}
    #product-industry .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;
    /* letter-spacing: .5px; */
    margin-top: 0;
    margin: 0.2em;
    /* padding: 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: 11px; 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) {
     .btn-subscribe {margin-left: 0;}   
}
@media(min-aspect-ratio: 16/7){.kv{height: auto;}}
@media(min-aspect-ratio: 8/12) and (max-width: 992px) {
    .kv .height-fix {height: 50vh;  }
    .kv {
        background-image: url("/vsAssetFile/global/img/lcd/TD_touch.png"), url("/vsAssetFile/global/img/lcd/touch-bg.jpg");
            background-size: 100vw, cover;
            background-repeat: no-repeat;
            background-position: 50% 80%, 50% 100%;
        height: auto;
    }
    .kv h3{font-size: 1cqh;}
}