/*--------------------------------------------------------------
## Colors and Fonts
COLORS:
  Grey: #c5c2bf, rgba(197,194,191,1)
  Dark Blue: #2e364b, rgba(46,54,75,1)
  Pink: #967279, rgba(150,114,121,1)
  Dark Pink: #651424, rgba(101,20,36,1)

FONTS:
	HEADINGS/LINKS	=	font-family: 'Kameron', serif; (Available only in 700 weight)
	BODY TEXT 		=	font-family: 'Open Sans', sans-serif; (Available only regular font, standard weight)

## Begin general styles (dev only, final deployed in style.css
--------------------------------------------------------------*/
@media screen and (min-width: 48em) { /* 768px wide screens */
    .test-class {
        width: 50vw;
        height: 40vh;
        right: 0;
        left: auto;
        overflow: auto;
        padding: 0 1em;
        margin-bottom: 0;
    }
    .main-navigation ul li {
        padding: 0 2em 0 0;
    }
    .main-navigation a {
        font-size: 1.1em;
    }
    .next-show {
        display: block;
        position: fixed;
        width: 50vw;
        height: 40vh;
        top: auto;
        right: auto;
        bottom: 123px;
        left: 0;
        z-index: -99;
        background-color: rgba(197,194,191,1);
    }
    .new-ep .entry-header {
        text-align: center;
        width: 100%;
    }
    .new-ep .entry-content {
        text-align: center;
        width: 100%;
    }
    .new-ep .entry-content img {
        width: 90%;
    }
}

@media screen and (min-width: 64em) { /* 1024px wide screens */
    .poster {
        background-position: 0 -75px;
    }
    .site-branding {
        width: 45%;
    }
    .main-navigation {
        position: relative;
        width: 50%;
        background-color: initial;
    }
    .main-navigation a {
        color: rgba(150,114,121,1);
    }
    .main-navigation a:hover,
    .main-navigation a:active {
        border-bottom: 3px solid rgba(150,114,121,1);
        border-spacing: 0;
    }
    .poster {
        width: 55vw;
        height: 90vh;
        top: 10vh;
        left: 0;
    }
    .next-show {
        display: block;
        position: fixed;
        width: 55vw;
        height: 30vh;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        background-color: rgba(197,194,191,1);
    }
    .next-show .page-title {
        max-width: 80%;
        margin: auto;
    }
    .shows-info {
        margin-top: 1em;
    }
    .shows-info .date-time {
        font-size: 1.2em;
    }    
    .test-class {
        width: 45vw;
        height: 60vh;
        top:10vh;
        right: 0;
        bottom: initial;
        left: initial;
        border-radius: 0;
        -webkit-box-shadow: initial; 
        box-shadow: initial;
    }
    .new-ep .entry-title {
        text-align: center;
        font-size: 2em;
        margin: 0;
    }
    .new-ep .entry-content {
        text-align: center;
    }
    .new-ep .entry-content img {
        max-width: 60%;
    }
    .ga-playlist {
        width: 45vw;
        height: 30vh;
        top: 70vh;
        right: 0;
        left: auto;
        bottom: auto;
        -webkit-box-shadow: initial; 
        box-shadow: initial;
        border-radius: 0;
    }
    .player .title-text {
        font-size: 1.2em;
    }
    .playlist-button {
        display: none;
    }
    .playlist-wrap {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: center;
    }
    .playlist-title {
        width: 100%;
    }
}

@media screen and (min-width: 80em) { /* 1280px wide screens */
    .poster {
        background-position: 0 -150px;
    }
    /* .site-branding {
        position: absolute;
        width: 35vw;
        top: 2vh;
        right: 5vw;
        left: auto;
    }
    .main-navigation {
        position: absolute;
        width: 28vw;
        top: 10vh;
        right: 5vw;
        left: auto;
        background-color: initial;
        justify-content: right;
    }
    .main-navigation ul {
        width: 100%;
        padding: 0;
        justify-content: right;
    }
    .main-navigation ul li {
        padding: 0 0.5em 0 0;
    }
    .site-main {
        width: 28vw;
        height: 60vh;
        top: auto;
        bottom: 20vh;
        right: 5vw;
        left: auto;
        overflow: auto;
    } */
}