.fondo{
background-image: url("../img/dynamik-WEB.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: 'Roboto' , sans-serif !important;
}
a,input,label,small,span,td{font-family: 'Roboto' , sans-serif !important;}
.logo{
text-align: center;

}
.logo img{
width: 170px;
}
.logoDn{
	padding: 8px;
position: absolute;
bottom: 0;
}
.chat{
margin-top: 180px;
position: absolute;
top: 0;
}
.titulo{color:#5495cf;}
.content{
z-index: 9999;
background-color: rgba(255,255,255,0.8);
width: 40%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

display: block;
height: 530px;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
position: absolute;	
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

}
.button{
opacity: 100;
width: 80%;
height: 60px;
border-radius: 52px;
font-size: 0.9em;
background-color: #5495cf;
color: #fff;
text-align: center;
vertical-align: center;
font-weight: bold;
border:0;
cursor: pointer;
}
.button:hover {
cursor: pointer;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
* { box-sizing:border-box; }
/* basic stylings ------------------------------------------ */
.container      {
font-family:'Roboto';
width:600px;
margin:30px auto 0;
display:block;
background-color:#fff;
padding:10px 50px 50px;
}
h2       {
text-align:center;
margin-bottom:50px;
}
h2 small {
font-weight:normal;
color:#888;
display:block;
}
.footer     { text-align:center; }
.footer a  { color:#53B2C8; }
/* form starting stylings ------------------------------- */
.group            {
position:relative;
margin-bottom:45px;
}
input               {
background-color: transparent;
font-size:18px;
padding:28px 10px 10px 20px;
display:block;
width:80%;
border:none;
}
input:focus         { outline:none; }
/* LABEL ======================================= */
label                {
color:#595252;
font-size:18px;
font-weight:bold;
position:absolute;
pointer-events:none;
left:5px;
top:22px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label        {
top:4px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.bar    { position:relative; display:block; width:80%; }
.bar:before, .bar:after     {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
color: #999;
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to    { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to    { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#5264AE; }
to    { width:0; background:transparent; }
}