body { background-color: #222; }
header .header-logo { background-image: url(/i/graphite-logo-inverse.svg); background-repeat: no-repeat; }
header .header-logo img { visibility: hidden; }
header .header-brief-button a { border-color: #fff; color: #fff; }

footer { color: #777; }
footer a { color: #aaa; }

.work-header p { color: #aaa; }

.browser { background-color: #000; }

#work-podolskkabel { color: #fff; }
#work-podolskkabel section { margin: 15vh 0; }
#work-podolskkabel section .grid-2-gap { margin: 0 auto; max-width: 1600px; }

#work-podolskkabel .work-header p.work-www a { color: #fff; }
#work-podolskkabel .work-header p.work-www a:after { filter: invert(1); }

#podolskkabel-sitemap {
	background-color: #333;
	color: #aaa;
	padding: 10vh 0;
	text-align: center;
}
#podolskkabel-sitemap img {
	margin-bottom: 2em;
	max-width: 1600px;
	width: 90%;
}

#work-podolskkabel .image-scroller {
    margin: 5vh 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#work-podolskkabel .image-scroller-pictures {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    position: relative;
    transition: .2s all;
    width: fit-content;
}
#work-podolskkabel .image-scroller-pictures > div { min-width: 8vw; }
#work-podolskkabel .image-scroller-pictures img {
	display: block;
	filter: drop-shadow(50px 40px 15px #111);
	transform: translateY(10px);
	transition: .2s transform;
}
#work-podolskkabel .image-scroller-pictures img:hover { transform: translateY(0); }

.mobile-screens {
	display: flex;
	margin-bottom: 1em;
}
.mobile-screens div { position: relative; transition: 1s all; }
.mobile-screens div:nth-child(1) { transform: translateX(90%) translateY(-10px); z-index: 4; }
.mobile-screens div:nth-child(2) { transform: translateX(30%) translateY(0); z-index: 3; }
.mobile-screens div:nth-child(3) { transform: translateX(-30%) translateY(10px); z-index: 2; }
.mobile-screens div:nth-child(4) { transform: translateX(-90%) translateY(20px); z-index: 1; }

.mobile-screens.active div:nth-child(1),
.mobile-screens.active div:nth-child(2),
.mobile-screens.active div:nth-child(3),
.mobile-screens.active div:nth-child(4) { transform: translateX(0); }

.mobile-screens img {
	display: block;
	max-width: 100%;
}