:root{
	--link-color: rgba(0,0,0,.55);
	--link-color-hover: #0b1e3a;
	--txt-primary-color: #0b1e3a;
	--txt-primary-color-hover: #fff;
	--btn-primary-color:#fff;
	--btn-primary-bg-color:#EEAE4D;
	--btn-primary-bg-color-hover:#d3902d;
	--font-main: 'Lato', sans-serif;
	--font-secondary: 'Roboto Condensed', sans-serif;
	--screen-height: calc(100% - 110px);
	--border-primary:#d8e1eb;
	--border-secondary:#B6C4D5;
}



/* Bootstrap styles */
.navbar .container-fluid {height:90px}
.navbar {padding: 0;}

#banner .list-group-flush > .list-group-item:first-child {
	margin-top: 0.5rem;
}
#banner .list-group-flush > .list-group-item {
	background: none;
	padding:0.5rem 0rem 0.5rem 2rem;
	border:0;
	background:url('/images/ico-check-mark.svg') no-repeat center left;
	background-size:1rem;
}


.btn{
	font-family: var(--font-secondary); 
	font-weight:bold; 
	border-radius: 30rem;
}
.btn:focus,.btn:active, .navbar-toggler:focus, .navbar-toggler:active { /* remove border glow on focus*/
	outline: none !important;
	box-shadow: none;
	border: 0;
 }
.btn-group-lg > .btn, .btn-lg {
	padding: 1rem 3rem;
}
.btn-primary{
	/* background: rgb(204,221,241);
	background: linear-gradient(192deg, rgba(204,221,241,1) 0%, rgba(68,122,185,1) 100%);  */
	background: rgb(255, 201, 85);
	background: linear-gradient(200deg, rgb(255, 206, 102) 0%, rgb(228, 165, 57) 61%); 
    border: 0 !important; 
	background-color: none;
	transition: all 1s ease;
}

.btn-primary:hover{
	background-color: unset!important;
	filter: brightness(90%) contrast(160%) saturate(120%); 
}


.navbar-toggler.collapsed .navbar-toggler-icon {
	background-image: url("/images/burger.svg");
	transition: all 1s ease;
}

.navbar-toggler .navbar-toggler-icon {
	background-image: url("/images/burger-hover.svg");
}

.navbar-light .navbar-toggler {
	border-color: transparent;
}

.navbar-expand-lg .navbar-nav .nav-link {
padding:0 1.5rem 0 1.5rem;
}
/* end Bootstrap styles */






body{
	position: relative;
	padding-top:90px;
	margin:0;
	background: #fff;
	font-family: var(--font-main);
	color: var(--txt-primary-color);
	overflow-x: hidden;
	}
	

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-secondary);
}

img {
	max-width: 100%;
	height: auto;
}

a{	
	color: var(--txt-primary-color);
	transition:all 0.3 ease;
}

a:hover{	
	color: var(--txt-primary-color-hover);
}




.navbar{
	box-shadow: 0px 5px 5px #0002;
} 



.navbar-brand:hover{	
	transition: all 1s ease;
	filter: brightness(85%) contrast(120%);
	}




.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link{
	color:var(--txt-primary-color)
}

.nav-pills .nav-link.active{background:var(--btn-primary-bg-color)}
.nav-pills .nav-link.active:hover{background:var(--btn-primary-bg-color-hover)}



.messengers { 
	float:right;
}

.messengers a{
	position: relative;
	width:32px;
	height:32px;
	float:left;
	background-repeat:no-repeat;
	background-size:100%;
	transition:all 0.5s ease;
	margin-right:10px;
}
.messengers a:hover{	
	filter: brightness(85%) contrast(120%);
	}
.messengers a:last-child{margin-right:0px;}

.messengers .ico_telegramm { 
	background-image:url(../images/telegramm.svg);
}
.messengers .ico_whatsup { 
	background-image:url(../images/whatsup.svg);
}
.messengers .ico_insta { 
	background-image:url(../images/insta.svg);
}
.messengers .ico_email { 
	background-image:url(../images/email.svg);
}

.messengers a.btn{
	width:unset;
	height:30px;
}

.messengers .ico_insta { 
	display:none
}

