/*////////////////////////////////////////////////
	// COLUMNS
	////////////////////////////////////////////////*/
	
	.column-1-12{width:8.33333333333%;}
	.column-2-12{width:16.6666666666%;}
	.column-3-12{width:25%;}
	.column-4-12{width:33.3333333333%;}
	.column-5-12{width:41.6666666666%;}
	.column-6-12{width:50%;}
	.column-7-12{width:58.3333333333%;}
	.column-8-12{width:66.6666666666%;}
	.column-9-12{width:75%;}
	.column-10-12{width:83.333333333%;}
	.column-11-12{width:91.666666666%;}
	.column-12-12{width:100%;}

	
	.page h1{margin-bottom:15px}
	.page h2{}
	.page h3{ }
	.page h4{margin-bottom:7.5px;}
	.page p{}
	
	
	.float-left{float:left;}
	
	.layer img{max-width:100%; height:auto;}	
	.layer p{margin-bottom:15px; }
	
	.layer ul,.layer ol{padding:15px 30px}
	.layer ul li,.layer ol li{}

	.layer ul ul,.layer ol ol{padding:0 30px 15px}

	.sub-page-activity .column-5-12, .bubble-bit-container .column-5-12{float:none; width: 100%}
	.sub-page-activity .column-7-12, .bubble-bit-container .column-7-12{float:none; width: 100%}

	.response-icon{position:absolute; opacity:0;}
	.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%;}

	.correct-icon.show,
	.incorrect-icon.show{
		-webkit-animation:popIn 0.5s;  -webkit-animation-fill-mode: forwards;
		-ms-animation:popIn 0.5s;  -ms-animation-fill-mode: forwards;		
		animation:popIn 0.5s;  animation-fill-mode: forwards;
		display:block; opacity:1;
	}

	
	/* ONE COLUMN	*/
	.one-column { margin:0 auto; float:none!important}
	.one-column img{margin:0 0 15px; display:block}
	
	.page-content-video{display:block; width:100%; height:auto;}


	/* DROPDOWNS*/
	
	.drop-down{padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.3);}
	.drop-down-question{float:left; width:70%;}
	.drop-down-answer{float:right; width:30%; text-align:right; position:relative}
	.drop-down-answer .response-icon{position:absolute; top:5px; right:5px; width:30px; height:30px;}
	.drop-down select{padding:10px 15px; border:1px solid rgba(255,255,255,0.7); color:inherit; background:none;border-radius:20px; min-width:220px; text-align:center; display:inline-block; max-width:220px;}
	.drop-down select option{color:#000; padding:7.5px}
	
	.drop-down select{
		appearance: none; 
		-moz-appearance:none;
		-webkit-appearance: none; 
	}
	
	.drop-down select::-ms-expand {
		display: none;
	}	
	/* SLIDE SHOW*/
	
	.slideshow-container{margin:0 auto 0; min-height:500px;}
	.tx-slideshow{width:90%;max-width:800px; margin:0 auto; position:relative;}	
	.tx-slideshow img{width:auto!important; height:100%; max-height:354px; display:block; margin:0 auto; display:block}
	
	.tx-slideshow .slideshow-slide{position:absolute; width:100%; transform:translate3d(100%,0,0); opacity:0; transition-duration:1s;}
	
	.tx-slideshow .slideshow-slide.show{ transform:translate3d(0%,0,0); opacity:1}
	.tx-slideshow .slideshow-slide.hidden{ transform:translate3d(-100%,0,0); opacity:0}
	
	.tx-slideshow .slideshow-footer{position:absolute; bottom:-48px; right:0; left:0;}
	
	.tx-slideshow .slideshow-footer ul{list-style:none; text-align:center}
	.tx-slideshow .slideshow-footer li{display:inline-block;}
	.tx-slideshow .slideshow-footer li a{width:10px; height:10px; border-radius:50%; background:#000; line-height:normal; display:block; margin-right:5px; opacity:0; cursor:pointer; text-indent:-9999px}
	.ready .slideshow-footer li a{opacity:.5;}
	.tx-slideshow .slideshow-footer a.show{opacity:1;}
	
	.slideshow-nav.next{background:url(images/next.png) center center no-repeat;  right:-48px;background-size:24px;}
	.slideshow-nav.prev{background:url(images/prev.png) center center no-repeat;  left:-48px;background-size:24px;}
	.slideshow-nav{background-size:24px; width:48px; height:48px; position:absolute; bottom:50%; opacity:0; cursor:pointer;}
	
	.ready .slideshow-nav{opacity:.5;}
	
	.slideshow-nav:hover{opacity:1;}
	.slideshow-nav.next:hover{background-position:15px center;}
	.slideshow-nav.prev:hover{background-position:10px center;}
	
	.sliding .slideshow-nav.next{transform:translate3d(100%,0,0); opacity:0}
	.sliding .slideshow-nav.prev{transform:translate3d(-100%,0,0); opacity:0}


	
	/* QUIZ*/
	
	.quiz-title{position:absolute; top:12px;}
	
	.question-slide.hide{display:none;}
	.quiz-icon{max-width:128px; margin:30px auto;}
	.quiz{margin:0 auto;  position:relative; overflow:hidden; min-height:480px; max-width:820px;}
	
	.multiple-choice-container{margin:0 auto; max-width:820px;}

	.ui-effects-light .quiz-start,
	.quiz-start{position:absolute; transform:translate(0%,0); -webkit-transform:translate(0%,0);width:100%; height:100%;min-height:480px;}

	.ui-effects-light .quiz-start.hide,
	.quiz-start.hide{ transform:translate(-10%,0);-webkit-transform:translate(-10%,0); opacity:0}
	.quiz-start p{font-size:1.3em;}

	.ui-effects-light .quiz-end,
	.quiz-end{position:absolute; transform:translate(100%,0); -webkit-transform:translate(100%,0); width:100%; top:0; height:100%;min-height:480px;}
	.quiz-end .quiz-icon{margin:30px auto; width:128px;}
	
	.quiz-end.show{transform:translate(0%,0);-webkit-transform:translate(0%,0);}

	.quiz-end .point-name{float:left; width:50%; text-align:left;}
	.quiz-end .point-value{float:left; width:50%; text-align:right;}
	
	.ui-effects-light .question-slide,
	.question-slide{position:absolute; transform:translate(100%,0); -webkit-transform:translate(100%,0); width:100%; min-height:420px; padding-top:50px;}
	
	.question-slide-inner{}
	
	.ui-effects-light .question-slide.show,
	.question-slide.show{transform:translate(0%,0);-webkit-transform:translate(0%,0);}
	
	.ui-effects-light .question-slide.hide,
	.question-slide.hide{transform:translate(-10%,0); opacity:0;-webkit-transform:translate(-10%,0);}
	
	.quiz-start .quiz-footer,
	.quiz-end .quiz-footer{position:absolute; bottom:0; left:0; right:0;}
	.quiz .quiz-header{border-bottom:2px solid #fff; position:absolute; width:100%; display:none; height:48px;}
	.quiz .quiz-header.show{display:block;}
	.quiz .quiz-header .quiz-icon{width:36px; height:36px; position:absolute; top:5px; left:5px; margin:0 0 0 0;}
	.quiz-timer{position:absolute; top:12px; right:12px; }
	
	.quiz-name{text-transform:uppercase; display:block;  padding:12px 0}
	
	.quiz h1{padding:60px 0 0;}
	
	.quiz .quiz-image img{width:auto!important; height:auto; max-width:100%; display:block; margin:0 auto 7.5px; max-height:360px}
	
	.question-slide h1{margin-bottom:0;}
	
	
	.mc fieldset,.quiz fieldset{position:relative; border:none; background:none; box-shadow:none; margin: 0  0 0; padding:0 0; border-bottom:1px solid rgba(0,0,0,.1);}
	.mc label,.quiz label {
		display: block;
		position: relative;
		padding: 15px 57px 15px 0;
		vertical-align: top;
		cursor: pointer;
		-webkit-transition: color 0.3s;
		transition: color 0.3s;
		opacity:0.7;

	}
	
	.quiz input[type="checkbox"],
	.quiz input[type="radio"],
	.quiz label::before {
		width: 28px;
		height: 28px;
		top: 10px;
		right: 0;
		
		position: absolute;
		cursor: pointer;
	}
	
	
	.mc input[type="checkbox"],
	.mc input[type="radio"],
	.mc label::before{
		width: 28px;
		height: 28px;
		top: 10px;
		right: 0;
		
		position: absolute;
		cursor: pointer;
	}
	
	.mc input[type="radio"],
	.mc input[type="checkbox"],
	.quiz input[type="checkbox"],
	.quiz input[type="radio"] {
		opacity: 0;
		-webkit-appearance: none;
		display: inline-block;
		vertical-align: middle;
		z-index: 1;
	}
	.mc label::before,
	.quiz label::before {
		content: '';
		border: 2px solid #fff;
		-webkit-transition: opacity 0.3s;
		transition: opacity 0.3s;
		border-radius:50%;
	}
	.logic-multiple-checkmark label::before{border-radius:5px;}
	
	.ac-radio label::before {
		border-radius: 50%;
	}
	
	.mc input[type="checkbox"]:checked + label,
	.quiz input[type="checkbox"]:checked + label,
	.quiz input[type="radio"]:checked + label,
	.selected-label{
		opacity:1!important;
	} 
	
	.mc svg,
	.quiz svg {
		position: absolute;
		width: 26px;
		height: 26px;
		top: 12px;
		right: 4px;
		pointer-events: none;
	}
	.mc svg path,
	.quiz svg path {
		stroke: #fff;
		stroke-width: 13px;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
	}
	
	.mc fieldset,
	.quiz fieldset{margin:0 0!important;}
	
	
	.quiz{ margin:7.5px auto 15px; display:block!important;}
	
	.answers{padding-bottom:48px; border-top:1px solid rgba(0,0,0,0.1)}	
	
	.submit-answer{padding:7px 15px; color:#fff; display:block;  border-radius:30px; margin:15px auto; position:relative; cursor:pointer; font-weight:300;  max-width:160px; text-align:center;text-transform:uppercase; cursor:pointer}

	.quiz-show{}
	.quiz-show h3{ font-size:1.5em!important; text-align:center; padding-bottom:30px}
	.quiz-show label{
		line-height:1.5em;
		font-size:1em;		
	}
	
	.quiz-show input[type="checkbox"],
	.quiz-show input[type="radio"],
	.quiz-show label::before {
		width: 24px;
		height: 24px;
	}
	.quiz-show svg{width:20px; height:20px;}
	.quiz-show label{padding:7.5px 7.5px 13px 44.5px!important; display:block!important}
	.quiz-show fieldset{margin:15px auto!important; max-width:480px; border:3px solid #fff; border-radius:30px;}
	
	
	/* MULTIPLE SELECT*/
	.multiple-select-container{max-width:960px; margin:0 auto;}
	.select-question{background:#f6f6f6; margin:0 0 15px; box-shadow:0 0 3px rgba(0,0,0,0.1); padding:15px 5px 15px 15px; position:relative; cursor:pointer}
	.select-question-placeholder{color:#000; padding:7px; display:block; max-width:620px; width:80%}
	.select-question-drop-icon{float:right; width:48px; height:40px; background:url(images/dropdown.svg) center center no-repeat; background-size:80%}
	
	.select-answers{list-style:none; margin:0!important; padding:0!important; position:absolute; max-width:960px; width:100%; display:none;}
	.select-answers li{
			padding:21px 15px 21px 21px!important; box-shadow:0 0 3px rgba(0,0,0,0.1); margin-top:1px; color:#000; display:block;
			transform:translate(0,-100%) scale(0.5); visibility:hidden; opacity:0;
			 cursor:pointer
	}
	.select-box{float:right; display:block; border:2px solid rgba(0,0,0,0.1); width:28px; height:28px; margin-left:15px; border-radius:5px}
	.select-answers li:hover .select-box{background:url(images/tick-hover.svg) center center no-repeat; background-size:80%;}

	
	.select-answers.open{display:block}
	.select-answers li.show{transform:translate(0%,0) scale(1); visibility:visible; opacity:1}
	
	.select-question.correct .select-question-drop-icon{display:none;}

	.select-question .select-tick{background:url(images/tick.svg) center center; background-size:100%; position:absolute;  -webkit-transform: scale(0); transform:scale(0); opacity:0;top:15px; right:15px; width:36px; height:36px;}
	.select-question.correct .select-tick{
		-webkit-animation:popIn 0.5s;  -webkit-animation-fill-mode: forwards;
		-ms-animation:popIn 0.5s;  -ms-animation-fill-mode: forwards;		
		animation:popIn 0.5s;  animation-fill-mode: forwards;
		display:block; opacity:1;
	}


	/* MULTIPLE CHOICE*/
	
	
	/* VISUAL DIAGRAM*/
	.visual-diagram-list{padding:15px 0}
	.visual-diagram-left{text-align:right;}
	.visual-diagram-right{}
	
	.visual-diagram-image{padding:0 30px;}
	.visual-diagram-list h4{margin-bottom:0!important;}
	.visual-diagram-list p{margin-top:0!important;}

	.blank-diagram-visual{ height:420px;border:1px solid #fff;border-radius:15px; background:url(images/light-blank-image.svg) center center no-repeat; background-size:90%;}
	

	/* SORTABLES*/
	.list-icons{width:12%; float:left;}
	.list-boxes{width:88%; float:left;}
	.list-icon{width:100px; height:100px;border:1px solid #fff;border-radius:15px; background:url(images/light-blank-image.svg) center center no-repeat; background-size:90%; margin-bottom:15px}
	.list-icon-image{width:100px; height:102px; margin-bottom:15px;}
	.list-image{}
	.list-text{height:72px;background:#f6f6f6;border-radius:15px;  margin-bottom:15px; padding:15px; color:#000; cursor:pointer; position:relative}
	.list-text p{margin:0 0 0 0;}

	.list-text .response-icon{bottom:5px; right:5px; width:36px; height:36px;}
	
	.drop-list-label{height:70px;border:1px dashed #fff;border-radius:15px;  margin-bottom:15px; padding:15px;}


	/* CARD SORTABLE	*/
	.card-grid{text-align:center; max-width:840px; margin:0 auto;}
	.card-grid .card{display:inline-block; width:24%; max-width:238px;  cursor:pointer}
	.card-container{padding:7px; background:#f6f6f6; box-shadow:rgba(0,0,0,0.3); position:relative}
	.card-image{width:100%; position:relative}
	.blank-sortable-card{border-radius:15px; border:1px solid #f6f6f6; margin:0 15px 15px 0; min-height:324px;  background:url(images/light-blank-image.svg) center center no-repeat; background-size:90%;}
	.card-image img{radius:10px 10px 0 0;}
	.card-title{padding:30px 7px 7px; color:#000!important; font-weight:bold; border-bottom:1px solid rgba(0,0,0,0.1); margin:0 0 0 0; line-height:normal}
	.card-description{padding:7px 7px 45px 7px; opacity:0.9; color:#000; }
	
	.drop-card{border:1px dashed #fff; border-radius:10px;display:inline-block; width:22%; margin:1%;}
	


	.card .response-icon{bottom:30px; right:26px; width:36px; height:36px;}
	
	/* MIX & MATCH */
	.drag-icon,.drop-icon-placeholder{width:33.333%; float:left; min-height:128px; margin-bottom:7.5px; position:relative}
	
	.drag-icon-image,.drop-icon-image{margin:0 7.5px 0}
	.drag-icon-empty{border-radius:15px; border:1px solid #fff; width:144px; height:144px; background:url(images/light-blank-image.svg) center center no-repeat; background-size:90%;}
	
	.drag-icon-image.ui-draggable-dragging{z-index:10!important;}
	.drop-icon-placeholder{z-index:0;}
	
	/* MEMORY GAME */
	.memory-card{width:12.5%; float:left; cursor:pointer; position:relative; min-height:176px}
	
	.flip-container{perspective: 1000px;}
	.flip-container.flipped .flipper, .flip-container.completed .flipper, .flip-container.failed .flipper{
		transform: rotateY(180deg);
	}
	.flip-container.failed .flipper{opacity:.7;}
	
	.flipper {
		transform-style: preserve-3d;
		position: relative;
	}
	.flip-front, .flip-back {
		backface-visibility: hidden;
		width:100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.flip-front {
		z-index: 2;
		/* for firefox 31 */
		transform: rotateY(180deg);

	}
	/* back, initially hidden pane */
	.flip-back {
		transform: rotateY(0deg);

	}	
	


	.ie-fix
	{
		transform: rotateY(0deg)!important;
	}
	
	
	.ie-fix.flipped .flipper, .ie-fix.completed .flipper, .ie-fix.failed .flipper{
		transform: rotateY(0deg);
	}

	.ie-fix .flip-container .flip-front
	{
		transform: rotateY(180deg)!important;
	}

	.ie-fix.flipped .flip-front, .ie-fix.completed .flip-front, .ie-fix.failed .flip-front
	{
		transform: rotateY(0deg)!important;
	}
	
	.ie-fix.flipped .flip-back, .ie-fix.completed .flip-back, .ie-fix.failed .flip-back{opacity:0;transform: rotateY(180deg)!important;}
	
	.back-card,.front-card{margin:0 15px 15px 0;}
	
	.back-card-empty{border-radius:15px; border:1px solid #fff; margin:0 15px 15px 0; min-height:159px;  background:#fff url(images/dark-blank-image.svg) center center no-repeat; background-size:90%;}
	.back-front-empty{border-radius:15px; border:1px solid #f6f6f6; margin:0 15px 15px 0; min-height:159px;  background:url(images/light-blank-image.svg) center center no-repeat; background-size:90%;}


	.memory-game-overlay{background:rgba(0,0,0,.03); position:absolute; top:0; left:0; right:0; bottom:0; visibility:hidden; opacity:0;}
	.memory-game-overlay.show{visibility:visible; opacity:1;}
	
	.memory-game-start{position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0); min-width:120px}
	.memory-game-solve{opacity:0; }
	.memory-game-solve.show{opacity:1;}
	
	.memory-game-timer{opacity:0; padding:0 0 0 15px}
	.memory-game-timer.show{opacity:1;}
	
	
	
	/* MEMORY GAME LEVELS */
	.memory-game.memory-grid-12 .memory-card{width:8.333%; float:left; cursor:pointer; position:relative; min-height:115px}
	.memory-game.memory-grid-12 .back-card-empty,
	.memory-game.memory-grid-12 .back-front-empty
	{ min-height:100px}

	.memory-game.memory-grid-4{width:50%!important; margin:0 auto;}
	.memory-game.memory-grid-4 .memory-card{width:25%; float:left; cursor:pointer; position:relative; min-height:180px}
	.memory-game.memory-grid-4 .back-card-empty,
	.memory-game.memory-grid-4 .back-front-empty
	{ min-height:159px}

	
	/* DRAG & DROP	*/
	.drag-card{width:33.333%; float:left;  cursor:pointer; position:relative}
	.drag-card-empty{border-radius:15px; border:1px solid #f6f6f6; margin:0 15px 15px 0; min-height:200px;  background:url(images/light-blank-image.svg) center center no-repeat; background-size:90%;}
	.drag-card-image{margin:0 15px 15px 0;}
	.drop-card-container{max-width:320px; margin:30px auto; text-align:center}
	.drop-card-area-blank{min-height:320px;border:1px solid #f6f6f6;border-radius:15px; max-width:220px;margin:0 auto; background-size:90%;}
	.drop-card-area,.drop-card-placement{max-width:220px;margin:0 auto 7.5px;}
	
	.drop-card-placement .drag-card-image{
		width:100%!important; height:100%!important; max-height:320px; position:absolute!important; top:0!important; left:0!important;
		-webkit-animation:popIn 0.5s;  -webkit-animation-fill-mode: forwards;
		-ms-animation:popIn 0.5s;  -ms-animation-fill-mode: forwards;		
		animation:popIn 0.5s;  animation-fill-mode: forwards;
	}
	
	.drop-card-area img{margin:0 auto; max-width:100%; height:auto;}

	/* MAP*/
	.map-container{border:5px solid #f6f6f6; width:960px; height:540px; border-radius:15px; overflow:hidden; position:relative; margin:0 auto;}
	.template-map{-webkit-transition-property:transform;transition-property:transform; }
	.game-map-grid{position:absolute; display:block;cursor:pointer}
	.map-dev{ font-size:24px; color:#fff;box-shadow:-1px -1px 0 rgba(255,255,255,1) inset; font-weight:bold; opacity:.5}
	.map-dev:hover{background:#fff; color:#000; opacity:0.7}
	.map-dev.selected{background:#fff; color:#000; opacity:1}
	.map-zoom{position:absolute; background:#fff; width:32px; z-index:1; top:15px; left:15px; border-radius:3px; box-shadow:3px 3px 0 rgba(0,0,0,0.1)}
	
	.map-disoveries{border-radius:15px;  padding:5px 15px; background:#fff;box-shadow:3px 3px 0 rgba(0,0,0,0.1); position:absolute; top:15px; right:15px; color:#000; line-height:normal}
	
	.map-zoom a{display:block; width:32px; height:32px; }
	
	.map-zoom-in{background:url(images/zoom-plus.png) center center no-repeat; background-size:14px;border-bottom:1px solid rgba(0,0,0,0.1)}
	.map-zoom-out{background:url(images/zoom-minus.png) center center no-repeat; background-size:14px;}
	
	.disabled-button{opacity:0.1; cursor:pointer}
	
	.map-object{min-width:64px; min-height:64px; cursor:pointer;}
	.map-object img{max-width:100%; max-height:100%; width:100%; height:auto; display:block; margin:0 auto;-webkit-backface-visibility:hidden}
	.effect-pulse{
		 -webkit-animation:pulse 1s infinite;
		 -ms-animation-name:pulse 1s infinite;
		 animation:pulse 1s infinite;
	}
	
	.map-type-activity .map-tick{top:32%; width:60px; height:60px;}
	
	.map-container.fullscreen{position:absolute; top:48px; left:0; border:none; border-radius:0; width:100%; height:100%;}
	
	.map-navigator-container{border:3px solid #fff; border-radius:5px; position:absolute; bottom:111px; right:15px;overflow:hidden; box-shadow:3px 3px 0 rgba(0,0,0,0.1)}
	.map-navigator-container img{border-radius:3px; cursor:pointer;}
	.map-navigator-viewport{ cursor:move;position:absolute; background:rgba(0,0,0,0.1); top:0; left:0; }

	/*	HELPER	*/
	.map-helper{z-index:15; position:absolute; bottom:0; left:0; right:0; visibility:hidden}
	#helper,.map-helper{z-index:3; visibility:hidden}

	.map-info{display:none;}

	#helper.show,.map-helper.show{ visibility:visible}
	#helper.show .helper-bubble,.map-helper.show .helper-bubble{ -webkit-animation:popIn 0.3s;animation:popIn 0.3s;}
	#helper.show .helper-visual,.map-helper.show .helper-visual{ -webkit-animation:popIn 0.5s; animation:popIn 0.5s;}

	.helper-bubble{background:#fff; border-radius:15px; padding:15px; margin-left:145px; box-shadow:5px 5px 0 rgba(0,0,0,0.3);  cursor:pointer;}
	.helper-bubble p{ min-height:104px; max-height:104px; overflow:auto; display:block; margin:0 0; padding:0px!important; color:#000}
	.helper-visual{float:left; width:128px; height:128px; border-radius:50%; border:3px solid #fff; box-shadow:3px 3px 0 rgba(0,0,0,0.5); overflow:hidden; position:relative}

	.map-helper .helper-bubble{background:#fff; border-radius:0 0 5px 5px; padding:15px; padding-left:145px; margin:0 0 0 0; cursor:pointer}
	.map-helper .helper-bubble p{ min-height:75px; max-height:75px; overflow:auto; display:block; margin:0 0; padding:0px!important; color:#000}
	.map-helper .helper-visual{position:absolute;width:118px; height:118px; border-radius:50%; border:5px solid #fff;; box-shadow:none; overflow:hidden; bottom:0; left:7px; z-index:16; background-color:#fff;}

	.helper-finger{background:url(images/finger.svg) center center no-repeat; background-size:48px 48px; height:48px; width:48px; position:absolute; bottom:15px; right:15px; cursor:pointer}
	.helper-visual img{width:100%; height:auto;}
	
	
	.object-container{margin:0 15px; padding:15px 0}
	.interactive-container{margin:0 15px;}

	.blur-back{ opacity:0.3!important;}

	@media screen and (max-width: 1280px){
		.columns{max-width:1020px;}
	}

	@media screen and (max-width: 1024px){
		.columns{max-width:960px;}
	}

	@media screen and (max-height: 790px){
		
	}

	
	@media screen and (max-width: 1024px) {
		#start-page{top:0%;}
		.quiz{margin:0 15px;}
	
	}
	
	@media screen and (max-width: 768px){
		

		.drop-down-question{float:none; width:auto;}
		.drop-down-answer{float:none; width:auto; margin-top:15px}
		.drop-down select{ display:block; max-width:none; width:100%;}

		
		.select-answers{left:15px; right:15px; width:auto!important;}
		.multiple-select-container{margin:0 15px;}
		.quiz{border:none!important;margin:0 15px 0 15px!important; background:none!important; border-radius:none;}
		.question-slide-inner{padding:0 0 0 0!important;}
		
		.column-1-12{width:25%;}
		.column-2-12{width:25%;}
		.column-3-12{width:33.333%;}
		.column-4-12{width:50%; margin:0 auto}
		.column-5-12{width:100%;}
		.column-6-12{width:100%;}
		.column-7-12{width:100%;}
		.column-8-12{width:100%;}
		.column-9-12{width:100%;}
		.column-10-12{width:100%;}
		.column-11-12{width:100%;}
		.column-12-12{width:100%;}
		
		.aside-slideshow .slideshow-image,.aside-boxed-slideshow .slideshow-image{width:100%; max-height:none}
		.aside-slideshow .slideshow-content,.aside-boxed-slideshow .slideshow-content{width:100%;}
		
		.tabs-navigation ul li a{min-width:none;}
		
		.card{width:50%;}
		
		.list-icons{width:16%;}
		.list-boxes{width:83%;}

		
	}
	
	@media screen and (max-width: 480px){

		.column-1-12{width:50%;margin:0 auto; float:none}
		.column-2-12{width:50%;margin:0 auto; float:none}
		.column-3-12{width:100%;}
		.column-4-12{width:100%; }
		
		.quiz-start,.quiz-end{height:auto!important; min-height:0}
		.quiz .quiz-footer{position:static;}

		
		.columns{padding:15px 7.5px}
		.has-theme .columns{margin-left:0!important;margin-right:0!important;margin-bottom:0!important; padding:15px!important; width:auto!important; min-width:0}
		
		.has-theme.page-align-center .columns{margin-left:7.5px!important;margin-right:7.5px!important;padding:15px 7.5px!important;}
	

		.hide-on-mobile{display:none;}	
		.course-progress{max-width:210px!important;}
		.helper-visual{float:none!important; margin:0 auto 15px}
		.helper-bubble{margin-left:0!important;}
		.quiz{}
		#navigation-title{max-width:200px; margin:0 auto; overflow:hidden; height:15px}
		
		.score{right:5px;}
		#score-points{padding:3px 7px;}
		
		.card{width:auto; display:block; margin:0 auto;}
		
		.quiz h3{font-size:1.3em!important;}
		.quiz label{font-size:1em!important;}
		
		.quiz input[type="checkbox"],
		.quiz input[type="radio"],
		.quiz label::before {
			width: 24px;
			height: 24px;
		}
		.quiz svg {
			width: 24px;
			height: 24px;
		}
		.quiz label{padding:7.5px 7.5px 13px 44.5px!important;}
		.quiz{ min-height:420px;}
		
		.md-content{margin:15px 15px;}
		.click-button{display:block!important;}
		
		.navigation-action{background-color:transparent!important;}
		
		.quiz .answers{padding-bottom:0;}
		.quiz-show h3{padding-bottom:0;}


	}
	
	@media screen and (max-height: 720px){
		#title-screen{max-width:420px; width:70%}
	}
	
	button.click-button{line-height:inherit;background:rgba(0,0,0,0.2); border:none; padding:7px 15px; color:#fff; display:inline-block;  border-radius:30px;min-width:120px;  max-width:200px; text-align:center; cursor:pointer; text-transform:uppercase}


	/*==============================================
	// WORD SEARCH
	/=============================================*/
	
	.wordsearch-container{margin:0 auto;}
	.wordsearch-game{border:1px solid rgba(0,0,0,.1); border-right:none; border-bottom:none; display:inline-block}
	.wordsearch-words{border:1px solid rgba(0,0,0,.1);border-bottom:none;}
	
	.wordsearch-overlay{background:rgba(0,0,0,.03); position:absolute; top:0; left:0; right:0; bottom:0; visibility:hidden; opacity:0;}
	.wordsearch-overlay.show{visibility:visible; opacity:1;}
	
	.wordsearch-words ul{list-style:none; padding:0}
	.wordsearch-words ul li{padding:12px 15px; text-transform:uppercase; position:relative; border-bottom:1px solid rgba(0,0,0,.1)}
	.wordsearch-words ul li .response-icon{position:absolute; top:12px; right:15px; width:21px; height:21px;}
		
	.wordsearch-words .wordFound{text-decoration:line-through;}
	
	.wordsearch-start{position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0); min-width:120px}
	.wordseach-solve{opacity:0; }
	.wordseach-solve.show{opacity:1;}
	
	.wordsearch-timer{opacity:0;}
	.wordsearch-timer.show{opacity:1;}
	
	.puzzleSquare{background:none; text-transform:uppercase; width:48px; height:48px;border:none; border-right:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1)}
	.puzzleSquare.solved{background:#C0392B; color:#fff}
	.puzzleSquare.found{background:#000; color:#fff;}
	.puzzleSquare.selected {
	  background-color: rgba(0,0,0,.1);
	}


	/*==============================================
	// MAP POP UP
	/=============================================*/


	.bubble-bit{width:37.5%; max-width:480px; background:#fff; position:fixed; z-index:2; top:49px; bottom:48px;transform:translate3d(-100%,0,0); visibility:hidden; transition-property:transform, opacity!important;}
	.bubble-bit.left{left:0; transform:translate3d(-100%,0,0); overflow-x:hidden}
	.bubble-bit.right{right:0; transform:translate3d(100%,0,0); overflow-x:hidden}
	
	.bubble-bit video{display:block; max-width:100%;}
	
	
	.bubble-bit.show{ transform:translate3d(0%,0,0); visibility:visible;}
	
	.bubble-bit-container{ padding:30px 30px; display:none;}
	.bubble-bit.show .bubble-bit-container{display:block;}
	.bubble-bit-container img, .bubble-bit-container video{max-width:100%; height:auto; margin:0 auto 15px;}
	.bubble-bit-help{ visibility:hidden;}
	
	.bubble-bit-container .float-left{float:none!important;}
	.bubble-bit-container .object-container{margin:0!important;}
	
	.bubble-bit.show .bubble-bit-help{ visibility:visible;}
	
	.bubble-bit *,
	.bubble-bit{
		color:#000;
	}
	
	.bubble-bit.grow{
		max-width:320px;
		max-height:320px;
		box-shadow:0 0 3px rgba(0,0,0,0.3);	
		
	}
	.bubble-bit.burst{

		-webkit-animation:burst 0.5s;  -webkit-animation-fill-mode: forwards;
		animation:burst 0.5s;  animation-fill-mode: forwards;
	}
	
	.bubble-bit-container.show{visibility:visible; opacity:1; min-height:40%; overflow:auto; max-height:476px; overflow:auto }
	.bubble-bit-container.hide{opacity:0;}
	
	.bubble-bit-container ul{list-style:disc; margin:15px 30px;}
	.bubble-bit-container li{margin:0 0 7.5px;}
	.bubble-bit p{margin-bottom:15px;}
	
	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	  .bubble-bit-container.show{min-height:0px;  max-height:432px;}
	}	
	@media screen and (max-width: 480px){
		.bubble-bit{left:0%; top:0%; transform:translate3d(-0%,-0%,0); }

		.bubble-bit.burst{margin:2% 2%!important; width:96%; height:96%;}

	}

	
	.bubble-bit-help{ z-index:1}
	
	.bubble-bit-overlay{background:rgba(0,0,0,.2); position:absolute; top:0; left:0; right:0; bottom:0; visibility:hidden; opacity:0; z-index:0}
	.bubble-bit-overlay.show{visibility:visible; opacity:1; z-index:1}


	#map-circle{position:absolute; top:12%;}

	#map-overlay-clip{width:471px; height:471px; position:absolute; left:3px; top:3px; border-radius:240px; overflow:hidden; opacity:0}
	#map-overlay-clip-image{}
	#map-overlay-clip.show{opacity:1;}
	
	#map-circle svg .outer{
		stroke: #fff; 
		fill:transparent; 
		stroke-width:3;
		stroke-dasharray: 1489.114917801562;
		
	}
	
	#map-circle.draw svg .outer{animation: drawCircle .9s ease-in;}


	@-webkit-keyframes drawCircle {
	  from {
		stroke-dashoffset: 1489.114917801562;
	  }
	  
	  to {
		stroke-dashoffset: 0;
	  }
	}	

	@-webkit-keyframes unDrawCircle {
	  from {
		stroke-dashoffset: 0;
		stroke: #fff; 
	  }
	  
	  to {
		stroke-dashoffset: 1489.114917801562;
		stroke: transparent; 
	  }
	}	

	/*==============================================
	// SCENES
	/=============================================*/

	.scene-viewport{position:absolute; overflow:hidden; left:0; top:41px}
	.scene-backdrop{position:absolute; z-index:0;margin:-540px 0 0 -1050px; left:50%; top:50%}
	.scene-background{position:absolute; z-index:0;margin:-540px 0 0 -1050px; left:50%; top:50%}
	.scene-foreground{position:absolute; z-index:1;margin:0 0 -540px -1050px; left:50%; bottom:50%}
	
	
	.scene-stage{position:absolute; z-index:0;margin:-540px 0 0 -1050px; left:50%; top:50%}
	.scene-background{position:absolute; z-index:0;margin:-540px 0 0 -1050px; left:50%; top:50%}
	
	.pane-1{transform:translate3d(-100%,0,0);}
	
	.scene-object{position:absolute; width:200px; height:270px}
	.man{ background:url(man.png) top left;}
	
	
	.scene-guideline{position:absolute; left:50%; top:0; width:100%; height:100%; max-width:1280px; border-right:1px solid red; border-left:1px solid red; transform:translate3d(-50%,0,0); z-index:1}
	
	.scene-backdrop-guideline{position:absolute; left:50%; top:0; width:100%; height:100%; max-width:1280px; border-right:1px solid #F800FF; border-left:1px solid #F800FF; transform:translate3d(-50%,0,0); z-index:1}
	.scene-background-guideline{position:absolute; left:50%; top:0; width:100%; height:100%; max-width:1280px; border-right:1px solid #00FBFF; border-left:1px solid #00FBFF; transform:translate3d(-50%,0,0); z-index:1}
	
	.scene-actor{position:absolute;}
	.scene-actor.temp{border:1px solid red}
	
	.scene-interactive{position:absolute; width:54px; height:54px; padding:5px; background:rgba(0,0,0,.1); border-radius:50%}
	.scene-interactive.temp{border:1px solid red;}


	.scene-text{position:absolute;}
	.scene-text.temp{border:1px solid red;}
	
	.scene-interactive img{width:100%; height:100%;}
	
	.scene-interactive:hover{transform:scale(1.2)!important; cursor:pointer}
	
	.scene-actor{background-size:100%!important;}
	
	.scene-actor.sprite{
		background-size:auto!important; background-repeat:repeat-x!important;
	}
	
	.sprite.run{
		animation: sprite steps(16,end) 1.5s infinite; transform: translateZ(0);
	}
	.sprite-reverse.run{
		animation: sprite-reverse steps(16,end) 1.5s infinite; transform: translateZ(0);
	}

	.sprite.stop{animation:none!important;background-position:-100% 0!important;}
	.sprite-reverse.stop{animation:none!important;background-position:100% 0!important;}
	
	.scene-text p{margin-bottom:15px;}
	
	@-webkit-keyframes sprite {
	 from {background-position:0 0; }
  	 to {background-position:-100% 0;}
	}
	@-webkit-keyframes sprite-reverse {
	 from {background-position:0 0; }
  	 to {background-position:100% 0;}
	}

	/* SCORE BOARD */
	.score-result-label{display:block; float:left; width:49%;text-align:left;}
	.score-result-input{display:block; float:right; width:49%; border:none; background:none; padding:0; margin:0; text-align:right;}
	
	.inventory-preview-list{list-style:none; text-align:center;}
	.inventory-preview-list li{width:32px; height:32px; display:inline-block; opacity:.3}
	.inventory-preview-list li.show{opacity:1;}
	
	.score-result,.quiz-result{padding:15px 0; border-top:1px solid rgba(0,0,0,.1)}



	/*=========================================================
	// UI
	/========================================================*/
	
	
	/* NEXT & PREV */
	.gui-nav.next{background:url(images/next.png) center center no-repeat;  right:0;background-size:24px;}
	.gui-nav.prev{background:url(images/prev.png) center center no-repeat;  left:0;background-size:24px;}
	.gui-nav{background-size:24px; width:48px; height:48px; position:absolute;cursor:pointer; top:-23px}
	
	.gui-nav{opacity:.5;}
	
	.gui-nav:hover{opacity:1;}
	.gui-nav.next:hover{background-position:15px center;}
	.gui-nav.prev:hover{background-position:10px center;}
	
	/* CLOSE */	
	.gui-close{position:relative; display:block; width:24px; height:24px; margin:0 auto; background-size:100%; cursor:pointer; opacity:.3; z-index:100;}
	.gui-close:before,
	.gui-close:after{top:0;content:" "; height:3px; border-radius:5px; background:#000; width:100%; display:block;position:absolute;}

	.gui-close:before{transform:translate(0%,0) rotate(-45deg); height:3px; width:24px;visibility:visible}
	.gui-close:after{transform:translate(0,0) rotate(45deg); height:3px; width:24px;visibility:visible}
	
	
	.gui-close:hover{opacity:1;}




	/*=========================================================
	// CARD DECK
	/========================================================*/
	
	.card-chooser{ margin:5% auto 0; max-width:1200px;padding:15px}
	
	.card-pack{position:relative; max-width:200px; margin:36px auto 0; height:480px}
	
	.card-transition{transition:transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);}
	
	.card-pack .card{width:200px; height:285px;position:absolute; top:0; left:0; transform:translate3d(0,0,0) rotate(0deg); transform-origin:50% 90% 0px; cursor:pointer}
	
	.card-drop-wrapper{width:200px; display:inline-block; text-align:center; margin:0 .5%}
	.card-drop{width:200px; height:300px; background:rgba(0,0,0,.2); border-radius:10px; position:relative;}
	.card-drop img{width:100%; height:auto; position:absolute; top:0!important; left:0!important}
	
	.card img{width:100%;}
	.card-image{ border-radius:7px 7px 0 0;}
	.card-text{padding:30px 5px;}
	.card-text h3{font-size:18px;}
	
	/* CARD DECK */
	.card-drop-wrapper h3{margin:5px 0;}
	
	
	/* CARD DECK CONTROLS */
	.card-deck-controls{top:-20px; position:absolute; width:200px}
	
	.card-deck-nav{position:absolute; top:-18px; width:28px; height:24px; opacity:.3; z-index:100;}
	.card-deck-nav:hover{opacity:1; cursor:pointer}
	.card-deck-nav.next{background:url(images/next.png) left center no-repeat; background-size:24px; right:48px;}
	.card-deck-nav.prev{background:url(images/next.png) left center no-repeat; background-size:24px; left:48px; transform:rotate(180deg)}
	
	.card-deck-nav.next:hover{background-position:right center}
	.card-deck-nav.prev:hover{background-position:right center}
	
	.card-deck-close{position:absolute; top:-24px; left:50%; width:36px; height:36px; background:url(images/fan-cards.png) center center no-repeat; background-size:100%; cursor:pointer; opacity:.3; z-index:100; transform:translate(-50%,0)}
	.card-deck-close:before,
	.card-deck-close:after{top:15.5px;content:" "; height:3px; border-radius:5px; background:#000; width:0; display:block;position:absolute;
		transition-duration:.5s;
		transition-property:visibility width transform height opacity;
		transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		visibility:hidden;
		left:50%;
		transform:translate(-50%,0);
	}
	
	.card-deck-close:hover{opacity:1;}
	
	.deck-open .card-deck-close{background:none}
	.deck-open .card-deck-close:before{transform:translate(-50%,0) rotate(-45deg); height:3px; width:24px;visibility:visible}
	.deck-open .card-deck-close:after{transform:translate(-50%,0) rotate(45deg); height:3px; width:24px;visibility:visible}




	/*=========================================================
	// FULLSCREEN VIDEO
	/========================================================*/
	
	.fullscreen-video{position:fixed; top:0; bottom:0; left:0; right:0; background:#000}
	.video-blank{width:auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
		
	.fullscreen-video video{position:absolute; top:50%; left:50%; width:auto; height:100%; display:block; transform:translate(-50%,-50%);}
	
	.timeline-context{position:absolute; width:480px; color:#fff; opacity:0;}
	.timeline-context.shadow{ text-shadow:2px 2px 0px rgba(0,0,0,.3);}
	
	.timeline-context.top-right{top:96px; right:48px; transform:translate3d(0,-100%,0); text-align:right}
	.timeline-context.top-left{top:96px; left:48px; transform:translate3d(0,-100%,0)}
	.timeline-context.bottom-left{bottom:96px; left:48px; transform:translate3d(0,100%,0)}
	.timeline-context.bottom-right{bottom:96px; right:48px; transform:translate3d(0,100%,0); text-align:right}
	.timeline-context.center{top:50%; left:50%; transform:translate3d(-50%,0%,0); text-align:center}
	
	.timeline-context.show{ transform:translate3d(0%,0,0); opacity:1;}
	
	
	.timeline-context.center.show{transform:translate3d(-50%,-50%,0); opacity:1}
	
	.timeline-context.hide{opacity:0;}
	
	.timeline-context{transition-duration:1s;}
	
	/*=========================================================
	// AVATAR REFLECTIVE
	/========================================================*/
	.avatar.card{width:200px; height:285px;position:absolute;transform-origin:50% 90% 0px; cursor:pointer}

	.avatar-icon{width:38px; height:38px; background:url(images/blank-avatar.png) center 10%; background-size:112%; border-radius:50%;}
	.avatar-pack{position:relative; width:200px; height:300px;  margin:36px auto 0;}
	
	.avatar-pack .avatar-controls{opacity:0; z-index:0}

	.avatar-cards .avatar{width:96px; height:96px; border-radius:50%; display:inline-block;margin:0 2.5% 2.5%; border:1% solid #fff; position:absolute;}
	.avatar-cards .avatar-wrap{width:96px; height:96px;width:100%; height:100%; overflow:hidden; border-radius:50%;}
	.avatar-cards .avatar img{margin:-6% 0 0 -6%; width:112%; max-width:112%;}
	.avatar-cards .avatar-pack{position:relative; width:324px; margin:0 auto 0;}
	
	.avatar-cards .avatar.selected{}
	.avatar-cards .avatar:before{content:" "; top:0; left:0; position:absolute; border:3px solid transparent; position:absolute; width:96%; height:96%; border-radius:50%; z-index:1}
	
	.avatar-cards .avatar:hover::before,
	.avatar-cards .avatar.selected:before{
		border-color:#000;
		transition:
			border-top-color 0.15s linear,
			border-right-color 0.15s linear 0.10s,
			border-bottom-color 0.15s linear 0.20s,
			border-left-color 0.15s linear 0.30s;	}
	
	
	.avatar-cards .avatar-select:hover{ animation:avatar-hover 1s linear infinite}
	
	.avatar-cards-open .avatar{top:0!important; left:0!important;}
	.avatar-cards-open .avatar-controls{opacity:1; z-index:55}
	
	
	.avatar-cards .avatar.spread{width:200px; height:300px; border-radius:0; margin:0 0 0 0;}
	.avatar-cards .avatar.spread:before{display:none;}
	.avatar-cards .avatar.spread .avatar-wrap{width:200px; height:300px; border-radius:0;}
	.avatar-cards .avatar.spread img{width:100%; height:auto; margin:0;}

	/*=========================================================
	// FIELD INPUTS
	/========================================================*/

	
	.story-fieldset{padding:10px; border-bottom:1px solid rgba(0,0,0,.1);position:relative}
	.story-fieldset input,
	.story-fieldset textarea{
		font:inherit;
		border:none;
		display:block;
		resize:none;
		width:100%;
		
	}

	/*=========================================================
	// MAP ACTIVITIES
	/========================================================*/
	.bubble-bit-container .interactive-container,
	.bubble-bit-container .object-container{margin:0 0}
	
	.bubble-bit-container .layer{float:none; width:100%;}



	/*=========================================================
	// IMAGE SELECT
	/========================================================*/
	
	.image-select{text-align:center;}
	.image-select .card{display:inline-block; width:23%; max-width:200px;margin:1% 1% 0 0;}
	.image-select img{transition-property:transform, opacity!important;}
	.img-select.selected img{transform:scale(1.1); z-index:1}
	.img-select.hide img{transform:scale(.9); z-index:0; opacity:.8}

	/*=========================================================
	// CHAT BOT
	/========================================================*/

	.chatbot{max-width:640px; margin:0 auto;}
	
	.chatbot .avatar-icon{}
	
	.chatbot-window{border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1); padding:15px; overflow:auto}


	.chatbot-reflective{margin:0 auto;}
	
	.chatbot .typing{background:#ccc; padding:3px; border-radius:15px; width:64px; text-align:center; animation:.3s popIn; margin:0 0;}
	.chatbot .message{padding:7.5px 15px; border-radius:15px; background:blue; color:#fff;min-height:15px;}

	.chat-message{ margin:0 0 68px 5px; position:relative; max-width:60%; width:auto; display:inline-block; }

	.chat-user{}
	.chat-user .avatar-icon{position:absolute; width:38px; height:38px; bottom:-52px;}
	.chat-user .chat-info{position:absolute; width:28px; height:28px; bottom:-46px; width:100px}
	
	
	.chatbot .message{text-align:left!important; color:#fff!important;}
	.chatbot .message b{ color:#fff!important;}
	.chatbot .message:after{
			content: '';
			position: absolute;
			width: 0;
			height: 0;
	}	
	
	
	.chatbot .typing:after{display:none;}

	.chatbot .speech{transform-origin:left bottom;}
	.chatbot .speech.show{animation:.3s popIn;}
	
	
	/* CHATBOTS MESSAGE */
	.chatbots-message{}
	.chatbots-message .message{background:#1ABC9C;}
	.chatbots-message .message:after{
		left: 11px;
		right: auto;
		top: auto;
		bottom: -12px;
		border: 14px solid;
		border-color: transparent transparent transparent #1ABC9C;
	}
	
	.chatbots-message .chat-user .avatar-icon{left:-20px}
	.chatbots-message .chat-user .chat-info{left:34px}
	
	/* USERS MESSAGE */
	.users-message{text-align:right; margin-right:15px}
	.users-message .message{background:#3498DB;}
	.users-message .message:after{
			right: 11px;
			left: auto;
			top: auto;
			bottom: -12px;
			border: 14px solid;
			border-color: transparent #3498DB transparent transparent;
	}

	.users-message .chat-user .avatar-icon{right:-20px}
	.users-message .chat-user .chat-info{right:34px}

	
	.chat-info{font-size:80%;}
	
	.chatbot .typing span{width:10px; height:10px; display:inline-block; margin:0 2px 0; background:#fff; border-radius:50%}
	
	.chatbot .typing .dot-1{animation:.9s light-dark infinite 0s;}
	.chatbot .typing .dot-2{animation:.9s light-dark infinite .3s;}
	.chatbot .typing .dot-3{animation:.9s light-dark infinite .6s;}



	/*=========================================================
	// REFLECTIVE
	/========================================================*/
	.reflective-container{max-width:640px; margin:10% auto; text-align:center}
	
	.rating-container{padding:15px 0 0 7.5px;}
	.rating-container ul{list-style:none; padding:0!important; margin:0!important}
	.rating-container ul li{display:inline-block; width:48px; height:48px; border-radius:50%; margin:0 7.5px 0px; overflow:hidden}
	.rating-container ul li img{display:block}
	.rating-container ul li.deselected{transform:scale(.8); opacity:.5;}

	/*=========================================================
	// WALKTHROUGH
	/========================================================*/
	
	#walkthrough-overlay{background:rgba(0,0,0,.2); position:fixed; top:0; right:0; left:0; bottom:0; z-index:10; visibility:hidden; transform:translate(-100%,0); opacity:0; transition-property:visibility, opacity}
	#walkthrough-target{position:absolute; top:0; left:0; border:2px solid transparent; width:48px; height:48px; border-radius:45px; opacity:0; background:#fff; overflow:hidden}
    #walkthrough-content{background:#fff; padding:30px; box-shadow:0 0 3px rgba(0,0,0,.3); position:absolute; max-width:420px; opacity:0; transform:translate3d(0,100%,0); transition-property:opacity, transform; }
	
	#walkthrough-target *{margin:0!important;}
	
	#walkthrough-overlay.show{visibility:visible; transform:translate(0%,0); opacity:1;}
	
	#walkthrough-overlay.show-help #walkthrough-target{
		opacity:1;
		border-color:#fff;
		transition:
			transform .5s cubic-bezier(0.075, 0.82, 0.165, 1),
			opacity .5s cubic-bezier(0.075, 0.82, 0.165, 1),
			border-top-color 0.15s linear,
			border-right-color 0.15s linear 0.10s,
			border-bottom-color 0.15s linear 0.20s,
			border-left-color 0.15s linear 0.30s;	
	}
	#walkthrough-overlay.show-help #walkthrough-content{opacity:1; transform:translate3d(0,0%,0);}
	
	
	@keyframes light-dark{
		0%{background:#fff;}
		100%{background:#666;}	
	}


	@keyframes avatar-hover{
		0%{
			transform:scale(.9);
		}	
		20%{
			transform:scale(1);
		}
		40%{
			transform:scale(1.1);
		}
		60%{
			transform:scale(1.1);
		}
		80%{
			transform:scale(1);
		}
		100%{
			transform:scale(.9);
		}
	}