/*
Theme Name: Spolecne urzitelne
Theme URI: 
Author: infocount.cz
Author URI: https://infocount.cz/
Description: Theme for project Spolecne urzitelne
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spolecne-urzitelne-theme
*/

:root {
	--black: #303030;
	--white: #ffffff;
	--bg1: #25554b;
	--bg2: #f8f6f5;
	--bg3: #e9f0ee;
	--bg4: #ebbec5;
	--svg1: #43ab8c;
	--svg2: #2f5d53;
	--text1: #246755;
	--text2: #ff7059;
	--text3: #e9f0ee;
	--text4: #474747;
	--text5: #9f9f9f;
	--line1: #6b8c85;
	--line2: #dddbda;
	--line3: #bdd0cb;
	--underline1: #315e55;
	--underline2: #e3e8e7;
	--underline3: #f1f5f4;
}

@font-face {
	font-family: 'Area';
	font-weight: 200;
	src: url('webfonts/Area-ExtralightInktrapExtended.otf') format('opentype');
}

html, body, form, h1, h2, h3, h4, ul, li, p, button {
	margin: 0;
	padding: 0;
}

body, h1, h2, h3, h4, div, label, p, li, a, button {
	color: var(--black);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
}

body {
	background-color: var(--bg2);
}

strong {
	font-weight: 500;
}

a {
	color: var(--text2);
	text-decoration: none;
}
a:hover {
	color: var(--text1);
	text-decoration: none;
}

ul {
	list-style-type: none;
}

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

.container {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	padding: 60px 20px;
	margin: 0 auto;
}
.short .container {
	max-width: none;
}

.notitle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* header */

header {
	position: absolute;
	width: 100%;
	background-color: var(--bg1);
	z-index: 5;
}
header::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid var(--line1);
}

header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 60px;
	padding-bottom: 0;
}

header .brand {
	margin-bottom: 10px;
	z-index: 1;
}
header .brand a {
	display: block;
	width: 219px;
	height: 62px;
	overflow: hidden;
	text-indent: -99999px;
	background: url("img/logo.png") left no-repeat;
}
header .brand a:hover {
	filter: brightness(0) invert(1);
}

header nav {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 110px;
}

header .primary {
	display: flex;
	gap: 20px;
	justify-content: flex-end;
	align-items: center;
}
header .search .primary {
	display: none;
}
header .primary a {
	display: block;
	color: var(--white);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
	text-transform: uppercase;
	padding: 5px 10px;
}
header .primary a:hover {
	color: var(--text2);
}

header .top {
	position: absolute;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	top: 0;
	right: 20px;
	width: calc(100% - 40px);
	height: 60px;
}
header .top::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid var(--line1);
}
header .top a {
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	padding: 5px 10px;
}
header .top a:hover {
	color: var(--white);
}
header .top li:last-child a {
	padding-right: 0;
}

header form {
	position: relative;
	display: flex;
	gap: 20px;
	z-index: 1;
}
header input {
	display: none;
	width: 450px;
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 18px;
	line-height: 30px;
	background-color: var(--white);
	padding: 9px 19px;
	border-radius: 25px;
	border: 1px solid var(--bg3);
	outline: none;
}
header input:focus {
	outline: none;
}
header input::placeholder {
	color: var(--text5);
}
header .search input {
	display: block;
}
header button {
	position: relative;
	cursor: pointer;
	width: 20px;
	text-indent: -99999px;
	background-color: unset;
	overflow: hidden;
	border: none;
	outline: none;
}
header button::before {
	position: absolute;
	content: "\f002";
	left: 0;
	right: 0;
	color: var(--white);
	font-family: 'FontAwesome';
	text-align: center;
	text-indent: 0;
}
header button:hover::before {
	color: var(--text2);
}

header .results {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	right: 40px;
	background-color: var(--white);
	padding: 50px 20px 10px 20px;
	border-radius: 25px;
	z-index: -1;
}
header .search form.active .results {
	display: block;
}
header .results a {
	position: relative;
	display: block;
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	padding: 10px 0;
}
header .results a:hover {
	color: var(--text2);
}
header .results a::after {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid var(--bg3);
}
header .results a:last-child::after {
	content: none;
}

header .mobile {
	display: none;
}
header .mobile strong {
	position: relative;
	cursor: pointer;
	display: block;
	top: 0;
	right: 0;
	width: 70px;
	height: 50px;
	background-color: var(--underline3);
	border-radius: 25px;
}
header .mobile span {
	position: absolute;
	display: block;
	top: 15px;
	left: 0;
	right: 0;
	bottom: 15px;
	width: 30px;
	height: 3px;
	background-color: var(--bg1);
	margin: auto;
}
header .mobile span:nth-child(1) {
	bottom: auto;
}
header .mobile span:nth-child(2) {
	height: 4px;
}
header .mobile span:nth-child(3) {
	top: auto;
}
header .mobile strong:hover span {
	background-color: var(--text2);
}
header.active .mobile span {
	display: none;
	top: 0;
	bottom: 0;
	transition: transform .5s ease;
}
header.active .mobile span:first-child {
	display: block;
	transform: rotate(45deg);
}
header.active .mobile span:last-child {
	display: block;
	transform: rotate(-45deg);
}

header.light {
	background-color: var(--bg3);
}
header.light::before {
	border-color: var(--line3);
}
header.light .brand a {
	background-image: url("img/logo2.png");
}
header.light .brand a:hover {
	filter: brightness(0);
}
header.light .primary a {
	color: var(--text1);
}
header.light .primary a:hover {
	color: var(--text2);
}
header.light .top::before {
	border-bottom: 1px solid var(--line3);
}
header.light .top a:hover {
	color: var(--text1);
}
header.light button::before {
	color: var(--text1);
}
header.light button:hover::before {
	color: var(--text2);
}
header.light .mobile strong {
	background-color: var(--svg1);
}
header.light .mobile strong:hover {
	background-color: var(--text2);
}
header.light .mobile span, header.light .mobile strong:hover span {
	background-color: var(--white);
}

header.fixed, .short header {
	position: fixed;
}
header.fixed .container, .short header .container {
	padding-top: 0;
}
header.fixed .brand a, .short header .brand a {
	background-size: 80%;
}
header.fixed nav, .short header nav {
	height: 90px;
}
header.fixed .top, .short header .top {
	display: none;
}

/* main */

main {
	background-color: var(--bg2);
	padding-top: 150px;
}
.short main {
	padding-top: 90px;	
}

main .header {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 40px;
}

main .header h1, main .header h2 {
	color: var(--text1);
	font-family: 'Area', sans-serif;
	font-size: 30px;
	font-weight: 200;
	line-height: 50px;
	padding: 0 20px 5px 20px;
	margin: 0 -20px;
	overflow: hidden;
}
main .header h1 span, main .header h2 span {
	background-image: linear-gradient(var(--underline2), var(--underline2));
	background-repeat: no-repeat;
	background-position: 0 20px;
	background-size: 100% 20px;
	box-shadow: 10px 45px 0 var(--bg2), 10px 20px 0 var(--underline2), -10px 45px 0 var(--bg2), -10px 20px 0 var(--underline2);
	box-decoration-break: clone;
}

main .header h3 a {
	display: inline-block;
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	text-transform: uppercase;
	padding: 5px 20px;
	border: 1px solid var(--text2);
	border-radius: 20px;
}
main .header h3 a:hover {
	color: var(--white);
	background-color: var(--text2);
}

main .tags, main .sort {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
main .tags li, main .tags li span, main .header .tags a, main .sort a {
	display: block;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	text-transform: uppercase;
}

main .info span {
	color: var(--text5);
	font-family: 'Roboto Mono', sans-serif;
}
main .info .date::before {
	content: "››";
	color: var(--text2);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}
main .info .author::before, main .info .time::before {
	content: "|";
	padding-right: 5px;
}

main .button a {
	display: inline-block;
	color: var(--white);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 28px;
	text-align: center;
	text-transform: uppercase;
	background-color: var(--text2);
	padding: 10px 20px;
	border-radius: 25px;
}
main .button a:hover {
	background-color: var(--svg1);
}

main .items .image {
	position: relative;
	overflow: hidden;
}
main .items a:hover .image {
	background-color: var(--black);
}
main .items a:hover .image img {
	opacity: .75;
}
main .items a:hover .image::after {
	position: absolute;
	display: block;
	content: "\2b";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	color: var(--white);
	font-family: 'FontAwesome';
	font-size: 50px;
	text-align: center;
	line-height: 50px;
	margin: auto;
	opacity: .75;
}

main .items .text h3 {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
}
main .items a:hover .text h3 {
	color: var(--text2);
}
main .items .info {
	margin-bottom: 15px;
}
main .items .text p {
	font-size: 14px;
	line-height: 24px;
}

main .section {
	background-color: var(--white);
}
main .section .container {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
main .section section {
	flex: 0 0 calc(33.333334% - 2*40px/3);
}
main .section .header h2 span {
	background-image: linear-gradient(var(--underline3), var(--underline3));
	box-shadow: 10px 45px 0 var(--white), 10px 20px 0 var(--underline3), -10px 45px 0 var(--white), -10px 20px 0 var(--underline3);
}

/* home */

#home {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* path */

#path {
	background-color: var(--bg3);
	overflow: hidden;
}

#path .container {
	padding-top: 80px;
}
#path .container.character::before {
	position: absolute;
	content: "";
	top: 0;
	right: -400px;
	width: 500px;
	height: 850px;
	background-color: var(--underline3);
	transform: translateY(-20%);
}

