@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext);

body {

	background: rgb(20,20,20);
	color: rgb(240,240,240);
	margin: 0;
	text-align: center;

	font-family: Roboto,arial,sans-serif;
	font-size: 18px;
	font-weight: 300;

}

:focus {outline:none;}
::-moz-focus-inner {border:0;}

#top-bar {

	font-family: Oswald,Roboto,arial,sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 400;
	color: rgb(240,240,240);

	top: 0px;
	padding: 10px 0;
	background: rgb(0,0,0);
	position: fixed;
	width: 100%;
	text-align: center;
	line-height: 55px;
	z-index: 10000;

	box-sizing: border-box;

}

#top-bar > span {

	display: inline-block;
	height: 100%;
	padding: 0 20px;

}

#top-bar > span > div {

	display: inline-block;

}

#top-bar > .times {

	position: absolute;
	left: 0;
	top: 0;
	font-size: 0.8em;
	line-height: 100%;
	box-sizing: border-box;

}

#top-bar > .times > div {

	display: block;
	position: absolute;

}

.boxes > div > .icon {

	height: 55px;
	width: 55px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	float: left;
	background-origin: content-box;
	padding: 7px;
	border-radius: 7px;
	box-sizing: border-box;

}

.boxes > div > .state {

	margin-left: 65px;
	padding-right: 20px;

}

.boxes {

	margin-left: auto;
	margin-right: auto;
	text-align: left;

}

.boxes div.icon.temp_in { 		 	background-color: rgb(255,100,130); }
.boxes div.icon.temp_in.normal { 	background-image: url('../graphics/icons/itemp_normal.png'); }
.boxes div.icon.temp_in.low { 	 	background-image: url('../graphics/icons/itemp_low.png');}
.boxes div.icon.temp_in.high { 	 	background-image: url('../graphics/icons/itemp_high.png'); }

.boxes div.icon.temp_out { 		 	background-color: rgb(50,130,190); }
.boxes div.icon.temp_out.normal {	background-image: url('../graphics/icons/otemp_normal.png'); }
.boxes div.icon.temp_out.low { 	 	background-image: url('../graphics/icons/otemp_low.png'); }
.boxes div.icon.temp_out.high { 	background-image: url('../graphics/icons/otemp_high.png'); }

.boxes div.icon.illu { 			 	background-color: rgb(255,160,60) }
.boxes div.icon.illu.cloudy { 	 	background-image: url('../graphics/icons/illu_cloudy.png'); }
.boxes div.icon.illu.sunny { 	 	background-image: url('../graphics/icons/illu_sunny.png'); }
.boxes div.icon.illu.night { 	 	background-image: url('../graphics/icons/illu_night.png'); }

.boxes div.icon.hen_c { 			background-color: rgb(230,150,220); }
.boxes div.icon.hen_c.in { 	 	 	background-image: url('../graphics/icons/hen_c_in.png'); }
.boxes div.icon.hen_c.out { 		background-image: url('../graphics/icons/hen_c_out.png'); }

.boxes div.icon.door { 			 	background-color: rgb(150,120,80); }
.boxes div.icon.door.open { 	 	background-image: url('../graphics/icons/door_open.png'); background-color: rgb(150,230,150);}
.boxes div.icon.door.closed { 	 	background-image: url('../graphics/icons/door_closed.png'); }

.boxes div.icon.light { 			background-color: rgb(255,200,0);}
.boxes div.icon.light.off { 	 	background-image: url('../graphics/icons/light_off.png'); background-color: rgb(130,130,130);}
.boxes div.icon.light.on { 	 		background-image: url('../graphics/icons/light_on.png');}

.boxes div.icon.fan { 			 	background-color: rgb(0,200,200); }
.boxes div.icon.fan.off { 	 	 	background-image: url('../graphics/icons/fan_off.png'); background-color: rgb(80,150,150);}
.boxes div.icon.fan.on { 	 	 	background-image: url('../graphics/icons/fan_on.png'); }

.boxes div.icon.heater { 		 	background-color: rgb(255,90,90); }
.boxes div.icon.heater.off { 	 	background-image: url('../graphics/icons/heater_off.png'); background-color: rgb(180,80,80);}
.boxes div.icon.heater.on { 	 	background-image: url('../graphics/icons/heater_on.png'); }


.charts {

	position: relative;

}

