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

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

body, h1, h2, h3, div, p, li, a {
	color: #000000;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 30px;
}

body {
	background-color: #f5f5f5;
}

a {
	color: #000000;
	font-weight: 600;
	text-decoration: none;
}
a:hover {
	color: #939393;
	text-decoration: none;
}

.ekko-lightbox a {
	text-decoration: none;
	transition: none;
}
.ekko-lightbox a span {
	color: #ffffff;
}

img {
	display: block;
}

ul {
	list-style-type: none;
}

*, ::after, ::before {
	box-sizing: unset;
}

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

/* header */

header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transition: background .5s ease;
	z-index: 5;
}
header.fixed {
	position: fixed;
	background-color: #ffffff;	
}

header .container {
	display: flex;
	align-items: flex-start;
	gap: 35px;
	padding: 35px;
	transition: padding .5s ease;
}
header.fixed .container {
	padding: 20px;
}

header .brand:hover {
	background-color: #003160;
}
header .brand a {
	display: block;
	width: 90px;
	height: 90px;
	overflow: hidden;
	text-indent: -99999px;
	background-color: #000000;
}
header.fixed .brand a {
	width: 60px;
	height: 60px;
}
.home header:not(.fixed) .brand a, .detail header:not(.fixed) .brand a {
	width: 120px;
	height: 120px;
	background-color: #ffffff;
}
header .brand a:hover {
	background-color: #ffffff;
}

header nav {
	flex: 0 0 calc(100% - 125px);
	display: flex;
	justify-content: flex-end;
}
header.fixed nav {
	flex-basis: calc(100% - 95px);
}
.home header:not(.fixed) nav, .detail header:not(.fixed) nav {
	flex-basis: calc(100% - 155px);
}

header .menu {
	display: flex;
	align-items: flex-start;
	gap: 35px;
	padding-top: 10px;
}
header .menu a {
	position: relative;
	display: block;
	color: #000000;
	font-family: 'Space Mono', sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 30px;
	padding: 10px 0;
}
header .menu a::after {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: #000000;
	transition: width .5s ease;
}
header .menu a:hover::after {
	width: 100%;
}
.home header:not(.fixed) .menu a, .detail header:not(.fixed) .menu a {
	color: #ffffff;
}
.home header:not(.fixed) .menu a::after, .detail header:not(.fixed) .menu a::after {
	background-color: #ffffff;
}

header .mobile {
	display: none;
}

header .mobile strong {
	position: relative;
	cursor: pointer;
	display: block;
	width: 54px;
	height: 54px;
	border: 1px solid #000000;
}
.home header:not(.fixed) .mobile strong, .detail header:not(.fixed) .mobile strong, header .mobile:hover strong {
	border-color: #ffffff;
}
header .mobile:hover strong {
	background-color: #003160;
}

header .mobile span {
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	width: 35px;
	height: 1px;
	background-color: #000000;
	margin: auto;
}
.home header:not(.fixed) .mobile span, .detail header:not(.fixed) .mobile span, header .mobile:hover span {
	background-color: #ffffff;
}
header .mobile span:nth-child(1) {
	top: 12px;
}
header .mobile span:nth-child(2) {
	top: 0;
	bottom: 0;
	transition: width .2s ease;
}
header .mobile span:nth-child(3) {
	bottom: 12px;
}
header .mobile:hover span:nth-child(2) {
	width: 25px;
}

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);
}

/* main */

main {
	margin-top: 160px;
}
.home main, .detail main {
	margin-top: 0;
}

main .notitle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	text-indent: -99999px;
}

main .header .title {
	font-size: 56px;
	font-weight: 300;
	line-height: 62px;
}
main .header .title span {
	font-weight: 700;
}

/* home */

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

/* path */

.detail #path {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#path .container {
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding-top: 50px;
	padding-bottom: 50px;
}
.detail #path .container {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	height: 100vh;
	min-height: 500px;
	background: linear-gradient(#00000075, #00000025 160px, #00000025 50%, #00000075);
}

#path .header {
	max-width: 1300px;
}

.detail #path .header .title {
	color: #ffffff;
}

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

/* slider */

#slider .container {
	padding: 0;
}

