body { font-family: 'Open Sans', sans-serif; margin: 0 }

#Grande { /* Bloco Vermelho  */
	position: relative; left: 0px; top:0px; /*position: absolute; left: 0px; top:0px; offsetWidth */
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	z-index: 2;
/*border: 1px solid #000000;*/
}

#pisca {
	background: url(LedVd5of.bmp);
	position: absolute;
	top:11px;left:397px; width: 22px; height: 22px;
	font-family: arial, verdana, sans-serif; font-variant: normal; font-weight: bold; font-size: 20px; color: #00ffff;
	text-align: left; letter-spacing: 3px;
	z-index: 119;
}
#Linha1 {
	position: absolute;
	top:13px;left:30px;width: 380px; height: 35px;
	font-family: arial, verdana, sans-serif; font-variant: normal; font-weight: bold; font-size: 20px; color: #00ff00;
	text-align: left; letter-spacing: 3px;
/*	border: 1px solid #00ffff; */
	z-index: 100;
}
#Linha2 {
	position: absolute;
	top:43px;left:30px;width: 380px; height: 35px;
	 font-variant: normal; font-weight: bold; font-size: 20px; color: #00ff00;
	text-align: left; letter-spacing: 3px;
	z-index: 110;
}
#recebe {
	position: absolute;
	top:73px;left:30px; height: 25px;
	font-family: arial, verdana, sans-serif; font-variant: normal; font-weight: bold; font-size: 20px; color: #00ff00;
	text-align: left; letter-spacing: 3px;
	z-index: 112;
}
#Linha3 {
	position: absolute;
	top:103px;left:30px;width: 380px; height: 25px;
	font-family: arial, verdana, sans-serif; font-variant: normal; font-weight: bold; font-size: 20px; color: #00ff00;
	text-align: left; letter-spacing: 3px;
	z-index: 114;
}
#Linha4 {
	position: absolute;
	top:133px;left:30px;width: 380px; height: 25px;
	font-family: arial, verdana, sans-serif; font-variant: normal; font-weight: bold; font-size: 20px; color: #00ff00;
	text-align: left; letter-spacing: 3px;
	z-index: 116;
}
li { list-style: none }
.icon { font-size: 30px; color: #999; }
.container { width: 100%; padding-top:2%; height: auto; float: left;}
.row { width:95%; height: auto;  margin:0 auto;   }

.top { position: relative; z-index: 41; width: 100%; height: auto; top: 0; font-size: 14px; float: left; }
.top figure {width: 234px; height: 41px; float: left; margin-top: 18px; background: url(TopLogo2.png); }
.top ul {width: auto; height: auto; float: right; padding:0 !important; }
.top ul li { float: left; margin:0 20px 0 0; }
.top ul li i { float: left; padding: 11px 10px 0 0; }
.top ul li p { float: left; color: #999  }
.top ul li p b { font-size: 18px; color: #333 }

.info { display: none; padding-top:2%; float:left; width:90%; padding-bottom: 80px  }
.info li { float: left; width: 25% }
.info li i { float: ; padding: 11px 10px 0 0; }
.info li p { float: ; color: #999  }
.info li p b { font-size: 18px; color: #333 }

.Saida {
	background:#FFF;
	position: relative;
	float: left;
	width: 18.2%; 
	height:auto; 
	z-index: 40;
	border:1px solid #d9d9d9 !important;
		border-radius: 7px;
	margin: 20px 20px 20px 0;
}
.nomargin { margin-right: 0; }
.mar-first { margin-left: 20px }

.no-active1 { opacity: 0.5; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.no-active1:hover { opacity: 1 }


.Saida p {float: left; color: #1c1c1c; font-weight:900; font-size:18px; padding: 3px 0 5px 20px; margin-bottom:0;}
.Saida span { color:#1c1c1c; clear:both; font-size: 14px; float: left; padding: 1px 0 0 20px}
.no-active1 .Saida span { color:#CCC;}


.Saida span .icon { font-size: 15px; color:rgb(0, 219, 0); margin:0 5px 0 0; }
.no-active1 span .icon { color:#CCC !important; }

.Saida .btn {clear: both; float: left; margin: 15px 14px 19px 20px	}
.Saida .btn:hover { margin: 19px 14px 18px 20px !important	}

.btn { border-bottom: 4px solid #146aac !important; background: #1781d3; color: #FFF; text-transform: uppercase; border: 0; padding:12px 30px 10px 30px; border-radius: 7px; font-weight: 100; font-size: 16px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; cursor: pointer; text-decoration:none; }
 .btn:hover { background:#146aac; border-bottom: 1px solid #146aac !important; margin:5px 0 0 0;  }
.no-active1 .btn { background: #999; border-bottom: 4px solid #666 !important; }
.no-active1 .btn:hover { background: #777; border-bottom: 1px solid #666 !important;  }


#Saida1 { 
}
#Saida2 {
}
#Saida3 {
}
#Saida4{
}
#Saida5 {
}


@media (max-width:1104px) {
	.top figure {float: none; margin-bottom:20px; }
	.top ul {display: none }
	.info { display: block }
	.row { width: 100%;  }
	.Saida { width: 90%; 	height:94px;  margin:0 0 3% 5%  }
	.Saida .btn {clear: none; float: right; margin: -21px 14px 14px 0	}
	.Saida .btn:hover { margin: -17px 14px 13px 0 !important	}
	.Saida p { padding: 3px 0 0 20px; }

}
@media (max-width:600px) {
	.info li { width: 50%; }
	#Senha2 { width: 80% !important; left: 0 !important; margin-left:10% !important }
}

#display {
	background: url(Display33.bmp) no-repeat;
	/* background-color: #007FFF; */
	position: relative;
	top: 0px; width: 431px; height: 174px;
	z-index: 30;
/*	border: 1px solid #0000ff; */
}

#OFrame {
/*	background: url(images/BasePr.bmp);
	background-color: #ff00ff;*/
	position: absolute;
	top:0px;left:0px;width: 40px; height:200px;
	margin: 0px;
	padding: 0px;
	font-family: arial, verdana, sans-serif; font-variant: normal; font-weight: bold; font-size: 28px; color: #535766;
	text-align: center; letter-spacing: 3px;
/*	border: 1px solid #0000ff; */
	z-index: 6;
}
#Tampa2 {
	background-color: #CCC;
 /*	display: none;
	display: block display: none  */
	position: fixed; overflow: hidden;
	top:0px;left:0px;width: 100%; height: 100%;
	z-index: 900;
	vertical-align: middle;
	opacity: 0.98; 
}
#Senha2 .icon { position: absolute; top: 160px; left: 50px; }
#Senha2 {
/*	display: none;*/
	background: #FFF;
	border-radius: 7px;
/*	background-color: #00ffff; */
	position: absolute;
	top:50%;left:50%;width: 383px; height: 270px; margin:-170px 0 0 -191px; 
	 padding-bottom: 40px;
	font-weight: 300; font-size: 18px; color: #000000; text-transform: ;
	text-align: ; 
/*	border: 1px solid #ffffff; */
	z-index: 950;
	box-shadow: 0 0 10px #666;
}
#Senha2 .campo { border-radius: 7px; width: 80%; height: 50px; margin:20px 0 20px 0; background:#e9e8e6; border:1px solid #d9d9d9 !important; color: #666; font-size: 30px; padding-left: 50px}
#Senha2 img { margin:40px 0 20px 0;  }



#TampaText {
display: block;
position: fixed;
background: #1781d3;
bottom: 0;
left: 0;
width: 100%;
height: 56px;
font-weight: 900;
font-size: 18px;
color: #f2f2f2;
text-align: center;
/* border: 1px solid #000000; */
z-index: 950;
}
#TampaText div { width:100%; margin:0 auto; }
#TampaText p {margin: 16px 0 0 3%; float: left; }
#TampaText img {margin: 8px 3% 0 0; float: right;}

#SenErr {
	display: none;
	background: #FFF;
	border-radius: 7px;
	position: absolute;
	top:50%;left:50%;width: 383px; height: 120px; margin:-170px 0 0 -191px; 
	 padding-bottom: 40px;
	font-weight: 300; font-size: 18px; color: #000000; text-transform: ;
	text-align: ; 
	z-index: 950;
		box-shadow: 0 0 10px #666;

}

#pswd {
	width: 350px;	
}
#Senha {
	background-color: #00ffff; 
	/* background-color: #007FFF; */
	position: relative;
	top: 100px; width: 390px; height: 174px;
	border: 1px solid #000000;
}




.pulse{
    -webkit-animation-name: pulsate;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite
}
@-webkit-keyframes pulsate {
    0% { width:1px;height: 1px; opacity: 0.0}
    10% { width:3px;height: 3px; opacity: .20}
    20% { width:5px;height: 5px; opacity: .40 }
    30% { width:7px;height: 7px; opacity: .60 }
    40% { width:9px;height: 9px; opacity: .80 } 
    50% { width:11px;height: 11px; opacity: 1.0}
    60% { width:13px;height: 13px; opacity: .80}
    70% { width:15px;height: 15px;  opacity: .60}
    80% { width:17px;height: 17px;  opacity: .40}
    90% { width:19px;height: 19px;  opacity: .20}
    100% { width:21px;height: 21px;  opacity: 0.0}
 }