body {
	font-family: circe, sans-serif;

font-weight: 200;

font-style: normal;
	overflow-x: hidden;
}
.home {
	position: relative;
	height: 100vh;
	background:#fff;
}
.logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 0;
	padding-left: 5%;
	background: #fff;
}
.logo img {
	max-height: 45px;
	margin: 7px 0;
}
.top_logo_head {
	float: right;
	margin: 0 7% 0 2%;
	font-size: 1.5rem;
	text-transform: uppercase;
	line-height: 60px;
	color: #0000ff;
	font-weight: 900;
}
.triangle_box {  
	/* flex: 1; */
	/* outline: 5px dotted red; */
	position: relative;
	width: 100%;  
	height: 100vh; 
	position: absolute;  
	color: #fff;
}
/* The animation code */
@-webkit-keyframes tri_exapand_down,
@-moz-keyframes tri_exapand_down,
@-o-keyframes tri_exapand_down,
@keyframes tri_exapand_down
{
  0%   {clip-path: polygon(0% 1%, 0 100%, 99% 100%);}
  25%  {clip-path: polygon(0% 1%, 0 100%, 150% 75%);}
  50%  {clip-path: polygon(0% 1%, 0 100%, 250% 50%);}
  75%  {clip-path: polygon(0% 1%, 0 100%, 4090% 25%);}
  100% {clip-path: polygon(0% 0%, 0 100%, 40900% 0%);}
}
@-webkit-keyframes tri_exapand_up,
@-moz-keyframes tri_exapand_up,
@-o-keyframes tri_exapand_up,
@keyframes tri_exapand_up {
  0%   {clip-path: polygon(100% 0%, 100% 99.5%, 0.5% 0%);}
  25%  {clip-path: polygon(75% 50%, 150% 75%, 0.5% 0%);}
  50%  {clip-path: polygon(50% 150%, 200% 50%, 0.5% 0%);}
  75%  {clip-path: polygon(25% 200%, 300% 30%, 0.5% 0%);}
  100% {clip-path: polygon(0% 350%, 3940% 8.5%, 0 0%);}
}
 
.triangle {
	background: url('../img/systems.jpg');
	clip-path: polygon(0% 1%, 0 100%, 99% 100%);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 1s;
	background-repeat: no-repeat;
	background-size: cover;
}

.triangle_box._downer.expanded .triangle {
	clip-path: polygon(0% 0%, 0 100%, 40900% 0%);
	 
	-webkit-animation: tri_exapand_down 1s infinite; /* Safari 4+ */
  -moz-animation:    tri_exapand_down 1s infinite; /* Fx 5+ */
  -o-animation:      tri_exapand_down 1s infinite; /* Opera 12+ */
  animation:         tri_exapand_down 1s infinite; /* IE 10+, Fx 29+ */
  
	z-index: 9;
	//transition: all 1s;
}
.triangle_box._upper.expanded .triangle {
	 //transition: all 0.5s;
	 
	-webkit-animation: tri_exapand_up 1s infinite; /* Safari 4+ */
	-moz-animation:    tri_exapand_up 1s infinite; /* Fx 5+ */
	-o-animation:      tri_exapand_up 1s infinite; /* Opera 12+ */
	animation:         tri_exapand_up 1s infinite; /* IE 10+, Fx 29+ */
   
	clip-path: polygon(0% 350%, 3940% 8.5%, 0 0%);
}
.ltrcontent,.rtlcontent {
	color:#fff;
}
.ltrcontent {
	position: absolute;
	bottom: 8%;
	width: 40%;
	left: 4%;
	transition: all .3s;
}

.rtlcontent {
	position: absolute;
	right: 4%;
	width: 40%;
	top: 8%;
	/* right: 4%; */
	transition: all .3s;
}
.triangle_box._upper .triangle {
	background-image: url('../img/services.jpg');
	clip-path: polygon(100% 0%, 100% 99.5%, 0.5% 0%);
}
.triangle_box._upper {
}
.btn.btn_home {
	border: 2px solid #fff;
	border-radius: 0;
	color: #fff;
	font-weight: normal;
	font-size: 2rem;
	padding: 12px 20px;
	text-transform: uppercase;
	min-width: 260px;
}
.btn.btn_home:hover {
	background: rgb(92, 145, 240, 0.6);
	font-weight: bold;
}

