/*I.Estilos generales*/
* {
    margin: 0;
    /*Margen a todos los lados*/
    padding: 0;
    /*Margen interno*/
    outline: none;
    /*Separado de lineas*/
}

/*Poniendo imagen de fondo en el Body de la página de cotizasion*/
.body-cotizasion {
    background: url(../img/proyectos/pagina-cotizacion.jpg);
    /*Cargando imagen de fondo*/
    background-position: center;
    /*Pocisionando la imagen al centro*/
    background-size: cover;
    /*Tamaño de fondo estilo portada, es decir; la imagen ocupara tood el*/
    background-repeat: no-repeat;
    /*Evitar que se repita la imagen*/
}


/*Altura de 1126px*/
/*
Al tener la pantalla una altura mayor  a los 1126px se realizaran
los siguientes cambios:
*/
@media screen and (min-height: 844px) {
    .body-cotizasion {
        background: none;
        background-color: #f4f4f4;
    }
}

.contenedor-formulario {
    display: flex;
    /*Trabajando con Flexbox*/
    min-height: 400px;
    /*Altura minima*/
    background: #fff;
    /*Color de fondo*/
    width: 700px;
    /*Ancho del contenedor*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
    margin-bottom: 15px;
    justify-content: center;
    /*Alineacion horizontal*/
    text-align: center;
    /*Alineando todo su texto al centro*/
    padding: 0px 35px 0px 35px;
    /*Orden de padding tomando la direccion de las manesillas del reloj*/
}

@media screen and (max-width: 710px) {
    .contenedor-formulario {
        width: 650px;
    }
}

@media screen and (max-width: 640px) {
    .contenedor-formulario {
        width: 600px;
    }
}

@media screen and (max-width: 480px) {
    .contenedor-formulario {
        width: 450px;
    }
}

@media screen and (max-width: 470px) {
    .contenedor-formulario {
        width: 430px;
    }
}

@media screen and (max-width: 452px) {
    .contenedor-formulario {
        width: 400px;
    }
}

@media screen and (max-width: 415px) {
    .contenedor-formulario {
        width: 375px;
    }
}

@media screen and (max-width: 320px) {
    .contenedor-formulario {
        width: 300px;
    }
}


.formulario-principal {
    margin-top: 30px;
    /*Margen superior*/
    width: 100%;
    /*Ancho del formulario principal*/

    /*VII. Ocultando los demas formularios*/
    overflow: hidden;
    /*ocultando los demas formularios*/
}

.titulo-pagina01,
.titulo-pagina02 {
    margin: 0 0 30px 0;
    /*Orden de los margenes tomando la direccion de las manesillas del reloj*/

}

.contenedor-formulario .formulario-principal {
    width: 100%;
    /*Ancho del formulario principal*/
}


/*II. Particionando el formulario principal en 2 partes*/
.formulario-principal form {
    display: flex;
    /*Iniciando a trabajar con flexbox*/
    width: 200%;
    /*Ancho del 200% debido a que tiene 2 paginas*/
}

/*III. Trabajando en los estilos generales de las páginas*/
.formulario-principal form .pagina {
    width: 50%;
    /*Ancho del 50% ya que divide el formulario en 2 partes*/

    transition: margin-left 0.3s ease-in-out;
    /*Trancision al mover de una página a otra con un inicio y final lento*/
}

/*IV. Dandole estilo a los titulos de las páginas*/
.formulario-principal form .pagina .titulo-pagina01,
.formulario-principal form .pagina .titulo-pagina02 {
    font-size: 25px;
    /*Tamaño de fuente*/
    font-weight: 600;
    /*Grosor de letra*/
    font-family: 'tipografia_para_titulo';
    /*Tipo de letra*/
    color: #0053b5;
    /*Color de letra*/
    line-height: 30px;
    /*Interlineado de letra*/
}

/*V. Editando los campos de forma general*/
.formulario-principal form .pagina .campo {
    width: 700px;
    /*Ancho*/
    margin: 50px 0px;
    /*0 pixeles arriba y abajo pero 0 a los costados*/
    display: flex;
    /*Trabajando con flexbox*/
    position: relative;
    /*Dandole una posicion relativa*/
}

@media screen and (max-width: 710px) {
    .formulario-principal form .pagina .campo {
        width: 650px;
    }
}

@media screen and (max-width: 640px) {
    .formulario-principal form .pagina .campo {
        width: 520px;
    }
}

@media screen and (max-width: 480px) {
    .formulario-principal form .pagina .campo {
        width: 450px;
    }
}

@media screen and (max-width: 452px) {
    .formulario-principal form .pagina .campo {
        width: 330px;
    }
}


@media screen and (max-width: 415px) {
    .formulario-principal form .pagina .campo {
        width: 305px;
    }
}

@media screen and (max-width: 320px) {
    .formulario-principal form .pagina .campo {
        width: 230px;
    }
}


