#slideit { position: fixed; margin-top:13%; left: 0; /*width: 35px;*/ padding: 7px 5px; text-align: center; background: #a9c00f; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; pointer-events:visible; z-index: 9999; } #slideout_inner { position: fixed; margin-top:-11%; left: -285px; background: #ffffff; width: 285px; /* padding: 20px;*/ /* height: 130px; */ -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; text-align: left; -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; border-bottom: 6px solid #a9c00f; } #slideout_inner .wrap{ padding: 0px 20px 10px; } #slideout_inner textarea { width: 190px; height: 100px; margin-bottom: 6px; } #slideit:hover { left: 285px } #slideit:hover #slideout_inner { left: 0; } #slideit *{font-weight:300;font-style:normal;font-size:100%;font-family:FFTisaSansWebLightItalic, Helvetica, Arial, sans-serif;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 label{cursor:pointer;} #slideit span.title{font-size:29px;padding:13px 26px;color:#fff;background:#a9c00f;display:block;width:100%;} #slideit p.info{font-size:13px;color:#999;line-height:18px;} #slideit .field{width:100%;position:relative;margin:20px 0 0 0;display:block;} #slideit label.open, #slideit label.close{text-align:center;position:absolute;} #slideit label.open{font-size:14px;font-weight:bold;color:#000;background:#a9c00f;width:130px;bottom:auto;left:-101px;right:0;top:41%;margin:122px auto 0;padding:9px 0;text-transform:uppercase;z-index:1;transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);cursor:pointer;pointer-events:visible;} #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; border-top: none; border-left: none; border-right: none;} #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:none;border:none;z-index:3;} #slideit select:hover ~ #select-arrow, #slideit select:focus ~ #select-arrow, #slideit select:hover ~ #select-arrow-svg, #slideit select:focus ~ #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;} } x:-o-prefocus, #select-arrow{display:none;} #slideit textarea{resize:none;height:22px;overflow:hidden;} #slideit input:hover, #slideit input:focus, #slideit select:hover, #slideit select:focus, #slideit textarea:hover, #slideit textarea:focus{border-bottom-color:#222;outline:none;} #slideit textarea:focus{height:100px;} #slideit input.send{display:inline-block;clear:both;background:#5c964c;color:#fff;font-size:14px;text-transform:uppercase;padding:8px 26px;cursor:pointer;margin:30px 0 0 0;width:auto;border:none;} #slideit input.send:hover, #slideit input.send:focus{background:#5c964c;border:none;outline:none;} #slideit input.reset{background:none;width:auto;cursor:pointer;border:none;outline:none;display:inline-block;float:right;padding:0;margin:40px 0 0 0;font-size:12px;color:#ccc;} #slideit input.reset:hover, #slideit input.reset:focus{color:#222;} #slideit input:required, #slideit textarea:required{background:#fff url("img/required.png") no-repeat 100% 6px;box-shadow:none;outline:none;} #slideit input:hover:invalid, #slideit textarea:hover:invalid{background:#fff url("img/focused.png") no-repeat 100% 6px;box-shadow:none;outline:none;} #slideit input:required:valid, #slideit textarea:required:valid{background:#fff url("img/valid.png") no-repeat 100% 6px;box-shadow:none;outline:none;} #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:none;} ::-webkit-input-placeholder{color:#999;} #slideit input:focus::-webkit-input-placeholder{color:#ccc;} #slideit textarea:focus::-webkit-input-placeholder{color:#ccc;} #slideit textarea::-webkit-input-placeholder{color:#999!important;} #slideit textarea::-moz-placeholder{color:#999!important;} :-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 label, #slideit select, #slideit input{-webkit-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;} #slideit .tip{-webkit-transition:opacity 0.4s ease;-moz-transition:opacity 0.4s ease;-ms-transition:opacity 0.4s ease;-o-transition:opacity 0.4s ease;transition:opacity 0.4s ease;} #slideit textarea{-webkit-transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);-moz-transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);-ms-transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);-o-transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);} @media screen and (max-width:1366px){ #slideout_inner { position: fixed; margin-top:-15%; left: -285px; background: #ffffff; width: 285px; /* padding: 20px;*/ /* height: 130px; */ -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; text-align: left; -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; border-bottom: 6px solid #a9c00f; } } @media screen and (max-width:1024px){ #slideit { position: fixed; margin-top: 18%; left: 0; /* width: 35px; */ padding: 3px 0px; text-align: center; background: #a9c00f; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; pointer-events: visible; z-index: 9999; } #slideout_inner { position: fixed; margin-top: -22%; } } @media screen and (max-width:767px){ #slideit { position: fixed; margin-top: 36%; left: 0; /* width: 35px; */ padding: 3px 0px; text-align: center; background: #a9c00f; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; pointer-events: visible; z-index: 9999; } #slideout_inner { position: fixed; margin-top: -44%; } } @media screen and (max-height:480px){#slideit section{top:0;} #slideout_inner { position: fixed; margin-top: 3%; } } /*#slideit *{margin:0;padding:0;border:0;outline:0;font-weight:300;font-style:normal;font-size:100%;font-family:FFTisaSansWebLightItalic, Helvetica, Arial, sans-serif;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:auto;margin-top:3%;left:0;cursor:pointer;pointer-events:visible;} #slideit section{margin:0;overflow:hidden;width:320px;height:auto;left:0;top:20%;position:absolute;z-index:10;background:#fff;-webkit-backface-visibility:hidden;-webkit-transition:all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);-moz-transition:all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);-ms-transition:all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);-o-transition:all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);transition:all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);} #slideit section, #slideit input#close-item:checked ~ section{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);} #slideit input#open-item:hover ~ section{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);} #slideit section .wrap{padding:5px 23px 23px;position:relative;border-bottom:6px solid #a9c00f;} #slideit span.title{font-size:29px;padding:13px 26px;color:#fff;background:#a9c00f;display:block;width:100%;} #slideit p.info{font-size:13px;color:#999;line-height:18px;} #slideit .field{width:100%;position:relative;margin:20px 0 0 0;display:block;} #slideit label.open, #slideit label.close{text-align:center;position:absolute;} #slideit label.open{font-size:14px;font-weight:bold;color:#000;background:#a9c00f;width:130px;bottom:auto;left:-101px;right:0;top:41%;margin:122px auto 0;padding:9px 0;text-transform:uppercase;z-index:1;transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);cursor:pointer;pointer-events:visible;} #slideit input#close-item:checked ~ label.open{-webkit-transition:left 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;-moz-transition:left 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;-ms-transition:left 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;-o-transition:left 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;transition:left 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;left:-47px;} #slideit label.open:hover, #slideit label.open:focus{background:#94a908;color:#000;} #slideit label.close{right:30px;left:auto;top:0;bottom:auto;font-size:20px;background:#5c964c;color:#fff;width:22px;} #slideit label.close:hover, #slideit label.close:focus{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:none;border:none;z-index:3;} #slideit select:hover ~ #select-arrow, #slideit select:focus ~ #select-arrow, #slideit select:hover ~ #select-arrow-svg, #slideit select:focus ~ #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;} } x:-o-prefocus, #select-arrow{display:none;} #slideit textarea{resize:none;height:22px;overflow:hidden;} #slideit input:hover, #slideit input:focus, #slideit select:hover, #slideit select:focus, #slideit textarea:hover, #slideit textarea:focus{border-bottom-color:#222;outline:none;} #slideit textarea:focus{height:100px;} #slideit input.send{display:inline-block;clear:both;background:#5c964c;color:#fff;font-size:14px;text-transform:uppercase;padding:8px 26px;cursor:pointer;margin:30px 0 0 0;width:auto;border:none;} #slideit input.send:hover, #slideit input.send:focus{background:#5c964c;border:none;outline:none;} #slideit input.reset{background:none;width:auto;cursor:pointer;border:none;outline:none;display:inline-block;float:right;padding:0;margin:40px 0 0 0;font-size:12px;color:#ccc;} #slideit input.reset:hover, #slideit input.reset:focus{color:#222;} #slideit input:required, #slideit textarea:required{background:#fff url("img/required.png") no-repeat 100% 6px;box-shadow:none;outline:none;} #slideit input:hover:invalid, #slideit textarea:hover:invalid{background:#fff url("img/focused.png") no-repeat 100% 6px;box-shadow:none;outline:none;} #slideit input:required:valid, #slideit textarea:required:valid{background:#fff url("img/valid.png") no-repeat 100% 6px;box-shadow:none;outline:none;} #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:none;} ::-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 label, #slideit select, #slideit input{-webkit-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;} #slideit .tip{-webkit-transition:opacity 0.4s ease;-moz-transition:opacity 0.4s ease;-ms-transition:opacity 0.4s ease;-o-transition:opacity 0.4s ease;transition:opacity 0.4s ease;} #slideit textarea{-webkit-transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);-moz-transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);-ms-transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);-o-transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);transition:height 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);} @media screen and (max-height:480px){#slideit section{top:0;} #slideit label.open{top:20%;} } @media screen and (max-width:660px){ #slideit label.open { font-size: 14px; font-weight: bold; color: #000; background: #a9c00f; width: 121px!important;; bottom: auto; left: -101px; right: 0; top: 41%; margin: 122px auto 0; padding: 4px 0!important;; text-transform: uppercase; z-index: 1; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); cursor: pointer; pointer-events: visible; } }*/