/*
	Copyright � Interactive Services 2013 - 2019 All Rights Reserved.  
	No part of this code may be used, with or without modification, without prior consent from Interactive Services. 
	Chameleon Gold Version 2.0, 01 January 2019
*/
/*
body.rtl{
	direction: rtl;
}*/

body.ios .repaint{
	position: absolute !important;
}

body.ie .interfaceSlide #wrapper .fill{
	overflow: hidden;
}

body.ie .interfaceSlide #wrapper .fill.allowOverflow{
	overflow: initial !important;
}

body.lowBandwidth .highBandwidth{
	display: none;
}

body:not(.lowBandwidth) .lowBandwidth{
	display: none;
}

.phoneNotAvailable{
	display: none;
}

[data-visible=false]:not(.editAsset){
	display: none;
}

.hiddenEditor{
	display: none;
}

body:not(.accessiblefocus) :focus {
	outline: none;
}

body:not(.ie).accessiblefocus :focus {
  outline-color: #ff0000;
}

body.ie.accessiblefocus :focus {
	outline: 1px dotted #ff0000;
}

.testFocus{
	border: 1px solid red;
}

.captivateframe{
  position: absolute;
  top: 0px;
  left: 0px;
	height: 100%;
	width: 100%;
}

.gradient_bg_purple {
	background: #7db9e8; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%, #1e5799 97%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 97%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, #7db9e8 0%,#1e5799 97%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.halfBlack{
	background-image: url(../framework_images/halfBlack.png);
	background-repeat: repeat-y;
	background-position: 0% 100%;
	background-size: 100% 100%;
}

.blueContentPanel {
	background: #0075bf; /* Old browsers */
	background: -moz-linear-gradient(top, #0075bf 1%, #3eaceb 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #0075bf 1%,#3eaceb 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #0075bf 1%,#3eaceb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0075bf', endColorstr='#3eaceb',GradientType=0 ); /* IE6-9 */
}

.orangeContentPanel {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9c667+0,f79621+100;Orange+3D+%234 */
	background: #f9c667; /* Old browsers */
	background: -moz-linear-gradient(top, #f9c667 0%, #f79621 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f9c667 0%,#f79621 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f9c667 0%,#f79621 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=0 ); /* IE6-9 */
}

.whiteContentPanel {
	background: #ffffff; 
	margin-top:-30px;
}

.CGpanel{
	border-width: 0px 0px 0px 7px !important;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	padding: 30px;
}

.CGpanel.noRadius{
	border-radius: 0px;
}

.CGpanel.border_top{
	border-width: 7px 0px 0px 0px !important;
}

.greyRoundedPanel{
	background-color: rgba(0, 0, 0, 0.2);
	border-bottom-right-radius: 20px;
	padding: 40px;
}

body.rtl .greyRoundedPanel{
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 20px;
}

.blackBg{
	background-color: rgba(0, 0, 0, 0.2);
}

.paddedPanel{
	padding: 0px 50px;
}

.centerImg{
	display: block;
	margin: auto;
}

.mobileInlineImage{
	display: none;
}

/*
#timelineItems .tl_panelText .body_txt_1, #timelineItems .CGpanel.tl_panelTextUnderImage .body_txt_1, #timelineItems .timeTarget .CGpanel.tl_panelTextUnderImage .body_txt_1 {
	color:inherit !important;
}*/

.flipCard.CGpanel{
	border-radius:0px;
}

.orangeLine{
	border-top-width: 2px !important;
	margin-top: 5px;
}

.examBorderBottomWhite{
	border-bottom: 2px solid #fff;
	padding: 20px 0px;
	margin-bottom:20px;
	display:inline-block;
	width:auto;
	color:white !important;
}

/*.centerVertical.examPanel.intro {
    top: 40%;
    -webkit-transform: perspective(1px) translateY(-40%) translateY(-35px);
    -moz-transform: perspective(1px) translateY(-40%) translateY(-35px);
    -o-transform: perspective(1px) translateY(-40%) translateY(-35px);
    transform: perspective(1px) translateY(-40%) translateY(-35px);
}*/

.questionBorderTopBottomWhite{
	/*border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;*/
	border-width: 2px !important;
	padding: 20px 0px;
}

.questionBorderTopWhite {
  border-top: 2px solid #fff;
  padding: 20px 0px;
}

.questionBorderTopBottomWhiteShort{
	/*border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;*/
	border-width: 2px !important;
	padding: 10px 0px;
}

.questionBorderTopBottomBlack{
	/*border-top: 2px solid #000;
	border-bottom: 2px solid #000;*/
	border-width: 2px !important;
	padding: 10px 0px;
	margin: 10px 0px;
}

.questionBorderTopBottomOrange{
	/*border-top: 2px solid #f78c22;
	border-bottom: 2px solid #f78c22;*/
	padding: 20px 0px;
}

#particles-js{
	position: absolute;
	top: 20%;
	left: 10%;
	height: 60%;
	width: 40%;
	opacity: 0.1;
}

body.rtl #particles-js:not(.pull-right){
	left: initial;
	left: auto;
	right: 10%;
}

#particles-js.pull-right {
	right:10%;
	left:50%;
}

body.rtl #particles-js.pull-right{
	right:50%;
	left:10%;
}


#phonelandscape{
	display: none;
  position: fixed;
  top: 0px;
  left: 0px;
	height: 100%;
	width: 100%;
	background-color: #fff;
	background-image: url(../framework_images/rotate.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 50% auto;
	z-index: 700;
}

.overflowY{
	overflow-y: auto;
}

.compBlackOut{
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 5;
}

.menuBlackOut > .compBlackOut{ 
	z-index: 19;
}

.blackOutOpen{
	overflow: hidden;
}


#lock{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -128px;
	margin-top: -128px;
	width: 256px;
	height: 256px;
	background-image: url(../framework_images/lock.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	z-index: 850;
	display: none;
}

.drag_area {
	width:100%;
	min-height:25px;
}

html {
	height:100%;
	width:100%;
	min-height:100%;
}

p{
	margin: 0px;
}



html * {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		 -moz-box-sizing: border-box;
			 -o-box-sizing: border-box;
		/*-ms-box-sizing: border-box;     Firefox, other Gecko */
				  box-sizing: border-box;         /* Opera/IE 8+ */
}

body {
	-webkit-text-size-adjust: none;
		 -moz-text-size-adjust: none;
			-ms-text-size-adjust: none;
			 -o-text-size-adjust: none;  
					text-size-adjust: none;
					
	min-width:480px;
	height:100%;
	padding:0px;
	margin:0px;
	overflow: hidden;

	color: #272727;
}

