body{
	width: 100% !important;
	height: 100% !important;
	-webkit-transform: inherit !important;
	-webkit-font-smoothing: antialiased;
}

/* HEADER */
.pane, .view {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%!important;
	background-color: #fff;
	overflow: hidden;
}

.pane .has-header {
	position: absolute !important;
  top: 0px  !important;
  padding-top: 75px  !important;
}

.bar{
	height: 65px !important;
}

.bar.bar-dark{
	background: rgba(170,170,170,.5);
	height: 65px;
	background-image: url(../images/header-brand.png);
	background-repeat: no-repeat;
	background-position: center center;
}

.bar .logo{
	background: transparent;
	text-align: left;
	text-indent: -9999em;
}

.bar .logo img{
	display: block;
	position: relative;
	top: -5px;
}

.bar .logo a{
	background: transparent;
}
.bar .title + .buttons {
	top: 12px;
	right: 12px;
}
.bar .title{
	display: none;
}

/* CONTENT */
.pane {
	overflow:visible;
}

.scroll-content{
	background: #8aa7b3; /* Old browsers */
	background: -moz-linear-gradient(top, #8aa7b3 0%, #527d8f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8aa7b3), color-stop(100%,#527d8f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #8aa7b3 0%,#527d8f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #8aa7b3 0%,#527d8f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #8aa7b3 0%,#527d8f 100%); /* IE10+ */
	background: linear-gradient(to bottom, #8aa7b3 0%,#527d8f 100%); /* W3C */
	padding-left: 40px;
	padding-right: 40px;
}

.scroll-content h1{
	font-size: 22px;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	margin: 20px 0 10px;
}

/* HOME */
.page-home > .scroll-content{
	background: url(../images/home-bg.jpg) no-repeat center top fixed;
	background-size: cover;
}

.page-home .icons li{
	box-sizing: border-box;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 20px;
	margin: 3%;
	width: 130px;
	vertical-align: top;
}

.page-home .icons li a{
	color: #fff;
	text-decoration: none;
	display: block;
}

.page-home .icons li img{
	display: block;
	margin: 0 auto 20px;
}

/* OVERVIEW VIDEO */
.page-overview-video > .scroll-content{
	background: #d5d9d9;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* FIRE ALARM */
.fire-alarm-main > .scroll-content{
	background: url(../images/classroom-bg-inactive.jpg) no-repeat center top fixed;
	background-size: cover;
	opacity: 1;
}

.fire-alarm-main .rightPullStation{
	width: 30%;
	float: right;
	position: relative;
	height: 700px;
}

img.smallAlarm {
	position: absolute;
	top: 40%;
	width: 25%;
	left: -37px;
}

img.pullStation {
	position: absolute;
	top: 60%;
	width: 8%;
	left: 16px;
}

.fire-alarm-main img.image {
	width: 66%;
}

/* TROUBLE */
.trouble-main .scroll-content{
	background: url(../images/shopping-mall-bg.jpg) no-repeat	center top fixed;
	background-size: cover;
	opacity: 1;
}
.trouble-main #smoke-detector-base{
	position: absolute;
	background: url(../images/detector-base@2x.png) no-repeat center top;
	background-size: 70%;
	width: 100px;
	height: 40px;
	left: 50%;
	top: -14px;
	transition: 1s -webkit-transform ease-in-out;
	transform: translate3d(0,0,0);
}
.trouble-main #smoke-detector{
	position: absolute;
	background: url(../images/detector@2x.png) no-repeat	 center top;
	background-size: 50%;
	width: 100px;
	height: 40px;
	left: 50%;
	transition: 1s -webkit-transform ease-in-out;
	transform: translate3d(0,0,0);
}


.trouble-main img.image {
	width: 100%;
}

#smoke-detector.animate{

		-webkit-animation-name: wiggle;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
	-webkit-animation-duration: 5s;
}

#smoke-detector.backwords{

			-webkit-animation-name: wiggleBack;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
	-webkit-animation-duration: 5s;
}

@-webkit-keyframes wiggle{
	from{transform: translate3d(0,0px,0);
		-webkit-transform: translate3d(0,0px,0);}
	to{transform: translate3d(0,300px,0);
	-webkit-transform: translate3d(0,300px,0);}
}

@-webkit-keyframes wiggleBack{
	from{transform: translate3d(0,300px,0);
		-webkite-transform: translate3d(0,300px,0);}
	to{transform: translate3d(5px,0px,0);
	-webkite-transform: translate3d(5px,0px,0);}
}

/* AUTO CONFIGURE */
.auto-configure-main .scroll-content{
	background: url(../images/staircase-bg.jpg) no-repeat center top fixed;
	background-size: cover;
	opacity: 1;
}

.auto-configure-floorplan .scroll-content{
	background: #EBEBEB url(../images/floorplangradient.jpg) repeat-x center top;
	background-size: 100% 100%;
	opacity: 1;
}

