/*
rgb(224, 101, 40)
rgb(235, 166, 43)
rgb(219, 217, 42)
rgb(161, 195, 60)
rgb(113, 147, 89)
rgb(113, 147, 89)*/


.BodyBlock{
  background: #161616;
  margin: 50px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.Lato{font-family: 'Lato';}
.Roboto{font-family: 'Roboto';}
.Josefin{font-family: 'Josefin Sans';}
.Helvetica{font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}
h1 {
  color: #fff;
  font-size: 80px;
  font-weight: 200;
  letter-spacing: 0em;
  line-height: 1;
}

h1 strong{
  font-size:inherit;
  font-weight: 400;
}
h2 {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.333;
  -webkit-margin-before: 0.25em;
  -webkit-margin-after: 0.25em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}
p {
  color: #dddddd;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0em;
  line-height: 1.2;
  margin: 0;
 }

.GrBg{
  width:100%;

  /*background-color: #474747;*/
  /*background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%) no-repeat fixed 100% 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(100%, rgba(0,0,0,1))) no-repeat fixed 100% 100%;
  background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%) no-repeat fixed 100% 100%;
  background: -o-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%) no-repeat fixed 100% 100%;
  background: -ms-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%) no-repeat fixed 100% 100%;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%) no-repeat fixed 100% 100%;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );*/

  background: linear-gradient(to bottom,  rgba(31,31,31,0.43) 0%,rgba(31,31,31,0.43) 1%,rgba(55,55,55,0.43) 50%,rgba(28,28,28,0.43) 100%) no-repeat fixed 100% 100%;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e1f1f1f', endColorstr='#6e1c1c1c',GradientType=0 );
}

#canvas1{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top:0px;
  left:0px;
  z-index: -10;
}

.lineSmoke{
  /*border: 1px solid blue;*/
  width:200px;
  height:2150px;
  position: absolute;
  left:50px;
  top:820px;
  background-image: url('/images/Line01a.svg');
  -webkit-background-size:auto 100%;
  background-size:auto 100%;
}

.Line01 {
  width:250px;
  height:1350px;
  position: absolute;
  left:80px;
  /*top:700px;*/
  background-image: url('/images/Line01.svg');
  -webkit-background-size:auto 100%;
  background-size:auto 100%;
  z-index: 50;
}

.Line02 {
  width:325px;
  height:1260px;
  position: absolute;
  left:190px;
  top:1990px;
  background-image: url('/images/Line02.svg');
  -webkit-background-size:auto 100%;
  background-size:auto 100%;
  z-index: 52;
}

.Line03 {
  width:300px;
  height:1000px;
  position: absolute;
  left:-57px;
  top:7578px;
  background-image: url('/images/Line03.svg');
  -webkit-background-size:auto 100%;
  background-size:auto 100%;
  z-index: 52;
}

.Line03a {
  width:200px;
  height:480px;
  position: absolute;
  left:-100px;
  top:7120px;
  background-image: url('/images/Line03a.svg');
  -webkit-background-size:auto 100%;
  background-size:auto 100%;
  z-index: 52;
}

.Line04 {
  width:220px;
  height:780px;
  position: absolute;
  left:-115px;
  top:8894px;
  background-image: url('/images/Line04.svg');
  -webkit-background-size:auto 100%;
  background-size:auto 100%;
  z-index: 52;
}

.Line01 #DotLine01{
  /*fill: url('.GrBg');*/
  /*stroke:red;
  fill:blue;*/
  /*clip-path: url('.GrBg');*/
}

.BluePrintHouse{
  width:1600px;
  height:900px;
  position: absolute;
  left:-380px;
  bottom:-210px;
  background: url('/images/BluePrintHouse.png') no-repeat left bottom;
  -webkit-background-size:auto 100%;
  background-size:auto 100%;
  z-index: 20;
}

.ColorLights{
  position: absolute;
  left:calc(((100vw - 1024px)/2) + 112px);
  top:-100px;
  z-index: 19;
}

.link-down{
  width:25px;
  height:25px;
  -webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb04 2s infinite;
	animation: sdb04 2s infinite;
}

