@charset "utf-8";
/* CSS Document */
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none}
body{margin:0;font-family:Arial;font-size:12px;position:relative;position:relative}
*{margin:0;padding:0;border:0}
.c{clear:both;font-size:0;overflow:hidden;display:block}
a{color:#1c85ed;outline:none}
a:hover{text-decoration:none}
a img{border:0}
@font-face{font-family:'helvetica';src:url('fonts/helveticaneueltpro-blkcn-webfont.eot');src:url('fonts/helveticaneueltpro-blkcn-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltpro-blkcn-webfont.woff') format('woff'), url('fonts/helveticaneueltpro-blkcn-webfont.ttf') format('truetype'), url('fonts/helveticaneueltpro-blkcn-webfont.svg#helvetica_neue_lt_pro97BlkCn') format('svg');font-weight:800;font-style:normal}
@font-face{font-family:'helvetica';src:url('fonts/helveticaneueltpro-bdcn-webfont.eot');src:url('fonts/helveticaneueltpro-bdcn-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltpro-bdcn-webfont.woff') format('woff'), url('fonts/helveticaneueltpro-bdcn-webfont.ttf') format('truetype'), url('fonts/helveticaneueltpro-bdcn-webfont.svg#helvetica_neue_lt_pro77BdCn') format('svg');font-weight:700;font-style:normal}
@font-face{font-family:'helvetica';src:url('fonts/helveticaneueltpro-mdcn-webfont.eot');src:url('fonts/helveticaneueltpro-mdcn-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltpro-mdcn-webfont.woff') format('woff'), url('fonts/helveticaneueltpro-mdcn-webfont.ttf') format('truetype'), url('fonts/helveticaneueltpro-mdcn-webfont.svg#helvetica_neue_lt_pro67MdCn') format('svg');font-weight:500;font-style:normal}
header{background:url(/img/tbg.png) repeat-x top;position:fixed;top:0;left:0;right:0;height:350px;z-index:1}
header:after{background:url(/img/shad.png) repeat-x bottom;position:absolute;top:20px;left:0;right:0;bottom:0;content:"";z-index:1}
header+*{width:96%;max-width:790px;margin:0 auto;padding:350px 2% 0 2%;overflow:hidden}
#logo{display:block;width:216px;height:144px;background:url(/img/logo.png) no-repeat center top;position:absolute;top:7px;left:50%;margin:0 0 0 -600px;z-index:2}
#logo+a{width:216px;color:#02533e;font-size:31px;font-family:'helvetica';font-weight:800;text-decoration:none;text-align:center;position:absolute;top:155px;left:50%;margin:0 0 0 -600px;z-index:2}
#socs a,input[type='text'],select,.selnew div span,textarea,input[type='submit']{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease}
h2{color:#999;display:block;border-bottom:10px solid #6aae9c;font-family:'helvetica';font-weight:700;font-size:24px;line-height:35px;text-transform:uppercase}
h3{color:#00523d;font-size:24px;font-family:'helvetica';font-weight:500;display:block}
h4{color:#00523d;font-size:17px;font-family:"Trebuchet MS",Arial;font-weight:400}
mark{width:115px;height:30px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;background-color:#2b8b72;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.15),inset 0 2px rgba(255,255,255,.45);-moz-box-shadow:0 1px 1px rgba(0,0,0,.15),inset 0 2px rgba(255,255,255,.45);box-shadow:0 1px 1px rgba(0,0,0,.15),inset 0 2px rgba(255,255,255,.45);border:solid 1px #00523d;background-image:-webkit-linear-gradient(bottom,#00523d,#3eb194);background-image:-moz-linear-gradient(bottom,#00523d,#3eb194);background-image:-o-linear-gradient(bottom,#00523d,#3eb194);background-image:linear-gradient(to top,#00523d,#3eb194);text-align:center;color:#fff;text-transform:uppercase;text-shadow:0 1px 0 #196753;display:block;font-family:'helvetica';font-weight:700;line-height:21px;font-size:24px;position:absolute;bottom:0;left:0}
.h2{position:relative}
.h2 h2{margin:0 0 19px 135px}
.newstep h2{margin-top:20px}
.step>figure{display:block;float:left;margin:0 10px 10px 0;text-align:center;cursor:pointer}
.step>figure>figcaption{display:block;color:#333;padding:3px 0 0}
.step>figure p{display:block;overflow:hidden;height:89px}
.step>figure img{min-width:100%;height:100%;display:block}
#house>figure {margin-right:30px;}
#house>figure p{-webkit-box-shadow:2px 3px 7px rgba(0,0,0,.4);-moz-box-shadow:2px 3px 7px rgba(0,0,0,.4);box-shadow:2px 3px 7px rgba(0,0,0,.4);border:0;height:70px;min-width: 70px;}
#doors>figure{margin:0 20px 20px 0}
#doors>figure p{-webkit-box-shadow:2px 3px 7px rgba(0,0,0,.4);-moz-box-shadow:2px 3px 7px rgba(0,0,0,.4);box-shadow:2px 3px 7px rgba(0,0,0,.4);width:115px;height:100px;border:0}
#doors>figure:nth-child(6n+0){margin-right:0}
#colors>figure{width:64px;margin:0 8.6px 8px 0}
#colors>figure p{-webkit-box-shadow:2px 3px 7px rgba(0,0,0,.4);-moz-box-shadow:2px 3px 7px rgba(0,0,0,.4);box-shadow:2px 3px 7px rgba(0,0,0,.4);width:62px;height:64px;border:0}
#colors>figure:nth-child(11n+0){margin-right:0}
#windows>figure{width:113px;margin:0 22px 8px 0}
#windows>figure p{-webkit-box-shadow:2px 3px 7px rgba(0,0,0,.4);-moz-box-shadow:2px 3px 7px rgba(0,0,0,.4);box-shadow:2px 3px 7px rgba(0,0,0,.4);width:107px;height:30px;border:0}
#windows>figure:nth-child(6n+0){margin-right:0}
#handles>figure{width:104px;margin:0 22px 8px 0}
#handles>figure p{-webkit-box-shadow:2px 3px 7px rgba(0,0,0,.4);-moz-box-shadow:2px 3px 7px rgba(0,0,0,.4);box-shadow:2px 3px 7px rgba(0,0,0,.4);width:104px;height:104px;border:0}
#handles>figure:nth-child(6n+0){margin-right:0}
#hinges>figure{margin:0 10px 5px 0}
#hinges>figure p{-webkit-box-shadow:2px 3px 7px rgba(0,0,0,.4);-moz-box-shadow:2px 3px 7px rgba(0,0,0,.4);box-shadow:2px 3px 7px rgba(0,0,0,.4);height:80px;border:0}
#hinges>figure:nth-child(6n+0){margin-right:0}
#house>figure p:hover,
#house>figure p.active,
#doors>figure p:hover,
#doors>figure p.active,
#colors>figure p:hover,
#colors>figure p.active,
#windows>figure p:hover,
#windows>figure p.active,
#handles>figure p:hover,
#handles>figure p.active,
#hinges>figure p:hover,
#hinges>figure p.active{-webkit-box-shadow: 0px 0px 8px #09F;-moz-box-shadow: 0px 0px 8px #09F;box-shadow: 0px 0px 8px #09F;}
p.selected:hover {
    box-shadow: 0px 0px 8px red !important;
}
#share{border-radius:5px;border:1px solid #888888;overflow:hidden;box-shadow:0 1px 3px #ccc}
#share h3{text-align:center;background-image:-webkit-linear-gradient(bottom,#bfc3c5 2%,#ecf1f3 5%,#fff);background-image:-moz-linear-gradient(bottom,#bfc3c5 2%,#ecf1f3 5%,#fff);background-image:-o-linear-gradient(bottom,#bfc3c5 2%,#ecf1f3 5%,#fff);background-image:linear-gradient(to top,#bfc3c5 2%,#ecf1f3 5%,#fff);text-shadow:1px 1px 0 #fff;padding:13px 5px}
#socs{float:left;margin:0 7px 0 0}
#socs a{display:block;width:47px;height:48px;background:url(/img/socs.png);float:left;margin:0 10px 0 0}
#stxt{color:#999;font-size:23px;font-family:'helvetica';font-weight:500;padding:25px 20px 20px 20px;line-height:24px}
#socs #tw{background-position:-47px 0}
#socs #fb{background-position:-94px 0}
#socs a:hover{opacity:0.8}
#quote{border-radius:5px;border:1px solid #888888;padding:30px 45px 20px;box-shadow:0 1px 3px #ccc}
#quote ul{color:#f00;font-weight:bold;font-size:14px;margin-bottom:5px;}
input[type='text'],select,textarea,input[type='submit']{font-family:Arial;font-size:13px;resize:none;padding:8px 2%;border:1px solid #b9bcbe;margin:0 0 35px;color:#333;background-color:#fff;box-shadow:inset 0 1px 4px rgba(0,0,0,.15),4px 4px 0 #f2f5f7,-4px -4px 0 #f2f5f7,-4px 4px 0 #f2f5f7,4px -4px 0 #f2f5f7;border:solid 1px #ccd0d2;width:40%;border:1px solid #b9bcbe;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;outline:none}.r{float:right}
input[type='text']:focus,select:focus,textarea:focus{box-shadow:inset 0 1px 4px rgba(0,0,0,.15),4px 4px 0 #e0f1fc,-4px -4px 0 #e0f1fc,-4px 4px 0 #e0f1fc,4px -4px 0 #e0f1fc;border:1px solid #7dc6dd}
input[type='submit']{width:15%;cursor:pointer;float:right;margin:20px 0 10px;background:#c9e9ff;background-image:-webkit-linear-gradient(bottom,#0077a4,#009ed9 98%,#b2eaff 99%);background-image:-moz-linear-gradient(bottom,#0077a4,#009ed9 98%,#b2eaff 99%);background-image:-o-linear-gradient(bottom,#0077a4,#009ed9 98%,#b2eaff 99%);background-image:linear-gradient(to top,#0077a4,#009ed9 98%,#b2eaff 99%);border-radius:3px;border:1px solid #006f98;font-weight:700;color:#fff;text-shadow:1px 1px #009dd8}
.selnew{width:44.3%;position:relative;float:right}
input[type='text'].selvis{color:#888;width:91.5%;padding:8px 4%;cursor:pointer;margin:0;background:url(/img/select.png) no-repeat right center}
.selnew div{border-left:1px solid #ccc;border-right:1px solid #ccc;position:absolute;top:100%;left:0;right:4%;display:none;max-height:150px;overflow-y:auto}
.selnew div span{display:block;border-bottom:1px solid #ccc;padding:5px;cursor:pointer;background:#fff}
.selnew div span:hover{background:#eee}
.selnew div span.actsel{background:#e0f1fc}
.act input[type='text'].selvis{color:#333}

/*.lcol{width:45%;float:left}
.rcol{width:45%;float:right}
.lcol label{display:block;cursor:pointer;font-family:"Trebuchet MS",Arial;color:#00523d;font-size:14px;margin:10px 0 0}
.lcol label input{margin:2px 10px 0;float:left;}
.rcol textarea{width:94.5%;margin:15px 0 0 1.5%;height:70px}*/

.lcol{width:45%;float:left}
.rcol{width:45%;float:right}
.lcol label{display:block;cursor:pointer;font-family:"Trebuchet MS",Arial;color:#00523d;font-size:14px;margin:10px 0 0}
.rcol label{display:block;cursor:pointer;font-family:"Trebuchet MS",Arial;color:#00523d;font-size:14px;margin:10px 0 0}
.lcol label input{margin:2px 10px 0;float:left;}
.rcol label input{margin:2px 10px 0;float:left;}
.rcol textarea{width:94.5%;margin:15px 0 0 1.5%;height:70px}

input[type='submit']:hover{opacity:0.9}
footer{text-align:right;padding:20px 0;color:#747475;font-family:"Trebuchet MS",Arial;font-size:17px;font-weight:700;font-style:italic}
#block{width:96%;max-width:572px;border:1px solid #00523d;border-radius:10px;padding:15px 1%;text-align:center;position:fixed;top:25px;left:50%;margin:0 0 0 -278px;background:#fff;z-index:5}
#block h4{background:url(/img/move.png) left center no-repeat;padding:0 0 0 22px;margin:-1.5% 0 5px;text-align:left}
#block img{border:2px solid #666;border-radius:10px;width:99%}
.param{float:left;width:33%;text-align:left;margin:5px 0 0}
.param b{text-shadow:0 0 3px #a1e1d0;font-weight:400}
#click{background:url(/img/move.png) left center no-repeat;padding:0 0 0 22px;float:left;font-size:16px;margin:10px 0 -10px}
#hide{font-size:16px;color:#0e634e;float:right;margin:5px 0 -10px;display:block}
 @media only screen and (max-width:1249px){
#logo,#logo+a{margin:0 0 0 -509px}
}
@media only screen and (max-width:1050px){
#logo,#logo+a{margin:0 0 0 -424px}
#block{margin:0 0 0 -200px}
}
@media only screen and (max-width:999px){
#block{margin:0 0 0 -136px;width:55%}
#logo,#logo + a{margin:0 0 0 -366px}
header + *{padding:330px 2% 0}
}
@media only screen and (max-width:839px){
#house>figure:nth-child(7n+0){margin-right:10px}
#doors>figure:nth-child(6n+0){margin-right:20px}
#colors>figure:nth-child(11n+0){margin-right:8.6px}
#hinges>figure:nth-child(6n+0),#handles>figure:nth-child(6n+0),#windows>figure:nth-child(6n+0){margin-right:22px}
}
@media only screen and (max-width:768px){
#block{margin:0 0 0 -110px;width:60%}
#logo,#logo + a{margin:0 0 0 -355px}
header + *{padding:285px 2% 0}
header{height:295px}
.step figure{margin:10px 1% 0 !important;width:23%}
.step figure p{margin:0 auto}
#house figure{width:auto !important}
#hinges figure{width:auto !important}
}
@media only screen and (max-width:720px){
#logo{background-size:100% auto;width:90px;margin:0;left:10px}
#block{width:auto;left:2%;margin:0;right:2%;max-width:100%;top:75px}
#logo + a{top:25px;margin:0;right:10px;left:auto}
header + *{padding:435px 2% 0}
}
@media only screen and (max-width:586px){
h2{font-size:20px}
#stxt{font-size:16px;padding:10px}
header + *{padding:370px 2% 0}
}
@media only screen and (max-width:520px){
#hinges figure{width:98%}
#doors figure,#windows figure{width:31%}
#stxt{text-align:center}
#socs{float:none;margin:0 auto;width:171px}
#socs a{margin:0 5px}
#quote{padding:20px}
}
@media only screen and (max-width:479px){
header + *{padding:325px 2% 0}
.step figure{width:48%}
#hinges figure{width:98%}
mark{width:90px;font-size:19px}
h2{font-size:17px}
.h2 h2{margin:0 0 19px 100px;line-height:30px}
input[type="text"],select,textarea,input[type="submit"],.selnew{width:96%;float:none;margin:0 auto 20px auto}
.selnew,input[type="submit"]{width:100%}
.lcol,.rcol{float:none;width:100%;margin:0 0 20px}
footer{text-align:center}
}
@media only screen and (max-width:360px){
header + *{padding:270px 2% 0}
}
@media only screen and (orientation:landscape) and (max-width:768px) {
header{position:absolute;}
#block{position:absolute;}
}
.square {
    width: 45px;
    height: 45px;
    position: absolute;
    top:135px;
    left: 300px;
}