.charts > .chart-container {

	position: relative;
	padding-bottom: 40%;
	width: 100%;

}

.charts > .chart-container > div {

  	position: absolute;
  	top: 0; bottom: 0; left: 0; right: 0;

}

.charts-controls {

	margin-top: 30px;
	margin-bottom: 5px;

}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.charts-controls > div {

	box-sizing: border-box;
	padding: 0px 7px 0px 37px;

}

.charts table {

	width: 100%;
  	text-align: left;
  	margin: 50px 0;
  	border-spacing: 10px;

}

.charts table thead, .charts table .salient {

	color: rgb(255, 255, 255);

}


.text h1 {

	font-family: Oswald,Roboto,arial,sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 30px;
	font-weight: 400;
	margin: 0;
	color: rgb(50,50,50);

}
	
.text {

	font-family: arial,sans-serif;
	font-weight: 300;	
	font-size: 18px;
	color: rgb(130,130,130);

}	

#first-banner {

	height: 300px;
	background-image: url('../graphics/main_hen.jpg');
	background-color: rgb(255,0,250);
	background-size:   cover;                   
    background-repeat: no-repeat;
    background-position: center center; 
    
	padding: 170px 0 0 0;
	color: rgb(250,250,250);

}

#first-banner h1 {

    text-shadow: 0 1px 3px rgba(0,0,0,0.4),0 0 30px rgba(0,0,0,0.075);
	font-family: Oswald,Roboto,arial,sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 48px;
	font-weight: 100;
	margin: 50px 0 0 0;

}

#first-banner p {

	margin: 0;

}

.center {

	max-width: 980px;	
	margin: 60px auto 40px auto;

}

.border {

	margin-bottom: 150px;

}

.border:after {

	content: ' ';
	display: block;
	height: 0;
	position: absolute;
	margin-top: 75px;
	left: 0;
	width: 100%;
	border-bottom: solid 1px rgb(230,230,230);

}

.container {

	margin-top: 50px;

}

.container:after, .boxes:after {

	clear: both;
	content: ' ';
	display: block;
	height: 0;
	visibility: hidden;
	
}

.half {

	width: 50%;
	box-sizing: border-box;
	text-align: left;

}

.left {
	padding-top: 10px;
	float: left;
	padding-right: 75px;
	line-height: 2.5em;

}

.right {
	
	padding-top: 10px;
	float: right;
	padding-left: 25px;
	line-height: 2.5em;
	border-left: solid 1px rgb(210,210,210);

}

input, select {

	width: 130px;
	border: none;
	border-radius: 1px;
	padding: 3px 5px;
	font-family: Roboto,arial,sans-serif;
	font-size: 1em;
	color: rgb(80,80,80);
	background: rgb(255,255,255);

}

input.dark {

	color: rgba(80,80,80);
	border: solid 1px rgba(50,50,50);
	background: none;

}

.left input, .right input {

	float: right;
	margin-top: 0.5em;

}

.sact {
	text-align: left;
	margin: 5px 0;
}

.sact:first-of-type {
	margin-top: 25px;
}

.sact > span:first-of-type {
	display: inline-block;
	width: 275px;
}

.sact > span:nth-of-type(2) {
	color: rgb(255, 255, 255);
}

footer {

	margin-top: 175px;
	background: rgb(70,70,70);
	color: rgb(150,150,150);
	font-family: arial,sans-serif;
	line-height: 1.5em;
	font-size: 18px;

}

footer > div {

	padding: 40px 0 30px 0;
	text-align: justify;

}

footer > div:first-of-type {

	border-bottom: 1px solid rgb(85,85,85);
	border-top: 1px solid rgb(85,85,85);

}

footer > div.center {

	margin: 0 auto;

}

footer h2 {

	color: rgb(255,255,255);
	margin: 0;
	font-size: 18px;

}

footer a {

	color: rgb(150,150,150);

}

footer a:hover {

	color: rgb(255,255,255);

}

footer input {

	border: 2px solid rgb(150,150,150);
	background: none;
	color: rgb(150,150,150);
	width: 170px;	

}

footer .login div {

	text-align: center;
	width: 375px;
	margin: 10px auto;

}

footer .login {

	padding: 0;
	padding-top: 20px;
}

footer .submit {
	width: 375px;
	cursor: pointer;
}

