/* buttons and form fields */
.btn { display: inline-block; }
.btn, button, input[type="submit"] {
  appearance: none;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px; 
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  outline: none;
  padding: 0.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.3s ease; 
}

/* form fields */
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
option,
textarea { 
  border-radius: 5px;
  font-size: 1rem;
  line-height: 1;
  padding: 0.3em 1.2em;
  border: 1px solid var(--neutral-200);
}

.ar-1-1 { aspect-ratio: 1 / 1; }
.ar-4-1 { aspect-ratio: 4 / 1; }
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-3-1 { aspect-ratio: 3 / 1; }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-2-1 { aspect-ratio: 2 / 1; }
.ar-1p5-1 { aspect-ratio: 1.5 / 1; }
.ar-3-4 { aspect-ratio: 3 / 4; }
.ar-2-3 { aspect-ratio: 2 / 3; }
.ar-1-2 { aspect-ratio: 1 / 2; }
.ar-1-1p5 { aspect-ratio: 1 / 1.5; }

.bga-f { background-attachment: fixed; }
.bga-s { background-attachment: scroll; }

[class*='bgp-'] { background-size: cover; }
.bgp-lt { background-position: left top; }
.bgp-ct { background-position: center top; }
.bgp-rt { background-position: right top; }
.bgp-lc { background-position: left center; }
.bgp-cc { background-position: center center; }
.bgp-rc { background-position: right center; }
.bgp-lb { background-position: left bottom; }
.bgp-cb { background-position: center bottom; }
.bgp-rb { background-position: right bottom; }

.bgs-con { background-size:contain !important; } /* cover by default */

/* for each background layer */
.bbm-color { background-blend-mode: color; }
.bbm-color-burn { background-blend-mode: color-burn; }
.bbm-color-dodge { background-blend-mode: color-dodge; }
.bbm-darken { background-blend-mode: darken; }
.bbm-difference { background-blend-mode: difference; }
.bbm-exclusion { background-blend-mode: exclusion; }
.bbm-hard-light { background-blend-mode: hard-light; }
.bbm-hue { background-blend-mode: hue; }
.bbm-lighten { background-blend-mode: lighten; }
.bbm-luminosity { background-blend-mode: luminosity; }
.bbm-multiply { background-blend-mode: multiply; }
.bbm-normal { background-blend-mode: normal; }
.bbm-overlay { background-blend-mode: overlay; }
.bbm-revert { background-blend-mode: revert; }
.bbm-saturation { background-blend-mode: saturation; }
.bbm-screen { background-blend-mode: screen; }
.bbm-soft-light { background-blend-mode: soft-light; }

.b-1ps-gray-300 { border: 1px solid var(--gray-300); }

.br-sm { border-radius: 0.5rem; }
.br-md { border-radius: 1rem; }
.br-lg { border-radius: 2rem; }
.br-50 { border-radius: 50%; }

.bs { box-shadow: 0 0 24px 12px rgba(3,51,71,0.15); }
.bs-sm { box-shadow: 0px 3px 7px rgba(3,51,71,0.15); }
.bs-md { box-shadow: 0px 9px 24px rgba(0, 0, 0, 0.15); }
.bs-lg { box-shadow: -18px 18px 36px rgba(0, 0, 0, 0.35); }

.fv-sc { font-variant:small-caps; }

img.invert { filter: invert(); }
[class*="500-bg"] .auto-invert,
[class*="600-bg"] .auto-invert, 
[class*="700-bg"] .auto-invert {
    filter: invert();
} 

.lh1 { line-height: 1; }
.lh1p15 { line-height: 1.15; }
.lh1p25 { line-height: 1.25; }
.lh1p5 { line-height: 1.5; }

.mask { mask-repeat: no-repeat; mask-type: alpha; }
.ms-cov { mask-size: cover }
.ms-con { mask-size: contain }
.mp-cb { mask-position: center bottom }
.mp-cc { mask-position: center center }
.mp-ct { mask-position: center top }

/* mix with parent element */
.mbm-color { mix-blend-mode: color; }
.mbm-color-burn { mix-blend-mode: color-burn; }
.mbm-color-dodge { mix-blend-mode: color-dodge; }
.mbm-darken { mix-blend-mode: darken; }
.mbm-difference { mix-blend-mode: difference; }
.mbm-exclusion { mix-blend-mode: exclusion; }
.mbm-hard-light { mix-blend-mode: hard-light; }
.mbm-hue { mix-blend-mode: hue; }
.mbm-lighten { mix-blend-mode: lighten; }
.mbm-luminosity { mix-blend-mode: luminosity; }
.mbm-multiply { mix-blend-mode: multiply; }
.mbm-normal { mix-blend-mode: normal; }
.mbm-overlay { mix-blend-mode: overlay; }
.mbm-saturation { mix-blend-mode: saturation; }
.mbm-screen { mix-blend-mode: screen; }
.mbm-soft-light { mix-blend-mode: soft-light; }

