:root {
	--oap-frontpage-gutter: 30px;
}

.hero-front-page, .album-container {
    background-color: #2B2B29;
}

.hero-front-page > div {
	text-align: center;
}

.album-container {
    display: grid;
    grid-template-columns: 55% 45%;
    margin-top: 10px;
	margin-left: var(--oap-frontpage-gutter);
	margin-right: var(--oap-frontpage-gutter);
}

.album-container > h2 {
    margin-left: 0;
}

#album-container-1 {
    margin-left: var(--oap-frontpage-gutter);
}

.hero-front-page > div {
    margin-left: var(--oap-frontpage-gutter);
    margin-right: var(--oap-frontpage-gutter);
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.hero-front-page > div > h1 {
    margin-top: 0px;
}

.albums-front-page {
    margin-left: 0;
    display: flex;
    margin-bottom: 3vh;
    margin-top: 1vh;
}

.albums-front-page > a {
    display: flex;
    width: 100%;
}

.prod-link-front-cta {
    color: #00A7EC;
}

.albums-frontpage-info {
    margin-left: 20px;
    position: relative;
    height: 100%;
    width: 100%;
}

.albums-frontpage-info > h3 {
    margin: 0px;
    padding: 0px;
    font-size: 1.2em;
}

.albums-frontpage-img {
    height: 131px;
    width: 131px;
    flex-shrink: 0;
    object-fit: contain;
}

.album-videos-front {
    margin-left: var(--oap-frontpage-gutter);
}

.frontpage-foot {
    width: 100%;
}

.oap-bottom-videos {
    margin-top: 3vh;
    margin-left: var(--oap-frontpage-gutter);
}

.oap-bottom-videos > a {
    text-decoration: none;
    font-size: 14pt;
}

.body-container {
    padding-bottom: 0px!important;
}

body.oap-front .foot-img-container {
    margin-left: var(--oap-frontpage-gutter);
}

.oap-bottom-logo {
	margin-bottom: -3px!important;
}

.album-videos-front {
	padding-bottom: 30px
}

h3 {
	margin-top: 0px;
}

.youtube-container > iframe {
	display: block;
	max-width: 100%;
	width: 100%;
	height: 100%;
}

@media all and (max-width: 900px) {
	:root {
		--oap-frontpage-gutter: 20px;
	}

	.hero-front-page > div {
		text-align: left;
	}

    .youtube-container {
        width: 100%;
    }

    iframe {
        width: 100%;
    }

    .album-container {
        grid-template-columns: 100%;
    }

    .album-videos-front {
        display: flex;
        margin-bottom: 20px;
		margin-left: 0px;
    }

    .albums-frontpage-info {
        width: 50%;
		margin-right: 0px!important;
    }

    .albums-front-page {
        justify-content: flex-start;
    }

    #album-container-1 {
        grid-row: 6;
        margin-left: 0;
    }
    #album-container-2 {
        grid-row: 2;
    }
    #album-container-3 {
        grid-row: 7;
    }
    #album-container-4 {
        grid-row: 3;
    }
    #album-container-5 {
        grid-row: 8;
    }
    #album-container-6 {
        grid-row: 4;
    }
    #album-container-7 {
        grid-row: 9;
    }
    #album-container-8 {
        grid-row: 5;
    }
    #album-container-9 {
        grid-row: 10;
    }
}