@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Viga&display=swap");

body{
  background-color: transparent!important;
}

.div-tabla{
  max-width: 700px;
  margin: auto;
}

#confirmacion p{
	font-family: 'Roboto',Arial, Helvetica, sans-serif,sans-serif;
	font-size: 14px;
}
#confirmacion{
	font-family: 'Roboto',Arial, Helvetica, sans-serif,sans-serif;
	font-size: 14px;
}

.mensaje-error{
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.token-input-list-facebook li input {
    border: 0!important;
    width: 100px;
    padding: 3px 8px;
    background-color: white;
	margin: 2px 0;
}
#encabezado p{
	margin: 0!important;
}
#pie p{
	margin: 0!important;
}
#wrapper {
	background: white;
	padding: 1em;
}

#upperInnerWrapper {
	background: white;
}

#leftInnerWrapper {
	position: relative;
	background: black;
	float: left;
	padding: 0.1em;
}

#leftInnerWrapper div {
	padding: 0.5em;
	background: white;
	font-size: 0.8em;
	width: 46.5em;
}

#leftInnerWrapper a {
	font-weight: bold;
	color: black;
}
#leftInnerWrapper b {
	font-weight: bold;
	color: red;
}

#rightInnerWrapper {
	position: relative;
	background: black;
	float: right;
	padding: 0.1em;
	width: 21em;
}

#rightInnerWrapper div {
	padding: 0.5em;
}

#rightInnerWrapper div p{
	color: black;
	font-size: 0.8em;
}

#rightInnerWrapper h1{
	color: black;
	font-weight: bold;
	font-size: 1.4em;
}

#rightInnerWrapper h2 {
	font-weight: bold;
	font-size: 0.8em;
}
#latestNews,#download,#demo,#disclaimer {
	background: white;
}


#footer {
	padding-top: 1.5em;
	clear: both;
	background: white;
	text-align: center;
}

#menu {
	padding: 0.1em 0.1em 0em 0.1em;
	background-color: #9999ff;
	margin-bottom: 0.5em;
}

#menu span {
	margin: 0em;
	background: white;
	padding-left: 0.3em;
	padding-right: 0.3em;
}


#navigation {
	background-color: #9999ff;
	margin-top: 0.5em;
	text-align: right;
}

.font_bold_3em_black {
	color: black;
	font-size: 3em;
	font-weight: bold;
}

.font_normal_2em_black {
	color: black;
	font-size: 2em;
}

.font_normal_1em_black {
	color: black;
	font-size: 1em;
}

.font_normal_07em_black {
	color: black;
	font-size: 0.8em;
}

input:not([type="radio"]):not([type="checkbox"]),select {
	margin-right: 0.1em!important;
	margin-bottom: 0.5em!important;
}

.input_field_25em {
	width: 2.5em;
}

.input_field_3em {
	width: 3em;
}

.input_field_35em {
	width: 3.5em;
}

.input_field_12em {
	width: 12em;
}

label {
	margin-bottom: 0.2em;
	font-weight: bold;
	font-size: 0.8em;
}

label.error {
	color: red;
	font-size: .85rem;
}
.labelerror{
	color: red!important;
	font-size: .8rem!important;
	font-weight: 400;
}

.step span {
	float: right;
	font-weight: bold;
	padding-right: 0.8em;
}


/*---------------------------------------------------------
	Responsive
---------------------------------------------------------*/

body{
	font-family:'Roboto',Arial, Helvetica, sans-serif;
	font-size:12px!important;}
.nover{display:none}
label.error{display: none !important;}
input.error{ border: 1px solid red !important;}
select.error{border: 1px solid red !important;}
textarea.error{border: 1px solid red !important;}
select,input:not([type="radio"]):not([type="checkbox"]),textarea{width:60%}
option{width:60%}
input#pref1,input#pref2,input#pref3,input#codPais3{width:9%}
table{ 
width:100%; 
font-family: 'Roboto',Open Sans, sans-serif;
max-width:700px;
border: none;
border-collapse: collapse;
}
.titulo{ 
font-family: 'Roboto',Open Sans, sans-serif;
font-size:16px;
font-weight:600;
color:#333;
text-transform:uppercase;
}

.etiqueta{ 
font-family: 'Roboto',Open Sans, sans-serif;
font-size:14px;
font-weight:600;
color:#6EAFB5;
text-transform:uppercase;
}

.nombre_campo{
width:20%;
}

.nombre_campo, .asterisco, .bajada{ 
font-size:13px;
font-weight:400;
color:#555;
text-transform:uppercase;
}

