/* Contact Form variables ========================================================*/ /*======================================================== Main variables =========================================================*/ /*hover color*/ /*hover 2 color*/ /*color of content*/ /*color of border*/ /*======================================================== Typography =========================================================*/ /*color of input fields in contact form*/ /* Contact Form Basic Styles ========================================================*/ #contact-form { position: relative; margin-top: 83px; } #contact-form label.message { max-width: 100%; margin-top: 36px; } #contact-form label { position: relative; display: block; width: 100%; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height: 66px; } #contact-form label.message { width: 100%; position: relative; top: -1px; } #contact-form fieldset { border: none; } /* Contact Form Placeholder Styles ========================================================*/ #contact-form ._placeholder { width: 100% !important; position: absolute; left: 0; top: 0; display: block; line-height: 34px; font-size: 18px; font-family: 'Lato', Arial, sans-serif; padding: 5px 17px 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 0; cursor: text; color: #545454; font-weight: 300; font-style: italic; } #contact-form ._placeholder.focused { opacity: 0.4; filter: alpha(opacity=40); /*.box-shadow(0px 0px 7px 0px rgba(0, 0, 0, 0.7));*/ } #contact-form ._placeholder.hidden { display: none; } #contact-form .file ._placeholder { display: none; } /* Contact Form Input ========================================================*/ #contact-form input[type='text'] { width: 100%; border-radius: 0; line-height: 34px; font-size: 18px; font-family: 'Lato', Arial, sans-serif; padding: 5px 17px 5px; font-weight: 300; font-style: italic; outline: none; color: #545454; height: 41px; border: none; border-bottom: 1px solid #bfbfbf; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; background: none; } input, textarea { -webkit-appearance: none; } /* Contact Form File Input ========================================================*/ #contact-form .input-group { position: relative; display: table; border-collapse: separate; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #contact-form input.form-control[disabled] { cursor: not-allowed; background-color: #fafafa; opacity: 1; } #contact-form input.form-control { position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; padding: 6px 12px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } #contact-form .input-group-btn:first-child > .btn { border-bottom-right-radius: 0; border-top-right-radius: 0; margin: 0 -1px 0 0; } #contact-form .input-group .form-control:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } #contact-form .input-group-btn:last-child > .btn { border-bottom-left-radius: 0; border-top-left-radius: 0; } #contact-form .input-group .form-control:first-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } #contact-form input.form-control, #contact-form .input-group-btn { display: table-cell; border-collapse: separate; float: none !important; } #contact-form .input-group-btn label { width: auto; margin-left: -1px; } #contact-form .input-group-btn { position: relative; font-size: 0; white-space: nowrap; width: 1%; vertical-align: middle; } #contact-form .btn { margin-top: 26px; } #contact-form .btn + .btn { margin-left: 5px; } #contact-form .btn-default { color: #333333; background-color: #ffffff; border-color: #cccccc; } #contact-form .btn-default:hover { color: #333333; background-color: #ebebeb; border-color: #adadad; } #contact-form .btn-default:active, #contact-form .btn-default:focus { outline-offset: -2px; outline: none; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } /* Contact Form Textarea ========================================================*/ #contact-form textarea { width: 100%; border-radius: 0; line-height: 34px; font-size: 18px; font-family: 'Lato', Arial, sans-serif; padding: 5px 17px 5px; font-weight: 300; font-style: italic; outline: none; border: none; border: 1px solid #bfbfbf; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; resize: none; color: #545454; height: 166px; background: none; } #contact-form .btns { text-align: center; } #contact-form .btns a { margin-top: 73px; } /* Contact Form Error messages ========================================================*/ #contact-form .empty-message, #contact-form .error-message { position: absolute; right: 18px; top: -5px; color: red; height: 0; overflow: hidden; font-size: 11px; -webkit-transition: 0.3s ease-in height; transition: 0.3s ease-in height; z-index: 99; } #contact-form .invalid .error-message, #contact-form .empty .empty-message { height: 20px; } /* Contact Form Processing Box ========================================================*/ #contact-form .contact-form-loader { position: absolute; z-index: -1; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); background-image: url('../images/form-loader.gif'); background-repeat: no-repeat; background-position: 50% 50%; opacity: 0; } #contact-form.processing .contact-form-loader { opacity: 1; z-index: 99; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } /* Contact Form Modal ========================================================*/ .modal-open { overflow: hidden; } #contact-form .modal { display: none; overflow: auto; overflow-y: scroll; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; font-family: 'Lato', Arial, sans-serif; font-size: 13px; } #contact-form .modal h4 { font-size: 24px; padding: 0; margin: 0; } #contact-form .modal h4:before { display: none; } .modal.fade .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .modal-content { position: relative; background-color: #ffffff; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box; outline: none; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000; } .modal-backdrop.fade { opacity: 0; filter: alpha(opacity=0); } .modal-backdrop.in { opacity: 0.5; filter: alpha(opacity=50); } .modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; min-height: 16.42857143px; } .modal-header .close { margin-top: -2px; position: relative; z-index: 10; } .modal-title { margin: 0; line-height: 1.42857143; } .modal-body { position: relative; padding: 20px; } .modal-dialog { width: 600px; margin: 10px auto; } @media only screen and (max-width: 768px) { .modal-dialog { position: relative; width: auto; margin: 10px; } } /* Contact Form Close icon ========================================================*/ .close { float: right; font-size: 21px; font-weight: bold; line-height: 1; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } .close:hover, .close:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.5; filter: alpha(opacity=50); } button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } @media only screen and (max-width: 1199px) { #contact-form { padding-right: 0; } } @media only screen and (max-width: 979px) { #contact-form label { width: 100%; } #contact-form .btn { padding-left: 12px; padding-right: 12px; } }