/*------------------------------------*\
BASE
\*------------------------------------*/

/**
* Box-sizing
*/

* { box-sizing: border-box; }

/**
 * Typography
 */

/*
  - Please set up line-heights in ems
  - Set up typography styling based on styles found in .xd file under Assets > Character Styles
  */

body {
    font-family: 'DM Sans', sans-serif;
  height: 100vh;
  overflow-anchor: none;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  color: #414141;
  font-size:16px;
  line-height: 1.5em;
}

h1, .h1 {
    color: #ab202d;
    font-size: 2.5rem;
    line-height: 2.75rem;
    margin-top: 0;
    margin-bottom: 16px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

h2, .h2 {
}

h3, .h3 {
}

h4, .h4 {
}

p, ul, ol {
}

ul li {
  /* set up bullets as a :before or icon element, not as a background image */
}

hr {
}

a {
    word-break: break-word;
    background: linear-gradient(to bottom,#ffdf01 0%, #ffdf01 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 4px;
    text-decoration: none;
    transition: background-size .2s;
    color: #630001;
    font-weight: 700;
    padding: 0 4px;
    transition: all .2s ease-in-out;
}

    a:hover {
      background-size: 4px 50px;
    }

      /**
       * Wrappers
       */

      .container,
      .container-fluid {
          margin-right: auto;
          margin-left: auto;
          padding-left: 22px; /* TODO: Default grid. Update if different in prototypes. */
          padding-right: 22px;
      }

      .container {
        max-width: 1366px;
      }


      /**
       * Grid System
       *
       * Bootstrap v3.3.1 (http://getbootstrap.com)
       * Copyright 2011-2014 Twitter, Inc.
       * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
       * --------------------------------------------------------------------------
       * Base setup 20px gutters
       *
       * Phones         - xxs - <  600px    ** Default **
       * Small Tablets  - xs - >=  600px
       * Tablets        - sm - >= 768px
       * Desktop        - md - >= 1025px
       * Large Desktop  - lg - >= 1200px
       * --------------------------------------------------------------------------
       * Learn more here: http://getbootstrap.com/css/#grid
       * -------------------------------------------------------------------------- */

      .row {
          margin-left: -16px; /* TODO: Default grid. Update if different in prototypes. */
          margin-right: -16px;
      }

          [class*="col-"] {
              position: relative;
              min-height: 1px;
              padding-left: 16px; /* TODO: Default grid. Update if different in prototypes. */
              padding-right: 16px;
          }

      /* Extra Extra small devices (devices, less than 600px) */
      [class*="col-xxs-"] { float:left; }

      .col-xxs-12 { width: 100%; }
      .col-xxs-11 { width: 91.66666667%; }
      .col-xxs-10 { width: 83.33333333%; }
      .col-xxs-9  { width: 75%; }
      .col-xxs-8  { width: 66.66666667%; }
      .col-xxs-7  { width: 58.33333333%; }
      .col-xxs-6  { width: 50%; }
      .col-xxs-5  { width: 41.66666667%; }
      .col-xxs-4  { width: 33.33333333%; }
      .col-xxs-3  { width: 25%; }
      .col-xxs-2  { width: 16.66666667%; }
      .col-xxs-1  { width: 8.33333333%; }

      .col-xxs-pull-12 { right: 100%; }
      .col-xxs-pull-11 { right: 91.66666667%; }
      .col-xxs-pull-10 { right: 83.33333333%; }
      .col-xxs-pull-9  { right: 75%; }
      .col-xxs-pull-8  { right: 66.66666667%; }
      .col-xxs-pull-7  { right: 58.33333333%; }
      .col-xxs-pull-6  { right: 50%; }
      .col-xxs-pull-5  { right: 41.66666667%; }
      .col-xxs-pull-4  { right: 33.33333333%; }
      .col-xxs-pull-3  { right: 25%; }
      .col-xxs-pull-2  { right: 16.66666667%; }
      .col-xxs-pull-1  { right: 8.33333333%; }
      .col-xxs-pull-0  { right: auto; }

      .col-xxs-push-12 { left: 100%; }
      .col-xxs-push-11 { left: 91.66666667%; }
      .col-xxs-push-10 { left: 83.33333333%; }
      .col-xxs-push-9  { left: 75%; }
      .col-xxs-push-8  { left: 66.66666667%; }
      .col-xxs-push-7  { left: 58.33333333%; }
      .col-xxs-push-6  { left: 50%; }
      .col-xxs-push-5  { left: 41.66666667%; }
      .col-xxs-push-4  { left: 33.33333333%; }
      .col-xxs-push-3  { left: 25%; }
      .col-xxs-push-2  { left: 16.66666667%; }
      .col-xxs-push-1  { left: 8.33333333%; }
      .col-xxs-push-0  { left: auto; }

      .col-xxs-offset-12 { margin-left: 100%; }
      .col-xxs-offset-11 { margin-left: 91.66666667%; }
      .col-xxs-offset-10 { margin-left: 83.33333333%; }
      .col-xxs-offset-9  { margin-left: 75%; }
      .col-xxs-offset-8  { margin-left: 66.66666667%; }
      .col-xxs-offset-7  { margin-left: 58.33333333%; }
      .col-xxs-offset-6  { margin-left: 50%; }
      .col-xxs-offset-5  { margin-left: 41.66666667%; }
      .col-xxs-offset-4  { margin-left: 33.33333333%; }
      .col-xxs-offset-3  { margin-left: 25%; }
      .col-xxs-offset-2  { margin-left: 16.66666667%; }
      .col-xxs-offset-1  { margin-left: 8.33333333%; }
      .col-xxs-offset-0  { margin-left: 0; }

      /* Extra small devices (phones, 600px and up) */
      @media (min-width: 600px) {
          [class*="col-xs-"] {float:left;}

          .col-xs-12 { width: 100%; }
          .col-xs-11 { width: 91.66666667%; }
          .col-xs-10 { width: 83.33333333%; }
          .col-xs-9  { width: 75%; }
          .col-xs-8  { width: 66.66666667%; }
          .col-xs-7  { width: 58.33333333%; }
          .col-xs-6  { width: 50%; }
          .col-xs-5  { width: 41.66666667%; }
          .col-xs-4  { width: 33.33333333%; }
          .col-xs-3  { width: 25%; }
          .col-xs-2  { width: 16.66666667%; }
          .col-xs-1  { width: 8.33333333%; }

          .col-xs-pull-12 { right: 100%; }
          .col-xs-pull-11 { right: 91.66666667%; }
          .col-xs-pull-10 { right: 83.33333333%; }
          .col-xs-pull-9  { right: 75%; }
          .col-xs-pull-8  { right: 66.66666667%; }
          .col-xs-pull-7  { right: 58.33333333%; }
          .col-xs-pull-6  { right: 50%; }
          .col-xs-pull-5  { right: 41.66666667%; }
          .col-xs-pull-4  { right: 33.33333333%; }
          .col-xs-pull-3  { right: 25%; }
          .col-xs-pull-2  { right: 16.66666667%; }
          .col-xs-pull-1  { right: 8.33333333%; }
          .col-xs-pull-0  { right: auto; }

          .col-xs-push-12 { left: 100%; }
          .col-xs-push-11 { left: 91.66666667%; }
          .col-xs-push-10 { left: 83.33333333%; }
          .col-xs-push-9  { left: 75%; }
          .col-xs-push-8  { left: 66.66666667%; }
          .col-xs-push-7  { left: 58.33333333%; }
          .col-xs-push-6  { left: 50%; }
          .col-xs-push-5  { left: 41.66666667%; }
          .col-xs-push-4  { left: 33.33333333%; }
          .col-xs-push-3  { left: 25%; }
          .col-xs-push-2  { left: 16.66666667%; }
          .col-xs-push-1  { left: 8.33333333%; }
          .col-xs-push-0  { left: auto; }

          .col-xs-offset-12 { margin-left: 100%; }
          .col-xs-offset-11 { margin-left: 91.66666667%; }
          .col-xs-offset-10 { margin-left: 83.33333333%; }
          .col-xs-offset-9  { margin-left: 75%; }
          .col-xs-offset-8  { margin-left: 66.66666667%; }
          .col-xs-offset-7  { margin-left: 58.33333333%; }
          .col-xs-offset-6  { margin-left: 50%; }
          .col-xs-offset-5  { margin-left: 41.66666667%; }
          .col-xs-offset-4  { margin-left: 33.33333333%; }
          .col-xs-offset-3  { margin-left: 25%; }
          .col-xs-offset-2  { margin-left: 16.66666667%; }
          .col-xs-offset-1  { margin-left: 8.33333333%; }
          .col-xs-offset-0  { margin-left: 0; }
      }

      /* Small devices (tablets, 768px and up) */
      @media (min-width: 768px) {
          [class*="col-sm-"] {float:left;}

          .col-sm-12 { width: 100%; }
          .col-sm-11 { width: 91.66666667%; }
          .col-sm-10 { width: 83.33333333%; }
          .col-sm-9  { width: 75%; }
          .col-sm-8  { width: 66.66666667%; }
          .col-sm-7  { width: 58.33333333%; }
          .col-sm-6  { width: 50%; }
          .col-sm-5  { width: 41.66666667%; }
          .col-sm-4  { width: 33.33333333%; }
          .col-sm-3  { width: 25%; }
          .col-sm-2  { width: 16.66666667%; }
          .col-sm-1  { width: 8.33333333%; }

          .col-sm-pull-12 { right: 100%; }
          .col-sm-pull-11 { right: 91.66666667%; }
          .col-sm-pull-10 { right: 83.33333333%; }
          .col-sm-pull-9  { right: 75%; }
          .col-sm-pull-8  { right: 66.66666667%; }
          .col-sm-pull-7  { right: 58.33333333%; }
          .col-sm-pull-6  { right: 50%; }
          .col-sm-pull-5  { right: 41.66666667%; }
          .col-sm-pull-4  { right: 33.33333333%; }
          .col-sm-pull-3  { right: 25%; }
          .col-sm-pull-2  { right: 16.66666667%; }
          .col-sm-pull-1  { right: 8.33333333%; }
          .col-sm-pull-0  { right: auto; }

          .col-sm-push-12 { left: 100%; }
          .col-sm-push-11 { left: 91.66666667%; }
          .col-sm-push-10 { left: 83.33333333%; }
          .col-sm-push-9  { left: 75%; }
          .col-sm-push-8  { left: 66.66666667%; }
          .col-sm-push-7  { left: 58.33333333%; }
          .col-sm-push-6  { left: 50%; }
          .col-sm-push-5  { left: 41.66666667%; }
          .col-sm-push-4  { left: 33.33333333%; }
          .col-sm-push-3  { left: 25%; }
          .col-sm-push-2  { left: 16.66666667%; }
          .col-sm-push-1  { left: 8.33333333%; }
          .col-sm-push-0  { left: auto; }

          .col-sm-offset-12 { margin-left: 100%; }
          .col-sm-offset-11 { margin-left: 91.66666667%; }
          .col-sm-offset-10 { margin-left: 83.33333333%; }
          .col-sm-offset-9  { margin-left: 75%; }
          .col-sm-offset-8  { margin-left: 66.66666667%; }
          .col-sm-offset-7  { margin-left: 58.33333333%; }
          .col-sm-offset-6  { margin-left: 50%; }
          .col-sm-offset-5  { margin-left: 41.66666667%; }
          .col-sm-offset-4  { margin-left: 33.33333333%; }
          .col-sm-offset-3  { margin-left: 25%; }
          .col-sm-offset-2  { margin-left: 16.66666667%; }
          .col-sm-offset-1  { margin-left: 8.33333333%; }
          .col-sm-offset-0  { margin-left: 0; }
      }

      /* Medium devices (desktops, 1025px and up) */
      @media (min-width: 1025px) {
        [class*="col-md-"] {float:left;}

        .col-md-12 { width: 100%; }
        .col-md-11 { width: 91.66666667%; }
        .col-md-10 { width: 83.33333333%; }
        .col-md-9  { width: 75%; }
        .col-md-8  { width: 66.66666667%; }
        .col-md-7  { width: 58.33333333%; }
        .col-md-6  { width: 50%; }
        .col-md-5  { width: 41.66666667%; }
        .col-md-4  { width: 33.33333333%; }
        .col-md-3  { width: 25%; }
        .col-md-2  { width: 16.66666667%; }
        .col-md-1  { width: 8.33333333%; }

        .col-md-pull-12 { right: 100%; }
        .col-md-pull-11 { right: 91.66666667%; }
        .col-md-pull-10 { right: 83.33333333%; }
        .col-md-pull-9  { right: 75%; }
        .col-md-pull-8  { right: 66.66666667%; }
        .col-md-pull-7  { right: 58.33333333%; }
        .col-md-pull-6  { right: 50%; }
        .col-md-pull-5  { right: 41.66666667%; }
        .col-md-pull-4  { right: 33.33333333%; }
        .col-md-pull-3  { right: 25%; }
        .col-md-pull-2  { right: 16.66666667%; }
        .col-md-pull-1  { right: 8.33333333%; }
        .col-md-pull-0  { right: auto; }

        .col-md-push-12 { left: 100%; }
        .col-md-push-11 { left: 91.66666667%; }
        .col-md-push-10 { left: 83.33333333%; }
        .col-md-push-9  { left: 75%; }
        .col-md-push-8  { left: 66.66666667%; }
        .col-md-push-7  { left: 58.33333333%; }
        .col-md-push-6  { left: 50%; }
        .col-md-push-5  { left: 41.66666667%; }
        .col-md-push-4  { left: 33.33333333%; }
        .col-md-push-3  { left: 25%; }
        .col-md-push-2  { left: 16.66666667%; }
        .col-md-push-1  { left: 8.33333333%; }
        .col-md-push-0  { left: auto; }

        .col-md-offset-12 { margin-left: 100%; }
        .col-md-offset-11 { margin-left: 91.66666667%; }
        .col-md-offset-10 { margin-left: 83.33333333%; }
        .col-md-offset-9  { margin-left: 75%; }
        .col-md-offset-8  { margin-left: 66.66666667%; }
        .col-md-offset-7  { margin-left: 58.33333333%; }
        .col-md-offset-6  { margin-left: 50%; }
        .col-md-offset-5  { margin-left: 41.66666667%; }
        .col-md-offset-4  { margin-left: 33.33333333%; }
        .col-md-offset-3  { margin-left: 25%; }
        .col-md-offset-2  { margin-left: 16.66666667%; }
        .col-md-offset-1  { margin-left: 8.33333333%; }
        .col-md-offset-0  { margin-left: 0; }
      }

      /* Large devices (large desktops, 1200px and up) */
      @media (min-width: 1200px) {
        [class*="col-lg-"] {float:left;}

        .col-lg-12 { width: 100%; }
        .col-lg-11 { width: 91.66666667%; }
        .col-lg-10 { width: 83.33333333%; }
        .col-lg-9  { width: 75%; }
        .col-lg-8  { width: 66.66666667%; }
        .col-lg-7  { width: 58.33333333%; }
        .col-lg-6  { width: 50%; }
        .col-lg-5  { width: 41.66666667%; }
        .col-lg-4  { width: 33.33333333%; }
        .col-lg-3  { width: 25%; }
        .col-lg-2  { width: 16.66666667%; }
        .col-lg-1  { width: 8.33333333%; }

        .col-lg-pull-12 { right: 100%; }
        .col-lg-pull-11 { right: 91.66666667%; }
        .col-lg-pull-10 { right: 83.33333333%; }
        .col-lg-pull-9  { right: 75%; }
        .col-lg-pull-8  { right: 66.66666667%; }
        .col-lg-pull-7  { right: 58.33333333%; }
        .col-lg-pull-6  { right: 50%; }
        .col-lg-pull-5  { right: 41.66666667%; }
        .col-lg-pull-4  { right: 33.33333333%; }
        .col-lg-pull-3  { right: 25%; }
        .col-lg-pull-2  { right: 16.66666667%; }
        .col-lg-pull-1  { right: 8.33333333%; }
        .col-lg-pull-0  { right: auto; }

        .col-lg-push-12 { left: 100%; }
        .col-lg-push-11 { left: 91.66666667%; }
        .col-lg-push-10 { left: 83.33333333%; }
        .col-lg-push-9  { left: 75%; }
        .col-lg-push-8  { left: 66.66666667%; }
        .col-lg-push-7  { left: 58.33333333%; }
        .col-lg-push-6  { left: 50%; }
        .col-lg-push-5  { left: 41.66666667%; }
        .col-lg-push-4  { left: 33.33333333%; }
        .col-lg-push-3  { left: 25%; }
        .col-lg-push-2  { left: 16.66666667%; }
        .col-lg-push-1  { left: 8.33333333%; }
        .col-lg-push-0  { left: auto; }

        .col-lg-offset-12 { margin-left: 100%; }
        .col-lg-offset-11 { margin-left: 91.66666667%; }
        .col-lg-offset-10 { margin-left: 83.33333333%; }
        .col-lg-offset-9  { margin-left: 75%; }
        .col-lg-offset-8  { margin-left: 66.66666667%; }
        .col-lg-offset-7  { margin-left: 58.33333333%; }
        .col-lg-offset-6  { margin-left: 50%; }
        .col-lg-offset-5  { margin-left: 41.66666667%; }
        .col-lg-offset-4  { margin-left: 33.33333333%; }
        .col-lg-offset-3  { margin-left: 25%; }
        .col-lg-offset-2  { margin-left: 16.66666667%; }
        .col-lg-offset-1  { margin-left: 8.33333333%; }
        .col-lg-offset-0  { margin-left: 0; }
      }



      /**
       * Clearfix
       * Apply clearing without adding additional markup
       */

      .clearfix:before, .clearfix:after,
      .container:before, .container:after,
      .container-fluid:before, .container-fluid:after,
      .row:before, .row:after {
          content: " ";
          display: table;
      }

      .clearfix:after,
      .container:after,
      .container-fluid:after,
      .row:after { clear: both; }


      /*--------------------------------------------------------------*\
          OBJECTS
          Objects are independent generic stylibf classes or UI peices.
          All styles for objects should be self contained.

          e.g. an object shouldn't rely on trump helpers to apply padding etc.
      \*--------------------------------------------------------------*/


      /**
       * Buttons
       */

      .btn {
      }

          .btn:hover {
          }

      .btn-secondary {
      }

          .btn-secondary:hover {
          }

      .btn-block {
          display: block;
          width: 100%;
      }

      .btn + .btn {
        margin-top: 5px; /* Add margin-top when 2 buttons are next to each other */
      }

      @media (min-width: 600px) {

          .btn + .btn {
          margin-top: 0;
          margin-left: 5px;
        }

      }


/* Icons*/

    @font-face {
        font-family: "flaticon";
        src: url("font/flaticon.ttf?223bb4d5fd6527eb5fc0f026565cd495") format("truetype"),
    url("font/flaticon.woff?223bb4d5fd6527eb5fc0f026565cd495") format("woff"),
    url("font/flaticon.woff2?223bb4d5fd6527eb5fc0f026565cd495") format("woff2"),
    url("font/flaticon.eot?223bb4d5fd6527eb5fc0f026565cd495#iefix") format("embedded-opentype"),
    url("font/flaticon.svg?223bb4d5fd6527eb5fc0f026565cd495#flaticon") format("svg");
    }

    [class^="flaticon-"]:before,
    [class*=" flaticon-"]:before {
        font-family: flaticon !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .flaticon-mowing:before {
        content: "\f101";
    }
    .flaticon-clipper:before {
        content: "\f102";
    }
    .flaticon-seed:before {
        content: "\f103";
    }
    .flaticon-gardening-tools:before {
        content: "\f104";
    }
    .flaticon-tree:before {
        content: "\f105";
    }
    .flaticon-digging:before {
        content: "\f106";
    }
    .flaticon-wheelbarrow:before {
        content: "\f107";
    }
    .flaticon-tile:before {
        content: "\f108";
    }
    .flaticon-gardening-tool:before {
        content: "\f109";
    }


      /*top section*/

      .hero-section {
        position: relative;
        min-height: 40vh;
    }

    .hero-background {
        position: absolute;
        bottom:10px;
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .hero-svg {
        position: absolute;
        bottom: 0;
    }

    .hero-logo {
        text-align: center;
        z-index: 2;
        position: relative;
        max-width: 170px;
        margin: auto;
        display: block;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
    }


    .services--wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

.service-card {
    margin-right: 16px;
    margin-bottom: 16px;
    border: none;
    background: #F7F7F7;
    border-radius: 0 0 10px 10px;
    padding: 16px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: 4px solid #ab202d;
    width: calc(50% - 16px);
    justify-content: center;
    flex-direction: column;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    line-height: 1em;
}

.service-card:hover{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
    background: #ab202d;
    color: #fff;
}

.service-card:nth-child(even){
    margin-right: 0px;
    margin-left: 16px;
}

.service-card span {
    font-size: 36px;
    margin-bottom: 10px;
}

.container {}

.site-tiny-footer {
    background: #ab202d;
    text-align: center;
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .25em;
    padding: 6px 0px;
}

.site-footer {
    background: #f7f7f7;
    margin-top: 6rem;
    padding: 3rem 0;
}

.footer-content {
    text-align: center;
}

@media(min-width:768px){
    .service--wrapper{
        justify-content: space-between;
    }

    .service-card{
        width: calc(33.33% - 16px);
    }

    .service-card:nth-child(even),
    .service-card{
        margin-right: 16px;
        margin-left: 0;
    }

    .service-card:nth-child(3n+3){
        margin-right: 0px;
        margin-left: 16px;
    }

    .service-card:nth-child(3n+2){
        margin-right: 8px;
        margin-left: 8px;
    }

    .site-footer {
        background: #f7f7f7;
        margin-top: 6rem;
        padding: 3rem 0;
    }

    .footer-content {
        text-align: left;
        display: flex;
        max-width: 768px;
        margin: auto;
    }

    .left {
        width: calc(50% - 16px);
        border-right: 1px solid #80808030;
    }

    .right {
        width: calc(50% - 16px);
        padding-left: 32px;
    }
    .hero-logo{
        max-width: 220px;
    }
}

@media(min-width:1025px){

.hero-section{
    min-height: 80vh
}


}