@-webkit-keyframes sdb04 {
	0% {-webkit-transform: rotate(-45deg) translate(0, 0);}
	20% {-webkit-transform: rotate(-45deg) translate(-10px, 10px);}
	40% {-webkit-transform: rotate(-45deg) translate(0, 0);}
}
@keyframes sdb04 {
	0% {transform: rotate(-45deg) translate(0, 0);}
	20% {transform: rotate(-45deg) translate(-10px, 10px);}
	40% {transform: rotate(-45deg) translate(0, 0);}
}

.HandPhoneImg{
  position: absolute;
  right:10px;
  bottom:0px;
  width:560px;
}

.mobileMsg{height:100vh; padding-top: 145px; margin: 0 0px; text-align: center; vertical-align: middle; display: none;}
.mobileMsg p{font-size: 18px; margin: 0 20px; margin-bottom: 40px;}
.mobileMsg img{width:100%;}
.mobileMsg .btn-primary{font-size: 18px;}
.mobileMsg .ask{position: relative;}
.mobileMsg .ask .bg{
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0; opacity: .5;
  background: url('/css/images/temp/section-ask.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}

@media (max-height: 900px) {
	.HandPhoneImg{
    bottom:initial;
    top:56px;
	}
}

@media (max-width: 767px) {
	.HandPhoneImg{ display: none;}

  /* hide tour*/
  .section.section-primary {display: none;}
  .section.section-afford {display: none;}
  .section2.section-ask {display: none;}
  #canvas1, .footer {display: none;}
  .mobileMsg {display: block; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
}

#sect0 {
  height: 1100px;
}

#sect0 .sc1{
  margin-left: 220px;
  position: absolute;
  bottom: 40%;
  z-index: 60;
}

#sect0 .section-content h1{
  font-size: 26px;
  font-weight: 400;
  line-height: 1.4em;
}

#sect0 .section-content p{
  padding-right: 0px;
  width:350px;
}

#sect1a {
  height: 1500px;
}

#sect1a .sc1{
  margin-left: 180px;
  margin-top: 500px;
  /*padding-right: 45%*/
}

#sect1a .sc2{
  margin-left: 220px;
  /*padding-right: 44%;*/
  position: absolute;
  bottom: 620px;
  z-index: 60;
}

#sect1a .section-content p{
  padding-right: 0px;
  width:350px;
}

#sect1a .sc2 span{
  font-weight: bold;
  color:#7FA7D4;
}

#sect1a article{
  position: absolute;
  bottom:0px;
  height:100%;
}

#sect2 .LiteSpacer{
  position: absolute;
  height:1000px;
}

#sect2a{
  position: absolute;
  top:1060px;
}

#sect2 .LiteLines.pos1{left:97px;}
#sect2 .LiteLines.pos2{left:303px;}
#sect2 .LiteLines.pos3{left:507px;}
#sect2 .LiteLines{
  width:2px;
  height: 130%;
  background-color:#6e6e6e;
  display: block;
  position: relative;
  bottom:20px;
  float:left;
}

#sect2 .LiteShades{
  height:1200px;
  position: absolute;
  bottom:0px;
}

#sect2 {
  /*min-height: 145vh;*/
  height: 2400px;
}

#sect2 .BackgroundAni{
  position: absolute;
  bottom: 0px;
}

#sect2 .article{
  position: absolute;
  bottom:330px;
}

#sect2 .article h2, #sect2 .article p{
  color: #000;
}

#sect0 .HomeScreen .PhoneBox{
  background-image: url('/images/iPhoneWht_00HomeScreen.png');
  width:311px;
  height:650px;
    opacity: 0.4;
}

#sect0 .HomeScreenfix .PhoneBox{
  background-image: url('/images/iPhoneWht_00HomeScreen.png');
  width:311px;
  height:650px;
}

#sect1a .BluePrint .PhoneBox{
  background-image: url('/images/iPhoneWht_00BluePrint.png');
  width:311px;
  height:650px;
}

#sect1a .GrayPrint .PhoneBox{
  background-image: url('/images/iPhoneWht_00GrayPrint.png');
  width:311px;
  height:650px;
}

