@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/system/galleries/html/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/system/galleries/html/fonts/MaterialIcons-Regular.woff2) format('woff2'),
       url(/system/galleries/html/fonts/MaterialIcons-Regular.woff) format('woff'),
       url(/system/galleries/html/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
/* titillium-web-300 - latin */
	@font-face {
	  font-family: 'Titillium Web';
	  font-style: normal;
	  font-weight: 300;
	  src: local(''),
		   url('/system/galleries/html/fonts/titillium-web-v15-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		   url('/system/galleries/html/fonts/titillium-web-v15-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	}
	/* titillium-web-regular - latin */
	@font-face {
	  font-family: 'Titillium Web';
	  font-style: normal;
	  font-weight: 400;
	  src: local(''),
		   url('/system/galleries/html/fonts/titillium-web-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		   url('/system/galleries/html/fonts/titillium-web-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	}
	/* titillium-web-600 - latin */
	@font-face {
	  font-family: 'Titillium Web';
	  font-style: normal;
	  font-weight: 600;
	  src: local(''),
		   url('/system/galleries/html/fonts/titillium-web-v15-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		   url('/system/galleries/html/fonts/titillium-web-v15-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	}
	body {
		font-family: 'Titillium Web', sans-serif;
	}
	#bg-img {
		position: fixed;
		top:-0.2rem;
		right:-0.2rem;
		bottom:-0.2rem;
		left:-0.2rem;
		background: #30878c url(/system/galleries/pics/escape-room-pics/bg-escape-room-1.jpg) no-repeat center;
		background-attachment: fixed;
		background-size: cover;
		filter: blur(.1rem);
		z-index: 0;
	}
	p, ul li, ul li a, div {
		font-size: 0.9rem;
	}
	h1 {
		color: #fff;
		text-align: center;
	}
	h2,h3 {
		color: #30878c;
	}
	#restartButton.btn {
		width: auto;
	}
	#folder-panel-wrapper {
		 height: 80%;
		 overflow-y: auto;
	}
	#wrapper, #login {
		position: absolute;
		top: 50%;
		left:50%;
		transform: translate(-50%,-50%);
		max-width:990px;
		width:95vw;
		transition: all 0.25s ease-in-out;
	}
	#wrapper {
		opacity: 0;
		pointer-events: none;
		transform: translate(-50%,-70%);
	}
	#wrapper.active {
		opacity: 1;
		pointer-events: auto;
		position: relative;
		top: 10%;
		left:50%;
		transform: translate(-50%,0);
		max-width:990px;
		width:95vw;
		transition: all 0.25s ease-in-out;
		margin-bottom: 10rem;
	}
	#wrapper.active .panel.well.inner {
		max-height: none;
		height: auto;
	}
	#wrapper.active h1 {
		color: #30878c !important;
		overflow: visible;
		white-space: normal;
		height: auto;
		line-height: normal;
	}
	#wrapper.active h2,
	#wrapper.active h3 {
		color: #666 !important;
	}
	#wrapper.active a, 
	#wrapper.active a:hover, 
	#wrapper.active a:focus, 
	#wrapper.active a:active {
		color: #30878c !important;
	}
	#wrapper.active hr {
		margin: 2rem -1.5rem !important;
	}
	#wrapper.active .well > p {
		margin: 0;
	}
	#wrapper.active .panel.well.inner {
		padding: 1.5rem;
	}
	#wrapper.active .hero-img {
		height: 15rem;
		background: url(/system/galleries/pics/escape-room-pics/er-dieb.jpg);
		background-size: cover;
		background-position: 0% 20%;
		margin: 2rem -1.5rem;
	}
	#wrapper.active .panel.well.inner .row > div:first-child {
		overflow: visible !important;
	}
	#login { 
		z-index: 2;
		width: auto;
	}
	body.open #wrapper {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%,-50%);
	}
	body.open #login { 
		opacity: 0;
		pointer-events: none;
		transform: translate(-50%,-70%);
	}
	#login .panel.well.inner { 
		z-index: 2;
		width: 25vw;
		background: #fff;
		position: relative;
		transition: all 0.25s ease-in-out;
	}
	#wrapper #sub-wrapper {
		position: absolute;
		z-index: -1;
		width: 90%;
		height:10rem;
		left: 5rem;
		top: 5rem;
		opacity: 0;
		transition: all 0.25s ease-in-out;
	}
	#wrapper.set #sub-wrapper {
		position: absolute;
		z-index: 2;
		width: 90%;
		left: -1rem;
		top: 3.5rem;
		opacity: 1;
	}
	#sub-wrapper .sub-step {
		display: none;
		height:98%;
	}
	#wrapper .panel.well.inner {
		max-height:610px;
		height: 75vh;
		background: #fff;
		position: relative;
		transition: all 0.25s ease-in-out;
	}
	#wrapper.set > .panel.well.inner {
		opacity: 0.5;
		transform: scale(0.9) translate(.5rem,1.5rem);
		pointer-events: none;
	}
	.panel.well.inner .row, .panel.well.inner .row > div {
		height:100%;
		position: relative;
	}
	.panel-success {
		position: absolute;
		top: 0;
		left:0;
		right:0;
		bottom:0;
		text-align: center;
		overflow: hidden;
		z-index: 2;
		background: #fff;
		opacity: 0;
		pointer-events: none;
		transition: all 0.5s ease-in-out;
	}
	.panel-success.set { 
		opacity: 1;
		pointer-events: all;
	}
	.panel-success .inner i.material-icons {
		color: #30878c;
		font-size: 12rem;
		display: block;
	}
	.panel-success .inner {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%,-50%);
	}
	.panel-success .inner h2 {
		font-size: 2.5rem;
	}
	#sub-wrapper .content {
		position: absolute;
		top: 100%;
		left:0;
		right:0;
		bottom:0;
		overflow: hidden;
		z-index: 0;
		background: #fff;
		transition: all 0.25s ease-in-out;
		border-radius: 1rem;
	}
	h3.subTitle span {
		float: right;
		margin-right: 1rem;
	}
	iframe {
		border:none;
	}
	#sub-wrapper .content.set {
		top: 0;
	}
	button.btn,
	#wrapper.active .btn.btn-primary {
		background: #30878c !important;
		border: none !important;
		color: #fff !important;
	}
	.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .button.prio-high:hover {
		background: #30878c !important;
		border: none !important;
		opacity: 0.8;
	}
	button.close-panel {
		    background: none;
		border: none;
		float: right;
		padding: none;
		color: #30878c;
		font-size: 1.5rem;
		padding: 0.5rem;
	}
	.flex button.folder {
		opacity: 0;
		pointer-events: none;
		transform: translateY(2rem);
		transition: all 0.25s;
	}
	.flex button.folder.set {
		opacity: 1;
		transform: translateY(0);
		pointer-events: all;
	}
	.flex button.folder.checked {
		opacity: 1;
		transform: scale(0.9) translateY(0);
		pointer-events: all;
		background: rgba(0,0,0,0.03);
		color: #ccc;
   }
   button.folder, button.item, .item.audio {
		padding: 0.8rem;
		border: none;
		background: rgba(48,134,140,0.1);
		color: #30878c;
		text-align: center;
		border-radius: 1rem;
		flex-basis: 31.2%;
		margin: 0 .5rem .5rem 0;
		overflow: hidden;
		vertical-align: top;
		line-height: 1rem;
   }
   .item.audio {
   	flex-basis: 48.5%;
   }
   
   button.maps.folder {
   		position: absolute;
		bottom: 0;
		padding: 0 0.5rem;
		width: auto;
		background: none;
		text-align: left;
   }
   button.maps.folder i.material-icons{
   		display: inline-block;
		font-size: 1.5rem !important;
		vertical-align: middle;
		margin: 0;
   }
   button.maps.folder span {
   		vertical-align: middle;
   }
   .item.audio iframe {
		border: none;
		width: 109%;
		height: 4rem;
		background: none;
		margin: -1rem -1rem 0.5rem -1rem;
		border-radius: 0;
   }
    button.item .img {
   	background: #30878c url(/system/galleries/pics/escape-room-pics/img-card-escape-room-1.jpg) no-repeat center;
	margin: -2rem -2rem 1rem -2rem;
	height: 8rem;
   }
   button.item:nth-child(1) .img {
   	background-image: url(/system/galleries/pics/escape-room-pics/img-card-escape-room-1.jpg);
   }
   button.item:nth-child(2) .img {
   	background-image: url(/system/galleries/pics/escape-room-pics/img-card-escape-room-2.jpg);
   }
    button.item:nth-child(3) .img {
   	background-image: url(/system/galleries/pics/escape-room-pics/img-card-escape-room-3.jpg);
   }
    button.item:nth-child(4) .img {
   	background-image: url(/system/galleries/pics/escape-room-pics/img-card-escape-room-4.jpg);
   }
   button.folder i.material-icons, button.item i.material-icons{
		display: block;
		margin: 0 0 0.5rem 0;
		font-size: 3rem !important;
   }
   .flex {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: stretch;

	}
   /* ----------------------------------------------- Chat -----------------------------------------------------*/
   #chatList {
   	overflow-y: auto;
	max-height: 78%;
	margin-right: -1rem;
	padding: 0 0.5rem 0 0;
   }
   #chatList .chat-item > div {
