/*
 Theme Name:   Orthoplace
 Theme URI:    https://www.neckarmedia.com
 Description:  Orthoplace Wordpress Child Theme
 Author:       Neckarmedia
 Author URI:   https://www.neckarmedia.com
 Template:     enfold
 Version:      1.0
*/

/* dm-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
src: url('fonts/dm-sans-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
src: url('fonts/dm-sans-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
src: url('fonts/dm-sans-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* @link https://utopia.fyi/type/calculator?c=375,16,1.2,1800,22,1.4,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root{
    --step--1: clamp(0.8333rem, 0.7942rem + 0.1671vw, 0.9821rem);
    --step-0: clamp(1rem, 0.9013rem + 0.4211vw, 1.375rem);
    --step-1: clamp(1.2rem, 1.0092rem + 0.814vw, 1.925rem);
    --step-2: clamp(1.44rem, 1.1097rem + 1.4091vw, 2.695rem);
    --step-3: clamp(1.728rem, 1.1898rem + 2.2961vw, 3.773rem);
    --step-4: clamp(2.0736rem, 1.2292rem + 3.6026vw, 5.2822rem);
    --step-5: clamp(2.4883rem, 1.1971rem + 5.5093vw, 7.3951rem);
}
:root{
    --space-2xl-2xl: clamp(4rem, 3.6053rem + 1.6842vw, 5.5rem);
    --space-2xl-3xl: clamp(4rem, 2.8816rem + 4.7719vw, 8.25rem);
}

:root{
    --orthoplace-dark-blue: #223A55;
    --orthoplace-fresh-blue: #A8DCEB;
    --orthoplace-playfull-green: #B9D26C;
    --orthoplace-pastel-pink: #F09EC4;
    --orthoplace-grey: #F5F5F5;
    --primary-font: 'DM Sans', sans-serif;
    --heading-font: 'DM Sans', sans-serif;
    --button-padding: .35em .85em;
    --button-radius: .5rem;
}


/* =======================================================================================================================================
Typo
======================================================================================================================================= */
html{-webkit-tap-highlight-color: transparent;}
body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
body,p{font-family: var(--primary-font); font-size: var(--step-0); font-weight: 400; line-height: 1.6; letter-spacing: -.025em;}
p{margin: 0 0 1em;}
h1,h2,.h2,h3,h4,h5,h6{font-family: var(--heading-font); font-weight: 700 !important; line-height: 1; letter-spacing: -.025em !important; text-transform: inherit !important; margin: 0 0 .5em 0 !important; hyphens: auto;}

#top h1{font-size: var(--step-4);}
#top h2, #top .h2{font-size: var(--step-3);}
#top h3{font-size: var(--step-2);}
#top h4{font-size: var(--step-1);}
#top h5{font-size: var(--step-0);}
#top h6{font-size: var(--step-0);}

#top .avia-section b,
#top .avia-section strong,
#top .footer_color b,
#top .footer_color strong,
#top .socket_color b,
#top .socket_color strong{color: inherit}

#top p a:not(:has(img)),
#top .avia_textblock ul li a{
	text-decoration: underline;
    text-decoration-thickness: .05em;
    text-underline-offset: .2em;
}

#top .special_amp{color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
#top .av-special-heading{padding: 0 !important}
#top .av-special-heading .special-heading-border{display: none;}
#top .av-special-heading.avia-builder-el-no-sibling .av-special-heading-tag{margin: 0 !important}
#top .av-special-heading .av-subheading_below{margin: 0;}
#top .av-special-heading-p,
#top .av-special-heading .av-subheading_below p{font-weight: 600; margin: .5em 0 1.5em; line-height: 1.2; font-size: var(--step-1);}
#top .alternate_color .av-special-heading-p,
#top .alternate_color .av-special-heading .av-subheading_below p{color: var(--orthoplace-fresh-blue);}
#top .av-special-heading .av-special-heading-tag:has(+ .av-subheading_below){margin-bottom: 0 !important;}

