@charset "UTF-8";

/*
 Structure
 */

.banner-group .row{
 align-items: stretch
}
.banner-group .banner{
 height: 100%
}
.banner-group .banner a, .banner-group .banner span{
 display: block;
 text-decoration: none
}

.banner-group .banner .attach-bg-image{
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover
}
.banner-group .banner .image-wrapped .attach-bg-image{
 background-size: auto 85px;
 background-position: right 20px top 20px;
}
.banner-group .banner .attach-bg-image.bg-size-contain{	
 background-size: contain
}
.banner-group .banner a.btn, .banner-group .banner span.btn{
 display: inline-block;
 border: solid 1px transparent
}


/*
 Structure - Banner block
 */
.banner-group .banner>.bnr.banner-block{
 width: 100%;
 height: 100%
}
.banner-group .banner.banner-shadow>.bnr.banner-block{
 box-shadow: 0 3px 10px #0000000d
}
.banner-group .banner.banner-border>.bnr.banner-block{
 border: solid transparent 2px
}
.banner-group .banner>.bnr.banner-block>.content-wrapper{
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 align-items: flex-start;
 height: 100%
}
.banner-group .banner>.bnr.banner-block>.content-wrapper>a, .banner-group .banner>.bnr.banner-block>.content-wrapper>span{
 width: 100%	
}
.banner-group .banner>.bnr.banner-block>.content-wrapper>.content{
 padding: 20px 20px 30px 20px;
 text-align: center
}
.banner-group .banner>.bnr.banner-block>.content-wrapper>.content>.title{
 display: block
}
.banner-group .banner>.bnr.banner-block>.content-wrapper>.content>.caption{
 margin-top: 17px
}
.banner-group .banner>.bnr.banner-block>.content-wrapper>.content-image{
 padding-bottom: 62%
}

/* 
 banner grid 
 */


/* 
 banner thumbnail 
 */

.banner-group .banner>.bnr.banner-block.banner-thumbnail>.content-wrapper>.content{
 order: 2;
 padding-top: 20px
}
.banner-group .banner>.bnr.banner-block.banner-thumbnail>.content-wrapper>.content-image-wrapper{
 order: 1;
 padding-top: 30px;
 padding-left: 25%;
 padding-right: 25%
}
.banner-group .banner.bgcolour-none:not( .banner-shadow, .banner-border )>.bnr.banner-block.banner-thumbnail>.content-wrapper>.content-image-wrapper{
 padding-top: 0;
}
.banner-group .banner>.bnr.banner-block.banner-thumbnail>.content-wrapper>.content-image-wrapper>.content-image{
 max-width: 100%;
 padding-bottom: 100%
}

@media ( max-width: 991px ){
	
 .banner-group .banner>.bnr.banner-block>.content-wrapper>.content-image.empty{
  display: none
 }

 .page-home .banner-group .banner-column-queued{
  margin-top:40px;
 }

}

@media ( min-width: 992px ){
	
 .banner-group .row.horizontal-spacing-none{
  margin-left: 0;
  margin-right: 0
 }
 .banner-group .row.horizontal-spacing-none>div{
  padding-left: 0;
  padding-right: 0
 }
 .banner-group .row.horizontal-spacing-thin{
  margin-left: -2.5px;
  margin-right: -2.5px
 }
 .banner-group .row.horizontal-spacing-thin>div{
  padding-left: 2.5px;
  padding-right: 2.5px
 }
 
 /*
  .horizontal-spacing-medium and .horizontal-spacing-large revert to default at 992px
  */
 
}

@media ( min-width: 1200px ){
	
 /*
  Do not exceed 30px for min-width 1200px !
  */
 
 .banner-group .row.horizontal-spacing-medium,
 .banner-group .row.horizontal-spacing-large{
  margin-left: -30px;
  margin-right: -30px
 }
 .banner-group .row.horizontal-spacing-medium>div,
 .banner-group .row.horizontal-spacing-large>div{
  padding-left: 30px;
  padding-right: 30px
 }
 
}

@media ( min-width: 1640px ){
	
 /*
  @media min-width is optimised for this gutter spacing
  */
	
 .banner-group .row.horizontal-spacing-large{
  margin-left: -50px;
  margin-right: -50px
 }
 .banner-group .row.horizontal-spacing-large>div{
  padding-left: 50px;
  padding-right: 50px
 }	
 
}
 
@media ( min-width: 992px ){
	
 .banner-group .banner>.bnr.banner-block>.content-wrapper>.content{
  order: 2;
  padding-top: 20px
 }
 .banner-group .banner>.bnr.banner-block>.content-wrapper>.content-image{
  order: 1
 }
 .banner-group .banner>.bnr.banner-block>.content-wrapper>.content>b{
  margin-top: 7px
 }

 /* 
  banner editorial 
  */

 .banner-group .banner>.bnr.banner-block.banner-editorial>.content-wrapper{
  flex-direction: row;	
 }
 .banner-group .banner>.bnr.banner-block.banner-editorial>.content-wrapper>.content{
  text-align: left
 }
 
}

/*
 Structure - Banner grid 
 */
 
