/* resets */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* Master Styles */
input[type="search"] {
  -webkit-appearance: textfield;
}
html { 
  height: 100vh; /* 100%; */
}
body {
  height: 100%;
  min-height: 100%; 
  overflow: hidden;
  margin: 0;

  /*background-color: #333333;*/
  background: linear-gradient(#333333, #292929);
  background-repeat: no-repeat;
  background-attachment: fixed;

  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size:  1.185vw; /*100%;*/
  color: #EEEEEE;
}
body, .headerBar, .welcome {
  width: 100%;
}

body a {
  text-decoration: none;
}

.mat-sidenav-container a:link, .mat-sidenav-container a:visited, 
.nav a:link, .nav a:visited {
    color: #EEEEEE;
}
.mat-sidenav-container a:hover,
.nav a:hover {
    color: #97d1ff;
}
.mat-sidenav-container a:active,
.nav a:active {
  font-weight: bold;
}

.fixedTop {
  position: fixed;
}
.headerBar {
    background-color: #111111;
    position: fixed;
    top: 0;
    z-index: 2;
    height: 3.125em;
}
.headerName {
    position: fixed;
    top: 0;
    padding: 0.125em 0.25em;
    font-size: 2.25em;
    z-index: 999; /* was 10001 */
}
.textNameLeft {
  color: #97d1ff;
  font-weight: bold;
}
.textNameRight {
  color: #EEEEEE;
  font-weight: bold;
}
/* Safari 4-8 */
/*@-webkit-keyframes shrink {
  from {
    padding-top: 6.25em;
    font-size: 4.5em; 
    color:#333333;
    background-color: #FFFFFF;
    }
  to {
    padding-top: 0em;
    font-size: 1.5em; 
    color: #DDDDDD;
    background-color: #444444;
    }
}
@keyframes shrink {
  from {
    padding-top: 6.25em;
    font-size: 4.5em; 
    color:#333333;
    background-color: #FFFFFF;
    }
  to {
    padding-top: 0em;
    font-size: 1.5em; 
    color: #DDDDDD;
    background-color: #444444;
    }
}
.welcome {
  text-align: center;
  font-weight: bold;
  animation-name: shrink;
  animation-delay: 3s;
  animation-duration: 1s; 
  animation-fill-mode: both;
}*/
@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOut {
  0% {opacity: 1; z-index:998;} /* 10000 */
  100% {opacity: 0; z-index: -1;}
}

@keyframes fadeOut {
  0% {opacity: 1; z-index:998;} /* 10000 */
  100% {opacity: 0; z-index: -1;}
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

img.bgCover {
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 166em;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 166em) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -83em;   /* 50% */
  }
}


@-webkit-keyframes shrink {
  from {
    padding-top: 6.25em;
    font-size: 4.5em; 
    }
  to {
    padding-top: 0em;
    font-size: 0em; 
    }
}
@keyframes shrink {
  from {
    padding-top: 6.25em;
    height: 15.625em;
    /*font-size: 4.5em; */
    padding-bottom: 6.25em;
    }
  to {
    padding-top: 0em;
    /*font-size: 0em; */
    height: 0em;
    padding-bottom: 0em;
    }
}
.welcome {
  text-align: center;
  font-weight: bold;
  color: #DDDDDD;
  background-color: #444444;
  -webkit-animation-name: shrink;
  animation-name: shrink;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-duration: 1s; 
  animation-duration: 1s; 
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  overflow: hidden;
  font-size: 4.5em;
  margin-top: 3.125em;
}
.pageloader {
  margin-top: 4.375em;
  width: 100%;
  text-align: center;
  color: #888;
}


/* loader */
#circleG{
	width:5.875em;
	/*margin:auto;*/
  position: fixed;
  left: 50%;
  bottom: 1.25em;
  margin-left: -2.9375em;
  z-index: 10;
}

