: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:#B2D7F1;
    --vs-body-font: #404041;
    --vs-body-font-hover:#005a9e;
    --vs-blue-bg-hover:#d6edff;
    --vs-sky-400:#5EA4DA;
    --vs-sky-100:#D6EDff;
    --vs-sky-50:#ebf6ff;
    --vs-blue-50:#f2f7fc;
    --vs-red-300:#FFBDC8;
    --vs-lighter-blue:#E8F2F9;
    --vs-subtle-blue:#F2F7FC;
    --vs-p-xs-size:12px;
    --vs-p-xs-lineheight: 18px;
    --vs-p-md-size:16px;
    --vs-p-md-lineheight: 22px;
    --vs-violet:#F5F6FB;
    --vs-violet-50:#EDEDFD;
    --vs-violet-100:#dadafc;
    --vs-violet-400:#6d6df3;
    --vs-violet-500:#4848F0;
    --vs-violet-700:#2E2EB2;
    --vs-violet-900:#141475;
}
h2 {
   
font-size: 3rem
}
h1{font-size:3.5em}
.btn-blue, .btn-blue-light {
    background: var(--vs-blue-hover);
    font-weight: 700;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: .5px;
    margin-top: 0;
    color: var(--vs-blue-font-hover);
    padding: 0.5em 2em;
    text-transform: uppercase;
    transition: border .5s, color .5s, background .5s;
    -webkit-transition: border .5s, color .5s, background .5s;
    min-width: 180px;
}
.btn-blue:hover {
    background: #0000;
    color: var(--vs-blue-font-hover);
    border: 1px solid #777
}
.btn-blue-light:hover {
    background: var(--vs-blue-light-hover);
    color: var(--vs-blue-font-hover);
    border: 1px solid var(--vs-blue-hover);
}
.btn-blue:disabled {
    opacity: 1;
    color: rgba(127, 127, 127, .65);
    background-color: var(--vs-blue-disabled);
}
.bg-blue-bottom {
    background: linear-gradient(to top, var(--vs-blue-bg) 0%, var(--vs-blue-bg) 40%, #ffffff00 40%);
}
.bg-blue{background: var(--vs-blue-bg)}

.bg-blue-top {
    background: linear-gradient(to bottom, var(--vs-blue-bg) 0%, var(--vs-blue-bg) 60%, #ffffff00 60%);
}
.btn-md {
    padding: 0.9em 3em;
}
.btn-white-dark {
    border-radius: 50px;
    font-weight: 700;
    border: 1px solid #00000080;
}
.btn-white-dark:hover, #allpj .btn-white-dark:hover{
    background: var(--vs-blue-hover);
    color: var(--vs-blue-font-hover);
    border-color: var(--vs-blue-hover);
}
#allpj .btn-white-dark:hover {
    background: var(--vs-blue-light-hover);
}
.footer {
    background-color: var(--vs-blue-bg);
}
.kv{background-size: cover;background-position: 50% 0%; position: relative;}
/* .kv .vs-container{height: calc(110vh)} */
.kv .vs-container .row{ height:calc(100vh - 60px)}
.kv h1{margin-top: -0.3em;}
.kv .uk-overlay-default{background: linear-gradient(#fff0 60%, #fff 100%); }
:focus-visible{outline-color: #333 !important;}
.btn:focus-visible{outline:2px dotted #333 !important;}
#allpj .container{container-type:inline-size;}
.btn:focus{box-shadow: none;}

.key3 .col-md{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;   
    transition: 0.5s;
    margin: 0.5em;
    padding: 0em 2.5em;
}
#lightbox .modal-body{padding: 0;}
.modal.and.carousel { position: fixed; }
/* .modal-open .modal{overflow: hidden;} */
.carousel-indicators{bottom:5%}
#lightbox button.close {
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 500;
    height: 40px;
width: 40px;
background: #fff;
border-radius: 50px;
box-shadow: 1px 1px 1px #00000050;
}
#lightbox .close {
    font-size: 2rem;
    font-weight: 400;}
.key-bg{
    background-color: var(--vs-blue-bg);
    background-image: url("/vsAssetFile/global/img/projectors/offwhite-rectangle.svg");
    background-repeat: no-repeat;
        background-position:-50vw;
        background-size:  80vw;
}

#lightbox .uk-slidenav-previous svg{position:absolute; height: 100%; top:0; bottom:0; left:3%}
#lightbox .uk-slidenav-next svg{position:absolute; height: 100%; top:0; bottom:0; right:3%}
#lightbox .carousel-indicators li {
    width: 12px;
    height: 12px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 50%;
    border: 1px solid var(--vs-blue);
}
#lightbox .carousel-indicators li.active{
    background-color:var(--vs-blue) ;
}
.bright img, .slider-for img{filter: drop-shadow(5px 5px 5px  #00000030);}
.flexible .uk-card{border-radius: 10px; overflow: hidden;}
.rcbg {
    background-image: url("/vsAssetFile/global/img/projectors/white-rectangle.svg");
    background-repeat: no-repeat;
    background-position: 220% 50%;
    background-size: 60vw;
}
.rcbg.bg2{ background-position: 220% 100%;}
.bg-fixed-desktop {
    background-attachment: fixed;
}
.rc-compare-img-container .twentytwenty-after-label.animate {
    animation: clip-move 3s forwards;
    -webkit-animation: clip-move 3s forwards;
}

.twentytwenty-before-label{background: linear-gradient(to top, rgba(0, 0, 0, 0.5)30%, rgba(0, 0, 0, 0) 100%);height: 100px;}
.twentytwenty-after-label {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5)30%, rgba(0, 0, 0, 0) 100%);
    height: 100px;
}
.twentytwenty-before-label > span, .twentytwenty-after-label > span{line-height: 52px;}
.twentytwenty-right-arrow::before {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-arrows.svg') no-repeat center center;
    top: -18px;
    right:-8px;
    filter: invert(75%);
    z-index: 55;
}
.twentytwenty-right-arrow::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    background: var(--vs-blue-light-hover);
    top: -16px;
    left: -28px;
    z-index: 50;
    -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, .5);
        -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, .5);
        box-shadow: 0px 0px 12px rgba(51, 51, 51, .5);
        transform: rotate(45deg);
        border-radius: 6px;
}
.twentytwenty-handle{background: none;
-webkit-box-shadow: 0;
    -moz-box-shadow:0;
    box-shadow:0;
  
   }
    .icon{display: flex;container-type: inline-size; width: 100%;}
   .icon h4 {
       text-align: center;
       font-weight: 700 !important;
       margin: 15px auto;
       color: var(--vs-blue-font-hover);
       font-size: calc(5cqw + 0.45cqh);
        overflow-wrap: break-word;
   }
   #scenarios .uk-subnav .hover-effect {
       position: absolute;
       transition: 0.5s;
       height: 5px;
       bottom: 0;
       left: 0px;
       background: var(--vs-blue-bar);
       width: calc( 100% / 6);
       border-radius: 5px;
       z-index: 1;
   }
    #scenarios .uk-subnav{align-items: inherit;}
   #scenarios .uk-subnav .tabbar{width: calc(100% / 6);}
   #scenarios .uk-subnav a{width: 100%; z-index: 2;}
