body {    
    background-image: url('../img/back3.jpg');
    background-size: cover;
    font-family: 'Source Serif Pro';
    font-weight: 300;
    width: 100%;
    font-size: 1.2em;
}

.arrow-down {
    position: absolute;
    top: 80vh;
    left: 0px;
    width: 100vw;
}
.arrow-down img {
    width: 25%;
}

.lettering {
    height: 15vh;
    width: auto;
    margin: auto;
}

.mobile-hero-content {
    color: black;
    padding: 5vh;       
    padding-bottom: 10vh;
}

.header-table {
    margin: auto;
    width: 100%;
    display: none;
}

.header-lettering {
    height: 10vh;
    width: 100%;
    margin: auto;
}
.header-lettering img {
    height: 100%;
    width: auto;
}

.header-content img {
    filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.5));
}

.header-content-text {
    padding: 10px;
}

.header-filler {
    height: 20vh;
}

.hero-header {
    font-size: 1.3em;
    padding-bottom: 50px;
}

.song-link-list {
    padding-bottom: 10vh;
}

.tales-1-container {
    width: 50vw;
    margin: auto;
}

.tales-1-lyrics {
    font-size: 0.8em;
}
.tales1 {
    background-image: url('../tales-1/back.jpg');
    background-size: cover;
}
.video-container {
    margin-top: 5vh;
}

.to-be-continued {
    background-image: url('../img/To-Be-Continued-Back.jpg');
    background-size: cover;
    height: 100vh;
    background-position: -75vw;
}
.to-be-continued table {
    width: 100%;
    height: 100%;
}

.to-be-continued td {
    vertical-align: middle;
    text-align: center;
}

.video-container {
    position: relative;
    padding-bottom: 50.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 15vh;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.to-be-continued img {
    width: 75%;
}

/*
 * Footer
 */ 
 .footer {
    width: 100%;
    background-color: black;
    color: #ccc;
    text-align: center;
    vertical-align: center;
}
.footer div {
    padding: 38px;
}
footer a,
footer a:active,
footer a:visited {
    margin: 0px 15px;
    color: #ccc;
}
.caret {
    margin-top: 50px;
}

@media (max-width: 1921px) {    
    body {
        background-image: url('../img/Background-Bright.jpg');
        background-repeat: no-repeat;
        background-size: 1200px;
        background-attachment: fixed;
    }
    .header {
        height: 100vh;
        width: 100vw;
        background-color: black;
        background-image: url('../img/Tales-Mobile.jpg');
        background-size: 100%;
        background-position: bottom;
        background-repeat: no-repeat;
        font-size: 1.2em;
    }    
    .watch-tales-on-youtube {
        margin-bottom: 150px;
    }
    
}

@media (min-width: 1921px) {
    .arrow-down {
        display: none;
    }
    .header {
        height: initial;
        height: initial;
        background-image: none;
    }
    .lettering {
        height: 10vh;
        margin: 5vh;
    }
    .mobile-hero-content, .mobile-subtitle {
        display: none;
    }
    body {
        font-size: 1em;
        background-size: 100%;
    }
    .header-table {
        display: initial;
    }
    .header-content {
        height: 60vh;
        padding: 0vh 10vh;
    }
    .hero-header {
        font-size: 1.5em;
    }
    .header-content-text {
        padding-left: 25px; 
        font-size: 1.2em;
    }
    .header-content-image {
        text-align: right; 
        padding-right: 25px;    
        width: 20vw;        
        width: auto;
    }
    .header-content img {
        width: 20vw;        
    }
    .to-be-continued img {
        width: 25%;
    }
    .tales1 {
        height: 110vh;    
        background-image: url('../tales-1/back.jpg');
        background-size: 100%;
    }
    .tales-1-lyrics {
        font-size: 1em;
    }
    .video-container {
        margin-top: 5vh;
        margin-bottom: 0px;
    }    
    .to-be-continued {
        background-image: url('../img/To-Be-Continued-Back.jpg');
        background-size: 100%;
        height: 100vh;
        background-position: initial;
    }
}