.floorplanImg {
	width: 1303px;
	height: auto;
	max-width: 1303px;
	display: block;
	z-index: -1;
	text-align: center;
	position: relative;
	top: -121px;
}

.floorplanRelative{
	position: relative;
	display: block;
	width: 1382px;
	left: 230px;
}

.floorplanLeftCol, .floorplanRightCol{
	position: absolute;
}

.card{
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgyODI4MSIgc3RvcC1vcGFjaXR5PSIwLjgzIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNTEzMTMiIHN0b3Atb3BhY2l0eT0iMC45MSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,	rgba(130,130,129,0.83) 0%, rgba(21,19,19,0.91) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,130,129,0.83)), color-stop(100%,rgba(21,19,19,0.91))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,	 rgba(130,130,129,0.83) 0%,rgba(21,19,19,0.91) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,	rgba(130,130,129,0.83) 0%,rgba(21,19,19,0.91) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,	 rgba(130,130,129,0.83) 0%,rgba(21,19,19,0.91) 100%); /* IE10+ */
	background: linear-gradient(to bottom,	 rgba(130,130,129,0.83) 0%,rgba(21,19,19,0.91) 100%); /* W3C */

	position: absolute;
	overflow: visible;
}

.card{
	width: 250px;
	padding: 20px;
	color: #fff;
	z-index: 999;
}

.card.cardWide{
	width: 250px;
}
.cardWide p{
	width:100%;
	float: left;

}
.cardWide img{
	float: right;
}
.clear{
	clear: both;
	float: none;
	display: block;
}
.card.cardTop{}
.card.cardRight{}
.card.cardBottom{}

.card .image{

}

.card .image.highlight{
	box-shadow: 1px 0 25px rgba(255, 255, 255, 1);
}

li#btn-configure.highlight img{
	box-shadow: 1px 0 25px rgba(255, 255, 255, 1);
}


ul.navigation.buttons {
	position: relative;
	top: 32px;
	z-index: 999;
	left: -19px;
	height: 0px;
	z-index: 2;
}
ul.navigation.buttons li#btn-previous{
	background: rgba( 0, 0, 0, 0.7)	url(../images/arrow-left.png) no-repeat center center;
	margin-right: 5px;
}

ul.navigation.buttons li#btn-next{
	background: rgba( 0, 0, 0, 0.7)	url(../images/arrow-right.png) no-repeat center center;
	margin-right: 5px;
}
ul.navigation.buttons li#btn-next.highlight{
	background-color: rgba(153,234,25,1);
	box-shadow: inset -2px 2px 2px rgba(255,255,255, .25), inset 2px -2px 2px rgba(0,0,0, .25), 0 0 20px rgba(153, 234, 25, 0.75);
}
ul.navigation.buttons li#btn-speaker{
	background: rgba( 0, 0, 0, 0.7)	url(../images/ico-speaker.png) no-repeat center center;
	margin-right: 5px;
}

ul.navigation.buttons li#btn-cc{
	background: rgba( 0, 0, 0, 0.7)	url(../images/icon-cc.png) no-repeat center center;
}


.icon-fire-alarm {
	content: "";
	width: auto;
	background: url(../images/icon-fire-grey.png) no-repeat;
	height: 100px;
	display: block;
	background-size: 85%;
}
.icon-trouble {
	content: "";
	width: auto;
	background: url(../images/icon-warning-grey.png) no-repeat;
	height: 100px;
	display: block;
	background-size: 85%;
}
.icon-auto-configure {
	content: "";
	width: auto;
	background: url(../images/icon-autoconfig-grey.png) no-repeat;
	height: 100px;
	display: block;
	background-size: 85%;
}
.icon-fire-drill {
	content: "";
	width: auto;
	background: url(../images/icon-alarm-grey.png) no-repeat;
	height: 100px;
	display: block;
	background-size: 85%;
}

/* AUTO CONFIGURE FLOORPLAN BUTTONS*/

.floorplanLeftCol {
	position: absolute;
	top: 39%;
	z-index: 6;
	display: block;
	left: 19.2%;
	width: auto;
}

#btn-clear-and-reconfigure img {
	width: 99.8%;
	top: 56px;
	position: absolute;
	left: 0px;
}

.floorplanRightCol {
	position: absolute;
	top: 40%;
	z-index: 6;
	display: block;
	left: 808px;
	width: auto;
}

.light.fplOne {
	position: absolute;
	left: 90px;
	top: -5px;
}

.light.fplTwo {
	left: 150px;
	position: absolute;
	top: 175px;
}

.light.fplThree {
	position: absolute;
	top: 388px;
	left: 60px;
}

.light.fplFour {
	position: absolute;
	left: 200px;
	top: 12px;
}
.light.fplFive {
	position: absolute;
	top: 88px;
	left: 400px;
}

