#header {background-image: url(https://s3.amazonaws.com/ba-en-us/includes/senseme/header.jpg);z-index: 7;}

.vertical-rule {
	width: 5px;
	background: #ffc425;
	position: absolute;
	left: -15px;
	top: 0;
	min-height: 0;
	transition: 1s all;
}

.text-container .text {
	overflow: hidden;
}

.text-container .text .move-this {
	opacity: 0;
	left: -100%;
	position: relative;
	transition: 1s all 0.5s;
}
	
.text-container.animated .text .move-this {
	opacity: 1;
	left: -0;
}

.text-container.animated .vertical-rule {
	min-height: 100%;
}

#what {
	position: relative;
}

#what .row {
	display: flex;
	display: -ms-flex;
	display: -moz-flex;
	display: -webkit-flex;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding-top: 0;
}

#what .image-container img {
	margin-left: -15px;
}

#what .text-container {
	margin-top: 2em;
	z-index: 8;
}

#how .flex {justify-content: space-between;}
#how .icon {width: 125px; margin: 0 auto;}

.dialog-box .dialog-box-container {display: flex; align-items: center;}
.dialog-box .icon {width: 200px; height: 200px; margin-right: 2em;}
.dialog-box .logo {width: auto; display: inline-block; margin-right: 2em;}

#support .yellow-button {margin-left: 0.5em; margin-right: 0.5em; }

/* Exploder CSS */ 

#fan {margin-left: auto; position: relative; margin-right: auto; height: 100%; transition: opacity 0.5s; height: 640px;}
#exploder-trigger {position: absolute; bottom: 0; height: 10px; width: 100%; display: block;}

.piece {transition: top 2s, transform 0.5s;}
.fan-piece {transition: top 2s, transform 0.5s;}

#mount {z-index: 2; left: 282px; top: -100px; width: 300px; position: absolute;}
#blades {z-index: 5;position: absolute; transition: top 2s, transform 0.5s; top: -349px; left: -533px; width: 1800px;}
#blades.below {z-index: 5; cursor: initial;}
#board {z-index: 4; left: 400px; top: 242px; width: 80px; position: absolute;}
#sensor {z-index: 6; left: 392px; top: 235px; width: 98px; position: absolute;}
#lens {z-index: 7;left: 359px; top: 237px; width: 158px; position: absolute;}

.label-line {background: #ffc245; display: block; height: 2px; position: relative; top: 11px; margin-right: 5px;}
.label-line:after {background: transparent; border-radius: 50%; border-color: #ffc245; content: ""; display: inline-block; float: left; height: 8px; position: absolute; left: -10px; top: -4px; width: 8px; border: 2px solid #ffc245;}

#processor-label.fan-label {left: 428px; top: 422px; position: absolute; z-index: 11; transition: opacity 2s;}
#temperature-label.fan-label {left: 441px; top: 510px; position: absolute; z-index: 11; transition: opacity 2s;}
#motion-label.fan-label {left: 415px; top: 524px; position: absolute; z-index: 11; transition: opacity 2s;}
#humidity-label.fan-label {left: 428px; top: 538px; position: absolute; z-index: 11; transition: opacity 2s;}

#processor-label .label-line {width: 200px; float: left;}
#processor-label .text {font-size: 0.8em; text-transform: uppercase;}
#temperature-label .label-line {width: 250px; float: left;}
#temperature-label .text {font-size: 0.8em; text-transform: uppercase;}
#motion-label .label-line {width: 315px; float: left;}
#motion-label .text {font-size: 0.8em; text-transform: uppercase;}
#humidity-label .label-line {width: 280px; float: left;}
#humidity-label .text {font-size: 0.8em; text-transform: uppercase;}

/* End Exploder CSS */

@media only screen and (max-width: 1500px) {
	.dialog-box {width: 70%;}

	#fan {margin-left: -100px;}
}

@media only screen and (max-width: 1400px) {

	/* Exploder CSS */ 

	#mount {left: 142px;}
	#blades {left: -673px;}
	#board {left: 260px;}
	#sensor {left: 252px;}
	#lens {left: 219px;}

	#processor-label.fan-label {left: 289px;;}
	#temperature-label.fan-label {left: 301px;}
	#motion-label.fan-label {left: 276px;}
	#humidity-label.fan-label {left: 288px;}

	/* End Exploder CSS */
}

@media only screen and (max-width: 1200px) {
	.dialog-box {width: 90%;}

	/* Exploder CSS */ 

	#mount {left: 52px;}
	#blades {left: -763px;}
	#board {left: 170px;}
	#sensor {left: 162px;}
	#lens {left: 129px;}

	.label-line {height: 1px;top: 8px;}
	.label-line:after {border: 1px solid #ffc245;}

	#processor-label.fan-label {left: 200px;;}
	#temperature-label.fan-label {left: 211px;}
	#motion-label.fan-label {left: 186px;}
	#humidity-label.fan-label {left: 198px;}

	/* End Exploder CSS */

}

@media only screen and (max-width: 1100px) {

	/* Exploder CSS */ 

	.fan-label {left: 80px; font-size: 0.9em;}

	/* End Exploder CSS */

}

@media only screen and (max-width: 991px) {
	#what {
		background-image: unset;
		height: auto;
		text-align: center;
	}
	
	#how .flex {
		display: block;
	}
	
	.icon-container {
		width: 33%;
		float: left;
	}
	
	.icon-container:nth-child(5), .icon-container:nth-child(6) {
		width: 50%;
	}
	
	.dialog-box .dialog-box-container {display: block; text-align: center;}
	.dialog-box .icon {margin-bottom: 2em; margin-right: 0;}

	/* Exploder CSS */ 

	#fan {width: 767px; height: 600px;}
	
	.fan-label {left: 80px; font-size: 0.7em;}
	
	#mount {z-index: 2; left: 282px; top: -100px; width: 300px; position: absolute;}
	#blades {z-index: 5;position: absolute;transition: top 2s, transform 0.5s;top: -349px;left: -533px;width: 1800px;}
	#blades.below {z-index: 5; cursor: initial;}
	#board {z-index: 4; left: 400px; top: 242px; width: 80px; position: absolute;}
	#sensor {z-index: 6; left: 392px; top: 235px; width: 98px; position: absolute;}
	#lens {z-index: 7;left: 359px;top: 237px;width: 158px;position: absolute;}
	#label-lines {left: 36px; top: 89px; opacity: 0; z-index: 1; position: absolute;}

	/* End Exploder CSS */
}

@media only screen and (max-width: 767px) {
	#how .icon {
		width: 100px;
	}
	
	.icon-container {
		width: 50%;
		float: left;
		margin-bottom: 4em;
	}
	
	.icon-container:nth-child(6) {
		width: 100%;
		margin-bottom: 0;
	}
	
	.container .logo {margin: 0 auto; display: block;}
	
	.dialog-box .icon {width: 100px; height: 100px;}
	.dialog-box .logo {margin-right: unset;}
}