#menu__toggle {opacity: 0}

.text-about h1, .text-about p {font-family: "Roboto Flex", sans-serif; font-weight: 400}
.text-about p {margin-bottom: 1em}
.text-about a {text-decoration: none; color: #06c; border-bottom: 1px solid #d5e0f3}
.text-about a:hover {color: #1d49b1}

.about-image-wrapper img {width: 100%; height: 100%; object-fit: cover; object-position: center}

nav {font-family: "Roboto Flex", sans-serif; transition: height 0.25s; background: #fff}
.menu-wrap {transition: all 0.5s}

nav a {
	padding: 4px 0;
	text-decoration: none;
	color: #000;
	font-weight: 400;
	display: block
}

nav a:hover {color: #06c; font-weight: 700}

nav > a:first-child {padding-top: 0}

.menu-selected {
	margin: 8px 0;
	text-decoration: none;
	color: #000;
	font-weight: 700;
}

.submenu li {
	font-family: "Roboto Flex", sans-serif;
	font-size: 80%;
	margin: 0 0 5px 0;
	padding: 0
}

.submenu a {
	font-size: 100%;
	margin: 0;
	padding: 0;
	display: inline
}

.subselected {font-weight: 700; font-size: 100%}

.grid-container > div > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.25s ease-in-out
}

.grid-container > div { overflow: hidden; display: inline-block }
.grid-container > div > a > img:hover {transform: scale(1.04)}

.first-headshot {width: 100%; margin-bottom: 3em}
.first-food {width: 100%; margin-bottom: 2em}
.first-packshot {width: 100%; margin: 2em 0 4em 0}
.grid-packshot {justify-content: center}
.first-reportage {width: 100%; margin-bottom: 2%}
.hotel-interiors img {width: 100%; margin-bottom: 2%}

/** ------------------------- MOBILE VERSION ------------------------- **/
@media (max-width: 767px) {
#menu__toggle:checked ~ .menu__btn > span {transform: rotate(45deg)}
#menu__toggle:checked ~ .menu__btn > span::before {top: 0; transform: rotate(0)}
#menu__toggle:checked ~ .menu__btn > span::after {top: 0; transform: rotate(90deg)}
#menu__toggle:checked ~ nav ul {max-height: 100%; padding: 15px 0; transition: all 0.5s; background-color: #fff; box-shadow: 0px 5px 10px rgba(0, 0, 0, .1)}
#menu__toggle:checked ~ nav {border-top: 1px solid #eee}

.menu__btn {display: flex; align-items: center; position: absolute; top: 15px; right: 14px; width: 26px; height: 26px; cursor: pointer; z-index: 1}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {display: block; position: absolute; width: 100%; height: 2px; background-color: #000; transition-duration: .25s}
.menu__btn > span::before {content: ''; top: -8px}
.menu__btn > span::after {content: ''; top: 8px}

.text-about {margin: 4%; text-align: center}
.text-about h1 {font-size: 3.5em}
.text-about p {font-size: 1.5em}

.menu-wrap {display: flex; justify-content: space-between; height: 60px}
.logo {width: 200px; margin-top: 12px}
.menu-space {width: 20px}

nav {position: absolute; top: 60px; left: 0; width: 100%; font-size: 135%; text-align: center; z-index: 2}
nav ul {max-height: 0px; overflow: hidden; margin: 0 auto}

.left {display: none}
.submenu {margin: -10px auto 0; box-shadow: none !important; background: none !important}
.submenu li {font-size: 70%}
.mobile-footer {margin: 5em 0 1em; width: 100%; text-align: center; font: 80% "Roboto Flex", sans-serif; color: #666}

.first-headshot {margin: 4.5em 0 3em; transform: scale(1.25)}
.mobile-headshot-zoom {overflow-x: hidden}
.first-packshot {padding-left: 1%; box-sizing: border-box; margin: 2em 0}
.first-reportage {margin-bottom: 2%}
.main {margin: 0 !important; padding: 0 !important}
.grid-container {margin-top: 4px}
.grid-packshot {margin-top: 0}
.menu-footer {display: none}
}


/** ------------------------- SMALL SCREENS ------------------------- **/
@media (min-width: 768px) {
nav {position: relative}
nav ul {margin-left: 20px; list-style-type: none}

.left {min-width: 210px; flex-grow: 0; flex-shrink: 0}
.main-about {display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding-right: 35px !important; max-width: 1350px !important}

.menu {
	min-width: 210px;
	height: 100%;
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	overflow-x: hidden;
	flex-grow: 0; flex-shrink: 0;
	margin: 0;
	font-size: 100%
}
.submenu {margin: 5px 0 1em 25px}
.submenu li {margin-bottom: 5px}
.submenu li:before {content: "–"; position: relative; left: -8px}
.shifted-left {margin-left: 15px}

.logo {width: 170px; margin: 25px 0 20px 20px}

.text-about {margin: 0; text-align: left}
.text-about h1 {font-size: 3.25em}
.text-about p {font-size: 1.25em}

.main {
	flex-grow: 1;
	padding: 15px 15px 15px 5px;
	background-color: #fff;
	max-width: 2000px;
	height: 100%
}
.video-wrapper {display: flex}

.grid-container {
	margin-top: 5px;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
}
.menu-footer {position: absolute; bottom: 20px; margin-left: 20px; font: 75% "Roboto Flex", sans-serif; color: #666; z-index: -1}
.mobile-footer {display: none}

}

/** ------------------------- LARGE SCREENS ------------------------- **/
@media (min-width: 1300px) {
	.logo {max-width: 202px; width: 100%; height: auto; margin: 35px 0 30px 30px}
	.main {padding: 25px}
	.left {min-width: 257px}
	.menu {min-width: 257px; font-size: 125%}
	.menu a {padding: 8px 0}
	nav ul {margin-left: 30px}
	.submenu li {margin-bottom: 10px}
	.menu-footer {margin-left: 30px; font-size: 65%}
	.main-about {gap: 35px}
	.text-about h1 {font-size: 4.5em}
	.text-about p {font-size: 1.5em}
}




.grid-car-interiors, .hotel-interiors { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)) }

@media (min-width: 1527px) and (max-width: 1936px) {.pano-real-estate > div:last-child {display: none}}


/** ----------------------- REPORTAGE ----------------------- **/
.grid-reportage-3, .grid-reportage-6 {margin-bottom: 3%}

@media (min-width: 768px) {
.grid-reportage-3, .grid-reportage-6 {grid-template-columns: repeat(3, 1fr); grid-gap: 5px}

.grid-reportage-3 > div:nth-child(1) {border-radius: 15px 0 0 15px }
.grid-reportage-3 > div:nth-child(3) {border-radius: 0 15px 15px 0 }

.grid-reportage-6 > div:nth-child(1) {border-radius: 15px 0 0 }
.grid-reportage-6 > div:nth-child(3) {border-radius: 0 15px 0 0 }
.grid-reportage-6 > div:nth-child(4) {border-radius: 0 0 0 15px }
.grid-reportage-6 > div:nth-child(6) {border-radius: 0 0 15px 0 }
}
/** ------------------------- **/



/** ----------------------- PACKSHOT ----------------------- **/
.grid-packshot {
	grid-gap: 35px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr) )
}
.grid-packshot > div > a > img { 
	max-width: 250px;
	max-height: 250px;
}
@media (max-width: 599px) { .grid-packshot {padding: 0 10%} .grid-packshot > div > a > img {max-width: 500px; max-height: 500px} }

@media (min-width: 600px) and (max-width: 767px) { .grid-packshot { display: grid; text-align: center; grid-gap: 45px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) } }
@media (min-width: 768px) and (max-width: 1049px) { .grid-packshot { display: grid; grid-gap: 35px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) } }

