/*
Theme Name: Kalium - Medical Theme
Theme URI: https://laborator.co/themes/kalium/
Author: Laborator
Author URI: https://laborator.co/
Description: Start creating that amazing website that you have always wanted, only with Kalium — Connect with Laborator on: <a href="https://themeforest.net/user/laborator">Envato</a> &bull; <a href="https://twitter.com/thelaborator">Twitter</a> &bull; <a href="https://www.facebook.com/laboratorcreative">Facebook</a> &bull; <a href="https://www.instagram.com/laboratorcreative/">Instagram</a>
Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: kalium
Text Domain: kalium
*/
/* ===========================================================
Custom modification only for MEDICAL Demo - START
=========================================================== */

/* Button Color and Radius */
.button {
    background-color: #6dab3c;
    border-radius: 50px;
}

/* Header Background Color and Padding */
header.main-header {
    background: #fff;
}

/* Standard Header Menus: Margin Left */
.main-header.menu-type-standard-menu .standard-menu-container div.menu>ul>li+li, .main-header.menu-type-standard-menu .standard-menu-container ul.menu>li+li {
    margin-left: 25px;
}

/* Header: Menu Buy Button */
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li.special-menu-button > a,
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li.special-menu-button > a {
    color: #6dab3c;
    border: 1px solid #6dab3c;
    padding: 5px 10px;
    line-height: 1;
    border-radius: 50px;
}

/* Header: Menu Buy Button on Hover */
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li.special-menu-button > a:hover,
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li.special-menu-button > a:hover {
    color: #fff;
    background: #6dab3c;
}

/* Homepage: Blog Posts and Departments More Button */
.more-link {
    border: none;
    top: 0px;
    right: 0px;
    position: absolute;
}

/* Homepage: Blog Posts See More Button Border */
.show-more .reveal-button {
    min-width: 150px;
    border: none;
}

/* Homepage: Blog Posts See More Button Spacing */
.more-link .show-more {
    padding:0px;
    margin: 0px;
    margin-top: 35px;
}

/* Homepage: Blog Posts See More Button Border Color */
.more-link .show-more .reveal-button a {
    width: auto;
    background-color: #6dab3c;
    border-radius: 50px;
    padding: 15px;
    color: #fff;
    line-height: 1;
}

/* Homepage: Blog Posts See More Button Arrow */
.more-link .show-more .reveal-button a:before {
    content: "»";
    margin-left: 10px;
    float: right;
    line-height : 1;
}

/* Homepage: All Departments Button */
.lab-portfolio-items .more-link .show-more .reveal-button a {
    background-color: #fff;
    color: #009db3;
}

/* Homepage Testimonials: pagination padding */
.wpb-js-composer .vc_tta-tabs.vc_tta-has-pagination.testimonials:not(.vc_tta-tabs-position-bottom) {
    padding-bottom: 35px;
}

/* Homepage Testimonials: pagination position */
.wpb-js-composer .testimonials.vc_tta-tabs.vc_tta-has-pagination .vc_pagination {
    right: auto;
    margin: 0px;
}

/* Homepage: Departments List Area */
.departments-list ul {
    padding: 0px;
    list-style-type: none;
}

/* Homepage: Departments Last List Area Style */
.departments-list ul li {
    border-bottom: 1px solid #18a9bd;
    list-style-position: inside;
    padding: 8px 0px;
    margin: 0px;
    color: #fff;
}

/* Homepage: Departments Last List Area Without Dotted Border in Bottom */
.departments-list ul li:last-child {
    border: none;
}

/* Homepage: Departments Area Box */
body.home .portfolio-holder.portfolio-type-1 .portfolio-item .info {
    background-color: transparent;
    box-shadow: none;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

/* Homepage: Departments Area Heading and Paragraph Color */
body.home .portfolio-holder.portfolio-type-1 .portfolio-item .info h3 a,
body.home .portfolio-holder.portfolio-type-1 .portfolio-item .info p {
    color: #fff;
}

/* Departments Page: Departments Boxes */
.portfolio-holder.portfolio-type-1 .portfolio-item .info {
    background-color: #fff;
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.1);
    padding: 22px 30px;
}

