/* ===SLUGLINE POPUPS=== */

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */

.popup .popuptext {
    visibility: hidden;
    width: 320px; /* 160px */
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

/* Popup arrow */
.popup .popuptext::after {
    
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
/* ===END SLUGLINE POPUPS=== */

/*=== body/content ===*/
body {
    font-family: 'IM Fell DW Pica', serif;
}

.center {
    text-align: center;
}

#header-title {
    margin-top: 30px;
}

.episode-title {
    font-size: 20px;
}

/* Big screens: 3 episode row */

@media screen and (min-width: 1600px) {
    .episode-div {
        width: 320px;
        text-align: center;
        padding: 0px;
        float: left;
    }
    
    .wrapper {
        width: 1020px;
        height: 100%;
        margin: 0px auto;
    }
    
    /* top row */
    #v11e1-div, #v11e2-div, #v11e3-div {
        margin-bottom: 50px;
    }
    
    #v11e5-div {
        margin: 0px 30px;
    }
    
    /* end top row */
    
    /* one episode row */
    #v11e16-div {
        margin-left: 350px;
        margin-bottom: 50px;
    }
    
    /* one episode row end */
    
    /* two episode row
    #v11e13-div {
        margin-left: 175px;
        margin-bottom: 50px;
    }
    #v11e14-div {
        margin-left: 30px;
        padding: 0px;
        margin-bottom: 50px;
    }
    
     two episode row end */
    
    /* three episode row */
    
    #v11e1-div, #v11e4-div, #v11e7-div, #v11e10-div, #v11e13-div {
        margin-bottom: 50px;
    }
    
    #v11e2-div, #v11e5-div, #v11e8-div, #v11e11-div, #v11e14-div {
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 50px;
    }
    
    #v11e3-div, #v11e6-div, #v11e9-div, #v11e12-div, #v11e15-div {
        margin-bottom: 50px;
    }
    
    /* end three episode row  */
}

/* End Big screens */


/* Medium screens A: 2 episode rows */
@media screen and (min-width: 1080px) and (max-width: 1599px){
    
    .episode-div {
        width: 320px;
        text-align: center;
        padding: 0px;
        float: left;
    }
    
    .wrapper {
        width: 690px;
        height: 100%;
        margin: 0px auto;
    }
    
    /* top row */
    #v11e1-div, #v11e5-div {
        margin-bottom: 50px;
    }
    
    #v11e1-div {
        margin-right: 50px;
    }
    
    /* one episode row
   
    #v11e15-div {
        margin-left: 185px;
        margin-right: 185px;
        margin-bottom: 50px;
    }
    
     one episode row end */
    
    /* two episode row */
    #v11e1-div, #v11e3-div, #v11e5-div, #v11e7-div, #v11e9-div, #v11e11-div, #v11e13-div, #v11e15-div {
        margin-right: 25px;
        margin-bottom: 50px;
    }
    
    #v11e2-div, #v11e4-div, #v11e6-div, #v11e8-div, #v11e10-div, #v11e12-div, #v11e14-div, #v11e16-div {
        margin-left: 25px;
        margin-bottom: 50px;
    }
    
    /* end two episode row */
    
}

/* End Medium A screens */

/* Medium screens B: 2 episode rows */
@media screen and (min-width: 1000px) and (max-width: 1079px){
    
    .episode-div {
        width: 320px;
        text-align: center;
        padding: 0px;
        float: left;
    }
    
    .wrapper {
        width: 660px;
        height: 100%;
        margin: 0px auto;
    }
    
    .episodes-col {
        padding: 0px;
    }
    
    /* top row */
    #v11e1-div, #v11e5-div {
        margin-bottom: 50px;
    }
    
    /* one episode row
    
    #v11e15-div {
        margin-left: 185px;
        margin-right: 185px;
        margin-bottom: 50px;
    }
    
     one episode row end */
    
    /* two episode row */
    #v11e1-div, #v11e3-div, #v11e5-div, #v11e7-div, #v11e9-div, #v11e11-div, #v11e13-div, #v11e15-div {
        margin-right: 20px;
        margin-bottom: 50px;
    }
    
    #v11e2-div, #v11e4-div, #v11e6-div, #v11e8-div, #v11e10-div, #v11e12-div, #v11e14-div, #v11e16-div {
        margin-bottom: 50px;
    }
    /* end two episode row */
}

/* End Medium B screens */



/* Mobile and Tablet screens: 1 episode row */
@media screen and (max-width: 999px){
    .episode-div {
        width: 320px;
        text-align: center;
        padding: 0px;
        float: left;
        margin-bottom: 50px;
    }
    
    .wrapper {
        width: 320px;
        height: 100%;
        margin: 0px auto;
    }
    
}

/* End Mobile and Tablet screens */