#slider .carousel-item {
	height: 100vh;
	min-height: 500px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#slider .header {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: left;
	background: linear-gradient(#00000075, #00000025 160px, #00000025 50%, #00000075);
	padding: 100px 75px 10px 75px;
}
#slider .header .title {
	width: 50%;
	position: relative;
	padding: 25px 0;
}
#slider .header .title a {
	display: block;
	max-width: 750px;
	color: #ffffff;
	font-family: 'Space Mono', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 32px;
}
#slider .header .title a::after {
	position: absolute;
	content: "";
	left: 0;
	bottom: -1px;
	width: 0;
	height: 1px;
	background-color: #ffffff;
	transition: width .5s ease;
}
#slider .header .title a:hover::after {
	width: 100%;
}

#slider .header ul {
	width: 50%;
}
#slider .header li {
	color: #ffffff;
	font-size: 18px;
	font-weight: 300;
	line-height: 32px;
	text-transform: uppercase;
	padding: 20px 0;
	border-top: 1px solid #ffffff50;
}

#slider .dots {
	position: absolute;
	display: flex;
	gap: 25px;
	left: auto;
	right: 75px;
	bottom: 10px;
	padding: 20px 0;
	margin: 0;
}
#slider .dots li {
	width: 30px;
	height: auto;
	color: #ffffff;
	font-family: 'Space Mono', sans-serif;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
	text-indent: 0;
	background-color: unset;
	padding-top: 8px;
	transition: all .2s ease;
}
#slider .dots li.active, #slider .dots li:hover {
	font-size: 24px;
	line-height: 32px;
	padding-top: 0;
}

#slider .arrow {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	width: 20px;
	margin: 0 auto;
}
#slider .arrow span {
	display: block;
	cursor: pointer;
	width: 20px;
	height: 44px;
	overflow: hidden;
	text-indent: -99999px;
	background-color: #ffffff;
}

#slider .bounce {
	animation: bounce 2s infinite;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-20px);
	}
	60% {
		transform: translateY(-10px);
	}
}

/* articles */

#articles .container {
	padding-top: 50px;
	padding-bottom: 50px;
}
.contact #articles .container {
	border-top: 1px solid #c3c3c3;
}

#articles .items {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 50px;
}
.contact #articles .items {
	flex-direction: row;
}
.contact #articles .item {
	flex: 0 0 calc(33.333334% - 2*50px/3);
}

#articles .name {
	font-family: 'Space Mono', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
	margin-bottom: 25px;
}

#articles .text {
	display: flex;
	flex-wrap: wrap;
	gap: 25px 50px;	
}
.contact #articles .text {
	flex-direction: column;
	gap: 25px;
}
#articles .text p {
	flex: 0 0 calc(33.333334% - 2*50px/3);
}
#articles .text p.small, #articles .text p.small a {
	font-size: 12px;
}

.contact #articles a {
	font-weight: 300;
}

/* numbers */

#numbers {
	border-top: 1px solid #e7e7e7;
}

#numbers .container {
	max-width: 1550px;
	padding-top: 50px;
	padding-bottom: 50px;
}

#numbers .items {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}
#numbers .item {
	flex: 0 0 calc(33.333334% - 2*30px/3);
	max-width: 350px;
	font-size: 40px;
	font-weight: 300;
	line-height: 66px;
	text-align: center;
}

/* persons */

#persons {
	background-color: #ffffff;
}

#persons .container {
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding-top: 75px;
}

#persons .items {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 50px;
}
#persons .item {
	flex: 0 0 calc(25% - 3*50px/4);
	display: flex;
	flex-direction: column;
	gap: 25px;
}

#persons .image {
	width: 195px;
	height: 195px;
	overflow: hidden;
	border-radius: 50%;
	margin: 0 auto;
}

#persons .text {
	text-align: center;
}

#persons .name, #persons .job {
	font-family: 'Space Mono', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 32px;
	text-transform: uppercase;
}
#persons .job {
	color: #939393;
}

/* activities */

#activities .container::after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	background: url('img/activities.jpg') center no-repeat;
	background-size: cover;
}
.home #activities .container::after {
	content: none;
}