/* Departments Page: Departments Area Heading and Paragraph Color */
.portfolio-holder .item-box .info h3 {
    margin-bottom: 15px;
    margin-top: 0px;
}

/* Departments Page: Department Title Link Color */
.portfolio-holder .item-box .info h3 a {
    color: #2a527b;
}

/* Homepage: Departmens Area Title Width*/
.home-departments .portfolio-title-holder .pt-column-title {
    max-width: 75%;
}

/* Homepage: Departmens Area Title */
.home-departments.lab-portfolio-items .portfolio-title-holder h1,
.home-departments.lab-portfolio-items .portfolio-title-holder h2 {
    color: #fff;
}

/* Homepage: Departmens Area Description */
.home-departments .section-title p {
    color: #fff;
}

/* Homepage: Departmens Area More Button */
.lab-portfolio-items .more-link {
    margin-top: 0px;
}

/* Footer Area: No Margin in Bottom */
.site-footer .footer-widgets {
    margin-bottom: 0;
}

/* Footer: Widgets Navigation Menu Area Padding Left */
.site-footer .footer-widgets .widget.widget_nav_menu {
    padding-left: 100px;
}

/* Footer: Widgets List Area Link Color */
.site-footer .widget-area .widget li a,
.site-footer .widget ul ul a:before {
    color: #777;
}

/* Footer Bottom: Paddings */
.site-footer .footer-bottom-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Footer Social Networs Box Size and Color */
.site-footer .social-networks.rounded li a {
    width: 30px;
    height: 30px;
    background-color: #f3f8fb;
    border-radius: 5px;
}

/* Footer Social Networs Icon Size */
.social-networks.rounded li a i {
    font-size: 14px;
}

/* Widgets Lists with Dotted Border in Bottom */
.widget ul li {
    border-bottom: 1px dotted #ddd;
}

/* Widgets Lists Last item Without Dotted Border in Bottom */
.widget ul li:last-child {
    border: none;
}

/* News Page: Blog Post Detials Area and Thumbnails Area */
.blog-posts .post-item.template-standard .post-details,
.blog-posts .post-item.template-standard .post-thumbnail {
    border: none;
    background-color: #fff;
}

/* News Page: Blog Post Details Area */
.blog-posts .post-item.template-standard .post-details {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* News Page: Title spacing */
.page-heading__title-section {
	margin: 0px;
}

/* Homepage: Working Hours Table Area */
.working-hours-table table {
    background-color: #d7e9f5;
}

.working-hours-table table td {
    color: #2d527b;
    padding: 10px 20px;
}

.working-hours-table table tr {
    border-bottom: 1px solid #f3f8fb;
}

/* Sidebar Skin (Background Fill Style) */
.widget-area--skin-background-fill .widget {
    border: none;
    background-color: #fff;
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.1);
}

/* Sidebar Skin (Bordered Style) */
.widget-area--skin-bordered .widget {
    background-color: #fff;
}

/* Homepage: Blog Posts Widget Box */
.wpb_wrapper .lab-blog-posts .blog-post-entry {
    border: none;
    background: #fff;
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

/* Homepage: Blog Posts Widget Box Hover */
.wpb_wrapper .lab-blog-posts .blog-post-entry:hover {
    box-shadow: 0px 3px 50px -15px rgba(0,0,0,0.2);
}

/* Homepage: Blog Posts Widget Box Date */
.wpb_wrapper .lab-blog-posts .blog-post-entry .blog-post-content-container .blog-post-date {
    letter-spacing: 1px;
}

/* Multiplle Areas: Removes the Underline Animation in Theme Links */
.site-footer a:after,
.blog-posts .post-item .post-details .post-title a:after,
.single-post .post .post-meta a:hover:after,
.wrapper a:after,
.wpb_wrapper .lab-blog-posts .blog-post-entry .blog-post-content-container .blog-post-title a:after,
body a:after {
    background-color: transparent !important;
}

/* Multiplle Areas: Link Hover Color */
.widget-area .widget li a:hover,
.site-footer a:hover,
.site-footer .footer-bottom a:hover,
.blog-posts .post-item .post-details .post-title a:hover,
.single-post .post .post-meta a:hover,
.wpb_wrapper .lab-blog-posts .blog-post-entry .blog-post-content-container .blog-post-title a:hover,
body a:hover {
    color: #039db3
}

/* Search Widget Background Color */
.widget.widget_product_search .search-bar input[name="s"], .widget.widget_search .search-bar input[name="s"] {
    background-color: #fff;
}

/* Blog: Masonry Posts Layout */
.blog-posts .post-item.template-standard {
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.1);
}

