@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,900); input.input_range_slider[type=range] { -webkit-appearance: none; width: 100%; margin: 8px 0; } input.input_range_slider[type=range]:focus { outline: none; } input.input_range_slider[type=range]::-webkit-slider-runnable-track { width: 100%; height: 10px; cursor: pointer; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #ffffff; border-radius: 0px; border: 0px solid #ffffff; } input.input_range_slider[type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); border: 0px solid #ffffff; height: 26px; width: 24px; border-radius: 0px; background: rgba(43, 199, 215, 0.93); cursor: pointer; -webkit-appearance: none; margin-top: -8px; } input.input_range_slider[type=range]:focus::-webkit-slider-runnable-track { background: #ffffff; } input.input_range_slider[type=range]::-moz-range-track { width: 100%; height: 10px; cursor: pointer; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #ffffff; border-radius: 0px; border: 0px solid #ffffff; } input.input_range_slider[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); border: 0px solid #ffffff; height: 26px; width: 24px; border-radius: 0px; background: rgba(43, 199, 215, 0.93); cursor: pointer; } input.input_range_slider[type=range]::-ms-track { width: 100%; height: 10px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input.input_range_slider[type=range]::-ms-fill-lower { background: #ffffff; border: 0px solid #ffffff; border-radius: 0px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input.input_range_slider[type=range]::-ms-fill-upper { background: #ffffff; border: 0px solid #ffffff; border-radius: 0px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input.input_range_slider[type=range]::-ms-thumb { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); border: 0px solid #ffffff; height: 26px; width: 24px; border-radius: 0px; background: rgba(43, 199, 215, 0.93); cursor: pointer; height: 10px; } input.input_range_slider[type=range]:focus::-ms-fill-lower { background: #ffffff; } input.input_range_slider[type=range]:focus::-ms-fill-upper { background: #ffffff; } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html, body { width: 100%; font-size: 16px; font-size: 1em; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { color: #20C7D7; } .clear { display: table; position: relative; clear: both; } article:after { content: ''; display: table; width: 100%; clear: both; } .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail { display: none; } /* _______________________ */ .toolTip { width: 200px; position: absolute; top: 0; left: 0; font-size: 80%; z-index: 999; cursor: pointer !important; } .toolTip p, .toolTip h3 { margin-bottom: 0; color: #fff; } .toolTip svg { position: absolute; left: 10px; top: 0; bottom: 0; margin: auto; fill: #20C7D7; } .tooltip-inner { width: 100%; padding: 1em; padding-left: 60px; position: relative; animation: popIn .5s; background-color: #20C7D7; } @-webkit-keyframes popIn { 0% { opacity: 0; transform: scale(0.5); } 80% { opacity: 1; transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes popIn { 0% { opacity: 0; transform: scale(0.5); } 80% { opacity: 1; transform: scale(1.1); } 100% { transform: scale(1); } } /* _______________________ */ .loadIconStart { position: absolute; width: 100px; height: 100px; top: initial; bottom: 75px; left: 0; right: 0; margin: auto; z-index: 1; transform-style: preserve-3d; animation: rotateplane 3s infinite ease-in-out; transition: all 2s; } .loadIconStart img { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .loadIconStart.hidden { display: none; } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0) rotateY(0); } 25% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } 75% { transform: perspective(120px) rotateX(-180deg) rotateY(-0.1deg); } 100% { transform: perspective(120px) rotateX(0deg) rotateY(0.1deg); } } /* _______________________ */ .loadingHolder { width: 100%; height: 5px; top: 50px; position: absolute; z-index: 9999; transition: transform .5s,opacity .5s; } .loadingHolder.remove { transform: translateX(100%); opacity: 0; } .loadingInner { width: 0; height: 5px; background: #20C7D7; position: relative; } .loadingInner:before { content: ''; display: block; width: 5px; height: 5px; box-shadow: 0 0 .5em .25em #fff; position: absolute; right: 0; background: #fff; border-radius: 50%; } button#explore { position: absolute; bottom: 100px; width: 200px; height: 50px; background: #20C7D7; z-index: 4; border: 0; font-size: 1.3em; color: #fff; font-weight: 100; left: 0; right: 0; margin: auto; transition: all .25s; } button#explore:hover { background: #117688; } .overlay-open button#explore, button#explore.remove { bottom: -100px; } @keyframes slideIn { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } .stats { z-index: 999999; position: absolute !important; } canvas.surveillanceRenderer, canvas.surveillanceRenderer2 { position: relative; } canvas#trailer_canvas { width: 320px; height: 180px; position: absolute; top: 0; right: 0; left: initial; display: none; } div#box { position: absolute; z-index: 9999999; width: 50px; height: 50px; background: red; top: 0; left: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { background: #fff; overflow: hidden; } body, p, button, h1, h2, h3, h4 { font-family: 'Roboto Condensed', sans-serif; } input, button { cursor: pointer; } h1, h2, h3, h4 { font-weight: 300; } label { font-size: 80%; } .table { display: table; width: 100%; } .cell { display: table-cell; padding: 2px; text-align: center; } .row img { width: 100%; } .main_header { width: 100%; height: 100%; width: 100%; padding-right: 350px; padding-bottom: 50px; position: relative; background: rgba(0, 0, 0, 0.8); overflow: hidden; z-index: -2; } header[data-devicespeed="slow"] .curveRenderer { display: none; } div.interactive_scene { position: absolute; top: 0; width: 100%; height: 100%; left: 0; } div.interactive_scene:hover { cursor: all-scroll; } .main_slide_wrapper { width: 100%; max-width: 350px; margin: auto; height: 100%; position: relative; padding: 0 50px; } nav#main_slide_navi { width: 100%; height: 50px; bottom: 0; top: initial; z-index: 9999999; background: #fff; transform: translateY(100%); box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.25); } .main_slide_nav_inner { width: 100%; position: relative; top: 50%; z-index: 999; transform: translateY(-50%) translateX(10px); } .main_slide_nav_inner .btn-ico { width: 5%; height: 10px; border-radius: 50px; border: 0; background: #2BC7D7; margin-right: 3%; position: relative; } .main_slide_nav_inner .btn-ico:after { content: ''; display: block; width: 25px; height: 2px; background: #20C7D7; top: 0; bottom: 0; margin: auto; position: absolute; left: 100%; } .main_slide_nav_inner .btn-ico:last-child:after { content: none; } .no-touchevents .main_slide_nav_inner .btn-ico:hover span { transform: translateY(0%); opacity: 1; } button#prev-scene, button#next-scene { background-color: #fff; } #tut_center { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; background: #20C7D7 !important; transition-duration: .5s; color: #fff; display: block; width: 100%; height: 100%; } #tut_center.ready { transition: transform .5s !important; transform: translateY(-100%); } #tut_center.startTutCenter .tut { opacity: 1; } #tut_center aside { position: absolute; z-index: 4; width: 100%; height: 50px; } aside.border[id="tut_center-control"] .slidr-control.up, aside.border[id="tut_center-control"] .slidr-control.down { display: none; } aside[id*="-control"] .slidr-control.left, aside[id*="-control"] .slidr-control.right { width: 50px !important; height: 50px !important; bottom: 0 !important; top: initial !important; z-index: 9; } aside[id="tut_center-control"] .slidr-control.right::before, aside[id="tut_center-control"] .slidr-control.right::after, aside[id="tut_center-control"] .slidr-control.left::before, aside[id="tut_center-control"] .slidr-control.left::after { width: 13px !important; height: 3px !important; background: #20C7D7; content: ""; position: absolute; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; right: 0px !important; left: 0px !important; top: 0 !important; bottom: 0 !important; margin: auto !important; border-width: 0 !important; border-style: solid; border-color: transparent; transform-style: preserve-3d; } aside[id="tut_center-control"] .slidr-control.right::before { transform: translateY(-4px) rotate(45deg) !important; } aside[id="tut_center-control"] .slidr-control.right::after { transform: translateY(4px) rotate(-45deg) !important; } aside[id="tut_center-control"] .slidr-control.left::before { transform: translateY(4px) rotate(45deg) !important; } aside[id="tut_center-control"] .slidr-control.left::after { transform: translateY(-4px) rotate(-45deg) !important; } /** When the page is completly loaded */ #tut_center.enter aside[id="tut_center-control"] .slidr-control.right::before, #tut_center.enter aside[id="tut_center-control"] .slidr-control.right::after, #tut_center.enter aside[id="tut_center-control"] .slidr-control.left::before, #tut_center.enter aside[id="tut_center-control"] .slidr-control.left::after { background: #fff; } /** */ .tut { width: 100%; height: 100%; top: 0; margin: auto; left: 0; right: 0; } .tut-content { position: relative; width: 80%; top: 50%; margin: auto; max-width: 800px; transform: translateY(-50%); } .tut-content h1 { font-size: 2.9em; font-weight: 800; width: 60%; line-height: 1.1em; transition-duration: 0.5s; } .tut-content p { font-size: 1.5em; font-weight: 100; transition-duration: 0.5s; } .csstransforms3d .tut:nth-child(even) .tut-content h1 { transform: translateX(-50%); opacity: 0; } .csstransforms3d .tut:nth-child(even) .tut-content p { transform: translateX(50%); opacity: 0; } .csstransforms3d .tut.activeSlide:nth-child(even) .tut-content h1 { transform: translateX(0%); opacity: 1; } .csstransforms3d .tut.activeSlide:nth-child(even) .tut-content p { transform: translateX(0%); opacity: 1; } .csstransforms3d .tut:nth-child(odd) .tut-content h1 { transform: translateY(-100%); opacity: 0; } .csstransforms3d .tut:nth-child(odd) .tut-content p { transform: translateY(100%); opacity: 0; } .csstransforms3d .tut.activeSlide:nth-child(odd) .tut-content h1 { transform: translateY(0%); opacity: 1; } .csstransforms3d .tut.activeSlide:nth-child(odd) .tut-content p { transform: translateY(0%); opacity: 1; } /** */ .bg_image:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #20C7D7; opacity: .8; } .bg_image img { min-width: 100%; min-height: 100%; width: auto; height: auto; max-width: initial; max-height: initial; top: -100%; left: -100%; right: -100%; bottom: -100%; margin: auto; position: absolute; opacity: 0; transition-duration: .25s; } .bg_image img.img-loaded { opacity: 1; } .startTutCenter .bg_image:after { background: rgba(0, 0, 0, 0.45); opacity: 1; } .slidr-control button.slidrButton { width: 50px; height: 50px; border: 0; background: transparent; text-indent: -999px; overflow: hidden; } button#start_scene { background: transparent; border: 0; min-width: 200px; box-shadow: 0 0 0 1px #fff; padding: 10px 20px; color: #fff; font-size: 20px; border-radius: 3px; margin: 40px auto; display: block; font-weight: 100; position: relative; } button#start_scene:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background: #fff; background: rgba(255, 255, 255, 0.6); } button#start_scene .explore { display: none; } button#start_scene[data-loaded='loaded-1']:before { width: 99%; } button#start_scene[data-loaded='loaded-2']:before { width: 98%; } button#start_scene[data-loaded='loaded-3']:before { width: 97%; } button#start_scene[data-loaded='loaded-4']:before { width: 96%; } button#start_scene[data-loaded='loaded-5']:before { width: 95%; } button#start_scene[data-loaded='loaded-6']:before { width: 94%; } button#start_scene[data-loaded='loaded-7']:before { width: 93%; } button#start_scene[data-loaded='loaded-8']:before { width: 92%; } button#start_scene[data-loaded='loaded-9']:before { width: 91%; } button#start_scene[data-loaded='loaded-10']:before { width: 90%; } button#start_scene[data-loaded='loaded-11']:before { width: 89%; } button#start_scene[data-loaded='loaded-12']:before { width: 88%; } button#start_scene[data-loaded='loaded-13']:before { width: 87%; } button#start_scene[data-loaded='loaded-14']:before { width: 86%; } button#start_scene[data-loaded='loaded-15']:before { width: 85%; } button#start_scene[data-loaded='loaded-16']:before { width: 84%; } button#start_scene[data-loaded='loaded-17']:before { width: 83%; } button#start_scene[data-loaded='loaded-18']:before { width: 82%; } button#start_scene[data-loaded='loaded-19']:before { width: 81%; } button#start_scene[data-loaded='loaded-20']:before { width: 80%; } button#start_scene[data-loaded='loaded-21']:before { width: 79%; } button#start_scene[data-loaded='loaded-22']:before { width: 78%; } button#start_scene[data-loaded='loaded-23']:before { width: 77%; } button#start_scene[data-loaded='loaded-24']:before { width: 76%; } button#start_scene[data-loaded='loaded-25']:before { width: 75%; } button#start_scene[data-loaded='loaded-26']:before { width: 74%; } button#start_scene[data-loaded='loaded-27']:before { width: 73%; } button#start_scene[data-loaded='loaded-28']:before { width: 72%; } button#start_scene[data-loaded='loaded-29']:before { width: 71%; } button#start_scene[data-loaded='loaded-30']:before { width: 70%; } button#start_scene[data-loaded='loaded-31']:before { width: 69%; } button#start_scene[data-loaded='loaded-32']:before { width: 68%; } button#start_scene[data-loaded='loaded-33']:before { width: 67%; } button#start_scene[data-loaded='loaded-34']:before { width: 66%; } button#start_scene[data-loaded='loaded-35']:before { width: 65%; } button#start_scene[data-loaded='loaded-36']:before { width: 64%; } button#start_scene[data-loaded='loaded-37']:before { width: 63%; } button#start_scene[data-loaded='loaded-38']:before { width: 62%; } button#start_scene[data-loaded='loaded-39']:before { width: 61%; } button#start_scene[data-loaded='loaded-40']:before { width: 60%; } button#start_scene[data-loaded='loaded-41']:before { width: 59%; } button#start_scene[data-loaded='loaded-42']:before { width: 58%; } button#start_scene[data-loaded='loaded-43']:before { width: 57%; } button#start_scene[data-loaded='loaded-44']:before { width: 56%; } button#start_scene[data-loaded='loaded-45']:before { width: 55%; } button#start_scene[data-loaded='loaded-46']:before { width: 54%; } button#start_scene[data-loaded='loaded-47']:before { width: 53%; } button#start_scene[data-loaded='loaded-48']:before { width: 52%; } button#start_scene[data-loaded='loaded-49']:before { width: 51%; } button#start_scene[data-loaded='loaded-50']:before { width: 50%; } button#start_scene[data-loaded='loaded-51']:before { width: 49%; } button#start_scene[data-loaded='loaded-52']:before { width: 48%; } button#start_scene[data-loaded='loaded-53']:before { width: 47%; } button#start_scene[data-loaded='loaded-54']:before { width: 46%; } button#start_scene[data-loaded='loaded-55']:before { width: 45%; } button#start_scene[data-loaded='loaded-56']:before { width: 44%; } button#start_scene[data-loaded='loaded-57']:before { width: 43%; } button#start_scene[data-loaded='loaded-58']:before { width: 42%; } button#start_scene[data-loaded='loaded-59']:before { width: 41%; } button#start_scene[data-loaded='loaded-60']:before { width: 40%; } button#start_scene[data-loaded='loaded-61']:before { width: 39%; } button#start_scene[data-loaded='loaded-62']:before { width: 38%; } button#start_scene[data-loaded='loaded-63']:before { width: 37%; } button#start_scene[data-loaded='loaded-64']:before { width: 36%; } button#start_scene[data-loaded='loaded-65']:before { width: 35%; } button#start_scene[data-loaded='loaded-66']:before { width: 34%; } button#start_scene[data-loaded='loaded-67']:before { width: 33%; } button#start_scene[data-loaded='loaded-68']:before { width: 32%; } button#start_scene[data-loaded='loaded-69']:before { width: 31%; } button#start_scene[data-loaded='loaded-70']:before { width: 30%; } button#start_scene[data-loaded='loaded-71']:before { width: 29%; } button#start_scene[data-loaded='loaded-72']:before { width: 28%; } button#start_scene[data-loaded='loaded-73']:before { width: 27%; } button#start_scene[data-loaded='loaded-74']:before { width: 26%; } button#start_scene[data-loaded='loaded-75']:before { width: 25%; } button#start_scene[data-loaded='loaded-76']:before { width: 24%; } button#start_scene[data-loaded='loaded-77']:before { width: 23%; } button#start_scene[data-loaded='loaded-78']:before { width: 22%; } button#start_scene[data-loaded='loaded-79']:before { width: 21%; } button#start_scene[data-loaded='loaded-80']:before { width: 20%; } button#start_scene[data-loaded='loaded-81']:before { width: 19%; } button#start_scene[data-loaded='loaded-82']:before { width: 18%; } button#start_scene[data-loaded='loaded-83']:before { width: 17%; } button#start_scene[data-loaded='loaded-84']:before { width: 16%; } button#start_scene[data-loaded='loaded-85']:before { width: 15%; } button#start_scene[data-loaded='loaded-86']:before { width: 14%; } button#start_scene[data-loaded='loaded-87']:before { width: 13%; } button#start_scene[data-loaded='loaded-88']:before { width: 12%; } button#start_scene[data-loaded='loaded-89']:before { width: 11%; } button#start_scene[data-loaded='loaded-90']:before { width: 10%; } button#start_scene[data-loaded='loaded-91']:before { width: 9%; } button#start_scene[data-loaded='loaded-92']:before { width: 8%; } button#start_scene[data-loaded='loaded-93']:before { width: 7%; } button#start_scene[data-loaded='loaded-94']:before { width: 6%; } button#start_scene[data-loaded='loaded-95']:before { width: 5%; } button#start_scene[data-loaded='loaded-96']:before { width: 4%; } button#start_scene[data-loaded='loaded-97']:before { width: 3%; } button#start_scene[data-loaded='loaded-98']:before { width: 2%; } button#start_scene[data-loaded='loaded-99']:before { width: 1%; } button#start_scene[data-loaded='loaded-100']:before { width: 0%; } button#start_scene[data-loaded="loaded-100"] .explore { display: inline-block; } .no-touchevents button#start_scene:hover { box-shadow: 0 0 0 2px #20C7D7; color: #fff; background-color: #20C7D7; } #vr, button#toggleControls { position: absolute; width: 50px; height: 50px; left: 10px; top: 10px; z-index: 999999999999; padding: 5px; } .main_nav { z-index: 99999999; } .main_nav h1 { background: url(logo_white.png); width: 250px; height: 100px; text-indent: -99999px; background-repeat: no-repeat; background-size: 100%; left: 20px; display: inline-block; position: absolute; top: 0; bottom: 0; margin: auto; background-position: center center; } .main_nav .nav_list a { display: inline-block; padding: 0 20px; line-height: 100px; text-decoration: none; text-transform: uppercase; color: #9d9d9d; font-size: 90%; } .main_nav .nav_list a.active { color: #000; } .nav_wrapper { width: 100%; position: relative; height: 100%; padding: 0 50px; } .main_nav .nav_list { right: 0; position: absolute; display: inline-block; width: initial; } .nav_list { position: relative; width: 300px; height: 100%; margin: auto; } .nav_list .nav_info, .nav_list .nav_info_detail { display: block; position: absolute; vertical-align: top; } .nav_list .nav_info_detail { bottom: 0; background: #fff; padding: 10px; z-index: 9999; display: none; } a.ico.small { text-indent: -9999px; min-width: 80px; position: relative; } a.ico.small:before { content: ''; display: block; width: 40px; height: 40px; background: url(search.png); position: absolute; top: 0; bottom: 0; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: 20px 20px; } canvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .ui { bottom: 0px; width: 100%; height: 50px; top: inherit; padding-left: 80px; margin: auto; left: 0; right: 0; z-index: 999999; position: absolute; background: rgba(255, 255, 255, 0.4); } .ui:after { content: ''; display: block; width: 100%; position: absolute; background: rgba(0, 0, 0, 0.1); height: 100%; z-index: -1; top: 100px; } .ui.open .nav_info { transform: translateY(-80px); } .ui_link { width: 100%; height: 100%; padding: 50px 0; z-index: 99999; text-decoration: none; overflow: scroll; overflow-x: hidden; position: absolute; top: 0; transition-duration: 0.5s; } .ui_link h2 { margin-bottom: 5px; text-transform: uppercase; color: #20C7D7; font-size: 17px; } .ui_link.closed { opacity: 0; transform: translateX(100%); transition-duration: 0.5s; } div#ui_toggle { width: 50px; height: 50px; border: 0; z-index: 999; background: #2BC7D7; left: -50px; top: 150px; position: absolute; } .ui_switch { position: relative; vertical-align: middle; margin-right: 5px; width: 60px; height: 30px; cursor: pointer; } .ui_switch:before { content: ''; display: block; width: 50px; position: absolute; background: #666; height: 20px; top: 0; bottom: 0; margin: auto; border-radius: 25px; transition-duration: .25s; box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.5); } .ui_switch:after { content: ''; display: block; position: absolute; left: 5px; top: 0; bottom: 0; margin: auto; width: 12px; height: 12px; background: #fff; transition-duration: .25s; border-radius: 50%; } .ui_switch:checked:before { background: #20C7D7; } .ui_switch:checked:after { transform: translateX(30px); } nav.environment-nav { position: absolute; bottom: 0; z-index: 2; width: 100%; height: 50px; } nav.environment-nav button#next-scene, nav.environment-nav button#prev-scene { border: 0; width: 50px; height: 50px; position: absolute; text-indent: -9999px; overflow: hidden; } nav.environment-nav button#next-scene svg, nav.environment-nav button#prev-scene svg { width: 25px; height: 25px; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } nav.environment-nav button#next-scene svg path, nav.environment-nav button#prev-scene svg path { fill: transparent; } nav.environment-nav button#next-scene span, nav.environment-nav button#prev-scene span { text-indent: -9999px; display: block; display: none; overflow: hidden; } nav.environment-nav #prev-scene { left: 0; } nav.environment-nav #next-scene { right: 0; } .hue-field { position: absolute; } .dg.ac { z-index: 999999 !important; } .cssRenderer, .curveRenderer, .WebGLRenderer { position: absolute; top: 0; left: 0; z-index: 9; max-width: 100%; max-height: 100%; width: 100%; height: 100%; } canvas.curveRenderer { z-index: 99999; } .temperatur_on_screen { width: 90px; height: 90px; position: absolute; top: 60px; z-index: 99; left: 10px; } .temperatur_on_screen:before { content: ''; display: block; position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%; } .temperatur_on_screen:before { background-image: url(../assets/icon_images/temperatur_icon.png); } .temperatur_on_screen_degree { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%; z-index: 999; background-image: url(../assets/icon_images/temperatur_icon_triangle.png); } p.temperatur_on_screen_inner { display: block; color: #fff; z-index: 999; position: absolute; text-align: center; bottom: 0; width: 100%; } .temperatur_on_screen_image { width: 40px; height: 30px; position: absolute; top: 30px; left: 0; right: 0; margin: auto; z-index: 9999; background-size: 100% auto; background-repeat: no-repeat; } div[data-icon="sun"] .temperatur_on_screen_image { background-image: url("../static/ico/png/sun.png"); } div[data-icon="rain"] .temperatur_on_screen_image { background-image: url("../static/ico/png/rain.png"); } div[data-icon="snow"] .temperatur_on_screen_image { background-image: url("../static/ico/png/snow.png"); } .temperatur_on_screen[data-temp="-95"]:after { transform: rotate(-95deg); } .temperatur_on_screen[data-temp="-94"]:after { transform: rotate(-94deg); } .temperatur_on_screen[data-temp="-93"]:after { transform: rotate(-93deg); } .temperatur_on_screen[data-temp="-92"]:after { transform: rotate(-92deg); } .temperatur_on_screen[data-temp="-91"]:after { transform: rotate(-91deg); } .temperatur_on_screen[data-temp="-90"]:after { transform: rotate(-90deg); } .temperatur_on_screen[data-temp="-89"]:after { transform: rotate(-89deg); } .temperatur_on_screen[data-temp="-88"]:after { transform: rotate(-88deg); } .temperatur_on_screen[data-temp="-87"]:after { transform: rotate(-87deg); } .temperatur_on_screen[data-temp="-86"]:after { transform: rotate(-86deg); } .temperatur_on_screen[data-temp="-85"]:after { transform: rotate(-85deg); } .temperatur_on_screen[data-temp="-84"]:after { transform: rotate(-84deg); } .temperatur_on_screen[data-temp="-83"]:after { transform: rotate(-83deg); } .temperatur_on_screen[data-temp="-82"]:after { transform: rotate(-82deg); } .temperatur_on_screen[data-temp="-81"]:after { transform: rotate(-81deg); } .temperatur_on_screen[data-temp="-80"]:after { transform: rotate(-80deg); } .temperatur_on_screen[data-temp="-79"]:after { transform: rotate(-79deg); } .temperatur_on_screen[data-temp="-78"]:after { transform: rotate(-78deg); } .temperatur_on_screen[data-temp="-77"]:after { transform: rotate(-77deg); } .temperatur_on_screen[data-temp="-76"]:after { transform: rotate(-76deg); } .temperatur_on_screen[data-temp="-75"]:after { transform: rotate(-75deg); } .temperatur_on_screen[data-temp="-74"]:after { transform: rotate(-74deg); } .temperatur_on_screen[data-temp="-73"]:after { transform: rotate(-73deg); } .temperatur_on_screen[data-temp="-72"]:after { transform: rotate(-72deg); } .temperatur_on_screen[data-temp="-71"]:after { transform: rotate(-71deg); } .temperatur_on_screen[data-temp="-70"]:after { transform: rotate(-70deg); } .temperatur_on_screen[data-temp="-69"]:after { transform: rotate(-69deg); } .temperatur_on_screen[data-temp="-68"]:after { transform: rotate(-68deg); } .temperatur_on_screen[data-temp="-67"]:after { transform: rotate(-67deg); } .temperatur_on_screen[data-temp="-66"]:after { transform: rotate(-66deg); } .temperatur_on_screen[data-temp="-65"]:after { transform: rotate(-65deg); } .temperatur_on_screen[data-temp="-64"]:after { transform: rotate(-64deg); } .temperatur_on_screen[data-temp="-63"]:after { transform: rotate(-63deg); } .temperatur_on_screen[data-temp="-62"]:after { transform: rotate(-62deg); } .temperatur_on_screen[data-temp="-61"]:after { transform: rotate(-61deg); } .temperatur_on_screen[data-temp="-60"]:after { transform: rotate(-60deg); } .temperatur_on_screen[data-temp="-59"]:after { transform: rotate(-59deg); } .temperatur_on_screen[data-temp="-58"]:after { transform: rotate(-58deg); } .temperatur_on_screen[data-temp="-57"]:after { transform: rotate(-57deg); } .temperatur_on_screen[data-temp="-56"]:after { transform: rotate(-56deg); } .temperatur_on_screen[data-temp="-55"]:after { transform: rotate(-55deg); } .temperatur_on_screen[data-temp="-54"]:after { transform: rotate(-54deg); } .temperatur_on_screen[data-temp="-53"]:after { transform: rotate(-53deg); } .temperatur_on_screen[data-temp="-52"]:after { transform: rotate(-52deg); } .temperatur_on_screen[data-temp="-51"]:after { transform: rotate(-51deg); } .temperatur_on_screen[data-temp="-50"]:after { transform: rotate(-50deg); } .temperatur_on_screen[data-temp="-49"]:after { transform: rotate(-49deg); } .temperatur_on_screen[data-temp="-48"]:after { transform: rotate(-48deg); } .temperatur_on_screen[data-temp="-47"]:after { transform: rotate(-47deg); } .temperatur_on_screen[data-temp="-46"]:after { transform: rotate(-46deg); } .temperatur_on_screen[data-temp="-45"]:after { transform: rotate(-45deg); } .temperatur_on_screen[data-temp="-44"]:after { transform: rotate(-44deg); } .temperatur_on_screen[data-temp="-43"]:after { transform: rotate(-43deg); } .temperatur_on_screen[data-temp="-42"]:after { transform: rotate(-42deg); } .temperatur_on_screen[data-temp="-41"]:after { transform: rotate(-41deg); } .temperatur_on_screen[data-temp="-40"]:after { transform: rotate(-40deg); } .temperatur_on_screen[data-temp="-39"]:after { transform: rotate(-39deg); } .temperatur_on_screen[data-temp="-38"]:after { transform: rotate(-38deg); } .temperatur_on_screen[data-temp="-37"]:after { transform: rotate(-37deg); } .temperatur_on_screen[data-temp="-36"]:after { transform: rotate(-36deg); } .temperatur_on_screen[data-temp="-35"]:after { transform: rotate(-35deg); } .temperatur_on_screen[data-temp="-34"]:after { transform: rotate(-34deg); } .temperatur_on_screen[data-temp="-33"]:after { transform: rotate(-33deg); } .temperatur_on_screen[data-temp="-32"]:after { transform: rotate(-32deg); } .temperatur_on_screen[data-temp="-31"]:after { transform: rotate(-31deg); } .temperatur_on_screen[data-temp="-30"]:after { transform: rotate(-30deg); } .temperatur_on_screen[data-temp="-29"]:after { transform: rotate(-29deg); } .temperatur_on_screen[data-temp="-28"]:after { transform: rotate(-28deg); } .temperatur_on_screen[data-temp="-27"]:after { transform: rotate(-27deg); } .temperatur_on_screen[data-temp="-26"]:after { transform: rotate(-26deg); } .temperatur_on_screen[data-temp="-25"]:after { transform: rotate(-25deg); } .temperatur_on_screen[data-temp="-24"]:after { transform: rotate(-24deg); } .temperatur_on_screen[data-temp="-23"]:after { transform: rotate(-23deg); } .temperatur_on_screen[data-temp="-22"]:after { transform: rotate(-22deg); } .temperatur_on_screen[data-temp="-21"]:after { transform: rotate(-21deg); } .temperatur_on_screen[data-temp="-20"]:after { transform: rotate(-20deg); } .temperatur_on_screen[data-temp="-19"]:after { transform: rotate(-19deg); } .temperatur_on_screen[data-temp="-18"]:after { transform: rotate(-18deg); } .temperatur_on_screen[data-temp="-17"]:after { transform: rotate(-17deg); } .temperatur_on_screen[data-temp="-16"]:after { transform: rotate(-16deg); } .temperatur_on_screen[data-temp="-15"]:after { transform: rotate(-15deg); } .temperatur_on_screen[data-temp="-14"]:after { transform: rotate(-14deg); } .temperatur_on_screen[data-temp="-13"]:after { transform: rotate(-13deg); } .temperatur_on_screen[data-temp="-12"]:after { transform: rotate(-12deg); } .temperatur_on_screen[data-temp="-11"]:after { transform: rotate(-11deg); } .temperatur_on_screen[data-temp="-10"]:after { transform: rotate(-10deg); } .temperatur_on_screen[data-temp="-9"]:after { transform: rotate(-9deg); } .temperatur_on_screen[data-temp="-8"]:after { transform: rotate(-8deg); } .temperatur_on_screen[data-temp="-7"]:after { transform: rotate(-7deg); } .temperatur_on_screen[data-temp="-6"]:after { transform: rotate(-6deg); } .temperatur_on_screen[data-temp="-5"]:after { transform: rotate(-5deg); } .temperatur_on_screen[data-temp="-4"]:after { transform: rotate(-4deg); } .temperatur_on_screen[data-temp="-3"]:after { transform: rotate(-3deg); } .temperatur_on_screen[data-temp="-2"]:after { transform: rotate(-2deg); } .temperatur_on_screen[data-temp="-1"]:after { transform: rotate(-1deg); } .temperatur_on_screen[data-temp="0"]:after { transform: rotate(0deg); } .temperatur_on_screen[data-temp="1"]:after { transform: rotate(1deg); } .temperatur_on_screen[data-temp="2"]:after { transform: rotate(2deg); } .temperatur_on_screen[data-temp="3"]:after { transform: rotate(3deg); } .temperatur_on_screen[data-temp="4"]:after { transform: rotate(4deg); } .temperatur_on_screen[data-temp="5"]:after { transform: rotate(5deg); } .temperatur_on_screen[data-temp="6"]:after { transform: rotate(6deg); } .temperatur_on_screen[data-temp="7"]:after { transform: rotate(7deg); } .temperatur_on_screen[data-temp="8"]:after { transform: rotate(8deg); } .temperatur_on_screen[data-temp="9"]:after { transform: rotate(9deg); } .temperatur_on_screen[data-temp="10"]:after { transform: rotate(10deg); } .temperatur_on_screen[data-temp="11"]:after { transform: rotate(11deg); } .temperatur_on_screen[data-temp="12"]:after { transform: rotate(12deg); } .temperatur_on_screen[data-temp="13"]:after { transform: rotate(13deg); } .temperatur_on_screen[data-temp="14"]:after { transform: rotate(14deg); } .temperatur_on_screen[data-temp="15"]:after { transform: rotate(15deg); } .temperatur_on_screen[data-temp="16"]:after { transform: rotate(16deg); } .temperatur_on_screen[data-temp="17"]:after { transform: rotate(17deg); } .temperatur_on_screen[data-temp="18"]:after { transform: rotate(18deg); } .temperatur_on_screen[data-temp="19"]:after { transform: rotate(19deg); } .temperatur_on_screen[data-temp="20"]:after { transform: rotate(20deg); } .temperatur_on_screen[data-temp="21"]:after { transform: rotate(21deg); } .temperatur_on_screen[data-temp="22"]:after { transform: rotate(22deg); } .temperatur_on_screen[data-temp="23"]:after { transform: rotate(23deg); } .temperatur_on_screen[data-temp="24"]:after { transform: rotate(24deg); } .temperatur_on_screen[data-temp="25"]:after { transform: rotate(25deg); } .temperatur_on_screen[data-temp="26"]:after { transform: rotate(26deg); } .temperatur_on_screen[data-temp="27"]:after { transform: rotate(27deg); } .temperatur_on_screen[data-temp="28"]:after { transform: rotate(28deg); } .temperatur_on_screen[data-temp="29"]:after { transform: rotate(29deg); } .temperatur_on_screen[data-temp="30"]:after { transform: rotate(30deg); } .temperatur_on_screen[data-temp="31"]:after { transform: rotate(31deg); } .temperatur_on_screen[data-temp="32"]:after { transform: rotate(32deg); } .temperatur_on_screen[data-temp="33"]:after { transform: rotate(33deg); } .temperatur_on_screen[data-temp="34"]:after { transform: rotate(34deg); } .temperatur_on_screen[data-temp="35"]:after { transform: rotate(35deg); } .temperatur_on_screen[data-temp="36"]:after { transform: rotate(36deg); } .temperatur_on_screen[data-temp="37"]:after { transform: rotate(37deg); } .temperatur_on_screen[data-temp="38"]:after { transform: rotate(38deg); } .temperatur_on_screen[data-temp="39"]:after { transform: rotate(39deg); } .temperatur_on_screen[data-temp="40"]:after { transform: rotate(40deg); } .temperatur_on_screen[data-temp="41"]:after { transform: rotate(41deg); } .temperatur_on_screen[data-temp="42"]:after { transform: rotate(42deg); } .temperatur_on_screen[data-temp="43"]:after { transform: rotate(43deg); } .temperatur_on_screen[data-temp="44"]:after { transform: rotate(44deg); } .temperatur_on_screen[data-temp="45"]:after { transform: rotate(45deg); } .temperatur_on_screen[data-temp="46"]:after { transform: rotate(46deg); } .temperatur_on_screen[data-temp="47"]:after { transform: rotate(47deg); } .temperatur_on_screen[data-temp="48"]:after { transform: rotate(48deg); } .temperatur_on_screen[data-temp="49"]:after { transform: rotate(49deg); } .temperatur_on_screen[data-temp="50"]:after { transform: rotate(50deg); } .temperatur_on_screen[data-temp="51"]:after { transform: rotate(51deg); } .temperatur_on_screen[data-temp="52"]:after { transform: rotate(52deg); } .temperatur_on_screen[data-temp="53"]:after { transform: rotate(53deg); } .temperatur_on_screen[data-temp="54"]:after { transform: rotate(54deg); } .temperatur_on_screen[data-temp="55"]:after { transform: rotate(55deg); } .temperatur_on_screen[data-temp="56"]:after { transform: rotate(56deg); } .temperatur_on_screen[data-temp="57"]:after { transform: rotate(57deg); } .temperatur_on_screen[data-temp="58"]:after { transform: rotate(58deg); } .temperatur_on_screen[data-temp="59"]:after { transform: rotate(59deg); } .temperatur_on_screen[data-temp="60"]:after { transform: rotate(60deg); } .temperatur_on_screen[data-temp="61"]:after { transform: rotate(61deg); } .temperatur_on_screen[data-temp="62"]:after { transform: rotate(62deg); } .temperatur_on_screen[data-temp="63"]:after { transform: rotate(63deg); } .temperatur_on_screen[data-temp="64"]:after { transform: rotate(64deg); } .temperatur_on_screen[data-temp="65"]:after { transform: rotate(65deg); } .temperatur_on_screen[data-temp="66"]:after { transform: rotate(66deg); } .temperatur_on_screen[data-temp="67"]:after { transform: rotate(67deg); } .temperatur_on_screen[data-temp="68"]:after { transform: rotate(68deg); } .temperatur_on_screen[data-temp="69"]:after { transform: rotate(69deg); } .temperatur_on_screen[data-temp="70"]:after { transform: rotate(70deg); } .temperatur_on_screen[data-temp="71"]:after { transform: rotate(71deg); } .temperatur_on_screen[data-temp="72"]:after { transform: rotate(72deg); } .temperatur_on_screen[data-temp="73"]:after { transform: rotate(73deg); } .temperatur_on_screen[data-temp="74"]:after { transform: rotate(74deg); } .temperatur_on_screen[data-temp="75"]:after { transform: rotate(75deg); } .temperatur_on_screen[data-temp="76"]:after { transform: rotate(76deg); } .temperatur_on_screen[data-temp="77"]:after { transform: rotate(77deg); } .temperatur_on_screen[data-temp="78"]:after { transform: rotate(78deg); } .temperatur_on_screen[data-temp="79"]:after { transform: rotate(79deg); } .temperatur_on_screen[data-temp="80"]:after { transform: rotate(80deg); } .temperatur_on_screen[data-temp="81"]:after { transform: rotate(81deg); } .temperatur_on_screen[data-temp="82"]:after { transform: rotate(82deg); } .temperatur_on_screen[data-temp="83"]:after { transform: rotate(83deg); } .temperatur_on_screen[data-temp="84"]:after { transform: rotate(84deg); } .temperatur_on_screen[data-temp="85"]:after { transform: rotate(85deg); } .temperatur_on_screen[data-temp="86"]:after { transform: rotate(86deg); } .temperatur_on_screen[data-temp="87"]:after { transform: rotate(87deg); } .temperatur_on_screen[data-temp="88"]:after { transform: rotate(88deg); } .temperatur_on_screen[data-temp="89"]:after { transform: rotate(89deg); } .temperatur_on_screen[data-temp="90"]:after { transform: rotate(90deg); } .temperatur_on_screen[data-temp="91"]:after { transform: rotate(91deg); } .temperatur_on_screen[data-temp="92"]:after { transform: rotate(92deg); } .temperatur_on_screen[data-temp="93"]:after { transform: rotate(93deg); } .temperatur_on_screen[data-temp="94"]:after { transform: rotate(94deg); } div#drop_zone { position: absolute; width: 250px; z-index: 999; background: rgba(0, 0, 0, 0.6); padding: 2em; right: 1.5em; bottom: 1.5em; color: #eee; font-family: sans-serif; font-size: 80%; border: 1px dashed #333; } svg#progress { position: absolute; height: 200px; width: 200px; right: 0; left: 0; top: 0; bottom: 0; margin: auto; } .loader { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 999999; background: rgba(135, 135, 135, 0.9); transition-duration: .5s; } .loader.complete { opacity: 0; z-index: 0; } .loader.complete p { color: #36c4d7; animation: scaledown .5s 0s 1 ease-in-out forwards; } .loader.complete svg { animation-name: scaledown; } .loader p { text-align: center; color: #fff; font-size: 2rem; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: 2rem; } .loader_inner { position: absolute; width: 200px; height: 200px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } #loader_indicator { height: 3px; width: 0; background: #fff; z-index: 999; position: absolute; left: 2px; top: 0; bottom: 0; margin: auto; } .loader_inner svg { animation: scaleup .5s 0s 1 ease-in-out forwards; } .loader_inner svg circle { stroke: #36c4d7; fill: none; } .loader_inner svg circle:first-child { z-index: -1; } .loader_inner svg circle:last-of-type { stroke: #fff; transition: stroke-dashoffset .5s ease-out; } .loader_inner svg circle.styled { animation: rotateful 2s infinite; } @keyframes rotatefull { 0% { transform: translate3d(-50%, 0, 0) rotate(0); } 20% { transform: translate3d(-50%, 0, 0) rotate(72deg); } 40% { transform: translate3d(-50%, 0, 0) rotate(144deg); } 60% { transform: translate3d(-50%, 0, 0) rotate(216deg); } 80% { transform: translate3d(-50%, 0, 0) rotate(288deg); } 99%, 100% { transform: translate3d(-50%, 0, 0) rotate(360deg); } } @keyframes scaleup { 0% { transform: scale(0.1); opacity: 0; } 20% { opacity: 1; } 72% { transform: scale(1.1); } 84% { transform: scale(0.95); } 98% { transform: scale(1); } 99% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes scaledown { 0% { transform: scale(1); opacity: 1; } 15% { transform: scale(1.2); } 60% { opacity: 1; } 99%, 100% { transform: scale(0.1); opacity: 0; } } main h1 { font-weight: 300; font-size: 2em; margin-bottom: 0.6em; } p { font-family: 'Roboto Condensed', sans-serif; font-size: 0.9em; font-weight: 300; } .smart_ui { position: absolute; bottom: 0px; z-index: 999999; margin: auto; width: 200px; height: 320px; left: 70px; padding: 62px 16px 0; transition-duration: .25s; transition-timing-function: ease-in-out; cursor: pointer; overflow: hidden; } .smart_ui svg, .smart_ui svg path, .smart_ui svg g path { fill: #fff; } .row button { border: 0; } .no-touchevents .popUp .smart_ui { animation: popUp 2s forwards; } @-webkit-keyframes popUp { 0% { transform: translateY(220px); } 20%, 80% { transform: translateY(0px); } 100% { transform: translateY(220px); } } @-moz-keyframes popUp { 0% { transform: translateY(220px); } 20%, 80% { transform: translateY(0px); } 100% { transform: translateY(220px); } } @-o-keyframes popUp { 0% { transform: translateY(220px); } 20%, 80% { transform: translateY(0px); } 100% { transform: translateY(220px); } } @keyframes popUp { 0% { transform: translateY(220px); } 20%, 80% { transform: translateY(0px); } 100% { transform: translateY(220px); } } .no-touchevents .smart_ui:hover, .no-touchevents .mouseOver .smart_ui { transform: translateY(0%); } .no-touchevents .smart_ui:hover .nav_controls, .no-touchevents .mouseOver .smart_ui .nav_controls { transform: translateY(0px); } .smart_ui.hover { transform: translateY(0px); } .smart_ui:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; background: url(iPhone.png); top: 0; left: 0; background-size: 100%; z-index: 999; } .smart_ui article { z-index: 9999; position: relative; } .smart_ui article .row { padding: 5px 8px; background: rgba(255, 255, 255, 0.3); color: #fff; } /* Slides */ .smart_ui article { transition-duration: .15s; transform: translateX(110%); position: absolute; top: 50px; width: 176px; height: 100%; left: 0; right: 0; margin: auto; color: #000; overflow: hidden; background: #20C7D7; transition: transform .2s; } .smart_ui #slide-home { opacity: 1; display: block; transform: translateX(0); padding-top: 10px; } .smart_ui.video #slide-video { display: block; transform: translateX(0); opacity: 1; } .smart_ui.audio #slide-audio { display: block; transform: translateX(0); opacity: 1; } .smart_ui.curtain #slide-curtain { display: block; transform: translateX(0); opacity: 1; } .smart_ui.garage #slide-garage { display: block; transform: translateX(0); opacity: 1; } .smart_ui.door #slide-door { display: block; transform: translateX(0); opacity: 1; } .smart_ui.surveillance #slide-surveillance { display: block; transform: translateX(0); opacity: 1; } .smart_ui.appliances #slide-appliances { display: block; transform: translateX(0); opacity: 1; } .smart_ui.lights #slide-lights { display: block; transform: translateX(0); opacity: 1; } .smart_ui.climate #slide-climate { display: block; transform: translateX(0); opacity: 1; } .smart_ui.irrigation #slide-irrigation { display: block; transform: translateX(0); opacity: 1; } /****************************************************** .Single Slide */ .cell { text-align: center; } .slide .btn { display: inline-block; width: 30%; height: 40px; border: 0; background: rgba(255, 255, 255, 0.8); vertical-align: middle; margin-right: 1%; } .slide header { padding-left: 45px; position: relative; background: #316F77; color: #fff; margin-bottom: 2px; box-shadow: 0 0 9px rgba(0, 0, 0, 0.5); } .slide header h1 { line-height: 50px; margin: 0; } .slide header:before { content: ''; display: block; width: 40px; height: 40px; position: absolute; background-size: 260px; background-image: url("../static/ico/png/icon_grid2.png"); top: 0; left: 5px; background-position: -141px -194px; bottom: 0; margin: auto; } /****************************************************** Lights */ .row { position: relative; min-height: 50px; margin-bottom: 5px; color: #000; } .row span, .row button { color: #000; } label.quad { width: 40px; height: 40px; display: block; font-size: 60%; position: absolute; top: 0; bottom: 0; margin: auto; text-align: center; } label.quad span { top: 50%; position: relative; transform: translateY(-50%); display: block; padding: 0 5px; } #slide-lights input[type="range"] { width: 95px; display: block; left: 55px; margin: auto; top: 17px; position: absolute; } /****************************************************** Curtain */ #slide-curtain .cell { padding: 0 4px; } button.btn-label { width: 36px; height: 36px; position: absolute; display: block; top: 0; border: 0; z-index: 9; background-color: transparent; background-size: 260px; background-image: url("../static/ico/png/icon_grid2.png"); } button#curtain_close_label.btn-label { left: 0; background-position: -6px -197px; } button#curtain_open_label.btn-label { right: 0; background-position: -217px -197px; } label[for="curtain_range"] { display: block; position: absolute; width: 92%; height: 40px; text-indent: -9999px; overflow: hidden; } input#curtain_range { line-height: 40px; margin: auto; top: 15px; position: relative; width: 80px; display: inherit; } /****************************************************** Checkboxes */ input#audio_snyc:checked + label[for="audio_snyc"]:before { background: #20C7D7; } input#audio_snyc:checked + label[for="audio_snyc"]:after { right: 0; } label[for="audio_snyc"] span { display: none !important; } input#garage_check:checked + label[for="garage_check"]:before, input#door_check:checked + label[for="door_check"]:before, input#appliances_check:checked + label[for="appliances_check"]:before, input#irrigation_check:checked + label[for="irrigation_check"]:before, input#climate_check:checked + label[for="climate_check"]:before { background: #20C7D7; } input#garage_check:checked + label[for="garage_check"]:after, input#door_check:checked + label[for="door_check"]:after, input#appliances_check:checked + label[for="appliances_check"]:after, input#irrigation_check:checked + label[for="irrigation_check"]:after, input#climate_check:checked + label[for="climate_check"]:after { left: 35px; } label[for="audio_snyc"], label[for="garage_check"], label[for="door_check"], label[for="appliances_check"], label[for="irrigation_check"], label[for="climate_check"] { width: 100%; height: 30px; display: block; position: relative; } label[for="audio_snyc"] span, label[for="garage_check"] span, label[for="door_check"] span, label[for="appliances_check"] span, label[for="irrigation_check"] span, label[for="climate_check"] span { display: block; position: absolute; bottom: 0; font-size: 10px; text-align: center; width: 100%; white-space: nowrap; } label[for="audio_snyc"]:before, label[for="audio_snyc"]:after, label[for="garage_check"]:before, label[for="garage_check"]:after, label[for="door_check"]:before, label[for="door_check"]:after, label[for="appliances_check"]:before, label[for="appliances_check"]:after, label[for="irrigation_check"]:before, label[for="irrigation_check"]:after, label[for="climate_check"]:before, label[for="climate_check"]:after { content: ''; display: block; position: absolute; margin: auto; border-radius: 50px; } label[for="audio_snyc"]:before, label[for="garage_check"]:before, label[for="door_check"]:before, label[for="appliances_check"]:before, label[for="irrigation_check"]:before, label[for="climate_check"]:before { width: 80%; height: 10px; background: #aaa; top: 14px; left: 0; right: 0; } label[for="audio_snyc"]:after, label[for="garage_check"]:after, label[for="door_check"]:after, label[for="appliances_check"]:after, label[for="irrigation_check"]:after, label[for="climate_check"]:after { width: 25px; height: 25px; background: #fff; top: 6px; } input#garage_check, input#door_check, input#appliances_check, input#irrigation_check, input#climate_check { display: none; } label[for="garage_check"], label[for="door_check"], label[for="appliances_check"], label[for="irrigation_check"], label[for="climate_check"] { padding-left: 70px; right: initial; } label[for="garage_check"]:before, label[for="door_check"]:before, label[for="appliances_check"]:before, label[for="irrigation_check"]:before, label[for="climate_check"]:before { max-width: 60px; left: 0; right: initial; } label[for="garage_check"]:after, label[for="door_check"]:after, label[for="appliances_check"]:after, label[for="irrigation_check"]:after, label[for="climate_check"]:after { right: initial; left: 0; } /****************************************************** Surveillance */ canvas.surveillanceRenderer { width: 100% !important; height: auto !important; } .cam { margin: 20px auto 0 auto; color: #fff; } .cam h3 { font-size: 14px; margin-bottom: 3px; } /****************************************************** Audio */ #ui_audioCurrentFloor, #ui_audioCurrentFirst, #ui_audioCurrentSecond { display: none; z-index: 999999; cursor: pointer; } #ui_audioCurrentFloor:after, #ui_audioCurrentFirst:after, #ui_audioCurrentSecond:after { background-size: 273px; background-image: url("../static/ico/png/album_covers.png"); background-position: -225px 0; background-repeat: no-repeat; background-color: transparent; box-shadow: none; } #ui_audioCurrentFloor:before, #ui_audioCurrentFloor:after, #ui_audioCurrentFirst:before, #ui_audioCurrentFirst:after, #ui_audioCurrentSecond:before, #ui_audioCurrentSecond:after { transform: scale(1); border-radius: 0; cursor: pointer; } #ui_audioCurrentFloor.visible, #ui_audioCurrentFirst.visible, #ui_audioCurrentSecond.visible { display: block; opacity: 1; } .audio { /* Select Room */ } .audio .btn.pause { text-indent: -9999px; } .audio .btn.pause svg { display: block; left: 0; right: 0; width: 30px; height: 20px; margin: auto; top: 0; bottom: 0; } .audio.slide button.pause { background-position: 0px 0; } .audio .controller { position: relative; margin-bottom: 50px; width: 100%; } .audio .controller:after { content: ''; display: block; clear: both; } .audio .controller svg, .audio .controller svg path, .audio .controller svg g path { fill: #fff; } .audio .audio.syncer { position: relative; z-index: 999; height: 40px; display: block; margin-bottom: 5px; border-bottom: 1px solid #333; border-top: 1px solid #333; padding-top: 3px; } .audio #audio_snyc { display: none; } .audio .audio_sync_box { width: 55px; height: 40px; } .audio select#audio_room { width: 100px; height: 30px; background: #eee; text-indent: 0; font-size: 12px; color: #000; position: absolute; top: 0; right: 0; } .audio .select_room { position: absolute; left: 50px; top: 4px; width: 110px; } .audio .select_room label { font-size: 12px; } .audio .select_room label[for="audio_room"] { display: none; } .audio button.pause { position: absolute; width: 50px; height: 50px; background-size: auto 25px; right: 0; top: 0; bottom: 0; margin: auto; background: none; text-align: center; } .audio .teaser img { width: 35px; position: absolute; left: 0; display: inline-block; vertical-align: middle; top: 0; bottom: 0; margin: auto; } .audio .row:after { content: ''; display: table; clear: both; } .audio .row .btn { display: block; float: left; width: 33.3%; background-size: auto 38px; } .audio .row .btn.prev { background-position: -231px 0; } .audio .row .btn.play { background-position: -57px 0; } .audio .row .btn.play.playing { background-position: -287px 0; } .audio .row .btn.next { background-position: -173px 0; } .audio button { overflow: hidden; background: transparent; color: #fff; border: 0; display: inline-block; width: 120px; vertical-align: top; } .audio button span { display: block; text-align: left; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audio .teaser, .audio .teaser button { margin-bottom: 2px; } .audio .teaser button { position: relative; padding-left: 42px; height: 40px; width: 100%; background: rgba(255, 255, 255, 0.3); } .audio .artist { font-weight: bold; } .audio .title { font-style: italic; } .switch_trailer { width: 100%; text-align: left; background: rgba(255, 255, 255, 0.5); margin-bottom: 2px; } .isSubSlide .audio.syncer { display: block; } .isSubSlide .controller { transform: translateY(0); } div[data-album="daft_punk"]:after { background-position: -59px -1px !important; } div[data-album="dirty_south"]:after { background-position: -114px -1px !important; } div[data-album="capital_cities"]:after { background-position: 0px -1px !important; } div[data-album="sergio_mendes"]:after { background-position: -170px -1px !important; } div#ui_audio { left: -62px; } .hiddenOption { display: none; } /****************************************************** Irrigation */ #slide-irrigation .cell { padding: 0 4px; width: 33.3%; } /****************************************************** Video */ #slide-video .row img { width: 25px; margin-right: 10px; } #slide-video .teaser { position: relative; } .row.video, .row.controller { margin-top: 10px; text-align: center; } .row.video button { background: none; color: #fff; } .row.video button svg { stroke: #fff; } .row button svg { width: 25px; height: 25px; display: block; margin: auto; margin-bottom: 0.35em; } .audio .btn, .video .btn { margin: 0; width: 50px; height: 50px; border: 0; background: transparent; background-repeat: no-repeat; } .slide button.stop { background-position: 0 0; } .slide button.pause { background-position: -140px 0; } .slide button.play { background-position: -70px 0; } .slide button.play.playing { background-position: -349px 0; } .slide button.next { background-position: -210px 0; } .slide button.prev { background-position: -280px 0; } /******************************************************/ div#climate_temp { display: block; position: absolute; right: 0; left: 0; margin: auto; font-size: 36px; text-align: center; top: 37px; color: #F7971F; } .outside_temp { margin-top: 20px; } #climate_outside_temp { position: relative; display: inline-block; } #climate_outside_temp:before { content: ''; display: block; width: 40px; height: 30px; background-size: 100% auto; position: relative; background-repeat: no-repeat; top: 0; float: left; margin-right: 10px; } #climate_outside_temp[data-weather="sun"]:before { background-image: url("../static/ico/png/sun.png"); } #climate_outside_temp[data-weather="rain"]:before { background-image: url("../static/ico/png/rain.png"); } #climate_outside_temp[data-weather="snow"]:before { background-image: url("../static/ico/png/snow.png"); } /****************************************************** ________________________________ */ .nav_controls { height: 50px; position: absolute; width: 100%; left: 0; bottom: 0; } .slide-inner { height: 100%; max-height: 250px; position: relative; overflow: scroll; } .slide-inner:after { content: ''; display: block; clear: both; } #slide-home .slide-inner button { display: block; width: 50%; height: 50px; float: left; border: 0; padding-top: 35px; background: transparent; color: #aaa; overflow: hidden; position: relative; } .btn-ico span { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; color: #333; } .smart_ui .btn-ico svg { max-width: 25px; max-height: 25px; display: block; margin: auto; bottom: 16px; position: absolute; left: 0; right: 0; } .smart_ui .btn-ico { background-color: transparent; } .main_slide_nav_inner .btn-ico.activeScene { background: #fff; box-shadow: inset 0 0 0 2px #2BC7D7; } .ui_element { width: 50px; height: 50px; display: block; position: absolute; z-index: 999991; cursor: pointer; opacity: 1; transition-duration: 0s; transition-timing-function: 'ease-in'; } .ui_element:after, .ui_element:before { content: ''; display: block; width: 50px; height: 50px; top: 0; left: 0; bottom: 0; margin: auto; cursor: pointer; position: absolute; transition-timing-function: ease-in-out; transition-duration: .15s; } .ui_element:after { background-size: 260px; background-image: url("../static/ico/png/icon_grid2.png"); background-color: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } .ui_element:before { border-radius: 50%; } .ui_element.pending:before { background-color: rgba(255, 255, 255, 0.6); background-image: url("../static/ico/png/loading_ico.gif"); background-repeat: no-repeat; background-position: center center; /* background-color: red; */ z-index: 999; } .ui_element.closed:after, .ui_element.closed:before { transform: scale(0.3); } .ui_element.closed svg { width: 80px; } .ui_element.closed p { display: none; } .no-touchevents .ui_element:hover { opacity: 1; } .no-touchevents .ui_element.closed:hover:before, .no-touchevents .ui_element.closed:hover:after { transform: scale(1); } #ui_video:after, #btn-video:after { background-position: -141px -63px; } #ui_curtain:after, #btn-curtain:after { background-position: 1px -190px; } #ui_audio:after, #btn-audio:after { background-position: -211px -126px; } #ui_garage:after, #btn-garage:after { background-position: -210px 0px; } #ui_irrigation:after, #btn-irrigation:after { background-position: -1px -1px; } #ui_door:after, #btn-door:after { background-position: -1px -65px; } #ui_surveillance:after, #btn-surveillance:after { background-position: -68px -124px; } #ui_appliances:after, #btn-appliances:after { background-position: -72px -63px; } #ui_lights:after, #btn-lights:after { background-position: -211px -64px; } div#ui_climate:after, #btn-climate:after { background-position: -140px 0px; } img.ui_ico { position: absolute; left: 20px; width: 30px; top: 0; bottom: 0; margin: auto; transition-duration: .25s; } .ui_element svg, .ui_element img { position: absolute; width: 70px; left: -35px; top: 0; bottom: 0; margin: auto; } .ready .cssRenderer, .ready .WebGLRenderer { z-index: 99 !important; } .ui_content { padding-left: 50px; position: relative; } .ui_content img { position: absolute; width: 40px; top: 0; left: 0px; margin: auto; bottom: 0; } .ui_info { position: relative; width: 100%; min-height: 100%; color: #fff; padding: 10px; opacity: 0; display: none; transition-duration: .25s; padding: 90px 30px; border-top-width: 5px; border-right-width: 5px; border-left-width: 5px; } .ui_info h1 { text-transform: uppercase; font-weight: 800; font-size: 100%; } .ui_info.open { opacity: 1; z-index: 99999; display: block; } .mobile { display: none; } .mobile_menu { position: absolute; width: 50px; height: 50px; border: 0; background: url(menu.png); right: 30px; bottom: 0; top: 0; margin: auto; background-size: 100%; background-repeat: no-repeat; background-position: center center; text-indent: -99999px; } /* Notification */ .notificationCenter { position: absolute; top: 0; left: 0; z-index: 999999; width: 100%; padding-top: 50px; } .notificationCenter:before { content: ''; display: block; width: 30px; height: 20px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 28px; left: 174px; transition-duration: .25s; background-image: url("../static/ico/png/sun.png"); } .notificationCenter[data-weather="sun"]:before { background-image: url("../static/ico/png/sun.png"); } .notificationCenter[data-weather="rain"]:before { background-image: url("../static/ico/png/rain.png"); } .notificationCenter[data-weather="snow"]:before { background-image: url("../static/ico/png/snow.png"); } .notification { background-color: #000; background-color: rgba(0, 0, 0, 0.6); position: absolute; padding: 10px; font-size: 1em; width: 100%; color: #fff; font-weight: lighter; opacity: 0; left: 0; display: block; transition-duration: .25s; transform: translateY(-100%); } .notification h3 { font-weight: lighter; } .notification h3, .notification p { margin-bottom: 0; } .notification:after { content: ''; display: table; clear: both; } .notification img { left: 12px; width: 45px; } /* Notification Center */ /* We create `$selector` */ div[data-scene=climate][data-weather="snow"] div[data-weather="snow"][data-scene=climate] { transform: translateY(0%); opacity: 1; } div[data-scene=climate][data-weather="rain"] div[data-weather="rain"][data-scene=climate] { transform: translateY(0%); opacity: 1; } div[data-scene=climate][data-weather="sun"] div[data-weather="sun"][data-scene=climate] { transform: translateY(0%); opacity: 1; } div[data-scene=climate][data-weather="sun"] div[data-weather="all"][data-scene=climate], div[data-scene=climate][data-weather="rain"] div[data-weather="all"][data-scene=climate], div[data-scene=climate][data-weather="snow"] div[data-weather="all"][data-scene=climate] { transform: translateY(0%); opacity: 1; } div[data-scene=climate][data-action="open"] div[data-action="open"][data-scene=climate] { transform: translateY(0%); opacity: 1; } div[data-scene=climate][data-action="close"] div[data-action="close"][data-scene=climate] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=irrigation][data-weather="snow"] div[data-weather="snow"][data-scene=irrigation] { transform: translateY(0%); opacity: 1; } div[data-scene=irrigation][data-weather="rain"] div[data-weather="rain"][data-scene=irrigation] { transform: translateY(0%); opacity: 1; } div[data-scene=irrigation][data-weather="sun"] div[data-weather="sun"][data-scene=irrigation] { transform: translateY(0%); opacity: 1; } div[data-scene=irrigation][data-weather="sun"] div[data-weather="all"][data-scene=irrigation], div[data-scene=irrigation][data-weather="rain"] div[data-weather="all"][data-scene=irrigation], div[data-scene=irrigation][data-weather="snow"] div[data-weather="all"][data-scene=irrigation] { transform: translateY(0%); opacity: 1; } div[data-scene=irrigation][data-action="open"] div[data-action="open"][data-scene=irrigation] { transform: translateY(0%); opacity: 1; } div[data-scene=irrigation][data-action="close"] div[data-action="close"][data-scene=irrigation] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=video][data-weather="snow"] div[data-weather="snow"][data-scene=video] { transform: translateY(0%); opacity: 1; } div[data-scene=video][data-weather="rain"] div[data-weather="rain"][data-scene=video] { transform: translateY(0%); opacity: 1; } div[data-scene=video][data-weather="sun"] div[data-weather="sun"][data-scene=video] { transform: translateY(0%); opacity: 1; } div[data-scene=video][data-weather="sun"] div[data-weather="all"][data-scene=video], div[data-scene=video][data-weather="rain"] div[data-weather="all"][data-scene=video], div[data-scene=video][data-weather="snow"] div[data-weather="all"][data-scene=video] { transform: translateY(0%); opacity: 1; } div[data-scene=video][data-action="open"] div[data-action="open"][data-scene=video] { transform: translateY(0%); opacity: 1; } div[data-scene=video][data-action="close"] div[data-action="close"][data-scene=video] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=audio][data-weather="snow"] div[data-weather="snow"][data-scene=audio] { transform: translateY(0%); opacity: 1; } div[data-scene=audio][data-weather="rain"] div[data-weather="rain"][data-scene=audio] { transform: translateY(0%); opacity: 1; } div[data-scene=audio][data-weather="sun"] div[data-weather="sun"][data-scene=audio] { transform: translateY(0%); opacity: 1; } div[data-scene=audio][data-weather="sun"] div[data-weather="all"][data-scene=audio], div[data-scene=audio][data-weather="rain"] div[data-weather="all"][data-scene=audio], div[data-scene=audio][data-weather="snow"] div[data-weather="all"][data-scene=audio] { transform: translateY(0%); opacity: 1; } div[data-scene=audio][data-action="open"] div[data-action="open"][data-scene=audio] { transform: translateY(0%); opacity: 1; } div[data-scene=audio][data-action="close"] div[data-action="close"][data-scene=audio] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=lights][data-weather="snow"] div[data-weather="snow"][data-scene=lights] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-weather="rain"] div[data-weather="rain"][data-scene=lights] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-weather="sun"] div[data-weather="sun"][data-scene=lights] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-weather="sun"] div[data-weather="all"][data-scene=lights], div[data-scene=lights][data-weather="rain"] div[data-weather="all"][data-scene=lights], div[data-scene=lights][data-weather="snow"] div[data-weather="all"][data-scene=lights] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-action="open"] div[data-action="open"][data-scene=lights] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-action="close"] div[data-action="close"][data-scene=lights] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=before][data-weather="snow"] div[data-weather="snow"][data-scene=before] { transform: translateY(0%); opacity: 1; } div[data-scene=before][data-weather="rain"] div[data-weather="rain"][data-scene=before] { transform: translateY(0%); opacity: 1; } div[data-scene=before][data-weather="sun"] div[data-weather="sun"][data-scene=before] { transform: translateY(0%); opacity: 1; } div[data-scene=before][data-weather="sun"] div[data-weather="all"][data-scene=before], div[data-scene=before][data-weather="rain"] div[data-weather="all"][data-scene=before], div[data-scene=before][data-weather="snow"] div[data-weather="all"][data-scene=before] { transform: translateY(0%); opacity: 1; } div[data-scene=before][data-action="open"] div[data-action="open"][data-scene=before] { transform: translateY(0%); opacity: 1; } div[data-scene=before][data-action="close"] div[data-action="close"][data-scene=before] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=shades][data-weather="snow"] div[data-weather="snow"][data-scene=shades] { transform: translateY(0%); opacity: 1; } div[data-scene=shades][data-weather="rain"] div[data-weather="rain"][data-scene=shades] { transform: translateY(0%); opacity: 1; } div[data-scene=shades][data-weather="sun"] div[data-weather="sun"][data-scene=shades] { transform: translateY(0%); opacity: 1; } div[data-scene=shades][data-weather="sun"] div[data-weather="all"][data-scene=shades], div[data-scene=shades][data-weather="rain"] div[data-weather="all"][data-scene=shades], div[data-scene=shades][data-weather="snow"] div[data-weather="all"][data-scene=shades] { transform: translateY(0%); opacity: 1; } div[data-scene=shades][data-action="open"] div[data-action="open"][data-scene=shades] { transform: translateY(0%); opacity: 1; } div[data-scene=shades][data-action="close"] div[data-action="close"][data-scene=shades] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=pool_spa][data-weather="snow"] div[data-weather="snow"][data-scene=pool_spa] { transform: translateY(0%); opacity: 1; } div[data-scene=pool_spa][data-weather="rain"] div[data-weather="rain"][data-scene=pool_spa] { transform: translateY(0%); opacity: 1; } div[data-scene=pool_spa][data-weather="sun"] div[data-weather="sun"][data-scene=pool_spa] { transform: translateY(0%); opacity: 1; } div[data-scene=pool_spa][data-weather="sun"] div[data-weather="all"][data-scene=pool_spa], div[data-scene=pool_spa][data-weather="rain"] div[data-weather="all"][data-scene=pool_spa], div[data-scene=pool_spa][data-weather="snow"] div[data-weather="all"][data-scene=pool_spa] { transform: translateY(0%); opacity: 1; } div[data-scene=pool_spa][data-action="open"] div[data-action="open"][data-scene=pool_spa] { transform: translateY(0%); opacity: 1; } div[data-scene=pool_spa][data-action="close"] div[data-action="close"][data-scene=pool_spa] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=pool][data-weather="snow"] div[data-weather="snow"][data-scene=pool] { transform: translateY(0%); opacity: 1; } div[data-scene=pool][data-weather="rain"] div[data-weather="rain"][data-scene=pool] { transform: translateY(0%); opacity: 1; } div[data-scene=pool][data-weather="sun"] div[data-weather="sun"][data-scene=pool] { transform: translateY(0%); opacity: 1; } div[data-scene=pool][data-weather="sun"] div[data-weather="all"][data-scene=pool], div[data-scene=pool][data-weather="rain"] div[data-weather="all"][data-scene=pool], div[data-scene=pool][data-weather="snow"] div[data-weather="all"][data-scene=pool] { transform: translateY(0%); opacity: 1; } div[data-scene=pool][data-action="open"] div[data-action="open"][data-scene=pool] { transform: translateY(0%); opacity: 1; } div[data-scene=pool][data-action="close"] div[data-action="close"][data-scene=pool] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=garage][data-weather="snow"] div[data-weather="snow"][data-scene=garage] { transform: translateY(0%); opacity: 1; } div[data-scene=garage][data-weather="rain"] div[data-weather="rain"][data-scene=garage] { transform: translateY(0%); opacity: 1; } div[data-scene=garage][data-weather="sun"] div[data-weather="sun"][data-scene=garage] { transform: translateY(0%); opacity: 1; } div[data-scene=garage][data-weather="sun"] div[data-weather="all"][data-scene=garage], div[data-scene=garage][data-weather="rain"] div[data-weather="all"][data-scene=garage], div[data-scene=garage][data-weather="snow"] div[data-weather="all"][data-scene=garage] { transform: translateY(0%); opacity: 1; } div[data-scene=garage][data-action="open"] div[data-action="open"][data-scene=garage] { transform: translateY(0%); opacity: 1; } div[data-scene=garage][data-action="close"] div[data-action="close"][data-scene=garage] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=appliances][data-weather="snow"] div[data-weather="snow"][data-scene=appliances] { transform: translateY(0%); opacity: 1; } div[data-scene=appliances][data-weather="rain"] div[data-weather="rain"][data-scene=appliances] { transform: translateY(0%); opacity: 1; } div[data-scene=appliances][data-weather="sun"] div[data-weather="sun"][data-scene=appliances] { transform: translateY(0%); opacity: 1; } div[data-scene=appliances][data-weather="sun"] div[data-weather="all"][data-scene=appliances], div[data-scene=appliances][data-weather="rain"] div[data-weather="all"][data-scene=appliances], div[data-scene=appliances][data-weather="snow"] div[data-weather="all"][data-scene=appliances] { transform: translateY(0%); opacity: 1; } div[data-scene=appliances][data-action="open"] div[data-action="open"][data-scene=appliances] { transform: translateY(0%); opacity: 1; } div[data-scene=appliances][data-action="close"] div[data-action="close"][data-scene=appliances] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=surveillance][data-weather="snow"] div[data-weather="snow"][data-scene=surveillance] { transform: translateY(0%); opacity: 1; } div[data-scene=surveillance][data-weather="rain"] div[data-weather="rain"][data-scene=surveillance] { transform: translateY(0%); opacity: 1; } div[data-scene=surveillance][data-weather="sun"] div[data-weather="sun"][data-scene=surveillance] { transform: translateY(0%); opacity: 1; } div[data-scene=surveillance][data-weather="sun"] div[data-weather="all"][data-scene=surveillance], div[data-scene=surveillance][data-weather="rain"] div[data-weather="all"][data-scene=surveillance], div[data-scene=surveillance][data-weather="snow"] div[data-weather="all"][data-scene=surveillance] { transform: translateY(0%); opacity: 1; } div[data-scene=surveillance][data-action="open"] div[data-action="open"][data-scene=surveillance] { transform: translateY(0%); opacity: 1; } div[data-scene=surveillance][data-action="close"] div[data-action="close"][data-scene=surveillance] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=door][data-weather="snow"] div[data-weather="snow"][data-scene=door] { transform: translateY(0%); opacity: 1; } div[data-scene=door][data-weather="rain"] div[data-weather="rain"][data-scene=door] { transform: translateY(0%); opacity: 1; } div[data-scene=door][data-weather="sun"] div[data-weather="sun"][data-scene=door] { transform: translateY(0%); opacity: 1; } div[data-scene=door][data-weather="sun"] div[data-weather="all"][data-scene=door], div[data-scene=door][data-weather="rain"] div[data-weather="all"][data-scene=door], div[data-scene=door][data-weather="snow"] div[data-weather="all"][data-scene=door] { transform: translateY(0%); opacity: 1; } div[data-scene=door][data-action="open"] div[data-action="open"][data-scene=door] { transform: translateY(0%); opacity: 1; } div[data-scene=door][data-action="close"] div[data-action="close"][data-scene=door] { transform: translateY(0%); opacity: 1; } /* We create `$selector` */ div[data-scene=curtain][data-weather="snow"] div[data-weather="snow"][data-scene=curtain] { transform: translateY(0%); opacity: 1; } div[data-scene=curtain][data-weather="rain"] div[data-weather="rain"][data-scene=curtain] { transform: translateY(0%); opacity: 1; } div[data-scene=curtain][data-weather="sun"] div[data-weather="sun"][data-scene=curtain] { transform: translateY(0%); opacity: 1; } div[data-scene=curtain][data-weather="sun"] div[data-weather="all"][data-scene=curtain], div[data-scene=curtain][data-weather="rain"] div[data-weather="all"][data-scene=curtain], div[data-scene=curtain][data-weather="snow"] div[data-weather="all"][data-scene=curtain] { transform: translateY(0%); opacity: 1; } div[data-scene=curtain][data-action="open"] div[data-action="open"][data-scene=curtain] { transform: translateY(0%); opacity: 1; } div[data-scene=curtain][data-action="close"] div[data-action="close"][data-scene=curtain] { transform: translateY(0%); opacity: 1; } aside[data-scene=climate] #ui_sidebar_climate { opacity: 1; transform: translateX(0); } aside[data-scene=irrigation] #ui_sidebar_irrigation { opacity: 1; transform: translateX(0); } aside[data-scene=video] #ui_sidebar_video { opacity: 1; transform: translateX(0); } aside[data-scene=audio] #ui_sidebar_audio { opacity: 1; transform: translateX(0); } aside[data-scene=lights] #ui_sidebar_lights { opacity: 1; transform: translateX(0); } aside[data-scene=before] #ui_sidebar_before { opacity: 1; transform: translateX(0); } aside[data-scene=shades] #ui_sidebar_shades { opacity: 1; transform: translateX(0); } aside[data-scene=pool_spa] #ui_sidebar_pool_spa { opacity: 1; transform: translateX(0); } aside[data-scene=pool] #ui_sidebar_pool { opacity: 1; transform: translateX(0); } aside[data-scene=garage] #ui_sidebar_garage { opacity: 1; transform: translateX(0); } aside[data-scene=appliances] #ui_sidebar_appliances { opacity: 1; transform: translateX(0); } aside[data-scene=surveillance] #ui_sidebar_surveillance { opacity: 1; transform: translateX(0); } aside[data-scene=door] #ui_sidebar_door { opacity: 1; transform: translateX(0); } aside[data-scene=curtain] #ui_sidebar_curtain { opacity: 1; transform: translateX(0); } /* Audio Specific Notification */ div[data-scene=audio][data-action=changeFloor] div[data-scene=audio][data-action=changeFloor] { transform: translateY(0%); opacity: 1; } div[data-scene=audio][data-action=changeAudioSong] div[data-scene=audio][data-action=changeAudioSong] { transform: translateY(0%); opacity: 1; } div[data-scene=audio][data-action=syncAudioSong] div[data-scene=audio][data-action=syncAudioSong] { transform: translateY(0%); opacity: 1; } div[data-scene=audio][data-action=asyncAudioSong] div[data-scene=audio][data-action=asyncAudioSong] { transform: translateY(0%); opacity: 1; } /* Light Specific Notification */ div[data-scene=lights][data-action=daySwitch] div[data-scene=lights][data-action=daySwitch] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-action=nightSwitch] div[data-scene=lights][data-action=nightSwitch] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-action=allLightsOn] div[data-scene=lights][data-action=allLightsOn] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-action=allLightsOff] div[data-scene=lights][data-action=allLightsOff] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-action=garageLightsOn] div[data-scene=lights][data-action=garageLightsOn] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-action=garageLightsOff] div[data-scene=lights][data-action=garageLightsOff] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-action=poolLightsOn] div[data-scene=lights][data-action=poolLightsOn] { transform: translateY(0%); opacity: 1; } div[data-scene=lights][data-action=poolLightsOff] div[data-scene=lights][data-action=poolLightsOff] { transform: translateY(0%); opacity: 1; } /* TV Specific Notification */ div[data-scene=video][data-action=switchTrailer] div[data-scene=video][data-action=switchTrailer] { transform: translateY(0%); opacity: 1; } div[data-scene=video][data-action=pause] div[data-scene=video][data-action=pause] { transform: translateY(0%); opacity: 1; } img.weather_ico { width: 60px; float: left; margin-right: 10px; } .notification_ico { width: 50px; margin-right: 10px; float: left; } /* Feature Gallery */ #features input { display: none; } .feature-gallery { width: 100%; height: 300px; position: static; } .feature-gallery-slide { width: 100%; height: 300px; background: #20C7D7; position: absolute; left: 0; overflow: hidden; } .feature-gallery img.img-loaded { height: 100%; max-width: initial; left: -100%; right: -100%; top: -100%; bottom: -100%; margin: auto; position: absolute; } .feature-gallery-capture { position: absolute; bottom: 0; padding: 10px 50px; width: 100%; color: #fff; text-align: center; font-weight: 300; } .feature-sidebar-content { padding: 0em 1.5em; margin-top: 50px; font-size: 110%; } body { margin: 0; background: #292929; background-image: url(main_bg.png); background-repeat: repeat; background-size: 256px; } a { text-decoration: none; } a:visited { text-decoration: none; } .no-touchevents a:hover { text-decoration: none; color: #20C7D7; } svg, svg path, svg g path { fill: #20C7D7; } .top-main-nav { width: 100%; height: 50px; top: 0; left: 0; position: absolute; background: #fff; z-index: 9; transform-style: preserve-3d; transform: translateZ(100px); } .top-main-nav .main-frame-nav-inner { top: 0; } .top-main-logo { width: 190px; height: 30px; position: absolute; top: 0; bottom: 0; margin: auto; left: 10px; display: block; transition: all 0.5s; } nav svg#top-logo { height: 25px; display: block; top: 4px; position: relative; } .top-main-nav-inner { position: absolute; right: 0; top: 0; width: 50px; height: 100%; background: #20C7D7; } .top-main-nav-burger { border: 0; background: transparent; display: block; width: 100%; height: 100%; text-indent: -9999px; } .top-main-nav-burger svg { fill: #fff; display: block; top: 0; position: absolute; bottom: 0; right: 0; left: 0; margin: auto; width: 60%; } .main-header { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #333; } .side-main-nav { position: absolute; width: 50px; height: calc(100% - 50px); background: #fff; right: 0; z-index: 2; top: 50px; } .side-main-nav button { width: 50px; height: 50px; border: 0; display: block; background: #fff; border-bottom: 1px solid #eee; } .side-main-nav button:first-child { border-top: 1px solid #eee; } .side-main-nav button span { text-indent: -999px; display: block; position: absolute; overflow: hidden; } .side-main-nav button.activeScene { background: #20C7D7; width: 100%; position: relative; color: #fff; } .side-main-nav button.activeScene svg { fill: #fff; } .side-main-nav button.activeScene svg path, .side-main-nav button.activeScene svg g path { fill: #fff; } .no-touchevents .side-main-nav button:hover { background: #20C7D7; } .no-touchevents .side-main-nav button:hover svg { fill: #fff; } .no-touchevents .side-main-nav button:hover svg path, .no-touchevents .side-main-nav button:hover svg g path { fill: #fff; } .no-touchevents .side-main-nav button:active { background: #038C9C; } .no-touchevents .side-main-nav button:active svg { fill: #fff; } .no-touchevents .side-main-nav button:active svg path, .no-touchevents .side-main-nav button:active svg g path { fill: #fff; } .side-main-nav nav { position: relative; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; padding-top: 50px; padding-bottom: 50px; } .side-main-nav svg { max-width: 20px; max-height: 20px; } /** Burger */ span.burger { display: block; width: 30px; height: 5px; background: #fff; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; transition: background 0.15s 0.5s; } span.burger:before, span.burger:after { content: ''; display: block; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; transform: rotate(0); transition-duration: 0.5s, 0.5s; transition-delay: 0.5s, 0s; } span.burger:before { top: -8px; transition-property: top,transform; } span.burger:after { bottom: -8px; transition-property: bottom,transform; } .overlay-open span.burger { background: transparent; transition: background .15s .15s; } .overlay-open span.burger:before { top: 0; transform: rotate(45deg); transition-delay: 0s, 0.5s; } .overlay-open span.burger:after { bottom: 0; transform: rotate(-45deg); transition-delay: 0s, 0.5s; } /** Main Frame nav */ .whole-page-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; perspective: 1500px; transform-style: preserve-3d; } .whole-page-perspective { overflow: hidden; transition: all 0.5s cubic-bezier(0.56, 0.42, 0.3, 0.94); transform-origin: 50% 50%; width: 100%; height: 100%; z-index: 2; transform: translateZ(0px) rotateY(0deg) scale(1) translateX(0%); } .open-menu .whole-page-perspective:before { content: ''; display: block; width: 100%; height: 100%; z-index: 999; position: absolute; } .whole-page-navi { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -5; } .whole-page-navi .main-frame-nav { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; transform-style: preserve-3d; z-index: -1; } .whole-page-navi .main-frame-nav:after { content: ''; display: table; width: 100%; clear: both; } .whole-page-navi .main-frame-nav-inner { position: relative; width: 40%; float: right; top: 50%; display: table; transform: translateX(100%) translateY(-50%) rotateY(-10deg); transition: all 0.5s cubic-bezier(0.56, 0.42, 0.3, 0.94); } /** Main Menu Link */ .main-frame-nav-inner a { display: block; padding: 1rem 0; transform: translateX(20%); opacity: 0; color: #fff; font-size: 120%; font-weight: 100; font-size: 1.6em; transition: all 0.25s cubic-bezier(0.56, 0.42, 0.3, 0.94); } .main-frame-nav-inner a:before { content: ''; display: block; width: 120%; height: 5px; background: #20C7D7; left: -20%; position: absolute; transform: translateX(100%); bottom: 0; opacity: 0; transition: all 0.5s cubic-bezier(0.45, 0.57, 0.11, 1.48); } .main-frame-nav-inner a:hover:before { opacity: 1; transform: translateX(0%); transition: all 0.5s cubic-bezier(0.56, 0.42, 0.3, 0.94); } .overlay-open .top-main-nav .top-main-logo { display: none; } .overlay-open .main-frame-nav-inner a:before { width: 100%; left: 0; transform: translateX(0) translateY(100%); } .overlay-open .main-frame-nav-inner a:hover:before { transform: translateX(0) translateY(0%); } .main-frame-nav-inner a:nth-child(1) { transition-delay: 0.4s; } .main-frame-nav-inner a:nth-child(2) { transition-delay: 0.55s; } .main-frame-nav-inner a:nth-child(3) { transition-delay: 0.7s; } .main-frame-nav-inner a:nth-child(4) { transition-delay: 0.85s; } .main-frame-nav-inner a:nth-child(5) { transition-delay: 1s; } .main-frame-nav-inner a:nth-child(6) { transition-delay: 1.15s; } .main-frame-nav-inner a:nth-child(7) { transition-delay: 1.3s; } .main-frame-nav-inner a:nth-child(8) { transition-delay: 1.45s; } .main-frame-nav-inner a:nth-child(9) { transition-delay: 1.6s; } /*** Overlay */ main.main-page-overlay { position: absolute; width: 100%; height: 100%; background: #fff; overflow-x: hidden; z-index: 4; opacity: 0; top: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; transform-style: preserve-3d; transition-duration: 0.5s; transform: translateY(-100%) translateZ(100px); } /*** Contact Page */ .whole-page-wrapper.contact svg#top-logo, .whole-page-wrapper.contact svg#top-logo path { fill: #fff; } .whole-page-wrapper.contact .top-main-nav { fill: #fff; } #page-contact { background: #20C7D7; } #page-contact svg { fill: #00bfd6; } #page-contact h1, #page-contact h2, #page-contact h3, #page-contact h4, #page-contact h5, #page-contact h6 { color: #fff; } /*** Overlay NAVI */ /** Overlay Header */ header.page-header { height: 150px; position: relative; text-align: center; } .page-header nav.main-frame-nav { position: relative; z-index: 999999999999; overflow: visible; top: 150px; } .page-header .top-main-logo { left: 0; right: 0; width: 50px; height: 50px; z-index: 1; } .page-header .main-frame-nav-inner { position: relative; width: 100%; text-align: center; } .page-header .main-frame-nav-inner a { color: #000; display: inline; position: relative; float: none; opacity: 1; padding: 8px 1em; font-size: 1.4em; transform: translateY(100%); opacity: 0; transition: transform 0.5s; } .contact .page-header .main-frame-nav-inner a { color: #fff; } .overlay-open .page-header .main-frame-nav-inner a { transform: translateY(0); opacity: 1; } .top-main-nav { overflow: hidden; } .top-main-nav .open-overlay { display: inline-block; padding: 0 1em; line-height: 50px; font-size: 1.3em; opacity: 0; transform: translateX(0%) translateY(-100%); margin-right: 2em; color: #000; font-weight: 300; } .overlay-open .top-main-nav { overflow: visible; background: transparent; } /** Overlay Header */ .top-main-nav .main-frame-nav .main-frame-nav-inner { float: none; width: 100%; transform: none; display: block; text-align: center; } .whole-page-wrapper.process .page-header a.main-frame-link-process, .whole-page-wrapper.how .page-header a.main-frame-link-how, .whole-page-wrapper.about .page-header a.main-frame-link-about, .whole-page-wrapper.contact .page-header a.main-frame-link-contact { color: #20C7D7; } .whole-page-wrapper.process .page-header a.main-frame-link-process:after, .whole-page-wrapper.how .page-header a.main-frame-link-how:after, .whole-page-wrapper.about .page-header a.main-frame-link-about:after, .whole-page-wrapper.contact .page-header a.main-frame-link-contact:after { content: ''; display: block; width: 100%; height: 5px; background: #20C7D7; bottom: 0; position: absolute; left: 0; right: 0; margin: auto; transform: translateY(0); } .whole-page-wrapper.contact .page-header a.main-frame-link-contact { color: #fff; } .whole-page-wrapper.contact .page-header a.main-frame-link-contact:after { background: #fff; } /** Contact specific */ .whole-page-wrapper.contact { color: #fff; } .whole-page-wrapper.contact .top-main-nav { background: transparent; } .whole-page-wrapper.contact .top-main-nav a.main-frame-link-contact { color: #fff; } .whole-page-wrapper.contact .top-main-nav a.main-frame-link-contact:after { background: #fff; } .input { margin-bottom: 2em; color: #fff; font-weight: 100; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0 50px #20C7D7 inset; -webkit-text-fill-color: #000; } input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px #20C7D7 inset; -webkit-text-fill-color: #000; } form input { width: 100%; border: 0; background: rgba(255, 255, 255, 0.15); border-bottom: 1px solid #fff; font-size: 1.3em; font-weight: 100; padding: 15px 20px; padding-bottom: 5px; padding-left: 5px; color: #fff; } .feature-holder .errorMsg { width: 99%; margin-bottom: 1em; display: table-caption; } span.errorMsg { display: block; font-size: 13px; background: #D04848; padding: 1em; font-weight: 300; line-height: 15px; } form input.error { box-shadow: inset 0 0 0 2px #D04848; background: #EF9D9D; } form button { width: 100%; background: #fff; font-size: 1.3em; font-weight: 100; padding: 10px; border: 0; color: #20C7D7; } div#errorMessagesHolder { position: absolute; top: 240px; width: 100px; height: 100px; background: #fff; margin: auto; left: 0; right: 0; box-shadow: 0 0 3em 0 rgba(0, 0, 0, 0.5); display: none; opacity: 0; transition: all 0.5s; } div#errorMessagesHolder h1, div#errorMessagesHolder h2, div#errorMessagesHolder h3, div#errorMessagesHolder h4 { color: #20C7D7 !important; } div#errorMessagesHolder img { width: 40px; height: 40px; display: block; margin: auto; top: 0; bottom: 0; left: 0; right: 0; position: absolute; opacity: 1; transition: all 0.5s; } .waitForResponse div#errorMessagesHolder { display: block; opacity: 1; } .successResponse div#errorMessagesHolder, .failureResponse div#errorMessagesHolder { display: block; opacity: 1; width: 80%; height: inherit; } .successResponse div#errorMessagesHolder img, .failureResponse div#errorMessagesHolder img { opacity: 0; } div#errorMessagesHolder .successMessage, div#errorMessagesHolder .errorMessage { color: #000; font-size: 2em; text-align: center; max-width: 50%; margin: auto; display: none; padding: 2em; } .successResponse .successMessage { display: block !important; } .failureResponse .errorMessage { display: block !important; } .waitForResponse div#closeEmail { opacity: 0; } div#closeEmail { position: absolute; top: 0; right: 0; width: 50px; height: 50px; opacity: 1; background: #20C7D7; } div#closeEmail svg { display: block; width: 30px; height: 30px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } /** Page Overlay */ .main-page-overlay.process #page-process, .main-page-overlay.how #page-how, .main-page-overlay.contact #page-contact, .main-page-overlay.about #page-about { transform: translateX(0%); opacity: 1; transition: transform .5s,opacity .5s; } .main-page-overlay address { vertical-align: top; margin-bottom: 2em; } .main-page-overlay address span, .main-page-overlay address p { margin-bottom: .2em; } .main-page-overlay #map h3 { margin-bottom: .5em; } .main-page-overlay #map p { margin: 0; } main .col { width: 50%; float: left; padding-right: 2em; } main .col:after { content: ''; display: table; position: relative; clear: both; } main .col.small { width: 40%; } main .col.large { width: 60%; } /** Process */ main .col.bubble { width: 70%; float: none; margin: auto; padding: 2em; position: relative; padding-left: 100px; border: 1px solid #20C7D7; margin-bottom: 2em; } main .col.bubble:before { content: ''; display: block; width: 80px; height: 100%; position: absolute; background: #20C7D7; top: 0; left: 0; } main .col.bubble svg { position: absolute; width: 40px; top: 0; bottom: 0; margin: auto; left: 20px; } main .col.bubble svg, main .col.bubble svg path, main .col.bubble svg g path { fill: #fff; } /** Page */ .main-article-wrapper { width: 100%; margin: auto; padding: 100px 0; padding-top: 230px; left: 0; right: 0; top: 0; position: absolute; transform: translateX(-100%); opacity: 0; transition: all .5s; } .main-article-wrapper a, .main-article-wrapper p, .main-article-wrapper h1, .main-article-wrapper h2, .main-article-wrapper h3, .main-article-wrapper h4, .main-article-wrapper h5, .main-article-wrapper h6 { transition: none; } .main-article-wrapper h2 { color: #20C7D7; display: inline-block; margin-bottom: 1em; } .main-article-wrapper h3 { color: #000; } .main-article-wrapper .connection { width: 49%; display: inline-block; margin-bottom: 1em; padding-right: .5em; vertical-align: top; padding-left: 50px; position: relative; } .main-article-wrapper .connection h2 { margin-bottom: .25em; } .main-article-wrapper .connection svg { max-width: 30px; max-height: 30px; display: block; vertical-align: middle; position: absolute; left: 10px; } .main-article-wrapper-inner { padding: 0 2em; max-width: 1280px; padding: 0 2em; position: relative; margin: auto; } .main-article-wrapper-inner.map-padding { padding-bottom: 500px; } .main-article-wrapper-inner:after { content: ''; display: block; width: 100%; clear: both; } /** Map */ .map { width: 100%; clear: both; bottom: 0; left: 0; right: 0; position: absolute; height: 500px; background: #20C7D7; } .map-inner { width: 100%; position: absolute; left: 0; right: 0; bottom: 0; } .map h3 { color: #20C7D7; margin-bottom: 0; } /** Navi open */ .overlay-open .main-page-overlay { transition-duration: 0.5s; transform: translateY(0) translateZ(100px); opacity: 1; } .overlay-open--step .top-main-nav .main-frame-nav .main-frame-nav-inner a.open-overlay { opacity: 1; transform: translateY(0); } .open-menu .main-frame-nav-inner, .open-menu .whole-page-perspective, .open-menu .main-frame-nav-inner a { transition: transform 0.5s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.5s cubic-bezier(0.45, 0.57, 0.11, 1.48); } .open-menu .whole-page-navi .main-frame-nav-inner a:nth-child(1) { transition: transform 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48); transition-delay: 0.4s; } .open-menu .whole-page-navi .main-frame-nav-inner a:nth-child(2) { transition: transform 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48); transition-delay: 0.55s; } .open-menu .whole-page-navi .main-frame-nav-inner a:nth-child(3) { transition: transform 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48); transition-delay: 0.7s; } .open-menu .whole-page-navi .main-frame-nav-inner a:nth-child(4) { transition: transform 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48); transition-delay: 0.85s; } .open-menu .whole-page-navi .main-frame-nav-inner a:nth-child(5) { transition: transform 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48); transition-delay: 1s; } .open-menu .whole-page-navi .main-frame-nav-inner a:nth-child(6) { transition: transform 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48); transition-delay: 1.15s; } .open-menu .whole-page-navi .main-frame-nav-inner a:nth-child(7) { transition: transform 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48); transition-delay: 1.3s; } .open-menu .whole-page-navi .main-frame-nav-inner a:nth-child(8) { transition: transform 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48); transition-delay: 1.45s; } .open-menu .whole-page-navi .main-frame-nav-inner a:nth-child(9) { transition: transform 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48), opacity 0.25s cubic-bezier(0.45, 0.57, 0.11, 1.48); transition-delay: 1.6s; } .open-menu .whole-page-navi .main-frame-nav-inner { transform: translateX(0%) translateY(-50%) rotateY(0deg); } .open-menu .whole-page-perspective { transform: translateZ(-500px) rotateY(25deg) scale(0.7) translateX(-60%); position: relative; width: 100%; height: 100%; box-shadow: 0 0 15rem 0 rgba(0, 0, 0, 0.5); } .open-menu .whole-page-navi .main-frame-nav-inner a { transform: translateX(0%); opacity: 1; } /** End of Navigation */ /** Sidebar */ aside#sidebarContent { position: absolute; width: 300px; height: 100%; background: #fff; top: 0; right: 50px; z-index: 2; padding: 50px 0; overflow: hidden; border-right: 1px solid #eee; box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.5); } .contact-element { text-align: center; width: 100%; margin-top: 3em; } .contact-element button { border: 0; padding: 5px 10px; line-height: 40px; min-width: 50px; display: inline-block; background: #20C7D7; color: #fff; font-size: 1em; font-weight: light; vertical-align: top; } button.contact-element-add { width: 50px; height: 50px; position: relative; } button.contact-element-add svg { display: block; width: 25px; height: 30px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } button.contact-element-add.checked svg * { fill: #fff; } button.contact-element-get-in-touch { padding: 5px 25px; margin-left: 1px; } /** Site footer */ .site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; } .footer-heading { font-size: 18px; margin-bottom: 15px; } .contact-list, .social-media-list { list-style: none; margin-left: 0; } .footer-col-wrapper { font-size: 15px; color: #828282; margin-left: -15px; } .footer-col { float: left; margin-bottom: 15px; padding-left: 15px; } .footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); } .footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); } .footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); } @media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); } .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } } @media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } } /** Page content */ .page-content { padding: 30px 0; } .page-heading { font-size: 20px; } .post-list { margin-left: 0; list-style: none; } .post-list > li { margin-bottom: 30px; } .post-meta { font-size: 14px; color: #828282; } .post-link { display: block; font-size: 24px; } /** Posts */ .post-header { margin-bottom: 30px; } .post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; } @media screen and (max-width: 800px) { .post-title { font-size: 36px; } } .post-content { margin-bottom: 30px; } .post-content h2 { font-size: 32px; } @media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } } .post-content h3 { font-size: 26px; } @media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } } .post-content h4 { font-size: 20px; } @media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } } /** Feature */ #features .feature { transition-duration: 0.5s; } #features .feature p { font-size: 12px; line-height: 15px; } input#contact-feature-climate:checked + label[for="contact-feature-climate"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-climate:checked + label[for="contact-feature-climate"]:after { opacity: 1; transform: scale(1); } input#contact-feature-irrigation:checked + label[for="contact-feature-irrigation"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-irrigation:checked + label[for="contact-feature-irrigation"]:after { opacity: 1; transform: scale(1); } input#contact-feature-video:checked + label[for="contact-feature-video"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-video:checked + label[for="contact-feature-video"]:after { opacity: 1; transform: scale(1); } input#contact-feature-audio:checked + label[for="contact-feature-audio"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-audio:checked + label[for="contact-feature-audio"]:after { opacity: 1; transform: scale(1); } input#contact-feature-lights:checked + label[for="contact-feature-lights"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-lights:checked + label[for="contact-feature-lights"]:after { opacity: 1; transform: scale(1); } input#contact-feature-before:checked + label[for="contact-feature-before"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-before:checked + label[for="contact-feature-before"]:after { opacity: 1; transform: scale(1); } input#contact-feature-shades:checked + label[for="contact-feature-shades"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-shades:checked + label[for="contact-feature-shades"]:after { opacity: 1; transform: scale(1); } input#contact-feature-pool_spa:checked + label[for="contact-feature-pool_spa"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-pool_spa:checked + label[for="contact-feature-pool_spa"]:after { opacity: 1; transform: scale(1); } input#contact-feature-pool:checked + label[for="contact-feature-pool"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-pool:checked + label[for="contact-feature-pool"]:after { opacity: 1; transform: scale(1); } input#contact-feature-garage:checked + label[for="contact-feature-garage"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-garage:checked + label[for="contact-feature-garage"]:after { opacity: 1; transform: scale(1); } input#contact-feature-appliances:checked + label[for="contact-feature-appliances"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-appliances:checked + label[for="contact-feature-appliances"]:after { opacity: 1; transform: scale(1); } input#contact-feature-surveillance:checked + label[for="contact-feature-surveillance"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-surveillance:checked + label[for="contact-feature-surveillance"]:after { opacity: 1; transform: scale(1); } input#contact-feature-door:checked + label[for="contact-feature-door"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-door:checked + label[for="contact-feature-door"]:after { opacity: 1; transform: scale(1); } input#contact-feature-curtain:checked + label[for="contact-feature-curtain"] { background: #10676F; /* svg, svg path, svg g path{ fill:$main_color; } p,h2{ color:$main_color; } */ } input#contact-feature-curtain:checked + label[for="contact-feature-curtain"]:after { opacity: 1; transform: scale(1); } .feature-holder { display: table; } .feature-holder:after { content: ''; display: block; width: 100%; clear: both; } .feature-row { display: table-row; } .feature-cell { display: table-cell; position: relative; } .feature { background: #009DAC; margin-bottom: 1%; display: block; margin-right: 1%; padding: 10px; padding-left: 50px; position: relative; font-size: 1em; text-align: left; min-height: 80px; border: 0; } .feature:before { content: ''; display: block; width: 10px; height: 10px; position: absolute; border: 1px solid #fff; right: 10px; top: 10px; } .feature:after { content: ''; display: block; width: 11px; height: 10px; position: absolute; right: 9px; top: 9px; background-image: url(checkbox.png); background-size: 100%; opacity: 0; transform: scale(0); transition: all .25s; } .feature p, .feature h1, .feature h2, .feature h3 { color: #fff; margin: 0; font-weight: 100; } .no-touchevents .feature:hover { background: #10676F; } .feature svg { max-width: 30px; max-height: 30px; vertical-align: middle; position: absolute; left: 10px; top: 0; bottom: 0; margin: auto; display: block; } .feature svg * { fill: #fff; } /* perfect-scrollbar v0.6.11 */ .ps-container { -ms-touch-action: none; touch-action: none; overflow: hidden !important; -ms-overflow-style: none; } @supports (-ms-overflow-style: none) { .ps-container { overflow: auto !important; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ps-container { overflow: auto !important; } } .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail { display: block; background-color: transparent; } .ps-container.ps-in-scrolling { pointer-events: none; } .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { background-color: #eee; opacity: .9; } .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { background-color: #999; } .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { background-color: #eee; opacity: .9; } .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { background-color: #999; } .ps-container > .ps-scrollbar-x-rail { display: none; position: absolute; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: 0; -webkit-transition: background-color .2s linear, opacity .2s linear; -moz-transition: background-color .2s linear, opacity .2s linear; -o-transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear; bottom: 3px; height: 8px; } .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { position: absolute; background-color: #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -o-transition: background-color .2s linear; transition: background-color .2s linear; bottom: 0; height: 8px; } .ps-container > .ps-scrollbar-y-rail { display: none; position: absolute; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: 0; -webkit-transition: background-color .2s linear, opacity .2s linear; -moz-transition: background-color .2s linear, opacity .2s linear; -o-transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear; right: 3px; width: 8px; } .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { position: absolute; background-color: #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -o-transition: background-color .2s linear; transition: background-color .2s linear; right: 0; width: 8px; } .ps-container.ps-in-scrolling:hover { pointer-events: none; } .ps-container.ps-in-scrolling.ps-x:hover > .ps-scrollbar-x-rail { background-color: #eee; opacity: .9; } .ps-container.ps-in-scrolling.ps-x:hover > .ps-scrollbar-x-rail > .ps-scrollbar-x { background-color: #999; } .ps-container.ps-in-scrolling.ps-y:hover > .ps-scrollbar-y-rail { background-color: #eee; opacity: .9; } .ps-container.ps-in-scrolling.ps-y:hover > .ps-scrollbar-y-rail > .ps-scrollbar-y { background-color: #999; } .ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail { opacity: .6; } .ps-container:hover > .ps-scrollbar-x-rail:hover { background-color: #eee; opacity: .9; } .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { background-color: #999; } .ps-container:hover > .ps-scrollbar-y-rail:hover { background-color: #eee; opacity: .9; } .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { background-color: #999; } .no-csstransforms3d .open-menu .whole-page-navi { z-index: 2; background: #20C7D7; } .fallback .loadIconStart { display: none; } .fallback .feature-gallery img.img-loaded { width: 100%; height: initial; } .fallback .feature-gallery { height: 80%; } .fallback .feature-gallery-slide { height: 100%; } .fallback .side-main-nav { z-index: 9; } .fallback aside#sidebarContent { width: 100%; z-index: 8; right: 0; padding-top: 0; padding-bottom: 0; } .fallback .ui_link.closed { opacity: 1; transform: translateX(0); display: none; } .fallback .ui_link { padding-right: 50px; background: #fff; } .fallback .main-page-overlay { z-index: 10; } .fallback .top-main-nav { z-index: 12; } /** Reset some basic elements */ body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; } /** Basic styling */ body { font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; } /** Set `margin-bottom` to maintain vertical rhythm */ h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; } /** Images */ img { max-width: 100%; vertical-align: middle; } /** Figures */ figure > img { display: block; } figcaption { font-size: 14px; } /** Lists */ ul, ol { margin-left: 30px; } li > ul, li > ol { margin-bottom: 0; } /** Headings */ h1, h2, h3, h4, h5, h6 { font-weight: 400; } main h1, main h2, main h3, main h4, main h5, main h6 { color: #20C7D7; font-weight: #20C7D7; } /** Links */ a { color: #20C7D7; text-decoration: none; } a::hover { text-decoration: none; color: #20C7D7; } /** Blockquotes */ blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; } blockquote > :last-child { margin-bottom: 0; } /** Code formatting */ pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; } code { padding: 1px 5px; } pre { padding: 8px 12px; overflow-x: auto; } pre > code { border: 0; padding-right: 0; padding-left: 0; } /** Wrapper */ .wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; } @media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } } /** Clearfix */ .footer-col-wrapper:after, .wrapper:after { content: ""; display: table; clear: both; } /** Icons */ .icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; } .icon > svg path { fill: #828282; } /** Syntax highlighting styles */ .highlight { background: #fff; } .highlighter-rouge .highlight { background: #eef; } .highlight .c { color: #998; font-style: italic; } .highlight .err { color: #a61717; background-color: #e3d2d2; } .highlight .k { font-weight: bold; } .highlight .o { font-weight: bold; } .highlight .cm { color: #998; font-style: italic; } .highlight .cp { color: #999; font-weight: bold; } .highlight .c1 { color: #998; font-style: italic; } .highlight .cs { color: #999; font-weight: bold; font-style: italic; } .highlight .gd { color: #000; background-color: #fdd; } .highlight .gd .x { color: #000; background-color: #faa; } .highlight .ge { font-style: italic; } .highlight .gr { color: #a00; } .highlight .gh { color: #999; } .highlight .gi { color: #000; background-color: #dfd; } .highlight .gi .x { color: #000; background-color: #afa; } .highlight .go { color: #888; } .highlight .gp { color: #555; } .highlight .gs { font-weight: bold; } .highlight .gu { color: #aaa; } .highlight .gt { color: #a00; } .highlight .kc { font-weight: bold; } .highlight .kd { font-weight: bold; } .highlight .kp { font-weight: bold; } .highlight .kr { font-weight: bold; } .highlight .kt { color: #458; font-weight: bold; } .highlight .m { color: #099; } .highlight .s { color: #d14; } .highlight .na { color: #008080; } .highlight .nb { color: #0086B3; } .highlight .nc { color: #458; font-weight: bold; } .highlight .no { color: #008080; } .highlight .ni { color: #800080; } .highlight .ne { color: #900; font-weight: bold; } .highlight .nf { color: #900; font-weight: bold; } .highlight .nn { color: #555; } .highlight .nt { color: #000080; } .highlight .nv { color: #008080; } .highlight .ow { font-weight: bold; } .highlight .w { color: #bbb; } .highlight .mf { color: #099; } .highlight .mh { color: #099; } .highlight .mi { color: #099; } .highlight .mo { color: #099; } .highlight .sb { color: #d14; } .highlight .sc { color: #d14; } .highlight .sd { color: #d14; } .highlight .s2 { color: #d14; } .highlight .se { color: #d14; } .highlight .sh { color: #d14; } .highlight .si { color: #d14; } .highlight .sx { color: #d14; } .highlight .sr { color: #009926; } .highlight .s1 { color: #d14; } .highlight .ss { color: #990073; } .highlight .bp { color: #999; } .highlight .vc { color: #008080; } .highlight .vg { color: #008080; } .highlight .vi { color: #008080; } .highlight .il { color: #099; } @media all and (max-width: 800px) { .fallback .feature-gallery img.img-loaded { width: initial; height: 100%; } main .col.bubble { width: 100%; padding: 1em; padding-top: 80px; } main .col.bubble:before { width: 100%; height: 50px; } main .col.bubble svg { height: 30px; width: auto; top: 10px; bottom: initial; left: 0; right: 0; } main .col.large, main .col.small { width: 100%; margin-bottom: 3em; float: none; padding: 0; } .loading.max { right: initial; } .main_header { height: 100%; width: 100%; } .no-fallback aside#sidebarContent { width: 100%; transform: translateX(100%); } .main_nav .nav_list { display: none; } .nav_controls { right: 0; height: 100%; } .main_nav h1 { width: 160px; height: 70px; left: 20px; top: 0; bottom: 0; margin: auto; } .mobile { display: block; } .nav_list .nav_info { display: none; } .interactive_scene { z-index: 1; } div#smart_toggle { transition-duration: .25s; position: absolute; width: 50px; height: 50px; background: #fff; bottom: 51px; left: 0px; background-size: 260px; background-image: url("../static/ico/png/icon_grid2.png"); background-position: 2px -251px; } div#smart_toggle.open { z-index: 10; } /** Sidebar */ .ui_link { padding-right: 50px; } .feature-sidebar-content { padding-bottom: 100px; } aside#sidebarContent { right: 0; } aside#sidebarContent.mobileOpen { transform: translateX(0); } .smart_ui { left: 60px; transform: translateY(220px); } .mobileOpen { transform: translateX(-100%); } .mobileOpen .smart_ui { transform: translateX(0%); } nav#ui { width: 100%; border-radius: 0; } .nav_controls { width: 100%; padding: 0; } .no-fallback .nav_list_inner { height: 100%; z-index: 9; bottom: 0; } .ui { background: rgba(255, 255, 255, 0.5); } .ui a { padding: 20px; } .top-main-nav .main-frame-nav .main-frame-nav-inner { display: none; } .whole-page-navi .main-frame-nav-inner { width: 45%; } /** Contact */ div#errorMessagesHolder { position: fixed; } div#errorMessagesHolder .successMessage, div#errorMessagesHolder .errorMessage { width: 100%; padding: 2em 0; font-size: 1em; } } @media all and (max-width: 500px) { .main-frame-nav-inner a { font-size: 1.2em; } .main-article-wrapper { font-size: 120%; line-height: 160%; top: 50px; } .overlay-open .page-header .main-frame-nav-inner a { display: inline-block; margin-bottom: .25em; } .feature-holder .feature { width: 100%; font-size: 80%; margin-bottom: 0.5em; } .feature-holder .feature h2 { font-size: 100%; } .feature-cell { display: table; } .tut-content h1 { font-size: 2.1em; width: 100%; } .tut-content p { font-size: 1.1em; } .main-article-wrapper .connection { width: 100%; } } /*# sourceMappingURL=main.css.map */