/*
Theme Name: IGEMS 2023
Theme URI: //igems.se
Version: 1.0
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Base Styles
- Color
- Grid
- Typography
- Links
- Elements
- Splash screen
- Header
- Footer
- Video
- Buttons
- Changelog
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
    font-family: "Lettera-Light";
    src: url("fonts/LetteraTextLLSub-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Lettera-Regular";
    src: url("fonts/LetteraTextLLSub-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Lettera-Medium";
    src: url("fonts/LetteraTextLLSub-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "LetteraMono-Light";
    src: url("fonts/LetteraMonoLLSub-Light.woff2") format("woff2");
}

@font-face {
    font-family: "LetteraMono-Regular";
    src: url("fonts/LetteraMonoLLSub-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "LetteraMono-Medium";
    src: url("fonts/LetteraMonoLLSub-Medium.woff2") format("woff2");
}

::-moz-selection {
    background: var(--primary);
    color: var(--active-dark);
    text-shadow: none;
}

::selection {
    background: var(--primary);
    color: var(--active-dark);
    text-shadow: none;
}
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
    font-size: 62.5%;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    font-size: var(--mobile-paragraph);
    line-height: calc(var(--mobile-paragraph) * 1.2);
    font-family: "Lettera-Regular", serif;
    font-weight: 400;
    font-style: normal;
    color: var(--regular-dark);
    background: var(--dark);
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 734px) {
    body {
        font-size: var(--tablet-paragraph);
        line-height: calc(var(--tablet-paragraph) * 1.2);
    }
}

@media (min-width: 1180px) {
    body {
        font-size: var(--paragraph);
        line-height: calc(var(--paragraph) * 1.2);
    }
}

/* Color
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --background: rgba(240, 240, 239, 1);
    --background-transparent: rgba(240, 240, 239, 0.6);
    --alt-background: rgba(226, 225, 219, 1);
    --primary: rgba(255, 188, 0, 1);
    --primary-hover: rgba(255, 204, 80, 1);
    --secondary: rgba(128, 128, 128, 0.15);
    --secondary-hover: rgba(128, 128, 128, 0.25);
    --level-0: rgba(0, 5, 10, 0.03);
    --level-1: rgba(0, 5, 10, 0.06);
    --level-2: rgba(0, 5, 10, 0.12);
    --level-3: rgba(0, 5, 10, 0.4);
    --level-4: rgba(0, 5, 10, 0.6);
    --menu-hover: rgba(255, 190, 234, 0.16);
    --border: rgba(0, 0, 0, 0.1);
    --overlay: rgba(0, 5, 10, 0.2);
    --alert: rgba(253, 2, 84, 1);
    --alert-hover: rgba(229, 3, 84, 1);
    --blue: rgba(0, 75, 194, 1);
    --light-blue: rgba(135, 207, 255, 1);
    --light-blue-hover: rgba(130, 183, 219, 1);
    --white: rgba(255, 255, 255, 1);
    --pink: rgba(255, 190, 234, 1);
    --purple: rgba(147, 67, 255, 1);
    --green: rgba(0, 236, 147, 1);
    --dark: rgba(4, 18, 36, 1);
    --dark-hover: rgba(0, 9, 18, 1);
    --alt-dark: rgba(27, 40, 52, 1);
    --alt-dark-hover: rgba(48, 60, 70, 1);
    --active-dark: rgba(0, 18, 33, 0.87);
    --regular-dark: rgba(0, 18, 33, 0.6);
    --inactive-dark: rgba(0, 18, 33, 0.36);
    --active-dark-hover: rgba(0, 0, 0, 0.8);
    --active-light: rgba(244, 245, 239, 0.87);
    --regular-light: rgba(244, 245, 239, 0.6);
    --inactive-light: rgba(244, 245, 239, 0.36);
}

/* Transition
-------------------------------------------------- */
:root {
    --transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Widths
-------------------------------------------------- */
:root {
    --sidebar-width: 260px;
    --icon-size-small: 24px;
    --icon-size-large: 48px;
}

/* Margins
-------------------------------------------------- */
:root {
    --header-height: 10rem;
    --header-height-mobile: 6rem;
    --section-padding: 10rem;
    --section-padding-mobile: 6rem;
    --h2-margin: 3rem 0 12rem 0;
    --extra-margin-bottom: 10rem;
    --product-tag-margin-top: 1rem;
    --zero-padding: 0;
}

/* Type
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --card-title: 2vw;
    --tablet-card-title: 2.6vw;
    --mobile-card-title: 6vw;
    --card-header: 1vw;
    --tablet-card-header: 1.3vw;
    --mobile-card-header: 3vw;
    --paragraph: 1.6rem;
    --tablet-paragraph: 1.4rem;
    --mobile-paragraph: 1.2rem;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.template {
    display: grid;
    grid-template-columns: 1rem 1fr 1rem;
    grid-template-rows: var(--header-height-mobile) var(--header-height-mobile) 1fr;
    min-height:100vh;
}

@media (min-width: 734px) {
    .template {
        grid-template-columns: minmax(var(--sidebar-width), auto) 3rem 1fr 3rem;
        grid-template-rows: var(--header-height) 1fr var(--header-height);
    }
}
@media (min-width: 1180px) {
    .template {
        grid-template-columns: minmax(var(--sidebar-width), auto) 6rem 1fr 6rem;
    }
}

/* login
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.login {
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    overflow-y: scroll;
    background:var(--background);
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: repeat(8, 1fr);
    align-items: center;
}
.login-item {
    display: grid;
    gap: 3rem;
    grid-column: 1 / span 8;
    padding:3rem 1rem;
}
.login-item-large {
    display: grid;
    gap: 1rem;
    grid-column: 1 / span 8;
}
@media (min-width: 734px) {
    .login-item {
        grid-column: 3 / span 4;
        padding: 6rem 0rem;
    }
    .login-item-large {
    grid-column: 2 / span 6;
    }
}
@media (min-width: 1180px) {
    .login-item {
        grid-column: 4 / span 2;
        padding: 6rem 0rem;
    }
    .login-item-large {
    grid-column: 3 / span 4;
    }
}

/* main
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.main {
    grid-column: 1 / span 3;
    grid-row: 2 / span 2;
    padding: 0 1rem 1rem 1rem;
    background: var(--background);
    z-index: 1000;
    border-radius: 1rem 1rem 0 0;
}
@media (min-width: 734px) {
    .main {
        grid-column: 2 / span 3;
        grid-row: 1 / span 3;
        padding: 0 3rem 3rem 3rem;
        border-radius: 1rem 0 0 1rem;
    }
    .main-grid {
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
    }
}
@media (min-width: 1180px) {
    .main {
        grid-column: 2 / span 3;
        grid-row: 1 / span 3;
        padding: 0 6rem 6rem 6rem;
        border-radius: 1rem 0 0 1rem;
    }
    .main-grid {
        grid-column-gap: 3rem;
        grid-row-gap: 3rem;
    }
}
.main-grid {
    --columns: 8;
    display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: repeat(8, 1fr);
}

.main-grid-item-title {
    grid-column: auto/span 8;
}

.main-grid-item-8 h1 {
    margin-bottom: 0;
}

.main-grid-item-text-left {
    grid-column: auto/span 8;
}

.main-grid-item-text-centered {
    grid-column: auto/span 8;
}

.main-grid-item-text-centered-large {
    grid-column: auto/span 8;
}

.main-grid-item-image-cluster-left {
    grid-column: 1/span 3;
    place-self: center;
}

.main-grid-item-image-cluster-center {
    grid-column: 4/span 2;
    place-self: center;
}

.main-grid-item-image-cluster-right {
    grid-column: 6/span 3;
    place-self: center;
}

.main-grid-item-image-half-left {
    grid-column: 1/span 4;
    place-self: center;
}

.main-grid-item-image-half-right {
    grid-column: 5/span 4;
    place-self: center;
}

.main-grid-item-image-right {
    grid-column: auto/span 8;
}

.main-grid-item-image-right-medium {
    grid-column: auto/span 8;
}

.main-grid-item-image-right-large {
    grid-column: auto/span 8;
}

.main-grid-item-1-input {
    grid-column: auto/span 8;
}

.main-grid-item-2-center {
    grid-column: auto/span 8;
    grid-row: var(--row-gap);
}

.main-grid-item-1 {
    grid-column: auto/span 8;
}

.main-grid-item-2 {
    grid-column: auto/span 8;
}

.main-grid-item-3 {
    grid-column: auto/span 8;
}

.main-grid-item-4 {
    grid-column: auto/span 8;
}

.main-grid-item-5 {
    grid-column: auto/span 8;
}

.main-grid-item-6 {
    grid-column: auto/span 8;
}

.main-grid-item-7 {
    grid-column: auto/span 8;
}

.main-grid-item-8 {
    grid-column: auto/span 8;
}

.grid-title {
    grid-column: 2/span 8;
}

@media (min-width: 734px) {

    .main-grid-item-title {
        grid-column: 1/span 7;
    }

    .main-grid-item-text-left {
        grid-column: 1/span 7;
    }

    .main-grid-item-text-centered {
        grid-column: 2/span 6;
    }

    .main-grid-item-text-centered-large {
        grid-column: 1/span 8;
    }

    .main-grid-item-image-cluster-left {
        grid-column: 2/span 2;
        place-self: center;
    }

    .main-grid-item-image-cluster-center {
        grid-column: 4/span 2;
        place-self: center;
    }

    .main-grid-item-image-cluster-right {
        grid-column: 6/span 2;
        place-self: center;
    }

    .main-grid-item-image-half-left {
        grid-column: 2/span 3;
        place-self: center;
    }

    .main-grid-item-image-half-right {
        grid-column: 5/span 3;
        place-self: center;
    }

    .main-grid-item-image-right {
        grid-column: 3/span 6;
    }

    .main-grid-item-image-right-medium {
        grid-column: 2/span 7;
    }

    .main-grid-item-image-right-large {
        grid-column: 2/span 8;
    }

    .main-grid-item-1-input {
        grid-column: 1/span 1;
    }

    .main-grid-item-2-center {
        grid-column: 4/span 2;
        grid-row: var(--row-gap);
    }

    .main-grid-item-1 {
        grid-column: auto/span 1;
    }

    .main-grid-item-2 {
        grid-column: auto/span 2;
        grid-row: var(--row-gap);
    }

    .main-grid-item-3 {
        grid-column: auto/span 3;
    }

    .main-grid-item-4 {
        grid-column: auto/span 4;
    }

    .main-grid-item-5 {
        grid-column: auto/span 5;
    }

    .main-grid-item-6 {
        grid-column: auto/span 6;
    }

    .main-grid-item-7 {
        grid-column: auto/span 7;
    }

    .main-grid-item-8 {
        grid-column: auto/span 8;
    }
}

@media (min-width: 1180px) {
    .main-grid-item-title {
        grid-column: 1/span 5;
    }

    .main-grid-item-text-left {
        grid-column: 2/span 5;
    }

    .main-grid-item-text-centered {
        grid-column: 3/span 4;
    }

    .main-grid-item-text-centered-large {
        grid-column: 2/span 6;
    }

    .main-grid-item-image-cluster-left {
        grid-column: 2/span 2;
        place-self: center;
    }

    .main-grid-item-image-cluster-center {
        grid-column: 4/span 2;
        place-self: center;
    }

    .main-grid-item-image-cluster-right {
        grid-column: 6/span 2;
        place-self: center;
    }

    .main-grid-item-image-half-left {
        grid-column: 2/span 3;
        place-self: center;
    }

    .main-grid-item-image-half-right {
        grid-column: 5/span 3;
        place-self: center;
    }

    .main-grid-item-image-right {
        grid-column: 3/span 5;
    }

    .main-grid-item-image-right-medium {
        grid-column: 3/span 6;
    }

    .main-grid-item-image-right-large {
        grid-column: 2/span 7;
    }

    .main-grid-item-1-input {
        grid-column: 2/span 1;
    }
}


/* Cards
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.card-grid {
    --columns: 8;
    --gap: 1rem;
    --row-gap: 1rem;
    display: grid;
    grid-column: 1 / span var(--columns);
    grid-column-gap: var(--gap);
    grid-row-gap: var(--row-gap);
    grid-template-columns: repeat (var(--columns), 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
}
.narrow-rows {
    --row-gap: 1rem !important;
}
.no-height-set {
    grid-auto-rows: auto !important;
}
.content-height {
    height: fit-content;
}
.card {
    --row-gap: 1rem;
    grid-row-gap: var(--row-gap);
    align-content: flex-start;
    display: grid;
    height: auto;
    overflow: hidden;
    grid-template-columns: 1rem 1fr 1rem;
    transition: var(--transition);
    padding:1rem 0;
    border: none !important;
}
.notifications {
    display: grid;
    gap: 1rem;
    grid-column: 1 / span 8;
}
.notification {
    align-items: center;
    align-content: center;
}
.notification:first-child {
    grid-template-columns: 1rem auto 1fr auto 3rem !important;
}
.notification:nth-child(2) {
    grid-template-columns: 1rem auto 1fr auto 3rem !important;
}
.notification:nth-child(3) {
    grid-template-columns: 1rem auto 1fr auto 3rem !important;
}
.notification:last-child {
    margin-bottom: 1rem;
}
.notification:nth-child(3) span {
   grid-column: 2;
}
.notification svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    margin-right: 1rem;
    grid-column: 2;
}
.notification p {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
@media (min-width: 734px) {
    .card {
        padding:3rem 0;
        grid-template-columns: 3rem 1fr 3rem;
    }
}
@media (min-width: 1180px) {
    .card {
        padding:3rem 0;
        grid-template-columns: 3rem 1fr 3rem;
    }
}
.card-full-span {
    grid-column: 1 / span 3;
}

.card h2, .card h3 {
    margin: 0;
    grid-row: 1;
}
.card-buttons {
    display: grid;
    grid-gap: 1rem;
    grid-auto-flow: column;
    justify-self: end;
    align-items: center;
    grid-column: 2;
}
.card-inputs {
    display: grid;
    grid-gap: 1rem;
    grid-auto-flow: column;
    justify-self: end;
}
.card-video {
    width: 100%;
    grid-row: 1 / span 2;
    grid-column: 1 /span 3;
}

.card-image-top {
    width: 100%;
    grid-row: 1 / span 1;
    grid-column: 1 /span 3;
}

.card-image-bottom {
    width: 100%;
    grid-row: 3 / span 1;
    grid-column: 1 /span 3;
}

.card-image-bottom-right-large {
    width: 100%;
    grid-row: 2 / span 2;
    grid-column: 2 /span 2;
}

.card-item-1-1 {
    grid-column: auto/span 1;
    grid-row: auto/span 1;
}

.card-item-1-2 {
    grid-column: auto/span 1;
    grid-row: auto/span 2;
}

.card-item-2-1 {
    grid-column: auto/span 1;
    grid-row: auto/span 1;
}

.card-item-half-1 {
    grid-column: auto/span 1;
    grid-row: auto/span 1;
}

.card-item-half-2 {
    grid-column: auto/span 1;
    grid-row: auto/span 2;
}

.card-item-2-2 {
    grid-column: auto/span 1;
    grid-row: auto/span 1;
}

.card-item-3-2 {
    grid-column: auto/span 1;
    grid-row: auto/span 1;
}

.card-vertical-thirds {
    grid-template-rows: minmax(0,3fr) minmax(0,2fr) minmax(0,3fr);
}

.card-vertical-thirds img:first-child {
    align-self: end;
}

.grid-title {
    grid-column: 1 / span 8;
}
/*------------------------------------Product page----------------*/
.product {
    grid-auto-rows: auto !important;
}

.product .card {
    grid-template-rows: auto 1fr;
}

.card-product-top {
    display: grid;
    column-gap: 1rem;
    grid-column: 2 / span 1;
    grid-template-rows: auto auto;
    grid-template-columns: 60px 1fr;
    grid-auto-rows: min-content;
}

.card-product-image {
    display: grid;
    justify-content: start;
    grid-column: 1/span 1;
    grid-row: 1/span 2;
    border-radius: 1rem;
    overflow: hidden;
}
.card-product-image img {
    width: 60px;
}

.card-product-title {
    display: grid;
    grid-template-columns: auto auto;
    grid-column: 2/span 1;
    grid-row: 1/span 1;
}

.card-product-description {
    display: grid;
    grid-template-columns: auto auto;
    grid-column: 2/span 1;
    grid-row: 2/span 1;
    align-self: end;
}

.card-product-description p {
    margin-bottom: 0 !important;
    font-family: "Lettera-Medium", serif;
}

.product:hover {
    cursor: pointer;
    background: var(--level-1);
}
.tilter-options {
    grid-row: 1 / span 1;
    grid-column: 1 / span 8;
    grid-template-rows: auto 1fr;
}
@media (min-width: 734px) {
    .tilter-options {
        grid-row: 1 / span 2;
        grid-column: 5 / span 4;
    }
    .card-product-top {
        grid-template-columns: 80px 1fr;
    }
    .card-product-description {
        align-self: end;
    }
    .card-product-image img {
        width: 80px;
    }
}
@media (min-width: 1180px) {
    .card-grid {
        --columns: 8;
        --gap: 3rem;
        --row-gap: 3rem;
        display: grid;
        grid-column: 1 / span var(--columns);
        grid-template-columns: repeat(var(--columns), 1fr);
        grid-auto-rows: auto;
    }
    .card-product-top {
        grid-template-columns: 100px 1fr;
    }
    .card-product-description {
        align-self: end;
    }
    .card-item-1-1 {
        grid-column: auto/span 4;
        grid-row: auto/span 1;
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .card-item-1-2 {
        grid-column: auto/span 3;
        grid-row: auto/span 2;
    }

    .card-item-half-1 {
        grid-column: auto/span 4;
        grid-row: auto/span 1;
    }

    .card-item-half-2 {
        grid-column: auto/span 4;
        grid-row: auto/span 2;
    }

    .card-item-2-1 {
        grid-column: auto/span 5;
        grid-row: auto/span 1;
    }

    .card-item-2-2 {
        grid-column: auto/span 5;
        grid-row: auto/span 2;
    }

    .card-item-3-2 {
        grid-column: auto/span 8;
        grid-row: auto/span 2;
    }
    .tilter-options {
        grid-row: 1 / span 2;
        grid-column: 5 / span 4;
    }
    .card-product-image img {
        width: 100px;
    }
}


/* Tools
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.margin {
    margin: var(--section-padding) 0;
}

.extra-margin-top {
    margin-top: var(--extra-margin-bottom);
}

.extra-margin-bottom {
    margin-bottom: var(--extra-margin-bottom);
}

.zero-padding {
    padding: var(--zero-padding);
}
.zero-padding-top {
    padding-top: var(--zero-padding);
}
.zero-padding-bottom {
    padding-bottom: var(--zero-padding);
}
.hidden {
    display: none;
}

.card-rounded {
    border-radius: 1rem;
    overflow: hidden;
}

.align-center {
    place-self: center;
}

.align-bottom {
    place-self: end;
}
.width-auto {
    width: auto !important;
    max-width: 250px;
}
.overlay {
    background-color: var(--overlay);
    width: 100%;
    height: 100%;
    display: grid;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5 {
    font-family: "Lettera-Medium", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2em;
    color: var(--active-dark);
    margin: 0 0 2rem 0;
}

h1 {
    font-size: calc(var(--mobile-paragraph) * 3);
    color: var(--active-dark);
    margin: 0 0 0.4em 0;
    display: inline-block;
}

h1.button-clear, h2.button-clear {
    display: inline-block;
}

h2 {
    font-size: calc(var(--mobile-paragraph) * 2);
}

h3 {
    font-size: calc(var(--mobile-paragraph) * 1);
    margin: 0 0 0 0;
}

p {
    margin: 0;
}

p.emphasize {
    font-size: calc(var(--mobile-paragraph) * 1.5);
    line-height: 1.2em;
}

i {
    font-family: "Lettera-Light", sans-serif;
    font-style: normal;
    font-size: calc(var(--mobile-paragraph) * 0.8);
    color: var(--regular-dark);
}

b {
    font-family: "Lettera-Medium", sans-serif;
}
.text-danger {
    color: var(--alert);
    font-family: "Lettera-Regular", sans-serif;
    margin: -1rem 0 1rem 0;
    display: inline;
}

@media (min-width: 734px) {
    h1 {
        font-size: calc(var(--tablet-paragraph) * 4);
    }

    h2 {
        font-size: calc(var(--tablet-paragraph) * 2);
    }

    h3 {
        font-size: var(--tablet-paragraph);
    }

    p {
        margin: 0;
    }

    p.emphasize {
        font-size: calc(var(--tablet-paragraph) * 2);
    }

    i {
        font-size: calc(var(--tablet-paragraph) * 0.8);
    }
}

@media (min-width: 1180px) {
    h1 {
        font-size: calc(var(--paragraph) * 4);
    }

    h2 {
        font-size: calc(var(--paragraph) * 2);
    }

    h3 {
        font-size: var(--paragraph);
    }

    p.emphasize {
        font-size: calc(var(--paragraph) * 2);
        line-height: 1.2em;
    }

    i {
        font-size: calc(var(--paragraph) * 0.8);
    }


    .technical {
        font-family: "LetteraMono-Regular", sans-serif;
        color: var(--active-dark);
    }
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

a:hover, a:active {
    color: var(--primary);
    text-decoration: underline;
}


/* Elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tags {
    display: grid;
    grid-column: 1 / span 2;
    gap: 1rem;
    grid-template-columns: max-content max-content max-content max-content;
}
.tag {
    display: inline-block;
    border-radius: 0.5rem;
	padding: 0.3rem 1rem;
    border: none;
}
.no-height {
    line-height: 0;
}
.product-tag {
    font-family: "LetteraMono-Light", monospace;
    color: var(--active-dark);
    font-size: var(--mobile-paragraph);
    background: var(--level-1);
    display: inline-block;
    margin-right: 1rem;
    padding: 0 1rem;
}
.tilter-option-tag {
    width: 2rem;
    height: 2rem;
    margin-left: 1rem;
    border: 1px solid var(--dark);
    display: inline-block;
}
.tilter-option1 {
    background: var(--background);
}
.tilter-option2 {
    background: var(--light-blue);
}
.tilter-option3 {
    background: var(--pink);
}
.tilter-option4 {
    background: var(--primary);
}
.product-margin {
    margin-top: var(--product-tag-margin-top);
}
.machine {
    display: grid;
    grid-row-gap: 1rem;
    grid-template-rows: 40px 1fr 40px;
    grid-template-columns: 1fr 1fr;
    height: fit-content;
}
.large-icon {
    height: var(--icon-size-large);
    width: var(--icon-size-large);
    align-self: center; }
.primary {
    background: var(--primary);
}
.thumb {
    background: var(--alt-background);
}
.yellow-type {
    color: var(--primary) !important;
}
.yellow {
    background-color: var(--primary);
}
.green {
    background-color: var(--green);
    color: var(--dark);
}
.purple {
    background:var(--purple);
    color: var(--active-light);
}
.alt-background {
    background: var(--alt-background);
    color: var(--active-dark);
}
.light-blue {
    background:var(--light-blue);
}
.green svg, .pink svg, .alt-background svg  {
    fill: var(--dark) !important;
}
.light-blue svg {
    fill: var(--active-dark) !important;
}
.alert svg, .purple svg {
    fill:var(--white) !important;
}
path.green {
    fill: var(--green);
}
.alert {
    background-color: var(--alert);
    margin-bottom: 0;
}
.card.alert:hover, .card.light-blue:hover {
    padding-right:1rem;
}
.text-alert {
    color: var(--alert) !important;;
}
.this-qtr {
    background: var(--alert);
    color: var(--active-light);
}
tr.this-qtr:hover {
    background: var(--alert-hover) !important;
    color:var(--active-light) !important;
}
.next-qtr {
    background: var(--primary);
    color: var(--active-dark);
}
tr.next-qtr:hover {
    background: var(--primary-hover) !important;
    color:var(--active-dark) !important;
}
.expired {
    background: var(--dark);
    color: var(--active-light);
}
tr.expired:hover {
    background: #000000 !important;
    color:var(--active-light) !important;
}
.expired .table-icon {
  fill:var(--active-light) !important;
}
.customer-owned {
    background: var(--light-blue);
    color: var(--active-dark);
}
tr.customer-owned:hover {
    background: var(--light-blue-hover) !important;
    color:var(--active-dark) !important;
}
.alert-row {
    background: var(--alert);
    color: var(--active-light);
}
.mild-alert-row {
    background: var(--primary);
    color: var(--active-light);
}
.card.alert h3 {
    color:var(--white);
}
.card.alert p {
    color:var(--active-light);
    margin-bottom: 0;
}
.card.light-blue h3 {
    color:var(--dark);
}
.card.light-blue p {
    color:var(--active-dark);
    margin-bottom: 0;
}
.blue {
    background-color: var(--blue);
}
.pink {
    background-color: var(--pink);
    color: var(--dark);
}
.white {
    background-color: var(--white);
    color: var(--regular-dark);
    border: none;
}
.dark {
    background-color: var(--dark);
    color: var(--active-light) !important;
}
.dark h2 {
    color: white !important;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
}
.dark h3 {
    color: var(--active-light) !important;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
}
.text-general, .text-top, .text-middle, .text-bottom {
    display: grid;
    width: 100%;
    column-gap: 1rem;
    grid-column: 1 /span 3;
    padding: 0 1rem;
    z-index: 100;
}

.text-general {
    gap: 1rem;
    grid-template-columns: 1fr auto;
}
.text-top {
    grid-template-columns: 1fr 1fr;
    grid-row: span 1;
}
.text-middle {
    grid-row: span 1;
    gap: 1rem;
}
.text-bottom {
    align-self: end;
    grid-row: span 1;
}
.text-top-left {
    grid-column: 1 / span 1;
}
.text-top-right {
    grid-column: 2 / span 1;
    display: flex;
    justify-content: flex-end;
}
.two-columns, .three-columns, .four-columns {
    grid-column: 2 / span 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}
/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  top: 0.5rem;
  left: 0;
  padding: 0.3rem 0.5rem;
  border-radius:0.5rem;
  max-width: 300px;
  white-space: nowrap;
  background-color: var(--active-dark);
  color: var(--active-light);
  content: attr(data-tooltip);
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

@media (min-width: 734px) {
    .text-general, .text-top, .text-middle, .text-bottom {
        grid-column: 2 /span 1;
        padding:0;
        column-gap: 3rem;
    }
    .product-tag {
        font-size: var(--tablet-paragraph);
    }

    .two-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

@media (min-width: 1180px) {
    .product-tag {
        font-size: var(--paragraph);
    }
    .two-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 1rem;
        -moz-column-gap: 1rem;
        column-gap: 1rem;
        width: 100%;
    }
}

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sidebar {
    display: grid;
    grid-row: 1 / span 3;
    grid-column: 1 / span 3;
    grid-template-rows: var(--header-height-mobile) 1fr auto;
    grid-template-columns: 1rem 1fr 1rem;
    height: var(--header-height-mobile);
    overflow: hidden;
    background: var(--dark);
    color: var(--regular-light);
    fill: var(--regular-light);
    transition: var(--transition);
    position: sticky;
    top: 0;
    z-index: 10000;
}
.expanded {
    height: 100vh !important;
}
.logo {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    height: var(--header-height-mobile);
    grid-column: 2 / span 1;    
}
header {
    display: grid;
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    grid-template-columns: 1fr auto;
    height: var(--header-height-mobile);
    align-items: center;
    background: var(--background-transparent);
    backdrop-filter: blur(1rem);
    z-index: 150;
    position: sticky;
    top:0;
}
.header-company {
    color: var(--inactive-dark);
    margin-left:3rem;
}
@media (min-width: 734px) {
    .sidebar {
        grid-template-rows: var(--header-height) 1fr auto;
        grid-template-columns: 3rem calc(var(--sidebar-width) - 6rem);
        width: var(--sidebar-width);
        min-height: 100vh;
        overflow-y: scroll;
    }
    .logo {
        height: var(--header-height);
    }
    header {
        height: var(--header-height);
    }
}
.logo svg {
    width: 74px;
    height: 20px;
    align-self: center;
    transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    fill: var(--white);
}
.logo-dark {
    height:20px;
    fill: var(--dark);
}
.sidebar h4 {
    color: var(--active-light);
    margin-bottom:1rem !important; }
.sidebar li {
    list-style: none;
    width: 100%; }
.sidebar li a {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(4.5rem, auto) 1fr;
    align-items: center;
    padding: 1rem;
    border-radius: 1rem; }
.sidebar li a.active {
    background: var(--menu-hover);
    color: var(--pink);
    fill: var(--pink);
    text-decoration: none; }
.sidebar li a:hover {
    background: var(--menu-hover);
    color: var(--pink);
    text-decoration: none; }
.sidebar li a svg {
    fill: var(--regular-light);
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    margin-right: 1rem; }
.sidebar li a.active svg {
    fill: var(--pink) !important;
}
.sidebar li a:hover svg {
    fill: var(--pink) !important;
}
.menu {
    grid-column: 2 / span 1;
    align-content: end;
}
.signout {
    display: grid;
    align-items: end;
    padding-bottom: 3rem;
    grid-column: 2 / span 1;
}
.signout svg {
    height: var(--icon-size-small);
    width: var(--icon-size-small);
    margin-right: 1rem;
}
.signout .overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
header h2 {
    margin-bottom:0 !important;
}
header.right {
    justify-self: end;
}

header ul {
    padding: 0;
    list-style: none;
    overflow: hidden;
}

header ul li {
    list-style: none;
}

header li a {
    font-size: calc(var(--paragraph) * 2);
    line-height: calc(var(--paragraph) * 3);
    color: var(--active-dark);
    text-decoration: none;
    list-style: none;
    display: inline;
    width: auto;
    padding: 0;
}

header li.yellow-pill a {
    margin-bottom: 3rem;
    font-size: calc(var(--paragraph) * 1);
}

header li.current-menu-item a {
    color: var(--primary);
    text-decoration: none;
}

header li a:hover,
header .menu-btn:hover {
    color: var(--primary);
    text-decoration: none;
}

/* menu icon */

.menubutton {
    font-family: "Lettera-Medium", sans-serif;
    display: inline-block;
    grid-column: 3/span 1;
    justify-self: end;
    margin:0;
    padding:1rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--active-light);
    transition: var(--transition);
}

@media (min-width: 734px) {
    .menubutton {
        display: none;
    }
    .menu {
    align-content: start;
    }
}

@media (min-width: 1180px) {
    .menubutton {
        display: none;
    }
    .menu {
    align-content: start;
    }
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.pill, .yellow-pill, .green-pill, .pink-pill {
    border-radius: 999em !important;
    width: auto !important;
    height: fit-content !important;
    font-family: "Lettera-Regular" !important;
    text-decoration: none !important;
    color: var(--active-dark) !important;
    cursor: pointer;
    display: inline-block;
    border-width: 0px;
    padding: 1rem 2rem !important;
    transition: var(--transition) !important;
}
.dark .pill {
    background: var(--active-light) !important;
}
.dark .pill:hover {
    background: var(--white) !important;
}
.pill {
    background: var(--level-1) !important; }

.yellow-pill {
    background: var(--primary) !important; }

.green-pill {
    background: var(--green) !important; }

.pink-pill {
    background: var(--pink) !important; }

.pink-pill:hover {
    cursor: pointer;
    background: var(--menu-hover) !important;
    color: var(--pink) !important;
}

.pill:first-child, .yellow-pill:first-child, .green-pill:first-child, .pink-pill:first-child, .pill:only-child, .yellow-pill:only-child, .green-pill:only-child, .pink-pill:only-child {
    margin: 0;
}

.pill img, .yellow-pill img {
    display: inline;
    vertical-align: bottom;
    width: var(--mobile-paragraph);
    height: var(--mobile-paragraph);
    margin-left:0.5rem;
}

tr .pill, tr .yellow-pill {
    margin: 0;
}

tr .pill a:hover, tr .yellow-pill a:hover {
    background: var(--active-dark);
    color: var(--active-light);
    fill: var(--active-light);
}

.pill:last-child {
    margin-right: 0;
}

.pill a, .pill.current-menu-item a, .cky-btn {
    font-family: "Lettera-Regular";
    background: var(--level-1);
    color: var(--active-dark);
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 999em !important;
    transition: var(--transition);
    text-decoration: none;
    z-index: 1000;
}

.yellow-pill a:hover, .yellow-pill:hover {
    background: var(--primary-hover) !important;
    color: var(--active-dark);
    cursor: pointer !important;
    text-decoration: none;
}

.pill a:hover, .pill:hover {
    background: var(--level-2) !important;
    color: var(--active-dark);
    cursor: pointer !important;
    text-decoration: none;
}

.yellow-pill a, .yellow-pill.current-menu-item a, a.yellow-pill {
    font-family: "Lettera-Regular";
    background: var(--primary);
    color: var(--active-dark);
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 999em;
    transition: var(--transition);
    text-decoration: none;
    z-index: 1000;
}

a.yellow-pill {
    margin-left: 1rem;
}

.alert-pill a, .pill.current-menu-item a {
    font-family: "Lettera-Regular";
    background: var(--alert);
    color: var(--active-light);
    padding: 1rem 2rem;
    border-radius: 999em;
    transition: var(--transition);
    text-decoration: none;
    z-index: 1000;
}

.alert-pill a:hover {
    background: var(--alert);
    color: var(--active-light);
    cursor: pointer;
    text-decoration: none;
}

.title-button {
    vertical-align: bottom;
    margin: 0 0 1em 1em;
}
.right {
    justify-self: end !important;
}
.left {
    justify-self: start !important;
}
.button-right {
    justify-self: flex-end;
    margin: 0 !important;
}
.full-width, .full-width a {
    width: 100%;
    text-align: center;
}

.alt-background.pill {
    background: var(--active-light) !important;
    padding: 0.6rem 1.2rem !important; }

.qty-container {
    display:grid;
    grid-template-columns: repeat(3, calc(var(--paragraph)* 1.5));
    align-items:center;
    justify-items:center;
    justify-self: end;
    border: 1px solid var(--dark);
    border-radius: 99em;
    height: fit-content;
    width: fit-content;
    overflow: hidden;
}
.qty-button {
    display:grid !important;
    align-items:center;
    justify-items:center;
    vertical-align: text-bottom;
    width: calc(var(--paragraph)* 1.5);
    background: var(--dark) !important;
    border-radius: 0 !important;
}
.qty-number {
    color: var(--dark) !important;
}
.qty-button:hover {
    background: var(--dark) !important;
}
.qty-button:hover i {
    color:var(--active-light) !important;
}
.tr:hover.qty-button {
    color:var(--active-dark) !important;
    background: var(--active-light) !important;
}
.tr:hover.qty-button:hover {
    color:var(--active-dark) !important;
    background: var(--pink) !important;
}
.hide-on-mobile {
    display: none !important;
}
.table-icon {    
    height: var(--icon-size-small);
    width: var(--icon-size-small);
    margin: -5px 0;
    fill: var(--active-dark); }

@media (min-width: 734px) {
    .pill img, .yellow-pill img {
        width: var(--tablet-paragraph);
        height: var(--tablet-paragraph);
    }
}
@media (min-width: 1180px) {
    .hide-on-mobile {
        display: inline-block !important;
    }
    .pill img, .yellow-pill img {
        width: var(--paragraph);
        height: var(--paragraph);
    }
}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input,
textarea,
select {
    font-size: var(--mobile-paragraph) !important;
    font-family: "Lettera-Regular", serif;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    background: var(--level-1) !important;
    width: 100%;
    outline: none;
    color: var(--active-dark);
    display: block;
    padding: 1rem 2rem;
    border-radius: 1rem !important;
    transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

select.lstResellers {
    height: 30vh !important;
}

input:focus::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--active-dark);
}

input:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--active-dark);
}

