/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html, body{ 
  	margin:0 auto; padding:0; 
	font-style: normal;
	font-optical-sizing: auto;
	font-family: "Montserrat", Arial, sans-serif;
	
}

.body-flex{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

:root{
	--radius:10px;
	--gray6: #F2F2F2;
	--gray5: #E0E0E0;
    --gray4: #BDBDBD;
	--gray3: #828282;
    --gray2: #4F4F4F;
	--gray1: #333333;
	--primary-color:#8C5A3C;
}

* {box-sizing:border-box;}


input, button, textarea, select, option{
	outline: none;
	font-family: inherit;
}

.button[disabled], .button[disabled]:hover,
button[disabled], button[disabled]:hover{
  	background-color:#a9a9a9!important;
}

a{outline: none;}
p, ul, ol, li{font-size:16px; line-height: 150%; color: #2B2D2F}

h1, h2, h3, h4, strong, b{margin: 0; font-weight: 600}

h1{font-size:36px;}
h2{font-size:32px; font-weight: 700}
h3{font-size:28px; }
h4{font-size:24px;}


button, .button{
	border-radius: var(--radius);
	padding: 0px 40px;
	cursor: pointer;
	outline: none;
	border: none;
	font-weight: 600;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: 0.3s;
	min-height: 55px;
}

.btn-s{
	height: 40px;
	font-size: 14px;
}

.btn-m{
	height: 50px;
	font-size: 16px;
}

.btn-l{
	height: 60px;
	font-size: 18px;
}

header, nav, main, footer{ 
	width:100%;
  	text-align:center; 
}

header{ 
  	padding:20px 0px;	
  	background: linear-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 99%);
}

section{ 
	width: 100%;
  	margin:0 auto; 
  	padding: 0 calc(50% - 590px);
  	display: flex; 
	justify-content: space-between;

}

header section{
	align-items: center;
	gap: 20px 30px;
}

main{ 
  	padding:40px 0px 0px 0;
  	overflow: hidden;
  	flex: 1;
}

footer{  
  	padding:40px 0px; 
  	margin-top: 80px;
}

.logo-all{
	display: flex;
	align-items: center;
	gap: 20px;
	text-decoration: none;
	text-align: left;
}

.logo-all img{
	object-fit: contain;
	width: 60px;
}

.logo{
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.logo-name{
	font-size: 26px;
	font-weight: 700;
}

.logo-desc{
	font-size: 14px;
}

.phone{
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 22px;
	justify-content: flex-start;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
}

.phone a{
	text-decoration: none;
}

.phone img{
	width: 18px; 
	object-fit: contain;
}

.content{
	text-align:left; 
}


/* Футер */

footer section{
	justify-content: space-between;
  	display: flex;
  	align-items: center;
}

.tema{ 
	font-size:14px; 
	text-align:center; 
	margin-bottom:20px; 
	border-bottom:1px solid; 
	padding-bottom:15px;
}

.contact_inform{
	width:34%; 
	text-align:left; 
	font-size:14px; 
}

.social{
	width:30%; 
	text-align:center; 
}

.social img{
	margin:5px 10px;
	object-fit: contain;
	width:20px; height:20px;
	display:inline-block;
	filter: invert(100%);  
}

.copyright{
	width:34%; 
	text-align:right; 
	font-size: 13px;
}

.copyright img{
	object-fit: cover;
	text-align:right; 
	width:auto; height:30px; 
	float:right;
}

.main-left{
	width: 23%;
}

.main-right{
	width: 74%;
}


/* Blog page */

.blog-section{
	flex-direction: column;
	gap: 30px 0;
}

.blog{
	display: flex;
	gap: 30px;
	border: 1px solid var(--gray5);
	padding: 20px;
	border-radius: var(--radius);
	transition: 0.3s;
}

.blog:hover{
	border: 1px solid var(--gray4);
}

.blog-img{
}

.blog-img img{
	 width:200px; height:200px; 
	object-fit: cover;
	border-radius: var(--radius);
	overflow: hidden;
}

.blog-name-all{
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 5px;
	justify-content: flex-start;
} 

.blog-name{
	text-decoration: none;
	font-size: 20px;
	font-weight: 600;
}

.blog-date{
	font-size: 12px;
	color: var(--gray3);
}

.blog-more{
	width: 140px;
	padding: 10px;
	font-size: 14px;
	text-align: center;
	border-radius: var(--radius);
	display: flex;
	justify-content: center;
	background-color: var(--gray6);
	text-decoration: none;
}



/* Partner page */

.partner-section{
	flex-wrap: wrap;
	gap: 30px;
	justify-content: flex-start;
}

.partner{
	width:auto; 
	border: 1px solid #f2f2f2;
	padding: 20px;
	text-align: center;
}

.partner-img{
	width:160px; height:100px; 
	background-size: contain; 
	background-repeat: no-repeat; 
	background-position: center;
}

.partner-name{
	font-size:16px; 
	margin-top: 20px;
}

.partner-link{
	font-size:14px; 
	text-align:center;
}

.partner-link p{
	margin: 5px 0px 0px 0px;
}

.partner-link a{
	color:blue;
}

/*Страница Контакты*/

.contactus, .obrsv_bg{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.contactus{
	margin-bottom: 80px;
	font-size: 14px;
	line-height: 150%;
}

.contactus:nth-child(2){
	justify-content: flex-start;
}

.contactus_flex,
.contactus_social{
	display: flex;
	align-items: center;
	width: 31%
}

.contactus a{
	text-decoration: none;
}

.contactus_flex img,
.contactus_social img{
	object-fit: contain;
	margin-right: 20px;
}

.contactus_title{
	font-size: 18px;
	font-weight: 500;
}

.contactus_social_flex{
	margin-right: 10%;
}

.contactus_social img{
	width:25px; height:25px;
	margin-top: 15px;
}

.obrsv_bg{
	padding: 40px;
}

.obrsv, .map{
	width: 48%;
}

.obrsv{
	overflow:hidden;
	margin-bottom: 40px;
}

.obrsv h2{
	margin: 0px 0px 30px 0px
}

/* Модальное окно */

.modalDialog {
	position:fixed; 
	top:0; right:0; bottom:0; left:0; 
	background: rgba(0,0,0,0.8); 
	z-index: 99; 
	-webkit-transition: opacity 400ms ease-in; 
	-moz-transition: opacity 400ms ease-in; 
	transition: opacity 400ms ease-in; 
	display:none; 
	pointer-events:none;
}

.modalDialog:target { 
	display:block; 
	pointer-events: auto; 
} 

.modalDialog > form {
	position: relative; 
	margin: 10% auto; 
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
	    opacity: 0;
	    -webkit-transform: translate3d(0, -100%, 0);
	    transform: translate3d(0, -100%, 0);
    }
    100% {
	    opacity: 1;
	    -webkit-transform: none;
	    transform: none;
    }
}

.close { 
	position: absolute; 
	right: -10px; top: -10px;  
	text-align: center; 
	width: 28px; height: 28px;
	font-size: 24px;
	font-weight: 400; 
	border-radius: 50%; 
	background-color: var(--green);
	color: #fff;
	text-decoration: none;
} 


/* Gallery (Галерея) */

.album_all,
.gallery_all, .gallery_sertif_all{
	display:flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.gallery_title{
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 30px;
}

.album,
.gallery, .gallery_sertif{
    width: 22.5%;
    margin-right: 3%;
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

.album:nth-child(4n), .gallery:nth-child(4n), .gallery_sertif:nth-child(4n){
	margin-right: 0%;
}

.album_img{
	overflow: hidden;
}

.album_img, .album_img img,
.gallery, .gallery img{
    height: 220px;
}

.gallery_sertif, .gallery_sertif img{
	height: 280px;
}

.album_img img,
.gallery img{
	width: 100%;
    object-fit: cover;
}

.gallery_sertif img{
	width: 100%;
	object-fit: contain;
}

.album_img img:hover,
.gallery img:hover,
.gallery_sertif img:hover {
    transform: scale(1.05);
}

.album_name{
	font-weight: 500;
	font-size: 16px;
	margin-top: 20px;
}

/* Всплывающее окно - уведомление */

.dobavlen{ position:fixed; top:0%; left:0%; width:10000px; height:10000px; z-index:9999; background-color: rgba(0, 0, 0, 0.7);}
.dobavlentext{ position:fixed; top:40%; left:40%; width:320px; padding: 20px; text-align: center; background-color: #427401; color: #fff; font-weight: 500}

/* Кнопка вверх и кнопка заказа звонка */

.scrollup, .call{
    width:40px; height:40px;
    position:fixed;
    opacity: 0.6;
    bottom:30px; right:30px;
    display:none;
    z-index: 99;
}

.call{
	bottom:80px; 
}

.scrollup:hover, .call:hover{
    opacity: 1;
}

.scrollup img, .call img{
	width:40px; height:40px;
	object-fit: contain;
}

/*Cookie*/

#cookie-notification{
    display: none;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    gap: 15px 30px;
    bottom: 2%;
    left: 2%; right: 2%;
    padding: 20px;
    background:rgba(0, 0, 0, 0.85);
    z-index: 1000;
    color: white;
    border-radius: var(--radius);
}

 #cookie-notification.show{
    display: flex; 
}

.btn-cookie-all{
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-cookie-accept, .btn-agreement{
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 100px;
    min-height: 30px;
    cursor: pointer;
}

.btn-cookie-accept{
	background: #427401;
	border: 1px solid transparent;
}

.btn-agreement{
    border: 1px solid #fff;
    color: #fff;
}

#cookie-notification p{
    margin: 0;
    font-size: 13px;
    color: #fff;
    text-align: left;
    line-height: 130%;
}

#cookie-notification p a{
    color: #fff;
}


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

	section{
	 padding: 0 calc(50% - 480px);
	}

	.photo_oblojka{
		height: 160px;
	}
}

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

	nav, header, .main-left, .premium-name br{
		display: none;
	}

	.main-right{
		width: 100%;
	}

	section{
		width: 90%;
	}

	main{
		margin-top: 40px;
	}

	main h1{
		text-align: center;
	}


	.dobavlentext{width:80%; left: 50%; top: 50%; margin-left: -40%;}

	.album_img, .album_img img,
	.gallery, .gallery img{
	    height: 180px;
	}

	.gallery_sertif, .gallery_sertif img{
		height: 240px;
	}

	.contactus, .obrsv_bg{
		flex-wrap: wrap;
		margin-bottom: 40px;
	}

	.contactus_flex, .contactus_social_flex, .obrsv, .map{
		width: 100%;
		margin-bottom: 30px;
	}

	.contactus_social_flex{
		margin-right: 0;
	}

	.map{
		margin-top: 40px;
	}

	.modalDialog > form{
		margin-top: 25%;
	}

	#cookie-notification{
        flex-direction: column;
        align-items: flex-start;
    }

    #cookie-notification p{
        font-size: 12px;
    }

}

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

	.album, .gallery, .gallery_sertif{
		width: 31%;
		margin-bottom: 3%;
	}

	.album:nth-child(4n), .gallery:nth-child(4n), .gallery_sertif:nth-child(4n){
		margin-right: 3%;
	}

	.album:nth-child(3n), .gallery:nth-child(3n), .gallery_sertif:nth-child(3n){
		margin-right: 0%;
	}

}

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

	footer{
		padding: 20px 0;
	}

	footer section{
		flex-direction: column;
		gap: 10px;
	}

	.blog{
		flex-direction: column;
	}

	.modalDialog > div{
		width: 80%;
	}

	.obrsv_fon{
		width: 100%;
	}

	.contact_inform, .copyright, .social{
		width: 100%;
		display: block;
		float: none;
		margin:auto;
		text-align: center;
	}

	.social{
		margin: 20px auto;
	}

	.copyright img{
		float: none;
		margin: auto;
	}

	.album_img, .album_img img, .gallery, .gallery img{
		height: 160px;
	}

	.gallery_sertif, .gallery_sertif img{
		height: 220px;
	}

	.album_name{
		margin-top: 10px;
		font-size: 14px;
	}

}

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

	.album, .gallery, .gallery_sertif{
		width: 46%;
		margin-right: 5%;
		margin-bottom: 5%;
	}

	.album:nth-child(3n), .gallery:nth-child(3n), .gallery_sertif:nth-child(3n){
		margin-right: 5%;
	}

	.album:nth-child(2n), .gallery:nth-child(2n), .gallery_sertif:nth-child(2n),
	.album:nth-child(4n), .gallery:nth-child(4n), .gallery_sertif:nth-child(4n){
		margin-right: 0%;
	}

	.obrsv_button, .zvonok_button{
		width: 120px;
		min-width: 120px;
	}

	.obrsv_bg{
		padding:20px;
	}

	.contactus:nth-child(2), .contactus_social{
		justify-content: center;
	}

	.contactus_social{
		width: 100%;
	}

	.contactus_title, .contactus_social{
		text-align: center;
	}


	.scrollup, .call{
	    bottom:10px; right:10px;
	}

	.call{
		bottom:60px; 
	}

	.btn-cookie-all{
	   flex-wrap: wrap;
	}

}

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

	h1{font-size: 24px;}
	h2{font-size: 20px;}
	h3{font-size: 16px;}
	h4{font-size: 14px;}


	.blog-img img{
		width: 100%; height: 100%;
	}

}

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

	.album_img, .album_img img, .gallery, .gallery img{
		height: 140px;
	}

	.gallery_sertif, .gallery_sertif img{
		height: 200px;
	}
}