/* Blog: Classic Posts Layout */
.blog-posts .has-post-thumbnail .post-item {
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.1);
    background-color: #fff;
}

/* Blog: Rounded Posts Layout */
.blog-posts .post-item.template-rounded.columned {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Blog: Square Posts Layout */
.blog-posts .format-video .post-item.template-square.columned .post-details,
.blog-posts .has-post-thumbnail .post-item.template-square.columned .post-details {
    padding: 20px 25px 0 0;
}

/* Blog Post: Rounded Social Networks Layout */
.single-post .post .post-share-networks--style-icons a {
    background: #fff;
    border-radius: 3px;
    width: 35px;
    height: 35px;
}

/* Blog Post: Blog Tags Layout */
.single-post .post .post-tags a {
    background: #fff;
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.1);
    padding: 6px 8px;
    margin-right: 10px;
}

/* Blog Post: Author Info Box */
section.post-author {
    border-top: 2px dotted #e1eaef;
    padding-top: 35px;
}

/* Blog Post: Author Info Image */
.author-info--alignment-bottom.single-post--has-author-info.single-post .post .post-author .author-info--image a {
    width: 130px;
    margin-right: 35px;
}

/* Blog Post: Author Info Image Radius */
.single-post .post .author-info--image .image-placeholder {
    border-radius: 3px;
}

/* Posts Navigation - Next-Prev Layout */
.post-navigation {
    border-top: 2px dotted #e1eaef;
    padding: 20px 0;
    margin-bottom: 0;
}

/* Posts Navigation - Next-Prev Post Hide Arrows */
.post-navigation--next .post-navigation--arrow,
.post-navigation--prev .post-navigation--arrow {
    display: none;
}

/* Posts Navigation - Color */
.post-navigation a i, .post-navigation a strong {
    color: #2a527b;
}

/* Posts Navigation - Hover Color */
.post-navigation a:hover i, .post-navigation a:hover strong {
    color: #009db4;
}

/* Blog Post: Comments Area Color */
.single-post .post-comments {
    background-color: #e1eaef;
}

/* Blog Post: Reply Button Color */
.single-post .post-comments--list .comment .commenter-details .name a {
    color: #009db4;
}

/* Blog Post: Reply to a Comments Background Color */
.single-post .post-comments--list .comment-respond {
    background-color: #f3f8fb;
}

/* Blog Post: Comment Connector Color */
.single-post .post-comments--list .comment .commenter-image .comment-connector {
    border-color: #c5d6de;
}

/* Blog Post: Commenter Details Padding */
.single-post .post-comments--list .comment .commenter-details {
    padding-left: 15px;
}

/* Blog Posts: Comments Textarea */
p.labeled-textarea-row.comment-form-comment, .single-post .comment-form>p {
    background: #fff;
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.1);
    padding: 5px 15px;
}

/* Blog Post: Leave a Reply Comment Area */
.single-post .comment-form {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
    margin: 0;
    margin-top: 35px;
}

/* Blog Post: Comments Area */
.single-post .comment-form>p.logged-in-as {
    background: transparent;
    padding: 0px;
    border: none;
    box-shadow: none;
}

/* Blog Post: Comments Area */
.single-post .comment-form>p.logged-in-as a{
    color: #009db3;
}

/* Blog Post: Add a Comment Fill Areas Width */
.single-post .comment-form>p.labeled-input-row {
    width: 32%;
    float: none;
}

/* Blog Post: Add a Comment Fill Areas Style */
.labeled-textarea-row textarea {
    background-image: none;
    line-height: 1.5;
    padding: 0px;
}

/* Blog Post: Add a Comment Fill Areas Border */
.labeled-input-row label,
.labeled-textarea-row label,
.labeled-input-row input {
    border: none;
}

