@import url("https://fonts.googleapis.com/css?family=Montserrat|Orbitron");

.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;
	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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
	##background-repeat: repeat;

	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 h2 {
	position: relative;
	top: 20%;
	margin: 0;
	font-size: 6.25em;
}

.layer p {
	position: relative;
	top: 20%;
	margin: 0;
}

.layer.one {
	##background: lightskyblue;
	background: mediumturquoise;
}

.layer.two {
	background: mediumturquoise;
}

.layer.three {
	background: mediumturquoise;
}
.layer.four {
	background: mediumturquoise;
}
.layer.five {
	background: mediumturquoise;
}
.layer.six {
	background: mediumturquoise;
}

.bullets {
	position: absolute;
	width: 100%;
	bottom: 20px;
	padding: 0;
	margin: 0;
	text-align: center;
}

	.bullets li {
		display: inline-block;
		width: 40px;
		height: 40px;
		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 );
		}

		.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;
	}

	.layer h2 {
		font-size: 5em;
	}

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

        a{
        	color: #333;
	        display: block;
	        font-weight: bold;
	        text-decoration: none;
			##[KH]font-size: 13px;
		    line-height: 20px; font-size: 16px;
	        }

        a:hover{
        	background: #fff;
			
			## KH added below 4 lines
			background-color: lemonchiffon;
			border: 2px solid red;
			outline-color: red;
			##[KH]font-size: 12px;
			line-height: 16px; font-size: 14px;

        	}

		ul.benefits {
			line-height: 1.6;	
			}
		li.benefits:hover {
			##background-color: #555;
			##color: white;
			border: 1px solid red;
    		outline-color: red;
			padding: 0px;
			}

		ul.equip {
			line-height: 1.6;	
			}

		ul.a {
			list-style-type: none;
			margin: 0;
			padding: 10px;
			overflow: hidden;
			background-color: lightblue;
			position: fixed;
		    top: 0;
		    width: 100%;
	        font-size: 20px;
			}

		li.a {
			float: left;
			}

		li.a a {
			display: block;
			color: white;
			text-align: center;
			padding: 14px;
			text-decoration: none;
			}

		li.a a:hover {
			background-color: royalblue;
			border: 2px solid red;
    		outline-color: red;
			padding: 12px;
			border-radius: 20px;
			text-shadow: 0 0 3px #FF0000;
			}

		ul.b {
			##list-style-type: circle;
	        font-size: 16px;
			}
		li.b a {
			display: inline;	        
			font-size: 10px;
			color: red;
			vertical-align: middle;			
			}
		li.c a {
			display: inline;	        
			color: royalblue;
			}
		li.d a {
			display: inline;	        
			color: royalblue;
			}
		li.d a:hover {
			##background-color: royalblue;
			border: 2px solid red;
    		outline-color: red;
			##padding: 12px;
			border-radius: 5px;
			text-shadow: 0 0 1px #FF0000;
			}
		ul.e {
			list-style-type: none;
	        ##font-size: 16px;
			}


		.tooltip {
			position: relative;
			display: inline-block;
			##border-bottom: 1px dotted black;
			border-bottom: none;
			}

		.tooltip .tooltiptext {
			visibility: hidden;
			width: 300px;
			background-color: royalblue;
			color: #fff;
			text-align: justify;
			font-size: 12px;
			border-radius: 10px;
			padding: 6px 10px;
			position: absolute;
			z-index: 1;
			top: -15px;
			left: 110%;
    		outline-color: red;
			}

		.tooltip .tooltiptext::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 100%;
			margin-top: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: transparent black transparent transparent;
			}
		.tooltip:hover .tooltiptext {
			visibility: visible;
			}
		
		.myTable{
			##table-layout: fixed;
			##table-layout: auto;
			##-webkit-transform: scale(1.05);			
			display: block;
			##height: 500px;
			##overflow-y: scroll;
			color: rgba(255, 255, 255, 0.9);
			}
		.myTable td{
			##text-overflow: ellipsis; overflow-x: hidden;
			color: rgba(255, 255, 255, 0.9);
			}
		
		table.zebra {
			background-color: #f2f2f2;
			border-collapse: collapse;
			}
		td.table.zebra {
			font-family: Helvetica, sans-serif;
			font-size: 16px;
			color: dodgerblue;
			}
			
	.Myheader {
		font-size: 60px;
		##font-family: Tangerine;
		##font-family: Indie Flower;
		##font-family: Permanent Marker;
		##font-family: Kalam;
		##font-family: Gloria Hallelujah;
		font-family: Caveat;
		##font-family: Rock Salt;
		font-weight: 700;
		##font-weight: bold;
		##text-transform: uppercase;
		color: rgba(255, 255, 255, 1.0);
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
		padding: 2px;
		##background: #000;
		}
			
	li + li {
		margin-top: 3px;
		}