.websitereferenzen-box .section-content{
padding-left: 100px;
padding-right: 100px;
}
.websitereferenzen-box .content{
display: flex;
flex-wrap: wrap;
}
.websitereferenzen-box .item {
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.websitereferenzen-box .image{
width: 60%;
padding-top: 40%;
position: relative;
}
.websitereferenzen-box .image img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
left: 0px;
top: 0px;
}
.websitereferenzen-box .text{
width: 40%;
color: #000;
background: #fff;
padding: 70px;
background: linear-gradient(90deg,  rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%);
background: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.websitereferenzen-box .text strong.spalten-titel{
font-family: Rostack;
font-weight: normal;
letter-spacing: 3px;
font-size: 70px;
line-height: 80%;
color: #000;
margin-bottom: 10px;
}
.websitereferenzen-box .text .spalten-subtitel{
font-family: Saira;
letter-spacing: 4px;
font-size: 30px;
text-transform: uppercase;
margin-bottom: 30px;
color: #000;
line-height: 130%;
}
.websitereferenzen-box  .item-content {
display: flex;
flex-wrap: wrap;
}
.websitereferenzen-box .buttondiv a{
border: 2px solid #000;
padding: 10px 30px;
display: block;
border-radius: 9999px;
color: #000;
font-family: Cairo;
font-weight: normal;
letter-spacing: 2px;
text-align: left;
position: relative;
line-height: 100%;
height: 60px;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 280px;
text-transform: uppercase;
font-size: 20px;
transition: all 0.5s;
}
.websitereferenzen-box .buttondiv a span{
display: block;
text-align: left;
width: 100%;
transition: all 0.5s;
}
.websitereferenzen-box .buttondiv a:hover span{
padding-left: 50px;
}
.websitereferenzen-box .buttondiv a span:after{
content: "";
display: block;
width: 30px;
height: 30px;
background-image: url(//ba-youniverse.de/wp-content/themes/flexawesomebygalano/images/right-arrow.svg);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
right: 0px;
top: -4px;
transition: all 0.5s;
}
.websitereferenzen-box .buttondiv a:hover span:after{
right: calc(100% - 30px);
}
.websitereferenzen-box .swiper-button-wrapper{
position: relative;
width: 100px;
height: 40px;
border: 2px solid red;
}
.websitereferenzen-box .swiper-button-prev{
left: -80px;
}
.websitereferenzen-box .swiper-button-next{
right: -80px;
}
@media(max-width: 1400px){
.websitereferenzen-box .swiper-button-prev, 
.websitereferenzen-box .swiper-button-next{
width: 50px;
height: 50px;
}
.websitereferenzen-box .text{
padding: 40px;
}
.websitereferenzen-box .text strong.spalten-titel{
font-size: 50px;
}
.websitereferenzen-box .text .spalten-subtitel{
font-size: 20px;
}
.websitereferenzen-box .image,
.websitereferenzen-box .text{
width: 50%;
}
.websitereferenzen-box .buttondiv a{
font-size: 18px;
height: 50px;
}
.websitereferenzen-box .swiper-button-prev{
left: -60px;
}
.websitereferenzen-box .swiper-button-next{
right: -60px;
}
.websitereferenzen-box .text,
.websitereferenzen-box .image{
width: 100%;
}
.websitereferenzen-box .image{
padding-top: 75%;
}
.websitereferenzen-box .text{
padding: 40px;
}
}
@media(max-width: 1200px){
.websitereferenzen-box .text strong.spalten-titel{
font-size: 40px;
}
.websitereferenzen-box .text .spalten-subtitel{
font-size: 16px;
letter-spacing: 3px;
}
.websitereferenzen-box .text{
padding: 30px;
}
.websitereferenzen-box .buttondiv a{
font-size: 16px;
height: 46px;
width: 100%;
}
.websitereferenzen-box .text .spalten-subtitel{
margin-bottom: 20px;
}
.websitereferenzen-box .buttondiv a span:after{
top: -6px;
}
}
@media(max-width: 1024px){
.websitereferenzen-box .section-content{
padding-left: 75px;
padding-right: 75px;
}
.websitereferenzen-box .text strong.spalten-titel{
font-siz: 35px;
letter-spacing: 2px;
}
}
@media(max-width: 920px){
.videomitmaske-box .section-content{
padding-left: 30px;
padding-right: 30px;
padding-top: 50px;
padding-bottom: 50px;
}
}
@media(max-width: 768px){
.videomitmaske-box .section-content{
padding-left: 20px;
padding-right: 20px;
padding-top: 30px;
padding-bottom: 30px;
}
}
@media(max-width: 750px){
.websitereferenzen-box .section-content{
padding-left: 60px;
padding-right: 60px;
}
.websitereferenzen-box .swiper-button-prev, .websitereferenzen-box .swiper-button-next{
width: 45px;
height: 45px;
}
.websitereferenzen-box .swiper-button-prev, .websitereferenzen-box .swiper-button-next{
right: -50px;
}
.websitereferenzen-box .swiper-button-prev{
left: -50px;
}
}
@media(max-width: 550px){
.websitereferenzen-box{
padding-bottom: 50px;
}
.websitereferenzen-box .section-content{
padding-left: 30px;
padding-right: 30px;
}
.websitereferenzen-box .swiper-button-prev, .websitereferenzen-box .swiper-button-next{
top: calc(100% + 38px);
}
.websitereferenzen-box .swiper-button-prev, .websitereferenzen-box .swiper-button-next{
right: 0;
}
.websitereferenzen-box .swiper-button-prev{
left: 0;
}
}