@font-face {
    font-family: oswald;
    src: url(../fonts/Oswald/Oswald-Regular.ttf);
}

@font-face {
    font-family: open-sans;
    src: url(../fonts/Open_sans/OpenSans-Regular.ttf);}

@font-face {
    font-family: open-sans;
    src: url(../fonts/Open_sans/OpenSans-Bold.ttf);
    font-weight:bold;
}

@keyframes spin {

    from {
    	transform:rotate(0deg);
    }
    to {
    	transform:rotate(360deg);
    }

}

@keyframes pulse {

	0% {
		transform: scale(1);
		opacity:1;
	}
	50% {
		transform: scale(1.5);
		opacity:0;
	}
	100% {
		transform: scale(1.5);
		opacity:0;
	}

}

*{

	padding:0;
	margin:0;

}

html{ 

	height:100%;
	width:100%;

}

body {

	height:100%;
	width:100%;
	overflow: hidden;
	font-family: open-sans;
	font-size:12px;
	line-height:17px;
	background-color: #f2f2f2;

}

@media only screen and (max-height: 520px) {

	.webgl-area{

		height:calc(100% - 50px);

	}

	.banner {

		height:50px;
		background-color:black;
		overflow: hidden;

	}

	.banner .icon {

		float:right;
		height:50px;
		vertical-align:top;

	}

	#canvas{

		width:100%;
		height:100%;
		-webkit-user-select: none;  
		-moz-user-select: none;    
		-ms-user-select: none;
		user-select: none; 
		background-image: radial-gradient(ellipse farthest-corner at 50% 50% , #ffffff 30%, #DDD 60%);

	}

	.canvas-overlay{

		width:0px;
		height:0px;
		overflow: hidden;

	}

	.nav-canvas.canvas-overlay{

		top:50px;
		position: absolute;
		width:100%;
		height:calc( 100% - 50px );
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color: white;
		pointer-events: initial;

	}

	.canvas-overlay.mobile-hide{

		display: none;
		width:0px;
		height:0px;
		overflow: hidden;

	}

	.intro-title{

		padding:10px;
		text-align: center;
		margin:auto;
		pointer-events: none;

	}

	.intro-modal-background{

		top:0;
		left:0;
		position: absolute;
		width:100%;
		height:100%;
		background: #f2f2f2;
		text-align: center;

	}

	.intro-modal-container{

		top:0;
		left:0;
		position: absolute;
		width:100%;
		height:100%;
		text-align: center;
		overflow: auto;
		-webkit-overflow-scrolling: touch;

	}

	.intro-modal{

		margin: auto;
		width:90%;
		position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);

	}

	.intro-contents{

		background-color: #fff;

	}

	.intro-contents img{

		width:100%;

	}

	.intro.item{

		vertical-align: top;
		height: 60px;
		cursor:pointer;
		cursor:hand;
		margin-top:20px;

	}

	.intro.item.btn.enter{ 
		line-height: 60px;
		width: calc(100% - 2px);
		color:white;
		background:#69b9e1;
		outline: none;
		text-align: center;
		vertical-align: middle;
		border:1px solid transparent;

	}

	.intro.item.display-none {

		display: none;

	}

	.intro.item{

		width: 32.2%;
		display: inline-block;

	}

	.title {

		line-height:20px;
		font-family: oswald;
		font-size: 16px;
		color:#69b9e1;

	}

	.intro-text{

		padding:10px;

	}

	.arrow-left {

		margin-right:-3px;
		vertical-align: middle;
		display: inline-block;
		width: 0; 
		height: 0; 
		border-top: 21px solid transparent;
		border-bottom: 21px solid transparent; 
		border-right:21px solid #a7aaab;

	}

	.nav.item .title {

		color:white;
		line-height: 40px;
		width: calc(100vw - 110px);
		height:42px;
		background-color: #a7aaab;
		text-align: center;
		vertical-align: middle;
		display: inline-block;

	}

	.nav.item.side {

		padding-top:20px;
		padding-left:20px;
		pointer-events: auto;
		width:auto;
		height:60px;
		overflow: hidden;

	}

	.nav.item.side svg {

		vertical-align: middle;
		display: inline-block;

	}

	.nav.item.side:hover{

		cursor:pointer;
		cursor:hand;

	}

	.nav.item.side.active:hover{

		cursor:auto;

	}

	.nav.item.side.active svg circle {

		stroke:#a7aaab;

	}

	.nav.item.side.active svg path {

		stroke:#a7aaab;

	}

	.nav.item.side.disabled svg circle {

		stroke:#a7aaab;

	}

	.nav.item.side.disabled svg path {

		stroke:#a7aaab;


	}

	.nav.item.side.help.disabled svg path {

		fill:#a7aaab;

	}

	.mob-ext-menu .nav.item {

		padding-top:5%;
		margin-left:10%;
		pointer-events: auto;
		width:80%;
		overflow: hidden;
		height:calc(33%);
		display: table;

	}

	.mob-ext-menu .nav.item .title {

		cursor:pointer;
		cursor:hand;
		display: table-cell;
		width: 100%;
		background-color: rgba(105,185,225,0.6);
		line-height: 100%;
		height:100%;

	}

}