.patternCover_1{
	background-image: url(../framework_images/mobile_tile_patterns/pattern_bg.png);
	background-position: center center;
	background-repeat: repeat;
}

[data-inject_text], [data-inject_common]{
	/*word-wrap: break-word;*/
}

.centreContentContainer{
	width: 100%;
	height: 100%;
}

body.ios8 select{
	font-size: 16px;
}

body.ie9 > .centreContentContainer > #centreContent{
	padding-bottom: 0px;
}

/*ie9 fix for pop_text, splash, reflection, flipgame*/
body.ie9 .interfaceSlide, body.ie9 #wrapper, body.ie9 .container-fluid, body.ie9 #thumbnailScreenSlider {
	box-sizing:content-box;
}

/* IE9 fix for video in performance rate screen */
body.ie9 #videoSlide {
	width:100%;
	height:100%;
	position:absolute;
}

.interfaceSlide{
	position: absolute;
	top: 0px;
	left: -10000px;
	height: 100%;
	width: 100%;
	overflow-y: hidden;
	overflow-x: hidden;	
	/*
	-webkit-transition: background-image 0.9s linear;
		 -moz-transition: background-image 0.9s linear;
			 -o-transition: background-image 0.9s linear;
					transition: background-image 0.9s linear;			*/
}

.interfaceSlide.curPageSlide{
	left: 0px;
	visibility: visible;
	overflow-y: auto;
}

.interfaceSlide.curPageSlide.noBgImage{
	background-image: none !important;
}

.interfaceSlide.curPageSlide.menuScreen{
	height: calc(100% - 70px);
	padding-bottom:130px;
}

body.rtl .interfaceSlide:not(.parallaxBg):not(.disable_rtl_flip){
	background-size: 0px !important;
}

body.rtl .interfaceSlide:not(.parallaxBg):not(.disable_rtl_flip):before{
	content:"";
	position: absolute;
	top: 0px;
	left: 0px;
  width: 100%;
  height: 100%;
  background-image: inherit;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right top;
	
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}

body.ie #menuItems{
	margin-bottom: 130px;
}
/*
body.touch_device .interfaceSlide.curPageSlide.transcriptOpen{
	height: calc(100% - 180px);
}
*/
.interfaceSlide.inactive{
	visibility: hidden;
}

.interfaceSlide #wrapper:not(.fullWidthMenu){
	-webkit-transition: opacity 0.9s linear;
		 -moz-transition: opacity 0.9s linear;
			-ms-transition: opacity 0.9s linear;
			 -o-transition: opacity 0.9s linear;
					transition: opacity 0.9s linear;
	
	opacity: 0;
	height: 100%;
}

.interfaceSlide.showPage.curPageSlide #wrapper{
	opacity: 1;
}

.interfaceSlide.curPageSlide #wrapper.noRightPadding{
	padding-right: 0px;
}

.interfaceSlide.curPageSlide #wrapper.noLeftPadding{
	padding-left: 0px;
}

/*
.interfaceSlide.curPageSlide{
	-webkit-filter: blur(5px);
		 -moz-filter: blur(5px);
			 -o-filter: blur(5px);
			-ms-filter: blur(5px);
}
*/





/*********************** PROGRESS INDICATOR ******************************/
.frameworkProgressIndicator{
	width: 100px;
	margin-left: -50px;
	text-align: center;
	height: 25px;
	
	-webkit-transition: bottom 0.5s ease-in-out;
  	 -moz-transition: bottom 0.5s ease-in-out;
  		-ms-transition: bottom 0.5s ease-in-out;
  		 -o-transition: bottom 0.5s ease-in-out;
  				transition: bottom 0.5s ease-in-out;
  				
  z-index: 49;
}

.frameworkProgressIndicator.standard{
	position: absolute;
	left: 50%;
	bottom: 25px;
	width: 100px;
	margin-left: -50px;
	text-align: center;
	height: 25px;
}

.frameworkProgressIndicator.numberIndicator{
	color:#ccc;
}

.fpi_dot {
	float: left;
	background-image: url(../../framework_images/fpi_default.png);
	background-position: center;
	background-repeat: no-repeat;
	margin: 2px;
	width: 16px;
	height: 16px;
}


.fpi_dot.visited{
	background-image: url(../../framework_images/fpi_visited.png);
}

.fpi_dot.current{
	background-image: url(../../framework_images/fpi_current.png);
}

.slide_up, .slide_down{
	position: absolute;
	width: 51px;
	height: 25px;
	cursor: pointer;
	background-position: center center;
	background-repeat: no-repeat;
	
	-webkit-transition: bottom 0.5s ease-in-out, background-image 0.5s ease-in-out;
  	 -moz-transition: bottom 0.5s ease-in-out, background-image 0.5s ease-in-out;
  		-ms-transition: bottom 0.5s ease-in-out, background-image 0.5s ease-in-out;
  		 -o-transition: bottom 0.5s ease-in-out, background-image 0.5s ease-in-out;
  				transition: bottom 0.5s ease-in-out, background-image 0.5s ease-in-out;
  				
  z-index: 49;
}

.slide_up{
	/*background-image: url(../framework_images/nav_images/gui_arrow_up_standard.png);*/
}

.slide_down{
	/*background-image: url(../framework_images/nav_images/gui_arrow_down_standard.png);*/
}

.slide_up.standard{
	left: 50%;
	margin-left: -25px;
	bottom: 50px;
}

.slide_down.standard{
	left: 50%;
	margin-left: -25px;
	bottom: 0px;
}

.slide_up.topBottom{
	left: 50%;
	width: 74px;
	height: 42px;
	margin-left: -37px;
	top: 10px;
	/*background-image: url(../framework_images/nav_images/gui_arrow_top.png);*/
}

.slide_up.topBottom.disabled{
	/*background-image: url(../framework_images/nav_images/gui_arrow_top_disabled.png);*/
	cursor: default;
}

body:not(.touch_device) .slide_up.topBottom:not(.disabled):hover{
	/*background-image: url(../framework_images/nav_images/gui_arrow_top_over.png);*/
}

.slide_down.topBottom{
	left: 50%;
	width: 74px;
	height: 42px;
	margin-left: -37px;
	bottom: 10px;
	/*background-image: url(../framework_images/nav_images/gui_arrow_bottom.png);*/
}

.slide_down.topBottom.disabled{
	/*background-image: url(../framework_images/nav_images/gui_arrow_bottom_disabled.png);*/
	cursor: default;
}

body:not(.touch_device) .slide_down.topBottom:not(.disabled):hover, .slide_down.topBottom.flashing{
	/*background-image: url(../framework_images/nav_images/gui_arrow_bottom_over.png);*/
}

