/*------------------------------------------------------------------ [Table of contents] 1.1. Global reset styles 1.2. button styles 1.3. page heading styles / .page-heading 1.4. page banner styles / .page-banner 1.5. parallax holder styles / .parallax-holder 1.6. stretch styles / .stretch 1.7. gotoTop styles / #gotoTop 1.8. pre-loader styles / #pre-loader 1.9. popup holder styles / .popup-holder 1.10. beans slider styles / .beans-slider 1.11. beans stepslider styles / .beans-stepslider 1.12. beans fadeslider styles / .beans-fadeslider 1.13. boxed v styles / .boxed-v 1.14. port parallex styles / .port-parallex 1.15. parallax section styles / .parallax-section 1.16. section styles / .section 1.17. Global classes styles 1-18. error section Styles / .error-section 1-19. lost block Styles / .lost-block 1-20. btn back Styles / .btn-back 1-21. error form Styles / .error-form 1-22. contact block Styles / .contact-block 1-23. contact message Styles / .contact-message 1-24. contact form2 Styles / .contact-form2 1-25. login form2 Styles / .login-form2 1-26. contact address Styles / .contact-address 1.27. page banner styles / .page-banner 1.28. cart form styles / .cart-form 1.29. quantity form styles / .quantity-form 1.30. apply form styles / .apply-form 1.31. update form styles / .update-form 1.32. rang form styles / .rang-form 1.33. rsvpform section styles / .rsvpform-section 1.34. comment form styles / .comment-form 1.35. contact form styles / .contact-form 1.36. done massage styles / .done-massage 1.37. form loading styles / .form-loading 1-38. testimonials Styles / .testimonials 1-39. blank page Styles / .blank-page 1-40. faq section Styles / .faq-section 1-41. divider section Styles / .divider-section 1-42. blockquote Styles / .blockquote-style1 1-43. list style 1-44. gallery quotes Styles / .gallery-quotes 1.45. social network styles 1-46. Custom Form Styles 1.47. youtube bg video styles / .youtube_bg_video 1.48. fancyBox styles 1.49. lodar animation styles 1.50. style changer styles / #style-changer -------------------------------------------------------------------*/ .page-banner, .beans-slider, .beans-slider .beans-mask, .beans-stepslider, .beans-stepslider .beans-mask, .beans-fadeslider, .port-parallex, .parallax-section, .contact-form { width: 100%; overflow: hidden; position: relative; } .beans-slider .beans-pagination ul, .beans-stepslider .beans-pagination ul, .beans-fadeslider .beans-pagination ul { list-style: none; margin: 0; padding: 0; } .btn-history:before, .page-heading .heading:after, .page-heading .heading2:before, .page-heading .heading2:after, .page-heading .heading3:after, .page-heading .heading3:before, .page-heading .heading5:after, .page-heading .heading5:before, .page-heading .heading6:after, .page-heading .heading7:before, .page-heading .heading7:after, .page-heading .heading8:after, .page-heading .heading8:before, .page-banner .heading:before { content: ""; position: absolute; } .contact-form2:after, .login-form2:after, .cart-form:after, .update-form:after { content: " "; display: block; clear: both; } .parallax-holder, .parallax-holder .parallax-frame, .stretch, .beans-fadeslider .slideset, .beans-fadeslider .slide, .beans-fadeslider .beans-pagination, .parallax-section .over, .error-section:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /*------------------------------------------------------------------ 1.1. Global reset styles -------------------------------------------------------------------*/ .tel { pointer-events: none; } button, input[type="button"], input[type="reset"], input[type="file"], input[type="submit"] { -webkit-appearance: none; -webkit-border-radius: 0; cursor: pointer; } input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { -webkit-appearance: none; -webkit-border-radius: 0; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } @font-face { font-family: "icomoon"; src: url("../fonts/icomoon.eot?kafzz"); src: url("../fonts/icomoon.eot?#iefixkafzz") format("embedded-opentype"), url("../fonts/icomoon.ttf?kafzz") format("truetype"), url("../fonts/icomoon.woff?kafzz") format("woff"), url("../fonts/icomoon.svg?kafzz#icomoon") format("svg"); font-weight: normal; font-style: normal; } span.icomoon[class^="icon-"], span.icomoon[class*=" icon-"] { font-family: "icomoon"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-hammer:before { content: "\e601"; } .icon-lightning:before { content: "\e602"; } .icon-triangular:before { content: "\e603"; } .icon-truck:before { content: "\e604"; } .icon-svg1:before { content: "\e600"; } /*------------------------------------------------------------------ 1.2. button styles -------------------------------------------------------------------*/ .btn { border-radius: 0; padding: 8px 20px; text-align: center; white-space: normal; vertical-align: top; letter-spacing: 2px; text-transform: uppercase; font: 12px/20px "Lato", Georgia, "Times New Roman", Times, serif; -webkit-transition: all .4s ease; transition: all .4s ease; } .btn:hover { text-decoration: none; } .btn:hover, .btn:focus, .btn.focus { color: inherit; } .btn-dark { border-color: #2a2a2a; color: #2a2a2a !important; text-transform: uppercase; } .dark .btn-dark { border-color: rgba(143, 143, 143, .6); color: rgba(143, 143, 143, .6) !important; } .btn-dark:hover { background: #2a2a2a; border-color: #2a2a2a; color: #fff !important; } .dark .btn-dark:hover { color: #8f8f8f; background: transparent !important; color: #8f8f8f !important; border-color: #8f8f8f !important; } .btn-f-default { color: #fff; background: transparent; border: 1px solid #fff; } .btn-f-default:hover { color: #fff; } .btn-f-info { color: #fff; text-transform: uppercase; border: 1px solid transparent; } .btn-f-info:hover { color: #fff; border-color: #fff; background: transparent; } .btn-history { border: 0; color: #262626; font-size: 16px; overflow: hidden; border-radius: 0; background: #fff; font-style: italic; position: relative; padding: 11px 58px 11px 19px; -webkit-transition: all .4s ease; transition: all .4s ease; } .btn-history:before { top: 0; width: 58px; bottom: -1px; right: -20px; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); -webkit-transition: all .4s ease; transition: all .4s ease; } .btn-history:after { top: 10px; bottom: 0; z-index: 2; right: 14px; color: #fff; font-size: 20px; content: "\f101"; position: absolute; -webkit-transform: skewX(0deg); -ms-transform: skewX(0deg); transform: skewX(0deg); font-family: "FontAwesome"; -ms-transform: skewX(0deg); -webkit-transform: skewX(0deg); -webkit-transition: all .4s ease; transition: all .4s ease; } .btn-history:hover { color: #fff; } .btn-history:hover:before { background: #222; } .dark .btn-history:hover:before { background: #191919; } .btn-more { color: #8f8f8f; text-transform: uppercase; border: 1px solid #ddd; } .dark .btn-more { color: rgba(143, 143, 143, .6); border-color: rgba(143, 143, 143, .6); } .btn-more:hover { color: #fff; } .dark .btn-more:hover { color: #8f8f8f; background: transparent; border-color: #8f8f8f; color: #8f8f8f; } .btn-resume { color: #fff; text-transform: uppercase; } .btn-resume:hover { background: transparent; border-color: #222; } .btn-spicy { color: #fff; background: #c0392b; padding: 3px 12px; margin: 2px 0 0; display: inline-block; vertical-align: top; text-transform: uppercase; font: 11px/13px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .btn-spicy.new { background: #e67e22; } .btn-spicy.seller { background: #2c3e50; } .know-more { color: #fff; text-transform: uppercase; border: 1px solid transparent; -webkit-transition: all .4s ease; transition: all .4s ease; } .dark .know-more { color: rgba(143, 143, 143, .6); border-color: rgba(143, 143, 143, .6); } .know-more:hover { color: #fff; background: #222; border-color: #222; } .dark .know-more:hover { color: #8f8f8f; background: transparent; border-color: #8f8f8f; color: #8f8f8f; } .btn-add { color: #2a2a2a; font-size: 12px; line-height: 14px; padding: 0 2px; margin: 0 13px 0 0; text-transform: uppercase; display: inline-block; vertical-align: top; position: relative; position: relative; } .btn-add:before { position: absolute; content: ""; top: 0; bottom: auto; left: 100%; right: auto; } .btn-add:after { position: absolute; content: ""; top: 0; bottom: auto; left: auto; right: 100%; } .dark .btn-add { color: #fff; } .btn-add:before { content: "]"; } .btn-add:after { content: "["; } .btn-add .fa { margin: 1px 3px 0 0; display: inline-block; vertical-align: top; } .btn-add:hover { text-decoration: none; } .btn-load { color: #2a2a2a; border: 1px solid #2a2a2a; -webkit-transition: all .4s ease; transition: all .4s ease; display: inline-block; vertical-align: top; } .dark .btn-load { color: rgba(143, 143, 143, .6); border-color: rgba(143, 143, 143, .6); } .btn-load:hover { color: #fff; background: #2a2a2a; } .dark .btn-load:hover { color: #8f8f8f; background: transparent; color: #8f8f8f; border-color: #8f8f8f; } .btn-shop { color: #fff; position: relative; text-transform: uppercase; display: inline-block; vertical-align: top; } .btn-shop .fa { position: absolute; left: 100%; top: 1px; margin: 0 0 0 9px; } .btn-shop:hover { text-decoration: none; } .portfolio-view { color: #8f8f8f; font-size: 12px; line-height: 14px; -webkit-transition: all .4s ease; transition: all .4s ease; } .portfolio-view span { padding: 0 1px; letter-spacing: 2px; -webkit-transition: all .4s ease; transition: all .4s ease; display: inline-block; vertical-align: middle; } .portfolio-view:hover { text-decoration: none; } .portfolio-view:hover span { padding: 0 8px; } .portfolio-view:hover:before, .portfolio-view:hover:after { color: #8f8f8f; } .portfolio-view:after { content: "]"; display: inline-block; vertical-align: middle; } .portfolio-view:before { content: "["; display: inline-block; vertical-align: middle; } /*------------------------------------------------------------------ 1.3. page heading styles / .page-heading -------------------------------------------------------------------*/ .page-heading { z-index: 5; font-size: 16px; overflow: hidden; max-width: 900px; line-height: 26px; position: relative; text-align: center; margin: 0 auto 60px; } .page-heading h1 { margin: 0; font: 50px/60px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .page-heading h2 { margin: 0; font: 36px/50px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .page-heading h3 { margin: 0; font: 35px/45px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .page-heading h4 { margin: 0; font-size: 30px; line-height: 40px; font: 30px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .page-heading h5 { margin: 0; font-size: 25px; line-height: 30px; font: 25px/30px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .page-heading h6 { margin: 0; font-size: 20px; line-height: 25px; font: 20px/25px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .page-heading .title { color: #8f8f8f; font-size: 14px; line-height: 25px; } .page-heading .small-heading { font-size: 26px; line-height: 30px; } .page-heading p { margin: 0 !important; } .page-heading .font-light { font-weight: 300; } .page-heading .font-bold { font-weight: 700; } .page-heading .font-medium { font-weight: 600; } .page-heading .heading { display: block; padding: 0 0 25px; position: relative; } .page-heading .heading:after { bottom: 0; left: 50%; margin: 0 0 0 -40px; width: 80px; height: 4px; } .page-heading .heading2 { display: block; padding: 0 0 20px; position: relative; } .page-heading .heading2:before, .page-heading .heading2:after { left: 50%; bottom: 1px; margin: 0 0 0 -29px; width: 23px; height: 2px; } .page-heading .heading2:before { margin: 0 0 0 4px; } .page-heading .heading3 { display: block; padding: 0 0 20px; position: relative; } .page-heading .heading3:after { left: 50%; bottom: 1px; margin: 0 0 0 -40px; width: 80px; height: 2px; } .page-heading .heading3:before { left: 50%; bottom: -6px; margin: 0 0 0 -4px; width: 0; height: 0; border-style: solid; border-width: 7px 4px 0 4px; border-color: transparent transparent transparent transparent; } .page-heading .heading4 { display: inline-block; vertical-align: top; position: relative; position: relative; } .page-heading .heading4:before { position: absolute; content: ""; top: 50%; bottom: auto; left: auto; right: -63px; } .page-heading .heading4:after { position: absolute; content: ""; top: 50%; bottom: auto; left: -63px; right: auto; } .page-heading .heading4:after, .page-heading .heading4:before { font-size: 15px; content: "\e600"; line-height: 20px; margin: -10px 0 0; font-family: "icomoon"; } .page-heading .heading4:after { transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } .page-heading .heading5 { display: inline-block; vertical-align: top; position: relative; z-index: 1; position: relative; z-index: 1; } .page-heading .heading5:after { top: 50%; z-index: -1; bottom: auto; left: 100%; right: auto; background: transparent; } .page-heading .heading5:before { top: 50%; z-index: -1; bottom: auto; left: auto; right: 100%; background: transparent; } .dark .page-heading .heading5 { color: #fff; } .page-heading .heading5:before, .page-heading .heading5:after { margin: -3.5px 0 0 4px; width: 7px; height: 6px; } .page-heading .heading5:before { margin: -3.5px 4px 0 0; } .page-heading .heading6 { padding: 0 0 20px; position: relative; display: inline-block; vertical-align: top; } .page-heading .heading6:after { left: 0; right: 0; bottom: 0; height: 4px; background: #fff; } .page-heading .heading7 { position: relative; display: inline-block; vertical-align: top; } .page-heading .heading7:before, .page-heading .heading7:after { top: 50%; left: -45px; margin: -2px 0 0; width: 35px; height: 6px; border: solid transparent; border-width: 2px 0; } .page-heading .heading7:before { left: auto; right: -45px; } .page-heading .heading8 { display: inline-block; vertical-align: top; position: relative; z-index: 1; position: relative; z-index: 1; } .page-heading .heading8:after { top: 50%; z-index: -1; bottom: auto; left: auto; right: 100%; background: transparent; } .page-heading .heading8:before { top: 50%; z-index: -1; bottom: auto; left: 100%; right: auto; background: transparent; } .page-heading .heading8:before, .page-heading .heading8:after { width: 20px; height: 2px; margin: -1px 26px 0 0; } .page-heading .heading8:before { margin: -1px 0 0 26px; } .page-heading .white { color: #fff; } .page-heading .lime { color: #222; } .dark .page-heading .lime { color: #fff; } .page-heading .icon { color: #fff; line-height: 2; display: block; font-size: 37px; padding: 3px 0 0; text-align: center; border-radius: 50%; margin: 0 auto 20px; width: 80px; height: 80px; -webkit-transition: all .4s ease; transition: all .4s ease; } .page-heading .icon .fa-fire { margin: 7px 0 0; } .page-heading.white { color: #fff; } .page-heading.left-align { text-align: left; } .page-heading.small .heading:after { margin: 0 0 0 -20px; width: 40px; height: 4px; } .page-heading.style2 .heading:after { margin: 0 0 0 -33px; width: 62px; height: 2px; } .page-heading.dark-style .heading:after { background: #222; } .dark .page-heading.dark-style .heading:after { background: #fff; } .page-heading.dark-style .heading8:before, .page-heading.dark-style .heading8:after, .page-heading.dark-style .heading2:before, .page-heading.dark-style .heading2:after { background: #222; } .dark .page-heading.dark-style .heading8:before, .dark .page-heading.dark-style .heading8:after, .dark .page-heading.dark-style .heading2:before, .dark .page-heading.dark-style .heading2:after { background: #fff; } .page-heading.dark-style .heading3:after { background: #222; } .dark .page-heading.dark-style .heading3:after { background: #fff; } .page-heading.dark-style .heading3:before { border-color: #222 transparent transparent; } .dark .page-heading.dark-style .heading3:before { border-color: #fff transparent transparent; } .page-heading.dark-style .heading4:before, .page-heading.dark-style .heading4:after { color: #222; } .dark .page-heading.dark-style .heading4:before, .dark .page-heading.dark-style .heading4:after { color: #fff; } .page-heading.dark-style .heading6:after { background: #222; } .dark .page-heading.dark-style .heading6:after { background: #fff; } .page-heading.dark-style .heading7:before, .page-heading.dark-style .heading7:after { border-color: #222; } .dark .page-heading.dark-style .heading7:before, .dark .page-heading.dark-style .heading7:after { border-color: #fff; } .page-heading.dark-style .dot { color: #222; } .dark .page-heading.dark-style .dot { color: #fff; } /*------------------------------------------------------------------ 1.4. page banner styles / .page-banner -------------------------------------------------------------------*/ .page-banner { z-index: 1; color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; letter-spacing: 2px; } .page-banner .heading { color: #fff; margin: 0 0 20px; padding: 0 0 14px; font: 600 36px/50px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; z-index: 1; } .page-banner .heading:before { top: 100%; z-index: -1; bottom: auto; left: 0; right: auto; background: transparent; } .page-banner .heading:before { margin: 0; width: 50px; height: 4px; } .page-banner .parallax-holder, .page-banner .video-area, .page-banner .stretch { z-index: 1; position: relative; position: absolute; } .page-banner .parallax-holder:before, .page-banner .video-area:before, .page-banner .stretch:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .page-banner .parallax-holder:before, .page-banner .video-area:before, .page-banner .stretch:before { z-index: 1; background: rgba(0, 0, 0, .5); } .page-banner .parallax-holder, .page-banner .video-area { top: 0; left: 0; right: 0; bottom: 0; } .page-banner .mejs-offscreen { display: none; } .page-banner .container-max, .page-banner .container { padding-top: 187px; padding-bottom: 99px; position: relative; z-index: 999; } .page-banner p { margin: 0 0 10px; } .page-banner .holder { float: left; max-width: 850px; text-transform: uppercase; } .page-banner .breadcrumbs { margin: 0; float: right; font-size: 12px; font-weight: 600; line-height: 18px; padding: 44px 0 0; letter-spacing: 2px; text-transform: uppercase; } .page-banner .breadcrumbs li { position: relative; } .page-banner .breadcrumbs li:before { position: absolute; content: ""; top: 0; bottom: auto; left: -3px; right: auto; } .page-banner .breadcrumbs li:before { content: "/"; } .page-banner .breadcrumbs li:first-child a { margin-left: 0; } .page-banner .breadcrumbs li:first-child:before { display: none; } .page-banner .breadcrumbs li:last-child a { margin-right: 0; } .page-banner .breadcrumbs li a { color: #dbdbdb; margin: 0 10px; -webkit-transition: all .4s ease; transition: all .4s ease; } .page-banner .breadcrumbs li a:hover { text-decoration: none; } .page-banner .breadcrumbs li.active a { pointer-events: none; } .page-banner.small .container-max, .page-banner.small .container { padding-top: 80px; padding-bottom: 60px; } .page-banner.small .heading { margin: 0; padding: 0; font-size: 32px; font-weight: 400; letter-spacing: 0; line-height: 40px; } .page-banner.small .heading:before { display: none; } .page-banner.small .breadcrumbs { padding: 10px 3px 0 0; } .page-banner.grey { color: #8f8f8f; background: #f1f1f1; /*background: $dove-gray;*/ } .page-banner.grey .heading { color: #2a2a2a; } .dark .page-banner.grey .heading { color: #8f8f8f; } .page-banner.grey .breadcrumbs li:before, .page-banner.grey .breadcrumbs li a { color: #8f8f8f; } .dark .page-banner.grey { background: #191919; } .page-banner.rightalign .holder { float: right; text-align: right; } .page-banner.rightalign .breadcrumbs { float: left; } .page-banner.rightalign .heading:before { right: 0; left: auto; } .page-banner.center .holder { float: none; max-width: 100%; text-align: center; } .page-banner.center .heading:before { left: 50%; margin: 0 0 0 -25px; } .page-banner.center .breadcrumbs { float: none; max-width: 100%; overflow: hidden; padding: 10px 0 0; text-align: center; } .page-banner.style2 .container-max, .page-banner.style2 .container { padding-top: 50px; padding-bottom: 40px; } .page-banner.style2 .heading { font-size: 34px; padding: 0 0 7px; } .page-banner.style2 .heading:before { right: 0; width: auto; } .page-banner.style2 .breadcrumbs { font-size: 12px; padding: 39px 0 0; } .page-banner.style2.rightalign .heading:before { left: 0; margin: 0; } .page-banner.style2.center .heading { vertical-align: top; display: inline-block; } .page-banner.style2.center .heading:before { left: 0; margin: 0; } .page-banner.dark { background: #222; } .page-banner.pattern { background: url(../images/icons/pattern01.jpg); } /*------------------------------------------------------------------ 1.5. parallax holder styles / .parallax-holder -------------------------------------------------------------------*/ .parallax-holder { overflow: hidden; } .parallax-holder.no-parallax .parallax-frame { background-attachment: inherit !important; background-position: 50% 50% !important; } /*------------------------------------------------------------------ 1.6. stretch styles / .stretch -------------------------------------------------------------------*/ .stretch { overflow: hidden; } .stretch img { top: 0; left: 0; position: absolute; } /*------------------------------------------------------------------ 1.7. gotoTop styles / #gotoTop -------------------------------------------------------------------*/ #gotoTop { right: 20px; bottom: 20px; opacity: .8; color: #fff; z-index: 9999; position: fixed; font-size: 20px; cursor: pointer; background: #666; padding: 12px 0 0; text-align: center; border-radius: 50px; width: 50px; height: 50px; -webkit-transition: all .4s ease; transition: all .4s ease; } /*------------------------------------------------------------------ 1.8. pre loader styles / #pre-loader -------------------------------------------------------------------*/ #pre-loader { top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: block; position: fixed; text-align: center; background: #fff; } #pre-loader .loader-holder { top: 50%; left: 50%; width: 400px; height: 400px; position: absolute; margin: -200px 0 0 -200px; white-space: nowrap; } #pre-loader .loader-holder .frame { display: inline-block; white-space: normal; vertical-align: middle; } #pre-loader .loader-holder:before { content: ""; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } #pre-loader img { margin: 0 0 45px; display: inline-block; } .no-transition #pre-loader { display: none !important; } /*------------------------------------------------------------------ 1.9. popup holder styles / .popup-holder -------------------------------------------------------------------*/ .popup-holder { position: relative; overflow: hidden; height: 0; } /*------------------------------------------------------------------ 1.10. beans slider styles / .beans-slider -------------------------------------------------------------------*/ .beans-slider .beans-slideset { width: 99999px; float: left; } .beans-slider .beans-slide { width: 100%; float: left; position: relative; } .beans-slider .beans-slide.active { z-index: 1; } .beans-slider .beans-pagination { left: 0; right: 0; z-index: 99; bottom: 15px; text-align: center; position: absolute; } .beans-slider.not-enough-slides a.btn-prev, .beans-slider.not-enough-slides a.btn-next { visibility: hidden; } .beans-slider .parallax-holder, .beans-slider .stretch { z-index: -1; } /*------------------------------------------------------------------ 1.11. beans stepslider styles / .beans-stepslider -------------------------------------------------------------------*/ .beans-stepslider .beans-slideset { float: left; width: 9999px; } .beans-stepslider .beans-slide { float: left; } .beans-stepslider .beans-slide.active { z-index: 1; } .beans-stepslider .beans-pagination { left: 0; right: 0; z-index: 99; bottom: 15px; text-align: center; position: absolute; } .beans-stepslider.not-enough-slides a.btn-prev, .beans-stepslider.not-enough-slides a.btn-next { visibility: hidden; } /*------------------------------------------------------------------ 1.12. beans fadeslider styles / .beans-fadeslider -------------------------------------------------------------------*/ .beans-fadeslider .slide { z-index: 1; } .beans-fadeslider .slide.active { z-index: 2; } .beans-fadeslider.not-enough-slides a.btn-prev, .beans-fadeslider.not-enough-slides a.btn-next { visibility: hidden; } .beans-fadeslider .beans-pagination { margin: 0; top: auto; z-index: 99; bottom: 40px; text-align: center; } /*------------------------------------------------------------------ 1.13. boxed v styles / .boxed-v -------------------------------------------------------------------*/ .boxed-v #wrapper { margin: 0 auto; max-width: 1350px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3); } .boxed-v.no-boxed #wrapper { max-width: 100%; } .container-max { margin: 0 auto; padding: 0 15px; max-width: 1200px; } body.boxed-v #wrapper { margin: 0 auto; max-width: 1350px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3); } .mejs-offscreen { display: none; } .video-lightbox { width: 900px; } /*------------------------------------------------------------------ 1.14. port parallex styles / .port-parallex -------------------------------------------------------------------*/ .port-parallex { height: 572px; } .port-parallex.small { height: 460px; } /*------------------------------------------------------------------ 1.15. parallax section styles / .parallax-section -------------------------------------------------------------------*/ .parallax-section { color: #fff; font: 16px/30px "Lato", Georgia, "Times New Roman", Times, serif; } .parallax-section .over { background: rgba(0, 0, 0, .6); } .parallax-section .over-holder { display: table; padding: 20px 0; table-layout: fixed; width: 100%; height: 100%; } .parallax-section .over-frame { text-align: center; display: table-cell; width: 100%; height: 100%; vertical-align: middle; } .parallax-section h2 { margin: 0 0 15px; font: 700 60px/80px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .parallax-section h3 { margin: 0 0 15px; font: 300 50px/60px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .parallax-section .next-section { left: 50%; bottom: 0; width: 28px; height: 40px; color: #fff; border-radius: 8px; text-align: center; position: absolute; margin: 0 0 40px -14px; border: 2px solid #fff; -webkit-transition: all .4s ease; transition: all .4s ease; } .parallax-section .next-section .fa { position: relative; -webkit-animation-duration: 2.5s; animation-duration: 2.5s; animation-name: hvr-ripple-out; -webkit-animation-name: hvr-ripple-out; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; } .parallax-section .next-section:hover { text-decoration: none; background: #fff; } .parallax-section .scroll { color: #fff; font-size: 13px; line-height: 20px; vertical-align: top; display: inline-block; text-transform: uppercase; padding: 7px 32px 7px 30px; -webkit-transition: all .4s ease; transition: all .4s ease; } .parallax-section .scroll .fa { margin: 0 0 0 7px; position: relative; -webkit-animation-duration: 2.5s; animation-duration: 2.5s; animation-name: hvr-ripple-out; -webkit-animation-name: hvr-ripple-out; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; } .parallax-section .scroll:hover { text-decoration: none; } .parallax-section .scroll.add { background: #9b59b6; } .parallax-section p { margin: 0 0 33px; } /*------------------------------------------------------------------ 1.16. section styles / .section -------------------------------------------------------------------*/ .section.dark { background: #191919; } .section.video-area, .section.parallax-holder { top: 0; left: 0; right: 0; bottom: 0; z-index: -1; position: absolute; } .section.video-area:before, .section.parallax-holder:before { top: 0; left: 0; right: 0; bottom: 0; content: ""; position: absolute; background: rgba(0, 0, 0, .7); } /*------------------------------------------------------------------ 1.17. Global classes styles -------------------------------------------------------------------*/ .margin-zero { margin: 0 !important; } .allmargin { margin: 50px !important; } .padding-zero { padding: 0 !important; } .margin-t-zero { margin-top: 0 !important; } .margin-top-30 { margin-top: 30px !important; } .margin-top-60 { margin-top: 60px !important; } .margin-top-90 { margin-top: 90px !important; } .margin-b-zero { margin-bottom: 0 !important; } .padding-top-zero { padding-top: 0 !important; } .padding-top-30 { padding-top: 30px !important; } .padding-top-60 { padding-top: 60px !important; } .padding-top-90 { padding-top: 90px !important; } .padding-b-zero { padding-bottom: 0 !important; } .margin-top-100 { margin-top: 100px !important; } .padding-top-100 { padding-top: 100px !important; } .padding-right-zero { padding-right: 0 !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-bottom-30 { margin-bottom: 30px !important; } .margin-bottom-60 { margin-bottom: 60px !important; } .margin-bottom-90 { margin-bottom: 90px !important; } .padding-bottom-zero { padding-bottom: 0 !important; } .padding-bottom-10 { padding-bottom: 10px !important; } .padding-bottom-20 { padding-bottom: 20px !important; } .padding-bottom-30 { padding-bottom: 30px !important; } .padding-bottom-50 { padding-bottom: 50px !important; } .padding-bottom-60 { padding-bottom: 60px !important; } .padding-bottom-90 { padding-bottom: 90px !important; } .margin-bottom-100 { margin-bottom: 100px !important; } .padding-bottom-100 { padding-bottom: 100px !important; } .bg-none { background: transparent !important; } .bg-white { background: #fff; } .bg-grey { background: #f8f8f8; } .bg-shark { background: #2a2a2a; } .bg-dark-jungle { background: #222; } body.boxed-v { background: url(../images/icons/pattern02.jpg) #fff; } .dark { background: #222; } .dark .bg-grey { background: #2a2a2a; } .dark .dark-bottom-border { border-bottom: 1px solid #494949; } body.boxed-v { background: url(../images/icons/pattern02.jpg) #fff; } body.dark.boxed-v { background: url(../images/icons/pattern03.jpg) #fff; } body.boxed-v #wrapper { background: #fff; } body.dark.boxed-v #wrapper { background: #222; } .no-bg:after, .no-bg:before, .no-bg { background: transparent !important; } .border-zero { border: 0 !important; } .color-shark { color: #2a2a2a !important; } .color-stack { color: #8f8f8f !important; } .dark .color-shark { color: #fff !important; } .playfair { font-family: "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .no-float { float: none !important; } /*------------------------------------------------------------------ 1-18. error section Styles / .error-section -------------------------------------------------------------------*/ .error-section { color: #8f8f8f; position: relative; line-height: 24px; } .error-section:after { background: rgba(0, 0, 0, .6); content: ""; } .error-section.style2 { color: #c2c2c2; } .error-section.style2:after { display: none; } .error-section.style2 .logo { margin: 0 0 68px; } .error-section.style2 .text-uppercase { color: #fff; } .error-section.style2 .error-info { margin: 0 0 -2px; } .error-section.style2 .text { margin: 0 0 30px; } .error-section.style2 .error-form { margin: 0 auto 48px; } .error-section.style2 .error-form .form-control { width: 82.5%; } .error-section.style2 .error-form .btn-slider { width: 17.1%; } .error-section.style3 { color: #c2c2c2; } .error-section.style3:after { display: none; } .error-section.style3 .logo { margin: 0 0 61px; } .error-section.style3 .text { margin: 0; } .error-section.style3 .text-uppercase { color: #fff; } .error-section.style3 .wedding-nav .countdown-section { background: none; } .error-section.style4 { color: #c2c2c2; } .error-section.style4 .logo { margin: 0 0 59px; } .error-section.style4 .text { margin: 0; } .error-section.style4:after { background: rgba(0, 0, 0, .4); } .error-section.style4 h1 { font-size: 30px; margin: 0 0 55px; } .error-section.style4 .footer-social a { opacity: 1; } .error-section.style4 .footer-social a:hover { color: #e74c3c; } .error-section.style4 .text-uppercase { color: #fff; } .error-section.style4 .wedding-nav { margin: 0 0 52px; } .error-section.style4 .wedding-nav .countdown-section { padding: 0; border: 0; height: auto; color: #fff; margin: 0 10px; overflow: hidden; background: none; position: relative; } .error-section.style4 .wedding-nav .countdown-section .countdown-amount { display: block; margin: 0 0 22px; font-size: 68px; font-weight: 400; line-height: 130px; border-radius: 100%; width: 134px; height: 134px; border: 2px solid #fff; background: rgba(255, 255, 255, .1); } .error-section.style4 .wedding-nav .countdown-section .countdown-period { display: block; position: relative; right: auto; left: auto; bottom: auto; padding: 0; color: #fff; background: none; } .error-section.style5 .container { padding-top: 0; padding-bottom: 0; } .error-section.style5 .container:before { min-height: inherit; } .error-section.style5 .holder { padding-top: 30px; padding-bottom: 30px; } .error-section.style5 h1 { color: #fff; font-size: 20px; line-height: 28px; letter-spacing: 4px; margin: 0 0 47px; } .error-section.style5 .wedding-nav { margin: 0; } .error-section.style5 .wedding-nav .countdown-section { padding: 0; border: 0; color: #fff; height: auto; margin: 0 10px; overflow: hidden; background: none; position: relative; } .error-section.style5 .wedding-nav .countdown-section .countdown-amount { font-weight: 400; font-size: 68px; line-height: 70px; margin: 0 0 52px; } .error-section.style5 .wedding-nav .countdown-section .countdown-period { display: block; position: relative; right: auto; left: auto; bottom: auto; padding: 0; background: none; color: #fff; } .error-section .container { padding-bottom: 30px; white-space: nowrap; position: relative; padding-top: 30px; z-index: 10; } .error-section .container:before { vertical-align: middle; display: inline-block; margin: 0 0 0 -4px; overflow: hidden; height: 100%; content: ""; width: 1px; } .error-section .container .holder { vertical-align: middle; display: inline-block; white-space: normal; max-width: 890px; } .error-section .logo { display: inline-block; vertical-align: top; margin: 0 0 57px; width: 101px; float: none; } .error-section h1 { color: #fff; letter-spacing: 6px; line-height: 36px; margin: 0 0 19px; font-size: 28px; font-weight: 400; } .error-section h2 { letter-spacing: 3px; line-height: 22px; margin: 0 0 26px; font-size: 18px; font-weight: 400; } .error-section .error-info { letter-spacing: 5px; line-height: 34px; margin: 0 0 57px; font-size: 28px; color: #f9feff; } .error-section .error-info .error-code { color: #fff; display: block; font-weight: 700; font-size: 162px; line-height: 168px; letter-spacing: 3px; font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .error-section .text { padding: 0 0 19px; } .error-section .text a:hover { text-decoration: none; } .error-section .text a:hover { color: #8f8f8f; } .error-section .text2 { font-size: 20px; overflow: hidden; margin: 0 0 44px; line-height: 28px; letter-spacing: 4px; } .error-section .text2 p { margin: 0 0 10px; } .error-section .btn-list { margin: 0; } .error-section .btn-list li { vertical-align: top; padding: 0 4px 10px; } .error-section .footer-social li { padding: 0; margin: 0 17px; } .error-section .footer-social a { color: #fff; width: auto; height: auto; opacity: .2; font-size: 20px; background: none; -webkit-transition: all .3s ease; transition: all .3s ease; } .error-section .footer-social a:hover { background: transparent !important; } .error-section .footer-social a:hover { opacity: 1; } .error-section .wedding-nav { margin: 0 0 52px; text-transform: uppercase; font: 14px/18px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .error-section .wedding-nav .countdown-section { margin: 0 10px; color: #fff; border-radius: 0; overflow: hidden; position: relative; padding: 15px 10px 10px; border: 2px solid #fff; width: 134px; height: 166px; display: inline-block; vertical-align: top; } .error-section .wedding-nav .countdown-section .countdown-amount { display: block; font-size: 68px; font-weight: 700; line-height: 70px; margin: 8px 0 7px; } .error-section .wedding-nav .countdown-section .countdown-period { display: block; position: absolute; right: 0; left: 0; bottom: 0; color: #222; background: #fff; padding: 13px 10px; } .error-section .btn-down { color: #fff; position: absolute; bottom: 46px; left: 50%; z-index: 999; font-size: 60px; line-height: 40px; margin: 0 0 0 -20px; overflow: hidden; -webkit-transition: all .3s ease; transition: all .3s ease; } /*------------------------------------------------------------------ 1-19. lost block Styles / .lost-block -------------------------------------------------------------------*/ .lost-block { text-align: center; padding-top: 196px; padding-bottom: 209px; } .lost-block h2 { margin: 0 0 60px; text-transform: uppercase; font: 900 100px/90px "Lato", Georgia, "Times New Roman", Times, serif; text-shadow: 2px 2px 3px rgba(0, 0, 0, .5); } .lost-block h2 span { color: #2a2a2a; } .dark .lost-block h2 span { color: #8f8f8f; } /*------------------------------------------------------------------ 1-20. btn back Styles / .btn-back -------------------------------------------------------------------*/ .btn-back { border-radius: 0; padding: 8px 20px; text-align: center; position: relative; -webkit-transition: all .3s ease; transition: all .3s ease; text-transform: uppercase; border: 1px solid transparent; display: inline-block; vertical-align: top; } .btn-back .fa { display: inline-block; vertical-align: middle; font-size: 16px; margin: -3px 4px 0 0; } .btn-back:hover { color: #fff; } /*------------------------------------------------------------------ 1-21. error form Styles / .error-form -------------------------------------------------------------------*/ .error-form { border: 1px solid #fff; width: 360px; margin: 0 auto 18px; display: block; } .error-form .form-control { border: 0; padding: 6px 10px 6px 21px; float: left; width: 70%; border-radius: 0; font-size: 12px; line-height: 18px; height: 36px; color: #fff; background: none; } .error-form .form-control ::-webkit-input-placeholder { color: #fff; } .error-form .form-control ::-moz-placeholder { opacity: 1; color: #fff; } .error-form .form-control :-moz-placeholder { color: #fff; } .error-form .form-control :-ms-input-placeholder { color: #fff; } .error-form .form-control .placeholder { color: #fff; } .error-form ::-webkit-input-placeholder { color: #fff; } .error-form ::-moz-placeholder { opacity: 1; color: #fff; } .error-form :-moz-placeholder { color: #fff; } .error-form :-ms-input-placeholder { color: #fff; } .error-form .placeholder { color: #fff; } .error-form .btn { float: right; width: 29.5%; height: 36px; color: #000; font-size: 12px; font-weight: 700; line-height: 18px; background: #fff; } /*------------------------------------------------------------------ 1-22. contact block Styles / .contact-block -------------------------------------------------------------------*/ .contact-block { padding-top: 100px; padding-bottom: 100px; } .contact-block .contact-map { margin-bottom: 94px; } /*------------------------------------------------------------------ 1-23. contact message Styles / .contact-message -------------------------------------------------------------------*/ .contact-message { font-size: 16px; line-height: 26px; font-weight: 300; } .contact-message h2 { color: #222; margin: 0 0 17px; font: 700 32px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .contact-message h2 { color: #fff; } .contact-message p { margin: 0 0 57px; } /*------------------------------------------------------------------ 1-24. contact form2 Styles / .contact-form2 -------------------------------------------------------------------*/ .contact-form2 { margin: 0; } .contact-form2 .form-control { margin: 0 0 10px; box-shadow: none; border-radius: 0; height: 40px; resize: none; color: #8f8f8f; padding: 6px 16px; background: none; border-color: #eee; } .contact-form2 .form-control ::-webkit-input-placeholder { color: #8f8f8f; } .contact-form2 .form-control ::-moz-placeholder { opacity: 1; color: #8f8f8f; } .contact-form2 .form-control :-moz-placeholder { color: #8f8f8f; } .contact-form2 .form-control :-ms-input-placeholder { color: #8f8f8f; } .contact-form2 .form-control .placeholder { color: #8f8f8f; } .dark .contact-form2 .form-control { color: #fff; border-color: #494949; } .dark .contact-form2 .form-control ::-webkit-input-placeholder { color: #fff; } .dark .contact-form2 .form-control ::-moz-placeholder { opacity: 1; color: #fff; } .dark .contact-form2 .form-control :-moz-placeholder { color: #fff; } .dark .contact-form2 .form-control :-ms-input-placeholder { color: #fff; } .dark .contact-form2 .form-control .placeholder { color: #fff; } .contact-form2 .form-control:focus, .contact-form2 .form-control:hover { box-shadow: none; border-color: #eee; } .contact-form2 textarea { height: 100px !important; } .contact-form2 .btn-f-info:hover { background: #222; border-color: #222; } .dark .contact-form2 .btn-f-info:hover { background: #191919; border-color: #191919; } /*------------------------------------------------------------------ 1-25. login form2 Styles / .login-form2 -------------------------------------------------------------------*/ .login-form2 { margin: 0 auto; font-size: 18px; padding: 90px 0; max-width: 500px; line-height: 20px; } .login-form2 .form-control { resize: none; height: 40px; color: #8f8f8f; font-size: 12px; background: none; margin: 0 0 10px; box-shadow: none; padding: 6px 16px; border-radius: 0; text-transform: uppercase; border: 1px solid #ddd; } .login-form2 .form-control ::-webkit-input-placeholder { color: #8f8f8f; } .login-form2 .form-control ::-moz-placeholder { opacity: 1; color: #8f8f8f; } .login-form2 .form-control :-moz-placeholder { color: #8f8f8f; } .login-form2 .form-control :-ms-input-placeholder { color: #8f8f8f; } .login-form2 .form-control .placeholder { color: #8f8f8f; } .dark .login-form2 .form-control { border-color: #494949; } .login-form2 .form-control:focus, .login-form2 .form-control:hover { box-shadow: none; border-color: #eee; } .login-form2 a { color: #2a2a2a; letter-spacing: 1px; text-transform: uppercase; font: 600 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-transition: all .4s ease; transition: all .4s ease; } .dark .login-form2 a { color: #8f8f8f; } .login-form2 a:hover { text-decoration: none; } .login-form2 p { margin: 0 0 15px; } .login-form2 .btn-f-info { border: 0; width: 100%; padding: 10px; display: block; margin: 0 0 20px; background: #2a2a2a; } /*------------------------------------------------------------------ 1-26. contact address Styles / .contact-address -------------------------------------------------------------------*/ .contact-address { color: #2a2a2a; overflow: hidden; font-size: 14px; line-height: 24px; } .dark .contact-address { color: #fff; } .contact-address .alignleft { float: left; margin: 0 5.3% 0 0; } .contact-address .contact-info { overflow: hidden; padding: 7px 0 0 7.2%; } .contact-address h3 { margin: 0 0 6px; position: relative; letter-spacing: 2px; text-transform: uppercase; font: 600 12px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .contact-address h3 .fa { position: absolute; left: -40px; top: 2px; font-size: 18px; } .contact-address .tel-box { overflow: hidden; margin: 0 0 10px; } .contact-address .tel { display: block; } .contact-address a { color: #8f8f8f; } .contact-address a:hover { text-decoration: none; } .contact-address address { display: block; margin: 0 0 21px; line-height: 24px; } /*------------------------------------------------------------------ 1.27. page banner styles / .page-banner -------------------------------------------------------------------*/ .shop-form { float: right; width: 271px; padding: 4px 0 0; } .shop-form .jcf-select { background: none; border: solid #ddd; border-width: 1px 0; width: 100%; height: 41px; margin: 0; } .dark .shop-form .jcf-select { border-color: #494949; } .shop-form .jcf-select .jcf-select-text { color: #8f8f8f; font-size: 14px; line-height: 36px; font-weight: 300; margin: 0 32px 0 13px; } .shop-form .jcf-select-opener { position: relative; position: absolute; } .shop-form .jcf-select-opener:before { position: absolute; content: ""; top: 50%; bottom: auto; left: 50%; right: auto; } .shop-form .jcf-select-opener:before { width: 0; height: 0; border-style: solid; border-width: 10px 6px 0 6px; border-color: #ddd transparent transparent transparent; margin: -6px 0 0 -13px; } /*------------------------------------------------------------------ 1.28. cart form styles / .cart-form -------------------------------------------------------------------*/ .cart-form { padding: 22px 0 17px; } .cart-form .form-col { float: left; width: 16.2%; margin: 0 3.3% 0 0; } .cart-form .form-col.color { width: 30%; } .cart-form label { color: #2a2a2a; display: block; margin: 0 0 8px; line-height: 18px; } .dark .cart-form label { color: #fff; } .cart-form .jcf-select { width: 100%; height: 38px; min-width: inherit; border-color: #ddd; } .dark .cart-form .jcf-select { background: none; border-color: #494949; } .cart-form .jcf-select .jcf-select-text { color: #8f8f8f; line-height: 35px; margin: 0 30px 0 9px; } .cart-form .jcf-select .jcf-select-opener { position: relative; position: absolute; } .cart-form .jcf-select .jcf-select-opener:before { position: absolute; content: ""; top: 50%; bottom: auto; left: 50%; right: auto; } .cart-form .jcf-select .jcf-select-opener:before { color: #8f8f8f; font-family: "FontAwesome"; content: "\f107"; margin: -14px 0 0 -7px; } .cart-form .btn { border: 0; float: left; color: #fff; font-size: 10px; margin: 24px 0 0; background: #2a2a2a; width: 27%; height: 38px; } .dark .cart-form .btn { background: #191919; } /*------------------------------------------------------------------ 1.29. quantity form styles / .quantity-form -------------------------------------------------------------------*/ .quantity-form { margin: 0 auto; display: block; background: #fff; border: 1px solid #ddd; width: 131px; height: 31px; } .dark .quantity-form { color: #fff; background: #191919; border-color: #494949; } .quantity-form .decrease { float: left; font-size: 22px; color: #2a2a2a; line-height: 27px; width: 32px; height: 29px; } .dark .quantity-form .decrease { color: #fff; } .quantity-form .decrease:hover { background: #ddd; text-decoration: none; } .dark .quantity-form .decrease:hover { background: none; } .quantity-form .increase { float: left; color: #2a2a2a; font-size: 18px; line-height: 27px; width: 32px; height: 29px; } .dark .quantity-form .increase { color: #fff; } .quantity-form .increase:hover { background: #ddd; text-decoration: none; } .dark .quantity-form .increase:hover { background: none; } .quantity-form .form-control { float: left; width: 65px; height: 29px; font-size: 12px; border: solid #ddd; border-width: 0 1px; border-radius: 0; box-shadow: none; color: #2a2a2a; text-align: center; } .dark .quantity-form .form-control { color: #fff; background: #191919; border-color: #494949; } .dark .quantity-form ::-webkit-input-placeholder { color: #2a2a2a; } .dark .quantity-form ::-moz-placeholder { opacity: 1; color: #2a2a2a; } .dark .quantity-form :-moz-placeholder { color: #2a2a2a; } .dark .quantity-form :-ms-input-placeholder { color: #2a2a2a; } .dark .quantity-form .placeholder { color: #2a2a2a; } .quantity-form ::-webkit-input-placeholder { color: #2a2a2a; } .quantity-form ::-moz-placeholder { opacity: 1; color: #2a2a2a; } .quantity-form :-moz-placeholder { color: #2a2a2a; } .quantity-form :-ms-input-placeholder { color: #2a2a2a; } .quantity-form .placeholder { color: #2a2a2a; } /*------------------------------------------------------------------ 1.30. apply form styles / .apply-form -------------------------------------------------------------------*/ .apply-form { float: left; width: 416px; } .apply-form .form-control { border-radius: 0; float: left; color: #8f8f8f; font-size: 13px; line-height: 18px; box-shadow: none; border-color: #ddd; padding: 6px 22px; width: 77.6%; height: 40px; } .apply-form .form-control ::-webkit-input-placeholder { color: #8f8f8f; } .apply-form .form-control ::-moz-placeholder { opacity: 1; color: #8f8f8f; } .apply-form .form-control :-moz-placeholder { color: #8f8f8f; } .apply-form .form-control :-ms-input-placeholder { color: #8f8f8f; } .apply-form .form-control .placeholder { color: #8f8f8f; } .dark .apply-form .form-control { color: #fff; background: #191919; border-color: #494949; } .dark .apply-form .form-control ::-webkit-input-placeholder { color: #fff; } .dark .apply-form .form-control ::-moz-placeholder { opacity: 1; color: #fff; } .dark .apply-form .form-control :-moz-placeholder { color: #fff; } .dark .apply-form .form-control :-ms-input-placeholder { color: #fff; } .dark .apply-form .form-control .placeholder { color: #fff; } .apply-form .btn { border: 0; margin: 0; float: right; color: #fff; padding: 6px 12px; background: #2a2a2a; width: 20.2%; height: 40px; } /*------------------------------------------------------------------ 1.31. update form styles / .update-form -------------------------------------------------------------------*/ .update-form { margin: 0; } .update-form .jcf-select { margin: 0 0 6px; border-color: #ddd; width: 100%; height: 40px; } .dark .update-form .jcf-select { border-color: #494949; background: #191919; } .update-form .jcf-select .jcf-select-text { color: #8f8f8f; font-size: 14px; line-height: 35px; margin: 0 42px 0 21px; } .dark .update-form .jcf-select .jcf-select-text { color: #fff; } .update-form .jcf-select .jcf-select-opener { position: relative; position: absolute; } .update-form .jcf-select .jcf-select-opener:before { position: absolute; content: ""; top: 50%; bottom: auto; left: 50%; right: auto; } .update-form .jcf-select .jcf-select-opener:before { content: "\f107"; font-size: 16px; margin: -12px 0 0 -25px; font-family: "FontAwesome"; } .update-form .form-control { width: 100%; height: 40px; border-radius: 0; font-size: 14px; line-height: 20px; margin: 0 0 6px; padding: 6px 20px; resize: none; color: #8f8f8f; border-color: #ddd; } .update-form .form-control ::-webkit-input-placeholder { color: #8f8f8f; } .update-form .form-control ::-moz-placeholder { opacity: 1; color: #8f8f8f; } .update-form .form-control :-moz-placeholder { color: #8f8f8f; } .update-form .form-control :-ms-input-placeholder { color: #8f8f8f; } .update-form .form-control .placeholder { color: #8f8f8f; } .dark .update-form .form-control { border-color: #494949; background: #191919; } .dark .update-form .form-control ::-webkit-input-placeholder { color: #fff; } .dark .update-form .form-control ::-moz-placeholder { opacity: 1; color: #fff; } .dark .update-form .form-control :-moz-placeholder { color: #fff; } .dark .update-form .form-control :-ms-input-placeholder { color: #fff; } .dark .update-form .form-control .placeholder { color: #fff; } .dark .update-form ::-webkit-input-placeholder { color: #fff; } .dark .update-form ::-moz-placeholder { opacity: 1; color: #fff; } .dark .update-form :-moz-placeholder { color: #fff; } .dark .update-form :-ms-input-placeholder { color: #fff; } .dark .update-form .placeholder { color: #fff; } .update-form textarea.form-control { height: 100px; } .update-form .btn { border: 0; color: #fff; margin: 0 0 6px; padding: 6px 12px; background: #2a2a2a; width: 100%; height: 40px; } .dark .update-form .btn { background: #191919; } .update-form .label-checks { display: block; margin: 0 0 6px; padding: 7px 0 0; font-size: 14px; line-height: 18px; font-weight: 400; } .update-form .label-checks .txt { color: #2a2a2a; display: inline-block; vertical-align: top; } .dark .update-form .label-checks .txt { color: #fff; } .update-form input[type="checkbox"] { margin: 0 7px 0 0; } /*------------------------------------------------------------------ 1.32. rang form styles / .rang-form -------------------------------------------------------------------*/ .rang-form { overflow: hidden; } .rang-form .num { display: block; margin: 0 0 20px; padding: 20px 0 0; } .rang-form .btn-form { color: #fff; font-size: 13px; border-radius: 0; line-height: 16px; padding: 5px 20px; background: #2a2a2a; text-transform: uppercase; } .dark .rang-form .btn-form { background: #191919; } /*------------------------------------------------------------------ 1.33. rsvpform section styles / .rsvpform-section -------------------------------------------------------------------*/ .rsvpform-section { overflow: hidden; text-align: center; position: relative; padding: 96px 0 100px; position: relative; } .rsvpform-section:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .rsvpform-section:before { background: rgba(0, 0, 0, .8); } .rsvpform-section .parallax-holder { z-index: -1; } .rsvpform-section .rsvp-form { overflow: hidden; max-width: 570px; margin: 0 auto; padding: 15px 0 0; } .rsvpform-section .row-holder { margin: 0 0 18px; overflow: hidden; } .rsvpform-section ::-webkit-input-placeholder { color: #fff; } .rsvpform-section ::-moz-placeholder { color: #fff; opacity: 1; } .rsvpform-section :-ms-input-placeholder { color: #fff; } .rsvpform-section input { margin: 0; color: #fff; float: left; width: 100%; height: 46px; padding: 10px 15px; border: solid #fff; border-width: 0 0 2px; background: transparent; font: 16px/20px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .rsvpform-section .jcf-select { display: block; width: 100%; height: 46px; margin: 0; background: transparent; border: solid #fff; border-width: 0 0 2px; } .rsvpform-section .jcf-select .jcf-select-text { color: #fff; text-align: left; padding: 10px 15px; margin: 0 35px 0 0; font: 16px/20px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .rsvpform-section .jcf-select .jcf-select-opener { background: transparent; } .rsvpform-section .jcf-select .jcf-select-opener:after { top: 2px; color: #fff; left: -14px; font-size: 28px; position: absolute; font-family: "FontAwesome"; content: "\f107"; } /*------------------------------------------------------------------ 1.34. comment form styles / .comment-form -------------------------------------------------------------------*/ .comment-form { overflow: hidden; margin: 0 0 104px; } .comment-form h4 { margin: 0 0 24px; } .comment-form .form-row { overflow: hidden; margin: 0 0 31px; } .comment-form .input { width: 31.7%; float: left; height: 40px; color: #8f8f8f; outline: none; font-size: 13px; line-height: 20px; padding: 10px 16px; margin: 0 0 0 2.4%; background: #f8f8f8; border: 1px solid #ddd; } .dark .comment-form .input { background: #191919; border-color: #494949; } .comment-form .input:first-child { margin: 0; } .comment-form ::-webkit-input-placeholder { color: #8f8f8f; } .comment-form ::-moz-placeholder { color: #8f8f8f; opacity: 1; } .comment-form :-ms-input-placeholder { color: #8f8f8f; } .comment-form textarea { float: left; resize: none; outline: none; color: #8f8f8f; overflow: auto; font-size: 13px; margin: 0 0 30px; line-height: 20px; padding: 10px 20px; background: #f8f8f8; width: 99.8% !important; height: 111px !important; border: 1px solid #ddd; } .dark .comment-form textarea { background: #191919; border-color: #494949; } .comment-form textarea:first-child { margin: 0; } .comment-form .btn { color: #fff; } .comment-form .btn:hover { background: #cd2122; } /*------------------------------------------------------------------ 1.35. contact form styles / .contact-form -------------------------------------------------------------------*/ .contact-form { z-index: 5; color: #fff; padding: 92px 0 100px; } .contact-form .parallax-holder, .contact-form .stretch { z-index: -1; } .contact-form .form-control { color: #fff; height: 40px; font-size: 12px; margin: 0 0 30px; border-radius: 0; background: transparent; text-transform: uppercase; } .contact-form .form-control.error { color: red; border-color: red; background: url(../images/icons/iconCaution.png) no-repeat 98% 50%; } .contact-form .form-control.error::-webkit-input-placeholder { color: red; } .contact-form .form-control.error:-moz-placeholder { color: red; } .contact-form .form-control.error::-moz-placeholder { color: red; opacity: 1; } .contact-form .form-control.error:-ms-input-placeholder { color: red; } .contact-form .form-control::-webkit-input-placeholder { color: #fff; } .contact-form .form-control:-moz-placeholder { color: #fff; } .contact-form .form-control::-moz-placeholder { color: #fff; opacity: 1; } .contact-form .form-control:-ms-input-placeholder { color: #fff; } .contact-form textarea.form-control { resize: none; overflow: auto; width: 100% !important; height: 100px !important; } .contact-form .btn-submit { color: #fff; font-size: 13px; line-height: 20px; padding: 10px 20px; text-transform: uppercase; border: 1px solid transparent; -webkit-transition: all .4s ease; transition: all .4s ease; } .contact-form .btn-submit:hover { border-color: #fff; background: transparent; } .contact-form .overlay { top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(0, 0, 0, .5); position: absolute; } /*------------------------------------------------------------------ 1.36. done massage styles / .done-massage -------------------------------------------------------------------*/ .done-massage { background: #dff0d8; color: #468847; border: 1px solid #d6e9c6; border-radius: 10px; text-align: center; padding: 10px 5px; font-size: 14px; margin: 0 auto; display: none; width: 100%; } /*------------------------------------------------------------------ 1.37. form loading styles / .form-loading -------------------------------------------------------------------*/ .form-loading { float: right; height: 31px; width: 31px; display: none; margin-top: 8px; margin-left: 10px; background: url(../images/icons/loading.gif) no-repeat 1px; } /*------------------------------------------------------------------ 1-38. testimonials Styles / .testimonials -------------------------------------------------------------------*/ .testimonials { padding: 10px; overflow: hidden; background: #f8f8f8; margin-bottom: 30px; border-radius: 20px; border: 1px solid #eee; } .dark .testimonials { border-color: #494949; background: #191919; } .testimonials blockquote { margin: 0; border-left: 0; padding: 0 0 10px; position: relative; } .testimonials blockquote:before { top: 50%; left: -50px; font-size: 90px; content: "\201C"; line-height: 90px; margin: -15px 0 0; position: absolute; font-weight: bolder; font-family: Helvetica, Arial, sans-serif; } .testimonials img { border-radius: 10px; } .testimonials .author { font-size: 13px; padding-left: 60px; padding: 0 0 0 3px; text-transform: uppercase; } .testimonials .img-box { width: 25%; display: inline-block; vertical-align: middle; } .testimonials .holder { width: 73%; display: inline-block; vertical-align: middle; padding: 10px 10px 10px 50px; } /*------------------------------------------------------------------ 1-39. blank page Styles / .blank-page -------------------------------------------------------------------*/ .blank-page { font: 18px/26px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .blank-page p { margin-bottom: 30px; } .blank-page .btn { border-radius: 5px; } /*------------------------------------------------------------------ 1-40. faq section Styles / .faq-section -------------------------------------------------------------------*/ .faq-section li.active .fa { top: 5px; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); } .faq-section .beans-slide { padding: 20px; } .faq-section ol { margin: 0 0 10px; overflow: hidden; } .faq-section ol li { margin: 0 0 5px; } .faq-section p { margin: 0 0 20px; font: 500 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .faq-section .holder h2 { padding: 10px; margin: 0 0 20px; margin: 0 0 10px; position: relative; letter-spacing: 1px; text-transform: uppercase; border: 1px solid #ececec; font: 600 14px/30px "Lato", Georgia, "Times New Roman", Times, serif; } .faq-section .holder h2 .fa { top: 15px; left: 10px; font-size: 22px; position: absolute; -webkit-transition: all .4s ease; transition: all .4s ease; } .faq-section .faq-section .beans-accordion li.active .holder h2 .fa { top: 16px; } .faq-section h3 { color: #222; margin: 0 0 20px; position: relative; text-transform: capitalize; font: 700 24px/30px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .faq-section h3 { color: #fff; } .faq-section h3 .add { font-size: 14px; line-height: 18px; vertical-align: middle; } .faq-section .smoothanchor, .faq-section .opener { color: #222; display: block; padding: 0 0 0 18px; -webkit-transition: all .4s ease; transition: all .4s ease; } .dark .faq-section .smoothanchor, .dark .faq-section .opener { color: #fff; } .faq-section .smoothanchor:hover, .faq-section .opener:hover { text-decoration: none; } .faq-section .box { padding: 20px; } .faq-section .beans-accordion { border-radius: 5px; } .faq-section .beans-accordion.style2 { margin: 0 0 60px; } .faq-section .beans-accordion.style2 > li { margin: 0 0 2px; } .faq-section .beans-accordion.style2 > li.active .fa { top: 16px; } .faq-section .beans-accordion.style2 .opener { padding: 10px; } .faq-section .beans-accordion.style2 h2 { margin: 0; font-size: 14px; padding: 0 0 0 17px; } .faq-section .beans-accordion.style2 h2 .fa { top: 14px; left: 10px; font-size: 20px; } .faq-section.style3 .smoothanchor { padding: 0; display: inline; } .faq-section.style3 .holder h2 { font-size: 20px; margin: 0 0 10px; padding: 10px 25px; letter-spacing: 1px; font: 600 14px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .faq-section.style3 .holder h2 .fa { top: 12px; left: 10px; font-size: 18px; } .faq-section.style3 .divider-line2 { overflow: visible; } .faq-section.style3 .divider-line2 .smoothanchor { float: right; font-size: 22px; color: #e3e3e3; margin: -33px 0 0; text-decoration: none; } .faq-section.style3 .divider-line2 .smoothanchor:hover { text-decoration: none; } .faq-section.style3 .divider-line2:first-child { margin-top: 40px; } /*------------------------------------------------------------------ 1-41. divider section Styles / .divider-section -------------------------------------------------------------------*/ .divider-section { margin-bottom: 60px; overflow: hidden; } .divider-section .heading-v5 { margin: 0 0 30px; } .divider-section p { margin: 0 0 30px; } .divider-line1 { height: 1px; overflow: hidden; text-align: center; margin-bottom: 30px; border-bottom: 1px solid #eee; } .divider-line2 { height: 9px; overflow: hidden; text-align: center; margin-bottom: 30px; background: url("../images/divider-line1.png") no-repeat 50% 100%; } .divider-line3 { height: 30px; overflow: hidden; text-align: center; margin-bottom: 30px; background: url("../images/h-line.jpg") repeat-x 0 50%; } .divider-line3 i { width: 27px; height: 27px; color: #fff; font-size: 11px; line-height: 27px; text-align: center; border-radius: 100%; background-color: #d3d3d3; } .divider-line4 { height: 45px; overflow: hidden; text-align: center; margin-bottom: 30px; background: url("../images/h-line.jpg") repeat-x 0 50%; } .divider-line4 i { width: 45px; height: 45px; color: #d3d3d3; font-size: 20px; line-height: 45px; text-align: center; border-radius: 100%; vertical-align: middle; background-color: #fff; } .divider-line5 { height: 30px; overflow: hidden; text-align: center; margin-bottom: 30px; background: url("../images/h-line.jpg") repeat-x 0 50%; } .divider-line5 i { width: 30px; height: 30px; color: #d3d3d3; font-size: 18px; overflow: hidden; line-height: 28px; text-align: center; border-radius: 100%; vertical-align: middle; background-color: #fff; border: 1px solid #d3d3d3; } .divider-line6 { height: 5px; overflow: hidden; text-align: center; margin-bottom: 30px; background: url("../images/shadow1.png") repeat-x 0 50%; } .divider-line7 { height: 1px; overflow: hidden; text-align: center; margin-bottom: 30px; border-bottom: 1px dashed #e3e3e3; } .divider-line8 { height: 1px; overflow: hidden; text-align: center; margin-bottom: 30px; border-bottom: 1px dotted #d9d9d9; } .divider-line9 { height: 10px; overflow: hidden; text-align: center; margin-bottom: 30px; background: url("../images/shadow2.png") no-repeat 50% 50%; } .divider-line10 { height: 8px; text-align: center; margin-bottom: 30px; background: url("../images/hcross-lines.jpg") repeat-x 0 50%; } .divider-line11 { height: 5px; overflow: hidden; text-align: center; margin-bottom: 30px; background: url("../images/h-line5.png") no-repeat 50% 50%; } .divider-line12 { height: 11px; text-align: center; margin-bottom: 30px; background: url("../images/h-line6.png") no-repeat 50% 50%; } .divider-line13 { height: 7px; overflow: hidden; text-align: center; margin-bottom: 30px; background: url("../images/h-line7.png") no-repeat 50% 50%; } .panel-default > .panel-heading { padding: 15px; } /*------------------------------------------------------------------ 1-42. blockquote Styles / .blockquote-style1 -------------------------------------------------------------------*/ .blockquote-style1 { border: 0; color: #2a2a2a; margin: 0 0 30px; background: #f3f3f3; padding: 34px 30px 24px 28px; } .dark .blockquote-style1 { color: #fff; background: #191919; } .blockquote-style1 q { quotes: none; display: block; text-indent: 20px; position: relative; font: 300 italic 24px/31px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .blockquote-style1 q:after { top: -10px; left: -16px; content: "\""; color: #2a2a2a; font-size: 46px; font-weight: 900; position: absolute; } .blockquote-style2 { margin: 0 0 30px; background: #f3f3f3; padding: 22px 20px 20px 36px; border-left: 4px solid transparent; } .dark .blockquote-style2 { color: #fff; background: #191919; } .blockquote-style2 q { text-indent: 0; font-size: 18px; line-height: 30px; } .blockquote-style2 q:after { display: none; } /*------------------------------------------------------------------ 1-43. list style -------------------------------------------------------------------*/ .list-style2 { padding: 0; font-size: 15px; margin: 0 0 60px; line-height: 1.8; list-style: none; } .list-style2 li { margin: 0 0 5px; position: relative; padding: 0 0 0 20px; } .list-style2 li:after { left: 0; top: 4px; font-size: 10px; content: "\f069"; position: absolute; font-family: "FontAwesome"; } .list-style3 { padding: 0; font-size: 15px; margin: 0 0 60px; line-height: 1.8; list-style: none; } .list-style3 li { margin: 0 0 5px; position: relative; padding: 0 0 0 20px; } .list-style3 li:after { left: 0; top: 4px; font-size: 12px; content: "\f14a"; position: absolute; font-family: "FontAwesome"; } .list-style4 { padding: 0; font-size: 15px; margin: 0 0 60px; line-height: 1.8; list-style: none; } .list-style4 li { margin: 0 0 5px; position: relative; padding: 0 0 0 20px; } .list-style4 li:after { left: 0; top: 4px; font-size: 10px; content: "\f00c"; position: absolute; font-family: "FontAwesome"; } .list-style5 { padding: 0; font-size: 15px; margin: 0 0 60px; line-height: 1.8; list-style: none; } .list-style5 li { margin: 0 0 5px; position: relative; padding: 0 0 0 20px; } .list-style5 li:after { left: 0; top: 4px; font-size: 12px; content: "\f046"; position: absolute; font-family: "FontAwesome"; } .list-style6 { padding: 0; font-size: 15px; margin: 0 0 60px; line-height: 1.8; list-style: none; } .list-style6 li { margin: 0 0 5px; position: relative; padding: 0 0 0 20px; } .list-style6 li:after { left: 0; top: 4px; font-size: 12px; content: "\f058"; position: absolute; font-family: "FontAwesome"; } .list-style7 { padding: 0; font-size: 15px; margin: 0 0 60px; line-height: 1.8; list-style: none; } .list-style7 li { margin: 0 0 5px; position: relative; padding: 0 0 0 20px; } .list-style7 li:after { left: 0; top: 4px; font-size: 12px; content: "\f084"; position: absolute; font-family: "FontAwesome"; } .list-style8 { padding: 0; font-size: 15px; margin: 0 0 60px; line-height: 1.8; list-style: none; } .list-style8 li { margin: 0 0 5px; position: relative; padding: 0 0 0 20px; } .list-style8 li:after { left: 0; top: 4px; font-size: 12px; content: "\f064"; position: absolute; font-family: "FontAwesome"; } .list-style9 { padding: 0; font-size: 15px; margin: 0 0 60px; line-height: 1.8; list-style: none; } .list-style9 li { margin: 0 0 5px; position: relative; padding: 0 0 0 20px; } .list-style9 li:after { left: 0; top: 4px; font-size: 12px; content: "\f124"; position: absolute; font-family: "FontAwesome"; } /*------------------------------------------------------------------ 1-44. gallery quotes Styles / .gallery-quotes -------------------------------------------------------------------*/ .gallery-quotes { margin: 0; border: 0; color: #222; font-size: 16px; overflow: hidden; line-height: 22px; position: relative; text-align: center; padding: 70px 10% 80px; } .dark .gallery-quotes { color: #8f8f8f; } .gallery-quotes cite { color: #959595; font-size: 13px; line-height: 16px; font-style: normal; } .gallery-quotes cite a { color: #959595; } .gallery-quotes cite a:focus, .gallery-quotes cite a:hover { color: #222; outline: none; text-decoration: none; -webkit-transition: all .6s ease; transition: all .6s ease; } .gallery-quotes p { margin: 0 0 15px; } .gallery-quotes .fa { top: 30px; left: 50%; font-size: 20px; position: absolute; margin: 0 0 0 -10px; } /*------------------------------------------------------------------ 1.45. social network styles -------------------------------------------------------------------*/ .s-network { padding: 0; margin: 0; color: #fff; list-style: none; } .s-network li { vertical-align: top; display: inline-block; margin: 0 2px 5px 0; } .s-network a { color: #fff; } .s-network a:hover i.fa-facebook { color: #fff; background: #3b5998; } .s-network a:hover i.fa-twitter { color: #fff; background: #00aced; } .s-network a:hover i.fa-dribbble { color: #fff; background: #e44885; } .s-network a:hover i.fa-linkedin { color: #fff; background: #007bb6; } .s-network a:hover i.fa-google-plus { color: #fff; background: #dd4b39; } .s-network a:hover i.fa-youtube { color: #fff; background: #b00; } .s-network a:hover i.fa-rss { color: #fff; background: #ffa133; } .s-network a:hover i.fa-skype { color: #fff; background: #36c4f3; } .s-network a:hover i.fa-apple { color: #fff; background: #cdcccc; } .s-network a:hover i.fa-android { color: #fff; background: #c5df9c; } .s-network a:hover i.fa-soundcloud { color: #fff; background: #f50; } .s-network a:hover i.fa-behance { color: #fff; background: #1aace3; } .s-network a:hover i.fa-vimeo-square { color: #fff; background: #74ccdb; } .s-network a:hover i.instagram { color: #fff; background: #c7c5b3; } .s-network a:hover i.fa-pinterest { color: #fff; background: #f16261; } .s-network a:hover i.fa-tumblr { color: #fff; background: #4d7ea3; } .s-network a:hover i.fa-windows { color: #fff; background: #90cadd; } .s-network a:hover i.fa-paypal { color: #fff; background: #4aa1d9; } .s-network a:hover i.fa-deviantart { color: #fff; background: #95a696; } .s-network a:hover i.fa-digg { color: #fff; background: #457e9b; } .s-network a:hover i.fa-lastfm { color: #fff; background: #be1938; } .s-network i { display: inline-block; width: 45px; height: 45px; color: #fff; line-height: 45px; text-align: center; font-size: 22px; background: #464646; } .white-icons li a, .white-icons li i { color: #fff; } .cricle-icons i, .cricle-icons img { border-radius: 50%; -webkit-transition: all .5s ease; transition: all .5s ease; } .radius-icons li i, .radius-icons li img { border-radius: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; } .tb-grid [class^=col-] { padding-top: 10px; padding-bottom: 10px; background: #f1f1f1; border: 1px solid #ddd; } .dark .tb-grid [class^=col-] { background: #191919; border-color: #494949; } .wedding-nav.white { color: #fff; } .white-icons li a, .white-icons li i { color: #fff; } /*------------------------------------------------------------------ 1-46. Custom Form Styles -------------------------------------------------------------------*/ /* select */ .jcf-select { display: inline-block; vertical-align: top; position: relative; border: 1px solid #777; background: #fff; margin: 0 0 12px; min-width: 150px; height: 26px; } .jcf-select select { z-index: 1; left: 0; top: 0; } .jcf-select .jcf-select-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: default; display: block; font-size: 13px; line-height: 26px; margin: 0 35px 0 8px; } .jcf-select .jcf-select-opener { position: absolute; text-align: center; width: 26px; bottom: 0; right: 0; top: 0; } body > .jcf-select-drop { position: absolute; margin: -1px 0 0; z-index: 9999; } body > .jcf-select-drop.jcf-drop-flipped { margin: 1px 0 0; } .jcf-select .jcf-select-drop { position: absolute; margin-top: 0; z-index: 9999; top: 100%; left: -1px; right: -1px; } .jcf-select .jcf-drop-flipped { bottom: 100%; top: auto; } /* multiple select styles */ .jcf-list-box { overflow: hidden; display: inline-block; border: 1px solid #b8c3c9; min-width: 200px; margin: 0 15px; } /* select options styles */ .jcf-list { display: inline-block; vertical-align: top; position: relative; background: #fff; line-height: 14px; font-size: 12px; width: 100%; } .jcf-list .jcf-list-content { vertical-align: top; display: inline-block; overflow: auto; width: 100%; } .jcf-list ul { list-style: none; padding: 0; margin: 0; } .jcf-list ul li { overflow: hidden; display: block; } .jcf-list .jcf-overflow { overflow: auto; } .jcf-list .jcf-option { white-space: nowrap; overflow: hidden; cursor: default; display: block; padding: 5px 9px; color: #656565; height: 1%; } .jcf-list .jcf-disabled { background: #fff !important; color: #aaa !important; } .jcf-select-drop .jcf-hover, .jcf-list-box .jcf-selected { background: #e6e6e6; color: #000; } .jcf-list .jcf-optgroup-caption { white-space: nowrap; font-weight: bold; display: block; padding: 5px 9px; cursor: default; color: #000; } .jcf-list .jcf-optgroup .jcf-option { padding-left: 30px; } /* custom range input styles */ .jcf-range { display: block; overflow: hidden; } .jcf-range .jcf-range-track { margin: 0 20px 0 0; position: relative; display: block; } .jcf-range .jcf-range-wrapper { background: #ddd; display: block; margin: 5px 0; height: 10px; } .dark .jcf-range .jcf-range-wrapper { background: #191919; } .jcf-range.jcf-vertical { width: auto; } .jcf-range.jcf-vertical .jcf-range-wrapper { margin: 0; width: 10px; height: auto; padding: 20px 0 0; } .jcf-range.jcf-vertical .jcf-range-track { height: 180px; width: 10px; } .jcf-range.jcf-vertical .jcf-range-handle { left: -5px; top: auto; } .jcf-range .jcf-range-handle { position: absolute; background: #ddd; border-radius: 19px; border: 3px solid #e74c3c; width: 19px; height: 19px; margin: -4px 0 0; z-index: 1; top: 0; left: 0; } .jcf-range .jcf-range-handle:after { top: 1px; right: 14px; content: ""; bottom: 1px; left: -9999px; position: absolute; background: #e74c3c; } .jcf-range .jcf-range-mark { position: absolute; overflow: hidden; background: #000; width: 1px; height: 3px; top: -7px; margin: 0 0 0 9px; } .jcf-range.jcf-vertical .jcf-range-mark { margin: 0 0 9px; left: 14px; top: auto; width: 3px; height: 1px; } .jcf-range.jcf-disabled { background: none !important; opacity: .3; } /* custom number input styles */ .jcf-number { display: inline-block; position: relative; height: 38px; overflow: hidden; } .jcf-number input { -moz-appearance: textfield; } .jcf-number input::-webkit-inner-spin-button, .jcf-number input::-webkit-outer-spin-button { -webkit-appearance: none; } .jcf-number input { box-sizing: border-box; border: 1px solid #ddd; height: 38px; padding: 3px 27px 3px 7px; margin: 0; width: 100%; background: none; } .dark .jcf-number input { border-color: #494949; } .jcf-number .jcf-btn-dec, .jcf-number .jcf-btn-inc { position: absolute; width: 20px; height: 15px; right: 1px; top: 7px; } .jcf-number .jcf-btn-dec { top: auto; bottom: 7px; } .jcf-number.jcf-disabled .jcf-btn-dec:hover, .jcf-number.jcf-disabled .jcf-btn-inc:hover { background: #aaa; } .jcf-number .jcf-btn-dec:before, .jcf-number .jcf-btn-inc:before { position: absolute; content: ""; width: 0; height: 0; top: 50%; left: 50%; margin: -6px 0 0 -4px; border: 4px solid #aaa; border-color: transparent transparent #000 transparent; } .jcf-number .jcf-btn-dec:before { margin: -1px 0 0 -4px; border-color: #000 transparent transparent transparent; } .jcf-number.jcf-disabled .jcf-btn-dec:before, .jcf-number.jcf-disabled .jcf-btn-inc:before, .jcf-number .jcf-btn-dec.jcf-disabled:before, .jcf-number .jcf-btn-inc.jcf-disabled:before { opacity: .3; } .jcf-number.jcf-disabled input { background: #ddd; } /*------------------------------------------------------------------ 1.47. youtube bg video styles / .youtube_bg_video -------------------------------------------------------------------*/ .youtube_bg_video { position: absolute !important; height: 100%; width: 100%; left: 0; top: 0; } /*------------------------------------------------------------------ 1.48. fancyBox styles -------------------------------------------------------------------*/ /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { top: 0; left: 0; z-index: 8020; position: absolute; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; border-radius: 4px; } .fancybox-opened { z-index: 9999; } .fancybox-opened .fancybox-skin { box-shadow: 0 10px 25px rgba(0, 0, 0, .5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-prev span, .fancybox-next span { background-image: url("../images/fancybox/fancybox_sprite.png"); } #fancybox-loading { position: fixed; top: 50%; left: 50%; opacity: .8; z-index: 8060; cursor: pointer; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; } #fancybox-loading div { width: 44px; height: 44px; background: url("../images/fancybox/fancybox_loading.gif") center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-close:after { top: 33px; right: 38px; color: #222; font-size: 35px; content: "\f00d"; line-height: 35px; position: absolute; font-family: "FontAwesome"; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url("../images/fancybox/blank.gif"); /* helps IE */ -webkit-tap-highlight-color: transparent; z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { top: 0; left: 0; display: none; z-index: 9999; overflow: hidden; position: absolute; background: url("../images/fancybox/fancybox_overlay.png"); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, .8); border-radius: 15px; text-shadow: 0 1px 2px #222; color: #fff; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*------------------------------------------------------------------ 1.49. lodar animation styles -------------------------------------------------------------------*/ /********************** *CSS Animations by: *http://codepen.io/vivinantony ***********************/ .spinner1 { width: 40px; height: 40px; position: relative; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #000; opacity: .6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner2 { width: 40px; height: 40px; position: relative; } .container1 > div, .container2 > div, .container3 > div { width: 6px; height: 6px; background-color: #000; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner2 .spinner-container { position: absolute; width: 100%; height: 100%; } .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .container1 .circle2 { -webkit-animation-delay: -.9s; animation-delay: -.9s; } .container2 .circle2 { -webkit-animation-delay: -.8s; animation-delay: -.8s; } .container3 .circle2 { -webkit-animation-delay: -.7s; animation-delay: -.7s; } .container1 .circle3 { -webkit-animation-delay: -.6s; animation-delay: -.6s; } .container2 .circle3 { -webkit-animation-delay: -.5s; animation-delay: -.5s; } .container3 .circle3 { -webkit-animation-delay: -.4s; animation-delay: -.4s; } .container1 .circle4 { -webkit-animation-delay: -.3s; animation-delay: -.3s; } .container2 .circle4 { -webkit-animation-delay: -.2s; animation-delay: -.2s; } .container3 .circle4 { -webkit-animation-delay: -.1s; animation-delay: -.1s; } .spinner3 { width: 40px; height: 40px; position: relative; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #000; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .dot2 { top: auto; bottom: 0; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner4 { width: 30px; height: 30px; background-color: #000; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } .spinner5 { width: 32px; height: 32px; position: relative; } .cube1, .cube2 { background-color: #000; width: 10px; height: 10px; position: absolute; top: 0; left: 0; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .cube2 { -webkit-animation-delay: -.9s; animation-delay: -.9s; } .spinner6 { width: 50px; height: 30px; text-align: center; } .spinner6 > div { background-color: #000; height: 100%; width: 6px; margin-left: 2px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner6 .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner6 .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner6 .rect4 { -webkit-animation-delay: -.9s; animation-delay: -.9s; } .spinner6 .rect5 { -webkit-animation-delay: -.8s; animation-delay: -.8s; } .spinner7 { width: 90px; height: 30px; text-align: center; } .spinner7 > div { background-color: #000; height: 15px; width: 15px; margin-left: 3px; border-radius: 50%; display: inline-block; -webkit-animation: stretchdelay .7s infinite ease-in-out; animation: stretchdelay .7s infinite ease-in-out; } .spinner7 .circ2 { -webkit-animation-delay: -.6s; animation-delay: -.6s; } .spinner7 .circ3 { -webkit-animation-delay: -.5s; animation-delay: -.5s; } .spinner7 .circ4 { -webkit-animation-delay: -.4s; animation-delay: -.4s; } .spinner7 .circ5 { -webkit-animation-delay: -.3s; animation-delay: -.3s; } .changer-active #style-changer { margin: 0; } /*------------------------------------------------------------------ 1.50. style changer styles / #style-changer -------------------------------------------------------------------*/ #style-changer { top: 186px; left: 0; width: 244px; z-index: 9999; position: fixed; background: #fff; margin: 0 0 0 -245px; border: 1px solid #eee; padding: 16px 17px 5px 17px; -webkit-transition: margin .4s ease; transition: margin .4s ease; box-shadow: 10px 10px 0 0 rgba(122, 122, 122, .1); } .dark #style-changer { background: #222; border-color: #494949; box-shadow: 10px 10px 0 0 rgba(70, 70, 70, .1); } #style-changer .title { color: #222; display: block; margin: 0 0 15px; padding: 0 0 8px; text-transform: uppercase; border-bottom: 1px solid #eee; font: 500 16px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark #style-changer .title { color: #fff; border-color: #494949; } #style-changer .subtitle { color: #8f8f8f; display: block; margin: 0 0 13px; letter-spacing: 2px; text-transform: uppercase; font: 500 13px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark #style-changer .subtitle { color: #fff; } #style-changer .list-color { margin: 0 0 12px; padding: 0 0 14px; border-bottom: 1px solid #eee; } .dark #style-changer .list-color { border-color: #494949; } #style-changer .list-color li { padding: 0 1px 4px 5px; } #style-changer .list-color a { display: block; border-radius: 3px; width: 33px; height: 33px; } #style-changer .list-color a:hover { opacity: .7; text-decoration: none; } #style-changer .list-style { margin: 0 0 14px; padding: 0 0 19px; border-bottom: 1px solid #eee; } .dark #style-changer .list-style { border-color: #494949; } #style-changer .list-style li { padding: 0 5px 0 2px; } #style-changer .list-style li.dark { background: transparent; } #style-changer .list-style .btn { width: 95px; padding: 4px; color: #fff; display: block; font-size: 12px; border-radius: 0; background: #222; text-align: center; border: 1px solid #222; text-transform: uppercase; } .dark #style-changer .list-style .btn { color: #fff; border-color: #494949; } #style-changer .list-style .btn:hover { color: #222; text-decoration: none; background: transparent; } .dark #style-changer .list-style .btn:hover { color: #fff; } #style-changer .list-style .btn.add { color: #222; background: transparent; } .dark #style-changer .list-style .btn.add { color: #fff; border-color: #494949; } #style-changer .list-style .btn.add:hover { color: #fff; background: #222; } #style-changer .list-style .btn2 { color: #fff; width: 95px; padding: 4px; display: block; font-size: 12px; border-radius: 0; text-align: center; text-transform: uppercase; border: 1px solid transparent; } #style-changer .list-style .btn2:hover { text-decoration: none; } #style-changer .list-style .btn2:hover { color: #222; border-color: #222; background: transparent; } .dark #style-changer .list-style .btn2:hover { color: #fff; border-color: #fff; } #style-changer .list-style .btn2.add { color: #222; border-color: #222; background: transparent; } .dark #style-changer .list-style .btn2.add { color: #fff; border-color: #fff; } #style-changer .list-style .btn2.add:hover { color: #fff; } #style-changer .list-style.add { border: 0; padding: 0; } #style-changer a { -webkit-transition: all .4s ease; transition: all .4s ease; } #style-changer .changer-opener { left: 100%; font-size: 25px; padding: 10px 0 0; text-align: center; position: absolute; background: #fff; border-radius: 0 5px 5px 0; width: 49px; height: 54px; top: 50px; border-right: 1px solid #eee; border-top: 1px solid #eee; border-bottom: 1px solid #eee; box-shadow: 10px 10px 0 0 rgba(122, 122, 122, .1); } #style-changer .changer-opener:hover { text-decoration: none; } .dark #style-changer .changer-opener { background: #222; border-color: #494949; box-shadow: 10px 10px 0 0 rgba(70, 70, 70, .1); } #style-changer .color a { background: #e74c3c; } #style-changer .ball-blue a { background: #22b0ca; } #style-changer .deep-lilac a { background: #9845aa; } #style-changer .awesome a { background: #ff1a56; } #style-changer .bleu-de-france a { background: #3498db; } #style-changer .bleu-de-france2 a { background: #4285f6; } #style-changer .chateau-green a { background: #27ae60; } #style-changer .dark-pastel-red a { background: #c0392b; } #style-changer .di-serria a { background: #cea35f; } #style-changer .light-green a { background: #2ecc71; } #style-changer .light-taupe a { background: #ad8368; } #style-changer .niagara a { background: #16a085; } #style-changer .orange a { background: #f96015; } #style-changer .pastel-orange a { background: #ffb546; } #style-changer .pastel-red a { background: #ff6d6d; } #style-changer .pastel-red2 a { background: #ff6d6d; } #style-changer .rich-electric-blue a { background: #0091ea; } #style-changer .rodeo-dust a { background: #c7b29b; } #style-changer .sun a { background: #feb010; } #style-changer .sunglo a { background: #d86d65; } #style-changer .twine a { background: #c59d5f; } #style-changer .ucla-gold a { background: #ffb600; } #style-changer .yellow a { background: #f39c12; } #style-changer .zest a { background: #e67e22; } #style-changer .my-sin a { background: #feb41c; } @media only screen and (max-width: 1219px) { .gallery-quotes { font-size: 12px; line-height: 20px; } } @media only screen and (max-width: 991px) { .page-banner .heading { font-size: 30px; line-height: 35px; } .parallax-section h2 { font-size: 30px; line-height: 35px; } .parallax-section h3 { font-size: 25px; line-height: 30px; } .padding-sm-zero { padding: 0 !important; } .padding-sm-topzero { padding-top: 0 !important; } .padding-sm-bottomzero { padding-bottom: 0 !important; } .padding-bottomsm-60 { padding-bottom: 60px !important; } .padding-bottom-90 { padding-bottom: 60px !important; } .margin-bottom-100 { margin-bottom: 60px !important; } .padding-bottom-100 { padding-bottom: 60px !important; } .margin-bottom-90 { margin-bottom: 60px !important; } .margin-bottom-90 { margin-bottom: 60px !important; } .margin-top-100 { margin-top: 60px !important; } .padding-top-100 { padding-top: 60px !important; } .margin-top-100 { margin-top: 60px !important; } .padding-top-100 { padding-top: 60px !important; } .padding-top-90 { padding-top: 60px !important; } .margin-top-90 { margin-top: 60px !important; } .allmargin { margin: 30px !important; } .contact-block { padding-top: 20px; padding-bottom: 50px; } .contact-block .contact-map { margin-bottom: 30px; } .contact-address .alignleft { float: none; margin: 0 0 10px; } .contact-address .alignleft img { width: 100%; } .apply-form { width: 48%; } } @media only screen and (max-width: 767px) { .tel { pointer-events: auto; } .page-heading { margin: 0 auto 30px; font-size: 14px; line-height: 18px; } .page-heading h1 { font-size: 30px; line-height: 40px; } .page-heading h2 { font-size: 25px; line-height: 30px; } .page-heading h3 { font-size: 20px; line-height: 25px; } .page-heading h4 { font-size: 18px; line-height: 25px; } .page-heading h5 { font-size: 15px; line-height: 20px; } .page-heading h6 { font-size: 15px; line-height: 20px; } .page-banner .holder { float: none; max-width: 100%; } .page-banner .breadcrumbs { float: none; max-width: 100%; overflow: hidden; padding: 15px 0 0; } .page-banner.small .heading { font-size: 25px; line-height: 35px; } .page-banner.rightalign .holder { float: none; text-align: left; } .page-banner.rightalign .breadcrumbs { float: none; } .beans-fadeslider .beans-pagination { bottom: 53px; } .parallax-section { font-size: 14px; line-height: 20px; } .parallax-section h2 { font-size: 20px; line-height: 25px; } .parallax-section h3 { font-size: 18px; line-height: 20px; } .clearfix-sm { clear: left; } .padding-xs-zero { padding: 0 !important; } .error-section { font-size: 10px; line-height: 15px; height: auto !important; } .error-section.style4 .wedding-nav .countdown-section { margin: 0 1px; } .error-section.style4 .wedding-nav .countdown-section .countdown-amount { font-size: 30px; margin: 0 0 12px; line-height: 60px; width: 65px; height: 65px; } .error-section.style5 .wedding-nav { margin: 0 0 50px; } .error-section.style5 .wedding-nav .countdown-section { margin: 0 1px; } .error-section.style5 .wedding-nav .countdown-section .countdown-amount { font-size: 38px; line-height: 40px; margin: 0 0 12px; } .error-section .container { height: auto !important; } .error-section .logo { margin: 0 0 27px; } .error-section h1 { font-size: 15px; } .error-section h2 { font-size: 15px; } .error-section .error-info { font-size: 18px; line-height: 24px; margin: 0 0 27px; } .error-section .error-info .error-code { font-size: 50px; line-height: 50px; } .error-section .text { padding: 0 0 9px; } .error-section .text2 { font-size: 12px; line-height: 18px; } .error-section .footer-social li { margin: 0 7px; } .error-section .wedding-nav { font-size: 10px; line-height: 14px; } .error-section .wedding-nav .countdown-section { margin: 0 1px; padding: 5px 10px 5px; width: 68px; height: 106px; } .error-section .wedding-nav .countdown-section .countdown-amount { font-size: 38px; line-height: 40px; } .lost-block { padding-top: 100px; padding-bottom: 100px; } .lost-block h2 { font-size: 40px; line-height: 50px; } .error-form { width: 280px; } .apply-form { width: 100%; float: none; margin: 0 0 20px; } .comment-form .input { width: 100%; margin: 0 0 10px; } .comment-form .input:first-child { margin: 0 0 10px; } .blockquote-style1 { padding: 20px; } .blockquote-style1 q { font-size: 18px; line-height: 25px; } .blockquote-style2 { padding: 22px; } } @media only screen and (max-width: 479px) { .testimonials .img-box { display: block; width: 100%; } .testimonials .img-box img { width: 100%; } .testimonials .holder { display: block; width: 100%; } } @-webkit-keyframes hvr-ripple-out { 0% { top: -5px; } 33% { top: 5px; } 67% { top: -5px; } 100% { top: 5px; } } @keyframes hvr-ripple-out { 0% { top: -5px; } 33% { top: 5px; } 67% { top: -5px; } 100% { top: 5px; } } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(1); } } @keyframes bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0); -webkit-transform: scale(0); } 40% { transform: scale(1); -webkit-transform: scale(1); } } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(1); } } @keyframes bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px); } 50% { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @-webkit-keyframes cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(.5); } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(.5); } 100% { -webkit-transform: rotate(-360deg); } } @keyframes cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(.4); } 20% { -webkit-transform: scaleY(1); } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(.4); -webkit-transform: scaleY(.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: translateY(-10px); } 20% { -webkit-transform: translateY(-20px); } } @keyframes stretchdelay { 0%, 40%, 100% { transform: translateY(-10px); -webkit-transform: translateY(-10px); } 20% { transform: translateY(-20px); -webkit-transform: translateY(-20px); } }