html {
  scroll-behavior: smooth;
}
body::-webkit-scrollbar {
  display: none;
  scroll-behavior: smooth;
}
/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

* {
	box-sizing: border-box;
}

  .bg-ghostWhite {
	background-color: ghostWhite;
  }
  .bg-white {
	background-color: white;
  }
  .bg-black {
	background-color: black;
  }
  .bg-bisque {
	background-color: bisque;  
  }
  .bg-beige {
	background-color: beige;
  }
  .bg-yellow {
	background-color: #ffff57;
  }
  .bg-red {
	background-color: red;
  }
  .bg-snow {
	background-color: snow;
  }
	

		

	
	
	.center {
		margin: auto;
	}
	.text-center {
		text-align: center;
	}
	.text-left {
		text-align: left;
	}
	.text-right {
		text-align: right;
	}
	
	
	
	.v-base {
		vertical-align: baseline;	
	}

	.v-top  {
		vertical-align: text-top;
	}

	.v-bottom  {
		vertical-align: text-bottom;
	}

	.v-sub {
		vertical-align: sub;
	}

	.v-super {
		vertical-align: super;
	}
	
	.float-l {
		float: left;
	}
	.float-r {
		float: right;
	}
	
	.flex-container {
		display: flex;
	}
	.flex-row {
		display: flex;
		flex-direction: row;
	}
	.flex-column {
		display: flex;
		flex-direction: column;
	}
	.flex-nowrap {
		display: flex;
		flex-wrap: nowrap;
	}
	.flex-wrap {
		display: flex;
		flex-wrap: wrap;
	}
	.flex-15 {
		flex: 15%;
	}
	.flex-20 {
		flex: 20%;
	}
	.flex-25 {
		flex: 25%;
	}
	.flex-30 {
		flex: 30%;
	}
	.flex-50 {
		flex: 50%;
	}
	.flex-60 {
		flex: 60%;
	}
	.flex-70 {
		flex: 50%;
	}
	.flex-75 {
		flex: 75%;
	}
	.flex-80 {
		flex: 80%;
	}

	.p-1px {
		padding: 1px;
	}
	.p-2px {
		padding: 2px;
	}
	.p-5px {
		padding: 5px;
	}
	.p-10px {
		padding: 10px;
	}
	.p-15px {
		padding: 15px;
	}
	.pt-1px {
		padding-top: 1px;
	}
	.pt-2px {
		padding-top: 2px;
	}
	.pt-5px {
		padding-top: 5px;
	}
	.pt-10px {
		padding-top: 10px;
	}
	.pt-15px {
		padding-top: 15px;
	}
	.pb-1px {
		padding-bottom: 1px;
	}
	.pb-2px {
		padding-bottom: 2px;
	}
	.pb-5px {
		padding-bottom: 5px;
	}
	.pb-10px {
		padding-bottom: 10px;
	}
	.pb-15px {
		padding-bottom: 15px;
	}
	.pl-1px {
		padding-left: 1px;
	}
	.pl-2px {
		padding-left: 2px;
	}
	.pl-5px {
		padding-left: 5px;
	}
	.pl-10px {
		padding-left: 10px;
	}
	.pl-15px {
		padding-left: 15px;
	}
	.pr-1px {
		padding-right: 1px;
	}
	.pr-2px {
		padding-right: 2px;
	}
	.pr-5px {
		padding-right: 5px;
	}
	.pr-10px {
		padding-right: 10px;
	}
	.pr-15px {
		padding-right: 15px;
	}
	
	
	.w-20px {
		width: 20px;
	}
	.w-30px {
		width: 30px;
	}
	.w-40px {
		width: 40px;
	}
	.w-50px {
		width: 50px;
	}
	.w-60px {
		width: 60px;
	}
	.w-80px {
		width: 80px;
	}
	.w-120px {
		width: 120px;
	}
	.w-150px {
		width: 150px;
	}
	.w-180px {
		width: 180px;
	}
	.w-240px {
		width: 240px;
	}
	
	.w-10 {
		width: 10%;;
	}
	.w-20 {
		width: 20%;;
	}
	.w-25 {
		width: 25%;;
	}
	.w-40 {
		width: 40%;
	}
	.w-50 {
		width: 50%;
	}
	.w-60 {
		width: 60%;
	}
	.w-70 {
		width: 70%;
	}
	.w-75 {
		width: 75%;
	}
	.w-80 {
		width: 80%;
	}
	.w-90 {
		width: 90%;
	}
	.w-100 {
		width: 100%;
	}
	
	.h-40px {
		height: 40px;
	}
	.h-50px {
		height: 50px;
	}
	.h-60px {
		height: 60px;
	}
	.h-80px {
		height: 80px;
	}
	.h-40 {
		height: 40%;
	}
	.h-50 {
		height: 50%;
	}
	.h-80 {
		height: 80%;
	}
	.h-100 {
		height: 100%;
	}
	
	
	
	/* Hide scrollbar for Chrome, Safari and Opera */
	.example::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	.example {
	  -ms-overflow-style: none;  /* IE and Edge */
	  scrollbar-width: none;  /* Firefox */
	}