@charset "UTF-8";

@media only screen and (max-width: 820px) {
body {
	padding: 0;
	margin: 0;
	background-color: #fff;
}

.container {
	width: 100%;
	margin: 0 auto;
}

.container {
	width: 100%;
	margin: 0 auto;
	background-image: url("../img/onda.svg");
	background-repeat: no-repeat;
	background-position: top;
	background-position-x: right;
	background-size: 560px;
}	

/*header*/

.pleca {
	margin: auto;
	width: 100%;
	height: 5px;
}

.header {
	width: 100%;
	max-width: 1170px;
	height: 100%;
	min-height: 550px;
	margin: 0 auto;
	padding-left: 50px;
	padding-top: 75px;
}

.logo {
	width: 30%;
	min-width: 330px;
	height: 100%;
	margin: auto;
	float: left;
}

.servicios {
	width: 50%;
	min-width: 400px;
	height: 100%;
	margin: auto;
	float: right;
	padding-top: 154px;
}

ul {
	float: left;
	list-style: none;
	text-align: right;
}

li {
	font-family: Figtree-Bold;
	font-size: 40px;
	color: #353956;
	background-image: url("../img/flecha.svg");
	background-repeat: no-repeat;
	background-position: right;
	background-size: 52px;
	padding-right: 60px;
}

/*contacto*/

.contacto {
	width: 100%;
	max-width: 1170px;
	height: 100%;
	min-height: 540px;
	margin: 0 auto;
	padding-left: 50px;
}

.cont1 {
	width: 40%;
	min-width: 390px;
	height: 100%;
	margin: auto;
	float: left;
}

.msj {
	width: 50%;
	min-width: 390px;
	height: 86px;
	margin: auto;
	float: left;
	font-family: Figtree-Medium;
	font-size: 20px;
	color: #F17E14;
	padding-top: 20px;
}

/*formulario*/

.forma {
	width: 50%;
	min-width: 390px;
	height: 100%;
	margin: auto;
	float: left;
}

/*dirección*/

.cont2 {
	width: 40%;
	min-width: 300px;
	height: 100%;
	margin: auto;
	float: left;
	padding-top: 143px;
	padding-left: 50px;
}

.dir {
	width: 50%;
	min-width: 300px;
	height: 97px;
	margin: auto;
	float: left;
	font-family: Figtree-Light;
	font-size: 16px;
	color: #353956;
}

.mail {
	width: 50%;
	min-width: 300px;
	height: 59px;
	margin: auto;
	float: left;
	font-family: Figtree-Light;
	font-size: 16px;
	color: #353956;
}

.tel {
	width: 50%;
	min-width: 300px;
	height: 59px;
	margin: auto;
	float: left;
	font-family: Figtree-Light;
	font-size: 16px;
	color: #353956;
}

.redes {
	width: 50%;
	min-width: 300px;
	height: 21px;
	float: left;
}

/*footer*/

.footer {
	width: 100%;
	max-width: 810px;
	height: 100%;
	min-height: 100px;
	margin: 0 auto;
	padding-left: 50px;
	padding-top: 0px;
}

.hr {
	border: none;
	border-top: 1px solid #D9D9D9;
	margin-bottom: 0px;
	margin-top: 0px;
	float: right;
	width: 595px;
	
}

@media only screen and (max-width: 768px) { 
	body {
		padding: 0;
		margin: 0;
		background-color: #fff;
	}
	
	.container {
		width: 100%;
		margin: 0 auto;
	}
	
	.container {
		width: 100%;
		margin: 0 auto;
		background-image: url("../img/onda.svg");
		background-repeat: no-repeat;
		background-position: top;
		background-position-x: right;
		background-size: 480px;
	}	
	
	/*header*/

	.pleca {
		margin: auto;
		width: 100%;
		height: 5px;
	}
	
	.header {
		width: 100%;
		max-width: 1170px;
		height: 100%;
		min-height: 550px;
		margin: 0 auto;
		padding-left: 50px;
		padding-top: 75px;
	}
	
	.logo {
		width: 30%;
		min-width: 300px;
		height: 100%;
		margin: auto;
		float: left;
	}
	
	.servicios {
		width: 50%;
		min-width: 400px;
		height: 100%;
		margin: auto;
		float: right;
		padding-top: 154px;
	}
	
	ul {
		float: left;
		list-style: none;
		text-align: right;
	}
	
	li {
		font-family: Figtree-Bold;
		font-size: 40px;
		color: #353956;
		background-image: url("../img/flecha.svg");
		background-repeat: no-repeat;
		background-position: right;
		background-size: 52px;
		padding-right: 60px;
	}

	/*contacto*/

	.contacto {
		width: 100%;
		max-width: 1170px;
		height: 100%;
		min-height: 540px;
		margin: 0 auto;
		padding-left: 50px;
	}

	.cont1 {
		width: 40%;
		min-width: 390px;
		height: 100%;
		margin: auto;
		float: left;
	}

	.txt2 {
		width: 50%;
		min-width: 390px;
		height: 57px;
		margin: auto;
		float: left;
		font-family: Figtree-SemiBold;
		font-size: 22px;
		color: #353956;
	}

	.msj {
		width: 50%;
		min-width: 370px;
		height: 200px;
		margin: auto;
		float: left;
		font-family: Figtree-Medium;
		font-size: 20px;
		color: #F17E14;
		padding-top: 20px;
	}
	
	.txt3 {
		width: 50%;
		min-width: 390px;
		height: 86px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 18px;
		color: #353956;
	}

	/*dirección*/

	.cont2 {
		width: 40%;
		min-width: 300px;
		height: 100%;
		margin: auto;
		float: left;
		padding-top: 143px;
		padding-left: 50px;
	}

	.dir {
		width: 50%;
		min-width: 250px;
		height: 97px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 16px;
		color: #353956;
	}

	.mail {
		width: 50%;
		min-width: 250px;
		height: 59px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 16px;
		color: #353956;
	}

	.tel {
		width: 50%;
		min-width: 250px;
		height: 59px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 16px;
		color: #353956;
	}

	.redes {
		width: 50%;
		min-width: 250px;
		height: 21px;
		float: left;
	}
}

@media only screen and (max-width: 414px) {
	body {
		padding: 0;
		margin: 0;
		background-color: #fff;
	}
	
	.container {
		width: 100%;
		margin: 0 auto;
	}
	
	.container {
		width: 100%;
		margin: 0 auto;
		background-image: url("../img/onda.svg");
		background-repeat: no-repeat;
		background-position: top;
		background-position-x: right;
		background-size: 450px;
	}

	/*header*/

	.pleca {
		margin: auto;
		width: 100%;
		height: 5px;
	}

	.header {
		width: 100%;
		max-width: 1170px;
		height: 100%;
		min-height: 700px;
		margin: 0 auto;
		padding-left: 20px;
		padding-top: 75px;
	}

	.logo {
		width: 30%;
		min-width: 330px;
		height: 100%;
		margin: auto;
		float: left;
	}

	.servicios {
		width: 50%;
		min-width: 400px;
		height: 100%;
		margin: auto;
		float: right;
		padding-top: 50px;
	}

	ul {
		float: right;
		list-style: none;
		text-align: right;
		padding-right: 10px;
	}

	li {
		font-family: Figtree-Bold;
		font-size: 40px;
		color: #353956;
		background-image: url("../img/flecha.svg");
		background-repeat: no-repeat;
		background-position: right;
		background-size: 52px;
		padding-right: 60px;
	}

	/*contacto*/

	.contacto {
		width: 100%;
		max-width: 1170px;
		height: 100%;
		min-height: 900px;
		margin: 0 auto;
		padding-left: 20px;
	}

	.cont1 {
		width: 40%;
		min-width: 370px;
		height: 100%;
		margin: auto;
		float: left;
	}

	.txt2 {
		width: 50%;
		min-width: 370px;
		height: 57px;
		margin: auto;
		float: left;
		font-family: Figtree-SemiBold;
		font-size: 20px;
		color: #353956;
	}
	
	.txt3 {
		width: 50%;
		min-width: 370px;
		height: 86px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 16px;
		color: #353956;
	}

	.msj {
		width: 50%;
		min-width: 370px;
		height: 200px;
		margin: auto;
		float: left;
		font-family: Figtree-Medium;
		font-size: 20px;
		color: #F17E14;
		padding-top: 18px;
	}
	
	/*formulario*/

	.forma {
		width: 50%;
		min-width: 370px;
		height: 100%;
		margin: auto;
		float: left;
	}

	.form-input, .form-textarea {
		width: 350px;
		height: 40px;
		background: #fff;
		border: 0px;
		border-bottom: 1px solid #999;
		padding-left: 20px;
		margin-bottom: 20px;
		outline: none;
		font-family: Figtree-Light;
		font-size: 13px;
	}
	
	.form-textarea {
		min-height: 80px;
		max-height: 150px;
		min-width: 350px;
		max-width: 350px;
		padding-top: 10px;
		box-sizing: border-box;
	}

	input::placeholder {
		color: #777;
		font-family: Figtree-Light;
		font-size: 13px;
	}
	
	textarea::placeholder {
		color: #777;
		font-family: Figtree-Light;
		font-size: 13px;
	}
	
	.boton {
		width: 200px;
		height: 117px;
		padding-left: 252px;
	}
	
	.button {
		font-family: Figtree-Medium;
		font-size: 15px;
		color: #fff;
		letter-spacing: 0px;
		text-decoration: none;
		text-align: left;
		display: inline-block;
		width: 100px;
		height: 40px;
		padding-top: 3px;
		padding-left: 23px;
		position: relative;
		overflow: hidden;
		border-radius: 8px;
		border: none;
		background: #F17E14;
		transition: all 1s ease;
		cursor: pointer;
	}

	.button:hover {
		background: #54668E;
	}

	/*dirección*/

	.cont2 {
		width: 40%;
		min-width: 300px;
		height: 100%;
		margin: auto;
		float: left;
		padding-top: 20px;
		padding-left: 0px;
	}

	.dir {
		width: 50%;
		min-width: 300px;
		height: 97px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 14px;
		color: #353956;
	}

	.mail {
		width: 50%;
		min-width: 300px;
		height: 59px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 14px;
		color: #353956;
	}

	.tel {
		width: 50%;
		min-width: 300px;
		height: 59px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 14px;
		color: #353956;
	}

	.redes {
		width: 50%;
		min-width: 300px;
		height: 21px;
		float: left;
	}

	/*footer*/

	.footer {
		width: 100%;
		max-width: 1170px;
		height: 100%;
		min-height: 100px;
		margin: 0 auto;
		padding-left: 20px;
		padding-top: 0px;
	}

	.hr {
		border: none;
		border-top: 1px solid #D9D9D9;
		margin-bottom: 0px;
		margin-top: 0px;
		float: right;
		width: 260px;
	}

	.txt4 {
		width: 30%;
		height: 61px;
		margin: auto;
		padding-top: 20px;
		float: left;
		font-family: Figtree-Light;
		font-size: 11px;
		color: #353956;
		}
}

@media only screen and (max-width: 375px) {
	body {
		padding: 0;
		margin: 0;
		background-color: #fff;
	}
	
	.container {
		width: 100%;
		margin: 0 auto;
	}
	
	.container {
		width: 100%;
		margin: 0 auto;
		background-image: url("../img/onda.svg");
		background-repeat: no-repeat;
		background-position: top;
		background-position-x: right;
		background-size: 450px;
	}

	/*header*/

	.pleca {
		margin: auto;
		width: 100%;
		height: 5px;
	}

	.header {
		width: 100%;
		max-width: 1170px;
		height: 100%;
		min-height: 700px;
		margin: 0 auto;
		padding-left: 20px;
		padding-top: 75px;
	}

	.logo {
		width: 30%;
		min-width: 330px;
		height: 100%;
		margin: auto;
		float: left;
	}

	.servicios {
		width: 50%;
		min-width: 400px;
		height: 100%;
		margin: auto;
		float: right;
		padding-top: 50px;
	}

	ul {
		float: right;
		list-style: none;
		text-align: right;
		padding-right: 10px;
	}

	li {
		font-family: Figtree-Bold;
		font-size: 40px;
		color: #353956;
		background-image: url("../img/flecha.svg");
		background-repeat: no-repeat;
		background-position: right;
		background-size: 52px;
		padding-right: 60px;
	}

	/*contacto*/

	.contacto {
		width: 100%;
		max-width: 1170px;
		height: 100%;
		min-height: 900px;
		margin: 0 auto;
		padding-left: 20px;
	}

	.cont1 {
		width: 40%;
		min-width: 340px;
		height: 100%;
		margin: auto;
		float: left;
	}

	.txt2 {
		width: 50%;
		min-width: 340px;
		height: 57px;
		margin: auto;
		float: left;
		font-family: Figtree-SemiBold;
		font-size: 20px;
		color: #353956;
	}
	
	.txt3 {
		width: 50%;
		min-width: 340px;
		height: 86px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 16px;
		color: #353956;
	}

	.msj {
		width: 50%;
		min-width: 340px;
		height: 200px;
		margin: auto;
		float: left;
		font-family: Figtree-Medium;
		font-size: 18px;
		color: #F17E14;
		padding-top: 20px;
	}
	
	/*formulario*/

	.forma {
		width: 50%;
		min-width: 340px;
		height: 100%;
		margin: auto;
		float: left;
	}

	.form-input, .form-textarea {
		width: 320px;
		height: 40px;
		background: #fff;
		border: 0px;
		border-bottom: 1px solid #999;
		padding-left: 20px;
		margin-bottom: 20px;
		outline: none;
		font-family: Figtree-Light;
		font-size: 13px;
	}
	
	.form-textarea {
		min-height: 80px;
		max-height: 150px;
		min-width: 320px;
		max-width: 320px;
		padding-top: 10px;
		box-sizing: border-box;
	}

	input::placeholder {
		color: #777;
		font-family: Figtree-Light;
		font-size: 13px;
	}
	
	textarea::placeholder {
		color: #777;
		font-family: Figtree-Light;
		font-size: 13px;
	}
	
	.boton {
		width: 200px;
		height: 117px;
		padding-left: 222px;
	}
	
	.button {
		font-family: Figtree-Medium;
		font-size: 15px;
		color: #fff;
		letter-spacing: 0px;
		text-decoration: none;
		text-align: left;
		display: inline-block;
		width: 100px;
		height: 40px;
		padding-top: 3px;
		padding-left: 23px;
		position: relative;
		overflow: hidden;
		border-radius: 8px;
		border: none;
		background: #F17E14;
		transition: all 1s ease;
		cursor: pointer;
	}

	.button:hover {
		background: #54668E;
	}

	/*dirección*/

	.cont2 {
		width: 40%;
		min-width: 300px;
		height: 100%;
		margin: auto;
		float: left;
		padding-top: 20px;
		padding-left: 0px;
	}

	.dir {
		width: 50%;
		min-width: 300px;
		height: 97px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 14px;
		color: #353956;
	}

	.mail {
		width: 50%;
		min-width: 300px;
		height: 59px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 14px;
		color: #353956;
	}

	.tel {
		width: 50%;
		min-width: 300px;
		height: 59px;
		margin: auto;
		float: left;
		font-family: Figtree-Light;
		font-size: 14px;
		color: #353956;
	}

	.redes {
		width: 50%;
		min-width: 300px;
		height: 21px;
		float: left;
	}

	/*footer*/

	.footer {
		width: 100%;
		max-width: 1170px;
		height: 100%;
		min-height: 100px;
		margin: 0 auto;
		padding-left: 20px;
		padding-top: 0px;
	}

	.hr {
		border: none;
		border-top: 1px solid #D9D9D9;
		margin-bottom: 0px;
		margin-top: 0px;
		float: right;
		width: 240px;
	}

	.txt4 {
		width: 30%;
		height: 61px;
		margin: auto;
		padding-top: 20px;
		float: left;
		font-family: Figtree-Light;
		font-size: 11px;
		color: #353956;
		}
}