#path .header {
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 0;
}
#path .header h1 {
	color: var(--text1);
}
#path .header h1 span {
	background-image: linear-gradient(var(--underline3), var(--underline3));
	box-shadow: 10px 45px 0 var(--bg3), 10px 20px 0 var(--underline3), -10px 45px 0 var(--bg3), -10px 20px 0 var(--underline3);
}
#path .header p {
	font-size: 22px;
	font-weight: 300;
	line-height: 33px;
}

#path .header .tags span {
	background-color: var(--bg2);
	padding: 5px 10px;
	border-radius: 15px;
}
#path .header .tags a {
	color: var(--text2);
	padding: 5px 10px;
	border: 1px solid var(--text2);
	border-radius: 15px;
}
#path .header .tags .active a {
	color: var(--white);
	background-color: var(--text2);
}
#path .header .tags a:hover {
	color: var(--white);
	background-color: var(--svg1);
	border-color: var(--svg1);
}

#path .header .sort {
	margin: -10px 0;
}
#path .header .sort a {
	position: relative;
	color: var(--black);
	background-color: var(--bg2);
	padding: 5px 10px 5px 25px;
	border-radius: 15px;
}
#path .header .sort a:hover {
	background-color: var(--white);
}
#path .header .sort a::before, #path .header .sort a::after {
	position: absolute;
	content: "";
	top: 0;
	left: 10px;
	bottom: 0;
	width: 10px;
	height: 2px;
	background-color: var(--black);
	margin: auto 0;
}
#path .header .sort a::before {
	transform: rotate(45deg);
}
#path .header .sort a::after {
	transform: rotate(-45deg);
}

#path .header .cats {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: -10px;
}
#path .header .cats a {
	display: block;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-transform: uppercase;
}
#path .header .cats .active a {
	color: var(--text5);
}
#path .header .cats a:hover {
	color: var(--text2);
}
#path .header .cats a::before {
	content: "››";
	color: var(--text2);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}
#path .header .cats .active a::before {
	color: var(--text5);
}

#path .header .button {
	display: flex;
	gap: 20px;
}

#path .image {
	flex: 0 0 50%;
}
#path .image img {
	width: 100%;
}

#path.half .container {
	display: flex;
	align-items: center;
	gap: 50px;
}
#path.half .header {
	flex: 0 0 calc(50% - 50px);
}

#path.theme {
	position: relative;
	background-size: 0;
	z-index: 0;
}
#path.theme::before {
	display: block;
	content: "";
	width: 100%;
	height: calc(100vh - 200px);
	min-height: 400px;
	background-image: inherit;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#path.theme::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--bg3);
	z-index: -1;
}
#path.theme .container, #path.company .container {
	display: flex;
	align-items: flex-end;
	gap: 50px;
}
#path.theme .header, #path.company .header {
	flex: 0 0 calc(75% - 50px);
}
#path.theme .cooperation, #path.company .cooperation {
	flex: 0 0 25%;
}
#path.theme .cooperation h2, #path.company .cooperation h2 {
	color: var(--text5);
	font-size: 14px;
	font-family: 'Roboto Mono', sans-serif;
	text-transform: uppercase;
	margin-bottom: 30px;
}
#path.theme .cooperation a:hover, #path.company .cooperation a:hover {
	opacity: .5;
}

#path.theme .button {
	position: absolute;
	top: -35px;
	left: 20px;
}
#path.theme .button a {
	font-size: 38px;
	font-weight: 400;
	line-height: 40px;
	padding: 15px 40px 15px 60px;
	border-radius: 35px;
}
#path.theme .button a.hooks::before {
	position: absolute;
	content: "";
	top: 0;
	left: 25px;
	bottom: 0;
	width: 32px;
	height: 33px;
	background-color: var(--white);
	margin: auto 0;
}

#path.e404 .header {
	height: calc(100vh - 350px);
	min-height: 300px;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* category */

#category .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

#category .button {
	margin-top: -85px;
}
#category .text {
	max-width: 600px;
	text-align: center;
}
#category .text p {
	font-size: 22px;
	font-weight: 300;
	line-height: 33px;
}

/* theme */

#theme {
	background-color: var(--bg1);
	overflow: hidden;
}

#theme .container {
	padding-top: 120px;
	padding-bottom: 0;
}
#theme .container::before {
	position: absolute;
	content: "";
	top: -10px;
	right: -400px;
	width: 500px;
	height: 850px;
	background-color: var(--svg1);
}

#theme article {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 60px;
}

#theme .image {
	position: relative;
	flex: 0 0 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}
#theme .image a {
	display: block;
	height: 100%;
}
#theme .image a:hover::before, #theme .image a:hover::after {
	position: absolute;
	display: block;
	width: 100%;
}
#theme .image a:hover::before {
	content: "";
	height: 100%;
	background-color: var(--black);
	opacity: .25;
}
#theme .image a:hover::after {
	content: "\2b";
	top: 0;
	bottom: 0;
	height: 50px;
	color: var(--white);
	font-family: 'FontAwesome';
	font-size: 50px;
	text-align: center;
	line-height: 50px;
	margin: auto;
	opacity: .75;
}
#theme .image img {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
}

#theme .text {
	flex: 0 0 calc(50% - 60px);
}
#theme .text p {
	color: var(--white);
	font-size: 22px;
	font-weight: 300;
	line-height: 34px;
	margin-bottom: 40px;
}

#theme .header {
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 20px;
}
#theme .header h2 {
	color: var(--white);
}
#theme .header h2 span {
	background-image: linear-gradient(var(--underline1), var(--underline1));
	box-shadow: 10px 45px 0 var(--bg1), 10px 20px 0 var(--underline1), -10px 45px 0 var(--bg1), -10px 20px 0 var(--underline1);
}
#theme .header h3 a {
	position: relative;
	color: var(--white);
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
	background-color: var(--text2);
	border: none;
	padding: 10px 20px 10px 40px;
	border-radius: 25px;
}
#theme .header h3 a:hover {
	background-color: var(--svg1);
}
#theme .header h3 a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 15px;
	bottom: 0;
	width: 21px;
	height: 23px;
	background-color: var(--white);
	margin: auto 0;
}

#theme.light {
	background-color: var(--bg3);
}
#theme.light .container::before {
	background-color: var(--underline3);
}
#theme.light .text p {
	color: var(--black);
}

#theme.light .header h2 {
	color: var(--text1);
}
#theme.light .header h2 span {
	background-image: linear-gradient(var(--underline3), var(--underline3));
	box-shadow: 10px 45px 0 var(--bg3), 10px 20px 0 var(--underline3), -10px 45px 0 var(--bg3), -10px 20px 0 var(--underline3);
}

/* themes */

#themes article {
	position: relative;
	margin-bottom: 100px;
}
#themes article:last-child {
	margin: 0;
}

#themes .tile_left, #themes .tile_right {
	display: flex;
	gap: 50px;
}
#themes .tile_right {
	flex-direction: row-reverse;
}
#themes .tile_left .text, #themes .tile_right .text {
	flex: 0 0 350px;
}
#themes .tile_left .image, #themes .tile_right .image {
	flex: 0 0 calc(100% - 400px);
	background-repeat: no-repeat;
	background-size: cover;
}
#themes .tile_left .image {
	background-position: right;
}
#themes .tile_right .image {
	background-position: left;
}

#themes .triple {
	position: relative;
}
#themes .triple.character::before {
	position: absolute;
	content: "";
	top: 0;
	left: -200px;
	width: 500px;
	height: 850px;
	background-color: var(--bg4);
}
#themes .triple .part {
	position: relative;
	background-size: 0;
	padding: 50px 0;
}
#themes .triple .part::before {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	right: 0;
	width: calc(50% - 50px/2);
	height: 100%;
	background-image: inherit;
	background-position: right;
	background-repeat: no-repeat;
	background-size: cover;
}
#themes .triple .parts {
	position: relative;
	display: flex;
	gap: 50px;
	padding-top: 50px;
}
#themes .triple .part .text {
	position: relative;
	max-width: 700px;
	background-color: var(--white);
	padding: 50px;
}
#themes .triple .parts .text {
	flex: 0 0 calc(50% - 50px/2);
}

#themes .citation {
	display: flex;
	flex-direction: column-reverse;
	gap: 30px;
}
#themes .citation .text {
	max-width: 600px;
	text-align: center;
	margin: 0 auto;
}
#themes .citation .text p {
	font-size: 22px;
	line-height: 32px;
}

#themes .article .text {
	background-color: var(--white);
	padding: 50px;
}

#themes .text h3 {
	font-family: 'Roboto Mono', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 38px;
	margin-bottom: 28px;
}
#themes .text p {
	font-size: 16px;
	font-weight: 300;
	line-height: 28px;
	margin-bottom: 28px;
}
#themes .text ul {
	margin-bottom: 28px;
}
#themes .text ul li::before {
	content: "››";
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}

