:root {
  --primary-color: #000;
}



body {
  line-height: 1.4;
  padding: 1rem;
 


  
}
.signature-pad {
  display: block;
    width: 100%;

  cursor: url(http://icons.iconarchive.com/icons/designcontest/vintage/32/Patent-Pen-icon.png) 1 26, pointer;
/*  border: 2px solid var(--primary-color);*/
  border: 2px dashed var(--primary-color);
  background-color: #f6f6f6; /* just try */
  border-radius: 4px;
  touch-action: none; /* very useful to prevent scolling in mobile*/
}
@media (pointer: coarse) {
  body {
/*    overflow: hidden;*/ /* Needed to prevent the vertical scroll on touch devices */
    overflow: auto;
  }
}

/* Style buttons */








.material-symbols-sharp {
    vertical-align: middle; /*https://stackoverflow.com/questions/49657545/mat-icon-does-not-center-in-its-div*/

  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' 0,
  'opsz' 40
 
}




#divWrapper{
   display:inline;
   position: relative;
}

#divWrapper i {
   position: absolute;
   left: 0;
}


.form-control:focus + i{
   display: none;
}


/*******************submit button*/

@import url('https://fonts.googleapis.com/css?family=Roboto:400');

* {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    outline:none;
}

#button-wrapper {
  font-family: 'Roboto', sans-serif;
  font-size:21px;
  text-transform:uppercase;
  letter-spacing:6px;
  color:white;
  width:100%;
/*  height: 100px; */
  height: 50px;
/*  position: absolute; */
  position: relative;
  top: calc(50% - 30px);
  left: 0;
  padding:10px 0px;
  overflow: visible;
//  border: none;
}

.submit, .loader, .loader-wrapper{
  position:relative;
  left:0;
  right:0;
  margin:0 auto;
}

.submit {
  z-index:2;
  width:325px;
  height:50px;
/* background: linear-gradient(to right, #ffb369 0%,#ff4272 100%); */ 
 background: linear-gradient(to right, #79828B 0%,#25282B 100%); 
  display:block;
  border-radius:200px;
  text-align:center;
  color:rgba(255,255,255,1);
  text-decoration:none;
  line-height:220%;
  transition: all 0.7s ease, line-height 0s ease, color 0.4s ease, filter 0.2s ease;
border: none;
}

#button-wrapper::selection, .submit::selection {
  background: transparent;
}

