/************************************************ [Master Stylesheet] Project Name : Beauty Lab Author Url : https://themecon.net/ Css Table Of Content ----------------------- 01. Home Page -Header section -Slider section -Welcome section -Booking section -Service section -Gallery section -Product section -Pricing section -Testimonial section -Blog section 02. Home Page-2 03. Home Page-3 04. Service Page 05. Service Details Page 06. Booking Page 07. Gallery Page 08. About Page 09. Shop Page 10. Product Details Page 11. Blog Page 12. Blog Details Page 13. Contact Page 14. 404 Page 15. Cart Page 16. Checkout Page 17. Thank you Page 18. Search Page 19. Account Page *************************************************/ /*----------search popup style----------*/ #search-modal .modal-dialog { max-width: 100%; } #search-modal .modal-content { text-align: center; border-radius: 100%; width: 400px; border: none; padding: 50px 50px; height: 400px; margin: 0 auto; position: relative; align-items: center; justify-content: center; } #search-modal .modal-content img { margin-bottom: 20px; } #search-modal .form-inline input { border: medium none; border-radius: 5px 0 0 5px; height: 40px; padding: 0 11px; width: 250px; margin-bottom: 0; } #search-modal.show .modal-dialog { -webkit-transform: translate(0px, 30%); -moz-transform: translate(0px, 30%); -o-transform: translate(0px, 30%); transform: translate(0px, 30%); } #search-modal .form-inline > button { background: #fff; border: medium none; border-radius: 0 5px 5px 0; height: 40px; margin-left: -5px; padding: 0 15px; cursor: pointer; } #search-modal .quick-search{ width: 100%; } #search-modal .quick-search h6:before { content: ""; position: absolute; height: 2px; width: 50px; background: #fff; left: 50%; bottom: 13px; margin-left: -25px; } #search-modal .quick-search li { display: inline; margin: 0 7px; line-height: 28px; } #search-modal .quick-search a { color: #fff; font-size: 16px; } #search-modal .quick-search a:hover { text-decoration: underline; } #search-modal .close { background: #fff none repeat scroll 0 0; border-radius: 100%; color: #d52759; height: 30px; opacity: 1; position: absolute; right: 33px; top: 60px; width: 30px; } #search-modal .close span { display: block; line-height: normal; position: relative; top: -4px; left: 1px; } /*---------topbar---------*/ .header-top .opening-time span { font-size: 13px; line-height: 24px; } .header-top { background: #232428; padding: 5px 0; } .header-top .opening-time, .header-top .contact-mail { color: #ddd; } .header-top .opening-time a, .header-top .contact-mail a { color: #ddd; } .header-top .contact-mail a:hover{ text-decoration: underline; } .header-top i.fa { font-size: 16px; margin-right: 8px; font-family: 'FontAwesome'; } .contact-mail > span { color: #fff; margin: 0 10px; } /*-----------01. Start Home page style-------------*/ /*--header style--*/ .beauty-header { background-color: #fff; position: relative; left: 0; top: 0; width: 100%; z-index: 999; box-shadow: 0 0 7px 0px rgb(51 51 51 / 8%); } .beauty-header .custom-logo { margin: 0 10px 0 0; } .beauty-header.logoright .custom-logo { margin: 0 0 0 10px; } .beauty-header.logoright .site-branding { text-align: right; } .beauty-header nav.navbar { padding: 0 30px 0 0; } .beauty-header.logoright nav.navbar { flex-flow: row-reverse; padding: 0 0 0 20px; } .beauty-header.no-searchbar nav.navbar { padding: 0; } .beauty-header.logoright nav.navbar .navbar-nav { margin-left: 0!important; margin-right: auto!important; } .beauty-header.logoright #search-button { right: initial; left: -10px; } .beauty-header nav.navbar ul.navbar-nav > li { display: flex; flex-flow: row wrap; align-items: center; padding: 30px 13px; color: #3b3b3b; font-size: 14px; } .beauty-header nav.navbar ul.navbar-nav > li:last-child { padding-right: 0; } .beauty-header nav.navbar ul.navbar-nav > li i { margin-left: 7px; font-size: 16px; } .beauty-header nav.navbar ul.navbar-nav > li i.mobile { display: none; } .beauty-header nav.navbar ul.navbar-nav > li > a { color: #3b3b3b; font-size: 14px; font-weight: 400; line-height: 24px; text-decoration: none; text-transform: uppercase; padding: 0; } .beauty-header nav.navbar ul.navbar-nav > li > a:after { display: none; } /*-----dropdown menu style------*/ .beauty-header nav.navbar .navbar-nav .dropdown-menu { display: block!important; border: none; border-top: 4px solid transparent; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.17); border-radius: 0; padding: 0; margin: 0; top: calc(100% + 20px); opacity: 0; visibility: hidden; transition: all 0.5s ease; } .beauty-header nav.navbar .navbar-nav li:hover > .dropdown-menu { top: calc(100% + 0px); opacity: 1; visibility: visible; } .beauty-header nav.navbar .navbar-nav .dropdown-menu li .dropdown-menu { left: 100%; top: -4px; margin-top: 0; } .beauty-header nav.navbar .navbar-nav .dropdown-menu li .dropdown-menu.dropdown-left { left: inherit; right: 100%; } .beauty-header nav.navbar .navbar-nav .dropdown-menu li { display: flex; flex-flow: row; align-items: center; justify-content: space-between; border-bottom: 1px solid #e9e9e9; padding: 10px 20px 10px 20px; transition: all 0.3s ease; } .beauty-header nav.navbar .navbar-nav .dropdown-menu li a { color: #3b3b3b; padding: 0; font-size: 14px; text-transform: uppercase; } .beauty-header nav.navbar .navbar-nav .dropdown-menu li.current_page_item.active, .beauty-header nav.navbar .navbar-nav .dropdown-menu li:hover { background: rgba(34, 34, 34, 0.05); } .beauty-header .dropdown-item.active, .beauty-header .dropdown-item:active { background: transparent; } .beauty-header .navbar-toggler { padding: 10px 12px; border: 1px solid #d5275a; border-radius: 0; } .beauty-header .navbar-toggler-icon { background-image: none; border-top: 2px solid #d5275a; border-bottom: 2px solid #d5275a; height: 20px; width: 27px; position: relative; } .beauty-header .navbar-toggler-icon:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: #d5275a; margin-top: -1px; } /*--------mega menu--------*/ .beauty-header .menuzord-menu > li > .megamenu { padding: 20px 30px 7px 30px; } .beauty-header .megamenu .col3 h6 { font-size: 15px; font-weight: 700; margin-bottom: 11px; text-transform: capitalize; } .beauty-header .menuzord-menu .megamenu .col3 a { display: block; font-size: 15px; font-weight: 400; line-height: 20px !important; padding: 3px 0; text-transform: capitalize; } .beauty-header .menuzord-menu .megamenu .col3>ul { margin-bottom: 30px; } .beauty-header .menuzord-menu .megamenu .col3>ul:last-child { margin-bottom: 0px; } .beauty-header .header-ad img { max-width: 450px; width: 100%; } /*------search bar style---------*/ #search-button { background: none; border: medium none; padding: 6px 0px 6px 14px; position: absolute; right: 0; top: 27px; cursor: pointer; } #search-button i { color: #5f5f5f; font-size: 15px; } /*---for sticky-----*/ .sticked { position: fixed; top: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .sticked .custom-logo { margin: 8px 10px 0 0; } .sticked .menuzord-menu>li>a { padding: 24px 13px; } .sticked #search-button { top: 18px; } .sticked #search-button i { color: #5f5f5f; } /*-------for transparent-------*/ .transparent { background: transparent; top: 0; } .transparent .menuzord-menu > li > a { color: #fff; } .transparent #search-button i { color: #fff; } /*--------------slider section------------*/ .top-margin { /* margin-top: 75px; */ } .home1-slider .img-fill > .img-area { height: 100%; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .home1-slider .Modern-Slider .item .img-fill { height: 680px; background: #000; } .home1-slider .Modern-Slider .item .img-fill .info { height: 100%; left: 0; position: absolute; text-align: center; top: 0; width: 100%; } .home1-slider .Modern-Slider .item .img-fill .info { padding: 0 15px; background: rgba(0, 0, 0, 0.15); } .home1-slider .Modern-Slider .item h4 { font-family: arimo; text-align: left; padding: 0 0 10px 0; color: #fff; } .home1-slider .Modern-Slider .item h3 { font-size: 62px; line-height: 70px; text-align: left; padding: 0; text-transform: capitalize; text-shadow: -0.209px 1.989px 5px rgba(0, 0, 0, 0.24); } .home1-slider .Modern-Slider .item h5 { color: #fff; font-family: arimo; font-size: 18px; font-weight: 300; line-height: 28px; letter-spacing: 1.5px; width: 51%; padding: 17px 0 40px; } .home1-slider .Modern-Slider .explore-btn { display: inline-block; font-size: 14px; font-weight: 700; height: 50px; letter-spacing: 1.5px; line-height: 50px; text-align: center; text-transform: uppercase; color: #fff; width: 190px; } /*----arrow----*/ .home1-slider .Modern-Slider .NextArrow::before { display: none; } .home1-slider .Modern-Slider .PrevArrow::before { display: none; } .home1-slider .Modern-Slider .PrevArrow, .home1-slider .Modern-Slider .NextArrow { background: rgba(0, 0, 0, 0) none; border: 2px solid transparent; font-size: 24px; line-height: 25px; height: 50px; margin-top: -25px; padding: 0; position: absolute; text-align: center; top: 50%; width: 50px; z-index: 5; cursor: pointer; } .home1-slider .Modern-Slider .PrevArrow:hover, .home1-slider .Modern-Slider .NextArrow:hover { opacity: 1; color: #fff; } .home1-slider .Modern-Slider .NextArrow { right: 20px; } .home1-slider .Modern-Slider .PrevArrow { left: 20px; } /*----------slider caption transition---------*/ /*---out transition for home page-1----*/ .home1-slider .Modern-Slider .item h4 { -webkit-animation: fadeOutDown 1.6s both; animation: fadeOutDown 1.6s both; } .home1-slider .Modern-Slider .item h3 { -webkit-animation: fadeOutDown 1.4s both; animation: fadeOutDown 1.4s both; } .home1-slider .Modern-Slider .item h5 { -webkit-animation: fadeOutDown 1.2s both; animation: fadeOutDown 1.2s both; } .home1-slider .Modern-Slider .explore-btn { -webkit-animation: fadeOutDown 1s both; animation: fadeOutDown 1s both; } /*---out transition for home page-2----*/ .home1-slider.v2 .Modern-Slider .item h4 { -webkit-animation: fadeOut 1.6s both; animation: fadeOut 1.6s both; } .home1-slider.v2 .Modern-Slider .item h3 { -webkit-animation: fadeOut 1.4s both; animation: fadeOut 1.4s both; } .home1-slider.v2 .Modern-Slider .item h5 { -webkit-animation: fadeOut 1.2s both; animation: fadeOut 1.2s both; } .home1-slider.v2 .Modern-Slider .explore-btn { -webkit-animation: fadeOut 1s both; animation: fadeOut 1s both; } /*---In transition----*/ .home1-slider .Modern-Slider .item.slick-active h4 { -webkit-animation: fadeInDown 1.6s both 1s; animation: fadeInDown 1.6s both 1s; } .home1-slider .Modern-Slider .item.slick-active h3 { -webkit-animation: fadeInDown 1.4s both 1s; animation: fadeInDown 1.4s both 1s; } .home1-slider .Modern-Slider .item.slick-active h5 { -webkit-animation: fadeInDown 1.2s both 1s; animation: fadeInDown 1.2s both 1s; } .home1-slider .Modern-Slider .item.slick-active .explore-btn { -webkit-animation: fadeInDown 1s both 1s; animation: fadeInDown 1s both 1s; } /*----------section title----------*/ .section-title { margin-bottom: 65px; } .section-title h3 { letter-spacing: 1px; padding-bottom: 10px; text-transform: capitalize; } .section-title p { max-width: 480px; margin: 0 auto; width: 100%; } /*---------welcome section---------*/ .welcome-section { padding-top: 90px; padding-bottom: 70px; } .welcome-section .section-title p { max-width: 480px; } .welcome-section .single-feature .feature-content h6 { letter-spacing: 1px; } .welcome-section .single-feature .divider, .service-section .single-service .divider, .beautyLab-gallery .single-gallery .divider, .product-carousel-wrapper .divider { height: 2px; width: 45px; } .welcome-section .single-feature i { font-size: 50px; color: #4e4e4e; line-height: normal; } .welcome-section .single-feature .circle { position: absolute; width: 50px; height: 50px; background: rgba(114, 15, 131, 0.05); border-radius: 100%; top: 18px; left: 13px; z-index: -1; } .welcome-section .certified .circle { top: 50px; } .welcome-section .appointment .circle { top: 63px; left: 15px; } .welcome-section .single-feature { align-items: flex-start; display: flex; flex-flow: row nowrap; width: 46.9%; position: relative; } .welcome-section .single-feature:nth-child(2n), .welcome-section-v2 .single-feature { margin-left: 40px; } .welcome-section .single-feature:before { background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 0, 0, 0), rgba(200, 200, 200, 1), rgba(255, 0, 0, 0)) repeat scroll 0 0; top: 0px; content: ""; height: 1px; left: -4px; position: absolute; width: 100%; } .welcome-section .single-feature:nth-child(1):before, .welcome-section .single-feature:nth-child(2):before { display: none; } .welcome-section .single-feature:nth-child(1), .welcome-section .single-feature:nth-child(2) { padding-top: 0px; } .welcome-section .single-feature:nth-child(2n+1):after, .welcome-section.v2 .single-feature::after { background: rgba(0, 0, 0, 0) linear-gradient(rgba(255, 0, 0, 0), rgba(200, 200, 200, 1), rgba(255, 0, 0, 0)) repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: -10px; top: 0; width: 1px; } .welcome-carousel-wrapper #carousel-text { height: 100%; left: 98px; padding: 23px 25px!important; position: absolute; top: 45%; width: 100%; } .welcome-carousel-wrapper #carousel-text p { color: #fff; font-weight: 500; font-family: roboto; letter-spacing: 1px; padding: 0 5px; } .welcome-carousel-wrapper #carousel-text .read-more { display: block; font-size: 15px; margin-top: 15px; } .welcome-carousel-wrapper #carousel-text .read-more:focus, .welcome-carousel-wrapper #carousel-text .read-more:hover { color: #fff; } .welcome-carousel-wrapper #carousel-text .read-more:hover { text-decoration: underline; } /*---carousel---*/ .welcome-carousel-wrapper .slick-prev::before { content: "\f104"; } .welcome-carousel-wrapper .slick-next::before { content: "\f105"; } .welcome-carousel-wrapper .slick-prev::before, .welcome-carousel-wrapper .slick-next::before { color: #fff; font-family: "FontAwesome"; font-size: 20px; line-height: 0.5; opacity: 1; } .welcome-carousel-wrapper .slick-prev, .welcome-carousel-wrapper .slick-next { border: medium none; bottom: 15px; cursor: pointer; display: block; font-size: 0; height: 23px; line-height: 0; outline: medium none; padding: 0; position: absolute; right: 15px; width: 40px; z-index: 2; } .welcome-carousel-wrapper .slick-prev { border-radius: 50px 0 0 50px; border-right: 1px solid rgba(255, 255, 255, 0.31); right: 55px; } .welcome-carousel-wrapper .slick-next { border-radius: 0 50px 50px 0; } /*--------- start booking section style------------*/ #fbuilder { padding: 30px; min-height: 520px; } #fbuilder .fform { padding: 0px; } #fbuilder .fields { width: 100%; } #fbuilder .fields label { margin-bottom: 4px; display: inline-block; } #fbuilder .fields .dfield.fapp { display: flex; flex-flow: row wrap; align-items: flex-start; } #fbuilder .fields .fieldCalendarService { margin-bottom: 20px; width: 100%; } #fbuilder .dfield input:not([type=checkbox]):not([type=radio]):not([type=file]), #fbuilder .fields input:not([type=checkbox]):not([type=radio]):not([type=file]), #fbuilder .fields select { border: 1px solid #e5e5e5; font-size: 15px; padding: 10px; height: 45px; margin: 0; width: 100%!important; } #fbuilder .fields .slotsCalendar { width: calc(100% - 315px); padding-left: 15px; } #fbuilder .fields .ui-datepicker-inline { margin: 0; box-shadow: none; background: #fff; } /*----start calendar style------*/ #fbuilder .ui-widget.ui-widget-content { border: 1px solid #c5c5c5; padding: 7px 6px 6px; min-width: 315px; } #fbuilder .ui-widget .ui-widget-header .ui-icon { background-image: none; } #fbuilder .ui-datepicker .ui-datepicker-header { position: relative; padding: .5em 0; color: #fff; box-shadow: none; border: none; text-shadow: none; } #fbuilder table { margin: auto; border: none; } #fbuilder .ui-datepicker thead { background-color: none; background-image: none; border-bottom: none; } .ui-datepicker thead th { padding: .7em .3em!important; text-transform: capitalize; color: #333; text-shadow: none; border: none; } #fbuilder .ui-datepicker tbody tr { border-bottom: none; } #fbuilder .ui-datepicker-calendar td { padding: 3px!important; border: none!important; } #fbuilder .ui-datepicker-calendar td .ui-state-default { border: 1px solid #e0dddd; background: #f6f6f6; font-weight: normal; color: #454545; font-size: 14px; } #fbuilder .ui-datepicker-calendar td .ui-state-default.ui-state-active { box-shadow: none; font-weight: 400; text-shadow: none; color: #fff; } #fbuilder .ui-datepicker-calendar .ui-state-disabled span, #fbuilder .ui-datepicker-calendar .ui-state-disabled a { opacity: .35; filter: Alpha(Opacity=35); background-image: none; cursor: not-allowed!important; pointer-events: auto; } .ui-datepicker td span, .ui-datepicker td a { text-align: center; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { color: #fff; } .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { color: #fff; } .ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev { position: absolute; cursor: pointer; border-radius: 3px; background: rgba(0, 0, 0, 0.26); width: 30px; height: 30px; border: none; } .ui-datepicker .ui-datepicker-prev { left: 6px; top: 6px; } .ui-datepicker .ui-datepicker-next { right: 5px; top: 6px; } .ui-datepicker .ui-datepicker-next:before, .ui-datepicker .ui-datepicker-prev:before{ font-family: fontawesome; position: absolute; color: #fff; font-size: 24px; line-height: normal; } .ui-datepicker .ui-datepicker-next:before{ content: "\f105"; left: 10px; top: 1px; } .ui-datepicker .ui-datepicker-prev:before{ content: "\f104"; left: 8px; top: 1px; } /*----end calender style-----*/ /*----start calender slots style-----*/ #fbuilder .slotsCalendar .slots { border: 1px solid #c5c5c5; padding: 5px 5px; box-shadow: none; background: #fff; } #fbuilder .slotsCalendar .slots > span { width: 100%; margin-left: 3px; } #fbuilder .slotsCalendar .slots div { border: none!important; margin: 3px; padding: 0px; width: calc(100% / 3 - 6px); box-sizing: border-box; } #fbuilder .slotsCalendar .slots div a { box-shadow: none; display: inline-block; padding: 4px 6px; border: 1px solid #e0dddd; background: #f6f6f6; font-weight: normal; color: #454545; font-size: 14px; display: block; } #fbuilder .usedSlots { margin-top: 10px; } #fbuilder .usedSlots .ahb_list { font-size: 14px; } #fbuilder .captcha .dfield { width: 208px; } #fbuilder .pbSubmit { background: #ccc; float: none; display: inline-block; border-radius: 3px; color: #fff; padding: 13px 30px; cursor: pointer; text-transform: capitalize; width: auto; margin-bottom: 0; transition: all 0.3s ease; font-size: 15px; line-height: normal; } /*----end calender slots style-----*/ /*------------- start service section style --------------*/ .service-section { padding-top: 90px; padding-bottom: 70px; } .service-section.el-widget { padding-top: 20px!important; } .service-section.el-widget.v2 { padding-top: 50px!important; } .service-section.v2 .single-service a, .service-section .img-over-content a { font-family: roboto; font-size: 18px; line-height: 24px; text-transform: capitalize; display: inline-block; letter-spacing: 0px; margin-bottom: 12px; } .service-section.v2 .single-service p, .service-section .single-service p { width: 100%; } .service-section.v2 .img-over-content a:focus, .service-section .img-over-content a:focus { color: inherit; } .service-section.v2 .img-over-content i, .service-section .img-over-content i { display: inline-block; font-size: 60px; line-height: normal; } .service-section.v2 .single-service .divider, .service-section .single-service .divider { margin: 7px auto 14px; } .service-section.v2 .single-service, .service-section .single-service { position: relative; margin-bottom: 30px; overflow: hidden; } .service-section .img-over-content { background: #F6F3EF; height: 100%; padding: 30px 25px 20px; position: absolute; top: 0; width: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; } .service-section .single-service:hover .img-over-content { background: rgba(56, 71, 101, 0.7); } .service-section .single-service:hover img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .service-section .single-service:hover .img-over-content i, .service-section .single-service:hover .img-over-content a, .service-section .single-service:hover .img-over-content p { color: #fff; } .service-section .single-service .img-over-content a:hover { letter-spacing: 1.2px; } /*------------------- 6.6 start beauty lab gallery section style --------------------*/ /*--------- Start Product Carousel section ----------*/ .product-carousel{ padding-top: 90px; padding-bottom: 100px; } .product-carousel-wrapper .single-carousel { position: relative; } .product-carousel-wrapper .single-carousel .onsale { position: absolute; right: 10px; top: 10px; color: #fff; line-height: normal; font-size: 13px; padding: 4px 7px; border-radius: 3px; } .product-carousel-wrapper .single-carousel .product-hover { align-items: center; display: flex; flex-flow: column wrap; height: 100%; justify-content: center; padding: 30px; position: absolute; top: 0; width: 100%; opacity: 0; transition: all 0.3s ease; } .product-carousel-wrapper .single-carousel:hover .product-hover { opacity: 1 } .product-carousel-wrapper .product-hover .divider { background: #fff; margin: 0 auto; order: 2; } .product-carousel-wrapper .single-carousel .product-hover > .product-title-link { order: 3; margin: 12px 0; } .product-carousel-wrapper .product-hover .woocommerce-loop-product__title { font-size: 16px; color: #fff; line-height: 1.3; text-decoration: underline; } .product-carousel-wrapper .product-hover .woocommerce-loop-product__title:hover { text-decoration: none; } .product-carousel-wrapper .product-hover .price-rating { text-align: center; order: 1; display: flex; flex-flow: column-reverse; align-items: center; } .product-carousel-wrapper .product-hover .price-rating ins { background: #d52af3; } .product-carousel-wrapper .product-hover .star-rating::before { color:#ffffff; } .product-carousel-wrapper .product-hover .star-rating span::before { color: #ffffff; } .product-carousel-wrapper .product-hover .price { color: #fff; } .product-carousel-wrapper .product-hover .button { background: #fff; display: inline-block; padding: 9px 15px; font-size: 15px; line-height: 1.2; border-radius: 3px; text-transform: capitalize; transition: all 0.5s ease; order: 4; text-align: center; } .product-carousel-wrapper .product-hover .button:hover { color: #fff; } .product-carousel-wrapper .product-hover .added_to_cart { order: 5; color: #fff; margin-top: 5px; text-decoration: underline; } .product-carousel-wrapper .product-hover .woocommerce-loop-product__title, .experts-section .expert-hover h6 { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; -moz-transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; -ms-transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; -o-transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; } .product-carousel-wrapper .product-hover .divider, .experts-section .expert-hover span.degignation { opacity: 0; -webkit-transform: translateY(35px); -moz-transform: translateY(35px); -ms-transform: translateY(35px); -o-transform: translateY(35px); transform: translateY(35px); -webkit-transition: transform 0.3s ease-in-out 0.1s, opacity 0.3s ease-in-out 0.1s; -moz-transition: transform 0.3s ease-in-out 0.1s, opacity 0.3s ease-in-out 0.1s; -ms-transition: transform 0.3s ease-in-out 0.1s, opacity 0.3s ease-in-out 0.1s; -o-transition: transform 0.3s ease-in-out 0.1s, opacity 0.3s ease-in-out 0.1s; transition: transform 0.3s ease-in-out 0.1s, opacity 0.3s ease-in-out 0.1s; } .product-carousel-wrapper .product-hover .price-rating, .experts-section .expert-hover p { opacity: 0; width: 100%; -webkit-transform: translateY(35px); -moz-transform: translateY(35px); -ms-transform: translateY(35px); -o-transform: translateY(35px); transform: translateY(35px); -webkit-transition: transform 0.35s ease-in-out 0.15s, opacity 0.4s ease-in-out 0.15s; -moz-transition: transform 0.35s ease-in-out 0.15s, opacity 0.4s ease-in-out 0.15s; -ms-transition: transform 0.35s ease-in-out 0.15s, opacity 0.4s ease-in-out 0.15s; -o-transition: transform 0.35s ease-in-out 0.15s, opacity 0.4s ease-in-out 0.15s; transition: transform 0.35s ease-in-out 0.15s, opacity 0.4s ease-in-out 0.15s; } .product-carousel-wrapper .product-hover .button, .experts-section .expert-hover a.bio { opacity: 0; -webkit-transform: translateY(45px); -moz-transform: translateY(45px); -ms-transform: translateY(45px); -o-transform: translateY(45px); transform: translateY(45px); -webkit-transition: transform 0.5s ease-in-out 0.3s, opacity 0.5s ease-in-out 0.3s, background 0.3s ease-in-out color 0.3s ease-in-out; -moz-transition: transform 0.5s ease-in-out 0.3s, opacity 0.5s ease-in-out 0.3s, background 0.3s ease-in-out color 0.3s ease-in-out; -ms-transition: transform 0.5s ease-in-out 0.3s, opacity 0.5s ease-in-out 0.3s, background 0.3s ease-in-out color 0.3s ease-in-out; -o-transition: transform 0.5s ease-in-out 0.3s, opacity 0.5s ease-in-out 0.3s, background 0.3s ease-in-out color 0.3s ease-in-out; transition: transform 0.5s ease-in-out 0.3s, opacity 0.5s ease-in-out 0.3s, background 0.3s ease-in-out color 0.3s ease-in-out; } .product-carousel-wrapper .single-carousel:hover .woocommerce-loop-product__title, .product-carousel-wrapper .single-carousel:hover .divider, .product-carousel-wrapper .single-carousel:hover .product-hover .price-rating, .product-carousel-wrapper .single-carousel:hover a, .product-carousel-wrapper .single-carousel:hover h6, .product-carousel-wrapper .single-carousel:hover span.degignation, .product-carousel-wrapper .single-carousel:hover p, .product-carousel-wrapper .single-carousel:hover a.bio { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; } .product-carousel-wrapper .owl-nav { box-shadow: 0 0 6px rgba(0, 0, 0, 0.09); display: flex; position: absolute; right: 0; top: -96px; } .product-carousel-wrapper .owl-prev, .product-carousel-wrapper .owl-next { padding: 9px 19px 7px; } .product-carousel-wrapper .owl-prev:hover i, .product-carousel-wrapper .owl-next:hover i { color: #fff; } .product-carousel-wrapper .owl-prev:after { background: rgba(0, 0, 0, 0.07); content: ""; height: 47px; left: 50%; position: absolute; top: 0; width: 1px; } .product-carousel-wrapper .owl-nav i { font-size: 25px; font-weight: bold; } /*---------- Start price list section -----------*/ /* -------tab menu------- */ .price-list-tab .tab-menu { text-align: center; border-bottom: none; justify-content: center; } .price-list-tab .tab-menu li { display: inline-block; margin: 0px 5px; } .price-list-tab .tab-menu li a { border-radius: 3px; color: #515151; display: inline-block; font-family: roboto; font-size: 16px; font-weight: 500; padding: 8px 30px; border: medium none; -webkit-transition: inherit; -moz-transition: inherit; -ms-transition: inherit; -o-transition: inherit; transition: inherit; } .price-list-tab .tab-menu li a:hover { border: medium none; } .price-list-tab .tab-menu li a.active { color: #fff; } /*------------tab content----------- */ .pricing-section .tab-content { padding-top: 60px; } .pricing-section .single-price-list { margin-bottom: 45px; margin-left: 30px; width: 47.3%; position: relative; } .pricing-section .single-price-list::before { border-bottom: 1px dashed #ddd; content: ""; left: 0; position: absolute; top: 15px; width: 100%; z-index: 0; } .pricing-section .single-price-list:nth-child(2n+1) { margin-left: 0; } .pricing-section .single-price-list h6 { font-size: 16px; letter-spacing: 0.4px; line-height: 28px; } .pricing-section .single-price-list h6 a { background: #f9f9f9; color: #1f1f1f; display: inline-block; padding-right: 25px; z-index: 1; position: relative; } .pricing-section .single-price-list h6 span { background: #f9f9f9; float: right; font-weight: bold; padding-left: 20px; position: relative; z-index: 1; } .pricing-section .single-price-list > p { margin-top: 20px; } .pricing-section a.booking-now, .cta-content a { border-radius: 3px; color: #fff; display: block; font-size: 16px; margin: 10px auto 0; padding: 10px 18px; text-align: center; width: 230px; line-height: 26px; } .price-list-tab .tab-menu li a.active:hover{ color: #fff; } /*--------- testimonial section ----------*/ .testimonial-section { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center center; position: relative; padding: 90px 0; } .testimonial-section .overlay { background: -moz-linear-gradient(left, rgba(64, 15, 56, 0.6) 0%, rgba(166, 27, 73, 0.6) 98%, rgba(166, 27, 73, 0.6) 100%); background: -webkit-linear-gradient(left, rgba(64, 15, 56, 0.6) 0%, rgba(166, 27, 73, 0.6) 98%, rgba(166, 27, 73, 0.6) 100%); background: linear-gradient(to right, rgba(64, 15, 56, 0.6) 0%, rgba(166, 27, 73, 0.6) 98%, rgba(166, 27, 73, 0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80400f38', endColorstr='#80a61b49', GradientType=1); } .testimonial-section .single-testimonial { margin: 0 auto; width: 79%; } .testimonial-section .single-testimonial img { background: rgb(167, 15, 171); background: -moz-linear-gradient(top, rgba(167, 15, 171, 1) 0%, rgba(233, 68, 136, 1) 98%); background: -webkit-linear-gradient(top, rgba(167, 15, 171, 1) 0%, rgba(233, 68, 136, 1) 98%); background: linear-gradient(to bottom, rgba(167, 15, 171, 1) 0%, rgba(233, 68, 136, 1) 98%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a70fab', endColorstr='#e94488', GradientType=0); border-radius: 100%; padding: 4px; height: 100px; width: 100px; margin: 0 auto; } .testimonial-section .testimoinal-txt { line-height: 24px; } .testimonial-section .author { color: #fff; display: block; font-family: roboto; font-size: 15px; font-weight: 500; line-height: 24px; margin-top: 35px; } .testimonial-section .author span { font-size: 12px; display: block; } .testimonial-section .owl-prev, .testimonial-section .owl-next { color: #fff; display: inline-block; font-size: 25px; padding: 0px 11px; position: absolute; top: 50%; } .testimonial-section .owl-prev { border-right: 1px solid #fff; left: -120px; } .testimonial-section .owl-next { border-left: 1px solid #fff; right: -120px; } /*-----------Blog section style ------------*/ .blog-section{ padding: 60px 0 90px; } .single-blog .img-area { overflow: hidden; min-height: 244px; } .single-blog .img-area a { display: block; } .single-blog .img-area img { width: 100%; } .single-blog:hover .img-area img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .single-blog .brand { background: rgba(54, 54, 54, 0.5); bottom: 0; color: #fff; position: absolute; width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; padding: 15px 0px 15px 8px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .single-blog .brand li { font-size: 16px; color: #fff; padding: 0 10px; } .single-blog .brand li i { margin-right: 5px; } .single-blog .brand li.gallery { display: block; position: absolute; height: 100%; top: 0; right: 0; width: 55px; text-align: center; font-size: 24px; line-height: 59px; padding: 0; margin: 0; color: #fff; } .single-blog .brand li.gallery i { margin-right: 0; } .single-blog .blog-content .title { color: #3b3b3b; display: block; font-family: roboto; font-size: 18px; line-height: 22px; word-break: break-all; } .single-blog .blog-content .readmore { color: #3b3b3b; font-family: roboto; font-weight: 500; display: inline-block; } .single-blog .blog-content .readmore i { font-size: 17px; margin-left: 4px; position: relative; top: 1px; } /*---------google map---------*/ .mapHome1 { width: 100%; height: 500px; } /*---------- Start call to action section -----------*/ .cta-section { background: url("images/gallerybg.jpg") no-repeat; background-size: cover; padding: 50px 0; position: relative; background-attachment: fixed; } .cta-section .overlay { background: rgba(114, 15, 131, 0.85); height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .cta-content a { margin: 0; } .cta-content a:hover { background: #fff; } .cta-section .cta-content { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .cta-section .cta-content p { color: #fff; font-family: arimo; font-size: 20px; line-height: 32px; } .cta-section .cta-content p span { background: #fff; border-radius: 4px; padding: 3px 12px; } /*-----------Start footer widget section ------------*/ .footer-widget { padding: 90px 0; } .footer-widget .widget img { margin-bottom: 10px; } .footer-widget .widget p { font-size: 15px; line-height: 23px; color: #757575; margin-top: 7px; } .footer-widget .widget address { margin-top: 30px; } .footer-widget .widget address i { color: #e8e8e8; font-size: 17px; left: 0; position: absolute; top: 2px; } .footer-widget .widget ul.menu > li { margin-bottom: 10px; } .footer-widget .widget ul.menu > li:last-child { margin-bottom: 0; } .footer-widget .widget ul.menu > li > a { color: #757575; padding-left: 20px; } .footer-widget .widget ul.menu > li > a:before { content: "\f105"; font-size: 18px; } .footer-widget .widget address p { padding-left: 30px; position: relative; margin-top: 14px; } .footer-widget .widget address span { font-weight: bold; color: #e8e8e8; margin-right: 5px; } .footer-widget .widget p a:hover { text-decoration: underline; } .footer-widget .widget .widget-title { color: #fff; font-family: roboto; margin-bottom: 40px; text-transform: capitalize; } .footer-widget .single-widget.recent-post-widget ul { border-left: 2px solid #2f2f2f; border-right: 2px solid #2f2f2f; } .single-widget.recent-post-widget li { border-bottom: 2px solid #2f2f2f; padding: 20px 25px; } .single-widget.recent-post-widget li:first-child { border-bottom: 2px solid #2f2f2f; padding-top: 0; } .single-widget.recent-post-widget li:last-child { border-bottom: 0; } .footer-widget .single-widget p, .footer-widget .recent-post-widget span { color: #757575; } .footer-widget .recent-post-widget span { font-size: 13px; display: block; } .footer-widget .recent-post-widget p { margin-bottom: 13px; } .footer-widget .recent-post-widget a { display: block; text-transform: capitalize; text-align: right; } .footer-widget .recent-post-widget a:hover { color: #fff; } .footer-widget .newsletter-widget input { background: #222222; border: 2px solid #2c2c2c; border-radius: 0; font-size: 16px; height: 50px; margin-bottom: 25px; padding: 7px 17px; } .footer-widget .newsletter-widget input:focus { border: 2px solid transparent; box-shadow: none; } .footer-widget .newsletter-widget button { border: medium none; color: #fff; float: right; font-size: 16px; font-weight: 700; padding: 0px 20px; cursor: pointer; text-transform: uppercase; height: 46px; min-width: 120px; line-height: 50px; } /*---------- start footer section -----------*/ .site-footer { background: #232428; padding: 30px 0; text-align: center; } .site-footer p.copyright { color: #7f7f7f; } .site-footer p.copyright i { margin: 0 4px; } .site-footer .copyright a:hover { color: #fff; } /*-------------------01. End Home page style---------------------*/ /*-------------------02. Start Home page-2 style---------------------*/ .transparent.sticked { background: #fff; top: 0; } /*------------home page-2 slider------------*/ .no-breacrumb .entry-content { margin: 0; } .home1-slider.v2 .Modern-Slider .PrevArrow, .home1-slider.v2 .Modern-Slider .NextArrow { border-radius: 100%; } .home1-slider.v2 .img-fill .slider-img1 { background: url(images/slider-img/slider-img5.jpg) no-repeat left center / cover; } .home1-slider.v2 .img-fill .slider-img2 { background: url(images/slider-img/slider-img6.jpg) no-repeat center center / cover; } .home1-slider.v2 .img-fill .slider-img3{ background: url(images/slider-img/slider-img7.jpg) no-repeat top center / cover; } .home1-slider.v2 .img-fill .slider-img4{ background: url(images/slider-img/slider-img8.jpg) no-repeat center center / cover; } .home1-slider.v2 .Modern-Slider .item .img-fill { height: 100vh; min-height: 680px; } /*------*/ .welcome-section.v2 .welcome-feature-wrapper { margin-left: -40px; } .welcome-section.v2 .single-feature { width: 29.5%; margin-left: 40px; } .welcome-section.v2 .single-feature:nth-child(1), .welcome-section.v2 .single-feature:nth-child(2), .welcome-section.v2 .single-feature:nth-child(3) { padding-top: 0px; } .welcome-section.v2 .single-feature:nth-child(3):before, .welcome-section.v2 .single-feature:nth-child(3):after, .welcome-section.v2 .single-feature:nth-child(6):after, .welcome-section.v2 .single-feature:nth-child(9):after, .welcome-section.v2 .single-feature:nth-child(12):after, .welcome-section.v2 .single-feature:nth-child(15):after, .welcome-section.v2 .single-feature:last-child:after { display: none; } /*------*/ .service-section.v2 .img-over-content { background: transparent; padding: 0px 5px; position: relative; top: inherit; display: block; } .service-section.v2 .single-service:hover .img-over-content { background: none; } .service-section.v2 .single-service:hover .img-over-content a { color: #333333; } .service-section.v2 .single-service:hover .img-over-content p { color: #515151; } .service-section.v2 .single-service .img-over-content a:hover { letter-spacing: normal; } /*----------icon puls hover---------*/ @-webkit-keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .service-section.v2 .single-service .img-over-content i { display: block; -webkit-transform: perspective(1px) translateZ(0); -moz-transform: perspective(1px) translateZ(0); -o-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .service-section.v2 .single-service:hover i { -webkit-animation: hvr-pulse 0.5s linear; -moz-animation: hvr-pulse 0.5s linear; -o-animation: hvr-pulse 0.5s linear; animation: hvr-pulse 0.5s linear; } /*-------------video section-------------*/ .video-section { background: url(images/video-bg.jpg) no-repeat fixed center center / cover; position: relative; } .video-content { height: 650px; display: flex; flex-flow: column; align-items: center; justify-content: center; } .video-section .overlay { background: rgba(213, 39, 90, 0.3); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-content a { margin-bottom: 20px; } .video-content i { border: 2px solid #fff; border-radius: 100%; color: #fff; font-size: 20px; height: 60px; padding: 19px 13px 13px 20px; text-align: center; width: 60px; cursor: pointer; } .video-content i:hover { background: #fff; } /*-------------------02. End Home page-2 style---------------------*/ /*-------------------03. Start Home page-3 style---------------------*/ .home3-hero { position: relative; width: 100%; z-index: 3 } .home3-hero .overlay { background: rgba(34, 34, 34, 0.5); position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; } .home3-hero .content-wrapper { z-index: 4; position: relative; } .home3-hero .single-content { align-items: center; display: flex; flex-flow: column nowrap; justify-content: center; height: 100vh; min-height: 650px; } .home3-hero .content-wrapper .single-content h1 { max-width: 850px; text-transform: uppercase!important; width: 100%; } .home3-hero .single-content p { font-size: 18px; margin-top: 20px; width: 100%; max-width: 620px; line-height: 30px; letter-spacing: 1.3px; } .home3-hero .mouse { width: 40px; height: 40px; border: 1px solid #fff; border-radius: 100%; position: absolute; bottom: 100px; left: 50%; cursor: pointer; z-index: 9; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation: mouseMove 2s infinite; animation: mouseMove 2s infinite; } .home3-hero .mouse:after { color: #fff; content: "\f063"; font-family: fontawesome; left: 12px; position: absolute; top: 8px; } @-webkit-keyframes mouseMove { 0% { bottom: 100px; } 50% { bottom: 90px; } } @keyframes mouseMove { 0% { bottom: 100px; } 50% { bottom: 90px; } } .home3-hero .mouse:hover { background: #fff; } .home3-hero.particle { background: url(images/slider-img/slider-img9.jpg) no-repeat center center / cover; overflow: hidden; } #particles-js { position: absolute; width: 100%; height: auto; background-color: transparent; z-index: 1 } /*-------------------03. End Home page-3 style---------------------*/ /*-------------------04. start service page style---------------------*/ .banner-section { position: relative; background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover; } .banner-content { height: 320px; padding: 30px 0; position: relative; display: flex; flex-flow: column; align-items: start; justify-content: center; } .banner-content h1 { width: 100%; text-transform: capitalize; font-size: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320))); } .banner-content .woocommerce-products-header { width: 100%; } @media (min-width: 1921px) { .banner-content h1 { font-size: 30px; } } .banner-content h4 { text-transform: capitalize; } .banner-content p { font-size: 17px; line-height: 26px; margin-top: 12px; width: 30%; } .banner-section .overlay { background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0) 100%); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1000000', endColorstr='#00000000', GradientType=1); } /*-bredcrumb-*/ .banner-section .woocommerce-breadcrumb, .banner-section .beauty-lab-breadcrumb { background: none; bottom: 30px; left: 0; position: absolute; display: flex; flex-flow: row wrap; align-items: center; } .banner-section .woocommerce-breadcrumb i { margin: 0 7px; } .banner-section .woocommerce-breadcrumb, .banner-section .beauty-lab-breadcrumb li { font-weight: 500; color: #fff; text-transform: capitalize; } .banner-section .woocommerce-breadcrumb a, .banner-section .beauty-lab-breadcrumb a { font-weight: 500; } .banner-section .woocommerce-breadcrumb a:hover, .banner-section .beauty-lab-breadcrumb a:hover { text-decoration: underline; } .banner-section .beauty-lab-breadcrumb>li+li::before { color: #ccc; content: "\f105"; font-family: fontawesome; padding: 0 8px; font-weight: 400; } /*---------quick support section--------*/ .quick-support-section { background: rgba(0, 0, 0, 0) url("images/gallerybg.jpg") no-repeat fixed 0 0 / cover ; position: relative; padding: 80px 0; } .quick-support-section .overlay { background: rgba(114, 15, 131, 0.8); } .quick-support-section .single-support h6 { font-family: arimo; font-weight: 700; padding-bottom: 5px; } .quick-support-section .social-link h6 { padding-bottom: 12px; } .quick-support-section .single-support i { display: inline-block; font-size: 40px; margin-top: -3px; } .quick-support-section .single-support .content { display: inline-block; padding-left: 16px; vertical-align: top; } .quick-support-section .single-support { background: #fff; height: 120px; margin-right: 30px; padding: 34px 30px; width: 31%; } .quick-support-section .single-support.social-link { padding-top: 26px; } .quick-support-section .single-support:last-child { margin-right: 0; } .quick-support-section .social-link .content { width: 100%; } .quick-support-section .social-link ul li { display: inline-block; } .quick-support-section .social-link ul li a { background: #444; border-radius: 100%; color: #fff; display: inline-block; height: 30px; margin: 0 4px; padding: 3px 5px; width: 30px; } .quick-support-section .social-link i { font-size: 16px !important; margin-top: 0; } /*------specialize section--------*/ .specialize-section { padding-bottom: 50px; } .specialize-section .section-title { margin-bottom: 25px; } .expart-wrapper .hidden { display: none; } .specialize-section .expart-wrapper { width: 100%; max-width: 700px; margin: 0 auto; } .specialize-section .expart-wrapper img { width: 100%; } .specialize-section .tooltipbar { border-radius: 100%; height: 14px; display: block; position: absolute; width: 14px; cursor: pointer; } .specialize-section .tooltipbar.bar1 { background: #4758b1; box-shadow: 0 0 0 4px #6a7ad2; left: 246px; top: 70px; -webkit-animation: pulse3 2s ease infinite 0.5s; -moz-animation: pulse3 2s ease infinite 0.3s; -ms-animation: pulse3 2s ease infinite 0.5s; -o-animation: pulse3 2s ease infinite 0.5s; animation: pulse3 2s ease infinite 0.5s; } .specialize-section .tooltipbar.bar2 { background: #d5275a; box-shadow: 0 0 0 4px #720f83; bottom: 182px; left: 80px; -webkit-animation: pulse3 2s ease infinite 0.2s; -moz-animation: pulse3 2s ease infinite 0.2s; -ms-animation: pulse3 2s ease infinite 0.2s; -o-animation: pulse3 2s ease infinite 0.2s; animation: pulse3 2s ease infinite 0.2s; } .specialize-section .tooltipbar.bar3 { background: #720f83; box-shadow: 0 0 0 4px #d5275a; bottom: 204px; right: 80px; -webkit-animation: pulse3 2s ease infinite; -moz-animation: pulse3 2s ease infinite; -ms-animation: pulse3 2s ease infinite; -o-animation: pulse3 2s ease infinite; animation: pulse3 2s ease infinite; } .popover-title { display: block; font-family: roboto; font-size: 17px; margin-bottom: 5px; } @-webkit-keyframes pulse1 { 0% {box-shadow: 0 0 0 0px rgba(106, 122, 210, 1);} 100% {box-shadow: 0 0 0 10px rgba(106, 122, 210, 0);} } @keyframes pulse1 { 0% {box-shadow: 0 0 0 0px rgba(106, 122, 210, 1);} 100% {box-shadow: 0 0 0 10px rgba(106, 122, 210, 0);} } /*---------*/ @-webkit-keyframes pulse2 { 0% {box-shadow: 0 0 0 0px rgba(114, 15, 131, 1);} 100% {box-shadow: 0 0 0 10px rgba(114, 15, 131, 0);} } @keyframes pulse2 { 0% {box-shadow: 0 0 0 0px rgba(114, 15, 131, 1);} 100% {box-shadow: 0 0 0 10px rgba(114, 15, 131, 0);} } /*------*/ @-webkit-keyframes pulse3 { 0% {box-shadow: 0 0 0 0px rgba(213, 39, 90, 1);} 100% {box-shadow: 0 0 0 10px rgba(213, 39, 90, 0);} } @keyframes pulse3 { 0% {box-shadow: 0 0 0 0px rgba(213, 39, 90, 1);} 100% {box-shadow: 0 0 0 10px rgba(213, 39, 90, 0);} } .specialize-section .tooltipbar .tooltip-content-wrapper { position: absolute; left: 50%; bottom: calc(100% + 17px); background: #fff; width: 280px; padding: 15px 20px; transform: translateX(-50%); border: 1px solid #ddd; border-radius: 4px; opacity: 0; visibility: hidden; transition: all 0.3s ease; cursor: default; } .specialize-section .tooltipbar:hover .tooltip-content-wrapper { opacity: 1; visibility: visible; } .specialize-section .tooltipbar .tooltip-content { width: 100%; max-height: 210px; overflow: auto; } .specialize-section .tooltipbar .tooltip-content:before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); transform-origin: center center; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } /*------pricing section------*/ .pricing-section .pricing-wrapper { display: flex; flex-flow: row wrap; } .pricing-section .single-price-plan { border: 1px solid #eaeaea; width: calc(100% / 3); position: relative; display: flex; flex-flow: column; background: #fff; } .pricing-section .tbl-col-2 .single-price-plan { width: calc(100% / 2); } .pricing-section .tbl-col-1 .single-price-plan { width: 100%; max-width: 560px; margin: 0 auto; } .pricing-section .price-header { border-bottom: 1px solid #eaeaea; padding: 50px; } .pricing-section .price-header h3 { font-size: 30px; } .pricing-section .price-divider { background: #000000; height: 1px; margin: 20px auto 30px; width: 70px; } .pricing-section .price-header p { font-family: roboto; font-size: 20px; letter-spacing: 0.7px; } .pricing-section .price-body { padding: 10px 30px; } .pricing-section .price-content { border-bottom: 1px solid #eaeaea; padding: 16px 0; } .pricing-section .price-content:last-child { border-bottom: none; } .pricing-section .price-body .price-content h6 { font-size: 16px; margin-bottom: 12px; position: relative; } .pricing-section .price-body .price-content h6 i { margin-right: 10px; } .pricing-section .price-footer { border-top: 1px solid #eaeaea; padding: 50px 30px; margin-top: auto; } .pricing-section .price-footer .get-start { border-radius: 5px; color: #fff; display: block; font-family: roboto; font-weight: 700; height: 55px; margin: 0 auto; padding: 0 17px; text-transform: uppercase; width: 220px; line-height: 57px; } .pricing-section .premium { border-top-width: 5px !important; box-shadow: 0 0 34px rgba(0, 0, 0, 0.2); overflow: hidden; z-index: 1; } .premium .price-header { padding: 48px; } .pricing-section .premium::before { color: #fff; content: "Recommend"; font-family: roboto; font-size: 13px; font-weight: 700; height: 30px; left: -42px; letter-spacing: 0.5px; line-height: 29px; position: absolute; text-transform: uppercase; top: 38px; width: 190px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /*-------------------04. End service page style---------------------*/ /*-------------------05. Start service details page style---------------------*/ /*---------treatment information section--------*/ .info-content .section-title::before, .treatment-details-section .section-title::before, .related-service-section .section-title::before { bottom: 28px; content: ""; height: 2px; left: 0; position: absolute; width: 45px; } .treatment-info-section { padding-top: 90px; padding-bottom: 90px; } .related-service-section .section-title, .treatment-info-section .section-title { margin-bottom: 0; } .treatment-info-section .info-content li { color: #222222; font-size: 16px; line-height: 26px; margin-bottom: 5px; position: relative; padding-left: 20px; } .treatment-info-section .info-content li::before { content: "\f111 "; font-family: fontawesome; font-size: 10px; left: 0; position: absolute; } .treatment-info-section .single-support { margin-right: 30px; width: 44%; height: auto; padding: 0; } .treatment-info-section .single-support i { display: inline-block; font-size: 40px; margin-top: -3px; } .treatment-info-section .single-support .content { display: inline-block; padding-left: 16px; vertical-align: top; } .treatment-info-section .single-support h6 { font-family: arimo; font-weight: 700; } .treatment-info-section .single-support i { line-height: normal; } /*------treatment details--------*/ .treatment-details-section { padding-bottom: 100px; } .treatment-details-section .section-title::before, .related-service-section .section-title::before { left: 3px; } .treatment-details-section .section-title { margin-bottom: 5px; } .treatment-details-section .treatment-details p { margin-top: -7px; } .treatment-details-section .brochure i { color: #222; font-size: 18px; margin-right: 10px; } .treatment-details-section .brochure { display: block; margin-top: 20px; } .treatment-details-section .wp-block-media-text .wp-block-media-text__content { padding: 0 0 0 30px; } .treatment-details-section .wp-block-media-text .wp-block-media-text__content p { margin-bottom: 10px; } .treatment-details-section .wp-block-media-text .wp-block-media-text__content p:last-child { margin-bottom: 0; } .treatment-details-section .post-navigation { margin-top: 50px; border-top: 1px solid #eee; padding-top: 25px; } .treatment-info-section .treatment-info-img::before, .treatment-info-section .treatment-info-img::after, .treatment-details-section .treatment-details-img::before, .treatment-details-section .treatment-details-img::after, .history-section .history-img::before, .history-section .history-img::after { border: 1px solid transparent; content: ""; left: 0; position: absolute; top: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .history-section:hover .history-img:before, .treatment-details-section:hover .treatment-details-img:before, .treatment-info-section:hover .treatment-info-img:before { border: 1px solid #e4cfbe; -webkit-transform: scale(0.89, 0.87); -moz-transform: scale(0.89, 0.87); -o-transform: scale(0.89, 0.87); transform: scale(0.89, 0.87); -webkit-transition: transform 0.4s ease-in-out 0.1s; -moz-transition: transform 0.4s ease-in-out 0.1s; -o-transition: transform 0.4s ease-in-out 0.1s; transition: transform 0.4s ease-in-out 0.1s; } .history-section:hover .history-img:after, .treatment-details-section:hover .treatment-details-img:after, .treatment-info-section:hover .treatment-info-img:after { border: 1px solid #e4cfbe; -webkit-transform: scale(0.82, 0.78); -moz-transform: scale(0.82, 0.78); -o-transform: scale(0.82, 0.78); transform: scale(0.82, 0.78); -webkit-transition: transform 0.5s ease-in-out 0.2s; -moz-transition: transform 0.5s ease-in-out 0.2s; -o-transition: transform 0.5s ease-in-out 0.2s; transition: transform 0.5s ease-in-out 0.2s; } .treatment-info-section:hover .treatment-info-img:after { -webkit-transform: scale(0.83, 0.77); -moz-transform: scale(0.83, 0.77); -o-transform: scale(0.83, 0.77); transform: scale(0.83, 0.77); } .treatment-details-section:hover .treatment-details-img:before { -webkit-transform: scale(0.88, 0.88); -moz-transform: scale(0.88, 0.88); -o-transform: scale(0.88, 0.88); transform: scale(0.88, 0.88); } .treatment-details-section:hover .treatment-details-img:after { -webkit-transform: scale(0.81, 0.75); -moz-transform: scale(0.81, 0.75); -o-transform: scale(0.81, 0.75); transform: scale(0.81, 0.75); } /*-------Related Service-------*/ .related-service-section { padding-top: 50px; padding-bottom: 100px; } .related-service-section .single-service { background: #f7f7f7; border: 1px solid #eeeeee; overflow: hidden; } .related-service-section .link-hover { align-items: center; background: rgba(35, 36, 40, 0.7); display: flex; font-size: 29px; height: 100%; justify-content: center; position: absolute; top: -50px; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .related-service-section .link-hover a { margin-top: 0; width: 100%; height: 100%; padding-top: 50px; display: flex; flex-flow: column; align-items: center; justify-content: center; } .related-service-section .single-service:hover .link-hover { opacity: 1; visibility: visible; } .related-service-section .single-service h6 { font-size: 17px; padding: 13px 20px; } .related-service-section .single-service h6:hover a { color: #232428; } /*-------------------05. End service details page style---------------------*/ /*-------------------06. Start Booking page style---------------------*/ /* booking page done by elementor page builder */ /*-------------------06. End Booking page style---------------------*/ /*-------------------07. Start Gallery page style---------------------*/ /*-------------------07. End Gallery page style---------------------*/ /*-------------------08. Start About page style---------------------*/ /*-----------beauty expart section----------*/ .experts-section { background: #fafafa; padding: 90px 0 100px; } .experts-section .expert-hover { height: 100%; padding: 36px 20px; position: absolute; top: 0; width: 100%; color: #fff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .experts-section .single-carousel:hover .expert-hover { background: rgba(114, 15, 131, 0.8) none repeat scroll 0 0; } .experts-section .expert-hover .name { display: block; font-family: roboto; font-size: 20px; text-transform: capitalize; } .experts-section .expert-hover .bio:hover { color: #fff; } .experts-section .expert-hover .bio:hover i { margin-left: 10px; } .experts-section .expert-hover .degignation { font-size: 15px; margin-top: 2px; color: #ccc; } .experts-section .expert-hover .degignation, .experts-section .expert-hover a.bio { display: block; } .experts-section .social-contact a { color: #fff; display: inline-block; font-size: 20px; height: 33px; line-height: 32px; margin: 0 -3px; text-align: center; width: 35px; } .experts-section .social-contact a i { font-family: FontAwesome; font-weight: 400; } .experts-section .single-carousel:hover .social-contact a { border-radius: 3px; margin: 0 7px; } .experts-section .social-contact { bottom: 0; left: 0; padding: 15px 24px; position: absolute; width: 100%; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .experts-section .social-contact a:hover { background: #fff; } /*-------------------08. End About page style---------------------*/ /*-------------------09. Start Shop page style---------------------*/ .beauty-product { padding: 90px 0 100px; } .beauty-product .woocommerce-info { padding: 6px 15px; color: #fff; } .beauty-product .search-sort { display: flex; flex-flow: row wrap; align-items: center; margin-bottom: 30px; } .beauty-product .search-sort .product-sort { width: 50%; padding-right: 15px; } .beauty-product .search-sort .search { width: 50%; } .beauty-product .search-sort .product-sort .nice-select { margin-bottom: 0; box-shadow: none; font-size: 16px; height: 43px; border: 1px solid #dedbdb; color: #495057; border-radius: 03px; } .beauty-product .search-sort .product-sort .nice-select:after { height: 7px; margin-top: -5px; width: 7px; } .woocommerce-product-search { display: flex; flex-flow: row; align-items: center; position: relative; } .woocommerce-product-search .search-field { margin: 0; box-shadow: none; font-size: 16px; height: 43px; border: 1px solid #dedbdb; color: #495057; padding: 4px 55px 4px 15px; } .woocommerce-product-search button { position: absolute; right: 6px; top: calc(50% - 1px); width: auto; padding: 8px 12px; border: none; font-size: 15px; transform: translateY(-50%); background: #eaeff3; color: #720f83; } .row.products .product { margin-bottom: 30px; } .row.products .price-content { border: 1px solid #f0efef; padding: 15px 12px; width: 100%; } .row.products .woocommerce-loop-product__link { display: block; position: relative; } .row.products .woocommerce-loop-product__link .onsale { position: absolute; right: 10px; top: 10px; color: #fff; line-height: normal; font-size: 13px; padding: 4px 7px; border-radius: 3px; } .row.products .woocommerce-loop-product__title { color: #232428; display: block; font-size: 18px; font-family: 'Arimo', sans-serif; margin-bottom: 12px; } .row.products .price-content .price-rating { display: flex; flex-flow: row; align-items: center; justify-content: space-between; margin-bottom: 15px; } .row.products .price-content .price-rating .price { order: 1; font-weight: 500; font-size: 18px; font-family: 'Roboto', sans-serif; } .row.products .star-rating { order: 2; } .row.products .price-content a.button { border-radius: 3px; color: #fff; font-size: 16px; padding: 12px 18px; text-align: center; display: block; line-height: 1.2; } .row.products .price-content .added_to_cart { text-align: center; display: block; margin-top: 10px; font-weight: 700; } .row.products .price-content .added_to_cart:hover { text-decoration: underline; } /*----------pagination----------*/ .woocommerce-pagination ul.page-numbers{ display: flex; } .woocommerce-pagination ul .page-numbers, .pagination .page-numbers { background-color: #f7f3ef; border: medium none; color: #6b6b6b; font-size: 17px; margin: 0 4px; padding: 0px 15px; height: 40px; width: 40px; display: inline-block; line-height: 41px; text-align: center; margin-bottom: 8px; } .woocommerce-pagination ul .page-numbers { padding: 0; } .woocommerce-pagination ul .page-numbers:first-child, .pagination .page-numbers:first-child { margin-left: 0; } .woocommerce-pagination ul .current, .pagination .current, .woocommerce-pagination ul .page-numbers:hover, .pagination .page-numbers:hover{ color: #fff; } /*-----------select2 design---------*/ .select2-container .select2-selection--single { height: 43px!important; } .select2-container--default .select2-selection--single { border: 1px solid #dedbdb!important; border-radius: 0!important; } .select2-container .select2-selection--single { height: 43px!important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px!important; height: 40px!important; } .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 15px!important; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 8px!important; right: 7px!important; } .select2-container--open .select2-dropdown--below { border-top: 1px solid #dedbdb!important; top: 42px!important; border-radius: 0!important; } .select2-container--open .select2-dropdown--above { top: 27px!important; } .select2-search--dropdown .select2-search__field { margin-bottom: 0!important; } .select2-dropdown { border: 1px solid #dedbdb!important; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background-color: #d5275a!important; } /*-------------------09. End Shop page style---------------------*/ /*-------------------10. Start Product Details Page style---------------------*/ .beauty-product-single { padding: 100px 0 70px; } .beauty-product-single .product:not(.woocommerce-grouped-product-list-item) { display: flex; flex-flow: row wrap; } /*--------related product---------*/ .upsells, .related { padding: 0; margin-top: 50px; } .cross-sells > h2, .upsells > h2, .related > h2 { font-size: 17px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; } .upsells .row.products .price-content a.button, .related .row.products .price-content a.button { text-transform: none; height: auto; } .upsells .row.products .product .star-rating, .related .row.products .product .star-rating { margin-right: 0; } .upsells .row.products .product .price, .related .row.products .product .price { margin-bottom: 0; } /* rest of style contains woocommerce.css */ /*-------------------10. End Product Details Page style---------------------*/ /*-------------------11. Start Blog Page style---------------------*/ .blog-page.fullwidth .single-blog { margin-bottom: 50px; } .blog-page .single-blog { margin-bottom: 30px; } .blog-page .blog-content .entry-content { margin: 0; } .blog-page .blog-content p { padding: 15px 0; } .blog-page .single-blog .date { left: 0; padding: 8px 15px; position: absolute; text-align: center; top: 0; } .blog-page .single-blog .date h5 { font-size: 24px; line-height: 25px; } /*------------blog sidebar--------*/ .blog-sidebar .widget { margin-bottom: 40px; } .blog-sidebar .widget:last-child { margin-bottom: 0; } .widget .widget-title { color: #222; margin-bottom: 40px; font-size: 18px; line-height: 1.3; font-weight: 500; position: relative; text-transform: capitalize; } .widget .widget-title::before { content: ""; position: absolute; left: 0; bottom: -12px; height: 2px; width: 45px; } .widget_search form { align-items: flex-start; display: flex; flex-flow: row nowrap; justify-content: flex-start; } .widget_search input { background: #f7f3ef; border: 1px solid #ececec; font-size: 16px; height: 50px; line-height: 30px; padding: 5px 17px; width: 87%; border-right: 0px; margin-bottom: 0; border-radius: 3px 0 0 3px ; } .widget_search button { height: 50px; cursor: pointer; width: 13%; border: 1px solid #ececec; border-left: 0px; background: #f7f3ef; padding: 0; border-radius: 0 3px 3px 0; } /*---------latest blog area---------*/ .blab-recent-post .single-latest-post { background: #f7f3ef; display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: flex-start; padding: 15px; border: 2px solid #eeeeee; margin-bottom: 15px; } .blab-recent-post .single-latest-post:last-child { margin-bottom: 0px; } .blab-recent-post .single-latest-post>ul { padding-left: 20px; } .blab-recent-post .single-latest-post > a img { border: 2px solid #fff; } .blab-recent-post .single-latest-post li { color: #6f6f6f; font-family: roboto; font-size: 14px; } .blab-recent-post .single-latest-post li a { color: #222222; font-family: roboto; font-weight: 500; margin-bottom: 4px!important; display: block; } .blab-recent-post .single-latest-post h6 a { display: block; font-size: 17px; line-height: 20px; margin-bottom: 7px!important; } .widget_recent_entries ul > li { display: block!important; } .widget_recent_entries ul > li span.post-date { display: block; font-size: 14px; margin-left: 24px; line-height: normal; } /* ----------post categories area----------- */ .wp-block-archives li, .widget ul.children li, .widget > ul > li { display: flex; margin-bottom: 10px; flex-flow: row wrap; align-items: center; justify-content: space-between; } .wp-block-archives li:last-child, .widget ul.children li:last-child, .widget > ul > li:last-child { margin-bottom: 0; } .wp-block-archives li a, .wp-block-archives li span.count, .widget ul.menu > li ul.sub-menu a, .widget ul.menu > li > a, .widget ul.children li a, .widget > ul > li > a, .widget > ul > li span.count { color: #232428; display: inline-block; font-size: 15px; font-weight: 700; line-height: 26px; position: relative; padding-left: 23px; text-transform: capitalize; } .wp-block-archives li span.count, .widget ul.children li span.count, .widget > ul > li span.count { padding: 2px 7px; } .wp-block-archives li a:before, .widget ul.menu > li > a:before, .widget > ul > li > a::before { content: "\f111"; font-family: fontawesome; font-size: 10px; left: 0; position: absolute; top: 0; } .wp-block-archives li:hover span.count, .widget ul.children li span.count, .widget > ul > li:hover > span.count { border-radius: 3px; background: transparent; color: #fff; float: right; padding: 2px 7px; transition: all 0.3s ease; } .widget ul.children { width: 100%; } .widget ul.menu > li ul.sub-menu a, .widget ul.children li { position: relative; } .widget ul.menu > li ul.sub-menu a:before, .widget ul.children li:before { content: ""; position: absolute; left: 0; top: 14px; width: 10px; height: 2px; } .widget ul.menu > li ul.sub-menu a, .widget ul.children li a { margin-bottom: 0; padding-left: 17px; } .widget ul.children li span.count { color: #232428; } /* ---when has select box--- */ .widget .nice-select { width: 100%; border: 1px solid #dedede; border-radius: 0; font-size: 15px; float: none; } .widget .nice-select:after { height: 7px; right: 15px; width: 7px; } .widget .nice-select .list { width: 100%; max-height: 350px; overflow: auto; } .widget .nice-select .list li { text-transform: capitalize; } /* ---tagcloud--- */ .wp-block-tag-cloud a, .widget .tagcloud a { display: inline-block; border: 1px solid #eee; line-height: normal; padding: 7px 10px; margin: 4px; background: #f6f6f6; color: #666; font-size: 14px!important; } .widget ul#recentcomments li { display: block; } .widget ul#recentcomments li span { display: block; font-size: 18px; } .widget ul#recentcomments li a { font-weight: 400; font-size: 15px; } .widget ul#recentcomments li a:before { display: none; } /*-------------------11. End Blog Page style---------------------*/ /*-------------------12. Start Blog Details Page style---------------------*/ .blog-details-wrapper .post-thumbnail img { width: 100%; } .blog-details-wrapper .title { font-size: 24px; line-height: 34px; margin-top: 25px; word-break: break-all; } .blog-details-wrapper .post-meta .singel-meta { display: inline-block; margin-right: 23px; font-size: 15px; } .blog-details-wrapper .post-meta .singel-meta span, .blog-details-wrapper .post-meta .singel-meta a { color: #232428; } .blog-details-wrapper .post-author .byline { text-transform: capitalize; } .blog-details-wrapper .post-meta .singel-meta i { margin-right: 6px; } .blog-details-wrapper .admin-details { padding: 30px; margin-top: 30px; display: flex; flex-flow: row wrap; align-items: flex-start; width: 100%; } .blog-details-wrapper .admin-details > img { display: inline-block; width: 90px; border-radius: 100%; height: 90px; position: relative; top: 8px; } .blog-details-wrapper .admin-description { width: calc(100% - 91px); padding-left: 20px; } .blog-details-wrapper .blog-content .admin-description p { color: #fff; } .blog-details-wrapper .admin-description h5 { font-size: 18px; } .blog-details-wrapper .admin-description h5 a { color: #fff; font-weight: 500; text-transform: capitalize; } .blog-details-wrapper .admin-description h5 a:hover { text-decoration: underline; } /* ---tags--- */ .blog-details-wrapper .post-tags { margin-top: 30px; } .blog-details-wrapper .post-tags:before { content: ''; display: table; clear: both; } .blog-details-wrapper .post-tags span.tags-links a { display: inline-block; border: 1px solid #eee; line-height: normal; padding: 7px 10px; margin: 4px; background: #f6f6f6; color: #666; font-size: 14px; } .blog-details .post-navigation { margin-bottom: 50px; } .post-navigation .nav-links a .nav-subtitle { display: block; line-height: normal; font-weight: 600; color: #232428; } .post-navigation .nav-links .nav-previous .nav-subtitle i { margin-right: 7px; } .post-navigation .nav-links .nav-next .nav-subtitle i { margin-left: 7px; } /*-----------comment section-------------*/ .contact-info-section .title::before, .getin-section .get-in .title::before, .getin-section .consultant-wrapper .title::before, .comment-section .comment-title::before, .comment-section .comment-respond .comment-reply-title:before { bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 45px; } .comment-section .comment-title { padding-bottom: 5px; font-size: 20px; line-height: 36px; } .comment-section .comment-body { position: relative; padding-left: 75px; } .comment-section .comment-body .avatar { position: absolute; left: 0; top: 5px; } .comment-section .comment-body .comment-meta { display: flex; flex-flow: row wrap; margin-bottom: 5px; } .comment-section .comment-body .comment-meta .says { display: none; } .comment-section .comment-author .fn a { color: #232428; font-size: 18px; font-weight: 500; margin-bottom: 2px; position: relative; font-family: 'Roboto', sans-serif; text-transform: capitalize; } .comment-section .comment-metadata > a { margin: 0 10px; padding-left: 10px; position: relative; color: #7f7f7f; font-size: 13px; font-weight: 400; } .comment-section .comment-metadata > a:before { content: ""; position: absolute; height: 12px; width: 1px; background: #7f7f7f; left: 0; top: 1px; } .comment-section .comment-body .reply a { color: #808080; font-size: 14px; margin-top: 10px; display: inline-block; text-transform: capitalize; } .comment-list { margin-top: 15px; } .comment-list li.comment { border-bottom: 1px solid #eee; padding: 20px 0; } .comment-list li.comment:last-child { padding-bottom: 0; border-bottom: 0; } .comment-list li ul.children { border-top: 1px solid #eee; margin-top: 17px; } /*----------comment form section------------*/ .comment-respond { margin-top: 40px; } .comment-section .comment-respond .comment-reply-title { padding-bottom: 5px; margin: 0px 0 10px; font-size: 20px; line-height: 36px; font-weight: 500; position: relative; } .comment-section .comment-respond .logged-in-as a { color: #515151; } .comment-section .comment-respond .comment-notes { margin-bottom: 20px; width: 100%; order: 1; } .comment-section .comment-respond .comment-form-author { order: 2; width: 50%; padding-right: 10px; } .comment-section .comment-respond .comment-form-email { order: 3; width: 50%; padding-left: 10px; } .comment-section .comment-respond .comment-form-comment { order: 4; width: 100%; margin-top: 20px; } .comment-section .comment-respond .form-submit { order: 5; width: 100%; margin-top: 20px; } .comment-section .comment-respond .comment-form p label { display: none; } .comment-section .comment-respond .comment-form { display: flex; flex-flow: row wrap; } .comment-section .comment-respond .comment-form p input, .comment-section .comment-respond .comment-form p textarea { border: 1px solid #e5e5e5; font-size: 15px; padding: 8px 16px; margin-bottom: 0; } .comment-section .comment-respond .comment-form p input { height: 45px; } .comment-section .comment-respond .comment-form p textarea { width: 100%; resize: none; display: block; } .comment-section .comment-respond .comment-form .form-submit .submit { border: medium none; border-radius: 3px; color: #fff; padding: 13px 30px; cursor: pointer; text-transform: capitalize; width: auto; transition: all 0.3s ease; } .comment-section .comment-pagination { margin-top: 30px; } .comment-section .comment-pagination .page-numbers { background-color: #f7f3ef; border: none; color: #6b6b6b; font-size: 17px; margin: 0 2px; padding: 0px 15px; height: 40px; width: 40px; display: inline-block; line-height: 41px; text-align: center; } .comment-section .comment-pagination .current, .comment-section .comment-pagination .page-numbers:hover { color: #fff; } /*-------------------12. End Blog Details Page style---------------------*/ /*-------------------13. Start Contact Page style---------------------*/ .wpcf7-form label { width: 100%; margin-bottom: 30px; display: block; } .wpcf7-form .wpcf7-form-control-wrap { position: relative; display: block; } .wpcf7-form .wpcf7-form-control-wrap input { border: 1px solid #e5e5e5; font-size: 15px; padding: 10px 16px; height: 45px; margin: 0; } .wpcf7-form .wpcf7-form-control-wrap textarea { font-size: 15px; padding: 10px 16px; border: 1px solid #e5e5e5; margin: 0; height: 150px; } .wpcf7-form .submit-btn input { border: medium none; border-radius: 3px; color: #fff; padding: 13px 30px; cursor: pointer; text-transform: capitalize; width: auto; margin-bottom: 0; transition: all 0.3s ease; font-size: 15px; line-height: normal; } .wpcf7-form span.wpcf7-not-valid-tip { margin-top: 5px; line-height: normal; } /*-------------------13. End Contact Page style---------------------*/ /*-------------------14. Start 404 Page style---------------------*/ .error-section .body-img { position: absolute; z-index: 1; right: 0; bottom: -57px; width: 26%; } .error-section { background-image: url(../images/error-bg.png); background-repeat: repeat; position: relative; overflow: hidden; } .error-section .error-content { align-items: center; display: flex; flex-flow: row nowrap; justify-content: center; text-align: center; padding: 160px 0; } .error-section .error-txt h1 { font-size: 170px; line-height: 133px; display: inline-block; } .error-section .error-txt h1:before { background: #f4f5f6; content: "not found"; font-size: 22px; left: 33px; letter-spacing: 7px; line-height: 21px; padding: 11px 6px; position: absolute; text-transform: uppercase; top: 38px; width: 242px; } .error-section .error-txt h1:after { border-bottom: 44px solid #f4f5f6; border-left: 28px solid transparent; content: ""; height: 0; left: 6px; position: absolute; top: 37px; width: 0; } .error-section .error-txt h5 { letter-spacing: 7.3px; margin-left: 43px; margin-top: -9px; } .error-section .error-txt p { margin: 10px auto; width: 65%; } .error-section .error-txt p a { text-decoration: underline; } .error-section .error-txt .backto { font-weight: 500; text-transform: uppercase; color: #fff; display: inline-block; padding: 12px 30px; border-radius: 3px; } .error-section .error-txt .backto:hover { text-decoration: underline; } .error-section .search-form { display: flex; flex-flow: row; align-items: center; justify-content: center; margin: 14px auto 30px; width: 100%; max-width: 450px; } .error-section .search-form .search-field { margin: 0; padding: 5px 15px; height: 44px; width: calc(100% - 60px); margin-right: 10px; } .error-section .search-form .search-submit { height: 44px; padding: 10px 15px; border: 1px solid #ccc; } /*-------------------14. End 404 Page style---------------------*/ /*-------------------15. Start Cart Page style---------------------*/ .woocommerce-cart .entry-content > .woocommerce { padding: 75px 0 70px; } .woocommerce table.shop_table { width: 100%; background: #fff; border: 1px solid #ddd; margin: 0; border-radius: 0; border-collapse: collapse; } .woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: .75rem; vertical-align: middle; line-height: 20px; font-weight: 400; } .woocommerce table.shop_table th { font-weight: 700; } .woocommerce table.shop_table td, .woocommerce table.shop_table th { border-right: 1px solid #dee2e6; } .woocommerce table.shop_table td:last-child, .woocommerce table.shop_table th:last-child { border-right: none; } .woocommerce table.shop_table th.product-remove, .woocommerce table.shop_table td.product-remove { border-right: none; position: relative; padding: 0; } .woocommerce table.shop_table th.product-thumbnail, .woocommerce table.shop_table td.product-thumbnail { border-left: none; width: 115px; } .woocommerce table.shop_table td.product-thumbnail img { width: 80px; height: auto; border: 1px solid #ddd; border-radius: 3px; max-width: initial; } .woocommerce table.shop_table td.product-remove a.remove { width: 26px; height: 26px; color: #fff!important; font-size: 22px; border-radius: 100%; padding: 3px 7px; display: block; margin: 0 auto; font-weight: 400; position: absolute; left: 6px; top: 5px; } .woocommerce table.shop_table td.product-name a { display: inline-block; line-height: 1.3; } .woocommerce table.shop_table td.product-name a:hover { text-decoration: underline; } .woocommerce table.shop_table td .quantity input.qty { width: 100px; margin: 0; border: 1px solid #d1d1d1; text-align: left; padding: 8px 15px; } .woocommerce table.shop_table td .coupon { display: inline-flex; flex-flow: row wrap; align-items: center; width: 60%; max-width: 450px; } .woocommerce table.shop_table td .coupon label { margin: 0 10px 0 0; } .woocommerce table.shop_table td .coupon .input-text{ border: 1px solid #d1d1d1; max-width: 230px; width: 100%; margin: 0 10px 0 0; height: 46px; padding: 5px 15px; } .woocommerce table.shop_table td.actions button.button { border-radius: 3px; display: block; font-size: 16px; padding: 9px 18px; text-align: center; font-weight: 400; line-height: 26px; border: 1px solid transparent; cursor: pointer; background: transparent; transition: all 0.3s ease; } .woocommerce table.shop_table td .coupon button.button:hover { color: #fff; } .woocommerce table.shop_table td.actions button.button[name="update_cart"] { float: right; color: #fff; padding: 9px 24px; text-transform: capitalize; } .woocommerce table.shop_table td.actions button.button[name="update_cart"]:disabled { background: #eee; color: #aaa; border-color: #eee; cursor: not-allowed; } .woocommerce .cart-collaterals { display: flex; margin-top: 50px; flex-flow: row wrap; align-items: flex-start; } .woocommerce .cart-collaterals .cross-sells { width: calc(100% - 400px); padding-right: 30px; } .woocommerce .cart-collaterals .cart_totals { width: 100%; max-width: 400px; margin-bottom: 30px; margin-left: auto; } .woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-methods { margin-bottom: 15px; } .woocommerce .cart-collaterals .cart_totals .shipping-calculator-form { margin-top: 10px; } .woocommerce .cart-collaterals .cart_totals .shipping-calculator-form .button { border-radius: 3px; display: block; font-size: 16px; color: #fff; padding: 6px 18px; text-align: center; line-height: 26px; border: 1px solid transparent; cursor: pointer; background: transparent; transition: all 0.3s ease; margin-top: 15px; font-weight: 400; } .woocommerce .cart_totals > h2 { font-size: 17px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; } .woocommerce .cart_totals .checkout-button.alt { border-radius: 3px; display: block; font-size: 16px; color: #fff; padding: 12px 18px; text-align: center; line-height: 26px; border: 1px solid transparent; cursor: pointer; background: transparent; transition: all 0.3s ease; margin-top: 15px; font-weight: 400; } /*-------------------15. End Cart Page style---------------------*/ /*-------------------16. Start Checkout Page style---------------------*/ .woocommerce-checkout .entry-content > .woocommerce { padding: 75px 0 100px; } .woocommerce-checkout #customer_details { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: space-between; } .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 { width: 48%; flex: 0 0 48%; max-width: 48%; padding-right: 0; padding-left: 0; } .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { width: 48%; flex: 0 0 48%; max-width: 48%; padding-right: 0; padding-left: 0; } .woocommerce form .form-row { display: block; } .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last { width: 49%; } .woocommerce-form-coupon-toggle .woocommerce-info { background-color: #f8f9fa; color: #515151; border-top: 3px solid transparent; padding: 13px 18px; } .woocommerce-form-coupon-toggle .woocommerce-info .showcoupon { font-weight: 400; } .woocommerce-form-coupon-toggle .woocommerce-info::before { font-family: 'FontAwesome'; content: "\f05a"; } .woocommerce-form-coupon-toggle .woocommerce-info .showcoupon:hover { text-decoration: underline; } .woocommerce form.checkout_coupon { background: #f8f9fa; border: 1px solid #eee; padding: 15px 20px 20px; margin-bottom: 30px; display: flex; flex-flow: row wrap; } .woocommerce form.checkout_coupon .form-row { margin: 0; padding: 0; } .woocommerce form.checkout_coupon p:not(.form-row) { margin-bottom: 10px; line-height: normal; width: 100%; } .woocommerce form.checkout_coupon button.button { height: 45px; color: #fff; border: none; margin-left: 10px; padding: 0 1em; transition: all 0.3s ease; } /* --woocommerce billing field-- */ #order_review_heading, .woocommerce-additional-fields h3, .woocommerce-shipping-fields h3, .woocommerce-billing-fields h3 { font-size: 18px; font-weight: 500; text-transform: uppercase; line-height: normal; margin-bottom: 20px; } #order_review_heading { margin-top: 30px; } .woocommerce form .form-row { margin: 0 0 15px; } .woocommerce form .form-row label { line-height: normal; font-size: 15px; } .woocommerce form .form-row select, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { height: 45px; border: 1px solid #d1d1d1; font-size: 15px; padding: 8px 15px; margin-bottom: 0; } .woocommerce form .form-row textarea { min-height: 130px; } .woocommerce form .form-row .nice-select { width: 100%; border-radius: 0; height: 45px; border: 1px solid #d1d1d1; font-size: 15px; } .woocommerce-checkout-payment li, .woocommerce-shipping-methods li { position: relative; line-height: normal; margin-bottom: 17px; } .woocommerce-checkout-payment li:last-child, .woocommerce-shipping-methods li:last-child { margin-bottom: 0; } .cart_totals .woocommerce-shipping-methods input[type=radio], .woocommerce-checkout-review-order input[type=radio] { display: none; } .cart_totals .woocommerce-shipping-methods li label, .woocommerce-checkout-review-order li label { position: relative; line-height: normal; margin: 0; padding: 0 0 0 28px; cursor: pointer; } .cart_totals .woocommerce-shipping-methods li label:before, .woocommerce-checkout-review-order li label:before { content: ""; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border: 2px solid #dcdcdc; border-radius: 100%; transition: all 0.3s ease; } .woocommerce-checkout-review-order li.payment_method_paypal label:before { top: 4px; } .cart_totals .woocommerce-shipping-methods li label:after, .woocommerce-checkout-review-order li label:after { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; background: red; border-radius: 10px; transform: scale(0); transition: all 0.3s ease; } .woocommerce-checkout-review-order li.payment_method_paypal label:after { top: 9px; } .cart_totals .woocommerce-shipping-methods li input[type=radio]:checked + label:after, .woocommerce-checkout-review-order li input[type=radio]:checked + label:after { transform: scale(1); } #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background: #f8f9fa; margin-top: 25px; padding: 20px; } .payment_box.payment_method_bacs { display: none; } .woocommerce-checkout #payment .payment_method_paypal .about_paypal { line-height: normal; display: inline-block; margin-left: 10px; } .woocommerce-checkout #payment div.form-row:last-child { margin-bottom: 0; } .woocommerce .wc_payment_methods { margin-bottom: 20px; } .woocommerce #payment #place_order { padding: 9px 24px; display: inline-block; line-height: 26px; color: #fff; font-size: 16px; font-weight: 400; text-transform: uppercase; transition: all 0.3s ease; margin-top: 10px; border: none; } .woocommerce #payment .payment_box { background: #fff; padding: 10px 20px; margin-top: 10px; border: 1px solid #eee; } /* ---ship-to-different-address--- */ #ship-to-different-address { margin-bottom: 10px; } #ship-to-different-address label.woocommerce-form__label { display: block; margin-bottom: 20px; } #ship-to-different-address label.woocommerce-form__label input { width: 20px; height: 20px; margin: 0; position: relative; top: 2px; border: 1px solid; margin-right: 5px; cursor: pointer; } /*-------------------16. End Checkout Page style---------------------*/ /*-------------------17. Start Thank you Page style---------------------*/ .woocommerce-order-details { margin-bottom: 30px; } .woocommerce-customer-details .woocommerce-column__title, .woocommerce-order-details__title { line-height: 1.4; font-size: 17px; font-weight: 500; text-transform: uppercase; margin-bottom: 10px; } .woocommerce ul.order_details { padding: 18px 24px; margin: 4px 0 1.5em; background: #fff; border: 1px solid #ddd; display: flex; flex-flow: row wrap; } .woocommerce ul.order_details li { font-size: 14px; margin-right: 2em; text-transform: uppercase; line-height: 1; border-right: 1px dashed #d3ced2; padding: 10px 2em 10px 0; } .woocommerce ul.order_details li:last-of-type { border: none; } .woocommerce ul.order_details li strong { font-size: 17px; margin-top: 8px; display: block; text-transform: none; } .woocommerce .woocommerce-customer-details .woocommerce-columns { display: flex; flex-flow: row wrap; justify-content: space-between; } .woocommerce .woocommerce-customer-details { margin-bottom: 0; } .woocommerce .woocommerce-customer-details address { border: 1px solid #ddd; border-bottom-width: 1px; border-right-width: 1px; border-radius: 0; padding: 8px 15px; background: #fff; margin: 0; } .woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before { content: '\f095'; font-family: 'FontAwesome'; margin-right: 6px; } .woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before { content: '\f003'; font-family: 'FontAwesome'; margin-right: 6px; } /*-------------------17. End Thank you Page style---------------------*/ /*-------------------18. Start Search Page style---------------------*/ .search-page .no-results h1.page-title { font-size: 30px; line-height: 1.3; font-weight: 500; } .search-page .no-results form.search-form { margin-top: 12px; display: flex; flex-flow: row; align-items: center; } .search-page .no-results form.search-form .search-field { margin: 0; padding: 5px 15px; height: 44px; width: calc(100% - 60px); margin-right: 10px; } .search-page .no-results form.search-form .search-submit { height: 44px; border: 1px solid #ccc; } /*-------------------18. End Search Page style---------------------*/ /*-------------------19. Start account Page style---------------------*/ .woocommerce-account .entry-content .woocommerce { padding: 75px 0 100px; } .woocommerce-MyAccount-navigation { margin-bottom: 30px; } .woocommerce-MyAccount-navigation ul { display: flex; flex-flow: row wrap; } .woocommerce-MyAccount-navigation ul li a { display: block; background: #eaeaea; color: #515151; font-size: 14px; padding: 10px 22px; text-transform: uppercase; border-right: 1px solid #d6d4d4; } .woocommerce-MyAccount-navigation ul li:last-child a { border: none; } .woocommerce-MyAccount-navigation ul li.is-active a { color: #fff; } .woocommerce-MyAccount-content > p a:hover{ text-decoration: underline; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm, .woocommerce-MyAccount-content .woocommerce-Addresses{ display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: 10px; } .woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; flex-flow: row wrap; } .woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin-right: 10px; } .woocommerce-MyAccount-content form > h3, .woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-size: 17px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; margin-right: 10px; } .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper { display: flex; flex-flow: row wrap; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row, .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row { display: block; width: 50%!important; } .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row:nth-child(odd) { padding-right: 10px; } .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row:nth-child(even) { padding-left: 10px; } .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper #shipping_address_2_field, .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper #billing_address_2_field { padding-top: 28px; } .woocommerce-ResetPassword .form-row .button, .beauty-login .form-row .button, .woocommerce-MyAccount-content .woocommerce-EditAccountForm .button, .woocommerce-MyAccount-content .woocommerce-address-fields .button { display: inline-block; height: 40px; color: #fff; padding: 0px 20px; vertical-align: middle; line-height: 40px; border: none; margin-top: 10px; transition: all 0.3s ease; border-radius: 0; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm { margin: 0 -10px; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row { padding: 0 10px; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset { width: 100%; margin-top: 10px; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset .form-row { padding: 0; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset legend { line-height: normal; font-size: 17px; font-weight: 500; text-transform: uppercase; font-family: 'Roboto'; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm .button { margin-left: 10px; } /*----login registration-------*/ .woocommerce-ResetPassword, .beauty-login { max-width: 450px; margin: 0 auto; } .beauty-login h2 { line-height: normal; font-weight: 500; margin-bottom: 20px; text-align: center; } .beauty-login input[type=checkbox] { width: auto; margin: 0; } .beauty-login .form-row label { font-size: 15px; display: block; } .woocommerce-ResetPassword .form-row { width: 100%!important; } .woocommerce .beauty-login .col-2, .woocommerce .beauty-login .col-1 { width: 100%; flex: 0 0 100%; max-width: 100%; } /*-------------------19. End account Page style---------------------*/