.pod-title h3{
font-size: 1em;
color: var(--header-highlight);
font-family:  "Unbounded", sans-serif;
width: auto;
padding: 0 15px 0 0;
background-color: #f2f1f1;
display: table;
z-index: 1;
}
.pod-title{
margin: 0px auto 35px auto;
width: 500px;
border-top: 2px solid #00adee;
}
.pod-title .line{
height: 1px;
background-color: var(--header-highlight);
width: 100%;
margin: -18px 0 0 0;
}
.carousel-sub-container{
height: 320px;
position: relative;
}
.iframeWrap{
position: relative;
height: 100%;
}
.iframeWrap iframe, .iframeWrap img{
height: 100%;
}
.iframeWrap img{
width: 100%;
}
.content-carousel{
overflow-x: hidden;
width: 50%;
min-width: 300px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.carousel-cont{
width: 100%;
height: 500px;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.play-button{
cursor: pointer;
position: absolute;
width: auto !important;
height: 75px !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
box-shadow: none;
}
.pod-thumbnail{
object-fit: cover;
}
.play-button:hover{
transform: translate(-50%, -50%) scale(1.05);
box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 0.337);
}
.carousel-container{
height: 100%;
transition: all 0.5s ease-in-out;
display: flex;
overflow-x: hidden;
overflow-y: hidden;
width: 500%;
position: relative;
right: 100%; border-radius: 10px;
}
.carousel-sub-container{
overflow-y: hidden !important;
width: 500px;
border-radius: 10px;
overflow-x: hidden;
box-shadow: 5px 5px 5px -5px rgb(123, 123, 123);
}
.iframeWrap{
width: 20%;
}
.iframeWrap iframe{
height: 320px;
width: 100%;
max-width: none;
}
.display-flex-carousel{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0;
}
.content-text-carousel{
width: 50%;
}
.button-left button, .button-right button{
background-color:  rgba(255, 255, 255, 0) !important;
width: 35px;
height: 35px;
padding: 0 !important;
color: var(--header-highlight) !important;
border-radius: 50% !important;
margin: 0px 10px;
}
.button-left button img, .button-right button img{
width: 50%;
margin: auto;
}
.pod-graphic{
position: absolute;
margin: auto;
top: -19%;
transition: all 0.5s ease-in-out;
height: 120%;
display: inline-block;
left: 0%;
width: 286px;
}
.pod-graphic img{
object-fit:contain;
height: 100%;
width: 100%;
transition: all 1s ease-in-out;
} .active .property-pod-content-image >  .pod-sticker{
transform: translateX(30px);
}
.property-pod-content-image{
position: relative;
display: flex;
justify-content: flex-start;
}
.property-pod-content-image > img{
width: 245px;
transition: all 0.5s ease-in-out;
}
.pod-sticker{
transition: all 0.5s ease-in-out;
position: absolute;
top: 25%;
left: 170px;
width: 50% ;
height: 45%;
min-width: 100px;
min-height: 100px;
display: inline-block;
z-index: -1;
transform: rotate(-5deg) !important;
}
.pod-sticker img{
object-fit: contain;
width: 100% !important;
}
.podcast-copy p {
font-size: 1em;
}
.podcast-copy{
width: 500px;
margin: auto;
height: 250px;
}
.buttons-mobile{
justify-content: center;
display: none;
}
.buttons-mobile button{
margin: 0px 10px;
}
.pod-desc{
transition: all 0.3s ease;
position: absolute;
opacity: 0;
width: 500px;
}
.pod-desc.active{
opacity: 1;
}
.content-parent{
width: 100%;
}
.carousel-cont{
height: auto;
}
.content-carousel{
min-width: auto;
height: auto;
}
.pod-desc h4{
text-transform: none;
font-weight: bold;
color: var(--header-highlight);
}
.episode-number{
position: absolute;
opacity: 0;
transition: all 0.5s ease;
}
.episode-number.active{
opacity: 1;;
}
@media only screen and (max-width: 500px){
.property-pod-content-image{
width: 50% !important;
}
.pod-sticker{
display: none;
}
.pod-graphic{
left: -17% !important;
width: 150% !important;
}
.pod-desc{
width: auto !important;
}
.podcast-copy{
position: relative;
width: 100% !important;
}
.pod-desc{
width: 100% !important;
}
.carousel-sub-container {
width: 100% !important;
height: auto !important;
}
.carousel-container{
height: 200px !important;
width: 500% !important;
}
.iframeWrap{
height: auto !important;
}
.iframeWrap iframe{
width: 100% !important;
height: 200px !important;
}
}
.loader-container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.loader {
border: 0.5em solid lightgrey;
height: 50px;
width: 50px;
border-radius: 50%;
border-top: 0.5em solid #5AA8FF;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
100% {
transform:  rotate(360deg);
}
}