/******************
*
* VERSION 1.1.0
* Civmec's Home Page CSS Grid Layout
*
*******************/


/* Base styles and Fallbacks for older browsers */

.grid {
    width: 100%;
  }

.tile {
  background-color: #3b4a53;
  width: 50%;
  padding-bottom: 50%;
  position: relative;
  overflow: hidden;
  float: left;
  border: solid white 10px;
}

.tile__title {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  margin: 0;
  padding: 40px 20px 0 40px;
  width: 100%;
  font-size: 18px;
}

.tile__content {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px 80px 40px 40px;
}

.tile__content > h2 {
  font-size: 28px;
}

h3.tile__title, .tile__content h2 {
  color:#fff;
  text-transform: uppercase;
}

.tile__image {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  -o-transition: all 15s ease 0s;
  transition: all 15s ease 0s;
  -moz-transition: all 15s ease 0s;
  -webkit-transition: all 15s ease 0s;
}
 
.grid .tile:hover .tile__image {
  min-width: 100%;
  opacity: 1;
  -webkit-transform: scale(1.8);
  -ms-transform: scale(1.8);
      transform: scale(1.8);
}

/* REMOVE STUFF */

.values .readmore,
.news .readmore,
.sectors .nav-header,
dl.fields-container {
  display: none;
}

/* OVERRIDE STUFF - TEMPORARY? */

div.tile {
    position: relative;
}

div.tile .tile__content {
  top: 0px;
}
div.tile .tile__content .fields-container + a {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 35px;
}

div.tile .time__content .moduletable {
    padding: 40px 80px 40px 40px;
}

div.tile.sectors .moduletable {
    position: absolute;
    bottom: 60px;
    left: 40px;
    right: 80px;
}


/* END OVERRIDE STUFF */

.tile.sectors { width: 100%; }

@media (max-width: 991px) {
  .tile.sectors,
  .tile.capabilities {
    width: 100%;
    padding-bottom: 100%;
  }

  .tile.news {
    width: 100%;
  }
}


/* Here's the fun part! If the browser understands what GRID is, then it'll run the following code. */

@supports (display: grid) or (display: -ms-grid) {

  /* Unsetting stuff */

  .tile {
    width: unset;
    float: unset;
    border: unset;
    padding-bottom: 50%;
  }

  .tile.sectors,
  .tile.capabilities,
  .tile-values {
    width: unset;
    padding-bottom: 50%;
  }

  /* Full-Width Grid */
  .grid {
    display: -ms-grid;
    display: grid;
    margin: 50px 0px;
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
    grid-template-columns: repeat(4, 1fr);
    -ms-grid-rows: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-gap: 20px;
    min-height: 200px;
        grid-template-areas:
      "sectors sectors values values"
      "sectors sectors capabilities capabilities"
      "news news capabilities capabilities"
      "news news careers videos"
      "RAP annual-report brochures brochures";
  }

  /* Medium Grid */
  @media (max-width: 991px) {
    .grid {
      /*width: 100%;
      margin: 50px 10px;*/
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 15px 1fr 15px 1fr;
      grid-template-columns: repeat(3, 1fr);
      -ms-grid-rows: 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
      grid-template-rows: repeat(7, 1fr);
      grid-gap: 15px;
      min-height: 200px;
          grid-template-areas:
        "sectors sectors videos"
        "sectors sectors careers"
        "capabilities capabilities capabilities"
        "capabilities capabilities capabilities"
        "RAP values values"
        "news news annual-report"
        "news news brochures"
    }
  }

  /* Small Grid */
  @media (max-width: 640px) {
    .grid {
      /*width: 100%;
      margin: 50px 10px;*/
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 10px 1fr;
      grid-template-columns: repeat(2, 1fr);
      -ms-grid-rows: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
      grid-template-rows: repeat(10, 1fr);
      grid-gap: 10px;
      min-height: 200px;
          grid-template-areas:
        "sectors sectors"
        "sectors sectors"
        "values values"
        "capabilities capabilities"
        "capabilities capabilities"
        "news news"
        "news news"
        "careers videos"
        "RAP annual-report"
        "brochures brochures";
    }
    
    .tile__content h2 {
        font-size: 24px;
    }
  }

  .sectors {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: sectors;
  }

  .values {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    grid-area: values;
  }

  .news {
    -ms-grid-row: 5;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: news;
  }

  .capabilities {
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    grid-area: capabilities;
  }

  .careers {
    -ms-grid-row: 7;
    -ms-grid-column: 5;
    grid-area: careers;
  }

  .videos {
    -ms-grid-row: 7;
    -ms-grid-column: 7;
    grid-area: videos;
  }

  .RAP {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
    grid-area: RAP;
  }

  .annual-report {
    -ms-grid-row: 9;
    -ms-grid-column: 3;
    grid-area: annual-report;
  }

  .brochures {
    -ms-grid-row: 9;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    grid-area: brochures;
  }

  @media (max-width: 991px) {
    .sectors {
      -ms-grid-row: 1;
      -ms-grid-row-span: 3;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3
    }
    .values {
      -ms-grid-row: 9;
      -ms-grid-column: 3;
      -ms-grid-column-span: 3
    }
    .news {
      -ms-grid-row: 11;
      -ms-grid-row-span: 3;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3
    }
    .capabilities {
      -ms-grid-row: 5;
      -ms-grid-row-span: 3;
      -ms-grid-column: 1;
      -ms-grid-column-span: 5
    }
    .careers {
      -ms-grid-row: 3;
      -ms-grid-column: 5
    }
    .videos {
      -ms-grid-row: 1;
      -ms-grid-column: 5
    }
    .RAP {
      -ms-grid-row: 9;
      -ms-grid-column: 1
    }
    .annual-report {
      -ms-grid-row: 11;
      -ms-grid-column: 5
    }
    .brochures {
      -ms-grid-row: 13;
      -ms-grid-column: 5;
      -ms-grid-column-span: 1
    }
  }

  @media (max-width: 640px) {
    .sectors {
      -ms-grid-row: 1;
      -ms-grid-row-span: 3;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
    }
    .values {
      -ms-grid-row: 5;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
    }
    .news {
      -ms-grid-row: 11;
      -ms-grid-row-span: 3;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
    }
    .capabilities {
      -ms-grid-row: 7;
      -ms-grid-row-span: 3;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
    }
    .careers {
      -ms-grid-row: 15;
      -ms-grid-column: 1;
    }
    .videos {
      -ms-grid-row: 15;
      -ms-grid-column: 3;
    }
    .RAP {
      -ms-grid-row: 17;
      -ms-grid-column: 1;
    }
    .annual-report {
      -ms-grid-row: 17;
      -ms-grid-column: 3;
    }
    .brochures {
      -ms-grid-row: 19;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
    }
  }

} /* END Function Query */