.light.fplSix {
	position: absolute;
	top: 201px;
	left: 55px;
}

.light.fplSeven {
	position: absolute;
	top: 311px;
	left: 201px;
}
.light.fplEight {
	position: absolute;
	top: 244px;
	left: 348px;
}
.light.fplNine {
	position: absolute;
	top: 81px;
	left: 385px;
}
.light.fplTen {
	position: absolute;
	top: 45px;
	left: 153px;
}

.returnArrow {
	background: url(../images/btn-back.png) no-repeat center center;
	background-size: cover;
	height: 27px;
	width: 50px;
	position: absolute;
	top: 5px;
	right: 0px;
}

/* RESOURCES */
.page-resources > .scroll-content{
	background: #d5d9d9;
}

.page-resources .scroll-view{
	box-shadow: inset 0 2px 8px rgba(0,0,0,.46);
	background: #fff;
	background: linear-gradient(to bottom,	 #ffffff 0%, #e5e5e5 100%); /* W3C */
}

.page-resources .scroll a.item{
	background: transparent;
}

.page-resources .item{
	border-top: none;
	border-left: none;
	border-right: none;
	margin: -1px 40px;
	padding-bottom: 40px;
}

.page-resources .item h2{
	color: #5a4384;
	font-weight: bold;
	font-size: 14px;
}

.page-resources .item p{
	white-space: normal;
	margin-right: 20%;
	font-size: 14px;
}

.page-resources .item-thumbnail-left > img:first-child{
	width: auto;
	display: block;
	margin-bottom: 20px;
}

.page-resources ul.meta{
	position: absolute;
	left: 10px;
	bottom: 6px;
}

.page-resources li.download{
	background: url(../images/download.png) no-repeat;
	width: 24px;
	margin-right: 2px;
	height: 16px;
	background-size: 24px;
	float: left;
}

.page-resources li.wifi{
	background: url(../images/wifi.png) no-repeat;
	width: 24px;
	margin-right: 2px;
	height: 16px;
	background-size: 24px;
	float: left;
}

.page-resources .scroll-view.ionic-scroll {
	min-width: 100%;
}

/* SANDBOX */
.page-sandbox > .scroll-content{
	background: #d5d9d9;
}

.page-sandbox .scroll-view{
	box-shadow: inset 0 2px 8px rgba(0,0,0,.46);
	background: #fff;
	background: linear-gradient(to bottom,	 #ffffff 0%, #e5e5e5 100%); /* W3C */
}

.page-sandbox .scroll a.item{
	background: transparent;
}

.page-sandbox .item{
	border-top: none;
	border-left: none;
	border-right: none;
	margin: -1px 40px;
}

.page-sandbox .item h2{
	color: #5a4384;
	font-weight: bold;
	font-size: 14px;
}

.page-sandbox .item p{
	white-space: normal;
	margin-right: 20%;
	font-size: 14px;
}

.page-resources .item p{
	min-height: 47px;
}
.okay li {
	display: block;
	position: absolute;
	height: 80px;
	width: 120px;
	background: url(../images/ok-button.jpg) no-repeat center center;
	left: 36%;
	bottom: -15px;
	background-size: 70px;
}

/* MENU */
ion-side-menu.menu-right.menu {
	background: #5a4383 !important;
}

.menu .scroll-content{
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

.menu a.item-content, .menu .item{
	background: transparent;
}

.menu a.item-content {
	color: #fff;
	background: transparent !important;
}

.menu .icon{
	width: 30px;
	background-size: 15px 15px;
}
.logoBottom {
	background-image: url(../images/sidemenu-logo.png);
	background-repeat: no-repeat;
	width: 178px;
	height: 100px;
	background-size: 178px;
	z-index: 999;
	opacity: .7;
	margin: 20px auto;
}

.icon-small-home{
	background: url(../images/icon-small-home.png) no-repeat 50% 50%;
}

.icon-small-fire-alarm{
	background: url(../images/icon-small-fire-alarm.png) no-repeat 50% 50%;
}

.icon-small-trouble{
	background: url(../images/icon-small-trouble.png) no-repeat 50% 50%;
}

.icon-small-auto-configure{
	background: url(../images/icon-small-auto-configure.png) no-repeat 50% 50%;
}

.icon-small-overview-video{
	background: url(../images/icon-small-overview-video.png) no-repeat 50% 50%;
}

.icon-small-resources{
	background: url(../images/icon-small-resources.png) no-repeat 50% 50%;
}

.icon-small-sandbox{
	background: url(../images/icon-small-sandbox.png) no-repeat 50% 50%;
}

/* DEVICE */
.device{
	max-width: 680px;
	margin: 0 auto;
}

.device .ac{
	padding-top: 200px;
}
.device .silenced{
	padding-top: 200px;
}

.device .main-display{
	margin: 20px auto;
	width: 445px;
	height: 252px;
	background-color: #fff;
	background-size: cover;
	background-position: 0 0;
	background-repeat: no-repeat;
	padding-top: 36px;
}

.device .label{
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}

.light{
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: #fff;
	margin: 0 auto;
}

.power{
	background: url(../images/btn-pwr.png) no-repeat center center ;
	display: block;
	background-size: 50%;
	width: 110px;
	height: 136px;
	margin: 0 auto;
}

.silence{
	background: url(../images/btn-silence.png) no-repeat center center ;
	display: block;
	background-size: 50%;
	width: 110px;
	height: 136px;
	margin: 0 auto;
}

.row.buttons{
	text-align: center;
	margin-bottom: 20px;
}

.row.buttons .button{
	margin-bottom: 20px;
	box-shadow: inset -2px 2px 2px rgba(255,255,255, .25), inset 2px -2px 2px rgba(0,0,0, .25);
	padding: 10px;
	border: none;
	outline: none;
	background: #606674;
	border-radius: 4px;
	color: #fff;
}

.bottom.row.buttons .button{
	background-repeat: no-repeat;
	background-size: 85px 50px;
	background-position: 50% 50%;
	width: 90px;
	height: 60px;
}

.row.buttons .button.highlight{
	background-color: rgba(153,234,25,1);
	box-shadow: inset -2px 2px 2px rgba(255,255,255, .25), inset 2px -2px 2px rgba(0,0,0, .25), 0 0 20px rgba(153, 234, 25, 0.75);
}

#btn-menu{
	background-image: url(../images/btn-menu.png);
}

#btn-drill{
	background-image: url(../images/btn-drill.png);
}

#btn-reset{
	background-image: url(../images/btn-reset.png);
}