#sect1b .PhoneBox{
  background-image: url('/images/iPhoneWht_02LightsBlank.png');
  width:311px;
  height:650px;
}

#sect2 .PhoneBox{
  background-image: url('/images/iPhoneWht_02LightsBlank.png');
  width:311px;
  height:650px;
}

#sect3 .PhoneBox{
  background-image: url('/images/iPhoneWht_06DoorBlank.png');
  width:311px;
  height:650px;
}

#sect4 .PhoneBox{
  background-image: url('/images/iPhoneWht_04ThermoBlank.png');
  width:311px;
  height:650px;
}

#sect5 .PhoneBox{
  background-image: url('/images/iPhoneWht_08Security.png');
  width:311px;
  height:650px;
}

#sect5a .PhoneBox{
  background-image: url('/images/iPhoneWht_08Security.png');
  width:311px;
  height:650px;
}

#sect5b .PhoneBox{
  background-image: url('/images/iPhoneWht_08ActivWarn.png');
  width:311px;
  height:650px;
}

#sect5c .PhoneBox{
  background-image: url('/images/iPhoneWht_00ReduceAction.png');
  width:311px;
  height:650px;
}

#sect6 .PhoneBox{
  background-image: url('/images/iPhoneWht_09Afford.png');
  width:311px;
  height:650px;
}

.BackgroundAni {
  position: absolute;
  width: 100%;
  height: 100%;
  border:0px solid blue;
  top:0px;
  left:0px;
  clip: rect(0, auto, auto, 0);
}

.BackgroundAninonClip {
  position: absolute;
  width: 100%;
  height: 100%;
  border:0px solid blue;
  top:0px;
  left:0px;
}

.ClipParent {
  position: absolute;
  width: 100%;
  height: 100%;
  left:0px;
  top:0px;
  clip: rect(0, auto, auto, 0);
  z-index: 30;
  pointer-events: none;
}

.HomeScreenfix{
  height:100%;
  width:100%;
  position: absolute;
  z-index: 33;
  clip:initial;
  bottom:-50px;
  left:0;
}

#sect0 .HomeScreenfix .PhoneBox{
  position: absolute;
  z-index: 33;
  bottom:0px;
}

.ClipParent.HomeScreen{
  height:60%;
  z-index: 32;
  top:initial;
  bottom:0px;
}

.ClipParent.BluePrint{
  height:70%;
  z-index: 32;
}

.PhoneBox{
  width:300px;
  height:600px;
  position: fixed;
  right: calc(((100vw - 1024px)/2) + 50px);
  bottom: calc(((100vh - 650px)/2));
  z-index: inherit;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.PhoneBox .SmSpin{
  width:100%;
  height:23%;
  top:340px;
  position: absolute;
  background: url('/images/Spinner.svg') no-repeat center center;
  -webkit-background-size: auto 60%; background-size: auto 60%;
}

.PhoneShadow{
  position: fixed;
  width:303px;
  height:642px;
  z-index: -2;
  background: #bbb;
  right: calc(((100vw - 1024px)/2) + 54px);
  bottom: calc(((100vh - 650px)/2) + 3px);
  -webkit-border-radius: 47px;
  border-radius: 47px;
}

.ScreenContainer{
  height:484px;
  box-sizing: border-box;
  margin: 76px 18px;
  position: relative;
}

#sect2 .PhoneHeader{
  width:100%;
  height:50px;
}

.SingleLite{
  height:200px;
  width:200px;
  background: url('/css/images/temp/SingleLight.png')no-repeat center top -71px;
  -webkit-background-size:200px auto;
  background-size:200px auto;
  display: inline-block;
}

.LightBox.Lite1{left: -701px;}
.LightBox.Lite2{left: -494px;}
.LightBox.Lite3{left: -289px;}
.LightBox{
  position: absolute;
  top:370px;
  width:1600px;
  height:1600px;
  /*background: rgba(255, 255, 255, 1);*/
  background: url('/css/images/temp/whiteblock.gif');
  opacity: 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
  transform-style: preserve-3d;
  display: inline-block;
}

.LiteLine{
  width:100%;
  height:44px;
  line-height:44px;
  border:0px solid orange;
  position: relative;
}

