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

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

html {
	margin-top: 0 !important;
}

body, h1, h2, h3, h4, blockquote, div, p, li, a {
	color: #323232;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
}

body {
	background-color: #ffffff;
}

a {
	color: #92a686;
	text-decoration: none;
}
a:hover {
	color: #fcc0ad;
	text-decoration: none;
}

img {
	display: block;
}

ul {
	list-style-type: none;
}

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

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

/* header */

header {
	background-color: #1d2221;
}

header .container {
	max-width: none;
	padding: 0;
}

header a {
	display: block;
	color: #ffffff;
}
header a:hover {
	color: #fcc0ad;
}

header .top {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 30px;
	padding: 0 35px;
}
header .contact {
	display: flex;
	align-items: center;
	gap: 30px;
}
header .contact a {
	font-size: 20px;
	line-height: 30px;
}
header .email a {
	color: #114063;
	text-transform: uppercase;
	background-color: #c8dcbc;
	padding: 15px;
	border-radius: 0 0 15px 15px;
}
header .email a:hover {
	color: #0a4942;
	background-color: #ffffff;
}
header .social {
	display: flex;
	gap: 10px;
	padding: 14px 0;
}
header .social a {
	position: relative;
	width: 30px;
	height: 30px;
	overflow: hidden;
	text-indent: -99999px;
	border: 1px solid #ffffff30;
	border-radius: 50%;
}
header .social a:hover {
	background-color: #fcc0ad;
}
header .social a::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-indent: 0;
	background-color: #ffffff;
}
header .social a:hover::after {
	background-color: #000000;
}

header nav {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header nav::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #ffffff30;
}

header .brand {
	padding: 30px 35px;
}

header .brand a {
	display: block;
	width: 170px;
	height: 60px;
	overflow: hidden;
	text-indent: -99999px;
	background-color: #ffffff;
}
header .brand a:hover {
	background-color: #fcc0ad;
}

header .menu {
	position: relative;
	display: flex;
	gap: 70px;
	padding: 35px;
}
header .menu::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	width: 1px;
	background-color: #ffffff30;
}
header .menu li {
	position: relative;
}
header .menu a {
	font-size: 28px;
	font-weight: 700;
	line-height: 50px;
}

header .mobile {
	display: none;
	padding: 0 35px;
}
header .mobile strong {
	position: relative;
	cursor: pointer;
	display: block;
	width: 37px;
	height: 34px;
}
header .mobile span {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 6px;
	background-color: #ffffff;
	margin: auto 0;
}
header .mobile span:nth-child(1) {
	bottom: auto;
}
header .mobile span:nth-child(2) {
	width: 75%;
}
header .mobile span:nth-child(3) {
	top: auto;
}
header .mobile strong:hover span {
	width: 100%;
	background-color: #fcc0ad;
}

header.active .mobile strong {
	width: 52px;
	height: 52px;
}
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 .container {
	display: flex;
	flex-direction: column;
	gap: 70px;
}

main .header {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
main .header .block {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
main .header .label,
main .header .label a {
	color: #323232;
	font-size: 16px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
main .header .label a:hover {
	color: #ffffff;
}
main .header .title {
	color: #0a4942;
	font-size: 60px;
	font-weight: 400;
	line-height: 72px;
}
main .header .notitle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
main .header .desc {
	color: #323232;
	font-size: 28px;
	font-weight: 300;
	line-height: 34px;
}
main .name {
	color: #114063;
	font-size: 32px;
	font-weight: 300;
	line-height: 38px;
	text-transform: uppercase;
}
main .more a, main a .more {
	color: #c8dcbc;
	font-size: 16px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
main .more a:hover, main a:hover .more {
	color: #fcc0ad;
}
main .button a {
	display: inline-block;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 25px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background-color: #92a686;
	padding: 15px 30px;
	border-radius: 30px;
}
main .button a:hover {
	color: #114063;
	background-color: #fcc0ad;
}

/* home */

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

/* path */

#path {
	position: relative;
	background-color: #0a4a42;
}

#path .header .titles {
	display: flex;
	flex-direction: column-reverse;
}
#path .header .label, 
#path .header .label a {
	color: #fcc0ad;
}
#path .header .label a:hover {
	color: #ffffff;
}
#path .header .title {
	color: #c8dcbc;
}

/* slider */

#slider {
	position: relative;
	background-size: 0;
}
#slider::before, #slider::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
}
#slider::before {
	bottom: 0;
	background-color: #1d2221;
}
#slider::after {
	bottom: 60px;
	background-image: inherit;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#slider .container {
	justify-content: center;
	max-width: 1730px;
	min-height: calc(100vh - 180px + 60px);
	padding-top: 0;
	padding-bottom: 60px;
	z-index: 0;
}
#slider .container::before {
	position: absolute;
	content: "";
	left: 500px;
	bottom: 0;
	width: 417px;
	height: 511px;
	background: url('img/symbol.png') center no-repeat;
}

#slider .header {
	position: relative;
	max-width: 1030px;
	gap: 60px;
	margin: 30px 0 60px 0;
}
#slider .header .title {
	color: #ffffff;
	font-size: 90px;
	font-weight: 700;
	line-height: 108px;
}