#activities .header {
	max-width: calc(50% - 30px);
	margin-bottom: 75px;
}
.home #activities .header {
	max-width: none;
}
#activities .header .title {
	max-width: 450px;
}
.home #activities .header .title {
	max-width: none;
	text-align: center;
}

#activities .items {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 50px;
	max-width: calc(50% - 30px);
}
.home #activities .items {
	flex-direction: row;
	align-items: flex-start;
	max-width: none;
}
#activities .item {
	flex: 0 0 calc(25% - 3*50px/4);
	max-width: 450px;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	padding-left: 100px;
}
.home #activities .item {
	padding-left: 0;
}

#activities .tile {
	position: relative;
	overflow: hidden;
	background-position: top calc(50% - 30px) center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	margin-bottom: 35px;
	border: 10px solid #ffffff;	
}
#activities .tile::after {
	display: block;
	content: "";
	padding-bottom: 100%;
}

#activities .name {
	font-family: 'Space Mono', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
}
.home #activities .name {
	position: absolute;
	left: 25px;
	bottom: 25px;
	width: 250px;
}

.home #activities p {
	padding: 0 35px;
}

/* projects */

#projects .container {
	padding-top: 50px;
	padding-bottom: 50px;
}

#projects .filter {
	display: flex;
	align-items: flex-start;
	margin-top: -50px;
	margin-bottom: 50px;
	gap: 15px 30px;
}

#projects .filter h3 {
	position: relative;
	font-family: 'Space Mono', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	text-transform: uppercase;
	padding-left: 70px;
}
#projects .filter h3::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 3px;
	background-color: #000000;
	margin: auto 0;
}

#projects .filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

#projects .filter a {
	display: block;
	font-family: 'Space Mono', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	text-transform: uppercase;
	background-color: #ffffff;
	padding: 0 15px;
	border-radius: 15px;
}
#projects .filter .active a {
	color: #ffffff;
	background-color: #939393;
}
#projects .filter a:hover {
	color: #ffffff;
	background-color: #003160;
}

#projects .items {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}
#projects .item {
	position: relative;
	flex: 0 0 calc(50% - 50px/2);
	overflow: hidden;
}

#projects a {
	display: block;
}

#projects .image {
	position: relative;
	padding-top: 75%;
}
#projects .image::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	transition: background .5s ease;
	z-index: 1;
}
#projects a:hover .image::before {
	background-color: #00000050;
}
#projects .image img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
}

#projects .arrow::before {
	position: absolute;
	content: "";
	right: 0;
	bottom: 13px;
	width: 44px;
	height: 44px;
	background-color: #ffffff;
	transform: rotate(-90deg);
}

#projects .text {
	position: absolute;
	left: 50px;
	right: 50px;
	bottom: 25px;
	opacity: 0;
	transition: all .5s ease;
	z-index: 2;
}
#projects a:hover .text {
	opacity: 1;
}
#projects .text .title {
	position: relative;
	color: #ffffff;
	font-family: 'Space Mono', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 32px;
	padding: 25px 0;
}
#projects .text .title::after {
	position: absolute;
	content: "";
	left: 0;
	bottom: -1px;
	width: 0;
	height: 1px;
	background-color: #ffffff;
	transition: width .5s ease;
}
#projects .text .title:hover::after {
	width: 100%;
}
#projects .text li {
	color: #ffffff;
	font-size: 18px;
	font-weight: 300;
	line-height: 32px;
	text-transform: uppercase;
	padding: 20px 0;
	border-top: 1px solid #ffffff50;
}

/* gallery */

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

#gallery .items {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}
#gallery .item {
	position: relative;
	overflow: hidden;	
	flex: 0 0 calc(33.333334% - 2*50px/3);
}

#gallery a {
	position: relative;
	display: block;
	padding-top: 75%;	
}
#gallery a::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #00000050;
}
#gallery a:hover::before {
	content: "";
}

#gallery img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100%;
	transform: translate(-50%, -50%);
}
#gallery .height img {
	width: 100%;
	height: auto;
}

/* banner */

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

#banner .oval {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 80px;
	background-color: #ffffff;
	border-radius: 150px;
}

