/* Hot Area Styles */
/* Hot Area */

.page-node .region-content .hot-area {
  background-size: cover; /* Added MER 20160819 To stretch single background image, no tiling */
  width: 250px;
  height: 250px;
  background-color: #E1251D;
  position: relative;
  padding: 0px;
  /* cursor: pointer; */
  margin: 0 auto; /* Added MER 20160829 to centre horizontally */
  max-width: 250px; /* Added MER 20160829 to centre horizontally */
}
.red-tint {
  background-blend-mode: screen; /* overlay; */
  /* background-color: #E1251D !important; */
}
.orange-tint {
  background-blend-mode: screen; /* overlay; */
  /* background-color: #FF801F !important; */
}
.purple-tint {
  background-blend-mode: screen; /* overlay; */
  /* background-color: #661428 !important; */
}
.dark-tint {
  background-blend-mode: screen; /* overlay; */
  /* background-color: #3B4042 !important; */
}

.page-node .region-content .hot-area:hover h3 {
  bottom: 25px; /* was 10px */
  -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: Arial, Helvetica, sans-serif /*clear_sans_mediumregular*/;
  padding: 0px 0px 0px 20px;
}

.page-node .region-content .hot-area h3 {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif /*clear_sansbold*/!important;font-weight: 700;
  color: #fff;
  position: absolute;
  bottom: 10px;
  -webkit-transition: bottom 0.5s;
  /* Safari */
  transition: bottom 0.5s;
  font-size: 1.4em; /* Added MER 20160818 trying sizes */
  font-weight: bold; /* Added MER 20160818 trying sizes */
}
.page-node .region-content .hot-area h3 a {
  font-family: Arial, Helvetica, sans-serif /*clear_sansbold*/!important;font-weight: 700;
  color: #fff;
  font-weight: bold; /* Added MER 20160818 trying sizes */
}
.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 - added by MER 20160829 */

.page-node .region-content .hot-area-fixed {
  background-size: cover;
  width: 250px;
  height: 250px;
  background-color: #E1251D;
  position: relative;
  padding: 0px;
  /* cursor: pointer; */
  margin: 0 auto; /* Added MER 20160829 to centre horizontally */
  max-width: 250px; /* Added MER 20160829 to centre horizontally */
}

.page-node .region-content .hot-area-fixed h3 {
  color: rgb(255, 255, 255);
  font-family: Arial, Helvetica, sans-serif /*clear_sansbold*/;font-weight: 700;
  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:#E1251D; */
    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: Arial, Helvetica, sans-serif /*clear_sans_lightregular*/;
    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;
}

.dynamic .filter img {
    filter: grayscale(100%) brightness(1) contrast(75%);
    z-index: 1;
    display: block;
}
.dynamic .filter:before,.dynamic .filter:after {
    position: absolute;
    content: '';
    width: 250px;
    height: 250px;
    left: 0px;
    top: 0px;
}
.dynamic .filter:before {
   /*  background: rgb(234,48,12);
    background: -moz-linear-gradient(45deg,  rgba(234,48,12,1) 0%, rgba(198,0,22,1) 100%);
    background: -webkit-linear-gradient(45deg,  rgba(234,48,12,1) 0%,rgba(198,0,22,1) 100%);
    background: linear-gradient(45deg,  rgba(234,48,12,1) 0%,rgba(198,0,22,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea300c', endColorstr='#c60016',GradientType=1 );
    mix-blend-mode: color-dodge; */
    z-index: 1;
}
.dynamic .filter:after {
    /* z-index: 2; */
}

.dynamic .filter1:after {
    /*background-color: #E51010; *//* #ff0000; */ /* #d62521; */
    opacity: .5;
}
.dynamic .filter2:after {
    /* background-color: #ff801f; */
    opacity: .7;
}
.dynamic .filter3:after {
    /* background-color: #661428; */
    opacity: .65;
}
.dynamic .filter4:after {
    /* background-color: #3B4042; */
    opacity: .75;
}



/***** BASIC **********************/
.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 {
    /* z-index: 2; */
}

.basic .filter1:after {
    /*background-color: #E51010;*/ /* #ff0000; */ /* #d62521; */
    opacity: .7;
}
.basic .filter2:after {
    /* background-color: #ff801f; */
    opacity: .85;
}
.basic .filter3:after {
    /* background-color: #661428; */
    opacity: .65;
}
.basic .filter4:after {
    /* background-color: #3B4042; */
    opacity: .75;
}