@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');
@import "style.css";

.font-primary {font-family: var(--font-primary) !important;}

.font-weight-300 {font-weight: 300 !important;}
.font-weight-400 {font-weight: 400 !important;}
.font-weight-500 {font-weight: 500 !important;}
.font-weight-600 {font-weight: 600 !important;}
.font-weight-700 {font-weight: 700 !important;}
.font-weight-800 {font-weight: 800 !important;}
.font-weight-900 {font-weight: 900 !important;}

.bg-white {background-color: var(--white);}
.bg-black {background-color: var(--black);}
.bg-primary {background-color: var(--primary);}
.bg-red {background-color: var(--red);}
.bg-light {background-color: var(--light);}

.color-white {color: var(--white);}
.color-black {color: var(--black);}
.color-primary {color: var(--primary);}
.color-red {color: var(--red);}
.color-light {color: var(--light);}

h1, .h1 {font-size: clamp(2.125rem, 1.55rem + 2.875vw, 5rem) !important; line-height: 100% !important; margin: 0 0 calc(var(--pad) * 3) 0;}
h2, .h2 {font-size: 2.5rem !important; line-height: 125% !important; margin: 0 0 calc(var(--pad) * 3) 0;}
    h3, .h3 {font-size: 2rem !important; line-height: 130% !important; margin: 0 0 calc(var(--pad) * 3) 0;}
	h4, .h4 {font-size: 1.75rem !important; line-height: 135% !important; margin: 0 0 calc(var(--pad) * 3) 0;}
    h5, .h5 {font-size: 1.5rem !important; line-height: 140% !important; margin: 0 0 calc(var(--pad) * 3) 0;}
    h6, .h6 {font-size: 1.375rem !important; line-height: 150% !important; margin: 0 0 calc(var(--pad) * 3) 0;}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child,
.h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child, .h5:last-child, .h6:last-child {margin: 0;}

a.button, .button a, button.button, input.button, span.button {display: inline-block; vertical-align: middle; position: relative;
	background: var(--secondary); color: var(--white); overflow: hidden;
	line-height: calc(var(--pad) * 8); text-align: center; font-family: var(--font-secondary); font-size: 1.25rem; font-weight: 700; white-space: nowrap;
	padding: 0 calc(var(--pad) * 4); transition: var(--transition1);
}
a.button:hover, .button a:hover, button.button:hover, input.button:hover, span.button:hover, a:hover span.button {background: var(--primary);}

.button.full-width {width: 100%;}
.button:disabled {opacity: 0.5; pointer-events: none;}

/* a.button.white,
.button.white a,
button.button.white,
input.button.white,
span.button.white {background: var(--white); color: var(--primary);}

a.button.bordered,
.button.bordered a,
button.button.bordered,
input.button.bordered,
span.button.bordered {background: none; color: var(--primary);}

a.button.bordered:hover,
.button.bordered a:hover,
button.button.bordered:hover,
input.button.bordered:hover,
span.button.bordered:hover,
a:hover span.button.bordered {color: var(--white);}

.button-back {display: inline-block; vertical-align: middle; font-size: 1.25rem; font-weight: 500; white-space: nowrap; color: var(--primary); position: relative; padding: 0 0 0 calc(var(--pad) * 5.25);}
.button-back span {
    background-image: linear-gradient(var(--red), var(--red));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}
.button-back:hover {padding: 0 0 0 calc(var(--pad) * 6);}
.button-back:hover span {
	background-size: 100% 2px;
}
.button-back:before {content: " "; display: block; width: calc(var(--pad) * 4); aspect-ratio: 1; background: url(images/arrow-2.svg) no-repeat 0 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} */