/* Blog Page and Blog Post: Quote Post Background Color */
.blog-posts .post-item .post-thumbnail blockquote,
.single-post .post--full-width-image.format-quote .post-image {
    background-color: #dce6ec;
}

/* Blog Post: Add a Comment Fill Required Areas */
.labeled-input-row label .required, .labeled-textarea-row label .required {
    color: red;
}

/* Blog Posts: Submit Comment Button */
.single-post .comment-form>p.form-submit {
    padding: 0px;
    background: transparent;
    margin-top: 0px;
    margin-left: auto;
    border: none;
}

/* Blog: Single Post Navigation Show Labels */
.post-navigation--label em, .post-navigation--label strong {
    top: auto;
    opacity: 1;
}

/* Menu: Search Button Background */
.header-search-input .search-field {
    background: #f3f8fb;
}

/* Search Page: Results Box Border */
.search-results-holder .result-box + .result-box {
    border-top-color: #e1eaef;
}

/* Search Page: Results Page Title */
.search-results-holder .result-box .result-info h3 a {
    color: #2a527b;
}

/* Blog Page: Header */
.blog .page-heading {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Blog Page: Heading Description (paragraph) */
.page-heading--description p {
    color: #768ca5;
}

/* Browser Selection Color */
::selection {
    background: #039db3;
}

/* Widget: Sidebar Working Hours Area */
.sidebar-working-hours {
    color: #2d527b;
}

.sidebar-working-hours td {
    padding: 5px 0;
}

.sidebar-working-hours td:nth-child(even) {
    text-align: right;
}

.sidebar-working-hours tr {
    border-bottom: 1px solid #f3f8fb;
}

.emergency-button-sidebar a {
    background: #6dab3c;
    color: #fff;
    border-radius: 3px;
    padding: 7px 5px;
    width: 100%;
    text-align: center;
}

.emergency-button-sidebar a:hover {
    color: #fff !important;
    background: #5f9434;
}

/* Classic Pagination Layout */
.pagination-container a.page-numbers,
.pagination-container span.page-numbers,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers,
.pagination--normal .page-numbers {
    background: #fff;
    padding: 5px 15px;
    border-radius: 50px;
    margin: 0px 5px;
}


/* Classic Pagination Layout */
.pagination-container a.page-numbers,
.pagination-container span.page-numbers {
    color: #2a527b;
}

/* Classic Pagination Layout: Current page */
.pagination-container a.page-numbers.current,
.pagination-container span.page-numbers.current,
.woocommerce-pagination a.page-numbers.current,
.woocommerce-pagination span.page-numbers.current,
.pagination--normal .page-numbers.current {
    color: #c5ced4;
}

/* Classic Pagination Layout: Page Hover */
.pagination-container a.page-numbers:hover,
.pagination-container span.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover,
.woocommerce-pagination span.page-numbers:hover,
.pagination--normal .page-numbers:hover {
    color: #039db3;
}

/* Classic Pagination Layout: Current page no hover*/
.pagination--normal .page-numbers.current:hover,
.pagination-container span.page-numbers.current:hover {
    color: #c5ced4;
}

/* Infinite Scroll Pagination Style */
.pagination--infinite-scroll .pagination--infinite-scroll-show-more {
    box-shadow: 4px 7px 10px -9px rgba(0,0,0,0.1);
    background-color: #fff;
    border-style: none;
}

/* Page Title Padding */
.page-title {
    padding: 50px 0px;
}

/* Departments Title */
.departments-title {
    padding: 50px 0px 35px 0;
}

/* Departments Title Holder */
.wpb_wrapper .lab-portfolio-items .portfolio-title-holder {
    margin: 0px;
}

/* Homepage Blog Posts */
.home-news {
    padding: 50px 0 35px 0;
}

/* Homepage: Appointments */
.home-appointment .vc_column-inner>.wpb_wrapper {
    padding: 0 50px;
    background-color: #f3f8fb;
    padding-top: 35px;
}

/* Homepage: Google Maps */
.home-map.vc_column_container>.vc_column-inner {
    padding-top: 0;
}

/* Homepage: View All Button */
.home-button a {
    padding: 15px !important;
    line-height: 1 !important;
    background-image: none !important;
}

/* Homepage: All Doctors Button */
.home-button a:before {
    content: "»";
    margin-left: 10px;
    float: right;
    line-height: 1;
}

/* Departments Title Holder */
.wpb_wrapper .lab-portfolio-items .portfolio-title-holder {
    margin-bottom: 20px;
}

/* Contact Form: Input Colors */
.contact-form .form-group.labeled-input-row, .form-group.labeled-textarea-row {
    padding: 5px 15px;
    background: #fff;
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.1);
}

