/*======================================
Theme Name: Ausbildungsmesse Hauzenberg
Theme URI: https://www.siimple.de/
Description: Child Theme für Ausbildungsmesse Hauzenberg
Version: 1.0
Author: siimple GmbH
Author URI: https://www.siimple.de/
Template: Divi
======================================*/



.dl-v-menu .et_pb_menu_inner_container,
.dl-v-menu .et_pb_menu__wrap,
.dl-v-menu .et_pb_menu__menu,
.dl-v-menu.et_pb_menu .et_pb_menu__menu>nav,
.dl-v-menu.et_pb_menu .et_pb_menu__menu>nav>ul {
    display: block;
}

:root {
    --color-header-bg: #ffffff;

    --mobile-nav-toggle-color-active:#ffffff;
    --mobile-nav-toggle-color-hover:#e6007c;
    --mobile-nav-toggle-color:#000000;

    --color-navi-header: #ffffff;
    --color-navi-header-hover:#e6007c;

    --color-navi-header-mobile:#000;
    --color-navi-header-mobile-hover:#2d7f8e;
    --color-mobile-nav-background:#000000;
    --color-mobile-nav-background-mobile:#000000;

    --header-height-desktop: 100px;
    --header-height-desktop-fixed:70px;

    --header-height-mobile: 70px;
    --header-height-mobile-fixed:70px;

    --color-footer-top-background:#2a5458;
    --color-footer-bottom-background:#2a5458;

    --color-footer-top:#2d7f8e;
    --color-footer-bottom:#fff;

    --color-footer-top-hover:#333333;
    --color-footer-bottom-hover:#333333;
}

.et_fixed_nav.et_show_nav #page-container:not(.et-fb-iframe-ancestor){
    padding-top: var(--header-height-desktop);
}

#page-container{
    overflow: hidden;
}

/**
 * focus for Web Accessibility
 */
a:not(.et_pb_button):focus-visible {
    box-shadow: 0 0 0 2px #ff357e;
    outline: none;
    border-bottom: none;
}

a:not(.et_pb_button):not(.top-nav *):focus-visible{
    padding: 4px;
}

@media (min-width: 940px) {
    .top-nav a:focus-visible{
        box-shadow: inset 0 0 0 2px #ff357e;
        padding: 4px;
    }
}

@media (max-width: 940px) {
    .top-nav a:focus-visible{
        box-shadow: inset 0 0 0 2px #ff357e;
    }
}

a.et_pb_button:focus-visible {
    box-shadow: 0 0 0 3px #ff357e;
    clip-path: none;
}

a:not(.et_pb_button):focus-visible:after{
    display: none;
}

.menu__toogle:focus-visible ~ label.mobile-open{
    visibility: visible;
    width: auto;
    text-align: center;
    box-shadow: inset 0 0 0 2px #ff357e;
}

.nav__toggle:focus-visible ~ label{
    box-shadow: inset 0 0 0 2px #ff357e;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.skip-to-content{
    color: #fff;
}

.skip-to-content:focus-visible{
    z-index: 9999;
    clip: auto;
    color: #fff;
    background: #000;
    width: auto;
    height: auto;
    padding: 6px
    12px !important;
    font-weight: 700;
    overflow: auto;
    position: absolute;
    top: 1px;
    left: 1px;
    box-shadow: inset 0 0 0 2px #ff357e !important;
}

.admin-bar .skip-to-content:focus-visible{
    top: 33px;
}

@media (max-width: 782px) {
    .admin-bar .skip-to-content:focus-visible{
        top: 47px;
    }
}

/**
 * header
 */
#header{
    position: fixed;
    width: 100%;
    margin: 0 auto;
    top: 0px;
    left: 0px;
    min-width: 320px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background: var(--color-header-bg);
    height: var(--header-height-desktop);
    z-index: 999;
}

#header.et-fb-root-ancestor-sibling{
    position: static !important;
}