.circleG{
	background-color:#EEEEEE;
  opacity: 0;
  transform: scale(0.5);
	float:left;
	height:1.25em;
	margin-left:0.6875em;
	width:1.25em;
	animation-name:bounce_circleG;
		-o-animation-name:bounce_circleG;
		-ms-animation-name:bounce_circleG;
		-webkit-animation-name:bounce_circleG;
		-moz-animation-name:bounce_circleG;
	animation-duration:1.0s; /* 0 .8775s */
		-o-animation-duration:1.0s;
		-ms-animation-duration:1.0s;
		-webkit-animation-duration:1.0s;
		-moz-animation-duration:1.0s;
	animation-iteration-count:10; /* replaced infinite */
		-o-animation-iteration-count:10;
		-ms-animation-iteration-count:10;
		-webkit-animation-iteration-count:10;
		-moz-animation-iteration-count:10;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	border-radius:13px;
		-o-border-radius:13px;
		-ms-border-radius:13px;
		-webkit-border-radius:13px;
		-moz-border-radius:13px;
}

#circleG_1{
	animation-delay:0s; /* 0 .1795s */
		-o-animation-delay:0s;
		-ms-animation-delay:0s;
		-webkit-animation-delay:0s;
		-moz-animation-delay:0s;
}

#circleG_2{
	animation-delay:0.25s; /* 0 .4055s */ 
		-o-animation-delay:0.25s;
		-ms-animation-delay:0.25s;
		-webkit-animation-delay:0.25s;
		-moz-animation-delay:0.25s;
}

#circleG_3{
	animation-delay:0.5s; /* 0 .5285s */
		-o-animation-delay:0.5s;
		-ms-animation-delay:0.5s;
		-webkit-animation-delay:0.5s;
		-moz-animation-delay:0.5s;
}


@keyframes bounce_circleG{
	0%{}
	50%{ opacity: 1; transform: scale(1); }
	100%{}
}

@-o-keyframes bounce_circleG{
	0%{}
	50%{ opacity: 1; transform: scale(1); }
	100%{}
}

@-ms-keyframes bounce_circleG{
	0%{}
	50%{ opacity: 1; transform: scale(1); }
	100%{}
}

@-webkit-keyframes bounce_circleG{
	0%{}
	50%{ opacity: 1; transform: scale(1); }
	100%{}
}

@-moz-keyframes bounce_circleG{
	0%{}
	50%{ opacity: 1; transform: scale(1); }
	100%{}
}

/*@keyframes bounce_circleG{
	0%{}
	50%{
		background-color:rgb(0,0,0);
	}
	100%{}
}

@-o-keyframes bounce_circleG{
	0%{}
	50%{
		background-color:rgb(0,0,0);
	}
	100%{}
}

@-ms-keyframes bounce_circleG{
	0%{}
	50%{
		background-color:rgb(0,0,0);
	}
	100%{}
}

@-webkit-keyframes bounce_circleG{
	0%{}
	50%{
		background-color:rgb(0,0,0);
	}
	100%{}
}

@-moz-keyframes bounce_circleG{
	0%{}
	50%{
		background-color:rgb(0,0,0);
	}
	100%{}
}*/



.themeColor {
  color: #2399e5; /* matches primeng theme */
}