#banner .contact {
	flex: 0 0 40%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#banner p, #banner a {
	font-family: 'Space Mono', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 32px;
	text-transform: uppercase;
}
@keyframes pause {
	0%, 80% { transform: none; }
}
@keyframes shaking {
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(5deg); }
	50%  { transform: rotate(0eg); }
	75%  { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}
#banner .button a {
	position: relative;
	display: block;
	color: #000000;
	font-weight: 700;
	padding-left: 70px;
	animation: shaking 0.25s ease-in infinite, pause 10s ease-in infinite;
}
#banner .button a:hover {
	animation: none;
}
#banner .button a::after {
	position: absolute;
	content: "";
	top: 0;
	right: calc(100% - 60px);
	bottom: 0;
	width: 60px;
	height: 3px;
	background-color: #000000;
	transition: width .5s ease;
	margin: auto 0;
}
#banner .button a:hover::after {
	width: 0;
}

/* partners */

#partners .header {
	margin-bottom: 25px;
}

#partners .items {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}
#partners .item {
	flex: 0 0 calc(16.666667% - 5*20px/6);
}

#partners a {
	display: block;
	width: 270px;
	height: 200px;
	overflow: hidden;
	text-indent: -99999px;
	background-position: center;
	background-repeat: no-repeat;
	filter: grayscale(100%);
	margin: 0 auto;
}
#partners a:hover {
	filter: none;
}

/* jobs */

#jobs .container {
	padding-top: 50px;
	padding-bottom: 50px;
}

#jobs .items {
	display: flex;
	flex-direction: column;
	gap: 50px;
}
#jobs .item {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

#jobs .name {
	font-family: 'Space Mono', sans-serif;
	color: #939393;
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
}
#jobs .name span {
	color: #000000;
}

#jobs .properties {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #c3c3c3;
}

#jobs .properties li {
	flex: 0 0 calc(50% - 50px/2);
	font-size: 18px;
	font-weight: 300;
	line-height: 32px;
	text-transform: uppercase;
	padding: 20px 0;
	border-top: 1px solid #c3c3c3;
}
#jobs .properties li:nth-child(2n + 1) {
	padding-right: 50px;
}

#jobs .text {
	display: flex;
	flex-wrap: wrap;
	gap: 25px 50px;
}
#jobs .text p {
	flex: 0 0 calc(50% - 50px/2);
}

/* map */

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

#map iframe {
	pointer-events: none;
	filter: grayscale(100%);
}

/* write */

#write .container {
	display: flex;
	align-items: center;
	gap: 50px 25px;
	padding-top: 0;
}

#write .header {
	flex: 0 0 calc(25% - 25px);
}
#write .header .title {
	max-width: 200px;
	margin: 0 auto;
}

#write .items {
	flex: 0 0 calc(75% - 120px);
	padding: 50px;
	border: 10px solid #ffffff;
}

#write .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
}

#write .quote {
	max-width: 750px;
}
#write .quote p {
	font-size: 24px;
	font-weight: 300;
	line-height: 40px;
	text-align: center;
}

#write .person {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px 80px;
}
#write .person .name, #write .person .job {
	font-family: 'Space Mono', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 32px;
	text-transform: uppercase;
}
#write .person .name {
	text-align: right;
}
#write .person .job {
	position: relative;
	color: #939393;
}
#write .person .job::after {
	position: absolute;
	content: "";
	top: 0;
	left: -70px;
	bottom: 0;
	width: 60px;
	height: 1px;
	background-color: #939393;
	margin: auto;
}

/* company */

#company {
	overflow: hidden;
}

#company .container {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 50px;
	background-size: 0;
}
#company .container::before {
	position: absolute;
	content: "";
	top: 100px;
	left: 0;
	bottom: 100px;
	width: 40%;
	background-image: inherit;
	background-repeat: no-repeat;
	background-size: cover;
}
#company .container > div {
	width: calc(60% - 50px);
}

#company .text {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 25px 50px;
}
#company .text p {
	flex: 0 0 calc(50% - 50px/2);
}

#company .person {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px 80px;
	background-size: 0;
	padding-bottom: 80px;
}
#company .person::before {
	position: absolute;
	content: "";
	left: 300px;
	right: 0;
	bottom: 15px;
	width: 278px;
	height: 109px;
	background-image: inherit;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
}

