@font-face {
	font-family: unitedregular;
	src: url('ufonts.com_unit-regular.ttf');
}

::-webkit-scrollbar {
	width: 22px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.link-hotspot-tooltip {
	font-size: 24px;
	top: 20px;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 12px;
}

.flickity-prev-next-button {
	top: 50% !important;
}

.leftbutton {
	float: left;
	margin-right: 40px;
}

#actions {
	width: 100%;
	position: relative;
	top: 235px;
	height: 30px;
	margin-left: 32px;
}

#share {
	background-color: RGBA(0, 0, 0, 0, 0.9) !important;
}

#share .control-inner {
	width: 450px;
	height: 450px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#share #text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 50px;
	color: red;
}

.popupvis .hotspot {
	visibility: hidden;
}

.social {
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	position: absolute;
	background-color: RGBA(255, 0, 0, 0.8);
	opacity: 0.9;
	padding: 14px 12px 12px 12px;
}

#facebook {
	top: 22px;
	left: 90px;
}

#google {
	top: 22px;
	right: 90px;
}

#linkedin {
	/*top: 180px;*/
	top: 225px;
	left: 5px;
}

#twitter {
	top: 225px;
	right: 5px;
}

#mail {
	bottom: 0px;
	left: 50%;
	transform: translatex(-50%);
}

.mini #sceneList, .mini #actiondescription, .mini #actions {
	visibility: hidden;
}

#actiondescription {
	width: 100%;
	max-width: 216px;
	position: relative;
	top: 240px;
	height: 20px;
	font-family: unitedregular;
	font-size: 20px;
	font-weight: bolder;
	margin-left: 32px;
	text-align: center;
}

#intro {
	background-image: url(../img/kvm_intro.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

#weremalinwa {
	background-color: #272626;
	color: white;
	font-size: 30px;
}

#tosingornottosing {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 50px;
}

#sing {
	float: left;
	cursor: pointer;
}

#nosing {
	float: right;
	cursor: pointer;
}

.intro-icon {
	border-radius: 50%;
	float: left;
	background-color: RGBA(255, 255, 255, 0.8);
	width: 45px;
	height: 45px;
	margin-right: 7px;
}

i.singwithme {
	background-image: url(../img/music.svg);
	height: 35px;
	width: 35px;
}

.intro .fa {
	color: black;
}

.intro .fa.text-danger {
	color: #EE3824;
}

.intro {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	font-family: unitedregular;
}

.intro h1 {
	padding: 50px;
	font-size: 50px;
}

.fullscreen-bg:before {
	content: '';
	position: absolute;
	border-radius: 5px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#intro_logo p {
	font-size: 16px;
}

#alogo p {
	font-size: 11px;
}

#whoami.control-outer {
	background-color: rgba(0, 0, 0, 0.9) !important;
}

#whoami .control-inner {
	background-color: transparent;
	width: 920px;
	max-width: 90%;
	margin-right: auto;
	margin-left: auto;
	color: white;
	background-color: transparent;
}

#title {
	font-family: ubuntu, sans-serif !important;
	font-weight: normal !important;
}

.toggleMenu {
	width: 30px;
	position: absolute;
	top: 50%;
	margin-top: -15px;
}

#hideMenu {
	left: 290px;
}

#showMenu {
	left: 15px;
}

#splitcontainer {
	height: 100px;
	width: 100px;
	overflow: hidden;
	background-image:
		url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}

#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid gray;
	border-right: 100px solid transparent;
}

.iconbutton.vr {
	background-image: url(../img/cardboard.svg);
	background-repeat: no-repeat;
	background-size: 40px 40px;
	background-position: center;
}

.info-block {
	font-family: ubuntu, sans-serif !important;
}

.control-inner h1 {
	font-family: ubuntu, sans-serif !important;
}

.feedback-input {
	font-family: ubuntu, sans-serif !important;
}

