
/* ------------------------------------------------------------ *\
	vidhome
\* ------------------------------------------------------------ */
.vidhome { width:100%; position:relative; display:-webkit-flex; display:-ms-flexbox; display:flex; position: relative; margin: 0 auto; }

.vidhome .header-padding{
  position: relative;
  z-index: 1;
  padding-top: 160px;
  display: flex;
  width:100%;
}

@media (max-width: 767px) {
	.vidhome { min-height: 0; display: block; height: auto; }
	.vidhome .header-padding{padding-top: 145px;}
  .vidhome .VidTextMsg{padding-top: 20px; padding-left: 10px; width: 100%; text-align: center;}
  .vidhome video source {display: none;}
}

/*@media (min-height: 1024px) {
	.vidhome .vid{height:690px; transition: all .5s;}
	.vidhome .videobind{height:690px; transition: all .5s;}
	.vidhome .VidTextMsg{padding-top: 325px; transition: all .5s;}
	.vidhome .DeviceRender{background-position: center bottom -150px; width:330px; height:760px; transition: all .5s;}
}*/

.vid{
	position: relative;
	width:100%;
	height:580px;
	transition: all .5s;
}

.graphicOverlay{
	position: absolute;
	z-index: 3;
	top:0px;
	width:100%;
	height:100%;
}

.videobind{
	/*object-fit: cover;*/
	position: relative;
	width:100%;
	height:580px;
	overflow: hidden;
	transition: all .5s;
}

.BgVid{
	width: 100%;
  height: auto;
	position: absolute;
	object-fit: cover;
	overflow:hidden;
	z-index: -1;
}

.LiteVid{
	top: 25%;
	left: 50%;
	-ms-transform: translateX(-50%) translateY(-25%);
	-moz-transform: translateX(-50%) translateY(-25%);
	-webkit-transform: translateX(-50%) translateY(-25%);
	transform: translateX(-50%) translateY(-25%);
}

/* .vidImg.garageBg{
  background-image: url('/videos/screens/garage_background_sm.jpg');
  background-size: cover;
  background-position: center;
  width: inherit;
  height: inherit;
  filter: blur(3px);
} */

@media (max-width: 1080px) {
	.BgVid{
		height: 100%;
		width: auto;
	}
  .vidImg{
    height: 100%;
    width: auto;
    object-fit: cover;
  }
  .VidTextMsg h1{
    margin-top: 50px;
  	font-size: 32px !important;
  }
}

.VidTextMsg{
	padding-top: 250px;
	padding-left: 10px;
	float:left;
	z-index: 11;
	height: 100%;
	margin: auto;
	position: absolute;
	transition: all .5s;
  text-shadow: 0px 2px 1px black;
}

.VidTextMsg h1{
	font-size: 48px;
	font-weight: 300;
	margin-bottom: 0.25em;
}

.VidTextMsg p{
	font-weight:300;
}

.VidTextMsg p span{
	font-weight:100;
}

.DeviceRender{
	float: right;
	z-index: 10;
	transition: all .5s;
}

.DeviceRender.light{
	width:280px;
	height:650px;
	background-position: center bottom -10px;
	background-repeat: no-repeat;
	-webkit-background-size:auto 85%;
	background-size:auto 85%;
	background-image: url('/images/Renders/Switch.png');
}
.DeviceRender.lock{
	width:280px;
	height:650px;
	background-position: left -160px bottom -10px;
	background-repeat: no-repeat;
	-webkit-background-size:auto 100%;
	background-size:auto 100%;
	background-image: url('/images/Renders/Lock.png');
}
.DeviceRender.thermo{
	width:480px;
	height:670px;
	background-position: center bottom 0px;
	background-repeat: no-repeat;
	-webkit-background-size:125% auto;
	background-size:125% auto;
	background-image: url('/images/Renders/Thermostat_tbz500wh.png');
}

.DeviceRender.thermoprem{
	width:480px;
	height:650px;
	background-position: left 14px bottom -20px;
	background-repeat: no-repeat;
	-webkit-background-size:auto 90%;
	background-size:auto 90%;
	background-image: url('/images/Renders/Thermostat2_prem.png');
}

