@media all and ( max-width: 799px )
{
	/* contactos */
	#contacts { display: block; position: relative; width: 100%; min-height: 100%; margin: 0 auto; padding: 0; overflow: hidden; }

		/* mapa */
		#contacts div#cmap { display: block; position: relative; width: 100%; height: 350px; padding: 0; z-index: 1; }

		/* legenda */
		#contacts div#mapLegend { display: block; position: relative; width: 100%; min-height: 200px; padding: 25px 0 0 0; margin: 0; background-color: #0584b5; overflow: hidden; z-index: 2; }
			#contacts div#mapLegend h2 { display: block; position: relative; font-family: 'FuturaMdBTBold', sans-serif; width: auto; color: #ffffff; font-size: 22px; line-height: 35px; text-align: center; margin: 0 10px 0 10px; }
			#contacts div#mapLegend h1 { display: block; position: relative; width: auto; color: #ffffff; font-size: 28px; line-height: 30px; text-align: center; margin: 10px 10px 0 10px; }
			#contacts div#mapLegend p { display: block; position: relative; width: auto; color: #ffffff; font-size: 12px; line-height: 15px; text-align: center; margin: 10px 10px 30px 10px; }
			#contacts div#mapLegend span { display: none; }
}
@media all and ( min-width: 800px )
{
	/* contactos */
	#contacts { display: block; position: relative; width: 100%; height: 100%; margin: 0 auto; padding: 0; overflow: hidden; }

		/* mapa */
		#contacts div#cmap { display: block; position: absolute; top: 0; left: 0; width: 100%; padding: 0; z-index: 1; }
		#contacts div#cmap
		{
			height: 100%;
			height: calc( 100% - 25px - 35px );
			height: -webkit-calc( 100% - 25px - 35px );
			height: -moz-calc( 100% - 25px - 35px );
		}

		/* legenda */
		#contacts div#mapLegend { display: block; position: absolute; top: 10px; left: 0; width: 60vw; padding: 55px 0 55px 0; margin: 0; background: transparent url(../../../../../src/img/contacts/bg.png) repeat; overflow: hidden; z-index: 2; }
			#contacts div#mapLegend h2 { display: block; position: absolute; top: 0; right: 10vw; font-family: 'FuturaMdBTBold', sans-serif; width: auto; color: #ffffff; font-size: 26px; line-height: 55px; }
			#contacts div#mapLegend h1 { display: block; position: relative; width: auto; color: #ffffff; font-size: 23px; line-height: 25px; text-align: right; margin: 10px 10vw 0 0; }
			#contacts div#mapLegend p { display: block; position: relative; width: auto; color: #ffffff; font-size: 12px; line-height: 15px; text-align: right; margin: 0 10vw 0 0; }
			#contacts div#mapLegend span { display: block; position: absolute; bottom: -63px; left: 50vw; margin: 0 0 0 -44px; width: 87px; height: 63px; background: transparent url(../../../../../src/img/contacts/arrow.png) no-repeat; }
}