@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&display=swap');

.clr{clear:both;padding:0;margin:0;background:none}
body{font-size:14px;font-family: 'Montserrat', sans-serif;}
p, li{color:#336666;}
	p{margin:20px 0;}
h1{font-size:250%;font-family: 'Montserrat', sans-serif;text-align:center;margin:50px 0 10px 0;}
h2{font-size:220%;text-align:center;margin:25px 0;font-family: 'Montserrat', sans-serif;font-weight:bold;}
h3{font-size:160%;text-align:center;margin:15px 0;font-family: 'Montserrat', sans-serif;font-weight:bold;}
h4{font-size:200%;text-align:center;font-family: 'Montserrat', sans-serif;font-weight:bold;margin:15px 0;}

a{color:#336666;text-decoration:underline;}
	a:hover{text-decoration:none;}
.FancyBox img{margin:5px auto;}
.FancyBox {margin:15px auto;}
#jError,#jNotify,#jSuccess{font-size:160%;}

div{border:1px solid #000;}
div{border:none;}

/* main style */
	.title{text-transform:uppercase;color:#000;font-size:130%;text-align:center;margin:50px 0;background:url('/images/titlebg.png') center 12px no-repeat;}
	.title.w200bg{background-size: 200px 5px;}
	.title.w300bg{background-size: 300px 5px;}
	.title.w400bg{background-size: 400px 5px;}
	.title.w600bg{background-size: 600px 5px;}
		.title b{font-weight:bold;display:block;font-size:140%;}

	.header{background:url('/images/headerbg.jpg') 100% 0 no-repeat;}
		.headline{}
			.headline .logo-block{padding-top:10px;}
			.headline .menu-button-block{text-align:center;padding-top:38px;}
				.headline .menu-button-block .menu-button{font-size:180%;font-weight:bold;padding-top:10px;cursor:pointer;text-transform:uppercase;}
			.headline .phone-block{text-align:right;padding-top:35px;}
				.headline .phone{color:#000;font-size:220%;font-weight:bold;text-decoration:none;display:block;}
				.followlinkpic{width:32px;}
		.header .offer{padding:200px 0 200px 20px;color:#343100;line-height:600%;}
			.header .offer b{display:block;font-weight:900;font-size:1000%;text-transform:uppercase;}
			.header .offer span{display:block;font-weight:700;font-size:122%;text-transform:uppercase;}
	
	/* accordionSections */
	.accordeon{}
		.card{}
			.card-header{cursor:pointer;padding:25px;font-size:130%;font-weight:bold;}
				.card-header:hover{background-color:rgba(0,0,0,.01);}
			.card a {text-decoration:none;color:#000;}
			.card-body{padding:20px 50px;line-height:200%;}
				.card-body a{display:block;color:#0162d0;text-decoration:underline;}
	
	.strongs{}
		.strong-item{text-align:center;text-transform:uppercase;font-size:100%;font-weight:500;margin-bottom:15px;}
			.strong-item img{margin-bottom:15px;}
			.strong-item b{display:block;font-size:110%;font-weight:700;}
		
	.contact-block{}
		.contact-block .pic{float:left;margin-right:20px;}
			.contact-block .pic img{width:70px;}
		.contact-block .text{padding-top:0px;font-size:120%;font-weight:bold;display:inline-block;}
		.contact-block .text a{color:#000;text-decoration:none;}
	.footer{}
		.footer .footerphone{font-size:130%;font-weight:bold;color:#000;text-decoration:none;}
		
	/*nav*/
	nav {
		position: absolute;
		left: -250%;
		top: 0;
		width: 500px;
		/*background: #69baac;*/
		background-color:#feed00;
		z-index: 100;
		height: 100vh;
		overflow: auto;
		color: #000;
		padding: 0px 0px 50px 50px;
		transition: 0.5s;
	}
	.nav-active {
		left: 0;
	}
	.menu_close {
		font-size:140%;
		cursor:pointer;
		margin:30px 55px 40px auto;
	}
	.navigation {
		list-style:none;
		font-size: 24px;
		margin-bottom: 70px;
	}
	.navigation li {
		margin-bottom: 30px;
	}
	.navigation a {
		color:#000;
		display: inline-block;
		position: relative;
		text-decoration:none;
	}
	.navigation a:after {
		display: block;
		width: 0%;
		height: 2px;
		background: #000;
		content: '';
		transition: 0.5s;
	}
	.navigation a:hover:after {
		width: 100%;
	}
/*nav*/
	.map-container{height:480px;padding:0;margin:15px 0;}
	
	.copy{padding:5px 0 5px 80px;background:url('/images/trikota.png') left top no-repeat;line-height:120%;text-align:left;float:right;font-size:85%;margin-bottom:15px;}
		.copy a{text-decoration:underline;}
			.copy a:hover{color:#fff;text-decoration:none;}
/* main style */

	@media screen and (min-width: 992px) { 
		.mobile{display:none;}
		.desktop{display:block;}
	}
	
	@media screen and (max-width: 1200px) {		
		.contact-block .text{font-size:100%;}
	}
	
	@media screen and (max-width: 992px) { 
		.mobile{display:block;}
		.desktop{display:none;}
		body{background:url('/images/headerbg.jpg') 100% 0 no-repeat;}
		.header{background:none;}
		.footer{text-align:center;}
		.phone-block{text-align:center !important;padding:10px !important;}
			.phone{display:inline-block !important;margin:0 30px 15px 0;}
			.followlinkpic{margin-top:-15px;}
		.header .offer{padding:150px 0 50px 10px;line-height:500%;}
			.header .offer b{font-size:740%;}
			.header .offer span{font-size:90%;}
		.map-container{height:400px;}
	}
	@media screen and (max-width: 550px) {
		.map-container{height:300px;padding:0;}
		nav {width:100%;padding:0px 0px 0px 20px;}
		.menu-button-block{text-align:right !important;padding-right:40px;}
		.header .offer{padding:100px 0 100px 10px;line-height:100%;}
			.header .offer b{font-size:540%;margin-bottom:40px;}
			.header .offer span{font-size:80%;}
		.map-container{height:350px;}
	}
	@media screen and (max-width: 400px) {
		.phone{font-size:170% !important;}
		.header .offer{padding:70px 0 50px 10px;line-height:100%;}
			.header .offer b{font-size:440%;margin-bottom:30px;}
			.header .offer span{font-size:80%;}
		.map-container{height:300px;}
	}

.headline__wrapper {
	display: flex;
    align-items: center;
    justify-content: space-between;
	gap: 15px;
    width: 100%;
}

/* social__btn — start */
.social__btn {
	display: flex;
	justify-content: center;
	align-self: flex-end;
	border-radius: 2px;
	transition: background .3s;
	overflow: hidden;
}
.social__btn-link {
	display: flex;
	justify-self: center;
	text-decoration: none;
	border-radius: 2px;
	position: relative;
	z-index: 0;
	overflow: hidden;
}
.social__btn-link::after,
.social__btn-link::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity .3s;
}
.social__btn-link::after {
	background: linear-gradient(180deg, #2AABEE 0%, #229ED9 10000%);
	z-index: -1;
	opacity: 1;
}
.social__btn-link::before {
	background: linear-gradient(180deg, #FFED00 0%, #FFED00 10000%);
	z-index: -2;
	opacity: 0;
}
.social__btn:hover .social__btn-link::after { opacity: 0 }
.social__btn:hover .social__btn-link::before { opacity: 1 }
.social__btn-link:hover,
.social__btn-link:focus {
	outline: none;
	box-shadow: none;
	text-decoration: none;
}
.social__btn-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	padding: 10px 20px;
}
.header .social__btn-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 30px;
	line-height: calc(37/30);
	font-weight: 600;
	color: #fff;
	transition: color .3s;
}
.social__btn:hover .social__btn-title { color: #2B2A28 }
.social__btn-title span {
	color: inherit;
	font-size: 20px;
	line-height: calc(24/20);
	font-weight: 400;
}
.headline__logo-block {
	display: flex;
    /* align-items: center; */
    gap: 20px;
	flex: 1 1 0;
}
.header .social__btn {
	flex: 1 1 0;
	align-self: center;
}
.headline__phone {
	display: flex;
	flex: 1 1 0;
}

.headline__phone .phone {
	margin: 0 0 0 auto;
}

@media (max-width: 1000px) {
	.social__btn-wrapper {
		gap: 7px;
	}
	.header .social__btn-title { font-size: calc((30px - 65%)) }
	.social__btn-title span { font-size: calc((20px - 40%)) }
	.header .header__wrapper { gap: 15px }
	.header .header__btn-group { gap: 15px }

	.header .social__btn-title { display: none }
	.social__btn-link { border-radius: 50% }
	.social__btn-wrapper { padding: 2px }
	.header .social__btn {
		flex: unset;
	}
}
@media (max-width: 767px) {
	.headline__wrapper {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.headline__logo-block {
		justify-content: space-between;
		grid-column: 1 / span 3;
	}
	.header .social__btn {
		grid-column: 1 / span 1;
		justify-content: flex-start;
	}
	.headline__phone {
		grid-column: 2 / span 2;
	}
	.social__btn-link {
		margin-left: 40px;
	}
	/* grid-column: 1 / span 3; */
}
@media (max-width: 550px) {
	.header .header__wrapper {
		align-items: center;
		gap: 15px;
	}
	.header .social__btn {
		flex: unset;
		align-self: center;
	}
	.header .header__btn-group { justify-content: flex-end }
	.header .header__phone-box .tel { font-size: 16px }
	.social__btn-wrapper { max-width: 35px; max-height: 35px; }
}
@media (max-width: 370px) {
	.header .header__phone-box .tel { font-size: 14px }
}
/* social__btn — end */