#slider .header .block {
	position: relative;
	max-width: 500px;
	gap: 35px;
	padding-left: 30px;
}
#slider .header .block::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	background-color: #92a686;
}

#slider .header .desc {
	color: #ffffff;
}

#slider .button a {
	color: #114063;
	background-color: #fcc0ad;
	border-radius: 30px 30px 30px 0;
}
#slider .button a:hover {
	color: #0a4942;
	background-color: #ffffff;
}

/* risks */

#risks {
	position: relative;
	background-color: #1d2221;
}
#risks::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #ffffff30;
}

#risks .header {
	max-width: 720px;
	margin: 0 auto;
}
#risks .header .label {
	color: #fcc0ad;
	text-align: center;
}
#risks .header .title {
	color: #c8dcbc;
	font-size: 75px;
	line-height: 88px;
	text-align: center;
}
#risks .header .desc {
	color: #ffffff;
	text-align: center;
}

#risks .risks {
	display: flex;
	flex-wrap: wrap;
	gap: 50px 35px;
}
#risks .risks .item {
	position: relative;
	flex: 0 0 calc(25% - 3*35px/4);
	height: 165px;
	text-align: center;
	background-size: 0;
}
#risks .risks .item::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	width: 125px;
	height: 125px;
	background-image: inherit;
	background-position: center;
	background-repeat: no-repeat;
	margin: 0 auto;
}
#risks .risks .name {
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

#risks .footer {
	text-align: center;
}

/* communications */

#communications {
	position: relative;
	background-color: #1d2221;
	overflow: hidden;
	padding-bottom: 5vw;
}
#communications::before,
#communications::after {
	position: absolute;
	content: "";
}
#communications::before {
	top: 0;
	left: 50%;
	right: 0;
	bottom: 0;
	background-color: #133632;
}
#communications::after {
	left: -5px;
	right: -5px;
	bottom: 0;
	height: 5vw;
	background: url('img/communications.svg') top no-repeat;
	background-size: cover;
}

#communications .header {
	max-width: 720px;
	margin: 0 auto;
}
#communications .header .label {
	color: #fcc0ad;
	text-align: center;
}
#communications .header .title {
	color: #c8dcbc;
	font-size: 75px;
	line-height: 88px;
	text-align: center;
}

#communications .communications {
	display: flex;
	flex-wrap: wrap;
	gap: 110px;
}
#communications .communications .item:nth-child(odd) {
	flex: 0 0 calc(50% - 110px);
	display: flex;
	flex-direction: column;
	gap: 15px;
}
#communications .communications .item:nth-child(even) {
	flex: 0 0 50%;
}
#communications .communications .desc {
	color: #ffffff;
	font-size: 28px;
	font-weight: 300;
	line-height: 34px;
}
#communications .communications ul {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
#communications .communications li {
	position: relative;
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding-left: 60px
}
#communications .communications li::before,
#communications .communications li::after {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	margin: auto 0;
}
#communications .communications li::before {
	left: 0;
	width: 30px;
	height: 2px;
	background-color: #ffffff;
}
#communications .communications li::after {
	left: 20px;
	width: 8px;
	height: 8px;
	transform: rotate(45deg);
	border: solid #ffffff;
	border-width: 2px 2px 0 0;
}

/* companies */

#companies {
	background-color: #e8e8e8;
}

#companies .header {
	max-width: 720px;
	margin: 0 auto;
}
#companies .header .label,
#companies .header .title {
	text-align: center;
}

#companies .companies {
	display: flex;
	gap: 70px 50px;
}
#companies .companies .item {
	flex: 0 0 calc(33.333334% - 2*50px/3);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	text-align: center;
}
#companies .companies .item::before {
	position: absolute;
	content: "";
	top: 25px;
	right: -30px;
	width: 25px;
	height: 25px;
	transform: rotate(-45deg);
	border: solid #c8dcbc;
	border-width: 0 3px 3px 0;
}
#companies .companies .item:nth-child(3n)::before {
	content: none;
}
#companies .companies .name {
	max-width: 280px;
}
#companies .companies .desc {
	max-width: 340px;
}

/* manuals */

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

#manuals .header {
	gap: 0;
}
#manuals .header .block {
	flex-direction: row;
	gap: 35px;
}
#manuals .header .title {
	flex: 0 0 400px;
}
#manuals .header .desc {
	flex: 0 0 calc(100% - 435px - 75px);
}

#manuals .manuals {
	position: relative;
	margin: 0 75px;
}
#manuals .manuals::before,
#manuals .manuals::after {
	position: absolute;
	content: "";
	top: 0;
	right: 100%;
	bottom: 0;
}
#manuals .manuals::before {
	background: linear-gradient(to bottom, #c8dcbc, #c8dcbc50);
	aspect-ratio: 1 / 1;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
#manuals .manuals::after {
	width: 25px;
	background: url('img/manuals.svg') right no-repeat;
	background-size: cover;
}
#manuals .manuals .item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 35px 35px 35px 75px;
}
#manuals .manuals .item::before,
#manuals .manuals .item::after {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	background-color: #c8dcbc;
}
#manuals .manuals .item::before {
	left: 0;
	height: 1px;
}
#manuals .manuals .item::after {
	bottom: 0;
	width: 1px;
}
#manuals .manuals .desc {
	width: calc(100% - 335px);
}
#manuals .manuals .button {
	text-align: right;
	margin-top: -70px;
}
#manuals .manuals .button a {
	position: relative;
	background-color: #fcc0ad;
	padding-right: 70px;
	border-radius: 30px 30px 0 30px;
}
#manuals .manuals .button a:hover {
	color: #ffffff;
	background-color: #92a686;
}
#manuals .manuals .button a::before {
	position: absolute;
	content: "";
	top: 0;
	right: 25px;
	bottom: 0;
	width: 32px;
	height: 32px;
	background: url('img/download.svg') center no-repeat;
	margin: auto 0;
}

