.base-button {
	display:flex;
	cursor:pointer;
	align-items:center;
	justify-content:center;
	border-radius:999px;
	border-width:1px;
	padding-top:12px;
	padding-bottom:12px;
	font-size:.6875rem;
	font-weight:400;
	text-transform:uppercase;
	line-height:1.2;
	letter-spacing:.1em;
	transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
	transition-timing-function:cubic-bezier(.4,0,.2,1);
	transition-duration:.3s;
	min-width: 120px;
	max-width: 200px;

}
.base-button:focus {
	outline-style:solid;
	outline-width:2px;
	outline-offset:4px
}
@media (min-width: 768px) {
  .base-button {
	height:48px;
	font-size:.875rem
  }
}
.base-button__blue {
	border-color:rgb(3 58 126);
	background-color:rgb(3 58 126);
	padding-left:24px;
	padding-right:24px;
	text-align:center;

	color:rgb(255 255 255);
}
.base-button__blue:hover {
	border-color:rgb(0 120 230);
	background-color:rgb(0 120 230);
	color:#fff;
}
.base-button__blue:focus {
	background-color:rgb(0 120 230);
	outline-color:#0078e6
}
.base-button__grey {
	border-color:rgb(238 247 239);
	background-color:rgb(238 247 239);
	padding-left:24px;
	padding-right:24px;
	text-align:center;

	color:rgb(28 28 28)
}
.base-button__grey:hover {
	background-color:rgb(225 244 227)
}
.base-button__grey:focus {
	background-color:rgb(225 244 227);
	outline-color:#e1f4e3
}
.base-button__white {
	border-color:rgb(255 255 255);
	background-color:rgb(255 255 255);
	padding-left:24px;
	padding-right:24px;
	text-align:center;
	color:rgb(3 58 126)
}
.base-button__white:hover {
	border-color:rgb(0 120 230);
	background-color:rgb(0 120 230);
	color:rgb(255 255 255)
}
.base-button__white:focus {
	background-color:rgb(0 120 230);
	color:rgb(255 255 255);
	outline-color:#0078e6
}
.base-button__blur {
	border-color:rgb(255 255 255);
	background-color:transparent;
	padding-left:24px;
	padding-right:24px;
	text-align:center;
	color:rgb(255 255 255);
	backdrop-filter:blur(16px);
}
.base-button__blur:hover {
	background-color:#fff3
}
.base-button__blur:focus {
	background-color:#fff3;
	outline-color:#fff
}
.base-button__light-blue {
  border-color:rgb(150 230 240);
  background-color:rgb(150 230 240);
  padding-left:24px;
  padding-right:24px;
  text-align:center;

  color:rgb(3 58 126)
}
.base-button__light-blue:hover {
  border-color:rgb(94 216 232);
  background-color:rgb(94 216 232)
}
.base-button__light-blue:focus {
  
  background-color:rgb(94 216 232);
  outline-color:#5ed8e8
}
.base-button__light-blue.secondary {
  background-color:transparent;

  color:rgb(150 230 240)
}
.base-button__light-blue.secondary:hover {
  background-color:#5ed8e81a
}
.base-button__light-green {
  border-color:rgb(170 254 140);
  background-color:rgb(170 254 140);
  padding-left:24px;
  padding-right:24px;
  text-align:center;
  color:rgb(3 58 126)
}
.base-button__light-green:hover {
  border-color:rgb(106 253 53);
  background-color:rgb(106 253 53)
}
.base-button__light-green:focus {
  background-color:rgb(106 253 53);
  outline-color:#6afd35
}
.base-button__light-green.secondary {
  background-color:transparent;
  color:rgb(170 254 140)
}
.base-button__light-green.secondary:hover {
  background-color:#6afd351a
}
.base-button__pink {
  border-color:rgb(245 190 235);
  background-color:rgb(245 190 235);
  padding-left:24px;
  padding-right:24px;
  text-align:center;

  color:rgb(3 58 126)
}
.base-button__pink:hover {
  border-color:rgb(241 167 227);
  background-color:rgb(241 167 227)
}
.base-button__pink:focus {
  background-color:rgb(241 167 227);
  outline-color:#f1a7e3
}
.base-button__pink.secondary {
  background-color:transparent;
  color:rgb(245 190 235)
}
.base-button__pink.secondary:hover {
  background-color:#f1a7e31a
}
.base-button__yellow {
  border-color:rgb(255 240 130);
  background-color:rgb(255 240 130);
  padding-left:24px;
  padding-right:24px;
  text-align:center;
  color:rgb(3 58 126)
}
.base-button__yellow:hover {
  border-color:rgb(255 234 71);
  background-color:rgb(255 234 71)
}
.base-button__yellow:focus {
  background-color:rgb(255 234 71);
  outline-color:#ffea47
}
.base-button__yellow.secondary {
  background-color:transparent;
  color:rgb(255 240 130)
}
.base-button__yellow.secondary:hover {
  background-color:#ffea471a
}
.base-button__sand {
  border-color:rgb(210 210 160);
  background-color:rgb(210 210 160);
  padding-left:24px;
  padding-right:24px;
  text-align:center;
  color:rgb(3 58 126)
}
.base-button__sand:hover {
  border-color:rgb(203 203 144);
  background-color:rgb(203 203 144)
}
.base-button__sand:focus {
  background-color:rgb(203 203 144);
  outline-color:#cbcb90
}
.base-button__sand.secondary {
  background-color:transparent;

  color:rgb(210 210 160)
}
.base-button__sand.secondary:hover {
  background-color:#cbcb901a
}
.base-button__caramel {
  border-color:rgb(182 175 157);
  background-color:rgb(182 175 157);
  padding-left:24px;
  padding-right:24px;
  text-align:center;

  color:rgb(3 58 126)
}
.base-button__caramel:hover {

  border-color:rgb(168 160 138);
  
  background-color:rgb(168 160 138)
}
.base-button__caramel:focus {
  
  background-color:rgb(168 160 138);
  outline-color:#a8a08a
}
.base-button__caramel.secondary {
  background-color:transparent;

  color:rgb(182 175 157)
}
.base-button__caramel.secondary:hover {
  background-color:#a8a08a1a
}
.base-button__textChevronRight {
  height:auto;
  justify-content:flex-start;
  border-color:transparent;
  padding-top:0;
  padding-bottom:0;

  color:rgb(3 58 126)
}
.base-button__textChevronRight:hover {

  color:rgb(0 120 230)
}
.base-button__textChevronRight:focus {

  color:rgb(0 120 230);
  outline-offset:10px
}
@media (min-width: 768px) {
  .base-button__textChevronRight:focus {
    outline-offset:16px
  }
}