body { font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; background: #fff; background-size: cover; height: 100vh; line-height: 24px; min-width: 1280px; overflow:inherit}
h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { color: black; text-decoration: none; }
*:focus { outline: none; }
ul, li { list-style-type: none; padding: 0; margin: 0; }
button { background: none; border: none; }
.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { margin: auto; display: block; }
.text-center { text-align: center; }
.force-hidden { display: none; }
.clearfix:before { display: table; content: ''; }
.clearfix:after { display: table; content: ''; clear: both; }
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.instruction { width: 240px; }
.instruction-div { bottom: 60px !important; }
.fence-height { display: none; }
.intro { padding-left: 150px; margin-top: 55px; margin-left: 185px; color:#000000; font-weight: bold; font-size: 24px;}
.ui-widget-shadow {box-shadow: none; border-radius:0;border-color: #f2f2f2;}

.row, .form-group { width: 100%; float: left; min-height: 1px; position: relative; }
button.kons { background: #ec1d24; color: #fff; padding: 10px 20px; border: 1px solid transparent; transition: .4s; }
button.kons a { color: #fff; }
button.kons.active, button.kons:hover { background: transparent; color: #ec1d24; border: 1px solid #ec1d24; transition: .4s; }
button.kons.active a, button.kons:hover a { color: #ec1d24; }
button.kons.active:hover { background: #ec1d24; color: #fff; }
aside { background: #f2f2f2; padding: 15px 30px; width: 300px; position: fixed; height: 100%; left: 0; top: 0; z-index: 999999999999; }
aside .inner { height: 100%; position: relative; }
aside li { background: #fff; margin: 15px 0; border: 1px solid transparent; cursor: move; height: 17vh; background-repeat: no-repeat; background-position: 50%; position: relative; max-height: 120px; }
aside li img { width: 100%; z-index: 9999; cursor: move; position: absolute; top: 50%; left: 0; }
aside li span { display: block; margin: 10px; }
aside li:hover, aside li.active { border: 1px solid #ec1d24; }
aside li:nth-of-type(1) img { height: 6px; margin-top: -5px; }
aside li:nth-of-type(2) img { height: 12px; margin-top: -10px; }
aside li:nth-of-type(3) img { height: 24px; margin-top: -15px; }
aside li:nth-of-type(4) img { height: 30px; margin-top: -20px; }
aside p { color: #555555; font-family: 'Lato', sans-serif; font-size: 14px; margin-top: 0; }
aside a {color: #555555; font-family: 'Lato', sans-serif; }
.lang-current {font-weight: bold;}
aside .inner > a { position: absolute; bottom: 45px; }
aside .inner > div { position: absolute; bottom: 15px; }
aside .inner > div a {display: inline-block;}
header { width: 939px; padding-left: 30px; margin: 0px auto auto auto; overflow: hidden; position: relative;
}
header a { float: left; }
header p { float: left; color: #ec1d24; margin: 10px 0; }
header p:first-of-type { float: left; }
header p:last-of-type { float: right; }
#refresh { position: absolute; right: 0px; top: 46px; background: #ec1d24; color: #fff; padding: 10px 20px; transition: .4s; display: block; border: 1px solid #ec1d24; }
#refresh:hover { background: transparent; color: #ec1d24; transition: .4s; }
main { width: 999px; padding-left: 30px; margin: auto; overflow: hidden; }
.ui-droppable-active { background: rgba(0, 0, 0, .12); }
.dashboard .result { background: #f2f2f2; padding: 30px 60px; position: relative; text-align: center; }
.dashboard .result > img { display: block; margin: auto; }
/*.dashboard .result.fence { width: 649px;}*/
.dashboard .result { width: 968px; height: 660px; }
.dashboard .result .drop img { width: 100%; position: absolute; z-index: 9999; cursor: move; }
.dashboard .result .crop { position: absolute; bottom: 30px; height: 540px; overflow: hidden; }
.dashboard .result.fence .crop { left: 190px; width: 589px; }
.dashboard .result.gate .crop { left: 60px; width: 848px; }
.dashboard .result .crop img { position: absolute; left: 0; bottom: 0; }
.dashboard .fence .drop { width: 559px;
	height: 600px;
	position: absolute;
	left: 205px;
	bottom: 30px;
}
.dashboard .gate .drop { width: 763px;
	height: 563px;
	position: absolute;
	left: 103px;
	bottom: 55px; }
.dashboard .drop .inner { position: relative; width: 100%; height: 100%; }
.dashboard .result.fence {
	display: none;
}
.dashboard .result.gate .drop .inner:after { content: '';
	position: absolute;
	left: 50%;
	margin-left: -13.5px;
	bottom: -1px;
	background: url('../img/layer-gate-mid.png');
	width: 27px;
	height: calc(100% + 2px);
	z-index: 9999;
}
#gateDrag { z-index: 999999; }
button.selectProject { padding: 6px 14px; margin: 20px 15px 15px 15px; }
.ui-draggable-handle { cursor: move; }
.drop .ui-draggable { position: absolute !important; width: 100%;}
.ui-draggable .inner { position: relative;}
.ui-draggable i { position: absolute; right: -22px; top: 50%; font-size: 22px; color: #ec1d24; cursor: pointer; margin-top: -11px;
	display: none;
}
.ui-draggable.active i { display: block; }
.ui-draggable span {
	display: none;
	position: absolute;
	bottom: -4px;
	width: 58px;
	text-align: right;
}
.ui-draggable.active span { display: block; }
.ui-draggable.spanVisible span { display: block; }
.gate .ui-draggable span { left: -104px; }
.fence .ui-draggable span { left: -78px; }
.ui-draggable img { height: 100%; }
aside .ui-draggable-dragging { z-index: 9999999999999999; }
#menu { width: 40px; height: 40px; cursor: pointer; position: absolute; right: 0; bottom: 10px; fill: #ec1d24; transition: .5s; }
#menu.open { transform: rotateY(180deg); }
.sample { width: calc(25% - 15px); margin: 10px 10px; height: 100px; float: left; cursor: pointer; background-position: 50%; background-size: contain; background-repeat: no-repeat; }
.sample:first-of-type { margin-left: 0; }
.sample:last-of-type { margin-right: 0; }
.sample:nth-of-type(1) { background-image: url("../img/pre/1.png"); }
.sample:nth-of-type(2) { background-image: url("../img/pre/2.png"); }
.sample:nth-of-type(3) { background-image: url("../img/pre/3.png"); }
.sample:nth-of-type(4) { background-image: url("../img/pre/4.png"); }
.select { display: none; }
.select, .save { margin: 30px 15px 60px 15px; }
.popup { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 999999999999999; background: rgba(0, 0, 0, .75); overflow: auto;
}
.popup .p-container { position: absolute; left: 50%; top: 20%; padding: 30px; background: #fff; margin-bottom: 120px; }
.popup .p-container > .inner { position: relative; }
.popup .close { position: absolute; right: 0; top: 0; background: url("../img/close.png"); width: 45px; height: 45px; border: none; }
.popup .close:hover { border: none; }
.popup .head { color: #ec1d24; text-align: center; font-weight: bold; letter-spacing: 1px }
.popup input[type="email"] { border: 1px solid #ec1d24; width: 400px; }
.popup button[type="submit"] { margin-top: 30px; }
.popup label { cursor: pointer; padding-left: 6px; }
/*.popup .terms { margin-bottom: -20px; }*/
.popup.form { display: none; }
.popup.contact { display: none; }
.popup.form .p-container { width: 1000px; margin-left: -500px; }
.popup.form .canvas { background: #f2f2f2; width: 400px; margin-left: 270px; }
.popup.form .canvas > div { width: 50%; float: left; }
.popup.form .canvas canvas { width: 100%; }
.popup.form .canvas .fence canvas { margin-top: 10px; }
.popup.form .canvas .gate canvas { margin-top: 10px; }
.popup.form .response { margin-top: 10px; }
.popup.form .response.success { color: green; }
.popup.form .response.error { color: red; }
label[for="terms"], label[for="terms2"] { font-size: 14px; line-height: 16px; }
label[for="terms"] p, label[for="terms2"] p { margin: -22px 0 0 22px; }
.popup.contact .p-container { width: 400px; height: 220px; margin-top: -110px; margin-left: -200px; }
.popup.welcome { display: none;}
.popup.welcome .p-container { width: 800px; margin-left: -400px; }
.popup.welcome .slick-arrow { display: none !important; }
.popup.welcome .close2 { display: none; }
.popup.welcome img { margin-bottom: 20px; display: inline-block; width: 100%; margin-top: -40px; height: auto; }
.popup.welcome .slider { margin-bottom: -15px; }
.popup.welcome .slick-dots { position: absolute; width: 100%; text-align: center; top: 360px; }
.popup.welcome .slick-dots li { display: inline-block; font-size: 0; width: 20px; height: 20px; margin: 0 6px; }
.popup.welcome .slick-dots li button { border-radius: 50%; width: 100%; height: 100%; padding: 0; background: transparent; border: 1px solid #ec1d24; }
.popup.welcome .slick-dots li:hover button, .popup.welcome .slick-dots li.slick-active button { background: #ec1d24; }
@media (max-width: 1530px) {
	header, main { float: left; margin-left: 300px; }
}
#popw {
    display:none;}