@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

body {
	margin: 0px;
    background-image: url(../images/bg_top.jpg);
    background-attachment: fixed;
    background-position: -180px -30px;
    overflow-x: hidden;
    background-size: 270%;
}

.bg_blur{
	display: none;
    overflow-x: hidden;
	overflow-y: hidden;
    filter: blur(11px);
    width: 2760px;
    margin: -20px 0px 0px -60px;
	}

.caja_nombre, .caja_mail, .caja_mensaje {
	font-family: 'Titillium', sans-serif;
    margin: 101px 0px 0px 557px;
    display: block;
    position: absolute;
    width: 278px;
    height: 42px;
    border-width: 3px;
    border-color: #ffffff;
    border-style: solid;
    background-color: #0000000d;
    color: #ffffff;
    text-indent: 13px;
    /* text-transform: uppercase; */
    font-size: 13px;
    letter-spacing: 0.2px;
    z-index: 1;
}
.caja_mail {
    margin: 171px 0px 0px 557px;
}
.caja_mensaje {
    margin: 241px 0px 0px 557px;
    width: 254px;
    height: 102px;
    padding: 11px 14px;
    text-indent: 0px;
}
.boton {
	background: url(btn_enviar.jpg) no-repeat;
    position: absolute;
    margin: 391px 0px 0px 557px;
    border: none;
    width: 288px;
    height: 56px;
    cursor: pointer;
    /* transition: background 0.2s ease; */
    background-position: 100% 0px;
    z-index: 1;
}
.boton:hover {
  background-position: 100% -56px;
}



.boton_adjuntar {
    position: absolute;
    width: 350px;
    /* padding: 6px 6px; */
    margin-right: 10px;
    border: none;
    /* border-radius: 5px; */
    cursor: pointer;
    /* background-color: #0079b2; */
    color: #f5f5f5d9;
    font-size: 14px;
    /* border-style: solid; */
    /* border-width: 1px; */
    border-color: #f5f5f582;
    /* height: 35px;*/
	    margin: 487px 0px 0px 557px;
}
	
.boton_adjuntar:hover {
  background-position: 100% -56px;
}

/* Ocultar el input real */
.boton_adjuntar {
  display: none;
}

/* Estilo del botón "falso" */
.btn-custom {
    display: inline-block;
    background-color: #fece84;
    color: #4b443e;
    padding: 7px 10px 5px 13px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-family: Titillium, sans-serif;
    position: absolute;
    margin: 490px 0px 0px 557px;
	z-index: 1;
}

.btn-custom:hover {
  background-color: #ffffff;
}


#archivo-nombre {
position: absolute;
    margin: 499px 0px 0px 657px;
    font-size: 13px;
    color: azure;
    font-family: Titillium, sans-serif;
	z-index: 1;
}



.btn_volver {
    position: absolute;
    margin: 302px 0px 0px 307px;
    background: url(btn_volver.jpg) no-repeat;
    border: none;
    width: 319px;
    height: 56px;
    cursor: pointer;
    background-position: 100% 0px;
    display: block;
}
.btn_volver:hover {
  background-position: 100% -56px;
}



.titulo {
	width: 252px;
    position: absolute;
    margin: 98px 0px 0px 155px;
    display: block;
    z-index: 1;
}
.texto_form, .texto_cajas, .texto_requerido, .texto_gracias {
	position: absolute;
    margin: 193px 0px 0px 157px;
    width: 260px;
    height: 90px;
    color: white;
    font-family: Titillium, sans-serif;
    line-height: 21px;
    /* opacity: 0.9; */
    /* background-color: blueviolet; */
    z-index: 1;
    font-size: 16px;
}
.texto_cajas {
	display: none;
	margin: 66px 0px 0px 464px;
    line-height: 80px;
    text-transform: uppercase;
    font-size: 14px;
}

input::placeholder,
textarea::placeholder {
  color: #ffffff; /* blanco */
	opacity: 0.9;
	font-family: 'Titillium', sans-serif;


}





.texto_requerido {
margin: 460px 0px 0px 556px;
    /* background-color: blueviolet; */
    height: 20px;
    font-size: 14px;
    width: 250px;
}

.texto_enviado {
  font-family: Titillium, sans-serif;
  font-size: 19px;
}

.texto_gracias {
	margin: 222px 0px 0px 307px;
    font-size: 19px;
    /* background-color: blueviolet; */
    text-align: center;
    width: 319px;
    height: 50px;
}
.redes {
	position: absolute;
    display: block;
    width: 191px;
    height: 57px;
    margin: 310px 0px 0px 157px;
    /* background-color: blue;*/

}
.redes_1, .redes_2, .redes_3 {
	background: url(redes.png) no-repeat;
    position: absolute;
    margin: 0px 0px 0px 0px;
    border: none;
    width: 57px;
    height: 57px;
    cursor: pointer;
    background-position: 0% 0px;
    z-index: 1;
    box-shadow: 0px -0px 90px #0000002b;
}
.redes_2 {
    margin: 0px 0px 0px 67px;
	background-position: 50% 0px;
}
.redes_3 {
    margin: 0px 0px 0px 134px;
	background-position: 100% 0px;
}
.redes_1:hover {
  background-position: 0% -57px;
}
.redes_2:hover {
  background-position: 50% -57px;
}
.redes_3:hover {
  background-position: 100% -57px;
}
.mensaje_enviado{
  position: absolute;
  width: 432px;
  margin: 67px 0px 0px 247px;
}


