/*---Custom CSS---*/
.hv-hero-comm-banner.subcat{
	min-height: 610px;
}
.report-box{
	padding: 40px;
	border: 1px solid #ee0000;
	position: relative;
}
.chat-icon{
	width: 90px;
    margin: 0px auto 30px auto;
    border: 1px solid #cc0000;
    padding: 20px;
    border-radius: 50px;
}
.com-feed{
	text-align: center;
	font-size: 20px;
}
.cap-report-box{
	display: flex;
}
.report-box-arrow .hv-arrows{
	transform: rotate(-45deg);
	border-color: #fff;
	width: 20px;
	height: 20px;
}
.report-box .report-box-arrow{
	position: absolute;
	padding: 25px 33px 20px 25px;
	background: #ee0000;
	bottom: -30px;
	right: 30px;
}
.prod-solu-section{
	position: relative;
	overflow: hidden;
}
.slider-div{	
	position: absolute;
	right: -13%;
}
#lightSlider img{
	width: 270px;
}
#lightSlider li{
	position: relative;
}
#lightSlider li h1{
	position: absolute;
	bottom: 0;
	color: #fff;
	font-size: 26px;
	padding: 30px;
}
.prod-solu-section{
	padding-bottom: 100px;
}
.disclaimer p{
	font-size: 14px;
}
.topic-card .content a{
	border: 1px solid #cc0000;
}
.topic-card .content a:hover{
	background-color: #cc0000;
	color: #fff;
}
.topic-card .content a:hover svg{
	fill: #fff ;
}
#hv-on-page-chat{
	text-align: center;
}
@media only screen and (max-width: 600px) {
	.slider-div{
		position: relative;
		right: 0;
	}
	.heading2{
		text-align: center;
	}
	.heading2:after{
		left: 40%;
	}
	.prod-solu-section{
		padding-bottom: 100px;
	}
	.report-box{
		margin-bottom: 100px;
	}
	.lSAction>.lSPrev{
		left: 80% !important;
	}
	.lSAction>.lSNext{
		left: 60% !important;
	}
	.hv-hero-comm-banner.subcat .hero-banner-content{
		margin: 50px 0 50px !important;
	}
	
}
#lightSlider{
	height: auto !important;
}
.lSPager.lSpg{
	display: none !important;
}
/*#on-page-chat-component{
	display: block !important;
}*/
.lSSlideOuter{
	padding-bottom: 50px;
}
.lSSlideWrapper{
	overflow: visible !important;
}
.lSAction>a{
	bottom: -15% !important;
	top: auto !important;
	opacity: 1 !important;
}
.lSAction>.lSPrev{
	left: 70%;
}
.lSAction>.lSNext{
	left: 65%;
}
/*---Arrow CSS---*/
.arrow {
	background: #ee0000;
	height: 3px;
	width: 30px;
	margin: 0 auto;
	position: relative;
	cursor: pointer;	
  }
  .arrow:before, .arrow:after {
	content: "";
	background: #ee0000;
	position: absolute;
	height: 3px;
	width: 15px;
  }
  .arrow:before {
	right: -3px;
	bottom: -4px;
	transform: rotate(-45deg);
  }
  .arrow:after {
	right: -3px;
	top: -4px;
	transform: rotate(45deg);
  }
  
  #animation1 + label > .arrow:before {
	animation: animation-1-before-reverse 1s ease 0s 1 alternate both;
  }
  #animation1 + label > .arrow:after {
	animation: animation-1-after-reverse 1s ease 0s 1 alternate both;
  }
  #animation1:checked + label > .arrow:before {
	animation: animation-1-before 1s ease 0s 1 alternate both;
  }
  #animation1:checked + label > .arrow:after {
	animation: animation-1-after 1s ease 0s 1 alternate both;
  }
  
  @keyframes animation-1-after {
	0% {
	  right: -3px;
	  top: -4px;
	  transform: rotate(45deg);
	}
	50% {
	  width: 3px;
	  border-radius: 50%;
	  top: -20px;
	  left: 15px;
	}
	100% {
	  left: -3px;
	  bottom: -4px;
	  transform: rotate(135deg);
	  height: 3px;
	  width: 15px;
	  background: #fff;
	}
  }
  @keyframes animation-1-before {
	0% {
	  right: -3px;
	  bottom: -4px;
	  transform: rotate(-45deg);
	}
	50% {
	  width: 3px;
	  border-radius: 50%;
	  bottom: -20px;
	  left: 15px;
	}
	100% {
	  left: -3px;
	  bottom: -4px;
	  transform: rotate(-135deg);
	  height: 3px;
	  width: 15px;
	  background: #fff;
	}
  }
  @keyframes animation-1-after-reverse {
	0% {
	  left: -3px;
	  bottom: -4px;
	  transform: rotate(135deg);
	  height: 3px;
	  width: 15px;
	  background: #fff;
	}
	50% {
	  width: 3px;
	  border-radius: 50%;
	  top: -20px;
	  left: 15px;
	}
	100% {
	  right: -3px;
	  top: -4px;
	  transform: rotate(45deg);
	}
  }
  @keyframes animation-1-before-reverse {
	0% {
	  left: -3px;
	  bottom: -4px;
	  transform: rotate(-135deg);
	  height: 3px;
	  width: 15px;
	  background: #fff;
	}
	50% {
	  width: 3px;
	  border-radius: 50%;
	  bottom: -20px;
	  left: 15px;
	}
	100% {
	  right: -3px;
	  bottom: -4px;
	  transform: rotate(-45deg);
	}
  }
  .left-arrow .arrow:before{
	left: -3px !important;
	transform: rotate(-145deg);
  }
  .left-arrow .arrow:after{
	left: -3px !important;
	transform: rotate(145deg);
  }
  
  @media (max-width: 767px){
	.hv-hero-comm-banner.subcat .hero-banner-content {
    	margin: 50px 0 50px;
	}
  }