#company .person .name, #company .person .job {
	position: relative;
	font-family: 'Space Mono', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 32px;
	text-transform: uppercase;
}
#company .person .name {
	text-align: right;
}
#company .person .job {
	color: #939393;
}
#company .person .job::after {
	position: absolute;
	content: "";
	top: 0;
	left: -70px;
	bottom: 0;
	width: 60px;
	height: 1px;
	background-color: #939393;
	margin: auto;
}

/* footer */

footer {
	background-color: #003160;
}
footer .notitle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	text-indent: -99999px;
}

footer p, footer a {
	color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	line-height: 36px;
}
footer a:hover {
	color: #939393;
}

#footer .container {
	padding-top: 50px;
	padding-bottom: 50px;
	border: 1px solid #1c4871;
}

#footer nav {
	display: flex;
	align-items: center;
	gap: 50px;
}

#footer .brand a {
	display: block;
	width: 90px;
	height: 90px;
	overflow: hidden;
	text-indent: -99999px;
	background-color: #ffffff;
}

#footer .menu {
	display: flex;
	align-items: flex-start;
	gap: 35px;
}
#footer .menu a {
	position: relative;
	display: block;
	color: #ffffff;
	font-family: 'Space Mono', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	text-transform: uppercase;
	padding: 10px 0;
}
#footer .menu a::after {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: #ffffff;
	transition: width .5s ease;
}
#footer .menu a:hover::after {
	width: 100%;
}

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

/* copy */

#copy .container {
	padding-top: 50px;
	padding-bottom: 50px;
}

#copy .items {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0 15px;
}

#copy .by {
	text-align: right;
}

/* media */

@media (max-width: 1600px) {
	#banner .header .title {
		font-size: 42px;
		line-height: 56px;
	}
	#banner .contact {
		flex-basis: 50%;
	}
}

@media (max-width: 1400px) {
	.container {
		padding-left: 50px;
		padding-right: 50px;
	}

	#slider .header {
		padding-left: 50px;
		padding-right: 50px;
	}
	#slider .header .title, #slider .header ul {
		width: 100%;
	}
	#slider .dots {
		right: 50px;
	}
	#slider .arrow {
		display: none;
	}

	#activities .item {
		flex-basis: calc(50% - 50px/2);
	}
	#activities .tile {
		margin-bottom: 20px;
	}

	#banner .contact {
		flex-basis: auto;
		flex-direction: column;
		gap: 25px;
	}
}

@media (max-width: 1200px) {
	#projects .items {
		gap: 25px;
	}
	#projects .item {
		flex-basis: calc(50% - 25px/2);
	}
	#projects .text {
		left: 20px;
		right: 20px;
		bottom: 0;
	}

	#numbers .item {
		font-size: 30px;
		line-height: 45px;
	}

	#gallery .items {
		gap: 25px;
	}
	#gallery .item {
		flex-basis: calc(33.333334% - 2*25px/3);
	}

	#jobs .text {
		flex-direction: column;
	}

	#company .text {
		flex-direction: column;
	}
}

@media (max-width: 1100px) {
	main .header .title br {
		display: none;
	}

	#articles .text p {
		flex-basis: calc(50% - 50px/2);
	}
	#articles .text p.small br {
		display: none;
	}

	#persons .item {
		flex-basis: calc(33.333334% - 2*50px/3);
	}

	#write .header .title {
		max-width: none;
		margin: 0;
	}
	#write .items {
		flex-basis: calc(75% - 60px);
		padding: 20px;
	}
}

