html {
	scroll-behavior: smooth;
}
html, body {
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}
body {
	font-family: 'Montserrat';
	/*background: url('../media/bgCc.jpg') no-repeat fixed bottom left/cover;*/
}
p {
	margin: 1em;
	line-height: 1.7;
	text-align: justify;
}
a {
	color: inherit;
	text-decoration: none;
}
	a:hover {
		text-decoration: underline;
	}
h1 {
	display: inline-block;
	margin-bottom: 3em;
	border: 3px solid;
	padding: 1em 1.2em;
	text-align: center;
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 2px;
}
	/*.dark h1 {
		border-color: #eee;
	}*/
iframe {
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.2);
}
.section {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	border-top: 3px solid;
	padding: 3em 0 6em 0;
	text-align: center;
	background: no-repeat fixed bottom left/cover;
}
	.section:nth-of-type(odd) {
		/*background: url('../media/noise.png') fixed, url('../media/bg-light.jpg') no-repeat fixed bottom left/cover;*/
		background-image: url('../media/bg-light.jpg');
		background-color: #eee;
		color: #1a1a1a;
		border-color: #1a1a1a;
	}
	.section:nth-of-type(even) {
		background-image: url("../media/bg-dark.jpg");
		background-color: #1a1a1a;
		color: #eee;
		border-color: #eee;
	}
	.section:last-of-type {
		padding-bottom: 3em;
	}
/* 1. Section */
header {
  position: relative;
  height: 100vh;
  overflow: hidden;
	background: url('../media/noise.png'), url("../media/home/bg.jpg") no-repeat center top/cover;
	background-color: #1a1a1a;
	background-attachment: fixed;
}
  /*header:after {
		position: fixed;
    content: "";
    display: block;
    width: 100%; height: 100%;
    background: url("../media/noise.gif");
    opacity: 0.1;
    animation: noise-256 1.5s steps(4) infinite;
	}*/
  @keyframes noise-256 {
    0%, 100% { background-position: 0 0 }
    25% { background-position: 128px 0 }
    50% { background-position: 0 128px }
    75% { background-position: 128px 128px }
  }
  @keyframes noise-1920 {
    0%, 100% { background-position: 0 0 }
    25% { background-position: 960px 0 }
    50% { background-position: 0 640px }
    75% { background-position: 960px 640px }
  }
  @keyframes show-up {
    0% { opacity: 0 }
    100% { opacity: 0.1 }
  }
	.bottom-align {
		width: 100%;
		position: absolute;
		bottom: 0;
	}
  header #logo {
    display: inline-block;
    width: 100px; height: 61px;
    margin-left: 4.2em;
    vertical-align: middle;
    background: url('../media/logo-small.gif');
    display: none;
	}
body > #logo {
  position: fixed;
  width: 300px; height: 183px;
  top: 50%; left: 10%;
	margin-top: -91.5px;
	background: url('../media/logo-large.png') no-repeat;
}
#logo-600 {
  width: 600px; height: 364px;
  top: 50%; left: 10%;
	margin: 0 auto 182px auto;
	background: url('../media/logo-600.png') no-repeat;
	display: none;
}
body.floatinglogo > #logo {
  position: absolute;
	mix-blend-mode: hard-light;
}
	body.floatinglogo > #logo:after {
		position: fixed;
		content: "";
		width: 300px; height: 50vh;
    top: 0; left: 10%;
		background: linear-gradient(to top, transparent 183px, gray 100%);
		pointer-events: none
	}
header .social {
	width: 360px; height: 48px;
	margin: 24px 24px;
	position: fixed;
	top: 0; right: 0;
	mix-blend-mode: hard-light;
}
nav .social {
	width: 100%; height: 96px;
	margin-top: 96px;
	left: 0;
	text-align: center;
	display: none;
}
body.socialatbottom .social {
	top: unset;
	bottom: 0;
}
.social a {
	display: inline-block;
	margin: 0 12px;
}
nav .social a {
	margin: 0 24px;
}
	.social .icon {
		display: inline-block;
		width: 48px; height: 48px;
		background-position: center left;
		background-repeat: no-repeat;
		opacity: 0.2;
		cursor: pointer;
	}
	nav .social .icon {
		width: 96px; height: 96px;
		background-size: cover;
		opacity: 1;
	}
	.social a:hover .icon {
		opacity: 1;
	}
	.social .icon.facebook {
		background-image: url('../media/home/facebook.png');
	}
		/*#social a:hover .icon.facebook {
			background-image: url('../media/home/facebook-hollow.png');
		}*/
	.social .icon.instagram {
		background-image: url('../media/home/instagram.png');
	}
		/*#social .icon.instagram:hover {
			background-image: url('../media/home/instagram-hollow.png');
		}*/
	.social .icon.soundcloud {
		background-image: url('../media/home/soundcloud.png');
	}
		/*#social .icon.soundcloud:hover {
			background-image: url('../media/home/soundcloud-hollow.png');
		}*/
	.social .icon.spotify {
		background-image: url('../media/home/spotify.png');
	}
	 	/*#social .icon.youtube:hover {
			background-image: url('../media/home/spotify-hollow.png');
		}*/
	.social .icon.youtube {
		background-image: url('../media/home/youtube.png');
	}
	 	/*#social .icon.youtube:hover {
			background-image: url('../media/home/youtube-hollow.png');
		}*/
