/*////////////////////////////////////////////////////////////////
	______________________________________________________________
	
	INDEX
	______________________________________________________________

		0. Generics
			- typography
			- more classes

		1. Boostrap Overrides
			- container
			- buttons
			- tabs

		2. Main Layout
			- header
			- wrapper
			- canvas
			- footer

		3. Components
			- Sliders

////////////////////////////////////////////////////////////////*/

/*	0. Generics
////////////////////////////////////////////////////////////////*/

/*
	body
*/

html{height: 100%}
body{
	position:absolute; 
	width:100%; 
	height:100%; 
	overflow:hidden;
	background: #fff;
	color: #627081;
	}
body.retina-display {}

/*
	typography
*/

body {
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
a.btn, button {
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

h1, h2, h3, h4, h5, h6 {
	font-family:Arial,Helvetica,sans-serif;
	line-height: 1;
}

h1, h2{
	text-transform: uppercase;
}

h2{
	font-size: 37px;
}

/*button {
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}*/

a, .btn{
	/*transition: background 200ms, color 200ms, box-shadow 200ms;
	-moz-transition: background 200ms, color 200ms, -moz-box-shadow 200ms;
	-webkit-transition: background 200ms, color 200ms, -webkit-box-shadow 200ms;*/
}

a {
	
}

a:hover {
	
}

a, img, a:hover, a:active, a:focus, input, button {
	outline: 0;
	text-decoration: none;
}

*{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*
	Auxiliars classes
*/

.uppercase{
	text-transform: uppercase;
}
.bold{
	font-weight: bold;
}
.btn-extra{
	font-size: 28px;
}

.no-padding-left {
	padding-left: 0;
}
.text-nowrap {
	white-space: nowrap;
}

.visum{
	font-family:Arial,Helvetica,sans-serif;
}
.yellow{
	color: #ffbb2c;
}
.blue{
	color: #0018a8;
}
.blue-dark {
	color: #636f80;
}
.fs14px {
	font-size: 14px;
}

/*	1. Boostrap Overrides
////////////////////////////////////////////////////////////////*/

/*
	container
*/
.container{
	padding: 0;
	width: 1000px;
}

/*
	buttons
*/
.btn {
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}
.btn-default {
  color: #626f81;
}
.btn-default:hover,.btn-default:focus {
  background-color: #626f81;
  color: white;
}
.btn-primary {
	border-width: 0;
}
.btn-call-action {
	color: #fff;
	background-color: #FCA63E;
}
.btn-call-action:hover, .btn-call-action:focus, .btn-call-action:active, .btn-call-action.active, .open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #f0992e;
}
.btn-white{
	background: #fff;
	color: #000;
}
.btn-white:hover,
.btn-white:focus{
	background: #009c33;
	color: #fff;
}
.btn-danger{
	background: #e90000;
}
.btn-danger:hover,
.btn-danger:focus{
	background: #920101;
}

.btn .glyphicon {
	font-size:12px;
	margin-left:10px;
}

.nav-pills>li>a {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}

.popover-content {
	max-height: 220px;
	overflow: auto;
	color:#627081;
}



/*	2. Main Layout
////////////////////////////////////////////////////////////////*/

/*
	header
*/
#main-header{}
	
	#main-header .container{
		overflow-x: hidden;
	}

		#main-header .col-brand {
			padding-left: 0;
			padding-top: 13px;
			padding-bottom: 9px;
		}
		#main-header #brand{
			margin: 0;
			display: inline;
		}
		#main-header #brand img {
			cursor: pointer;
			max-height: 70px;
		}

		#main-header .col-header-2 {
			text-align: right;
		}

		#main-header .col-header-2 img {
			max-height: 70px;
		}
		
		
		#main-header .gotostar{
					
					color:#0018a8 ;
					text-transform: none;			
					position: absolute;
					left:0px;
					top: 20px;
					opacity: 1;	
					font-size:14px;		
		}
		
		#main-header .gotostar img{
					
				margin-right:5px;		
		}

/*
	wrapper
*/
#wrapper{}

/*
	canvas
*/
#canvas{
	height:600px;
	width: 1000px;
	transition: height 200ms;
	-moz-transition: height 200ms;
	-webkit-transition: height 200ms;
	position: relative;
	overflow: hidden;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
}

