/* Font styles */
@media only screen and (min-width: 1400px) {
  .section--single h1 {
    font-size: 9rem;
    line-height: 9rem; } }

/* Hyperlink styles */
.section--single p a:link {
  color: white; }

.section--single p a:visited {
  color: #bbbbbb; }

.section--single p a:hover, .section--single p a:active {
  color: #dddddd; }

.section--single .highlight2 {
  border: 1px solid #75d3ea;
  background-color: rgba(117, 211, 234, 0.1);
  padding: 20px; }

.section--single .highlight3 {
  background-color: white;
  color: black;
  padding: 20px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); }

@media only screen and (max-width: 768px) {
  .header.header--single {
    background-color: #00a3e2; } }

@media only screen and (min-width: 768px) {
  .header.header--single::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -40px;
    background: linear-gradient(to bottom, rgba(0, 163, 226, 0.8) 30%, rgba(0, 163, 226, 0) 100%);
    z-index: -5; } }

.section--single.titleSlide div h1,
.section--single.titleSlide div h2 {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }
  @media only screen and (max-width: 768px) {
    .section--single.titleSlide div h1,
    .section--single.titleSlide div h2 {
      padding-bottom: 0.5em; } }

.section--single.titleSlide::after {
  content: "";
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0) 60%);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0; }

.section--single.darken-bottom::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0) 60%); }

.main--single .richslides:first-child .flickity-page-dots {
  visibility: hidden; }