/* PrimeNG styles */
div.filterMultiselect {
  margin: 0.7em;
  width: 96%;
  background-color: transparent;
  border: 1px solid #AAAAAA;
  font-size: 0.875em;
  font-weight: normal;
  white-space: nowrap;    
}
div.ui-multiselect:not(.ui-state-disabled):hover {
  color: #EEEEEE;
}
div.filterMultiselect .ui-multiselect-header {
  /*display: none;*/
  margin-bottom: 0;
  background-color: #333333;
}
body .ui-multiselect .ui-multiselect-header .ui-multiselect-close {
  color: #EEEEEE;
}
div.ui-multiselect-items-wrapper {
  background-color: #333333;
}
ul.ui-multiselect-items {
  background-color: #333333;
}
body .ui-widget {
  font-family: Lato, Arial, Helvetica, sans-serif !important;
}
body .ui-widget-content{
  border: 0;
  /*background-color: #333333; use this to set bg color of all primeng controls, incl carousel items*/
}
body .ui-carousel {
  background-color: transparent;
}
body .ui-carousel .ui-carousel-header {
  height: 2.7em;
  padding: 0.1875em;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #888888;
}
body .ui-carousel .ui-carousel-viewport .ui-carousel-items .ui-carousel-item {
  background-color: transparent;
}
body .ui-widget-header {
  border: 0;
}
.ui-carousel-header * {
    font-size: 1.5em;
}
span.ui-carousel-header-title {
  font-size: 1.0em;
  line-height: 2.0em;
}
body .ui-carousel .ui-carousel-button:hover {
  color: #EEEEEE;
  opacity: 1;
}
body .ui-carousel .ui-carousel-button.ui-state-disabled:hover {
    color: #767b7f;
    opacity: 0.35;  
}
button.ui-button {
    color: #EEEEEE;
    background-color: transparent;
    border: 1px solid #AAAAAA;
}
button.ui-button:focus, button.ui-button:enabled:hover {
    background-color: #444444;
}
div.ui-dialog.ui-widget-content {
    background-color: #2B2B2B; /* transparent; */  
}
div.ui-dialog-content.ui-widget-content {
    background-color: #2B2B2B;
}
div.ui-dialog-titlebar.ui-widget-header {
    background-color: #2B2B2B;
    color: #97d1ff;
    border-bottom-color: transparent;
}
div.ui-dialog .ui-dialog-footer {
  background-color: #2B2B2B;
  border-top: 1px solid #444444;
}
/* Material style overrides */
.mat-sidenav-container {
  background-color: transparent !important; /* allows layers underneath to show */
  color: #EEEEEE !important; /* should be body color */
  transform: none !important;
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  /* z-index: auto !important; */ /* removed to allow inherit z-index of 1 from .mat-drawer-container as certain extensions that create overlays were blocking mouse events when set to auto. */
}
.mat-sidenav-content {
  transform: none !important;
  /*overflow: hidden !important;*/
  z-index: auto !important;
}
 .mat-slider-horizontal .mat-slider-wrapper {
    height: 0.125em !important;
    top: 1.4375em !important;
    left: 0.5em !important;
    right: 0.5em !important;
}
.mat-slider-horizontal .mat-slider-track-wrapper {
  height: 0.125em !important;
}
.mat-slider-thumb {
  right: -0.625em !important;
  bottom: -0.625em !important;
  width: 1.25em !important;
  height: 1.25em !important;
} 

.mat-slider-thumb,.mat-slider-thumb-label {
  background-color: rgba(206, 61, 110, 1) !important;
}

 .mat-slider-horizontal .mat-slider-thumb-label {
  right: -0.875em !important;
  top: -2.5em !important;
}

.mat-slider-thumb-label {
  width: 1.75em !important;
  height: 1.75em !important; 
}

.mat-slider-thumb-label-text {
  font-size: 0.75em;
} 

.mat-tooltip {
    padding: 0.375em 0.5em !important;
    border-radius: 0.125em !important;
    margin: 0.875em !important;
    max-width: 18em !important; 
    font-family: Lato, Arial, Helvetica, sans-serif !important;
    font-size: 0.7em !important; 
    color: #fff;
 }
 .mat-slide-toggle-input {
   left: 0.625em !important;
 }
 .mat-slide-toggle-content {
    font-size: 0.875em !important;
    font-family: Lato, Arial, Helvetica, sans-serif !important;
    font-weight: 500;
}
.mat-slide-toggle-thumb {
    height: 1.25em !important;
    width: 1.25em !important;
}
.mat-slide-toggle-thumb-container {
    top: -0.1875em !important;
    width: 1em !important;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
  transform: translate3d(1em,0,0) !important;
}
.mat-slide-toggle-bar {
    left: 0.0625em !important;
    top: 0.3125em !important;
    width: 2.125em !important;
    height: 0.875em !important;
    border-radius: 0.5em !important;
}
.mat-slide-toggle-container {
    margin-right: 0.5em;
    width: 2.25em !important;
    height: 1.5em !important;
}
.mat-slide-toggle {
    height: 1.5em !important;
    margin: 1em 0 !important;
    line-height: 1.5em !important;
}
.mat-slide-toggle-ripple {
  top: -0.8125em !important;
  left: -0.8125em !important;
  height: 2.875em !important;
  width: 2.875em !important;
}/* swap track color for streams slider */

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: rgba(206, 61, 110, 1) !important;
}

.elasticFilter .mat-slider-track-background, .streamsFilter .mat-slider-track-background {
  background-color: rgba(206, 61, 110, 1) !important;
}
.elasticFilter .mat-slider-track-fill, .streamsFilter .mat-slider-track-fill {
  background-color: rgba(206, 61, 110, 1) !important;
  /* use for transparent track: background-color: rgba(0,0,0,.26) !important;*/
}