/*VI. Dandole estilo a los Labels*/
.formulario-principal form .pagina .campo .label-pagina01,
.formulario-principal form .pagina .campo .label-pagina02 {
    position: absolute;
    /*Posicion absoluta*/
    top: -30px;
    /*Subiendolo para arriba los "labels"*/
    font-weight: 600;
    /*Ancho de letra*/
    font-size: 16px;
    /*Tamaño de letra*/
    width: 90%;
    /*Ancho*/
    font-family: 'tipografia_para_texto';
    /*Tipo de letra*/
    text-align: left;
    /*Alineando texto a la izquierda*/
}

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

    .formulario-principal form .pagina .campo .label-pagina01,
    .formulario-principal form .pagina .campo .label-pagina02 {
        font-size: 14px;
    }
}

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

    .formulario-principal form .pagina .campo .label-pagina01,
    .formulario-principal form .pagina .campo .label-pagina02 {
        font-size: 12px;
    }
}

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

    .formulario-principal form .pagina .campo .label-pagina01,
    .formulario-principal form .pagina .campo .label-pagina02 {
        font-size: 11px;
    }
}


/*VI. Dandole estilo a los inputs, textarea y select */
.formulario-principal form .pagina .campo input,
.formulario-principal form .pagina .campo textarea,
.formulario-principal form .pagina .campo select {
    width: 570px;
    /*Ancho*/
    height: 100%;
    /*Altura*/
    border: 1px solid #0053b5;
    /*Estilo de borde*/
    font-size: 14px;
    /*Tamaño de letras que estan internas en los elementos*/
    padding-left: 15px;
    /*Borde interno por la derecha*/
    font-family: 'tipografia_para_texto';
    /*Tipo de letra*/
    padding-top: 10px;
    /*Margen superior interno*/
    padding-bottom: 10px;
    /*Margen inferior interno*/
}

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

    .formulario-principal form .pagina .campo input,
    .formulario-principal form .pagina .campo textarea,
    .formulario-principal form .pagina .campo select {
        width: 380px;
    }
}

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

    .formulario-principal form .pagina .campo input,
    .formulario-principal form .pagina .campo textarea,
    .formulario-principal form .pagina .campo select {
        width: 360px;
        font-size: 12px;
        /*Tamaño de letras que estan internas en los elementos*/
    }
}

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

    .formulario-principal form .pagina .campo input,
    .formulario-principal form .pagina .campo textarea,
    .formulario-principal form .pagina .campo select {
        width: 360px;
        font-size: 10px;
        /*Tamaño de letras que estan internas en los elementos*/
    }
}

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

    .formulario-principal form .pagina .campo input,
    .formulario-principal form .pagina .campo textarea,
    .formulario-principal form .pagina .campo select {
        width: 360px;
        font-size: 8px;
        /*Tamaño de letras que estan internas en los elementos*/
    }
}


.formulario-principal form .pagina .campo textarea {
    resize: none;
    /*Evitar que el usuario pueda manipular el tamaño del textarea*/
}





/*VII. Dandole estilo al botón del Fomulario#01*/
.ir-formulario-02 {
    padding: 10px;
    /*Margen interno del boton*/
    background: #0053b5;
    /*Color de fondo*/
    width: 250px;
    /*Anchura*/
    display: block;
    /*Ocupando toda la parte horizontal*/
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
    /*Margen superior*/
    box-shadow: 1px 2px 6px 1px rgba(0, 0, 0, .1);
    /*Agregando sombra*/
    transition: 0.3s ease;
    /*Velocidad al cambiar de color*/
    cursor: pointer;
    /*Tipo de cursor*/
    text-decoration: none;
    /*Quitandole decoracion al boton*/
    border: none;
    /*Quitandole bordes al boton*/
    color: #ffffff;
    /*Color de letra*/
    font-family: 'tipografia_para_titulo';
    /*Tipo de letra*/
    font-size: 20px;
    /*Tamaño de fuente*/
    margin-top: -20px;
    /*Moviendo los botones para arriba*/
}

/*BOTONES DE LA SEGUNDA PARTE DEL FORMULARIO*/
/*Estilos generales para los botones correspondientes
a la segunda parte del formulario.*/
.botones {
    justify-content: center;
}


.botones_segunda_parte_del_formulario {
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    /*Margen interno del boton*/
    background: #0053b5;
    /*Color de fondo*/
    width: 250px;
    /*Anchura*/
    transition: 0.3s ease;
    /*Velocidad al cambiar de color*/
    cursor: pointer;
    /*Tipo de cursor*/
    text-decoration: none;
    /*Quitandole decoracion al boton*/
    border: none;
    /*Quitandole bordes al boton*/
    color: #ffffff;
    font-family: 'tipografia_para_titulo';
    /*Tipo de letra*/
    font-size: 20px;
    /*Tamaño de fuente*/
}

.botones_segunda_parte_del_formulario_alineacion {
    justify-content: center;
}




@media screen and (max-width: 720px) {
    .formulario-principal form .pagina .campo button {
        width: 200px;
        display: block;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

@media screen and (max-width: 640px) {
    .formulario-principal form .pagina .campo button {
        width: 350px;
    }
}

@media screen and (max-width: 480px) {
    .formulario-principal form .pagina .campo button {
        width: 180px;
    }
}

@media screen and (max-width: 320px) {
    .formulario-principal form .pagina .campo button {
        width: 200px;
    }
}

.formulario-principal form .pagina .campo button:hover {
    background: #002867;
    /*Color de fondo*/
    box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, .2);
    /*Modificando sombra*/
    transform: translateY(-2px);
    /*Moviendo el boton para arriba*/
}


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

    .enviar-formulario {
        font-size: 12px;
        /*Tamaño de fuente*/
    }
}

.enviar-formulario {
    margin-left: 50px;
}