:root {
    --vs-blue: #94c3e7;
    --vs-blue-hover: #D6EDFF;
    --vs-blue-active:#5EA4DA;
    --vs-blue-light-hover: #c4e8fd;
    --vs-blue-font-hover: #404041;
    --vs-blue-font: #41538A;
    --vs-blue-disabled: #dce5ed;
    --vs-blue-bar-active:#94C3E7;
    --vs-blue-bg: #f0f4f7;
    --vs-blue-bar-hover:#D6EDFF;
    --vs-blue-panel:#5EA4DA;
    --vs-blue-panel-50: #EBF6FF;
    --vs-blue-panel-200: #B2D7F1;
    --vs-blue-panel-font: #005A9E;
     --vs-blue-compare:#F2F7FC;

}
.btn-blue-primary,.btn-blue-secondary,.btn-blue-ghost {  
    font-weight: 700;
    border-radius: 50px;
    font-size: 16px;    
    margin-top: 0;
    padding: 0.75em 3em;
    line-height: 22px;
    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
{background: var(--vs-blue-hover);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-hover);}
.btn-blue-primary:active{background: var(--vs-blue-active);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-active);box-shadow:0 0 0 1px var(--vs-blue-active)}
.btn-blue-secondary:hover
{background: var(--vs-blue-hover);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-secondary:active
{background: var(--vs-blue-active);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);box-shadow:0 0 0 1px var(--vs-blue-active)}
.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);}
.btn-more,.btn-more:hover{color:var(--vs-blue-panel-font);text-decoration: none; transition: all 0.3s; font-weight: 700;background: transparent;border: 0;padding: 0;}
.btn-more::after{content: '\f054';
   position: absolute;
  padding-left: 0px;
  font-size: 1em;
  font-weight: 500;
  content: '\f105';
  margin-left: 0.2em;
  font-family: "Font Awesome 5 Pro";
  -webkit-transition: padding 0.5s;
  transition: padding 0.5s;
  }
.btn-more:hover::after{padding-left: 10px;
  -webkit-transition: padding 0.5s;
  transition: padding 0.5s;}
.btn-more.uk-disabled::after {
  content: "";
}
.bg-blue{background:var(--vs-blue-bg)}
.bg-blue-bottom{width: 100%; height: 100%;position: absolute; top:0; clip-path:inset(500px 0px 0px 0px round 80px); -webkit-clip-path:inset(550px 0px 0px 0px round 80px);background:var(--vs-blue-bg)}
.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 .h5{font-size: 20px; color:#222; line-height: 27px;}
section .h4{margin-top: .3rem;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.6;}
.kv {
    background-image: url("/vsAssetFile/global/img/commercial-display/ultrawide/kv.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    background-position: 50% 10%;

}
.kv .row .col-12:nth-of-type(1){ height: calc(90vh - 60px) }
.kv h1 big {font-size: 56px;}
.kv h2{font-size: 1.6em; font-weight: 400;}
.kv .height-fix{height: 50vh;}
section p{font-size: 18px; line-height: 27px;}
.tagball::before{content: ""; background-color: #2F88CC; width: 12px; height: 12px;border-radius: 20px;top:6px;margin-left: -20px; position: absolute;}
.tagball{font-size: 16px; font-weight: 600;padding-left: 23px;padding-bottom: 1.3rem;}
.round-top{border-radius: 80px 80px 0 0;}
.round-bottom{border-radius:0 0 80px  80px ;}
.round-img{border-radius: 16px;}
.key3 .uk-card-default{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    height: 100%;
    -webkit-transition: .5s;
    transition: .5s;
    padding: 0 2.5em;
}
.uk-slidenav {
  padding: 10px 15px;
  color: rgba(102,102,102,.8);
  background: #ffffff80;
  border-radius: 30px;
  box-shadow: 0 2px 3px 2px #00000010;
  width: 2.9rem;
  height: 2.9rem;}
  .uk-slidenav svg{display: none;}
  .uk-slidenav-next::before {
  font-family: 'Font Awesome 5 Pro';
  color: #00000090;
  font-size: 1.8rem;
  content: '\f105';
  top: 20px;
  position: absolute;
  left: 12px;}
  .uk-slidenav-previous::before {
  font-family: 'Font Awesome 5 Pro';
  color: #00000090;
  font-size: 1.8rem;
  content: '\f104';
  top: 20px;
  position: absolute;
  left: 12px;}

.mdc-tab-indicator .mdc-tab-indicator__content--underline{
  border-color:var(--vs-blue-bar-active);
  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: 18px;
    line-height: 1.2;
}
.mdc-tab__content{margin: auto; }
.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;}
#product-filter .mdc-tab-scroller__scroll-content::after{background: #E8F2F9;}
.mdc-tab-scroller__scroll-area--scroll {scrollbar-width: initial}
.mdc-tab:hover .mdc-tab__text-label{color:var(--vs-blue-panel-font) ;}
.mdc-tab-indicator .mdc-tab-indicator__content{
    transition-duration: 0.5s;

}
#product-filter .uk-slider-items{padding: 1px;}
.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;}
/* sn */
#sn .uk-accordion-content{margin: 0 24px 24px;}
#sn .uk-accordion-content  p{font-size: 16px;font-weight: 400; color:#222}
#sn .uk-accordion-title::before{background-image: none;
    content: "\2b";
  font-family: 'Font Awesome 5 Pro';
  font-size: 1.6rem;
  color: #404041;
  font-weight: 600;
height: 1em;}
#sn .uk-open > .uk-accordion-title::before{background-image: none;
    content: "\f068";
  font-family: 'Font Awesome 5 Pro';
  font-size: 1.6rem;
  color: #404041;
  font-weight: 600;
