/* Mobile / tablet adaptation. Desktop (wider than 1000px) is untouched. */

@media (max-width: 1000px) {

	html, body {
		height: auto;
	}

	#main {
		min-width: 0;
		margin: 0;
	}

	.push {
		display: none;
	}

	.wrapper {
		width: auto;
		padding: 0px 16px;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* header */
	#header {
		height: auto;
		margin: 16px 0px 0px 0px;
	}

	.logo {
		margin: 0px 0px 12px 0px;
	}

	.nav {
		clear: both;
	}

	.nav ul li {
		margin: 0px 8px 8px 0px;
	}

	/* long work names in the breadcrumb are cut instead of wrapping */
	.nav ul li span em b a {
		max-width: 190px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* homepage slider: jCarouselLite copies the first slide's height into inline styles,
	   which is 0 here, so the height is fixed; the slider goes under the header as on desktop */
	#projects {
		margin: -100px 0px 0px 0px;
	}

	#projects #slider ul li {
		height: 470px !important;
	}

	#projects #slider .slide,
	#projects #slider .slide table {
		height: 470px;
	}

	#projects #slider .slide table td {
		height: 470px;
		padding: 100px 16px 60px 16px;
		vertical-align: middle;
		text-align: center;
	}

	#projects #slider .slide table td img {
		max-height: 300px;
		width: auto;
	}

	#projects #slider .slide div {
		bottom: 16px;
	}

	#projects #slider .slide div h1,
	#projects #slider .slide div h2 {
		width: auto;
		padding: 0px 16px;
		font-size: 26px;
	}

	#projects .prev-slide,
	#projects .next-slide {
		top: 120px;
	}

	#projects .prev-slide p,
	#projects .next-slide p {
		display: none;
	}

	/* homepage texts under the slider */
	.project-info,
	.project-description,
	.banner {
		float: none;
		width: auto;
		margin: 0px 0px 20px 0px;
	}

	#content {
		padding: 30px 0px;
	}

	/* two-column pages */
	.left-column,
	.right-column {
		float: none;
		width: auto;
	}

	.menu {
		margin: 0px 0px 24px 0px;
	}

	.company-strategy {
		float: none;
		width: auto;
		margin: 0px 0px 30px 0px;
		padding: 0;
	}

	.company-strategy:after,
	.menu:after,
	.left-column:after {
		content: "";
		display: block;
		clear: both;
	}

	h1.page-title {
		font-size: 26px;
	}

	/* portfolio list */
	.projects-list {
		float: none;
		width: auto;
	}

	.projects-list ul:after {
		content: "";
		display: block;
		clear: both;
	}

	.projects-list ul li {
		float: left;
		width: 46%;
		margin: 15px 8% 0px 0px;
	}

	.projects-list ul li:nth-child(2n) {
		margin-right: 0;
	}

	.projects-list ul li:nth-child(2n+1) {
		clear: left;
	}

	.projects-list ul li div {
		width: 100%;
		height: auto;
	}

	/* about */
	.vacancy,
	.company,
	.public-relations,
	.testimonials {
		float: none;
		width: auto;
		margin: 0px 0px 24px 0px;
		padding: 0;
	}

	.stylemix {
		float: none;
		margin: 0px 0px 20px 0px;
	}

	/* contacts */
	.contact-info {
		float: none;
		width: auto;
	}

	.stamp {
		margin: 0;
	}

	.popup,
	.popup-wrap,
	.popup-content {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	.contact-form .input,
	.contact-form .textarea {
		width: 100%;
		box-sizing: border-box;
	}

	/* footer */
	#footer {
		height: auto;
		padding: 20px 0px;
	}

	.copyright,
	.address {
		float: none;
		width: auto;
		margin: 0px 0px 10px 0px;
	}

	/* portfolio work pages: desktop collages of absolutely positioned blocks become one column */
	#content .project {
		float: none;
		height: auto !important;
		display: flex;
		flex-direction: column;
	}

	#content .project > div {
		position: static !important;
		width: auto !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
		margin: 0px 0px 20px 0px !important;
		padding: 0 !important;
		float: none !important;
	}

	/* nested blocks and captions are positioned absolutely too */
	#content .project * {
		position: static !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
	}

	#content .project div[class*="block"] {
		width: auto !important;
		height: auto !important;
		margin: 0px 0px 20px 0px !important;
		float: none !important;
	}

	#content .project h1.visually-hidden {
		position: absolute !important;
	}

	#content .project > h1 {
		order: -2;
	}

	/* text first, then pictures */
	#content .project > div[class^="tblock"] {
		order: -1;
	}

	#content .project > div[class^="tblock"] ~ div[class^="tblock"] {
		order: 0;
	}

	#content .project img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* icon and picture grids made with tables: cells flow and wrap */
	#content .project table,
	#content .project tbody,
	#content .project tr {
		display: block;
		width: auto !important;
	}

	#content .project td {
		display: inline-block;
		vertical-align: top;
		max-width: 100%;
		width: auto !important;
		height: auto !important;
	}

	/* slideshows inside works: all pictures one under another */
	#content .project ul,
	#content .project ol {
		position: static !important;
		width: auto !important;
		height: auto !important;
	}

	#content .project ul li,
	#content .project ol li {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		width: auto !important;
		height: auto !important;
		margin: 0px 0px 12px 0px !important;
	}

	#content .project .prev,
	#content .project .next {
		display: none !important;
	}

	/* decorative desktop-only elements */
	.face-banner,
	.saxophone_element {
		display: none !important;
	}
}