/*////////////////////////////////////////////
	//	1. General
	////////////////////////////////////////////*/

	
	*{margin:0; padding:0; outline:none;}
	
	h1{margin-bottom:15px; }
	h2{}
	h4{margin-bottom:7.5px;}

	/*	Transitions	*/
	.transition-childs,
	.transition-self
	{
	   -webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	   -ms-transform: translateZ(0);
	   -o-transform: translateZ(0);
		-ms-transition: all 0.3s ease-out;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}

	.ui-effects-light .transition-childs > *,
	.ui-effects-light .transition-self,
	.ui-effects-light .transition-all *,
	.ui-effects-light .transition-all *:hover
	{
	   -webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	   -ms-transform: translateZ(0);
	   -o-transform: translateZ(0);
		-ms-transition: none;
		-webkit-transition:none;
		-moz-transition: none;
		-o-transition: none;
		transition:none
	}
	
	body *::-webkit-scrollbar, iframe::-webkit-scrollbar  {
	  width: 3px; /* 1px wider than Lion. */
	  background-color: rgba(0,0,0,0);
	  -webkit-border-radius: 100px;
	  margin-right:3px;
	}
	body *::-webkit-scrollbar:hover {
	  background-color: rgba(0, 0, 0, 0.03);
	}
	
	body *::-webkit-scrollbar-thumb:vertical, iframe::-webkit-scrollbar-thumb:vertical{
	  background: rgba(0,0,0,0.1);
	  -webkit-border-radius: 100px;
	  
	}
	body *::-webkit-scrollbar-thumb:vertical:active {
	  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
	  -webkit-border-radius: 100px;
	}


	html,body{overflow-x:hidden;}
	
	.ui-loader{background:url(images/loader.gif) center center no-repeat; background-size:100%;}
	.ui-preloader{background:url(images/course-loading.gif) center center no-repeat;background-size:cover;}
	.text-align-center{text-align:center;}
	
	.correct-icon{background:url(images/tick.svg) center center no-repeat; background-size:100%;}
	.incorrect-icon{background:url(images/incorrect.svg) center center no-repeat; background-size:100%;}


	#notification{border-radius:30px; box-shadow:3px 3px 0px rgba(0,0,0,0.3); min-width:200px; background:#fff; min-height:40px; position:fixed; top:63px; right:15px; padding:5px; color:#000; font-size:90%; z-index:2}
	#notification{
	   -webkit-transform: translate(320px,0);
	   -moz-transform: translate(320px,0);
	   -ms-transform: translate(320px,0);
	   -o-transform: translate(320px,0);
	}
	#notification.show{
	   -webkit-transform: translate(0,0);
	   -moz-transform: translate(0,0);
	   -ms-transform: translate(0,0);
	   -o-transform: translate(0,0);
	}
	
	.chapter-icon{width:24px; height:24px; position:absolute; top:15px; right:15px;}
	.chapter-icon.locked{background:url(images/lock.svg) center center no-repeat; background-size:100%;}
	.chapter-icon.completed{background:url(images/completed.svg) center center no-repeat; background-size:100%;}
	.chapter-icon.in-progress{background:url(images/in-progress.svg) center center no-repeat; background-size:100%;}
	.chapter-icon.has-submenu{background:url(images/submenu.svg) center center no-repeat; background-size:100%;}
	.chapter-icon.has-resource{background:url(images/resources.svg) center center no-repeat; background-size:100%;}
	.chapter-icon.has-search{background:url(images/search.svg) center center no-repeat; background-size:100%;}
	.chapter-icon.settings-icon{background:url(images/settings.svg) center center no-repeat; background-size:100%;}
	
	#notification-icon{width:38px; height:38px; border-radius:50%; float:left;}
	#notification-icon.busy{background:url(images/loader.gif) center center no-repeat; background-size:100%;}
	#notification-icon.done{background:url(images/tick.svg) center center no-repeat; background-size:100%;}

	.notification-text{ padding:5px 15px 5px 48px; line-height:1em;}
	.notification-title{font-weight:bolder; display:block; margin-bottom:5px}
	.notification-message{font-size:90%;}
	
	.page-background{position:fixed; top:0; left:0; right:0; bottom:0; opacity:0; z-index:0; background-size:cover; background-position:center; width:100%; visibility:hidden; -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
	.page-background.show{opacity:1; visibility:visible}
	
	.page-background video{position:fixed; min-width:100%; min-height:100%; left:50%; top:50%; -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}


	.navigation-title{text-transform:uppercase; text-align:center;  padding:11px}
	.navigation-next.hide{transform:translate(100%,0);-webkit-transform:translate(100%,0);}
	.navigation-prev.hide{transform:translate(-100%,0);-webkit-transform:translate(-100%,0);}
	
	
	.menu-container{position:relative;}
	
	.ui-effects-light .chapter-navigation,
	.chapter-navigation{position:absolute; top:0; left:0; min-height:110%; width:300px;transform:translate3d(-300px,0,0);-webkit-transform:translate3d(-300px,0,0); z-index:3; padding-bottom:60px}
	.chapter-navigation.show{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);}
	
	.chapter-navigation .menu{border-top:1px solid rgba(255,255,255,0.1); transform:translate3d(-100%,0,0);-webkit-transform:translate3d(-100%,0,0);}
	.chapter-navigation li{padding:15px 48px 15px 15px; border-bottom:1px solid rgba(255,255,255,0.1); text-transform:uppercase;position:relative; cursor:pointer;list-style:none;}
	
	.chapter-navigation.show .menu{ transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0); }
	.chapter-navigation .menu.hide{ transform:translate3d(-10%,0,0);-webkit-transform:translate3d(-10%,0,0); opacity:0}
	.chapter-navigation .menu.hide-top{transform:translate3d(0%,-100%,0);-webkit-transform:translate3d(0%,-100%,0); opacity:0}
	.chapter-navigation img{display:block; max-width:90px; margin:30px auto; border-radius:10px; transform:scale(0)}
	
	#search-menu{padding:15px; border-top:1px solid #000}
	#search-menu input{border:none;text-transform:uppercase; background:none; color:inherit}
	
	.chapter-navigation.show img{
		-webkit-animation:popIn 0.5s;  -webkit-animation-fill-mode: forwards;-webkit-animation-delay: 0.4s;
		-ms-animation:popIn 0.5s;  -ms-animation-fill-mode: forwards;		
		animation:popIn 0.5s;  animation-fill-mode: forwards;
		
	}
	

	.chapter-navigation .submenu{list-style:none;border-top:1px solid rgba(255,255,255,0.1);  transform:translate3d(100%,0,0);-webkit-transform:translate3d(100%,0,0); position:absolute; top:0; width:100%; height:100%;}
	.chapter-navigation .submenu.show{transform:translate3d(0%,0,0);-webkit-transform:translate3d(0%,0,0);}

	.course-progress{border:3px solid #fff; background:#fff; border-radius:15px; height:16px; max-width:480px; margin:13px auto; position:relative}
	.course-progress-percent{ background:#3498DB; border-radius:15px; height:16px; position:absolute; width:0%;}
	
	.submenu .submenu-title{text-transform:uppercase; padding:15px; border-bottom:1px solid rgba(255,255,255,0.1); font-weight:bold; display:block}

	.to-stage-right{transform:translate3d(300px,0,0)!important;-webkit-transform:translate3d(300px,0,0)!important;}
	.to-stage-left{transform:translate3d(-300px,0,0)!important;-webkit-transform:translate3d(-300px,0,0)!important;}

	.main.to-stage-right{}

	#search-menu,
	#submenu-results{border-top:1px solid rgba(255,255,255,0.1);}
	
	#search-menu{transform:translate3d(-100%,0,0);-webkit-transform:translate3d(-100%,0,0);}
	#search-menu.show{transform:translate3d(0%,0,0);-webkit-transform:translate3d(0%,0,0);}

	.search-result{padding:15px 15px 15px 15px!important; list-style:none;}
	.search-result span{font-size:80%; opacity:0.7; display:block; text-transform:none}
	.search-result em{font-size:80%; opacity:0.7; display:block; float:right}
	
	.volume-control{padding:15px 15px 5px 15px!important;}
	
	/*////////////////////////////////////////////
	//	1. START PAGE
	////////////////////////////////////////////*/

	#start-page{position:absolute; top:30px; left:0; right:0; bottom:0; z-index:10}
	.start-slide{height:100%; position:absolute; width:100%; display:table-cell}
	#title-screen{margin:0 auto; max-width:480px;  text-align:center; padding:0 0 0; position:absolute; height:60%; left:50%; top:10%; -webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0); width:50%}
	#title-screen img{margin:30px auto 30px; display:block; max-width:100%;}
	
	#coures-load-progress{width:48px; height:48px; margin:0 auto;}
	
	.click-button{background:rgba(0,0,0,0.2);  padding:7px 15px; color:#fff; display:block;  border-radius:30px; margin:15px auto; min-width:120px;  max-width:220px; text-align:center; cursor:pointer; text-transform:uppercase}
	
	/*////////////////////////////////////////////
	//	2. Navigation Bar
	////////////////////////////////////////////*/

	.navigation-bar{position:fixed; height:48px; left:0; top:0; right:0; z-index:2; transform:translate3d(0,-100%,0)}
	.navigation-bar.show{ transform:translate3d(0,0,0)}
	
	.navigation-action{color:#fff; display:block; position:absolute; top:0; text-indent:-9999px; width:48px; height:48px; cursor:pointer}
	.navigation-prev{background:url(images/arrow-back.svg) center center no-repeat; left:0; background-size:80%;}
	.navigation-next{background:url(images/arrow-forward.svg) center center no-repeat;right:0; background-size:80%;}

	.menu-icon{height:37px; width:48px;  padding:11px 0 0; cursor:pointer; position:absolute; top:0; left:0}
	.menu-icon:hover{background:rgba(0,0,0,0.7);}
	.menu-icon-bit{height:3px; background:#fff; margin:4px 10px 0; border-radius:3px}
	.menu-icon:hover .menu-icon-bit{background:#fff;}

	/*////////////////////////////////////////////
	//	3. Action Bar
	////////////////////////////////////////////*/
	
	.action-bar{position:fixed; height:48px; left:0; bottom:0; right:0; z-index:2; transform:translate3d(0,100%,0)}
	.action-bar.show{ transform:translate3d(0,0,0)}


	/*////////////////////////////////////////////
	//	4. Body
	////////////////////////////////////////////*/
	
	
	
	
	.slides{position:relative;   min-height:640px; overflow:hidden}
	.slide{ position:absolute;min-height:640px; -webkit-transform:translate3d(0,0%,0) scale(0.95); transform:translate3d(0,0%,0) scale(0.95); width:100%; z-index:0; opacity:0; display:none;}
	.slide.show{transform:translate3d(0%,0,0);-webkit-transform:translate3d(0,0,0); z-index:1; opacity:1; display:block;}
	.slide.hide{transform:translate3d(0%,10%,0);-webkit-transform:translate3d(0%,10%,0); opacity:0; z-index:0}

	.columns{clear:both;max-width:1024px;margin:78px auto ;}
	
	.slide.hide .columns{background:none!important; box-shadow:none!important;}
	
	.column-12{width:12%; float:left}
	.column-88{width:88%; float:left}
	.column-25{width:25%; float:left}
	.column-33{width:33.333%; float:left}
	.column-50{width:50%; float:left}
	.column-66{width:66.666%; float:left}
	
	.clear{clear:both;}
	
	.object-container{margin:0 30px; padding:30px 0}

	.image-container{min-height:320px; border:1px solid #fff; border-radius:15px; background:url(images/image.png) center center no-repeat; background-size:90%;}
	.video-container{min-height:480px; border:1px solid #fff; border-radius:15px; background:url(images/image.png) center center no-repeat; background-size:282px;}

	/* PROGRESS*/
	.course-progress{border:3px solid #fff; background:#fff; border-radius:15px; height:16px; max-width:480px; margin:13px auto; position:relative}
	.course-progress-percent{ background:#3498DB; border-radius:15px; height:16px; position:absolute; width:0%;}
	
	/* TEMPLATE SPECIFIC*/
	
	.template-raw .image-container{min-height:320px; border:1px solid #fff; border-radius:15px; background:url(images/image.png) center center no-repeat; background-size:282px;}
	.image-align-left{float:left; margin:0 30px 30px 0;}



	/* TAB VIEW*/
	.tabbed-list nav{text-align:center; margin:7.5px auto; max-width:480px}
	nav{display:block;}
	.tabbed-list nav a{display:block;width:24%; float:left; cursor:pointer}
	.tabbed-list nav a span{display:block;border-top:1px solid #fff; border-bottom:1px solid #fff;text-transform:uppercase; border-left:1px solid #fff; line-height:normal; color:#fff; padding:5px 7.5px;}

	.tabbed-list nav a:first-of-type span{ border-radius:3px 0 0 3px;}
	.tabbed-list nav a:last-of-type span{border-right:1px solid #fff; border-radius:0px 3px 3px 0;}

	.tabbed-list nav a.show span{background:#fff; color:#3498DB;}
	
	.tabbed-view{position:relative; overflow:hidden;}
	.tab-view{position:absolute;-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); width:100%;}
	.tab-view.show{-webkit-transform: translate3d(0%, 0, 0)!important; transform: translate3d(0%, 0, 0)!important;}
	.tab-view.hide{-webkit-transform: translate3d(-100%, 0, 0)!important; transform: translate3d(-100%, 0, 0)!important; opacity:0}


	/*////////////////////////////////////////////
	//	POINTS SEQUENCE
	////////////////////////////////////////////*/

	#point-score{visibility:hidden;position:fixed;  text-align:center; right:15px; top:63px; transform:translate3d(0%,0,0); font-size:300%; z-index:10; font-weight:900; color:#fff; text-shadow:2px 2px 0px rgba(0,0,0,0.5);opacity:0;}
	#point-score.show{visibility:visible; opacity:1; -webkit-animation:pointScore 1s;  -webkit-animation-fill-mode: forwards; animation:pointScore 1s;  animation-fill-mode: forwards;}
	#point-score.points-add{visibility:visible; opacity:1; -webkit-animation:pointAdd 0.3s;  -webkit-animation-fill-mode: forwards; animation:pointAdd 0.3s;  animation-fill-mode: forwards;}

	.score{position:absolute; right:10px; bottom:8px;}
	.score-label{float:left; display:block; padding:3px 7.5px}
	#score-points{display:block; float:left; background:#fff; border-radius:30px; padding:3px 15px; text-align:center; min-width:30px; color:#000;}
	#score-points.add-points{-webkit-animation:addedPoints 0.3s;animation:addedPoints 0.3s;}


	
	.glossary-icon{float:left; width:29px; height:29px; background:url(images/help.svg) center center no-repeat; background-size:100%; margin-left:7.5px; cursor:pointer}


	/*/////////////////////////////////////////////////////////
	//	MODAL DIALOGS
	/////////////////////////////////////////////////////////*/	
	#modal-alert,#modal-option{max-width:480px;}

	.md-modal {
		position: fixed;
		top: 30%;
		left: 50%;
		width: 100%;
		max-width: 630px;
		min-width: 280px;
		height: auto;
		z-index: 2000;
		display:none;
		opacity:1;
		-webkit-transform: translate3d(-50%,-30%,0);
		-moz-transform: translate3d(-50%,-30%,0);
		transform: translate3d(-50%,-30%,0);
		
	}
	.md-modal .click-button{display:inline-block; margin:15px 15px}
	
	.md-show {
		display:block;
		opacity:1
	}
	
	.menu-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		transform:translate3d(100%,0,0);
		-webkit-transform:translate3d(100%,0,0);
		top: 0;
		left: 0;
		z-index: 2;
		opacity: 0;
		background: rgba(0,0,0,0.3);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */    
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);   /* IE6 & 7 */	
	}

	.md-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		transform:translate3d(100%,0,0);
		-webkit-transform:translate3d(100%,0,0);
		top: 0;
		left: 0;
		z-index: 1000;
		opacity: 0;
		background: rgba(0,0,0,0.2);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */    
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);   /* IE6 & 7 */	
	}
	.menu-overlay.show,
	.md-overlay.show,
	.md-show ~ .md-overlay {
		opacity: 1!important;
		transform:translate3d(0%,0,0);
		-webkit-transform:translate3d(0%,0,0);

	}
	
	/* Content styles */
	.md-content {
		position: relative;
		border-radius: 3px;
		margin: 0 auto;
		padding: 0 0 15px;
		opacity:1;
		box-shadow:0 0 15px rgba(0,0,0,0.3);
	}
	
	.md-content .button-container{border-radius:0 0 3px 3px;}
	
	.md-content .md-title {
		margin: 0;
		padding: 20px;
		font-size: 140%;
		font-weight: 300;
		opacity: 0.8;
		background: #b7d763;
		display:block;
		color:#fff;
	}
	
	.md-content > .md-content-text {
		padding: 30px;
		margin: 0;
		text-align:center;
	}
	
	.md-content > div p {
		margin: 0;
	
	}
	
	.md-content > div ul {
		margin: 0;
		padding: 0 0 30px 20px;
	}
	
	.md-content > div ul li {
		padding: 5px 0;
	}
	
	.md-content button {
		display: block;
		margin: 0 auto;
		
	}

	/* Effect 1: Fade in and scale up */
	.md-effect-1 .md-content {
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 0;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	.md-show.md-effect-1 .md-content {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}



	/* Effect 3: Slide from the bottom */
	.md-effect-3 .md-content {

		-webkit-transform: translate3d(0,20%,0);
		-moz-transform:  translate3d(0,20%,0);
		-ms-transform:  translate3d(0,20%,0);
		transform:  translate3d(0,20%,0);
		opacity: 0;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	.md-show.md-effect-3 .md-content {
		-webkit-transform: translate3d(0%,0,0);
		-moz-transform: translate3d(0%,0,0);
		-ms-transform: translate3d(0%,0,0);
		transform: translate3d(0%,0,0);
		opacity: 1;
	}
	/* Effect 7:  slide and stick to top */
	.md-effect-7{
		top: 0;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	.md-effect-7 .md-content {
		-webkit-transform: translateY(-200%);
		-moz-transform: translateY(-200%);
		-ms-transform: translateY(-200%);
		transform: translateY(-200%);
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		transition: all .3s;
		opacity: 0;
	}
	
	.md-show.md-effect-7 .md-content {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
		border-radius: 0 0 3px 3px;
		opacity: 1;
	}



	.slides object{position:relative; visibility:hidden; z-index:0}
	.columns .animation.run object{visibility:visible}
	
	/*=================================================
	// RANGE INPUT
	/================================================*/
	.chapter-navigation input[type=range] {
	  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	  width: 100%; /* Specific width is required for Firefox. */
	  background:none;
	}
	
	.chapter-navigation input[type=range]::-webkit-slider-thumb {
	  -webkit-appearance: none;
	}
	
	.chapter-navigation input[type=range]:focus {
	  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
	}
	
	.chapter-navigation input[type=range]::-ms-track {
	  width: 100%;
	  cursor: pointer;
	  background: transparent; /* Hides the slider so custom styles can be added */
	  border-color: transparent;
	  color: transparent;
	}
	
	.chapter-navigation input[type=range]::-webkit-slider-thumb{
	  -webkit-appearance: none;
	  height: 15px;
	  width: 15px;
	  border-radius: 50%;
	  cursor: pointer;
	  margin-top:-5px;
	  
	}

	.chapter-navigation input[type=range]::-moz-range-thumb {
	  height: 15px;
	  width: 15px;
	  border-radius: 50%;
	  cursor: pointer;
	}

	.chapter-navigation input[type=range]::-ms-thumb {
	  height: 15px;
	  width: 15px;
	  border-radius: 50%;
	  cursor: pointer;
	}		
	
	.chapter-navigation input[type=range]::-webkit-slider-runnable-track {
	  width: 100%;
	  height: 7px;
	  cursor: pointer;
	  border-radius: 5px;
	}
	
	.chapter-navigation input[type=range]::-moz-range-track {
	  width: 100%;
	  height: 7px;
	  cursor: pointer;
	  border-radius: 5px;
	}

	.chapter-navigation input[type=range]::-ms-track {
	  width: 100%;
	  height: 7px;
	  cursor: pointer;
	  background: transparent;
	  border-color: transparent;
	  border-width: 16px 0;
	  color: transparent;
	}
	.chapter-navigation input[type=range]::-ms-fill-lower,
	.chapter-navigation input[type=range]::-ms-fill-upper {
	  border-radius: 5px;
	}


	@media screen and (max-width: 480px){
			.md-modal .click-button{display:block; margin:15px auto}

	}
	
	
	
	/*===========================================================
	// RESOURCE WINDOW
	/==========================================================*/
	#resource-modal{position:fixed; top:0; right:0; bottom:0; width:90%; max-width:640px; z-index:1001;transform:translate3d(100%,0,0); visibility:hidden;}
	#resource-modal.show{transform:translate3d(0,0,0); visibility:visible;}
	.resource-header .helper-finger{width:38px; height:38px; top:3px; right:5px; background-size:100%;}
	.resource-header{height:47px; border-bottom:1px solid rgba(0,0,0,.1); position:relative}
	.resource-header span{text-transform:uppercase; text-align:center;  padding:11px; display:block}