/* @media screen and (max-width: 2560px) {
    .welcomeText {
        font-size: 3em;
    }
    .welcomePageCastsContainer {
        width: 85%;
    }
    .castBoxes {
        height: 850px;
    }
} */

@media screen and (max-width: 1440px) {
    .welcomeText {
        font-size: 2em;
    }
    .welcomePageCastsContainer {
        width: 85%;
    }
    .castBoxes {
        height: 600px;
    }
    .contents .waveform
    {
        top: 10%;
    }
    .newsText
    {
        top: 15%;
        font-size: 2em;
    }
    .dateDurationDesc 
    {
        top: 25%;
        height: 100px;
        font-size: 1.5em;
    }
    .playButton 
    {
        top: 50%;
    }
}

@media screen and (max-width: 1024px) {
    .welcomePageCastsContainer {
        width: 85%;
    }
}

@media screen and (max-width: 768px) {
    .welcomeText {
        font-size: 1.5em;
    }
    .welcomePageCastsContainer {
        width: 85%;
    }
    .castBoxes {
        height: 500px;
    }
    .dateDurationDesc 
    {
        top: 20%;
        height: 150px;
        font-size: 1.3em;
    }
    .playButton 
    {
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.8em;
    }

    .podCastContainer > .podcastThumbnail 
    {
        width: 50%;
    }
    .podCastContainer > .podCastDetailsHolder > .podCastHeader 
    {
        left: 30%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 70%;
        display: block;
    }
    .podCastContainer > .podCastDetailsHolder > .podCastPunchline 
    {
        left: 20%;
        white-space: wrap;
        overflow: hidden;
        width: 90%;
        display: block;
        font-size: 1em;
    }

    .hotPicks
    {
        box-shadow: inset 0 0 2px #ffc;
    }
    .hotPicks > .hotPickText 
    {
        text-shadow: none;
        font-size: 1.5em;
    }
    .hotPickImageSmall 
    {
        width: 90%;
        border-radius: 40px;
    }
    .hotPickTextSmall 
    {
        top: 10%;
        left: 2%;
        height: 80%;
        white-space: wrap;
        overflow: hidden;
        width: 50%;
        display: block;
        font-size: 1.2em;
        text-overflow: ellipsis;
    }

}

@media screen and (max-width: 600px) {
    .welcomePageCastsContainer {
        width: 85%;
    }
    .welcomeText {
        font-size: 1.5em;
    }
    .castBoxes {
        display: flex;
        flex-direction: column;
        height: 900px;
    }
    .castContainerBoxes > .castBox:nth-child(1) {
        height: 350px;
    }
    .castContainerBoxes > .castBox:nth-child(2),
    .castContainerBoxes > .castBox:nth-child(3) {
        height: 200px;
    }
    .newsContainer 
    {
        height: 450px;
        border-radius: 15px;
        border: 2px solid #cccccc8f;
    }
    .contents .waveform
    {
        top: 10%;
    }
    .newsText
    {
        top: 15%;
        font-size: 1.2em;
    }
    .dateDurationDesc 
    {
        top: 15%;
        height: 100px;
        font-size: 1em;
    }
    .playButton 
    {
        top: 18%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.8em;
    }
    .weatherContainer > .contents > .weatherCredentials 
    {
        top: 40%
    }
    .podCastContainer > .podcastThumbnail 
    {
        width: 50%;
    }
    .podCastContainer > .podCastDetailsHolder > .podCastHeader 
    {
        left: 30%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 70%;
        display: block;
    }
    .podCastContainer > .podCastDetailsHolder > .podCastPunchline 
    {
        left: 20%;
        white-space: wrap;
        overflow: hidden;
        width: 100%;
        display: block;
        font-size: 0.8em;
    }
    .hotPicks
    {
        box-shadow: inset 0 0 2px #ffc;
    }
    .hotPicks > .hotPickText 
    {
        text-shadow: none;
        font-size: 1em;
    }
    .hotPickImageSmall 
    {
        width: 90%;
        border-radius: 40px;
    }
    .hotPickTextSmall 
    {
        top: 10%;
        left: 2%;
        height: 80%;
        white-space: wrap;
        overflow: hidden;
        width: 50%;
        display: block;
        font-size: 1.2em;
        text-overflow: ellipsis;
    }



}