.LiteLine div{
  display: table-cell;
  font-weight: 400;
}
.LiteLine .Dot{
  width:15%;
  height:44px;
  float:left;
}
.LiteLine .Dot.bgFill{
  background:rgba(244,116,50,1);
}
.LiteLine .BlubOff{
  width:44px;
  height:44px;
  background: url('/images/Icon-Bulb-Off.png') no-repeat center center;
  -webkit-background-size: auto 45%; background-size: auto 45%;
}
.LiteLine .BlubOn{
  width:44px;
  height:44px;
  background: url('/images/Icon-Bulb-On.png') no-repeat center center;
  -webkit-background-size: auto 45%; background-size: auto 45%;
}
.LiteLine .Title{
  font-size: 15px;
  width:178px;
  position: relative;
}
.LiteLine .perc{
  font-size: 15px;
  width:18%;
  padding-right: 10px;
  text-align: right;
  background:rgba(247,164,46,1);
}
.LiteLine .perc:after { content: '%';}

.ui-slider-range {
    position: absolute;
    top: 0;
    right:0;
    height: 44px;
    z-index: -1;
}
.ui-slider-range {
  background: rgba(244,116,50,1);
  background: -moz-linear-gradient(left, rgba(244,116,50,1) 10%, rgba(247,164,46,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(10%, rgba(244,116,50,1)), color-stop(100%, rgba(247,164,46,1)));
  background: -webkit-linear-gradient(left, rgba(244,116,50,1) 10%, rgba(247,164,46,1) 100%);
  background: linear-gradient(to right, rgba(244,116,50,1) 10%, rgba(247,164,46,1) 100%);
}

/* Sect3 #################### */

#sect3 {
  height: 2700px;
}

#sect3 .article{
  position: absolute;
  bottom: 0px;
}

#sect3 .PhoneHeader{
  width:100%;
  height:48px;
}

#sect3 .LockImg{
  width:100%;
  height:64%;
  position: absolute;
}
#sect3 .LockImg.spinner{
  background: url('/images/Spinner.svg') no-repeat center center;
  -webkit-background-size: auto 60%; background-size: auto 60%;
}
#sect3 .LockImg.unlocked{
  background: url('/images/Unlocked.svg') no-repeat center center;
  -webkit-background-size: auto 60%; background-size: auto 60%;
}
#sect3 .LockImg.locked{
  background: url('/images/Locked.svg') no-repeat center center;
  -webkit-background-size: auto 60%; background-size: auto 60%;
}
#sect3 .Selector{
  padding-top:340px;
  width: 100%;
  text-align: center;
  font-size: 16px;
}

.LockBox{
  position: absolute;
  bottom:460px;
  width:480px;
  height:908px;
  border-color: white;
  border-style: solid;
  border-width: 24px 24px 24px 24px;
  -webkit-border-radius: 70px 70px 70px 70px;
  border-radius: 70px 70px 70px 70px;
  box-sizing: border-box;
  background-color: #0f0f0f;
}

.LockSwitch{
  width:90px;
  height:220px;
  border-color: white;
  border-style: solid;
  border-width: 24px;
  -webkit-border-radius:70px;
  border-radius:70px;
  position: absolute;
  left:190px;
  bottom:85px;
  -webkit-transform: rotate(-40deg); /* Chrome, Safari, Opera */
  -webkit-transform-origin: 50% 80%; /* Chrome, Safari, Opera */
  transform: rotate(-40deg);
  transform-origin: 50% 80%;
}

.LockPadMask{
  width:110px;
  height:106px;
  left:456px;
  bottom:190px;
  position: absolute;
  /*border: 1px solid white;*/
  overflow: hidden;
}

.LockPad{
  width:105px;
  height:106px;
  left:-105px;
  top:0px;
  background-color:#8b8b8b;
  position: absolute;
  -webkit-border-radius:0 24px 24px 0;
  border-radius:0 24px 24px 0;
}

/* Sect4 #################### */

