/* ================================================================================================================== */
/* corpo */
/* ================================================================================================================== */

#contacts { display: block; position: relative; width: 100%; height: auto; margin: 0; padding: 0; }
	#contacts div.container { display: block; position: relative; width: auto; margin: 0; text-align: center; }
		#contacts div.container div.left { display: inline-block; position: relative; width: 60%; vertical-align: top; padding: 0; text-align: left; }
		#contacts div.container div.right { display: inline-block; position: relative; width: 40%; padding: 0 0 0 25px; vertical-align: top; text-align: left; }

@media all and ( max-width: 1200px ) {
	#contacts { padding: 25px 0 0 0; }
		#contacts div.container { margin: 0 15px; }
}
@media all and ( max-width: 1050px ) {
	#contacts div.container div.left { width: 100%; }
	#contacts div.container div.right { width: 100%; padding: 0; }
}

/* ================================================================================================================== */
/* mapas */
/* ================================================================================================================== */

#contacts div.maps { display: block; position: relative; width: 100%; margin: 50px 0 0 0; text-align: center; }
	#contacts div.maps div.button { display: inline-block; position: relative; vertical-align: middle; text-decoration: none; padding: 0 5px; width: 25%; }
		#contacts div.maps div.button a { display: block; position: relative; vertical-align: middle; width: 100%; height: 100%; border: 2px solid #b2b4b6; color: #b2b4b6; font-size: 0.875em; text-decoration: none; }
		#contacts div.maps div.button a[data-selected="true"],
		#contacts div.maps div.button a:hover { border: 2px solid #e81c24; background-color: #e81c24; color: #ffffff; }
	#contacts div.maps div#map { display: block; position: relative; width: 100%; height: 450px; margin: 25px 0 0 0; }

@media all and ( max-width: 1050px ) {
	#contacts div.maps { margin: 15px 0 0 0; }
		#contacts div.maps div#map { height: 300px; margin: 15px 0 0 0; }
}
@media all and ( max-width: 550px ) {
	#contacts div.maps div.button { width: 50%; margin-bottom: 5px; }
}
@media all and ( max-width: 375px ) {
	#contacts div.maps div.button { width: 100%; margin-bottom: 5px; }
}

/* ================================================================================================================== */
/* contactos */
/* ================================================================================================================== */

#contacts div.contacts { position: relative; background-color: #e81c24; padding: 50px 25px 25px 25px; margin: 107px 0 0 0; }
#contacts div.contacts[data-status="false"] { display: none; }
#contacts div.contacts[data-status="true"] { display: block; }
	#contacts div.contacts div.row { display: block; position: relative; margin-bottom: 25px; text-align: left; }
		#contacts div.contacts div.row span.icon { display: inline-block; position: relative; vertical-align: top; background: transparent no-repeat center center; background-size: contain; }
		#contacts div.contacts div.row span.icon.schedule { width: 23px; height: 23px; background-image: url(../images/contacts_icon_1.png); }
		#contacts div.contacts div.row span.icon.address { width: 23px; height: 23px; background-image: url(../images/contacts_icon_2.png); }
		#contacts div.contacts div.row span.icon.phone { width: 23px; height: 23px; background-image: url(../images/contacts_icon_3.png); }
		#contacts div.contacts div.row span.icon.email { width: 23px; height: 23px; background-image: url(../images/contacts_icon_4.png); }
		#contacts div.contacts div.row div.text { display: inline-block; position: relative; vertical-align: top; margin-left: 10px; }
			#contacts div.contacts div.row div.text h1 { display: block; position: relative; font-size: 1em; line-height: 23px; color: #ffffff; }
			#contacts div.contacts div.row div.text p { display: block; position: relative; font-size: 1em; line-height: 23px; color: #ffffff; }
			#contacts div.contacts div.row div.text h1.inline,
			#contacts div.contacts div.row div.text p.inline { display: inline-block; vertical-align: top; }

@media all and ( max-width: 1050px ) {
	#contacts div.contacts { margin: 15px 0 0 0; padding: 25px; }
}
@media all and ( max-width: 450px ) {
	#contacts div.contacts div.row { display: flex; }
}