/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 .lr-hb{
	position:fixed;
	display:flex;
	z-index:99999;
	width:100%;
	justify-content: center;
	height: 42px;
	padding: 3px;
	align-items: normal;
 }
 .lr-hb p{
	 margin: auto 12px auto 12px;
 }
 #lr_hb_btn{
	font-size: 15px;
	padding: 10px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	    margin: 0 2px;
 }
.lr-animated {
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes lr-lightSpeedIn {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX-5deg);
    transform: skewX(5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lr-lightSpeedIn {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lr-lightSpeedIn {
  -webkit-animation-name: lr-lightSpeedIn;
  animation-name: lr-lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
 @-webkit-keyframes lr-fadeOutUp {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
}
 @keyframes lr-fadeOutUp {
	0% {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
}

.lr-fadeOutUp {
	-webkit-animation-name: lr-fadeOutUp;
	animation-name: lr-fadeOutUp;
}
@-webkit-keyframes lr-fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100% , 0);
		transform: translate3d(0, -100% , 0)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}
 @keyframes lr-fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100% , 0);
		transform: translate3d(0, -100% , 0)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}
.lr-fadeInDown {
	-webkit-animation-name: lr-fadeInDown;
	animation-name: lr-fadeInDown
}
.error-msg{
	text-align: left;
	font-size: 12px;
	color: red;
	margin: 0;
	padding: 0;
	width: 100%
}
.sec-num-lbl{
	height: 0;
	width:0;
	opacity: 0;
	display: none;
}
.lr-frm-display{
	display:flex;
}
#lr_hb_frm input{
	margin: 0 3px;
}
@media only screen and (max-width: 600px) {
	.lr-hb{
		display:inline-grid;
		height: auto;
		margin: auto;
		
	 }
	#lr_hb_btn{
		width: 100%;
		padding: 20px 30vw;
		margin: 8px 0;
	}
	.lr-frm-display{
		display:block;
	}
	#lr_hb_frm input{
		width: 100%;
		margin: 3px 0;
	}
	.lr-hb p{
		margin: 0;
		text-align: center;
		padding: 3px;
	 }
}