/* H1 für die Startseite */
#top.home .av-special-heading-h1 .av-subheading_above p{
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 .5em 0;
}
#top.home .av-special-heading-h1 h1{
    font-size: var(--step-1);
    font-weight: 600 !important;
    line-height: 1.2;
}
#top.home .alternate_color .av-special-heading-h1 h1{color: var(--orthoplace-fresh-blue);}

/* Button */
#top div .avia-button{
    font-size: var(--step-0);
    font-weight: 600;
    padding: var(--button-padding);
    margin: 0 .5rem .5rem 0;
    border-radius: var(--button-radius);
    background: var(--orthoplace-fresh-blue) !important;
    border: 1px solid var(--orthoplace-fresh-blue) !important;
    color: var(--orthoplace-dark-blue) !important;
    text-decoration: none !important;
    display: inline-flex;
    gap: .6em;
    line-height: 1.2;
    transition: .2s;
    overflow: hidden;
    text-align: left;
    z-index: 1;
	font-family: var(--primary-font)
}
#top div .avia-button > *{position: relative;}
#top div .avia-button.avia-size-medium{font-size: calc(1.1 * var(--step-0));}
#top div .avia-button .avia_button_icon{left: 0; scale: 1.33;}
#top div .avia-button.avia-color-dark{color: var(--orthoplace-dark-blue) !important; border-color: var(--orthoplace-dark-blue) !important; background: transparent !important; padding: .35em .5em;}
#top div .avia-button.avia-color-light{color: #fff !important; border: 1px solid #fff !important; background: transparent !important; padding: .35em .5em;}
#top div .avia-button:hover{opacity: 1}

#top div .avia-button:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    aspect-ratio: 1 / 1;
    background: var(--orthoplace-playfull-green);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: 0.4s ease-in-out;
    pointer-events: none;
    z-index: -1;
}
html.no-touch-device #top div .avia-button:hover:before{
    width: 110%;
    height: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* Blockquote */
#top blockquote{border: 0; font-size: var(--step-1); margin: 2em 0 2em; padding: 0 0 0 2em; position: relative; max-width: 420px; font-style: italic; line-height: 1.6}
#top blockquote:before{content: '\e833'; font-family: 'entypo-fontello'; position: absolute; top: -.3em; left: 0; opacity: .1; font-size: 4em; font-style: normal; line-height: 1}
#top blockquote p{font-size: 1em; margin: 0}

/* List */
#top .avia_textblock ul{
    list-style: none;
    margin: 0 0 1em 0;
}
#top .avia_textblock ul > li{
    margin: 0 0 0.5em 0;
    padding: 0 0 0 1em;
    position: relative;
}
#top .avia_textblock ul > li:before{
    content: '\e875';
    font-family: 'entypo-fontello';
    position: absolute;
    left: 0;
    display: inline-block;
}

/* Green Text Box */
#top .__green--text--box{
    line-height: 1.2;
    font-weight: 600;
    color: var(--orthoplace-dark-blue);
    background: var(--orthoplace-playfull-green);
    border-radius: .2rem;
    padding: .2em .4em;
    display: inline-block;
}


/* =======================================================================================================================================
Header
======================================================================================================================================= */
#header_main{border: 0;}
#header .header_bg{
    opacity: 1;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
}

@media only screen and (max-width: 989px){ 
    .responsive #top #header{position: fixed !important; top: 0; left: 0; right: 0; width: 100%}
    .responsive #top #main,
    .responsive.html_mobile_menu_tablet.html_header_top #top #main{padding-top: 80px !important}
    .responsive #top #wrap_all .av-logo-container,
    .responsive #top #header_main > .container .main_menu .av-main-nav > li > a,
    .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container,
    .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a{
        height: 80px;
        line-height: 80px;
    }
}

@media only screen and (min-width: 990px){
    #header .inner-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    #header .inner-container > .logo{order: 1; margin-right: auto; position: relative;}
    #header .inner-container > nav{order: 3; position: static;}
}