#canvas-load{
	background: rgba(255,255,255,0.8);
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: opacity 200ms width 200ms height 200ms;
	-moz-transition: opacity 200ms width 200ms height 200ms;
	-webkit-transition: opacity 200ms width 200ms height 200ms;
	-webkit-transform-style: preserve-3d;
}

	#canvas .canvas-content{
		float: left;
		position: relative;
		width: 1000px;
		height: 600px;
		transition: margin 600ms ease-in;
		-moz-transition: margin 600ms ease-in;
		-webkit-transition: margin 600ms ease-in;
	}
	#canvas .canvas-content.absolute{
		z-index: 1;
		position: absolute;
	}
	#canvas .canvas-content.exit{
		margin-top: -100%;
	}

		#canvas .screen{
			position: relative;
		}

			#canvas .screen .screen-background{
				position: relative;
				z-index: 0;
				display: inline-block;
				transition: transform 600ms, margin 600ms, opacity 600ms;
				-moz-transition: -moz-transform 600ms, margin 600ms, opacity 600ms;
				-webkit-transition: -webkit-transform 600ms, margin 600ms, opacity 600ms;
				width: 1000px;
				height: 600px;
				overflow: hidden;
				border-radius: 0px;
				-moz-border-radius: 0px;
				-webkit-border-radius: 0px;
				
			}

			#canvas .screen .screen-background .scene.parallax{
				-webkit-transform-style: preserve-3d;
				-webkit-backface-visibility: hidden;
			}
			#canvas .screen .screen-background .scene.parallax .layer{
				position: absolute;
				display: block;
				height: 100%;
				width: 100%;
				left: 0px;
				top: 0px;
				height: 600px;
				-webkit-transform-style: preserve-3d;
				-webkit-backface-visibility: hidden;
				z-index: 1;
			}

			#canvas .screen .screen-content{
				position: absolute;
				z-index: 1;
				top: 0;
				width: 100%;
				height: 100%;
			}
			
			
				#canvas .screen .screen-content .btns-back{
					position: absolute;
					z-index: 10;
					right: 58px;
					top: 46px;
				}
					#canvas .screen .screen-content .btns-back .btn{
						margin-left: 2px;
						padding: 10px 13px;
					}

				#canvas .screen .screen-content .act-holder,
				#canvas .screen .screen-content .act{
					width: 1024px;
					height: 588px;
					float: left;
				}
				#canvas .screen .screen-content .act{
					display: none;
					opacity: 0;
					transition:opacity 200ms;
					-moz-transition:opacity 200ms;
					-webkit-transition:opacity 200ms;
					-webkit-transform-style: preserve-3d;
					-webkit-backface-visibility: hidden;
				}
				#canvas .screen .screen-content .act00{
					display: block;
				}
				#canvas .screen .screen-content .act.active{
					opacity: 1;
					display: block;
				}
				#canvas.next-act .screen .screen-content .act00{
					opacity: 0;
				}

/*
	footer
*/
#main-footer{
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 30px;
  	padding-bottom: 0;
}

	#main-footer .container{
		overflow-x: hidden;
	}

	#main-footer ul.footer-navigation.left {
		margin-left: 2px;
	}


#main-load{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 8
}

#main-load .loader{
	top: 394px;
}

.loader{
	position: absolute;
	width: 48px;
	height: 48px;
	left: 50%;
	top: 50%;
	margin-top: -24px;
	margin-left: -24px;
	overflow: hidden;
}


/*	3. Components
////////////////////////////////////////////////////////////////*/

/*
	Sliders
*/

.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	cursor: default;
	background: url(../../assets/img/bg_slider@2x.png) no-repeat scroll 0 0 #f6f6f5;
	background-size: cover;
	border: 0;
	margin-left: -9px;
	margin-top: -7px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
							
.ui-slider .ui-slider-range {
	background-color: #0018a8;
}

/*
	.switch
*/

