@font-face{font-family:centrale_sans;font-style:normal;font-weight:100;font-display:swap;src:url("fonts/e1da08b2fd17405f5dc7344a1c6c6c4d.woff2") format("woff2"),url("fonts/a8adf97e4c9d6d7683a1d3ee97689c58.woff") format("woff")}
@font-face{font-family:centrale_sans;font-style:normal;font-weight:300;font-display:swap;src:url("fonts/1899c4cd5c6009d130a2488d2567eec5.woff2") format("woff2"),url("fonts/a67b066467323a7a6b9fc0b06476edf8.woff") format("woff")}
@font-face{font-family:centrale_sans;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/1ae70358e14e05c50950a65b9f8dab75.woff2") format("woff2"),url("fonts/9d173bc26048bc7d2f543a2db3135425.woff") format("woff")}
@font-face{font-family:centrale_sans;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/2f56e0a12f49fafc9091f37b7ac4330c.woff2") format("woff2"),url("fonts/23927660236fc4b6e837f8199339fa20.woff") format("woff")}
@font-face{font-family:centrale_sans;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/18eaadf63f1c8bcdd7b4225274ced4a5.woff2") format("woff2"),url("fonts/b528ffef4ed8f606662e260cd92b813d.woff") format("woff")}
@font-face{font-family:centrale_sans;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/0c7658f73f4bf3704f3065c48971bc65.woff2") format("woff2"),url("fonts/da154671bd103d51954378c06bb9cc60.woff") format("woff")}
@font-face{font-family:centrale_sans_cyr;font-style:normal;font-weight:100;font-display:swap;src:url("fonts/5b22ab9502815f075cd2bf8e98442ca9.woff2") format("woff2"),url("fonts/53b2efdbd94f9e54b560cb77b096db5d.woff") format("woff")}
@font-face{font-family:centrale_sans_cyr;font-style:normal;font-weight:300;font-display:swap;src:url("fonts/c4b335aca9b5fad6d4945a987b1c3f31.woff2") format("woff2"),url("fonts/dea2b53e43e10f88d8431799b9b98fb5.woff") format("woff")}
@font-face{font-family:centrale_sans_cyr;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/2e7d0791a9a32be9a98c25cb6a2df8ef.woff2") format("woff2"),url("fonts/cbf75e79afb2e3240b2b2a3661d2acd9.woff") format("woff")}
@font-face{font-family:centrale_sans_cyr;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/97e74610c30bbf1a2d46edc8ec085403.woff2") format("woff2"),url("fonts/9d7f103830567f3a303b284219eae771.woff") format("woff")}
@font-face{font-family:centrale_sans_cyr;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/c2ce0c0314c039a40f539267b4b5a70e.woff2") format("woff2"),url("fonts/26cb2993670ec9da5251494dbf0a1a89.woff") format("woff")}
@font-face{font-family:centrale_sans_cyr;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/b113e03eb6527bc715371c9ec6ac25e0.woff2") format("woff2"),url("fonts/e648514faebdebbe92f1deb552c1fb9c.woff") format("woff")}


body {
	font-family: centrale_sans,sans-serif;
	background-color: #E0E6F8;
	color: #fff;
	margin: 0px;
	overflow: hidden;
}

#oss-canvas-wrapper { 
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	
}

#oss-canvas { 
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
}

/*
* === debug  ===
*/
#oss-canvas .debug-print {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: 1000;
	pointer-events: none;
	
}


/*
* === preload logo and loader  ===
*/
#oss-canvas .logo {
	width: 100px;
	height: 50px;
	
	background-image: Url(../textures/ui/HueLogo@0,75x.png);
	background-repeat: no-repeat;
    background-size: 100px 50px;
	position: absolute;
	right: 15px;
	top: 0; 
	display: none;
	
}

#oss-canvas .preload{
	width: inherit;
    height: inherit;
	background: #333;
	position: absolute;
	display: block;
	z-index: 1000;

}

#oss-canvas .preload .logo {
	width: 200px;
	height: 100px;
	
	font-size: 50px;
	text-shadow: -1px 2px 2px #000;
	text-align: center;
	color: azure;
	background-image: Url(../textures/ui/HueLogo@0,75x.png);
	background-repeat: no-repeat;
    background-size: 200px 100px;
	position: absolute;
	left: 50%;
	top: 50%; 
	margin-left: -100px;
	margin-top: -100px;
	display:block;
}

.display_none{
	display: none !important;
}

/*
* === click to play  ===
*/

#oss-canvas .clickToPlay{
	width: inherit;
    height: inherit;
	background: transparent;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: 300;

}

#oss-canvas .clickToPlay span {
    margin: 0;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
	transform: translate(-50%, -50%) ;
	color: #ffffff; 
	font-family: 'Raleway',sans-serif; 
	font-size: 24px; 
	font-weight: 800; line-height: 36px;
	min-width: 128px;
	min-height: 128px;
}

#oss-canvas .clickToPlay span i {
    display: block;
	animation: circleScale 3s infinite;
    background-image: url('../textures/ui/tap_hand.png');
    background-repeat: no-repeat;
    position: relative;
	min-width: 128px;
	min-height: 128px;
}

