/*Theme Name: Petrus
Theme URI:
Author: Mikhail Epikhin
Author URI:
Description: Original theme
Version: 1.0*/

@font-face {
	font-family: 'Lato';
	src: url('fonts/Lato-Light.eot');
	src: local('☺'), url('fonts/Lato-Light.woff') format('woff'), url('fonts/Lato-Light.ttf') format('truetype'), url('fonts/Lato-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Lato';
	src: url('fonts/Lato-LightItalic.eot');
	src: local('☺'), url('fonts/Lato-LightItalic.woff') format('woff'), url('fonts/Lato-LightItalic.ttf') format('truetype'), url('fonts/Lato-LightItalic.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Lato';
	src: url('fonts/Lato-Regular.eot');
	src: local('☺'), url('fonts/Lato-Regular.woff') format('woff'), url('fonts/Lato-Regular.ttf') format('truetype'), url('fonts/Lato-Regular.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Lato';
	src: url('fonts/Lato-Italic.eot');
	src: local('☺'), url('fonts/Lato-Italic.woff') format('woff'), url('fonts/Lato-Italic.ttf') format('truetype'), url('fonts/Lato-Italic.svg') format('svg');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'Heebo';
	src: url('fonts/Heebo-Light.eot');
	src: local('☺'), url('fonts/Heebo-Light.woff') format('woff'), url('fonts/Heebo-Light.ttf') format('truetype'), url('fonts/Heebo-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Heebo';
	src: url('fonts/Heebo-Regular.eot');
	src: local('☺'), url('fonts/Heebo-Regular.woff') format('woff'), url('fonts/Heebo-Regular.ttf') format('truetype'), url('fonts/Heebo-Regular.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}

html{height: 100%;}
body{margin: 0 auto; height: 100%; white-space: normal; font-family: 'Lato', sans-serif; color: #464646; background: #FFFFFF; line-height: 1.1; font-size: 16px; font-weight: normal;}

a,input{color: #464646; text-decoration: none;}
a, input, label, label::before, select, textarea, a *, button, .button, .header, .slick-prev::before, .slick-next::before, .popup-container, .popup{
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

*{position: relative; margin: 0px; padding: 0px; list-style: none; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; background: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px; border: 0; font-family: inherit; font-weight: inherit; line-height: inherit;}

b, strong, b *, strong *{font-weight: bold;}
p, p *{line-height: 1.4;}

.wrapper{margin: 0 auto; max-width: 1400px; padding: 30px;}
.phone{white-space: nowrap;}

.photo picture{position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden;}
.photo picture img{display: block; width: 100%; height: 100%; object-fit: cover;}

@media only screen and (max-width: 767px) {
body{font-size: 16px;}
::-webkit-scrollbar{width: 0px; height: 0px; background: transparent;}
.wrapper{padding-left: 20px; padding-right: 20px;}
}

/* Кнопки */

.button{display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 0px 40px; height: 60px; color: #FFFFFF; font-family: 'Lato', sans-serif; font-size: 20px; font-weight: bold; background: #EA0000; border-radius: 5px; cursor: pointer;}
.button:hover{color: #FFFFFF; background: #181818;}

.btn-sm{padding: 0px 15px; height: 40px;}

.btn-white{min-width: 150px; color: #464646; font-size: 16px; background: #FFFFFF;}

.btn-tiny{padding: 0px 15px; min-width: 142px; height: 30px; font-size: 14px; background: #181818; border: 1px solid #181818;}
.btn-tiny:hover{color: #181818; background: transparent}

@media only screen and (max-width: 767px) {
.button{font-size: 16px; height: 46px;}

.btn-sm{height: 30px; font-size: 14px;}

.btn-white{min-width: 130px; font-size: 14px;}

}

/* Поля форм */

input::-webkit-input-placeholder{color: #9990EA;}
input:-moz-placeholder{color: #9990EA;}
textarea::-webkit-input-placeholder{color: #9990EA;}
textarea:-moz-placeholder{color: #9990EA;}
button{background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;}

:active, :hover, :focus{outline: 0; outline-offset: 0;}
textarea{resize: none; overflow: auto; min-height: 120px}

/* Форматирование текста */

.story{}
.story > :first-child{margin-top: 0px;}
.story > :last-child{margin-bottom: 0px;}
.story *{font-size: 16px;}
.story p{margin: 15px 0px;}
.story h1{font-size: 48px; font-weight: bold;}
.story h2{margin-top: 30px; margin-bottom: 15px; line-height: 1.1; font-size: 24px; font-weight: bold;}
.story h3{margin-top: 30px; line-height: 1.3; font-size: 18px; font-weight: bold;}
.story h1 *, .story h2 *, .story h3 *{font-weight: bold;}
.story ul, .story ol{margin: 30px 0px; counter-reset: myCounter;}
.story li{margin: 15px 0px; padding-left: 30px; line-height: 1.4;}
.story li *{line-height: 1.4;}
.story li::before{position: absolute; left: 0px; top: 0px; display: block; line-height: 1.4;}
.story ul li::before{content: ""; display: block; width: 21px; height: 21px; background: url('images/icons/bullet.svg') center center no-repeat; background-size: 6px 6px;}
.story ol li::before{counter-increment: myCounter; content: counter(myCounter) ".";}
.story img{margin: 30px 0px; border-radius: 0px;}
.story .wp-caption{margin: 30px 0px;}
.story .wp-caption img{margin: 0px;}
.story .wp-caption-text{margin: 15px 0px 0px; text-align: center; font-size: 14px;}
.story blockquote{margin: 30px 45px;}
.story blockquote *{line-height: 1.3; font-size: 20px;}
.story a{text-decoration: underline;}
.story a:hover{color: #EA0000;}

@media only screen and (max-width: 767px) {

}

/* Slick Slider */

.slick-slider{}
.slick-prev, .slick-next{outline: none; position: absolute; top: 0; bottom: 0; display: block; width: 90px; text-indent: 9999px; text-align: unset; white-space: nowrap; border-radius: 0px; overflow: hidden; cursor: pointer; z-index: 1;}
.slick-prev{left: 20px;}
.slick-next{right: 20px;}
.slick-disabled{opacity: 0; visibility: hidden;}

.slick-prev::before, .slick-next::before{content: ""; position: absolute; top: 50%; right: 50%; display: block; width: 45px; height: 45px; background: center center no-repeat #181818; background-size: 16px 16px; border-radius: 50%; box-shadow: 0px 2px 15px 0px rgba(22, 18, 61, 0.1); transform: translate(50%, -50%);}
.slick-prev:hover::before, .slick-next:hover::before{background-color: rgba(116, 116, 116, 0.7);}
.slick-prev::before{background-image: url('images/icons/arrow-left-white.svg');}
.slick-next::before{background-image: url('images/icons/arrow-right-white.svg');}

@media only screen and (max-width: 767px) {
.slick-prev, .slick-next{width: 60px;}
.slick-prev{left: 0px;}
.slick-next{right: 0px;}
.slick-prev::before, .slick-next::before{width: 30px; height: 30px; background-size: 10px 10px;}
}

/* Шапка */

.header{position: fixed; top: 0px; left: 0px; right: 0px; display: flex; justify-content: space-between; align-items: center; gap: 50px; padding: 0px 65px; min-height: 85px; background: rgba(24, 24, 24, 0.75); z-index: 9;}
.header-scroll{background: rgba(24, 24, 24, 0.5);}

.header .left, .header .center, .header .right{display: flex; align-items: center;}
.header .left{display: none;}
.btn-phone{display: block; width: 50px; height: 50px; background: url('images/icons/phone.svg') center center no-repeat; background-size: 30px 30px;}

.petrus-logo-header{display: inline-block; width: 228px; height: 50px; background: url('images/petrus-logo-white.svg') center center no-repeat; background-size: contain;}

.header .right{flex: 1; justify-content: space-between; max-width: 870px;}

.main-menu{display: flex; align-items: center;}
.main-menu > li > a{display: block; padding: 0px 15px; color: #FFFFFF; line-height: 44px;}
.main-menu > li > a:hover{color: #F8A5A5;}

.btn-menu{display: none; width: 50px; height: 50px; background: url('images/icons/menu.svg') center center no-repeat; background-size: 30px 30px;}

@media only screen and (max-width: 1280px) {
.header{gap: 10px; padding: 0px 50px;}

.header .left{flex: 1; display: flex;}

.header .right{justify-content: flex-end; max-width: unset;}
.main-menu{display: none;}
.header .right .button{display: none;}

.btn-menu{display: block;}
}

@media only screen and (max-width: 1080px) {

}

@media only screen and (max-width: 767px) {
.header{padding: 0px 0px; min-height: 62px;}

.petrus-logo-header{width: 140px; height: 30px;}

.btn-phone, .btn-menu{width: 62px; height: 62px; background-size: 20px 20px;}
}

/* Попапы */

.popup-container{position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; display: flex; justify-content: center; align-items: center; padding: 30px; opacity: 0; visibility: hidden; z-index: 90;}
.popup-visible{opacity: 1; visibility: visible;}
.popup-container > .popup-overlay{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.7); cursor: pointer;}
.popup{margin-top: -50px; padding: 60px 20px 50px; width: 540px; max-height: 100vh; background: #181818; box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.5); overflow-y: scroll; scrollbar-width: none;}
.popup-visible .popup{margin-top: 0px;}
.popup::-webkit-scrollbar{width: 0px; height: 0px; background: transparent;}
.popup > .popup-close{position: absolute; top: 10px; right: 10px; padding: 0px; width: 50px; height: 50px; background: url('images/icons/close.svg') center center no-repeat; background-size: 30px 30px;}

#popup-menu{justify-content: flex-end; padding: 0px;}
.popup-menu{display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 30px; margin-top: 0px; margin-right: -50px; width: 300px; height: 100vh;}
.popup-visible .popup-menu{margin-right: 0px;}

.mobile-menu a{display: block; padding: 7px 0px; text-align: center; color: #D1D1D1; line-height: 1.4; font-size: 20px; font-weight: bold;}
.popup .button{flex-shrink: 0;}

/* Заголовок страницы */

.page-header{margin-bottom: 40px;}
.page-header .headline{display: block; font-size: 48px; font-weight: bold;}

@media only screen and (max-width: 1280px) {
.page-header{margin-bottom: 30px;}
.page-header .headline{font-size: 38px;}
}

@media only screen and (max-width: 767px) {
.page-header{margin-bottom: 25px;}
.page-header .headline{font-size: 32px;}
}

/* Простая страницы */

.simple-page{padding-top: 115px;}

@media only screen and (max-width: 767px) {
.simple-page{padding-top: 62px;}
}

/* Главная страница. Первый экран */

.home-hero{display: flex; justify-content: center; align-items: flex-end; padding: 140px 50px 140px; min-height: 100vh;}
.home-hero .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
.home-hero .content{padding: 0px 20px 5px; text-align: center; color: #FFFFFF; background: rgba(24, 24, 24, 0.17); backdrop-filter: blur(1px);}
.home-hero .page-header{display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 10px;}
.home-hero .page-header::after{content: ""; display: block; width: 100%; max-width: 670px; height: 1px; background: #FFFFFF;}
.home-hero .headline{line-height: 1.2; font-family: 'Heebo', sans-serif; font-weight: normal;}
.home-hero .caption{font-size: 28px; letter-spacing: 3px;}

@media only screen and (max-width: 1280px) {
.home-hero{padding: 60px 50px; height: 480px; min-height: unset;}
}

@media only screen and (max-width: 767px) {
.home-hero{padding: 40px 20px; height: 415px;}
.home-hero .headline{line-height: 1.1;}
.home-hero .caption{font-size: 14px; letter-spacing: 2px;}
}

/* Главная страница. О нас */

.home-about{display: flex; align-items: center; padding: 0px 110px;}
.home-about-1{padding-top: 30px; padding-bottom: 30px;}
.home-about .left, .home-about .right{flex-shrink: 0; width: 50%; padding: 55px;}

.home-about .above-headline{display: block; margin-bottom: 24px; font-family: 'Heebo', sans-serif; font-size: 28px;}
.home-about .headline{display: block; color: #181818; line-height: 1.4; font-family: 'Heebo', sans-serif; font-size: 38px;}
.home-about .button{margin-top: 30px;}
.home-about .story{color: #181818;}
.home-about .story *{font-size: 18px;}

.home-photo{height: 672px;}

@media only screen and (max-width: 1280px) {
.home-about{padding: 0px;}
.home-about .left, .home-about .right{padding: 50px;}

.home-photo{height: 480px;}
}

@media only screen and (max-width: 767px) {
.home-about{flex-direction: column; align-items: stretch; gap: 30px; padding: 40px 20px;}
.home-about-2{gap: 5px;}
.home-about .left, .home-about .right{padding: 0px; width: 100%;}

.home-about .above-headline{margin-bottom: 10px; font-size: 16px;}
.home-about .headline{line-height: 1.2; font-size: 22px;}
.home-about .button{margin-top: 20px;}
.home-about .story *{font-size: 16px;}

.home-photo{height: 320px;}
}

/* Главная страница. Услуги */

.services{padding: 0px 80px;}
.services-grid{display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;}

.services-grid-item:nth-child(5n + 1),
.services-grid-item:nth-child(5n + 2){grid-column: span 3;}
.services-grid-item:nth-child(5n + 3),
.services-grid-item:nth-child(5n + 4),
.services-grid-item:nth-child(5n + 5){grid-column: span 2;}

.services-grid-item{display: flex; justify-content: center; align-items: center; padding: 30px; min-height: 440px; background: #000000;}
.services-grid-item .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; opacity: 0.75;}
.services-grid-item .content{display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;}
.services-grid-item .title{color: #FFFFFF; line-height: 1.3; font-family: 'Heebo', sans-serif; font-size: 38px;}

@media only screen and (max-width: 1280px) {
.services{padding: 0px 50px;}

.services-grid-item .title{font-size: 32px;}
}

@media only screen and (max-width: 1080px) {
.services-grid{grid-template-columns: repeat(2, 1fr);}
.services-grid-item{grid-column: span 1 !important; min-height: 320px;}
}

@media only screen and (max-width: 767px) {
.services{padding: 0px 20px;}
.services-grid{grid-template-columns: repeat(1, 1fr);}
.services-grid-item{min-height: 240px;}
.services-grid-item .title{font-size: 28px;}
}

/* Главная страница. Галерея */

.home-gallery{display: flex; align-items: stretch; min-height: 620px;}
.home-gallery .left, .home-gallery .right{flex-shrink: 0; width: 50%;}

.home-gallery .left{display: flex; justify-content: center; align-items: center; background: #BDBDBD; overflow: hidden;}
.home-gallery .gallery-slider{position: absolute; top: 0px; left: 100px; right: 100px; bottom: 0px; opacity: 0.9;}
.home-gallery .gallery-slider .slick-list{height: 100%; overflow: visible;}
.home-gallery .gallery-slider .slick-track, .home-gallery .gallery-slider .slide{height: inherit;}
.home-gallery .gallery-slider .slide .photo{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}

.home-gallery .left .content{display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px; text-align: center; color: #FFFFFF; background: rgba(70, 70, 70, 0.6); border-radius: 10px;}
.home-gallery .left .headline{line-height: 60px; font-family: 'Heebo', sans-serif; font-size: 43px;}
.home-gallery .left .social{display: flex; gap: 10px}
.home-gallery .left .social-item{flex-shrink: 0; display: block; width: 39px; height: 39px; background: center center no-repeat; background-size: contain;}
.home-gallery .left .social-item.instagram{background-image: url('images/social/instagram-white.png');}
.home-gallery .left .social-item.facebook{background-image: url('images/social/facebook-white.png');}

.home-gallery .right{display: flex; align-items: center; padding: 40px;}
.home-gallery .right .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
.home-gallery .right .story{max-width: 720px;}
.home-gallery .right .story *{font-size: 18px;}

@media only screen and (max-width: 1280px) {
.home-gallery .gallery-slider{left: 40px; right: 40px;}
}

@media only screen and (max-width: 1080px) {
.home-gallery .gallery-slider{left: 0px; right: 0px;}
}

@media only screen and (max-width: 767px) {
.home-gallery{flex-direction: column; align-items: stretch; min-height: unset;}
.home-gallery .left, .home-gallery .right{width: 100%;}
.home-gallery .left{min-height: 280px;}
.home-gallery .left .content{padding: 8px 15px;}
.home-gallery .left .headline{line-height: 38px; font-size: 28px;}

.home-gallery .right{padding: 40px 20px;}
.home-gallery .right .story *{font-size: 16px;}
}

/* Главная страница. Сравнение */

.home-comparasion{padding: 60px 100px; text-align: center;}
.home-comparasion .headline{display: block; font-family: 'Heebo', sans-serif; font-size: 30px;}
.comparasion-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px;}
.comparasion-grid .title{display: block; font-size: 21px;}
.comparasion-grid .desc{margin: 12px auto 0px; max-width: 450px;}
.comparasion-grid .desc *{line-height: 1.5; font-size: 17px;}

@media only screen and (max-width: 1280px) {
.home-comparasion{padding: 60px 50px;}
}

@media only screen and (max-width: 1080px) {
.comparasion-grid{grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 767px) {
.home-comparasion{padding: 50px 20px;}
.home-comparasion .headline{font-size: 28px;}
.comparasion-grid{margin-top: 50px;}
.comparasion-grid .title{font-size: 16px;}
.comparasion-grid .desc{margin-top: 10px;}
.comparasion-grid .desc *{line-height: 1.4; font-size: 14px;}
}

@media only screen and (max-width: 480px) {
.comparasion-grid{grid-template-columns: repeat(1, 1fr); gap: 30px; margin-top: 30px;}
}

/* Главная страница. Цифры */

.numbers{display: flex; align-items: center; gap: 40px; padding: 40px; color: #FFFFFF; background: #181818; overflow-x: hidden;}
.numbers-locations, .numbers-numbers{flex-shrink: 0; width: 50%;}
.numbers-locations ul{margin: 0 auto; max-width: 480px;}
.numbers-locations li{line-height: 1; font-size: 70px; font-weight: bold;}
.numbers-locations li:nth-child(odd){text-align: left;}
.numbers-locations li:nth-child(even){text-align: right;}

.numbers-numbers ul{display: flex; flex-direction: column; gap: 20px;}
.numbers-numbers li{display: flex; align-items: center; gap: 20px; font-size: 30px; font-weight: bold;}
.numbers-numbers li strong{display: block; min-width: 200px; font-size: 65px;}
.numbers-numbers li br{display: none;}

@media only screen and (max-width: 1280px) {
.numbers-locations li{max-width: 360px; font-size: 48px;}
.numbers-numbers li{gap: 15px; font-size: 20px;}
.numbers-numbers li strong{min-width: 90px; font-size: 30px;}
}

@media only screen and (max-width: 767px) {
.numbers{padding: 40px 20px;}
.numbers-locations li{max-width: 210px; font-size: 30px;}
.numbers-numbers ul{gap: 15px;}
.numbers-numbers li{gap: 10px; font-size: 14px;}
.numbers-numbers li strong{min-width: 60px; font-size: 20px;}
}

@media only screen and (max-width: 480px) {
.numbers{flex-direction: column; align-items: center;}
.numbers-locations, .numbers-numbers{width: unset;}
}

/* Проекты. Категория */

.projects-header{display: flex; align-items: flex-end; padding: 145px 100px 60px; min-height: 685px;}
.projects-header .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
.projects-header .headline{color: #FFFFFF; line-height: 1.2; font-family: 'Heebo', sans-serif; font-size: 60px; font-weight: normal;}

.projects{padding: 100px 100px 60px;}
.projects-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;}
.projects-grid-item .photo{display: block; padding-bottom: 125%; border-radius: 8px 38px 8px 8px; overflow: hidden;}
.projects-grid-item .project-cats{position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 5px;}
.projects-grid-item .project-cat{display: inline-block; padding: 6px 12px; color: #FFFFFF; font-size: 14px; background: #181818; border-radius: 7px;}
.projects-grid-item .project-cat:hover{background: rgba(116, 116, 116, 0.7);}
.projects-grid-item .title{display: block; margin-top: 20px; line-height: 1.4; font-family: 'Heebo', sans-serif; font-size: 22px; font-weight: bold;}
.projects-grid-item .desc{margin-top: 5px;}
.projects-grid-item .button{margin-top: 25px;}

@media only screen and (max-width: 1280px) {
.projects-header{min-height: 480px;}
.projects-grid{grid-template-columns: repeat(3, 1fr);}
}

@media only screen and (max-width: 1080px) {
.projects-grid{grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 767px) {
.projects-header{padding: 92px 20px 40px; min-height: 415px;}
.projects-header .page-header{margin-bottom: 0px;}
.projects-header .headline{font-size: 38px;}

.projects{padding: 60px 20px 40px;}
.projects-grid{grid-template-columns: repeat(1, 1fr);}
}

/* Проекты. Страница проекта */

.project-header{padding: 135px 100px 30px; color: #D1D1D1; background: #181818;}
.project-header .page-header{}
.project-header .desc{max-width: 720px;}
.project-header .desc *{font-size: 22px;}

.project-header .project-browse{display: flex; justify-content: flex-end; margin-top: 20px;}
.project-header .project-browse .browse-link{display: flex; align-items: center; gap: 10px; color: #FFFFFF; font-family: 'Heebo', sans-serif; font-size: 32px;}
.project-header .project-browse .browse-link a{color: #FFFFFF;}
.project-header .project-browse .browse-link a:hover{color: #F8A5A5;}

.project-gallery{padding: 20px 100px 100px; background: #E0E0E0;}
.project-gallery .gallery{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.project-gallery .gallery .gallery-item:nth-of-type(4n + 2), .project-gallery .gallery .gallery-item:nth-of-type(4n + 3){grid-column: span 2;}
.project-gallery .gallery br{display: none;}
.project-gallery .gallery .gallery-item{margin-top: 0px !important; width: unset !important; float: none !important;}
.project-gallery .gallery .gallery-item .gallery-icon{padding-bottom: 141%; height: 100%;}
.project-gallery .gallery .gallery-item:nth-of-type(4n + 2) .gallery-icon, .project-gallery .gallery .gallery-item:nth-of-type(4n + 3) .gallery-icon{padding-bottom: 71%;}
.project-gallery .gallery .gallery-item .gallery-icon a{position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; display: block; overflow: hidden;}
.project-gallery .gallery .gallery-item .gallery-icon a img{display: block; width: 100% !important; height: 100% !important; border: 0px !important; object-fit: cover;}

.projects-latest{padding: 0px 100px 70px; background: #E0E0E0; overflow-x: hidden;}
.projects-slider{margin: 0px -20px;}
.projects-slider .slide{padding: 0px 20px;}

@media only screen and (max-width: 1080px) {
.project-gallery{padding: 20px 50px 100px;}

.projects-latest{padding: 0px 50px 70px;}
}

@media only screen and (max-width: 767px) {
.project-header{padding: 93px 20px 20px;}
.project-header .desc *{font-size: 16px;}
.project-header .project-browse{margin-top: 25px;}
.project-header .project-browse .browse-link{gap: 5px; font-size: 16px;}

.project-gallery{padding: 20px 20px 60px;}
.project-gallery .gallery{gap: 10px;}

.projects-latest{padding: 0px 20px 60px;}
}

/* Блог. Категория */

.blog-header{}
.blog-header .bg{height: 800px;}

.blog-intro{padding: 60px 50px;}
.blog-intro .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
.blog-intro .content{max-width: 860px;}

.blog-cats{padding: 25px 50px 50px;}
.blog-menu{display: flex; gap: 40px;}
.blog-menu > li > a{color: #181818; font-family: 'Heebo', sans-serif; font-size: 38px;}
.blog-menu > li > a:hover, .blog-menu > li.current-menu-item > a{color: #D1D1D1;}

.blog{padding: 0px 50px 30px;}
.blog-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.blog-grid-item{padding-bottom: 75%;}
.blog-grid-item .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
.blog-grid-item .bg::after{content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.55);}

.blog-card{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 30px; color: #FFFFFF;}
.blog-card .above{display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.blog-card .meta{display: flex; align-items: center; gap: 8px;}
.blog-card .meta-item{display: inline-flex; align-items: center; gap: 8px; font-size: 12px;}
.blog-card .meta-item.reading-time::before{flex-shrink: 0; content: ""; display: block; width: 2px; height: 2px; background: #FFFFFF; border-radius: 50%;}

.blog-card .post-cat{display: inline-block; margin-bottom: 12px; padding: 6px 12px; color: #FFFFFF; font-size: 14px; background: #181818; border-radius: 7px;}
.blog-card .post-cat:hover{background: rgba(116, 116, 116, 0.7);}
.blog-card .title{display: block; color: #FFFFFF; line-height: 1.2; font-size: 26px; font-weight: bold;}
.blog-card .title:hover{color: #F8A5A5;}

.blog-card .counters{margin-top: 15px; padding-top: 15px; border-top: 1px solid #FFFFFF;}
.blog-card .counters-item{display: flex; align-items: center; gap: 6px; font-size: 12px;}
.blog-card .counters-item::before{flex-shrink: 0; content: ""; display: block; width: 19px; height: 19px; background: center center no-repeat; background-size: contain;}
.blog-card .counter-views::before{background-image: url('images/icons/views.svg');}

@media only screen and (max-width: 1280px) {
.blog-header .bg{height: 540px;}
.blog-grid{grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 1080px) {
.blog-header .bg{height: 415px;}

.blog-grid-item{padding-bottom: unset;}
.blog-card{position: relative; top: unset; left: unset; right: unset; bottom: unset; height: 100%;}
}

@media only screen and (max-width: 767px) {
.blog-header .bg{height: 340px;}
.blog-intro{padding: 40px 20px;}
.blog-cats{padding: 20px 20px 40px;}
.blog-menu{gap: 20px;}
.blog-menu > li > a{font-size: 22px;}

.blog{padding: 0px 20px 30px;}
.blog-grid{gap: 20px;}
.blog-card{padding: 20px;}
.blog-card .title{font-size: 20px;}
}

@media only screen and (max-width: 767px) {
.blog-grid{grid-template-columns: repeat(1, 1fr);}
}

/* Пагинация */

.wp-pagenavi{display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin-top: 45px;}
.wp-pagenavi a, .wp-pagenavi span{flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; color: #181818; font-size: 14px; background: transparent; border: 1px solid #181818;}
.wp-pagenavi a:hover{color: #EA0000; border-color: #EA0000;}
.wp-pagenavi .current{color: #FFFFFF; background: #181818;}

.previouspostslink, .nextpostslink{text-indent: 9999px; white-space: nowrap; overflow: hidden;}
.previouspostslink::before, .nextpostslink::before{content: ""; position: absolute; top: 14px; left: 14px; width: 17px; height: 17px; background: center center no-repeat; background-size: contain;}
.previouspostslink::before{background-image: url('images/icons/arrow-left-black.svg');}
.nextpostslink::before{background-image: url('images/icons/arrow-right-black.svg');}

/* Блог. Статья */

.article-header{display: flex; justify-content: center; align-items: flex-end; padding: 160px 50px 75px; min-height: 465px;}
.article-header .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
.article-header > .bg::after{content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(24, 24, 24, 0.48);}
.article-header .headline{text-align: center; color: #FFFFFF; font-family: 'Heebo', sans-serif; font-size: 96px;}

.article-body{background: #E8E6E6;}
.article-body > .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; opacity: 0.48;}
.article-body .wrapper{padding: 0px 50px 70px; max-width: 1040px;}

.article-body .blog-menu{padding: 24px 0px;}
.article-body .blog-menu > li > a{line-height: 37px; font-size: 30px;}
.article-body .blog-menu > li > a:hover{color: #FF0000;}

.article-content{margin-top: 20px; padding: 60px 100px; color: #181818; background: rgba(209, 209, 209, 0.24);}
.article-content .meta{display: flex; align-items: center; gap: 8px; margin-bottom: 18px;}
.article-content .meta-item{display: inline-flex; align-items: center; gap: 8px; font-size: 14px;}
.article-content .meta-item:not(.author)::before{flex-shrink: 0; content: ""; display: block; width: 2px; height: 2px; background: #181818; border-radius: 50%;}

.article-content .meta-item.author{gap: 13px;}
.article-content .meta-item.author .avatar{flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;}
.article-content .meta-item.author .avatar img{width: 100%; height: auto;}
.article-content .meta-item.author .name{color: #181818;}
.article-content .meta-item.author:hover .name{color: #FF0000;}

.article-content .page-header{margin-bottom: 18px;}
.article-content .page-header .headline{line-height: 50px; font-size: 40px;}
.article-content .article-updated{display: block; margin-bottom: 25px; line-height: 1.5; font-size: 14px;}

.article-content .article-tags{margin-top: 60px;}
.article-content .tags{display: flex; flex-wrap: wrap; gap: 8px;}
.article-content .tags a{display: block; padding: 6px 12px; color: #181818; font-size: 14px; background: #D1D1D1; border: 1px solid rgba(24, 24, 24, 0.2);}
.article-content .tags a:hover{border-color: rgba(24, 24, 24, 1);}

.article-content .article-cat{margin-top: 24px;}
.article-content .article-cat .post-cat{color: #181818; line-height: 1.5; font-size: 14px; text-decoration: underline;}
.article-content .article-cat .post-cat:hover{color: #FF0000;}

.blog-latest{margin-top: 30px;}

.blog-latest .block-header{display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 20px;}
.blog-latest .block-header .headline{color: #181818; line-height: 22px; font-size: 18px; font-weight: bold;}
.blog-latest .block-header .see-all{color: #181818; line-height: 1.5; font-size: 14px;}
.blog-latest .block-header .see-all:hover{color: #FF0000;}

.blog-latest-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;}
.blog-latest-grid-item{color: #181818; background: rgba(209, 209, 209, 0.24);}
.blog-latest-grid-item .photo{display: block; padding-bottom: 56%;}
.blog-latest-grid-item .title{margin: 24px; display: inline-block; color: #181818; font-size: 18px; font-weight: bold;}
.blog-latest-grid-item .title:hover{color: #FF0000;}

@media only screen and (max-width: 767px) {
.article-header{padding: 93px 20px 40px; min-height: 360px;}
.article-header .headline{font-size: 38px;}

.article-body .wrapper{padding: 0px 20px 60px;}
.article-body .blog-menu{padding: 20px 0px;}
.article-body .blog-menu > li > a{line-height: 28px; font-size: 22px;}

.article-content{margin: 0px -20px; padding: 20px 20px 40px;}
.article-content .meta{flex-wrap: wrap; margin-bottom: 15px;}
.article-content .meta-item{font-size: 12px;}

.article-content .page-header{margin-bottom: 15px;}
.article-content .page-header .headline{line-height: 1.2; font-size: 32px;}
.article-content .article-updated{margin-bottom: 20px; font-size: 12px;}

.article-content .article-tags{margin-top: 40px;}
.article-content .tags{gap: 5px;}
.article-content .tags a{padding: 5px 10px; font-size: 12px;}

.article-content .article-cat{margin-top: 20px;}

.blog-latest-grid{display: flex; gap: 20px; margin: 0px -20px; padding: 0px 20px; overflow-x: scroll;}
.blog-latest-grid-item{flex-shrink: 0; width: 40vw;}
.blog-latest-grid-item .title{margin: 20px;}
}

@media only screen and (max-width: 480px) {
.blog-latest-grid-item{width: 60vw;}
}

/* Featured */

.featured-header{display: flex; align-items: flex-end; padding: 145px 100px 60px; min-height: 520px;}
.featured-header .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
.featured-header > .bg::after{content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(24, 24, 24, 0.48);}

.featured-header .content{color: #FFFFFF;}
.featured-header .page-header{margin-bottom: 20px;}
.featured-header .headline{line-height: 1.2; font-family: 'Heebo', sans-serif; font-size: 60px; font-weight: normal;}
.featured-header .caption{font-size: 20px;}

.videos-list{display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 80px 100px;}

.video-wrapper{position: relative; max-width: 600px; margin: auto; cursor: pointer;}
.video-wrapper video{width: 100%; display: block;}
.play-button{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: none; width: 105px; height: 105px; display: flex; align-items: center; justify-content: center; background: url('images/play.png') center center no-repeat; background-size: contain; z-index: 2; transition: opacity 0.3s;}
.play-button.hidden{opacity: 0; pointer-events: none;}

.progress-container{position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: rgba(24, 24, 24, 0.3); cursor: pointer; z-index: 2;}
.progress-bar{height: 100%; width: 0%; background: #F8A5A5; transition: width 0.1s linear;}

@media only screen and (min-width: 768px) {
.video-fullscreen .fullscreen-toggle{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; cursor: pointer; z-index: 3;}

.video-fullscreen-open .video-wrapper{position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; display: flex; justify-content: center; align-items: center; max-width: unset; background: rgba(0, 0, 0, 0.7); z-index: 90;}
.video-fullscreen-open .fullscreen-toggle{left: unset; bottom: unset; top: 10px; right: 10px; padding: 0px; width: 50px; height: 50px; background: url('images/icons/close.svg') center center no-repeat rgba(0, 0, 0, 0.7); background-size: 20px 20px; border-radius: 50%;}
}

@media only screen and (max-width: 1280px) {
.featured-header{min-height: 400px;}
}

@media only screen and (max-width: 767px) {
.featured-header{padding: 92px 20px 40px; min-height: 340px;}
.featured-header .headline{font-size: 38px;}
.featured-header .caption{font-size: 18px;}

.videos-list{gap: 40px; padding: 40px 20px 60px;}
.play-button{width: 60px; height: 60px;}
.video-fullscreen .fullscreen-toggle{display: none;}
}

/* Design */

.design-header{display: flex; justify-content: center; align-items: flex-end; padding: 135px 50px 50px; min-height: 100vh;}
.design-header .video-wrapper{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; max-width: unset; overflow: hidden;}
.design-header .video-wrapper video{display: block; width: 100%; height: 100%; object-fit: cover;}
.design-header .page-header{margin-bottom: 0px;}
.design-header .headline{text-align: center; color: #FFFFFF; line-height: 1.4; font-family: 'Heebo', sans-serif; font-size: 50px; font-weight: normal;}

.design-block{display: flex; align-items: stretch; gap: 110px; color: #181818;}
.design-block .photo{flex-shrink: 0; width: calc(50% - 55px);}
.design-block .content{flex-shrink: 0; padding: 75px 60px 110px; width: calc(50% - 55px); font-family: 'Heebo', sans-serif;}

.design-block .title{display: block; margin-bottom: 12px; font-size: 40px;}
.design-block .desc li{padding: 24px 0px; font-size: 16px; border-top: 1px solid #B7B7BF;}
.design-block .desc li h3{display: block; margin-bottom: 12px; font-size: 20px;}

.design-bottom{height: 500px;}
.design-bottom .video-wrapper{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; max-width: unset; overflow: hidden;}
.design-bottom .video-wrapper video{display: block; width: 100%; height: 100%; object-fit: cover;}

@media only screen and (max-width: 1280px) {
.design-header{min-height: 480px;}

.design-block{gap: 20px;}
.design-block .photo{width: calc(50% - 10px);}
.design-block .content{padding: 40px 40px 40px; width: calc(50% - 10px);}
}

@media only screen and (max-width: 767px) {
.design-header{padding: 92px 20px 40px; min-height: 415px;}
.design-header .headline{line-height: 1.2; font-size: 38px;}

.design-block{flex-direction: column-reverse; gap: 0px;}
.design-block.design-2{flex-direction: column;}
.design-block .photo{padding-bottom: 60%; width: 100%;}
.design-block .content{padding: 40px 20px; width: 100%;}

.design-block .title{margin-bottom: 10px; font-size: 28px;}
.design-block .desc li{padding: 20px 0px; font-size: 14px;}
.design-block .desc li h3{margin-bottom: 10px; font-size: 18px;}

.design-bottom{padding-bottom: 60%; height: unset;}
}

/* FAQs */

.faqs-page{padding: 135px 50px 70px; color: #181818; background: #D9D9D7;}
.faqs-page .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; opacity: 0.48}
.faqs{display: flex; gap: 50px;}
.faqs .sidebar{width: 30%}
.faqs .page-header{margin-bottom: 10px;}
.faqs .page-header .headline{font-size: 96px;}
.faqs .sidebar .caption{font-size: 18px; font-weight: bold;}

.faqs .content{max-width: 960px;}

@media only screen and (max-width: 767px) {
.faqs-page{padding: 92px 20px 70px;}
.faqs{flex-direction: column; gap: 40px;}
.faqs .sidebar, .faqs .content{width: 100%;}

.faqs .page-header .headline{font-size: 60px;}
.faqs .sidebar .caption{font-size: 16px;}
}

/* About */

.about-page{display: flex; align-items: flex-start; padding: 135px 0px 80px; background: #D1D1D1;}
.about-page .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; opacity: 0.35;}
.about-page .portrait{flex-shrink: 0; display: flex; justify-content: center; padding: 0px 60px; width: 50%;}
.about-page .portrait img{max-width: 416px; width: auto; height: auto;}

.about-page .content{flex-shrink: 0; padding: 0px 60px; width: 50%;}
.about-page .story *{font-size: 20px;}

.about-block-2{display: flex; justify-content: center; padding: 120px 60px 210px; background: #D1D1D1;}
.about-block-2 .bg{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; opacity: 0.35;}
.about-block-2 .content{display: flex; flex-direction: column; align-items: center; max-width: 630px; text-align: center;}
.about-block-2 .story *{font-size: 20px;}
.about-block-2 .button{margin-top: 40px;}

.about-photo{display: flex; justify-content: center; margin-top: -170px; margin-bottom: 60px;}
.about-photo .photo-wrapper{max-width: 710px; width: 100%;}
.about-photo .photo-wrapper .photo{padding-bottom: 50%;}

@media only screen and (max-width: 1280px) {
.about-page .portrait {padding: 0px;}
.about-page .portrait img{max-width: 280px;}
.about-page .content{padding: 0px 40px;}
}

@media only screen and (max-width: 767px) {
.about-page{flex-direction: column-reverse; gap: 40px; padding: 92px 20px 60px;}
.about-page .portrait, .about-page .content{padding: 0px; width: 100%;}

.about-page .headline{text-align: center;}
.about-page .story *{font-size: 16px;}

.about-block-2{padding: 40px 20px 210px;}
.about-block-2 .story *{font-size: 16px;}
.about-block-2 .button{margin-top: 30px;}
.about-photo{margin-bottom: 0px;}
}

/* Careers */

.careers{display: flex; align-items: stretch; padding-top: 85px;}
.careers .careers-photo{flex-shrink: 0; width: 50%;}
.careers .photo{padding-bottom: 63%; height: 100%;}

.careers .content{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 80px; color: #181818;}
.careers .page-header{margin-bottom: 20px;}
.careers .story *{font-size: 18px;}
.careers .button{margin-top: 30px;}

@media only screen and (max-width: 1280px) {
.careers .content{padding: 60px 40px;}
}

@media only screen and (max-width: 767px) {
.careers{flex-direction: column-reverse; padding-top: 62px;}
.careers .content{padding: 40px 20px;}
.careers .story *{font-size: 16px;}
.careers .button{margin-top: 25px;}
.careers .careers-photo{width: 100%;}
}

/* Contact */

.contact-header{display: flex; align-items: flex-end; padding: 100px; min-height: 800px; color: #FFFFFF; background: #464646;}
.contact-header .map{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 0;}
.leaflet-control-container{height: 100%;}
.contact-header .page-header{padding: 10px 15px; background: rgba(24, 24, 24, 0.75);}

.contact-page{display: flex; padding: 20px 50px 60px;}
.contact-page .form{flex-shrink: 0; width: 50%; height: 1475px;}
.contact-page .info{flex-shrink: 0; width: 50%; padding: 50px 30px 0px 70px;}
.contact-page .info .headline{display: block; margin-bottom: 15px; line-height: 1.4; font-size: 40px;}

.contact-page .info .social{display: flex; gap: 10px}
.contact-page .info .social-item{flex-shrink: 0; display: block; width: 39px; height: 39px; background: center center no-repeat; background-size: contain;}
.contact-page .info .social-item.instagram{background-image: url('images/social/instagram-black.png');}
.contact-page .info .social-item.facebook{background-image: url('images/social/facebook-black.png');}

.contact-page .info .caption{display: block; margin-top: 35px; line-height: 1.5; font-family: 'Heebo', sans-serif;}
.contact-page .info .contacts{display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 10px;}
.contact-page .info .contacts a{text-decoration: underline;}
.contact-page .info .button{margin-top: 40px;}

@media only screen and (max-width: 1280px) {
.contact-header{min-height: 640px;}
}

@media only screen and (max-width: 1080px) {
.contact-page{flex-direction: column-reverse;}
.contact-page .info{width: 100%; padding: 30px 0px 20px;}
.contact-page .form{width: 100%;}
}

@media only screen and (max-width: 767px) {
.contact-header{padding: 92px 20px 40px; min-height: 415px;}
.contact-page{padding: 20px 20px 40px;}
.contact-page .info .headline{margin-bottom: 10px; line-height: 1.2; font-size: 32px;}
.contact-page .info .caption{margin-top: 30px; font-size: 14px;}
.contact-page .info .contacts{gap: 3px; margin-top: 5px;}
.contact-page .info .button{margin-top: 30px;}

.contact-page .form{margin: 0px -20px;}
}

/* Подвал */

.footer-main, .footer-main a, .footer-columns, .footer-columns a{color: #000000;}
.footer-main{display: flex; justify-content: space-between; align-items: flex-start; padding: 40px 0px; margin: 0px 50px; border-bottom: 1px solid #181818;}

.petrus-logo-footer{display: inline-block; width: 282px; height: 82px; background: url('images/petrus-logo-full.svg') center center no-repeat; background-size: contain;}

.footer-main .right{text-align: right; font-size: 15px;}
.footer-main .right a{text-decoration: underline;}

.footer-links-menu, .footer-links-menu li{display: inline-flex; flex-wrap: wrap; gap: 8px;}
.footer-links-menu{margin-right: 8px;}
.footer-links-menu li::after{content: "|"}

.footer-main .copyright{margin-top: 18px;}

.footer-columns{display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 40px 50px 80px;}
.footer-columns .col .headline{display: block; margin-bottom: 16px; color: #FF0000; line-height: 1.4; font-family: 'Heebo', sans-serif; font-weight: bold;}
.footer-columns .col ul{font-family: 'Heebo', sans-serif; line-height: 1.6;}
.footer-columns .col a{text-decoration: underline;}

.footer-address{display: block; margin-top: 26px; font-family: 'Heebo', sans-serif; line-height: 1.6;}

.footer-about{display: block; margin-top: 26px; color: #181818; line-height: 1.6;}

@media only screen and (max-width: 767px) {
.footer-main{margin: 0px 20px; padding: 30px 0px;}
.footer-main .left{display: none;}
.footer-main .right{width: 100%; font-size: 13px;}
.footer-main .copyright{margin-top: 12px;}

.footer-columns{display: flex; flex-wrap: wrap; padding: 30px 20px 60px;}
.footer-columns .col:nth-child(1){order: 1; width: 100%;}
.footer-columns .col:nth-child(2){order: 2; width: calc(50% - 15px);}
.footer-columns .col:nth-child(4){order: 3; width: calc(50% - 15px);}
.footer-columns .col:nth-child(3){order: 4; width: 100%;}

.footer-columns .col ul{font-size: 14px;}
.footer-address{margin-top: 18px; font-size: 14px;}
.footer-about{margin-top: 18px; font-size: 13px;}
}