.messengers .lang{float:left; margin-right:10px;}
.messengers .lang a{
	width:unset;
	margin:4px 15px 0 0;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--link-color);
}
.messengers .lang a:hover{color:var(--link-color-hover);filter:unset;}

.badges
{	
	width:4rem;
	height:4rem;
}




#banner{
	position: relative;
	height:600px;
	min-height:600px;
	width:100%;
	box-sizing: border-box;
	padding:0;
	background: url('../images/banner-bg-img.jpg') top center;
	background-size:cover;
	overflow: hidden;
	/* filter:saturate(0%) */
}

/* #banner > * {
	filter:saturate(100%)
} */

.header-video {
	position: absolute;
	/* height: 100vh; */
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	object-fit: cover; 
	z-index: 1;
	opacity: 0.34;
	filter: brightness(120%) saturate(50%);
}

#banner .banner-items{
	position: absolute;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	z-index: 2;
	transition:all 1s ease;
}
.banner-items.item-1{
	background: url('../images/banner-items-1.svg') no-repeat 0px 20px /contain;
}

.banner-items.item-4{
	background: url('../images/banner-item-4.svg') no-repeat bottom right ;
}
.banner-items.item-5{
	background: url('../images/banner-item-5.svg') no-repeat center right;
}
.banner-items.item-6{
	background: url('../images/banner-item-6.svg') no-repeat bottom left;
}



.banner-content{
	position: absolute;
	top:20vh;
	z-index: 200;
}



.banner-header
{
	font-family: var(--font-secondary);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
}
.banner-text
{
	margin:1rem 0 1.5rem 0;
}


.img-back-phone{
	position: absolute; 
	right:6%; 
	top:160px;
	width:47%; 
	z-index:98;
}

.img-phone{
	position: absolute; 
	right:11%; 
	top:160px;
	width:32%; 
	z-index:99;
}

.img-tablet{
	position: absolute; 
	right:-5%; 
	top:-90px;
	width:25%; 
	z-index:99;
}

.img-tablet.mob{
	right:0%;
}

/* .img-tablet{
 	position: absolute; 
	right:0; 
	top:0px;
	width:30%; 
	height:30%;
	z-index:99;
	background:url('/images/tablet.png') no-repeat bottom right;
	background-size: contain;
	border:1px solid red; 
} */


.screens{padding:5rem 0; }


.screens h2{margin:0 0 2rem 0;}

.screens.item-2{
	background: url('/images/bg-circles.svg') top no-repeat, url('/images/screen-2-bg.jpg') top no-repeat;  /* #0B1E3A */
	background-size: cover;
	color:#fff;
	/* min-height: 50vh; */
} 


.gallery a{height:15rem;margin-bottom:2rem}

.screens.item-4{
	background:#fff;
	border-top:1px solid var(--border-primary);
}

.screens.item-5{
	background:#EBF2FA;
}
.screens.item-5 img{max-height:100px;
	filter: brightness(90%) contrast(110%) saturate(180%);
}

.screens.item-6{
	position: relative;
	margin:auto;
	background: url('/images/bg-footer.jpg') center no-repeat; 
	background-size: cover;
	color:#fff;
	min-height:90vh;
	padding:20vh 0;
	filter: saturate(110%);
} 

.screens.item-6 .messengers{
	float: none;
	margin:15px 0 10px 0;
	padding:0;
}
.messengers a{
	float: none;
	display: inline-block;
	margin: 0px 10px 0 0;
}

.screens.item-7{
	background:#fff;
	border-top:1px solid var(--border-primary);
}
.screens.item-7 .container .row .col:nth-child(2){border-right:1px solid var(--border-primary);}
.screens.item-7 .container .row .col:nth-child(3){border-right:1px solid var(--border-primary);}


.screens.item-8{
	padding:1rem 0;
	background:#EBF2FA;
}


.ship {
	position: absolute;
	height: 90%;
	width: 100%;
	top: 10%;
	left: 0;
	z-index: 2;
	transition: all 1s ease;
	background: url("/images/ship.png") center center no-repeat;
	background-size: 36vh;	
}

.copyright{
	position: absolute;
	bottom:15px;
	width:100%;
	z-index: 3;
	font-size: 14px;
}