input:not([type="radio"]):not([type="checkbox"]), textarea, select{
width:95%; 
border:1px solid #ccc; 
border-radius:4px; 
box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;
background-color:#fff; 
padding:3px; 
font-family: 'Roboto',Open Sans, sans-serif;
font-size:13px;
font-weight:400;
color:#161616;
letter-spacing:1px;
}
input#pref1,input#pref2,input#pref3, input#codPais3{
width:10%;
}
#telefono1{ 
width:76.5%;
}
#telefono2{
width:76.5%;
}
#movil{ 
width:73%;
}
#areaCodeContainer{
width: 6%;
display: inline-block;
}
#movil.codpais{ 
width:64.5%;
}
select{
width:96.5%;
margin-bottom:7px;
}
select#dia, select#mes, select#anio{ 
width:31.5%; 
margin-bottom:7px;
}
#btnenviar{
background-color: #333;
border: medium none;
border-radius: 3px;
color: #fff;
cursor: pointer;
float: left;
font-family: 'Roboto',Open Sans,sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 15px;
padding: 8px 40px;
}
#btnenviar:hover{ 
background-color:#666; 
}
label.error{
display: none !important;
}
input.error, input.error{ 
border: 1px solid red !important;
}
select.error{
border: 1px solid red !important;
}

fieldset{ 
border:none;
padding:10px 0px!important;
border-bottom: 1px solid #cccccc;
}

#step1 fieldset:nth-child(2),
#step1 fieldset:nth-child(3){
margin-top:-10px;
}

fieldset br{
display:none;
}

fieldset strong.nombre_campo{
font-weight:600;
color:#333;
}

fieldset label.nombre_campo{
float:left;
width:100%;
}

fieldset select{
width:97.3%;
}

.token-input-list-facebook{
width: 97% !important;
border: 1px solid #ccc !important;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

@media (min-width: 738px) and (max-width: 962px) {
#movil{ 
width:73%;
}
}

@media only screen and (min-width: 422px) and (max-width: 737px) {
#telefono1{ 
width:67%;
}
#telefono2{ 
width:67%;
}
#movil{ 
width:62%;
}
#movil.codpais {
width: 46.6%;
}
input:not([type="radio"]):not([type="checkbox"]), textarea, select{
width:92%;
}
select{
width:95%;	
}
select#dia, select#mes, select#anio{
width:30.5%;
}
fieldset select {
width: 96.3%;
}
.nombre_campo{
width:30%;
} 
#areaCodeContainer {
width: 10%;
}
.token-input-list-facebook {
width: 96% !important;
}
}

@media only screen and (max-width: 421px) {

#movil{ 
width:57%;
}
select{
width:90%;	
}
select#dia, select#mes, select#anio{
width:30.2%;
}
input:not([type="radio"]):not([type="checkbox"]), select, textarea{
width:92%;
} 
}

@media only screen and (max-width: 370px) {
#movil{ 
width:50%;
}
}

@media only screen and (min-width: 219px) and (max-width: 369px) {
input:not([type="radio"]):not([type="checkbox"]), select, textarea{
width:86%;
}
#telefono2 {
width: 51.3%;
}
#telefono1{ 
width:51.3%;
}
#movil{ 
width:43%;
}
#movil.codpais {
width: 22.5%;
}
select{
width:90%;
}
select#dia, select#mes, select#anio{ 
width:28.6%;
}
fieldset select {
width: 94.3%;
}
#areaCodeContainer {
width: 12%;
}
.token-input-list-facebook {
width: 94% !important;
}
#btnenviar{ 
margin:0; 
width:99.5%;
}
.nombre_campo{
width:38%;
font-size:11px;
}
}
.nover{display:none}


.sp {
	width: 32px;
	height: 32px;
	clear: both;
	margin: 20px auto;
  }

/* Spinner 3Balls Scale */
.sp-3balls,
.sp-3balls:before,
.sp-3balls:after {
  border-radius: 50%;
  background-color: #000;
  width: 18px;
  height: 18px;
  transform-origin: center center;
  display: inline-block;
}

.sp-3balls {
  position: relative;
  background-color: black;
  opacity: 1;
  -webkit-animation: spScaleAlpha 1s infinite linear;
  animation: spScaleAlpha 1s infinite linear;
}

.sp-3balls:before,
.sp-3balls:after {
  content: "";
  position: relative;
  opacity: 0.25;
}

.sp-3balls:before {
  left: 30px;
  top: 0px;
  -webkit-animation: spScaleAlphaBefore 1s infinite linear;
  animation: spScaleAlphaBefore 1s infinite linear;
}

.sp-3balls:after {
  left: -30px;
  top: -23px;
  -webkit-animation: spScaleAlphaAfter 1s infinite linear;
  animation: spScaleAlphaAfter 1s infinite linear;
}

@-webkit-keyframes spScaleAlpha {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0.25;
  }
  66% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}
@keyframes spScaleAlpha {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0.25;
  }
  66% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes spScaleAlphaBefore {
  0% {
    opacity: 0.25;
  }
  33% {
    opacity: 1;
  }
  66% {
    opacity: 0.25;
  }
}
@keyframes spScaleAlphaBefore {
  0% {
    opacity: 0.25;
  }
  33% {
    opacity: 1;
  }
  66% {
    opacity: 0.25;
  }
}
@-webkit-keyframes spScaleAlphaAfter {
  33% {
    opacity: 0.25;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes spScaleAlphaAfter {
  33% {
    opacity: 0.25;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

#cargando{
	height: 500px;
}