* {
    border: 0;
    font: inherit;
    margin: 0;
    padding: 0;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html {
    box-sizing: border-box;
    font-size: 62.5%;
    height: 100%;
}
@media screen and (min-width: 960px) {
    html {
        font-size: 78.125%;
    }
}
body {
    box-sizing: border-box;
    color: #3c3c3d;
    font-family: "Open Sans", sans-serif;
    font-size: 1.3rem;
    line-height: 2.4rem;
    min-height: 100%;
    position: relative;
    overflow-x:hidden;
}
h1 {
    font-family: "Lato", sans-serif !important;
    font-weight: 100;
}
h2, h3, h4, h5, h6 {
    font-family: "Lato", sans-serif !important;
    font-weight: 400;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited h6 a:visited, h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link h6 a:link {
  text-decoration: none;
  color: rgba(72, 72, 72, 0.99);
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover h6 a:hover {
  text-decoration: none;
  color: #4076D4;
}
h1 {
    line-height: 7rem;
    padding: .8rem 0 1.6rem;
}
h2, h3 {
    line-height: 4.8rem;
    padding: .8rem 0 1.6rem;
}
h4, h5, h6 {
    padding: 2.4rem 0;
}
h1 {
    font-size: 4rem;
}
h2 {
    font-size: 3.2rem;
}
h3 {
    font-size: 2.8rem;
}
h4 {
    font-size: 2.4rem;
}
h5 {
    font-size: 1.8rem;
}
h6 {
    font-size: 1.6rem;
}
p {
    padding-bottom: 2.4rem;
}
form {
    padding: 2.4rem 0;
}
pre, code, samp, kbd {
    background-color: #efeff0;
    font-size: 1.2rem;
    color: #e528b0;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    line-height: 1;
}
code, samp, kbd {
    border-radius: 2px;
    overflow-y: hidden;
    overflow-x: auto;
    padding: .4rem .4rem .2rem;
}
pre {
    border-radius: 2px;
    line-height: 2.4rem;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 1.2rem 1rem;
    margin: 0 0 2.4rem;
}
pre code, pre samp, pre kbd {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
a:link {
    color: #4076D4;
}
a:visited {
    color: #9140D4;
}
a:hover, a:focus {
    color: #2e68cc;
}
a:active {
    color: #D44076;
}
img, video {
    max-width: 100%;
    display: table;
}
hr {
    height: 4.8rem;
    margin-bottom: 2.4rem;
    position: relative;
}
hr:before {
    background-color: #cdcdce;
    content: '';
    height: 1px;
    position: absolute;
    top: 50%;
    width: 100%;
}
ol, ul {
    margin-left: 2rem;
    padding: 0 0 2.4rem;
}
ol {
    list-style-type: decimal;
}
ol ol {
    padding-bottom: 0;
}
ul {
    list-style-type: disc;
}
ul ul {
    padding-bottom: 0;
}
dt {
    font-style: italic;
}
dd {
    text-indent: 2rem;
}
blockquote {
    margin: 0 0 2.4rem 1.2rem;
    border-left: 0.3rem solid #cdcdce;
    padding: 2.4rem 1.2rem;
}
blockquote p:last-child {
    padding-bottom: 0;
}
figure {
    margin: 0 auto;
    padding-bottom: 2.4rem;
}
figure img {
    display: table;
    margin: 0 auto;
}
small, sub, sup {
    font-size: 1.2rem;
    line-height: 1;
}
caption, figcaption {
    font-size: 1.2rem;
    font-style: italic;
    text-align: center;
}
em, cite, i {
    font-style: italic;
}
strong, var, b {
    font-weight: bold;
}
q:before {
    content: "'";
}
q:after {
    content: "'";
}
q > q {
    font-style: italic;
}
dfn, abbr {
    border-bottom: 0.1rem dotted #5a5a5b;
    cursor: default;
}
table {
    border-radius: 2px;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 2.4rem;
    width: 100%;
}
table th {
    font-weight: 500;
    text-align: left;
}
table th, table td {
    padding: 0 .6rem;
}
label {
    color: #7d7d7e;
}
input, label, select, button, textarea {
    display: block;
    resize: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* remove yellow from chrome auto-fill background */

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    color: #3c3c3d;
    -webkit-text-fill-color: #3c3c3d;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/*

Utilities

These utility classes have one or two CSS properties that are meant to save you from creating several identical classes to do the same thing, like just centering some text.

Markup:
<div class="{{modifier_class}}" style="background-color: #ddd">
  Example Text
</div>

.disabled                 - Disable an Element
.clearfix                - Clear floats to keep the parent container in shape
.f-none                  - float: none;
.f-left                  - float: left;
.f-right                  - float: right;
.ta-left                 - text-align: left;
.ta-center                - text-align: center;
.ta-right                - text-align: right;

Styleguide 4.0

*/

.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.f-none {
    float: none;
}
.f-left {
    float: left;
}
.f-right {
    float: right;
}
.clearfix {
    clear: both;
    overflow: hidden;
}
.ta-left {
    text-align: left;
}
.ta-center {
    text-align: center;
}
.ta-right {
    text-align: right;
}

/*

Type Utilities

These are specific typography related utilities

Markup:
<div class="type {{modifier_class}}">
  The quick brown fox jumps over the lazy dog.
</div>

.fs-small            - Smaller than the default font size
.fs-base              - Exactly the default font size
.fs-large            - Larger than the default font size
.fw-light            - Changes the type to be 300 weight
.fw-normal           - Changes the type to be 400 weight
.fw-semibold         - Changes the type to be 500 weight
.fw-bold             - Changes the type to be 600 weight

Styleguide 4.1

*/

.fs-small {
    font-size: 1.2rem;
}
.fs-base {
    font-size: 1.6rem;
}
.fs-large {
    font-size: 2rem;
}
.fw-light {
    font-weight: 300;
}
.fw-normal {
    font-weight: 400;
}
.fw-semibold {
    font-weight: 500;
}
.fw-bold {
    font-weight: 600;
}

/*

Buttons

Buttons and their variations

Markup:
<a href="#" class="btn {{modifier_class}}">Button</a>

.btn--secondary       - A link that's sized like a button
.btn--link            - A link that's sized like a button

Styleguide 2.0

*/
.btn {
  font-family: "Lato", sans-serif;

}
.btn--outline, .wpcf7-submit {
  transition: all 200ms ease;
}
.btn--outline {
    background-color: transparent;
    border: solid 2px #fff;
    border-radius: .2rem;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    height: 5rem !important;
    line-height: 0;
    max-width: 100%;
    margin: 0 auto;
    margin-right:1em;
    padding: 0 3rem;
    text-align: center;
    width: auto;
    margin-right:10px !important;
    font-weight: bold;
}
.btn--outline-green, .wpcf7-submit {
    background-color: transparent;
    border: solid 2px #20ffae;
    border-radius: .2rem;
    box-sizing: border-box;
    color: #20ffae !important;
    cursor: pointer;
    display: inline-block;
    height: 5rem !important;
    line-height: 0;
    max-width: 100%;
    margin: 0 auto;
    margin-right:1em;
    padding: 0 3rem;
    text-align: center;
    width: auto;
    margin-right:10px !important;
    font-weight: bold;
}
.btn--outline:hover, .wpcf7-submit:hover, .btn--outline-green:hover {
    border: solid 2px #20ffae;
    background-color: #20ffae;
    color: #000 !important;
    -webkit-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
    transition-timing-function: ease-in-out;
    -webkit-transform: translateY(-5%);
        -ms-transform: translateY(-5%);
            transform: translateY(-5%);
    transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.btn--outline:active, submit:active {
    opacity: .5;
    color: #20ffae !important;
}
.btn, [type=button], [type=submit], button, submit {
    border-radius: .2rem;
    box-sizing: border-box;
    /*color: #ffffff;*/
    cursor: pointer;
    display: inline-block;
    height: 4.8rem;
    line-height: 4.8rem;
    max-width: 100%;
    transition-property: background-color;
    transition-duration: 200ms;
    margin: 0 auto;
    padding: 0 3rem;
    text-align: center;
    width: auto;
    text-transform: uppercase;
}
.btn:link, [type=button]:link, [type=submit]:link, button:link, .btn:visited, [type=button]:visited, [type=submit]:visited, button:visited {
    color: #ffffff;
    text-decoration: none;
}
.btn:focus, [type=button]:focus, [type=submit]:focus, button:focus {
    outline: 0.1rem dotted #7d7d7e;
}
.btn:active, [type=button]:active, [type=submit]:active, button:active {
    background-color: transparent;
}
.btn--secondary {
    background-color: #efeff0;
    color: #3c3c3d;
}
.btn--secondary:link, .btn--secondary:visited {
    color: #3c3c3d;
}
.btn--secondary:focus, .btn--secondary:hover {
    background-color: #dededf;
    color: #3c3c3d;
}
.btn--secondary:active {
    color: #7d7d7e;
}
.btn--link {
    background-color: transparent;
    color: #4076D4;
    text-decoration: underline;
}
.btn--link:link {
    color: #4076D4;
}
.btn--link:visited {
    color: #9140D4;
}
.btn--link:focus, .btn--link:hover {
    color: #2e68cc;
    background-color: transparent;
}
.btn--link:active {
    color: #000;
    background-color: transparent;
}
button {
  text-transform: uppercase;
  font-family: "Arimo" sans-serif;
  font-weight: 700;
}
/*

Forms

Markup:
<form>
  <label class="textfield">
    <input type="text" />
    <span class="textfield__label">Name</span>
  </label>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Desktop</span>
  </label>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Mobile</span>
  </label>
  <label class="select">
    <select name="select">
      <option disabled="disabled" selected="selected">Flavors</option>
      <option>Chocolate</option>
    </select>
    <span class="select__label" for="select">Favorite Ice Cream</span>
  </label>
  <label class="textfield">
    <textarea></textarea>
    <span class="textfield__label">Comments</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" />
    <span class="checkbox__label">I Lied</span>
  </label>
  <br/>
  <input type="submit" value="Cross My Heart" />
</form>

Styleguide 3.0

*/

.radio, .checkbox {
    cursor: pointer;
    display: inline-block;
    margin-bottom: 2.4rem;
    padding: 0 1rem 0 3rem;
    position: relative;
}
.radio:before, .checkbox:before {
    background-color: #fff;
    border: 2px solid #7d7d7e;
    content: '';
    height: 16px;
    left: 0;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.checkbox input[type=checkbox], .radio input[type=radio] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}
.radio__label, .checkbox__label {
    color: #7d7d7e;
    font-size: 1.2rem;
    line-height: 1;
}
.radio__label:after, .checkbox__label:after {
    border: 1px solid transparent;
    content: '';
    height: 18px;
    left: 0;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    width: 18px;
}
.radio input[type=radio]:focus + .radio__label:after, .checkbox input[type=checkbox]:focus + .checkbox__label:after {
    border-color: #E83FB8;
    box-shadow: 0 1px 2px 1px #dededf inset;
}
.textfield, .select {
    background-color: #ffffff;
    display: block;
    margin-top: -2px;
    margin-bottom: 2.4rem;
    position: relative;
}
.textfield__label, .select__label {
    font-size: 1.2rem;
    position: absolute;
    left: 1px;
    line-height: 1;
    padding: .5rem;
    right: 1px;
    top: 1px;
}
.textfield input, .textfield textarea, .select select {
    background-color: transparent;
    border: 1px solid #7d7d7e;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 1.8rem .5rem .6rem;
    position: relative;
    width: 100%;
    z-index: 100;
}
.textfield *:focus, .select select:focus {
    border-color: #E83FB8;
    box-shadow: 0 1px 2px 0 #dededf inset;
    outline: none;
}
.textfield *[disabled], .select *[disabled] {
    background-color: #efeff0;
    color: #5a5a5b;
}

/*

Radio

Markup:
<label class="radio {{modifier_class}}">
  <input type="radio" />
  <span class="radio__label">Radio</span>
</label>

Styleguide 3.1

*/

.radio:before, .radio__label:after {
    border-radius: 20px;
}
.radio input[type=radio]:checked + .radio__label:before {
    background-color: #e528b0;
    border-radius: 20px;
    content: '';
    height: 10px;
    left: 5px;
    margin-top: -5px;
    position: absolute;
    top: 50%;
    width: 10px;
}

/*

Checkbox

Markup:
<label class="checkbox {{modifier_class}}">
  <input type="checkbox" />
  <span class="checkbox__label">Checkbox</span>
</label>

Styleguide 3.2

*/

.checkbox:before, .checkbox__label:after {
    border-radius: 2px;
}
.checkbox input[type=checkbox]:checked + .checkbox__label:after {
    color: #e528b0;
    content: '\2714';
    font-size: 14px;
    line-height: 18px;
    text-align: center;
}

/*

Input and text areas

Markup:
<label class="textfield {{modifier_class}}">
  <input type="text" />
  <span class="textfield__label">Input</span>
</label>
<label class="textfield {{modifier_class}}">
  <textarea></textarea>
  <span class="textfield__label">Textarea</span>
</label>

Styleguide 3.3

*/


/*

Select

Markup:
<label class="select {{modifier_class}}">
  <select>
    <option disabled="disabled" selected="selected">Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <span class="select__label">Select Label</span>
</label>

Styleguide 3.4

*/

.select:after {
    content: '';
    border-left: .6rem solid transparent;
    border-right: .6rem solid transparent;
    border-top: 0.6rem solid #7d7d7e;
    height: 0;
    margin-top: -.5rem;
    position: absolute;
    right: 1rem;
    bottom: 1.3rem;
    width: 0;
}

/*

Grid

Basic grid made using flexbox. By default, the grid is collapsed on small screens.

Markup:
<main class="grid {{modifier_class}}">
  <section class="">
    Cell 1
  </section>
  <article class="grid">
    Cell 2
  </article>
</main>

.grid--medium           - Grid starts at medium sized screens
.grid--large            - Grid starts at large and up screens

Styleguide 1.0

*/


/*

Direct children of `.grid` are columns.

Markup:
<main class="grid">
  <section class="{{modifier_class}}">
    Cell 1
  </section>
  <article class="grid">
    <p class="grid {{modifier_class}}">
      Cell 2.1
    </p>
    <div>
      <p>Cell 2.2</p>
    </div>
  </article>
</main>

.column--light           - Less important column
.column--heavy           - More important column

Styleguide 1.1

*/

.grid {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.grid > * {
    flex: 1;
    -webkit-flex-grow: 4;
    -moz-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
    padding-left: 1rem;
    padding-right: 1rem;
}
.grid > *:first-child {
    margin-left: -1rem;
}
.grid > *:last-child {
    margin-right: -1rem;
}
.grid > *.column--light {
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-grow: 2;
    flex-grow: 2;
}
.grid > *.column--heavy {
    -webkit-flex-grow: 8;
    -moz-flex-grow: 8;
    -ms-flex-grow: 8;
    flex-grow: 8;
}
@media (max-width: 599px) {
    .grid--medium {
        display: block;
    }
    .grid--medium > * {
        padding-left: 0;
        padding-right: 0;
    }
    .grid--medium > *:first-child {
        margin-left: 0;
    }
    .grid--medium > *:last-child {
        margin-right: 0;
    }
}
@media (max-width: 959px) {
    .grid--large {
        display: block;
    }
    .grid--large > * {
        padding-left: 0;
        padding-right: 0;
    }
    .grid--large > *:first-child {
        margin-left: 0;
    }
    .grid--large > *:last-child {
        margin-right: 0;
    }
}

/*

Wrappers

Use wrappers when you need a content area that is a standardized width and centered on the page.

Markup:
<div class="wrapper {{modifier_class}}">Wrapper</div>

.wrapper-small      - Small Wrapper
.wrapper-large      - Large Wrapper
.wrapper-full      - Full Width Wrapper

Styleguide 1.2

*/

.wrapper {
    margin: 0 auto;
    max-width: 960px;
    padding: 4.8rem 2rem;
}
.wrapper-large {
    margin: 0 auto;
    max-width: 1200px;
    padding: 2rem 2rem;
}
.wrapper-small {
    margin: 0 auto;
    max-width: 640px;
    padding: 2.4rem 2rem;
}
.wrapper-full {
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
}
.wrapper-large-nopad {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 2rem;
}
.wrapper-bottom {
  padding-bottom: 5em;
}

/*# sourceMappingURL=cutestrap.css.map */


/* Colors and utilities from Furtive */

.bg--red {
    background-color: #e74c3c;
}
.bg--orange {
    background-color: #f39c12;
}
.bg--blue {
    background-color: #487fbe;
}
.bg--green {
    background-color: #20ffae;
}
.bg--white {
    background-color: #fff;
}
.bg--light-gray {
    background-color: rgba(216, 216, 216, 0.99);
}
.bg--mid-gray {
    background-color: rgba(144, 144, 144, 0.99);
}
.bg--dark-gray {
    background-color: rgba(72, 72, 72, 0.99);
}
.bg--off-white {
    background-color: rgba(250, 250, 250, 0.99);
}
.bg--black {
    background: #000;
}
.fnt--red {
    color: #e74c3c;
}
.fnt--orange {
    color: #f39c12;
}
.fnt--blue {
    color: #487fbe;
}
.fnt--green {
    color: #20ffae;
}
.fnt--white {
    color: #fff;
}
.fnt--light-gray {
    color: rgba(216, 216, 216, 0.99);
}
.fnt--mid-gray {
    color: rgba(144, 144, 144, 0.99);
}
.fnt--dark-gray {
    color: rgba(72, 72, 72, 0.99);
}
.fnt--off-white {
    color: rgba(250, 250, 250, 0.99);
}
.fnt--underline {
    text-decoration: underline;
}
.fnt--bold {
  font-weight: bold;
}
.m0 {
    margin: 0;
}
.mx0 {
    margin-left: 0;
    margin-right: 0;
}
.my0 {
    margin-top: 0;
    margin-bottom: 0;
}
.m1 {
    margin: 1rem;
}
.mx1 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.my1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.m2 {
    margin: 2rem;
}
.mx2 {
    margin-left: 2rem;
    margin-right: 2rem;
}
.my2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.p0 {
    padding: 0;
}
.px0 {
    padding-left: 0;
    padding-right: 0;
}
.py0 {
    padding-top: 0;
    padding-bottom: 0;
}
.p1 {
    padding: 1rem;
}
.px1 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.p2 {
    padding: 2rem;
}
.px2 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
pre, code {
    font-family: "Monaco", "Lucida Console", Courier, monospace;
}
.italic {
    font-style: italic;
}
.thin {
    font-weight: 100;
}
.bold {
    font-weight: bold;
}
.caps, table th {
    font-variant: small-caps;
}
.justify {
    text-align: justify;
}
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.muted {
    opacity: 0.7;
}