.ThermoBox{
  width:480px;
  height:315px;
  border-color: white;
  border-style: solid;
  border-width: 24px;
  -webkit-border-radius:70px;
  border-radius:70px;
  position: absolute;
  left:0px;
  bottom:670px;
  background-color: #0f0f0f;
}

.ThermoPlusMinus{
  height:100%;
  width:72px;
  background: url('/images/ThermoPlusMinus.png')no-repeat center center;
  -webkit-background-size:100% auto;
  background-size:100% auto;
  display: block;
  position: relative;
  float:left;
  left:20px;
}
.ThermoDeg{
  position: relative;
  float: right;
  font-size: 150px;
  font-weight: bold;
  height:100%;
  line-height: 178%;
  width: 80%;
  vertical-align: middle;
  text-align: center;
}

.ThermoDeg:before{
  content:'\00a0';
  font-size:120px;
}

.ThermoDeg:after{
  content:'°';
  font-size:150px;
  vertical-align: top;
  font-weight: 500;
}

#sect4 {
  height: 2450px;
}

#sect4 .article{
  position: absolute;
  bottom: 310px;
}

#sect4 .PhoneHeader{
  width:100%;
  height:100px;
}

#sect4 .Temp{
  width: 100%;
  height:41%;
  line-height: 1.7;
  vertical-align: middle;
  text-align: center;
  /*border: 1px solid white;*/
  font-size: 110px;
  font-weight: 500;
}

#sect4 .Temp:after{
  content:'°';
  font-size:110px;
  vertical-align: top;
  font-weight: 500;
}

#sect4 .Temp:before{
  content:'\00a0';
  font-size:120px;
}

/* Sect5 ############ */

.bluebox{
  border:1px solid blue;
}

#sect5 .ImgSet{
  margin-top: 70px;
  margin-bottom: 40px;
}

#sect5 .ImgSet div{
  height:200px;
  margin:auto;
  display: inline-block;
}

#sect5 .ArmedIcon.off{
  width:188px;
  background: url('/images/Armed_Off.png') no-repeat center center;
  -webkit-background-size: auto 100%; background-size: auto 100%;
}
#sect5 .LockedIcon.off{
  width:203px;
  background: url('/images/Locked_Off.png') no-repeat center center;
  -webkit-background-size: auto 100%; background-size: auto 100%;
}
#sect5 .ReduceIcon.off{
  width:186px;
  background: url('/images/Reduce_Off.png') no-repeat center center;
  -webkit-background-size: auto 100%; background-size: auto 100%;
}

#sect5 .ArmedIcon.on{
  width:188px;
  background: url('/images/Armed_on.png') no-repeat center center;
  -webkit-background-size: auto 100%; background-size: auto 100%;
}
#sect5 .LockedIcon.on{
  width:203px;
  background: url('/images/Locked_on.png') no-repeat center center;
  -webkit-background-size: auto 100%; background-size: auto 100%;
}
#sect5 .ReduceIcon.on{
  width:186px;
  background: url('/images/Reduce_on.png') no-repeat center center;
  -webkit-background-size: auto 100%; background-size: auto 100%;
}


#sect3 section.Chat {
  position: relative;
	width:450px;
  top:390px;
  left:100px;
}

#sect4 section.Chat {
  position: relative;
	width:450px;
  top:645px;
  left:100px;
}

section.Chat div{
  max-width: 255px;
  word-wrap: break-word;
  margin-bottom: 6px;
  line-height: 24px;
}

section.Chat div:after{
  content: "";
  position: absolute;
  bottom:-5px;
  border-radius: 0 20px 0;
  width: 22px;
  height: 30px;
}

.clear {clear: both}
section.Chat .msg{
  position:relative;
  padding:10px 20px;
  border-radius:25px;
}

.from-me{
	background:#0B93F6;
	float: right;
}

.from-me p{
	color:#ffffff;
}

.from-them{
	background:#E5E5EA;
  float: left;
}

.from-them p{
	color: #1f1f1f;
}

.from-them:after{
  left:-14px;
  border-top: 12px solid #E5E5EA;
  transform: rotate(90deg);
}

.from-me:after {
  right:-14px;
  border-top: 12px solid #0B93F6;
  transform: rotate(90deg) scaleY(-1);
}