@media only screen and (min-height: 521px) and (max-width: 600px) {

	#canvas{

		width:100%;
		height:100%;
		-webkit-user-select: none;  
		-moz-user-select: none;    
		-ms-user-select: none;
		user-select: none; 
		background-image: radial-gradient(ellipse farthest-corner at 50% 50% , #ffffff 30%, #DDD 60%);

	}

	.webgl-area{

		height:calc(50% - 25px);

	}

	.title {

		line-height:20px;
		font-family: oswald;
		font-size: 16px;
		color:#69b9e1;

	}

	.mob-ext-menu {

		height:calc(50% - 95px);
		padding-top: 50px;

	}

	.banner {

		height:50px;
		background-color:black;
		overflow: hidden;

	}

	.banner .icon {

		float:right;
		height:50px;
		vertical-align:top;

	}

	.canvas-overlay {

		position: absolute;
		overflow:hidden;
	    width: 100%;
	    height: calc( 50% - 25px );
	    top: 50px;
	    left: 0;
	    pointer-events: none;

	}

	.nav-canvas{

		width:100%;
		height:100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color: white;
		pointer-events: initial;

	}


	.intro-title{

		padding:10px;
		text-align: center;
		margin:auto;
		pointer-events: none;

	}

	.intro-modal-background{

		top:0;
		left:0;
		position: absolute;
		width:100%;
		height:100%;
		background: #f2f2f2;
		text-align: center;

	}

	.intro-modal-container{

		top:0;
		left:0;
		position: absolute;
		width:100%;
		height:100%;
		text-align: center;
		overflow: auto;

	}

	.intro-modal{

		margin: auto;
		width:90%;
		position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);

	}

	.intro-contents{

		background-color: #fff;

	}

	.intro-contents img{

		width:100%;

	}

	.modal-btn{

		overflow: hidden;
		height: 60px;
		line-height: 60px;
		background-color:white;
		cursor:pointer;
		cursor:hand;
		outline: none;
		text-align: center;
		vertical-align: middle;
		border:1px solid transparent;
		background:#69b9e1;
		color:white;

	}

	.modal-btn:hover{

		cursor:pointer;
		cursor:hand;
		border:1px solid white;

	}

	.modal-btn.half{

		width: calc( 50% - 2px );
		margin-right: -2px;
		display: inline-block;

	}

	.intro.item{

		vertical-align: top;
		height: 60px;
		cursor:pointer;
		cursor:hand;
		margin-top:20px;

	}

	.intro.item.btn.enter{ 
		line-height: 60px;
		width: calc(100% - 2px);
		color:white;
		background:#69b9e1;
		outline: none;
		text-align: center;
		vertical-align: middle;
		border:1px solid transparent;

	}

	.intro.item.display-none {

		display: none;

	}

	.intro.item{

		width: 32.2%;
		display: inline-block;

	}

	/*.intro.item.btn.nav svg{

		margin-top:-20px;

	}*/

	.intro.item.btn.enter:hover{

		cursor:pointer;
		cursor:hand;
		border:1px solid white;

	}

	.intro-text{

		padding:10px;

	}

	.fire-room-canvas{

		display: none;

	}

	.svg-canvas{

		pointer-events: none;
		display: none;
	    overflow: hidden;

	}

	.poi{

		pointer-events: auto;
		fill:black;
		position: absolute;
		width: 50px;
	    height: 50px;

	}

	.poi{

		cursor:pointer;
		cursor:hand;
		fill:#aaaaff;
		stroke:#111111

	}

	.poi.active {

		cursor:auto;

	}

	.poi.info.active g circle{

		stroke:#a7aaab;
		fill:#a7aaab;

	}

	.poi.info.active g path{

		stroke:#a7aaab;
		fill:#a7aaab;

	}

	.poi.location.text {

		display: none;

	}

	.poi-canvas .lid-poi{

		display: none;

	}

	.triangle.down {

		width: 0; 
		height: 0; 
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid rgba(105, 185, 225, 0.6);
		margin: auto;

	}

	.tour-area{

		font-size:35px;
		position: absolute;
		top: calc( 50% + 30px );
		width:100%;
		pointer-events: none;
		line-height: 35px;

	}

	.tour-text{

		text-align: center;
		margin:auto;
		pointer-events: none;

	}

	.tour-text.title p {

		padding:10px;
		display: inline-block;

	}

	.building-size-input{

		-webkit-touch-callout: none;
		-webkit-user-select: none; /* Webkit */
		-moz-user-select: none;    /* Firefox */
		-ms-user-select: none;     /* IE 10  */

		/* Currently not supported in Opera but will be soon */
		-o-user-select: none;
		user-select: none;  
		cursor:pointer;
		cursor:hand;
		pointer-events: auto;
		padding-left: 10%;
		padding-right: 10%;
		padding-top: 40px;
		padding-bottom: 20px;
		width:80%;
		height:20px;
		cursor:pointer;
		cursor:hand;

	}

	.building-size-input{

		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;  /* Chrome all / Safari all */
		-moz-user-select: none;     /* Firefox all */
		-ms-user-select: none;      /* IE 10+ */
		user-select: none;          /* Likely future */      

	}

	.base-slider{

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 20px 230px;
		border-left-width: 100%;
		border-color: transparent transparent #c6c7c6 transparent;

	}

	.highlight-slider{

		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 10px 115px;
		border-color: transparent transparent #69bae1 transparent;

	}

	.config-section{

		display: none;

	}

	.building-size-count{

		text-align: center;

		-webkit-touch-callout: none;
		-webkit-user-select: none; /* Webkit */
		-moz-user-select: none;    /* Firefox */
		-ms-user-select: none;     /* IE 10  */

		/* Currently not supported in Opera but will be soon */
		-o-user-select: none;
		user-select: none;  

	}

	.size-text{

		position: absolute;

	}

	.sapphire-count-container{

		width:80px;
		display: inline-block;

	}

	.container-count-text{

		font-size: 9px;
		color:white;
		text-align: center;
		vertical-align: middle;

	}

	.container-count-text.sapphire{

		padding: 23px 0px;
		border-color:#69b9e1;
		background-color: #69b9e1;

	}

	.container-count-text.bar25{

		padding: 31.5px 0px;
		border-color:#c5c7c6;
		background-color: #c5c7c6;

	}

	.container-count-actual{

		line-height: 70px;
		font-size: 45px;
		text-align: center;

	}

	.container-count-actual.old-count{

		border-color:#c5c7c6;
		color:#c5c7c6;

	}

	.container-count-actual.sapphire-count{

		border-color:#69b9e1;
		color:#69b9e1;
		
	}

	.container-count-text.sapphire.mob{

		padding: 0px;

	}

	.container-count-text.bar25.mob{

		padding: 0px;

	}

	.bar25-count-container{

		width:80px;
		display: inline-block;

	}

	.modal-container {

		width:100%;
		height:calc(50% - 25px);
		top:calc(50% + 25px);

	}

	.modal-view {

		display: none;
		width:100%;
	    height: 100%;
	    overflow:hidden;
	    pointer-events: auto;

	}

	.modal-view.fr {

		max-height: 100%;

	}

	.modal-content {

		overflow-x: hidden;
		position: relative;
		background: #f2f2f2;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		height:100%;

	}

	.has-modal-btn.modal-content {

		height: calc(100% - 62px);

	}

	.modal-content p{

		padding: 5px 10px;

	}

	.modal-content img{

		margin:auto;
		display: block;
		max-width:100%;
		padding-top:10px;
		padding-bottom:10px;

	}

	.count-wrapper {

		width:50%;
		display: inline-block;
		margin-right: -3px;

	}

	.sapphire.count-wrapper {

		background-color: #69b9e1;

	}

	.count-wrapper .sapphire-count.component{

		background-color: #f2f2f2;
		border: #69b9e1 solid 1px;
		border-width: 3px 3px 3px 0px;
		width: calc(50% - 3.5px);


	}

	.bar25.count-wrapper {

		background-color:#c5c7c6;

	}

	.count-wrapper .old-count.component{

		background-color: #f2f2f2;
		border: #c5c7c6 solid 1px;
		border-width: 3px 3px 3px 0px;
		width: calc(50% - 3.5px);

	}

	.count-wrapper .component{

		padding: 0px;
		width:calc(50% - 3px);
		display: inline-block;
		vertical-align: middle;

	}

	.bold {

		font-weight: bold;

	}

	.intro-video {

		cursor: pointer;
		cursor: hand;

	}

	.modal-close{

		display: none;

	}

	.top-bar {

		height:36px;
		display: block;
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		user-select: none;

	}

	.prev.order-btn{

		margin-left:calc(50% - 60px);

	}

	.modal-order {

		width:30px;
		text-align: center;
		line-height: 40px;
		padding-top:5px;
		vertical-align: top;
		display: inline-block;

	}

	.order-btn {

		color: #69b9e1;
	    font-size: 40px;
	    font-weight: bold;
		cursor:pointer;
		cursor:hand;
		line-height: 40px;
		padding-top:5px;
		vertical-align: top;
		display: inline-block;
		height:40px;
		width:40px;
		text-align: center;

	}

	.nav.item.side {

		padding-top:20px;
		padding-left:20px;
		pointer-events: auto;
		width:auto;
		height:60px;
		overflow: hidden;

	}


	.nav.item .title {

		color:white;
		line-height: 40px;
		width: calc(100vw - 110px);
		height:42px;
		background-color: #a7aaab;
		text-align: center;
		vertical-align: middle;
		display: inline-block;

	}

	.nav.item.side svg {

		vertical-align: middle;
		display: inline-block;

	}

	.nav.item.side:hover{

		cursor:pointer;
		cursor:hand;

	}

	.nav.item.side.active:hover{

		cursor:auto;

	}

	.nav.item.side.active svg circle {

		stroke:#a7aaab;

	}

	.nav.item.side.active svg path {

		stroke:#a7aaab;

	}

	.nav.item.side.disabled svg circle {

		stroke:#a7aaab;

	}

	.nav.item.side.disabled svg path {

		stroke:#a7aaab;


	}

	.nav.item.side.help.disabled svg path {

		fill:#a7aaab;

	}

	.mob-ext-menu .nav.item {

		padding-top:5%;
		margin-left:10%;
		pointer-events: auto;
		width:80%;
		overflow: hidden;
		height:calc(33%);
		display: table;

	}

	.mob-ext-menu .nav.item .title {

		cursor:pointer;
		cursor:hand;
		display: table-cell;
		width: 100%;
		background-color: rgba(105,185,225,0.6);
		line-height: 100%;
		height:100%;

	}

	.arrow-left {

		margin-right:-3px;
		vertical-align: middle;
		display: inline-block;
		width: 0; 
		height: 0; 
		border-top: 21px solid transparent;
		border-bottom: 21px solid transparent; 
		border-right:21px solid #a7aaab;

	}

	.intro.item.nav.loading{

		display: inline-block;

	}

	.nav-loading {

		padding-top: 20px;
	    padding-left: 20px;
	    pointer-events: auto;
	    width: 42px;
	    height: 42px;
	    overflow: hidden;

	}

	.loading svg {

		animation: spin 2s linear infinite;

	}

	.input-blocker{

		top:0;
		bottom:0;
		position: absolute;
		width:100%;
		height:100%;
		display: none;

	}

	.building-size-input.no-events{

		pointer-events: none;

	}

	.no-events {

		pointer-events: none;

	}

	.mobile-hide {

		display: none;

	}

	.poi.location.add{

		display: none;

	}

	.poi.location.remove{

		display: none;

	}

}