.centreContentContainer.videoNav .slide_up.standard{
	bottom: 100px;
}

body.ios8 .centreContentContainer.videoNav .slide_up.standard{
	bottom: 120px;
}

.centreContentContainer.videoNav .frameworkProgressIndicator.standard{
	bottom: 75px;
}

body.ios8 .centreContentContainer.videoNav .frameworkProgressIndicator.standard{
	bottom: 95px;
}

.centreContentContainer.videoNav .slide_down.standard{
	bottom: 50px;
}

body.ios8 .centreContentContainer.videoNav .slide_down.standard{
	bottom: 70px;
}

.centreContentContainer.hideNavButtons .slide_up, .centreContentContainer.hideNavButtons .slide_down, .centreContentContainer.hideNavButtons .frameworkProgressIndicator, .centreContentContainer.hideNavButtons .slide_left, .centreContentContainer.hideNavButtons .slide_right{
	display: none;
}

.slide_left, .slide_right{
	position: absolute;
	top:50%;
	margin-top: -52px;
	width: 52px;
	height: 105px;
	cursor: pointer;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	z-index: 35;
	
	-webkit-transition: top 0.5s ease-out, background-image 0.5s ease-in-out;
  	 -moz-transition: top 0.5s ease-out, background-image 0.5s ease-in-out;
  		-ms-transition: top 0.5s ease-out, background-image 0.5s ease-in-out;
  		 -o-transition: top 0.5s ease-out, background-image 0.5s ease-in-out;
  				transition: top 0.5s ease-out, background-image 0.5s ease-in-out;
}


.slide_left{
	left: 0px;
	/* background-image: url(../framework_images/nav_images/gui_arrow_left.png);*/
}

.slide_left.disabled{
	/*background-image: url(../framework_images/nav_images/gui_arrow_left_disabled.png);*/
	cursor: default;
}

body:not(.touch_device) .slide_left:not(.disabled):hover{
	/*background-image: url(../framework_images/nav_images/gui_arrow_left_over.png);*/
}

.slide_right{
	right: 0px;
	/*background-image: url(../framework_images/nav_images/gui_arrow_right.png);*/
}

.slide_right.disabled{
	/*background-image: url(../framework_images/nav_images/gui_arrow_right_disabled.png);*/
	cursor: default;
}

body:not(.touch_device) .slide_right:not(.disabled):hover, .slide_right.flashing{
	/*background-image: url(../framework_images/nav_images/gui_arrow_right_over.png);*/
}

.slide_down.flashing, .slide_right.flashing{
	-webkit-animation: flashing_next 1s linear infinite;
		 -moz-animation: flashing_next 1s linear infinite;
	     -o-animation: flashing_next 1s linear infinite;
					animation: flashing_next 1s linear infinite;
}

@-webkit-keyframes flashing_next {
  50% { opacity: 0.0; }
}
 
@-moz-keyframes flashing_next {
  50% { opacity: 0.0; }
}
 
@-o-keyframes flashing_next {
  50% { opacity: 0.0; }
}

@keyframes flashing_next {
  50% { opacity: 0.0; }
}


/************** bottomRight ****************/
.slide_left.bottomRight, .slide_right.bottomRight{
	position: absolute;
	top: auto;
	top: initial;
	bottom: 0px;
	margin-top: 0px;
	width: 105px;
	height: 58px;
	
	-webkit-transition: all 0.5s ease-out;
  	 -moz-transition: all 0.5s ease-out;
  		 -o-transition: all 0.5s ease-out;
  				transition: all 0.5s ease-out;
}


.slide_left.bottomRight{
	left: auto;
	left: initial;
	right: 135px;
	background-image: url(../framework_images/nav_images/gui_br_left.png);
}

.slide_left.bottomRight.disabled{
	background-image: url(../framework_images/nav_images/gui_br_left_disabled.png);
	cursor: default;
}

body:not(.touch_device) .slide_left.bottomRight:not(.disabled):hover{
	background-image: url(../framework_images/nav_images/gui_br_left_over.png);
}

.slide_right.bottomRight{
	right: 30px;
	background-image: url(../framework_images/nav_images/gui_br_right.png);
}

.slide_right.bottomRight.disabled{
	background-image: url(../framework_images/nav_images/gui_br_right_disabled.png);
	cursor: default;
}

body:not(.touch_device) .slide_right.bottomRight:not(.disabled):hover, .slide_right.flashing{
	background-image: url(../framework_images/nav_images/gui_br_right_over.png);
}

.centreContentContainer.videoNav  .slide_right.bottomRight{
	bottom: 80px;
	right: 0px;
	
	 -webkit-transform: scale(0.5);
	 		-moz-transform: scale(0.5);
	 			-o-transform: scale(0.5);
	 				 transform: scale(0.5);
	
}

.centreContentContainer.videoNav .slide_left.bottomRight{
	bottom: 80px;
	right: 53px;
	
	 -webkit-transform: scale(0.5);
	 		-moz-transform: scale(0.5);
	 			-o-transform: scale(0.5);
	 				 transform: scale(0.5);
	
}

body.ios .centreContentContainer.videoNav  .slide_right.bottomRight{
	bottom: 41px;
}

body.ios .centreContentContainer.videoNav .slide_left.bottomRight{
	bottom: 41px;
}



body.touch_device .slide_up:hover{
	/* background-image: url(../framework_images/nav_images/gui_arrow_up_standard.png);*/
}

.slide_up:hover{
	/* background-image: url(../framework_images/nav_images/gui_arrow_up_orange.png);*/
}

.slide_down:hover, .slide_down.flashing{
	/* background-image: url(../framework_images/nav_images/gui_arrow_down_orange.png);*/
}

body.touch_device .slide_down.flashing:hover {
	/* background-image: url(../framework_images/nav_images/gui_arrow_down_orange.png);*/
}
body.touch_device .slide_down.disabled:hover {
	/* background-image: url(../framework_images/nav_images/gui_arrow_down_disabled.png);*/
}
body.touch_device .slide_down:hover {
	/* background-image: url(../framework_images/nav_images/gui_arrow_down_standard.png);*/
}

.slide_up.disabled{
	/* background-image: url(../framework_images/nav_images/gui_arrow_up_disabled.png);*/
	cursor: default;
}
.slide_down.disabled{
	/* background-image: url(../framework_images/nav_images/gui_arrow_down_disabled.png);*/
	cursor: default;
}

body .centreContentContainer .interfaceBtn.slide_up.editing, body .centreContentContainer .interfaceBtn.slide_down.editing, body .centreContentContainer .interfaceBtn.slide_left.editing, body .centreContentContainer .interfaceBtn.slide_right.editing{
	top: 100%;
	margin-top: 52px;
}