/* Contact Form: Checkboxes and Radio Buttons */
.contact-form input[type=checkbox], .contact-form  input[type=radio] {
    background: #fff;
}

/* Appointments Ninja Forms Plugin Layout */
.appointments nf-fields-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.appointments nf-field {
    width: 45%;
}

.dep-appointments nf-field {
    width: 100%;
}

.dep-appointments,
.dep-appointments .submit-container {
    margin-bottom: 0px;
}

.appointments .nf-field-element {
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.1);
}

.dep-appointments  .nf-field-element {
    box-shadow: none;
}

.submit-container .nf-field-element  {
    box-shadow: none;
}

.appointments nf-field:last-child {
    width: 100%;
    box-shadow: none;
}

.nf-field-element select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.appointments input[type=text],
.appointments input[type=number],
.appointments input[type=email],
.appointments input[type=password],
.appointments input[type=url],
.appointments input[type=tel],
.appointments select,
.appointments textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-color: #fff;
}

.dep-appointments input[type=text],
.dep-appointments input[type=number],
.dep-appointments input[type=email],
.dep-appointments input[type=password],
.dep-appointments input[type=url],
.dep-appointments input[type=tel],
.dep-appointments select,
.dep-appointments textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-color: #f3f8fb;
    background: #f3f8fb;
}

.appointments .nf-error .ninja-forms-field {
    border: 1px solid #e80000;
}

.appointments .submit-container .nf-field-element,
.appointments .submit-container .nf-field-element {
    box-shadow: none;
}

@media screen and (max-width: 991px) and (min-width: 768px) {
    .site-footer .footer-widgets .widget.widget_nav_menu {
        width: 100%;
        padding-left: 15px;
    }

    .welcome-box .working-hours-column {
        width: 41.66666667%;
    }
}

@media screen and (max-width: 991px) {
    .mobile-menu-wrapper.mobile-menu-fullscreen+.mobile-menu-overlay {
        background-color: rgba(0, 157, 180,0.9);
    }

    .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container .search-form input::placeholder {
        color: rgba(255,255,255,0.75);
    }

    .mobile-menu-wrapper .mobile-menu-container .search-form label {
        color: #FFF;
    }
}

/* Contact Form: Submit Loading Bar */
.contact-form .button .loading-bar span {
    border-radius: 50px;
    background-color: rgba(0,0,0,.25);
}

/* Contact Form: Submit Loading Bar */
.contact-form .button .loading-bar {
    bottom: 0;
    left: 20px;
    right: 20px;
    top: auto;
    background: none;
    border-radius: 50px;
}

/* Top Bar: Button  */
.top-bar-button {
	color: #6dab3c;
	border: 1px solid #6dab3c;
	padding: 5px 10px;
	border-radius: 50px;
	transition: all 0.25s ease;
}

a.top-bar-button:hover {
	color: #fff;
	background-color: #6dab3c;
}

