/* Global Button Styles */

.button {
	display: inline-flex;
	height: 44px;
	padding: 0 30px;
	text-transform: none;
	text-decoration: none;
	font-size: .8em;
	font-weight: 500;
	letter-spacing: 1.5px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;

	@media (max-width: 800px) {
		padding: 0 20px;
		height: 40px;
	}
  }
  
  a {
	text-decoration: none;
	letter-spacing: 1px;
  }
  

  
 



  
  #button-2 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	// background-color: rgba($c-main, 0.08);
	background-color: #F0F1F6;
  }
  
  #button-2 a {
	position: relative;
	transition: all .35s ease-Out;
	color: $c-main;
  }
  
  #slide {
	width: 100%;
	height: 100%;
	left: -200px;
	background: $c-main;
	position: absolute;
	transition: all .35s ease-Out;
	bottom: 0;
  }
  
  #button-2:hover #slide {
	left: 0;
  }
  
  #button-2:hover a {
	color: $c-white;
  }
  
  
  /* Second Button */
  
  #button-3 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	// background-color: rgba($c-second, 0.08);
	background-color: #FEF4F7;

  }
  
  #button-3 a {
	position: relative;
	transition: all .45s ease-Out;
	color: $c-second;
  }
  
  #circle {
	width: 0%;
	height: 0%;
	opacity: 0;
	line-height: 40px;
	border-radius: 50%;
	background: $c-second;
	position: absolute;
	transition: all .5s ease-Out;
	top: 20px;
	left: 70px;
  }
  
  #button-3:hover #circle {
	width: 200%;
	height: 500%;
	opacity: 1;
	top: -70px;
	left: -70px;
  }
  
  #button-3:hover a {
	color: $c-white;
  }


  /* Second Button */

  #button-4 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background-color: $c-second;
  }
  
  #button-4 a {
	position: relative;
	transition: all .45s ease-Out;
	color: $c-white;
  }
  #button-4 button {
	position: relative;
	transition: all .45s ease-Out;
	border: none;
	color: $c-white;
	background: transparent;
  }
  
  #circle {
	width: 0%;
	height: 0%;
	opacity: 0;
	line-height: 40px;
	border-radius: 50%;
	background: $c-main;
	position: absolute;
	transition: all .5s ease-Out;
	top: 20px;
	left: 70px;
  }
  
  #button-4:hover #circle {
	width: 200%;
	height: 500%;
	opacity: 1;
	top: -70px;
	left: -70px;
  }
  
  #button-4:hover a {
	color: $c-white;
  }
  #button-4:hover button {
	color: $c-white;
  }
  
  
  



  .button-1 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	height: 44px;
	background-color: $c-second;
	cursor: pointer;



	 a {
		position: relative;
		transition: all .45s ease-Out;
		color: $c-white;
		font-size: 14px;
		text-transform: none;
		font-weight: 600;
		cursor: pointer;

	  }
	  
	  #circle {
		width: 0%;
		height: 0%;
		opacity: 0;
		line-height: 40px;
		border-radius: 50%;
		background: $c-main;
		position: absolute;
		transition: all .5s ease-Out;
		top: 20px;
		left: 90px;
		cursor: pointer;

	  }
	  
	  &:hover #circle {
		width: 200%;
		height: 500%;
		opacity: 1;
		top: -70px;
		left: -70px;
	  }
	  
	  &:hover a {
		color: $c-white;
	  }
  }

  .button-style-one {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	height: 56px;
	background-color: $c-second;
	cursor: pointer;
	padding: 0 44px;




	 a {
		position: relative;
		transition: all .45s ease-Out;
		color: $c-white;
		font-size: 16px;
		text-transform: none;
		font-weight: 600;
		cursor: pointer;

	  }
	  
	  #circle {
		width: 0%;
		height: 0%;
		opacity: 0;
		line-height: 40px;
		border-radius: 50%;
		background: $c-third;
		position: absolute;
		transition: all .5s ease-Out;
		top: 20px;
		left: 90px;
		cursor: pointer;

	  }
	  
	  &:hover #circle {
		width: 200%;
		height: 500%;
		opacity: 1;
		top: -70px;
		left: -70px;
	  }
	  
	  &:hover a {
		color: $c-white;
	  }
  }

  .button-2 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	height: 44px;
	background-color: #F8F8FC;
	cursor: pointer;


	 a {
		position: relative;
		transition: all .45s ease-Out;
		color: $c-second;
		font-size: 14px;
		text-transform: none;
		font-weight: 600;
		cursor: pointer;
	  }
	  
	  #circle {
		width: 0%;
		height: 0%;
		opacity: 0;
		line-height: 40px;
		border-radius: 50%;
		background: $c-main;
		position: absolute;
		transition: all .5s ease-Out;
		top: 20px;
		left: 90px;
		cursor: pointer;

	  }
	  
	  &:hover #circle {
		width: 200%;
		height: 500%;
		opacity: 1;
		top: -70px;
		left: -70px;
	  }
	  
	  &:hover a {
		color: $c-white;
	  }
  }

  .button-3 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	height: 44px;
	background-color: #F0F1F6;
	cursor: pointer;


	 a {
		position: relative;
		transition: all .45s ease-Out;
		color: $c-main;
		font-size: 14px;
		text-transform: none;
		font-weight: 600;
		cursor: pointer;
	  }
	  
	  #circle {
		width: 0%;
		height: 0%;
		opacity: 0;
		line-height: 40px;
		border-radius: 50%;
		background: $c-main;
		position: absolute;
		transition: all .5s ease-Out;
		top: 20px;
		left: 90px;
		cursor: pointer;

	  }
	  
	  &:hover #circle {
		width: 200%;
		height: 500%;
		opacity: 1;
		top: -70px;
		left: -70px;
	  }
	  
	  &:hover a {
		color: $c-white;
	  }
  }


  .button-4 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	height: 44px;
	background-color: #FEF4F7;
	cursor: pointer;


	 a {
		position: relative;
		transition: all .45s ease-Out;
		color: $c-second !important;
		font-size: 14px;
		text-transform: none;
		font-weight: 600;
	  }
	  
	  #circle {
		width: 0%;
		height: 0%;
		opacity: 0;
		line-height: 40px;
		border-radius: 50%;
		background: $c-second;
		position: absolute;
		transition: all .5s ease-Out;
		top: 20px;
		left: 90px;
		cursor: pointer;

	  }
	  
	  &:hover #circle {
		width: 200%;
		height: 500%;
		opacity: 1;
		top: -70px;
		left: -70px;

	  }
	  
	  &:hover a {
		color: $c-white  !important;

	  }
  }

  .button-04 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	height: 44px;
	background-color: rgba($c-third, .05);
	cursor: pointer;


	 a {
		position: relative;
		transition: all .45s ease-Out;
		color: $c-third !important;
		font-size: 14px;
		text-transform: none;
		font-weight: 600;
	  }
	  
	  #circle {
		width: 0%;
		height: 0%;
		opacity: 0;
		line-height: 40px;
		border-radius: 50%;
		background: $c-main;
		position: absolute;
		transition: all .5s ease-Out;
		top: 20px;
		left: 90px;
		cursor: pointer;

	  }
	  
	  &:hover #circle {
		width: 200%;
		height: 500%;
		opacity: 1;
		top: -70px;
		left: -70px;

	  }
	  
	  &:hover a {
		color: $c-white  !important;

	  }
  }


  .button-5 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	height: 44px;
	background-color: rgba($c-third, .04);
	cursor: pointer;


	 a {
		position: relative;
		transition: all .45s ease-Out;
		color: $c-third;
		font-size: 14px;
		text-transform: none;
		font-weight: 600;
	  }
	  
	  #circle {
		width: 0%;
		height: 0%;
		opacity: 0;
		line-height: 40px;
		border-radius: 50%;
		background: $c-third;
		position: absolute;
		transition: all .5s ease-Out;
		top: 20px;
		left: 90px;
		cursor: pointer;

	  }
	  
	  &:hover #circle {
		width: 200%;
		height: 500%;
		opacity: 1;
		top: -70px;
		left: -70px;

	  }
	  
	  &:hover a {
		color: $c-white;

	  }
  }



  .button-link {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	height: 44px;
	background-color: transparent;
	padding: 0 12px;
	cursor: pointer;


	 a {
		position: relative;
		transition: all .45s ease-Out;
		color: $c-main;
		font-size: 14px;
		text-transform: none;
		font-weight: 600;
	  }
	  &:hover a {
		color: $c-second;

	  }
  }