#themes .image {
	background-color: unset;
}
#themes .image img {
	width: 100%;
}

#themes .button a {
	color: var(--text2);
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	background-color: unset;
	padding: 5px 20px;
	border: 1px solid var(--text2);
	border-radius: 20px;
}
#themes .button a:hover {
	color: var(--white);
	background-color: var(--text2);
}

/* banner */

section.banner .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
section.banner .container::after {
	content: "REKLAMA";
	font-size: 14px;
	font-family: 'Roboto Mono', sans-serif;
	color: var(--text5);
	opacity: .3;
}
section.banner .container a {
	display: block;
}

#banner1 .container {
	padding-bottom: 0;
}

#banner2 .container {
	padding-top: 0;
}

/* news */

#news .header {
	justify-content: center;
}

#news .items {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
#news .items .first {
	flex: 0 0 calc(50% - 175px);
	background-color: var(--white);
}
#news .items .other {
	flex: 0 0 calc(50% + 135px);
	display: flex;
	gap: 40px;
	flex-direction: column;
}
#news .items a {
	display: block;
}

#news .first:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
#news .first .image {
	background-size: 0;
}
#news .first .image::before {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	width: 100%;
	height: 100%;
	background-image: inherit;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#news .first:hover .image::before {
	opacity: .7;
}
#news .first .image div {
	height: 100%;
	padding-top: 66.666667%;
	background-color: var(--black);
}
#news .first .image img {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
}
#news .first .text {
	padding: 35px;
}
#news .first .text h3 {
	font-size: 22px;
	font-weight: 300;
	line-height: 32px;
}
#news .first .text p {
	font-size: 16px;
	line-height: 26px;
}

#news .other article {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 30px;
	height: 100%;
}
#news .other .image {
	flex: 0 0 270px;
}
#news .other .text {
	flex: 0 0 calc(100% - 300px);
}
#news .other .text h3 {
	font-size: 16px;
	line-height: 26px;
}

#news .tags {
	margin-bottom: 15px;
}
#news .tags li {
	background-color: var(--bg2);
	padding: 5px 10px;
	border-radius: 15px;
}
#news .other .tags li {
	background-color: var(--white);
}

/* conversations */

#conversations .container {
	padding-top: 0;
}

#conversations .items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#conversations .items a {
	flex: 0 0 calc(25% - 3*20px/4);
}
#conversations .items .first {
	flex-basis: 50%;
}
#conversations .items .other {
	flex: 0 0 calc(50% - 20px);
	display: flex;
}
#conversations .other a {
	flex-basis: 50%;
}
#conversations .first:hover {
	background-color: var(--white);
}

#conversations article {
	padding: 20px;
}
#conversations .first article {
	display: flex;
	border: 1px solid var(--line2);
}
#conversations .first .article {
	flex: 0 0 50%;	
}

#conversations .image {
	width: 150px;
	height: 150px;
	margin: 0 auto 15px auto;
	border-radius: 50%;
}
#conversations .image img {
	position: absolute;
	top: 0;
	left: 50%;
	max-width: none;
	max-height: 150px;
	transform: translateX(-50%);
}
#conversations a:hover .image::after {
	content: none;
}

#conversations .text {
	text-align: center;
}
#conversations .text h3 {
	margin-bottom: 0;
}
#conversations .text .job {
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	text-transform: uppercase;
}

#conversations .quote {
	flex: 0 0 50%;
	padding: 20px 0;
}
#conversations .quote p {
	font-family: 'Roboto Mono', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 32px;
}

/* conversation */

#conversation .items {
	position: relative;
}
#conversation .items.character::before {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	left: -200px;
	width: 500px;
	height: 345px;
	background-color: var(--bg4);
	-webkit-mask-position: top;
	margin: auto 0;
}

#conversation article {
	position: relative;
	margin-bottom: 50px;
}
#conversation article:last-child {
	margin: 0;
}

#conversation .quote {
	position: relative;
	display: flex;
	background-size: 0;
	padding: 35px 0;
	z-index: 0;
}
#conversation .quote::before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(33.333334% - 25px/2);
	background-image: inherit;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: -1;
}
#conversation .quote .text {
	position: relative;
	flex: 0 0 calc(66.666667% - 100px);
	font-size: 22px;
	font-weight: 300;
	line-height: 32px;
	background-color: var(--white);
	padding: 35px 35px 35px 135px;
}
#conversation .quote .text::before {
	position: absolute;
	content: "";
	top: 35px;
	left: 35px;
	width: 70px;
	height: 71px;
	background: url("img/citation.png") center no-repeat;
}

#conversation .head .title { 
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 38px;
	margin-bottom: 28px;
}

#conversation .text h2 {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 38px;
	margin-bottom: 28px;
}
#conversation .text h3 {
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	margin-bottom: 10px;
}
#conversation .text p {
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 26px;
}
#conversation .text ul {
	margin-bottom: 26px;
}
#conversation .text ul li::before {
	content: "››";
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}

#conversation .image {
	background-color: unset;
}
#conversation .image img {
	width: 100%;
}

#conversation .neighbours .items {
	display: flex;
	flex-wrap: wrap;
	margin: -20px;
}
#conversation .neighbours .items a {
	flex: 0 0 25%;
}
#conversation .neighbours a:hover {
	background-color: var(--white);
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
#conversation .neighbours .article {
	padding: 20px;
}
#conversation .neighbours .image {
	margin-bottom: 15px;
}
#conversation .neighbours .text h3 {
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
}
#conversation .neighbours .text p {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	margin-bottom: 0;
}

#conversation .sticker {
	display: flex;
	align-items: flex-start;
	gap: 25px;
	margin-top: -100px;
}
#conversation .sticker .main {
	flex: 0 0 calc(66.666667% - 25px/2);
	padding-top: 100px;
}
#conversation .sticker .sidebar {
	position: sticky;
	top: 0;
	left: 0;
	flex: 0 0 calc(33.333334% - 25px/2);
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding-top: 100px;
}

#conversation .job .link {
	display: inline-block;
	color: var(--text5);
	font-family: 'Roboto Mono', sans-serif;
	text-transform: uppercase;
}
#conversation .job a:hover .link {
	color: var(--text1);
}
#conversation .job .link::after {
	content: "|";
	color: var(--text5);
	padding-left: 5px;
}
#conversation .job h3 {
	display: inline-block;
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	margin: 0;
}
#conversation .job a:hover h3 {
	color: var(--text2);
}

#conversation .event .link {
	display: inline-block;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	text-transform: uppercase;
	background-color: var(--white);
	padding: 5px 10px;
	margin-bottom: 5px;
	border-radius: 15px;
}
#conversation .event h3 {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	margin: 0;
}
#conversation .event a:hover h3 {
	color: var(--text2);
}

#conversation .podcast h3 {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	margin: 0;
}
#conversation .podcast a:hover h3 {
	color: var(--text2);
}
#conversation .podcast .info {
	margin: 0;
}

/* project */

#project {
	position: relative;
}
#project::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	width: 50%;
	background-color: var(--white);
}
#project .container {
	background-color: var(--white);
	padding-bottom: 40px;
}

#project .header h2 span {
	background-image: linear-gradient(var(--underline3), var(--underline3));
	box-shadow: 10px 45px 0 var(--white), 10px 20px 0 var(--underline3), -10px 45px 0 var(--white), -10px 20px 0 var(--underline3);
}

#project .items {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
#project .items a {
	flex: 0 0 calc(50% - 40px/2);
}

#project article {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 30px;
}

#project .image {
	flex: 0 0 270px;
}
#project .image img {
	width: 100%;
}

#project .text {
	flex: 0 0 calc(100% - 300px);
}

#project .tags {
	margin-bottom: 15px;
}
#project .tags li {
	background-color: var(--bg2);
	padding: 5px 10px;
	border-radius: 15px;
}

/* podcast */

#podcast.neighbours .container {
	padding-top: 0;
}

#podcast .items {
	display: flex;
	flex-wrap: wrap;
	margin: -20px;
}
#podcast .items a {
	flex: 0 0 25%;
}
#podcast .items a:hover {
	background-color: var(--white);
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

#podcast article {
	padding: 20px;
}

#podcast .image {
	margin-bottom: 15px;
}
#podcast .image img {
	width: 100%;
}

/* webs */

#webs .items {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
#webs .items a {
	flex: 0 0 calc(50% - 40px/2);
	position: relative;
}
#webs .items a::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: -20px;
	border-bottom: 1px solid var(--line2);
}

#webs article {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 15px;
}

#webs .image {
	flex: 0 0 150px;
}

#webs .text {
	flex: 0 0 calc(100% - 165px);
	display: flex;
	flex-direction: column;
	gap: 15px;
}
#webs .text h3 {
	margin: 0;
}

#webs .link {
	flex: 0 0 100%;
	color: var(--text5);
	font-family: 'Roboto Mono', sans-serif;
	text-transform: uppercase;
}
#webs a:hover .link {
	color: var(--text2);
}
#webs .link::before {
	content: "››";
	color: var(--text2);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}

/* companies */

/* DELL */
.section #companies {
	flex-basis: calc(66.666667% - 40px/3);
}