#scenarios .uk-subnav .tabbar::before{
    content: "";
    position: absolute;
    height: 5px;
    bottom: 0;
    left: 0px;
    background: #ffffff;
    width: 100%;
   }
#scenarios .uk-subnav .tabbar:first-child::before{
    border-radius: 5px 0 0 5px;
}
#scenarios .uk-subnav .tabbar:nth-child(4):before{
    border-radius: 0 5px 5px 0;
}
#scenarios .uk-subnav .tabbar {
    padding-left: 0;
    width:  calc(100% / 6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    filter: drop-shadow(1px 1px 10px #00000020);
}
#scenarios .uk-subnav .tabbar::before{transition: all 0.3s;}
#scenarios .uk-subnav .tabbar:hover .icon h4{color:var(--vs-blue-font);}
#scenarios .uk-subnav .tabbar:hover::before  {background: var(--vs-blue-bar); opacity: 50%;}
#scenarios .uk-subnav .tabbar.uk-active .icon h4{color:var(--vs-blue-font-hover)}
#scenarios a svg{filter: drop-shadow(1px 1px 5px #000);}
.desktop-nav{transform: translate(-50%);
    top: 50%;
    position: absolute;
    left: 50%;}
.slick-slide .btn-white-dark p{font-size: 0.7em;margin: auto;}
.slick-slide .btn-white-dark{padding: 0.2rem .2rem;}
.slick-current  .btn-white-dark{ background: var(--vs-blue-hover); border: var(--vs-blue-hover);}
.slider-nav .slick-slide{margin: 0 2px;}
.slider-nav .slick-track {
  display: flex;
  height: 100%;
}
.slider-nav .slick-track a{flex:1; height: 100%;}
.slick-dots li{top: 10px; margin:0 }
.slick-dots li button::before{font-size: 10px;}
.slick-dots li.slick-active button::before{color: var(--vs-blue-hover); opacity: 1; }
.uk-dotnav > .uk-active > * {background-color: var(--vs-blue-hover);}
.uk-dotnav > * > *{border:0; background:#cccccc75}
#allpj .btn-white-dark {
    background-color: #fff; min-width: 225px;}
.media-content-bg{background-size:cover}
a.wp-feature-tile h4 {transition: all .2s}
a.wp-feature-tile:hover h4,a.wp-feature-tile:hover .vs-read-more{color:var(--vs-blue);transition: all .2s}
  #lightbox .modal-dialog {
      max-width: 70vw;
      height: 75vh;
      margin: auto;
      transform: translateY(-50%);
      top: 50%;
  }
  
#faq p a{color:var(--vs-body-font-hover);text-decoration: underline;}
#fag .uk-card-default{box-shadow: 0 0px 8px rgba(0, 0, 0, .1);}
#fag .uk-card-default:hover{box-shadow: 0 2px 16px rgba(0, 0, 0, .1);}
#faq .accordion-faq .uk-open {
    border: 5px solid var(--vs-sky-400);
    background: #fff;
}
#faq ul.uk-accordion li {
    background: var(--vs-blue-bg-hover)

}
#faq li:not(.uk-open) .uk-accordion-title:hover {
    background: var(--vs-sky-50);
    color: #222;
    border-radius: 16px;
}
#faq .uk-accordion-title {
    cursor: pointer;
    color:#222;
    font-weight: 700;
}
#faq .uk-accordion-title:hover{color:#222}
#faq li.uk-open .uk-accordion-title{color:var(--vs-body-font-hover)}
#faq .uk-accordion-content{padding: ; color:var(--vs-body-font); font-weight: 400;}
.uk-open>.uk-accordion-title:before {
    background-image: url(/vsAssetFile/global/img/education/software/Minus.svg);
}
.uk-accordion-title:before {
    background-image: url(/vsAssetFile/global/img/education/software/Plus.svg);
    background-size: 50%;
}
#faq .uk-border-rounded{border-radius: 16px;}
  @media (min-width: 576px){ #lightbox .modal-dialog {
    max-width: 70vw;
        height: 75vh;
        margin: auto;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        top: 50%;
  }
}
/* edu-faq
#faq p a{color:var(--vs-violet-500);text-decoration: underline;}
#fag .uk-card-default{box-shadow: 0 0px 8px rgba(0, 0, 0, .1);}
#fag .uk-card-default:hover{box-shadow: 0 2px 16px rgba(0, 0, 0, .1);}
#faq .accordion-faq .uk-open {
    border: 5px solid var(--vs-violet-400);
    background: #fff;
}
#faq ul.uk-accordion li {
    background: var(--vs-violet-100)

}
#faq li:not(.uk-open) .uk-accordion-title:hover {
    background: var(--vs-violet); 
    color: #222;
    border-radius: 16px;
}
#faq .uk-accordion-title {
    cursor: pointer;
    color:#222;
    font-weight: 700;
}
#faq .uk-accordion-title:hover{color:var(--vs-violet-500)}
#faq li.uk-open .uk-accordion-title{color:var(--vs-violet-500)}
#faq .uk-accordion-content{padding: ; color:var(--vs-body-font); font-weight: 400;}
.uk-open>.uk-accordion-title:before {
    background-image: url(/vsAssetFile/global/img/education/software/Minus.svg);
}
.uk-accordion-title:before {
    background-image: url(/vsAssetFile/global/img/education/software/Plus.svg);
    background-size: 50%;
}
#faq .uk-border-rounded{border-radius: 16px;}
  @media (min-width: 576px){ #lightbox .modal-dialog {
    max-width: 70vw;
        height: 75vh;
        margin: auto;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        top: 50%;
  }
} */

  @media (min-width: 576px){ #lightbox .modal-dialog {
    max-width: 70vw;
        height: 75vh;
        margin: auto;
        transform: translateY(-50%);
        top: 50%;
  }
}
@media(min-width: 2560px){.kv .vs-container .row{height: 90vh;}.kv .vs-container{max-width: 2260px}.kv h1{font-size: 4vh;}}
@media(max-width:1920px){
    .kv h1{font-size: 7vh;} .kv img{max-width: 80vh;height:auto ;}
.kv .uk-overlay{background: radial-gradient(#fff9 40%, #fff0 70%); top:35vh}

}
/* @media(min-width: 1200px){#allpj .end-cta{ width:50cqw}} */
@media(max-width:1366px){.key3 .col-md{padding: 0;}
#lightbox .modal-dialog {
    max-width: 85vw;
    height: 85vh;
    margin: auto;
    transform: translateY(-50%);
    top: 50%;
}}
@media(max-width:1200px){#allpj .end-cta{ width:70cqw}
 .key-bg .col-xl-3.col-md-4 img{width: 100px;}
}
@media(max-width:768px) {
    .kv h1{margin-top: 0;font-size: 5vh;}
    h2{font-size:2em}
   .icon h4{font-size: calc(4cqw + 0.8cqh);}
    .kv .vs-container, .kv .vs-container .row{ height:90vh}
      
    .key-bg {
        background-position: 130% -80%;
        background-size: 80vh;
    }
   #lightbox button.close {
    top: 25px;
    right: 25px;
    }
    #lightbox .modal-dialog{ height: 92vh}
     .bg-fixed-desktop {background-attachment:initial}
    .twentytwenty-before-label > span, .twentytwenty-after-label > span{font-size: 0.8em;}
    #allpj .end-cta{ width:90cqw}
}
@media (min-aspect-ratio: 16/7) {
 .kv{background-position: 50% 90%;}
 .kv h1{font-size: 7vh;}
 .kv img{max-height: 30vh; width: auto;}
}
@media (min-aspect-ratio: 16/9) and (max-width:992px) {
 .kv{background-position: 50% 100%;}
 .kv h1{ padding-bottom: 0 !important;}
 .kv h3 big{font-size: 3vh;}
 .kv img{max-height: 20vh; width: auto;}
}