/*********** INFORMATION *****************************

- document:  SlideIt - CSS3 fixed sliding elements
- element:   Contact form - Bottom Right
- author:    Capelle @ Codecanyon
- profile:   http://codecanyon.net/user/Capelle

*****************************************************/

#slideit * { margin: 0; padding: 0; border: 0; outline: 0; font-weight: 300; font-style: normal; font-size: 100%; font-family: 'Lato', sans-serif; /* Edit this if you want to match the font with your template design */ 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; }
/* === Note === If you experience issues with reset above, please adjust the selectors and values according to your template/website.
When adjusting the reset is adviced to check up the elements on your page, as they might distort. */


#slideit { z-index: 9999; /* Keep the item above all other elements on the page */ position: fixed; width: 320px; /* Width of the wrapper of the section. Adjust this value if you want wider elements */ }
/***** Form styles *****/

#slideit section { margin: 0; overflow: hidden; width: 100%; height: auto; right: 0; bottom: 0; position: absolute; z-index: 10; background: #fff; -webkit-backface-visibility: hidden; /* Webkit transition hack */ /* Section animation upon opening */
-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 { /* Section position when closed */
-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 { /* Section position when opened */
-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 #4c4c4c; }
#slideit span.title { font-family: 'Oswald', sans-serif; font-size: 24px; padding: 30px; color: #fff; text-transform: uppercase; display: block; width: 100%; }
#slideit p.info { font-size: 13px; color: #4c4c4c; line-height: 18px; }
#slideit .field { width: 100%; position: relative; margin: 28px 0 0 0; display: block; }
/***** Labels *****/

#slideit label.open, #slideit label.close { text-align: center; position: absolute; }
#slideit label.open {font-size: 14px; width: 150px; bottom: -50px; left: 0; right: 0; top: auto; margin: 0 auto; padding: 10px 0; text-transform: uppercase; z-index: 1; border-top-left-radius: 6px; border-top-right-radius: 6px; }
@media screen and (max-width:767px) {#slideit label.open {left:175px !important;}}
#slideit input#close-item:checked ~ label.open { -webkit-transition: bottom 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease; -moz-transition: bottom 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease; -ms-transition: bottom 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease; -o-transition: bottom 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease; transition: bottom 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease; bottom: 0; }
#slideit label.open:hover, #slideit label.open:focus { color: #ffffff; background-color: #333; border-color: #333; }
#slideit label.close { right: 30px; left: auto; top: 0; bottom: auto; font-size: 20px; background: #9ea3c5; color: #fff; width: 22px; }
#slideit label.close:hover, #slideit label.close:focus { background: #757786; }
/***** Input, selectbox and textarea *****/

#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(../images/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(...images/img/select-focus.png) no-repeat right; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
#select-arrow-svg { display: none; /* <-- Hide svg arrow in webkit browsers and IE9/10 (pointer events don't work in those IE) */ }
}
x:-o-prefocus, #select-arrow {
 display: none; /* <-- Hack for Opera 12 */
}
#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; 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: #4c4c4c; 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; }

/***** Validations *****/

#slideit input:required, #slideit textarea:required {
 background: #fff url(../images/img/required.png) no-repeat 100% 6px;
 box-shadow: none;
 outline: none;
}
#slideit input:hover:invalid, #slideit textarea:hover:invalid {
 background: #fff url(../images/img/focused.png) no-repeat 100% 6px;
 box-shadow: none;
 outline: none;
}
#slideit input:required:valid, #slideit textarea:required:valid {
 background: #fff url(../images/img/required.png)no-repeat 100% 6px;
 box-shadow: none;
 outline: none;
}
#slideit input:focus:invalid, #slideit textarea:focus:invalid {
 background: #fff url(../images/img/invalid.png) no-repeat 100% 6px;
 z-index: 10;
 box-shadow: none;
 outline: none;
}

   /***** Placeholders *****/

::-webkit-input-placeholder {color: #4c4c4c;display:block !important;}
#slideit input:focus::-webkit-input-placeholder {color: #ccc;display:block !important;}
#slideit textarea:focus::-webkit-input-placeholder {color: #ccc;display:block !important;}
:-moz-placeholder {color: #4c4c4c;display:block !important;}
#slideit input:focus:-moz-placeholder { color: #ccc;display:block !important;}
#slideit textarea:focus:-moz-placeholder {color: #ccc;display:block !important;}
::-moz-placeholder {color: #4c4c4c;display:block !important;}
#slideit input:focus::-moz-placeholder {color: #ccc;display:block !important;}
#slideit textarea:focus::-moz-placeholder {color: #ccc;display:block !important;}
:-ms-input-placeholder {color: #4c4c4c;display:block !important;}
#slideit input:focus:-ms-input-placeholder {color: #ccc;display:block !important;}
#slideit textarea:focus:-ms-input-placeholder {color: #ccc;display:block !important;}
.ie9-placeholder { color: #4c4c4c !important; }
.ie9-placeholder:focus { color: #ccc !important; }
/***** Tooltips *****/

#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;
}
/***** Transitions *****/

#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); }

/*  ==================
    4. MEDIA QUERIES
    ==================  */

/***** Max width 320px *****/

@media screen and (max-width:320px) {
#slideit { width: 100%; right: 0; }
}
#subject {background-color: rgba(255,255,255,0);}