.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: left;

}
a:not(.btn){
	color: #333 !important;
	font-weight: bold !important;
}
.logo img{
width: 300px;
margin:25px 0px;

}
.btn{
		color: #fff;
		border:0;
		background: #f1352b;
		padding: 8px 45px;
		border-radius: 0px !important;
		margin-top: 5px;
		font-weight: bold;
}
.btn:hover{
	color: #fff;
	background-color: #333;
}
.logoDn{
	padding: 8px;
position: absolute;
bottom: 0;
}
.chat{
margin-top: 180px;
position: absolute;
top: 0;
}
.titulo{color:#244487;}
.content{
z-index: 9999;
background-color: rgba(255,255,255,0.8);
width: 50%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
display: block;
height: 70vh;
padding-top: 20px;
position: absolute;	
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

}
.content .inside{
	padding-left: 30px;
	padding-right: 30px;
}
.div_btn{
	position: relative;
	width: 100%;
	padding: 10px;
	text-align: right;
	z-index: 100;
}

.foter_content{
	width: 100%;
	position: absolute;
	bottom: 0px;	
}
.foter_content .support{
	padding: 10px 40px;

}

.foter_content .getId{
	width: 100%;
	padding: 10px;
	background-color: #f1352b;
	color: #fff;
	cursor: pointer;
}
.button{
opacity: 100;
width: 100%;
height: 32px;
border-radius: 2px;
font-size: 0.9em;
background-color: #244487;
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:680px;
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:left; }
.footer a  { color:#53B2C8; }
/* form starting stylings ------------------------------- */
.group            {
position:relative;
margin-bottom:45px;
}
input               {
background-color: transparent;
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:90%;
border:none;
border-bottom:1px solid #999;
}
input:focus         { outline:none; }
/* LABEL ======================================= */
label                {
color:#595252;
font-size:16px;
font-weight:bold;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
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:-20px;
font-size:14px;
color:#f1352b;
}
/* BOTTOM BARS ================================= */
.bar    { position:relative; display:block; width:90%; }
.bar:before, .bar:after     {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#f1352b;
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:#f1352b; }
to    { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#f1352b; }
to    { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#f1352b; }
to    { width:0; background:transparent; }
}



@media only screen and (max-width: 800px) {
	body{
		background: #fff !important;
	}
	#support_desktop{
		display: none !important;
	}
	#support_movil{
		display: block !important;
		position: fixed !important;
		width: 100% !important;
	}
	.content{
		width: 100%;
		height: 100vh;
	}
	.div_btn{
		text-align: center;
		margin-bottom:50px; 
	}
	.logo{
		width: 80%;
		text-align: center;
	}
	.btn{
		    padding: 10px 60px;
    margin: 50px;
    font-size: 18px;
	}
}