#header.fx{
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.05);
    height: var(--header-height-desktop-fixed);
}

#hinner{
    height: 100%;
}

.admin-bar #header,
.admin-bar #header.fx {
    top: 32px;
}

#logo-main{
    border-bottom: none;
    width: 243px;
    height: 70px;
    margin-top: 15px;
    position: absolute;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    display: block;
    background-image: url("img/stadthauzenberg-logo.svg");
    cursor: pointer;
    z-index: 5;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
}


.no-touchevents #logo-main:hover,
.touchevents #logo-main:active{
    opacity: 0.6;
}

#header.fx #logo-main{
    width: 163px;
    height: 47px;
    margin-top: 10px;
}

#logo-main > span{
    text-indent: -1000px;
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    top: 50%;
    z-index: -1;
}


/**
 * mobile navigation toggle
 */
#main-nav-toggle {
    top: 50%;
    width: 55px;
    cursor: pointer;
    height: 48px;
    position: absolute;
    margin-top: -24px;
    right:0px;
    z-index: 8;
    transition: all 0.3s;
    text-indent: -1000px;
    overflow: hidden;
}

.nav__toggle {
    position: fixed;
    top: 0;
    left: -1978em;
}


#main-nav-toggle span,
#main-nav-toggle span:after,
#main-nav-toggle span:before {
    cursor: pointer;
    height: 1.5px;
    width: 35px;
    background-color: var(--mobile-nav-toggle-color);
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
    border-radius: 5px;
}

.no-touchevents #main-nav-toggle:hover span,
.no-touchevents #main-nav-toggle:hover span:after,
.no-touchevents #main-nav-toggle:hover span:before,
.touchevents #main-nav-toggle:active span,
.touchevents #main-nav-toggle:active span:after,
.touchevents #main-nav-toggle:active span:before{
    background: var(--mobile-nav-toggle-color-hover);
}

#main-nav-toggle span {
    top: 24px;
    transform: translateZ(0);
    left: 5px;
    width: 29px;
}

#main-nav-toggle span:before {
    top: -10px;
    left: 5px;
}

#main-nav-toggle span:after {
    bottom: -10px;
    left: 5px;
}

.nav__toggle:checked ~ #main-nav-toggle span:after {
    -webkit-transform: translateY(-10px) rotateZ(135deg);
    transform: translateY(-10px) rotateZ(135deg);
    background-color:var(--mobile-nav-toggle-color-active);
}

.nav__toggle:checked ~ #main-nav-toggle span:before {
    -webkit-transform: translateY(10px) rotateZ(-135deg);
    transform: translateY(10px) rotateZ(-135deg);
    background-color:var(--mobile-nav-toggle-color-active);
}

.nav__toggle:checked ~ #main-nav-toggle span {
    background-color: transparent;
}

/**
 * main navigation
 */
.mobile-navigation-holder{
    width: 100%;
    height: 100%;
}

.top-nav {
    box-sizing: border-box;
    color: #2a5458;
    padding: 0;
    transition: width .75s cubic-bezier(0.23, 1, 0.32, 1) .125s, visibility .5s;
    height: 100%;
    background:  #000000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 7;
    width:0;
    visibility: hidden;
    overflow: hidden;
}

.top-nav > div{
    width: 100%;
    height: 100%;
}

.top-nav > div > ul{
    transition: all 0.3s;
}

#header.fx .top-nav > div > ul{
    margin-top: 0px;
}

.top-nav > div > ul > li{
    margin-right: 20px;
    position: relative;
    border: 2px solid transparent;
}

.top-nav > div > ul > li:last-child{
    margin-right: 0;
}

.top-nav > div > ul > li:hover,
.top-nav > div > ul > li.current-menu-item{
}

.top-nav > div > ul > li:hover > a,
.top-nav > div > ul > li.current-menu-item > a{
    color: var(--color-navi-header-hover);
}