/* experts */

#experts {
	position: relative;
}
#experts::before,
#experts::after {
	position: absolute;
	content: "";
	left: 0;
}
#experts::before {
	top: 0;
	right: calc(50% - min(50%, 720px) + 75px);
	background: linear-gradient(to bottom, #c8dcbc50, transparent 50%);
	aspect-ratio: 1 / 1;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
#experts::after {
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #00000010;
}

#experts .container::before {
	position: absolute;
	content: "";
	top: -5px;
	left: 105px;
	right: 110px;
	height: 15px;
	background: url('img/experts.svg') top no-repeat;
	background-size: cover;
}

#experts .header {
	position: relative;
	gap: 0;
}
#experts .header .block {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 35px;
}
#experts .header .title {
	flex: 0 0 400px;
}
#experts .header .desc {
	flex: 0 0 calc(100% - 435px - 75px);
}
#experts .header .more {
	flex: 0 0 calc(100% - 435px - 75px);
	margin-left: 435px;
}
#experts .header .more a {
	color: #92a686;
}
#experts .header .more a:hover {
	color: #fcc0ad;
}

#experts .experts {
	display: flex;
	gap: 50px;
	width: calc(100% - 400px - 110px);
	margin-left: 435px;
}
#experts .experts .item {
	position: relative;
	flex: 0 0 320px;
	text-align: center;
	background-size: 0;
	padding-top: 260px;
}
#experts .experts .item::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	width: 231px;
	height: 231px;
	background-image: inherit;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 50%;
	margin: 0 auto;
}
#experts .experts .name,
#experts .experts .desc {
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
#experts .experts .name {
	color: #5f5f5f;
}
#experts .experts .desc {
	color: #92a686;
}
#experts .experts .desc a {
	color: #323232;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: normal;
	text-transform: none;
}
#experts .experts .desc a:hover {
	color: #fcc0ad;
}

#experts .footer {
	position: absolute;
	left: 35px;
	bottom: 265px;
}

/* examples */

#examples {
	position: relative;
	padding-bottom: 4vw;
}
#examples::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	height: 4vw;
	background: url('img/examples.svg') top center no-repeat;
	background-size: cover;
	z-index: -1;
}
#examples::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background-color: #efefef;
	margin: 0 auto;
	z-index: -1;
}

#examples .header {
	max-width: 720px;
	align-items: center;
	margin: 0 auto;
}
#examples .header .block {
	display: flex;
	flex-direction: column;
	gap: 35px;
}
#examples .header .label,
#examples .header .title,
#examples .header .desc,
#examples .header .button {
	text-align: center;
}

#examples .examples {
	display: flex;
	flex-wrap: wrap;
}
#examples .examples .item {
	position: relative;
	flex: 0 0 calc(50% - 50px);
}
#examples .examples .item::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #efefef;
}
#examples .examples .item:nth-child(odd) {
	text-align: right;
	padding: 35px 50px 35px 0;
}
#examples .examples .item:nth-child(even) {
	text-align: left;
	padding: 35px 0 35px 50px;
}
#examples .examples .name a {
	color: #114063;
	font-size: 32px;
	font-weight: 300;
	line-height: 38px;
}
#examples .examples .name a:hover {
	color: #fcc0ad;
}

/* news */

#news {
	position: relative;
	background-color: #1d2221;
}
#news::before {
	position: absolute;
	content: "";
	top: 400px;
	right: calc(50% + 360px);
	width: 50%;
	height: 100%;
	background-color: #0a4a42;
}

#news .header {
	max-width: 720px;
	align-items: center;
	margin: 0 auto;
}
#news .header .label {
	color: #fcc0ad;
	text-align: center;
}
#news .header .label a {
	color: #fcc0ad;
}
#news .header .label a:hover {
	color: #ffffff;
}
#news .header .title {
	color: #c8dcbc;
	font-size: 75px;
	line-height: 88px;
	text-align: center;
}

#news .news {
	display: flex;
	gap: 40px;
}
#news .news .item {
	flex: 0 0 calc(33.333334% - 2*40px/3);
}
#news .news .item:nth-child(2n) {
	margin-top: 60px;
}
#news .news .item a {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
#news .news .image {
	position: relative;
	overflow: hidden;
	padding-top: 60%;
	border-radius: 30px;
}
#news .news img {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
}
#news .news a:hover img {
	opacity: .5;
}
#news .news .name {
	color: #c8dcbc;
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;
}
#news .news a:hover .name {
	color: #ffffff;
}
#news .news .more {
	color: #ffffff;
}
#news .news a:hover .more {
	color: #fcc0ad;
}
#news .news .more::before {
	content: "[";
}
#news .news .more::after {
	content: "]";
}

