/* Universal Box-Sizing Reset */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Remove default spacing */
html,
body {
margin: 0;
padding: 0;
font-size: 100%;
font-family: "Roboto", Arial, sans-serif;
color: #222;
overflow-x: hidden; /* Helps avoid 100vw overflow issues */
}

html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

/* ===============================
   IMAGES
   =============================== */

/* Make images always responsive */
img {
max-width: 100%;
height: auto;
display: block;
}

/* fills container completely, cropping if needed */
img.object-cover {
width: 100%;
height: 100%;
object-fit: cover;
}

/* fits the entire image inside the container, preserving aspect ratio, might leave gaps. */
img.object-contain {
width: 100%;
height: 100%;
object-fit: contain;
}

/* ===============================
    CONTAINERS
   =============================== */

.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
.container-wide {
margin-right: auto;
margin-left: auto;
padding-right: -15px;
padding-left: -15px;
width: 100%;
}
/* FULL BLEED CONTAINER */
.container-fluid {
margin: auto;
padding: 0;
max-width: 100rem;
width: 100%;
}

@media (min-width: 576px) {
.container {
max-width: 800px;
}
} /* SM */
@media (min-width: 768px) {
.container {
max-width: 1200px;
}
} /* MD */
@media (min-width: 1200px) {
.container {
max-width: 1500px;
}
} /* LG */
@media (min-width: 1600px) {
.container {
max-width: 2000px;
}
} /* XL */

/* Fixed-width containers */
.container-SM {
max-width: 800px;
margin-inline: auto;
padding-inline: 1rem;
}
.container-MD {
max-width: 1200px;
margin-inline: auto;
padding-inline: 1rem;
}
.container-LG {
max-width: 1500px;
margin-inline: auto;
padding-inline: 1rem;
}
.container-XL {
max-width: 2000px;
margin-inline: auto;
padding-inline: 1rem;
}

.row {
display: grid;
grid-template-columns: repeat(12, 8.333333%);
margin-right: -15px;
margin-left: -15px;
}

/* ===============================
   6. GRID AUTO-COLS (AUTO SIZING)
   =============================== */
/* AUTO COLUMNS AND ROWS */
.row-auto-cols {
display: grid;
grid-template-columns: auto auto auto;
gap: 1rem;
}

.row-auto-center {
display: grid;
grid-template-columns: auto auto;
justify-content: center;
gap: 1rem;
}
.row-center-grid {
display: grid;
grid-template-columns: auto;
justify-content: center;
}

.row-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}

/* ===============================
        GRID COLUMNS
   =============================== */

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
grid-column: span 12;
}
/* for Phones and smaller mobile devices */
.col-1 {
grid-column: span 1;
}
.col-2 {
grid-column: span 2;
}
.col-3 {
grid-column: span 3;
}
.col-4 {
grid-column: span 4;
}
.col-5 {
grid-column: span 5;
}
.col-6 {
grid-column: span 6;
}
.col-7 {
grid-column: span 7;
}
.col-8 {
grid-column: span 8;
}
.col-9 {
grid-column: span 9;
}
.col-10 {
grid-column: span 10;
}
.col-11 {
grid-column: span 11;
}
.col-12 {
grid-column: span 12;
}

