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

.kontext .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	/*box-shadow: 0px 0px 120px rgba( 0, 0, 0, 0.8 );*/
}

.kontext .layer.show {
	visibility: visible;
}

.kontext.capable {
	-webkit-perspective: 1000px;
	   -moz-perspective: 1000px;
	        perspective: 1000px;

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.kontext.capable .layer {
	-webkit-transform: translateZ( -100px );
	   -moz-transform: translateZ( -100px );
	        transform: translateZ( -100px );
}

.kontext.capable .layer.show {
	-webkit-transform: translateZ( 0px );
	   -moz-transform: translateZ( 0px );
	        transform: translateZ( 0px );
}

.kontext.capable.animate .layer.show.right {
	-webkit-animation: show-right 1s forwards ease;
	   -moz-animation: show-right 1s forwards ease;
	        animation: show-right 1s forwards ease;
}

.kontext.capable.animate .layer.hide.right {
	-webkit-animation: hide-right 1s forwards ease;
	   -moz-animation: hide-right 1s forwards ease;
	        animation: hide-right 1s forwards ease;
}

.kontext.capable.animate .layer.show.left {
	-webkit-animation: show-left 1s forwards ease;
	   -moz-animation: show-left 1s forwards ease;
	        animation: show-left 1s forwards ease;
}

.kontext.capable.animate .layer.hide.left {
	-webkit-animation: hide-left 1s forwards ease;
	   -moz-animation: hide-left 1s forwards ease;
	        animation: hide-left 1s forwards ease;
}


/* CSS animation keyframes */

@-webkit-keyframes show-right {
	0%   { -webkit-transform: translateZ( -200px ); }
	40%  { -webkit-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -webkit-transform: translateZ( 0px ); }
}

@-webkit-keyframes hide-right {
	0%   { -webkit-transform: translateZ( 0px ); visibility: visible; }
	40%  { -webkit-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -webkit-transform: translateZ( -200px ); visibility: hidden; }
}

@-moz-keyframes show-right {
	0%   { -moz-transform: translateZ( -200px ); }
	40%  { -moz-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -moz-transform: translateZ( 0px ); }
}

@-moz-keyframes hide-right {
	0%   { -moz-transform: translateZ( 0px ); visibility: visible; }
	40%  { -moz-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -moz-transform: translateZ( -200px ); visibility: hidden; }
}

@keyframes show-right {
	0%   { transform: translateZ( -200px ); }
	40%  { transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { transform: translateZ( 0px ); }
}

@keyframes hide-right {
	0%   { transform: translateZ( 0px ); visibility: visible; }
	40%  { transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { transform: translateZ( -200px ); visibility: hidden; }
}


@-webkit-keyframes show-left {
	0%   { -webkit-transform: translateZ( -200px ); }
	40%  { -webkit-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -webkit-transform: translateZ( 0px ); }
}

@-webkit-keyframes hide-left {
	0%   { -webkit-transform: translateZ( 0px ); visibility: visible; }
	40%  { -webkit-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -webkit-transform: translateZ( -200px ); visibility: hidden; }
}

@-moz-keyframes show-left {
	0%   { -moz-transform: translateZ( -200px ); }
	40%  { -moz-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -moz-transform: translateZ( 0px ); }
}

@-moz-keyframes hide-left {
	0%   { -moz-transform: translateZ( 0px ); visibility: visible; }
	40%  { -moz-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -moz-transform: translateZ( -200px ); visibility: hidden; }
}

@keyframes show-left {
	0%   { transform: translateZ( -200px ); }
	40%  { transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { transform: translateZ( 0px ); }
}

@keyframes hide-left {
	0%   { transform: translateZ( 0px ); visibility: visible; }
	40%  { transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { transform: translateZ( -200px ); visibility: hidden; }
}


/* Dimmer */

.kontext .layer .dimmer {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	max-width: 450px;
  	margin: 0 auto;
	//background: transparent;
}

	.kontext.capable.animate .layer .dimmer {
		-webkit-transition: background 1s ease;
		   -moz-transition: background 1s ease;
		        transition: background 1s ease;
	}

	.kontext.capable.animate .layer.hide .dimmer {
		visibility: visible;
		//background: rgba( 0, 0, 0, 0.7 );
	}




/* Styles for the demo */

html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

body {
	//background-color: #222;
	//background-image: url(../images/red-theme.png);
	//background-repeat: repeat;
	max-width: 450px;
  	margin: 0 auto;
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	//color: #fff;




	
}

.layer {
	//text-align: center;
	text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 );
}




.layer.one {
	//background: #dc6c5f;
}

.layer.two {
	//background: white;

}

.layer.three {
	//background: #64b9d2;
}

.layer.four {
	//background: white;
}
.layer.five {
	//background: white;
}
.layer.six {
	//background: white;
}
.layer.seven {
	//background: #F07610;
}
.layer.eight {
	//background: white;
}

.bullets {
	position: fixed;
	width: 100%;
	bottom: -3px;
	padding: 0;
	margin: 0;
	text-align: center;
	display: flex;
	z-index: 11;
	left: 0;
	background: rgb(226,18,29);
	


}

.feedback-row
{
  padding: 10px;
}

.scrollbar
{
	float: left;
	height: 100%;
	overflow-y: scroll;
	//margin-bottom: 25px;
}

/*For Mozilla Browser */
.scroll-width-none {
  scrollbar-width: none;
}
/*End For Mozilla Browser */

#style-2::-webkit-scrollbar-track
{
	//-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		border-radius: 10px;
  	background-color: transparent;
}

#style-2::-webkit-scrollbar
{
	width: 0px;
	-moz-scrollbar-width: none;
	-moz-scrollbar-color:transparent;
  //background-color: #2F98D1;
}

#style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		//background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, #007bb5),
									   color-stop(0.72, transperent),
									   color-stop(0.86, #55acee));

}



	.bullets li {
		display: inline-block;
		//width: 20px;
		//height: 20px;
		//border-radius: 50%;
		margin: 0 3px;
		

		//background: rgba( 255, 255, 255, 0.5 );
		//box-shadow: 0px 0px 4px rgba( 0, 0, 0, 0.2 );
		cursor: pointer;

		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
		text-decoration: none;
		display: inline-block;
	    //width: 100%;
	    text-align: center;
	    padding: 10px;
	    padding-left: 80px;
	    box-sizing: border-box;
	    color: white;
	    text-align: center;

	}

		.bullets li:hover {
			//background: rgba( 255, 255, 255, 0.8 );
		}

		.bullets li.active {
			cursor: default;
			//background: #fff;
		}

@media screen and (max-width: 400px) {
	body {
		font-size: 12px;
	}

	

	.bullets li {
		margin: 0 6px;
	}
}

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

	.bullets {
		overflow-x: scroll;
	}
}