/* GENERAL */

@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500,700);

*{
margin: 0; 
padding: 0; 
text-decoration: none;
}

html {
font-size: 10pt; 
font-family: 'Fira Sans', sans-serif; 
color: #fff5dc;
}

body {
background-color: #372d3b;
}

.contenedor {
width: 960px;
margin: auto; 
z-index: 1;
}

.contenedor div {
margin-bottom: 5%;
position: relative;
}

.contenedor input {
border: solid 2px; 
background-color: transparent; 
color: #fff5dc;
}

.clearer {
clear: both;
}


/* HEADER */

.fijo {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 3;
}

.fijo header{
padding-top: 3%; 
background-color: #2b222d; 
min-height: 75px; 
width: 100%; 
top:0;
left:0;
}

#logo {
float: left; 
}

#inicio {
float: right;
padding-top: 1.5%
}

.fijo .subnav {
top: 75px;
background-color: #372d3b; 
height: 100px;
padding-top: 2%;
width: 100%;
margin: 0 auto 3% auto; 
border-bottom: solid 1px #2b222d;
}

.subnav .contenedor .migas {
width: 100%;
margin-bottom: 5%;
}


/* MAIN */

#vermapa {
position: fixed; 
top: 50%; 
right: 0;
width: 4%;
z-index: 3;
}

main .contenedor {
padding: 15% 0 5% 0; 
position: relative;
}

#tituloseccion {
border: 1px solid; 
padding: 1.5%;
box-sizing: border-box; 
height: auto; 
width: auto; 
margin: 15% 0 5% 0; 
float: left;
}

h1 {
font-size: 2.5rem; 
font-weight: 700; 
width: auto; 
text-align: center; 
}





/*

PRIMER PANTALLA 
---------------    */


 /* ASIDE UNO */


#engranaje, #planilla, #calculadora {
position: absolute; 
left: 48%; 
top: -76%; 
float: left; }

h2 {
font-size: 2.5rem; 
color: #fde59f; 
font-weight: 700; 
text-align: center; 
margin: 5% auto 2% auto;
}

.uno {
position: relative;
}

.uno p {
font-size: 2rem; 
color: #fff5dc; 
font-weight: 300; 
text-align: center; 
width: 66%; 
margin: auto;
}


/* ASIDE DOS */


#llaves {
position: absolute; 
left: 22.5%;
bottom: -14%; 
float: left; 
width: 55%;
}

.dos {
position: relative; 
}

.dos p {
font-size: 1.75rem; 
font-weight: 200; 
text-align: center; 
width: 50%; 
margin: auto;
}


/* ASIDE TRES */


.tres ul li {
font-size: 1.3rem; 
font-weight: 200; 
text-align: left; 
width: 50%; 
margin: auto; 
padding-left: 2%; 
margin-bottom: 2%;
}


/* ASIDE CUATRO */

.cuatro {
position: relative;
}

#verestadisticas, #verrecorridos {
position: absolute;
left: 45%;}

#siguiente {
position: absolute; 
top: 105%; 
left: 50%;
}


/*

SEGUNDA PANTALLA 
---------------    */


.siguiente #siguiente1 {
position: relative; 
top: -29%; 
left: 50%;
}

.siguiente #siguiente2 {
position: relative; 
top: -29%; 
left: 45%;
}

.atras #atras {
position: relative; 
top: -29%; 
left: 50%; 
}

.siguiente h3 {
font-size: 2rem; 
font-weight: 400; 
position: relative; 
float: left;
color: #fde59f;
}


/*

TERCER PANTALLA 
---------------    */


.contenedorform {
margin: 5% auto 5% 12%; 
position: relative; 
box-sizing: border-box;
}

label {
font-size: 2rem; 
line-height: 3rem; 
}

.formularioabritulocal .contenedor .lista, .formularioencuesta .contenedor .lista {
float: left; 
box-sizing: border-box; 
margin-right: 10%;
}


.botones {
position: relative; 
padding-top: 10%;
}