/*
* === swipe tut  ===
*/

#oss-canvas .swipe-tut{
	width: inherit;
    height: inherit;
	background: transparent;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: 300;
	pointer-events: none;

}

#oss-canvas .swipe-tut span {
    margin: 0;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
	transform: translate(-50%, -50%) ;
	color: #ffffff; 
	font-family: 'Raleway',sans-serif; 
	font-size: 24px; 
	font-weight: 800; line-height: 36px;
	min-width: 128px;
	min-height: 128px;
}

#oss-canvas .swipe-tut span i {
    display: block;
	animation: circleScale 3s infinite;
    background-image: url('../textures/ui/swipe_hand.png');
    background-repeat: no-repeat;
    position: relative;
	min-width: 128px;
	min-height: 128px;
}



@keyframes circleScale {
	0% {transform: scale(1.0)  }
	80% { transform: scale(1.0) }
  	90% { transform: scale(0.9) }
  	100% { transform: scale(1.0) }
}

@-moz-keyframes circleScale {
	0% {transform: scale(1.0)  }
	80% { transform: scale(1.0) }
  	90% { transform: scale(0.9) }
  	100% { transform: scale(1.0) }
}
@-webkit-keyframes circleScale {
	0% {transform: scale(1.0)  }
	80% { transform: scale(1.0) }
  	90% { transform: scale(0.9) }
  	100% { transform: scale(1.0) }
}
@-ms-keyframes circleScale {
	0% {transform: scale(1.0)  }
	80% { transform: scale(1.0) }
  	90% { transform: scale(0.9) }
  	100% { transform: scale(1.0) }
}
@-keyframes circleScale {
	0% {transform: scale(1.0)  }
	80% { transform: scale(1.0) }
  	90% { transform: scale(0.9) }
  	100% { transform: scale(1.0) }
}


/*
* === keyframes fade in and out  ===
*/

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

@keyframes anticlockwisespin {
	from {transform: rotate(0deg);}
	to {transform: rotate(-360deg);}
}

@-moz-keyframes fadeout {
	from {opacity: 1; visibility: visible;}
	to {opacity: 0; visibility: hidden;}
}
@-webkit-keyframes fadeout {
	from {opacity: 1; visibility: visible;}
	to {opacity: 0; visibility: hidden;}
}
@-ms-keyframes fadeout {
	from {opacity: 1; visibility: visible;}
	to {opacity: 0; visibility: hidden;}
}
@-keyframes fadeout {
	from {opacity: 1; visibility: visible;}
	to {opacity: 0; visibility: hidden;}
}
@keyframes fadeout {
	from {opacity: 1; visibility: visible;}
	to {opacity: 0; visibility: hidden;}
}



@-moz-keyframes fadein {
	from {opacity: 0; visibility: hidden;}
	to {opacity: 1; visibility: visible;}
}
@-webkit-keyframes fadein {
	from {opacity: 0; visibility: hidden;}
	to {opacity: 1; visibility: visible;}
}
@-ms-keyframes fadein {
	from {opacity: 0; visibility: hidden;}
	to {opacity: 1; visibility: visible;}
}

@-keyframes fadein {
	from {opacity: 0; visibility: hidden;}
	to {opacity: 1; visibility: visible;}
}
@keyframes fadein {
	from {opacity: 0; visibility: hidden;}
	to {opacity: 1; visibility: visible;}
}



/*
* === control bar  ===
*/
.ui-controlbar {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.0);
	position: fixed;
	bottom: 0px;
	width: 100%;
	z-index: 200;
	pointer-events: none;
  
}

