@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
  url('../fonts/OpenSans-Regular.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
  url('../fonts/Roboto-Regular.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Bold';
  src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
  url('../fonts/Roboto-Bold.woff') format('woff');
   font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Freehand 521 BT';
  src: url('../fonts/Freehand-521-BT.woff2') format('woff2'),
  url('../fonts/Freehand-521-BT.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


*{
    margin: 0;
    padding: 0;
}

body{
	/*background: url(../images/main-fon-up-left.png) 0 0 no-repeat;*/
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
	color: #333333;
}

h1{
	font-family: 'Roboto Bold';
	margin: 10px 0 15px;
	text-transform: uppercase;
	font-size: 1.8rem;
}

h2{
	font-family: 'Roboto Bold';
	margin: 10px 0 5px;
	font-size: 1.6rem;
}

h3{
	font-family: 'Roboto Bold';
	margin: 10px 0 5px;
	font-size: 1.4rem;
}

ul{
    list-style-type: none;
}

.background-no{
	background: none  !important;
}

.beta{
	background: #FFE599;
	padding: 20px;
	margin: 0 0 30px 0;
}

.beta a{
	color: #666666;
}

.info,
.alice-warning{
	background: #FFE599;
	padding: 20px;
	margin: 0 0 30px 0;
}

.quick-links li{
	margin: 0 0 8px 0;
}

ul.list-component{
	margin: 0 0 48px 0;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.list-component li{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	list-style-type: none;
	/*text-align: center;*/
	width: 49%;
	box-sizing: border-box;
	border-bottom: 1px solid #CCC;
}

.list-component li div{
	padding: 0 12px;
}

.list-component li div:nth-child(1){
	width: 100px;
}

.list-component li div:nth-child(2){
	width: 100px;
}

.list-component li div:nth-child(3){
	width: 100%;
}

ul.device-schemes{
	margin: 0 0 48px 0;
	list-style-type: none;
}

.device-schemes{
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	
}

.device-schemes li{
	width: 32%;
	border: 1px solid #EFEFEF;
	
}

.device-schemes-title{
	text-align: center;
	background: #EFEFEF;
	padding: 8px 0 12px 0;
}


.content ul.list-gbr{
	list-style-type: none;
	margin: 0;
	text-align: center;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.content ul.list-gbr li{
	margin-bottom: 12px;
	width: 32%;
}

.content ul.list-gbr img{
}

a{
	color: #34BE7F;
	-webkit-transition: all 1s ease 0.15s;
    -moz-transition: all 1s ease 0.15s;
    -o-transition: all 1s ease 0.15s;
    transition: all ease 0.15s;
}

.mobile{
	display: none !important;
}

.logo{
	background: url(../images/logo.png) 0 0 no-repeat;
	width: 255px;
	height: 59px;
}

.logo a{
	display: block;
	width: 100%;
	height: 100%;
}


.main-box{
	position: relative;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(230,229,232,1) 100%);
	height: 886px;
	box-sizing: border-box;
}

.main-box-img{
	position: absolute;
	right: 0;
	top: 0;
	background: url(../images/fon-main.png) 100% 0 no-repeat;
	height: 886px;
	width: 1074px;
}

.main-box-img-left{
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/main-fon-up-left.png) 0 0 no-repeat;
	height: 886px;
	width: 550px;
}

.wrapper{
	position: relative;
	margin: 0 8%;
	padding-top: 50px;
	height: calc(100% - 50px);
}

.wrapper.height-auto{
	height: auto;
	min-height: 680px;
}

.wrapper-page{
	position: relative;
	margin: 0 8%;
}

.block-grey{
	background: #F2F2F6;
}

.wrapper-up{
	display: flex;
	justify-content: space-between;
	line-height: 59px;
}

.wrapper-up a{
    color: #444444;
	text-decoration: none;
}

.wrapper-up a:hover{
	text-decoration: underline;
}

.menu{
	display: flex;
	font-size: 1rem;
}

.menu > li{
	margin: 0 12px;
}

.menu > li a.focus{
	position: relative;
	display: inline-block;
	color: #33BE7F;
}

.menu > li a.focus::after{
	content: '';
	position: absolute;
	right:  -6px;
	top: 28%;
	width: 4px;
	height: 4px;
	background: #FF0000;
}

.menu-lvl{
	position: relative;
}

.menu-lvl ul{
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	width: 240px;
	/*padding: 15px 0;*/
	background: #f8f8f8; 
	font-size: .9rem;
	border: 1px solid #CCCCCC;
}

.menu-lvl ul li{
	border-bottom: 1px solid #CCCCCC;
	line-height: 45px;
}

.menu-lvl ul li a{
	display: block;
	height: 100%;
	padding: 0 15px;
	box-sizing: border-box;
}

.menu-lvl ul li a:hover{
	background: #f1f1f1;
	text-decoration: none;
}

.menu-lvl > span{
	color: #555555;
	cursor: pointer;
}

.menu-lvl > span:hover{
	text-decoration: underline;
	color: #444444;
}

.auth{
	position: relative;
	font-size: 1rem;
}

.auth-error{
	display: none;
	background: #FFEFBF;
	color: #CC0000;
	margin: 20px 0 0 0;
	font-size: .8rem;
	text-align: center;
	padding: 7px 10px;
}

.menu-icon{
	display: none;
	position: absolute;
	right: 0;
	top: 12px;
	width: 28px;
	height: 25px;
	border: 1px solid #000000;
	border-radius: 5px;
	padding: 8px 0 0 5px;
	cursor: pointer;
}

.menu-icon:hover{
	background: #3981B4;
	border: 1px solid #3981B4;
}

.menu-icon:hover span{
	
	background: #FFFFFF;
}


.menu-icon span{
	display: block;
	width: 23px;
	height: 2px;
	background: #000000;
	margin-bottom: 5px;
}

.main-box-block{
	width: 630px;
	margin-top: 180px;
}

.main-box-title{
	font-family: 'Roboto', sans-serif;
	font-size: 2.8rem;
}

.main-box-title b{
	font-family: 'Roboto Bold', sans-serif;
}

.main-box-title span{
	position: relative;
	
}

.main-box-title sup{
	font-size: .8rem;
	position: absolute;
	top: 5px;
	line-height: 0;
}

.main-box-text{
	color: #666666;
	margin-top: 15px;
	font-size: 1.1rem;
}

.main-box-button{
	display: block;
	margin-top: 25px;
	background: #34BE7F;
	border: none;
	color: #FFFFFF;
	width: 320px;
	height: 86px;
	line-height: 86px;
	font-family: 'Roboto', sans-serif;
	font-size: 1.6rem;
	border-radius: 20px;
	cursor: pointer;
	text-align: center;
	position: relative;
	z-index: 1;
}

a.main-box-button{
	text-decoration: none;
}
	

.main-box-button:hover{
	background: #2EA972;
}


.main-box-version{
	text-align: center;
	width: 320px;
	color: #666666;
	margin-top: 10px;	
}

.firmware-version{
	display: inline-block;
	position: absolute;
	right: 0;
	bottom: 80px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	background: #FFE599;
	padding: 0 20px;
	line-height: 54px;
	/*width: 400px;*/
	border-radius: 5px;
}

.news{
	display: flex;
	justify-content: space-between;
	/*align-items: center;*/
	height: 255px;
	margin: 20px 0;
}

.mt40{
	margin-top: 40px;
}

.news li{
	width: 50%;
	border-right: 1px solid #CCCCCC;
	box-sizing: border-box;
	padding: 0 35px;
}

.news li:first-child{
	padding-left: 0;
}

.news li:last-child{
	border-right: 0;
	padding-right: 0;
}

.news a{
	color: #333333;
	text-decoration: none;
}

.news-title{
	font-size: 1.15rem;
	margin-top: 20px;
}
.news-title a{
	font-weight: bold;
}

.news-title a:hover{
	text-decoration: underline;
}

.news-title span{
	font-size: 1.15rem;
	font-weight: normal;
	color: #777777;
}

.news-text{
	margin-top: 15px;
	font-size: 1.05rem;
}

.news-more{
	margin-top: 10px;
	font-size: 1rem;
	text-align: right;
	color: #777777;
	text-decoration: none;
}

.news-more a{ 
	display: inline-block;
	border: 1px solid #999999;
	padding: 4px 8px;
	color: #666666;
	border-radius: 4px;
}

.news-more a:hover{ 
	text-decoration: none;
}

.news-box-cat ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.advantages{
	padding: 120px 0 40px;
	background: #F2F2F6;
	display: flex;
	flex-wrap: wrap;
}

.advantages li{
	width: 50%;
	display: flex;
	margin-bottom: 80px;
}

.advantages li img{
	display: block;
}

.advantages-text{
	margin: 0 25px 0 45px;
	width: 460px;
	font-size: 1.05rem;
	box-sizing: border-box;
}

.advantages-title{
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	margin-bottom: 15px;
}

h2.center{
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 2.6rem;
	margin-top: 100px;
}

.start-box{
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 100px;
}

.start{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-top: 40px;
	align-items: top;
	width: 50%;
}

.start li{
	display: flex;
	width: 100%;
}

.start.right li{
	margin-top: 150px;
}

.start.left li{
	margin-top: 120px;
}


.start.left li:first-child{
	margin-top: 0;
}

.start-number{
	font-family: 'Freehand 521 BT', sans-serif;
	font-weight: 600;
	font-size: 7rem;
	color: #3980B3;
	margin-right: 35px;
	
}

.start-title{
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	margin: 15px 0 15px;
}

.start-text{
	margin-right: 45px;
	font-size: 1.05rem;
}

.wrapper-page.systems-box{
	background: #E8EEF2;
	margin: 0;
	padding-top: 100px;
}

.systems-box h2{
	margin-top: 0;
}

.systems{
	margin: 20px auto 0;
	text-align: center;
	position: relative;
	height: 750px;
	overflow: hidden;
	width: 1400px;
}

.main-box-img{
	overflow: hidden;
}

.signal.one{
	display: none;
	position: absolute;
	top: 479px;
	left: 635px;
	background: url(../images/signal-left.png) 0 0 no-repeat;
	width: 17px;
	height: 11px;
}

.signal.two{
	display: none;
	position: absolute;
	top: 637px;
	left: 345px;
	background: url(../images/signal-right.png) 0 0 no-repeat;
	width: 17px;
	height: 11px;
}

.signal.three{
	display: none;
	position: absolute;
	top: 730px;
	left: 690px;
	background: url(../images/signal-up.png) 0 0 no-repeat;
	width: 17px;
	height: 11px;
}

.systems-text{
	margin-top: 25px;
	font-size: 1.05rem;
}

.footnote-text{
	position: absolute;
	top: 0;
	left: 60px;
	font-size: 1.05rem;
}

.footnote-text.left{
	left: 5px;
	right: auto;
}

.footnote-descr{
	position: absolute;
	top: 35px;
	left: 60px;
	font-size: .8rem;
	text-align: left;
	color: #555555;
}

.footnote-descr.left{
	left: 0;
	width: 280px;
}

.footnote1-box{
	display: none;
	position: absolute;
	left: 145px;
	top: -50px;
}

.footnote2-box{
	display: none;
	position: absolute;
	left: 300px;
	top: -50px;
}

.footnote3-box{
	display: none;
	position: absolute;
	left: -30px;
	top: -10px;
}

.system-house{
	position: absolute;
	top: 100px;
	left: 10%;
	z-index: 4;
}

.system-house .system-img{
	position: absolute;
	width: 637px;
	height: 579px;
	background: url(../images/system-home.png) 0 0 no-repeat;
}

.system-electric{
	position: absolute;
	top: 220px;
	left: 47%;
	z-index: 2;
}

.system-electric .system-img{
	position: absolute;
	width: 637px;
	height: 579px;
	background: url(../images/system-electric.png) 0 0 no-repeat;
}

.system-auto{
	position: absolute;
	top: 160px;
	left: 55%;
	z-index: 1;
}

.system-auto .system-img{
	position: absolute;
	width: 637px;
	height: 579px;
	background: url(../images/system-auto.png) 0 0 no-repeat;
}

.system-parnik{
	position: absolute;
	top: 400px;
	left: 55%;
	z-index: 3;
}

.system-parnik .system-img{
	position: absolute;
	width: 637px;
	height: 579px;
	background: url(../images/system-parnik.png) 0 0 no-repeat;
}

.wrapper-footer{
	background: #F2F2F6;
	border-top: 1px solid #BBBBBB;
}

.footer{
	display: flex;
	justify-content: space-between;
	font-size: .95rem;
	height: 180px;
	padding-top: 35px;
	margin: 0 8%;
}

.footer-left{
	display: flex;
}

.footer a{
	color: #575757;
}

.footer .copyright{
	margin-right: 140px;
}

.footer-menu li{
	margin-bottom: 5px;
}


.wrapper-page-box{
	margin-top: 40px;
}

#dle-content{
	margin: 0 0 60px;
	display: flex;
}

.news-box-cat #dle-content{
	display: flex;
}

.faq span{
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
	text-decoration: none;
	cursor: pointer;
}

.faq span:hover{
	text-decoration: underline;
}

.faq p{
	display: none;
	font-size: .95rem;
	margin-bottom: 35px;
}

.addcomment h3{
	margin-bottom: 10px;
}

ul.doc-tree,
.doc-tree ul{
	list-style-type: none;
}

.doc-tree span{
	text-decoration: underline;
	color: #555555;
	cursor: pointer;
}

.doc-tree span:hover{
	text-decoration: none;
}

.doc-tree li{
	padding: 3px 0;
}

.components{
	list-style-type: none !important;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px !important;
	padding: 0;
}

.components li{
	width: 20%;
	margin-bottom: 30px;
	/*flex: 1 1 auto;*/
	padding: 0 10px;
	box-sizing: border-box;
}

.components li .ins{
	text-align: center;
	font-size: .9rem;
	color: #999999;
}

.components li .descr{
	font-size: .9rem;
	margin-top: 10px; 
}

.components li img{
	width: 100%;
}


.link-ali{
	display: block;
	font-size: .9rem;
	color: #3980B3;
	margin-top: 10px;
}

.base-alice{
	display: flex;
	flex-wrap: nowrap;
	margin-top: 24px;
	align-items: center;
	background: #F6F0FF;
	padding: 24px;
}

.base-alice-logo{
	margin-right: 12px;
}

.base-alice a{
	color: #8B5EFF;
}
ul.alice-links{
	margin-left: 24px;
}
.alice-links li{
	margin: 0 0 8px 0;
	
}

@media all and (max-width: 1920px) {
	
	.components li{
		width: 25%;
	}
}



@media all and (max-width: 1440px) {
	
	.wrapper-up{
		/*position: relative;*/
	}
	
	.menu{
		/*display: none;*/
		position: fixed;
		right: 0;
		top: 0;
		background: rgba(255, 2555, 255, 0.98);
		width: 94%;
		height: 100%;
		padding: 40px 30px;
		z-index: 5;
		box-sizing: border-box;
	}
	
	.menu{
		display: none;
	}
	
	.menu-close{
		display: none;
		position: fixed;
		right: 25px;
		top: 25px;
		height: 32px;
		width: 32px;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg); 
		transform: rotate(45deg);
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		z-index: 6;
	}
	
	.menu-close::after{
		content: '';
		position: absolute;
		right: 0;
		top: 15px;
		width: 32px;
		height: 2px;
		background: #000000;

	}
	
	.menu-close::before{
		content: '';
		position: absolute;
		right: 15px;
		top: 0;
		width: 2px;
		height: 32px;
		background: #000000;
	}
	
	.menu-close:hover::after,
	.menu-close:hover::before{
		background: #777777;
	}
	
	.menu-close::before{
		
	}
	
	.menu-icon{
		display: block;
	}
	
	.auth{
		padding-right: 54px;
	}
	
		
	.auth .right{
		margin-top: 12px;
		line-height: 1rem;
	}
	
	.login-messages{
		right: 54px;
		top: 27px;
	}
	
	.systems{
		width: auto;
	}
	
	.systems-box{
		display: none;
	}
	
	.start-img img{
		width: 100%;
	}
	
	.start-descr{
		font-size: 1rem;
	}
	
	.advantages-text{
		font-size: 1rem;
	}
	
	.news-text{
		font-size: 1rem;
	}
	
	.main-box-title{
		font-size: 2.4rem;
	}
	
	.main-box-text{
		font-size: 1rem;
	}
	
}

