home/abhiramc/public_html/wp-content/themes/whistle/css/contact.css000064400000061736150213057230021556 0ustar00 /* 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; } .wpcf7 form .wpcf7-response-output {float: left; width: 100%; margin: 10px 0 0; } form.wpcf7-form .wpcf7-response-output {position: relative; clear: both; float: left; margin-left: 0; margin-right: 0; padding: 15px 15px 15px 45px; width: 100%; box-sizing: border-box; } form.wpcf7-form.invalid .wpcf7-response-output {background-color: #ffcccc; border: 1px solid #ff9999; color: #d01313; } form.wpcf7-form.sent .wpcf7-response-output {background-color: #eafac0; border: 1px solid #b1cf67; color: #7ba411; } form.wpcf7-form .wpcf7-response-output:before {top: 15px;left: 18px;font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;font-size: 20px;position: absolute;} form.wpcf7-form.invalid .wpcf7-response-output:before {content: "\f057";} form.wpcf7-form.sent .wpcf7-response-output:before {content: "\f058";} /*-------------------------------------------------------------- 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; } }