input:focus::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--active-dark);
}

textarea {
    min-height: 65px;
    padding-top: 10px;
    padding-bottom: 10px;
}

input[type="search"] {
    border: none;
    font-weight: 700;
    outline: none;
    color: var(--inactive-dark);
    border-radius: calc(var(--paragraph) * 1.2) !important;
    box-shadow: none;
    box-sizing: border-box;
    background: transparent;
}

input[type="search"]:focus {
    color: var(--active-dark);
    outline: 0;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border: 1px solid var(--border-active);
    color: var(--active-dark);
    outline: 0;
}

input[type="submit"] {
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--active-dark);
    color: var(--active-light);
    cursor: pointer;
    width: 100%;
    padding: 15px;
    -webkit-appearance: none;
    transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

input[type="submit"]:hover {
    background: var(--active-dark-hover);
    color: var(--active-light);
}

@media (min-width: 734px) {
    input,
    textarea,
    select {
        font-size: var(--tablet-paragraph) !important;
    }
}

@media (min-width: 1180px) {
    input,
    textarea,
    select {
        font-size: var(--paragraph) !important;
    }
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
    list-style: none;
}

    ul.disc li {
        list-style: disc !important;
    }

    ul.number li {
        list-style: decimal;
    }

ol {
    list-style: none;
}