.botones #atras, .botones2 #atras {
position: absolute; 
top: 105%; 
left: 47%; 
}

.botones #siguiente, .botones2 #siguiente {
position: absolute; 
top: 105%; 
left: 53%;
}



/*

CUARTA PANTALLA 
---------------    */


.formfinal input {
font-size: 1.5rem;
}


textarea {
margin-top: 2.5%;
line-height: 2rem; 
border: solid 2px; 
background-color: transparent; 
color: #fff5dc; 
font-size: 1.5rem;
height: 16rem;
resize: none;
font-family: 'Fira sans', sans-serif;
}



/*

QUINTA PANTALLA 
---------------    */

.posicionrelativa {
position: relative;
}

.uno .angosto {
font-size: 2rem; 
color: #fff5dc; 
font-weight: 300; 
text-align: center; 
width: 54%; 
margin: 0 auto 5% auto;
}

.atrasultimo {
position: relative; 
}

.atrasultimo #atras2 {
margin: 30% 0 0 48.5%;
}

#dejanos, #gracias {
width: 100%; 
min-height: 20%; 
float: left; 
position: absolute; 
box-sizing: border-box; 
margin-bottom: 200px; 
z-index: 2;
}


#dejanos form {
margin-top: 3%; 
position: relative; 
left: 34%; 
padding-bottom: 5%;
}

#dejanos input {
border: solid 1px #372d3b; 
background-color: #fff; 
color: #372d3b; 
width: 30%; 
padding: 1%; 
font-size: 1.25rem; 
margin: auto;
}

#listo {
float: left; 
margin: 3% 0 5% 15%;
}


#gracias {
display: none;
}

#dejanos h3, #gracias h3 {
font-size: 2.5rem; 
color: #372d3b; 
font-weight: 400; 
text-align: center; 
padding-top: 5%; 
margin-bottom: 2%;
}

#dejanos p, #gracias p {
font-size: 1.25rem; 
font-weight: 400; 
text-align: center; 
width: 35%; 
margin: auto; 
color: #372d3b;
}

#gracias #inicio2 {
position: relative;
left: 49%;
padding: 1% 0 5% 0;
}




/*---------------------ABRI TU LOCAL----------------------*/


.formularioabritulocal .contenedor input {
border-color: #5fbba9; 
}

.formularioabritulocal main .contenedor #tituloseccion {
border-color:#5fbba9; 
}

.formularioabritulocal .contenedor h1 {
color: #5fbba9;
}


/*

PRIMER PANTALLA 
---------------    */


/* ASIDE TRES */

.formularioabritulocal .contenedor .tres ul {
list-style-image: url(../imagenes/abritulocal/item2.svg);
}


/*

SEGUNDA PANTALLA 
---------------    */

.formularioabritulocal .contenedor .siguiente h3 {
color: #fff5dc; 
left: 40%; 
}

/*

TERCER PANTALLA 
---------------    */

.formularioabritulocal .contenedor h3 {
color: #fde59f;
}

.formularioabritulocal .contenedor .formubicacion {
width: 30%; 
position:absolute; 
top: 0; left: 76%; 
float: left; 
}

.formularioabritulocal .contenedor .formubicacion .lista {
float: left; 
box-sizing: border-box; 
margin-right: 40%;
}

.formularioabritulocal .contenedor .formubicacion .lista:last-child {
margin-right: 0;
}

/*

CUARTA PANTALLA 
---------------    */

.formularioabritulocal .contenedor .formfinal {
margin: 5% auto;
}


.formularioabritulocal .contenedor .formfinal p {
font-size: 1rem; 
font-weight: 200; 
text-align: left; 
width: 48%; 
color: #fde59f; 
margin-left: 0;
box-sizing: border-box;
}

.formularioabritulocal .contenedor .formfinal .izquierda {
float: left; 
max-width: 55%;
}

