@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,1000&display=swap');
:root{
	/*	Color */
	--font-color: #140E38;
	--back-color: #F6F7F9;
	--white-color: #FFFFFF;
	--red-color: #E60013;
	--grey-color: #F6F7F9;
	--grey-color-hover: #DADCE3;
	/*	Font  */
	--h1: 48px;
	--h2: 24px;
	--h1-2-fw: 800;
	--p: 16px;
	--p-fw: 400;
	--p-button-fw: 500;
	/* other */
	--border-radius: 50px;
	--button-br: 15px;
	--pad-ban: 50px;
	--pad-info: 40px;
	--pad-but: 10px 20px;
}
@media (max-width: 880px) {
	:root {
		--h1: 24px;
		--pad-ban-media: 30px;
	}
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family:  'Mulish', sans-serif;
}
.preloader{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--white-color);
	z-index: 999;
	transition: 1a all;
	opacity: 1;
	visibility: visible;
	.loader{
		width: 75px;
		height: 75px;
		border: 10px solid var(--grey-color-hover);
		border-radius: 50%;
		border-top-color: var(--red-color);
		left: 50%;
		top: 50%;
		position: absolute;
		transform: translate(-50%, -50%);
		animation: 1s spin infinite linear;
	}
	&.done{
		opacity: 0;
		visibility: hidden;
	}
}
@keyframes spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
html, body {
	height: 100%;
	background-color: var(--back-color);
}
main{
	flex: 1 1 auto;
}
.wrapper{
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
.limited{
	margin: 0 auto;
	max-width: 1480px;
}
.wrapper-box{
	margin: 0 100px;
}
h1{
	font-size: var(--h1);
	font-weight: var(--h1-2-fw);
	color: var(--font-color);
}
h2{
	font-size: var(--h2);
	font-weight: var(--h1-2-fw);
	color: var(--font-color);
}
.h2-mb{
	margin-bottom: 30px;
}
p{
	font-size: var(--p);
	font-weight: var(--p-button-fw);
	color: var(--font-color);
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--red-color);
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  background-color: var(--back-color);
}
.header{
	padding: var(--pad-ban);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0; 
	width: 1280px;
	border-radius: 0px 0px 50px 50px;
	transition: all .3s ease;
	z-index: 990;
}
.header.out {
	transform: translateY(-100%);
}
.header-box{
	position: relative;
}
.header.back {
	background-color: var(--white-color);
	border-radius: 0px 0px 50px 50px;
	box-shadow: rgba(6, 5, 50, 0.1) 0px 4px 30px;
}
.button-franshise{
	display: flex;
	background-color: var(--grey-color);
	text-decoration: none;
	font-size: var(--p);
	font-weight: var(--p-button-fw);
	color: var(--font-color);
	padding: var(--pad-but);
	border-radius: var(--button-br);
	text-align: center;
	transition: .3s;
	width: max-content;
	cursor: pointer;
}
.button-franshise:hover{
	background-color: var(--grey-color-hover);
	transition: .3s;
}
.right-top,
.shops{
	display: flex;
	gap: 7px;
}
.menu-dt{
	padding: 10px;
}
.footer{
	background-color: var(--white-color);
	border-radius: var(--border-radius);
	padding: var(--pad-ban);
	margin-bottom: 15px;
}
.company-info{
	color: var(--font-color);
	opacity: 30%;
}
.top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30px;
}
.scroll-banner{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--white-color);
	border-radius: var(--border-radius);
	padding: var(--pad-ban);
	margin: 164px 0 100px 0;
}
.scroll-banner-text{
	margin: 55px 0 30px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 7px;
}
.scroll-sell{
	position: absolute;
	top: -65px;
}
.banner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--white-color);
	border-radius: var(--border-radius);
	padding: var(--pad-ban);
	margin: 140px 0 100px 0;
}
.banner-box-text{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sellvestr-banner{
	margin-right: 30px;
}
.today-row{
	padding: var(--pad-ban);
	background-color: var(--white-color);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.content-box{
	margin-bottom: 100px;
}
.info,
.graph,
.iframe-table{
	background-color: var(--white-color);
	border-radius: var(--border-radius);
	padding: var(--pad-info);
	width: 100%;
}
.info-container{
	position: relative;
	height: 25px;
	overflow: hidden;
	margin-bottom: 20px;
}
.info-general{
	position: absolute;
	top: -77px;
	left: -15px;
	width: 105%;
	height: 200px;
}
.info-important{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}
.graphs-box{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}
.graph{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 328px;
}
.graph-container{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.block{
	position: absolute;
	bottom: 0px;
	background-color: #FFFFFF;
	height: 65px;
	width: 100%;
}
.graphs-metrics{
	position: relative;
	top: -30px;
	left: -5px;
	width: 102%;
/*	height: 340px;*/
}
.iframe-table-container{
	position: relative;
	overflow: hidden;
	height: 700px;
}
.iframe-table-metrics{
	position: absolute;
	top: -42px;
	left: -5px;
	width: 101%;
	height: 810px;
}
.map-container{
	height: 400px;
	overflow: hidden;
	border-radius: 50px;
}
.banner-pers{
	display: flex;
	margin: 140px 0 100px 0;
	background-color: var(--white-color);
	border-radius: var(--border-radius);
}
.banner-pers-box{
	display: flex;
	align-items: center;
	padding: var(--pad-ban);
	width: 50%;
}
.map_personal-container{	
	width: 50%;
	height: 373px;
	border-radius: var(--border-radius);
	overflow: hidden;
}
.buttons{
	display: flex;
	align-items: center;
	gap: 7px;
}
.red-but{
    background-color: #E60013;
    color: white;
}
@media (max-width: 1480px) {
	.header{
			width: calc(100% - 200px);
	}
	.info-important{
			grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 1024px) {
	.limited{
		margin: 0 auto;
		max-width: 1024px;
	}
	.header{
		width: calc(100% - 60px);
	}
	.wrapper-box{
		margin: 0 30px;
	}
}
@media (min-width: 1280px) {
	.graphs-metrics{
		height: 320px;
	}
}
@media (max-width: 1280px) {
	.graphs-metrics{
		height: 320px;
	}
}
@media (max-width: 880px) {
	.graphs-metrics{
		height: 305px;
	}
}
@media (max-width: 920px) {
	.iframe-table-container{
		height: 720px;
	}

	.iframe-table-metrics{
		height: 830px;
	}
}
@media (max-width: 480px) {
	.graphs-metrics{
		height: 380px;
	}
	.graphs-personal{
		height: 340px;
	}
}
@media (max-width: 880px) {
    .sellvestr-banner{
        margin-right: 0;
    }
	.scroll-banner{
		margin: 134px 0 70px 0;
	}
	.limited{
		margin: 0 auto;
		max-width: 880px;
	}
	.header{
			width: calc(100% - 30px);
	}
	.wrapper-box{
		margin: 0 15px;
	}
	.banner{
		flex-direction: column
	}
	h1,
	h2{
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	.graphs-box{
		margin-bottom: 70px;
		grid-template-columns: repeat(1, 1fr);
	}
	.banner-box-text{
		align-items: center;
		text-align: center;
		width: 100%;
	}
	.banner-pers {
		flex-direction: column;
		margin: 100px 0 70px 0;
	}
	.banner-pers-box,
	.buttons {
		flex-direction: column;
	}
	.special{
		text-align: center;
		font-size: 14px;
	}	
	.banner-box-text{
		margin-bottom: 50px;
	}
	.top{
		align-items: center;
		flex-direction: column;
		gap: 30px;
	}
	.header{
		left: 0;
		width: 100%;
		padding: var(--pad-ban-media);
	}
	.banner{
		margin: 100px 0 70px 0;
	}
	.content-box{
		margin-bottom: 70px;
	}
	.map_personal-container,
	.banner-pers-box {
		width: 100%;
	}
  .graph{
  	padding: 50px 20px;
  }
}
@media (max-width: 580px) {
	.info-important{
		grid-template-columns: repeat(1, 1fr);
	}
}
@media (max-width: 415px) {
  h1,
  h2{
  	max-width: 300px;
  }
  .block{
  	bottom: 1px;
  }
  .graph{
  	padding: 50px 10px;
  }
}