::selection {
  /*background: #97d0ca; *//* WebKit/Blink Browsers */
}
::-moz-selection {
 /* background: #97d0ca;*/ /* Gecko Browsers */
}

p {padding-bottom: 10px;}

.YAO{
	position: absolute;
    width: 8%;
    right: 2%;
    top: 5%;
    z-index: 10; 
}
.YAO2{
	position: absolute;
    width: 8%;
    right: 11%;
    top: 5%;
    z-index: 10; 
}


.BNI{
	position: absolute;
    width: 100%;
    z-index: 9; 
}

.MainInner:after{
	clear:both;
	display:block;
}

.FlexBoxContainer{
	display: -webkit-flex;
	-js-display: flex;	/*IE 8 and I9 support for flexbox https://github.com/10up/flexibility */
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	align-items:stretch;
	justify-content: center;	/*when last line does not fill page, will centre the items */
}

[class*="FlexBoxCellType"]{
	width:100%;		/*specify for mobile, and alter for bigger screen sizes */
	background-color:#fff;
	border: calc(5px) solid #FFF;
	padding:1%;
	padding-right:25px\0/; /* hack for ie8 to fix padding issue */
	position: relative;
	/*margin: auto;*/
}

/* FlexBoxCellTypes 

0 = 1 col all the time
1 = 1 col small devices, 2 cols when larger
2 = 1 col small devices, 3 cols on ipad, up to 6 cols big screens
3 = 1 col small devices, 3 cols when larger
4 = 1 col small devices, 2 cols on ipad, up to 4 cols big screens (silar to type 2, but increases at a slower rate to accomotate larger descriptions)

*/

.PageLimit{
	/*these settings dont seem necessary due to inner content - can remove laer? */
    width: 100%;
    position: relative;
	margin: 0 auto;
	overflow: hidden;
}

.BannerParent{
	position:relative;
}
.BannerImg{
	position:relative;
}
.BannerImgOverlay{
	position:absolute;
	left: 40%;
	width: 20%;
	top: 60%;
	max-height:35%;
	overflow:hidden;
	text-align:center;
	margin:0 auto;
	
}

.MainInner{width:100%;margin:0 auto;color: #000;}

.LimitMainInner{margin: 0 auto;}

.MyColumn{float:left;position:relative;padding: 1%;box-sizing: border-box;}

.imgfull{max-width:100%;width:600px;}

.videoContainer{position: relative;padding-bottom: 56.25%;padding-top: 0px;height: 0;overflow:hidden;}
.videoContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videoContainer img, .videoContainerImg{
	position: absolute;
	max-width: 100%;
	max-height: 100%;
}

.portraitContainer{position: relative;padding-bottom:130.909090%;padding-top: 0px;height: 0;}
.portraitContainer img{
	position: absolute;
	max-width: 100%;
	max-height: 100%;
}

.Article{
	text-align: justify;
}
.Article h2{

}

.ArticleLeft{}	
.ArticleLeft h2{}	
.ArticleLeft img{position:relative;float:left;padding:10px;/*width:20%;*/}

.Img50 img{width: 50%;}

.Img20 img{width: 20% !important;}

.ArticleCentre{}
.ArticleCentre h2{}	
.ArticleCentre img{width:100%;}

.TextCentre{text-align:center;}
.Buying{width:100%;}

.ArticleRight{}	
.ArticleRight h2{}	
.ArticleRight img{position:relative;float:right;padding:10px;/*width:20%;*/}

.LiFaqDisable{background:none !important; border:none !important;}

.RadioInput{
	width: 100%;
    margin: 0 auto;
    background: #FFF;
    padding: 5px 5px;
    border: 1px solid #1b998b;
	margin: 5px 0px 0px 0px;
}

.disabled{
	background: #AAA;
}

div#faqitem ul.faq
h4 {
/*background:url(../PubImages/down.png) no-repeat right 6px;*/
font-size:100%;
color:#1b998b;
cursor:pointer;
margin:0;
width: calc(100% - 20px);
padding-bottom: 10px;
}

div#faqitem ul.faq li.open {
background:url(../PubImages/up.png) no-repeat;
background-position: right 15px;
padding-bottom:10px;
}

div#faqitem
ul.faq {
list-style:none;
border-top: 1px solid #97d0ca;
margin:0 0 40px;
padding:0;
}

div#faqitem ul.faq
li {
background:url(../PubImages/down.png) no-repeat;
background-position: right 15px;
border-bottom:1px dotted #c7c7c7;
/*background:none;*/
padding:10px 0px 0px;
}

