#menu-leistungen{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 20px;
padding: 50px;
}
#menu-leistungen li{
width: calc(20% - 20px);
}
#menu-leistungen li a{
border: 1px solid #fff;
display: block;
padding: 20px;
border-radius: 5px;
color: #fff;
font-family: Rostack;
font-size: 50px;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 2px;
line-height: 80%;
padding-bottom: 60px;
position: relative;
transition: all 0.3s;
}
#menu-leistungen li a:hover{
padding-left: 60px;
}
#menu-leistungen li.current-menu-item  a{
background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%);
}
#menu-leistungen li a span.marked{
-webkit-text-stroke-width: 0;
-webkit-text-fill-color: #fff;
display: block;
}
#menu-leistungen li a:after{
content: "";
display: block;
width: 30px;
height: 30px;
-webkit-mask-image: url(//ba-youniverse.de/wp-content/themes/flexawesomebygalano/images/right-arrow.svg);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center center;
-webkit-mask-position: center center;
mask-size: contain;
-webkit-mask-size: contain;
background: #fff;
border: 1px solid red;
margin-top: 15px;
position: absolute;
bottom: 18px;
left: 20px;
transition: all 0.3s;
}
#menu-leistungen li a:hover:after{
bottom: calc(100% - 50px);
}
@media(max-width: 1400px){
#menu-leistungen{
padding: 50px 30px 20px 30px;
}
#menu-leistungen li a{
font-size: 40px;
padding: 17px;
padding-bottom: 50px;
}
#menu-leistungen li a:after{
margin-top: 10px;
bottom: 10px;
}
#menu-leistungen li{
width: calc(33.33% - 20px);
}
#menu-leistungen li:first-child{
width: calc(66.66% - 20px);
}
}
@media(max-width: 600px){
#menu-leistungen li:first-child{
width: calc(100% - 20px);
}
#menu-leistungen li{
width: calc(50% - 20px);
}
#menu-leistungen{
padding: 40px 20px 20px 20px;
}
#menu-leistungen li a:after{
}
}
@media(max-width: 480px){
#menu-leistungen{
padding-left: 15px;
padding-right: 15px;
}
#menu-leistungen li a:after{
left: 15px;
}
#menu-leistungen li a:hover:after{
bottom: calc(100% - 38px);
}
#menu-leistungen li a{
font-size: 33px;
}
#menu-leistungen li a:after{
margin-top: 5px;
}
#menu-leistungen li a:after{
content: "";
display: block;
width: 20px;
height: 20px;
-webkit-mask-image: url(//ba-youniverse.de/wp-content/themes/flexawesomebygalano/images/right-arrow.svg);
}
#menu-leistungen li a:hover{
padding-left: 50px;
}
#menu-leistungen{
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;
}
}