/**
 *
 * Theme Name:        Soulmovemnt
 * Theme URI:         https://www.moleco.de
 * Description:       Dieses Theme wurde erstellt durch die MOLECO GmbH - Agentur für digitale Kommunikation
 * Version:           1.0.0
 * Author:            MOLECO GmbH
 * Author URI:        https://www.moleco.de
 * Tested up to:      6.8.1
 * Requires at least: 6.8.1
 * Requires PHP:      8.3.22
 *
 */

:root{
    
    --black:        #00111C;
    --beige:        #fdefe4;
    --blue:        #394a59;
    --white:        #ffffff;

}

body,html,*{font-size: 16px;line-height: 1.6;font-family:'TT Norms Pro';font-weight: 400;}
html{scroll-behavior: smooth;}
body{overflow-x: hidden;background-color:var(--white);}
button:focus{outline: none;}
button:focus-visible{outline: auto;}

a{color:var(--blue);text-decoration:underline;font-size:100%;transition:all .3s ease;}
a:hover{color:var(--black);transition:all .3s ease;}

li{list-style:none;padding-left:22px;position:relative;font-size: 1.25rem;color: var(--blue);font-weight: 200;}
li:before{content:'';width:7.5px;height:7.5px;display:block;background:var(--blue);position:absolute;top:13px;left:2px;border-radius:50%;}

ul{padding:0;margin:0;margin-bottom: 1rem;}

img{max-width:100%;height:auto;}

.headline{display: block;color:var(--black);margin-bottom: 25px;max-width: 100%;font-weight: 400;font-size: 250%;text-transform: uppercase;letter-spacing: 2px;}

.topline{font-size: 1.25rem;color: var(--blue);opacity: 0.85;text-transform: uppercase;font-weight: 200;margin-bottom: 1rem;letter-spacing: 2px;}

p{color: var(--blue);font-size: 1.25rem;line-height: 1.5;font-weight: 200;}

.btn{position: relative;padding: 12px 30px;background-color: var(--blue);transition: all .3s ease;border-radius: 10px;color: var(--white);text-decoration: none;font-size: 1.1rem;}
.btn:hover{background-color: var(--black);transition: all .3s ease;color: var(--white);}

strong{font-weight:600;font-size:100%;}

.container{max-width: 1470px;}
.container.wide{max-width: 1700px;}

button.menuburgerbutton{border: none;background-color: transparent;}

.swiper-button-prev::after{display: none;}
.swiper-button-next::after{display: none;}

[id] {
    scroll-margin-top: 75px;
}

/*------------------------------------Header-------------------------------------------------*/

#page-header{position: fixed;top: 0;left: 0;right: 0;padding: 0;background: var(--beige);z-index: 999;transition: all 0.3s ease;}
#page-header .logo img{width: 125px;height: 125px;object-fit: contain;display: block;z-index: -1;position: relative;padding:5px 0;}
#page-header .desktop-menu .row{align-items: center;}
#page-header .menu-top-menu-container{position: relative;bottom: 10px;}
#page-header .desktop-menu .menu{display: flex;gap: 30px;justify-content: flex-end;margin-bottom: 0;}
#page-header .desktop-menu .menu li a{text-decoration: none;color: var(--blue);font-size: 1.3rem;position: relative;}
#page-header .desktop-menu .menu li::before{display: none;}
#page-header .desktop-menu .menu li a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--black);bottom: -8px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;}
#page-header .desktop-menu .menu li a:hover::before{transform-origin: left;transform: scaleX(1);}
#page-header .desktop-menu .menu .button a{position: relative;padding: 12px 30px;background-color: var(--blue);transition: all .3s ease;border-radius: 10px;color: var(--white);}
#page-header .desktop-menu .menu .button a:hover{background-color: var(--black);transition: all .3s ease;}
#page-header .desktop-menu .menu .button a:hover::before{display: none;}
#page-header .current_page_item{position: relative;}
#page-header .current_page_item a::after{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--black);bottom: -8px;left: 0;transition: transform .3s ease-in-out;transform-origin: left;transform: scaleX(1);;}

#page-header.bottom{position:fixed;top:0;left:0;right:0;background:var(--grey);-webkit-animation: fadein 2s;-moz-animation: fadein 2s;-ms-animation: fadein 2s;-o-animation: fadein 2s;animation: fadein 2s;z-index:999;}
#page-header.bottom {background: var(--beige);box-shadow: 0px 5px 20px -10px rgba(0,0,0,0.3);border-bottom: none;}
#page-header.bottom .logo img{width: 125px;height: 125px;}
#page-header.bottom .menu-top-menu-container{bottom: 12px;}

@keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}
@-moz-keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}
@-webkit-keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}
@-ms-keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}

/*------------------------------------Footer-------------------------------------------------*/

#page-footer{background:var(--blue);padding: 20px 0;}
#page-footer *{color: var(--white);font-weight: 300;}
#page-footer a{text-decoration: none;}
#page-footer a:hover{text-decoration: underline;}
#page-footer .logo img{width: 200px;margin: 0 auto;display: block;}
#page-footer .adress{text-align: left;display: flex;flex-direction: column;justify-content: flex-end;}
#page-footer .adress .adresse{margin-bottom: 0;font-size: 1.1rem;}
#page-footer .kontakt{text-align: right;display: flex;flex-direction: column;justify-content: flex-end;}
#page-footer .kontakt a{margin-bottom: 0;font-size: 1.1rem;}
#page-footer .footermenu{display: flex;justify-content: flex-end;margin-top: 1rem;margin-bottom: 0;align-items: center;align-content: center;}
#page-footer .footermenu .menu{display: flex;flex-direction: row;gap: 10px;margin-bottom: 0;}
#page-footer .footermenu .menu li a{font-size: 1rem;}
#page-footer .footermenu .menu li::before{display: none;}
#page-footer .footer-bottom{border-top: solid 1px var(--beige);margin-top: 2rem;}
#page-footer .footer-copyright{font-size: 1rem;margin-bottom: 0;margin-top: 1rem;align-content: center;}

/*------------------------------------ABWEICHUNGEN-------------------------------------------------*/

.impressum .flx_textblock.nurtext, 
.datenschutzerklaerung .flx_textblock.nurtext, 
.allgemeine-geschaeftsbedingungen .flx_textblock.nurtext{background-color: var(--white);text-align: left;}
.impressum .flx_textblock.nurtext .text, 
.datenschutzerklaerung .flx_textblock.nurtext .text, 
.allgemeine-geschaeftsbedingungen .flx_textblock.nurtext .text{max-width: 100%;}



/*------------------------------------ACF-Flexible-Content-----------------------------------*/

.inhaltsbloecke{margin-top: 100px;overflow-x:hidden;background: var(--white);}

.flx_headerblock{position: relative;z-index: 0;}
.flx_headerblock .gradient{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg,rgba(6, 8, 14, 0.9) 0%, rgba(255, 255, 255, 0) 60%);z-index: 1;opacity: 0.7;}
.flx_headerblock .headlinebox{padding-top: 200px;text-align: center;position: relative;z-index: 2;}
.flx_headerblock .headlinebox .headline{color: var(--white);font-size: 400%;line-height: 1.2;text-transform: uppercase;letter-spacing: 2px;margin-bottom: 0.5rem;}
.flx_headerblock .headlinebox .topline{color: var(--white);font-size: 1.75rem;}

/*Bildblock*/
.flx_bildblock .bg{height: 920px;width: 100%;object-fit: cover;}
.flx_bildblock .bilderbox{position: relative;}
.flx_bildblock.mittext p{font-size: 210%;text-transform: uppercase;color: var(--grey-light);position: absolute;top: calc(50% - 100px);left: calc(50% - 300px);font-weight: 300;width: max-content;max-width: 100%;text-align: center;}
.flx_bildblock.miticon{position: relative}
.flx_bildblock.miticon .container > .iconbox{position: absolute;top: 0; left: 0; right: 0; bottom: 0;display: flex;justify-content: center;align-items: center;}
.flx_bildblock.miticon .container > .iconbox .icon{width: 400px;height: auto;max-width: 100%;}

/*Textblock*/
.flx_textblock.nurtext{background-color: var(--beige);padding: 100px 0 100px;text-align: center;}
.flx_textblock.nurtext .text{max-width: 80%;margin: 0 auto;}

.flx_textblock.mitbildrechts{background-color: var(--beige);}
.flx_textblock.mitbildrechts .bild img{border-radius: 10px;}
.flx_textblock.mitbildrechts .btn{margin-top: 3rem;}

.flx_textblock{padding: 100px 0;}
/* .flx_textblock img{aspect-ratio: 350/467;width: 100%;} */
.kurse .flx_textblock.mitbildlinks .bild img, .kurse .flx_textblock.mitbildrechts .bild img{min-height: 650px;object-fit: cover;}