.DeviceRender.camera{
	width:480px;
	height:650px;
	background-position: center bottom 30px;
	background-repeat: no-repeat;
	-webkit-background-size:auto 80%;
	background-size:auto 80%;
	background-image: url('/images/Renders/AmcrestCamera.png');
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

.DeviceRender.aladdin{
	width:480px;
	height:650px;
	background-position: center bottom 10px;
	background-repeat: no-repeat;
	-webkit-background-size:auto 80%;
	background-size:auto 80%;
	background-image: url('/images/Renders/Aladdin.png');
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

.DeviceRender.doorsensor{
	width:480px;
	height:650px;
	background-position: center bottom 10px;
	background-repeat: no-repeat;
	-webkit-background-size:auto 80%;
	background-size:auto 80%;
	background-image: url('/images/Renders/DWZWAVE2_doorsensor.png');
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

.DeviceRender.security{
	width:480px;
	height:650px;
	background-position: left 60px bottom 10px;
	background-repeat: no-repeat;
	-webkit-background-size:auto 90%;
	background-size:auto 90%;
	background-image: url('/images/Renders/security.png');
}

.DeviceRender.energy{
	width:480px;
	height:650px;
	background-position: left 60px bottom 10px;
	background-repeat: no-repeat;
	-webkit-background-size:auto 90%;
	background-size:auto 90%;
	background-image: url('/images/Renders/front_energy.png');
}

@media(max-width: 767px){
  .graphicOverlay .DeviceRender{
    width: 100vw !important;
    height: 80vh !important;
    background-position: center bottom 30px !important;
    background-size:auto 50% !important;
  }
}

.imgdrk50{ filter: brightness(50%); }
.imgdrk60{ filter: brightness(60%); }
.imgdrk70{ filter: brightness(70%); }
.imgdrk80{ filter: brightness(80%); }
.imgdrk90{ filter: brightness(90%); }

/* ------------------------------------------------------------ *\
	features
\* ------------------------------------------------------------ */

/* --------------- Feature Sub ------------ */

.product .feature-sub {
	background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(146, 127, 84, 0.99)), url(../images/feature-bg.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 150px 0 150px 0;
}

.product .sub-inner {
	max-width: 500px;
	float: right;
}

.feature-sub .sub-inner h1 {
	font-family: 'Josefin Sans';
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	color: #FFFFFF;
	margin: 0 0 30px 0;
}

.feature-sub .sub-inner .btn-action {
	color: #FFFFFF;
	background: #3333CC;
	border-color: #3333CC;
}

.feature-sub .sub-inner .btn-action:hover {
	color: #3333CC;
	background: transparent;
	border-color: #3333CC;
}

.product .feature-sub .sub-inner .btn-action {
	color: #FFFFFF;
	background: #82714a;
	border-color: #82714a;
}

.product .feature-sub .sub-inner .btn-action:hover {
	color: #82714a;
	background: transparent;
	border-color: #82714a;
}

.feature-sub {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url(../images/image-bg.jpg);
	padding: 150px 0 150px 0;
}

.sub-inner {
	max-width: 500px;
	float: left;
}


.feature{background-color: #2f2d2f; width: 100%; height:500px; }

@media (max-width: 768px) {
	.feature{height:100%; padding: 20px;}
	.feature .f-single {padding: 10px 0px 50px 10px;}
}

@media (min-width: 768px) and (max-width: 1169px) {
	.feature{height:100%;}
	.feature .f-single {padding: 10px 0px 40px 10px;}
	.feature .col-md-4 {width: 50%; float:left;}
	.feature .container {width: 750px; margin: 0 auto;}
}

@media (min-width: 1170px) {
	.feature .col-md-4 {width: 33.333%; float:left;}
	.feature .container {max-width:1110px; margin:0 auto;}
}

.fIcon{
	width:70px;
	height:70px;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size:auto 100%;
	background-size:auto 100%;
}

/* Lighting Feature Icons */
.Icon-Energy{background-image: url('/images/Icons/HomeOtto_Icons_01.png');}
.Icon-Security{background-image: url('/images/Icons/HomeOtto_Icons_02.png');}
.Icon-Control{background-image: url('/images/Icons/HomeOtto_Icons_03.png');}
.Icon-Dimmer{background-image: url('/images/Icons/HomeOtto_Icons_04.png');}
.Icon-Pairing{background-image: url('/images/Icons/HomeOtto_Icons_05.png');}
.Icon-Presets{background-image: url('/images/Icons/HomeOtto_Icons_06.png');}

/* Locks Feature Icons */
.smartlocks .Icon-01{background-image: url('/images/Icons/HomeOtto_Icons_07.png');}
.smartlocks .Icon-02{background-image: url('/images/Icons/HomeOtto_Icons_08.png');}
.smartlocks .Icon-03{background-image: url('/images/Icons/HomeOtto_Icons_09.png');}
.smartlocks .Icon-04{background-image: url('/images/Icons/HomeOtto_Icons_10.png');}
.smartlocks .Icon-05{background-image: url('/images/Icons/HomeOtto_Icons_11.png');}
.smartlocks .Icon-06{background-image: url('/images/Icons/HomeOtto_Icons_12.png');}

/* smartcamera Feature Icons */
.smartcamera .Icon-01{background-image: url('/images/Icons/HomeOtto_Icons_13.png');}
.smartcamera .Icon-02{background-image: url('/images/Icons/HomeOtto_Icons_14.png');}
.smartcamera .Icon-03{background-image: url('/images/Icons/HomeOtto_Icons_15.png');}
.smartcamera .Icon-04{background-image: url('/images/Icons/HomeOtto_Icons_16.png');}
.smartcamera .Icon-05{background-image: url('/images/Icons/HomeOtto_Icons_10.png');}
.smartcamera .Icon-06{background-image: url('/images/Icons/HomeOtto_Icons_06.png');}

/* smartthermo Feature Icons */
.smartthermo .Icon-01{background-image: url('/images/Icons/HomeOtto_Icons_19.png');}
.smartthermo .Icon-02{background-image: url('/images/Icons/HomeOtto_Icons_20.png');}
.smartthermo .Icon-03{background-image: url('/images/Icons/HomeOtto_Icons_21.png');}
.smartthermo .Icon-04{background-image: url('/images/Icons/HomeOtto_Icons_22.png');}
.smartthermo .Icon-05{background-image: url('/images/Icons/HomeOtto_Icons_23.png');}
.smartthermo .Icon-06{background-image: url('/images/Icons/HomeOtto_Icons_24.png');}

/* smartthermo2 Feature Icons */
.smartthermo2 .Icon-01{background-image: url('/images/Icons/HomeOtto_Icons_25.png');}
.smartthermo2 .Icon-02{background-image: url('/images/Icons/HomeOtto_Icons_26.png');}
.smartthermo2 .Icon-03{background-image: url('/images/Icons/HomeOtto_Icons_27.png');}
.smartthermo2 .Icon-04{background-image: url('/images/Icons/HomeOtto_Icons_28.png');}
.smartthermo2 .Icon-05{background-image: url('/images/Icons/HomeOtto_Icons_29.png');}
.smartthermo2 .Icon-06{background-image: url('/images/Icons/HomeOtto_Icons_30.png');}

/* smartsecure Feature Icons */
.smartsecure .Icon-01{background-image: url('/images/Icons/HomeOtto_Icons_31.png');}
.smartsecure .Icon-02{background-image: url('/images/Icons/HomeOtto_Icons_32.png');}
.smartsecure .Icon-03{background-image: url('/images/Icons/HomeOtto_Icons_33.png');}
.smartsecure .Icon-04{background-image: url('/images/Icons/HomeOtto_Icons_34.png');}
.smartsecure .Icon-05{background-image: url('/images/Icons/HomeOtto_Icons_35.png');}
.smartsecure .Icon-06{background-image: url('/images/Icons/HomeOtto_Icons_36.png');}

/* smartenergy Feature Icons */
.smartenergy .Icon-01{background-image: url('/images/Icons/HomeOtto_Icons_37.png');}
.smartenergy .Icon-02{background-image: url('/images/Icons/HomeOtto_Icons_38.png');}
.smartenergy .Icon-03{background-image: url('/images/Icons/HomeOtto_Icons_39.png');}
.smartenergy .Icon-04{background-image: url('/images/Icons/HomeOtto_Icons_40.png');}
.smartenergy .Icon-05{background-image: url('/images/Icons/HomeOtto_Icons_41.png');}
.smartenergy .Icon-06{background-image: url('/images/Icons/HomeOtto_Icons_42.png');}

/* ------------------------------------------------------------ *\
	easyaccess
\* ------------------------------------------------------------ */
.easyaccess { width:100%; position:relative; display:-webkit-flex; display:-ms-flexbox; display:flex; position: relative; margin: 0 auto; }
.easyaccess .container{ /*background-color: #999999;*/ width:100%; height:500px;}
.easyaccess .rightFloat{ float:right; }
.easyaccess .leftFloat{ float:left; }

.DevShot{
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size:cover;
	background-size:cover;
}

.Dev-Lights{background-image: url('/images/Deviceshots/Lights.jpg');}
.Dev-Locks{background-image: url('/images/Deviceshots/Locks.jpg');}
.Dev-Camera{background-image: url('/images/Deviceshots/Camera.jpg');}
.Dev-Thermo{background-image: url('/images/Deviceshots/thermostat.jpg');}
.Dev-Thermoprem{background-image: url('/images/Deviceshots/thermostat-2.jpg');}

/* ------------------------------------------------------------ *\
	tech spec
\* ------------------------------------------------------------ */
.techspec { width:100%; position:relative; display:-webkit-flex; display:-ms-flexbox; display:flex; position: relative; margin: 0 auto; }
.techspec{ /*background-color: #2f2d2f;*/ width:100%; height:500px;}

@media (max-width: 768px) {
	.techspec {height:100%;}
	.techspec .container {width:100%; margin:0 auto;}
	.section.techspec .col-3{width: 80%; float: none; margin:80px auto;}
}

@media (min-width: 768px) and (max-width: 1169px) {
	.techspec .container {width:750px; margin:0 auto;}
}
@media (min-width: 1170px) {
	.techspec .container {width:1170px; margin:0 auto; padding:0 100px;}
}

.techspec .col-3{
	width: 33.333%;
	float: left;
	/*font-family: 'Roboto';*/
  font-size: 14px;
  font-weight: 300;
	text-align: center;
	margin: 150px auto 0 auto;
}

.techspec .col-head{
	background-color: #555;
	font-size: 21px;
	font-weight: 400;
	line-height: 34px;
}

.techspec .col-3 p{
	text-align: center;
	line-height: 1.3em;
	margin: 15px 0;
}

.techspec .frontDevShot.lite {
	width:100%;
	height:300px;
	background: url('/images/Renders/front_switch.png') no-repeat top center;
	-webkit-background-size:auto 80%;
	background-size:auto 80%;
}

.techspec .frontDevShot.lock {
 	width:100%;
 	height:300px;
 	background: url('/images/Renders/front_lock.png') no-repeat top center;
 	-webkit-background-size:auto 90%;
 	background-size:auto 90%;
}

.techspec .frontDevShot.garage {
 	width:100%;
 	height:300px;
 	background: url('/images/Renders/Aladdin.png') no-repeat top center;
 	-webkit-background-size:auto 90%;
 	background-size:auto 90%;
}

.techspec .frontDevShot.doorsensor {
 	width:100%;
 	height:300px;
 	background: url('/images/Renders/DWZWAVE2_doorsensor.png') no-repeat top center;
 	-webkit-background-size:auto 90%;
 	background-size:auto 90%;
}

.techspec .frontDevShot.thermo {
  width:100%;
  height:300px;
  background: url('/images/Renders/ThermoFront_tbz500wh.png') no-repeat top 3px center;
  -webkit-background-size:auto 65%;
  background-size:auto 65%;
}

.techspec .frontDevShot.thermo2 {
  width:100%;
  height:300px;
  background: url('/images/Renders/Thermostat2_front.png') no-repeat top center;
  -webkit-background-size:auto 95%;
  background-size:auto 95%;
}

.techspec .frontDevShot.camera {
	width:100%;
	height:300px;
	background: url('/images/Renders/AmcrestCamera.png') no-repeat top -10px center;
	-webkit-background-size:auto 90%;
	background-size:auto 90%;
}

/* ------------------------------------------------------------ *\
	accessanywhere
\* ------------------------------------------------------------ */
.accessanywhere { width:100%; position:relative; display:-webkit-flex; display:-ms-flexbox; display:flex; position: relative; margin: 0 auto; /*background-color: #2f2d2f;*/}
.accessanywhere .container{ width:100%; height:500px; display: block;}

@media (max-width: 767px) {
	.container .textBlock{width:100%;}
}

.accessimg{
	background-image: url('/images/Access-Anywhere.jpg');
	background-position: bottom left 5px;
	background-repeat: no-repeat;
	-webkit-background-size:auto 95.5%;
	background-size:auto 95.5%;
	margin-bottom: 5px;
}

.textBlock{
	width:50%;
	height:100%;
	display:table;
	margin: auto;
	text-align: center;
	vertical-align: middle;
	float: left;
}

.textBlock article{
	display:table-cell;
	vertical-align: middle;
}

.textBlock h1{
	font-size: 32px;
	font-weight: 400;
}

.textBlock p{
	font-size: 18px;
	font-weight: 300;
	margin:10px 60px;
}

/* ------------------------------------------------------------ *\
	carousel
\* ------------------------------------------------------------ */
.owlmar{padding:10px 8px 0 3px;}

.carousel { width:100%; position:relative; display:inline-block; position: relative; margin: 0 auto; /*background-color: #2f2d2f;*/}
.carousel .container{width:100%; height:100%;}

#owl-demo{margin-top: 5px;}

.owl-carousel .item{
	width:100%;
	padding-bottom:120%;
	position: relative;
	text-align: center;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size:cover;
	background-size:cover;
	margin: 0 5px;
}

.owl-carousel .item > article {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;

	color: white;
	font-size: 24px;
	text-align: center;
}

.owl-carousel .item header{
	padding-top: 100px;
	font-size: 30px;
	font-weight: 400;
}

.owl-carousel .item p{
	font-size: 18px;
	font-weight: 300;
	margin:10px 40px;
}

.carousel .ImgSecu{background-image: url('/images/security.jpg');}
.carousel .ImgVoice{background-image: url('/images/voicecontrol2.jpg');}
.carousel .ImgIntegr{background-image: url('/images/Integration.jpg');}
.carousel .ImgLifeStyle{background-image: url('/images/lifestyle.jpg');}
.carousel .ImgFindBuilder{background-image: url('/images/findbuilder.jpg');}
