@media only screen and (max-width: 1200px) {
	body, header { overflow-x: hidden; }	
	main, #affiliates { width: 96%; max-width: 96%; }
}

@media only screen and (max-width: 1000px) {
	#projects .proj .status { font-size: 48px; }
	#projects .proj .synopsis { max-width: 70%; }
	.featured { width: 22vw; max-width: 200px; }
	article .post .entrybox { flex-direction: column; gap: 15px; }
	article .entrybox .entry img { max-width: 15vw; height: auto; }
	article .entrybox .pinfo { width: 100%; max-width: 100%; display: flex; align-items: center; }
	article .entrybox .pinfo .date { margin-right: 12px; padding-left: 15px; padding-right: 15px; display: inline-block; white-space: nowrap; }
	article .entrybox .pinfo ul.post-categories { margin-top: 0; }
	article .entrybox .pinfo ul.post-categories li { display: inline-block; }
	article .entrybox .pinfo ul.post-categories li::after { content: '—'; margin: 0 5px; width: auto; height: auto; background: none; color: #858585; display: inline-block; float: none; }
	article .entrybox .pinfo ul.post-categories li:last-child::after { display: none; }
	#about .execphpwidget { flex-direction: column; }
	#about #message { margin: 0 auto; max-width: 96%; }
	#about #joel, #about #mireille { width: 96%; min-height: 25vw; align-self: flex-start; }
	#about #mireille { align-self: flex-end; }
	#about #joel .box { right: unset; left: 0; text-align: left; }
	#about #mireille .box { left: unset; right: 0; text-align: right; }
	#about #joel::after, #about #mireille::after, #about #joel:hover::after, #about #mireille:hover::after { bottom: -50%; }
}

@media only screen and (max-width: 900px) {
	#projects .proj ul.links li { width: 20%; }	
	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: #c9a00e; -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); }
	#projbox h2 { font-size: 210px; }
	main { margin: 30px auto; }
	.featured, #latest, article.rel, #affiliates { display: none; }
	article .postbox, article .postbox h1.title, article .postbox h2 { max-width: 100%; }
}

@media only screen and (max-width: 700px) {	
	#projbox, #about #mireille { display: none; }
	#about #joel { min-height: 20vw; }
}

@media only screen and (max-width: 640px) {	
	body { font-size: 11px; }
	article .postbox h1.title, article .postbox h2 { font-size: 18px; }	
	article .entrybox .pinfo .date { font-size: 10px; }
	#latest, #about #joel { display: none; }
	#about #message p::after { margin-top: 13px; right: 0; display: block; }
}

@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; }
}