/*Kursteaser*/
.flx_kursteaser{position:relative;padding:100px 0;}
.flx_kursteaser .inhalt{width:75%;}
.flx_kursteaser .infobox{border:solid 1px var(--blue);border-radius:20px;padding:25px;grid-column: 1 / -1;}
.flx_kursteaser .infobox p{margin-bottom:0;}
.flx_kursteaser .angebot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:2rem;align-items:stretch;position: relative;}
.flx_kursteaser .angebot-grid::before{content: '';background: url(media/logo/Logo_Bildmarke.svg);background-size: contain;background-repeat: no-repeat;position: absolute;right: -550px;top: -750px;display: block;width: 1500px;height: 1500px;opacity: 0.05;z-index: 0;}
.flx_kursteaser .angebot{background-color:var(--beige);border-radius:20px;height:100%;position: relative;z-index: 2;}
.flx_kursteaser .angebot .row{height:100%;}
.flx_kursteaser .angebot .angebot-text{display:flex;}
.flx_kursteaser .angebot .angebot-text .inner{padding:30px;display:flex;flex-direction:column;width:100%;height:100%;}
.flx_kursteaser .angebot-headline{color:var(--black);font-weight:400;font-size:175%;margin-bottom:1rem;}
.flx_kursteaser .angebot-inhalt{margin-bottom:0;}
.flx_kursteaser .angebot-bottom{margin-top:auto;}
.flx_kursteaser .angebot .bild .image{overflow: hidden;height: 100%;border-radius: 0 20px 20px 0;}
.flx_kursteaser .angebot .bild img{border-radius:0 20px 20px 0;width:100%;height:100%;object-fit:cover;transition: transform .5s ease;}
.flx_kursteaser .angebot:hover .bild img{transform: scale(1.05);transition: transform .5s ease;}
.flx_kursteaser .trenner{background-color:var(--blue);height:2px;width:110%;opacity:0.2;margin:1rem 0;}
.flx_kursteaser .preis{font-size:150%;font-weight:400;color:var(--black);}
.flx_kursteaser .information{font-size:1.1rem;font-weight:200;color:var(--blue);}
.flx_kursteaser .btn{margin-top: 2rem;}

/* Kontaktblock */
.flx_kontakt{position: relative;padding: 100px 0;background-color: var(--beige);}
.flx_kontakt .ff-default .ff-el-form-control{background-color: var(--white);border: unset;padding: 30px 15px;}
.flx_kontakt .ff-el-input--content textarea{padding-top: 20px!important;}
.flx_kontakt .ff-el-form-control[data-name="dropdown"]{padding:20px 15px!important;}
.flx_kontakt .ff-message-success{background-color: var(--white);border-radius: 20px;border: unset;}
.flx_kontakt .ff-message-success p{margin-bottom: 0;}

/* Bildergalerie */
.flx_bildergalerie{position: relative;padding: 100px 0 100px;}
.flx_bildergalerie .galerie{display: flex;flex-wrap: wrap;}
.flx_bildergalerie .item{position: relative;padding: 15px;}
.flx_bildergalerie img{width: 100%;aspect-ratio: 3/4;object-fit: cover;transform: translateY(40px);opacity: 0;transition: opacity 0.8s ease-out, transform 0.8s ease-out;border-radius: 10px;}
.flx_bildergalerie img.visible{opacity: 1;transform: translateY(0);}
.flx_bildergalerie img:hover{transform: scale(1.05);transition: all ease .5s;}
.flx_bildergalerie .item:nth-child(2), 
.flx_bildergalerie .item:nth-child(4){margin-top: 50px;}