#intro_logo p, #alogo p {
	padding-top: 3px;
	line-height: 13px;
	color: #FF0000;
	font-family: ubuntu, sans-serif;
	font-weight: 500;
	text-align: center;
}

#info360 {
	background-color: rgba(255, 255, 255, 1);
}

.center-360icon, .center-text, .instructions360-text {
	color: rgba(0, 0, 0, 1);;
}

.left {
	top: 0;
	position: absolute;
	height: 100%;
	background-color: #EE3824;
}

.left.mini {
	width: 5px;
	-moz-transition: all 0.8s ease-in-out;
	-webkit-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

.left.full {
	width: 280px;
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.scenes {
	margin-left: 16px;
}

#logo {
	top: 20px !important;
	left: 70px !important;
	z-index: 9;
}

.pulse {
	border: 3px solid #ffa71f;
	-webkit-border-radius: 30px;
	height: 40px;
	width: 40px;
	left: 20px;
	top: 20px;
	border-radius: 50%;
	-webkit-animation: none;
	-webkit-animation-iteration-count: 1;
	-moz-animation: pulse 2s ease-out;
	-moz-animation-iteration-count: infinite;
	opacity: 1;
}

#intro_logo {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -113px;
	margin-left: -85px;
	font-size: 50px;
}

#logo img {
	max-width: 100%;
	height: auto;
	width: 140px;
}

.scene #img {
	border: 2px solid #0f0f0f;
}

@media screen and (max-height:490px) {
	.intro h1 {
		padding: 15px;
		font-size: 40px;
	}
	#weremalinwa {
		font-size: 25px;
	}
	#logo img {
		width: 90px;
	}
	#logo {
		top: 5px !important;
	}
	#logo {
		left: 95px !important;
	}
	#sceneList {
		
	}
	.gallery-cell {
		margin-left: 6px;
		margin-bottom: 6px;
		width: 70px !important;
	}
	.scene #img {
		width: 70px !important;
		height: 70px !important;
	}
	.scenes {
		margin-left: 24px;
	}
}

#tosingornottosing {
	font-size: 30px;
}

/*
@media screen and (max-height:490px) {
	#logo {
		top: 5px !important;
	}
	.intro h1 {
		padding: 5px;
		font-size: 30px;
	}
	#weremalinwa {
		font-size: 20px;
	}
	#logo {
		left: 95px !important;
	}
	#sceneList {
		top: 125px !important;
	}
	.gallery-cell {
		width: 70px !important;
	}
	.scene #img {
		width: 70px !important;
		height: 70px !important;
	}
	.scenes {
		margin-left: 24px;
	}
}
*/
#sceneList {
	position: relative;
	top: 260px;
	z-index: 100;
	white-space: nowrap;
	overflow-y: auto;
}

@media screen and (min-height:950px) {
	#sceneList {
		height: 600px;
	}
}

@media screen and (max-height:920px) {
	#sceneList {
		height: 520px;
	}
}

@media screen and (max-height:875px) {
	#sceneList {
		height: 475px;
	}
}

@media screen and (max-height:830px) {
	#sceneList {
		height: 435px;
	}
}

@media screen and (max-height:790px) {
	#sceneList {
		height: 395px;
	}
}

@media screen and (max-height:750px) {
	#sceneList {
		height: 355px;
	}
}

@media screen and (max-height:710px) {
	#sceneList {
		height: 315px;
	}
}

@media screen and (max-height:670px) {
	#sceneList {
		height: 275px;
	}
	#share .control-inner {
		width: 300px;
		height: 300px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.social {
		position: absolute;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		position: absolute;
		background-color: RGBA(255, 0, 0, 0.8);
		opacity: 0.9;
		z-index: 9;
	}
	.fa-4x {
		font-size: 3em !important;
	}
	#facebook {
		top: 14px;
		left: 60px;
	}
	#google {
		top: 14px;
		right: 60px;
	}
	#linkedin {
		/*top: 180px;*/
		top: 150px;
		left: 3px;
	}
	#twitter {
		top: 150px;
		right: 3px;
	}
	#mail {
		bottom: 0px;
		left: 50%;
		transform: translatex(-50%);
	}
}

