@charset "utf-8";
/* CSS Document für Kontakt Formular */

*{box-sizing: border-box;}

#contact_wrapper {
width: 100%;
height: 800px;

background-image:url("../img/fondo2.png");
background-repeat:no-repeat;
background-size:80%;
background-position:center;/**/

}

#formulario {font-family: "Barlow Semi Condensed";
font-size: 100%;
color: #555;
text-align: justify;
width: 60rem;
height: auto;
margin-left:25%;
margin-top: 5%;
	
}


#contact_form{
background-color:#e7e3d6;
margin-top:8rem;
padding:4rem;
line-height: 2.5rem;
position: relative;
font-size:100%;
}


#contact_title {
padding-bottom: 6%;
font-size: 1.25rem;
text-align: center;
}

#mensaje{
width: 28.125rem;
width: 100%;
height: 11.25rem;
}

.btn_link_con{
height:auto;
background-color:#a1864c;
color:#fff;
border-radius: 4%;
padding: 1% 1.5%;
text-decoration:none;
text-height:auto;
line-height:50%;	
}

.btn_link_con:hover{
background-color:#987b3d;
cursor:pointer;	
}



[type="text"]{
position: relative;
align-content: flex-end;
}

[type="text"], [type="submit"], [type="reset"] {
width: 12.5rem;
background-color: #fff;
border: none;
font-family: "Barlow Semi Condensed";
color: #a1864c;
font-size: 87.5%;
}

[type="submit"], [type="reset"]{
background-color: #a1864c;
color:#fff;
height: 1.75rem;
}


[type="submit"]{
margin-right:2.813rem;
}


[name="cp"] {
width:10rem;
margin-right: 1.75rem;
}

[name="ciudad"]{
width:19.5rem
}

[name="nombre"]{
width: 45.3rem;
}

[name="apellidos"]{
width: 44.7rem;
}

[name="email"]{
width:39.3rem;
}

[name="mensaje"]{
width:47rem;
height: 10rem;
}


/*    +++++++++++Formate für benutzerdefinierte Meldungen ++++++  */

#contact_form div { background-color:#8B901C;;
						border:3px solid #fff;
						padding:0px 10px;
						display:none;
						color:#fff;}

#n1_name{
	position: absolute;
	left: 12.063rem;
	top: 3.438rem;
}
#n2_name{
	position: absolute;
	left: 12.063rem;
	top: 5.625rem;
	}

#n4_plz, #n4_plz2{
	position: absolute;
	left: 3.125rem;
	top: 7.5rem;}

#n3_mail{
	position: absolute;
	left: 12.063rem;
	top: 9.688rem;
	}
#n3_mail2{
	position: absolute;
	left: 9.563rem;
	top: 8.438rem;
	}

#n5_tlf{
	position: absolute;
	left: 9.375rem;
	top: 11.875;
	line-height:1.25rem;
	}

#n6_msg{
	position: absolute;
	left:0.938rem;
	top:17.5rem;
}


/*	REPONSIVE DESIGN 	*/
@media screen and (max-width: 1280px) {
	#contact_wrapper {
		width:50%;
		background-image:none;
	}
}


@media screen and (max-width: 1024px) {
	#contact_wrapper{
	width:30%;
	}
	
	#contact_form{
	margin-top:5%;
	margin-right:6%;
	}
	
	[name="cp"] {
	width:10rem;
	}
	
	[name="ciudad"]{
	width:30rem
	}
	
	[name="nombre"]{
	width: 40rem;
	}
	
	[name="apellidos"]{
	width: 39rem;
	}
	
	[name="email"]{
	width:25rem;
	}
	
	[name="tlf"]{
	width: 20rem;
	}
	
	
}

@media screen and (max-width: 800px) {
	#contact_wrapper {
		height:auto;
		background-image:none;
		margin-right:2%;
		padding-right:1%;
		margin-left:10%;
	}
	
	#formulario {
		margin:0;
		width:30rem;
		
	}
	
	#contact_form {
		padding:0 10% 3% 10%;
		text-align:left;
		margin:0;
		width:130%;
	}
	
	
	#contact_title {
	line-height:2rem;
	padding-top:2rem;
	}
	
	.btn_link_con{
	width:95%;
	font-family:"Barlow Semi Condensed";	
	}
	
	#msg{
	width:95%;	
	}
	
	[name="cp"] {
	width:15rem;
	}
	
	[name="ciudad"]{
	width:18rem
	}
	
	[name="nombre"]{
	width: 28rem;
	}
	
	[name="apellidos"]{
	width: 27.5rem;
	}
	
	[name="email"]{
	width:22rem;
	}
	
	[name="tlf"]{
	width:17.2rem;	
	}
}


@media screen and (max-width:414px) {
	.title{
	font-size:100%;
	}
	
	#contact_wrapper{
		margin:3%;
	}
	
	#contact_form{
		margin:0;
		width:80%;
		line-height:1.9rem;
	}

	#contact_title{
		line-height:1.5rem;
		font-weight:200;
	}
	
	.btn_link_con{
		height:1.4rem;
	}
	
	.footer{
	height:60rem;	
	}
	
	.bodasnet{
		width:70%;
	}
	
	.rrss img{
		width:20%;
	}
	
}



@media screen and (max-width:375px) {
	#contact_form {
	padding:3% 3% 5% 6%;
	width:77%;
	}
	
	#contact_wrapper{
	margin-right:0;
	
	padding:1%;
	}
	
	#contact_title{
	font-size:120%;	
	line-height:100%;
	width:85%;
	text-align:justify;
	}
	
	[name="cp"] {
	width:6rem;
	}
	
	[name="ciudad"]{
	width:10rem;
	}
	
	[name="nombre"]{
	width: 18rem;
	}
	
	[name="apellidos"]{
	width: 14rem;
	}
	
	[name="email"]{
	width:18rem;
	}
	
	[name="tlf"]{
	width:11rem;	
	}
	
	#msg {
	width:80%;
	margin-right:3%;	
	}
	
	.footer{
	width:110%;
	padding-left:6%;
	}
}