.message {
	display: none;
	width: 100%;
	height: 64px;
	position: absolute;
	bottom: 0;
	line-height: 64px;
	font-weight: 500;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	opacity: 0;
	animation-duration: 3s;
	animation-delay: 1s;
	animation-name: popup;
}
.message.active {
	display: block;
}
@keyframes popup {
	0%, 100% { opacity: 0 }
	25% { opacity: 1 }
	75% { opacity: 1 }
}
/* 2. Works */
#works {
	/*background: url('../media/bg-dark.jpg') no-repeat fixed center top/cover;*/
}
#works .list {
	margin: 0 auto;
}
@media screen and (max-width: 1299px) {
	#works .list {
		width: 480px;
	}
}
@media screen and (min-width: 1300px) {
	#works .list {
		width: 1440px;
	}
}
@media screen and (min-width: 1900px) {
	#works .list {
		width: 1440px;
	}
}
.cover {
	display: block;
	width: 960px;
	min-height: 480px;
	margin: 48px auto 144px auto;
	padding: 0 0 0 480px;
	position: relative;
	/*line-height: 240px;*/
	/*vertical-align: top;*/
	background-position-x: left;
	background-position-y: top;
	background-size: 480px;
	background-repeat: no-repeat;
	background-color: transparent;
	/*cursor: pointer;*/
	transition: background-position-x 0.35s;
	/*border-bottom: 3px solid;*/
}
	.cover:hover {
		background-position-x: left;
	}
@media screen and (max-width: 1899px) {
	#works .cover {
		width: 480px;
	}
}
@media screen and (max-width: 1299px) {
	#works .cover {
		width: 480px;
		padding: 0;
	}
	.cover:nth-of-type(1) {
		margin-top: 0;
	}
}
.cover:nth-of-type(even) {
	padding: 0 480px 0 0;
	background-position-x: right;
}
.cover p {
	margin: 1em 0 1em 2em;
}
.cover div p {
	display: inline-block;
}
	.cover:nth-of-type(even) p {
		margin: 1em 2em 1em 0;
	}
@media screen and (max-width: 1299px) {
	.cover p {
		margin: 1em !important;
	}
}
.cover .info {
	/*margin-left: 2em;*/
	text-align: left;
}
	.cover:nth-of-type(even) .info {
		/*margin-left: 0;*/
	}
.cover .links {
	/*margin: 0 0 0.5em 2em;*/
	/*position: absolute;
	bottom: 0;*/
	text-align: left;
}
	.cover:nth-of-type(even) .links {
		/*margin-left: 0;*/
	}
	.cover .links p {
		margin-bottom: 0.5em;
	}
.cover .overlay {
	width: 100%; height: 100%;
	position: absolute;
	line-height: 500px;
	background-color: #1a1a1a80;
	opacity: 0;
	transition: opacity 0.2s;
}
	.cover:hover .overlay {
		opacity: 1;
	}
