::after, ::before, * {
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p, a {
    font-family: var(--font-family-lato), sans-serif;
}
h1, h2, h3, h4 {
    color: var(--green-blue);
}
h2 {
    font-size: 24px;
}
h3 {
    font-size: 20px;
}
a {
    color: var(--green-blue);
}
body {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    font-size: 14px;
}
video {
    width: 100%;
    height: auto;
}
body p {
    color: var(--ship-gray);
}
header {
    grid-column: 1 / 3;
    margin-top: 1em;
}
h1 {
    color: var(--green-blue);
    font-size: 32px;
}
.smart-trips_logo {
    min-width: 200px;
}
img {
    display: block;
    width: 100%;
}
.img {
    display: block;
    width: 100%;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.base {
    background-color: var(--citrus);
    min-height: 13px;
    max-height: 13px;
    /*original*/
    /*width: 100%;*/

    /*updated properties to make the green bar the full size of the
    screen, overriding the max-width of the body element*/
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}
.base_bottom {
    background-color: var(--citrus);
    min-height: 13px;
    max-height: 13px;
    /*original*/
    /*width: 100%;*/

    /*updated properties to make the green bar the full size of the
    screen, overriding the max-width of the body element*/
    position: relative;
    width: 100vw;
    left: 50%;

    transform: translateX(-50%);
}
.grid {
    display: grid;
}
.grid-two-column {
    grid-template-columns: 1fr;
    padding: .5em;
}
/*#####################################*/
/*###### CUSTOM BULLETS FOR UL across site ######*/
/*#####################################*/
.custom-bullets {
    list-style: none;
    margin:0;
    padding: 0;
}
.custom-bullets li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 8px;
}
.custom-bullets li::before {
    font-family: var(--font-family-lato), sans-serif;
    content: ">";
    font-weight: bold !important;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    color: var(--green-blue);
    /*border-top: 10px solid transparent;*/
    /*border-left: 10px solid var(--green-blue);*/
    /*border-bottom: 10px solid transparent;*/
}
.custom-bullets li a {
    text-decoration: none;
    font-weight: bold;
}

.custom-unordered-list-type-1 {
    margin: 0;
    padding: 0;
}
.custom-unordered-list-type-1 li {
    text-indent: 2em;
}
/*#####################################*/


.grid-two-column {
    grid-template-columns: 1fr;
}
.two-col-span {
    grid-column: 1 / 3;
}

/*###### TEXT SIZE ######*/

.text-small {
    font-size: var(--font-size-s);
}
.text-medium {
    font-size: var(--font-size-m);
}
.text-large {
    font-size: var(--font-size-l);
}
.text-x-large {
    font-size: var(--font-size-xl);
}
.text-xx-large {
    font-size: var(--font-size-xxl);
}
.text-xxx-large {
    font-size: var(--font-size-xxxl);
}
.text-xxxx-large {
    font-size: var(--font-size-xxxxl);
}
/*
    --font-size-xxs: 9px;
    --font-size-xs: 12px;
    --font-size-s: 13.5px;
    --font-size-m: 14px;
    --font-size-l: 15px;
    --font-size-xl: 16px;
    --font-size-xlm: 17px;
    --font-size-xxl: 20px;

*/


/*###### TEMP COLORS ######*/
.background-red {
    background-color: #f00;
}
.background-blue {
    background-color: #00F;
}
.background-green {
    background-color: #0f0;
}
.text-color-black {
    color: #000;
}
.text-color-red {
    color: #f00;
}
.text-color-blue {
    color: #00f;
}
.text-color-green {
    color: #0f0;
}
.text-green-blue {
    color: var(--green-blue);
}
.text-citrus {
    color: #a1c11e;
}
.text-light-gray {
    color: #dedede;
}
.text-medium-gray {
    color: #aaa;
}
.text-gray {
    color: #888;
}
.text-dark-gray {
    color: #444;
}
.notes {
    color: var(--citrus);
}
.page-title {
    padding-left: .4em;
}
.font-size-xlm {
    font-size: var(--font-size-xlm)
}
.hr-border-1 {
    border: var(--hr-border-style-gray-30);
}
.active {
    color: var(--finn);
}
/*######################  MEDIA QUERIES  ###########################*/
/*######################  MEDIA QUERIES  ###########################*/
/*######################  MEDIA QUERIES  ###########################*/


@media screen and (min-width: 768px) {
    .grid-two-column {
        grid-template-columns: 1fr;
    }
    .wrapper {
        margin-left: 5em;
        margin-right: 5em;
    }
}
@media screen and (min-width: 992px) {
    .grid-two-column {
        grid-template-columns: 1fr 1fr;
    }


}/*END DESKTOP*/
@media screen and (min-width: 1200px) {

}/*END DESKTOP*/