/****************
/* OOCSS
*****************/
/* Widths */
.contain-width, .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-right: calc(1.5rem * 0.5);
    padding-left: calc(1.5rem * 0.5);
}
.full-width { width: 100%; }
.half-width { width: 50%; }
.one-fourth-width, .one-qtr-width { width: 25%; }
.three-fourth-width, .three-qtr-width { width: 75%; }
.one-third-width { width: 33.333%; }
.two-third-width { width: 66.666%; }
.one-fifth-width { width: 20%; }
.two-fifth-width { width: 40%; }
.three-fifth-width { width: 60%; }
.four-fifth-width { width: 80%; }
.auto-width { width: auto; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Display Properties */
.display-block { display: block; }
.display-flex { display: flex; }
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-table { display: table; }
.display-table-cell { display: table-cell; }
.display-grid { display: grid; }
.overflow-hidden { overflow: hidden; }
.hide { display: none; }

/* ~ Flex Positioning ~ */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-justify-center, .flex-horz-center, .justify-content-center { justify-content: center; }
.flex-justify-right, .flex-horz-right, .justify-content-right { justify-content: flex-end; }
.flex-justify-around, .flex-horz-space-around, .justify-content-around { justify-content: space-around; }
.flex-justify-between, .flex-horz-space-between, .justify-content-between { justify-content: space-between; }
.flex-top, .flex-align-top, .flex-vert-top, .align-items-start { align-items: flex-start; }
.flex-align-center, .flex-vert-center, .align-items-center { align-items: center; }
.flex-align-bottom, .flex-vert-bottom, .align-items-end { align-items: flex-end; }
.flex-align-stretch, .flex-vert-stretch, .align-items-stretch { align-items: stretch; }
.align-content-center { align-content: center; }
.flex-self-top { align-self: flex-start; }
.flex-self-center { align-self: center; }
.flex-self-bottom { align-self: flex-end; }
.flex-self-stretch { align-self: stretch; }
.flex-grow { flex-grow: 1; flex-basis: 0; }
.flex-nowrap { flex-wrap: nowrap; }

/* Font Attributes */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
i, em, .font-italic, .italic { font-style: italic; }
.font-light, .light { font-weight: 300; }
.font-regular, .font-normal, .normal { font-weight: 400; }
strong, .font-bold, .bold { font-weight: 700; }
.font-thin, .thin { font-weight: 100; }
.small, .font-sml, .font-small {
    font-size: 0.85em;
}

/* Colors */
.acorn-color {
    color: var(--acorn);
}

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* misc */
.pointer { cursor: pointer; } /* finger pointer on hover */
.help { cursor: help; } /* question mark on hover */

/* Padding/Margins */
.p-tny { padding: 0.5rem; }
.p-sml { padding: 0.75rem; }
.p-med { padding: 1rem; }
.p-lrg { padding: 2rem; }
.p-xlrg { padding: 4rem; }
.pt-tny { padding-top: 0.5rem; }
.pt-sml { padding-top: 0.75rem; }
.pt-med { padding-top: 1rem; }
.pt-lrg { padding-top: 2rem; }
.pt-xlrg { padding-top: 4rem; }
.pr-tny { padding-right: 0.5rem; }
.pr-sml { padding-right: 0.75rem; }
.pr-med { padding-right: 1rem; }
.pr-lrg { padding-right: 2rem; }
.pr-xlrg { padding-right: 4rem; }
.pb-tny { padding-bottom: 0.5rem; }
.pb-sml { padding-bottom: 0.75rem; }
.pb-med { padding-bottom: 1rem; }
.pb-lrg { padding-bottom: 2rem; }
.pb-xlrg { padding-bottom: 4rem; }
.pl-tny { padding-left: 0.5rem; }
.pl-sml { padding-left: 0.75rem; }
.pl-med { padding-left: 1rem; }
.pl-lrg { padding-left: 2rem; }
.pl-xlrg { padding-left: 4rem; }
.px-tny { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-sml { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-med { padding-left: 1rem; padding-right: 1rem; }
.px-lrg { padding-left: 2rem; padding-right: 2rem; }
.px-xlrg { padding-left: 4rem; padding-right: 4rem; }
.py-tny { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-sml { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-med { padding-top: 1rem; padding-bottom: 1rem; }
.py-lrg { padding-top: 2rem; padding-bottom: 2rem; }
.py-xlrg { padding-top: 4rem; padding-bottom: 4rem; }
.m-tny { margin: 0.5rem; }
.m-sml { margin: 0.75rem; }
.m-med { margin: 1rem; }
.m-lrg { margin: 2rem; }
.m-xlrg { margin: 4rem; }
.mt-tny { margin-top: 0.5rem; }
.mt-sml { margin-top: 0.75rem; }
.mt-med { margin-top: 1rem; }
.mt-lrg { margin-top: 2rem; }
.mt-xlrg { margin-top: 4rem; }
.mr-tny { margin-right: 0.5rem; }
.mr-sml { margin-right: 0.75rem; }
.mr-med { margin-right: 1rem; }
.mr-lrg { margin-right: 2rem; }
.mr-xlrg { margin-right: 4rem; }
.mb-tny { margin-bottom: 0.5rem; }
.mb-sml { margin-bottom: 0.75rem; }
.mb-med { margin-bottom: 1rem; }
.mb-lrg { margin-bottom: 2rem; }
.mb-xlrg { margin-bottom: 4rem; }
.ml-tny { margin-left: 0.5rem; }
.ml-sml { margin-left: 0.75rem; }
.ml-med { margin-left: 1rem; }
.ml-lrg { margin-left: 2rem; }
.ml-xlrg { margin-left: 4rem; }
.mx-tny { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-sml { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-med { margin-left: 1rem; margin-right: 1rem; }
.mx-lrg { margin-left: 2rem; margin-right: 2rem; }
.mx-xlrg { margin-left: 4rem; margin-right: 4rem; }
.my-tny { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-sml { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-med { margin-top: 1rem; margin-bottom: 1rem; }
.my-lrg { margin-top: 2rem; margin-bottom: 2rem; }
.my-xlrg { margin-top: 4rem; margin-bottom: 4rem; }

/* Rows/Columns */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-.5 * 1.5rem);
    margin-left: calc(-.5 * 1.5rem);
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
}
.col {
    flex: 1 0 0%;
}

/** OOCSS Media Queries **/
/* Native Harvest Catering is mobile first */
@media only screen and (min-width: 768px) {
    /* Tablet Classes - Used to overwrite mobile first design */
    .tablet-show { display: initial; }
    .tablet-hide { display: none; }
}
@media only screen and (min-width: 960px) {
    /* Laptop Classes - Used to overwrite mobile first design */
    .laptop-show { display: initial; }
    .laptop-hide { display: none; }
}
@media only screen and (min-width: 1200px) {
    /* Desktop Classes - Used to overwrite mobile first design */
    .desktop-show { display: initial; }
    .desktop-hide { display: none; }
}