:root{
    --vs-blue:#94c3e7;
    --vs-blue-hover:#b2d7f1;
    --vs-blue-font: #41538A;
    --vs-blue-font-hover:#404041;    
    --vs-blue-disabled: #dce5ed;
    --vs-blue-bg:#f0f4f7;

}
h2{font-size: 2.5em; font-weight: 700;}
.vs-home-banner h2{font-size: 2.3em;font-weight: 700;color: #000; margin-top: 0.5em;}
.top-gray-block{max-width: 570px;}
.aut-top-bg-leftblock{background-color:var(--vs-blue-bg); height: 520px; max-width: 670px;}
.aut-top-bg-leftblock i{font-size: 17px; padding-right: 0.3em;}
.fullthumb img.vs-video-thumb {
  margin-top: -9.4%;
  height: auto;
}
.btn-blue{
    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}
.vs-home-banner .btn-blue:hover,.vs-home-banner .btn-blue:active, #contact .btn-blue:hover, #products .btn-blue:hover{background: #c3e4f9; border: 1px solid var(--vs-blue)}
.vs-home-banner .btn-white-dark:hover{background: #fff;border: 1px solid #777}
.vs-home-banner .btn-white-dark:active{background: var(--vs-blue-hover);border: 1px solid var(--vs-blue)}
.btn-blue:disabled {
    opacity: 1;
    color: rgba(127, 127, 127, .65);
    background-color: var(--vs-blue-disabled);
}
.btn:focus{box-shadow: none;}

.btn-md{padding: 0.9em 2em;}
.btn-white.btn-md{font-size: 13px;}
.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);
}

.btn-white-dark{ border-radius: 50px; font-weight: 700;border: 1px solid #00000080;}
.btn-white-dark:hover, #fullrange .btn-white-dark:hover{background: var(--vs-blue-hover); color:var(--vs-blue-font-hover); border-color:var(--vs-blue-hover);}
#fullrange .btn-white-dark{ background-color: #fff;}

.vs-read-more i{ transition-duration: .5s;}
.msover  a:hover{text-decoration: none;}
.msover  a:hover h4{color: #900}
.msover  a:hover img{filter:brightness(120%);}
.msover  a:hover p{color: #222}
.msover  a:hover .hidden-more i{padding-left: 8px}


.grid-item > .product-image {
	display: flex;
  height: 70%;
}

.grid-item > .product-image > img {
	align-self: center;
	margin: 1em auto;
}

.grid-item > .product-link {
	display: inline-block;
}
.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;
    
}
.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%);
}
#products .uk-card{display: flex; flex-direction: column;}
#products .uk-card-default, .uk-card-default{ border-radius: 10px;}
#products .uk-card-hover:hover, #contact .uk-card-hover:hover {
    background-color: #fff;
    box-shadow: 0 8px 20px rgb(0 0 0 / 16%);
}
#products .uk-card-hover:hover{margin-top: -5px;margin-bottom: 5px;}
#products .uk-card-hover{
    transition: all .3s ease;
}
#products .uk-card-body{padding-bottom: 0;}
#products .uk-card-body a:hover{ text-decoration: none; color: initial;}
#products .uk-card-default .uk-card-footer{border-top: 0;margin-top: auto; margin-right: auto;margin-left: auto;padding-top: 0; padding-bottom: 30px;}
.icon h4 {
    text-align: center;
    font-weight: 700 !important;
    margin: 15px auto;
    color: var(--vs-blue-font-hover) ;
    font-size: 16px;
}
#products ul.uk-subnav{position: relative; align-items: inherit;}
#products ul .hover-effect {
    position: absolute;
    transition: 0.5s;
    height: 5px;
    bottom: 0;
    left: 0px;
    background:#B2D7F1;
    width: 20%;
    border-radius: 5px;
    z-index: 1;
}
.footer-height{flex-basis: 133px;}
.uk-subnav a{width: 100%; z-index: 2;justify-content: center;}
.uk-subnav li::before{
    content: "";
    position: absolute;
    height: 5px;
    bottom: 0;
    left: 0px;
    background: #ffffff;
    width: 100%;
   }
