:root {
	/* hex */
  --forest900: #132c29;
  --forest800: #1c3937;
  --forest600: #2e5050;
  --green800: #3a4c1a;
  --green600: #445b20;
  --green200: #c8d3a9;
  --green100: #EFF5EA;
  --tan400: #d5dcb3;
  --tan100: #efefe4;
  --tan50: #f5f9f2;
  --yellow150: #cece41;
  --yellow100: #ecef67;
  --gray900: #1a1a1a;
  --gray600: #4e514a;
  --white: #ffffff;
  --black: #000000;
  
  /*rgba*/
  --forest900-trans: rgba(19, 44, 41, 0.88);
  --forest800-trans: rgba(28, 57, 55, 0.88);
  --forest600-trans: rgba(46, 80, 81, 0.88);
  --green800-trans: rgba(58, 76, 26, 0.88);
  --green600-trans: rgba(67, 91, 31, 0.88);
  --green200-trans: rgba(200, 211, 169, 0.88);
  --green100-trans: rgba(239, 245, 235, 0.88);
  --tan400-trans: rgba(214, 221, 190, 0.88);
  --tan100-trans: rgba(239, 239, 229, 0.88);
  --tan50-trans: rgba(246, 249, 242, 0.88);
  --yellow150-trans: rgba(207, 206, 66, 0.88);
  --yellow100-trans: rgba(237, 239, 104, 0.88);
  --gray900-trans: rgba(26, 26, 26, 0.88);
  --gray600-trans: rgba(78, 81, 74, 0.88);
  --white-trans: rgba(255, 255, 255, 0.88);
  --black-trans: rgba(0, 0, 0, 0.88);
}

/*BUTTONS*/
.btn {
	position: relative;
	text-align:center;
    
    justify-content:center;
    align-items:center;
	
	font-size: .8rem;
    padding: .7em 2.25em;
    letter-spacing: -.01em;
	
	border-radius: 3rem;
	/* transition: background .2s ease-in-out, border .2s ease-in-out, box-shadow .3s ease-in-out, color .3s ease-in-out; */
	transition: border .2s ease-in-out, box-shadow .3s ease-in-out, color .3s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
	
	background: transparent;
	border: none;
	
	background-clip: padding-box;
}
.btn.text-tiny,
.btn-p-container.text-tiny .btn {
    font-size: .7rem;	
}
 
@media (max-width: 840px) {
	.btn.d-sm-block {
		width: 100%;
		max-width: 450px;
	}
}

.btn--flex {
	display:flex;
}
.btn--wide {
    width:100%
}
.btn--tight {
    padding-right:1em;
    padding-left:1em
}
.btn--inline {
    display:inline-flex;
    margin-right:.5em;
    margin-bottom:.5em;
    vertical-align:top
}
.btn:hover {
	text-decoration: none;
	background-clip: content-box;
}

/*YELLOW Buttons */
.btn-a1 {
	background: var(--gray900);
	border-color: var(--yellow100);
	color: var(--gray900);
	box-shadow: inset -450px 0 0 0 var(--yellow100);
}
.btn-a1:focus,
.btn-a1:hover,
.btn-a1:active,
.btn-a1.active {
	background: var(--gray900);
	border-color: var(--gray900);
	color: var(--white);
	box-shadow: inset 0px 0 0 0 var(--yellow100);
}
.btn-outline.btn-a1 {
	color: var(--gray900);
	box-shadow: inset 0px 0 0 1px var(--yellow100);
}
.btn-outline.btn-a1:focus,
.btn-outline.btn-a1:hover,
.btn-outline.btn-a1:active,
.btn-outline.btn-a1.active {
	background: transparent;
    border-color: var(--yellow100);
    color: var(--gray900);
    box-shadow: inset -450px 0px 0px 0px var(--yellow100);
}

/*WHITE Buttons */
.btn-b1 {
	background: var(--black);
	border-color: var(--white);
	color: var(--black);
	box-shadow: inset -450px 0 0 0 var(--white);
}
.btn-b1:focus,
.btn-b1:hover,
.btn-b1:active,
.btn-b1.active {
	background: var(--black);
	border-color: var(--black);
	color: var(--white);
	box-shadow: inset 0px 0 0 0 var(--white);
}
.btn-outline.btn-b1 {
	color: var(--black);
	box-shadow: inset 0px 0 0 1px var(--white);
}
.btn-outline.btn-b1:focus,
.btn-outline.btn-b1:hover,
.btn-outline.btn-b1:active,
.btn-outline.btn-b1.active {
	background: transparent;
    border-color: var(--black);
    color: var(--white);
    box-shadow: inset -450px 0px 0px 0px var(--black);
}

