@charset "utf-8";
/* CSS Document */

/* SCREEN BUILDER */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}


.preset-but {cursor: pointer;
width: 31.333%;
padding: 5px 0px;
margin-bottom: 5px;
background: #fff;
border-radius: 5px;
color: #888;
text-align: center;
float: left;
font-weight: 600;
font-size: 16px;
margin: 1%;
border: solid 2px #888 !important;}

.preset-but.active-preset {cursor: pointer;
padding: 5px 0px;
margin-bottom: 5px;
background: #00a5e7;
border-radius: 5px;
color: #ffffff;
text-align: center;
float: left;
font-weight: 600;
margin: 1%;
border: solid 2px #00a5e7 !important;}

.main-vsb-container {max-width: 100% !important; background: #fff}
.vsb-single-column {width: 30.333%; margin-left: 1%; margin-right: 1%; border: solid 1px #cccccc; float: left; padding: 0.5%;}
.vsb-wrapper {width: 100%; max-width: 1200px; margin-bottom: 25px; margin-left:auto; margin-right: auto; overflow: hidden;}
.vsb-wrapper h1, h2 {font-family: 'Orbitron', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
.vsb-wrapper .left-column {float: left; width: 25%; border: solid 1px #ededed; padding: 20px; box-sizing: border-box; background-color: rgba(255,255,255,0.98);}
.vsb-wrapper .vsb-single-column .left-inner {max-height: 100px; min-height:100px;overflow-y: scroll;overflow-x: hidden; width: 100%; float: left; padding: 10px;border: solid 1px #cccccc;}
.vsb-wrapper .right-column {float: left; width: 100%; margin-left: 0%; box-sizing: border-box}
.vsb-product-box {width: 100%; box-sizing: border-box; padding: 10px 10px 2px; border: solid 1px #ededed; margin-bottom: 5px; clear: both; overflow: hidden}
.vsb-product-box:hover {background-color: #00AEEF; cursor: pointer}
.vsb-product-thumb {width: 15%; float: left;}
.vsb-product-title {width: 95%; float: left; margin-left: 0}
.vsb-product-title h3 {font-size: 15px;text-transform: uppercase;}
.vsb-wrapper .heading-wrap h2 {font-size: 19px; margin: 0 !important; float: left;}
.vsb-wrapper .heading-wrap {font-size: 17px; margin-bottom: 15px; float: left; width: 100%}
.vsb-product-details {font-size: 10px;}
.vsb-options {}
.vsb-options-left {width: 28.5%; margin-right: 3%; float: left; border: solid 1px #ededed; box-sizing: border-box; padding: 20px; background-color: rgba(255,255,255,0.98); min-height: 289px}
.vsb-options-left h3 {font-size: 16px;}
.vsb-options-right  {width: 100%; float: left; border: solid 1px #ededed; box-sizing: border-box; padding: 20px; background-color: rgba(255,255,255,0.98);  min-height: 289px}
ul.screen-details {
width: 49%;
list-style-type: none !important;
margin: 0.5%;
padding: 10px;
border: solid 1px #ccc !important;}
.dividing-line {width: 70%;
clear: both;
border-top: solid 1px #9999;
margin-top: 15px;
margin-bottom: 15px;
float: left;
margin-left: 15%;
margin-right: 15%;}
ul.screen-details li {width: 100%;  float: left; border-bottom: solid 1px #ccc; margin-bottom: 0 !important; padding: 15px 10px !important; font-size: 16px; margin-left: 0; padding-left: 0}
ul.screen-details li:last-child {border-bottom: none !important;}
ul.screen-details li span:first-child {color: #00aeef;}
ul.screen-details li span {float: left}
ul.screen-details li span:first-child {width: 50%; font-weight: bold}
ul.screen-details li span:last-child {}
.vsb-preview  {width: 100%; float: left; margin-top: 20px; min-height: 700px; box-sizing: border-box; padding: 0px; position: relative; overflow: hidden; padding-top: 0px;}
.vsb-product-sorting  {float: left; width: 100%; margin-bottom: 10px}
.vsb-product-sorting  ul  {list-style-type: none; float: left; width: 100%; margin: 0px !important; padding: 0px !important}
.vsb-product-sorting  ul li {list-style-type: none; float: left; width: 100%; margin-bottom: 3px !important; margin-left: 0 !important; padding: 0px !important}
.vsb-product-sorting form label {float: left; font-size: 11px !important; width: 35%;color: #fff; padding: 8px 8px; box-sizing: border-box; border-radius: 2px 0px 0px 2px; text-transform:uppercase; text-align: right !important}
.vsb-product-sorting form ul li label { background: #cccccc;padding-right: 15px;}
#top .vsb-product-sorting form select{float: left; width: 65% !important; margin-bottom: 0 !important}
.separator {padding-left: 5px; padding-right: 5px; font-weight: 600}
#vsb-screen-preview-wrapper {float: left; box-sizing: border-box; background-image: url(guy-for-scale.png); background-position: bottom right; background-repeat: no-repeat; padding-right: 6%; padding-bottom: 30px; background-size: 160px; position: absolute; left: 30px; top: 100px; transform-origin: 0% 0%; transform: scale(2) }
.vsb-screen-preview-bg {background-size: cover; background-position: center center; float: left; overflow: hidden; width: auto; height: auto; box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);}
.vsb-single-column input[type=range] {width: 70%;}
.range-box h3 {padding: 10px; background: #cccccc; width: 70%; text-align: center; color: #ffffff !important; margin-top: 5px;float: left;font-size: 11px;text-transform: uppercase !important;}
.range-box input[type=number] {margin-top: -40px !important; max-width: 19%; width: 18%;}
h2.vsb-black-heading {background: #000000; color: #ffffff !important; padding: 10px; width: 100%; float: left; text-align: center;}

.preview-theme-1 {background-image: url(https://www.vuepix.com/wp-content/themes/enfold-child/car-background.jpg) !important; background-size: cover; background-position: center center; }
.preview-theme-2 {background-image: url(https://www.vuepix.com/wp-content/themes/enfold-child/sb-images/Catwalk.jpg) !important; background-size: cover; background-position: center center; }
.preview-theme-3 {background-image: url(https://www.vuepix.com/wp-content/themes/enfold-child/sb-images/City.jpg) !important; background-size: cover; background-position: center center; }
.preview-theme-4 {background-image: url(https://www.vuepix.com/wp-content/themes/enfold-child/sb-images/Morning-Due.jpg) !important; background-size: cover; background-position: center center; }
.preview-theme-5 {background-image: url(https://www.vuepix.com/wp-content/themes/enfold-child/sb-images/Portrait.jpg) !important; background-size: cover; background-position: center center; }
.preview-theme-6 {background-image: url(https://www.vuepix.com/wp-content/themes/enfold-child/sb-images/Theatre.jpg) !important; background-size: cover; background-position: center center; }
.preview-theme-7 {background-image: url(https://www.vuepix.com/wp-content/themes/enfold-child/sb-images/Waterfall.jpg) !important; background-size: cover; background-position: center center; }





.reflection  {width: 75%; height: 75%; float: left; background: url(reflection.png); background-size: 100% 100%;}
#vsb-screen-preview { background-image: url(screen-builder-screen.png); background-size: 40px; background-position: top left; width: 80px; height: 80px; float: left;   width: 360px; height: 160px;}
.width-box-wrap {width: 100%; box-sizing:border-box; padding: 20px;float: left; width: 100%; background-color: #ffffff; left: 0; top: 0; color: #000000; font-size: 16px; text-align: center; border: solid 1px #000000;}
.width-box-wrap span.vsb_product_name i {display:none !important}
.width-box-wrap span, .height-box-wrap span {text-align:center; margin: 0px; padding: 0px; }

.theme-select {float: right; margin-right: 15px;}

.theme-select form {margin-bottom: 0 !important; float: left; opacity: 0.7; transition: all ease-in-out 0.1s}
.theme-select form:hover {opacity: 1}
.theme-select i {font-size: 20px; margin-right: 10px; float: left; cursor: help; color: #666; margin-top: 11px;}
.theme-select form select {margin-bottom: 5px  !important; margin-top: 0px  !important;   padding: 10px !important;min-width: 220px !important;}

.vsb-quote {float: left;color: #fff !important;font-size: 12px;background-color: #00AEEF; border: solid 1px #00AEEF; padding: 8px 20px;margin-left: 5px;border-radius: 3px;}

.vsb-product-box-active {
	background-color: #00AEEF;
}


@media (max-width: 468px) {
.vsb-wrapper .left-column {width: 100% !important; margin-bottom: 20px;}
.vsb-wrapper .right-column {width: 100% !important;  margin-bottom: 20px;}
.vsb-wrapper .right-column .vsb-options-left {width: 100% !important; margin-right: 0;  margin-bottom: 20px;}
.vsb-wrapper .right-column .vsb-options-right{width: 100% !important}
.vsb-wrapper .right-column {float: left;width: 100%;margin-left: 0 !important;box-sizing: border-box;}
.vsb-wrapper .left-column {float: left; width: 100%; margin-left: 0 !important;box-sizing: border-box;}
ul.screen-details li {width: 100%;}
.vsb-wrapper {height: auto !important}
.printomatic {display: none}
.vsb-preview {display: none;}
.main-vsb-container {max-width: 100%; background: none;}
.vsb-quote {width: 100%; margin-top: 10px;}
.vsb-wrapper h2 {text-align: center}
.vsb-options { flex-direction: column !important;}
.vsb-single-column {width: 98%;}
.hide-on-mob {display: none;}

.preset-but {margin-left: 1% !important; width: 48%;}

ul.screen-details {
    width: 99%;
    list-style-type: none !important;
    margin: 0%;
    padding: 0px;
    border: none !important;
}
ul.screen-details li:last-child {border-bottom: solid 1px #ccc !important;} 
}
@media (max-width: 1400px) {
.printomatic {margin-top: 0 !important}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
.vsb-wrapper .left-column {width: 100% !important; margin-bottom: 20px;}
.vsb-wrapper .right-column {width: 100% !important;  margin-bottom: 20px;}
.vsb-wrapper .right-column .vsb-options-left {width: 100% !important; margin-right: 0;  margin-bottom: 20px;}
.vsb-wrapper .right-column .vsb-options-right{width: 100% !important}
.vsb-wrapper .right-column {float: left;width: 100%;margin-left: 0 !important;box-sizing: border-box;}
.vsb-wrapper .left-column {float: left; width: 100%; margin-left: 0 !important;box-sizing: border-box;}
ul.screen-details li {width: 100%;}
.vsb-wrapper {height: auto !important}
.printomatic {display: none}
.vsb-preview {}
.main-vsb-container {max-width: 100%; background: none;}
.vsb-quote {width: 100%; margin-top: 10px;}
.vsb-wrapper h2 {text-align: center}
.theme-select {display: none}
}