/* moved to style.css: */
/*:root{
	--top-height: 200px;
	--hudson-grey: rgb(100, 100, 100);
	--border-grey: rgb(50, 50, 50);
}*/

#page{
    /* border: 12px solid yellow; */
    height: 100%;
    margin: 0;
}

#splash{
	/* border: 2px solid pink; */
    height: 100vh;
    margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--hudson-cream);
}
#frame{
    /* border: 12px solid blue; */
	height: 100%;
}
.row.top{
}
.row.bottom{
}
.section{
    /* border: 2px solid green; */
    display: inline-block;
	vertical-align: top;
	position: relative;
}
.top .section{
	height: var(--top-height);
	/* border: 2px solid orange; */
}
.bottom .section{
	height: calc( 100vh - var(--top-height) );
	/* border: 2px solid teal; */
}

.section.tl{
	max-width: 300px;
}
.section.tr{
	max-width: calc( 100vw - 300px );
	background: white;
	z-index: 9;
	background: var(--hudson-cream);
}

.section.br{
    max-width: calc(100vw - 200px);
}
.section.bl{
	max-width: 200px;
}












/* SPECIFIC */

.section.br{
	position: relative;
	border: 2px solid var(--border-grey);
}
#slideshow-wrapper{
	background: #373636;
	position: absolute;
	/* border: 2px solid yellow; */
	top: 0;
	left: 0;
	width: 100%;
	height: calc( 100vh - var(--top-height) );
	white-space: nowrap;
	text-align: center;
	position: relative;

	box-shadow: inset 0px 0px 20px black;
}
#slideshow-wrapper .slide{
	/* border: 2px solid purple; */
	display: inline-block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat !important;
	/* vertical-align: top; */
	background-size: contain !important;
	background-position: center center !important;
	/* margin: 0 50px; */

	/* box-shadow: 0px 0px 10px black; */
}

.button.dir-left,
.button.dir-right{
	position: absolute;
	bottom: 10px;
	left: 5px;
		/* calc(50% - 20px); */
	font-size: 1.8rem;
	color: black;
	cursor: pointer;
	user-select: none;
	color: grey;
}
.button.dir-right{
	right: 5px;
	left: auto;
}


.slide-label{
	white-space: initial;
	position: absolute;
	bottom: 50px;
	right: 50px;
	z-index: 99;
	background: white;
	padding: 50px;
	max-width: 350px;
	box-shadow: 0px 0px 10px black;
	text-align: left;
}

.entry-header{
	display: none;
}
.entry-content{
	padding: 28px 20px;
}

@media screen and (max-width: 800px){
	.tr .subheader{
		display: none;
	}
	#site-navigation{
		display: none;
	}

	body .section.bl{
		display: none;
	}
	body .section.br{
	    max-width: 100vw;
		border: 0px;
	}
	#slideshow-wrapper .slide{
		/* width: 50%; */
	}
}