@media (min-width: 690px) and (max-width: 767px) {
.grid-packshot > div:nth-child(49) {display: none}
.grid-packshot > div:nth-child(50) {display: none} }

@media (min-width: 830px) and (max-width: 1649px) {
.grid-packshot > div:nth-child(49) {display: none}
.grid-packshot > div:nth-child(50) {display: none} }

@media (min-width: 1936px) and (max-width: 2220px) {
.grid-packshot > div:nth-child(49) {display: none}
.grid-packshot > div:nth-child(50) {display: none} }
@media (min-width: 2221px) { .grid-packshot > div:nth-child(49) {display: none} }
/** ----------------------- **/



/** ------------------------- FOOD ------------------------- **/
@media (min-width: 600px) and (max-width: 1299px) {
.grid-food { display: grid; grid-gap: 30px; grid-template-columns: repeat(3, 1fr) }
.grid-food > div:nth-child(16) {display: none}
}
@media (min-width: 1527px) and (max-width: 1936px) { .grid-food > div:nth-child(16) {display: none} }
/** ------------------------- **/



/** ----------------------- HEADSHOTS ----------------------- **/
.grid-headshots {
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr) );
	text-align: center
}
.grid-headshots > div > a > img {max-width: 500px; max-height: 500px}

@media (max-width: 767px) {.grid-headshots {grid-template-columns: auto} .grid-headshots > div > a > img {max-width: 600px; max-height: 600px} }
@media (min-width: 768px) and (max-width: 1396px) {.grid-headshots {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))}; grid-headshots > div > a > img {max-width: 400px; max-height: 400px} }
@media (min-width: 1397px) {.grid-headshots {grid-gap: 20px}; grid-headshots > div > a > img {max-width: 500px; max-height: 500px}}

@media (min-width: 1150px) and (max-width: 1766px) { .grid-headshots > div:last-child {display: none} }
@media (min-width: 1767px) and (max-width: 2136px) { .grid-headshots > div:nth-child(9), .grid-headshots > div:nth-child(10) {display: none} }
/** ----------------------- **/

.portrait-interiors {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))}	/** not used **/

@media (min-width: 1527px) and (max-width: 1936px) { .grid-advertising > div:nth-child(10) {display: none} }
@media (min-width: 1937px) {
.grid-advertising > div:nth-child(9) {display: none}
.grid-advertising > div:nth-child(10) {display: none} }

@media (min-width: 1075px) and (max-width: 1527px) { .pano-outdoors > div:last-child {display: none} }
@media (min-width: 1937px) { .pano-outdoors > div:last-child {display: none} }

@media (min-width: 1075px) and (max-width: 1527px) { .pano-retail > div:last-child {display: none} }
@media (min-width: 1937px) { .pano-retail > div:last-child {display: none} }

@media (min-width: 1075px) and (max-width: 1527px) { .pano-sports > div:nth-child(8) {display: none} }
@media (min-width: 1937px) { .pano-sports > div:nth-child(8) {display: none} }

@media (min-width: 1075px) and (max-width: 1527px) { .pano-office > div:last-child {display: none} }
@media (min-width: 1937px) { .pano-office > div:last-child {display: none} }

@media (min-width: 1827px) { .hotel-interiors > div:nth-child(4) {display: none} }

.video > h2 {margin: .75em 0 0 0; font-family: "Roboto Flex", sans-serif; font-size: 150%; text-align: center}
.video > p {margin: .25em 0 5em 0; font-family: "Roboto Flex", sans-serif; font-size: 120%; text-align: center}
.video > p:last-child {margin-bottom: 2em}
.video > div {width: 100%; height: 80vh}
@media (max-width: 1199px) { .video > div {height: 70vh} }

.h {display: none}