/* For most regular size Tablets  */
@media (min-width: 576px) {
.col-sm-1 {
grid-column: span 1;
}
.col-sm-2 {
grid-column: span 2;
}
.col-sm-3 {
grid-column: span 3;
}
.col-sm-4 {
grid-column: span 4;
}
.col-sm-5 {
grid-column: span 5;
}
.col-sm-6 {
grid-column: span 6;
}
.col-sm-7 {
grid-column: span 7;
}
.col-sm-8 {
grid-column: span 8;
}
.col-sm-9 {
grid-column: span 9;
}
.col-sm-10 {
grid-column: span 10;
}
.col-sm-11 {
grid-column: span 11;
}
.col-sm-12 {
grid-column: span 12;
}
.container {
max-width: 540px;
}
}
/* For larger tables like ipad pro and small laptops  */
@media (min-width: 768px) {
.col-md-1 {
grid-column: span 1;
}
.col-md-2 {
grid-column: span 2;
}
.col-md-3 {
grid-column: span 3;
}
.col-md-4 {
grid-column: span 4;
}
.col-md-5 {
grid-column: span 5;
}
.col-md-6 {
grid-column: span 6;
}
.col-md-7 {
grid-column: span 7;
}
.col-md-8 {
grid-column: span 8;
}
.col-md-9 {
grid-column: span 9;
}
.col-md-10 {
grid-column: span 10;
}
.col-md-11 {
grid-column: span 11;
}
.col-md-12 {
grid-column: span 12;
}
.container {
max-width: 720px;
}
}
/* For laptops */
@media (min-width: 992px) {
.col-lg-1 {
grid-column: span 1;
}
.col-lg-2 {
grid-column: span 2;
}
.col-lg-3 {
grid-column: span 3;
}
.col-lg-4 {
grid-column: span 4;
}
.col-lg-5 {
grid-column: span 5;
}
.col-lg-6 {
grid-column: span 6;
}
.col-lg-7 {
grid-column: span 7;
}
.col-lg-8 {
grid-column: span 8;
}
.col-lg-9 {
grid-column: span 9;
}
.col-lg-10 {
grid-column: span 10;
}
.col-lg-11 {
grid-column: span 11;
}
.col-lg-12 {
grid-column: span 12;
}
.container {
max-width: 960px;
}
}
/* For Desktops and wide screens */
@media (min-width: 1200px) {
.col-xl-1 {
grid-column: span 1;
}
.col-xl-2 {
grid-column: span 2;
}
.col-xl-3 {
grid-column: span 3;
}
.col-xl-4 {
grid-column: span 4;
}
.col-xl-5 {
grid-column: span 5;
}
.col-xl-6 {
grid-column: span 6;
}
.col-xl-7 {
grid-column: span 7;
}
.col-xl-8 {
grid-column: span 8;
}
.col-xl-9 {
grid-column: span 9;
}
.col-xl-10 {
grid-column: span 10;
}
.col-xl-11 {
grid-column: span 11;
}
.col-xl-12 {
grid-column: span 12;
}
.container {
max-width: 1140px;
}
}
/* Generic column styles */
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
/* background-color: whitesmoke; */
}

/* Generic row style */
.row {
margin-bottom: 1rem;
}


/* ===============================
           RESPONSIVE FONTS
   =============================== */

:root {
--font-sm: clamp(0.875rem, 0.85rem + 0.25vw, 1rem);
--font-md: clamp(1rem, 2.5vw, 1.2rem);
--font-lg: clamp(1.25rem, 3vw, 2rem);
--font-xl: clamp(1.5rem, 4vw, 2.5rem);
--font-xxl: clamp(2.5rem, 6vw, 3.5rem);
}

body {
font-size: var(--font-md);
font-family: sans-serif;
}
h1 {
font-size: var(--font-xxl);
}
h2 {
font-size: var(--font-xl);
}
h3 {
font-size: var(--font-lg);
}
h4 {
font-size: var(--font-md);
}
p,
li {
font-size: var(--font-md);
}

/* ===============================
    TYPOGRAPHY UTILITIES
   =============================== */
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.lead {
font-size: 1.25rem;
font-weight: 300;
}
.uppercase {
text-transform: uppercase;
}
.smallFont {
font-size: 10px;
}
.skinnyText {
word-spacing: -2px;
}
.underline {
text-decoration: underline;
}
.no-underline {
text-decoration: none;
}
.no-underline:hover {
text-decoration: none;
}
.no-bullets {
padding-left: 0;
list-style: none;
line-height: 1.5;
}
ul {
list-style-position: inside;
list-style-type: square;
}
.shadow {
box-shadow: 0 0.5rem 1rem rgba(9, 9, 9, 0.845);
}
a:hover,
button:hover {
cursor: pointer;
}

