@media handheld, only screen and (max-width: 1480px), only screen and (max-device-width: 1480px) and (orientation:portrait)
{
	.center{ padding: 0px 20px; }
}

@media handheld, only screen and (max-width: 1360px), only screen and (max-device-width: 1360px) and (orientation:portrait)
{
	/* Menu */
	#menu.screen > ul > li a, 
	#menu.screen > ul > li span{ letter-spacing: 1px; }

	/* Menu footer */
	footer, footer a, 
	footer p { font-size: 12px; letter-spacing: 2px; }
}

@media handheld, only screen and (max-width: 1170px), only screen and (max-device-width: 1170px) and (orientation:portrait)
{
	/* Menu */
	#menu.screen > ul > li{ margin: 0px 20px; }
	#menu.screen > ul > li a, 
	#menu.screen > ul > li span{ font-size: 13px; letter-spacing: 0px; }

	/* Subpages */
		
		/* Multiple pages */
		#content{ padding: 75px 40px 125px;}

	/* Menu footer */
	footer, footer a, 
	footer p { letter-spacing: 0px; }
}

@media handheld, only screen and (max-width: 1010px), only screen and (max-device-width: 1010px) and (orientation:portrait)
{
	/* Menu */
	#menu.screen { display: none; }
	#mobile-menu{ display: flex; }	

	/* Homepage */
	#home-image, 
	.main-title{ padding: 0px; }
	.main-title{ margin: 40px 0px; }

	/* Subpages */

		/* Multiple pages */
		#content{ padding: 40px 0px;}
		#content article p:first-child{ font-size: 16px; }
		#content article h1{ font-size: 28px; }
		#content article h2{ font-size: 18px; }
		#content article p,
		#content article ul,
		#content article ol,
		#content article a{ font-size: 13px; }
		#content .links{ flex-wrap: wrap; }
		#content .links a{ width: 100%; margin: 10px 0px; }

		/* Stories */
		.story-page #content{ padding: 40px 0px;}


	/* Footer */
	footer .wrapper{ height: auto; flex-wrap: wrap; }
	footer .wrapper .left,
	footer .wrapper .right{ width: 100%; text-align: center; }
	footer .wrapper .right{ padding: 20px 0px 40px; }
	footer .legal{ flex-wrap: wrap; }
	footer .legal > *{ width: 100%; margin: 5px 0px; }
	footer .legal div{ order: 3; }
	footer .impressum{ order: 2; }
	footer .privacy { order: 1; }
}

@media handheld, only screen and (max-width: 760px), only screen and (max-device-width: 760px) and (orientation:portrait)
{

	/* Subpages */

		/* Drawings page */
		.drawings-page .mobile{ display: block; }
		.drawings-page .wrapper{ flex-wrap: wrap; }
		.drawings-page #content .wrapper .left{ display: none; }
		.drawings-page #content .wrapper .right{ width: 100%; }

		/* Events page */
		#title .left{ display: none; }
		#exhibition .wrapper,
		#reading .wrapper{ flex-wrap: wrap; }
		#exhibition .wrapper .left,
		#exhibition .wrapper .right,
		#reading .wrapper .left,
		#reading .wrapper .right{ width: 100%; }

	/* Footer menu */ 
	footer .nav > ul{ justify-content: center !important; }
	footer .nav > ul > li{ display: none; }
	footer .nav > ul > li:last-child{ display: block; }
	footer .design{ flex-wrap: wrap; }
	footer .design > *{ width: 100%; }
	footer .design > div{ margin: 0px 0px 20px; }
}

@media handheld, only screen and (max-width: 640px), only screen and (max-device-width: 640px) and (orientation:portrait)
{
	/* Subpages */

		#content .arrow.left,
		#content .arrow.right{ display: block; position: absolute; bottom: 200px; }

		/* Creators page */
		.creators-page #images a{ width: 45%; }
		.creators-page #images a:nth-child(2n){ margin-right: 0px !important; }
		.creators-page #images a:nth-child(3n),
		.creators-page #images a{ margin: 0 10% 40px 0; }

		/* Creator details page */
		.creator-details-page #content .arrow{ display: block; }
		.creator-details-page .mobile{ display: block; }
		.creator-details-page .wrapper{ flex-wrap: wrap;}
		.creator-details-page #content .wrapper .left{ display: none; }
		.creator-details-page #content .wrapper .right{ width: 100%; }
		.creator-details-page #content .wrapper .right .image{ margin: 0px 0px 20px; }

		/* Drawings page */
		.drawings-page #images .box { width: 100%; }
		
}

@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) and (orientation:portrait)
{
	/* Story page */
	.story-page #content .wrapper .right{ width: 71%; }
	.story-page #content .wrapper .left .image:first-child{ margin: 0px 0px 40px; }

	/* Events page */
	#reading iframe{ height: 250px !important; }
}

@media handheld, only screen and (max-width: 380px), only screen and (max-device-width: 380px) and (orientation:portrait)
{
	/* Events page */
	#reading iframe{ height: 200px !important; }
}