@import "http://fonts.googleapis.com/css?family=Lato:300";
body{margin:0;padding:0;height:100%;width:100%;background:#585A69}
#slideit *{margin:0;padding:0;border:0;outline:0;font-weight:300;font-style:normal;font-size:20px;vertical-align:baseline;line-height:normal;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slideit a{text-decoration:none}
#slideit input[type=radio]{display:none}
#slideit label{cursor:pointer}
#slideit{z-index:9999;position:fixed;width:320px;bottom:0;right:2%}
#slideit section{margin:0;overflow:hidden;width:100%;left: 24px;height:auto;right:0;bottom:0;position:absolute;z-index:10;background:#fff;-webkit-backface-visibility:hidden;-webkit-transition:all .4s cubic-bezier(0.2,.6,.3,1);-moz-transition:all .4s cubic-bezier(0.2,.6,.3,1);-ms-transition:all .4s cubic-bezier(0.2,.6,.3,1);-o-transition:all .4s cubic-bezier(0.2,.6,.3,1);transition:all .4s cubic-bezier(0.2,.6,.3,1)}
#slideit input#close-item:checked~section,#slideit section{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}
#slideit input#open-item:checked~section{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}
#slideit section .wrap{padding:30px;position:relative;border-bottom:6px solid #A7ABC6}
#slideit span.title {
    font-size: 20px;
    padding: 14px;
    color: #fff;
    background: #ff8a3e;
    text-transform: uppercase;
    display: block;
    width: 100%;
}
#slideit p.info{font-size:13px;color:#999;line-height:18px}
#slideit .field{width:100%;position:relative;margin:28px 0 0;display:block}
#slideit label.close,#slideit label.open{text-align:center;position:absolute}
#slideit label.open {
    font-size: 14px;
    color: #222;
    background: #fff;
    width: 200px;
    bottom: -50px;
    left: 140px;
    right: 0;
    top: auto;
    margin: 0 auto;
    padding: 6px 0;
    text-transform: uppercase;
    z-index: 1;
}
#slideit input#close-item:checked~label.open{-webkit-transition:bottom .3s ease .4s,background .1s ease,color .1s ease;-moz-transition:bottom .3s ease .4s,background .1s ease,color .1s ease;-ms-transition:bottom .3s ease .4s,background .1s ease,color .1s ease;-o-transition:bottom .3s ease .4s,background .1s ease,color .1s ease;transition:bottom .3s ease .4s,background .1s ease,color .1s ease;bottom:0}
#slideit label.open:focus,#slideit label.open:hover{background:#222;color:#fff}
#slideit label.close{right:30px;left:auto;top:0;bottom:auto;font-size:20px;background:#9ea3c5;color:#fff;width:22px}
#slideit label.close:focus,#slideit label.close:hover{background:#757786}
#slideit input,#slideit select,#slideit textarea{display:block;width:100%;border-bottom:solid 1px #ddd;padding:0 20px 4px 3px;font-size:13px;color:#222;position:relative}
#slideit select{padding-right:0;padding-left:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}
#slideit select.grayed{color:#aaa}
#slideit select>option{background:#C2C6E2;color:#fff}
#select-arrow,#select-arrow-svg{background:#fff url(img/select.png) no-repeat right;width:30px;height:20px;position:absolute;right:0;top:-1px;pointer-events:none;vertical-align:middle;outline:0;border:0;z-index:3}
#slideit select:focus~#select-arrow,#slideit select:focus~#select-arrow-svg,#slideit select:hover~#select-arrow,#slideit select:hover~#select-arrow-svg{background:#fff url(img/select-focus.png) no-repeat right}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#select-arrow-svg{display:none}
}
#select-arrow,x:-o-prefocus{display:none}
#slideit textarea{resize:none;height:22px;overflow:hidden}
#slideit input:focus,#slideit input:hover,#slideit select:focus,#slideit select:hover,#slideit textarea:focus,#slideit textarea:hover{border-bottom-color:#222;outline:0}
#slideit textarea:focus{height:100px}
#slideit input.send{display:inline-block;clear:both;background:#757786;color:#fff;font-size:14px;text-transform:uppercase;padding:8px 26px;cursor:pointer;margin:30px 0 0;width:auto;border:0}
#slideit input.send:focus,#slideit input.send:hover{background:#9EA3C5;border:0;outline:0}
#slideit input.reset{background:0 0;width:auto;cursor:pointer;border:0;outline:0;display:inline-block;float:right;padding:0;margin:40px 0 0;font-size:12px;color:#ccc}
#slideit input.reset:focus,#slideit input.reset:hover{color:#222}
#slideit input:required,#slideit textarea:required{background:#fff url(img/required.png) no-repeat 100% 6px;box-shadow:none;outline:0}
#slideit input:hover:invalid,#slideit textarea:hover:invalid{background:#fff url(img/focused.png) no-repeat 100% 6px;box-shadow:none;outline:0}
#slideit input:required:valid,#slideit textarea:required:valid{background:#fff url(img/valid.png) no-repeat 100% 6px;box-shadow:none;outline:0}
#slideit input:focus:invalid,#slideit textarea:focus:invalid{background:#fff url(img/invalid.png) no-repeat 100% 6px;z-index:10;box-shadow:none;outline:0}
::-webkit-input-placeholder{color:#999}
#slideit input:focus::-webkit-input-placeholder{color:#ccc}
#slideit textarea:focus::-webkit-input-placeholder{color:#ccc}
:-moz-placeholder{color:#999}
#slideit input:focus:-moz-placeholder{color:#ccc}
#slideit textarea:focus:-moz-placeholder{color:#ccc}
::-moz-placeholder{color:#999}
#slideit input:focus::-moz-placeholder{color:#ccc}
#slideit textarea:focus::-moz-placeholder{color:#ccc}
:-ms-input-placeholder{color:#999}
#slideit input:focus:-ms-input-placeholder{color:#ccc}
#slideit textarea:focus:-ms-input-placeholder{color:#ccc}
.ie9-placeholder{color:#999!important}
.ie9-placeholder:focus{color:#ccc!important}
#slideit .tip{background:#222;color:#fff;font-size:12px;padding:10px 12px;text-align:center;position:absolute;top:-68px;left:-20px;opacity:0;visibility:hidden;width:auto;cursor:default}
#slideit .tip:after{border-top:6px solid rgba(0,0,0,1);border-left:8px solid rgba(0,0,0,0);border-right:8px solid rgba(0,0,0,0);content:"";position:absolute;bottom:-6px;left:28px}
#slideit input:focus~.tip,#slideit select:focus~.tip,#slideit textarea:focus~.tip{top:-48px;opacity:1;visibility:visible;z-index:99}
#slideit input:required:valid~.tip,#slideit textarea:required:valid~.tip{opacity:0;visibility:hidden}
#slideit input,#slideit label,#slideit select{-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
#slideit .tip{-webkit-transition:opacity .4s ease;-moz-transition:opacity .4s ease;-ms-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}
#slideit textarea{-webkit-transition:height .4s cubic-bezier(0.2,.6,.3,1);-moz-transition:height .4s cubic-bezier(0.2,.6,.3,1);-ms-transition:height .4s cubic-bezier(0.2,.6,.3,1);-o-transition:height .4s cubic-bezier(0.2,.6,.3,1);transition:height .4s cubic-bezier(0.2,.6,.3,1)}
@media screen and (max-width:320px) {
#slideit{width:100%;right:0}
}