@media (max-width: 1000px) {
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	header .container {
		padding: 20px;
	}
	header.active {
		position: static;
		background-color: #ffffff;
	}
	.home header:not(.fixed) .brand a, .detail header:not(.fixed) .brand a {
		width: 90px;
		height: 90px;
	}
	header.active:not(.fixed) .brand a {
		background-color: #000000;
	}
	header.active:not(.fixed) .brand a:hover {
		background-color: #ffffff;
	}
	.home header:not(.fixed) nav, .detail header:not(.fixed) nav {
		flex-basis: calc(100% - 125px);
	}
	header.active nav {
		justify-content: space-between;
	}
	header .menu {
		display: none;
		flex-direction: column;
		gap: 20px;
		padding-top: 0;
	}
	header.active .menu {
		display: flex;
	}
	header .menu a {
		padding: 0;
	}
	.home header:not(.fixed) .menu a, .detail header:not(.fixed) .menu a {
		color: #000000;
	}
	.home header:not(.fixed) .menu a::after, .detail header:not(.fixed) .menu a::after {
		background-color: #000000;
	}
	header .mobile {
		display: block;
	}

	.home header.active .mobile strong, .detail header.active .mobile strong {
		border-color: #000000;
	}
	.home header.active .mobile:hover strong, .detail header.active .mobile:hover strong {
		border-color: #ffffff;
	}
	.home header.active .mobile span, .detail header.active .mobile span {
		background-color: #000000;
	}
	.home header.active .mobile:hover span, .detail header.active .mobile:hover span {
		background-color: #ffffff;
	}

	#slider .header {
		padding-left: 20px;
		padding-right: 20px;
	}
	#slider .dots {
		right: 20px;
	}

	#banner .oval {
		flex-direction: column;
	}
	#banner .header .title {
		text-align: center;
	}

	#company .container {
		align-items: flex-start;
	}
	#company .container::before {
		position: relative;
		top: 0;
		right: 0;
		width: 100%;
		height: 50vw;
	}
	#company .container > div {
		width: auto;
	}
	#company .person::before {
		top: auto;
		left: 0;
		bottom: 0;
	}

	#footer .item {
		flex-basis: calc(50% - 15px/2);
	}

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

@media (max-width: 900px) {
	#write .container {
		flex-direction: column;
	}
}

@media (max-width: 800px) {
	main .header .title {
		font-size: 42px;
		line-height: 56px;
	}

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

	#numbers .item {
		font-size: 24px;
		line-height: 34px;
	}

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

	#activities .container {
		padding-bottom: 0;
	}
	.home #activities .container {
		padding-bottom: 100px;
	}
	#activities .container::after {
		position: relative;
		width: 100%;
		height: 100vw;
		margin-top: 50px;
	}
	#activities .header, #activities .items {
		max-width: none;
	}

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

	#gallery .item {
		flex-basis: calc(50% - 25px/2);
	}

	#write .person .name, #write .person .job {
		font-size: 16px;
		line-height: 30px;
	}

	#company .person .name, #company .person .job {
		font-size: 16px;
		line-height: 30px;
	}
}

@media (max-width: 700px) {
	#activities .header {
		margin-bottom: 50px;
	}
	#activities .item {
		flex-basis: 100%;
		max-width: 350px;
	}

	#footer nav {
		align-items: flex-start;
	}
	#footer .menu {
		flex-direction: column;
		gap: 10px;
	}
	#footer .menu a {
		padding: 0;
	}
}

@media (max-width: 600px) {
	.container {
		padding-left: 10px;
		padding-right: 10px;
	}

	main .header .title {
		font-size: 32px;
		line-height: 40px;
	}

	#slider .header .title a {
		font-size: 22px;
	}
	#slider .header .title a::after {
		content: none;
	}
	#slider .header ul, #slider .dots {
		display: none;
	}

	#articles .text p {
		flex-basis: 100%;
	}

	#numbers .items {
		flex-direction: column;
	}

	#projects .filter {
		flex-direction: column;
	}

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

	#banner .oval {
		padding-left: 40px;
		padding-right: 40px;
	}
	#banner .header .title {
		font-size: 32px;
		line-height: 40px;
	}

	#jobs .properties li {
		flex-basis: 100%;
	}
	#jobs .properties li:nth-child(2n + 1) {
		padding-right: 0;
	}

	footer p, footer a {
		font-size: 16px;
		line-height: 30px;
	}
	#footer .items {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 500px) {
	.contact #articles .item {
		flex-basis: 100%;
	}

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

	#projects .arrow::before, #projects .text .title::after {
		content: none;
	}
	#projects .text .title {
		font-size: 22px;
	}
	#projects .text ul {
		display: none;
	}

	#write .person {
		flex-direction: column;
	}
	#write .person .job::after {
		top: -15px;
		left: 0;
		right: 0;
		bottom: auto;
	}

	#company .person {
		flex-direction: column;
		padding-bottom: 0;
	}
	#company .person .job::after {
		top: -15px;
		left: 0;
		right: 0;
		bottom: auto;
	}
}