figcaption {
font-size: calc(12px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
/* line-height: 1.2; */
padding-top: 5px;
}

/* ===============================
    ALIGNMENT UTILITIES
   =============================== */
/* Text alignment */
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.clear-float {
float: clear;
}

/* Vertical alignment (for grid rows) */
.align-start {
align-items: start;
}
.align-center {
align-items: center;
}
.align-end {
align-items: end;
}
.align-stretch {
align-items: stretch;
}

/* Horizontal alignment of items - applies to grid children*/
.justify-items-start {
justify-items: start;
}
.justify-items-center {
justify-items: center;
} /* center the content inside each grid item */
.justify-items-end {
justify-items: end;
}
.justify-items-stretch {
justify-items: stretch;
}

/* Justify spacing between columns -applies to grid container*/
.justify-start {
justify-content: start;
}
.justify-center {
justify-content: center;
} /* center the entire group of items */
.justify-end {
justify-content: end;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}

/* ===============================
           SPACING UTILITIES
   =============================== */
:root {
--sp-0: 0;
--sp-1: 1rem;
--sp-2: 2rem;
--sp-3: 3rem;
--sp-4: 4rem;
--sp-5: 5rem;
}
/* Padding */
.p-0 {
padding: var(--sp-0);
}
.p-1 {
padding: var(--sp-1);
}
.p-2 {
padding: var(--sp-2);
}
.p-3 {
padding: var(--sp-3);
}
.p-4 {
padding: var(--sp-4);
}
.p-5 {
padding: var(--sp-5);
}

.pt-1 {
padding-top: var(--sp-1);
}
.pt-2 {
padding-top: var(--sp-2);
}
.pt-3 {
padding-top: var(--sp-3);
}
.pt-4 {
padding-top: var(--sp-4);
}

.pb-1 {
padding-bottom: var(--sp-1);
}
.pb-2 {
padding-bottom: var(--sp-2);
}
.pb-3 {
padding-bottom: var(--sp-3);
}
.pb-4 {
padding-bottom: var(--sp-4);
}

.pl-1 {
padding-left: var(--sp-1);
}
.pl-2 {
padding-left: var(--sp-2);
}
.pl-3 {
padding-left: var(--sp-3);
}
.pl-4 {
padding-left: var(--sp-4);
}
.pr-1 {
padding-right: var(--sp-1);
}
.pr-2 {
padding-right: var(--sp-2);
}
.pr-3 {
padding-right: var(--sp-3);
}

.px-1 {
padding: 0 1rem;
}
.px-2 {
padding: 0 2rem;
}
.px-3 {
padding: 0 3rem;
}

/* Margin */
.m-0 {
margin: var(--sp-0);
}
.m-1 {
margin: var(--sp-1);
}
.m-2 {
margin: var(--sp-2);
}
.m-3 {
margin: var(--sp-3);
}
.m-4 {
margin: var(--sp-4);
}
.m-5 {
margin: var(--sp-5);
}

.mt-1 {
margin-top: var(--sp-1);
}
.mt-2 {
margin-top: var(--sp-2);
}
.mt-3 {
margin-top: var(--sp-3);
}
.mt-4 {
margin-top: var(--sp-4);
}

.mb-1 {
margin-bottom: var(--sp-1);
}
.mb-2 {
margin-bottom: var(--sp-2);
}
.mb-3 {
margin-bottom: var(--sp-3);
}
.mb-4 {
margin-bottom: var(--sp-4);
}

.ml-1 {
margin-left: var(--sp-1);
}
.ml-2 {
margin-left: var(--sp-2);
}
.ml-3 {
margin-left: var(--sp-3);
}
.ml-4 {
margin-left: var(--sp-4);
}

.mr-1 {
margin-right: var(--sp-1);
}
.mr-2 {
margin-right: var(--sp-2);
}

.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-auto {
margin-top: auto;
margin-bottom: auto;
}

/* ===============================
        MAX WIDTH CONSTRAINTS
   =============================== */

/* CONSTRAIN WIDTH OF ELEMENTS */
.max400 {
max-width: 400px;
}
.max600 {
max-width: 600px;
}
.max800 {
max-width: 800px;
}
.max1000 {
max-width: 1000px;
}

/* Constrain number of characters */
.max40ch {
max-width: 40ch;
}
.max50ch {
max-width: 50ch;
}
.max60ch {
max-width: 60ch;
}
.max70ch {
max-width: 70ch;
}

/* Columns that flow like newspapersS */
.newspaper {
column-count: 3;
}

/* Show only 2 columns on smaller devices */
@media (max-width: 768px) {
.newspaper {
column-count: 2;
}
}

/* Show only 1 columns on phones devices */
@media (max-width: 450px) {
.newspaper {
column-count: 1;
}
}

.hr-teal {
border-bottom: 3px solid teal;
}

/* ===============================
   ASPECT RATIOS 
   =============================== */
.ar1x1 {
aspect-ratio: auto 1/1;
}
.ar2x1 {
aspect-ratio: auto 2/1;
}
.ar3x2 {
aspect-ratio: auto 3/2;
}
.ar4x3 {
aspect-ratio: auto 4/3;
}
.ar16x9 {
aspect-ratio: auto 16/9;
}
.ar21x9 {
aspect-ratio: auto 21/9;
}

/* ===============================
       BUTTONS
   =============================== */

.button-solid {
font-size: 1rem;
line-height: clamp(2.875rem, 5.5vw, 3.5rem);
text-decoration: none;
font-weight: 700;
text-align: center;
margin: 0;
color: #fff;
min-width: 9.375rem;
padding: 0 2rem;
background-color: red;
/* border-radius: 0.25rem; */
display: inline-block;
position: relative;
z-index: 1;
box-sizing: border-box;
}
.button-solid:before {
content: "";
position: absolute;
height: 100%;
width: 0%;
background: #000;
opacity: 1;
top: 0;
left: 0;
z-index: -1;
/* border-radius: 0.25rem; */
transition: width 0.3s;
}
.button-solid:hover:before {
width: 100%;
}