/*////////////////////////////////////////////
	//	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;
	}

	.transition-self{
		transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	}
	.transition-all{
		transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)!important;
	}

	.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
	}
	
	.float-right{float:right;}
	
	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;}
	
	.inventory-tick,
	.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; overflow:hidden}
	
	.ui-effects-light .chapter-navigation,
	.chapter-navigation{position:absolute; top:0; left:0; min-height:100%; width:300px;transform:translate3d(-315px,0,0);-webkit-transform:translate3d(-315px,0,0); z-index:5; box-shadow:0px 3px 3px rgba(0,0,0,.3)}
	.chapter-navigation.show{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);min-height:100%;}
	
	.chapter-navigation > *{display:none;}
	.chapter-navigation.show > *{display:block;}
	
	.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.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-bottom:1px solid rgba(0,0,0,.1); border-top:none!important}
	#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{}

	.chapter-navigation ul{list-style:none; border-top:1px solid rgba(255,255,255,.1); padding-top:5px}
	.chapter-navigation ul li{position:relative; line-height:normal; border-bottom:none}
	.chapter-navigation ul li strong{display:block;}
	.chapter-navigation ul li.chapter span{display:block; padding:15px;border-bottom:1px solid rgba(0,0,0,.1); margin-left:37px; cursor:pointer}
	
	.chapter-navigation ul li.chapter:before{content:""; width:2px; background:#e6e6e6; position:absolute; height:25px; left:21px;top:41px}
	
	.chapter-navigation ul li .chapter-icon{ width:24px; height:24px; position:absolute; left:7.5px; top:13px; border:2px solid #e6e6e6; border-radius:50%}
	
	.chapter-navigation ul li.complete .chapter-tick{opacity:1;}
	
	.chapter-navigation ul li.locked .chapter-icon{background:url(images/chapter-locked.svg) center center no-repeat; background-size:100%;}

	.chapter-navigation ul li.in-progress .chapter-icon{background-image:none;}
	.chapter-navigation ul li.in-progress .chapter-icon:before{background:#e6e6e6; content:""; width:20px; height:20px; border-radius:50%; position:absolute; top:2px; left:2px}
	.chapter-navigation li.in-progress:after{
			content:" "; width:24px; height:24px; border-radius:50%; border:2px solid #000; position:absolute; top:13px; left:8px;
			-webkit-animation:pulseObjective 1s infinite;animation:pulseObjective 1s infinite;
	}
	
	.menu-section{padding:7.5px; font-size:90%; font-weight:bold; background:#fcfcfc; border-top:1px solid rgba(0,0,0,.1);}
	.chapter-navigation .menu{border-top:1px solid rgba(0,0,0,.1)!important;}
	
	.chapter-navigation ul li.completed .chapter-icon{background:#1ABC9C url(images/tick.svg) center center no-repeat; background-size:100%;}
	.chapter-navigation ul li.completed .chapter-icon{border:2px solid #1ABC9C;}
	.chapter-navigation ul li.completed .chapter-icon.in-progress:before{background:#1ABC9C}
	
	.chapter-navigation ul li.completed:before{background:#1ABC9C;}
	
	.chapter-navigation ul li.last-chapter:before{height:0;}
	
	.chapter-navigation ul li.non-chapter span{margin-left:0; padding:15px 15px 15px 52px;}

	.chapter-navigation ul li.completed .chapter-icon:before{opacity:0!important;}

	
	#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 48px 15px 15px!important; list-style:none; cursor:pointer; opacity:0.9; border-bottom:1px solid rgba(0,0,0,.1)!important}
	.search-result span{font-size:80%; display:block; text-transform:none}
	.search-result em{font-size:80%;display:block; float:right}
	
	.search-result:hover{opacity:1;}
	
	.search-result .gui-nav.next{top:17px!important; right:0!important; opacity:1!important;}
	
	.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:200px; 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/prev.png) center center no-repeat; left:0; background-size:50%;opacity:.5;}
	.navigation-next{background:url(images/next.png) center center no-repeat;right:0; background-size:50%;opacity:.5;}
	
	.navigation-next:hover{background-position:15px center; opacity:1}
	.navigation-prev:hover{background-position:5px center;opacity:1}

	/*=========================================================
	// MENU
	/========================================================*/
	
	.menu-icon{height:37px; width:48px;  padding:5px 0 5.5px 5px; cursor:pointer; position:absolute; top:0; left:0}
	.menu-icon:hover{animation:pulse 1s infinite}
	.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; display:none;}

	.columns{clear:both;max-width:1100px;margin:78px auto 0;}
	
	.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/adobe.png) 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}
	

	/*===========================================================
	//
	// ADVENTURE GAME
	//
	/===========================================================*/


	/*===========================================================
	// GAME PROGRESS
	/==========================================================*/
	
	#game-progress{max-width:960px; margin:10px auto; text-align:center; position:relative}
	#game-progress ul{list-style:none; position:relative}
	#game-progress li{display:inline-block; width:24px; height:24px; border-radius:50%; margin:0 16px; border:2px solid #e6e6e6; background:#fff; position:relative}
	
	.progress-icon{position:absolute; width:20px; height:20px; border-radius:50%; margin:2px}
	
	#game-progress li.in-progress .progress-icon{ background:#000;}
	
	#game-progress li.in-progress:before{
			content:" "; width:24px; height:24px; border-radius:50%; border:2px solid #000; position:absolute; top:-2px; left:-2px;
			-webkit-animation:pulseObjective 1s infinite;animation:pulseObjective 1s infinite;
	}
	
	#game-progress li.completed{}
	#game-progress li.completed .progress-icon{background:url(images/tick.svg) center center no-repeat; background-size:100%;width:24px; height:24px; margin:0px}

	
	#game-progress li:after{
		content:" "; position:absolute; height:2px; width:0; background:#000; top:11px; left:26px;
		-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;
	}
	
	#game-progress li.completed:after{
			width: 32px;
	}

	#game-progress li:last-of-type:after{display:none}

	/*===========================================================
	// INVENTORY WINDOW
	/==========================================================*/
	#item-got-window{position:fixed; top:0; bottom:0px; left:0; right:0; z-index:2; background:rgba(0,0,0,0.3); visibility:hidden; opacity:0}
	.item-got-container{border-radius:50%; height:128px; width:128px; background:#fff; padding:5px; box-shadow:3px 3px 0px rgba(0,0,0,0.5); left:50%; top:50%;  transform:translate3d(-50%,-50%,0) scale(0); position:absolute}
	.item-got-inner{border-radius:50%; height:98px; width:98px; background:#34495E; padding:15px}
	#item-got-preview{display:block; margin:0 auto; transform:scale(0.5); opacity:0; width:100%; height:auto;}

	#item-got-window.show{ opacity:1; visibility:visible}
	#item-got-window.show .item-got-container{transform:translate3d(-50%,-50%,0) scale(1);}
	#item-got-window.show #item-got-preview{-webkit-animation:popIn 0.5s; -webkit-animation-delay: 0.4s; -webkit-animation-fill-mode: forwards;}

	#item-got-preview-clone{position:absolute; top:50%; right:50%; transform:translate(50%,-50%); z-index:98; visibility:hidden; width:90px; height:90px; }
	#item-got-preview-clone img{width:100%; height:auto; margin:0 auto; display:block}

	#item-carry-cursor{display:none; position:absolute; width:64px; height:auto; top:0; left:0; z-index:102}
	#item-carry-cursor.show{display:block;}

	.item-to-box{-webkit-animation:itemToBox 1s;animation:itemToBox 1s; opacity:0; visibility:hidden;}

	#inventory-placeholder{width:40px; display:inline-block}
	.inventroy-icon{width:36px; height:36px; background:#fff; position:fixed; top:3px; right:5px; border-radius:50%; z-index:100; padding:3px;display:block}
	.inventroy-icon-inner{width:36px; height:36px;border-radius:50%; background:#ec008b url(images/box.svg) center center no-repeat; background-size:100%;}
	
	#inventory-bubble{min-width:12px; height:12px; text-align:center;background:#2d2d2d; font-size:11px; padding:3px; border-radius:50%; top:20px; right:-5px; color:#fff; position:absolute; line-height:normal; font-family:sans-serif; border:2px solid #fff;opacity:0; transform:scale(0);-webkit-transform:scale(0);}
	
	#inventory-bubble.show{ transform:scale(1);-webkit-transform:scale(1); opacity:1}
	
	.inventroy-icon.eat{-webkit-animation:eatItem 1s;-webkit-animation-delay: 0.8s;}
	
	#inventory-help-bubble{position:absolute; top:0; right:0; width:100%; max-width:150px; background:#000; color:#fff; padding:7.5px; border-radius:15px; z-index:100; border:3px solid #fff; text-align:center; visibility:hidden; opacity:0;}
	
	#inventory-help-bubble.show{visibility:visible; opacity:1;}
	
	.inventory-lock-dialog{background:url(images/inventory-lock.svg) center center no-repeat; background-size:80%;}

        
	#inventory-box{ background:#34495E;border-radius:15px; padding:7px;width:276px;border:3px solid #fff;right:15px; top:60px; z-index:99; position:absolute; visibility:hidden}
	#inventory-box ul{list-style:none;}
	#inventory-box li{width:32%; padding:8.5px 0px; cursor:pointer; display:inline-block}
	#inventory-box li img{display:block; margin:0 auto; width:64px; height:auto;}
	#inventory-box li.appear img{-webkit-animation:itemAppear 0.3s;}
	#inventory-box li.pickup img{-webkit-filter: grayscale(100%);}

	#inventory-box.show{visibility:visible; -webkit-animation:itemAppear 0.3s;}
	
	.inventory-box-help{text-align:center; padding:7.5px; color:#fff;}
	
	.inventory-lock{background:url(images/inventory-lock.svg) center center no-repeat; background-size:100%; position:absolute; width:80%; top:50%; left:50%; height:80%; transform:translate3d(-50%,-50%,0); display:none;}
	.effect-pulse .inventory-lock{display:block}
	
	.map-tick{ position:absolute; width:65%; top:50%; left:50%; height:65%; transform:translate3d(-50%,-50%,0); display:none;}
	.completed .map-tick{display:block;}
	
	.map-type-navigator .map-tick{top:48%; width:65%; height:65%}
	
	
	#navigation-helper{position:fixed; right:10px; bottom:49px; width:48px; height:48px; transform:rotate(180deg); display:none;}
	#navigation-helper.show{display:block; animation:updown 1s ease infinite;}
	
	@keyframes updown{
		0%{
			transform:translate3d(0,-50%,0) rotate(180deg);	
		}
		50%{
			transform:translate3d(0,0%,0) rotate(180deg);	
		}
		100%{
			transform:translate3d(0,-50%,0) rotate(180deg);	
		}

	}

	/*=========================================================
	// MENU OPTION
	/========================================================*/
	.menu-options{list-style:none; text-align:right; padding:0!important; height:28px;}
	.menu-options li{display:inline-block; margin:0 5px}
	.menu-options li.selected{}
	
	.menu-options li a{display:block;width:28px; height:28px; opacity:.5; cursor:pointer}
	.menu-options li a:hover{opacity:1;}
	.menu-settings{background:url(images/settings.png) center center no-repeat; background-size:100%;}
	.menu-search{background:url(images/search.png) center center no-repeat; background-size:90%;}
	.menu-resources{background:url(images/resources.png) center center no-repeat; background-size:100%;}

	.menu-settings:hover{animation:1s turn linear infinite;}
	.menu-search:hover{animation:1s pulse linear infinite;}
	.menu-resources:hover{animation:1s pulse linear infinite;}

	.settings-menu{
		padding:15px;
		list-style:none; 
		position:absolute;
		transform:translate3d(-110%,0,0); 
		position:absolute; top:0; 
		width:100%; height:100%; z-index:3; background:#fff; max-width:420px
	}
	.settings-menu.show{transform:translate3d(300px,0,0);-webkit-transform:translate3d(300px,0,0);}
	
	@keyframes turn{
		0%{
			transform:rotate(0deg);		
		}	
		100%{
			transform:rotate(360deg);
		}
	}
	
	
	.ellipsis{text-overflow:ellipsis; overflow:hidden; word-wrap:nowrap}