@media only screen and (max-width: 1200px) {
	body, header { overflow-x: hidden; }	
	main { width: 96%; max-width: 96%; }
}

@media only screen and (max-width: 1000px) {
	#about { flex-direction: column; }
	#about #message { max-width: 96%; }
	#about #joel, #about #mireille { width: 96%; min-height: 25vw; align-self: flex-start; }
	#about #joel { align-self: flex-end; }
	#about #mireille .box { right: unset; left: 0; text-align: left; }
	#about #joel .box { left: unset; right: 0; text-align: right; }
	#about #mireille::after, #about #joel::after, #about #mireille:hover::after, #about #joel:hover::after { bottom: -50%; }
	.thumbnails .image, img.image, #film img, #film a { max-width: 12vw; height: auto; }
	.display_media img { max-width: 65vw; }
}

@media only screen and (max-width: 900px) {
	footer { padding-top: 20px; }
	footer ul#cred { flex-direction: column; gap: 0; }
	footer ul#cred li { width: 100%; text-align: left; }
	footer ul#cred li::after { content: ''; margin: 15px auto; width: 100%; height: 1px; background: #141414; display: block; position: relative; }
	footer ul#cred li:last-child::after, footer ul#cred li a::before { display: none; }
	footer ul#cred li a:hover, footer ul#cred li a:focus { color: #ffd6b5; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); }
}

@media only screen and (max-width: 800px) {
	header { background-size: 200%; height: calc(100vw - 52vw); }
	.categories { min-width: unset; height: 10vh; background-size: contain; }
	main { margin-top: 30px; }
	.albtable .tableh2, .thumbnails { padding-left: 10px; padding-right: 10px; }
	.thumb_title_views::after { content: '\A'; white-space: pre; }
	.catrow_noalb, .catrow { gap: 0; }
	.catrow .catdescbox { gap: 15px; }
	.catrow .catdescbox .catdesc { padding: 10px; }
	.catrow .catdescbox .catinfo .pic::after { margin-left: -15px; width: calc(100% + 15px); }
	.catrow a:link .image { display: none; }
	.buttonlist ul {margin: 0; padding: 0; }
	.button, .buttonlist ul li a { margin: 1px 0; padding: 2px; }
	/*
    #tabsMenu .navmenu a { display: none!important; }
    #tabsMenu .navmenu span { display: block!important; }
	.navmenu, .navmenu1 { padding: 15px 1px; }
	.navmenu a, .navmenu1 a { margin: 0; }
	.sortorder_options { font-size: 100%; }
	.stath1 { font-size: 10px; }
	*/
}

@media only screen and (max-width: 700px) {	
	#about #joel { display: none; }
	#about #mireille { min-height: 20vw; }
}

@media only screen and (max-width: 640px) {	
	body { font-size: 11px; }
	#smenu, .breadh1, .catrow .catdescbox .catinfo .alb, .stats, .stath1, .stath2, .navmenu { font-size: 8px; }
	.catrow .catdescbox .catinfo { width: 23vw; }
	#about #mireille { display: none; }
	#about #message p::after { margin-top: 13px; right: 0; display: block; }
}

@media only screen and (max-width: 560px) {	
	body { font-size: 11px; }
	.thumbnails { padding: 15px 0; }
}

@media only screen and (max-width: 480px) {	
	.image { margin: 5px 0; }
}

@media screen and (max-height: 450px), screen and (max-width: 640px) {
	nav.menubox .mbox { margin-top: 0; }
	nav.menubox .mbox ul.menu { width: 85%; }
	nav.menubox .mbox ul.menu li { padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
	nav.menubox .closebtn { font-size: 40px; top: 15px; right: 35px; }
}