/* ECFS Hot Area Styles */

.page-node .region-content .hot-area {
  background-size: cover;
  width: 250px;
  height: 250px;
  background-color: #01458e;
  position: relative;
  padding: 0px;
  margin: 0 auto;
  max-width: 250px;
}
.blue-tint {
  background-blend-mode: screen; /* overlay; */
  background-color: #028AFF !important;
}
.gold-tint {
  background-blend-mode: screen; /* overlay; */
  background-color: #FD8E0B !important;
}
.dark-blue-tint {
  background-blend-mode: screen; /* overlay; */
  background-color: #01458e !important;
}
.grey-tint {
  background-blend-mode: screen; /* overlay; */
  background-color: #666666 !important;
}

.page-node .region-content .hot-area:hover h3 {
  bottom: 35px;
  -webkit-transition: bottom 0.5s;
  /* Safari */
  transition: bottom 0.5s;
}
.page-node .region-content .hot-area:hover a {
  bottom: 10px;
  opacity: 1;
  -webkit-transition: bottom 0.5s, opacity 0.5s;
  /* Safari */
  transition: bottom 0.5s, opacity 0.5s;
}
.page-node .region-content .hot-area-text-overlay:hover a {
  bottom: 0px;
  padding-bottom:0px;
  margin-bottom:0px;
}
.page-node .region-content .hot-area-text-overlay:hover h3 {
  bottom: 20px;
  padding-bottom:0px;
  margin-bottom:0px;
}
.page-node .region-content .hot-area > h3 {
  bottom: -70px;
  padding: 0px 0px 0px 20px;
}
.page-node .region-content .hot-area > a {
  font-family: Trebuchet MS,Arial,Helvetica,sans-serif;
  padding: 0px 0px 0px 20px;
}

.page-node .region-content .hot-area h3 {
  width: 100%;
  font-family: Trebuchet MS,Arial,Helvetica,sans-serif !important;
  color: #fff;
  position: absolute;
  bottom: 10px;
  -webkit-transition: bottom 0.5s;
  /* Safari */
  transition: bottom 0.5s;
  font-size: 1.4em;
  font-weight: bold;
}
.page-node .region-content .hot-area h3 a {
  font-family: Trebuchet MS,Arial,Helvetica,sans-serif !important;
  color: #fff;
  font-weight: bold;
}
.page-node .region-content .hot-area a {
  color: #fff;
  position: absolute;
  bottom: -50px;
  opacity: 0;
  -webkit-transition: bottom 0.5s, opacity 0.5s;
  /* Safari */
  transition: bottom 0.5s, opacity 0.5s;
}

/* End of Hot Area */

/* Fixed Hot Area */

.page-node .region-content .hot-area-fixed {
  background-size: cover;
  width: 250px;
  height: 250px;
  background-color: #01458e;
  position: relative;
  padding: 0px;
  margin: 0 auto;
  max-width: 250px; 
}

.page-node .region-content .hot-area-fixed h3 {
  color: rgb(255, 255, 255);
  font-family: Trebuchet MS,Arial,Helvetica,sans-serif;
  position: absolute;
  left: 16px;
  top: 20px;
}

.page-node .region-content .hot-area-fixed a {
  position: absolute;
  bottom: 14px;
  right: 14px;
}

/* End of Fixed Hot Area */

/* Hot Area Text Overlay */

/* Hot Area Text Overlay */
.hot-area-text-overlay {
    display:block;
    float:left;
    background-color:#01458e;
    width:230px;
    max-width:230px;
    max-height:230px;
    margin-left:10px;
    margin-bottom:10px;
    margin-right:10px;
    margin-top:-240px !important;
    z-index:10;
}

.hot-area-text-overlay-text {
    font-family: Trebuchet MS,Arial,Helvetica,sans-serif;
    margin: 0px;
    width:230px;
    height:230px;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    opacity:0;
    padding:10px;
}

div.glazed-editor div.hot-area-text-overlay-text {
   opacity: 0.2;
}

.hot-area-text-overlay-text h3 {
    margin-top: 0px;
}

.hot-area-text-overlay-text:hover {
    opacity:0.8;
}

.hot-area-text-overlay-text:active {
    opacity:0.8;
}



div.hot-area-text-overlay-text h3 {
    color: white;
}
div.hot-area-text-overlay-text p {
    color: white;
}