.cdk-overlay-container {
  z-index: 2000; /* default is 1000, changed to allow tooltip to be in front of primeng dialog */
}

/* Google Places Input override */
.pac-container {
    z-index: 1051 !important;
}

/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */

.fullscreen {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.loading {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: -1;
}
/* .loading screen is visible when app is not bootstraped yet, .my-app is empty */
my-app:empty + .loading {
    opacity: 1;
    z-index: 10;
}
.loadingMin {
  background-color: #111111;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 11px;
}
 
/* Track */
::-webkit-scrollbar-track {
/*     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  */
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(200, 200, 200, 0.3); 
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(200,200,200,0.2); 
}


/* Video */
.banner-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video {
  display: inline-block;
  vertical-align: baseline;
}

/* Callout */
.arrow_box {
  padding: 0.5em 1.5em 0.5em 1em;
  border-radius: 0.25em;
  font-weight: normal;
  color: #97d1ff;
  transform: translate(1.1em,-1.1em);
  box-shadow: 0px 0px 1.25em rgba(0,0,0,0.5);
  z-index: 10001;
}
/* modified from cssarrowplease.com */
.arrow_box {
	position: absolute; /* modified from relative */
  background: #555555;
  width: 30em;
}
.arrow_box:after {
  left: -1.5em;
	top: 1em;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(85, 85, 85, 0);
	border-right-color: #555555;
	border-width: 0.9em;
	margin-top: -0.9em;
}

/* Content styles */
.contentContainerWide {
    margin: 0;  
}
.contentWide {
  padding: 1em 5em 2em 5em;
}
.contentContainer {
  margin: 0 4em;
}
.contentTitle {
    font-size: 2em;
    font-weight: bold;
    padding: 0 0 0.5em;
    color: #EEEEEE; /* #97d1ff */
}
.contentText {
  font-size: 1.5em;
  padding-bottom: 1em;
}
.hiw-stepDescription {
  padding: 1em 5em 4em;
}
.hiw-stepNumber{
    font-size: 3em;
    font-weight: bolder;
}
.hiw-stepTitle {
    font-size: 2em;
    font-weight: bold;
    padding: 0 0 0.5em;
    color: #97d1ff;
}
.hiw-stepText {
    font-size: 1.25em;
    padding-bottom: 1em;
}
.hiw-stepImage {
  padding: 2em;
  max-height: 25em;
  overflow: hidden;
}
.hiw-stepImage img {
  width: 30em;
  border-radius: 0.5em;
}
.hiw-substep4 .hiw-stepText {
  height: 8em;
}
.hiw-substep2 .hiw-stepText {
  height: 4em;
}
.hiw-substep4 .hiw-stepImage, .hiw-substep2 .hiw-stepImage {
  padding: 0.5em;
}
.hiw-substep4 .hiw-stepImage img {
  width: 15em;
  border-radius: 0.5em;
}
.hiw-substep2 .hiw-stepImage img {
  width: 30em;
  border-radius: 0.5em;
}
.hiw-stepImageDouble img {
  width: 7em;
  margin-left: 0.5em;
  vertical-align: top;
  border-radius: 0.5em;
}
.hiw-stepOdd  {
    background-color: #333333;
}
.hiw-stepEven {
    background-color: #444444;
}
.hiw-stepTextHighlight {
  display: inline;
  color: #97d1ff;
}

.ptrs-stepDescription {
  padding: 5em 5em 4em;
}

.ptrs-stepImage {
  padding: 2em 0 0 5em;
  max-height: 22em;
  overflow: hidden;
}
.ptrs-stepImage img {
  width: 25em;
  border-radius: 0.5em;
  box-shadow: 0 0 1em 0.75em #00000018;
}
.hiw-substep4 .hiw-stepText {
  height: 8em;
}
.hiw-substep2 .hiw-stepText {
  height: 4em;
}
.hiw-substep4 .ptrs-stepImage, .hiw-substep2 .ptrs-stepImage {
  padding: 0.5em;
}
.hiw-substep4 .ptrs-stepImage img {
  width: 15em;
  border-radius: 0.5em;
}
.hiw-substep2 .ptrs-stepImage img {
  width: 30em;
  border-radius: 0.5em;
}

.emailUsButton {
  display: block;
  /* margin: 0 auto; */
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  width: 12em;
  position: relative;
  border: 1px solid #EEEEEE;
  border-radius: 0.5em;
}
.emailUsIcon {
  font-size: 1.5em;
  opacity: 0.75;
  padding: .5em;
  text-align: center;
}
.emailUsIcon i {
  padding: 0 0.25em;
}


.head {
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: -0.1em;
  padding-top: 0.5em;
  text-align: center;
  font-size: 8em;
}
.how-bg {
  background-image: url(https://s3-us-west-2.amazonaws.com/spose/img/bg/tv-controls-head-fade-unfocus3s.png);
  height: 30vw;
  margin-bottom: -1em;
}
.about-bg {
  background-image: url(https://s3-us-west-2.amazonaws.com/spose/img/bg/tv-stand-head-fade-unfocus3s.png);
  height: 40vw;
  margin-bottom: -2.2em;
}
.ptrs-bg {
  background-image: url(https://s3-us-west-2.amazonaws.com/spose/img/bg/shake-head-fade-unfocus.png);
  height: 40vw;
  margin-bottom: -2.2em;
}

/* precache images */
:root:before {
  content: url(https://s3-us-west-2.amazonaws.com/spose/img/bg/tv-controls-head-fade-unfocus3s.png)
           url(https://s3-us-west-2.amazonaws.com/spose/img/bg/tv-stand-head-fade-unfocus3s.png)
           url(https://s3-us-west-2.amazonaws.com/spose/img/bg/shake-head-fade-unfocus.png);
  /* partial fallback */
  /*background-image: url(/@/Storage/_files/68/file.jpg);*/
  visibility: hidden;
  position: absolute;
  left: -999em;
}

/* Doorbell.io */
button#doorbell-button {
    color: #CCCCCC;
    background-color: #444444;
    font-size: 0.9em;
}
#doorbell-background {
  background-color: #424242;
  opacity: 0.7;
}
#doorbell form {
  background-color: #2B2B2B;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#doorbell form legend {
  color: #97d1ff;
  border: none;
  font-size: 1.5em;
  font-weight: bold;
}
#doorbell form textarea, #doorbell form input[type="email"] {
  border: 1px solid #AAAAAA;
  background-color: transparent;
  color: #EEEEEE;
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 0.4em;
  resize: none;
}
#doorbell-container .close {
  color: white;
}
#doorbell-container .close:hover {
  opacity: 0.7;
}
#doorbell .buttons button {
  background-color: transparent;
  color: #EEEEEE;
  border-radius: 0.25em;
  padding: 0.5em;
  font-size: 1em;
  border: 1px solid #AAAAAA;  
}
#doorbell .buttons button:hover {
  background-color: #444444;
}
#doorbell #doorbell-powered-by {
  opacity: 0.8;
  color: #EEEEEE;
}

