/*
Theme Name: Enfold Child
Description: Customized child theme for enfold parent theme
Version: 2.0
Author: vortac
Author URI: http://www.vortac.org
Template: enfold
*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
/* the base size is still 16px (even if changed in the themes options) */
strong {
	font-weight: 600;
    /* strong siblings used a different color (the link color) from the color-set in theme options */
    color: #404041 !important;
}
h1, h2 {
    font-weight: 300;
    font-size: 36px;
	font-size: 2.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    max-width: 640px;
    border-left: 3px solid;
    border-color: #bf9474 !important;
    padding-left: 20px !important;
    margin-bottom: 32px !important;
}

h3 {
    font-weight: 300;
    font-size: 30px;
	font-size: 1.875rem;
    /*color: #404041 !important;*/
    /*border-top: 1px solid;
    border-color: #bbbdbf !important;*/
    /*padding-top: 1.5rem;
    padding-bottom: 1rem;*/

    border-left: 2px solid;
    border-color: #bf9474 !important;
    padding-left: 16px !important;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
/* Smaller Subline in Headline */
h3 em {
    display: block;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    font-style: normal !important;
}

#lehrsec h3 {
    border: 0 !important;
}

h4 {
    font-weight: 600;
    font-size: 18px;
	font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.125em;
}

.main-color h4 {
    color: #404041;
}

/* old version */
/*h2 {
    font-weight: 600;
    font-size: 18px;
	font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #404041 !important;
}
h3 {
    font-weight: 600;
    font-size: 18px;
	font-size: 1.125rem;
    color: #404041 !important;
    border-top: 1px solid;
    border-color: #bbbdbf !important;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}*/

p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.thera_smaller {
    font-size: 90%;
    line-height: 1.5em;
}
/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
p a {
    border-bottom: 1px solid rgba(#bf9474,.25) !important;
    
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    -moz-hyphens: none !important;
    hyphens: none !important;
}
p a:hover {
    text-decoration: none !important;
    border-color: rgba(#bf9474,1) !important;
}
/*--------------------------------------------------------------
# General Layout
--------------------------------------------------------------*/
.avia_textblock {
    max-width: 640px;
}
.avia-section {
    /* die Standard-min-height einer Section überschreiben */
    min-height: 80px !important;
}
/* DESKTOP ONLY */
@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

    /* Zu manchen Sections etwas mehr Padding hinzufügen */
    #welcomesec, #methsec, #therasec, #lehrsec, #tersec, #konsec {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    #anfasec {
        padding-top: 30px !important;
    }
}
/* Das Impressum benötigt oben besonders viel Padding */
#impresec {
    padding-top: 100px !important;
}
/*--------------------------------------------------------------
# Special Headline
--------------------------------------------------------------*/
.av-special-heading-h1 .special-heading-border {
    height: 0em;
}
/*--------------------------------------------------------------
# Header, Logo etc.
--------------------------------------------------------------*/
.header_bg {
    position: fixed !important;
    background-color: #4f5251 !important;
    opacity: 0;
    height: 94px;
    border-bottom: 1px solid #4f5251 !important;
    /*border-bottom: 1px solid #e8e7e6 !important;*/
}
#header_main {
    position:fixed;
    width:100%;
    border-bottom: 0;
}
#header_main .logo{
    width:180px !important;
    height: auto !important;
}
#header_main .logo img{
    display: inline-block;
    vertical-align: middle;
}
/* Evtl. muss ich das wieder ändern, vielleicht wichtig für Sticky Header?*/
#main {
    padding-top: 0 !important;
}
.avia-menu-fx {
    bottom: 12px;
}
/*--------------------------------------------------------------
# Mobile/Tablet Menu
--------------------------------------------------------------*/
#mobile-advanced li > a {
    border-top: 1px solid #e8e7e6 !important;
}
#mobile-advanced li > a::before{
    content: "" !important;
}
#mobile-advanced li > a:hover {
    /*border-top-color: #bf9474 !important;*/
}
/*--------------------------------------------------------------
# Home Section
--------------------------------------------------------------*/
/* Hintergrundbild der ersten Section */
#homesec {
    margin: 0 !important;
    padding: 0 !important;
    background-size: auto 100%;
}
#homesec .container {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    /*margin-left: 10% !important;*/
}
.vrtc_hero_img_container{
    height: 660px;
    margin: 0 !important;
    padding: 0 !important;
    background-size: auto 100% !important;
    background-attachment:scroll;
}
.vrtc_hero_txt_container .avia_textblock{
    font-weight: 300;
    font-size: 24px;
	font-size: 1.5rem;
    line-height: 1.35 !important;
    color: #6d6e70 !important;
 
}
.vrtc_hero_txt_container .avia_textblock p{
       /* override the hyphens settings for p */
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    -moz-hyphens: none !important;
    hyphens: none !important;
}
.vrtc_hero_txt_logo {
    margin-bottom: 16px;
    margin-left: -24px;
    opacity: 0.7;
}
/* TABLET ONLY */
@media only screen and (max-width: 989px) {
    .vrtc_hero_txt_logo {
        margin-left: -16px !important;
    }
}
/* TABLET / MOBILE */
@media only screen and (max-width: 767px) {
    /* Hide the stone image */
    .vrtc_welcome_img_container{
        display:none;
    }
    #homesec .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        
    }
    .vrtc_hero_img_container{
        background-position: center bottom !important;
    }
    .vrtc_hero_txt_container{
        width: 85% !important;
        max-width: 85% !important;
        margin: 0 auto !important;
    }
    .vrtc_hero_txt_logo {
        display:none !important;
    }
}
/*--------------------------------------------------------------
# Krankheiten Section
--------------------------------------------------------------*/
/*#kransec .container {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    padding-right: 50px !important;
}
.vrtc_kransec_img_container{
    margin: 0 !important;
    padding: 0 !important;
    background-size: auto 100% !important;
    background-attachment:scroll;
}
.vrtc_kransec_txt_container {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}*/
/* TABLET / MOBILE */
@media only screen and (max-width: 767px) {
    /* Reset the container to "default" behaviour */
    /*#kransec .container {
        margin: 0 auto !important;
        padding-right: 0 !important;
    }*/
    /* Hide the image */
    /*.vrtc_kransec_img_container{
        display:none;
    }*/
}
/*--------------------------------------------------------------
# Socket
--------------------------------------------------------------*/
#socket .container {
    padding-top: 0px;
    padding-bottom: 0px;
}
/* center copyright info in socket */
#socket .copyright {
    display: inline-block;
    width: 100%;
    text-align: center;
}
/*--------------------------------------------------------------
# Images
--------------------------------------------------------------*/
#therasec .avia_image, #therasec_ar .avia_image {
    border-radius: 0 !important;
    background: white !important;
    padding: 1rem;
}
#lehrsec .avia_image, #lehrsec_ar .avia_image {
    border-radius: 0 !important;
    background: transparent;
    padding: 1rem;
}
/* für die beiden kleinen Bildchen bei Anfahrt */
.inline_img_centered {
    vertical-align: middle;
    margin-right: 4px;
}
/*--------------------------------------------------------------
# Listen
--------------------------------------------------------------*/
#therasec ul li, #lehrsec ul li {
    list-style: none;
    position:relative;
}
#therasec ul li::before, #lehrsec ul li::before {
    content: "· ";
    position: absolute;
    left: -16px;
}
/* Listen-Stile bei Section "Krankheiten" */
#kransec ul {
    list-style: none;
    font-weight: 600;
}
#kransec ul li::before {
    content: "·";
    color: #bf9474;
    font-weight: 600;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}
