body
{
	background-image:url(../img/puerto.jpg);
	 height: 100%;
	 background-repeat:no-repeat;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#map-canvas
{
	margin:auto;
	height:500px;
	position:relative;
	width:100%
}
.contaner
{
	width:100%;
	margin:0 auto;
}

#map {
		  width:100%;
		  height:520px;
		  text-align:center;
		  border-radius: 10px;
      }
	  
	  /*En pantallas con ancho maximo de 320px*/
	  
@media(max-width:320px)
{
	.container
	{
		width:100%;
		margin:0 auto;
	}
	#map-canvas
	{
		margin:auto;
		height:240px;
		position:relative;
		width:100%px;
	}
	
}

	  /*En pantallas con ancho maximo de 480px*/
	  
@media(max-width:480px)
{
	.container
	{
		width:100%;
		margin:0 auto;
	}
	#map-canvas
	{
		margin:auto;
		height:320px;
		position:relative;
		width:100%px;
	}
	
}

	  /*En pantallas con ancho maximo de 640px*/
	  
@media(max-width:640px)
{
	.container
	{
		width:100%;
		margin:0 auto;
	}
	#map-canvas
	{
		margin:auto;
		height:380px;
		position:relative;
		width:100%px;
	}
	
}

	  /*En pantallas con ancho maximo de 768px*/
	  
@media(max-width:768px)
{
	.container
	{
		width:100%;
		margin:0 auto;
	}
	#map-canvas
	{
		margin:auto;
		height:420px;
		position:relative;
		width:100%px;
	}
	
}