ol, ul {
    padding-left: 0;
    margin-top: 0;
}

li {
    margin-bottom: 0;
}

.menu ul {
    padding-left: 0;
}

.menu ul li {
    list-style: none;
}
.menu ul li:last-child {
    margin-top:3rem;
}

.post-meta li {
    list-style: none;
    font-size: calc(var(--mobile-paragraph) * 2);
    line-height: 1.2em;
}

.post-meta-key {
    display: none;
}

@media (min-width: 734px) {
    .post-meta li {
        font-size: calc(var(--tablet-paragraph) * 2);
    }
}

@media (min-width: 1180px) {
    .post-meta li {
        font-size: calc(var(--paragraph) * 2);
    }
}

/* FAQ
--------------------------------------------------- */
.topic {
    border-bottom: solid 1px var(--border);
}

.open {
    cursor: pointer;
    display: block;
    padding: 0px;
}

.expanded {
    transition: all .2s ease-in;
}

.question {
    padding-top: 2rem;
}

.answer {
    display: none;
}

.faq-t {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    display: inline-block;
    float: right;
    position: relative;
    top: -2rem;
    right: 10px;
    width: 10px;
    height: 10px;
    background: transparent;
    border-left: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    transition: all .3s ease-in-out;
}

.faq-o {
    top: -1.5rem;
    -moz-transform: rotate(-224deg);
    -ms-transform: rotate(-224deg);
    -webkit-transform: rotate(-224deg);
    transform: rotate(-224deg);
}