.screenSlide{
	position: absolute;
	top: -3000px;
	left: 0px;
	height: auto;
	width: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.screenSlide.noInterfacePadding{
	padding: 0px;
}

.screenSlide.slidingSlide{
	-webkit-transition: all 0.5s ease-in;
  	 -moz-transition: all 0.5s ease-in;
  		-ms-transition: all 0.5s ease-in;
  		 -o-transition: all 0.5s ease-in;
  				transition: all 0.5s ease-in;
  				
  z-index: 43;
}

.screenSlide.curSlide{
	display: block;
	top: 0px;
}

.screenSlide.curSlideOff{
}

.screenSlide.closed{
	display: none;
}

.screenSlide.nextSlide{
	display: none;
	left: 0px;
}

body.rtl .screenSlide:not(.curSlide){
	background-size: 0px;
	display: none;
}

body.rtl .screenSlide:before{
	content:"";
	position: absolute;
	top: 0px;
	left: 0px;
  width: 100%;
  height: 100%;
  background-image: inherit;
	background-repeat: no-repeat;
	background-size: cover;
	
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}


.bg_hide{
	background-size: 0px 0px !important;
}

.bg_pos_0 {
	background-position: 0 50%;
}
.bg_pos_10 {
	background-position: 10% 50%;
}
.bg_pos_20 {
	background-position: 20% 50%;
}
.bg_pos_30 {
	background-position: 30% 50%;
}
.bg_pos_40 {
	background-position: 40% 50%;
}
.bg_pos_50 {
	background-position: 50% 50%;
}
.bg_pos_60 {
	background-position: 60% 50%;
}
.bg_pos_70 {
	background-position: 70% 50%;
}
.bg_pos_80 {
	background-position: 80% 50%;
}
.bg_pos_90 {
	background-position: 90% 50%;
}
.bg_pos_100 {
	background-position: 100% 50%;
}


.bottom_right{
	background-position: 100% 100%;
}

.bottom_left{
	background-position: 0% 100%;
}

.top_right{
	background-position: 100% 0px;
}

.top_left{
	background-position: 0% 0px;
}

.bg_center{
	background-position: 50% 50%;
}

.timelineBG {
	background-position: 50% 0%;
}

.invisible, .hideInjectText:not(.isEditable), .hiddenBgImage{
	display: none !important;
}

.hiddenElement{
	visibility: hidden;
}

.container {
	min-width:320px;
	width:1024px;
	max-width:100%;
	min-height:100%;
	width:1024px\9;
}

#videoBlackout {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	display: none;
	z-index: 100;
}

#videoOverlay {
	position:fixed;
	top:15%;
	left:50%;
	margin-left:-415px;
	max-width:850px;
	padding-left:	10px;
	padding-right:	10px;
	padding-bottom:	10px;
	width: 90%;
	height:auto;
	background-color:white;
	text-align:center;
	box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.4);
}

#iosBtn{
	display: none;
}

body.ios11 .interfaceSlide.curPageSlide #wrapper.md #iosBtn, body.ios11 .interfaceSlide.curPageSlide #wrapper.sm #iosBtn{
	display: block;
}

.blackout{
	position:fixed;
	top:0px;
	width:100%;
	height:100%;
	left:0px;
	background-color:rgba(0,0,0,0.4);
	z-index: 999;
}

video#video {
	margin-top: 10px;
	min-height: 400px;
	height: 420px;
	width: 90%;
}


video#vid1 {
	width:100%;
}

iframe#videoFrame, #ie8videoplayer {
	width:100%;
	max-width:830px;
	min-height:466px;
	height:auto;
	border-top-width: 5px !important;
	border-bottom-width: 5px !important;
	background: #000000;
	border: solid 10px white;
}

#closeX {
	width:80px;
	height: 30px;
	padding-top: 6px;
	color: #54b948;
	text-align: left;
	margin-left: auto;
	font-size: 18px;
	font-weight: bold;
	background-image: url(../framework_images/Close-x_a.jpg);
	background-position:right center;
	background-repeat:no-repeat;
	cursor: hand;
	cursor: pointer;
	z-index: 111;
}

#closeX:hover{
	color: #ffc120;
	background-image: url(../framework_images/Close-x_b.jpg);
}

.green {
	border: 1px solid #54b948 !important;
	background-image:url(../framework_images/correct.jpg);
}

.amber {
	border: 1px solid #ffc222 !important;
	background-image:url(../framework_images/partly_correct.jpg);
}

.red {
	border: 1px solid #f26649 !important;
	background-image:url(../framework_images/incorrect.jpg);
}

#popupPanel.red {
	border: 1px solid #f26649;
}

#popupPanel > p {
	min-height:70%;
	padding-bottom:10px;
	padding-left: 80px;
	background-repeat: no-repeat;
	min-height: 100px;
	padding-bottom: 20pt;
}

#popupPanel.green p {
	background-image: url(../framework_images/correct.jpg);
}

#popupPanel.amber p {
	background-image: url(../framework_images/partly_correct.jpg);
}

#popupPanel.red p {
	background-image: url(../framework_images/incorrect.jpg);
}

#popupPanel > input[type=button] {
	margin-top:10px;
	cursor:pointer;
	width:150px;
	margin-left:-75px;
}

/* END POPUP FEEDBACK PANEL */

#hidePanel {
	position:relative;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	width:53px;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	height:63px;
	background-color:#449944;
	color:white;
	font-size:36px;
	line-height:36px;
	cursor:pointer;
	z-index:100;
	margin-left:auto;
	margin-top:15px;
	margin-right:-10px;
	padding:8px;
	border:0px solid white;
	background: #6ddd35; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzZkZGQzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YTlmNDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #6ddd35 1%, #4a9f40 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#6ddd35), color-stop(100%,#4a9f40)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #6ddd35 1%,#4a9f40 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #6ddd35 1%,#4a9f40 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #6ddd35 1%,#4a9f40 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #6ddd35 1%,#4a9f40 100%); /* W3C */
	/*filter:none;*/
}

#hidePanel img {
	height:auto;
	width:auto;
	margin:5px 2px;
}

/* COLOUR SCHEMES */
#panImage {
	position:fixed;
	width:100%;
	max-width:100%;
	height:100%;
	max-height:100%;
	background-color:white;
	top:0%;
	left:0%;
	z-index:100;
/*	overflow:auto; */
	-webkit-overflow-scrolling:touch;
	-webkit-backface-visibility: hidden;
}

#panImage img {
	width:100%;
	height:auto;
	-webkit-backface-visibility: hidden;
	margin-left:0px;
	margin-top:0px;
/*	position: relative; */
	cursor:move;
}

