/**
 *
 * Theme Name:        HF Agency GmbH X MOLECO GmbH
 * 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{
    --main: #ffffff ;
    --sec: #000000 ;
    --lightgray: #E9E9E9;
    --darkgray: #666666;
}

body,html,*{font-size:17px;line-height:1.5;font-family:'Public Sans';font-weight:300;}
html{scroll-behavior: smooth;}

/* p{font-family:'Montserrat';font-weight:300;} */

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

li{list-style:none;padding-left:30px;position:relative;}
li:before{content:'';width:7.5px;height:7.5px;display:block;background:var(--main);position:absolute;top:7.5px;left:0;border-radius:50%;}

ul{padding:0;margin:0;}

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

h1{font-size:100%;display:block;color:var(--sec);margin:0;line-height:1;position:relative;}
h2{font-size:100%;display:block;color:var(--sec);margin:0;line-height:1;}
h3{font-size:100%;display:block;color:var(--sec);margin:0;line-height:1;}

.headline{font-size:115%;font-weight:500;display:block;color:var(--sec);margin-bottom:5px;line-height:1;font-family:'Montserrat';text-transform: uppercase;letter-spacing:.02em;}
.subline{font-size:110%;font-weight:400;display:block;font-family:'Montserrat';text-transform: uppercase;margin-bottom:25px;letter-spacing:.02em;}

.btn{position:relative;padding:12.5px 20px 12.5px 20px;font-size:90%;font-weight:600;font-family:'Montserrat';letter-spacing:.02em;background:var(--sec);color:var(--main);transition:all .3s ease;line-height:1;text-align:center;text-decoration:none;border:solid 2px var(--sec);border-radius:0;text-transform:uppercase;}
.btn:hover{background:var(--main);transition:all .3s ease;color:var(--sec);}

.btn.light{background:none;border:solid 1px var(--sec);color:var(--sec);}
.btn.light:hover{background:var(--sec);color:var(--main);}

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

.container{max-width:calc(100% - 80px - 80px);}
.container.small{max-width:calc(100% - 350px - 350px)!important;}

.ff-default .ff-el-form-control{border-radius:0!important;border:none!important;padding:10px 25px!important;}
.ff-default .ff-el-form-control::placeholder{color:var(--darkgray)!important;}
.ff-default .ff_btn_style{padding:8px 50px 10px 50px!important;border-radius:0!important;font-size:100%!important;font-weight:500!important;background:transparent!important;color:var(--sec)!important;transition:all .3s ease!important;line-height:1!important;text-align:center!important;text-decoration:none!important;border:solid 1px var(--sec)!important;margin-top:10px!important;width:100%;}
.ff-default .ff_btn_style:hover{background:var(--sec)!important;transition:all .3s ease!important;color:var(--main)!important;}

.fancybox-lock .fancybox-overlay{background:rgba(0,0,0,0.7);z-index:99999;}


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

#page-header{position:absolute;top:0;right:0;left:0;padding:0;background:var(--main);z-index:9999;}
#page-header .container{max-width:calc(100% - 35px - 35px);}
#page-header .logo img{max-height:85px;}

