/*
Theme Name: weyel
Theme URI: https://www.intermedia-werbeagentur.de
Author: Intermedia Peters GmbH | Werbeagentur
Author URI: https://www.intermedia-werbeagentur.de
Description: Theme für Weyel
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: im-base
*/
.screen-reader-text {display: none;}
header.site-header { padding: 15px 0px; }
.container {max-width: 1400px;}
.site-logo{display:flex;max-width:322px;width:100%;column-gap:10px;position:relative;margin-bottom:10px}
.site-logo>div:first-child{padding-top:16px}
.site-logo>div:last-child{position:relative}
.site-logo>div>div{position:absolute}
.site-logo:hover .green-graphic{animation:rotate 1s linear}
.site-logo:hover .blue-graphic{animation:rotate2 1s linear}
.site-logo:hover .red-graphic{animation:rotate2 1s linear}
@keyframes zoom-in {0%{transform:scale(0)}100%{transform:scale(1.0)}}
@keyframes rotate {0%{transform:rotate(0deg)}50%{transform:rotate(-60deg)}100%{transform:rotate(0deg)}}
@keyframes rotate2 {0%{transform:rotate(0deg)}50%{transform:rotate(90deg)}100%{transform:rotate(0deg)}}
@keyframes rotateonload {0%{transform:rotate(0deg)}50%{transform:rotate(-60deg)}100%{transform:rotate(0deg)}}
@keyframes rotate2onload {0%{transform:rotate(0deg)}50%{transform:rotate(90deg)}100%{transform:rotate(0deg)}}
.loading_animation .site-logo .red-graphic{animation:rotate2onload 1s linear;animation-delay:1.5s}
.loading_animation .site-logo .blue-graphic{animation:rotate2onload 1s linear;animation-delay:1.5s}
.loading_animation .site-logo .green-graphic{animation:rotateonload 1s linear;animation-delay:1.5s}
.weyel-tx img{width:85%!important}
.site-logo>div:last-child{margin-left:-40px}
.red-graphic{width:122px;height:122px}
.red-graphic img{width:122px!important;height:122px!important}
.green-graphic{left:16px;top:17px;width:90px;height:90px}
.green-graphic img{width:90px!important;height:90px!important}
.blue-graphic{left:32px;top:31.5px;width:60px;height:60px}
.blue-graphic img{width:60px!important;height:60px!important}
.play-icon{left:53px;top:48px;width:18px}
.play-icon img {width: 18px; height: auto;}
.site-header .wp-block-list {margin: 0px; padding: 0px; list-style: none; display: flex; justify-content: flex-end; gap:60px; padding-bottom: 20px;}
.site-header .wp-block-list li {font-family: 'Exo'; font-size: 18px; color: #494043; position: relative;}
.site-header .wp-block-list li a {color: #494043; text-decoration: none; transition: all .75s ease;}
.site-header .wp-block-list li:hover a { color: #0768b1;}
.site-header .wp-block-list li:before {font-family:"Font Awesome 6 Free","Font Awesome 5 Free","Font Awesome 7 Free";font-weight:900;width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 50%; background-color: #0768b1; position: absolute; font-size: 12px; left: -40px; transition: all .75s ease;}
.site-header .wp-block-list li:first-child:before {content: "\f0e0"}
.site-header .wp-block-list li:last-child:before {content: "\f095"}
.site-header .wp-block-list li:hover:before {color:#fff; background-color: #52ae32;}
.wp-block-search__button { margin-left: 0px !important; border: 0px !important; } 
.wp-block-search__input {border: 0px !important; background-color: #e9e9ed;font-family: 'Exo';padding: 10px 20px;}
header nav { background-color: #0768b1; margin-top: 15px;}
#primary-menu {margin: 0px; padding: 0px; list-style: none; display: flex; justify-content: space-between;font-family: 'Exo';}
#primary-menu li {position: relative}
#primary-menu > li > a { display: block; padding: 25px 50px; color: #fff; font-size: 18px; font-weight: 500; text-decoration: none; transition: all .3s ease; text-transform: uppercase;}
#primary-menu > li:hover > a {background-color: rgba(0,0,0,0.5)}
#primary-menu > li > a:after {content: "\f0d7"; margin-left: 20px; will-change: transform; font-family:"Font Awesome 6 Free","Font Awesome 5 Free","Font Awesome 7 Free";font-weight:900;display: inline-block;transition: all .3s ease;}
#primary-menu > li:hover > a:after {transform: rotate(-180deg)}
ul.sub-menu{margin:0;padding:0;list-style:none;background-color:#fff;position:absolute;overflow:hidden;max-height:0;opacity:0;transform:translateY(-20px);transition:max-height .3s ease,opacity .3s ease,transform .3s ease; min-width: 100%}
#primary-menu > li:hover ul.sub-menu{max-height:500px;opacity:1;transform:translateY(0)}
ul.sub-menu li a {padding: 10px 20px; background-color: #fff; color: #494043; transition: all .3s ease; display: block; text-decoration: none;white-space: nowrap;}
ul.sub-menu li a:hover, ul.sub-menu li.current_menu_item a {background-color:#494043; color: #fff; }
footer {background-image: url("assets/img/footer-bg.png"); background-size: cover; background-position: center left;font-family: 'Exo'; color: #fff; padding: 64px 0px}
footer a {color: #fff; text-decoration: none; transition: all .75s ease;}
footer a:hover {color: #0768b1;}
footer h2 {font-size: 28px; font-weight: 600}
footer h2:after {content: ''; height: 4px; width: 25%; display: block; background-color: #0768b1; margin: 15px 0px}
#sub-foot {text-align: center; background-color: #0f1e30; padding: 24px 0px;font-family: 'Exo'; color: #fff;}
#sub-foot hr {height: 3px; background-color: #33455b; border-top: 3px solid #33455b;}
#sub-foot a {color: #fff; text-decoration: none; transition: all .75s ease;}
#sub-foot a:hover {color: #0768b1;}
.foot-logo {width: 100%; max-width: 336px; height: auto;}
#rechtliches-menu {margin: 0px; padding: 0px; list-style: none;}
#rechtliches-menu li {display: block; padding: 10px 0px;}
#rechtliches-menu li:first-child{padding-top: 0px;}
#rechtliches-menu li:last-child{padding-bottom: 0px;}
.head-wrap{display:block;height:107px;bottom: -16px;position: relative;}
.mensch,.animation{position:absolute;height:130px;overflow:hidden}
.animation {position: absolute; right: 0px; bottom: 0px; width: 50%}
.mensch {position: absolute; left: 0px; bottom: 0px; width: 50%}
.animation-img{width:100%;height:auto;position:absolute;left:0;top:0}
.mensch-img {position: absolute;bottom: 0px;right: 0px;}