/* services */

#services {
	position: relative;
	background-color: #1d2221;
}
#services::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #ffffff30;
}

#services .container {
	flex-direction: row;
	gap: 110px;
}

#services .header {
	flex: 0 0 calc(50% - 110px);
}
#services .header .block {
	display: flex;
	flex-direction: column;
	gap: 35px;
}
#services .header .label {
	color: #fcc0ad;
}
#services .header .title {
	color: #c8dcbc;
}
#services .header .desc {
	color: #ffffff;
}
#services .header .button {
	text-align: right;
}

#services .services {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	gap: 35px;
	margin-top: 110px;
}
#services .services .name {
	color: #c8dcbc;
}
#services .services .desc {
	color: #ffffff;
}

/* partners */

#partners {
	background-color: #1d2221;
	overflow: hidden;

	--partnersSpeed: 30s;
	--partnersDelay: calc(var(--partnersSpeed) / 2);
}

@keyframes partnersSlide {
	from { transform: translateX(100%); }
	to   { transform: translateX(-100%); }
}

#partners .container {
	gap: 0;
}

#partners .partners {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
}
#partners .partners ul {
	position: absolute;
	display: flex;
	justify-content: flex-start;
	align-items: center;

	animation-name: partnersSlide;
	animation-duration: var(--partnersSpeed);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
#partners .partners ul.delay {
	transform: translateX(100%);
	animation-delay: calc(var(--partnersDelay) * -1);
}
#partners .partners:hover ul {
	animation-play-state: paused;
}
#partners .partners li {
	padding: 0 60px;
}
#partners .partners a {
	display: block;
	width: 200px;
	height: 120px;
	overflow: hidden;
	text-indent: -99999px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: grayscale(1) invert(.3);
}
#partners .partners a:hover {
	filter: grayscale(0);
}

/* articles */

#articles {
	background-color: #1d2221;
}

#articles .header {
	align-items: center;
}

#articles .search {
	width: 500px;
	max-width: 100%;
}

#articles .search form {
	display: flex;
}
#articles .search input {
	width: 100%;
	font-size: 16px;
	line-height: 20px;
	background-color: #f4f4f4;
	padding: 7px 14px;
	border: none;
	border-radius: 0;
	outline: none;
}
#articles .search input:focus {	
	outline: none;
}
#articles .search input::placeholder {
	color: #999999;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: 1;
}
#articles .search input:focus::placeholder {
	opacity: 0;
}
#articles .search button {
	cursor: pointer;
	position: relative;
	min-width: 60px;
	height: 34px;
	background-color: #92a686;
	padding: 0;
	border: none;
	outline: none;
}
#articles .search button:hover {
	background-color: #fcc0ad;
}
#articles .search button::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 19px;
	height: 19px;
	background: url('img/search.png') center no-repeat;
	margin: auto;
	filter: brightness(0) invert(1);
}
#articles .search button:hover::before {
	filter: none;
}

#articles .slags {
	max-width: 1000px;
}
#articles .slags ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
}
#articles .slags a {
	display: block;
	color: #114063;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background-color: #fcc0ad;
	padding: 7px 14px;
}
#articles .slags .active a {
	color: #ffffff;
	background-color: #92a686;
}
#articles .slags a:hover {
	color: #0a4942;
	background-color: #ffffff;
}

#articles .articles {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
#articles .articles .item {
	flex: 0 0 calc(33.333334% - 2*40px/3);
}
#articles .articles .item a {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
#articles .articles .image {
	position: relative;
	overflow: hidden;
	padding-top: 60%;
	border-radius: 30px;
}
#articles .articles img {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
}
#articles .articles a:hover img {
	opacity: .5;
}
#articles .articles .date {
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
#articles .articles a:hover .date {
	color: #fcc0ad;
}
#articles .articles .name {
	color: #c8dcbc;
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;
}
#articles .articles a:hover .name {
	color: #ffffff;
}

/* perex */

#perex {
	background-color: #1d2221;
}

#perex .header {
	gap: 50px;
}
#perex .header .image {
	position: relative;
	width: 100%;
	padding-top: max(33.333334%, 200px);
	overflow: hidden;
}
#perex .header img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
}
#perex .header .desc {
	max-width: 1080px;
	color: #ffffff;
	padding: 0 20px;
	border-left: 3px solid #c8dcbc;
}

/* detail */

#detail {
	position: relative;
	overflow: hidden;
}
#detail::before {
	position: absolute;
	content: "";
	top: 70px;
	right: calc(50% - min(calc(50% - 30px), 720px) + 1150px);
	width: 100%;
	height: 575px;
	background-color: #c8dcbc;
}

#detail .container {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-height: 705px;
}

#detail article {
	flex: 0 0 100%;
	width: 100%;
	max-width: 1080px;
}

#detail article h2 {
	color: #abc19e;
	font-size: 32px;
	font-weight: 600;
	line-height: 38px;
}
#detail article h3 {
	color: #1d2221;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
#detail article h4 {
	font-weight: 700;
}
#detail article .name {
	color: #abc19e;
}