.cover .title {
	width: 100%; height: 50%;
	line-height: 250px;
}
.cover h2, h3 {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0 1em;
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.cover h2 {
	font-size: 32px;
	font-weight: 700;
	vertical-align: bottom;
	/*transform: translateY(50px);*/
	/*transition: transform 0.2s;*/
}
	.cover:hover h2 {
		transform: translateY(0);
	}
@media screen and (max-width: 1299px) {
	.cover h2 {
		padding: 0;
	}
}
.cover h3 {
	font-size: 20px;
	font-weight: 300;
	vertical-align: top;
	opacity: 0;
	transition: opacity 0.2s;
	opacity: 1;
	margin-bottom: 1em;
}
	.cover:hover h3 {
		opacity: 1;
	}
@media screen and (min-width: 1300px) {
	#animetod {
		background-image: url('../media/works/animetod.jpg');
	}
	#invent_arena {
		background-image: url('../media/works/invent_arena.jpg');
	}
	#plzenske_oslavy {
		background-image: url('../media/works/plzenske_oslavy.jpg');
	}
	#muzeum_plesna {
		background-image: url('../media/works/muzeum_plesna.jpg');
	}
	#skleneny_zverinec {
		background-image: url('../media/works/skleneny_zverinec.jpg');
	}
	#meczyki_pl {
		background-image: url('../media/works/meczyki_pl.jpg');
	}
	#glos_brandysa {
		background-image: url('../media/works/glos_brandysa.jpg');
	}
	#urdiamant {
		background-image: url('../media/works/urdiamant.jpg');
	}
	#glos_news {
		background-image: url('../media/works/glos_news.jpg');
	}
	#neumelkyne {
		background-image: url('../media/works/neumelkyne.jpg');
	}
	#polski_sport_na_zaolziu {
		background-image: url('../media/works/polski_sport_na_zaolziu.jpg');
	}
	#architektura_v_betonu_10 {
		background-image: url('../media/works/architektura_v_betonu_10.jpg');
	}
	#architektura_v_betonu_8 {
		background-image: url('../media/works/architektura_v_betonu_8.jpg');
	}
	#architektura_v_betonu_7 {
		background-image: url('../media/works/architektura_v_betonu_7.jpg');
	}
	#architektura_v_betonu_2 {
		background-image: url('../media/works/architektura_v_betonu_2.jpg');
	}
	#ostrava_fashion_weekend_2016 {
		background-image: url('../media/works/ostrava_fashion_weekend_2016.jpg');
	}
	#andele_avdijevky {
		background-image: url('../media/works/andele_avdijevky.jpg');
	}
}
@media screen and (max-width: 1299px) {
	.cover h2::after {
		content: "";
		display: block;
		width: 480px;
		height: 480px;
		margin-top: 1em;
	}
	#animetod h2::after {
		background: url('../media/works/animetod.jpg');
	}
	#invent_arena h2::after {
		background: url('../media/works/invent_arena.jpg');
	}
	#plzenske_oslavy h2::after {
		background: url('../media/works/plzenske_oslavy.jpg');
	}
	#muzeum_plesna h2::after {
		background: url('../media/works/muzeum_plesna.jpg');
	}
	#skleneny_zverinec h2::after {
		background: url('../media/works/skleneny_zverinec.jpg');
	}
	#meczyki_pl h2::after {
		background: url('../media/works/meczyki_pl.jpg');
	}
	#glos_brandysa h2::after {
		background: url('../media/works/glos_brandysa.jpg');
	}
	#urdiamant h2::after {
		background: url('../media/works/urdiamant.jpg');
	}
	#glos_news h2::after {
		background: url('../media/works/glos_news.jpg');
	}
	#neumelkyne h2::after {
		background: url('../media/works/neumelkyne.jpg');
	}
	#polski_sport_na_zaolziu h2::after {
		background: url('../media/works/polski_sport_na_zaolziu.jpg');
	}
	#architektura_v_betonu_10 h2::after {
		background: url('../media/works/architektura_v_betonu_10.jpg');
	}
	#architektura_v_betonu_8 h2::after {
		background: url('../media/works/architektura_v_betonu_8.jpg');
	}
	#architektura_v_betonu_7 h2::after {
		background: url('../media/works/architektura_v_betonu_7.jpg');
	}
	#architektura_v_betonu_2 h2::after {
		background: url('../media/works/architektura_v_betonu_2.jpg');
	}
	#ostrava_fashion_weekend_2016 h2::after {
		background: url('../media/works/ostrava_fashion_weekend_2016.jpg');
	}
	#andele_avdijevky h2::after {
		background: url('../media/works/andele_avdijevky.jpg');
	}
}
/* 3. Media */
#media iframe {
	width: 1280px;
}
@media screen and (max-width: 1899px) {
	#media iframe {
		width: 960px;
	}
}
@media screen and (max-width: 1299px) {
	#media iframe {
		width: 480px;
	}
}
/* 4. Bio */
#bio {
	background: url('../media/noise.png'), url('../media/bio/bg.jpg?v=3') no-repeat center center/cover;
}
#bio p {
	width: 960px;
	margin: 0 auto;
	columns: 3;
	column-gap: 2em;
}
@media screen and (max-width: 1299px) {
	#bio p {
		width: 480px;
		columns: 1;
	}
}
/* 5. Contact */
#contact {
	/*min-height: 480px;*/
	/*padding: 0;*/
}
.column {
	display: inline-block;
	width: 600px;
	padding: 2em 0;
	vertical-align: top;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	text-transform: uppercase;
}
	.column.padleft {
		box-sizing: border-box;
		padding-left: 100px;
	}