.ui-controlbar li {
	float: right;
	padding: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

.ui-controlbar li:first-child { 
	 padding-right: 15px; 
}

.ui-controlbar li a {
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	width:18px;
	height:18px;
	background-color: rgba(0, 0, 0, 0);
	pointer-events: all;
}

.ui-controlbar li .btn-rooms{
	width: auto !important;
	
}

.ui-controlbar li a i {
	width: 18px;
	height: 18px;
	display: block;
	float: left;
}

.ui-controlbar li a span {
	float: right;
	height: 18px;
	display: block;
	vertical-align:middle; 
	 line-height: 18px;
	 padding-left: 10px;
	 padding-right: 10px;
}


.ui-controlbar li a .arrow-up {
	width: 18px;
	height: 18px;
	display: block;
	float: right;
}

.ui-controlbar li .divider {
	width:2px;
	background-color: rgb(255, 255, 255);
	pointer-events: none !important;
}

.ui-controlbar li a:hover:not(.no-scale) {
	transform: scale(1.1) ;
 }

 .icon-chevron{
	background-image: Url(../textures/ui/menu/chevron.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-volume-up{
	background-image: Url(../textures/ui/menu/volume-up.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-volume-off{
	background-image: Url(../textures/ui/menu/volume-off.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-open-door{
	background-image: Url(../textures/ui/menu/open-door.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-compress{
	background-image: Url(../textures/ui/menu/compress.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-expand{
	background-image: Url(../textures/ui/menu/expand.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-living{
	background-image: Url(../textures/ui/menu/living.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-outdoor{
	background-image: Url(../textures/ui/menu/outdoor.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-carport{
	background-image: Url(../textures/ui/menu/carport.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-gaming{
	background-image: Url(../textures/ui/menu/gaming.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.dropup {
	position: absolute;
	display: block;
	right: 0px;
	height: 30px;
	width: 220px;
	bottom: 0px;
	pointer-events: none;
}

.dropup-content {
	display: none;
	position: absolute;
	background: rgba(0, 0, 0, 0.4);
	min-width: 220px;
	bottom: 45px;
	z-index: 200;
	pointer-events:all;
	border: 1px solid rgba(0, 0, 0, 0.5);
}

.dropup-content a {
	
	color: rgb(255, 255, 255);
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	font-weight: 600;
	font-size: 14px;
}

.dropup-content a i  {
	float: left;
	display: block;
	height: 30px;
	width: 30px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-top: -5px;
	margin-right: 15px;
}

.dropup-content .ui-disabled  {
	opacity: 0.5 !important;
	pointer-events:none;
}

.dropup-content a:hover {background: rgba(0, 0, 0, 0.6);}


/*
* === progress bar  ===
*/
#oss-canvas .progress-bar {
    background: #272727;
    border-radius: 13px;
    height: 6px;
    width: 200px;
	padding: 3px;
	z-index: 300;

	left: 50%;
	top: 50%; 
	margin-left: -100px;
	margin-top: 0px;
	position: absolute;
	
}

#oss-canvas .progress-bar span {
    content: '';
    display: block;
    background: #eee;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}


/* sidenav */
.sidenav {
	height: 100%;
	width: 100%;
	max-width: 380px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: -380px;
	background: rgba(36,36,36,.4);
	z-index: 2003;
	overflow: hidden;
	transition: 0.5s;
}

.sidenav-content{
	position:absolute;
	padding: 2em;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	overflow:hidden;
	-webkit-overflow-scrolling:touch;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.sidenav-content-image{
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	height: 0;
	padding-top: 100%;/* (img-height / img-width * width) */ /* (853 / 1280 * 100) */
	position: relative;
	display: block;
}

.top-fade{
 	height:12em; 
	background:linear-gradient(180deg,rgba(36,36,36,.9) 40%,rgba(36,36,36,0));
	position: absolute;
	z-index: 0;
	width: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	margin: 0;
	padding: 0;
}

.sidenav .button {
	background-color: #f46d26; 
	border: none;
	color: white;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 50px;
	font-size: 13.3333px;
}

.sidenav ul {
	list-style-type: none;
	text-align: center;
	margin: 0;
	padding: 2em;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	padding-top: 12em;
}

.sidenav ul  h1 {
	font-family: 'centrale_sans',sans-serif;
	font-weight: 900;
	color: white;
	font-size: 2rem;
	letter-spacing: 0.03em;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-bottom: 10px;
	line-height: 1;
}

.sidenav ul h2 {
	font-family: 'centrale_sans',sans-serif;
	color: white;
	font-size: 1rem;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-bottom: 30px;
	font-weight:400;
	line-height: 1;
}

.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 1rem;
	color: #818181;
	display: block;
	transition: 0.3s;
	z-index: 100;
}

.sidenav a:hover {
	color: #f1f1f1;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}


.media-screen-max-width-450 .sidenav ul h1 {
	font-size: 2rem;
}
.media-screen-max-width-380 .sidenav ul h1 {
	font-size: 1.8rem;
}
.media-screen-max-width-320 .sidenav ul h1 {
	font-size: 1.4rem;
}
.media-screen-max-width-280 .sidenav ul h1 {
	font-size: 1rem;
}
.media-screen-max-width-240 .sidenav ul h1 {
	font-size: 0.8rem;
}


.media-screen-max-width-450 .sidenav ul h2 {
	font-size: 0.8rem;
	padding-bottom: 25px;
}
.media-screen-max-width-380 .sidenav ul h2 {
	font-size: 0.8rem;
	padding-bottom: 20px;
}
.media-screen-max-width-320 .sidenav ul h2 {
	font-size: 0.7rem;
	padding-bottom: 15px;
}
.media-screen-max-width-280 .sidenav ul h2 {
	font-size: 0.5rem;
	padding-bottom: 10px;
}
.media-screen-max-width-240 .sidenav ul h2 {
	font-size: 0.4rem;
	padding-bottom: 5px;
}


.media-screen-max-width-450 .sidenav ul a {
	font-size: 0.8rem;
}
.media-screen-max-width-380 .sidenav ul a {
	font-size: 0.8rem;
}
.media-screen-max-width-320 .sidenav ul a {
	font-size: 0.7rem;
}
.media-screen-max-width-280 .sidenav ul a {
	font-size: 0.5rem;
}
.media-screen-max-width-240 .sidenav ul a {
	font-size: 0.4rem;
}