#detail article h5 a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 130px;
	color: #114063;
	font-size: 32px;
	line-height: 36px;
	text-decoration: none;
	padding: 10px calc(100% - 750px) 10px 250px;
	border: 1px solid #ebebeb;
}
#detail article h5 a:hover {
	color: #ffffff;
	background-color: #c8dcbc;
}
#detail article h5 a::before {
	position: absolute;
	content: "";
	top: 10px;
	left: 0;
	bottom: 10px;
	width: 200px;
	background: url('img/ee.png') center no-repeat;
	border-right: 1px solid #ebebeb;
}
#detail article h5 a:hover::before {
	filter: brightness(0) invert(1);
}
#detail article h5 a::after {
	position: absolute;
	content: "";
	top: 0;
	right: 50px;
	bottom: 0;
	width: 50px;
	height: 50px;
	transform: rotate(-45deg);
	margin: auto 0;
	border: solid #c8dcbc;
	border-width: 0 2px 2px 0;
}
#detail article h5 a:hover::after {
	border-color: #ffffff;
}

#detail article blockquote {
	padding: 0 20px;
	margin: 0 0 28px 0;
	border-left: 3px solid #c8dcbc;
}

#detail article ul {
	padding-left: 20px;
	margin-bottom: 28px;
}

#detail article li {
	position: relative;
	padding-left: 10px;
}
#detail article li::before {
	position: absolute;
	content: "›";
	left: 0;
}

#detail article p {
	margin-bottom: 28px;
}

#detail article a {
	text-decoration: underline;
}

#detail article figure {
	width: 100% !important;
}

#detail article img.size-full {
	width: 100%;
}

#detail article .gallery {
	margin-bottom: 28px;
}
#detail article .gallery h3 {
	color: #abc19e;
	margin-bottom: 10px;
}
#detail article .gallery .items {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
#detail article .gallery .item {
	flex: 0 0 calc(25% - (3*40px/4));
}
#detail article .gallery a {
	position: relative;
	display: block;
	width: 100%;
	background-color: #000000;
	overflow: hidden;
	padding-top: 100%;
}
#detail article .gallery a:hover::after {
	color: #ffffff;
}
#detail article .gallery img {
	position: absolute;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#detail article .gallery a:hover img {
	opacity: .5;
}

#detail article .files {
	margin-bottom: 28px;
}
#detail article .files h3 {
	color: #abc19e;
	margin-bottom: 10px;
}
#detail article .files .items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#detail article .files a {
	color: #114063;
}
#detail article .files a:hover {
	color: #abc19e;
}
#detail article .files strong {
	display: inline-block;
	min-width: 50px;
	color: #abc19e;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .15em;
}
#detail article .files span {
	color: #999999;
	font-size: 16px;
}
#detail article .files span::before {
	content: "[";
}
#detail article .files span::after {
	content: "]";
}

/* footer */

footer {
	position: relative;
	background-color: #1d2221;
	padding-top: 4vw;
}
footer.invert {
	background-color: #ffffff;
}
footer::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	height: 8vw;
	background: url('img/footer.png?v=1') center no-repeat;
	background-size: cover;
}

#footer {
	background-color: #0a4a42;
}

#footer .header {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#footer .footer {
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
}
#footer .footer .item {
	flex: 0 0 calc(37.5% - 2*35px/3);
	display: flex;
	flex-direction: column;
	gap: 35px;
}
#footer .footer .item:nth-child(3n) {
	flex-basis: calc(25% - 2*35px/3);
}
#footer .footer .name {
	color: #ffffff;
	font-size: 40px;
	font-weight: 300;
	line-height: 48px;
}

#footer .footer p, #footer .footer a {
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	line-height: 40px;
}
#footer .footer p a, #footer .footer p strong {
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
#footer .footer a:hover {
	color: #000000;
}

#footer .social {
	display: flex;
	gap: 10px;
}
#footer .social a {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	overflow: hidden;
	text-indent: -99999px;
	border: 1px solid #ffffff30;
	border-radius: 50%;
}
#footer .social a:hover {
	background-color: #ffffff;
}
#footer .social a::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-indent: 0;
	background-color: #ffffff;
}
#footer .social a:hover::after {
	background-color: #000000;
}

/* copyright */

#copyright {
	position: relative;
	background-color: #0a4a42;
}
#copyright::before {
	position: absolute;
	content: "";
	top: 0;
	left: 35px;
	right: 35px;
	height: 3px;
	background-color: #ffffff10;
}

#copyright .label,
#copyright .label a {
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
}
#copyright .label a:hover {
	color: #000000;
}

#copyright .menu {
	display: flex;
	flex-wrap: wrap;
}
#copyright .menu li::after {
	content: "|";
	padding: 0 10px;
}
#copyright .menu li:last-child::after {
	content: none;
}
#copyright .menu li, #copyright a {
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}
#copyright .menu a:hover {
	color: #000000;
}

/* svg */