.on .light.green{
	background: rgba(153,234,25,1) 70%;
	box-shadow: 0 0 20px rgba(153, 234, 25, 0.75);
}

.blink .light.green{
	-webkit-animation: blinkGreen 1s ease-in-out infinite;
	animation: blinkGreen 1s ease-in-out infinite;

}

.on .light.red{
	background: rgba(234,35,39,1) 70%;
	box-shadow: 0 0 20px rgba(234, 35, 39, 0.75);
}

.blink .light.red{
	-webkit-animation: blinkRed 1s ease-in-out infinite;
	animation: blinkRed 1s ease-in-out infinite;
}

.on .light.blue{
	background: rgba(19,147,255,1) 70%;
	box-shadow: 0 0 20px rgba(19, 147, 255, 0.75);
}

.blink .light.blue{
	-webkit-animation: blinkBlue 1s ease-in-out infinite;
	animation: blinkBlue 1s ease-in-out infinite;
}

.on .light.yellow{
	background: rgba(255,163,19,1) 70%;
	box-shadow: 0 0 20px rgba(255, 163, 19, 0.75);
}

.blink .light.yellow{
	-webkit-animation-name: blinker;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
	-webkit-animation-duration: 1s;
}
/*Action required*/
@-webkit-keyframes pulse_animation {
	0% { transform: scale(.75); }
	20% { transform: scale(1); }
	40% { transform: scale(1.25); }
	60% { transform: scale(1.5); }
	100% { transform: scale(1.75); }
}
.pulse {
	-webkit-animation-name: 'pulse_animation';
	-webkit-animation-duration: 600ms;
	-webkit-transform-origin:70% 70%;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
}
.circle {
		position: absolute;
	width: 73px;
	height: 73px;
		text-align: center;
		border-radius: 100%;
		padding: 20px;
		overflow: hidden;
		border:5px solid #e8e8e8;
		opacity:.5;
		-webkit-box-shadow: 0px 3px 191px 0px rgba(255,255,255,1);
	-moz-box-shadow: 0px 3px 191px 0px rgba(255,255,255,1);
	box-shadow: 0px 3px 191px 0px rgba(255,255,255,1);
		font-family: sans-serif;	/* Just 'cos */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzIlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-radial-gradient(center, ellipse cover,	rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 7%, rgba(255,255,255,1) 72%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0)), color-stop(7%,rgba(255,255,255,0.1)), color-stop(72%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,	 rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 7%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,	rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 7%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,	 rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 7%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,	 rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 7%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
.smokeHighlight{
			 position: absolute;
	width: 73px;
	height: 73px;
		text-align: center;
		border-radius: 100%;
		padding: 20px;
		overflow: hidden;
		border:5px solid #e8e8e8;
		opacity:.8;
		-webkit-box-shadow: 0px 3px 191px 0px rgba(255,255,255,1);
	-moz-box-shadow: 0px 3px 191px 0px rgba(255,255,255,1);
	box-shadow: 0px 3px 191px 0px rgba(255,255,255,1);
		font-family: sans-serif;	/* Just 'cos */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzIlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-radial-gradient(center, ellipse cover,	rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 7%, rgba(255,255,255,1) 72%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0)), color-stop(7%,rgba(255,255,255,0.1)), color-stop(72%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,	 rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 7%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,	rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 7%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,	 rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 7%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,	 rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 7%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	z-index: -1;
	left: 15px;
	bottom: -5px;
}
.main-display #btn-alrm-ack .circle {
	bottom: -16px;
	left: 19px;
}
.main-display #btn-silence .circle {
	bottom: -14px;
	left: 12px;
}
.main-display #btn-trbl-ack .circle {
	bottom: -16px;
	left: 25px;
}
.buttons #btn-menu .circle {
	bottom: -18px;
	left: 19px;
}
#main-menu-icons #btn-configure .circle {
	bottom: -12px;
	left: 3px;
}
.main-display .chkBtn .circle {
	left: 0px;
	bottom: -18px;
}
.main-display #btn-clear-and-reconfigure .circle {
	top: 57px;
	left: 0px;
}
.cardLeft .circle {
	top: 62px;
	left: 65px;
}
ul.navigation .circle {
	top: -7px;
	left: -5px;
}
#btn-reset .circle {
	top: -6px;
	left: 15px;
}
.cf:before,
.cf:after {
		content: " "; /* 1 */
		display: table; /* 2 */
}