.hidden {
	display:none;
}

#navigation select {
	display:none;
}

#audioPopupOverlay, #activityPopupOverlay {
	position:fixed;
	top:0px;
	width:100%;
	height:100%;
	left:0px;
	/*background-color:rgba(0,0,0,0.5);*/
	text-align:center;
	z-index:6;
}

#activityPopupOverlay {
	z-index: 100;
}

#audioOverlay{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -350px;
	margin-top: -100px;
	width: 700px;
	height: auto;
	z-index: 20;
}

.pu_header{
	text-align: center;
	padding: 0px 0px 10px 0px;
	height: auto;
}

.pu_body{
	text-align: center;
	padding: 0px 30px;
	height: auto;
}

#multimedia_prompt, #displayError {
	position: absolute;
	top: 20%;
	left: 50%;
	margin-left: -240px;
	width: 480px;
	height: auto;
	background-color: #000;
	border: 3px solid #fff;
	color: #fff;
	z-index: 3005;
}

.btnStyle2.errorBtn{
	margin: 10px auto;
	width: 200px;
	display: block;
}


#error_header {
	display: block;
	padding: 5px;
}

#browserError_prompt{
	position: absolute;
	top: 10%;
	left: 50%;
	margin-left: -240px;
	width: 480px;
	min-height: 160px;
	height: auto;
	background-color: #000;
	z-index: 15;
}

.error_header_yellow {
	background: rgb(255,197,120); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYzU3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYjlkMjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(255,197,120,1) 0%, rgba(251,157,35,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,197,120,1)), color-stop(100%,rgba(251,157,35,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* W3C */
}

.error_header_red {
	background: rgb(255,48,25); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzAxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZjA0MDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C */
}

.error_header_green{
	background: #6ddd35; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzZkZGQzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YTlmNDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #6ddd35 1%, #4a9f40 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#6ddd35), color-stop(100%,#4a9f40)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #6ddd35 1%,#4a9f40 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #6ddd35 1%,#4a9f40 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #6ddd35 1%,#4a9f40 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #6ddd35 1%,#4a9f40 100%); /* W3C */
}

#displayError #closeError{
	margin: 10px auto;
	width: 200px;
	display: block;
}


#error_msg{
	padding: 10px;
}


#bookmark_prompt {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	
	background-image:url(../framework_images/bookmark_icon.png);
	background-repeat:no-repeat;
	background-position:center 30%;
	
	z-index: 20;
}

.bookmarkPanel{
	position: absolute;
	top: 30%;
	left: 50%;
	margin-left: -245px;
}

#activity_prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -350px;
    margin-top: -100px;
    width: 700px;
    height: auto;
    z-index: 20;
}

#activity_prompt_msg{
	min-height: 20px;
}

#certificate_prompt {
	position: absolute;
	top: 10%;
	left: 50%;
	margin-left: -240px;
	width: 90%;
	max-width: 480px;
	height: auto;
	background-color: #000;
	z-index: 20;
}

input#studentName{
	width: 70%;
	margin-left: 15%;
}

#loadingIndicator {
	position:fixed;
	top:40%;
	left:50%;
	margin-left:-50px;
	width:100px;
	height:100px;
	background-color:white;
	background-image:url(../framework_images/preloader.gif);
	background-repeat:no-repeat;
	background-position:center center;
	z-index:580;
}

#loadingIndicator div.percentage {
	position: absolute;
	font-family: "Roboto_Regular", Arial, sans-serif;
	font-size: 11px;
	line-height: 12px;
	color: #fefefe;
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: -15px;
	width: 30px;
	height: 20px;
}

#loadingIndicator div.text {
	position: absolute;
	font-family: "Roboto_Regular", Arial, sans-serif;
	font-size: 11px;
	line-height: 12px;
	color: #FEFEFE;
	bottom: 0%;
	left: 50%;
	margin-left: -50px;
	width: 100px;
	height: 16px;
}




:root #floatingNavigation div  { filter:none \0/IE9; }  /* IE9 */
:root #floatingNavigation div a.hovered { filter:none \0/IE9; }  /* IE9 */
:root #floatingNavigation div a { filter:none \0/IE9; }  /* IE9 */
:root #cs_menu ul li  { filter:none \0/IE9; }  /* IE9 */
:root #cs_menu ul li.disabled { filter:none \0/IE9; }  /* IE9 */
:root #zoomButtons { filter:none \0/IE9; }  /* IE9 */
:root #hidePanel  { filter:none \0/IE9; }  /* IE9 */

#certificatePrompt {
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	z-index: 1100;
}

#certificateName {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -200px;
	margin-top: -70px;
	width: 400px;
	height: 140px;
	background-color: #FFF;
	border: 1px solid #FFF;
	box-shadow: 0px 0px 5px 5px #777;
	z-index: 598;
}

#certificateName .pu_header{
	background-image: none;
}

#certificateName input#studentName {
	width: 60%;
	font-size: 12px;
	height: 30px;
	padding-left: 5px;
	border: 1px solid #CCC;
	margin-bottom: 10px;
}

.certificateText{
	padding-bottom: 10px;
	font-weight: bold;
	color: #54b948;
}


#nameAlert{
	text-align: center;
	min-height: 30px;
	padding-top: 10px;
	font-weight: bold;
	color: #F68721;
}

#feedbackPanel {
	position:fixed;
	top:0px;
	width:100%;
	left:0px;
	text-align:center;
	z-index:900;
}
.feedback_holder {	
	min-width: 480px;
	padding: 10px;
	border-radius: 6px;
	overflow: auto;
	position: absolute;
	left: 50%;
	margin-top:  100px;
	margin-left: -526px;
}
.feedback_holder #onScreenFeedback {	
	width: 984px;
}


/********************************************************************/
/********************* SCORM ERROR MESSAGE **************************/
/********************************************************************/
#scormError{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(256, 256, 256, 0.8);
	z-index: 1000;
}

#scormError #scormErrorPanel #scormErrorBtn{
	display:none;
}

#scormErrorPanel{
	position: absolute;
	top: 10%;
	left: 50%;
	margin-left: -275px;
	width: 550%;
	max-width: 550px;
	height: auto;
	min-height: 200px;
	font-family: "Roboto_Regular", Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	text-align: left;
	color: #404040;
	background-color: #FAFAFA;
	border: 2px #D79900 solid;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	z-index: 620;
	
	background-image: url(../framework_images/scorm_error.jpg);
	background-repeat: no-repeat;
	background-position: 10px 25px;
}

.scormHeader{
	min-height: 20px;
	font-weight: bold;
	border-bottom: 2px solid #D79900;
	background-color: #FFF2BA;
	color: #404040;
	width:100%;
}