.top-nav a{
    border-bottom: 0px;
    color: var(--color-navi-header);
    font-size: 3.5em;
    line-height: 1.4;
    letter-spacing: 0.03em;
    height: 100%;
    text-transform: none;
    border-bottom: none !important;
    font-family: 'Maven Pro',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 400;
}

.nav__toggle:checked ~ .top-nav{
    visibility: visible;
    width: 100%;
}

.top-nav > div > ul > li input{
    margin: 0;
    width: 0;
    height: 0;
    -webkit-appearance: none;
}

.top-nav > div > ul > li > ul.sub-menu{
    visibility: hidden;
    position: absolute;
    left: -6px;
    top: 100%;
    width: 220px;
    height: 0px;
    opacity: 0;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.top-nav > div > ul > li > ul.sub-menu > li:first-child{
    margin-top: 37px;
}

#header.fx .top-nav > div > ul > li > ul.sub-menu{
    top: 100%;
}

#header.fx .top-nav > div > ul > li > ul.sub-menu > li:first-child{
    margin-top: 19px;
}

label.mobile-open{
    width: 36px;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.no-touchevents label.mobile-open{
    visibility: hidden;
    width: 0;
}

label.mobile-open > i{
    transition: all 0.3s;
    color: var(--color-navi-header);
    padding: 10px 10px;
}

.top-nav > div > ul > li > input.menu__toogle:checked ~ .mobile-open > i{
    transform: rotateZ(180deg);
}

.top-nav > div > ul > li > input.menu__toogle:checked ~ ul.sub-menu,
.no-touchevents .top-nav > div > ul > li:hover > ul.sub-menu{
    visibility: visible;
    height: auto;
    opacity: 1;
}

.top-nav > div > ul li:hover,
.touchevents .top-nav > div > ul li:active,
.top-nav > div > ul > li.current-menu-item{
}

.top-nav > div > ul > li > ul.sub-menu li{
    background: var(--color-header-bg);
    border-bottom: 1px solid white;
}

.no-touchevents .top-nav > div > ul > li > ul.sub-menu li:hover a,
.touchevents .top-nav > div > ul > li > ul.sub-menu li:active a{
    background: var(--color-navi-header-hover);
}

.top-nav > div > ul > li > ul.sub-menu li > a{
    display: block;
    padding: 10px 10px 8px 10px;
    line-height: 1;
    color: var(--color-navi-header);
    border-bottom: none !important;
    width: 100%;
}

.top-nav > div > ul > li > ul.sub-menu li:last-child > a{
    padding: 10px 15px 12px 15px;
}

.top-nav > div > ul > li > ul.sub-menu li:last-child{
    border-bottom: none !important;
}

.nav__toggle:checked ~ .mobile-navigation-holder .top-nav{
    visibility: visible;
    width: 100%;
}



/**
 * Flex layout
 */
.flex-row{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;

    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;

    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.flex-column{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;

    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-row.nowrap{
    -webkit-flex-wrap:nowrap;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    -webkit-flex-flow:nowrap;
    flex-flow:nowrap;
}

.flex-row.justify-space-between {
    -webkit-box-pack: space-between;
    -moz-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
}

.flex-row.justify-space-around {
    -webkit-box-pack: space-around;
    -moz-box-pack: space-around;
    -webkit-justify-content: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
}

.flex-column.justify-content-center,
.flex-row.justify-content-center{
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-column.justify-content-flex-end,
.flex-row.justify-content-flex-end{
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.flex-row.justify-content-flex-start{
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.flex-row.align-items-stretch,
.flex-column.align-items-stretch{
    -webkit-align-items: center;
    align-items: stretch;
}

.flex-row.align-items-end,
.flex-column.align-items-end{
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.flex-row.align-items-center,
.flex-column.align-items-center{
    -webkit-align-items: center;
    align-items: center;
}

.flex-row.align-content-center{
    -webkit-align-content: center;
    align-content: center;
}


.flex-column.align-items-flex-end,
.flex-row.align-items-flex-end{
    -webkit-align-items: center;
    align-items: flex-end;
}

/**
 * footer
 */
#footer{
    width: 100%;
}

#footer_top{
    background: var(--color-footer-top-background);
    color: var(--color-footer-top);
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 1px solid var(--color-footer-bottom-background);
}

#footer-sidebar{
    width: 100%;
}

.footer-top-row > ul > li:first-child {
    padding-right: 50%;
    width: 100%;
    padding-bottom: 20px;
}

.footer-top-row > ul > li, .footer-top-row .menu-footer-navigation-container {
    padding-right: 20px;
    width: 50%;
}

.no-touchevents #footer_bottom a:hover,
.touchevents #footer_bottom a:active {
    color: var(--color-footer-top-hover);
}

#footer_bottom{
    background: var(--color-footer-bottom-background);
    color: var(--color-footer-bottom);
    padding-top: 30px;
    padding-bottom: 30px;
}

#footer_bottom a{
    color: var(--color-footer-bottom);
}

.no-touchevents #footer_bottom a:hover,
.touchevents #footer_bottom a:active {
    color: var(--color-footer-bottom-hover);
}