padding: 0.5rem 0.5rem .8rem .5rem;
border-radius: 1rem;
		background: #30878c;
		color: #fff;
		margin: 0 0 1rem 0;
		display: inline-block;
   }
   #chatList .chat-item > div p {
		margin:0;
   }
   #chatList .chat-item > div i {
		font-size: 1.25rem !important;
   }
   #chatList .chat-item > div.me {
		border-top-right-radius: 0;
		background: rgba(48,134,140,0.1);
		color: #30878c;
   }
   #chatList .chat-item > div.you p {
   		margin-left: 1.6rem;
   }
   #chatList .chat-item > div.me p {
   		margin-right: 1.6rem;
   }
   
    #chatList .chat-item > div.you {
		border-top-left-radius: 0;
   }
   #typeText {
   	position: absolute;
	bottom: 0;
	padding: 0.5rem 1rem 0.5rem 0;
	background: #fff;
	width: 100%;
   }
    #typeText .inner { 
		
	}
   #typeText input, #typeText textarea   {
	border: none;
	background: none;
	color: #30878c;
	margin:0;
	outline: none;
	resize: none;
	width: 100%;
	padding: 0.5rem 2rem 0.5rem 0.5rem;
		background: #fff;
		border: 1px solid rgba(48,134,140,0.2);
		border-radius: 1rem;
   }
   #typeText button {
		position: absolute;
		background: none;
		border: none;
		right: 1.5rem;
		top: 50%;
		color: #30878c;
		transform: translateY(-50%);
		line-height: 1rem;
		padding:0;
	}
   #doc::after {
   	content: "";
	  position: absolute;
	  top: 44%;
	  left: 48%;
	  border: 0.3rem solid #f3f3f3;
	  border-radius: 50%;
	  border-top: 0.3rem solid #ccc;
	  width: 3rem;
	  height: 3rem;
	  z-index:-1;
	  -webkit-animation: spin 2s linear infinite; /* Safari */
	  animation: spin 2s linear infinite;
	}
	 #doc { height: 100%;  }
     #doc object, #doc embed { width: 100%; height: auto }
	  
	/* Safari */
	@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}
	footer {
		text-align: center;
		position: fixed;
		bottom: 0;
		padding: 1rem;
		width: 100%;
	}
	footer a, footer a:hover, footer a:focus {
		color: #fff;
		opacity: 0.5;
		margin: 0 0.5rem 0 0;
		font-size: 1rem;
	}
	
