html {
    font-size: 20px;
}

.pool-bg:before,
.pool-bg:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    background-image: url('/img/pool-bg.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: 50;
}
.pool-bg:before {
    top: 0;
    height: 24vh;
    background-position: 50% 0;
    background-size: 100vw 59vh;
}
/*
.pool-bg:after {
    bottom: -19vh;
    height: 95vh;
    background-position: 50% -14vh;
    background-size: 100vw 90vh;
}
*/
.pool-bg:after {
    bottom: 0vh;
    height: 100vh;
    background-position: 50% 0px;
    background-size: 270vw 100vh;
}
@media screen and (max-width: 799px) {
    .pool-bg:after {
        background-size: 270vw 100vh;
    }
}
@media screen and (min-width: 800px) {
    .pool-bg:after {
        background-size: 146vw 100vh;
    }
}
@media screen and (min-width: 1200px) {
    .pool-bg:after {
        background-size: 100vw 100vh;
    }
}

@media screen and (min-width: 1000px) {
    .pool-bg:before {
        background-size: 100vw 69vh;
    }
}

header img#logo-top {
    background-color: rgba(255,255,255, 0.7);
}

a, a:hover, a:focus, a:visited {
    color: #ba0f0a !important;
}

.bg-overlay:before {
    background-color: rgba(255,255,255, 0.45);
    z-index: 100;
}
footer {
    color: #ba0f0a !important;
    position: static !important;
}

figure.dj-image {
    position: absolute;
    left: 4rem;
    top: 1.5rem;
    width: 18vw;
}

figure.dj-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
}

.dj-info {
    width: 50vw;
    text-align: center;
    margin: 0 auto;
}

#dj-set a,
#dj-set a:active,
#dj-set a:hover,
#dj-set a:visited
{
    text-decoration: none;
}
/*
#play-button {
    width: 68px;
    position: absolute;
    left: 4rem;
    bottom: -10px;
    z-index: 9999;
    cursor: pointer;
}
*/


main {
    height: 50vh;
    top: 6vh;
    padding: 0 1.5rem;
}

main > * {
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    figure.dj-image {
        position: static;
        width: 170px;
        margin: 1.5rem auto;
    }
    .dj-info {
        width: 100vw;
        position: static;
    }
}

@media screen and (orientation: portrait) and (max-height: 700px) {
    main {
        top: -2vh;
    }
    footer {
        font-size: 1.05rem;
    }
}

@media screen and (min-height: 1024px) {
    main {
        top: 12.5vh;
    }    
}
@media screen and (min-height: 1724px) {
    main {
        top: 25vh;
    }    
}
@media screen and (min-height: 2054px) {
    main {
        top: 37.5vh;
    }    
}
@media screen and (min-height: 2754px) {
    main {
        top: 50vh;
    }    
}

/*
@media screen and (max-height: 900px) {
    main {
        height: 50vh;
        top: 6vh;
        padding: 1.5rem;
    }
}
*/