96 lines
1.4 KiB
CSS
96 lines
1.4 KiB
CSS
.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 .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%;
|
|
}
|