.cf:after {
		clear: both;
}

.main-display{
	position: relative;
}

.main-display .row.buttons{
	margin-bottom: 0;
}

.main-display .row.buttons li{
	margin: 0px 15px 0px 0px;
	line-height: 1.2;
	white-space: normal;
}
.main-display .row.buttons li#btn-left-arrow{
	background:	url(../images/previous-button-grey.jpg) no-repeat center center;
	background-size: cover;
}
.main-display .row.buttons li#btn-right-arrow{
	background: url(../images/next-button-grey.jpg) no-repeat center center;
	background-size: cover;
}

.main-display .row.buttons .button.delBtn {
	background: #606674 url(../images/btn-del.png) no-repeat center center;
	background-size: cover;
	height: 62px;
}

.main-display .row.buttons .button.chkBtn {
	background: #606674 url(../images/btn-chkl.png) no-repeat center center;
	background-size: cover;
	height: 62px;
}

.main-display .row.buttons li:last-child{
	margin-right: 0;
}

.row.inputs input[type='password']{
	font-size: 24px;
	text-align: center;
}

.fire-alarm-device .main-display .row.buttons,
.trouble-device .main-display .row.buttons,
.fire-drill-device .main-display .row.buttons{
	position: absolute;
	bottom: 15px;
}

#main-menu-icons li{
	text-align: center;
	color: #fff;
	background: transparent;
	position: absolute;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	box-shadow: none;
	border: none;
	min-width: inherit;
	max-width: inherit;
	cursor: pointer;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
}
#main-menu-icons li img{
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 auto;
}

#main-menu-icons li.highlight img{
	box-shadow: 1px 0 25px rgba(255, 255, 255, 1);
}

#main-menu-icons #btn-configure{
	position: absolute;
	top: 43px;
	left: 41px;
}
#main-menu-icons #btn-walk-drill{
	position: absolute;
	top: 43px;
	left: 145px;
}

#main-menu-icons #btn-input-output{
	position: absolute;
	top: 43px;
	left: 237px;
}
#main-menu-icons #btn-clock{
	position: absolute;
	top: 43px;
	left: 351px;
}
#main-menu-icons #btn-miscellaneous{
	position: absolute;
	top: 142px;
	left: 76px;
}
#main-menu-icons #btn-log{
	position: absolute;
	top: 142px;
	left: 198px;
}
#main-menu-icons #btn-info{
	position: absolute;
	top: 142px;
	left: 305px;
}
li#btn-cc {
	display: none;
}
li#btn-speaker.paused {
	opacity: .5;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
		*zoom: 1;
}

/* ANIMATIONS */