/*BLACK Buttons */
.btn-c1 {
	background: var(--white);
	border-color: var(--black);
	color: var(--white);
	box-shadow: inset -450px 0 0 0 var(--black);
}
.btn-c1:focus,
.btn-c1:hover,
.btn-c1:active,
.btn-c1.active {
	background: var(--white);
	border-color: var(--black);
	color: var(--black);  
	box-shadow: inset 0px 0 0 0 var(--black);
}
.btn-outline.btn-c1 {
	color: var(--white);
	box-shadow: inset 0px 0 0 1px var(--white);
}
.btn-outline.btn-c1:focus,
.btn-outline.btn-c1:hover,
.btn-outline.btn-c1:active,
.btn-outline.btn-c1.active {
	background: transparent;
    border-color: var(--white);
    color: var(--white);
    box-shadow: inset -450px 0px 0px 0px var(--white);
}

/*FOREST Buttons */
.btn-d1 {
	background: var(--forest800);
	border-color: var(--forest600);
	color: var(--white);
	box-shadow: inset -450px 0 0 0 var(--forest600);
}
.btn-d1:focus,
.btn-d1:hover,
.btn-d1:active,
.btn-d1.active {
	background: var(--forest800);
	border-color: var(--forest800);
	color: var(--white);
	box-shadow: inset 0px 0 0 0 var(--forest600);
}
.btn-outline.btn-d1 {
	color: var(--forest800);
	box-shadow: inset 0px 0 0 1px var(--forest600);
}
.btn-outline.btn-d1:focus,
.btn-outline.btn-d1:hover,
.btn-outline.btn-d1:active,
.btn-outline.btn-d1.active {
	background: var(--forest600);
    border-color: var(--forest600);
    color: var(--white);
    box-shadow: inset -450px 0px 0px 0px var(--forest600);
}

/*E1 Buttons */
.btn-e1 {
	background: var(--tan400);
	border-color: var(--tan100);
	color: var(--gray900);
	box-shadow: inset -450px 0 0 0 var(--tan100);
}
.btn-e1:focus,
.btn-e1:hover,
.btn-e1:active,
.btn-e1.active {
	background: var(--tan400);
	border-color: var(--tan400);
	color: var(--black);
	box-shadow: inset 0px 0 0 0 var(--tan100);
}
.btn-outline.btn-e1 {
	color: var(--gray900);
	box-shadow: inset 0px 0 0 1px var(--tan100);
}
.btn-outline.btn-e1:focus,
.btn-outline.btn-e1:hover,
.btn-outline.btn-e1:active,
.btn-outline.btn-e1.active {
	background: transparent;
    border-color: var(--tan100);
    color: var(--gray900);
    box-shadow: inset -450px 0px 0px 0px var(--tan100);
}

/*F1 Buttons */
.btn-f1 {
	background: var(--pink500);
	border-color: var(--pink200);
	color: var(--white);
	box-shadow: inset -450px 0 0 0 var(--pink200);
}
.btn-f1:focus,
.btn-f1:hover,
.btn-f1:active,
.btn-f1.active {
	background: var(--pink500);
	border-color: var(--pink500);
	color: var(--white);
	box-shadow: inset 0px 0 0 0 var(--pink200);
}
.btn-outline.btn-f1 {
	color: var(--gray800);
	box-shadow: inset 0px 0 0 1px var(--pink200);
}
.btn-outline.btn-f1:focus,
.btn-outline.btn-f1:hover,
.btn-outline.btn-f1:active,
.btn-outline.btn-f1.active {
	background: transparent;
    border-color: var(--pink200);
    color: var(--white);
    box-shadow: inset -450px 0px 0px 0px var(--pink200);
}


/* c1-outline button style */
.btn-white-outline {
	background: transparent;
	border: 1px solid var(--white);
	color: var(--white);
	/* box-shadow: inset -300px 0 0 0 var(--white); */
}
.btn-white-outline:focus,
.btn-white-outline:hover,
.btn-white-outline:active,
.btn-white-outline.active {
	background: var(--blue200);
	border-color: var(--blue200);
	color: var(--blue900);
	box-shadow: inset 0px 0 0 0 var(--white);
}

.btn-outline {
	border-width: 1px;
	border-style: solid;
	background: transparent;
}