#contact .icon {
	display: block;
	padding-left: 60px;
	line-height: 60px;
	background-position: center left;
	background-repeat: no-repeat;
	cursor: pointer;
}
a.facebook {
	background-image: url('../media/contact/facebook.png');
}
	a.facebook:hover {
		background-image: url('../media/contact/facebook-hollow.png');
	}
a.instagram {
	background-image: url('../media/contact/instagram.png');
}
	a.instagram:hover {
	background-image: url('../media/contact/instagram-hollow.png');
}
a.soundcloud {
	background-image: url('../media/contact/soundcloud.png');
}
	a.soundcloud:hover {
		background-image: url('../media/contact/soundcloud-hollow.png');
	}
a.spotify {
	background-image: url('../media/contact/spotify.png');
}
	a.spotify:hover {
		background-image: url('../media/contact/spotify-hollow.png');
	}
a.youtube {
	background-image: url('../media/contact/youtube.png');
}
	a.youtube:hover {
		background-image: url('../media/contact/youtube-hollow.png');
	}
form {
	width: 600px;
	margin: 0;
}
input, textarea, button {
	margin: 0.5em 0;
	border: none;
	padding: 1em;
	line-height: 1.5;
	font-family: inherit;
	letter-spacing: 2px;
}
input, textarea {
	width: 100%;
	background: rgba(26, 26, 26, 0.2);
}
button {
	margin-top: 3em;
	border: 3px solid #1a1a1a;
	font-weight: 500;
	text-transform: uppercase;
	background: transparent;
	cursor: pointer;
}
button:hover {
	background: #1a1a1a;
	color: #eee;
}
/* Footer */
footer {
	width: 100%;
	position: relative;
	top: -64px;
	font-size: 11px;
	text-align: center;
	line-height: 64px;
	letter-spacing: 2px;
	background: #1a1a1a;
	color: #eee;
}
footer em {
	line-height: 16px;
	font-size: larger;
	font-style: normal;
}
.ulabs {
	display: block;
	width: 55px; height: 32px;
	position: absolute;
	right: 0px;
	margin: 16px;
	background: url('../media/ulabs.gif');
	text-align: right;
}
/* Navigation */
nav {
  float: right;
	position: fixed;
	height: 100vh;
  top: 50%; right: 0px;
  margin-top: -160px;
  text-align: left;
  text-transform: uppercase;
  font-family: 'Montserrat';
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
}
	nav a {
		display: inline-block;
		line-height: 32px;
		margin-right: 2em;
		text-decoration: none;
		color: #777;
	}
	nav ul a:before {
		position: absolute;
		width: 100%; height: 1px;
		bottom: 0;
		background: #fff;
		content: "";
		transition: all .2s ease-in-out 0s;
		transform: scaleX(0);
	}
	nav a:hover {
		color: #fff;
		text-decoration: none;
	}
		nav ul a:hover:before {
			color: #fff;
			transform: scaleX(1);
		}
	nav a.current {
		color: #fff;
	}
		nav ul a.current:before {
			transform: scaleX(1);
		}
  nav ul {
    margin: 0;
    padding: 0;
    vertical-align: middle;
  }
  nav li {
    display: block;
    position: relative;
    margin: 0 1.2em;
	}
	nav .language {
		margin: 1.2em;
	}
		nav .language a {
			margin: 0 1.5em 0 0;
		}
		nav .language a.active {
			color: #fff;
			cursor: default;
		}
.nav {
	width: 96px; height: 96px;
	position: fixed;
	top: 32px; left: 32px;
	background: #1a1a1a url('../media/menu.png') center no-repeat;
	opacity: 0.2;
	display: none;
}
.nav.open {
	opacity: 1;
}
/* Navigation - IDs */
	body.home #link-home {
		color: #fff;
	}
		body.home #link-home:before {
			transform: scaleX(1);
		}
	body.works #link-works {
		color: #fff;
	}
		body.works #link-works:before {
			transform: scaleX(1);
		}
	body.media #link-media {
		color: #fff;
	}
		body.media #link-media:before {
			transform: scaleX(1);
		}
	body.bio #link-bio {
		color: #fff;
	}
		body.bio #link-bio:before {
			transform: scaleX(1);
		}
	body.contact #link-contact {
		color: #fff;
	}
		body.contact #link-contact:before {
			transform: scaleX(1);
		}