.expand_block_container {
	position: absolute;
	width: 100%;
	height:100%;
}
.expand_block_wrapp {
	position: relative;
	width: 100%;
	height: 100%;
	/* padding-top: calc(50% - 75px); */
	/* background: gainsboro; */
}
.expand_block {
	position: absolute;
	width: 100%;
	top: 0;
	height: 100%;
	left: 0;
	clip-path: polygon(0% 1%, 0 100%, 99% 100%);
	transition: all .7s;
	opacity: 1;
}
.expand_block._xlr {
	clip-path: polygon(100% 0%, 100% 99.5%, 0.5% 0%);
}
.expand_block._xlr .lcircle {
	left: calc(50% + 35px);
	/* right: calc(50% - 80px); */
	top: calc(50% + -1px);
}
.expand_block .lcircle {
	display: block;
	width: 80px;
	height: 80px;
	background: #fff;
	border-radius: 100px;
	left: calc(50% - 118px);
	position: relative;
	top: calc(50% - 80px);
	outline: none;
}
.qrrows_block {
	position: absolute;
	width: 200px;
	height: 150px;
	left: calc(50% - 100px);
	top: calc(50% - 75px);
	/* margin: 0 auto; */ 
}
.tr_bottom {
	width: 60px;
	height: 60px;
	//border-bottom: 45px solid red;
	//border-right: 45px solid transparent;
	position: absolute;
	//transform: rotate(-4deg);
	left: calc(49% - 102px);
	top: calc(50% - 70px);
	//box-shadow: -4px 5px 6.9314px 0.0686px rgba(0, 0, 0, 0.75);
}
.tr_top {
	width: 50px;
	height: 50px;
	//border-top: 45px solid red;
	//border-left: 45px solid transparent;
	position: absolute;
	//transform: rotate(-7deg);
	right: calc(50% - 80px);
	bottom: calc(50% - 72px);
	//box-shadow: 4px -4px 6.02px 0.98px rgba(0, 0, 0, 0.75);
}
.arrow_img {
	height: 50px;
	cursor: pointer;
}
.qrrows_block_wrapp {
	position: relative;
	width: 100%;
	height: 100%;
}
.qrrows_block.slide_at_top {
	left: calc(100% - 80px);
	top: calc(1% + 8px);
	z-index: 9;
}
.qrrows_block.slide_at_bottom {
	left: -110px;
	top: initial;
	bottom: 10px;
	z-index: 9;
	/* right: 0; */
}
.expand_block_container.slide_at_bottom .expand_block, .expand_block_container.slide_at_top .expand_block {
	opacity: 0;
}
.expand_block_container.slide_at_top .ltrcontent, .expand_block_container.slide_at_bottom .rtlcontent {
	z-index: 9;
}
.expand_block_container.slide_at_bottom .ltrcontent {
	bottom: -70%;
	left: -50%;
	transition: all .3s;
}
.expand_block_container.slide_at_top .rtlcontent {
	right: -80%;
	top: -170%;
	transition: all .3s;
}
.frames_wrapp {
	position: relative;
	width: 100%;
	height: 100%;
}
.sites_load {
	width: 100%;
	height: 100vh;
	display: none;
	position: relative;
}
.sites_load.active { 
	display: block; 
}
.frame_elements, .frame_qi2 {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 100%;
	top: 0;
}
.frame_elements.active, .frame_qi2.active{
	left: 0;
}
.home.animation_complete {
	display: none;
}
.txt_block label {
	display: none;
	font-size: 1rem;
	font-weight: bold;
}
 
._frame_elements.sites_load .lbl_frame_1 {
	display: block;
}
._frame_qi2.sites_load .lbl_frame_2 {
	display: block;
}
.switch_arrow_block {
	position: absolute;
	left: 0;
	width: 145px;
	top: 100px;
	overflow: hidden;
	cursor: pointer;
}
.switch_arrow_block .txt_block {
	width: 103px;
	float: right;
	padding: 25px 0;
	text-shadow: -4px 5px 6.02px rgba(0, 0, 0, 0.35);
	color: #fff;
	text-align: center;
}
 
 
.arrow_area::before {
	 
}
.switch_arrow_block .arrow_area {
	width: 95px;
	height: 95px;
	float: left;
	/* background: gainsboro; */
	border-radius: 90px;
	position: relative;
	margin-left: -55px;
	background: #fff url('../img/right-arrow.png') 55px 22px no-repeat;
	background-size: 28px 66px;
}
.txt_block span {
	font-size: .8rem;
}

@media (min-width: 1250px) { 
 .ltrcontent { 
	bottom: 22%;
	width: 25%;
	left: 18%; 
}
.rtlcontent { 
	right: 18%;
	width: 25%;
	top: 22%; 
}
}

@media (max-width: 1530px) { 
.tr_bottom {
	transform: rotate(14deg);
	left: calc(49% - 83px);
	top: calc(50% - 82px);
}
.tr_top {
	transform: rotate(14deg);
	right: calc(50% - 67px);
	bottom: calc(50% - 80px);
}

}
@media (max-width: 768px) { 
 
.ltrcontent p, .rtlcontent p {
	height: 85px;
	overflow: hidden;
}
.expand_block_container.slide_at_top .ltrcontent p, .expand_block_container.slide_at_bottom .rtlcontent p{
	height: auto;
}
.btn.btn_home { 
	font-size: 1.5rem;
	padding: 10px 15px; 
	min-width: auto;
}
.rtlcontent {
	top: 16%;
}
.ltrcontent {
	bottom: 16%;
}
.logo img {
	max-height: 70px;
	margin: 0 auto;
	display: block;
}
.top_logo_head {
	float: none; 
	font-size: 1rem;
	text-align: center;
}
}