/*-------------------------------------------
BANNER TEMPLATE - Version: 19/09/18 13:30am
----------------------------------------------*/
.C6_cartridge {
    border-bottom: none;
}
.Banner  {font-family: "GalanoGrotesque-Regular",Arial,"Helvetica Neue",Helvetica,sans-serif;background:#eee;background-color: white;background-size: cover;width: 95%;position: relative;margin: 0;padding: 0 2.5%;/*border-top:5px solid #000;*/max-height: 245px;min-height:140px;color:white;}
.Banner:after {
  background: linear-gradient(to right, #c25480 20%,#78c6bf 20%, #78c6bf 40%, #fbb900 40%, #fbb900 60%, #8a962b 60%, #8a962b 80%, #744d68 80%, #744d68 100%);
  position: absolute;
  content: '';
  height: 4px;
  right: 0;
  left: 0;
  top: 0;
}

/*Banner height rules these are specified in the banner class default is tall which is 225px plus your border of 5px */
.Banner#tall {height: 225px;}
.Banner#medium {height:180px;}
.Banner#thin {max-height:140px;}


/*Backgrounds and border tops the backgrounds for the banners are either specified in the categories, brands etc */
.Banner.pink{background:#f3dde6;/*border-top:5px solid #c25480;*/}
.Banner.peach{background:#f0676f;/*border-top:5px solid #c05a85;*/}
.Banner.blue{background:#e4f4f2;/*border-top:5px solid #78c6bf;*/}
.Banner.yellow{background:#fef1cc;/*border-top:5px solid #fbb900;*/}
.Banner.green{background:#e8ead5;/*border-top:5px solid #8a962b;*/}
.Banner.purple{background:#e3dbe1;/*border-top:5px solid #744d68;*/}
.Banner.black{background:#fafafa;/*border-top:5px solid #000000;*/}


/*FONT-COLORS for Darker Banners */
.Banner h2.White, .Banner h3.White {color:#000 !important;}
.Banner h2.White, .Banner p.White {color:#000 !important;}
.Banner nav.White a {color: white; text-decoration:underline;}
.Banner nav.White a:hover {color: white; text-decoration:none;}


/*FONT-COLORS for Darker Banners */
.Banner h2.TotalWhite, .Banner h3.TotalWhite {color:#FFF !important;}
.Banner h2.TotalWhite, .Banner p.TotalWhite {color:#FFF !important;}
.Banner nav.TotalWhite a {color: #FFF; text-decoration:underline;}
.Banner nav.TotalWhite a:hover {color: #FFF; text-decoration:none;}


/*SUBHEADERS*/
span#subheader { font: 0.45em/0.6em "GalanoGrotesque-Regular",Arial,Helvetica,sans-serif;display:block;}


/*NAV*/
.Banner a {
	text-decoration: none;
	color: #fff
}
.Banner nav {
	width: auto;
	margin: 0 auto;
	/* width: 800px; */
}
.Banner nav a {
margin:  0.5em 1.5em 0.5em 0;
padding:0.1em 0;
font: 0.8em/1.1em "GalanoGrotesque-Regular",Arial,Helvetica,sans-serif;
color:#000;
width: auto;
display: inline-block; 
letter-spacing:0em;   
text-decoration: underline !important;   
font-weight:bold;
}
.Banner nav a:hover{
	color: #222; text-decoration: none !important;
	
}

/*Vertically centers content no matter what JK*/
.Banner .center {  
	width:95%;
	margin:0;
	padding:0;
	text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*HEADERS */
.Banner .center h2 {
    text-transform: uppercase;
    margin: 0;
    color: #222;
    font: 1.9em/1.14em "GalanoGrotesque-SemiBold",Arial,Helvetica,sans-serif;
    margin-bottom: 10px;
}
.Banner .center h3 {
	font:0.8em/1.5em "GalanoGrotesque-Regular",Arial,Helvetica,sans-serif;
	margin:0 auto 0.6em auto;
	text-decoration: none;
	color:#222;
    display: block;
	width:65%;
  text-align: center;
}  
.Banner .center p {
	font:0.8em/1.5em "GalanoGrotesque-Regular",Arial,Helvetica,sans-serif;
	margin:0 auto 1em auto;
	text-decoration: none;
	color:#222;
    display: block;
}

/* ------------------------------
BLOCK COLOUR BANNERS
---------------------------------*/

.Banner#tall.blockcolour {
  height: 230px;
  background-position: 100% top;
  background-repeat:no-repeat;
  background-size: contain;
}
.Banner.blockcolour:after{ background: none;}
.Banner.blockcolour .center h2,
.Banner.blockcolour .center h3,
.Banner.blockcolour .center p,
.Banner.blockcolour nav a,
.Banner.blockcolour nav a:hover{ color: #FFF}

.Banner.blockcolour.thecut{     background-color: #ed1b24} /*------RED - The Cut---*/
.Banner.blockcolour.yellow{     background-color: #fbb900}
.Banner.blockcolour.turquoise{  background-color: #78c6bf}
.Banner.blockcolour.pink{       background-color: #c25480}
.Banner.blockcolour.green{      background-color: #8a962b}
.Banner.blockcolour.purple{     background-color: #75556f}



/* ------------------------------
FADE EFFECT - Just for hover effect do not change/add to the below style
---------------------------------*/
.Banner .hvr-fade {
  backface-visibility: hidden;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  display: inline-block;
  overflow: hidden;
  transform: translateZ(0px);
  transition-duration: 0.3s;
  transition-property: color, background-color;
  vertical-align: middle;
}

/*MEDIA QUERIES */

/*HIDE EVERYTHING ON TABLET*/

@media only screen and (max-width: 1130px) {/*Anything below 1024px*/
	.Banner {background-image:none !important;}
    .Banner .center p {width: 95% !important;}
}

@media only screen and (max-width: 768px) {/*Anything below 1024px*/
	.Banner {background-image:none !important;height: 245px;}
	.Banner nav a {font-size:0.75em; }
	.Banner .center p {font-size:0.75em;}
}

	



  /*------------------------------
  BANNER IMAGE REMOVAL
  --------------------------------*/
.Banner.lightturq:after,
.Banner.darkturq:after,
.Banner.lightflesh:after,
.Banner.lightpink:after,
.Banner.brightpink:after,
.Banner.darkpink:after {
    background: -webkit-gradient(linear, 
      left top, right top, 
      color-stop(20%, #06414e), 
      color-stop(20%, #197285), color-stop(40%, #197285), 
      color-stop(40%, #791046), color-stop(60%, #791046), 
      color-stop(60%, #b01d69), color-stop(80%, #b01d69), 
      color-stop(80%, #e39e74), to(#e39e74));
    background: -webkit-linear-gradient(left, 
      #06414e 20%, 
      #197285 20%, #197285 40%, 
      #791046 40%, #791046 60%, 
      #b01d69 60%, #b01d69 80%, 
      #e39e74 80%, #e39e74 100%);
    background: -o-linear-gradient(left, 
      #06414e 20%, 
      #197285 20%, #197285 40%, 
      #791046 40%, #791046 60%, 
      #b01d69 60%, #b01d69 80%, 
      #e39e74 80%, #e39e74 100%);
    background: linear-gradient(to right, 
      #06414e 20%, 
      #197285 20%, #197285 40%, 
      #791046 40%, #791046 60%, 
      #b01d69 60%, #b01d69 80%, 
      #e39e74 80%, #e39e74 100%);
  } 
.Banner.lightturq{  background-color: #1a7385;}
.Banner.darkturq{   background-color: #07414d;}
.Banner.lightflesh{ 
background: #C6FFDD;  /* fallback for old browsers */
background-image: -webkit-gradient(linear, left top, right top, from(#eab591), color-stop(#f9d1b4), to(#db966d)) !important;
background-image: -webkit-linear-gradient(left, #eab591, #f9d1b4, #db966d) !important;
background-image: -o-linear-gradient(left, #eab591, #f9d1b4, #db966d) !important;
background-image: linear-gradient(to right, #eab591, #f9d1b4, #db966d) !important;
}
.Banner.lightpink{  background-color: #fee2df;}
.Banner.brightpink{ background-color: #b01e69;}
.Banner.darkpink{   background-color: #791146;}   


  .Banner{
    background-image: none !important; 
  }