@charset "UTF-8";

/*
 Structure Banner
 */

.banner--{
	
}
.banner-- .banner{
 display: flex;
 flex-direction: column
}

.banner-- .banner.bgcolour-applied{
 padding: 20px	
}
.banner-- .banner.border-applied{
 border-style: solid;
 border-width: 1px 
}
.banner-- .banner.boxshadow-applied{
 box-shadow: 6px 6px 12px -6px #00000080
}

/*
 Suggested layout
 */
 
.banner--  .banner {
 position: relative	
}

.banner--  .banner .wys p.title{
 font-size: 1.25rem;
 font-weight: 700 
}

.banner--  .banner .wys+.image,
.banner--  .banner .image+.controls{	
 margin-top: 30px	
}
.banner--  .banner .wys+.controls{
 margin-top: 20px	
}
.banner--  ..banner .image+.controls{
 text-align: center	
}


/*
 */
.banner-group  .banner{
 position: relative	
}
.banner-group  .banner.online-lessons-coming-soon:before{
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -80px;
 width: 160px;
 display: block;
 content: 'NOW AVAILABLE'; 
 background-color: #61d3ce;
 color: #462c76;
 font-weight: 700;
 border-radius: 0 0 6px 6px;
 text-align: center;
 line-height: 30px
}

/*
 Suggested layout for created banner
 */

.banner--.banner-created .banner{
 padding: 20px;
 border: solid #d9dadc 1px
}

/*
 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: 85px 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.content-only{
 justify-content: center	
}
.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-group .banner>.bnr.banner-block>.content-wrapper>.content-image.empty{
 padding-bottom: 0;
 display: none
}

/* 
 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
 }
 
 /*
  Vertical spacing
  */
  
 .banner-group>.row:not( .vertical-spacing-none )>div+div{
  margin-top: 20px
 }
 .banner-group>.row.vertical-spacing-thin>div+div{
  margin-top: 5px	
 }
 .banner-group>.row.vertical-spacing-medium.vertical-spacing-small-only>div+div{
  margin-top: 30px	
 }
 .banner-group>.row.vertical-spacing-large.vertical-spacing-small-only>div+div{
  margin-top: 40px	
 }
 
}



@media ( min-width: 992px ){
	
 /*
  Horizontal spacing
  */
	
 .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
  */
  
 /*
  Vertical spacing
  */
  
 .banner-group>.row:not( .vertical-spacing-small-only ):not( .vertical-spacing-none ).single-column>div+div,
 .banner-group>.row:not( .vertical-spacing-small-only ):not( .vertical-spacing-none ).columns-2>div:nth-child(n+3),
 .banner-group>.row:not( .vertical-spacing-small-only ):not( .vertical-spacing-none ).columns-3>div:nth-child(n+4),
 .banner-group>.row:not( .vertical-spacing-small-only ):not( .vertical-spacing-none ).columns-4>div:nth-child(n+5),
 .banner-group>.row:not( .vertical-spacing-small-only ):not( .vertical-spacing-none ).columns-5>div:nth-child(n+6){
  margin-top: 20px
 }
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-thin.single-column>div+div,
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-thin.columns-2>div:nth-child(n+3),
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-thin.columns-3>div:nth-child(n+4),
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-thin.columns-4>div:nth-child(n+5),
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-thin.columns-5>div:nth-child(n+6){
  margin-top: 5px
 }
 
 /*
  .vertical-spacing-medium and .vertical-spacing-large revert to default at 992px unless vertical spacing small device only is selected
  */

}

@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
 }
 
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-medium.single-column>div+div,
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-medium.columns-2>div:nth-child(n+3),
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-medium.columns-3>div:nth-child(n+4),
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-medium.columns-4>div:nth-child(n+5),
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-medium.columns-5>div:nth-child(n+6){
  margin-top: 60px
 }
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-large.single-column>div+div,
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-large.columns-2>div:nth-child(n+3),
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-large.columns-3>div:nth-child(n+4),
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-large.columns-4>div:nth-child(n+5),
 .banner-group>.row:not( .vertical-spacing-small-only ).vertical-spacing-large.columns-5>div:nth-child(n+6){
  margin-top: 100px
 }
 
}

@media ( min-width: 1640px ){
	
 /*
  @media min-width is optimised for this gutter spacing
  */
	
 .banner-group .row.horizontal-spacing-large{
  margin-left: -43px;
  margin-right: -43px
 }
 .banner-group .row.horizontal-spacing-large>div{
  padding-left: 43px;
  padding-right: 43px
 }	
 
}
 
@media ( min-width: 992px ){
	
 .banner-group .banner>.bnr.banner-block>.content-wrapper>.content{
  order: 2;
  padding-top: 30px
 }
 .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-image{
  padding-bottom: 0;
  height: 100%
 }
 .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: 105px
 }
 .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
 }
 .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
 }
 
}

/*
 Basic theme styles 
 */
 
.banner-group .banners-title{
 font-size: 1.625rem;
 font-weight: 500;
 text-align: center
}
.banner-group .banners-header+.row{
 margin-top: 50px
}
.banner-group .banner a.btn, 
.banner-group .banner span.btn{
 margin-top: 30px
}
.banner-group .banner>.bnr>.content-wrapper .title{
 font-weight: 700
}
.banner-group .banner>.bnr>.content-wrapper .title{
 font-weight: 700
}

/*
 Suggested style for banner grid
 */

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

 /* 
  Suggested layout for banner editorial 
  */

@media ( min-width: 992px ){

 .banner-group .banner>.bnr.banner-block.banner-editorial>.content-wrapper>.content{
  position: relative;
  height: 100%;
  padding-bottom: 80px
 }
 .banner-group .banner>.bnr.banner-block.banner-editorial>.content-wrapper>.content>a.btn{
  position: absolute;
  left: 20px;
  bottom: 20px;
 }
 
}