/* Logo */
#header_main .inner-container > .logo,
#header_main .inner-container > .logo a{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: visible}
#header_main .inner-container > .logo a{height: auto}
#header_main .inner-container > .logo a svg,
#header_main .inner-container > .logo a img{width: 160px}

@media only screen and (min-width: 990px){
    #header_main .inner-container > .logo a svg,
    #header_main .inner-container > .logo a img{width: 240px}
}

/* Hamburger Menu */
.av-hamburger-box{width: 32px}
.av-hamburger-inner, 
.av-hamburger-inner::before, 
.av-hamburger-inner::after{border-radius: 0}
#top ul#av-burger-menu-ul{vertical-align: top}
#top ul#av-burger-menu-ul li a:hover{background: inherit !important;}
#top ul#av-burger-menu-ul > li > a{font-size: var(--step-0);}
#top ul#av-burger-menu-ul > li li > a{font-size: var(--step--1);}


/* =======================================================================================================================================
Accessibility
======================================================================================================================================= */
#top :focus-visible{
    overflow: visible; 
    outline: -webkit-focus-ring-color auto 1px; 
    opacity: 1 !important;
	box-shadow: inset 0 0 0 2px #fff;
}


/* =======================================================================================================================================
Misc
======================================================================================================================================= */
/* Layout */
::selection {
    background-color: var(--orthoplace-pastel-pink);
    color: var(--orthoplace-dark-blue);
}
.container_wrap{border: 0;}
.widgettitle{font-weight: inherit; text-transform: inherit; letter-spacing: inherit; font-size: inherit;}
.content{padding-top: var(--space-2xl-2xl); padding-bottom: var(--space-2xl-2xl);}
.avia-section-huge .content{padding-top: var(--space-2xl-3xl); padding-bottom: var(--space-2xl-3xl);}

@media only screen and (max-width: 989px){
    .responsive #top #wrap_all .flex_column{margin-bottom: 0 !important;}
}

@media only screen and (max-width: 767px){
    .responsive #top #wrap_all .container{width: 90%; max-width: 90%;}
}

/* Images */
#top .image-overlay{display: none !important;}
#top .avia_image,
#top .av-image-caption-overlay,
#top .avia-image-container-inner{border-radius: 1rem}

/* Toggle */
#top section.av_toggle_section .toggler{padding: 1em 3em 1em 1rem; margin: 0 0 .8em; font-size: var(--step-0); background: transparent; border: 1px solid; border-radius: .5em}
#top section.av_toggle_section .toggler:hover{background: transparent;}
#top section.av_toggle_section .toggler .toggle_icon{display: none;}
#top section.av_toggle_section .toggler:after{
	content: '\e87d';
    font-family: 'entypo-fontello';
    position: absolute;
    right: 1em;
    transition: .2s ease;
}
#top section.av_toggle_section .toggler.activeTitle:after{rotate: 90deg}
#top section.av_toggle_section .toggle_content{border: 0; background: transparent; padding: .5em 1rem 1.5em;}
#top section.av_toggle_section .toggle_content *{font-size: var(--step-0);}

/* Social Icons */
#top ul.__social--media--icons{
    display: flex;
    gap: 0;
    font-size: var(--step-2);
    margin: 0 0 1em 0;
    line-height: 1;
}
#top ul.__social--media--icons > li > a{padding: .2em .4em;}

/* Smile Icon */
#top i.__smile{
    font-size: calc(5* var(--step-3));
    color: var(--orthoplace-pastel-pink);
    line-height: 1;
    display: inline-block;
    transform-origin: bottom left;
    margin: -.8em 0px 0 -12rem;
	pointer-events: none;
}

@media screen and (max-width: 1269px){
    #top i.__smile{
	position: absolute;
    left: -220%;
    bottom: -3rem;
	}
}

@media screen and (max-width: 989px){
	#top i.__smile{
	position: relative;
	padding-left: 4rem;
	left: 0;
	bottom: 0;
	transform-origin: unset;
	}
}
	