.uk-subnav li:first-child::before{
    border-radius: 5px 0 0 5px;
}
.uk-subnav li:nth-child(4):before{
    border-radius: 0 5px 5px 0;
}
.uk-subnav li {
    padding-left: 0;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}
.uk-subnav li:hover .icon h4{
    color:var(--vs-blue-font);
}
.uk-subnav li:hover::before  {
    background: #B2D7F150;
}
.uk-subnav li::before{transition: all 0.3s;}
.uk-subnav li.uk-active .icon h4{color:#404041}
a.wp-feature-tile:hover h4,a.wp-feature-tile:hover .vs-read-more{color:var(--vs-blue)}

.bg-fixed-desktop {
    background-attachment: fixed;
}

.rcbg{
    background-image: url("/vsAssetFile/global/img/lcd/blue-rectangle.svg"), url("/vsAssetFile/global/img/lcd/white-rectangle.svg");
    background-repeat: no-repeat;
    background-position: 190% 50%, -70% 93%;
    background-size: 60vw, 50vw;
}
.btn-subscribe{
    margin-left: -1em;
   z-index: 2;
}
.form-group input{border-radius: 50px 0 0 50px;height: 44px;}
.form-control:focus{border:  3px solid var(--vs-blue); box-shadow: none;}
#contact label a{font-weight: 700;}
.footer{background-color: var(--vs-blue-bg);}
.product-reviews .uk-card-body h3.uk-card-title {
    max-height: 60px;
    min-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.product-reviews .uk-card-default {
    border: 1px solid #eee;
}
.product-reviews .model {
    color: #900;
    font-weight: 600;
    padding-top: 0.5em;
    padding-bottom: 0.2em;
    font-size: 85%;
}
.product-reviews a:hover {
    text-decoration: none;
}
@media(max-width:1200px) { #contact .uk-card-body{padding: 50px;}}
@media(max-width:768px){
    h2{font-size: 2em;}
    section{padding: 1em 0;}
    .aut-top-bg-leftblock{height: fit-content;}
    .vs-home-banner{padding-top:0 ;}
    .top-gray-block{padding: 1rem;}
    .btn-white-dark{min-width: 180px;}
    .icon h4{font-size: 10px;}
    .bg-fixed-desktop {background-attachment:initial}
    .form-group input {border-radius: 50px;}
    .btn-subscribe {margin-left: 0;}
    #contact h3 big{font-size: 1.2857rem;}
    #contact .uk-card-body{padding: 30px;}
}


/* comparsion */
.cd-image-container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 2em auto;

}

.cd-image-container img {
    display: block;
}

@media only screen and (min-width: 768px) {
    .cd-image-container {
        margin: 4em auto;
    }
}
.cd-image-container::before {
    position: absolute;
    content: "";
    opacity: 0;
    background: #ccc;
    width: 100%;
    height: 5px;
    top: -10px;
    right: auto;
    left: auto;
}
.cd-image-container.is-visible::before{
    opacity: 1;
    -webkit-transition: -webkit-transform 0.3s 1.2s, opacity 0s 1.2s;
    -moz-transition: -moz-transform 0.3s 1.2s, opacity 0s 1.2s;
    transition: transform 0.3s 1.2s, opacity 0s 1.2s;
}
.cd-image-label {
    position: absolute;
    top: -50px;
    right: 0;
    color: #333;
    font-weight: 700;
    padding: 1em;
    padding-top: 0.5em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
    -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
    transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}

.cd-image-label.is-hidden {
    visibility: hidden;
}

.is-visible .cd-image-label {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.cd-resize-img {

    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url("https://www.viewsonic.com/vsAssetFile/global/img/lcd/usbc-after.jpg") no-repeat left top;
    background-size: auto 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cd-resize-img .cd-image-label {
    right: auto;
    left: 0;
}

.is-visible .cd-resize-img {
    width: 50%;
    -webkit-animation: cd-bounce-in 1.5s;
    -moz-animation: cd-bounce-in 1.5s;
    animation: cd-bounce-in 1.5s;
}

@-webkit-keyframes cd-bounce-in {
    0% {
        width: 0;
    }

    60% {
        width: 100%;
    }

    100% {
        width: 50%;
    }
}

@-moz-keyframes cd-bounce-in {
    0% {
        width: 0;
    }

    60% {
        width: 100%;
    }

    100% {
        width: 50%;
    }
}

@keyframes cd-bounce-in {
    0% {
        width: 0;
    }

    60% {
        width: 100%;
    }

    100% {
        width: 50%;
    }
}
@keyframes handle{  
    0%{box-shadow: 0 0 0 10px rgba(140, 184, 216, 0.3),
            0 0 20px rgba(144, 205, 242, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, .3);}
    50%{box-shadow:none}
    100%{box-shadow:0 0 0 10px rgba(140, 184, 216, 0.3),
        0 0 20px rgba(144, 205, 242, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, .3)}
}
@-webkit-keyframes handle {
    0% {
        box-shadow:0 0 0 10px rgba(140, 184, 216, 0.23),
        0 0 10px rgba(144, 205, 242, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, .3)
    }
    50% {
        box-shadow: none
    }
    100% {
        box-shadow:0 0 0 10px rgba(140, 184, 216, 0.3),
        0 0 10px rgba(144, 205, 242, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3)
    }
}
@-moz-keyframes handle{  
    0%{box-shadow: 0 0 0 10px rgba(140, 184, 216, 0.3),
            0 0 20px rgba(144, 205, 242, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, .3);}
    50%{box-shadow:none}
    100%{box-shadow:0 0 0 10px rgba(140, 184, 216, 0.3),
        0 0 20px rgba(144, 205, 242, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, .3)}
}
.cd-handle {
    position: absolute;
    height: 34px;
    width: 64px;
    left: 50%;
    top: -13px;
    margin-left: -32px;
    margin-top: -12px;
    border-radius: 20px;
    background: var(--vs-blue) url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-arrows.svg') no-repeat center center ;
    /* -webkit-clip-path: polygon(10% 40%, 52% 100%, 93% 40%);
    clip-path: polygon(10% 40%, 52% 100%, 93% 40%); */
    cursor: move;
    box-shadow: 0 0 0 6px rgba(140, 184, 216, 0.2), 0 0 10px rgba(144, 205, 242, 0.6), inset 0 1px 0 rgba(255, 255, 255, .3);
    opacity: 0;
    animation: handle 1.5s infinite;
    -webkit-transform: translate3d(0, 0, 0) scale(0);
    -moz-transform: translate3d(0, 0, 0) scale(0);
    -ms-transform: translate3d(0, 0, 0) scale(0);
    -o-transform: translate3d(0, 0, 0) scale(0);
    transform: translate3d(0, 0, 0) scale(0);
}

.cd-handle.draggable {
    background-color: #445b7c;
    background-size: 60%;
}

.is-visible .cd-handle {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    -webkit-transition: -webkit-transform 0.3s 1.2s, opacity 0s 1.2s;
    -moz-transition: -moz-transform 0.3s 1.2s, opacity 0s 1.2s;
    transition: transform 0.3s 1.2s, opacity 0s 1.2s;
}
@media (max-width:768px) {
 .cd-image-label{font-size: 0.8rem; max-width: 130px;} 
.cd-image-container{max-width: 768px;}
.cd-resize-img {background: url("https://www.viewsonic.com//vsAssetFile/global/img/lcd/usbc-after-m.jpg") no-repeat left top;background-size: auto 100%;
}   
}