.brand a {
	--svg: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172.2 59.4">\
	<path d="M12.7,1.5c4,0,7.1,1.8,7.1,6s-.9,3.3-2.9,4.1c2.5.7,3.5,3.2,3.5,4.8,0,4.6-3.6,6-7.7,6H3.1V1.5h9.6ZM6.4,10.1h6.3c2.5,0,3.8-1,3.8-2.6s-1.3-3-3.8-3h-6.3v5.6ZM6.4,19.3h6.3c1.8,0,4.4-.6,4.4-2.9s-2.5-3.2-4.4-3.2h-6.3v6.1Z"/>\
	<path d="M39.9,22.3h-15.4V1.5h15.3v3.2h-12v5.6h11.5v3.1h-11.5v5.6h12.1v3.3Z"/>\
	<path d="M43.2,1.5h15.2v1.5l-11.5,16.1h11.5v3.2h-16.2v-1.9l11.3-15.9h-10.3V1.5Z"/>\
	<path d="M89,6.3c-1.5-1.5-3.7-2.2-5.6-2.2-4.9,0-7.7,3.7-7.7,8.1,0,3.8,2.3,7.5,7.7,7.5s3.4-.4,5.1-1.8v-4.2h-5.8v-3h8.9v8.5c-2.1,2.3-4.7,3.6-8.2,3.6-7.7,0-11-5.1-11-10.6s3.8-11.1,11-11.1,5.6,1,7.7,3.2l-2.1,2.1Z"/>\
	<path d="M115.8,22.3h-3.9l-6.3-7.2h-4.4v7.2h-3.3V1.5c3.2,0,6.5,0,9.7,0,4.8,0,7.4,3.3,7.4,6.8s-1.5,5.9-5.7,6.5l6.2,6.9.4.6ZM101.1,4.5v7.6h6.3c2.8,0,4-1.8,4-3.7s-1.2-3.8-4-3.8h-6.4Z"/>\
	<path d="M135.3,19.1v-5.6h11.5v-3.1h-11.5v-5.6h12V1.5h-15.3v8.9h-10.3v-5.6h7V1.5h-10.3v20.8h10.4v-3.3h-7.1v-5.6h10.3v8.9h15.4v-3.3h-12.1Z"/>\
	<path d="M167,16.3V1.5h3.3v20.8h-2.5l-11.8-14.7v14.7h-3.4V1.5h2.6l11.8,14.8Z"/>\
	<path d="M24.5,58.1h-2.9l-2.8-7.4-2.3-7-2.3,7-2.7,7.3h-2.9L1,37.2h3.7l5.3,16,5.4-16h2.1l5.5,16,5.2-16h3.7l-7.4,20.9Z"/>\
	<path d="M46.3,53.7h-11.3l-2,4.4h-3.5l9.3-20.8h3.6l9.3,20.8h-3.5l-2-4.4ZM40.7,40.7l-4.4,9.9h8.8l-4.4-9.9Z"/>\
	<path d="M66.9,41.9c-1-1.4-3-2.3-5.2-2.3-2.8,0-4.8,1.2-4.8,3.2s2.3,2.6,5.1,3c4.3.6,8.4,1.8,8.4,6.5,0,4.7-4.3,6.4-8.6,6.4s-7.1-1.2-9-4.7l2.5-1.7c1.5,2.5,4.1,3.4,6.5,3.4s5.3-.8,5.3-3.5-2.4-3-5.3-3.4c-4.1-.6-8.1-1.6-8.1-6.1,0-4.3,4.3-6,8-6s6,.7,7.8,3.5l-2.5,1.7Z"/>\
	<path d="M88.4,58.1v-8.7h-11v8.7h-3.3v-20.8h3.3v9.1h11v-9.1h3.3v20.8h-3.3Z"/>\
	<path d="M97,58.1v-20.8h3.3v20.8h-3.3Z"/>\
	<path d="M120.9,52.1v-14.8h3.3v20.8h-2.5l-11.8-14.7v14.7h-3.4v-20.8h2.6l11.8,14.8Z"/>\
	<path d="M145.8,42c-1.5-1.5-3.7-2.2-5.6-2.2-4.9,0-7.7,3.7-7.7,8.1,0,3.8,2.3,7.5,7.7,7.5s3.4-.4,5.1-1.8v-4.2h-5.8v-3h8.9v8.5c-2.1,2.3-4.7,3.6-8.2,3.6-7.7,0-11-5.1-11-10.6s3.8-11.1,11-11.1,5.6,1,7.7,3.2l-2.1,2.1Z"/>\
	<path d="M170,37.3v12.2c0,6.1-4,9.2-9.1,9-4.6-.1-8.6-3.1-8.6-9v-12.2h3.3v12.2c0,3.8,2.2,5.8,5.3,6,3.3.2,5.8-2,5.8-6v-12.2h3.3Z"/>\
		</svg>');	
}