.main--single .richslides:first-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 0;
  height: 20px;
  background: repeating-linear-gradient(135deg, rgba(0, 79, 147, 0), rgba(0, 79, 147, 0) 75px, #004f93 75px, #004f93 200px, rgba(0, 79, 147, 0) 200px); }

hr {
  border: none;
  border-top: 3px dotted #75d3ea; }

footer.section__footer {
  background: linear-gradient(to bottom, rgba(0, 79, 147, 0.8), rgba(30, 131, 195, 0.8)), url("https://springcms.s3.amazonaws.com/2020.westcoastcivil.com.au/upload/assets/footer/wcc-logo-white.svg"), linear-gradient(to bottom, #004f93, #1e83c3), #004f93;
  background-position: -10% 0%, bottom left, 0 0;
  background-repeat: no-repeat;
  background-attachment: scroll, fixed, scroll;
  border-top: 3px dotted #75d3ea;
  background-clip: padding-box, padding-box, padding-box, border-box; }
  footer.section__footer h1,
  footer.section__footer h2,
  footer.section__footer h3,
  footer.section__footer h4,
  footer.section__footer h5,
  footer.section__footer p,
  footer.section__footer a {
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    text-decoration: none; }

.header--single.hasnavigation {
      grid-template-areas: 'logo navigation'; }
  .header--single.hasnavigation .header__navigation ul {
    width: 100%;
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly; }
    .header--single.hasnavigation .header__navigation ul li {
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
      -ms-flex-pack: center;
          justify-content: center;
      text-align: center; }

.section--single .highlight1 {
  border-bottom: 3px dotted #75d3ea;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; }

.section--single a.button {
  border-radius: 5px;
  border: none;
  padding: 6px 14px;
  color: #75d3ea; }
  .section--single a.button:hover {
    background-color: rgba(117, 211, 234, 0.2);
    color: #ffffff;
    opacity: 1; }
  .section--single a.button::after {
    display: none; }

/* Homepage project card styles */
@media only screen and (min-width: 768px) {
  .grid--feature .grid__items.grid__items--feature,
  .grid--sidebar .grid__items.grid__items--feature {
    -ms-grid-columns: initial;
    grid-template-columns: initial;
        grid-template-areas: 'feature1 feature2' 'feature1 feature3';
    -ms-grid-columns: 67% 33%;
    grid-template-columns: 67% 33%; }
    .grid--feature .grid__items.grid__items--feature .grid__item:nth-child(1),
    .grid--sidebar .grid__items.grid__items--feature .grid__item:nth-child(1) {
      grid-area: feature1; }
    .grid--feature .grid__items.grid__items--feature .grid__item:nth-child(2),
    .grid--sidebar .grid__items.grid__items--feature .grid__item:nth-child(2) {
      grid-area: feature2; }
    .grid--feature .grid__items.grid__items--feature .grid__item:nth-child(3),
    .grid--sidebar .grid__items.grid__items--feature .grid__item:nth-child(3) {
      grid-area: feature3; } }
@media only screen and (min-width: 768px) {
  .grid--feature .grid__items.grid__items--feature .grid__item:nth-child(1),
    .grid--sidebar .grid__items.grid__items--feature .grid__item:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1; }
  .grid--feature .grid__items.grid__items--feature .grid__item:nth-child(2),
    .grid--sidebar .grid__items.grid__items--feature .grid__item:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2; }
  .grid--feature .grid__items.grid__items--feature .grid__item:nth-child(3),
    .grid--sidebar .grid__items.grid__items--feature .grid__item:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 2; } }

.grid--feature .grid__item,
.grid--sidebar .grid__item {
  background-color: white;
  width: 100%;
  height: 100%;
  /* Animate on hover */ }
  .grid--feature .grid__item .grid__thumbnail,
  .grid--feature .grid__item .grid__content,
  .grid--sidebar .grid__item .grid__thumbnail,
  .grid--sidebar .grid__item .grid__content {
    width: 100%;
    height: 100%; }
  .grid--feature .grid__item img,
  .grid--sidebar .grid__item img {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%; }
  .grid--feature .grid__item .grid__thumbnail::after,
  .grid--sidebar .grid__item .grid__thumbnail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom right, rgba(0, 79, 147, 0.8) 0%, rgba(0, 79, 147, 0) 20%); }
  .grid--feature .grid__item .grid__details,
  .grid--sidebar .grid__item .grid__details {
    font-family: "Avenir Next", "Avenir", sans-serif;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    z-index: 5;
    pointer-events: none;
    text-transform: uppercase; }
    .grid--feature .grid__item .grid__details .grid__title,
    .grid--sidebar .grid__item .grid__details .grid__title {
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: 3rem;
      line-height: 3rem;
      padding: 20px;
      padding-right: 60px; }
      @media only screen and (min-width: 768px) {
        .grid--feature .grid__item .grid__details .grid__title,
        .grid--sidebar .grid__item .grid__details .grid__title {
          font-size: 2vw;
          line-height: 2vw; } }
      @media only screen and (min-width: 1500px) {
        .grid--feature .grid__item .grid__details .grid__title,
        .grid--sidebar .grid__item .grid__details .grid__title {
          font-size: 3rem;
          line-height: 3rem; } }
    .grid--feature .grid__item .grid__details .grid__date,
    .grid--sidebar .grid__item .grid__details .grid__date {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 2rem;
      line-height: 2rem;
      padding: 20px;
      padding-right: 20px; }
      @media only screen and (min-width: 768px) {
        .grid--feature .grid__item .grid__details .grid__date,
        .grid--sidebar .grid__item .grid__details .grid__date {
          font-size: 1.4vw;
          line-height: 1.4vw; } }
      @media only screen and (min-width: 1400px) {
        .grid--feature .grid__item .grid__details .grid__date,
        .grid--sidebar .grid__item .grid__details .grid__date {
          font-size: 1.9rem;
          line-height: 1.9rem; } }
  .grid--feature .grid__item::before,
  .grid--sidebar .grid__item::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom right, rgba(0, 79, 147, 0), rgba(0, 79, 147, 0) 50%, #004f93 50%, #004f93);
    background-position: 100px, 100px;
    background-repeat: no-repeat;
    transition: background-position 0.3s ease;
    pointer-events: none; }
  .grid--feature .grid__item:hover::before,
  .grid--sidebar .grid__item:hover::before {
    background-position: 0 0; }
  .grid--feature .grid__item::after,
  .grid--sidebar .grid__item::after {
    content: "\f0da";
    font-family: "Font Awesome 5 Pro";
    font-weight: bold;
    font-size: 3rem;
    line-height: 3rem;
    text-align: center;
    width: 26px;
    height: 26px;
    color: white;
    position: absolute;
    right: 15px;
    bottom: 15px;
    margin: none;
    transition: opacity 0.1s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.1s ease, transform 0.3s ease;
    transition: opacity 0.1s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
    -webkit-transform: translate(15px, 15px);
            transform: translate(15px, 15px);
    opacity: 0;
    pointer-events: none; }
  .grid--feature .grid__item:hover::after,
  .grid--sidebar .grid__item:hover::after {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  .grid--feature .grid__item .grid__link,
  .grid--sidebar .grid__item .grid__link {
    transition: background-color 0.2s ease; }

.grid--sidebar .grid__thumbnail {
  max-height: 256px; }