.all-login { position: relative; float: left; width: 100%;}

.middle-login {position:relative;margin:13vh auto;width:100%;height:100%;max-width:600px;padding-top:50px;background:#404040;border-radius:25px;margin-bottom:200px;}
.middle-login .logo {position:relative;float:left;width:100%;text-align:center;}
.middle-login .logo img {display:inline-block;}
.middle-login .description {position:relative;float:left;width:100%;font-size:20px;color:#fff;text-align:center;margin:25px 0 25px 0;}
.middle-login .form-contato { position: relative; float: left; width: 100%; margin: 0 0 0;color:#000;}
.middle-login .form-contato input { position: relative; float: left; width: 100%; height: 60px; padding: 0 15px; margin: 0 0 10px 0; background: #fff; border: 1px solid #c1c1c1; font-size:25px;text-align:center;border-radius:8px;}
.middle-login .form-contato input:hover {box-shadow: 0px 0px 60px #fff;}
.middle-login .form-contato input:focus {box-shadow: 0px 0px 60px #fff;}
.middle-login .form-contato button { position: relative; float: left; width: 100%; height: 50px;border: 0 none; font-weight: 300; font-size: 25px; color: #fff; text-transform: uppercase; letter-spacing:2px;opacity:0.8;margin-top:50px;background:#008f50;border-radius:8px;}
.middle-login .form-contato button:hover {opacity:1;text-shadow: 0px 0px 40px #fff;}
.middle-login .form-contato .sucesso { position: relative; float: left;width: 100%;text-align:center;font-size:20px;text-transform:uppercase;line-height:20px;color:#fff;margin-top:50px;margin-bottom:30px;}
.middle-login .form-contato ::-webkit-input-placeholder {color: #888888; text-transform: uppercase;text-align:center; }
.middle-login .form-contato :-moz-placeholder { color: #888888; text-transform: uppercase; text-align:center;}
.middle-login .form-contato ::-moz-placeholder { color: #888888; text-transform: uppercase;text-align:center; }
.middle-login .form-contato :-ms-input-placeholder {color: #888888; text-transform: uppercase; text-align:center;}


.middle-login .fase-title {position:relative;float:left;width:100%;text-align:center;font-size:32px;font-weight:700;font-family: 'Fredericka the Great', cursive;color:#fff;margin:15px 0 0 0;margin-top:30px;text-shadow: 1px 2px 10px #000;}
.middle-login .buttons {position:relative;float:left;width:100%;height:50px;margin-top:20px;text-align:center;}
.middle-login .buttons .btn {position:relative;width:140px;height:60px;border:2px solid #fff;text-transform:uppercase;color:#fff;line-height:60px;margin-right:10px;padding-top:0;font-size:18px;font-weight:700;background:rgba(255,255,255,.2);text-shadow: 1px 2px #000;}
.middle-login .buttons .btn:hover {background:rgba(255,255,255,.4);font-size:20px;font-weight:700;}
.middle-login .results {position:relative;float:left;width:100%;margin-top:0;margin-bottom:100px;color:#000;max-height:400px;overflow-y:auto;border:solid 1px #ccc;}
.middle-login .results table {border-collapse: collapse; width: 100%;text-transform:uppercase;}
.middle-login .results th {text-align: left;padding:15px 5px 15px 5px;}
.middle-login .results td {text-align: left;padding: 5px;font-size:13px;}
.middle-login .results tr:nth-child(even){background-color: #f5f5f5;}
.middle-login .results th {background-color: #4CAF50;color: white;}

.middle-login .graphs-login {position:relative;float:left;text-align:center;width:100%;margin-top:0;color:#fff;max-height:400px;overflow-y:hidden;background:rgba(0,0,0,0.5);margin-top:50px;}
.middle-login .bar {position:relative;float:left;width:100%;height:30px;margin-top:100px;color:#fff;max-height:400px;background:rgba(0,0,0,0.5);border:solid 2px #ffe;padding:0 !important;}
.middle-login .bar .progressBar {position:relative;float:left;width:40%;height:26px;margin-top:0;color:#fff;max-height:400px;background:rgba(59,94,18,.7);text-align:center;}
.middle-login .bar .barText {display:inline;position:relative;float;left;width:100%;text-align:center;font-size:18px;color:#fff;line-height:26px;margin-top:-26px;}
.middle-login .countdown-box {position:relative;float:left;text-align:center;width:100%;margin-top:0;color:#fff;background:rgba(0,0,0,0.5);margin-top:20px;}
.middle-login .countdown-box .count-title {position:relative;float:left;text-align:center;width:100%;font-size:16px;line-height:30px;margin-bottom:10px;}
.middle-login .countdown-box .countdown {display:inline-block;position:relative;text-align:center;width:90px;}
.middle-login .countdown-box .countdown .value {display:block;position:relative;width:60px;text-align:center;padding-right:60px;font-size:60px;font-family: 'Fredericka the Great', cursive;line-height:40px;}
.middle-login .countdown-box .countdown .label {display:inline;position:relative;float:left;width:90px;font-size:16px;margin-top:15px;margin-left:-16px;}


.middle-login .graphs-login .chart-block {display:inline-block;position:relative;}

.middle-login .graphs-login .chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  margin-top: 15px;
  margin-bottom: 50px;
  margin-left:10px;
  margin-right:10px;
  text-align: center;
  
}
.middle-login .graphs-login .chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.middle-login .graphs-login .number {
  display: block;
  position:relative;
  margin:30px auto;
  line-height: 25px;
 
  z-index: 2;
}
.middle-login .graphs-login .owner{
	position:relative;
	display: block;
	text-align:center;
	margin-top:-30px;
	margin-bottom:20px;
	text-transform:uppercase;
	
}
.middle-login .graphs-login .number:after {
content:' vidas';
  margin-left: 0.1em;
  font-size: .8em;
}

.middle-login .graphs-login .percent {
  display: block;
  position:relative;
  line-height: 20px;
  font-weight:700;
  margin:-25px auto;  
  z-index: 2;
}

.middle-login .graphs-login .percent:after {
content:'%';
  margin-left: 0.2em;
  font-size: .8em;
  font-weight:700;
}


.bkg-animated {
  background:#fff url(/img/geometry4.png) repeat 0 0;
  width: 100%;
  margin: 0;
  text-align: center;
  -webkit-animation: slide 20s linear infinite;
}
.bkg {
  background: url(/bgs/bg1.jpg);
  background-size:cover;
  width: 100%;
  margin: 0;
  text-align: center;  
}

@media (max-width: 500px) {
.bkg {
  background: #404040;
  background-size:cover;
  width: 100%;
  margin: 0;
  text-align: center;  
}
.middle-login {margin:5vh auto;}
.middle-login .form-contato input {font-size:18px;}
.middle-login .form-contato button {font-size: 15px;letter-spacing:1px;}
}

.hero-bkg-animated h1 {
  font-family: sans-serif;
}

@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -1200px 0; }
}