.banner-group .banner>.bnr.banner-block.banner-grid a.btn, 
.banner-group .banner>.bnr.banner-block.banner-grid span.btn{	 
 margin: 0
}
.banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-image{
 padding: 0
}
.banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.title,
.banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.caption,
.banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-button{
 padding-left: 20px;
 padding-right: 20px 
}

@media ( max-width: 991px ){
	
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.title,
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.caption,
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-button{
  margin-top: 20px 
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-button{	
  padding-bottom: 20px 
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-image{
  padding-bottom: 62%
 }
 .banner-group .banner>.bnr.banner-block.banner-grid.image-wrapped>.content-wrapper>.content-image{
  padding-bottom: 0;
  height: 80px;
  background-position: 20px 0px;
  padding-left: 20px;
  background-size: contain;
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-image,
 .banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.title{
  order: 1
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.title,
 .banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.caption{
  order: 2
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.caption,
 .banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.content-button{
  order: 3
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-button,
 .banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.content-image{
  order: 4
 }
 
}

@media ( min-width: 992px ){
	
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.title{
  flex: 0 0 auto;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-button{
  flex: 0 0 46px;
  height: 46px 
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.caption{
  flex: 0 0 130px;
  height: 130px
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-button+.caption{
  flex: 0 0 84px;
  height: 84px  
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-image{
  flex: 0 0 110px;
  height: 110px
 }
 .banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.caption{
  flex: 0 0 110px;
  height: 110px;
  display: flex;
  align-items: end;
  font-size: 20px;
 }
 .banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.content-button+.caption{
  flex: 0 0 64px;
  height: 64px
 }
 .banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.content-image{
  flex: 0 0 140px;
  height: 140px
 }
 
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-image,
 .banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.caption{
   order: 1;
 }
 .banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.title,
 .banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.content-button{
   order: 2
 }
.banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.caption,
.banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.title{
 order: 3
}
.banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper>.content-button,
.banner-group .banner>.bnr.banner-block.banner-grid.image-bottom>.content-wrapper>.content-image{
 order: 4
}
	
}


/*
 Structure - Banner cover
 */

.banner-group .banner>.banner-cover{
 position: relative;
 width: 100%;
 padding-bottom: 100%
}
.banner-group .banner>.bnr.banner-cover>.content-wrapper{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 padding-left: 5%;
 padding-right: 5%;
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 justify-content: center;
 align-content: center;
 align-items: center
}
.banner-group .banner>.banner-cover>.content-wrapper>.content{
 text-align: center
}
.banner-group .banner>.banner-cover>.content-wrapper>.content>.title{
 display: block
}

/* 
 Clip path generator
 https://bennettfeely.com/clippy/
 */

.banner-group .banner>.banner-cover.full-image-circle{
 border-radius: 50%;
 overflow: hidden;
}
.banner-group .banner>.banner-cover.full-image-hexagon{
 clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% )
}
/*
 //Alternative hexagon
.banner-group .banner>.banner-cover.full-image-hexagon{
 clip-path: polygon( 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
*/
.banner-group .banner>.banner-cover.full-image-rhombus{
 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}

/*
 Shaped banner modifier
 */
 
@media ( max-width: 991px  ){

 .banner-group .row>div.shaped.banner-column-queued{
  margin-top: 40px
 }

}

/*
 Page panel padding collapse modifier
 */
 
@media ( max-width: 1218px ){
	
 .page-panel-inner.collapse .banner-group>.row{
  margin-left: 0;
  margin-right: 0
 }
 .page-panel-inner.collapse .banner-group>.row>div{
  padding-left: 0;
  padding-right: 0
 }
 
}



/*
 Style
 */
 
.banner-group .banner a.btn, 
.banner-group .banner span.btn{
 margin-top: 20px
}
.banner-group .banner a.btn,
.banner-group .banner span.btn,
.banner-group .banner.bgcolour-light a.btn,
.banner-group .banner.bgcolour-light span.btn{
 background-color: #c0c0c0;
 color: #FFF
}
.banner-group .banner.bgcolour-dark a.btn,
.banner-group .banner.bgcolour-dark  span.btn{
 background-color: transparent;
 color: #fff;
 border: 2px solid #fff;
}
.banner-group .banner .attach-bg-image.banner-cover a.btn,
.banner-group .banner .attach-bg-image.banner-cover span.btn,
.banner-group .banner.bgcolour-light .attach-bg-image.banner-cover a.btn,
.banner-group .banner.bgcolour-light .attach-bg-image.banner-cover span.btn{
 background-color: #c0c0c0;
 color: #FFF 
}
.banner-group .banner.bgcolour-dark .attach-bg-image.banner-cover a.btn,
.banner-group .banner.bgcolour-dark .attach-bg-image.banner-cover span.btn{
 background-color: #FFF;
 color: #222 
}
.banner-group .banner>.bnr>.content-wrapper .title{
 font-weight: 700
}
.banner-group .banner>.bnr>.content-wrapper .title{
 font-weight: 700
}



/*
 Style - grid
 */

.banner-group .banner>.bnr.banner-block.banner-grid>.content-wrapper .title{
 font-size: 1.25rem;
 font-weight: 400;
 text-transform: uppercase
}