@media only screen and (min-height: 521px) and (min-width: 601px) {

	#canvas{

		width:100%;
		height:100%;
		-webkit-user-select: none;  
		-moz-user-select: none;    
		-ms-user-select: none;
		user-select: none; 
		background-image: radial-gradient(ellipse farthest-corner at 50% 50% , #ffffff 30%, #DDD 60%);

	}

	.webgl-area{

		height:calc(100% - 86px);
		width:100%;

	}

	.icon.menu{

		width:0px;
		height:0px;

	}

	.title {

		line-height:30px;
		font-family: oswald;
		font-size: 23px;
		color:#69b9e1;

	}

	.banner {

		height:86px;
		background-color:black;
		overflow: hidden;

	}

	.banner .icon {

		float:right;
		height:84px;
		vertical-align:top;

	}

	.canvas-overlay {

		position: absolute;
		overflow:hidden;
		width: 100%;
		height: calc(100% - 86px );
		top: 86px;
		left: 0;
		pointer-events: none;

	}

	.intro-title{

		padding:10px;
		text-align: center;
		margin:auto;
		pointer-events: none;

	}

	.intro-modal-background{

		top:0;
		left:0;
		position: absolute;
		width:100%;
		height:100%;
		background: #f2f2f2;
		text-align: center;

	}

	.intro-modal-container{

		top:0;
		left:0;
		position: absolute;
		width:100%;
		height:100%;
		text-align: center;

	}

	.intro-modal{

		margin: auto;
		width:400px;
		position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);

	}

	.intro-contents{

		background-color: #fff;

	}

	.intro-contents img{

		width:100%;

	}

	.modal-btn{

		overflow: hidden;
		height: 60px;
		line-height: 60px;
		background-color:white;
		cursor:pointer;
		cursor:hand;
		margin-top:20px;
		outline: none;
		text-align: center;
		vertical-align: middle;
		border:1px solid transparent;
		background:#69b9e1;
		color:white;

	}

	.modal-btn:hover{

		cursor:pointer;
		cursor:hand;
		border:1px solid white;

	}

	.intro.item{

		vertical-align: top;
		height: 60px;
		cursor:pointer;
		cursor:hand;
		margin-top:20px;

	}

	.intro.item.btn.enter{

		line-height: 60px;
		width: calc(100% - 2px);
		color:white;
		background:#69b9e1;
		outline: none;
		text-align: center;
		vertical-align: middle;
		border:1px solid transparent;

	}

	.intro.item.display-none {

		display: none;

	}

	.intro.item{

		width: 32.2%;
		display: inline-block;

	}

	/*.intro.item.btn.nav svg{

		margin-top:-20px;

	}*/

	.intro.item.btn.enter:hover{

		cursor:pointer;
		cursor:hand;
		border:1px solid white;

	}

	.intro-text{

		padding:10px;

	}

	.fire-room-canvas{

		display: none;

	}

	.svg-canvas{

		position: absolute;
		pointer-events: none;
		display: none;
	    overflow: hidden;

	}

	.poi{

		pointer-events: auto;
		fill:black;
		position: absolute;
		width: 50px;
	    height: 50px;

	}

	.poi{

		cursor:pointer;
		cursor:hand;
		fill:#aaaaff;
		stroke:#111111

	}

	.poi.active {

		cursor:auto;

	}

	.poi.info.active g circle{

		stroke:#a7aaab;
		fill:#a7aaab;

	}

	.poi.info.active g path{

		stroke:#a7aaab;
		fill:#a7aaab;

	}

	.poi.location.text {

		pointer-events: none;
		padding-bottom:130px;

		width:auto;
		user-select: none;
		color:#69b9e1;
/*		color:rgba(105,185,225,0.6);*/
/*		-webkit-text-stroke: 1.5px #69b9e1;*/
/*		text-shadow: 2px 2px #2b485c;*/

	}

	.poi.location.text p {

		background-color: rgba(105, 185, 225, 0.6);
    	padding: 10px;
    	line-height: 30px;
	    font-family: oswald;
	    font-size: 23px;
	    color: white;
	    /*border: 2px solid rgb(105, 185, 225);*/

	}

	.triangle.down {

		width: 0; 
		height: 0; 
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid rgba(105, 185, 225, 0.6);
		margin: auto;

	}

	.tour-area{

		font-size:35px;
		position: absolute;
		bottom:60px;
		width:100%;
		pointer-events: none;
		line-height: 35px;

	}

	.tour-text{

		text-align: center;
		margin:auto;
		pointer-events: none;

	}

	.tour-text.title p {

		padding:10px;
		color: white;
		display: inline-block;
		background: rgba(105, 185, 225, 0.6);

	}

	.building-size-input{

		-webkit-touch-callout: none;
		-webkit-user-select: none; /* Webkit */
		-moz-user-select: none;    /* Firefox */
		-ms-user-select: none;     /* IE 10  */

		/* Currently not supported in Opera but will be soon */
		-o-user-select: none;
		user-select: none;  
		cursor:pointer;
		cursor:hand;
		pointer-events: auto;
		padding-left: 10%;
		padding-right: 10%;
		padding-top: 40px;
		padding-bottom: 20px;
		width:80%;
		height:20px;
		cursor:pointer;
		cursor:hand;

	}

	.base-slider{

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 20px 230px;
		border-color: transparent transparent #c6c7c6 transparent;

	}

	.highlight-slider{

		top:40px;
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 10px 115px;
		border-color: transparent transparent #69bae1 transparent;

	}

	.config-section{

		bottom: 10px;
		position: absolute;
		right: 10px;
		width: 300px;

	}

	.config-section .component {

		height: auto;
		width: 21%;
	    display: inline-block;
	    margin: -1.6px;
		display: inline-block;
		border: 3px solid black;
		vertical-align: top;
		padding:5px;

	}

	.building-size-count{

		text-align: center;

		-webkit-touch-callout: none;
		-webkit-user-select: none; /* Webkit */
		-moz-user-select: none;    /* Firefox */
		-ms-user-select: none;     /* IE 10  */

		/* Currently not supported in Opera but will be soon */
		-o-user-select: none;
		user-select: none;  

	}

	.size-text{

		position: absolute;

	}

	.sapphire-count-container{

		width:80px;
		display: inline-block;

	}

	.container-count-text{

		font-size: 9px;
		color:white;
		text-align: center;
		vertical-align: middle;

	}

	.container-count-text.sapphire{

		padding: 23px 0px;
		border-color:#69b9e1;
		background-color: #69b9e1;

	}

	.container-count-text.bar25{

		padding: 31.5px 0px;
		border-color:#c5c7c6;
		background-color: #c5c7c6;

	}

	.container-count-actual{

		line-height: 70px;
		font-size: 45px;
		text-align: center;

	}

	.container-count-actual.old-count{

		border-color:#c5c7c6;
		color:#c5c7c6;

	}

	.container-count-actual.sapphire-count{

		border-color:#69b9e1;
		color:#69b9e1;
		
	}

	.bar25-count-container{

		width:80px;
		display: inline-block;

	}

	.modal-view {

		display: none;
		max-width: 300px;
	    height: calc(100% - 210px);
	    float: right;
	    margin: 20px;
	    overflow-y:hidden;
	    pointer-events: auto;

	}

	.modal-view.fr {

		height: 100%;

	}

	.modal-content {

		overflow-x: hidden;
		position: relative;
		background: #f2f2f2;
		overflow-y: auto;
		max-height: calc(100% - 132px);

	}

	.modal-view.fr .modal-content {

		max-height: calc(100% - 40px);

	}

	.modal-content p{

		padding: 5px 10px;

	}

	.modal-content p.title{

		padding-top:251px;

	}

	.modal-content img{

		position: absolute;
		top:50px;
		margin:auto;
		display: block;
		max-width:100%;
		max-height: vh;

	}

	.bold {

		font-weight: bold;

	}

	.intro-video {

		cursor: pointer;
		cursor: hand;
		position: absolute;
		top: 70px;

	}

	.modal-close{

		float:right;
		padding:5px;
	    cursor:pointer;
	    cursor:hand;

	}

	.top-bar {

		height:36px;
		display: block;
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		user-select: none;

	}

	.prev.order-btn{

		margin-left:calc(50% - 60px);

	}

	.modal-order {

		width:30px;
		text-align: center;
		line-height: 26px;
		padding-top:5px;
		vertical-align: top;
		display: inline-block;

	}

	.order-btn {

		font-size: 20px;
		cursor:pointer;
		cursor:hand;
		line-height: 26px;
		padding-top:5px;
		vertical-align: top;
		display: inline-block;
		height:26px;
		width:26px;
		text-align: center;

	}

	.nav.item.side {

		padding-top:20px;
		padding-left:20px;
		pointer-events: auto;
		width:42px;
		height:42px;
		overflow: hidden;

	}

	.nav.item.side.bottom {

		position: absolute;
    	bottom: 15px;

	}


	.nav.item.side .title {

		color:white;
		line-height: 40px;
		width:250px;
		height:42px;
		background-color: #a7aaab;
		text-align: center;
		vertical-align: middle;
		display: inline-block;

	}

	.nav.item.side svg {

		vertical-align: middle;
		display: inline-block;

	}

	.nav.item.side:hover{

		width:auto;
		cursor:pointer;
		cursor:hand;

	}

	.nav.item.side.active:hover{

		cursor:auto;

	}

	.nav.item.side.alt svg circle {

		stroke:#ffffff;

	}

	.nav.item.side.alt svg path {

		stroke:#ffffff;

	}

	.nav.item.side.help.alt svg path {

		fill:#ffffff;

	}

	.nav.item.side.active svg circle {

		stroke:#a7aaab;

	}

	.nav.item.side.active svg path {

		stroke:#a7aaab;

	}

	.nav.item.side.disabled svg circle {

		stroke:#a7aaab;

	}

	.nav.item.side.disabled svg path {

		stroke:#a7aaab;


	}

	.nav.item.side.help.disabled svg path {

		fill:#a7aaab;

	}

	.arrow-left {

		margin-right:-3px;
		vertical-align: middle;
		display: inline-block;
		width: 0; 
		height: 0; 
		border-top: 21px solid transparent;
		border-bottom: 21px solid transparent; 
		border-right:21px solid #a7aaab;

	}

	.intro.item.nav.loading{

		display: inline-block;

	}

	.nav-loading {

		padding-top: 20px;
	    padding-left: 20px;
	    pointer-events: auto;
	    width: 42px;
	    height: 42px;
	    overflow: hidden;

	}

	.loading svg {

		animation: spin 2s linear infinite;

	}

	.input-blocker{

		top:0;
		bottom:0;
		position: absolute;
		width:100%;
		height:100%;
		display: none;

	}

	.building-size-input.no-events{

		pointer-events: none;

	}

	.no-events {

		pointer-events: none;

	}

}