.box1, .box2{
	position: absolute;
    background-image: url(../images/bg_top.jpg);
    margin: 0px 0px 0px 0px;
    width: 465px;
    height: 587px;
    background-position: -540px -3px;
    background-size: 493%;
}
.box2{
    /* background-image: url(../images/bg_top.jpg); */
    margin: 0px 0px 0px 465px;
    background-position: -3210px -160px;
    background-size: 570%;
    /* box-shadow: inset 11px 1px 20px 13px #0000001c; */
}




/* ----------------------------------------- */
/* ----------  RESPONSIVE TABLET  ---------- */
/* ----------------------------------------- */

@media (max-width: 800px) {
  .box2 {
    display: none;
  }
}


@media (max-width: 800px) {
.box1, .box2{
    width: 680px;
	background-position: -285px -120px;
    background-size: 323%;
}
}

@media (max-width: 800px) {
.btn-custom{
    margin: 495px 0px 0px 361px;
}
}

@media (max-width: 800px) {
#archivo-nombre{
    margin: 504px 0px 0px 460px;
	font-size: 12px;
}
}

@media (max-width: 800px) {
body{
	background-position: -1280px 0px;
    background-size: 333%;
}
}

@media (max-width: 800px) {
.caja_nombre, .caja_mail, .caja_mensaje{
    margin: 120px 0px 0px 361px;
    width: 235px;
	height: 35px;
}
}
@media (max-width: 800px) {
.caja_mail{
    margin: 181px 0px 0px 361px;
}
}
@media (max-width: 800px) {
.caja_mensaje{
		margin: 243px 0px 0px 361px;
        width: 211px;
        height: 100px;
}
}
@media (max-width: 800px) {
.titulo{
    margin: 100px 0px 0px 78px;
	width: 215px;
}
}

@media (max-width: 800px) {
.texto_form{
    margin: 177px 0px 0px 79px;
}
}
@media (max-width: 800px) {
.redes{
    margin: 310px 0px 0px 81px;
}
}
@media (max-width: 800px) {
.texto_cajas{
    margin: 66px 0px 0px 360px;
}
}

@media (max-width: 800px) {
.boton{
        margin: 389px 0px 0px 361px;
        width: 244px;
        background-position: 50% 0px;
}
}
@media (max-width: 800px) {
.boton:hover{
  background-position: 50% -56px;
}
}

@media (max-width: 800px) {
.texto_requerido{
	margin: 460px 0px 0px 360px;
}
}

@media (max-width: 800px) {
.mensaje_enviado{
  width: 400px;
  margin: 84px 0px 0px 139px;
}
}

@media (max-width: 800px) {
.texto_gracias{
        margin: 232px 0px 0px 141px;
        font-size: 19px;
        /* background-color: blueviolet; */
        text-align: center;
        width: 399px;
        height: 50px;
}
}

@media (max-width: 800px) {
.btn_volver{
    margin: 302px 0px 0px 180px;
}
}



/* ----------------------------------------- */
/* ----------  RESPONSIVE MOBILE  ---------- */
/* ----------------------------------------- */

@media (max-width: 600px) {
body{
	background-position: -490px 0px;
    background-size: 549%;
}
}

@media (max-width: 600px) {
.box1, .box2 {
    width: 680px;
    background-position: -505px -109px;
    background-size: 293%;
}
}

@media (max-width: 600px) {
    .btn-custom {
        margin: 515px 0px 0px 49px;
    }
}

@media (max-width: 600px) {
    #archivo-nombre {
        margin: 523px 0px 0px 147px;
        font-size: 12px;
    }
}

@media (max-width: 600px) {
.texto_form, .redes {
    display: none;
}
}

@media (max-width: 600px) {
.titulo{
	margin: 52px 0px 0px 49px;
    width: 180px;
}
}

@media (max-width: 600px) {
.caja_nombre, .caja_mail, .caja_mensaje {
        margin: 139px 0px 0px 50px;
        width: 265px;
}
}

@media (max-width: 600px) {
.caja_mail {
        margin: 201px 0px 0px 50px;
}
}

@media (max-width: 600px) {
    .caja_mensaje {
        margin: 263px 0px 0px 50px;
        width: 241px;
}
}

@media (max-width: 600px) {
    .texto_cajas {
        margin: 87px 0px 0px 50px;
}
}

@media (max-width: 600px) {
    .boton {
        margin: 409px 0px 0px 50px;
        width: 274px;
        background-position: 50% 0px;
}
}

@media (max-width: 600px) {
    .texto_requerido {
     margin: 482px 0px 0px 50px;
}
}

@media (max-width: 600px) {
.mensaje_enviado{
  width: 290px;
  margin: 98px 0px 0px 40px;
}
}

@media (max-width: 600px) {
.texto_gracias{
        margin: 202px 0px 0px 0px;
        font-size: 16px;
        /* background-color: blueviolet; */
        text-align: center;
        width: 370px;
        height: 50px;
}
}

@media (max-width: 600px) {
.btn_volver{
    margin: 278px 0px 0px 75px;
    width: 219px;
    background-position: 50% 0px;
}
}

@media (max-width: 600px) {
.btn_volver:hover{
  background-position: 50% -56px;
}
}