.contact{
	overflow:hidden;
}
.contact .contact-header{
	padding:200px 20px 140px;
	background-image: url(../imagenes/plantilla-empresa/encabezado.jpg);
}
.contact .contact-header h1{
	
}
.contact .contact-map{
	
}
.contact .contact-content{
	padding:0px 20px 80px;
}
.contact .contact-content .container{
	overflow: visible;
}
.contact .contact-content .contact-content-box{
	border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;

	background: #fff;
	display:flex;
	flex-wrap: wrap;
	position: relative;
	z-index:2;
	width: calc(100% - 160px);
	margin:-100px auto 0px;
}
.contact .contact-info{
	padding:30px;
	width:30%;
	background: var(--color-01);
	color: #fff;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.contact .contact-info h6{
	font-size: 24px;
}
.contact .contact-info ul{
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	list-style:none;
}
.contact .contact-info ul li{
	display:block;
	width: 100%;
	margin-top:20px;
}
.contact .contact-info ul li a{
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	color: #fff;
	width: 100%;
}
.contact .contact-info ul li a i{
	font-size:40px;
	text-align: center;
	width: 40px;
	margin-right:15px;
}
.contact .contact-info ul li a p{
	line-height: 120%;
	width: calc(100% - 55px);
	font-size:13px;
	color: #fff;
}
.contact .contact-info ul li a p strong{
	display:block;
}
.contact .contact-body{
	padding:30px;
	width:70%;
	font-size: 14px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.contact .contact-body h6{
	font-size: 24px;
}
.contact .contact-body .contact-details{
	margin-bottom:30px;
}
.contact .contact-body .contact-form{
	
}
.contact .contact-body .contact-form form{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.contact .contact-form-left,
.contact .contact-form-right{
	width:calc(50% - 15px);
	line-height: 0;
}
.contact .contact-form .ui-field{
	width:100%;
	margin-bottom:15px;
}
.contact .contact-form .el-field-email{
	margin-bottom:0px;
}
.contact .contact-form .el-field-message{
	height:80px;
}
.contact .contact-form .ui-button{
	width:100%;
}
.contact .contact-data{
	padding:0px 20px 80px;
}
.contact .contact-data .container{
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	gap:20px;
}
.contact .contact-data a{
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	color: var(--color-03);
    font-size: 14px;
}
.contact .contact-data a:hover{
	color:var(--color-02);
}
.contact .contact-data a i{
	font-size:70px;
	text-align: center;
	min-width: 70px;
	margin-right:20px;
}
.contact .contact-data a p{
	line-height: 120%;
}
.contact .contact-data a p strong{
	display:block;
}

/*################# TABLETS #################*/

@media all and (max-width: 1280px){
	.contact .contact-content .contact-content-box{
		width: 100% ;
	}
}
@media all and (max-width: 1024px){
	.contact .contact-info{
		width:100%;
	}
	.contact .contact-info .contact-info-container a{
		width: auto;
	}
	.contact .contact-body{
		width:100%;
	}
}

@media all and (max-width: 768px){	
	.contact .contact-info .contact-info-container a{
		width: 100%;
	}
}

/*################# MOVILES #################*/

@media all and (max-width: 600px){
	.contact .contact-form-left,
	.contact .contact-form-right{
		width:100%;
	}
	.contact .contact-form-right{
		margin-top:15px;
	}
	.contact .contact-form .input-nombre,
	.contact .contact-form .input-phone,
	.contact .contact-form .input-email,
	.contact .contact-form .input-message{
		width:100%;
		margin-bottom:15px;
	}
	.contact .contact-form .boton-contactar{
		width:100%;
		margin:0px;
	}
	.contact .contact-data a{
		width: 100%;
	}
}

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