/*---arrow animate---*/
.arrow-animate {
bottom: 35px;
cursor: pointer;
display: block !important;

}
.arrow-animate {
    width: 40px;
    height: 40px;
    position: absolute;
    margin: 0 auto;
    bottom: 20px;
    left: 0;
    right: 0;    
}
.arrow-animate.white:after, .arrow-animate.white:before, .arrow-animate.white .moving-arrow:before, .arrow-animate.white .moving-arrow:after{
	background: #fff;
}
.arrow-animate:before {
    transform: rotate(-50deg);
    left: 12px;
}
.arrow-animate:after, .arrow-animate:before, .arrow-animate .moving-arrow:before, .arrow-animate .moving-arrow:after{
	content: "";
    position: absolute;
    top: 0;
    width: 2px;
    height: 20px;
    background: #333;
}
.arrow-animate .moving-arrow {
    position: absolute;
    left: 0;
    width: 40px;
    height: 18px;
    animation: down 1.5s linear infinite alternate;
    -moz-animation: down 1.5s linear infinite alternate;
    -webkit-animation: down 1.5s linear infinite alternate;
    -o-animation: down 1.5s linear infinite alternate;
    -ms-animation: down 1.5s linear infinite alternate;
    -webkit-animation-iteration-count: 10;
    animation-iteration-count: 10;
}
.arrow-animate.white:after, .arrow-animate.white:before, .arrow-animate.white .moving-arrow:before, .arrow-animate.white .moving-arrow:after {
    background: #fff;
}
.arrow-animate:after {
    transform: rotate(50deg);
    right: 12px;
}
.arrow-animate:after, .arrow-animate:before, .arrow-animate .moving-arrow:before, .arrow-animate .moving-arrow:after {
    content: "";
    position: absolute;
    top: 0;
    width: 2px;
    height: 20px;
    background: #333;
}
.arrow-animate .moving-arrow:before {
    transform: rotate(-50deg);
    left: 12px;
    top: 10px;
    transition: .2s ease-in-out;
}
.arrow-animate .moving-arrow:after {
    transform: rotate(50deg);
    right: 12px;
    top: 10px;
    transition: .2s ease-in-out;
}