.switch {
	z-index: 2;
	width: 47px;
	height: 14px;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	cursor: pointer;
	background: #e6e6e7;
	padding: 1px;
	cursor: pointer;
	box-shadow: 0 -1px #A1A1A1;
	-moz-box-shadow: 0 -1px #A1A1A1;
	-webkit-box-shadow: 0 -1px #A1A1A1;
	transition: background 200ms;
	-moz-transition: background 200ms;
	-webkit-transition: background 200ms;
	float: left;
	top: 5px;
	position: relative;
	margin-bottom: 3px;
	margin-top: 5px;
}
.switch.on {
	background: #0018a8;
}

	.switch .ui-slider-handle {
		position: absolute;
		z-index: 2;
		width: 23px;
		height: 23px;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		cursor: default;
		background: url(../img/bg_slider@2x.png) no-repeat center center #f6f6f5;
		background-size: cover;
		border: 0;
		margin-left: -3px;
		margin-top: -7px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
		-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
		-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	}

	.switch.on .ui-slider-handle {
		margin-left: 26px;
	}


/*
	.inner-modal
*/

.inner-modal {
	display: none;
	/*overflow: auto;
	overflow-y: scroll;*/
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}
.inner-modal-shadow{
	position: absolute;
	z-index: 1049;
	-webkit-transition: all .3s ease-out ;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
}
.inner-modal-shadow.fade {
	background: rgba(0,0,0,0.0);
	top: 50%;
	right: 50%;
	bottom: 50%;
	left: 50%;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
.inner-modal-shadow.in {
	background: rgba(255, 255, 255, 0.8);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 0px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

	.inner-modal-container{
		width: 600px;
		margin: 30px auto;
		position: relative;
		z-index: 1;
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
	}
	.inner-modal.fade .inner-modal-container {
		-webkit-transition: -webkit-transform .3s ease-out;
		-moz-transition: -moz-transform .3s ease-out;
		-o-transition: -o-transform .3s ease-out;
		transition: transform .3s ease-out;
	}
	.inner-modal.top .inner-modal-container {
		-webkit-transform: translateY(-25%);
		-ms-transform: translateY(-25%);
		transform: translateY(-25%);
	}
	.inner-modal.bottom .inner-modal-container {
		-webkit-transform: translateY(500%);
		-ms-transform: translateY(500%);
		transform: translateY(500%);
	}
	.inner-modal.left .inner-modal-container {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	.inner-modal.right .inner-modal-container {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
	.inner-modal.in .inner-modal-container {
		-webkit-transform: translate(0,0);
		-ms-transform: translate(0,0);
		transform: translate(0,0);
	}


/*	4. Rooms
////////////////////////////////////////////////////////////////*/

/*
	Navigation between lectures
*/

.navigation {
	  position: absolute;
	  width: 100%;
	  text-align: center;
	  left: 0;
	  top: 0;
	  border-top: 4px solid #0e3d8a;
	  text-align: center;
	  overflow: hidden;
	  height: 70px;
}
	.navigation a {
		position: relative;
		top: -5px;
		display: inline-block;
		width: 240px;
		padding: 9px 0 4px 0;
		background: #888888;
		color: white;
		text-transform: uppercase;
		font-size: 12px;
		box-shadow: 1px 1px 1px 0px rgba(0,0,0, 0.4);
		-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0, 0.4);
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
		-webkit-border-bottom-left-radius: 40px;
		-webkit-border-bottom-right-radius: 40px;
		cursor: pointer;
			transition: all 200ms ease-in-out;
			-webkit-transition: all 200ms ease-in-out;
	}
		.navigation a:hover {
			top: 0;
			background: #595959;
			color: white;
		}
		.navigation a img {
			margin-right: 5px;
		}
		.navigation a:nth-of-type(1){
			z-index: 3;
		}
		.navigation a:nth-of-type(2){
			z-index: 2;
			margin-left: -30px;
		}
		.navigation a:nth-of-type(3){
			z-index: 1;
			margin-left: -30px;
		}
		.navigation a.active {
			background: #595959;
			top: 0;
		}
		
/*
	Info Modal & button
*/
		
.button-info {
  position: absolute;
  top: 70px;
  left: 40px;
}

#guide-modal.inner-modal {
	
}

.inner-modal-shadow#guide-modal-modal-shadow {
	background: rgba(61,61,61,0.7);
}

#guide-modal .inner-modal-container {
	position: relative;
	width: 100%;
	margin: 0;
	color: white;
	font-family: Arial;
/*	font-family: 'Indie Flower', cursive;
*/	font-size: 17px;
	line-height: 1.2;
}
#guide-modal .close-modal {
	opacity: 1;
}
	.room-help {
		display: none;
		position: relative;
		width: 100%;
		padding: 20px;
	}
	#guide-modal .room-help {
		display: block;
	}
		.room-help .arrow {
			position: absolute;
		}
	.room-help div.box-text {
		position: absolute;
		width: 240px;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.6);
	}
		.room-help div.box-text.block1 {
			top: 35px;
			left: 50px;
			width: 310px;
		}
		.room-help .arrow.arrow01 {
			top: 128px;
			left: 90px;
		}
		.room-help div.box-text.block2 {
		 	top: 20px;
		 	right: 180px;
		 	width: 300px;
		}
		.room-help .arrow.arrow02 {
			top: 123px;
			left: 560px;
				transform: rotate(8deg);
				-webkit-transform: rotate(8deg);
				-ms-transform: rotate(8deg);
				-moz-transform: rotate(8deg);
		}
		.room-help div.box-text.block3 {
			  top: 481px;
			  left: 236px;
			  width: 300px;
		}
		.room-help .arrow.arrow03 {
		  top: 428px;
		  left: 330px;
				-moz-transform: scaleX(-1) rotate(175deg);
		        -o-transform: scaleX(-1) rotate(175deg);
		        -webkit-transform: scaleX(-1) rotate(175deg);
		        transform: scaleX(-1) rotate(175deg);
		        filter: FlipH;
		        -ms-filter: "FlipH";
		}
		.room-help div.box-text.block4 {
		  top: 320px;
		  right: 50px;
		}
		.room-help .arrow.arrow04 {
			top: 268px;
			right: 120px;
				-moz-transform: scaleX(-1) rotate(175deg);
		        -o-transform: scaleX(-1) rotate(175deg);
		        -webkit-transform: scaleX(-1) rotate(175deg);
		        transform: scaleX(-1) rotate(175deg);
		        filter: FlipH;
		        -ms-filter: "FlipH";
		}