.submit:before {
  content:"";
  z-index:-2;
  width:100%;
  height:100%;
 /* background: linear-gradient(to right, #ffb369 0%,#ff4272 100%); */
 background: linear-gradient(to right, #79828B 0%,#25282B 100%); 
display:block;
  border-radius:200px;
  position:absolute;
  left:0;
  top:0;
  opacity:0.8;
  transform:scale(0.9) translateY(15px);
  filter:blur(20px);
  transition:all 0.2s ease;
}

.submit:after {
  content:"";
  z-index:-4;
  width:100%;
  height:100%;
/* background: linear-gradient(to right, #ffb369 0%,#ff4272 100%); */
 background: linear-gradient(to right, #79828B 0%,#25282B 100%); 

  display:block;
  border-radius:200px;
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transform:scale(1);
}

.submit:hover:before {
  transform:scale(0.9) translateY(5px);
  filter:blur(15px);
}

.submit:active {
  line-height:460%;
  filter:brightness(0.95);
  transition:all 0s;
}

.checked .submit:before {
  top:0px;
  opacity:0;
}

.checked .submit:after {
    animation: submit-after-anim 0.5s 4.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.checked {
   -webkit-filter: url("#goo");
   filter: url("#goo");
}

.yellow {
  background-color: #ffb369;
}

.pink {
  background-color: #ff4272;
  }

.orange {
  background-color: #ff7b6e;
  transform:scale(0.2) rotate(30deg) translate(0px);
}

.checked .pink {
  animation: loader-anim-pink 4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.checked .yellow  {
  animation: loader-anim-yellow 4s 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.checked .orange {
   animation: loader-anim-orange 4s 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loader {
  width:95px;
  height:50px;
  border-radius:50%;
  opacity:0;
  z-index:1;
}

.checked .loader {
  opacity:1;
}

.checked .loader-wrapper {
  animation: wrapper-loader-anim 4.2s linear;
  width:95px;
  height:50px;
  transform:scale(0)
}

.checked .submit {
  width:50px;
  color:rgba(255,255,255,0);
  background: linear-gradient(to right, #ff7b6e 0%,#ff7b6e 100%);
  animation: submit-anim 4s  cubic-bezier(0.39, 0.575, 0.565, 1);
  }


.check-wrapper {
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
  width:95px;
  height:50px;
  z-index:-1;
  opacity:1;
}

.check-wrapper svg {
  margin-top: 10px;
  margin-left: 16px;
}

.check{fill:none;
  stroke:#ffffff;
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
 stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  z-index:-1;
  }

.checked .check-wrapper {
  z-index:3;
}

.checked .check {
  animation: check 4s 4.4s ease forwards;
}


@keyframes loader-anim-pink {
    0% {transform:scale(0.2) rotate(0deg) translate(220px, 0px); }
  100% {transform:scale(0.2) rotate(1100deg) translate(300px, 0px);}
}

@keyframes loader-anim-yellow {
     0% {transform:scale(0.2) rotate(0deg) translate(300px, 0px); }
  100% {transform:scale(0.2) rotate(1100deg) translate(220px, 0px);}
}

@keyframes loader-anim-orange {
  0%,70% {transform:scale(0.2) rotate(30deg) translate(0px); }
  85% {transform:scale(0.2) rotate(30deg) translate(-300px);}
  100% {transform:scale(0.2) rotate(30deg) translate(0px); }
}

@keyframes wrapper-loader-anim {
    0% {transform:scale(0) translateY(0px) }
    10% {transform:scale(1) translateY(20px)}
  50%, {transform:scale(1.2) translateY(10px) }
  90% {transform:scale(1) translateY(-10px)}
  100% {transform:scale(0) translateY(0px)}
}

@keyframes submit-after-anim {
  0% {transform:scale(1); opacity:0.3 }
   100% {transform:scale(2); opacity:0 }
}

@keyframes submit-anim {
    0% {transform:scale(1) }
      5%, 95% {transform:scale(0.7) }
  100% {transform:scale(1)}
}

@keyframes check {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

  /****************************************************************/
.btn.active {
    display: none;
}

.btn span:nth-of-type(1) {
    display: none;
}

.btn span:last-child {
    display: block;
}

.btn.active span:nth-of-type(1) {
    display: block;
}
/*******************************************************************/

.switch {
	position: relative;
	display: block;
	vertical-align: top;
	width: 100px;
	height: 30px;
	padding: 3px;
	margin: 0 10px 10px 0;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	box-sizing:content-box;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	box-sizing:content-box;
}
.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
	background: #eceeef;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
	box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
	box-sizing:content-box;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background: #E1B42B;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 12px;
	height: 12px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	left: 74px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
 
/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}

/***/


  .switch-flat {
	padding: 0;
	background: #FFF;
	background-image: none;
}
.switch-flat .switch-label {
	background: #FFF;
	border: solid 2px #eceeef;
	box-shadow: none;
}
.switch-flat .switch-label:after {
	color: #0088cc;
}
.switch-flat .switch-handle {
	top: 6px;
	left: 6px;
	background: #dadada;
	width: 22px;
	height: 22px;
	box-shadow: none;
}
.switch-flat .switch-handle:before {
	background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
	background: #FFF;
	border-color: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
	left: 72px;
	background: #0088cc;
	box-shadow: none;
}


.btn.active span:last-child {
    display: none;
}



/*****************below for  index page separation****************************/


.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: rgba(0, 0, 0, 0.5);
	margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: rgba(0, 0, 0, 0.35);
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 8px;
}

/*************** try sig button*************/

                                    
.sigbtn:not(:disabled):not(:disabled):active {
   background-color: green; !important;
} 

.sigbtn:focus,
.sigbtn:focus, .sigbtn:visited {
   background-color: green; !important;
} 


/***********login ************/

/**flash message**/
.error {
    color: red
}

.success {
    color: green
}

/****new home page****/

/*General Styles*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
/*	font-size: 32px;*/
	font-size: 16px;
/*	font-family: "Raleway", sans-serif;*/
        font-family: 'Poppins', sans-serif;
	color: #555;
}

ul,
nav {
	list-style: none;
}

a {
	text-decoration: none;
	opacity: 0.75;
	color: blue;
}

a:hover {
	opacity: 1;
}

a.btn {
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	background-color: #e07e7b;
	opacity: 1;
	transition: all 400ms;
}

a.btn:hover {
	background-color: #ce5856;
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100px 80px;
}

section:not(.hero):nth-child(even) {
#	background-color: #f5f5f5;
	background-color: green;
}

.grid {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

hr {
	width: 250px;
	height: 3px;
	background-color: #e07e7b;
	border: 0;
	margin-bottom: 50px;
}


section h3.title {
	text-transform: capitalize;
	font: bold 48px "Amatic SC", sans-serif;
	margin-bottom: 30px;
	text-align: center;
}

section p {
	max-width: 775px;
	line-height: 2;
	padding: 0 20px;
	margin-bottom: 30px;
	text-align: center;
}

@media (max-width: 800px) {
	section {
		padding: 50px 20px;
	}
}

/*Header Styles*/

header {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 35px 100px 0;
	animation: 1s fadein 0.5s forwards;
	opacity: 0;
	color: #fff;
	z-index: 2;
}

@keyframes fadein {
	100% {
		opacity: 1;
	}
}

header h2 {
/*	font-family: "Amatic SC", sans-serif;*/
        font-family: 'Poppins', sans-serif;
}

header nav {
	display: flex;
	margin-right: -15px;
}

header nav li {
	margin: 0 15px;
}



.navbar-toggle {
  float: left !important;
  margin-left: 15px;
}

.navbar-header.navbar-right.pull-right {
  margin-right: 15px;
}

.navbar-right > li {
  float: left;
}



@media (max-width: 800px) {
	header {
		padding: 20px 50px;
		flex-direction: column;
	}

	header h2 {
		margin-bottom: 15px;
	}
}

/*Hero Styles*/

.hero {
	position: relative;
	justify-content: center;
	text-align: center;
	min-height: 100vh;
/*	color: #fff;*/
	color: black;
}

.hero .background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("https://jlsmoving.s3.us-west-2.amazonaws.com/JLS-buildingBackground.jpeg");
	background-size: cover;
	z-index: -1;
	background-color: #80a3db;
/*        filter: grayscale(100%)*/
        filter: brightness(90%);
}

.hero h1 {
/*	font: 72px "Amatic SC", sans-serif;*/
font-family: 'Poppins', sans-serif;
font-size: 72px;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
	margin-bottom: 15px;
}

.hero h3 {
	font: 28px "Raleway", sans-serif;
	font-weight: 300;
/*	text-shadow: 2px 2px rgba(0, 0, 0, 0.3);*/
	margin-bottom: 40px;
}

.hero a.btn {
	padding: 20px 46px;
}

.hero-content-area {
	opacity: 0;
	margin-top: 100px;
	animation: 1s slidefade 1s forwards;
}


.hero-content-area h1 span {
/*	color: #00fecb; */
	color: #000000;
}


@keyframes slidefade {
	100% {
		opacity: 1;
		margin: 0;
	}
}

@media (max-width: 800px) {
	.hero {
		min-height: 600px;
	}

	.hero h1 {
		font-size: 48px;
	}

	.hero h3 {
		font-size: 24px;
	}

	.hero a.btn {
		padding: 15px 40px;
	}
}



/*Contact Section*/

.contact form {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 60%;
}

.contact form .btn {
	padding: 18px 42px;
}

.contact form input {
	padding: 15px;
	margin-right: 30px;
	font-size: 18px;
	color: #555;
	flex: 1;
}

@media (max-width: 1000px) {
	.contact form input {
		flex-basis: 100%;
		margin: 0 0 20px 0;
	}
}

/*Footer Section*/

footer {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #555;
	color: #fff;
	padding: 20px 0;
}

footer ul {
	display: flex;
}

footer ul li {
	margin-left: 16px;
}

footer p {
	text-transform: uppercase;
	font-size: 14px;
	opacity: 0.6;
	align-self: center;
}

@media (max-width: 1100px) {
	footer {
		flex-direction: column;
	}

	footer p {
		text-align: center;
		margin-bottom: 20px;
	}

	footer ul li {
		margin: 0 8px;
	}
}