/** * * Theme Name: Stadtwerke Ochtrup 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: #071F35 ; --mainhover: #1B3043; --sec: #444444 ; --button: #071F35; --buttonhover: #0f4373; --wasser: #0f4373; --hoverwasser: #135ca0; --strom: #CB0007; --hoverstrom: #ba2b30; --gas: #FF9901; --hovergas: #BB750C; --abwasser: #323738; --hoverabwasser: #535555; --gaertnerei: #77B82B; --hovergaertnerei: #598E1B; --strassenbau: #F18811; --hoverstrassenbau: #AC6718; --white: #ffffff; --water: #00417A; --lightgray: #E9E9E9; } body,html,*{font-size: 16px;line-height: 1.6;font-family: 'Montserrat';font-weight: 400;color: var(--main);} html{scroll-behavior: smooth;} #phpsingle{margin: 200px auto 100px;} a{color: var(--main);text-decoration :underline;font-size: 100%;transition: all .3s ease;} a:hover{color: var(--sec);transition: all .3s ease;} img{max-width:100%;height:auto;} .headline{font-family: 'Outfit';font-weight: 600;font-size: 250%;display: block;color: var(--main);margin-bottom: 15px;line-height: 1;} .subline{font-family: 'Outfit';font-size: 140%;display: block;color: var(--sec);margin-bottom: 20px;} .btn{position: relative;padding: 12px 45px 12px 25px;font-size: 95%;font-weight: 400;background: url('media/right-white.svg') var(--button) no-repeat;background-position: right;background-position-x: right 20px;background-size: 10px;color: var(--white);transition: all .3s ease;line-height: 1;text-decoration: none;border-radius:20px;margin-top: 20px;} .btn:hover{background: url('media/right-white.svg') var(--buttonhover) no-repeat;background-position: right;background-position-x: right 15px;background-size: 10px;color: var(--white);transition: all .3s ease;} .btn.freibad{background:var(--wasser);border:solid 2px var(--wasser);border-radius:20px;color:var(--white);padding:8px 25px 10px 50px;} .btn.freibad:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-wasser-white.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.freibad:hover{background:var(--hoverwasser);border:solid 2px var(--hoverwasser);} .btn.freibad:hover:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-wasser-white.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.wasser{background:transparent;border:solid 2px var(--wasser);border-radius:20px;color:var(--wasser);padding:10px 25px 10px 50px;margin:10px 10px 10px 0;} .btn.wasser:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-wasser.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.wasser:hover{background:var(--hoverwasser);border:solid 2px var(--hoverwasser);color:var(--white);} .btn.wasser:hover:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-wasser-white.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.strom{background:transparent;border:solid 2px var(--strom);border-radius:20px;color:var(--strom);padding:10px 25px 10px 50px;margin:10px 10px 10px 0;} .btn.strom:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-strom.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.strom:hover{background:var(--hoverstrom);border:solid 2px var(--hoverstrom);color:var(--white);} .btn.strom:hover:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-strom-white.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.gas{background:transparent;border:solid 2px var(--gas);border-radius:20px;color:var(--gas);padding:10px 25px 10px 50px;margin:10px 10px 10px 0;} .btn.gas:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-gas.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.gas:hover{background:var(--hovergas);border:solid 2px var(--hovergas);color:var(--white);} .btn.gas:hover:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-gas-white.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.abwasser{background:transparent;border:solid 2px var(--abwasser);border-radius:20px;color:var(--abwasser);padding:10px 25px 10px 50px;margin:10px 10px 10px 0;} .btn.abwasser:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-abwasser.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.abwasser:hover{background:var(--hoverabwasser);border:solid 2px var(--hoverabwasser);color:var(--white);} .btn.abwasser:hover:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-abwasser-white.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.gaertnerei{background:transparent;border:solid 2px var(--gaertnerei);border-radius:20px;color:var(--gaertnerei);padding:10px 25px 10px 50px;margin:10px 10px 10px 0;} .btn.gaertnerei:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-gaertner.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.gaertnerei:hover{background:var(--hovergaertnerei);border:solid 2px var(--hovergaertnerei);color:var(--white);} .btn.gaertnerei:hover:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-gaertner-white.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.strassenbau{background:transparent;border:solid 2px var(--strassenbau);border-radius:20px;color:var(--strassenbau);padding:10px 25px 10px 50px;margin:10px 10px 10px 0;} .btn.strassenbau:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-strasse.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.strassenbau:hover{background:var(--hoverstrassenbau);border:solid 2px var(--hoverstrassenbau);color:var(--white);} .btn.strassenbau:hover:after{content:'';display:block;width:15px;height:30px;background:url('media/piktogramme/pikto-strasse-white.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:2px;left:20px;transition:all .3s ease;} .btn.notdienst{border:solid 2px var(--strom);border-radius:20px;color:var(--white);padding:10px 25px 10px 50px;position:relative;} .btn.notdienst:after{content:'';display:block;width:15px;height:15px;background:url('media/piktogramme/pikto-glocke.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:5px;left:5px;transition:all .3s ease;} .btn.notdienst:hover{background:var(--hoverstrom);border:solid 2px var(--hoverstrom);} .btn.notdienst:hover:after{content:'';display:block;width:15px;height:15px;background:url('media/piktogramme/pikto-glocke-white.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:5px;left:5px;transition:all .3s ease;} .btn.light{border:none;background:none;color:var(--main);padding:0 30px 0 0;position:relative;} .btn.light:after{content:'';display:block;width:20px;height:20px;background:url('media/right-circle.svg');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:0;right:0;transition:all .3s ease;} .btn.light:hover{color:var(--buttonhover);} .btn.light:hover:after{right:-5px;transition:all .3s ease;} strong{font-weight:600;font-size:100%;} .container{max-width:1640px;} .container.wide{max-width:1850px;} .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 50px;} /*------------------------------------Header-------------------------------------------------*/ #page-header{position:absolute;top:0;right:0;left:0;padding:0;background:var(--white);-webkit-box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);-moz-box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);z-index:9999;} #page-header .logo img{max-height: 50px;} #page-header .topheader{padding:10px 0;background:var(--main);text-align:right;} #page-header .topheader a{color:var(--white);text-decoration:none;margin-left:35px;position:relative;} #page-header .topheader a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--white);bottom: -3px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;} #page-header .topheader a:hover::before{transform-origin: left;transform: scaleX(1);} #page-header .topheader a.kundeportal:hover::before{display: none;} #page-header .topheader .col-lg-6{align-content: center;} #page-header .topheader .search{display: inline-block; padding-left: 35px;} #page-header .mainheader{padding: 20px 0;} #page-header .mainheader #toppermenu{height:100%;align-content:center;text-align:right;} #page-header .mainheader #toppermenu .search{display: none;} #page-header .mainheader #toppermenu .search .content-live-search{padding-right: 25px;} #page-header .mainheader #toppermenu .search img{filter: brightness(0);} #page-header .mainheader #toppermenu .menu li#notdienst .notdienst-mobile{display: none;} #page-header .mainheader #toppermenu .menu{margin: 0;padding: 0;} #page-header .mainheader #toppermenu .menu li{display:inline-block;margin:0 10px;padding:5px 25px;position:relative;} #page-header .mainheader #toppermenu .menu li:before{display:none;} #page-header .mainheader #toppermenu .menu li a{padding:30px 0;text-decoration:none;position:relative;font-weight: 500;} #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 .sub-menu{display:none;background:#fff;padding:0;width:800px;border-radius:0;transform:none;text-align:left;margin:0;z-index:1;position:absolute;left:-350px;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 .sub-menu.smallSub{width:30%;left:45%!important;} #page-header .mainheader #toppermenu .menu li .sub-menu .tabblock{display:flex;align-items:flex-start!important;} /* #page-header .mainheader #toppermenu .menu li .sub-menu .nav{margin:0!important;width:20%;background:#f3f3f3;} */ #page-header .mainheader #toppermenu .menu li .sub-menu .nav{margin:0!important;width:40%;background:#f3f3f3;} #page-header .mainheader #toppermenu .menu li .sub-menu .nav.kompletteBreite{width:100%;} #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link{width:100%;background:#E9E9E9 ;color:var(--main);border-radius:0;text-align:left;font-weight:600;padding:20px 15px;position:relative;box-shadow:none;border:none;border-bottom:solid 1px #fff;display:flex;align-items:center;line-height:1;min-height:75px;} #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link:after{content:'';display:block;width:10px;height:27.5px;transform:rotate(90deg);position:absolute;right:15px;top:25px;background:url('media/right.svg');background-size:100%;background-repeat:no-repeat;background-position:center;/*filter: brightness(0) saturate(100%) invert(91%) sepia(34%) saturate(6596%) hue-rotate(214deg) brightness(152%) contrast(119%);*/} #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link.active, #page-header .navigation #toppermenu .menu .sub-menu .nav .nav-link:hover{background:#fff;color:var(--main);transition:all .3s ease;} #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link.active:after, #page-header .navigation #toppermenu .menu .sub-menu .nav .nav-link:hover:after{filter:unset;transform:rotate(00deg);} #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link img{margin-right:10px;max-width:20px;/*filter: brightness(0) saturate(100%) invert(91%) sepia(34%) saturate(6596%) hue-rotate(214deg) brightness(152%) contrast(119%);*/} #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link.active img, #page-header .navigation #toppermenu .menu .sub-menu .nav .nav-link:hover img{filter:unset;} #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav img{display:none;} /* #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content{position:relative;width:80%} */ #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content{position:relative;width:60%} #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content.nichtSichtbar{display:none;} /* #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane{display:flex;flex-wrap: wrap;padding:0 25px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;} */ #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane.fade:not(.show){display:none;} #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .headline{color:var(--main);font-weight:600;font-size:150%;padding:20px 0 0;} #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileclose{display:none;} #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul{width:100%;display:flex;flex-direction:column; padding-left: 20px;} /* #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li{margin:0;padding:10px;display: inline-block;width:33%;} */ #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li{margin:0;padding:0;display: inline-block;width:max-content;position:relative;margin-left: 20px;} #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li:before{content: '';position: absolute;display:block;width: 100%;height: 2px;border-radius: 5px;background-color: var(--main);bottom: 7.5px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;} #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li:hover::before{transform-origin: left;transform: scaleX(1);} #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li a{color:var(--main);font-size:115%;font-weight:400;position: relative;padding:7.5px 0;display:block;} #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li a:before{display:none;} #page-header .mainheader #toppermenu li#notdienst{margin-right:0;padding:0;position:relative;} #page-header .mainheader #toppermenu li#notdienst a{border: solid 1px var(--strom);background: url('media/piktogramme/pikto-glocke.webp')no-repeat;background-size: 15px;background-position: 15px;font-weight: 600;border-radius: 20px;color: var(--strom);padding: 5px 20px 5px 40px;} #page-header .mainheader #toppermenu li#notdienst:hover a{background: url('media/piktogramme/pikto-glocke-white.webp')no-repeat var(--hoverstrom);background-size: 15px;background-position: 15px;color: var(--white);} #page-header .mainheader #toppermenu li#notdienst:hover a:before{display:none;} /* #page-header .mainheader #toppermenu li#notdienst:after{content:'';display:block;width:18px;height:23px;background:url('media/piktogramme/pikto-glocke.webp');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:1px;left:40px;transition:all .3s ease;} */ /* #page-header .mainheader #toppermenu li#freibad{margin-left:150px;padding:0;} #page-header .mainheader #toppermenu li#freibad a{background:var(--wasser);border:solid 1px var(--wasser);border-radius:20px;color:var(--white);padding:5px 50px;} #page-header .mainheader #toppermenu li#freibad:hover a{background:var(--white);color:var(--wasser);} */ /* #page-header .mainheader #toppermenu li#kundenportal{margin-right:0;padding:0;position:relative;} #page-header .mainheader #toppermenu li#kundenportal a{background: url('media/piktogramme/pikto-glocke.webp')no-repeat;background-size: 15px;background-position: 15px;font-weight: 600;border-radius: 20px;color: var(--strom);padding: 5px 20px 5px 40px;} #page-header .mainheader #toppermenu li#kundenportal:hover a{background-size: 15px;background-position: 15px;color: var(--strom);} #page-header .mainheader #toppermenu li#kundenportal:hover a:before{display:none;} */ #page-header #menubuttonburger{display:block;width:50px;float:right;height:100%;align-content:center;cursor:pointer; display: none;} #page-header #menubuttonburger span{display:block;width:100%;height:4px;border-radius:5px;background:var(--main);transition:all .3s ease;} #page-header #menubuttonburger span:nth-child(2){margin:10px 0;} #page-header #menubuttonburger.active span:nth-child(1){transform:rotate(45deg);margin-top:5px;transition:all .3s ease;} #page-header #menubuttonburger.active span:nth-child(2){opacity:0;transition:all .3s ease;} #page-header #menubuttonburger.active span:nth-child(3){transform:rotate(-45deg);margin-top:-27px;transition:all .3s ease;} #page-header.bottom{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;padding:0;position:fixed;top:0;left:0;right:0;background:var(--white);-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 .logo img{max-width:50%;} #page-header.bottom .topheader{padding:5px 0;} #page-header.bottom .mainheader{padding:10px 0;} #page-header.bottom .header-search{display: none;} @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; } } #popup{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;} #popup.is-visible{display:flex;} #popup .popup__overlay{position:absolute;inset:0;background:rgba(0,0,0,.65);} #popup .popup__box{position:relative;z-index:2;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;background:#fff;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.3);} #popup .popup__headline{margin-top:0;} #popup .popup__content{margin-top:20px;} #popup .popup__close{position:absolute;top:12px;right:16px;border:0;background:none;font-size:32px;line-height:1;cursor:pointer;} body.popup-open{overflow:hidden;} .popup-trigger{position:fixed;right:24px;bottom:24px;z-index:9998;width:56px;height:56px;border-radius:50%;border:0;background:var(--main);color:#fff;font-size:26px;font-weight:700;line-height:56px;text-align:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:all .3s ease;} .popup-trigger:hover{transform:scale(1.08);} .popup.is-visible + .popup-trigger{display:none;} .notdienst-mobile {display: none;} /*------------------------------------Footer-------------------------------------------------*/ #page-footer{background:var(--main);padding:75px 0 0;} #page-footer .backtotop .scrollup{cursor:pointer;} #page-footer .backtotop .scrollup:hover img{transform:scale(1.1);transition:all .3s ease;} #page-footer .backtotop .scrollup img{margin:0 auto;display:block;transition:all .3s ease;} #page-footer .main{margin:100px 0 0;display:block;} #page-footer .main .item .headline{color:var(--white);font-size:100%;font-weight:600;display:block;margin-bottom:15px;text-transform:none;} #page-footer .main .item .menu{padding-left:0;} #page-footer .main .item .menu .menu-item{padding-left:0;} #page-footer .main .item .menu .menu-item:before{display:none;} #page-footer .main .item .menu .menu-item.closed{padding-left:15px;position:relative;} #page-footer .main .item .menu .menu-item.closed:before{content:'';display:block;width:10px;height:15px;background:url('media/closed.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;top:5px;left:0;} #page-footer .main .item .menu .menu-item a{color:var(--white);opacity:0.8;font-weight:300;text-decoration:none;display:block;width:max-content;margin:10px 0;position: relative;} #page-footer .main .item .menu .menu-item a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--white);bottom: -3px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;} #page-footer .main .item .menu .menu-item a:hover::before{transform-origin: left;transform: scaleX(1);} #page-footer .bottom .icons{margin-top:25px;padding:15px 0;border-bottom:solid 1px var(--white);display: flex;flex-direction: row;justify-content: end;} #page-footer .bottom .icons .bereiche{display:inline-block;} #page-footer .bottom .icons .bereiche img{max-height:40px;margin:0 5px;} #page-footer .bottom .icons .bereiche img:hover{transform:scale(1.05);transition:all .3s ease;} #page-footer .bottom .icons .socials{margin-left:25px;display:inline-block;align-content:end;} #page-footer .bottom .icons .socials img{max-height:30px;margin:0 5px;} #page-footer .bottom .icons .socials img:hover{transform:scale(1.05);transition:all .3s ease;} #page-footer .bottom .copyright{display:block;width:100%;padding:15px 0;} #page-footer .bottom .copyright span{display:inline-block;color:var(--white);font-size:100%;font-weight:300;text-decoration:none;transition:all .3s ease;} #page-footer .bottom .copyright a{display:inline-block;color:var(--white);font-size:100%;font-weight:300;text-decoration:none;transition:all .3s ease;position: relative;} #page-footer .bottom .copyright a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--white);bottom: -3px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;} #page-footer .bottom .copyright a:hover::before{transform-origin: left;transform: scaleX(1);} #page-footer .bottom .copyright .placer{display:inline-block;margin:0 5px;}