/* ==================== THIS CSS IS COPIED FROM gatemplate.css (63414) =================== */
/* ============== PLEASE MAKE SURE ANY CHANGES TO THIS FILE ARE COPIED OVER ============== */

/* ============== START === FLEXBOX ================= */

.flexcontainer {
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 30px;
  margin-bottom: 30px;
}
.flexitem {
  flex-basis: 31%;
  max-width: 31%;
  margin-bottom: 3.5%;
}

@media screen and (max-width: 767px) {
  .flexitem {
    flex-basis: 48%;
    max-width: 48%;
    margin-bottom: 4%;
  }
}

/*@media screen and (max-width: 500px) {
  .flexitem {
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 1.2rem;
  }
}*/


.flexitem img {
    max-width: 100%;
    height: auto;
    display: block;
}


.flexitem+.flexitem {
  margin-left: 3.5%;
}
.flexitem:nth-child(3n+1) {
  clear: both;
  margin-left: 0;
}

@media screen and (max-width: 767px) {
  .flexitem+.flexitem {
    margin-left: 4%;
  }
  .flexitem:nth-child(2n+1) {
    clear: both;
    margin-left: 0;
  }
}

/*@media screen and (max-width: 500px) {
  .flexitem+.flexitem {
    margin-left: 0;
  }
}*/
.fleximg {
    overflow: hidden;
}

a.flexfigure img {
-webkit-filter: brightness(100%);
}
a.flexfigure:hover img {
-webkit-filter: brightness(67%);
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
transition: all 0.75s ease;
}
a.flextile img {
-webkit-filter: brightness(100%);
}
a.flextile:hover img {
-webkit-filter: brightness(67%);
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
transition: all 0.75s ease;
}

/*a.flexfigure:hover img {
  transform: scale(1.02); 
  transition: .75s ease;
}
a.flextile:hover img {
  transform: scale(1.02); 
  transition: .75s ease;
}*/
.flextile {
    background: #fff;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
}
a.flextile:hover {
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
}
/*@media screen and (max-width: 500px) {
  .flextile:last-child {
    margin-bottom:30px;
}}*/
.h1flex {
  margin: 0;
  padding: 15px;
  font-weight: normal;
  font-size: 1.4em;
  line-height: 1.4em;
}
.pflex {
  margin-bottom: 15px;
  padding: 0 15px;
}
.flexcontainer > a.flexitem > p.caption {
  margin-bottom: 0;
  color: #2f2f2f;
/*  text-decoration: underline;*/
}
.flexcontainer > a:hover p.caption, .flexcontainer > a:hover {
  text-decoration: none!important;
}
.flexfullwidth > .flexitem {
  max-width: 100%;
  flex-basis: 100%;
  margin-bottom: 0px;
}
@media screen and (min-width: 501px) {
  .flexfloat {
    float: right;
    margin: 0 0 1em 1em;
    min-width: 200px; /* =================== THIS IS AN IE FIX ====================== */
}}
@media screen and (min-width: 501px) {
  .flexfloat > .flexitem {
    max-width: 200px;
    flex-basis: 100%;
}}
@media screen and (max-width: 500px) {
  .flexfloat > .flexitem {
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 1.2rem;
}}

.flexfloat > .flexitem {
  margin-bottom: 0;
}
.flexfigure p.caption {
  margin-top: 5px;
  margin-bottom: 0;
}

/* CODE FOR 4 IMAGES WIDE - ADD CLASS: fourwide */
.flexitem.fourwide {
  flex-basis: 22.75%;
  max-width: 22.75%;
  margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
  .flexitem.fourwide {
    flex-basis: 48%;
    max-width: 48%;
    margin-bottom: 4%;
  }
}
.flexitem.fourwide+.flexitem.fourwide {
  margin-left: 3%;
}
.flexitem.fourwide:nth-child(4n+1) {
  clear: both;
  margin-left: 0!important;
}
@media screen and (max-width: 767px) {
  .flexitem.fourwide+.flexitem.fourwide {
    margin-left: 4%;
  }
  .flexitem.fourwide:nth-child(2n+1) {
    clear: both;
    margin-left: 0!important;
  }
}
/* CODE FOR 2 IMAGES WIDE - ADD CLASS: twowide */
.flexitem.twowide {
  flex-basis: 48%;
  max-width: 48%;
  margin-bottom: 4%;
}
@media screen and (max-width: 767px) {
  .flexitem.twowide {
    flex-basis: 48%;
    max-width: 48%;
    margin-bottom: 4%;
  }
}
.flexitem.twowide+.flexitem.twowide {
  margin-left: 4%;
}
.flexitem.twowide:nth-child(2n+1) {
  clear: both;
  margin-left: 0!important;
}
@media screen and (max-width: 767px) {
  .flexitem.twowide+.flexitem.twowide {
    margin-left: 4%;
  }
  .flexitem.twowide:nth-child(2n+1) {
    clear: both;
    margin-left: 0!important;
  }
}

/* IE 11 FIX */
/*@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .flexcontainer {
        display: inline;
        max-width: 200px;
    }
}/*
/* //IE 11 FIX */

/* ============== END === FLEXBOX ================= */


/* ==================== THIS CSS IS COPIED FROM gatemplate.css (63414) =================== */
/* ============== PLEASE MAKE SURE ANY CHANGES TO THIS FILE ARE COPIED OVER ============== */