@media all and (max-width: 1140px) {
	
}

@media all and (max-width: 960px) {
	
	.components li{
		width: 33.33%;
	}
	
	.wrapper{
		margin: 0 5%;
	}

	.wrapper-page{
		margin: 0 5%;
	}
	
	.main-box-img{
		opacity: 0.1;
	}
	
	.advantages-img img{
		width: 96px;
	}
	
	.main-box-img {
		width: 100%;
		/*background-size: 100%;*/
	}
	
	.page-cols.instructions{
		display: block;
	}
	
	.page-col.base-espsmart{
		width: 100%;
	}
	
	.page-col.base-ide{
		width: 100%;
		margin-top: 15px;
	}
	
	
}

@media all and (max-width: 780px) {
	
	.mobile{
		display: block;
	}
	
	.main-box-block {
		width: 100%;
		box-sizing: border-box;
	}
	
	.advantages {
		display: block;
	}
	
	.advantages li {
		width: 100%;
		display: flex;
	}
	
	.start-number {
		font-size: 6rem;
	}
	
	.start.left li {
		margin-top: 25px;
	}
	
	.start-box{
		display: block;
	}
	
	
	
	.start.left{
		width: 100%;
	}
	
	.start.left .mobile{
		display: flex !important;
	}
	
	.start.right{
		display: none;
	}
	
	.start-text {
		margin-right: 0;
	}
	
	.news li{
		border: none;
		width: 100%;
		padding: 0;
	}
	
	.news li:last-child{
		display: none;
	}
	
	.components li{
		width: 50%;
	}
	
}

