/* Table of Content ================================================== 1.0  -  Contact Form 2.0  -  DT Responsive*/ /*-------------------------------------------------------------- 1.0 - Contact Form --------------------------------------------------------------*/ /*----*****---- << 1.1 - Business Contact Form >> ----*****----*/ .business-contact-form {background: #fff; clear: both; float: left; margin: 0 0 10px; padding: 30px 15px; position: relative; width: 100%; } .business-contact-form h2 {font-size: 20px; } .business-contact-form:before {border: 10px solid rgba(255, 255, 255, .4); content: ''; height: 100%; left: -10px; position: absolute; top: -10px; width: 100%; } .business-contact-form input[type='text'], .business-contact-form input[type='email'], .business-contact-form textarea {background: rgba(0, 0, 0, .02); border: 1px solid rgba(0, 0, 0, .05); border-radius: 3px; padding: 19px 15px 18px; } .business-contact-form textarea {height: 134px; } .business-contact-form input[type='submit'] {font-size: 18px; font-weight: normal; margin-top: 20px; padding: 20px 20px 17px; text-transform: none; width: 100%; } .business-contact-form input[type='text']:focus, .business-contact-form input[type='email']:focus, .business-contact-form textarea:focus {border: 1px solid rgba(0, 0, 0, .2); } .business-contact-social li {margin: 0 30px; } .business-contact-social li a {color: #000; font-size: 20px; } /*----*****---- << 1.2 - Attorney Contact Form >> ----*****----*/ .attorney-contact-form input[type='text'], .attorney-contact-form input[type='email'], .attorney-contact-form input[type='tel'], .attorney-contact-form textarea, .attorney-contact-form select {border: 0; border-bottom: 1px solid #000; color: #000; font-size: 16px; padding: 15px 0; } .attorney-contact-form {margin: 0 auto; text-align: center; width: 70%; } .attorney-contact-form textarea {height: 53px; } .attorney-contact-form input[type='submit'] {background: #000; border-radius: 0; float: none; margin: 20px 20px 0 0; padding: 16px 30px; } .attorney-contact-form input[type='submit']:hover {background: #cda85c; } .attorney-contact-form .selection-box:after {content: none; } .secondary-sidebar .attorney-contact-form {width: 100%; } .secondary-sidebar .attorney-contact-form input[type='submit'] {float: left; } /*----*****---- << 1.3 - Event Contact Form >> ----*****----*/ .event-contact-form input[type='text'], .event-contact-form input[type='email'], .event-contact-form input[type='tel'], .event-contact-form textarea {background: transparent; border: 2px solid #fff; border-radius: 5px; color: #fff; padding: 14px 15px 13px; } .event-contact-form textarea {height: 153px; } .event-contact-form input[type='submit'] {float: right; font-size: 16px; font-weight: normal; margin: 20px 0 0; text-transform: none; } /*----*****---- << 1.4 - Fitness Contact Form >> ----*****----*/ .fitness-form h2 {color: #eb0029; font-weight: 600; } .fitness-form .form-field {clear: both; float: left; margin: 12px 0 0; position: relative; width: 100%; } .fitness-form span.fa, .fitness-form span.icon {color: rgba(0, 0, 0, .2); color: #161616; font-size: 16px; left: 15px; position: absolute; top: 15px; z-index: 9; } .fitness-form input[type='text'], .fitness-form input[type='email'], .fitness-form input[type='tel'], .fitness-form textarea {border-color: #ebeef0; border-width: 0 0 3px 0; color: #000; font-size: 14px; margin-bottom: 5px; padding: 13px 0 13px 40px; text-transform: capitalize; } .fitness-form input[type='text']:hover, .fitness-form input[type='email']:hover, .fitness-form input[type='tel']:hover, .fitness-form textarea:hover {border-color: #161616; transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; } .fitness-form input[type='submit'] {border-radius: 0; float: right; font-size: 16px; font-weight: normal; letter-spacing: .5px; margin-top: 20px; padding: 16px 30px; } .fitness-form textarea {height: 120px; } .fitness-contact-info .dt-sc-contact-info {font-size: 16px; } .fitness-contact-info .dt-sc-contact-info p b {color: #666; } .fitness-contact-info .dt-sc-contact-info span {color: #eb0029; font-size: 18px; margin: 1px 10px 30px 0; } .fitness-contact-info .dt-sc-contact-info h6 {font-size: 18px; margin-bottom: 10px; } .fitness-contact-info .dt-sc-sociable li a {color: #161616; } .fitness-contact-info .dt-sc-sociable li a:hover {color: #fff; } .fitness-contact-boxes .wpb_text_column {float: left; margin-bottom: 0; width: 20.5%; } .fitness-contact-boxes .wpb_text_column:nth-child(2), .fitness-contact-boxes .wpb_text_column:last-child {float: left; padding-left: 30px; width: 23.1%; } .fitness-contact-boxes .wpb_text_column:nth-child(3) {float: left; padding-top: 85px; width: 12.8%; } .fitness-form-container.extend-bg-fullwidth-right:after {background: #fff; } /*----*****---- << 1.5 - Hosting Contact Form >> ----*****----*/ .hosting-contact-form input[type='submit'] {margin-top: 15px; padding: 15px 20px 13px; width: 100%; } .hosting-contact-form textarea {height: 196px; } /*----*****---- << 1.6 - Restaurant Contact Form >> ----*****----*/ .restaurant-contact-form {float: right; max-width: 570px; padding: 30px 0 0; width: 100%; } .restaurant-contact-form h3 {margin-bottom: 25px; padding-left: 10px; } .restaurant-contact-form input[type='text'], .restaurant-contact-form input[type='email'], .restaurant-contact-form input[type='tel'], .restaurant-contact-form textarea {background: none; border-color: rgba(255, 255, 255, .2); color: #fff; } .restaurant-contact-form input[type='text']:focus, .restaurant-contact-form input[type='email']:focus, .restaurant-contact-form input[type='tel']:focus, .restaurant-contact-form textarea:focus {border-color: #b48b3c; } .restaurant-contact-form input[type='submit'] {float: right; margin-top: 0; } .restaurant-contact-bg:before {background: url(images/slanting-bg.png) no-repeat; content: ''; height: 525px; position: absolute; right: -201px; top: 0; width: 201px; z-index: 9; } .dt-sc-contact-details-on-map {position: relative; } .dt-sc-contact-details-on-map:after {background: rgba(0, 0, 0, .8); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .dt-sc-contact-details-on-map.hide-overlay:after {display: none; } .dt-sc-contact-details-on-map .map {width: 100%; } .dt-sc-contact-details-on-map .dt-sc-map-overlay {padding: 72px 0 0; } .dt-sc-contact-details-on-map .back-to-contact {display: none; } .dt-sc-contact-details-on-map .back-to-contact span {background: #b48b3c; border: 2px solid #b48b3c; border-radius: 50%; color: #fff; float: left; font-size: 28px; height: 60px; left: 0; line-height: 60px; margin: auto; position: absolute; right: 0; text-align: center; top: -30px; width: 60px; z-index: 99; } .dt-sc-contact-details-on-map .section-wrapper.dt-sc-map-overlay {margin: auto; max-width: 1170px; right: 0; } .dt-sc-contact-details-on-map .dt-sc-map-overlay:after {left: 100%; right: inherit; } .vc_row.vc_row-no-padding .dt-sc-map-overlay .wpb_column.vc_col-sm-3 {padding-left: 15px; padding-right: 15px; } /*----*****---- << 1.7 - Spa Contact Form >> ----*****----*/ .spa-contact-form input[type='text'], .spa-contact-form input[type='tel'], .spa-contact-form input[type='email'], .spa-contact-form textarea {border-color: #ffc9d4; border-radius: 15px 0; color: #000; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 600; } .spa-contact-form input[type='text']:focus, .spa-contact-form input[type='tel']:focus, .spa-contact-form input[type='email']:focus, .spa-contact-form textarea:focus {border-color: #ef577a; } /*----*****---- << 1.8 - University Forms >> ----*****----*/ .university-contact-form .form-field, .university-contact-form .button-field {clear: both; float: left; margin: 0 0 20px; position: relative; width: 100%; } .university-contact-form .form-field i, .university-contact-form .button-field i {color: #1c3f55; font-size: 23px; font-weight: bold; position: absolute; right: 15px; top: 15px; z-index: 9; } .university-contact-form .form-field input[type='text'], .university-contact-form .form-field input[type='tel'], .university-contact-form .form-field input[type='email'], .university-contact-form textarea, .university-contact-form .form-field select {color: #1c3f55; font-family: 'Open Sans', sans-serif; font-weight: normal; padding: 16px 30px 15px 12px; } .university-contact-form textarea {height: 205px; } .university-contact-form .button-field {margin: 10px 0 0; } .university-contact-form .button-field input[type='submit'] {border-radius: 0; color: #fff; height: 49px; line-height: 49px; padding: 0 48px 0 20px; width: 100%; } .university-contact-form .button-field i {color: #463839; height: 49px; line-height: 49px; right: 0; text-align: center; top: 10px; width: 48px; } /*----*****---- << 1.9 - Yoga Forms >> ----*****----*/ .dt-sc-newsletter-section.yoga-expert-form .dt-sc-subscribe-frm {float: left; width: 100%; } .dt-sc-newsletter-section.yoga-expert-form {clear: both; float: left; margin: 0; padding: 0; width: 100%; } .dt-sc-newsletter-section.yoga-expert-form .dt-sc-subscribe-frm input[type='email'] {border: 1px solid #c8dcdf; border-radius: 5px; float: left; margin: 0 20px 0 0; width: 50%; } .dt-sc-newsletter-section.yoga-expert-form .dt-sc-subscribe-frm input[type='submit'] {background: #927d7d; border-radius: 3px; clear: none; margin: 0; padding: 17px 20px; } .dt-sc-newsletter-section.yoga-expert-form .dt-sc-subscribe-frm input[type='submit']:hover {background: #3c939d; } .yoga-contact-form input[type='text'], .yoga-contact-form input[type='email'], .yoga-contact-form input[type='tel'], .yoga-contact-form textarea {border-color: #c8dcdf; border-radius: 5px; } .yoga-contact-form input[type='submit'] {background: #927d7d; margin: 20px 0 0; } .yoga-contact-form input[type='submit']:hover {background: #3c939d; } .yoga-contact-form textarea {height: 100px; } /*----*****---- << 1.10 - Nightclub Booking Form >> ----*****----*/ .nightclub-contact {clear: both; float: left; margin: 0; padding: 0; width: 100%; } .nightclub-contact-info {border-bottom: 1px solid #000; float: left; margin: 0 2.5% 0 0; padding: 20px 0 67px; width: 23%; } .nightclub-contact-info .dt-sc-contact-info {font-size: 16px; line-height: 34px; } .nightclub-contact-info .dt-sc-contact-info span {color: #c09245; font-size: 24px; } .nightclub-contact-info .dt-sc-contact-info span.icon-pointer {font-size: 30px; } .nightclub-contact-info .dt-sc-contact-info span.icon-phone2 {margin-bottom: 45px; } .nightclub-contact-info .dt-sc-contact-info span.icon-plaine {margin-bottom: 10px; } .nightclub-contact-info .dt-sc-contact-info a {color: #000; } .nightclub-contact-info .dt-sc-contact-info a:hover {color: #c09245; } .nightclub-working-hours {background: #000; color: #fff; float: left; margin: 0 2.5% 0 0; padding: 30px; width: 32%; } .nightclub-working-hours h2 {color: #fff; } .nightclub-working-hours ul {clear: both; float: left; margin: 10px 0 0; width: 100%; } .nightclub-working-hours li {clear: both; color: #c09245; display: block; font-size: 16px; margin: 0; padding: 0; } .nightclub-working-hours li span {color: #fff; display: inline-block; width: 120px; } .nightclub-booking-form {clear: both; float: left; margin: 0; padding: 0; width: 100%; } .nightclub-booking-form p {clear: both; float: left; margin-bottom: 20px; position: relative; width: 100%; } .nightclub-booking-form p.date:before, .nightclub-booking-form p.time:before {color: #fff; font-family: FontAwesome; font-size: 25px; position: absolute; right: 14px; top: 9px; } .nightclub-booking-form p.date:before {content: '\f073'; } .nightclub-booking-form p.time:before {content: '\f017'; } .nightclub-booking-form p label {color: #fff; float: left; font-size: 16px; line-height: 52px; padding: 0 10px 0 0; width: 35%; } .nightclub-booking-form input[type='text'], .nightclub-booking-form input[type='tel'], .nightclub-booking-form input[type='date'] {background: rgba(255, 255, 255, .1); color: #fff; float: left; font-family: 'Open Sans', sans-serif; font-size: 16px; width: 65%; } .nightclub-booking-form input[type='submit'] {border-radius: 0; float: right; font-size: 30px; font-weight: normal; margin: 10px -105px 0 0; text-transform: none; } .nightclub-contact-form {background: #f2f2f2; float: left; margin: 0; margin: -192px 0 0; padding: 45px 45px 30px; position: relative; width: 40%; } .nightclub-contact-form:before {border: 4px solid #000; bottom: 20px; content: ''; height: auto; left: 20px; position: absolute; right: 20px; top: 20px; width: auto; } .nightclub-contact-form p {color: rgba(0, 0, 0, .5); font-size: 14px; line-height: 24px; position: relative; z-index: 1; } .nightclub-contact-form form {clear: both; float: left; position: relative; width: 100%; z-index: 1; } .nightclub-contact-form input[type='text'], .nightclub-contact-form input[type='email'], .nightclub-contact-form input[type='tel'], .nightclub-contact-form textarea {background: none; border: none; border-bottom: 1px solid #000; color: #000; font-size: 16px; margin-bottom: 7px; padding: 16px 12px 8px 0; } .nightclub-contact-form textarea {height: 150px; } .nightclub-contact-form input[type='submit'] {border-radius: 0; font-size: 20px; font-weight: normal; margin: 40px 0 0; padding: 18px 20px 17px; text-align: center; width: 100%; } /*----*****---- << 1.11 - Architecture Contact Form >> ----*****----*/ .architecture-contact-form input[type='text'], .architecture-contact-form input[type='email'], .architecture-contact-form input[type='tel'], .architecture-contact-form textarea {background: none; border: 0; border-bottom: 1px solid #000; color: #000; font-size: 14px; padding: 15px 0 10px 30px; } .architecture-contact-form textarea {height: 130px; } .architecture-contact-form input[type='submit'] {background: #000; border-radius: 0; color: #fff; float: right; font-weight: normal; margin: 20px 0 0 20px; padding: 16px 30px; } .architecture-contact-form input[type='submit']:hover {background: #ffe401; color: #000; } .architecture-contact-form .form-field {clear: both; float: left; margin: 0; position: relative; width: 100%; } .architecture-contact-form span.fa {color: #000; font-size: 16px; left: 0; position: absolute; top: 15px; } /*----*****---- << 1.12 - Insurance Contact Form >> ----*****----*/ .insurance-contact-form input[type='text'], .insurance-contact-form input[type='email'], .insurance-contact-form textarea {background: rgba(0, 0, 0, .02); } .insurance-contact-form  input[type='submit'] {font-size: 16px; margin-top: 20px; padding: 17px 20px 16px; width: 100%; } .insurance-contact-form textarea {height: 122px; } .insurance-custom-tab .dt-sc-tabs-horizontal-frame-content {border: 1px solid rgba(0, 0, 0, .1); border-radius: 0 0 3px 3px; border-top: 0; padding: 25px; } .insurance-quote-form {float: left; margin: 0; padding: 0; width: 100%; } .insurance-quote-form label {display: inline-block; margin-bottom: 5px; } .insurance-quote-form .radio-label {clear: both; margin: 0; } .insurance-quote-form .radio-label .wpcf7-list-item {clear: both; display: inline-block; position: relative; } .insurance-quote-form .radio-label .wpcf7-list-item label:before {background: #fff; border: 1px solid rgba(0, 0, 0, .2); border-radius: 50%; content: ''; height: 14px; left: 5px; position: absolute; top: 7px; width: 14px; } .insurance-quote-form .radio-label input[type='radio'] {width: 30px; } .insurance-quote-form .radio-label .wpcf7-list-item-label {display: inline-block; line-height: 29px; margin: 0; min-width: 40px; position: relative; } .insurance-quote-form .radio-label .wpcf7-list-item-label:before {opacity: 0; } .insurance-quote-form .radio-label input[type='radio']:checked + .wpcf7-list-item-label:before {background: #008bd3; border-radius: 50%; bottom: 0; content: ''; height: 6px; left: -23px; margin: auto; opacity: 1; position: absolute; top: 2px; width: 6px; } .insurance-quote-form .radio-label .wpcf7-list-item.last input[type='radio']:checked + .wpcf7-list-item-label:before {left: -31px; } .insurance-quote-form input[type='text'], .insurance-quote-form input[type='tel'], .insurance-quote-form input[type='date'], .insurance-quote-form select {background: rgba(0, 0, 0, .02); } .insurance-quote-form .checkbox-label input[type='checkbox'] {left: 0; position: absolute; top: 2px; } .insurance-quote-form .checkbox-label span {float: left; line-height: 20px; padding: 0 0 0 23px; } .insurance-quote-form .checkbox-label {clear: both; color: #222; display: inline-block; font-size: 12px; position: relative; } .insurance-quote-form input[type='submit'] {border-radius: 0; padding: 14px 20px; } /*----*****---- << 1.13 - Hotel Contact Form >> ----*****----*/ .wpcf7-form.hotel-contact-form p {margin-bottom: 10px; position: relative; } .hotel-contact-form p span.fa {color: rgba(0, 0, 0, .2); font-size: 16px; position: absolute; right: 15px; top: 17px; z-index: 1; } .hotel-contact-form p textarea {height: 120px; } .hotel-contact-form p input[type='submit'] {border-radius: 0; float: right; margin: 15px 0 0 10px; } .hotel-contact-form p .clear {background: #000; } .hotel-contact-form p .clear:hover {background: #c09245; } /*----*****---- << 1.14 - Plumber Contact Form >> ----*****----*/ .plumber-contact-form {clear: both; float: left; margin: 0; padding: 0; text-align: center; width: 100%; } .plumber-contact-form form {display: inline-block; width: 50%; } .plumber-contact-form form input[type='text'], .plumber-contact-form form input[type='email'], .plumber-contact-form form textarea {border-color: #e2ebf1; border-radius: 3px; } .plumber-contact-form form input[type='submit'] {background: none; border: 1px solid #15a7e1; box-shadow: 3px 3px 0 0 #1297cc; color: #15a7e1; font-size: 16px; font-weight: bold; padding: 16px 20px; width: 100%; } .plumber-contact-form form input[type='submit']:hover {background: #15a7e1; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .1); color: #fff; } /*----*****---- << 1.15 - Fashion Contact Form >> ----*****----*/ .fashion-contact-details .dt-sc-contact-info span {font-size: 14px; } .fashion-contact-form input[type='submit'] {background: #000; float: right; float: right; font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: normal; padding: 15px 20px 12px; } .fashion-contact-form input[type='submit']:hover {background: #c3875f; } /*----*****---- << 1.16 - Jewel Contact Form >> ----*****----*/ .jewel-contact-form label {color: #000; float: right; } .jewel-contact-form input[type='submit'] {float: right; margin: 20px 0 0; padding: 17px 20px 15px; } .jewel-contact-form textarea {height: 306px; } /*-------------------------------------------------------------- 2.0 - DT Responsive --------------------------------------------------------------*/ /* Note: Design for a width of 960px */ @media only screen and (min-width:992px) and (max-width:1199px) {/** Restaurant **/ .restaurant-contact-bg:before {content: none; } .restaurant-contact-bg > .vc_column-inner {padding-right: 0 !important; } .restaurant-contact-form {display: block; float: none; margin: 0 auto; max-width: 100%; width: 80%; } /** Fitness **/ .fitness-contact-boxes .wpb_text_column:nth-child(3) {padding-top: 55px; } } /* Note: Design for a width of 768px */ @media only screen and (min-width:768px) and (max-width:991px) {/** Business **/ .business-contact-social li {margin: 0 20px; } .plumber-contact-form form {width: 100%; } } /*----*****---- << Mobile (Landscape) >> ----*****----*/ /* Common Styles for the devices below 767px width */ @media only screen and (max-width: 767px) {/** Restaurant **/ .restaurant-booking-form {padding: 0 50px; } .restaurant-contact-bg:before {content: none; } .restaurant-contact-bg > .vc_column-inner {padding-right: 0 !important; } .restaurant-contact-form {display: block; float: none; margin: 0 auto 20px; max-width: 100%; width: 80%; } .restaurant-contact-form .wpb_column {margin-bottom: 20px; } /** Contact-details-on-map **/ .dt-sc-contact-details-on-map:after {z-index: -1; } .dt-sc-contact-details-on-map .dt-sc-map-overlay {position: inherit; } .dt-sc-contact-details-on-map .dt-sc-map-overlay .dt-sc-contact-info.type3 {font-size: 13px; } /** Jewel **/ .jewel-contact-form .vc_col-sm-2 {width: 30% !important; } .jewel-contact-form .vc_col-sm-10 {width: 70% !important; } /** Plumber **/ .plumber-contact-form form {width: 100%; } } /*----*****---- << Mobile (Landscape) >> ----*****----*/ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) {/** Wedding **/ .rsvp-form {padding: 65px 35px; } .rsvp-form form:before {left: -81px; } .rsvp-form form:after {right: -164px; } } /* Common Styles for the devices below 479px width */ @media only screen and (max-width: 479px) {/** Attorney **/ .attorney-contact-form {width: 100%; } /** Wedding **/ .rsvp-form {padding: 65px 35px; width: 100%; } .rsvp-form form:before, .rsvp-form form:after {content: none; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 319px) {/** Business **/ .business-contact-form {padding-left: 5px; padding-right: 5px; } .business-contact-social li {margin: 0 5px; } /** Jewel **/ .jewel-contact-form {text-align: center; } .jewel-contact-form label {float: none; } .jewel-contact-form .vc_col-sm-2, .jewel-contact-form .vc_col-sm-10 {width: 100% !important; } /** Wedding **/ .rsvp-form {margin-left: -15px; padding: 65px 25px; width: calc(100% + 30px); } .rsvp-form:before {bottom: 5px; height: auto; left: 5px; right: 5px; top: 5px; width: auto; } }