/* Grid

Green - #387512 - 387512
Black - #272726 - 272726
Blue - #004A82 - 004A82
Red - #C24413 - C24413

–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

var {
    font-style: normal;
}

.col, .cols {
    width: 100%;
    float: left;
    box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: 400px) and(max-width: 600px) {
    .container {
        width: 85%;
        padding: 0;
        max-width: 400px;
    }
}

/* For devices larger than 800px */
@media (min-width: 800px) {
    .container {
        width: 80%;
    }

    .col, .cols {
        margin-left: 4%;
    }

    .col:first-child, .cols:first-child {
        margin-left: 0;
    }

    .one.col, .one.cols {
        width: 4.66666666667%;
    }

    .two.cols {
        width: 13.3333333333%;
    }

    .three.cols {
        width: 22%;
    }

    .four.cols {
        width: 30.6666666667%;
    }

    .five.cols {
        width: 39.3333333333%;
    }

    .six.cols {
        width: 48%;
    }

    .seven.cols {
        width: 56.6666666667%;
    }

    .eight.cols {
        width: 65.3333333333%;
    }

    .nine.cols {
        width: 74.0%;
    }

    .ten.cols {
        width: 82.6666666667%;
    }

    .eleven.cols {
        width: 91.3333333333%;
    }

    .twelve.cols {
        width: 100%;
        margin-left: 0;
    }

    .one-third.col {
        width: 30.6666666667%;
    }

    .two-thirds.col {
        width: 65.3333333333%;
    }

    .one-half.col {
        width: 48%;
    }/* Offsets */

    .offset-by-one.col, .offset-by-one.cols {
        margin-left: 8.66666666667%;
    }

    .offset-by-two.col, .offset-by-two.cols {
        margin-left: 17.3333333333%;
    }

    .offset-by-three.col, .offset-by-three.cols {
        margin-left: 26%;
    }

    .offset-by-four.col, .offset-by-four.cols {
        margin-left: 34.6666666667%;
    }

    .offset-by-five.col, .offset-by-five.cols {
        margin-left: 43.3333333333%;
    }

    .offset-by-six.col, .offset-by-six.cols {
        margin-left: 52%;
    }

    .offset-by-seven.col, .offset-by-seven.cols {
        margin-left: 60.6666666667%;
    }

    .offset-by-eight.col, .offset-by-eight.cols {
        margin-left: 69.3333333333%;
    }

    .offset-by-nine.col, .offset-by-nine.cols {
        margin-left: 78.0%;
    }

    .offset-by-ten.col, .offset-by-ten.cols {
        margin-left: 86.6666666667%;
    }

    .offset-by-eleven.col, .offset-by-eleven.cols {
        margin-left: 95.3333333333%;
    }

    .offset-by-one-third.col, .offset-by-one-third.cols {
        margin-left: 34.6666666667%;
    }

    .offset-by-two-thirds.col, .offset-by-two-thirds.cols {
        margin-left: 69.3333333333%;
    }

    .offset-by-one-half.col, .offset-by-one-half.cols {
        margin-left: 52%;
    }
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 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%;
}

body, body.mceContentBody, .mceContentBody table, .mceContentBody td {
    font-size: 1.7em;
    /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.4;
    font-weight: 400;
    font-family: 'ibm-plex-sans', sans-serif;
    color: #323232;
}

body.mceContentBody, .mceContentBody table, .mceContentBody td {
    font-size: 17px;
}

body.mceContentBody img {
    display: block;
    max-width: 100%;
    border-radius: .25rem;
    position: relative;
    border: 1px solid #e5e5e5;
}

.mceContentBody {
    margin: 5px;
    background-image: none;
    background-color: #fff
}

.mceContentBody a {
    color: #387512;
    opacity: 1;
    text-decoration: none;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 2rem;
    color: #323232;
    line-height: 1;
    font-weight: 400;
    font-family: 'ibm-plex-sans', sans-serif;
}

h1, h2, h3 {
    font-size: 3rem;
    margin-bottom: 2rem;
}

h1 b, h2 b, h3 b {
    font-size: 3rem;
    margin-bottom: 2rem;
}

h1, h1.pagename {
    font-size: 4rem;
    line-height: 0.9 !important;
    letter-spacing: .2rem;
    font-family: 'atrament-web', sans-serif;
    text-transform: uppercase;
}

.banner h2 {
    color: #387512;
}

/* Larger than mobile */
@media (min-width: 1100px) {
    h1, h1.pagename {
        font-size: 6rem;
    }
}

.font-heading {
    font-family: 'atrament-web', sans-serif;
    line-height: 0.9 !important;
}

.banner-wrap h2 {
    font-size: 4rem;
    line-height: 0.9 !important;
    letter-spacing: .2rem;
    font-family: 'atrament-web', sans-serif;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 1rem;
}