#companies .items {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
/* ADD
.section #companies .items {
	flex-direction: column;
}
*/
#companies .items a {
	flex: 0 0 calc(33.333334% - 2*30px/3);
}
/* DELL */
.section #companies .items a {
	flex-basis: calc(50% - 40px/2);
}

#companies .items a:hover {
	background-color: var(--bg2);
}

#companies article {
	padding: 30px;
	border: 1px solid var(--line2);
}

#companies .image {
	margin-bottom: 20px;
}
#companies .image img {
	width: 100%;
}

#companies .text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}
#companies .text h3 {
	margin: 0;
}
#companies .text .link {
	display: inline-block;
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	text-transform: uppercase;
	padding: 5px 20px;
	border: 1px solid var(--text2);
	border-radius: 20px;
}
#companies a:hover .text .link {
	color: var(--white);
	background-color: var(--text2);
}

/* company */

#company {
	overflow: hidden;
}

#company .items {
	position: relative;
}
#company .items.character::before {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	right: -200px;
	width: 500px;
	height: 850px;
	background-color: var(--bg4);
	margin: auto 0;
}

#company article {
	position: relative;
	margin-bottom: 100px;
}
#company article:last-child {
	margin: 0;
}

#company .numbers {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	gap: 25px;
}
#company .numbers .table {
	position: relative;
	flex: 0 0 600px;
	display: flex;
	align-items: stretch;
}
#company .numbers .table::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid var(--line2);
}
#company .numbers .table .column {
	position: relative;
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-right: 1px solid var(--line2);
}
#company .numbers .table .column:last-child {
	border: none;
}
#company .numbers .table .column > div {
	text-align: center;
	padding: 20px;
}
#company .numbers .table .column:first-child > div {
	border-top: 1px solid var(--line2);
}
#company .numbers .table .column > div:first-child {
	border: none;
}
#company .numbers .table .column:last-child > div:last-child {
	padding-top: 0;
}
#company .numbers .table .desc {
	position: relative;
}
#company .numbers .table .desc::before {
	position: absolute;
	content: "";
	top: 20px;
	left: 10px;
	width: 70px;
	height: 71px;
	background: url("img/citation.png") center no-repeat;
	opacity: .25;
}
#company .numbers .table .label {
	color: var(--text5);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
}
#company .numbers .table .birth .val, #company .numbers .table .staff .val {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 36px;
	font-weight: 300;
	line-height: 42px;
}
#company .numbers .table .field .val {
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	text-transform: uppercase;
}
#company .numbers .table .desc .val {
	position: relative;
	font-family: 'Roboto Mono', sans-serif;
	font-weight: 300;
	text-align: left;
}
#company .numbers .image {
	flex: 0 0 calc(100% - 625px);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#company .tile_left, #company .tile_right {
	position: relative;
	display: flex;
	background-size: 0;
	padding: 25px 0;
	z-index: 0;
}
#company .tile_right {
	flex-direction: row-reverse;
}
#company .tile_noimage {
	padding: 0;
}
#company .tile_left::before, #company .tile_right::before {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	width: calc(33.333334% - 25px/2);
	background-image: inherit;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -1;
}
#company .tile_left::before {
	right: 0;
	background-position: right;
}
#company .tile_right::before {
	left: 0;
	background-position: left;
}
#company .tile_noimage::before {
	content: none;
}
#company .tile_left .text, #company .tile_right .text {
	flex: 0 0 calc(66.666667% + 75px);
	background-color: var(--white);
	padding: 25px;
}
#company .tile_noimage .text {
	flex-basis: calc(100% - 50px);
}
#company .tile_left .text h3, #company .tile_right .text h3 {
	font-family: 'Roboto Mono', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 38px;
	margin-bottom: 28px;
}

#company .gallery {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 25px;
}
#company .gallery .images {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
#company .gallery .images:nth-child(2n) {
	flex: 0 0 calc(33.333334% - 25px/2);
}
#company .gallery .images:nth-child(2n+1) {
	flex: 0 0 calc(66.666667% - 25px/2);
}
#company .gallery .images > div {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-top: 75%;
}
#company .gallery img {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
}

#company .jobs .head {
	display: flex;
	justify-content: space-between;
}
#company .jobs .social {
	display: flex;
	gap: 10px;
}
#company .jobs .social a {
	position: relative;
	display: block;
	width: 33px;
	height: 33px;
	overflow: hidden;
	text-indent: -99999px;
	background-color: var(--bg2);
	border: 1px solid var(--text2);
	border-radius: 50%;
}
#company .jobs .social a:hover {
	background-color: var(--text2);
}
#company .jobs .social a::after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: var(--text2);
	font-family: 'FontAwesome';
	font-size: 18px;
	line-height: 33px;
	text-indent: 0;
	text-align: center;
}
#company .jobs .social a:hover::after {
	color: var(--white);
}
#company .jobs .social .facebook a::after {
	content: "\f39e";
}
#company .jobs .social .instagram a::after {
	content: "\f16d";
}
#company .jobs .social .linkedin a::after {
	content: "\f0e1";
}
#company .jobs .social .threads a::after {
	content: "\e618";
}
#company .jobs .items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#company .jobs .items a {
	flex: 0 0 calc(50% - 20px/2);
}
#company .jobs .items a:hover .article {
	position: relative;
	padding-left: 40px;
}
#company .jobs .items a:hover .article::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	width: 20px;
	background-color: var(--text2);
}
#company .jobs h3 {
	display: inline-block;
	color: var(--text1);
	margin: 0;
}
#company .jobs a:hover h3 {
	color: var(--text2);
}
#company .jobs .link {
	display: inline-block;
	color: var(--text5);
	font-family: 'Roboto Mono', sans-serif;
	text-transform: uppercase;
}
#company .jobs a:hover .link {
	color: var(--text1);
}
#company .jobs .link::after {
	content: "|";
	color: var(--text5);
	padding-left: 5px;
}
#company .jobs .article p {
	font-size: 14px;
	line-height: 24px;
}

#company .events .items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#company .events .items a {
	flex: 0 0 calc(50% - 20px/2);
}
#company .events .items a:hover .article {
	position: relative;
	padding-left: 40px;
}
#company .events .items a:hover .article::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	width: 20px;
	background-color: var(--text2);
}
#company .events .link {
	display: inline-block;
	font-family: "Roboto Mono", sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	text-transform: uppercase;
	background-color: var(--white);
	padding: 5px 10px;
	margin-bottom: 5px;
	border-radius: 15px;
}
#company .events h3 {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
}
#company .events a:hover h3 {
	color: var(--text2);
}

#company .podcasts .items {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
#company .podcasts h3 {
	margin-bottom: 10px;
}
#company .podcasts h3 a {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
}
#company .podcasts h3 a::before {
	content: "››";
	color: var(--text2);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}
#company .podcasts h3 a:hover {
	color: var(--text2);
}
#company .podcasts iframe {
	width: 100%;
	height: 160px;
}

#company .quote {
	display: flex;
	gap: 35px;
	background-color: var(--white);
	padding: 35px;
}
#company .quote .text {
	position: relative;
	font-size: 22px;
	font-weight: 300;
	line-height: 32px;
	padding-left: 100px;
}
#company .quote .text::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 70px;
	height: 71px;
	background: url("img/citation.png") center no-repeat;
}
#company .quote .image {
	flex: 0 0 50%;
}

#company .accordion .items {
	border-top: 1px solid var(--line3);
}
#company .accordion .item {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line3);
}
#company .accordion .item:hover {
	background-color: var(--white);
}
#company .accordion .hooks {
	position: relative;
}
#company .accordion .hooks::before{
	position: absolute;
	content: "";
	top: 20px;
	right: 25px;
	width: 21px;
	height: 23px;
	background-color: var(--text2);
	transition: transform .5s ease;
	transform: rotate(90deg);
}
#company .accordion .active.hooks::before {
	transform: rotate(-90deg);
}
#company .accordion .name {
	position: relative;
	cursor: pointer;
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	padding: 20px 75px 20px 25px;
}
#company .accordion .name:hover {
	color: var(--text2);
}
#company .accordion .text {
	height: 0;
	padding: 0 25px;
}
#company .accordion .active .text {
	height: auto;
}

#company .map {
	position: relative;
}
#company .map::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 64px;
	height: 95px;
	background: url("img/map-marker-red-big.svg") no-repeat;
	transform: translateY(-46px);
	margin: auto;
}
#company .map iframe {
	pointer-events: none;
	height: 300px;
}

#company .neighbours .items {
	display: flex;
	flex-wrap: wrap;
	margin: -20px;
}
#company .neighbours .items a {
	flex: 0 0 25%;
}
#company .neighbours a:hover {
	background-color: var(--white);
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
#company .neighbours .article {
	padding: 20px;
}
#company .neighbours .image {
	margin-bottom: 15px;
}
#company .neighbours .text h3 {
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
}
#company .neighbours .text p {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	margin-bottom: 0;
}

#company .head .title { 
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 38px;
	margin-bottom: 28px;
}

#company .text p {
	font-size: 16px;
	font-weight: 300;
	line-height: 28px;
	margin-bottom: 28px;
}
#company .text ul {
	margin-bottom: 28px;
}
#company .text ul li::before {
	content: "››";
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}

