101 lines
1.6 KiB
CSS
101 lines
1.6 KiB
CSS
.swiper {
|
|
width: 600px;
|
|
height: 300px;
|
|
}
|
|
|
|
.ping-pong-wrapper {
|
|
max-height: 600px;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.ping-pong {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ping-pong__info {
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.ping-pong__info-inner {
|
|
width: 65%;
|
|
margin: auto;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.ping-pong__info-inner {
|
|
width: 100%;
|
|
padding: 30px;
|
|
}
|
|
}
|
|
|
|
.ping-pong__info h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.ping-pong.right {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.ping-pong > div {
|
|
flex: 1;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.ping-pong > div {
|
|
flex: 1 0 100%;
|
|
}
|
|
}
|
|
|
|
.field--name-field-ping-pong-cta a {
|
|
background: rgba(255, 255, 255, 0.66);
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
transition: background .5s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.field--name-field-ping-pong-cta a:hover {
|
|
background: white;
|
|
}
|
|
|
|
/** slider styles */
|
|
.ping-pong .swiper-slide img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
height: 400px;
|
|
}
|
|
|
|
/*.ping-pong .slide.active img { */
|
|
/* display: block; */
|
|
/* opacity: 1; */
|
|
/* visibility: visible; */
|
|
/* transition: all .5s ease-in-out; */
|
|
/*} */
|
|
|
|
/*.ping-pong .slide.hide img { */
|
|
/* opacity: 0; */
|
|
/* visibility: hidden; */
|
|
/* transition: all .5s ease-in-out; */
|
|
/*} */
|
|
|
|
/*.ping-pong .slide img { */
|
|
/* display: none; */
|
|
/* visibility: hidden; */
|
|
/* opacity: 0; */
|
|
/* transition: all .5s ease-in-out; */
|
|
/*} */
|
|
|
|
/*.ping-pong ul.slides { */
|
|
/* list-style-type: none; */
|
|
/* padding: 0; */
|
|
/* margin: 0; */
|
|
/* max-height: 100%; */
|
|
/*} */
|