/* Horizontal rule */
#top .hr-default{
    height: var(--space-2xl-2xl);
    margin: 0;
    line-height: inherit;
}
#top .hr-default *{border: 0;}

/* Rounded Box */
#top .__rounded-box{border: 1px solid var(--orthoplace-fresh-blue); border-radius: 1rem; padding: 2rem 2rem 1rem 2rem}
#top .__rounded-box a.avia-button{position: absolute;}

/* CTA */
#top .__cta{
    margin: 2rem 0 0;
    display: flex;
    flex-flow: row wrap;
    gap: 1rem 4rem;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 2rem;
    border-radius: calc(2 * var(--button-radius));
    border: 1px solid var(--orthoplace-fresh-blue);
}

#top .__cta p{margin: 0; max-width: 420px;}
#top .__cta a.avia-button{margin: 0;}

/* Timeline */
#top .avia-timeline h2{font-size: var(--step-1)}
#top .alternate_color .avia-timeline .av-milestone-date{color: #fff}
#top .avia-timeline .av-milestone .milestone_number{color: var(--orthoplace-dark-blue); font-weight: 700;}
#top .avia-timeline-vertical .av-milestone-icon-wrap:after{border-style: solid; width: 0; border-left-width: 0;}

#top .avia-timeline .av-milestone .milestone_inner {background-color: var(--orthoplace-playfull-green);}
#top .alternate_color .avia-timeline .av-milestone .av-milestone-date span {background-color: var(--orthoplace-playfull-green);}

/* Timeline Horizontal */
#top .avia-timeline-horizontal .avia-iconfont:before{display: none}
#top .avia-timeline-horizontal.av-milestone-placement-top .av-milestone-date{margin: 0 !important;}
#top .avia-timeline-horizontal .av-milestone-icon-wrap:after{border-top-style: solid}
#top .alternate_color .avia-timeline-horizontal .av-milestone-content-wrap footer {background-color: var(--orthoplace-playfull-green);}

/* Icon List */
.avia_transform .avia-icon-list.av-iconlist-big.avia-iconlist-animate .avia_start_animation .iconlist-timeline{display: none}
.main_color .avia-icon-list .iconlist_icon{background-color: var(--orthoplace-fresh-blue);}
.avia-icon-list .iconlist_icon{color: var(--orthoplace-dark-blue)}
#top h4.av_iconlist_title{font-size: var(--step-0)}
.avia-icon-list li{padding: 0 0 10px 0;}

/* Tab Section */
#top .noborder_tabs.sidebar_tab_left .tab{border: none;}
#top .sidebar_tab .tab_titles{width: 40%; max-width: 500px}
#top .noborder_tabs.sidebar_tab_left .tab_content, #top .noborder_tabs.sidebar_tab_right .tab_content{box-shadow: none;}
#top .tabcontainer .tab_titles .tab{position: relative; font-size: var(--step-0); background: transparent;}
#top .tabcontainer .tab_titles .tab:before {
    content: "";
    aspect-ratio: 1 / 1; /* Kreis bleibt immer rund */
    height: 100%; /* Nutzt die volle Höhe des Tabs */
    background-color: var(--orthoplace-playfull-green);
    border-radius: 50%;
    position: absolute;
    left: 0; /* Stellt sicher, dass der Kreis am linken Rand bleibt */
    top: 50%;
    transform: translateY(-50%) scale(0);
    transform-origin: left center; /* Wächst aus der Mitte, aber bleibt links */
    transition: transform 0.2s ease-in-out;
    z-index: -1;
}

#top .tabcontainer .tab_titles .tab.active_tab:before {
    transform: translateY(-50%) scale(1);
}
#top .tabcontainer .tab_content{background: transparent;}
#top .tabcontainer .tab_inner_content{margin: 1rem 0;}
#top .tabcontainer .tab_inner_content h3{font-size: var(--step-1)}
#top .tabcontainer .tab_inner_content a{background: rgba(168, 220, 235, 0.5); padding: .3rem .5rem; border-radius: .5rem; transition: .2s; text-decoration: none;}
#top .tabcontainer .tab_inner_content a:hover{background: rgba(168, 220, 235, 0.8);}