height: 1em;}
.icon{width: 45%;max-width: 200px; display: inline-block;vertical-align: top;}
#sn .uk-accordion-content .icon:nth-of-type(1){padding-right: 1em;}
.icon-img{width: 100%; height: 60px;display: flex;align-items: center; margin-bottom: 1em;margin-top: 1em;}
.icon p{font-size: 14px !important; line-height: 1.2;}
#sn .uk-accordion-content .icon a:hover p{ color:var(--vs-blue-panel-font)}
.icon a:hover{text-decoration: none;}
#sn .nav-item{background-color: var(--vs-blue);border-radius: 16px;transition: 0.3s all;}
#sn .nav-item:has([aria-expanded="true"]) {
  border: 4px solid var(--vs-blue-panel);
  background-color: #fff;
  border-radius: 16px;
}
#sn .uk-card-default{margin-bottom: 20px;}
#sn .nav-link {width: 100%; background-color: transparent;
  color: #222;font-weight: 700;font-size: 24px; border: none ; padding:24px; text-align:left;transition: 0.3s all;}
#sn .nav-link[aria-expanded="true"]{ color:  var(--vs-blue-panel-font)}
#sn .nav-link[aria-expanded="false"]:hover{
    background-color: var(--vs-blue-hover); border-radius: 16px;
}
#sn button:focus {outline: 0px}
#sn button:focus-visible {outline: 2px dotted #000;}
#sn button.nav-link::after{background-image: none;
    content: "\2b";
  font-family: 'Font Awesome 5 Pro';
  font-size: 1.6rem;
  color: #404041;
  font-weight: 600;
height: 1em;
right: 45px;
position: absolute;}
#sn button.nav-link[aria-expanded="true"]::after{background-image: none;
    content: "\f068";}
/* compare */
#compare .uk-accordion-title{background-color: var(--vs-blue-bg); padding: 24px;font-size: 24px; font-weight: 700; border-radius: 16px 16px 0 0;}
#compare .uk-accordion-title::before{background-image: none;
  content: "\f107";
  font-family: 'Font Awesome 5 Pro';
  font-size: 1.6rem;
  color: #404041;
  font-weight: 600;
height: 1em;}
#compare.uk-open > .uk-accordion-title::before{background-image: none;
  content: "\f106";
  font-family: 'Font Awesome 5 Pro';
  font-size: 1.6rem;
  color: #404041;
  font-weight: 600;
height: 1em;}
#compare .uk-accordion-title[aria-expanded='false']{border-radius: 16px;}
#compare h4 {color:#000;font-size: 18px;background-color: #D2ECFF;padding: 1.4rem 2rem;padding-right: 0;margin: 0;position:relative}
#compare h5 {color:#000;font-size: 18px;background-color: #E8F2F9; padding:0.5rem 2rem;padding-right: 0;margin-bottom:0; }
#compare .swiper-slide p{font-size: 16px;padding:2rem 2rem; padding-right: 0;background-color: var(--vs-blue-compare);font-weight:400; margin:0; }
#compare h6{background-color: #E8F2F9;padding:2rem 2rem;padding-right: 0;margin-bottom: 0;}
.mySwiper .swiper-wrapper a:hover,.key3 a:hover{text-decoration: none;}
.mySwiper .swiper-wrapper a:hover .btn-more::after,.key3 a:hover .btn-more::after {
  padding-left: 10px;
  -webkit-transition: padding 0.5s;
  transition: padding 0.5s;
}
.point{height: 100%; display: flex; flex-direction: column;}
.swiper-slide h5 span{opacity: 0;font-weight: 700; }
.swiper-slide.swiper-slide-active h5 span{opacity: 1 }
.swiper-slide.swiper-slide-next h5 span{opacity: 0 }
.swiper-slide.swiper-slide-prevh5 span{opacity: 0 }
.swiper.mySwiper2{border-radius: 0 0 16px 16px;}
.swiper.mySwiper2 .swiper-wrapper{border-radius: 0 0 16px 16px; overflow: hidden;}
.swiper-button-next::after, .swiper-button-prev::after{font-family: 'Font Awesome 5 Pro'; color:#00000090; font-size: 24px;}
.swiper-button-next, .swiper-button-prev{width: 3rem;height: 3rem;;background: #ffffff80;border-radius: 50px;box-shadow: 0 2px 5px #00000020;}
.swiper-button-next::after{ content: "\f105";}
.swiper-button-prev::after{content: "\f104";}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0;}
.swiper-button-prev, .swiper-rtl .swiper-button-next{left: 0px;}
.swiper-button-next, .swiper-rtl .swiper-button-prev {right: 0px;}
#product-filter .uk-card{display: flex; flex-direction: column; padding-top: 0.8em; width: 100%;}
#product-filter .uk-card-default, .uk-card-default{ border-radius: 16px;}
#product-filter .uk-card-hover:hover, .uk-card-default.uk-card-hover:hover{
    background-color: #fff;
    box-shadow: 0 8px 15px rgb(0 0 0 / 16%);
}
.uk-card-default{flex: 1;transition: all 0.3s; border-radius: 16px;}
.uk-card-default .h5{font-size: 20px;
    color: #222;
    line-height: 27px;}