.facebook a::after {
	--svg: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 31">\
			<path d="M18.9,10h1.5v-2.6s-1.6-.2-2.4-.2c-2.6,0-3.9,1.8-3.9,4.2v2.3h-2.7v3h2.7v7.6h3.3v-7.6h2.5l.4-3h-2.9v-2.1c0-.8.7-1.5,1.5-1.5"/>\
		</svg>');
}
.linkedin a::after {
	--svg: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 31">\
			<path d="M8.3,23.2v-10.1h3.1v10.1h-3.1"/>\
			<path d="M19.5,12.9c-1.7,0-2.7,1-3.1,1.6h0v-1.4h-2.8v10.1h3.1v-5.8c0-.3,0-.6.1-.8.2-.6.7-1.2,1.6-1.2s1.6.9,1.6,2.2v5.6h3.1v-6c0-3-1.5-4.3-3.6-4.3"/>\
			<path d="M11.8,10c0,1-.9,1.9-1.9,1.9s-1.9-.9-1.9-1.9.9-1.9,1.9-1.9,1.9.9,1.9,1.9"/>\
		</svg>');
}
.youtube a::after {
	--svg: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 31">\
			<path d="M23.4,10.7c-.7-.7-1.6-.7-3.5-.8h-8.4c-1.8,0-2.8,0-3.5.8s-.9,2.9-.9,5,.1,4.2.9,5,1.6.7,3.5.8h8.4c1.8,0,2.8,0,3.5-.8s.9-2.9.9-5,0-4.2-.9-5ZM18,15.7h0c0,0-4.5,2.6-4.5,2.6v-5.3l4.5,2.6h0s0,0,0,0Z"/>\
		</svg>');
}

.brand a, .facebook a::after, .linkedin a::after, .youtube a::after {
	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;
}

/* media screen */

@media (max-width: 1400px) {
	header .menu {
		gap: 35px;
	}

	#slider .header .title {
		font-size: 75px;
		line-height: 88px;
	}
	#slider .header {
		gap: 50px;
		margin: 25px 0 50px 0;
	}

	#risks .header .title, 
	#communications .header .title {
		font-size: 60px;
		line-height: 72px;
	}
}

@media (max-width: 1300px) {
	header .menu {
		position: absolute;
		display: none;
		flex-direction: column;
		gap: 0;
		top: 120px;
		left: 0;
		right: 0;
		background-color: #133632;
		padding: 0;
		border: none;
		z-index: 1;
	}
	header.active .menu {
		display: flex;
	}
	header .menu li::before {
		position: absolute;
		content: "";
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background-color: #ffffff30;
	}
	header .menu a {
		font-size: 40px;
		line-height: 50px;
		padding: 30px 35px;
	}
	header .mobile {
		display: block;
	}

	#manuals .header .desc {
		flex-basis: calc(100% - 435px);
	}
	#manuals .manuals {
		margin: 0;
	}
	#manuals .manuals .item {
		padding: 35px;
	}

	#experts::before {
		right: 35px;
	}
	#experts .container::before {
		right: 35px;
	}
	#experts .header .desc,
	#experts .header .more {
		flex-basis: calc(100% - 435px);
	}
	#experts .experts {
		width: calc(100% - 435px);
	}
	#experts .experts .item {
		flex-basis: calc(50% - 50px/2);
	}
}

@media (max-width: 1100px) {
	main .header .title,
	#risks .header .title,
	#communications .header .title,
	#news .header .title {
		font-size: 50px;
		line-height: 60px;
	}

	#communications .communications {
		gap: 70px;
	}
	#communications .communications .item:nth-child(2n+1) {
		flex-basis: calc(50% - 75px);
	}
	#communications .communications li {
		font-size: 16px;
		line-height: 26px;
	}

	#manuals .header .title {
		flex-basis: 220px;
	}
	#manuals .header .desc {
		flex-basis: calc(100% - 255px);
	}

	#experts .header .title {
		flex-basis: 320px;
	}
	#experts .header .desc {
		flex-basis: calc(100% - 355px);
	}
	#experts .header .more {
		flex-basis: calc(100% - 355px);
		margin-left: 355px;
	}
	#experts .experts {
		width: calc(100% - 355px);
		margin-left: 355px;
	}

	#news::before {
		right: 75%;
	}
	#news .news .item {
		flex-basis: calc(50% - 40px/2);
	}
	#news .news .item:nth-child(n+3) {
		display: none;
	}

	#services .container {
		gap: 70px;
	}
	#services .header {
		flex-basis: calc(50% - 70px);
	}
	#services .header .button {
		text-align: left;
	}
	#services .services {
		margin-top: 100px;
	}

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

	#detail article .gallery .items {
		gap: 30px;
	}
	#detail article .gallery .item {
		flex-basis: calc(25% - (3*30px/4));
	}
}