/* Partner Logo Element */
#top .avia-logo-element-container .slide-entry{padding: 1rem;}
#top .avia-slideshow-arrows a.avia-svg-icon{background: rgba(168, 220, 235, 0.8); border-radius: 0.2rem;}
#top .avia-slideshow-arrows a.avia-svg-icon svg:first-child{fill: var(--orthoplace-dark-blue)}
#top .avia-slideshow-arrows a.avia-svg-icon:hover{background: rgba(168, 220, 235, 0.5);}

/* Masonry */
#top .av-inner-masonry{border-radius: .5rem;}
#top .av-inner-masonry .av-inner-masonry-content{background: var(--orthoplace-fresh-blue)}
#top .av-masonry h3.entry-title{font-size: var(--step-0); margin: 0 !important;}
#top .av-masonry-date{font-size: .8rem; font-weight: 600; position: absolute; top: -1rem; padding: var(--button-padding); margin: 0 .5rem .5rem 0; border-radius: var(--button-radius); background: var(--orthoplace-pastel-pink) !important; border: 1px solid var(--orthoplace-pastel-pink) !important; color: var(--orthoplace-dark-blue) !important; line-height: 1.2;}
#top .av-masonry .avia-arrow{display: none}
#top .av-sort-by-term{text-align: left;}
#top .av-sort-by-term .text-sep{display: none;}
#top .av-sort-by-term a{
	font-size: var(--step--1);
    font-weight: 600;
    padding: var(--button-padding);
    margin: 0 .5rem .5rem 0;
    border-radius: var(--button-radius);
    border: 1px solid var(--orthoplace-dark-blue) !important;
    text-decoration: none !important;
    line-height: 1.2;
    transition: .2s;
    overflow: hidden;
    z-index: 1;
	position: relative;}
#top .av-sort-by-term a.active_sort{background: var(--orthoplace-playfull-green);}
#top .av-sort-by-term a:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    aspect-ratio: 1 / 1;
    background: var(--orthoplace-playfull-green);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: 0.4s ease-in-out;
    pointer-events: none;
    z-index: -1;
}
#top .av-sort-by-term a:hover:before{
    width: 110%;
    height: auto;
    transform: translate(-50%, -50%) scale(1);
}


/* =======================================================================================================================================
Blog: Single Post
======================================================================================================================================= */
#top .template-single-blog article.post-entry .big-preview{max-width: 720px; margin: auto;}
#top .fullsize .template-blog .post .entry-content-wrapper{max-width: 720px; text-align: left; line-height: 1.6; font-size: var(--step-0);}
#top .template-single-blog article.post-entry .entry-content-wrapper header h1{text-align: left; font-size: var(--step-3); padding: 1rem 0}
#top .template-single-blog article.post-entry .entry-content-wrapper header .post-meta-infos{text-align: left; font-size: var(--step--1);}
#top .template-single-blog h3{font-size: var(--step-1)}

/* Single Post */
@media (min-width: 768px) {
	#top.single-post .entry-content-wrapper {display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8rem; gap: 5%}	
    #top.single-post .entry-content-header, .big-preview {width: 45%;}
    #top.single-post .entry-content-header {padding-right: 10px;}
    #top.single-post .big-preview {padding-left: 10px;}
}
#top.single-post .fullsize .template-blog .post .entry-content-wrapper {max-width: 1400px;}
#top.single-post h1{hyphens: none;}
#top.single-post h2{font-size: var(--step-2); margin-top: 3rem !important;}
.html_elegant-blog #top .post-entry .post-title:hover, .html_elegant-blog .avia-content-slider .slide-entry-title:hover{opacity: 1;}
#top.single-post .fullsize .template-blog .post .entry-content{margin-top: 6rem;}


