/*FORM STYLES CSS*/
/*=====================
01. FORM STYLE 1 CSS
02. FORM STYLE 2 CSS
03. FORM STYLE 3 CSS
=======================*/

/*=========================================
            01. FORM STYLE 1 CSS
============================================*/

.contact-form-style1 {position: relative;}
.contact-form-style1 .form-group {position: relative;margin-bottom: 40px;}
.contact-form-style1 .form-group .form-control {outline: none;box-shadow: none;border-radius: 0;height: 46px;padding: 12px;border: 0;background-color: #f4f4f5;color: #50575f;border-bottom: 1px solid #d7d7ea;}
.contact-form-style1 .form-group textarea.form-control {height: 120px;resize: none;padding-top: 18px;}
.contact-form-style1 .form-group label {position: absolute;top: 13px;left: 12px;width: 100%;margin-bottom: 0;font-weight: 400;cursor: text;color: #9d9fa2;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-ms-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;transition: all 0.4s ease-in-out;}
.contact-form-style1 .form-group .form-control:focus ~ label, 
.contact-form-style1 .form-group input:not([value=""]) ~ label, 
.contact-form-style1 .form-group textarea:not([data-value=""]) ~ label {top: -16px;left: 0;font-size: 13px;letter-spacing: .5px;}
.contact-form-style1 .form-group .form-control:focus ~ label {color: #09989e;}
.contact-form-style1 .form-group .input-border {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background-color: #09989e;-webkit-transform: scale(0);-mz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.contact-form-style1 .form-group .form-control:focus ~ .input-border {-webkit-transform: scale(1);-mz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.contact-form-style1 .form-group .input-border {background-color: #09989e;}
.contact-form-style1 .contact-btn {position: relative;display: inline-block;min-width: 160px;padding: 16px 0;font-size: 14px;font-weight: 500;text-transform: uppercase;letter-spacing: 1px;text-align: center;border-radius: 16px;outline: none;overflow: hidden;background: transparent;color: #09989e;border: 2px solid #fefcfc;border-right-color: #f0f0f1;border-bottom-color: #f0f0f1;-webkit-box-shadow: inset 5px 5px 5px #e1e1e2, inset -3px -3px 3px #fffdfd;-mz-box-shadow: inset 5px 5px 5px #e1e1e2,inset -3px -3px 3px #fffdfd;box-shadow: inset 5px 5px 5px #e1e1e2, inset -3px -3px 3px #fffdfd;	-webkit-transition: all 0.25s ease;-moz-transition: all 0.25s ease;-ms-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease;}
.contact-form-style1 .contact-btn:hover {color: #9d9fa2;}

/*=========================================
            02. FORM STYLE 2 CSS
============================================*/

.contact-form-style2 {position: relative;}
.contact-form-style2 .form-group {position: relative;margin-bottom: 40px;}
.contact-form-style2 .form-group .form-control {outline: none;box-shadow: none;border-radius: 0;height: 46px;padding: 12px;border: 0;background-color: #2d2d2f;color: #fff;border-bottom: 1px solid #3a3939;}
.contact-form-style2 .form-group textarea.form-control {height: 120px;resize: none;padding-top: 18px;}
.contact-form-style2 .form-group label {position: absolute;top: 13px;left: 12px;width: 100%;margin-bottom: 0;font-weight: 400;cursor: text;color: #c2c0c3;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.contact-form-style2 .form-group .form-control:focus ~ label, 
.contact-form-style2 .form-group input:not([value=""]) ~ label, 
.contact-form-style2 .form-group textarea:not([data-value=""]) ~ label {top: -16px;left: 0;font-size: 13px;letter-spacing: .5px;}
.contact-form-style2 .form-group .form-control:focus ~ label {color: #09989e;}
.contact-form-style2 .form-group .input-border {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background-color: #09989e;-webkit-transform: scale(0);-mz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.contact-form-style2 .form-group .form-control:focus ~ .input-border {-webkit-transform: scale(1);-mz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.contact-form-style2 .form-group .input-border {background-color: #09989e;}
.contact-form-style2 .contact-btn {position: relative;display: inline-block;min-width: 160px;padding: 16px 0;font-size: 14px;font-weight: 500;text-transform: uppercase;letter-spacing: 1px;text-align: center;border-radius: 16px;outline: none;overflow: hidden;background: transparent;color: #fff;border: 2px solid #353535;border-right-color: #2e2e2f;border-bottom-color: #2e2e2f;-webkit-box-shadow: inset 5px 5px 5px #212225, inset -3px -3px 3px #3e3d3d;-mz-box-shadow: inset 5px 5px 5px #212225, inset -3px -3px 3px #3e3d3d;box-shadow: inset 5px 5px 5px #212225, inset -3px -3px 3px #3e3d3d;-webkit-transition: all 0.25s ease;-moz-transition: all 0.25s ease;-ms-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease;}
.contact-form-style2 .contact-btn:hover {color: #e5ff12;}

/*=========================================
            03. FORM STYLE 3 CSS
============================================*/

.contact-form-style3 {position: relative;}
.contact-form-style3 .form-group {position: relative;margin-bottom: 50px;}
.contact-form-style3 .form-group .form-control {outline: none;box-shadow: none;border-radius: 0;height: 46px;padding: 12px;border: 0;background-color: #000;color: #fff;border: 1px solid #d7d7ea;}
.contact-form-style3 .form-group textarea.form-control {height: 120px;resize: none;padding-top: 18px;}
.contact-form-style3 .form-group .form-control:focus {border-color: #09989e;}
.contact-form-style3 .form-group label {position: absolute;top: -30px;left: 0;width: 100%;margin-bottom: 0;font-weight: 400;cursor: text;color: #111;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.contact-form-style3 .form-group .form-control:focus ~ label, 
.contact-form-style3 .form-group input:not([value=""]) ~ label, 
.contact-form-style3 .form-group textarea:not([data-value=""]) ~ label {top: -30px;left: 25px;}
.contact-form-style3 .form-group .form-control:focus ~ label {color: #09989e;}
.contact-form-style3 .form-group .input-icon {position: absolute;top: 10px;left: 14px;width: auto;font-weight: 400;cursor: text;color: #c2c0c3;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.contact-form-style3 .form-group .form-control:focus ~ .input-icon {top: -30px;left: 3px;font-size: 14px;color: #09989e;}
.contact-form-style3 .form-group .input-msg {display: inline-block;width: auto;font-size: 12px;position: relative;z-index: -1;opacity: 0;color: #c2c0c3;-webkit-transform: translateY(-30px);-moz-transform: translateY(-30px);-ms-transform: translateY(-30px);-o-transform: translateY(-30px);transform: translateY(-30px);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.contact-form-style3 .form-group .form-control:focus ~ .input-msg {opacity: 1;-webkit-transform: translateY(3px);-moz-transform: translateY(3px);-ms-transform: translateY(3px);-o-transform: translateY(3px);transform: translateY(3px);}
.contact-form-style3 .contact-btn {position: relative;display: inline-block;min-width: 160px;padding: 16px 0;font-size: 14px;font-weight: 500;text-transform: uppercase;letter-spacing: 1px;text-align: center;border-radius: 0px;outline: none;overflow: hidden;background: #fff;color: #111;border: 1px solid #d7d7ea;-webkit-transition: all 0.25s ease;-moz-transition: all 0.25s ease;-ms-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease;}
.contact-form-style3 .contact-btn:hover {border-color: #09989e;color: #09989e;}