.formularioabritulocal .contenedor .formfinal .izquierda .empleados select {
border: solid 2px #5fbba9; 
background-color: transparent; 
color: #fff5dc; 
margin-top: 2%; 
font-size: 1.5rem;
line-height: 2rem;
}

.formularioabritulocal .contenedor .formfinal .izquierda .empleados select option {
border: solid 2px #5fbba9; 
background-color: transparent; 
color: #372d3b;
}

.formularioabritulocal .contenedor .formfinal .izquierda .presupuesto {
margin-top: 13%;
}

.formularioabritulocal .contenedor .formfinal .izquierda .presupuesto input {
border:solid 2px #5fbba9; 
background-color: transparent; 
color: #fff5dc;
width: 48%;
}

.formularioabritulocal .contenedor .formfinal .derecha {
float: left; 
max-width: 45%;
}

.formularioabritulocal .contenedor .formfinal .derecha p {
width: 80%; 
}

.formularioabritulocal .contenedor .formfinal .derecha textarea {
width: 75%; 
border-color :#5fbba9; 
}

.formularioabritulocal .contenedor .botones2 {
position: relative; 
}


/*

QUINTA PANTALLA 
---------------    */

.formularioabritulocal .contenedorinterno {
padding: 0;
}

.formularioabritulocal #dejanos, .formularioabritulocal #gracias {
background-color: #5fbba9; 
}



/*--------------------- ENCUESTA ----------------------*/


.formularioencuesta .contenedor input {
border-color: #ff435a; 
}
    
.formularioencuesta main .contenedor #tituloseccion {
border-color: #ff435a; 
}

.formularioencuesta h1 {
color: #ff435a;
}

/*

PRIMER PANTALLA 
---------------    */

 /* ASIDE TRES */

.formularioencuesta .contenedor .tres ul {
list-style-image: url(../imagenes/encuesta/item2.svg);
}


/*

SEGUNDA PANTALLA 
---------------    */


.formularioencuesta .contenedor h3 {
color: #fde59f; 
left: 10%; 
}


.formularioencuesta .contenedor .box {
margin-right: 1%;
}


/*

TERCER PANTALLA 
---------------    */


.formularioencuesta .contenedor .formfinal {
margin-top: 10%;
}

.formularioencuesta .contenedor .formfinal input {
font-size: 1.5rem;
}

.formularioencuesta .contenedor .formfinal .encuesta3 {
width: 100%;
margin-left: 8%;
}

.formularioencuesta .contenedor .formfinal .centro {
line-height: 2rem;
width: 35%;
float: left;
}

.formularioencuesta .contenedor .formfinal .centro select {
border: solid 2px #ff435a; 
background-color: transparent; 
color: #fff5dc; 
margin-left: 5%; 
font-size: 1.5rem;
line-height: 2rem;
}

.formularioencuesta .contenedor .formfinal .centro select option{
border: solid 2px #ff435a; 
background-color: transparent; 
color: #372d3b;
float: left;
}

.formularioencuesta .contenedor .formfinal .horario {
line-height: 2rem;
width: 48%;
float: left;
}

.formularioencuesta .contenedor .formfinal .horario input {
border:solid 2px #ff435a; 
background-color: transparent; 
color: #fff5dc;
width: 48%;
margin-left: 5%;
}


/*

CUARTA PANTALLA 
---------------    */



.formularioencuesta .contenedor .formfinalpantalla4 {
margin: 5% auto;
}

.formularioencuesta .contenedor .formfinalpantalla4 .izquierda {
float: left; 
width: 45%;
}

.formularioencuesta .contenedor .formfinalpantalla4 .izquierda h3 {
color: #fde59f;
}

.formularioencuesta .contenedor .formfinalpantalla4 .derecha {
float: left; 
width: 55%;
}

.formularioencuesta .contenedor .formfinalpantalla4 .derecha p {
width: 80%; 
color: #fde59f;
font-size: 1rem;
}


.formularioencuesta .contenedor .formfinalpantalla4 .derecha textarea {
width: 80%; 
border-color: #ff435a; 
}