.initial.loading {

	position: absolute;
	width: 0;
	height: 0;
	left: calc(50% - 12px);
	top: calc(50% - 12px);

}

.no-overflow-scrolling{

	-webkit-overflow-scrolling:auto;

}

.banner .icon:hover {

	cursor:pointer;
	cursor:hand;

}

.banner .logo {

	float:left;
	margin-left: 30px;

}

.banner .seperator {

	float:right;
	display: inline-block;
	width:1px;
	height:100%;
	background-color: #201e1c;

}

.pulse {

	transform-origin: center;
	animation: pulse 2s infinite;

}

/*
	Hopscotch restyling
*/

div.hopscotch-bubble{

	border:none;

}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border{

	border:none;

}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border{

	border:none;

}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border{

	border:none;

}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {

	border:none;

}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow{

	top: -5px;
    left: -10px;

}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {

	left: 5px;
	top: -10px;

}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow{

	left: -5px;
	top: -10px;

}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {

	top: 5px;

}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.up {

	left:0px;

}

div.hopscotch-bubble h3 {

	line-height:30px;
	font-family: oswald;
	font-size: 23px;
	color:#69b9e1;

}

div.hopscotch-bubble .hopscotch-content{

	overflow: hidden;
	font-family: open-sans;
	font-size:12px;
	line-height:17px;

}

div.hopscotch-bubble .hopscotch-nav-button.next {

	font-size:17px;
	font-family: oswald;
	height: 35px;
	cursor: pointer;
	cursor: hand;
	outline: none;
	text-align: center;
	vertical-align: middle;
	border: 1px solid transparent;
	background: #69b9e1;
	color: white;
	text-shadow: none;

}

div.hopscotch-bubble .hopscotch-nav-button.next:hover{

	cursor:pointer;
	cursor:hand;
	border:1px solid white;
	background: #69b9e1;
	box-shadow: none;

}