@charset "UTF-8"; 
:root{
	--color-main:#000;
	--color1:#14b35b;
	--color2:#5e92b1;
	--color-inside:#fff;
	--color-footer:#b3b3b3;
	--bg-footer:#2b2a28;
	
}
*{
	margin: 0; 
	box-sizing: border-box;	
}
a{ 
	text-decoration:none; color:inherit; 
	-webkit-tap-highlight-color: transparent;	
}
a:visited{color:inherit;}

body{
	font-family: MontserratReg, system-ui, sans-serif; 
	font-size: 16px;
	color:var(--color-main);
	/*min-height: 100vh;*/
}
h3{
	font-family: MontserratSemiBold, system-ui, sans-serif; font-weight:unset;
}
h2{
	text-shadow: 1px 7px 11px #c3c3c3;
}

.small{	font-size:small;}
.med{	font-size:medium;}
.bold{font-family: MontserratSemiBold, system-ui, sans-serif; font-weight:unset;}
.big{font-size:1.3em;}
.bigger{font-size:2em;}

.box_content{
	/*padding:0 15%;*/
	padding: 2em 15% 2em 15%;
}
.landing{
	position: relative;		
	background: linear-gradient(to right, #ffffff1c, #93939361);
	.but_rect{
		box-shadow:none;
	}
}

.landing::before {
  content: "";
  position: absolute;
  background:url(../img/baner2.png) no-repeat;
  background-position:center;
  background-size:cover;
  top: 0;
  right: 0; 
  left: 0;  
  height:100%;
  z-index: -1;
}

.header{
	background-color:#53768b; margin-top:0; padding-top:1em; padding-bottom:1em; color:#fff;
}
header{
	display:flex;
	width: 100%;
	/*padding: 1em;*/
    flex-direction: row;
    align-items: center;
	gap: 1em;
	justify-content: space-between;	
	.but_rect{		
		padding: 0.5em 2em;		
		box-shadow:none;
	}
}
section{
	margin-top:3em;	
}
.logo{
	display:inline-block;
	background:url(../img/logo.png) center no-repeat;
	background-size:cover;
	width:64px;	height:64px;min-width:64px;	min-height:64px;	
}
.wrap_flex_row_col{
	display: flex;
    flex-wrap: inherit;
    align-items: center;    
	justify-content: flex-start;
	gap: 1em;
}
.wrap_flex_row{
	display: flex; flex-direction: row; flex-wrap: nowrap;   align-items: center;   justify-content: center;	
	gap: 1em;
}
.wrap{	flex-wrap: wrap;}

.wrap_flex_col{
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	gap: 2em;
	.but_rect{
		width: -webkit-fill-available;
	}	
}
 .w50100{ min-width: calc(100% / 2 - 1em); width: calc(100% / 2 - 1em);	 max-width: 50%; }
 .fx_vstart{align-items: flex-start;}
 
.fx_left{
	align-items: flex-start;
}
.but_rect{
	background-color: var(--color1);
	color: var(--color-inside);
	font-size: 1.2em;
	text-align:center;	
	text-shadow: 1px 1px 2px #373737;
	padding: 1em 2em;
    border-radius: 6px;	
	transition: color .2s;
	box-shadow: 0px 18px 20px 0px #d9d9d9;
}
.but_rect_title{white-space: nowrap;}
.but_rect:hover{
	cursor:pointer;
	background-color: #23bf69;
}	

.phone{
	font-size: x-large;
	color: white;
    text-shadow: 1px 1px 2px black;
    white-space: nowrap;
}
.elips_marker{
	background-color: var(--color2);
    color: var(--color-inside);
    padding: 0.5em 1em 0.5em 0.8em;
    border-radius: 60px;
	text-align: left;
}
.marker{
	font-weight: bold;
}	

.block_counter{
	justify-content: center; 	gap: 3em;
	background-color: var(--color2);
	color:var(--color-inside);
	padding: 1em 2em;
	border-radius: 6px;
	width: fit-content;
    margin: auto;
	transform: translateY(75%);
	z-index:2;
	.wrap_flex_row{
		gap: 1em;
	}
	.counter{
		font-size: 3.5em;		
	}
}
.bg_icon{
	background-size:cover;
	background-position:center;
	background-repeat: no-repeat;
	border-radius:6px;
}
.s80{
	width:80px; height:80px; min-width:80px; min-height:80px;
}
.block_3{
	.column{
		width:48%;
	}
	.title{
		
	}
}
.list_marker{
	padding-left: 0;
}
.list_marker li{
	display: flex;
    align-items: center;    
    margin-bottom: 0.5em;	
	list-style-type: none;
}
.list_marker li::before{
	content:'';
	display:block;margin-right: 0.5em;
	background: url(../img/vgreen.svg) center no-repeat;	
    background-size: contain;
	width: 1em;height: 1em;min-width: 1em;	
}
.bgconsult{
	position: relative;		
	background-color: #dddddd75;
	
}
.bgconsult::before {
  content: "";
  position: absolute;
  background:url(../img/ntt_baner2.png) no-repeat;
  background-position: 25% center;
  background-size:cover;
  top: 0;
  right: 0; 
  left: 0;  
  height:100%;
  z-index: -1;
}
.phone_back{
	background-color:var(--bg-footer);
	color:#fff;
	padding:1.5em;
	border-radius:6px;
	gap: 0.2em;
	width: min-content;
	max-width: 100%;
	
	[data-caption]{
		font-size:1.3em;
		font-family: MontserratSemiBold, system-ui, sans-serif;
		font-weight: unset;
	}
	label{
		font-size: x-large;
		text-align: center;
		color:black;
		background-color:#fff;
		padding:0.5em 1em;
		border-radius:6px;
		white-space: nowrap;
		input{
			width: 220px;
			border:none;			
			outline:none;
			font-size: x-large;
            font-family: inherit;
			color:inherit;			
		}
		/*
		input::before{
			content:"+7";
		}
		*/
		
	}
}
.accord{
	text-align:left;
	width: 80%;
	background-color: white;
	padding: 1em;
	h3{
		display: flex; align-items: center; justify-content: space-between;		
	}
	h3:hover{
		cursor:default;
	}
	p{
		display:block;
		overflow-y:hidden;
		height:0;
        max-height: max-content;		
		transition: all .6s;
		width: calc(85%);
        text-align: justify;
	}
	.marker_accord{
		background: var(--color1) url(../img/cancel_white.svg) center no-repeat;
		background-size:cover;
		border-radius: 50%;
		margin-left: 1em;
		min-width:2em; min-height:2em;		
		transform: rotate(45deg);
		transition: all .2s;
	}	
}
.active_accord{
	.marker_accord{
		transform: none;
	}
	p{
		height:300px;
		margin-top:1em;
	}	
}

.for_mobile{display:none;}

footer{	
	background-color:var(--bg-footer);
	color: var(--color-footer);
	padding: 2em 0;
    margin-top: 4em;	
}
.author{
	background-color:#000000;
	padding:1em;
	text-align:center;
	color:grey;
}

/*-------------------------------------------------*/
@media screen and (max-width: 1680px) {	
	.box_content{
		padding-left:10%;
		padding-right:10%;
	}
}	
@media screen and (max-width: 1440px) {	
	.box_content{
		padding-left:10%;
		padding-right:10%;
	}
	block_counter {    
		gap: 2em;
	}
}
@media screen and (max-width: 1280px) {	
	.block_counter {    
		justify-content: flex-start;		
		gap:1em;
		.counter{
			font-size:2.5em;
		}
	}
}

/*если вход с мобильного*/
@media screen and (max-width: 768px) {	
	body{	
		
	}
	.logo{		
		width:48px;	height:48px;min-width:48px;	min-height:48px;		
	}
	.header{
		background-color:var(--bg-footer);
	}
	header{		
		font-size:small;
		.phone{	font-size:large;}
		
	}
	.for_pc{display:none;}
	.for_mobile{display:unset;}
	.but_rect{padding: 1em;}
		
	.landing::before {
		/*background-position: left;*/
		background:none;
	}
	.bgconsult{ background-color:#f3f3f3a1;}
	.bgconsult::before{
		background-position: 48% center;	
	}
	.box_content{
		padding:1em;
	}
	.block_counter {    
		justify-content: flex-start;				
		transform: none;
		gap:1em;
		.counter{
			font-size:2.5em;
		}
	}
	.elips_marker {  width: -webkit-fill-available;}
	.block_3{
		flex-direction: column;
		.column{width:auto;	}
	}
	.wrap_flex_row_col{
		flex-direction: column;
		width: -webkit-fill-available;
		text-align: center;
		align-items:stretch;
	}	
	.phone_back {
		width: min-content;
		margin: 0 auto;
		font-size:medium;
		
		[data-caption]{
			font-size:inherit;			
		}		
		label{	padding:0.4em 0;	}
	}
	.s80{	width:65px; height:65px; min-width:65px; min-height:65px;	}
	.w50100{ min-width: unset; width:auto; max-width: unset; }
	
	.accord{width:100%;}
	
	footer .wrap_flex_row_col{
		align-items:center;
	}
}