.formularioencuesta .contenedor .botones2 {
position: relative; 
}

/*

QUINTA PANTALLA 
---------------    */

.formularioencuesta #dejanos, .formularioencuesta #gracias {
background-color: #ff435a; 
}



/*--------------------- QUIERO INVERTIR ----------------------*/


.formularioquieroinvertir .contenedor input {
border-color: #f1941c; 
}

.formularioquieroinvertir #tituloseccion {
border-color: #f1941c; 
}

.formularioquieroinvertir h1 {
color: #f1941c;
}


/*

PRIMER PANTALLA 
---------------    */

 /* ASIDE TRES */

.formularioquieroinvertir .contenedor .tres ul {
list-style-image: url(../imagenes/formquieroinvertir/item2.svg);
}

/*

SEGUNDA PANTALLA 
---------------    */

.formularioquieroinvertir .contenedor .siguiente h3 {
color: #fff5dc; 
left: 40%; 
}


/*

TERCER PANTALLA 
---------------    */

.formularioquieroinvertir .contenedor h3 {
color: #fde59f;
}

.formularioquieroinvertir .contenedor .formfinal .encuesta3 {
width: 100%;
margin-left: 8%;
}

.formularioquieroinvertir .contenedor .formfinal .centro, .formularioquieroinvertir .contenedor .formfinal .rubro {
line-height: 2rem;
width: 35%;
float: left;
}

.formularioquieroinvertir .contenedor .formfinal .presupuesto {
line-height: 2rem;
width: 48%;
float: left;
}

.formularioquieroinvertir .contenedor .formfinal .presupuesto input {
line-height: 2rem;
font-size: 1.5rem;
width: 48%;
margin-left: 6%;
}

.formularioquieroinvertir .contenedor label {
margin-right: 5%; 
}

.formularioquieroinvertir select {
border: solid 2px #f1941c; 
background-color: transparent; 
color: #f1941c; 
font-size: 1.5rem;
line-height: 2rem;
}

.formularioquieroinvertir .contenedor select option {
border: solid 2px #f1941c; 
background-color: transparent; 
color: #372d3b;
}


.formularioquieroinvertir .contenedor .botones {
position: relative; 
padding-top: 10%;
}

.formularioquieroinvertir .contenedor .botones #atras, .formularioquieroinvertir .contenedor .botones2 #atras {
position: absolute; 
top: 105%; 
left: 47%; 
}

.formularioquieroinvertir .contenedor .botones #siguiente, .formularioquieroinvertir .contenedor .botones2 #siguiente {
position: absolute; 
top: 105%; 
left: 53%;
}


/*

CUARTA PANTALLA 
---------------    */

.formularioquieroinvertir .contenedor .formfinalpantalla4 {
margin: 5% auto;
}

.formularioquieroinvertir .contenedor .formfinalpantalla4 input {
font-size: 1.5rem;
margin-right: 1%;
}

.formularioquieroinvertir .contenedor .formfinal p {
font-size: 1rem; 
font-weight: 200; 
text-align: left; 
width: 48%; 
color: #fde59f; 
margin-left: 0;
box-sizing: border-box;
}

.formularioquieroinvertir .contenedor .formfinalpantalla4 .izquierda {
float: left; 
width: 45%;
}

.formularioquieroinvertir .contenedor .formfinalpantalla4 .derecha {
float: left; 
width: 55%;
}

.formularioquieroinvertir .contenedor .formfinalpantalla4 .derecha p {
width: 80%; 
color: #fde59f;
font-size: 1rem;
}


.formularioquieroinvertir .contenedor textarea {
width: 80%; 
border-color: #f1941c; 
}

.formularioquieroinvertir .contenedor .botones2 {
position: relative; 
}


/*

QUINTA PANTALLA 
---------------    */

.formularioquieroinvertir .contenedorinterno {
padding: 0;
}

.formularioquieroinvertir #dejanos, .formularioquieroinvertir #gracias {
background-color: #f1941c; 
}