#product-filter .uk-card-hover:hover,.uk-card-hover:hover{margin-top: -5px;margin-bottom: 5px;}
#product-filter .uk-card-hover{
    transition: all .3s ease;
}
#product-filter .uk-card-body {padding-bottom: 0;}
#product-filter .uk-card-body a:hover{ text-decoration: none; color: initial;}
#product-filter .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{display: block;}
#product-filter h6{color:#222; font-weight: 700; text-align: center; text-transform: uppercase;}
#product-filter a:hover{text-decoration: none;}
.tab-card{background: white; border-radius:0 0 10px 10px; margin-bottom: 1em;}
section.footer-cta{padding-top:8em;padding-bottom: 18em; min-height: 55vh;}
.footer-height{flex-basis: 133px;}


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

.kv .btn, #contact .btn{min-width: 225px}
.swiper-wrapper{width: fit-content; margin: auto;}
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 0px;top:auto}
@media(max-width: 992px){
   
    #compare .uk-accordion-title{font-size: 20px;}
    #compare h4{font-size: 16px;}
    #compare h5{font-size: 16px;}
    #compare .swiper-slide p{font-size: 14px; padding: 1rem 2rem;}
    #product-filter .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 .mdc-tab__text-label{font-size: 13px; margin:2px 5px; line-height:1}
    .mdc-tab:active, .mdc-tab--active{background: var(--vs-blue);
        color: var(--vs-blue-font-hover);
        border: 1px solid var(--vs-blue);
    }
    .mdc-tab-scroller__scroll-content::after{height: 0;}
    .tab-card{background:transparent; margin-bottom: 0;}
    .bg-fixed-desktop {background-attachment: initial}
    section.footer-cta{padding-top: 5em;padding-bottom: 10em;}
}
@media (max-width:768px) {
     .kv h1 big {font-size: 2.7rem;}
    .kv h2{font-size: 1.1em; }
    .kv {
            background-image: url("/vsAssetFile/global/img/commercial-display/ultrawide/kv-m.jpg");
            background-size:  contain;
            background-repeat: no-repeat;
            background-position: 50% 0%;
    }
.kv .row .col-12:nth-of-type(1){ height: calc(65vh - 60px) }
h2{font-size: 24px;}
#compare h5{font-size: 16px;}
.mySwiper .uk-card-title {font-size: 1.2rem;}
}

@media(min-aspect-ratio: 8/12) and (max-width: 992px) {
   .kv h1 big {font-size: 2.7rem;}
    .kv h2{font-size: 1.1em; }
    .kv {
            background-image: url("/vsAssetFile/global/img/commercial-display/ultrawide/kv.jpg");
            background-size:  contain;
            background-repeat: no-repeat;
            background-position: 50% 0%;
    }
     .kv .row .col-12:nth-of-type(1) {
    height: calc(100vh - 60px);
  }
} 

@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation:portrait) {
  .kv {
            background-image: url("/vsAssetFile/global/img/commercial-display/ultrawide/kv.jpg");
            background-size:  cover;
            background-repeat: no-repeat;
            background-position: 50% 0%;
    }
     .kv .row .col-12:nth-of-type(1) {
    height: calc(50vh - 60px);
  }
}
@media all and (device-width: 820px) and (device-height: 1180px) and (orientation:portrait) {
  .kv {
            background-image: url("/vsAssetFile/global/img/commercial-display/ultrawide/kv.jpg");
            background-size:  cover;
            background-repeat: no-repeat;
            background-position: 50% 0%;
    }
     .kv .row .col-12:nth-of-type(1) {
    height: calc(50vh - 60px);
  }
}@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .kv {
            background-image: url("/vsAssetFile/global/img/commercial-display/ultrawide/kv.jpg");
            background-size:  cover;
            background-repeat: no-repeat;
            background-position: 50% 0%;
    }
     .kv .row .col-12:nth-of-type(1) {
    height: calc(50vh - 60px);
  }
}