@CHARSET "ISO-8859-1";

#horaires .mobile
{
	display: none;
}

@media (max-width: 1400px) {

	.mobile
	{
		display: block;
	}

	.desktop
	{
		display: none;
	}
	
	.m-justify
	{
		text-align: justify;
	}
	
	#wrapper
	{
		width: auto;
		padding: 0;
		background-size: contain;
	}
	
	h1
	{
		font-size: 2.5em;
		text-align: center;
		line-height: 0.9em;
		margin-bottom: 8px;
	}
	
	h1 .sub
	{
		font-size: 0.7em;
		line-height: 1.2em;
	}
	
	h1.contrast
	{
		line-height: 0.65;
	}
	
	h2, h3
	{
		font-size: 30px;
	}
	
  	#menu li
	{
		display: list-item;
		text-align: center;
	}
	
	#menu
	{
		display: none;
		position: absolute;
		margin-bottom: 10px;
		background: #333;
	}
	
	#submenu
	{
		position: initial;
		padding: 10px;
	}
	
	#submenu nav ul
	{
		width: 100%;
		padding: 0;
		margin: 0;
	}
	
	#horaires
	{
		height: 128px;
		z-index: 999;
	}
	
	#horaires .social ul
	{
		justify-content: space-around;
	}
	
	#submenu nav li
	{
		margin-bottom: 8px;
	}
	
	#menu nav, #submenu nav
	{
		margin: 0 10px;
	}
	
	#title nav a
	{
		font-size: 80%;
		line-height: 1.2em;
	}
	
	.inspacer
	{
		/*padding-top: 30vh;*/
	}
	
	.box
	{
		margin: 0 20px;
		padding: 0;
	}
	
	.photo-scene
	{
		min-height: 45vh;
		padding-bottom: 10px;
	}

	.bg-holder
	{
		bottom: 0;
		height: auto;
	}

	body > header, body > header > div
	{
		height: initial;
	}
	
	form ul li, form ul li label, form ul li .input, form textarea
	{
		display: block;
		width: 100%;
		text-align: left;
	}
	
	section
	{
		margin-top: 20px;
	}
	
	section#bio 
	{
		margin: 0;
	}
	
	.filelist .preview
	{
		width: 40%;
	}
	
	#social.scrolling
	{
		right: -250px;
		transition: right 1s ease 0s;
	}
	
	#menu.scrolling
	{
		display: none;
	}
	
	#title
	{
		width: 100%;
		right: auto;
		padding-bottom: 20px;
	}
	
	#bio aside, .network-card aside
	{
		width: 100%;
	}
	
	#horaires
	{
		height: auto;
	}

	#horaires .menu-block .social, #horaires .menu-block .menu
	{
		display: none;
	}

	.menu-toggle button
	{
		background: transparent;
		display: block;
		padding: 0;
		width: 32px;
	}

	#horaires .menu-toggle.on+.social, #horaires .menu-toggle.on+*+.menu
	{
		display: inherit;
		margin-top: 8px;
	}
	
	#horaires .mobile
	{
		display: block;
	}

	#horaires .desktop
	{
		display: none;
	}
	
	#horaires .menu ul
	{
		display: block;
	}

	#horaires .menu li
	{
		padding-top: 0.8em;
	}

	#horaires .menu li:last-child
	{
		padding-bottom: 0.8em;
	}
	
	#horaires > div > *
	{
		display: block;
		text-align: right;
	}
	
	#horaires > div > *:first-child
	{
		text-align: left;
	}
	
	body > header #diaporama
	{
		height: 100vh;
	}
	
	#studiopics
	{
		height: auto;
		justify-content: flex-start;
		align-content: center;
		width: 100%;
		padding: 16px;
	}
	
	#studiopics img, #studiopics > div, #studio #montage
	{
		margin: 5px;
		min-width: auto;
		max-width: none;
		width: 100%;
		max-height: none;
	}
	
	#studiopics img, #studiopics picture
	{
		max-width: 100%;
	}
	
	#montage iframe
	{
		margin: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}
	
	#avis .group
	{
		width: 300%;
		overflow: hidden;
	}
	
	picture
	{
		text-align: center;
	}
	
	.flex.colgroup, .noflex
	{
		display: block;
	}
	
	.noflex > div
	{
		flex: unset;
		margin-bottom: 16px;
	}
	
	.colgroup > div
	{
		border: 0;
	}

	.flex-row > .card
	{
		flex-basis: 50%;
	}
	
	.network-card .pres
	{
		flex-direction: column;
	}

	#montage
	{
		max-height: 180px;
	}
	
	#contact form
	{
		width: auto;
	}
	
	footer > div, footer .ri
	{
		display: block;
		text-align: left;
	}
	
	#cookieprivacy
	{
		height: 200px;
		left: 0;
		right: 0;
		bottom: auto;
		top: 0;
		position: absolute;
		width: auto;
	}
	
	#cookieprivacy button
	{
		display: block;
		margin: 5px auto;
	}
	
	.playlist
	{
		grid-template-columns: repeat(2, 1fr);
	}
	
	.grid-2
	{
		grid-template-columns: repeat(1, 1fr);
	}

	.grid-3
	{
		/*grid-template-columns: repeat(1, 1fr);*/
	}

	.m-grid-1
	{
		grid-template-columns: repeat(3, 1fr);
		width: 300%;
	}
	
	#title nav a
	{
		max-width: 45vw;
	}
	
	#top audio, #top video
	{
		max-width: 90vw;
	}
	
	#title span
	{
		display: block;
		margin: auto;
	}
	
	#title h1
	{
		max-width: 90%;
		margin: auto;
	}
	
	.grid-8
	{
		grid-template-columns: repeat(3, 1fr);
	}
	
	.flex-row
	{
		flex-wrap: wrap;
		max-width: 100%;
	}
	
	#bio .feed
	{
		width: 100%;
		flex-basis: 100%;
	}
	
}