@media only screen and (max-width: 1600px) {

	*[w50-l] {
		width: 100%;
	}

	*[flex-l] {
		display: block;
	}

	showreel-sidebar {
		margin-top: 0.5vw;
		padding-top: 0;
	}
}

@media only screen and (max-width: 1100px) {

	container {		
		font-size: 5vw;
		width: 75%;
		margin: 10vw auto;
	}

	nav left {
		display: none;
	}

	nav right {
		display: none;
	}

	nav {
		margin: 0;
		align-items: flex-start;
		align-self: flex-start;
	}

	nav name {
		align-self: flex-start;
	}

	nav name space {
		width: 3vw;
	}

	menu-toggle {
		display: inline;
		flex-direction: column;
		margin: auto;
		width: 6vw;
		height: 1vw;
		float: right;
		padding-bottom: 2.6vw;
		padding-left: 2.6vw;
		cursor: pointer;
	}

	menu-toggle line {
		display: inline-flex;
		align-self: flex-start;
		flex: 0 0 30px;
		width: 6vw;
		height: 0.6vw;
		background: #bbb;
		border-radius: 8px;
		margin-bottom: 0.8vw;
	}

	menu-toggle:hover line {
		background: #333;
	}

	categories-wrapper {
		display: block;
	}

	categories {
		width: 100%;
		margin: 0;
		user-select: none;
		padding: 5px;	
		white-space: normal !important;	
	}

	*[category] {
		background: #eee;
		cursor: pointer;
		padding: 4px 22px;
		font-size: 120%;
		width: 100%;
		white-space: nowrap !important;
	}

	*[category][active] {
		border: 2px solid #333 !important;
		border-radius: 3px;
		background: #fff;
	}

	*[my-picture] {
		width: 50vw !important;
		height: 50vw !important;
		border-radius: 200vw !important;
	}

	showreel-sidebar {
		background: transparent;
		padding: 0;
		border: none !important;
	}

	showreel-video {
		margin-top: 20vw;
	}

	showreel-backdrop {
		height: 40vw;
	}

	video-controls {
		top: -10vw;
	}

	*[video-control] {		
		font-size: 5vw;
	}

	*[spotify-link] svg {
		width: 10vw !important;
		height: 10vw !important;
	}

	video-controls-container[playing] {
		opacity: 1 !important;
	}

	albums {
		display: block;
	}

	album-preview img {
		width: 100%;
		height: auto;
		margin-top: 30px;
	}

	album-cover {
		width: 100%;
	}

	album-cover img {
		width: 100%;
		height: auto;
	}

	*[annotation-controls] {
		display: inline;
		position: static;
	}

	ruler[nav-ruler] {
		display: none;
	}

	*[brand] {
		width: 25vw;
		height: 25vw;
	}

	grid {
		display: block;
	}

	*[w50],
	*[w75],
	*[w25], 
	*[w33], 
	*[w66] {
		display: block;
		width: auto;
		text-align: left !important;
	}

	*[desktop-only] {
		display: none;
	}


	*[credits] li {
		white-space: nowrap;
		text-overflow: clip;
		overflow: visible;
		width: 100%;
		padding: 5px 15px 5px 15px;
	}
}

@media only screen and (max-width: 768px) {

	container {		
		width: 90%;
	}

}