/* =======================================================================================================================================
Dialog / Modal
======================================================================================================================================= */
dialog{
    background: transparent;
    border: 0;
    padding: 0;
	overflow: visible;
	width: 720px;
    outline: none !important;
    box-shadow: none !important;
}

dialog > div{
	padding: 4rem 8%;
    border-radius: 0;
    max-height: 90vh;
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
    transition: .2s;
	background: #fff;
	position: relative;
	animation: animateDialog .3s ease-in-out;
}

dialog > div *{
    color: #000 !important;
}

@keyframes animateDialog {
  from {scale: .8; transform: translateY(20%); opacity: 0}
    to {scale: 1; transform: translateY(0); opacity: 1}
}

dialog:-internal-dialog-in-top-layer::backdrop{
	background: rgb(0 0 0 / 50%);
}

dialog > div > .__close{
	border: 0;
    background: 0;
    font-size: 36px;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1;
    padding: .25em .5em;
    cursor: pointer;
}


/* =======================================================================================================================================
Formular
======================================================================================================================================= */
#top .input-text, 
#top input[type=email], 
#top input[type=input], 
#top input[type=number], 
#top input[type=password], 
#top input[type=search], 
#top input[type=tel], 
#top input[type=text], 
#top input[type=url], 
#top select, 
#top textarea{
    font-family: var(--primary-font);
    padding: 1em;
    border-radius: .5em;
    border: 1px solid;
    margin: 0;
    font-size: var(--step--1);
}

#top form label{font-size: var(--step--1)}
#top form button{
	font-size: var(--step--1);
    font-weight: 700;
    padding: 1em 2em;
    border-radius: .5em;
    background: var(--enfold-main-color-color);
    color: var(--enfold-main-color-bg);
	border: 1px solid var(--enfold-main-color-color);
    box-shadow: none;
}
#top .alternate_color form button{
	background: var(--enfold-alternate-color-color);
    color: var(--enfold-alternate-color-bg);
}

#top .alternate_color .input-text, 
#top .alternate_color input[type='text'], 
#top .alternate_color input[type='input'], 
#top .alternate_color input[type='password'], 
#top .alternate_color input[type='email'], 
#top .alternate_color input[type='number'], 
#top .alternate_color input[type='url'], 
#top .alternate_color input[type='tel'], 
#top .alternate_color input[type='search'], 
#top .alternate_color textarea, 
#top .alternate_color select{border-color: var(--orthoplace-fresh-blue);}
#top .alternate_color input[readonly]{color: var(--orthoplace-fresh-blue);}

/* Formidable Forms */
#top .frm_forms p{font-size: var(--step--1); margin: 0}
#top .frm_forms > form .frm_primary_label{
	color: inherit;
	font-weight: 700;
}
#top .frm_forms > form .frm_required{
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
#top .frm_forms > form p.description, 
#top .frm_forms > form div.description, 
#top .frm_forms > form div.frm_description, 
#top .frm_forms > form .frm-show-form > div.frm_description, 
#top .frm_forms > form .frm_error, 
#top .frm_forms > form .frm_pro_max_limit_desc{
	color: inherit;
	font-size: var(--step--1);
}
#top .main_color .frm_forms > form .frm_error{color: #F04438}
#top .alternate_color .frm_forms > form .frm_error{color: rgba(168,220,235,1)}
#top .alternate_color .frm_checkbox label{color: #fff;}

