/* Mobile */
@media screen and ( min-width: 0px ) and ( max-width: 1057px ) {

	nav { margin: 10px 0; }

	ul#titles { width: 100vw; }
	ul#texts { width: 100vw; }

	#wrap > ul {
		display: inline-block;
		float: left;
		overflow-y: scroll;
	}

	ul#texts > li#About,
	ul#texts > li#white,
	ul#texts > li#kronenburg,
	ul#texts > li#hybrid,
	ul#texts > li#mumo,
	ul#texts > li#joule,
	ul#texts > li#handeled,
	ul#texts > li#vlisco,
	ul#texts > li#caretaker,
	ul#texts > li#hands,
	ul#texts > li#other,
	ul#texts > li#extra { margin-top: 25px; }

	ul#titles > li {
		line-height: 25px;
		padding-left: 22px;

		border-top: 1px solid black;

		cursor: pointer;
	}
	ul#titles > li:last-child {	border-bottom: 1px solid black;	}

	ul#texts > li {
		padding-top: 0;
		border: 0;
	}

	ul#imagesMobile { width: 100vw; }

	ul#imagesMobile > ul {
		padding: 20px calc(22px - 2.5%);
		display: none;
	}

	ul#imagesMobile > ul > img.hidden,
	ul#imagesMobile > ul > video.hidden { display: inline-block; }

	img, video {
		width: 20%;
		margin: 0 2.5% 5% 2.5%;
		padding: 0;
		border: 1px solid black;
		float: left;
	}

	ul#imagesDesktop { display: none; }

}

/* Everything else */
@media screen and ( min-width: 1058px ) {

	nav {
		line-height: 30px;
		border-bottom: 1px solid black;
	}

	ul#titles { width: 330px; }
	ul#texts { width: 550px; }

	#wrap > ul {
		height: calc( 100vh - 31px );

		display: inline-block;
		float: left;
		overflow-y: scroll;
	}

	ul#titles > li {
		line-height: 25px;
		padding-top: 1px;
		padding-left: 22px;

		border-bottom: 1px solid black;

		cursor: pointer;
	}

	ul#texts {
		border-left: 1px solid black;
		border-right: 1px solid black;
	}


	ul#imagesMobile { display: none; }
	ul#imagesDesktop {}

	ul#imagesDesktop > ul {
		padding: 5% 22px;

		border-top: 1px solid black;

		display: none;
	}

	ul#imagesDesktop > ul > img.hidden,

	img {
		width: 20%;
		margin: 0 2.5% 5% 2.5%;
		padding: 0;

		border: 1px solid black;

		cursor: pointer;
		float: left;
	}

	ul#imagesDesktop > ul.about { border-top: 0px; }
	ul#imagesDesktop > ul.white { margin-top: 26px; }
	ul#imagesDesktop > ul.kronenburg {margin-top: 53px; }
	ul#imagesDesktop > ul.hybrid {margin-top: 80px; }
	ul#imagesDesktop > ul.mumo { margin-top: 107px; }
	ul#imagesDesktop > ul.joule { margin-top: 134px; }
	ul#imagesDesktop > ul.handeled { margin-top: 161px; }
	ul#imagesDesktop > ul.vlisco { margin-top: 188px; }
	ul#imagesDesktop > ul.caretaker { margin-top: 215px; }
	ul#imagesDesktop > ul.hands { margin-top: 242px; }
	ul#imagesDesktop > ul.other { border-top: 0px; }
	ul#imagesDesktop > ul.extra { margin-top: 242px; }

}