/* Theme Name: Dr. Csernus Krisztina bőrgyógyász Theme URI: https://drcsernus.hu Description: Dr. Csernus Krisztina bőrgyógyász weboldalának alapértelmezett sablonja. Author: 360 Marketing Author URI: https://360-marketing.hu Version: 1.0 */ *{ margin: 0; padding: 0; border: 0; flex-wrap: wrap; text-decoration: none; } *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :root { --color-gold: #d1a17c; --color-green: #09995a; --color-red: #d7315a; --color-sand: #fbefde; --color-body-text: #080a0d; --color-turquoise: #e0f0f2; --color-silver: #f5f5f5; --color-silver-line: #ebebeb; } body { font-family: 'Nunito Sans', sans-serif; font-size: 18px; color: var(--color-body-text); line-height: 25px; overflow-x: hidden; } body.rwd_menu__opened { overflow: hidden; } h1, h2, h3, h4, h5 { font-weight: normal; } button, input, select, textarea { font-family: 'Nunito Sans', sans-serif; font-size: 18px; outline: none; } select { height: 50px; } img.alignleft { margin: 0 20px 5px 0; float: left; } img.alignright { margin: 0 0 5px 20px; float: right; } hr { height: 30px; border-top: 3px solid var(--color-silver-line); } .left { float: left; } .right { float: right; } .clear, .related { clear: both; } .inner { max-width: 1280px; margin: auto; position: relative; } .inner_900 { max-width: 900px; } .inner_800, .page-id-49 #content .inner, .page-id-1288 #content .inner { max-width: 800px; } .flex { display: flex; gap: 40px; } .flex .inner_800, .sider { flex-grow: 1; } @media only screen and (min-width: 960px) { .sider { max-width: 33%; } } .hide { display: none !important; } .b_r_3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .b_r_5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .b_r_10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .b_r_50p { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .required, .red { color: var(--color-red); } .button { height: 60px; padding: 0 30px; font-size: 18px; font-weight: 500; text-decoration: none !important; text-align: center; color: white !important; line-height: 60px; background-color: var(--color-gold); cursor: pointer; display: inline-block; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .button:hover { background-color: var(--color-body-text); } .button:disabled { color: white !important; background-color: #ccc; } .button.button_h30 { height: 36px; padding: 0 15px; font-size: 15px; line-height: 36px; } .button.button_h40 { height: 40px; padding: 0 15px; font-size: 16px; line-height: 40px; } .button.button_h50 { height: 50px; padding: 0 15px; line-height: 50px; } .button.button_red { background-color: var(--color-red); } .button.button_red:hover { background-color: var(--color-body-text); } .button.button_white_hover:hover { color: #000 !important; background-color: white; } .button.button_outline { color: #000 !important; background-color: transparent !important; border: 1px solid var(--color-body-text); } .button.button_outline.button_outline_white { color: white !important; background-color: transparent !important; border-color: white; } .button.button_outline.button_outline_white:hover { background-color: var(--color-gold) !important; border-color: var(--color-gold); } .button-treat { margin-top: 10px; font-weight: 500; text-decoration: none !important; text-align: center; color: white !important; line-height: 40px; background-color: var(--color-gold); cursor: pointer; padding : 0 20px; } /* Font */ .center { text-align: center; } .italic { font-style: italic; } .uppercase { text-transform: uppercase; } .sec_font { font-family: 'Noto Serif', serif; font-weight: 300; } /* Animation */ .anim_1ms { -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .anim, ul.slick-dots li, .button:before, li:after { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .anim_cubic { -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } /* Checkbox and radio */ input[type=checkbox], input[type=radio] { width: 20px; min-width: 20px; height: 20px; margin: -4px 4px 0 0 !important; padding: 0 !important; text-align: center !important; background-color: white; border: 1px solid #d8d8d8; clear: none; cursor: pointer; display: inline-block; line-height: 0; outline: 0; vertical-align: middle !important; position: relative; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: .05s border-color ease-in-out; transition: .05s border-color ease-in-out; } input[type=radio] { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } input[type=radio]:checked:before, input[type=checkbox]:checked:before { top: 4px; right: 4px; bottom: 4px; left: 4px; text-align: center; background: var(--color-green); position: absolute; display: block; content: '' !important; } input[type=radio]:checked:before { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /* ------------- MODAL ------------- */ .fancybox-button--close { background-color: var(--color-blue); } .fancybox-button--close path { fill: white !important; } .fancybox-container .modal_added_to_cart { width: 100%; max-width: 400px; padding: 30px; } .fancybox-container .modal_added_to_cart p { margin-bottom: 20px; } .fancybox-container .modal_added_to_cart p.last, .fancybox-container .modal_added_to_cart p:last-child { margin-bottom: 0; } .fancybox-container .modal_added_to_cart h3 { margin-bottom: 20px; font-size: 25px; font-weight: 700; color: var(--color-body-text); line-height: 100%; } .fancybox-container .modal_added_to_cart a.close_fancybox { font-size: 14px; text-decoration: underline; color: #666; } .fancybox-container .modal_added_to_cart a.close_fancybox:hover { color: var(--color-body-text); } .fancybox-container .modal_added_to_cart .close_fancybox_wrap { padding: 15px 30px; font-size: 16px; text-align: center; line-height: 20px; background: #e1e5ec; } .fancybox-container .modal_added_to_cart .close_fancybox { font-weight: 700; text-decoration: underline; color: #000; } .fancybox-container .modal_added_to_cart .close_fancybox:hover { text-decoration: none; } /* ---------------- RWD NAV ---------------- */ #rwd_menu { width: 100%; left: 0; top: 0; bottom: 0; background: rgba(255 255 255 / 20%); position: fixed; z-index: 1000; visibility: hidden; opacity: 0; } #rwd_menu .rwd_menu_wrap { width: 500px; height: 100%; right: -100%; top: 0; background: var(--color-body-text); position: absolute; overflow-y: auto; } #rwd_menu .rwd_menu_wrap h3 { margin-bottom: 10px; font-size: 25px; font-weight: 700; text-transform: uppercase; color: var(--color-gold); } #rwd_menu .rwd_menu_wrap .rwd_menu_section { padding-left: 50px; padding-right: 50px; } #rwd_menu .rwd_menu_wrap .rwd_menu_section.useful_info { padding-top: 50px; padding-bottom: 50px; background: rgba(255 255 255 / 5%); } /* RWD menu header */ #rwd_menu .rwd_header { height: 120px; position: relative; } #rwd_menu .rwd_header img { width: auto; height: 40px; left: 50px; display: block; position: absolute; } #rwd_menu .rwd_header .rwd_button { width: 50px; height: 50px; right: 50px; background: var(--color-gold); position: absolute; z-index: 2; cursor: pointer; } #rwd_menu .rwd_header .rwd_button .burg { width: 20px; height: 2px; left: 15px; top: calc(50% - 1px); background: transparent; display: block; position: absolute; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #rwd_menu .rwd_header .rwd_button .burg:before, #rwd_menu .rwd_header .rwd_button .burg:after { width: 20px; height: 2px; background: white; position: absolute; content: ''; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #rwd_menu .rwd_header .rwd_button .burg:before { top: 0; left: 0; -webkit-transform: rotate(45deg); } #rwd_menu .rwd_header .rwd_button .burg:after { top: 0; right: 0; -webkit-transform: rotate(-45deg); } /* Contacts */ #rwd_menu .rwd_contacts { margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid rgba(255 255 255 / 20%); display: flex; justify-content: space-between; } #rwd_menu .rwd_contacts .button { width: calc(50% - 10px); padding: 0 10px; } /* Menu */ #rwd_menu .menu ul li { float: none !important; position: relative; } #rwd_menu .menu ul li.hide_in_rwd { display: none; } #rwd_menu .menu ul li a { color: white; display: block; } /* Primary menu */ #rwd_menu ul.primary_menu { margin-bottom: 30px; } #rwd_menu ul.primary_menu li { border-bottom: 1px solid rgba(255 255 255 / 20%); } #rwd_menu ul.primary_menu li:last-child { border-bottom: none; } #rwd_menu ul.primary_menu li a { padding: 15px 0; font-size: 18px; font-weight: 700; color: white; line-height: 100%; display: block; position: relative; } #rwd_menu ul.primary_menu li a:hover { text-decoration: underline; text-decoration-thickness: 1px; } #rwd_menu ul.primary_menu li.menu-item-has-children > a:after { width: 30px; height: 30px; right: 0; top: calc(50% - 15px); background: url(images/icon_arrow_down_white.svg) no-repeat center; background-size: 16px; border: 1px solid rgba(255 255 255 / 20%); position: absolute; content: ''; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #rwd_menu ul.primary_menu li.menu-item-has-children.open > a:after { ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #rwd_menu ul.primary_menu li ul { display: none; list-style: none; } #rwd_menu ul.primary_menu li ul li { color: var(--color-gold); } #rwd_menu ul.primary_menu li ul li a { padding: 15px 0 15px 30px; font-size: 17px; color: white !important; line-height: 20px; position: relative; } #rwd_menu ul.primary_menu li ul li a:before { width: 6px; height: 6px; left: 10px; top: 21px; background: var(--color-gold); position: absolute; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /* Secondary menu */ #rwd_menu ul.secondary_menu { margin-bottom: 50px; list-style: none; } #rwd_menu ul.secondary_menu li { margin-bottom: 5px; } #rwd_menu ul.secondary_menu li a { font-size: 18px; font-weight: 700; color: white; } #rwd_menu ul.secondary_menu li a:hover { text-decoration: underline; } /* Language chooser */ #rwd_menu ul.language-chooser { border: 1px solid rgba(255 255 255 / 20%); display: flex; list-style: none; } #rwd_menu ul.language-chooser li { border-right: 1px solid rgba(255 255 255 / 20%); flex-grow: 1; flex-basis: 0; } #rwd_menu ul.language-chooser li:last-child { border-right: none; } #rwd_menu ul.language-chooser li a { width: 100%; height: 40px; text-transform: uppercase; color: white; display: flex; justify-content: center; align-content: center; } #rwd_menu ul.language-chooser li.active a { background: rgba(255 255 255 / 5%); } body.rwd_menu__opened #rwd_menu { visibility: visible; opacity: 100%; } body.rwd_menu__opened #rwd_menu .rwd_menu_wrap { right: 0; } /* --------------- HEADER --------------- */ #header { width: 100%; left: 0; top: 0; background: transparent; position: fixed; z-index: 100; } #header .inner { height: 100%; } /* Header top */ #header .header_top { height: 40px; font-size: 15px; color: white; } #header .header_top a { color: white; } #header .header_top a:hover { text-decoration: underline; } #header .header_top .header_top_wrap { height: 100%; border-bottom: 1px solid rgba(255 255 255 / 20%); display: flex; justify-content: space-between; } #header .header_top .header_top_wrap .wrap_left { height: 100%; line-height: 40px; } #header .header_top .header_top_wrap .wrap_right ul { height: 100%; display: flex; align-items: center; list-style: none; } #header .header_top .header_top_wrap .wrap_right ul li { margin-left: 30px; position: relative; } #header .header_top .header_top_wrap .wrap_right ul li:first-child { margin-left: 0; } #header .header_top .header_top_wrap .wrap_right ul li.menu-item-has-children ul { position: absolute; z-index: 10; } #header .header_top .header_top_wrap .wrap_right ul li.qtranxs-lang-menu ul { width: 100px; height: auto; right: 0; padding: 10px; background: white; visibility: hidden; opacity: 0%; } #header .header_top .header_top_wrap .wrap_right ul li.qtranxs-lang-menu ul li { width: 100%; margin-left: 0; } #header .header_top .header_top_wrap .wrap_right ul li.qtranxs-lang-menu ul li a { color: var(--color-body-text); display: flex; align-items: center; } #header .header_top .header_top_wrap .wrap_right ul li.qtranxs-lang-menu ul li a img { width: 18px !important; height: 12px !important; margin-right: 5px; display: block; } #header .header_top .header_top_wrap .wrap_right ul li.qtranxs-lang-menu:hover ul { visibility: visible; opacity: 100%; } /* Header bottom */ #header .header_bottom { height: 120px; } #header .header_bottom a:hover { text-decoration: underline; } /* Logo */ #header .header_bottom .logo { height: 60px; display: inline-flex; z-index: 1; } #header .header_bottom .logo img { width: auto; height: 100%; display: block; } /* Menu */ #header .header_bottom ul.menu { height: 40px; left: 160px; border-left: 1px solid rgba(255 255 255 / 20%); display: flex; position: absolute; z-index: 1; list-style: none; } #header .header_bottom ul.menu li { height: 100%; margin-left: 40px; position: relative; } #header .header_bottom ul.menu li a { height: 100%; font-size: 18px; color: white; display: flex; align-items: center; } #header .header_bottom ul.menu li.menu-item-has-children:after { bottom: 0; opacity: 0%; } #header .header_bottom ul.menu li.menu-item-has-children:hover:after { width: 0; height: 0; left: 50%; bottom: -20px; border: solid transparent; border-color: transparent; border-bottom-color: var(--color-gold); border-width: 10px; margin-left: -10px; position: absolute; content: ''; pointer-events: none; opacity: 100%; } #header .header_bottom ul.menu li .megamenu { width: 1280px; left: -200px; top: calc(100% + 10px); padding-top: 20px; position: absolute; z-index: 10; opacity: 0%; visibility: hidden; } #header .header_bottom ul.menu li .megamenu .categories_wrap { background: white; border-top: 4px solid var(--color-gold); display: flex; box-shadow: 0 5px 10px rgba(0 0 0 / 10%); } #header .header_bottom ul.menu li .megamenu .categories_wrap .wrap_left { width: calc(100% - 300px); padding-left: 50px; } #header .header_bottom ul.menu li .megamenu .categories_wrap .categories_header { width: 100%; height: 60px; padding-right: 30px; border-bottom: 1px solid var(--color-silver-line); display: flex; align-items: center; align-content: center; justify-content: space-between; } #header .header_bottom ul.menu li .megamenu .categories_wrap .categories_header h2 { font-size: 22px; font-weight: 300; font-style: italic; text-transform: uppercase; line-height: 100%; } #header .header_bottom ul.menu li .megamenu .categories_wrap .categories_header a { font-size: 15px; font-weight: 700; text-decoration: underline; color: var(--color-body-text) !important; } #header .header_bottom ul.menu li .megamenu .categories_wrap .treatment_wrap { padding: 30px 0; display: flex; } #header .header_bottom ul.menu li .megamenu .categories_wrap .treatment_wrap .treatment { width: 33.3333333333%; padding: 0 30px; border-left: 1px solid var(--color-silver-line); } #header .header_bottom ul.menu li .megamenu .categories_wrap .treatment_wrap .treatment:first-child { padding-left: 0; border-left: none; } #header .header_bottom ul.menu li .megamenu .categories_wrap .treatment_wrap .treatment h3 { margin-bottom: 10px; font-size: 20px; font-weight: 700; line-height: 100%; } #header .header_bottom ul.menu li .megamenu .categories_wrap .treatment_wrap .treatment ul { list-style: none !important; } #header .header_bottom ul.menu li .megamenu .categories_wrap .treatment_wrap .treatment ul li { margin-left: 0 !important; } #header .header_bottom ul.menu li .megamenu .categories_wrap .treatment_wrap .treatment ul li a { font-size: 16px; color: var(--color-body-text) !important; } #header .header_bottom ul.menu li .megamenu .categories_wrap .wrap_right { width: 300px; background-color: var(--color-body-text); } #header .header_bottom ul.menu li .megamenu .categories_wrap .wrap_right .images { height: 100%; position: relative; } #header .header_bottom ul.menu li .megamenu .categories_wrap .wrap_right .images .image { width: 100%; height: 100%; left: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: cover; display: none; position: absolute; } #header .header_bottom ul.menu li .megamenu .categories_wrap .wrap_right .images .image.image_20 { display: block; } #header .header_bottom ul.menu li.menu-item-has-children:hover .megamenu { top: 100%; opacity: 100%; visibility: visible; } /* Profile and Cart */ #header .profile__cart { right: 0; display: flex; position: absolute; } #header .profile { height: 40px; margin-left: 30px; padding-left: 60px; font-size: 18px; color: white; line-height: 40px; background: url(images/icon_user_white.svg) no-repeat 30px center; background-size: auto 16px; border-left: 1px solid rgba(255 255 255 / 20%); display: block; position: relative; } #header .ajax_cart { height: 40px; padding-left: 30px; font-size: 18px; color: white; line-height: 40px; background: url(images/icon_cart_white.svg) no-repeat left center; background-size: auto 16px; position: relative; } /* RWD button */ #header .rwd_button { width: 50px; height: 50px; right: 20px; background: var(--color-gold); position: absolute; z-index: 2; cursor: pointer; } #header .rwd_button .burg { width: 20px; height: 2px; left: 15px; top: calc(50% - 1px); background: white; display: block; position: absolute; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #header .rwd_button .burg:before, #header .rwd_button .burg:after { width: 20px; height: 2px; background: white; position: absolute; content: ''; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #header .rwd_button .burg:before { top: -6px; left: 0; } #header .rwd_button .burg:after { top: 6px; right: 0; } body.rwd_menu__opened #header .rwd_button .burg { background: transparent; } body.rwd_menu__opened #header .rwd_button .burg:before { top: 0; -webkit-transform: rotate(45deg); } body.rwd_menu__opened #header .rwd_button .burg:after { top: 0; -webkit-transform: rotate(-45deg); } /* Fixed header */ body.fixed_header #header { background: white; box-shadow: 0 5px 10px rgba(0 0 0 / 10%); } body.fixed_header #header .header_top { display: none; } body.fixed_header #header .header_bottom .logo img.white { display: none; } body.fixed_header #header .header_bottom .logo img.black { display: block !important; } body.fixed_header #header .header_bottom ul.menu { border-left-color: var(--color-silver-line); } body.fixed_header #header .header_bottom ul.menu li a { color: var(--color-body-text); } body.fixed_header #header .profile { color: var(--color-body-text); background-image: url(images/icon_user.svg); border-left-color: var(--color-silver-line); } body.fixed_header #header .ajax_cart { color: var(--color-body-text); background-image: url(images/icon_cart.svg); } /* No post thumbnail */ body.no_post_thumbnail #header { background: white; } body.no_post_thumbnail #header .header_top { color: var(--color-body-text); } body.no_post_thumbnail #header .header_top a { color: var(--color-body-text); } body.no_post_thumbnail #header .header_top .header_top_wrap { border-bottom-color: var(--color-silver-line); } body.no_post_thumbnail #header .header_bottom .logo img.white { display: none; } body.no_post_thumbnail #header .header_bottom .logo img.black { display: block !important; } body.no_post_thumbnail #header .header_bottom ul.menu { border-left-color: var(--color-silver-line); } body.no_post_thumbnail #header .header_bottom ul.menu li a { color: var(--color-body-text); } body.no_post_thumbnail #header .profile { color: var(--color-body-text); background-image: url(images/icon_user.svg); border-left-color: var(--color-silver-line); } body.no_post_thumbnail #header .ajax_cart { color: var(--color-body-text); background-image: url(images/icon_cart.svg); } /* -------------- SEARCH -------------- */ .search-content { padding: 40px 16px 0 16px; overflow-x: hidden; overflow-y: auto; width: 100%; max-height: 500px; } .search-content::-webkit-scrollbar { width: 10px; } /* Track */ .search-content::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } /* Handle */ .search-content::-webkit-scrollbar-thumb { background: var(--color-gold); border-radius: 10px; } .search-content { padding-bottom: 40px; } .search-box { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 26px; text-decoration: none !important; margin-bottom: 20px; } .search-box .search-box-img { width: 80px; height: 80px; } .search-box .search-box-img img { width: 100%; height: 100%; object-fit: cover; } .search-box .search-box-content { width: 80%; } .search-title { text-decoration: none; color: var(--color-body-text); font-size: 20px; font-weight: 700; } .search-box-content .content-box { color: var(--color-body-text); font-size: 16px; font-weight: 400; line-height: 1.5; padding-top: 10px; } .search-title:hover { color: var(--color-gold); } .search-wrapper { position: absolute; top: 16%; right: -40px; } .search-wrapper #openSearchModal .search_icon { display: flex; justify-content: center; align-items: center; background: var(--color-gold); border-radius: 50%; width: 30px; height: 30px; } #openSearchModal .search_icon:hover { background: var(--color-body-text); cursor: pointer; } /* Styles for the modal container */ .modal-search { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } /* Styles for the modal content */ .modal-content { position: relative; display: flex; flex-direction: column; align-items: center; background-color: #fff; margin: 100px auto; padding-bottom: 40px; border: 1px solid #888; width: 50%; z-index: 10; } /* tablet query */ @media (max-width: 768px) { .modal-content { width: 80%; } .search-content { max-height: 420px; } } /* mobile query */ @media (max-width: 480px) { .search-wrapper { right: -36px !important; } .modal-content { width: 90%; } .search-content { max-height: 400px; } .search-box .search-box-content { width: 100%; } } /* Styles for the close button */ .close { position: absolute; right: 0; top: 0; padding: 6px; cursor: pointer; color: #1d1d1d; z-index: 10; } .close:hover, .close:focus { color: var(--color-gold); text-decoration: none; cursor: pointer; } .search-form { position: relative; width: 100%; height: 200px; padding: 16px; } .search-form input { height: 40px; border: 0; color: #2f2f2f; font-size: 18px; margin-top: 50px } .search-form #js-filter { margin: 20px 0 20px; } .search-form input[type="search"] { width: 100%; background: #fff; padding: 0 1.6rem; z-index: 2; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--color-gold); position: relative; } /* search input x button*/ .search-form input[type="search"]::-webkit-search-cancel-button { background-image: url("data:image/svg+xml;utf8,"); height: 18px; width: 18px; -webkit-appearance: none; } .search-content #loader { display: none; margin: 0 auto; text-align: center; } @media (max-width: 1280px) { .search-wrapper { top: 18%; right: -40px; } } /* -------------- SLIDER -------------- */ #slider_wrap { background-color: var(--color-body-text); position: relative; overflow: hidden;} #slider_wrap:before { width: calc(50% - 30px); height: 120px; left: -10px; bottom: 0; border: 10px solid var(--color-gold); position: absolute; content: ''; z-index: 10; } #slider_wrap:after { width: 50%; height: 80px; left: 0; bottom: 0; background: var(--color-sand); position: absolute; content: ''; z-index: 10; } #slider_wrap .slick-slide { max-height: 850px; min-height: 230px; background-color: var(--color-body-text); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; overflow: hidden; } #slider_wrap .slick-slide:before { padding-top: 80%; display: block; content: ''; } #slider_wrap .slick-slide .cover { width: 100%; height: 100%; left: 0; top: 0; position: absolute; } #slider_wrap .slick-slide .inner { height: 100%; display: flex; align-items: center; align-content: center; } #slider_wrap .slick-slide .title { max-width: 70%; font-size: 70px; color: white; line-height: 100%; } /* Dots */ #slider_wrap ul.slick-dots { right: calc((100% - 1280px) /2); bottom: 35px; display: flex; position: absolute; list-style: none; } #slider_wrap ul.slick-dots li { width: 10px; height: 10px; margin-left: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #slider_wrap ul.slick-dots li button { width: 6px; height: 6px; font-size: 0; background: white; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #slider_wrap ul.slick-dots li.slick-active { border-color: white; } #slider_wrap ul.slick-dots li.slick-active button { background: transparent; } /* Video */ #slider_video { height: 100vh; min-height: 250px; background-color: var(--color-body-text); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; overflow: hidden; } #slider_video video { width: 100%; height: auto; left: 0; bottom: 0; position: absolute; } #slider_video .cover { width: 100%; height: 100%; left: 0; top: 0; background: rgba(21 44 93 / 50%); position: absolute; } #slider_video .cover a.play { width: 100px; height: 100px; left: 50%; top: 50%; background: white url(images/icon_play_blue.svg) no-repeat center; background-size: auto 30px; position: absolute; z-index: 2; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* ------------------ TREATMENTS ------------------ */ #treatments { padding: 100px 0; position: relative; } #treatments:before { width: 100%; height: calc(100% - 250px); left: 0; top: 0; background: var(--color-sand); position: absolute; content: ''; } #treatments .marketing_text { max-width: 800px; margin: 0 auto 50px; padding-bottom: 150px; font-size: 50px; font-weight: 300; line-height: 120%; background: url(images/decor_line_vertical_1.png) no-repeat center bottom; } #treatments .treatments_wrap { margin-left: -15px; margin-right: -15px; display: flex; } #treatments .treatments_wrap .treatment { width: calc(33.3333333333% - 30px); margin: 30px 15px 0; color: var(--color-body-text); } #treatments .treatments_wrap .treatment:nth-child(-n+3) { margin-top: 0; } #treatments .treatments_wrap .treatment img { width: 100%; height: auto; display: block; } #treatments .treatments_wrap .treatment h3 { padding-top: 20px; font-size: 20px; font-weight: 700; line-height: 100%; } /* -------------------------- FRONTPAGE PRODUCTS -------------------------- */ .frontpage_products { margin: 70px 0; } .frontpage_products .section_title { margin-bottom: 50px; font-size: 40px; color: var(--color-body-text); line-height: 100%; } .frontpage_products .section_title h1 { font-size: 40px; line-height: 100%; display: inline-block; } /* ------------------ CATEGORIES ------------------ */ #categories { padding: 70px 0; background-color: #faf3e9; background-image: url(images/bgr_categories.webp); background-image: -webkit-image-set(url(images/bgr_categories.webp) 1x); background-image: image-set(url(images/bgr_categories.png) 1x); background-position: center bottom; background-repeat: no-repeat; } #categories .section_title { margin-bottom: 50px; font-size: 40px; color: var(--color-body-text); line-height: 100%; } #categories .section_title.has_text_decor { width: max-content; margin: 0 auto 50px; position: relative; } #categories .section_title.has_text_decor:before { width: 60px; height: 50px; left: -45px; top: -35px; background: url(images/text_decor_1.svg) no-repeat right center; background-size: auto 100%; position: absolute; content: ''; } #categories .categories_wrap { margin-left: -1px; margin-right: -1px; display: flex; flex-wrap: wrap; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #categories .categories_wrap .item { width: calc(33.3333333333% - 2px); height: 200px; margin: 2px 1px 0; background-color: var(--color-body-text); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } #categories .categories_wrap .item:nth-child(-n+3) { margin-top: 0; } #categories .categories_wrap .item .cover { width: 100%; height: 100%; left: 0; top: 0; padding: 0 10px 30px 30px; background: rgba(0 0 0 / 10%); display: flex; align-items: end; position: absolute; } #categories .categories_wrap .item h3 { font-size: 35px; color: white; text-shadow: 2px 2px rgba(0 0 0 / 30%); line-height: 100%; } /* -------------------- TESTIMONIALS -------------------- */ #testimonials { padding: 100px 0; background: var(--color-turquoise) url(images/bgr_testimonials.jpg) no-repeat center; } #testimonials .title { margin-bottom: 30px; font-size: 14px; font-weight: 700; } #testimonials .testimonial img { width: 100px; height: 100px; margin: 0 auto 20px; display: block; } #testimonials .testimonial .author_text { margin-bottom: 30px; font-size: 40px; font-weight: 300; line-height: 120%; } #testimonials ul.slick-dots { margin-top: 50px; display: flex; justify-content: center; list-style: none; } #testimonials ul.slick-dots li { width: 10px; height: 10px; margin: 0 5px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #testimonials ul.slick-dots li button { width: 6px; height: 6px; font-size: 0; background: var(--color-body-text); cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #testimonials ul.slick-dots li.slick-active { border-color: var(--color-body-text); } #testimonials ul.slick-dots li.slick-active button { background: transparent; } /* ----------- USP ----------- */ .usps { padding: 70px 0; background: var(--color-sand); border-bottom: 10px solid var(--color-gold); } .usps .usp_wrap { display: flex; } .usps .usp_wrap .usp { width: 33.3333333333%; margin-top: 50px; padding: 0 30px; } .usps .usp_wrap .usp:nth-child(-n+3) { margin-top: 0; } .usps .usp_wrap .usp img { width: 90px; height: 90px; margin: 0 auto 20px; display: block; } .usps .usp_wrap .usp .usp_title { margin-bottom: 10px; font-size: 18px; font-weight: 700; line-height: 20px; } .usps .usp_wrap .usp .usp_text { font-size: 16px; line-height: 20px; } body.home .usps { background: transparent; border-bottom: none; } body.post-type-archive-product .usps { background: #fbe9e6; border-bottom-color: var(--color-body-text); } /* ---------------- ABOUT ME ---------------- */ #aboutme { padding-top: 100px; position: relative; } /*#aboutme:before { width: 100%; height: 100px; left: 0; bottom: 0; background: var(--color-sand); position: absolute; content: ''; z-index: -1; }*/ #aboutme .aboutme_wrap { display: flex; } #aboutme .aboutme_wrap .wrap_left { width: 50%; } #aboutme .aboutme_wrap .wrap_left .image { width: 100%; max-width: 430px; background-color: var(--color-body-text); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } #aboutme .aboutme_wrap .wrap_left .image:before { padding-top: 140%; display: block; content: ''; } #aboutme .aboutme_wrap .wrap_left .image:after { width: 100%; height: 100%; top: -40px; right: -40px; border: 10px solid var(--color-gold); position: absolute; content: ''; z-index: -1; } #aboutme .aboutme_wrap .wrap_right { width: 50%; padding: 70px 0 170px; } #aboutme .aboutme_wrap .wrap_right h1 { font-size: 40px; font-weight: 300; font-style: italic; text-transform: uppercase; line-height: 100%; } #aboutme .aboutme_wrap .wrap_right h4 { margin: 10px 0; font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 100%; } #aboutme .aboutme_wrap .wrap_right p { margin-bottom: 20px; line-height: 30px; } #aboutme .aboutme_wrap .wrap_right p:first-of-type { margin-top: 30px; } #aboutme .aboutme_wrap .wrap_right p:last-of-type { margin-bottom: 30px; } /* ------------ BLOG ------------ */ #blog { padding: 100px 0; background: var(--color-sand) url(images/bgr-sand-1.png) no-repeat right bottom; } #blog .title { max-width: 800px; margin: 0 auto 50px; font-size: 40px; font-weight: 300; line-height: 100%; } #blog .subtitle { max-width: 800px; margin: -30px auto 50px; font-size: 14px; font-weight: 700; line-height: 140%; } .blog_wrap { margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; } .blog_wrap .blog_post { width: calc(33.3333333333% - 30px); margin: 50px 15px 0; } .blog_wrap .blog_post:nth-child(-n+3) { margin-top: 0; } .blog_wrap .blog_post .thumbnail { display: block; position: relative; overflow: hidden; } .blog_wrap .blog_post .thumbnail img { width: 100%; height: auto; display: block; position: relative; transform: scale(1) translateZ(0); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } .blog_wrap .blog_post .thumbnail:hover img { -ms-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); transform: scale(1.05) translateZ(0); } .blog_wrap .blog_post .thumbnail .datetime { width: 60px; height: 70px; left: 20px; top: 0; font-size: 12px; font-weight: 700; color: var(--color-body-text); line-height: 100%; letter-spacing: 1px; background: white; display: flex; justify-content: center; align-content: center; position: absolute; } .blog_wrap .blog_post .thumbnail .datetime span { width: 100%; display: block; } .blog_wrap .blog_post .entry { padding-top: 20px; } .blog_wrap .blog_post .entry h3 { margin-bottom: 10px; font-size: 24px !important; font-weight: 400; line-height: 100%; } .blog_wrap .blog_post .entry h3 a { text-decoration: none !important; color: var(--color-body-text); } .blog_wrap .blog_post .entry h3 a:hover { color: var(--color-body-text); } .blog_wrap .blog_post .entry .excerpt { margin-bottom: 20px; font-size: 16px; color: #666; line-height: 25px; } .blog_wrap .blog_post .entry .excerpt p { margin-bottom: 0 !important; } .blog_wrap .blog_post .entry .read_more { font-size: 12px; font-weight: 700; text-decoration: underline; color: var(--color-body-text); line-height: 100%; letter-spacing: 1px; opacity: 50%; } .blog_wrap .blog_post .entry .read_more:hover { opacity: 100%; } body.post-type-archive-product #blog { background: transparent; } /* ---------------------- PRODUCTS VIDEO ---------------------- */ #products_video { height: 600px; color: white; background-color: var(--color-body-text); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; position: relative; } #products_video .cover { width: 100%; height: 100%; left: 0; top: 0; background: rgba(0 0 0 / 20%); position: absolute; } #products_video .products_video_wrap { height: 100%; display: flex; justify-content: center; align-items: center; align-content: center; } #products_video .video_title { width: 100%; margin: 10px 0; font-size: 60px; line-height: 100%; } #products_video .video_subtitle { width: 100%; margin: 10px 0; } #products_video .video_play { width: 60px; height: 60px; margin-top: 30px; background: url(images/icon_play_white.svg) no-repeat center; background-size: auto 100%; display: block; } /* ------------------- BREADCRUMBS ------------------- */ .rank-math-breadcrumb { margin-bottom: 10px; font-size: 14px; font-weight: 700; line-height: 14px; } .rank-math-breadcrumb a { text-decoration: underline; font-weight: 400; color: var(--color-blue); } .rank-math-breadcrumb a:hover { color: var(--color-body-text); } .rank-math-breadcrumb .separator { font-weight: 400; } body.category-blog .rank-math-breadcrumb, body.page-template-fullwidth .rank-math-breadcrumb { text-align: center; } /* ---------------------- BEFORE CONTENT ---------------------- */ #before_content { height: 400px; background-color: var(--color-body-text); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } #before_content .cover { width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(8 10 13 / 30%); position: absolute; content: ''; } #before_content .before_content_wrap { max-width: 800px; height: 100%; padding-top: 100px; display: flex; align-items: center; align-content: center; } #before_content .before_content_wrap:after { width: 100%; height: 60px; left: 0; bottom: -20px; border: 10px solid rgba(255 255 255 / 15%); position: absolute; content: ''; } #before_content .before_content_wrap h1 { width: 100%; margin-bottom: 20px; font-size: 50px; color: white; line-height: 120%; } #before_content .before_content_wrap .subtitle { color: white; } #before_content .rank-math-breadcrumb { width: 100%; margin-bottom: 0 !important; color: white; } #before_content .rank-math-breadcrumb a { color: white; } #before_content.no_post_thumbnail { height: auto; padding: 10px 0; background-color: var(--color-gold); } #before_content.no_post_thumbnail .rank-math-breadcrumb p { margin-bottom: 0 !important; } #before_content.is_shop { height: 90vh; } #before_content.is_shop .before_content_wrap h1 { font-size: 70px; } /* --------------- CONTENT --------------- */ body.no_post_thumbnail #container { padding-top: 160px; } body.no_post_thumbnail.fixed_header #container { padding-top: 120px; } #content { padding: 50px 0; } body.single-product #content { padding-top: 0; position: relative; } body.single-product #content:after { width: 50%; height: 1px; right: 0; top: 0; background: var(--color-silver-line); position: absolute; content: ''; } /* Is Checkout */ body.woocommerce-checkout #content { padding: 0; border-bottom: 10px solid var(--color-gold); position: relative; } body.woocommerce-checkout #content:before { width: calc((100% - 1280px) /2); height: 100%; right: 0; top: 0; background: var(--color-sand); position: absolute; content: ''; } body.woocommerce-checkout.woocommerce-order-received #content { padding: 50px 0; } body.woocommerce-checkout.woocommerce-order-received #content:before { display: none; } body.woocommerce-checkout.woocommerce-order-received #content .woocommerce-order { max-width: 900px; margin: auto; } #content h1 { margin-bottom: 30px; font-size: 35px; line-height: 100%; } #content h2 { margin-bottom: 30px; font-size: 35px; font-weight: 300; font-style: italic; text-transform: uppercase; color: var(--color-body-text); line-height: 100%; } #content h3 { margin-bottom: 30px; font-size: 25px; font-weight: 700; color: var(--color-gold); line-height: 100%; } #content h3 a { text-decoration: none !important; color: var(--color-gold); } #content h3 a:hover { text-decoration: underline !important; text-decoration-thickness: 1px; } #content a { text-decoration: underline; color: var(--color-body-text); } #content a:hover { text-decoration: none; } #content p { margin-bottom: 20px; } #content ul { margin-bottom: 20px; margin-left: 20px; } #content ol { margin-bottom: 20px; margin-left: 20px; list-style: decimal; } #content table.simple_table { width: 100%; margin-bottom: 20px; } #content blockquote { margin: 0 -50px 20px; padding: 30px 50px; font-size: 18px; font-style: italic; line-height: 30px; background: var(--color-sand); position: relative; } #content blockquote:before { width: 4px; height: 60%; max-height: 100px; left: 0; top: 0; background: var(--color-gold); position: absolute; content: ''; } #content blockquote p:last-child { margin-bottom: 0 !important; } /* Prices */ #content .treatment_price { margin-bottom: 50px; } #content .treatment_price h3 { margin-bottom: 10px !important; } #content .treatment_price .price_table_wrap { margin-bottom: 15px; font-size: 16px; line-height: 100%; display: flex; justify-content: space-between; position: relative; } #content .treatment_price .price_table_wrap:last-child { margin-bottom: 0; } #content .treatment_price .price_table_wrap:before { width: 100%; height: 1px; left: 0; bottom: 1px; background: #eee; position: absolute; content: ''; z-index: -1; } #content .treatment_price .price_table_wrap span { background: white; display: inline-block; } #content .treatment_price .price_table_wrap .name span { padding-right: 10px; } #content .treatment_price .price_table_wrap .value span { padding-left: 10px; } #content .treatment_list .treatment_cat { margin-bottom: 50px; } #content .treatment_list .treatment_cat:last-child { margin-bottom: 0; } #content .treatment_list_wrap { margin-left: -15px; margin-right: -15px; display: flex; } #content .treatment_list_wrap .treatment { width: calc(33.3333333333% - 30px); height: 120px; margin: 30px 15px 0; padding-left: 30px; padding-right: 100px; text-decoration: none !important; background: var(--color-sand); display: flex; align-content: center; position: relative; } #content .treatment_list_wrap .treatment:nth-child(-n+3) { margin-top: 0; } #content .treatment_list_wrap .treatment:hover { background: white; box-shadow: 0 5px 10px rgba(0 0 0 / 10%); } #content .treatment_list_wrap .treatment:after { width: 50px; height: 50px; right: 30px; top: calc(50% - 25px); background: transparent url(images/icon_arrow_right.svg) no-repeat center; background-size: auto 16px; position: absolute; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #content .treatment_list_wrap .treatment:hover:after { background-color: var(--color-gold); background-image: url(images/icon_arrow_right_white.svg); } #content .treatment_list_wrap .treatment h3 { margin-bottom: 0 !important; font-size: 22px !important; color: var(--color-body-text) !important; } /* Contact Form */ #content .contact_wrap { display: flex; } #content .contact_wrap .wrap_left { width: 50%; } #content .contact_wrap .wrap_left .wrap_left_top { padding-right: 50px; } #content .contact_wrap .wrap_left .wrap_left_bottom { padding-top: 20px; padding-right: 50px; border-top: 1px solid var(--color-silver-line); } #content .contact_wrap .social_media_wrap { display: flex; } #content .contact_wrap .social_media_wrap a { width: 50px; height: 50px; margin-right: 10px; font-size: 0; background-color: var(--color-gold); background-repeat: no-repeat; background-position: center; background-size: auto 24px; } #content .contact_wrap .social_media_wrap a:hover { background-color: var(--color-body-text); } #content .contact_wrap .social_media_wrap a.facebook { background-image: url(images/icon_facebook_white.svg); } #content .contact_wrap .social_media_wrap a.youtube { background-image: url(images/icon_youtube_white.svg); } #content .contact_wrap .social_media_wrap a.instagram { background-image: url(images/icon_instagram_white.svg); } #content .contact_wrap .social_media_wrap a.tiktok { background-image: url(images/icon_tiktok_white.svg); } #content .contact_wrap .wrap_right { width: 50%; padding-left: 50px; border-left: 1px solid var(--color-silver-line); } * Single */ #content.single .datetime { margin-bottom: 20px; padding-bottom: 20px; padding-left: 30px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background: url(images/icon_calendar.svg) no-repeat left 1px; background-size: 20px auto; border-bottom: 1px solid var(--color-silver-line); } #content.single .tags { margin-bottom: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; } #content.single .tags a { height: 30px; margin-left: 10px; padding: 0 10px; font-size: 14px; font-weight: 500; text-transform: none; text-decoration: none !important; line-height: 30px; background: var(--color-sand); display: block; } #content.single .tags a:hover { color: white !important; background: var(--color-gold); } /* Iframe wrapper */ #content .iframe_wrapper { height: 0; margin-bottom: 30px; padding-bottom: 56.25%; padding-top: 25px; position: relative; } #content .iframe_wrapper iframe { width: 100%; height: 100%; left: 0; top: 0; position: absolute; } /* Videos */ #content .video_single_wrap { margin-left: -15px; margin-right: -15px; display: flex; } #content .video_single_wrap .video { width: 100%; margin: 0 15px 30px; } #content .video_single_wrap .video.video_type_facebook { width: calc(33.333333333% - 30px); } .video_wrap { margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; } .video_wrap .video { width: calc(33.3333333333% - 30px); margin: 50px 15px 0; } .video_wrap .video:nth-child(-n+3) { margin-top: 0; } .video_wrap .video .thumbnail { display: block; position: relative; overflow: hidden; } .video_wrap .video .thumbnail img { width: 100%; height: auto; display: block; position: relative; transform: scale(1) translateZ(0); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } .video_wrap .video .thumbnail:hover img { -ms-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); transform: scale(1.05) translateZ(0); } .video_wrap .video .entry { padding-top: 20px; } .video_wrap .video .entry h3 { margin-bottom: 5px !important; font-size: 24px !important; font-weight: 400; line-height: 100%; } .video_wrap .video .entry h3 a { text-decoration: none !important; color: var(--color-body-text); } .video_wrap .video .entry h3 a:hover { color: var(--color-body-text); } .video_wrap .video .entry small {} /* ------------------------ TABLE OF CONTENT ------------------------ */ .ez-toc-counter { margin-bottom: 30px !important; padding: 40px !important; background: var(--color-light-blue) !important; border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .ez-toc-counter .ez-toc-title { margin-bottom: 20px !important; font-size: 20px !important; font-weight: 700 !important; color: #000 !important; display: block !important; } .ez-toc-counter ul { margin-left: 0 !important; margin-bottom: 0 !important; list-style: none !important; } .ez-toc-counter ul li { margin-bottom: 5px !important; padding-left: 30px !important; position: relative; list-style: none !important; } .ez-toc-counter ul li:last-child { margin-bottom: 0; } .ez-toc-counter ul li:before { left: 0; margin-right: 1em; color: var(--color-blue); position: absolute; content: '→'; } .ez-toc-counter ul li a { color: var(--color-blue) !important; } .ez-toc-counter ul li a:hover { color: var(--color-body-text) !important; } .ez-toc-counter ul li a:before { display: none !important; } /* --------------- SIDEBAR --------------- */ #open_sidebar { height: 50px; margin-bottom: 20px; padding: 0; font-weight: 700; color: white; text-align: center; background: var(--color-green); justify-content: center; align-items: center; overflow: hidden; cursor: pointer; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } #open_sidebar img { width: auto; height: 20px; margin-right: 10px; display: block; } --------------- FOOTER --------------- */ #footer {} /* Footer top */ #footer .footer_top { padding: 70px 0; } #footer .footer_top h3 { margin-bottom: 30px; margin-left: -40px; font-size: 25px; font-weight: 700; color: var(--color-gold); line-height: 100%; } #footer .footer_top ul { list-style: none; } #footer .footer_top ul li { line-height: 30px; } #footer .footer_top ul li a { font-size: 17px; color: var(--color-body-text); line-height: 100%; } #footer .footer_top ul li a:hover { text-decoration: underline; } #footer .footer_top .footer_top_wrap { display: flex; } #footer .footer_top .footer_top_wrap .wrap_left { width: 25%; padding-left: 40px; position: relative; } #footer .footer_top .footer_top_wrap .wrap_left:before { width: 1px; top: 50px; bottom: 0; left: 20px; background: var(--color-silver-line); position: absolute; content: ''; } #footer .footer_top .footer_top_wrap .wrap_left.wrap_left_logo { padding-left: 0; display: flex; align-items: center; } #footer .footer_top .footer_top_wrap .wrap_left.wrap_left_logo:before { display: none; } #footer .footer_top .social_media_wrap { display: flex; } #footer .footer_top .social_media_wrap a { width: 50px; height: 50px; margin-right: 10px; font-size: 0; background-color: var(--color-gold); background-repeat: no-repeat; background-position: center; background-size: auto 24px; } #footer .footer_top .social_media_wrap a:hover { background-color: var(--color-body-text); } #footer .footer_top .social_media_wrap a.facebook { background-image: url(images/icon_facebook_white.svg); } #footer .footer_top .social_media_wrap a.youtube { background-image: url(images/icon_youtube_white.svg); } #footer .footer_top .social_media_wrap a.instagram { background-image: url(images/icon_instagram_white.svg); } #footer .footer_top .social_media_wrap a.tiktok { background-image: url(images/icon_tiktok_white.svg); } /* Footer bottom */ #footer .footer_bottom { padding: 20px 0; font-size: 15px; line-height: 20px; position: relative; } #footer .footer_bottom:before { height: 1px; left: 0; width: 100%; top: 0; border-top: 1px solid var(--color-silver-line); position: absolute; content: ''; } #footer .footer_bottom small { display: block; } /* -------------- BARION -------------- */ #logos { padding: 20px 0; background: white; } #logos .inner { display: flex; justify-content: center; } #logos img { width: auto; height: auto; max-height: 30px; margin: 0 10px auto; display: block; } /* ----------------- SCROLL UP ----------------- */ #scroll_up { width: 60px; height: 60px; right: 20px; top: -60px; background: url(images/icon_spider.svg) no-repeat center; background-size: 100% auto; display: block !important; position: fixed; z-index: 99 !important; } #scroll_up:before { width: 1px; height: 100vh; top: calc(-100vh + 30px); right: 30px; background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #b8b8b6), color-stop(50%, transparent)); background: -o-linear-gradient(bottom, #b8b8b6 50%, transparent 50%); background: linear-gradient(0deg, #b8b8b6 50%, transparent 50%); background-repeat: repeat-y; background-position: 0 0; background-size: 2px 10px; display: block; position: absolute; pointer-events: none; z-index: -1; content: ''; } #scroll_up:after { width: 50px; height: 50px; left: -26px; top: -30px; background: url(images/icon_bubble_2.svg) no-repeat center; background-size: 100% auto; position: absolute; pointer-events: none; content: ''; z-index: 1; } body.scroll_up_active #scroll_up { top: calc(100vh - 100px); } /* ----------- RWD ----------- */ @media only screen and (max-width: 1280px) { /* DISPLAY: None */ .hide_in_1280 { display: none !important; } /* DISPLAY: Block */ .show_in_1280 { display: block !important; } /* DEFAULT */ .p_l_20 { padding-left: 20px !important; } .p_r_20 { padding-right: 20px !important; } /* HEADER: Profile and Cart */ #header .profile__cart { right: 130px; } /* SLIDER */ #slider_wrap .slick-slide .title { font-size: 60px; } /* TREATMENTS */ #treatments { padding: 75px 0; } #treatments .marketing_text { font-size: 40px; } #treatments .treatments_wrap { margin-left: -10px; margin-right: -10px; } #treatments .treatments_wrap .treatment { width: calc(33.3333333333% - 20px); margin: 30px 10px 0; } /* TESTIMONIALS */ #testimonials { padding: 75px 0; } #testimonials .testimonial .author_text { font-size: 35px; } /* USP */ .usps .usp_wrap .usp { padding: 0 20px; } /* ABOUT ME */ #aboutme { padding-top: 75px; } #aboutme:before { height: 200px; } #aboutme .aboutme_wrap .wrap_left .image { width: 80%; max-width: 430px; background-color: var(--color-body-text); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } /* BLOG */ #blog { padding: 75px 0; } .blog_wrap { margin-left: -10px; margin-right: -10px; } .blog_wrap .blog_post { width: calc(33.3333333333% - 20px); margin: 50px 10px 0; } /* PRODUCTS VIDEO */ #products_video .video_title { font-size: 50px; } /* BEFORE CONTENT */ #before_content .before_content_wrap h1 { font-size: 40px; } #before_content.is_shop .before_content_wrap h1 { font-size: 60px; } /* CONTENT */ body.no_post_thumbnail #container { padding-top: 120px; } /* CONTENT: Treatments */ #content .treatment_list_wrap { margin-left: -10px; margin-right: -10px; } #content .treatment_list_wrap .treatment { width: calc(33.3333333333% - 20px); margin: 20px 10px 0; } /* CONTENT: Contact Form */ #content .contact_wrap .wrap_left { padding-left: 20px; } #content .contact_wrap .wrap_right { padding-left: 20px; padding-right: 20px; } /* CONTENT: Videos */ .video_wrap { margin-left: -10px; margin-right: -10px; } .video_wrap .video { width: calc(33.3333333333% - 20px); margin: 50px 10px 0; } /* FOOTER: Footer top */ #footer .footer_top h3 { margin-left: -20px; } #footer .footer_top .footer_top_wrap .wrap_left { width: 33.3333333333%; padding-left: 20px; } #footer .footer_top .footer_top_wrap .wrap_left:before { left: 0; } } @media only screen and (max-width: 960px) { /* DISPLAY: None */ .hide_in_960 { display: none !important; } /* DISPLAY: None */ .show_in_960 { display: block !important; } .add-to-cart-button.show_in_960 { bottom: -60px !important; } /* RWD NAV: RWD menu header */ #rwd_menu .rwd_header { height: 100px; } /* HEADER: Header bottom */ #header .header_bottom { height: 100px; } /* SLIDER */ #slider_wrap .slick-slide:before { padding-top: 60%; } #slider_wrap .slick-slide .title { width: 100%; max-width: none; font-size: 50px; text-align: center; } /* TREATMENTS */ #treatments { padding: 50px 0; } #treatments .marketing_text { font-size: 30px; padding-bottom: 120px; } /* TESTIMONIALS */ #testimonials { padding: 50x 0; } #testimonials .testimonial .author_text { font-size: 30px; } /* USP */ .usps { padding: 50px 0; } .usps .usp_wrap .usp .usp_title { font-size: 16px; } .usps .usp_wrap .usp .usp_text { font-size: 15px; } /* ABOUT ME */ #aboutme { padding-top: 50px; } #aboutme:before { height: 60%; } #aboutme .aboutme_wrap .wrap_left { width: 100%; } #aboutme .aboutme_wrap .wrap_left .image { width: 100%; margin: auto; } #aboutme .aboutme_wrap .wrap_right { width: 100%; padding: 50px 0 0; text-align: center; } #aboutme .aboutme_wrap .wrap_right h1 { font-size: 40px; font-weight: 300; font-style: italic; text-transform: uppercase; line-height: 100%; } /* BLOG */ #blog { padding: 50px 0; } /* PRODUCTS VIDEO */ #products_video .video_title { font-size: 40px; } /* BEFORE CONTENT */ #before_content { height: 300px; } #before_content .before_content_wrap:after { width: auto; left: 20px; right: 20px; } #before_content .before_content_wrap h1 { font-size: 30px; } #before_content.is_shop .before_content_wrap h1 { font-size: 50px; } /* CONTENT */ body.no_post_thumbnail #container { padding-top: 100px; } body.no_post_thumbnail.fixed_header #container { padding-top: 100px; } #content { padding: 30px 0; } /* Is Checkout */ body.woocommerce-checkout #content .inner { padding-right: 20px; } #content h1 { font-size: 40px; } #content h2 { font-size: 30px; } #content blockquote { margin: 0 0 20px; padding: 30px; } /* CONTENT: Treatments */ #content .treatment_list_wrap .treatment { width: calc(50% - 30px); } #content .treatment_list_wrap .treatment:nth-child(3) { margin-top: 20px; } #content .treatment_list_wrap .treatment h3 { font-size: 20px !important; } /* CONTENT: Contact Form */ #content .contact_wrap .wrap_left { width: 100%; margin-bottom: 50px; padding-right: 20px; } #content .contact_wrap .wrap_left .wrap_left_top { padding-right: 0; } #content .contact_wrap .wrap_left .wrap_left_bottom { padding-right: 0; } #content .contact_wrap .wrap_right { width: 100%; } /* FOOTER: Footer top */ #footer .footer_top { padding: 50px 0; } #footer .footer_top .footer_top_wrap .wrap_left { width: 50%; } #footer .footer_top .footer_top_wrap .wrap_left.social_media { width: 100%; margin-top: 50px; } } @media only screen and (max-width: 768px) { /* DISPLAY: None */ .hide_in_768 { display: none !important; } /* SLIDER */ #slider_wrap:before { height: 80px; } #slider_wrap:after { height: 50px; } #slider_wrap .slick-slide:before { padding-top: 70%; } #slider_wrap .slick-slide .title { font-size: 40px; } /* TREATMENTS */ #treatments:before { height: calc(100% - 200px); } /* TESTIMONIALS */ #testimonials .testimonial .author_text { font-size: 25px; } /* ABOUT ME */ #aboutme .aboutme_wrap .wrap_right h1 { font-size: 30px; } /* BLOG */ #blog .title { font-size: 30px; } .blog_wrap .blog_post { width: calc(50% - 20px); } .blog_wrap .blog_post:nth-child(3) { margin-top: 30px; } body.home .blog_wrap .blog_post:nth-child(3) { display: none !important; } /* BEFORE CONTENT */ #before_content.is_shop .before_content_wrap h1 { font-size: 40px; } /* CONTENT: Treatments */ #content .treatment_list_wrap { margin-left: 0; margin-right: 0; } #content .treatment_list_wrap .treatment { width: 100%; height: 80px; margin: 20px 0 0; padding-left: 20px; } #content .treatment_list_wrap .treatment:nth-child(2) { margin-top: 20px; } #content .treatment_list_wrap .treatment:after { width: 40px; height: 40px; right: 20px; top: calc(50% - 20px); } /* CONTENT: Videos */ .video_wrap .video { width: calc(50% - 20px); } .video_wrap .video:nth-child(3) { margin-top: 50px; } } @media only screen and (max-width: 640px) { /* RWD NAV */ #rwd_menu .rwd_menu_wrap { width: 100%; } /* TREATMENTS */ #treatments .treatments_wrap { margin-left: 0; margin-right: 0; } #treatments .treatments_wrap .treatment { width: 100%; margin: 30px 0 0 !important; } #treatments .treatments_wrap .treatment:first-child { margin-top: 0 !important; } /* USP */ .usps .usp_wrap .usp { width: 100%; max-width: 400px; margin: 30px auto 0; padding: 0; } .usps .usp_wrap .usp:nth-child(2), .usps .usp_wrap .usp:nth-child(3) { margin-top: 30px; } .usps .usp_wrap .usp .usp_title { font-size: 18px; } .usps .usp_wrap .usp .usp_text { font-size: 16px; } /* ABOUT ME */ #aboutme .aboutme_wrap .wrap_left .image:after { width: auto; top: -30px; left: 20px; right: 20px; } /* BLOG */ .blog_wrap { margin-left: 0; margin-right: 0; } .blog_wrap .blog_post { width: 100%; max-width: 480px; margin: 30px auto 0; } .blog_wrap .blog_post:nth-child(2) { margin-top: 30px; } body.home .blog_wrap .blog_post:nth-child(3) { display: block !important; } /* CONTENT: Videos */ .video_wrap { margin-left: 0; margin-right: 0; } .video_wrap .video { width: 100%; margin: 50px 0 0; } .video_wrap .video:nth-child(2) { margin-top: 50px; } /* FOOTER: Footer top */ #footer .footer_top .footer_top_wrap .wrap_left { width: 100%; } #footer .footer_top .footer_top_wrap .wrap_left.info { margin-top: 50px; } } @media only screen and (max-width: 480px) { /* DISPLAY: None */ .hide_in_480 { display: none !important; } /* RWD NAV */ #rwd_menu .rwd_menu_wrap .rwd_menu_section { padding-left: 20px; padding-right: 20px; } /* RWD NAV: RWD menu header */ #rwd_menu .rwd_header img { left: 20px; } #rwd_menu .rwd_header .rwd_button { right: 0 !important; } #header .profile__cart { right: 115px; } /* HEADER: Logo */ #header .header_bottom .logo { height: 40px; } #header .header_bottom .logo img { width: auto !important; height: 100% !important; } /* SLIDER */ #slider_wrap:before { height: 50px; } #slider_wrap:after { height: 20px; } #slider_wrap .slick-slide:before { padding-top: 80%; } /* TREATMENTS */ #treatments .marketing_text { font-size: 25px; } /* FOOTER: Footer bottom */ #footer .footer_bottom .law { display: block; } } .quantity .screen-reader-text{ display:none; } #products_video .video_play{ display:none !important; } /* #bgvideo-container { position: fixed; width: 100%; padding-top: 56.25%; overflow: hidden; top: 0; } #bgvideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width: 1370px) and (min-width: 1024px) { #bgvideo-container { padding-top: 0; height: calc(100vh - 850px); } #bgvideo { top: -850px; } }*/ #bgvideo-container { position: fixed; top: 0; overflow: hidden; width: 100vw; height: 100vh; } #bgvideo { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); } @media (min-aspect-ratio: 16/9) { #bgvideo { height: 56.25vw; } } @media (max-aspect-ratio: 16/9) { #bgvideo { width: 177.78vh; } } @media only screen and (max-width: 768px) { #bgvideo { transform: translate(-50%, -70%); width: 120vh; } } /* 3 product in a row on mobile */ @media only screen and (max-width: 768px) { .woocommerce-shop ul.products { flex-wrap: wrap; align-items: start; /*self-end;*/ } .woocommerce-shop ul.products > li > .add-to-cart-button { position: initial !important; margin-top: 10px; } .woocommerce-shop ul.products li { margin-top: 0; } .woocommerce-shop ul.products li h3 { min-height: 60px; } } /* slider */ .woocommerce-shop .mySlides {display: none;} .woocommerce-shop img {vertical-align: middle;} .woocommerce-shop .slideshow-container { max-width: 100%; position: relative; margin: auto; } .woocommerce-shop .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .4} to {opacity: 1} } @media only screen and (min-width: 769px) { .woocommerce-shop .mySlides { background: none !important; } } @media only screen and (max-width: 768px) { .woocommerce-shop .slideshow-container img { display: none; } .woocommerce-shop .slideshow-container { min-height: 50vh; } .woocommerce-shop .mySlides { background-size: cover !important; background-position: center !important; display: block; height: 50vh; } } /* new pricelist */ .page-id-1288 h3:not(:first-of-type), .page-id-49 h3:not(:first-of-type) { margin-top: 40px; } dl { font-size: 18px; display: flex; flex-wrap: wrap; } dt, dd { flex: 1 1 50%; margin-bottom: 5px; } dt { text-align: right; } dt span, dd span { background: white; position: relative; } dt span { padding-left: 10px; } dd span { padding-right: 10px; } dd:before, dt:before { content: ""; height: 1px; background-color: #eee; display: block; position: relative; top: 20px; display: block; }