/*
Theme-Name: FBS
Author: MOLECO GmbH
Author URI: http://www.moleco.de
Description: Responsive Theme
Version: 1.0
*/

/*
Colors
*/
:root{
    --prime:    #87BD27;
    --sec:      #004EA0;
    --orange:   #F39101;
    --yellow:   #FFC500;
    --lila:     #522178;
    --lightblue:#0186C1;
    --black:    #4D4D4D;
    --lightgrey:#F8F8F8;
    --grey:     #AAAAAA;
    --white:    #ffffff;
}

/*-------------------------------------------------------------------------------------------*/
@media (max-width:1480px){
    #page-header{padding: 0 0 20px;margin-bottom: 0!important;}
    
    #page-header .menuburgerbutton{display: block!important;}
    #page-header .menu-mobile.active{display: block!important;background: var(--lightgrey);position: fixed;z-index: 1;right: 0;top: 0;height: 100%;width: 40%;z-index: 99;box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.25);}
    #page-header .menu-mobile.active #menu-mobilemenu{padding: 100px 40px 0;margin: 0;}
    #page-header .menu-mobile.active li{margin-bottom: 20px;display: block;text-align: left;padding-left: 30px;}
    #page-header .menu-mobile.active li a{color: var(--black);font-size: 120%;font-weight: 700;text-transform: uppercase;}
    #page-header .menu-mobile.active li a:hover{color: var(--sec);}
    #page-header .menu-mobile.active li.menu-item-has-children{position: relative;}
    #page-header .menu-mobile.active li.menu-item-has-children::after{content: '';width: 1rem; aspect-ratio: 1/1;background-image: url('../../src/media/icons/arrow-up.png');display: block;background-position: center;background-repeat: no-repeat;background-size: contain;transform: rotate(180deg) translateY(-22%);filter: brightness(0) saturate(100%);position: absolute;top: 4px;left: 0;cursor: pointer;transition: all ease .3s;}
    #page-header .menu-mobile.active li.menu-item-has-children.active::after{transform: rotate(0deg) translateY(-22%);top: 10px;transition: all ease .3s;}

    #page-header .menu-mobile.active li .sub-menu{display: none;padding-left: 0;}
    #page-header .menu-mobile.active li.active .sub-menu{display: block;}
    #page-header .menu-mobile.active li li{margin: 20px 0;padding-left: 0;}
    #page-header .menu-mobile.active li li a{font-weight: 500;line-height: 1;display: block;text-transform: none;}
    #page-header .menu-mobile.active .suche{display: block;}
    #page-header .menu-mobile.active ul.icons{display: flex;justify-content: flex-start;margin-top: 50px;padding-left: 50px;}
    #page-header .menu-mobile.active ul.icons li{margin-bottom: 0;}
    #page-header .menu{display: block;}
    
    #page-header .menu-suche .suche .filter{display: none;}
    #page-header .navigation{right: 0!important;gap: 1rem;}
    #page-header .navigation ul.d-none{display: flex!important;margin-bottom: 0!important;align-items: center;}
    #page-header .navigation ul.d-none a{text-align: center;}
    #page-header .navigation ul.d-flex{display: none!important;}
    
    #page-header .navigation .menu-menu-container, #page-header .menu-suche img{display: none!important;}
    #page-header .menu-top{display: none;}
    #page-header .menu-bottom .logo{margin: 0 auto;}
    #page-header .menu-bottom .logo img{max-width: 80%;margin-top: 0;}
    #page-header .menu-suche{padding-bottom: 0!important;}
    #page-header .row{align-items: center;}
    #page-header .filter form .form-input{background: var(--white)!important;}
    
    /* #page-header.bottom .navigation{align-items: center;}
    #page-header.bottom .navigation ul{margin-bottom: 5px;}
    #page-header.bottom .menu{display: block;} */
    #page-header.scrolled .bunt{margin-bottom: 30px!important;}

    
    .headline{font-size: 250%;}
    
    #page-footer *,
    .rechtliches,
    #page-footer .footer-menu ul li a{font-size: 95%;}
    
    #page-footer .rechtliches,
    #page-footer .footer-menu ul{display: flex;justify-content: center!important;margin-bottom: 0!important;text-align: center;flex-wrap: wrap;}
    
    .newsletter,
    body > .socialmedia-sidebar{top: calc(100% - 74%)!important;}
    
    .newsletter .gross.active{width: 90% !important;}
    
    .flx_kategorieslider .container{max-width: 90%;}
    .flx_kategorieslider .swiper-slide .item img{width: 100%;}
    .flx_kategorieslider .swiper-slide .textdiv{left: 30px;}
    
    .flx_headerblock .editor p{margin: 0;}
    
    .flx_zitat .eins .content{padding: 30px;}
    
    .flx_newsletter img.bild{left: 0;}
    
    .flx_team h3{font-size: 135% !important;}
    
    .flx_kategorieuebersicht .item .textdiv{padding: 0 20px;bottom: 50px;}
    .flx_kategorieuebersicht .item .textdiv h2{font-size: 200%!important;}
    .flx_kategorieuebersicht .item img{height: 370px!important;}
    
    .highlight_courses{max-width: 90%;margin: 0 auto;}
    .highlight_courses .swiper-button-prev{left: 10px;}
    .highlight_courses .swiper-button-next{right: 10px;}
    .highlight_courses .swiper-button-prev,
    .highlight_courses .swiper-button-next{top: var(--swiper-navigation-top-offset,60%)!important;}
    .highlight_courses .swiper-slide .headline{font-size: 150%!important;min-height: 180px;}
    .highlight_courses .swiper-slide .unten{display: flex;}
    .highlight_courses .swiper-slide .unten div{margin-bottom: 0px;width: max-content;}
    .highlight_courses .swiper-slide .infos .info{line-height: 1.2;min-height: 75px;}
    
    
    
    .term-block h1{font-size: 330%!important;}
    
    body > .socialmedia-sidebar {display:none!important;}
    
    }
    /*-------------------------------------------------------------------------------------------*/
    @media (max-width:1199px){
        
    #page-header .menu-mobile.active{width: 60%;}

    .newsletter{top: calc(120px + 10%) !important;}
    .newsletter .klein.active{height: 150px!important;width: 25px!important;}
    .newsletter .klein.active span{top: 94px!important;left: -2px!important;line-height: 1!important;}
    .newsletter .klein.active span.text{margin-bottom: 5px!important;font-size: 90%!important;}
    .newsletter .klein.active button{ left: -2px!important;}

    body > .socialmedia-sidebar{top: unset!important;bottom: 10%!important;}
    body > .socialmedia-sidebar ul a{padding: 16px 0 16px 7px!important;}
    body > .socialmedia-sidebar ul li{width: 18px!important;height: 18px!important;}
    body > .socialmedia-sidebar ul li.instagram::before{width: 15px!important;height: 15px!important;}
    body > .socialmedia-sidebar ul li.facebook::before{width: 12px!important;height: 22px!important;left: 0!important;}

    #page-footer #backtotop{left: 50%!important;top: 110px!important;}
    
    .backgroundbox{background-image: linear-gradient(to top, #00000077 0%, transparent 80%);}
    
    .flx_textblock.zentriert{width: 100%!important;}
    
    .flx_stoerer .bild{display: flex;margin: 0 auto;width: 150px;}
    .flx_stoerer .kontakte{padding-left: 15px;}
    .flx_stoerer .buttons{margin-bottom: 30px;}
    
    .flx_zitat .zwei{order: 1;}
    .flx_zitat .zwei::before{right: -90px;left: unset;transform: rotate(180deg);}
    .flx_zitat .zweizitat{order: 2;}

    .flx_newsletter .content, .flx_newsletter .form{padding: 20px 15px;}
    .flx_newsletter img.bild{left: unset;right: 20px;top: 180px;width: 320px;}

    .flx_team h3{font-size: 125% !important;}
    .flx_team .position{min-height:60px;}
    .flx_team .editor span.responsive{display: block;}

    .highlight_courses .swiper-button-next, .highlight_courses .swiper-button-prev{display: block;}
    .highlight_courses .swiper-slide .headline{font-size: 150%!important;min-height: 150px;}

    .flx_kategorieuebersicht .item img{height: 310px!important;}
    .flx_kategorieuebersicht .item .textdiv h2{font-size: 150%!important;}

    /*----SinglePage----*/
    .social-flex-box{padding-bottom: 10px;margin-bottom: 0!important;}
    .single-product .btn-back{margin: 15px 0 30px;}

    form.cart .form-grid, form.cart .form-grid .participant-container, form.cart .form-grid .participants-menu{width: 100%;}

    .term-navigation .row div{min-height: 115px;}


}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:991px) {
    #page-header .menu-mobile.active{width: 75%;}
    #page-footer #backtotop{left: 40%!important;}

    h1{font-size: 300% !important;}

    /* .socialmedia-sidebar{display: none;} */
    .flx_instagramfeed ul{display: flex;}

    .newsletter .box{display: block!important;}
    .newsletter .gross.active .content{margin-bottom: 20px;}
    
    .flx_stoerer .bild{display: none;}
    
    .flx_team .item{flex: 0 0 100%;}

    .flx_zitat .content .zitat{font-size: 150%;}
    .flx_zitat img{height: 300px;width: 100%;}
    
    .term-block h1{font-size: 300%!important;}

    #single .bild{order: 1;margin-bottom: 30px;}
    #single .content{order: 2;}
    #single h1{font-size: 240% !important;}

    .filter form .anchor .selectable.location,
    .filter form .anchor .selectable.focusGroup{width: calc(100% * 2)!important;}
    
    .course .crop{font-size: 150%!important;width: 100%!important;}

    /*Cart*/
    .cart-wrapper .col-md-12{display: block;}
    .woocommerce-cart-form{flex: 0 0 100%;}
    .cart-collaterals,
    .cart_totals{width: 100%;}
    /* .wc-proceed-to-checkout{display: flex;justify-content: end;} */
    .woocommerce-cart-form tr{display: block;padding: 0 15px;}
    .woocommerce-cart-form td.product-thumbnail{padding: 20px 25px 5px 0!important;}
    .woocommerce-cart-form thead{display: none;}
    .woocommerce-cart-form td.product-thumbnail, .woocommerce-cart-form td.product-name, .woocommerce-cart-form td.product-price, .woocommerce-cart-form td.product-quantity, .woocommerce-cart-form td.product-subtotal{display: block;padding: 5px 25px 5px 0px;position: relative;text-align: right!important;}
    .woocommerce-cart-form td.product-price,
    .woocommerce-cart-form td.product-quantity,
    .woocommerce-cart-form td.product-subtotal{padding: 0 25px 0 0;}
    .woocommerce-cart-form td.product-subtotal{padding-bottom: 15px;}
    .woocommerce-cart-form td.product-edit{padding: 15px 15px 15px 0;}
    .woocommerce-cart-form td.product-thumbnail, .woocommerce-cart-form td.product-name{text-align: left!important;}
    .woocommerce-cart-form td.product-price::before{position: absolute;content: attr(data-title) ": ";color: var(--sec);left: 0;top:0;bottom:0;display: block;font-weight: 600;}
    .woocommerce-cart-form td.product-quantity::before{position: absolute;content: attr(data-title) ": ";color: var(--sec);left: 0;top:0;bottom:0;display: block;font-weight: 600;}
    .woocommerce-cart-form td.product-subtotal::before{position: absolute;content: attr(data-title) ": ";color: var(--sec);left: 0;top:0;bottom:0;display: block;font-weight: 600;}
    .cart-wrapper .quantity input.qty{padding: 0;margin: 0;text-align: right;font-weight: 600;}

    .wc-block-components-main.wc-block-checkout__main.wp-block-woocommerce-checkout-fields-block{order: 2;width: 100%;}
    .wc-block-components-sidebar.wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block{order: 1;width: 100%;}

    .highlight_courses .swiper-slide .unten{align-items: center;}
    .highlight_courses .swiper-slide .unten div{height: 20px;}
    .highlight_courses .swiper-slide .btn{margin-top: 20px;}
    .highlight_courses .swiper-slide .infos{margin-bottom: 10px;}


}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px) {
    
    div[class^="flx_"], div[class*="flx_"]{margin-bottom: 70px!important;}

    h1,
    .single-product h1{font-size: 200% !important;}
    h3{font-size: 110% !important;}
    
    #page-header .menu-mobile.active{width: 90%;}

    #mc_embed_signup{width: 400px!important;}
    #mc_embed_signup .mc-field-group.name{width: 100%!important;}
    .newsletter{top: calc(80px + 10%)!important;}
    .newsletter .headline{font-size: 200%!important;}
    
    #page-footer #backtotop{left: 0%!important;top: 100px!important;max-width: 110px!important;width: 110px!important;}

    .course .zeit{order: 2;}
    .course .item .img{order: 1;}
    .course .item .img img{width: 100%;height: 200px;}
    .course .infos{order: 3;}
    .course .status{justify-content: flex-end!important;margin: 20px 0 30px !important;}
    .course .d-flex.justify-content-end{margin: 30px 0 10px;}
    .course .zeit .date{font-size: 230%!important;line-height: 1;}

    .flx_kategorieslider .swiper.gross{display: none!important;}
    .flx_kategorieslider .swiper.klein{display: block!important;}
    .flx_kategorieslider .swiper-slide .item img{height: 45vh;}
    .flx_kategorieslider .swiper-slide .textdiv .headline{font-size: 150%;}
    .flx_kategorieslider .swiper-button-next,
    .flx_kategorieslider .swiper-button-prev{top: var(--swiper-navigation-top-offset,42%)!important;}

    .flx_kategorieuebersicht .item img{width: 100%!important;}

    .flx_stimmen .swiper-button-next::after, .flx_stimmen .swiper-button-prev::after{color: var(--sec);}
    .flx_stimmen .swiper-button-prev{left: 15px;}
    .flx_stimmen .swiper-button-next{right: 15px;left: unset;}
    .flx_stimmen .swiper-button-next, .flx_stimmen .swiper-button-prev{bottom: 40%;}
    .flx_stimmen .container .swiper{width: 90%!important;}

    .flx_newsletter .content{text-align: center;padding-top: 180px;}
    .flx_newsletter img.bild{right: calc(100% - 50% - 160px);top: -100px;}

    .flx_team .position{min-height:80px;}

    .flx_zitat img{min-height: 300px!important;}
    .flx_zitat .content .autor{font-size: 80%;left: 0;display: block;line-height: 1.2;}
    .flx_zitat .content .autor::before{display: none;}

    .single-product #nav-tabContent #nav-dates ul li{display: block;}

    .woocommerce-MyAccount-content .woocommerce-form-row label{padding-bottom: 0!important;}
    .cart-wrapper .col-md-12{display: block;}

    .filter form .anchor .selectable.location,
    .filter form .anchor .selectable.focusGroup{width:100%!important;}

    .highlight_courses .swiper-slide .headline{min-height: 80px;}

    .sc_projekte .row-wrapper{margin-top: 0;margin-bottom: 4rem;}
    .sc_projekte .bild{order: 1;}
    .sc_projekte .bild img{width: 60%;}
    .sc_projekte .content{order: 2;}
    .sc_projekte .text-wrapper{padding: 0 15px;}
    .sc_projekte .text{margin-bottom: 0;}
    .sc_projekte .fend, .sc_projekte .row-wrapper:nth-child(2n+1) .fend{justify-content: center;display: flex;}
    
    body > .socialmedia-sidebar {display:none!important;}

    .flx_dozenten .dozCont:nth-child(6n-3),
    .flx_dozenten .dozCont:nth-child(6n-4),
    .flx_dozenten .dozCont:nth-child(6n-5){background-color: unset;}
    .flx_dozenten .dozCont:nth-child(2n){background-color: var(--lightgrey);}
    .flx_dozenten .dozCont:nth-child(6n-4),
    .flx_dozenten .dozCont:nth-child(6n-5),
    .flx_dozenten .dozCont:nth-child(6n-1),
    .flx_dozenten .dozCont:nth-child(6n-2){border-right: unset;}
    .flx_dozenten .dozCont{border-bottom: unset;}



}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:600px) {
    
    #page-header .menu-mobile.active{width: 100%;}
    .newsletter{top: calc(50px + 10%)!important;}

    .flx_headerblock .editor p{width: 100%!important;}

    .woocommerce-cart-form{width: 100%;}
    .woocommerce .woocommerce-info .button{float: left;margin-top: 20px;}
    .woocommerce-MyAccount-content .woocommerce-form-row{width: 100%!important;}

    .social-flex-box .icon svg{width: 30px;height: 30px;}

    .highlight_courses .swiper-slide .headline{min-height: 120px;}
    .highlight_courses .swiper-slide .infos .info{min-height: 45px;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:577px) {
    body, html *{font-size: 15px;}

    #page-header{padding: 0 0 10px!important;}
    #page-header .bunt,
    #page-header.scrolled .bunt{margin-bottom: 10px!important;}
    #page-header .navigation ul.d-none a{margin-left: 10px;}

    #page-header .navigation ul a li{width: 20px!important;}
    #page-header .navigation ul a li img{width: 20px!important;height: 20px!important;}
    #page-header .menuburgerbutton{width: 30px!important;height: 30px!important;}
    #page-header .menuburgerbutton span{margin: 6px 0!important;height: 3px!important;}
    #page-header .menuburgerbutton.active span{margin: -2px 0!important;}

    #mc_embed_signup{width: 250px!important;}
    .newsletter .gross.active{padding: 30px!important;}
    .newsletter .gross.active span.inhalt{display: block;line-height: 1.3;}
    .newsletter .klein.active button{ left: -1px!important;}

    #mc_embed_signup .asterisk{line-height: 1;}
    #mc_embed_signup .mc-field-group input{padding: 5px 0;height: 30px;}
    
    h1,
    .single-product h1,
    .term-block h1{font-size: 150% !important;}
    h2{font-size: 150%;}
    .single-product .headline-wrapper h2{font-size: 180%;}
    
    .flx_zitat .content .zitat{font-size: 100%;line-height: 1.1;}
    .flx_zitat img{height: 180px;}
    .flx_zitat .eins::before{left: -50px;border-top: 20px solid transparent;border-left: 20px solid transparent;border-bottom: 20px solid transparent;border-right: 30px solid var(--prime);}
    .flx_zitat .zwei::before{right: -50px;border-top: 20px solid transparent;border-left: 20px solid transparent;border-bottom: 20px solid transparent;border-right: 30px solid var(--sec);}
    .flx_zitat .eins .content, .flx_zitat .zwei .content{padding: 20px;}
    .flx_zitat .zwei .content{top: 20px;}
    .flx_zitat .eins .content{bottom: 20px;}
    div.col-xl-5.col-10.py-3{margin: 0 auto;}
    
    .swiper-button-next{right: 5px}
    .swiper-button-prev{left: 5px;}
    
    .course .item .img{width: 50%;}
    .course .zeit{margin: 0 auto;}
    .course .status{margin: 10px 0 10px !important;}
    .course .infos{width: 100%;}
    .course .d-flex.justify-content-end{justify-content: flex-start!important;}
    .course .d-flex.justify-content-end .btn{width: 80%;}
    .course .crop{max-height: calc(2 * 45px);}
    
    .flx_kurshighlights .buttondiv{flex-wrap: wrap;}
    .flx_kurshighlights .buttondiv .btn{width: 100%;margin-bottom: 15px;}    
    
    .swiper-button-next::after, .swiper-button-prev::after{font-size: 30px;}
    .highlight_courses .swiper-button-prev{left: 5px;}
    .highlight_courses .swiper-button-next{right: 5px;}
    .highlight_courses .swiper-slide a{padding: 20px;}
    
    .flx_kategorieslider .swiper-slide .textdiv .btn{padding: 10px 15px;font-size: 80%;}
    .flx_kategorieslider .swiper-slide .textdiv .headline{font-size: 120%;padding-bottom: 15px;}
    .flx_kategorieslider .swiper-slide .textdiv{left: 0;bottom: 0;padding: 20px 10px;}
    .flx_kategorieslider .swiper-slide .item img{height: 35vh;}
    .flx_kategorieslider .swiper-button-next,
    .flx_kategorieslider .swiper-button-prev{top: var(--swiper-navigation-top-offset,40%)!important;}
    .flx_kategorieslider .swiper-button-next{right: -20px!important;}
    .flx_kategorieslider .swiper-button-prev{left: -20px!important;}
    
    .flx_kategorieuebersicht .item .textdiv h2{font-size: 120%!important;}
    
    .flx_team .position{min-height:max-content;}
    
    form.cart .form-grid .participant-container .participants-menu .buttons{display: block;}
    form.cart .form-grid .participant-container .participants-menu .buttons button{width: 100%;margin-bottom: 15px;}

    form.cart .form-grid .child-container .children-body .child .child-grid .firstName{grid-column: 1 / span 2;grid-row: 1 / span 1;}
    form.cart .form-grid .child-container .children-body .child .child-grid .lastName{grid-column: 1 / span 2;grid-row: 2 / span 1;}
    form.cart .form-grid .child-container .children-body .child .child-grid .birthday{grid-column: 1 / span 2;grid-row: 3 / span 1;}
    form.cart .form-grid .child-container .children-body .child .child-grid label{grid-row: 4 / span 1;}

    form.cart .form-grid .participant-container .participants-body .participant .participant-grid .child-container .children-body .child .child-grid{grid-template-columns: repeat(4, 25%);}
    form.cart .form-grid .participant-container .participants-body .participant .participant-grid .child-container .children-body .child .child-grid label{grid-column: 1 / span 4;}
    
    .sc_projekte .text::after{background: linear-gradient(0deg, rgba(255,255,255,1) 4%, rgba(255,225,255,0) 30%);}
    .sc_projekte .bild img{width: 80%;}
    .sc_projekte .text-wrapper{padding: 0 15px 20px;}

    .donationAmount, .donationAmount *{display: block!important;margin-bottom: 10px!important;}

    .term-navigation .row div{min-height: 70px;}

    .term-block .ansprechperson a.tel-green::before{top: 1px;}

    }
/*-------------------------------------------------------------------------------------------*/
@media (max-width:400px) {
    
    #mc_embed_signup{width: 200px!important;}

    #page-footer .offnungszeiten div{display: block!important;}
    #page-header .navigation ul.d-none{padding-left: 0;}
    #page-header .navigation ul.d-none a{margin-left: 5px;}
    .headline{font-size: 180%!important;}
    
    .flx_kategorieslider .swiper.gross{display: block!important;}
    .flx_kategorieslider .swiper.klein{display: none!important;}

    .highlight_courses .swiper-button-prev{left: 0px;}
    .highlight_courses .swiper-button-next{right: 0px;}
    .highlight_courses .swiper-button-prev,
    .highlight_courses .swiper-button-next{top: var(--swiper-navigation-top-offset,50%!important);}








}