/* blinkRed */
@-webkit-keyframes blinkRed {
	from { background: rgba(234,35,39,1) 70%; }
		to { background: #ffffff; }
}

/* blinkGreen */
@-webkit-keyframes blinkGreen {
	from { background: rgba(153,234,25,1) 70%; }
		to { background: #ffffff; }
}

/* blinkBlue */
@-webkit-keyframes blinkBlue {
	from { background: rgba(19,147,255,1) 70%; }
		to { background: #ffffff; }
}

/* blinkYellow */
@-webkit-keyframes blinker {
	from { background: rgba(255,163,19,1) 70%; }
	to { background: #ffffff; }
}

.fade-in-out.ng-enter, .fade-in-out .ng-enter {
	animation: fadeIn 0.3s;
	position: absolute;
}

.fade-in-out.ng-leave, .fade-in-out .ng-leave {
	animation: fadeOut 0.3s;
	position: absolute;
}

/*.absPos.on.turnOn .light{
	animation: fadeIn 2s;
	transition: all 5s ease;
}*/

	body .pulled > .scroll-content{
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(../images/fire-alarms-active.png) no-repeat center center fixed;
		background-size: cover;
	}

@media only screen and (max-width: 1567px) {	/* Floorplan needs extra love*/
	/* AUTO CONFIGURE FLOORPLAN BUTTONS*/
	img.smallAlarm {
		top: 33%;
		width: 3%;
		left: -37px;
	}
	img.pullStation {
		top: 50%;
		width: 8%;
	}
	.floorplanImg {
		width: 1076px;
		height: auto;
		max-width: 1382px;
		display: block;
		z-index: -1;
		position: relative;
	}

	.floorplanRelative {
		position: relative;
		display: block;
		width: 1076px;
		left: 94px;
	}

	.floorplanLeftCol {
		position: absolute;
		top: 36%;
		z-index: 6;
		display: block;
		left: 195px;
		width: auto;
	}

	.floorplanRightCol {
		position: absolute;
		top: 42%;
		z-index: 6;
		display: block;
		left: 609px;
		width: auto;
	}

	.light.fplOne {
		position: absolute;
		left: 98px;
		top: -4px;
	}

	.light.fplTwo {
		left: 147px;
		position: absolute;
		top: 146px;
	}

	.light.fplThree {
		position: absolute;
		top: 323px;
		left: 73px;
	}

	.light.fplFour {
		position: absolute;
		left: 186px;
		top: 11px;
	}
	.light.fplFive {
		position: absolute;
		top: 71px;
		left: 350px;
	}

	.light.fplSix {
		position: absolute;
		top: 125px;
		left: 102px;
	}

	.light.fplSeven {
		position: absolute;
		top: 218px;
		left: 224px;
	}
	.light.fplEight {
		position: absolute;
		top: 163px;
		left: 346px;
	}
	.light.fplNine {
		position: absolute;
		top: 29px;
		left: 374px;
	}
	.light.fplTen {
		position: absolute;
		top: 0px;
		left: 182px;
	}

}

@media only screen and (max-width: 1567px) {
	img.smallAlarm {
		top: 26%;
		width: 30%;
	}
	img.pullStation {
		top: 42%;
		width: 8%;
	}
}
@media only screen and (max-width: 1300px) {

	.rightPullStation {
		width: 380px;
	}
	img.smallAlarm {
		left: -32px;
	}
	.floorplanImg {
		width: 900px;
		top: -59px;
	}
	.light.fplOne {
		left: 50px;
		top: 37px;
	}

	.light.fplTwo {
		left: 92px;
		top: 162px;
	}

	.light.fplThree {
		top: 312px;
		left: 24px;
	}

	.light.fplFour {
		left: 124px;
		top: 51px;
	}
	.light.fplFive {
		top: 108px;
		left: 323px;
	}

	.light.fplSix {
		top:141px;
		left: -16px;
	}

	.light.fplSeven {
		top: 218px;
		left: 87px;
	}
	.light.fplEight {
		top: 179px;
		left: 185px;
	}
	.light.fplNine {
		top: 63px;
		left: 212px;
	}
	.light.fplTen {
		top: 40px;
		left: 50px;
	}
}
@media only screen and (max-width: 1024px) {
	.scroll .device .main-display {
		width: 447px;
		height: 258px;
		background-size: 100% 100%;
	}
	.scroll .device .button {
		font-size: 15px;
	}
}


/* MEDIA QUERIES */

/* large */
@media only screen and (max-width: 1023px) {
	/* AUTO CONFIGURE FLOORPLAN BUTTONS*/
	.trouble-device .card , .fire-alarm-device .card, .auto-configure-device .card {
		width: 168px;
		padding: 20px;
		color: #fff;
		z-index: 999;
	}
	.fire-alarm-main .rightPullStation {
		width: 383px;
		float: right;
		position: relative;
		height: 700px;
	}
	.page-home .icons li {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: inline-block;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 20px;
		margin: 2%;
		width: 140px;
		vertical-align: top;
	}
	li#btn-speaker {
		display: none;
	}
	li#btn-cc {
		display: none;
	}
	.floorplanImg {
		width: 740px;
	}
	.floorplanRelative {
		position: relative;
		display: block;
		width: 100%;
		left: 0;
		top: 29px;
	}

	.floorplanLeftCol {
		position: absolute;
		top: 32%;
		z-index: 6;
		display: block;
		left: 146px;
		width: auto;
	}

	.floorplanRightCol {
		position: absolute;
		top: 38%;
		z-index: 6;
		display: block;
		left: 531px;
		width: auto;
	}

	.light.fplOne {
		left: 50px;
		top: 37px;
	}

	.light.fplTwo {
		left: 92px;
		top: 143px;
	}

	.light.fplThree {
		top: 270px;
		left: 35px;
	}

	.light.fplFour {
		left: 109px;
		top: 51px;
	}
	.light.fplFive {
		top: 100px;
		left: 280px;
	}

	.light.fplSix {
		top: 126px;
		left: -43px;
	}

	.light.fplSeven {
		top: 192px;
		left: 40px;
	}
	.light.fplEight {
		top: 156px;
		left: 120px;
	}
	.light.fplNine {
		top: 63px;
		left: 141px;
	}
	.light.fplTen {
		top: 44px;
		left: 9px;
	}

}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 2) {
	.scroll .device .main-display {
		width: 326px;
		height: 197px;
		background-size: 100% 100%;
	}
	.main-display .row.buttons li {
	margin: 0px 6px -4px 0px;
	line-height: 1;
	white-space: normal;
	font-size: 9px;
	}
}
@media only screen and (max-width: 855px) and (min-width: 766px){
		.scroll .device .main-display {
		width: 349px;
		height: 214px;
		background-size: 100% 100%;
	}
	.main-display .row.buttons li {
	margin: 0px 6px -4px 0px;
	line-height: 1;
	white-space: normal;
	font-size: 9px;
	}
}

/* others */
@media only screen and (max-width: 767px) and (orientation: portrait) {

	.scroll-content{
		padding-left: 0;
		padding-right: 0;
	}
	.device .col-50{
		max-width: 100%;
		flex: 0 0 100%;
	}
	.scroll .device .main-display {
		width: 326px;
		height: 197px;
		background-size: 100% 100%;
	}
	.main-display .row.buttons li {
		margin: 0px 6px -4px 0px;
		line-height: 1;
		white-space: normal;
		font-size: 9px;
	}
	.page-home .icons li {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: inline-block;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 20px;
		margin: 2%;
		width: 130px;
		vertical-align: top;
	}
	.card.enabled p.ng-binding {
		display: block;
	}
	.device .ac{
		display: none;
	}
	.device .silenced{
		display: none;
	}
	.device .label{
		font-size: 65%;
	}
	.device .main-display {
		margin: 20px auto;
		width: 100%;
		height: 252px;
		background-color: #fff;
		background-size: cover;
		background-position: 0 0;
		background-repeat: no-repeat;
		padding-top: 36px;
	}
	.main-display .row.buttons li{
		font-size: 75%;
	}
}

/* medium*/
@media only screen and (max-width: 767px) {
	li#btn-speaker {
		display: inline-block;
	}
	li#btn-cc {
		display: inline-block;
	}
	.padding .card, .padding .list-inset {
		margin-left: 0;
		margin-right: 0;
		position: relative;
		width: 95%!important;
		margin: 10px 10px 95px 10px;
	}
	.card.cardLeft.enabled {
		max-height: 600px!important;
		width: 95%!important;
		padding: 10%!important;
	}
	.card.cardLeft.disabled {
		max-height: 0px!important;
	}
	.card.cardLeft.disabled p.ng-binding {
		overflow: hidden;
	}
	.card.cardLeft.enabled p.ng-binding {
		max-height: 600px!important;
	}
	.device {
		max-width: 467px;
		width: 100%;
	}
	.fire-alarm-main .scroll-content {
		background-size: cover;
		background-position: right;
	}
	.fire-alarm-main .scroll-content {
		background-size: cover;
		background-position: inherit;
	}
	.device .main-display {
		margin: 20px auto;
		width: 300px!important;
		height: 189px!important;
		background-color: #fff;
		background-size: cover;
		background-position: 0 0;
		background-repeat: no-repeat;
		padding-top: 36px;
	}
	.main-display .row.buttons li {
		margin: 0px 4px -5px 0px!important;
		line-height: 1!important;
		white-space: normal;
		font-size: 59%!important;
	}
	.row {
		width: 99%;
	}
	.card {
		width: 163px;
		padding: 20px;
		color: #fff;
		z-index: 999;
	}
	ul.navigation.buttons {
		position: absolute;
		top: -58px;
		z-index: 999;
		left: 2%;
		height: 0px;
		display: inline-flex;
		width: 100%;
	}
	.navigation .button {
		margin: 5px;
		text-align: center;
	}
	.page-home .icons li {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: inline-block;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 20px;
		margin: 2%;
		width: 130px;
		vertical-align: top;
	}
	.scroll-content {
		overflow: scroll;
	}
	video {
		width: 100%;
	}
	.fire-alarm-main .rightPullStation {
		width: 30%;
		float: right;
		position: relative;
		display: none;
		height: 0px;
	}
	.device .ac, .device .silenced {
		padding-top: 200px;
		display: none;
	}
	.col-50 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.scroll-content h1 {
		text-align: center;
	}
	.card {
		width: 250px!important;
		padding: 20px!important;
		color: #fff!important;
		z-index: 999!important;
		padding: 0!important;
		max-height: 0px!important;
		width: 0px!important;

	}
	.padding .card, .padding .list-inset {
		margin-left: 0;
		margin-right: 0;
		position: relative;
		width: 95%;
		margin: 50px 10px 10px 10px;
		padding-bottom: 0px!important;
	}
	.card p.ng-binding {
		display: none;
	}
	/* AUTO CONFIGURE FLOORPLAN BUTTONS*/
	.floorplanLeftCol {
		position: absolute;
		top: 27%!important;
		z-index: 6;
		display: block;
		left: 88px!important;
		width: auto;
	}
	.card img {
		-webkit-user-drag: none;
		display: none;
		width: 0px!important;
		height: 0px!important;
	}

	.floorplanRightCol {
		position: absolute;
		top: 34%!important;
		z-index: 6;
		display: block;
		left: 339px!important;
		width: auto;
	}
	.floorplanImg {
		width: 668px;
	}
	.light.fplOne {
		left: 92px;
		top: 52px;
	}

	.light.fplTwo {
		left: 127px;
		top: 149px;
	}

	.light.fplThree {
		top: 261px;
		left: 74px;
	}
	.light.fplFour {
		left: 145px;
		top: 68px;
	}
	.light.fplFive {
		top: 107px;
		left: 245px;
	}

	.light.fplSix {
		top: 126px;
		left: 100px;
	}
	.light.fplSeven {
		top: 186px;
		left: 175px;
	}
	.light.fplEight {
		top: 156px;
		left: 247px;
	}
	.light.fplNine {
		top: 71px;
		left: 266px;
	}
	.light.fplTen {
		top: 53px;
		left: 147px;
	}
}