.footer-bottom-nav{
    margin: 0;
    padding:0;
    line-height:1;
}

.footer-bottom-nav li:not(:last-child):after{
    content: "/";
    padding: 0 9px;
    color: var(--color-footer-bottom);
}


@media (max-width: 940px){
    #header,
    #header.fx{
        height:var(--header-height-mobile);
    }

    .et_fixed_nav.et_show_nav #page-container:not(.et-fb-iframe-ancestor){
        padding-top: var(--header-height-mobile);
    }

    #main-nav-toggle{
        display: block;
    }

    .top-nav a{
        font-size: 2.5em;
        line-height: 1.2;
    }

    #header.fx #logo-main,
    #logo-main{
        width: 139px;
        height: 40px;
        margin-top: 15px;
    }

    #main-nav-toggle span,
    #main-nav-toggle span:after,
    #main-nav-toggle span:before{
      height: 1px;
      width: 30px;
    }

    #main-nav-toggle span:before {
      top: -9px;
    }

    #main-nav-toggle span:after {
      bottom: -9px;
    }

}
@media (max-width:782px) {
    .admin-bar #header,
    .admin-bar #header.fx{
        top: 46px;
    }

    .footer-top-row > ul > li{
        width: 100%;
        text-align: center;
        border-left: none;
        padding-left: 0;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

    .footer-bottom-nav > li {
        width: 100%;
        text-align: center;
        line-height: 2;
    }

    .footer-bottom-nav li:not(:last-child):after {
        content: "";
        padding: 0;
    }
}

@media (max-width:1200px) {
    #hinner.container,
    .et_section_specialty > .et_pb_row,
    .et_pb_row_0.et_pb_row,
    .et_pb_row_1.et_pb_row,
    .et_pb_row_2.et_pb_row,
    .et_pb_row_3.et_pb_row,
    .et_pb_row_4.et_pb_row,
    .et_pb_row_5.et_pb_row,
    .et_pb_row_6.et_pb_row,
    .et_pb_row_7.et_pb_row,
    .et_pb_row_8.et_pb_row,
    .et_pb_row_9.et_pb_row,
    .et_pb_row_10.et_pb_row,
    .et_pb_row_11.et_pb_row,
    .et_pb_row_12.et_pb_row,
    .et_pb_row_13.et_pb_row,
    .et_pb_row_14.et_pb_row,
    .et_pb_row_15.et_pb_row,
    .et_pb_row_0_tb_footer.et_pb_row,
    .et_pb_row_1_tb_footer.et_pb_row,
    .et_pb_row_2_tb_footer.et_pb_row{
        width: 100% !important;
        padding: 0 20px !important;
    }
}