.obj-con { 
    object-fit: contain; 
    object-position: center;
}
.obj-fit { 
    object-fit: cover; 
    object-position: center;
}
  
.ov-h { overflow: hidden; }

.op-0 { opacity: 0; }
.op-1 { opacity: 1; }

.ta-c { text-align:center; }
.ta-l { text-align:left; }
.ta-r { text-align:right; }

.td-n { text-decoration: none; }

.ts { text-shadow: 0 7px 12px rgba(0,0,0,0.24); }

.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttn { text-transform: none; }
.ttu { text-transform: uppercase; }

.va-b { vertical-align: bottom; }

/* site specific */
.logo-sm {
    height: 40px;
    width: auto;
}
.logo-md {
    height: 50px;
    width: auto;
}

body {
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
}

.glass {
  background: rgba( 255, 255, 255, 0.15 );
  box-shadow: 0 8px 32px 0 rgba(76, 76, 76, 0.37);
  backdrop-filter: blur( 4.5px );
  -webkit-backdrop-filter: blur( 4.5px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

/* hover effects - parent:hover, child has effect */
@media (hover: hover) {

    [class^='hvr-'], 
    .hvr-pr > * { transition: all 0.4s ease; }

    .hvr-bs:hover { box-shadow: 0px 7px 12px rgba(0,0,0,0.15); }
    .hvr-grow:hover { transform:scale(1.05); }
    .hvr-shrink:hover { transform:scale(0.7); }
    .hvr-r:hover { transform: translateX(12px) !important; }
    .hvr-up:hover { transform: translateY(-7px); }

    .hvr-pr:hover .hvr-ch-br-5px { border-radius: 5px; }
    .hvr-pr:hover .hvr-ch-br-10px { border-radius: 10px; }
    .hvr-pr:hover .hvr-ch-br1 { border-radius: 1rem; }
    .hvr-pr:hover .hvr-ch-br2 { border-radius: 2rem; }
    .hvr-pr:hover .hvr-ch-br3 { border-radius: 3rem; }
    .hvr-pr:hover .hvr-ch-bs-sm { box-shadow: 0px 3px 7px rgba(3,51,71,0.15); }

    .hvr-pr:hover .hvr-ch-bbm-color { background-blend-mode: color; }
    .hvr-pr:hover .hvr-ch-bbm-color-burn { background-blend-mode: color-burn; }
    .hvr-pr:hover .hvr-ch-bbm-color-dodge { background-blend-mode: color-dodge; }
    .hvr-pr:hover .hvr-ch-bbm-darken { background-blend-mode: darken; }
    .hvr-pr:hover .hvr-ch-bbm-difference { background-blend-mode: difference; }
    .hvr-pr:hover .hvr-ch-bbm-exclusion { background-blend-mode: exclusion; }
    .hvr-pr:hover .hvr-ch-bbm-hard-light { background-blend-mode: hard-light; }
    .hvr-pr:hover .hvr-ch-bbm-hue { background-blend-mode: hue; }
    .hvr-pr:hover .hvr-ch-bbm-lighten { background-blend-mode: lighten; }
    .hvr-pr:hover .hvr-ch-bbm-luminosity { background-blend-mode: luminosity; }
    .hvr-pr:hover .hvr-ch-bbm-multiply { background-blend-mode: multiply; }
    .hvr-pr:hover .hvr-ch-bbm-normal { background-blend-mode: normal; }
    .hvr-pr:hover .hvr-ch-bbm-overlay { background-blend-mode: overlay; }
    .hvr-pr:hover .hvr-ch-bbm-saturation { background-blend-mode: saturation; }
    .hvr-pr:hover .hvr-ch-bbm-screen { background-blend-mode: screen; }
    .hvr-pr:hover .hvr-ch-bbm-softlight { background-blend-mode: softlight; }

    .hvr-pr:hover .hvr-ch-mbm-color { mix-blend-mode: color; }
    .hvr-pr:hover .hvr-ch-mbm-color-burn { mix-blend-mode: color-burn; }
    .hvr-pr:hover .hvr-ch-mbm-color-dodge { mix-blend-mode: color-dodge; }
    .hvr-pr:hover .hvr-ch-mbm-darken { mix-blend-mode: darken; }
    .hvr-pr:hover .hvr-ch-mbm-difference { mix-blend-mode: difference; }
    .hvr-pr:hover .hvr-ch-mbm-exclusion { mix-blend-mode: exclusion; }
    .hvr-pr:hover .hvr-ch-mbm-hard-light { mix-blend-mode: hard-light; }
    .hvr-pr:hover .hvr-ch-mbm-hue { mix-blend-mode: hue; }
    .hvr-pr:hover .hvr-ch-mbm-lighten { mix-blend-mode: lighten; }
    .hvr-pr:hover .hvr-ch-mbm-luminosity { mix-blend-mode: luminosity; }
    .hvr-pr:hover .hvr-ch-mbm-multiply { mix-blend-mode: multiply; }
    .hvr-pr:hover .hvr-ch-mbm-normal { mix-blend-mode: normal; }
    .hvr-pr:hover .hvr-ch-mbm-overlay { mix-blend-mode: overlay; }
    .hvr-pr:hover .hvr-ch-mbm-saturation { mix-blend-mode: saturation; }
    .hvr-pr:hover .hvr-ch-mbm-screen { mix-blend-mode: screen; }
    .hvr-pr:hover .hvr-ch-mbm-softlight { mix-blend-mode: softlight; }

    /* motion */
    .hvr-pr .hvr-ch-down { transform: translateY(-100%); }
    .hvr-pr .hvr-ch-slide-left { transform: translateX(90%); opacity: 0; }
    .hvr-pr .hvr-ch-slide-right { transform: translateX(-90%); opacity: 0; }
    .hvr-pr .hvr-ch-up { transform: translateY(90%); opacity: 0; }
    .hvr-pr:hover .hvr-ch-bs {box-shadow: 0px 3px 5px 7px rgba(0,0,0,0.1); }
    .hvr-pr:hover .hvr-ch-down { transform: translateY(0); }
    .hvr-pr:hover .hvr-ch-grow { transform: scale(1.1); }
    .hvr-pr:hover .hvr-ch-grow-fast { transform: scale(1.125); transition: all 0.2s ease-in; }
    .hvr-pr:hover .hvr-ch.hvr-rotate { transform: rotate(-15deg) scale(1.1); transform-origin: center; }
    .hvr-pr:hover .hvr-ch-rotate-grow { transform: rotate(15deg) scale(1.1); }
    .hvr-pr:hover .hvr-ch-shrink { transform: scale(1.1); }
    .hvr-pr:hover .hvr-ch-slide-left { transform: translateX(0); opacity: 1; }
    .hvr-pr:hover .hvr-ch-slide-right { transform: translateX(0); opacity: 1; }
    .hvr-pr:hover .hvr-ch-up { transform: translateY(0); opacity: 1; }
    .hvr-pl1em:hover,
    .hvr-pr:hover .hvr-ch-pl1em { padding-left: 1em; }

    /* change opacity on hover */
    .hvr-op1, .hvr-ch-op1 { opacity: 0; }
    .hvr-pr:hover .hvr-ch-op1,
    .hvr-op1:hover { opacity: 1; }

    /* change background color on hover */
    .hvr-primary-100:hover { background-color:var(--primary-100); }
    .hvr-primary-200:hover { background-color:var(--primary-200); }
    .hvr-primary-300:hover { background-color:var(--primary-300); }
    .hvr-primary-400:hover { background-color:var(--primary-400); }
    .hvr-primary-500:hover { background-color:var(--primary-500); color: var(--white); }
    .hvr-primary-600:hover { background-color:var(--primary-600); color: var(--white); }
    .hvr-primary-700:hover { background-color:var(--primary-700); color: var(--white); }
    .hvr-secondary-100:hover { background-color:var(--secondary-100); }
    .hvr-secondary-200:hover { background-color:var(--secondary-200); }
    .hvr-secondary-300:hover { background-color:var(--secondary-300); }
    .hvr-secondary-400:hover { background-color:var(--secondary-400); }
    .hvr-secondary-500:hover { background-color:var(--secondary-500); color: var(--white); }
    .hvr-secondary-600:hover { background-color:var(--secondary-600); color: var(--white); }
    .hvr-secondary-700:hover { background-color:var(--secondary-700); color: var(--white); }
    .hvr-accent-100:hover { background-color:var(--accent-100); }
    .hvr-accent-200:hover { background-color:var(--accent-200); }
    .hvr-accent-300:hover { background-color:var(--accent-300); }
    .hvr-accent-400:hover { background-color:var(--accent-400); }
    .hvr-accent-500:hover { background-color:var(--accent-500); color: var(--white); }
    .hvr-accent-600:hover { background-color:var(--accent-600); color: var(--white); }
    .hvr-accent-700:hover { background-color:var(--accent-700); color: var(--white); }
    .hvr-contrast-100:hover { background-color:var(--contrast-100); }
    .hvr-contrast-200:hover { background-color:var(--contrast-200); }
    .hvr-contrast-300:hover { background-color:var(--contrast-300); }
    .hvr-contrast-400:hover { background-color:var(--contrast-400); }
    .hvr-contrast-500:hover { background-color:var(--contrast-500); color: var(--white); }
    .hvr-contrast-600:hover { background-color:var(--contrast-600); color: var(--white); }
    .hvr-contrast-700:hover { background-color:var(--contrast-700); color: var(--white); }
    .hvr-transparent:hover { background-color: transparent; }
}