/*BACKGROUND*/
.bg-forest900 {
	background-color: var(--forest900);
}
.bg-forest800 {
	background-color: var(--forest800);
}
.bg-forest600 {
	background-color: var(--forest600);
}
.bg-green800 {
	background-color: var(--green800);
}
.bg-green600 {
	background-color: var(--green600);
}
.bg-green200 {
	background-color: var(--green200);
}
.bg-green100 {
	background-color: var(--green100);
}
.bg-tan400 {
	background-color: var(--tan400);
}
.bg-tan100 {
	background-color: var(--tan100);
}
.bg-tan50 {
	background-color: var(--tan50);
}
.bg-yellow150 {
	background-color: var(--yellow150);
}
.bg-yellow100 {
	background-color: var(--yellow100);
}
.bg-gray900 {
	background-color: var(--gray900);
}
.bg-gray600 {
	background-color: var(--gray600);
}
.bg-black {
	background-color: var(--black);
}
.bg-white {
	background-color: var(--white);
}

/*TEXT*/
.text-forest900,
.btn.text-forest900 {
	color: var(--forest900);
}
.text-forest800,
.btn.text-forest800 {
	color: var(--forest800);
}
.text-forest600,
.btn.text-forest600 {
	color: var(--forest600);
}
.text-green800,
.btn.text-green800 {
	color: var(--green800);
}
.text-green600,
.btn.text-green600 {
	color: var(--green600);
}
.text-green200,
.btn.text-green200 {
	color: var(--green200);
}
.text-green100,
.btn.text-green100 {
	color: var(--green100);
}
.text-tan400,
.btn.text-tan400 {
	color: var(--tan400);
}
.text-tan100,
.btn.text-tan100 {
	color: var(--tan100);
}
.text-tan50,
.btn.text-tan50 {
	color: var(--tan50);
}
.text-yellow150,
.btn.text-yellow150 {
	color: var(--yellow150);
}
.text-yellow100,
.btn.text-yellow100 {
	color: var(--yellow100);
}
.text-gray900,
.btn.text-blue900 {
	color: var(--gray900);
}
.text-gray600,
.btn.text-gray600 {
	color: var(--gray600);
}
.text-black,
.btn.text-black {
	color: var(--black);
}
.text-white,
.btn.text-white {
	color: var(--white);
}

/*BACKGROUND*/
.bg-forest900-trans {
	background-color: var(--forest900-trans);
}
.bg-forest800-trans {
	background-color: var(--forest800-trans);
}
.bg-forest600-trans {
	background-color: var(--forest600-trans);
}
.bg-green800-trans {
	background-color: var(--green800-trans);
}
.bg-green600-trans {
	background-color: var(--green600-trans);
}
.bg-green200-trans {
	background-color: var(--green200-trans);
}
.bg-green100-trans {
	background-color: var(--green100-trans);
}
.bg-tan400-trans {
	background-color: var(--tan400-trans);
}
.bg-tan100-trans {
	background-color: var(--tan100-trans);
}
.bg-tan50-trans {
	background-color: var(--tan50-trans);
}
.bg-yellow150-trans {
	background-color: var(--yellow150-trans);
}
.bg-yellow100-trans {
	background-color: var(--yellow100-trans);
}
.bg-gray900-trans {
	background-color: var(--gray900-trans);
}
.bg-gray600-trans {
	background-color: var(--gray600-trans);
}
.bg-white-trans {
	background-color: var(--white-trans);
}
.bg-black-trans {
	background-color: var(--black-trans);
}

/*BORDERS */
.border-forest900 {
	border-color:var(--forest900);
}
.border-forest800 {
	border-color:var(--forest800);
}
.border-forest600 {
	border-color:var(--forest600);
}
.border-green800 {
	border-color:var(--green800);
}
.border-green600 {
	border-color:var(--green600);
}
.border-green200 {
	border-color:var(--green200);
}
.border-green100 {
	border-color:var(--green100);
}
.border-tan400 {
	border-color:var(--tan400);
}
.border-tan100 {
	border-color:var(--tan100);
}
.border-tan50 {
	border-color:var(--tan50);
}
.border-yellow150 {
	border-color:var(--yellow150);
}
.border-yellow100 {
	border-color:var(--yellow100);
}
.border-gray900 {
	border-color:var(--gray900);
}
.border-gray600 {
	border-color:var(--gray600);
}
.border-white {
	border-color:var(--white);
}
.border-black {
	border-color:var(--black);
}