.footer-video {
	position: absolute;
	/* height: 100vh; */
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	object-fit: cover; 
	z-index: 1;
	opacity: 0.15;
	filter: hue-rotate(30deg);
}

/* footer{background: #081832} */

.screens.item-6 .row{z-index:3;position: relative;}
.stages{padding:5rem 0;}
.stages div{
	/* margin-bottom: 1.5rem; */
	/* border: 1px solid white;  */
	opacity: 1;
}
.stages img{background:#fff1;border-radius:1rem;padding:1rem}


.container-gauge{
	display: block;
	/* background:#163259; */
	background: rgb(36,70,119);
	background: linear-gradient(155deg, rgba(36,70,119,1) 0%, rgba(22,50,89,1) 43%); 
	border-radius:8px; 
	position: relative;
	padding:30px 8px 8px 8px;
	opacity: 0.8; 
	/* opacity: 1; */
	min-height:170px;
	border:1px solid #057eff5f;
	filter: contrast(120%) brightness(110%) saturate(80%);
	font-size:0.9rem;
	line-height: 1.25;
   }
   
.gauge{
	display: block;
	position: relative;
   }

.gauge div{
	display: block;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
	box-sizing: border-box;
}
   
.gauge-line {
	 height:120px;
	 width:120px;
	 background: url('/images/sector-green.svg') no-repeat center center /cover;
	 transform: rotate(0deg);
	 z-index:1;
   }
   
.gauge-overlay
   {
	 height:120px;
	 width:120px;
	 background: url('/images/sector-hover.svg') no-repeat center center /cover;
	 transform: rotate(0deg);
	 z-index:2;
   }

	
   
.gauge-counter
   {
	height:120px;
	width:120px;
    background: url('/images/sector-counter.svg') no-repeat center center /cover;
	transform: rotate(0deg);
	z-index:3;
   }

   .gauge-text{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	bottom:0px;
	padding:0 0.9rem 0.9rem 0.9rem;
	text-align: center;
	z-index:4;
   }

   .gauge-number{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:3.5rem;
	font-size:1.8rem;
	font-weight: 900;
	text-align: center;
	z-index:4; 
   }

 .gauge-overlay.stage-1{
	animation: gauge1 infinite;
	animation-duration: 2s;
 	}
 .gauge-overlay.stage-2{
	 animation: gauge2 infinite;
	 animation-duration: 2s;
  	}
  .gauge-overlay.stage-3{
	 animation: gauge3 infinite;
	 animation-duration: 2s;
 	 }
  .gauge-overlay.stage-4{
	 animation: gauge4 infinite;
	 /* animation-iteration-count: 1; */
	 animation-duration: 2s;
	 /* transform: rotate(180deg); */
 	 }
   
@keyframes gauge1 {
	 0%   {transform: rotate(50deg);}
	 50%  {transform: rotate(30deg);}
	 100% {transform: rotate(50deg);}
   }

@keyframes gauge2 {
	0%   {transform: rotate(90deg);}
	50%  {transform: rotate(70deg);}
	100% {transform: rotate(90deg);}
  }

  @keyframes gauge3 {
	0%   {transform: rotate(140deg);}
	50%  {transform: rotate(120deg);}
	100% {transform: rotate(140deg);}
  }

@keyframes gauge4 {
   0%   {transform: rotate(180deg);}
   50%  {transform: rotate(170deg);}
   100% {transform: rotate(180deg);}
 }

   







 .chrt{
	width:40px;
	position: absolute;
	width:120px;
	height:120px;
	bottom:0px;
	right:0px;
  }
  .chrt .col{
  position: absolute;
  display: inline-block;
  bottom:0px;
  background:#fff;
  height:40px;
  width:4px;
  padding:0;
  }
  .chrt .col:nth-child(1){left:80px;background:rgb(0, 220, 44);animation: chrtmove1 infinite 2s;}
  .chrt .col:nth-child(2){left:86px;background:rgb(245, 220, 0);animation: chrtmove2 infinite 2s;}
  .chrt .col:nth-child(3){left:92px;background:rgb(0, 176, 211);animation: chrtmove3 infinite 2s;}
  .chrt .col:nth-child(4){left:98px;background:rgb(255, 23, 23);animation: chrtmove4 infinite 2s;}
  
  @keyframes chrtmove1 {
	0%   {height:7px;}
	25%  {height:5px;}
	50%  {height:12px;}
	75%  {height:16px;}
	100% {height:7px;}
  }
  @keyframes chrtmove2 {
	0%   {height:7px;}
	25%  {height:15px;}
	50%  {height:22px;}
	75%  {height:12px;}
	100% {height:7px;}
  }
  @keyframes chrtmove3 {
	0%   {height:7px;}
	25%  {height:22px;}
	50%  {height:15px;}
	75%  {height:10px;}
	100% {height:7px;}
  }
  @keyframes chrtmove4 {
	0%   {height:7px;}
	25%  {height:5px;}
	50%  {height:10px;}
	75%  {height:22px;}
	100% {height:7px;}
  }








  @media (min-width: 320px) {
	.banner-content{
		top:10vh;}
	}


@media (min-width: 576px) {

}

@media (max-width: 767px) {
	#banner{min-height:unset;}
	
	.img-back-phone{display: none;}
	.img-phone{display: none;}
	.img-tablet{display: none;}
	.messengers a {
		margin: 0px 20px 20px 0;
	}
	

	.screens.item-3 .container{overflow-x: hidden;}
	.screens.item-6 .container{overflow-x: hidden;}

	.container-gauge {padding:30px 0 0 0; }
	.gauge-counter, .gauge-overlay, .gauge-line{height: 90px;width:90px;}
}

@media (min-width: 768px) {
	.banner-content{
		top:10vh;}
}

@media (max-width: 991px) {
	body {padding-top: 70px;}
	.img-tablet{right:-2%;top:0px}
	.img-phone{width:40%;}

	
	.navbar .container-fluid {
		height: unset;
	}
	.screens {
		padding: 3rem 0;
	  }
	.screens.item-6{
		min-height:unset;
		padding: 3rem 0;
	}

	.navbar-collapse {
		 height: 100vh; 
		/*height: unset;*/
	}
	.navbar-nav{
		padding:2rem 0;

	}
	.navbar-expand-lg .navbar-nav .nav-link {
		font-size: 1.4rem;
		padding:0.7rem 0 0.7rem 2rem;		
		border-bottom: 1px solid var(--border-primary);
	}
	.navbar-expand-lg .navbar-nav .nav-item:last-child .nav-link {
		border-bottom: 0;		
	}
	

	.messengers{
		float: left;
		padding:0.7rem 0 0.7rem 2rem;	
	}
	.messengers a {
		position: relative;
		width: 40px;
		height: 40px;
	}
	.messengers a.btn{
		height: 40px;
		font-size:1.2rem;
	}
	.copyright {
		position: relative;
		width: 100%;
		margin-top: 50px;
	}



}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {
	h1{font-size: 2.2rem;} 
	.banner-content{
		top:20vh;
	}
	.gauge-number{
		top:3.5rem;
	}
}

@media (min-width: 1440px) { 
	.banner-content{font-size:1.1rem}

	.btn-lg{
		font-size:1.2rem;
	}
	.navbar-nav .nav-link {
		font-size: 1.1rem;
	  }
	.screens{font-size: 1.1rem;}

}

@media (min-width: 2000px) {
	.banner-content {
		font-size: 1.7rem;
	  }
	/* .img-tablet{right:-6%;} */
	.banner-content {
		top: 30vh;
	}
} 


.tester{
	position:relative;
	top:0;
	left:0;
	height:300px;
	width:300px;
	z-index:1000;
	border:2px solid red;
	color:#000;
}

.tester_red
{	
	border:2px solid red;
}


/* #globalwrapper{overflow-x: hidden;border:3px solid blue} */

/* .screens.item-1{overflow-x: hidden; display: none} */
/* .screens.item-2{overflow-x: hidden; display: none} */
/* .screens.item-3{overflow-x: hidden; display: none} */
/* .screens.item-4{overflow-x: hidden; display: none} */
/* .screens.item-5{overflow-x: hidden; display: none} */
.screens.item-6{overflow-x: hidden;} 
/* .screens.item-7{overflow-x: hidden; display: none} */