@media only screen and (max-width: 680px) {
	.floorplanImg {
		width: 440px!important;
	}
	.light.fplOne {
		left: 29px;
		top: 11px;
	}
	.light.fplTwo {
		left: 53px;
		top: 77px;
	}
	.light.fplThree {
		top: 153px;
		left: 16px
	}
	.light.fplFour {
		left: 64px;
		top: 23px;
	}
	.light.fplFive {
		top: 48px;
		left: 132px;
	}
	.light.fplSix {
		top: 58px;
		left: -53px;
	}
	.light.fplSeven {
		top: 100px;
		left: -1px;
	 }
	.light.fplEight {
		top: 78px;
		left: 45px;
	}
	.light.fplNine {
		top: 22px;
		left: 60px;
	}
	.light.fplTen {
		top: 12px;
		left: -17px;
	}
}
/* small */
@media only screen and (max-width: 567px) {
	div.resourceContainer {
		width: 80%;
	}
	.bar .logo img{
		left: -15px;
		width: 125px;
		height: auto;
	}
}

/* HACK */
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > *{
	margin-top: 0;
}

/* RETINA IMAGES */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
  .bar.bar-dark{
	  background-image: url(../images/header-brand@2x.png);
	  background-size: 108px 36px;
	}
}

/* IE9 */
.ie9 .menu-open .menu-animated {
	left: -275px!important;
	position: absolute!important;
	transform: translate3d(-275px, 0px, 0px)!important;
}