.social .icon {
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	position: absolute;
}

@media screen and (max-height:640px) {
	#sceneList {
		height: 235px;
	}
}

@media screen and (max-height:600px) {
	#sceneList {
		height: 235px;
	}
	#logo img {
		max-width: 100%;
		height: 140px;
		width: auto;
	}
	#logo {
		top: 10px !important;
		left: 90px !important;
	}
	#actions {
		top: 155px;
	}
	#actiondescription {
		top: 160px;
	}
	
	#sceneList {
			top: 180px;
			height: 300px;
	}

}


	@media screen and (max-height:400px) {
		#sceneList {
			height: 130px;
		}
	}
	
	
	@media screen and (min-height:400px) and (max-height:470px) {
		#sceneList {
			height: 230px;
		}
	}
	@media screen and (max-height:560px) {
		.gallery-cell {
			width: 70px !important;
			margin-left: 6px;
			margin-bottom: 6px;
		}
		#logo {
			top: 10px !important;
			left: auto !important;
			right: 15px !important;
		}
		#actions {
			top: 20px;
		}
		#actiondescription {
			top: 30px;
		}
		
			#sceneList {
			top: 80px;
		}
		
		.scene #img {
		width: 70px !important;
		height: 70px !important;
	}
	}
	@media screen and (max-height:560px) and (min-height:470px) {
		#sceneList {
			height: 305px;
		}
	}
}

.gallery-cell {
	width: 100px;
}

.scene #img {
	width: 100px;
}
#hitme2,
#hitme{
	width:200px;
	height:150px;
	margin-left:-150px;
	margin-top:-75px;
	position: relative;
	
}

#hitme2:hover,
#hitme:hover{
	cursor: crosshair;
}

#hitme2 img,
#hitme img{
	position: absolute;
    left: 0;
    bottom: 0;
}

.zoom-hotspot-icon-wrapper {
	cursor: pointer;
}

.zoom-hotspot-icon-wrapper .fa {
	color: #EE3824 !important;
}

.zoom-hotspot-icon-wrapper {
	transform: translate(-50%, -50%);
}

#reveal {
	width: 50px;
	height: 50px;
	background-color: #e41b13;
	border-radius: 50%;
	margin-left: 0;
	text-align: center;
	cursor: pointer;
	transition: height .3s ease-in-out, width .3s ease-in-out, border-radius
		.3s ease-in-out, margin .3s ease-in-out;
}

#reveal>img {
	width: 50px;
	margin: 15px 0;
}

.reveal-content {
	width: 630px;
	height: 150px;
	padding: 10px;
	opacity: 0;
	text-align: center;
	pointer-events: none;
	transition: opacity .01s ease-in-out;
}

.reveal-content img {
	width: 120px;
	opacity: 0;
	transition: width .01s ease-in-out, opacity .01s ease-in-out;
}

.reveal-content h2{
	margin-top:40px;
	color: #F9EC00;
}

.reveal-content p {
	margin: 10px 0;
	margin-top: -20px;
	color: #F9EC00;
	font-size: 24px;
	font-family: unitedregular;
	opacity: 0;
	transition: margin .01s ease-in-out, opacity .01s ease-in-out;
}



#reveal:hover {
	width: 630px;
	height: 300px;
	margin-left:-315px;
	border-radius: 5px;

}

#reveal:hover .reveal-content {
	opacity: 1;
	pointer-events: all;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	transition: opacity .3s ease-in-out .3s;
}

#reveal:hover .reveal-content img {
	width: 160px;
	opacity: 1;
	transition: width .3s ease-in-out .4s, opacity .3s ease-in-out .4s;
}

#reveal:hover .reveal-content p {
	margin-top: 10px;
	opacity: 1;
	transition: margin .3s ease-in-out .6s, opacity .3s ease-in-out .6s;
}