/*Kontaktformular*/
.flx_newsletterblock{padding: 65px 0 110px!important;background-size: cover!important;min-height: 500px;}
.flx_newsletterblock *{color: var(--grey-light)!important;}
.flx_newsletterblock h2{font-weight: 400;margin-bottom: 80px;width: 50%;}
.flx_newsletterblock .textinner p{font-size: 150%;margin-bottom: 80px;}
/* .flx_newsletterblock .jss185{} */
.flx_newsletterblock .widget-1 > div{width: 100%!important;background-color: transparent!important;}
.flx_newsletterblock .widget-2 > div{width: 100%!important;background-color: transparent!important;}
.flx_newsletterblock button{background-color: transparent; border: 1px solid var(--grey-light);transition: all ease .3s;}
.flx_newsletterblock button:hover{background-color: var(--grey-light);transition: all ease .3s;}
.flx_newsletterblock button span{transition: all ease .3s;}
.flx_newsletterblock button:hover span{color: var(--black)!important;transition: all ease .3s;}
.flx_newsletterblock .jss1 div:last-child{z-index: 999;}
.MuiSvgIcon-fontSizeLarge-225, .MuiTypography-h5-235{display: none!important;}
.MuiSvgIcon-root-60{display: none!important;}
.MuiTypography-h5-78{display: none!important;}
.jss342, .jss15{display: none!important;}
.jss28{padding: 0!important;}
.widget-1{justify-content: flex-start!important;}
.MuiFormLabel-root-112{font-size: 14px!important;color: #c2c2c2!important;}
.jss185{padding: 0px!important;}

/*CF7*/
label[for="nachricht"] span{margin-left: .5rem;}
input{height: 45px;background-color: transparent;border: none;border-bottom: 1px solid var(--grey-light);}
label,
.wpcf7 p{margin-bottom: 0;}
input#confirm{width: max-content;margin: 0 10px 0 0;height: max-content;}
input#submit{width: max-content;padding: 20px 30px;margin-top: 0;background-color: transparent;border-color: var(--grey-light);height: unset;}
input#submit:hover{background-color: var(--white);color: var(--black);}
.wpcf7-form-control-wrap label{display: flex;}
.wpcf7-not-valid-tip{margin: -15px 0 10px;}
.wpcf7-acceptance .wpcf7-list-item{margin: 0;}
.wpcf7-acceptance .wpcf7-list-item{padding: 60px 0 50px;}
.wpcf7 .pflicht{margin-top: 1rem;}
.wpcf7 .pflicht,
.wpcf7-acceptance .wpcf7-list-item span{font-size: 70%;}
.wpcf7-form.sent .row{display: none;}
.MuiTypography-h5-80{display: none!important;}
.MuiSvgIcon-fontSizeLarge-70{display: none!important;}
.wpcf7-form.sent .wpcf7-response-output{border-color: var(--main)!important;background-color: var(--main);padding: 20px;text-align: center;font-weight: 500;color: var(--white);border-radius: 10px;}

.flx_instagram_feed{padding: 100px 0;}

/*Banner*/
.flx_banner{position: relative;overflow: hidden;background: var(--blue);color: var(--white);height: 123px;display: flex;align-items: center;white-space: nowrap;}
.flx_banner .track{display: inline-flex;width: max-content;animation: ticker 55s linear infinite;}
.flx_banner .track::after{content: attr(data-duplicate); }
.flx_banner .item{display: inline-block;padding: 0 4rem;font-size: 185%;position: relative;}
.flx_banner .item::before{content: 'ව';position: absolute;top: 2px;left: 30px;}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/*-------------------------------------RESPONSIVE---------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------*/
@media (max-width:1480px){

    .inhaltsbloecke{margin-top: 125px;}

    #page-header .menuburgerbutton{display: block;}
    button.menuburgerbutton{display: block;width:45px;height: 45px;cursor: pointer;transform: rotate(0deg);transition: .5s ease-in-out;  cursor: pointer;z-index: 100;right: 35px;position: absolute;border: none;background-color: transparent;top: 50%;transform: translateY(-50%);}
    button.menuburgerbutton span{margin:6px 0;display:block;height:4px;border-radius:4px;width:100%;background-color:var(--black);opacity:1;left:0;transform:rotate(0deg);transition:.5s ease;}
    button.menuburgerbutton.active span:nth-child(1){position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%) rotate(45deg);background-color:var(--black);}
    button.menuburgerbutton.active span:nth-child(2){display: none;}
    button.menuburgerbutton.active span:nth-child(3){position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%) rotate(-45deg);background-color:var(--black);}
    #page-header .navigation .menu-top-menu-container{display: flex;flex-direction: column;position: absolute;transform: translateX(200px);transition: transform .3s ease;right: -40px;top: 50px;width: 300px;height: 100vh;background-color: var(--beige);padding: 30px 30px 0;opacity: 0;}
    #page-header .navigation.open .menu-top-menu-container{transform: translateX(0);opacity: 1;}
    #page-header .navigation.open .menu{flex-direction: column;gap: 20px;}
    #page-header .navigation.open .menu li{border-bottom: solid 1px var(--blue);padding: 0 0 1rem 0;}
    #page-header .navigation.open .menu li.button{border-bottom: unset;margin-top: 0.75rem;}
    #page-header .logo img{width: 125px;height: 125px;}

    .flx_headerblock{height: 700px!important;}

    .flx_bildergalerie .item{padding: 10px;}

    .flx_kursteaser .angebot-grid::before{right: -300px;top: -500px;width: 1000px;height: 1000px;;}

    #page-footer .logo img{width: 175px;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1199px){

    .headline{font-size: 225%;margin-bottom: 15px;}
    .topline{margin-bottom: 0.5rem;}
    p{font-size: 1.15rem;}
    .btn{font-size: 1rem;}

    .flx_headerblock .headlinebox .headline{font-size: 300%;}
    .flx_headerblock .headlinebox .topline{font-size: 1.5rem;line-height: 1.5;}

    .flx_banner{height: 93px;}
    .flx_banner .item{font-size: 150%;}
    .flx_banner .item::before{left: 35px;}

    .flx_kursteaser .inhalt{width: 100%;}
    .flx_kursteaser .angebot-headline{font-size: 150%;margin-bottom: 0.5rem;}
    .flx_kursteaser .trenner{margin: 0.5rem 0;}
    .flx_kursteaser .preis{font-size: 135%;}
    .flx_kursteaser .information{font-size: 1rem;}
    .flx_kursteaser .btn{margin-top: 1rem;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:991px) {

    .inhaltsbloecke{margin-top: 75px;}

    #page-header .logo img{width: 75px;height: 75px;}
    #page-header.bottom .logo img{width: 75px;height: 75px;}
    #page-header .navigation .menu-top-menu-container{top: 30px;}

    .flx_headerblock .headlinebox{padding-top: 400px;}

    .flx_textblock.mitbildrechts .bild .inner{display: flex;justify-content: center;}
    .flx_textblock.mitbildrechts .bild img{margin-top: 2rem;height: 600px;}

    .flx_bildergalerie .item:nth-child(2), 
    .flx_bildergalerie .item:nth-child(4){margin-top: 30px;}
    .flx_bildergalerie img:hover{transform: scale(1);}

    .flx_kursteaser .angebot-grid{grid-template-columns: 1fr;gap: 20px;}

    .flx_kontakt .formular{margin-top: 2rem;}

    #page-footer .logo img{width: 150px;}
    #page-footer .footer-copyright{text-align: center;}
    #page-footer .footermenu{justify-content: center;margin-top: 0.5rem;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px) {

    .headline{font-size: 200%;margin-bottom: 5px;}
    .topline{font-size: 1.15rem;}

    .flx_headerblock .headlinebox .headline{font-size: 250%;}
    .flx_headerblock .headlinebox .topline{font-size: 1.25rem;line-height: 1.3;}

    .flx_textblock, 
    .flx_bildergalerie, 
    .flx_kursteaser, 
    .flx_kontakt{padding: 75px 0;}

    .flx_kursteaser .angebot-grid::before{right: -150px;top: -300px;width: 500px;height: 500px;}
    .flx_kursteaser .angebot .bild .image{border-radius: 0 0 20px 20px;}
    .flx_kursteaser .angebot .bild img{border-radius: 0 0 20px 20px;height: 400px;object-fit: cover;}
    .flx_kursteaser .angebot:hover .bild img{transform: scale(1.025);}

    .flx_textblock.mitbildrechts .bild img{height: 500px;width: 100%;object-fit: cover;}
    .flx_textblock.mitbildrechts .btn{margin-top: 1rem;}

    #page-footer .row .logo{order: 1;}
    #page-footer .row .adress{order: 2;margin-top: 1rem;text-align: center;}
    #page-footer .row .kontakt{order: 3;margin-top: 1rem;text-align: center;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:576px) {

    .headline{font-size: 175%;}
    .topline{font-size: 1.1rem;}
    p{font-size: 1.05rem;}

    .flx_headerblock{height: 500px!important;}
    .flx_headerblock .headlinebox{padding-top: 200px;}
    .flx_headerblock .headlinebox .headline{font-size: 225%;}
    .flx_headerblock .headlinebox .topline{font-size: 1rem;}

    .flx_bildergalerie .item:nth-child(2), 
    .flx_bildergalerie .item:nth-child(4){margin-top: 20px;}

    .flx_banner{height: 73px;}
    .flx_banner .item{font-size: 110%;padding: 0 2rem;}
    .flx_banner .item::before{left: 10px;top: 1px;}

    .flx_kursteaser .angebot .bild img{height: 350px;}
    .flx_kursteaser .angebot:hover .bild img{transform: scale(1);}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:400px) {

    .flx_headerblock .headlinebox{
        padding:250px 15px 0;
    }

}