/* svg */

.arrow span, .arrow::before {
	--svg: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 45.6">\
			<path d="M21.5,32.8L13,41.3V1.2h-2v40.2l-8.5-8.5l-1.4,1.4L12,45.2l10.9-10.9L21.5,32.8z"/>\
		</svg>');
}

.brand a {
	--svg: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.5 78.5">\
			<path d="M78.5,0H0v78.5h78.5V0z M62.3,44h3.6l-7.4-9.2l7-7.4H62l-8.2,8.5v-8.5h-3.1V44h3.1v-4.3l2.6-2.7L62.3,44z M63.8,53.9h-1.4v-2.6h1.4c0.3,0,0.6,0.1,0.9,0.2c0.2,0.1,0.4,0.3,0.5,0.4c0.1,0.2,0.2,0.4,0.2,0.7c0,0.3-0.1,0.5-0.2,0.7c-0.1,0.2-0.3,0.3-0.5,0.4C64.4,53.9,64.2,53.9,63.8,53.9z M66,56.1l-1.3-1.8c0.3-0.1,0.5-0.2,0.6-0.4c0.2-0.2,0.3-0.3,0.4-0.6c0.1-0.2,0.1-0.5,0.1-0.7c0-0.4-0.1-0.7-0.3-1c-0.2-0.3-0.4-0.5-0.7-0.6c-0.3-0.1-0.7-0.2-1.1-0.2h-2v5.2h0.6v-1.7h1.4c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0l1.2,1.7H66z M53.9,55.6v-1.9h2.7v-0.5h-2.7v-1.9h3v-0.5h-3.6v5.2H57v-0.5H53.9z M47.5,56.1H48v-5.2h-0.6V56.1z M39.5,56.1H43v-0.5h-2.9v-4.7h-0.6V56.1z M31.5,55.6v-1.9h2.7v-0.5h-2.7v-1.9h3v-0.5H31v5.2h3.7v-0.5H31.5z M24.1,56.1h0.6v-4.7h1.8v-0.5h-4.2v0.5h1.8V56.1z M14.8,54.2l1.3-2.8l1.3,2.8H14.8z M18.1,56.1h0.6l-2.4-5.2h-0.5l-2.4,5.2h0.6l0.6-1.4h2.9L18.1,56.1z M31.5,36.6c-0.1,0.1-0.2,0.1-0.3,0.2L31,37c0,0,0,0,0,0.1l-1.3,2.2c-0.1,0.2,0,0-0.1,0.2l-0.1,0.3l-0.8,1.2c-0.2,0.3,0,0.2-0.3,0.4c-0.2-0.2,0,0.2-0.1-0.3c-0.1-0.4,0-0.8,0-1.2c0-1.3-0.2-2-0.1-3.3c0-0.5,0.1-0.2,0.1-0.6c0.1-1,0-2.1,0.1-3.1c0.1-0.4,0.1-0.9,0.1-1.4l0.5-3.8c0-0.1,0-0.2,0-0.4c0-0.5,0-1.1,0.1-1.5c0.2-0.9,0.2-1.6-0.8-2.1c-0.6-0.3-1.3-0.6-2-0.4c0,0,0,0-0.1,0c-0.6,0.3-0.6,1-0.9,1.5l-0.5,1c-0.3,0.6-0.4,1.1-0.8,1.6l-0.4,0.8c-0.2,0.6-0.6,1.1-0.7,1.7c-0.1,0.3-0.1,0.3-0.3,0.6c-0.1,0.1-0.1,0.2-0.2,0.3l-1.3,2.4c0,0,0,0,0,0.1c-0.2,0.4-0.2,0.9-0.5,1.4l-0.7,1c-0.1,0.3-0.3,0.9-0.5,1.1c-0.2,0.2-0.3,0.2-0.4,0.4L19,37.5c-0.2,0.4-0.4,0.4-0.6,0.7l-0.2,0.3c-0.1,0.3-0.2,0.6-0.4,0.9l-0.8,1.3c-0.3,0.3-0.2,0.3-0.3,0.5c-0.1,0.3-0.2,0.4-0.5,0.4c0-1.4,0-2.8,0-4.2c0-0.7,0.2-1.3,0.2-1.9c0-0.8,0.1-1.7,0.2-2.4l0.3-2.4c0.1-0.8,0.2-1,0.2-1.9c0.1-1.3,0.2-2.3-1.1-2.9c-2.5-1.1-2.6,0.1-2,1.7c0,0.8-0.2,3.2-0.3,4c-0.1,0.9-0.1,2.3-0.3,2.9c-0.2,0.7,0,1.4-0.1,2.1c0,0.5-0.2,1.2-0.2,1.9c-0.1,1.3,0,4.7,0.6,5.8l0.2,0.3c0.6,1.1,2.4,2.4,3.9,0.9c0.6-0.6,0.5-0.4,1-1.3c0.2-0.5,1.4-2.4,1.5-2.7l1.1-2.2c0.2-0.4,0.3-0.4,0.7-1.4l0.4-0.7c0.2-0.4,0.3-0.8,0.5-1.1c0.4-0.6,0.5-1.3,0.8-1.8l0.6-1.1c0.2-0.4-0.1-0.1,0.3-0.3c0.5,0.6-0.1,8.6,0.3,9.9c0.1,0.3,0.2,0.8,0.4,1l0.6,0.8c0,0,0.1,0.1,0.2,0.1c0,0,0,0,0.1,0l0.6,0.4c0.3,0.1,0.8,0.3,1.1,0.4c0.5,0.1,0.9,0,1.3-0.1c0.7-0.2,0.8-0.4,1.1-0.9c0.3-0.5,0.6-0.9,0.8-1.4l0.1-0.3c0,0,0,0,0-0.1c0,0,0,0,0-0.1c0.1-0.2,0.2-0.3,0.3-0.5c0.4-0.6,0.5-1.3,0.9-1.8l0.1-0.1c0,0,0.1-0.1,0.1-0.1c0.1-0.1,0.1-0.1,0.1-0.2c0.3-1,1-1.8,1.4-2.7l0.5-0.9c0.2-0.3,0.3-0.8,0.8-1.7l2.3-4.2c0.4-0.6,0.8-1.2,1.1-1.8l0.4-0.6c0,0,0.1-0.2,0.1-0.2c0.2-0.3,0.4-0.4,0.6-0.8l0.3-0.5c0,0,0,0,0-0.1l0.5-0.7c0.7-1,0.9-1.1,1.4-2c0,0,0,0,0-0.1c0.2-0.4,1-1.2,1.3-1.4c0.7-0.6,0.5-1.9-0.4-2.2c-0.4-0.2-0.5-0.4-0.9-0.5c-1.8-0.2-1.3,0.5-2,1.4c0,0-0.2,0.2-0.2,0.2c-0.2,0.3-0.3,0.3-0.5,0.6c-0.2,0.2-0.1,0.3-0.2,0.5c-0.2,0.3-0.4,0.4-0.6,0.8c-0.2,0.3-0.4,0.5-0.5,0.9L37,26.3c-0.3,0.4-0.2,0.8-0.4,1.1c-0.4,0.5-0.2,0.6-0.6,0.9c-0.8,0.6-0.5,0.7-0.9,1.2c-0.1,0.1-0.3,0.2-0.4,0.3c-0.2,0.3,0,0.7-0.3,1.1c-0.5,0.5-0.2,0.5-0.7,0.9c-0.2,0.1-0.2,0.3-0.4,0.5c0,0-0.1,0.1-0.1,0.1c-0.4,0.6-0.4,1.3-0.5,1.5c0,0-0.2,0.2-0.2,0.2c0,0,0,0,0,0.1c-0.3,0.5-0.5,0.8-0.7,1.4c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1L31.5,36.6z M41.7,44h3.1V27.3h-3.1V44z M1.4,1h75.7h0.4v0.4v75.7v0.4h-0.4H1.4H1v-0.4V1.4V1H1.4z"/>\
		</svg>');
}

.arrow span, .arrow::before, .brand a {
	mask-image: var(--svg);
	mask-repeat: no-repeat;
	mask-position: center;
}