#top .frm_forms > form .frm_primary_label {font-weight: 500; padding: .9rem;}
#top .frm_style_formidable-stil.with_frm_style .form-field{margin-bottom: 0;}
#top .frm_form_field:not(.frm_compact) .frm_dropzone{max-width: unset;}
#top .frm_dropzone .dz-message{border: 1px solid var(--orthoplace-fresh-blue); background: transparent;}
#top .with_frm_style .frm_dropzone{background: transparent;}
#top .with_frm_style .frm_form_field:not(.frm_compact) .frm_dropzone .frmsvg {color: var(--orthoplace-dark-blue); background: var(--orthoplace-fresh-blue); height: 2.5rem; width: 2.5rem; border-radius: 3rem; padding: .5rem;}
#top .alternate_color .frm_dropzone .frm_upload_text button{color: #fff !important; font-size: var(--step--1) !important; font-weight: 700 !important;)}
#top .alternate_color .frm_dropzone .frm_small_text p{font-size: var(--step--1) !important}
#top .frm_form_field:not(.frm_compact) .frm_dropzone{margin-bottom: 1rem;}
#top .with_frm_style .frm_inside_container.frm_label_float_top > label{opacity: 0; top: unset; left: unset;}

#top .alternate_color form.frm_pro_form button.frm_button_submit{
	font-size: var(--step-0);
    font-weight: 600;
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    overflow: hidden; 
	background: rgba(168,220,235,1);
    border: 1px solid var(--orthoplace-fresh-blue) !important;
    color: var(--orthoplace-dark-blue) !important;
    text-decoration: none !important;
    display: inline-flex;
    line-height: 1.2;
    transition: .2s;
}


/* =======================================================================================================================================
Section -> Separator
======================================================================================================================================= */
#top [class*='__section--separator']{
    position: relative;
    overflow: hidden;
    min-height: initial;
    aspect-ratio: 1920/450;
    background-color: transparent;
    clear: both;
}
#top [class*='__section--separator']:before{
    content: '';
    aspect-ratio: 1/1;
    height: auto;
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    border-radius: 50%;
    transform-origin: bottom center;
    translate: -54% 0;
    scale: 1.48;
    background-color: var(--before-bg, transparent);
}
#top [class*='__section--separator'] .container{display: none !important}

#top .__section--separator--2{aspect-ratio: 1920/390;}
#top .__section--separator--2:before{
    scale: 2.5;
    translate: -68% 0;
    transform-origin: top center;
    top: 0;
    bottom: unset;
}


/* =======================================================================================================================================
Hero
======================================================================================================================================= */
#top .__hero{--header-height: 80px}

@media screen and (min-width: 990px){
    #top .__hero{--header-height: 112px}
}

#top .__hero{margin: calc(-1 * var(--header-height)) 0 0; position: relative; overflow: hidden;}
#top .__hero *{transition: .4s;}
#top .__hero:before{
    content: '';
    border-radius: 50%;
    background-color: var(--orthoplace-dark-blue);
    width: auto;
    height: 200%;
    aspect-ratio: 1 / 1;
    position: absolute;
    left: 20%;
    top: 50%;
    translate: 0 -50%;
}
#top .__hero > .container{
    min-height: calc(100vh - var(--header-height));
    margin-top: var(--header-height) !important;
}
#top .__hero > .container > figure{
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -36% 0;
    height: 100%;
    aspect-ratio: 720 / 1024;
    max-width: 90vw;
    pointer-events: none;
}
#top .__hero > .container > figure:before{
    content: '';
    height: 85%;
    width: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--orthoplace-pastel-pink);
    position: absolute;
    right: 5%;
    top: 40%;
    animation: floating 8s ease-in-out infinite;
}
@keyframes floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(-32px); }
    100% { transform: translateY(0); }
}
#top .__hero > .container > figure .heroSwiper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#top .__hero > .container > figure .heroSwiper .swiper-slide-shadow{display: none !important}
#top .__hero > .container > figure .heroSwiper .swiper-slide:not(.swiper-slide-visible){opacity: 0 !important}
#top .__hero > .container > figure img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    display: block;
    position: relative;
}
#top .__hero > .container > figure > p{
    display: none;
    position: absolute;
    top: 40%;
    left: calc(100% + 2rem);
    color: #fff;
	background-color: var(--orthoplace-dark-blue);
    font-size: var(--step-0);
    max-width: 360px;
    width: 100%;
    margin: 0;
}
#top .__hero > .container > figure > p:before{
    content: '';
    display: block;
    height: 1px;
    width: 50%;
    background: #fff;
    position: absolute;
    left: calc(-50% - 1em);
    top: .5em;
    z-index: -1;
}
#top .__hero > .container > div{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 4rem 0;
    z-index: 1;
    min-height: calc(100vh - var(--header-height));
}
#top .__hero > .container > div > *{order: 1;}
#top .__hero > .container > div p{
    margin: 0;
    font-weight: 700;
    background: rgb(255 255 255 / 80%);
    line-height: 1.2;
    padding: .2em var(--step--1);
    border-radius: .2em;
}
#top .__hero > .container > div p:nth-child(1){font-size: var(--step-4);}
#top .__hero > .container > div p:nth-child(2){font-size: var(--step-1);}
#top .__hero > .container > div .avia-button{margin: 1rem 0 0; order: 1;}
#top .__hero > .container > div .__green--text--box{
    position: absolute;
    bottom: 1rem;
    font-size: var(--step-1);
}