/* End of Hot Area Text Overlay */


.filterZZ {
    position: relative;
    float: left;
    margin-right: 20px;
}

/***** CSS FILTERS **********************/
.filter img {
    width: 250px !important;
    height: 250px !important;
}


/***** BASIC COLOUR FILTERS **********************/
.basic .filter img {
    display: block;
}
div.glazed-editor .basic .filter:after {
    position: relative;
}
.basic .filter:after {
    position: absolute;
    content: '';
    width: 250px;
    height: 250px;
    left: 0px;
    top: 0px;
}
.basic .filter:after {
}

.basic .filter-dark:after {
    background-color: #535353; /* #028AFF; */
    opacity: .7;
}
.basic .filter-gold:after {
    background-color: #FFB128; /* #FFB660; */ /* #FD8E0B; */
    opacity: .85;
}
.basic .filter-blue:after {
    background-color: #64AFFF; /* #01458E; */
    opacity: .65;
}
.basic .filter-light:after {
    background-color: #C5C5C5; /* #666666; */
    opacity: .75;
}

/* Various Width Hot Areas */

/* double width */
.page-node .region-content div.double-width .hot-area,
.page-node .region-content div.double-width .hot-area-fixed,
.page-node .region-content div.double-width .hot-area-text-overlay
{
    width: 500px !important;
    max-width: 500px !important;
}
.page-node .region-content div.double-width .filter img {
    width: 500px !important;
}
.page-node .region-content div.double-width .basic .filter:after {
    width: 500px !important;
}
div.az-section.hot-area-double-width {
    width: 500px;
}
div.az-section.hot-area-double-width.centre {
    margin: auto;
}
div.az-section.hot-area-double-width.border {
    width: 505px;
    margin-bottom: 4px;
}

/* triple width */
.page-node .region-content div.triple-width .hot-area,
.page-node .region-content div.triple-width .hot-area-fixed,
.page-node .region-content div.triple-width .hot-area-text-overlay
{
    width: 750px !important;
    max-width: 750px !important;
}
.page-node .region-content div.triple-width .filter img {
    width: 750px !important;
}
.page-node .region-content div.quadruple-width .basic .filter:after {
    width: 750px !important;
}
div.az-section.hot-area-triple-width {
    width: 750px;
}
div.az-section.hot-area-triple-width.centre {
    margin: auto;
}
div.az-section.hot-area-triple-width.border {
    width: 755px;
    margin-bottom: 4px;
}



/* quadruple width */
.page-node .region-content div.quadruple-width .hot-area,
.page-node .region-content div.quadruple-width .hot-area-fixed,
.page-node .region-content div.quadruple-width .hot-area-text-overlay
{
    width: 1000px !important;
    max-width: 1000px !important;
}
.page-node .region-content div.quadruple-width .filter img {
    width: 1000px !important;
}
.page-node .region-content div.quadruple-width .basic .filter:after {
    width: 1000px !important;
}
div.az-section.hot-area-quadruple-width {
    width: 1000px;
}
div.az-section.hot-area-quadruple-width.centre {
    margin: auto;
}
div.az-section.hot-area-quadruple-width.border {
    width: 1010px;
    margin-bottom: 4px;
}


/* Various Height Hot Areas */

/* half height */
.page-node .region-content div.half-height .hot-area,
.page-node .region-content div.half-height .hot-area-fixed,
.page-node .region-content div.half-height .hot-area-text-overlay
{
    height: 125px !important;
}
.page-node .region-content div.half-height .filter img {
    height: 125px !important;
}
.page-node .region-content div.half-height .basic .filter:after {
    height: 125px !important;
}


/* Various Section styles to accommodate hot areas */

div.az-section.three-quarters-width {
    width: 75%;
}
div.az-section.three-quarters-width.centre {
    margin: auto;
}
div.az-section.two-thirds-width {
    width: 66%;
}
div.az-section.two-thirds-width.centre {
    margin: auto;
}
div.az-section.half-width {
    width: 50%;
}
div.az-section.half-width.centre {
    margin: auto;
}
div.az-section.third-width {
    width: 33%;
}
div.az-section.third-width.centre {
    margin: auto;
}
div.az-section.quarter-width {
    width: 25%;
}
div.az-section.quarter-width.centre {
    margin: auto;
}