#company .image {
	background-color: unset;
}
#company .image img {
	width: 100%;
}

#company .button a {
	color: var(--text2);
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	background-color: var(--bg2);
	padding: 5px 20px;
	border: 1px solid var(--text2);
	border-radius: 20px;
}
#company .tile_left .button a, #company .tile_right .button a {
	background-color: var(--white);
}
#company .button a:hover {
	color: var(--white);
	background-color: var(--text2);
}

/* jobs */

#jobs .items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#jobs .items a {
	flex: 0 0 100%;
}

#jobs .text h3 {
	display: inline-block;
	margin: 0;
}
#jobs .text .link {
	display: inline-block;
	color: var(--text5);
	font-family: 'Roboto Mono', sans-serif;
	text-transform: uppercase;
}
#jobs a:hover .text .link {
	color: var(--text1);
}
#jobs .text .link::after {
	content: "|";
	color: var(--text5);
	padding-left: 5px;
}

/* events */

#events .items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#events .items a {
	flex: 0 0 100%;
}

#events .text h3 {
	margin: 0;
}
#events .text .link {
	display: inline-block;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	text-transform: uppercase;
	background-color: var(--bg2);
	padding: 5px 10px;
	margin-bottom: 5px;
	border-radius: 15px;
}

/* map */

#map .container {
	display: flex;
	flex-direction: row-reverse;
	height: calc(100vh - 140px);
	padding: 0;
}

#map .header {
	display: none;
}

#map .map {
	flex: 0 0 calc(100% - 500px);
}
#map .map iframe {
	width: 100%;
	height: 100%;
}

#map .items {
	flex: 0 0 500px;
	overflow-y: auto;
}

#map article {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
}
#map article::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid var(--line2);
}

#map .image {
	flex: 0 0 120px;
}

#map .text {
	display: flex;
	flex-direction: column;
	gap: 5px;	
}

#map .text h4 {
	color: var(--text5);
	font-family: 'Roboto Mono', sans-serif;
	text-transform: uppercase;
}
#map .text h4::before {
	content: "››";
	color: var(--text2);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}
#map .text .tags li {
	background-color: var(--white);
	padding: 5px 10px;
	border-radius: 15px;
}

.leaflet-pane {
	z-index: 4;
}

.leaflet-container .leaflet-control-attribution a {
	font-size: 12px;
	line-height: 1.5;
}

/* posts */

#posts .header {
	margin-bottom: 0;
}
#posts.search .header {
	margin-top: 60px;
	margin-bottom: 20px;
}
#posts.search .header:first-child {
	margin-top: 0;
}

#posts .items {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

#posts .first article {
	display: flex;
	align-items: stretch;
	gap: 30px;
	background-color: var(--white);
}
#posts .first .image {
	flex: 0 0 calc(50% - 30px/2);
	background-size: 0;
}
#posts .first .image::before {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	width: 100%;
	height: 100%;
	background-image: inherit;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#posts .first:hover .image::before {
	opacity: .7;
}
#posts .first .image div {
	height: 100%;
	padding-top: 66.666667%;
	background-color: var(--black);
}
#posts .first .image img {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
}
#posts .first .text {
	flex: 0 0 calc(50% - 30px/2 - 30px);
	padding: 30px 30px 30px 0;
}
#posts .first .text h3 {
	font-size: 22px;
	font-weight: 300;
	line-height: 33px;
}
#posts .first .text p {
	font-size: 16px;
	font-weight: 300;
	line-height: 28px;
	padding-top: 20px;
}

#posts .other {
	display: flex;
	flex-wrap: wrap;
	gap: 60px 30px;
}
#posts .other > a {
	flex: 0 0 calc(50% - 30px/2);
}
#posts .other article {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}
#posts .other .image {
	flex: 0 0 150px;
}
#posts .other .text {
	flex: 0 0 calc(100% - 180px);
}

#posts .tags li {
	background-color: var(--bg2);
	padding: 5px 10px;
	border-radius: 15px;
}
#posts .other .tags li {
	background-color: var(--white);
}

#posts .button {
	text-align: center;
	padding-top: 50px;
}

/* videos */

#videos .header {
	margin-bottom: 0;
}

#videos .items {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

#videos .first article {
	display: flex;
	align-items: stretch;
	gap: 30px;
}
#videos .first .image {
	flex: 0 0 calc(50% - 30px/2);
	background-size: 0;
}
#videos .first .image::before {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	width: 100%;
	height: 100%;
	background-image: inherit;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#videos .first:hover .image::before {
	opacity: .7;
}
#videos .first .image div {
	height: 100%;
	padding-top: 66.666667%;
	background-color: var(--black);
}
#videos .first .image img {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
}
#videos .first .text {
	flex: 0 0 calc(50% - 30px/2);
}
#videos .first .text h3 {
	font-size: 22px;
	font-weight: 300;
	line-height: 33px;
}
#videos .first .text p {
	font-size: 16px;
	font-weight: 300;
	line-height: 28px;
}

#videos .other {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
#videos .other > a {
	flex: 0 0 calc(25% - 3*30px/4);
	background-color: var(--white);
}
#videos .image img {
	width: 100%;
}
#videos .other .text {
	padding: 20px;
}

/* detail */

#detail .header {
	margin-bottom: 0;
}

#detail article {
	display: flex;
	flex-direction: column;
	gap: 50px;
}
#detail article.sidebar {
	flex-direction: row-reverse;
}

#detail article.sidebar .image {
	flex: 0 0 50%;
}
#detail article .image img {
	width: 100%;
}
#detail article .image .photographer {
	color: var(--text5);
	font-size: 14px;
}

#detail article.sidebar .text {
	flex: 0 0 calc(50% - 50px);
}
#detail article .text h2 {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 38px;
	margin-bottom: 28px;
}
#detail article .text h3 {
	font-weight: 500;
	text-transform: uppercase;
}
#detail article .text p {
	margin-bottom: 26px;
}
#detail article .text ul {
	margin-bottom: 26px;
}
#detail article .text ul li::before {
	content: "››";
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}

#detail article .text .citation, #detail article .text blockquote {
	position: relative;
	display: block;
	max-width: 660px;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 22px;
	font-weight: 300;
	line-height: 33px;
	padding: 40px 0 60px 0;
	margin: 0 auto;
}
#detail article .text .citation::before, #detail article .text blockquote::before {
	position: absolute;
	content: "";
	top: 10px;
	left: -90px;
	width: 70px;
	height: 71px;
	background: url("img/citation.png") center no-repeat;
}

#detail article .text .page-info-box, #detail article .text h4 {
	position: relative;
	display: block;
	color: var(--text1);
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--bg3);
}
#detail article .text h4 {
	margin-bottom: 26px;
}
#detail article .text .page-info-box:hover, #detail article .text h4:hover {
	color: var(--text2);
	background-color: var(--bg3);
	border-color: var(--bg2);
}
#detail article .text .page-info-box::before, #detail article .text h4::before {
	position: absolute;
	content: "";
	top: -115px;
	right: 0;
	width: 300px;
	height: 510px;
	background-color: var(--bg3);
}
#detail article .text .page-info-box:hover::before, #detail article .text h4:hover::before {
	background-color: var(--bg2);
}
#detail article .text .page-info-box img {
	display: none;
}
#detail article .text .page-info-box .page-info-box__arrow {
	position: absolute;
	width: 100%;
	max-width: 645px;
	height: 100%;
}
#detail article .text .page-info-box .page-info-box__arrow::before {
	position: absolute;
	content: "";
	top: 0;
	right: 25px;
	bottom: 0;
	width: 34px;
	height: 40px;
	background-color: var(--text2);
	margin: auto 0;
}
#detail article .text .page-info-box:hover .page-info-box__arrow::before {
	background-color: var(--bg1);
}
#detail article .text .page-info-box .page-info-box__text-content, #detail article .text h4 a {
	position: relative;
	display: block;
	max-width: 500px;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 22px;
	font-weight: 300;
	line-height: 33px;
	padding: 50px 75px 50px 50px;
}

#detail article .map, #detail article .map iframe, #detail article .spotify iframe {
	width: 100%;
	height: 200px;
}

/* service */

#service {
	overflow: hidden;
}

#service .container {
	padding-top: 0;
	padding-bottom: 0;
}

#service .header {
	margin: 0;
}

#service article {
	position: relative;
	display: flex;
	gap: 50px;
}
#service article:nth-child(2n+1) {
	flex-direction: row-reverse;
}
#service article::before {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	width: calc(100vw/2);
	background-color: var(--white);	
}
#service article:nth-child(2n)::before {
	left: 50%;
}
#service article:nth-child(2n+1)::before {
	right: 50%;
}

#service .image {
	flex: 0 0 50%;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
#service .image img {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
}
#service .text {
	flex: 0 0 calc(50% - 50px);
	position: relative;
	padding: 50px 0;
}
#service .text h2 {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 38px;
	margin-bottom: 28px;
}
#service .text p {
	font-size: 16px;
	line-height: 28px;
	margin-bottom: 28px;
}

#service .button a {
	color: var(--text2);
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	background-color: unset;
	padding: 5px 20px;
	border: 1px solid var(--text2);
	border-radius: 20px;
}
#service .button a:hover {
	color: var(--white);
	background-color: var(--text2);
}