/*
	Tables
*/

#controls table th {
  font-weight: bold;
  padding-bottom: 4px !important;
}

/*
	Background tables
*/
#controls-background {
	background-color: rgba(255,255,255, 0.8);
}
	#controls-background .col1,
	#controls-background .col2{
		background-color:#fff;
		opacity:0.9;
		height: 100%;
	}
/*
	Cerficate button
*/

a.certificate-button{
	position: absolute;
	right: 34px;
	top: 50px;
	text-align: center;
	z-index: 2;
	width: 80px;
	display: block;
	white-space: inherit;
	
	padding: 10px 7px;
	
	box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.3);
	
	font-size: 12px;
	line-height: 1.3;
}
	a.certificate-button i {
		font-size: 18px;
		margin-top: 5px;
	}
	
#total-calculate{
	position: absolute;
	top: 200px;	
	left: 886px;
	font-size: 13px;
	text-transform: none;
	font-family:Arial,Helvetica,sans-serif;
	color: #14C89;
	line-height: 1.3;
	margin-top:	10px;
}

	#total-calculate .percent{
		display: block;
		font-size: 34px;
	}

/*
	Link to Avatar configuration modal
*/

.screen .open-configuration{
	bottom: 15px;
	left: 20px;
	z-index: 4;
	height: 58px;
	width: 230px;
	position: absolute;
}
	.screen .open-configuration img {
		height: 58px;
		width: 230px;
	}

/*
	Button edit profile
*/

.edit-dates {
	position: absolute;
	bottom: 40px;
	left: 90px;
	color: #fff;
	font-size: 14px;
}

/*	x. Modals
////////////////////////////////////////////////////////////////*/

#legal-modal .inner-modal-container .close-modal {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 20px;
  line-height: 27px;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  padding: 0 7px;
  color: #cbcaca;
  z-index: 1000;
}

#impressum-modal-shadow, #datenschutz-modal-shadow {
	background:rgba(255, 255, 255, 1);
}

#legal-modal.inner-modal {
	
}

#legal-modal .inner-modal-container {
	width: 1000px;
	height: 600px;
	overflow: hidden;
	margin: 0;
}
	#legal-modal .legal-content {
		width: 1000px;
		height: 600px;
		padding: 20px 200px;
		overflow: auto;
	}
	#legal-modal .legal-content h1,
	#legal-modal .legal-content h2 {
		font-size: 18px;
		text-transform: none;
	}