#page-header .mainheader{padding:15px 0;}
#page-header .mainheader #toppermenu{height:100%;display:flex;align-items:center;justify-content:end;gap:50px;}
#page-header .mainheader #toppermenu a{color:var(--sec);font-weight:500;text-decoration:none;text-transform:uppercase;font-size:100%;position:relative;font-family:'Montserrat';}
#page-header .mainheader #toppermenu a:hover{color:var(--darkgray);transition:all .3s ease;}
#page-header .mainheader #toppermenu a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--sec);bottom: -3px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;}
#page-header .mainheader #toppermenu a:hover::before{transform-origin: left;transform: scaleX(1);}
#page-header .mainheader #toppermenu .burgerbutton{width:50px;height:35px;align-content:center;position:relative;z-index:99;cursor:pointer;}
#page-header .mainheader #toppermenu .burgerbutton span{display:block;width:100%;height:2px;background:var(--sec);transition:all .3s ease;}
#page-header .mainheader #toppermenu .burgerbutton span:nth-child(2){margin:10px 0;}
#page-header .mainheader #toppermenu .burgerbutton.open span:nth-child(1){transform:rotate(45deg);margin-top:4px;transition:all .3s ease;}
#page-header .mainheader #toppermenu .burgerbutton.open span:nth-child(2){opacity:0;transition:all .3s ease;}
#page-header .mainheader #toppermenu .burgerbutton.open span:nth-child(3){transform:rotate(-45deg);margin-top:-24px;transition:all .3s ease;}
#page-header .mainheader #toppermenu .menu{position:fixed;top:0;right:-500px;bottom:0;width:100%;max-width:500px;padding-right:100px;padding-top:150px;background:var(--main);box-shadow:-3px 0 30px 3px rgba(0, 0, 0, 0.2);transition:all .3s ease;}
#page-header .mainheader #toppermenu .menu.open{right:0;transition:all .3s ease;}
#page-header .mainheader #toppermenu .menu li{display:block;margin:20px 0;position:unset;text-align:right;}
#page-header .mainheader #toppermenu .menu li:before{display:none;}
#page-header .mainheader #toppermenu .menu li a{padding:30px 0;text-decoration:none;position:relative;}
#page-header .mainheader #toppermenu .menu li a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--main);bottom: 25px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;}
#page-header .mainheader #toppermenu .menu li a:hover::before{transform-origin: left;transform: scaleX(1);}
/* #page-header .mainheader #toppermenu .menu li .sub-menu{display:none;background:#fff;padding:0;width:100%;border-radius:0;transform:none;text-align:left;margin:0;z-index:1;position:absolute;left:0;top:calc(100% + 10px);right:0;-webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.15);box-shadow:0px 0px 10px 0px rgba(0,0,0,0.15);}
#page-header .mainheader #toppermenu .menu li:hover .sub-menu{display: block;} */
#page-header .mainheader #toppermenu .menu li.current-menu-item a{font-weight:600;}


#page-header.bottom{padding:0;position:fixed;top:0;left:0;right:0;background:var(--main);-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */-moz-animation: fadein 2s; /* Firefox < 16 */-ms-animation: fadein 2s; /* Internet Explorer */-o-animation: fadein 2s; /* Opera < 12.1 */animation: fadein 2s;z-index:9999;}
#page-header.bottom .topheader{display:none;}
#page-header.bottom .logo img{max-width:50%;}
#page-header.bottom .mainheader{padding:0;}

@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(--sec);padding:75px 0;}
#page-footer .spacer{display:inline-block;margin:0 5px;color:var(--main);}

#page-footer .main .row{justify-content: space-between;}
#page-footer .main .logo{max-height:35px;}
#page-footer .main .item{color:var(--main);}
#page-footer .main .item .headline{color:var(--main);font-size:100%;font-weight:500;display:block;margin-bottom:0;text-transform:uppercase;}
#page-footer .main .item a{display:inline-block;text-decoration:none;margin:5px 0;position: relative;color:var(--main);text-transform:uppercase;}
#page-footer .main .item a:hover{color:var(--lightgray);}
#page-footer .main .item a::before{display:none;}


#page-footer .main .kontakt{align-content:center;text-align:right;}
#page-footer .main .kontakt img{max-width:35px;margin-bottom:15px;}

#page-footer .kontakt .rechtlich{margin-top:35px;}
#page-footer .kontakt .rechtlich a{display:block;width:auto;color:var(--main);font-size:75%;font-weight:300;text-decoration:none;text-transform:none;transition:all .3s ease;position: relative;margin:10px 0;}
#page-footer .kontakt .rechtlich a span{font-size:100%;font-weight:500;text-transform:uppercase;}

/* #page-footer .bottom{display:flex;flex-direction:row;}
#page-footer .bottom .copyright{width:50%;padding:15px 0;}
#page-footer .bottom .copyright span{display:inline-block;color:var(--main);font-size:75%;font-weight:300;text-decoration:none;transition:all .3s ease;} */
/* #page-footer .bottom .rechtlich{width:50%;padding:15px 0;text-align:right;}
#page-footer .bottom .rechtlich a{display:inline-block;color:var(--main);font-size:75%;font-weight:300;text-decoration:none;transition:all .3s ease;position: relative;}
#page-footer .bottom .rechtlich a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--main);bottom: -3px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;}
#page-footer .bottom .rechtlich a:hover::before{transform-origin: left;transform: scaleX(1);} */