#top .__hero > .__front--svg{
    width: 100%;
    max-width: 2560px;
    height: auto;
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    scale: 1.005;
}
#top .__hero > .__front--svg svg{display: block;}

@media screen and (min-width: 990px){
    #top .__hero:before{left: 40%;}
    #top .__hero > .container{display: flex; align-items: center;}
    #top .__hero > .container > figure{translate: -50% 0}
    #top .__hero > .container > figure:before{top: 20%;}
    #top .__hero > .container > div{justify-content: center;}
    #top .__hero > .container > div .avia-button{order: 0; margin: 0;}
}

@media screen and (min-width: 1440px){
    #top .__hero > .container > figure > p{display: block;}
    #top .__hero > .container > div .__green--text--box{translate: 1024px 94px; position: relative;}
}


/* =======================================================================================================================================
Footer
======================================================================================================================================= */
#footer{padding: var(--space-2xl-2xl) 0}
#footer .widget{margin: 0;}
#footer .container{
    display: flex;
    flex-direction: column;
}
#footer .container > .flex_column{
    float: none;
    margin: 0 !important;
    width: 100%;
}
#footer .container > .flex_column:nth-child(1){padding: 0 0 2rem;}
#footer .container > .flex_column:nth-child(1) .widgettitle{font-size: var(--step-3);}
#footer .container > .flex_column:nth-child(1) .textwidget p{font-size: var(--step-1);}

@media (min-width: 1280px){
    #footer .container{flex-direction: row;}
    #footer .container > .flex_column{flex-grow: 1; width: auto;}
    #footer .container > .flex_column:nth-child(1){padding: 8rem 0 0;}
}



#top #socket .container{
    padding-top: 3rem; 
    padding-bottom: 6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    font-size: var(--step-0);
}
#top #socket .container *{
    float: none; 
    margin: 0;  
    line-height: 1.2; 
    width: auto; 
    height: auto; 
    padding: 0;
    border: 0;
    top: initial;
    border-radius: initial;
}
#top #socket .container .copyright small{
    display: block;
    font-size: var(--step--1);
    margin: .5em 0 0;
}
#top #socket .container nav.sub_menu_socket{
    font-size: var(--step--1);
}
#top #socket .container ul.social_bookmarks{
    display: flex;
    gap: .5em;
}
#top #socket .container ul.social_bookmarks li{
    font-size: calc(var(--step-0) * 1.2);
}
#top #socket .container ul.social_bookmarks li a{
    font-size: 1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: grid;
    place-content: center;
    line-height: 1;
    background-color: var(--orthoplace-fresh-blue);
    color: var(--orthoplace-dark-blue);
}
#top #socket .container nav.sub_menu_socket ul.menu{
    display: flex;
    gap: 1em;
}

@media (min-width: 768px){
    #top #socket .container{flex-direction: row; align-items: flex-end;}
    #top #socket .container ul.social_bookmarks{order: 3;}
    #top #socket .container nav.sub_menu_socket{flex-grow: 1; display: flex; justify-content: center;}
}


#scroll-top-link{display: none;}