:root {
	--azul-principal: #0071bc;
	--naranja-claro: #F38D47;
}

.cont-contacto {
    padding-top: 30px;
    min-height: 873px;
}



/* ============= ADVERTENCIA ============= */

h2 {
	font-size: 14px;
    color: black;
    margin-bottom: 20px;
    position: relative;
    top: 35%;
}

.imagen-advertencia {
    height: 70px;
    width: 100%;
    text-align: center;
    background-image: url("/img/advertencia_contacto.jpg");
    background-size: cover;
}

.caja-advertencia {
    margin-top: 1em;
    background-color: #ffe793;
}

.advertencia {
    width: 100%;
    padding: 3em;
}

.advertencia li {
    margin-bottom: 1.5em;
}

/* ============= FORMULARIO ============= */


.form-contacto {
    width: 100%;
    height: auto;
    text-align: center;
}

.form-contacto h2 {
	width: 80%;
    font-size: 15px;
    margin: auto;
    padding-top: 30px;
    padding-bottom: 20px;
    color: var(--azul-principal);
}

.form-contacto p {
    width: 80%;
    margin: auto;
    font-size: .8em;
    padding: 0 30px;
    color: black;
}

.form-inputs {
    padding: 20px;
}

.formulario {
    font-family: 'Montserrat';
    font-weight: 300;
    font-size: 1em;
    padding: 7px;
    margin-bottom: 10px;
    color: black;
}

textarea {
    width: 80%;
    height: 160px;
    border-radius: 10px;
    border: 0;
    background-color: #F1F1F1;
    margin-top: 2em;
    outline-color: var(--azul-principal);
}

input[type=text] {
    height: 40px;
    width: 80%;
    border: none;
    border-bottom: 2px solid silver;
    outline: none;
}

input:focus {
    border-bottom: 2px solid var(--azul-principal);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: .6; /* Firefox */
}

textarea::placeholder{
    color: silver;
}

/* ============= CHECKBOX PRIVACIDAD ============= */

.privacidad {
    width: 100%;
    margin: auto auto 1em;
}

.privacidad input {
    width: 30px;
}

.texto-privacidad {
	font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 170%;
    color: black;
}

.texto-privacidad a {
    color: var(--azul-principal);
}

.texto-privacidad a:hover {
    color: #ffe793;
}

/* ============= BOTÓN ENVÍO ============= */

input[type=submit] {
    width: 160px;
    height: 30px;
    background-color: var(--naranja-claro);
    border-radius: 10px;
    border: 0;
    color: var(--azul-principal);
    font-weight: 700;
}

input[type=submit]:hover {
    background-color: var(--azul-principal);
    color: var(--naranja-claro);
    cursor: pointer;
}

/* ============= || RESPONSIVE TIME || ============= */

@media (min-width: 700px){

    .form-contacto h2 {
        width: 100%;
    }

    .form-contacto p {
        width: 100%;
    }

    input[type=text] {
        width: 80%;
    }

    textarea {
        width: 80%;
    }
}

@media (min-width: 1024px){

    .cont-contacto {
        height: 50em;
    }

    .titulo-contacto{
        margin: 2.5em auto 1em;
    }

    .caja-advertencia {
        width: 50%;
        height: 52em;
        float: left;
        margin-top: 1.9em;
    }


    .advertencia p {
        font-size: 1em;
    }

    /* ============= FORMULARIO ============= */

    .form-contacto {
        width: 50%;
        height: 48em;
        float: left;
        margin-top: 1.9em;
    }

    .form-contacto h2 {
        width: 100%;
        font-size: 1.5em;
        margin-bottom: 0;
        top: 0;
    }

    form {
        margin-top: 3em;
    }

    .form-contacto p {
        width: 100%;
        font-size: .9em;
    }

    .form-inputs {
        width: 100%;
    }

    input[type=text] {
        width: 80%;
    }
    textarea {
        width: 80%;
    }

    /* ============= CHECKBOX PRIVACIDAD ============= */

    .privacidad {
        margin: 1.5em auto 2.5em;
    }

}

@media (min-width: 1680px){

    .caja-advertencia{
        width: 40%;
    }

    .imagen-advertencia {
        height: 115px;
    }

    .imagen-advertencia h2 {
        font-size: 1.3em;
        top: 42%;
    }

    .advertencia {
        margin-top: 4em;
    }

    .advertencia li {
        margin-bottom: 2.5em;
    }

    .form-contacto {
        width: 60%;
        margin-top: 6em;
    }
}