/* person */

#person {
	position: relative;
}
#person::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 1px solid var(--line2);
}

#person .header {
	flex-direction: column;
	align-items: flex-start;
}

#person .items {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 20px;
}
#person .items article {
	flex: 0 0 calc(25% - 3*20px/4);
}

#person .image {
	width: 150px;
	height: 150px;
	margin: 0 auto 15px auto;
	background-color: transparent;
	border-radius: 50%;
}

#person .text {
	text-align: center;
}
#person .text h3 {
	margin-bottom: 0;
}
#person .text .job {
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	text-transform: uppercase;
}

#person .text .link {
	display: flex;
	justify-content: center;
	gap: 10px;
}
#person .text .link a {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	overflow: hidden;
	text-indent: -99999px;
	border: 1px solid var(--text2);
	border-radius: 50%;
}
#person .text .link a:hover {
	background-color: var(--text2);
}
#person .text .link a::after {
	position: absolute;
	top: 0;
	left: 1px;
	right: -1px;
	color: var(--text2);
	font-family: 'FontAwesome';
	font-size: 18px;
	line-height: 32px;
	text-indent: 0;
	text-align: center;
}
#person .text .link a:hover::after {
	color: var(--white);
}
#person .text .link .email a::after {
	content: "\f0e0";
}
#person .text .link .linkedin a::after {
	content: "\f0e1";
}

/* partner */

#partner {
	border-top: 1px solid var(--line2);
}

#partner .container {
	padding-top: 0;
}

#partner .header {
	margin-bottom: 0;
}

#partner .items {
	position: relative;
	padding: 30px 0;
}
#partner .items::before {
	position: absolute;
	content: "";
	left: 50%;
	bottom: 0;
	width: 100vw;
	border-bottom: 1px solid var(--line2);
	transform: translateX(-50%);
}

#partner h3 {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 38px;
	margin-bottom: 28px;
}

#partner ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px 0;
}
#partner ul li {
	flex: 0 0 calc(25% - 3*20px/4);
}
#partner ul a {
	display: block;
	height: 100px;
	overflow: hidden;
	text-indent: -99999px;
	background-repeat: no-repeat;
	background-position: center;
}

#partner .button {
	text-align: center;
	padding-top: 30px;
}

/* package */

#package .container {
	padding-top: 0;
	padding-bottom: 0;
}

#package .header {
	margin-bottom: 0;
}

#package article {
	position: relative;
	padding: 50px 0 70px 0;
}
#package article::before {
	position: absolute;
	content: "";
	left: 50%;
	top: 0;
	width: 100vw;
	border-bottom: 1px solid var(--line2);
	transform: translateX(-50%);
}

#package .text h3 {
	color: var(--text1);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 38px;
	margin-bottom: 20px;
}
#package .text h4 {
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	text-transform: uppercase;
}

#package ul {
	padding: 20px 0;
}
#package ul li::before {
	content: "››";
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -8px;
	padding-right: 8px;
	margin-left: -4px;
}

#package .button a {
	color: var(--text2);
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	background-color: unset;
	padding: 5px 20px;
	border: 1px solid var(--text2);
	border-radius: 20px;
}
#package .button a:hover {
	color: var(--white);
	background-color: var(--text2);
}

/* contact */

#contact {
	position: relative;
}
#contact::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 1px solid var(--line2);
}

#contact .items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#contact .items .item {
	flex: 0 0 calc(25% - 3*20px/4);
}

#contact h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	text-transform: uppercase;
}
#contact p {
	font-size: 16px;
	font-weight: 300;
	line-height: 28px;
}
#contact .contact {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#contact .contact a {
	display: inline-block;
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	text-transform: uppercase;
	padding: 5px 20px;
	border: 1px solid var(--text2);
	border-radius: 20px;
}
#contact .contact a:hover {
	color: var(--white);
	background-color: var(--text2);
}

/* footer */

footer {
	position: relative;
	background-color: var(--bg1);
	overflow: hidden;
}
footer.character::before {
	position: absolute;
	content: "";
	top: -10px;
	left: -40px;
	width: 500px;
	height: 850px;
	background-color: var(--svg2);
}

footer p, footer li, footer a {
	color: var(--text3);
}
footer a:hover {
	color: var(--text2);
}

/* newsletter */

#newsletter {
	position: relative;
}
#newsletter::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid var(--line1);
}

#newsletter .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
	padding-top: 100px;
}

#newsletter .header {
	flex: 0 0 calc(66.666667% - 40px);
}
#newsletter .header h2 {
	color: var(--text3);
	font-family: 'Area', sans-serif;
	font-size: 30px;
	font-weight: 200;
	line-height: 50px;
	margin-bottom: 10px;
}
#newsletter .header p {
	max-width: 500px;
	font-size: 14px;
	line-height: 24px;
}

#newsletter .form {
	flex: 0 0 33.333334%;
}
#newsletter form {
	display: flex;
	justify-content: space-between;
	background-color: var(--white);
	padding-left: 25px;
	border-radius: 25px;
}
#newsletter input {
	width: 100%;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	border: none;
	outline: none;
}
#newsletter input.is-invalid {
	color: var(--text2);
}
#newsletter button {
	cursor: pointer;
	color: var(--white);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
	text-transform: uppercase;
	background-color: var(--svg1);
	padding: 10px 20px;
	border: none;
	border-radius: 25px;
	outline: none;
}
#newsletter input:focus, #newsletter button:focus {
	outline: none;
}
#newsletter button:hover {
	background-color: var(--text2);
	outline: none;
}
#newsletter button:placeholder {
	color: var(--text4);
}
#newsletter .invalid-feedback {
	color: var(--white);
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	padding-top: 10px;
}

/* footer */

#footer .container {
	padding-top: 100px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

#footer .block {
	flex: 0 0 calc(25% - 3*40px/4);
}
#footer .block:last-child {
	flex-basis: calc(15% - 3*40px/4);
}
#footer .block h3 {
	color: var(--text2);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
	text-transform: uppercase;
	margin-bottom: 35px;
}
#footer .block li, #footer .block p, #footer .block a {
	font-size: 14px;
	line-height: 24px;
}

#footer .brand {
	flex: 0 0 calc(35% - 3*40px/4);
}
#footer .brand h2 {
	margin: -20px 0 35px 0;
}
#footer .brand p {
	font-size: 14px;
	line-height: 24px;
}
#footer .brand a {
	display: block;
	width: 175px;
	height: 50px;
	overflow: hidden;
	text-indent: -99999px;
	background: url("img/logo.png") center no-repeat;
	background-size: contain;
	filter: brightness(0) invert(1);
}
#footer .brand a:hover {
	filter: none;
}

#footer .social {
	display: flex;
	gap: 10px;
	padding-top: 20px;
}
#footer .social a {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	overflow: hidden;
	text-indent: -99999px;
	border: 2px solid var(--white);
	border-radius: 50%;
}
#footer .social a:hover {
	background-color: var(--text2);
	border-color: var(--text2);
}
#footer .social a::after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: var(--white);
	font-family: 'FontAwesome';
	font-size: 18px;
	line-height: 32px;
	text-indent: 0;
	text-align: center;
}
#footer .social a:hover::after {
	color: var(--bg1);
}
#footer .social .facebook a::after {
	content: "\f39e";
}
#footer .social .instagram a::after {
	content: "\f16d";
}
#footer .social .linkedin a::after {
	content: "\f0e1";
}
#footer .social .threads a::after {
	content: "\e618";
}
/* v2 */
#footer .social a span {
	display: none;
}
#footer .social a i {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: var(--white);
	font-size: 18px;
	line-height: 32px;
	text-indent: 0;
	text-align: center;
}
#footer .social a:hover i {
	color: var(--bg1);
}

/* copy */

.short #copy {
	max-height: 50px;
}

#copy .container {
	padding-top: 30px;
	padding-bottom: 30px;
}
.short #copy .container {
	padding-top: 12px;
	padding-bottom: 12px;
}
#copy .container::before {
	position: absolute;
	content: "";
	top: 0;
	left: 20px;
	right: 20px;
	border-bottom: 1px solid var(--line1);
}

#copy ul {
	display: flex;
	flex-wrap: wrap;
}
#copy li {
	padding-right: 10px;
}
#copy li::after {
	content: "|";
	padding-left: 10px;
}
#copy li:last-child::after {
	content: none;
}

#copy a {
	font-size: 14px;
	line-height: 24px;
}

/* modal, answer */

#modal, #answer {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	align-items: center;
	background-color: rgba(0,0,0,.2);
	z-index: 10;
}
#modal.active, #answer.active {
	display: flex;
}

#modal .container, #answer .container {
	position: relative;
	max-width: 700px;
	background-color: var(--white);
	padding: 30px;
	margin: 0 auto;
}

#modal .header {
	margin-bottom: 40px;
}
#modal .header h2, #answer .header h2 {
	color: var(--text1);
	font-family: 'Area', sans-serif;
	font-size: 30px;
	font-weight: 200;
	line-height: 50px;
	margin-bottom: 10px;
}
#modal .header p, #answer .header p {
	color: var(--black);
	font-size: 14px;
	line-height: 24px;
}