@media only screen and (max-width: 480px) {
    .faq-t {
        display: none;
    }

    .question {
        padding-right: 0px;
    }

    main {
        padding: 10px;
    }

    .answer {
        margin-bottom: 30px;
        padding-left: 0px;
        padding-right: 0px;
    }
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
    font-size: var(--sub-header);
    font-style: normal;
    width: 100%;
    height: fit-content;
    border-collapse: collapse;
    content: "";
    display: table;
    clear: both;
}

tr {
    width: 100%;
    height: fit-content;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

tr:first-child {
    border-top: none;
    border-bottom: 1px solid var(--border) !important;
}
.dark .price-list tr {
    border-top: 1px solid var(--inactive-light) !important;
    border-bottom: 1px solid var(--inactive-light) !important; 
}
thead {
    text-align: left;
    background: var(--white);
}

thead tr:hover, tfoot tr:hover {
    background: inherit !important;
    color: inherit !important;
    cursor: default;
}

th {
    font-family: "Lettera-Medium", serif;
    vertical-align: top;
    padding: 2rem 0;
}

td {
    padding: 1rem 0;
}

td img, th img {
    vertical-align: text-top;
}

/*th:first-child, td:first-child {
    padding-left: 6rem;
}

th:last-child, td:last-child {
    padding-right: 6rem;
}

.table-padding th:first-child, .table-padding td:first-child {
    padding-left:6rem !important;
}
.table-padding th:last-child, .table-padding td:last-child {
    padding-right:6rem !important;
}*/
.price-list {
    grid-column: 1 / 4;
}

.price-list th:nth-child(2), .price-list td:nth-child(2), .price-list th:first-child, .price-list td:first-child {
    text-align: left;
}

.price-list th:first-child, .price-list td:first-child {
    padding-left: 1rem !important;
}

.price-list th:last-child, .price-list td:last-child {
    padding-right: 1rem !important;
}

@media (min-width: 734px) {
    .price-list th:first-child, .price-list td:first-child {
        padding-left: 3rem !important;
    }

    .price-list th:last-child, .price-list td:last-child {
        padding-right: 3rem !important;
    }
}

.narrow {
    margin:-1.1rem 0;
}
.checked th:first-child, .checked td:first-child {
    width: 55px;
}

.level-0 {
    background: var(--level-0);
    color: var(--regular-dark);
}

.level-1 {
    background: var(--level-1);
    color: var(--regular-dark);
}

.level-2 {
    background: var(--level-2);
    color: var(--regular-dark);
}

.level-3 {
    background: var(--level-3);
    color: var(--regular-light);
}

.level-4 {
    background: var(--level-4);
    color: var(--regular-light);
}

.level-primary {
    background: var(--primary);
    color: var(--active-dark);
}

.clickable-row:hover {
    cursor: pointer;
}

.nugget {
    display: inline-block;
    width: var(--paragraph);
    height: var(--paragraph);
    border-radius: 99em;
    margin-left: 0.5em;
}





/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

/* Position tooltip above the element */
[data-tooltip]:after {
    position: relative;
    top: 0;
    left: 1em;
    margin: 0;
    padding: 1rem 2rem;
    border-radius: 999em !important;
    white-space: nowrap;
    background-color: var(--active-dark);
    color: var(--active-light);
    content: attr(data-tooltip);
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

td input[type="checkbox"] {
    margin-bottom: 0;
    width: var(--paragraph);
    height: var(--paragraph);
    vertical-align: bottom;
}

.left-spacing {
    margin-left: 1em;
}

.top-spacing {
    margin-top: 160px;
}

figure {
    margin: 0;
}

figcaption {
    font-size: var(--paragraph);
    color: var(--regular-dark);
}



/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
    box-sizing: border-box;
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both;
}