@media all and (max-width: 576px) {
	
	.components li{
		width: 100%;
	}
	
	.wrapper{
		margin: 0 6%;
	}

	.wrapper-page{
		margin: 0 6%;
	}
	
	h2.center{
		
		font-size: 2.1rem;
		margin-top: 50px;
	}
	
	
	.wrapper-up {
		display: block;
	}
	
	.auth{
		position: static;
		padding-right: 0;
		line-height: 1.4rem;
		margin-top: 20px;
	}
	
	.login-messages{
		position: static;
		text-align: right;
		width: auto;
		margin-top: 4px;
	}
	
	.menu-icon {
		top: 60px;
	}
	
	.main-box-title{
		font-size: 2.0rem;
		line-height: 2rem;
	}
	
	.main-box-button {
		line-height: 64px;
		height: 64px;
		font-size: 1.4rem;
	}
	
	.firmware-version{
		display: block;
		position: static;
		margin-top: 30px;
		font-size: .9rem;
		line-height: normal;
		padding: 10px 15px;
		text-align: center;
	}
	
	.main-box-img-left{
		width: 90%;
		background-position: 100% 100%;
		/*background-size: 100%;*/
	}
	
	.main-box-block {
		margin-top: 90px;
	}
	
	.base-espsmart ul {
		display: block;
	}
	
	.base-espsmart ul li{
		width: 100%;
		margin: 10px 0;
	}
	
	.news{
		height: auto;
	}
	
	
	.footer-menu{
		display: none;
	}
	
	.main-box-button{
		width: 280px;
	}
	

	.advantages{
		padding-top: 60px;
	}
	
	.advantages-text{
		margin: 0 0 0 20px;
		
	}
	
	.footer {
		display: block;
	}
	
	.footer-app{
		margin-top: 24px;
	} 
	
}

@media all and (max-width: 360px) {
	
	.main-box-title {
		font-size: 2rem;
	}
	
	.logo{
		width: 200px;
		height: 46px;
		background-size: cover;
	}
	
	.advantages-img img {
		width: 64px;
	}
	
	.main-box-version{
		width: 100%;
	}
	
	.advantages-text{
		margin: 0 0 0 20px;
		
	}
	
	.start-number {
		font-size: 4rem;
		margin-right: 20px;
	}
}


	
}