#modal form {
	display: flex;
	justify-content: space-between;
	background-color: var(--bg3);
	padding-left: 25px;
	border-radius: 25px;
}
#modal input {
	width: 100%;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	background-color: var(--bg3);
	border: none;
	outline: none;
}
#modal input.is-invalid {
	color: var(--text2);
}
#modal button {
	cursor: pointer;
	color: var(--white);
	font-family: 'Roboto Mono', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
	text-transform: uppercase;
	background-color: var(--svg1);
	padding: 10px 20px;
	border: none;
	border-radius: 25px;
	outline: none;
}
#modal input:focus, #modal button:focus {
	outline: none;
}
#modal button:hover {
	background-color: var(--text2);
	outline: none;
}
#modal button:placeholder {
	color: var(--text4);
}
#modal .invalid-feedback {
	color: var(--text2);
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	padding-top: 10px;
}

#modal .close, #answer .close {
	position: absolute;
	top: 30px;
	right: 30px;
}
#modal .close a, #answer .close a {
	display: block;
	cursor: pointer;
	width: 30px;
	height: 30px;
	overflow: hidden;
	text-indent: -99999px;
	padding: 0 !important;
}
#modal .close a::before, #modal .close a::after,
#answer .close a::before, #answer .close a::after {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: var(--bg1);
	margin: auto 0;
}
#modal .close a::before, #answer .close a::before {
	transform: rotate(45deg);
}
#modal .close a::after, #answer .close a::after {
	transform: rotate(-45deg);
}
#modal .close a:hover::before, #modal .close a:hover::after,
#answer .close a:hover::before, #answer .close a:hover::after {
	background-color: var(--text2);
}

/* media */

@media (min-width: 1101px) {
	header .primary li:last-child a {
		color: var(--text1);
		background-color: var(--white);
		padding: 10px 20px;
		border-radius: 25px;
	}
	header.light .primary li:last-child a {
		color: var(--white);
		background-color: var(--svg1);
	}
	header .primary li:last-child a:hover {
		color: var(--white);
		background-color: var(--text2);
	}
}

@media (max-width: 1100px) {
	header nav {
		height: 90px;
	}
	header .brand a {
		background-size: 80%;
	}
	header .menu {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	header .primary {
		display: none;
		margin-top: 150px;
	}
	header.fixed .primary, .short header .primary {
		margin-top: 90px;
	}
	header .primary::before {
		position: absolute;
		content: "";
		width: 100vw;
		height: 100vh;
		background-color: var(--bg1);
		z-index: -1;
	}
	header.active .primary {
		display: block;
	}
	header .primary li {
		padding: 0 20px;
	}
	header .primary li:first-child {
		padding-top: 10px;
	}
	header .primary a {
		border-bottom: 1px solid var(--line1);
	}
	header .mobile {
		display: block;
	}
	header.light .primary::before {
		background-color: var(--bg3);
	}
	header.light .primary a {
		border-color: var(--line3);
	}

	main {
		padding-top: 150px;
	}
	main .section section {
		flex-basis: calc(50% - 40px/2);
	}
	main .section section:nth-child(3) {
		flex-basis: 100%;
	}

	#theme article {
		gap: 40px;
	}
	#theme .text {
		flex-basis: calc(50% - 40px);
	}

	#conversations .items {
		gap: 40px;
	}
	#conversations .items a {
		flex-basis: calc(33.333334% - 2*40px/3);
	}
	#conversations .items .first {
		flex-basis: calc(33.333334% - 2*40px/3);
	}
	#conversations .items .other {
		flex-basis: calc(66.666667% - 40px/3);
		gap: 40px;
	}
	#conversations .other a {
		flex-basis: calc(50% - 40px/2);
	}
	#conversations .first article {
		flex-direction: column;
	}
	#conversations .other article {
		padding-left: 0;
		padding-right: 0;
	}
	#conversations .quote p {
		text-align: center;
	}

	#conversation .neighbours .items a {
		flex-basis: 33.333334%;
	}
	#conversation .neighbours .items a:last-child {
		display: none;
	}

	#project .items a {
		flex-basis: 100%;
	}
	#project .items a:nth-child(n + 3) {
		display: none;
	}
	#project .image {
		flex-basis: calc(33.333334% - 2*40px/3);
	}
	#project .text {
		flex-basis: calc(66.666667% - 40px/3 + 10px);
	}

	#podcast .items a {
		flex-basis: 33.333334%;
	}
	#podcast .items a:last-child {
		display: none;
	}
/* DELL */
	.section #companies {
		flex-basis: 100%;
	}

	#company .neighbours .items a {
		flex-basis: 33.333334%;
	}
	#company .neighbours .items a:last-child {
		display: none;
	}

	#events .items a {
		flex-basis: calc(50% - 20px/2);
	}

	#videos .other > a {
		flex-basis: calc(33.333334% - 2*30px/3);
	}

	#person .items article {
		flex-basis: calc(33.333334% - 2*20px/3);
	}

	#partner ul li {
		flex-basis: calc(33.333334% - 2*20px/3);
	}

	#newsletter .header, #newsletter .form {
		flex-basis: calc(50% - 40px/2);
	}
}

@media (max-width: 1000px) {
	#path.theme .container, #path.company .container {
		display: block;
	}
	#path.theme .cooperation, #path.company .cooperation {
		margin-top: 30px;
	}
	#path.theme .cooperation h2, #path.company .cooperation h2 {
		margin-bottom: 10px;
	}
	#path.theme .button {
		top: -25px;
	}
	#path.theme .button a {
		font-size: 18px;
		font-weight: 500;
		line-height: 30px;
		padding: 10px 20px 10px 40px;
		border-radius: 25px;
	}
	#path.theme .button a.hooks::before {
		left: 15px;
		width: 21px;
		height: 23px;
	}

	#companies .items a {
		flex-basis: calc(50% - 30px/2);
	}

	#company .numbers {
		flex-direction: column;
		gap: 20px;
	}
	#company .numbers .table {
		flex-basis: auto;
	}
	#company .numbers .image {
		flex-basis: auto;
		height: 200px;
	}

	#posts .other > a {
		flex-basis: 100%;
	}
}

@media (max-width: 900px) {
	header input {
		width: 350px;
	}

	#news .items .first, #news .items .other {
		flex-basis: 100%;
	}
	#news .first .image {
		height: auto;
		padding: 0;
	}
	#news .first .image img {
		position: static;
		width: 100%;
		transform: none;
	}
	#news .first .text {
		padding: 20px;
	}

	#webs .image {
		display: none;
	}
	#webs .text {
		flex-basis: 100%;
	}

	#map .container {
		flex-direction: column-reverse;
		height: auto;
	}
	#map .items {
		flex-basis: auto;
		overflow-y: auto;
	}
	#map .map {
		flex-basis: auto;
		height: 400px;
	}
	#map .map iframe {
		height: 400px;
		margin-bottom: -8px;
	}

	#footer .brand, #footer .block, #footer .block:last-child {
		flex-basis: calc(50% - 40px/2);
	}
	#footer .brand h2, #footer .block h3 {
		margin-bottom: 15px;
	}

	.short #copy {
		max-height: none;
	}
}