.ie9 .card{
	background: rgba( 0, 0, 0, 0.7)!important;
}

.ie9 .device .on{
	width:254px!important;
	float: left;
}

.ie9 .device .col-50{
	width:507px!important;
	float: left;
}

.ie9 .device .top-lights{
	width: 500px!important;
	height: 60px!important;
	margin-bottom: 25px;
}

.ie9 .device .top-lights .col {
	width: 122px!important;
	float: left!important;
}

.ie9 .fire-alarm-device .main-display .buttons.row, .ie9 .trouble-device .main-display .buttons.row {
	position: absolute!important;
	bottom: 16px!important;
}

.ie9 li#btn-silence {
	width: 99px!important;
}

.ie9 li#btn-alrm-ack {
	width: 92px!important;
}

.ie9 li#btn-alrm-ack {
	width: 92px!important;
}

.ie9 li#btn-trbl-ack {
	width: 89px!important;
}

.ie9 li#btn-left-arrow {
	width: 52px!important;
}

.ie9 li#btn-right-arrow {
	width: 52px!important;
}

.ie9 .top.row.buttons {
	width: 497px!important;
}

.ie9 .top.row.buttons .col {
	width: 96px!important;
	float: left!important;
}

.ie9 .main-display .buttons.row li {
	margin: 0px 4px 0px 0px!important;
	height: 57px!important;
}

.ie9 .bottom.row.buttons {
	width: 497px!important;
}

.ie9 .bottom.row.buttons .col{
	width: 162px!important;
	float: left;
}

.ie9 .col.silenced {
	float: left!important;
	width: 253px!important;
}

.ie9 .logoBottom {
	background-image: url(../images/sidemenu-logo.png);
	background-repeat: no-repeat;
	width: 178px;
	height: 100px;
	background-size: 178px;
	z-index: 999;
	opacity: 0.7;
	margin: 20px auto;
	top: 407px;
	position: absolute;
	left: 21px;
}