@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/*основные*/
html {scroll-behavior: smooth;}

body {
	font-family: "Rubik", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #333!important;
    background-color: #fff;
	margin: 0!important;
	font-weight:400;
}

a{text-decoration:none;}

/*заголовки*/
h1 {
	font-weight:700;
	font-size:30px;
	color:#9C1F2E!important;
	line-height:1em;
	margin:0!important;
	padding-bottom:30px!important;
	padding-top:0!important;
	box-sizing: border-box;
	text-align:center;
}
.home h1{
	padding-bottom:0!important;
	text-align:left;
}
h2{
	font-weight:700;
	font-size:24px;
	color:#333333!important;
	line-height:1em;
	margin:0!important;
	padding-bottom:10px!important;
	padding-top:20!important;
	box-sizing: border-box;
}
.home h2{
	font-size:30px;
	color:#9C1F2E!important;
	padding-bottom:10px!important;
	padding-top:0!important;
	text-align:center;
}
h2.second{
	font-size:24px;
	color:#003951!important;
	text-align:left;
}
h3{
	font-weight:600;
	font-size:18px;
	color:#333333!important;
	line-height:1em;
	margin:0!important;
	padding-bottom:0!important;
	padding-top:40px!important;
	box-sizing: border-box;
}
.subtitle{font-size:18px;color:#0078AB;text-align:center;}


/*Кнопки*/
.button-k{box-sizing: border-box;display:inline-block;cursor:pointer;width:140px;height:30px;padding:6px 0 6px 0;text-align:center;border-radius:5px;font-weight:400;font-size:14px;color:#fff;background-color: #50B848;}

/*Блоки*/
.w1140{width:1140px;margin:0 auto;}
#page{margin:0;padding:0;width:100%;min-height:800px;}
.home #page{background: scroll transparent url(images/back.webp) center top no-repeat;}
.flex-container-wrap{display: flex;flex-wrap:wrap;}
.flex-container{display: flex;flex-wrap:nowrap;}
.box{box-sizing: border-box;}
#page-wrapper{min-height:600px;}
#okrugwork-wrapper{background: scroll transparent url(images/bottomback.webp) center top no-repeat;background-size:cover;}


/*Яндекс карты*/
#okrugwork{padding:80px 0;}
.map-yandex{height: 380px;width: 600px;}
.ymaps-2-1-79-map-copyrights-promo{display:none;}
.object-item{display:none;}
.show{display:block;}
.map-block-flex{display:flex;flex-wrap:wrap;gap:60px;}
.map-yandex{flex-basis:600px;}
.text-block{flex-basis:480px;}
.object-item.anim-start{animation: 0.3s ease-out 1 forwards text-block-start;}
.object-item.anim-revers{animation: 0.3s ease-out 1 forwards text-block-revers;}
.object-item{box-sizing: border-box;background-color:#fff;border-radius:5px;padding:20px;}
.object-item h2{font-weight:400;font-size:24px;color:#333333!important;padding-bottom:10px!important;box-sizing: border-box;text-align:left;}
.map-control{box-sizing: border-box;padding:40px 0;display:flex;gap:50px;justify-content:center;}
.map-control-bt{box-sizing: border-box;background-color:#fff;color:#333;height:36px;padding:9px 20px;border-radius:36px;font-size:14px;cursor:pointer;}
.map-control-bt.anim-start{animation: 0.3s ease-out 1 forwards map-control-bt-start;}
.map-control-bt.anim-revers{animation: 0.3s ease-in 1 forwards map-control-bt-revers;}
.map-control .active{background-color:#0078AB;color:#fff;}
.dep-gal .wp-block-image {height:145px!important;overflow:hidden;}
.dep-gal .wp-block-image img{width:100%!important;height:auto!important;aspect-ratio:auto;}

/*Соцсети и месенджеры*/
.messenger {display:inline-block;text-align:left;margin: 0 5px;}
.messenger a{display:inline-block;background-color:#0078AB;margin:0;text-indent:-9999px;width:24px;border-radius:5px;height:24px;}
.site-telegram a{background: scroll #0078AB url(images/telegram.svg) center center no-repeat;background-size:16px;}
.site-vk a{background: scroll #0078AB url(images/vk.svg) center center no-repeat;background-size:16px;}
.site-ok a{background: scroll #0078AB url(images/ok.svg) center center no-repeat;background-size:16px;}
.messenger a.anim-start{animation: 0.3s ease-out 1 forwards messenger-start;}
.messenger a.anim-revers{animation: 0.3s ease-in 1 forwards messenger-revers;}


/*Хлебные крошки*/
#breadcrumbs{box-sizing:border-box;padding:15px 0;}
#breadcrumbs a{font-weight:300;font-size:14px;color:#666666;text-decoration:none;}
#breadcrumbs a:hover{color:#0078AB;text-decoration:underline;}
#breadcrumbs {font-weight:300;font-size:14px;color:#666666;}


/*ШАПКА*/
.home .site-header{background-color:transparent!important;height:100px;}
#header-logo{width:12%;padding-top:15px;}
#header-menu{width:73%;text-align:right;padding-top:40px;}
#header-messengrs{width:15%;text-align:right;padding-top:43px;}
.logo{display:block;background: scroll transparent url(images/edro.svg) left top no-repeat;background-size:cover;text-indent:-9999px;}
.site-branding a{display:block;width:150px;height:75px;}
.site-header{background: scroll transparent url(images/back.webp) center top no-repeat!important;height:100px;}


/*МЕНЮ*/
#header-menu .handheld-navigation{display:none;}
#header-menu .menu-toggle{display:none;}
.primary-navigation .menu {padding:0;margin:0;list-style:none;}
.primary-navigation .menu .menu-item{display:inline-block;vertical-align:top;margin-right:3%;}
.primary-navigation .menu .menu-item a{display:block;padding:7px 0 7px 0;font-size:14px;font-weight:400;text-decoration:none;color:#0078AB!important;cursor:pointer;}
.primary-navigation .menu .current-menu-item a{color:#003951!important;}
.primary-navigation .menu .menu-item a.anim-start{animation: 0.3s ease-out 1 forwards menu-start;}
.primary-navigation .menu .menu-item a.anim-revers{animation: 0.3s ease-in 1 forwards menu-revers;}
.sub-menu{
	position:absolute;
	top:60px;
	display:none;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	background-color:#f8f8f8!important;
	padding:10px 20px;
	margin:0;
	width:240px;
	z-index:100;
}
.sub-menu-open{display:block;}
.open-sub-menu .sub-menu{display:block;}
.sub-menu .menu-item{display:block!important;padding:0!important;}
.sub-menu .menu-item a{display:block!important;padding:10px 0!important;margin:0!important;color:#262626!important;}
.sub-menu .menu-item a:hover{color:#50B848!important;}
.menu-item-has-children a:after{content:none!important;}

/*МЕНЮ мобильное*/
.handheld-navigation{box-sizing: border-box;position: absolute;width: 100%;height:100vh;top:0;left: 0;background-color: #003951;z-index: 100;padding-top:25px;}
.handheld-navigation .menu {padding:0;margin:0;list-style:none;}
.handheld-navigation .menu .menu-item{display:block;padding:0;}
.handheld-navigation .menu .menu-item a{display:block;padding:15px 20px;border-bottom:1px solid #0078AB;font-size:16px;font-weight:400;text-decoration:none;color:#fff;cursor:pointer;}


/*ФОРМА*/
/*POP UP-------------------------------------------------------------------------------------------------------------*/
/*ТАПСЕКТИОН*/


/*ГЛАВНАЯ-------------------------------------------------------------------------------------------------------------*/
.front-krylova{position:relative;box-sizing: border-box;background: scroll transparent url(images/krylova.webp) right top no-repeat;min-height:800px;}
.front-title{box-sizing: border-box;padding:100px 0 50px 0;width:520px;}
.front-first-screen-subtitle{box-sizing: border-box;font-size:18px;color:#0078AB;line-height:24px;}
.front-first-screen-subtitle span{display:block;font-size:16px;color:#333;}
.front-about{box-sizing: border-box;width:580px;}
.front-about p{padding-right:20px;}
.front-blueblock{animation: 0.6s ease-out 1 forwards blueblockanim;}
.front-blueblock{position:absolute;bottom:0;right:0;box-sizing: border-box;background: scroll transparent url(images/block.svg) right bottom no-repeat;background-size:cover;width:700px;height:160px;}
.blueblock-title{box-sizing: border-box;font-size: 44px;font-weight: 900;color: #fff;padding: 35px 80px 10px 120px;text-transform: uppercase;text-align: center;width: 500px;line-height: 1.08;margin: auto;}
.blueblock-text{box-sizing: border-box;font-size:20px;font-weight:300;letter-spacing:6px;color:#fff;text-align:center;}

/*ВНУТРЕННИЕ-------------------------------------------------------------------------------------------------------------*/
.krylova-about{gap:60px!important;}
.krylova-about-foto img{border-radius:5px;}
.krylova-about-subtitle{font-size:18px;color:#0078AB;}
.krylova-about-ul li{padding-bottom:30px;}
#okrugwork-page{margin-bottom:60px;}
#okrugwork-page .object-item{background-color:#F5F5F5;}
#okrugwork-page .map-control-bt{background-color:#F5F5F5;}
#okrugwork-page .map-control .active{background-color:#0078AB;color:#fff;}
.krylova-contacts{box-sizing: border-box;width:320px;margin:40px auto 80px auto;padding:20px 20px 30px 20px;border:2px solid #fff;border-radius:20px;background-color:#f5f5f5;box-shadow:0 0 15px rgba(0,0,0,0.15);}
.krylova-contacts.anim-start{animation: 0.3s ease-out 1 forwards contacts-start;}
.krylova-contacts.anim-revers{animation: 0.3s ease-in 1 forwards contacts-revers;}
.krylova-contcts-name{text-align:center;font-size:28px;}
.krylova-contcts-tel {text-align:center;}
.krylova-contcts-tel a{font-weight:300;font-size:24px; color:#333;}
.messengrs-contacts{padding-top:30px;border-top:1px solid #ebebeb;text-align:center;}
.messengrs-contacts .messenger a {width: 36px; height: 36px;}
.messengrs-contacts .site-telegram a{background: scroll #0078AB url(images/telegram.svg) center center no-repeat;background-size:24px;}
.messengrs-contacts .site-vk a{background: scroll #0078AB url(images/vk.svg) center center no-repeat;background-size:24px;}
.messengrs-contacts .site-ok a{background: scroll #0078AB url(images/ok.svg) center center no-repeat;background-size:24px;}
.project-gal{box-sizing: border-box;margin-bottom:40px!important;padding:10px 0 30px 0 !important;border-bottom:1px solid #ebebeb;}
.project-gal .wp-block-image {flex-basis:260px!important;flex-grow: 0!important;}

/*ФУТЕР-------------------------------------------------------------------------------------------------------------*/
#footer{margin-top:100px;}
.site-footer {background-color:#003951!important;}
.home #footer{margin-top:0;}
.footer-copiright-block{width:50%;}
.footer-mir-block{width:50%;text-align:right;}
.footer-bottom{padding:50px 0;align-items:center;color:#fff!important;font-size:14px;gap: 20px;}
.footer-bottom a{color:#fff!important;}

/* Большие устройств (большие компьютеры, 1200px) */  
@media only screen and (max-width: 1199px){
	.w1140{width:990px;padding:0 10px;box-sizing:border-box;}
	#header-logo{width:8%;}
	#header-menu{width:80%;text-align:right;}
	#header-messengrs{width:12%;}
	.site-branding a{display:block;width:100px;height:50px;}
	.front-title {padding: 20px 0 50px 0;}
	.front-about {width: 440px;}
	.front-blueblock {width: 580px;height: 130px;}
	.blueblock-title {font-size: 34px;background-size: 80px;}
	.front-krylova {background: scroll transparent url(images/krylova.webp) right bottom 120px no-repeat;background-size: 500px 667px;}
	.map-block-flex {gap:20px;}
	.map-yandex {flex-basis: 470px;}
	.map-yandex {height: 380px; width:470px;}
	.project-gal .wp-block-image{flex-basis: 230px !important;}
}

/* Средние устройства (настольные компьютеры, 990px) */  
@media only screen and (max-width: 990px){
	.w1140{width:768px;padding:0 10px;box-sizing:border-box;}
	#header-logo{width:17%;}
	#header-menu{width:66%;text-align:left;padding-top: 20px;}
	#header-messengrs{width:17%;}
	.front-title {padding: 40px 0 50px 0;width:100%;}
	.front-about {width: 100%;}
	.front-krylova {background: none;min-height: 740px;}
	.map-control-bt {padding: 9px 12px;}
	.map-control {gap: 10px;}
	.map-block-flex {gap: 18px;}
	.map-yandex {flex-basis: 360px;}
	.map-yandex {height: 420px; width:360px;}
	.text-block {flex-basis: 360px;}
	.project-gal .wp-block-image{flex-basis: 180px !important;}
}
/* Небольшие устройства (планшеты, 768px) */  
@media only screen and (max-width: 768px){
	.w1140{width:100%;padding:0 10px;box-sizing:border-box;}
	#header-menu .menu-toggle{z-index:1010;cursor:pointer;display:block;position:absolute;top:32px;right:10px;border:none;height:36px; width:36px;background: scroll transparent url(images/hamburger.svg) center center no-repeat; background-size:30px;text-indent:-9999px;}
	#header-menu .toggled .menu-toggle{background: scroll transparent url(images/close-w.svg) center center no-repeat; background-size:30px;}
	#header-menu .primary-navigation{display:none;}
	#header-menu .toggled .handheld-navigation{display:block;}
	.home .site-header {height: auto;}
	.site-header {height: 100px;}
	#header-logo {width: 45%;}
	#header-menu{width:0;padding-top:10px;position:static;}
	#header-messengrs{width:40%;padding-top: 38px;}
	.site-branding a{width: 150px;height: 75px;}
	.front-krylova {background: scroll transparent url(images/krylova.webp) right top 140px no-repeat;background-size: 220px 290px;min-height: auto;}
	.front-about {width: 100%;padding-top: 280px;}
	.front-blueblock {position: absolute;top: 360px;width: 340px;height: 75px;}
	.blueblock-title {font-size: 20px;background-size: 40px;width: 100%;padding: 20px 50px 2px 70px;}
	.blueblock-text {font-size: 14px;letter-spacing: 1px;}
	#okrugwork {padding: 20px 0;}
	.map-yandex {flex-basis: 100%;}
	.map-yandex {height: 300px; width:100%;}
	.text-block {flex-basis: 100%;}
	.krylova-about {gap: 0 !important;}
	.map-control-mobil-wrapper{width:100%;overflow:auto;}
	.map-control{width:730px;gap:10px;}
	.footer-bottom{flex-wrap: wrap;}
	.footer-mir-block{width:100%;text-align:center;}
	.footer-copiright-block{width:100%;text-align:center;}
	.project-gal .wp-block-image{flex-basis:160px !important;}
}


/*ANIMATION*/
@media only screen and (min-width: 990px){
	
	@keyframes blueblockanim{
		from {right: -600px;}
		to{right: 0;}
	}

	@keyframes menu-start {
	  from {color:#0078AB!important;border-bottom:none;padding: 7px 0 12px 0;}
	  to {color:#003951!important;border-bottom:2px solid #003951;padding: 7px 0 1px 0;}
	}
	@keyframes menu-revers {
	  from {color:#003951!important;border-bottom:2px solid #003951;padding: 7px 0 1px 0;}
	  to {color:#0078AB!important;border-bottom:none;padding: 7px 0 12px 0;}
	}

	@keyframes map-control-bt-start {
	  from {box-shadow:0 0 0 rgba(0,0,0,0.0);}
	  to {box-shadow:0 0 15px rgba(0,0,0,0.25);}
	}
	@keyframes map-control-bt-revers {
	  from {box-shadow:0 0 15px rgba(0,0,0,0.25);}
	  to {box-shadow:0 0 0 rgba(0,0,0,0.0);}
	}

	@keyframes text-block-start {
	  from {box-shadow:0 0 0 rgba(0,0,0,0.0);}
	  to {box-shadow:0 0 15px rgba(0,0,0,0.25);}
	}
	@keyframes text-block-revers {
	  from {box-shadow:0 0 15px rgba(0,0,0,0.25);}
	  to {box-shadow:0 0 0 rgba(0,0,0,0.0);}
	}
	
	@keyframes contacts-start {
	  from {box-shadow:0 0 15px rgba(0,0,0,0.15);}
	  to {box-shadow:0 0 0 rgba(0,0,0,0.0);}
	}
	@keyframes contacts-revers {
	  from {box-shadow:0 0 0 rgba(0,0,0,0.0);}
	  to {box-shadow:0 0 15px rgba(0,0,0,0.15);}
	}
	
	@keyframes messenger-start {
	  from {transform:scale(1);}
	  to {transform:scale(1.2);}
	}
	@keyframes messenger-revers {
	  from {transform:scale(1.2);}
	  to {transform:scale(1);}
	}
	
}