div#faqitem ul.faq li ul
li {
border-bottom:none;
list-style:none;
background:url(../PubImages/bullet.png) no-repeat 2px 6px;
margin:0 0 5px;
padding:0 0 0 12px;
}

ul.faq li
div {
padding-right:20px;
display:none;
}

ul.faq li
img {
float:left;
margin:0 10px 10px 0;
}

ul.faq li.open div{
	display:block;
}



.ImgDefault img{width:auto;}

.WorkshopSize{font-size: 92%;}

.ainfo{font-weight: bold;overflow: auto;padding-bottom:5px;}
.ainfo2{font-weight: bold;overflow: auto;padding-bottom:5px;padding-top:10px;}
	
.aright{position:relative; float:right; text-align:right;margin-left: 10px;}

.aBuyHalfLeft{position:relative; float:left; width:calc(100% - 100px); margin-top: 5px; margin-bottom: 5px;}
.aBuyHalfRight{position:relative; float:left; width:100px; margin-top: 5px; margin-bottom: 5px;}
.PriceShopItem{position:relative; float:left; width:100%; margin-top: 10px; margin-bottom: 5px;}
.QuantityDivLeft{position:relative; float:left; width:50%;margin-top: 5px;}
.QuantityDivRight{position:relative; float:left; width:50%;    text-align: right;}
.QuantityColour{color: #000 !important;}
.ShopMargin{margin-bottom: 5px;}

.TACenter {
    text-align: center;
}

.Pink{
	color: #ff00ff;
}

strong{font-weight:normal;}

.ArticleButton{
background: #17bebb;padding: 0px 33px 0px 32px;color: #FFF;text-decoration: none;text-align: center;font-weight:bold;display:inline-block;margin: 4px 4px;line-height: 2;}
.ArticleButton:hover{background: #97d0ca;}

.Orange{background: #ef8e76;}
.Orange:hover{background: #f4b09f;}

.AvailableSpaceInner{
	padding: 0px 33px 0px 32px;
}
.AvailableSpaceOuter{
	position: absolute;	
	bottom: 45px; 
	margin-left: auto;
	margin-right: auto;
	width:calc(100% - 6%);
}



p.Button { text-align: center;	margin: 16px 0 0;
}

.Col1{width:100%;}
.Col2{width:50%;}
.Col3{width:33.33%;}
.Col4{width:25%;}
.Col5{width:20%;}

.offin{margin-left:10px;line-height:1.4;}

.CentralButtons{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	
}

.PortfolioContainer .PortfolioOverlay{
	width: 100%;
    height: 100%;
    position: absolute;
	top:0px;
	left:0px;
    text-align: center;
    vertical-align: middle;
    margin-top: 0px;
	z-index:5;
    color: #1b998b;
}

.PortfolioContainer a ,.PortfolioOverlay a,.PortfolioContainer a:visited, .PortfolioOverlay a:visited{
color: #1b998b;
}

.PortfolioContainer:hover img{
    opacity: 0.15;
}

.PortfolioContainer:hover h3{
    opacity: 1;
	margin-top:25%;
}

.PortfolioContainer:hover p{
    opacity: 1;
}

.PortfolioContainer img{    
	position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
	top:0px;
	left:0px;
	z-index:3;
	transition: all 0.2s;
}

.PortfolioOverlay h3{
	z-index:5;
	opacity:0;
	transition: all 0.2s;
}

.PortfolioOverlay p{
	z-index:5;
	opacity:0;
	transition: all 0.2s;
}

table{ color:#000;
}

.ButttonBottom{	
    position: relative;
	}
	
.BanImg{
	width: 150%;
	max-width: 150%;
	/*left: -25%;*/
	position: relative;
	aspect-ratio: 905 / 177;}
	
.BookBG{
	    background-color: #97d0ca;
	}
	
.AccordionArticle{
	position:relative;
}

.Accord{
/*overflow: auto;*/}

.AccordPressAreaHeadings, .AccordPressAreaFoldedOutEvent, .AccordPressAreaFoldedInEvent{
	/*area where pressing by user expands/contracts the accordion */
	/*overflow: auto;
	display: table;*/
	width: 100%;
	/*float: left;*/
}

.AccordTopContent
{
	/*position:relative;
	float:left;*/
	width:calc(100% - 40px);
	/*display: table-cell;*/
    /*vertical-align: middle;*/
	float: left;	
	
}
.AccordIcon{
	/*position:relative;
	float:left;*/
	width:40px;
	/*margin-right:10px;*/
	/*display: table-cell;*/
    /*vertical-align: middle;*/
	float:left;
}

.icon-arrow-right{
	display: inline-block;
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.toggledA .icon-arrow-right {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}


.AccordGLeft
{
	position:relative;
	float:left;
	width:50px;	
	margin-top: 6px;
	margin-bottom: 10px;
	margin-right:5px;
}

.AccordGRight
{
	position:relative;
	float:left;
	width:calc(100% - 55px);	
	
}

.AccordMidL
{
	position:relative;
	float:left;
	width:calc(100% - 75px);	
	/*margin-left:10px;*/
}

.AccordMidR
{
	position:relative;
	float:left;
	width:35px;
	top: 5px;	
	font-weight:bold;
}

.AccordRight{
	position:relative;
	float:left;
	width:40px;	
	margin-top: -2px;
	margin-left: -5px;
}

.AccordionArticle img{
	width:100%;
}
.AccordionArticle h3{
	text-align:left;
}

.AccordionArticle .asecond{
	float: right;
    position: relative;
}
	
.AccordionArticle .athird{
	clear:left;
	height: 16px;
	overflow:hidden;
	font-size:14px;

}

.truncate
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.BlueUnderline
{
	text-decoration:underline;
	color:#00F;
}

.MobileHide{
	display:none;
}

.hidetext p{
	display:none;
}

.LiMargin{
	margin-left: 20px;
}

.LiSpace{
	line-height:2;
}

.LiSpace2{
	line-height:1.3;
}

.LiSpace3{
	line-height:1.6;
}

.LiWhite{
	color:#fff;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #E8FFFB;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.accessible{
	display:none;
}

.UnclickableNav{
	pointer-events: none;
}

.ClassTile{
    width: 99%;
    float: left;
	margin: 1% 0.5% 1% 0.5%;
	background:#1b998b14;
	border-radius: 15px;
	padding: 1%;
	
	text-align:center;
}

.MainTile{
	font-weight:bold;
}

.ClassTile2{
    width: 99%;
    float: left;
	margin: 1% 0.5% 1% 0.5%;
	background:#1b998b14;
	border-radius: 15px;
	padding: 1%;
	position:relative;
	text-align:center;
}

.MainTile2{
	font-weight:bold;
}

.MainTile3{
	font-weight:bold;
	float:left;
	width:50%;
}

.MainTile4-parent{
	display:table;
	height: 100%;
}

.MainTile4-child{
    display: table-cell;
    vertical-align: middle;	
}




.Time {color:#c000fff2;font-size:150%;}
.Title {color:#ff0081;font-size:125%;}
.Type {color:#6A1;font-size:125%;}
.Teacher {color:#031;font-size:125%;}
.ArrowDiv {position:relative; width:100%;}
.icon-Arrow {position:absolute; right:10px;transform: rotate(90deg);}
.icon-Arrow:before {
    content: "\e611";
}


.ClassTile:hover{
	background-color:#aaa;
}

.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black; *//* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  /*visibility: hidden;*/
  opacity:0;
  width: 69px;
  background-color: #eee;
  color: #000;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  left:77%;
  top: 25px;
   /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  border: 1px solid #fff;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    /*visibility: visible;*/
	transition: opacity 0s linear 0.2s;
	opacity:1;
}

.FW
{
	padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    /* box-sizing: content-box; */
    float: left;
	height: 1.0vw;
    font-size: 0.9vw;
}

.Big
{ width: 17.5%;}
.Small
{ width: 12.5%;}

.DefineHeight
{
	height: 25px;
}

.FirstArticleBreak
{
	width: 100%;
	min-height: 20px;
    /*background-color: #fff;*/
}

.ClassButtons
{
	display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.WebexClass
{
	position: relative;
	width:100%;
	background-color:#1b998b14;
	display: inline-block;
	margin: 1% 0.5% 1% 0.5%;
    border-radius: 15px;
}
.WebexPart
{
	position: relative;
	float:left;
	width:20%;
	text-align: center;
	padding:1%;
	min-height:40px;
}

.WebexClass2
{
	position: relative;
	width:66.66%;
	background-color:#1b998b14;
	display: inline-block;
	margin: 1% 0.5% 1% 0.5%;
    border-radius: 15px;
}

.WebexPart2
{
	position: relative;
	float:left;
	width:33.33%;
	text-align: center;
	padding:1%;
	min-height:40px;
}

.WebexButton{
	background: #17bebb;
    padding: 5px 33px 5px 32px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    display: inline-block;
}

@media only screen and (max-width:240px){
	/* Behaviour for very small screens - below normal mobile sizes */
	.MenuOuter, .TitleOuter, .PageLimit{width:240px;}
}

@media only screen and (min-width:360px)
{
	.AccordionArticle .afirst{
		margin-left: 10px;
	}
	
	.AccordGLeft{
	    width: 100px;
	}
	
	.AccordGRight{
		width: calc(100% - 105px);
	}
	
	.AccordMidL{
		margin-left:10px;
		width: calc(100% - 85px);
	}
	
}

@media only screen and (min-width:640px)
{
	.AccordionArticle{
		display:none;
	}
	
	.NonAccordionArticle{
		display:block;
	}

	
	.show{
	display:block;
	}

	.hide{
	display:none;
	}
	
	.MobileHide{
		display:block;
	}
	.AccordTopContent{
	    width: calc(100%);
	}
	.AccordIcon{
		display:none;
	}

}

@media only screen and (max-width:639px)
{
	.AccordionArticle{
		display:block;
	}
	
	.NonAccordionArticle{
		display:none;
	}
	
	.show{
	display:block;
	}
	
	.hide{
	display:none;
	}
	
}


	

@media only screen and (min-width : 640px) {
  
	p.Button {
		position: absolute;	
		bottom: 0px; 
		margin-left: auto;
		margin-right: auto;
		/*margin: 16px auto 16px auto;*/
		width: calc(100% - 6%);
		}

	.FlexBoxCellType-0{
		/*width:100%; */
	}

	.FlexBoxCellType-1{
		width:50%;
	}
	.FlexBoxCellType-2{
	    width: 50%;
	} 
	
	.ClassTile{
		width: 49%;
	}
	
	.ClassTile2{
		width: 51%;
	}	
	
	.FlexBoxCellType-3{
		width:33.33%;
	} 
	.FlexBoxCellType-4{
	    width: 50%;
	} 
	
	.ButttonBottom{	
    padding-bottom: 75px;
	}
	
	.ArticleLeft img, .ArticleRight img{width:40%;}
	
	.Img50 img {
    width: 50%;
	padding: 30px;
	}	
  
	.BanImg{
		width: 100%;
		max-width: 100%;
		left: 0%;}
  
}

@media only screen and (max-width : 639px) {
  
  .Row {
	display: table;
  }
  [class*="Col"] {
	float: none;
	display: table-cell;
	vertical-align: top;
	position: relative;
  }
  .Col1{width: 1200px;} /*50%;*/
  .Col2{width: 614px;} /*50%;*/
  .Col3{width: 614px;} /*33%;*/
  .Col4{width: 614px;} /*25%;*/
  .Col5{width: 614px;} /*20%;*/
  
}

	
@media only screen and (min-width:768px){
/* 768 and above is... */
[class*="FlexBoxCellType"]{border: calc(15px) solid #FFF;}

	.FlexBoxCellType-2{
	    width: 33.33%;
	} 
	
	.ClassTile{
		width: 49%;
	}
	
}

@media only screen and (min-device-width : 768px) and (max-device-width : 768px) {
	.UnclickableNav {
	   pointer-events: auto;
	}
}


@media only screen and (min-width:1000px){
/* 1000 and above is... */
	.FlexBoxCellType-4{
	    width: 33.33%;
	} 
}

/* IPAD EXCEPTION -LANDSCAPE- (CLICKABLE TO ALLOW DROP DOWN TO OCCUR) */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1024px) {
	.UnclickableNav {
	   pointer-events: auto;
	}
}

@media only screen and (min-width:1200px){
/* 1200 and above is... */
	.LimitMainInner {width: 1200px;}
	
	[class*="FlexBoxCellType"]{
		border-top: calc(5px) solid #FFF;
		border-bottom: calc(5px) solid #FFF;
		border-left: calc(25px) solid #FFF;
		border-right: calc(25px) solid #FFF;
		}
	
	.PortfolioContainer h3{
		font-size:30px;
		margin-top:15%;
	}
	.PortfolioContainer p{
		font-size:14px;
		margin: 10px;
		margin-top:15%;
	}
	
	  .FlexBoxCellType-2{
		width:25%;
	}
	
	.ClassTile{
		width:24%;
	}
	
}

@media only screen and (min-width:1400px){
	  .FlexBoxCellType-4{
	    width: 25%;
	} 
}

@media only screen and (min-width:1600px){
	  .FlexBoxCellType-2{
		width:20%;
	} 
	  .FlexBoxCellType-4{
	    width: 25%;
	} 
	.ClassTile{
		width:24%;
	}
}

@media only screen and (min-width:2500px){
	  .FlexBoxCellType-2{
		width:16.66%;
	} 
	  .FlexBoxCellType-4{
	    width: 20%;
	} 
	 .ClassTile{
		 width:24%;
	 }
}

@media only screen and (max-width:1200px){
	.BannerImgOverlay
	{
		position:relative;
		background-color: #1b998b;
		width:100%;
		left:0px;
	}
}