/* noscript styles*/
.noscriptContainer {
  position: fixed;
  z-index: 11;
  padding-top: 10vh;
  width: 100%;
  text-align: center;
  background-color: #222222;
}
.noscriptText {
  text-align: center;
  font-weight: 400;
  color: #BBBBBB;
  font-size: 2em;
}
.noscriptHighlight {
  font-weight: 700;
  color: #97d1ff;
  font-size: 1.5em;
}
.noscriptMessage {
  margin: 1.5em;
  font-size: 1.2em;
}
body a.noscriptLink {
  color: #97d1ff;
  text-decoration: underline;
}
.noscriptLink:hover {
  font-weight: bold;
}
.noscriptImg {
  width: 60em; 
  margin:0 auto;
}
/* Browser Update */
/*.buorg {
  text-align: center !important;
  border-bottom: 2px solid #555555 !important;
}
.buorg p {
  background-color: #444444;
  color: #EEEEEE;
}
.buorg-update {
  background-color: #3d9853 !important;
}
.buorg-ignore {
  background-color: #c4485b !important;
}
.buorgHighlight {
  font-weight: bold;
  color: #97d1ff;
}*/
body .buorg {
  text-align: center;
  border-bottom: 2px solid #555555;
}
body .buorg div {
  background-color: #444444;
  color: #EEEEEE;
}
body #buorgul {
  background-color: #3d9853;
}
body #buorgig {
  background-color: #c4485b;
}
body .buorgHighlight {
  font-weight: bold;
  color: #97d1ff;
}