/*#kransec ul li {
    border-top: 1px solid #bbbdbf;
}*/
#kransec ul li .smallerListText {
    display: block;
    font-weight: 400;
    font-size: 80%;
    line-height: 1.35em;
    margin-bottom: 0.35em;
}
/*--------------------------------------------------------------
# Form
--------------------------------------------------------------*/
form fieldset h3 {
    border-top: 0;
    padding-top: 0;
}
/* Chrome / Opera / Safari */
form fieldset input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #929497 !important;
    font-size: 0.8em;
}
/* Firefox 19+ */
form fieldset input::-moz-placeholder,textarea::-moz-placeholder {
    color: #929497 !important;
    font-size: 0.8em;
}
/* IE 10+ */
form fieldset input::-ms-input-placeholder,textarea::-ms-input-placeholder {
    color: #929497 !important;
    font-size: 0.8em;
}
/* Firefox 18- */
form fieldset input:-moz-placeholder,textarea:-moz-placeholder {
    color: #929497 !important;
    font-size: 0.8em;
}
/*--------------------------------------------------------------
# Toggle/Akkordeon
--------------------------------------------------------------*/
.togglecontainer {
    /* so lässt sich das nachfolgende Next-icon mit Abstand platzieren */
    overflow: hidden !important;
}
/* Maximale Breite der Toggle-Section begrenzen */
.av_toggle_section {
    max-width: 640px;
}
/* wird momentan nicht benötigt */
.single_toggle {
    
}
/* Headline des einzelnen Toggle-Elements */
.toggler {
    border:none !important;
    border-top: 1px solid #404041 !important;
    font-weight:600;
    padding-left: 0 !important;
    /*margin-left: 35px !important;*/
    background: none !important;
}
/* Hover-Eigenschaft der Headline */
.toggler:hover {
    color:#bf9474;
    background: none !important;
    border-top-color: #bf9474 !important;
}
/* Active-Eigenschaft der Headline */
.toggler.activeTitle {
    color:#bf9474 !important;
    border-top-color: #bf9474 !important;
}
/* Content-Bereich des einzelnen Toggles */
.toggle_content {
    background: none !important;
    border: 0 !important;
    font-weight: 400;
    font-size: 90%;
    line-height: 1.5em;
    padding-top: 0 !important;
    padding-left: 20px !important;
    padding-right: 10px !important;
}
/* Den Inhalt des default toggle icon verbergen */
.toggle_icon .vert_icon, .toggle_icon .hor_icon {
    display:none !important;
}
/* Den Toggle-Icon-Div verwenden, um ein eigenes Icon rechts zu platzieren, ist nämlich schon absolut platziert... */
.toggle_icon {
    border: 0 !important;
    width: 18px;
    height: 18px;
    left: auto;
    right: 6px;
    background-image: url('../../uploads/2022/11/pxroth-arrow-sprite-new-252x36-1.png');
    background-repeat: no-repeat;
    background-size: 126px 18px;
    background-position: 0 0;
    transition: none !important;
}
/* die Hover-Eigenschaft muss vor der active-Eigenschaft kommen */
.toggler:hover .toggle_icon {
    background-position: -18px 0;
}
/* der Active-Zustand muss priorisiert werden, dann gibt es keinen Hover-Change des icons bei aktivem Toggle */
.toggler.activeTitle .toggle_icon {
    background-position: -108px 0 !important;
}
/* spezielle Eigenschaften für Toggle bei Therapeuten */
#therasec .toggler {
    margin-left: 24px !important;
}
#therasec .toggle_content {
    padding-left: 24px !important;
}
/* TABLET / MOBILE */
@media only screen and (max-width: 767px) {
    /* Strip the bottom-margin */
    .togglecontainer {
        margin-bottom: 0 !important;
    }
}
/*--------------------------------------------------------------
# Icon: Nach oben scrollen
--------------------------------------------------------------*/
/* das #top Icon */
a#scroll-top-link {
    /* Das Scroll-Top-Icon nicht anzeigen 
    display: none !important;*/
    background-image: url('../../uploads/2016/04/pxroth-ArrowUp2-200x100.png');
    background-repeat: no-repeat;
    background-size: 100px 50px;
    background-position: 0 0;
    
    background-color: transparent;
    color: transparent;
    
    right: 20px;
    bottom: 45px;
    
    border: 0;
    border-radius: 0;
    width:50px;
    height:50px;
    
    transition: none !important;
}
a#scroll-top-link:hover {
    background-size: 100px 50px;
    background-position: -50px 0;
    background-color: transparent;
    color: transparent;
    
    border: 0;
    border-radius: 0;
    
    transition: none !important;
}
a#scroll-top-link.avia_pop_class {
    opacity: 0.5 !important;
}
/*--------------------------------------------------------------
# Icon: Zur Next Section scrollen
--------------------------------------------------------------*/
/* Das Scroll-Down-icon lässt sich per Shortcode im Backend dynamisch platzieren */
.vrtc_scroll_down_link {
    display:block; 
    width:50px;
    height:50px;
    background-image: url('../../uploads/2016/04/pxroth-ArrowDown2-200x100.png');
    background-repeat: no-repeat;
    background-size: 100px 50px;
    background-position: 0 0;
    
    background-color: transparent;
    color: transparent;
    opacity: 0.5;
    
    margin-top: 25px;
}
.vrtc_scroll_down_link:hover {
    background-position: -50px 0;
}
.vrtc_scroll_down_indent {
    margin-left:20px;
}
/* TABLET / MOBILE */
@media only screen and (max-width: 767px) {
    /* das Next Section Icon überall entfernen */
    .vrtc_scroll_down_link {
        display:none;
    }
}
/*--------------------------------------------------------------
# Custom Classes for single elements (added through ALB)
--------------------------------------------------------------*/
/* der blaue Textblock bei Termine */
.vrtc_termin_aside {
    border-left: 3px solid;
    border-color: #bf9474 !important;
    padding-left: 20px !important;
}
.vrtc_termin_aside strong {
    color: #bf9474 !important;
}
/*--------------------------------------------------------------
# Adress-bar-section
--------------------------------------------------------------*/
#addressec.avia-section {
    min-height: auto !important;
}
#addressec .container {
    max-width: none;
    margin-left: 0 !important;
    padding: 0;
}
#addressec .avia_textblock {
    max-width: none;
}
/* TABLET / MOBILE */
@media only screen and (max-width: 767px) {
    /* volle Breite auf Mobile und kleinem Tablet */
    #addressec .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}
/*--------------------------------------------------------------
# Image Grid
--------------------------------------------------------------*/
#mood-images {
    display:grid;
    grid-template-columns: 29% 25.5% 18% 27.5%;
    grid-template-rows: 37% 10% 23% 30%;
    gap: 32px;
}
#mood-images #img1 {
    grid-column: 1;
    grid-row: 1 / 3;
}
#mood-images #img2 {
    grid-column: 1;
    grid-row: 4;
}
#mood-images #img3 {
    grid-column: 2;
    grid-row: 1;
}
#mood-images #img4 {
    grid-column: 2;
    grid-row: 2;
}
#mood-images #img5 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
#mood-images #img6 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}
#mood-images #img7 {
    grid-column: 4;
    grid-row: 3 / 4;
}
/*--------------------------------------------------------------
# Full width mobile map
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .avia-section.full-width .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        float: none;
    }
}
/*--------------------------------------------------------------
# Innenraum Logo bei Methoden
--------------------------------------------------------------*/
@media only screen and (max-width: 479px) {
    /* Logo nicht float links */
    #methoden-innenraum a.alignleft {
        float: none !important;
    }
    #methoden-innenraum img.alignleft {
        float: none !important;
    }
}