.main h1 a, .main h2 a, .main h3 a, .main h4 a, .main h5 a, .main h6 a {
    color: #C24413;
}

.main h1 a:hover, .main h2 a:hover, .main h3 a:hover, .main h4 a:hover, .main h5 a:hover, .main h6 a:hover {
    text-decoration: none;
    opacity: 0.7;
}

h4 {
    font-size: 2rem;
}

h5 {
    font-size: 2rem;
}

h6 {
    font-size: 1.7rem;
}

p {
    margin-top: 0;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.main a, .home-content a {
    color: #387512;
    opacity: 1;
    text-decoration: none;
    transition: opacity ease 0.3s;
}

.main a:hover, .home-content a:hover {
    opacity: 0.7;
    text-decoration: none;
}

.main iframe {
    max-width: 100%;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, a.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block;
    padding: .7rem 3rem;
    color: #fff !Important;
    margin: .5rem 0;
    text-align: center;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: normal;
    background: #387512;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
    letter-spacing: .2rem;
    transition: all ease 0.3s;
    font-family: atrament-web, sans-serif;
    clip-path: polygon(12.5px 0, 100% 0%, calc(100% - 12.5px) 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 12.5px), calc(100% - 12.5px) 100%, 0% 100%);
    font-size: 2rem;
    opacity: 1 !important;
    text-decoration: none !important;
}

.button-large {
    padding: 2rem 3rem;
}

.button:hover, a.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
    background: #272726;
    outline: 0;
    text-decoration: none;
}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
    padding: 1rem;
    /* The 6px vertically centers text on FF, ignored by Webkit */
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: none;
    line-height: 1.2;
    box-sizing: border-box;
    color: #272726;
    border: 2px solid transparent;
    margin: 0;
    margin-bottom: 1rem;
    width: 100%;
    min-width: 240px;
    max-width: 50vw;
    transition: border ease 0.3s;
}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

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

input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    border: 2px solid #387512;
    outline: 0;
}

select {
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* select arrow */
select {
    background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-position: calc(100% - 20px), calc(100% - 15px), 100% 0;
    background-size: 5px 5px, 5px 5px, 40px 100%;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.1);
}

.schedule-wrap select {
    color: #fff;
}

::-webkit-input-placeholder, ::-moz-placeholder, ::-ms-input-placeholder, ::-moz-placeholder {
    color: #828282;
}

label, legend {
    display: block;
}

fieldset {
    padding: 0;
    border-width: 0;
}

input[type="checkbox"], input[type="radio"] {
    display: inline;
}

label > .label-body {
    display: inline-block;
    margin-left: .5rem;
    font-weight: normal;
}

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul, ol {
    margin: 0;
    margin-left: 20px;
    padding: 0;
    margin-bottom: 20px
}

ul {
}

ol {
    list-style: decimal
}

li {
    margin-bottom: 0;
    margin-left: 0;
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
    padding: .2rem .5rem;
    margin: 0 .2rem;
    font-size: 90%;
    white-space: nowrap;
    background: #F1F1F1;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
}

pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th, td {
    padding: 0px 1rem;
    text-align: left;
    vertical-align: top;
}

th:first-child, td:first-child {
    padding-left: 0;
}

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

strong {
    font-weight: 700;
    color: #387512;
}

/* Smaller than phablet (also point when grid becomes active) */
@media (max-width: 1000px) {
    .main td {
        display: block;
        padding: 0;
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button {
    margin-bottom: 1rem;
}

input, textarea, select, fieldset {
    margin-bottom: 1.5rem;
}

pre, blockquote, dl, figure, table, p, ul, ol, form {
    margin-bottom: 2.5rem;
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
    width: 100%;
    box-sizing: border-box;
}

.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;
}

.u-pull-right {
    float: right;
}

.u-pull-left {
    float: left;
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
    margin-top: 3rem;
    margin-bottom: 3rem;
    border-width: 0;
    border-top: 1px solid #B3C1A4;
}

/* Slider Fix for Chrome */
.owl-carousel .owl-wrapper, .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
}

.fc-tbx table td {
    margin: 0;
    padding: 0;
    border: 0;
}

.call-to-action {
}

.call-out {
    margin: 4rem 0;
}

.footer-cta {
}

.grid-layout {
    display: block;
}

.green-text {
    color: #387512;
}

.orange-text {
    color: #C24413;
}

.input-error, .input-error:focus {
    border: 2px solid #d7490a !important;
    color: #d7490a
    background: rgba(215, 73, 10, 0.1) !important;
}

.input-error-msg {
    position: relative;
    background: #d7490a;
    color: #fff;
    padding: .25rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    max-width: max-content;
    align-items: center;
    justify-content: center;
    height: 3rem;
    font-size: 90%;
}

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

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
@media (min-width: 400px) {
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 800px) {
}

/* Larger than desktop */
@media (min-width: 1000px) {
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
}