/* XS: Mobile devices */
@media screen and (max-width: 480px){
    .site-footer .footer-widgets .widget.widget_nav_menu {
        padding-left: 15px;
    }

    .blog .page-heading {
        margin-top: 35px;
        margin-bottom: 35px;
    }

    .widget {
        margin-bottom: 15px;
    }

    .page-title {
        padding: 35px 0px;
    }

    .departments-title {
        padding: 35px 0px 20px 0;
    }

    .single-post .post-comments:before {
        border-width: 20px 20px 0 0;
        right: 20px;
    }

    .welcome-box {
        padding: 35px 0 25px 0;
    }

    .more-link {
        position: relative;
    }

    .home-departments .portfolio-title-holder .pt-column-title {
        max-width: 100%;
    }

    .home-departments .more-link .show-more {
        padding: 0px 15px;
    }

    .more-link .show-more {
        margin: 0px;
    }

    .show-more .reveal-button {
        display: block;
    }

    .more-link .show-more .reveal-button a {
        text-align: left;
        width: 100%;
    }

    .home-news {
        padding: 35px 0 25px 0;
    }

    .home-map.vc_column_container>.vc_column-inner {
        padding-top: 20px;
    }

    .home-appointment .appointments {
        margin-bottom: 0px;
    }

    .home-appointment .vc_column-inner>.wpb_wrapper {
        padding: 0 35px;
        padding-top: 35px;
    }

    .home-testimonials {
        padding-top: 0px;
    }

    .single-post .post .post-navigation {
        margin-bottom: 10px;
    }

    .single-post .comment-form>p.form-submit{
        margin-left: 0px;
    }

    .single-post .comment-form>p.labeled-input-row {
        width: 100%;
    }


    .single-post .post-comments--list .comment-respond .comment-reply-title {
        left: 40px;
        right: auto;
    }

    .archive .container {
        margin: 0;
    }

    .archive .page-heading {
        margin-bottom: 10px;
    }

    .wpb_wrapper .lab-portfolio-items .more-link {
        margin: 20px 0;
    }
}

/* SM: Mobile and tablet devices */
@media screen and (min-width: 768px) {
    .welcome-box {
        padding: 35px 0;
    }
}

/* MD: Tablet and desktop devices */
@media screen and (min-width: 992px) {
    .welcome-box {
        padding: 35px 0;
    }
}

/* LG: Desktop devices */
@media screen and (min-width: 1200px) {
    .welcome-box {
        padding: 35px 0;
    }
}
/* ===========================================================
Custom modification only for MEDICAL Demo - END
=========================================================== */

/* ===========================================================
User CSS modifications - START
=========================================================== */


div.elementor-icon-box-icon > span.elementor-icon{
	background: #F5EDD8 !important;
    padding: 14px;
    border-radius: 15px;
}

  .img-box-head{
	float: right !important;
    font-size: 13px;
    font-weight: normal;
}

 .elementor-image-box-title, .elementor-image-box-description{
	padding:0 20px;
}

.elementor-image-box-description{
	margin-bottom:20px !important
}

.elementor-widget-image-box{
	overflow:hidden;
}

#before-after .elementor-image-box-img::after{
	content: "Vorher / Nachher";
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .48);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
	font-family: 'DM Sans', Arial, sans-serif;
}

.portfolio-item .item-box{
border-radius: 18px;
    overflow: hidden;
}

 .portfolio-item .item-box .item-link{
	font-size: 22px !important;
    line-height: 1.2 !important;
    color: #071221 !important;
    letter-spacing: -.02em !important;
	font-family: 'DM Sans', Arial, sans-serif;
    font-weight: 700;
}


.hl-method-visual {
    padding: 72px 0 78px !important
}

.hl-method-head {
    max-width: 860px !important;
    margin-bottom: 28px !important
}

.hl-method-head h2 {
    margin-bottom: 14px !important
}

.hl-method-head p {
    max-width: 880px !important
}

.hl-method-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important
}

.hl-method-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    min-height: 390px !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    overflow: hidden !important;
		transition: .60s;
}

.hl-method-number {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 16px !important
}
.hl-method-number {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(214, 179, 106, .8);
    color: #d6b36a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
    margin-bottom: 18px;
}

.hl-method-card h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 0 0 10px !important
}

.hl-method-card h3 {
    color: #fff;
    font-size: 19px;
    line-height: 1.18;
    margin: 0 0 10px;
    letter-spacing: -.02em
}


.hl-method-card p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,.75) !important;
    margin: 0 0 18px !important;
    min-height: 100px !important
}

.hl-method-image {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: 128px !important;
    margin-top: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
	
}

.hl-method-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
	transition: .60s;
}

.hl-method-placeholder {
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at 24% 38%,rgba(214,179,106,.40),transparent 0 18%,transparent 19%),linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05)) !important
}