/* Section 5a */

#sect5a {
  height: 1600px;
}

#sect5b {
  height: 900px;
}

#sect5c {
  height: 900px;
}

#sect5a article{
  margin-top: 840px;
  position: absolute;
}

#sect5b article{
  margin-top: 420px;
}

#sect5b .section-content{
  padding-right: 37%;
  text-align: right;
}

#sect5c article{
  margin-top: 420px;
}

#sect5c .section-content{
  padding-right: 37%;
  text-align: right;
}

.stz0{fill:#E2642D;}
.stz1{font-size:31px;}
.stz2{font-size:31px;}
.stz3{fill:#EAA52D;}
.stz4{fill:#EAA52E;}
.stz5{clip-path:url(#SVGID_2_);}
.stz6{font-size:32px;}
.stz7{letter-spacing:-1;}
.stz8{letter-spacing:-2;}
.stz9{fill:#FFFFFF;}
.stz10{font-size:29px;}
.stz11{clip-path:url(#Rectangle_1_copy_2_3_); opacity:1;}
.stz12{font-size:19px;}
.stz13{font-size:19px;}
.stz14{font-size:33px;}
.stz15{font-size:33px;}
.stz16{font-family:'HelveticaNeue-CondensedBlack';}
.stz17{fill:#709359;}
.stz18{fill:#719459;}
.stz19{font-size:23px;}
.stz20{fill:#A1C43D;}
.stz21{fill:#A3C53C;}
.stz22{font-size:30px;}
.stz23{font-size:26px;}
.stz24{fill:#DAD72D;}
.stz25{fill:#DAD72E;}

.stx1{fill:none; stroke:#E16528; stroke-width:12; stroke-miterlimit:10; stroke-linecap:round; stroke-linejoin:round;}
.stx2{fill:none; stroke:#EAA52B; stroke-width:13; stroke-dasharray:13,13;}
.stx3{fill:none; stroke:#DBD92A; stroke-width:12; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; stroke-dasharray:15,20;}
.stx3s{fill:none; stroke:#DBD92A; stroke-width:12; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10;}
.stx4{fill:none; stroke:#A1C33C; stroke-width:13; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:0.013,30;}
.stx5{fill:none; stroke:#719359; stroke-width:13; stroke-dasharray:26,26;}

.csl01 svg{
  left:-240px;
  position: absolute;
  margin-top: 680px;
  width:220px;
  height:auto;
  z-index:49;
}

.csl02 svg{
  left:-240px;
  position: absolute;
  margin-top: 440px;
  width:800px;
  height:auto;
  z-index:49;
}

.csl03 svg{
  left:-189px;
  position: absolute;
  margin-top: 440px;
  width:800px;
  height:auto;
  z-index:49;
}

.GearCloud svg{
  left:-360px;
  position: absolute;
  margin-top: 170px;
  width:870px;
  height:auto;
  z-index: 50;
}

.iconSpin{
  /* -webkit-animation: spin 7s infinite linear; */
  -moz-animation: initial;

  -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
  transform-origin: 50% 50%;
}

.SpinRev{
    -webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
    animation-direction: reverse;
}

@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

/* Sect6 ########## */
#sect6 .ScreenContainer{
  background-color: #212121;
  padding: 8px;
  box-sizing: border-box;
}

#sect6 .section{
  margin: auto;
}


/* ### Guides ### */

.phoneguide{
  /*border: 1px solid lightblue;*/
  opacity: 0.1;
  position: fixed;
  width:278px;
  height:100%;
  right: calc(((100vw - 1024px)/2) + 68px);
  z-index: 999;
  pointer-events: none;
}

.textguide{
  /*border: 1px solid lightblue;*/
  opacity: 0.1;
  position: fixed;
  width:560px;
  height:100%;
  left: calc(((100vw - 1024px)/2) + 40px);
  z-index: 999;
  pointer-events: none;
}

.bodyguide{
  /*border: 1px solid lightblue;*/
  opacity: 0.1;
  position: fixed;
  width:1024px;
  height:100%;
  left: calc(((100vw - 1024px)/2));
  z-index: 999;
  pointer-events: none;
}