footer button {

	border: 2px solid rgb(150,150,150);
	background: none;
	color: rgb(150,150,150);
	padding: 5px 12px;
	cursor: pointer;
	
}


@media (max-width: 1690px) {

	#top-bar { 

		text-align: right;
		padding-right: 50px;

	}

}

@media (max-width: 1500px) {

	.boxes > span { 

		width: 0px !important;

	}

}

@media (max-width: 1500px) {

	#top-bar { 

		padding-right: 10px;

	}

}

@media (max-width: 1420px) {

	.boxes > div > .icon { 

		margin-top: 5px;
		width: 45px;
		height: 45px;

	}

	.boxes > div > .state { 

		margin-left: 55px;

	}

	.boxes > div {

		margin-right: -20px;

	}

}


@media (max-width: 1000px) {

	#top_banner {

		padding-top: 50px;
		height: 150px;

	}

	#center_banner {
	
		height: 100px;
	
	}
	
	.text {
	
		padding-left: 10px;
		padding-right: 10px;
		text-align: justify;
	
	}
	
	.text h1 {
	
		text-align: center;
	
	}
	
	footer {
	
		padding-left: 10px;
		padding-right: 10px;
	
	}
	
	footer > div {
	
		padding: 10px;
		font-size: 0.7em;
	
	}
}

@media (max-width: 900px) {

	.times {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: 65px !important;
		margin-bottom: 15px !important;
	}

	.boxes {
	
		margin: 0;
	
	}

	.boxes > div {

		height: auto;
		width: 47%;
		margin: 0 1.2%;
		margin-bottom: 5px !important;

	}
	
	.boxes > div > .state {
	
		height: auto;
		line-height: normal;
		color: rgb(255,255,255);
		padding-left: 5px;
		background-color: rgb(50,50,50);
	}
	
.boxes > div >  .temp_in{
		color: rgb(255,100,130);
	}	
.boxes > div >  .temp_out{
		color: rgb(50,130,190);
	}	
.boxes > div >  .illu{
		color: rgb(255,160,60);
	}	
.boxes > div >  .door{
		background-color: rgb(150,120,80);
	}	
.boxes > div >  .door.open{
		background-color: rgb(120,200,120);
	}	
.boxes > div >  .light{
		background-color: rgb(255,200,0);
	}	
.boxes > div >  .light.off {
		background-color: rgb(120,120,130);
	}	
.boxes > div >  .fan{
		background-color: rgb(0,200,200);
	}	
.boxes > div >  .fan.off{
		background-color: rgb(80,100,120);
	}		
.boxes > div >  .heater{
		background-color: rgb(255,90,90);
	}	
.boxes > div >  .heater.off {
		background-color: rgb(120,80,80);
	}		
	
	.boxes > div > .icon {

		display: none;

	}

	.boxes > div {

		display: block !important;
		margin-left: 0px !important;
		box-sizing: border-box;

	}

	.boxes > span {

		display: none !important;

	}
	
	#center_banner {
	
		margin-top: 20px;
	
	}
	
	.half {
	
		float: none;
		width: 100%;

	}

	.left, .right {

		border: none;
		padding: 0 20px 0 0;

	}

	footer {
	
		margin-top: 25px;
	
	}

	#first-banner {
		padding-top: 10px;
		height: 200px;
	}

	#top-bar {
		position: relative;
	}

	.border {
		margin-bottom: 110px !important;
	}

	.center {
		margin-top: 25px;
	}

	.boxes > div > .state {
		margin-left: 0px;
		padding-right: 0px;
	}

	.boxes > div {
		width: 100% !important;
		background: white;
	}

	#top-bar > span {
		display: block;
		padding: 0 10px;
	}

	.charts > .chart-container {

		padding-bottom: 75%;

	}

	.text {
	
		padding-left: 5px;
		padding-right: 5px;
	
	}

	.charts-controls > div {

		float: none !important;
		width: 373px;
		margin: 0 auto 5px auto;

	}

}

@media (max-width: 675px) {

	.boxes > div {

		width: 96%;
		margin: 0 1.5%;

	}

	.charts-controls > div {

		padding: 0;

	}
}

@media (max-width: 500px) {

	.charts > .chart-container {

		padding-bottom: 100%;

	}

	footer .login div {

		width: 100%;
		text-align: center !important;

	}
}

@media (max-width: 400px) {
	
	footer .submit {

		width: 90%;

	}

}