@media (max-width: 800px) {
	header .container {
		padding-top: 0;
	}
	header .top {
		position: static;
		display: none;
	}
	header .top::before {
		content: none;
	}
	header.active .top {
		display: block;
	}
	header .top li {
		padding: 0 20px;
	}
	header .top li:first-child {
		padding-top: 20px;
	}
	header input {
		width: 250px;
	}

	main {
		padding-top: 90px;
	}
	main .section section {
		flex-basis: 100%;
	}

	#theme article {
		flex-direction: column;
	}
	#theme .image, #theme .text {
		flex-basis: auto;
	}
	#theme .image {
		background-image: none !important;
	}
	#theme .image img {
		position: static;
		width: 100%;
		height: auto;
	}

	#themes article {
		margin-bottom: 50px;
	}
	#themes article:last-child {
		margin: 0;
	}
	#themes .tile_left, #themes .tile_right {
		flex-direction: column;
		gap: 20px;
	}
	#themes .tile_left .text, #themes .tile_right .text {
		flex-basis: auto;
	}
	#themes .tile_left .image, #themes .tile_right .image {
		flex-basis: auto;
		height: 200px;
	}
	#themes .triple .part {
		padding: 0;
	}
	#themes .triple .part::before {
		content: none;
	}
	#themes .triple .parts {
		flex-direction: column;
	}
	#themes .triple .part .text {
		padding: 30px;
	}
	#themes .article .text {
		padding: 30px;
	}
	#themes .text h3, #themes .text p {
		margin-bottom: 20px;
	}

	#conversations .items a {
		flex-basis: calc(50% - 40px/2);
	}
	#conversations .items .first {
		flex-basis: 100%;
	}
	#conversations .items .other {
		flex-basis: calc(100% - 40px);
		padding-left: 20px;
		padding-right: 20px;
	}
	#conversations .first article {
		flex-direction: row;
		gap: 40px;
	}
	#conversations .first .article {
		flex-basis: calc(50% - 40px/2);
	}

	#conversation .quote {
		flex-direction: column;
	}
	#conversation .quote::before {
		position: static;
		width: 100%;
		padding-top: 75%;
	}
	#conversation .quote .text {
		flex-basis: auto;
		padding: 20px 20px 20px 120px;
	}
	#conversation .quote .text::before {
		top: 20px;
		left: 20px;
	}
	#conversation .sticker {
		flex-direction: column;
		margin-top: 0;
	}
	#conversation .sticker .main {
		flex-basis: auto;
		padding-top: 0;
	}
	#conversation .sticker .sidebar {
		position: relative;
		flex-basis: auto;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
		padding-top: 0;
	}
	#conversation .sticker .sidebar > div {
		flex: 0 0 calc(50% - 20px/2);
	}

	#conversation .neighbours .items a {
		flex-basis: 50%;
	}
	#conversation .neighbours .items a:last-child {
		display: block;
	}
	#conversation .text p {
		margin-bottom: 20px;
	}

	#project .image {
		flex-basis: calc(50% - 40px/2);
	}
	#project .text {
		flex-basis: calc(50% - 40px/2 + 10px);
	}

	#podcast .items a {
		flex-basis: 50%;
	}
	#podcast .items a:last-child {
		display: block;
	}

	#webs .items a {
		flex-basis: 100%;
	}

	#company article {
		margin-bottom: 50px;
	}
	#company article:last-child {
		margin: 0;
	}
	#company .tile_left, #company .tile_right {
		flex-direction: column;
	}
	#company .tile_left::before, #company .tile_right::before {
		position: static;
		width: 100%;
		background-position: center;
		padding-top: 50%;
	}
	#company .tile_left .text, #company .tile_right .text {
		flex-basis: auto;
		padding: 20px;
	}
	#company .tile_left .text h3, #company .tile_right .text h3 {
		margin-bottom: 20px;
	}
	#company .gallery {
		gap: 10px;
	}
	#company .gallery .images {
		gap: 10px;
	}
	#company .gallery .images:nth-child(2n) {
		flex-basis: calc(33.333334% - 10px/2);
	}
	#company .gallery .images:nth-child(2n+1) {
		flex-basis: calc(66.666667% - 10px/2);
	}
	#company .jobs .items a {
		flex-basis: 100%;
	}
	#company .jobs .items a:hover .article {
		padding-left: 0;
	}
	#company .jobs .items a:hover .article::before {
		content: none;
	}
	#company .events .items a {
		flex-basis: 100%;
	}
	#company .events .items a:hover .article {
		padding-left: 0;
	}
	#company .events .items a:hover .article::before {
		content: none;
	}
	#company .quote {
		flex-direction: column;
		gap: 20px;
		padding: 20px;
	}
	#company .accordion .text {
		padding: 0 25px;
	}
	#company .neighbours .items a {
		flex-basis: 50%;
	}
	#company .neighbours .items a:last-child {
		display: block;
	}
	#company .text p {
		margin-bottom: 20px;
	}

	#jobs .items a {
		flex-basis: calc(50% - 20px/2);
	}

	#posts .items {
		gap: 30px;
	}
	#posts .first article {
		flex-direction: column;
		gap: 20px;
	}
	#posts .first .text {
		padding: 0 20px 20px 20px;
	}
	#posts .other {
		gap: 30px;
	}

	#videos .items {
		gap: 30px;
	}
	#videos .first article {
		flex-direction: column;
		gap: 10px;
	}
	#videos .other > a {
		flex-basis: calc(50% - 30px/2);
	}

	#detail article.sidebar {
		flex-direction: column;
	}

	#service .container {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#service .items {
		display: flex;
		flex-direction: column;
		gap: 50px;
	}
	#service article, #service article:nth-child(2n+1) {
		flex-direction: column;
		gap: 20px;
	}
	#service article::before {
		content: none;
	}
	#service .image {
		flex-basis: auto;
		height: 200px;
	}
	#service .text {
		flex-basis: auto;
		padding: 0;
	}
	#service .text h2, #service .text p {
		margin-bottom: 10px;
	}

	#person .items article {
		flex-basis: calc(50% - 20px/2);
	}

	#partner ul li {
		flex-basis: calc(50% - 20px/2);
	}

	#contact .items .item {
		flex-basis: calc(50% - 20px/2);
	}
}

@media (max-width: 700px) {
	header form {
		display: none;
	}

	#companies .items a {
		flex-basis: 100%;
	}

	#detail article .text .page-info-box .page-info-box__text-content {
		padding-top: 25px;
		padding-left: 25px;
		padding-bottom: 25px;
	}
}

@media (max-width: 600px) {
	#news .other a:nth-child(n + 3) {
		display: none;
	}
	#news .other .image, #news .other .text {
		flex-basis: 100%;
	}
	#news .other .image img {
		width: 100%;
	}

	#conversations .items a {
		flex-basis: 100%;
	}
	#conversations .first article {
		flex-direction: column;
	}
	#conversations .other a {
		flex-basis: 100%;
	}
	#conversations .other a:nth-child(n + 2) {
		display: none;
	}

	#conversation .quote .text {
		padding: 20px;
	}
	#conversation .quote .text::before {
		content: none;
	}
	#conversation .sticker .sidebar > div {
		flex-basis: 100%;
	}
	#conversation .neighbours .items a {
		flex-basis: 100%;
	}
	#conversation .neighbours .items a:nth-child(n + 3) {
		display: none;
	}

	#project .image, #project .text {
		flex-basis: 100%;
	}

	#podcast .items a {
		flex-basis: 100%;
	}
	#podcast .items a:nth-child(n + 3) {
		display: none;
	}

	#webs .items a:nth-child(n + 4) {
		display: none;
	}

/* DELL */
	.section #companies .items a {
		flex-basis: 100%;
	}
	.section #companies .items a:nth-child(n + 2) {
		display: none;
	}
	#companies article {
		padding: 20px;
	}

	#company .numbers .table {
		flex-direction: column;
	}
	#company .numbers .table .column {
		border-right: none;
		border-bottom: 1px solid var(--line2);
	}
	#company .numbers .table .column:last-child {
		border: none;
	}
	#company .jobs .head {
		flex-direction: column-reverse;
	}
	#company .accordion .text {
		padding: 0;
	}
	#company .neighbours .items a {
		flex-basis: 100%;
	}
	#company .neighbours .items a:nth-child(n + 3) {
		display: none;
	}

	#jobs .items a {
		flex-basis: 100%;
	}
	#jobs .items a:nth-child(n + 4) {
		display: none;
	}

	#events .items a {
		flex-basis: 100%;
	}
	#events .items a:nth-child(n + 5) {
		display: none;
	}

	#posts .other article {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	#posts .other .image {
		flex-basis: auto;
	}
	#posts .other .image img {
		width: 100%;
	}

	#videos .other > a {
		flex-basis: 100%;
	}
	#videos .other .image img {
		width: 100%;
	}

	#person .items article {
		flex-basis: 100%;
	}

	#partner ul li {
		flex-basis: 100%;
	}

	#contact .items .item {
		flex-basis: 100%;
	}

	#newsletter .header, #newsletter .form {
		flex-basis: 100%;
	}

	#footer .brand, #footer .block, #footer .block:last-child {
		flex-basis: 100%;
	}	
}

/* svg */

.character::before, .page-info-box::before, #detail .text h4::before {
	--svg: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 79.7 135.7">\
			<path d="M50.3,53.4L72,29.8H54.8c-4.7,5.1-9.1,8.7-12.5,15.1h-3.4c-3.2-6.4-7.5-9.7-12.4-15.1H9.3l21.6,23.6H50.3z M42.2,134.4\
				c18.3,0,32.1-8.9,37.5-20.2l-17-6.6c-3.6,7.2-11.4,11.1-20.7,11.1c-11.9,0-21.5-5.5-23-16.1h60.1v-4.9c0-25.6-19.3-37.1-38.3-37.1\
				c-23.3,0-40,15.7-40,37.2C0.9,119.9,18.7,134.4,42.2,134.4z M20,89.9c2.1-8.2,9.5-14.3,20.8-14.3c9.6,0,18.8,4.1,20.1,14.3H20z" />\
			<path d="M50.3,24.9L72,1.3H54.8C50,6.4,45.7,10,42.3,16.4h-3.4C35.7,10,31.4,6.6,26.6,1.3H9.3l21.6,23.6H50.3z" />\
		</svg>');
}

.hooks::before, .page-info-box .page-info-box__arrow::before {
	--svg: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 47.5 57.7">\
			<path d="M43.3,22L26.5,6.5v12.3c3.6,3.4,6.2,6.5,10.8,8.9v2.4c-4.6,2.3-6.9,5.3-10.8,8.8v12.3l16.8-15.4V22z" />\
			<path d="M23,22L6.2,6.5v12.3c3.6,3.4,6.2,6.5,10.8,8.9v2.4c-4.6,2.3-7,5.3-10.8,8.8v12.3L23,35.8V22z" />\
		</svg>');
}

.character::before, .page-info-box::before, #detail .text h4::before, .hooks::before, .page-info-box .page-info-box__arrow::before {
	mask-image: var(--svg);
	-webkit-mask-image: var(--svg);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: cover;
	-webkit-mask-size: cover;
}