.scormBody{
	padding-left: 75px;
	padding-top: 15px;
	padding-bottom: 75px;
	padding-right: 10px;
	word-wrap: break-word;
}

#scormErrorBtn{
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -40px;
	margin-top: -55px;
	line-height: 10px;
	font-size: 16px;
}

.scormBack{
	float: left;
	width: 5%;
	max-width: 25px;
	height: 20px;
	cursor: pointer;
}

.scormBack:hover{
	color:#ccc;
}

.scormErrorCount{
	float: left;
	width:	90%;
	text-align: center;
}

.scormNext{
	text-align:right;
	float: left;
	width: 5%;
	max-width: 25px;
	height: 20px;
	cursor: pointer;
}

.scormNext:hover{
	color:#ccc;
}


/* FULL SCREEN VIDEO */
#full_screen_video {
	position: absolute;
	width: auto;
	height: auto;
	background-size: cover;
	left: 0px;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	display:none;
}

@media (min-width:1024px) and (min-height:850px) {
	#full_screen_video {
		margin-left: -33%;
	}
}

@media (max-width:800px) {
	#full_screen_video {
		margin-left: -55%;
	}
}

#t_video_cont {display:none;}
.previous_content.completed_anim {display:none!important;}

.spacer {padding: 20px 0;}
.relative {position: relative;}


/*!
 * roundSlider v1.3 | (c) 2015-2016, Soundar
 * MIT license | http://roundsliderui.com/licence.html
 */

.rs-control { position: relative; outline: 0 none; }
.rs-container { position: relative; }
.rs-control *, .rs-control *:before, .rs-control *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.rs-animation .rs-transition
{
    -webkit-transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}
