/*=============================================>>>>>
= Breakpoints =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Up =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Down =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Between =
===============================================>>>>>*/
/*=============================================>>>>>
= Placeholder =
===============================================>>>>>*/
/*=============================================>>>>>
= Animations =
===============================================>>>>>*/
/*=============================================>>>>>
= Ellipsis =
===============================================>>>>>*/
/*=============================================>>>>>
= Position =
===============================================>>>>>*/
/*=============================================>>>>>
= Clearfix =
===============================================>>>>>*/
/**
 * Convert font-size from px to rem with px fallback
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {@include fontSize(12px);}
 * 
 */
.col-one {
  display: flex;
  flex-flow: wrap;
  margin: 0 -10px; }
  .col-one > * {
    width: calc(100% / 1 - 20px);
    padding: 10px 10px;
    box-sizing: content-box; }
    @media (max-width: 699px) {
      .col-one > * {
        width: 100%;
        box-sizing: inherit; } }

.col-two {
  display: flex;
  flex-flow: wrap;
  margin: 0 -10px; }
  .col-two > * {
    width: calc(100% / 2 - 20px);
    padding: 10px 10px;
    box-sizing: content-box; }
    @media (max-width: 699px) {
      .col-two > * {
        width: 100%;
        box-sizing: inherit; } }

.col-three {
  display: flex;
  flex-flow: wrap;
  margin: 0 -10px; }
  .col-three > * {
    width: calc(100% / 3 - 20px);
    padding: 10px 10px;
    box-sizing: content-box; }
    @media (max-width: 1079px) {
      .col-three > * {
        width: calc(100% / 2 - 20px); } }
    @media (max-width: 699px) {
      .col-three > * {
        width: 100%;
        box-sizing: inherit; } }

.col-four {
  display: flex;
  flex-flow: wrap;
  margin: 0 -10px; }
  .col-four > * {
    width: calc(100% / 4 - 20px);
    padding: 10px 10px;
    box-sizing: content-box; }
    @media (max-width: 1079px) {
      .col-four > * {
        width: calc(100% / 2 - 20px); } }
    @media (max-width: 699px) {
      .col-four > * {
        width: 100%;
        box-sizing: inherit; } }

:root {
  --textcolor: #3F3F3F;
  --primary: #14A6AE;
  --secondary: #B34731;
  --tertiary: #F5F5F7;
  --quaternary: #E5E642;
  --quinary: #8E3E2D;
  --highlight: #328fa8;
  --primary-darker: #3ba6c4;
  --secondary-darker: #1a1a24;
  --tertiary-darker: #d8d8db;
  --highlight-darker: #3fb1d1;
  --light-grey: #F5F5F7;
  --border: #ddd;
  --font-weight-thin: 300;
  --font-weight-extra-light: 300;
  --font-weight-light: 300;
  --font-weight-regular: 300;
  --font-weight-medium: 300;
  --font-weight-semi-bold: 700;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 700;
  --font-weight-black: 700;
  --font-one: Poppins;
  --font-two: Poppins;
  --font-three: Poppins;
  --wrap-large: 1940px;
  --wrap-regular: 1600px;
  --wrap-small: 1024px;
  --wrap-very-small: 640px; }

a.action, button.action {
  background-color: var(--primary);
  color: white;
  padding: 1em 2em;
  line-height: 160%;
  font-weight: var(--font-weight-semi-bold);
  display: inline-block;
  transition: ease-in-out 0.3s background-color;
  text-decoration: none;
  border-radius: 3px;
  margin-bottom: 5px;
  border: none; }
  a.action:hover, button.action:hover {
    background-color: var(--highlight);
    color: white;
    text-decoration: none; }

/*# sourceMappingURL=theme-variables.css.map */