@media (max-width: 1000px) {
	#slider .container::before {
		left: unset;
		right: 35px;
	}

	#experts .experts {
		gap: 50px 35px;
	}
	#experts .experts .item {
		flex-basis: calc(50% - 35px/2);
		padding-top: 240px;
	}
	#experts .experts .item::before {
		width: 220px;
		height: 220px;
	}
}

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

	header .top,
	header .brand,
	header .menu a,
	header .mobile {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .header .desc {
		font-size: 26px;
		line-height: 32px;
	}
	main .name,
	#examples .examples .name a {
		font-size: 26px;
		line-height: 36px;
	}

	#slider::before {
		border-bottom: 1px solid #ffffff30;
	}
	#slider::after {
		bottom: unset;
		height: 47vw;
	}
	#slider .container {
		min-height: unset;
		padding-top: 47vw;
		padding-bottom: 0;
	}
	#slider .container::before {
		top: 24vw;
		left: 0;
		right: 0;
		width: 21vw;
		bottom: unset;
		height: 26vw;
		background-size: cover;
		margin: 0 auto;
	}
	#slider .header {
		gap: 35px;
		margin-top: 50px;
	}
	#slider .header .title {
		color: #c8dcbc;
		font-size: 50px;
		font-weight: 400;
		line-height: 60px;
	}
	#slider .header .block {
		gap: 25px;
		padding-left: 25px;
	}

	#communications .communications {
		gap: 35px;
	}
	#communications .communications .item:nth-child(2n+1) {
		flex-basis: calc(50% - 35px);
	}
	#communications .communications .desc {
		font-size: 26px;
		line-height: 32px;
	}

	#companies .companies .desc {
		font-size: 16px;
		line-height: 24px;
	}

	#manuals .manuals .item {
		gap: 10px;
	}
	#manuals .manuals .desc {
		width: 100%;
	}
	#manuals .manuals .button {
		margin-top: 0;
	}

	#experts::before,
	#experts .container::before {
		right: 20px;
	}
	#experts .header .title,
	#experts .header .desc {
		flex-basis: calc(50% - 35px/2);
	}
	#experts .header .more {
		flex-basis: calc(50% - 35px/2);
		margin-left: calc(50% + 35px/2);
	}
	#experts .experts {
		width: 100%;
		margin-left: 0;
	}
	#experts .footer {
		position: static;
		text-align: center;
	}

	#examples .examples .item {
		flex-basis: calc(50% - 35px);
	}
	#examples .examples .item:nth-child(odd) {
		padding-right: 35px;
	}
	#examples .examples .item:nth-child(even) {
		padding-left: 35px;
	}

	#services .container {
		gap: 35px;
	}
	#services .header {
		flex-basis: calc(50% - 35px);
	}

	#detail article h5 a {
		font-size: 21px;
		line-height: 28px;
		padding-right: 100px;
	}
	#detail article .gallery .items {
		gap: 20px;
	}
	#detail article .gallery .item {
		flex-basis: calc(33.333334% - (2*20px/3));
	}

	#footer .footer .item, 
	#footer .footer .item:nth-child(3n) {
		flex-basis: calc(50% - 35px/2);
	}

	#copyright::before {
		left: 20px;
		right: 20px;
	}
}

@media (max-width: 700px) {
	#experts  .header .block {
		flex-direction: column;
		gap: 15px;
	}
	#experts  .header .title {
		flex-basis: auto;
	}
	#experts .header .more {
		margin-left: 0;
	}
}

@media (max-width: 600px) {
	header .contact {
		display: none;
	}

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

	#communications .container {
		gap: 15px;
	}
	#communications .communications {
		flex-direction: column;
	}
	#communications .communications ul {
		gap: 15px;
	}

	#companies .companies {
		flex-direction: column;
	}
	#companies .companies .item::before {
		top: unset;
		left: 0;
		right: 0;
		bottom: -45px;
		transform: rotate(45deg);
		margin: 0 auto;
	}

	#manuals .header .block {
		flex-direction: column;
		gap: 15px;
	}
	#manuals .header .title {
		flex-basis: auto;
	}
	#manuals .manuals .item {
		padding: 20px;
	}

	#experts .experts {
		flex-direction: column;
	}
	#experts .experts .item::before {
		width: 231px;
		height: 231px;
	}

	#examples .examples {
		flex-direction: column;
	}
	#examples .examples .item,
	#examples .examples .item:nth-child(odd),
	#examples .examples .item:nth-child(even) {
		text-align: left;
		padding: 25px 0;
	}

	#news .news {
		flex-direction: column;
		gap: 50px;
	}
	#news .news .item:nth-child(2n) {
		margin-top: 0;
	}

	#services .container {
		flex-direction: column;
		gap: 50px;
	}
	#services .header .block {
		gap: 25px;
	}
	#services .services {
		margin-top: 0;
	}

	#articles .articles {
		flex-direction: column;
		gap: 50px;
	}

	#detail article h5 a {
		padding-left: 30px;
	}
	#detail article h5 a::before {
		content: none;
	}
	#detail article .gallery .items {
		justify-content: center;
		gap: 10px;
	}
	#detail article .gallery .item {
		flex-basis: calc(50% - (10px/2));
		max-width: 240px;
	}

	#footer .footer {
		flex-direction: column;
		gap: 50px;
	}
	#footer .footer .item {
		gap: 25px;
	}
}

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

	header .top,
	header .brand,
	header .menu a,
	header .mobile {
		padding-left: 10px;
		padding-right: 10px;
	}

	header .menu a {
		font-weight: 400;
		padding-top: 25px;
		padding-bottom: 25px;
	}

	main .container {
		gap: 50px;
	}

	main .header .title,
	#slider .header .title,
	#risks .header .title,
	#communications .header .title,
	#news .header .title {
		font-size: 40px;
		line-height: 50px;
	}

	main .header .desc,
	#communications .communications .desc {
		font-size: 22px;
		line-height: 26px;
	}

	#experts::before,
	#experts .container::before {
		right: 10px;
	}

	footer .container {
		padding-top: 35px;
		padding-bottom: 35px;
	}

	#copyright::before {
		left: 10px;
		right: 10px;
	}
}

@media (max-width: 400px) {
	#detail article .gallery .item {
		flex-basis: 100%;
	}
}