@media screen and (max-width: 767px) {
		#typeText {
			padding-right: 0;
		}
		#typeText input, #typeText textarea {
			width: 100% !important;
		}
		.flex button.folder {
			padding: 0.5rem;
		}
		button.maps.folder {
			padding: 1rem;
			width: 100%;
			background: #fff;
			text-align: center;
			margin: 0;
			border-radius:0;
	   }
		#wrapper #sub-wrapper {
			width: 80%;
			left: 1rem;
			top: 5rem;
		}
		#wrapper.set #sub-wrapper {
			width: 96vw;
			left: 2vw;
			top: 6vh;
			opacity: 1;
		}
		#login .panel.well.inner {
			width: 100%;
		}
		p, ul li, ul li a, div {
			font-size: 1rem;
		}
		h1 {
			font-size: 1.5rem;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			height: 5vh;
    		line-height: 3rem;
		}
		h3 {
			font-size: 1.25rem;
		}
		h3.subTitle {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		#wrapper {
			width: 92vw;
			position: static;
			transform: none !important;
			margin: 0 auto;
		}
		#wrapper.active {
			transform: translate(-50%,0) !important;
			margin: 0;
		}
		#wrapper .panel.well.inner {
			height: 80vh;
			max-height: none;
		}
		
		.panel.well.inner .row > div {
			height: 58%;
			padding: 0 !important;
			transition: all 0.25s ease-in-out;
		}
		.panel.well.inner.set .row > div {
			height: 100%;
		}
		.panel.well.inner .row > div:first-child {
			border-right: none !important;
			height: 40%;
			border-bottom: 1px solid rgba(48,134,140,0.2);
			overflow: hidden;
		}
		.panel.well.inner.set .row > div:first-child {
			height: 0%;
		}
		
		.flex button.folder span {
			display:none;
		}
		#chatList {
			overflow-y: auto;
			margin-right: 0;
			padding: 0;
			max-height: 72%;
	   }
	   #chatList .chat-item > div {
	   	max-width: 100%;
	   }
	   #wrapper .panel.well.inner {
			padding: 1rem;
		}
		button.folder {
			flex-basis: 33%;
			margin: 0;
		}
		button.item, .item.audio {
			flex-basis: 100%;
		}
		#typeText input, #typeText textarea {
			width: 100% !important;
		}
		.item.audio {
			flex-basis: 100%;
		   }
		.item.audio span {
			display: none; 
		   }
		button.item i.material-icons {
			display: inline-block;
			margin: 0 0.5rem 0 0;
			font-size: 2rem !important;
			vertical-align: middle;
		}
		#typeText button {
			right: 0.5rem;
		}
	}
	
   @media screen and (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
	  /*
	  html {
		transform: rotate(-90deg);
		transform-origin: left top;
		width: 100vh;
		overflow-x: hidden;
		position: absolute;
		top: 100%;
		left: 0;
	  }
	  */
	  #wrapper {
	  	opacity: 0.4 !important;
		filter: blur(3px);
	  }
	  body::before {
	  	content: "Um die Inhalte richtig zu sehen, dreh dein Smartphone!";
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 2rem;
		transform: translate(-50%,-50%);
		opacity: 1;
		color: #fff;
		width: 100%;
		z-index: 10;
		display: block;
		text-align: center;
		background: no-repeat;
	  }
	}