*{box-sizing:border-box}html,body{margin:0;font-family:sans-serif;-webkit-text-size-adjust:none}.container{background-color:#323c41;overflow:hidden;background-image:linear-gradient(to right,#034378,#2d4e68);min-height:100vh}.container{display:block;width:100%;z-index:-10;justify-content:center;align-items:center;transition:all .2s;background-image:url(../bg/bg-menu-orange.jpg);background-size:cover}#content{margin-top:60px;overflow:hidden}menu{background-color:white;display:inline-block;position:fixed;height:100vh;width:225px;right:-225px;-webkit-transition:-webkit-transform .3s;transition:transform .3s;padding:0;margin:0;background:#fff;background:-webkit-linear-gradient(right,#fff,#eee);background:-moz-linear-gradient(right,#fff,#eee);background:-o-linear-gradient(right,#fff,#eee);background:linear-gradient(to left,#eee,#fff);background-color:rgba(0,0,0,0)}menu .logo{margin:0;text-align:center;height:55px;border-bottom:1px solid #ddd;margin-left:20px}menu .logo p{font-weight:100;font-size:1em}menu .logo img{border-radius:50%}menu a{display:block;text-decoration:none;text-align:center;color:black;padding:5px 0}menu a:hover{background-color:#f5f5f5}menu a.active{background-color:black;color:white}menu footer{width:225px;text-align:center;position:absolute;padding:5px;bottom:0;color:#959595}menu footer p{font-size:.85em}menu,.header,.cover{-webkit-transition:-webkit-transform .3s;transition:transform .3s}.sidenav-active menu,.sidenav-active .header,.sidenav-active .cover,.sidenav-active .toolbar,.sidenav-active .cornermenu{-webkit-transform:translateX(-225px);-ms-transform:translateX(-225px);transform:translateX(-225px)}.main{-webkit-transition:margin-righ .3s;transition:margin-right .3s}.sidenav-active .main{margin-right:225px;margin-left:-225px}.container{-webkit-transition:margin-righ .3s;transition:margin-right .3s}.sidenav-active .container{margin-right:225px;margin-left:-225px}.header{width:100%;height:56px;box-shadow:0 2px 4px rgba(0,0,0,0.4);background:#323c41;color:#FFF;display:flex;flex-direction:row;align-items:center;padding:0 16px;position:fixed;z-index:4}.header #title{font-size:20px;display:block;width:100%;text-align:center;font-family:'Open Sans Condensed',sans-serif;font-weight:900px;color:white}@media only screen and (min-width:880px){.header #title{font-size:24px}}.header input{display:block;width:40px;height:32px;position:absolute;top:8px;right:12px;cursor:pointer;opacity:0;z-index:2;-webkit-touch-callout:none}.hamburger{position:fixed;padding:15px;top:5px;right:10px}.hamburger:hover{cursor:pointer}.hamburger div{background-color:white;border-radius:1px;height:2px;width:25px}.hamburger div:not(:last-child){margin-bottom:5px}.header input:checked ~ .hamburger{margin-top:8px}.header input:checked ~ .hamburger div{opacity:1;transform:rotate(45deg) translate(-2px,-1px);margin-top:-4px}.header input:checked ~ .hamburger div:nth-last-child(3){opacity:0;transform:rotate(0deg) scale(0.2,0.2)}.header input:checked ~ .hamburger div:nth-last-child(2){opacity:1;transform:rotate(-45deg) translate(0,-1px)}.overlay{display:none;width:100%;position:fixed;top:0;left:0;right:0;bottom:0;z-index:3;background-color:gray;text-align:center;opacity:.8;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.sidenav-active .overlay{margin-right:225px;-webkit-transform:translateX(-225px);-ms-transform:translateX(-225px);transform:translateX(-225px);display:block}.cornermenu-item,.cornermenucheck-button{background:#929292;border-radius:100%;width:50px;height:50px;margin-left:-40px;position:absolute;color:#fff;text-align:center;line-height:80px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform ease-out 200ms;transition:-webkit-transform ease-out 200ms;transition:transform ease-out 200ms;transition:transform ease-out 200ms,-webkit-transform ease-out 200ms}.cornermenucheck{display:none}.lines{width:25px;height:3px;background:#596778;display:block;position:absolute;top:50%;left:50%;margin-left:-12.5px;margin-top:-1.5px;-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms,-webkit-transform 200ms}.cornermenu{margin:auto;position:absolute;top:10px;left:20px;width:50px;height:50px;text-align:center;box-sizing:border-box;font-size:26px;position:fixed;z-index:4}.cornermenu-checked{top:40px;left:50px}.cornermenu-item:hover{background:#eee;color:#3290b1;border:2px solid}.cornermenu-item:hover img{position:absolute;top:-3px;left:-3px}.cornermenu-item i{position:absolute;top:12px;left:10px}.cornermenu-item:hover i{position:absolute;top:10px;left:9px}.cornermenu-item{overflow:hidden}.cornermenu-item:after{content:"";position:absolute;top:-110%;left:-210%;width:200%;height:200%;opacity:0;transform:rotate(30deg);background:rgba(255,255,255,0.13);background:linear-gradient(to right,rgba(255,255,255,0.13) 0,rgba(255,255,255,0.13) 77%,rgba(255,255,255,0.5) 92%,rgba(255,255,255,0.0) 100%)}.cornermenu-item:hover:after{opacity:1;top:-30%;left:-30%;transition-property:left,top,opacity;transition-duration:.7s,0.7s,0.15s;transition-timing-function:ease}.cornermenu-item:active:after{opacity:0}.cornermenu-item:nth-child(3){-webkit-transition-duration:180ms;transition-duration:180ms}.cornermenu-item:nth-child(4){-webkit-transition-duration:180ms;transition-duration:180ms}.cornermenu-item:nth-child(5){-webkit-transition-duration:180ms;transition-duration:180ms}.cornermenu-item:nth-child(6){-webkit-transition-duration:180ms;transition-duration:180ms}.cornermenu-item:nth-child(7){-webkit-transition-duration:180ms;transition-duration:180ms}.cornermenu-item:nth-child(8){-webkit-transition-duration:180ms;transition-duration:180ms}.cornermenu-item:nth-child(9){-webkit-transition-duration:180ms;transition-duration:180ms}.cornermenucheck-button{z-index:2;-webkit-transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275);transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275);-webkit-transition-duration:400ms;transition-duration:400ms;-webkit-transform:scale(1.1,1.1) translate3d(0,0,0);transform:scale(1.1,1.1) translate3d(0,0,0);cursor:pointer;box-shadow:3px 3px 0 0 rgba(0,0,0,0.14);border:2px solid;overflow:hidden}.cornermenucheck-button:hover{-webkit-transform:scale(1.2,1.2) translate3d(0,0,0);transform:scale(1.2,1.2) translate3d(0,0,0)}.cornermenucheck-button:after{content:"";position:absolute;top:-110%;left:-210%;width:200%;height:200%;opacity:1;transform:rotate(30deg);background:rgba(255,255,255,0.13);background:linear-gradient(to right,rgba(255,255,255,0.13) 0,rgba(255,255,255,0.13) 77%,rgba(255,255,255,0.5) 92%,rgba(255,255,255,0.0) 100%)}.cornermenucheck-button:hover:after{opacity:1;top:-30%;left:-30%;transition-property:left,top,opacity;transition-duration:.7s,0.7s,0.15s;transition-timing-function:ease}.cornermenucheck-button:active:after{opacity:0}.cornermenucheck:checked+.cornermenucheck-button{-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transform:scale(0.8,0.8) translate3d(0,0,0);transform:scale(0.8,0.8) translate3d(0,0,0)}.cornermenucheck:checked ~ .cornermenu-item{-webkit-transition-timing-function:cubic-bezier(0.935,0,0.34,1.33);transition-timing-function:cubic-bezier(0.935,0,0.34,1.33)}.cornermenucheck:checked ~ .cornermenu-item:nth-child(3){transition-duration:280ms;-webkit-transition-duration:280ms;-webkit-transform:translate3d(90.9466px,-52.47586px,0);transform:translate3d(100.9466px,-32.47586px,0)}.cornermenucheck:checked ~ .cornermenu-item:nth-child(4){transition-duration:380ms;-webkit-transition-duration:380ms;-webkit-transform:translate3d(90.9466px,52.47586px,0);transform:translate3d(88px,28.47586px,0)}.cornermenucheck:checked ~ .cornermenu-item:nth-child(5){transition-duration:180ms;-webkit-transition-duration:180ms;-webkit-transform:translate3d(100.08361px,204.99997px,0);transform:translate3d(50.9466px,79.47586px,0)}.cornermenucheck:checked ~ .cornermenu-item:nth-child(6){transition-duration:480ms;-webkit-transition-duration:480ms;-webkit-transform:translate3d(0.08361px,104.99997px,0);transform:translate3d(-8.08361px,104.99997px,0)}.cornermenucheck:checked ~ .cornermenu-item:nth-child(7){transition-duration:580ms;-webkit-transition-duration:580ms;-webkit-transform:translate3d(-90.86291px,52.62064px,0);transform:translate3d(-90.86291px,52.62064px,0)}.cornermenucheck:checked ~ .cornermenu-item:nth-child(8){transition-duration:680ms;-webkit-transition-duration:680ms;-webkit-transform:translate3d(-91.03006px,-52.33095px,0);transform:translate3d(-91.03006px,-52.33095px,0)}.cornermenucheck:checked ~ .cornermenu-item:nth-child(9){transition-duration:780ms;-webkit-transition-duration:780ms;-webkit-transform:translate3d(-0.25084px,-104.9997px,0);transform:translate3d(-0.25084px,-104.9997px,0)}.blue{background-color:#4fc3f7;box-shadow:3px 3px 0 0 rgba(0,0,0,0.14);text-shadow:1px 1px 0 rgba(0,0,0,0.12)}.blue:hover{color:#fff;text-shadow:none;background-color:#0093c4;border-color:#4fc3f7}.green{box-shadow:3px 3px 0 0 rgba(0,0,0,0.14);text-shadow:1px 1px 0 rgba(0,0,0,0.12);background-color:#087f23;border-color:#4caf50}.green:hover{text-shadow:none;background-color:#087f23;border-color:#4caf50}.red{box-shadow:3px 3px 0 0 rgba(0,0,0,0.14);text-shadow:1px 1px 0 rgba(0,0,0,0.12);background-color:#c41c00;border-color:#ff5722}.red:hover{text-shadow:none;background-color:#c41c00;border-color:#ff5722}.purple{background-color:#c49cde;box-shadow:3px 3px 0 0 rgba(0,0,0,0.14);text-shadow:1px 1px 0 rgba(0,0,0,0.12)}.purple:hover{color:#c49cde;text-shadow:none}.gray{background-color:#929292;box-shadow:3px 3px 0 0 rgba(0,0,0,0.14);text-shadow:1px 1px 0 rgba(0,0,0,0.12)}.gray:hover{color:#929292;text-shadow:none}.orange{background-color:#ffb74d;box-shadow:3px 3px 0 0 rgba(0,0,0,0.14);text-shadow:1px 1px 0 rgba(0,0,0,0.12)}.orange:hover{text-shadow:none;background-color:#c88719;border-color:#ffb74d}.lightblue{background-color:#62c2e4;box-shadow:3px 3px 0 0 rgba(0,0,0,0.14);text-shadow:1px 1px 0 rgba(0,0,0,0.12)}.lightblue:hover{color:#62c2e4;text-shadow:none}.navmenu{position:relative;margin-top:0}.nav-visible .navmenu{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}.navmenu{list-style-type:none;padding:0}.navmenu li{position:relative}.navmenu li:after{content:'';width:0;height:1px;background:#ddd;position:absolute;bottom:-1px;left:20px;-webkit-transition-duration:500ms;transition-duration:500ms}.navmenu li:hover:after{content:'';width:100%;height:1px;background:#ccc;position:absolute;bottom:-1px;left:20px}.navmenu li .nav-marker{background-color:black;height:2.8rem;position:absolute;left:0;top:0;width:3px}.navmenu li .nav-marker:before{border:5px solid transparent;border-left-color:black;content:"";height:0;position:absolute;left:3px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:0}.navmenu li.active a{color:black;font-weight:600}.navmenu a{display:block;line-height:1.4;padding:.7em .5em .7em 1.4em;text-transform:uppercase;text-decoration:none;text-align:left;color:#999}.navmenu a:focus,.navmenu a:hover{text-decoration:none;color:black;font-weight:600}.navicon{width:60px;height:60px;border-radius:50%;margin:5px;float:right;color:black;background-color:#ddd;border:1px solid #ccc;position:absolute;right:0;top:0;overflow:hidden}.navicon i{font-size:35px;margin-top:10px;margin-left:16px}.navicon:hover{background-color:#323c41;color:white;cursor:pointer}.navicon:after{content:"";position:absolute;top:-110%;left:-210%;width:200%;height:200%;opacity:1;transform:rotate(30deg);background:rgba(255,255,255,0.13);background:linear-gradient(to right,rgba(255,255,255,0.13) 0,rgba(255,255,255,0.13) 77%,rgba(255,255,255,0.5) 92%,rgba(255,255,255,0.0) 100%)}.navicon:hover:after{opacity:1;top:-30%;left:-30%;transition-property:left,top,opacity;transition-duration:.7s,0.7s,0.15s;transition-timing-function:ease}.navicon:active:after{opacity:0}.navbtn{background:#323c41;background-image:-webkit-linear-gradient(top,#323c41,#323c41);background-image:-moz-linear-gradient(top,#323c41,#323c41);background-image:-ms-linear-gradient(top,#323c41,#323c41);background-image:-o-linear-gradient(top,#323c41,#323c41);background-image:linear-gradient(to bottom,#323c41,#323c41);-webkit-border-radius:5;-moz-border-radius:5;border-radius:5px;font-family:Arial;color:#fff;padding:10px 20px 10px 20px;border:solid #323c41 1px;text-decoration:none;text-align:center;width:200px;margin:auto;margin-top:30px}.navbtn:hover{background:#ddd;background-image:-webkit-linear-gradient(top,#ddd,#ddd);background-image:-moz-linear-gradient(top,#ddd,#ddd);background-image:-ms-linear-gradient(top,#ddd,#ddd);background-image:-o-linear-gradient(top,#ddd,#ddd);background-image:linear-gradient(to bottom,#ddd,#ddd);text-decoration:none;color:black;cursor:pointer;border-color:#bbb}.ic{font-size:32px;color:transparent;user-select:none;position:relative;display:inline-block;box-sizing:border-box;overflow:visible;vertical-align:top;font-style:normal;height:32px;width:38px;cursor:pointer}.ic:before,.ic:after{background-color:#fff;border-color:#fff;color:#fff;content:"";position:absolute;display:block;box-sizing:border-box}.ic,.ic:before,.ic:after{transition:all .4s ease}.ic.ic-away{background-repeat:no-repeat;background-size:45px 50px;margin-top:7px;background-position:center;background-image:url("../icon/away.png")}.ic.ic-disarm{background-repeat:no-repeat;background-size:45px 50px;margin-top:7px;background-position:center;background-image:url("../icon/disarm.png")}.ic.ic-home{background-repeat:no-repeat;background-size:45px 50px;margin-top:7px;background-position:center;background-image:url("../icon/home.png")}.ic.ic-disconnect{background-repeat:no-repeat;background-size:45px 50px;margin-top:7px;background-position:center;background-image:url("../icon/disconnect.png")}.ic.ic-close{color:#000;position:relative;margin-top:13px;margin-left:0;width:21px;height:21px}.ic.ic-close:before{content:'';position:absolute;top:10px;width:21px;height:1px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.ic.ic-close:after{content:'';position:absolute;top:10px;width:21px;height:1px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.bottombar{overflow:hidden;position:fixed;bottom:0;width:100%;background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,1) 90%);z-index:2}.bottombar a{color:#313131;text-decoration:none}.bottombar a:hover{color:white}.toolbar{width:100%;max-width:670px;margin-top:10px;margin-right:auto;margin-left:auto;margin-bottom:15px;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.toolbar .toolbarbtn{width:45px;height:45px;border-radius:50%;background-color:#3c3c3c;color:rgba(255,255,255,1);text-align:center;font-size:3.5em;position:relative;left:53%;margin-left:-36px;z-index:1;margin-bottom:21px;border:3px solid rgba(255,255,255,0.8)}@media only screen and (min-width:498px){.toolbar .toolbarbtn{width:60px;height:60px;left:51%;margin-bottom:15px}}.toolbar .toolbarbtn:hover{cursor:pointer;background-color:rgba(0,0,0,0.7)}.toolbar .toolbarbtn,.toolbar.icons{-webkit-transition:-webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);transition:all 1s cubic-bezier(.87,-.41,.19,1.44)}.toolbar .toolbarbtn .status:after{font-family:"FontAwesome";content:"\f24d";font-size:22px;top:9px;position:absolute;left:9px}.toolbar .toolbarbtn .control:after{font-family:"FontAwesome";content:"\f011";font-size:22px;top:9px;position:absolute;left:10px}.toolbar .toolbarbtn .event:after{font-family:"FontAwesome";content:"\f071";font-size:22px;top:7px;position:absolute;left:9px}.toolbar .toolbarbtn .device:after{font-family:"FontAwesome";content:"\f085";font-size:20px;top:9px;position:absolute;left:9px}.toolbar .toolbarbtn .pattern:after{font-family:"FontAwesome";content:"\f080";font-size:22px;top:9px;position:absolute;left:10px}.toolbar .toolbarbtn .close:after{font-family:"FontAwesome";content:"\f067";font-size:24px;top:9px;position:absolute;left:11px}.toolbar .toolbarbtn .floorplan:after{font-family:"FontAwesome";content:"\f279";font-size:22px;top:9px;position:absolute;left:9px}@media only screen and (min-width:498px){.toolbar .toolbarbtn .status:after,.toolbar .toolbarbtn .control:after{font-size:32px}.toolbar .toolbarbtn .status:after{top:11px;left:12px}.toolbar .toolbarbtn .control:after{top:12px;left:13px}.toolbar .toolbarbtn .event:after{top:11px;left:13px;font-size:30px}.toolbar .toolbarbtn .device:after{font-size:26px;top:14px;left:13px}.toolbar .toolbarbtn .pattern:after{top:12px;left:13px}.toolbar .toolbarbtn .close:after{font-size:40px}.toolbar .toolbarbtn .floorplan:after{top:14px;left:14px;font-size:27px}}.toolbar .toolbarbtn.active{-webkit-transform:rotate(45deg);transform:rotate(45deg);left:60px}.toolbar .icons{width:0;overflow:hidden;height:36px;list-style:none;padding:10px 10px 40px 40px;background-color:rgba(255,255,255,0.4);box-shadow:1px 1px 1px 1px rgba(255,255,255,0.3);margin:-71px 0 0 45%;border-radius:2em;padding-bottom:38px;-webkit-transition:-webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);transition:all 1s cubic-bezier(.87,-.41,.19,1.44);opacity:0}.toolbar .icons.open{width:90%;margin:-68px 0 0 7%;<!-- margin:-68px 0 -20px 50px;-->overflow:hidden;-webkit-transition:-webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);transition:all 1s cubic-bezier(.87,-.41,.19,1.44);padding-left:60px;opacity:1}.toolbar .icons li{display:none;width:10%;color:#c2c2c2}.toolbar .icons.open li{width:20%;display:inline-block;font-size:24px}@media only screen and (min-width:498px){.toolbar .icons.open{width:80%;margin:-68px 0 0 5%;padding-left:100px}.toolbar .icons.open li{width:19%;display:inline-block;font-size:30px}}.toolbar .toolbaricon:hover{color:black;cursor:pointer}.lds-roller{display:inline-block;position:relative;width:64px;height:64px}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;margin:-3px 0 0 -3px}.lds-roller div:nth-child(1){animation-delay:-0.036s}.lds-roller div:nth-child(1):after{top:50px;left:50px}.lds-roller div:nth-child(2){animation-delay:-0.072s}.lds-roller div:nth-child(2):after{top:54px;left:45px}.lds-roller div:nth-child(3){animation-delay:-0.108s}.lds-roller div:nth-child(3):after{top:57px;left:39px}.lds-roller div:nth-child(4){animation-delay:-0.144s}.lds-roller div:nth-child(4):after{top:58px;left:32px}.lds-roller div:nth-child(5){animation-delay:-0.18s}.lds-roller div:nth-child(5):after{top:57px;left:25px}.lds-roller div:nth-child(6){animation-delay:-0.216s}.lds-roller div:nth-child(6):after{top:54px;left:19px}.lds-roller div:nth-child(7){animation-delay:-0.252s}.lds-roller div:nth-child(7):after{top:50px;left:14px}.lds-roller div:nth-child(8){animation-delay:-0.288s}.lds-roller div:nth-child(8):after{top:45px;left:10px}@keyframes lds-roller{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}