.rs-bar
{
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.rs-control .rs-split .rs-path,
.rs-control .rs-overlay1,
.rs-control .rs-overlay2
{
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.rs-control .rs-overlay
{
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.rs-control.rs-error
{
    border: 1px dotted;
    text-align: center;
}
.rs-readonly {
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    z-index: 100;
}
.rs-disabled {
    opacity: 0.35;
}
.rs-inner-container
{
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.quarter div.rs-block { height: 200%; width: 200%; }
.half.top div.rs-block, .half.bottom div.rs-block { height: 200%; width: 100%; }
.half.left div.rs-block, .half.right div.rs-block { height: 100%; width: 200%; }
.bottom > .rs-inner-container > .rs-block { top: auto; bottom: 0; }
.right .rs-inner-container > .rs-block { right: 0; }
div.rs-block { -webkit-border-radius: 100%; border-radius: 100%; }
.rs-block
{
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 3;
}
.rs-block .rs-inner
{
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
}
.rs-overlay { width: 50%; }
.rs-overlay1, .rs-overlay2 { width: 100%; }
.rs-overlay, .rs-overlay1, .rs-overlay2
{
    position: absolute;
    background-color: white;
    z-index: 3;
    top: 0;
    height: 50%;
}
.rs-bar
{
    position: absolute;
    height: 0;
    z-index: 10;
}
.rs-bar.rs-rounded {
    z-index: 5;
}
.rs-bar .rs-seperator {
    height: 0px;
    display: block;
    float: left;
}
.rs-bar:not(.rs-rounded) .rs-seperator {
    border-left: none;
    border-right: none;
}
.rs-bar.rs-start  .rs-seperator { border-top: none; }
.rs-bar.rs-end  .rs-seperator { border-bottom: none; }
.rs-bar.rs-start.rs-rounded .rs-seperator { border-radius: 0 0 1000px 1000px; }
.rs-bar.rs-end.rs-rounded .rs-seperator { border-radius: 1000px 1000px 0 0; }
.full .rs-bar, .half .rs-bar { width: 50%; }
.half.left .rs-bar, .half.right .rs-bar, .quarter .rs-bar { width: 100%; }
.full .rs-bar, .half.left .rs-bar, .half.right .rs-bar { top: 50%; }
.bottom .rs-bar { top: 0; }
.half.right .rs-bar, .quarter.right .rs-bar { right: 100%; }

.rs-handle.rs-move { cursor: move; }
.rs-readonly .rs-handle.rs-move { cursor: default; }
.rs-path { display: block; height: 100%; width: 100%; }
.rs-split .rs-path
{
    -webkit-border-radius: 1000px 1000px 0 0;
    border-radius: 1000px 1000px 0 0;
    overflow: hidden;
    height: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

/*** tooltip styles ***/
.rs-tooltip
{
    position: absolute;
    cursor: default;
    border: 1px solid transparent;
    z-index: 10;
}
.full .rs-tooltip { top: 50%; left: 50%; }
.bottom .rs-tooltip { top: 0; } 
.top .rs-tooltip { bottom: 0; }
.right .rs-tooltip { left: 0; }
.left .rs-tooltip { right: 0; }
.half.top .rs-tooltip, .half.bottom .rs-tooltip { left: 50%; }
.half.left .rs-tooltip, .half.right .rs-tooltip { top: 50%; }
.rs-tooltip .rs-input { outline: 0 none; border: none; background: transparent; }
.rs-tooltip-text { font-family: verdana; font-size: 13px; border-radius: 7px; text-align: center; }
.rs-tooltip.edit, .rs-tooltip .rs-input { padding: 5px 8px; }
.rs-tooltip.hover, .rs-tooltip.edit:hover { border: 1px solid #AAAAAA; cursor: pointer; }
.rs-readonly .rs-tooltip.edit:hover { border-color: transparent; cursor: default; }

/*** handle types ***/
.rs-handle { border-radius: 1000px; outline: 0 none; float: left; }
.rs-handle.rs-handle-square { border-radius: 0px; }
.rs-handle-dot { border: 1px solid #AAAAAA; padding: 6px; }
.rs-handle-dot:after {
    display: block;
    content: "";
    border: 1px solid #AAAAAA;
    height: 100%;
    width: 100%;
    border-radius: 100%;
}

/*** theming - colors ***/
.rs-seperator { border: 1px solid #AAAAAA; }
.rs-border { border: 1px solid #AAAAAA; }
.rs-path-color { background-color: #FFFFFF; }
.rs-range-color { background-color: #54BBE0; }
.rs-bg-color { background-color: #FFFFFF; }
.rs-handle { background-color: #838383; }
.rs-handle-dot { background-color: #FFFFFF; }
.rs-handle-dot:after { background-color: #838383; }


/** Slider's Modifications **/
.rs-control .rs-range-color,
.rs-control .rs-path-color,
.rs-control .rs-handle,
.rs-control .rs-bg-color,
.audio_ondemand .frontTiming,
.rs-seperator,
.rs-border{
    transition: all 0.5s ease-in-out !important;
    -webkit-transition: all 0.5s ease-in-out !important;
    -ms-transition: all 0.5s ease-in-out !important;
    -moz-transition: all 0.5s ease-in-out !important;
    -o-transition: all 0.5s ease-in-out !important;
}

.rs-control .rs-range-color {
    background-color: rgba(0,0,0,0.0);
}
.rs-control .rs-path-color {
    background-color: rgba(255,255,255,0.0);
}
.rs-control .rs-handle {
    background-color: rgba(255,255,255,0.9);
}
.rs-control .rs-bg-color {
    background-color: rgba(255,255,255,0.0);
}
.rs-border{
    border: 2px solid rgba(0, 0, 0, 0);
}
.rs-bar.rs-start .rs-seperator, .rs-bar.rs-end .rs-seperator{
    display: none;
}

.rs-readonly .rs-handle.rs-move {
    display: none;
}

/** HOVER **/

.audio_ondemand_player.playing .rs-bar.rs-start .rs-seperator, .audio_ondemand_player.playing .rs-bar.rs-end .rs-seperator{
	display: block;
}

.audio_ondemand_player.playing  .rs-border{
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.audio_ondemand_player.playing  .rs-handle{
    background-color: rgba(255,255,255,0.95);
}

.audio_ondemand_player.playing  .frontTiming{
    opacity: 1;
}

.audio_ondemand_player.playing  .playpausebtn{
	top: 30px; 
	left: 30px;
	width:30px;
	height:30px;
}

div.rs-container.full{
    text-align: left;
}
.rs-seperator{
    border: 1px solid rgba(255,255,255,0.4);
}

.audio_ondemand  #audioslider{
	/*background-color: rgba(255,255,255,0.15);*/
	background-color: #000;
	border-radius: 50%;
  width: 100%;
  min-height: 90px;
}

.audio_ondemand  .playpausebtn{
	position: absolute;
	top: 25px; 
	left: 25px;
	width: 40px;
	height: 40px;
	background-image: url(../framework_images/audio_images/aod_play.png);
	background-repeat: no-repeat;
	background-size: 100%;
	cursor: pointer;
	
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	
	z-index: 100;
}

.audio_ondemand_player.playing_aod .playpausebtn{
	background-image: url(../framework_images/audio_images/aod_pause.png);
}

.audio_ondemand_player.AOD_muted .playpausebtn{
	background-image: url(../framework_images/audio_images/audio_off.png);
	left: 30px;
  top: 30px;
	cursor: default;
}

.audio_ondemand  .frontTiming{
	opacity: 0;
	width: 90px;
	text-align: center;
	padding-top: 5px;
	font-size: 14px;
}

.audio_ondemand{
	display: flex;
  position: relative;
	margin: 15px auto 0px auto;
	height: auto;
	
	-webkit-transition: all 0.3s ease-in-out;
		 -moz-transition: all 0.3s ease-in-out;
			 -o-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;
}

.audio_ondemand_player{
	position: relative;
	height: 110px;
	min-width: 100px;
}

body.rtl .audio_ondemand_player{
	direction: ltr;
}

.audio_ondemand_prompt{
	padding: 10px;
}

/**************************************************************/
/******************** TEMPLATE SAMPLER ************************/
/**************************************************************/
#ts_holder{
	position: absolute;
	right: 300px;
	top: 100px;
	height: auto;
	width: 450px;
	border: 1px solid #ccc;
	background-color: #fff;
	
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #363636;
	font-size: 14px;
	font-weight: normal;
	line-height: 17px;
	z-index: 51;
}

.ts_header{
	padding:5px;
	height: 24px;
	width: 100%;
	background-color: #ccc;
	cursor: pointer;
}

.ts_close{
	position: absolute;
  top: 2px;
  right: 2px;
  height: 20px;
  width: 20px;
  background-image: url(../framework_images/close.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  cursor: pointer;
}

.ts_toggle{
	position: absolute;
	top: 2px;
	right: 26px;
	height: 20px;
	width: 20px;
	background-image: url(../framework_images/minimise.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	cursor: pointer;
}

.ts_toggle.open{
	background-image: url(../framework_images/maximise.jpg);
}

.ts_holder{
	width: 100%;
	height: 275px;
	overflow-y: auto;
	overflow-x: hidden;
}

.ts_sample{
	border: 1px solid #ccc;
	margin: 5px;
	padding: 5px;
}

.ts_description{
}

.ts_link > *{
	text-decoration: none;
	overflow-wrap: break-word;
}


.opacity06{
	opacity: 0.6;
}

.ictTimerHolder{
	position: relative;
	width: 150px;
	margin: 0px auto 20px auto;
}

.ictTimerHolder input{
	position: absolute !important;
	top: 50%;
	left: 0px;
	margin: -25px 0px 0px 0px !important;
	width: 150px !important;
}

/***************************************************************************************************************************************/
/**************************************************** KNOB PRELOADER *******************************************************************/
/***************************************************************************************************************************************/
.knob_preloader{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
  width: 100px;
  height: 100px;
	margin-left: -50px;
	margin-top: -50px;
}

body.rtl .knob_preloader canvas{
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}

.knob_preloader input{
	position: absolute !important;
	top: 50%;
	left: 0px;
	margin: -17px 0px 0px 0px !important;
	width: 100px !important;
	background-color: transparent;
	border: 0px;
	color: #fff !important;
	font-weight: bold;
	font-size: 20px;
}

/***************************************************************************************************************************************/
/**************************************************** CANVAS ANIMATIONS ****************************************************************/
/***************************************************************************************************************************************/
canvas#audioWave{
  margin: auto;
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0.1;
  max-height: 650px;
  max-width: 650px;
}

body.xs canvas#audioWave{
	display: none;
}

/***************************************************************************************************************************************/
/**************************************************** PILL NAVIGATION ******************************************************************/
/***************************************************************************************************************************************/
.pill_left, .pill_right{
	position: absolute;
	top: 0px;
	margin: 10px 0px;
	cursor: pointer;
	
	-webkit-transition: right 0.5s ease-in-out;
  	 -moz-transition: right 0.5s ease-in-out;
  		-ms-transition: right 0.5s ease-in-out;
  		 -o-transition: right 0.5s ease-in-out;
  				transition: right 0.5s ease-in-out; 				
}

.pill_left svg, .pill_right svg{
	height: 26px;
	width: 26px;				
}

.pill_left{
	left: 6px;
}

.pill_right{
	right: 6px;
}

.pill_left.disabled, .pill_right.disabled{
	cursor: default;
}

.pill_right:not(.disabled).flashing{
	/*background-color: #fb9f0c;*/
	-webkit-animation: flashing_next_pill 1s linear infinite;
		 -moz-animation: flashing_next_pill 1s linear infinite;
			 -o-animation: flashing_next_pill 1s linear infinite;
				  animation: flashing_next_pill 1s linear infinite;
}

@-webkit-keyframes flashing_next_pill {
  0% { right: 6px; }
  25% { right: 3px; }
  50% { right: 6px; }
  75% { right: 3px; }
  100% { right: 6px; }
}
 
@-moz-keyframes flashing_next_pill {
  0% { right: 6px; }
  25% { right: 3px; }
  50% { right: 6px; }
  75% { right: 3px; }
  100% { right: 6px; }
}
 
@-o-keyframes flashing_next_pill {
  0% { right: 6px; }
  25% { right: 3px; }
  50% { right: 6px; }
  75% { right: 3px; }
  100% { right: 6px; }
}

@keyframes flashing_next_pill {
  0% { right: 6px; }
  25% { right: 3px; }
  50% { right: 6px; }
  75% { right: 3px; }
  100% { right: 6px; }
}

.pillNav{
	position: fixed;
	right: 20px;
	bottom: 10px;
	background-color: #000;
	border: 3px solid #d4d4d4;
	width: 130px;
	height: 50px;
  border-radius: 25px;
  z-index: 49;
	
	-webkit-transition: bottom 0.5s ease-in-out;
  	 -moz-transition: bottom 0.5s ease-in-out;
  		-ms-transition: bottom 0.5s ease-in-out;
  		 -o-transition: bottom 0.5s ease-in-out;
  				transition: bottom 0.5s ease-in-out;
}

body.rtl .pillNav{
	right: initial;
	right: auto;
	left: 20px;
	
	
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}

.centreContentContainer.videoNav .pillNav{
	bottom: 130px;
}

.centreContentContainer.hideNavButtons .pillNav{
	display: none;
}

.barProgressIndicator{
	position: relative;
	width: 50px;
	height: 6px;
	margin: 20px auto;
}

.baseIndicBar{
	position: absolute;
	top: 2px;
	left: 0px;
	width: 100%;
	height: 2px;
	z-index: 1;
}

.progressIndicBar{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 10%;
	height: 6px;
	border-radius: 2px;
	z-index: 2;
	
	-webkit-transition: width 0.5s ease-in-out;
  	 -moz-transition: width 0.5s ease-in-out;
  		-ms-transition: width 0.5s ease-in-out;
  		 -o-transition: width 0.5s ease-in-out;
  				transition: width 0.5s ease-in-out;
}

.numProgressIndicator{
	width: 100%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	line-height: 44px;
}

/***************************************************************************************************************************************/
/******************************************************** PULSE ICON  ******************************************************************/
/***************************************************************************************************************************************/
.clickIcon{
	position: absolute;
}

.clickIconImg{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 39px;
	width: 39px;
  border-radius: 100%;
	background-image: url(../framework_images/click_icon_default.png);
	background-position: center center;
	background-repeat: no-repeat;
	
	-webkit-transition: background-image 0.5s ease-in-out;
  	 -moz-transition: background-image 0.5s ease-in-out;
  		 -o-transition: background-image 0.5s ease-in-out;
  				transition: background-image 0.5s ease-in-out;
}

.clickIcon.viewed .clickIconImg{
	background-image: url(../framework_images/click_icon_viewed.png);
}

.clickIcon::before {
  position: absolute;
  display: none;
  content: '';
  top: 0px;
  left: 0px;
	height: 39px;
	width: 39px;
  border-radius: 100%;
  background-color: #ff00ff;
  z-index: 0;
}

.clickIcon:not(.viewed).pulse::before{
	display: block;
  animation: clickpulse 1.2s ease infinite;
}

/* Animation */
@-webkit-keyframes clickpulse{
  0%{transform: scale(1, 1);}
  50%{opacity: 0.3;}
  100%{transform: scale(1.5);opacity: 0;}
}

@-moz-keyframes clickpulse{
  0%{transform: scale(1, 1);}
  50%{opacity: 0.3;}
  100%{transform: scale(1.5);opacity: 0;}
}

@-o-keyframes clickpulse{
  0%{transform: scale(1, 1);}
  50%{opacity: 0.3;}
  100%{transform: scale(1.5);opacity: 0;}
}

@keyframes clickpulse{
  0%{transform: scale(1, 1);}
  50%{opacity: 0.3;}
  100%{transform: scale(1.5);opacity: 0;}
}

/***************************************************************************************************************************************/
/**************************************************** LIST INDENTATION *****************************************************************/
/***************************************************************************************************************************************/
ol,
ul {
  padding: 0;
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
ol > li,
ul > li {
  list-style-type: none;
}
ul > li::before {
  content: '\2022';
}
li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}

body:not(.rtl) li::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}

body.rtl li::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}

body:not(.rtl) ol li, body:not(.rtl) ul li{
  padding-left: 1.5em;
}

body.rtl ol li, body.rtl ul li{
  padding-right: 1.5em;
}

ol > li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
ol > li:before {
  content: counter(list-0, decimal) '. ';
}

ol[type='lower-alpha'] > li:before {
  content: counter(list-0, lower-alpha) '. ';
}

ol li.ql-indent-1 {
  counter-increment: list-1;
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
ol li.ql-indent-2 {
  counter-increment: list-2;
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
ol li.ql-indent-3 {
  counter-increment: list-3;
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
ol li.ql-indent-4 {
  counter-increment: list-4;
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
ol li.ql-indent-5 {
  counter-increment: list-5;
  counter-reset: list-6 list-7 list-8 list-9;
}
ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
ol li.ql-indent-6 {
  counter-increment: list-6;
  counter-reset: list-7 list-8 list-9;
}
ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
ol li.ql-indent-7 {
  counter-increment: list-7;
  counter-reset: list-8 list-9;
}
ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
ol li.ql-indent-8 {
  counter-increment: list-8;
  counter-reset: list-9;
}
ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
ol li.ql-indent-9 {
  counter-increment: list-9;
}
ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}

li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}

/***************************************************************************************************************************************/
/************************************************** INLINE LIST STYLES *****************************************************************/
/***************************************************************************************************************************************/
ul.inline-list li {
	display: inline-block;
	border-width: 2px !important;
	border-radius: 3px;
	padding: 2px 20px !important;
	margin-right: 5px;
	margin-bottom: 10px;
}

ul.inline-list li:before {
	display: none;
}

@media only screen and (max-width: 1366px){
	ul.inline-list li {
		padding: 2px 16px !important;
	}
}


#basic_dot_css{
	display: none;
}