.hl-method-card:hover .hl-method-image img {
    transform: scale(1.08);
}
.hl-method-card:hover {
    transform: translateY(-8px);
    border-color: rgba(214, 179, 106, .55);
    background: rgba(255, 255, 255, .07);
}

#hero .elementor-button-icon{
	display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    backdrop-filter: blur(12px);
    fill: #DCB36A;
}


.showcase-grid{
  display:grid;
  grid-template-columns:1.35fr .85fr;
  gap:22px;
}
.showcase-large,.showcase-side article{
  min-height:520px;
  border-radius:28px;
  overflow:hidden;
  position:relative;
  background:#08101b;
  box-shadow:0 28px 80px rgba(0,0,0,.14);
}
.showcase-large img,.showcase-side img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.92;
  transition:transform .65s ease;
}
.showcase-large:hover img,.showcase-side article:hover img{transform:scale(1.045)}
.showcase-large:before,.showcase-side article:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,16,27,.08),rgba(8,16,27,.76));
  z-index:1;
}
.showcase-overlay,.showcase-side article div{
  position:absolute;
  z-index:2;
  left:28px;
  right:28px;
  bottom:28px;
  color:white;
}
.showcase-overlay span,.showcase-side span{
  display:inline-block;
  color:#d6b36a;
  font-weight:900;
  font-size:13px;
  letter-spacing:.04em;
  margin-bottom:8px;
}
.showcase-overlay h3{
  font-size:34px;
  max-width:560px;
  margin:0 0 10px;
}
.showcase-overlay p{
  max-width:560px;
  color:rgba(255,255,255,.82);
}
.showcase-side{
  display:grid;
  gap:22px;
}
.showcase-side article{
  min-height:249px;
}
.showcase-side h3{
  margin:0;
  font-size:23px;
}


.why-haarlab{
  background:
    radial-gradient(circle at 20% 20%, rgba(214,179,106,.16), transparent 28%),
    linear-gradient(180deg,#08101b,#0b1320);
  color:white;
  padding:90px 0;
}
.why-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:44px;
  align-items:center;
}
.why-grid h2{
  font-size:44px;
  line-height:1.05;
  margin:0 0 18px;
}
.why-grid p{
  color:rgba(255,255,255,.74);
  font-size:17px;
  line-height:1.8;
}
.why-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.why-cards article{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(214,179,106,.18);
  border-radius:24px;
  padding:24px;
  backdrop-filter:blur(10px);
}
.why-cards span{
  color:#d6b36a;
  font-weight:900;
}
.why-cards h3{
  margin:10px 0 8px;
  font-size:20px;
}
.why-cards p{
  font-size:14px;
  line-height:1.6;
  margin:0;
}

.analyse-btn{
color:#C9A96E;
padding: 10px;
    border: 1px solid;
    border-radius: 20px;
	margin-top:10px
}

#interaktion h2 strong{
	font-family: 'DM Serif Display' !important;
}

#image-column{
	grid-row: span 2;
}

#image-grid img{
border-radius:30px;	
}

#footer-banner{
	background-image: radial-gradient(circle at 78% 18%, rgba(201, 169, 110, .2), transparent 32%);
}
.quform input[type=checkbox],.quform input[type=radio] {
  
    width:15px;
	height:15px;
  
}


.quform-page-progress-text{
	display:none
}

.quform-page-progress-bar {

	height: 7px;}


 .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a {
   color: #ffffffc7;
	font-size:14px;
	 font-family: 'DM Sans' !important;
}

.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a:hover{
	color:#C9A96E

}

.header-bottom-border .header-block {
    border-bottom-color: #c9a96e2e !important
}

#hero:before{
	content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient( 90deg,rgba(7,18,33,.48) 0%,rgba(7,18,33,.70) 34%,rgba(7,18,33,.10) 66%,rgba(7,18,33,.02) 100% ) !important;

}

.top-bar-button {
    background-color: #1b2b4bf7;
	color: #fff;
	border:1px solid #1b2b4bf7
    
}


a.top-bar-button:hover {
    background-color: #1b2b4bf7;
	color: #fff;
}

.top-header-bar{
	background: #C9A96E;
	 
}






.footer-bottom-content p, .footer-bottom-content a{
	color: #ffffff9e !important
}

